@astryxdesign/core 0.1.2 → 0.1.3-canary.6d57c8d
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 +2 -4
- 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 +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/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 +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 +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 +11 -8
- 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 +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/index.d.ts +2 -1
- package/dist/Table/index.d.ts.map +1 -1
- package/dist/Table/index.js +2 -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/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 +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 +18 -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.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 +3 -16
- 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 +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/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 +113 -16
- package/src/DateInput/DateInput.doc.mjs +286 -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/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 +30 -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 +26 -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 +6 -0
- 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 +21 -17
- 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 +25 -23
- package/src/Table/TableHeaderCell.tsx +28 -29
- package/src/Table/index.ts +3 -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/tableContextMenu.test.tsx +157 -0
- package/src/Table/tableContextMenu.tsx +142 -0
- package/src/Table/types.ts +74 -0
- package/src/Table/useTableColumnResize.doc.mjs +3 -3
- 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 +340 -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 +141 -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
|
@@ -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"}
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* @file TreeList.tsx
|
|
7
|
-
* @input Uses React, StyleX, theme tokens, TreeListItem, TreeListTypes
|
|
7
|
+
* @input Uses React, StyleX, theme tokens, TreeListItem, TreeListTypes, useTreeFocus
|
|
8
8
|
* @output Exports TreeList component, TreeListProps type
|
|
9
9
|
* @position Core implementation; consumed by index.ts
|
|
10
10
|
*
|
|
@@ -21,6 +21,7 @@ import { spacingVars } from "../theme/tokens.stylex.js";
|
|
|
21
21
|
import { mergeProps } from "../utils/index.js";
|
|
22
22
|
import { TreeListItem } from "./TreeListItem.js";
|
|
23
23
|
import { themeProps } from "../utils/themeProps.js";
|
|
24
|
+
import { useTreeFocus } from "../hooks/useTreeFocus.js";
|
|
24
25
|
|
|
25
26
|
// =============================================================================
|
|
26
27
|
// Types
|
|
@@ -55,6 +56,35 @@ function collectExpandedKeys(items) {
|
|
|
55
56
|
return keys;
|
|
56
57
|
}
|
|
57
58
|
|
|
59
|
+
/**
|
|
60
|
+
* Compute the initial roving-tabindex seed: the first selected enabled item in
|
|
61
|
+
* document order, else the first enabled item, else the first item. The hook
|
|
62
|
+
* (useTreeFocus with hasRovingTabIndex) takes ownership after mount — it
|
|
63
|
+
* preserves this seeded `tabindex="0"` on its repair pass and moves the stop
|
|
64
|
+
* with keyboard navigation.
|
|
65
|
+
*/
|
|
66
|
+
function findInitialTabbableId(items) {
|
|
67
|
+
let firstEnabled;
|
|
68
|
+
const walk = list => {
|
|
69
|
+
for (const item of list) {
|
|
70
|
+
if (item.isSelected && item.isDisabled !== true) {
|
|
71
|
+
return item.id;
|
|
72
|
+
}
|
|
73
|
+
if (firstEnabled == null && item.isDisabled !== true) {
|
|
74
|
+
firstEnabled = item.id;
|
|
75
|
+
}
|
|
76
|
+
if (item.children != null && item.children.length > 0) {
|
|
77
|
+
const selected = walk(item.children);
|
|
78
|
+
if (selected != null) {
|
|
79
|
+
return selected;
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
return undefined;
|
|
84
|
+
};
|
|
85
|
+
return walk(items) ?? firstEnabled ?? items[0]?.id;
|
|
86
|
+
}
|
|
87
|
+
|
|
58
88
|
// =============================================================================
|
|
59
89
|
// Component
|
|
60
90
|
// =============================================================================
|
|
@@ -106,6 +136,40 @@ export function TreeList({
|
|
|
106
136
|
return next;
|
|
107
137
|
});
|
|
108
138
|
}, [expandedKeysFromProps]);
|
|
139
|
+
|
|
140
|
+
// ---------------------------------------------------------------------------
|
|
141
|
+
// Roving tabindex + APG tree keyboard model (via useTreeFocus)
|
|
142
|
+
// ---------------------------------------------------------------------------
|
|
143
|
+
|
|
144
|
+
// The hook (hasRovingTabIndex) owns the tree's single tab stop: it repairs
|
|
145
|
+
// the stop on mount and moves it with keyboard navigation. We only seed the
|
|
146
|
+
// initially-tabbable treeitem in the render (selected item or first enabled);
|
|
147
|
+
// the hook's repair pass preserves that seeded `tabindex="0"`.
|
|
148
|
+
const initialTabbableId = useMemo(() => findInitialTabbableId(items), [items]);
|
|
149
|
+
|
|
150
|
+
// Enter/Space activation: prefer the treeitem's own inner action (link or
|
|
151
|
+
// button); return true when handled so the hook does not also toggle. Scoped
|
|
152
|
+
// to this treeitem's own row — never a descendant treeitem's action inside an
|
|
153
|
+
// expanded group.
|
|
154
|
+
const activateItem = useCallback(current => {
|
|
155
|
+
const candidates = current.querySelectorAll('a[href], button:not([aria-label="Toggle children"])');
|
|
156
|
+
for (const candidate of candidates) {
|
|
157
|
+
if (candidate.closest('[role="treeitem"]') === current) {
|
|
158
|
+
candidate.click();
|
|
159
|
+
return true;
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
return false;
|
|
163
|
+
}, []);
|
|
164
|
+
const {
|
|
165
|
+
treeRef,
|
|
166
|
+
handleKeyDown,
|
|
167
|
+
handleFocus
|
|
168
|
+
} = useTreeFocus({
|
|
169
|
+
onToggleExpand: handleToggle,
|
|
170
|
+
onActivate: activateItem,
|
|
171
|
+
hasRovingTabIndex: true
|
|
172
|
+
});
|
|
109
173
|
function renderItems(items, nestedLevel, ancestorsIsLast) {
|
|
110
174
|
return items.map((item, index) => {
|
|
111
175
|
const isLast = index === items.length - 1;
|
|
@@ -131,7 +195,10 @@ export function TreeList({
|
|
|
131
195
|
isExpanded: isExpanded,
|
|
132
196
|
onToggle: handleToggle,
|
|
133
197
|
density: density,
|
|
134
|
-
renderedChildren: renderedChildren
|
|
198
|
+
renderedChildren: renderedChildren,
|
|
199
|
+
posInSet: index + 1,
|
|
200
|
+
setSize: items.length,
|
|
201
|
+
isTabbable: item.id === initialTabbableId
|
|
135
202
|
}, item.id);
|
|
136
203
|
});
|
|
137
204
|
}
|
|
@@ -148,8 +215,11 @@ export function TreeList({
|
|
|
148
215
|
},
|
|
149
216
|
children: header
|
|
150
217
|
}), /*#__PURE__*/_jsx("ul", {
|
|
218
|
+
ref: treeRef,
|
|
151
219
|
role: "tree",
|
|
152
220
|
"aria-labelledby": header != null ? headerId : undefined,
|
|
221
|
+
onKeyDown: handleKeyDown,
|
|
222
|
+
onFocus: handleFocus,
|
|
153
223
|
...{
|
|
154
224
|
className: "x1ghz6dp x1717udv x3ct3a4"
|
|
155
225
|
},
|
|
@@ -31,8 +31,18 @@ export interface TreeListItemInternalProps {
|
|
|
31
31
|
density: TreeListDensity;
|
|
32
32
|
/** Pre-rendered children subtree (rendered by the parent recursion) */
|
|
33
33
|
renderedChildren?: ReactNode;
|
|
34
|
+
/** 1-based position of this item among its siblings (aria-posinset). */
|
|
35
|
+
posInSet: number;
|
|
36
|
+
/** Number of siblings at this level (aria-setsize). */
|
|
37
|
+
setSize: number;
|
|
38
|
+
/**
|
|
39
|
+
* Whether this treeitem is the initial roving-tabindex seed. Exactly one
|
|
40
|
+
* treeitem is seeded tabbable at mount; useTreeFocus (hasRovingTabIndex)
|
|
41
|
+
* then owns the tab stop dynamically.
|
|
42
|
+
*/
|
|
43
|
+
isTabbable: boolean;
|
|
34
44
|
}
|
|
35
|
-
export declare function TreeListItem({ id, label, description, startContent, endContent, onClick, href, target, isDisabled, isSelected, hasChildren, nestedLevel, isLast, ancestorsIsLast, isExpanded, onToggle, density, renderedChildren, }: TreeListItemInternalProps): import("react").JSX.Element;
|
|
45
|
+
export declare function TreeListItem({ id, label, description, startContent, endContent, onClick, href, target, isDisabled, isSelected, hasChildren, nestedLevel, isLast, ancestorsIsLast, isExpanded, onToggle, density, renderedChildren, posInSet, setSize, isTabbable, }: TreeListItemInternalProps): import("react").JSX.Element;
|
|
36
46
|
export declare namespace TreeListItem {
|
|
37
47
|
var displayName: string;
|
|
38
48
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TreeListItem.d.ts","sourceRoot":"","sources":["../../src/TreeList/TreeListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,EAAiB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAcrD,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"TreeListItem.d.ts","sourceRoot":"","sources":["../../src/TreeList/TreeListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,EAAiB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAcrD,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,iBAAiB,CAAC;AAoNrD,MAAM,WAAW,yBAAyB;IACxC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,eAAe,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACxC,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,OAAO,EAAE,eAAe,CAAC;IACzB,uEAAuE;IACvE,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,wEAAwE;IACxE,QAAQ,EAAE,MAAM,CAAC;IACjB,uDAAuD;IACvD,OAAO,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,UAAU,EAAE,OAAO,CAAC;CACrB;AAMD,wBAAgB,YAAY,CAAC,EAC3B,EAAE,EACF,KAAK,EACL,WAAW,EACX,YAAY,EACZ,UAAU,EACV,OAAO,EACP,IAAI,EACJ,MAAM,EACN,UAAkB,EAClB,UAAkB,EAClB,WAAW,EACX,WAAW,EACX,MAAM,EACN,eAAe,EACf,UAAU,EACV,QAAQ,EACR,OAAO,EACP,gBAAgB,EAChB,QAAQ,EACR,OAAO,EACP,UAAU,GACX,EAAE,yBAAyB,+BA2L3B;yBAjNe,YAAY"}
|
|
@@ -21,6 +21,8 @@ import { getIcon } from "../Icon/globalIconRegistry.js";
|
|
|
21
21
|
import { mergeProps } from "../utils/index.js";
|
|
22
22
|
import { useLinkComponent } from "../Link/useLinkComponent.js";
|
|
23
23
|
import { TreeListBranches } from "./TreeListBranches.js";
|
|
24
|
+
import "./treeListItem.markers.stylex.js";
|
|
25
|
+
import { treeItemScope } from "./treeListItem.markers.stylex.js";
|
|
24
26
|
import { themeProps } from "../utils/themeProps.js";
|
|
25
27
|
|
|
26
28
|
// =============================================================================
|
|
@@ -28,6 +30,15 @@ import { themeProps } from "../utils/themeProps.js";
|
|
|
28
30
|
// =============================================================================
|
|
29
31
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
30
32
|
const styles = {
|
|
33
|
+
wrapper: {
|
|
34
|
+
kH6xsr: "x3ct3a4",
|
|
35
|
+
kogj98: "x1ghz6dp",
|
|
36
|
+
kmVPX3: "x1717udv",
|
|
37
|
+
kVAEAm: "x1n2onr6",
|
|
38
|
+
kzqmXN: "xh8yej3",
|
|
39
|
+
kI3sdo: "x1a2a7pz",
|
|
40
|
+
$$css: true
|
|
41
|
+
},
|
|
31
42
|
contentWrapper: {
|
|
32
43
|
kaIpWk: "xh6dtrn",
|
|
33
44
|
k1xSpc: "x78zum5",
|
|
@@ -50,8 +61,8 @@ const styles = {
|
|
|
50
61
|
$$css: true
|
|
51
62
|
},
|
|
52
63
|
focusVisibleOutline: {
|
|
53
|
-
kI3sdo: "x1a2a7pz x1irc7jg",
|
|
54
|
-
kInvED: "x1wfwxd8 xdjuwb3",
|
|
64
|
+
kI3sdo: "x1a2a7pz xr21g96 x1irc7jg",
|
|
65
|
+
kInvED: "x1wfwxd8 xs4y3kv xdjuwb3",
|
|
55
66
|
$$css: true
|
|
56
67
|
},
|
|
57
68
|
disabled: {
|
|
@@ -133,7 +144,10 @@ export function TreeListItem({
|
|
|
133
144
|
isExpanded,
|
|
134
145
|
onToggle,
|
|
135
146
|
density,
|
|
136
|
-
renderedChildren
|
|
147
|
+
renderedChildren,
|
|
148
|
+
posInSet,
|
|
149
|
+
setSize,
|
|
150
|
+
isTabbable
|
|
137
151
|
}) {
|
|
138
152
|
const labelId = useId();
|
|
139
153
|
const descriptionId = useId();
|
|
@@ -187,13 +201,22 @@ export function TreeListItem({
|
|
|
187
201
|
}[!!isExpanded << 0],
|
|
188
202
|
children: getIcon('chevronRight')
|
|
189
203
|
});
|
|
190
|
-
const chevron = hasChildren ?
|
|
204
|
+
const chevron = hasChildren ? handleToggle != null ?
|
|
191
205
|
/*#__PURE__*/
|
|
192
|
-
//
|
|
206
|
+
// Real toggle button whenever expand/collapse is supported, so the row
|
|
207
|
+
// can be expanded from the keyboard even when the item has no onClick/href
|
|
208
|
+
// (row-level onClick is the only click path in that case, but there is no
|
|
209
|
+
// focusable element to receive Enter/Space). The row's handleClick ignores
|
|
210
|
+
// clicks originating inside a <button>, so this never double-toggles.
|
|
193
211
|
_jsx("button", {
|
|
194
212
|
type: "button",
|
|
195
213
|
"aria-expanded": isExpanded,
|
|
196
214
|
"aria-label": "Toggle children",
|
|
215
|
+
disabled: isDisabled
|
|
216
|
+
// Roving tabindex lives on the treeitem row; the chevron toggle is not
|
|
217
|
+
// a separate tab stop. Row-level Enter/Space forwards to this button.
|
|
218
|
+
,
|
|
219
|
+
tabIndex: -1,
|
|
197
220
|
onClick: handleToggle,
|
|
198
221
|
...{
|
|
199
222
|
className: "x78zum5 x6s0dn4 xl56j7k x12xnipv x6b6gus xho7bvi x1ypdohk xv9yike xx3sua9 x11g1kdw xmequkd"
|
|
@@ -201,7 +224,7 @@ export function TreeListItem({
|
|
|
201
224
|
children: chevronIcon
|
|
202
225
|
}) :
|
|
203
226
|
/*#__PURE__*/
|
|
204
|
-
// Non-interactive chevron when
|
|
227
|
+
// Non-interactive chevron only when toggling is not wired up at all
|
|
205
228
|
_jsx("span", {
|
|
206
229
|
...{
|
|
207
230
|
className: "x2lah0s x78zum5 x6s0dn4 xl56j7k x12xnipv x6b6gus xho7bvi x1ypdohk x1717udv xv9yike xx3sua9 x11g1kdw xmequkd"
|
|
@@ -219,8 +242,11 @@ export function TreeListItem({
|
|
|
219
242
|
target: target,
|
|
220
243
|
"aria-disabled": isDisabled || undefined,
|
|
221
244
|
"aria-labelledby": labelId,
|
|
222
|
-
"aria-describedby": description != null ? descriptionId : undefined
|
|
223
|
-
|
|
245
|
+
"aria-describedby": description != null ? descriptionId : undefined
|
|
246
|
+
// Roving tabindex lives on the treeitem row; inner action is not a
|
|
247
|
+
// separate tab stop. Activation is forwarded from the row.
|
|
248
|
+
,
|
|
249
|
+
tabIndex: -1,
|
|
224
250
|
...{
|
|
225
251
|
className: "xmper1u xln7xf2 x1heor9g x78zum5 xdt5ytf x98rzlu xeuugli x1yc453h x1hl2dhg x1a2a7pz"
|
|
226
252
|
},
|
|
@@ -230,7 +256,11 @@ export function TreeListItem({
|
|
|
230
256
|
onClick: onClick,
|
|
231
257
|
disabled: isDisabled,
|
|
232
258
|
"aria-labelledby": labelId,
|
|
233
|
-
"aria-describedby": description != null ? descriptionId : undefined
|
|
259
|
+
"aria-describedby": description != null ? descriptionId : undefined
|
|
260
|
+
// Roving tabindex lives on the treeitem row; inner action is not a
|
|
261
|
+
// separate tab stop. Activation is forwarded from the row.
|
|
262
|
+
,
|
|
263
|
+
tabIndex: -1,
|
|
234
264
|
...{
|
|
235
265
|
className: "xmper1u xln7xf2 x1heor9g x78zum5 xdt5ytf x98rzlu xeuugli x1yc453h x1a2a7pz"
|
|
236
266
|
},
|
|
@@ -252,9 +282,18 @@ export function TreeListItem({
|
|
|
252
282
|
"aria-expanded": hasChildren ? isExpanded : undefined,
|
|
253
283
|
"aria-selected": isSelected || undefined,
|
|
254
284
|
"aria-disabled": isDisabled || undefined,
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
285
|
+
"aria-level": nestedLevel + 1,
|
|
286
|
+
"aria-posinset": posInSet,
|
|
287
|
+
"aria-setsize": setSize
|
|
288
|
+
// Roving tabindex: exactly one visible treeitem is tabbable at a time.
|
|
289
|
+
// Disabled items are skipped by the tree keyboard handler but remain
|
|
290
|
+
// in the accessibility tree.
|
|
291
|
+
,
|
|
292
|
+
tabIndex: isDisabled ? -1 : isTabbable ? 0 : -1,
|
|
293
|
+
"data-tree-id": id,
|
|
294
|
+
"data-tree-level": nestedLevel + 1,
|
|
295
|
+
"data-tree-disabled": isDisabled || undefined,
|
|
296
|
+
...stylex.props(styles.wrapper, treeItemScope),
|
|
258
297
|
children: [/*#__PURE__*/_jsx("div", {
|
|
259
298
|
...{
|
|
260
299
|
className: "x12gdq22"
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @file treeListItem.markers.stylex.ts
|
|
3
|
+
* @input Uses StyleX defineMarker
|
|
4
|
+
* @output Exports treeItemScope marker
|
|
5
|
+
* @position Scoped marker; consumed by TreeListItem.tsx
|
|
6
|
+
*
|
|
7
|
+
* SYNC: When modified, update /packages/core/src/TreeList/TreeListItem.tsx
|
|
8
|
+
*/
|
|
9
|
+
import * as stylex from '@stylexjs/stylex';
|
|
10
|
+
/**
|
|
11
|
+
* Scoped marker placed on each treeitem row (`<li role="treeitem">`).
|
|
12
|
+
* Binds the row's `:focus-visible` outline to its OWN treeitem, so focusing
|
|
13
|
+
* a parent treeitem does not leak the focus ring onto descendant rows.
|
|
14
|
+
*/
|
|
15
|
+
export declare const treeItemScope: ReturnType<typeof stylex.defineMarker>;
|
|
16
|
+
//# sourceMappingURL=treeListItem.markers.stylex.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"treeListItem.markers.stylex.d.ts","sourceRoot":"","sources":["../../src/TreeList/treeListItem.markers.stylex.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAE3C;;;;GAIG;AACH,eAAO,MAAM,aAAa,EAAE,UAAU,CAAC,OAAO,MAAM,CAAC,YAAY,CAC1C,CAAC"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* @file treeListItem.markers.stylex.ts
|
|
5
|
+
* @input Uses StyleX defineMarker
|
|
6
|
+
* @output Exports treeItemScope marker
|
|
7
|
+
* @position Scoped marker; consumed by TreeListItem.tsx
|
|
8
|
+
*
|
|
9
|
+
* SYNC: When modified, update /packages/core/src/TreeList/TreeListItem.tsx
|
|
10
|
+
*/
|
|
11
|
+
|
|
12
|
+
import * as stylex from '@stylexjs/stylex';
|
|
13
|
+
|
|
14
|
+
/**
|
|
15
|
+
* Scoped marker placed on each treeitem row (`<li role="treeitem">`).
|
|
16
|
+
* Binds the row's `:focus-visible` outline to its OWN treeitem, so focusing
|
|
17
|
+
* a parent treeitem does not leak the focus ring onto descendant rows.
|
|
18
|
+
*/
|
|
19
|
+
export const treeItemScope = {
|
|
20
|
+
x1g2q90y: "x1g2q90y",
|
|
21
|
+
$$css: true
|
|
22
|
+
};
|
|
@@ -58,6 +58,15 @@ export interface BaseTypeaheadProps<T extends SearchableItem> extends Omit<BaseP
|
|
|
58
58
|
* @default false
|
|
59
59
|
*/
|
|
60
60
|
isDisabled?: boolean;
|
|
61
|
+
/**
|
|
62
|
+
* When disabled with a reason, keeps the input focusable via `aria-disabled`
|
|
63
|
+
* (instead of the native `disabled` attribute) and `readOnly` so an
|
|
64
|
+
* associated disabled-reason tooltip stays discoverable by keyboard and
|
|
65
|
+
* assistive technology. Value mutation is still blocked by the `isDisabled`
|
|
66
|
+
* guards. Consumers (Typeahead) own the tooltip and wrapper.
|
|
67
|
+
* @default false
|
|
68
|
+
*/
|
|
69
|
+
isFocusableDisabled?: boolean;
|
|
61
70
|
/**
|
|
62
71
|
* Auto-focus on mount.
|
|
63
72
|
* @default false
|
|
@@ -85,6 +94,10 @@ export interface BaseTypeaheadProps<T extends SearchableItem> extends Omit<BaseP
|
|
|
85
94
|
* Additional aria-describedby IDs.
|
|
86
95
|
*/
|
|
87
96
|
ariaDescribedBy?: string;
|
|
97
|
+
/**
|
|
98
|
+
* Additional aria-labelledby IDs.
|
|
99
|
+
*/
|
|
100
|
+
ariaLabelledBy?: string;
|
|
88
101
|
/**
|
|
89
102
|
* Additional StyleX styles for the input element.
|
|
90
103
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseTypeahead.d.ts","sourceRoot":"","sources":["../../src/Typeahead/BaseTypeahead.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,EAMZ,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"BaseTypeahead.d.ts","sourceRoot":"","sources":["../../src/Typeahead/BaseTypeahead.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,EAMZ,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AAcnD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,cAAc,EAAE,YAAY,EAAC,MAAM,SAAS,CAAC;AAO1D,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,cAAc,CAAE,SAAQ,IAAI,CACxE,SAAS,CAAC,WAAW,CAAC,EACtB,UAAU,CACX;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAE9B;;OAEG;IACH,KAAK,EAAE,CAAC,GAAG,IAAI,CAAC;IAEhB;;OAEG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IAEnC;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,SAAS,CAAC;IAEpC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAEhC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;;;OAOG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,YAAY,CAAC;IAE3B;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAE1C;;;OAGG;IACH,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAE/D;;;;OAIG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B;AAuGD;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,aAAa,EAwgBrB,CAAC,CAAC,SAAS,cAAc,EAC5B,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC,KACzB,KAAK,CAAC,YAAY,CAAC"}
|
|
@@ -19,6 +19,7 @@
|
|
|
19
19
|
import React, { useCallback, useEffect, useId, useRef, useState } from 'react';
|
|
20
20
|
import * as stylex from '@stylexjs/stylex';
|
|
21
21
|
import { usePopover } from "../Popover/usePopover.js";
|
|
22
|
+
import { useAnnounce } from "../hooks/useAnnounce.js";
|
|
22
23
|
import { TypeaheadItem } from "./TypeaheadItem.js";
|
|
23
24
|
import { Icon } from "../Icon/index.js";
|
|
24
25
|
import "../theme/tokens.stylex.js";
|
|
@@ -141,11 +142,13 @@ export const BaseTypeahead = function BaseTypeahead({
|
|
|
141
142
|
maxMenuItems = 10,
|
|
142
143
|
emptySearchResultsText = 'No results found',
|
|
143
144
|
isDisabled = false,
|
|
145
|
+
isFocusableDisabled = false,
|
|
144
146
|
hasAutoFocus = false,
|
|
145
147
|
onChangeQuery,
|
|
146
148
|
onOpenChange,
|
|
147
149
|
inputId: externalInputId,
|
|
148
150
|
ariaDescribedBy,
|
|
151
|
+
ariaLabelledBy,
|
|
149
152
|
inputXStyle,
|
|
150
153
|
anchorRef,
|
|
151
154
|
onKeyDown: externalOnKeyDown,
|
|
@@ -158,6 +161,11 @@ export const BaseTypeahead = function BaseTypeahead({
|
|
|
158
161
|
const listboxId = useId();
|
|
159
162
|
const inputRef = useRef(null);
|
|
160
163
|
const fallbackAnchorRef = useRef(null);
|
|
164
|
+
|
|
165
|
+
// Announce result counts / "no results" to screen readers via a persistent
|
|
166
|
+
// live region (comboboxes-6). The combobox's own popup carries no working
|
|
167
|
+
// live region, so highlight/result changes were previously silent.
|
|
168
|
+
const announce = useAnnounce();
|
|
161
169
|
const [query, setQuery] = useState('');
|
|
162
170
|
const [results, setResults] = useState([]);
|
|
163
171
|
const [highlightedIndex, setHighlightedIndex] = useState(-1);
|
|
@@ -197,7 +205,10 @@ export const BaseTypeahead = function BaseTypeahead({
|
|
|
197
205
|
onHide: handleLayerHide,
|
|
198
206
|
hasLightDismiss: true,
|
|
199
207
|
hasCloseButton: false,
|
|
200
|
-
hasAutoFocus: false
|
|
208
|
+
hasAutoFocus: false,
|
|
209
|
+
// The popup's own role="listbox" is the exposed semantics; the input keeps
|
|
210
|
+
// DOM focus, so wrapping it in a modal dialog would misrepresent it.
|
|
211
|
+
role: 'none'
|
|
201
212
|
});
|
|
202
213
|
|
|
203
214
|
// Show the layer, deferring past the active click if a pointer is down.
|
|
@@ -236,11 +247,17 @@ export const BaseTypeahead = function BaseTypeahead({
|
|
|
236
247
|
return;
|
|
237
248
|
}
|
|
238
249
|
resultsGenRef.current = gen;
|
|
239
|
-
|
|
250
|
+
const shown = searchResults.slice(0, maxMenuItems);
|
|
251
|
+
setResults(shown);
|
|
240
252
|
setHighlightedIndex(searchResults.length > 0 ? 0 : -1);
|
|
241
253
|
if (searchResults.length > 0 || searchQuery.length > 0) {
|
|
242
254
|
showLayer();
|
|
243
255
|
}
|
|
256
|
+
// Announce the outcome only for an active query (not the initial
|
|
257
|
+
// focus-open), so screen-reader users hear result counts / no-results.
|
|
258
|
+
if (searchQuery.length > 0) {
|
|
259
|
+
announce(shown.length === 0 ? emptySearchResultsText : `${shown.length} ${shown.length === 1 ? 'result' : 'results'}`);
|
|
260
|
+
}
|
|
244
261
|
} catch {
|
|
245
262
|
if (searchGenRef.current !== gen) {
|
|
246
263
|
return;
|
|
@@ -252,7 +269,7 @@ export const BaseTypeahead = function BaseTypeahead({
|
|
|
252
269
|
setIsLoading(false);
|
|
253
270
|
}
|
|
254
271
|
}
|
|
255
|
-
}, [searchSource, maxMenuItems, showLayer]);
|
|
272
|
+
}, [searchSource, maxMenuItems, showLayer, announce, emptySearchResultsText]);
|
|
256
273
|
|
|
257
274
|
// Perform bootstrap
|
|
258
275
|
const performBootstrap = useCallback(async () => {
|
|
@@ -293,6 +310,8 @@ export const BaseTypeahead = function BaseTypeahead({
|
|
|
293
310
|
searchSource.cancel?.();
|
|
294
311
|
setResults([]);
|
|
295
312
|
setHasSearched(false);
|
|
313
|
+
// Clear any lingering result-count / no-results announcement.
|
|
314
|
+
announce('');
|
|
296
315
|
popover.hide();
|
|
297
316
|
return;
|
|
298
317
|
}
|
|
@@ -308,7 +327,7 @@ export const BaseTypeahead = function BaseTypeahead({
|
|
|
308
327
|
} else {
|
|
309
328
|
searchTimeoutRef.current = setTimeout(triggerSearch, debounceMs);
|
|
310
329
|
}
|
|
311
|
-
}, [onChangeQuery, hasEntriesOnFocus, performSearch, performBootstrap, popover, debounceMs, searchSource]);
|
|
330
|
+
}, [onChangeQuery, hasEntriesOnFocus, performSearch, performBootstrap, popover, debounceMs, searchSource, announce]);
|
|
312
331
|
|
|
313
332
|
// Handle input change
|
|
314
333
|
const handleInputChange = useCallback(e => {
|
|
@@ -348,6 +367,29 @@ export const BaseTypeahead = function BaseTypeahead({
|
|
|
348
367
|
}
|
|
349
368
|
}, [isDisabled, hasEntriesOnFocus, results.length, query.length, performBootstrap, showLayer]);
|
|
350
369
|
|
|
370
|
+
// Handle blur — close the dropdown when focus leaves the input for an
|
|
371
|
+
// element that is neither inside the field wrapper (anchor) nor inside the
|
|
372
|
+
// dropdown popover. The native popover="auto" light-dismiss only fires on
|
|
373
|
+
// outside pointer clicks and Escape; it does not close when focus moves away
|
|
374
|
+
// via the keyboard (Tab) or programmatically, which would otherwise leave an
|
|
375
|
+
// orphaned open menu. Clicking a result moves focus onto the option (it is
|
|
376
|
+
// tabIndex={-1}, so it lives inside the popover) and selection re-focuses the
|
|
377
|
+
// input, so this only closes on a genuine focus-out of the whole field.
|
|
378
|
+
const handleBlur = useCallback(e => {
|
|
379
|
+
if (!popover.isOpen) {
|
|
380
|
+
return;
|
|
381
|
+
}
|
|
382
|
+
const next = e.relatedTarget;
|
|
383
|
+
if (next) {
|
|
384
|
+
const anchorEl = anchorRef?.current ?? fallbackAnchorRef.current;
|
|
385
|
+
const popoverEl = document.getElementById(popover.id);
|
|
386
|
+
if (anchorEl?.contains(next) || popoverEl?.contains(next)) {
|
|
387
|
+
return;
|
|
388
|
+
}
|
|
389
|
+
}
|
|
390
|
+
popover.hide();
|
|
391
|
+
}, [popover, anchorRef]);
|
|
392
|
+
|
|
351
393
|
// Keyboard navigation
|
|
352
394
|
const handleKeyDown = useCallback(e => {
|
|
353
395
|
externalOnKeyDown?.(e);
|
|
@@ -402,6 +444,19 @@ export const BaseTypeahead = function BaseTypeahead({
|
|
|
402
444
|
|
|
403
445
|
// Generate item ID for accessibility
|
|
404
446
|
const getItemId = useCallback(index => `${listboxId}-option-${index}`, [listboxId]);
|
|
447
|
+
|
|
448
|
+
// Keep the highlighted option visible during keyboard navigation. The
|
|
449
|
+
// listbox is a fixed-height scroll container, so without this the virtual
|
|
450
|
+
// cursor walks off-screen once navigation passes the visible window. Mirrors
|
|
451
|
+
// CommandPaletteItem's scrollIntoView({block: 'nearest'}) behavior.
|
|
452
|
+
useEffect(() => {
|
|
453
|
+
if (!popover.isOpen || highlightedIndex < 0) {
|
|
454
|
+
return;
|
|
455
|
+
}
|
|
456
|
+
document.getElementById(getItemId(highlightedIndex))?.scrollIntoView?.({
|
|
457
|
+
block: 'nearest'
|
|
458
|
+
});
|
|
459
|
+
}, [popover.isOpen, highlightedIndex, getItemId]);
|
|
405
460
|
const selectedKey = value == null ? null : getKey(value.id, () => results.indexOf(value));
|
|
406
461
|
|
|
407
462
|
// Cleanup timeout and cancel in-flight searches on unmount
|
|
@@ -424,6 +479,8 @@ export const BaseTypeahead = function BaseTypeahead({
|
|
|
424
479
|
"aria-activedescendant": popover.isOpen && highlightedIndex >= 0 ? getItemId(highlightedIndex) : undefined,
|
|
425
480
|
"aria-autocomplete": "list",
|
|
426
481
|
"aria-describedby": ariaDescribedBy,
|
|
482
|
+
"aria-labelledby": ariaLabelledBy,
|
|
483
|
+
"aria-disabled": isFocusableDisabled ? 'true' : undefined,
|
|
427
484
|
value: query,
|
|
428
485
|
onChange: handleInputChange,
|
|
429
486
|
onPointerDown: () => {
|
|
@@ -435,9 +492,15 @@ export const BaseTypeahead = function BaseTypeahead({
|
|
|
435
492
|
});
|
|
436
493
|
},
|
|
437
494
|
onFocus: handleFocus,
|
|
495
|
+
onBlur: handleBlur,
|
|
438
496
|
onKeyDown: handleKeyDown,
|
|
439
|
-
placeholder: placeholder
|
|
440
|
-
disabled
|
|
497
|
+
placeholder: placeholder
|
|
498
|
+
// When a disabled-reason tooltip is shown the input keeps focusability
|
|
499
|
+
// via aria-disabled + readOnly instead of the native disabled
|
|
500
|
+
// attribute; value mutation stays blocked by the isDisabled guards.
|
|
501
|
+
,
|
|
502
|
+
disabled: isDisabled && !isFocusableDisabled,
|
|
503
|
+
readOnly: isFocusableDisabled || undefined,
|
|
441
504
|
autoFocus: hasAutoFocus,
|
|
442
505
|
"data-autofocus": hasAutoFocus || undefined,
|
|
443
506
|
autoComplete: "off",
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @file Typeahead.tsx
|
|
3
|
-
* @input Uses React, BaseTypeahead, Field, Token
|
|
3
|
+
* @input Uses React, BaseTypeahead, Field, Token, InputGroupContext
|
|
4
4
|
* @output Exports Typeahead styled typeahead component
|
|
5
|
-
* @position Styled wrapper; composes BaseTypeahead with Field
|
|
5
|
+
* @position Styled wrapper; composes BaseTypeahead with Field or InputGroup
|
|
6
6
|
*
|
|
7
7
|
* Owns the input wrapper (border, padding, status styles), selected value
|
|
8
8
|
* token with spacing compensation, and edit mode behavior. Delegates
|
|
@@ -66,6 +66,29 @@ export interface TypeaheadProps<T extends SearchableItem> extends Omit<BaseProps
|
|
|
66
66
|
emptySearchResultsText?: string;
|
|
67
67
|
/** Whether the input is disabled. @default false */
|
|
68
68
|
isDisabled?: boolean;
|
|
69
|
+
/**
|
|
70
|
+
* Explains why the input is disabled. When set together with `isDisabled`,
|
|
71
|
+
* the input shows a tooltip with this text on hover and keyboard focus, and
|
|
72
|
+
* the field stays focusable (via `aria-disabled`) so the reason is
|
|
73
|
+
* discoverable by keyboard and assistive technology. Editing and selection
|
|
74
|
+
* stay blocked.
|
|
75
|
+
*
|
|
76
|
+
* Use this instead of wrapping a disabled input in `Tooltip` — disabled
|
|
77
|
+
* controls don't emit the pointer events an external tooltip needs.
|
|
78
|
+
*
|
|
79
|
+
* @example
|
|
80
|
+
* ```
|
|
81
|
+
* <Typeahead
|
|
82
|
+
* label="Assignee"
|
|
83
|
+
* searchSource={userSource}
|
|
84
|
+
* value={assignee}
|
|
85
|
+
* onChange={setAssignee}
|
|
86
|
+
* isDisabled
|
|
87
|
+
* disabledMessage="You need the Editor role to change this"
|
|
88
|
+
* />
|
|
89
|
+
* ```
|
|
90
|
+
*/
|
|
91
|
+
disabledMessage?: string;
|
|
69
92
|
/** Show clear button. @default true */
|
|
70
93
|
hasClear?: boolean;
|
|
71
94
|
/** Auto-focus on mount. @default false */
|
|
@@ -104,7 +127,7 @@ export interface TypeaheadProps<T extends SearchableItem> extends Omit<BaseProps
|
|
|
104
127
|
* />
|
|
105
128
|
* ```
|
|
106
129
|
*/
|
|
107
|
-
export declare function Typeahead<T extends SearchableItem>({ ref, label, isLabelHidden, description, isRequired, isOptional, status, startIcon, labelTooltip, searchSource, value, onChange, renderItem, placeholder, hasEntriesOnFocus, maxMenuItems, emptySearchResultsText, isDisabled, hasClear, hasAutoFocus, size: sizeProp, debounceMs, onChangeQuery, onOpenChange, width, xstyle, className, style, 'data-testid': testId, }: TypeaheadProps<T>): React.JSX.Element;
|
|
130
|
+
export declare function Typeahead<T extends SearchableItem>({ ref, label, isLabelHidden, description, isRequired, isOptional, status, startIcon, labelTooltip, searchSource, value, onChange, renderItem, placeholder, hasEntriesOnFocus, maxMenuItems, emptySearchResultsText, isDisabled, disabledMessage, hasClear, hasAutoFocus, size: sizeProp, debounceMs, onChangeQuery, onOpenChange, width, xstyle, className, style, 'data-testid': testId, }: TypeaheadProps<T>): React.JSX.Element;
|
|
108
131
|
export declare namespace Typeahead {
|
|
109
132
|
var displayName: string;
|
|
110
133
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Typeahead.d.ts","sourceRoot":"","sources":["../../src/Typeahead/Typeahead.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,EAKZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,EAGL,KAAK,WAAW,EAKjB,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"Typeahead.d.ts","sourceRoot":"","sources":["../../src/Typeahead/Typeahead.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,EAKZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,EAGL,KAAK,WAAW,EAKjB,MAAM,UAAU,CAAC;AAGlB,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAMtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAC9C,OAAO,KAAK,EAAC,cAAc,EAAE,YAAY,EAAC,MAAM,SAAS,CAAC;AAG1D,YAAY,EACV,WAAW,IAAI,eAAe,EAC9B,eAAe,IAAI,mBAAmB,GACvC,MAAM,UAAU,CAAC;AAElB,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE/C,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,cAAc,CAAE,SAAQ,IAAI,CACpE,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,CACX;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,8CAA8C;IAC9C,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qCAAqC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qCAAqC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yBAAyB;IACzB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACjC;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,qBAAqB;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qCAAqC;IACrC,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAC9B,yDAAyD;IACzD,KAAK,EAAE,CAAC,GAAG,IAAI,CAAC;IAChB,uCAAuC;IACvC,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IACnC,kEAAkE;IAClE,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,SAAS,CAAC;IACpC,wBAAwB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0DAA0D;IAC1D,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,sCAAsC;IACtC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oEAAoE;IACpE,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gCAAgC;IAChC,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,6BAA6B;IAC7B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,2CAA2C;IAC3C,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C;AAoDD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,SAAS,CAAC,CAAC,SAAS,cAAc,EAAE,EAClD,GAAG,EACH,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,UAAkB,EAClB,UAAkB,EAClB,MAAM,EACN,SAAS,EACT,YAAY,EACZ,YAAY,EACZ,KAAK,EACL,QAAQ,EACR,UAAU,EACV,WAAW,EACX,iBAAiB,EACjB,YAAY,EACZ,sBAAsB,EACtB,UAAkB,EAClB,eAAe,EACf,QAAe,EACf,YAAY,EACZ,IAAI,EAAE,QAAQ,EACd,UAAU,EACV,aAAa,EACb,YAAY,EACZ,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,GACtB,EAAE,cAAc,CAAC,CAAC,CAAC,qBAkQnB;yBAjSe,SAAS"}
|