@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
|
@@ -0,0 +1,134 @@
|
|
|
1
|
+
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
|
+
|
|
3
|
+
'use client';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* @file DrawerHeader.tsx
|
|
7
|
+
* @input Uses React, StyleX, LayoutHeader, Button, Icon, Heading, Text, i18n, BaseProps, isRenderable, mergeProps, themeProps
|
|
8
|
+
* @output Exports DrawerHeader component and DrawerHeaderProps
|
|
9
|
+
* @position Drawer header; composed in a Layout header slot inside Drawer, tested by DrawerHeader.test.tsx
|
|
10
|
+
*
|
|
11
|
+
* Mirrors DialogHeader's API: a title, an optional subtitle, start/end content
|
|
12
|
+
* slots, and a close button that renders only when `onOpenChange` is passed.
|
|
13
|
+
* Two differences follow from Drawer's contract:
|
|
14
|
+
* - It does not move focus on mount. Drawer owns focus entry through
|
|
15
|
+
* `data-autofocus` once its native host is presented.
|
|
16
|
+
* - It does not name the drawer. Drawer's required `label` does.
|
|
17
|
+
*
|
|
18
|
+
* SYNC: When modified, update these files to stay in sync:
|
|
19
|
+
* - /packages/core/src/Drawer/DrawerHeader.doc.mjs (props, anatomy, theming)
|
|
20
|
+
* - /packages/core/src/Drawer/DrawerHeader.test.tsx (tests for new/changed behavior)
|
|
21
|
+
* - /packages/core/src/Drawer/index.ts (exports if types change)
|
|
22
|
+
* - /packages/cli/assets/templates/blocks/components/Drawer/ (showcase blocks)
|
|
23
|
+
* - /packages/cli/assets/templates/blocks/components/DrawerHeader/ (showcase blocks)
|
|
24
|
+
* - /apps/storybook/stories/Drawer.stories.tsx (examples and visual coverage)
|
|
25
|
+
* - /apps/storybook/stories/DrawerHeader.stories.tsx (component audit fixture)
|
|
26
|
+
*/
|
|
27
|
+
import * as stylex from '@stylexjs/stylex';
|
|
28
|
+
import "../theme/tokens.stylex.js";
|
|
29
|
+
import { sizeVars, spacingVars, typeScaleVars } from "../theme/tokens.stylex.js";
|
|
30
|
+
import { Button } from "../Button/index.js";
|
|
31
|
+
import { Heading } from "../Heading/index.js";
|
|
32
|
+
import { Icon } from "../Icon/index.js";
|
|
33
|
+
import { LayoutHeader } from "../Layout/index.js";
|
|
34
|
+
import { Text } from "../Text/index.js";
|
|
35
|
+
import { useTranslator } from "../i18n/index.js";
|
|
36
|
+
import { isRenderable, mergeProps, themeProps } from "../utils/index.js";
|
|
37
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
38
|
+
/**
|
|
39
|
+
* Header for a Drawer: a title, optional subtitle and start/end content, and a
|
|
40
|
+
* close button when `onOpenChange` is passed. Same API as DialogHeader.
|
|
41
|
+
*
|
|
42
|
+
* Uses LayoutHeader internally for consistent styling with other layout headers.
|
|
43
|
+
*
|
|
44
|
+
* @example
|
|
45
|
+
* ```
|
|
46
|
+
* <Drawer isOpen={isOpen} onOpenChange={setIsOpen} label="Details">
|
|
47
|
+
* <DrawerHeader title="Details" onOpenChange={setIsOpen} />
|
|
48
|
+
* <Section padding={4}>Content</Section>
|
|
49
|
+
* </Drawer>
|
|
50
|
+
* ```
|
|
51
|
+
*/
|
|
52
|
+
export function DrawerHeader({
|
|
53
|
+
title,
|
|
54
|
+
subtitle,
|
|
55
|
+
onOpenChange,
|
|
56
|
+
startContent,
|
|
57
|
+
endContent,
|
|
58
|
+
endContentEdgeCompensation,
|
|
59
|
+
hasDivider,
|
|
60
|
+
xstyle,
|
|
61
|
+
className,
|
|
62
|
+
style,
|
|
63
|
+
ref,
|
|
64
|
+
...rest
|
|
65
|
+
}) {
|
|
66
|
+
const t = useTranslator();
|
|
67
|
+
const hasSubtitle = isRenderable(subtitle);
|
|
68
|
+
const hasStartContent = isRenderable(startContent);
|
|
69
|
+
const hasEndContent = isRenderable(endContent);
|
|
70
|
+
const shouldCompensateEndBlock = endContentEdgeCompensation == null ? onOpenChange != null : endContentEdgeCompensation === 'block' || endContentEdgeCompensation === 'all';
|
|
71
|
+
const shouldCompensateEndInline = endContentEdgeCompensation == null ? onOpenChange != null : endContentEdgeCompensation === 'inline' || endContentEdgeCompensation === 'all';
|
|
72
|
+
return /*#__PURE__*/_jsx(LayoutHeader, {
|
|
73
|
+
ref: ref,
|
|
74
|
+
hasDivider: hasDivider,
|
|
75
|
+
xstyle: xstyle,
|
|
76
|
+
className: className,
|
|
77
|
+
style: style,
|
|
78
|
+
...rest,
|
|
79
|
+
children: /*#__PURE__*/_jsxs("div", {
|
|
80
|
+
...mergeProps(themeProps('drawer-header'), {
|
|
81
|
+
className: "x78zum5 x1cy8zhl x1qughib xjcht0a"
|
|
82
|
+
}),
|
|
83
|
+
children: [hasStartContent && /*#__PURE__*/_jsx("div", {
|
|
84
|
+
...mergeProps(themeProps('drawer-header-start-content'), {
|
|
85
|
+
className: "x78zum5 x6s0dn4 x1txdalj x2lah0s"
|
|
86
|
+
}),
|
|
87
|
+
children: startContent
|
|
88
|
+
}), /*#__PURE__*/_jsxs("div", {
|
|
89
|
+
...mergeProps(themeProps('drawer-header-title-block'), {
|
|
90
|
+
className: "x78zum5 xdt5ytf xsn7fz1 x98rzlu xeuugli xqixskq"
|
|
91
|
+
}),
|
|
92
|
+
children: [/*#__PURE__*/_jsx(Heading, {
|
|
93
|
+
level: 2,
|
|
94
|
+
children: title
|
|
95
|
+
}), hasSubtitle && /*#__PURE__*/_jsx(Text, {
|
|
96
|
+
type: "body",
|
|
97
|
+
size: "sm",
|
|
98
|
+
color: "secondary",
|
|
99
|
+
children: subtitle
|
|
100
|
+
})]
|
|
101
|
+
}), (hasEndContent || onOpenChange != null) && /*#__PURE__*/_jsxs("div", {
|
|
102
|
+
...mergeProps(themeProps('drawer-header-end-content'), {
|
|
103
|
+
0: {
|
|
104
|
+
className: "x78zum5 x6s0dn4 x1txdalj x2lah0s"
|
|
105
|
+
},
|
|
106
|
+
2: {
|
|
107
|
+
className: "x78zum5 x6s0dn4 x1txdalj x2lah0s xhzvc8f"
|
|
108
|
+
},
|
|
109
|
+
1: {
|
|
110
|
+
className: "x78zum5 x6s0dn4 x1txdalj x2lah0s x3kzqx6"
|
|
111
|
+
},
|
|
112
|
+
3: {
|
|
113
|
+
className: "x78zum5 x6s0dn4 x1txdalj x2lah0s xhzvc8f x3kzqx6"
|
|
114
|
+
}
|
|
115
|
+
}[!!shouldCompensateEndBlock << 1 | !!shouldCompensateEndInline << 0]),
|
|
116
|
+
children: [endContent, onOpenChange && /*#__PURE__*/_jsx(Button, {
|
|
117
|
+
variant: "ghost",
|
|
118
|
+
label: t('@astryx.dialog.close'),
|
|
119
|
+
tooltip: t('@astryx.dialog.close'),
|
|
120
|
+
icon: /*#__PURE__*/_jsx(Icon, {
|
|
121
|
+
icon: "close",
|
|
122
|
+
color: "inherit",
|
|
123
|
+
...themeProps('drawer-header-close-icon')
|
|
124
|
+
}),
|
|
125
|
+
onClick: () => {
|
|
126
|
+
onOpenChange(false);
|
|
127
|
+
},
|
|
128
|
+
isIconOnly: true
|
|
129
|
+
})]
|
|
130
|
+
})]
|
|
131
|
+
})
|
|
132
|
+
});
|
|
133
|
+
}
|
|
134
|
+
DrawerHeader.displayName = 'DrawerHeader';
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @file index.ts
|
|
3
|
+
* @input Drawer.tsx, DrawerHeader.tsx
|
|
4
|
+
* @output Re-exports Drawer and DrawerHeader components and their prop types
|
|
5
|
+
* @position Core entry point for the Drawer directory (`@astryxdesign/core/Drawer`)
|
|
6
|
+
*/
|
|
7
|
+
export { Drawer } from './Drawer';
|
|
8
|
+
export type { DrawerProps } from './Drawer';
|
|
9
|
+
export { DrawerHeader } from './DrawerHeader';
|
|
10
|
+
export type { DrawerHeaderProps } from './DrawerHeader';
|
|
11
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Drawer/index.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAC;AAChC,YAAY,EAAC,WAAW,EAAC,MAAM,UAAU,CAAC;AAC1C,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAC5C,YAAY,EAAC,iBAAiB,EAAC,MAAM,gBAAgB,CAAC"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* @file index.ts
|
|
5
|
+
* @input Drawer.tsx, DrawerHeader.tsx
|
|
6
|
+
* @output Re-exports Drawer and DrawerHeader components and their prop types
|
|
7
|
+
* @position Core entry point for the Drawer directory (`@astryxdesign/core/Drawer`)
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
export { Drawer } from "./Drawer.js";
|
|
11
|
+
export { DrawerHeader } from "./DrawerHeader.js";
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @file useDrawerDialogPresence.ts
|
|
3
|
+
* @input Controlled open state, modal mode, dialog ref, and rendered-state setter
|
|
4
|
+
* @output Coordinates native top-layer presence, exit timing, focus restoration, and unmount cleanup
|
|
5
|
+
* @position Drawer-internal hook; consumed only by Drawer.tsx
|
|
6
|
+
*
|
|
7
|
+
* The drawer has two independent notions of presence:
|
|
8
|
+
* - React's rendered state keeps the panel visible for its CSS exit.
|
|
9
|
+
* - Native `showModal()` or `showPopover()` state keeps it in the browser top
|
|
10
|
+
* layer.
|
|
11
|
+
*
|
|
12
|
+
* Their close ordering is a browser-visible invariant: the panel must finish
|
|
13
|
+
* its exit, then leave the active native host and hide in the same task. If the
|
|
14
|
+
* hide lands a frame later, a transformed ancestor becomes the containing block
|
|
15
|
+
* for the now-non-top-layer `position: fixed` panel and it paints back inside
|
|
16
|
+
* the page for one frame.
|
|
17
|
+
*
|
|
18
|
+
* SYNC: When modified, update:
|
|
19
|
+
* - /packages/core/src/Drawer/Drawer.test.tsx
|
|
20
|
+
* - /.github/scripts/modal-close-visibility.js
|
|
21
|
+
*/
|
|
22
|
+
import { type Dispatch, type RefObject, type SetStateAction } from 'react';
|
|
23
|
+
type UseDrawerDialogPresenceOptions = {
|
|
24
|
+
dialogRef: RefObject<HTMLDialogElement | null>;
|
|
25
|
+
isOpen: boolean;
|
|
26
|
+
isModal: boolean;
|
|
27
|
+
setIsRendered: Dispatch<SetStateAction<boolean>>;
|
|
28
|
+
};
|
|
29
|
+
/**
|
|
30
|
+
* Coordinates the native dialog and React-rendered presence for Drawer.
|
|
31
|
+
*
|
|
32
|
+
* Opening captures the trigger, enters the modal-dialog or manual-popover host,
|
|
33
|
+
* and honours the component's `data-autofocus` contract. Closing waits for the
|
|
34
|
+
* actual transform transition (with a computed-duration backstop), then leaves
|
|
35
|
+
* the native host and synchronously hides the panel before the browser can paint
|
|
36
|
+
* it outside the top layer, restores focus to the captured trigger, and only
|
|
37
|
+
* then dispatches the popover host's synthetic `close`. Unmount cleanup closes
|
|
38
|
+
* a host left open by React Activity or a removed subtree.
|
|
39
|
+
*/
|
|
40
|
+
export declare function useDrawerDialogPresence({ dialogRef, isOpen, isModal, setIsRendered, }: UseDrawerDialogPresenceOptions): void;
|
|
41
|
+
export {};
|
|
42
|
+
//# sourceMappingURL=useDrawerDialogPresence.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useDrawerDialogPresence.d.ts","sourceRoot":"","sources":["../../src/Drawer/useDrawerDialogPresence.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,OAAO,EAGL,KAAK,QAAQ,EACb,KAAK,SAAS,EACd,KAAK,cAAc,EACpB,MAAM,OAAO,CAAC;AAaf,KAAK,8BAA8B,GAAG;IACpC,SAAS,EAAE,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IAC/C,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;CAClD,CAAC;AAuDF;;;;;;;;;;GAUG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,SAAS,EACT,MAAM,EACN,OAAO,EACP,aAAa,GACd,EAAE,8BAA8B,GAAG,IAAI,CAoEvC"}
|
|
@@ -0,0 +1,236 @@
|
|
|
1
|
+
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
|
+
|
|
3
|
+
'use client';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* @file useDrawerDialogPresence.ts
|
|
7
|
+
* @input Controlled open state, modal mode, dialog ref, and rendered-state setter
|
|
8
|
+
* @output Coordinates native top-layer presence, exit timing, focus restoration, and unmount cleanup
|
|
9
|
+
* @position Drawer-internal hook; consumed only by Drawer.tsx
|
|
10
|
+
*
|
|
11
|
+
* The drawer has two independent notions of presence:
|
|
12
|
+
* - React's rendered state keeps the panel visible for its CSS exit.
|
|
13
|
+
* - Native `showModal()` or `showPopover()` state keeps it in the browser top
|
|
14
|
+
* layer.
|
|
15
|
+
*
|
|
16
|
+
* Their close ordering is a browser-visible invariant: the panel must finish
|
|
17
|
+
* its exit, then leave the active native host and hide in the same task. If the
|
|
18
|
+
* hide lands a frame later, a transformed ancestor becomes the containing block
|
|
19
|
+
* for the now-non-top-layer `position: fixed` panel and it paints back inside
|
|
20
|
+
* the page for one frame.
|
|
21
|
+
*
|
|
22
|
+
* SYNC: When modified, update:
|
|
23
|
+
* - /packages/core/src/Drawer/Drawer.test.tsx
|
|
24
|
+
* - /.github/scripts/modal-close-visibility.js
|
|
25
|
+
*/
|
|
26
|
+
import { useEffect, useRef } from 'react';
|
|
27
|
+
import { flushSync } from 'react-dom';
|
|
28
|
+
|
|
29
|
+
/** Slack past the computed transition before the backstop gives up waiting. */
|
|
30
|
+
const EXIT_BACKSTOP_BUFFER_MS = 50;
|
|
31
|
+
|
|
32
|
+
/**
|
|
33
|
+
* Hold used when the transition duration cannot be read — an unresolved
|
|
34
|
+
* `var()` outside a real browser. Picking a fixed number would otherwise make
|
|
35
|
+
* an assumption about the consumer's theme.
|
|
36
|
+
*/
|
|
37
|
+
const EXIT_FALLBACK_MS = 250;
|
|
38
|
+
function isPopoverOpen(dialog) {
|
|
39
|
+
try {
|
|
40
|
+
return dialog.matches(':popover-open');
|
|
41
|
+
} catch {
|
|
42
|
+
// jsdom and pre-Popover browsers do not recognize :popover-open.
|
|
43
|
+
return false;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
function isDrawerHostOpen(dialog, isModal) {
|
|
47
|
+
return isModal ? dialog.open : isPopoverOpen(dialog) || dialog.open;
|
|
48
|
+
}
|
|
49
|
+
function showDrawerHost(dialog, isModal) {
|
|
50
|
+
if (isModal) {
|
|
51
|
+
dialog.showModal();
|
|
52
|
+
} else if (typeof dialog.showPopover === 'function') {
|
|
53
|
+
dialog.showPopover();
|
|
54
|
+
} else {
|
|
55
|
+
// Reduced fallback for browsers below the Popover API support floor.
|
|
56
|
+
dialog.show();
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
function dispatchDialogClose(dialog) {
|
|
60
|
+
const EventConstructor = dialog.ownerDocument.defaultView?.Event ?? Event;
|
|
61
|
+
dialog.dispatchEvent(new EventConstructor('close'));
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
/**
|
|
65
|
+
* Leaves the active native host. Returns whether the caller owes a synthetic
|
|
66
|
+
* `close` dispatch: `dialog.close()` used to power the non-modal path, and
|
|
67
|
+
* consumers observe its native `close` event through refs/onClose. Popover
|
|
68
|
+
* dismissal has no equivalent event, so that public DOM contract is preserved
|
|
69
|
+
* explicitly — but by the caller, not here. Native `close` is queued as a
|
|
70
|
+
* task, so a consumer's listener always ran after this hook's own focus
|
|
71
|
+
* restore; the synthetic event must keep that ordering (and fire exactly once
|
|
72
|
+
* per exit, including the unmount path).
|
|
73
|
+
*/
|
|
74
|
+
function hideDrawerHost(dialog, isModal) {
|
|
75
|
+
if (!isModal && typeof dialog.hidePopover === 'function') {
|
|
76
|
+
dialog.hidePopover();
|
|
77
|
+
return true;
|
|
78
|
+
}
|
|
79
|
+
if (dialog.open) {
|
|
80
|
+
dialog.close();
|
|
81
|
+
}
|
|
82
|
+
return false;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
/**
|
|
86
|
+
* Coordinates the native dialog and React-rendered presence for Drawer.
|
|
87
|
+
*
|
|
88
|
+
* Opening captures the trigger, enters the modal-dialog or manual-popover host,
|
|
89
|
+
* and honours the component's `data-autofocus` contract. Closing waits for the
|
|
90
|
+
* actual transform transition (with a computed-duration backstop), then leaves
|
|
91
|
+
* the native host and synchronously hides the panel before the browser can paint
|
|
92
|
+
* it outside the top layer, restores focus to the captured trigger, and only
|
|
93
|
+
* then dispatches the popover host's synthetic `close`. Unmount cleanup closes
|
|
94
|
+
* a host left open by React Activity or a removed subtree.
|
|
95
|
+
*/
|
|
96
|
+
export function useDrawerDialogPresence({
|
|
97
|
+
dialogRef,
|
|
98
|
+
isOpen,
|
|
99
|
+
isModal,
|
|
100
|
+
setIsRendered
|
|
101
|
+
}) {
|
|
102
|
+
// Element focused when the drawer opened — restored on close.
|
|
103
|
+
const triggerElementRef = useRef(null);
|
|
104
|
+
useEffect(() => {
|
|
105
|
+
const dialog = dialogRef.current;
|
|
106
|
+
if (!dialog) {
|
|
107
|
+
return;
|
|
108
|
+
}
|
|
109
|
+
if (isOpen) {
|
|
110
|
+
if (!isDrawerHostOpen(dialog, isModal)) {
|
|
111
|
+
triggerElementRef.current = document.activeElement;
|
|
112
|
+
showDrawerHost(dialog, isModal);
|
|
113
|
+
// React's autoFocus calls .focus() during commit, before the native host
|
|
114
|
+
// is visible, so it silently fails — honour data-autofocus instead (same
|
|
115
|
+
// contract as Dialog).
|
|
116
|
+
dialog.querySelector('[data-autofocus]')?.focus();
|
|
117
|
+
}
|
|
118
|
+
return;
|
|
119
|
+
}
|
|
120
|
+
if (!isDrawerHostOpen(dialog, isModal)) {
|
|
121
|
+
return;
|
|
122
|
+
}
|
|
123
|
+
return waitForDrawerExit(dialog, () => {
|
|
124
|
+
const owesCloseEvent = hideDrawerHost(dialog, isModal);
|
|
125
|
+
// flushSync, not a plain setState: React's default scheduling can land
|
|
126
|
+
// the commit after the next paint, and that one frame is exactly the
|
|
127
|
+
// bug — the panel paints outside the top layer. Both happen in this
|
|
128
|
+
// task, so the browser never gets to paint between them.
|
|
129
|
+
// eslint-disable-next-line @eslint-react/dom-no-flush-sync -- the panel must stop painting in the task the native host closes
|
|
130
|
+
flushSync(() => {
|
|
131
|
+
setIsRendered(false);
|
|
132
|
+
});
|
|
133
|
+
// Return focus after leaving the native host: a modal dialog makes the
|
|
134
|
+
// rest of the document inert, so focusing earlier silently fails.
|
|
135
|
+
triggerElementRef.current?.focus();
|
|
136
|
+
triggerElementRef.current = null;
|
|
137
|
+
// The synthetic popover close fires after the focus restore above,
|
|
138
|
+
// mirroring the task-queued native event: a consumer close listener
|
|
139
|
+
// that retargets focus (master-detail row switching) gets the last word.
|
|
140
|
+
if (owesCloseEvent) {
|
|
141
|
+
dispatchDialogClose(dialog);
|
|
142
|
+
}
|
|
143
|
+
});
|
|
144
|
+
}, [dialogRef, isModal, isOpen, setIsRendered]);
|
|
145
|
+
|
|
146
|
+
// Leave the active native host on unmount. When the drawer is mounted inside
|
|
147
|
+
// an <Activity> that flips to mode="hidden", React runs effect cleanups (with
|
|
148
|
+
// stale isOpen) instead of re-running the effect with isOpen=false. Leaving
|
|
149
|
+
// the host active would strand the top-layer surface and skip the next open.
|
|
150
|
+
// This is deliberately separate from the open/close effect: putting it in
|
|
151
|
+
// that cleanup would cut off every delayed slide-out.
|
|
152
|
+
useEffect(() => {
|
|
153
|
+
const dialog = dialogRef.current;
|
|
154
|
+
return () => {
|
|
155
|
+
if (dialog && isDrawerHostOpen(dialog, isModal)) {
|
|
156
|
+
if (hideDrawerHost(dialog, isModal)) {
|
|
157
|
+
// No focus restore on this path — the drawer is being torn down, so
|
|
158
|
+
// the owed synthetic close fires immediately (still exactly once).
|
|
159
|
+
dispatchDialogClose(dialog);
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
};
|
|
163
|
+
}, [dialogRef, isModal]);
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
/**
|
|
167
|
+
* Wait for the panel's transform transition, with a computed-duration
|
|
168
|
+
* backstop. Mirrors BottomSheetPanel.waitForTransition: the native event is
|
|
169
|
+
* authoritative, and the timeout only prevents a lost event from stranding an
|
|
170
|
+
* open dialog.
|
|
171
|
+
*/
|
|
172
|
+
function waitForDrawerExit(element, complete) {
|
|
173
|
+
let done = false;
|
|
174
|
+
let timer = null;
|
|
175
|
+
const finish = () => {
|
|
176
|
+
if (done) {
|
|
177
|
+
return;
|
|
178
|
+
}
|
|
179
|
+
done = true;
|
|
180
|
+
if (timer != null) {
|
|
181
|
+
clearTimeout(timer);
|
|
182
|
+
}
|
|
183
|
+
element.removeEventListener('transitionend', handleTransitionEnd);
|
|
184
|
+
element.removeEventListener('transitioncancel', handleTransitionEnd);
|
|
185
|
+
complete();
|
|
186
|
+
};
|
|
187
|
+
const handleTransitionEnd = event => {
|
|
188
|
+
if (event.target === element && event.propertyName === 'transform') {
|
|
189
|
+
finish();
|
|
190
|
+
}
|
|
191
|
+
};
|
|
192
|
+
element.addEventListener('transitionend', handleTransitionEnd);
|
|
193
|
+
element.addEventListener('transitioncancel', handleTransitionEnd);
|
|
194
|
+
const transitionMs = readTransformTransitionMs(element);
|
|
195
|
+
timer = setTimeout(finish, (transitionMs ?? EXIT_FALLBACK_MS) + EXIT_BACKSTOP_BUFFER_MS);
|
|
196
|
+
return () => {
|
|
197
|
+
done = true;
|
|
198
|
+
if (timer != null) {
|
|
199
|
+
clearTimeout(timer);
|
|
200
|
+
}
|
|
201
|
+
element.removeEventListener('transitionend', handleTransitionEnd);
|
|
202
|
+
element.removeEventListener('transitioncancel', handleTransitionEnd);
|
|
203
|
+
};
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
/** Read the transform transition's duration + delay from computed CSS. */
|
|
207
|
+
function readTransformTransitionMs(element) {
|
|
208
|
+
const computed = window.getComputedStyle(element);
|
|
209
|
+
const properties = computed.transitionProperty.split(',').map(value => value.trim());
|
|
210
|
+
const durations = parseTimes(computed.transitionDuration);
|
|
211
|
+
const delays = parseTimes(computed.transitionDelay);
|
|
212
|
+
if (properties.length === 0 || durations.length === 0 || delays.length === 0 || durations.includes(null) || delays.includes(null)) {
|
|
213
|
+
return null;
|
|
214
|
+
}
|
|
215
|
+
return properties.reduce((longest, property, index) => {
|
|
216
|
+
if (property !== 'transform' && property !== 'all') {
|
|
217
|
+
return longest;
|
|
218
|
+
}
|
|
219
|
+
const duration = durations[index % durations.length];
|
|
220
|
+
const delay = delays[index % delays.length];
|
|
221
|
+
return Math.max(longest, (duration ?? 0) + (delay ?? 0));
|
|
222
|
+
}, 0);
|
|
223
|
+
}
|
|
224
|
+
function parseTimes(value) {
|
|
225
|
+
return value.split(',').map(part => {
|
|
226
|
+
const trimmed = part.trim();
|
|
227
|
+
const time = Number.parseFloat(trimmed);
|
|
228
|
+
if (!Number.isFinite(time)) {
|
|
229
|
+
return null;
|
|
230
|
+
}
|
|
231
|
+
if (trimmed.endsWith('ms')) {
|
|
232
|
+
return time;
|
|
233
|
+
}
|
|
234
|
+
return trimmed.endsWith('s') ? time * 1000 : null;
|
|
235
|
+
});
|
|
236
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,OAAO,KAAK,EAAE,EAOZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,EAAS,KAAK,WAAW,EAAC,MAAM,WAAW,CAAC;AAKnD,OAAO,KAAK,EAAC,qBAAqB,EAAC,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,OAAO,KAAK,EAAE,EAOZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,EAAS,KAAK,WAAW,EAAC,MAAM,WAAW,CAAC;AAKnD,OAAO,KAAK,EAAC,qBAAqB,EAAC,MAAM,oBAAoB,CAAC;AA0B9D,OAAO,EAEL,KAAK,oBAAoB,EAC1B,MAAM,kCAAkC,CAAC;AAI1C,OAAO,KAAK,EAAC,cAAc,EAAE,cAAc,EAAC,MAAM,mBAAmB,CAAC;AAStE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAmQ5C;;;;;;;GAOG;AACH,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAChD,qBAAqB,EACnB,MAAM,GACN,SAAS,GACT,YAAY,GACZ,SAAS,GACT,aAAa,GACb,YAAY,GACZ,kBAAkB,GAClB,MAAM,GACN,QAAQ,GACR,KAAK,CACR;IACC;;;;;;OAMG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,6BAA6B;IAC7B,KAAK,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,KAAK,CAAC,EAAE,kBAAkB,EAAE,CAAC;CAC9B;AAED;;;GAGG;AACH,MAAM,WAAW,uBAAuB;IACtC,IAAI,EAAE,SAAS,CAAC;CACjB;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,SAAS,CAAC;IAChB,0EAA0E;IAC1E,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,oBAAoB,EAAE,CAAC;CAC/B;AAED,MAAM,MAAM,kBAAkB,GAC5B,oBAAoB,GAAG,uBAAuB,GAAG,mBAAmB,CAAC;AAMvE,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;AAEnE,MAAM,MAAM,wBAAwB,GAAG,oBAAoB,CAAC;AAE5D;;;;;;GAMG;AACH,MAAM,WAAW,wBAAwB;IACvC,yEAAyE;IACzE,GAAG,EAAE,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IAC3C,yDAAyD;IACzD,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACxD,cAAc,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC/D,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAChE,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC9D,SAAS,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC7D,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACxD,eAAe,EAAE,MAAM,GAAG,QAAQ,CAAC;IACnC,eAAe,EAAE,OAAO,CAAC;IACzB,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,UAAU,qBAAsB,SAAQ,SAAS;IAC/C;;;OAGG;IACH,MAAM,CAAC,EAAE,uBAAuB,CAAC;IACjC;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,wBAAwB,KAAK,SAAS,CAAC;IAC/D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B;;;;OAIG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,UAAU,qBAAsB,SAAQ,qBAAqB;IAC3D;;;;;OAKG;IACH,YAAY,CAAC,EAAE,wBAAwB,CAAC;IACxC,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,UAAU,yBAA0B,SAAQ,qBAAqB;IAC/D,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,MAAM,iBAAiB,GAC3B,qBAAqB,GAAG,yBAAyB,CAAC;AAwsCpD,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,qBA4CpD;yBA5Ce,YAAY"}
|
|
@@ -42,7 +42,7 @@ import { Heading } from "../Heading/index.js";
|
|
|
42
42
|
import { Icon } from "../Icon/index.js";
|
|
43
43
|
import { renderDropdownItems } from "./renderDropdownItems.js";
|
|
44
44
|
import { MENU_ITEM_ROLES, MENU_ITEM_SELECTOR, MENU_BOUNDARY_SELECTOR, activateMenuItem } from "./menuItemRoles.js";
|
|
45
|
-
import { DropdownMenuContext } from "./DropdownMenuContext.js";
|
|
45
|
+
import { DropdownMenuContext, DropdownMenuRootOpenContext } from "./DropdownMenuContext.js";
|
|
46
46
|
import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js";
|
|
47
47
|
import { useListFocus } from "../hooks/useListFocus.js";
|
|
48
48
|
import { useMenuPress } from "../hooks/useMenuPress.js";
|
|
@@ -172,7 +172,7 @@ const styles = {
|
|
|
172
172
|
kI3sdo: "x1a2a7pz",
|
|
173
173
|
k7VYTy: "xpdipgo",
|
|
174
174
|
kfSwDN: "x87ps6o",
|
|
175
|
-
ks0D6T: "
|
|
175
|
+
ks0D6T: "xc0b1yq",
|
|
176
176
|
kskxy: "x1uh1i8a",
|
|
177
177
|
"--_dropdown-menu-radius": "x1fcsqxe",
|
|
178
178
|
"--_dropdown-menu-padding": "xgory14",
|
|
@@ -693,6 +693,43 @@ function DropdownMenuPopover({
|
|
|
693
693
|
// above it ends the gesture in flight through this ref.
|
|
694
694
|
const cancelMenuPressRef = useRef(() => {});
|
|
695
695
|
|
|
696
|
+
// Submenu flyouts are `popover="manual"` elements nested inside the menu's
|
|
697
|
+
// `popover="auto"` element, so the browser's light dismiss of the menu never
|
|
698
|
+
// reaches them: without a sweep they keep their open state and their
|
|
699
|
+
// top-layer entry while the menu is hidden, and re-anchor to the viewport
|
|
700
|
+
// corner when the menu reopens (#6893). Closing them through the popover
|
|
701
|
+
// API lets useLayer's toggle handling reset their state. Only flyouts that
|
|
702
|
+
// are actually open are touched: `:popover-open` ships wherever
|
|
703
|
+
// `hidePopover` does (they are one API), and the display fallback keeps its
|
|
704
|
+
// own open signal (`display: block`) so it is guarded the same way.
|
|
705
|
+
const hideOpenFlyouts = useCallback(() => {
|
|
706
|
+
const menuPopover = contentRef.current;
|
|
707
|
+
if (!menuPopover) {
|
|
708
|
+
return;
|
|
709
|
+
}
|
|
710
|
+
// Innermost first: hiding a flyout may unmount the flyouts nested inside
|
|
711
|
+
// it, and a detached element no longer has the toggle listener that
|
|
712
|
+
// resets its open state.
|
|
713
|
+
const flyouts = [...menuPopover.querySelectorAll('[popover]')].reverse();
|
|
714
|
+
for (const flyout of flyouts) {
|
|
715
|
+
if (typeof flyout.hidePopover === 'function') {
|
|
716
|
+
if (flyout.matches(':popover-open')) {
|
|
717
|
+
flyout.hidePopover();
|
|
718
|
+
}
|
|
719
|
+
} else if (flyout.style.display === 'block') {
|
|
720
|
+
flyout.style.display = 'none';
|
|
721
|
+
const toggle = new Event('toggle', {
|
|
722
|
+
bubbles: false
|
|
723
|
+
});
|
|
724
|
+
Object.defineProperty(toggle, 'newState', {
|
|
725
|
+
value: 'closed',
|
|
726
|
+
configurable: true
|
|
727
|
+
});
|
|
728
|
+
flyout.dispatchEvent(toggle);
|
|
729
|
+
}
|
|
730
|
+
}
|
|
731
|
+
}, []);
|
|
732
|
+
|
|
696
733
|
// Focus lands somewhere stated when the menu closes. A press outside that
|
|
697
734
|
// landed on a focusable control has already moved focus there; leave it.
|
|
698
735
|
// Otherwise — a row acted, Escape, a press on nothing — focus returns to
|
|
@@ -700,6 +737,9 @@ function DropdownMenuPopover({
|
|
|
700
737
|
// keyboard (the modality tracker decides; the suppressed style hides the
|
|
701
738
|
// pointer case, which Safari would otherwise paint after a touch pick).
|
|
702
739
|
const handleLayerHide = useCallback(() => {
|
|
740
|
+
// Whatever closed the menu — light dismiss, the dismissal stack, Escape
|
|
741
|
+
// or a controlled close — its flyouts close with it.
|
|
742
|
+
hideOpenFlyouts();
|
|
703
743
|
if (suppressControlledRollbackHideRef.current) {
|
|
704
744
|
suppressControlledRollbackHideRef.current = false;
|
|
705
745
|
return;
|
|
@@ -728,7 +768,7 @@ function DropdownMenuPopover({
|
|
|
728
768
|
focusForLastInput(trigger, {
|
|
729
769
|
preventScroll: true
|
|
730
770
|
});
|
|
731
|
-
}, [isControlled, onOpenChange, prepareFocusReturn]);
|
|
771
|
+
}, [hideOpenFlyouts, isControlled, onOpenChange, prepareFocusReturn]);
|
|
732
772
|
|
|
733
773
|
// Defer item focus until the layer has committed open, so focus restore
|
|
734
774
|
// captures the trigger instead of the first menu item.
|
|
@@ -1260,7 +1300,10 @@ function DropdownMenuPopover({
|
|
|
1260
1300
|
value: hasRegions,
|
|
1261
1301
|
children: /*#__PURE__*/_jsx(DropdownMenuContext, {
|
|
1262
1302
|
value: contextValue,
|
|
1263
|
-
children:
|
|
1303
|
+
children: /*#__PURE__*/_jsx(DropdownMenuRootOpenContext, {
|
|
1304
|
+
value: isOpen,
|
|
1305
|
+
children: menuContent
|
|
1306
|
+
})
|
|
1264
1307
|
})
|
|
1265
1308
|
})
|
|
1266
1309
|
})), {
|
|
@@ -43,6 +43,23 @@ export interface DropdownMenuContextValue {
|
|
|
43
43
|
*/
|
|
44
44
|
menuLabel?: string;
|
|
45
45
|
}
|
|
46
|
+
/**
|
|
47
|
+
* Whether the root menu of this layer tree is open; internal companion to
|
|
48
|
+
* `DropdownMenuContext`, on its own unexported context so the public
|
|
49
|
+
* `DropdownMenuContextValue` surface stays unchanged. A sub-menu's hover
|
|
50
|
+
* intent must die with the menu: a hover-open scheduled on its trigger
|
|
51
|
+
* before the menu closed from elsewhere would otherwise fire into the
|
|
52
|
+
* hidden menu and reopen the flyout behind it (#6893). `null` means no
|
|
53
|
+
* signal, treated as open, matching providers that have no state to give.
|
|
54
|
+
* @internal
|
|
55
|
+
*/
|
|
56
|
+
export declare const DropdownMenuRootOpenContext: import("react").Context<boolean | null>;
|
|
57
|
+
/**
|
|
58
|
+
* Whether the root menu backing these compound items is open. True when no
|
|
59
|
+
* provider gave a signal.
|
|
60
|
+
* @internal
|
|
61
|
+
*/
|
|
62
|
+
export declare function useDropdownMenuRootOpen(): boolean;
|
|
46
63
|
export declare const DropdownMenuContext: import("react").Context<DropdownMenuContextValue | null>;
|
|
47
64
|
/**
|
|
48
65
|
* Hook for compound menu items to access menu state.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownMenuContext.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuContext.tsx"],"names":[],"mappings":"AAmBA,uDAAuD;AACvD,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAElD;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,mBAAmB;IAClC;;;;;OAKG;IACH,cAAc,EAAE,OAAO,CAAC;IACxB,4EAA4E;IAC5E,SAAS,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IACjC,wEAAwE;IACxE,IAAI,EAAE,WAAW,GAAG,IAAI,CAAC;IACzB,2DAA2D;IAC3D,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,kDAAkD;IAClD,GAAG,EAAE,MAAM,IAAI,CAAC;CACjB;AAED,MAAM,WAAW,wBAAwB;IACvC,uEAAuE;IACvE,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,yCAAyC;IACzC,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,sEAAsE;IACtE,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,mBAAmB,0DACiC,CAAC;AAGlE;;;GAGG;AACH,wBAAgB,sBAAsB,IAAI,wBAAwB,GAAG,IAAI,CAExE;AAMD,MAAM,WAAW,kCAAkC;IACjD,iDAAiD;IACjD,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,uEAAuE;IACvE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,qEAAqE;IACrE,gBAAgB,EAAE,OAAO,CAAC;CAC3B;AAED,eAAO,MAAM,6BAA6B,oEACsB,CAAC;AAGjE;;;GAGG;AACH,wBAAgB,gCAAgC,IAAI,kCAAkC,GAAG,IAAI,CAE5F"}
|
|
1
|
+
{"version":3,"file":"DropdownMenuContext.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuContext.tsx"],"names":[],"mappings":"AAmBA,uDAAuD;AACvD,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAElD;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,mBAAmB;IAClC;;;;;OAKG;IACH,cAAc,EAAE,OAAO,CAAC;IACxB,4EAA4E;IAC5E,SAAS,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IACjC,wEAAwE;IACxE,IAAI,EAAE,WAAW,GAAG,IAAI,CAAC;IACzB,2DAA2D;IAC3D,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,kDAAkD;IAClD,GAAG,EAAE,MAAM,IAAI,CAAC;CACjB;AAED,MAAM,WAAW,wBAAwB;IACvC,uEAAuE;IACvE,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,yCAAyC;IACzC,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,sEAAsE;IACtE,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,2BAA2B,yCAEjC,CAAC;AAGR;;;;GAIG;AACH,wBAAgB,uBAAuB,IAAI,OAAO,CAEjD;AAED,eAAO,MAAM,mBAAmB,0DACiC,CAAC;AAGlE;;;GAGG;AACH,wBAAgB,sBAAsB,IAAI,wBAAwB,GAAG,IAAI,CAExE;AAMD,MAAM,WAAW,kCAAkC;IACjD,iDAAiD;IACjD,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,uEAAuE;IACvE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,qEAAqE;IACrE,gBAAgB,EAAE,OAAO,CAAC;CAC3B;AAED,eAAO,MAAM,6BAA6B,oEACsB,CAAC;AAGjE;;;GAGG;AACH,wBAAgB,gCAAgC,IAAI,kCAAkC,GAAG,IAAI,CAE5F"}
|
|
@@ -32,6 +32,27 @@ import { createLayerScopedContext } from "../Layer/layerScopedContext.js";
|
|
|
32
32
|
* @internal
|
|
33
33
|
*/
|
|
34
34
|
|
|
35
|
+
/**
|
|
36
|
+
* Whether the root menu of this layer tree is open; internal companion to
|
|
37
|
+
* `DropdownMenuContext`, on its own unexported context so the public
|
|
38
|
+
* `DropdownMenuContextValue` surface stays unchanged. A sub-menu's hover
|
|
39
|
+
* intent must die with the menu: a hover-open scheduled on its trigger
|
|
40
|
+
* before the menu closed from elsewhere would otherwise fire into the
|
|
41
|
+
* hidden menu and reopen the flyout behind it (#6893). `null` means no
|
|
42
|
+
* signal, treated as open, matching providers that have no state to give.
|
|
43
|
+
* @internal
|
|
44
|
+
*/
|
|
45
|
+
export const DropdownMenuRootOpenContext = createLayerScopedContext(null);
|
|
46
|
+
DropdownMenuRootOpenContext.displayName = 'DropdownMenuRootOpenContext';
|
|
47
|
+
|
|
48
|
+
/**
|
|
49
|
+
* Whether the root menu backing these compound items is open. True when no
|
|
50
|
+
* provider gave a signal.
|
|
51
|
+
* @internal
|
|
52
|
+
*/
|
|
53
|
+
export function useDropdownMenuRootOpen() {
|
|
54
|
+
return use(DropdownMenuRootOpenContext) !== false;
|
|
55
|
+
}
|
|
35
56
|
export const DropdownMenuContext = createLayerScopedContext(null);
|
|
36
57
|
DropdownMenuContext.displayName = 'DropdownMenuContext';
|
|
37
58
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { BaseProps } from '../BaseProps';
|
|
2
|
-
export interface DropdownMenuDividerProps extends
|
|
2
|
+
export interface DropdownMenuDividerProps extends Omit<BaseProps<HTMLDivElement>, 'role' | 'aria-orientation'> {
|
|
3
3
|
/** Ref forwarded to the separator element. */
|
|
4
4
|
ref?: React.Ref<HTMLDivElement>;
|
|
5
5
|
}
|
|
@@ -7,7 +7,9 @@ export interface DropdownMenuDividerProps extends Pick<BaseProps, 'xstyle' | 'cl
|
|
|
7
7
|
* A horizontal rule separating groups of menu rows.
|
|
8
8
|
*
|
|
9
9
|
* Renders `role="separator"`, so it is never a stop in the menu's arrow-key
|
|
10
|
-
* order. Equivalent to `{type: 'divider'}` in the `items` data API.
|
|
10
|
+
* order. Equivalent to `{type: 'divider'}` in the `items` data API. Host
|
|
11
|
+
* attributes (`id`, `data-*`, `aria-*`) and DOM handlers reach the separator;
|
|
12
|
+
* its role and orientation stay component-owned.
|
|
11
13
|
*
|
|
12
14
|
* @example
|
|
13
15
|
* ```
|
|
@@ -18,7 +20,7 @@ export interface DropdownMenuDividerProps extends Pick<BaseProps, 'xstyle' | 'cl
|
|
|
18
20
|
* </DropdownMenu>
|
|
19
21
|
* ```
|
|
20
22
|
*/
|
|
21
|
-
export declare function DropdownMenuDivider({ xstyle, className, style, ref, }: DropdownMenuDividerProps): import("react").JSX.Element;
|
|
23
|
+
export declare function DropdownMenuDivider({ xstyle, className, style, ref, ...rest }: DropdownMenuDividerProps): import("react").JSX.Element;
|
|
22
24
|
export declare namespace DropdownMenuDivider {
|
|
23
25
|
var displayName: string;
|
|
24
26
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownMenuDivider.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuDivider.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAW5C,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CACpD,SAAS,
|
|
1
|
+
{"version":3,"file":"DropdownMenuDivider.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuDivider.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAW5C,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CACpD,SAAS,CAAC,cAAc,CAAC,EACzB,MAAM,GAAG,kBAAkB,CAC5B;IACC,8CAA8C;IAC9C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACjC;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,wBAAwB,+BAY1B;yBAlBe,mBAAmB"}
|