@primer/components 31.2.0-rc.b718ff50 → 31.2.0-rc.decfca99
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.github/workflows/ci.yml +5 -2
- package/.github/workflows/release.yml +1 -0
- package/.github/workflows/release_canary.yml +1 -0
- package/CHANGELOG.md +13 -1
- package/dist/browser.esm.js +620 -618
- package/dist/browser.esm.js.map +1 -1
- package/dist/browser.umd.js +188 -186
- package/dist/browser.umd.js.map +1 -1
- package/docs/content/ActionList2.mdx +360 -0
- package/docs/content/StateLabel.md +5 -4
- package/docs/content/getting-started.md +1 -1
- package/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js +17 -0
- package/lib/ActionList/Divider.jsx +29 -0
- package/lib/ActionList/Group.jsx +23 -0
- package/lib/ActionList/Header.jsx +66 -0
- package/lib/ActionList/Item.jsx +301 -0
- package/lib/ActionList/List.jsx +138 -0
- package/lib/ActionList/index.js +12 -23
- package/lib/ActionList2/Description.d.ts +12 -0
- package/lib/ActionList2/Description.js +53 -0
- package/lib/ActionList2/Description.jsx +30 -0
- package/lib/ActionList2/Divider.d.ts +5 -0
- package/lib/ActionList2/Divider.js +35 -0
- package/lib/ActionList2/Divider.jsx +22 -0
- package/lib/ActionList2/Group.d.ts +11 -0
- package/lib/ActionList2/Group.js +57 -0
- package/lib/ActionList2/Group.jsx +25 -0
- package/lib/ActionList2/Header.d.ts +26 -0
- package/lib/ActionList2/Header.js +55 -0
- package/lib/ActionList2/Header.jsx +36 -0
- package/lib/ActionList2/Item.d.ts +63 -0
- package/lib/ActionList2/Item.js +244 -0
- package/lib/ActionList2/Item.jsx +174 -0
- package/lib/ActionList2/LinkItem.d.ts +17 -0
- package/lib/ActionList2/LinkItem.js +57 -0
- package/lib/ActionList2/LinkItem.jsx +28 -0
- package/lib/ActionList2/List.d.ts +26 -0
- package/lib/ActionList2/List.js +59 -0
- package/lib/ActionList2/List.jsx +41 -0
- package/lib/ActionList2/Selection.d.ts +5 -0
- package/lib/ActionList2/Selection.js +70 -0
- package/lib/ActionList2/Selection.jsx +36 -0
- package/lib/ActionList2/Visuals.d.ts +9 -0
- package/lib/ActionList2/Visuals.js +90 -0
- package/lib/ActionList2/Visuals.jsx +48 -0
- package/lib/ActionList2/index.d.ts +36 -0
- package/lib/ActionList2/index.js +29 -0
- package/lib/ActionMenu.jsx +73 -0
- package/lib/AnchoredOverlay/AnchoredOverlay.jsx +100 -0
- package/lib/AnchoredOverlay/index.js +4 -12
- package/lib/Autocomplete/Autocomplete.d.ts +28 -28
- package/lib/Autocomplete/Autocomplete.jsx +100 -0
- package/lib/Autocomplete/AutocompleteContext.jsx +5 -0
- package/lib/Autocomplete/AutocompleteInput.d.ts +28 -28
- package/lib/Autocomplete/AutocompleteInput.jsx +113 -0
- package/lib/Autocomplete/AutocompleteMenu.jsx +190 -0
- package/lib/Autocomplete/AutocompleteOverlay.jsx +55 -0
- package/lib/Autocomplete/index.js +7 -14
- package/lib/Avatar.jsx +34 -0
- package/lib/AvatarPair.jsx +29 -0
- package/lib/AvatarStack.jsx +151 -0
- package/lib/BaseStyles.jsx +65 -0
- package/lib/BorderBox.jsx +18 -0
- package/lib/Box.jsx +10 -0
- package/lib/BranchName.jsx +20 -0
- package/lib/Breadcrumbs.jsx +74 -0
- package/lib/Button/Button.d.ts +25 -25
- package/lib/Button/Button.jsx +60 -0
- package/lib/Button/ButtonBase.jsx +36 -0
- package/lib/Button/ButtonClose.d.ts +45 -45
- package/lib/Button/ButtonClose.jsx +55 -0
- package/lib/Button/ButtonDanger.d.ts +25 -25
- package/lib/Button/ButtonDanger.jsx +63 -0
- package/lib/Button/ButtonGroup.jsx +55 -0
- package/lib/Button/ButtonInvisible.d.ts +25 -25
- package/lib/Button/ButtonInvisible.jsx +52 -0
- package/lib/Button/ButtonOutline.d.ts +25 -25
- package/lib/Button/ButtonOutline.jsx +63 -0
- package/lib/Button/ButtonPrimary.d.ts +25 -25
- package/lib/Button/ButtonPrimary.jsx +62 -0
- package/lib/Button/ButtonStyles.jsx +37 -0
- package/lib/Button/ButtonTableList.jsx +49 -0
- package/lib/Button/index.js +21 -70
- package/lib/Caret.jsx +93 -0
- package/lib/CircleBadge.jsx +43 -0
- package/lib/CircleOcticon.d.ts +42 -42
- package/lib/CircleOcticon.jsx +21 -0
- package/lib/CounterLabel.jsx +44 -0
- package/lib/Details.jsx +21 -0
- package/lib/Dialog/ConfirmationDialog.jsx +146 -0
- package/lib/Dialog/Dialog.jsx +273 -0
- package/lib/Dialog.d.ts +45 -45
- package/lib/Dialog.jsx +131 -0
- package/lib/Dropdown.d.ts +176 -176
- package/lib/Dropdown.jsx +134 -0
- package/lib/DropdownMenu/DropdownButton.d.ts +46 -46
- package/lib/DropdownMenu/DropdownButton.jsx +14 -0
- package/lib/DropdownMenu/DropdownMenu.jsx +70 -0
- package/lib/DropdownMenu/index.js +6 -20
- package/lib/DropdownStyles.js +18 -26
- package/lib/FilterList.d.ts +42 -42
- package/lib/FilterList.jsx +63 -0
- package/lib/FilteredActionList/FilteredActionList.jsx +100 -0
- package/lib/FilteredActionList/index.js +4 -12
- package/lib/FilteredSearch.jsx +29 -0
- package/lib/Flash.jsx +70 -0
- package/lib/Flex.jsx +15 -0
- package/lib/FormGroup.jsx +25 -0
- package/lib/Grid.jsx +15 -0
- package/lib/Header.jsx +90 -0
- package/lib/Heading.jsx +21 -0
- package/lib/Label.jsx +84 -0
- package/lib/LabelGroup.jsx +19 -0
- package/lib/Link.jsx +38 -0
- package/lib/Overlay.jsx +156 -0
- package/lib/Pagehead.jsx +18 -0
- package/lib/Pagination/Pagination.jsx +163 -0
- package/lib/Pagination/index.js +6 -12
- package/lib/Pagination/model.jsx +174 -0
- package/lib/PointerBox.jsx +25 -0
- package/lib/Popover.jsx +210 -0
- package/lib/Portal/Portal.jsx +79 -0
- package/lib/Portal/index.js +5 -16
- package/lib/Position.d.ts +4 -4
- package/lib/Position.jsx +46 -0
- package/lib/ProgressBar.jsx +39 -0
- package/lib/SelectMenu/SelectMenu.d.ts +246 -246
- package/lib/SelectMenu/SelectMenu.jsx +114 -0
- package/lib/SelectMenu/SelectMenuContext.jsx +5 -0
- package/lib/SelectMenu/SelectMenuDivider.jsx +43 -0
- package/lib/SelectMenu/SelectMenuFilter.jsx +59 -0
- package/lib/SelectMenu/SelectMenuFooter.jsx +46 -0
- package/lib/SelectMenu/SelectMenuHeader.jsx +44 -0
- package/lib/SelectMenu/SelectMenuItem.d.ts +1 -1
- package/lib/SelectMenu/SelectMenuItem.jsx +143 -0
- package/lib/SelectMenu/SelectMenuList.jsx +60 -0
- package/lib/SelectMenu/SelectMenuLoadingAnimation.jsx +21 -0
- package/lib/SelectMenu/SelectMenuModal.d.ts +1 -1
- package/lib/SelectMenu/SelectMenuModal.jsx +119 -0
- package/lib/SelectMenu/SelectMenuTab.jsx +93 -0
- package/lib/SelectMenu/SelectMenuTabPanel.jsx +43 -0
- package/lib/SelectMenu/SelectMenuTabs.jsx +58 -0
- package/lib/SelectMenu/hooks/useKeyboardNav.js +80 -96
- package/lib/SelectMenu/index.js +7 -14
- package/lib/SelectPanel/SelectPanel.jsx +105 -0
- package/lib/SelectPanel/index.js +4 -12
- package/lib/SideNav.jsx +177 -0
- package/lib/Spinner.jsx +35 -0
- package/lib/StateLabel.d.ts +1 -1
- package/lib/StateLabel.js +6 -1
- package/lib/StateLabel.jsx +94 -0
- package/lib/StyledOcticon.jsx +20 -0
- package/lib/SubNav.jsx +104 -0
- package/lib/TabNav.jsx +60 -0
- package/lib/Text.jsx +14 -0
- package/lib/TextInput.jsx +23 -0
- package/lib/TextInputWithTokens.d.ts +28 -28
- package/lib/TextInputWithTokens.jsx +218 -0
- package/lib/ThemeProvider.jsx +130 -0
- package/lib/Timeline.d.ts +43 -43
- package/lib/Timeline.jsx +124 -0
- package/lib/Token/AvatarToken.d.ts +1 -1
- package/lib/Token/AvatarToken.jsx +54 -0
- package/lib/Token/IssueLabelToken.d.ts +1 -1
- package/lib/Token/IssueLabelToken.jsx +125 -0
- package/lib/Token/Token.d.ts +1 -1
- package/lib/Token/Token.jsx +103 -0
- package/lib/Token/TokenBase.jsx +88 -0
- package/lib/Token/_RemoveTokenButton.jsx +108 -0
- package/lib/Token/_TokenTextContainer.jsx +49 -0
- package/lib/Token/index.js +11 -30
- package/lib/Tooltip.jsx +246 -0
- package/lib/Truncate.jsx +27 -0
- package/lib/UnderlineNav.jsx +90 -0
- package/lib/_TextInputWrapper.js +2 -2
- package/lib/_TextInputWrapper.jsx +120 -0
- package/lib/_UnstyledTextInput.jsx +22 -0
- package/lib/__tests__/ActionList.test.jsx +49 -0
- package/lib/__tests__/ActionList.types.test.jsx +45 -0
- package/lib/__tests__/ActionList2.test.d.ts +1 -0
- package/lib/__tests__/ActionList2.test.js +53 -0
- package/lib/__tests__/ActionList2.test.jsx +46 -0
- package/lib/__tests__/ActionMenu.test.jsx +124 -0
- package/lib/__tests__/AnchoredOverlay.test.jsx +121 -0
- package/lib/__tests__/Autocomplete.test.jsx +299 -0
- package/lib/__tests__/Avatar.test.jsx +42 -0
- package/lib/__tests__/AvatarStack.test.jsx +43 -0
- package/lib/__tests__/BorderBox.test.jsx +36 -0
- package/lib/__tests__/Box.test.jsx +41 -0
- package/lib/__tests__/BranchName.test.jsx +27 -0
- package/lib/__tests__/Breadcrumbs.test.jsx +28 -0
- package/lib/__tests__/BreadcrumbsItem.test.jsx +31 -0
- package/lib/__tests__/Button.test.jsx +100 -0
- package/lib/__tests__/Caret.test.jsx +37 -0
- package/lib/__tests__/CircleBadge.test.jsx +55 -0
- package/lib/__tests__/CircleOcticon.test.jsx +45 -0
- package/lib/__tests__/ConfirmationDialog.test.jsx +119 -0
- package/lib/__tests__/CounterLabel.test.jsx +36 -0
- package/lib/__tests__/Details.test.jsx +85 -0
- package/lib/__tests__/Dialog.test.jsx +139 -0
- package/lib/__tests__/Dropdown.test.jsx +49 -0
- package/lib/__tests__/DropdownMenu.test.jsx +119 -0
- package/lib/__tests__/FilterList.test.jsx +27 -0
- package/lib/__tests__/FilterListItem.test.jsx +31 -0
- package/lib/__tests__/FilteredSearch.test.jsx +27 -0
- package/lib/__tests__/Flash.test.jsx +36 -0
- package/lib/__tests__/Flex.test.jsx +51 -0
- package/lib/__tests__/FormGroup.test.jsx +36 -0
- package/lib/__tests__/Grid.test.jsx +69 -0
- package/lib/__tests__/Header.test.jsx +45 -0
- package/lib/__tests__/Heading.test.jsx +71 -0
- package/lib/__tests__/KeyPaths.types.test.js +5 -8
- package/lib/__tests__/Label.test.jsx +33 -0
- package/lib/__tests__/LabelGroup.test.jsx +29 -0
- package/lib/__tests__/Link.test.jsx +43 -0
- package/lib/__tests__/Merge.types.test.js +13 -19
- package/lib/__tests__/Overlay.test.jsx +105 -0
- package/lib/__tests__/Pagehead.test.jsx +25 -0
- package/lib/__tests__/Pagination/Pagination.test.jsx +32 -0
- package/lib/__tests__/Pagination/PaginationModel.test.jsx +118 -0
- package/lib/__tests__/PointerBox.test.jsx +33 -0
- package/lib/__tests__/Popover.test.jsx +58 -0
- package/lib/__tests__/Portal.test.jsx +102 -0
- package/lib/__tests__/Position.test.jsx +96 -0
- package/lib/__tests__/ProgressBar.test.jsx +38 -0
- package/lib/__tests__/SelectMenu.test.jsx +120 -0
- package/lib/__tests__/SelectPanel.test.jsx +48 -0
- package/lib/__tests__/SideNav.test.jsx +55 -0
- package/lib/__tests__/Spinner.test.jsx +41 -0
- package/lib/__tests__/StateLabel.test.jsx +46 -0
- package/lib/__tests__/StyledOcticon.test.jsx +28 -0
- package/lib/__tests__/SubNav.test.jsx +47 -0
- package/lib/__tests__/SubNavLink.test.jsx +31 -0
- package/lib/__tests__/TabNav.test.jsx +32 -0
- package/lib/__tests__/Text.test.jsx +71 -0
- package/lib/__tests__/TextInput.test.jsx +45 -0
- package/lib/__tests__/TextInputWithTokens.test.jsx +302 -0
- package/lib/__tests__/ThemeProvider.test.jsx +314 -0
- package/lib/__tests__/Timeline.test.jsx +51 -0
- package/lib/__tests__/Token.test.jsx +93 -0
- package/lib/__tests__/Tooltip.test.jsx +46 -0
- package/lib/__tests__/Truncate.test.jsx +41 -0
- package/lib/__tests__/UnderlineNav.test.jsx +53 -0
- package/lib/__tests__/UnderlineNavLink.test.jsx +31 -0
- package/lib/__tests__/behaviors/anchoredPosition.test.js +229 -376
- package/lib/__tests__/behaviors/focusTrap.test.jsx +184 -0
- package/lib/__tests__/behaviors/focusZone.test.jsx +406 -0
- package/lib/__tests__/behaviors/iterateFocusableElements.test.jsx +58 -0
- package/lib/__tests__/behaviors/scrollIntoViewingArea.test.js +145 -216
- package/lib/__tests__/filterObject.test.js +48 -27
- package/lib/__tests__/hooks/useAnchoredPosition.test.jsx +29 -0
- package/lib/__tests__/hooks/useOnEscapePress.test.jsx +19 -0
- package/lib/__tests__/hooks/useOnOutsideClick.test.jsx +63 -0
- package/lib/__tests__/hooks/useOpenAndCloseFocus.test.jsx +61 -0
- package/lib/__tests__/hooks/useProvidedStateOrCreate.test.jsx +56 -0
- package/lib/__tests__/theme.test.js +33 -34
- package/lib/__tests__/themeGet.test.js +12 -23
- package/lib/__tests__/useSafeTimeout.test.jsx +36 -0
- package/lib/__tests__/utils/createSlots.test.d.ts +1 -0
- package/lib/__tests__/utils/createSlots.test.js +75 -0
- package/lib/__tests__/utils/createSlots.test.jsx +57 -0
- package/lib/behaviors/anchoredPosition.js +205 -234
- package/lib/behaviors/focusTrap.js +121 -157
- package/lib/behaviors/focusZone.js +434 -509
- package/lib/behaviors/scrollIntoViewingArea.js +18 -35
- package/lib/constants.js +39 -43
- package/lib/drafts.d.ts +7 -0
- package/lib/drafts.js +20 -0
- package/lib/hooks/index.js +16 -60
- package/lib/hooks/useAnchoredPosition.js +32 -40
- package/lib/hooks/useCombinedRefs.js +32 -36
- package/lib/hooks/useDetails.jsx +39 -0
- package/lib/hooks/useDialog.js +72 -96
- package/lib/hooks/useFocusTrap.js +43 -60
- package/lib/hooks/useFocusZone.js +54 -50
- package/lib/hooks/useOnEscapePress.js +25 -36
- package/lib/hooks/useOnOutsideClick.jsx +61 -0
- package/lib/hooks/useOpenAndCloseFocus.js +22 -34
- package/lib/hooks/useOverlay.jsx +15 -0
- package/lib/hooks/useProvidedRefOrCreate.js +10 -14
- package/lib/hooks/useProvidedStateOrCreate.js +13 -16
- package/lib/hooks/useRenderForcingRef.js +13 -17
- package/lib/hooks/useResizeObserver.js +15 -18
- package/lib/hooks/useSafeTimeout.js +22 -30
- package/lib/hooks/useScrollFlash.js +16 -23
- package/lib/index.js +161 -636
- package/lib/polyfills/eventListenerSignal.js +37 -45
- package/lib/stories/ActionList2.stories.js +908 -0
- package/lib/stories/TextInput.stories.js +144 -0
- package/lib/sx.d.ts +2 -0
- package/lib/sx.js +10 -14
- package/lib/theme-preval.js +65 -2945
- package/lib/theme.js +3 -12
- package/lib/utils/create-slots.d.ts +17 -0
- package/lib/utils/create-slots.js +105 -0
- package/lib/utils/create-slots.jsx +65 -0
- package/lib/utils/deprecate.jsx +59 -0
- package/lib/utils/isNumeric.jsx +7 -0
- package/lib/utils/iterateFocusableElements.js +63 -85
- package/lib/utils/ssr.jsx +6 -0
- package/lib/utils/test-deprecations.jsx +20 -0
- package/lib/utils/test-helpers.jsx +8 -0
- package/lib/utils/test-matchers.jsx +100 -0
- package/lib/utils/testing.d.ts +14 -1
- package/lib/utils/testing.jsx +206 -0
- package/lib/utils/theme.js +33 -47
- package/lib/utils/types/AriaRole.js +2 -1
- package/lib/utils/types/ComponentProps.js +2 -1
- package/lib/utils/types/Flatten.js +2 -1
- package/lib/utils/types/KeyPaths.js +2 -1
- package/lib/utils/types/MandateProps.js +16 -1
- package/lib/utils/types/Merge.js +2 -1
- package/lib/utils/types/index.js +16 -69
- package/lib/utils/uniqueId.js +5 -8
- package/lib/utils/use-force-update.d.ts +1 -0
- package/lib/utils/use-force-update.js +13 -0
- package/lib/utils/useIsomorphicLayoutEffect.js +8 -11
- package/lib/utils/userAgent.js +8 -12
- package/lib-esm/ActionList2/Description.d.ts +12 -0
- package/lib-esm/ActionList2/Description.js +37 -0
- package/lib-esm/ActionList2/Divider.d.ts +5 -0
- package/lib-esm/ActionList2/Divider.js +23 -0
- package/lib-esm/ActionList2/Group.d.ts +11 -0
- package/lib-esm/ActionList2/Group.js +40 -0
- package/lib-esm/ActionList2/Header.d.ts +26 -0
- package/lib-esm/ActionList2/Header.js +44 -0
- package/lib-esm/ActionList2/Item.d.ts +63 -0
- package/lib-esm/ActionList2/Item.js +210 -0
- package/lib-esm/ActionList2/LinkItem.d.ts +17 -0
- package/lib-esm/ActionList2/LinkItem.js +43 -0
- package/lib-esm/ActionList2/List.d.ts +26 -0
- package/lib-esm/ActionList2/List.js +37 -0
- package/lib-esm/ActionList2/Selection.d.ts +5 -0
- package/lib-esm/ActionList2/Selection.js +52 -0
- package/lib-esm/ActionList2/Visuals.d.ts +9 -0
- package/lib-esm/ActionList2/Visuals.js +68 -0
- package/lib-esm/ActionList2/index.d.ts +36 -0
- package/lib-esm/ActionList2/index.js +33 -0
- package/lib-esm/Autocomplete/Autocomplete.d.ts +28 -28
- package/lib-esm/Autocomplete/AutocompleteInput.d.ts +28 -28
- package/lib-esm/Button/Button.d.ts +25 -25
- package/lib-esm/Button/ButtonClose.d.ts +45 -45
- package/lib-esm/Button/ButtonDanger.d.ts +25 -25
- package/lib-esm/Button/ButtonInvisible.d.ts +25 -25
- package/lib-esm/Button/ButtonOutline.d.ts +25 -25
- package/lib-esm/Button/ButtonPrimary.d.ts +25 -25
- package/lib-esm/CircleOcticon.d.ts +42 -42
- package/lib-esm/Dialog.d.ts +45 -45
- package/lib-esm/Dropdown.d.ts +176 -176
- package/lib-esm/DropdownMenu/DropdownButton.d.ts +46 -46
- package/lib-esm/FilterList.d.ts +42 -42
- package/lib-esm/Position.d.ts +4 -4
- package/lib-esm/SelectMenu/SelectMenu.d.ts +246 -246
- package/lib-esm/SelectMenu/SelectMenuItem.d.ts +1 -1
- package/lib-esm/SelectMenu/SelectMenuModal.d.ts +1 -1
- package/lib-esm/StateLabel.d.ts +1 -1
- package/lib-esm/StateLabel.js +7 -2
- package/lib-esm/TextInputWithTokens.d.ts +28 -28
- package/lib-esm/Timeline.d.ts +43 -43
- package/lib-esm/Token/AvatarToken.d.ts +1 -1
- package/lib-esm/Token/IssueLabelToken.d.ts +1 -1
- package/lib-esm/Token/Token.d.ts +1 -1
- package/lib-esm/_TextInputWrapper.js +2 -2
- package/lib-esm/__tests__/ActionList2.test.d.ts +1 -0
- package/lib-esm/__tests__/ActionList2.test.js +41 -0
- package/lib-esm/__tests__/utils/createSlots.test.d.ts +1 -0
- package/lib-esm/__tests__/utils/createSlots.test.js +67 -0
- package/lib-esm/drafts.d.ts +7 -0
- package/lib-esm/drafts.js +8 -0
- package/lib-esm/stories/ActionList2.stories.js +796 -0
- package/lib-esm/stories/TextInput.stories.js +117 -0
- package/lib-esm/sx.d.ts +2 -0
- package/lib-esm/sx.js +3 -1
- package/lib-esm/theme-preval.js +81 -2
- package/lib-esm/utils/create-slots.d.ts +17 -0
- package/lib-esm/utils/create-slots.js +84 -0
- package/lib-esm/utils/testing.d.ts +14 -1
- package/lib-esm/utils/use-force-update.d.ts +1 -0
- package/lib-esm/utils/use-force-update.js +6 -0
- package/package-lock.json +153 -14
- package/package.json +7 -4
- package/script/build +1 -1
- package/src/ActionList2/Description.tsx +49 -0
- package/src/ActionList2/Divider.tsx +24 -0
- package/src/ActionList2/Group.tsx +34 -0
- package/src/ActionList2/Header.tsx +58 -0
- package/src/ActionList2/Item.tsx +245 -0
- package/src/ActionList2/LinkItem.tsx +49 -0
- package/src/ActionList2/List.tsx +55 -0
- package/src/ActionList2/Selection.tsx +40 -0
- package/src/ActionList2/Visuals.tsx +76 -0
- package/src/ActionList2/index.ts +39 -0
- package/src/StateLabel.tsx +14 -2
- package/src/_TextInputWrapper.tsx +7 -0
- package/src/__tests__/ActionList2.test.tsx +47 -0
- package/src/__tests__/__snapshots__/ActionList2.test.tsx.snap +14 -0
- package/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap +1 -0
- package/src/__tests__/__snapshots__/CircleBadge.test.tsx.snap +1 -0
- package/src/__tests__/__snapshots__/CircleOcticon.test.tsx.snap +1 -0
- package/src/__tests__/__snapshots__/Dialog.test.tsx.snap +1 -0
- package/src/__tests__/__snapshots__/DropdownMenu.test.tsx.snap +1 -0
- package/src/__tests__/__snapshots__/SelectMenu.test.tsx.snap +4 -0
- package/src/__tests__/__snapshots__/SelectPanel.test.tsx.snap +1 -0
- package/src/__tests__/__snapshots__/StateLabel.test.tsx.snap +13 -6
- package/src/__tests__/__snapshots__/StyledOcticon.test.tsx.snap +1 -0
- package/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap +66 -0
- package/src/__tests__/__snapshots__/Token.test.tsx.snap +17 -0
- package/src/__tests__/utils/__snapshots__/createSlots.test.tsx.snap +55 -0
- package/src/__tests__/utils/createSlots.test.tsx +74 -0
- package/src/drafts.ts +9 -0
- package/src/stories/ActionList2.stories.tsx +1291 -0
- package/src/stories/TextInput.stories.tsx +113 -0
- package/src/sx.ts +3 -0
- package/src/theme-preval.js +1 -0
- package/src/utils/create-slots.tsx +96 -0
- package/src/utils/use-force-update.ts +7 -0
- package/stats.html +1 -1
- package/tsconfig.base.json +20 -0
- package/tsconfig.build.json +2 -2
- package/tsconfig.json +4 -17
@@ -1,69 +1,52 @@
|
|
1
1
|
"use strict";
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
});
|
6
|
-
exports.useFocusTrap =
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
var _focusTrap = require("../behaviors/focusTrap");
|
11
|
-
|
12
|
-
var _useProvidedRefOrCreate = require("./useProvidedRefOrCreate");
|
13
|
-
|
14
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
15
|
-
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
4
|
+
};
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
6
|
+
exports.useFocusTrap = void 0;
|
7
|
+
const react_1 = __importDefault(require("react"));
|
8
|
+
const focusTrap_1 = require("../behaviors/focusTrap");
|
9
|
+
const useProvidedRefOrCreate_1 = require("./useProvidedRefOrCreate");
|
16
10
|
/**
|
17
11
|
* Hook used to trap focus inside a container. Returns a ref that can be added to the container
|
18
12
|
* that should trap focus.
|
19
13
|
* @param settings {FocusTrapHookSettings}
|
20
14
|
*/
|
21
15
|
function useFocusTrap(settings, dependencies = []) {
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
if (!previousFocusedElement.current && !(settings !== null && settings !== void 0 && settings.disabled)) {
|
33
|
-
previousFocusedElement.current = document.activeElement;
|
34
|
-
} // This function removes the event listeners that enable the focus trap and restores focus
|
35
|
-
// to the previously-focused element (if necessary).
|
36
|
-
|
37
|
-
|
38
|
-
function disableTrap() {
|
39
|
-
var _abortController$curr;
|
40
|
-
|
41
|
-
(_abortController$curr = abortController.current) === null || _abortController$curr === void 0 ? void 0 : _abortController$curr.abort();
|
42
|
-
|
43
|
-
if (settings !== null && settings !== void 0 && settings.restoreFocusOnCleanUp && previousFocusedElement.current instanceof HTMLElement) {
|
44
|
-
previousFocusedElement.current.focus();
|
45
|
-
previousFocusedElement.current = null;
|
16
|
+
const containerRef = useProvidedRefOrCreate_1.useProvidedRefOrCreate(settings?.containerRef);
|
17
|
+
const initialFocusRef = useProvidedRefOrCreate_1.useProvidedRefOrCreate(settings?.initialFocusRef);
|
18
|
+
const disabled = settings?.disabled;
|
19
|
+
const abortController = react_1.default.useRef();
|
20
|
+
const previousFocusedElement = react_1.default.useRef(null);
|
21
|
+
// If we are enabling a focus trap and haven't already stored the previously focused element
|
22
|
+
// go ahead an do that so we can restore later when the trap is disabled.
|
23
|
+
if (!previousFocusedElement.current && !settings?.disabled) {
|
24
|
+
previousFocusedElement.current = document.activeElement;
|
46
25
|
}
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
return () => {
|
56
|
-
disableTrap();
|
57
|
-
};
|
58
|
-
} else {
|
59
|
-
disableTrap();
|
60
|
-
}
|
26
|
+
// This function removes the event listeners that enable the focus trap and restores focus
|
27
|
+
// to the previously-focused element (if necessary).
|
28
|
+
function disableTrap() {
|
29
|
+
abortController.current?.abort();
|
30
|
+
if (settings?.restoreFocusOnCleanUp && previousFocusedElement.current instanceof HTMLElement) {
|
31
|
+
previousFocusedElement.current.focus();
|
32
|
+
previousFocusedElement.current = null;
|
33
|
+
}
|
61
34
|
}
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
}
|
35
|
+
react_1.default.useEffect(() => {
|
36
|
+
if (containerRef.current instanceof HTMLElement) {
|
37
|
+
if (!disabled) {
|
38
|
+
abortController.current = focusTrap_1.focusTrap(containerRef.current, initialFocusRef.current ?? undefined);
|
39
|
+
return () => {
|
40
|
+
disableTrap();
|
41
|
+
};
|
42
|
+
}
|
43
|
+
else {
|
44
|
+
disableTrap();
|
45
|
+
}
|
46
|
+
}
|
47
|
+
},
|
48
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
49
|
+
[containerRef, initialFocusRef, disabled, ...dependencies]);
|
50
|
+
return { containerRef, initialFocusRef };
|
51
|
+
}
|
52
|
+
exports.useFocusTrap = useFocusTrap;
|
@@ -1,53 +1,57 @@
|
|
1
1
|
"use strict";
|
2
|
-
|
3
|
-
|
4
|
-
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
3
|
+
if (k2 === undefined) k2 = k;
|
4
|
+
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
5
|
+
}) : (function(o, m, k, k2) {
|
6
|
+
if (k2 === undefined) k2 = k;
|
7
|
+
o[k2] = m[k];
|
8
|
+
}));
|
9
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
10
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
11
|
+
}) : function(o, v) {
|
12
|
+
o["default"] = v;
|
5
13
|
});
|
6
|
-
|
7
|
-
|
8
|
-
var
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
14
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
15
|
+
if (mod && mod.__esModule) return mod;
|
16
|
+
var result = {};
|
17
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
18
|
+
__setModuleDefault(result, mod);
|
19
|
+
return result;
|
20
|
+
};
|
21
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
22
|
+
exports.useFocusZone = void 0;
|
23
|
+
const react_1 = __importStar(require("react"));
|
24
|
+
const focusZone_1 = require("../behaviors/focusZone");
|
25
|
+
const useProvidedRefOrCreate_1 = require("./useProvidedRefOrCreate");
|
18
26
|
function useFocusZone(settings = {}, dependencies = []) {
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
containerRef,
|
51
|
-
activeDescendantControlRef
|
52
|
-
};
|
53
|
-
}
|
27
|
+
const containerRef = useProvidedRefOrCreate_1.useProvidedRefOrCreate(settings.containerRef);
|
28
|
+
const useActiveDescendant = !!settings.activeDescendantFocus;
|
29
|
+
const passedActiveDescendantRef = typeof settings.activeDescendantFocus === 'boolean' || !settings.activeDescendantFocus
|
30
|
+
? undefined
|
31
|
+
: settings.activeDescendantFocus;
|
32
|
+
const activeDescendantControlRef = useProvidedRefOrCreate_1.useProvidedRefOrCreate(passedActiveDescendantRef);
|
33
|
+
const disabled = settings.disabled;
|
34
|
+
const abortController = react_1.default.useRef();
|
35
|
+
react_1.useEffect(() => {
|
36
|
+
if (containerRef.current instanceof HTMLElement &&
|
37
|
+
(!useActiveDescendant || activeDescendantControlRef.current instanceof HTMLElement)) {
|
38
|
+
if (!disabled) {
|
39
|
+
const vanillaSettings = {
|
40
|
+
...settings,
|
41
|
+
activeDescendantControl: activeDescendantControlRef.current ?? undefined
|
42
|
+
};
|
43
|
+
abortController.current = focusZone_1.focusZone(containerRef.current, vanillaSettings);
|
44
|
+
return () => {
|
45
|
+
abortController.current?.abort();
|
46
|
+
};
|
47
|
+
}
|
48
|
+
else {
|
49
|
+
abortController.current?.abort();
|
50
|
+
}
|
51
|
+
}
|
52
|
+
},
|
53
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
54
|
+
[disabled, ...dependencies]);
|
55
|
+
return { containerRef, activeDescendantControlRef };
|
56
|
+
}
|
57
|
+
exports.useFocusZone = useFocusZone;
|
@@ -1,28 +1,22 @@
|
|
1
1
|
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
6
3
|
exports.useOnEscapePress = void 0;
|
7
|
-
|
8
|
-
var _react = require("react");
|
9
|
-
|
4
|
+
const react_1 = require("react");
|
10
5
|
const handlers = [];
|
11
6
|
/**
|
12
7
|
* Calls all handlers in reverse order
|
13
8
|
* @param event The KeyboardEvent generated by the Escape keydown.
|
14
9
|
*/
|
15
|
-
|
16
10
|
function handleEscape(event) {
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
11
|
+
if (event.key === 'Escape' && !event.defaultPrevented) {
|
12
|
+
for (let i = handlers.length - 1; i >= 0; --i) {
|
13
|
+
handlers[i](event);
|
14
|
+
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
|
15
|
+
if (event.defaultPrevented) {
|
16
|
+
break;
|
17
|
+
}
|
18
|
+
}
|
24
19
|
}
|
25
|
-
}
|
26
20
|
}
|
27
21
|
/**
|
28
22
|
* Sets up a `keydown` listener on `window.document`. If
|
@@ -45,25 +39,20 @@ function handleEscape(event) {
|
|
45
39
|
* `onEscape` callback for memoization. Omit this param if the callback is already
|
46
40
|
* memoized. See `React.useCallback` for more info on memoization.
|
47
41
|
*/
|
48
|
-
|
49
|
-
|
50
42
|
const useOnEscapePress = (onEscape, callbackDependencies = [onEscape]) => {
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
};
|
66
|
-
}, [escapeCallback]);
|
43
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
44
|
+
const escapeCallback = react_1.useCallback(onEscape, callbackDependencies);
|
45
|
+
react_1.useEffect(() => {
|
46
|
+
if (handlers.length === 0) {
|
47
|
+
document.addEventListener('keydown', handleEscape);
|
48
|
+
}
|
49
|
+
handlers.push(escapeCallback);
|
50
|
+
return () => {
|
51
|
+
handlers.splice(handlers.findIndex(h => h === escapeCallback), 1);
|
52
|
+
if (handlers.length === 0) {
|
53
|
+
document.removeEventListener('keydown', handleEscape);
|
54
|
+
}
|
55
|
+
};
|
56
|
+
}, [escapeCallback]);
|
67
57
|
};
|
68
|
-
|
69
|
-
exports.useOnEscapePress = useOnEscapePress;
|
58
|
+
exports.useOnEscapePress = useOnEscapePress;
|
@@ -0,0 +1,61 @@
|
|
1
|
+
"use strict";
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
3
|
+
exports.useOnOutsideClick = void 0;
|
4
|
+
const react_1 = require("react");
|
5
|
+
// Because events are handled at the document level, we provide a mechanism for early return.
|
6
|
+
const stopPropagation = true;
|
7
|
+
/**
|
8
|
+
* Calls all handlers in reverse order
|
9
|
+
* @param event The MouseEvent generated by the click event.
|
10
|
+
*/
|
11
|
+
function handleClick(event) {
|
12
|
+
if (!event.defaultPrevented) {
|
13
|
+
for (const handler of Object.values(registry).reverse()) {
|
14
|
+
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
|
15
|
+
if (handler(event) === stopPropagation || event.defaultPrevented) {
|
16
|
+
break;
|
17
|
+
}
|
18
|
+
}
|
19
|
+
}
|
20
|
+
}
|
21
|
+
const registry = {};
|
22
|
+
function register(id, handler) {
|
23
|
+
registry[id] = handler;
|
24
|
+
}
|
25
|
+
function deregister(id) {
|
26
|
+
delete registry[id];
|
27
|
+
}
|
28
|
+
// For auto-incrementing unique identifiers for registered handlers.
|
29
|
+
let handlerId = 0;
|
30
|
+
const useOnOutsideClick = ({ containerRef, ignoreClickRefs, onClickOutside }) => {
|
31
|
+
const id = react_1.useMemo(() => handlerId++, []);
|
32
|
+
const handler = react_1.useCallback(event => {
|
33
|
+
// don't call click handler if the mouse event was triggered by an auxiliary button (right click/wheel button/etc)
|
34
|
+
if (event instanceof MouseEvent && event.button > 0) {
|
35
|
+
return stopPropagation;
|
36
|
+
}
|
37
|
+
// don't call handler if the click happened inside of the container
|
38
|
+
if (containerRef.current?.contains(event.target)) {
|
39
|
+
return stopPropagation;
|
40
|
+
}
|
41
|
+
// don't call handler if click happened on an ignored ref
|
42
|
+
if (ignoreClickRefs && ignoreClickRefs.some(({ current }) => current?.contains(event.target))) {
|
43
|
+
return stopPropagation;
|
44
|
+
}
|
45
|
+
onClickOutside(event);
|
46
|
+
}, [containerRef, ignoreClickRefs, onClickOutside]);
|
47
|
+
react_1.useEffect(() => {
|
48
|
+
if (Object.keys(registry).length === 0) {
|
49
|
+
// use capture to ensure we get all events
|
50
|
+
document.addEventListener('mousedown', handleClick, { capture: true });
|
51
|
+
}
|
52
|
+
register(id, handler);
|
53
|
+
return () => {
|
54
|
+
deregister(id);
|
55
|
+
if (Object.keys(registry).length === 0) {
|
56
|
+
document.removeEventListener('mousedown', handleClick, { capture: true });
|
57
|
+
}
|
58
|
+
};
|
59
|
+
}, [id, handler]);
|
60
|
+
};
|
61
|
+
exports.useOnOutsideClick = useOnOutsideClick;
|
@@ -1,36 +1,24 @@
|
|
1
1
|
"use strict";
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
3
|
+
exports.useOpenAndCloseFocus = void 0;
|
4
|
+
const react_1 = require("react");
|
5
|
+
const iterateFocusableElements_1 = require("../utils/iterateFocusableElements");
|
6
|
+
function useOpenAndCloseFocus({ initialFocusRef, returnFocusRef, containerRef, preventFocusOnOpen }) {
|
7
|
+
react_1.useEffect(() => {
|
8
|
+
if (preventFocusOnOpen) {
|
9
|
+
return;
|
10
|
+
}
|
11
|
+
const returnRef = returnFocusRef.current;
|
12
|
+
if (initialFocusRef && initialFocusRef.current) {
|
13
|
+
initialFocusRef.current.focus();
|
14
|
+
}
|
15
|
+
else if (containerRef.current) {
|
16
|
+
const firstItem = iterateFocusableElements_1.iterateFocusableElements(containerRef.current).next().value;
|
17
|
+
firstItem?.focus();
|
18
|
+
}
|
19
|
+
return function () {
|
20
|
+
returnRef?.focus();
|
21
|
+
};
|
22
|
+
}, [initialFocusRef, returnFocusRef, containerRef, preventFocusOnOpen]);
|
23
|
+
}
|
6
24
|
exports.useOpenAndCloseFocus = useOpenAndCloseFocus;
|
7
|
-
|
8
|
-
var _react = require("react");
|
9
|
-
|
10
|
-
var _iterateFocusableElements = require("../utils/iterateFocusableElements");
|
11
|
-
|
12
|
-
function useOpenAndCloseFocus({
|
13
|
-
initialFocusRef,
|
14
|
-
returnFocusRef,
|
15
|
-
containerRef,
|
16
|
-
preventFocusOnOpen
|
17
|
-
}) {
|
18
|
-
(0, _react.useEffect)(() => {
|
19
|
-
if (preventFocusOnOpen) {
|
20
|
-
return;
|
21
|
-
}
|
22
|
-
|
23
|
-
const returnRef = returnFocusRef.current;
|
24
|
-
|
25
|
-
if (initialFocusRef && initialFocusRef.current) {
|
26
|
-
initialFocusRef.current.focus();
|
27
|
-
} else if (containerRef.current) {
|
28
|
-
const firstItem = (0, _iterateFocusableElements.iterateFocusableElements)(containerRef.current).next().value;
|
29
|
-
firstItem === null || firstItem === void 0 ? void 0 : firstItem.focus();
|
30
|
-
}
|
31
|
-
|
32
|
-
return function () {
|
33
|
-
returnRef === null || returnRef === void 0 ? void 0 : returnRef.focus();
|
34
|
-
};
|
35
|
-
}, [initialFocusRef, returnFocusRef, containerRef, preventFocusOnOpen]);
|
36
|
-
}
|
@@ -0,0 +1,15 @@
|
|
1
|
+
"use strict";
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
3
|
+
exports.useOverlay = void 0;
|
4
|
+
const useOnOutsideClick_1 = require("./useOnOutsideClick");
|
5
|
+
const useOpenAndCloseFocus_1 = require("./useOpenAndCloseFocus");
|
6
|
+
const useOnEscapePress_1 = require("./useOnEscapePress");
|
7
|
+
const useProvidedRefOrCreate_1 = require("./useProvidedRefOrCreate");
|
8
|
+
const useOverlay = ({ overlayRef: _overlayRef, returnFocusRef, initialFocusRef, onEscape, ignoreClickRefs, onClickOutside, preventFocusOnOpen }) => {
|
9
|
+
const overlayRef = useProvidedRefOrCreate_1.useProvidedRefOrCreate(_overlayRef);
|
10
|
+
useOpenAndCloseFocus_1.useOpenAndCloseFocus({ containerRef: overlayRef, returnFocusRef, initialFocusRef, preventFocusOnOpen });
|
11
|
+
useOnOutsideClick_1.useOnOutsideClick({ containerRef: overlayRef, ignoreClickRefs, onClickOutside });
|
12
|
+
useOnEscapePress_1.useOnEscapePress(onEscape);
|
13
|
+
return { ref: overlayRef };
|
14
|
+
};
|
15
|
+
exports.useOverlay = useOverlay;
|
@@ -1,14 +1,10 @@
|
|
1
1
|
"use strict";
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
});
|
6
|
-
exports.useProvidedRefOrCreate =
|
7
|
-
|
8
|
-
var _react = _interopRequireDefault(require("react"));
|
9
|
-
|
10
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
11
|
-
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
4
|
+
};
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
6
|
+
exports.useProvidedRefOrCreate = void 0;
|
7
|
+
const react_1 = __importDefault(require("react"));
|
12
8
|
/**
|
13
9
|
* There are some situations where we only want to create a new ref if one is not provided to a component
|
14
10
|
* or hook as a prop. However, due to the `rules-of-hooks`, we cannot conditionally make a call to `React.useRef`
|
@@ -18,7 +14,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
18
14
|
* @type TRef The type of the RefObject which should be created.
|
19
15
|
*/
|
20
16
|
function useProvidedRefOrCreate(providedRef) {
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
17
|
+
const createdRef = react_1.default.useRef(null);
|
18
|
+
return providedRef ?? createdRef;
|
19
|
+
}
|
20
|
+
exports.useProvidedRefOrCreate = useProvidedRefOrCreate;
|
@@ -1,12 +1,7 @@
|
|
1
1
|
"use strict";
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
});
|
6
|
-
exports.useProvidedStateOrCreate = useProvidedStateOrCreate;
|
7
|
-
|
8
|
-
var _react = require("react");
|
9
|
-
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
3
|
+
exports.useProvidedStateOrCreate = void 0;
|
4
|
+
const react_1 = require("react");
|
10
5
|
/**
|
11
6
|
* There are some situations where we want to give users the option to control state externally with their own state handlers
|
12
7
|
* or default to using internal state handlers. Because of the 'rules-of-hooks', we cannot conditionally make a call to `React.useState`
|
@@ -17,11 +12,13 @@ var _react = require("react");
|
|
17
12
|
* @param defaultState The defaultState to use, if using internal state.
|
18
13
|
*/
|
19
14
|
function useProvidedStateOrCreate(externalState, setExternalState, defaultState) {
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
15
|
+
const [internalState, setInternalState] = react_1.useState(defaultState);
|
16
|
+
const state = externalState ?? internalState;
|
17
|
+
const setState = react_1.useCallback((s) => {
|
18
|
+
setInternalState(s);
|
19
|
+
if (setExternalState)
|
20
|
+
setExternalState(s);
|
21
|
+
}, [setExternalState]);
|
22
|
+
return [state, setState];
|
23
|
+
}
|
24
|
+
exports.useProvidedStateOrCreate = useProvidedStateOrCreate;
|
@@ -1,12 +1,7 @@
|
|
1
1
|
"use strict";
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
});
|
6
|
-
exports.useRenderForcingRef = useRenderForcingRef;
|
7
|
-
|
8
|
-
var _react = require("react");
|
9
|
-
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
3
|
+
exports.useRenderForcingRef = void 0;
|
4
|
+
const react_1 = require("react");
|
10
5
|
/**
|
11
6
|
* There are certain situations where a ref might be set after the current render cycle for a
|
12
7
|
* component has finished. e.g. a forward ref from a conditionally rendered child component.
|
@@ -14,12 +9,13 @@ var _react = require("react");
|
|
14
9
|
* @type TRef The type of the RefObject which should be created.
|
15
10
|
*/
|
16
11
|
function useRenderForcingRef() {
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
}
|
12
|
+
const [refCurrent, setRefCurrent] = react_1.useState(null);
|
13
|
+
const ref = react_1.useRef(null);
|
14
|
+
ref.current = refCurrent;
|
15
|
+
const setRef = react_1.useCallback((newRef) => {
|
16
|
+
ref.current = newRef;
|
17
|
+
setRefCurrent(newRef);
|
18
|
+
}, [ref]);
|
19
|
+
return [ref, setRef];
|
20
|
+
}
|
21
|
+
exports.useRenderForcingRef = useRenderForcingRef;
|
@@ -1,20 +1,17 @@
|
|
1
1
|
"use strict";
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
});
|
6
|
-
exports.useResizeObserver =
|
7
|
-
|
8
|
-
var _useIsomorphicLayoutEffect = _interopRequireDefault(require("../utils/useIsomorphicLayoutEffect"));
|
9
|
-
|
10
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
11
|
-
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
4
|
+
};
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
6
|
+
exports.useResizeObserver = void 0;
|
7
|
+
const useIsomorphicLayoutEffect_1 = __importDefault(require("../utils/useIsomorphicLayoutEffect"));
|
12
8
|
function useResizeObserver(callback) {
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
}
|
9
|
+
useIsomorphicLayoutEffect_1.default(() => {
|
10
|
+
const observer = new window.ResizeObserver(() => callback());
|
11
|
+
observer.observe(document.documentElement);
|
12
|
+
return () => {
|
13
|
+
observer.disconnect();
|
14
|
+
};
|
15
|
+
}, [callback]);
|
16
|
+
}
|
17
|
+
exports.useResizeObserver = useResizeObserver;
|
@@ -1,38 +1,30 @@
|
|
1
1
|
"use strict";
|
2
|
-
|
3
|
-
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.default = useSafeTimeout;
|
7
|
-
|
8
|
-
var _react = require("react");
|
9
|
-
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
3
|
+
const react_1 = require("react");
|
10
4
|
/**
|
11
5
|
* Safely call `setTimeout` and `clearTimeout` within a component.
|
12
6
|
*
|
13
7
|
* This hook ensures that all timeouts are cleared when the component unmounts.
|
14
8
|
*/
|
15
9
|
function useSafeTimeout() {
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
clearTimeout(id);
|
24
|
-
timers.current.delete(id);
|
25
|
-
}, []);
|
26
|
-
(0, _react.useEffect)(() => {
|
27
|
-
return () => {
|
28
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
29
|
-
for (const id of timers.current) {
|
10
|
+
const timers = react_1.useRef(new Set());
|
11
|
+
const safeSetTimeout = react_1.useCallback((handler, timeout, ...args) => {
|
12
|
+
const id = window.setTimeout(handler, timeout, ...args);
|
13
|
+
timers.current.add(id);
|
14
|
+
return id;
|
15
|
+
}, []);
|
16
|
+
const safeClearTimeout = react_1.useCallback((id) => {
|
30
17
|
clearTimeout(id);
|
31
|
-
|
32
|
-
};
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
}
|
18
|
+
timers.current.delete(id);
|
19
|
+
}, []);
|
20
|
+
react_1.useEffect(() => {
|
21
|
+
return () => {
|
22
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
23
|
+
for (const id of timers.current) {
|
24
|
+
clearTimeout(id);
|
25
|
+
}
|
26
|
+
};
|
27
|
+
}, []);
|
28
|
+
return { safeSetTimeout, safeClearTimeout };
|
29
|
+
}
|
30
|
+
exports.default = useSafeTimeout;
|