@astryxdesign/core 0.1.2 → 0.1.3-canary.102854d
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 +165 -0
- package/README.md +12 -12
- package/dist/Avatar/Avatar.d.ts.map +1 -1
- package/dist/Avatar/Avatar.js +11 -5
- 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.map +1 -1
- package/dist/Button/Button.js +31 -12
- package/dist/ButtonGroup/ButtonGroup.d.ts.map +1 -1
- package/dist/ButtonGroup/ButtonGroup.js +0 -1
- package/dist/Calendar/Calendar.d.ts +5 -4
- package/dist/Calendar/Calendar.d.ts.map +1 -1
- package/dist/Calendar/Calendar.js +124 -61
- package/dist/Calendar/dayCellUtils.d.ts +67 -5
- package/dist/Calendar/dayCellUtils.d.ts.map +1 -1
- package/dist/Calendar/dayCellUtils.js +139 -18
- 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/ChatComposerInput.d.ts.map +1 -1
- package/dist/Chat/ChatComposerInput.js +0 -1
- 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 +8 -1
- package/dist/Chat/useTriggerMenu.d.ts.map +1 -1
- package/dist/Chat/useTriggerMenu.js +15 -3
- 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/CheckboxList/CheckboxListItem.d.ts.map +1 -1
- package/dist/CheckboxList/CheckboxListItem.js +0 -1
- package/dist/Citation/Citation.d.ts.map +1 -1
- package/dist/Citation/Citation.js +9 -5
- package/dist/CodeBlock/CodeBlock.d.ts.map +1 -1
- package/dist/CodeBlock/CodeBlock.js +51 -37
- package/dist/CommandPalette/CommandPalette.d.ts.map +1 -1
- package/dist/CommandPalette/CommandPalette.js +5 -5
- package/dist/ContextMenu/ContextMenu.d.ts +12 -5
- package/dist/ContextMenu/ContextMenu.d.ts.map +1 -1
- package/dist/ContextMenu/ContextMenu.js +96 -11
- package/dist/DateInput/DateInput.d.ts +23 -1
- package/dist/DateInput/DateInput.d.ts.map +1 -1
- package/dist/DateInput/DateInput.js +167 -99
- 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/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 +32 -6
- package/dist/InputGroup/InputGroup.d.ts +4 -3
- package/dist/InputGroup/InputGroup.d.ts.map +1 -1
- package/dist/InputGroup/InputGroup.js +16 -6
- 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/groupStyles.d.ts +1 -1
- package/dist/InputGroup/groupStyles.d.ts.map +1 -1
- package/dist/InputGroup/groupStyles.js +3 -3
- 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 +33 -1
- 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 +10 -0
- package/dist/Layer/useLayer.d.ts.map +1 -1
- package/dist/Layer/useLayer.js +64 -9
- 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 +16 -1
- package/dist/Link/Link.d.ts.map +1 -1
- package/dist/Link/Link.js +18 -7
- package/dist/Markdown/Markdown.d.ts.map +1 -1
- package/dist/Markdown/Markdown.js +7 -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 +27 -2
- package/dist/MultiSelector/MultiSelector.d.ts.map +1 -1
- package/dist/MultiSelector/MultiSelector.js +141 -42
- 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 +15 -1
- package/dist/Popover/Popover.d.ts +18 -2
- package/dist/Popover/Popover.d.ts.map +1 -1
- package/dist/Popover/Popover.js +5 -2
- package/dist/Popover/usePopover.d.ts +38 -3
- package/dist/Popover/usePopover.d.ts.map +1 -1
- package/dist/Popover/usePopover.js +24 -9
- 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 +24 -1
- package/dist/Selector/Selector.d.ts.map +1 -1
- package/dist/Selector/Selector.js +122 -43
- 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/SideNavHeading.d.ts.map +1 -1
- package/dist/SideNav/SideNavHeading.js +2 -0
- 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 +36 -9
- 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 +87 -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 +13 -9
- package/dist/Table/Table.d.ts.map +1 -1
- package/dist/Table/Table.js +10 -1
- package/dist/Table/TableCell.d.ts +8 -1
- package/dist/Table/TableCell.d.ts.map +1 -1
- package/dist/Table/TableCell.js +79 -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/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/rowExpansion/index.d.ts +3 -0
- package/dist/Table/plugins/rowExpansion/index.d.ts.map +1 -0
- package/dist/Table/plugins/rowExpansion/index.js +3 -0
- package/dist/Table/plugins/rowExpansion/useTableRowExpansion.d.ts +90 -0
- package/dist/Table/plugins/rowExpansion/useTableRowExpansion.d.ts.map +1 -0
- package/dist/Table/plugins/rowExpansion/useTableRowExpansion.js +398 -0
- package/dist/Table/plugins/sortable/useTableSortable.d.ts.map +1 -1
- package/dist/Table/plugins/sortable/useTableSortable.js +59 -3
- package/dist/Table/tableContextMenu.d.ts +37 -0
- package/dist/Table/tableContextMenu.d.ts.map +1 -0
- package/dist/Table/tableContextMenu.js +140 -0
- package/dist/Table/types.d.ts +66 -0
- package/dist/Table/types.d.ts.map +1 -1
- 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 +147 -76
- 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 +131 -3
- package/dist/Tokenizer/Tokenizer.d.ts +12 -1
- package/dist/Tokenizer/Tokenizer.d.ts.map +1 -1
- package/dist/Tokenizer/Tokenizer.js +26 -4
- 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 +56 -9
- package/dist/TopNav/TopNavHeading.d.ts +7 -1
- package/dist/TopNav/TopNavHeading.d.ts.map +1 -1
- package/dist/TopNav/TopNavHeading.js +8 -0
- 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 +13 -0
- package/dist/Typeahead/BaseTypeahead.d.ts.map +1 -1
- package/dist/Typeahead/BaseTypeahead.js +69 -6
- package/dist/Typeahead/Typeahead.d.ts +26 -3
- package/dist/Typeahead/Typeahead.d.ts.map +1 -1
- package/dist/Typeahead/Typeahead.js +65 -29
- 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 +22 -0
- package/dist/astryx.umd.js +55 -55
- package/dist/astryx.umd.js.map +4 -4
- 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/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/docs.mjs +2 -2
- package/package.json +12 -8
- package/src/Avatar/Avatar.doc.mjs +2 -2
- package/src/Avatar/Avatar.test.tsx +37 -0
- package/src/Avatar/Avatar.tsx +10 -5
- package/src/Breadcrumbs/BreadcrumbItem.tsx +25 -7
- package/src/Breadcrumbs/Breadcrumbs.test.tsx +31 -10
- package/src/Button/Button.tsx +42 -22
- package/src/ButtonGroup/ButtonGroup.test.tsx +9 -9
- package/src/ButtonGroup/ButtonGroup.tsx +0 -1
- package/src/Calendar/Calendar.doc.mjs +4 -4
- package/src/Calendar/Calendar.test.tsx +247 -30
- package/src/Calendar/Calendar.tsx +173 -86
- package/src/Calendar/dayCellUtils.test.ts +306 -1
- package/src/Calendar/dayCellUtils.ts +206 -13
- 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/ChatComposerInput.test.tsx +26 -7
- package/src/Chat/ChatComposerInput.tsx +0 -1
- package/src/Chat/ChatDictationButton.doc.mjs +1 -1
- 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 +22 -4
- package/src/CheckboxInput/CheckboxInput.doc.mjs +10 -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 +192 -26
- package/src/CheckboxList/CheckboxList.tsx +56 -3
- package/src/CheckboxList/CheckboxListContext.tsx +7 -0
- package/src/CheckboxList/CheckboxListItem.tsx +0 -3
- package/src/Citation/Citation.doc.mjs +10 -0
- package/src/Citation/Citation.test.tsx +121 -0
- package/src/Citation/Citation.tsx +15 -3
- package/src/CodeBlock/CodeBlock.test.tsx +115 -0
- package/src/CodeBlock/CodeBlock.tsx +63 -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 +129 -16
- package/src/DateInput/DateInput.doc.mjs +291 -56
- package/src/DateInput/DateInput.test.tsx +248 -2
- package/src/DateInput/DateInput.tsx +196 -100
- 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/Field/Field.doc.mjs +59 -18
- 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 +17 -4
- package/src/Grid/Grid.test.tsx +43 -30
- package/src/Grid/Grid.tsx +38 -3
- package/src/Icon/Icon.doc.mjs +3 -3
- package/src/InputGroup/InputGroup.doc.mjs +111 -23
- package/src/InputGroup/InputGroup.test.tsx +257 -60
- package/src/InputGroup/InputGroup.tsx +23 -5
- package/src/InputGroup/InputGroupContext.ts +9 -4
- package/src/InputGroup/groupStyles.ts +7 -1
- package/src/InputGroup/index.ts +1 -0
- package/src/Kbd/Kbd.test.tsx +22 -4
- package/src/Kbd/Kbd.tsx +35 -3
- package/src/Layer/layerAnimations.stylex.ts +20 -4
- package/src/Layer/useLayer.doc.mjs +5 -0
- package/src/Layer/useLayer.test.tsx +111 -0
- package/src/Layer/useLayer.tsx +90 -9
- 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/__tests__/edgeCompensation.test.tsx +72 -0
- package/src/Layout/padding.stylex.ts +52 -0
- package/src/Lightbox/Lightbox.doc.mjs +9 -0
- 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 +50 -0
- package/src/Link/Link.tsx +39 -4
- package/src/Markdown/Markdown.test.tsx +11 -0
- package/src/Markdown/Markdown.tsx +7 -0
- package/src/MetadataList/MetadataListItem.doc.mjs +4 -0
- package/src/MoreMenu/MoreMenu.doc.mjs +2 -17
- package/src/MoreMenu/MoreMenu.tsx +0 -9
- package/src/MultiSelector/MultiSelector.doc.mjs +35 -0
- package/src/MultiSelector/MultiSelector.test.tsx +375 -8
- package/src/MultiSelector/MultiSelector.tsx +194 -48
- 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/Pagination/Pagination.doc.mjs +3 -3
- package/src/Pagination/Pagination.test.tsx +117 -5
- package/src/Pagination/Pagination.tsx +21 -1
- package/src/Popover/Popover.doc.mjs +26 -0
- package/src/Popover/Popover.test.tsx +121 -0
- package/src/Popover/Popover.tsx +23 -2
- package/src/Popover/usePopover.doc.mjs +9 -3
- package/src/Popover/usePopover.tsx +70 -12
- 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 +34 -26
- 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/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 +1 -1
- package/src/Selector/Selector.doc.mjs +31 -0
- package/src/Selector/Selector.test.tsx +387 -15
- package/src/Selector/Selector.tsx +175 -67
- package/src/Selector/hooks.ts +23 -0
- package/src/SideNav/SideNav.test.tsx +48 -0
- package/src/SideNav/SideNavHeading.tsx +8 -2
- package/src/SideNav/SideNavItem.tsx +2 -4
- package/src/Skeleton/Skeleton.test.tsx +25 -0
- package/src/Skeleton/Skeleton.tsx +11 -1
- package/src/Slider/Slider.doc.mjs +15 -0
- package/src/Slider/Slider.test.tsx +155 -2
- package/src/Slider/Slider.tsx +53 -5
- 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 +9 -3
- package/src/TabList/TabList.test.tsx +251 -0
- package/src/TabList/TabList.tsx +103 -12
- package/src/TabList/TabListContext.ts +7 -3
- package/src/TabList/TabMenu.tsx +6 -3
- package/src/Table/BaseTable.tsx +24 -18
- package/src/Table/Table.doc.mjs +2 -0
- package/src/Table/Table.test.tsx +10 -0
- package/src/Table/Table.tsx +8 -0
- package/src/Table/TableCell.tsx +105 -24
- package/src/Table/TableHeaderCell.tsx +28 -29
- package/src/Table/index.ts +8 -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/rowExpansion/index.ts +7 -0
- package/src/Table/plugins/rowExpansion/useTableRowExpansion.test.tsx +155 -0
- package/src/Table/plugins/rowExpansion/useTableRowExpansion.tsx +590 -0
- package/src/Table/plugins/sortable/useTableSortable.test.tsx +91 -2
- package/src/Table/plugins/sortable/useTableSortable.tsx +53 -1
- package/src/Table/tableContextMenu.test.tsx +181 -0
- package/src/Table/tableContextMenu.tsx +160 -0
- package/src/Table/types.ts +74 -0
- package/src/Table/useTableColumnResize.doc.mjs +3 -3
- package/src/Table/useTablePagination.doc.mjs +4 -1
- package/src/Table/useTableRowExpansion.doc.mjs +63 -0
- package/src/Table/useTableSortable.doc.mjs +4 -1
- package/src/Table/useTableStickyColumns.doc.mjs +2 -2
- package/src/Text/Text.doc.mjs +18 -18
- 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/Thumbnail/Thumbnail.doc.mjs +4 -4
- package/src/TimeInput/TimeInput.doc.mjs +345 -60
- package/src/TimeInput/TimeInput.test.tsx +255 -7
- package/src/TimeInput/TimeInput.tsx +176 -70
- package/src/Timestamp/Timestamp.doc.mjs +19 -19
- package/src/Toast/Toast.tsx +14 -0
- package/src/Toast/ToastViewport.test.tsx +214 -0
- package/src/Toast/ToastViewport.tsx +167 -21
- package/src/Tokenizer/Tokenizer.doc.mjs +29 -14
- package/src/Tokenizer/Tokenizer.test.tsx +105 -1
- package/src/Tokenizer/Tokenizer.tsx +37 -1
- package/src/Toolbar/Toolbar.test.tsx +109 -6
- package/src/Toolbar/Toolbar.tsx +59 -5
- package/src/Tooltip/Tooltip.test.tsx +68 -0
- package/src/Tooltip/useTooltip.tsx +55 -8
- package/src/TopNav/TopNav.test.tsx +50 -0
- package/src/TopNav/TopNavHeading.tsx +17 -1
- 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 +93 -9
- package/src/Typeahead/Typeahead.doc.mjs +146 -30
- package/src/Typeahead/Typeahead.test.tsx +331 -1
- package/src/Typeahead/Typeahead.tsx +105 -33
- 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/docs-script.test.mjs +50 -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/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 +10 -5
- 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
|
@@ -51,6 +51,28 @@ export interface TimeInputProps extends Omit<BaseProps, 'onChange' | 'defaultVal
|
|
|
51
51
|
* @default false
|
|
52
52
|
*/
|
|
53
53
|
isDisabled?: boolean;
|
|
54
|
+
/**
|
|
55
|
+
* Explains why the input is disabled. When set together with
|
|
56
|
+
* `isDisabled`, the input shows a tooltip with this text on hover and
|
|
57
|
+
* keyboard focus, and the field stays focusable (via `aria-disabled`)
|
|
58
|
+
* so the reason is discoverable by keyboard and assistive technology.
|
|
59
|
+
* Typing and arrow-key adjustment stay blocked.
|
|
60
|
+
*
|
|
61
|
+
* Use this instead of wrapping a disabled input in `Tooltip` — disabled
|
|
62
|
+
* controls don't emit the pointer events an external tooltip needs.
|
|
63
|
+
*
|
|
64
|
+
* @example
|
|
65
|
+
* ```
|
|
66
|
+
* <TimeInput
|
|
67
|
+
* label="Start time"
|
|
68
|
+
* value={time}
|
|
69
|
+
* onChange={setTime}
|
|
70
|
+
* isDisabled
|
|
71
|
+
* disabledMessage="You need the Editor role to change this"
|
|
72
|
+
* />
|
|
73
|
+
* ```
|
|
74
|
+
*/
|
|
75
|
+
disabledMessage?: string;
|
|
54
76
|
/**
|
|
55
77
|
* The selected time in ISO format (HH:MM or HH:MM:SS).
|
|
56
78
|
*/
|
|
@@ -147,7 +169,7 @@ export interface TimeInputProps extends Omit<BaseProps, 'onChange' | 'defaultVal
|
|
|
147
169
|
* />
|
|
148
170
|
* ```
|
|
149
171
|
*/
|
|
150
|
-
export declare function TimeInput({ label, isLabelHidden, description, isOptional, isRequired, isDisabled, value, onChange, changeAction, isLoading, min, max, hasSeconds, hasClear, hasAutoFocus, hourFormat, increment, placeholder, size: sizeProp, status, labelTooltip, width, xstyle, className, style, ref, }: TimeInputProps): import("react").JSX.Element;
|
|
172
|
+
export declare function TimeInput({ label, isLabelHidden, description, isOptional, isRequired, isDisabled, disabledMessage, value, onChange, changeAction, isLoading, min, max, hasSeconds, hasClear, hasAutoFocus, hourFormat, increment, placeholder, size: sizeProp, status, labelTooltip, width, xstyle, className, style, ref, }: TimeInputProps): import("react").JSX.Element;
|
|
151
173
|
export declare namespace TimeInput {
|
|
152
174
|
var displayName: string;
|
|
153
175
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TimeInput.d.ts","sourceRoot":"","sources":["../../src/TimeInput/TimeInput.tsx"],"names":[],"mappings":"AA6BA,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAU3C,OAAO,EAEL,KAAK,WAAW,EAMjB,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"TimeInput.d.ts","sourceRoot":"","sources":["../../src/TimeInput/TimeInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* @file TimeInput.tsx
|
|
7
|
-
* @input Uses React, useId, useState,
|
|
7
|
+
* @input Uses React, useId, useState, useCallback, useRef, Field, Icon, InputGroupContext
|
|
8
8
|
* @output Exports TimeInput component, TimeInputProps
|
|
9
9
|
* @position Core implementation; consumed by index.ts, tested by TimeInput.test.tsx
|
|
10
10
|
*
|
|
@@ -22,11 +22,15 @@ import { colorVars, sizeVars, radiusVars, typographyVars, typeScaleVars, borderV
|
|
|
22
22
|
import { Field, inputWrapperStyles, inputStatusBorderStyles, inputStatusHoverShadowStyles, inputStatusFocusWithinStyles } from "../Field/index.js";
|
|
23
23
|
import { Icon } from "../Icon/index.js";
|
|
24
24
|
import { Spinner } from "../Spinner/index.js";
|
|
25
|
-
import {
|
|
25
|
+
import { VisuallyHidden } from "../VisuallyHidden/index.js";
|
|
26
|
+
import { parseTimeInput, formatDisplayTime12h, formatDisplayTime24h, formatISOTime, adjustTime, isTimeInRange, mergeProps, mergeRefs, getInputARIA } from "../utils/index.js";
|
|
26
27
|
import { useSize } from "../SizeContext/SizeContext.js";
|
|
27
28
|
import { useInputContainer } from "../hooks/useInputContainer.js";
|
|
29
|
+
import { useInputGroup } from "../InputGroup/InputGroupContext.js";
|
|
30
|
+
import { groupStyles } from "../InputGroup/groupStyles.js";
|
|
31
|
+
import { useTooltip } from "../Tooltip/index.js";
|
|
28
32
|
import { themeProps } from "../utils/themeProps.js";
|
|
29
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
33
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
30
34
|
const sizeStyles = {
|
|
31
35
|
sm: {
|
|
32
36
|
kZKoxP: "x6k0iem",
|
|
@@ -68,6 +72,7 @@ export function TimeInput({
|
|
|
68
72
|
isOptional = false,
|
|
69
73
|
isRequired = false,
|
|
70
74
|
isDisabled = false,
|
|
75
|
+
disabledMessage,
|
|
71
76
|
value,
|
|
72
77
|
onChange,
|
|
73
78
|
changeAction,
|
|
@@ -91,14 +96,29 @@ export function TimeInput({
|
|
|
91
96
|
}) {
|
|
92
97
|
const size = useSize(sizeProp, 'md');
|
|
93
98
|
const id = useId();
|
|
99
|
+
const inputLabelID = useId();
|
|
94
100
|
const descriptionID = useId();
|
|
95
101
|
const statusMessageID = useId();
|
|
96
102
|
const inputRef = useRef(null);
|
|
97
103
|
const containerRef = useRef(null);
|
|
104
|
+
const inputGroup = useInputGroup();
|
|
98
105
|
const [, startTransition] = useTransition();
|
|
99
106
|
const [optimisticValue, setOptimisticValue] = useOptimistic(value);
|
|
100
107
|
const isBusy = isLoading || optimisticValue !== value;
|
|
101
108
|
|
|
109
|
+
// Disabled-reason tooltip. Disabled controls swallow pointer events, so the
|
|
110
|
+
// tooltip listeners attach to the input container (which already exists) and
|
|
111
|
+
// the input stays perceivable via aria-disabled instead of the disabled
|
|
112
|
+
// attribute. Typing is blocked with readOnly and value mutation guards.
|
|
113
|
+
const showsDisabledMessage = isDisabled && !!disabledMessage;
|
|
114
|
+
const disabledMessageTooltip = useTooltip({
|
|
115
|
+
placement: 'above',
|
|
116
|
+
// The container div is not naturally focusable; focusin bubbles up from
|
|
117
|
+
// the input, so always attach focus listeners.
|
|
118
|
+
focusTrigger: 'always',
|
|
119
|
+
isEnabled: showsDisabledMessage
|
|
120
|
+
});
|
|
121
|
+
|
|
102
122
|
// Status icon mapping
|
|
103
123
|
const statusIconMap = {
|
|
104
124
|
warning: 'warning',
|
|
@@ -110,7 +130,10 @@ export function TimeInput({
|
|
|
110
130
|
error: 'error',
|
|
111
131
|
success: 'success'
|
|
112
132
|
};
|
|
113
|
-
const
|
|
133
|
+
const {
|
|
134
|
+
ariaLabelledBy,
|
|
135
|
+
ariaDescribedBy
|
|
136
|
+
} = getInputARIA(inputLabelID, [description ? descriptionID : null, status?.message ? statusMessageID : null, showsDisabledMessage ? disabledMessageTooltip.describedBy : null], inputGroup);
|
|
114
137
|
|
|
115
138
|
// Pending input while user is typing (null = show formatted value)
|
|
116
139
|
const [pendingInput, setPendingInput] = useState(null);
|
|
@@ -162,6 +185,11 @@ export function TimeInput({
|
|
|
162
185
|
|
|
163
186
|
// Handle input text change - update immediately if valid
|
|
164
187
|
const handleInputChange = useCallback(e => {
|
|
188
|
+
// With a disabledMessage the input drops `disabled` for focusability, so
|
|
189
|
+
// guard value mutation explicitly (readOnly also blocks typing).
|
|
190
|
+
if (isDisabled) {
|
|
191
|
+
return;
|
|
192
|
+
}
|
|
165
193
|
const newValue = e.target.value;
|
|
166
194
|
setPendingInput(newValue);
|
|
167
195
|
|
|
@@ -170,12 +198,18 @@ export function TimeInput({
|
|
|
170
198
|
if (parsed && isTimeInRange(parsed, min, max) && parsed !== value) {
|
|
171
199
|
fireChange(parsed);
|
|
172
200
|
}
|
|
173
|
-
}, [hasSeconds, min, max, value, fireChange]);
|
|
201
|
+
}, [hasSeconds, min, max, value, fireChange, isDisabled]);
|
|
174
202
|
|
|
175
203
|
// Handle focus
|
|
176
204
|
const handleFocus = useCallback(() => {
|
|
205
|
+
// A disabled input stays focusable (via aria-disabled) so its reason is
|
|
206
|
+
// discoverable, but it must not present editing affordances — keep the
|
|
207
|
+
// static placeholder rather than swapping in the format hint.
|
|
208
|
+
if (isDisabled) {
|
|
209
|
+
return;
|
|
210
|
+
}
|
|
177
211
|
setIsFocused(true);
|
|
178
|
-
}, []);
|
|
212
|
+
}, [isDisabled]);
|
|
179
213
|
|
|
180
214
|
// Handle blur - validate and clear pending input
|
|
181
215
|
const handleBlur = useCallback(_e => {
|
|
@@ -204,6 +238,11 @@ export function TimeInput({
|
|
|
204
238
|
|
|
205
239
|
// Handle keyboard navigation on input
|
|
206
240
|
const handleInputKeyDown = useCallback(e => {
|
|
241
|
+
// Arrow-key adjustment mutates the value; block it while showing a
|
|
242
|
+
// disabled reason (the input keeps focusability via aria-disabled).
|
|
243
|
+
if (isDisabled) {
|
|
244
|
+
return;
|
|
245
|
+
}
|
|
207
246
|
if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
|
|
208
247
|
e.preventDefault();
|
|
209
248
|
|
|
@@ -225,7 +264,7 @@ export function TimeInput({
|
|
|
225
264
|
fireChange(newTime);
|
|
226
265
|
}
|
|
227
266
|
}
|
|
228
|
-
}, [value, hasSeconds, increment, min, max, fireChange]);
|
|
267
|
+
}, [value, hasSeconds, increment, min, max, fireChange, isDisabled]);
|
|
229
268
|
|
|
230
269
|
// Handle clear button click
|
|
231
270
|
const handleClear = useCallback(() => {
|
|
@@ -242,7 +281,106 @@ export function TimeInput({
|
|
|
242
281
|
inputRef,
|
|
243
282
|
disabled: isDisabled
|
|
244
283
|
});
|
|
245
|
-
|
|
284
|
+
const inputWrapper = /*#__PURE__*/_jsxs("div", {
|
|
285
|
+
ref: el => {
|
|
286
|
+
containerRef.current = el;
|
|
287
|
+
// Anchor + hover/focus listeners for the disabled-message tooltip.
|
|
288
|
+
// Handlers are gated internally by isEnabled, so attaching
|
|
289
|
+
// unconditionally is safe.
|
|
290
|
+
disabledMessageTooltip.ref(el);
|
|
291
|
+
},
|
|
292
|
+
onClick: handleWrapperClick,
|
|
293
|
+
onMouseUp: handleWrapperMouseUp,
|
|
294
|
+
...mergeProps(themeProps('time-input', {
|
|
295
|
+
size,
|
|
296
|
+
status: status?.type ?? null
|
|
297
|
+
}), stylex.props(inputWrapperStyles.base, sizeStyles[size], isDisabled && inputWrapperStyles.disabled, status && inputStatusBorderStyles[status.type], status && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type], inputGroup && groupStyles.inGroup, xstyle), className, style),
|
|
298
|
+
children: [/*#__PURE__*/_jsx("div", {
|
|
299
|
+
...{
|
|
300
|
+
className: "x78zum5 x6s0dn4 xl56j7k x2lah0s"
|
|
301
|
+
},
|
|
302
|
+
children: /*#__PURE__*/_jsx(Icon, {
|
|
303
|
+
icon: "clock",
|
|
304
|
+
size: "sm",
|
|
305
|
+
color: "secondary"
|
|
306
|
+
})
|
|
307
|
+
}), inputGroup && /*#__PURE__*/_jsx(VisuallyHidden, {
|
|
308
|
+
id: inputLabelID,
|
|
309
|
+
children: label
|
|
310
|
+
}), inputGroup && description && /*#__PURE__*/_jsx(VisuallyHidden, {
|
|
311
|
+
as: "div",
|
|
312
|
+
id: descriptionID,
|
|
313
|
+
children: description
|
|
314
|
+
}), inputGroup && status?.message && /*#__PURE__*/_jsx(VisuallyHidden, {
|
|
315
|
+
as: "div",
|
|
316
|
+
id: statusMessageID,
|
|
317
|
+
role: status.type === 'error' ? 'alert' : 'status',
|
|
318
|
+
"aria-live": status.type === 'error' ? 'assertive' : 'polite',
|
|
319
|
+
children: status.message
|
|
320
|
+
}), /*#__PURE__*/_jsx("input", {
|
|
321
|
+
ref: mergeRefs(ref, inputRef),
|
|
322
|
+
id: id,
|
|
323
|
+
type: "text",
|
|
324
|
+
value: displayValue,
|
|
325
|
+
onChange: handleInputChange,
|
|
326
|
+
onFocus: handleFocus,
|
|
327
|
+
onBlur: handleBlur,
|
|
328
|
+
onKeyDown: handleInputKeyDown,
|
|
329
|
+
placeholder: displayPlaceholder
|
|
330
|
+
// With a disabledMessage the input keeps focusability via
|
|
331
|
+
// aria-disabled so the reason is focus-discoverable; typing and
|
|
332
|
+
// arrow-key adjustment are blocked with readOnly and the guards.
|
|
333
|
+
,
|
|
334
|
+
disabled: isDisabled && !showsDisabledMessage,
|
|
335
|
+
"aria-disabled": showsDisabledMessage ? 'true' : undefined,
|
|
336
|
+
readOnly: showsDisabledMessage || undefined,
|
|
337
|
+
autoFocus: hasAutoFocus,
|
|
338
|
+
"data-autofocus": hasAutoFocus || undefined,
|
|
339
|
+
"aria-describedby": ariaDescribedBy,
|
|
340
|
+
"aria-required": isRequired === true ? 'true' : undefined,
|
|
341
|
+
"aria-invalid": status?.type === 'error' ? 'true' : undefined,
|
|
342
|
+
"aria-busy": isBusy || undefined,
|
|
343
|
+
"aria-labelledby": ariaLabelledBy,
|
|
344
|
+
...{
|
|
345
|
+
0: {
|
|
346
|
+
className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx x1tgivj0 xjbqb8w x1a2a7pz xeyghm5"
|
|
347
|
+
},
|
|
348
|
+
2: {
|
|
349
|
+
className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx x1tgivj0 xjbqb8w x1a2a7pz xeyghm5 x1h6gzvc"
|
|
350
|
+
},
|
|
351
|
+
1: {
|
|
352
|
+
className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx xjbqb8w x1a2a7pz xeyghm5 xv1l7n4"
|
|
353
|
+
},
|
|
354
|
+
3: {
|
|
355
|
+
className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx xjbqb8w x1a2a7pz xeyghm5 x1h6gzvc xv1l7n4"
|
|
356
|
+
}
|
|
357
|
+
}[!!isDisabled << 1 | !!!isInputValid << 0]
|
|
358
|
+
}), isBusy && /*#__PURE__*/_jsx(Spinner, {
|
|
359
|
+
size: "sm"
|
|
360
|
+
}), hasClear && value && !isDisabled && /*#__PURE__*/_jsx("button", {
|
|
361
|
+
type: "button",
|
|
362
|
+
onClick: handleClear,
|
|
363
|
+
"aria-label": `Clear ${label}`,
|
|
364
|
+
...{
|
|
365
|
+
className: "x78zum5 x6s0dn4 xl56j7k x1717udv x1ghz6dp xc342km xng3xce xjbqb8w x1ypdohk xh6dtrn x1a2a7pz x1p25gnr x1y3gkto"
|
|
366
|
+
},
|
|
367
|
+
children: /*#__PURE__*/_jsx(Icon, {
|
|
368
|
+
icon: "close",
|
|
369
|
+
size: "sm",
|
|
370
|
+
color: "secondary"
|
|
371
|
+
})
|
|
372
|
+
}), status && !inputGroup && /*#__PURE__*/_jsx(Icon, {
|
|
373
|
+
icon: statusIconMap[status.type],
|
|
374
|
+
size: "md",
|
|
375
|
+
color: statusIconColorMap[status.type]
|
|
376
|
+
})]
|
|
377
|
+
});
|
|
378
|
+
if (inputGroup) {
|
|
379
|
+
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
380
|
+
children: [inputWrapper, showsDisabledMessage && disabledMessageTooltip.renderTooltip(disabledMessage)]
|
|
381
|
+
});
|
|
382
|
+
}
|
|
383
|
+
return /*#__PURE__*/_jsxs(Field, {
|
|
246
384
|
label: label,
|
|
247
385
|
isLabelHidden: isLabelHidden,
|
|
248
386
|
description: description,
|
|
@@ -258,74 +396,7 @@ export function TimeInput({
|
|
|
258
396
|
} : undefined,
|
|
259
397
|
labelTooltip: labelTooltip,
|
|
260
398
|
width: width,
|
|
261
|
-
children:
|
|
262
|
-
ref: containerRef,
|
|
263
|
-
onClick: handleWrapperClick,
|
|
264
|
-
onMouseUp: handleWrapperMouseUp,
|
|
265
|
-
...mergeProps(themeProps('time-input', {
|
|
266
|
-
size,
|
|
267
|
-
status: status?.type ?? null
|
|
268
|
-
}), stylex.props(inputWrapperStyles.base, sizeStyles[size], isDisabled && inputWrapperStyles.disabled, status && inputStatusBorderStyles[status.type], status && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type], xstyle), className, style),
|
|
269
|
-
children: [/*#__PURE__*/_jsx("div", {
|
|
270
|
-
...{
|
|
271
|
-
className: "x78zum5 x6s0dn4 xl56j7k x2lah0s"
|
|
272
|
-
},
|
|
273
|
-
children: /*#__PURE__*/_jsx(Icon, {
|
|
274
|
-
icon: "clock",
|
|
275
|
-
size: "sm",
|
|
276
|
-
color: "secondary"
|
|
277
|
-
})
|
|
278
|
-
}), /*#__PURE__*/_jsx("input", {
|
|
279
|
-
ref: mergeRefs(ref, inputRef),
|
|
280
|
-
id: id,
|
|
281
|
-
type: "text",
|
|
282
|
-
value: displayValue,
|
|
283
|
-
onChange: handleInputChange,
|
|
284
|
-
onFocus: handleFocus,
|
|
285
|
-
onBlur: handleBlur,
|
|
286
|
-
onKeyDown: handleInputKeyDown,
|
|
287
|
-
placeholder: displayPlaceholder,
|
|
288
|
-
disabled: isDisabled,
|
|
289
|
-
autoFocus: hasAutoFocus,
|
|
290
|
-
"data-autofocus": hasAutoFocus || undefined,
|
|
291
|
-
"aria-describedby": ariaDescribedBy,
|
|
292
|
-
"aria-required": isRequired === true ? 'true' : undefined,
|
|
293
|
-
"aria-invalid": status?.type === 'error' ? 'true' : undefined,
|
|
294
|
-
"aria-busy": isBusy || undefined,
|
|
295
|
-
...{
|
|
296
|
-
0: {
|
|
297
|
-
className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx x1tgivj0 xjbqb8w x1a2a7pz xeyghm5"
|
|
298
|
-
},
|
|
299
|
-
2: {
|
|
300
|
-
className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx x1tgivj0 xjbqb8w x1a2a7pz xeyghm5 x1h6gzvc"
|
|
301
|
-
},
|
|
302
|
-
1: {
|
|
303
|
-
className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx xjbqb8w x1a2a7pz xeyghm5 xv1l7n4"
|
|
304
|
-
},
|
|
305
|
-
3: {
|
|
306
|
-
className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx xjbqb8w x1a2a7pz xeyghm5 x1h6gzvc xv1l7n4"
|
|
307
|
-
}
|
|
308
|
-
}[!!isDisabled << 1 | !!!isInputValid << 0]
|
|
309
|
-
}), isBusy && /*#__PURE__*/_jsx(Spinner, {
|
|
310
|
-
size: "sm"
|
|
311
|
-
}), hasClear && value && !isDisabled && /*#__PURE__*/_jsx("button", {
|
|
312
|
-
type: "button",
|
|
313
|
-
onClick: handleClear,
|
|
314
|
-
"aria-label": `Clear ${label}`,
|
|
315
|
-
...{
|
|
316
|
-
className: "x78zum5 x6s0dn4 xl56j7k x1717udv x1ghz6dp xc342km xng3xce xjbqb8w x1ypdohk xh6dtrn x1a2a7pz x1p25gnr x1y3gkto"
|
|
317
|
-
},
|
|
318
|
-
children: /*#__PURE__*/_jsx(Icon, {
|
|
319
|
-
icon: "close",
|
|
320
|
-
size: "sm",
|
|
321
|
-
color: "secondary"
|
|
322
|
-
})
|
|
323
|
-
}), status && /*#__PURE__*/_jsx(Icon, {
|
|
324
|
-
icon: statusIconMap[status.type],
|
|
325
|
-
size: "md",
|
|
326
|
-
color: statusIconColorMap[status.type]
|
|
327
|
-
})]
|
|
328
|
-
})
|
|
399
|
+
children: [inputWrapper, showsDisabledMessage && disabledMessageTooltip.renderTooltip(disabledMessage)]
|
|
329
400
|
});
|
|
330
401
|
}
|
|
331
402
|
TimeInput.displayName = 'TimeInput';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../src/Toast/Toast.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAiBrC,OAAO,KAAK,EAAC,SAAS,EAAE,kBAAkB,EAAC,MAAM,SAAS,CAAC;AAyD3D,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,SAAS,CAAC;IAChB,IAAI,EAAE,SAAS,CAAC;IAChB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,UAAU,EAAE,OAAO,CAAC;IACpB,gBAAgB,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAC;CACjD;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,KAAK,CAAC,EACpB,IAAI,EACJ,IAAI,EACJ,UAAU,EACV,UAAU,EACV,gBAAgB,EAChB,SAAiB,EACjB,SAAS,GACV,EAAE,UAAU,+
|
|
1
|
+
{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../src/Toast/Toast.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAiBrC,OAAO,KAAK,EAAC,SAAS,EAAE,kBAAkB,EAAC,MAAM,SAAS,CAAC;AAyD3D,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,SAAS,CAAC;IAChB,IAAI,EAAE,SAAS,CAAC;IAChB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,UAAU,EAAE,OAAO,CAAC;IACpB,gBAAgB,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAC;CACjD;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,KAAK,CAAC,EACpB,IAAI,EACJ,IAAI,EACJ,UAAU,EACV,UAAU,EACV,gBAAgB,EAChB,SAAiB,EACjB,SAAS,GACV,EAAE,UAAU,+BAiHZ;yBAzHe,KAAK"}
|
package/dist/Toast/Toast.js
CHANGED
|
@@ -88,6 +88,20 @@ export function Toast({
|
|
|
88
88
|
}
|
|
89
89
|
};
|
|
90
90
|
}, [autoHideDuration, startTimer]);
|
|
91
|
+
|
|
92
|
+
// Pause the auto-hide timer while the window is not focused, so a toast
|
|
93
|
+
// doesn't silently expire while the user is in another window or tab.
|
|
94
|
+
useEffect(() => {
|
|
95
|
+
if (!isAutoHide) {
|
|
96
|
+
return;
|
|
97
|
+
}
|
|
98
|
+
window.addEventListener('blur', pauseTimer);
|
|
99
|
+
window.addEventListener('focus', resumeTimer);
|
|
100
|
+
return () => {
|
|
101
|
+
window.removeEventListener('blur', pauseTimer);
|
|
102
|
+
window.removeEventListener('focus', resumeTimer);
|
|
103
|
+
};
|
|
104
|
+
}, [isAutoHide, pauseTimer, resumeTimer]);
|
|
91
105
|
const handleDismiss = useCallback(() => {
|
|
92
106
|
onDismiss('manual');
|
|
93
107
|
}, [onDismiss]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToastViewport.d.ts","sourceRoot":"","sources":["../../src/Toast/ToastViewport.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ToastViewport.d.ts","sourceRoot":"","sources":["../../src/Toast/ToastViewport.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAa,aAAa,EAAqB,MAAM,SAAS,CAAC;AA2D3E,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE;QAAC,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAC,CAAC;IACtE;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAsB,EACtB,UAAc,EACd,KAAK,EACL,UAAiB,EACjB,QAAQ,GACT,EAAE,kBAAkB,+BAqSpB;yBA3Se,aAAa"}
|
|
@@ -2,11 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
'use client';
|
|
4
4
|
|
|
5
|
-
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
5
|
+
import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
|
|
6
6
|
import * as stylex from '@stylexjs/stylex';
|
|
7
7
|
import "../theme/tokens.stylex.js";
|
|
8
8
|
import { spacingVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
|
|
9
9
|
import { mergeProps } from "../utils/index.js";
|
|
10
|
+
import { INTERACTIVE_SELECTORS } from "../hooks/useClickableContainer.js";
|
|
10
11
|
import { Toast } from "./Toast.js";
|
|
11
12
|
import { ToastContext } from "./ToastContext.js";
|
|
12
13
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
@@ -74,6 +75,39 @@ export function ToastViewport({
|
|
|
74
75
|
const [exitingIds, setExitingIds] = useState(new Set());
|
|
75
76
|
const toastsRef = useRef(toasts);
|
|
76
77
|
toastsRef.current = toasts;
|
|
78
|
+
|
|
79
|
+
// Show the popover on mount so it enters the top layer.
|
|
80
|
+
const viewportRef = useRef(null);
|
|
81
|
+
// The element that was focused before the user jumped into the viewport
|
|
82
|
+
// (via F6). Used to restore focus once all toasts are dismissed so focus
|
|
83
|
+
// never falls to <body>.
|
|
84
|
+
const prevFocusRef = useRef(null);
|
|
85
|
+
// When a toast is dismissed while focus lives inside it, we need to move
|
|
86
|
+
// focus to a sensible neighbor after that toast unmounts. This holds the
|
|
87
|
+
// id of the toast whose removal should trigger a focus handoff.
|
|
88
|
+
const focusHandoffIdRef = useRef(null);
|
|
89
|
+
// The next toast id that should receive focus once the dismissed toast has
|
|
90
|
+
// unmounted, or 'restore' to fall back to the previously-focused element.
|
|
91
|
+
const pendingFocusRef = useRef(null);
|
|
92
|
+
|
|
93
|
+
// Collect a focusable control within a toast node, if any.
|
|
94
|
+
// Reuses the canonical INTERACTIVE_SELECTORS list (native controls plus
|
|
95
|
+
// role-based interactive elements) instead of a hand-rolled subset, then
|
|
96
|
+
// narrows to the first candidate that can actually receive focus —
|
|
97
|
+
// excluding elements opted out with `tabindex="-1"` and disabled controls.
|
|
98
|
+
const getFocusable = useCallback(container => {
|
|
99
|
+
if (!container) {
|
|
100
|
+
return null;
|
|
101
|
+
}
|
|
102
|
+
const candidates = container.querySelectorAll(INTERACTIVE_SELECTORS);
|
|
103
|
+
for (const candidate of candidates) {
|
|
104
|
+
if (candidate.getAttribute('tabindex') === '-1' || candidate.hasAttribute('disabled') || candidate.getAttribute('aria-disabled') === 'true') {
|
|
105
|
+
continue;
|
|
106
|
+
}
|
|
107
|
+
return candidate;
|
|
108
|
+
}
|
|
109
|
+
return null;
|
|
110
|
+
}, []);
|
|
77
111
|
const addToast = useCallback(entry => {
|
|
78
112
|
setToasts(prev => {
|
|
79
113
|
const {
|
|
@@ -97,6 +131,25 @@ export function ToastViewport({
|
|
|
97
131
|
if (entry) {
|
|
98
132
|
entry.options.onHide?.(reason);
|
|
99
133
|
}
|
|
134
|
+
// If focus currently lives inside the toast being dismissed, remember
|
|
135
|
+
// that its removal must hand focus off to a neighbor (or the element
|
|
136
|
+
// focused before the user entered the viewport) rather than <body>.
|
|
137
|
+
const el = viewportRef.current;
|
|
138
|
+
const active = document.activeElement;
|
|
139
|
+
const dismissedNode = el?.querySelector(`[data-toast-id="${id}"]`) ?? null;
|
|
140
|
+
if (dismissedNode && active instanceof Node && dismissedNode.contains(active)) {
|
|
141
|
+
focusHandoffIdRef.current = id;
|
|
142
|
+
// Pick the neighbor to receive focus while the DOM is still intact:
|
|
143
|
+
// prefer the next toast, then the previous, else restore.
|
|
144
|
+
const remaining = toastsRef.current.filter(t => t.id !== id);
|
|
145
|
+
if (remaining.length > 0) {
|
|
146
|
+
const dismissedIndex = toastsRef.current.findIndex(t => t.id === id);
|
|
147
|
+
const next = toastsRef.current[dismissedIndex + 1] ?? toastsRef.current[dismissedIndex - 1];
|
|
148
|
+
pendingFocusRef.current = next ? next.id : 'restore';
|
|
149
|
+
} else {
|
|
150
|
+
pendingFocusRef.current = 'restore';
|
|
151
|
+
}
|
|
152
|
+
}
|
|
100
153
|
setExitingIds(prev => {
|
|
101
154
|
if (prev.has(id)) {
|
|
102
155
|
return prev;
|
|
@@ -115,6 +168,41 @@ export function ToastViewport({
|
|
|
115
168
|
});
|
|
116
169
|
setToasts(prev => prev.filter(t => t.id !== id));
|
|
117
170
|
}, []);
|
|
171
|
+
|
|
172
|
+
// After a dismissed toast unmounts, hand focus off so it never falls to
|
|
173
|
+
// <body>. Runs in a layout effect once the toast list no longer contains
|
|
174
|
+
// the dismissed toast.
|
|
175
|
+
useLayoutEffect(() => {
|
|
176
|
+
const handoffId = focusHandoffIdRef.current;
|
|
177
|
+
const target = pendingFocusRef.current;
|
|
178
|
+
if (handoffId == null || target == null) {
|
|
179
|
+
return;
|
|
180
|
+
}
|
|
181
|
+
// Wait until the dismissed toast is actually gone from the list.
|
|
182
|
+
if (toasts.some(t => t.id === handoffId)) {
|
|
183
|
+
return;
|
|
184
|
+
}
|
|
185
|
+
focusHandoffIdRef.current = null;
|
|
186
|
+
pendingFocusRef.current = null;
|
|
187
|
+
const el = viewportRef.current;
|
|
188
|
+
if (target !== 'restore' && el) {
|
|
189
|
+
const nextNode = el.querySelector(`[data-toast-id="${target}"]`);
|
|
190
|
+
const focusable = getFocusable(nextNode) ?? nextNode;
|
|
191
|
+
if (focusable) {
|
|
192
|
+
focusable.focus();
|
|
193
|
+
return;
|
|
194
|
+
}
|
|
195
|
+
}
|
|
196
|
+
// No remaining toast to receive focus — restore the previously-focused
|
|
197
|
+
// element if it's still connected, else fall back to the container.
|
|
198
|
+
const prev = prevFocusRef.current;
|
|
199
|
+
prevFocusRef.current = null;
|
|
200
|
+
if (prev && prev.isConnected) {
|
|
201
|
+
prev.focus();
|
|
202
|
+
} else if (el) {
|
|
203
|
+
el.focus();
|
|
204
|
+
}
|
|
205
|
+
}, [toasts, getFocusable]);
|
|
118
206
|
const findByUniqueID = useCallback(uid => {
|
|
119
207
|
return toastsRef.current.find(t => t.options.uniqueID === uid);
|
|
120
208
|
}, []);
|
|
@@ -139,7 +227,6 @@ export function ToastViewport({
|
|
|
139
227
|
}
|
|
140
228
|
|
|
141
229
|
// Show the popover on mount so it enters the top layer
|
|
142
|
-
const viewportRef = useRef(null);
|
|
143
230
|
useEffect(() => {
|
|
144
231
|
if (!isTopLayer) {
|
|
145
232
|
return;
|
|
@@ -153,13 +240,53 @@ export function ToastViewport({
|
|
|
153
240
|
}
|
|
154
241
|
}
|
|
155
242
|
}, [isTopLayer]);
|
|
243
|
+
|
|
244
|
+
// F6 jumps focus into the toast viewport — the standard "go to
|
|
245
|
+
// notifications" affordance. Focus the first control in the newest toast,
|
|
246
|
+
// or the viewport container if none. Toasts are non-modal, so this only
|
|
247
|
+
// moves focus in; Shift+Tab / Escape let focus leave naturally.
|
|
248
|
+
const hasToasts = toasts.length > 0;
|
|
249
|
+
useEffect(() => {
|
|
250
|
+
if (!hasToasts) {
|
|
251
|
+
return;
|
|
252
|
+
}
|
|
253
|
+
const handleKeyDown = e => {
|
|
254
|
+
if (e.key !== 'F6') {
|
|
255
|
+
return;
|
|
256
|
+
}
|
|
257
|
+
const el = viewportRef.current;
|
|
258
|
+
if (!el) {
|
|
259
|
+
return;
|
|
260
|
+
}
|
|
261
|
+
// Already inside the viewport — nothing to do.
|
|
262
|
+
const active = document.activeElement;
|
|
263
|
+
if (active instanceof Node && el.contains(active)) {
|
|
264
|
+
return;
|
|
265
|
+
}
|
|
266
|
+
e.preventDefault();
|
|
267
|
+
// Remember where focus was so it can be restored on dismiss.
|
|
268
|
+
if (active instanceof HTMLElement) {
|
|
269
|
+
prevFocusRef.current = active;
|
|
270
|
+
}
|
|
271
|
+
// Newest toast is the last one rendered in the DOM.
|
|
272
|
+
const toastNodes = el.querySelectorAll('[data-toast-id]');
|
|
273
|
+
const newest = toastNodes[toastNodes.length - 1] ?? null;
|
|
274
|
+
const focusable = getFocusable(newest) ?? newest ?? el;
|
|
275
|
+
focusable.focus();
|
|
276
|
+
};
|
|
277
|
+
document.addEventListener('keydown', handleKeyDown);
|
|
278
|
+
return () => {
|
|
279
|
+
document.removeEventListener('keydown', handleKeyDown);
|
|
280
|
+
};
|
|
281
|
+
}, [hasToasts, getFocusable]);
|
|
156
282
|
const posStyle = position === 'topEnd' ? styles.topEnd : position === 'topStart' ? styles.topStart : position === 'bottomStart' ? styles.bottomStart : styles.bottomEnd;
|
|
157
283
|
return /*#__PURE__*/_jsxs(ToastContext, {
|
|
158
284
|
value: contextValue,
|
|
159
285
|
children: [children, /*#__PURE__*/_jsx("div", {
|
|
160
286
|
ref: viewportRef,
|
|
161
287
|
role: "region",
|
|
162
|
-
"aria-label": "Notifications"
|
|
288
|
+
"aria-label": "Notifications",
|
|
289
|
+
tabIndex: -1
|
|
163
290
|
// popover="manual" promotes to the top layer (above dialogs).
|
|
164
291
|
// Omitted inside dialogs where the viewport is already in a top layer.
|
|
165
292
|
,
|
|
@@ -174,6 +301,7 @@ export function ToastViewport({
|
|
|
174
301
|
const dur = o.autoHideDuration ?? 5000;
|
|
175
302
|
const isExiting = exitingIds.has(entry.id);
|
|
176
303
|
return /*#__PURE__*/_jsx("div", {
|
|
304
|
+
"data-toast-id": entry.id,
|
|
177
305
|
...{
|
|
178
306
|
0: {
|
|
179
307
|
className: "x67bb7w xrvj5dj x1tu4anv xvmdzux xjshnde xuedmi6 xsagj69 xlr8y92 x1sopeo2 x5rzir7"
|
|
@@ -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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"}
|