@astryxdesign/core 0.1.7 → 0.1.8-canary.0c4d8d7
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 +65 -0
- package/README.md +30 -19
- package/dist/AppShell/AppShell.d.ts.map +1 -1
- package/dist/AppShell/AppShell.js +6 -2
- package/dist/AppShell/AppShellMobileContext.d.ts +8 -0
- package/dist/AppShell/AppShellMobileContext.d.ts.map +1 -1
- package/dist/Avatar/Avatar.d.ts +10 -5
- package/dist/Avatar/Avatar.d.ts.map +1 -1
- package/dist/Avatar/Avatar.js +12 -8
- package/dist/Avatar/AvatarSizeContext.d.ts +1 -1
- package/dist/Avatar/AvatarSizeContext.js +1 -1
- package/dist/Avatar/AvatarStatusDot.d.ts +2 -2
- package/dist/Avatar/AvatarStatusDot.js +2 -2
- package/dist/AvatarGroup/AvatarGroup.d.ts +2 -2
- package/dist/AvatarGroup/AvatarGroup.d.ts.map +1 -1
- package/dist/AvatarGroup/AvatarGroup.js +2 -2
- package/dist/AvatarGroup/AvatarGroupOverflow.d.ts +1 -1
- package/dist/AvatarGroup/AvatarGroupOverflow.d.ts.map +1 -1
- package/dist/AvatarGroup/AvatarGroupOverflow.js +16 -14
- package/dist/Banner/Banner.d.ts +9 -1
- package/dist/Banner/Banner.d.ts.map +1 -1
- package/dist/Banner/Banner.js +31 -2
- package/dist/Button/Button.d.ts +8 -2
- package/dist/Button/Button.d.ts.map +1 -1
- package/dist/Button/Button.js +31 -2
- package/dist/ButtonGroup/ButtonGroup.d.ts +9 -1
- package/dist/ButtonGroup/ButtonGroup.d.ts.map +1 -1
- package/dist/ButtonGroup/ButtonGroup.js +30 -1
- package/dist/Card/Card.d.ts +8 -2
- package/dist/Card/Card.d.ts.map +1 -1
- package/dist/Card/Card.js +28 -2
- package/dist/Carousel/Carousel.d.ts +6 -2
- package/dist/Carousel/Carousel.d.ts.map +1 -1
- package/dist/Carousel/Carousel.js +55 -5
- package/dist/Chat/ChatComposer.d.ts +8 -0
- package/dist/Chat/ChatComposer.d.ts.map +1 -1
- package/dist/Chat/ChatComposer.js +31 -6
- package/dist/Chat/ChatComposerDrawer.d.ts +2 -0
- package/dist/Chat/ChatComposerDrawer.d.ts.map +1 -1
- package/dist/Chat/ChatComposerDrawer.js +11 -1
- package/dist/Chat/ChatComposerInput.d.ts +20 -3
- package/dist/Chat/ChatComposerInput.d.ts.map +1 -1
- package/dist/Chat/ChatComposerInput.js +19 -3
- package/dist/Chat/ChatLayout.d.ts.map +1 -1
- package/dist/Chat/ChatLayoutScrollButton.d.ts.map +1 -1
- package/dist/Chat/ChatMessage.d.ts +1 -1
- package/dist/Chat/ChatMessage.d.ts.map +1 -1
- package/dist/Chat/ChatMessage.js +1 -1
- package/dist/Chat/ChatMessageMetadata.d.ts.map +1 -1
- package/dist/Chat/ChatSendButton.d.ts.map +1 -1
- package/dist/Chat/ChatToolCalls.d.ts +5 -1
- package/dist/Chat/ChatToolCalls.d.ts.map +1 -1
- package/dist/Chat/ChatToolCalls.js +12 -3
- package/dist/Chat/useTriggerMenu.d.ts.map +1 -1
- package/dist/Citation/Citation.d.ts.map +1 -1
- package/dist/Citation/Citation.js +10 -4
- package/dist/ClickableCard/ClickableCard.d.ts +9 -2
- package/dist/ClickableCard/ClickableCard.d.ts.map +1 -1
- package/dist/ClickableCard/ClickableCard.js +3 -0
- package/dist/CodeBlock/CodeBlock.d.ts.map +1 -1
- package/dist/CodeBlock/CodeBlock.js +8 -1
- package/dist/Collapsible/Collapsible.d.ts +11 -1
- package/dist/Collapsible/Collapsible.d.ts.map +1 -1
- package/dist/Collapsible/Collapsible.js +36 -4
- package/dist/CommandPalette/CommandPaletteInput.d.ts +7 -1
- package/dist/CommandPalette/CommandPaletteInput.d.ts.map +1 -1
- package/dist/CommandPalette/CommandPaletteInput.js +6 -1
- package/dist/ContextMenu/ContextMenu.d.ts.map +1 -1
- package/dist/ContextMenu/ContextMenu.js +4 -3
- package/dist/ContextMenu/index.d.ts +3 -0
- package/dist/ContextMenu/index.d.ts.map +1 -1
- package/dist/ContextMenu/index.js +7 -1
- package/dist/DateTimeInput/DateTimeInput.d.ts.map +1 -1
- package/dist/DateTimeInput/DateTimeInput.js +10 -1
- package/dist/Dialog/Dialog.d.ts.map +1 -1
- package/dist/Dialog/Dialog.js +2 -1
- package/dist/DropdownMenu/DropdownMenu.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenu.js +8 -4
- package/dist/DropdownMenu/DropdownMenuCheckboxItem.d.ts +88 -0
- package/dist/DropdownMenu/DropdownMenuCheckboxItem.d.ts.map +1 -0
- package/dist/DropdownMenu/DropdownMenuCheckboxItem.js +169 -0
- package/dist/DropdownMenu/DropdownMenuContext.d.ts +17 -1
- package/dist/DropdownMenu/DropdownMenuContext.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenuContext.js +18 -0
- package/dist/DropdownMenu/DropdownMenuRadioGroup.d.ts +68 -0
- package/dist/DropdownMenu/DropdownMenuRadioGroup.d.ts.map +1 -0
- package/dist/DropdownMenu/DropdownMenuRadioGroup.js +69 -0
- package/dist/DropdownMenu/DropdownMenuRadioItem.d.ts +69 -0
- package/dist/DropdownMenu/DropdownMenuRadioItem.d.ts.map +1 -0
- package/dist/DropdownMenu/DropdownMenuRadioItem.js +178 -0
- package/dist/DropdownMenu/index.d.ts +5 -1
- package/dist/DropdownMenu/index.d.ts.map +1 -1
- package/dist/DropdownMenu/index.js +10 -1
- package/dist/DropdownMenu/menuItemRoles.d.ts +13 -0
- package/dist/DropdownMenu/menuItemRoles.d.ts.map +1 -0
- package/dist/DropdownMenu/menuItemRoles.js +15 -0
- package/dist/FieldStatus/FieldStatus.d.ts +8 -0
- package/dist/FieldStatus/FieldStatus.d.ts.map +1 -1
- package/dist/FieldStatus/FieldStatus.js +22 -4
- package/dist/FileInput/FileInput.d.ts.map +1 -1
- package/dist/FileInput/FileInput.js +10 -2
- package/dist/HoverCard/HoverCard.d.ts +9 -1
- package/dist/HoverCard/HoverCard.d.ts.map +1 -1
- package/dist/HoverCard/HoverCard.js +2 -0
- package/dist/HoverCard/useHoverCard.d.ts +8 -0
- package/dist/HoverCard/useHoverCard.d.ts.map +1 -1
- package/dist/HoverCard/useHoverCard.js +7 -2
- package/dist/Icon/Icon.d.ts +43 -13
- package/dist/Icon/Icon.d.ts.map +1 -1
- package/dist/Icon/Icon.js +62 -27
- package/dist/Layer/useLayer.d.ts +6 -0
- package/dist/Layer/useLayer.d.ts.map +1 -1
- package/dist/Layer/useLayer.js +2 -0
- package/dist/MobileNav/MobileNav.d.ts.map +1 -1
- package/dist/MobileNav/MobileNav.js +6 -1
- package/dist/MobileNav/MobileNavToggle.d.ts.map +1 -1
- package/dist/MobileNav/MobileNavToggle.js +4 -0
- package/dist/MultiSelector/MultiSelector.d.ts.map +1 -1
- package/dist/MultiSelector/MultiSelector.js +39 -12
- package/dist/MultiSelector/hooks.d.ts.map +1 -1
- package/dist/MultiSelector/hooks.js +16 -0
- package/dist/NumberInput/NumberInput.d.ts.map +1 -1
- package/dist/Outline/Outline.d.ts +68 -3
- package/dist/Outline/Outline.d.ts.map +1 -1
- package/dist/Outline/Outline.js +128 -26
- package/dist/Outline/useScrollSpy.d.ts +27 -7
- package/dist/Outline/useScrollSpy.d.ts.map +1 -1
- package/dist/Outline/useScrollSpy.js +202 -70
- package/dist/OverflowList/OverflowList.d.ts +20 -3
- package/dist/OverflowList/OverflowList.d.ts.map +1 -1
- package/dist/OverflowList/OverflowList.js +29 -4
- package/dist/PowerSearch/PowerSearchEditPopover.js +1 -1
- package/dist/PowerSearch/usePowerSearchSource.d.ts.map +1 -1
- package/dist/SelectableCard/SelectableCard.d.ts +9 -2
- package/dist/SelectableCard/SelectableCard.d.ts.map +1 -1
- package/dist/SelectableCard/SelectableCard.js +14 -11
- package/dist/Selector/Selector.d.ts.map +1 -1
- package/dist/Selector/Selector.js +4 -2
- package/dist/Selector/hooks.d.ts.map +1 -1
- package/dist/Selector/hooks.js +16 -0
- package/dist/SideNav/SideNavCollapseButton.d.ts.map +1 -1
- package/dist/SideNav/SideNavHeading.d.ts.map +1 -1
- package/dist/SideNav/SideNavHeading.js +21 -8
- package/dist/SideNav/SideNavItem.d.ts.map +1 -1
- package/dist/Slider/Slider.d.ts.map +1 -1
- package/dist/Slider/Slider.js +15 -1
- package/dist/TabList/Tab.d.ts.map +1 -1
- package/dist/TabList/Tab.js +2 -2
- package/dist/TabList/TabList.d.ts.map +1 -1
- package/dist/TabList/TabList.js +2 -0
- package/dist/TabList/TabMenu.d.ts.map +1 -1
- package/dist/TabList/TabMenu.js +1 -1
- package/dist/Table/Table.d.ts +1 -1
- package/dist/Table/Table.js +1 -1
- package/dist/Table/index.d.ts +4 -0
- package/dist/Table/index.d.ts.map +1 -1
- package/dist/Table/index.js +2 -0
- package/dist/Table/plugins/groupedRows/useTableGroupedRows.d.ts.map +1 -1
- package/dist/Table/plugins/rowExpansion/useTableRowExpansion.d.ts.map +1 -1
- package/dist/Table/plugins/rowExpansion/useTableRowExpansion.js +24 -2
- package/dist/Table/plugins/rowStatus/index.d.ts +3 -0
- package/dist/Table/plugins/rowStatus/index.d.ts.map +1 -0
- package/dist/Table/plugins/rowStatus/index.js +3 -0
- package/dist/Table/plugins/rowStatus/useTableRowStatus.d.ts +60 -0
- package/dist/Table/plugins/rowStatus/useTableRowStatus.d.ts.map +1 -0
- package/dist/Table/plugins/rowStatus/useTableRowStatus.js +145 -0
- package/dist/Table/plugins/selection/useTableSelection.d.ts +12 -0
- package/dist/Table/plugins/selection/useTableSelection.d.ts.map +1 -1
- package/dist/Table/plugins/selection/useTableSelection.js +4 -1
- package/dist/Table/plugins/sortable/useTableSortable.d.ts.map +1 -1
- package/dist/Table/plugins/sortable/useTableSortable.js +18 -7
- package/dist/Table/plugins/tree/index.d.ts +5 -0
- package/dist/Table/plugins/tree/index.d.ts.map +1 -0
- package/dist/Table/plugins/tree/index.js +4 -0
- package/dist/Table/plugins/tree/useTableTreeData.d.ts +38 -0
- package/dist/Table/plugins/tree/useTableTreeData.d.ts.map +1 -0
- package/dist/Table/plugins/tree/useTableTreeData.js +358 -0
- package/dist/Table/plugins/tree/useTableTreeState.d.ts +51 -0
- package/dist/Table/plugins/tree/useTableTreeState.d.ts.map +1 -0
- package/dist/Table/plugins/tree/useTableTreeState.js +175 -0
- package/dist/Table/useBaseTablePlugins.d.ts.map +1 -1
- package/dist/Table/useBaseTablePlugins.js +6 -3
- package/dist/Thumbnail/Thumbnail.d.ts +8 -1
- package/dist/Thumbnail/Thumbnail.d.ts.map +1 -1
- package/dist/Thumbnail/Thumbnail.js +46 -8
- package/dist/TimeInput/TimeInput.d.ts.map +1 -1
- package/dist/TimeInput/TimeInput.js +15 -4
- package/dist/Tokenizer/Tokenizer.d.ts +1 -1
- package/dist/Tokenizer/Tokenizer.d.ts.map +1 -1
- package/dist/Tokenizer/Tokenizer.js +16 -4
- package/dist/Toolbar/Toolbar.d.ts.map +1 -1
- package/dist/Toolbar/Toolbar.js +8 -1
- package/dist/TopNav/TopNavHeading.d.ts.map +1 -1
- package/dist/TopNav/TopNavHeading.js +18 -8
- package/dist/TopNav/TopNavMegaMenu.js +10 -4
- package/dist/TopNav/TopNavMenu.d.ts +2 -1
- package/dist/TopNav/TopNavMenu.d.ts.map +1 -1
- package/dist/TopNav/TopNavMenu.js +68 -6
- package/dist/TreeList/TreeListItem.d.ts.map +1 -1
- package/dist/TreeList/TreeListItem.js +5 -14
- package/dist/astryx.css +51 -16
- package/dist/astryx.umd.js +56 -56
- package/dist/astryx.umd.js.map +4 -4
- package/dist/authoring/doc.d.ts.map +1 -1
- package/dist/hooks/computeOverflow.d.ts +47 -0
- package/dist/hooks/computeOverflow.d.ts.map +1 -0
- package/dist/hooks/computeOverflow.js +213 -0
- package/dist/hooks/useOverflow.d.ts +19 -0
- package/dist/hooks/useOverflow.d.ts.map +1 -1
- package/dist/hooks/useOverflow.js +37 -25
- package/dist/theme/Theme.js +1 -1
- package/dist/theme/defineTheme.d.ts +1 -1
- package/dist/theme/defineTheme.js +1 -1
- package/dist/theme/generateThemeRules.d.ts.map +1 -1
- package/dist/theme/generateThemeRules.js +51 -0
- package/dist/theme/hct.d.ts +0 -1
- package/dist/theme/hct.d.ts.map +1 -1
- package/dist/theme/hct.js +0 -3
- package/dist/utils/types.d.ts +13 -0
- package/dist/utils/types.d.ts.map +1 -1
- package/docs.mjs +32 -461
- package/locales/en.json +212 -172
- package/locales/fr-FR.json +10 -0
- package/locales/pseudo.json +30 -0
- package/package.json +3 -1
- package/scripts/postinstall.mjs +93 -0
- package/src/AppShell/AppShell.tsx +6 -0
- package/src/AppShell/AppShellMobileContext.tsx +8 -0
- package/src/AppShell/useAppShellMobile.doc.mjs +8 -0
- package/src/Avatar/Avatar.doc.mjs +6 -6
- package/src/Avatar/Avatar.tsx +16 -11
- package/src/Avatar/AvatarSizeContext.ts +1 -1
- package/src/Avatar/AvatarStatusDot.tsx +2 -2
- package/src/AvatarGroup/AvatarGroup.doc.mjs +1 -1
- package/src/AvatarGroup/AvatarGroup.test.tsx +17 -3
- package/src/AvatarGroup/AvatarGroup.tsx +3 -3
- package/src/AvatarGroup/AvatarGroupOverflow.doc.mjs +4 -4
- package/src/AvatarGroup/AvatarGroupOverflow.tsx +21 -5
- package/src/Banner/Banner.doc.mjs +9 -0
- package/src/Banner/Banner.test.tsx +30 -0
- package/src/Banner/Banner.tsx +47 -3
- package/src/Button/Button.doc.mjs +9 -0
- package/src/Button/Button.test.tsx +49 -0
- package/src/Button/Button.tsx +25 -1
- package/src/ButtonGroup/ButtonGroup.doc.mjs +3 -0
- package/src/ButtonGroup/ButtonGroup.test.tsx +37 -0
- package/src/ButtonGroup/ButtonGroup.tsx +32 -0
- package/src/Card/Card.doc.mjs +9 -0
- package/src/Card/Card.test.tsx +21 -3
- package/src/Card/Card.tsx +35 -2
- package/src/Carousel/Carousel.doc.mjs +1 -0
- package/src/Carousel/Carousel.test.tsx +149 -1
- package/src/Carousel/Carousel.tsx +62 -5
- package/src/Chat/Chat.doc.mjs +1 -1
- package/src/Chat/ChatComposer.doc.mjs +9 -0
- package/src/Chat/ChatComposer.test.tsx +35 -0
- package/src/Chat/ChatComposer.tsx +58 -9
- package/src/Chat/ChatComposerDrawer.test.tsx +61 -0
- package/src/Chat/ChatComposerDrawer.tsx +11 -1
- package/src/Chat/ChatComposerInput.doc.mjs +7 -0
- package/src/Chat/ChatComposerInput.test.tsx +87 -0
- package/src/Chat/ChatComposerInput.tsx +35 -3
- package/src/Chat/ChatLayout.tsx +3 -1
- package/src/Chat/ChatLayoutScrollButton.tsx +3 -1
- package/src/Chat/ChatMessage.tsx +4 -2
- package/src/Chat/ChatMessageMetadata.tsx +1 -2
- package/src/Chat/ChatSendButton.tsx +5 -1
- package/src/Chat/ChatToolCalls.test.tsx +64 -0
- package/src/Chat/ChatToolCalls.tsx +13 -1
- package/src/Chat/useTriggerMenu.tsx +3 -1
- package/src/CheckboxInput/CheckboxInput.doc.mjs +1 -1
- package/src/CheckboxInput/CheckboxInput.test.tsx +32 -1
- package/src/CheckboxList/CheckboxList.test.tsx +9 -1
- package/src/Citation/Citation.test.tsx +51 -0
- package/src/Citation/Citation.tsx +8 -2
- package/src/ClickableCard/ClickableCard.doc.mjs +2 -0
- package/src/ClickableCard/ClickableCard.test.tsx +34 -0
- package/src/ClickableCard/ClickableCard.tsx +11 -1
- package/src/CodeBlock/CodeBlock.test.tsx +56 -0
- package/src/CodeBlock/CodeBlock.tsx +9 -1
- package/src/Collapsible/Collapsible.doc.mjs +7 -0
- package/src/Collapsible/Collapsible.test.tsx +80 -0
- package/src/Collapsible/Collapsible.tsx +58 -5
- package/src/CommandPalette/CommandPaletteInput.doc.mjs +26 -9
- package/src/CommandPalette/CommandPaletteInput.test.tsx +34 -0
- package/src/CommandPalette/CommandPaletteInput.tsx +11 -0
- package/src/ContextMenu/ContextMenu.test.tsx +75 -1
- package/src/ContextMenu/ContextMenu.tsx +10 -5
- package/src/ContextMenu/index.ts +15 -0
- package/src/DateTimeInput/DateTimeInput.test.tsx +35 -0
- package/src/DateTimeInput/DateTimeInput.tsx +14 -2
- package/src/Dialog/Dialog.tsx +12 -2
- package/src/DropdownMenu/DropdownMenu.doc.mjs +23 -0
- package/src/DropdownMenu/DropdownMenu.tsx +11 -6
- package/src/DropdownMenu/DropdownMenuCheckboxItem.doc.mjs +95 -0
- package/src/DropdownMenu/DropdownMenuCheckboxItem.tsx +236 -0
- package/src/DropdownMenu/DropdownMenuContext.tsx +29 -1
- package/src/DropdownMenu/DropdownMenuItem.doc.mjs +7 -1
- package/src/DropdownMenu/DropdownMenuRadioGroup.doc.mjs +80 -0
- package/src/DropdownMenu/DropdownMenuRadioGroup.tsx +118 -0
- package/src/DropdownMenu/DropdownMenuRadioItem.doc.mjs +80 -0
- package/src/DropdownMenu/DropdownMenuRadioItem.tsx +232 -0
- package/src/DropdownMenu/DropdownMenuSelectable.test.tsx +163 -0
- package/src/DropdownMenu/index.ts +23 -3
- package/src/DropdownMenu/menuItemRoles.ts +22 -0
- package/src/Field/Field.doc.mjs +1 -1
- package/src/Field/Field.test.tsx +57 -12
- package/src/Field/FieldLabel.doc.mjs +1 -1
- package/src/FieldStatus/FieldStatus.doc.mjs +17 -5
- package/src/FieldStatus/FieldStatus.test.tsx +78 -40
- package/src/FieldStatus/FieldStatus.tsx +22 -4
- package/src/FileInput/FileInput.test.tsx +52 -3
- package/src/FileInput/FileInput.tsx +13 -2
- package/src/HoverCard/HoverCard.doc.mjs +13 -0
- package/src/HoverCard/HoverCard.test.tsx +21 -2
- package/src/HoverCard/HoverCard.tsx +11 -0
- package/src/HoverCard/useHoverCard.doc.mjs +2 -0
- package/src/HoverCard/useHoverCard.tsx +24 -2
- package/src/Icon/Icon.doc.mjs +12 -0
- package/src/Icon/Icon.test.tsx +142 -0
- package/src/Icon/Icon.tsx +98 -30
- package/src/IconButton/IconButton.doc.mjs +8 -0
- package/src/IconButton/IconButton.test.tsx +15 -18
- package/src/Item/Item.doc.mjs +1 -1
- package/src/Layer/useLayer.tsx +8 -0
- package/src/MobileNav/MobileNav.tsx +12 -1
- package/src/MobileNav/MobileNavToggle.test.tsx +116 -0
- package/src/MobileNav/MobileNavToggle.tsx +9 -1
- package/src/MultiSelector/MultiSelector.doc.mjs +4 -2
- package/src/MultiSelector/MultiSelector.test.tsx +162 -1
- package/src/MultiSelector/MultiSelector.tsx +55 -12
- package/src/MultiSelector/hooks.ts +17 -0
- package/src/NumberInput/NumberInput.doc.mjs +2 -2
- package/src/NumberInput/NumberInput.test.tsx +11 -7
- package/src/NumberInput/NumberInput.tsx +1 -2
- package/src/Outline/Outline.doc.mjs +123 -3
- package/src/Outline/Outline.test.tsx +735 -0
- package/src/Outline/Outline.tsx +183 -33
- package/src/Outline/useScrollSpy.ts +248 -72
- package/src/OverflowList/OverflowList.doc.mjs +39 -6
- package/src/OverflowList/OverflowList.test.tsx +111 -0
- package/src/OverflowList/OverflowList.tsx +48 -8
- package/src/PowerSearch/PowerSearchEditPopover.test.tsx +67 -0
- package/src/PowerSearch/PowerSearchEditPopover.tsx +1 -1
- package/src/PowerSearch/usePowerSearchSource.ts +1 -2
- package/src/SelectableCard/SelectableCard.doc.mjs +2 -0
- package/src/SelectableCard/SelectableCard.test.tsx +46 -4
- package/src/SelectableCard/SelectableCard.tsx +27 -14
- package/src/Selector/Selector.test.tsx +69 -0
- package/src/Selector/Selector.tsx +5 -1
- package/src/Selector/SelectorOption.doc.mjs +1 -1
- package/src/Selector/hooks.ts +17 -0
- package/src/SideNav/SideNav.test.tsx +119 -3
- package/src/SideNav/SideNavCollapseButton.tsx +6 -1
- package/src/SideNav/SideNavHeading.tsx +24 -8
- package/src/SideNav/SideNavItem.doc.mjs +2 -2
- package/src/SideNav/SideNavItem.tsx +5 -1
- package/src/Slider/Slider.test.tsx +62 -2
- package/src/Slider/Slider.tsx +15 -1
- package/src/Switch/Switch.doc.mjs +1 -1
- package/src/Switch/Switch.test.tsx +32 -1
- package/src/TabList/Tab.tsx +5 -1
- package/src/TabList/TabList.doc.mjs +3 -3
- package/src/TabList/TabList.test.tsx +66 -0
- package/src/TabList/TabList.tsx +8 -0
- package/src/TabList/TabMenu.tsx +4 -1
- package/src/Table/Table.doc.mjs +2 -0
- package/src/Table/Table.tsx +1 -1
- package/src/Table/index.ts +12 -0
- package/src/Table/plugins/groupedRows/useTableGroupedRows.tsx +6 -2
- package/src/Table/plugins/rowExpansion/useTableRowExpansion.test.tsx +90 -1
- package/src/Table/plugins/rowExpansion/useTableRowExpansion.tsx +37 -5
- package/src/Table/plugins/rowStatus/index.ts +7 -0
- package/src/Table/plugins/rowStatus/useTableRowStatus.test.tsx +138 -0
- package/src/Table/plugins/rowStatus/useTableRowStatus.tsx +189 -0
- package/src/Table/plugins/selection/useTableSelection.test.tsx +16 -0
- package/src/Table/plugins/selection/useTableSelection.tsx +18 -1
- package/src/Table/plugins/sortable/useTableSortable.test.tsx +95 -9
- package/src/Table/plugins/sortable/useTableSortable.tsx +23 -7
- package/src/Table/plugins/tree/index.ts +12 -0
- package/src/Table/plugins/tree/useTableTreeData-perf.test.tsx +163 -0
- package/src/Table/plugins/tree/useTableTreeData.test.tsx +594 -0
- package/src/Table/plugins/tree/useTableTreeData.tsx +495 -0
- package/src/Table/plugins/tree/useTableTreeState.test.tsx +636 -0
- package/src/Table/plugins/tree/useTableTreeState.tsx +253 -0
- package/src/Table/useBaseTablePlugins.ts +6 -2
- package/src/Table/useTableRowStatus.doc.mjs +30 -0
- package/src/Table/useTableSelection.doc.mjs +65 -14
- package/src/Table/useTableTreeData.doc.mjs +75 -0
- package/src/Table/useTableTreeState.doc.mjs +98 -0
- package/src/TextArea/TextArea.doc.mjs +1 -1
- package/src/TextArea/TextArea.test.tsx +9 -1
- package/src/TextInput/TextInput.doc.mjs +1 -1
- package/src/Thumbnail/Thumbnail.doc.mjs +9 -0
- package/src/Thumbnail/Thumbnail.test.tsx +38 -8
- package/src/Thumbnail/Thumbnail.tsx +28 -1
- package/src/TimeInput/TimeInput.test.tsx +76 -1
- package/src/TimeInput/TimeInput.tsx +19 -6
- package/src/Tokenizer/Tokenizer.doc.mjs +1 -1
- package/src/Tokenizer/Tokenizer.test.tsx +137 -2
- package/src/Tokenizer/Tokenizer.tsx +16 -4
- package/src/Toolbar/Toolbar.tsx +10 -3
- package/src/TopNav/TopNav.test.tsx +80 -1
- package/src/TopNav/TopNavHeading.tsx +24 -8
- package/src/TopNav/TopNavMegaMenu.test.tsx +149 -1
- package/src/TopNav/TopNavMegaMenu.tsx +10 -4
- package/src/TopNav/TopNavMenu.test.tsx +118 -4
- package/src/TopNav/TopNavMenu.tsx +83 -5
- package/src/TreeList/TreeList.test.tsx +32 -1
- package/src/TreeList/TreeListItem.tsx +19 -10
- package/src/authoring/doc.ts +1 -3
- package/src/docs-script.test.mjs +18 -13
- package/src/hooks/computeOverflow.test.ts +422 -0
- package/src/hooks/computeOverflow.ts +290 -0
- package/src/hooks/useOverflow.test.ts +96 -4
- package/src/hooks/useOverflow.ts +77 -33
- package/src/postinstall.test.mjs +71 -0
- package/src/theme/Theme.doc.mjs +4 -4
- package/src/theme/Theme.tsx +1 -1
- package/src/theme/defineTheme.ts +1 -1
- package/src/theme/generateThemeRules.test.ts +65 -0
- package/src/theme/generateThemeRules.ts +56 -0
- package/src/theme/hct.ts +0 -4
- package/src/utils/types.ts +14 -0
- package/dist/TreeList/treeListItem.markers.stylex.d.ts +0 -16
- package/dist/TreeList/treeListItem.markers.stylex.d.ts.map +0 -1
- package/dist/TreeList/treeListItem.markers.stylex.js +0 -22
- package/src/TreeList/treeListItem.markers.stylex.ts +0 -20
|
@@ -0,0 +1,178 @@
|
|
|
1
|
+
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
|
+
|
|
3
|
+
'use client';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* @file DropdownMenuRadioItem.tsx
|
|
7
|
+
* @input React, stylex, Item + Icon + DropdownMenu context + tokens from core
|
|
8
|
+
* @output DropdownMenuRadioItem — a single option in a radio group.
|
|
9
|
+
* @position Sub-component; must be used inside a DropdownMenuRadioGroup.
|
|
10
|
+
*
|
|
11
|
+
* A menu item representing one option in a single-select group
|
|
12
|
+
* (role="menuitemradio"). The row owns the role and aria-checked; there is no
|
|
13
|
+
* nested native <input> (per the WAI-ARIA menuitemradio pattern). Selection
|
|
14
|
+
* state + onChange come from DropdownMenuRadioGroupContext. Keyboard nav +
|
|
15
|
+
* Enter/Space activation come from the parent DropdownMenu.
|
|
16
|
+
*
|
|
17
|
+
* The round radio visual (circle + center dot) is decorative (aria-hidden) —
|
|
18
|
+
* the row owns the checked state. Its size is derived from the menu's item size
|
|
19
|
+
* and it swaps to the inline-end of the row on coarse-pointer (touch) devices
|
|
20
|
+
* via CSS `order`. The dot is a shaped element, not an icon (a filled circle
|
|
21
|
+
* has no registry glyph).
|
|
22
|
+
*/
|
|
23
|
+
import { useCallback } from 'react';
|
|
24
|
+
import * as stylex from '@stylexjs/stylex';
|
|
25
|
+
import { renderIconSlot } from "../Icon/index.js";
|
|
26
|
+
import { Item } from "../Item/index.js";
|
|
27
|
+
import { useDropdownMenuContext } from "./DropdownMenuContext.js";
|
|
28
|
+
import "../theme/tokens.stylex.js";
|
|
29
|
+
import { colorVars, spacingVars, durationVars, easeVars, borderVars } from "../theme/tokens.stylex.js";
|
|
30
|
+
import { mergeProps, themeProps } from "../utils/index.js";
|
|
31
|
+
import { useDropdownMenuRadioGroupContext } from "./DropdownMenuContext.js";
|
|
32
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
33
|
+
const styles = {
|
|
34
|
+
root: {
|
|
35
|
+
kzqmXN: "xh8yej3",
|
|
36
|
+
kaIpWk: "x1ws5lxm",
|
|
37
|
+
kMwMTN: "x1tgivj0",
|
|
38
|
+
kWkggS: "xjbqb8w x1c52tdz x1uwx2nv",
|
|
39
|
+
kkrTdU: "x1ypdohk",
|
|
40
|
+
kI3sdo: "x1a2a7pz",
|
|
41
|
+
$$css: true
|
|
42
|
+
},
|
|
43
|
+
disabled: {
|
|
44
|
+
kSiTet: "xbyyjgo",
|
|
45
|
+
kkrTdU: "x1h6gzvc",
|
|
46
|
+
$$css: true
|
|
47
|
+
},
|
|
48
|
+
circle: {
|
|
49
|
+
k1xSpc: "x78zum5",
|
|
50
|
+
kGNEyG: "x6s0dn4",
|
|
51
|
+
kjj79g: "xl56j7k",
|
|
52
|
+
kmuXW: "x2lah0s",
|
|
53
|
+
kB7OPa: "x9f619",
|
|
54
|
+
kMzoRj: "x1litavf",
|
|
55
|
+
ksu8eU: "x1y0btm7",
|
|
56
|
+
kaIpWk: "x16rqkct",
|
|
57
|
+
k1ekBW: "xts7igz",
|
|
58
|
+
kIyJzY: "xuedmi6 x12w9bfk",
|
|
59
|
+
kAMwcw: "xlr8y92",
|
|
60
|
+
kayTVb: "x1g77sc7 xozvky",
|
|
61
|
+
keTefX: "x1lziwak x1jymrmb",
|
|
62
|
+
$$css: true
|
|
63
|
+
},
|
|
64
|
+
unchecked: {
|
|
65
|
+
kVAM5u: "xvy26l8",
|
|
66
|
+
kWkggS: "x10xzikg",
|
|
67
|
+
$$css: true
|
|
68
|
+
},
|
|
69
|
+
checked: {
|
|
70
|
+
kVAM5u: "xad5do",
|
|
71
|
+
kWkggS: "x1ewilqj",
|
|
72
|
+
$$css: true
|
|
73
|
+
},
|
|
74
|
+
dot: {
|
|
75
|
+
kaIpWk: "x16rqkct",
|
|
76
|
+
kWkggS: "x1azo05",
|
|
77
|
+
$$css: true
|
|
78
|
+
}
|
|
79
|
+
};
|
|
80
|
+
const circleSizeStyles = {
|
|
81
|
+
sm: {
|
|
82
|
+
kzqmXN: "x1xp8n7a",
|
|
83
|
+
kZKoxP: "xmix8c7",
|
|
84
|
+
$$css: true
|
|
85
|
+
},
|
|
86
|
+
md: {
|
|
87
|
+
kzqmXN: "x17z2i9w",
|
|
88
|
+
kZKoxP: "x17rw0jw",
|
|
89
|
+
$$css: true
|
|
90
|
+
}
|
|
91
|
+
};
|
|
92
|
+
const dotSizeStyles = {
|
|
93
|
+
sm: {
|
|
94
|
+
kzqmXN: "x1v4s8kt",
|
|
95
|
+
kZKoxP: "xols6we",
|
|
96
|
+
$$css: true
|
|
97
|
+
},
|
|
98
|
+
md: {
|
|
99
|
+
kzqmXN: "x1xc55vz",
|
|
100
|
+
kZKoxP: "xdk7pt",
|
|
101
|
+
$$css: true
|
|
102
|
+
}
|
|
103
|
+
};
|
|
104
|
+
/**
|
|
105
|
+
* A single option in a DropdownMenuRadioGroup (role="menuitemradio").
|
|
106
|
+
*
|
|
107
|
+
* @example
|
|
108
|
+
* ```
|
|
109
|
+
* <DropdownMenuRadioGroup value={sort} onChange={setSort} aria-label="Sort by">
|
|
110
|
+
* <DropdownMenuRadioItem value="newest" label="Newest" />
|
|
111
|
+
* <DropdownMenuRadioItem value="oldest" label="Oldest" icon="clock" />
|
|
112
|
+
* </DropdownMenuRadioGroup>
|
|
113
|
+
* ```
|
|
114
|
+
*/
|
|
115
|
+
export function DropdownMenuRadioItem({
|
|
116
|
+
value,
|
|
117
|
+
label,
|
|
118
|
+
description,
|
|
119
|
+
icon,
|
|
120
|
+
isDisabled = false,
|
|
121
|
+
endContent,
|
|
122
|
+
xstyle,
|
|
123
|
+
className,
|
|
124
|
+
style,
|
|
125
|
+
...rest
|
|
126
|
+
}) {
|
|
127
|
+
const menuCtx = useDropdownMenuContext();
|
|
128
|
+
const groupCtx = useDropdownMenuRadioGroupContext();
|
|
129
|
+
if (!groupCtx) {
|
|
130
|
+
throw new Error('DropdownMenuRadioItem must be used within a DropdownMenuRadioGroup');
|
|
131
|
+
}
|
|
132
|
+
const menuSize = menuCtx?.menuSize ?? 'md';
|
|
133
|
+
const controlSize = menuSize === 'sm' ? 'sm' : 'md';
|
|
134
|
+
const isChecked = groupCtx.value === value;
|
|
135
|
+
const handleClick = useCallback(() => {
|
|
136
|
+
if (isDisabled) {
|
|
137
|
+
return;
|
|
138
|
+
}
|
|
139
|
+
groupCtx.onChange(value);
|
|
140
|
+
if (groupCtx.hasCloseOnSelect) {
|
|
141
|
+
menuCtx?.closeMenu();
|
|
142
|
+
}
|
|
143
|
+
}, [isDisabled, groupCtx, value, menuCtx]);
|
|
144
|
+
return /*#__PURE__*/_jsx(Item, {
|
|
145
|
+
...rest,
|
|
146
|
+
role: "menuitemradio",
|
|
147
|
+
"aria-checked": isChecked,
|
|
148
|
+
tabIndex: isDisabled ? undefined : -1,
|
|
149
|
+
marker: /*#__PURE__*/_jsx("span", {
|
|
150
|
+
"aria-hidden": "true",
|
|
151
|
+
...mergeProps(themeProps('dropdown-menu-radio', {
|
|
152
|
+
size: controlSize,
|
|
153
|
+
checked: isChecked ? 'checked' : null,
|
|
154
|
+
disabled: isDisabled ? 'disabled' : null
|
|
155
|
+
}), stylex.props(styles.circle, circleSizeStyles[controlSize], isChecked ? styles.checked : styles.unchecked)),
|
|
156
|
+
children: isChecked && /*#__PURE__*/_jsx("span", {
|
|
157
|
+
...stylex.props(styles.dot, dotSizeStyles[controlSize])
|
|
158
|
+
})
|
|
159
|
+
}),
|
|
160
|
+
startContent: icon ? renderIconSlot(icon, {
|
|
161
|
+
size: 'sm',
|
|
162
|
+
color: 'secondary'
|
|
163
|
+
}) : undefined,
|
|
164
|
+
label: label,
|
|
165
|
+
description: description,
|
|
166
|
+
endContent: endContent,
|
|
167
|
+
onClick: handleClick,
|
|
168
|
+
isDisabled: isDisabled,
|
|
169
|
+
xstyle: [styles.root, isDisabled && styles.disabled, xstyle],
|
|
170
|
+
...mergeProps(themeProps('dropdown-menu-item', {
|
|
171
|
+
size: menuSize
|
|
172
|
+
}), {
|
|
173
|
+
className,
|
|
174
|
+
style
|
|
175
|
+
})
|
|
176
|
+
});
|
|
177
|
+
}
|
|
178
|
+
DropdownMenuRadioItem.displayName = 'DropdownMenuRadioItem';
|
|
@@ -4,5 +4,9 @@
|
|
|
4
4
|
* @position Public API entry point
|
|
5
5
|
*/
|
|
6
6
|
export { DropdownMenu, type DropdownMenuProps, type DropdownMenuButtonProps, type DropdownMenuItemData, type DropdownMenuDivider, type DropdownMenuSection, type DropdownMenuOption, } from './DropdownMenu';
|
|
7
|
-
export { DropdownMenuItem, type DropdownMenuItemProps
|
|
7
|
+
export { DropdownMenuItem, type DropdownMenuItemProps } from './DropdownMenuItem';
|
|
8
|
+
export { DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemProps, } from './DropdownMenuCheckboxItem';
|
|
9
|
+
export { DropdownMenuRadioGroup, type DropdownMenuRadioGroupProps, } from './DropdownMenuRadioGroup';
|
|
10
|
+
export { DropdownMenuRadioItem, type DropdownMenuRadioItemProps, } from './DropdownMenuRadioItem';
|
|
11
|
+
export { DropdownMenuContext, useDropdownMenuContext, type DropdownMenuContextValue, type DropdownMenuSize, } from './DropdownMenuContext';
|
|
8
12
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/index.ts"],"names":[],"mappings":"AAIA;;;;GAIG;AAEH,OAAO,EACL,YAAY,EACZ,KAAK,iBAAiB,EACtB,KAAK,uBAAuB,EAC5B,KAAK,oBAAoB,EACzB,KAAK,mBAAmB,EACxB,KAAK,mBAAmB,EACxB,KAAK,kBAAkB,GACxB,MAAM,gBAAgB,CAAC;AAExB,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/index.ts"],"names":[],"mappings":"AAIA;;;;GAIG;AAEH,OAAO,EACL,YAAY,EACZ,KAAK,iBAAiB,EACtB,KAAK,uBAAuB,EAC5B,KAAK,oBAAoB,EACzB,KAAK,mBAAmB,EACxB,KAAK,mBAAmB,EACxB,KAAK,kBAAkB,GACxB,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAAC,gBAAgB,EAAE,KAAK,qBAAqB,EAAC,MAAM,oBAAoB,CAAC;AAGhF,OAAO,EACL,wBAAwB,EACxB,KAAK,6BAA6B,GACnC,MAAM,4BAA4B,CAAC;AACpC,OAAO,EACL,sBAAsB,EACtB,KAAK,2BAA2B,GACjC,MAAM,0BAA0B,CAAC;AAClC,OAAO,EACL,qBAAqB,EACrB,KAAK,0BAA0B,GAChC,MAAM,yBAAyB,CAAC;AAIjC,OAAO,EACL,mBAAmB,EACnB,sBAAsB,EACtB,KAAK,wBAAwB,EAC7B,KAAK,gBAAgB,GACtB,MAAM,uBAAuB,CAAC"}
|
|
@@ -8,4 +8,13 @@
|
|
|
8
8
|
* @position Public API entry point
|
|
9
9
|
*/
|
|
10
10
|
export { DropdownMenu } from "./DropdownMenu.js";
|
|
11
|
-
export { DropdownMenuItem } from "./DropdownMenuItem.js";
|
|
11
|
+
export { DropdownMenuItem } from "./DropdownMenuItem.js";
|
|
12
|
+
|
|
13
|
+
// Selectable items — checkbox (independent) and radio (single-select group).
|
|
14
|
+
export { DropdownMenuCheckboxItem } from "./DropdownMenuCheckboxItem.js";
|
|
15
|
+
export { DropdownMenuRadioGroup } from "./DropdownMenuRadioGroup.js";
|
|
16
|
+
export { DropdownMenuRadioItem } from "./DropdownMenuRadioItem.js";
|
|
17
|
+
|
|
18
|
+
// Menu-coordination context — public so consumers can build custom menu items
|
|
19
|
+
// that read the menu size / close the menu.
|
|
20
|
+
export { DropdownMenuContext, useDropdownMenuContext } from "./DropdownMenuContext.js";
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @file menuItemRoles.ts
|
|
3
|
+
* @output Shared menu-item role set + focus selector.
|
|
4
|
+
* @position Internal; used by DropdownMenu and ContextMenu so their
|
|
5
|
+
* roving-focus, typeahead, and Enter/Space activation stay in sync.
|
|
6
|
+
*
|
|
7
|
+
* Includes the selectable items (menuitemradio/menuitemcheckbox) alongside
|
|
8
|
+
* plain menuitem so checkbox/radio rows are reachable by arrow keys, typeahead,
|
|
9
|
+
* and Enter/Space — not just role="menuitem".
|
|
10
|
+
*/
|
|
11
|
+
export declare const MENU_ITEM_ROLES: ReadonlySet<string>;
|
|
12
|
+
export declare const MENU_ITEM_SELECTOR: string;
|
|
13
|
+
//# sourceMappingURL=menuItemRoles.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"menuItemRoles.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/menuItemRoles.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH,eAAO,MAAM,eAAe,EAAE,WAAW,CAAC,MAAM,CAI9C,CAAC;AAEH,eAAO,MAAM,kBAAkB,EAAE,MAErB,CAAC"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* @file menuItemRoles.ts
|
|
5
|
+
* @output Shared menu-item role set + focus selector.
|
|
6
|
+
* @position Internal; used by DropdownMenu and ContextMenu so their
|
|
7
|
+
* roving-focus, typeahead, and Enter/Space activation stay in sync.
|
|
8
|
+
*
|
|
9
|
+
* Includes the selectable items (menuitemradio/menuitemcheckbox) alongside
|
|
10
|
+
* plain menuitem so checkbox/radio rows are reachable by arrow keys, typeahead,
|
|
11
|
+
* and Enter/Space — not just role="menuitem".
|
|
12
|
+
*/
|
|
13
|
+
|
|
14
|
+
export const MENU_ITEM_ROLES = new Set(['menuitem', 'menuitemradio', 'menuitemcheckbox']);
|
|
15
|
+
export const MENU_ITEM_SELECTOR = [...MENU_ITEM_ROLES].map(role => `[role="${role}"]:not([aria-disabled="true"])`).join(',');
|
|
@@ -43,6 +43,14 @@ export interface FieldStatusProps extends BaseProps<HTMLDivElement> {
|
|
|
43
43
|
/**
|
|
44
44
|
* A status message component for form fields.
|
|
45
45
|
*
|
|
46
|
+
* Screen-reader announcements go through the persistent `useAnnounce` live
|
|
47
|
+
* regions (assertive for errors, polite otherwise) rather than `role`/
|
|
48
|
+
* `aria-live` on the rendered element. Live regions that mount together with
|
|
49
|
+
* their content are not reliably announced by assistive technology, and
|
|
50
|
+
* FieldStatus is almost always conditionally rendered by its callers. The
|
|
51
|
+
* message is announced whenever it appears — including on first mount — and
|
|
52
|
+
* whenever it changes.
|
|
53
|
+
*
|
|
46
54
|
* @example
|
|
47
55
|
* ```
|
|
48
56
|
* <FieldStatus
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FieldStatus.d.ts","sourceRoot":"","sources":["../../src/FieldStatus/FieldStatus.tsx"],"names":[],"mappings":"AAkBA,OAAO,
|
|
1
|
+
{"version":3,"file":"FieldStatus.d.ts","sourceRoot":"","sources":["../../src/FieldStatus/FieldStatus.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAU5C,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,gBAAgB,CAAC;AAyCpD;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,IAAI,CAAC;IACf,QAAQ,EAAE,IAAI,CAAC;CAChB;AAED;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,MAAM,qBAAqB,CAAC;AAE7D,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACjE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,IAAI,EAAE,eAAe,CAAC;IACtB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC;CAC9B;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,IAAI,EACJ,OAAO,EACP,EAAE,EACF,OAAoB,EACpB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,gBAAgB,qBAkClB;yBA5Ce,WAAW"}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
/**
|
|
4
4
|
* @file FieldStatus.tsx
|
|
5
|
-
* @input Uses React, stylex, theme tokens
|
|
5
|
+
* @input Uses React, stylex, theme tokens, useAnnounce
|
|
6
6
|
* @output Exports FieldStatus component, FieldStatusProps
|
|
7
7
|
* @position Core implementation; consumed by Field, Switch, CheckboxInput, and the FieldStatus entrypoint
|
|
8
8
|
*
|
|
@@ -16,8 +16,9 @@
|
|
|
16
16
|
|
|
17
17
|
'use client';
|
|
18
18
|
|
|
19
|
-
import React from 'react';
|
|
19
|
+
import React, { useEffect } from 'react';
|
|
20
20
|
import * as stylex from '@stylexjs/stylex';
|
|
21
|
+
import { useAnnounce } from "../hooks/useAnnounce.js";
|
|
21
22
|
import { mergeProps } from "../utils/index.js";
|
|
22
23
|
import "../theme/tokens.stylex.js";
|
|
23
24
|
import { colorVars, radiusVars, spacingVars, typographyVars, typeScaleVars } from "../theme/tokens.stylex.js";
|
|
@@ -87,6 +88,14 @@ const colorStyles = {
|
|
|
87
88
|
/**
|
|
88
89
|
* A status message component for form fields.
|
|
89
90
|
*
|
|
91
|
+
* Screen-reader announcements go through the persistent `useAnnounce` live
|
|
92
|
+
* regions (assertive for errors, polite otherwise) rather than `role`/
|
|
93
|
+
* `aria-live` on the rendered element. Live regions that mount together with
|
|
94
|
+
* their content are not reliably announced by assistive technology, and
|
|
95
|
+
* FieldStatus is almost always conditionally rendered by its callers. The
|
|
96
|
+
* message is announced whenever it appears — including on first mount — and
|
|
97
|
+
* whenever it changes.
|
|
98
|
+
*
|
|
90
99
|
* @example
|
|
91
100
|
* ```
|
|
92
101
|
* <FieldStatus
|
|
@@ -112,11 +121,20 @@ export function FieldStatus({
|
|
|
112
121
|
...rest
|
|
113
122
|
}) {
|
|
114
123
|
const entryStyle = useEntryAnimation('slideDown');
|
|
124
|
+
const announce = useAnnounce();
|
|
125
|
+
|
|
126
|
+
// Announce the message through the persistently-mounted live regions.
|
|
127
|
+
// Announce-on-mount is intentional: callers conditionally mount FieldStatus
|
|
128
|
+
// when a status appears (and whole forms can mount with a server-side
|
|
129
|
+
// validation error already present), and both cases must be heard.
|
|
130
|
+
useEffect(() => {
|
|
131
|
+
if (message) {
|
|
132
|
+
announce(message, type === 'error' ? 'assertive' : 'polite');
|
|
133
|
+
}
|
|
134
|
+
}, [announce, message, type]);
|
|
115
135
|
return /*#__PURE__*/_jsx("div", {
|
|
116
136
|
ref: ref,
|
|
117
137
|
id: id,
|
|
118
|
-
role: type === 'error' ? 'alert' : 'status',
|
|
119
|
-
"aria-live": type === 'error' ? 'assertive' : 'polite',
|
|
120
138
|
...rest,
|
|
121
139
|
...mergeProps(themeProps('field-status', {
|
|
122
140
|
type,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileInput.d.ts","sourceRoot":"","sources":["../../src/FileInput/FileInput.tsx"],"names":[],"mappings":"AAsCA,OAAO,EAGL,KAAK,WAAW,EAEjB,MAAM,UAAU,CAAC;AAMlB,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;AA0N9C,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,SAAS,EACT,UAAU,GAAG,cAAc,GAAG,OAAO,CACtC;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,CAAC;IAC5B;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9D;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAC5B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,aAAqB,EACrB,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,MAAM,EACN,UAAkB,EAClB,OAAO,EACP,QAAQ,EACR,UAAkB,EAClB,eAAe,EACf,UAAkB,EAClB,SAAiB,EACjB,MAAM,EAAE,UAAU,EAClB,WAAW,EACX,WAAW,EACX,IAAc,EACd,UAAkB,EAClB,YAAY,EACZ,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,cAAc,+
|
|
1
|
+
{"version":3,"file":"FileInput.d.ts","sourceRoot":"","sources":["../../src/FileInput/FileInput.tsx"],"names":[],"mappings":"AAsCA,OAAO,EAGL,KAAK,WAAW,EAEjB,MAAM,UAAU,CAAC;AAMlB,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;AA0N9C,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,SAAS,EACT,UAAU,GAAG,cAAc,GAAG,OAAO,CACtC;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,CAAC;IAC5B;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9D;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAC5B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,aAAqB,EACrB,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,MAAM,EACN,UAAkB,EAClB,OAAO,EACP,QAAQ,EACR,UAAkB,EAClB,eAAe,EACf,UAAkB,EAClB,SAAiB,EACjB,MAAM,EAAE,UAAU,EAClB,WAAW,EACX,WAAW,EACX,IAAc,EACd,UAAkB,EAClB,YAAY,EACZ,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,cAAc,+BAiYhB;yBA3Ze,SAAS"}
|
|
@@ -441,8 +441,16 @@ export function FileInput({
|
|
|
441
441
|
tabIndex: isDisabled && !showsDisabledMessage ? -1 : 0,
|
|
442
442
|
"aria-disabled": showsDisabledMessage ? 'true' : undefined,
|
|
443
443
|
onClick: handleClick,
|
|
444
|
-
onKeyDown: handleKeyDown
|
|
445
|
-
|
|
444
|
+
onKeyDown: handleKeyDown
|
|
445
|
+
// aria-label suppresses child content from the accessible name, so
|
|
446
|
+
// compose the selected filenames into it — otherwise a screen-reader
|
|
447
|
+
// user refocusing the control hears only the field label and cannot
|
|
448
|
+
// tell what (if anything) is attached.
|
|
449
|
+
,
|
|
450
|
+
"aria-label": hasFiles && fileNames ? t('@astryx.fileInput.triggerWithFiles', {
|
|
451
|
+
label,
|
|
452
|
+
fileNames
|
|
453
|
+
}) : label,
|
|
446
454
|
"aria-busy": isLoading || undefined
|
|
447
455
|
// These describe the operable control, so they belong on the focusable
|
|
448
456
|
// role="button" wrapper — not the hidden tabIndex={-1} file input the
|
|
@@ -60,6 +60,14 @@ export interface HoverCardProps extends Pick<BaseProps, 'xstyle' | 'className' |
|
|
|
60
60
|
* @default true
|
|
61
61
|
*/
|
|
62
62
|
isEnabled?: boolean;
|
|
63
|
+
/**
|
|
64
|
+
* Accessible name for the hover card popup.
|
|
65
|
+
*
|
|
66
|
+
* When provided, the popup is exposed to assistive technology as a named
|
|
67
|
+
* `role="dialog"`. When omitted, the popup falls back to `role="group"` —
|
|
68
|
+
* a group may validly be unnamed, an unnamed dialog may not.
|
|
69
|
+
*/
|
|
70
|
+
label?: string;
|
|
63
71
|
/**
|
|
64
72
|
* Callback fired when hover card visibility changes.
|
|
65
73
|
* Called with `true` when shown and `false` when hidden.
|
|
@@ -102,7 +110,7 @@ export interface HoverCardProps extends Pick<BaseProps, 'xstyle' | 'className' |
|
|
|
102
110
|
* </HoverCard>
|
|
103
111
|
* ```
|
|
104
112
|
*/
|
|
105
|
-
export declare function HoverCard({ children, content, placement, alignment, delay, hideDelay, focusTrigger, isEnabled, onOpenChange, hasHoverIndication, isOpen, isDefaultOpen, xstyle, className, style, }: HoverCardProps): ReactElement;
|
|
113
|
+
export declare function HoverCard({ children, content, placement, alignment, delay, hideDelay, focusTrigger, isEnabled, label, onOpenChange, hasHoverIndication, isOpen, isDefaultOpen, xstyle, className, style, }: HoverCardProps): ReactElement;
|
|
106
114
|
export declare namespace HoverCard {
|
|
107
115
|
var displayName: string;
|
|
108
116
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HoverCard.d.ts","sourceRoot":"","sources":["../../src/HoverCard/HoverCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAsB,KAAK,YAAY,EAAE,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAG7E,OAAO,EAAe,KAAK,qBAAqB,EAAC,MAAM,gBAAgB,CAAC;AACxE,OAAO,KAAK,EAAC,cAAc,EAAE,cAAc,EAAC,MAAM,mBAAmB,CAAC;AACtE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,YAAY,EAAC,qBAAqB,EAAC,MAAM,gBAAgB,CAAC;AAiB1D,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,SAAS,EACT,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,OAAO,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,qBAAqB,CAAC;IAErC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;;;;OAOG;IACH,kBAAkB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAEtC;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAiBD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,OAAO,EACP,SAAmB,EACnB,SAAoB,EACpB,KAAW,EACX,SAAe,EACf,YAAqB,EACrB,SAAgB,EAChB,YAAY,EACZ,kBAA2B,EAC3B,MAAM,EACN,aAAa,EACb,MAAM,EACN,SAAS,EACT,KAAK,GACN,EAAE,cAAc,GAAG,YAAY,
|
|
1
|
+
{"version":3,"file":"HoverCard.d.ts","sourceRoot":"","sources":["../../src/HoverCard/HoverCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAsB,KAAK,YAAY,EAAE,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAG7E,OAAO,EAAe,KAAK,qBAAqB,EAAC,MAAM,gBAAgB,CAAC;AACxE,OAAO,KAAK,EAAC,cAAc,EAAE,cAAc,EAAC,MAAM,mBAAmB,CAAC;AACtE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,YAAY,EAAC,qBAAqB,EAAC,MAAM,gBAAgB,CAAC;AAiB1D,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,SAAS,EACT,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,OAAO,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,qBAAqB,CAAC;IAErC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;;;;OAOG;IACH,kBAAkB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAEtC;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAiBD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,OAAO,EACP,SAAmB,EACnB,SAAoB,EACpB,KAAW,EACX,SAAe,EACf,YAAqB,EACrB,SAAgB,EAChB,KAAK,EACL,YAAY,EACZ,kBAA2B,EAC3B,MAAM,EACN,aAAa,EACb,MAAM,EACN,SAAS,EACT,KAAK,GACN,EAAE,cAAc,GAAG,YAAY,CAiH/B;yBAlIe,SAAS"}
|
|
@@ -60,6 +60,7 @@ export function HoverCard({
|
|
|
60
60
|
hideDelay = 200,
|
|
61
61
|
focusTrigger = 'auto',
|
|
62
62
|
isEnabled = true,
|
|
63
|
+
label,
|
|
63
64
|
onOpenChange,
|
|
64
65
|
hasHoverIndication = 'auto',
|
|
65
66
|
isOpen,
|
|
@@ -88,6 +89,7 @@ export function HoverCard({
|
|
|
88
89
|
hideDelay,
|
|
89
90
|
focusTrigger,
|
|
90
91
|
isEnabled,
|
|
92
|
+
label,
|
|
91
93
|
isOpen,
|
|
92
94
|
isDefaultOpen,
|
|
93
95
|
onShow: handleShow,
|
|
@@ -50,6 +50,14 @@ export interface HoverCardOptions {
|
|
|
50
50
|
* @default true
|
|
51
51
|
*/
|
|
52
52
|
isEnabled?: boolean;
|
|
53
|
+
/**
|
|
54
|
+
* Accessible name for the hover card popup.
|
|
55
|
+
*
|
|
56
|
+
* When provided, the popup is exposed to assistive technology as a named
|
|
57
|
+
* `role="dialog"`. When omitted, the popup falls back to `role="group"` —
|
|
58
|
+
* a group may validly be unnamed, an unnamed dialog may not.
|
|
59
|
+
*/
|
|
60
|
+
label?: string;
|
|
53
61
|
/**
|
|
54
62
|
* Controlled open state. When provided, overrides hover/focus triggers:
|
|
55
63
|
* - `true`: force-show the hover card (hover/focus hide is suppressed)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useHoverCard.d.ts","sourceRoot":"","sources":["../../src/HoverCard/useHoverCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAEH,OAAO,EAKL,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,KAAK,kBAAkB,EACvB,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,mBAAmB,CAAC;AA6C3B;;GAEG;AACH,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEhE,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,qBAAqB,CAAC;IAErC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,GAAG,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAE9B;;;OAGG;IACH,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEtC;;;;OAIG;IACH,cAAc,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEzC;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;;;;;;OAOG;IACH,eAAe,EAAE,CACf,QAAQ,EAAE,SAAS,EACnB,KAAK,CAAC,EAAE,IAAI,CAAC,kBAAkB,EAAE,aAAa,CAAC,KAC5C,SAAS,CAAC;IAEf;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;IAEjB;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;CAClB;AAyBD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,YAAY,CAAC,OAAO,GAAE,gBAAqB,GAAG,eAAe,
|
|
1
|
+
{"version":3,"file":"useHoverCard.d.ts","sourceRoot":"","sources":["../../src/HoverCard/useHoverCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAEH,OAAO,EAKL,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,KAAK,kBAAkB,EACvB,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,mBAAmB,CAAC;AA6C3B;;GAEG;AACH,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEhE,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,qBAAqB,CAAC;IAErC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,GAAG,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAE9B;;;OAGG;IACH,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEtC;;;;OAIG;IACH,cAAc,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEzC;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;;;;;;OAOG;IACH,eAAe,EAAE,CACf,QAAQ,EAAE,SAAS,EACnB,KAAK,CAAC,EAAE,IAAI,CAAC,kBAAkB,EAAE,aAAa,CAAC,KAC5C,SAAS,CAAC;IAEf;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;IAEjB;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;CAClB;AAyBD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,YAAY,CAAC,OAAO,GAAE,gBAAqB,GAAG,eAAe,CA4S5E"}
|
|
@@ -95,6 +95,7 @@ export function useHoverCard(options = {}) {
|
|
|
95
95
|
hideDelay = 200,
|
|
96
96
|
focusTrigger = 'auto',
|
|
97
97
|
isEnabled = true,
|
|
98
|
+
label,
|
|
98
99
|
isOpen,
|
|
99
100
|
isDefaultOpen = false,
|
|
100
101
|
onShow,
|
|
@@ -261,7 +262,11 @@ export function useHoverCard(options = {}) {
|
|
|
261
262
|
const renderProps = {
|
|
262
263
|
placement: renderPlacement,
|
|
263
264
|
alignment: props?.alignment ?? alignment,
|
|
264
|
-
|
|
265
|
+
// A named dialog when a label is provided; otherwise a group. A group
|
|
266
|
+
// may validly be unnamed, an unnamed dialog may not — and hover cards
|
|
267
|
+
// are non-modal, so group is honest semantics without a name.
|
|
268
|
+
role: label ? 'dialog' : 'group',
|
|
269
|
+
'aria-label': label || undefined,
|
|
265
270
|
xstyle: [popoverXstyle, layerAnimations[renderPlacement]],
|
|
266
271
|
// Render the layer as inline-safe phrasing markup so HoverCard stays
|
|
267
272
|
// valid (and hydration-stable) inside inline contexts like a `<p>`.
|
|
@@ -312,7 +317,7 @@ export function useHoverCard(options = {}) {
|
|
|
312
317
|
},
|
|
313
318
|
children: children
|
|
314
319
|
}), renderProps);
|
|
315
|
-
}, [layer, placement, alignment, clearTimeouts, scheduleHide, popoverXstyle]);
|
|
320
|
+
}, [layer, placement, alignment, label, clearTimeouts, scheduleHide, popoverXstyle]);
|
|
316
321
|
return {
|
|
317
322
|
ref,
|
|
318
323
|
positionRef: layer.ref,
|
package/dist/Icon/Icon.d.ts
CHANGED
|
@@ -82,23 +82,28 @@ declare const colorStyles: Readonly<{
|
|
|
82
82
|
/**
|
|
83
83
|
* Size styles for direct SVG icon components.
|
|
84
84
|
* Uses width/height only — SVG components handle their own viewBox scaling.
|
|
85
|
+
*
|
|
86
|
+
* Sizes are expressed in `rem` (relative to the root font-size) so icons scale
|
|
87
|
+
* in step with text when the document font-size changes, matching the rest of
|
|
88
|
+
* the design system's rem-based type scale. Values are the px-equivalents at a
|
|
89
|
+
* 16px root: 12px → 0.75rem, 16px → 1rem, 20px → 1.25rem, 24px → 1.5rem.
|
|
85
90
|
*/
|
|
86
91
|
declare const sizeStyles: Readonly<{
|
|
87
92
|
readonly xsm: Readonly<{
|
|
88
|
-
readonly width: stylex.StyleXClassNameFor<"width",
|
|
89
|
-
readonly height: stylex.StyleXClassNameFor<"height",
|
|
93
|
+
readonly width: stylex.StyleXClassNameFor<"width", "0.75rem">;
|
|
94
|
+
readonly height: stylex.StyleXClassNameFor<"height", "0.75rem">;
|
|
90
95
|
}>;
|
|
91
96
|
readonly sm: Readonly<{
|
|
92
|
-
readonly width: stylex.StyleXClassNameFor<"width",
|
|
93
|
-
readonly height: stylex.StyleXClassNameFor<"height",
|
|
97
|
+
readonly width: stylex.StyleXClassNameFor<"width", "1rem">;
|
|
98
|
+
readonly height: stylex.StyleXClassNameFor<"height", "1rem">;
|
|
94
99
|
}>;
|
|
95
100
|
readonly md: Readonly<{
|
|
96
|
-
readonly width: stylex.StyleXClassNameFor<"width",
|
|
97
|
-
readonly height: stylex.StyleXClassNameFor<"height",
|
|
101
|
+
readonly width: stylex.StyleXClassNameFor<"width", "1.25rem">;
|
|
102
|
+
readonly height: stylex.StyleXClassNameFor<"height", "1.25rem">;
|
|
98
103
|
}>;
|
|
99
104
|
readonly lg: Readonly<{
|
|
100
|
-
readonly width: stylex.StyleXClassNameFor<"width",
|
|
101
|
-
readonly height: stylex.StyleXClassNameFor<"height",
|
|
105
|
+
readonly width: stylex.StyleXClassNameFor<"width", "1.5rem">;
|
|
106
|
+
readonly height: stylex.StyleXClassNameFor<"height", "1.5rem">;
|
|
102
107
|
}>;
|
|
103
108
|
}>;
|
|
104
109
|
export type IconColor = keyof typeof colorStyles;
|
|
@@ -128,13 +133,38 @@ export interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'ref' | 'color'
|
|
|
128
133
|
color?: IconColor;
|
|
129
134
|
/**
|
|
130
135
|
* The size of the icon.
|
|
131
|
-
* - 'xsm': 12px
|
|
132
|
-
* - 'sm': 16px
|
|
133
|
-
* - 'md': 20px
|
|
134
|
-
* - 'lg': 24px
|
|
136
|
+
* - 'xsm': 0.75rem (12px at a 16px root)
|
|
137
|
+
* - 'sm': 1rem (16px at a 16px root)
|
|
138
|
+
* - 'md': 1.25rem (20px at a 16px root)
|
|
139
|
+
* - 'lg': 1.5rem (24px at a 16px root)
|
|
135
140
|
* @default 'md'
|
|
136
141
|
*/
|
|
137
142
|
size?: IconSize;
|
|
143
|
+
/**
|
|
144
|
+
* Accessible name for the icon. Set this only when the icon is MEANINGFUL on
|
|
145
|
+
* its own — a standalone status glyph or an icon-only indicator with no
|
|
146
|
+
* adjacent text conveying the same information. Providing it exposes the icon
|
|
147
|
+
* to assistive tech as `role="img"` with this string as the accessible name
|
|
148
|
+
* (via `aria-label`) and drops the default `aria-hidden="true"`.
|
|
149
|
+
*
|
|
150
|
+
* Omit it (the default) for decorative icons — the common case, e.g. an icon
|
|
151
|
+
* beside a text label — and the icon stays hidden from assistive tech
|
|
152
|
+
* (`aria-hidden="true"`). An empty string (`''`) is treated the same as
|
|
153
|
+
* omitting it (decorative), since an empty accessible name is meaningless.
|
|
154
|
+
*
|
|
155
|
+
* Don't set `label` when an interactive parent (Button, IconButton, link)
|
|
156
|
+
* already names the control — that produces a duplicate announcement.
|
|
157
|
+
*
|
|
158
|
+
* @example
|
|
159
|
+
* ```
|
|
160
|
+
* // Meaningful, standalone icon
|
|
161
|
+
* <Icon icon="success" label="Completed" />
|
|
162
|
+
*
|
|
163
|
+
* // Decorative icon (default) — omit label
|
|
164
|
+
* <Icon icon="search" />
|
|
165
|
+
* ```
|
|
166
|
+
*/
|
|
167
|
+
label?: string;
|
|
138
168
|
}
|
|
139
169
|
/**
|
|
140
170
|
* Renders an icon from the icon registry or a custom SVG component.
|
|
@@ -144,7 +174,7 @@ export interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'ref' | 'color'
|
|
|
144
174
|
* <Icon icon="close" size="md" color="primary" />
|
|
145
175
|
* ```
|
|
146
176
|
*/
|
|
147
|
-
export declare function Icon({ icon, color, size, ref, ...props }: IconProps): React.JSX.Element;
|
|
177
|
+
export declare function Icon({ icon, color, size, label, ref, ...props }: IconProps): React.JSX.Element;
|
|
148
178
|
export declare namespace Icon {
|
|
149
179
|
var displayName: string;
|
|
150
180
|
}
|
package/dist/Icon/Icon.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../src/Icon/Icon.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,aAAa,EAAE,KAAK,QAAQ,EAAC,MAAM,OAAO,CAAC;AAC/D,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAG3C,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,sBAAsB,CAAC;AAqBnD,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2Df,CAAC;AAEH
|
|
1
|
+
{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../src/Icon/Icon.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,aAAa,EAAE,KAAK,QAAQ,EAAC,MAAM,OAAO,CAAC;AAC/D,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAG3C,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,sBAAsB,CAAC;AAqBnD,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2Df,CAAC;AAEH;;;;;;;;GAQG;AACH,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;EAiBd,CAAC;AAyCH,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,WAAW,CAAC;AACjD,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,UAAU,CAAC;AAE/C;;;GAGG;AACH,MAAM,MAAM,QAAQ,GAAG,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;AAE9D;;;GAGG;AACH,MAAM,WAAW,SAAU,SAAQ,IAAI,CACrC,QAAQ,CAAC,aAAa,CAAC,EACvB,KAAK,GAAG,OAAO,CAChB;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;;OAIG;IACH,IAAI,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC1B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;;;;;;;;;;;;;;;;;;;;;OAuBG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAyBD;;;;;;;GAOG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,KAAiB,EACjB,IAAW,EACX,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,qBAkCX;yBAzCe,IAAI;;;AA4FpB;;;;;;GAMG;AACH,wBAAgB,cAAc,CAC5B,IAAI,EAAE,KAAK,CAAC,SAAS,GAAG,QAAQ,EAChC,KAAK,CAAC,EAAE;IAAC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAA;CAAC,GAC3C,KAAK,CAAC,SAAS,CAYjB"}
|