@astryxdesign/core 0.3.0 → 0.4.0
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 +156 -0
- package/dist/AlertDialog/AlertDialog.d.ts +10 -2
- package/dist/AlertDialog/AlertDialog.d.ts.map +1 -1
- package/dist/AlertDialog/AlertDialog.js +22 -3
- package/dist/AppShell/AppShell.d.ts +2 -2
- package/dist/AppShell/AppShell.d.ts.map +1 -1
- package/dist/AppShell/AppShell.js +40 -9
- package/dist/AspectRatio/AspectRatio.d.ts +13 -0
- package/dist/AspectRatio/AspectRatio.d.ts.map +1 -1
- package/dist/AspectRatio/AspectRatio.js +9 -0
- package/dist/Avatar/Avatar.d.ts.map +1 -1
- package/dist/Avatar/Avatar.js +33 -20
- package/dist/AvatarGroup/AvatarGroupOverflow.d.ts.map +1 -1
- package/dist/AvatarGroup/AvatarGroupOverflow.js +2 -3
- package/dist/Banner/Banner.d.ts.map +1 -1
- package/dist/Banner/Banner.js +15 -14
- package/dist/Breadcrumbs/BreadcrumbItem.d.ts.map +1 -1
- package/dist/Breadcrumbs/BreadcrumbItem.js +21 -8
- package/dist/Breadcrumbs/index.d.ts +2 -1
- package/dist/Breadcrumbs/index.d.ts.map +1 -1
- package/dist/Breadcrumbs/index.js +1 -0
- package/dist/Button/Button.d.ts.map +1 -1
- package/dist/Button/Button.js +11 -15
- package/dist/Calendar/Calendar.d.ts.map +1 -1
- package/dist/Calendar/Calendar.js +2 -1
- package/dist/Calendar/styles.d.ts +0 -2
- package/dist/Calendar/styles.d.ts.map +1 -1
- package/dist/Calendar/styles.js +0 -2
- package/dist/Carousel/Carousel.d.ts.map +1 -1
- package/dist/Carousel/Carousel.js +8 -12
- package/dist/Chat/ChatDictationButton.d.ts.map +1 -1
- package/dist/Chat/ChatDictationButton.js +2 -1
- package/dist/Chat/ChatLayoutScrollButton.d.ts.map +1 -1
- package/dist/Chat/ChatLayoutScrollButton.js +3 -1
- package/dist/Chat/ChatSendButton.d.ts.map +1 -1
- package/dist/Chat/ChatSendButton.js +4 -3
- package/dist/Chat/ChatToolCalls.d.ts.map +1 -1
- package/dist/Chat/ChatToolCalls.js +17 -17
- package/dist/Chat/useTriggerMenu.d.ts.map +1 -1
- package/dist/Chat/useTriggerMenu.js +2 -6
- package/dist/CheckboxInput/CheckboxInput.d.ts.map +1 -1
- package/dist/CheckboxInput/CheckboxInput.js +36 -125
- package/dist/ClickableCard/ClickableCard.d.ts.map +1 -1
- package/dist/ClickableCard/ClickableCard.js +3 -11
- package/dist/CodeBlock/CodeBlock.d.ts.map +1 -1
- package/dist/CodeBlock/CodeBlock.js +84 -67
- package/dist/Collapsible/Collapsible.d.ts.map +1 -1
- package/dist/Collapsible/Collapsible.js +35 -15
- package/dist/CommandPalette/CommandPaletteItem.d.ts +1 -1
- package/dist/CommandPalette/CommandPaletteItem.d.ts.map +1 -1
- package/dist/CommandPalette/CommandPaletteItem.js +6 -3
- package/dist/CommandPalette/CommandPaletteList.js +1 -1
- package/dist/ComplexSelector/ComplexSelector.d.ts +1 -1
- package/dist/ComplexSelector/ComplexSelector.d.ts.map +1 -1
- package/dist/ComplexSelector/ComplexSelector.js +35 -33
- package/dist/ContextMenu/ContextMenu.d.ts +2 -2
- package/dist/ContextMenu/ContextMenu.d.ts.map +1 -1
- package/dist/ContextMenu/ContextMenu.js +1 -1
- package/dist/ContextMenu/index.d.ts +2 -1
- package/dist/ContextMenu/index.d.ts.map +1 -1
- package/dist/ContextMenu/index.js +1 -0
- package/dist/DateInput/DateInput.d.ts +9 -2
- package/dist/DateInput/DateInput.d.ts.map +1 -1
- package/dist/DateInput/DateInput.js +24 -23
- package/dist/DateRangeInput/DateRangeInput.d.ts +9 -2
- package/dist/DateRangeInput/DateRangeInput.d.ts.map +1 -1
- package/dist/DateRangeInput/DateRangeInput.js +11 -16
- package/dist/DateTimeInput/DateTimeInput.d.ts +9 -1
- package/dist/DateTimeInput/DateTimeInput.d.ts.map +1 -1
- package/dist/DateTimeInput/DateTimeInput.js +22 -17
- package/dist/Dialog/Dialog.d.ts.map +1 -1
- package/dist/Dialog/Dialog.js +4 -4
- package/dist/DropdownMenu/DropdownMenu.d.ts +33 -8
- package/dist/DropdownMenu/DropdownMenu.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenu.js +62 -20
- package/dist/DropdownMenu/DropdownMenuCheckboxItem.d.ts +8 -11
- package/dist/DropdownMenu/DropdownMenuCheckboxItem.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenuCheckboxItem.js +32 -31
- package/dist/DropdownMenu/DropdownMenuDivider.d.ts +25 -0
- package/dist/DropdownMenu/DropdownMenuDivider.d.ts.map +1 -0
- package/dist/DropdownMenu/DropdownMenuDivider.js +66 -0
- package/dist/DropdownMenu/DropdownMenuItem.d.ts +15 -2
- package/dist/DropdownMenu/DropdownMenuItem.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenuItem.js +20 -8
- package/dist/DropdownMenu/DropdownMenuRadioItem.d.ts +5 -5
- package/dist/DropdownMenu/DropdownMenuRadioItem.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenuRadioItem.js +24 -67
- package/dist/DropdownMenu/DropdownMenuSubMenu.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenuSubMenu.js +2 -8
- package/dist/DropdownMenu/index.d.ts +2 -1
- package/dist/DropdownMenu/index.d.ts.map +1 -1
- package/dist/DropdownMenu/index.js +4 -0
- package/dist/DropdownMenu/renderDropdownItems.d.ts.map +1 -1
- package/dist/DropdownMenu/renderDropdownItems.js +35 -27
- package/dist/EmptyState/EmptyState.d.ts.map +1 -1
- package/dist/EmptyState/EmptyState.js +9 -5
- package/dist/Field/InputClearButton.d.ts +16 -3
- package/dist/Field/InputClearButton.d.ts.map +1 -1
- package/dist/Field/InputClearButton.js +15 -4
- package/dist/HoverCard/useHoverCard.d.ts.map +1 -1
- package/dist/HoverCard/useHoverCard.js +3 -19
- package/dist/Indicator/CheckIndicator.d.ts +25 -0
- package/dist/Indicator/CheckIndicator.d.ts.map +1 -0
- package/dist/Indicator/CheckIndicator.js +155 -0
- package/dist/Indicator/CheckboxIndicator.d.ts +22 -0
- package/dist/Indicator/CheckboxIndicator.d.ts.map +1 -0
- package/dist/Indicator/CheckboxIndicator.js +173 -0
- package/dist/Indicator/RadioIndicator.d.ts +23 -0
- package/dist/Indicator/RadioIndicator.d.ts.map +1 -0
- package/dist/Indicator/RadioIndicator.js +137 -0
- package/dist/Indicator/index.d.ts +24 -0
- package/dist/Indicator/index.d.ts.map +1 -0
- package/dist/Indicator/index.js +26 -0
- package/dist/Indicator/indicator.markers.stylex.d.ts +16 -0
- package/dist/Indicator/indicator.markers.stylex.d.ts.map +1 -0
- package/dist/Indicator/indicator.markers.stylex.js +21 -0
- package/dist/Indicator/indicatorRegistry.d.ts +71 -0
- package/dist/Indicator/indicatorRegistry.d.ts.map +1 -0
- package/dist/Indicator/indicatorRegistry.js +93 -0
- package/dist/Indicator/types.d.ts +167 -0
- package/dist/Indicator/types.d.ts.map +1 -0
- package/dist/Indicator/types.js +1 -0
- package/dist/Indicator/useIndicator.d.ts +18 -0
- package/dist/Indicator/useIndicator.d.ts.map +1 -0
- package/dist/Indicator/useIndicator.js +30 -0
- package/dist/Item/Item.d.ts.map +1 -1
- package/dist/Item/Item.js +4 -8
- package/dist/Layer/useLayer.d.ts +14 -0
- package/dist/Layer/useLayer.d.ts.map +1 -1
- package/dist/Layer/useLayer.js +25 -2
- package/dist/Lightbox/Lightbox.d.ts.map +1 -1
- package/dist/Lightbox/Lightbox.js +56 -53
- package/dist/Link/Link.d.ts.map +1 -1
- package/dist/Link/Link.js +4 -5
- package/dist/MobileNav/MobileNav.js +8 -8
- package/dist/MoreMenu/MoreMenu.d.ts +14 -1
- package/dist/MoreMenu/MoreMenu.d.ts.map +1 -1
- package/dist/MoreMenu/MoreMenu.js +4 -0
- package/dist/MultiSelector/MultiSelector.d.ts.map +1 -1
- package/dist/MultiSelector/MultiSelector.js +78 -75
- package/dist/NumberInput/NumberInput.d.ts +27 -1
- package/dist/NumberInput/NumberInput.d.ts.map +1 -1
- package/dist/NumberInput/NumberInput.js +230 -42
- package/dist/Outline/Outline.d.ts.map +1 -1
- package/dist/Outline/Outline.js +2 -3
- package/dist/Pagination/Pagination.d.ts.map +1 -1
- package/dist/Pagination/Pagination.js +61 -63
- package/dist/Popover/Popover.d.ts.map +1 -1
- package/dist/Popover/Popover.js +6 -8
- package/dist/PowerSearch/PowerSearch.d.ts.map +1 -1
- package/dist/PowerSearch/PowerSearch.js +1 -1
- package/dist/PowerSearch/PowerSearchEditPopover.d.ts.map +1 -1
- package/dist/PowerSearch/PowerSearchEditPopover.js +7 -0
- package/dist/ProgressBar/ProgressBar.d.ts +11 -4
- package/dist/ProgressBar/ProgressBar.d.ts.map +1 -1
- package/dist/ProgressBar/ProgressBar.js +96 -6
- package/dist/RadioList/RadioListItem.d.ts.map +1 -1
- package/dist/RadioList/RadioListItem.js +29 -84
- package/dist/Resizable/ResizeHandle.d.ts.map +1 -1
- package/dist/Resizable/ResizeHandle.js +2 -3
- package/dist/SegmentedControl/SegmentedControlItem.d.ts.map +1 -1
- package/dist/SegmentedControl/SegmentedControlItem.js +2 -3
- package/dist/SelectableCard/SelectableCard.d.ts.map +1 -1
- package/dist/SelectableCard/SelectableCard.js +3 -11
- package/dist/Selector/Selector.d.ts +2 -1
- package/dist/Selector/Selector.d.ts.map +1 -1
- package/dist/Selector/Selector.js +164 -94
- package/dist/Selector/hooks.d.ts +18 -6
- package/dist/Selector/hooks.d.ts.map +1 -1
- package/dist/Selector/hooks.js +57 -40
- package/dist/SideNav/SideNav.d.ts.map +1 -1
- package/dist/SideNav/SideNav.js +1 -1
- package/dist/SideNav/SideNavCollapseButton.d.ts +1 -1
- package/dist/SideNav/SideNavCollapseButton.d.ts.map +1 -1
- package/dist/SideNav/SideNavCollapseButton.js +29 -14
- package/dist/SideNav/SideNavHeading.d.ts.map +1 -1
- package/dist/SideNav/SideNavHeading.js +56 -20
- package/dist/SideNav/SideNavItem.d.ts.map +1 -1
- package/dist/SideNav/SideNavItem.js +28 -22
- package/dist/Stack/stack.stylex.d.ts +3 -3
- package/dist/Switch/Switch.js +11 -10
- package/dist/TabList/Tab.d.ts.map +1 -1
- package/dist/TabList/Tab.js +2 -3
- package/dist/TabList/TabMenu.d.ts.map +1 -1
- package/dist/TabList/TabMenu.js +41 -19
- package/dist/Table/BaseTable.d.ts.map +1 -1
- package/dist/Table/BaseTable.js +8 -0
- package/dist/Table/index.d.ts +1 -1
- package/dist/Table/index.d.ts.map +1 -1
- package/dist/Table/index.js +1 -1
- package/dist/Table/plugins/groupedRows/useTableGroupedRows.d.ts +1 -1
- package/dist/Table/plugins/groupedRows/useTableGroupedRows.d.ts.map +1 -1
- package/dist/Table/plugins/groupedRows/useTableGroupedRows.js +22 -18
- package/dist/Table/plugins/rowExpansion/index.d.ts +1 -1
- package/dist/Table/plugins/rowExpansion/index.d.ts.map +1 -1
- package/dist/Table/plugins/rowExpansion/index.js +1 -1
- package/dist/Table/plugins/rowExpansion/useTableRowExpansion.d.ts +41 -76
- package/dist/Table/plugins/rowExpansion/useTableRowExpansion.d.ts.map +1 -1
- package/dist/Table/plugins/rowExpansion/useTableRowExpansion.js +94 -345
- package/dist/Table/plugins/sortable/useTableSortable.d.ts.map +1 -1
- package/dist/Table/plugins/sortable/useTableSortable.js +23 -4
- package/dist/Table/plugins/tree/useTableTreeData.d.ts.map +1 -1
- package/dist/Table/plugins/tree/useTableTreeData.js +29 -33
- package/dist/Table/tableContextMenu.d.ts.map +1 -1
- package/dist/Table/tableContextMenu.js +2 -1
- package/dist/Table/types.d.ts +11 -0
- package/dist/Table/types.d.ts.map +1 -1
- package/dist/TextArea/TextArea.d.ts +10 -1
- package/dist/TextArea/TextArea.d.ts.map +1 -1
- package/dist/TextArea/TextArea.js +16 -6
- package/dist/TextInput/TextInput.d.ts +10 -1
- package/dist/TextInput/TextInput.d.ts.map +1 -1
- package/dist/TextInput/TextInput.js +13 -19
- package/dist/Thumbnail/Thumbnail.d.ts.map +1 -1
- package/dist/Thumbnail/Thumbnail.js +32 -26
- package/dist/TimeInput/TimeInput.d.ts.map +1 -1
- package/dist/TimeInput/TimeInput.js +7 -15
- package/dist/Timestamp/TimestampHoverCard.d.ts.map +1 -1
- package/dist/Timestamp/TimestampHoverCard.js +16 -34
- package/dist/Token/Token.d.ts.map +1 -1
- package/dist/Token/Token.js +20 -11
- package/dist/Tokenizer/Tokenizer.d.ts.map +1 -1
- package/dist/Tokenizer/Tokenizer.js +4 -2
- package/dist/Tooltip/useTooltip.d.ts.map +1 -1
- package/dist/Tooltip/useTooltip.js +3 -19
- package/dist/TopNav/TopNav.d.ts.map +1 -1
- package/dist/TopNav/TopNav.js +6 -5
- package/dist/TopNav/TopNavHeading.d.ts.map +1 -1
- package/dist/TopNav/TopNavHeading.js +54 -16
- package/dist/TopNav/TopNavItem.d.ts.map +1 -1
- package/dist/TopNav/TopNavItem.js +3 -9
- package/dist/TopNav/TopNavMegaMenu.d.ts +7 -0
- package/dist/TopNav/TopNavMegaMenu.d.ts.map +1 -1
- package/dist/TopNav/TopNavMegaMenu.js +146 -60
- package/dist/TopNav/TopNavMegaMenuItem.d.ts.map +1 -1
- package/dist/TopNav/TopNavMegaMenuItem.js +22 -3
- package/dist/TopNav/TopNavMenu.d.ts.map +1 -1
- package/dist/TopNav/TopNavMenu.js +83 -38
- package/dist/TreeList/TreeList.d.ts.map +1 -1
- package/dist/TreeList/TreeList.js +13 -0
- package/dist/TreeList/TreeListBranches.d.ts +1 -1
- package/dist/TreeList/TreeListBranches.d.ts.map +1 -1
- package/dist/TreeList/TreeListBranches.js +14 -4
- package/dist/TreeList/TreeListItem.d.ts +11 -1
- package/dist/TreeList/TreeListItem.d.ts.map +1 -1
- package/dist/TreeList/TreeListItem.js +57 -30
- package/dist/Typeahead/BaseTypeahead.d.ts.map +1 -1
- package/dist/Typeahead/BaseTypeahead.js +16 -8
- package/dist/astryx.css +74 -85
- package/dist/astryx.umd.js +56 -56
- package/dist/astryx.umd.js.map +4 -4
- package/dist/hooks/containerReveal.stylex.d.ts +61 -0
- package/dist/hooks/containerReveal.stylex.d.ts.map +1 -0
- package/dist/hooks/containerReveal.stylex.js +63 -0
- package/dist/hooks/index.d.ts +3 -0
- package/dist/hooks/index.d.ts.map +1 -1
- package/dist/hooks/index.js +2 -0
- package/dist/hooks/useClipboard.d.ts +59 -0
- package/dist/hooks/useClipboard.d.ts.map +1 -0
- package/dist/hooks/useClipboard.js +106 -0
- package/dist/hooks/useContainerReveal.d.ts +14 -8
- package/dist/hooks/useContainerReveal.d.ts.map +1 -1
- package/dist/hooks/useContainerReveal.js +28 -69
- package/dist/hooks/useIndicatorFocusRing.d.ts +28 -0
- package/dist/hooks/useIndicatorFocusRing.d.ts.map +1 -0
- package/dist/hooks/useIndicatorFocusRing.js +96 -0
- package/dist/hooks/useLongPress.d.ts.map +1 -1
- package/dist/hooks/useLongPress.js +12 -2
- package/dist/hooks/useScrollLock.d.ts.map +1 -1
- package/dist/hooks/useScrollLock.js +33 -18
- package/dist/hooks/useStreamingText.d.ts +18 -3
- package/dist/hooks/useStreamingText.d.ts.map +1 -1
- package/dist/hooks/useStreamingText.js +47 -7
- package/dist/hooks/useTreeFocus.d.ts.map +1 -1
- package/dist/hooks/useTreeFocus.js +9 -3
- package/dist/hooks/useTypeahead.d.ts +3 -2
- package/dist/hooks/useTypeahead.d.ts.map +1 -1
- package/dist/hooks/useTypeahead.js +19 -7
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/dist/theme/defineTheme.d.ts +16 -0
- package/dist/theme/defineTheme.d.ts.map +1 -1
- package/dist/theme/defineTheme.js +8 -0
- package/dist/theme/derivedVarRegistry.d.ts +8 -0
- package/dist/theme/derivedVarRegistry.d.ts.map +1 -1
- package/dist/theme/derivedVarRegistry.js +14 -13
- package/dist/theme/expandColorScale.d.ts +3 -1
- package/dist/theme/expandColorScale.d.ts.map +1 -1
- package/dist/theme/expandColorScale.js +17 -7
- package/dist/theme/expandTypeScale.d.ts.map +1 -1
- package/dist/theme/expandTypeScale.js +17 -0
- package/dist/theme/generateThemeRules.d.ts.map +1 -1
- package/dist/theme/generateThemeRules.js +11 -0
- package/dist/theme/index.d.ts +1 -0
- package/dist/theme/index.d.ts.map +1 -1
- package/dist/utils/focusOutline.stylex.d.ts +107 -0
- package/dist/utils/focusOutline.stylex.d.ts.map +1 -0
- package/dist/utils/focusOutline.stylex.js +130 -0
- package/dist/utils/focusReturn.d.ts +24 -0
- package/dist/utils/focusReturn.d.ts.map +1 -0
- package/dist/utils/focusReturn.js +29 -0
- package/dist/utils/index.d.ts +1 -0
- package/dist/utils/index.d.ts.map +1 -1
- package/dist/utils/index.js +1 -0
- package/dist/utils/mergeRefs.d.ts.map +1 -1
- package/dist/utils/mergeRefs.js +7 -5
- package/dist/utils/rtlStyles.d.ts +2 -2
- package/dist/utils/rtlStyles.js +2 -2
- package/dist/utils/themeProps.d.ts +20 -1
- package/dist/utils/themeProps.d.ts.map +1 -1
- package/dist/utils/themeProps.js +8 -2
- package/locales/en.json +12 -0
- package/locales/pseudo.json +9 -0
- package/package.json +7 -2
- package/src/AlertDialog/AlertDialog.doc.mjs +16 -3
- package/src/AlertDialog/AlertDialog.test.tsx +208 -1
- package/src/AlertDialog/AlertDialog.tsx +21 -3
- package/src/AppShell/AppShell.doc.mjs +11 -0
- package/src/AppShell/AppShell.test.tsx +139 -0
- package/src/AppShell/AppShell.tsx +32 -22
- package/src/AspectRatio/AspectRatio.doc.mjs +27 -3
- package/src/AspectRatio/AspectRatio.test.tsx +30 -0
- package/src/AspectRatio/AspectRatio.tsx +13 -0
- package/src/Avatar/Avatar.doc.mjs +2 -13
- package/src/Avatar/Avatar.test.tsx +33 -8
- package/src/Avatar/Avatar.tsx +52 -50
- package/src/AvatarGroup/AvatarGroupOverflow.tsx +2 -9
- package/src/Banner/Banner.tsx +9 -6
- package/src/Breadcrumbs/BreadcrumbItem.tsx +16 -6
- package/src/Breadcrumbs/index.ts +5 -1
- package/src/Button/Button.tsx +21 -41
- package/src/Calendar/Calendar.tsx +2 -1
- package/src/Calendar/styles.ts +0 -8
- package/src/Carousel/Carousel.doc.mjs +3 -0
- package/src/Carousel/Carousel.tsx +10 -6
- package/src/Chat/Chat.doc.mjs +2 -0
- package/src/Chat/ChatDictationButton.tsx +7 -1
- package/src/Chat/ChatLayoutScrollButton.test.tsx +22 -0
- package/src/Chat/ChatLayoutScrollButton.tsx +8 -1
- package/src/Chat/ChatSendButton.tsx +2 -3
- package/src/Chat/ChatToolCalls.test.tsx +35 -0
- package/src/Chat/ChatToolCalls.tsx +36 -16
- package/src/Chat/useTriggerMenu.tsx +2 -5
- package/src/CheckboxInput/CheckboxInput.doc.mjs +4 -2
- package/src/CheckboxInput/CheckboxInput.test.tsx +115 -0
- package/src/CheckboxInput/CheckboxInput.tsx +45 -202
- package/src/ClickableCard/ClickableCard.tsx +6 -11
- package/src/CodeBlock/CodeBlock.doc.mjs +3 -0
- package/src/CodeBlock/CodeBlock.test.tsx +91 -0
- package/src/CodeBlock/CodeBlock.tsx +57 -80
- package/src/Collapsible/Collapsible.tsx +22 -18
- package/src/CommandPalette/CommandPalette.test.tsx +29 -0
- package/src/CommandPalette/CommandPaletteItem.tsx +7 -4
- package/src/CommandPalette/CommandPaletteList.tsx +2 -2
- package/src/ComplexSelector/ComplexSelector.doc.mjs +42 -0
- package/src/ComplexSelector/ComplexSelector.test.tsx +64 -0
- package/src/ComplexSelector/ComplexSelector.tsx +46 -29
- package/src/ContextMenu/ContextMenu.doc.mjs +1 -1
- package/src/ContextMenu/ContextMenu.test.tsx +41 -0
- package/src/ContextMenu/ContextMenu.tsx +3 -3
- package/src/ContextMenu/index.ts +5 -1
- package/src/DateInput/DateInput.doc.mjs +18 -3
- package/src/DateInput/DateInput.test.tsx +93 -11
- package/src/DateInput/DateInput.tsx +41 -19
- package/src/DateRangeInput/DateRangeInput.doc.mjs +10 -2
- package/src/DateRangeInput/DateRangeInput.test.tsx +110 -14
- package/src/DateRangeInput/DateRangeInput.tsx +24 -12
- package/src/DateTimeInput/DateTimeInput.doc.mjs +16 -2
- package/src/DateTimeInput/DateTimeInput.test.tsx +75 -0
- package/src/DateTimeInput/DateTimeInput.tsx +35 -8
- package/src/Dialog/Dialog.tsx +2 -9
- package/src/DropdownMenu/DropdownMenu.doc.mjs +5 -9
- package/src/DropdownMenu/DropdownMenu.test.tsx +534 -4
- package/src/DropdownMenu/DropdownMenu.tsx +113 -52
- package/src/DropdownMenu/DropdownMenuCheckboxItem.tsx +27 -30
- package/src/DropdownMenu/DropdownMenuDivider.doc.mjs +34 -0
- package/src/DropdownMenu/DropdownMenuDivider.tsx +81 -0
- package/src/DropdownMenu/DropdownMenuItem.doc.mjs +39 -4
- package/src/DropdownMenu/DropdownMenuItem.tsx +48 -10
- package/src/DropdownMenu/DropdownMenuRadioItem.tsx +30 -76
- package/src/DropdownMenu/DropdownMenuSelectable.test.tsx +25 -19
- package/src/DropdownMenu/DropdownMenuSubMenu.test.tsx +44 -14
- package/src/DropdownMenu/DropdownMenuSubMenu.tsx +1 -5
- package/src/DropdownMenu/index.ts +8 -1
- package/src/DropdownMenu/renderDropdownItems.tsx +33 -34
- package/src/EmptyState/EmptyState.doc.mjs +4 -0
- package/src/EmptyState/EmptyState.test.tsx +62 -0
- package/src/EmptyState/EmptyState.tsx +16 -6
- package/src/Field/Field.doc.mjs +1 -0
- package/src/Field/InputClearButton.test.tsx +117 -0
- package/src/Field/InputClearButton.tsx +30 -3
- package/src/HoverCard/useHoverCard.tsx +2 -23
- package/src/Icon/Icon.doc.mjs +2 -1
- package/src/Indicator/CheckIndicator.tsx +174 -0
- package/src/Indicator/CheckboxIndicator.tsx +257 -0
- package/src/Indicator/Indicator.doc.mjs +344 -0
- package/src/Indicator/Indicator.test.tsx +393 -0
- package/src/Indicator/RadioIndicator.tsx +206 -0
- package/src/Indicator/index.ts +45 -0
- package/src/Indicator/indicator.markers.stylex.ts +19 -0
- package/src/Indicator/indicatorRegistry.test.tsx +106 -0
- package/src/Indicator/indicatorRegistry.ts +120 -0
- package/src/Indicator/types.ts +186 -0
- package/src/Indicator/useIndicator.ts +39 -0
- package/src/Item/Item.doc.mjs +1 -1
- package/src/Item/Item.tsx +7 -14
- package/src/Layer/useLayer.doc.mjs +2 -2
- package/src/Layer/useLayer.test.tsx +85 -0
- package/src/Layer/useLayer.tsx +39 -1
- package/src/Lightbox/Lightbox.doc.mjs +1 -1
- package/src/Lightbox/Lightbox.tsx +43 -38
- package/src/Link/Link.tsx +4 -11
- package/src/MobileNav/MobileNav.tsx +3 -3
- package/src/MoreMenu/MoreMenu.doc.mjs +31 -0
- package/src/MoreMenu/MoreMenu.test.tsx +68 -1
- package/src/MoreMenu/MoreMenu.tsx +19 -0
- package/src/MultiSelector/MultiSelector.doc.mjs +9 -1
- package/src/MultiSelector/MultiSelector.test.tsx +255 -16
- package/src/MultiSelector/MultiSelector.tsx +103 -99
- package/src/NumberInput/NumberInput.doc.mjs +265 -50
- package/src/NumberInput/NumberInput.test.tsx +726 -21
- package/src/NumberInput/NumberInput.tsx +353 -59
- package/src/Outline/Outline.tsx +2 -5
- package/src/Pagination/Pagination.doc.mjs +1 -1
- package/src/Pagination/Pagination.test.tsx +22 -7
- package/src/Pagination/Pagination.tsx +38 -35
- package/src/Popover/Popover.tsx +6 -7
- package/src/PowerSearch/PowerSearch.tsx +1 -1
- package/src/PowerSearch/PowerSearchEditPopover.test.tsx +42 -0
- package/src/PowerSearch/PowerSearchEditPopover.tsx +7 -0
- package/src/ProgressBar/ProgressBar.doc.mjs +27 -5
- package/src/ProgressBar/ProgressBar.test.tsx +224 -1
- package/src/ProgressBar/ProgressBar.tsx +124 -22
- package/src/RadioList/RadioList.doc.mjs +4 -2
- package/src/RadioList/RadioListItem.tsx +31 -130
- package/src/Resizable/ResizeHandle.tsx +2 -9
- package/src/SegmentedControl/SegmentedControlItem.tsx +2 -9
- package/src/SelectableCard/SelectableCard.tsx +4 -9
- package/src/Selector/Selector.doc.mjs +7 -4
- package/src/Selector/Selector.test.tsx +935 -25
- package/src/Selector/Selector.tsx +189 -106
- package/src/Selector/hooks.ts +77 -50
- package/src/SideNav/SideNav.test.tsx +46 -0
- package/src/SideNav/SideNav.tsx +1 -0
- package/src/SideNav/SideNavCollapseButton.tsx +15 -10
- package/src/SideNav/SideNavHeading.tsx +48 -10
- package/src/SideNav/SideNavItem.tsx +20 -12
- package/src/Stack/Stack.doc.mjs +110 -0
- package/src/StatusDot/StatusDot.doc.mjs +12 -3
- package/src/Switch/Switch.test.tsx +32 -0
- package/src/Switch/Switch.tsx +8 -8
- package/src/TabList/Tab.tsx +2 -9
- package/src/TabList/TabMenu.tsx +14 -21
- package/src/Table/BaseTable.tsx +11 -0
- package/src/Table/index.ts +1 -4
- package/src/Table/plugins/groupedRows/useTableGroupedRows.tsx +30 -14
- package/src/Table/plugins/rowExpansion/index.ts +1 -4
- package/src/Table/plugins/rowExpansion/useTableRowExpansion.test.tsx +125 -175
- package/src/Table/plugins/rowExpansion/useTableRowExpansion.tsx +115 -458
- package/src/Table/plugins/sortable/useTableSortable.tsx +2 -6
- package/src/Table/plugins/tree/useTableTreeData.tsx +43 -24
- package/src/Table/tableContextMenu.test.tsx +27 -0
- package/src/Table/tableContextMenu.tsx +1 -0
- package/src/Table/types.ts +11 -0
- package/src/Table/useTableGroupedRows.doc.mjs +1 -1
- package/src/Table/useTableRowExpansion.doc.mjs +43 -66
- package/src/TextArea/TextArea.doc.mjs +42 -2
- package/src/TextArea/TextArea.test.tsx +219 -0
- package/src/TextArea/TextArea.tsx +34 -7
- package/src/TextInput/TextInput.doc.mjs +18 -2
- package/src/TextInput/TextInput.test.tsx +189 -0
- package/src/TextInput/TextInput.tsx +25 -31
- package/src/Thumbnail/Thumbnail.tsx +2 -9
- package/src/TimeInput/TimeInput.doc.mjs +2 -2
- package/src/TimeInput/TimeInput.test.tsx +30 -3
- package/src/TimeInput/TimeInput.tsx +9 -26
- package/src/Timestamp/Timestamp.doc.mjs +4 -3
- package/src/Timestamp/TimestampHoverCard.tsx +13 -35
- package/src/Token/Token.tsx +5 -28
- package/src/Tokenizer/Tokenizer.doc.mjs +2 -2
- package/src/Tokenizer/Tokenizer.test.tsx +45 -3
- package/src/Tokenizer/Tokenizer.tsx +10 -2
- package/src/Tooltip/useTooltip.tsx +2 -23
- package/src/TopNav/TopNav.tsx +1 -3
- package/src/TopNav/TopNavHeading.tsx +42 -13
- package/src/TopNav/TopNavItem.tsx +3 -21
- package/src/TopNav/TopNavMegaMenu.test.tsx +433 -33
- package/src/TopNav/TopNavMegaMenu.tsx +118 -53
- package/src/TopNav/TopNavMegaMenuItem.tsx +2 -9
- package/src/TopNav/TopNavMenu.tsx +34 -37
- package/src/TreeList/TreeList.doc.mjs +5 -0
- package/src/TreeList/TreeList.test.tsx +206 -7
- package/src/TreeList/TreeList.tsx +22 -0
- package/src/TreeList/TreeListBranches.tsx +25 -2
- package/src/TreeList/TreeListItem.tsx +89 -52
- package/src/Typeahead/BaseTypeahead.tsx +19 -6
- package/src/Typeahead/Typeahead.doc.mjs +1 -0
- package/src/Typeahead/Typeahead.test.tsx +76 -3
- package/src/hooks/containerReveal.stylex.ts +102 -0
- package/src/hooks/index.ts +4 -0
- package/src/hooks/useClipboard.doc.mjs +87 -0
- package/src/hooks/useClipboard.test.tsx +151 -0
- package/src/hooks/useClipboard.ts +135 -0
- package/src/hooks/useContainerReveal.doc.mjs +7 -7
- package/src/hooks/useContainerReveal.test.tsx +42 -62
- package/src/hooks/useContainerReveal.ts +36 -91
- package/src/hooks/useImageMode.test.ts +1 -1
- package/src/hooks/useIndicatorFocusRing.tsx +120 -0
- package/src/hooks/useLongPress.test.tsx +18 -0
- package/src/hooks/useLongPress.ts +12 -2
- package/src/hooks/useScrollLock.test.ts +72 -0
- package/src/hooks/useScrollLock.ts +51 -19
- package/src/hooks/useStreamingText.test.ts +46 -1
- package/src/hooks/useStreamingText.ts +49 -7
- package/src/hooks/useTreeFocus.test.tsx +50 -0
- package/src/hooks/useTreeFocus.ts +14 -3
- package/src/hooks/useTypeahead.test.tsx +150 -0
- package/src/hooks/useTypeahead.ts +24 -9
- package/src/i18n/InternationalizationProvider.doc.mjs +7 -2
- package/src/index.ts +1 -0
- package/src/theme/defineTheme.ts +24 -0
- package/src/theme/derivedVarRegistry.test.ts +21 -1
- package/src/theme/derivedVarRegistry.ts +19 -6
- package/src/theme/expandColorScale.test.ts +14 -0
- package/src/theme/expandColorScale.ts +24 -9
- package/src/theme/expandTypeScale.test.ts +43 -0
- package/src/theme/expandTypeScale.ts +17 -0
- package/src/theme/generateThemeRules.test.ts +61 -20
- package/src/theme/generateThemeRules.ts +11 -0
- package/src/theme/index.ts +13 -0
- package/src/utils/focusOutline.stylex.ts +163 -0
- package/src/utils/focusReturn.test.ts +42 -0
- package/src/utils/focusReturn.ts +31 -0
- package/src/utils/index.ts +1 -0
- package/src/utils/mergeRefs.test.ts +48 -0
- package/src/utils/mergeRefs.ts +12 -6
- package/src/utils/rtlStyles.ts +2 -2
- package/src/utils/themeProps.ts +26 -4
- package/dist/CheckboxInput/checkbox.markers.stylex.d.ts +0 -9
- package/dist/CheckboxInput/checkbox.markers.stylex.d.ts.map +0 -1
- package/dist/CheckboxInput/checkbox.markers.stylex.js +0 -14
- package/dist/RadioList/radio.markers.stylex.d.ts +0 -7
- package/dist/RadioList/radio.markers.stylex.d.ts.map +0 -1
- package/dist/RadioList/radio.markers.stylex.js +0 -12
- package/dist/hooks/containerReveal.pool.stylex.d.ts +0 -303
- package/dist/hooks/containerReveal.pool.stylex.d.ts.map +0 -1
- package/dist/hooks/containerReveal.pool.stylex.js +0 -292
- package/src/CheckboxInput/checkbox.markers.stylex.ts +0 -12
- package/src/RadioList/radio.markers.stylex.ts +0 -10
- package/src/hooks/containerReveal.pool.stylex.ts +0 -571
|
@@ -4,7 +4,8 @@
|
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* @file Selector.tsx
|
|
7
|
-
* @input Uses React, StyleX, usePopover, useTooltip, Icon, InputGroupContext
|
|
7
|
+
* @input Uses React, StyleX, usePopover, useTooltip, Icon, InputGroupContext,
|
|
8
|
+
* and Selector positioning hooks
|
|
8
9
|
* @output Exports Selector component
|
|
9
10
|
* @position Core implementation; consumed by index.ts
|
|
10
11
|
*
|
|
@@ -20,7 +21,8 @@ import * as stylex from '@stylexjs/stylex';
|
|
|
20
21
|
import { usePopover } from "../Popover/usePopover.js";
|
|
21
22
|
import { useTooltip } from "../Tooltip/index.js";
|
|
22
23
|
import { Icon, renderIconSlot } from "../Icon/index.js";
|
|
23
|
-
import {
|
|
24
|
+
import { useIndicator } from "../Indicator/index.js";
|
|
25
|
+
import { Field, InputClearButton, inputStatusBorderStyles, inputStatusHoverShadowStyles, inputWrapperStyles } from "../Field/index.js";
|
|
24
26
|
import { Divider } from "../Divider/index.js";
|
|
25
27
|
import { layerAnimations } from "../Layer/layerAnimations.stylex.js";
|
|
26
28
|
import { Spinner } from "../Spinner/index.js";
|
|
@@ -30,10 +32,12 @@ import "../theme/tokens.stylex.js";
|
|
|
30
32
|
import { colorVars, sizeVars, spacingVars, radiusVars, durationVars, easeVars, typographyVars, fontWeightVars, typeScaleVars, borderVars } from "../theme/tokens.stylex.js";
|
|
31
33
|
import { isOptionData, isDivider, isSection, normalizeOption, getSelectableOptions } from "./utils.js";
|
|
32
34
|
import { useCombobox, useSelectedItemOffset } from "./hooks.js";
|
|
35
|
+
import { useTypeahead } from "../hooks/useTypeahead.js";
|
|
33
36
|
import { SelectorOption } from "./SelectorOption.js";
|
|
34
37
|
import { getInputARIA, mergeProps } from "../utils/index.js";
|
|
35
38
|
import { useSize } from "../SizeContext/SizeContext.js";
|
|
36
39
|
import { themeProps } from "../utils/themeProps.js";
|
|
40
|
+
import { stableClassName } from "../naming.js";
|
|
37
41
|
import { groupStyles } from "../InputGroup/groupStyles.js";
|
|
38
42
|
import { useInputGroup } from "../InputGroup/InputGroupContext.js";
|
|
39
43
|
import { VisuallyHidden } from "../VisuallyHidden/index.js";
|
|
@@ -60,6 +64,21 @@ const styles = {
|
|
|
60
64
|
kMwMTN: "xv1l7n4",
|
|
61
65
|
$$css: true
|
|
62
66
|
},
|
|
67
|
+
triggerIcon: {
|
|
68
|
+
kmuXW: "x2lah0s",
|
|
69
|
+
$$css: true
|
|
70
|
+
},
|
|
71
|
+
triggerIconRotation: {
|
|
72
|
+
k1ekBW: "x11xpdln",
|
|
73
|
+
kIyJzY: "xuedmi6",
|
|
74
|
+
kAMwcw: "xlr8y92",
|
|
75
|
+
k3nNDw: "x1g0ag68",
|
|
76
|
+
$$css: true
|
|
77
|
+
},
|
|
78
|
+
triggerIconOpen: {
|
|
79
|
+
k3aq6I: "x19jd1h0",
|
|
80
|
+
$$css: true
|
|
81
|
+
},
|
|
63
82
|
triggerGhost: {
|
|
64
83
|
kzqmXN: "x14atkfc",
|
|
65
84
|
kMzoRj: "xc342km",
|
|
@@ -275,6 +294,9 @@ export function Selector(props) {
|
|
|
275
294
|
const statusMessageId = useId();
|
|
276
295
|
const inputLabelId = useId();
|
|
277
296
|
const searchId = useId();
|
|
297
|
+
// Measure from the same outer control that usePopover anchors to; using the
|
|
298
|
+
// shorter inner button makes every size's selected row land too low.
|
|
299
|
+
const anchorRef = useRef(null);
|
|
278
300
|
const triggerRef = useRef(null);
|
|
279
301
|
const searchRef = useRef(null);
|
|
280
302
|
const inputGroup = useInputGroup();
|
|
@@ -285,6 +307,7 @@ export function Selector(props) {
|
|
|
285
307
|
const [, startTransition] = useTransition();
|
|
286
308
|
const [optimisticValue, setOptimisticValue] = useOptimistic(normalizedValue);
|
|
287
309
|
const isBusy = isLoading || optimisticValue !== normalizedValue;
|
|
310
|
+
const announce = useAnnounce();
|
|
288
311
|
|
|
289
312
|
// Disabled-reason tooltip. Disabled controls swallow pointer events, so the
|
|
290
313
|
// tooltip listeners attach to the trigger container (which already exists)
|
|
@@ -325,15 +348,15 @@ export function Selector(props) {
|
|
|
325
348
|
// Ref for listbox to measure selected item position
|
|
326
349
|
const listboxRef = useRef(null);
|
|
327
350
|
|
|
328
|
-
//
|
|
329
|
-
//
|
|
330
|
-
//
|
|
331
|
-
|
|
332
|
-
const announce = useAnnounce();
|
|
351
|
+
// Typeahead is defined below (it needs the popover), but closing and clearing
|
|
352
|
+
// must drop its pending buffer — otherwise a stale prefix survives the reset
|
|
353
|
+
// window and poisons the next keystroke ("Dog" then "c" would search "dc").
|
|
354
|
+
const resetTypeaheadRef = useRef(() => {});
|
|
333
355
|
|
|
334
356
|
// Layer for dropdown positioning
|
|
335
357
|
const handleLayerHide = useCallback(() => {
|
|
336
358
|
setSearchQuery('');
|
|
359
|
+
resetTypeaheadRef.current();
|
|
337
360
|
// Clear any lingering result count when the popover closes so stale status
|
|
338
361
|
// text does not linger in the a11y tree.
|
|
339
362
|
announce('');
|
|
@@ -384,7 +407,7 @@ export function Selector(props) {
|
|
|
384
407
|
selectedItemIndex,
|
|
385
408
|
listboxId,
|
|
386
409
|
listboxRef,
|
|
387
|
-
|
|
410
|
+
anchorRef
|
|
388
411
|
});
|
|
389
412
|
const selectedItemOffset = shouldOverlaySelectedItem ? rawOffset : 0;
|
|
390
413
|
const isPositioned = shouldOverlaySelectedItem ? rawIsPositioned : true;
|
|
@@ -396,6 +419,7 @@ export function Selector(props) {
|
|
|
396
419
|
// Clear the current value. Shared by the clear button and the keyboard
|
|
397
420
|
// Delete/Backspace path so clearing is reachable without a mouse.
|
|
398
421
|
const clearValue = useCallback(() => {
|
|
422
|
+
resetTypeaheadRef.current();
|
|
399
423
|
onChange?.(null);
|
|
400
424
|
if (changeAction) {
|
|
401
425
|
startTransition(async () => {
|
|
@@ -405,10 +429,25 @@ export function Selector(props) {
|
|
|
405
429
|
}
|
|
406
430
|
}, [onChange, changeAction, startTransition, setOptimisticValue]);
|
|
407
431
|
|
|
408
|
-
//
|
|
432
|
+
// Type-to-find appends to the query rather than replacing it: characters
|
|
433
|
+
// typed before focus reaches the search input must not be dropped.
|
|
434
|
+
const appendSearchQuery = useCallback(char => {
|
|
435
|
+
setSearchQuery(query => query + char);
|
|
436
|
+
}, []);
|
|
437
|
+
const commitValue = useCallback(newValue => {
|
|
438
|
+
onChange?.(newValue);
|
|
439
|
+
if (changeAction) {
|
|
440
|
+
startTransition(async () => {
|
|
441
|
+
setOptimisticValue(newValue);
|
|
442
|
+
await changeAction(newValue);
|
|
443
|
+
});
|
|
444
|
+
}
|
|
445
|
+
}, [onChange, changeAction, startTransition, setOptimisticValue]);
|
|
446
|
+
|
|
447
|
+
// Selector behavior (keyboard nav, selection)
|
|
409
448
|
const {
|
|
410
449
|
highlightedIndex,
|
|
411
|
-
setHighlightedIndex
|
|
450
|
+
setHighlightedIndex,
|
|
412
451
|
getItemId,
|
|
413
452
|
onTriggerClick,
|
|
414
453
|
onKeyDown,
|
|
@@ -416,7 +455,11 @@ export function Selector(props) {
|
|
|
416
455
|
onItemMouseEnter
|
|
417
456
|
} = useCombobox({
|
|
418
457
|
selectableItems: filteredItems,
|
|
419
|
-
value:
|
|
458
|
+
// The optimistic value, not the raw prop: with a pending changeAction the
|
|
459
|
+
// prop still holds the old selection, so the popup would open with the
|
|
460
|
+
// highlight on it and Delete/Backspace could clear a value the action has
|
|
461
|
+
// already replaced.
|
|
462
|
+
value: optimisticValue,
|
|
420
463
|
isDisabled,
|
|
421
464
|
isOpen: popover.isOpen,
|
|
422
465
|
hasSearch,
|
|
@@ -424,24 +467,56 @@ export function Selector(props) {
|
|
|
424
467
|
popover.show();
|
|
425
468
|
if (hasSearch) {
|
|
426
469
|
requestAnimationFrame(() => {
|
|
427
|
-
searchRef.current
|
|
470
|
+
const input = searchRef.current;
|
|
471
|
+
if (input) {
|
|
472
|
+
input.focus();
|
|
473
|
+
// When typing seeded the query, place the caret after it so the
|
|
474
|
+
// user keeps typing where they left off.
|
|
475
|
+
input.setSelectionRange(input.value.length, input.value.length);
|
|
476
|
+
}
|
|
428
477
|
});
|
|
429
478
|
}
|
|
430
479
|
}, [popover, hasSearch]),
|
|
431
480
|
onClose: popover.hide,
|
|
432
|
-
onSelect:
|
|
433
|
-
onChange?.(newValue);
|
|
434
|
-
if (changeAction) {
|
|
435
|
-
startTransition(async () => {
|
|
436
|
-
setOptimisticValue(newValue);
|
|
437
|
-
await changeAction(newValue);
|
|
438
|
-
});
|
|
439
|
-
}
|
|
440
|
-
}, [onChange, changeAction, startTransition, setOptimisticValue]),
|
|
481
|
+
onSelect: commitValue,
|
|
441
482
|
onClear: hasClear ? clearValue : undefined,
|
|
483
|
+
onSearchSeed: appendSearchQuery,
|
|
442
484
|
listboxId
|
|
443
485
|
});
|
|
444
486
|
|
|
487
|
+
// Type-to-select, shared with the other collections (menus, listboxes).
|
|
488
|
+
// Open, it walks the highlight — aria-activedescendant announces each match.
|
|
489
|
+
// Closed, it commits the match like a native select, which changes the value
|
|
490
|
+
// without opening the popup or moving focus, so nothing else would prompt
|
|
491
|
+
// assistive tech to re-read the trigger: announce it explicitly.
|
|
492
|
+
const typeahead = useTypeahead({
|
|
493
|
+
getItemLabels: () => selectableItems.map(item => item.label ?? item.value),
|
|
494
|
+
isDisabled: index => selectableItems[index]?.disabled === true,
|
|
495
|
+
// Cycle onward from the highlight when open, from the committed selection
|
|
496
|
+
// when closed — the optimistic one, so a pending changeAction cannot strand
|
|
497
|
+
// cycling on the first match. -1 means nothing is selected or highlighted,
|
|
498
|
+
// which the hook reads as "search from the top".
|
|
499
|
+
getCurrentIndex: () => popover.isOpen ? highlightedIndex : selectedItemIndex,
|
|
500
|
+
onMatch: index => {
|
|
501
|
+
const item = selectableItems[index];
|
|
502
|
+
if (popover.isOpen) {
|
|
503
|
+
setHighlightedIndex(index);
|
|
504
|
+
} else if (item.value !== optimisticValue) {
|
|
505
|
+
commitValue(item.value);
|
|
506
|
+
announce(item.label ?? item.value);
|
|
507
|
+
}
|
|
508
|
+
}
|
|
509
|
+
});
|
|
510
|
+
resetTypeaheadRef.current = typeahead.reset;
|
|
511
|
+
const handleTriggerKeyDown = useCallback(e => {
|
|
512
|
+
// With hasSearch the query input owns typing, so type-to-select is off.
|
|
513
|
+
if (!isDisabled && !hasSearch && typeahead.onKeyDown(e)) {
|
|
514
|
+
e.preventDefault();
|
|
515
|
+
return;
|
|
516
|
+
}
|
|
517
|
+
onKeyDown(e);
|
|
518
|
+
}, [isDisabled, hasSearch, typeahead, onKeyDown]);
|
|
519
|
+
|
|
445
520
|
// Keep the highlighted option visible during keyboard navigation. The
|
|
446
521
|
// listbox is a fixed-height scroll container, so without this the virtual
|
|
447
522
|
// cursor walks off-screen once navigation passes the visible window. Mirrors
|
|
@@ -535,6 +610,11 @@ export function Selector(props) {
|
|
|
535
610
|
});
|
|
536
611
|
}, [hasSearch, searchId, listboxId, searchQuery, hasQuery, searchPlaceholder, handleSearchChange, onKeyDown, popover.isOpen, highlightedIndex, getItemId, t]);
|
|
537
612
|
|
|
613
|
+
// The single-selection mark, resolved from the theme once per render. A
|
|
614
|
+
// theme that maps `check` to another indicator (a radio, say) changes every
|
|
615
|
+
// selected-option mark in the app through this one lookup.
|
|
616
|
+
const SelectionMark = useIndicator('check');
|
|
617
|
+
|
|
538
618
|
// Render an individual item
|
|
539
619
|
const renderItem = useCallback((item, flatIndex) => {
|
|
540
620
|
const isHighlighted = flatIndex === highlightedIndex;
|
|
@@ -554,13 +634,14 @@ export function Selector(props) {
|
|
|
554
634
|
children: renderOption ? renderOption(item) : /*#__PURE__*/_jsx(DefaultOption, {
|
|
555
635
|
option: item
|
|
556
636
|
})
|
|
557
|
-
}),
|
|
558
|
-
|
|
637
|
+
}), /*#__PURE__*/_jsx(SelectionMark, {
|
|
638
|
+
state: isSelected ? 'checked' : 'unchecked',
|
|
559
639
|
size: "sm",
|
|
560
|
-
|
|
640
|
+
isDisabled: item.disabled ?? false,
|
|
641
|
+
...themeProps('selector-check')
|
|
561
642
|
})]
|
|
562
643
|
}, item.value);
|
|
563
|
-
}, [renderOption, highlightedIndex, size, normalizedValue, getItemId, onItemSelect, onItemMouseEnter]);
|
|
644
|
+
}, [renderOption, highlightedIndex, size, normalizedValue, getItemId, onItemSelect, onItemMouseEnter, SelectionMark]);
|
|
564
645
|
|
|
565
646
|
// Render all options (handling sections/dividers)
|
|
566
647
|
const renderOptions = useCallback(() => {
|
|
@@ -574,9 +655,9 @@ export function Selector(props) {
|
|
|
574
655
|
// result-count live region instead.
|
|
575
656
|
return [/*#__PURE__*/_jsx("div", {
|
|
576
657
|
role: "presentation",
|
|
577
|
-
...{
|
|
658
|
+
...mergeProps(themeProps('selector-empty-state'), {
|
|
578
659
|
className: "x1b2ylru x2b8uid xv1l7n4 x9ynric xcr08ib"
|
|
579
|
-
},
|
|
660
|
+
}),
|
|
580
661
|
children: "No results found"
|
|
581
662
|
}, "empty")];
|
|
582
663
|
}
|
|
@@ -638,6 +719,7 @@ export function Selector(props) {
|
|
|
638
719
|
const selectorContent = /*#__PURE__*/_jsxs(_Fragment, {
|
|
639
720
|
children: [/*#__PURE__*/_jsxs("div", {
|
|
640
721
|
ref: el => {
|
|
722
|
+
anchorRef.current = el;
|
|
641
723
|
popover.triggerRef(el);
|
|
642
724
|
// Anchor + hover/focus listeners for the disabled-message tooltip.
|
|
643
725
|
// Handlers are gated internally by isEnabled, and anchor names
|
|
@@ -649,7 +731,8 @@ export function Selector(props) {
|
|
|
649
731
|
...mergeProps(themeProps('selector', {
|
|
650
732
|
variant,
|
|
651
733
|
size,
|
|
652
|
-
status: status?.type ?? null
|
|
734
|
+
status: status?.type ?? null,
|
|
735
|
+
disabled: isDisabled ? 'disabled' : null
|
|
653
736
|
}), stylex.props(inputWrapperStyles.base, styles.triggerContainer, sizeStyles[size], variant === 'ghost' && styles.triggerGhost, isDisabled && inputWrapperStyles.disabled, variant === 'ghost' && isDisabled && styles.triggerGhostDisabled, !selectedItem && styles.triggerPlaceholder, variant !== 'ghost' && status && inputStatusBorderStyles[status.type], variant !== 'ghost' && status && !isDisabled && inputStatusHoverShadowStyles[status.type], variant !== 'ghost' && inputGroup && groupStyles.inGroup, xstyle), className, style),
|
|
654
737
|
children: [startIcon && renderIconSlot(startIcon, {
|
|
655
738
|
size: 'sm',
|
|
@@ -682,7 +765,7 @@ export function Selector(props) {
|
|
|
682
765
|
,
|
|
683
766
|
disabled: isDisabled && !showsDisabledMessage,
|
|
684
767
|
"aria-disabled": showsDisabledMessage ? 'true' : undefined,
|
|
685
|
-
onKeyDown:
|
|
768
|
+
onKeyDown: handleTriggerKeyDown,
|
|
686
769
|
tabIndex: isDisabled && !showsDisabledMessage ? -1 : 0,
|
|
687
770
|
...{
|
|
688
771
|
className: "x78zum5 x6s0dn4 x1qughib x1txdalj x1iyjqo2 xs83m0k x1r8uery xeuugli x1717udv x1ghz6dp xc342km xng3xce xjbqb8w xjb2p0i x1qlqyl8 x15bjb6t x1heor9g x1ypdohk x1a2a7pz"
|
|
@@ -703,73 +786,49 @@ export function Selector(props) {
|
|
|
703
786
|
disabled: isDisabled
|
|
704
787
|
}), isBusy && /*#__PURE__*/_jsx(Spinner, {
|
|
705
788
|
size: "sm"
|
|
706
|
-
}), hasClear && value != null && !isDisabled && /*#__PURE__*/_jsx(
|
|
707
|
-
|
|
708
|
-
onClick: handleClear,
|
|
709
|
-
"aria-label": t('@astryx.selector.clearLabel', {
|
|
789
|
+
}), hasClear && value != null && !isDisabled && /*#__PURE__*/_jsx(InputClearButton, {
|
|
790
|
+
label: t('@astryx.selector.clearLabel', {
|
|
710
791
|
label
|
|
711
792
|
}),
|
|
793
|
+
onClick: handleClear,
|
|
794
|
+
iconClassName: stableClassName('selector-clear-icon')
|
|
795
|
+
}), showStatusIcon ? showStatusTooltip ? /*#__PURE__*/_jsx("button", {
|
|
796
|
+
ref: statusTooltip.ref,
|
|
797
|
+
type: "button",
|
|
798
|
+
"aria-label": t(STATUS_BUTTON_LABEL_KEY[status.type]),
|
|
799
|
+
"aria-describedby": statusTooltip.describedBy,
|
|
800
|
+
onClick: e => e.stopPropagation(),
|
|
712
801
|
...{
|
|
713
|
-
className: "x78zum5 x6s0dn4 xl56j7k x1717udv x1ghz6dp xc342km xng3xce xjbqb8w x1ypdohk xh6dtrn x1a2a7pz x1p25gnr x1y3gkto"
|
|
802
|
+
className: "x78zum5 x6s0dn4 xl56j7k x1717udv x1ghz6dp xc342km xng3xce xjbqb8w x1heor9g x1ypdohk xh6dtrn x1a2a7pz x1p25gnr x1y3gkto"
|
|
714
803
|
},
|
|
715
804
|
children: /*#__PURE__*/_jsx(Icon, {
|
|
716
|
-
icon: "close",
|
|
717
|
-
size: "sm",
|
|
718
|
-
color: "secondary"
|
|
719
|
-
// Stable theme target on the clear glyph itself, so a theme can
|
|
720
|
-
// restyle just this icon (color, size, hover) via `defineTheme`.
|
|
721
|
-
// Same-element rules in @layer astryx-theme win over the icon's
|
|
722
|
-
// own base color/size, which a button-level target could not
|
|
723
|
-
// reach.
|
|
724
|
-
,
|
|
725
|
-
...themeProps('selector-clear-icon')
|
|
726
|
-
})
|
|
727
|
-
}), /*#__PURE__*/_jsx("span", {
|
|
728
|
-
...{
|
|
729
|
-
0: {
|
|
730
|
-
className: "x2lah0s x78zum5 x6s0dn4 xl56j7k x1kky2od xlup9mm x11xpdln xuedmi6 xlr8y92 x1g0ag68 xv9yike"
|
|
731
|
-
},
|
|
732
|
-
2: {
|
|
733
|
-
className: "x2lah0s x78zum5 x6s0dn4 xl56j7k x1kky2od xlup9mm x11xpdln xuedmi6 xlr8y92 x1g0ag68 xv9yike x19jd1h0"
|
|
734
|
-
},
|
|
735
|
-
1: {
|
|
736
|
-
className: "x2lah0s x78zum5 x6s0dn4 xl56j7k x1kky2od xlup9mm x11xpdln xuedmi6 xlr8y92 x1g0ag68 xv9yike xq2gx43"
|
|
737
|
-
},
|
|
738
|
-
3: {
|
|
739
|
-
className: "x2lah0s x78zum5 x6s0dn4 xl56j7k x1kky2od xlup9mm x11xpdln xuedmi6 xlr8y92 x1g0ag68 xv9yike x19jd1h0 xq2gx43"
|
|
740
|
-
}
|
|
741
|
-
}[!!(!showStatusIcon && popover.isOpen) << 1 | !!showStatusIcon << 0],
|
|
742
|
-
children: showStatusIcon ? showStatusTooltip ? /*#__PURE__*/_jsx("button", {
|
|
743
|
-
ref: statusTooltip.ref,
|
|
744
|
-
type: "button",
|
|
745
|
-
"aria-label": t(STATUS_BUTTON_LABEL_KEY[status.type]),
|
|
746
|
-
"aria-describedby": statusTooltip.describedBy,
|
|
747
|
-
onClick: e => e.stopPropagation(),
|
|
748
|
-
...{
|
|
749
|
-
className: "x78zum5 x6s0dn4 xl56j7k x1717udv x1ghz6dp xc342km xng3xce xjbqb8w x1heor9g x1ypdohk xh6dtrn x1a2a7pz x1p25gnr x1y3gkto"
|
|
750
|
-
},
|
|
751
|
-
children: /*#__PURE__*/_jsx(Icon, {
|
|
752
|
-
icon: STATUS_ICON_MAP[status.type],
|
|
753
|
-
size: "sm",
|
|
754
|
-
color: STATUS_ICON_COLOR_MAP[status.type]
|
|
755
|
-
})
|
|
756
|
-
}) : /*#__PURE__*/_jsx(Icon, {
|
|
757
805
|
icon: STATUS_ICON_MAP[status.type],
|
|
758
806
|
size: "sm",
|
|
759
|
-
color: STATUS_ICON_COLOR_MAP[status.type]
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
807
|
+
color: STATUS_ICON_COLOR_MAP[status.type],
|
|
808
|
+
xstyle: styles.triggerIcon
|
|
809
|
+
})
|
|
810
|
+
}) : /*#__PURE__*/_jsx(Icon, {
|
|
811
|
+
icon: STATUS_ICON_MAP[status.type],
|
|
812
|
+
size: "sm",
|
|
813
|
+
color: STATUS_ICON_COLOR_MAP[status.type],
|
|
814
|
+
xstyle: styles.triggerIcon
|
|
815
|
+
}) : /*#__PURE__*/_jsx(Icon, {
|
|
816
|
+
icon: "chevronDown",
|
|
817
|
+
size: "sm",
|
|
818
|
+
color: "secondary"
|
|
819
|
+
// The rotation rides on the glyph, alongside the box and color
|
|
820
|
+
// the wrapper used to provide, so one element carries the mark,
|
|
821
|
+
// its open/closed transform, and the theme target.
|
|
822
|
+
,
|
|
823
|
+
xstyle: [styles.triggerIcon, styles.triggerIconRotation, popover.isOpen && styles.triggerIconOpen]
|
|
824
|
+
// Stable theme target on the chevron glyph itself, so a theme can
|
|
825
|
+
// restyle just this icon (color, size, hover) — and its
|
|
826
|
+
// open/closed state — via `defineTheme`. Same-element rules in
|
|
827
|
+
// @layer astryx-theme win over the icon's own base color/size,
|
|
828
|
+
// which a button-level target could not reach.
|
|
829
|
+
,
|
|
830
|
+
...themeProps('selector-indicator-icon', {
|
|
831
|
+
state: popover.isOpen ? 'expanded' : 'collapsed'
|
|
773
832
|
})
|
|
774
833
|
})]
|
|
775
834
|
}), popover.render(hasSearch ? /*#__PURE__*/_jsxs("div", {
|
|
@@ -779,8 +838,13 @@ export function Selector(props) {
|
|
|
779
838
|
role: "listbox",
|
|
780
839
|
"aria-labelledby": triggerId,
|
|
781
840
|
...{
|
|
782
|
-
|
|
783
|
-
|
|
841
|
+
0: {
|
|
842
|
+
className: "x9f619 xuyqlj2 x1odjw0f xu0wf1k x7a5moj x1hc1fzr x1ey1afo"
|
|
843
|
+
},
|
|
844
|
+
1: {
|
|
845
|
+
className: "x9f619 xuyqlj2 x1odjw0f xu0wf1k x1hc1fzr x1ey1afo x2hg6jq"
|
|
846
|
+
}
|
|
847
|
+
}[!!(variant !== 'ghost') << 0],
|
|
784
848
|
children: renderOptions()
|
|
785
849
|
})]
|
|
786
850
|
}) : /*#__PURE__*/_jsx("div", {
|
|
@@ -790,12 +854,18 @@ export function Selector(props) {
|
|
|
790
854
|
"aria-labelledby": triggerId,
|
|
791
855
|
...{
|
|
792
856
|
0: {
|
|
793
|
-
className: "x9f619 xuyqlj2 x1odjw0f
|
|
857
|
+
className: "x9f619 xuyqlj2 x1odjw0f xu0wf1k x7a5moj x1hc1fzr x1ey1afo"
|
|
858
|
+
},
|
|
859
|
+
2: {
|
|
860
|
+
className: "x9f619 xuyqlj2 x1odjw0f xu0wf1k x1hc1fzr x1ey1afo x2hg6jq"
|
|
794
861
|
},
|
|
795
862
|
1: {
|
|
796
|
-
className: "x9f619 xuyqlj2 x1odjw0f
|
|
863
|
+
className: "x9f619 xuyqlj2 x1odjw0f xu0wf1k x7a5moj xg01cxk xq2gx43"
|
|
864
|
+
},
|
|
865
|
+
3: {
|
|
866
|
+
className: "x9f619 xuyqlj2 x1odjw0f xu0wf1k x2hg6jq xg01cxk xq2gx43"
|
|
797
867
|
}
|
|
798
|
-
}[!!!isPositioned << 0],
|
|
868
|
+
}[!!(variant !== 'ghost') << 1 | !!!isPositioned << 0],
|
|
799
869
|
children: renderOptions()
|
|
800
870
|
}), {
|
|
801
871
|
placement: popoverPlacement,
|
package/dist/Selector/hooks.d.ts
CHANGED
|
@@ -5,7 +5,7 @@ interface UseSelectedItemOffsetOptions {
|
|
|
5
5
|
selectedItemIndex: number;
|
|
6
6
|
listboxId: string;
|
|
7
7
|
listboxRef: RefObject<HTMLDivElement | null>;
|
|
8
|
-
|
|
8
|
+
anchorRef: RefObject<HTMLElement | null>;
|
|
9
9
|
}
|
|
10
10
|
interface UseSelectedItemOffsetResult {
|
|
11
11
|
offset: number;
|
|
@@ -13,15 +13,15 @@ interface UseSelectedItemOffsetResult {
|
|
|
13
13
|
}
|
|
14
14
|
/**
|
|
15
15
|
* Calculates the offset needed to position the dropdown so that the selected
|
|
16
|
-
* item appears centered over the
|
|
16
|
+
* item appears centered over the outer selector control (macOS-style selector).
|
|
17
17
|
*
|
|
18
|
-
* The desired dropdown top is calculated directly from the
|
|
18
|
+
* The desired dropdown top is calculated directly from the anchor center and
|
|
19
19
|
* selected-item center, then clamped to the viewport. This preserves the
|
|
20
20
|
* default "selected item over trigger" behavior while letting the menu slide
|
|
21
21
|
* upward near the bottom edge or downward near the top edge instead of being
|
|
22
22
|
* clipped off-screen.
|
|
23
23
|
*/
|
|
24
|
-
export declare function useSelectedItemOffset({ isOpen, selectedItemIndex, listboxId, listboxRef,
|
|
24
|
+
export declare function useSelectedItemOffset({ isOpen, selectedItemIndex, listboxId, listboxRef, anchorRef, }: UseSelectedItemOffsetOptions): UseSelectedItemOffsetResult;
|
|
25
25
|
interface UseComboboxOptions {
|
|
26
26
|
selectableItems: SelectorOptionData[];
|
|
27
27
|
value?: string;
|
|
@@ -38,6 +38,13 @@ interface UseComboboxOptions {
|
|
|
38
38
|
* navigation owns those keys there) or when there is no value.
|
|
39
39
|
*/
|
|
40
40
|
onClear?: () => void;
|
|
41
|
+
/**
|
|
42
|
+
* With `hasSearch`, printable characters typed on the trigger are appended to
|
|
43
|
+
* the search query (opening the popup if needed), so type-to-find works
|
|
44
|
+
* without a separate open step. Characters keep arriving here until focus
|
|
45
|
+
* lands in the search input, which then owns its own typing.
|
|
46
|
+
*/
|
|
47
|
+
onSearchSeed?: (char: string) => void;
|
|
41
48
|
listboxId: string;
|
|
42
49
|
}
|
|
43
50
|
interface UseComboboxResult {
|
|
@@ -50,8 +57,13 @@ interface UseComboboxResult {
|
|
|
50
57
|
onItemMouseEnter: (item: SelectorOptionData, index: number) => void;
|
|
51
58
|
}
|
|
52
59
|
/**
|
|
53
|
-
* Handles keyboard navigation
|
|
60
|
+
* Handles keyboard navigation and selection for combobox/listbox patterns.
|
|
61
|
+
*
|
|
62
|
+
* Type-to-select is not handled here: callers that want it compose the shared
|
|
63
|
+
* `useTypeahead` hook and run it ahead of this handler (see Selector). That
|
|
64
|
+
* keeps matching consistent with the other collections and leaves consumers
|
|
65
|
+
* whose own input already filters the items (CommandPalette) untouched.
|
|
54
66
|
*/
|
|
55
|
-
export declare function useCombobox({ selectableItems, value, isDisabled, isOpen, hasSearch, onOpen, onClose, onSelect, onClear, listboxId, }: UseComboboxOptions): UseComboboxResult;
|
|
67
|
+
export declare function useCombobox({ selectableItems, value, isDisabled, isOpen, hasSearch, onOpen, onClose, onSelect, onClear, onSearchSeed, listboxId, }: UseComboboxOptions): UseComboboxResult;
|
|
56
68
|
export {};
|
|
57
69
|
//# sourceMappingURL=hooks.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../src/Selector/hooks.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../src/Selector/hooks.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,SAAS,CAAC;AAyBhD,UAAU,4BAA4B;IACpC,MAAM,EAAE,OAAO,CAAC;IAChB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC7C,SAAS,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CAC1C;AAED,UAAU,2BAA2B;IACnC,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,OAAO,CAAC;CACvB;AAED;;;;;;;;;GASG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,MAAM,EACN,iBAAiB,EACjB,SAAS,EACT,UAAU,EACV,SAAS,GACV,EAAE,4BAA4B,GAAG,2BAA2B,CAgF5D;AAMD,UAAU,kBAAkB;IAC1B,eAAe,EAAE,kBAAkB,EAAE,CAAC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,UAAU,iBAAiB;IACzB,gBAAgB,EAAE,MAAM,CAAC;IACzB,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACrC,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,SAAS,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;IAC5C,YAAY,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACjD,gBAAgB,EAAE,CAAC,IAAI,EAAE,kBAAkB,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACrE;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,EAC1B,eAAe,EACf,KAAK,EACL,UAAkB,EAClB,MAAM,EACN,SAAiB,EACjB,MAAM,EACN,OAAO,EACP,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,SAAS,GACV,EAAE,kBAAkB,GAAG,iBAAiB,CA2NxC"}
|