@astryxdesign/core 0.7.8 → 0.7.9-canary.0a64fdb
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/observeMainOverflow.d.ts.map +1 -1
- package/dist/AppShell/observeMainOverflow.js +9 -6
- package/dist/BottomSheet/BottomSheet.d.ts.map +1 -1
- package/dist/BottomSheet/BottomSheet.js +5 -0
- package/dist/Calendar/styles.d.ts +1 -1
- package/dist/CheckboxInput/CheckboxInput.d.ts.map +1 -1
- package/dist/CheckboxInput/CheckboxInput.js +54 -11
- package/dist/ClickableCard/ClickableCard.d.ts +1 -1
- package/dist/ClickableCard/ClickableCard.d.ts.map +1 -1
- package/dist/ClickableCard/ClickableCard.js +5 -1
- package/dist/DateInput/PickerWheel.d.ts.map +1 -1
- package/dist/DateInput/PickerWheel.js +7 -1
- package/dist/DateRangeInput/DateRangeInput.js +1 -1
- package/dist/Dialog/Dialog.d.ts +2 -1
- package/dist/Dialog/Dialog.d.ts.map +1 -1
- package/dist/Dialog/Dialog.js +12 -1
- package/dist/Drawer/useDrawerDialogPresence.d.ts +2 -1
- package/dist/Drawer/useDrawerDialogPresence.d.ts.map +1 -1
- package/dist/Drawer/useDrawerDialogPresence.js +11 -2
- package/dist/DropdownMenu/DropdownMenu.d.ts +9 -1
- package/dist/DropdownMenu/DropdownMenu.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenu.js +9 -4
- package/dist/DropdownMenu/DropdownMenuCheckboxItem.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenuCheckboxItem.js +3 -2
- package/dist/DropdownMenu/DropdownMenuItem.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenuItem.js +3 -2
- package/dist/DropdownMenu/DropdownMenuRadioItem.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenuRadioItem.js +3 -2
- package/dist/DropdownMenu/DropdownMenuSubMenu.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenuSubMenu.js +3 -2
- package/dist/Field/inputDisabledFocus.d.ts +4 -4
- package/dist/Field/inputStyles.stylex.d.ts +1 -1
- package/dist/FileInput/FileInput.d.ts.map +1 -1
- package/dist/FileInput/FileInput.js +16 -2
- package/dist/Icon/Icon.d.ts +1 -1
- package/dist/InfoTip/InfoTip.d.ts +1 -0
- package/dist/InfoTip/InfoTip.d.ts.map +1 -1
- package/dist/InfoTip/InfoTip.js +1 -0
- package/dist/InputGroup/InputGroup.d.ts +4 -3
- package/dist/InputGroup/InputGroup.d.ts.map +1 -1
- package/dist/InputGroup/InputGroup.js +2 -2
- package/dist/InputGroup/groupStyles.d.ts +1 -1
- package/dist/InputGroup/groupStyles.d.ts.map +1 -1
- package/dist/InputGroup/groupStyles.js +1 -1
- package/dist/Item/Item.d.ts +2 -1
- package/dist/Item/Item.d.ts.map +1 -1
- package/dist/Item/Item.js +29 -6
- package/dist/Layer/holdEntranceInput.d.ts +24 -0
- package/dist/Layer/holdEntranceInput.d.ts.map +1 -0
- package/dist/Layer/holdEntranceInput.js +65 -0
- package/dist/Layer/inputHold.d.ts +49 -0
- package/dist/Layer/inputHold.d.ts.map +1 -0
- package/dist/Layer/inputHold.js +636 -0
- package/dist/Layer/preserveAnimations.d.ts +1 -5
- package/dist/Layer/preserveAnimations.d.ts.map +1 -1
- package/dist/Layer/preserveAnimations.js +12 -214
- package/dist/Layout/LayoutContent.d.ts +3 -1
- package/dist/Layout/LayoutContent.d.ts.map +1 -1
- package/dist/Layout/LayoutContent.js +12 -4
- package/dist/Layout/LayoutPanel.d.ts +4 -1
- package/dist/Layout/LayoutPanel.d.ts.map +1 -1
- package/dist/Layout/LayoutPanel.js +13 -4
- package/dist/Lightbox/Lightbox.d.ts.map +1 -1
- package/dist/Lightbox/Lightbox.js +4 -0
- package/dist/MetadataList/MetadataList.js +1 -1
- package/dist/MobileNav/MobileNav.d.ts +11 -1
- package/dist/MobileNav/MobileNav.d.ts.map +1 -1
- package/dist/MobileNav/MobileNav.js +39 -1
- package/dist/MoreMenu/MoreMenu.d.ts +5 -3
- package/dist/MoreMenu/MoreMenu.d.ts.map +1 -1
- package/dist/RadioList/RadioListItem.d.ts.map +1 -1
- package/dist/RadioList/RadioListItem.js +22 -4
- package/dist/SelectableCard/SelectableCard.d.ts +1 -1
- package/dist/SelectableCard/SelectableCard.d.ts.map +1 -1
- package/dist/SelectableCard/SelectableCard.js +5 -1
- package/dist/Spinner/Spinner.d.ts.map +1 -1
- package/dist/Spinner/Spinner.js +12 -2
- package/dist/Stack/StackItem.d.ts +8 -4
- package/dist/Stack/StackItem.d.ts.map +1 -1
- package/dist/Stack/StackItem.js +17 -4
- package/dist/Table/plugins/sortable/useTableSortable.js +1 -1
- package/dist/Token/Token.d.ts.map +1 -1
- package/dist/Token/Token.js +9 -0
- package/dist/Token/TokenLink.d.ts +1 -1
- package/dist/Token/TokenLink.d.ts.map +1 -1
- package/dist/Token/TokenLink.js +4 -1
- package/dist/Tooltip/useTooltip.d.ts.map +1 -1
- package/dist/Tooltip/useTooltip.js +162 -59
- package/dist/TreeList/TreeListItem.d.ts +2 -1
- package/dist/TreeList/TreeListItem.d.ts.map +1 -1
- package/dist/TreeList/TreeListItem.js +27 -3
- package/dist/astryx.css +35 -8
- package/dist/gestures/GestureHost.d.ts +2 -2
- package/dist/gestures/GestureHost.d.ts.map +1 -1
- package/dist/gestures/GestureHost.js +21 -6
- package/dist/gestures/PanGestureRecognizer.d.ts +11 -1
- package/dist/gestures/PanGestureRecognizer.d.ts.map +1 -1
- package/dist/gestures/PanGestureRecognizer.js +15 -1
- package/dist/gestures/ScreenEdgePanGestureRecognizer.d.ts +6 -1
- package/dist/gestures/ScreenEdgePanGestureRecognizer.d.ts.map +1 -1
- package/dist/gestures/nativeScroll.d.ts +3 -6
- package/dist/gestures/nativeScroll.d.ts.map +1 -1
- package/dist/gestures/nativeScroll.js +7 -52
- package/dist/gestures/wheelSegmenter.d.ts +68 -1
- package/dist/gestures/wheelSegmenter.d.ts.map +1 -1
- package/dist/gestures/wheelSegmenter.js +199 -10
- package/dist/hooks/StackItemScrollRegion.d.ts +31 -0
- package/dist/hooks/StackItemScrollRegion.d.ts.map +1 -0
- package/dist/hooks/StackItemScrollRegion.js +40 -0
- package/dist/hooks/menuPressGesture.d.ts +133 -21
- package/dist/hooks/menuPressGesture.d.ts.map +1 -1
- package/dist/hooks/menuPressGesture.js +155 -30
- package/dist/hooks/menuPressValues.d.ts +16 -0
- package/dist/hooks/menuPressValues.d.ts.map +1 -0
- package/dist/hooks/menuPressValues.js +18 -0
- package/dist/hooks/useClickableContainer.d.ts +27 -5
- package/dist/hooks/useClickableContainer.d.ts.map +1 -1
- package/dist/hooks/useClickableContainer.js +41 -5
- package/dist/hooks/useFocusTrap.d.ts +10 -0
- package/dist/hooks/useFocusTrap.d.ts.map +1 -1
- package/dist/hooks/useFocusTrap.js +225 -132
- package/dist/hooks/useMenuPress.d.ts +34 -1
- package/dist/hooks/useMenuPress.d.ts.map +1 -1
- package/dist/hooks/useMenuPress.js +93 -5
- package/dist/hooks/usePressFeedback.d.ts +6 -6
- package/dist/hooks/usePressFeedback.js +6 -6
- package/dist/hooks/useScrollRegionProps.d.ts +35 -0
- package/dist/hooks/useScrollRegionProps.d.ts.map +1 -0
- package/dist/hooks/useScrollRegionProps.js +51 -0
- package/dist/i18n/generated-english/hooks/useScrollRegionProps.generated.d.ts +8 -0
- package/dist/i18n/generated-english/hooks/useScrollRegionProps.generated.d.ts.map +1 -0
- package/dist/i18n/generated-english/hooks/useScrollRegionProps.generated.js +12 -0
- package/dist/i18n/generated-locales/en.generated.d.ts.map +1 -1
- package/dist/i18n/generated-locales/en.generated.js +1 -0
- package/dist/i18n/generated-locales/pseudo.generated.d.ts.map +1 -1
- package/dist/i18n/generated-locales/pseudo.generated.js +1 -0
- package/dist/motion/carryAnimations.d.ts +58 -0
- package/dist/motion/carryAnimations.d.ts.map +1 -0
- package/dist/motion/carryAnimations.js +305 -0
- package/dist/motion/transientCopy.d.ts +4 -2
- package/dist/motion/transientCopy.d.ts.map +1 -1
- package/dist/motion/transientCopy.js +34 -5
- package/dist/motion/uikit/gestures.d.ts +41 -0
- package/dist/motion/uikit/gestures.d.ts.map +1 -1
- package/dist/motion/uikit/gestures.js +25 -0
- package/dist/motion/uikit/index.d.ts +1 -1
- package/dist/motion/uikit/index.d.ts.map +1 -1
- package/dist/motion/uikit/index.js +1 -1
- package/dist/privateAttributes/menuPressLit.stylex.d.ts +52 -0
- package/dist/privateAttributes/menuPressLit.stylex.d.ts.map +1 -0
- package/dist/privateAttributes/menuPressLit.stylex.js +99 -0
- package/dist/privateAttributes/press.stylex.d.ts +139 -0
- package/dist/privateAttributes/press.stylex.d.ts.map +1 -0
- package/dist/privateAttributes/press.stylex.js +98 -0
- package/dist/theme/tokens.stylex.d.ts +2 -2
- package/dist/theme/tokens.stylex.js +1 -1
- package/dist/utils/flatTree.d.ts +6 -3
- package/dist/utils/flatTree.d.ts.map +1 -1
- package/dist/utils/flatTree.js +13 -3
- package/dist/utils/hitArea.d.ts.map +1 -1
- package/dist/utils/hitArea.js +82 -5
- package/dist/utils/inputStream.d.ts +14 -1
- package/dist/utils/inputStream.d.ts.map +1 -1
- package/dist/utils/inputStream.js +40 -9
- package/dist/utils/interactionOverlay.stylex.d.ts +2 -1
- package/dist/utils/interactionOverlay.stylex.d.ts.map +1 -1
- package/dist/utils/interactionOverlay.stylex.js +7 -2
- package/dist/utils/pressFeedback.d.ts +7 -0
- package/dist/utils/pressFeedback.d.ts.map +1 -1
- package/dist/utils/pressFeedback.js +32 -7
- package/dist/utils/pressGesture.d.ts +6 -0
- package/dist/utils/pressGesture.d.ts.map +1 -1
- package/dist/utils/pressGesture.js +17 -0
- package/dist/utils/rowPressLayer.stylex.d.ts +14 -0
- package/dist/utils/rowPressLayer.stylex.d.ts.map +1 -0
- package/dist/utils/rowPressLayer.stylex.js +25 -0
- package/dist/utils/scrollView.d.ts +25 -0
- package/dist/utils/scrollView.d.ts.map +1 -0
- package/dist/utils/scrollView.js +108 -0
- package/dist/utils/selectionLock.d.ts.map +1 -1
- package/dist/utils/selectionLock.js +1 -10
- package/dist/utils/touchHitArea.stylex.d.ts +35 -0
- package/dist/utils/touchHitArea.stylex.d.ts.map +1 -0
- package/dist/utils/touchHitArea.stylex.js +32 -0
- package/dist/utils/triggerFocus.d.ts +5 -0
- package/dist/utils/triggerFocus.d.ts.map +1 -1
- package/dist/utils/triggerFocus.js +9 -2
- package/locales/en.json +4 -0
- package/locales/pseudo.json +3 -0
- package/package.json +5 -5
- package/src/AppShell/observeMainOverflow.ts +9 -6
- package/src/BottomSheet/BottomSheet.tsx +5 -0
- package/src/CheckboxInput/CheckboxInput.doc.mjs +3 -2
- package/src/CheckboxInput/CheckboxInput.tsx +71 -9
- package/src/ClickableCard/ClickableCard.tsx +8 -1
- package/src/DateInput/PickerWheel.tsx +7 -2
- package/src/DateRangeInput/DateRangeInput.tsx +1 -1
- package/src/Dialog/Dialog.doc.mjs +1 -1
- package/src/Dialog/Dialog.tsx +12 -1
- package/src/Drawer/Drawer.doc.mjs +1 -1
- package/src/Drawer/useDrawerDialogPresence.ts +9 -2
- package/src/DropdownMenu/DropdownMenu.doc.mjs +1 -2
- package/src/DropdownMenu/DropdownMenu.tsx +29 -5
- package/src/DropdownMenu/DropdownMenuCheckboxItem.tsx +5 -1
- package/src/DropdownMenu/DropdownMenuItem.tsx +8 -4
- package/src/DropdownMenu/DropdownMenuRadioItem.tsx +5 -1
- package/src/DropdownMenu/DropdownMenuSubMenu.tsx +5 -1
- package/src/FileInput/FileInput.tsx +16 -2
- package/src/InfoTip/InfoTip.doc.mjs +26 -2
- package/src/InfoTip/InfoTip.tsx +1 -0
- package/src/InputGroup/InputGroup.doc.mjs +4 -3
- package/src/InputGroup/InputGroup.tsx +4 -3
- package/src/InputGroup/groupStyles.ts +3 -1
- package/src/Item/Item.tsx +51 -9
- package/src/Layer/holdEntranceInput.ts +84 -0
- package/src/Layer/inputHold.ts +734 -0
- package/src/Layer/preserveAnimations.ts +12 -275
- package/src/Layout/LayoutContent.doc.mjs +6 -3
- package/src/Layout/LayoutContent.tsx +10 -4
- package/src/Layout/LayoutPanel.doc.mjs +6 -3
- package/src/Layout/LayoutPanel.tsx +11 -4
- package/src/Lightbox/Lightbox.tsx +4 -0
- package/src/MetadataList/MetadataList.tsx +1 -1
- package/src/MobileNav/MobileNav.doc.mjs +3 -3
- package/src/MobileNav/MobileNav.tsx +39 -1
- package/src/MoreMenu/MoreMenu.doc.mjs +2 -4
- package/src/MoreMenu/MoreMenu.tsx +5 -3
- package/src/RadioList/RadioListItem.doc.mjs +3 -2
- package/src/RadioList/RadioListItem.tsx +25 -7
- package/src/SelectableCard/SelectableCard.tsx +8 -1
- package/src/Spinner/Spinner.tsx +13 -3
- package/src/Stack/Stack.doc.mjs +1 -1
- package/src/Stack/StackItem.tsx +27 -13
- package/src/Table/plugins/sortable/useTableSortable.tsx +1 -1
- package/src/Token/Token.tsx +18 -1
- package/src/Token/TokenLink.tsx +7 -1
- package/src/Tooltip/useTooltip.tsx +175 -79
- package/src/TreeList/TreeListItem.tsx +36 -2
- package/src/gestures/GestureHost.ts +21 -5
- package/src/gestures/PanGestureRecognizer.ts +19 -2
- package/src/gestures/README.md +14 -5
- package/src/gestures/ScreenEdgePanGestureRecognizer.ts +6 -1
- package/src/gestures/nativeScroll.ts +12 -68
- package/src/gestures/wheelSegmenter.ts +243 -10
- package/src/hooks/StackItemScrollRegion.tsx +57 -0
- package/src/hooks/menuPressGesture.ts +244 -38
- package/src/hooks/menuPressValues.ts +18 -0
- package/src/hooks/useClickableContainer.doc.mjs +8 -2
- package/src/hooks/useClickableContainer.ts +72 -6
- package/src/hooks/useFocusTrap.ts +268 -151
- package/src/hooks/useMenuPress.ts +118 -11
- package/src/hooks/usePressFeedback.doc.mjs +3 -3
- package/src/hooks/usePressFeedback.ts +6 -6
- package/src/hooks/useScrollRegionProps.ts +76 -0
- package/src/i18n/generated-english/hooks/useScrollRegionProps.generated.ts +13 -0
- package/src/i18n/generated-locales/en.generated.ts +1 -0
- package/src/i18n/generated-locales/pseudo.generated.ts +1 -0
- package/src/motion/MEASUREMENTS.md +11 -0
- package/src/motion/carryAnimations.ts +389 -0
- package/src/motion/transientCopy.ts +45 -5
- package/src/motion/uikit/gestures.ts +22 -0
- package/src/motion/uikit/index.ts +1 -0
- package/src/privateAttributes/menuPressLit.stylex.ts +104 -0
- package/src/privateAttributes/press.stylex.ts +244 -0
- package/src/theme/tokens.stylex.ts +1 -1
- package/src/utils/flatTree.ts +15 -3
- package/src/utils/hitArea.ts +107 -5
- package/src/utils/inputStream.ts +47 -10
- package/src/utils/interactionOverlay.stylex.ts +7 -2
- package/src/utils/pressFeedback.ts +31 -6
- package/src/utils/pressGesture.ts +24 -1
- package/src/utils/rowPressLayer.stylex.ts +27 -0
- package/src/utils/scrollView.ts +135 -0
- package/src/utils/selectionLock.ts +5 -10
- package/src/utils/touchHitArea.stylex.ts +41 -0
- package/src/utils/triggerFocus.ts +17 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"observeMainOverflow.d.ts","sourceRoot":"","sources":["../../src/AppShell/observeMainOverflow.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"observeMainOverflow.d.ts","sourceRoot":"","sources":["../../src/AppShell/observeMainOverflow.ts"],"names":[],"mappings":"AA4CA;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,WAAW,EACjB,QAAQ,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,GACrC,MAAM,IAAI,CA2FZ"}
|
|
@@ -4,20 +4,23 @@
|
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* @file observeMainOverflow.ts
|
|
7
|
-
* @input
|
|
8
|
-
*
|
|
7
|
+
* @input A scroll container that holds its content as direct children with
|
|
8
|
+
* no wrapper: AppShell's main region under `height="fill"`, or a scrolling
|
|
9
|
+
* LayoutContent, LayoutPanel or StackItem
|
|
9
10
|
* @output observeMainOverflow(main, onChange): reports whether main's content
|
|
10
11
|
* overflows it on either axis, once at the start and on every change, and
|
|
11
12
|
* returns the function that stops observing
|
|
12
|
-
* @position Internal
|
|
13
|
+
* @position Internal and never exported. AppShell makes main a
|
|
13
14
|
* keyboard stop only while it overflows (`spec:AST-025` FR12,
|
|
14
|
-
* `component:AppShell` FR4 and PR1).
|
|
15
|
-
*
|
|
16
|
-
*
|
|
15
|
+
* `component:AppShell` FR4 and PR1). useScrollRegionProps names a
|
|
16
|
+
* scrolling region only while it overflows. Main has no inner content
|
|
17
|
+
* box, so its content grows inside it without resizing it: its direct
|
|
18
|
+
* children's sizes are watched instead.
|
|
17
19
|
*
|
|
18
20
|
* SYNC: When modified, update:
|
|
19
21
|
* - /packages/core/src/AppShell/AppShell.tsx
|
|
20
22
|
* - /packages/core/src/AppShell/observeMainOverflow.test.ts
|
|
23
|
+
* - /packages/core/src/hooks/useScrollRegionProps.ts
|
|
21
24
|
*/
|
|
22
25
|
import { getLogicalAxisMapping, measureLogicalScrollAxis } from "../hooks/scrollGeometry.js";
|
|
23
26
|
import { observeMutations } from "../utils/sharedMutationObserver.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAuBH,OAAO,EAOL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,WAAW,CAAC;AAC7C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAuBH,OAAO,EAOL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,WAAW,CAAC;AAC7C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAyDhD,YAAY,EAAC,iBAAiB,EAAE,oBAAoB,EAAC,MAAM,oBAAoB,CAAC;AAChF,OAAO,KAAK,EAAC,iBAAiB,EAAE,oBAAoB,EAAC,MAAM,oBAAoB,CAAC;AAmLhF,UAAU,sBAAuB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAChE,qDAAqD;IACrD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IAEd,0EAA0E;IAC1E,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB,wGAAwG;IACxG,MAAM,CAAC,EAAE,iBAAiB,GAAG,MAAM,GAAG,MAAM,CAAC;IAE7C;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,aAAa,CAAC,oBAAoB,CAAC,CAAC;IAEjD;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB;AAED,UAAU,0BAA2B,SAAQ,sBAAsB;IACjE,MAAM,EAAE,OAAO,CAAC;IAChB,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC9C,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,UAAU,wBAAyB,SAAQ,sBAAsB;IAC/D;;;;OAIG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB;AAED,MAAM,MAAM,gBAAgB,GAC1B,0BAA0B,GAAG,wBAAwB,CAAC;AAy5BxD;;;GAGG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,+BA6BlD;yBA7Be,WAAW"}
|
|
@@ -64,6 +64,7 @@ import { LayerDepthProvider } from "../Layer/LayerDepthContext.js";
|
|
|
64
64
|
import { ModalAnnounceProvider } from "../hooks/ModalAnnounceProvider.js";
|
|
65
65
|
import { useModalOutlet } from "../Layer/modalOutlet.js";
|
|
66
66
|
import { useLayerDismissal } from "../Layer/useLayerDismissal.js";
|
|
67
|
+
import { useFocusRegionContainment } from "../hooks/useFocusTrap.js";
|
|
67
68
|
import { focusForLastInput } from "../utils/focusReturn.js";
|
|
68
69
|
import { useInteractionModalityTracking } from "../utils/interactionModality.js";
|
|
69
70
|
import { BottomSheetPanel } from "./BottomSheetPanel.js";
|
|
@@ -286,6 +287,10 @@ function StandaloneBottomSheet({
|
|
|
286
287
|
// settled entry's transition ends, so a later drag settle glides.
|
|
287
288
|
const [settledOpen, releaseSettledOpen] = useSettledOpen(isOpenProp, isOpen, false);
|
|
288
289
|
const isEntrySettled = settledOpen && isOpen;
|
|
290
|
+
// Only a modal sheet contains Tab; a non-modal one leaves the page's focus
|
|
291
|
+
// order alone. A closing sheet stops containing as soon as it starts to
|
|
292
|
+
// leave.
|
|
293
|
+
useFocusRegionContainment(dialogRef, isOpen && hasScrim);
|
|
289
294
|
// Presentation outlives the controlled prop: a closing sheet stays mounted
|
|
290
295
|
// and in its native host through its exit, and only its motion completion
|
|
291
296
|
// (or a replace finishing) clears it. The open flip is derived during
|
|
@@ -197,7 +197,7 @@ export declare const dayCellTheme: Readonly<{
|
|
|
197
197
|
}>;
|
|
198
198
|
readonly daySelected: Readonly<{
|
|
199
199
|
readonly forcedColorAdjust: stylex.StyleXClassNameFor<"forcedColorAdjust", "none">;
|
|
200
|
-
readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "light-dark(#0064E0, #
|
|
200
|
+
readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "light-dark(#0064E0, #0171E3)" | "Highlight">;
|
|
201
201
|
readonly color: stylex.StyleXClassNameFor<"color", "light-dark(#FFFFFF, #FFFFFF)" | "HighlightText">;
|
|
202
202
|
}>;
|
|
203
203
|
readonly dayDisabled: Readonly<{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxInput.d.ts","sourceRoot":"","sources":["../../src/CheckboxInput/CheckboxInput.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAML,KAAK,WAAW,EAChB,KAAK,UAAU,
|
|
1
|
+
{"version":3,"file":"CheckboxInput.d.ts","sourceRoot":"","sources":["../../src/CheckboxInput/CheckboxInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -36,6 +36,8 @@ import { usePressFeedback } from "../hooks/usePressFeedback.js";
|
|
|
36
36
|
import { useIndicator } from "../Indicator/useIndicator.js";
|
|
37
37
|
import { themeProps } from "../utils/themeProps.js";
|
|
38
38
|
import { useMergedRefs } from "../hooks/useMergedRefs.js";
|
|
39
|
+
import { watchHitArea, writeHitInsets } from "../utils/hitArea.js";
|
|
40
|
+
import { touchHitAreaStyles } from "../utils/touchHitArea.stylex.js";
|
|
39
41
|
import { registerEnglishFallback, useComponentTranslator } from "../i18n/useComponentTranslator.js";
|
|
40
42
|
import english from "../i18n/generated-english/CheckboxInput/CheckboxInput.generated.js";
|
|
41
43
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
@@ -62,6 +64,10 @@ const styles = {
|
|
|
62
64
|
kOIVth: "xxhr3t",
|
|
63
65
|
$$css: true
|
|
64
66
|
},
|
|
67
|
+
hitAreaHost: {
|
|
68
|
+
kVAEAm: "xrxqdxo",
|
|
69
|
+
$$css: true
|
|
70
|
+
},
|
|
65
71
|
indicatorPressImage: {
|
|
66
72
|
"--_indicator-press-image": "x1dueop1 x189o2zt",
|
|
67
73
|
$$css: true
|
|
@@ -210,6 +216,49 @@ export function CheckboxInput({
|
|
|
210
216
|
const {
|
|
211
217
|
focusProps
|
|
212
218
|
} = useIndicatorFocusRing(indicatorRef);
|
|
219
|
+
|
|
220
|
+
// Under a coarse pointer a labelled checkbox's row grows toward 44 px
|
|
221
|
+
// through an invisible band, and nothing changes size. A label-hidden
|
|
222
|
+
// checkbox is a marker in another component's row, which keeps its target.
|
|
223
|
+
const hasHitArea = !isLabelHidden && !isDisabled && !isReadOnly;
|
|
224
|
+
const inputRef = useRef(null);
|
|
225
|
+
// The watch lives as long as the row is attached: the ref's cleanup stops
|
|
226
|
+
// it, and a replaced row starts its own.
|
|
227
|
+
const watchRowHitArea = useCallback(row => {
|
|
228
|
+
if (row == null || !hasHitArea) {
|
|
229
|
+
return;
|
|
230
|
+
}
|
|
231
|
+
return watchHitArea(row, insets => writeHitInsets(row, insets));
|
|
232
|
+
}, [hasHitArea]);
|
|
233
|
+
// The disabled-message tooltip listens for hover and focus on the whole
|
|
234
|
+
// row, a larger trigger. It anchors on the checkbox itself (below), so it
|
|
235
|
+
// shows next to the control. Its handlers check isEnabled, so the row
|
|
236
|
+
// always attaches them.
|
|
237
|
+
const rowRef = useMergedRefs(disabledMessageTooltip.interactionRef, watchRowHitArea);
|
|
238
|
+
// Where a press on the row itself began. A browser can move a tap's click
|
|
239
|
+
// onto the row's edge, so the band is judged from the press.
|
|
240
|
+
const pressPointRef = useRef(null);
|
|
241
|
+
const handleRowPointerDown = event => {
|
|
242
|
+
pressPointRef.current = event.target === event.currentTarget ? {
|
|
243
|
+
x: event.clientX,
|
|
244
|
+
y: event.clientY
|
|
245
|
+
} : null;
|
|
246
|
+
};
|
|
247
|
+
// A press that began on the band, outside the row's box, toggles the
|
|
248
|
+
// checkbox, as a tap on the box does. A click from code has no press count
|
|
249
|
+
// (`detail` is 0), so it never toggles from here.
|
|
250
|
+
const handleRowClick = event => {
|
|
251
|
+
const press = pressPointRef.current;
|
|
252
|
+
pressPointRef.current = null;
|
|
253
|
+
if (press == null || event.detail === 0 || event.target !== event.currentTarget) {
|
|
254
|
+
return;
|
|
255
|
+
}
|
|
256
|
+
const box = event.currentTarget.getBoundingClientRect();
|
|
257
|
+
const isOnBand = press.x < box.left || press.x > box.right || press.y < box.top || press.y > box.bottom;
|
|
258
|
+
if (isOnBand) {
|
|
259
|
+
inputRef.current?.click();
|
|
260
|
+
}
|
|
261
|
+
};
|
|
213
262
|
const isIndeterminate = optimisticValue === 'indeterminate';
|
|
214
263
|
const isChecked = optimisticValue === true;
|
|
215
264
|
|
|
@@ -249,17 +298,11 @@ export function CheckboxInput({
|
|
|
249
298
|
size
|
|
250
299
|
}), stylex.props(width != null && dynamicWidthStyles.width(width), xstyle), className, style),
|
|
251
300
|
children: [/*#__PURE__*/_jsxs("div", {
|
|
252
|
-
ref:
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
// positioning anchors on the checkbox itself (below) so the tooltip
|
|
256
|
-
// appears next to the control, not the far edge of the row.
|
|
257
|
-
// Handlers are gated internally by isEnabled, so attaching
|
|
258
|
-
// unconditionally is safe.
|
|
259
|
-
disabledMessageTooltip.interactionRef(el);
|
|
260
|
-
},
|
|
301
|
+
ref: rowRef,
|
|
302
|
+
onPointerDown: hasHitArea ? handleRowPointerDown : undefined,
|
|
303
|
+
onClick: hasHitArea ? handleRowClick : undefined,
|
|
261
304
|
...(isDisabled ? undefined : pressable),
|
|
262
|
-
...stylex.props(styles.container, isLabelHidden && styles.containerLabelHidden,
|
|
305
|
+
...stylex.props(styles.container, isLabelHidden && styles.containerLabelHidden, hasHitArea && styles.hitAreaHost, hasHitArea && touchHitAreaStyles.layer,
|
|
263
306
|
// Hover and focus reach the checkbox visual through this ancestor
|
|
264
307
|
// marker rather than props, so the whole row drives it.
|
|
265
308
|
!isDisabled && indicatorScope, !isDisabled && styles.indicatorPressImage,
|
|
@@ -272,7 +315,7 @@ export function CheckboxInput({
|
|
|
272
315
|
...focusProps,
|
|
273
316
|
children: [/*#__PURE__*/_jsx("input", {
|
|
274
317
|
...rest,
|
|
275
|
-
ref: useMergedRefs(ref, indeterminateRef, disabledMessageTooltip.positionRef),
|
|
318
|
+
ref: useMergedRefs(ref, indeterminateRef, disabledMessageTooltip.positionRef, inputRef),
|
|
276
319
|
id: id,
|
|
277
320
|
type: "checkbox"
|
|
278
321
|
// Withhold the name while disabled: the input stays focusable (not
|
|
@@ -120,7 +120,7 @@ export interface ClickableCardProps extends BaseProps {
|
|
|
120
120
|
* </ClickableCard>
|
|
121
121
|
* ```
|
|
122
122
|
*/
|
|
123
|
-
export declare function ClickableCard({ label, onClick: onClickProp, onMouseUp: onMouseUpProp, href, target, isDisabled, children, padding, variant, elevation, width, height, maxWidth, ref, xstyle: xstyleProp, className: classNameProp, style, ...props }: ClickableCardProps): import("react").JSX.Element;
|
|
123
|
+
export declare function ClickableCard({ label, onClick: onClickProp, onMouseUp: onMouseUpProp, onPointerDown: onPointerDownProp, href, target, isDisabled, children, padding, variant, elevation, width, height, maxWidth, ref, xstyle: xstyleProp, className: classNameProp, style, ...props }: ClickableCardProps): import("react").JSX.Element;
|
|
124
124
|
export declare namespace ClickableCard {
|
|
125
125
|
var displayName: string;
|
|
126
126
|
}
|
|
@@ -1 +1 @@
|
|
|
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;
|
|
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;AAItE,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,aAAa,EAAE,iBAAiB,EAChC,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,+BAoIpB;yBAxJe,aAAa"}
|
|
@@ -33,6 +33,7 @@ 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";
|
|
35
35
|
import { mergeProps } from "../utils/index.js";
|
|
36
|
+
import { chainEventHandlers } from "../utils/chainEventHandlers.js";
|
|
36
37
|
import { Card } from "../Card/Card.js";
|
|
37
38
|
import { useClickableContainer } from "../hooks/useClickableContainer.js";
|
|
38
39
|
import { useLinkComponent } from "../Link/useLinkComponent.js";
|
|
@@ -147,6 +148,7 @@ export function ClickableCard({
|
|
|
147
148
|
label,
|
|
148
149
|
onClick: onClickProp,
|
|
149
150
|
onMouseUp: onMouseUpProp,
|
|
151
|
+
onPointerDown: onPointerDownProp,
|
|
150
152
|
href,
|
|
151
153
|
target,
|
|
152
154
|
isDisabled = false,
|
|
@@ -199,7 +201,8 @@ export function ClickableCard({
|
|
|
199
201
|
const LinkComponent = useLinkComponent();
|
|
200
202
|
const {
|
|
201
203
|
onClick,
|
|
202
|
-
onMouseUp
|
|
204
|
+
onMouseUp,
|
|
205
|
+
onPointerDown
|
|
203
206
|
} = useClickableContainer({
|
|
204
207
|
containerRef,
|
|
205
208
|
interactiveRef,
|
|
@@ -239,6 +242,7 @@ export function ClickableCard({
|
|
|
239
242
|
!isDisabled && interactionOverlayStyles.pressedAlpha, !isDisabled && hasBorder && styles.borderedHoverOnPointer, isDisabled && styles.disabled, xstyleProp],
|
|
240
243
|
onClick: !isDisabled ? onClick : undefined,
|
|
241
244
|
onMouseUp: !isDisabled ? handleMouseUp : undefined,
|
|
245
|
+
onPointerDown: !isDisabled ? chainEventHandlers(onPointerDown, onPointerDownProp) : onPointerDownProp,
|
|
242
246
|
...props,
|
|
243
247
|
children: [isLink ? /*#__PURE__*/_jsx(LinkRoot, {
|
|
244
248
|
ref: setInteractiveRef,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PickerWheel.d.ts","sourceRoot":"","sources":["../../src/DateInput/PickerWheel.tsx"],"names":[],"mappings":"AA2DA,OAAO,EAML,KAAK,UAAU,EAChB,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"PickerWheel.d.ts","sourceRoot":"","sources":["../../src/DateInput/PickerWheel.tsx"],"names":[],"mappings":"AA2DA,OAAO,EAML,KAAK,UAAU,EAChB,MAAM,gBAAgB,CAAC;AAgIxB;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,OAAO,EACP,KAAK,EACL,QAAQ,EACR,QAAe,EACf,GAAG,GACJ,EAAE,UAAU,+BAuiBZ;yBA9iBe,WAAW"}
|
|
@@ -46,6 +46,12 @@ const ROW_HEIGHT = WHEEL_ROW_HEIGHT;
|
|
|
46
46
|
const UIKIT_SCALE = ROW_HEIGHT / picker.geometry.rowHeight;
|
|
47
47
|
/** UIKit's rubber band dimension for the picker's table, at that pitch. */
|
|
48
48
|
const RUBBER_BAND_DIMENSION = picker.geometry.rubberBandDimension * UIKIT_SCALE;
|
|
49
|
+
|
|
50
|
+
/**
|
|
51
|
+
* The rows' opacity at the column's edges. At 0.7 the row four from the band
|
|
52
|
+
* keeps 5:1 or more in every shipped theme, a margin over WCAG AA's 4.5:1.
|
|
53
|
+
*/
|
|
54
|
+
const FADE_FLOOR = 0.7;
|
|
49
55
|
const _temp = {
|
|
50
56
|
k87sOh: "x5mnzd7",
|
|
51
57
|
"$$css": true
|
|
@@ -587,7 +593,7 @@ export function PickerWheel({
|
|
|
587
593
|
children: /*#__PURE__*/_jsxs("div", {
|
|
588
594
|
"data-wheel-fade": "",
|
|
589
595
|
...{
|
|
590
|
-
className: "x10l6tqk x10a8y8t x47corl
|
|
596
|
+
className: "x10l6tqk x10a8y8t x47corl xsshixw"
|
|
591
597
|
},
|
|
592
598
|
children: [/*#__PURE__*/_jsx("div", {
|
|
593
599
|
"aria-hidden": "true",
|
package/dist/Dialog/Dialog.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @file Dialog.tsx
|
|
3
3
|
* @input Uses React, DialogHTMLAttributes, ReactNode, container (Layout), DialogContext, layerTextReset,
|
|
4
|
-
* layerStructureReset, modalOutlet, interactionModality, chainEventHandlers
|
|
4
|
+
* layerStructureReset, modalOutlet, interactionModality, chainEventHandlers, holdEntranceInput
|
|
5
5
|
* @output Exports Dialog component, DialogProps, DialogVariant, DialogPurpose types
|
|
6
6
|
* @position Core implementation; consumed by index.ts, tested by Dialog.test.tsx
|
|
7
7
|
*
|
|
@@ -23,6 +23,7 @@
|
|
|
23
23
|
* SYNC: When modified, update these files to stay in sync:
|
|
24
24
|
* - /packages/core/src/Dialog/Dialog.doc.mjs (props table, features, implementation notes)
|
|
25
25
|
* - /packages/core/src/Dialog/Dialog.test.tsx (tests for new/changed behavior)
|
|
26
|
+
* - /packages/core/src/Dialog/__tests__/DialogTouchEntrance.interaction.browser.spec.ts (the touch entrance hold)
|
|
26
27
|
* - /packages/core/src/Dialog/index.ts (exports if types change)
|
|
27
28
|
* - /apps/storybook/stories/Dialog.stories.tsx (storybook stories)
|
|
28
29
|
* - /packages/cli/assets/templates/blocks/components/Dialog/ (showcase blocks)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAIA
|
|
1
|
+
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA+B5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAMhD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,SAAS,CAAC;AAkC9C;;;;;;GAMG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,gBAAgB,CAAC;AAEnD;;;;;GAKG;AACH,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;AAEzD,4EAA4E;AAC5E,UAAU,mBAAmB;IAC3B,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAED;;;;;GAKG;AACH,MAAM,WAAW,cAAe,SAAQ,mBAAmB;IACzD,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,yEAAyE;IACzE,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB;AAuBD,2FAA2F;AAC3F,eAAO,MAAM,uCAAuC;;;;;;;;;;;CAW1C,CAAC;AAwLX;;;;;;;;;GASG;AACH,wBAAgB,4BAA4B,CAAC,QAAQ,EAAE,cAAc;;;;;EAUpE;AAED,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC/D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;;OAOG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC;IAE3C;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC;IAEpC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EAAE,UAAU,EAClB,QAAgB,EAChB,YAAY,EACZ,KAAW,EACX,SAAmB,EACnB,QAAQ,EACR,OAAoB,EACpB,OAAgB,EAChB,OAAO,EACP,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,sCAiab;yBAjbe,MAAM"}
|
package/dist/Dialog/Dialog.js
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
/**
|
|
6
6
|
* @file Dialog.tsx
|
|
7
7
|
* @input Uses React, DialogHTMLAttributes, ReactNode, container (Layout), DialogContext, layerTextReset,
|
|
8
|
-
* layerStructureReset, modalOutlet, interactionModality, chainEventHandlers
|
|
8
|
+
* layerStructureReset, modalOutlet, interactionModality, chainEventHandlers, holdEntranceInput
|
|
9
9
|
* @output Exports Dialog component, DialogProps, DialogVariant, DialogPurpose types
|
|
10
10
|
* @position Core implementation; consumed by index.ts, tested by Dialog.test.tsx
|
|
11
11
|
*
|
|
@@ -27,6 +27,7 @@
|
|
|
27
27
|
* SYNC: When modified, update these files to stay in sync:
|
|
28
28
|
* - /packages/core/src/Dialog/Dialog.doc.mjs (props table, features, implementation notes)
|
|
29
29
|
* - /packages/core/src/Dialog/Dialog.test.tsx (tests for new/changed behavior)
|
|
30
|
+
* - /packages/core/src/Dialog/__tests__/DialogTouchEntrance.interaction.browser.spec.ts (the touch entrance hold)
|
|
30
31
|
* - /packages/core/src/Dialog/index.ts (exports if types change)
|
|
31
32
|
* - /apps/storybook/stories/Dialog.stories.tsx (storybook stories)
|
|
32
33
|
* - /packages/cli/assets/templates/blocks/components/Dialog/ (showcase blocks)
|
|
@@ -41,8 +42,10 @@ import { layerStructureReset } from "../Layer/layerStructureReset.stylex.js";
|
|
|
41
42
|
import { LayerContentBoundary } from "../Layer/layerScopedContext.js";
|
|
42
43
|
import { layerClickBoundary } from "../Layer/layerClickBoundary.js";
|
|
43
44
|
import { LayerDepthProvider } from "../Layer/LayerDepthContext.js";
|
|
45
|
+
import { holdEntranceInput } from "../Layer/holdEntranceInput.js";
|
|
44
46
|
import { useLayerDismissal } from "../Layer/useLayerDismissal.js";
|
|
45
47
|
import { useBackdropPress } from "../Layer/useBackdropPress.js";
|
|
48
|
+
import { useFocusRegionContainment } from "../hooks/useFocusTrap.js";
|
|
46
49
|
import { useModalOutlet } from "../Layer/modalOutlet.js";
|
|
47
50
|
import "../theme/tokens.stylex.js";
|
|
48
51
|
import { colorVars, radiusVars, durationVars, easeVars, shadowVars, spacingVars } from "../theme/tokens.stylex.js";
|
|
@@ -357,6 +360,9 @@ export function Dialog({
|
|
|
357
360
|
// Consumer-provided labels always win over the DialogHeader default.
|
|
358
361
|
const hasConsumerName = props['aria-label'] != null || props['aria-labelledby'] != null;
|
|
359
362
|
const dialogRef = useRef(null);
|
|
363
|
+
// Native showModal() lets Tab leave for the browser's own UI, so the shared
|
|
364
|
+
// module wraps it. An inline preview is not modal and contains nothing.
|
|
365
|
+
useFocusRegionContainment(dialogRef, isOpen && !isInline);
|
|
360
366
|
|
|
361
367
|
// Callback ref on the <dialog>: sync the default aria-labelledby from the
|
|
362
368
|
// DialogHeader title (if one rendered) in the same commit, with no second
|
|
@@ -447,6 +453,11 @@ export function Dialog({
|
|
|
447
453
|
focusForLastInput(autofocusTarget);
|
|
448
454
|
}
|
|
449
455
|
}
|
|
456
|
+
// Under a coarse primary pointer, a tap or a drag during the entrance
|
|
457
|
+
// reaches nothing. Keys and assistive technology stay live. The hold
|
|
458
|
+
// ends with the entrance, or with this effect's cleanup on a close or
|
|
459
|
+
// unmount.
|
|
460
|
+
return holdEntranceInput(dialog) ?? undefined;
|
|
450
461
|
} else {
|
|
451
462
|
if (dialog.open) {
|
|
452
463
|
dialog.close();
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @file useDrawerDialogPresence.ts
|
|
3
3
|
* @input Controlled open state, modal mode, dialog ref, and rendered-state setter
|
|
4
|
-
* @output Coordinates native top-layer presence, exit timing, focus restoration, and unmount cleanup
|
|
4
|
+
* @output Coordinates native top-layer presence, the touch entrance's input hold, exit timing, focus restoration, and unmount cleanup
|
|
5
5
|
* @position Drawer-internal hook; consumed only by Drawer.tsx
|
|
6
6
|
*
|
|
7
7
|
* The drawer has two independent notions of presence:
|
|
@@ -17,6 +17,7 @@
|
|
|
17
17
|
*
|
|
18
18
|
* SYNC: When modified, update:
|
|
19
19
|
* - /packages/core/src/Drawer/Drawer.test.tsx
|
|
20
|
+
* - /packages/core/src/Drawer/__tests__/DrawerTouchEntrance.interaction.browser.spec.ts
|
|
20
21
|
* - /.github/scripts/modal-close-visibility.js
|
|
21
22
|
*/
|
|
22
23
|
import { type Dispatch, type RefObject, type SetStateAction } from 'react';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDrawerDialogPresence.d.ts","sourceRoot":"","sources":["../../src/Drawer/useDrawerDialogPresence.ts"],"names":[],"mappings":"AAIA
|
|
1
|
+
{"version":3,"file":"useDrawerDialogPresence.d.ts","sourceRoot":"","sources":["../../src/Drawer/useDrawerDialogPresence.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,EAGL,KAAK,QAAQ,EACb,KAAK,SAAS,EACd,KAAK,cAAc,EACpB,MAAM,OAAO,CAAC;AAgBf,KAAK,8BAA8B,GAAG;IACpC,SAAS,EAAE,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IAC/C,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;CAClD,CAAC;AA6DF;;;;;;;;;;GAUG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,SAAS,EACT,MAAM,EACN,OAAO,EACP,aAAa,GACd,EAAE,8BAA8B,GAAG,IAAI,CA2EvC"}
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
/**
|
|
6
6
|
* @file useDrawerDialogPresence.ts
|
|
7
7
|
* @input Controlled open state, modal mode, dialog ref, and rendered-state setter
|
|
8
|
-
* @output Coordinates native top-layer presence, exit timing, focus restoration, and unmount cleanup
|
|
8
|
+
* @output Coordinates native top-layer presence, the touch entrance's input hold, exit timing, focus restoration, and unmount cleanup
|
|
9
9
|
* @position Drawer-internal hook; consumed only by Drawer.tsx
|
|
10
10
|
*
|
|
11
11
|
* The drawer has two independent notions of presence:
|
|
@@ -21,10 +21,12 @@
|
|
|
21
21
|
*
|
|
22
22
|
* SYNC: When modified, update:
|
|
23
23
|
* - /packages/core/src/Drawer/Drawer.test.tsx
|
|
24
|
+
* - /packages/core/src/Drawer/__tests__/DrawerTouchEntrance.interaction.browser.spec.ts
|
|
24
25
|
* - /.github/scripts/modal-close-visibility.js
|
|
25
26
|
*/
|
|
26
27
|
import { useEffect, useRef } from 'react';
|
|
27
28
|
import { flushSync } from 'react-dom';
|
|
29
|
+
import { holdEntranceInput } from "../Layer/holdEntranceInput.js";
|
|
28
30
|
import { notifyTopLayerEntry } from "../Layer/modalOutlet.js";
|
|
29
31
|
import { runPopoverOperation } from "../Layer/popoverOperations.js";
|
|
30
32
|
|
|
@@ -126,7 +128,14 @@ export function useDrawerDialogPresence({
|
|
|
126
128
|
// contract as Dialog).
|
|
127
129
|
dialog.querySelector('[data-autofocus]')?.focus();
|
|
128
130
|
}
|
|
129
|
-
|
|
131
|
+
// Under a coarse primary pointer, a tap or a drag during the slide-in
|
|
132
|
+
// reaches nothing. A non-modal drawer holds only its panel, so its page
|
|
133
|
+
// stays live. Keys and assistive technology stay live. The hold ends
|
|
134
|
+
// with the slide-in, or with this effect's cleanup on a close or
|
|
135
|
+
// unmount.
|
|
136
|
+
return holdEntranceInput(dialog, {
|
|
137
|
+
isModal
|
|
138
|
+
}) ?? undefined;
|
|
130
139
|
}
|
|
131
140
|
if (!isDrawerHostOpen(dialog, isModal)) {
|
|
132
141
|
return;
|
|
@@ -178,13 +178,21 @@ interface DropdownMenuDataProps extends DropdownMenuBaseProps {
|
|
|
178
178
|
* Surface used to present the actions. Pass a value selected by product
|
|
179
179
|
* policy (for example, a compact-touch media query) when the presentation
|
|
180
180
|
* should adapt. Bottom-sheet presentation is intended for short action sets.
|
|
181
|
-
*
|
|
181
|
+
* Omitted, the menu is the anchored popover. Under a finger, on every
|
|
182
|
+
* device, the finger that opened it picks as UIMenu's does, once it has
|
|
183
|
+
* moved. `'popover'` pins the anchored popover with the pointer behavior on
|
|
184
|
+
* every device (the opening press follows the settle rule).
|
|
182
185
|
*/
|
|
183
186
|
presentation?: DropdownMenuPresentation;
|
|
184
187
|
items: DropdownMenuOption[];
|
|
185
188
|
children?: undefined;
|
|
186
189
|
}
|
|
187
190
|
interface DropdownMenuCompoundProps extends DropdownMenuBaseProps {
|
|
191
|
+
/**
|
|
192
|
+
* `'popover'` pins the pointer behavior on every device (the opening press
|
|
193
|
+
* follows the settle rule). Omitted, on every device, the finger
|
|
194
|
+
* that opened the menu picks as UIMenu's does, once it has moved.
|
|
195
|
+
*/
|
|
188
196
|
presentation?: 'popover';
|
|
189
197
|
items?: undefined;
|
|
190
198
|
children: ReactNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenu.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenu.tsx"],"names":[],"mappings":"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"}
|
|
@@ -47,7 +47,7 @@ import { DropdownMenuContext, DropdownMenuRootOpenContext, DropdownMenuSurfaceCo
|
|
|
47
47
|
import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js";
|
|
48
48
|
import { useMergedRefs } from "../hooks/useMergedRefs.js";
|
|
49
49
|
import { useListFocus } from "../hooks/useListFocus.js";
|
|
50
|
-
import {
|
|
50
|
+
import { useDropdownMenuPress } from "../hooks/useMenuPress.js";
|
|
51
51
|
import { useTypeahead } from "../hooks/useTypeahead.js";
|
|
52
52
|
import { useFocusReturnVisibility } from "../hooks/useFocusReturnVisibility.js";
|
|
53
53
|
import { focusForLastInput } from "../utils/focusReturn.js";
|
|
@@ -574,6 +574,7 @@ function DropdownMenuPopover({
|
|
|
574
574
|
placement = 'below',
|
|
575
575
|
alignment = 'start',
|
|
576
576
|
presentation: _presentation,
|
|
577
|
+
pressTouchModel = 'uikit',
|
|
577
578
|
header,
|
|
578
579
|
footer,
|
|
579
580
|
className,
|
|
@@ -993,12 +994,15 @@ function DropdownMenuPopover({
|
|
|
993
994
|
// The press model: the row under a release acts, the highlight follows a
|
|
994
995
|
// held pointer. A mouse released outside the menu dismisses it; a finger
|
|
995
996
|
// released outside leaves it open, so the hook never calls onDismiss then.
|
|
996
|
-
const menuPress =
|
|
997
|
+
const menuPress = useDropdownMenuPress({
|
|
997
998
|
menuRef: listRef,
|
|
998
999
|
triggerRef: buttonRef,
|
|
999
1000
|
itemSelector: MENU_ITEM_SELECTOR,
|
|
1000
1001
|
onTriggerPress: handleTriggerPress,
|
|
1001
|
-
onDismiss: closeMenu
|
|
1002
|
+
onDismiss: closeMenu,
|
|
1003
|
+
// Under a finger, on every device, the opening finger picks as UIMenu's
|
|
1004
|
+
// does. `presentation="popover"` pins the pointer model.
|
|
1005
|
+
touchModel: pressTouchModel
|
|
1002
1006
|
});
|
|
1003
1007
|
cancelMenuPressRef.current = menuPress.cancel;
|
|
1004
1008
|
const handleButtonClick = useCallback(e => {
|
|
@@ -1305,7 +1309,8 @@ export function DropdownMenu(props) {
|
|
|
1305
1309
|
}
|
|
1306
1310
|
return /*#__PURE__*/_jsx(DropdownMenuPopover, {
|
|
1307
1311
|
...sharedProps,
|
|
1308
|
-
presentation: "popover"
|
|
1312
|
+
presentation: "popover",
|
|
1313
|
+
pressTouchModel: props.presentation === 'popover' ? 'pointer' : 'uikit'
|
|
1309
1314
|
});
|
|
1310
1315
|
}
|
|
1311
1316
|
DropdownMenu.displayName = 'DropdownMenu';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownMenuCheckboxItem.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuCheckboxItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,EAIL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"DropdownMenuCheckboxItem.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuCheckboxItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,EAIL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAStD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAiD5C,MAAM,WAAW,6BAA8B,SAAQ,IAAI,CACzD,SAAS,EACT,UAAU,GAAG,MAAM,GAAG,cAAc,GAAG,UAAU,CAClD;IACC;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B;;OAEG;IACH,KAAK,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,sFAAsF;IACtF,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,wBAAwB,CAAC,EACvC,KAAK,EACL,WAAW,EACX,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,UAAkB,EAClB,gBAAwB,EACxB,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EACP,aAAa,EACb,GAAG,IAAI,EACR,EAAE,6BAA6B,+BAqE/B;yBApFe,wBAAwB"}
|
|
@@ -32,6 +32,7 @@ import { useIndicator } from "../Indicator/index.js";
|
|
|
32
32
|
import { Item } from "../Item/index.js";
|
|
33
33
|
import { useDropdownMenuContext } from "./DropdownMenuContext.js";
|
|
34
34
|
import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
|
|
35
|
+
import { menuPressLitRowStyle } from "../privateAttributes/menuPressLit.stylex.js";
|
|
35
36
|
import { focusMenuItemOnHover } from "./menuItemHover.js";
|
|
36
37
|
import "../theme/tokens.stylex.js";
|
|
37
38
|
import { colorVars, focusVars, spacingVars } from "../theme/tokens.stylex.js";
|
|
@@ -42,7 +43,7 @@ const styles = {
|
|
|
42
43
|
kzqmXN: "xh8yej3",
|
|
43
44
|
kaIpWk: "x1ws5lxm",
|
|
44
45
|
kMwMTN: "x1tgivj0",
|
|
45
|
-
kWkggS: "xjbqb8w
|
|
46
|
+
kWkggS: "xjbqb8w x1p2z2pi",
|
|
46
47
|
kkrTdU: "x1ypdohk x16khyan",
|
|
47
48
|
kInvED: "x1c097ug",
|
|
48
49
|
$$css: true
|
|
@@ -144,7 +145,7 @@ export function DropdownMenuCheckboxItem({
|
|
|
144
145
|
endContent: endContent,
|
|
145
146
|
onClick: handleClick,
|
|
146
147
|
isDisabled: isDisabled,
|
|
147
|
-
xstyle: [focusOutlineStyles.focusVisible, styles.root, isDisabled && styles.disabled, xstyle],
|
|
148
|
+
xstyle: [focusOutlineStyles.focusVisible, styles.root, menuPressLitRowStyle, isDisabled && styles.disabled, xstyle],
|
|
148
149
|
...mergeProps(themeProps('dropdown-menu-item', {
|
|
149
150
|
size: menuSize
|
|
150
151
|
}), {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownMenuItem.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,EAEL,KAAK,UAAU,EAEf,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAWtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"DropdownMenuItem.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,EAEL,KAAK,UAAU,EAEf,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAWtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAuE5C,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CACjD,SAAS,EACT,MAAM,GAAG,UAAU,CACpB;IACC,wCAAwC;IACxC,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B,0BAA0B;IAC1B,KAAK,EAAE,SAAS,CAAC;IACjB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0CAA0C;IAC1C,MAAM,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC5B;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,mDAAmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gEAAgE;IAChE,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;IACpC;;;;;OAKG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;CAC9B;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,KAAK,EACL,WAAW,EACX,OAAO,EACP,IAAI,EACJ,MAAM,EACN,GAAG,EACH,UAAkB,EAClB,UAAU,EACV,gBAAuB,EACvB,OAAmB,EACnB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,aAAa,EACb,UAAU,EACV,GAAG,IAAI,EACR,EAAE,qBAAqB,+BAqHvB;yBAxIe,gBAAgB"}
|
|
@@ -37,6 +37,7 @@ import { colorVars, spacingVars, typographyVars, typeScaleVars, focusVars } from
|
|
|
37
37
|
import { composeEventHandlers, mergeProps } from "../utils/index.js";
|
|
38
38
|
import { useDropdownMenuContext } from "./DropdownMenuContext.js";
|
|
39
39
|
import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
|
|
40
|
+
import { menuPressLitRowStyle } from "../privateAttributes/menuPressLit.stylex.js";
|
|
40
41
|
import { focusMenuItemOnHover } from "./menuItemHover.js";
|
|
41
42
|
import { isModifiedClick } from "./menuItemRoles.js";
|
|
42
43
|
import { themeProps } from "../utils/themeProps.js";
|
|
@@ -52,7 +53,7 @@ const menuItemStyles = {
|
|
|
52
53
|
kMv6JI: "x9ynric",
|
|
53
54
|
kGuDYH: "xcr08ib",
|
|
54
55
|
kMwMTN: "x1tgivj0",
|
|
55
|
-
kWkggS: "xjbqb8w
|
|
56
|
+
kWkggS: "xjbqb8w x1p2z2pi x17hk9mh",
|
|
56
57
|
kMzoRj: "xc342km",
|
|
57
58
|
ksu8eU: "xng3xce",
|
|
58
59
|
kkrTdU: "x1ypdohk x16khyan",
|
|
@@ -199,7 +200,7 @@ export function DropdownMenuItem({
|
|
|
199
200
|
,
|
|
200
201
|
draggable: href != null ? false : undefined,
|
|
201
202
|
isDisabled: isDisabled,
|
|
202
|
-
xstyle: [focusOutlineStyles.focusVisible, menuItemStyles.root, itemSizeStyles[menuSize], isDestructive && menuItemStyles.destructive, isDisabled && menuItemStyles.disabled, xstyle],
|
|
203
|
+
xstyle: [focusOutlineStyles.focusVisible, menuItemStyles.root, menuPressLitRowStyle, itemSizeStyles[menuSize], isDestructive && menuItemStyles.destructive, isDisabled && menuItemStyles.disabled, xstyle],
|
|
203
204
|
...mergeProps(themeProps('dropdown-menu-item', {
|
|
204
205
|
size: menuSize,
|
|
205
206
|
variant: isDestructive ? 'destructive' : null
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownMenuRadioItem.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuRadioItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,EAIL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"DropdownMenuRadioItem.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuRadioItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,EAIL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAStD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAiD5C,MAAM,WAAW,0BAA2B,SAAQ,IAAI,CACtD,SAAS,EACT,MAAM,GAAG,cAAc,GAAG,UAAU,CACrC;IACC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,mFAAmF;IACnF,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;CAC9B;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,KAAK,EACL,KAAK,EACL,WAAW,EACX,IAAI,EACJ,UAAkB,EAClB,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EACP,aAAa,EACb,GAAG,IAAI,EACR,EAAE,0BAA0B,+BA6E5B;yBA1Fe,qBAAqB"}
|
|
@@ -28,6 +28,7 @@ import { useIndicator } from "../Indicator/index.js";
|
|
|
28
28
|
import { Item } from "../Item/index.js";
|
|
29
29
|
import { useDropdownMenuContext } from "./DropdownMenuContext.js";
|
|
30
30
|
import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
|
|
31
|
+
import { menuPressLitRowStyle } from "../privateAttributes/menuPressLit.stylex.js";
|
|
31
32
|
import { focusMenuItemOnHover } from "./menuItemHover.js";
|
|
32
33
|
import "../theme/tokens.stylex.js";
|
|
33
34
|
import { colorVars, focusVars, spacingVars } from "../theme/tokens.stylex.js";
|
|
@@ -39,7 +40,7 @@ const styles = {
|
|
|
39
40
|
kzqmXN: "xh8yej3",
|
|
40
41
|
kaIpWk: "x1ws5lxm",
|
|
41
42
|
kMwMTN: "x1tgivj0",
|
|
42
|
-
kWkggS: "xjbqb8w
|
|
43
|
+
kWkggS: "xjbqb8w x1p2z2pi",
|
|
43
44
|
kkrTdU: "x1ypdohk x16khyan",
|
|
44
45
|
kInvED: "x1c097ug",
|
|
45
46
|
$$css: true
|
|
@@ -139,7 +140,7 @@ export function DropdownMenuRadioItem({
|
|
|
139
140
|
endContent: endContent,
|
|
140
141
|
onClick: handleClick,
|
|
141
142
|
isDisabled: isDisabled,
|
|
142
|
-
xstyle: [focusOutlineStyles.focusVisible, styles.root, isDisabled && styles.disabled, xstyle],
|
|
143
|
+
xstyle: [focusOutlineStyles.focusVisible, styles.root, menuPressLitRowStyle, isDisabled && styles.disabled, xstyle],
|
|
143
144
|
...mergeProps(themeProps('dropdown-menu-item', {
|
|
144
145
|
size: menuSize
|
|
145
146
|
}), {
|