@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
@@ -0,0 +1,57 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.Group = exports.GroupContext = void 0;
|
7
|
+
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
9
|
+
|
10
|
+
var _Box = _interopRequireDefault(require("../Box"));
|
11
|
+
|
12
|
+
var _Header = require("./Header");
|
13
|
+
|
14
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
15
|
+
|
16
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
17
|
+
|
18
|
+
const GroupContext = /*#__PURE__*/_react.default.createContext({});
|
19
|
+
|
20
|
+
exports.GroupContext = GroupContext;
|
21
|
+
|
22
|
+
const Group = ({
|
23
|
+
title,
|
24
|
+
variant,
|
25
|
+
auxiliaryText,
|
26
|
+
selectionVariant,
|
27
|
+
sx = {},
|
28
|
+
...props
|
29
|
+
}) => {
|
30
|
+
return /*#__PURE__*/_react.default.createElement(_Box.default, _extends({
|
31
|
+
as: "li",
|
32
|
+
sx: {
|
33
|
+
'&:not(:first-child)': {
|
34
|
+
marginTop: 2
|
35
|
+
},
|
36
|
+
listStyle: 'none',
|
37
|
+
// hide the ::marker inserted by browser's stylesheet
|
38
|
+
...sx
|
39
|
+
}
|
40
|
+
}, props), title && /*#__PURE__*/_react.default.createElement(_Header.Header, {
|
41
|
+
title: title,
|
42
|
+
variant: variant,
|
43
|
+
auxiliaryText: auxiliaryText
|
44
|
+
}), /*#__PURE__*/_react.default.createElement(GroupContext.Provider, {
|
45
|
+
value: {
|
46
|
+
selectionVariant
|
47
|
+
}
|
48
|
+
}, /*#__PURE__*/_react.default.createElement(_Box.default, {
|
49
|
+
as: "ul",
|
50
|
+
sx: {
|
51
|
+
paddingInlineStart: 0
|
52
|
+
}
|
53
|
+
}, props.children)));
|
54
|
+
};
|
55
|
+
|
56
|
+
exports.Group = Group;
|
57
|
+
Group.displayName = "Group";
|
@@ -0,0 +1,25 @@
|
|
1
|
+
"use strict";
|
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.Group = exports.GroupContext = void 0;
|
7
|
+
const react_1 = __importDefault(require("react"));
|
8
|
+
const Box_1 = __importDefault(require("../Box"));
|
9
|
+
const Header_1 = require("./Header");
|
10
|
+
exports.GroupContext = react_1.default.createContext({});
|
11
|
+
const Group = ({ title, variant, auxiliaryText, selectionVariant, sx = {}, ...props }) => {
|
12
|
+
return (<Box_1.default as="li" sx={{
|
13
|
+
'&:not(:first-child)': { marginTop: 2 },
|
14
|
+
listStyle: 'none',
|
15
|
+
...sx
|
16
|
+
}} {...props}>
|
17
|
+
{title && <Header_1.Header title={title} variant={variant} auxiliaryText={auxiliaryText}/>}
|
18
|
+
<exports.GroupContext.Provider value={{ selectionVariant }}>
|
19
|
+
<Box_1.default as="ul" sx={{ paddingInlineStart: 0 }}>
|
20
|
+
{props.children}
|
21
|
+
</Box_1.default>
|
22
|
+
</exports.GroupContext.Provider>
|
23
|
+
</Box_1.default>);
|
24
|
+
};
|
25
|
+
exports.Group = Group;
|
@@ -0,0 +1,26 @@
|
|
1
|
+
/// <reference types="react" />
|
2
|
+
import { SxProp } from '../sx';
|
3
|
+
/**
|
4
|
+
* Contract for props passed to the `Header` component.
|
5
|
+
*/
|
6
|
+
export declare type HeaderProps = {
|
7
|
+
/**
|
8
|
+
* Style variations. Usage is discretionary.
|
9
|
+
*
|
10
|
+
* - `"filled"` - Superimposed on a background, offset from nearby content
|
11
|
+
* - `"subtle"` - Relatively less offset from nearby content
|
12
|
+
*/
|
13
|
+
variant?: 'subtle' | 'filled';
|
14
|
+
/**
|
15
|
+
* Primary text which names a `Group`.
|
16
|
+
*/
|
17
|
+
title?: string;
|
18
|
+
/**
|
19
|
+
* Secondary text which provides additional information about a `Group`.
|
20
|
+
*/
|
21
|
+
auxiliaryText?: string;
|
22
|
+
} & SxProp;
|
23
|
+
/**
|
24
|
+
* Displays the name and description of a `Group`.
|
25
|
+
*/
|
26
|
+
export declare const Header: ({ variant, title, auxiliaryText, sx, ...props }: HeaderProps) => JSX.Element;
|
@@ -0,0 +1,55 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.Header = void 0;
|
7
|
+
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
9
|
+
|
10
|
+
var _Box = _interopRequireDefault(require("../Box"));
|
11
|
+
|
12
|
+
var _List = require("./List");
|
13
|
+
|
14
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
15
|
+
|
16
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
17
|
+
|
18
|
+
/**
|
19
|
+
* Displays the name and description of a `Group`.
|
20
|
+
*/
|
21
|
+
const Header = ({
|
22
|
+
variant = 'subtle',
|
23
|
+
title,
|
24
|
+
auxiliaryText,
|
25
|
+
sx = {},
|
26
|
+
...props
|
27
|
+
}) => {
|
28
|
+
const {
|
29
|
+
variant: listVariant
|
30
|
+
} = _react.default.useContext(_List.ListContext);
|
31
|
+
|
32
|
+
const styles = {
|
33
|
+
paddingY: '6px',
|
34
|
+
paddingX: listVariant === 'full' ? 2 : 3,
|
35
|
+
fontSize: 0,
|
36
|
+
fontWeight: 'bold',
|
37
|
+
color: 'fg.muted',
|
38
|
+
...(variant === 'filled' && {
|
39
|
+
backgroundColor: 'canvas.subtle',
|
40
|
+
marginX: 0,
|
41
|
+
marginBottom: 2,
|
42
|
+
borderTop: '1px solid',
|
43
|
+
borderBottom: '1px solid',
|
44
|
+
borderColor: 'neutral.muted'
|
45
|
+
}),
|
46
|
+
...sx
|
47
|
+
};
|
48
|
+
return /*#__PURE__*/_react.default.createElement(_Box.default, _extends({
|
49
|
+
sx: styles,
|
50
|
+
role: "heading"
|
51
|
+
}, props), title, auxiliaryText && /*#__PURE__*/_react.default.createElement("span", null, auxiliaryText));
|
52
|
+
};
|
53
|
+
|
54
|
+
exports.Header = Header;
|
55
|
+
Header.displayName = "Header";
|
@@ -0,0 +1,36 @@
|
|
1
|
+
"use strict";
|
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.Header = void 0;
|
7
|
+
const react_1 = __importDefault(require("react"));
|
8
|
+
const Box_1 = __importDefault(require("../Box"));
|
9
|
+
const List_1 = require("./List");
|
10
|
+
/**
|
11
|
+
* Displays the name and description of a `Group`.
|
12
|
+
*/
|
13
|
+
const Header = ({ variant = 'subtle', title, auxiliaryText, sx = {}, ...props }) => {
|
14
|
+
const { variant: listVariant } = react_1.default.useContext(List_1.ListContext);
|
15
|
+
const styles = {
|
16
|
+
paddingY: '6px',
|
17
|
+
paddingX: listVariant === 'full' ? 2 : 3,
|
18
|
+
fontSize: 0,
|
19
|
+
fontWeight: 'bold',
|
20
|
+
color: 'fg.muted',
|
21
|
+
...(variant === 'filled' && {
|
22
|
+
backgroundColor: 'canvas.subtle',
|
23
|
+
marginX: 0,
|
24
|
+
marginBottom: 2,
|
25
|
+
borderTop: '1px solid',
|
26
|
+
borderBottom: '1px solid',
|
27
|
+
borderColor: 'neutral.muted'
|
28
|
+
}),
|
29
|
+
...sx
|
30
|
+
};
|
31
|
+
return (<Box_1.default sx={styles} role="heading" {...props}>
|
32
|
+
{title}
|
33
|
+
{auxiliaryText && <span>{auxiliaryText}</span>}
|
34
|
+
</Box_1.default>);
|
35
|
+
};
|
36
|
+
exports.Header = Header;
|
@@ -0,0 +1,63 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { ForwardRefComponent as PolymorphicForwardRefComponent } from '@radix-ui/react-polymorphic';
|
3
|
+
import { SxProp } from '../sx';
|
4
|
+
import { AriaRole } from '../utils/types';
|
5
|
+
export declare const getVariantStyles: (variant: ItemProps['variant'], disabled: ItemProps['disabled']) => {
|
6
|
+
color: string;
|
7
|
+
iconColor: string;
|
8
|
+
annotationColor: string;
|
9
|
+
hoverColor?: undefined;
|
10
|
+
} | {
|
11
|
+
color: string;
|
12
|
+
iconColor: string;
|
13
|
+
annotationColor: string;
|
14
|
+
hoverColor: string;
|
15
|
+
};
|
16
|
+
export declare type ItemProps = {
|
17
|
+
/**
|
18
|
+
* Primary content for an Item
|
19
|
+
*/
|
20
|
+
children?: React.ReactNode;
|
21
|
+
/**
|
22
|
+
* Callback that will trigger both on click selection and keyboard selection.
|
23
|
+
*/
|
24
|
+
onSelect?: (event: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLLIElement>) => void;
|
25
|
+
/**
|
26
|
+
* Is the `Item` is currently selected?
|
27
|
+
*/
|
28
|
+
selected?: boolean;
|
29
|
+
/**
|
30
|
+
* Style variations associated with various `Item` types.
|
31
|
+
*
|
32
|
+
* - `"default"` - An action `Item`.
|
33
|
+
* - `"danger"` - A destructive action `Item`.
|
34
|
+
*/
|
35
|
+
variant?: 'default' | 'danger';
|
36
|
+
/**
|
37
|
+
* Items that are disabled can not be clicked, selected, or navigated through.
|
38
|
+
*/
|
39
|
+
disabled?: boolean;
|
40
|
+
/**
|
41
|
+
* The ARIA role describing the function of `Item` component. `option` is a common value.
|
42
|
+
*/
|
43
|
+
role?: AriaRole;
|
44
|
+
/**
|
45
|
+
* id to attach to the root element of the Item
|
46
|
+
*/
|
47
|
+
id?: string;
|
48
|
+
/**
|
49
|
+
* Private API for use internally only. Used by LinkItem to wrap contents in an anchor
|
50
|
+
*/
|
51
|
+
_PrivateItemWrapper?: React.FC;
|
52
|
+
} & SxProp;
|
53
|
+
declare const Slot: React.FC<{
|
54
|
+
name: "LeadingVisual" | "InlineDescription" | "BlockDescription" | "TrailingVisual";
|
55
|
+
children: React.ReactNode;
|
56
|
+
}>;
|
57
|
+
export { Slot };
|
58
|
+
export declare type ItemContext = Pick<ItemProps, 'variant' | 'disabled'> & {
|
59
|
+
inlineDescriptionId: string;
|
60
|
+
blockDescriptionId: string;
|
61
|
+
};
|
62
|
+
export declare const TEXT_ROW_HEIGHT = "20px";
|
63
|
+
export declare const Item: PolymorphicForwardRefComponent<"li", ItemProps>;
|
@@ -0,0 +1,244 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.Item = exports.TEXT_ROW_HEIGHT = exports.Slot = exports.getVariantStyles = void 0;
|
7
|
+
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
9
|
+
|
10
|
+
var _ssr = require("@react-aria/ssr");
|
11
|
+
|
12
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
13
|
+
|
14
|
+
var _ThemeProvider = require("../ThemeProvider");
|
15
|
+
|
16
|
+
var _Box = _interopRequireDefault(require("../Box"));
|
17
|
+
|
18
|
+
var _sx = _interopRequireWildcard(require("../sx"));
|
19
|
+
|
20
|
+
var _createSlots = _interopRequireDefault(require("../utils/create-slots"));
|
21
|
+
|
22
|
+
var _List = require("./List");
|
23
|
+
|
24
|
+
var _Selection = require("./Selection");
|
25
|
+
|
26
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
27
|
+
|
28
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
29
|
+
|
30
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
31
|
+
|
32
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
33
|
+
|
34
|
+
const getVariantStyles = (variant, disabled) => {
|
35
|
+
if (disabled) {
|
36
|
+
return {
|
37
|
+
color: 'fg.muted',
|
38
|
+
iconColor: 'fg.muted',
|
39
|
+
annotationColor: 'fg.muted'
|
40
|
+
};
|
41
|
+
}
|
42
|
+
|
43
|
+
switch (variant) {
|
44
|
+
case 'danger':
|
45
|
+
return {
|
46
|
+
color: 'danger.fg',
|
47
|
+
iconColor: 'danger.fg',
|
48
|
+
annotationColor: 'fg.muted',
|
49
|
+
hoverColor: 'actionListItem.danger.hoverText'
|
50
|
+
};
|
51
|
+
|
52
|
+
default:
|
53
|
+
return {
|
54
|
+
color: 'fg.default',
|
55
|
+
iconColor: 'fg.muted',
|
56
|
+
annotationColor: 'fg.muted',
|
57
|
+
hoverColor: 'fg.default'
|
58
|
+
};
|
59
|
+
}
|
60
|
+
};
|
61
|
+
|
62
|
+
exports.getVariantStyles = getVariantStyles;
|
63
|
+
const {
|
64
|
+
Slots,
|
65
|
+
Slot
|
66
|
+
} = (0, _createSlots.default)(['LeadingVisual', 'InlineDescription', 'BlockDescription', 'TrailingVisual']);
|
67
|
+
exports.Slot = Slot;
|
68
|
+
|
69
|
+
const LiBox = _styledComponents.default.li.withConfig({
|
70
|
+
displayName: "Item__LiBox",
|
71
|
+
componentId: "c3scat-0"
|
72
|
+
})(_sx.default);
|
73
|
+
|
74
|
+
const TEXT_ROW_HEIGHT = '20px'; // custom value off the scale
|
75
|
+
|
76
|
+
exports.TEXT_ROW_HEIGHT = TEXT_ROW_HEIGHT;
|
77
|
+
|
78
|
+
const Item = /*#__PURE__*/_react.default.forwardRef(({
|
79
|
+
variant = 'default',
|
80
|
+
disabled = false,
|
81
|
+
selected = undefined,
|
82
|
+
onSelect = () => null,
|
83
|
+
sx: sxProp = {},
|
84
|
+
id,
|
85
|
+
_PrivateItemWrapper,
|
86
|
+
...props
|
87
|
+
}, forwardedRef) => {
|
88
|
+
const {
|
89
|
+
variant: listVariant,
|
90
|
+
showDividers
|
91
|
+
} = _react.default.useContext(_List.ListContext);
|
92
|
+
|
93
|
+
const {
|
94
|
+
theme
|
95
|
+
} = (0, _ThemeProvider.useTheme)();
|
96
|
+
const styles = {
|
97
|
+
display: 'flex',
|
98
|
+
paddingX: 2,
|
99
|
+
fontSize: 1,
|
100
|
+
paddingY: '6px',
|
101
|
+
// custom value off the scale
|
102
|
+
lineHeight: TEXT_ROW_HEIGHT,
|
103
|
+
minHeight: 5,
|
104
|
+
marginX: listVariant === 'inset' ? 2 : 0,
|
105
|
+
borderRadius: listVariant === 'inset' ? 2 : 0,
|
106
|
+
transition: 'background 33.333ms linear',
|
107
|
+
color: getVariantStyles(variant, disabled).color,
|
108
|
+
textDecoration: 'none',
|
109
|
+
// for as="a"
|
110
|
+
':not([aria-disabled])': {
|
111
|
+
cursor: 'pointer'
|
112
|
+
},
|
113
|
+
'@media (hover: hover) and (pointer: fine)': {
|
114
|
+
':hover:not([aria-disabled])': {
|
115
|
+
backgroundColor: `actionListItem.${variant}.hoverBg`,
|
116
|
+
color: getVariantStyles(variant, disabled).hoverColor
|
117
|
+
},
|
118
|
+
':focus:not([data-focus-visible-added])': {
|
119
|
+
backgroundColor: `actionListItem.${variant}.selectedBg`,
|
120
|
+
color: getVariantStyles(variant, disabled).hoverColor,
|
121
|
+
outline: 'none'
|
122
|
+
},
|
123
|
+
'&[data-focus-visible-added]': {
|
124
|
+
// we don't use :focus-visible because not all browsers (safari) have it yet
|
125
|
+
outline: 'none',
|
126
|
+
border: `2 solid`,
|
127
|
+
boxShadow: `0 0 0 2px ${theme === null || theme === void 0 ? void 0 : theme.colors.accent.emphasis}`
|
128
|
+
},
|
129
|
+
':active:not([aria-disabled])': {
|
130
|
+
backgroundColor: `actionListItem.${variant}.activeBg`,
|
131
|
+
color: getVariantStyles(variant, disabled).hoverColor
|
132
|
+
}
|
133
|
+
},
|
134
|
+
|
135
|
+
/** Divider styles */
|
136
|
+
'[data-component="ActionList.Item--DividerContainer"]': {
|
137
|
+
position: 'relative'
|
138
|
+
},
|
139
|
+
'[data-component="ActionList.Item--DividerContainer"]::before': {
|
140
|
+
content: '" "',
|
141
|
+
display: 'block',
|
142
|
+
position: 'absolute',
|
143
|
+
width: '100%',
|
144
|
+
top: '-7px',
|
145
|
+
border: '0 solid',
|
146
|
+
borderTopWidth: showDividers ? `1px` : '0',
|
147
|
+
borderColor: 'var(--divider-color, transparent)'
|
148
|
+
},
|
149
|
+
// show between 2 items
|
150
|
+
':not(:first-of-type)': {
|
151
|
+
'--divider-color': theme === null || theme === void 0 ? void 0 : theme.colors.actionListItem.inlineDivider
|
152
|
+
},
|
153
|
+
// hide divider after dividers & group header, with higher importance!
|
154
|
+
'[data-component="ActionList.Divider"] + &': {
|
155
|
+
'--divider-color': 'transparent !important'
|
156
|
+
},
|
157
|
+
// hide border on current and previous item
|
158
|
+
'&:hover:not([aria-disabled]), &:focus:not([aria-disabled]), &[data-focus-visible-added]:not([aria-disabled])': {
|
159
|
+
'--divider-color': 'transparent'
|
160
|
+
},
|
161
|
+
'&:hover:not([aria-disabled]) + &, &:focus:not([aria-disabled]) + &, &[data-focus-visible-added] + li': {
|
162
|
+
'--divider-color': 'transparent'
|
163
|
+
}
|
164
|
+
};
|
165
|
+
|
166
|
+
const clickHandler = _react.default.useCallback(event => {
|
167
|
+
if (disabled) return;
|
168
|
+
if (!event.defaultPrevented) onSelect(event);
|
169
|
+
}, [onSelect, disabled]);
|
170
|
+
|
171
|
+
const keyPressHandler = _react.default.useCallback(event => {
|
172
|
+
if (disabled) return;
|
173
|
+
|
174
|
+
if (!event.defaultPrevented && [' ', 'Enter'].includes(event.key)) {
|
175
|
+
onSelect(event);
|
176
|
+
}
|
177
|
+
}, [onSelect, disabled]); // use props.id if provided, otherwise generate one.
|
178
|
+
|
179
|
+
|
180
|
+
const labelId = (0, _ssr.useSSRSafeId)(id);
|
181
|
+
const inlineDescriptionId = (0, _ssr.useSSRSafeId)(id && `${id}--inline-description`);
|
182
|
+
const blockDescriptionId = (0, _ssr.useSSRSafeId)(id && `${id}--block-description`);
|
183
|
+
const ItemWrapper = _PrivateItemWrapper || _react.default.Fragment;
|
184
|
+
return /*#__PURE__*/_react.default.createElement(Slots, {
|
185
|
+
context: {
|
186
|
+
variant,
|
187
|
+
disabled,
|
188
|
+
inlineDescriptionId,
|
189
|
+
blockDescriptionId
|
190
|
+
}
|
191
|
+
}, slots => /*#__PURE__*/_react.default.createElement(LiBox, _extends({
|
192
|
+
ref: forwardedRef,
|
193
|
+
sx: (0, _sx.merge)(styles, sxProp),
|
194
|
+
onClick: clickHandler,
|
195
|
+
onKeyPress: keyPressHandler,
|
196
|
+
"aria-selected": selected,
|
197
|
+
"aria-disabled": disabled ? true : undefined,
|
198
|
+
tabIndex: disabled || _PrivateItemWrapper ? undefined : 0,
|
199
|
+
"aria-labelledby": `${labelId} ${slots.InlineDescription ? inlineDescriptionId : ''}`,
|
200
|
+
"aria-describedby": slots.BlockDescription ? blockDescriptionId : undefined
|
201
|
+
}, props), /*#__PURE__*/_react.default.createElement(ItemWrapper, null, /*#__PURE__*/_react.default.createElement(_Selection.Selection, {
|
202
|
+
selected: selected,
|
203
|
+
disabled: disabled
|
204
|
+
}), slots.LeadingVisual, /*#__PURE__*/_react.default.createElement(_Box.default, {
|
205
|
+
"data-component": "ActionList.Item--DividerContainer",
|
206
|
+
sx: {
|
207
|
+
display: 'flex',
|
208
|
+
flexDirection: 'column',
|
209
|
+
flexGrow: 1,
|
210
|
+
minWidth: 0
|
211
|
+
}
|
212
|
+
}, /*#__PURE__*/_react.default.createElement(ConditionalBox, {
|
213
|
+
if: Boolean(slots.TrailingVisual),
|
214
|
+
sx: {
|
215
|
+
display: 'flex',
|
216
|
+
flexGrow: 1
|
217
|
+
}
|
218
|
+
}, /*#__PURE__*/_react.default.createElement(ConditionalBox, {
|
219
|
+
if: Boolean(slots.InlineDescription),
|
220
|
+
sx: {
|
221
|
+
display: 'flex',
|
222
|
+
flexGrow: 1,
|
223
|
+
alignItems: 'baseline',
|
224
|
+
minWidth: 0
|
225
|
+
}
|
226
|
+
}, /*#__PURE__*/_react.default.createElement(_Box.default, {
|
227
|
+
as: "span",
|
228
|
+
id: labelId,
|
229
|
+
sx: {
|
230
|
+
flexGrow: slots.InlineDescription ? 0 : 1
|
231
|
+
}
|
232
|
+
}, props.children), slots.InlineDescription), slots.TrailingVisual), slots.BlockDescription))));
|
233
|
+
});
|
234
|
+
|
235
|
+
exports.Item = Item;
|
236
|
+
Item.displayName = 'ActionList.Item';
|
237
|
+
|
238
|
+
const ConditionalBox = props => {
|
239
|
+
const {
|
240
|
+
if: condition,
|
241
|
+
...rest
|
242
|
+
} = props;
|
243
|
+
if (condition) return /*#__PURE__*/_react.default.createElement(_Box.default, rest, props.children);else return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, props.children);
|
244
|
+
};
|
@@ -0,0 +1,174 @@
|
|
1
|
+
"use strict";
|
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;
|
13
|
+
});
|
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
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
22
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
23
|
+
};
|
24
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
25
|
+
exports.Item = exports.TEXT_ROW_HEIGHT = exports.Slot = exports.getVariantStyles = void 0;
|
26
|
+
const react_1 = __importDefault(require("react"));
|
27
|
+
const ssr_1 = require("@react-aria/ssr");
|
28
|
+
const styled_components_1 = __importDefault(require("styled-components"));
|
29
|
+
const ThemeProvider_1 = require("../ThemeProvider");
|
30
|
+
const Box_1 = __importDefault(require("../Box"));
|
31
|
+
const sx_1 = __importStar(require("../sx"));
|
32
|
+
const create_slots_1 = __importDefault(require("../utils/create-slots"));
|
33
|
+
const List_1 = require("./List");
|
34
|
+
const Selection_1 = require("./Selection");
|
35
|
+
const getVariantStyles = (variant, disabled) => {
|
36
|
+
if (disabled) {
|
37
|
+
return {
|
38
|
+
color: 'fg.muted',
|
39
|
+
iconColor: 'fg.muted',
|
40
|
+
annotationColor: 'fg.muted'
|
41
|
+
};
|
42
|
+
}
|
43
|
+
switch (variant) {
|
44
|
+
case 'danger':
|
45
|
+
return {
|
46
|
+
color: 'danger.fg',
|
47
|
+
iconColor: 'danger.fg',
|
48
|
+
annotationColor: 'fg.muted',
|
49
|
+
hoverColor: 'actionListItem.danger.hoverText'
|
50
|
+
};
|
51
|
+
default:
|
52
|
+
return {
|
53
|
+
color: 'fg.default',
|
54
|
+
iconColor: 'fg.muted',
|
55
|
+
annotationColor: 'fg.muted',
|
56
|
+
hoverColor: 'fg.default'
|
57
|
+
};
|
58
|
+
}
|
59
|
+
};
|
60
|
+
exports.getVariantStyles = getVariantStyles;
|
61
|
+
const { Slots, Slot } = create_slots_1.default(['LeadingVisual', 'InlineDescription', 'BlockDescription', 'TrailingVisual']);
|
62
|
+
exports.Slot = Slot;
|
63
|
+
const LiBox = styled_components_1.default.li(sx_1.default);
|
64
|
+
exports.TEXT_ROW_HEIGHT = '20px'; // custom value off the scale
|
65
|
+
exports.Item = react_1.default.forwardRef(({ variant = 'default', disabled = false, selected = undefined, onSelect = () => null, sx: sxProp = {}, id, _PrivateItemWrapper, ...props }, forwardedRef) => {
|
66
|
+
const { variant: listVariant, showDividers } = react_1.default.useContext(List_1.ListContext);
|
67
|
+
const { theme } = ThemeProvider_1.useTheme();
|
68
|
+
const styles = {
|
69
|
+
display: 'flex',
|
70
|
+
paddingX: 2,
|
71
|
+
fontSize: 1,
|
72
|
+
paddingY: '6px',
|
73
|
+
lineHeight: exports.TEXT_ROW_HEIGHT,
|
74
|
+
minHeight: 5,
|
75
|
+
marginX: listVariant === 'inset' ? 2 : 0,
|
76
|
+
borderRadius: listVariant === 'inset' ? 2 : 0,
|
77
|
+
transition: 'background 33.333ms linear',
|
78
|
+
color: exports.getVariantStyles(variant, disabled).color,
|
79
|
+
textDecoration: 'none',
|
80
|
+
':not([aria-disabled])': { cursor: 'pointer' },
|
81
|
+
'@media (hover: hover) and (pointer: fine)': {
|
82
|
+
':hover:not([aria-disabled])': {
|
83
|
+
backgroundColor: `actionListItem.${variant}.hoverBg`,
|
84
|
+
color: exports.getVariantStyles(variant, disabled).hoverColor
|
85
|
+
},
|
86
|
+
':focus:not([data-focus-visible-added])': {
|
87
|
+
backgroundColor: `actionListItem.${variant}.selectedBg`,
|
88
|
+
color: exports.getVariantStyles(variant, disabled).hoverColor,
|
89
|
+
outline: 'none'
|
90
|
+
},
|
91
|
+
'&[data-focus-visible-added]': {
|
92
|
+
// we don't use :focus-visible because not all browsers (safari) have it yet
|
93
|
+
outline: 'none',
|
94
|
+
border: `2 solid`,
|
95
|
+
boxShadow: `0 0 0 2px ${theme?.colors.accent.emphasis}`
|
96
|
+
},
|
97
|
+
':active:not([aria-disabled])': {
|
98
|
+
backgroundColor: `actionListItem.${variant}.activeBg`,
|
99
|
+
color: exports.getVariantStyles(variant, disabled).hoverColor
|
100
|
+
}
|
101
|
+
},
|
102
|
+
/** Divider styles */
|
103
|
+
'[data-component="ActionList.Item--DividerContainer"]': {
|
104
|
+
position: 'relative'
|
105
|
+
},
|
106
|
+
'[data-component="ActionList.Item--DividerContainer"]::before': {
|
107
|
+
content: '" "',
|
108
|
+
display: 'block',
|
109
|
+
position: 'absolute',
|
110
|
+
width: '100%',
|
111
|
+
top: '-7px',
|
112
|
+
border: '0 solid',
|
113
|
+
borderTopWidth: showDividers ? `1px` : '0',
|
114
|
+
borderColor: 'var(--divider-color, transparent)'
|
115
|
+
},
|
116
|
+
// show between 2 items
|
117
|
+
':not(:first-of-type)': { '--divider-color': theme?.colors.actionListItem.inlineDivider },
|
118
|
+
// hide divider after dividers & group header, with higher importance!
|
119
|
+
'[data-component="ActionList.Divider"] + &': { '--divider-color': 'transparent !important' },
|
120
|
+
// hide border on current and previous item
|
121
|
+
'&:hover:not([aria-disabled]), &:focus:not([aria-disabled]), &[data-focus-visible-added]:not([aria-disabled])': {
|
122
|
+
'--divider-color': 'transparent'
|
123
|
+
},
|
124
|
+
'&:hover:not([aria-disabled]) + &, &:focus:not([aria-disabled]) + &, &[data-focus-visible-added] + li': {
|
125
|
+
'--divider-color': 'transparent'
|
126
|
+
}
|
127
|
+
};
|
128
|
+
const clickHandler = react_1.default.useCallback(event => {
|
129
|
+
if (disabled)
|
130
|
+
return;
|
131
|
+
if (!event.defaultPrevented)
|
132
|
+
onSelect(event);
|
133
|
+
}, [onSelect, disabled]);
|
134
|
+
const keyPressHandler = react_1.default.useCallback(event => {
|
135
|
+
if (disabled)
|
136
|
+
return;
|
137
|
+
if (!event.defaultPrevented && [' ', 'Enter'].includes(event.key)) {
|
138
|
+
onSelect(event);
|
139
|
+
}
|
140
|
+
}, [onSelect, disabled]);
|
141
|
+
// use props.id if provided, otherwise generate one.
|
142
|
+
const labelId = ssr_1.useSSRSafeId(id);
|
143
|
+
const inlineDescriptionId = ssr_1.useSSRSafeId(id && `${id}--inline-description`);
|
144
|
+
const blockDescriptionId = ssr_1.useSSRSafeId(id && `${id}--block-description`);
|
145
|
+
const ItemWrapper = _PrivateItemWrapper || react_1.default.Fragment;
|
146
|
+
return (<Slots context={{ variant, disabled, inlineDescriptionId, blockDescriptionId }}>
|
147
|
+
{slots => (<LiBox ref={forwardedRef} sx={sx_1.merge(styles, sxProp)} onClick={clickHandler} onKeyPress={keyPressHandler} aria-selected={selected} aria-disabled={disabled ? true : undefined} tabIndex={disabled || _PrivateItemWrapper ? undefined : 0} aria-labelledby={`${labelId} ${slots.InlineDescription ? inlineDescriptionId : ''}`} aria-describedby={slots.BlockDescription ? blockDescriptionId : undefined} {...props}>
|
148
|
+
<ItemWrapper>
|
149
|
+
<Selection_1.Selection selected={selected} disabled={disabled}/>
|
150
|
+
{slots.LeadingVisual}
|
151
|
+
<Box_1.default data-component="ActionList.Item--DividerContainer" sx={{ display: 'flex', flexDirection: 'column', flexGrow: 1, minWidth: 0 }}>
|
152
|
+
<ConditionalBox if={Boolean(slots.TrailingVisual)} sx={{ display: 'flex', flexGrow: 1 }}>
|
153
|
+
<ConditionalBox if={Boolean(slots.InlineDescription)} sx={{ display: 'flex', flexGrow: 1, alignItems: 'baseline', minWidth: 0 }}>
|
154
|
+
<Box_1.default as="span" id={labelId} sx={{ flexGrow: slots.InlineDescription ? 0 : 1 }}>
|
155
|
+
{props.children}
|
156
|
+
</Box_1.default>
|
157
|
+
{slots.InlineDescription}
|
158
|
+
</ConditionalBox>
|
159
|
+
{slots.TrailingVisual}
|
160
|
+
</ConditionalBox>
|
161
|
+
{slots.BlockDescription}
|
162
|
+
</Box_1.default>
|
163
|
+
</ItemWrapper>
|
164
|
+
</LiBox>)}
|
165
|
+
</Slots>);
|
166
|
+
});
|
167
|
+
exports.Item.displayName = 'ActionList.Item';
|
168
|
+
const ConditionalBox = props => {
|
169
|
+
const { if: condition, ...rest } = props;
|
170
|
+
if (condition)
|
171
|
+
return <Box_1.default {...rest}>{props.children}</Box_1.default>;
|
172
|
+
else
|
173
|
+
return <>{props.children}</>;
|
174
|
+
};
|