@astryxdesign/core 0.7.6 → 0.7.7-canary.0eb44a2
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 +23 -3
- package/dist/Avatar/Avatar.d.ts.map +1 -1
- package/dist/Avatar/Avatar.js +1 -1
- package/dist/BottomSheet/BottomSheetPanel.d.ts.map +1 -1
- package/dist/BottomSheet/BottomSheetPanel.js +16 -9
- package/dist/Breadcrumbs/BreadcrumbItem.d.ts.map +1 -1
- package/dist/Breadcrumbs/BreadcrumbItem.js +2 -1
- package/dist/Button/Button.d.ts.map +1 -1
- package/dist/Button/Button.js +3 -2
- package/dist/Chat/ChatComposerInput.d.ts +9 -0
- package/dist/Chat/ChatComposerInput.d.ts.map +1 -1
- package/dist/Chat/ChatComposerInput.js +2 -0
- package/dist/Chat/ChatMessage.js +2 -2
- package/dist/Chat/chatMessage.vars.stylex.d.ts +8 -8
- package/dist/Chat/chatMessage.vars.stylex.js +8 -8
- package/dist/CommandPalette/CommandPaletteInput.d.ts.map +1 -1
- package/dist/CommandPalette/CommandPaletteInput.js +8 -1
- package/dist/DateInput/MonthScroller.d.ts.map +1 -1
- package/dist/DateInput/MonthScroller.js +72 -2
- package/dist/DateInput/Wheel.d.ts +17 -1
- package/dist/DateInput/Wheel.d.ts.map +1 -1
- package/dist/DateInput/Wheel.js +179 -19
- package/dist/DateRangeInput/DateRangeInput.d.ts.map +1 -1
- package/dist/DateRangeInput/DateRangeInput.js +63 -49
- package/dist/Dialog/Dialog.d.ts.map +1 -1
- package/dist/Dialog/Dialog.js +37 -1
- package/dist/Drawer/Drawer.d.ts.map +1 -1
- package/dist/Drawer/Drawer.js +6 -0
- package/dist/Drawer/useDrawerDialogPresence.d.ts.map +1 -1
- package/dist/Drawer/useDrawerDialogPresence.js +4 -0
- package/dist/DropdownMenu/DropdownMenu.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenu.js +20 -4
- package/dist/DropdownMenu/useMenuOverflow.d.ts +13 -3
- package/dist/DropdownMenu/useMenuOverflow.d.ts.map +1 -1
- package/dist/DropdownMenu/useMenuOverflow.js +31 -8
- package/dist/Field/PanelSearchInput.d.ts.map +1 -1
- package/dist/Field/PanelSearchInput.js +8 -1
- package/dist/Field/textEntryTraits.d.ts +6 -6
- package/dist/Field/textEntryTraits.js +6 -6
- package/dist/Layer/layerClickBoundary.d.ts +7 -1
- package/dist/Layer/layerClickBoundary.d.ts.map +1 -1
- package/dist/Layer/layerClickBoundary.js +2 -2
- package/dist/Layer/usePressPin.d.ts +95 -0
- package/dist/Layer/usePressPin.d.ts.map +1 -0
- package/dist/Layer/usePressPin.js +365 -0
- package/dist/Layer/useTouchTrigger.d.ts +23 -1
- package/dist/Layer/useTouchTrigger.d.ts.map +1 -1
- package/dist/Layer/useTouchTrigger.js +45 -7
- package/dist/Lightbox/Lightbox.d.ts.map +1 -1
- package/dist/Lightbox/Lightbox.js +2 -1
- package/dist/Link/Link.d.ts.map +1 -1
- package/dist/Link/Link.js +1 -0
- package/dist/Popover/usePopover.d.ts.map +1 -1
- package/dist/Popover/usePopover.js +56 -7
- package/dist/PowerSearch/PowerSearch.d.ts.map +1 -1
- package/dist/PowerSearch/PowerSearch.js +38 -30
- package/dist/ProgressBar/ProgressBar.d.ts +1 -1
- package/dist/ProgressBar/ProgressBar.d.ts.map +1 -1
- package/dist/ProgressBar/ProgressBar.js +52 -14
- package/dist/ProgressBar/ProgressBarTouch.d.ts +29 -0
- package/dist/ProgressBar/ProgressBarTouch.d.ts.map +1 -0
- package/dist/ProgressBar/ProgressBarTouch.js +91 -0
- package/dist/SegmentedControl/SegmentedControlItem.d.ts.map +1 -1
- package/dist/SegmentedControl/SegmentedControlItem.js +2 -1
- package/dist/Selector/Selector.d.ts.map +1 -1
- package/dist/Selector/Selector.js +25 -13
- package/dist/Slider/Slider.d.ts.map +1 -1
- package/dist/Slider/Slider.js +404 -131
- package/dist/Slider/sliderTouchController.d.ts +189 -0
- package/dist/Slider/sliderTouchController.d.ts.map +1 -0
- package/dist/Slider/sliderTouchController.js +1017 -0
- package/dist/Slider/useSliderTouch.d.ts +22 -0
- package/dist/Slider/useSliderTouch.d.ts.map +1 -0
- package/dist/Slider/useSliderTouch.js +56 -0
- package/dist/Switch/Switch.d.ts +1 -1
- package/dist/Switch/Switch.d.ts.map +1 -1
- package/dist/Switch/Switch.js +200 -46
- package/dist/Switch/switchFill.d.ts +31 -0
- package/dist/Switch/switchFill.d.ts.map +1 -0
- package/dist/Switch/switchFill.js +88 -0
- package/dist/Switch/switchTouch.d.ts +81 -0
- package/dist/Switch/switchTouch.d.ts.map +1 -0
- package/dist/Switch/switchTouch.js +133 -0
- package/dist/Switch/useSwitchTouch.d.ts +285 -0
- package/dist/Switch/useSwitchTouch.d.ts.map +1 -0
- package/dist/Switch/useSwitchTouch.js +998 -0
- package/dist/TabList/Tab.d.ts.map +1 -1
- package/dist/TabList/Tab.js +4 -3
- package/dist/Tokenizer/Tokenizer.d.ts.map +1 -1
- package/dist/Tokenizer/Tokenizer.js +12 -5
- package/dist/Tokenizer/TokenizerItemRemovableContext.d.ts +3 -0
- package/dist/Tokenizer/TokenizerItemRemovableContext.d.ts.map +1 -0
- package/dist/Tokenizer/TokenizerItemRemovableContext.js +17 -0
- package/dist/Tooltip/Tooltip.d.ts +30 -6
- package/dist/Tooltip/Tooltip.d.ts.map +1 -1
- package/dist/Tooltip/Tooltip.js +5 -0
- package/dist/Tooltip/index.d.ts +1 -1
- package/dist/Tooltip/index.d.ts.map +1 -1
- package/dist/Tooltip/useTooltip.d.ts +31 -5
- package/dist/Tooltip/useTooltip.d.ts.map +1 -1
- package/dist/Tooltip/useTooltip.js +59 -18
- package/dist/Typeahead/BaseTypeahead.d.ts.map +1 -1
- package/dist/Typeahead/BaseTypeahead.js +19 -9
- package/dist/Typeahead/Typeahead.d.ts.map +1 -1
- package/dist/Typeahead/Typeahead.js +26 -15
- package/dist/astryx.css +91 -8
- package/dist/gestures/GestureArena.d.ts +21 -2
- package/dist/gestures/GestureArena.d.ts.map +1 -1
- package/dist/gestures/GestureArena.js +23 -3
- package/dist/gestures/GestureHost.d.ts +123 -3
- package/dist/gestures/GestureHost.d.ts.map +1 -1
- package/dist/gestures/GestureHost.js +797 -15
- package/dist/gestures/GestureRecognizer.d.ts +15 -1
- package/dist/gestures/GestureRecognizer.d.ts.map +1 -1
- package/dist/gestures/GestureRecognizer.js +12 -0
- package/dist/gestures/PanGestureRecognizer.d.ts +8 -0
- package/dist/gestures/PanGestureRecognizer.d.ts.map +1 -1
- package/dist/gestures/PinchGestureRecognizer.d.ts +5 -1
- package/dist/gestures/PinchGestureRecognizer.d.ts.map +1 -1
- package/dist/gestures/PinchGestureRecognizer.js +10 -0
- package/dist/gestures/PressTracker.d.ts +6 -0
- package/dist/gestures/PressTracker.d.ts.map +1 -1
- package/dist/gestures/PressTracker.js +3 -0
- package/dist/gestures/ScreenEdgePanGestureRecognizer.d.ts +3 -3
- package/dist/gestures/ScreenEdgePanGestureRecognizer.d.ts.map +1 -1
- package/dist/gestures/ScreenEdgePanGestureRecognizer.js +7 -5
- package/dist/gestures/nativeScroll.d.ts +16 -2
- package/dist/gestures/nativeScroll.d.ts.map +1 -1
- package/dist/gestures/nativeScroll.js +39 -8
- package/dist/gestures/recognizerInternals.d.ts +4 -2
- package/dist/gestures/recognizerInternals.d.ts.map +1 -1
- package/dist/gestures/types.d.ts +17 -0
- package/dist/gestures/types.d.ts.map +1 -1
- package/dist/gestures/types.js +7 -0
- package/dist/gestures/usePressTracker.d.ts.map +1 -1
- package/dist/gestures/usePressTracker.js +1 -0
- package/dist/gestures/wheelSegmenter.d.ts +56 -0
- package/dist/gestures/wheelSegmenter.d.ts.map +1 -0
- package/dist/gestures/wheelSegmenter.js +122 -0
- package/dist/hooks/useAttachment.d.ts +16 -8
- package/dist/hooks/useAttachment.d.ts.map +1 -1
- package/dist/hooks/useAttachment.js +35 -15
- package/dist/hooks/useFocusTrap.d.ts +15 -0
- package/dist/hooks/useFocusTrap.d.ts.map +1 -1
- package/dist/hooks/useFocusTrap.js +13 -2
- package/dist/hooks/usePager.d.ts +261 -0
- package/dist/hooks/usePager.d.ts.map +1 -0
- package/dist/hooks/usePager.js +1169 -0
- package/dist/motion/animator.d.ts.map +1 -1
- package/dist/motion/animator.js +140 -19
- package/dist/motion/paging.d.ts +69 -0
- package/dist/motion/paging.d.ts.map +1 -0
- package/dist/motion/paging.js +148 -0
- package/dist/motion/uikit/index.d.ts +8 -4
- package/dist/motion/uikit/index.d.ts.map +1 -1
- package/dist/motion/uikit/index.js +8 -4
- package/dist/motion/uikit/paging.d.ts +171 -0
- package/dist/motion/uikit/paging.d.ts.map +1 -0
- package/dist/motion/uikit/paging.js +192 -0
- package/dist/motion/uikit/progressBar.d.ts +79 -0
- package/dist/motion/uikit/progressBar.d.ts.map +1 -0
- package/dist/motion/uikit/progressBar.js +102 -0
- package/dist/motion/uikit/scroll.d.ts +0 -19
- package/dist/motion/uikit/scroll.d.ts.map +1 -1
- package/dist/motion/uikit/scroll.js +2 -21
- package/dist/motion/uikit/slider.d.ts +97 -0
- package/dist/motion/uikit/slider.d.ts.map +1 -0
- package/dist/motion/uikit/slider.js +111 -0
- package/dist/motion/uikit/springs.d.ts +59 -30
- package/dist/motion/uikit/springs.d.ts.map +1 -1
- package/dist/motion/uikit/springs.js +64 -34
- package/dist/motion/uikit/switch.d.ts +166 -0
- package/dist/motion/uikit/switch.d.ts.map +1 -0
- package/dist/motion/uikit/switch.js +186 -0
- package/dist/privateAttributes/pressHoldsDrag.stylex.d.ts +18 -0
- package/dist/privateAttributes/pressHoldsDrag.stylex.d.ts.map +1 -0
- package/dist/privateAttributes/pressHoldsDrag.stylex.js +28 -0
- package/dist/utils/pressFeedback.d.ts.map +1 -1
- package/dist/utils/pressFeedback.js +5 -0
- package/dist/utils/selectionLock.d.ts +43 -0
- package/dist/utils/selectionLock.d.ts.map +1 -1
- package/dist/utils/selectionLock.js +394 -6
- package/package.json +5 -5
- package/src/AppShell/AppShell.doc.mjs +10 -0
- package/src/AppShell/AppShell.tsx +48 -2
- package/src/Avatar/Avatar.tsx +3 -1
- package/src/BottomSheet/BottomSheetPanel.tsx +16 -9
- package/src/Breadcrumbs/BreadcrumbItem.tsx +4 -1
- package/src/Button/Button.tsx +3 -2
- package/src/Chat/Chat.doc.mjs +1 -0
- package/src/Chat/ChatComposerInput.doc.mjs +11 -0
- package/src/Chat/ChatComposerInput.tsx +11 -0
- package/src/Chat/ChatMessage.tsx +2 -2
- package/src/Chat/chatMessage.vars.stylex.ts +8 -8
- package/src/CommandPalette/CommandPaletteInput.tsx +6 -0
- package/src/DateInput/MonthScroller.tsx +63 -5
- package/src/DateInput/Wheel.tsx +174 -14
- package/src/DateRangeInput/DateRangeInput.doc.mjs +3 -2
- package/src/DateRangeInput/DateRangeInput.tsx +117 -71
- package/src/Dialog/Dialog.tsx +37 -1
- package/src/Drawer/Drawer.tsx +6 -0
- package/src/Drawer/useDrawerDialogPresence.ts +4 -0
- package/src/DropdownMenu/DropdownMenu.tsx +28 -6
- package/src/DropdownMenu/useMenuOverflow.ts +44 -8
- package/src/Field/PanelSearchInput.tsx +6 -0
- package/src/Field/textEntryTraits.ts +6 -6
- package/src/Layer/layerClickBoundary.ts +2 -2
- package/src/Layer/usePressPin.ts +516 -0
- package/src/Layer/useTouchTrigger.ts +56 -6
- package/src/Lightbox/Lightbox.tsx +2 -1
- package/src/Link/Link.tsx +3 -0
- package/src/Popover/usePopover.tsx +71 -9
- package/src/PowerSearch/PowerSearch.tsx +38 -31
- package/src/ProgressBar/ProgressBar.doc.mjs +7 -5
- package/src/ProgressBar/ProgressBar.tsx +147 -16
- package/src/ProgressBar/ProgressBarTouch.ts +109 -0
- package/src/SegmentedControl/SegmentedControlItem.tsx +2 -1
- package/src/Selector/Selector.tsx +29 -2
- package/src/Slider/Slider.doc.mjs +11 -7
- package/src/Slider/Slider.tsx +539 -132
- package/src/Slider/sliderTouchController.ts +1209 -0
- package/src/Slider/useSliderTouch.ts +78 -0
- package/src/Switch/Switch.doc.mjs +3 -3
- package/src/Switch/Switch.tsx +412 -86
- package/src/Switch/switchFill.ts +106 -0
- package/src/Switch/switchTouch.ts +194 -0
- package/src/Switch/useSwitchTouch.ts +1121 -0
- package/src/TabList/Tab.tsx +5 -3
- package/src/Tokenizer/Tokenizer.tsx +15 -5
- package/src/Tokenizer/TokenizerItemRemovableContext.ts +22 -0
- package/src/Tooltip/Tooltip.doc.mjs +21 -6
- package/src/Tooltip/Tooltip.tsx +42 -5
- package/src/Tooltip/index.ts +1 -0
- package/src/Tooltip/useTooltip.doc.mjs +4 -2
- package/src/Tooltip/useTooltip.tsx +84 -21
- package/src/Typeahead/BaseTypeahead.tsx +16 -8
- package/src/Typeahead/Typeahead.tsx +29 -15
- package/src/gestures/GestureArena.ts +45 -4
- package/src/gestures/GestureHost.ts +958 -15
- package/src/gestures/GestureRecognizer.ts +28 -0
- package/src/gestures/PanGestureRecognizer.ts +8 -0
- package/src/gestures/PinchGestureRecognizer.ts +16 -1
- package/src/gestures/PressTracker.ts +10 -0
- package/src/gestures/README.md +82 -3
- package/src/gestures/ScreenEdgePanGestureRecognizer.ts +7 -5
- package/src/gestures/nativeScroll.ts +49 -9
- package/src/gestures/recognizerInternals.ts +9 -2
- package/src/gestures/types.ts +18 -0
- package/src/gestures/usePressTracker.ts +2 -0
- package/src/gestures/wheelSegmenter.ts +143 -0
- package/src/hooks/useAttachment.ts +56 -14
- package/src/hooks/useFocusTrap.ts +26 -2
- package/src/hooks/usePager.ts +1446 -0
- package/src/motion/MEASUREMENTS.md +36 -27
- package/src/motion/README.md +7 -3
- package/src/motion/animator.ts +193 -25
- package/src/motion/paging.ts +161 -0
- package/src/motion/uikit/index.ts +7 -4
- package/src/motion/uikit/paging.ts +193 -0
- package/src/motion/uikit/progressBar.ts +102 -0
- package/src/motion/uikit/scroll.ts +2 -18
- package/src/motion/uikit/slider.ts +105 -0
- package/src/motion/uikit/springs.ts +53 -32
- package/src/motion/uikit/switch.ts +174 -0
- package/src/privateAttributes/pressHoldsDrag.stylex.ts +28 -0
- package/src/utils/pressFeedback.ts +5 -0
- package/src/utils/selectionLock.ts +501 -6
- package/dist/motion/selectPage.d.ts +0 -26
- package/dist/motion/selectPage.d.ts.map +0 -1
- package/dist/motion/selectPage.js +0 -55
- package/src/motion/selectPage.ts +0 -55
|
@@ -3,7 +3,8 @@
|
|
|
3
3
|
* @input Touch trigger mode, layer open state, trigger ref, show/hide callbacks
|
|
4
4
|
* @output Exports useTouchTrigger hook, isActionTrigger, LayerTouchTrigger type,
|
|
5
5
|
* tapLandsOnDisabledControl, TOUCH_POINTER_TYPES and useTapStop (internal:
|
|
6
|
-
* not re-exported from index)
|
|
6
|
+
* not re-exported from index). Also useTouchTriggerInternal, with the
|
|
7
|
+
* outside dismissal's arm for the press pin (Core-internal).
|
|
7
8
|
* @position Layer hook; shared touch behavior for useTooltip and useHoverCard
|
|
8
9
|
*
|
|
9
10
|
* SYNC: When modified, update:
|
|
@@ -137,6 +138,20 @@ export interface UseTouchTriggerReturn {
|
|
|
137
138
|
/** Forget a tap-open. Call from every other close path (Escape, controlled). */
|
|
138
139
|
clearTapOpen: () => void;
|
|
139
140
|
}
|
|
141
|
+
/**
|
|
142
|
+
* useTouchTrigger's return plus the outside dismissal's arm, for Core's own
|
|
143
|
+
* press pin (usePressPin). Not exported from the Layer entry point.
|
|
144
|
+
*
|
|
145
|
+
* @internal
|
|
146
|
+
*/
|
|
147
|
+
export interface UseTouchTriggerInternalReturn extends UseTouchTriggerReturn {
|
|
148
|
+
/**
|
|
149
|
+
* Arms the outside dismissal a tap-open gets: a press that lifts outside
|
|
150
|
+
* the trigger and the layer, or a scroll that starts there, hides it. A
|
|
151
|
+
* press pin arms it too.
|
|
152
|
+
*/
|
|
153
|
+
armOutsideDismiss: () => void;
|
|
154
|
+
}
|
|
140
155
|
/**
|
|
141
156
|
* Touch behavior shared by the hover layers.
|
|
142
157
|
*
|
|
@@ -155,4 +170,11 @@ export interface UseTouchTriggerReturn {
|
|
|
155
170
|
* ```
|
|
156
171
|
*/
|
|
157
172
|
export declare function useTouchTrigger(options: UseTouchTriggerOptions): UseTouchTriggerReturn;
|
|
173
|
+
/**
|
|
174
|
+
* useTouchTrigger, plus the outside dismissal's arm that a press pin uses to
|
|
175
|
+
* close on a press or scroll outside.
|
|
176
|
+
*
|
|
177
|
+
* @internal
|
|
178
|
+
*/
|
|
179
|
+
export declare function useTouchTriggerInternal(options: UseTouchTriggerOptions): UseTouchTriggerInternalReturn;
|
|
158
180
|
//# sourceMappingURL=useTouchTrigger.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTouchTrigger.d.ts","sourceRoot":"","sources":["../../src/Layer/useTouchTrigger.ts"],"names":[],"mappings":"AAIA
|
|
1
|
+
{"version":3,"file":"useTouchTrigger.d.ts","sourceRoot":"","sources":["../../src/Layer/useTouchTrigger.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AAEH,OAAO,EAIL,KAAK,UAAU,IAAI,eAAe,EAClC,KAAK,YAAY,IAAI,iBAAiB,EACtC,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AASf;;;;;;GAMG;AACH,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,KAAK,GAAG,MAAM,CAAC;AAExD;;;;;;;GAOG;AACH,eAAO,MAAM,mBAAmB,aAA4B,CAAC;AAE7D,wBAAgB,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG;IAC1C,aAAa,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IAC3D,OAAO,EAAE,CAAC,KAAK,EAAE,eAAe,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;CACpD,CAAC;AACF,wBAAgB,UAAU,CAAC,KAAK,EAAE,WAAW,GAAG;IAC9C,aAAa,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IAC3D,WAAW,EAAE,CAAC,KAAK,EAAE,eAAe,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;CACxD,CAAC;AAwCF;;;;;;;;;;;GAWG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,WAAW,GAAG,OAAO,CA8B7D;AAiBD;;;;;;;GAOG;AACH,wBAAgB,yBAAyB,CAAC,MAAM,EAAE,OAAO,GAAG,OAAO,CAUlE;AAeD,MAAM,WAAW,sBAAsB;IACrC,sDAAsD;IACtD,YAAY,EAAE,iBAAiB,CAAC;IAEhC,oDAAoD;IACpD,SAAS,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,YAAY,EAAE,OAAO,CAAC;IAEtB,2CAA2C;IAC3C,MAAM,EAAE,OAAO,CAAC;IAEhB,0EAA0E;IAC1E,OAAO,EAAE,MAAM,CAAC;IAEhB,oDAAoD;IACpD,UAAU,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAE1C,uDAAuD;IACvD,IAAI,EAAE,MAAM,IAAI,CAAC;IAEjB,mCAAmC;IACnC,IAAI,EAAE,MAAM,IAAI,CAAC;CAClB;AAED,MAAM,WAAW,qBAAqB;IACpC;;;;OAIG;IACH,iBAAiB,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAEtC;;;;OAIG;IACH,kBAAkB,EAAE,MAAM,OAAO,CAAC;IAElC;;;;OAIG;IACH,kBAAkB,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAElD;;;;;;OAMG;IACH,iBAAiB,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,OAAO,CAAC;IAEpD,gFAAgF;IAChF,YAAY,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED;;;;;GAKG;AACH,MAAM,WAAW,6BAA8B,SAAQ,qBAAqB;IAC1E;;;;OAIG;IACH,iBAAiB,EAAE,MAAM,IAAI,CAAC;CAC/B;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,eAAe,CAC7B,OAAO,EAAE,sBAAsB,GAC9B,qBAAqB,CASvB;AAED;;;;;GAKG;AACH,wBAAgB,uBAAuB,CACrC,OAAO,EAAE,sBAAsB,GAC9B,6BAA6B,CA2N/B"}
|
|
@@ -7,7 +7,8 @@
|
|
|
7
7
|
* @input Touch trigger mode, layer open state, trigger ref, show/hide callbacks
|
|
8
8
|
* @output Exports useTouchTrigger hook, isActionTrigger, LayerTouchTrigger type,
|
|
9
9
|
* tapLandsOnDisabledControl, TOUCH_POINTER_TYPES and useTapStop (internal:
|
|
10
|
-
* not re-exported from index)
|
|
10
|
+
* not re-exported from index). Also useTouchTriggerInternal, with the
|
|
11
|
+
* outside dismissal's arm for the press pin (Core-internal).
|
|
11
12
|
* @position Layer hook; shared touch behavior for useTooltip and useHoverCard
|
|
12
13
|
*
|
|
13
14
|
* SYNC: When modified, update:
|
|
@@ -176,6 +177,14 @@ function isEditable(element) {
|
|
|
176
177
|
const attribute = element.getAttribute('contenteditable');
|
|
177
178
|
return attribute != null && attribute !== 'false';
|
|
178
179
|
}
|
|
180
|
+
|
|
181
|
+
/**
|
|
182
|
+
* useTouchTrigger's return plus the outside dismissal's arm, for Core's own
|
|
183
|
+
* press pin (usePressPin). Not exported from the Layer entry point.
|
|
184
|
+
*
|
|
185
|
+
* @internal
|
|
186
|
+
*/
|
|
187
|
+
|
|
179
188
|
/**
|
|
180
189
|
* Touch behavior shared by the hover layers.
|
|
181
190
|
*
|
|
@@ -194,6 +203,23 @@ function isEditable(element) {
|
|
|
194
203
|
* ```
|
|
195
204
|
*/
|
|
196
205
|
export function useTouchTrigger(options) {
|
|
206
|
+
const touch = useTouchTriggerInternal(options);
|
|
207
|
+
return {
|
|
208
|
+
isTouchPointerRef: touch.isTouchPointerRef,
|
|
209
|
+
isTouchInteraction: touch.isTouchInteraction,
|
|
210
|
+
handlePointerEnter: touch.handlePointerEnter,
|
|
211
|
+
handlePointerDown: touch.handlePointerDown,
|
|
212
|
+
clearTapOpen: touch.clearTapOpen
|
|
213
|
+
};
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
/**
|
|
217
|
+
* useTouchTrigger, plus the outside dismissal's arm that a press pin uses to
|
|
218
|
+
* close on a press or scroll outside.
|
|
219
|
+
*
|
|
220
|
+
* @internal
|
|
221
|
+
*/
|
|
222
|
+
export function useTouchTriggerInternal(options) {
|
|
197
223
|
const {
|
|
198
224
|
touchTrigger,
|
|
199
225
|
isEnabled,
|
|
@@ -222,6 +248,9 @@ export function useTouchTrigger(options) {
|
|
|
222
248
|
// pointer-leave, and a controlled one is not ours to close.
|
|
223
249
|
const isTapOpenRef = useRef(false);
|
|
224
250
|
const outsideListenerRef = useRef(null);
|
|
251
|
+
// The documents the outside dismissal listens on: the page's, and the
|
|
252
|
+
// trigger's own when it renders in another document, such as an iframe.
|
|
253
|
+
const outsideDocumentsRef = useRef([]);
|
|
225
254
|
// A touch press on the trigger still waiting for its tap: calling it stops
|
|
226
255
|
// waiting. The next press, a cancel, the tap itself or unmounting calls it.
|
|
227
256
|
const forgetPendingTapRef = useRef(null);
|
|
@@ -233,8 +262,11 @@ export function useTouchTrigger(options) {
|
|
|
233
262
|
return;
|
|
234
263
|
}
|
|
235
264
|
outsideListenerRef.current = null;
|
|
236
|
-
|
|
237
|
-
|
|
265
|
+
for (const doc of outsideDocumentsRef.current) {
|
|
266
|
+
doc.removeEventListener('pointerup', listener, true);
|
|
267
|
+
doc.removeEventListener('pointercancel', listener, true);
|
|
268
|
+
}
|
|
269
|
+
outsideDocumentsRef.current = [];
|
|
238
270
|
}, []);
|
|
239
271
|
|
|
240
272
|
// Capture phase, so a trigger that stops propagation cannot strand an open
|
|
@@ -247,6 +279,8 @@ export function useTouchTrigger(options) {
|
|
|
247
279
|
if (outsideListenerRef.current != null) {
|
|
248
280
|
return;
|
|
249
281
|
}
|
|
282
|
+
const own = triggerRef.current?.ownerDocument ?? document;
|
|
283
|
+
const docs = own === document ? [document] : [document, own];
|
|
250
284
|
const handleOutsidePointerEnd = event => {
|
|
251
285
|
const target = event.target;
|
|
252
286
|
if (target != null) {
|
|
@@ -256,7 +290,7 @@ export function useTouchTrigger(options) {
|
|
|
256
290
|
return;
|
|
257
291
|
}
|
|
258
292
|
// Hover card content is interactive; a tap inside it is not a dismiss.
|
|
259
|
-
if (
|
|
293
|
+
if (docs.some(doc => doc.getElementById(layerIdRef.current)?.contains(target) === true)) {
|
|
260
294
|
return;
|
|
261
295
|
}
|
|
262
296
|
}
|
|
@@ -264,8 +298,11 @@ export function useTouchTrigger(options) {
|
|
|
264
298
|
hideRef.current();
|
|
265
299
|
};
|
|
266
300
|
outsideListenerRef.current = handleOutsidePointerEnd;
|
|
267
|
-
|
|
268
|
-
|
|
301
|
+
outsideDocumentsRef.current = docs;
|
|
302
|
+
for (const doc of docs) {
|
|
303
|
+
doc.addEventListener('pointerup', handleOutsidePointerEnd, true);
|
|
304
|
+
doc.addEventListener('pointercancel', handleOutsidePointerEnd, true);
|
|
305
|
+
}
|
|
269
306
|
}, [triggerRef, disarmOutsideDismiss]);
|
|
270
307
|
useEffect(() => disarmOutsideDismiss, [disarmOutsideDismiss]);
|
|
271
308
|
useEffect(() => () => forgetPendingTapRef.current?.(), []);
|
|
@@ -358,6 +395,7 @@ export function useTouchTrigger(options) {
|
|
|
358
395
|
isTouchInteraction,
|
|
359
396
|
handlePointerEnter,
|
|
360
397
|
handlePointerDown,
|
|
361
|
-
clearTapOpen: disarmOutsideDismiss
|
|
398
|
+
clearTapOpen: disarmOutsideDismiss,
|
|
399
|
+
armOutsideDismiss
|
|
362
400
|
};
|
|
363
401
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Lightbox.d.ts","sourceRoot":"","sources":["../../src/Lightbox/Lightbox.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AASf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"Lightbox.d.ts","sourceRoot":"","sources":["../../src/Lightbox/Lightbox.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AASf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAsB5C;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,OAAO,CAAC;AAElD;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,uBAAuB;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,gEAAgE;IAChE,GAAG,EAAE,MAAM,CAAC;IACZ,iDAAiD;IACjD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC;CAC1B;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACjE,+CAA+C;IAC/C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH,KAAK,EAAE,aAAa,GAAG,aAAa,EAAE,CAAC;IACvC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAmKD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,wBAAgB,QAAQ,CAAC,EACvB,MAAM,EACN,YAAY,EACZ,KAAK,EACL,KAAK,EAAE,eAAe,EACtB,YAAgB,EAChB,aAAa,EACb,OAAe,EACf,WAAmB,EACnB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,GAAG,KAAK,EACT,EAAE,aAAa,sCAsdf;yBAtee,QAAQ"}
|
|
@@ -41,6 +41,7 @@ import { useMergedRefs } from "../hooks/useMergedRefs.js";
|
|
|
41
41
|
import { isRtlElement } from "../hooks/isRtlElement.js";
|
|
42
42
|
import { registerEnglishFallback, useComponentTranslator } from "../i18n/useComponentTranslator.js";
|
|
43
43
|
import english from "../i18n/generated-english/Lightbox/Lightbox.generated.js";
|
|
44
|
+
import { isRenderable } from "../utils/isRenderable.js";
|
|
44
45
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
45
46
|
registerEnglishFallback(english);
|
|
46
47
|
/**
|
|
@@ -578,7 +579,7 @@ export function Lightbox({
|
|
|
578
579
|
draggable: false,
|
|
579
580
|
...stylex.props(styles.image, isDragging && styles.imageDragging, imageTransform != null && dynamicStyles.imageTransform(imageTransform))
|
|
580
581
|
})
|
|
581
|
-
}), currentItem.caption && /*#__PURE__*/_jsx("div", {
|
|
582
|
+
}), isRenderable(currentItem.caption) && /*#__PURE__*/_jsx("div", {
|
|
582
583
|
...{
|
|
583
584
|
className: "x9e3rv5 x18juvz8 xf74fhv x2b8uid x1xye8es x18d9i69 xrrkdod xrlsmeg x2lah0s"
|
|
584
585
|
},
|
package/dist/Link/Link.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../src/Link/Link.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAc5C,OAAO,KAAK,EACV,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,UAAU,EACV,WAAW,EACZ,MAAM,gBAAgB,CAAC;AAExB,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../src/Link/Link.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAc5C,OAAO,KAAK,EACV,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,UAAU,EACV,WAAW,EACZ,MAAM,gBAAgB,CAAC;AAExB,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,SAAS,CAAC;AAuH/C,MAAM,WAAW,SAAU,SAAQ,SAAS,CAC1C,iBAAiB,GAAG,iBAAiB,CACtC;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;IACvD;;;;;OAKG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,2BAA2B,CAAC;IACnD;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;IACzE;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,IAAI,CAAC,EACnB,EAAE,EACF,KAAK,EACL,IAAI,EACJ,YAAoB,EACpB,UAAkB,EAClB,cAAsB,EACtB,WAAW,EAAE,oBAAoB,EACjC,MAAM,EAAE,eAAe,EACvB,OAAO,EACP,OAAO,EACP,YAAoB,EACpB,IAAa,EACb,IAAI,EACJ,MAAM,EACN,KAAgB,EAChB,OAAkB,EAClB,QAAY,EACZ,QAAQ,EACR,GAAG,EAAE,YAAY,EACjB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,+BA8JX;yBAvLe,IAAI"}
|
package/dist/Link/Link.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePopover.d.ts","sourceRoot":"","sources":["../../src/Popover/usePopover.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,EAAiC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE5E,OAAO,EAAW,KAAK,kBAAkB,EAAC,MAAM,mBAAmB,CAAC;AAGpE,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"usePopover.d.ts","sourceRoot":"","sources":["../../src/Popover/usePopover.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,EAAiC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE5E,OAAO,EAAW,KAAK,kBAAkB,EAAC,MAAM,mBAAmB,CAAC;AAGpE,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AAgBnD,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAUhD;;;GAGG;AACH,eAAO,MAAM,uBAAuB,yCAAyC,CAAC;AA4E9E;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IAEtB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAE5B;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;;;;;;;OAUG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;;;;;;;;;OAYG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAEzB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;;;;;;;OASG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;;;;;;;;;OAaG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;;;;;;;;;;OAaG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,UAAU,EAAE,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IAE7C;;;;OAIG;IACH,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAEnD;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;;;OAIG;IACH,IAAI,EAAE,CAAC,OAAO,CAAC,EAAE;QAAC,aAAa,CAAC,EAAE,OAAO,CAAA;KAAC,KAAK,IAAI,CAAC;IAEpD;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;IAEjB;;OAEG;IACH,MAAM,EAAE,MAAM,IAAI,CAAC;IAEnB;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;;;;;;;;;;OAWG;IACH,MAAM,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,KAAK,CAAC,EAAE,kBAAkB,KAAK,SAAS,CAAC;IAEvE;;OAEG;IACH,YAAY,EAAE;QACZ,eAAe,EAAE,QAAQ,GAAG,MAAM,CAAC;QACnC,eAAe,EAAE,OAAO,CAAC;QACzB,eAAe,EAAE,MAAM,CAAC;KACzB,CAAC;CACH;AA4TD,wBAAgB,UAAU,CAAC,OAAO,GAAE,iBAAsB,GAAG,gBAAgB,CAE5E"}
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
import React, { useCallback, useEffect, useRef } from 'react';
|
|
19
19
|
import * as stylex from '@stylexjs/stylex';
|
|
20
20
|
import { useLayer } from "../Layer/useLayer.js";
|
|
21
|
-
import {
|
|
21
|
+
import { useFocusTrapInternal } from "../hooks/useFocusTrap.js";
|
|
22
22
|
import { LayerDepthProvider } from "../Layer/LayerDepthContext.js";
|
|
23
23
|
import "../theme/tokens.stylex.js";
|
|
24
24
|
import { colorVars, spacingVars, radiusVars, shadowVars } from "../theme/tokens.stylex.js";
|
|
@@ -28,6 +28,7 @@ import { rtlStyles } from "../utils/index.js";
|
|
|
28
28
|
import { useDevWarning } from "../hooks/useDevWarning.js";
|
|
29
29
|
import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
|
|
30
30
|
import { mergeProps } from "../utils/mergeProps.js";
|
|
31
|
+
import { isFocusDetached } from "../utils/focusReturn.js";
|
|
31
32
|
import { themeProps } from "../utils/themeProps.js";
|
|
32
33
|
import { paddingStyles } from "../Layout/padding.stylex.js";
|
|
33
34
|
import { stableClassName } from "../naming.js";
|
|
@@ -161,30 +162,52 @@ function usePopoverImplementation(options = {}) {
|
|
|
161
162
|
|
|
162
163
|
// Track whether to skip auto-focus for the current open event
|
|
163
164
|
const skipAutoFocusRef = useRef(false);
|
|
165
|
+
// Whether `show` focused a content control within the opening event.
|
|
166
|
+
const hasFocusedInGestureRef = useRef(false);
|
|
167
|
+
|
|
168
|
+
// Set when the layer reports it has shown, so `show` can tell a popover
|
|
169
|
+
// that opened within the call from one whose content mounts later.
|
|
170
|
+
const hasShownRef = useRef(false);
|
|
171
|
+
const handleLayerShow = useCallback(() => {
|
|
172
|
+
hasShownRef.current = true;
|
|
173
|
+
onShow?.();
|
|
174
|
+
}, [onShow]);
|
|
164
175
|
|
|
165
176
|
// Core layer for popover positioning
|
|
166
177
|
const layer = useLayer({
|
|
167
178
|
mode: 'context',
|
|
168
179
|
lightDismiss: hasLightDismiss,
|
|
169
|
-
onShow,
|
|
180
|
+
onShow: handleLayerShow,
|
|
170
181
|
onHide
|
|
171
182
|
});
|
|
172
183
|
|
|
173
184
|
// Focus trap for the popover content. Escape stays registered while light
|
|
174
185
|
// dismiss is on (native popover="auto" closes on Escape regardless), so a
|
|
175
186
|
// host Dialog keeps deferring to this trap instead of double-dismissing.
|
|
187
|
+
// The element focused when `show` ran: initial focus may move inside before
|
|
188
|
+
// the trap activates, so the trap restores focus here instead.
|
|
189
|
+
const openerRef = useRef(null);
|
|
190
|
+
const getRestoreTarget = useCallback(() => openerRef.current, []);
|
|
176
191
|
const {
|
|
177
192
|
containerRef: contentRef,
|
|
178
193
|
focusFirst
|
|
179
|
-
} =
|
|
194
|
+
} = useFocusTrapInternal({
|
|
180
195
|
isActive: layer.isOpen,
|
|
181
|
-
onEscape: hasEscapeDismiss || hasLightDismiss ? layer.hide : undefined
|
|
196
|
+
onEscape: hasEscapeDismiss || hasLightDismiss ? layer.hide : undefined,
|
|
197
|
+
getRestoreTarget
|
|
182
198
|
});
|
|
183
199
|
const focusInitialTarget = useCallback(() => {
|
|
184
200
|
const container = contentRef.current;
|
|
185
201
|
if (!container) {
|
|
186
202
|
return;
|
|
187
203
|
}
|
|
204
|
+
// Focus already on a control inside (set in `onShow`, or a press in the
|
|
205
|
+
// content) is where the user or the caller wants it; moving it would
|
|
206
|
+
// undo that.
|
|
207
|
+
const active = container.ownerDocument.activeElement;
|
|
208
|
+
if (active != null && active !== container && container.contains(active)) {
|
|
209
|
+
return;
|
|
210
|
+
}
|
|
188
211
|
if (focusFirstContentControl(container)) {
|
|
189
212
|
return;
|
|
190
213
|
}
|
|
@@ -200,16 +223,23 @@ function usePopoverImplementation(options = {}) {
|
|
|
200
223
|
// Reset the per-open focus preference after the popover closes.
|
|
201
224
|
if (!layer.isOpen) {
|
|
202
225
|
skipAutoFocusRef.current = false;
|
|
226
|
+
hasFocusedInGestureRef.current = false;
|
|
203
227
|
return;
|
|
204
228
|
}
|
|
205
229
|
if (hasAutoFocus && !skipAutoFocusRef.current) {
|
|
206
230
|
// Wait a frame so the content is mounted. A popover that closes or
|
|
207
231
|
// unmounts first cancels it: the frame would otherwise move focus into
|
|
208
232
|
// content that is no longer shown, after the close had left it alone.
|
|
209
|
-
const frame = requestAnimationFrame(
|
|
233
|
+
const frame = requestAnimationFrame(() => {
|
|
234
|
+
const doc = contentRef.current?.ownerDocument ?? document;
|
|
235
|
+
if (hasFocusedInGestureRef.current && !isFocusDetached(doc)) {
|
|
236
|
+
return;
|
|
237
|
+
}
|
|
238
|
+
focusInitialTarget();
|
|
239
|
+
});
|
|
210
240
|
return () => cancelAnimationFrame(frame);
|
|
211
241
|
}
|
|
212
|
-
}, [layer.isOpen, hasAutoFocus, focusInitialTarget]);
|
|
242
|
+
}, [layer.isOpen, hasAutoFocus, focusInitialTarget, contentRef]);
|
|
213
243
|
|
|
214
244
|
// Combined ref for trigger element (layer anchor + our ref). It is keyed on
|
|
215
245
|
// the layer's own ref, not the whole layer: the layer object changes with
|
|
@@ -227,8 +257,27 @@ function usePopoverImplementation(options = {}) {
|
|
|
227
257
|
// Show function with optional focus preservation
|
|
228
258
|
const show = useCallback(showOptions => {
|
|
229
259
|
skipAutoFocusRef.current = showOptions?.skipAutoFocus ?? false;
|
|
260
|
+
hasShownRef.current = false;
|
|
261
|
+
const activeElement = (triggerElementRef.current?.ownerDocument ?? document).activeElement;
|
|
262
|
+
openerRef.current = activeElement != null && !contentRef.current?.contains(activeElement) ? activeElement : null;
|
|
230
263
|
layer.show();
|
|
231
|
-
|
|
264
|
+
// When the content is already mounted, the layer shows it within this
|
|
265
|
+
// call, so initial focus lands within the event that opened it: iOS
|
|
266
|
+
// raises its keyboard only for a focus made while the tap is still
|
|
267
|
+
// being handled. The frame in the effect above stays for content that
|
|
268
|
+
// mounts later.
|
|
269
|
+
// Only a content control already rendered takes focus here; content
|
|
270
|
+
// that renders on open (and the dialog-surface fallback) waits for the
|
|
271
|
+
// effect's frame.
|
|
272
|
+
const container = contentRef.current;
|
|
273
|
+
if (hasShownRef.current && hasAutoFocus && !skipAutoFocusRef.current && container != null && !container.contains(container.ownerDocument.activeElement) && focusFirstContentControl(container)) {
|
|
274
|
+
// Initial focus is done. The effect's frame stays only as a fallback
|
|
275
|
+
// for focus lost to the page (content swapped in the same handler
|
|
276
|
+
// unmounts the control just focused); it must not move focus the user
|
|
277
|
+
// has since moved elsewhere.
|
|
278
|
+
hasFocusedInGestureRef.current = true;
|
|
279
|
+
}
|
|
280
|
+
}, [layer, hasAutoFocus, contentRef]);
|
|
232
281
|
|
|
233
282
|
// Toggle function. Opening delegates to show so every route inherits the
|
|
234
283
|
// same-gesture reopen guard owned by Layer.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PowerSearch.d.ts","sourceRoot":"","sources":["../../src/PowerSearch/PowerSearch.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,EAOZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,EAGL,KAAK,yBAAyB,EAC/B,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"PowerSearch.d.ts","sourceRoot":"","sources":["../../src/PowerSearch/PowerSearch.tsx"],"names":[],"mappings":"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"}
|
|
@@ -17,6 +17,7 @@ import React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef, us
|
|
|
17
17
|
import * as stylex from '@stylexjs/stylex';
|
|
18
18
|
import { Tokenizer } from "../Tokenizer/index.js";
|
|
19
19
|
import { TokenizerClearAllMessageContext } from "../Tokenizer/TokenizerClearAllMessageContext.js";
|
|
20
|
+
import { TokenizerItemRemovableContext } from "../Tokenizer/TokenizerItemRemovableContext.js";
|
|
20
21
|
import { TypeaheadItem } from "../Typeahead/TypeaheadItem.js";
|
|
21
22
|
import { Token } from "../Token/index.js";
|
|
22
23
|
import { Avatar } from "../Avatar/index.js";
|
|
@@ -541,6 +542,10 @@ export function PowerSearch({
|
|
|
541
542
|
}
|
|
542
543
|
}, [config, filters, onChange, setPopoverState]);
|
|
543
544
|
|
|
545
|
+
// Tokenizer's Backspace does not go through renderToken. This predicate
|
|
546
|
+
// locks every token of a read-only field.
|
|
547
|
+
const isItemRemovable = useCallback(() => !isReadOnly, [isReadOnly]);
|
|
548
|
+
|
|
544
549
|
// Handle clicking a token to edit
|
|
545
550
|
const handleTokenClick = useCallback(index => {
|
|
546
551
|
if (isReadOnly || isDisabled) {
|
|
@@ -809,36 +814,39 @@ export function PowerSearch({
|
|
|
809
814
|
...themeProps('power-search'),
|
|
810
815
|
children: /*#__PURE__*/_jsx(TokenizerClearAllMessageContext, {
|
|
811
816
|
value: clearAllMessage,
|
|
812
|
-
children: /*#__PURE__*/_jsx(
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
817
|
+
children: /*#__PURE__*/_jsx(TokenizerItemRemovableContext, {
|
|
818
|
+
value: isItemRemovable,
|
|
819
|
+
children: /*#__PURE__*/_jsx(Tokenizer, {
|
|
820
|
+
handleRef: tokenizerRef,
|
|
821
|
+
label: label,
|
|
822
|
+
isLabelHidden: isLabelHidden,
|
|
823
|
+
searchSource: searchSource,
|
|
824
|
+
value: tokenizerValue,
|
|
825
|
+
onChange: handleTokenizerChange,
|
|
826
|
+
renderToken: renderToken,
|
|
827
|
+
renderItem: renderItem,
|
|
828
|
+
maxMenuItems: MAX_BROWSE_MENU_ITEMS,
|
|
829
|
+
menuWidth: menuWidth,
|
|
830
|
+
placeholder: filters.length === 0 ? placeholder : '',
|
|
831
|
+
hasAutoFocus: hasAutoFocus,
|
|
832
|
+
hasClear: hasClear && !isReadOnly,
|
|
833
|
+
startIcon: startIcon,
|
|
834
|
+
endContent: combinedEndContent,
|
|
835
|
+
isDisabled: isDisabled,
|
|
836
|
+
disabledMessage: disabledMessage,
|
|
837
|
+
size: size,
|
|
838
|
+
tokenOverflowBehavior: tokenOverflowBehavior,
|
|
839
|
+
hasEntriesOnFocus: true,
|
|
840
|
+
debounceMs: 0,
|
|
841
|
+
status: status,
|
|
842
|
+
statusVariant: statusVariant,
|
|
843
|
+
onFocus: onFocus,
|
|
844
|
+
onBlur: onBlur,
|
|
845
|
+
containerXstyle: xstyle,
|
|
846
|
+
containerClassName: className,
|
|
847
|
+
containerStyle: style,
|
|
848
|
+
"data-testid": testId
|
|
849
|
+
})
|
|
842
850
|
})
|
|
843
851
|
})
|
|
844
852
|
}), popover.render(popoverContent, {
|
|
@@ -70,7 +70,7 @@ export interface ProgressBarProps extends BaseProps<HTMLDivElement> {
|
|
|
70
70
|
* When true, renders an animated indeterminate progress indicator.
|
|
71
71
|
* Use when the progress amount is unknown (e.g. loading, processing).
|
|
72
72
|
* The `value` and `hasValueLabel` props are ignored in this mode.
|
|
73
|
-
*
|
|
73
|
+
* Under reduced motion it pulses in place instead of sliding.
|
|
74
74
|
* @default false
|
|
75
75
|
*/
|
|
76
76
|
isIndeterminate?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../src/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AAiCA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,OAAO,KAAK,EAAC,qBAAqB,EAAC,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../src/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AAiCA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,OAAO,KAAK,EAAC,qBAAqB,EAAC,MAAM,SAAS,CAAC;AAenD;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,MAAM,qBAAqB,CAAC;AAE7D;;;;;;GAMG;AACH,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACjE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IAC1D;;;OAGG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;;;;;;;OAUG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC;IACvC;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAoZD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAS,EACT,GAAS,EACT,KAAK,EACL,aAAqB,EACrB,aAAqB,EACrB,gBAA0C,EAC1C,OAAkB,EAClB,eAAuB,EACvB,UAAkB,EAClB,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,UAAU,EACzB,GAAG,EACH,GAAG,IAAI,EACR,EAAE,gBAAgB,+BA6KlB;yBA9Le,WAAW"}
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* @file ProgressBar.tsx
|
|
7
|
-
* @input Uses React, useId, stylex,
|
|
7
|
+
* @input Uses React, useId, stylex, tokens, ProgressBarTouch and resolveMotion
|
|
8
8
|
* @output Exports ProgressBar component, ProgressBarProps, ProgressBarVariant types
|
|
9
9
|
* @position Core implementation; consumed by index.ts
|
|
10
10
|
*
|
|
@@ -24,11 +24,17 @@ import { mergeProps } from "../utils/index.js";
|
|
|
24
24
|
import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
|
|
25
25
|
import { themeProps } from "../utils/themeProps.js";
|
|
26
26
|
import { VisuallyHidden } from "../VisuallyHidden/index.js";
|
|
27
|
-
import {
|
|
27
|
+
import { useProgressBarTouch } from "./ProgressBarTouch.js";
|
|
28
|
+
import { formatMotionRoleValue } from "../motion/roles.js";
|
|
29
|
+
import { resolveMotion } from "../motion/resolveMotion.js";
|
|
30
|
+
import { progressBar } from "../motion/uikit/progressBar.js";
|
|
31
|
+
import { timing } from "../motion/uikit/timing.js";
|
|
32
|
+
|
|
28
33
|
// Every mark is wrapped in a Tooltip (marks always carry a label), so load it
|
|
29
34
|
// lazily: a ProgressBar with no marks never bundles the Tooltip chunk. While it
|
|
30
35
|
// loads, the Suspense fallback shows the bare mark, so nothing disappears; the
|
|
31
36
|
// tooltip simply attaches once the chunk is ready.
|
|
37
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
32
38
|
const LazyProgressBarMarkTooltip = /*#__PURE__*/lazy(async () => import("./ProgressBarMarkTooltip.js"));
|
|
33
39
|
|
|
34
40
|
/**
|
|
@@ -55,6 +61,12 @@ const indeterminateSlide = "xr3m334-B";
|
|
|
55
61
|
// physically left → right. The magnitudes mirror the LTR keyframe.
|
|
56
62
|
const indeterminateSlideRtl = "x1c2q33o-B";
|
|
57
63
|
|
|
64
|
+
// Under reduced motion the indeterminate fill stops travelling and pulses in
|
|
65
|
+
// place. It goes from full opacity down to the pulse's floor
|
|
66
|
+
// (`--_progress-bar-pulse-floor`, the progress table's) and back. The
|
|
67
|
+
// animation alternates direction each pass.
|
|
68
|
+
const indeterminatePulse = "xml828b-B";
|
|
69
|
+
|
|
58
70
|
// =============================================================================
|
|
59
71
|
// Styles
|
|
60
72
|
// =============================================================================
|
|
@@ -69,18 +81,22 @@ const styles = {
|
|
|
69
81
|
$$css: true
|
|
70
82
|
},
|
|
71
83
|
fill: {
|
|
72
|
-
kzqmXN: "xh8yej3 xtyencx",
|
|
84
|
+
kzqmXN: "xh8yej3 xtyencx x1j61smm",
|
|
73
85
|
kZKoxP: "x5yr21d",
|
|
74
86
|
kMeerF: "xcthrzx",
|
|
75
87
|
k3XXqK: "x815t2r",
|
|
76
88
|
kjBf7l: "x3teovq",
|
|
77
89
|
kInvED: "xvr1dqx",
|
|
78
90
|
kaIpWk: "xjspbzw",
|
|
79
|
-
k3aq6I: "x8mk83g x13s8k5t x1xwfpud x10rjfdt",
|
|
91
|
+
k3aq6I: "x8mk83g x13s8k5t x1xwfpud x1ayxeub x1rvio82 x10rjfdt",
|
|
80
92
|
k6sLGO: "x1so62im x1mfxj9n",
|
|
81
93
|
k1ekBW: "x11xpdln x18hto2h",
|
|
82
|
-
kIyJzY: "x80gvsz xo2sced x1r9o9eb",
|
|
83
|
-
kAMwcw: "xlr8y92",
|
|
94
|
+
kIyJzY: "x80gvsz x1k32oa2 x11y4s09 xo2sced x1r9o9eb",
|
|
95
|
+
kAMwcw: "xlr8y92 x1itqrb8",
|
|
96
|
+
$$css: true
|
|
97
|
+
},
|
|
98
|
+
fillEmpty: {
|
|
99
|
+
kSiTet: "x17di44q",
|
|
84
100
|
$$css: true
|
|
85
101
|
},
|
|
86
102
|
indeterminateFill: {
|
|
@@ -89,11 +105,12 @@ const styles = {
|
|
|
89
105
|
k3XXqK: "x815t2r",
|
|
90
106
|
kjBf7l: "x3teovq",
|
|
91
107
|
kInvED: "xvr1dqx",
|
|
92
|
-
kzqmXN: "xz84dc7",
|
|
108
|
+
kzqmXN: "xz84dc7 xie2s74",
|
|
93
109
|
kaIpWk: "xjspbzw",
|
|
94
|
-
kKVMdj: "xozk8ic xfd3fxj",
|
|
95
|
-
k44tkh: "xmg6eyc
|
|
96
|
-
kyAemX: "x4hg4is",
|
|
110
|
+
kKVMdj: "xozk8ic xfd3fxj x1a94pi7 xfqa98z",
|
|
111
|
+
k44tkh: "xmg6eyc x1p2ibn3",
|
|
112
|
+
kyAemX: "x4hg4is x10xcq22",
|
|
113
|
+
kILWW9: "x4q6aw4",
|
|
97
114
|
ko0y90: "xa4qsjk",
|
|
98
115
|
$$css: true
|
|
99
116
|
},
|
|
@@ -196,10 +213,25 @@ const markOnTrackStyles = {
|
|
|
196
213
|
}
|
|
197
214
|
};
|
|
198
215
|
|
|
216
|
+
// The reduced-motion pulse's variables, from the progress table.
|
|
217
|
+
|
|
199
218
|
// `CSSProperties` has no index signature for custom properties, so the fill's
|
|
200
219
|
// inline style — which publishes the filled share as the private
|
|
201
220
|
// `--_progress-bar-fill` — needs this augmentation to typecheck.
|
|
202
221
|
|
|
222
|
+
/**
|
|
223
|
+
* The reduced-motion pulse plays the `progress.reducedMotionPulseMs` role on
|
|
224
|
+
* the `timing.curves.move` curve, down to the progress table's floor.
|
|
225
|
+
*/
|
|
226
|
+
function pulseStyle(element) {
|
|
227
|
+
const pulseMs = resolveMotion(element, progressBar, 'reducedMotionPulseMs');
|
|
228
|
+
const curve = resolveMotion(element, timing.curves.move);
|
|
229
|
+
return {
|
|
230
|
+
'--_progress-bar-pulse': `${pulseMs}ms`,
|
|
231
|
+
'--_progress-bar-pulse-curve': formatMotionRoleValue('curve', curve),
|
|
232
|
+
'--_progress-bar-pulse-floor': String(progressBar.reducedMotionPulseFloor)
|
|
233
|
+
};
|
|
234
|
+
}
|
|
203
235
|
function defaultFormatValueLabel(value, max) {
|
|
204
236
|
const pct = max > 0 ? Math.round(value / max * 100) : 0;
|
|
205
237
|
return `${pct}%`;
|
|
@@ -277,8 +309,12 @@ export function ProgressBar({
|
|
|
277
309
|
const valueText = formatValueLabel(clampedValue, safeMax);
|
|
278
310
|
const showValueLabel = hasValueLabel && !isIndeterminate;
|
|
279
311
|
const fillVariant = isDisabled ? 'disabled' : variant;
|
|
312
|
+
// Under a finger the fill moves as UIProgressView's does and draws at least
|
|
313
|
+
// 16px; what that needs from script is the touch layer's (ProgressBarTouch).
|
|
314
|
+
const touch = useProgressBarTouch(percentage, !isIndeterminate && (marks?.length ?? 0) > 0);
|
|
280
315
|
const fillStyle = {
|
|
281
|
-
'--_progress-bar-fill': `${percentage}
|
|
316
|
+
'--_progress-bar-fill': `${percentage}%`,
|
|
317
|
+
...touch.fillVars
|
|
282
318
|
};
|
|
283
319
|
|
|
284
320
|
// Marks make no sense without a determinate value, so they are only drawn
|
|
@@ -298,7 +334,7 @@ export function ProgressBar({
|
|
|
298
334
|
value: mark.value,
|
|
299
335
|
label: mark.label,
|
|
300
336
|
pct,
|
|
301
|
-
isOnFill: percentage > 0 && pct <=
|
|
337
|
+
isOnFill: percentage > 0 && pct <= touch.drawnPercentage
|
|
302
338
|
};
|
|
303
339
|
}) : [];
|
|
304
340
|
return /*#__PURE__*/_jsxs("div", {
|
|
@@ -354,17 +390,19 @@ export function ProgressBar({
|
|
|
354
390
|
"aria-valuemax": isIndeterminate ? undefined : safeMax,
|
|
355
391
|
"aria-labelledby": labelId,
|
|
356
392
|
"aria-valuetext": isIndeterminate ? undefined : valueText,
|
|
393
|
+
ref: touch.trackRef,
|
|
357
394
|
...mergeProps(themeProps('progress-bar-track'), {
|
|
358
395
|
className: "xh8yej3 xdk7pt xwmxj5m xjspbzw xb3r6kr"
|
|
359
396
|
}),
|
|
360
397
|
children: isIndeterminate ? /*#__PURE__*/_jsx("div", {
|
|
361
398
|
...mergeProps(themeProps('progress-bar-fill', {
|
|
362
399
|
variant: fillVariant
|
|
363
|
-
}), stylex.props(styles.indeterminateFill, variantStyles[fillVariant]))
|
|
400
|
+
}), stylex.props(styles.indeterminateFill, variantStyles[fillVariant])),
|
|
401
|
+
style: pulseStyle(null)
|
|
364
402
|
}) : /*#__PURE__*/_jsx("div", {
|
|
365
403
|
...mergeProps(themeProps('progress-bar-fill', {
|
|
366
404
|
variant: fillVariant
|
|
367
|
-
}), stylex.props(styles.fill, variantStyles[fillVariant])),
|
|
405
|
+
}), stylex.props(styles.fill, percentage === 0 && styles.fillEmpty, variantStyles[fillVariant])),
|
|
368
406
|
style: fillStyle
|
|
369
407
|
})
|
|
370
408
|
}), resolvedMarks.map(mark => {
|