From 4fcf2e94d1b342270be54b151c2246bb48c2bc47 Mon Sep 17 00:00:00 2001 From: Shaneeza Date: Tue, 22 Aug 2023 17:08:56 -0400 Subject: [PATCH] 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 | 5 + .changeset/beige-books-fly.md | 5 + .changeset/cold-planes-change.md | 5 + .changeset/cuddly-donkeys-sit.md | 5 + .changeset/curvy-cheetahs-tap.md | 5 + .changeset/cyan-squids-kick.md | 5 + .changeset/dull-meals-press.md | 5 + .changeset/eleven-trees-deny.md | 5 + .changeset/forty-crews-promise.md | 7 + .changeset/friendly-planets-tan.md | 7 + .changeset/good-deers-repeat.md | 5 + .changeset/grumpy-bats-protect.md | 5 + .changeset/mean-cats-watch.md | 5 + .changeset/ninety-rice-think.md | 8 + .changeset/popular-suits-wait.md | 5 + .changeset/quick-geckos-leave.md | 7 + .changeset/red-pens-knock.md | 5 + .changeset/selfish-bobcats-eat.md | 6 + .changeset/selfish-phones-give.md | 7 + .changeset/seven-panthers-battle.md | 5 + .changeset/shaggy-pears-drum.md | 5 + .changeset/sharp-timers-lick.md | 6 + .changeset/silly-buttons-greet.md | 5 + .changeset/sour-ducks-change.md | 13 + .changeset/spotty-onions-work.md | 5 + .changeset/swift-deers-enjoy.md | 7 + .changeset/swift-rockets-exist.md | 11 + .changeset/two-games-carry.md | 7 + __mocks__/tabbable.js | 16 + package.json | 14 +- packages/banner/src/Banner.story.tsx | 1 + packages/banner/src/BannerIcon/BannerIcon.tsx | 5 +- packages/box/src/Box.tsx | 6 +- packages/callout/src/Callout/styles.ts | 5 +- packages/checkbox/package.json | 2 +- packages/checkbox/src/Check/index.tsx | 5 +- .../CustomSelectMenuButton.tsx | 19 + .../code/src/CustomSelectMenuButton/index.ts | 1 + .../LanguageSwitcher.styles.ts | 10 +- .../src/LanguageSwitcher/LanguageSwitcher.tsx | 25 +- .../combobox/src/Combobox/Combobox.spec.tsx | 17 +- .../src/ComboboxMenu/ComboboxMenu.tsx | 2 +- .../combobox/src/utils/ComboboxTestUtils.tsx | 3 +- packages/expandable-card/package.json | 2 +- .../src/ExpandableCard/ExpandableCard.tsx | 8 +- packages/form-footer/src/FormFooter.tsx | 6 +- packages/guide-cue/package.json | 3 +- packages/guide-cue/src/GuideCue.spec.tsx | 43 +- packages/guide-cue/src/GuideCue.tsx | 63 +- packages/guide-cue/src/TooltipContent.tsx | 9 +- packages/icon/src/Icon.spec.tsx | 18 +- packages/icon/src/isComponentGlyph.ts | 13 +- packages/lib/package.json | 2 +- packages/lib/src/index.ts | 9 +- .../GeneratedStoryDecorator.types.ts | 2 +- packages/menu/package.json | 2 +- packages/menu/src/Menu.spec.tsx | 84 +- packages/menu/src/Menu.story.tsx | 4 +- packages/menu/src/Menu/Menu.tsx | 12 +- packages/menu/src/Menu/Menu.types.ts | 12 +- packages/menu/src/SubMenu/SubMenu.spec.tsx | 11 - packages/menu/src/types.ts | 5 +- packages/modal/package.json | 5 +- packages/modal/src/Modal/ModalView.tsx | 8 +- packages/number-input/README.md | 23 +- .../src/UnitSelect/UnitSelect.tsx | 25 +- .../src/UnitSelectButton/UnitSelectButton.tsx | 23 +- .../UnitSelectButton.types.ts | 4 +- .../src/Example/Polymorphic.example.tsx | 5 +- .../polymorphic/src/Example/examples.spec.tsx | 16 +- .../src/Polymorphic/Polymorphic.ts | 2 + .../src/utils/Polymorphic.utils.ts | 4 +- packages/popover/package.json | 2 +- packages/portal/package.json | 2 +- packages/portal/src/Portal/Portal.tsx | 2 +- .../search-input/src/SearchInput.story.tsx | 15 +- .../SearchResultsMenu.story.tsx | 2 +- .../src/utils/SearchInput.testutils.tsx | 17 +- .../SegmentedControl.spec.tsx | 8 +- .../src/SegmentedControl/SegmentedControl.tsx | 9 +- .../SegmentedControlOption.stories.tsx | 2 +- packages/select/package.json | 4 +- packages/select/src/MenuButton.tsx | 18 +- packages/select/src/Select.spec.tsx | 5 +- packages/select/src/types.ts | 7 + .../src/CollapseToggle/CollapseToggle.tsx | 1 + packages/side-nav/src/SideNav/SideNav.tsx | 6 +- .../src/SideNavGroup/SideNavGroup.tsx | 12 +- .../side-nav/src/SideNavItem/SideNavItem.tsx | 2 +- .../src/TableSkeleton/TableSkeleton.spec.tsx | 7 +- .../split-button/src/SplitButton.story.tsx | 4 - packages/table/README.md | 4 + packages/table/package.json | 2 +- packages/table/src/Cell/InternalCell.tsx | 5 +- .../src/ExpandedContent/ExpandedContent.tsx | 3 +- .../src/Row/HeaderRow/HeaderRow.stories.tsx | 1 - packages/table/src/Table.story.tsx | 2 +- packages/table/src/TableV10/Table.tsx | 4 +- packages/table/src/TableV10/TableBody.tsx | 4 +- packages/testing-lib/src/context.ts | 1 + packages/toast/package.json | 2 +- .../toast/src/InternalToast/VariantIcon.tsx | 5 +- .../ToastContext/useToast/useToast.spec.tsx | 11 +- packages/tooltip/src/Tooltip/Tooltip.spec.tsx | 7 + packages/tooltip/src/Tooltip/Tooltip.tsx | 17 +- packages/tooltip/src/Tooltip/Tooltip.types.ts | 9 +- stories/PropCombinationsDecorator.story.tsx | 2 +- stories/Writing-Stories.stories.mdx | 1 - tools/build/package.json | 1 + tools/build/src/tsdoc/tsdocParser.ts | 7 +- tools/storybook-decorators/package.json | 4 +- tools/storybook/package.json | 6 +- tools/test/config/jest.config.js | 2 + tools/test/config/mocks/svgTransformer.js | 4 +- tools/test/config/setup.js | 12 +- tools/test/package.json | 29 +- yarn.lock | 7445 +++++------------ 117 files changed, 2918 insertions(+), 5522 deletions(-) create mode 100644 .changeset/angry-rice-reply.md create mode 100644 .changeset/beige-books-fly.md create mode 100644 .changeset/cold-planes-change.md create mode 100644 .changeset/cuddly-donkeys-sit.md create mode 100644 .changeset/curvy-cheetahs-tap.md create mode 100644 .changeset/cyan-squids-kick.md create mode 100644 .changeset/dull-meals-press.md create mode 100644 .changeset/eleven-trees-deny.md create mode 100644 .changeset/forty-crews-promise.md create mode 100644 .changeset/friendly-planets-tan.md create mode 100644 .changeset/good-deers-repeat.md create mode 100644 .changeset/grumpy-bats-protect.md create mode 100644 .changeset/mean-cats-watch.md create mode 100644 .changeset/ninety-rice-think.md create mode 100644 .changeset/popular-suits-wait.md create mode 100644 .changeset/quick-geckos-leave.md create mode 100644 .changeset/red-pens-knock.md create mode 100644 .changeset/selfish-bobcats-eat.md create mode 100644 .changeset/selfish-phones-give.md create mode 100644 .changeset/seven-panthers-battle.md create mode 100644 .changeset/shaggy-pears-drum.md create mode 100644 .changeset/sharp-timers-lick.md create mode 100644 .changeset/silly-buttons-greet.md create mode 100644 .changeset/sour-ducks-change.md create mode 100644 .changeset/spotty-onions-work.md create mode 100644 .changeset/swift-deers-enjoy.md create mode 100644 .changeset/swift-rockets-exist.md create mode 100644 .changeset/two-games-carry.md create mode 100644 __mocks__/tabbable.js create mode 100644 packages/code/src/CustomSelectMenuButton/CustomSelectMenuButton.tsx create mode 100644 packages/code/src/CustomSelectMenuButton/index.ts diff --git a/.changeset/angry-rice-reply.md b/.changeset/angry-rice-reply.md new file mode 100644 index 0000000000..2ecfd10e19 --- /dev/null +++ b/.changeset/angry-rice-reply.md @@ -0,0 +1,5 @@ +--- +'@leafygreen-ui/form-footer': patch +--- + +Updates `PrimaryButton` type from `React.ReactChild` to `React.ReactElement`. diff --git a/.changeset/beige-books-fly.md b/.changeset/beige-books-fly.md new file mode 100644 index 0000000000..60d0a4d23e --- /dev/null +++ b/.changeset/beige-books-fly.md @@ -0,0 +1,5 @@ +--- +'@leafygreen-ui/testing-lib': patch +--- + +Fixes `isPromiseLike` TS errors diff --git a/.changeset/cold-planes-change.md b/.changeset/cold-planes-change.md new file mode 100644 index 0000000000..88a80279a9 --- /dev/null +++ b/.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. diff --git a/.changeset/cuddly-donkeys-sit.md b/.changeset/cuddly-donkeys-sit.md new file mode 100644 index 0000000000..866ea582b6 --- /dev/null +++ b/.changeset/cuddly-donkeys-sit.md @@ -0,0 +1,5 @@ +--- +'@leafygreen-ui/icon': patch +--- + +Updates internal function, `isComponentGlyph` diff --git a/.changeset/curvy-cheetahs-tap.md b/.changeset/curvy-cheetahs-tap.md new file mode 100644 index 0000000000..cb8b05a833 --- /dev/null +++ b/.changeset/curvy-cheetahs-tap.md @@ -0,0 +1,5 @@ +--- +'@leafygreen-ui/lib': patch +--- + +Updates helper function, `isComponentType` and updates `ExtendedComponentProps` type. diff --git a/.changeset/cyan-squids-kick.md b/.changeset/cyan-squids-kick.md new file mode 100644 index 0000000000..7347530986 --- /dev/null +++ b/.changeset/cyan-squids-kick.md @@ -0,0 +1,5 @@ +--- +'@lg-tools/build': patch +--- + +adds `@babel/core` as a peerDependency. diff --git a/.changeset/dull-meals-press.md b/.changeset/dull-meals-press.md new file mode 100644 index 0000000000..ed90b0b798 --- /dev/null +++ b/.changeset/dull-meals-press.md @@ -0,0 +1,5 @@ +--- +'@leafygreen-ui/segmented-control': patch +--- + +Refactor internal function `childrenIdList`. diff --git a/.changeset/eleven-trees-deny.md b/.changeset/eleven-trees-deny.md new file mode 100644 index 0000000000..3db6016b08 --- /dev/null +++ b/.changeset/eleven-trees-deny.md @@ -0,0 +1,5 @@ +--- +'@leafygreen-ui/combobox': patch +--- + +Type assert children as `Array` inside the internal function `renderedMenuContents` and add explicit return type to internal function `renderCombobox`. diff --git a/.changeset/forty-crews-promise.md b/.changeset/forty-crews-promise.md new file mode 100644 index 0000000000..17e9f29d87 --- /dev/null +++ b/.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 `` 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. diff --git a/.changeset/friendly-planets-tan.md b/.changeset/friendly-planets-tan.md new file mode 100644 index 0000000000..b82726dcd5 --- /dev/null +++ b/.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. \ No newline at end of file diff --git a/.changeset/good-deers-repeat.md b/.changeset/good-deers-repeat.md new file mode 100644 index 0000000000..b11d62a4bc --- /dev/null +++ b/.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. diff --git a/.changeset/grumpy-bats-protect.md b/.changeset/grumpy-bats-protect.md new file mode 100644 index 0000000000..e9f76ff2eb --- /dev/null +++ b/.changeset/grumpy-bats-protect.md @@ -0,0 +1,5 @@ +--- +'@lg-tools/storybook-decorators': minor +--- + +Move `@leafygreen-ui/leafygreen-provider` inside `peerDependencies`. diff --git a/.changeset/mean-cats-watch.md b/.changeset/mean-cats-watch.md new file mode 100644 index 0000000000..faf2dc2ad3 --- /dev/null +++ b/.changeset/mean-cats-watch.md @@ -0,0 +1,5 @@ +--- +'@leafygreen-ui/select': patch +--- + +Bumps `@types/react-is` and `react-is` to latest major version diff --git a/.changeset/ninety-rice-think.md b/.changeset/ninety-rice-think.md new file mode 100644 index 0000000000..05ac02096e --- /dev/null +++ b/.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 to get rid of StrictMode warnings diff --git a/.changeset/popular-suits-wait.md b/.changeset/popular-suits-wait.md new file mode 100644 index 0000000000..c5c016755f --- /dev/null +++ b/.changeset/popular-suits-wait.md @@ -0,0 +1,5 @@ +--- +'@lg-tools/test': minor +--- + +Upgrade `jest` and `testing-library` packages to support React 18 diff --git a/.changeset/quick-geckos-leave.md b/.changeset/quick-geckos-leave.md new file mode 100644 index 0000000000..54171b0371 --- /dev/null +++ b/.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`. diff --git a/.changeset/red-pens-knock.md b/.changeset/red-pens-knock.md new file mode 100644 index 0000000000..ca0d316663 --- /dev/null +++ b/.changeset/red-pens-knock.md @@ -0,0 +1,5 @@ +--- +'@leafygreen-ui/select': patch +--- + +Adds new internal prop, `__INTERNAL__menuButtonSlotProps__`. diff --git a/.changeset/selfish-bobcats-eat.md b/.changeset/selfish-bobcats-eat.md new file mode 100644 index 0000000000..7b1c80d71f --- /dev/null +++ b/.changeset/selfish-bobcats-eat.md @@ -0,0 +1,6 @@ +--- +'@leafygreen-ui/guide-cue': patch +'@leafygreen-ui/modal': patch +--- + +Add `focusTrapOptions` type diff --git a/.changeset/selfish-phones-give.md b/.changeset/selfish-phones-give.md new file mode 100644 index 0000000000..0076339315 --- /dev/null +++ b/.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. \ No newline at end of file diff --git a/.changeset/seven-panthers-battle.md b/.changeset/seven-panthers-battle.md new file mode 100644 index 0000000000..14e400f06e --- /dev/null +++ b/.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. diff --git a/.changeset/shaggy-pears-drum.md b/.changeset/shaggy-pears-drum.md new file mode 100644 index 0000000000..1ceb31d560 --- /dev/null +++ b/.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. diff --git a/.changeset/sharp-timers-lick.md b/.changeset/sharp-timers-lick.md new file mode 100644 index 0000000000..7a5845a31c --- /dev/null +++ b/.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__`. diff --git a/.changeset/silly-buttons-greet.md b/.changeset/silly-buttons-greet.md new file mode 100644 index 0000000000..02b16711e6 --- /dev/null +++ b/.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. \ No newline at end of file diff --git a/.changeset/sour-ducks-change.md b/.changeset/sour-ducks-change.md new file mode 100644 index 0000000000..26f4683325 --- /dev/null +++ b/.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` diff --git a/.changeset/spotty-onions-work.md b/.changeset/spotty-onions-work.md new file mode 100644 index 0000000000..40b69a4b9f --- /dev/null +++ b/.changeset/spotty-onions-work.md @@ -0,0 +1,5 @@ +--- +'@leafygreen-ui/code': patch +--- + +Updates LanguageSwitcher hover styles specificity to `&:hover[aria-disabled='false']`. diff --git a/.changeset/swift-deers-enjoy.md b/.changeset/swift-deers-enjoy.md new file mode 100644 index 0000000000..5404be676c --- /dev/null +++ b/.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. diff --git a/.changeset/swift-rockets-exist.md b/.changeset/swift-rockets-exist.md new file mode 100644 index 0000000000..3a56b72028 --- /dev/null +++ b/.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`. diff --git a/.changeset/two-games-carry.md b/.changeset/two-games-carry.md new file mode 100644 index 0000000000..91f0783df8 --- /dev/null +++ b/.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. diff --git a/__mocks__/tabbable.js b/__mocks__/tabbable.js new file mode 100644 index 0000000000..34e006a0fa --- /dev/null +++ b/__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; diff --git a/package.json b/package.json index c0293466c7..6036a8d782 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,7 @@ "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": "*", @@ -38,16 +38,16 @@ "@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", @@ -55,7 +55,7 @@ }, "resolutions": { "caniuse-lite": "^1.0.30001135", - "@types/react": "^16.9.56" + "@types/react-transition-group/@types/react": "^17.0.2" }, "workspaces": [ "packages/*", diff --git a/packages/banner/src/Banner.story.tsx b/packages/banner/src/Banner.story.tsx index 6345c6d0f8..e11a68eed1 100644 --- a/packages/banner/src/Banner.story.tsx +++ b/packages/banner/src/Banner.story.tsx @@ -41,6 +41,7 @@ const meta: StoryMetaType = { dismissible: false, }, argTypes: { + darkMode: storybookArgTypes.darkMode, dismissible: { control: 'boolean', }, diff --git a/packages/banner/src/BannerIcon/BannerIcon.tsx b/packages/banner/src/BannerIcon/BannerIcon.tsx index ceb9d22f2a..2ea32a1cbf 100644 --- a/packages/banner/src/BannerIcon/BannerIcon.tsx +++ b/packages/banner/src/BannerIcon/BannerIcon.tsx @@ -16,7 +16,10 @@ import { } from './styles'; import BannerIconProps from './types'; -const Icons: Record> = { +const Icons: Record< + Variant, + React.ComponentType> +> = { [Variant.Info]: InfoWithCircleIcon, [Variant.Warning]: ImportantWithCircleIcon, [Variant.Danger]: WarningIcon, diff --git a/packages/box/src/Box.tsx b/packages/box/src/Box.tsx index 24f12aafaf..c9aa186eb6 100644 --- a/packages/box/src/Box.tsx +++ b/packages/box/src/Box.tsx @@ -47,7 +47,7 @@ type BoxComponent = Override2< /** * The component or HTML Element that the button is rendered as. */ - as: React.ComponentType; + as: React.ComponentType>; }, ExtraProps >; @@ -115,7 +115,9 @@ export interface ExtendableBox< ExtraProps, Default extends React.ElementType = 'div', > extends Pick< - React.FunctionComponent>, + React.FunctionComponent< + React.PropsWithChildren> + >, 'displayName' | 'propTypes' > { ( diff --git a/packages/callout/src/Callout/styles.ts b/packages/callout/src/Callout/styles.ts index 5e21bdadb5..ffc0b1b036 100644 --- a/packages/callout/src/Callout/styles.ts +++ b/packages/callout/src/Callout/styles.ts @@ -73,7 +73,10 @@ export const headerLabels: Record = { [Variant.Example]: 'Example', } as const; -export const headerIcons: Record> = { +export const headerIcons: Record< + Variant, + React.ComponentType> +> = { [Variant.Note]: InfoWithCircleIcon, [Variant.Tip]: BulbIcon, [Variant.Important]: ImportantWithCircleIcon, diff --git a/packages/checkbox/package.json b/packages/checkbox/package.json index 6a11e6694d..6e4ff8b9ce 100644 --- a/packages/checkbox/package.json +++ b/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" diff --git a/packages/checkbox/src/Check/index.tsx b/packages/checkbox/src/Check/index.tsx index b83ec26b2a..d8f732a5c8 100644 --- a/packages/checkbox/src/Check/index.tsx +++ b/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(null); + return ( <>
{state => ( ( + + ), +); + +CustomSelectMenuButton.displayName = 'CustomSelectMenuButton'; diff --git a/packages/code/src/CustomSelectMenuButton/index.ts b/packages/code/src/CustomSelectMenuButton/index.ts new file mode 100644 index 0000000000..863dfeabe5 --- /dev/null +++ b/packages/code/src/CustomSelectMenuButton/index.ts @@ -0,0 +1 @@ +export { CustomSelectMenuButton } from './CustomSelectMenuButton'; diff --git a/packages/code/src/LanguageSwitcher/LanguageSwitcher.styles.ts b/packages/code/src/LanguageSwitcher/LanguageSwitcher.styles.ts index c6289c9aa4..7f81a42697 100644 --- a/packages/code/src/LanguageSwitcher/LanguageSwitcher.styles.ts +++ b/packages/code/src/LanguageSwitcher/LanguageSwitcher.styles.ts @@ -19,7 +19,7 @@ export const menuButtonStyle = css` border: 0; font-size: 12px; - &:hover, + &:hover[aria-disabled='false'], &:focus, &:active { box-shadow: 0 0 0 0; @@ -43,13 +43,13 @@ export const buttonModeStyle: Record = { border-right: 1px solid ${palette.gray.light2}; box-shadow: 0 0 0 0; - &:hover, + &:hover[aria-disabled='false'], &:active, &:focus { border-right: 1px solid ${palette.gray.light2}; } - &:hover { + &:hover[aria-disabled='false'] { background-color: ${palette.gray.light2}; } @@ -62,13 +62,13 @@ export const buttonModeStyle: Record = { border-right: 1px solid ${palette.gray.dark1}; color: ${palette.gray.light2}; - &:hover, + &:hover[aria-disabled='false'], &:focus, &:active { border-right: 1px solid ${palette.gray.dark1}; } - &:hover, + &:hover[aria-disabled='false'], &:active { background-color: ${palette.gray.dark1}; } diff --git a/packages/code/src/LanguageSwitcher/LanguageSwitcher.tsx b/packages/code/src/LanguageSwitcher/LanguageSwitcher.tsx index 4b77ad186f..127e921ba6 100644 --- a/packages/code/src/LanguageSwitcher/LanguageSwitcher.tsx +++ b/packages/code/src/LanguageSwitcher/LanguageSwitcher.tsx @@ -1,6 +1,5 @@ import React from 'react'; -import Button, { ButtonProps } from '@leafygreen-ui/button'; import { css, cx } from '@leafygreen-ui/emotion'; import { usePrevious } from '@leafygreen-ui/hooks'; import { isComponentGlyph } from '@leafygreen-ui/icon'; @@ -10,6 +9,7 @@ import { isComponentType } from '@leafygreen-ui/lib'; import { palette } from '@leafygreen-ui/palette'; import { Option, Select } from '@leafygreen-ui/select'; +import { CustomSelectMenuButton } from '../CustomSelectMenuButton'; import { LanguageOption, PopoverProps } from '../types'; import { @@ -83,21 +83,6 @@ function LanguageSwitcher({ } } - // eslint-disable-next-line react/display-name - const LanguageSwitcherButton = React.forwardRef( - ({ className, children, ...props }: ButtonProps, ref) => ( - - ), - ); - const popoverProps = { popoverZIndex, usePortal, @@ -116,9 +101,11 @@ function LanguageSwitcher({ className={selectStyle} allowDeselect={false} {...popoverProps} - // Component missing displayName - // eslint-disable-next-line - __INTERNAL__menuButtonSlot__={LanguageSwitcherButton} + __INTERNAL__menuButtonSlot__={CustomSelectMenuButton} + __INTERNAL__menuButtonSlotProps__={{ + className: cx(menuButtonStyle, buttonModeStyle[theme]), + leftGlyph: renderedLogo, + }} > {languageOptions?.map(option => (