@astryxdesign/core 0.1.1 → 0.1.2-canary.04e71b2
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 +105 -0
- package/README.md +131 -13
- package/dist/Avatar/Avatar.d.ts.map +1 -1
- package/dist/Avatar/Avatar.js +11 -5
- package/dist/AvatarGroup/AvatarGroupOverflow.d.ts +1 -1
- package/dist/AvatarGroup/AvatarGroupOverflow.d.ts.map +1 -1
- package/dist/AvatarGroup/AvatarGroupOverflow.js +4 -1
- package/dist/Banner/Banner.d.ts +7 -0
- package/dist/Banner/Banner.d.ts.map +1 -1
- package/dist/Banner/Banner.js +9 -2
- package/dist/Breadcrumbs/BreadcrumbItem.d.ts +1 -1
- package/dist/Breadcrumbs/BreadcrumbItem.d.ts.map +1 -1
- package/dist/Breadcrumbs/BreadcrumbItem.js +24 -5
- package/dist/Button/Button.d.ts +12 -2
- package/dist/Button/Button.d.ts.map +1 -1
- package/dist/Button/Button.js +53 -17
- package/dist/Calendar/Calendar.d.ts +5 -4
- package/dist/Calendar/Calendar.d.ts.map +1 -1
- package/dist/Calendar/Calendar.js +82 -43
- package/dist/Calendar/hooks/index.d.ts +0 -2
- package/dist/Calendar/hooks/index.d.ts.map +1 -1
- package/dist/Calendar/hooks/index.js +1 -2
- package/dist/Calendar/index.d.ts +3 -3
- package/dist/Calendar/index.d.ts.map +1 -1
- package/dist/Calendar/index.js +1 -1
- package/dist/Calendar/styles.d.ts +3 -9
- package/dist/Calendar/styles.d.ts.map +1 -1
- package/dist/Calendar/styles.js +3 -11
- package/dist/Carousel/Carousel.d.ts.map +1 -1
- package/dist/Carousel/Carousel.js +17 -3
- package/dist/Center/Center.d.ts +11 -1
- package/dist/Center/Center.d.ts.map +1 -1
- package/dist/Center/Center.js +9 -3
- package/dist/Chat/ChatMessageList.d.ts +14 -1
- package/dist/Chat/ChatMessageList.d.ts.map +1 -1
- package/dist/Chat/ChatMessageList.js +2 -0
- package/dist/Chat/useTriggerMenu.d.ts.map +1 -1
- package/dist/Chat/useTriggerMenu.js +4 -1
- package/dist/CheckboxInput/CheckboxInput.d.ts +23 -2
- package/dist/CheckboxInput/CheckboxInput.d.ts.map +1 -1
- package/dist/CheckboxInput/CheckboxInput.js +51 -9
- package/dist/CheckboxList/CheckboxList.d.ts +13 -1
- package/dist/CheckboxList/CheckboxList.d.ts.map +1 -1
- package/dist/CheckboxList/CheckboxList.js +39 -9
- package/dist/CheckboxList/CheckboxListContext.d.ts +7 -0
- package/dist/CheckboxList/CheckboxListContext.d.ts.map +1 -1
- package/dist/Citation/Citation.d.ts.map +1 -1
- package/dist/Citation/Citation.js +3 -3
- package/dist/CodeBlock/CodeBlock.d.ts.map +1 -1
- package/dist/CodeBlock/CodeBlock.js +49 -37
- package/dist/CommandPalette/CommandPalette.d.ts.map +1 -1
- package/dist/CommandPalette/CommandPalette.js +5 -5
- package/dist/ContextMenu/ContextMenu.d.ts +4 -5
- package/dist/ContextMenu/ContextMenu.d.ts.map +1 -1
- package/dist/ContextMenu/ContextMenu.js +93 -11
- package/dist/DateInput/DateInput.d.ts +23 -1
- package/dist/DateInput/DateInput.d.ts.map +1 -1
- package/dist/DateInput/DateInput.js +59 -8
- package/dist/DateRangeInput/DateRangeInput.d.ts +23 -1
- package/dist/DateRangeInput/DateRangeInput.d.ts.map +1 -1
- package/dist/DateRangeInput/DateRangeInput.js +42 -9
- package/dist/DateTimeInput/DateTimeInput.d.ts +35 -2
- package/dist/DateTimeInput/DateTimeInput.d.ts.map +1 -1
- package/dist/DateTimeInput/DateTimeInput.js +78 -15
- package/dist/Dialog/Dialog.d.ts.map +1 -1
- package/dist/Dialog/Dialog.js +12 -0
- package/dist/DropdownMenu/DropdownMenu.d.ts +1 -8
- package/dist/DropdownMenu/DropdownMenu.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenu.js +42 -14
- package/dist/EmptyState/EmptyState.d.ts.map +1 -1
- package/dist/EmptyState/EmptyState.js +7 -1
- package/dist/Field/Field.d.ts +19 -2
- package/dist/Field/Field.d.ts.map +1 -1
- package/dist/Field/Field.js +4 -0
- package/dist/Field/FieldLabel.d.ts +21 -2
- package/dist/Field/FieldLabel.d.ts.map +1 -1
- package/dist/Field/FieldLabel.js +41 -26
- package/dist/FileInput/FileInput.d.ts +22 -1
- package/dist/FileInput/FileInput.d.ts.map +1 -1
- package/dist/FileInput/FileInput.js +56 -10
- package/dist/Grid/Grid.d.ts +11 -1
- package/dist/Grid/Grid.d.ts.map +1 -1
- package/dist/Grid/Grid.js +8 -0
- package/dist/HoverCard/HoverCard.d.ts +2 -2
- package/dist/HoverCard/HoverCard.d.ts.map +1 -1
- package/dist/HoverCard/HoverCard.js +18 -6
- package/dist/HoverCard/useHoverCard.d.ts.map +1 -1
- package/dist/HoverCard/useHoverCard.js +7 -3
- package/dist/InputGroup/InputGroup.d.ts +2 -2
- package/dist/InputGroup/InputGroup.d.ts.map +1 -1
- package/dist/InputGroup/InputGroup.js +14 -5
- package/dist/InputGroup/InputGroupContext.d.ts +4 -0
- package/dist/InputGroup/InputGroupContext.d.ts.map +1 -1
- package/dist/InputGroup/InputGroupContext.js +2 -2
- package/dist/InputGroup/index.d.ts +1 -0
- package/dist/InputGroup/index.d.ts.map +1 -1
- package/dist/Kbd/Kbd.d.ts.map +1 -1
- package/dist/Kbd/Kbd.js +34 -2
- package/dist/Layer/anchorName.d.ts +20 -0
- package/dist/Layer/anchorName.d.ts.map +1 -0
- package/dist/Layer/anchorName.js +36 -0
- package/dist/Layer/layerAnimations.stylex.d.ts +4 -0
- package/dist/Layer/layerAnimations.stylex.d.ts.map +1 -1
- package/dist/Layer/layerAnimations.stylex.js +8 -4
- package/dist/Layer/useLayer.d.ts +29 -0
- package/dist/Layer/useLayer.d.ts.map +1 -1
- package/dist/Layer/useLayer.js +55 -11
- package/dist/Layout/Layout.d.ts +4 -11
- package/dist/Layout/Layout.d.ts.map +1 -1
- package/dist/Layout/Layout.js +10 -11
- package/dist/Layout/LayoutFooter.d.ts +2 -2
- package/dist/Layout/LayoutFooter.d.ts.map +1 -1
- package/dist/Layout/LayoutHeader.d.ts +2 -2
- package/dist/Layout/LayoutHeader.d.ts.map +1 -1
- package/dist/Layout/LayoutPanel.d.ts +2 -2
- package/dist/Layout/LayoutPanel.d.ts.map +1 -1
- package/dist/Layout/padding.stylex.d.ts +51 -0
- package/dist/Layout/padding.stylex.d.ts.map +1 -1
- package/dist/Layout/padding.stylex.js +63 -0
- package/dist/Lightbox/Lightbox.d.ts.map +1 -1
- package/dist/Lightbox/Lightbox.js +4 -2
- package/dist/Link/Link.d.ts +17 -2
- package/dist/Link/Link.d.ts.map +1 -1
- package/dist/Link/Link.js +20 -9
- package/dist/Link/LinkProvider.d.ts +1 -0
- package/dist/Link/LinkProvider.d.ts.map +1 -1
- package/dist/Link/LinkProvider.js +1 -0
- package/dist/Markdown/Markdown.d.ts.map +1 -1
- package/dist/Markdown/Markdown.js +18 -3
- package/dist/MobileNav/MobileNav.d.ts.map +1 -1
- package/dist/MobileNav/MobileNav.js +13 -0
- package/dist/MoreMenu/MoreMenu.d.ts +1 -7
- package/dist/MoreMenu/MoreMenu.d.ts.map +1 -1
- package/dist/MoreMenu/MoreMenu.js +0 -2
- package/dist/MultiSelector/MultiSelector.d.ts +25 -2
- package/dist/MultiSelector/MultiSelector.d.ts.map +1 -1
- package/dist/MultiSelector/MultiSelector.js +103 -22
- package/dist/MultiSelector/hooks.d.ts +12 -1
- package/dist/MultiSelector/hooks.d.ts.map +1 -1
- package/dist/MultiSelector/hooks.js +14 -1
- package/dist/NavMenu/NavHeadingMenu.d.ts.map +1 -1
- package/dist/NavMenu/NavHeadingMenu.js +34 -3
- package/dist/NumberInput/NumberInput.d.ts +23 -2
- package/dist/NumberInput/NumberInput.d.ts.map +1 -1
- package/dist/NumberInput/NumberInput.js +62 -12
- package/dist/Pagination/Pagination.d.ts +1 -1
- package/dist/Pagination/Pagination.d.ts.map +1 -1
- package/dist/Pagination/Pagination.js +46 -28
- package/dist/Popover/usePopover.d.ts +25 -2
- package/dist/Popover/usePopover.d.ts.map +1 -1
- package/dist/Popover/usePopover.js +18 -6
- package/dist/PowerSearch/PowerSearch.d.ts +11 -1
- package/dist/PowerSearch/PowerSearch.d.ts.map +1 -1
- package/dist/PowerSearch/PowerSearch.js +6 -1
- package/dist/ProgressBar/ProgressBar.d.ts.map +1 -1
- package/dist/ProgressBar/ProgressBar.js +3 -5
- package/dist/RadioList/RadioList.d.ts +20 -2
- package/dist/RadioList/RadioList.d.ts.map +1 -1
- package/dist/RadioList/RadioList.js +105 -9
- package/dist/RadioList/RadioListItem.d.ts.map +1 -1
- package/dist/RadioList/RadioListItem.js +13 -2
- package/dist/SegmentedControl/SegmentedControl.d.ts +13 -2
- package/dist/SegmentedControl/SegmentedControl.d.ts.map +1 -1
- package/dist/SegmentedControl/SegmentedControl.js +78 -44
- package/dist/SegmentedControl/SegmentedControlContext.d.ts +7 -0
- package/dist/SegmentedControl/SegmentedControlContext.d.ts.map +1 -1
- package/dist/SegmentedControl/SegmentedControlItem.d.ts.map +1 -1
- package/dist/SegmentedControl/SegmentedControlItem.js +13 -2
- package/dist/Selector/Selector.d.ts +22 -1
- package/dist/Selector/Selector.d.ts.map +1 -1
- package/dist/Selector/Selector.js +84 -23
- package/dist/Selector/hooks.d.ts +8 -1
- package/dist/Selector/hooks.d.ts.map +1 -1
- package/dist/Selector/hooks.js +14 -1
- package/dist/SideNav/SideNavItem.d.ts.map +1 -1
- package/dist/SideNav/SideNavItem.js +1 -1
- package/dist/Skeleton/Skeleton.d.ts.map +1 -1
- package/dist/Skeleton/Skeleton.js +8 -2
- package/dist/Slider/Slider.d.ts +21 -0
- package/dist/Slider/Slider.d.ts.map +1 -1
- package/dist/Slider/Slider.js +38 -11
- package/dist/Spinner/Spinner.d.ts.map +1 -1
- package/dist/Spinner/Spinner.js +1 -1
- package/dist/Stack/Stack.d.ts +38 -23
- package/dist/Stack/Stack.d.ts.map +1 -1
- package/dist/Stack/Stack.js +25 -1
- package/dist/Stack/StackItem.d.ts +12 -23
- package/dist/Stack/StackItem.d.ts.map +1 -1
- package/dist/Stack/StackItem.js +8 -1
- package/dist/Switch/Switch.d.ts +23 -2
- package/dist/Switch/Switch.d.ts.map +1 -1
- package/dist/Switch/Switch.js +41 -11
- package/dist/TabList/Tab.d.ts.map +1 -1
- package/dist/TabList/Tab.js +6 -0
- package/dist/TabList/TabList.d.ts +16 -4
- package/dist/TabList/TabList.d.ts.map +1 -1
- package/dist/TabList/TabList.js +86 -10
- package/dist/TabList/TabListContext.d.ts +5 -0
- package/dist/TabList/TabListContext.d.ts.map +1 -1
- package/dist/TabList/TabListContext.js +5 -0
- package/dist/TabList/TabMenu.d.ts.map +1 -1
- package/dist/TabList/TabMenu.js +6 -1
- package/dist/Table/BaseTable.d.ts.map +1 -1
- package/dist/Table/BaseTable.js +38 -16
- package/dist/Table/Table.d.ts.map +1 -1
- package/dist/Table/Table.js +36 -7
- package/dist/Table/TableCell.d.ts +8 -1
- package/dist/Table/TableCell.d.ts.map +1 -1
- package/dist/Table/TableCell.js +10 -10
- package/dist/Table/TableHeaderCell.d.ts +8 -1
- package/dist/Table/TableHeaderCell.d.ts.map +1 -1
- package/dist/Table/TableHeaderCell.js +16 -16
- package/dist/Table/TableRow.d.ts +6 -1
- package/dist/Table/TableRow.d.ts.map +1 -1
- package/dist/Table/TableRow.js +15 -7
- package/dist/Table/index.d.ts +4 -1
- package/dist/Table/index.d.ts.map +1 -1
- package/dist/Table/index.js +3 -2
- package/dist/Table/plugins/pagination/paginateData.d.ts +2 -1
- package/dist/Table/plugins/pagination/paginateData.d.ts.map +1 -1
- package/dist/Table/plugins/pagination/paginateData.js +8 -3
- package/dist/Table/plugins/pagination/useTablePagination.d.ts.map +1 -1
- package/dist/Table/plugins/pagination/useTablePagination.js +6 -1
- package/dist/Table/plugins/sortable/useTableSortable.d.ts.map +1 -1
- package/dist/Table/plugins/sortable/useTableSortable.js +59 -3
- package/dist/Table/plugins/stickyColumns/index.d.ts +3 -0
- package/dist/Table/plugins/stickyColumns/index.d.ts.map +1 -0
- package/dist/Table/plugins/stickyColumns/index.js +3 -0
- package/dist/Table/plugins/stickyColumns/useTableStickyColumns.d.ts +25 -0
- package/dist/Table/plugins/stickyColumns/useTableStickyColumns.d.ts.map +1 -0
- package/dist/Table/plugins/stickyColumns/useTableStickyColumns.js +369 -0
- package/dist/Table/tableContextMenu.d.ts +33 -0
- package/dist/Table/tableContextMenu.d.ts.map +1 -0
- package/dist/Table/tableContextMenu.js +133 -0
- package/dist/Table/types.d.ts +161 -5
- package/dist/Table/types.d.ts.map +1 -1
- package/dist/Table/useBaseTablePlugins.d.ts.map +1 -1
- package/dist/Table/useBaseTablePlugins.js +1 -1
- package/dist/Text/text.stylex.d.ts +2 -2
- package/dist/Text/text.stylex.js +2 -2
- package/dist/TextArea/TextArea.d.ts +22 -1
- package/dist/TextArea/TextArea.d.ts.map +1 -1
- package/dist/TextArea/TextArea.js +41 -9
- package/dist/TextInput/TextInput.d.ts +23 -2
- package/dist/TextInput/TextInput.d.ts.map +1 -1
- package/dist/TextInput/TextInput.js +55 -10
- package/dist/TimeInput/TimeInput.d.ts +23 -1
- package/dist/TimeInput/TimeInput.d.ts.map +1 -1
- package/dist/TimeInput/TimeInput.js +53 -10
- package/dist/Timestamp/Timestamp.d.ts +1 -1
- package/dist/Timestamp/Timestamp.d.ts.map +1 -1
- package/dist/Timestamp/Timestamp.js +28 -3
- package/dist/Toast/Toast.d.ts.map +1 -1
- package/dist/Toast/Toast.js +14 -0
- package/dist/Toast/ToastViewport.d.ts.map +1 -1
- package/dist/Toast/ToastViewport.js +132 -3
- package/dist/ToggleButton/ToggleButton.d.ts +7 -9
- package/dist/ToggleButton/ToggleButton.d.ts.map +1 -1
- package/dist/ToggleButton/ToggleButton.js +34 -57
- package/dist/Tokenizer/Tokenizer.d.ts +12 -1
- package/dist/Tokenizer/Tokenizer.d.ts.map +1 -1
- package/dist/Tokenizer/Tokenizer.js +27 -5
- package/dist/Toolbar/Toolbar.d.ts +3 -3
- package/dist/Toolbar/Toolbar.d.ts.map +1 -1
- package/dist/Toolbar/Toolbar.js +51 -7
- package/dist/Tooltip/useTooltip.d.ts.map +1 -1
- package/dist/Tooltip/useTooltip.js +57 -9
- package/dist/TreeList/TreeList.d.ts +1 -1
- package/dist/TreeList/TreeList.d.ts.map +1 -1
- package/dist/TreeList/TreeList.js +72 -2
- package/dist/TreeList/TreeListItem.d.ts +11 -1
- package/dist/TreeList/TreeListItem.d.ts.map +1 -1
- package/dist/TreeList/TreeListItem.js +51 -12
- package/dist/TreeList/treeListItem.markers.stylex.d.ts +16 -0
- package/dist/TreeList/treeListItem.markers.stylex.d.ts.map +1 -0
- package/dist/TreeList/treeListItem.markers.stylex.js +22 -0
- package/dist/Typeahead/BaseTypeahead.d.ts +9 -0
- package/dist/Typeahead/BaseTypeahead.d.ts.map +1 -1
- package/dist/Typeahead/BaseTypeahead.js +67 -6
- package/dist/Typeahead/Typeahead.d.ts +24 -1
- package/dist/Typeahead/Typeahead.d.ts.map +1 -1
- package/dist/Typeahead/Typeahead.js +29 -5
- package/dist/VisuallyHidden/VisuallyHidden.d.ts +61 -0
- package/dist/VisuallyHidden/VisuallyHidden.d.ts.map +1 -0
- package/dist/VisuallyHidden/VisuallyHidden.js +65 -0
- package/dist/VisuallyHidden/index.d.ts +11 -0
- package/dist/VisuallyHidden/index.d.ts.map +1 -0
- package/dist/VisuallyHidden/index.js +13 -0
- package/dist/astryx.css +40 -1
- package/dist/astryx.umd.js +147 -0
- package/dist/astryx.umd.js.map +7 -0
- package/dist/hooks/focusableSelector.d.ts +22 -0
- package/dist/hooks/focusableSelector.d.ts.map +1 -0
- package/dist/hooks/focusableSelector.js +24 -0
- package/dist/hooks/index.d.ts +12 -2
- package/dist/hooks/index.d.ts.map +1 -1
- package/dist/hooks/index.js +7 -2
- package/dist/hooks/useAnnounce.d.ts +40 -0
- package/dist/hooks/useAnnounce.d.ts.map +1 -0
- package/dist/hooks/useAnnounce.js +142 -0
- package/dist/hooks/useClickableContainer.d.ts +16 -1
- package/dist/hooks/useClickableContainer.d.ts.map +1 -1
- package/dist/hooks/useClickableContainer.js +16 -4
- package/dist/hooks/useEntryAnimation.d.ts.map +1 -1
- package/dist/hooks/useEntryAnimation.js +4 -4
- package/dist/hooks/useFocusTrap.d.ts +18 -0
- package/dist/hooks/useFocusTrap.d.ts.map +1 -1
- package/dist/hooks/useFocusTrap.js +87 -3
- package/dist/hooks/useGridFocus.d.ts +88 -1
- package/dist/hooks/useGridFocus.d.ts.map +1 -1
- package/dist/hooks/useGridFocus.js +261 -62
- package/dist/hooks/useKeyboardHint.d.ts +82 -0
- package/dist/hooks/useKeyboardHint.d.ts.map +1 -0
- package/dist/hooks/useKeyboardHint.js +220 -0
- package/dist/hooks/useListFocus.d.ts +78 -7
- package/dist/hooks/useListFocus.d.ts.map +1 -1
- package/dist/hooks/useListFocus.js +305 -52
- package/dist/hooks/useLongPress.d.ts +21 -0
- package/dist/hooks/useLongPress.d.ts.map +1 -0
- package/dist/hooks/useLongPress.js +89 -0
- package/dist/hooks/useTreeFocus.d.ts +157 -0
- package/dist/hooks/useTreeFocus.d.ts.map +1 -0
- package/dist/hooks/useTreeFocus.js +337 -0
- package/dist/hooks/useTypeahead.d.ts +63 -0
- package/dist/hooks/useTypeahead.d.ts.map +1 -0
- package/dist/hooks/useTypeahead.js +117 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/dist/theme/generateThemeRules.js +1 -1
- package/dist/theme/syntax/SyntaxTheme.d.ts +1 -1
- package/dist/theme/syntax/SyntaxTheme.js +1 -1
- package/dist/theme/syntax/defineSyntaxTheme.d.ts.map +1 -1
- package/dist/theme/syntax/defineSyntaxTheme.js +2 -2
- package/dist/theme/syntax/presets.d.ts +1 -1
- package/dist/theme/syntax/presets.d.ts.map +1 -1
- package/dist/theme/syntax/presets.js +1 -1
- package/dist/theme/syntax/tokens.d.ts +1 -1
- package/dist/theme/syntax/tokens.js +1 -1
- package/dist/theme/types.d.ts +1 -1
- package/dist/utils/dateTypes.d.ts +12 -0
- package/dist/utils/dateTypes.d.ts.map +1 -1
- package/dist/utils/dateTypes.js +41 -1
- package/dist/utils/index.d.ts +4 -0
- package/dist/utils/index.d.ts.map +1 -1
- package/dist/utils/index.js +3 -1
- package/dist/utils/inputAria.d.ts +29 -0
- package/dist/utils/inputAria.d.ts.map +1 -0
- package/dist/utils/inputAria.js +30 -0
- package/dist/utils/timeParser.d.ts.map +1 -1
- package/dist/utils/timeParser.js +5 -2
- package/package.json +15 -5
- package/src/Avatar/Avatar.test.tsx +37 -0
- package/src/Avatar/Avatar.tsx +10 -5
- package/src/AvatarGroup/AvatarGroupOverflow.tsx +3 -0
- package/src/Banner/Banner.doc.mjs +8 -0
- package/src/Banner/Banner.test.tsx +16 -7
- package/src/Banner/Banner.tsx +9 -2
- package/src/Breadcrumbs/BreadcrumbItem.tsx +25 -7
- package/src/Breadcrumbs/Breadcrumbs.test.tsx +31 -10
- package/src/Button/Button.doc.mjs +6 -0
- package/src/Button/Button.test.tsx +105 -11
- package/src/Button/Button.tsx +76 -21
- package/src/Calendar/Calendar.doc.mjs +4 -4
- package/src/Calendar/Calendar.test.tsx +168 -30
- package/src/Calendar/Calendar.tsx +121 -66
- package/src/Calendar/hooks/index.ts +0 -6
- package/src/Calendar/index.ts +1 -3
- package/src/Calendar/styles.ts +4 -9
- package/src/Carousel/Carousel.doc.mjs +7 -1
- package/src/Carousel/Carousel.test.tsx +20 -0
- package/src/Carousel/Carousel.tsx +16 -1
- package/src/Center/Center.doc.mjs +12 -2
- package/src/Center/Center.tsx +28 -3
- package/src/Chat/ChatComposer.doc.mjs +3 -0
- package/src/Chat/ChatComposerDrawer.doc.mjs +12 -0
- package/src/Chat/ChatMessageList.doc.mjs +8 -0
- package/src/Chat/ChatMessageList.test.tsx +18 -0
- package/src/Chat/ChatMessageList.tsx +16 -0
- package/src/Chat/useTriggerMenu.tsx +3 -0
- package/src/CheckboxInput/CheckboxInput.doc.mjs +18 -0
- package/src/CheckboxInput/CheckboxInput.test.tsx +172 -27
- package/src/CheckboxInput/CheckboxInput.tsx +78 -6
- package/src/CheckboxList/CheckboxList.doc.mjs +9 -0
- package/src/CheckboxList/CheckboxList.test.tsx +169 -16
- package/src/CheckboxList/CheckboxList.tsx +56 -3
- package/src/CheckboxList/CheckboxListContext.tsx +7 -0
- package/src/Citation/Citation.doc.mjs +10 -0
- package/src/Citation/Citation.test.tsx +117 -0
- package/src/Citation/Citation.tsx +9 -1
- package/src/ClickableCard/ClickableCard.doc.mjs +15 -0
- package/src/CodeBlock/CodeBlock.test.tsx +115 -0
- package/src/CodeBlock/CodeBlock.tsx +61 -33
- package/src/CommandPalette/CommandPalette.test.tsx +47 -1
- package/src/CommandPalette/CommandPalette.tsx +9 -21
- package/src/ContextMenu/ContextMenu.doc.mjs +4 -4
- package/src/ContextMenu/ContextMenu.test.tsx +155 -1
- package/src/ContextMenu/ContextMenu.tsx +113 -16
- package/src/DateInput/DateInput.doc.mjs +281 -56
- package/src/DateInput/DateInput.test.tsx +188 -2
- package/src/DateInput/DateInput.tsx +89 -10
- package/src/DateRangeInput/DateRangeInput.doc.mjs +251 -46
- package/src/DateRangeInput/DateRangeInput.test.tsx +182 -20
- package/src/DateRangeInput/DateRangeInput.tsx +63 -5
- package/src/DateTimeInput/DateTimeInput.doc.mjs +368 -67
- package/src/DateTimeInput/DateTimeInput.test.tsx +279 -11
- package/src/DateTimeInput/DateTimeInput.tsx +125 -17
- package/src/Dialog/Dialog.doc.mjs +2 -2
- package/src/Dialog/Dialog.tsx +12 -0
- package/src/DropdownMenu/DropdownMenu.doc.mjs +1 -8
- package/src/DropdownMenu/DropdownMenu.test.tsx +56 -42
- package/src/DropdownMenu/DropdownMenu.tsx +52 -18
- package/src/EmptyState/EmptyState.test.tsx +4 -2
- package/src/EmptyState/EmptyState.tsx +6 -2
- package/src/Field/Field.test.tsx +32 -0
- package/src/Field/Field.tsx +23 -5
- package/src/Field/FieldLabel.tsx +55 -17
- package/src/FileInput/FileInput.doc.mjs +17 -0
- package/src/FileInput/FileInput.test.tsx +283 -49
- package/src/FileInput/FileInput.tsx +76 -4
- package/src/Grid/Grid.doc.mjs +14 -4
- package/src/Grid/Grid.tsx +20 -0
- package/src/HoverCard/HoverCard.doc.mjs +3 -0
- package/src/HoverCard/HoverCard.test.tsx +189 -2
- package/src/HoverCard/HoverCard.tsx +20 -16
- package/src/HoverCard/useHoverCard.tsx +13 -10
- package/src/Icon/Icon.doc.mjs +8 -0
- package/src/InputGroup/InputGroup.doc.mjs +2 -2
- package/src/InputGroup/InputGroup.test.tsx +98 -60
- package/src/InputGroup/InputGroup.tsx +21 -4
- package/src/InputGroup/InputGroupContext.ts +9 -4
- package/src/InputGroup/index.ts +1 -0
- package/src/Kbd/Kbd.test.tsx +22 -4
- package/src/Kbd/Kbd.tsx +37 -12
- package/src/Layer/anchorName.test.ts +146 -0
- package/src/Layer/anchorName.ts +46 -0
- package/src/Layer/layerAnimations.stylex.ts +20 -4
- package/src/Layer/useLayer.doc.mjs +12 -2
- package/src/Layer/useLayer.tsx +100 -15
- package/src/Layout/Layout.doc.mjs +1 -1
- package/src/Layout/Layout.tsx +8 -16
- package/src/Layout/LayoutFooter.doc.mjs +4 -4
- package/src/Layout/LayoutFooter.tsx +3 -3
- package/src/Layout/LayoutHeader.doc.mjs +4 -4
- package/src/Layout/LayoutHeader.tsx +3 -3
- package/src/Layout/LayoutPanel.tsx +3 -3
- package/src/Layout/padding.stylex.ts +52 -0
- package/src/Lightbox/Lightbox.doc.mjs +9 -2
- package/src/Lightbox/Lightbox.test.tsx +53 -5
- package/src/Lightbox/Lightbox.tsx +9 -4
- package/src/Link/Link.doc.mjs +14 -0
- package/src/Link/Link.test.tsx +52 -2
- package/src/Link/Link.tsx +42 -7
- package/src/Link/LinkProvider.tsx +1 -0
- package/src/List/List.doc.mjs +7 -0
- package/src/Markdown/Markdown.doc.mjs +2 -0
- package/src/Markdown/Markdown.test.tsx +28 -26
- package/src/Markdown/Markdown.tsx +21 -6
- package/src/MetadataList/MetadataListItem.doc.mjs +4 -0
- package/src/MobileNav/MobileNav.doc.mjs +8 -8
- package/src/MobileNav/MobileNav.tsx +13 -0
- package/src/MobileNav/MobileNavReopen.test.tsx +118 -0
- package/src/MoreMenu/MoreMenu.doc.mjs +2 -17
- package/src/MoreMenu/MoreMenu.tsx +0 -9
- package/src/MultiSelector/MultiSelector.doc.mjs +25 -0
- package/src/MultiSelector/MultiSelector.test.tsx +375 -8
- package/src/MultiSelector/MultiSelector.tsx +145 -21
- package/src/MultiSelector/hooks.ts +27 -0
- package/src/NavMenu/NavHeadingMenu.test.tsx +77 -1
- package/src/NavMenu/NavHeadingMenu.tsx +50 -3
- package/src/NumberInput/NumberInput.doc.mjs +17 -0
- package/src/NumberInput/NumberInput.test.tsx +242 -40
- package/src/NumberInput/NumberInput.tsx +89 -11
- package/src/OverflowList/OverflowList.doc.mjs +17 -0
- package/src/Pagination/Pagination.doc.mjs +3 -3
- package/src/Pagination/Pagination.test.tsx +250 -14
- package/src/Pagination/Pagination.tsx +54 -29
- package/src/Popover/usePopover.doc.mjs +7 -3
- package/src/Popover/usePopover.tsx +49 -6
- package/src/PowerSearch/PowerSearch.doc.mjs +15 -0
- package/src/PowerSearch/PowerSearch.test.tsx +97 -1
- package/src/PowerSearch/PowerSearch.tsx +16 -3
- package/src/ProgressBar/ProgressBar.test.tsx +45 -27
- package/src/ProgressBar/ProgressBar.tsx +3 -4
- package/src/RadioList/RadioList.doc.mjs +9 -0
- package/src/RadioList/RadioList.test.tsx +252 -16
- package/src/RadioList/RadioList.tsx +166 -10
- package/src/RadioList/RadioListItem.tsx +14 -2
- package/src/Resizable/Resizable.doc.mjs +1 -1
- package/src/Section/Section.doc.mjs +11 -0
- package/src/SegmentedControl/SegmentedControl.doc.mjs +9 -0
- package/src/SegmentedControl/SegmentedControl.test.tsx +214 -42
- package/src/SegmentedControl/SegmentedControl.tsx +102 -54
- package/src/SegmentedControl/SegmentedControlContext.ts +7 -0
- package/src/SegmentedControl/SegmentedControlItem.tsx +14 -1
- package/src/SelectableCard/SelectableCard.doc.mjs +15 -0
- package/src/Selector/Selector.doc.mjs +25 -0
- package/src/Selector/Selector.test.tsx +322 -15
- package/src/Selector/Selector.tsx +126 -40
- package/src/Selector/hooks.ts +23 -0
- package/src/SideNav/SideNav.test.tsx +16 -0
- package/src/SideNav/SideNavItem.tsx +2 -4
- package/src/Skeleton/Skeleton.doc.mjs +11 -1
- package/src/Skeleton/Skeleton.test.tsx +25 -0
- package/src/Skeleton/Skeleton.tsx +11 -1
- package/src/Slider/Slider.doc.mjs +19 -0
- package/src/Slider/Slider.test.tsx +158 -18
- package/src/Slider/Slider.tsx +54 -6
- package/src/Spinner/Spinner.tsx +7 -1
- package/src/Stack/Stack.doc.mjs +77 -0
- package/src/Stack/Stack.test.tsx +55 -5
- package/src/Stack/Stack.tsx +73 -24
- package/src/Stack/StackItem.test.tsx +23 -0
- package/src/Stack/StackItem.tsx +20 -23
- package/src/Switch/Switch.doc.mjs +15 -0
- package/src/Switch/Switch.test.tsx +162 -27
- package/src/Switch/Switch.tsx +61 -21
- package/src/TabList/Tab.tsx +6 -0
- package/src/TabList/TabList.doc.mjs +12 -0
- package/src/TabList/TabList.test.tsx +208 -0
- package/src/TabList/TabList.tsx +102 -12
- package/src/TabList/TabListContext.ts +7 -3
- package/src/TabList/TabMenu.tsx +6 -3
- package/src/Table/BaseTable.tsx +72 -41
- package/src/Table/Table.doc.mjs +14 -0
- package/src/Table/Table.test.tsx +39 -30
- package/src/Table/Table.tsx +27 -1
- package/src/Table/TableCell.tsx +25 -23
- package/src/Table/TableHeaderCell.tsx +28 -29
- package/src/Table/TableRow.tsx +37 -7
- package/src/Table/index.ts +6 -2
- package/src/Table/plugins/pagination/paginateData.ts +10 -3
- package/src/Table/plugins/pagination/useTablePagination.test.tsx +16 -0
- package/src/Table/plugins/pagination/useTablePagination.tsx +8 -1
- package/src/Table/plugins/sortable/useTableSortable.test.tsx +91 -2
- package/src/Table/plugins/sortable/useTableSortable.tsx +53 -1
- package/src/Table/plugins/stickyColumns/index.ts +4 -0
- package/src/Table/plugins/stickyColumns/useTableStickyColumns.test.tsx +163 -0
- package/src/Table/plugins/stickyColumns/useTableStickyColumns.tsx +407 -0
- package/src/Table/tableContextMenu.test.tsx +157 -0
- package/src/Table/tableContextMenu.tsx +142 -0
- package/src/Table/types.ts +175 -4
- package/src/Table/useBaseTablePlugins.ts +1 -0
- package/src/Table/useTableColumnResize.doc.mjs +96 -0
- package/src/Table/useTableStickyColumns.doc.mjs +59 -0
- package/src/Text/Heading.doc.mjs +15 -2
- package/src/Text/Text.doc.mjs +7 -1
- package/src/Text/text.stylex.ts +2 -2
- package/src/TextArea/TextArea.doc.mjs +17 -0
- package/src/TextArea/TextArea.test.tsx +167 -35
- package/src/TextArea/TextArea.tsx +62 -15
- package/src/TextInput/TextInput.doc.mjs +17 -0
- package/src/TextInput/TextInput.test.tsx +168 -34
- package/src/TextInput/TextInput.tsx +77 -9
- package/src/TimeInput/TimeInput.doc.mjs +335 -60
- package/src/TimeInput/TimeInput.test.tsx +144 -7
- package/src/TimeInput/TimeInput.tsx +74 -5
- package/src/Timestamp/Timestamp.doc.mjs +9 -0
- package/src/Timestamp/Timestamp.test.tsx +44 -18
- package/src/Timestamp/Timestamp.tsx +30 -10
- package/src/Toast/Toast.tsx +14 -0
- package/src/Toast/ToastViewport.test.tsx +204 -0
- package/src/Toast/ToastViewport.tsx +167 -21
- package/src/ToggleButton/ToggleButton.doc.mjs +9 -3
- package/src/ToggleButton/ToggleButton.test.tsx +39 -18
- package/src/ToggleButton/ToggleButton.tsx +46 -83
- package/src/Tokenizer/Tokenizer.doc.mjs +15 -0
- package/src/Tokenizer/Tokenizer.test.tsx +105 -1
- package/src/Tokenizer/Tokenizer.tsx +41 -2
- package/src/Toolbar/Toolbar.doc.mjs +65 -5
- package/src/Toolbar/Toolbar.test.tsx +109 -6
- package/src/Toolbar/Toolbar.tsx +59 -5
- package/src/Tooltip/Tooltip.test.tsx +81 -0
- package/src/Tooltip/useTooltip.tsx +57 -11
- package/src/TreeList/TreeList.test.tsx +295 -6
- package/src/TreeList/TreeList.tsx +73 -1
- package/src/TreeList/TreeListItem.tsx +51 -5
- package/src/TreeList/treeListItem.markers.stylex.ts +20 -0
- package/src/Typeahead/BaseTypeahead.tsx +86 -9
- package/src/Typeahead/Typeahead.doc.mjs +136 -30
- package/src/Typeahead/Typeahead.test.tsx +331 -1
- package/src/Typeahead/Typeahead.tsx +52 -1
- package/src/VisuallyHidden/VisuallyHidden.doc.mjs +80 -0
- package/src/VisuallyHidden/VisuallyHidden.test.tsx +76 -0
- package/src/VisuallyHidden/VisuallyHidden.tsx +113 -0
- package/src/VisuallyHidden/index.ts +15 -0
- package/src/hooks/focusableSelector.ts +25 -0
- package/src/hooks/index.ts +28 -2
- package/src/hooks/useAnnounce.test.tsx +101 -0
- package/src/hooks/useAnnounce.ts +168 -0
- package/src/hooks/useClickableContainer.ts +16 -4
- package/src/hooks/useEntryAnimation.ts +16 -4
- package/src/hooks/useFocusTrap.test.tsx +132 -0
- package/src/hooks/useFocusTrap.ts +98 -4
- package/src/hooks/useGridFocus.doc.mjs +40 -2
- package/src/hooks/useGridFocus.test.tsx +132 -0
- package/src/hooks/useGridFocus.ts +343 -67
- package/src/hooks/useImageMode.test.ts +133 -0
- package/src/hooks/useKeyboardHint.doc.mjs +101 -0
- package/src/hooks/useKeyboardHint.test.tsx +70 -0
- package/src/hooks/useKeyboardHint.tsx +332 -0
- package/src/hooks/useListFocus.doc.mjs +50 -10
- package/src/hooks/useListFocus.test.tsx +375 -0
- package/src/hooks/useListFocus.ts +395 -57
- package/src/hooks/useLongPress.test.tsx +134 -0
- package/src/hooks/useLongPress.ts +119 -0
- package/src/hooks/useTreeFocus.doc.mjs +140 -0
- package/src/hooks/useTreeFocus.test.tsx +214 -0
- package/src/hooks/useTreeFocus.ts +559 -0
- package/src/hooks/useTypeahead.test.tsx +109 -0
- package/src/hooks/useTypeahead.ts +183 -0
- package/src/index.ts +1 -0
- package/src/theme/derivedVarRegistry.test.ts +4 -0
- package/src/theme/generateThemeRules.test.ts +7 -8
- package/src/theme/generateThemeRules.ts +1 -1
- package/src/theme/syntax/SyntaxTheme.tsx +1 -1
- package/src/theme/syntax/defineSyntaxTheme.ts +20 -11
- package/src/theme/syntax/presets.ts +5 -2
- package/src/theme/syntax/tokens.ts +1 -1
- package/src/theme/types.ts +1 -1
- package/src/utils/dateTypes.test.ts +40 -0
- package/src/utils/dateTypes.ts +40 -0
- package/src/utils/index.ts +9 -0
- package/src/utils/inputAria.test.ts +39 -0
- package/src/utils/inputAria.ts +58 -0
- package/src/utils/timeParser.test.ts +10 -0
- package/src/utils/timeParser.ts +5 -2
- package/dist/Calendar/hooks/useCalendarRovingTabindex.d.ts +0 -57
- package/dist/Calendar/hooks/useCalendarRovingTabindex.d.ts.map +0 -1
- package/dist/Calendar/hooks/useCalendarRovingTabindex.js +0 -96
- package/src/Calendar/hooks/useCalendarRovingTabindex.ts +0 -118
|
@@ -32,22 +32,20 @@ export interface ToggleButtonProps extends BaseProps<HTMLButtonElement> {
|
|
|
32
32
|
*/
|
|
33
33
|
isPressed?: boolean;
|
|
34
34
|
/**
|
|
35
|
-
* Called when the pressed state should change.
|
|
35
|
+
* Called when the pressed state should change. Receives the next pressed
|
|
36
|
+
* state and the originating click event. Call `event.preventDefault()` to
|
|
37
|
+
* opt out of running `pressedChangeAction` (e.g. to handle the toggle
|
|
38
|
+
* entirely in this callback).
|
|
36
39
|
* When used inside ToggleButtonGroup, this is handled by the group
|
|
37
40
|
* and this prop is ignored.
|
|
38
41
|
*/
|
|
39
|
-
onPressedChange?: (isPressed: boolean) => void;
|
|
42
|
+
onPressedChange?: (isPressed: boolean, event: React.MouseEvent<HTMLButtonElement>) => void;
|
|
40
43
|
/**
|
|
41
44
|
* Action handler for API- or navigation-backed toggles, run inside a
|
|
42
|
-
* transition. The button shows a loading spinner while the action
|
|
43
|
-
* pending — whether it returns a promise or synchronously triggers a
|
|
45
|
+
* transition by Button. The button shows a loading spinner while the action
|
|
46
|
+
* is pending — whether it returns a promise or synchronously triggers a
|
|
44
47
|
* suspending update (e.g. a router navigation that suspends on data).
|
|
45
48
|
*
|
|
46
|
-
* Because it runs in a transition, the toggle is *interruptible*: clicking
|
|
47
|
-
* again while an action is pending starts a new transition with the next
|
|
48
|
-
* optimistic state, so the action reflects the latest intent rather than
|
|
49
|
-
* being dropped.
|
|
50
|
-
*
|
|
51
49
|
* @example
|
|
52
50
|
* ```
|
|
53
51
|
* <ToggleButton
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToggleButton.d.ts","sourceRoot":"","sources":["../../src/ToggleButton/ToggleButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"ToggleButton.d.ts","sourceRoot":"","sources":["../../src/ToggleButton/ToggleButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,EAAE,EAAgB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAI3D,OAAO,EAAS,KAAK,UAAU,EAAC,MAAM,WAAW,CAAC;AAElD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA0C5C,MAAM,WAAW,iBAAkB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACrE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;;OAOG;IACH,eAAe,CAAC,EAAE,CAChB,SAAS,EAAE,OAAO,EAClB,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KACvC,IAAI,CAAC;IAEV;;;;;;;;;;;;;;;;;OAiBG;IACH,mBAAmB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAEnE;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;;;;;;OAUG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAMD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,YAAY,CAAC,EAC3B,GAAG,EACH,KAAK,EACL,SAAS,EAAE,aAAa,EACxB,eAAe,EAAE,mBAAmB,EACpC,mBAAmB,EACnB,IAAI,EAAE,QAAQ,EACd,UAAU,EAAE,cAAsB,EAClC,SAAiB,EACjB,IAAI,EACJ,UAAkB,EAClB,WAAW,EACX,QAAQ,EACR,OAAO,EACP,KAAK,EACL,MAAM,EACN,SAAS,EAAE,UAAU,EACrB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,iBAAiB,GAAG,SAAS,CAyG/B;yBA5He,YAAY"}
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
* - /apps/storybook/stories/ToggleButton.stories.tsx
|
|
20
20
|
* - /packages/cli/templates/blocks/components/ToggleButton/ (showcase blocks)
|
|
21
21
|
*/
|
|
22
|
-
import React, {
|
|
22
|
+
import React, { useOptimistic } from 'react';
|
|
23
23
|
import * as stylex from '@stylexjs/stylex';
|
|
24
24
|
import "../theme/tokens.stylex.js";
|
|
25
25
|
import { colorVars, fontWeightVars } from "../theme/tokens.stylex.js";
|
|
@@ -27,38 +27,6 @@ import { Button } from "../Button/index.js";
|
|
|
27
27
|
import { useToggleButtonGroup } from "./ToggleButtonGroup.js";
|
|
28
28
|
import { themeProps } from "../utils/themeProps.js";
|
|
29
29
|
|
|
30
|
-
// =============================================================================
|
|
31
|
-
// Constants & helpers
|
|
32
|
-
// =============================================================================
|
|
33
|
-
|
|
34
|
-
/**
|
|
35
|
-
* The spinner only appears once the action has been pending for this long.
|
|
36
|
-
* A fast action shows the optimistic pressed state immediately with no spinner
|
|
37
|
-
* flash, and rapid re-clicks can interrupt the in-flight action before the
|
|
38
|
-
* button locks behind the spinner.
|
|
39
|
-
*/
|
|
40
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
41
|
-
const PENDING_SPINNER_DELAY_MS = 150;
|
|
42
|
-
|
|
43
|
-
/**
|
|
44
|
-
* Returns `true` only once `active` has stayed `true` for `delayMs`.
|
|
45
|
-
* Used to debounce the loading spinner so the optimistic state shows first.
|
|
46
|
-
*/
|
|
47
|
-
function useDelayed(active, delayMs) {
|
|
48
|
-
const [delayed, setDelayed] = useState(false);
|
|
49
|
-
useEffect(() => {
|
|
50
|
-
if (!active) {
|
|
51
|
-
return undefined;
|
|
52
|
-
}
|
|
53
|
-
const timer = setTimeout(() => setDelayed(true), delayMs);
|
|
54
|
-
return () => {
|
|
55
|
-
clearTimeout(timer);
|
|
56
|
-
setDelayed(false);
|
|
57
|
-
};
|
|
58
|
-
}, [active, delayMs]);
|
|
59
|
-
return active && delayed;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
30
|
// =============================================================================
|
|
63
31
|
// Styles
|
|
64
32
|
// =============================================================================
|
|
@@ -68,6 +36,7 @@ function useDelayed(active, delayMs) {
|
|
|
68
36
|
* A hidden span renders the same text at semibold weight to reserve
|
|
69
37
|
* the wider width, preventing layout shift when toggling.
|
|
70
38
|
*/
|
|
39
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
71
40
|
const pressedStyles = {
|
|
72
41
|
background: {
|
|
73
42
|
kWkggS: "xi89dp7",
|
|
@@ -129,41 +98,47 @@ export function ToggleButton({
|
|
|
129
98
|
const size = sizeProp ?? group?.size ?? 'md';
|
|
130
99
|
const isDisabled = group?.isDisabled ?? isDisabledProp;
|
|
131
100
|
|
|
132
|
-
// Track the pressed state optimistically
|
|
133
|
-
//
|
|
134
|
-
//
|
|
135
|
-
//
|
|
101
|
+
// Track the pressed state optimistically so the button reflects the intended
|
|
102
|
+
// state immediately while an async action is pending. The optimistic update
|
|
103
|
+
// is applied inside Button's clickAction transition (below), satisfying
|
|
104
|
+
// React's "useOptimistic must run in a transition" rule.
|
|
136
105
|
const [optimisticPressed, setOptimisticPressed] = useOptimistic(committedPressed);
|
|
137
106
|
const isPressed = optimisticPressed;
|
|
107
|
+
|
|
108
|
+
// Next state derives from the *optimistic* value, not the committed one, so a
|
|
109
|
+
// re-click while an action is pending reads the in-flight intent and toggles
|
|
110
|
+
// (true -> false -> true) rather than recomputing from the stale committed
|
|
111
|
+
// state. handleClick and clickAction share this so the callback and the
|
|
112
|
+
// optimistic update always agree within a single click.
|
|
113
|
+
const nextPressed = !isPressed;
|
|
138
114
|
const resolvedIcon = isPressed && pressedIcon ? pressedIcon : icon;
|
|
139
115
|
|
|
140
|
-
//
|
|
141
|
-
//
|
|
142
|
-
//
|
|
143
|
-
|
|
144
|
-
// which means a synchronous-but-suspending handler (e.g. a router navigation
|
|
145
|
-
// that suspends on data) also drives the pending state — not just promises.
|
|
146
|
-
const [isPending, startTransition] = useTransition();
|
|
147
|
-
// Debounce the spinner so a fast action shows the optimistic state without a
|
|
148
|
-
// spinner flash, and rapid re-clicks can interrupt before the button locks.
|
|
149
|
-
const showSpinner = useDelayed(isPending, PENDING_SPINNER_DELAY_MS);
|
|
150
|
-
const isLoadingState = isLoading || showSpinner;
|
|
151
|
-
const handleClick = useCallback(() => {
|
|
116
|
+
// Synchronous part of the toggle. Button calls onClick before clickAction and
|
|
117
|
+
// skips clickAction when the event is defaultPrevented, so calling
|
|
118
|
+
// preventDefault() inside onPressedChange opts out of pressedChangeAction.
|
|
119
|
+
const handleClick = event => {
|
|
152
120
|
if (isDisabled) {
|
|
153
121
|
return;
|
|
154
122
|
}
|
|
155
123
|
if (group && value != null) {
|
|
156
124
|
// Group mode delegates selection to the group; no async-action path.
|
|
157
125
|
group.toggle(value);
|
|
126
|
+
event.preventDefault();
|
|
158
127
|
return;
|
|
159
128
|
}
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
129
|
+
onPressedChangeProp?.(nextPressed, event);
|
|
130
|
+
};
|
|
131
|
+
|
|
132
|
+
// Async part of the toggle, run inside Button's transition (so the optimistic
|
|
133
|
+
// update is valid and Button's isPending drives the pending spinner). Skipped
|
|
134
|
+
// automatically by Button when handleClick called preventDefault, and never
|
|
135
|
+
// wired in group mode (where there is no async action). Button is rendered
|
|
136
|
+
// interruptible, so it stays clickable while pending and a re-click starts a
|
|
137
|
+
// fresh transition that interrupts the previous one.
|
|
138
|
+
const clickAction = group && value != null ? undefined : async () => {
|
|
139
|
+
setOptimisticPressed(nextPressed);
|
|
140
|
+
await pressedChangeAction?.(nextPressed);
|
|
141
|
+
};
|
|
167
142
|
|
|
168
143
|
// isIconOnly prop is the source of truth for icon-only rendering.
|
|
169
144
|
const labelContent = children != null ? /*#__PURE__*/_jsxs("span", {
|
|
@@ -211,7 +186,8 @@ export function ToggleButton({
|
|
|
211
186
|
variant: "ghost",
|
|
212
187
|
size: size,
|
|
213
188
|
isDisabled: isDisabled,
|
|
214
|
-
isLoading:
|
|
189
|
+
isLoading: isLoading,
|
|
190
|
+
isInterruptible: true,
|
|
215
191
|
isIconOnly: isIconOnly,
|
|
216
192
|
"aria-pressed": isPressed,
|
|
217
193
|
icon: resolvedIcon,
|
|
@@ -222,6 +198,7 @@ export function ToggleButton({
|
|
|
222
198
|
xstyle: [isPressed ? pressedStyles.background : undefined, xstyle],
|
|
223
199
|
style: style,
|
|
224
200
|
onClick: handleClick,
|
|
201
|
+
clickAction: clickAction,
|
|
225
202
|
...props,
|
|
226
203
|
children: labelContent
|
|
227
204
|
});
|
|
@@ -97,6 +97,17 @@ export interface TokenizerProps<T extends SearchableItem> extends Omit<BaseProps
|
|
|
97
97
|
emptySearchResultsText?: string;
|
|
98
98
|
/** Whether the input is disabled. @default false */
|
|
99
99
|
isDisabled?: boolean;
|
|
100
|
+
/**
|
|
101
|
+
* Explains why the tokenizer is disabled. When set together with
|
|
102
|
+
* `isDisabled`, the tokenizer shows a tooltip with this text on hover and
|
|
103
|
+
* keyboard focus, and the input stays focusable (via `aria-disabled`) so the
|
|
104
|
+
* reason is discoverable by keyboard and assistive technology. Input stays
|
|
105
|
+
* blocked.
|
|
106
|
+
*
|
|
107
|
+
* Use this instead of wrapping a disabled tokenizer in `Tooltip` — disabled
|
|
108
|
+
* controls don't emit the pointer events an external tooltip needs.
|
|
109
|
+
*/
|
|
110
|
+
disabledMessage?: string;
|
|
100
111
|
/** Show clear button (clears all tokens). @default false */
|
|
101
112
|
hasClear?: boolean;
|
|
102
113
|
/**
|
|
@@ -178,7 +189,7 @@ export interface TokenizerProps<T extends SearchableItem> extends Omit<BaseProps
|
|
|
178
189
|
* />
|
|
179
190
|
* ```
|
|
180
191
|
*/
|
|
181
|
-
export declare function Tokenizer<T extends SearchableItem>({ label, isLabelHidden, description, isRequired, isOptional, status, startIcon, labelTooltip, searchSource, value, onChange, renderItem, renderToken, maxEntries, placeholder, hasEntriesOnFocus, maxMenuItems, emptySearchResultsText, isDisabled, hasClear, endContent, hasAutoFocus, size: sizeProp, tokenOverflowBehavior, debounceMs, hasCreate, onChangeQuery, onFocus, onBlur, width, xstyle, className, style, 'data-testid': testId, ref, handleRef, }: TokenizerProps<T>): React.JSX.Element;
|
|
192
|
+
export declare function Tokenizer<T extends SearchableItem>({ label, isLabelHidden, description, isRequired, isOptional, status, startIcon, labelTooltip, searchSource, value, onChange, renderItem, renderToken, maxEntries, placeholder, hasEntriesOnFocus, maxMenuItems, emptySearchResultsText, isDisabled, disabledMessage, hasClear, endContent, hasAutoFocus, size: sizeProp, tokenOverflowBehavior, debounceMs, hasCreate, onChangeQuery, onFocus, onBlur, width, xstyle, className, style, 'data-testid': testId, ref, handleRef, }: TokenizerProps<T>): React.JSX.Element;
|
|
182
193
|
export declare namespace Tokenizer {
|
|
183
194
|
var displayName: string;
|
|
184
195
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tokenizer.d.ts","sourceRoot":"","sources":["../../src/Tokenizer/Tokenizer.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,EAOZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAG9C,OAAO,EAGL,KAAK,WAAW,EAKjB,MAAM,UAAU,CAAC;AAElB,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"Tokenizer.d.ts","sourceRoot":"","sources":["../../src/Tokenizer/Tokenizer.tsx"],"names":[],"mappings":"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"}
|
|
@@ -23,6 +23,7 @@ import { Token } from "../Token/index.js";
|
|
|
23
23
|
import { renderIconSlot } from "../Icon/index.js";
|
|
24
24
|
import { OverflowList } from "../OverflowList/index.js";
|
|
25
25
|
import { useLayer } from "../Layer/useLayer.js";
|
|
26
|
+
import { useTooltip } from "../Tooltip/index.js";
|
|
26
27
|
import "../theme/tokens.stylex.js";
|
|
27
28
|
import { colorVars, spacingVars, sizeVars, typeScaleVars } from "../theme/tokens.stylex.js";
|
|
28
29
|
import { mergeProps } from "../utils/index.js";
|
|
@@ -75,7 +76,7 @@ const styles = {
|
|
|
75
76
|
},
|
|
76
77
|
endSection: {
|
|
77
78
|
kVAEAm: "x10l6tqk",
|
|
78
|
-
kt4wiu: "
|
|
79
|
+
kt4wiu: "x72tfeb",
|
|
79
80
|
k1xSpc: "x78zum5",
|
|
80
81
|
kGNEyG: "x6s0dn4",
|
|
81
82
|
kOIVth: "x1txdalj",
|
|
@@ -234,6 +235,7 @@ export function Tokenizer({
|
|
|
234
235
|
maxMenuItems,
|
|
235
236
|
emptySearchResultsText,
|
|
236
237
|
isDisabled = false,
|
|
238
|
+
disabledMessage,
|
|
237
239
|
hasClear = false,
|
|
238
240
|
endContent,
|
|
239
241
|
hasAutoFocus,
|
|
@@ -258,6 +260,19 @@ export function Tokenizer({
|
|
|
258
260
|
const statusMessageId = useId();
|
|
259
261
|
const inputRef = useRef(null);
|
|
260
262
|
const wrapperRef = useRef(null);
|
|
263
|
+
|
|
264
|
+
// Disabled-reason tooltip. Disabled controls swallow pointer events, so the
|
|
265
|
+
// tooltip listeners attach to the input wrapper and the typeahead input stays
|
|
266
|
+
// perceivable via aria-disabled instead of the disabled attribute. Input is
|
|
267
|
+
// blocked by the isDisabled guards in BaseTypeahead and handleWrapperClick.
|
|
268
|
+
const showsDisabledMessage = isDisabled && !!disabledMessage;
|
|
269
|
+
const disabledMessageTooltip = useTooltip({
|
|
270
|
+
placement: 'above',
|
|
271
|
+
// The wrapper is not naturally focusable; focusin bubbles up from the
|
|
272
|
+
// input, so always attach focus listeners.
|
|
273
|
+
focusTrigger: 'always',
|
|
274
|
+
isEnabled: showsDisabledMessage
|
|
275
|
+
});
|
|
261
276
|
useImperativeHandle(handleRef, () => ({
|
|
262
277
|
focus() {
|
|
263
278
|
inputRef.current?.focus();
|
|
@@ -452,7 +467,7 @@ export function Tokenizer({
|
|
|
452
467
|
}
|
|
453
468
|
}
|
|
454
469
|
}, [isDisabled, isLayerMode, layer]);
|
|
455
|
-
const ariaDescribedBy = [description ? descriptionId : null, status?.message ? statusMessageId : null].filter(Boolean).join(' ') || undefined;
|
|
470
|
+
const ariaDescribedBy = [description ? descriptionId : null, status?.message ? statusMessageId : null, showsDisabledMessage ? disabledMessageTooltip.describedBy : null].filter(Boolean).join(' ') || undefined;
|
|
456
471
|
const sizeStyle = sizeStyles[size];
|
|
457
472
|
|
|
458
473
|
// Render tokens
|
|
@@ -481,7 +496,13 @@ export function Tokenizer({
|
|
|
481
496
|
left: 'anchor(start)'
|
|
482
497
|
};
|
|
483
498
|
const wrapperContent = /*#__PURE__*/_jsxs("div", {
|
|
484
|
-
ref:
|
|
499
|
+
ref: el => {
|
|
500
|
+
wrapperRef.current = el;
|
|
501
|
+
// Anchor + hover/focus listeners for the disabled-message tooltip.
|
|
502
|
+
// Handlers are gated internally by isEnabled, so attaching
|
|
503
|
+
// unconditionally is safe.
|
|
504
|
+
disabledMessageTooltip.ref(el);
|
|
505
|
+
},
|
|
485
506
|
role: "group",
|
|
486
507
|
"aria-label": label,
|
|
487
508
|
onClick: handleWrapperClick,
|
|
@@ -524,6 +545,7 @@ export function Tokenizer({
|
|
|
524
545
|
maxMenuItems: maxMenuItems,
|
|
525
546
|
emptySearchResultsText: emptySearchResultsText,
|
|
526
547
|
isDisabled: isDisabled,
|
|
548
|
+
isFocusableDisabled: showsDisabledMessage,
|
|
527
549
|
hasAutoFocus: hasAutoFocus,
|
|
528
550
|
inputId: inputId,
|
|
529
551
|
ariaDescribedBy: ariaDescribedBy,
|
|
@@ -586,7 +608,7 @@ export function Tokenizer({
|
|
|
586
608
|
} else {
|
|
587
609
|
tokenizerContent = wrapperContent;
|
|
588
610
|
}
|
|
589
|
-
return /*#__PURE__*/
|
|
611
|
+
return /*#__PURE__*/_jsxs(Field, {
|
|
590
612
|
ref: ref,
|
|
591
613
|
label: label,
|
|
592
614
|
isLabelHidden: isLabelHidden,
|
|
@@ -606,7 +628,7 @@ export function Tokenizer({
|
|
|
606
628
|
xstyle: xstyle,
|
|
607
629
|
className: className,
|
|
608
630
|
style: style,
|
|
609
|
-
children: tokenizerContent
|
|
631
|
+
children: [tokenizerContent, showsDisabledMessage && disabledMessageTooltip.renderTooltip(disabledMessage)]
|
|
610
632
|
});
|
|
611
633
|
}
|
|
612
634
|
Tokenizer.displayName = 'Tokenizer';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @file Toolbar.tsx
|
|
3
|
-
* @input Uses Section, SizeContext, useListFocus, StyleX, spacingVars, sizeVars
|
|
3
|
+
* @input Uses Section, SizeContext, useListFocus, useKeyboardHint, StyleX, spacingVars, sizeVars
|
|
4
4
|
* @output Exports Toolbar component and ToolbarProps
|
|
5
5
|
* @position Core implementation; consumed by index.ts
|
|
6
6
|
*
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
* - /apps/storybook/stories/Toolbar.stories.tsx
|
|
12
12
|
* - /packages/cli/templates/blocks/components/Toolbar/ (showcase blocks)
|
|
13
13
|
*/
|
|
14
|
-
import type
|
|
14
|
+
import { type ReactNode } from 'react';
|
|
15
15
|
import type { BaseProps } from '../BaseProps';
|
|
16
16
|
import type { SectionVariant } from '../Section/Section';
|
|
17
17
|
import type { SpacingStep } from '../utils/types';
|
|
@@ -90,7 +90,7 @@ export interface ToolbarProps extends BaseProps<HTMLDivElement> {
|
|
|
90
90
|
* />
|
|
91
91
|
* ```
|
|
92
92
|
*/
|
|
93
|
-
export declare function Toolbar({ startContent, centerContent, endContent, label, size, gap, orientation, variant, dividers, xstyle, className, style, ref, ...props }: ToolbarProps): import("react").JSX.Element;
|
|
93
|
+
export declare function Toolbar({ startContent, centerContent, endContent, label, size, gap, orientation, variant, dividers, xstyle, className, style, ref, onKeyDown: onKeyDownProp, onFocus: onFocusProp, onBlur: onBlurProp, role: _role, 'aria-label': _ariaLabel, 'aria-orientation': _ariaOrientation, ...props }: ToolbarProps): import("react").JSX.Element;
|
|
94
94
|
export declare namespace Toolbar {
|
|
95
95
|
var displayName: string;
|
|
96
96
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../src/Toolbar/Toolbar.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../src/Toolbar/Toolbar.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAc,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAClD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,oBAAoB,CAAC;AACvD,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,4BAA4B,CAAC;AAqH5D,MAAM,MAAM,WAAW,GAAG,WAAW,CAAC;AAEtC,MAAM,WAAW,YAAa,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC7D,gDAAgD;IAChD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;;OAGG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;OAGG;IACH,GAAG,CAAC,EAAE,WAAW,CAAC;IAClB;;;;OAIG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC;;;OAGG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC;IAEzB;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC,EAAE,CAAC;CACnD;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,OAAO,CAAC,EACtB,YAAY,EACZ,aAAa,EACb,UAAU,EACV,KAAK,EACL,IAAW,EACX,GAAO,EACP,WAA0B,EAC1B,OAAuB,EACvB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,SAAS,EAAE,aAAa,EACxB,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,UAAU,EAClB,IAAI,EAAE,KAAK,EACX,YAAY,EAAE,UAAU,EACxB,kBAAkB,EAAE,gBAAgB,EACpC,GAAG,KAAK,EACT,EAAE,YAAY,+BA+Id;yBApKe,OAAO"}
|
package/dist/Toolbar/Toolbar.js
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* @file Toolbar.tsx
|
|
7
|
-
* @input Uses Section, SizeContext, useListFocus, StyleX, spacingVars, sizeVars
|
|
7
|
+
* @input Uses Section, SizeContext, useListFocus, useKeyboardHint, StyleX, spacingVars, sizeVars
|
|
8
8
|
* @output Exports Toolbar component and ToolbarProps
|
|
9
9
|
* @position Core implementation; consumed by index.ts
|
|
10
10
|
*
|
|
@@ -15,12 +15,14 @@
|
|
|
15
15
|
* - /apps/storybook/stories/Toolbar.stories.tsx
|
|
16
16
|
* - /packages/cli/templates/blocks/components/Toolbar/ (showcase blocks)
|
|
17
17
|
*/
|
|
18
|
+
import { useCallback } from 'react';
|
|
18
19
|
import * as stylex from '@stylexjs/stylex';
|
|
19
20
|
import "../theme/tokens.stylex.js";
|
|
20
21
|
import { spacingVars, sizeVars } from "../theme/tokens.stylex.js";
|
|
21
22
|
import { mergeProps } from "../utils/index.js";
|
|
22
23
|
import { Section } from "../Section/Section.js";
|
|
23
24
|
import { useListFocus } from "../hooks/useListFocus.js";
|
|
25
|
+
import { useKeyboardHint } from "../hooks/useKeyboardHint.js";
|
|
24
26
|
import { SizeProvider } from "../SizeContext/SizeContext.js";
|
|
25
27
|
import { edgeCompSlot } from "../Layout/edgeCompensation.stylex.js";
|
|
26
28
|
import { themeProps } from "../utils/themeProps.js";
|
|
@@ -167,6 +169,12 @@ export function Toolbar({
|
|
|
167
169
|
className,
|
|
168
170
|
style,
|
|
169
171
|
ref,
|
|
172
|
+
onKeyDown: onKeyDownProp,
|
|
173
|
+
onFocus: onFocusProp,
|
|
174
|
+
onBlur: onBlurProp,
|
|
175
|
+
role: _role,
|
|
176
|
+
'aria-label': _ariaLabel,
|
|
177
|
+
'aria-orientation': _ariaOrientation,
|
|
170
178
|
...props
|
|
171
179
|
}) {
|
|
172
180
|
const hasCenterContent = centerContent != null;
|
|
@@ -175,11 +183,45 @@ export function Toolbar({
|
|
|
175
183
|
const gapVar = spacingVars[spacingStepToVar[gap]];
|
|
176
184
|
const {
|
|
177
185
|
listRef,
|
|
178
|
-
handleKeyDown
|
|
186
|
+
handleKeyDown,
|
|
187
|
+
handleFocus
|
|
179
188
|
} = useListFocus({
|
|
180
|
-
itemSelector: 'button, input, [tabindex
|
|
189
|
+
itemSelector: 'button, input, [tabindex]',
|
|
190
|
+
orientation,
|
|
191
|
+
hasRovingTabIndex: true,
|
|
192
|
+
hasCaretGuard: true
|
|
193
|
+
});
|
|
194
|
+
const {
|
|
195
|
+
hintElement,
|
|
196
|
+
onKeyDown: onHintKeyDown,
|
|
197
|
+
onFocus: onHintFocus,
|
|
198
|
+
onBlur: onHintBlur
|
|
199
|
+
} = useKeyboardHint({
|
|
181
200
|
orientation
|
|
182
201
|
});
|
|
202
|
+
const handleToolbarKeyDown = useCallback(e => {
|
|
203
|
+
onKeyDownProp?.(e);
|
|
204
|
+
if (e.defaultPrevented) {
|
|
205
|
+
return;
|
|
206
|
+
}
|
|
207
|
+
onHintKeyDown(e);
|
|
208
|
+
handleKeyDown(e);
|
|
209
|
+
}, [onKeyDownProp, onHintKeyDown, handleKeyDown]);
|
|
210
|
+
const handleToolbarFocus = useCallback(e => {
|
|
211
|
+
onFocusProp?.(e);
|
|
212
|
+
if (e.defaultPrevented) {
|
|
213
|
+
return;
|
|
214
|
+
}
|
|
215
|
+
onHintFocus(e);
|
|
216
|
+
handleFocus(e);
|
|
217
|
+
}, [onFocusProp, onHintFocus, handleFocus]);
|
|
218
|
+
const handleToolbarBlur = useCallback(e => {
|
|
219
|
+
onBlurProp?.(e);
|
|
220
|
+
if (e.defaultPrevented) {
|
|
221
|
+
return;
|
|
222
|
+
}
|
|
223
|
+
onHintBlur(e);
|
|
224
|
+
}, [onBlurProp, onHintBlur]);
|
|
183
225
|
return /*#__PURE__*/_jsx(SizeProvider, {
|
|
184
226
|
value: size,
|
|
185
227
|
children: /*#__PURE__*/_jsx(Section, {
|
|
@@ -190,17 +232,19 @@ export function Toolbar({
|
|
|
190
232
|
xstyle: xstyle,
|
|
191
233
|
className: className,
|
|
192
234
|
style: style,
|
|
193
|
-
children: /*#__PURE__*/
|
|
235
|
+
children: /*#__PURE__*/_jsxs("div", {
|
|
194
236
|
ref: listRef,
|
|
195
237
|
role: "toolbar",
|
|
196
238
|
"aria-label": label,
|
|
197
239
|
"aria-orientation": orientation,
|
|
198
|
-
onKeyDown:
|
|
240
|
+
onKeyDown: handleToolbarKeyDown,
|
|
241
|
+
onFocus: handleToolbarFocus,
|
|
242
|
+
onBlur: handleToolbarBlur,
|
|
199
243
|
...mergeProps(themeProps('toolbar', {
|
|
200
244
|
size
|
|
201
245
|
}), stylex.props(hasCenterContent ? styles.baseGrid : styles.baseFlex, orientation === 'vertical' && styles.vertical, sizeStyles.base, dynamicStyles.gap(gapVar), dynamicStyles.tabIndicatorBottom(`calc(-1 * (${blockPaddingVarForSize[size]}${dividers?.includes('bottom') ? ' + 1px' : ''}))`))),
|
|
202
246
|
...props,
|
|
203
|
-
children: hasCenterContent ?
|
|
247
|
+
children: [hasCenterContent ?
|
|
204
248
|
/*#__PURE__*/
|
|
205
249
|
// Three-slot grid layout
|
|
206
250
|
_jsxs(_Fragment, {
|
|
@@ -225,7 +269,7 @@ export function Toolbar({
|
|
|
225
269
|
...stylex.props(styles.endSlot, !hasStartContent && styles.endOnly, edgeCompSlot.inset(edgeCompInsetForSize[size]), dynamicStyles.gap(gapVar)),
|
|
226
270
|
children: endContent
|
|
227
271
|
})]
|
|
228
|
-
})
|
|
272
|
+
}), hintElement]
|
|
229
273
|
})
|
|
230
274
|
})
|
|
231
275
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTooltip.d.ts","sourceRoot":"","sources":["../../src/Tooltip/useTooltip.tsx"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAEH,OAAO,EAKL,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,KAAK,kBAAkB,EACvB,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"useTooltip.d.ts","sourceRoot":"","sources":["../../src/Tooltip/useTooltip.tsx"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAEH,OAAO,EAKL,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,KAAK,kBAAkB,EACvB,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,mBAAmB,CAAC;AAsD3B;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE9D,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,mBAAmB,CAAC;IAEnC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,aAAa;IAC5B;;;OAGG;IACH,GAAG,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAE9B;;;OAGG;IACH,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEtC;;;;OAIG;IACH,cAAc,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEzC;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,aAAa,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,KAAK,CAAC,EAAE,kBAAkB,KAAK,SAAS,CAAC;CAC/E;AAyBD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,UAAU,CAAC,OAAO,GAAE,cAAmB,GAAG,aAAa,CA+PtE"}
|
|
@@ -18,7 +18,14 @@ import { layerAnimations } from "../Layer/layerAnimations.stylex.js";
|
|
|
18
18
|
import { themeProps } from "../utils/themeProps.js";
|
|
19
19
|
import "../theme/tokens.stylex.js";
|
|
20
20
|
import { colorVars, radiusVars, spacingVars, typographyVars, typeScaleVars } from "../theme/tokens.stylex.js";
|
|
21
|
+
|
|
22
|
+
/**
|
|
23
|
+
* Grace period (ms) before hiding on pointer-leave when no explicit `hideDelay`
|
|
24
|
+
* is set, so the pointer can travel across the small gap from the trigger onto
|
|
25
|
+
* the tooltip surface without the tooltip disappearing (WCAG 1.4.13 hoverable).
|
|
26
|
+
*/
|
|
21
27
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
28
|
+
const HOVER_BRIDGE_DELAY = 100;
|
|
22
29
|
const styles = {
|
|
23
30
|
container: {
|
|
24
31
|
kWkggS: "x19aspcf",
|
|
@@ -143,21 +150,29 @@ export function useTooltip(options = {}) {
|
|
|
143
150
|
}, delay);
|
|
144
151
|
}, [isEnabled, isOpen, clearTimeouts, layer, delay]);
|
|
145
152
|
|
|
146
|
-
// Schedule hide with delay (suppressed when isOpen is true)
|
|
153
|
+
// Schedule hide with delay (suppressed when isOpen is true).
|
|
154
|
+
// A small hover bridge (when hideDelay is 0) lets the pointer travel from the
|
|
155
|
+
// trigger onto the tooltip surface without the tooltip vanishing — required
|
|
156
|
+
// for WCAG 1.4.13 (Content on Hover or Focus: hoverable).
|
|
147
157
|
const scheduleHide = useCallback(() => {
|
|
148
158
|
if (isOpen === true) {
|
|
149
159
|
return;
|
|
150
160
|
}
|
|
151
161
|
clearTimeouts();
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
layer.hide();
|
|
155
|
-
}, hideDelay);
|
|
156
|
-
} else {
|
|
162
|
+
const effectiveHideDelay = hideDelay > 0 ? hideDelay : HOVER_BRIDGE_DELAY;
|
|
163
|
+
hideTimeoutRef.current = setTimeout(() => {
|
|
157
164
|
layer.hide();
|
|
158
|
-
}
|
|
165
|
+
}, effectiveHideDelay);
|
|
159
166
|
}, [isOpen, clearTimeouts, layer, hideDelay]);
|
|
160
167
|
|
|
168
|
+
// Cancel a pending hide (e.g. the pointer entered the tooltip surface).
|
|
169
|
+
const cancelHide = useCallback(() => {
|
|
170
|
+
if (hideTimeoutRef.current) {
|
|
171
|
+
clearTimeout(hideTimeoutRef.current);
|
|
172
|
+
hideTimeoutRef.current = null;
|
|
173
|
+
}
|
|
174
|
+
}, []);
|
|
175
|
+
|
|
161
176
|
// Event handlers
|
|
162
177
|
const handleMouseEnter = useCallback(() => {
|
|
163
178
|
// Suppress tooltips on touch devices — hover is simulated and eats a tap
|
|
@@ -245,14 +260,47 @@ export function useTooltip(options = {}) {
|
|
|
245
260
|
}
|
|
246
261
|
}, [isOpen, clearTimeouts, layer]);
|
|
247
262
|
|
|
263
|
+
// Dismiss on Escape (WCAG 1.4.13 — dismissible). Uncontrolled tooltips only;
|
|
264
|
+
// a controlled tooltip's visibility is owned by the consumer. The listener is
|
|
265
|
+
// mounted for the lifetime of an uncontrolled tooltip rather than gated on
|
|
266
|
+
// `layer.isOpen` (React state, which can lag a frame behind the DOM) —
|
|
267
|
+
// `layer.hide()` self-guards and no-ops when the layer is already closed.
|
|
268
|
+
// Guarded against IME composition-cancel.
|
|
269
|
+
useEffect(() => {
|
|
270
|
+
if (isOpen !== undefined) {
|
|
271
|
+
return;
|
|
272
|
+
}
|
|
273
|
+
const handleKeyDown = e => {
|
|
274
|
+
if (e.key !== 'Escape') {
|
|
275
|
+
return;
|
|
276
|
+
}
|
|
277
|
+
if (e.isComposing || e.keyCode === 229) {
|
|
278
|
+
return;
|
|
279
|
+
}
|
|
280
|
+
clearTimeouts();
|
|
281
|
+
layer.hide();
|
|
282
|
+
};
|
|
283
|
+
document.addEventListener('keydown', handleKeyDown);
|
|
284
|
+
return () => {
|
|
285
|
+
document.removeEventListener('keydown', handleKeyDown);
|
|
286
|
+
};
|
|
287
|
+
}, [isOpen, layer, clearTimeouts]);
|
|
288
|
+
|
|
248
289
|
// Render function that wraps layer.render with tooltip styling
|
|
249
290
|
const renderTooltip = useCallback((children, props) => {
|
|
250
291
|
const renderPlacement = props?.placement ?? placement;
|
|
251
292
|
const renderProps = {
|
|
252
293
|
placement: renderPlacement,
|
|
253
294
|
alignment: props?.alignment ?? alignment,
|
|
295
|
+
role: 'tooltip',
|
|
254
296
|
xstyle: [popoverXstyle, layerAnimations[renderPlacement]],
|
|
255
|
-
className: themeProps('tooltip').className
|
|
297
|
+
className: themeProps('tooltip').className,
|
|
298
|
+
// Keep the tooltip open while the pointer is over the surface itself
|
|
299
|
+
// (WCAG 1.4.13 hoverable). These sit on the layer container — the
|
|
300
|
+
// element the user actually hovers — not the inner content div, since
|
|
301
|
+
// mouseenter/leave do not bubble.
|
|
302
|
+
onMouseEnter: cancelHide,
|
|
303
|
+
onMouseLeave: scheduleHide
|
|
256
304
|
};
|
|
257
305
|
return layer.render(/*#__PURE__*/_jsx("div", {
|
|
258
306
|
...{
|
|
@@ -260,7 +308,7 @@ export function useTooltip(options = {}) {
|
|
|
260
308
|
},
|
|
261
309
|
children: children
|
|
262
310
|
}), renderProps);
|
|
263
|
-
}, [layer, placement, alignment, popoverXstyle]);
|
|
311
|
+
}, [layer, placement, alignment, popoverXstyle, cancelHide, scheduleHide]);
|
|
264
312
|
return {
|
|
265
313
|
ref,
|
|
266
314
|
positionRef: layer.ref,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @file TreeList.tsx
|
|
3
|
-
* @input Uses React, StyleX, theme tokens, TreeListItem, TreeListTypes
|
|
3
|
+
* @input Uses React, StyleX, theme tokens, TreeListItem, TreeListTypes, useTreeFocus
|
|
4
4
|
* @output Exports TreeList component, TreeListProps type
|
|
5
5
|
* @position Core implementation; consumed by index.ts
|
|
6
6
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TreeList.d.ts","sourceRoot":"","sources":["../../src/TreeList/TreeList.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAwC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAI5E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,gBAAgB,EAAE,eAAe,EAAC,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"TreeList.d.ts","sourceRoot":"","sources":["../../src/TreeList/TreeList.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAwC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAI5E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,gBAAgB,EAAE,eAAe,EAAC,MAAM,iBAAiB,CAAC;AAQvE,OAAO,EAAC,KAAK,eAAe,EAAC,MAAM,iBAAiB,CAAC;AAErD,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;;OAGG;IACH,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAE1B;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAuED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,OAAoB,EACpB,MAAM,EACN,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,GACJ,EAAE,aAAa,+BAgJf;yBAzJe,QAAQ"}
|