@astryxdesign/core 0.5.0 → 0.5.1-canary.f64186a
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 +222 -0
- 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/AspectRatio/AspectRatio.d.ts +6 -6
- package/dist/Avatar/Avatar.d.ts +25 -1
- package/dist/Avatar/Avatar.d.ts.map +1 -1
- package/dist/Avatar/Avatar.js +43 -9
- 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 +5 -2
- 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 +11 -7
- package/dist/Badge/Badge.d.ts.map +1 -1
- package/dist/Badge/Badge.js +26 -2
- package/dist/Banner/Banner.d.ts +10 -1
- package/dist/Banner/Banner.d.ts.map +1 -1
- package/dist/Banner/Banner.js +11 -2
- package/dist/Button/Button.d.ts.map +1 -1
- package/dist/Button/Button.js +8 -7
- package/dist/Calendar/Calendar.d.ts +4 -2
- package/dist/Calendar/Calendar.d.ts.map +1 -1
- package/dist/Calendar/Calendar.js +15 -21
- package/dist/Calendar/hooks/useCalendarDays.js +4 -6
- package/dist/Calendar/hooks/useCalendarNavigation.js +4 -6
- package/dist/Calendar/styles.d.ts +5 -20
- package/dist/Calendar/styles.d.ts.map +1 -1
- package/dist/Calendar/styles.js +15 -17
- package/dist/Card/Card.d.ts +12 -12
- package/dist/Card/Card.d.ts.map +1 -1
- package/dist/Card/Card.js +17 -9
- package/dist/Card/index.d.ts +35 -1
- package/dist/Card/index.d.ts.map +1 -1
- package/dist/Card/index.js +21 -1
- package/dist/Carousel/Carousel.d.ts.map +1 -1
- package/dist/Carousel/Carousel.js +108 -7
- package/dist/CheckboxInput/CheckboxInput.d.ts.map +1 -1
- package/dist/CheckboxInput/CheckboxInput.js +7 -1
- 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/CommandPaletteItem.d.ts.map +1 -1
- package/dist/CommandPalette/CommandPaletteItem.js +2 -7
- package/dist/ComplexSelector/ComplexSelector.d.ts +10 -2
- package/dist/ComplexSelector/ComplexSelector.d.ts.map +1 -1
- package/dist/ComplexSelector/ComplexSelector.js +14 -7
- package/dist/DateInput/DateInput.d.ts +43 -0
- package/dist/DateInput/DateInput.d.ts.map +1 -1
- package/dist/DateInput/DateInput.js +22 -5
- package/dist/DateInput/MonthScroller.d.ts.map +1 -1
- package/dist/DateInput/MonthScroller.js +5 -3
- package/dist/DateInput/MonthYearWheels.d.ts.map +1 -1
- package/dist/DateInput/MonthYearWheels.js +6 -4
- 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 +52 -25
- package/dist/DateInput/Wheel.d.ts.map +1 -1
- package/dist/DateInput/Wheel.js +1 -0
- 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/DateRangeInput/DateRangeInput.d.ts +4 -2
- package/dist/DateRangeInput/DateRangeInput.d.ts.map +1 -1
- package/dist/DateRangeInput/DateRangeInput.js +3 -5
- package/dist/DateTimeInput/DateTimeInput.d.ts +23 -24
- package/dist/DateTimeInput/DateTimeInput.d.ts.map +1 -1
- package/dist/DateTimeInput/DateTimeInput.js +35 -10
- package/dist/DateTimeInput/TouchDateTimeField.d.ts +6 -0
- package/dist/DateTimeInput/TouchDateTimeField.d.ts.map +1 -0
- package/dist/DateTimeInput/TouchDateTimeField.js +1021 -0
- package/dist/Dialog/Dialog.d.ts +16 -2
- package/dist/Dialog/Dialog.d.ts.map +1 -1
- package/dist/Dialog/Dialog.js +28 -7
- package/dist/DropdownMenu/DropdownMenu.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenu.js +4 -13
- package/dist/Field/FieldLabel.d.ts.map +1 -1
- package/dist/Field/FieldLabel.js +9 -1
- package/dist/Field/InputClearButton.d.ts +9 -3
- package/dist/Field/InputClearButton.d.ts.map +1 -1
- package/dist/Field/InputClearButton.js +14 -3
- package/dist/Heading/Heading.d.ts.map +1 -1
- package/dist/Heading/Heading.js +0 -1
- package/dist/HoverCard/HoverCard.d.ts.map +1 -1
- package/dist/HoverCard/HoverCard.js +104 -3
- package/dist/HoverCard/useHoverCard.d.ts +14 -2
- package/dist/HoverCard/useHoverCard.d.ts.map +1 -1
- package/dist/HoverCard/useHoverCard.js +7 -1
- package/dist/Icon/Icon.d.ts +4 -2
- package/dist/Icon/Icon.d.ts.map +1 -1
- package/dist/Icon/defaultIcons.d.ts +3 -2
- package/dist/Icon/defaultIcons.d.ts.map +1 -1
- package/dist/Icon/defaultIcons.js +7 -0
- package/dist/Icon/globalIconRegistry.d.ts +13 -0
- package/dist/Icon/globalIconRegistry.d.ts.map +1 -1
- package/dist/Icon/globalIconRegistry.js +34 -6
- package/dist/Icon/index.d.ts +1 -1
- package/dist/Icon/index.d.ts.map +1 -1
- package/dist/Icon/useIcon.d.ts +5 -2
- package/dist/Icon/useIcon.d.ts.map +1 -1
- package/dist/Icon/useIcon.js +3 -0
- 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 +2 -2
- package/dist/Kbd/Kbd.d.ts.map +1 -1
- package/dist/Kbd/Kbd.js +2 -26
- package/dist/Layer/gestureCounter.d.ts +8 -0
- package/dist/Layer/gestureCounter.d.ts.map +1 -0
- package/dist/Layer/gestureCounter.js +53 -0
- package/dist/Layer/useLayer.d.ts +23 -13
- package/dist/Layer/useLayer.d.ts.map +1 -1
- package/dist/Layer/useLayer.js +146 -24
- package/dist/List/List.d.ts +1 -1
- package/dist/List/List.d.ts.map +1 -1
- package/dist/List/List.js +15 -4
- package/dist/Markdown/Markdown.d.ts +1 -1
- package/dist/Markdown/Markdown.d.ts.map +1 -1
- package/dist/Markdown/Markdown.js +20 -7
- package/dist/Markdown/parser.d.ts.map +1 -1
- package/dist/Markdown/parser.js +5 -3
- package/dist/MetadataList/MetadataListItem.d.ts +1 -1
- package/dist/MetadataList/MetadataListItem.d.ts.map +1 -1
- package/dist/MetadataList/MetadataListItem.js +4 -1
- package/dist/MultiSelector/MultiSelector.d.ts +18 -1
- package/dist/MultiSelector/MultiSelector.d.ts.map +1 -1
- package/dist/MultiSelector/MultiSelector.js +58 -11
- package/dist/MultiSelector/hooks.d.ts +7 -1
- package/dist/MultiSelector/hooks.d.ts.map +1 -1
- package/dist/MultiSelector/hooks.js +3 -2
- package/dist/NavIcon/NavIcon.d.ts.map +1 -1
- package/dist/NavIcon/NavIcon.js +5 -1
- package/dist/NavItem/navItemStyles.stylex.d.ts +0 -8
- package/dist/NavItem/navItemStyles.stylex.d.ts.map +1 -1
- package/dist/NavItem/navItemStyles.stylex.js +0 -2
- package/dist/NavMenu/NavHeadingMenu.d.ts +1 -1
- package/dist/NavMenu/NavHeadingMenu.d.ts.map +1 -1
- package/dist/NavMenu/NavHeadingMenu.js +7 -4
- package/dist/NumberInput/NumberInput.d.ts +6 -1
- package/dist/NumberInput/NumberInput.d.ts.map +1 -1
- package/dist/NumberInput/NumberInput.js +95 -126
- 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 +2 -3
- package/dist/OverflowList/OverflowList.d.ts +41 -1
- package/dist/OverflowList/OverflowList.d.ts.map +1 -1
- package/dist/OverflowList/OverflowList.js +43 -2
- package/dist/Popover/Popover.d.ts.map +1 -1
- package/dist/Popover/Popover.js +8 -14
- package/dist/Popover/usePopover.d.ts +15 -41
- package/dist/Popover/usePopover.d.ts.map +1 -1
- package/dist/Popover/usePopover.js +26 -7
- package/dist/PowerSearch/PowerSearchValueEditor.d.ts.map +1 -1
- package/dist/PowerSearch/PowerSearchValueEditor.js +91 -18
- package/dist/PowerSearch/formatFilterValue.d.ts.map +1 -1
- package/dist/PowerSearch/formatFilterValue.js +4 -2
- package/dist/ProgressBar/ProgressBar.d.ts.map +1 -1
- package/dist/ProgressBar/ProgressBar.js +18 -5
- package/dist/Resizable/useResizable.d.ts +19 -1
- package/dist/Resizable/useResizable.d.ts.map +1 -1
- package/dist/Resizable/useResizable.js +104 -38
- package/dist/SelectableCard/SelectableCard.d.ts.map +1 -1
- package/dist/SelectableCard/SelectableCard.js +9 -0
- package/dist/Selector/Selector.d.ts +18 -1
- package/dist/Selector/Selector.d.ts.map +1 -1
- package/dist/Selector/Selector.js +92 -21
- package/dist/Selector/hooks.d.ts +7 -1
- package/dist/Selector/hooks.d.ts.map +1 -1
- package/dist/Selector/hooks.js +3 -2
- package/dist/SideNav/SideNav.d.ts +6 -1
- package/dist/SideNav/SideNav.d.ts.map +1 -1
- package/dist/SideNav/SideNav.js +57 -27
- package/dist/SideNav/SideNavHeading.d.ts.map +1 -1
- package/dist/SideNav/SideNavHeading.js +5 -4
- package/dist/SideNav/SideNavItem.d.ts +29 -4
- package/dist/SideNav/SideNavItem.d.ts.map +1 -1
- package/dist/SideNav/SideNavItem.js +75 -20
- package/dist/Slider/Slider.d.ts.map +1 -1
- package/dist/Slider/Slider.js +34 -2
- package/dist/Spinner/Spinner.d.ts +3 -1
- package/dist/Spinner/Spinner.d.ts.map +1 -1
- package/dist/Spinner/Spinner.js +199 -20
- package/dist/StatusDot/StatusDot.d.ts.map +1 -1
- package/dist/StatusDot/StatusDot.js +6 -1
- package/dist/Stepper/Step.d.ts.map +1 -1
- package/dist/Stepper/Step.js +7 -6
- package/dist/Switch/Switch.d.ts.map +1 -1
- package/dist/Switch/Switch.js +5 -1
- package/dist/Table/BaseTable.d.ts.map +1 -1
- package/dist/Table/BaseTable.js +6 -1
- package/dist/Table/Table.d.ts.map +1 -1
- package/dist/Table/Table.js +3 -6
- 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 +26 -0
- package/dist/Table/plugins/groupedRows/useTableGroupedRows.d.ts.map +1 -1
- package/dist/Table/plugins/groupedRows/useTableGroupedRows.js +34 -3
- package/dist/Table/plugins/selection/useTableSelection.d.ts.map +1 -1
- package/dist/Table/plugins/selection/useTableSelection.js +25 -1
- package/dist/Table/plugins/stickyColumns/useTableStickyColumns.d.ts.map +1 -1
- package/dist/Table/plugins/stickyColumns/useTableStickyColumns.js +3 -4
- package/dist/Text/Text.d.ts.map +1 -1
- package/dist/Text/Text.js +0 -1
- package/dist/TextArea/TextArea.d.ts.map +1 -1
- package/dist/TextArea/TextArea.js +13 -8
- package/dist/Timestamp/Timestamp.d.ts +1 -1
- package/dist/Timestamp/Timestamp.d.ts.map +1 -1
- package/dist/Timestamp/Timestamp.js +10 -18
- package/dist/Timestamp/formatInstant.d.ts.map +1 -1
- package/dist/Timestamp/formatInstant.js +10 -5
- package/dist/Toast/Toast.d.ts +17 -2
- package/dist/Toast/Toast.d.ts.map +1 -1
- package/dist/Toast/Toast.js +77 -11
- package/dist/Toast/ToastViewport.d.ts +1 -0
- package/dist/Toast/ToastViewport.d.ts.map +1 -1
- package/dist/Toast/ToastViewport.js +76 -21
- package/dist/Toast/index.d.ts +1 -1
- package/dist/Toast/index.d.ts.map +1 -1
- package/dist/Toast/types.d.ts +38 -0
- package/dist/Toast/types.d.ts.map +1 -1
- package/dist/Toast/useToastGesture.d.ts +26 -0
- package/dist/Toast/useToastGesture.d.ts.map +1 -0
- package/dist/Toast/useToastGesture.js +223 -0
- package/dist/Token/Token.d.ts +1 -1
- package/dist/Token/Token.d.ts.map +1 -1
- package/dist/Token/Token.js +23 -12
- package/dist/Token/TokenLink.d.ts +1 -1
- package/dist/Token/TokenLink.d.ts.map +1 -1
- package/dist/Token/TokenLink.js +5 -2
- package/dist/Tokenizer/Tokenizer.d.ts +12 -1
- package/dist/Tokenizer/Tokenizer.d.ts.map +1 -1
- package/dist/Tokenizer/Tokenizer.js +31 -21
- package/dist/TopNav/TopNavHeading.js +2 -2
- package/dist/TopNav/TopNavItem.d.ts.map +1 -1
- package/dist/TopNav/TopNavItem.js +3 -3
- package/dist/TopNav/TopNavMegaMenu.d.ts +1 -1
- package/dist/TopNav/TopNavMegaMenu.d.ts.map +1 -1
- package/dist/TopNav/TopNavMegaMenu.js +30 -9
- package/dist/TopNav/TopNavMegaMenuItem.d.ts.map +1 -1
- package/dist/TopNav/TopNavMegaMenuItem.js +3 -3
- package/dist/TopNav/TopNavMenu.d.ts +1 -1
- package/dist/TopNav/TopNavMenu.d.ts.map +1 -1
- package/dist/TopNav/TopNavMenu.js +21 -6
- package/dist/TreeList/TreeList.d.ts +1 -1
- package/dist/TreeList/TreeList.d.ts.map +1 -1
- package/dist/TreeList/TreeList.js +7 -2
- package/dist/TreeList/TreeListItem.d.ts.map +1 -1
- package/dist/TreeList/TreeListItem.js +2 -2
- package/dist/Typeahead/BaseTypeahead.d.ts +33 -0
- package/dist/Typeahead/BaseTypeahead.d.ts.map +1 -1
- package/dist/Typeahead/BaseTypeahead.js +51 -8
- package/dist/Typeahead/Typeahead.d.ts +8 -1
- package/dist/Typeahead/Typeahead.d.ts.map +1 -1
- package/dist/Typeahead/Typeahead.js +2 -0
- package/dist/Typeahead/TypeaheadItem.d.ts +1 -1
- package/dist/Typeahead/TypeaheadItem.d.ts.map +1 -1
- package/dist/Typeahead/TypeaheadItem.js +7 -2
- package/dist/astryx.css +87 -22
- package/dist/hooks/useHotkeys.d.ts.map +1 -1
- package/dist/hooks/useHotkeys.js +3 -25
- package/dist/hooks/useOverflow.d.ts.map +1 -1
- package/dist/hooks/useOverflow.js +14 -4
- package/dist/index.d.ts +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/theme/Theme.d.ts.map +1 -1
- package/dist/theme/Theme.js +46 -10
- package/dist/theme/defineTheme.d.ts +9 -3
- package/dist/theme/defineTheme.d.ts.map +1 -1
- package/dist/theme/defineTheme.js +5 -0
- package/dist/theme/derivedVarRegistry.d.ts.map +1 -1
- package/dist/theme/derivedVarRegistry.js +24 -4
- package/dist/theme/generateThemeRules.d.ts +21 -0
- package/dist/theme/generateThemeRules.d.ts.map +1 -1
- package/dist/theme/generateThemeRules.js +26 -0
- 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/theme/useTheme.d.ts.map +1 -1
- package/dist/theme/useTheme.js +6 -7
- package/dist/utils/dateParser.d.ts +5 -8
- package/dist/utils/dateParser.d.ts.map +1 -1
- package/dist/utils/dateParser.js +10 -11
- package/dist/utils/focusOutline.stylex.d.ts +25 -0
- package/dist/utils/focusOutline.stylex.d.ts.map +1 -1
- package/dist/utils/focusOutline.stylex.js +15 -0
- package/dist/utils/interactionOverlay.stylex.d.ts +26 -0
- package/dist/utils/interactionOverlay.stylex.d.ts.map +1 -0
- package/dist/utils/interactionOverlay.stylex.js +42 -0
- 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/plainDate.d.ts +11 -0
- package/dist/utils/plainDate.d.ts.map +1 -1
- package/dist/utils/plainDate.js +20 -4
- package/locales/af-ZA.json +7 -7
- package/locales/ar-SA.json +7 -7
- package/locales/ca-ES.json +6 -6
- package/locales/cs-CZ.json +7 -7
- package/locales/da-DK.json +7 -7
- package/locales/de-DE.json +7 -7
- package/locales/el-GR.json +7 -7
- package/locales/en.json +178 -6
- package/locales/es-ES.json +6 -6
- package/locales/fi-FI.json +7 -7
- package/locales/fr-FR.json +7 -7
- package/locales/he-IL.json +7 -7
- package/locales/hu-HU.json +7 -7
- package/locales/it-IT.json +7 -7
- package/locales/ja-JP.json +7 -7
- package/locales/ko-KR.json +7 -7
- package/locales/nl-NL.json +7 -7
- package/locales/no-NO.json +7 -7
- package/locales/pl-PL.json +7 -7
- package/locales/pseudo.json +130 -1
- package/locales/pt-BR.json +7 -7
- package/locales/pt-PT.json +7 -7
- package/locales/ro-RO.json +7 -7
- package/locales/ru-RU.json +7 -7
- package/locales/sr-SP.json +7 -7
- package/locales/sv-SE.json +7 -7
- package/locales/tr-TR.json +7 -7
- package/locales/uk-UA.json +7 -7
- package/locales/vi-VN.json +7 -7
- package/locales/zh-CN.json +7 -7
- package/locales/zh-TW.json +7 -7
- package/package.json +4 -5
- 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/AspectRatio/AspectRatio.doc.mjs +3 -3
- package/src/AspectRatio/AspectRatio.tsx +6 -6
- package/src/Avatar/Avatar.doc.mjs +12 -2
- package/src/Avatar/Avatar.test.tsx +80 -0
- package/src/Avatar/Avatar.tsx +64 -14
- 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 +12 -4
- package/src/AvatarGroup/AvatarGroupContext.ts +5 -3
- package/src/AvatarGroup/AvatarGroupOverflow.tsx +12 -12
- package/src/Badge/Badge.doc.mjs +3 -2
- package/src/Badge/Badge.test.tsx +32 -3
- package/src/Badge/Badge.tsx +42 -1
- package/src/Banner/Banner.doc.mjs +9 -0
- package/src/Banner/Banner.test.tsx +76 -11
- package/src/Banner/Banner.tsx +21 -2
- package/src/Button/Button.doc.mjs +2 -1
- package/src/Button/Button.test.tsx +19 -4
- package/src/Button/Button.tsx +9 -29
- package/src/ButtonGroup/ButtonGroup.doc.mjs +2 -2
- package/src/ButtonGroup/ButtonGroup.test.tsx +13 -0
- package/src/Calendar/Calendar.doc.mjs +3 -3
- package/src/Calendar/Calendar.test.tsx +112 -0
- package/src/Calendar/Calendar.tsx +18 -16
- package/src/Calendar/hooks/useCalendarDays.ts +4 -4
- package/src/Calendar/hooks/useCalendarNavigation.ts +4 -4
- package/src/Calendar/styles.ts +48 -42
- package/src/Card/Card.doc.mjs +10 -7
- package/src/Card/Card.test.tsx +113 -19
- package/src/Card/Card.tsx +67 -89
- package/src/Card/index.ts +36 -1
- package/src/Carousel/Carousel.doc.mjs +3 -0
- package/src/Carousel/Carousel.test.tsx +360 -0
- package/src/Carousel/Carousel.tsx +116 -15
- package/src/CheckboxInput/CheckboxInput.doc.mjs +2 -0
- package/src/CheckboxInput/CheckboxInput.test.tsx +15 -0
- package/src/CheckboxInput/CheckboxInput.tsx +5 -0
- package/src/CodeBlock/CodeBlock.doc.mjs +10 -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/CommandPaletteItem.tsx +2 -12
- package/src/ComplexSelector/ComplexSelector.doc.mjs +7 -0
- package/src/ComplexSelector/ComplexSelector.test.tsx +183 -0
- package/src/ComplexSelector/ComplexSelector.tsx +22 -12
- package/src/DateInput/DateInput.doc.mjs +16 -0
- package/src/DateInput/DateInput.test.tsx +9 -4
- package/src/DateInput/DateInput.tsx +54 -3
- package/src/DateInput/DateInputTouch.test.tsx +146 -32
- package/src/DateInput/MonthScroller.tsx +5 -1
- package/src/DateInput/MonthYearWheels.tsx +7 -4
- package/src/DateInput/NativeDateField.test.tsx +635 -0
- package/src/DateInput/NativeDateField.tsx +641 -0
- package/src/DateInput/TouchDateField.tsx +83 -33
- package/src/DateInput/Wheel.tsx +1 -0
- package/src/DateInput/index.ts +1 -0
- package/src/DateInput/nativeDateSegments.ts +127 -0
- package/src/DateRangeInput/DateRangeInput.doc.mjs +2 -2
- package/src/DateRangeInput/DateRangeInput.test.tsx +46 -0
- package/src/DateRangeInput/DateRangeInput.tsx +8 -13
- package/src/DateTimeInput/DateTimeInput.doc.mjs +38 -21
- package/src/DateTimeInput/DateTimeInput.test.tsx +76 -0
- package/src/DateTimeInput/DateTimeInput.tsx +54 -20
- package/src/DateTimeInput/DateTimeInputTouch.test.tsx +980 -0
- package/src/DateTimeInput/TouchDateTimeField.tsx +1437 -0
- package/src/Dialog/Dialog.test.tsx +185 -18
- package/src/Dialog/Dialog.tsx +35 -11
- package/src/DropdownMenu/DropdownMenu.test.tsx +44 -10
- package/src/DropdownMenu/DropdownMenu.tsx +4 -13
- package/src/Field/FieldLabel.test.tsx +29 -0
- package/src/Field/FieldLabel.tsx +7 -0
- package/src/Field/InputClearButton.test.tsx +15 -1
- package/src/Field/InputClearButton.tsx +28 -4
- package/src/Heading/Heading.tsx +0 -1
- package/src/HoverCard/HoverCard.doc.mjs +8 -2
- package/src/HoverCard/HoverCard.test.tsx +154 -4
- package/src/HoverCard/HoverCard.tsx +137 -3
- package/src/HoverCard/useHoverCard.tsx +23 -3
- package/src/Icon/Icon.test.tsx +55 -1
- package/src/Icon/Icon.tsx +5 -3
- package/src/Icon/defaultIcons.tsx +11 -2
- package/src/Icon/globalIconRegistry.test.tsx +16 -3
- package/src/Icon/globalIconRegistry.tsx +37 -6
- package/src/Icon/index.ts +1 -0
- package/src/Icon/useIcon.ts +9 -2
- package/src/Indicator/CheckboxIndicator.tsx +14 -8
- package/src/Indicator/Indicator.doc.mjs +2 -0
- package/src/Item/Item.tsx +2 -7
- package/src/Kbd/Kbd.test.tsx +0 -17
- package/src/Kbd/Kbd.tsx +2 -26
- package/src/Layer/gestureCounter.ts +57 -0
- package/src/Layer/useLayer.test.tsx +368 -16
- package/src/Layer/useLayer.tsx +208 -35
- package/src/Layout/__tests__/edgeCompensation.test.tsx +1 -1
- package/src/List/List.test.tsx +38 -0
- package/src/List/List.tsx +8 -1
- package/src/Markdown/Markdown.test.tsx +37 -0
- package/src/Markdown/Markdown.tsx +16 -5
- package/src/Markdown/parser.test.ts +33 -0
- package/src/Markdown/parser.ts +9 -3
- package/src/MetadataList/MetadataList.test.tsx +75 -2
- package/src/MetadataList/MetadataListItem.tsx +5 -2
- package/src/MultiSelector/MultiSelector.doc.mjs +22 -1
- package/src/MultiSelector/MultiSelector.test.tsx +205 -0
- package/src/MultiSelector/MultiSelector.tsx +103 -16
- package/src/MultiSelector/hooks.ts +9 -2
- 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/NavItem/navItemStyles.stylex.ts +0 -8
- package/src/NavMenu/NavHeadingMenu.test.tsx +30 -0
- package/src/NavMenu/NavHeadingMenu.tsx +7 -4
- package/src/NumberInput/NumberInput.doc.mjs +26 -7
- package/src/NumberInput/NumberInput.test.tsx +563 -8
- package/src/NumberInput/NumberInput.tsx +77 -131
- 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 +2 -4
- package/src/OverflowList/OverflowList.doc.mjs +102 -21
- package/src/OverflowList/OverflowList.test.tsx +550 -4
- package/src/OverflowList/OverflowList.tsx +100 -2
- package/src/Pagination/Pagination.test.tsx +3 -2
- package/src/Popover/Popover.doc.mjs +2 -2
- package/src/Popover/Popover.test.tsx +38 -0
- package/src/Popover/Popover.tsx +28 -66
- package/src/Popover/usePopover.tsx +44 -5
- package/src/PowerSearch/PowerSearchEditPopover.test.tsx +87 -0
- package/src/PowerSearch/PowerSearchValueEditor.test.tsx +64 -0
- package/src/PowerSearch/PowerSearchValueEditor.tsx +109 -10
- package/src/PowerSearch/formatFilterValue.test.ts +16 -1
- package/src/PowerSearch/formatFilterValue.ts +2 -0
- 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/Resizable.doc.mjs +2 -2
- package/src/Resizable/useResizable.doc.mjs +21 -2
- package/src/Resizable/useResizable.test.ts +421 -0
- package/src/Resizable/useResizable.ts +133 -48
- package/src/SelectableCard/SelectableCard.doc.mjs +3 -0
- package/src/SelectableCard/SelectableCard.tsx +16 -0
- package/src/Selector/Selector.doc.mjs +14 -0
- package/src/Selector/Selector.source-build.test.mjs +65 -0
- package/src/Selector/Selector.test.tsx +301 -0
- package/src/Selector/Selector.tsx +145 -32
- package/src/Selector/hooks.ts +17 -2
- package/src/SideNav/SideNav.doc.mjs +2 -2
- package/src/SideNav/SideNav.test.tsx +1069 -6
- package/src/SideNav/SideNav.tsx +109 -38
- package/src/SideNav/SideNavHeading.tsx +5 -2
- package/src/SideNav/SideNavItem.doc.mjs +24 -3
- package/src/SideNav/SideNavItem.tsx +134 -44
- package/src/Slider/Slider.test.tsx +106 -1
- package/src/Slider/Slider.tsx +52 -1
- package/src/Spinner/Spinner.doc.mjs +17 -5
- package/src/Spinner/Spinner.test.tsx +164 -0
- package/src/Spinner/Spinner.tsx +252 -22
- 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 +1 -1
- package/src/Stepper/Step.tsx +7 -14
- package/src/Switch/Switch.doc.mjs +2 -0
- package/src/Switch/Switch.test.tsx +10 -0
- package/src/Switch/Switch.tsx +3 -0
- package/src/Table/BaseTable.tsx +6 -1
- package/src/Table/Table.doc.mjs +5 -3
- package/src/Table/Table.tsx +3 -8
- package/src/Table/TableBody.doc.mjs +2 -2
- package/src/Table/TableFooter.doc.mjs +1 -1
- package/src/Table/TableHeader.doc.mjs +1 -1
- 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.tsx +50 -4
- package/src/Table/plugins/selection/useTableSelection.test.tsx +62 -0
- package/src/Table/plugins/selection/useTableSelection.tsx +25 -2
- package/src/Table/plugins/stickyColumns/useTableStickyColumns.tsx +1 -2
- package/src/Table/useTableGroupedRows.doc.mjs +3 -3
- package/src/Table/useTablePagination.doc.mjs +1 -1
- package/src/Table/useTableSelection.doc.mjs +1 -1
- package/src/Text/Text.test.tsx +44 -0
- package/src/Text/Text.tsx +0 -1
- package/src/TextArea/TextArea.doc.mjs +12 -2
- package/src/TextArea/TextArea.test.tsx +11 -0
- package/src/TextArea/TextArea.tsx +34 -22
- package/src/Timestamp/Timestamp.test.tsx +89 -0
- package/src/Timestamp/Timestamp.tsx +8 -8
- package/src/Timestamp/formatInstant.ts +5 -0
- package/src/Toast/Toast.doc.mjs +213 -44
- package/src/Toast/Toast.tsx +118 -23
- package/src/Toast/ToastViewport.test.tsx +1434 -8
- package/src/Toast/ToastViewport.tsx +85 -14
- package/src/Toast/index.ts +2 -0
- package/src/Toast/types.ts +43 -5
- package/src/Toast/useToastGesture.ts +361 -0
- package/src/Token/Token.test.tsx +95 -0
- package/src/Token/Token.tsx +19 -17
- package/src/Token/TokenLink.tsx +12 -3
- package/src/Tokenizer/Tokenizer.doc.mjs +16 -3
- package/src/Tokenizer/Tokenizer.test.tsx +161 -0
- package/src/Tokenizer/Tokenizer.tsx +49 -24
- package/src/TopNav/TopNavHeading.tsx +2 -2
- package/src/TopNav/TopNavItem.tsx +3 -7
- package/src/TopNav/TopNavMegaMenu.test.tsx +104 -0
- package/src/TopNav/TopNavMegaMenu.tsx +47 -4
- package/src/TopNav/TopNavMegaMenuItem.tsx +10 -9
- package/src/TopNav/TopNavMenu.test.tsx +133 -1
- package/src/TopNav/TopNavMenu.tsx +38 -5
- package/src/TreeList/TreeList.test.tsx +49 -0
- package/src/TreeList/TreeList.tsx +7 -2
- package/src/TreeList/TreeListItem.tsx +2 -7
- package/src/Typeahead/BaseTypeahead.doc.mjs +13 -0
- package/src/Typeahead/BaseTypeahead.tsx +96 -6
- package/src/Typeahead/Typeahead.doc.mjs +6 -0
- package/src/Typeahead/Typeahead.test.tsx +154 -0
- package/src/Typeahead/Typeahead.tsx +9 -0
- package/src/Typeahead/TypeaheadItem.test.tsx +43 -0
- package/src/Typeahead/TypeaheadItem.tsx +8 -1
- package/src/hooks/useAnnounce.doc.mjs +96 -0
- package/src/hooks/useDevWarning.doc.mjs +96 -0
- package/src/hooks/useHotkeys.test.ts +0 -18
- package/src/hooks/useHotkeys.ts +3 -25
- package/src/hooks/useIndicatorFocusRing.doc.mjs +104 -0
- package/src/hooks/useInputStatusIcon.doc.mjs +142 -0
- package/src/hooks/useInteractiveRole.doc.mjs +119 -0
- package/src/hooks/useLongPress.doc.mjs +123 -0
- package/src/hooks/useOverflow.doc.mjs +58 -17
- package/src/hooks/useOverflow.ts +16 -4
- package/src/hooks/useTypeahead.doc.mjs +153 -0
- package/src/index.ts +2 -0
- package/src/raw-import.d.ts +14 -0
- package/src/theme/Theme.test.tsx +104 -2
- package/src/theme/Theme.tsx +49 -14
- package/src/theme/defineTheme.test.ts +23 -0
- package/src/theme/defineTheme.ts +12 -3
- package/src/theme/derivedVarRegistry.test.ts +87 -3
- package/src/theme/derivedVarRegistry.ts +23 -4
- package/src/theme/generateThemeRules.test.ts +99 -1
- package/src/theme/generateThemeRules.ts +28 -0
- package/src/theme/syntax/tokens.ts +5 -2
- package/src/theme/useTheme.test.tsx +10 -0
- package/src/theme/useTheme.ts +16 -10
- package/src/utils/dateParser.test.ts +34 -2
- package/src/utils/dateParser.ts +11 -14
- package/src/utils/focusOutline.stylex.ts +50 -0
- package/src/utils/interactionOverlay.stylex.ts +74 -0
- package/src/utils/isApplePlatform.test.ts +61 -0
- package/src/utils/isApplePlatform.ts +37 -0
- package/src/utils/plainDate.test.ts +46 -0
- package/src/utils/plainDate.ts +18 -3
|
@@ -26,6 +26,19 @@ import { warnOnce } from "../utils/devWarning.js";
|
|
|
26
26
|
*/
|
|
27
27
|
// SYNC: packages/cli/assets/docs/icons.doc.mjs — update USAGE_HINTS when adding names
|
|
28
28
|
|
|
29
|
+
/**
|
|
30
|
+
* A namespaced extension key, `'<namespace>:<name>'`.
|
|
31
|
+
*
|
|
32
|
+
* This is the tier for a glyph that belongs to one component or library rather
|
|
33
|
+
* than to the system: `'richtext:bold'`, `'numberInput:stepperDown'`. A theme
|
|
34
|
+
* overrides it by key through `registerIcons` or `defineTheme({icons})`,
|
|
35
|
+
* exactly as it overrides a built-in name, and the core {@link IconName} union
|
|
36
|
+
* stays reserved for glyphs the whole system shares.
|
|
37
|
+
*
|
|
38
|
+
* Accepted anywhere a built-in name is, including `<Icon icon>` — which is
|
|
39
|
+
* what lets a namespaced glyph keep `size`, `color` and `xstyle`.
|
|
40
|
+
*/
|
|
41
|
+
|
|
29
42
|
/**
|
|
30
43
|
* A semantic icon name — either one of the built-in {@link IconName}s or an
|
|
31
44
|
* arbitrary string key contributed by a library/app.
|
|
@@ -45,6 +58,16 @@ import { warnOnce } from "../utils/devWarning.js";
|
|
|
45
58
|
// =============================================================================
|
|
46
59
|
|
|
47
60
|
let globalRegistry = {};
|
|
61
|
+
|
|
62
|
+
/**
|
|
63
|
+
* A key is namespaced when it carries a `<namespace>:` prefix — the runtime
|
|
64
|
+
* form of {@link NamespacedIconName}, which is how the typed
|
|
65
|
+
* {@link getIconRegistry} snapshot tells a built-in name from a component- or
|
|
66
|
+
* library-owned one.
|
|
67
|
+
*/
|
|
68
|
+
function isNamespacedKey(name) {
|
|
69
|
+
return name.includes(':');
|
|
70
|
+
}
|
|
48
71
|
function getThemeIconOverrides(source) {
|
|
49
72
|
if (source == null) {
|
|
50
73
|
return null;
|
|
@@ -95,19 +118,24 @@ export function registerIcons(icons) {
|
|
|
95
118
|
* resolves against.
|
|
96
119
|
*/
|
|
97
120
|
export function getIconRegistry(source) {
|
|
98
|
-
const registry = {
|
|
99
|
-
...defaultIcons
|
|
100
|
-
};
|
|
121
|
+
const registry = {};
|
|
101
122
|
|
|
102
|
-
// Only surface built-in IconName keys here —
|
|
103
|
-
//
|
|
104
|
-
// out of the
|
|
123
|
+
// Only surface built-in IconName keys here — namespaced keys, whether
|
|
124
|
+
// contributed by a library or shipped as a component's own default, are
|
|
125
|
+
// resolved via getIcon/getExtendedIcon and intentionally kept out of the
|
|
126
|
+
// typed IconRegistry snapshot.
|
|
105
127
|
for (const name of Object.keys(defaultIcons)) {
|
|
128
|
+
if (isNamespacedKey(name)) {
|
|
129
|
+
continue;
|
|
130
|
+
}
|
|
106
131
|
registry[name] = globalRegistry[name] ?? defaultIcons[name];
|
|
107
132
|
}
|
|
108
133
|
const themeIcons = getThemeIconOverrides(source);
|
|
109
134
|
if (themeIcons != null) {
|
|
110
135
|
for (const name of Object.keys(themeIcons)) {
|
|
136
|
+
if (isNamespacedKey(name)) {
|
|
137
|
+
continue;
|
|
138
|
+
}
|
|
111
139
|
registry[name] = themeIcons[name] ?? registry[name];
|
|
112
140
|
}
|
|
113
141
|
}
|
package/dist/Icon/index.d.ts
CHANGED
|
@@ -10,5 +10,5 @@ export { Icon, renderIconSlot } from './Icon';
|
|
|
10
10
|
export { useIcon } from './useIcon';
|
|
11
11
|
export type { IconProps, IconColor, IconSize, IconType } from './Icon';
|
|
12
12
|
export { registerIcons, getIconRegistry, getIcon, getExtendedIcon, resetIcons, } from './globalIconRegistry';
|
|
13
|
-
export type { IconName, ExtendedIconName, IconRegistry, IconRegistrySource, } from './globalIconRegistry';
|
|
13
|
+
export type { IconName, ExtendedIconName, NamespacedIconName, IconRegistry, IconRegistrySource, } from './globalIconRegistry';
|
|
14
14
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/Icon/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Icon/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAEH,OAAO,EAAC,IAAI,EAAE,cAAc,EAAC,MAAM,QAAQ,CAAC;AAC5C,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAC;AAClC,YAAY,EAAC,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAC,MAAM,QAAQ,CAAC;AAGrE,OAAO,EACL,aAAa,EACb,eAAe,EACf,OAAO,EACP,eAAe,EACf,UAAU,GACX,MAAM,sBAAsB,CAAC;AAC9B,YAAY,EACV,QAAQ,EACR,gBAAgB,EAChB,YAAY,EACZ,kBAAkB,GACnB,MAAM,sBAAsB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Icon/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAEH,OAAO,EAAC,IAAI,EAAE,cAAc,EAAC,MAAM,QAAQ,CAAC;AAC5C,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAC;AAClC,YAAY,EAAC,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAC,MAAM,QAAQ,CAAC;AAGrE,OAAO,EACL,aAAa,EACb,eAAe,EACf,OAAO,EACP,eAAe,EACf,UAAU,GACX,MAAM,sBAAsB,CAAC;AAC9B,YAAY,EACV,QAAQ,EACR,gBAAgB,EAChB,kBAAkB,EAClB,YAAY,EACZ,kBAAkB,GACnB,MAAM,sBAAsB,CAAC"}
|
package/dist/Icon/useIcon.d.ts
CHANGED
|
@@ -5,10 +5,13 @@
|
|
|
5
5
|
* @position Client hook for components that render registry icons directly
|
|
6
6
|
*/
|
|
7
7
|
import type { ReactNode } from 'react';
|
|
8
|
-
import { type IconName } from './globalIconRegistry';
|
|
8
|
+
import { type IconName, type NamespacedIconName } from './globalIconRegistry';
|
|
9
9
|
/**
|
|
10
10
|
* Resolve a semantic icon name from the nearest Theme, falling back through
|
|
11
11
|
* root theme registration, global icon overrides, and built-in defaults.
|
|
12
|
+
*
|
|
13
|
+
* Accepts a namespaced extension key (`'richtext:bold'`) as well as a built-in
|
|
14
|
+
* name; both resolve through the same registry.
|
|
12
15
|
*/
|
|
13
|
-
export declare function useIcon(name: IconName): ReactNode;
|
|
16
|
+
export declare function useIcon(name: IconName | NamespacedIconName): ReactNode;
|
|
14
17
|
//# sourceMappingURL=useIcon.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useIcon.d.ts","sourceRoot":"","sources":["../../src/Icon/useIcon.ts"],"names":[],"mappings":"AAIA;;;;;GAKG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC,OAAO,
|
|
1
|
+
{"version":3,"file":"useIcon.d.ts","sourceRoot":"","sources":["../../src/Icon/useIcon.ts"],"names":[],"mappings":"AAIA;;;;;GAKG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC,OAAO,EAEL,KAAK,QAAQ,EACb,KAAK,kBAAkB,EACxB,MAAM,sBAAsB,CAAC;AAE9B;;;;;;GAMG;AACH,wBAAgB,OAAO,CAAC,IAAI,EAAE,QAAQ,GAAG,kBAAkB,GAAG,SAAS,CAGtE"}
|
package/dist/Icon/useIcon.js
CHANGED
|
@@ -14,6 +14,9 @@ import { getIcon } from "./globalIconRegistry.js";
|
|
|
14
14
|
/**
|
|
15
15
|
* Resolve a semantic icon name from the nearest Theme, falling back through
|
|
16
16
|
* root theme registration, global icon overrides, and built-in defaults.
|
|
17
|
+
*
|
|
18
|
+
* Accepts a namespaced extension key (`'richtext:bold'`) as well as a built-in
|
|
19
|
+
* name; both resolve through the same registry.
|
|
17
20
|
*/
|
|
18
21
|
export function useIcon(name) {
|
|
19
22
|
const themeName = useThemeName();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxIndicator.d.ts","sourceRoot":"","sources":["../../src/Indicator/CheckboxIndicator.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,SAAS,CAAC;AAwI5C;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,IAAW,EACX,UAAkB,EAClB,QAAQ,EACR,GAAG,EACH,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,gBAAgB,CAAC,+
|
|
1
|
+
{"version":3,"file":"CheckboxIndicator.d.ts","sourceRoot":"","sources":["../../src/Indicator/CheckboxIndicator.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,SAAS,CAAC;AAwI5C;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,IAAW,EACX,UAAkB,EAClB,QAAQ,EACR,GAAG,EACH,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,gBAAgB,CAAC,+BA8ElC;yBAxFe,iBAAiB"}
|
|
@@ -155,7 +155,9 @@ export function CheckboxIndicator({
|
|
|
155
155
|
children: isRenderable(children) ? children : /*#__PURE__*/_jsxs(_Fragment, {
|
|
156
156
|
children: [/*#__PURE__*/_jsx("svg", {
|
|
157
157
|
viewBox: "0 0 10 10",
|
|
158
|
-
...
|
|
158
|
+
...mergeProps(themeProps('checkbox-indicator-check', {
|
|
159
|
+
size
|
|
160
|
+
}), stylex.props(styles.checkmark, checkmarkSizeStyles[size], isChecked && styles.checkmarkVisible)),
|
|
159
161
|
children: /*#__PURE__*/_jsx("path", {
|
|
160
162
|
d: "M8.5 2.5L4 7.5L1.5 5",
|
|
161
163
|
stroke: "currentColor",
|
|
@@ -165,7 +167,9 @@ export function CheckboxIndicator({
|
|
|
165
167
|
strokeLinejoin: "round"
|
|
166
168
|
})
|
|
167
169
|
}), /*#__PURE__*/_jsx("span", {
|
|
168
|
-
...
|
|
170
|
+
...mergeProps(themeProps('checkbox-indicator-dash', {
|
|
171
|
+
size
|
|
172
|
+
}), stylex.props(styles.indeterminateMark, indeterminateSizeStyles[size], isIndeterminate && styles.indeterminateMarkVisible))
|
|
169
173
|
})]
|
|
170
174
|
})
|
|
171
175
|
});
|
package/dist/Item/Item.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../src/Item/Item.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAS,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAU7C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../src/Item/Item.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAS,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAU7C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAe5C,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;AAC3C,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAE9D,MAAM,WAAW,SAAU,SAAQ,SAAS,CAAC,WAAW,CAAC;IACvD,yCAAyC;IACzC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAE7B;;;OAGG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,MAAM,CAAC;IAE3B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB;;;OAGG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAE9B;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAE5C;;;;;;;;;;;OAWG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAErD;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,MAAM,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAE5B;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAwLD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,IAAI,CAAC,EACnB,EAAE,EAAE,SAAiB,EACrB,MAAM,EACN,YAAY,EACZ,KAAK,EACL,WAAW,EACX,UAAU,EACV,KAAgB,EAChB,OAAoB,EACpB,UAAU,EACV,gBAAgB,EAChB,MAAkB,EAClB,OAAO,EACP,cAAc,EACd,IAAI,EACJ,MAAM,EAAE,eAAe,EACvB,GAAG,EAAE,YAAY,EACjB,aAAqB,EACrB,UAAkB,EAClB,UAAkB,EAClB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,IAAI,EACJ,GAAG,SAAS,EACb,EAAE,SAAS,+BAsNX;yBAhPe,IAAI"}
|
package/dist/Item/Item.js
CHANGED
|
@@ -27,6 +27,7 @@ import { useClickableContainer } from "../hooks/useClickableContainer.js";
|
|
|
27
27
|
import { useDevWarning } from "../hooks/useDevWarning.js";
|
|
28
28
|
import { themeProps } from "../utils/themeProps.js";
|
|
29
29
|
import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
|
|
30
|
+
import { interactionOverlayStyles } from "../utils/interactionOverlay.stylex.js";
|
|
30
31
|
|
|
31
32
|
// =============================================================================
|
|
32
33
|
// Types
|
|
@@ -67,7 +68,6 @@ const styles = {
|
|
|
67
68
|
k1ekBW: "x15406qy",
|
|
68
69
|
kIyJzY: "xkvfbh3",
|
|
69
70
|
kAMwcw: "xlr8y92",
|
|
70
|
-
kWkggS: "xjbqb8w xoevpu5 xyxi2l3",
|
|
71
71
|
$$css: true
|
|
72
72
|
},
|
|
73
73
|
highlighted: {
|
|
@@ -368,7 +368,7 @@ export function Item({
|
|
|
368
368
|
...mergeProps(themeProps('item', {
|
|
369
369
|
density,
|
|
370
370
|
align
|
|
371
|
-
}), focusOutlineProps.focusWithin(styles.root, densityStyles[density], align === 'start' && styles.alignStart, isInteractive && styles.interactive, isHighlighted && styles.highlighted, isSelected && styles.selected, isDisabled && !hasParentRole && styles.disabled, xstyle), className, style),
|
|
371
|
+
}), focusOutlineProps.focusWithin(styles.root, densityStyles[density], align === 'start' && styles.alignStart, isInteractive && styles.interactive, isInteractive && interactionOverlayStyles.backgroundColor, isHighlighted && styles.highlighted, isSelected && styles.selected, isDisabled && !hasParentRole && styles.disabled, xstyle), className, style),
|
|
372
372
|
role: role,
|
|
373
373
|
onClick: isDelegate ? delegatedOnClick : hasParentRole ? onClick : isInteractive ? handleContainerClick : undefined,
|
|
374
374
|
children: innerContent
|
package/dist/Kbd/Kbd.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Kbd.d.ts","sourceRoot":"","sources":["../../src/Kbd/Kbd.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;GASG;AAEH,OAAO,KAA6B,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Kbd.d.ts","sourceRoot":"","sources":["../../src/Kbd/Kbd.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;GASG;AAEH,OAAO,KAA6B,MAAM,OAAO,CAAC;AAIlD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA0G5C,MAAM,WAAW,QAAS,SAAQ,SAAS,CAAC,eAAe,CAAC;IAC1D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACjC;;;;;;;;;;;;OAYG;IACH,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,GAAG,CAAC,EAAC,IAAI,EAAE,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAI,EAAC,EAAE,QAAQ,qBAgC3E;yBAhCe,GAAG"}
|
package/dist/Kbd/Kbd.js
CHANGED
|
@@ -15,6 +15,7 @@
|
|
|
15
15
|
import React, { useSyncExternalStore } from 'react';
|
|
16
16
|
import * as stylex from '@stylexjs/stylex';
|
|
17
17
|
import { mergeProps } from "../utils/index.js";
|
|
18
|
+
import { isApplePlatform } from "../utils/isApplePlatform.js";
|
|
18
19
|
import { themeProps } from "../utils/themeProps.js";
|
|
19
20
|
import "../theme/tokens.stylex.js";
|
|
20
21
|
import { colorVars, spacingVars, radiusVars, typographyVars, fontWeightVars, typeScaleVars } from "../theme/tokens.stylex.js";
|
|
@@ -98,31 +99,6 @@ function subscribeToPlatformChanges() {
|
|
|
98
99
|
function getServerPlatformSnapshot() {
|
|
99
100
|
return false;
|
|
100
101
|
}
|
|
101
|
-
|
|
102
|
-
/**
|
|
103
|
-
* Detects whether the current platform is macOS/iOS.
|
|
104
|
-
* Prefers the User-Agent Client Hints API when it names a platform (modern
|
|
105
|
-
* Chrome/Edge), falls back to navigator.platform (deprecated but universally
|
|
106
|
-
* supported) when it is absent or blank.
|
|
107
|
-
*/
|
|
108
|
-
function detectMac() {
|
|
109
|
-
if (typeof navigator === 'undefined') {
|
|
110
|
-
return false;
|
|
111
|
-
}
|
|
112
|
-
// Prefer User-Agent Client Hints API (not deprecated)
|
|
113
|
-
const uaData = 'userAgentData' in navigator ? navigator.userAgentData : null;
|
|
114
|
-
if (uaData && typeof uaData === 'object' && 'platform' in uaData) {
|
|
115
|
-
const uaPlatform = uaData.platform;
|
|
116
|
-
// A blank platform is no answer, not a negative one. Builds that rewrite
|
|
117
|
-
// their client-hints identity ship '', so fall through rather than
|
|
118
|
-
// reading it as "not Apple".
|
|
119
|
-
if (typeof uaPlatform === 'string' && uaPlatform.trim() !== '') {
|
|
120
|
-
return /mac/i.test(uaPlatform);
|
|
121
|
-
}
|
|
122
|
-
}
|
|
123
|
-
// Fallback: navigator.platform (deprecated but still shipped everywhere)
|
|
124
|
-
return /Mac|iPhone|iPad|iPod/.test(navigator.platform ?? '');
|
|
125
|
-
}
|
|
126
102
|
/**
|
|
127
103
|
* Displays a keyboard shortcut as styled <kbd> elements.
|
|
128
104
|
*
|
|
@@ -146,7 +122,7 @@ export function Kbd({
|
|
|
146
122
|
style,
|
|
147
123
|
...rest
|
|
148
124
|
}) {
|
|
149
|
-
const isMac = useSyncExternalStore(subscribeToPlatformChanges,
|
|
125
|
+
const isMac = useSyncExternalStore(subscribeToPlatformChanges, isApplePlatform, getServerPlatformSnapshot);
|
|
150
126
|
const parts = keys.split('+').map(key => key.trim().toLowerCase());
|
|
151
127
|
|
|
152
128
|
// Screen-reader name: the joined spoken labels (e.g. "Command + K"), since
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Identifies the user gesture in flight. Two reads returning the same value
|
|
3
|
+
* happened within one press (or one keystroke).
|
|
4
|
+
*/
|
|
5
|
+
export declare function currentGesture(): number;
|
|
6
|
+
/** Whether the click belonging to the current gesture already bubbled. */
|
|
7
|
+
export declare function currentGestureHasClicked(): boolean;
|
|
8
|
+
//# sourceMappingURL=gestureCounter.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"gestureCounter.d.ts","sourceRoot":"","sources":["../../src/Layer/gestureCounter.ts"],"names":[],"mappings":"AA2CA;;;GAGG;AACH,wBAAgB,cAAc,IAAI,MAAM,CAGvC;AAED,0EAA0E;AAC1E,wBAAgB,wBAAwB,IAAI,OAAO,CAGlD"}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
|
+
|
|
3
|
+
'use client';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* @file gestureCounter.ts
|
|
7
|
+
* @input Listens for pointerdown, keydown, and click on the document
|
|
8
|
+
* @output Exports the current gesture identity and whether its click has run
|
|
9
|
+
* @position Internal to Layer; used by useLayer to tell a click that belongs
|
|
10
|
+
* to a dismissing press from a fresh one
|
|
11
|
+
*
|
|
12
|
+
* A browser light-dismiss and the trigger's own click come from ONE press, and
|
|
13
|
+
* which of them React sees first is a race. Comparing timestamps against a
|
|
14
|
+
* window guesses; counting gestures does not. The counter advances on every
|
|
15
|
+
* new press or keystroke, so "the click from the gesture that dismissed the
|
|
16
|
+
* layer" is exactly "the click while the counter still reads what it read at
|
|
17
|
+
* the dismissal", no matter how long the main thread was blocked in between.
|
|
18
|
+
*/
|
|
19
|
+
let gesture = 0;
|
|
20
|
+
let clickedGesture = null;
|
|
21
|
+
let isListening = false;
|
|
22
|
+
function advance() {
|
|
23
|
+
gesture += 1;
|
|
24
|
+
}
|
|
25
|
+
function markClicked() {
|
|
26
|
+
clickedGesture = gesture;
|
|
27
|
+
}
|
|
28
|
+
function listen() {
|
|
29
|
+
if (isListening || typeof document === 'undefined') {
|
|
30
|
+
return;
|
|
31
|
+
}
|
|
32
|
+
isListening = true;
|
|
33
|
+
// Capture phase: the count must advance before any handler reads it.
|
|
34
|
+
document.addEventListener('pointerdown', advance, true);
|
|
35
|
+
document.addEventListener('keydown', advance, true);
|
|
36
|
+
// Capture phase observes the click even when a consumer stops propagation.
|
|
37
|
+
document.addEventListener('click', markClicked, true);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
/**
|
|
41
|
+
* Identifies the user gesture in flight. Two reads returning the same value
|
|
42
|
+
* happened within one press (or one keystroke).
|
|
43
|
+
*/
|
|
44
|
+
export function currentGesture() {
|
|
45
|
+
listen();
|
|
46
|
+
return gesture;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
/** Whether the click belonging to the current gesture already bubbled. */
|
|
50
|
+
export function currentGestureHasClicked() {
|
|
51
|
+
listen();
|
|
52
|
+
return clickedGesture === gesture;
|
|
53
|
+
}
|
package/dist/Layer/useLayer.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @file useLayer.tsx
|
|
3
3
|
* @input Uses React hooks, Popover API, CSS anchor positioning, typography tokens
|
|
4
|
-
* @output Exports useLayer hook
|
|
4
|
+
* @output Exports the public useLayer hook plus internal trigger helpers.
|
|
5
5
|
* @position Core layer utility; used by useHoverCard, useTooltip, etc.
|
|
6
6
|
*
|
|
7
7
|
* SYNC: When modified, update:
|
|
@@ -11,6 +11,17 @@
|
|
|
11
11
|
*/
|
|
12
12
|
import React, { type ReactNode, type RefCallback } from 'react';
|
|
13
13
|
import type { StyleXStyles } from '@stylexjs/stylex';
|
|
14
|
+
/**
|
|
15
|
+
* Props for a control that sits on the trigger but must not dismiss the layer.
|
|
16
|
+
*/
|
|
17
|
+
interface KeepLayerOpenProps {
|
|
18
|
+
onPointerDown: React.PointerEventHandler<HTMLElement>;
|
|
19
|
+
/**
|
|
20
|
+
* Capture phase, so spreading these props never collides with the control's
|
|
21
|
+
* own `onClick`.
|
|
22
|
+
*/
|
|
23
|
+
onClickCapture: React.MouseEventHandler<HTMLElement>;
|
|
24
|
+
}
|
|
14
25
|
/**
|
|
15
26
|
* Position placement relative to anchor.
|
|
16
27
|
* Logical: start/end resolve against the popover's own inherited direction
|
|
@@ -243,6 +254,11 @@ export interface FixedLayerReturn {
|
|
|
243
254
|
*/
|
|
244
255
|
render: (children: ReactNode, props: FixedRenderProps) => ReactNode;
|
|
245
256
|
}
|
|
257
|
+
interface InternalLayerFields {
|
|
258
|
+
wasJustDismissed: () => boolean;
|
|
259
|
+
}
|
|
260
|
+
type InternalContextLayerReturn = ContextLayerReturn & InternalLayerFields;
|
|
261
|
+
type InternalFixedLayerReturn = FixedLayerReturn & InternalLayerFields;
|
|
246
262
|
/**
|
|
247
263
|
* Compute the `position-try-fallbacks` list for a placement/alignment pair.
|
|
248
264
|
*
|
|
@@ -254,20 +270,14 @@ export interface FixedLayerReturn {
|
|
|
254
270
|
*/
|
|
255
271
|
export declare function getPositionTryFallbacks(placement?: LayerPlacement, alignment?: LayerAlignment): string;
|
|
256
272
|
/**
|
|
257
|
-
*
|
|
258
|
-
*
|
|
259
|
-
* Supports two positioning modes with type-safe render props:
|
|
260
|
-
* - `context`: CSS anchor positioning relative to a trigger element
|
|
261
|
-
* - `fixed`: Fixed positioning at specified coordinates
|
|
262
|
-
*
|
|
263
|
-
* @example
|
|
264
|
-
* ```
|
|
265
|
-
* const layer = useLayer({ mode: 'context' });
|
|
266
|
-
* <button ref={layer.ref}>Trigger</button>
|
|
267
|
-
* {layer.render(<Content />, { placement: 'above', alignment: 'center' })}
|
|
268
|
-
* ```
|
|
273
|
+
* Internal props for controls that sit beside an open layer. This stays out of
|
|
274
|
+
* the public useLayer/usePopover return types until the input family adopts it.
|
|
269
275
|
*/
|
|
276
|
+
export declare function useKeepLayerOpenProps(id: string, isOpen: boolean): KeepLayerOpenProps;
|
|
270
277
|
export declare function useLayer(options: ContextLayerOptions): ContextLayerReturn;
|
|
271
278
|
export declare function useLayer(options: FixedLayerOptions): FixedLayerReturn;
|
|
279
|
+
/** @internal Shared with usePopover; not exported from the package barrel. */
|
|
280
|
+
export declare function useLayerInternal(options: ContextLayerOptions): InternalContextLayerReturn;
|
|
281
|
+
export declare function useLayerInternal(options: FixedLayerOptions): InternalFixedLayerReturn;
|
|
272
282
|
export {};
|
|
273
283
|
//# sourceMappingURL=useLayer.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useLayer.d.ts","sourceRoot":"","sources":["../../src/Layer/useLayer.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"useLayer.d.ts","sourceRoot":"","sources":["../../src/Layer/useLayer.tsx"],"names":[],"mappings":"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"}
|
package/dist/Layer/useLayer.js
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
/**
|
|
6
6
|
* @file useLayer.tsx
|
|
7
7
|
* @input Uses React hooks, Popover API, CSS anchor positioning, typography tokens
|
|
8
|
-
* @output Exports useLayer hook
|
|
8
|
+
* @output Exports the public useLayer hook plus internal trigger helpers.
|
|
9
9
|
* @position Core layer utility; used by useHoverCard, useTooltip, etc.
|
|
10
10
|
*
|
|
11
11
|
* SYNC: When modified, update:
|
|
@@ -13,10 +13,11 @@
|
|
|
13
13
|
* - /packages/core/src/Layer/useLayer.test.tsx
|
|
14
14
|
* - /packages/core/src/Layer/index.ts
|
|
15
15
|
*/
|
|
16
|
-
import React, { useCallback, useEffect, useId, useRef, useState } from 'react';
|
|
16
|
+
import React, { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
|
|
17
17
|
import * as stylex from '@stylexjs/stylex';
|
|
18
18
|
import { createPortal } from 'react-dom';
|
|
19
19
|
import { addAnchorName, removeAnchorName } from "./anchorName.js";
|
|
20
|
+
import { currentGesture, currentGestureHasClicked } from "./gestureCounter.js";
|
|
20
21
|
import { resolveLayerPortalTarget } from "./layerHost.js";
|
|
21
22
|
import "../theme/tokens.stylex.js";
|
|
22
23
|
import { typeScaleVars, typographyVars } from "../theme/tokens.stylex.js";
|
|
@@ -64,6 +65,10 @@ const styles = {
|
|
|
64
65
|
}]
|
|
65
66
|
};
|
|
66
67
|
|
|
68
|
+
/**
|
|
69
|
+
* Props for a control that sits on the trigger but must not dismiss the layer.
|
|
70
|
+
*/
|
|
71
|
+
|
|
67
72
|
/**
|
|
68
73
|
* Position placement relative to anchor.
|
|
69
74
|
* Logical: start/end resolve against the popover's own inherited direction
|
|
@@ -188,6 +193,44 @@ export function getPositionTryFallbacks(placement = 'above', alignment = 'center
|
|
|
188
193
|
return `${flips}, ${same} span-top, ${same} span-bottom, ${opposite} span-top, ${opposite} span-bottom`;
|
|
189
194
|
}
|
|
190
195
|
|
|
196
|
+
/**
|
|
197
|
+
* Internal props for controls that sit beside an open layer. This stays out of
|
|
198
|
+
* the public useLayer/usePopover return types until the input family adopts it.
|
|
199
|
+
*/
|
|
200
|
+
export function useKeepLayerOpenProps(id, isOpen) {
|
|
201
|
+
const isOpenRef = useRef(isOpen);
|
|
202
|
+
isOpenRef.current = isOpen;
|
|
203
|
+
return useMemo(() => ({
|
|
204
|
+
onPointerDown: event => {
|
|
205
|
+
if (!isOpenRef.current) {
|
|
206
|
+
return;
|
|
207
|
+
}
|
|
208
|
+
// The browser reads the invoker relationship at both ends of the press.
|
|
209
|
+
const control = event.currentTarget;
|
|
210
|
+
const doc = control.ownerDocument;
|
|
211
|
+
control.setAttribute('popovertarget', id);
|
|
212
|
+
const onPressEnd = () => {
|
|
213
|
+
doc.removeEventListener('pointerup', onPressEnd);
|
|
214
|
+
doc.removeEventListener('pointercancel', onPressEnd);
|
|
215
|
+
// Light dismiss runs as the pointerup default action after listeners.
|
|
216
|
+
doc.defaultView?.setTimeout(() => {
|
|
217
|
+
control.removeAttribute('popovertarget');
|
|
218
|
+
}, 0);
|
|
219
|
+
};
|
|
220
|
+
doc.addEventListener('pointerup', onPressEnd);
|
|
221
|
+
doc.addEventListener('pointercancel', onPressEnd);
|
|
222
|
+
},
|
|
223
|
+
onClickCapture: event => {
|
|
224
|
+
const control = event.currentTarget;
|
|
225
|
+
if (control.hasAttribute('popovertarget')) {
|
|
226
|
+
// Being an invoker would otherwise toggle the layer shut.
|
|
227
|
+
event.preventDefault();
|
|
228
|
+
control.removeAttribute('popovertarget');
|
|
229
|
+
}
|
|
230
|
+
}
|
|
231
|
+
}), [id]);
|
|
232
|
+
}
|
|
233
|
+
|
|
191
234
|
/**
|
|
192
235
|
* Core layer hook that handles popover behavior and positioning.
|
|
193
236
|
*
|
|
@@ -202,8 +245,7 @@ export function getPositionTryFallbacks(placement = 'above', alignment = 'center
|
|
|
202
245
|
* {layer.render(<Content />, { placement: 'above', alignment: 'center' })}
|
|
203
246
|
* ```
|
|
204
247
|
*/
|
|
205
|
-
|
|
206
|
-
export function useLayer(options) {
|
|
248
|
+
function useLayerImplementation(options) {
|
|
207
249
|
const {
|
|
208
250
|
mode,
|
|
209
251
|
onShow,
|
|
@@ -234,6 +276,16 @@ export function useLayer(options) {
|
|
|
234
276
|
// State drives re-renders; the ref lets the imperative calls avoid
|
|
235
277
|
// stale-closure reads of the previous isOpen value.
|
|
236
278
|
const isOpenRef = useRef(false);
|
|
279
|
+
|
|
280
|
+
// The gesture during which the browser last closed this layer on its own.
|
|
281
|
+
// Read through wasJustDismissed by triggers deciding whether a click is
|
|
282
|
+
// theirs to act on.
|
|
283
|
+
const dismissedByGestureRef = useRef(null);
|
|
284
|
+
const forgetDismissalRef = useRef(null);
|
|
285
|
+
const wasJustDismissed = useCallback(() => {
|
|
286
|
+
const gesture = currentGesture();
|
|
287
|
+
return dismissedByGestureRef.current === gesture;
|
|
288
|
+
}, []);
|
|
237
289
|
const showPopoverElement = useCallback(popover => {
|
|
238
290
|
// Finding infra-4: the Popover API is unsupported on Safari <17 and
|
|
239
291
|
// Firefox <125. On those browsers `showPopover` does not exist, so fall
|
|
@@ -287,6 +339,11 @@ export function useLayer(options) {
|
|
|
287
339
|
setContextMount(null);
|
|
288
340
|
}, [mode, lazyMount]);
|
|
289
341
|
const show = useCallback(() => {
|
|
342
|
+
// Every caller lands here, so this is where the dismissing press is
|
|
343
|
+
// absorbed: opening now would reopen the popup that same press closed.
|
|
344
|
+
if (wasJustDismissed()) {
|
|
345
|
+
return;
|
|
346
|
+
}
|
|
290
347
|
// A context popover left over until React commits a previous hide must not
|
|
291
348
|
// be reopened. The synchronous mount ref is the source of truth.
|
|
292
349
|
const candidate = popoverRef.current;
|
|
@@ -302,11 +359,16 @@ export function useLayer(options) {
|
|
|
302
359
|
setIsOpen(true);
|
|
303
360
|
onShow?.();
|
|
304
361
|
}
|
|
305
|
-
}, [onShow, requestContextMount, showPopoverElement, isCurrentContextPopover]);
|
|
362
|
+
}, [onShow, requestContextMount, showPopoverElement, isCurrentContextPopover, wasJustDismissed]);
|
|
306
363
|
const hide = useCallback(() => {
|
|
307
364
|
pendingShowRef.current = false;
|
|
308
365
|
if (isOpenRef.current) {
|
|
309
366
|
const el = popoverRef.current;
|
|
367
|
+
// Clear the open state BEFORE hiding: hidePopover fires `toggle`, and
|
|
368
|
+
// the reconciler below reads this ref to tell the browser's own
|
|
369
|
+
// dismissals from ours.
|
|
370
|
+
openedPopoverRef.current = null;
|
|
371
|
+
isOpenRef.current = false;
|
|
310
372
|
// See finding infra-4 note in `show`: mirror the same guard on hide so
|
|
311
373
|
// unsupported browsers degrade gracefully instead of throwing.
|
|
312
374
|
if (el) {
|
|
@@ -316,16 +378,14 @@ export function useLayer(options) {
|
|
|
316
378
|
el.style.display = 'none';
|
|
317
379
|
}
|
|
318
380
|
}
|
|
319
|
-
openedPopoverRef.current = null;
|
|
320
|
-
isOpenRef.current = false;
|
|
321
381
|
setIsOpen(false);
|
|
322
382
|
onHide?.();
|
|
323
383
|
}
|
|
324
384
|
clearContextMount();
|
|
325
385
|
}, [onHide, clearContextMount]);
|
|
326
386
|
|
|
327
|
-
//
|
|
328
|
-
const
|
|
387
|
+
// Stable ref for the trigger element (context mode only).
|
|
388
|
+
const contextRef = useCallback(el => {
|
|
329
389
|
// Remove only THIS layer's anchor name from the previous element so
|
|
330
390
|
// other layers sharing the same trigger keep their anchors.
|
|
331
391
|
if (triggerRef.current && triggerRef.current !== el) {
|
|
@@ -335,7 +395,51 @@ export function useLayer(options) {
|
|
|
335
395
|
addAnchorName(el, anchorId);
|
|
336
396
|
}
|
|
337
397
|
triggerRef.current = el;
|
|
338
|
-
}
|
|
398
|
+
}, [anchorId]);
|
|
399
|
+
|
|
400
|
+
// Arm only when the dismissing gesture's click is still ahead of us. Some
|
|
401
|
+
// engines deliver click first; in that order there is nothing left to absorb.
|
|
402
|
+
const rememberDismissal = useCallback(doc => {
|
|
403
|
+
forgetDismissalRef.current?.();
|
|
404
|
+
if (currentGestureHasClicked()) {
|
|
405
|
+
return;
|
|
406
|
+
}
|
|
407
|
+
dismissedByGestureRef.current = currentGesture();
|
|
408
|
+
const view = doc.defaultView;
|
|
409
|
+
let forgetTimer = null;
|
|
410
|
+
const forget = () => {
|
|
411
|
+
dismissedByGestureRef.current = null;
|
|
412
|
+
doc.removeEventListener('click', scheduleForget, true);
|
|
413
|
+
if (forgetTimer !== null) {
|
|
414
|
+
view?.clearTimeout(forgetTimer);
|
|
415
|
+
forgetTimer = null;
|
|
416
|
+
}
|
|
417
|
+
if (forgetDismissalRef.current === forget) {
|
|
418
|
+
forgetDismissalRef.current = null;
|
|
419
|
+
}
|
|
420
|
+
};
|
|
421
|
+
const scheduleForget = () => {
|
|
422
|
+
doc.removeEventListener('click', scheduleForget, true);
|
|
423
|
+
// The next task keeps the dismissal armed through React's click handler.
|
|
424
|
+
if (view) {
|
|
425
|
+
forgetTimer = view.setTimeout(() => {
|
|
426
|
+
forgetTimer = null;
|
|
427
|
+
if (forgetDismissalRef.current === forget) {
|
|
428
|
+
forget();
|
|
429
|
+
}
|
|
430
|
+
}, 0);
|
|
431
|
+
} else {
|
|
432
|
+
forget();
|
|
433
|
+
}
|
|
434
|
+
};
|
|
435
|
+
doc.addEventListener('click', scheduleForget, true);
|
|
436
|
+
forgetDismissalRef.current = forget;
|
|
437
|
+
}, []);
|
|
438
|
+
useEffect(() => {
|
|
439
|
+
// Install capture-phase gesture tracking before the first interaction.
|
|
440
|
+
currentGesture();
|
|
441
|
+
return () => forgetDismissalRef.current?.();
|
|
442
|
+
}, []);
|
|
339
443
|
|
|
340
444
|
// Reconcile browser-initiated closes (light-dismiss, popover="auto" stack
|
|
341
445
|
// eviction). These are the only cases where the DOM mutates without going
|
|
@@ -352,11 +456,12 @@ export function useLayer(options) {
|
|
|
352
456
|
if (toggleEvent.newState === 'closed' && isOpenRef.current) {
|
|
353
457
|
openedPopoverRef.current = null;
|
|
354
458
|
isOpenRef.current = false;
|
|
459
|
+
rememberDismissal(e.currentTarget?.ownerDocument ?? document);
|
|
355
460
|
setIsOpen(false);
|
|
356
461
|
onHide?.();
|
|
357
462
|
clearContextMount();
|
|
358
463
|
}
|
|
359
|
-
}, [onHide, clearContextMount]);
|
|
464
|
+
}, [onHide, clearContextMount, rememberDismissal]);
|
|
360
465
|
|
|
361
466
|
// Ref callback for popover element — sets up the `toggle` listener.
|
|
362
467
|
// Tracks the element + handler currently bound so the listener is removed
|
|
@@ -512,23 +617,40 @@ export function useLayer(options) {
|
|
|
512
617
|
children: children
|
|
513
618
|
});
|
|
514
619
|
}, [popoverRefCallback, id, lightDismiss]);
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
return {
|
|
620
|
+
const contextResult = useMemo(() => ({
|
|
621
|
+
ref: contextRef,
|
|
622
|
+
anchorId,
|
|
623
|
+
show,
|
|
624
|
+
hide,
|
|
625
|
+
isOpen,
|
|
626
|
+
wasJustDismissed,
|
|
627
|
+
id,
|
|
628
|
+
render: renderContext
|
|
629
|
+
}), [contextRef, anchorId, show, hide, isOpen, wasJustDismissed, id, renderContext]);
|
|
630
|
+
const fixedResult = useMemo(() => ({
|
|
527
631
|
ref: undefined,
|
|
528
632
|
show,
|
|
529
633
|
hide,
|
|
530
634
|
isOpen,
|
|
635
|
+
wasJustDismissed,
|
|
531
636
|
id,
|
|
532
637
|
render: renderFixed
|
|
533
|
-
};
|
|
638
|
+
}), [show, hide, isOpen, wasJustDismissed, id, renderFixed]);
|
|
639
|
+
return mode === 'context' ? contextResult : fixedResult;
|
|
640
|
+
}
|
|
641
|
+
export function useLayer(options) {
|
|
642
|
+
const internalLayer = useLayerImplementation(options);
|
|
643
|
+
return useMemo(() => {
|
|
644
|
+
const {
|
|
645
|
+
wasJustDismissed: _,
|
|
646
|
+
...layer
|
|
647
|
+
} = internalLayer;
|
|
648
|
+
return layer;
|
|
649
|
+
}, [internalLayer]);
|
|
650
|
+
}
|
|
651
|
+
|
|
652
|
+
/** @internal Shared with usePopover; not exported from the package barrel. */
|
|
653
|
+
|
|
654
|
+
export function useLayerInternal(options) {
|
|
655
|
+
return useLayerImplementation(options);
|
|
534
656
|
}
|