@astryxdesign/core 0.7.6-canary.bb18c81 → 0.7.6-canary.c8e1804
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/AppShell/AppShell.d.ts.map +1 -1
- package/dist/AppShell/AppShell.js +183 -5
- package/dist/AppShell/observeMainOverflow.d.ts +9 -0
- package/dist/AppShell/observeMainOverflow.d.ts.map +1 -0
- package/dist/AppShell/observeMainOverflow.js +125 -0
- package/dist/Badge/Badge.d.ts.map +1 -1
- package/dist/Badge/Badge.js +7 -1
- package/dist/Carousel/Carousel.d.ts +3 -1
- package/dist/Carousel/Carousel.d.ts.map +1 -1
- package/dist/Carousel/Carousel.js +12 -3
- package/dist/ClickableCard/ClickableCard.d.ts.map +1 -1
- package/dist/ClickableCard/ClickableCard.js +37 -4
- package/dist/ComplexSelector/ComplexSelector.d.ts.map +1 -1
- package/dist/ComplexSelector/ComplexSelector.js +41 -4
- package/dist/DateInput/DateInput.d.ts.map +1 -1
- package/dist/DateInput/DateInput.js +8 -3
- package/dist/DateInput/TouchDateField.d.ts.map +1 -1
- package/dist/DateInput/TouchDateField.js +8 -3
- package/dist/DateInput/Wheel.d.ts.map +1 -1
- package/dist/DateInput/Wheel.js +11 -7
- package/dist/DateInput/usePointerDragScroll.d.ts +10 -1
- package/dist/DateInput/usePointerDragScroll.d.ts.map +1 -1
- package/dist/DateInput/usePointerDragScroll.js +25 -9
- package/dist/DateInput/useScrollSettle.d.ts +3 -1
- package/dist/DateInput/useScrollSettle.d.ts.map +1 -1
- package/dist/DateInput/useScrollSettle.js +37 -8
- package/dist/DateTimeInput/DateTimeInput.d.ts +5 -2
- package/dist/DateTimeInput/DateTimeInput.d.ts.map +1 -1
- package/dist/DateTimeInput/DateTimeInput.js +19 -11
- package/dist/DateTimeInput/NativeTimeSegment.d.ts.map +1 -1
- package/dist/DateTimeInput/NativeTimeSegment.js +5 -4
- package/dist/DateTimeInput/TouchDateTimeField.d.ts.map +1 -1
- package/dist/DateTimeInput/TouchDateTimeField.js +4 -3
- package/dist/Drawer/Drawer.d.ts +1 -0
- package/dist/Drawer/Drawer.d.ts.map +1 -1
- package/dist/Drawer/Drawer.js +2 -2
- package/dist/DropdownMenu/DropdownMenu.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenu.js +3 -2
- package/dist/DropdownMenu/lazyMenuBottomSheet.d.ts +17 -8
- package/dist/DropdownMenu/lazyMenuBottomSheet.d.ts.map +1 -1
- package/dist/DropdownMenu/lazyMenuBottomSheet.js +23 -9
- package/dist/Item/Item.d.ts.map +1 -1
- package/dist/Item/Item.js +19 -6
- package/dist/Layer/popoverOperations.d.ts +27 -0
- package/dist/Layer/popoverOperations.d.ts.map +1 -0
- package/dist/Layer/popoverOperations.js +159 -0
- package/dist/Layer/useLayer.d.ts +1 -1
- package/dist/Layer/useLayer.d.ts.map +1 -1
- package/dist/Layer/useLayer.js +93 -59
- package/dist/Link/Link.d.ts.map +1 -1
- package/dist/Link/Link.js +8 -3
- package/dist/MultiSelector/CreateRow.a11y.chromium.spec.js +7 -6
- package/dist/MultiSelector/MultiSelector.d.ts.map +1 -1
- package/dist/MultiSelector/MultiSelector.js +21 -8
- package/dist/NavMenu/NavHeadingMenuItem.d.ts.map +1 -1
- package/dist/NavMenu/NavHeadingMenuItem.js +5 -29
- package/dist/NumberInput/NumberInput.d.ts.map +1 -1
- package/dist/NumberInput/NumberInput.js +23 -2
- package/dist/NumberInput/numberParser.d.ts +3 -0
- package/dist/NumberInput/numberParser.d.ts.map +1 -1
- package/dist/NumberInput/numberParser.js +7 -44
- package/dist/Popover/Popover.d.ts.map +1 -1
- package/dist/Popover/Popover.js +32 -12
- package/dist/RadioList/RadioListItem.d.ts.map +1 -1
- package/dist/RadioList/RadioListItem.js +6 -1
- package/dist/SideNav/SideNavItem.d.ts +2 -2
- package/dist/SideNav/SideNavItem.d.ts.map +1 -1
- package/dist/SideNav/SideNavItem.js +18 -7
- package/dist/Skeleton/Skeleton.d.ts.map +1 -1
- package/dist/Skeleton/Skeleton.js +1 -1
- package/dist/Slider/Slider.d.ts.map +1 -1
- package/dist/Slider/Slider.js +3 -1
- package/dist/Spinner/Spinner.d.ts.map +1 -1
- package/dist/Spinner/Spinner.js +1 -1
- package/dist/Stepper/Step.d.ts.map +1 -1
- package/dist/Stepper/Step.js +26 -6
- package/dist/Switch/Switch.d.ts.map +1 -1
- package/dist/Switch/Switch.js +5 -2
- package/dist/TimeInput/TimeInput.d.ts +6 -2
- package/dist/TimeInput/TimeInput.d.ts.map +1 -1
- package/dist/TimeInput/TimeInput.js +21 -14
- package/dist/TimeInput/TouchTimeField.d.ts.map +1 -1
- package/dist/TimeInput/TouchTimeField.js +5 -4
- package/dist/Toast/Toast.d.ts.map +1 -1
- package/dist/Toast/Toast.js +60 -20
- package/dist/Toast/ToastViewport.d.ts.map +1 -1
- package/dist/Toast/ToastViewport.js +19 -3
- package/dist/TopNav/TopNavMegaMenu.d.ts.map +1 -1
- package/dist/TopNav/TopNavMegaMenu.js +3 -0
- package/dist/TopNav/TopNavMenu.d.ts.map +1 -1
- package/dist/TopNav/TopNavMenu.js +1 -0
- package/dist/TreeList/TreeListItem.d.ts.map +1 -1
- package/dist/TreeList/TreeListItem.js +27 -4
- package/dist/astryx.css +11 -3
- package/dist/gestures/GestureArena.d.ts +32 -1
- package/dist/gestures/GestureArena.d.ts.map +1 -1
- package/dist/gestures/GestureArena.js +110 -9
- package/dist/gestures/GestureHost.d.ts +351 -0
- package/dist/gestures/GestureHost.d.ts.map +1 -0
- package/dist/gestures/GestureHost.js +1773 -0
- package/dist/gestures/GestureRecognizer.d.ts +13 -1
- package/dist/gestures/GestureRecognizer.d.ts.map +1 -1
- package/dist/gestures/GestureRecognizer.js +19 -1
- package/dist/gestures/LongPressGestureRecognizer.d.ts +1 -0
- package/dist/gestures/LongPressGestureRecognizer.d.ts.map +1 -1
- package/dist/gestures/LongPressGestureRecognizer.js +3 -0
- package/dist/gestures/PanGestureRecognizer.d.ts +1 -0
- package/dist/gestures/PanGestureRecognizer.d.ts.map +1 -1
- package/dist/gestures/PanGestureRecognizer.js +3 -0
- package/dist/gestures/PinchGestureRecognizer.d.ts +1 -0
- package/dist/gestures/PinchGestureRecognizer.d.ts.map +1 -1
- package/dist/gestures/PinchGestureRecognizer.js +3 -0
- package/dist/gestures/PressTracker.d.ts +112 -0
- package/dist/gestures/PressTracker.d.ts.map +1 -0
- package/dist/gestures/PressTracker.js +267 -0
- package/dist/gestures/ScreenEdgePanGestureRecognizer.d.ts +1 -0
- package/dist/gestures/ScreenEdgePanGestureRecognizer.d.ts.map +1 -1
- package/dist/gestures/ScreenEdgePanGestureRecognizer.js +3 -0
- package/dist/gestures/SwipeGestureRecognizer.d.ts +1 -0
- package/dist/gestures/SwipeGestureRecognizer.d.ts.map +1 -1
- package/dist/gestures/SwipeGestureRecognizer.js +3 -0
- package/dist/gestures/TapGestureRecognizer.d.ts +1 -0
- package/dist/gestures/TapGestureRecognizer.d.ts.map +1 -1
- package/dist/gestures/TapGestureRecognizer.js +3 -0
- package/dist/gestures/haptics.d.ts +65 -0
- package/dist/gestures/haptics.d.ts.map +1 -0
- package/dist/gestures/haptics.js +182 -0
- package/dist/gestures/index.d.ts +37 -0
- package/dist/gestures/index.d.ts.map +1 -0
- package/dist/gestures/index.js +25 -0
- package/dist/gestures/nativeScroll.d.ts +42 -0
- package/dist/gestures/nativeScroll.d.ts.map +1 -0
- package/dist/gestures/nativeScroll.js +228 -0
- package/dist/gestures/touchAction.d.ts +60 -0
- package/dist/gestures/touchAction.d.ts.map +1 -0
- package/dist/gestures/touchAction.js +157 -0
- package/dist/gestures/touchActionRule.d.ts +34 -0
- package/dist/gestures/touchActionRule.d.ts.map +1 -0
- package/dist/gestures/touchActionRule.js +140 -0
- package/dist/gestures/types.d.ts +7 -0
- package/dist/gestures/types.d.ts.map +1 -1
- package/dist/gestures/useGestureRecognizer.d.ts +56 -0
- package/dist/gestures/useGestureRecognizer.d.ts.map +1 -0
- package/dist/gestures/useGestureRecognizer.js +226 -0
- package/dist/hooks/index.d.ts +1 -1
- package/dist/hooks/index.d.ts.map +1 -1
- package/dist/hooks/modalAnnounce.d.ts.map +1 -1
- package/dist/hooks/modalAnnounce.js +107 -61
- package/dist/hooks/scrollKeyboardDelegation.d.ts.map +1 -1
- package/dist/hooks/scrollKeyboardDelegation.js +7 -3
- package/dist/hooks/useAnnounce.d.ts +101 -42
- package/dist/hooks/useAnnounce.d.ts.map +1 -1
- package/dist/hooks/useAnnounce.js +161 -75
- package/dist/hooks/useAnnounceRenderedText.d.ts +11 -3
- package/dist/hooks/useAnnounceRenderedText.d.ts.map +1 -1
- package/dist/hooks/useAnnounceRenderedText.js +5 -3
- package/dist/hooks/useBusyAnnouncement.d.ts.map +1 -1
- package/dist/hooks/useBusyAnnouncement.js +6 -12
- package/dist/hooks/useScrollOverflow.d.ts +2 -1
- package/dist/hooks/useScrollOverflow.d.ts.map +1 -1
- package/dist/hooks/useScrollOverflow.js +56 -10
- package/dist/i18n/generated-locales/en.generated.d.ts.map +1 -1
- package/dist/i18n/generated-locales/en.generated.js +3 -0
- package/dist/i18n/generated-locales/pseudo.generated.d.ts.map +1 -1
- package/dist/i18n/generated-locales/pseudo.generated.js +3 -0
- package/dist/motion/animator.d.ts +76 -7
- package/dist/motion/animator.d.ts.map +1 -1
- package/dist/motion/animator.js +589 -99
- package/dist/motion/coast.d.ts +4 -1
- package/dist/motion/coast.d.ts.map +1 -1
- package/dist/motion/coast.js +4 -2
- package/dist/motion/reducedMotion.d.ts.map +1 -1
- package/dist/motion/reducedMotion.js +6 -2
- package/dist/motion/reducedMotionPlan.d.ts +7 -0
- package/dist/motion/reducedMotionPlan.d.ts.map +1 -1
- package/dist/motion/reducedMotionPlan.js +14 -1
- package/dist/motion/resolveMotion.d.ts +42 -0
- package/dist/motion/resolveMotion.d.ts.map +1 -0
- package/dist/motion/resolveMotion.js +43 -0
- package/dist/motion/roleValue.d.ts +2 -1
- package/dist/motion/roleValue.d.ts.map +1 -1
- package/dist/motion/roleValue.js +2 -1
- package/dist/motion/uikit/timing.d.ts +7 -1
- package/dist/motion/uikit/timing.d.ts.map +1 -1
- package/dist/motion/uikit/timing.js +19 -1
- package/dist/theme/defineTheme.d.ts +19 -5
- package/dist/theme/defineTheme.d.ts.map +1 -1
- package/dist/theme/defineTheme.js +63 -3
- package/dist/theme/index.d.ts +1 -0
- package/dist/theme/index.d.ts.map +1 -1
- package/dist/theme/motionKnobs.d.ts +56 -0
- package/dist/theme/motionKnobs.d.ts.map +1 -0
- package/dist/theme/motionKnobs.js +48 -0
- package/dist/theme/resolveThemeValues.d.ts +11 -4
- package/dist/theme/resolveThemeValues.d.ts.map +1 -1
- package/dist/theme/resolveThemeValues.js +40 -4
- package/dist/theme/themeAdaptations.d.ts +7 -3
- package/dist/theme/themeAdaptations.d.ts.map +1 -1
- package/dist/theme/themeAdaptations.js +36 -7
- package/dist/theme/themeMotion.d.ts +96 -0
- package/dist/theme/themeMotion.d.ts.map +1 -0
- package/dist/theme/themeMotion.js +177 -0
- package/dist/theme/tokenReferences.d.ts +31 -0
- package/dist/theme/tokenReferences.d.ts.map +1 -0
- package/dist/theme/tokenReferences.js +132 -0
- package/dist/theme/tokens.d.ts +1 -0
- package/dist/theme/tokens.d.ts.map +1 -1
- package/dist/theme/tokens.js +9 -129
- package/dist/theme/tokens.stylex.d.ts +12 -0
- package/dist/theme/tokens.stylex.d.ts.map +1 -1
- package/dist/theme/tokens.stylex.js +12 -0
- package/dist/utils/focusOutline.stylex.d.ts +6 -0
- package/dist/utils/focusOutline.stylex.d.ts.map +1 -1
- package/dist/utils/focusOutline.stylex.js +7 -0
- package/dist/utils/interactionOverlay.stylex.d.ts.map +1 -1
- package/dist/utils/interactionOverlay.stylex.js +17 -8
- package/dist/utils/plainDate.d.ts +2 -0
- package/dist/utils/plainDate.d.ts.map +1 -1
- package/dist/utils/plainDate.js +46 -3
- package/dist/utils/pressFeedback.d.ts.map +1 -1
- package/dist/utils/pressFeedback.js +20 -1
- package/dist/utils/primaryClick.d.ts +11 -0
- package/dist/utils/primaryClick.d.ts.map +1 -0
- package/dist/utils/primaryClick.js +25 -0
- package/dist/utils/sharedMutationObserver.d.ts +19 -11
- package/dist/utils/sharedMutationObserver.d.ts.map +1 -1
- package/dist/utils/sharedMutationObserver.js +66 -26
- package/dist/utils/timeFormat.d.ts +47 -0
- package/dist/utils/timeFormat.d.ts.map +1 -0
- package/dist/utils/timeFormat.js +240 -0
- package/dist/utils/touchPresentation.d.ts +2 -2
- package/dist/utils/touchPresentation.d.ts.map +1 -1
- package/dist/utils/touchPresentation.js +8 -5
- package/dist/utils/touchQueries.d.ts +13 -0
- package/dist/utils/touchQueries.d.ts.map +1 -0
- package/dist/utils/touchQueries.js +15 -0
- package/dist/utils/unicodeDigits.d.ts +20 -0
- package/dist/utils/unicodeDigits.d.ts.map +1 -0
- package/dist/utils/unicodeDigits.js +70 -0
- package/dist/utils/useFocusAcrossSwap.d.ts +19 -0
- package/dist/utils/useFocusAcrossSwap.d.ts.map +1 -0
- package/dist/utils/useFocusAcrossSwap.js +41 -0
- package/locales/en.json +14 -2
- package/locales/pseudo.json +9 -0
- package/package.json +4 -4
- package/src/AppShell/AppShell.doc.mjs +1 -1
- package/src/AppShell/AppShell.spec.md +9 -12
- package/src/AppShell/AppShell.test.tsx +164 -2
- package/src/AppShell/AppShell.tsx +225 -5
- package/src/AppShell/__tests__/AppShellMainKeyboard.a11y.browser.spec.ts +534 -0
- package/src/AppShell/observeMainOverflow.test.ts +173 -0
- package/src/AppShell/observeMainOverflow.ts +143 -0
- package/src/Badge/Badge.doc.mjs +1 -1
- package/src/Badge/Badge.tsx +19 -2
- package/src/Badge/__tests__/BadgeLargerText.a11y.chromium.spec.ts +260 -0
- package/src/Carousel/Carousel.doc.mjs +1 -1
- package/src/Carousel/Carousel.spec.md +9 -9
- package/src/Carousel/Carousel.test.tsx +124 -3
- package/src/Carousel/Carousel.tsx +10 -2
- package/src/Carousel/__tests__/Carousel.a11y.known-failures.ts +1 -16
- package/src/Chat/ChatComposer.spec.md +75 -59
- package/src/Chat/ChatComposerTokenElement.spec.md +45 -33
- package/src/ClickableCard/ClickableCard.test.tsx +96 -0
- package/src/ClickableCard/ClickableCard.tsx +48 -4
- package/src/ComplexSelector/ComplexSelector.test.tsx +148 -0
- package/src/ComplexSelector/ComplexSelector.tsx +41 -4
- package/src/DateInput/DateInput.test.tsx +62 -1
- package/src/DateInput/DateInput.tsx +14 -3
- package/src/DateInput/DateInputTouch.test.tsx +120 -0
- package/src/DateInput/TouchDateField.tsx +14 -3
- package/src/DateInput/Wheel.tsx +9 -6
- package/src/DateInput/usePointerDragScroll.ts +34 -10
- package/src/DateInput/useScrollSettle.ts +38 -7
- package/src/DateTimeInput/DateTimeInput.doc.mjs +10 -8
- package/src/DateTimeInput/DateTimeInput.spec.md +27 -26
- package/src/DateTimeInput/DateTimeInput.test.tsx +20 -0
- package/src/DateTimeInput/DateTimeInput.tsx +31 -13
- package/src/DateTimeInput/NativeTimeSegment.tsx +4 -6
- package/src/DateTimeInput/TouchDateTimeField.tsx +3 -7
- package/src/Drawer/Drawer.test.tsx +13 -0
- package/src/Drawer/Drawer.tsx +8 -2
- package/src/Drawer/__tests__/DrawerNonModalPageScroll.a11y.chromium.spec.ts +267 -0
- package/src/DropdownMenu/DropdownMenu.tsx +3 -2
- package/src/DropdownMenu/lazyMenuBottomSheet.test.ts +16 -9
- package/src/DropdownMenu/lazyMenuBottomSheet.ts +21 -9
- package/src/Item/Item.test.tsx +60 -0
- package/src/Item/Item.tsx +14 -7
- package/src/Kbd/Kbd.spec.md +81 -38
- package/src/Layer/__tests__/LayerBrowserHide.a11y.chromium.spec.ts +126 -0
- package/src/Layer/popoverOperations.test.ts +205 -0
- package/src/Layer/popoverOperations.ts +172 -0
- package/src/Layer/useLayer.test.tsx +348 -1
- package/src/Layer/useLayer.tsx +118 -71
- package/src/Link/Link.spec.md +3 -2
- package/src/Link/Link.tsx +11 -0
- package/src/Link/__tests__/Link.truncation.a11y.chromium.spec.ts +58 -0
- package/src/List/ListItem.spec.md +205 -0
- package/src/MetadataList/MetadataList.spec.md +187 -0
- package/src/MetadataList/MetadataListItem.spec.md +165 -0
- package/src/MultiSelector/CreateRow.a11y.chromium.spec.ts +7 -8
- package/src/MultiSelector/MultiSelector.test.tsx +152 -0
- package/src/MultiSelector/MultiSelector.tsx +19 -8
- package/src/NavMenu/NavHeadingMenuItem.tsx +5 -39
- package/src/NumberInput/NumberInput.test.tsx +68 -7
- package/src/NumberInput/NumberInput.tsx +31 -1
- package/src/NumberInput/numberParser.ts +7 -45
- package/src/OverflowList/OverflowList.spec.md +102 -55
- package/src/Pagination/Pagination.spec.md +158 -84
- package/src/Popover/Popover.test.tsx +40 -0
- package/src/Popover/Popover.tsx +34 -14
- package/src/Popover/__tests__/PopoverSecondDocument.a11y.chromium.spec.ts +70 -8
- package/src/RadioList/RadioList.spec.md +1 -1
- package/src/RadioList/RadioList.test.tsx +28 -0
- package/src/RadioList/RadioListItem.tsx +6 -0
- package/src/Resizable/Resizable.spec.md +144 -124
- package/src/SideNav/SideNav.test.tsx +124 -4
- package/src/SideNav/SideNavItem.spec.md +14 -24
- package/src/SideNav/SideNavItem.tsx +27 -10
- package/src/SideNav/__tests__/SideNavRailMotion.interaction.browser.spec.ts +176 -51
- package/src/Skeleton/Skeleton.tsx +3 -1
- package/src/Slider/Slider.test.tsx +19 -0
- package/src/Slider/Slider.tsx +4 -2
- package/src/Spinner/Spinner.tsx +3 -1
- package/src/Stepper/Step.spec.md +36 -42
- package/src/Stepper/Step.tsx +33 -6
- package/src/Stepper/Stepper.doc.mjs +1 -1
- package/src/Stepper/Stepper.test.tsx +69 -7
- package/src/Switch/Switch.spec.md +1 -1
- package/src/Switch/Switch.test.tsx +21 -1
- package/src/Switch/Switch.tsx +5 -1
- package/src/TabList/TabList.test.tsx +7 -4
- package/src/TimeInput/NativeTimeInput.test.tsx +17 -0
- package/src/TimeInput/Presentation.test.tsx +21 -0
- package/src/TimeInput/TimeInput.doc.mjs +8 -8
- package/src/TimeInput/TimeInput.spec.md +58 -61
- package/src/TimeInput/TimeInput.test.tsx +76 -0
- package/src/TimeInput/TimeInput.tsx +36 -18
- package/src/TimeInput/TouchTimeField.tsx +4 -6
- package/src/Toast/Toast.spec.md +9 -15
- package/src/Toast/Toast.tsx +104 -36
- package/src/Toast/ToastViewport.test.tsx +223 -0
- package/src/Toast/ToastViewport.tsx +21 -3
- package/src/TopNav/TopNavMegaMenu.test.tsx +21 -0
- package/src/TopNav/TopNavMegaMenu.tsx +4 -1
- package/src/TopNav/TopNavMenu.test.tsx +17 -0
- package/src/TopNav/TopNavMenu.tsx +1 -0
- package/src/TreeList/TreeList.test.tsx +26 -0
- package/src/TreeList/TreeListItem.tsx +26 -4
- package/src/__tests__/internalModulesNotExperimental.test.ts +88 -0
- package/src/__tests__/pressState.ts +8 -4
- package/src/gestures/GestureArena.ts +111 -11
- package/src/gestures/GestureHost.ts +2064 -0
- package/src/gestures/GestureRecognizer.ts +21 -1
- package/src/gestures/LongPressGestureRecognizer.ts +4 -0
- package/src/gestures/PanGestureRecognizer.ts +4 -0
- package/src/gestures/PinchGestureRecognizer.ts +4 -0
- package/src/gestures/PressTracker.ts +386 -0
- package/src/gestures/README.md +420 -0
- package/src/gestures/ScreenEdgePanGestureRecognizer.ts +4 -0
- package/src/gestures/SwipeGestureRecognizer.ts +4 -0
- package/src/gestures/TapGestureRecognizer.ts +4 -0
- package/src/gestures/__tests__/GestureHost.test.ts +2136 -0
- package/src/gestures/__tests__/PressTracker.test.ts +275 -0
- package/src/gestures/__tests__/arena.test.ts +40 -0
- package/src/gestures/__tests__/arenaPinchSwipeEdge.test.ts +5 -0
- package/src/gestures/__tests__/browser/build-fixture.mjs +46 -0
- package/src/gestures/__tests__/browser/fixture.ts +307 -0
- package/src/gestures/__tests__/browser/gestures.interaction.browser.spec.ts +1137 -0
- package/src/gestures/__tests__/browserNegotiation.test.ts +293 -0
- package/src/gestures/__tests__/haptics.test.ts +187 -0
- package/src/gestures/__tests__/harness.ts +31 -2
- package/src/gestures/__tests__/pressTrackerFactory.test.ts +59 -0
- package/src/gestures/__tests__/recognizerKind.test.ts +78 -0
- package/src/gestures/__tests__/touchActionRule.test.ts +54 -0
- package/src/gestures/__tests__/useGestureRecognizer.test.tsx +570 -0
- package/src/gestures/haptics.ts +203 -0
- package/src/gestures/index.ts +79 -0
- package/src/gestures/nativeScroll.ts +277 -0
- package/src/gestures/touchAction.ts +191 -0
- package/src/gestures/touchActionRule.ts +157 -0
- package/src/gestures/types.ts +7 -0
- package/src/gestures/useGestureRecognizer.ts +305 -0
- package/src/hooks/index.ts +5 -1
- package/src/hooks/modalAnnounce.ts +129 -72
- package/src/hooks/scrollKeyboardDelegation.test.ts +33 -0
- package/src/hooks/scrollKeyboardDelegation.ts +9 -3
- package/src/hooks/useAnnounce.doc.mjs +35 -3
- package/src/hooks/useAnnounce.replace.test.tsx +516 -0
- package/src/hooks/useAnnounce.ts +209 -102
- package/src/hooks/useAnnounceRenderedText.adopters.test.tsx +10 -1
- package/src/hooks/useAnnounceRenderedText.ts +17 -3
- package/src/hooks/useBusyAnnouncement.ts +7 -10
- package/src/hooks/useScrollOverflow.doc.mjs +1 -1
- package/src/hooks/useScrollOverflow.test.tsx +102 -1
- package/src/hooks/useScrollOverflow.ts +59 -10
- package/src/i18n/generated-locales/en.generated.ts +3 -0
- package/src/i18n/generated-locales/pseudo.generated.ts +3 -0
- package/src/motion/MEASUREMENTS.md +2 -1
- package/src/motion/README.md +101 -32
- package/src/motion/__tests__/animator.interaction.browser.spec.ts +843 -0
- package/src/motion/__tests__/motionBundle.ts +14 -0
- package/src/motion/animator.test.ts +978 -33
- package/src/motion/animator.ts +790 -104
- package/src/motion/coast.ts +10 -3
- package/src/motion/reducedMotion.ts +12 -2
- package/src/motion/reducedMotionPlan.test.ts +26 -0
- package/src/motion/reducedMotionPlan.ts +20 -1
- package/src/motion/resolveMotion.test.ts +123 -0
- package/src/motion/resolveMotion.ts +68 -0
- package/src/motion/roleValue.ts +2 -1
- package/src/motion/roles.test.ts +16 -0
- package/src/motion/uikit/tableImports.test.ts +293 -0
- package/src/motion/uikit/timing.ts +15 -1
- package/src/motion/uikit/values.test.ts +23 -12
- package/src/theme/Theme.doc.mjs +1 -1
- package/src/theme/defineTheme.ts +116 -7
- package/src/theme/expandMotionScale.test.ts +1 -1
- package/src/theme/index.ts +5 -0
- package/src/theme/motionKnobs.ts +82 -0
- package/src/theme/resolveThemeValues.ts +68 -6
- package/src/theme/themeAdaptations.ts +52 -12
- package/src/theme/themeMotion.test.ts +620 -0
- package/src/theme/themeMotion.ts +221 -0
- package/src/theme/tokenReferences.ts +149 -0
- package/src/theme/tokens.stylex.ts +10 -0
- package/src/theme/tokens.ts +15 -158
- package/src/utils/focusOutline.stylex.ts +28 -0
- package/src/utils/interactionOverlay.stylex.ts +12 -3
- package/src/utils/plainDate.test.ts +90 -0
- package/src/utils/plainDate.ts +58 -3
- package/src/utils/pressFeedback.test.ts +138 -0
- package/src/utils/pressFeedback.ts +34 -11
- package/src/utils/pressGesture.test.ts +9 -0
- package/src/utils/primaryClick.test.ts +38 -0
- package/src/utils/primaryClick.ts +28 -0
- package/src/utils/sharedMutationObserver.test.ts +54 -1
- package/src/utils/sharedMutationObserver.ts +87 -29
- package/src/utils/timeFormat.test.ts +204 -0
- package/src/utils/timeFormat.ts +314 -0
- package/src/utils/touchPresentation.ts +8 -5
- package/src/utils/touchQueries.ts +15 -0
- package/src/utils/unicodeDigits.test.ts +44 -0
- package/src/utils/unicodeDigits.ts +71 -0
- package/src/utils/useFocusAcrossSwap.ts +55 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../src/AppShell/AppShell.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../src/AppShell/AppShell.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAiCf,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAW5C,OAAO,EAEL,KAAK,mBAAmB,EACzB,MAAM,2BAA2B,CAAC;AACnC,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,SAAS,CAAC;AAwChD;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,GAAG,MAAM,CAAC;AAE9D;;;;;;;GAOG;AAEH;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,kBAAkB,CAAC;AAEvD;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAEhC;;;;;;;;;;OAUG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,WAAW,CAAC;IAE7B;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEzB;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,eAAe,GAAG,SAAS,CAAC;IAEhD;;;;;;;;;;;;;;;;;;;;;;;;;OAyBG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAuOD,wBAAgB,QAAQ,CAAC,EACvB,OAAoB,EACpB,MAAM,EACN,QAAQ,EACR,cAAc,EACd,aAAa,EAAE,UAAU,EACzB,MAAe,EACf,SAAS,EACT,OAAO,EACP,MAAM,EACN,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,aAAa,qBA6wBf;yBA5xBe,QAAQ"}
|
|
@@ -23,7 +23,7 @@ import React from 'react';
|
|
|
23
23
|
import { isValidElement, useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
|
|
24
24
|
import * as stylex from '@stylexjs/stylex';
|
|
25
25
|
import "../theme/tokens.stylex.js";
|
|
26
|
-
import { colorVars, fontWeightVars, radiusVars, spacingVars, typeScaleVars } from "../theme/tokens.stylex.js";
|
|
26
|
+
import { colorVars, focusVars, fontWeightVars, radiusVars, spacingVars, typeScaleVars } from "../theme/tokens.stylex.js";
|
|
27
27
|
import { Layout } from "../Layout/Layout.js";
|
|
28
28
|
import { LayoutHeader } from "../Layout/LayoutHeader.js";
|
|
29
29
|
import { LayoutPanel } from "../Layout/LayoutPanel.js";
|
|
@@ -38,7 +38,7 @@ import { TopNavRenderContext } from "../TopNav/TopNavRenderContext.js";
|
|
|
38
38
|
import { TopNavMobileContentContext } from "../TopNav/TopNavMobileContentContext.js";
|
|
39
39
|
import { AppShellMobileContext } from "./AppShellMobileContext.js";
|
|
40
40
|
import { mergeProps, isRenderable } from "../utils/index.js";
|
|
41
|
-
import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
|
|
41
|
+
import { focusOutlineProps, focusOutlineStyles } from "../utils/focusOutline.stylex.js";
|
|
42
42
|
import { useMediaQuery } from "../hooks/useMediaQuery.js";
|
|
43
43
|
import { observeResize } from "../utils/sharedResizeObserver.js";
|
|
44
44
|
import { themeProps } from "../utils/themeProps.js";
|
|
@@ -46,6 +46,8 @@ import { useTranslator } from "../i18n/index.js";
|
|
|
46
46
|
import { useThemeDefinition } from "../theme/useTheme.js";
|
|
47
47
|
import { DEFAULT_WIDTH_BREAKPOINTS } from "../theme/themeAdaptations.js";
|
|
48
48
|
import { useMergedRefs } from "../hooks/useMergedRefs.js";
|
|
49
|
+
import { attachScrollKeyboardDelegation } from "../hooks/scrollKeyboardDelegation.js";
|
|
50
|
+
import { observeMainOverflow } from "./observeMainOverflow.js";
|
|
49
51
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
50
52
|
const HasActivity = typeof React.Activity !== 'undefined';
|
|
51
53
|
const ActivityWrapper = HasActivity ? ({
|
|
@@ -168,6 +170,14 @@ const styles = {
|
|
|
168
170
|
kI3sdo: "x1uvtmcs",
|
|
169
171
|
$$css: true
|
|
170
172
|
},
|
|
173
|
+
mainElevatedCorner: {
|
|
174
|
+
krdFHd: "x9a4xmf",
|
|
175
|
+
$$css: true
|
|
176
|
+
},
|
|
177
|
+
mainScrollRegionInset: {
|
|
178
|
+
kInvED: "x1wfwxd8 x1nw7mhf",
|
|
179
|
+
$$css: true
|
|
180
|
+
},
|
|
171
181
|
contentBgSurface: {
|
|
172
182
|
kWkggS: "x10xzikg",
|
|
173
183
|
$$css: true
|
|
@@ -332,9 +342,87 @@ export function AppShell({
|
|
|
332
342
|
const handleSkipLinkClick = useCallback(() => {
|
|
333
343
|
document.getElementById(MAIN_CONTENT_ID)?.focus();
|
|
334
344
|
}, []);
|
|
345
|
+
|
|
346
|
+
// Main draws its focus ring only for focus a Tab press moved onto it, and
|
|
347
|
+
// keeps it for as long as that focus stays, even once the content fits.
|
|
348
|
+
// Programmatic focus (the skip link, a script's focus() on a route change)
|
|
349
|
+
// draws none (FR4), even after keyboard input, where :focus-visible alone
|
|
350
|
+
// would match. See the effect below for how a Tab move is told apart.
|
|
351
|
+
const [isTabFocus, setIsTabFocus] = useState(false);
|
|
352
|
+
// A window or tab switch blurs main without moving focus off it: main stays
|
|
353
|
+
// the document's active element, and focus comes back to it with no Tab
|
|
354
|
+
// press. The ring holds across that round trip; any real focus move ends it.
|
|
355
|
+
const isMainAwayRef = useRef(false);
|
|
356
|
+
const handleMainBlur = useCallback(event => {
|
|
357
|
+
if (event.target !== event.currentTarget) {
|
|
358
|
+
return;
|
|
359
|
+
}
|
|
360
|
+
if (document.activeElement === event.currentTarget) {
|
|
361
|
+
isMainAwayRef.current = true;
|
|
362
|
+
return;
|
|
363
|
+
}
|
|
364
|
+
isMainAwayRef.current = false;
|
|
365
|
+
setIsTabFocus(false);
|
|
366
|
+
}, []);
|
|
335
367
|
const isFill = height === 'fill';
|
|
336
368
|
const isAuto = height === 'auto';
|
|
337
369
|
|
|
370
|
+
// With `fill`, main is the page's scroller. While its content overflows it
|
|
371
|
+
// must be reachable from the keyboard even when nothing inside it is
|
|
372
|
+
// focusable (AST-025 FR12): it joins the tab order, and Tab entry moves on
|
|
373
|
+
// to its first link or button when it has one. Only `fill` observes main
|
|
374
|
+
// (PR1); LayoutContent keeps owning main's overflow and styles.
|
|
375
|
+
const [isMainOverflowing, setIsMainOverflowing] = useState(false);
|
|
376
|
+
const isMainScrollRegion = isFill && isMainOverflowing;
|
|
377
|
+
// Main's node is owned through a ref, never React state. Under `fill` its
|
|
378
|
+
// overflow is observed while the node is attached, and while main is a
|
|
379
|
+
// scroll region the keyboard delegation is attached to it. The ref callback
|
|
380
|
+
// changes with `fill`, so switching modes detaches and re-attaches main in
|
|
381
|
+
// the same commit; a detached or replaced node releases both before the new
|
|
382
|
+
// node takes over.
|
|
383
|
+
const mainNodeRef = useRef(null);
|
|
384
|
+
const mainOverflowRef = useRef(null);
|
|
385
|
+
const mainDelegationRef = useRef(null);
|
|
386
|
+
const isMainScrollRegionRef = useRef(isMainScrollRegion);
|
|
387
|
+
const syncMainDelegation = useCallback(() => {
|
|
388
|
+
const node = isMainScrollRegionRef.current ? mainNodeRef.current : null;
|
|
389
|
+
const current = mainDelegationRef.current;
|
|
390
|
+
if (current?.node === node) {
|
|
391
|
+
return;
|
|
392
|
+
}
|
|
393
|
+
current?.release();
|
|
394
|
+
mainDelegationRef.current = node == null ? null : {
|
|
395
|
+
node,
|
|
396
|
+
release: attachScrollKeyboardDelegation(node, node)
|
|
397
|
+
};
|
|
398
|
+
}, []);
|
|
399
|
+
const setMainNode = useCallback(node => {
|
|
400
|
+
mainNodeRef.current = node;
|
|
401
|
+
const observed = isFill ? node : null;
|
|
402
|
+
const current = mainOverflowRef.current;
|
|
403
|
+
if (current?.node !== observed) {
|
|
404
|
+
current?.stop();
|
|
405
|
+
mainOverflowRef.current = observed == null ? null : {
|
|
406
|
+
node: observed,
|
|
407
|
+
stop: observeMainOverflow(observed, setIsMainOverflowing)
|
|
408
|
+
};
|
|
409
|
+
if (observed == null) {
|
|
410
|
+
setIsMainOverflowing(false);
|
|
411
|
+
}
|
|
412
|
+
}
|
|
413
|
+
syncMainDelegation();
|
|
414
|
+
}, [isFill, syncMainDelegation]);
|
|
415
|
+
useEffect(() => {
|
|
416
|
+
isMainScrollRegionRef.current = isMainScrollRegion;
|
|
417
|
+
syncMainDelegation();
|
|
418
|
+
}, [isMainScrollRegion, syncMainDelegation]);
|
|
419
|
+
useEffect(() => () => {
|
|
420
|
+
mainOverflowRef.current?.stop();
|
|
421
|
+
mainOverflowRef.current = null;
|
|
422
|
+
mainDelegationRef.current?.release();
|
|
423
|
+
mainDelegationRef.current = null;
|
|
424
|
+
}, []);
|
|
425
|
+
|
|
338
426
|
// Nav style derived values
|
|
339
427
|
const hasBanner = isRenderable(banner);
|
|
340
428
|
const hasTopNav = isRenderable(topNav);
|
|
@@ -459,6 +547,9 @@ export function AppShell({
|
|
|
459
547
|
// (`component:SideNav` FR6).
|
|
460
548
|
const railRef = useRef(null);
|
|
461
549
|
const mainRef = useRef(null);
|
|
550
|
+
// Main's node goes to the glide above and to the overflow observation
|
|
551
|
+
// that, under `fill`, makes main a keyboard stop.
|
|
552
|
+
const mainRefs = useMergedRefs(mainRef, setMainNode);
|
|
462
553
|
const backdropRef = useRef(null);
|
|
463
554
|
const contentLayout = useAnimatedLayout({
|
|
464
555
|
containerRef: shellRef
|
|
@@ -617,17 +708,104 @@ export function AppShell({
|
|
|
617
708
|
// Build main content
|
|
618
709
|
// =========================================================================
|
|
619
710
|
const shouldElevateWithCorner = isElevated && hasTopNav && showSideNavInline;
|
|
711
|
+
// While main is a keyboard stop, a Tab keydown anywhere in the document
|
|
712
|
+
// (capture, so Shift+Tab from the page start counts too) marks the next
|
|
713
|
+
// focus move, and so does the window's focus event for keyboard focus that
|
|
714
|
+
// enters the document from outside (Tab or Shift+Tab from the page
|
|
715
|
+
// embedding this one), where the browser's own `:focus-visible` then tells
|
|
716
|
+
// a key from a pointer. A mark counts only once its event's dispatch has
|
|
717
|
+
// finished uncancelled (`eventPhase === 0`): the browser's own focus move
|
|
718
|
+
// follows that dispatch in the same task, while a focus() a page's handler
|
|
719
|
+
// calls during it is programmatic and draws no ring (FR4). The marks expire
|
|
720
|
+
// on a zero-delay timer, so a cancelled Tab, a Tab out of the document or a
|
|
721
|
+
// window focus with nothing focused leaves nothing for a later focus().
|
|
722
|
+
useEffect(() => {
|
|
723
|
+
if (!isMainScrollRegion) {
|
|
724
|
+
return;
|
|
725
|
+
}
|
|
726
|
+
let tabKeydown = null;
|
|
727
|
+
let windowFocus = null;
|
|
728
|
+
let expiry;
|
|
729
|
+
const expireMarks = () => {
|
|
730
|
+
clearTimeout(expiry);
|
|
731
|
+
expiry = setTimeout(() => {
|
|
732
|
+
tabKeydown = null;
|
|
733
|
+
windowFocus = null;
|
|
734
|
+
}, 0);
|
|
735
|
+
};
|
|
736
|
+
const onKeyDown = event => {
|
|
737
|
+
tabKeydown = event.key === 'Tab' ? event : null;
|
|
738
|
+
windowFocus = null;
|
|
739
|
+
expireMarks();
|
|
740
|
+
};
|
|
741
|
+
const onPointerDown = () => {
|
|
742
|
+
tabKeydown = null;
|
|
743
|
+
windowFocus = null;
|
|
744
|
+
};
|
|
745
|
+
const onWindowFocus = event => {
|
|
746
|
+
windowFocus = event;
|
|
747
|
+
expireMarks();
|
|
748
|
+
};
|
|
749
|
+
const onFocusIn = event => {
|
|
750
|
+
// Still dispatching: this focus move is a handler's focus(), so it
|
|
751
|
+
// reads no mark and leaves the mark for the browser's own move.
|
|
752
|
+
const tabDone = tabKeydown != null && tabKeydown.eventPhase === 0;
|
|
753
|
+
const focusDone = windowFocus != null && windowFocus.eventPhase === 0;
|
|
754
|
+
const arrivedByTab = tabDone && tabKeydown?.defaultPrevented === false;
|
|
755
|
+
const enteredDocument = focusDone;
|
|
756
|
+
if (tabDone) {
|
|
757
|
+
tabKeydown = null;
|
|
758
|
+
}
|
|
759
|
+
if (focusDone) {
|
|
760
|
+
windowFocus = null;
|
|
761
|
+
}
|
|
762
|
+
const main = mainNodeRef.current;
|
|
763
|
+
const isMain = event.target != null && event.target === main;
|
|
764
|
+
if (isMainAwayRef.current) {
|
|
765
|
+
// Focus comes back after a window or tab switch (main keeps the ring
|
|
766
|
+
// it had), or lands elsewhere (main's ring is over).
|
|
767
|
+
isMainAwayRef.current = false;
|
|
768
|
+
if (isMain && !arrivedByTab) {
|
|
769
|
+
return;
|
|
770
|
+
}
|
|
771
|
+
if (!isMain) {
|
|
772
|
+
setIsTabFocus(false);
|
|
773
|
+
return;
|
|
774
|
+
}
|
|
775
|
+
}
|
|
776
|
+
if (isMain) {
|
|
777
|
+
setIsTabFocus(arrivedByTab || enteredDocument && main.matches(':focus-visible'));
|
|
778
|
+
}
|
|
779
|
+
};
|
|
780
|
+
document.addEventListener('keydown', onKeyDown, true);
|
|
781
|
+
document.addEventListener('pointerdown', onPointerDown, true);
|
|
782
|
+
document.addEventListener('focusin', onFocusIn, true);
|
|
783
|
+
window.addEventListener('focus', onWindowFocus);
|
|
784
|
+
return () => {
|
|
785
|
+
document.removeEventListener('keydown', onKeyDown, true);
|
|
786
|
+
document.removeEventListener('pointerdown', onPointerDown, true);
|
|
787
|
+
document.removeEventListener('focusin', onFocusIn, true);
|
|
788
|
+
window.removeEventListener('focus', onWindowFocus);
|
|
789
|
+
clearTimeout(expiry);
|
|
790
|
+
};
|
|
791
|
+
}, [isMainScrollRegion]);
|
|
792
|
+
|
|
793
|
+
// Tab focus on main draws the ring until main loses focus; programmatic
|
|
794
|
+
// focus never does (FR4).
|
|
795
|
+
const drawsMainFocusRing = isTabFocus;
|
|
620
796
|
const mainInner = /*#__PURE__*/_jsx(LayoutContent, {
|
|
621
|
-
ref:
|
|
797
|
+
ref: mainRefs,
|
|
622
798
|
padding: contentPadding ?? 0,
|
|
623
799
|
role: "main",
|
|
624
800
|
id: MAIN_CONTENT_ID
|
|
625
801
|
// Focusable skip-link target (WCAG 2.4.1) — without tabIndex, several
|
|
626
802
|
// browsers won't move focus to the div when the skip link is activated.
|
|
803
|
+
// A keyboard stop only while it scrolls overflowing content.
|
|
627
804
|
,
|
|
628
|
-
tabIndex: -1,
|
|
805
|
+
tabIndex: isMainScrollRegion ? 0 : -1,
|
|
629
806
|
isScrollable: isFill,
|
|
630
|
-
|
|
807
|
+
onBlur: handleMainBlur,
|
|
808
|
+
xstyle: [contentAreaStyle, drawsMainFocusRing && shouldElevateWithCorner && styles.mainElevatedCorner, drawsMainFocusRing ? [focusOutlineStyles.focusVisible, styles.mainScrollRegionInset] : styles.mainFocusTarget],
|
|
631
809
|
children: children
|
|
632
810
|
});
|
|
633
811
|
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Calls `onChange` with whether `main`'s content overflows it on either axis:
|
|
3
|
+
* once with the first measurement, then whenever the answer changes. Signals
|
|
4
|
+
* coalesce into one measurement per frame. A hidden, disconnected or
|
|
5
|
+
* zero-size main is unknown rather than fitting: the last answer stands until
|
|
6
|
+
* a later signal measures it.
|
|
7
|
+
*/
|
|
8
|
+
export declare function observeMainOverflow(main: HTMLElement, onChange: (overflows: boolean) => void): () => void;
|
|
9
|
+
//# sourceMappingURL=observeMainOverflow.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"observeMainOverflow.d.ts","sourceRoot":"","sources":["../../src/AppShell/observeMainOverflow.ts"],"names":[],"mappings":"AAyCA;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,WAAW,EACjB,QAAQ,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,GACrC,MAAM,IAAI,CA2FZ"}
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
|
+
|
|
3
|
+
'use client';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* @file observeMainOverflow.ts
|
|
7
|
+
* @input AppShell's main region under `height="fill"`: its own scroll
|
|
8
|
+
* container, holding its content as direct children with no wrapper
|
|
9
|
+
* @output observeMainOverflow(main, onChange): reports whether main's content
|
|
10
|
+
* overflows it on either axis, once at the start and on every change, and
|
|
11
|
+
* returns the function that stops observing
|
|
12
|
+
* @position Internal to AppShell and never exported. AppShell makes main a
|
|
13
|
+
* keyboard stop only while it overflows (`spec:AST-025` FR12,
|
|
14
|
+
* `component:AppShell` FR4 and PR1). Main has no inner content box, so its
|
|
15
|
+
* content grows inside it without resizing it: its direct children's sizes
|
|
16
|
+
* are watched instead.
|
|
17
|
+
*
|
|
18
|
+
* SYNC: When modified, update:
|
|
19
|
+
* - /packages/core/src/AppShell/AppShell.tsx
|
|
20
|
+
* - /packages/core/src/AppShell/observeMainOverflow.test.ts
|
|
21
|
+
*/
|
|
22
|
+
import { getLogicalAxisMapping, measureLogicalScrollAxis } from "../hooks/scrollGeometry.js";
|
|
23
|
+
import { observeMutations } from "../utils/sharedMutationObserver.js";
|
|
24
|
+
import { observeResize } from "../utils/sharedResizeObserver.js";
|
|
25
|
+
|
|
26
|
+
/**
|
|
27
|
+
* Main's content: layout attributes, text and children, all the way down.
|
|
28
|
+
* One shared observer serves every registration with these options.
|
|
29
|
+
*/
|
|
30
|
+
const CONTENT_MUTATIONS = {
|
|
31
|
+
attributes: true,
|
|
32
|
+
attributeFilter: ['class', 'dir', 'hidden', 'style'],
|
|
33
|
+
characterData: true,
|
|
34
|
+
childList: true,
|
|
35
|
+
subtree: true
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
/**
|
|
39
|
+
* Calls `onChange` with whether `main`'s content overflows it on either axis:
|
|
40
|
+
* once with the first measurement, then whenever the answer changes. Signals
|
|
41
|
+
* coalesce into one measurement per frame. A hidden, disconnected or
|
|
42
|
+
* zero-size main is unknown rather than fitting: the last answer stands until
|
|
43
|
+
* a later signal measures it.
|
|
44
|
+
*/
|
|
45
|
+
export function observeMainOverflow(main, onChange) {
|
|
46
|
+
let isActive = true;
|
|
47
|
+
let frame = null;
|
|
48
|
+
let overflows = null;
|
|
49
|
+
const measure = () => {
|
|
50
|
+
frame = null;
|
|
51
|
+
if (!isActive) {
|
|
52
|
+
return;
|
|
53
|
+
}
|
|
54
|
+
const computedStyle = getComputedStyle(main);
|
|
55
|
+
const mapping = getLogicalAxisMapping(computedStyle.writingMode, computedStyle.direction);
|
|
56
|
+
const inline = measureLogicalScrollAxis(main, 'inline', mapping);
|
|
57
|
+
const block = measureLogicalScrollAxis(main, 'block', mapping);
|
|
58
|
+
if (inline == null || block == null) {
|
|
59
|
+
return;
|
|
60
|
+
}
|
|
61
|
+
const next = inline.isScrollable || block.isScrollable;
|
|
62
|
+
if (next !== overflows) {
|
|
63
|
+
overflows = next;
|
|
64
|
+
onChange(next);
|
|
65
|
+
}
|
|
66
|
+
};
|
|
67
|
+
const scheduleMeasure = () => {
|
|
68
|
+
if (isActive && frame == null) {
|
|
69
|
+
frame = window.requestAnimationFrame(measure);
|
|
70
|
+
}
|
|
71
|
+
};
|
|
72
|
+
|
|
73
|
+
// Main keeps its size while its content grows; its children do not. Each
|
|
74
|
+
// direct child's size is watched, following the children as they change.
|
|
75
|
+
const childObservers = new Map();
|
|
76
|
+
const syncChildObservers = () => {
|
|
77
|
+
const children = new Set(Array.from(main.children));
|
|
78
|
+
for (const [child, stop] of childObservers) {
|
|
79
|
+
if (!children.has(child)) {
|
|
80
|
+
stop();
|
|
81
|
+
childObservers.delete(child);
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
for (const child of children) {
|
|
85
|
+
if (!childObservers.has(child)) {
|
|
86
|
+
childObservers.set(child, observeResize(child, scheduleMeasure));
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
};
|
|
90
|
+
const onContentChange = () => {
|
|
91
|
+
syncChildObservers();
|
|
92
|
+
scheduleMeasure();
|
|
93
|
+
};
|
|
94
|
+
measure();
|
|
95
|
+
syncChildObservers();
|
|
96
|
+
const stopObservingMain = observeResize(main, scheduleMeasure);
|
|
97
|
+
const stopObservingContent = observeMutations(main, CONTENT_MUTATIONS, onContentChange);
|
|
98
|
+
window.addEventListener('resize', scheduleMeasure);
|
|
99
|
+
window.visualViewport?.addEventListener('resize', scheduleMeasure);
|
|
100
|
+
main.addEventListener('load', scheduleMeasure, true);
|
|
101
|
+
main.addEventListener('transitionend', scheduleMeasure);
|
|
102
|
+
main.addEventListener('animationend', scheduleMeasure);
|
|
103
|
+
const fonts = document.fonts;
|
|
104
|
+
fonts?.addEventListener?.('loadingdone', scheduleMeasure);
|
|
105
|
+
void fonts?.ready.then(scheduleMeasure);
|
|
106
|
+
return () => {
|
|
107
|
+
isActive = false;
|
|
108
|
+
if (frame != null) {
|
|
109
|
+
window.cancelAnimationFrame(frame);
|
|
110
|
+
frame = null;
|
|
111
|
+
}
|
|
112
|
+
stopObservingMain();
|
|
113
|
+
stopObservingContent();
|
|
114
|
+
for (const stop of childObservers.values()) {
|
|
115
|
+
stop();
|
|
116
|
+
}
|
|
117
|
+
childObservers.clear();
|
|
118
|
+
window.removeEventListener('resize', scheduleMeasure);
|
|
119
|
+
window.visualViewport?.removeEventListener('resize', scheduleMeasure);
|
|
120
|
+
main.removeEventListener('load', scheduleMeasure, true);
|
|
121
|
+
main.removeEventListener('transitionend', scheduleMeasure);
|
|
122
|
+
main.removeEventListener('animationend', scheduleMeasure);
|
|
123
|
+
fonts?.removeEventListener?.('loadingdone', scheduleMeasure);
|
|
124
|
+
};
|
|
125
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../src/Badge/Badge.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAW5C,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../src/Badge/Badge.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAW5C,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AAwJ7C;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,eAAe,CAAC;AAEjD,MAAM,WAAW,UAAW,SAAQ,SAAS,CAAC,eAAe,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACjC;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,KAAK,CAAC,EACpB,OAAmB,EACnB,KAAK,EACL,IAAI,EACJ,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,UAAU,+BA6CZ;yBAtDe,KAAK"}
|
package/dist/Badge/Badge.js
CHANGED
|
@@ -41,6 +41,10 @@ const styles = {
|
|
|
41
41
|
ks0D6T: "x193iq5w",
|
|
42
42
|
k7Eaqz: "xeuugli",
|
|
43
43
|
$$css: true
|
|
44
|
+
},
|
|
45
|
+
grows: {
|
|
46
|
+
kAzted: "x1tn5z8q",
|
|
47
|
+
$$css: true
|
|
44
48
|
}
|
|
45
49
|
};
|
|
46
50
|
|
|
@@ -182,11 +186,13 @@ export function Badge({
|
|
|
182
186
|
// really cut, reachable by hover and by focus — needs that measurement and
|
|
183
187
|
// a client component, so it is tracked in #5585.
|
|
184
188
|
const labelTitle = typeof label === 'number' ? String(label) : typeof label === 'string' && label.length > 0 ? label : undefined;
|
|
189
|
+
// Whether the label renders anything, which is when the badge grows with it.
|
|
190
|
+
const hasLabel = label !== '' && label != null && typeof label !== 'boolean';
|
|
185
191
|
return /*#__PURE__*/_jsxs("span", {
|
|
186
192
|
ref: ref,
|
|
187
193
|
...mergeProps(themeProps('badge', {
|
|
188
194
|
variant
|
|
189
|
-
}), stylex.props(styles.base, variants[variant], xstyle), className, style),
|
|
195
|
+
}), stylex.props(styles.base, hasLabel && styles.grows, variants[variant], xstyle), className, style),
|
|
190
196
|
title: labelTitle,
|
|
191
197
|
...props,
|
|
192
198
|
children: [icon, /*#__PURE__*/_jsx("span", {
|
|
@@ -10,7 +10,9 @@
|
|
|
10
10
|
* scroll control. Exposes APG
|
|
11
11
|
* carousel semantics: the root is a labelled region with
|
|
12
12
|
* aria-roledescription="carousel" and each item wrapper is a group with
|
|
13
|
-
* aria-roledescription="slide" named "Slide N of M".
|
|
13
|
+
* aria-roledescription="slide" named "Slide N of M". The scroll area is a
|
|
14
|
+
* group named like the carousel and a tab stop only while its content
|
|
15
|
+
* overflows (AST-025 FR12).
|
|
14
16
|
*
|
|
15
17
|
* SYNC: When modified, update:
|
|
16
18
|
* - /packages/core/src/Carousel/index.ts (exports)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../src/Carousel/Carousel.tsx"],"names":[],"mappings":"AAIA
|
|
1
|
+
{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../src/Carousel/Carousel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;GAoBG;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,+BA+Xf;yBA/Ye,QAAQ"}
|
|
@@ -14,7 +14,9 @@
|
|
|
14
14
|
* scroll control. Exposes APG
|
|
15
15
|
* carousel semantics: the root is a labelled region with
|
|
16
16
|
* aria-roledescription="carousel" and each item wrapper is a group with
|
|
17
|
-
* aria-roledescription="slide" named "Slide N of M".
|
|
17
|
+
* aria-roledescription="slide" named "Slide N of M". The scroll area is a
|
|
18
|
+
* group named like the carousel and a tab stop only while its content
|
|
19
|
+
* overflows (AST-025 FR12).
|
|
18
20
|
*
|
|
19
21
|
* SYNC: When modified, update:
|
|
20
22
|
* - /packages/core/src/Carousel/index.ts (exports)
|
|
@@ -447,8 +449,15 @@ export function Carousel({
|
|
|
447
449
|
"aria-label": ariaLabel,
|
|
448
450
|
"aria-roledescription": "carousel",
|
|
449
451
|
children: [/*#__PURE__*/_jsx("div", {
|
|
450
|
-
ref: composedRef
|
|
451
|
-
|
|
452
|
+
ref: composedRef
|
|
453
|
+
// The scroll area takes keyboard scrolling (spec:AST-025 FR12): a
|
|
454
|
+
// group named like the carousel, in the tab order only while its
|
|
455
|
+
// content overflows. While it fits it still takes focus
|
|
456
|
+
// programmatically, for the edge buttons' hand-off (FR2).
|
|
457
|
+
,
|
|
458
|
+
role: "group",
|
|
459
|
+
"aria-label": ariaLabel,
|
|
460
|
+
tabIndex: hasOverflow ? 0 : -1,
|
|
452
461
|
onWheel: handleWheel,
|
|
453
462
|
...mergeProps(themeProps('carousel-scroller', {
|
|
454
463
|
gap,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ClickableCard.d.ts","sourceRoot":"","sources":["../../src/ClickableCard/ClickableCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,
|
|
1
|
+
{"version":3,"file":"ClickableCard.d.ts","sourceRoot":"","sources":["../../src/ClickableCard/ClickableCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,EACL,KAAK,SAAS,EACd,KAAK,UAAU,EAGf,KAAK,GAAG,EACT,MAAM,OAAO,CAAC;AASf,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;AAwJ5C,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,+BA+HpB;yBAlJe,aAAa"}
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
* For static display, use Card.
|
|
29
29
|
* For toggle selection, use SelectableCard.
|
|
30
30
|
*/
|
|
31
|
-
import { useRef } from 'react';
|
|
31
|
+
import { useCallback, useRef } from 'react';
|
|
32
32
|
import * as stylex from '@stylexjs/stylex';
|
|
33
33
|
import "../theme/tokens.stylex.js";
|
|
34
34
|
import { borderVars, colorVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
|
|
@@ -166,6 +166,36 @@ export function ClickableCard({
|
|
|
166
166
|
const pressable = usePressFeedback();
|
|
167
167
|
const containerRef = useRef(null);
|
|
168
168
|
const interactiveRef = useRef(null);
|
|
169
|
+
const restoreFocusRef = useRef(false);
|
|
170
|
+
// The isDisabled value of the link that just detached: a link card that
|
|
171
|
+
// flips it replaces its hidden link (router component and plain anchor),
|
|
172
|
+
// and only that replacement takes focus back.
|
|
173
|
+
const detachedDisabledRef = useRef(null);
|
|
174
|
+
|
|
175
|
+
// A focused link remounts when isDisabled changes: the replacement takes
|
|
176
|
+
// focus back, without scrolling, if focus fell to the page. Any other
|
|
177
|
+
// detach and attach (a hidden Activity or Suspense boundary revealed
|
|
178
|
+
// again) leaves focus where the person put it.
|
|
179
|
+
const setInteractiveRef = useCallback(node => {
|
|
180
|
+
if (node == null) {
|
|
181
|
+
const previous = interactiveRef.current;
|
|
182
|
+
restoreFocusRef.current = previous != null && previous === previous.ownerDocument.activeElement;
|
|
183
|
+
detachedDisabledRef.current = isDisabled;
|
|
184
|
+
interactiveRef.current = null;
|
|
185
|
+
return;
|
|
186
|
+
}
|
|
187
|
+
interactiveRef.current = node;
|
|
188
|
+
const isFlip = detachedDisabledRef.current != null && detachedDisabledRef.current !== isDisabled;
|
|
189
|
+
const active = node.ownerDocument.activeElement;
|
|
190
|
+
const hasFallen = active == null || active === node.ownerDocument.body;
|
|
191
|
+
if (restoreFocusRef.current && isFlip && hasFallen) {
|
|
192
|
+
node.focus({
|
|
193
|
+
preventScroll: true
|
|
194
|
+
});
|
|
195
|
+
}
|
|
196
|
+
restoreFocusRef.current = false;
|
|
197
|
+
detachedDisabledRef.current = null;
|
|
198
|
+
}, [isDisabled]);
|
|
169
199
|
const LinkComponent = useLinkComponent();
|
|
170
200
|
const {
|
|
171
201
|
onClick,
|
|
@@ -184,6 +214,9 @@ export function ClickableCard({
|
|
|
184
214
|
} : onMouseUp;
|
|
185
215
|
const isLink = href != null;
|
|
186
216
|
|
|
217
|
+
// Disabled links have no href, so bypass the router and render an anchor.
|
|
218
|
+
const LinkRoot = isDisabled ? 'a' : LinkComponent;
|
|
219
|
+
|
|
187
220
|
// Only the `default` variant has a visible border. Card draws a transparent
|
|
188
221
|
// 1px border on every other variant purely to avoid layout jitter; we drop
|
|
189
222
|
// it here so the hover overlay covers the full box with no untinted ring.
|
|
@@ -207,8 +240,8 @@ export function ClickableCard({
|
|
|
207
240
|
onClick: !isDisabled ? onClick : undefined,
|
|
208
241
|
onMouseUp: !isDisabled ? handleMouseUp : undefined,
|
|
209
242
|
...props,
|
|
210
|
-
children: [isLink ? /*#__PURE__*/_jsx(
|
|
211
|
-
ref:
|
|
243
|
+
children: [isLink ? /*#__PURE__*/_jsx(LinkRoot, {
|
|
244
|
+
ref: setInteractiveRef,
|
|
212
245
|
href: isDisabled ? undefined : href,
|
|
213
246
|
target: isDisabled ? undefined : target,
|
|
214
247
|
role: isDisabled ? 'link' : undefined,
|
|
@@ -222,7 +255,7 @@ export function ClickableCard({
|
|
|
222
255
|
className: "x10l6tqk x1i1rx1s xjm9jq1 x1717udv xkdpibf xb3r6kr xzpqnlu xuxw1ft xc342km"
|
|
223
256
|
}
|
|
224
257
|
}) : /*#__PURE__*/_jsx("button", {
|
|
225
|
-
ref:
|
|
258
|
+
ref: setInteractiveRef,
|
|
226
259
|
type: "button",
|
|
227
260
|
"aria-label": label,
|
|
228
261
|
"aria-disabled": isDisabled || undefined,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComplexSelector.d.ts","sourceRoot":"","sources":["../../src/ComplexSelector/ComplexSelector.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,EAQZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAEL,KAAK,mBAAmB,EACxB,KAAK,mBAAmB,EACzB,MAAM,qBAAqB,CAAC;AAK7B,OAAO,EAA4B,KAAK,kBAAkB,EAAC,MAAM,UAAU,CAAC;AAC5E,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAI5D,OAAO,KAAK,EAAC,cAAc,EAAE,cAAc,EAAC,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"ComplexSelector.d.ts","sourceRoot":"","sources":["../../src/ComplexSelector/ComplexSelector.tsx"],"names":[],"mappings":"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"}
|