@astryxdesign/core 0.4.6 → 0.4.7-canary.20bae6c
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 +36 -0
- 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/AvatarGroup/AvatarGroup.d.ts.map +1 -1
- package/dist/AvatarGroup/AvatarGroup.js +3 -2
- package/dist/BottomSheet/BottomSheet.d.ts +1 -0
- package/dist/BottomSheet/BottomSheet.d.ts.map +1 -1
- package/dist/BottomSheet/BottomSheet.js +54 -15
- package/dist/BottomSheet/BottomSheetEdgeTint.d.ts +6 -0
- package/dist/BottomSheet/BottomSheetEdgeTint.d.ts.map +1 -0
- package/dist/BottomSheet/BottomSheetEdgeTint.js +62 -0
- package/dist/BottomSheet/BottomSheetPanel.d.ts.map +1 -1
- package/dist/BottomSheet/BottomSheetPanel.js +1 -0
- package/dist/BottomSheet/BottomSheetSwitcher.d.ts +1 -0
- package/dist/BottomSheet/BottomSheetSwitcher.d.ts.map +1 -1
- package/dist/BottomSheet/BottomSheetSwitcher.js +13 -6
- package/dist/BottomSheet/useSheetGestures.d.ts.map +1 -1
- package/dist/BottomSheet/useSheetGestures.js +23 -5
- package/dist/Breadcrumbs/BreadcrumbItem.d.ts.map +1 -1
- package/dist/Breadcrumbs/BreadcrumbItem.js +11 -10
- package/dist/ButtonGroup/ButtonGroup.d.ts.map +1 -1
- package/dist/ButtonGroup/ButtonGroup.js +12 -4
- package/dist/Calendar/Calendar.d.ts +3 -1
- package/dist/Calendar/Calendar.d.ts.map +1 -1
- package/dist/Calendar/Calendar.js +13 -14
- 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/Carousel/Carousel.d.ts.map +1 -1
- package/dist/Carousel/Carousel.js +3 -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/CheckboxInput/CheckboxInput.d.ts.map +1 -1
- package/dist/CheckboxInput/CheckboxInput.js +3 -2
- package/dist/ClickableCard/ClickableCard.d.ts.map +1 -1
- package/dist/ClickableCard/ClickableCard.js +3 -3
- 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.map +1 -1
- package/dist/DateInput/DateInput.js +3 -2
- package/dist/DateInput/TouchDateField.d.ts.map +1 -1
- package/dist/DateInput/TouchDateField.js +34 -1
- package/dist/DateTimeInput/DateTimeInput.d.ts.map +1 -1
- package/dist/DateTimeInput/DateTimeInput.js +3 -2
- package/dist/Dialog/Dialog.d.ts +7 -1
- package/dist/Dialog/Dialog.d.ts.map +1 -1
- package/dist/Dialog/Dialog.js +89 -58
- 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/useHoverCard.d.ts +5 -0
- package/dist/HoverCard/useHoverCard.d.ts.map +1 -1
- package/dist/HoverCard/useHoverCard.js +67 -25
- 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 +10 -3
- 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/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 +149 -23
- 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 +15 -1
- package/dist/MultiSelector/MultiSelector.d.ts.map +1 -1
- package/dist/MultiSelector/MultiSelector.js +17 -6
- package/dist/MultiSelector/index.d.ts +1 -1
- package/dist/MultiSelector/index.d.ts.map +1 -1
- package/dist/NavMenu/NavHeadingMenu.d.ts.map +1 -1
- package/dist/NavMenu/NavHeadingMenu.js +3 -2
- 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.map +1 -1
- package/dist/PowerSearch/PowerSearch.js +3 -4
- 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.map +1 -1
- package/dist/Selector/Selector.js +5 -0
- package/dist/SideNav/SideNav.d.ts.map +1 -1
- package/dist/SideNav/SideNav.js +4 -3
- 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 +3 -3
- 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 +3 -2
- package/dist/TabList/Tab.d.ts.map +1 -1
- package/dist/TabList/Tab.js +5 -1
- package/dist/TabList/TabList.d.ts.map +1 -1
- package/dist/TabList/TabList.js +3 -3
- package/dist/Table/BaseTable.d.ts.map +1 -1
- package/dist/Table/BaseTable.js +4 -1
- 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/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 +3 -2
- 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/Token/TokenLink.d.ts.map +1 -1
- package/dist/Token/TokenLink.js +2 -2
- 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/TopNavMegaMenu.d.ts.map +1 -1
- package/dist/TopNav/TopNavMegaMenu.js +3 -3
- package/dist/Typeahead/BaseTypeahead.d.ts.map +1 -1
- package/dist/Typeahead/BaseTypeahead.js +3 -3
- package/dist/Typeahead/Typeahead.d.ts.map +1 -1
- package/dist/Typeahead/Typeahead.js +3 -2
- package/dist/astryx.css +43 -1
- 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 +52 -91
- package/dist/hooks/useHotkeys.d.ts.map +1 -1
- package/dist/hooks/useHotkeys.js +10 -3
- package/dist/hooks/useListFocus.d.ts +5 -2
- package/dist/hooks/useListFocus.d.ts.map +1 -1
- package/dist/hooks/useListFocus.js +12 -6
- 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/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 +27 -7
- package/locales/pseudo.json +15 -0
- package/package.json +8 -3
- 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 +2 -1
- package/src/AvatarGroup/AvatarGroup.tsx +3 -2
- package/src/BottomSheet/BottomSheet.test.tsx +123 -0
- package/src/BottomSheet/BottomSheet.tsx +36 -4
- package/src/BottomSheet/BottomSheetEdgeTint.test.tsx +225 -0
- package/src/BottomSheet/BottomSheetEdgeTint.tsx +82 -0
- package/src/BottomSheet/BottomSheetPanel.test.tsx +66 -0
- package/src/BottomSheet/BottomSheetPanel.tsx +19 -0
- package/src/BottomSheet/BottomSheetSwitcher.tsx +16 -2
- package/src/BottomSheet/useSheetGestures.test.ts +27 -0
- package/src/BottomSheet/useSheetGestures.ts +25 -5
- package/src/Breadcrumbs/BreadcrumbItem.tsx +9 -5
- package/src/Button/Button.doc.mjs +22 -0
- package/src/ButtonGroup/ButtonGroup.doc.mjs +7 -1
- package/src/ButtonGroup/ButtonGroup.test.tsx +185 -1
- package/src/ButtonGroup/ButtonGroup.tsx +11 -3
- package/src/Calendar/Calendar.doc.mjs +4 -3
- package/src/Calendar/Calendar.test.tsx +52 -0
- package/src/Calendar/Calendar.tsx +18 -15
- package/src/Calendar/getInitialFocusDate.test.ts +94 -0
- package/src/Calendar/getInitialFocusDate.ts +93 -0
- package/src/Carousel/Carousel.tsx +3 -2
- 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/CheckboxInput/CheckboxInput.tsx +3 -2
- package/src/ClickableCard/ClickableCard.tsx +3 -2
- package/src/CodeBlock/CodeBlock.doc.mjs +6 -0
- 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.tsx +3 -2
- package/src/DateInput/DateInputTouch.test.tsx +36 -0
- package/src/DateInput/TouchDateField.tsx +35 -1
- package/src/DateTimeInput/DateTimeInput.tsx +2 -2
- package/src/Dialog/Dialog.doc.mjs +8 -3
- package/src/Dialog/Dialog.test.tsx +261 -1
- package/src/Dialog/Dialog.tsx +109 -58
- package/src/DropdownMenu/DropdownMenu.doc.mjs +6 -0
- package/src/Field/Field.doc.mjs +13 -2
- 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 +5 -0
- package/src/HoverCard/HoverCard.tsx +6 -0
- package/src/HoverCard/useHoverCard.tsx +81 -30
- package/src/Item/Item.tsx +5 -4
- package/src/Kbd/Kbd.test.tsx +17 -0
- package/src/Kbd/Kbd.tsx +10 -3
- 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/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/index.ts +1 -0
- package/src/Markdown/parser.perf.test.ts +71 -1
- package/src/Markdown/parser.test.ts +145 -2
- package/src/Markdown/parser.ts +208 -22
- package/src/MobileNav/MobileNav.tsx +62 -36
- package/src/MoreMenu/MoreMenu.doc.mjs +7 -1
- package/src/MultiSelector/MultiSelector.doc.mjs +27 -0
- package/src/MultiSelector/MultiSelector.test.tsx +105 -0
- package/src/MultiSelector/MultiSelector.tsx +50 -6
- package/src/MultiSelector/index.ts +1 -0
- package/src/NavMenu/NavHeadingMenu.tsx +3 -2
- package/src/NumberInput/NumberInput.doc.mjs +5 -0
- package/src/Outline/Outline.tsx +3 -2
- package/src/OverflowList/OverflowList.tsx +3 -2
- package/src/Overlay/Overlay.tsx +3 -2
- package/src/Popover/Popover.test.tsx +27 -1
- package/src/Popover/usePopover.tsx +31 -28
- package/src/PowerSearch/PowerSearch.doc.mjs +26 -0
- package/src/PowerSearch/PowerSearch.tsx +5 -2
- 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 +12 -1
- package/src/Selector/Selector.test.tsx +21 -0
- package/src/Selector/Selector.tsx +11 -1
- package/src/SideNav/SideNav.doc.mjs +6 -6
- package/src/SideNav/SideNav.tsx +4 -2
- package/src/SideNav/SideNavItem.tsx +4 -2
- package/src/Slider/Slider.tsx +3 -2
- 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.tsx +3 -2
- package/src/TabList/Tab.tsx +5 -1
- package/src/TabList/TabList.test.tsx +21 -4
- package/src/TabList/TabList.tsx +3 -2
- package/src/Table/BaseTable.tsx +6 -3
- package/src/Table/Table.test.tsx +35 -0
- 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/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.tsx +3 -2
- 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.tsx +4 -2
- package/src/Toast/Toast.doc.mjs +6 -0
- package/src/Token/TokenLink.tsx +2 -2
- package/src/Tokenizer/Tokenizer.doc.mjs +16 -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/TopNavMegaMenu.tsx +3 -2
- package/src/Typeahead/BaseTypeahead.tsx +3 -2
- package/src/Typeahead/Typeahead.doc.mjs +5 -0
- package/src/Typeahead/Typeahead.tsx +3 -2
- package/src/__tests__/complexComponentContract.test.tsx +81 -0
- package/src/hooks/index.ts +2 -0
- package/src/hooks/useContainerReveal.doc.mjs +2 -2
- package/src/hooks/useFocusTrap.ts +54 -107
- package/src/hooks/useFocusTrapEscapeShim.test.tsx +165 -0
- package/src/hooks/useHotkeys.test.ts +18 -0
- package/src/hooks/useHotkeys.ts +10 -3
- package/src/hooks/useListFocus.doc.mjs +2 -2
- package/src/hooks/useListFocus.test.tsx +65 -3
- package/src/hooks/useListFocus.ts +15 -7
- 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/theme/MediaTheme.doc.mjs +5 -5
- package/src/utils/timeParser.test.ts +6 -1
- package/src/utils/timeParser.ts +35 -13
- package/src/__tests__/inputWidthContract.test.tsx +0 -69
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSheetGestures.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/useSheetGestures.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AAEH,OAAO,EAOL,KAAK,aAAa,EAClB,KAAK,UAAU,IAAI,eAAe,EAClC,KAAK,YAAY,IAAI,iBAAiB,EACtC,KAAK,SAAS,EACd,KAAK,OAAO,IAAI,YAAY,EAC7B,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"useSheetGestures.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/useSheetGestures.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AAEH,OAAO,EAOL,KAAK,aAAa,EAClB,KAAK,UAAU,IAAI,eAAe,EAClC,KAAK,YAAY,IAAI,iBAAiB,EACtC,KAAK,SAAS,EACd,KAAK,OAAO,IAAI,YAAY,EAC7B,MAAM,OAAO,CAAC;AA8If,MAAM,WAAW,uBAAuB;IACtC,0EAA0E;IAC1E,MAAM,EAAE,OAAO,CAAC;IAChB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,gFAAgF;IAChF,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB;;;;;;;;;;OAUG;IACH,WAAW,CAAC,EAAE,MAAM,MAAM,EAAE,CAAC;IAC7B,oEAAoE;IACpE,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,aAAa,CAAC;CACtB;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,aAAa,CAAC;IACrB,aAAa,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAChD,oBAAoB,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACzD,aAAa,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAClD,aAAa,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAClD,WAAW,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAChD,eAAe,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;CACrD;AAED,MAAM,WAAW,cAAc;IAC7B,GAAG,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IACxC,aAAa,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAChD,oBAAoB,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACzD,aAAa,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAClD,aAAa,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAClD,WAAW,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAChD,eAAe,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACpD,QAAQ,EAAE,CAAC,KAAK,EAAE,YAAY,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CACtD;AAED,MAAM,WAAW,sBAAsB;IACrC;;;;OAIG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7C,0EAA0E;IAC1E,YAAY,EAAE,iBAAiB,CAAC;IAChC,gEAAgE;IAChE,WAAW,EAAE,gBAAgB,CAAC;IAC9B;;;;OAIG;IACH,SAAS,EAAE,cAAc,CAAC;IAC1B;;;;;OAKG;IACH,cAAc,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC9C,kFAAkF;IAClF,UAAU,EAAE,MAAM,CAAC;IACnB,kEAAkE;IAClE,aAAa,EAAE,MAAM,CAAC;IACtB,+CAA+C;IAC/C,UAAU,EAAE,OAAO,CAAC;IACpB,mDAAmD;IACnD,WAAW,EAAE,MAAM,CAAC;IACpB,4EAA4E;IAC5E,uBAAuB,EAAE,MAAM,CAAC;IAChC,qEAAqE;IACrE,oBAAoB,EAAE,MAAM,GAAG,IAAI,CAAC;IACpC;;;;;;;OAOG;IACH,wBAAwB,EAAE,MAAM,IAAI,CAAC;IACrC;;;;OAIG;IACH,mBAAmB,EAAE,MAAM,CAAC;CAC7B;AASD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,MAAM,EACN,UAAiB,EACjB,sBAA0B,EAC1B,SAAS,EACT,WAAW,EACX,MAAM,EACN,cAAc,GACf,EAAE,uBAAuB,GAAG,sBAAsB,CAyoClD"}
|
|
@@ -95,6 +95,20 @@ const OVERSCROLL_MAX = 48;
|
|
|
95
95
|
// the scroll, large enough that a swipe merely coming to rest on the last pixel
|
|
96
96
|
// doesn't start a drag on jitter.
|
|
97
97
|
const CONTENT_END_HANDOFF_SLOP = 4;
|
|
98
|
+
// How far a finger resting on the body must travel before the pull becomes a
|
|
99
|
+
// sheet drag rather than a tap.
|
|
100
|
+
//
|
|
101
|
+
// This used to be zero: any downward movement promoted. A finger is never
|
|
102
|
+
// still, so tapping a control inside the sheet drifted a pixel or two and
|
|
103
|
+
// started a drag -- which suppresses the panel's transition, correctly, for as
|
|
104
|
+
// long as the sheet is tracking the finger. The close that the tap triggered
|
|
105
|
+
// then landed inside that window and cut instead of animating. A deliberate
|
|
106
|
+
// pull was unaffected; only a tap, and only a tap inside the sheet, since the
|
|
107
|
+
// scrim is outside the body and arms nothing.
|
|
108
|
+
//
|
|
109
|
+
// 8px is the conventional tap slop, a shade over iOS's own recognizer, and
|
|
110
|
+
// well under what a real pull covers in its first frames.
|
|
111
|
+
const DRAG_PROMOTION_SLOP = 8;
|
|
98
112
|
|
|
99
113
|
// Short haptic tick on detent settle where supported. iOS Safari doesn't
|
|
100
114
|
// expose navigator.vibrate, so this is a no-op there; skipped under
|
|
@@ -754,7 +768,7 @@ export function useSheetGestures({
|
|
|
754
768
|
return;
|
|
755
769
|
}
|
|
756
770
|
const delta = event.clientY - armed.startCoord;
|
|
757
|
-
if (delta >
|
|
771
|
+
if (delta > DRAG_PROMOTION_SLOP && armed.scroller.scrollTop <= 0) {
|
|
758
772
|
// Downward pull at the top: promote to a sheet drag, anchored at the
|
|
759
773
|
// original pointer-down position so the pull distance carries over.
|
|
760
774
|
armedBodyRef.current = null;
|
|
@@ -883,8 +897,8 @@ export function useSheetGestures({
|
|
|
883
897
|
// no longer scroll that way: at the top, a downward pull (delta > 0)
|
|
884
898
|
// collapses; at the bottom, an upward pull (delta < 0) expands. The
|
|
885
899
|
// opposite direction is a real scroll, so disarm and let it through.
|
|
886
|
-
const pullDownAtTop = armed.top && delta >
|
|
887
|
-
const pullUpAtBottom = armed.bottom && delta <
|
|
900
|
+
const pullDownAtTop = armed.top && delta > DRAG_PROMOTION_SLOP && atTop(scroller);
|
|
901
|
+
const pullUpAtBottom = armed.bottom && delta < -DRAG_PROMOTION_SLOP && atBottom(scroller);
|
|
888
902
|
if (pullDownAtTop || pullUpAtBottom) {
|
|
889
903
|
event.preventDefault();
|
|
890
904
|
touchDragRef.current = null;
|
|
@@ -993,11 +1007,15 @@ export function useSheetGestures({
|
|
|
993
1007
|
const contentProps = useMemo(() => ({
|
|
994
1008
|
style: {
|
|
995
1009
|
transform: activeOffset !== 0 ? `translateY(${activeOffset}px)` : undefined,
|
|
996
|
-
|
|
1010
|
+
// Gated on the sheet being up: suppression must not outlive the sheet
|
|
1011
|
+
// it was suppressing for. The host swaps the panel to its closing
|
|
1012
|
+
// state in whatever frame the dismissal lands, and a stale `none`
|
|
1013
|
+
// would apply to that transform too, cutting the exit.
|
|
1014
|
+
transition: isOpen && (isDragging || isScrollAreaReconciling || reducedMotion) ? 'none' : undefined,
|
|
997
1015
|
touchAction: 'none',
|
|
998
1016
|
overscrollBehavior: 'contain'
|
|
999
1017
|
}
|
|
1000
|
-
}), [activeOffset, isDragging, isScrollAreaReconciling, reducedMotion]);
|
|
1018
|
+
}), [activeOffset, isDragging, isOpen, isScrollAreaReconciling, reducedMotion]);
|
|
1001
1019
|
const handleProps = useMemo(() => ({
|
|
1002
1020
|
style: {
|
|
1003
1021
|
touchAction: 'none',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BreadcrumbItem.d.ts","sourceRoot":"","sources":["../../src/Breadcrumbs/BreadcrumbItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,KAAK,EAAE,EAOZ,KAAK,SAAS,EACd,KAAK,UAAU,EAChB,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"BreadcrumbItem.d.ts","sourceRoot":"","sources":["../../src/Breadcrumbs/BreadcrumbItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,KAAK,EAAE,EAOZ,KAAK,SAAS,EACd,KAAK,UAAU,EAChB,MAAM,OAAO,CAAC;AAWf,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAErD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAS5C,OAAO,EAGL,KAAK,gBAAgB,EACtB,MAAM,qCAAqC,CAAC;AAM7C,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,8BAA8B,CAAC;AAOrE,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAC/C,SAAS,CAAC,aAAa,CAAC,EACxB,SAAS,CACV;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC/C;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;;;;;;;;;OAaG;IACH,IAAI,CAAC,EAAE,kBAAkB,EAAE,GAAG,SAAS,CAAC;IACxC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,gBAAgB,CAAC;CAC7B;AAyHD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,cAAc,CAAC,EAC7B,GAAG,EACH,EAAE,EACF,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,SAAS,EAAE,aAAa,EACxB,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,IAAI,EACR,EAAE,mBAAmB,qBAsMrB;yBArNe,cAAc"}
|
|
@@ -24,10 +24,10 @@
|
|
|
24
24
|
import React, { use, useCallback, useId, useMemo, useRef, useEffect } from 'react';
|
|
25
25
|
import * as stylex from '@stylexjs/stylex';
|
|
26
26
|
import "../theme/tokens.stylex.js";
|
|
27
|
-
import { colorVars, spacingVars, typeScaleVars, radiusVars } from "../theme/tokens.stylex.js";
|
|
27
|
+
import { colorVars, spacingVars, typeScaleVars, radiusVars, fontWeightVars } from "../theme/tokens.stylex.js";
|
|
28
28
|
import { BreadcrumbContext } from "./Breadcrumbs.js";
|
|
29
29
|
import { useLinkComponent } from "../Link/useLinkComponent.js";
|
|
30
|
-
import { mergeProps
|
|
30
|
+
import { mergeProps } from "../utils/index.js";
|
|
31
31
|
import { themeProps } from "../utils/themeProps.js";
|
|
32
32
|
import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
|
|
33
33
|
import { Icon } from "../Icon/index.js";
|
|
@@ -38,7 +38,7 @@ import { layerAnimations } from "../Layer/layerAnimations.stylex.js";
|
|
|
38
38
|
import { renderDropdownItems } from "../DropdownMenu/renderDropdownItems.js";
|
|
39
39
|
import { DropdownMenuContext } from "../DropdownMenu/DropdownMenuContext.js";
|
|
40
40
|
import { MENU_ITEM_ROLES, MENU_ITEM_SELECTOR, MENU_BOUNDARY_SELECTOR } from "../DropdownMenu/menuItemRoles.js";
|
|
41
|
-
|
|
41
|
+
import { useMergedRefs } from "../hooks/useMergedRefs.js";
|
|
42
42
|
// =============================================================================
|
|
43
43
|
// Props
|
|
44
44
|
// =============================================================================
|
|
@@ -203,6 +203,7 @@ export function BreadcrumbItem({
|
|
|
203
203
|
};
|
|
204
204
|
}
|
|
205
205
|
});
|
|
206
|
+
const mergedItemRef = useMergedRefs(ref, liRef);
|
|
206
207
|
const content = /*#__PURE__*/_jsxs(_Fragment, {
|
|
207
208
|
children: [startIcon && /*#__PURE__*/_jsx("span", {
|
|
208
209
|
...{
|
|
@@ -213,7 +214,7 @@ export function BreadcrumbItem({
|
|
|
213
214
|
});
|
|
214
215
|
if (isCurrent) {
|
|
215
216
|
return /*#__PURE__*/_jsxs("li", {
|
|
216
|
-
ref:
|
|
217
|
+
ref: mergedItemRef,
|
|
217
218
|
...mergeProps(themeProps('breadcrumb-item', {
|
|
218
219
|
variant: ctx.variant
|
|
219
220
|
}), stylex.props(itemStyles.root, isSupporting ? itemStyles.supportingSize : itemStyles.defaultSize, xstyle), className, style),
|
|
@@ -240,10 +241,10 @@ export function BreadcrumbItem({
|
|
|
240
241
|
}) : /*#__PURE__*/_jsx("span", {
|
|
241
242
|
...{
|
|
242
243
|
0: {
|
|
243
|
-
className: "x78zum5 x6s0dn4 xzye2dw
|
|
244
|
+
className: "x78zum5 x6s0dn4 xzye2dw x2mo6ok x1tgivj0"
|
|
244
245
|
},
|
|
245
246
|
1: {
|
|
246
|
-
className: "x78zum5 x6s0dn4 xzye2dw
|
|
247
|
+
className: "x78zum5 x6s0dn4 xzye2dw x2mo6ok xv1l7n4"
|
|
247
248
|
}
|
|
248
249
|
}[!!isSupporting << 0],
|
|
249
250
|
"aria-current": "page",
|
|
@@ -255,7 +256,7 @@ export function BreadcrumbItem({
|
|
|
255
256
|
// Items without isCurrent set render as links (if href) or plain spans.
|
|
256
257
|
// The effect handles adding aria-current for auto-last detection.
|
|
257
258
|
return /*#__PURE__*/_jsxs("li", {
|
|
258
|
-
ref:
|
|
259
|
+
ref: mergedItemRef,
|
|
259
260
|
...mergeProps(themeProps('breadcrumb-item', {
|
|
260
261
|
variant: ctx.variant
|
|
261
262
|
}), stylex.props(itemStyles.root, isSupporting ? itemStyles.supportingSize : itemStyles.defaultSize, xstyle), className, style),
|
|
@@ -290,10 +291,10 @@ export function BreadcrumbItem({
|
|
|
290
291
|
ref: contentRef,
|
|
291
292
|
...{
|
|
292
293
|
0: {
|
|
293
|
-
className: "x78zum5 x6s0dn4 xzye2dw
|
|
294
|
+
className: "x78zum5 x6s0dn4 xzye2dw x2mo6ok x1tgivj0"
|
|
294
295
|
},
|
|
295
296
|
1: {
|
|
296
|
-
className: "x78zum5 x6s0dn4 xzye2dw
|
|
297
|
+
className: "x78zum5 x6s0dn4 xzye2dw x2mo6ok xv1l7n4"
|
|
297
298
|
}
|
|
298
299
|
}[!!isSupporting << 0],
|
|
299
300
|
children: content
|
|
@@ -408,7 +409,7 @@ function BreadcrumbMenuTrigger({
|
|
|
408
409
|
const menuContent = Array.isArray(menu) ? renderDropdownItems(menu) : menu;
|
|
409
410
|
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
410
411
|
children: [/*#__PURE__*/_jsxs("button", {
|
|
411
|
-
ref:
|
|
412
|
+
ref: useMergedRefs(ref, buttonRef, popover.triggerRef),
|
|
412
413
|
type: "button",
|
|
413
414
|
onClick: handleClick,
|
|
414
415
|
onKeyDown: handleKeyDown,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonGroup.d.ts","sourceRoot":"","sources":["../../src/ButtonGroup/ButtonGroup.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,EAAU,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE9C,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,WAAW,CAAC;AAE1C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAI9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,sBAAsB,EAAC,MAAM,sBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"ButtonGroup.d.ts","sourceRoot":"","sources":["../../src/ButtonGroup/ButtonGroup.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,EAAU,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE9C,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,WAAW,CAAC;AAE1C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAI9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,sBAAsB,EAAC,MAAM,sBAAsB,CAAC;AAQjE,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACjE,yCAAyC;IACzC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,WAAW,CAAC,EAAE,sBAAsB,CAAC;IAErC;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAwCD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,KAAK,EACL,WAA0B,EAC1B,IAAI,EAAE,QAAQ,EACd,UAAkB,EAClB,SAAkB,EAClB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,aAAa,EAAE,MAAM,EACrB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,gBAAgB,GAAG,SAAS,CA+C9B;yBA7De,WAAW"}
|
|
@@ -26,10 +26,10 @@ import "../theme/tokens.stylex.js";
|
|
|
26
26
|
import { radiusVars, shadowVars } from "../theme/tokens.stylex.js";
|
|
27
27
|
import { SizeProvider, useSize } from "../SizeContext/SizeContext.js";
|
|
28
28
|
import { useListFocus } from "../hooks/useListFocus.js";
|
|
29
|
-
import { mergeProps,
|
|
29
|
+
import { mergeProps, composeEventHandlers } from "../utils/index.js";
|
|
30
30
|
import { ButtonGroupContext } from "./ButtonGroupContext.js";
|
|
31
31
|
import { themeProps } from "../utils/themeProps.js";
|
|
32
|
-
|
|
32
|
+
import { useMergedRefs } from "../hooks/useMergedRefs.js";
|
|
33
33
|
// =============================================================================
|
|
34
34
|
// Props
|
|
35
35
|
// =============================================================================
|
|
@@ -131,6 +131,13 @@ export function ButtonGroup({
|
|
|
131
131
|
handleKeyDown
|
|
132
132
|
} = useListFocus({
|
|
133
133
|
itemSelector: 'button, [tabindex="0"]',
|
|
134
|
+
// A member's layer renders inline inside the group (useLayer does not
|
|
135
|
+
// portal it), so a key pressed in an open DropdownMenu bubbles here. The
|
|
136
|
+
// boundary is the group's own root or any layer, whichever is nearer to
|
|
137
|
+
// the target. Naming the group's own root is what keeps a group rendered
|
|
138
|
+
// inside a Popover or Toast working: bailing on any [popover] ancestor
|
|
139
|
+
// instead would swallow every arrow key it owns.
|
|
140
|
+
boundarySelector: '[role="group"], [popover]',
|
|
134
141
|
orientation
|
|
135
142
|
});
|
|
136
143
|
const contextValue = useMemo(() => ({
|
|
@@ -142,11 +149,12 @@ export function ButtonGroup({
|
|
|
142
149
|
children: /*#__PURE__*/_jsx(SizeProvider, {
|
|
143
150
|
value: size,
|
|
144
151
|
children: /*#__PURE__*/_jsx("div", {
|
|
145
|
-
ref:
|
|
152
|
+
ref: useMergedRefs(ref, listRef),
|
|
146
153
|
...props,
|
|
147
154
|
...mergeProps(themeProps('button-group', {
|
|
148
155
|
size,
|
|
149
|
-
orientation
|
|
156
|
+
orientation,
|
|
157
|
+
elevation
|
|
150
158
|
}), stylex.props(styles.group, orientation === 'vertical' && styles.vertical, elevationStyles[elevation], xstyle), className, style),
|
|
151
159
|
role: "group",
|
|
152
160
|
"aria-label": label,
|
|
@@ -41,7 +41,9 @@ interface CalendarBaseProps extends Omit<BaseProps<HTMLDivElement>, 'onChange' |
|
|
|
41
41
|
minRangeSpan?: number;
|
|
42
42
|
/**
|
|
43
43
|
* Controlled focus date (which month is visible).
|
|
44
|
-
* If not provided, defaults to selected date
|
|
44
|
+
* If not provided, defaults to the selected date, else today clamped into
|
|
45
|
+
* the `min`/`max` window (so a window that excludes today opens on the
|
|
46
|
+
* bound nearest to it, not on an all-disabled month).
|
|
45
47
|
*/
|
|
46
48
|
focusDate?: ISODateString;
|
|
47
49
|
/** Callback when visible month changes via navigation */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../src/Calendar/Calendar.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../src/Calendar/Calendar.tsx"],"names":[],"mappings":"AA6BA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAgD5C,YAAY,EACV,aAAa,EACb,SAAS,EACT,aAAa,EACb,SAAS,GACV,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EACV,aAAa,EACb,SAAS,EACT,aAAa,EACb,SAAS,EACV,MAAM,oBAAoB,CAAC;AAK5B,+CAA+C;AAE/C,MAAM,WAAW,cAAc;IAC7B,wEAAwE;IACxE,UAAU,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;CAC3C;AAID,UAAU,iBAAkB,SAAQ,IAAI,CACtC,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,GAAG,cAAc,CAC5B;IACC,kDAAkD;IAClD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,qDAAqD;IACrD,SAAS,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACtC,+CAA+C;IAC/C,cAAc,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IAEvB,4CAA4C;IAC5C,GAAG,CAAC,EAAE,aAAa,CAAC;IAEpB,4CAA4C;IAC5C,GAAG,CAAC,EAAE,aAAa,CAAC;IAEpB;;;OAGG;IACH,eAAe,CAAC,EAAE,aAAa,CAAC,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC;IAEzD;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,aAAa,CAAC;IAE1B,yDAAyD;IACzD,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,aAAa,KAAK,IAAI,CAAC;IAEvD;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;;;OAIG;IACH,YAAY,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;CAC1C;AAID,UAAU,mBAAoB,SAAQ,iBAAiB;IACrD,qBAAqB;IACrB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,aAAa,CAAC;IAE7B,qCAAqC;IACrC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,IAAI,KAAK,IAAI,CAAC;CAC9D;AAED,UAAU,kBAAmB,SAAQ,iBAAiB;IACpD,qBAAqB;IACrB,IAAI,EAAE,OAAO,CAAC;IAEd,0BAA0B;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CACvC;AAED,MAAM,MAAM,aAAa,GAAG,mBAAmB,GAAG,kBAAkB,CAAC;AAMrE;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CAAC,EAAC,GAAG,EAAE,GAAG,KAAK,EAAC,EAAE,aAAa,+BAsXtD;yBAtXe,QAAQ"}
|
|
@@ -11,6 +11,7 @@
|
|
|
11
11
|
*
|
|
12
12
|
* SYNC: When modified, update these files to stay in sync:
|
|
13
13
|
* - /packages/core/src/Calendar/Calendar.doc.mjs (props table, features, implementation notes)
|
|
14
|
+
* - /packages/core/src/Calendar/getInitialFocusDate.ts (which month the calendar opens on)
|
|
14
15
|
* - /packages/core/src/Calendar/Calendar.test.tsx (tests for new/changed behavior)
|
|
15
16
|
* - /packages/core/src/Calendar/index.ts (exports if types change)
|
|
16
17
|
* - /apps/storybook/stories/Calendar.stories.tsx (storybook stories)
|
|
@@ -26,6 +27,7 @@ import { calendarStyles, monthGridStyles, dayCellStyles, dayCellTheme } from "./
|
|
|
26
27
|
import { plainDateFromISO, plainDateToISO, plainDateToDate, plainDateToday, plainDateSetFirstOfMonth, plainDateAddMonths, plainDateAddDays, plainDateIsBefore, plainDateIsEqual, plainDateGetWeekNumber, plainDateFormat, DATE_FORMAT_WITH_WEEKDAY, DATE_FORMAT_MONTH_YEAR } from "../utils/plainDate.js";
|
|
27
28
|
import { mergeProps, composeEventHandlers, rtlStyles } from "../utils/index.js";
|
|
28
29
|
import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
|
|
30
|
+
import { getInitialFocusDate } from "./getInitialFocusDate.js";
|
|
29
31
|
import { computeDayCellState, computeRangeRounding, computePreviewRounding, computeDayNeighborContinuity, isEndpoint } from "./dayCellUtils.js";
|
|
30
32
|
|
|
31
33
|
// =============================================================================
|
|
@@ -114,20 +116,17 @@ export function Calendar({
|
|
|
114
116
|
// Determine effective value
|
|
115
117
|
const effectiveValue = value !== undefined ? value : internalValue;
|
|
116
118
|
|
|
117
|
-
// Focus date state (which month is visible)
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
}
|
|
129
|
-
return plainDateToday();
|
|
130
|
-
});
|
|
119
|
+
// Focus date state (which month is visible). Falls back to today, clamped
|
|
120
|
+
// into the min/max window so a window that doesn't contain today doesn't
|
|
121
|
+
// open on an all-disabled month.
|
|
122
|
+
const [internalFocusDate, setInternalFocusDate] = useState(() => getInitialFocusDate({
|
|
123
|
+
focusDate: focusDateProp,
|
|
124
|
+
value: effectiveValue,
|
|
125
|
+
min,
|
|
126
|
+
max,
|
|
127
|
+
numberOfMonths,
|
|
128
|
+
today
|
|
129
|
+
}));
|
|
131
130
|
|
|
132
131
|
// Use controlled focusDate if callback is provided, otherwise use internal state
|
|
133
132
|
const isControlledFocus = focusDateProp !== undefined && onFocusDateChange !== undefined;
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @file getInitialFocusDate.ts
|
|
3
|
+
* @input PlainDate utilities, min/max bounds, today
|
|
4
|
+
* @output Exports getInitialFocusDate — the month Calendar opens on
|
|
5
|
+
* @position Calendar-specific helper; used by Calendar.tsx
|
|
6
|
+
*
|
|
7
|
+
* SYNC: When modified, update:
|
|
8
|
+
* - /packages/core/src/Calendar/getInitialFocusDate.test.ts
|
|
9
|
+
* - /packages/core/src/Calendar/Calendar.tsx (the only caller)
|
|
10
|
+
*/
|
|
11
|
+
import type { ISODateString, DateRange } from '../utils/dateTypes';
|
|
12
|
+
import { type PlainDate } from '../utils/plainDate';
|
|
13
|
+
export interface InitialFocusDateOptions {
|
|
14
|
+
/** Controlled visible month, if the consumer supplied one. */
|
|
15
|
+
focusDate?: ISODateString;
|
|
16
|
+
/** Selected value (single date or range), controlled or uncontrolled. */
|
|
17
|
+
value?: ISODateString | DateRange;
|
|
18
|
+
/** Earliest selectable date. */
|
|
19
|
+
min?: ISODateString;
|
|
20
|
+
/** Latest selectable date. */
|
|
21
|
+
max?: ISODateString;
|
|
22
|
+
/** How many month panes the calendar renders (1 or 2). */
|
|
23
|
+
numberOfMonths: number;
|
|
24
|
+
/** Today, injected so the caller keeps a single memoized source of "now". */
|
|
25
|
+
today: PlainDate;
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* Picks the date whose month the calendar opens on.
|
|
29
|
+
*
|
|
30
|
+
* An explicit `focusDate` wins, then the selected value — both are the
|
|
31
|
+
* consumer's own instruction about where to look, so neither is second-guessed
|
|
32
|
+
* against `min`/`max`.
|
|
33
|
+
*
|
|
34
|
+
* Otherwise the calendar opens on today, clamped into the `min`/`max` window.
|
|
35
|
+
* Without the clamp a window that doesn't contain today (a 2019 audit range, a
|
|
36
|
+
* booking window opening next spring) opened on today's month with every day
|
|
37
|
+
* disabled, leaving prev/next clicking as the only way in.
|
|
38
|
+
*
|
|
39
|
+
* When clamping forward to `min`, that month leads: the whole selectable window
|
|
40
|
+
* runs ahead of it. When clamping back to `max`, the last pane lands on `max`'s
|
|
41
|
+
* month instead — with `numberOfMonths={2}` opening on `[max, max + 1]` would
|
|
42
|
+
* spend half the calendar on a month that is entirely out of bounds. That
|
|
43
|
+
* shift never crosses `min`'s month.
|
|
44
|
+
*/
|
|
45
|
+
export declare function getInitialFocusDate(options: InitialFocusDateOptions): PlainDate;
|
|
46
|
+
//# sourceMappingURL=getInitialFocusDate.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"getInitialFocusDate.d.ts","sourceRoot":"","sources":["../../src/Calendar/getInitialFocusDate.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAC,aAAa,EAAE,SAAS,EAAC,MAAM,oBAAoB,CAAC;AACjE,OAAO,EACL,KAAK,SAAS,EAMf,MAAM,oBAAoB,CAAC;AAE5B,MAAM,WAAW,uBAAuB;IACtC,8DAA8D;IAC9D,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,yEAAyE;IACzE,KAAK,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;IAClC,gCAAgC;IAChC,GAAG,CAAC,EAAE,aAAa,CAAC;IACpB,8BAA8B;IAC9B,GAAG,CAAC,EAAE,aAAa,CAAC;IACpB,0DAA0D;IAC1D,cAAc,EAAE,MAAM,CAAC;IACvB,6EAA6E;IAC7E,KAAK,EAAE,SAAS,CAAC;CAClB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,mBAAmB,CACjC,OAAO,EAAE,uBAAuB,GAC/B,SAAS,CAkCX"}
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* @file getInitialFocusDate.ts
|
|
5
|
+
* @input PlainDate utilities, min/max bounds, today
|
|
6
|
+
* @output Exports getInitialFocusDate — the month Calendar opens on
|
|
7
|
+
* @position Calendar-specific helper; used by Calendar.tsx
|
|
8
|
+
*
|
|
9
|
+
* SYNC: When modified, update:
|
|
10
|
+
* - /packages/core/src/Calendar/getInitialFocusDate.test.ts
|
|
11
|
+
* - /packages/core/src/Calendar/Calendar.tsx (the only caller)
|
|
12
|
+
*/
|
|
13
|
+
|
|
14
|
+
import { plainDateFromISO, plainDateSetFirstOfMonth, plainDateAddMonths, plainDateIsBefore, plainDateIsAfter } from "../utils/plainDate.js";
|
|
15
|
+
/**
|
|
16
|
+
* Picks the date whose month the calendar opens on.
|
|
17
|
+
*
|
|
18
|
+
* An explicit `focusDate` wins, then the selected value — both are the
|
|
19
|
+
* consumer's own instruction about where to look, so neither is second-guessed
|
|
20
|
+
* against `min`/`max`.
|
|
21
|
+
*
|
|
22
|
+
* Otherwise the calendar opens on today, clamped into the `min`/`max` window.
|
|
23
|
+
* Without the clamp a window that doesn't contain today (a 2019 audit range, a
|
|
24
|
+
* booking window opening next spring) opened on today's month with every day
|
|
25
|
+
* disabled, leaving prev/next clicking as the only way in.
|
|
26
|
+
*
|
|
27
|
+
* When clamping forward to `min`, that month leads: the whole selectable window
|
|
28
|
+
* runs ahead of it. When clamping back to `max`, the last pane lands on `max`'s
|
|
29
|
+
* month instead — with `numberOfMonths={2}` opening on `[max, max + 1]` would
|
|
30
|
+
* spend half the calendar on a month that is entirely out of bounds. That
|
|
31
|
+
* shift never crosses `min`'s month.
|
|
32
|
+
*/
|
|
33
|
+
export function getInitialFocusDate(options) {
|
|
34
|
+
const {
|
|
35
|
+
focusDate,
|
|
36
|
+
value,
|
|
37
|
+
min,
|
|
38
|
+
max,
|
|
39
|
+
numberOfMonths,
|
|
40
|
+
today
|
|
41
|
+
} = options;
|
|
42
|
+
if (focusDate) {
|
|
43
|
+
return plainDateFromISO(focusDate);
|
|
44
|
+
}
|
|
45
|
+
if (value) {
|
|
46
|
+
return plainDateFromISO(typeof value === 'string' ? value : value.start);
|
|
47
|
+
}
|
|
48
|
+
const minDate = min ? plainDateFromISO(min) : null;
|
|
49
|
+
const maxDate = max ? plainDateFromISO(max) : null;
|
|
50
|
+
if (minDate && plainDateIsBefore(today, minDate)) {
|
|
51
|
+
return minDate;
|
|
52
|
+
}
|
|
53
|
+
if (maxDate && plainDateIsAfter(today, maxDate)) {
|
|
54
|
+
const lastPaneOffset = Math.max(0, numberOfMonths - 1);
|
|
55
|
+
const shifted = plainDateAddMonths(plainDateSetFirstOfMonth(maxDate), -lastPaneOffset);
|
|
56
|
+
if (minDate && plainDateIsBefore(shifted, plainDateSetFirstOfMonth(minDate))) {
|
|
57
|
+
return minDate;
|
|
58
|
+
}
|
|
59
|
+
return shifted;
|
|
60
|
+
}
|
|
61
|
+
return today;
|
|
62
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../src/Carousel/Carousel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,EACL,KAAK,SAAS,EAOf,MAAM,OAAO,CAAC;AAef,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../src/Carousel/Carousel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,EACL,KAAK,SAAS,EAOf,MAAM,OAAO,CAAC;AAef,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAKhD;;;;GAIG;AACH,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,UAAU,IAAI,IAAI,CAAC;IACnB;;;OAGG;IACH,UAAU,IAAI,IAAI,CAAC;IACnB;;;;OAIG;IACH,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B;;;;OAIG;IACH,aAAa,IAAI,OAAO,CAAC;IACzB;;;OAGG;IACH,aAAa,IAAI,OAAO,CAAC;CAC1B;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC9D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACtC,kEAAkE;IAClE,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,GAAG,CAAC,EAAE,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACpC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AA+JD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,GAAG,EACH,SAAS,EACT,QAAQ,EACR,GAAO,EACP,UAAiB,EACjB,WAAkB,EAClB,OAAe,EACf,OAAe,EACf,OAAO,EACP,YAAY,EAAE,kBAAkB,EAChC,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,SAAS,EACb,EAAE,aAAa,+BAqRf;yBArSe,QAAQ"}
|
|
@@ -30,10 +30,10 @@ import { Icon } from "../Icon/index.js";
|
|
|
30
30
|
import { useLayer } from "../Layer/index.js";
|
|
31
31
|
import { useScrollOverflow } from "../hooks/useScrollOverflow.js";
|
|
32
32
|
import { isRtlElement } from "../hooks/isRtlElement.js";
|
|
33
|
-
import { mergeProps,
|
|
33
|
+
import { mergeProps, rtlStyles } from "../utils/index.js";
|
|
34
34
|
import { themeProps } from "../utils/themeProps.js";
|
|
35
35
|
import { useTranslator } from "../i18n/index.js";
|
|
36
|
-
|
|
36
|
+
import { useMergedRefs } from "../hooks/useMergedRefs.js";
|
|
37
37
|
/**
|
|
38
38
|
* Imperative control surface for the Carousel, accessed via the `handleRef`
|
|
39
39
|
* prop. Methods drive the same native-scroll machinery as the built-in
|
|
@@ -369,7 +369,7 @@ export function Carousel({
|
|
|
369
369
|
height: 'anchor-size(height)'
|
|
370
370
|
};
|
|
371
371
|
return /*#__PURE__*/_jsxs("div", {
|
|
372
|
-
ref:
|
|
372
|
+
ref: useMergedRefs(ref, layer.ref),
|
|
373
373
|
"data-testid": testId,
|
|
374
374
|
...htmlProps,
|
|
375
375
|
...mergeProps(themeProps('carousel'), stylex.props(styles.root, xstyle), className, style),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatLayout.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatLayout.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAkB,MAAM,OAAO,CAAC;AAGtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"ChatLayout.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatLayout.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAkB,MAAM,OAAO,CAAC;AAGtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAc5C,KAAK,OAAO,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAEnD,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAChE,yCAAyC;IACzC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB;;;;OAIG;IACH,YAAY,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IAEhC;;;;;;;;;;;OAWG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAEhD;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AA4KD,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,QAAQ,EACR,OAAoB,EACpB,UAAU,EACV,YAAY,EACZ,SAAS,EAAE,iBAAiB,EAC5B,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,IAAI,EACR,EAAE,eAAe,+BA4GjB;yBAzHe,UAAU"}
|
package/dist/Chat/ChatLayout.js
CHANGED
|
@@ -32,14 +32,14 @@ import { useMemo, useRef } from 'react';
|
|
|
32
32
|
import * as stylex from '@stylexjs/stylex';
|
|
33
33
|
import "../theme/tokens.stylex.js";
|
|
34
34
|
import { spacingVars } from "../theme/tokens.stylex.js";
|
|
35
|
-
import { mergeProps
|
|
35
|
+
import { mergeProps } from "../utils/index.js";
|
|
36
36
|
import { useChatStreamScroll } from "./useChatStreamScroll.js";
|
|
37
37
|
import { useChatNewMessages } from "./useChatNewMessages.js";
|
|
38
38
|
import { ChatLayoutScrollButton } from "./ChatLayoutScrollButton.js";
|
|
39
39
|
import { ChatLayoutContext } from "./ChatContext.js";
|
|
40
40
|
import { themeProps } from "../utils/themeProps.js";
|
|
41
41
|
import { useTranslator } from "../i18n/index.js";
|
|
42
|
-
|
|
42
|
+
import { useMergedRefs } from "../hooks/useMergedRefs.js";
|
|
43
43
|
// =============================================================================
|
|
44
44
|
// Types
|
|
45
45
|
// =============================================================================
|
|
@@ -253,7 +253,7 @@ export function ChatLayout({
|
|
|
253
253
|
value: layoutContext,
|
|
254
254
|
children: /*#__PURE__*/_jsxs("div", {
|
|
255
255
|
...rest,
|
|
256
|
-
ref:
|
|
256
|
+
ref: useMergedRefs(ref, rootRef),
|
|
257
257
|
"data-testid": testId,
|
|
258
258
|
...mergeProps(themeProps('chat-layout', {
|
|
259
259
|
density
|
|
@@ -6,7 +6,8 @@
|
|
|
6
6
|
*
|
|
7
7
|
* Renders a container with role="log" for chat message histories.
|
|
8
8
|
* Handles density context, configurable gap, empty state,
|
|
9
|
-
* a spacer that pushes messages to the bottom,
|
|
9
|
+
* a configurable spacer (align) that pushes messages to the bottom,
|
|
10
|
+
* and an infinite scroll sentinel.
|
|
10
11
|
*
|
|
11
12
|
* Auto-scroll and the scroll-to-bottom button are owned by
|
|
12
13
|
* ChatLayout. When used standalone (without a layout), the list
|
|
@@ -52,6 +53,23 @@ export interface ChatMessageListProps extends BaseProps<HTMLDivElement> {
|
|
|
52
53
|
* be grouped) and row spacing should be tuned separately from density.
|
|
53
54
|
*/
|
|
54
55
|
gap?: SpacingStep;
|
|
56
|
+
/**
|
|
57
|
+
* Vertical alignment of messages when the list is shorter than its
|
|
58
|
+
* container.
|
|
59
|
+
*
|
|
60
|
+
* - `'bottom'` (default): a spacer fills the free space and pushes
|
|
61
|
+
* messages to the bottom, so a short conversation sits just above the
|
|
62
|
+
* composer — the familiar messaging-app layout.
|
|
63
|
+
* - `'top'`: the spacer is omitted, so messages start at the top and grow
|
|
64
|
+
* downward — better for document-style or log-style lists.
|
|
65
|
+
*
|
|
66
|
+
* This only changes the resting position of a non-full list. Once messages
|
|
67
|
+
* overflow the container the spacer collapses to zero in both modes, so
|
|
68
|
+
* ChatLayout auto-scroll-to-bottom behavior is identical either way.
|
|
69
|
+
*
|
|
70
|
+
* @default 'bottom'
|
|
71
|
+
*/
|
|
72
|
+
align?: 'top' | 'bottom';
|
|
55
73
|
/**
|
|
56
74
|
* Whether an assistant message is actively streaming into the list.
|
|
57
75
|
*
|
|
@@ -71,7 +89,8 @@ export interface ChatMessageListProps extends BaseProps<HTMLDivElement> {
|
|
|
71
89
|
*
|
|
72
90
|
* Renders messages in a flex column with density-based spacing.
|
|
73
91
|
* Override gap to tune row spacing separately from density.
|
|
74
|
-
*
|
|
92
|
+
* By default a spacer pushes content to the bottom when the list isn't full;
|
|
93
|
+
* set `align='top'` to start messages at the top instead.
|
|
75
94
|
* Supports loading older messages via `scrollToTopAction`.
|
|
76
95
|
*
|
|
77
96
|
* Auto-scroll and the scroll-to-bottom button are owned by
|
|
@@ -86,7 +105,7 @@ export interface ChatMessageListProps extends BaseProps<HTMLDivElement> {
|
|
|
86
105
|
* </ChatMessageList>
|
|
87
106
|
* ```
|
|
88
107
|
*/
|
|
89
|
-
export declare function ChatMessageList({ children, emptyState, scrollToTopAction, density, gap, isStreaming, xstyle, className, style, 'data-testid': testId, ref, ...rest }: ChatMessageListProps): import("react").JSX.Element;
|
|
108
|
+
export declare function ChatMessageList({ children, emptyState, scrollToTopAction, density, gap, align, isStreaming, xstyle, className, style, 'data-testid': testId, ref, ...rest }: ChatMessageListProps): import("react").JSX.Element;
|
|
90
109
|
export declare namespace ChatMessageList {
|
|
91
110
|
var displayName: string;
|
|
92
111
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatMessageList.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatMessageList.tsx"],"names":[],"mappings":"AAIA
|
|
1
|
+
{"version":3,"file":"ChatMessageList.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatMessageList.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAC,KAAK,SAAS,EAA4C,MAAM,OAAO,CAAC;AAGhF,OAAO,EAEL,KAAK,WAAW,EAEjB,MAAM,eAAe,CAAC;AAGvB,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAGhD,MAAM,WAAW,oBAAqB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACrE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAExC;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;;OAKG;IACH,GAAG,CAAC,EAAE,WAAW,CAAC;IAElB;;;;;;;;;;;;;;;OAeG;IACH,KAAK,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAEzB;;;;;;;;;;;OAWG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AA4FD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,UAAU,EACV,iBAAiB,EACjB,OAAoB,EACpB,GAAG,EACH,KAAgB,EAChB,WAAmB,EACnB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,IAAI,EACR,EAAE,oBAAoB,+BAgGtB;yBA9Ge,eAAe"}
|
|
@@ -10,7 +10,8 @@
|
|
|
10
10
|
*
|
|
11
11
|
* Renders a container with role="log" for chat message histories.
|
|
12
12
|
* Handles density context, configurable gap, empty state,
|
|
13
|
-
* a spacer that pushes messages to the bottom,
|
|
13
|
+
* a configurable spacer (align) that pushes messages to the bottom,
|
|
14
|
+
* and an infinite scroll sentinel.
|
|
14
15
|
*
|
|
15
16
|
* Auto-scroll and the scroll-to-bottom button are owned by
|
|
16
17
|
* ChatLayout. When used standalone (without a layout), the list
|
|
@@ -124,7 +125,8 @@ const gapStyles = {
|
|
|
124
125
|
*
|
|
125
126
|
* Renders messages in a flex column with density-based spacing.
|
|
126
127
|
* Override gap to tune row spacing separately from density.
|
|
127
|
-
*
|
|
128
|
+
* By default a spacer pushes content to the bottom when the list isn't full;
|
|
129
|
+
* set `align='top'` to start messages at the top instead.
|
|
128
130
|
* Supports loading older messages via `scrollToTopAction`.
|
|
129
131
|
*
|
|
130
132
|
* Auto-scroll and the scroll-to-bottom button are owned by
|
|
@@ -145,6 +147,7 @@ export function ChatMessageList({
|
|
|
145
147
|
scrollToTopAction,
|
|
146
148
|
density = 'balanced',
|
|
147
149
|
gap,
|
|
150
|
+
align = 'bottom',
|
|
148
151
|
isStreaming = false,
|
|
149
152
|
xstyle,
|
|
150
153
|
className,
|
|
@@ -217,7 +220,7 @@ export function ChatMessageList({
|
|
|
217
220
|
children: /*#__PURE__*/_jsx(Spinner, {
|
|
218
221
|
size: "md"
|
|
219
222
|
})
|
|
220
|
-
}), /*#__PURE__*/_jsx("div", {
|
|
223
|
+
}), align === 'bottom' && /*#__PURE__*/_jsx("div", {
|
|
221
224
|
...{
|
|
222
225
|
className: "x98rzlu x2lwn1j"
|
|
223
226
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxInput.d.ts","sourceRoot":"","sources":["../../src/CheckboxInput/CheckboxInput.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAOL,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAS3C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAG9C,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AACtC,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"CheckboxInput.d.ts","sourceRoot":"","sources":["../../src/CheckboxInput/CheckboxInput.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAOL,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAS3C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAG9C,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AACtC,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAmFhD,QAAA,MAAM,iBAAiB;;;;;;;;;EASrB,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,iBAAiB,CAAC;AAE/D,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IACrE,wDAAwD;IACxD,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,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACxE;;OAEG;IACH,YAAY,CAAC,EAAE,CACb,OAAO,EAAE,OAAO,EAChB,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAC7B,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,KAAK,EAAE,OAAO,GAAG,eAAe,CAAC;IACjC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACpD;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACnD;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACjC;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB;AAOD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,QAAQ,EACR,YAAY,EACZ,SAAiB,EACjB,KAAK,EACL,UAAkB,EAClB,QAAQ,EACR,eAAe,EACf,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,IAAW,EACX,OAAO,EACP,MAAM,EACN,SAAS,EACT,MAAM,EACN,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,kBAAkB,+BAwMpB;yBAjOe,aAAa"}
|
|
@@ -23,13 +23,14 @@ import { FieldLabel } from "../Field/FieldLabel.js";
|
|
|
23
23
|
import { FieldStatus } from "../FieldStatus/FieldStatus.js";
|
|
24
24
|
import { Spinner } from "../Spinner/index.js";
|
|
25
25
|
import { useTooltip } from "../Tooltip/index.js";
|
|
26
|
-
import { mergeProps
|
|
26
|
+
import { mergeProps } from "../utils/index.js";
|
|
27
27
|
import { indicatorScope } from "../Indicator/indicator.markers.stylex.js";
|
|
28
28
|
import { useIndicatorFocusRing } from "../hooks/useIndicatorFocusRing.js";
|
|
29
29
|
import { useResolvedRequired } from "../hooks/useResolvedRequired.js";
|
|
30
30
|
import { useIndicator } from "../Indicator/index.js";
|
|
31
31
|
import { themeProps } from "../utils/themeProps.js";
|
|
32
32
|
import { CheckboxListContext } from "../CheckboxList/CheckboxListContext.js";
|
|
33
|
+
import { useMergedRefs } from "../hooks/useMergedRefs.js";
|
|
33
34
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
34
35
|
const styles = {
|
|
35
36
|
container: {
|
|
@@ -231,7 +232,7 @@ export function CheckboxInput({
|
|
|
231
232
|
...focusProps,
|
|
232
233
|
children: [/*#__PURE__*/_jsx("input", {
|
|
233
234
|
...rest,
|
|
234
|
-
ref:
|
|
235
|
+
ref: useMergedRefs(ref, indeterminateRef, disabledMessageTooltip.positionRef),
|
|
235
236
|
id: id,
|
|
236
237
|
type: "checkbox"
|
|
237
238
|
// Withhold the name while disabled: with a disabledMessage the
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ClickableCard.d.ts","sourceRoot":"","sources":["../../src/ClickableCard/ClickableCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAE,KAAK,UAAU,EAAU,KAAK,GAAG,EAAC,MAAM,OAAO,CAAC;AASxE,OAAO,KAAK,EAAC,SAAS,EAAE,WAAW,EAAE,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAGtE,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,cAAc,CAAC;AAE9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"ClickableCard.d.ts","sourceRoot":"","sources":["../../src/ClickableCard/ClickableCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAE,KAAK,UAAU,EAAU,KAAK,GAAG,EAAC,MAAM,OAAO,CAAC;AASxE,OAAO,KAAK,EAAC,SAAS,EAAE,WAAW,EAAE,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAGtE,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,cAAc,CAAC;AAE9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAiG5C,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD,yCAAyC;IACzC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAE1B;;;;;OAKG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAEnD;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB,yBAAyB;IACzB,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,0BAA0B;IAC1B,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,IAAI,EACJ,MAAM,EACN,UAAkB,EAClB,QAAQ,EACR,OAAO,EACP,OAAmB,EACnB,SAAkB,EAClB,KAAK,EACL,MAAM,EACN,QAAQ,EACR,GAAG,EACH,MAAM,EAAE,UAAU,EAClB,SAAS,EAAE,aAAa,EACxB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,kBAAkB,+BAgFpB;yBAnGe,aAAa"}
|