@astryxdesign/core 0.7.1-canary.ff40b78 → 0.7.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +116 -0
- package/dist/Button/Button.d.ts +1 -1
- package/dist/Button/Button.d.ts.map +1 -1
- package/dist/Button/Button.js +5 -2
- package/dist/Calendar/Calendar.d.ts.map +1 -1
- package/dist/Calendar/Calendar.js +191 -32
- package/dist/Chat/ChatComposerInput.d.ts +9 -0
- package/dist/Chat/ChatComposerInput.d.ts.map +1 -1
- package/dist/Chat/ChatComposerInput.js +5 -0
- package/dist/Chat/ChatMessage.d.ts +11 -0
- package/dist/Chat/ChatMessage.d.ts.map +1 -1
- package/dist/Chat/ChatMessage.js +18 -9
- package/dist/Chat/useTriggerMenu.d.ts +9 -2
- package/dist/Chat/useTriggerMenu.d.ts.map +1 -1
- package/dist/Chat/useTriggerMenu.js +222 -50
- package/dist/CodeBlock/CodeBlock.d.ts +10 -1
- package/dist/CodeBlock/CodeBlock.d.ts.map +1 -1
- package/dist/CodeBlock/CodeBlock.js +158 -38
- package/dist/CodeBlock/tokenizer.d.ts +39 -0
- package/dist/CodeBlock/tokenizer.d.ts.map +1 -1
- package/dist/CodeBlock/tokenizer.js +108 -0
- package/dist/CommandPalette/CommandPalette.d.ts +9 -5
- package/dist/CommandPalette/CommandPalette.d.ts.map +1 -1
- package/dist/CommandPalette/CommandPalette.js +38 -20
- package/dist/CommandPalette/CommandPaletteEmpty.d.ts +4 -3
- package/dist/CommandPalette/CommandPaletteEmpty.d.ts.map +1 -1
- package/dist/CommandPalette/CommandPaletteEmpty.js +4 -3
- package/dist/CommandPalette/CommandPaletteInput.d.ts +5 -4
- package/dist/CommandPalette/CommandPaletteInput.d.ts.map +1 -1
- package/dist/CommandPalette/CommandPaletteInput.js +35 -18
- package/dist/CommandPalette/CommandPaletteItem.d.ts +11 -6
- package/dist/CommandPalette/CommandPaletteItem.d.ts.map +1 -1
- package/dist/CommandPalette/CommandPaletteItem.js +8 -9
- package/dist/CommandPalette/CommandPaletteList.d.ts +4 -2
- package/dist/CommandPalette/CommandPaletteList.d.ts.map +1 -1
- package/dist/CommandPalette/CommandPaletteList.js +10 -5
- package/dist/ComplexSelector/ComplexSelector.d.ts +8 -5
- package/dist/ComplexSelector/ComplexSelector.d.ts.map +1 -1
- package/dist/ComplexSelector/ComplexSelector.js +12 -3
- package/dist/ContextMenu/ContextMenu.d.ts +3 -3
- package/dist/ContextMenu/ContextMenu.d.ts.map +1 -1
- package/dist/ContextMenu/ContextMenu.js +62 -48
- package/dist/DateInput/DateInput.js +1 -1
- package/dist/DateInput/MonthScroller.d.ts.map +1 -1
- package/dist/DateInput/MonthScroller.js +12 -4
- package/dist/DateRangeInput/DateRangeInput.d.ts.map +1 -1
- package/dist/DateRangeInput/DateRangeInput.js +12 -2
- package/dist/Dialog/Dialog.d.ts +1 -1
- package/dist/Dialog/Dialog.d.ts.map +1 -1
- package/dist/Dialog/Dialog.js +16 -5
- package/dist/Dialog/DialogHeader.d.ts +1 -1
- package/dist/Dialog/DialogHeader.d.ts.map +1 -1
- package/dist/Dialog/DialogHeader.js +7 -7
- package/dist/Divider/Divider.d.ts +1 -0
- package/dist/Divider/Divider.d.ts.map +1 -1
- package/dist/Divider/Divider.js +5 -4
- package/dist/DropdownMenu/DropdownMenu.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenu.js +161 -65
- package/dist/DropdownMenu/DropdownMenuCheckboxItem.d.ts +7 -5
- package/dist/DropdownMenu/DropdownMenuCheckboxItem.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenuCheckboxItem.js +12 -5
- package/dist/Field/InputClearButton.d.ts +8 -4
- package/dist/Field/InputClearButton.d.ts.map +1 -1
- package/dist/Field/InputClearButton.js +23 -7
- package/dist/FormLayout/FormLayout.d.ts.map +1 -1
- package/dist/FormLayout/FormLayout.js +1 -0
- package/dist/Grid/Grid.d.ts +13 -4
- package/dist/Grid/Grid.d.ts.map +1 -1
- package/dist/Grid/Grid.js +7 -1
- package/dist/HoverCard/useHoverCard.d.ts +1 -1
- package/dist/HoverCard/useHoverCard.d.ts.map +1 -1
- package/dist/HoverCard/useHoverCard.js +67 -49
- package/dist/InputGroup/InputGroup.d.ts +2 -4
- package/dist/InputGroup/InputGroup.d.ts.map +1 -1
- package/dist/InputGroup/InputGroup.js +2 -4
- package/dist/InputGroup/groupStyles.d.ts +10 -2
- package/dist/InputGroup/groupStyles.d.ts.map +1 -1
- package/dist/InputGroup/groupStyles.js +19 -2
- package/dist/Layer/useLayerDismissal.d.ts +9 -9
- package/dist/Layer/useLayerDismissal.js +9 -9
- package/dist/Markdown/Markdown.d.ts.map +1 -1
- package/dist/Markdown/Markdown.js +25 -4
- package/dist/MobileNav/MobileNav.d.ts +7 -0
- package/dist/MobileNav/MobileNav.d.ts.map +1 -1
- package/dist/MobileNav/MobileNav.js +45 -2
- package/dist/MultiSelector/MultiSelector.d.ts +7 -4
- package/dist/MultiSelector/MultiSelector.d.ts.map +1 -1
- package/dist/MultiSelector/MultiSelector.js +24 -3
- package/dist/NumberInput/NumberInput.js +1 -1
- package/dist/PowerSearch/PowerSearchEditPopover.d.ts.map +1 -1
- package/dist/PowerSearch/PowerSearchEditPopover.js +6 -0
- package/dist/Resizable/ResizeHandle.d.ts +1 -1
- package/dist/Resizable/ResizeHandle.d.ts.map +1 -1
- package/dist/Resizable/ResizeHandle.js +83 -15
- package/dist/Resizable/useResizable.d.ts +23 -0
- package/dist/Resizable/useResizable.d.ts.map +1 -1
- package/dist/Resizable/useResizable.js +78 -0
- package/dist/Selector/Selector.d.ts +6 -3
- package/dist/Selector/Selector.d.ts.map +1 -1
- package/dist/Selector/Selector.js +28 -6
- package/dist/SideNav/SideNav.d.ts.map +1 -1
- package/dist/SideNav/SideNav.js +10 -2
- package/dist/Slider/Slider.d.ts.map +1 -1
- package/dist/Slider/Slider.js +18 -7
- package/dist/Tokenizer/Tokenizer.d.ts.map +1 -1
- package/dist/Tokenizer/Tokenizer.js +16 -4
- package/dist/Toolbar/Toolbar.d.ts +2 -1
- package/dist/Toolbar/Toolbar.d.ts.map +1 -1
- package/dist/Toolbar/Toolbar.js +3 -1
- package/dist/TreeList/TreeList.d.ts.map +1 -1
- package/dist/TreeList/TreeList.js +6 -3
- package/dist/TreeList/TreeListItem.d.ts.map +1 -1
- package/dist/TreeList/TreeListItem.js +7 -1
- package/dist/astryx.css +22 -0
- package/dist/hooks/useScrollOverflow.d.ts.map +1 -1
- package/dist/hooks/useScrollOverflow.js +55 -12
- package/dist/hooks/useTreeFocus.d.ts +21 -0
- package/dist/hooks/useTreeFocus.d.ts.map +1 -1
- package/dist/hooks/useTreeFocus.js +40 -2
- package/dist/i18n/generated-locales/en.generated.d.ts.map +1 -1
- package/dist/i18n/generated-locales/en.generated.js +3 -0
- package/dist/i18n/generated-locales/pseudo.generated.d.ts.map +1 -1
- package/dist/i18n/generated-locales/pseudo.generated.js +3 -0
- package/dist/reset.a11y.chromium.spec.js +6 -1
- package/dist/reset.until-found.a11y.browser.spec.d.ts +2 -0
- package/dist/reset.until-found.a11y.browser.spec.d.ts.map +1 -0
- package/dist/reset.until-found.a11y.browser.spec.js +71 -0
- package/dist/theme/syntax/SyntaxTheme.d.ts.map +1 -1
- package/dist/theme/syntax/SyntaxTheme.js +43 -2
- package/dist/theme/syntax/defineSyntaxTheme.d.ts +18 -5
- package/dist/theme/syntax/defineSyntaxTheme.d.ts.map +1 -1
- package/dist/theme/syntax/defineSyntaxTheme.js +38 -9
- package/dist/theme/syntax/index.d.ts +1 -1
- package/dist/theme/syntax/index.d.ts.map +1 -1
- package/dist/theme/syntax/tokens.d.ts +12 -2
- package/dist/theme/syntax/tokens.d.ts.map +1 -1
- package/dist/theme/syntax/tokens.js +25 -4
- package/dist/utils/plainDate.d.ts +12 -0
- package/dist/utils/plainDate.d.ts.map +1 -1
- package/dist/utils/plainDate.js +63 -10
- package/locales/en.json +13 -1
- package/locales/pseudo.json +9 -0
- package/package.json +4 -4
- package/src/AlertDialog/AlertDialog.doc.mjs +6 -0
- package/src/AlertDialog/AlertDialog.spec.md +205 -0
- package/src/AlertDialog/AlertDialog.test.tsx +3 -14
- package/src/AlertDialog/__tests__/AlertDialog.a11y.chromium.spec.ts +115 -0
- package/src/AlertDialog/__tests__/AlertDialog.a11y.renders.tsx +52 -0
- package/src/AlertDialog/__tests__/AlertDialog.a11y.states.ts +68 -0
- package/src/AlertDialog/__tests__/AlertDialog.a11y.test.tsx +144 -0
- package/src/Button/Button.test.tsx +37 -0
- package/src/Button/Button.tsx +5 -1
- package/src/Calendar/Calendar.doc.mjs +234 -60
- package/src/Calendar/Calendar.spec.md +209 -0
- package/src/Calendar/Calendar.test.tsx +559 -20
- package/src/Calendar/Calendar.tsx +258 -41
- package/src/Calendar/__tests__/Calendar.a11y.chromium.spec.ts +126 -0
- package/src/Calendar/__tests__/Calendar.a11y.known-failures.ts +12 -0
- package/src/Calendar/__tests__/Calendar.a11y.renders.tsx +57 -0
- package/src/Calendar/__tests__/Calendar.a11y.states.ts +139 -0
- package/src/Calendar/__tests__/Calendar.a11y.test.tsx +137 -0
- package/src/Carousel/Carousel.test.tsx +54 -71
- package/src/Carousel/__tests__/Carousel.a11y.chromium.spec.ts +192 -0
- package/src/Carousel/__tests__/Carousel.a11y.known-failures.ts +27 -0
- package/src/Carousel/__tests__/Carousel.a11y.renders.tsx +39 -0
- package/src/Carousel/__tests__/Carousel.a11y.states.ts +139 -0
- package/src/Carousel/__tests__/Carousel.a11y.test.tsx +127 -0
- package/src/Chat/ChatComposerInput.doc.mjs +1 -1
- package/src/Chat/ChatComposerInput.spec.md +94 -55
- package/src/Chat/ChatComposerInput.test.tsx +202 -1
- package/src/Chat/ChatComposerInput.tsx +13 -0
- package/src/Chat/ChatMessage.doc.mjs +31 -16
- package/src/Chat/ChatMessage.spec.md +265 -0
- package/src/Chat/ChatMessage.test.tsx +246 -0
- package/src/Chat/ChatMessage.tsx +30 -7
- package/src/Chat/ChatSystemMessage.spec.md +36 -37
- package/src/Chat/ChatSystemMessage.test.tsx +4 -4
- package/src/Chat/useTriggerMenu.test.tsx +994 -0
- package/src/Chat/useTriggerMenu.tsx +278 -46
- package/src/CodeBlock/CodeBlock.doc.mjs +7 -0
- package/src/CodeBlock/CodeBlock.spec.md +40 -41
- package/src/CodeBlock/CodeBlock.test.tsx +89 -9
- package/src/CodeBlock/CodeBlock.tsx +205 -25
- package/src/CodeBlock/__tests__/CodeBlockOverflowStop.a11y.chromium.spec.ts +125 -0
- package/src/CodeBlock/__tests__/DiffRowPaint.a11y.chromium.spec.ts +93 -0
- package/src/CodeBlock/tokenizer.test.ts +112 -0
- package/src/CodeBlock/tokenizer.ts +106 -0
- package/src/Collapsible/CollapsibleGroup.spec.md +17 -8
- package/src/Collapsible/__tests__/CollapsibleGroup.a11y.renders.tsx +45 -0
- package/src/Collapsible/__tests__/CollapsibleGroup.a11y.states.ts +139 -0
- package/src/Collapsible/__tests__/CollapsibleGroup.a11y.test.tsx +135 -0
- package/src/Collapsible/__tests__/CollapsibleGroupAccordion.a11y.chromium.spec.ts +128 -0
- package/src/CommandPalette/CommandPalette.doc.mjs +126 -23
- package/src/CommandPalette/CommandPalette.spec.md +100 -49
- package/src/CommandPalette/CommandPalette.test.tsx +241 -2
- package/src/CommandPalette/CommandPalette.tsx +47 -21
- package/src/CommandPalette/CommandPaletteEmpty.tsx +4 -3
- package/src/CommandPalette/CommandPaletteInput.doc.mjs +61 -4
- package/src/CommandPalette/CommandPaletteInput.spec.md +215 -0
- package/src/CommandPalette/CommandPaletteInput.test.tsx +375 -51
- package/src/CommandPalette/CommandPaletteInput.tsx +74 -21
- package/src/CommandPalette/CommandPaletteItem.doc.mjs +73 -22
- package/src/CommandPalette/CommandPaletteItem.spec.md +223 -0
- package/src/CommandPalette/CommandPaletteItem.test.tsx +200 -5
- package/src/CommandPalette/CommandPaletteItem.tsx +16 -11
- package/src/CommandPalette/CommandPaletteList.doc.mjs +3 -3
- package/src/CommandPalette/CommandPaletteList.spec.md +41 -36
- package/src/CommandPalette/CommandPaletteList.test.tsx +80 -0
- package/src/CommandPalette/CommandPaletteList.tsx +10 -5
- package/src/CommandPalette/__tests__/CommandPalette.a11y.chromium.spec.ts +599 -0
- package/src/ComplexSelector/ComplexSelector.doc.mjs +10 -8
- package/src/ComplexSelector/ComplexSelector.spec.md +14 -9
- package/src/ComplexSelector/ComplexSelector.test.tsx +64 -16
- package/src/ComplexSelector/ComplexSelector.tsx +37 -8
- package/src/ContextMenu/ContextMenu.doc.mjs +6 -0
- package/src/ContextMenu/ContextMenu.spec.md +51 -53
- package/src/ContextMenu/ContextMenu.test.tsx +132 -1
- package/src/ContextMenu/ContextMenu.tsx +78 -48
- package/src/DateInput/DateInput.doc.mjs +52 -0
- package/src/DateInput/DateInput.spec.md +27 -15
- package/src/DateInput/DateInput.test.tsx +38 -0
- package/src/DateInput/DateInput.tsx +1 -1
- package/src/DateInput/DateInputTouch.test.tsx +22 -0
- package/src/DateInput/MonthScroller.tsx +12 -4
- package/src/DateRangeInput/DateRangeInput.test.tsx +49 -0
- package/src/DateRangeInput/DateRangeInput.tsx +20 -2
- package/src/Dialog/Dialog.test.tsx +27 -1
- package/src/Dialog/Dialog.tsx +16 -5
- package/src/Dialog/DialogHeader.test.tsx +27 -2
- package/src/Dialog/DialogHeader.tsx +7 -8
- package/src/Dialog/__tests__/Dialog.a11y.chromium.spec.ts +21 -14
- package/src/Divider/Divider.doc.mjs +5 -3
- package/src/Divider/Divider.spec.md +140 -54
- package/src/Divider/Divider.test.tsx +15 -0
- package/src/Divider/Divider.tsx +6 -4
- package/src/DropdownMenu/DropdownMenu.doc.mjs +2 -2
- package/src/DropdownMenu/DropdownMenu.spec.md +121 -45
- package/src/DropdownMenu/DropdownMenu.test.tsx +288 -23
- package/src/DropdownMenu/DropdownMenu.tsx +212 -81
- package/src/DropdownMenu/DropdownMenuCheckboxItem.doc.mjs +38 -2
- package/src/DropdownMenu/DropdownMenuCheckboxItem.tsx +32 -18
- package/src/DropdownMenu/DropdownMenuSelectable.test.tsx +146 -1
- package/src/DropdownMenu/__tests__/MenuButton.a11y.chromium.spec.ts +136 -0
- package/src/DropdownMenu/__tests__/MenuButton.a11y.known-failures.ts +12 -0
- package/src/DropdownMenu/__tests__/MenuButton.a11y.renders.tsx +67 -0
- package/src/DropdownMenu/__tests__/MenuButton.a11y.states.ts +141 -0
- package/src/DropdownMenu/__tests__/MenuButton.a11y.test.tsx +138 -0
- package/src/DropdownMenu/__tests__/MenuHeaderFooter.a11y.chromium.spec.ts +40 -5
- package/src/Field/InputClearButton.test.tsx +29 -4
- package/src/Field/InputClearButton.tsx +26 -8
- package/src/FieldStatus/__tests__/StatusMessage.a11y.chromium.spec.ts +21 -14
- package/src/FormLayout/FormLayout.tsx +1 -0
- package/src/FormLayout/__snapshots__/FormLayout.test.tsx.snap +1 -1
- package/src/Grid/Grid.doc.mjs +14 -11
- package/src/Grid/Grid.spec.md +50 -32
- package/src/Grid/Grid.tsx +13 -4
- package/src/HoverCard/HoverCard.test.tsx +46 -1
- package/src/HoverCard/useHoverCard.tsx +68 -48
- package/src/InputGroup/InputGroup.doc.mjs +11 -1
- package/src/InputGroup/InputGroup.tsx +2 -4
- package/src/InputGroup/groupStyles.ts +40 -2
- package/src/Layer/useLayerDismissal.ts +9 -9
- package/src/Link/__tests__/Link.a11y.chromium.spec.ts +142 -0
- package/src/Link/__tests__/Link.a11y.renders.tsx +97 -0
- package/src/Link/__tests__/Link.a11y.states.ts +104 -0
- package/src/Link/__tests__/Link.a11y.test.tsx +127 -0
- package/src/Markdown/Markdown.doc.mjs +1 -1
- package/src/Markdown/Markdown.fr23.perf.test.ts +161 -40
- package/src/Markdown/Markdown.spec.md +45 -23
- package/src/Markdown/Markdown.test.tsx +38 -0
- package/src/Markdown/Markdown.tsx +24 -2
- package/src/Markdown/plugins/semanticFence.test.tsx +3 -2
- package/src/MobileNav/MobileNav.tsx +50 -2
- package/src/MobileNav/MobileNavFocus.test.tsx +553 -0
- package/src/MoreMenu/MoreMenu.spec.md +18 -7
- package/src/MoreMenu/MoreMenu.test.tsx +38 -0
- package/src/MultiSelector/MultiSelector.doc.mjs +8 -8
- package/src/MultiSelector/MultiSelector.spec.md +1 -1
- package/src/MultiSelector/MultiSelector.test.tsx +188 -21
- package/src/MultiSelector/MultiSelector.tsx +50 -11
- package/src/NumberInput/NumberInput.test.tsx +24 -0
- package/src/NumberInput/NumberInput.tsx +1 -1
- package/src/NumberInput/__tests__/NumberInput.a11y.chromium.spec.ts +22 -15
- package/src/PowerSearch/PowerSearchEditPopover.test.tsx +78 -0
- package/src/PowerSearch/PowerSearchEditPopover.tsx +6 -0
- package/src/Resizable/Resizable.spec.md +41 -9
- package/src/Resizable/ResizeHandle.test.tsx +565 -2
- package/src/Resizable/ResizeHandle.tsx +126 -21
- package/src/Resizable/__tests__/ResizeHandle.a11y.chromium.spec.ts +119 -0
- package/src/Resizable/__tests__/ResizeHandle.a11y.known-failures.ts +39 -0
- package/src/Resizable/__tests__/ResizeHandle.a11y.renders.tsx +80 -0
- package/src/Resizable/__tests__/ResizeHandle.a11y.states.ts +197 -0
- package/src/Resizable/__tests__/ResizeHandle.a11y.test.tsx +123 -0
- package/src/Resizable/useResizable.ts +95 -0
- package/src/Selector/Selector.doc.mjs +7 -6
- package/src/Selector/Selector.spec.md +37 -24
- package/src/Selector/Selector.test.tsx +176 -10
- package/src/Selector/Selector.tsx +59 -14
- package/src/Selector/__tests__/Combobox.a11y.known-failures.ts +27 -0
- package/src/Selector/__tests__/Combobox.a11y.states.ts +145 -0
- package/src/Selector/__tests__/Selector.combobox.a11y.chromium.spec.ts +108 -0
- package/src/Selector/__tests__/Selector.combobox.a11y.test.tsx +126 -0
- package/src/SideNav/SideNav.test.tsx +35 -0
- package/src/SideNav/SideNav.tsx +16 -2
- package/src/Slider/Slider.spec.md +43 -17
- package/src/Slider/Slider.test.tsx +134 -0
- package/src/Slider/Slider.tsx +29 -6
- package/src/Slider/__tests__/Slider.a11y.chromium.spec.ts +112 -0
- package/src/Slider/__tests__/Slider.a11y.known-failures.ts +12 -0
- package/src/Slider/__tests__/Slider.a11y.renders.tsx +42 -0
- package/src/Slider/__tests__/Slider.a11y.states.ts +106 -0
- package/src/Slider/__tests__/Slider.a11y.test.tsx +105 -0
- package/src/Switch/__tests__/Switch.a11y.chromium.spec.ts +25 -18
- package/src/TabList/__tests__/Tabs.a11y.chromium.spec.ts +19 -12
- package/src/TextInput/__tests__/TextInput.a11y.chromium.spec.ts +21 -14
- package/src/ToggleButton/__tests__/ToggleButton.a11y.chromium.spec.ts +18 -11
- package/src/Tokenizer/Tokenizer.test.tsx +87 -0
- package/src/Tokenizer/Tokenizer.tsx +31 -3
- package/src/Toolbar/Toolbar.test.tsx +131 -4
- package/src/Toolbar/Toolbar.tsx +3 -1
- package/src/TreeList/TreeList.spec.md +33 -8
- package/src/TreeList/TreeList.test.tsx +72 -0
- package/src/TreeList/TreeList.tsx +10 -6
- package/src/TreeList/TreeListItem.tsx +5 -0
- package/src/TreeList/__tests__/TreeList.a11y.chromium.spec.ts +125 -0
- package/src/TreeList/__tests__/TreeList.a11y.renders.tsx +44 -0
- package/src/TreeList/__tests__/TreeList.a11y.states.ts +164 -0
- package/src/TreeList/__tests__/TreeList.a11y.test.tsx +138 -0
- package/src/TreeList/__tests__/TreeListRowNames.a11y.chromium.spec.ts +82 -0
- package/src/hooks/useScrollOverflow.test.tsx +222 -0
- package/src/hooks/useScrollOverflow.ts +55 -13
- package/src/hooks/useTreeFocus.test.tsx +37 -0
- package/src/hooks/useTreeFocus.ts +55 -2
- package/src/i18n/generated-locales/en.generated.ts +3 -0
- package/src/i18n/generated-locales/pseudo.generated.ts +3 -0
- package/src/reset.a11y.chromium.spec.ts +9 -1
- package/src/reset.css +8 -3
- package/src/reset.until-found.a11y.browser.spec.ts +75 -0
- package/src/reset.until-found.test.ts +32 -0
- package/src/stylexValidation.source-build.test.mjs +42 -0
- package/src/theme/syntax/SyntaxTheme.tsx +46 -5
- package/src/theme/syntax/defineSyntaxTheme.diff.test.ts +91 -0
- package/src/theme/syntax/defineSyntaxTheme.ts +75 -15
- package/src/theme/syntax/index.ts +5 -1
- package/src/theme/syntax/tokens.ts +32 -2
- package/src/theme/syntax/useSyntaxTheme.diff.test.tsx +40 -0
- package/src/utils/plainDate.test.ts +147 -0
- package/src/utils/plainDate.ts +75 -10
|
@@ -3,8 +3,8 @@
|
|
|
3
3
|
|
|
4
4
|
/**
|
|
5
5
|
* @file ContextMenu.tsx
|
|
6
|
-
* @input Uses React, StyleX, useLayer,
|
|
7
|
-
* shared menu-presentation resolver
|
|
6
|
+
* @input Uses React, StyleX, useLayer, shared layer dismissal, BottomSheet,
|
|
7
|
+
* useListFocus, and the shared menu-presentation resolver
|
|
8
8
|
* @output Exports ContextMenu with cursor-popover and touch-sheet presentations
|
|
9
9
|
* @position Core implementation; consumed by index.ts
|
|
10
10
|
*
|
|
@@ -39,6 +39,8 @@ import { Button } from "../Button/index.js";
|
|
|
39
39
|
import { Heading } from "../Heading/index.js";
|
|
40
40
|
import { Icon } from "../Icon/index.js";
|
|
41
41
|
import { useLayer } from "../Layer/useLayer.js";
|
|
42
|
+
import { LayerDepthProvider } from "../Layer/LayerDepthContext.js";
|
|
43
|
+
import { useLayerDismissal } from "../Layer/useLayerDismissal.js";
|
|
42
44
|
import { MenuBottomSheetActionList } from "../DropdownMenu/MenuBottomSheetActionList.js";
|
|
43
45
|
import { renderDropdownItems } from "../DropdownMenu/renderDropdownItems.js";
|
|
44
46
|
import { DropdownMenuContext } from "../DropdownMenu/DropdownMenuContext.js";
|
|
@@ -52,7 +54,7 @@ import { useLongPress } from "../hooks/useLongPress.js";
|
|
|
52
54
|
import { layerAnimations } from "../Layer/layerAnimations.stylex.js";
|
|
53
55
|
import "../theme/tokens.stylex.js";
|
|
54
56
|
import { colorVars, spacingVars, radiusVars, durationVars, easeVars, shadowVars } from "../theme/tokens.stylex.js";
|
|
55
|
-
import { mergeProps,
|
|
57
|
+
import { mergeProps, rtlStyles } from "../utils/index.js";
|
|
56
58
|
import { themeProps } from "../utils/themeProps.js";
|
|
57
59
|
import { useTranslator } from "../i18n/index.js";
|
|
58
60
|
import { useMergedRefs } from "../hooks/useMergedRefs.js";
|
|
@@ -194,6 +196,11 @@ export function ContextMenu({
|
|
|
194
196
|
style,
|
|
195
197
|
xstyle,
|
|
196
198
|
triggerXstyle,
|
|
199
|
+
onContextMenu: onContextMenuProp,
|
|
200
|
+
onTouchStart: onTouchStartProp,
|
|
201
|
+
onTouchMove: onTouchMoveProp,
|
|
202
|
+
onTouchEnd: onTouchEndProp,
|
|
203
|
+
onTouchCancel: onTouchCancelProp,
|
|
197
204
|
'data-testid': testId,
|
|
198
205
|
...rest
|
|
199
206
|
}) {
|
|
@@ -226,7 +233,6 @@ export function ContextMenu({
|
|
|
226
233
|
// Element focused before the menu opened, restored when it closes so focus
|
|
227
234
|
// does not fall to <body> after Escape or outside-click dismissal.
|
|
228
235
|
const triggerFocusRef = useRef(null);
|
|
229
|
-
const sheetHeadingRef = useRef(null);
|
|
230
236
|
const [isOpen, setIsOpen] = useState(false);
|
|
231
237
|
const [submenuPath, setSubmenuPath] = useState([]);
|
|
232
238
|
const currentSubmenu = submenuPath.at(-1);
|
|
@@ -274,16 +280,12 @@ export function ContextMenu({
|
|
|
274
280
|
closeMenu();
|
|
275
281
|
}
|
|
276
282
|
}, [closeMenu]);
|
|
277
|
-
|
|
278
|
-
if (
|
|
279
|
-
|
|
280
|
-
}
|
|
281
|
-
const frame = requestAnimationFrame(() => {
|
|
282
|
-
sheetHeadingRef.current?.focus({
|
|
283
|
+
const setSheetHeadingRef = useCallback(node => {
|
|
284
|
+
if (node && isOpen && submenuPath.length > 0) {
|
|
285
|
+
node.focus({
|
|
283
286
|
preventScroll: true
|
|
284
287
|
});
|
|
285
|
-
}
|
|
286
|
-
return () => cancelAnimationFrame(frame);
|
|
288
|
+
}
|
|
287
289
|
}, [isOpen, submenuPath.length]);
|
|
288
290
|
const {
|
|
289
291
|
listRef,
|
|
@@ -297,8 +299,15 @@ export function ContextMenu({
|
|
|
297
299
|
boundarySelector: MENU_BOUNDARY_SELECTOR,
|
|
298
300
|
// Menus wrap from the last row to the first and back.
|
|
299
301
|
wrap: true,
|
|
300
|
-
hasPaging: true
|
|
301
|
-
|
|
302
|
+
hasPaging: true
|
|
303
|
+
});
|
|
304
|
+
|
|
305
|
+
// Join the shared stack so an Escape press dismisses exactly one top-most
|
|
306
|
+
// surface. BottomSheet owns its own dismissal path.
|
|
307
|
+
useLayerDismissal({
|
|
308
|
+
isActive: isOpen && !usesBottomSheet,
|
|
309
|
+
onDismiss: closeMenu,
|
|
310
|
+
getContainer: () => listRef.current
|
|
302
311
|
});
|
|
303
312
|
|
|
304
313
|
// Typeahead over the enabled menu items, matched on each row's LABEL alone.
|
|
@@ -329,32 +338,6 @@ export function ContextMenu({
|
|
|
329
338
|
document.removeEventListener('mousedown', handleClickOutside);
|
|
330
339
|
};
|
|
331
340
|
}, [isOpen, closeMenu, listRef, usesBottomSheet]);
|
|
332
|
-
|
|
333
|
-
// Dismiss on Escape from anywhere while open. The menu div's own onKeyDown
|
|
334
|
-
// only fires when focus is inside the menu; a document-level listener is
|
|
335
|
-
// kept as a reliable fallback Escape path (e.g. if focus has moved out of
|
|
336
|
-
// the menu). Guards against IME composition-cancel.
|
|
337
|
-
useEffect(() => {
|
|
338
|
-
if (!isOpen || usesBottomSheet) {
|
|
339
|
-
return;
|
|
340
|
-
}
|
|
341
|
-
const handleEscape = e => {
|
|
342
|
-
if (e.key !== 'Escape') {
|
|
343
|
-
return;
|
|
344
|
-
}
|
|
345
|
-
if (isImeKeyEvent(e)) {
|
|
346
|
-
// Ignore Escape that is committing/cancelling an IME composition;
|
|
347
|
-
// see utils/ime.ts for why.
|
|
348
|
-
return;
|
|
349
|
-
}
|
|
350
|
-
e.preventDefault();
|
|
351
|
-
closeMenu();
|
|
352
|
-
};
|
|
353
|
-
document.addEventListener('keydown', handleEscape);
|
|
354
|
-
return () => {
|
|
355
|
-
document.removeEventListener('keydown', handleEscape);
|
|
356
|
-
};
|
|
357
|
-
}, [isOpen, closeMenu, usesBottomSheet]);
|
|
358
341
|
const listKeyDown = useCallback(e => {
|
|
359
342
|
// A submenu flyout renders inline inside this menu; its key events bubble
|
|
360
343
|
// up here. Let that level own them — only handle events from this level.
|
|
@@ -447,13 +430,42 @@ export function ContextMenu({
|
|
|
447
430
|
// held long enough (see useLongPress for timer/move-cancel/cleanup logic).
|
|
448
431
|
// The hook also returns the imperative start/moveTo/cancel API the menu press
|
|
449
432
|
// model drives; only its four touch handlers belong on the trigger element.
|
|
450
|
-
const
|
|
433
|
+
const {
|
|
434
|
+
onTouchStart: handleLongPressTouchStart,
|
|
435
|
+
onTouchMove: handleLongPressTouchMove,
|
|
436
|
+
onTouchEnd: handleLongPressTouchEnd,
|
|
437
|
+
onTouchCancel: handleLongPressTouchCancel
|
|
438
|
+
} = useLongPress({
|
|
451
439
|
disabled: isDisabled,
|
|
452
440
|
onLongPress: useCallback(point => {
|
|
453
441
|
const rect = getAnchorBaseRect();
|
|
454
442
|
openAtLocalPoint(rect ? point.x - rect.left : point.x, rect ? point.y - rect.top : point.y, triggerRef.current);
|
|
455
443
|
}, [openAtLocalPoint, getAnchorBaseRect])
|
|
456
444
|
});
|
|
445
|
+
|
|
446
|
+
// ContextMenu owns invocation and long-press cleanup. Consumer handlers are
|
|
447
|
+
// notified too, but preventing their default does not cancel component-owned
|
|
448
|
+
// behavior that the public API does not promise as cancelable.
|
|
449
|
+
const handleTriggerContextMenu = useCallback(event => {
|
|
450
|
+
handleContextMenu(event);
|
|
451
|
+
onContextMenuProp?.(event);
|
|
452
|
+
}, [handleContextMenu, onContextMenuProp]);
|
|
453
|
+
const handleTriggerTouchStart = useCallback(event => {
|
|
454
|
+
handleLongPressTouchStart(event);
|
|
455
|
+
onTouchStartProp?.(event);
|
|
456
|
+
}, [handleLongPressTouchStart, onTouchStartProp]);
|
|
457
|
+
const handleTriggerTouchMove = useCallback(event => {
|
|
458
|
+
handleLongPressTouchMove(event);
|
|
459
|
+
onTouchMoveProp?.(event);
|
|
460
|
+
}, [handleLongPressTouchMove, onTouchMoveProp]);
|
|
461
|
+
const handleTriggerTouchEnd = useCallback(event => {
|
|
462
|
+
handleLongPressTouchEnd();
|
|
463
|
+
onTouchEndProp?.(event);
|
|
464
|
+
}, [handleLongPressTouchEnd, onTouchEndProp]);
|
|
465
|
+
const handleTriggerTouchCancel = useCallback(event => {
|
|
466
|
+
handleLongPressTouchCancel();
|
|
467
|
+
onTouchCancelProp?.(event);
|
|
468
|
+
}, [handleLongPressTouchCancel, onTouchCancelProp]);
|
|
457
469
|
const popoverXstyle = menuWidth ? styles.popoverCustomWidth(menuWidth) : styles.popover;
|
|
458
470
|
|
|
459
471
|
// The drill-in view stack for sub-menus on a phone; the bottom sheet has
|
|
@@ -517,7 +529,7 @@ export function ContextMenu({
|
|
|
517
529
|
isIconOnly: true,
|
|
518
530
|
onClick: () => setSubmenuPath(path => path.slice(0, -1))
|
|
519
531
|
}), /*#__PURE__*/_jsx(Heading, {
|
|
520
|
-
ref:
|
|
532
|
+
ref: setSheetHeadingRef,
|
|
521
533
|
level: 3,
|
|
522
534
|
tabIndex: -1,
|
|
523
535
|
xstyle: [styles.sheetViewHeading, submenuPath.length === 0 && styles.sheetRootHeading],
|
|
@@ -537,11 +549,11 @@ export function ContextMenu({
|
|
|
537
549
|
children: [/*#__PURE__*/_jsxs(TriggerElement, {
|
|
538
550
|
ref: useMergedRefs(ref, triggerRef),
|
|
539
551
|
...triggerProps,
|
|
540
|
-
onContextMenu:
|
|
541
|
-
onTouchStart:
|
|
542
|
-
onTouchMove:
|
|
543
|
-
onTouchEnd:
|
|
544
|
-
onTouchCancel:
|
|
552
|
+
onContextMenu: handleTriggerContextMenu,
|
|
553
|
+
onTouchStart: handleTriggerTouchStart,
|
|
554
|
+
onTouchMove: handleTriggerTouchMove,
|
|
555
|
+
onTouchEnd: handleTriggerTouchEnd,
|
|
556
|
+
onTouchCancel: handleTriggerTouchCancel,
|
|
545
557
|
"data-testid": testId,
|
|
546
558
|
...stylex.props(styles.trigger, ...(triggerXstyle ? Array.isArray(triggerXstyle) ? triggerXstyle : [triggerXstyle] : [])),
|
|
547
559
|
children: [children, /*#__PURE__*/_jsx("span", {
|
|
@@ -564,7 +576,9 @@ export function ContextMenu({
|
|
|
564
576
|
label: sheetLabel,
|
|
565
577
|
children: renderedBottomSheetContent
|
|
566
578
|
})
|
|
567
|
-
}) : layer.render(
|
|
579
|
+
}) : layer.render(/*#__PURE__*/_jsx(LayerDepthProvider, {
|
|
580
|
+
children: renderedMenu
|
|
581
|
+
}), {
|
|
568
582
|
placement: 'below',
|
|
569
583
|
alignment: 'start',
|
|
570
584
|
xstyle: [popoverXstyle, layerAnimations.below]
|
|
@@ -526,7 +526,7 @@ function PointerDateField({
|
|
|
526
526
|
}), statusIcon, popover.render(/*#__PURE__*/_jsx(Calendar, {
|
|
527
527
|
handleRef: calendarRef,
|
|
528
528
|
mode: "single",
|
|
529
|
-
value: optimisticValue,
|
|
529
|
+
value: optimisticValue ?? null,
|
|
530
530
|
onChange: handleDateSelect,
|
|
531
531
|
min: min,
|
|
532
532
|
max: max,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MonthScroller.d.ts","sourceRoot":"","sources":["../../src/DateInput/MonthScroller.tsx"],"names":[],"mappings":"AAoDA,OAAO,EACL,KAAK,SAAS,EACd,KAAK,aAAa,EAClB,KAAK,SAAS,EAQf,MAAM,UAAU,CAAC;AA6MlB,MAAM,WAAW,mBAAmB;IAClC,0DAA0D;IAC1D,aAAa,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;CACxE;AAED,MAAM,WAAW,kBAAkB;IACjC,yEAAyE;IACzE,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAAC;IACxD,+CAA+C;IAC/C,aAAa,EAAE,MAAM,CAAC;IACtB,8CAA8C;IAC9C,aAAa,EAAE,MAAM,CAAC;IACtB,iCAAiC;IACjC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,+DAA+D;IAC/D,oBAAoB,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,+BAA+B;IAC/B,YAAY,EAAE,SAAS,GAAG,IAAI,CAAC;IAC/B,4CAA4C;IAC5C,KAAK,EAAE,SAAS,CAAC;IACjB,2DAA2D;IAC3D,cAAc,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,OAAO,CAAC;IAC7C,gCAAgC;IAChC,YAAY,EAAE,SAAS,CAAC;IACxB,kCAAkC;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CAC1C;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,aAAa,EACb,aAAa,EACb,iBAAiB,EACjB,oBAAoB,EACpB,YAAY,EACZ,KAAK,EACL,cAAc,EACd,YAAY,EACZ,QAAQ,GACT,EAAE,kBAAkB,+
|
|
1
|
+
{"version":3,"file":"MonthScroller.d.ts","sourceRoot":"","sources":["../../src/DateInput/MonthScroller.tsx"],"names":[],"mappings":"AAoDA,OAAO,EACL,KAAK,SAAS,EACd,KAAK,aAAa,EAClB,KAAK,SAAS,EAQf,MAAM,UAAU,CAAC;AA6MlB,MAAM,WAAW,mBAAmB;IAClC,0DAA0D;IAC1D,aAAa,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;CACxE;AAED,MAAM,WAAW,kBAAkB;IACjC,yEAAyE;IACzE,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAAC;IACxD,+CAA+C;IAC/C,aAAa,EAAE,MAAM,CAAC;IACtB,8CAA8C;IAC9C,aAAa,EAAE,MAAM,CAAC;IACtB,iCAAiC;IACjC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,+DAA+D;IAC/D,oBAAoB,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,+BAA+B;IAC/B,YAAY,EAAE,SAAS,GAAG,IAAI,CAAC;IAC/B,4CAA4C;IAC5C,KAAK,EAAE,SAAS,CAAC;IACjB,2DAA2D;IAC3D,cAAc,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,OAAO,CAAC;IAC7C,gCAAgC;IAChC,YAAY,EAAE,SAAS,CAAC;IACxB,kCAAkC;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CAC1C;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,aAAa,EACb,aAAa,EACb,iBAAiB,EACjB,oBAAoB,EACpB,YAAY,EACZ,KAAK,EACL,cAAc,EACd,YAAY,EACZ,QAAQ,GACT,EAAE,kBAAkB,+BAyapB;yBApbe,aAAa"}
|
|
@@ -439,12 +439,16 @@ export function MonthScroller({
|
|
|
439
439
|
// Column within the displayed week, which is what Home/End move to —
|
|
440
440
|
// not the day of the month.
|
|
441
441
|
const column = (plainDateDayOfWeek(date) - weekStartsOn + 7) % 7;
|
|
442
|
+
// The horizontal arrows follow the reading direction (APG grid): under
|
|
443
|
+
// RTL the next day sits to the left.
|
|
444
|
+
const forward = isRTL ? 'ArrowLeft' : 'ArrowRight';
|
|
445
|
+
const backward = isRTL ? 'ArrowRight' : 'ArrowLeft';
|
|
442
446
|
switch (event.key) {
|
|
443
|
-
case
|
|
447
|
+
case backward:
|
|
444
448
|
event.preventDefault();
|
|
445
449
|
moveFocus(date, -1);
|
|
446
450
|
break;
|
|
447
|
-
case
|
|
451
|
+
case forward:
|
|
448
452
|
event.preventDefault();
|
|
449
453
|
moveFocus(date, 1);
|
|
450
454
|
break;
|
|
@@ -467,7 +471,7 @@ export function MonthScroller({
|
|
|
467
471
|
default:
|
|
468
472
|
break;
|
|
469
473
|
}
|
|
470
|
-
}, [moveFocus, weekStartsOn]);
|
|
474
|
+
}, [isRTL, moveFocus, weekStartsOn]);
|
|
471
475
|
|
|
472
476
|
// The focused day may have been in an unmounted pane a frame ago; focus it
|
|
473
477
|
// once it exists, and only in response to a key press so a scroll never
|
|
@@ -477,7 +481,10 @@ export function MonthScroller({
|
|
|
477
481
|
if (!shouldRestoreFocusRef.current || focusedISO == null) {
|
|
478
482
|
return;
|
|
479
483
|
}
|
|
480
|
-
|
|
484
|
+
// A date can be mounted twice: as a real day in its own pane and as a
|
|
485
|
+
// dimmed, disabled spill copy at the edge of a neighbouring pane. Only
|
|
486
|
+
// the real day may take focus, or Enter and Space would select nothing.
|
|
487
|
+
const target = scrollerRef.current?.querySelector(`[data-date="${focusedISO}"]:not([data-outside])`);
|
|
481
488
|
if (target != null) {
|
|
482
489
|
shouldRestoreFocusRef.current = false;
|
|
483
490
|
// preventScroll: the scroller is already snapping to this month; a
|
|
@@ -605,6 +612,7 @@ function MonthPane({
|
|
|
605
612
|
children: /*#__PURE__*/_jsx("button", {
|
|
606
613
|
type: "button",
|
|
607
614
|
"data-date": day.iso,
|
|
615
|
+
"data-outside": day.isOutside ? '' : undefined,
|
|
608
616
|
tabIndex: day.iso === tabbableISO ? 0 : -1,
|
|
609
617
|
"aria-label": plainDateFormat(day.date, DATE_FORMAT_WITH_WEEKDAY, locale),
|
|
610
618
|
"aria-disabled": isDisabled || undefined,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateRangeInput.d.ts","sourceRoot":"","sources":["../../src/DateRangeInput/DateRangeInput.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"DateRangeInput.d.ts","sourceRoot":"","sources":["../../src/DateRangeInput/DateRangeInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
* - /apps/storybook/stories/DateRangeInput.stories.tsx (storybook stories)
|
|
16
16
|
* - /packages/cli/assets/templates/blocks/components/DateRangeInput/ (showcase blocks)
|
|
17
17
|
*/
|
|
18
|
-
import { useId, useCallback, useMemo, useOptimistic, useTransition } from 'react';
|
|
18
|
+
import { useId, useCallback, useMemo, useOptimistic, useRef, useTransition } from 'react';
|
|
19
19
|
import * as stylex from '@stylexjs/stylex';
|
|
20
20
|
import { plainDateFromISO, plainDateToday, plainDateFormat, plainDateDiffDays, DATE_FORMAT_SHORT, DATE_FORMAT_SHORT_WITH_YEAR } from "../utils/plainDate.js";
|
|
21
21
|
import "../theme/tokens.stylex.js";
|
|
@@ -34,6 +34,7 @@ import { joinAriaIDs } from "../utils/inputAria.js";
|
|
|
34
34
|
import { useFieldInputStyling } from "../Field/fieldParts.js";
|
|
35
35
|
import { useSize } from "../SizeContext/SizeContext.js";
|
|
36
36
|
import { useInputStatusIcon } from "../hooks/useInputStatusIcon.js";
|
|
37
|
+
import { useMergedRefs } from "../hooks/useMergedRefs.js";
|
|
37
38
|
import { useResolvedRequired } from "../hooks/useResolvedRequired.js";
|
|
38
39
|
import { themeProps } from "../utils/themeProps.js";
|
|
39
40
|
import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
|
|
@@ -298,9 +299,18 @@ export function DateRangeInput({
|
|
|
298
299
|
fireChange(range);
|
|
299
300
|
popover.hide();
|
|
300
301
|
}, [fireChange, popover]);
|
|
302
|
+
const triggerRef = useRef(null);
|
|
303
|
+
const triggerButtonRef = useMergedRefs(triggerRef, ref);
|
|
301
304
|
const handleClear = useCallback(e => {
|
|
302
305
|
e.stopPropagation();
|
|
303
306
|
fireChange(null);
|
|
307
|
+
// A keyboard activation (detail 0) leaves focus on the clear button,
|
|
308
|
+
// which unmounts once the range is null and would drop focus to <body>;
|
|
309
|
+
// hand it to the trigger. A pointer press never focuses the button, so
|
|
310
|
+
// there is no focus to repair.
|
|
311
|
+
if (e.detail === 0) {
|
|
312
|
+
triggerRef.current?.focus();
|
|
313
|
+
}
|
|
304
314
|
}, [fireChange]);
|
|
305
315
|
const triggerAriaLabel = optimisticValue ? `${label}: ${displayValue}` : `${label}: ${placeholder}`;
|
|
306
316
|
return /*#__PURE__*/_jsxs(Field, {
|
|
@@ -351,7 +361,7 @@ export function DateRangeInput({
|
|
|
351
361
|
})
|
|
352
362
|
}), /*#__PURE__*/_jsx("button", {
|
|
353
363
|
...controlProps,
|
|
354
|
-
ref:
|
|
364
|
+
ref: triggerButtonRef,
|
|
355
365
|
id: id,
|
|
356
366
|
type: "button",
|
|
357
367
|
onClick: chainEventHandlers(handleToggle, onClickProp)
|
package/dist/Dialog/Dialog.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @file Dialog.tsx
|
|
3
3
|
* @input Uses React, DialogHTMLAttributes, ReactNode, container (Layout), DialogContext, layerTextReset,
|
|
4
|
-
* layerStructureReset, modalOutlet, interactionModality
|
|
4
|
+
* layerStructureReset, modalOutlet, interactionModality, chainEventHandlers
|
|
5
5
|
* @output Exports Dialog component, DialogProps, DialogVariant, DialogPurpose types
|
|
6
6
|
* @position Core implementation; consumed by index.ts, tested by Dialog.test.tsx
|
|
7
7
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA2B5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA2B5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAMhD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,SAAS,CAAC;AAyB9C;;;;;;GAMG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,gBAAgB,CAAC;AAEnD;;;;;GAKG;AACH,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;AAEzD,4EAA4E;AAC5E,UAAU,mBAAmB;IAC3B,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAED;;;;;GAKG;AACH,MAAM,WAAW,cAAe,SAAQ,mBAAmB;IACzD,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,yEAAyE;IACzE,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB;AAuBD,2FAA2F;AAC3F,eAAO,MAAM,uCAAuC;;;;;;;;;;;CAW1C,CAAC;AAoJX;;;;;;;;;GASG;AACH,wBAAgB,4BAA4B,CAAC,QAAQ,EAAE,cAAc;;;;;EAUpE;AAED,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC/D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;;OAOG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC;IAE3C;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC;IAEpC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,QAAgB,EAChB,YAAY,EACZ,KAAW,EACX,SAAmB,EACnB,QAAQ,EACR,OAAoB,EACpB,OAAgB,EAChB,OAAO,EACP,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,sCA2Ub;yBA3Ve,MAAM"}
|
package/dist/Dialog/Dialog.js
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
/**
|
|
6
6
|
* @file Dialog.tsx
|
|
7
7
|
* @input Uses React, DialogHTMLAttributes, ReactNode, container (Layout), DialogContext, layerTextReset,
|
|
8
|
-
* layerStructureReset, modalOutlet, interactionModality
|
|
8
|
+
* layerStructureReset, modalOutlet, interactionModality, chainEventHandlers
|
|
9
9
|
* @output Exports Dialog component, DialogProps, DialogVariant, DialogPurpose types
|
|
10
10
|
* @position Core implementation; consumed by index.ts, tested by Dialog.test.tsx
|
|
11
11
|
*
|
|
@@ -41,6 +41,7 @@ import { colorVars, radiusVars, durationVars, easeVars, shadowVars, spacingVars
|
|
|
41
41
|
import { container } from "../Layout/container.stylex.js";
|
|
42
42
|
import { paddingStyles, containerPaddingInlineVarStyles, containerPaddingBlockStartVarStyles, containerPaddingBlockEndVarStyles, spacingStepToToken, overlayPaddingReset } from "../Layout/padding.stylex.js";
|
|
43
43
|
import { mergeProps } from "../utils/index.js";
|
|
44
|
+
import { chainEventHandlers } from "../utils/chainEventHandlers.js";
|
|
44
45
|
import { devWarn } from "../utils/devWarning.js";
|
|
45
46
|
import { DialogContext } from "./DialogContext.js";
|
|
46
47
|
import { themeProps } from "../utils/themeProps.js";
|
|
@@ -489,12 +490,22 @@ export function Dialog({
|
|
|
489
490
|
})
|
|
490
491
|
});
|
|
491
492
|
|
|
492
|
-
// Filter out native open to prevent InvalidStateError when accidentally passed
|
|
493
|
+
// Filter out native open to prevent InvalidStateError when accidentally passed.
|
|
494
|
+
// Keep the consumer click handler separate so the modal path can compose it
|
|
495
|
+
// with Dialog-owned behavior without changing the inline preview path.
|
|
493
496
|
const hasPosition = position != null && !isFullscreen;
|
|
497
|
+
const {
|
|
498
|
+
onClick: onClickProp,
|
|
499
|
+
...propsWithoutClick
|
|
500
|
+
} = props;
|
|
494
501
|
const {
|
|
495
502
|
open: _open,
|
|
496
503
|
...safeProps
|
|
497
|
-
} =
|
|
504
|
+
} = propsWithoutClick;
|
|
505
|
+
const inlineSafeProps = {
|
|
506
|
+
...safeProps,
|
|
507
|
+
onClick: onClickProp
|
|
508
|
+
};
|
|
498
509
|
|
|
499
510
|
// --- Inline rendering path (for documentation previews) ---
|
|
500
511
|
if (isInline) {
|
|
@@ -502,7 +513,7 @@ export function Dialog({
|
|
|
502
513
|
return null;
|
|
503
514
|
}
|
|
504
515
|
return /*#__PURE__*/_jsx("div", {
|
|
505
|
-
...
|
|
516
|
+
...inlineSafeProps,
|
|
506
517
|
...mergeProps(themeProps('dialog', {
|
|
507
518
|
variant
|
|
508
519
|
}), stylex.props(layerTextReset.reset, layerStructureReset.reset, styles.inlineWrapper, overlayPaddingReset.reset, standardSizing && dynamicStyles.sizing(standardSizing.width, standardSizing.maxWidth, standardSizing.maxHeight), isFullscreen && styles.fullscreen, xstyle), className, style),
|
|
@@ -526,7 +537,7 @@ export function Dialog({
|
|
|
526
537
|
const o = resolveDialogPositionOffsets(position);
|
|
527
538
|
return dynamicStyles.position(o.top, o.insetInlineStart, o.insetInlineEnd, o.bottom);
|
|
528
539
|
})(), isFullscreen && styles.fullscreen, isFullscreen && isOpen && styles.fullscreenOpen, xstyle), className, style),
|
|
529
|
-
onClick: handleClick,
|
|
540
|
+
onClick: chainEventHandlers(handleClick, onClickProp),
|
|
530
541
|
onCancel: handleCancel,
|
|
531
542
|
"aria-modal": "true"
|
|
532
543
|
// The default aria-labelledby (from a DialogHeader title) is set
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @file DialogHeader.tsx
|
|
3
|
-
* @input Uses React, StyleX, LayoutHeader, Button, Icon, Heading, Text, DialogContext, mergeProps, themeProps
|
|
3
|
+
* @input Uses React, StyleX, LayoutHeader, Button, Icon, Heading, Text, DialogContext, isRenderable, mergeProps, themeProps
|
|
4
4
|
* @output Exports DialogHeader component and DialogHeaderProps
|
|
5
5
|
* @position Dialog header component; used with Dialog and Layout
|
|
6
6
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DialogHeader.d.ts","sourceRoot":"","sources":["../../src/Dialog/DialogHeader.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAoB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAQxD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA2C5C,MAAM,WAAW,iBAAkB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAClE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;;;;;OASG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC;IAE5C;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB;;;;;OAKG;IACH,0BAA0B,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC;IAExD;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,0BAA0B,EAC1B,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,iBAAiB,+
|
|
1
|
+
{"version":3,"file":"DialogHeader.d.ts","sourceRoot":"","sources":["../../src/Dialog/DialogHeader.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAoB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAQxD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA2C5C,MAAM,WAAW,iBAAkB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAClE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;;;;;OASG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC;IAE5C;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB;;;;;OAKG;IACH,0BAA0B,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC;IAExD;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,0BAA0B,EAC1B,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,iBAAiB,+BA0GnB;yBAvHe,YAAY"}
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* @file DialogHeader.tsx
|
|
7
|
-
* @input Uses React, StyleX, LayoutHeader, Button, Icon, Heading, Text, DialogContext, mergeProps, themeProps
|
|
7
|
+
* @input Uses React, StyleX, LayoutHeader, Button, Icon, Heading, Text, DialogContext, isRenderable, mergeProps, themeProps
|
|
8
8
|
* @output Exports DialogHeader component and DialogHeaderProps
|
|
9
9
|
* @position Dialog header component; used with Dialog and Layout
|
|
10
10
|
*
|
|
@@ -24,7 +24,7 @@ import { Button } from "../Button/index.js";
|
|
|
24
24
|
import { Icon } from "../Icon/index.js";
|
|
25
25
|
import { Heading } from "../Heading/Heading.js";
|
|
26
26
|
import { Text } from "../Text/Text.js";
|
|
27
|
-
import { mergeProps } from "../utils/index.js";
|
|
27
|
+
import { isRenderable, mergeProps } from "../utils/index.js";
|
|
28
28
|
import { themeProps } from "../utils/themeProps.js";
|
|
29
29
|
import { useDialogContext } from "./DialogContext.js";
|
|
30
30
|
import { useTranslator } from "../i18n/index.js";
|
|
@@ -76,9 +76,9 @@ export function DialogHeader({
|
|
|
76
76
|
const dialogContext = useDialogContext();
|
|
77
77
|
const shouldAutoFocus = dialogContext?.isInline !== true;
|
|
78
78
|
const titleId = dialogContext?.titleId;
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
const
|
|
79
|
+
const hasSubtitle = isRenderable(subtitle);
|
|
80
|
+
const hasStartContent = isRenderable(startContent);
|
|
81
|
+
const hasEndContent = isRenderable(endContent);
|
|
82
82
|
const shouldCompensateEndBlock = endContentEdgeCompensation == null ? onOpenChange != null : endContentEdgeCompensation === 'block' || endContentEdgeCompensation === 'all';
|
|
83
83
|
const shouldCompensateEndInline = endContentEdgeCompensation == null ? onOpenChange != null : endContentEdgeCompensation === 'inline' || endContentEdgeCompensation === 'all';
|
|
84
84
|
|
|
@@ -103,7 +103,7 @@ export function DialogHeader({
|
|
|
103
103
|
...mergeProps(themeProps('dialog-header'), {
|
|
104
104
|
className: "x78zum5 x1cy8zhl x1qughib xjcht0a"
|
|
105
105
|
}),
|
|
106
|
-
children: [
|
|
106
|
+
children: [hasStartContent && /*#__PURE__*/_jsx("div", {
|
|
107
107
|
...mergeProps(themeProps('dialog-header-start-content'), {
|
|
108
108
|
className: "x78zum5 x6s0dn4 x1txdalj x2lah0s"
|
|
109
109
|
}),
|
|
@@ -125,7 +125,7 @@ export function DialogHeader({
|
|
|
125
125
|
color: "secondary",
|
|
126
126
|
children: subtitle
|
|
127
127
|
})]
|
|
128
|
-
}), (
|
|
128
|
+
}), (hasEndContent || onOpenChange != null) && /*#__PURE__*/_jsxs("div", {
|
|
129
129
|
...mergeProps(themeProps('dialog-header-end-content'), {
|
|
130
130
|
0: {
|
|
131
131
|
className: "x78zum5 x6s0dn4 x1txdalj x2lah0s"
|
|
@@ -27,6 +27,7 @@ export interface DividerProps extends BaseProps<HTMLDivElement> {
|
|
|
27
27
|
orientation?: 'horizontal' | 'vertical';
|
|
28
28
|
/**
|
|
29
29
|
* Optional label to display centered on the divider.
|
|
30
|
+
* Numeric zero is preserved; null, booleans, and empty strings render no label.
|
|
30
31
|
* Rendered with small, secondary text styling.
|
|
31
32
|
*/
|
|
32
33
|
label?: ReactNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../src/Divider/Divider.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAQ,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAW5C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,SAAS,CAAC;AAE/C;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,MAAM,iBAAiB,CAAC;AAErD,MAAM,WAAW,YAAa,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC7D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IAExC
|
|
1
|
+
{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../src/Divider/Divider.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAQ,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAW5C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,SAAS,CAAC;AAE/C;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,MAAM,iBAAiB,CAAC;AAErD,MAAM,WAAW,YAAa,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC7D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IAExC;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC;IAEzB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAiED;;;;;;;;;;GAUG;AACH,wBAAgB,OAAO,CAAC,EACtB,WAA0B,EAC1B,KAAK,EACL,OAAkB,EAClB,WAAmB,EACnB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,GAAG,KAAK,EACT,EAAE,YAAY,+BA2Dd;yBAvEe,OAAO"}
|
package/dist/Divider/Divider.js
CHANGED
|
@@ -18,7 +18,7 @@ import { useId } from 'react';
|
|
|
18
18
|
import * as stylex from '@stylexjs/stylex';
|
|
19
19
|
import "../theme/tokens.stylex.js";
|
|
20
20
|
import { colorVars, spacingVars, typeScaleVars, borderVars } from "../theme/tokens.stylex.js";
|
|
21
|
-
import { mergeProps } from "../utils/index.js";
|
|
21
|
+
import { isRenderable, mergeProps } from "../utils/index.js";
|
|
22
22
|
import { themeProps } from "../utils/themeProps.js";
|
|
23
23
|
|
|
24
24
|
/**
|
|
@@ -102,13 +102,14 @@ export function Divider({
|
|
|
102
102
|
...props
|
|
103
103
|
}) {
|
|
104
104
|
const isHorizontal = orientation === 'horizontal';
|
|
105
|
+
const hasLabel = isRenderable(label);
|
|
105
106
|
const labelId = useId();
|
|
106
107
|
|
|
107
108
|
// A separator does not derive its accessible name from its content, so the
|
|
108
109
|
// rendered label must be referenced explicitly via aria-labelledby to be
|
|
109
110
|
// exposed as the separator's name (WCAG 1.3.1). An explicit aria-label or
|
|
110
111
|
// aria-labelledby from the consumer takes precedence.
|
|
111
|
-
const resolvedLabelledBy = ariaLabelledBy ?? (
|
|
112
|
+
const resolvedLabelledBy = ariaLabelledBy ?? (hasLabel && ariaLabel == null ? labelId : undefined);
|
|
112
113
|
return /*#__PURE__*/_jsxs("div", {
|
|
113
114
|
ref: ref,
|
|
114
115
|
...props,
|
|
@@ -122,7 +123,7 @@ export function Divider({
|
|
|
122
123
|
}), stylex.props(isHorizontal ? baseStyles.horizontal : baseStyles.vertical, isFullBleed && (isHorizontal ? fullBleedStyles.horizontal : fullBleedStyles.vertical), xstyle), className, style),
|
|
123
124
|
children: [/*#__PURE__*/_jsx("div", {
|
|
124
125
|
...stylex.props(isHorizontal ? lineStyles.horizontalLine : lineStyles.verticalLine, lineStyles[variant])
|
|
125
|
-
}),
|
|
126
|
+
}), hasLabel && /*#__PURE__*/_jsx("div", {
|
|
126
127
|
id: labelId,
|
|
127
128
|
...{
|
|
128
129
|
0: {
|
|
@@ -133,7 +134,7 @@ export function Divider({
|
|
|
133
134
|
}
|
|
134
135
|
}[!!!isHorizontal << 0],
|
|
135
136
|
children: label
|
|
136
|
-
}),
|
|
137
|
+
}), hasLabel && /*#__PURE__*/_jsx("div", {
|
|
137
138
|
...stylex.props(isHorizontal ? lineStyles.horizontalLine : lineStyles.verticalLine, lineStyles[variant])
|
|
138
139
|
})]
|
|
139
140
|
});
|
|
@@ -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;AAyB9D,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;
|
|
1
|
+
{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenu.tsx"],"names":[],"mappings":"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"}
|