@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
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../src/DateInput/DateInput.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAU3C,OAAO,EAEL,KAAK,WAAW,EAMjB,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../src/DateInput/DateInput.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAU3C,OAAO,EAEL,KAAK,WAAW,EAMjB,MAAM,UAAU,CAAC;AAOlB,OAAO,EAAW,KAAK,aAAa,EAAsB,MAAM,aAAa,CAAC;AA6D9E,QAAA,MAAM,UAAU;;;;;;;;;;;;;EAad,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,UAAU,CAAC;AAIpD,YAAY,EACV,WAAW,IAAI,eAAe,EAC9B,eAAe,IAAI,mBAAmB,GACvC,MAAM,UAAU,CAAC;AAElB,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAG9C,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,SAAS,EACT,UAAU,GAAG,cAAc,CAC5B;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,GAAG,SAAS,KAAK,IAAI,CAAC;IAEtD;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,GAAG,SAAS,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAE1E;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,GAAG,CAAC,EAAE,aAAa,CAAC;IAEpB;;OAEG;IACH,GAAG,CAAC,EAAE,aAAa,CAAC;IAEpB;;OAEG;IACH,eAAe,CAAC,EAAE,aAAa,CAAC,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC;IAEzD;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IAErB;;;;OAIG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IAErB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;CACxB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,eAAe,EACf,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,SAAiB,EACjB,GAAG,EACH,GAAG,EACH,eAAe,EACf,WAA6B,EAC7B,IAAI,EAAE,QAAQ,EACd,MAAM,EACN,YAAY,EACZ,QAAgB,EAChB,cAAkB,EAClB,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,cAAc,+BAqXhB;yBAhZe,SAAS"}
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* @file DateInput.tsx
|
|
7
|
-
* @input Uses React, useId, useState, useCallback, useRef, Field, Icon, Calendar, usePopover
|
|
7
|
+
* @input Uses React, useId, useState, useCallback, useRef, Field, Icon, Calendar, usePopover, InputGroupContext
|
|
8
8
|
* @output Exports DateInput component, DateInputProps
|
|
9
9
|
* @position Core implementation; consumed by index.ts, tested by DateInput.test.tsx
|
|
10
10
|
*
|
|
@@ -21,11 +21,16 @@ import "../theme/tokens.stylex.js";
|
|
|
21
21
|
import { colorVars, sizeVars, radiusVars, typographyVars, typeScaleVars, borderVars } from "../theme/tokens.stylex.js";
|
|
22
22
|
import { Field, inputWrapperStyles, inputStatusBorderStyles, inputStatusHoverShadowStyles, inputStatusFocusWithinStyles } from "../Field/index.js";
|
|
23
23
|
import { Icon } from "../Icon/index.js";
|
|
24
|
+
import { VisuallyHidden } from "../VisuallyHidden/index.js";
|
|
25
|
+
import { useInputGroup } from "../InputGroup/InputGroupContext.js";
|
|
26
|
+
import { groupStyles } from "../InputGroup/groupStyles.js";
|
|
27
|
+
import { useSize } from "../SizeContext/SizeContext.js";
|
|
24
28
|
import { Spinner } from "../Spinner/index.js";
|
|
25
29
|
import { Calendar } from "../Calendar/index.js";
|
|
26
30
|
import { useCalendarConstraints } from "../Calendar/hooks/index.js";
|
|
27
31
|
import { usePopover } from "../Popover/index.js";
|
|
28
|
-
import {
|
|
32
|
+
import { useTooltip } from "../Tooltip/index.js";
|
|
33
|
+
import { getInputARIA, parseDateInput } from "../utils/index.js";
|
|
29
34
|
import { plainDateFromISO, plainDateToISO, plainDateFormat, DATE_FORMAT_LONG } from "../utils/plainDate.js";
|
|
30
35
|
const sizeStyles = {
|
|
31
36
|
sm: {
|
|
@@ -69,6 +74,7 @@ export function DateInput({
|
|
|
69
74
|
isOptional = false,
|
|
70
75
|
isRequired = false,
|
|
71
76
|
isDisabled = false,
|
|
77
|
+
disabledMessage,
|
|
72
78
|
value,
|
|
73
79
|
onChange,
|
|
74
80
|
changeAction,
|
|
@@ -77,7 +83,7 @@ export function DateInput({
|
|
|
77
83
|
max,
|
|
78
84
|
dateConstraints,
|
|
79
85
|
placeholder = 'Select a date',
|
|
80
|
-
size
|
|
86
|
+
size: sizeProp,
|
|
81
87
|
status,
|
|
82
88
|
labelTooltip,
|
|
83
89
|
hasClear = false,
|
|
@@ -89,17 +95,36 @@ export function DateInput({
|
|
|
89
95
|
ref,
|
|
90
96
|
...rest
|
|
91
97
|
}) {
|
|
98
|
+
const size = useSize(sizeProp, 'md');
|
|
92
99
|
const id = useId();
|
|
100
|
+
const inputLabelID = useId();
|
|
93
101
|
const descriptionID = useId();
|
|
94
102
|
const statusMessageID = useId();
|
|
95
103
|
const inputRef = useRef(null);
|
|
96
104
|
const calendarRef = useRef(null);
|
|
97
105
|
const lastFiredValueRef = useRef(undefined);
|
|
106
|
+
const inputGroup = useInputGroup();
|
|
98
107
|
const [, startTransition] = useTransition();
|
|
99
108
|
const [optimisticValue, setOptimisticValue] = useOptimistic(value);
|
|
100
109
|
const isBusy = isLoading || optimisticValue !== value;
|
|
101
110
|
const isEffectivelyDisabled = isDisabled || isBusy;
|
|
102
111
|
|
|
112
|
+
// Disabled-reason tooltip. Disabled controls swallow pointer events, so the
|
|
113
|
+
// tooltip listeners attach to the input container (which already exists) and
|
|
114
|
+
// the text input stays perceivable via aria-disabled instead of the disabled
|
|
115
|
+
// attribute. Typing is blocked with readOnly and value mutation guards;
|
|
116
|
+
// calendar activation is blocked by the isEffectivelyDisabled guards. Only
|
|
117
|
+
// the persistent isDisabled state (not the transient busy state) surfaces a
|
|
118
|
+
// reason.
|
|
119
|
+
const showsDisabledMessage = isDisabled && !!disabledMessage;
|
|
120
|
+
const disabledMessageTooltip = useTooltip({
|
|
121
|
+
placement: 'above',
|
|
122
|
+
// The container div is not naturally focusable; focusin bubbles up from
|
|
123
|
+
// the input, so always attach focus listeners.
|
|
124
|
+
focusTrigger: 'always',
|
|
125
|
+
isEnabled: showsDisabledMessage
|
|
126
|
+
});
|
|
127
|
+
|
|
103
128
|
// Status icon mapping
|
|
104
129
|
const statusIconMap = {
|
|
105
130
|
warning: 'warning',
|
|
@@ -120,7 +145,10 @@ export function DateInput({
|
|
|
120
145
|
max,
|
|
121
146
|
dateConstraints
|
|
122
147
|
});
|
|
123
|
-
const
|
|
148
|
+
const {
|
|
149
|
+
ariaLabelledBy,
|
|
150
|
+
ariaDescribedBy
|
|
151
|
+
} = getInputARIA(inputLabelID, [description ? descriptionID : null, status?.message ? statusMessageID : null, showsDisabledMessage ? disabledMessageTooltip.describedBy : null], inputGroup);
|
|
124
152
|
|
|
125
153
|
// Pending input while user is typing (null = show formatted value)
|
|
126
154
|
const [pendingInput, setPendingInput] = useState(null);
|
|
@@ -198,6 +226,11 @@ export function DateInput({
|
|
|
198
226
|
|
|
199
227
|
// Handle input text change - update immediately if valid and allowed
|
|
200
228
|
const handleInputChange = useCallback(e => {
|
|
229
|
+
// With a disabledMessage the input drops `disabled` for focusability, so
|
|
230
|
+
// guard value mutation explicitly (readOnly also blocks typing).
|
|
231
|
+
if (isEffectivelyDisabled) {
|
|
232
|
+
return;
|
|
233
|
+
}
|
|
201
234
|
const newValue = e.target.value;
|
|
202
235
|
setPendingInput(newValue);
|
|
203
236
|
|
|
@@ -210,7 +243,7 @@ export function DateInput({
|
|
|
210
243
|
// Navigate calendar to show the parsed date's month
|
|
211
244
|
calendarRef.current?.navigateTo(parsedISO);
|
|
212
245
|
}
|
|
213
|
-
}, [value, fireChange, isDateDisabled]);
|
|
246
|
+
}, [value, fireChange, isDateDisabled, isEffectivelyDisabled]);
|
|
214
247
|
|
|
215
248
|
// Commit pending input (shared by blur and Enter key)
|
|
216
249
|
const commitPendingInput = useCallback(() => {
|
|
@@ -244,12 +277,138 @@ export function DateInput({
|
|
|
244
277
|
if (e.key === 'Escape' && popover.isOpen) {
|
|
245
278
|
e.preventDefault();
|
|
246
279
|
popover.hide();
|
|
280
|
+
} else if ((e.key === 'ArrowDown' || e.altKey && e.key === 'ArrowDown') && !popover.isOpen) {
|
|
281
|
+
// APG combobox: ArrowDown (and Alt+ArrowDown) opens the calendar
|
|
282
|
+
// popover from the keyboard, keeping focus in the input (forms-13).
|
|
283
|
+
e.preventDefault();
|
|
284
|
+
if (!isEffectivelyDisabled) {
|
|
285
|
+
popover.show({
|
|
286
|
+
skipAutoFocus: true
|
|
287
|
+
});
|
|
288
|
+
}
|
|
247
289
|
} else if (e.key === 'Enter') {
|
|
248
290
|
e.preventDefault();
|
|
249
291
|
commitPendingInput();
|
|
250
292
|
}
|
|
251
|
-
}, [popover, commitPendingInput]);
|
|
252
|
-
|
|
293
|
+
}, [popover, commitPendingInput, isEffectivelyDisabled]);
|
|
294
|
+
const inputWrapper = /*#__PURE__*/_jsxs("div", {
|
|
295
|
+
ref: el => {
|
|
296
|
+
popover.triggerRef(el);
|
|
297
|
+
// Anchor + hover/focus listeners for the disabled-message tooltip.
|
|
298
|
+
// Handlers are gated internally by isEnabled, and anchor names
|
|
299
|
+
// compose, so attaching unconditionally is safe.
|
|
300
|
+
disabledMessageTooltip.ref(el);
|
|
301
|
+
},
|
|
302
|
+
...rest,
|
|
303
|
+
...mergeProps(themeProps('date-input', {
|
|
304
|
+
size,
|
|
305
|
+
status: status?.type ?? null
|
|
306
|
+
}), stylex.props(inputWrapperStyles.base, sizeStyles[size], isEffectivelyDisabled && inputWrapperStyles.disabled, status && inputStatusBorderStyles[status.type], status && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type], inputGroup && groupStyles.inGroup, xstyle), className, style),
|
|
307
|
+
children: [inputGroup && /*#__PURE__*/_jsx(VisuallyHidden, {
|
|
308
|
+
id: inputLabelID,
|
|
309
|
+
children: label
|
|
310
|
+
}), /*#__PURE__*/_jsx("button", {
|
|
311
|
+
type: "button",
|
|
312
|
+
onClick: handleToggle,
|
|
313
|
+
disabled: isEffectivelyDisabled,
|
|
314
|
+
"aria-label": popover.isOpen ? 'Close calendar' : 'Open calendar',
|
|
315
|
+
...{
|
|
316
|
+
0: {
|
|
317
|
+
className: "x78zum5 x6s0dn4 xl56j7k x1717udv x1ghz6dp xc342km xng3xce xjbqb8w x1ypdohk xh6dtrn x1a2a7pz x1p25gnr x1y3gkto"
|
|
318
|
+
},
|
|
319
|
+
1: {
|
|
320
|
+
className: "x78zum5 x6s0dn4 xl56j7k x1717udv x1ghz6dp xc342km xng3xce xjbqb8w xh6dtrn x1a2a7pz x1p25gnr x1y3gkto x1h6gzvc"
|
|
321
|
+
}
|
|
322
|
+
}[!!isEffectivelyDisabled << 0],
|
|
323
|
+
children: /*#__PURE__*/_jsx(Icon, {
|
|
324
|
+
icon: "calendar",
|
|
325
|
+
size: "sm",
|
|
326
|
+
color: "secondary"
|
|
327
|
+
})
|
|
328
|
+
}), /*#__PURE__*/_jsx("input", {
|
|
329
|
+
ref: mergeRefs(ref, inputRef),
|
|
330
|
+
id: id,
|
|
331
|
+
type: "text",
|
|
332
|
+
role: "combobox",
|
|
333
|
+
value: displayValue,
|
|
334
|
+
onChange: handleInputChange,
|
|
335
|
+
onBlur: handleBlur,
|
|
336
|
+
onClick: handleInputClick,
|
|
337
|
+
onKeyDown: handleInputKeyDown,
|
|
338
|
+
placeholder: placeholder
|
|
339
|
+
// With a disabledMessage the input keeps focusability via
|
|
340
|
+
// aria-disabled so the reason is focus-discoverable; typing is
|
|
341
|
+
// blocked with readOnly and the mutation guards, and calendar
|
|
342
|
+
// activation is blocked by the isEffectivelyDisabled guards.
|
|
343
|
+
,
|
|
344
|
+
disabled: isEffectivelyDisabled && !showsDisabledMessage,
|
|
345
|
+
"aria-disabled": showsDisabledMessage ? 'true' : undefined,
|
|
346
|
+
readOnly: showsDisabledMessage || undefined,
|
|
347
|
+
"aria-labelledby": ariaLabelledBy,
|
|
348
|
+
"aria-describedby": ariaDescribedBy,
|
|
349
|
+
"aria-required": isRequired === true ? 'true' : undefined,
|
|
350
|
+
"aria-invalid": status?.type === 'error' || !isInputValid ? 'true' : undefined,
|
|
351
|
+
"aria-busy": isBusy || undefined,
|
|
352
|
+
"aria-expanded": popover.isOpen,
|
|
353
|
+
"aria-haspopup": "dialog",
|
|
354
|
+
"aria-controls": popover.isOpen ? popover.id : undefined,
|
|
355
|
+
"aria-autocomplete": "none",
|
|
356
|
+
autoComplete: "off",
|
|
357
|
+
...{
|
|
358
|
+
0: {
|
|
359
|
+
className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx x1tgivj0 xjbqb8w x1a2a7pz xeyghm5"
|
|
360
|
+
},
|
|
361
|
+
2: {
|
|
362
|
+
className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx x1tgivj0 xjbqb8w x1a2a7pz xeyghm5 x1h6gzvc"
|
|
363
|
+
},
|
|
364
|
+
1: {
|
|
365
|
+
className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx xjbqb8w x1a2a7pz xeyghm5 xv1l7n4"
|
|
366
|
+
},
|
|
367
|
+
3: {
|
|
368
|
+
className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx xjbqb8w x1a2a7pz xeyghm5 x1h6gzvc xv1l7n4"
|
|
369
|
+
}
|
|
370
|
+
}[!!isEffectivelyDisabled << 1 | !!!isInputValid << 0]
|
|
371
|
+
}), /*#__PURE__*/_jsx(VisuallyHidden, {
|
|
372
|
+
as: "div",
|
|
373
|
+
role: "alert",
|
|
374
|
+
"aria-live": "assertive",
|
|
375
|
+
children: !isInputValid ? 'Invalid date' : ''
|
|
376
|
+
}), hasClear && value !== undefined && !isEffectivelyDisabled && /*#__PURE__*/_jsx("button", {
|
|
377
|
+
type: "button",
|
|
378
|
+
onClick: handleClear,
|
|
379
|
+
"aria-label": `Clear ${label}`,
|
|
380
|
+
...{
|
|
381
|
+
className: "x78zum5 x6s0dn4 xl56j7k x1717udv x1ghz6dp xc342km xng3xce xjbqb8w x1ypdohk xh6dtrn x1a2a7pz x1p25gnr x1y3gkto"
|
|
382
|
+
},
|
|
383
|
+
children: /*#__PURE__*/_jsx(Icon, {
|
|
384
|
+
icon: "close",
|
|
385
|
+
size: "sm",
|
|
386
|
+
color: "secondary"
|
|
387
|
+
})
|
|
388
|
+
}), isBusy && /*#__PURE__*/_jsx(Spinner, {
|
|
389
|
+
size: "sm"
|
|
390
|
+
}), status && !inputGroup && /*#__PURE__*/_jsx(Icon, {
|
|
391
|
+
icon: statusIconMap[status.type],
|
|
392
|
+
size: "md",
|
|
393
|
+
color: statusIconColorMap[status.type]
|
|
394
|
+
}), popover.render(/*#__PURE__*/_jsx(Calendar, {
|
|
395
|
+
handleRef: calendarRef,
|
|
396
|
+
mode: "single",
|
|
397
|
+
value: optimisticValue,
|
|
398
|
+
onChange: handleDateSelect,
|
|
399
|
+
min: min,
|
|
400
|
+
max: max,
|
|
401
|
+
dateConstraints: dateConstraints,
|
|
402
|
+
numberOfMonths: numberOfMonths
|
|
403
|
+
}), {
|
|
404
|
+
placement: 'below',
|
|
405
|
+
alignment: 'start'
|
|
406
|
+
}), showsDisabledMessage && disabledMessageTooltip.renderTooltip(disabledMessage)]
|
|
407
|
+
});
|
|
408
|
+
if (inputGroup) {
|
|
409
|
+
return inputWrapper;
|
|
410
|
+
}
|
|
411
|
+
return /*#__PURE__*/_jsx(Field, {
|
|
253
412
|
label: label,
|
|
254
413
|
isLabelHidden: isLabelHidden,
|
|
255
414
|
description: description,
|
|
@@ -265,98 +424,7 @@ export function DateInput({
|
|
|
265
424
|
} : undefined,
|
|
266
425
|
labelTooltip: labelTooltip,
|
|
267
426
|
width: width,
|
|
268
|
-
children:
|
|
269
|
-
ref: popover.triggerRef,
|
|
270
|
-
...rest,
|
|
271
|
-
...mergeProps(themeProps('date-input', {
|
|
272
|
-
size,
|
|
273
|
-
status: status?.type ?? null
|
|
274
|
-
}), stylex.props(inputWrapperStyles.base, sizeStyles[size], isEffectivelyDisabled && inputWrapperStyles.disabled, status && inputStatusBorderStyles[status.type], status && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type], xstyle), className, style),
|
|
275
|
-
children: [/*#__PURE__*/_jsx("button", {
|
|
276
|
-
type: "button",
|
|
277
|
-
onClick: handleToggle,
|
|
278
|
-
disabled: isEffectivelyDisabled,
|
|
279
|
-
"aria-label": popover.isOpen ? 'Close calendar' : 'Open calendar',
|
|
280
|
-
...{
|
|
281
|
-
0: {
|
|
282
|
-
className: "x78zum5 x6s0dn4 xl56j7k x1717udv x1ghz6dp xc342km xng3xce xjbqb8w x1ypdohk xh6dtrn x1a2a7pz x1p25gnr x1y3gkto"
|
|
283
|
-
},
|
|
284
|
-
1: {
|
|
285
|
-
className: "x78zum5 x6s0dn4 xl56j7k x1717udv x1ghz6dp xc342km xng3xce xjbqb8w xh6dtrn x1a2a7pz x1p25gnr x1y3gkto x1h6gzvc"
|
|
286
|
-
}
|
|
287
|
-
}[!!isEffectivelyDisabled << 0],
|
|
288
|
-
children: /*#__PURE__*/_jsx(Icon, {
|
|
289
|
-
icon: "calendar",
|
|
290
|
-
size: "sm",
|
|
291
|
-
color: "secondary"
|
|
292
|
-
})
|
|
293
|
-
}), /*#__PURE__*/_jsx("input", {
|
|
294
|
-
ref: mergeRefs(ref, inputRef),
|
|
295
|
-
id: id,
|
|
296
|
-
type: "text",
|
|
297
|
-
role: "combobox",
|
|
298
|
-
value: displayValue,
|
|
299
|
-
onChange: handleInputChange,
|
|
300
|
-
onBlur: handleBlur,
|
|
301
|
-
onClick: handleInputClick,
|
|
302
|
-
onKeyDown: handleInputKeyDown,
|
|
303
|
-
placeholder: placeholder,
|
|
304
|
-
disabled: isEffectivelyDisabled,
|
|
305
|
-
"aria-describedby": ariaDescribedBy,
|
|
306
|
-
"aria-required": isRequired === true ? 'true' : undefined,
|
|
307
|
-
"aria-invalid": status?.type === 'error' ? 'true' : undefined,
|
|
308
|
-
"aria-busy": isBusy || undefined,
|
|
309
|
-
"aria-expanded": popover.isOpen,
|
|
310
|
-
"aria-haspopup": "dialog",
|
|
311
|
-
"aria-controls": popover.isOpen ? popover.id : undefined,
|
|
312
|
-
"aria-autocomplete": "none",
|
|
313
|
-
autoComplete: "off",
|
|
314
|
-
...{
|
|
315
|
-
0: {
|
|
316
|
-
className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx x1tgivj0 xjbqb8w x1a2a7pz xeyghm5"
|
|
317
|
-
},
|
|
318
|
-
2: {
|
|
319
|
-
className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx x1tgivj0 xjbqb8w x1a2a7pz xeyghm5 x1h6gzvc"
|
|
320
|
-
},
|
|
321
|
-
1: {
|
|
322
|
-
className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx xjbqb8w x1a2a7pz xeyghm5 xv1l7n4"
|
|
323
|
-
},
|
|
324
|
-
3: {
|
|
325
|
-
className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx xjbqb8w x1a2a7pz xeyghm5 x1h6gzvc xv1l7n4"
|
|
326
|
-
}
|
|
327
|
-
}[!!isEffectivelyDisabled << 1 | !!!isInputValid << 0]
|
|
328
|
-
}), hasClear && value !== undefined && !isEffectivelyDisabled && /*#__PURE__*/_jsx("button", {
|
|
329
|
-
type: "button",
|
|
330
|
-
onClick: handleClear,
|
|
331
|
-
"aria-label": `Clear ${label}`,
|
|
332
|
-
...{
|
|
333
|
-
className: "x78zum5 x6s0dn4 xl56j7k x1717udv x1ghz6dp xc342km xng3xce xjbqb8w x1ypdohk xh6dtrn x1a2a7pz x1p25gnr x1y3gkto"
|
|
334
|
-
},
|
|
335
|
-
children: /*#__PURE__*/_jsx(Icon, {
|
|
336
|
-
icon: "close",
|
|
337
|
-
size: "sm",
|
|
338
|
-
color: "secondary"
|
|
339
|
-
})
|
|
340
|
-
}), isBusy && /*#__PURE__*/_jsx(Spinner, {
|
|
341
|
-
size: "sm"
|
|
342
|
-
}), status && /*#__PURE__*/_jsx(Icon, {
|
|
343
|
-
icon: statusIconMap[status.type],
|
|
344
|
-
size: "md",
|
|
345
|
-
color: statusIconColorMap[status.type]
|
|
346
|
-
})]
|
|
347
|
-
}), popover.render(/*#__PURE__*/_jsx(Calendar, {
|
|
348
|
-
handleRef: calendarRef,
|
|
349
|
-
mode: "single",
|
|
350
|
-
value: optimisticValue,
|
|
351
|
-
onChange: handleDateSelect,
|
|
352
|
-
min: min,
|
|
353
|
-
max: max,
|
|
354
|
-
dateConstraints: dateConstraints,
|
|
355
|
-
numberOfMonths: numberOfMonths
|
|
356
|
-
}), {
|
|
357
|
-
placement: 'below',
|
|
358
|
-
alignment: 'start'
|
|
359
|
-
})]
|
|
427
|
+
children: inputWrapper
|
|
360
428
|
});
|
|
361
429
|
}
|
|
362
430
|
DateInput.displayName = 'DateInput';
|
|
@@ -40,6 +40,28 @@ export interface DateRangeInputProps extends Omit<BaseProps, 'onChange' | 'defau
|
|
|
40
40
|
* @default false
|
|
41
41
|
*/
|
|
42
42
|
isDisabled?: boolean;
|
|
43
|
+
/**
|
|
44
|
+
* Explains why the input is disabled. When set together with
|
|
45
|
+
* `isDisabled`, the input shows a tooltip with this text on hover and
|
|
46
|
+
* keyboard focus, and the trigger stays focusable (via `aria-disabled`)
|
|
47
|
+
* so the reason is discoverable by keyboard and assistive technology.
|
|
48
|
+
* Activation stays blocked.
|
|
49
|
+
*
|
|
50
|
+
* Use this instead of wrapping a disabled input in `Tooltip` — disabled
|
|
51
|
+
* controls don't emit the pointer events an external tooltip needs.
|
|
52
|
+
*
|
|
53
|
+
* @example
|
|
54
|
+
* ```
|
|
55
|
+
* <DateRangeInput
|
|
56
|
+
* label="Reporting period"
|
|
57
|
+
* value={range}
|
|
58
|
+
* onChange={setRange}
|
|
59
|
+
* isDisabled
|
|
60
|
+
* disabledMessage="You need the Editor role to change this"
|
|
61
|
+
* />
|
|
62
|
+
* ```
|
|
63
|
+
*/
|
|
64
|
+
disabledMessage?: string;
|
|
43
65
|
/**
|
|
44
66
|
* The selected date range, or null if no range is selected.
|
|
45
67
|
*/
|
|
@@ -126,7 +148,7 @@ export interface DateRangeInputProps extends Omit<BaseProps, 'onChange' | 'defau
|
|
|
126
148
|
* />
|
|
127
149
|
* ```
|
|
128
150
|
*/
|
|
129
|
-
export declare function DateRangeInput({ label, isLabelHidden, description, isOptional, isRequired, isDisabled, value, onChange, changeAction, isLoading, min, max, dateConstraints, presets, hasClear, placeholder, size: sizeProp, status, labelTooltip, numberOfMonths, width, xstyle, className, style, ref, ...rest }: DateRangeInputProps): import("react").JSX.Element;
|
|
151
|
+
export declare function DateRangeInput({ label, isLabelHidden, description, isOptional, isRequired, isDisabled, disabledMessage, value, onChange, changeAction, isLoading, min, max, dateConstraints, presets, hasClear, placeholder, size: sizeProp, status, labelTooltip, numberOfMonths, width, xstyle, className, style, ref, ...rest }: DateRangeInputProps): import("react").JSX.Element;
|
|
130
152
|
export declare namespace DateRangeInput {
|
|
131
153
|
var displayName: string;
|
|
132
154
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateRangeInput.d.ts","sourceRoot":"","sources":["../../src/DateRangeInput/DateRangeInput.tsx"],"names":[],"mappings":"AAqCA,OAAO,EAEL,KAAK,WAAW,EAMjB,MAAM,UAAU,CAAC;AAGlB,OAAO,EAAW,KAAK,aAAa,EAAE,KAAK,SAAS,EAAC,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"DateRangeInput.d.ts","sourceRoot":"","sources":["../../src/DateRangeInput/DateRangeInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -25,6 +25,7 @@ import { Icon } from "../Icon/index.js";
|
|
|
25
25
|
import { Spinner } from "../Spinner/index.js";
|
|
26
26
|
import { Calendar } from "../Calendar/index.js";
|
|
27
27
|
import { usePopover } from "../Popover/index.js";
|
|
28
|
+
import { useTooltip } from "../Tooltip/index.js";
|
|
28
29
|
import { mergeProps } from "../utils/index.js";
|
|
29
30
|
import { useSize } from "../SizeContext/SizeContext.js";
|
|
30
31
|
import { themeProps } from "../utils/themeProps.js";
|
|
@@ -89,6 +90,7 @@ export function DateRangeInput({
|
|
|
89
90
|
isOptional = false,
|
|
90
91
|
isRequired = false,
|
|
91
92
|
isDisabled = false,
|
|
93
|
+
disabledMessage,
|
|
92
94
|
value,
|
|
93
95
|
onChange,
|
|
94
96
|
changeAction,
|
|
@@ -118,6 +120,21 @@ export function DateRangeInput({
|
|
|
118
120
|
const [optimisticValue, setOptimisticValue] = useOptimistic(value);
|
|
119
121
|
const isBusy = isLoading || optimisticValue !== value;
|
|
120
122
|
const isEffectivelyDisabled = isDisabled || isBusy;
|
|
123
|
+
|
|
124
|
+
// Disabled-reason tooltip. Disabled controls swallow pointer events, so the
|
|
125
|
+
// tooltip listeners attach to the trigger container (which already exists)
|
|
126
|
+
// and the trigger button stays perceivable via aria-disabled instead of the
|
|
127
|
+
// disabled attribute. Activation is blocked by the isEffectivelyDisabled
|
|
128
|
+
// guard in handleToggle. Only the persistent isDisabled state (not the
|
|
129
|
+
// transient busy state) surfaces a reason.
|
|
130
|
+
const showsDisabledMessage = isDisabled && !!disabledMessage;
|
|
131
|
+
const disabledMessageTooltip = useTooltip({
|
|
132
|
+
placement: 'above',
|
|
133
|
+
// The container div is not naturally focusable; focusin bubbles up from
|
|
134
|
+
// the trigger button, so always attach focus listeners.
|
|
135
|
+
focusTrigger: 'always',
|
|
136
|
+
isEnabled: showsDisabledMessage
|
|
137
|
+
});
|
|
121
138
|
const statusIconMap = {
|
|
122
139
|
warning: 'warning',
|
|
123
140
|
error: 'error',
|
|
@@ -128,7 +145,7 @@ export function DateRangeInput({
|
|
|
128
145
|
error: 'error',
|
|
129
146
|
success: 'success'
|
|
130
147
|
};
|
|
131
|
-
const ariaDescribedBy = [description ? descriptionID : null, status?.message ? statusMessageID : null].filter(Boolean).join(' ') || undefined;
|
|
148
|
+
const ariaDescribedBy = [description ? descriptionID : null, status?.message ? statusMessageID : null, showsDisabledMessage ? disabledMessageTooltip.describedBy : null].filter(Boolean).join(' ') || undefined;
|
|
132
149
|
const displayValue = useMemo(() => formatRangeDisplay(optimisticValue), [optimisticValue]);
|
|
133
150
|
const popover = usePopover({
|
|
134
151
|
dialogLabel: 'Choose date range',
|
|
@@ -185,7 +202,13 @@ export function DateRangeInput({
|
|
|
185
202
|
labelTooltip: labelTooltip,
|
|
186
203
|
width: width,
|
|
187
204
|
children: [/*#__PURE__*/_jsxs("div", {
|
|
188
|
-
ref:
|
|
205
|
+
ref: el => {
|
|
206
|
+
popover.triggerRef(el);
|
|
207
|
+
// Anchor + hover/focus listeners for the disabled-message tooltip.
|
|
208
|
+
// Handlers are gated internally by isEnabled, and anchor names
|
|
209
|
+
// compose, so attaching unconditionally is safe.
|
|
210
|
+
disabledMessageTooltip.ref(el);
|
|
211
|
+
},
|
|
189
212
|
...rest,
|
|
190
213
|
...mergeProps(themeProps('date-range-input', {
|
|
191
214
|
size,
|
|
@@ -214,8 +237,13 @@ export function DateRangeInput({
|
|
|
214
237
|
ref: ref,
|
|
215
238
|
id: id,
|
|
216
239
|
type: "button",
|
|
217
|
-
onClick: handleToggle
|
|
218
|
-
|
|
240
|
+
onClick: handleToggle
|
|
241
|
+
// With a disabledMessage the trigger keeps focusability via
|
|
242
|
+
// aria-disabled so the reason is focus-discoverable; activation is
|
|
243
|
+
// still blocked by the isEffectivelyDisabled guard in handleToggle.
|
|
244
|
+
,
|
|
245
|
+
disabled: isEffectivelyDisabled && !showsDisabledMessage,
|
|
246
|
+
"aria-disabled": showsDisabledMessage ? 'true' : undefined,
|
|
219
247
|
"aria-label": triggerAriaLabel,
|
|
220
248
|
"aria-describedby": ariaDescribedBy,
|
|
221
249
|
"aria-required": isRequired === true ? 'true' : undefined,
|
|
@@ -263,7 +291,7 @@ export function DateRangeInput({
|
|
|
263
291
|
className: "x78zum5"
|
|
264
292
|
},
|
|
265
293
|
children: [presets && presets.length > 0 && /*#__PURE__*/_jsx("div", {
|
|
266
|
-
role: "
|
|
294
|
+
role: "group",
|
|
267
295
|
"aria-label": "Preset date ranges",
|
|
268
296
|
...{
|
|
269
297
|
className: "x78zum5 xdt5ytf xzye2dw x1b2ylru x1pcaw5z x32b0ac xdz7fjg x1d77m7x"
|
|
@@ -272,9 +300,14 @@ export function DateRangeInput({
|
|
|
272
300
|
const presetRange = preset.getRange();
|
|
273
301
|
const isActive = isRangeEqual(value, presetRange);
|
|
274
302
|
return /*#__PURE__*/_jsx("button", {
|
|
275
|
-
type: "button"
|
|
276
|
-
|
|
277
|
-
|
|
303
|
+
type: "button"
|
|
304
|
+
// These presets are independent action buttons navigated by
|
|
305
|
+
// Tab, not a single-tab-stop listbox — so they are a labeled
|
|
306
|
+
// group of buttons, and the currently-applied preset is
|
|
307
|
+
// marked with aria-current (not aria-selected, a listbox
|
|
308
|
+
// concept that contradicted the Tab interaction) (forms-5).
|
|
309
|
+
,
|
|
310
|
+
"aria-current": isActive ? 'true' : undefined,
|
|
278
311
|
onClick: () => handlePresetClick(preset),
|
|
279
312
|
...{
|
|
280
313
|
0: {
|
|
@@ -299,7 +332,7 @@ export function DateRangeInput({
|
|
|
299
332
|
}), {
|
|
300
333
|
placement: 'below',
|
|
301
334
|
alignment: 'start'
|
|
302
|
-
})]
|
|
335
|
+
}), showsDisabledMessage && disabledMessageTooltip.renderTooltip(disabledMessage)]
|
|
303
336
|
});
|
|
304
337
|
}
|
|
305
338
|
DateRangeInput.displayName = 'DateRangeInput';
|
|
@@ -39,6 +39,28 @@ export interface DateTimeInputProps extends Omit<BaseProps, 'onChange' | 'defaul
|
|
|
39
39
|
* @default false
|
|
40
40
|
*/
|
|
41
41
|
isDisabled?: boolean;
|
|
42
|
+
/**
|
|
43
|
+
* Explains why the input is disabled. When set together with
|
|
44
|
+
* `isDisabled`, the input shows a tooltip with this text on hover and
|
|
45
|
+
* keyboard focus, and the date and time fields stay focusable (via
|
|
46
|
+
* `aria-disabled`) so the reason is discoverable by keyboard and assistive
|
|
47
|
+
* technology. Typing and calendar activation stay blocked.
|
|
48
|
+
*
|
|
49
|
+
* Use this instead of wrapping a disabled input in `Tooltip` — disabled
|
|
50
|
+
* controls don't emit the pointer events an external tooltip needs.
|
|
51
|
+
*
|
|
52
|
+
* @example
|
|
53
|
+
* ```
|
|
54
|
+
* <DateTimeInput
|
|
55
|
+
* label="Meeting time"
|
|
56
|
+
* value={dateTime}
|
|
57
|
+
* onChange={setDateTime}
|
|
58
|
+
* isDisabled
|
|
59
|
+
* disabledMessage="You need the Editor role to change this"
|
|
60
|
+
* />
|
|
61
|
+
* ```
|
|
62
|
+
*/
|
|
63
|
+
disabledMessage?: string;
|
|
42
64
|
/**
|
|
43
65
|
* The selected datetime in ISO 8601 format ("YYYY-MM-DDTHH:MM" or "YYYY-MM-DDTHH:MM:SS").
|
|
44
66
|
*/
|
|
@@ -93,10 +115,21 @@ export interface DateTimeInputProps extends Omit<BaseProps, 'onChange' | 'defaul
|
|
|
93
115
|
*/
|
|
94
116
|
hasClear?: boolean;
|
|
95
117
|
/**
|
|
96
|
-
* Placeholder text shown when no date is selected.
|
|
118
|
+
* Placeholder text shown in the date portion when no date is selected.
|
|
97
119
|
* @default "Select a date"
|
|
98
120
|
*/
|
|
99
121
|
placeholder?: string;
|
|
122
|
+
/**
|
|
123
|
+
* Placeholder text shown in the time portion when no time is selected.
|
|
124
|
+
* @default "Select a time"
|
|
125
|
+
*/
|
|
126
|
+
timePlaceholder?: string;
|
|
127
|
+
/**
|
|
128
|
+
* Accessible label for the time portion of the field. Defaults to
|
|
129
|
+
* `"{label} time"` so it is tied to the field's own label and localizable,
|
|
130
|
+
* rather than a hardcoded English "Time".
|
|
131
|
+
*/
|
|
132
|
+
timeLabel?: string;
|
|
100
133
|
/**
|
|
101
134
|
* The size of the inputs.
|
|
102
135
|
* @default 'md'
|
|
@@ -140,7 +173,7 @@ export interface DateTimeInputProps extends Omit<BaseProps, 'onChange' | 'defaul
|
|
|
140
173
|
* />
|
|
141
174
|
* ```
|
|
142
175
|
*/
|
|
143
|
-
export declare function DateTimeInput({ label, isLabelHidden, description, isOptional, isRequired, isDisabled, value, onChange, changeAction, isLoading, min, max, dateConstraints, hasSeconds, hourFormat, timeIncrement, hasClear, placeholder, size: sizeProp, status, labelTooltip, numberOfMonths, width, xstyle, className, style, ref, ...rest }: DateTimeInputProps): import("react").JSX.Element;
|
|
176
|
+
export declare function DateTimeInput({ label, isLabelHidden, description, isOptional, isRequired, isDisabled, disabledMessage, value, onChange, changeAction, isLoading, min, max, dateConstraints, hasSeconds, hourFormat, timeIncrement, hasClear, placeholder, timePlaceholder, timeLabel, size: sizeProp, status, labelTooltip, numberOfMonths, width, xstyle, className, style, ref, ...rest }: DateTimeInputProps): import("react").JSX.Element;
|
|
144
177
|
export declare namespace DateTimeInput {
|
|
145
178
|
var displayName: string;
|
|
146
179
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateTimeInput.d.ts","sourceRoot":"","sources":["../../src/DateTimeInput/DateTimeInput.tsx"],"names":[],"mappings":"AAuCA,OAAO,EAEL,KAAK,WAAW,EAMjB,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"DateTimeInput.d.ts","sourceRoot":"","sources":["../../src/DateTimeInput/DateTimeInput.tsx"],"names":[],"mappings":"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"}
|