[LG-5490] chore: React17 compatibility

.changeset/drawer-component-props.md

@@ -0,0 +1,5 @@
+---
+'@lg-chat/drawer': patch
+---
+
+Updates `DrawerLayoutProps` to extend `ComponentPropsWithoutRef<'div'>`

.changeset/react-component-props.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/lib': patch
+---
+
+Deprecates `HTMLElementProps`. Prefer the built-in React type `ComponentProps`

.changeset/rich-links-component-props.md

@@ -0,0 +1,5 @@
+---
+'@lg-chat/rich-links': patch
+---
+
+Updates `RichLinkProps` to extend `ComponentPropsWithoutRef<'a'>`

.changeset/rtl-overrides.md

@@ -0,0 +1,6 @@
+---
+'@leafygreen-ui/testing-lib': minor
+---
+
+Exports types `RenderHookOptions` & `RenderHookResult`.
+Updates type signature of `renderHook`

charts/core/src/Echart/useEchart.spec.ts

@@ -1,9 +1,10 @@
 import { act } from 'react-dom/test-utils';
 
-import { renderHook } from '@leafygreen-ui/testing-lib';
+import { renderHook, RenderHookResult } from '@leafygreen-ui/testing-lib';
 
 import { type SeriesOption } from '../Chart';
 
+import { EChartsInstance } from './Echart.types';
 import { useEchart } from './useEchart';
 
 // Mock echarts instance creation with all required methods
@@ -48,12 +49,10 @@ jest.mock('echarts/renderers', () => ({
 // Helper function to wait for hook initialization and state updates
 const setupHook = async () => {
   const mockContainer = document.createElement('div');
-  let result: ReturnType<
-    typeof renderHook<ReturnType<typeof useEchart>, void>
-  >['result'];
+  let result: RenderHookResult<any, EChartsInstance>['result'];
 
   await act(async () => {
-    const hookResult = renderHook(() =>
+    const hookResult = renderHook<any, EChartsInstance>(() =>
       useEchart({ theme: 'dark', container: mockContainer }),
     );
     result = hookResult.result;

chat/message-feed/src/utils/MessageFeed.testutils.ts

@@ -22,7 +22,7 @@ type MongoMessageFields = MessageFieldsBase & {
 
 export type MessageFields = UserMessageFields | MongoMessageFields;
 
-export const baseMessages: Array<MessageFields> = [
+export const baseMessages = [
   {
     id: 1,
     messageBody: 'Hi! Ask me anything.',
@@ -74,4 +74,4 @@ Refer to [LeafyGreen UI](mongodb.design) or [LeafyGreen UI](mongodb.design) for
         console.log(`Message 6 was ${e.target.value}.`),
     },
   },
-] as const;
+] as const satisfies Readonly<Array<MessageFields>>;

chat/rich-links/src/RichLink/RichLink.types.ts

@@ -1,11 +1,13 @@
-import { DarkModeProps, HTMLElementProps } from '@leafygreen-ui/lib';
+import { ComponentPropsWithoutRef } from 'react';
+
+import { DarkModeProps } from '@leafygreen-ui/lib';
 
 import { RichLinkBadgeProps } from './RichLinkBadge/RichLinkBadge.types';
 import { RichLinkVariantName } from './richLinkVariants';
 
 export interface BaseRichLinkProps
   extends DarkModeProps,
-    HTMLElementProps<'a', never> {
+    ComponentPropsWithoutRef<'a'> {
   /**
    * The text that shows on the rich link
    */

packages/avatar/src/Avatar/Avatar.spec.tsx

@@ -36,7 +36,7 @@ describe('packages/Avatar', () => {
     /**
      * TEXT FORMAT
      */
-    // @ts-expect-error - Requires `text` prop
+    // @ts-ignore React18-expect-error - Requires `text` prop FIXME: React17 types
     <Avatar format="text" />;
     // Accepts null text prop
     <Avatar format="text" text={null} />;
@@ -55,7 +55,7 @@ describe('packages/Avatar', () => {
       Format.Text,
     ]) as Format;
 
-    // @ts-expect-error - requires defined text prop
+    // @ts-ignore React18-expect-error - Requires `text` prop FIXME: React17 types
     <Avatar format={arbitraryFormat} />;
     // Accepts null text prop
     <Avatar format={arbitraryFormat} text={null} />;

packages/button/src/Button/Button.spec.tsx

@@ -14,7 +14,10 @@ const title = 'Test button title';
 const child = 'Button child';
 
 function renderButton(props: ButtonProps = {}) {
-  const utils = render(<Button {...props} data-testid="button-id" />);
+  const utils = render(
+    // @ts-ignore React17 types
+    <Button {...props} data-testid="button-id" />,
+  );
   const { getButton, isDisabled } = getTestUtils();
   const button = getButton();
   return { ...utils, button, isDisabled };

packages/card/src/Card/Card.spec.tsx

@@ -2,8 +2,6 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import { axe } from 'jest-axe';
 
-import { InferredPolymorphicProps } from '@leafygreen-ui/polymorphic';
-
 import { Card, CardProps, ContentStyle } from '.';
 
 const defaultClassName = 'card-className';
@@ -15,20 +13,15 @@ function isVisuallyClickable(element: HTMLElement): boolean {
   );
 }
 
-type DivLikeProps = InferredPolymorphicProps<'div', CardProps>;
-
-type AnchorLikeProps = InferredPolymorphicProps<'a', CardProps>;
-
-type CardRenderProps = DivLikeProps | AnchorLikeProps;
-
 function renderCard({
   children = defaultChildren,
   className = defaultClassName,
   ...rest
-}: CardRenderProps = {}) {
+}: CardProps = {}) {
   const cardId = 'cardID';
 
   const { container, getByTestId } = render(
+    // @ts-ignore React17 types
     <Card data-testid={cardId} className={className} {...rest}>
       {children}
     </Card>,

packages/date-picker/src/DatePicker/DatePicker.keyboard2.spec.tsx

@@ -190,7 +190,9 @@ describe('DatePicker keyboard interaction', () => {
       expect(monthSelect).toHaveFocus();
 
       userEvent.keyboard('[Enter]');
-      await waitFor(() => jest.advanceTimersByTime(transitionDuration.default));
+      await waitFor(() => {
+        jest.advanceTimersByTime(transitionDuration.default);
+      });
 
       const options = await findAllByRole('option');
       const firstOption = options[0];

packages/date-picker/src/shared/components/Calendar/CalendarCell/CalendarCell.spec.tsx

@@ -5,7 +5,7 @@ import userEvent from '@testing-library/user-event';
 import { CalendarCell, CalendarCellState } from '.';
 
 /** Ensures valid DOM nesting when testing CalendarCells */
-const TestCellWrapper = ({ children }: PropsWithChildren) => (
+const TestCellWrapper = ({ children }: PropsWithChildren<{}>) => (
   <table>
     <tbody>
       <tr data-testid="tr">{children}</tr>

packages/date-picker/src/shared/hooks/useControlledValue/useControlledValue.spec.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { ChangeEventHandler } from 'react';
 import { render } from '@testing-library/react';
-import { RenderHookResult } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { act, renderHook } from '@leafygreen-ui/testing-lib';
@@ -12,15 +11,12 @@ const errorSpy = jest.spyOn(console, 'error');
 
 const renderUseControlledValueHook = <T extends any>(
   ...[valueProp, callback, initial]: Parameters<typeof useControlledValue<T>>
-): RenderHookResult<
-  ReturnType<typeof useControlledValue<T>>,
-  typeof valueProp
-> => {
+) => {
   const result = renderHook(v => useControlledValue(v, callback, initial), {
     initialProps: valueProp,
   });
 
-  return { ...result };
+  return result;
 };
 
 describe('packages/date-picker/hooks/useControlledValue', () => {

packages/descendants/src/Descendants/Descendants.spec.tsx

@@ -183,7 +183,8 @@ describe('packages/descendants', () => {
         </>,
       );
 
-      const appleDescendant = hook.result.current.descendants[0];
+      const current = hook.result.current;
+      const appleDescendant = current!.descendants?.[0];
       expect(appleDescendant).toBeDefined();
     });
 
@@ -199,7 +200,8 @@ describe('packages/descendants', () => {
         </>,
       );
 
-      const appleDescendant = hook.result.current.descendants[0];
+      const current = hook.result.current;
+      const appleDescendant = current!.descendants?.[0];
       expect(appleDescendant).toBeDefined();
     });
 
@@ -211,9 +213,9 @@ describe('packages/descendants', () => {
           <TestDescendant>Banana</TestDescendant>
         </>,
       );
-
+      const current = hook.result.current;
       const appleElement = renderResult.getByTestId('apple');
-      const appleDescendant = hook.result.current.descendants[0];
+      const appleDescendant = current!.descendants?.[0];
       expect(appleDescendant).toBeDefined();
       expect(appleDescendant.element).toEqual(appleElement);
     });
@@ -226,7 +228,8 @@ describe('packages/descendants', () => {
         </>,
       );
 
-      const appleDescendant = hook.result.current.descendants[0];
+      const current = hook.result.current;
+      const appleDescendant = current!.descendants?.[0];
       expect(appleDescendant.index).toEqual(0);
     });
 
@@ -238,7 +241,8 @@ describe('packages/descendants', () => {
         </>,
       );
 
-      const appleDescendant = hook.result.current.descendants[0];
+      const current = hook.result.current;
+      const appleDescendant = current!.descendants?.[0];
       expect(appleDescendant.props?.group).toEqual('fruit');
     });
 
@@ -259,7 +263,8 @@ describe('packages/descendants', () => {
         </>,
       );
 
-      const appleDescendant = hook.result.current.descendants[2];
+      const current = hook.result.current;
+      const appleDescendant = current!.descendants?.[2];
       expect(appleDescendant.element).toHaveTextContent('Apple');
       expect(appleDescendant.index).toEqual(2);
     });
@@ -280,8 +285,11 @@ describe('packages/descendants', () => {
         </>,
       );
 
-      for (let i = 0; i < hook.result.current.descendants.length; i++) {
-        const descendant = hook.result.current.descendants[i];
+      const current = hook.result.current;
+      const descendantCount = current!.descendants?.length ?? 0;
+
+      for (let i = 0; i < descendantCount; i++) {
+        const descendant = current!.descendants?.[i];
         expect(descendant.index).toEqual(i);
       }
     });

packages/descendants/src/testUtils/renderDescendantsTestContext.testutils.tsx

@@ -1,9 +1,9 @@
 import React, { ReactNode } from 'react';
-import { render, RenderHookResult, RenderResult } from '@testing-library/react';
+import { render, RenderResult } from '@testing-library/react';
 
-import { renderHook } from '@leafygreen-ui/testing-lib';
+import { renderHook, RenderHookResult } from '@leafygreen-ui/testing-lib';
 
-import { InitDescendantsReturnObject } from '../Descendants/useInitDescendants';
+import { type InitDescendantsReturnObject } from '../Descendants/useInitDescendants';
 import { useInitDescendants } from '..';
 
 import { TestDescendantContext } from './components.testutils';

packages/drawer/src/DrawerLayout/DrawerLayout.types.ts

@@ -1,12 +1,14 @@
-import { DarkModeProps, HTMLElementProps } from '@leafygreen-ui/lib';
+import { ComponentPropsWithoutRef } from 'react';
+
+import { DarkModeProps } from '@leafygreen-ui/lib';
 
 import { DrawerProps } from '../Drawer/Drawer.types';
 import { DrawerToolbarLayoutProps } from '../DrawerToolbarLayout';
 
 type PickedDrawerProps = Pick<DrawerProps, 'onClose' | 'size'>;
 
 export interface BaseDrawerLayoutPropsWithoutDisplayMode
-  extends HTMLElementProps<'div'>,
+  extends ComponentPropsWithoutRef<'div'>,
     DarkModeProps,
     PickedDrawerProps {
   children: React.ReactNode;

packages/drawer/src/DrawerToolbarLayout/DrawerToolbarLayout/DrawerToolbarLayout.spec.tsx

@@ -41,7 +41,7 @@ const Component = ({
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
-    return '🌻';
+    return <>🌻</>;
   };
 
   return (

packages/form-field/src/FormField.spec.tsx

@@ -648,7 +648,7 @@ describe('packages/form-field', () => {
   // eslint-disable-next-line jest/no-disabled-tests
   test.skip('Types', () => {
     render(
-      // @ts-expect-error - label is required
+      // @ts-ignore React18-expect-error - label is required
       <FormField>
         <div />
       </FormField>,

packages/hooks/src/useDynamicRefs/useDynamicRefs.spec.tsx

@@ -1,4 +1,3 @@
-// import { renderHook } from '@testing-library/react-hooks';
 import { consoleOnce } from '@leafygreen-ui/lib';
 import { renderHook } from '@leafygreen-ui/testing-lib';
 

packages/hooks/src/useFirstRender/useFirstRender.spec.ts

@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react';
+import { renderHook } from '@leafygreen-ui/testing-lib';
 
 import { useFirstRender } from '.';
 

packages/leafygreen-provider/src/MigrationContext/MigrationContext.spec.tsx

@@ -24,7 +24,7 @@ describe('useMigrationContext', () => {
   test('passes provider props correctly', () => {
     const customProps = { forceUseTopLayer: true };
     const { result } = renderHook(useMigrationContext, {
-      wrapper: ({ children }) => (
+      wrapper: ({ children }: any) => (
         <MigrationProvider {...customProps}>{children}</MigrationProvider>
       ),
     });

packages/leafygreen-provider/src/PopoverContext/PopoverContext.spec.tsx

@@ -50,7 +50,9 @@ describe('usePopoverContext', () => {
 
   test('`setIsPopoverOpen` updates the value of `isPopoverOpen`', async () => {
     const { result, rerender } = renderHook(usePopoverContext, {
-      wrapper: ({ children }) => <PopoverProvider>{children}</PopoverProvider>,
+      wrapper: ({ children }: any) => (
+        <PopoverProvider>{children}</PopoverProvider>
+      ),
     });
 
     act(() => result.current.setIsPopoverOpen(true));

packages/leafygreen-provider/src/PopoverPropsContext/PopoverPropsContext.spec.tsx

@@ -32,7 +32,7 @@ describe('usePopoverPropsContext', () => {
       usePortal: true,
     };
     const { result } = renderHook(usePopoverPropsContext, {
-      wrapper: ({ children }) => (
+      wrapper: ({ children }: any) => (
         <PopoverPropsProvider {...customProps}>{children}</PopoverPropsProvider>
       ),
     });

packages/lib/src/index.ts

@@ -36,7 +36,11 @@ export { isComponentType, validateChildren } from './validateChildren';
 export { createUniqueClassName, getNodeTextContent, getTheme, Theme, typeIs };
 export type { DarkModeProps, LgIdProps, LgIdString };
 
-/** Helper type to extract an HTML element's valid props */
+/**
+ * Helper type to extract an HTML element's valid props
+ *
+ * @deprecated - Prefer the built-in React type {@link React.ComponentProps}
+ * */
 export type HTMLElementProps<
   Element extends keyof JSX.IntrinsicElements,
   RefType extends HTMLElement = never,