React18_integration_FINAL_v3 (#1926)

* adding back everything

* update mdx-js package, update storybook peerDep react version

* React.PropsWithChildren changeset

* add transition changeset

* formfooter changeset

* guidecue changeset

* lib changeset

* modal changeset

* numberInput changeset

* remove position utils exports

* portal changeset

* revert search-input change

* segmented-control changeset

* side-nav changeset

* guide-cue and side-nav changeset tweaks

* side nav cs updates

* add ticket to fail table skeleton test

* table changeset

* tooltip changeset

* typo

* changeset changes and modal changes

* portal patch to major

* fix some combobox tests

* remove PropsWithChildren from Icon

* missed some PropsWithChildren in Icon

* remove PropsWithChildren from Logo

* rm disabled from menu story

* add back focus-visible to menu

* missed one

* remove PropsWithChildren from passeordInput and pipepline

* tooltip changeset

* tooltip changeset again

* changeset for tools/build

* number input changeset

* test that first menu item is focused

* menu, return single value instead of object

* update polymorphic error comment

* poly and guideCcue comments

* guideCue comments

* transition types updates

* var for index

* tooltip tests

* updates submenu types, builds in react17/18

* React18 select internal props (#1927)

* update select to accept internal props

* fix

* update changeset

* updates changesets

* react transition group changeset

* code changeset

* combobox changeset

* icon changeset

* lib changetset

* update lib changeset

* select changeset

* testing-lib changeset

* tooltip changeset

* storybook tools changeset

* update storybook changeset

* fix lint

* fix checks?

* add internal prop to skipProps

* testing

* test changesets

* update changesets

* remove number-input CustomSelectMenuButton

* update __INTERNAL__menuButtonSlotProps__ type

* add focusTrapOptions type

* revert menu changes

* fix TS error

* remoe table todo

* fix validate errors

* fix syntax

* remove disabled from headerRow story

* remove table README changeset

.changeset/angry-rice-reply.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/form-footer': patch
+---
+
+Updates `PrimaryButton` type from `React.ReactChild` to `React.ReactElement`.

.changeset/beige-books-fly.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/testing-lib': patch
+---
+
+Fixes `isPromiseLike` TS errors

.changeset/cold-planes-change.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/portal': major
+---
+
+Modified the ReactDOM peerDependency to ensure compatibility with either version 17 or 18.

.changeset/cuddly-donkeys-sit.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/icon': patch
+---
+
+Updates internal function, `isComponentGlyph`

.changeset/curvy-cheetahs-tap.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/lib': patch
+---
+
+Updates helper function, `isComponentType` and updates `ExtendedComponentProps` type.

.changeset/cyan-squids-kick.md

@@ -0,0 +1,5 @@
+---
+'@lg-tools/build': patch
+---
+
+adds `@babel/core` as a peerDependency.

.changeset/dull-meals-press.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/segmented-control': patch
+---
+
+Refactor internal function `childrenIdList`.

.changeset/eleven-trees-deny.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/combobox': patch
+---
+
+Type assert children as `Array<React.ReactNode>` inside the internal function `renderedMenuContents` and add explicit return type to internal function `renderCombobox`.

.changeset/forty-crews-promise.md

@@ -0,0 +1,7 @@
+---
+'@leafygreen-ui/guide-cue': major
+---
+
+Downgrades `focus-trap-react` package to `^9.0.2` so that tests still pass without requiring the use of the `fallbackFocus` option on the `<FocusTrap>` component. 
+
+Refactors multi-step guideCue so that the tooltip no longer uses a portal, as React 18 displays the tooltip in the wrong position when the viewport changes.

.changeset/friendly-planets-tan.md

@@ -0,0 +1,7 @@
+---
+'@leafygreen-ui/tooltip': patch
+---
+
+Adds the `setOpen()` state update inside `onMouseEnter` inside the [flushSync](https://react.dev/reference/react-dom/flushSync) callback to prevent batch updates in React 18. This addresses an issue where the tooltip would occasionally appear without a transition, particularly when hovering. This should have no impact on behavior in React 17.
+
+Adds an additional check, `isValidElement(trigger)` when checking if the trigger is a LeafyGreenUI Icon or Glyph component.

.changeset/good-deers-repeat.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/menu': patch
+---
+
+Internally refactored how we deal with refs to a Menu component's children to better handle keyboard navigation.

.changeset/grumpy-bats-protect.md

@@ -0,0 +1,5 @@
+---
+'@lg-tools/storybook-decorators': minor
+---
+
+Move `@leafygreen-ui/leafygreen-provider` inside `peerDependencies`.

.changeset/mean-cats-watch.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/select': patch
+---
+
+Bumps `@types/react-is` and `react-is` to latest major version

.changeset/ninety-rice-think.md

@@ -0,0 +1,8 @@
+---
+'@leafygreen-ui/expandable-card': patch
+'@leafygreen-ui/checkbox': patch
+'@leafygreen-ui/side-nav': patch
+'@leafygreen-ui/table': patch
+---
+
+Adds a `nodeRef` to <Transition> to get rid of StrictMode warnings

.changeset/popular-suits-wait.md

@@ -0,0 +1,5 @@
+---
+'@lg-tools/test': minor
+---
+
+Upgrade `jest` and `testing-library` packages to support React 18

.changeset/quick-geckos-leave.md

@@ -0,0 +1,7 @@
+---
+'@leafygreen-ui/side-nav': major
+---
+
+Refactors the `CollapseToggle` tooltip so that it no longer uses a portal, as React 18 displays the tooltip in the wrong position when the side nav is toggled. 
+
+Refactor the internal function, `renderedChildren`.

.changeset/red-pens-knock.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/select': patch
+---
+
+Adds new internal prop, `__INTERNAL__menuButtonSlotProps__`.

.changeset/selfish-bobcats-eat.md

@@ -0,0 +1,6 @@
+---
+'@leafygreen-ui/guide-cue': patch
+'@leafygreen-ui/modal': patch
+---
+
+Add `focusTrapOptions` type

.changeset/selfish-phones-give.md

@@ -0,0 +1,7 @@
+---
+'@lg-tools/storybook': minor
+---
+
+Bump `@mdx-js/react` to the latest major version, `2.3.0`. This version will not work with React 17.
+
+Modified the ReactDOM peerDependency to ensure compatibility with either version 17 or 18.

.changeset/seven-panthers-battle.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/lib': major
+---
+
+Modified the React peerDependency to ensure compatibility with either version 17 or 18.

.changeset/shaggy-pears-drum.md

@@ -0,0 +1,5 @@
+---
+'@lg-tools/storybook': patch
+---
+
+Modified the React peerDependency to ensure compatibility with either version 17 or 18.

.changeset/sharp-timers-lick.md

@@ -0,0 +1,6 @@
+---
+'@leafygreen-ui/number-input': patch
+'@leafygreen-ui/code': patch
+---
+
+Move custom select menu button into separate components and passes custom select menu button props to new internal select prop, `__INTERNAL__menuButtonSlotProps__`.

.changeset/silly-buttons-greet.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/modal': major
+---
+
+Upgrades `focus-trap-react` package to `^9.0.2` to maintain uniformity across other LG components using this package.

.changeset/sour-ducks-change.md

@@ -0,0 +1,13 @@
+---
+'@leafygreen-ui/polymorphic': patch
+'@leafygreen-ui/callout': patch
+'@leafygreen-ui/banner': patch
+'@leafygreen-ui/table': patch
+'@leafygreen-ui/toast': patch
+'@leafygreen-ui/logo': patch
+'@leafygreen-ui/menu': patch
+'@leafygreen-ui/box': patch
+'@leafygreen-ui/lib': patch
+---
+
+Updates types with `React.PropsWithChildren`

.changeset/spotty-onions-work.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/code': patch
+---
+
+Updates LanguageSwitcher hover styles specificity to `&:hover[aria-disabled='false']`.

.changeset/swift-deers-enjoy.md

@@ -0,0 +1,7 @@
+---
+'@leafygreen-ui/tooltip': patch
+---
+
+Updates `PopoverFunctionParameters` interface to use `PopoverAlign` alias.
+
+Omit `children` from `PopoverProps` since it was overriding `Tooltip` children.

.changeset/swift-rockets-exist.md

@@ -0,0 +1,11 @@
+---
+'@leafygreen-ui/expandable-card': patch
+'@leafygreen-ui/checkbox': patch
+'@leafygreen-ui/popover': patch
+'@leafygreen-ui/modal': patch
+'@leafygreen-ui/table': patch
+'@leafygreen-ui/toast': patch
+'@leafygreen-ui/menu': patch
+---
+
+Bumps `react-transition-group` to `^4.4.5`.

.changeset/two-games-carry.md

@@ -0,0 +1,7 @@
+---
+'@leafygreen-ui/number-input': patch
+---
+
+Adds the `setOpen()` state update inside the [flushSync](https://react.dev/reference/react-dom/flushSync) callback to prevent batch updates in React 18. This addresses an issue where the unit tooltip would occasionally appear without a transition, particularly when hovering. This should have no impact on behavior in React 17.
+
+Updates `README` code snippet.

__mocks__/tabbable.js

@@ -0,0 +1,16 @@
+// https://github.com/focus-trap/tabbable#testing-in-jsdom
+const lib = jest.requireActual('tabbable');
+
+const tabbable = {
+  ...lib,
+  tabbable: (node, options) =>
+    lib.tabbable(node, { ...options, displayCheck: 'none' }),
+  focusable: (node, options) =>
+    lib.focusable(node, { ...options, displayCheck: 'none' }),
+  isFocusable: (node, options) =>
+    lib.isFocusable(node, { ...options, displayCheck: 'none' }),
+  isTabbable: (node, options) =>
+    lib.isTabbable(node, { ...options, displayCheck: 'none' }),
+};
+
+module.exports = tabbable;

package.json

@@ -30,32 +30,32 @@
     "validate": "lg validate"
   },
   "devDependencies": {
-    "@babel/core": "^7.9.0",
+    "@babel/core": "7.21.8",
     "@changesets/cli": "^2.26.0",
     "@lg-tools/cli": "*",
     "@lg-tools/meta": "*",
     "@lg-tools/slackbot": "*",
     "@lg-tools/storybook": "*",
     "@lg-tools/storybook-decorators": "*",
     "@types/lodash": "^4.14.170",
-    "@types/react": "^16.9.56",
-    "@types/react-dom": "^16.9.9",
-    "@types/react-transition-group": "4.4.1",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@types/react-transition-group": "^4.4.6",
     "chromatic": "^6.17.2",
     "dotenv": "^10.0.0",
     "gh-pages": "^3.1.0",
     "npm-run-all": "^4.1.5",
     "prop-types": "^15.7.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-router-dom": "5.2.0",
     "storybook": "7.1.1",
     "turbo": "^1.10.7",
     "typescript": "~4.7.0"
   },
   "resolutions": {
     "caniuse-lite": "^1.0.30001135",
-    "@types/react": "^16.9.56"
+    "@types/react-transition-group/@types/react": "^17.0.2"
   },
   "workspaces": [
     "packages/*",

packages/banner/src/Banner.story.tsx

@@ -41,6 +41,7 @@ const meta: StoryMetaType<typeof Banner> = {
     dismissible: false,
   },
   argTypes: {
+    darkMode: storybookArgTypes.darkMode,
     dismissible: {
       control: 'boolean',
     },

packages/banner/src/BannerIcon/BannerIcon.tsx

@@ -16,7 +16,10 @@ import {
 } from './styles';
 import BannerIconProps from './types';
 
-const Icons: Record<Variant, React.ComponentType<any>> = {
+const Icons: Record<
+  Variant,
+  React.ComponentType<React.PropsWithChildren<any>>
+> = {
   [Variant.Info]: InfoWithCircleIcon,
   [Variant.Warning]: ImportantWithCircleIcon,
   [Variant.Danger]: WarningIcon,

packages/box/src/Box.tsx

@@ -47,7 +47,7 @@ type BoxComponent<TProps = {}, ExtraProps = {}> = Override2<
     /**
      * The component or HTML Element that the button is rendered as.
      */
-    as: React.ComponentType<TProps>;
+    as: React.ComponentType<React.PropsWithChildren<TProps>>;
   },
   ExtraProps
 >;
@@ -115,7 +115,9 @@ export interface ExtendableBox<
   ExtraProps,
   Default extends React.ElementType = 'div',
 > extends Pick<
-    React.FunctionComponent<BoxProps<Default, ExtraProps>>,
+    React.FunctionComponent<
+      React.PropsWithChildren<BoxProps<Default, ExtraProps>>
+    >,
     'displayName' | 'propTypes'
   > {
   <TElement extends keyof JSX.IntrinsicElements>(

packages/callout/src/Callout/styles.ts

@@ -73,7 +73,10 @@ export const headerLabels: Record<Variant, string> = {
   [Variant.Example]: 'Example',
 } as const;
 
-export const headerIcons: Record<Variant, React.ComponentType<any>> = {
+export const headerIcons: Record<
+  Variant,
+  React.ComponentType<React.PropsWithChildren<any>>
+> = {
   [Variant.Note]: InfoWithCircleIcon,
   [Variant.Tip]: BulbIcon,
   [Variant.Important]: ImportantWithCircleIcon,

packages/checkbox/package.json

@@ -29,7 +29,7 @@
     "@leafygreen-ui/palette": "^4.0.7",
     "@leafygreen-ui/tokens": "^2.1.4",
     "@leafygreen-ui/typography": "^16.5.4",
-    "react-transition-group": "^4.4.1"
+    "react-transition-group": "^4.4.5"
   },
   "peerDependencies": {
     "@leafygreen-ui/leafygreen-provider": "^3.1.6"

packages/checkbox/src/Check/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { Transition } from 'react-transition-group';
 
 import { usePrefersReducedMotion } from '@leafygreen-ui/a11y';
@@ -56,6 +56,8 @@ export function Check({
   const showCheckIcon = indeterminate || isChecked;
   const shouldAnimate = animate && !indeterminate && !prefersReducedMotion;
 
+  const transitionRef = useRef<HTMLElement | null>(null);
+
   return (
     <>
       <div
@@ -72,6 +74,7 @@ export function Check({
           timeout={prefersReducedMotion ? 0 : checkAnimationDuration}
           enter={shouldAnimate}
           exit={shouldAnimate}
+          nodeRef={transitionRef}
         >
           {state => (
             <CheckSVG

packages/code/src/CustomSelectMenuButton/CustomSelectMenuButton.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import Button, { ButtonProps } from '@leafygreen-ui/button';
+
+/**
+ * Custom language switcher button.
+ *
+ * Passing down just the function which will be instantiated inside `Select`
+ * @internal
+ */
+export const CustomSelectMenuButton = React.forwardRef(
+  ({ children, ...props }: ButtonProps, ref) => (
+    <Button {...props} ref={ref}>
+      {children}
+    </Button>
+  ),
+);
+
+CustomSelectMenuButton.displayName = 'CustomSelectMenuButton';

packages/code/src/CustomSelectMenuButton/index.ts

@@ -0,0 +1 @@
+export { CustomSelectMenuButton } from './CustomSelectMenuButton';