@astryxdesign/core 0.7.1 → 0.7.2-canary.01eab6a
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/dist/AspectRatio/AspectRatio.d.ts +6 -8
- package/dist/AspectRatio/AspectRatio.d.ts.map +1 -1
- package/dist/AspectRatio/AspectRatio.js +44 -3
- package/dist/Breadcrumbs/BreadcrumbItem.d.ts.map +1 -1
- package/dist/Breadcrumbs/BreadcrumbItem.js +5 -2
- package/dist/Button/Button.d.ts.map +1 -1
- package/dist/Button/Button.js +38 -14
- package/dist/CheckboxInput/CheckboxInput.d.ts +1 -1
- package/dist/CheckboxInput/CheckboxInput.d.ts.map +1 -1
- package/dist/CheckboxInput/CheckboxInput.js +3 -1
- package/dist/CheckboxList/CheckboxListItem.d.ts +9 -1
- package/dist/CheckboxList/CheckboxListItem.d.ts.map +1 -1
- package/dist/CheckboxList/CheckboxListItem.js +4 -2
- package/dist/CommandPalette/CommandPaletteInput.d.ts +1 -1
- package/dist/CommandPalette/CommandPaletteInput.d.ts.map +1 -1
- package/dist/CommandPalette/CommandPaletteInput.js +37 -5
- package/dist/ContextMenu/ContextMenu.d.ts.map +1 -1
- package/dist/ContextMenu/ContextMenu.js +5 -2
- package/dist/Dialog/Dialog.d.ts.map +1 -1
- package/dist/Dialog/Dialog.js +20 -8
- package/dist/Drawer/Drawer.d.ts +191 -0
- package/dist/Drawer/Drawer.d.ts.map +1 -0
- package/dist/Drawer/Drawer.js +382 -0
- package/dist/Drawer/DrawerHeader.d.ts +85 -0
- package/dist/Drawer/DrawerHeader.d.ts.map +1 -0
- package/dist/Drawer/DrawerHeader.js +134 -0
- package/dist/Drawer/index.d.ts +11 -0
- package/dist/Drawer/index.d.ts.map +1 -0
- package/dist/Drawer/index.js +11 -0
- package/dist/Drawer/useDrawerDialogPresence.d.ts +42 -0
- package/dist/Drawer/useDrawerDialogPresence.d.ts.map +1 -0
- package/dist/Drawer/useDrawerDialogPresence.js +236 -0
- package/dist/DropdownMenu/DropdownMenu.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenu.js +47 -4
- package/dist/DropdownMenu/DropdownMenuContext.d.ts +17 -0
- package/dist/DropdownMenu/DropdownMenuContext.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenuContext.js +21 -0
- package/dist/DropdownMenu/DropdownMenuDivider.d.ts +5 -3
- package/dist/DropdownMenu/DropdownMenuDivider.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenuDivider.js +7 -3
- package/dist/DropdownMenu/DropdownMenuSubMenu.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenuSubMenu.js +19 -8
- package/dist/EmptyState/EmptyState.d.ts.map +1 -1
- package/dist/EmptyState/EmptyState.js +4 -10
- package/dist/Field/Field.d.ts +1 -1
- package/dist/Field/Field.d.ts.map +1 -1
- package/dist/Field/Field.js +8 -4
- package/dist/Grid/GridSpan.d.ts.map +1 -1
- package/dist/Grid/GridSpan.js +1 -0
- package/dist/Heading/Heading.d.ts.map +1 -1
- package/dist/Heading/Heading.js +4 -2
- package/dist/HoverCard/useHoverCard.d.ts.map +1 -1
- package/dist/HoverCard/useHoverCard.js +10 -2
- package/dist/Item/Item.d.ts +6 -2
- package/dist/Item/Item.d.ts.map +1 -1
- package/dist/Item/Item.js +19 -4
- package/dist/Layer/layerViewportInset.stylex.d.ts +6 -2
- package/dist/Layer/layerViewportInset.stylex.d.ts.map +1 -1
- package/dist/Layer/layerViewportInset.stylex.js +6 -2
- package/dist/Layer/useLayer.d.ts.map +1 -1
- package/dist/Layer/useLayer.js +13 -7
- package/dist/Layer/useLayerDismissal.d.ts +1 -1
- package/dist/Layer/useLayerDismissal.js +1 -1
- package/dist/Layout/container.stylex.d.ts +5 -5
- package/dist/Layout/container.stylex.js +4 -4
- package/dist/List/List.d.ts +46 -19
- package/dist/List/List.d.ts.map +1 -1
- package/dist/List/List.js +28 -10
- package/dist/List/ListContext.d.ts +8 -3
- package/dist/List/ListContext.d.ts.map +1 -1
- package/dist/List/ListContext.js +7 -2
- package/dist/List/ListItem.d.ts +13 -5
- package/dist/List/ListItem.d.ts.map +1 -1
- package/dist/List/ListItem.js +21 -8
- package/dist/List/index.d.ts +1 -1
- package/dist/List/index.d.ts.map +1 -1
- package/dist/Markdown/Markdown.d.ts.map +1 -1
- package/dist/Markdown/Markdown.js +8 -1
- package/dist/Markdown/plugins/frontmatter.d.ts.map +1 -1
- package/dist/Markdown/plugins/frontmatter.js +7 -3
- package/dist/MetadataList/MetadataList.d.ts.map +1 -1
- package/dist/MetadataList/MetadataList.js +5 -1
- package/dist/MetadataList/MetadataListContext.d.ts +1 -1
- package/dist/MetadataList/MetadataListContext.d.ts.map +1 -1
- package/dist/MultiSelector/MultiSelector.d.ts.map +1 -1
- package/dist/MultiSelector/MultiSelector.js +22 -8
- package/dist/MultiSelector/OptionActions.a11y.chromium.spec.js +100 -2
- package/dist/MultiSelector/hooks.d.ts.map +1 -1
- package/dist/MultiSelector/hooks.js +3 -1
- package/dist/Pagination/Pagination.d.ts +8 -5
- package/dist/Pagination/Pagination.d.ts.map +1 -1
- package/dist/Pagination/Pagination.js +21 -8
- package/dist/Popover/Popover.js +2 -2
- package/dist/PowerSearch/PowerSearch.js +1 -1
- package/dist/RadioList/RadioList.d.ts +1 -1
- package/dist/RadioList/RadioList.d.ts.map +1 -1
- package/dist/RadioList/RadioList.js +6 -2
- package/dist/RadioList/RadioListItem.d.ts +9 -1
- package/dist/RadioList/RadioListItem.d.ts.map +1 -1
- package/dist/RadioList/RadioListItem.js +2 -0
- package/dist/Selector/hooks.d.ts.map +1 -1
- package/dist/Selector/hooks.js +6 -2
- package/dist/SideNav/SideNavItem.d.ts +8 -1
- package/dist/SideNav/SideNavItem.d.ts.map +1 -1
- package/dist/SideNav/SideNavItem.js +71 -9
- package/dist/Switch/Switch.d.ts +1 -1
- package/dist/Switch/Switch.d.ts.map +1 -1
- package/dist/Switch/Switch.js +13 -1
- package/dist/TabList/TabMenu.d.ts +2 -2
- package/dist/TabList/TabMenu.d.ts.map +1 -1
- package/dist/TabList/TabMenu.js +6 -3
- package/dist/Text/Text.d.ts.map +1 -1
- package/dist/Text/Text.js +4 -2
- package/dist/Text/useTruncation.d.ts +7 -5
- package/dist/Text/useTruncation.d.ts.map +1 -1
- package/dist/Text/useTruncation.js +16 -5
- package/dist/ToggleButton/ToggleButton.d.ts +3 -2
- package/dist/ToggleButton/ToggleButton.d.ts.map +1 -1
- package/dist/ToggleButton/ToggleButton.js +12 -1
- package/dist/Tooltip/useTooltip.d.ts.map +1 -1
- package/dist/Tooltip/useTooltip.js +11 -0
- package/dist/TopNav/TopNavMegaMenu.d.ts.map +1 -1
- package/dist/TopNav/TopNavMegaMenu.js +3 -3
- package/dist/TopNav/TopNavMenu.d.ts.map +1 -1
- package/dist/TopNav/TopNavMenu.js +3 -3
- package/dist/TreeList/TreeList.d.ts.map +1 -1
- package/dist/TreeList/TreeList.js +1 -0
- package/dist/TreeList/TreeListBranches.d.ts.map +1 -1
- package/dist/TreeList/TreeListBranches.js +2 -2
- package/dist/TreeList/TreeListItem.d.ts.map +1 -1
- package/dist/TreeList/TreeListItem.js +57 -9
- package/dist/Typeahead/BaseTypeahead.d.ts.map +1 -1
- package/dist/Typeahead/BaseTypeahead.js +26 -0
- package/dist/astryx.css +47 -13
- package/dist/hooks/useEntryAnimation.d.ts +2 -1
- package/dist/hooks/useEntryAnimation.d.ts.map +1 -1
- package/dist/hooks/useEntryAnimation.js +14 -12
- package/dist/hooks/useIsHydrating.d.ts +6 -0
- package/dist/hooks/useIsHydrating.d.ts.map +1 -0
- package/dist/hooks/useIsHydrating.js +30 -0
- package/dist/hooks/useMenuHover.d.ts.map +1 -1
- package/dist/hooks/useMenuHover.js +18 -13
- package/dist/i18n/generated-locales/en.generated.d.ts.map +1 -1
- package/dist/i18n/generated-locales/en.generated.js +112 -1
- package/dist/i18n/generated-locales/pseudo.generated.d.ts.map +1 -1
- package/dist/i18n/generated-locales/pseudo.generated.js +112 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/dist/theme/derivedVarRegistry.d.ts.map +1 -1
- package/dist/theme/derivedVarRegistry.js +0 -3
- package/dist/utils/focusOutline.stylex.d.ts +4 -0
- package/dist/utils/focusOutline.stylex.d.ts.map +1 -1
- package/dist/utils/focusOutline.stylex.js +4 -0
- package/dist/utils/plainDate.d.ts.map +1 -1
- package/dist/utils/plainDate.js +15 -9
- package/dist/utils/sharedMutationObserver.d.ts +21 -0
- package/dist/utils/sharedMutationObserver.d.ts.map +1 -0
- package/dist/utils/sharedMutationObserver.js +69 -0
- package/locales/en.json +444 -0
- package/locales/pseudo.json +333 -0
- package/package.json +9 -4
- package/src/AspectRatio/AspectRatio.test.tsx +44 -43
- package/src/AspectRatio/AspectRatio.tsx +38 -18
- package/src/AspectRatio/__tests__/AspectRatioFitLayers.a11y.browser.spec.ts +157 -0
- package/src/Avatar/Avatar.doc.mjs +5 -3
- package/src/AvatarGroup/AvatarGroup.doc.mjs +3 -2
- package/src/Breadcrumbs/BreadcrumbItem.tsx +4 -1
- package/src/Breadcrumbs/Breadcrumbs.test.tsx +30 -1
- package/src/Button/Button.doc.mjs +2 -2
- package/src/Button/Button.test.tsx +155 -9
- package/src/Button/Button.tsx +39 -16
- package/src/Button/__tests__/Button.a11y.known-failures.ts +1 -62
- package/src/Button/__tests__/Button.a11y.states.ts +0 -10
- package/src/Chat/__tests__/ChatMessageMetadata.a11y.chromium.spec.ts +3 -1
- package/src/CheckboxInput/CheckboxInput.test.tsx +34 -0
- package/src/CheckboxInput/CheckboxInput.tsx +3 -1
- package/src/CheckboxList/CheckboxList.test.tsx +22 -0
- package/src/CheckboxList/CheckboxListItem.doc.mjs +16 -0
- package/src/CheckboxList/CheckboxListItem.tsx +10 -0
- package/src/CommandPalette/CommandPaletteInput.test.tsx +53 -4
- package/src/CommandPalette/CommandPaletteInput.tsx +33 -3
- package/src/CommandPalette/__tests__/CommandPaletteInputAudit.a11y.chromium.spec.ts +335 -0
- package/src/CommandPalette/__tests__/CommandPaletteItemAudit.a11y.chromium.spec.ts +292 -0
- package/src/ContextMenu/ContextMenu.doc.mjs +2 -3
- package/src/ContextMenu/ContextMenu.tsx +4 -1
- package/src/ContextMenu/__tests__/ContextMenuAudit.a11y.chromium.spec.ts +438 -0
- package/src/Dialog/Dialog.test.tsx +46 -0
- package/src/Dialog/Dialog.tsx +20 -7
- package/src/Dialog/__tests__/Dialog.a11y.known-failures.ts +0 -14
- package/src/Drawer/Drawer.doc.mjs +472 -0
- package/src/Drawer/Drawer.spec.md +357 -0
- package/src/Drawer/Drawer.test.tsx +1300 -0
- package/src/Drawer/Drawer.tsx +613 -0
- package/src/Drawer/DrawerDirection.test.tsx +127 -0
- package/src/Drawer/DrawerHeader.doc.mjs +293 -0
- package/src/Drawer/DrawerHeader.test.tsx +102 -0
- package/src/Drawer/DrawerHeader.tsx +235 -0
- package/src/Drawer/__tests__/DrawerAudit.a11y.chromium.spec.ts +401 -0
- package/src/Drawer/__tests__/DrawerHeaderAudit.a11y.chromium.spec.ts +297 -0
- package/src/Drawer/index.ts +13 -0
- package/src/Drawer/useDrawerDialogPresence.ts +284 -0
- package/src/DropdownMenu/DropdownMenu.test.tsx +62 -13
- package/src/DropdownMenu/DropdownMenu.tsx +47 -4
- package/src/DropdownMenu/DropdownMenuContext.tsx +24 -0
- package/src/DropdownMenu/DropdownMenuDivider.doc.mjs +2 -2
- package/src/DropdownMenu/DropdownMenuDivider.spec.md +192 -0
- package/src/DropdownMenu/DropdownMenuDivider.tsx +9 -5
- package/src/DropdownMenu/DropdownMenuSubMenu.test.tsx +185 -0
- package/src/DropdownMenu/DropdownMenuSubMenu.tsx +19 -5
- package/src/DropdownMenu/__tests__/DropdownMenuDividerAudit.a11y.chromium.spec.ts +280 -0
- package/src/DropdownMenu/__tests__/Menu.a11y.chromium.spec.ts +145 -0
- package/src/DropdownMenu/__tests__/Menu.a11y.known-failures.ts +26 -0
- package/src/DropdownMenu/__tests__/Menu.a11y.renders.tsx +65 -0
- package/src/DropdownMenu/__tests__/Menu.a11y.states.ts +138 -0
- package/src/DropdownMenu/__tests__/Menu.a11y.test.tsx +136 -0
- package/src/EmptyState/EmptyState.doc.mjs +3 -2
- package/src/EmptyState/EmptyState.spec.md +189 -0
- package/src/EmptyState/EmptyState.test.tsx +74 -3
- package/src/EmptyState/EmptyState.tsx +4 -8
- package/src/Field/Field.doc.mjs +14 -8
- package/src/Field/Field.spec.md +217 -0
- package/src/Field/Field.test.tsx +60 -2
- package/src/Field/Field.tsx +17 -8
- package/src/Grid/GridSpan.tsx +3 -0
- package/src/Heading/Heading.test.tsx +57 -0
- package/src/Heading/Heading.tsx +6 -2
- package/src/HoverCard/HoverCard.test.tsx +58 -0
- package/src/HoverCard/useHoverCard.tsx +10 -2
- package/src/IconButton/IconButton.doc.mjs +2 -2
- package/src/IconButton/IconButton.test.tsx +3 -1
- package/src/Item/Item.doc.mjs +12 -8
- package/src/Item/Item.spec.md +226 -0
- package/src/Item/Item.test.tsx +61 -0
- package/src/Item/Item.tsx +40 -4
- package/src/Layer/layerViewportInset.source-build.test.mjs +90 -0
- package/src/Layer/layerViewportInset.stylex.ts +6 -2
- package/src/Layer/layerViewportInset.test.ts +1 -0
- package/src/Layer/useLayer.tsx +24 -13
- package/src/Layer/useLayerDismissal.ts +1 -1
- package/src/Layout/container.stylex.ts +6 -6
- package/src/List/List.doc.mjs +14 -1
- package/src/List/List.spec.md +129 -77
- package/src/List/List.test.tsx +163 -94
- package/src/List/List.tsx +74 -18
- package/src/List/ListContext.tsx +9 -3
- package/src/List/ListItem.doc.mjs +24 -5
- package/src/List/ListItem.tsx +56 -27
- package/src/List/index.ts +1 -1
- package/src/Markdown/Markdown.tsx +14 -1
- package/src/Markdown/plugins/frontmatter.test.tsx +25 -0
- package/src/Markdown/plugins/frontmatter.ts +7 -3
- package/src/MetadataList/MetadataList.doc.mjs +2 -2
- package/src/MetadataList/MetadataList.test.tsx +38 -0
- package/src/MetadataList/MetadataList.tsx +8 -1
- package/src/MetadataList/MetadataListContext.tsx +1 -1
- package/src/MultiSelector/MultiSelector.test.tsx +159 -0
- package/src/MultiSelector/MultiSelector.tsx +40 -7
- package/src/MultiSelector/OptionActions.a11y.chromium.spec.ts +112 -2
- package/src/MultiSelector/hooks.ts +3 -1
- package/src/MultiSelector/useMultiCombobox.doc.mjs +267 -0
- package/src/Pagination/Pagination.doc.mjs +7 -7
- package/src/Pagination/Pagination.spec.md +9 -9
- package/src/Pagination/Pagination.test.tsx +242 -0
- package/src/Pagination/Pagination.tsx +27 -11
- package/src/Popover/Popover.test.tsx +2 -2
- package/src/Popover/Popover.tsx +4 -4
- package/src/PowerSearch/PowerSearch.test.tsx +85 -0
- package/src/PowerSearch/PowerSearch.tsx +2 -2
- package/src/RadioList/RadioList.fr10.test.tsx +45 -2
- package/src/RadioList/RadioList.test.tsx +22 -0
- package/src/RadioList/RadioList.tsx +4 -1
- package/src/RadioList/RadioListItem.doc.mjs +16 -0
- package/src/RadioList/RadioListItem.tsx +10 -1
- package/src/Selector/hooks.ts +6 -2
- package/src/Selector/useCombobox.doc.mjs +237 -0
- package/src/SideNav/SideNav.test.tsx +179 -0
- package/src/SideNav/SideNavItem.doc.mjs +2 -2
- package/src/SideNav/SideNavItem.tsx +96 -17
- package/src/Slider/Slider.spec.md +39 -18
- package/src/Switch/Switch.test.tsx +49 -0
- package/src/Switch/Switch.tsx +11 -0
- package/src/TabList/TabList.spec.md +57 -44
- package/src/TabList/TabList.test.tsx +67 -0
- package/src/TabList/TabMenu.doc.mjs +4 -3
- package/src/TabList/TabMenu.tsx +7 -4
- package/src/Text/Text.test.tsx +57 -0
- package/src/Text/Text.tsx +6 -2
- package/src/Text/useTruncation.test.tsx +69 -0
- package/src/Text/useTruncation.ts +16 -5
- package/src/TimeInput/TimeInput.fr10.test.tsx +15 -0
- package/src/ToggleButton/ToggleButton.test.tsx +95 -0
- package/src/ToggleButton/ToggleButton.tsx +12 -1
- package/src/Tokenizer/Tokenizer.test.tsx +54 -1
- package/src/Tooltip/Tooltip.test.tsx +31 -0
- package/src/Tooltip/useTooltip.test.tsx +13 -0
- package/src/Tooltip/useTooltip.tsx +11 -0
- package/src/TopNav/TopNavMegaMenu.test.tsx +22 -0
- package/src/TopNav/TopNavMegaMenu.tsx +7 -3
- package/src/TopNav/TopNavMenu.test.tsx +19 -0
- package/src/TopNav/TopNavMenu.tsx +11 -3
- package/src/TreeList/TreeList.doc.mjs +1 -0
- package/src/TreeList/TreeList.spec.md +29 -17
- package/src/TreeList/TreeList.test.tsx +327 -6
- package/src/TreeList/TreeList.tsx +5 -1
- package/src/TreeList/TreeListBranches.tsx +6 -0
- package/src/TreeList/TreeListItem.tsx +88 -13
- package/src/Typeahead/BaseTypeahead.tsx +26 -0
- package/src/Typeahead/Typeahead.test.tsx +260 -2
- package/src/docPropLiterals.test.ts +36 -10
- package/src/hooks/useEntryAnimation.doc.mjs +4 -4
- package/src/hooks/useEntryAnimation.ssr.test.tsx +143 -0
- package/src/hooks/useEntryAnimation.ts +15 -16
- package/src/hooks/useIsHydrating.test.tsx +70 -0
- package/src/hooks/useIsHydrating.ts +31 -0
- package/src/hooks/useMenuHover.ts +18 -13
- package/src/i18n/InternationalizationProvider.doc.mjs +8 -0
- package/src/i18n/InternationalizationProvider.spec.md +252 -0
- package/src/i18n/__tests__/InternationalizationProvider.test.tsx +128 -0
- package/src/i18n/generated-locales/en.generated.ts +121 -0
- package/src/i18n/generated-locales/pseudo.generated.ts +121 -0
- package/src/i18n/useTranslator.test.tsx +37 -0
- package/src/index.ts +1 -0
- package/src/reset.css +0 -29
- package/src/theme/derivedVarRegistry.test.ts +7 -3
- package/src/theme/derivedVarRegistry.ts +0 -3
- package/src/utils/focusOutline.stylex.ts +4 -0
- package/src/utils/plainDate.test.ts +37 -1
- package/src/utils/plainDate.ts +15 -5
- package/src/utils/sharedMutationObserver.test.ts +53 -0
- package/src/utils/sharedMutationObserver.ts +78 -0
|
@@ -6,8 +6,10 @@
|
|
|
6
6
|
* built Storybook.
|
|
7
7
|
* @output Real-engine proof for option actions: the action is visible at rest
|
|
8
8
|
* beside its row (`spec:AST-058` FR8), the keyboard reaches it through the
|
|
9
|
-
* inline-end arrow in both directions and fires it with Enter,
|
|
10
|
-
*
|
|
9
|
+
* inline-end arrow in both directions and fires it with Enter, the active
|
|
10
|
+
* action cell draws the standard focus ring when the shared input modality
|
|
11
|
+
* is keyboard and not after pointer input, and the highlight follows a real
|
|
12
|
+
* mouse across rows and actions.
|
|
11
13
|
* @position Run with `pnpm test:a11y-contract`; paint, pointer paths and the
|
|
12
14
|
* active descendant as an engine exposes them are not jsdom claims.
|
|
13
15
|
*/
|
|
@@ -105,6 +107,102 @@ test('the keyboard reaches an action through the inline-end arrow and fires it w
|
|
|
105
107
|
await search.press('ArrowLeft');
|
|
106
108
|
await expect.poll(async () => activeDescendant(page)).toBe('row:Bug');
|
|
107
109
|
});
|
|
110
|
+
test('the active action cell draws the standard focus ring', async ({
|
|
111
|
+
page
|
|
112
|
+
}) => {
|
|
113
|
+
await page.goto(`${storybook.origin}/iframe.html?id=core-multiselector--row-actions&viewMode=story`);
|
|
114
|
+
const search = page.getByRole('combobox');
|
|
115
|
+
await expect(search).toBeFocused();
|
|
116
|
+
await search.press('ArrowDown'); // select-all
|
|
117
|
+
await search.press('ArrowDown'); // Feature (no action)
|
|
118
|
+
await search.press('ArrowDown'); // Bug
|
|
119
|
+
await search.press('ArrowRight');
|
|
120
|
+
await expect.poll(async () => activeDescendant(page)).toBe('gridcell:Edit Bug');
|
|
121
|
+
const ring = await page.evaluate(() => {
|
|
122
|
+
const id = document.activeElement?.getAttribute('aria-activedescendant');
|
|
123
|
+
const cell = id ? document.getElementById(id) : null;
|
|
124
|
+
if (!cell) {
|
|
125
|
+
return null;
|
|
126
|
+
}
|
|
127
|
+
const cs = getComputedStyle(cell);
|
|
128
|
+
// The ring the focus tokens describe, resolved by the browser on a probe.
|
|
129
|
+
const probe = document.createElement('div');
|
|
130
|
+
probe.style.cssText = 'outline-width:var(--focus-outline-width);outline-style:var(--focus-outline-style);outline-color:var(--focus-outline-color);outline-offset:var(--focus-outline-offset)';
|
|
131
|
+
document.body.appendChild(probe);
|
|
132
|
+
const want = getComputedStyle(probe);
|
|
133
|
+
const result = {
|
|
134
|
+
style: cs.outlineStyle,
|
|
135
|
+
width: cs.outlineWidth,
|
|
136
|
+
color: cs.outlineColor,
|
|
137
|
+
offset: cs.outlineOffset,
|
|
138
|
+
wantStyle: want.outlineStyle,
|
|
139
|
+
wantWidth: want.outlineWidth,
|
|
140
|
+
wantColor: want.outlineColor,
|
|
141
|
+
wantOffset: want.outlineOffset
|
|
142
|
+
};
|
|
143
|
+
probe.remove();
|
|
144
|
+
return result;
|
|
145
|
+
});
|
|
146
|
+
expect(ring).not.toBeNull();
|
|
147
|
+
expect(ring.style).not.toBe('none');
|
|
148
|
+
expect(ring.width).not.toBe('0px');
|
|
149
|
+
expect(ring.style).toBe(ring.wantStyle);
|
|
150
|
+
expect(ring.width).toBe(ring.wantWidth);
|
|
151
|
+
expect(ring.color).toBe(ring.wantColor);
|
|
152
|
+
expect(ring.offset).toBe(ring.wantOffset);
|
|
153
|
+
// Back on the option cell, the action cell drops the ring.
|
|
154
|
+
await search.press('ArrowLeft');
|
|
155
|
+
await expect.poll(async () => activeDescendant(page)).toBe('row:Bug');
|
|
156
|
+
const after = await page.getByRole('row', {
|
|
157
|
+
name: 'Bug'
|
|
158
|
+
}).locator('[data-multi-selector-action-cell]').evaluate(cell => getComputedStyle(cell).outlineStyle);
|
|
159
|
+
expect(after).toBe('none');
|
|
160
|
+
});
|
|
161
|
+
test('the action-cell ring follows the shared input modality', async ({
|
|
162
|
+
page
|
|
163
|
+
}) => {
|
|
164
|
+
await page.goto(`${storybook.origin}/iframe.html?id=core-multiselector--row-actions&viewMode=story`);
|
|
165
|
+
const search = page.getByRole('combobox');
|
|
166
|
+
await expect(search).toBeFocused();
|
|
167
|
+
const actionCell = name => page.getByRole('row', {
|
|
168
|
+
name
|
|
169
|
+
}).locator('[data-multi-selector-action-cell]');
|
|
170
|
+
const outlineStyle = async name => actionCell(name).evaluate(cell => getComputedStyle(cell).outlineStyle);
|
|
171
|
+
const hover = async name => {
|
|
172
|
+
const cell = await box(actionCell(name));
|
|
173
|
+
await page.mouse.move(cell.x + cell.width / 2, cell.y + cell.height / 2, {
|
|
174
|
+
steps: 6
|
|
175
|
+
});
|
|
176
|
+
};
|
|
177
|
+
|
|
178
|
+
// Pointer input: a click into the search field, then a hover onto an
|
|
179
|
+
// action, moves the highlight without the ring, and leaves none behind.
|
|
180
|
+
await search.click();
|
|
181
|
+
await hover('Bug');
|
|
182
|
+
await expect.poll(async () => activeDescendant(page)).toBe('gridcell:Edit Bug');
|
|
183
|
+
expect(await outlineStyle('Bug')).toBe('none');
|
|
184
|
+
// A modifier chord is not keyboard navigation for the shared tracker.
|
|
185
|
+
await search.press('Control+ArrowRight');
|
|
186
|
+
expect(await outlineStyle('Bug')).toBe('none');
|
|
187
|
+
await page.mouse.move(1, 1, {
|
|
188
|
+
steps: 6
|
|
189
|
+
});
|
|
190
|
+
expect(await outlineStyle('Bug')).toBe('none');
|
|
191
|
+
|
|
192
|
+
// Keyboard input: back onto the same cell, the ring is drawn.
|
|
193
|
+
await search.press('ArrowLeft');
|
|
194
|
+
await expect.poll(async () => activeDescendant(page)).toBe('row:Bug');
|
|
195
|
+
await search.press('ArrowRight');
|
|
196
|
+
await expect.poll(async () => activeDescendant(page)).toBe('gridcell:Edit Bug');
|
|
197
|
+
expect(await outlineStyle('Bug')).not.toBe('none');
|
|
198
|
+
|
|
199
|
+
// Still keyboard-driven, a hover that moves the highlight to another
|
|
200
|
+
// row's action carries the ring with it.
|
|
201
|
+
await hover('P0');
|
|
202
|
+
await expect.poll(async () => activeDescendant(page)).toBe('gridcell:Edit P0');
|
|
203
|
+
expect(await outlineStyle('P0')).not.toBe('none');
|
|
204
|
+
expect(await outlineStyle('Bug')).toBe('none');
|
|
205
|
+
});
|
|
108
206
|
test('under RTL the inline-end arrow is ArrowLeft', async ({
|
|
109
207
|
page
|
|
110
208
|
}) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../src/MultiSelector/hooks.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../src/MultiSelector/hooks.ts"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAC,uBAAuB,EAAC,MAAM,SAAS,CAAC;AAErD,UAAU,uBAAuB;IAC/B,eAAe,EAAE,uBAAuB,EAAE,CAAC;IAC3C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,EAAE,MAAM,OAAO,CAAC;IACtB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,+DAA+D;IAC/D,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IAC1C,iEAAiE;IACjE,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C;AAED,6DAA6D;AAC7D,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEpD,UAAU,sBAAsB;IAC9B,gBAAgB,EAAE,MAAM,CAAC;IACzB,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,4EAA4E;IAC5E,eAAe,EAAE,iBAAiB,CAAC;IACnC,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACrC,iFAAiF;IACjF,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC3C,+DAA+D;IAC/D,kBAAkB,EAAE,MAAM,GAAG,SAAS,CAAC;IACvC,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,SAAS,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;IAC5C,gBAAgB,EAAE,CAChB,IAAI,EAAE,uBAAuB,EAC7B,KAAK,EAAE,MAAM,EACb,IAAI,CAAC,EAAE,iBAAiB,KACrB,IAAI,CAAC;CACX;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,eAAe,EACf,UAAkB,EAClB,MAAM,EACN,SAAiB,EACjB,MAAM,EACN,OAAO,EACP,QAAQ,EACR,OAAO,EACP,QAAgB,EAChB,SAAS,EACT,MAAc,EACd,YAAY,EACZ,gBAAgB,GACjB,EAAE,uBAAuB,GAAG,sBAAsB,CAwSlD"}
|
|
@@ -6,10 +6,12 @@
|
|
|
6
6
|
* @file hooks.ts
|
|
7
7
|
* @input Uses React hooks, MultiSelectorOptionData type
|
|
8
8
|
* @output Exports useMultiCombobox hook
|
|
9
|
-
* @position
|
|
9
|
+
* @position Public hook, exported from the MultiSelector entry point; used by
|
|
10
|
+
* MultiSelector.tsx
|
|
10
11
|
*
|
|
11
12
|
* SYNC: When modified, update:
|
|
12
13
|
* - /packages/core/src/MultiSelector/index.ts
|
|
14
|
+
* - /packages/core/src/MultiSelector/useMultiCombobox.doc.mjs
|
|
13
15
|
*/
|
|
14
16
|
import { useCallback, useRef, useState } from 'react';
|
|
15
17
|
import { isRtlElement } from "../hooks/isRtlElement.js";
|
|
@@ -42,7 +42,8 @@ export interface PaginationProps extends Omit<BaseProps<HTMLElement>, 'onChange'
|
|
|
42
42
|
* Visual variant controlling what appears between prev/next buttons.
|
|
43
43
|
* - pages: Page number buttons with ellipsis (default)
|
|
44
44
|
* - count: "X–Y of Z" text
|
|
45
|
-
* - compact: "Page X of Y" text
|
|
45
|
+
* - compact: "Page X of Y" text. First/last buttons are opt-in (see
|
|
46
|
+
* hasFirstLast).
|
|
46
47
|
* - dots: Dot indicators
|
|
47
48
|
* - input: An editable number box rendering "Page [ n ] / N". The leading
|
|
48
49
|
* noun is controlled by `pageLabel`. First/last double-chevron buttons
|
|
@@ -59,9 +60,11 @@ export interface PaginationProps extends Omit<BaseProps<HTMLElement>, 'onChange'
|
|
|
59
60
|
pageLabel?: string;
|
|
60
61
|
/**
|
|
61
62
|
* Whether to show first/last («/») double-chevron buttons flanking
|
|
62
|
-
* prev/next.
|
|
63
|
-
*
|
|
64
|
-
*
|
|
63
|
+
* prev/next. Applies to the `input` variant (shown unless false) and the
|
|
64
|
+
* `compact` variant (shown only when true); other variants ignore it.
|
|
65
|
+
* The last button needs a known total — both are omitted when the page count
|
|
66
|
+
* is unknown (cursor/hasMore pagination).
|
|
67
|
+
* @default true for `input`, false for `compact`
|
|
65
68
|
*/
|
|
66
69
|
hasFirstLast?: boolean;
|
|
67
70
|
/**
|
|
@@ -121,7 +124,7 @@ export declare function generatePageRange(currentPage: number, totalPages: numbe
|
|
|
121
124
|
* />
|
|
122
125
|
* ```
|
|
123
126
|
*/
|
|
124
|
-
export declare function Pagination({ page, onChange, changeAction, totalItems, totalPages: totalPagesProp, hasMore, pageSize: pageSizeProp, pageSizeOptions, onPageSizeChange, variant, pageLabel, hasFirstLast, step: stepProp, siblingCount, size, isDisabled, label: labelFromProps, 'data-testid': testId, xstyle, className, style, ref, ...rest }: PaginationProps): import("react").JSX.Element | null;
|
|
127
|
+
export declare function Pagination({ page, onChange, changeAction, totalItems, totalPages: totalPagesProp, hasMore, pageSize: pageSizeProp, pageSizeOptions, onPageSizeChange, variant, pageLabel, hasFirstLast: hasFirstLastProp, step: stepProp, siblingCount, size, isDisabled, label: labelFromProps, 'data-testid': testId, xstyle, className, style, ref, ...rest }: PaginationProps): import("react").JSX.Element | null;
|
|
125
128
|
export declare namespace Pagination {
|
|
126
129
|
var displayName: string;
|
|
127
130
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../src/Pagination/Pagination.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../src/Pagination/Pagination.tsx"],"names":[],"mappings":"AA4CA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAI5C,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,SAAS,CAAC;AAMlD;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,MAAM,oBAAoB,CAAC;AAE3D,uCAAuC;AACvC,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,CAAC;AAEzC,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,SAAS,CAAC,WAAW,CAAC,EACtB,UAAU,CACX;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAE7B,+DAA+D;IAC/D,IAAI,EAAE,MAAM,CAAC;IACb,oCAAoC;IACpC,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAGtD;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAGlB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6EAA6E;IAC7E,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,yCAAyC;IACzC,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAG9C;;;;;;;;;;;;OAYG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IAGtB,wDAAwD;IACxD,UAAU,CAAC,EAAE,OAAO,CAAC;IAGrB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,qCAAqC;IACrC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAwHD;;;;;;;;;;GAUG;AACH,wBAAgB,iBAAiB,CAC/B,WAAW,EAAE,MAAM,EACnB,UAAU,EAAE,MAAM,EAClB,YAAY,EAAE,MAAM,GACnB,CAAC,MAAM,GAAG,KAAK,CAAC,EAAE,CA6CpB;AAMD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,QAAQ,EACR,YAAY,EACZ,UAAU,EACV,UAAU,EAAE,cAAc,EAC1B,OAAO,EACP,QAAQ,EAAE,YAAiB,EAC3B,eAAe,EACf,gBAAgB,EAChB,OAAiB,EACjB,SAAS,EACT,YAAY,EAAE,gBAAgB,EAC9B,IAAI,EAAE,QAAY,EAClB,YAAgB,EAChB,IAAW,EACX,UAAkB,EAClB,KAAK,EAAE,cAAc,EACrB,aAAa,EAAE,MAAM,EACrB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,eAAe,sCAwfjB;yBAhhBe,UAAU"}
|
|
@@ -5,9 +5,10 @@
|
|
|
5
5
|
/**
|
|
6
6
|
* @file Pagination.tsx
|
|
7
7
|
* @input Uses React, StyleX, Button, Icon, Selector, Text; page number buttons delegate to Button.
|
|
8
|
+
* Compact first/last buttons cancel the inside control gap with logical token margins.
|
|
8
9
|
* Prev/next and first/last chevrons mirror under RTL via the shared rtlStyles.mirror
|
|
9
|
-
* (CSS scaleX), not a JS direction read. The input
|
|
10
|
-
* (first/last) icons.
|
|
10
|
+
* (CSS scaleX), not a JS direction read. The input and compact variants use the
|
|
11
|
+
* chevronsLeft/chevronsRight (first/last) icons.
|
|
11
12
|
* @output Exports Pagination component, PaginationProps, PaginationVariant, PaginationSize types
|
|
12
13
|
* @position Core implementation; consumed by index.ts, tested by Pagination.test.tsx
|
|
13
14
|
*
|
|
@@ -61,6 +62,14 @@ const styles = {
|
|
|
61
62
|
kOIVth: "x18g69wz",
|
|
62
63
|
$$css: true
|
|
63
64
|
},
|
|
65
|
+
compactFirst: {
|
|
66
|
+
k71WvV: "xkd40ry",
|
|
67
|
+
$$css: true
|
|
68
|
+
},
|
|
69
|
+
compactLast: {
|
|
70
|
+
keTefX: "x547jwd",
|
|
71
|
+
$$css: true
|
|
72
|
+
},
|
|
64
73
|
dot: {
|
|
65
74
|
kzqmXN: "x1f0dxl5",
|
|
66
75
|
kZKoxP: "xoqw5ej",
|
|
@@ -188,7 +197,7 @@ export function Pagination({
|
|
|
188
197
|
onPageSizeChange,
|
|
189
198
|
variant = 'pages',
|
|
190
199
|
pageLabel,
|
|
191
|
-
hasFirstLast
|
|
200
|
+
hasFirstLast: hasFirstLastProp,
|
|
192
201
|
step: stepProp = 1,
|
|
193
202
|
siblingCount = 1,
|
|
194
203
|
size = 'md',
|
|
@@ -363,9 +372,11 @@ export function Pagination({
|
|
|
363
372
|
const buttonSize = size === 'sm' ? 'sm' : 'md';
|
|
364
373
|
const isSm = size === 'sm';
|
|
365
374
|
|
|
366
|
-
// First/last buttons
|
|
367
|
-
//
|
|
368
|
-
|
|
375
|
+
// First/last buttons are on by default in the input variant and opt-in for
|
|
376
|
+
// compact; other variants never render them. They also need a known page
|
|
377
|
+
// count (the last button would have no target otherwise).
|
|
378
|
+
const hasFirstLast = variant === 'input' ? hasFirstLastProp ?? true : variant === 'compact' && hasFirstLastProp === true;
|
|
379
|
+
const showFirstLast = hasFirstLast && computedTotalPages != null;
|
|
369
380
|
const renderIndicator = () => {
|
|
370
381
|
switch (variant) {
|
|
371
382
|
case 'pages':
|
|
@@ -600,7 +611,8 @@ export function Pagination({
|
|
|
600
611
|
}),
|
|
601
612
|
onClick: handleFirst,
|
|
602
613
|
isDisabled: isDisabled || !hasPrevious,
|
|
603
|
-
isIconOnly: true
|
|
614
|
+
isIconOnly: true,
|
|
615
|
+
xstyle: variant === 'compact' && styles.compactFirst
|
|
604
616
|
}), /*#__PURE__*/_jsx(Button, {
|
|
605
617
|
label: previousLabel,
|
|
606
618
|
tooltip: isDisabled || !hasPrevious ? undefined : previousLabel,
|
|
@@ -639,7 +651,8 @@ export function Pagination({
|
|
|
639
651
|
}),
|
|
640
652
|
onClick: handleLast,
|
|
641
653
|
isDisabled: isDisabled || !hasNext,
|
|
642
|
-
isIconOnly: true
|
|
654
|
+
isIconOnly: true,
|
|
655
|
+
xstyle: variant === 'compact' && styles.compactLast
|
|
643
656
|
})]
|
|
644
657
|
})]
|
|
645
658
|
});
|
package/dist/Popover/Popover.js
CHANGED
|
@@ -532,7 +532,7 @@ export function PowerSearch({
|
|
|
532
532
|
} else if (change.type === 'remove' && change.item) {
|
|
533
533
|
const auxData = change.item.auxiliaryData;
|
|
534
534
|
if (auxData?.filterIndex != null) {
|
|
535
|
-
const newFilters = filters.filter((_, i) =>
|
|
535
|
+
const newFilters = filters.filter((_, i) => _items.some(item => item.auxiliaryData?.filterIndex === i));
|
|
536
536
|
onChange(newFilters, 'remove', auxData.filterIndex);
|
|
537
537
|
}
|
|
538
538
|
}
|
|
@@ -130,7 +130,7 @@ export interface RadioListProps extends Omit<FieldInputBaseProps<HTMLDivElement>
|
|
|
130
130
|
* </RadioList>
|
|
131
131
|
* ```
|
|
132
132
|
*/
|
|
133
|
-
export declare function RadioList({ ref, label, isLabelHidden, description, value, onChange, orientation, isDisabled, disabledMessage, isRequired, isOptional, size, status, labelTooltip, width, containerXstyle, containerClassName, containerStyle, controlXstyle, controlClassName, controlStyle, htmlName, children, onFocus, 'aria-describedby': ariaDescribedByProp, ...restProps }: RadioListProps): React.JSX.Element;
|
|
133
|
+
export declare function RadioList({ ref, label, isLabelHidden, description, value, onChange, orientation, isDisabled, disabledMessage, isRequired, isOptional, size, status, labelTooltip, width, containerXstyle, containerClassName, containerStyle, controlXstyle, controlClassName, controlStyle, htmlName, children, onFocus, 'aria-labelledby': ariaLabelledByProp, 'aria-describedby': ariaDescribedByProp, ...restProps }: RadioListProps): React.JSX.Element;
|
|
134
134
|
export declare namespace RadioList {
|
|
135
135
|
var displayName: string;
|
|
136
136
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioList.d.ts","sourceRoot":"","sources":["../../src/RadioList/RadioList.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,EAKZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"RadioList.d.ts","sourceRoot":"","sources":["../../src/RadioList/RadioList.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,EAKZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAKhD,OAAO,EACL,KAAK,mBAAmB,EAEzB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAG9C;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,CAAC;AAExC,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,UAAU,EAAE,OAAO,CAAC;IACpB;;;;;OAKG;IACH,kBAAkB,EAAE,OAAO,CAAC;IAC5B,UAAU,EAAE,OAAO,CAAC;IACpB,IAAI,EAAE,aAAa,CAAC;IACpB,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB;AAED,eAAO,MAAM,gBAAgB,6CAE5B,CAAC;AAiBF,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,mBAAmB,CAAC,cAAc,CAAC,EACnC,UAAU,CACX;IACC,wDAAwD;IACxD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;;;;OASG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,SAAS,CAAC,EACxB,GAAG,EACH,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,KAAK,EACL,QAAQ,EACR,WAAwB,EACxB,UAAkB,EAClB,eAAe,EACf,UAAkB,EAClB,UAAkB,EAClB,IAAW,EACX,MAAM,EACN,YAAY,EACZ,KAAK,EACL,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,iBAAiB,EAAE,kBAAkB,EACrC,kBAAkB,EAAE,mBAAmB,EACvC,GAAG,SAAS,EACb,EAAE,cAAc,qBAoNhB;yBAhPe,SAAS"}
|
|
@@ -24,6 +24,7 @@ import { Field } from "../Field/Field.js";
|
|
|
24
24
|
import { useTooltip } from "../Tooltip/index.js";
|
|
25
25
|
import { useResolvedRequired } from "../hooks/useResolvedRequired.js";
|
|
26
26
|
import { composeEventHandlers, mergeProps } from "../utils/index.js";
|
|
27
|
+
import { joinAriaIDs } from "../utils/inputAria.js";
|
|
27
28
|
import { useFieldInputStyling } from "../Field/fieldParts.js";
|
|
28
29
|
import { themeProps } from "../utils/themeProps.js";
|
|
29
30
|
|
|
@@ -89,6 +90,7 @@ export function RadioList({
|
|
|
89
90
|
htmlName,
|
|
90
91
|
children,
|
|
91
92
|
onFocus,
|
|
93
|
+
'aria-labelledby': ariaLabelledByProp,
|
|
92
94
|
'aria-describedby': ariaDescribedByProp,
|
|
93
95
|
...restProps
|
|
94
96
|
}) {
|
|
@@ -242,8 +244,10 @@ export function RadioList({
|
|
|
242
244
|
// unconditionally is safe.
|
|
243
245
|
disabledMessageTooltip.ref(el);
|
|
244
246
|
},
|
|
245
|
-
role: "radiogroup"
|
|
246
|
-
|
|
247
|
+
role: "radiogroup"
|
|
248
|
+
// A caller aria-labelledby names the group together with its label.
|
|
249
|
+
,
|
|
250
|
+
"aria-labelledby": joinAriaIDs(labelID, ariaLabelledByProp),
|
|
247
251
|
onFocus: composeEventHandlers(handleFocus, onFocus),
|
|
248
252
|
"aria-describedby": [ariaDescribedByProp, description ? descriptionID : null, status?.message ? statusMessageID : null, showsDisabledMessage ? disabledMessageTooltip.describedBy : null].filter(Boolean).join(' ') || undefined,
|
|
249
253
|
"aria-invalid": status?.type === 'error' ? true : undefined,
|
|
@@ -15,8 +15,16 @@
|
|
|
15
15
|
*/
|
|
16
16
|
import React, { type ReactNode } from 'react';
|
|
17
17
|
import type { BaseProps } from '../BaseProps';
|
|
18
|
+
import { type ItemAlign } from '../Item';
|
|
18
19
|
export interface RadioListItemProps extends BaseProps<HTMLDivElement> {
|
|
19
20
|
ref?: React.Ref<HTMLDivElement>;
|
|
21
|
+
/**
|
|
22
|
+
* Vertical alignment of the start and end content against the label,
|
|
23
|
+
* forwarded to Item. Use `first-line` to keep the radio level with the
|
|
24
|
+
* first line of a wrapped label.
|
|
25
|
+
* @default 'center'
|
|
26
|
+
*/
|
|
27
|
+
align?: ItemAlign;
|
|
20
28
|
/**
|
|
21
29
|
* Primary label for the radio item.
|
|
22
30
|
*
|
|
@@ -83,7 +91,7 @@ export interface RadioListItemProps extends BaseProps<HTMLDivElement> {
|
|
|
83
91
|
* />
|
|
84
92
|
* ```
|
|
85
93
|
*/
|
|
86
|
-
export declare function RadioListItem({ ref, label, 'aria-label': ariaLabel, value, description, isDisabled: isItemDisabled, startContent, endContent, xstyle, className, style, onClick, ...rest }: RadioListItemProps): React.JSX.Element;
|
|
94
|
+
export declare function RadioListItem({ ref, label, 'aria-label': ariaLabel, value, description, isDisabled: isItemDisabled, startContent, endContent, align, xstyle, className, style, onClick, ...rest }: RadioListItemProps): React.JSX.Element;
|
|
87
95
|
export declare namespace RadioListItem {
|
|
88
96
|
var displayName: string;
|
|
89
97
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioListItem.d.ts","sourceRoot":"","sources":["../../src/RadioList/RadioListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,EAAqB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAGhE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"RadioListItem.d.ts","sourceRoot":"","sources":["../../src/RadioList/RadioListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,EAAqB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAGhE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAQ5C,OAAO,EAAO,KAAK,SAAS,EAAC,MAAM,SAAS,CAAC;AA6H7C,MAAM,WAAW,kBAAmB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACnE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;;;;;;OAUG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;;;;;;;;;;;;;OAcG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,aAAa,CAAC,EAC5B,GAAG,EACH,KAAK,EACL,YAAY,EAAE,SAAS,EACvB,KAAK,EACL,WAAW,EACX,UAAU,EAAE,cAAsB,EAClC,YAAY,EACZ,UAAU,EACV,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EACP,GAAG,IAAI,EACR,EAAE,kBAAkB,qBAoKpB;yBAnLe,aAAa"}
|
|
@@ -122,6 +122,7 @@ export function RadioListItem({
|
|
|
122
122
|
isDisabled: isItemDisabled = false,
|
|
123
123
|
startContent,
|
|
124
124
|
endContent,
|
|
125
|
+
align,
|
|
125
126
|
xstyle,
|
|
126
127
|
className,
|
|
127
128
|
style,
|
|
@@ -244,6 +245,7 @@ export function RadioListItem({
|
|
|
244
245
|
children: description
|
|
245
246
|
}) : undefined,
|
|
246
247
|
endContent: endContent,
|
|
248
|
+
align: align,
|
|
247
249
|
xstyle: [
|
|
248
250
|
// Hover reaches the radio visual through this ancestor marker rather
|
|
249
251
|
// than props, so hovering the row tints the control. The marker rides
|
|
@@ -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":"AAmBA,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,OAAO,CAAC;IACtB,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,CAqOxC"}
|
package/dist/Selector/hooks.js
CHANGED
|
@@ -6,8 +6,12 @@
|
|
|
6
6
|
* @file hooks.ts
|
|
7
7
|
* @input Uses untransformed DOM layout geometry from the Selector's outer
|
|
8
8
|
* anchor, listbox, and selected option
|
|
9
|
-
* @output Hooks for Selector
|
|
10
|
-
*
|
|
9
|
+
* @output Hooks for Selector: useSelectedItemOffset, and useCombobox (public,
|
|
10
|
+
* exported from the Selector entry point; also used by CommandPalette)
|
|
11
|
+
* @position Selector hooks; used by Selector.tsx and CommandPalette
|
|
12
|
+
*
|
|
13
|
+
* SYNC: When useCombobox's options or return change, update:
|
|
14
|
+
* - /packages/core/src/Selector/useCombobox.doc.mjs
|
|
11
15
|
*/
|
|
12
16
|
import { useCallback, useState } from 'react';
|
|
13
17
|
import { useHighlightedOptionScroll } from "../hooks/useHighlightedOptionScroll.js";
|
|
@@ -13,6 +13,11 @@
|
|
|
13
13
|
* `TopNavMenu` use). Hover is a progressive enhancement over the popover's
|
|
14
14
|
* click behavior and is inert on coarse pointers.
|
|
15
15
|
*
|
|
16
|
+
* Nested rows span the full width of the nav list, like top-level rows, so
|
|
17
|
+
* their hover and selected fill lines up with the rows above them. The
|
|
18
|
+
* nesting indent sits inside the row as extra inline-start padding, one step
|
|
19
|
+
* per level, tracked through a private depth context.
|
|
20
|
+
*
|
|
16
21
|
* SYNC: When modified, update these files to stay in sync:
|
|
17
22
|
* - /packages/core/src/SideNav/SideNav.doc.mjs
|
|
18
23
|
* - /packages/core/src/SideNav/SideNav.test.tsx
|
|
@@ -84,7 +89,9 @@ export interface SideNavItemProps extends BaseProps<HTMLElement> {
|
|
|
84
89
|
*/
|
|
85
90
|
actions?: ReactNode;
|
|
86
91
|
/**
|
|
87
|
-
* Sub-items for nesting.
|
|
92
|
+
* Sub-items for nesting. Nested items span the full width of the nav
|
|
93
|
+
* list, like top-level items; their content is indented one step per
|
|
94
|
+
* nesting level.
|
|
88
95
|
*/
|
|
89
96
|
children?: ReactNode;
|
|
90
97
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SideNavItem.d.ts","sourceRoot":"","sources":["../../src/SideNav/SideNavItem.tsx"],"names":[],"mappings":"AAIA
|
|
1
|
+
{"version":3,"file":"SideNavItem.d.ts","sourceRoot":"","sources":["../../src/SideNav/SideNavItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAYf,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAE5D,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAIrD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,EAAgB,KAAK,WAAW,EAAC,MAAM,iCAAiC,CAAC;AA4ShF,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,WAAW,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACpC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC;;;;OAIG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;;;;;;;OAUG;IACH,WAAW,CAAC,EACR,OAAO,GACP;QACE,kBAAkB,CAAC,EAAE,OAAO,CAAC;QAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;KACpD,CAAC;IACN;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,WAAW,CAAC,EAC1B,EAAE,EACF,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,UAAkB,EAClB,UAAkB,EAClB,IAAI,EACJ,OAAO,EACP,UAAU,EACV,OAAO,EACP,QAAQ,EACR,WAAW,EAAE,eAAe,EAC5B,IAAW,EACX,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,MAAM,EACN,GAAG,IAAI,EACR,EAAE,gBAAgB,sCAkalB;yBApbe,WAAW"}
|
|
@@ -17,6 +17,11 @@
|
|
|
17
17
|
* `TopNavMenu` use). Hover is a progressive enhancement over the popover's
|
|
18
18
|
* click behavior and is inert on coarse pointers.
|
|
19
19
|
*
|
|
20
|
+
* Nested rows span the full width of the nav list, like top-level rows, so
|
|
21
|
+
* their hover and selected fill lines up with the rows above them. The
|
|
22
|
+
* nesting indent sits inside the row as extra inline-start padding, one step
|
|
23
|
+
* per level, tracked through a private depth context.
|
|
24
|
+
*
|
|
20
25
|
* SYNC: When modified, update these files to stay in sync:
|
|
21
26
|
* - /packages/core/src/SideNav/SideNav.doc.mjs
|
|
22
27
|
* - /packages/core/src/SideNav/SideNav.test.tsx
|
|
@@ -24,7 +29,7 @@
|
|
|
24
29
|
* - /apps/storybook/stories/SideNav.stories.tsx
|
|
25
30
|
* - /packages/cli/assets/templates/blocks/components/SideNav/ (showcase blocks)
|
|
26
31
|
*/
|
|
27
|
-
import { useCallback, useId, useMemo, useRef, useState } from 'react';
|
|
32
|
+
import { createContext, use, useCallback, useId, useMemo, useRef, useState } from 'react';
|
|
28
33
|
import * as stylex from '@stylexjs/stylex';
|
|
29
34
|
import "../theme/tokens.stylex.js";
|
|
30
35
|
import { colorVars, spacingVars, sizeVars, fontWeightVars, typeScaleVars, durationVars, easeVars, radiusVars } from "../theme/tokens.stylex.js";
|
|
@@ -133,6 +138,47 @@ const styles = {
|
|
|
133
138
|
}
|
|
134
139
|
};
|
|
135
140
|
|
|
141
|
+
// Nesting indent, drawn inside the row: one `--spacing-6` step per nesting
|
|
142
|
+
// level. The row itself stays full width, so its hover and selected fill
|
|
143
|
+
// matches a top-level row's.
|
|
144
|
+
// - `sm` / `md` — the ordinary row, where the row element is the link or
|
|
145
|
+
// button: its own inline-start padding plus the steps.
|
|
146
|
+
// SYNC: the base padding matches navItemStyles.sm / .md / .lg.
|
|
147
|
+
// - `primary` — the row-wrapper path: the wrapper keeps its base padding and
|
|
148
|
+
// the steps go on the primary link or button, so the whole indent is part
|
|
149
|
+
// of the click target rather than dead space that still shows feedback.
|
|
150
|
+
const _temp = {
|
|
151
|
+
kZCmMZ: "xnvo3vl",
|
|
152
|
+
"$$css": true
|
|
153
|
+
};
|
|
154
|
+
const _temp2 = {
|
|
155
|
+
kZCmMZ: "xnvo3vl",
|
|
156
|
+
"$$css": true
|
|
157
|
+
};
|
|
158
|
+
const _temp3 = {
|
|
159
|
+
kZCmMZ: "xnvo3vl",
|
|
160
|
+
"$$css": true
|
|
161
|
+
};
|
|
162
|
+
const indentStyles = {
|
|
163
|
+
sm: depth => [_temp, {
|
|
164
|
+
"--x-paddingInlineStart": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(`calc(${spacingVars['--spacing-1']} + ${depth} * ${spacingVars['--spacing-6']})`)
|
|
165
|
+
}],
|
|
166
|
+
md: depth => [_temp2, {
|
|
167
|
+
"--x-paddingInlineStart": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(`calc(${spacingVars['--spacing-2']} + ${depth} * ${spacingVars['--spacing-6']})`)
|
|
168
|
+
}],
|
|
169
|
+
primary: depth => [_temp3, {
|
|
170
|
+
"--x-paddingInlineStart": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(`calc(${depth} * ${spacingVars['--spacing-6']})`)
|
|
171
|
+
}]
|
|
172
|
+
};
|
|
173
|
+
|
|
174
|
+
/**
|
|
175
|
+
* How many SideNavItems deep the current item sits: 0 at the top level,
|
|
176
|
+
* 1 inside one parent, and so on. A collapsed rail's flyout resets it to 0,
|
|
177
|
+
* since the flyout lists a parent's children as its own top level.
|
|
178
|
+
*/
|
|
179
|
+
const SideNavItemDepthContext = /*#__PURE__*/createContext(0);
|
|
180
|
+
SideNavItemDepthContext.displayName = 'SideNavItemDepthContext';
|
|
181
|
+
|
|
136
182
|
/**
|
|
137
183
|
* Cascaded to the `actions` slot through `SizeContext` so a consumer's row
|
|
138
184
|
* controls come out the same height as the built-in expand/collapse toggle,
|
|
@@ -259,6 +305,7 @@ export function SideNavItem({
|
|
|
259
305
|
const id = useId();
|
|
260
306
|
const hasChildren = !!children;
|
|
261
307
|
const itemRef = useRef(null);
|
|
308
|
+
const depth = use(SideNavItemDepthContext);
|
|
262
309
|
|
|
263
310
|
// Popover for collapsed items with children
|
|
264
311
|
const popover = usePopover({
|
|
@@ -391,7 +438,10 @@ export function SideNavItem({
|
|
|
391
438
|
children: label
|
|
392
439
|
}), /*#__PURE__*/_jsx(SideNavCollapseContext, {
|
|
393
440
|
value: EXPANDED_COLLAPSE_STATE,
|
|
394
|
-
children:
|
|
441
|
+
children: /*#__PURE__*/_jsx(SideNavItemDepthContext, {
|
|
442
|
+
value: 0,
|
|
443
|
+
children: children
|
|
444
|
+
})
|
|
395
445
|
})]
|
|
396
446
|
}), {
|
|
397
447
|
placement: 'end',
|
|
@@ -457,6 +507,15 @@ export function SideNavItem({
|
|
|
457
507
|
disabled: isDisabled ? 'disabled' : null
|
|
458
508
|
});
|
|
459
509
|
const itemStyleArgs = [navItemStyles.item, interactionOverlayStyles.backgroundColor, navItemStyles[size], isSelected && navItemStyles.selected, isDisabled && navItemStyles.disabled];
|
|
510
|
+
const rowIndent = depth > 0 && indentStyles[size === 'sm' ? 'sm' : 'md'](depth);
|
|
511
|
+
const primaryIndent = depth > 0 && indentStyles.primary(depth);
|
|
512
|
+
|
|
513
|
+
// The indent is a runtime value, so it reaches the element as an inline
|
|
514
|
+
// style. These props are spread after `rest`, so fold the caller's `style`
|
|
515
|
+
// back in (caller wins) rather than letting the indent replace it.
|
|
516
|
+
const callerStyle = {
|
|
517
|
+
style: rest.style
|
|
518
|
+
};
|
|
460
519
|
|
|
461
520
|
// Three shapes of the same row appearance:
|
|
462
521
|
// - `rowProps` — split-action path (toggle, no actions): presentational
|
|
@@ -471,7 +530,7 @@ export function SideNavItem({
|
|
|
471
530
|
...pressable
|
|
472
531
|
};
|
|
473
532
|
const focusableRowProps = {
|
|
474
|
-
...mergeProps(itemThemeProps, focusOutlineProps.focusVisible(...itemStyleArgs)),
|
|
533
|
+
...mergeProps(itemThemeProps, mergeProps(focusOutlineProps.focusVisible(...itemStyleArgs, rowIndent), callerStyle)),
|
|
475
534
|
...pressable
|
|
476
535
|
};
|
|
477
536
|
const actionsRowProps = {
|
|
@@ -511,10 +570,10 @@ export function SideNavItem({
|
|
|
511
570
|
onClick: handleClick,
|
|
512
571
|
...rest,
|
|
513
572
|
...rowPrimaryAriaProps,
|
|
514
|
-
...(hasActions ?
|
|
573
|
+
...mergeProps(hasActions ?
|
|
515
574
|
// The wrapper rings for this element; suppressing here is what
|
|
516
575
|
// keeps the UA's own ring from painting inside that one.
|
|
517
|
-
focusOutlineProps.suppressed(styles.splitAction) : focusOutlineProps.focusVisible(styles.splitAction)),
|
|
576
|
+
focusOutlineProps.suppressed(styles.splitAction, primaryIndent) : focusOutlineProps.focusVisible(styles.splitAction, primaryIndent), callerStyle),
|
|
518
577
|
children: itemContent
|
|
519
578
|
}), hasIndependentToggle && /*#__PURE__*/_jsx("button", {
|
|
520
579
|
type: "button",
|
|
@@ -575,21 +634,24 @@ export function SideNavItem({
|
|
|
575
634
|
inert: isItemCollapsed ? true : undefined,
|
|
576
635
|
...{
|
|
577
636
|
0: {
|
|
578
|
-
className: "xrvj5dj x1tu4anv
|
|
637
|
+
className: "xrvj5dj x1tu4anv x1rea2x4 x6kj92 xd00j3c x1eizr8u xsr0bmt xostmdb x1k6wr6r xlr8y92"
|
|
579
638
|
},
|
|
580
639
|
1: {
|
|
581
|
-
className: "xrvj5dj
|
|
640
|
+
className: "xrvj5dj x6kj92 xd00j3c x1eizr8u xsr0bmt xlr8y92 xihq33y xb3r6kr xf1rc6"
|
|
582
641
|
}
|
|
583
642
|
}[!!isItemCollapsed << 0],
|
|
584
643
|
children: /*#__PURE__*/_jsxs("div", {
|
|
585
644
|
...{
|
|
586
|
-
className: "
|
|
645
|
+
className: "x2lwn1j"
|
|
587
646
|
},
|
|
588
647
|
children: [/*#__PURE__*/_jsx("span", {
|
|
589
648
|
id: `${id}-label`,
|
|
590
649
|
hidden: true,
|
|
591
650
|
children: label
|
|
592
|
-
}),
|
|
651
|
+
}), /*#__PURE__*/_jsx(SideNavItemDepthContext, {
|
|
652
|
+
value: depth + 1,
|
|
653
|
+
children: children
|
|
654
|
+
})]
|
|
593
655
|
})
|
|
594
656
|
})]
|
|
595
657
|
});
|
package/dist/Switch/Switch.d.ts
CHANGED
|
@@ -159,7 +159,7 @@ export interface SwitchProps extends Omit<BaseProps, 'onChange'> {
|
|
|
159
159
|
* />
|
|
160
160
|
* ```
|
|
161
161
|
*/
|
|
162
|
-
export declare function Switch({ label, isLabelHidden, description, onChange, changeAction, isLoading, value, isDisabled, htmlName, disabledMessage, isOptional, isRequired, onFocus, onBlur, labelIcon, labelTooltip, labelPosition, labelSpacing, status, size, width, xstyle, className, style, ref, ...rest }: SwitchProps): import("react").JSX.Element;
|
|
162
|
+
export declare function Switch({ label, isLabelHidden, description, onChange, changeAction, isLoading, value, isDisabled, htmlName, disabledMessage, isOptional, isRequired, onFocus, onBlur, labelIcon, labelTooltip, labelPosition, labelSpacing, status, size, width, xstyle, className, style, ref, 'aria-describedby': ariaDescribedByProp, 'aria-labelledby': ariaLabelledByProp, ...rest }: SwitchProps): import("react").JSX.Element;
|
|
163
163
|
export declare namespace Switch {
|
|
164
164
|
var displayName: string;
|
|
165
165
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../src/Switch/Switch.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../src/Switch/Switch.tsx"],"names":[],"mappings":"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"}
|