chore: Add support for React 18 (#5)

* chore: Add support for React 18

* Fix children type definitions

Co-authored-by: Timur Manyanov <[email protected]>

.npmrc

@@ -1 +1 @@
-registry=https://registry.npmjs.org
+registry=https://registry.yarnpkg.com

package.json

@@ -66,12 +66,11 @@
     "@storybook/storybook-deployer": "^2.8.11",
     "@testing-library/dom": "^7.29.4",
     "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^12.1.5",
-    "@testing-library/react-hooks": "^7.0.1",
-    "@testing-library/user-event": "^12.6.3",
+    "@testing-library/react": "^13.0.0",
+    "@testing-library/user-event": "^13.0.0",
     "@types/classnames": "^2.2.11",
-    "@types/react": "^16.7",
-    "@types/react-dom": "^16.7",
+    "@types/react": "^18.0",
+    "@types/react-dom": "^18.0",
     "@types/testing-library__jest-dom": "^5.9.5",
     "@typescript-eslint/eslint-plugin": "^4.4.0",
     "@typescript-eslint/parser": "^4.10.0",
@@ -92,9 +91,9 @@
     "jest-pnp-resolver": "^1.0.1",
     "lint-staged": "^10.5.3",
     "node-require-context": "^1.0.0",
-    "react": "^16.0.0",
+    "react": "^18.0.0",
     "react-docgen-typescript-loader": "^3.7.2",
-    "react-dom": "^16.0.0",
+    "react-dom": "^18.0.0",
     "storybook-addon-jsx": "^7.3.14",
     "style-loader": "^2.0.0",
     "svgson": "^4.0.0",
@@ -104,6 +103,6 @@
   },
   "resolutions": {
     "@ebay/skin": "^13.0.0",
-    "@types/react": "^16.14.2"
+    "react-test-renderer": "^18.2.0"
   }
 }

src/common/component-utils/forwardRef.tsx

@@ -1,14 +1,15 @@
 import React, { FC, forwardRef } from 'react'
 
-const getDisplayName = Component => Component.displayName || Component.name || 'Component'
+const getDisplayName = <Props, >(Component: FC<Props>) => Component.displayName || Component.name || 'Component'
 
-// todo: type it, no idea how yet
+// Typescript will automatically find the return type crom forwardRef() function
+// Disabling eslint for this use case
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export const withForwardRef = <Props, >(Component: FC<Props>) => {
     const ForwardRef = forwardRef<FC<Props>, Props>((props, ref) =>
         <Component {...props} forwardedRef={ref} />)
 
-    ForwardRef.displayName = getDisplayName(Component)
+    ForwardRef.displayName = getDisplayName<Props>(Component)
 
     return ForwardRef
 }

src/common/event-utils/__tests__/use-key-press.spec.tsx

@@ -1,6 +1,4 @@
-import React from 'react'
-import { act, renderHook } from '@testing-library/react-hooks'
-import { fireEvent } from '@testing-library/react'
+import { act, renderHook, fireEvent } from '@testing-library/react'
 import useKeyPress from '../use-key-press'
 
 

src/common/event-utils/__tests__/use-roving-index.spec.tsx

@@ -1,6 +1,5 @@
 import React, { FC } from 'react'
-import { act, renderHook } from '@testing-library/react-hooks'
-import { fireEvent } from '@testing-library/react'
+import { act, renderHook, fireEvent } from '@testing-library/react'
 import useRovingIndex from '../use-roving-index'
 
 const TestComponent: FC = () => <div />

src/common/notice-utils/notice-content.tsx

@@ -1,9 +1,10 @@
-import React, { FC } from 'react'
+import React, { FC, ReactNode } from 'react'
 import cx from 'classnames'
 
 type Props = {
     type: 'inline' | 'section' | 'page';
     className?: string;
+    children?: ReactNode;
 }
 
 const NoticeContent: FC<Props> = ({ className, type, children }) => {

src/common/tooltip-utils/tooltip-content.tsx

@@ -1,4 +1,4 @@
-import React, { FC, CSSProperties } from 'react'
+import React, { FC, CSSProperties, ReactNode } from 'react'
 import { EbayIcon } from '../../ebay-icon'
 import { findComponent } from '../component-utils'
 import { PointerDirection, TooltipType } from './types'
@@ -13,6 +13,7 @@ type TooltipContentProps = {
     showCloseButton?: boolean;
     a11yCloseText?: string;
     onClose?: () => void;
+    children?: ReactNode;
 }
 
 const TooltipContent: FC<TooltipContentProps> = ({

src/ebay-dialog-base/__tests__/index.spec.tsx

@@ -5,6 +5,8 @@ import DialogBase from '../components/dialogBase';
 import EbayDialogHeader from '../components/dialog-header';
 import { HeaderFooterDialog } from './mocks';
 
+jest.useFakeTimers()
+
 describe('DialogBase', () => {
     it('should use id from header', () => {
         const wrapper = render(
@@ -63,6 +65,7 @@ describe('DialogBase', () => {
                 expect(spyCloseBtnClick).toHaveBeenCalled();
             });
             it('when background clicked then it should trigger onBackgroundClick event', () => {
+                jest.runAllTimers()
                 document.body.click();
                 expect(spyBackgroundClick).toHaveBeenCalled();
             });

src/ebay-dialog-base/components/dialog-close-button.tsx

@@ -1,5 +1,9 @@
-import React, { FC } from 'react'
+import React, { FC, ReactNode } from 'react'
 
-const EbayDialogCloseButton: FC = ({ children }) => <>{children}</>
+type EbayDialogFooterProps = {
+    children?: ReactNode;
+}
+
+const EbayDialogCloseButton: FC = ({ children }: EbayDialogFooterProps) => <>{children}</>
 
 export default EbayDialogCloseButton

src/ebay-dialog-base/components/dialog-footer.tsx

@@ -1,5 +1,9 @@
-import React, { FC } from 'react'
+import React, { FC, ReactNode } from 'react'
 
-const EbayDialogFooter:FC = ({ children }) => <>{children}</>
+type EbayDialogFooterProps = {
+    children?: ReactNode;
+}
+
+const EbayDialogFooter:FC<EbayDialogFooterProps> = ({ children }) => <>{children}</>
 
 export default EbayDialogFooter

src/ebay-dialog-base/components/dialogBase.tsx

@@ -7,7 +7,8 @@ import React, {
     useState,
     ReactElement,
     cloneElement,
-    MouseEventHandler
+    MouseEventHandler,
+    ReactNode
 } from 'react'
 import classNames from 'classnames'
 import * as screenreaderTrap from 'makeup-screenreader-trap'
@@ -42,7 +43,8 @@ export interface DialogBaseProps<T> extends HTMLProps<T> {
     closeButton?: ReactElement;
     focus?: RefObject<HTMLAnchorElement & HTMLButtonElement>;
     animated?: boolean;
-    transitionElement?: TransitionElement
+    transitionElement?: TransitionElement;
+    children?: ReactNode;
 }
 
 export const DialogBase: FC<DialogBaseProps<HTMLElement>> = ({
@@ -83,12 +85,18 @@ export const DialogBase: FC<DialogBaseProps<HTMLElement>> = ({
 
     useEffect(() => {
         const handleBackgroundClick = (e: React.MouseEvent) => {
-            if (drawerBaseEl && !drawerBaseEl.current.contains(e.target)) {
+            if (drawerBaseEl.current && !drawerBaseEl.current.contains(e.target)) {
                 onBackgroundClick(e)
             }
         }
         if (open) {
-            document.addEventListener('click', handleBackgroundClick as any, false)
+            // On React 18 useEffect hooks runs synchronous instead of asynchronous as React 17 or prior
+            // causing the event listener to be attached to the document at the same time that the dialog
+            // opens. Adding a timeout so the event is attached after the click event that opened the modal
+            // is finished.
+            setTimeout(() => {
+                document.addEventListener('click', handleBackgroundClick as any, false)
+            })
         }
         return () => document.removeEventListener('click', handleBackgroundClick as any, false)
     }, [onBackgroundClick, open])

src/ebay-field/field.tsx

@@ -1,10 +1,11 @@
-import React, { FC } from 'react'
+import React, { FC, ReactNode } from 'react'
 import classNames from 'classnames'
 import { FieldLayoutType } from './types'
 
 type FieldProps = {
     className?: string;
     layout?: FieldLayoutType;
+    children?: ReactNode;
 };
 
 const Field: FC<FieldProps> = ({

src/ebay-floating-label/hooks.tsx

@@ -18,7 +18,7 @@ type FloatingLabelHookReturn = {
     label: ReactNode;
     onBlur: () => void;
     onFocus: () => void;
-    Container: FC;
+    Container: FC<{ children?: ReactNode }>;
     ref: InputRef;
     placeholder: string;
 }
@@ -124,7 +124,7 @@ export function useFloatingLabel({
     })
 
     const FragmentContainer = useCallback(({ children }) => <>{children}</>, [])
-    const FloatingLabelContainer = useCallback(
+    const FloatingLabelContainer: FC<{ children?: ReactNode }> = useCallback(
         ({ children }) => <span className={floatingLabelClassName}>{children}</span>,
         [floatingLabelClassName]
     )

src/ebay-icon-button/__tests__/__snapshots__/index.spec.tsx.snap

@@ -47,7 +47,6 @@ exports[`Storyshots ebay-icon-button Transparent 1`] = `
 exports[`Storyshots ebay-icon-button With Badges 1`] = `
 <p>
   <button
-    badgearialabel="new feature available"
     class="icon-btn icon-btn--badged"
     type="button"
   >
@@ -65,6 +64,7 @@ exports[`Storyshots ebay-icon-button With Badges 1`] = `
     </svg>
     <span
       aria-hidden="true"
+      aria-label="new feature available"
       class="badge"
     >
       1

src/ebay-icon-button/icon-button.tsx

@@ -19,6 +19,7 @@ const EbayIconButton:FC<Props> = ({
     href,
     icon,
     badgeNumber,
+    badgeAriaLabel,
     transparent,
     className: extraClasses,
     ...rest
@@ -35,7 +36,7 @@ const EbayIconButton:FC<Props> = ({
     const children = (
         <>
             <EbayIcon name={icon} />
-            {badgeNumber && <EbayBadge type="icon" number={badgeNumber} />}
+            {badgeNumber && <EbayBadge type="icon" number={badgeNumber} aria-label={badgeAriaLabel} />}
         </>
     )
 

src/ebay-infotip/ebay-infotip-content.tsx

@@ -2,8 +2,12 @@
  * This Component is used only for finding it as a child of EbayInfotip
  * and pass the properties to TooltipContent
 */
-import React, { FC } from 'react'
+import React, { FC, ReactNode } from 'react'
 
-const EbayInfotipContent: FC = ({ children }) => <>{children}</>
+type EbayInfotipContentProps = {
+    children?: ReactNode;
+}
+
+const EbayInfotipContent: FC = ({ children }: EbayInfotipContentProps) => <>{children}</>
 
 export default EbayInfotipContent

src/ebay-infotip/ebay-infotip-host.tsx

@@ -1,4 +1,4 @@
-import React, { ComponentProps, FC, RefObject } from 'react'
+import React, { ComponentProps, FC, RefObject, ReactNode } from 'react'
 import classNames from 'classnames/dedupe'
 import { EbayIcon, Icon } from '../ebay-icon'
 import { withForwardRef } from '../common/component-utils/forwardRef'
@@ -8,6 +8,7 @@ type InfotipHostProps = ComponentProps<'button'> & {
     icon?: Icon;
     forwardedRef?: RefObject<HTMLAnchorElement & HTMLButtonElement>;
     variant?: Variant;
+    children?: ({ icon }) => ReactNode | ReactNode
 }
 
 const EbayInfotipHost: FC<InfotipHostProps> = ({

src/ebay-infotip/ebay-infotip.tsx

@@ -1,4 +1,4 @@
-import React, { cloneElement, createElement, CSSProperties, FC, useRef } from 'react'
+import React, { cloneElement, createElement, CSSProperties, FC, useRef, ReactNode } from 'react'
 import classNames from 'classnames'
 import { findComponent } from '../common/component-utils'
 import { Tooltip, TooltipHost, TooltipContent, PointerDirection, useTooltip } from '../common/tooltip-utils'
@@ -21,6 +21,7 @@ type InfotipProps = {
     a11yCloseText: string;
     'aria-label'?: string;
     className?: string;
+    children?: ReactNode;
 };
 
 const EbayInfotip: FC<InfotipProps> = ({

src/ebay-inline-notice/inline-notice.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect } from 'react'
+import React, { FC, useEffect, ReactNode } from 'react'
 import classNames from 'classnames'
 import { EbayNoticeContent } from '../ebay-notice-base/components/ebay-notice-content'
 import NoticeContent from '../common/notice-utils/notice-content'
@@ -12,6 +12,7 @@ type Props = {
     'aria-label': string;
     hidden?: boolean;
     className?: string
+    children?: ReactNode;
 }
 
 const EbayInlineNotice: FC<Props> = ({

src/ebay-notice-base/components/ebay-notice-title/notice-title.tsx

@@ -1,6 +1,10 @@
-import React, { FC } from 'react'
+import React, { FC, ReactNode } from 'react'
 
-const EbayNoticeTitle: FC = ({ children }) => (
+type EbayNoticeTitleProps = {
+    children?: ReactNode;
+}
+
+const EbayNoticeTitle: FC = ({ children }: EbayNoticeTitleProps) => (
     <span className="page-notice__title">
         {children}
     </span>

src/ebay-page-notice/page-notice-footer.tsx

@@ -1,8 +1,9 @@
-import React, { FC } from 'react'
+import React, { FC, ReactNode } from 'react'
 import NoticeFooter from '../common/notice-utils/notice-footer'
 
 type Props = {
     className?: string;
+    children?: ReactNode;
 }
 
 const EbayPageNoticeFooter: FC<Props> = ({ className, children }) => (

src/ebay-progress-stepper/ebay-progress-step.tsx

@@ -1,4 +1,4 @@
-import React, { Children, FC, ReactElement } from 'react'
+import React, { Children, FC, ReactElement, ReactNode } from 'react'
 import classNames from 'classnames'
 import { EbayIcon, Icon } from '../ebay-icon'
 import { StepState, StepType } from './types'
@@ -10,6 +10,7 @@ export type EbayProgressStepProps = {
     current?: boolean;
     number?: number;
     className?: string;
+    children?: ReactNode;
 }
 
 const typeClasses: { [key in StepType]: string } = {

src/ebay-progress-stepper/ebay-progress-stepper.tsx

@@ -1,4 +1,4 @@
-import React, { Children, cloneElement, FC, Fragment, ReactElement } from 'react'
+import React, { Children, cloneElement, FC, Fragment, ReactElement, ReactNode } from 'react'
 import classNames from 'classnames'
 import { StepperDirection, StepState, StepType } from './types'
 import { EbayProgressStepProps } from './ebay-progress-step'
@@ -7,6 +7,7 @@ type ProgressStepperProps = {
     direction?: StepperDirection;
     defaultState?: StepState;
     className?: string;
+    children?: ReactNode;
 }
 
 const EbayProgressStepper: FC<ProgressStepperProps> = ({

src/ebay-progress-stepper/ebay-progress-title.tsx

@@ -1,7 +1,8 @@
-import { createElement, FC } from 'react'
+import { createElement, FC, ReactNode } from 'react'
 
 type Props = {
     as?: string;
+    children?: ReactNode;
 }
 
 const EbayProgressTitle: FC<Props> = ({

src/ebay-section-notice/section-notice-footer.tsx

@@ -1,8 +1,9 @@
-import React, { FC } from 'react'
+import React, { FC, ReactNode } from 'react'
 import NoticeFooter from '../common/notice-utils/notice-footer'
 
 type Props = {
     className?: string;
+    children?: ReactNode;
 }
 
 const EbaySectionNoticeFooter: FC<Props> = ({ className, children }) => (