@astryxdesign/core 0.4.7 → 0.5.0-canary.055e75f
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 +161 -1
- package/dist/AlertDialog/AlertDialog.d.ts +1 -1
- package/dist/AlertDialog/AlertDialog.d.ts.map +1 -1
- package/dist/AlertDialog/AlertDialog.js +45 -20
- package/dist/AppShell/AppShell.d.ts.map +1 -1
- package/dist/AppShell/AppShell.js +3 -2
- package/dist/AspectRatio/AspectRatio.d.ts +24 -0
- package/dist/AspectRatio/AspectRatio.d.ts.map +1 -1
- package/dist/AspectRatio/AspectRatio.js +23 -4
- package/dist/Avatar/Avatar.d.ts +25 -1
- package/dist/Avatar/Avatar.d.ts.map +1 -1
- package/dist/Avatar/Avatar.js +58 -19
- package/dist/Avatar/index.d.ts +2 -2
- package/dist/Avatar/index.d.ts.map +1 -1
- package/dist/Avatar/index.js +1 -1
- package/dist/AvatarGroup/AvatarGroup.d.ts +9 -2
- package/dist/AvatarGroup/AvatarGroup.d.ts.map +1 -1
- package/dist/AvatarGroup/AvatarGroup.js +8 -4
- package/dist/AvatarGroup/AvatarGroupContext.d.ts +2 -1
- package/dist/AvatarGroup/AvatarGroupContext.d.ts.map +1 -1
- package/dist/AvatarGroup/AvatarGroupOverflow.d.ts.map +1 -1
- package/dist/AvatarGroup/AvatarGroupOverflow.js +10 -6
- package/dist/Banner/Banner.d.ts +40 -15
- package/dist/Banner/Banner.d.ts.map +1 -1
- package/dist/Banner/Banner.js +51 -18
- package/dist/BottomSheet/BottomSheet.d.ts.map +1 -1
- package/dist/BottomSheet/BottomSheet.js +17 -4
- package/dist/BottomSheet/BottomSheetSwitcher.d.ts.map +1 -1
- package/dist/BottomSheet/BottomSheetSwitcher.js +3 -2
- package/dist/Breadcrumbs/BreadcrumbItem.d.ts.map +1 -1
- package/dist/Breadcrumbs/BreadcrumbItem.js +11 -10
- package/dist/Button/Button.d.ts.map +1 -1
- package/dist/Button/Button.js +11 -6
- package/dist/ButtonGroup/ButtonGroup.d.ts +5 -1
- package/dist/ButtonGroup/ButtonGroup.d.ts.map +1 -1
- package/dist/ButtonGroup/ButtonGroup.js +26 -7
- package/dist/Calendar/Calendar.d.ts +3 -1
- package/dist/Calendar/Calendar.d.ts.map +1 -1
- package/dist/Calendar/Calendar.js +14 -15
- package/dist/Calendar/getInitialFocusDate.d.ts +46 -0
- package/dist/Calendar/getInitialFocusDate.d.ts.map +1 -0
- package/dist/Calendar/getInitialFocusDate.js +62 -0
- package/dist/Calendar/styles.d.ts +5 -14
- package/dist/Calendar/styles.d.ts.map +1 -1
- package/dist/Calendar/styles.js +15 -15
- package/dist/Card/Card.d.ts +6 -9
- package/dist/Card/Card.d.ts.map +1 -1
- package/dist/Card/Card.js +6 -6
- package/dist/Carousel/Carousel.d.ts.map +1 -1
- package/dist/Carousel/Carousel.js +3 -3
- package/dist/Chat/ChatComposerInput.d.ts.map +1 -1
- package/dist/Chat/ChatComposerInput.js +2 -3
- package/dist/Chat/ChatLayout.d.ts.map +1 -1
- package/dist/Chat/ChatLayout.js +3 -3
- package/dist/Chat/ChatMessageList.d.ts +22 -3
- package/dist/Chat/ChatMessageList.d.ts.map +1 -1
- package/dist/Chat/ChatMessageList.js +6 -3
- package/dist/Chat/ChatTokenizedText.d.ts +2 -0
- package/dist/Chat/ChatTokenizedText.d.ts.map +1 -1
- package/dist/Chat/ChatTokenizedText.js +11 -6
- package/dist/Chat/useChatComposerTokens.js +1 -1
- package/dist/CheckboxInput/CheckboxInput.d.ts.map +1 -1
- package/dist/CheckboxInput/CheckboxInput.js +10 -3
- package/dist/ClickableCard/ClickableCard.d.ts.map +1 -1
- package/dist/ClickableCard/ClickableCard.js +3 -3
- package/dist/CodeBlock/CodeBlock.d.ts.map +1 -1
- package/dist/CodeBlock/CodeBlock.js +15 -4
- package/dist/CodeBlock/highlightRanges.js +1 -1
- package/dist/CodeBlock/highlightStyles.js +13 -13
- package/dist/CommandPalette/CommandPaletteInput.d.ts.map +1 -1
- package/dist/CommandPalette/CommandPaletteInput.js +3 -2
- package/dist/CommandPalette/CommandPaletteItem.d.ts.map +1 -1
- package/dist/CommandPalette/CommandPaletteItem.js +3 -2
- package/dist/ContextMenu/ContextMenu.d.ts.map +1 -1
- package/dist/ContextMenu/ContextMenu.js +4 -3
- package/dist/DateInput/DateInput.d.ts +43 -0
- package/dist/DateInput/DateInput.d.ts.map +1 -1
- package/dist/DateInput/DateInput.js +22 -2
- package/dist/DateInput/NativeDateField.d.ts +10 -0
- package/dist/DateInput/NativeDateField.d.ts.map +1 -0
- package/dist/DateInput/NativeDateField.js +494 -0
- package/dist/DateInput/TouchDateField.d.ts.map +1 -1
- package/dist/DateInput/TouchDateField.js +82 -23
- package/dist/DateInput/index.d.ts +1 -1
- package/dist/DateInput/index.d.ts.map +1 -1
- package/dist/DateInput/nativeDateSegments.d.ts +22 -0
- package/dist/DateInput/nativeDateSegments.d.ts.map +1 -0
- package/dist/DateInput/nativeDateSegments.js +111 -0
- package/dist/DateTimeInput/DateTimeInput.d.ts +21 -1
- package/dist/DateTimeInput/DateTimeInput.d.ts.map +1 -1
- package/dist/DateTimeInput/DateTimeInput.js +406 -12
- package/dist/DateTimeInput/index.d.ts +1 -1
- package/dist/DateTimeInput/index.d.ts.map +1 -1
- package/dist/Dialog/Dialog.d.ts +21 -1
- package/dist/Dialog/Dialog.d.ts.map +1 -1
- package/dist/Dialog/Dialog.js +110 -58
- package/dist/DropdownMenu/DropdownMenuSubMenu.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenuSubMenu.js +6 -5
- package/dist/Field/FieldLabel.d.ts.map +1 -1
- package/dist/Field/FieldLabel.js +9 -1
- package/dist/FileInput/FileInput.d.ts.map +1 -1
- package/dist/FileInput/FileInput.js +3 -2
- package/dist/Heading/Heading.d.ts.map +1 -1
- package/dist/Heading/Heading.js +6 -2
- package/dist/HoverCard/HoverCard.d.ts +6 -0
- package/dist/HoverCard/HoverCard.d.ts.map +1 -1
- package/dist/HoverCard/HoverCard.js +104 -3
- package/dist/HoverCard/useHoverCard.d.ts +19 -2
- package/dist/HoverCard/useHoverCard.d.ts.map +1 -1
- package/dist/HoverCard/useHoverCard.js +74 -26
- package/dist/Indicator/CheckboxIndicator.d.ts.map +1 -1
- package/dist/Indicator/CheckboxIndicator.js +6 -2
- package/dist/Item/Item.d.ts.map +1 -1
- package/dist/Item/Item.js +4 -2
- package/dist/Kbd/Kbd.d.ts.map +1 -1
- package/dist/Kbd/Kbd.js +2 -19
- package/dist/Layer/LayerDepthContext.d.ts +52 -0
- package/dist/Layer/LayerDepthContext.d.ts.map +1 -0
- package/dist/Layer/LayerDepthContext.js +66 -0
- package/dist/Layer/index.d.ts +3 -0
- package/dist/Layer/index.d.ts.map +1 -1
- package/dist/Layer/index.js +4 -0
- package/dist/Layer/layerStack.d.ts +98 -0
- package/dist/Layer/layerStack.d.ts.map +1 -0
- package/dist/Layer/layerStack.js +306 -0
- package/dist/Layer/useLayerDismissal.d.ts +93 -0
- package/dist/Layer/useLayerDismissal.d.ts.map +1 -0
- package/dist/Layer/useLayerDismissal.js +91 -0
- package/dist/Lightbox/Lightbox.d.ts +1 -0
- package/dist/Lightbox/Lightbox.d.ts.map +1 -1
- package/dist/Lightbox/Lightbox.js +103 -81
- package/dist/Markdown/Markdown.d.ts.map +1 -1
- package/dist/Markdown/Markdown.js +9 -4
- package/dist/Markdown/index.d.ts +1 -1
- package/dist/Markdown/index.d.ts.map +1 -1
- package/dist/Markdown/parser.d.ts +38 -1
- package/dist/Markdown/parser.d.ts.map +1 -1
- package/dist/Markdown/parser.js +182 -32
- package/dist/MobileNav/MobileNav.d.ts +6 -1
- package/dist/MobileNav/MobileNav.d.ts.map +1 -1
- package/dist/MobileNav/MobileNav.js +61 -36
- package/dist/MultiSelector/MultiSelector.d.ts +32 -1
- package/dist/MultiSelector/MultiSelector.d.ts.map +1 -1
- package/dist/MultiSelector/MultiSelector.js +63 -11
- package/dist/MultiSelector/index.d.ts +1 -1
- package/dist/MultiSelector/index.d.ts.map +1 -1
- package/dist/NavIcon/NavIcon.d.ts.map +1 -1
- package/dist/NavIcon/NavIcon.js +5 -1
- package/dist/NavMenu/NavHeadingMenu.d.ts.map +1 -1
- package/dist/NavMenu/NavHeadingMenu.js +3 -2
- package/dist/NumberInput/NumberInput.d.ts +6 -1
- package/dist/NumberInput/NumberInput.d.ts.map +1 -1
- package/dist/NumberInput/NumberInput.js +54 -104
- package/dist/NumberInput/numberInputCommit.d.ts +34 -0
- package/dist/NumberInput/numberInputCommit.d.ts.map +1 -0
- package/dist/NumberInput/numberInputCommit.js +71 -0
- package/dist/NumberInput/numberParser.d.ts +64 -0
- package/dist/NumberInput/numberParser.d.ts.map +1 -0
- package/dist/NumberInput/numberParser.js +350 -0
- package/dist/Outline/Outline.d.ts.map +1 -1
- package/dist/Outline/Outline.js +3 -2
- package/dist/OverflowList/OverflowList.d.ts.map +1 -1
- package/dist/OverflowList/OverflowList.js +3 -2
- package/dist/Overlay/Overlay.d.ts.map +1 -1
- package/dist/Overlay/Overlay.js +3 -2
- package/dist/Popover/usePopover.d.ts.map +1 -1
- package/dist/Popover/usePopover.js +20 -17
- package/dist/PowerSearch/PowerSearch.d.ts +8 -2
- package/dist/PowerSearch/PowerSearch.d.ts.map +1 -1
- package/dist/PowerSearch/PowerSearch.js +19 -6
- package/dist/PowerSearch/PowerSearchEditPopover.d.ts +3 -1
- package/dist/PowerSearch/PowerSearchEditPopover.d.ts.map +1 -1
- package/dist/PowerSearch/PowerSearchEditPopover.js +28 -6
- package/dist/PowerSearch/PowerSearchValueEditor.d.ts +3 -1
- package/dist/PowerSearch/PowerSearchValueEditor.d.ts.map +1 -1
- package/dist/PowerSearch/PowerSearchValueEditor.js +110 -27
- package/dist/PowerSearch/types.d.ts +2 -0
- package/dist/PowerSearch/types.d.ts.map +1 -1
- package/dist/PowerSearch/usePowerSearchSource.d.ts +6 -1
- package/dist/PowerSearch/usePowerSearchSource.d.ts.map +1 -1
- package/dist/PowerSearch/usePowerSearchSource.js +14 -5
- package/dist/ProgressBar/ProgressBar.d.ts.map +1 -1
- package/dist/ProgressBar/ProgressBar.js +18 -5
- package/dist/Resizable/ResizeHandle.d.ts.map +1 -1
- package/dist/Resizable/ResizeHandle.js +3 -2
- package/dist/SegmentedControl/SegmentedControl.d.ts.map +1 -1
- package/dist/SegmentedControl/SegmentedControl.js +3 -2
- package/dist/SelectableCard/SelectableCard.d.ts.map +1 -1
- package/dist/SelectableCard/SelectableCard.js +3 -3
- package/dist/Selector/Selector.d.ts +17 -0
- package/dist/Selector/Selector.d.ts.map +1 -1
- package/dist/Selector/Selector.js +81 -14
- package/dist/SideNav/SideNav.d.ts.map +1 -1
- package/dist/SideNav/SideNav.js +4 -3
- package/dist/SideNav/SideNavHeading.d.ts.map +1 -1
- package/dist/SideNav/SideNavHeading.js +8 -7
- package/dist/SideNav/SideNavItem.d.ts.map +1 -1
- package/dist/SideNav/SideNavItem.js +4 -3
- package/dist/Slider/Slider.d.ts.map +1 -1
- package/dist/Slider/Slider.js +37 -5
- package/dist/Spinner/Spinner.d.ts +3 -3
- package/dist/Spinner/Spinner.d.ts.map +1 -1
- package/dist/Spinner/Spinner.js +130 -78
- package/dist/StatusDot/StatusDot.d.ts.map +1 -1
- package/dist/StatusDot/StatusDot.js +6 -1
- package/dist/Stepper/Step.d.ts +140 -0
- package/dist/Stepper/Step.d.ts.map +1 -0
- package/dist/Stepper/Step.js +1045 -0
- package/dist/Stepper/StepStatus.d.ts +24 -0
- package/dist/Stepper/StepStatus.d.ts.map +1 -0
- package/dist/Stepper/StepStatus.js +1 -0
- package/dist/Stepper/Stepper.d.ts +93 -0
- package/dist/Stepper/Stepper.d.ts.map +1 -0
- package/dist/Stepper/Stepper.js +184 -0
- package/dist/Stepper/StepperContext.d.ts +41 -0
- package/dist/Stepper/StepperContext.d.ts.map +1 -0
- package/dist/Stepper/StepperContext.js +34 -0
- package/dist/Stepper/index.d.ts +8 -0
- package/dist/Stepper/index.d.ts.map +1 -0
- package/dist/Stepper/index.js +7 -0
- package/dist/Stepper/stepper.stylex.d.ts +15 -0
- package/dist/Stepper/stepper.stylex.d.ts.map +1 -0
- package/dist/Stepper/stepper.stylex.js +20 -0
- package/dist/Switch/Switch.d.ts.map +1 -1
- package/dist/Switch/Switch.js +8 -3
- package/dist/TabList/Tab.d.ts +15 -2
- package/dist/TabList/Tab.d.ts.map +1 -1
- package/dist/TabList/Tab.js +32 -7
- package/dist/TabList/TabList.d.ts +46 -7
- package/dist/TabList/TabList.d.ts.map +1 -1
- package/dist/TabList/TabList.js +353 -23
- package/dist/TabList/TabListContext.d.ts +11 -1
- package/dist/TabList/TabListContext.d.ts.map +1 -1
- package/dist/TabList/TabListContext.js +11 -2
- package/dist/TabList/TabMenu.d.ts.map +1 -1
- package/dist/TabList/TabMenu.js +3 -2
- package/dist/TabList/index.d.ts +2 -2
- package/dist/TabList/index.d.ts.map +1 -1
- package/dist/Table/BaseTable.d.ts.map +1 -1
- package/dist/Table/BaseTable.js +10 -2
- package/dist/Table/Table.d.ts.map +1 -1
- package/dist/Table/Table.js +3 -6
- package/dist/Table/TableRow.d.ts +16 -5
- package/dist/Table/TableRow.d.ts.map +1 -1
- package/dist/Table/TableRow.js +16 -5
- package/dist/Table/plugins/filtering/useTableFiltering.d.ts.map +1 -1
- package/dist/Table/plugins/filtering/useTableFiltering.js +73 -4
- package/dist/Table/plugins/groupedRows/useTableGroupedRows.d.ts.map +1 -1
- package/dist/Table/plugins/groupedRows/useTableGroupedRows.js +20 -8
- package/dist/Table/plugins/pagination/useTablePagination.d.ts +3 -0
- package/dist/Table/plugins/pagination/useTablePagination.d.ts.map +1 -1
- package/dist/Table/plugins/pagination/useTablePagination.js +21 -4
- package/dist/Table/plugins/rowExpansion/useTableRowExpansion.d.ts.map +1 -1
- package/dist/Table/plugins/rowExpansion/useTableRowExpansion.js +7 -2
- package/dist/Table/plugins/rowStatus/useTableRowStatus.d.ts.map +1 -1
- package/dist/Table/plugins/rowStatus/useTableRowStatus.js +10 -3
- package/dist/Table/plugins/selection/useTableSelection.d.ts +16 -0
- package/dist/Table/plugins/selection/useTableSelection.d.ts.map +1 -1
- package/dist/Table/plugins/selection/useTableSelection.js +19 -5
- package/dist/Table/plugins/stickyColumns/useTableStickyColumns.d.ts.map +1 -1
- package/dist/Table/plugins/stickyColumns/useTableStickyColumns.js +3 -4
- package/dist/Table/types.d.ts +22 -4
- package/dist/Table/types.d.ts.map +1 -1
- package/dist/Table/useBaseTablePlugins.d.ts.map +1 -1
- package/dist/Table/useBaseTablePlugins.js +5 -0
- package/dist/Text/Text.d.ts.map +1 -1
- package/dist/Text/Text.js +6 -2
- package/dist/TextArea/TextArea.d.ts.map +1 -1
- package/dist/TextArea/TextArea.js +9 -3
- package/dist/TextInput/TextInput.d.ts.map +1 -1
- package/dist/TextInput/TextInput.js +3 -2
- package/dist/TimeInput/TimeInput.d.ts.map +1 -1
- package/dist/TimeInput/TimeInput.js +3 -2
- package/dist/Timestamp/Timestamp.d.ts.map +1 -1
- package/dist/Timestamp/Timestamp.js +5 -3
- package/dist/Toast/ToastViewport.d.ts.map +1 -1
- package/dist/Toast/ToastViewport.js +27 -8
- package/dist/Token/TokenLink.d.ts.map +1 -1
- package/dist/Token/TokenLink.js +2 -2
- package/dist/Tokenizer/Tokenizer.d.ts +3 -1
- package/dist/Tokenizer/Tokenizer.d.ts.map +1 -1
- package/dist/Tokenizer/Tokenizer.js +2 -0
- package/dist/Tooltip/Tooltip.d.ts +5 -0
- package/dist/Tooltip/Tooltip.d.ts.map +1 -1
- package/dist/Tooltip/useTooltip.d.ts +5 -0
- package/dist/Tooltip/useTooltip.d.ts.map +1 -1
- package/dist/Tooltip/useTooltip.js +39 -24
- package/dist/TopNav/TopNavHeading.d.ts.map +1 -1
- package/dist/TopNav/TopNavHeading.js +5 -4
- 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 +4 -3
- package/dist/Typeahead/BaseTypeahead.d.ts +2 -0
- package/dist/Typeahead/BaseTypeahead.d.ts.map +1 -1
- package/dist/Typeahead/BaseTypeahead.js +68 -29
- package/dist/Typeahead/Typeahead.d.ts.map +1 -1
- package/dist/Typeahead/Typeahead.js +3 -2
- package/dist/astryx.css +98 -7
- package/dist/hooks/index.d.ts +1 -0
- package/dist/hooks/index.d.ts.map +1 -1
- package/dist/hooks/index.js +1 -0
- package/dist/hooks/useFocusTrap.d.ts +7 -4
- package/dist/hooks/useFocusTrap.d.ts.map +1 -1
- package/dist/hooks/useFocusTrap.js +60 -95
- package/dist/hooks/useHotkeys.d.ts.map +1 -1
- package/dist/hooks/useHotkeys.js +3 -18
- package/dist/hooks/useMergedRefs.d.ts +18 -0
- package/dist/hooks/useMergedRefs.d.ts.map +1 -0
- package/dist/hooks/useMergedRefs.js +25 -0
- 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 +24 -4
- package/dist/theme/syntax/tokens.d.ts +1 -1
- package/dist/theme/syntax/tokens.d.ts.map +1 -1
- package/dist/theme/syntax/tokens.js +5 -2
- package/dist/utils/groupItems.d.ts +5 -1
- package/dist/utils/groupItems.d.ts.map +1 -1
- package/dist/utils/groupItems.js +9 -9
- package/dist/utils/index.d.ts +1 -1
- package/dist/utils/index.d.ts.map +1 -1
- package/dist/utils/isApplePlatform.d.ts +18 -0
- package/dist/utils/isApplePlatform.d.ts.map +1 -0
- package/dist/utils/isApplePlatform.js +37 -0
- package/dist/utils/sharedResizeObserver.d.ts.map +1 -1
- package/dist/utils/sharedResizeObserver.js +10 -1
- package/dist/utils/timeParser.d.ts +1 -1
- package/dist/utils/timeParser.d.ts.map +1 -1
- package/dist/utils/timeParser.js +26 -12
- package/locales/en.json +154 -10
- package/locales/pseudo.json +108 -0
- package/package.json +8 -3
- package/src/AlertDialog/AlertDialog.doc.mjs +114 -30
- package/src/AlertDialog/AlertDialog.test.tsx +211 -2
- package/src/AlertDialog/AlertDialog.tsx +62 -20
- package/src/AppShell/AppShell.tsx +3 -2
- package/src/AspectRatio/AspectRatio.doc.mjs +6 -3
- package/src/AspectRatio/AspectRatio.test.tsx +57 -10
- package/src/AspectRatio/AspectRatio.tsx +40 -1
- package/src/Avatar/Avatar.doc.mjs +14 -3
- package/src/Avatar/Avatar.test.tsx +97 -0
- package/src/Avatar/Avatar.tsx +125 -52
- package/src/Avatar/index.ts +2 -2
- package/src/AvatarGroup/AvatarGroup.doc.mjs +8 -2
- package/src/AvatarGroup/AvatarGroup.test.tsx +24 -0
- package/src/AvatarGroup/AvatarGroup.tsx +15 -6
- package/src/AvatarGroup/AvatarGroupContext.ts +5 -3
- package/src/AvatarGroup/AvatarGroupOverflow.tsx +10 -4
- package/src/Banner/Banner.doc.mjs +13 -11
- package/src/Banner/Banner.test.tsx +102 -15
- package/src/Banner/Banner.tsx +72 -25
- package/src/BottomSheet/BottomSheet.test.tsx +123 -0
- package/src/BottomSheet/BottomSheet.tsx +17 -4
- package/src/BottomSheet/BottomSheetSwitcher.tsx +3 -2
- package/src/Breadcrumbs/BreadcrumbItem.tsx +9 -5
- package/src/Button/Button.doc.mjs +24 -1
- package/src/Button/Button.test.tsx +32 -4
- package/src/Button/Button.tsx +12 -5
- package/src/ButtonGroup/ButtonGroup.doc.mjs +10 -1
- package/src/ButtonGroup/ButtonGroup.test.tsx +404 -1
- package/src/ButtonGroup/ButtonGroup.tsx +23 -5
- package/src/Calendar/Calendar.doc.mjs +4 -3
- package/src/Calendar/Calendar.test.tsx +103 -0
- package/src/Calendar/Calendar.tsx +19 -16
- package/src/Calendar/getInitialFocusDate.test.ts +94 -0
- package/src/Calendar/getInitialFocusDate.ts +93 -0
- package/src/Calendar/styles.ts +49 -31
- package/src/Card/Card.doc.mjs +10 -7
- package/src/Card/Card.test.tsx +44 -19
- package/src/Card/Card.tsx +12 -32
- package/src/Carousel/Carousel.tsx +3 -2
- package/src/Chat/ChatComposerInput.tsx +5 -1
- package/src/Chat/ChatLayout.tsx +3 -2
- package/src/Chat/ChatMessageList.doc.mjs +9 -1
- package/src/Chat/ChatMessageList.test.tsx +46 -0
- package/src/Chat/ChatMessageList.tsx +28 -4
- package/src/Chat/ChatTokenizedText.tsx +17 -10
- package/src/Chat/useChatComposerTokens.ts +1 -1
- package/src/CheckboxInput/CheckboxInput.doc.mjs +2 -0
- package/src/CheckboxInput/CheckboxInput.test.tsx +15 -0
- package/src/CheckboxInput/CheckboxInput.tsx +8 -2
- package/src/ClickableCard/ClickableCard.tsx +3 -2
- package/src/CodeBlock/CodeBlock.doc.mjs +16 -4
- package/src/CodeBlock/CodeBlock.test.tsx +37 -0
- package/src/CodeBlock/CodeBlock.tsx +20 -4
- package/src/CodeBlock/highlightRanges.ts +1 -1
- package/src/CodeBlock/highlightStyles.ts +13 -13
- package/src/CommandPalette/CommandPaletteInput.tsx +3 -2
- package/src/CommandPalette/CommandPaletteItem.tsx +3 -2
- package/src/ContextMenu/ContextMenu.doc.mjs +5 -0
- package/src/ContextMenu/ContextMenu.tsx +4 -3
- package/src/DateInput/DateInput.doc.mjs +16 -0
- package/src/DateInput/DateInput.tsx +55 -2
- package/src/DateInput/DateInputTouch.test.tsx +146 -32
- package/src/DateInput/NativeDateField.test.tsx +635 -0
- package/src/DateInput/NativeDateField.tsx +641 -0
- package/src/DateInput/TouchDateField.tsx +108 -24
- package/src/DateInput/index.ts +1 -0
- package/src/DateInput/nativeDateSegments.ts +127 -0
- package/src/DateTimeInput/DateTimeInput.doc.mjs +18 -0
- package/src/DateTimeInput/DateTimeInput.test.tsx +1088 -0
- package/src/DateTimeInput/DateTimeInput.tsx +556 -24
- package/src/DateTimeInput/index.ts +1 -0
- package/src/Dialog/Dialog.doc.mjs +8 -3
- package/src/Dialog/Dialog.test.tsx +429 -2
- package/src/Dialog/Dialog.tsx +133 -58
- package/src/DropdownMenu/DropdownMenu.doc.mjs +6 -0
- package/src/DropdownMenu/DropdownMenuSubMenu.test.tsx +8 -5
- package/src/DropdownMenu/DropdownMenuSubMenu.tsx +8 -11
- package/src/Field/Field.doc.mjs +13 -2
- package/src/Field/FieldLabel.test.tsx +29 -0
- package/src/Field/FieldLabel.tsx +7 -0
- package/src/FileInput/FileInput.tsx +3 -2
- package/src/Heading/Heading.test.tsx +23 -1
- package/src/Heading/Heading.tsx +6 -2
- package/src/HoverCard/HoverCard.doc.mjs +13 -2
- package/src/HoverCard/HoverCard.test.tsx +154 -4
- package/src/HoverCard/HoverCard.tsx +143 -3
- package/src/HoverCard/useHoverCard.tsx +104 -33
- package/src/Indicator/CheckboxIndicator.tsx +14 -8
- package/src/Indicator/Indicator.doc.mjs +2 -0
- package/src/Item/Item.tsx +5 -4
- package/src/Kbd/Kbd.tsx +2 -19
- package/src/Layer/LayerDepthContext.tsx +62 -0
- package/src/Layer/index.ts +9 -0
- package/src/Layer/layerDismissalFamilies.test.tsx +359 -0
- package/src/Layer/layerDismissalInvariants.test.tsx +417 -0
- package/src/Layer/layerStack.ts +362 -0
- package/src/Layer/useLayer.test.tsx +62 -14
- package/src/Layer/useLayerDismissal.test.tsx +469 -0
- package/src/Layer/useLayerDismissal.ts +173 -0
- package/src/Layout/Layout.doc.mjs +2 -2
- package/src/Lightbox/Lightbox.doc.mjs +12 -0
- package/src/Lightbox/Lightbox.tsx +124 -102
- package/src/Link/Link.doc.mjs +39 -0
- package/src/Markdown/Markdown.doc.mjs +5 -0
- package/src/Markdown/Markdown.tsx +9 -4
- package/src/Markdown/incremental.test.ts +16 -2
- package/src/Markdown/index.ts +1 -0
- package/src/Markdown/parser.perf.test.ts +96 -1
- package/src/Markdown/parser.test.ts +178 -2
- package/src/Markdown/parser.ts +253 -32
- package/src/MobileNav/MobileNav.tsx +62 -36
- package/src/MoreMenu/MoreMenu.doc.mjs +7 -1
- package/src/MultiSelector/MultiSelector.doc.mjs +49 -1
- package/src/MultiSelector/MultiSelector.test.tsx +277 -0
- package/src/MultiSelector/MultiSelector.tsx +142 -11
- package/src/MultiSelector/index.ts +1 -0
- package/src/NavIcon/NavIcon.doc.mjs +8 -2
- package/src/NavIcon/NavIcon.test.tsx +9 -0
- package/src/NavIcon/NavIcon.tsx +5 -1
- package/src/NavMenu/NavHeadingMenu.tsx +3 -2
- package/src/NumberInput/NumberInput.doc.mjs +31 -7
- package/src/NumberInput/NumberInput.test.tsx +436 -8
- package/src/NumberInput/NumberInput.tsx +62 -114
- package/src/NumberInput/numberInputCommit.test.ts +72 -0
- package/src/NumberInput/numberInputCommit.ts +103 -0
- package/src/NumberInput/numberParser.docblock.test.ts +234 -0
- package/src/NumberInput/numberParser.test.ts +222 -0
- package/src/NumberInput/numberParser.ts +403 -0
- package/src/Outline/Outline.tsx +3 -2
- package/src/OverflowList/OverflowList.tsx +3 -2
- package/src/Overlay/Overlay.tsx +3 -2
- package/src/Pagination/Pagination.test.tsx +3 -2
- package/src/Popover/usePopover.tsx +31 -28
- package/src/PowerSearch/PowerSearch.doc.mjs +160 -28
- package/src/PowerSearch/PowerSearch.test.tsx +240 -1
- package/src/PowerSearch/PowerSearch.tsx +34 -5
- package/src/PowerSearch/PowerSearchEditPopover.test.tsx +288 -0
- package/src/PowerSearch/PowerSearchEditPopover.tsx +29 -2
- package/src/PowerSearch/PowerSearchValueEditor.test.tsx +111 -1
- package/src/PowerSearch/PowerSearchValueEditor.tsx +124 -10
- package/src/PowerSearch/types.ts +2 -0
- package/src/PowerSearch/usePowerSearchSource.test.ts +82 -2
- package/src/PowerSearch/usePowerSearchSource.ts +13 -3
- package/src/ProgressBar/ProgressBar.doc.mjs +42 -6
- package/src/ProgressBar/ProgressBar.test.tsx +24 -0
- package/src/ProgressBar/ProgressBar.tsx +28 -8
- package/src/Resizable/ResizeHandle.tsx +3 -2
- package/src/SegmentedControl/SegmentedControl.tsx +3 -2
- package/src/SelectableCard/SelectableCard.tsx +3 -2
- package/src/Selector/Selector.doc.mjs +26 -1
- package/src/Selector/Selector.test.tsx +311 -1
- package/src/Selector/Selector.tsx +139 -16
- package/src/SideNav/SideNav.doc.mjs +6 -6
- package/src/SideNav/SideNav.tsx +4 -2
- package/src/SideNav/SideNavHeading.tsx +12 -12
- package/src/SideNav/SideNavItem.tsx +4 -2
- package/src/Slider/Slider.test.tsx +106 -1
- package/src/Slider/Slider.tsx +55 -3
- package/src/Spinner/Spinner.test.tsx +147 -1
- package/src/Spinner/Spinner.tsx +120 -101
- package/src/StatusDot/StatusDot.doc.mjs +8 -2
- package/src/StatusDot/StatusDot.test.tsx +9 -0
- package/src/StatusDot/StatusDot.tsx +7 -1
- package/src/Stepper/Step.doc.mjs +98 -0
- package/src/Stepper/Step.tsx +1638 -0
- package/src/Stepper/StepStatus.ts +26 -0
- package/src/Stepper/Stepper.doc.mjs +370 -0
- package/src/Stepper/Stepper.test.tsx +1024 -0
- package/src/Stepper/Stepper.tsx +258 -0
- package/src/Stepper/StepperContext.ts +71 -0
- package/src/Stepper/index.ts +18 -0
- package/src/Stepper/stepper.stylex.ts +19 -0
- package/src/Switch/Switch.doc.mjs +2 -0
- package/src/Switch/Switch.test.tsx +10 -0
- package/src/Switch/Switch.tsx +6 -2
- package/src/TabList/Tab.doc.mjs +13 -1
- package/src/TabList/Tab.tsx +67 -7
- package/src/TabList/TabList.doc.mjs +22 -6
- package/src/TabList/TabList.test.tsx +559 -0
- package/src/TabList/TabList.tsx +490 -22
- package/src/TabList/TabListContext.ts +13 -2
- package/src/TabList/TabMenu.tsx +3 -2
- package/src/TabList/index.ts +6 -2
- package/src/Table/BaseTable.tsx +12 -4
- package/src/Table/Table.doc.mjs +9 -2
- package/src/Table/Table.test.tsx +132 -14
- package/src/Table/Table.tsx +3 -8
- package/src/Table/TableBody.doc.mjs +40 -0
- package/src/Table/TableFooter.doc.mjs +40 -0
- package/src/Table/TableHeader.doc.mjs +40 -0
- package/src/Table/TableRow.tsx +16 -5
- package/src/Table/plugins/filtering/useTableFiltering.test.tsx +44 -6
- package/src/Table/plugins/filtering/useTableFiltering.tsx +100 -4
- package/src/Table/plugins/groupedRows/useTableGroupedRows-perf.test.tsx +112 -0
- package/src/Table/plugins/groupedRows/useTableGroupedRows.test.tsx +100 -0
- package/src/Table/plugins/groupedRows/useTableGroupedRows.tsx +17 -8
- package/src/Table/plugins/pagination/useTablePagination.test.tsx +34 -4
- package/src/Table/plugins/pagination/useTablePagination.tsx +35 -3
- package/src/Table/plugins/rowExpansion/useTableRowExpansion.tsx +9 -2
- package/src/Table/plugins/rowStatus/useTableRowStatus.test.tsx +13 -7
- package/src/Table/plugins/rowStatus/useTableRowStatus.tsx +12 -3
- package/src/Table/plugins/selection/useTableSelection.test.tsx +76 -0
- package/src/Table/plugins/selection/useTableSelection.tsx +40 -7
- package/src/Table/plugins/stickyColumns/useTableStickyColumns.tsx +1 -2
- package/src/Table/types.ts +22 -4
- package/src/Table/useBaseTablePlugins.ts +5 -0
- package/src/Table/useTableGroupedRows.doc.mjs +5 -4
- package/src/Table/useTablePagination.doc.mjs +7 -0
- package/src/Table/useTableRowStatus.doc.mjs +1 -1
- package/src/Table/useTableSelection.doc.mjs +31 -0
- package/src/Text/Text.test.tsx +23 -1
- package/src/Text/Text.tsx +6 -2
- package/src/TextArea/TextArea.doc.mjs +8 -2
- package/src/TextArea/TextArea.test.tsx +11 -0
- package/src/TextArea/TextArea.tsx +15 -8
- package/src/TextInput/TextInput.doc.mjs +10 -0
- package/src/TextInput/TextInput.tsx +3 -2
- package/src/Thumbnail/Thumbnail.doc.mjs +1 -1
- package/src/TimeInput/TimeInput.tsx +2 -2
- package/src/Timestamp/Timestamp.test.tsx +18 -0
- package/src/Timestamp/Timestamp.tsx +4 -2
- package/src/Toast/Toast.doc.mjs +6 -0
- package/src/Toast/ToastViewport.tsx +17 -1
- package/src/Token/TokenLink.tsx +2 -2
- package/src/Tokenizer/Tokenizer.doc.mjs +27 -0
- package/src/Tokenizer/Tokenizer.tsx +4 -0
- package/src/Toolbar/Toolbar.doc.mjs +5 -0
- package/src/Tooltip/Tooltip.doc.mjs +5 -0
- package/src/Tooltip/Tooltip.test.tsx +32 -0
- package/src/Tooltip/Tooltip.tsx +5 -0
- package/src/Tooltip/useTooltip.tsx +47 -24
- package/src/TopNav/TopNavHeading.tsx +5 -4
- package/src/TopNav/TopNavMegaMenu.tsx +3 -2
- package/src/TopNav/TopNavMenu.tsx +4 -3
- package/src/Typeahead/BaseTypeahead.doc.mjs +11 -0
- package/src/Typeahead/BaseTypeahead.tsx +85 -33
- package/src/Typeahead/Typeahead.doc.mjs +5 -0
- package/src/Typeahead/Typeahead.test.tsx +49 -0
- package/src/Typeahead/Typeahead.tsx +3 -2
- package/src/hooks/index.ts +2 -0
- package/src/hooks/useContainerReveal.doc.mjs +2 -2
- package/src/hooks/useFocusTrap.test.tsx +14 -0
- package/src/hooks/useFocusTrap.ts +62 -111
- package/src/hooks/useFocusTrapEscapeShim.test.tsx +165 -0
- package/src/hooks/useHotkeys.ts +3 -18
- package/src/hooks/useMergedRefs.doc.mjs +79 -0
- package/src/hooks/useMergedRefs.test.tsx +62 -0
- package/src/hooks/useMergedRefs.ts +36 -0
- package/src/index.ts +1 -0
- package/src/raw-import.d.ts +14 -0
- package/src/theme/MediaTheme.doc.mjs +5 -5
- package/src/theme/derivedVarRegistry.test.ts +19 -3
- package/src/theme/derivedVarRegistry.ts +23 -4
- package/src/theme/generateThemeRules.test.ts +37 -0
- package/src/theme/syntax/tokens.ts +5 -2
- package/src/utils/groupItems.ts +12 -6
- package/src/utils/index.ts +1 -1
- package/src/utils/isApplePlatform.test.ts +61 -0
- package/src/utils/isApplePlatform.ts +37 -0
- package/src/utils/sharedResizeObserver.ts +10 -2
- package/src/utils/timeParser.test.ts +6 -1
- package/src/utils/timeParser.ts +35 -13
- package/src/__tests__/inputWidthContract.test.tsx +0 -69
package/dist/Dialog/Dialog.js
CHANGED
|
@@ -8,6 +8,13 @@
|
|
|
8
8
|
* @output Exports Dialog component, DialogProps, DialogVariant, DialogPurpose types
|
|
9
9
|
* @position Core implementation; consumed by index.ts, tested by Dialog.test.tsx
|
|
10
10
|
*
|
|
11
|
+
* The standard variant treats `width` as the preferred surface width, then
|
|
12
|
+
* clamps it to the dynamic viewport with spacing-token gutters so narrow
|
|
13
|
+
* viewports keep content and controls on screen without changing the public API.
|
|
14
|
+
* Fullscreen dialogs add safe-area protection to the default padding fallback
|
|
15
|
+
* while preserving explicit prop/theme padding overrides, and fade in without
|
|
16
|
+
* the centered-dialog translate/scale motion.
|
|
17
|
+
*
|
|
11
18
|
* SYNC: When modified, update these files to stay in sync:
|
|
12
19
|
* - /packages/core/src/Dialog/Dialog.doc.mjs (props table, features, implementation notes)
|
|
13
20
|
* - /packages/core/src/Dialog/Dialog.test.tsx (tests for new/changed behavior)
|
|
@@ -18,18 +25,18 @@
|
|
|
18
25
|
import { useCallback, useEffect, useId, useMemo, useRef } from 'react';
|
|
19
26
|
import * as stylex from '@stylexjs/stylex';
|
|
20
27
|
import { useScrollLock } from "../hooks/useScrollLock.js";
|
|
21
|
-
import {
|
|
22
|
-
import {
|
|
28
|
+
import { LayerDepthProvider } from "../Layer/LayerDepthContext.js";
|
|
29
|
+
import { useLayerDismissal } from "../Layer/useLayerDismissal.js";
|
|
23
30
|
import "../theme/tokens.stylex.js";
|
|
24
|
-
import { colorVars, radiusVars, durationVars, easeVars, shadowVars } from "../theme/tokens.stylex.js";
|
|
31
|
+
import { colorVars, radiusVars, durationVars, easeVars, shadowVars, spacingVars } from "../theme/tokens.stylex.js";
|
|
25
32
|
import { container } from "../Layout/container.stylex.js";
|
|
26
33
|
import { paddingStyles, containerPaddingInlineVarStyles, containerPaddingBlockStartVarStyles, containerPaddingBlockEndVarStyles, spacingStepToToken, overlayPaddingReset } from "../Layout/padding.stylex.js";
|
|
27
|
-
import { mergeProps
|
|
34
|
+
import { mergeProps } from "../utils/index.js";
|
|
28
35
|
import { devWarn } from "../utils/devWarning.js";
|
|
29
36
|
import { DialogContext } from "./DialogContext.js";
|
|
30
37
|
import { themeProps } from "../utils/themeProps.js";
|
|
31
38
|
import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
|
|
32
|
-
|
|
39
|
+
import { useMergedRefs } from "../hooks/useMergedRefs.js";
|
|
33
40
|
/**
|
|
34
41
|
* Calculate a directional translate offset for dialog entry animation.
|
|
35
42
|
* Returns a normalized vector from the trigger element toward the viewport
|
|
@@ -72,6 +79,27 @@ function getDialogDirection(triggerEl, distance = 16) {
|
|
|
72
79
|
*/
|
|
73
80
|
|
|
74
81
|
const enterDirectional = "x11lauxq-B";
|
|
82
|
+
const enterFullscreen = "x18re5ia-B";
|
|
83
|
+
const dialogFullscreenSafeAreaBlockStartPadding = `var(--astryx-dialog-padding-block-start, var(--astryx-dialog-padding, max(${spacingVars['--spacing-4']}, env(safe-area-inset-top, 0px))))`;
|
|
84
|
+
const dialogFullscreenSafeAreaBlockEndPadding = `var(--astryx-dialog-padding-block-end, var(--astryx-dialog-padding, max(${spacingVars['--spacing-4']}, env(safe-area-inset-bottom, 0px))))`;
|
|
85
|
+
const dialogFullscreenSafeAreaInlineStartPaddingLtr = `var(--astryx-dialog-padding-inline-start, var(--astryx-dialog-padding-inline, var(--astryx-dialog-padding, max(${spacingVars['--spacing-4']}, env(safe-area-inset-left, 0px)))))`;
|
|
86
|
+
const dialogFullscreenSafeAreaInlineStartPaddingRtl = `var(--astryx-dialog-padding-inline-start, var(--astryx-dialog-padding-inline, var(--astryx-dialog-padding, max(${spacingVars['--spacing-4']}, env(safe-area-inset-right, 0px)))))`;
|
|
87
|
+
const dialogFullscreenSafeAreaInlineEndPaddingLtr = `var(--astryx-dialog-padding-inline-end, var(--astryx-dialog-padding-inline, var(--astryx-dialog-padding, max(${spacingVars['--spacing-4']}, env(safe-area-inset-right, 0px)))))`;
|
|
88
|
+
const dialogFullscreenSafeAreaInlineEndPaddingRtl = `var(--astryx-dialog-padding-inline-end, var(--astryx-dialog-padding-inline, var(--astryx-dialog-padding, max(${spacingVars['--spacing-4']}, env(safe-area-inset-left, 0px)))))`;
|
|
89
|
+
|
|
90
|
+
/** @internal Verified by Dialog.test.tsx; not re-exported from the package entry point. */
|
|
91
|
+
export const dialogFullscreenSafeAreaPaddingContract = {
|
|
92
|
+
blockStart: dialogFullscreenSafeAreaBlockStartPadding,
|
|
93
|
+
blockEnd: dialogFullscreenSafeAreaBlockEndPadding,
|
|
94
|
+
inlineStart: {
|
|
95
|
+
ltr: dialogFullscreenSafeAreaInlineStartPaddingLtr,
|
|
96
|
+
rtl: dialogFullscreenSafeAreaInlineStartPaddingRtl
|
|
97
|
+
},
|
|
98
|
+
inlineEnd: {
|
|
99
|
+
ltr: dialogFullscreenSafeAreaInlineEndPaddingLtr,
|
|
100
|
+
rtl: dialogFullscreenSafeAreaInlineEndPaddingRtl
|
|
101
|
+
}
|
|
102
|
+
};
|
|
75
103
|
|
|
76
104
|
/**
|
|
77
105
|
* Dialog styles using native <dialog> element
|
|
@@ -117,6 +145,17 @@ const styles = {
|
|
|
117
145
|
kpwlN0: "x10a8y8t",
|
|
118
146
|
$$css: true
|
|
119
147
|
},
|
|
148
|
+
fullscreenOpen: {
|
|
149
|
+
kKVMdj: "xqcmdr3 x1aquc0h",
|
|
150
|
+
$$css: true
|
|
151
|
+
},
|
|
152
|
+
fullscreenSafeArea: {
|
|
153
|
+
kLKAdn: "x15ld1ci",
|
|
154
|
+
kGO01o: "x1rgxemn",
|
|
155
|
+
kZCmMZ: "xqmdmw x1i7f2ot",
|
|
156
|
+
kwRFfy: "x1by8st6 xtjjor6",
|
|
157
|
+
$$css: true
|
|
158
|
+
},
|
|
120
159
|
inner: {
|
|
121
160
|
k1xSpc: "x78zum5",
|
|
122
161
|
kXwgrk: "xdt5ytf",
|
|
@@ -139,26 +178,35 @@ const styles = {
|
|
|
139
178
|
$$css: true
|
|
140
179
|
}
|
|
141
180
|
};
|
|
142
|
-
|
|
143
|
-
|
|
181
|
+
const STANDARD_DIALOG_VIEWPORT_GUTTER = spacingVars['--spacing-4'];
|
|
182
|
+
const STANDARD_DIALOG_VIEWPORT_MAX_WIDTH = `calc(100dvw - ${STANDARD_DIALOG_VIEWPORT_GUTTER} - ${STANDARD_DIALOG_VIEWPORT_GUTTER})`;
|
|
183
|
+
const STANDARD_DIALOG_MAX_WIDTH = `min(100%, ${STANDARD_DIALOG_VIEWPORT_MAX_WIDTH})`;
|
|
184
|
+
function formatSizeValue(value) {
|
|
185
|
+
return typeof value === 'number' ? `${value}px` : value;
|
|
186
|
+
}
|
|
187
|
+
function resolveDialogSizing(width, maxHeight) {
|
|
188
|
+
return {
|
|
189
|
+
width: formatSizeValue(width),
|
|
190
|
+
maxWidth: STANDARD_DIALOG_MAX_WIDTH,
|
|
191
|
+
maxHeight: formatSizeValue(maxHeight)
|
|
192
|
+
};
|
|
193
|
+
}
|
|
144
194
|
const _temp = {
|
|
145
|
-
ks0D6T: "x95b5qq",
|
|
146
|
-
"$$css": true
|
|
147
|
-
};
|
|
148
|
-
const _temp2 = {
|
|
149
195
|
kogj98: "x1ghz6dp",
|
|
150
196
|
"$$css": true
|
|
151
197
|
};
|
|
152
198
|
const dynamicStyles = {
|
|
153
|
-
sizing: (width, maxHeight) => [
|
|
154
|
-
kzqmXN:
|
|
155
|
-
|
|
199
|
+
sizing: (width, maxWidth, maxHeight) => [{
|
|
200
|
+
kzqmXN: width != null ? "x5lhr3w" : width,
|
|
201
|
+
ks0D6T: maxWidth != null ? "xf68679" : maxWidth,
|
|
202
|
+
kskxy: maxHeight != null ? "x1jols5v" : maxHeight,
|
|
156
203
|
$$css: true
|
|
157
204
|
}, {
|
|
158
|
-
"--x-width": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(
|
|
159
|
-
"--x-
|
|
205
|
+
"--x-width": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(width),
|
|
206
|
+
"--x-maxWidth": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(maxWidth),
|
|
207
|
+
"--x-maxHeight": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(maxHeight)
|
|
160
208
|
}],
|
|
161
|
-
position: (top, insetInlineStart, insetInlineEnd, bottom) => [
|
|
209
|
+
position: (top, insetInlineStart, insetInlineEnd, bottom) => [_temp, {
|
|
162
210
|
k87sOh: top != null ? "xjbys53" : top,
|
|
163
211
|
kLqNvP: insetInlineStart != null ? "x1lxsm33" : insetInlineStart,
|
|
164
212
|
kt4wiu: insetInlineEnd != null ? "xqxgn94" : insetInlineEnd,
|
|
@@ -230,7 +278,7 @@ export function Dialog({
|
|
|
230
278
|
isInline = false,
|
|
231
279
|
onOpenChange,
|
|
232
280
|
width = 400,
|
|
233
|
-
maxHeight = '
|
|
281
|
+
maxHeight = '75dvh',
|
|
234
282
|
position,
|
|
235
283
|
variant = 'standard',
|
|
236
284
|
purpose = 'info',
|
|
@@ -247,6 +295,7 @@ export function Dialog({
|
|
|
247
295
|
const effectivePadding = padding ?? 4;
|
|
248
296
|
const paddingToken = spacingStepToToken[effectivePadding];
|
|
249
297
|
const isFullscreen = variant === 'fullscreen';
|
|
298
|
+
const standardSizing = isFullscreen ? null : resolveDialogSizing(width, maxHeight);
|
|
250
299
|
|
|
251
300
|
// Default accessible name: publish a title id through DialogContext so a
|
|
252
301
|
// DialogHeader applies it to its heading (mirrors AlertDialog's explicit
|
|
@@ -281,6 +330,7 @@ export function Dialog({
|
|
|
281
330
|
node.removeAttribute('aria-labelledby');
|
|
282
331
|
}
|
|
283
332
|
}, [titleId, hasConsumerName]);
|
|
333
|
+
const mergedDialogRef = useMergedRefs(ref, attachDialog);
|
|
284
334
|
|
|
285
335
|
// Capture the element that was focused when the dialog opened,
|
|
286
336
|
// for directional animation origin and focus restoration on close.
|
|
@@ -338,32 +388,26 @@ export function Dialog({
|
|
|
338
388
|
// Skip for inline rendering — no modal overlay to compensate for.
|
|
339
389
|
useScrollLock(isOpen && !isInline);
|
|
340
390
|
|
|
341
|
-
//
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
391
|
+
// Join the shared layer dismissal stack. The stack owns the Escape listener
|
|
392
|
+
// and routes each press to the top-most layer, so this dialog does not listen
|
|
393
|
+
// itself — that is what stops a modal opened from inside another modal (or a
|
|
394
|
+
// popover opened inside this one) from closing two layers on one press.
|
|
395
|
+
//
|
|
396
|
+
// A `required` dialog registers as `block`: it must not be dismissed, and the
|
|
397
|
+
// press must not fall through and dismiss a layer behind it either.
|
|
398
|
+
//
|
|
399
|
+
// Inline mode opts out — it renders dialog content in normal flow, with
|
|
400
|
+
// nothing layered over anything.
|
|
401
|
+
const {
|
|
402
|
+
shouldDismissOnCloseRequest
|
|
403
|
+
} = useLayerDismissal({
|
|
404
|
+
isActive: isOpen,
|
|
405
|
+
isEnabled: !isInline,
|
|
406
|
+
escapeBehavior: allowEscape ? 'close' : 'block',
|
|
407
|
+
onDismiss: () => {
|
|
408
|
+
onOpenChange(false);
|
|
349
409
|
}
|
|
350
|
-
|
|
351
|
-
if (event.key === 'Escape') {
|
|
352
|
-
// Ignore IME composition-cancel, and defer to any popover/menu layered
|
|
353
|
-
// on top of this dialog so a single Escape closes only the top-most
|
|
354
|
-
// layer (the popover's own focus trap handles it and stops propagation).
|
|
355
|
-
if (isImeKeyEvent(event) || hasActiveFocusTrapEscape()) {
|
|
356
|
-
return;
|
|
357
|
-
}
|
|
358
|
-
event.preventDefault();
|
|
359
|
-
if (allowEscape) {
|
|
360
|
-
onOpenChange(false);
|
|
361
|
-
}
|
|
362
|
-
}
|
|
363
|
-
};
|
|
364
|
-
dialog.addEventListener('keydown', handleKeyDown);
|
|
365
|
-
return () => dialog.removeEventListener('keydown', handleKeyDown);
|
|
366
|
-
}, [isOpen, isInline, allowEscape, onOpenChange]);
|
|
410
|
+
});
|
|
367
411
|
|
|
368
412
|
// Dev-time guardrail: an open modal should always have an accessible name.
|
|
369
413
|
// The header-title check reads the DOM, so this stays in an effect; the ref
|
|
@@ -388,31 +432,35 @@ export function Dialog({
|
|
|
388
432
|
}
|
|
389
433
|
};
|
|
390
434
|
|
|
391
|
-
//
|
|
435
|
+
// The native `cancel` event is the browser's own close-watcher firing: an
|
|
436
|
+
// Android back gesture, or a close request the stack never saw a press for.
|
|
437
|
+
// Escape presses the stack owns never arrive here — it preventDefault()s
|
|
438
|
+
// those, which suppresses the close watcher.
|
|
439
|
+
//
|
|
440
|
+
// Always preventDefault so the browser cannot close a controlled <dialog>
|
|
441
|
+
// behind React's back, then answer the request with the stack's own rules:
|
|
442
|
+
// only the top-most layer dismisses, a `required` dialog swallows it, and
|
|
443
|
+
// nothing dismisses while an IME composition is in progress.
|
|
392
444
|
const handleCancel = event => {
|
|
393
445
|
event.preventDefault();
|
|
394
|
-
|
|
395
|
-
// itself on the same Escape press.
|
|
396
|
-
if (hasActiveFocusTrapEscape()) {
|
|
446
|
+
if (!shouldDismissOnCloseRequest()) {
|
|
397
447
|
return;
|
|
398
448
|
}
|
|
399
449
|
if (allowEscape) {
|
|
400
450
|
onOpenChange(false);
|
|
401
451
|
}
|
|
402
452
|
};
|
|
403
|
-
|
|
404
|
-
// Shared inner content wrapper
|
|
405
453
|
const innerContent = /*#__PURE__*/_jsx("div", {
|
|
406
454
|
...stylex.props(styles.inner, ...container(useThemeDefault ? {
|
|
407
455
|
useThemeDefault: 'dialog',
|
|
408
|
-
maxHeight:
|
|
456
|
+
maxHeight: standardSizing?.maxHeight
|
|
409
457
|
} : {
|
|
410
458
|
paddingInnerX: paddingToken,
|
|
411
459
|
paddingInnerY: paddingToken,
|
|
412
460
|
paddingOuterX: paddingToken,
|
|
413
461
|
paddingOuterY: paddingToken,
|
|
414
|
-
maxHeight:
|
|
415
|
-
}), !useThemeDefault && effectivePadding !== 4 && paddingStyles[effectivePadding], !useThemeDefault && effectivePadding !== 4 && containerPaddingInlineVarStyles[effectivePadding], !useThemeDefault && effectivePadding !== 4 && containerPaddingBlockStartVarStyles[effectivePadding], !useThemeDefault && effectivePadding !== 4 && containerPaddingBlockEndVarStyles[effectivePadding]),
|
|
462
|
+
maxHeight: standardSizing?.maxHeight
|
|
463
|
+
}), !useThemeDefault && effectivePadding !== 4 && paddingStyles[effectivePadding], !useThemeDefault && effectivePadding !== 4 && containerPaddingInlineVarStyles[effectivePadding], !useThemeDefault && effectivePadding !== 4 && containerPaddingBlockStartVarStyles[effectivePadding], !useThemeDefault && effectivePadding !== 4 && containerPaddingBlockEndVarStyles[effectivePadding], isFullscreen && useThemeDefault && styles.fullscreenSafeArea),
|
|
416
464
|
children: /*#__PURE__*/_jsx(DialogContext, {
|
|
417
465
|
value: dialogContextValue,
|
|
418
466
|
children: children
|
|
@@ -435,23 +483,25 @@ export function Dialog({
|
|
|
435
483
|
...safeProps,
|
|
436
484
|
...mergeProps(themeProps('dialog', {
|
|
437
485
|
variant
|
|
438
|
-
}), stylex.props(styles.inlineWrapper, overlayPaddingReset.reset,
|
|
486
|
+
}), stylex.props(styles.inlineWrapper, overlayPaddingReset.reset, standardSizing && dynamicStyles.sizing(standardSizing.width, standardSizing.maxWidth, standardSizing.maxHeight), isFullscreen && styles.fullscreen, xstyle), className, style),
|
|
439
487
|
"data-testid": props['data-testid'],
|
|
440
|
-
children:
|
|
488
|
+
children: /*#__PURE__*/_jsx(LayerDepthProvider, {
|
|
489
|
+
children: innerContent
|
|
490
|
+
})
|
|
441
491
|
});
|
|
442
492
|
}
|
|
443
493
|
|
|
444
494
|
// --- Standard modal rendering path ---
|
|
445
495
|
|
|
446
496
|
return /*#__PURE__*/_jsx("dialog", {
|
|
447
|
-
ref:
|
|
497
|
+
ref: mergedDialogRef,
|
|
448
498
|
...safeProps,
|
|
449
499
|
...mergeProps(themeProps('dialog', {
|
|
450
500
|
variant
|
|
451
|
-
}), focusOutlineProps.focusVisible(styles.dialog, overlayPaddingReset.reset, isOpen && styles.open, styles.backdrop,
|
|
501
|
+
}), focusOutlineProps.focusVisible(styles.dialog, overlayPaddingReset.reset, isOpen && styles.open, styles.backdrop, standardSizing && dynamicStyles.sizing(standardSizing.width, standardSizing.maxWidth, standardSizing.maxHeight), hasPosition && (() => {
|
|
452
502
|
const o = resolveDialogPositionOffsets(position);
|
|
453
503
|
return dynamicStyles.position(o.top, o.insetInlineStart, o.insetInlineEnd, o.bottom);
|
|
454
|
-
})(), isFullscreen && styles.fullscreen, xstyle), className, style),
|
|
504
|
+
})(), isFullscreen && styles.fullscreen, isFullscreen && isOpen && styles.fullscreenOpen, xstyle), className, style),
|
|
455
505
|
onClick: handleClick,
|
|
456
506
|
onCancel: handleCancel,
|
|
457
507
|
"aria-modal": "true"
|
|
@@ -462,7 +512,9 @@ export function Dialog({
|
|
|
462
512
|
...(purpose === 'required' ? {
|
|
463
513
|
role: 'alertdialog'
|
|
464
514
|
} : undefined),
|
|
465
|
-
children:
|
|
515
|
+
children: /*#__PURE__*/_jsx(LayerDepthProvider, {
|
|
516
|
+
children: innerContent
|
|
517
|
+
})
|
|
466
518
|
});
|
|
467
519
|
}
|
|
468
520
|
Dialog.displayName = 'Dialog';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownMenuSubMenu.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuSubMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAEH,OAAc,EAOZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAoB5D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAwF5C,UAAU,4BAA6B,SAAQ,IAAI,CACjD,SAAS,EACT,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC,2DAA2D;IAC3D,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B,8CAA8C;IAC9C,KAAK,EAAE,SAAS,CAAC;IACjB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yEAAyE;IACzE,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,8CAA8C;IAC9C,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,mCAAmC;IACnC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,mCAAmC;IACnC,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,wBAAyB,SAAQ,4BAA4B;IAC5E;;;;;;;;OAQG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,wBAAwB,GAC9B,SAAS,
|
|
1
|
+
{"version":3,"file":"DropdownMenuSubMenu.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuSubMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAEH,OAAc,EAOZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAoB5D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAwF5C,UAAU,4BAA6B,SAAQ,IAAI,CACjD,SAAS,EACT,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC,2DAA2D;IAC3D,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B,8CAA8C;IAC9C,KAAK,EAAE,SAAS,CAAC;IACjB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yEAAyE;IACzE,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,8CAA8C;IAC9C,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,mCAAmC;IACnC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,mCAAmC;IACnC,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,wBAAyB,SAAQ,4BAA4B;IAC5E;;;;;;;;OAQG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,wBAAwB,GAC9B,SAAS,CAqVX;yBAvVe,mBAAmB"}
|
|
@@ -352,20 +352,21 @@ export function DropdownMenuSubMenu(props) {
|
|
|
352
352
|
}
|
|
353
353
|
}), [menuSize, close, menuCtx]);
|
|
354
354
|
const endAffordance = hasSpinner ? /*#__PURE__*/_jsx("span", {
|
|
355
|
-
...
|
|
355
|
+
...{
|
|
356
356
|
className: "x78zum5 x6s0dn4"
|
|
357
|
-
}
|
|
357
|
+
},
|
|
358
358
|
children: /*#__PURE__*/_jsx(Spinner, {
|
|
359
359
|
size: "sm"
|
|
360
360
|
})
|
|
361
361
|
}) : /*#__PURE__*/_jsx("span", {
|
|
362
|
-
...
|
|
362
|
+
...{
|
|
363
363
|
className: "x78zum5 x6s0dn4"
|
|
364
|
-
}
|
|
364
|
+
},
|
|
365
365
|
children: /*#__PURE__*/_jsx(Icon, {
|
|
366
366
|
icon: "chevronRight",
|
|
367
367
|
size: "sm",
|
|
368
|
-
color: "secondary"
|
|
368
|
+
color: "secondary",
|
|
369
|
+
...themeProps('dropdown-menu-indicator-icon')
|
|
369
370
|
})
|
|
370
371
|
});
|
|
371
372
|
const popoverXstyle = menuWidth ? flyoutStyles.popoverCustomWidth(menuWidth) : flyoutStyles.popover;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FieldLabel.d.ts","sourceRoot":"","sources":["../../src/Field/FieldLabel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAuB,KAAK,SAAS,EAAiB,MAAM,OAAO,CAAC;AAE3E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAU5C,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAgE5D,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,gBAAgB,CAAC;IAClE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACjC;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,OAAO,EACP,OAAO,EACP,YAAoB,EACpB,aAAqB,EACrB,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,SAAS,EACT,YAAY,EACZ,WAAW,EACX,aAAa,EACb,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,EACH,GAAG,IAAI,EACR,EAAE,eAAe,+
|
|
1
|
+
{"version":3,"file":"FieldLabel.d.ts","sourceRoot":"","sources":["../../src/Field/FieldLabel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAuB,KAAK,SAAS,EAAiB,MAAM,OAAO,CAAC;AAE3E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAU5C,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAgE5D,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,gBAAgB,CAAC;IAClE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACjC;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,OAAO,EACP,OAAO,EACP,YAAoB,EACpB,aAAqB,EACrB,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,SAAS,EACT,YAAY,EACZ,WAAW,EACX,aAAa,EACb,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,EACH,GAAG,IAAI,EACR,EAAE,eAAe,+BA6HjB;yBA/Ie,UAAU"}
|
package/dist/Field/FieldLabel.js
CHANGED
|
@@ -178,7 +178,15 @@ export function FieldLabel({
|
|
|
178
178
|
,
|
|
179
179
|
htmlFor: isGroupLabel ? undefined : inputID,
|
|
180
180
|
...rest,
|
|
181
|
-
...mergeProps(
|
|
181
|
+
...mergeProps(
|
|
182
|
+
// A control that knows what kind of label this is passes its own
|
|
183
|
+
// target down (CheckboxInput's `checkbox-label`, Switch's
|
|
184
|
+
// `switch-label`); it arrives as `className` and composes onto this
|
|
185
|
+
// one. The label itself does not describe its own placement — it
|
|
186
|
+
// cannot know it, and any encoding it guessed would be wrong for a
|
|
187
|
+
// caller that arranges labels differently (Field's
|
|
188
|
+
// `horizontal-labels`).
|
|
189
|
+
themeProps('field-label'), stylex.props(styles.label, isDisabled && styles.labelDisabled, isLabelHidden && styles.srOnly, xstyle), className, style),
|
|
182
190
|
children: labelContent
|
|
183
191
|
}), description && /*#__PURE__*/_jsx("span", {
|
|
184
192
|
ref: forwardsDescriptionClick ? descriptionRef : undefined,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileInput.d.ts","sourceRoot":"","sources":["../../src/FileInput/FileInput.tsx"],"names":[],"mappings":"AAsCA,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,UAAU,CAAC;AASlB,YAAY,EACV,WAAW,IAAI,eAAe,EAC9B,eAAe,IAAI,mBAAmB,GACvC,MAAM,UAAU,CAAC;AAElB,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"FileInput.d.ts","sourceRoot":"","sources":["../../src/FileInput/FileInput.tsx"],"names":[],"mappings":"AAsCA,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,UAAU,CAAC;AASlB,YAAY,EACV,WAAW,IAAI,eAAe,EAC9B,eAAe,IAAI,mBAAmB,GACvC,MAAM,UAAU,CAAC;AAElB,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAgO9C,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,SAAS,EACT,UAAU,GAAG,cAAc,GAAG,OAAO,CACtC;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,CAAC;IAC5B;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9D;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAC5B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,aAAqB,EACrB,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,MAAM,EACN,UAAkB,EAClB,OAAO,EACP,QAAQ,EACR,UAAkB,EAClB,eAAe,EACf,UAAkB,EAClB,SAAiB,EACjB,MAAM,EAAE,UAAU,EAClB,aAA0B,EAC1B,WAAW,EACX,WAAW,EACX,IAAc,EACd,UAAkB,EAClB,YAAY,EACZ,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,cAAc,+BA+ZhB;yBA1be,SAAS"}
|
|
@@ -27,9 +27,10 @@ import { useAnnounce } from "../hooks/useAnnounce.js";
|
|
|
27
27
|
import { useInputStatusIcon } from "../hooks/useInputStatusIcon.js";
|
|
28
28
|
import { useClickableContainer } from "../hooks/useClickableContainer.js";
|
|
29
29
|
import { useTooltip } from "../Tooltip/index.js";
|
|
30
|
-
import { mergeProps
|
|
30
|
+
import { mergeProps } from "../utils/index.js";
|
|
31
31
|
import { themeProps } from "../utils/themeProps.js";
|
|
32
32
|
import { useTranslator } from "../i18n/index.js";
|
|
33
|
+
import { useMergedRefs } from "../hooks/useMergedRefs.js";
|
|
33
34
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
34
35
|
function formatFileSize(bytes) {
|
|
35
36
|
if (bytes < 1024) {
|
|
@@ -510,7 +511,7 @@ export function FileInput({
|
|
|
510
511
|
})
|
|
511
512
|
}), /*#__PURE__*/_jsx("input", {
|
|
512
513
|
...rest,
|
|
513
|
-
ref:
|
|
514
|
+
ref: useMergedRefs(ref, inputRef),
|
|
514
515
|
id: id,
|
|
515
516
|
type: "file",
|
|
516
517
|
accept: accept,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../src/Heading/Heading.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAAyB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE7D,OAAO,KAAK,EACV,SAAS,EACT,WAAW,EACX,WAAW,EACX,SAAS,EACT,QAAQ,EACT,MAAM,gBAAgB,CAAC;AAiBxB,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../src/Heading/Heading.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAAyB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE7D,OAAO,KAAK,EACV,SAAS,EACT,WAAW,EACX,WAAW,EACX,SAAS,EACT,QAAQ,EACT,MAAM,gBAAgB,CAAC;AAiBxB,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,UAAU,CAAC;AAG7C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAO5C;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAEjD;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC;AAElE,MAAM,WAAW,YAAa,SAAQ,IAAI,CACxC,SAAS,CAAC,kBAAkB,CAAC,EAC7B,UAAU,CACX;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;IACpC;;;OAGG;IACH,KAAK,EAAE,YAAY,CAAC;IAEpB;;;;;;;;;;;;;OAaG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB;;;;;;;;;;;OAWG;IACH,kBAAkB,CAAC,EAAE,YAAY,CAAC;IAElC;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;;;OAMG;IACH,kBAAkB,CAAC,EAAE,OAAO,GAAG,cAAc,CAAC;IAE9C;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;OAEG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAWD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,IAAI,EACJ,kBAAkB,EAClB,KAAiB,EACjB,OAAiB,EACjB,QAAY,EACZ,kBAAyB,EACzB,SAAS,EACT,QAAQ,EACR,OAAiB,EACjB,UAAkB,EAClB,gBAAwB,EACxB,MAAM,EACN,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACT,EAAE,YAAY,+BAsFd;yBAzGe,OAAO"}
|
package/dist/Heading/Heading.js
CHANGED
|
@@ -21,7 +21,8 @@ import * as stylex from '@stylexjs/stylex';
|
|
|
21
21
|
import { colorStyles, sizeByLevelStyles, sizeByTypeStyles, defaultWeightByTypeStyles, displayStyles, justifyStyles, truncationStyles, wordBreakStyles, textWrapStyles, capsizeStyles, decorationStyles, truncationTooltipStyles } from "../Text/text.stylex.js";
|
|
22
22
|
import { useTruncation } from "../Text/useTruncation.js";
|
|
23
23
|
import { resolveStyleColor } from "../Text/Text.js";
|
|
24
|
-
import { mergeProps
|
|
24
|
+
import { mergeProps } from "../utils/index.js";
|
|
25
|
+
import { useMergedRefs } from "../hooks/useMergedRefs.js";
|
|
25
26
|
import { themeProps } from "../utils/themeProps.js";
|
|
26
27
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
27
28
|
const LazyXDSTooltip = /*#__PURE__*/lazy(async () => import("../Tooltip/Tooltip.js").then(mod => ({
|
|
@@ -107,13 +108,16 @@ export function Heading({
|
|
|
107
108
|
// Ref for the heading element (used as tooltip anchor)
|
|
108
109
|
const headingRef = useRef(null);
|
|
109
110
|
|
|
111
|
+
// Keep the merged ref stable across rerenders.
|
|
112
|
+
const mergedRef = useMergedRefs(ref, truncation.ref, headingRef);
|
|
113
|
+
|
|
110
114
|
// Build inline style for -webkit-line-clamp (dynamic value)
|
|
111
115
|
const inlineStyle = maxLines > 1 ? {
|
|
112
116
|
WebkitLineClamp: maxLines
|
|
113
117
|
} : undefined;
|
|
114
118
|
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
115
119
|
children: [/*#__PURE__*/_jsx(Component, {
|
|
116
|
-
ref:
|
|
120
|
+
ref: mergedRef,
|
|
117
121
|
...mergeProps(themeProps('heading', {
|
|
118
122
|
level,
|
|
119
123
|
color,
|
|
@@ -97,6 +97,12 @@ export interface HoverCardProps extends Pick<BaseProps, 'xstyle' | 'className' |
|
|
|
97
97
|
* - `true`: force-show the hover card (hover/focus hide is suppressed)
|
|
98
98
|
* - `false`: force-hide the hover card
|
|
99
99
|
* - `undefined`: uncontrolled — hover/focus triggers manage visibility
|
|
100
|
+
*
|
|
101
|
+
* A controlled hover card still takes Escape when it is the top-most layer,
|
|
102
|
+
* and answers by calling `onOpenChange(false)` without hiding itself —
|
|
103
|
+
* closing is your update's decision, exactly as for a controlled Dialog.
|
|
104
|
+
* Ignore the call and the card stays, and so does the press: nothing
|
|
105
|
+
* underneath dismisses.
|
|
100
106
|
*/
|
|
101
107
|
isOpen?: boolean;
|
|
102
108
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HoverCard.d.ts","sourceRoot":"","sources":["../../src/HoverCard/HoverCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAsB,KAAK,YAAY,EAAE,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAG7E,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,qBAAqB,EAC3B,MAAM,gBAAgB,CAAC;AACxB,OAAO,KAAK,EAAC,cAAc,EAAE,cAAc,EAAC,MAAM,mBAAmB,CAAC;AACtE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,YAAY,EACV,qBAAqB,EACrB,qBAAqB,GACtB,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"HoverCard.d.ts","sourceRoot":"","sources":["../../src/HoverCard/HoverCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAsB,KAAK,YAAY,EAAE,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAG7E,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,qBAAqB,EAC3B,MAAM,gBAAgB,CAAC;AACxB,OAAO,KAAK,EAAC,cAAc,EAAE,cAAc,EAAC,MAAM,mBAAmB,CAAC;AACtE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,YAAY,EACV,qBAAqB,EACrB,qBAAqB,GACtB,MAAM,gBAAgB,CAAC;AA6ExB,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,SAAS,EACT,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,OAAO,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,qBAAqB,CAAC;IAErC;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,qBAAqB,CAAC;IAErC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;;;;OAOG;IACH,kBAAkB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAEtC;;;;;;;;;;;OAWG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAiBD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,OAAO,EACP,SAAmB,EACnB,SAAoB,EACpB,KAAW,EACX,SAAe,EACf,YAAqB,EACrB,YAAqB,EACrB,SAAgB,EAChB,KAAK,EACL,YAAY,EACZ,kBAA2B,EAC3B,MAAM,EACN,aAAa,EACb,MAAM,EACN,SAAS,EACT,KAAK,GACN,EAAE,cAAc,GAAG,YAAY,CAoL/B;yBAtMe,SAAS"}
|
|
@@ -21,6 +21,45 @@ import { useHoverCard } from "./useHoverCard.js";
|
|
|
21
21
|
import "../theme/tokens.stylex.js";
|
|
22
22
|
import { colorVars, spacingVars } from "../theme/tokens.stylex.js";
|
|
23
23
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
24
|
+
// `aria-haspopup` and `aria-controls` are global, so any trigger may carry
|
|
25
|
+
// them. `aria-expanded` is not. This is the ARIA 1.2 "Supported States and
|
|
26
|
+
// Properties" list for it — deliberately the narrow reading: axe accepts the
|
|
27
|
+
// attribute on rather more roles, since it also allows every subclass of these,
|
|
28
|
+
// so a role outside this set is not necessarily a violation. Widening it is
|
|
29
|
+
// safe; the set is a floor, not the spec's ceiling. The same rule is applied in
|
|
30
|
+
// Chat/useTriggerMenu.tsx, which only emits the combobox attributes once the
|
|
31
|
+
// element is actually a combobox.
|
|
32
|
+
const EXPANDABLE_ROLES = new Set(['application', 'button', 'checkbox', 'columnheader', 'combobox', 'gridcell', 'link', 'listbox', 'menuitem', 'menuitemcheckbox', 'menuitemradio', 'row', 'rowheader', 'switch', 'tab', 'treeitem']);
|
|
33
|
+
const BUTTON_INPUT_TYPES = new Set(['button', 'submit', 'reset', 'image']);
|
|
34
|
+
|
|
35
|
+
// Deliberately partial, and unlisted elements are read as role-less: dropping
|
|
36
|
+
// aria-expanded where it might have been legal costs an AT user a state they
|
|
37
|
+
// can still infer, whereas emitting it where it is illegal is a critical
|
|
38
|
+
// aria-allowed-attr defect.
|
|
39
|
+
function supportsAriaExpanded(el) {
|
|
40
|
+
const explicit = el.getAttribute('role')?.trim().split(/\s+/)[0];
|
|
41
|
+
if (explicit) {
|
|
42
|
+
return EXPANDABLE_ROLES.has(explicit);
|
|
43
|
+
}
|
|
44
|
+
switch (el.tagName) {
|
|
45
|
+
case 'BUTTON':
|
|
46
|
+
case 'SUMMARY':
|
|
47
|
+
return true;
|
|
48
|
+
case 'A':
|
|
49
|
+
case 'AREA':
|
|
50
|
+
return el.hasAttribute('href');
|
|
51
|
+
case 'INPUT':
|
|
52
|
+
// The button-flavoured input types map to role="button"; every other
|
|
53
|
+
// type maps to a textbox-family role, which does not take it.
|
|
54
|
+
return BUTTON_INPUT_TYPES.has(el.type?.toLowerCase());
|
|
55
|
+
case 'SELECT':
|
|
56
|
+
// combobox when it is a single-line picker, listbox otherwise; both
|
|
57
|
+
// support aria-expanded.
|
|
58
|
+
return true;
|
|
59
|
+
default:
|
|
60
|
+
return false;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
24
63
|
/**
|
|
25
64
|
* Check if children are text-only (no React elements)
|
|
26
65
|
*/
|
|
@@ -115,8 +154,65 @@ export function HoverCard({
|
|
|
115
154
|
|
|
116
155
|
// Use combined ref for position + interaction
|
|
117
156
|
hoverCard.ref(firstChild);
|
|
157
|
+
if (label) {
|
|
158
|
+
// When named, the hover card is a dialog. The trigger should advertise the
|
|
159
|
+
// popup relationship with aria-haspopup/aria-expanded, not describe the
|
|
160
|
+
// trigger with the dialog's content (aria-describedby is for plain-text
|
|
161
|
+
// descriptions, not navigable regions). See #5049.
|
|
162
|
+
//
|
|
163
|
+
// aria-expanded only goes on a trigger whose role permits it. A role-less
|
|
164
|
+
// trigger (Timestamp's <time>/<span>) gets haspopup + controls, which are
|
|
165
|
+
// global, and no expanded state.
|
|
166
|
+
//
|
|
167
|
+
// Merge rather than overwrite: the trigger may already carry its own
|
|
168
|
+
// popup semantics (e.g. a menu button wrapped in a labelled HoverCard),
|
|
169
|
+
// so preserve the existing values and restore them on cleanup.
|
|
170
|
+
const existingHaspopup = firstChild.getAttribute('aria-haspopup');
|
|
171
|
+
const existingControls = firstChild.getAttribute('aria-controls');
|
|
172
|
+
const existingExpanded = firstChild.getAttribute('aria-expanded');
|
|
173
|
+
const canExpand = supportsAriaExpanded(firstChild);
|
|
174
|
+
firstChild.setAttribute('aria-haspopup', 'dialog');
|
|
175
|
+
// Only point aria-controls at the layer while it is open and in the DOM.
|
|
176
|
+
// While closed, useLayer leaves only an inert <template> marker, so the
|
|
177
|
+
// id would reference nothing. DateInput gates it the same way. The
|
|
178
|
+
// trigger's own aria-controls (if any) is preserved either way.
|
|
179
|
+
if (hoverCard.isOpen) {
|
|
180
|
+
firstChild.setAttribute('aria-controls', mergeIds(existingControls, hoverCard.id) ?? '');
|
|
181
|
+
} else if (existingControls) {
|
|
182
|
+
firstChild.setAttribute('aria-controls', existingControls);
|
|
183
|
+
} else {
|
|
184
|
+
firstChild.removeAttribute('aria-controls');
|
|
185
|
+
}
|
|
186
|
+
if (canExpand) {
|
|
187
|
+
firstChild.setAttribute('aria-expanded', String(hoverCard.isOpen));
|
|
188
|
+
} else if (existingExpanded) {
|
|
189
|
+
firstChild.setAttribute('aria-expanded', existingExpanded);
|
|
190
|
+
} else {
|
|
191
|
+
firstChild.removeAttribute('aria-expanded');
|
|
192
|
+
}
|
|
193
|
+
return () => {
|
|
194
|
+
hoverCard.ref(null);
|
|
195
|
+
if (existingHaspopup) {
|
|
196
|
+
firstChild.setAttribute('aria-haspopup', existingHaspopup);
|
|
197
|
+
} else {
|
|
198
|
+
firstChild.removeAttribute('aria-haspopup');
|
|
199
|
+
}
|
|
200
|
+
if (existingControls) {
|
|
201
|
+
firstChild.setAttribute('aria-controls', existingControls);
|
|
202
|
+
} else {
|
|
203
|
+
firstChild.removeAttribute('aria-controls');
|
|
204
|
+
}
|
|
205
|
+
if (existingExpanded) {
|
|
206
|
+
firstChild.setAttribute('aria-expanded', existingExpanded);
|
|
207
|
+
} else {
|
|
208
|
+
firstChild.removeAttribute('aria-expanded');
|
|
209
|
+
}
|
|
210
|
+
};
|
|
211
|
+
}
|
|
118
212
|
|
|
119
|
-
//
|
|
213
|
+
// Unnamed fallback: the popup remains role="group", which is not a dialog,
|
|
214
|
+
// so keep the previous description relationship until a naming decision is
|
|
215
|
+
// made for the no-label case (tracked in #5049).
|
|
120
216
|
const existingDescribedBy = firstChild.getAttribute('aria-describedby');
|
|
121
217
|
firstChild.setAttribute('aria-describedby', mergeIds(existingDescribedBy, hoverCard.describedBy) ?? '');
|
|
122
218
|
return () => {
|
|
@@ -127,7 +223,7 @@ export function HoverCard({
|
|
|
127
223
|
firstChild.removeAttribute('aria-describedby');
|
|
128
224
|
}
|
|
129
225
|
};
|
|
130
|
-
}, [textOnly, hoverCard.ref, hoverCard.describedBy]);
|
|
226
|
+
}, [textOnly, label, hoverCard.ref, hoverCard.id, hoverCard.isOpen, hoverCard.describedBy]);
|
|
131
227
|
|
|
132
228
|
// While closed, useLayer leaves only an inert <template> marker at this JSX
|
|
133
229
|
// position. When the card needs to open, it uses that marker to keep the
|
|
@@ -145,7 +241,12 @@ export function HoverCard({
|
|
|
145
241
|
children: [/*#__PURE__*/_jsx("span", {
|
|
146
242
|
ref: hoverCard.ref,
|
|
147
243
|
tabIndex: 0,
|
|
148
|
-
"aria-
|
|
244
|
+
"aria-haspopup": label ? 'dialog' : undefined,
|
|
245
|
+
"aria-controls": label && hoverCard.isOpen ? hoverCard.id : undefined
|
|
246
|
+
// No aria-expanded: this wrapper is a role-less <span>, and
|
|
247
|
+
// aria-expanded is invalid on it (see EXPANDABLE_ROLES above).
|
|
248
|
+
,
|
|
249
|
+
"aria-describedby": label ? undefined : hoverCard.describedBy,
|
|
149
250
|
...{
|
|
150
251
|
0: {
|
|
151
252
|
className: "xt0psk2"
|
|
@@ -78,6 +78,11 @@ export interface HoverCardOptions {
|
|
|
78
78
|
* - `true`: force-show the hover card (hover/focus hide is suppressed)
|
|
79
79
|
* - `false`: force-hide the hover card
|
|
80
80
|
* - `undefined`: uncontrolled — hover/focus triggers manage visibility
|
|
81
|
+
*
|
|
82
|
+
* A controlled hover card still takes Escape when it is the top-most layer,
|
|
83
|
+
* and answers by calling `onHide` without hiding itself — closing is your
|
|
84
|
+
* update's decision, exactly as for a controlled Dialog. Ignore the call and
|
|
85
|
+
* the card stays, and so does the press: nothing underneath dismisses.
|
|
81
86
|
*/
|
|
82
87
|
isOpen?: boolean;
|
|
83
88
|
/**
|
|
@@ -119,10 +124,22 @@ export interface HoverCardReturn {
|
|
|
119
124
|
*/
|
|
120
125
|
anchorId: string;
|
|
121
126
|
/**
|
|
122
|
-
* ID for
|
|
123
|
-
*
|
|
127
|
+
* Unique ID for the hover card container.
|
|
128
|
+
* Useful for `aria-controls` or `aria-owns` on the trigger.
|
|
129
|
+
*/
|
|
130
|
+
id: string;
|
|
131
|
+
/**
|
|
132
|
+
* Deprecated alias of `id`. Kept for backwards compatibility; prefer `id`.
|
|
124
133
|
*/
|
|
125
134
|
describedBy: string;
|
|
135
|
+
/**
|
|
136
|
+
* Whether the hover card is currently open.
|
|
137
|
+
* Useful for driving `aria-expanded` on the trigger — but only when the
|
|
138
|
+
* trigger's role permits it (`button`, `link`, `combobox`, …). On a role-less
|
|
139
|
+
* trigger `aria-expanded` is invalid; use `aria-haspopup`/`aria-controls`
|
|
140
|
+
* alone there.
|
|
141
|
+
*/
|
|
142
|
+
isOpen: boolean;
|
|
126
143
|
/**
|
|
127
144
|
* Render function for hover card content.
|
|
128
145
|
* Returns anchor-positioned popover element.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useHoverCard.d.ts","sourceRoot":"","sources":["../../src/HoverCard/useHoverCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAEH,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,KAAK,kBAAkB,EACvB,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAEL,KAAK,iBAAiB,EACvB,MAAM,0BAA0B,CAAC;
|
|
1
|
+
{"version":3,"file":"useHoverCard.d.ts","sourceRoot":"","sources":["../../src/HoverCard/useHoverCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAEH,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,KAAK,kBAAkB,EACvB,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAEL,KAAK,iBAAiB,EACvB,MAAM,0BAA0B,CAAC;AA6BlC;;GAEG;AACH,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEhE;;GAEG;AACH,MAAM,MAAM,qBAAqB,GAAG,iBAAiB,CAAC;AAEtD,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,qBAAqB,CAAC;IAErC;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,qBAAqB,CAAC;IAErC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,GAAG,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAE9B;;;OAGG;IACH,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEtC;;;;OAIG;IACH,cAAc,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEzC;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;;;;;OAMG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;;;OAOG;IACH,eAAe,EAAE,CACf,QAAQ,EAAE,SAAS,EACnB,KAAK,CAAC,EAAE,IAAI,CAAC,kBAAkB,EAAE,aAAa,CAAC,KAC5C,SAAS,CAAC;IAEf;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;IAEjB;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;CAClB;AAyBD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,YAAY,CAAC,OAAO,GAAE,gBAAqB,GAAG,eAAe,CAib5E"}
|