@primer/components 0.0.0-2021102918546 → 0.0.0-202110303104
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/CHANGELOG.md +4 -90
- package/dist/browser.esm.js +774 -718
- package/dist/browser.esm.js.map +1 -1
- package/dist/browser.umd.js +772 -716
- package/dist/browser.umd.js.map +1 -1
- 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.js +52 -27
- package/lib/ActionList/Item.jsx +311 -0
- package/lib/ActionList/List.jsx +138 -0
- package/lib/ActionList/index.js +12 -23
- package/lib/ActionList2/Description.jsx +29 -0
- package/lib/ActionList2/Divider.jsx +22 -0
- package/lib/ActionList2/Group.d.ts +2 -28
- package/lib/ActionList2/Group.js +6 -55
- 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.js +1 -2
- package/lib/ActionList2/Item.jsx +174 -0
- package/lib/ActionList2/LinkItem.jsx +28 -0
- package/lib/ActionList2/List.d.ts +1 -1
- package/lib/ActionList2/List.js +2 -1
- package/lib/ActionList2/List.jsx +41 -0
- package/lib/ActionList2/Selection.jsx +50 -0
- package/lib/ActionList2/Visuals.jsx +48 -0
- package/lib/ActionList2/index.js +23 -41
- 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 +3 -4
- package/lib/Autocomplete/Autocomplete.jsx +100 -0
- package/lib/Autocomplete/AutocompleteContext.jsx +5 -0
- package/lib/Autocomplete/AutocompleteInput.d.ts +3 -4
- 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.d.ts +7 -8
- package/lib/Breadcrumbs.js +12 -7
- package/lib/Breadcrumbs.jsx +74 -0
- package/lib/Button/Button.d.ts +3 -3
- package/lib/Button/Button.js +6 -2
- package/lib/Button/Button.jsx +60 -0
- package/lib/Button/ButtonBase.d.ts +8 -5
- package/lib/Button/ButtonBase.js +5 -1
- package/lib/Button/ButtonBase.jsx +36 -0
- package/lib/Button/ButtonClose.d.ts +46 -4
- package/lib/Button/ButtonClose.js +1 -1
- package/lib/Button/ButtonClose.jsx +55 -0
- package/lib/Button/ButtonDanger.d.ts +3 -3
- package/lib/Button/ButtonDanger.js +6 -2
- package/lib/Button/ButtonDanger.jsx +63 -0
- package/lib/Button/ButtonGroup.jsx +55 -0
- package/lib/Button/ButtonInvisible.d.ts +3 -3
- package/lib/Button/ButtonInvisible.js +6 -2
- package/lib/Button/ButtonInvisible.jsx +52 -0
- package/lib/Button/ButtonOutline.d.ts +3 -3
- package/lib/Button/ButtonOutline.js +6 -2
- package/lib/Button/ButtonOutline.jsx +63 -0
- package/lib/Button/ButtonPrimary.d.ts +3 -3
- package/lib/Button/ButtonPrimary.js +6 -2
- package/lib/Button/ButtonPrimary.jsx +62 -0
- package/lib/Button/ButtonStyles.jsx +37 -0
- package/lib/Button/ButtonTableList.d.ts +2 -1
- package/lib/Button/ButtonTableList.js +1 -1
- package/lib/Button/ButtonTableList.jsx +49 -0
- package/lib/Button/index.js +21 -70
- package/lib/Caret.jsx +93 -0
- package/lib/CircleBadge.d.ts +5 -4
- package/lib/CircleBadge.js +1 -1
- package/lib/CircleBadge.jsx +43 -0
- package/lib/CircleOcticon.d.ts +1 -2
- package/lib/CircleOcticon.jsx +21 -0
- package/lib/CounterLabel.d.ts +2 -1
- package/lib/CounterLabel.js +1 -1
- package/lib/CounterLabel.jsx +44 -0
- package/lib/Details.jsx +21 -0
- package/lib/Dialog/ConfirmationDialog.jsx +146 -0
- package/lib/Dialog/Dialog.d.ts +9 -5
- package/lib/Dialog/Dialog.js +11 -17
- package/lib/Dialog/Dialog.jsx +273 -0
- package/lib/Dialog.d.ts +5 -5
- package/lib/Dialog.js +1 -1
- package/lib/Dialog.jsx +131 -0
- package/lib/Dropdown.d.ts +99 -14
- package/lib/Dropdown.js +3 -3
- package/lib/Dropdown.jsx +134 -0
- package/lib/DropdownMenu/DropdownButton.d.ts +47 -4
- package/lib/DropdownMenu/DropdownButton.js +1 -3
- 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/EmojiPicker/EmojiPicker.d.ts +15 -0
- package/lib/EmojiPicker/EmojiPicker.js +205 -0
- package/lib/EmojiPicker/EmojiPicker.jsx +125 -0
- package/lib/EmojiPicker/EmojiPickerAnchor.d.ts +0 -0
- package/lib/EmojiPicker/EmojiPickerAnchor.js +1 -0
- package/lib/EmojiPicker/EmojiPickerAnchor.jsx +1 -0
- package/lib/EmojiPicker/EmojiPickerPanel.d.ts +3 -0
- package/lib/EmojiPicker/EmojiPickerPanel.js +18 -0
- package/lib/EmojiPicker/EmojiPickerPanel.jsx +10 -0
- package/lib/EmojiPicker/data.d.ts +9 -0
- package/lib/EmojiPicker/data.js +7254 -0
- package/lib/EmojiPicker/index.d.ts +2 -0
- package/lib/EmojiPicker/index.js +8 -0
- package/lib/FilterList.d.ts +303 -265
- package/lib/FilterList.js +6 -2
- package/lib/FilterList.jsx +63 -0
- package/lib/FilteredActionList/FilteredActionList.jsx +100 -0
- package/lib/FilteredActionList/index.js +4 -12
- package/lib/FilteredSearch.d.ts +2 -1
- package/lib/FilteredSearch.js +1 -1
- package/lib/FilteredSearch.jsx +29 -0
- package/lib/Flash.d.ts +2 -1
- package/lib/Flash.js +1 -1
- package/lib/Flash.jsx +70 -0
- package/lib/Flex.jsx +15 -0
- package/lib/FormGroup.d.ts +5 -4
- package/lib/FormGroup.js +2 -2
- package/lib/FormGroup.jsx +25 -0
- package/lib/Grid.jsx +15 -0
- package/lib/Header.d.ts +7 -6
- package/lib/Header.js +4 -4
- package/lib/Header.jsx +90 -0
- package/lib/Heading.jsx +21 -0
- package/lib/Label.d.ts +2 -1
- package/lib/Label.js +3 -2
- package/lib/Label.jsx +84 -0
- package/lib/LabelGroup.d.ts +2 -1
- package/lib/LabelGroup.js +1 -1
- package/lib/LabelGroup.jsx +19 -0
- package/lib/Link.d.ts +2 -1
- package/lib/Link.js +1 -1
- package/lib/Link.jsx +38 -0
- package/lib/NewButton/button-counter.jsx +14 -0
- package/lib/NewButton/button.js +42 -34
- package/lib/NewButton/button.jsx +278 -0
- package/lib/NewButton/index.js +5 -12
- package/lib/NewButton/types.js +2 -1
- package/lib/Overlay.d.ts +11 -14
- package/lib/Overlay.js +4 -3
- package/lib/Overlay.jsx +156 -0
- package/lib/Pagehead.d.ts +2 -1
- package/lib/Pagehead.js +1 -1
- package/lib/Pagehead.jsx +18 -0
- package/lib/Pagination/Pagination.js +1 -1
- 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.d.ts +5 -4
- package/lib/Popover.js +5 -4
- 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 +189 -27
- package/lib/SelectMenu/SelectMenu.js +3 -1
- package/lib/SelectMenu/SelectMenu.jsx +114 -0
- package/lib/SelectMenu/SelectMenuContext.jsx +5 -0
- package/lib/SelectMenu/SelectMenuDivider.d.ts +2 -1
- package/lib/SelectMenu/SelectMenuDivider.js +1 -1
- package/lib/SelectMenu/SelectMenuDivider.jsx +43 -0
- package/lib/SelectMenu/SelectMenuFilter.js +1 -1
- package/lib/SelectMenu/SelectMenuFilter.jsx +59 -0
- package/lib/SelectMenu/SelectMenuFooter.d.ts +2 -1
- package/lib/SelectMenu/SelectMenuFooter.js +1 -1
- package/lib/SelectMenu/SelectMenuFooter.jsx +46 -0
- package/lib/SelectMenu/SelectMenuHeader.d.ts +2 -1
- package/lib/SelectMenu/SelectMenuHeader.js +1 -1
- package/lib/SelectMenu/SelectMenuHeader.jsx +44 -0
- package/lib/SelectMenu/SelectMenuItem.d.ts +3 -2
- package/lib/SelectMenu/SelectMenuItem.js +1 -1
- package/lib/SelectMenu/SelectMenuItem.jsx +143 -0
- package/lib/SelectMenu/SelectMenuList.d.ts +2 -1
- package/lib/SelectMenu/SelectMenuList.js +1 -1
- package/lib/SelectMenu/SelectMenuList.jsx +60 -0
- package/lib/SelectMenu/SelectMenuLoadingAnimation.d.ts +2 -2
- package/lib/SelectMenu/SelectMenuLoadingAnimation.js +1 -3
- package/lib/SelectMenu/SelectMenuLoadingAnimation.jsx +21 -0
- package/lib/SelectMenu/SelectMenuModal.d.ts +3 -2
- package/lib/SelectMenu/SelectMenuModal.js +1 -1
- package/lib/SelectMenu/SelectMenuModal.jsx +119 -0
- package/lib/SelectMenu/SelectMenuTab.d.ts +2 -1
- package/lib/SelectMenu/SelectMenuTab.js +1 -1
- package/lib/SelectMenu/SelectMenuTab.jsx +93 -0
- package/lib/SelectMenu/SelectMenuTabPanel.d.ts +2 -1
- package/lib/SelectMenu/SelectMenuTabPanel.js +1 -1
- package/lib/SelectMenu/SelectMenuTabPanel.jsx +43 -0
- package/lib/SelectMenu/SelectMenuTabs.d.ts +2 -1
- package/lib/SelectMenu/SelectMenuTabs.js +1 -1
- 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.d.ts +8 -11
- package/lib/SideNav.js +15 -8
- package/lib/SideNav.jsx +177 -0
- package/lib/Spinner.jsx +35 -0
- package/lib/StateLabel.d.ts +2 -1
- package/lib/StateLabel.js +5 -6
- package/lib/StateLabel.jsx +94 -0
- package/lib/StyledOcticon.d.ts +2 -1
- package/lib/StyledOcticon.js +3 -1
- package/lib/StyledOcticon.jsx +20 -0
- package/lib/SubNav.d.ts +11 -5
- package/lib/SubNav.js +12 -7
- package/lib/SubNav.jsx +104 -0
- package/lib/TabNav.d.ts +4 -3
- package/lib/TabNav.js +2 -2
- package/lib/TabNav.jsx +60 -0
- package/lib/Text.jsx +14 -0
- package/lib/TextInput.jsx +23 -0
- package/lib/TextInputWithTokens.d.ts +3 -4
- package/lib/TextInputWithTokens.jsx +218 -0
- package/lib/ThemeProvider.jsx +130 -0
- package/lib/Timeline.d.ts +393 -19
- package/lib/Timeline.js +13 -16
- 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.d.ts +2 -1
- package/lib/Tooltip.js +1 -1
- package/lib/Tooltip.jsx +246 -0
- package/lib/Truncate.d.ts +2 -1
- package/lib/Truncate.js +3 -1
- package/lib/Truncate.jsx +27 -0
- package/lib/UnderlineNav.d.ts +3 -2
- package/lib/UnderlineNav.js +2 -2
- package/lib/UnderlineNav.jsx +90 -0
- package/lib/_TextInputWrapper.jsx +120 -0
- package/lib/_UnstyledTextInput.jsx +22 -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.js +20 -30
- 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.d.ts +2 -2
- package/lib/index.js +165 -652
- package/lib/polyfills/eventListenerSignal.js +37 -45
- package/lib/sx.js +10 -22
- package/lib/theme-preval.js +64 -3169
- package/lib/theme.js +3 -12
- 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 +61 -8
- package/lib/utils/testing.js +0 -29
- 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.js +8 -14
- package/lib/utils/useIsomorphicLayoutEffect.js +8 -11
- package/lib/utils/userAgent.js +8 -12
- package/lib-esm/ActionList/Item.js +53 -28
- package/lib-esm/ActionList2/Group.d.ts +2 -28
- package/lib-esm/ActionList2/Group.js +5 -52
- package/lib-esm/ActionList2/Header.d.ts +26 -0
- package/lib-esm/ActionList2/Header.js +44 -0
- package/lib-esm/ActionList2/Item.js +1 -2
- package/lib-esm/ActionList2/List.d.ts +1 -1
- package/lib-esm/ActionList2/List.js +2 -1
- package/lib-esm/Autocomplete/Autocomplete.d.ts +3 -4
- package/lib-esm/Autocomplete/AutocompleteInput.d.ts +3 -4
- package/lib-esm/Breadcrumbs.d.ts +7 -8
- package/lib-esm/Breadcrumbs.js +13 -8
- package/lib-esm/Button/Button.d.ts +3 -3
- package/lib-esm/Button/Button.js +2 -2
- package/lib-esm/Button/ButtonBase.d.ts +8 -5
- package/lib-esm/Button/ButtonBase.js +3 -1
- package/lib-esm/Button/ButtonClose.d.ts +46 -4
- package/lib-esm/Button/ButtonClose.js +2 -2
- package/lib-esm/Button/ButtonDanger.d.ts +3 -3
- package/lib-esm/Button/ButtonDanger.js +2 -2
- package/lib-esm/Button/ButtonInvisible.d.ts +3 -3
- package/lib-esm/Button/ButtonInvisible.js +2 -2
- package/lib-esm/Button/ButtonOutline.d.ts +3 -3
- package/lib-esm/Button/ButtonOutline.js +2 -2
- package/lib-esm/Button/ButtonPrimary.d.ts +3 -3
- package/lib-esm/Button/ButtonPrimary.js +2 -2
- package/lib-esm/Button/ButtonTableList.d.ts +2 -1
- package/lib-esm/Button/ButtonTableList.js +2 -2
- package/lib-esm/CircleBadge.d.ts +5 -4
- package/lib-esm/CircleBadge.js +2 -2
- package/lib-esm/CircleOcticon.d.ts +1 -2
- package/lib-esm/CounterLabel.d.ts +2 -1
- package/lib-esm/CounterLabel.js +2 -2
- package/lib-esm/Dialog/Dialog.d.ts +9 -5
- package/lib-esm/Dialog/Dialog.js +12 -12
- package/lib-esm/Dialog.d.ts +5 -5
- package/lib-esm/Dialog.js +2 -2
- package/lib-esm/Dropdown.d.ts +99 -14
- package/lib-esm/Dropdown.js +4 -4
- package/lib-esm/DropdownMenu/DropdownButton.d.ts +47 -4
- package/lib-esm/DropdownMenu/DropdownButton.js +1 -3
- package/lib-esm/EmojiPicker/EmojiPicker.d.ts +15 -0
- package/lib-esm/EmojiPicker/EmojiPicker.js +184 -0
- package/lib-esm/EmojiPicker/EmojiPickerAnchor.d.ts +0 -0
- package/lib-esm/EmojiPicker/EmojiPickerAnchor.js +0 -0
- package/lib-esm/EmojiPicker/EmojiPickerPanel.d.ts +3 -0
- package/lib-esm/EmojiPicker/EmojiPickerPanel.js +8 -0
- package/lib-esm/EmojiPicker/data.d.ts +9 -0
- package/lib-esm/EmojiPicker/data.js +5434 -0
- package/lib-esm/EmojiPicker/index.d.ts +2 -0
- package/lib-esm/EmojiPicker/index.js +1 -0
- package/lib-esm/FilterList.d.ts +303 -265
- package/lib-esm/FilterList.js +7 -3
- package/lib-esm/FilteredSearch.d.ts +2 -1
- package/lib-esm/FilteredSearch.js +2 -2
- package/lib-esm/Flash.d.ts +2 -1
- package/lib-esm/Flash.js +2 -2
- package/lib-esm/FormGroup.d.ts +5 -4
- package/lib-esm/FormGroup.js +3 -3
- package/lib-esm/Header.d.ts +7 -6
- package/lib-esm/Header.js +5 -5
- package/lib-esm/Label.d.ts +2 -1
- package/lib-esm/Label.js +4 -3
- package/lib-esm/LabelGroup.d.ts +2 -1
- package/lib-esm/LabelGroup.js +2 -2
- package/lib-esm/Link.d.ts +2 -1
- package/lib-esm/Link.js +2 -2
- package/lib-esm/NewButton/button.js +42 -31
- package/lib-esm/Overlay.d.ts +11 -14
- package/lib-esm/Overlay.js +3 -2
- package/lib-esm/Pagehead.d.ts +2 -1
- package/lib-esm/Pagehead.js +2 -2
- package/lib-esm/Pagination/Pagination.js +2 -2
- package/lib-esm/Popover.d.ts +5 -4
- package/lib-esm/Popover.js +5 -4
- package/lib-esm/Position.d.ts +4 -4
- package/lib-esm/SelectMenu/SelectMenu.d.ts +189 -27
- package/lib-esm/SelectMenu/SelectMenu.js +2 -1
- package/lib-esm/SelectMenu/SelectMenuDivider.d.ts +2 -1
- package/lib-esm/SelectMenu/SelectMenuDivider.js +2 -2
- package/lib-esm/SelectMenu/SelectMenuFilter.js +2 -2
- package/lib-esm/SelectMenu/SelectMenuFooter.d.ts +2 -1
- package/lib-esm/SelectMenu/SelectMenuFooter.js +2 -2
- package/lib-esm/SelectMenu/SelectMenuHeader.d.ts +2 -1
- package/lib-esm/SelectMenu/SelectMenuHeader.js +2 -2
- package/lib-esm/SelectMenu/SelectMenuItem.d.ts +3 -2
- package/lib-esm/SelectMenu/SelectMenuItem.js +2 -2
- package/lib-esm/SelectMenu/SelectMenuList.d.ts +2 -1
- package/lib-esm/SelectMenu/SelectMenuList.js +2 -2
- package/lib-esm/SelectMenu/SelectMenuLoadingAnimation.d.ts +2 -2
- package/lib-esm/SelectMenu/SelectMenuLoadingAnimation.js +2 -3
- package/lib-esm/SelectMenu/SelectMenuModal.d.ts +3 -2
- package/lib-esm/SelectMenu/SelectMenuModal.js +2 -2
- package/lib-esm/SelectMenu/SelectMenuTab.d.ts +2 -1
- package/lib-esm/SelectMenu/SelectMenuTab.js +2 -2
- package/lib-esm/SelectMenu/SelectMenuTabPanel.d.ts +2 -1
- package/lib-esm/SelectMenu/SelectMenuTabPanel.js +2 -2
- package/lib-esm/SelectMenu/SelectMenuTabs.d.ts +2 -1
- package/lib-esm/SelectMenu/SelectMenuTabs.js +2 -2
- package/lib-esm/SideNav.d.ts +8 -11
- package/lib-esm/SideNav.js +16 -8
- package/lib-esm/StateLabel.d.ts +2 -1
- package/lib-esm/StateLabel.js +6 -7
- package/lib-esm/StyledOcticon.d.ts +2 -1
- package/lib-esm/StyledOcticon.js +2 -1
- package/lib-esm/SubNav.d.ts +11 -5
- package/lib-esm/SubNav.js +13 -8
- package/lib-esm/TabNav.d.ts +4 -3
- package/lib-esm/TabNav.js +3 -3
- package/lib-esm/TextInputWithTokens.d.ts +3 -4
- package/lib-esm/Timeline.d.ts +393 -19
- package/lib-esm/Timeline.js +13 -12
- 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/Tooltip.d.ts +2 -1
- package/lib-esm/Tooltip.js +2 -2
- package/lib-esm/Truncate.d.ts +2 -1
- package/lib-esm/Truncate.js +2 -1
- package/lib-esm/UnderlineNav.d.ts +3 -2
- package/lib-esm/UnderlineNav.js +3 -3
- package/lib-esm/index.d.ts +2 -2
- package/lib-esm/index.js +1 -1
- package/lib-esm/theme-preval.js +366 -512
- package/lib-esm/utils/testing.d.ts +61 -8
- package/lib-esm/utils/testing.js +0 -24
- package/package.json +5 -4
- package/lib/Checkbox.d.ts +0 -29
- package/lib/Checkbox.js +0 -64
- package/lib-esm/Checkbox.d.ts +0 -29
- package/lib-esm/Checkbox.js +0 -44
package/lib/hooks/useDialog.js
CHANGED
@@ -1,104 +1,80 @@
|
|
1
1
|
"use strict";
|
2
|
-
|
3
|
-
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.default = void 0;
|
7
|
-
|
8
|
-
var _react = require("react");
|
9
|
-
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
3
|
+
const react_1 = require("react");
|
10
4
|
const noop = () => null;
|
11
|
-
|
12
5
|
function visible(el) {
|
13
|
-
|
6
|
+
return !el.hidden && (!el.type || el.type !== 'hidden') && (el.offsetWidth > 0 || el.offsetHeight > 0);
|
14
7
|
}
|
15
|
-
|
16
8
|
function focusable(el) {
|
17
|
-
|
18
|
-
|
9
|
+
const inputEl = el;
|
10
|
+
return inputEl.tabIndex >= 0 && !inputEl.disabled && visible(inputEl);
|
19
11
|
}
|
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
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
case 'Escape':
|
86
|
-
onDismiss();
|
87
|
-
event.stopPropagation();
|
88
|
-
break;
|
89
|
-
}
|
90
|
-
}, [handleTab, onDismiss]);
|
91
|
-
|
92
|
-
const getDialogProps = () => {
|
93
|
-
return {
|
94
|
-
onKeyDown
|
12
|
+
function useDialog({ modalRef, overlayRef, isOpen, onDismiss = noop, initialFocusRef, closeButtonRef }) {
|
13
|
+
const onClickOutside = react_1.useCallback(e => {
|
14
|
+
if (modalRef.current &&
|
15
|
+
overlayRef.current &&
|
16
|
+
!modalRef.current.contains(e.target) &&
|
17
|
+
overlayRef.current.contains(e.target)) {
|
18
|
+
onDismiss();
|
19
|
+
}
|
20
|
+
}, [onDismiss, modalRef, overlayRef]);
|
21
|
+
react_1.useEffect(() => {
|
22
|
+
if (isOpen) {
|
23
|
+
document.addEventListener('click', onClickOutside);
|
24
|
+
return () => {
|
25
|
+
document.removeEventListener('click', onClickOutside);
|
26
|
+
};
|
27
|
+
}
|
28
|
+
}, [isOpen, onClickOutside]);
|
29
|
+
react_1.useEffect(() => {
|
30
|
+
if (isOpen) {
|
31
|
+
if (initialFocusRef && initialFocusRef.current) {
|
32
|
+
initialFocusRef.current.focus();
|
33
|
+
}
|
34
|
+
else if (closeButtonRef && closeButtonRef.current) {
|
35
|
+
closeButtonRef.current.focus();
|
36
|
+
}
|
37
|
+
}
|
38
|
+
}, [isOpen, initialFocusRef, closeButtonRef]);
|
39
|
+
const getFocusableItem = react_1.useCallback((e, movement) => {
|
40
|
+
if (modalRef.current) {
|
41
|
+
const items = Array.from(modalRef.current.querySelectorAll('*')).filter(focusable);
|
42
|
+
if (items.length === 0)
|
43
|
+
return;
|
44
|
+
e.preventDefault();
|
45
|
+
const focusedElement = document.activeElement;
|
46
|
+
if (!focusedElement) {
|
47
|
+
return;
|
48
|
+
}
|
49
|
+
const index = items.indexOf(focusedElement);
|
50
|
+
const offsetIndex = index + movement;
|
51
|
+
const fallbackIndex = movement === 1 ? 0 : items.length - 1;
|
52
|
+
const focusableItem = items[offsetIndex] || items[fallbackIndex];
|
53
|
+
return focusableItem;
|
54
|
+
}
|
55
|
+
}, [modalRef]);
|
56
|
+
const handleTab = react_1.useCallback(e => {
|
57
|
+
const movement = e.shiftKey ? -1 : 1;
|
58
|
+
const focusableItem = getFocusableItem(e, movement);
|
59
|
+
if (!focusableItem) {
|
60
|
+
return;
|
61
|
+
}
|
62
|
+
focusableItem.focus();
|
63
|
+
}, [getFocusableItem]);
|
64
|
+
const onKeyDown = react_1.useCallback(event => {
|
65
|
+
switch (event.key) {
|
66
|
+
case 'Tab':
|
67
|
+
handleTab(event);
|
68
|
+
break;
|
69
|
+
case 'Escape':
|
70
|
+
onDismiss();
|
71
|
+
event.stopPropagation();
|
72
|
+
break;
|
73
|
+
}
|
74
|
+
}, [handleTab, onDismiss]);
|
75
|
+
const getDialogProps = () => {
|
76
|
+
return { onKeyDown };
|
95
77
|
};
|
96
|
-
|
97
|
-
|
98
|
-
return {
|
99
|
-
getDialogProps
|
100
|
-
};
|
78
|
+
return { getDialogProps };
|
101
79
|
}
|
102
|
-
|
103
|
-
var _default = useDialog;
|
104
|
-
exports.default = _default;
|
80
|
+
exports.default = useDialog;
|
@@ -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;
|