@astryxdesign/core 0.7.7-canary.bf14580 → 0.7.7-canary.c19ca12
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/AlertDialog/AlertDialog.d.ts +4 -1
- package/dist/AlertDialog/AlertDialog.d.ts.map +1 -1
- package/dist/AlertDialog/AlertDialog.js +36 -6
- package/dist/BottomSheet/BottomSheet.d.ts.map +1 -1
- package/dist/BottomSheet/BottomSheet.js +76 -6
- package/dist/BottomSheet/BottomSheetPanel.d.ts.map +1 -1
- package/dist/BottomSheet/BottomSheetPanel.js +23 -4
- package/dist/BottomSheet/bottomSheetStack.d.ts.map +1 -1
- package/dist/BottomSheet/bottomSheetStack.js +5 -4
- package/dist/BottomSheet/useSheetGestures.d.ts.map +1 -1
- package/dist/BottomSheet/useSheetGestures.js +3 -1
- package/dist/Button/Button.d.ts.map +1 -1
- package/dist/Button/Button.js +47 -3
- package/dist/CheckboxInput/CheckboxInput.d.ts.map +1 -1
- package/dist/CheckboxInput/CheckboxInput.js +13 -2
- package/dist/ComplexSelector/ComplexSelector.d.ts +4 -1
- package/dist/ComplexSelector/ComplexSelector.d.ts.map +1 -1
- package/dist/ComplexSelector/ComplexSelector.js +14 -4
- package/dist/ContextMenu/ContextMenu.js +2 -2
- package/dist/DateInput/MonthScroller.d.ts.map +1 -1
- package/dist/DateInput/MonthScroller.js +13 -27
- package/dist/DateInput/Wheel.d.ts.map +1 -1
- package/dist/DateInput/Wheel.js +22 -41
- package/dist/Dialog/Dialog.d.ts.map +1 -1
- package/dist/Dialog/Dialog.js +7 -31
- package/dist/Field/Field.js +2 -2
- package/dist/HoverCard/HoverCard.d.ts +4 -3
- package/dist/HoverCard/HoverCard.d.ts.map +1 -1
- package/dist/HoverCard/HoverCard.js +27 -2
- package/dist/HoverCard/useHoverCard.d.ts +5 -4
- package/dist/HoverCard/useHoverCard.d.ts.map +1 -1
- package/dist/HoverCard/useHoverCard.js +17 -31
- package/dist/Icon/Icon.d.ts +5 -1
- package/dist/Icon/Icon.d.ts.map +1 -1
- package/dist/Icon/Icon.js +5 -2
- package/dist/Layer/layerAnimations.stylex.d.ts +7 -8
- package/dist/Layer/layerAnimations.stylex.d.ts.map +1 -1
- package/dist/Layer/layerAnimations.stylex.js +25 -20
- package/dist/Layer/usePressPin.d.ts +17 -5
- package/dist/Layer/usePressPin.d.ts.map +1 -1
- package/dist/Layer/usePressPin.js +62 -12
- package/dist/Lightbox/Lightbox.d.ts.map +1 -1
- package/dist/Lightbox/Lightbox.js +18 -0
- package/dist/PowerSearch/PowerSearch.d.ts +36 -3
- package/dist/PowerSearch/PowerSearch.d.ts.map +1 -1
- package/dist/PowerSearch/PowerSearch.js +522 -269
- package/dist/PowerSearch/PowerSearchBottomSheet.d.ts +100 -0
- package/dist/PowerSearch/PowerSearchBottomSheet.d.ts.map +1 -0
- package/dist/PowerSearch/PowerSearchBottomSheet.js +1913 -0
- package/dist/PowerSearch/PowerSearchEditPopover.d.ts +32 -1
- package/dist/PowerSearch/PowerSearchEditPopover.d.ts.map +1 -1
- package/dist/PowerSearch/PowerSearchEditPopover.js +17 -6
- package/dist/PowerSearch/PowerSearchValueEditor.d.ts +38 -3
- package/dist/PowerSearch/PowerSearchValueEditor.d.ts.map +1 -1
- package/dist/PowerSearch/PowerSearchValueEditor.js +170 -61
- package/dist/PowerSearch/formatFilterValue.d.ts +7 -0
- package/dist/PowerSearch/formatFilterValue.d.ts.map +1 -1
- package/dist/PowerSearch/formatFilterValue.js +11 -1
- package/dist/PowerSearch/formatTokenValue.d.ts +28 -0
- package/dist/PowerSearch/formatTokenValue.d.ts.map +1 -0
- package/dist/PowerSearch/formatTokenValue.js +160 -0
- package/dist/PowerSearch/powerSearchSheetUtils.d.ts +65 -0
- package/dist/PowerSearch/powerSearchSheetUtils.d.ts.map +1 -0
- package/dist/PowerSearch/powerSearchSheetUtils.js +168 -0
- package/dist/RadioList/RadioList.d.ts.map +1 -1
- package/dist/RadioList/RadioList.js +3 -2
- package/dist/RadioList/RadioListItem.d.ts +1 -1
- package/dist/RadioList/RadioListItem.d.ts.map +1 -1
- package/dist/RadioList/RadioListItem.js +5 -3
- package/dist/SegmentedControl/useSegmentedSelectionMotion.d.ts.map +1 -1
- package/dist/SegmentedControl/useSegmentedSelectionMotion.js +3 -3
- package/dist/Slider/sliderTouchController.js +2 -2
- package/dist/Spinner/Spinner.d.ts +1 -1
- package/dist/Spinner/Spinner.d.ts.map +1 -1
- package/dist/Spinner/Spinner.js +60 -58
- package/dist/Switch/useSwitchTouch.js +4 -4
- package/dist/Table/BaseTable.d.ts.map +1 -1
- package/dist/Table/BaseTable.js +29 -8
- package/dist/TextInput/TextInput.d.ts +2 -2
- package/dist/TextInput/TextInput.d.ts.map +1 -1
- package/dist/TextInput/TextInput.js +10 -7
- package/dist/Toast/Toast.d.ts +11 -1
- package/dist/Toast/Toast.d.ts.map +1 -1
- package/dist/Toast/Toast.js +25 -15
- package/dist/Toast/ToastViewport.d.ts.map +1 -1
- package/dist/Toast/ToastViewport.js +94 -34
- package/dist/Toast/types.d.ts +9 -3
- package/dist/Toast/types.d.ts.map +1 -1
- package/dist/Token/Token.d.ts +2 -2
- package/dist/Token/Token.d.ts.map +1 -1
- package/dist/Token/Token.js +12 -4
- package/dist/Token/TokenNamingContext.d.ts +14 -0
- package/dist/Token/TokenNamingContext.d.ts.map +1 -0
- package/dist/Token/TokenNamingContext.js +23 -0
- package/dist/Tooltip/useTooltip.d.ts +19 -1
- package/dist/Tooltip/useTooltip.d.ts.map +1 -1
- package/dist/Tooltip/useTooltip.js +34 -53
- package/dist/Typeahead/TypeaheadItem.d.ts +2 -1
- package/dist/Typeahead/TypeaheadItem.d.ts.map +1 -1
- package/dist/animator/createAnimator.d.ts +98 -0
- package/dist/animator/createAnimator.d.ts.map +1 -0
- package/dist/animator/createAnimator.js +259 -0
- package/dist/astryx.css +22 -6
- package/dist/gestures/GestureHost.d.ts +27 -1
- package/dist/gestures/GestureHost.d.ts.map +1 -1
- package/dist/gestures/GestureHost.js +90 -8
- package/dist/gestures/PressTracker.d.ts.map +1 -1
- package/dist/gestures/PressTracker.js +4 -3
- package/dist/hooks/actionGroupTracker.d.ts +4 -1
- package/dist/hooks/actionGroupTracker.d.ts.map +1 -1
- package/dist/hooks/actionGroupTracker.js +13 -3
- package/dist/hooks/index.d.ts +1 -0
- package/dist/hooks/index.d.ts.map +1 -1
- package/dist/hooks/index.js +1 -0
- package/dist/hooks/pressGroupContext.d.ts +6 -0
- package/dist/hooks/pressGroupContext.d.ts.map +1 -0
- package/dist/hooks/pressGroupContext.js +20 -0
- package/dist/hooks/useActionGroupTracking.d.ts +53 -0
- package/dist/hooks/useActionGroupTracking.d.ts.map +1 -0
- package/dist/hooks/useActionGroupTracking.js +174 -0
- package/dist/hooks/useAnimator.d.ts +41 -0
- package/dist/hooks/useAnimator.d.ts.map +1 -0
- package/dist/hooks/useAnimator.js +70 -0
- package/dist/hooks/useAttachment.d.ts +1 -1
- package/dist/hooks/useAttachment.js +1 -1
- package/dist/hooks/useInputStatusIcon.d.ts +1 -1
- package/dist/hooks/useInputStatusIcon.d.ts.map +1 -1
- package/dist/hooks/useInputStatusIcon.js +2 -2
- package/dist/hooks/useLongPress.d.ts +6 -2
- package/dist/hooks/useLongPress.d.ts.map +1 -1
- package/dist/hooks/useLongPress.js +95 -15
- package/dist/hooks/useMenuPress.d.ts.map +1 -1
- package/dist/hooks/useMenuPress.js +4 -2
- package/dist/i18n/generated-english/PowerSearch/PowerSearchBottomSheet.generated.d.ts +8 -0
- package/dist/i18n/generated-english/PowerSearch/PowerSearchBottomSheet.generated.d.ts.map +1 -0
- package/dist/i18n/generated-english/PowerSearch/PowerSearchBottomSheet.generated.js +42 -0
- package/dist/i18n/generated-english/PowerSearch/PowerSearchValueEditor.generated.d.ts.map +1 -1
- package/dist/i18n/generated-english/PowerSearch/PowerSearchValueEditor.generated.js +6 -0
- package/dist/i18n/generated-english/PowerSearch/formatTokenValue.generated.d.ts +8 -0
- package/dist/i18n/generated-english/PowerSearch/formatTokenValue.generated.d.ts.map +1 -0
- package/dist/i18n/generated-english/PowerSearch/formatTokenValue.generated.js +14 -0
- package/dist/i18n/generated-locales/en.generated.d.ts.map +1 -1
- package/dist/i18n/generated-locales/en.generated.js +30 -0
- package/dist/i18n/generated-locales/pseudo.generated.d.ts.map +1 -1
- package/dist/i18n/generated-locales/pseudo.generated.js +30 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +4 -0
- package/dist/internal/indicatorPress.stylex.d.ts +20 -0
- package/dist/internal/indicatorPress.stylex.d.ts.map +1 -0
- package/dist/internal/indicatorPress.stylex.js +26 -0
- package/dist/motion/animator.d.ts +14 -14
- package/dist/motion/animator.d.ts.map +1 -1
- package/dist/motion/animator.js +41 -18
- package/dist/motion/reducedMotion.d.ts +24 -0
- package/dist/motion/reducedMotion.d.ts.map +1 -1
- package/dist/motion/reducedMotion.js +78 -1
- package/dist/motion/uikit/alert.d.ts +41 -0
- package/dist/motion/uikit/alert.d.ts.map +1 -0
- package/dist/motion/uikit/alert.js +43 -0
- package/dist/privateAttributes/pressGroupItem.stylex.d.ts +15 -0
- package/dist/privateAttributes/pressGroupItem.stylex.d.ts.map +1 -0
- package/dist/privateAttributes/pressGroupItem.stylex.js +23 -0
- package/dist/utils/clickGuard.d.ts +8 -1
- package/dist/utils/clickGuard.d.ts.map +1 -1
- package/dist/utils/clickGuard.js +24 -1
- package/dist/utils/dateParser.d.ts.map +1 -1
- package/dist/utils/dateParser.js +12 -0
- package/dist/utils/focusReturn.d.ts +15 -0
- package/dist/utils/focusReturn.d.ts.map +1 -1
- package/dist/utils/focusReturn.js +28 -0
- package/dist/utils/interactionOverlay.stylex.d.ts +3 -2
- package/dist/utils/interactionOverlay.stylex.d.ts.map +1 -1
- package/dist/utils/interactionOverlay.stylex.js +3 -2
- package/dist/utils/pressFeedback.d.ts.map +1 -1
- package/dist/utils/pressFeedback.js +19 -6
- package/dist/utils/triggerFocus.d.ts +36 -0
- package/dist/utils/triggerFocus.d.ts.map +1 -0
- package/dist/utils/triggerFocus.js +65 -0
- package/locales/en.json +120 -0
- package/locales/pseudo.json +90 -0
- package/package.json +9 -4
- package/src/AlertDialog/AlertDialog.doc.mjs +2 -2
- package/src/AlertDialog/AlertDialog.tsx +37 -5
- package/src/BottomSheet/BottomSheet.tsx +85 -5
- package/src/BottomSheet/BottomSheetPanel.tsx +40 -5
- package/src/BottomSheet/bottomSheetStack.ts +8 -4
- package/src/BottomSheet/useSheetGestures.ts +3 -1
- package/src/Button/Button.tsx +63 -5
- package/src/CheckboxInput/CheckboxInput.doc.mjs +18 -0
- package/src/CheckboxInput/CheckboxInput.tsx +36 -9
- package/src/ComplexSelector/ComplexSelector.tsx +20 -5
- package/src/ContextMenu/ContextMenu.tsx +2 -2
- package/src/DateInput/MonthScroller.tsx +18 -22
- package/src/DateInput/Wheel.tsx +30 -32
- package/src/Dialog/Dialog.tsx +10 -31
- package/src/Field/Field.tsx +2 -2
- package/src/HoverCard/HoverCard.doc.mjs +4 -2
- package/src/HoverCard/HoverCard.tsx +35 -4
- package/src/HoverCard/useHoverCard.doc.mjs +178 -36
- package/src/HoverCard/useHoverCard.tsx +46 -52
- package/src/Icon/Icon.doc.mjs +49 -8
- package/src/Icon/Icon.tsx +15 -7
- package/src/Layer/layerAnimations.stylex.ts +24 -16
- package/src/Layer/usePressPin.ts +81 -15
- package/src/Lightbox/Lightbox.tsx +18 -0
- package/src/PowerSearch/PowerSearch.doc.mjs +54 -5
- package/src/PowerSearch/PowerSearch.tsx +734 -288
- package/src/PowerSearch/PowerSearchBottomSheet.tsx +2515 -0
- package/src/PowerSearch/PowerSearchEditPopover.tsx +28 -6
- package/src/PowerSearch/PowerSearchValueEditor.tsx +203 -38
- package/src/PowerSearch/formatFilterValue.ts +18 -1
- package/src/PowerSearch/formatTokenValue.ts +215 -0
- package/src/PowerSearch/powerSearchSheetUtils.ts +224 -0
- package/src/RadioList/RadioList.tsx +3 -2
- package/src/RadioList/RadioListItem.tsx +5 -3
- package/src/SegmentedControl/useSegmentedSelectionMotion.ts +6 -3
- package/src/Slider/sliderTouchController.ts +2 -2
- package/src/Spinner/Spinner.tsx +77 -63
- package/src/Switch/useSwitchTouch.ts +4 -4
- package/src/Table/BaseTable.tsx +46 -12
- package/src/TextInput/TextInput.tsx +11 -10
- package/src/Toast/Toast.doc.mjs +4 -3
- package/src/Toast/Toast.tsx +52 -32
- package/src/Toast/ToastViewport.tsx +121 -35
- package/src/Toast/types.ts +9 -3
- package/src/Token/Token.tsx +13 -4
- package/src/Token/TokenNamingContext.ts +28 -0
- package/src/Tooltip/useTooltip.doc.mjs +24 -0
- package/src/Tooltip/useTooltip.tsx +61 -56
- package/src/Typeahead/TypeaheadItem.doc.mjs +6 -3
- package/src/Typeahead/TypeaheadItem.tsx +2 -1
- package/src/animator/createAnimator.doc.mjs +153 -0
- package/src/animator/createAnimator.ts +324 -0
- package/src/gestures/GestureHost.ts +105 -10
- package/src/gestures/PressTracker.ts +4 -3
- package/src/gestures/README.md +7 -1
- package/src/hooks/actionGroupTracker.ts +20 -5
- package/src/hooks/index.ts +2 -0
- package/src/hooks/pressGroupContext.ts +21 -0
- package/src/hooks/useActionGroupTracking.ts +224 -0
- package/src/hooks/useAnimator.doc.mjs +109 -0
- package/src/hooks/useAnimator.ts +67 -0
- package/src/hooks/useAttachment.ts +1 -1
- package/src/hooks/useInputStatusIcon.tsx +3 -2
- package/src/hooks/useLongPress.doc.mjs +2 -2
- package/src/hooks/useLongPress.ts +136 -15
- package/src/hooks/useMenuPress.ts +8 -2
- package/src/i18n/generated-english/PowerSearch/PowerSearchBottomSheet.generated.ts +43 -0
- package/src/i18n/generated-english/PowerSearch/PowerSearchValueEditor.generated.ts +6 -0
- package/src/i18n/generated-english/PowerSearch/formatTokenValue.generated.ts +15 -0
- package/src/i18n/generated-locales/en.generated.ts +41 -0
- package/src/i18n/generated-locales/pseudo.generated.ts +42 -0
- package/src/index.ts +13 -0
- package/src/internal/indicatorPress.stylex.ts +24 -0
- package/src/motion/README.md +8 -5
- package/src/motion/animator.ts +61 -29
- package/src/motion/reducedMotion.ts +79 -1
- package/src/motion/uikit/alert.ts +43 -0
- package/src/privateAttributes/pressGroupItem.stylex.ts +23 -0
- package/src/utils/clickGuard.ts +37 -1
- package/src/utils/dateParser.ts +16 -0
- package/src/utils/focusReturn.ts +30 -0
- package/src/utils/interactionOverlay.stylex.ts +3 -2
- package/src/utils/pressFeedback.ts +19 -6
- package/src/utils/triggerFocus.ts +80 -0
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @file indicatorPress.stylex.ts
|
|
3
|
+
* @input Uses StyleX
|
|
4
|
+
* @output Exports `indicatorPressScope`, the marker of a first-party
|
|
5
|
+
* indicator that paints its own press
|
|
6
|
+
* @position Internal entry for Astryx's own replacement indicators;
|
|
7
|
+
* CheckboxInput reads it
|
|
8
|
+
*/
|
|
9
|
+
import * as stylex from '@stylexjs/stylex';
|
|
10
|
+
/**
|
|
11
|
+
* Marks a first-party replacement indicator that paints its own press, for
|
|
12
|
+
* a shape that CheckboxInput's rounded-square press layer would tint past,
|
|
13
|
+
* such as a circle. CheckboxInput leaves that layer off over an indicator
|
|
14
|
+
* with this marker.
|
|
15
|
+
*
|
|
16
|
+
* @internal Not public API: the touch press reaches the indicator through a
|
|
17
|
+
* private property.
|
|
18
|
+
*/
|
|
19
|
+
export declare const indicatorPressScope: ReturnType<typeof stylex.defineMarker>;
|
|
20
|
+
//# sourceMappingURL=indicatorPress.stylex.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"indicatorPress.stylex.d.ts","sourceRoot":"","sources":["../../src/internal/indicatorPress.stylex.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAE3C;;;;;;;;GAQG;AACH,eAAO,MAAM,mBAAmB,EAAE,UAAU,CAAC,OAAO,MAAM,CAAC,YAAY,CAChD,CAAC"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* @file indicatorPress.stylex.ts
|
|
5
|
+
* @input Uses StyleX
|
|
6
|
+
* @output Exports `indicatorPressScope`, the marker of a first-party
|
|
7
|
+
* indicator that paints its own press
|
|
8
|
+
* @position Internal entry for Astryx's own replacement indicators;
|
|
9
|
+
* CheckboxInput reads it
|
|
10
|
+
*/
|
|
11
|
+
|
|
12
|
+
import * as stylex from '@stylexjs/stylex';
|
|
13
|
+
|
|
14
|
+
/**
|
|
15
|
+
* Marks a first-party replacement indicator that paints its own press, for
|
|
16
|
+
* a shape that CheckboxInput's rounded-square press layer would tint past,
|
|
17
|
+
* such as a circle. CheckboxInput leaves that layer off over an indicator
|
|
18
|
+
* with this marker.
|
|
19
|
+
*
|
|
20
|
+
* @internal Not public API: the touch press reaches the indicator through a
|
|
21
|
+
* private property.
|
|
22
|
+
*/
|
|
23
|
+
export const indicatorPressScope = {
|
|
24
|
+
x1lrrceh: "x1lrrceh",
|
|
25
|
+
$$css: true
|
|
26
|
+
};
|
|
@@ -50,18 +50,18 @@ export interface AnimateOptions {
|
|
|
50
50
|
crossfadeAs?: 'entrance' | 'exit';
|
|
51
51
|
/**
|
|
52
52
|
* When the call's animations start. By default a call from rest starts
|
|
53
|
-
* when the browser commits it
|
|
54
|
-
*
|
|
53
|
+
* when the browser commits it. A call that continues motion on screen (a
|
|
54
|
+
* retarget) starts now, from the value on screen. A curve whose tail
|
|
55
|
+
* already shows as at rest counts as rest. Ignored with `at`.
|
|
55
56
|
* - `'commit'`: a call that continues motion also starts when the browser
|
|
56
|
-
* commits it
|
|
57
|
-
*
|
|
58
|
-
*
|
|
59
|
-
*
|
|
60
|
-
*
|
|
61
|
-
*
|
|
62
|
-
*
|
|
63
|
-
*
|
|
64
|
-
* continues motion on screen (a retarget) starts now, as by default.
|
|
57
|
+
* commits it. The browser dates it, as it dates a call from rest.
|
|
58
|
+
* - `'presented'`: a call from rest leaves its element at rest. Its
|
|
59
|
+
* animations are created two frames later, once the frame with the
|
|
60
|
+
* element at rest has been presented. They then start at their commit,
|
|
61
|
+
* so a busy UI process delays the motion instead of skipping into it.
|
|
62
|
+
* Any other change to the animator before then creates the animations
|
|
63
|
+
* first, in call order. A call that continues motion on screen starts
|
|
64
|
+
* now, as by default.
|
|
65
65
|
*/
|
|
66
66
|
start?: 'commit' | 'presented';
|
|
67
67
|
/**
|
|
@@ -101,7 +101,7 @@ export interface MotionCurve {
|
|
|
101
101
|
readonly isTransition?: boolean;
|
|
102
102
|
}
|
|
103
103
|
/**
|
|
104
|
-
* Options of `
|
|
104
|
+
* Options of `createMotionAnimator`.
|
|
105
105
|
*/
|
|
106
106
|
/** How `set` puts values in place. */
|
|
107
107
|
export interface SetOptions {
|
|
@@ -302,7 +302,7 @@ export declare function defaultIsCoarsePointer(): boolean;
|
|
|
302
302
|
*
|
|
303
303
|
* @example
|
|
304
304
|
* ```
|
|
305
|
-
* const animator =
|
|
305
|
+
* const animator = createMotionAnimator(sheet);
|
|
306
306
|
* // finger lifts at 1200 px/s heading for the detent at 0 (a component
|
|
307
307
|
* // passes the spring of its motion role):
|
|
308
308
|
* animator.animate({y: 0}, {spring: {response: 0.45, dampingRatio: 0.9}, velocity: {y: 1200}});
|
|
@@ -311,5 +311,5 @@ export declare function defaultIsCoarsePointer(): boolean;
|
|
|
311
311
|
* animator.stop(['y']);
|
|
312
312
|
* ```
|
|
313
313
|
*/
|
|
314
|
-
export declare function
|
|
314
|
+
export declare function createMotionAnimator(element: HTMLElement | null, options?: AnimatorOptions): Animator;
|
|
315
315
|
//# sourceMappingURL=animator.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"animator.d.ts","sourceRoot":"","sources":["../../src/motion/animator.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"animator.d.ts","sourceRoot":"","sources":["../../src/motion/animator.ts"],"names":[],"mappings":"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"}
|
package/dist/motion/animator.js
CHANGED
|
@@ -4,11 +4,12 @@
|
|
|
4
4
|
* @file animator.ts
|
|
5
5
|
* @input An element, target values, and a spring, momentum curves (coast.ts)
|
|
6
6
|
* or any closed-form curve
|
|
7
|
-
* @output Exports `
|
|
8
|
-
* rotate, scale and opacity,
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
7
|
+
* @output Exports `createMotionAnimator`, a compositor animator for
|
|
8
|
+
* translate, rotate, scale and opacity, and its option, handle and
|
|
9
|
+
* transition types. It reads presentation values and velocities from the
|
|
10
|
+
* analytic curves. It retargets with the velocity kept, freezes in place on
|
|
11
|
+
* `stop`, and gives completion promises, a shared clock, and UIKit's
|
|
12
|
+
* Reduced Motion substitution.
|
|
12
13
|
* @position Motion foundation (DOM). Internal to core: components use it for
|
|
13
14
|
* every touch-presentation animation; not exported from the package entry
|
|
14
15
|
*
|
|
@@ -212,7 +213,7 @@ import { planReducedMotion } from "./reducedMotionPlan.js";
|
|
|
212
213
|
*/
|
|
213
214
|
|
|
214
215
|
/**
|
|
215
|
-
* Options of `
|
|
216
|
+
* Options of `createMotionAnimator`.
|
|
216
217
|
*/
|
|
217
218
|
/** How `set` puts values in place. */
|
|
218
219
|
|
|
@@ -292,6 +293,18 @@ const SAMPLE_TOLERANCE = {
|
|
|
292
293
|
/** Keyframes start on this grid (ms) and are split where the curve needs it. */
|
|
293
294
|
const SAMPLE_GRID_MS = 1000 / 30;
|
|
294
295
|
|
|
296
|
+
/**
|
|
297
|
+
* A curve within this many sample tolerances of its target can show as at
|
|
298
|
+
* rest. A call on it then starts as one from rest does, at the browser's start.
|
|
299
|
+
*/
|
|
300
|
+
const REST_DISTANCE_TOLERANCES = 2;
|
|
301
|
+
|
|
302
|
+
/**
|
|
303
|
+
* A curve shows as at rest only while it moves at most one `SAMPLE_TOLERANCE`
|
|
304
|
+
* a frame at this rate.
|
|
305
|
+
*/
|
|
306
|
+
const REST_FRAMES_PER_SECOND = 60;
|
|
307
|
+
|
|
295
308
|
/** A curve that has not settled by then (an undamped spring) snaps. */
|
|
296
309
|
const MAX_DURATION_MS = 30_000;
|
|
297
310
|
|
|
@@ -420,7 +433,7 @@ export function animatorFor(element, options = {}) {
|
|
|
420
433
|
const key = options.pseudoElement ?? '';
|
|
421
434
|
let animator = byPseudo.get(key);
|
|
422
435
|
if (animator == null) {
|
|
423
|
-
animator =
|
|
436
|
+
animator = createMotionAnimator(element, options);
|
|
424
437
|
byPseudo.set(key, animator);
|
|
425
438
|
}
|
|
426
439
|
return animator;
|
|
@@ -524,7 +537,7 @@ const REDUCED_TRANSITION = {
|
|
|
524
537
|
*
|
|
525
538
|
* @example
|
|
526
539
|
* ```
|
|
527
|
-
* const animator =
|
|
540
|
+
* const animator = createMotionAnimator(sheet);
|
|
528
541
|
* // finger lifts at 1200 px/s heading for the detent at 0 (a component
|
|
529
542
|
* // passes the spring of its motion role):
|
|
530
543
|
* animator.animate({y: 0}, {spring: {response: 0.45, dampingRatio: 0.9}, velocity: {y: 1200}});
|
|
@@ -533,7 +546,7 @@ const REDUCED_TRANSITION = {
|
|
|
533
546
|
* animator.stop(['y']);
|
|
534
547
|
* ```
|
|
535
548
|
*/
|
|
536
|
-
export function
|
|
549
|
+
export function createMotionAnimator(element, options = {}) {
|
|
537
550
|
const now = options.now ?? defaultNow;
|
|
538
551
|
const frameSource = options.requestFrame ?? (typeof requestAnimationFrame === 'function' ? callback => {
|
|
539
552
|
requestAnimationFrame(() => callback());
|
|
@@ -737,6 +750,14 @@ export function createAnimator(element, options = {}) {
|
|
|
737
750
|
}
|
|
738
751
|
return curveAt(property, time);
|
|
739
752
|
};
|
|
753
|
+
|
|
754
|
+
/**
|
|
755
|
+
* Whether a curve's tail already shows as at rest at `time`. Under a
|
|
756
|
+
* starved main thread the browser commits a call late. A call that starts
|
|
757
|
+
* at its own time then skips that far into its curve. One that starts at
|
|
758
|
+
* the commit holds an element that hardly moves.
|
|
759
|
+
*/
|
|
760
|
+
const showsAtRest = (property, segment, time) => Math.abs(valueAt(property, time) - segment.target) <= REST_DISTANCE_TOLERANCES * SAMPLE_TOLERANCE[property] && Math.abs(velocityAt(property, time)) <= SAMPLE_TOLERANCE[property] * REST_FRAMES_PER_SECOND;
|
|
740
761
|
const velocityAt = (property, time) => {
|
|
741
762
|
const held = segments.get(property);
|
|
742
763
|
if (held != null && isHeld(held)) {
|
|
@@ -1506,10 +1527,10 @@ export function createAnimator(element, options = {}) {
|
|
|
1506
1527
|
// -- starting from rest ---------------------------------------------------
|
|
1507
1528
|
|
|
1508
1529
|
/**
|
|
1509
|
-
* A call starts from rest when nothing on the channels it drives
|
|
1510
|
-
*
|
|
1511
|
-
*
|
|
1512
|
-
* start.
|
|
1530
|
+
* A call starts from rest when nothing on the channels it drives moves on
|
|
1531
|
+
* screen and nothing pins its clock (`at`). A curve still waiting for its
|
|
1532
|
+
* first frame counts as rest, as does one whose tail already shows as at
|
|
1533
|
+
* rest. Returns its start group, or null for an explicit start.
|
|
1513
1534
|
*/
|
|
1514
1535
|
const beginGroup = (time, properties, at, start) => {
|
|
1515
1536
|
if (target == null || typeof target.animate !== 'function') {
|
|
@@ -1538,16 +1559,18 @@ export function createAnimator(element, options = {}) {
|
|
|
1538
1559
|
}
|
|
1539
1560
|
return null;
|
|
1540
1561
|
}
|
|
1541
|
-
// A call that continues motion starts now unless it asks for the
|
|
1542
|
-
// browser's start (`commit`). `presented` asks only for a call from rest
|
|
1543
|
-
//
|
|
1544
|
-
// the value and velocity on screen
|
|
1562
|
+
// A call that continues motion starts now, unless it asks for the
|
|
1563
|
+
// browser's start (`commit`). `presented` asks only for a call from rest.
|
|
1564
|
+
// A curve that still moves is not at rest, so a call on it starts now,
|
|
1565
|
+
// from the value and velocity on screen. A tail that shows as at rest
|
|
1566
|
+
// counts as rest, so a call on it waits, under `presented` for its two
|
|
1567
|
+
// frames.
|
|
1545
1568
|
for (const channel of start === 'commit' ? [] : channels) {
|
|
1546
1569
|
for (const property of CHANNELS[channel]) {
|
|
1547
1570
|
const segment = segments.get(property);
|
|
1548
1571
|
// A call's first frame puts its channels on screen, even before the
|
|
1549
1572
|
// browser reports the start. So such a channel is not at rest either.
|
|
1550
|
-
if (segment != null && time < endOf(property, segment) && (segment.group == null || segment.group.resolved || shownSince(property, segment) != null)) {
|
|
1573
|
+
if (segment != null && time < endOf(property, segment) && (segment.group == null || segment.group.resolved || shownSince(property, segment) != null) && !showsAtRest(property, segment, time)) {
|
|
1551
1574
|
return null;
|
|
1552
1575
|
}
|
|
1553
1576
|
}
|
|
@@ -22,4 +22,28 @@ export declare function reducedMotionFade(element?: Element | null, options?: {
|
|
|
22
22
|
/** The change starts from the release of a touch drag (DR2). */
|
|
23
23
|
touchRelease?: boolean;
|
|
24
24
|
}): ReducedMotionFade | null;
|
|
25
|
+
/** A running Reduced Motion dip. */
|
|
26
|
+
export interface ReducedMotionDip {
|
|
27
|
+
/** Stops the dip. A change that has not landed yet never lands. */
|
|
28
|
+
cancel(): void;
|
|
29
|
+
}
|
|
30
|
+
/**
|
|
31
|
+
* Plays `fade` on `element` as a dip, and runs `land` at its middle: the
|
|
32
|
+
* fade-out, the change, then the fade-in. The fade-out holds at 0 until `land`
|
|
33
|
+
* has run, and the fade-in starts only after it. So the change never shows at
|
|
34
|
+
* full opacity, however late the main thread runs. A timer at the middle can
|
|
35
|
+
* fire after the fade-in has begun.
|
|
36
|
+
*
|
|
37
|
+
* `land` must apply the change before it returns: the fade-in starts right
|
|
38
|
+
* after it. `from` is the opacity the fade-out starts at: a leaving element
|
|
39
|
+
* fades out from where it is.
|
|
40
|
+
*
|
|
41
|
+
* @example
|
|
42
|
+
* ```
|
|
43
|
+
* const dip = playReducedMotionDip(scroller, fade, () => scroller.scrollTo({top}));
|
|
44
|
+
* // A newer change replaces it:
|
|
45
|
+
* dip.cancel();
|
|
46
|
+
* ```
|
|
47
|
+
*/
|
|
48
|
+
export declare function playReducedMotionDip(element: Element, fade: ReducedMotionFade, land: () => void, from?: number): ReducedMotionDip;
|
|
25
49
|
//# sourceMappingURL=reducedMotion.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"reducedMotion.d.ts","sourceRoot":"","sources":["../../src/motion/reducedMotion.ts"],"names":[],"mappings":"AAqDA,6EAA6E;AAC7E,eAAO,MAAM,yBAAyB,2DACoB,CAAC;AAE3D,gFAAgF;AAChF,eAAO,MAAM,4BAA4B,iEACuB,CAAC;AAEjE;;;GAGG;AACH,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB;AAED;;;;;;;GAOG;AACH,wBAAgB,iBAAiB,CAC/B,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,EACxB,OAAO,GAAE;IACP,gEAAgE;IAChE,YAAY,CAAC,EAAE,OAAO,CAAC;CACnB,GACL,iBAAiB,GAAG,IAAI,CAmB1B"}
|
|
1
|
+
{"version":3,"file":"reducedMotion.d.ts","sourceRoot":"","sources":["../../src/motion/reducedMotion.ts"],"names":[],"mappings":"AAqDA,6EAA6E;AAC7E,eAAO,MAAM,yBAAyB,2DACoB,CAAC;AAE3D,gFAAgF;AAChF,eAAO,MAAM,4BAA4B,iEACuB,CAAC;AAEjE;;;GAGG;AACH,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB;AAED;;;;;;;GAOG;AACH,wBAAgB,iBAAiB,CAC/B,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,EACxB,OAAO,GAAE;IACP,gEAAgE;IAChE,YAAY,CAAC,EAAE,OAAO,CAAC;CACnB,GACL,iBAAiB,GAAG,IAAI,CAmB1B;AAED,oCAAoC;AACpC,MAAM,WAAW,gBAAgB;IAC/B,mEAAmE;IACnE,MAAM,IAAI,IAAI,CAAC;CAChB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,iBAAiB,EACvB,IAAI,EAAE,MAAM,IAAI,EAChB,IAAI,SAAI,GACP,gBAAgB,CAyClB"}
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* @file reducedMotion.ts
|
|
5
5
|
* @input The Reduced Motion preference, the primary pointer, the motion tables
|
|
6
6
|
* @output reducedMotionFade (the fade the animator would play, for motion it
|
|
7
|
-
* does not drive) and the
|
|
7
|
+
* does not drive), playReducedMotionDip, and the queries a transition spells
|
|
8
8
|
* @position The one Reduced Motion policy (design:reduced-motion) for code
|
|
9
9
|
* beside the animator: a raw Web Animations fade, a CSS transition
|
|
10
10
|
*
|
|
@@ -86,4 +86,81 @@ export function reducedMotionFade(element, options = {}) {
|
|
|
86
86
|
duration: reducedMotionCrossFade.durationMs,
|
|
87
87
|
easing: `cubic-bezier(${curve.join(', ')})`
|
|
88
88
|
};
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
/** A running Reduced Motion dip. */
|
|
92
|
+
|
|
93
|
+
/**
|
|
94
|
+
* Plays `fade` on `element` as a dip, and runs `land` at its middle: the
|
|
95
|
+
* fade-out, the change, then the fade-in. The fade-out holds at 0 until `land`
|
|
96
|
+
* has run, and the fade-in starts only after it. So the change never shows at
|
|
97
|
+
* full opacity, however late the main thread runs. A timer at the middle can
|
|
98
|
+
* fire after the fade-in has begun.
|
|
99
|
+
*
|
|
100
|
+
* `land` must apply the change before it returns: the fade-in starts right
|
|
101
|
+
* after it. `from` is the opacity the fade-out starts at: a leaving element
|
|
102
|
+
* fades out from where it is.
|
|
103
|
+
*
|
|
104
|
+
* @example
|
|
105
|
+
* ```
|
|
106
|
+
* const dip = playReducedMotionDip(scroller, fade, () => scroller.scrollTo({top}));
|
|
107
|
+
* // A newer change replaces it:
|
|
108
|
+
* dip.cancel();
|
|
109
|
+
* ```
|
|
110
|
+
*/
|
|
111
|
+
export function playReducedMotionDip(element, fade, land, from = 1) {
|
|
112
|
+
const half = fade.duration / 2;
|
|
113
|
+
let isCancelled = false;
|
|
114
|
+
let fadeIn = null;
|
|
115
|
+
const fadeOut = element.animate([{
|
|
116
|
+
opacity: from,
|
|
117
|
+
easing: fade.easing
|
|
118
|
+
}, {
|
|
119
|
+
opacity: 0
|
|
120
|
+
}], {
|
|
121
|
+
duration: half,
|
|
122
|
+
fill: 'forwards'
|
|
123
|
+
});
|
|
124
|
+
fadeOut.finished.then(() => {
|
|
125
|
+
if (isCancelled) {
|
|
126
|
+
return;
|
|
127
|
+
}
|
|
128
|
+
land();
|
|
129
|
+
// The fade-in holds 0 until it starts: after a long stall, its start can
|
|
130
|
+
// come after the frame that runs this.
|
|
131
|
+
fadeIn = element.animate([{
|
|
132
|
+
opacity: 0,
|
|
133
|
+
easing: fade.easing
|
|
134
|
+
}, {
|
|
135
|
+
opacity: 1
|
|
136
|
+
}], {
|
|
137
|
+
duration: half,
|
|
138
|
+
fill: 'backwards'
|
|
139
|
+
});
|
|
140
|
+
// The fade-in keeps the dip's own schedule: it starts where the fade-out
|
|
141
|
+
// ended, so the dip keeps its length. The clock is read after the
|
|
142
|
+
// landing, because a frame's timestamp does not count the landing's own
|
|
143
|
+
// work. After a long stall, half of the fade-in still plays.
|
|
144
|
+
const fadeOutEnd = endTime(fadeOut, half);
|
|
145
|
+
if (fadeOutEnd != null) {
|
|
146
|
+
fadeIn.startTime = Math.max(fadeOutEnd, performance.now() - half / 2);
|
|
147
|
+
}
|
|
148
|
+
// The fade-in now holds the opacity, so the held 0 can go.
|
|
149
|
+
fadeOut.cancel();
|
|
150
|
+
},
|
|
151
|
+
// A cancelled fade-out rejects `finished`: nothing lands.
|
|
152
|
+
() => {});
|
|
153
|
+
return {
|
|
154
|
+
cancel() {
|
|
155
|
+
isCancelled = true;
|
|
156
|
+
fadeOut.cancel();
|
|
157
|
+
fadeIn?.cancel();
|
|
158
|
+
}
|
|
159
|
+
};
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
/** When `animation` was due to end, on its timeline (ms), if it has started. */
|
|
163
|
+
function endTime(animation, duration) {
|
|
164
|
+
const start = animation.startTime;
|
|
165
|
+
return typeof start === 'number' ? start + duration : null;
|
|
89
166
|
}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @file alert.ts
|
|
3
|
+
* @input Nothing; data only
|
|
4
|
+
* @output Exports `alertController`: how UIAlertController (`.alert`) tracks
|
|
5
|
+
* a finger across its actions
|
|
6
|
+
* @position The alert domain of the UIKit constants table (motion/uikit);
|
|
7
|
+
* its springs are `springs.alertPresent` and `springs.alertDismiss`
|
|
8
|
+
*
|
|
9
|
+
* Every value was read from UIKit on the iOS 26.2 simulator. A host app
|
|
10
|
+
* presented `UIAlertController(.alert)` with two and with three actions.
|
|
11
|
+
* Real HID touches drove it, and the action views' highlight was sampled
|
|
12
|
+
* every frame. Lengths are in pt (CSS px), durations in ms.
|
|
13
|
+
*
|
|
14
|
+
* Every leaf carries one or more `@source`; GUESS values also carry the
|
|
15
|
+
* `@measure` task that will confirm or replace them. uikit.test.ts enforces
|
|
16
|
+
* both.
|
|
17
|
+
*
|
|
18
|
+
* SYNC: When modified, update /packages/core/src/motion/MEASUREMENTS.md
|
|
19
|
+
*/
|
|
20
|
+
export declare const alertController: {
|
|
21
|
+
readonly actions: {
|
|
22
|
+
/**
|
|
23
|
+
* How long after touch-down the touched action highlights: none, it is
|
|
24
|
+
* highlighted in the touch-down frame (a tap and a 300 ms hold alike).
|
|
25
|
+
* @source measured: UIKit lab (injected host app), iOS 26.2 simulator,
|
|
26
|
+
* iPhone 17 Pro, per-frame highlight of the action views under real HID
|
|
27
|
+
* touches, Oct 23 2026
|
|
28
|
+
*/
|
|
29
|
+
readonly highlightOnsetMs: 0;
|
|
30
|
+
/**
|
|
31
|
+
* How far outside an action the finger may go and keep it highlighted:
|
|
32
|
+
* none. The highlight cleared 1 pt below the action, and a lift there ran
|
|
33
|
+
* nothing. UIButton keeps 70 pt; an alert action does not.
|
|
34
|
+
* @source measured: UIKit lab (injected host app), iOS 26.2 simulator,
|
|
35
|
+
* iPhone 17 Pro, per-frame highlight of the action views under real HID
|
|
36
|
+
* touches, Oct 23 2026
|
|
37
|
+
*/
|
|
38
|
+
readonly highlightExpansion: 0;
|
|
39
|
+
};
|
|
40
|
+
};
|
|
41
|
+
//# sourceMappingURL=alert.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../src/motion/uikit/alert.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,eAAO,MAAM,eAAe;;QAExB;;;;;;WAMG;;QAEH;;;;;;;WAOG;;;CAGG,CAAC"}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* @file alert.ts
|
|
5
|
+
* @input Nothing; data only
|
|
6
|
+
* @output Exports `alertController`: how UIAlertController (`.alert`) tracks
|
|
7
|
+
* a finger across its actions
|
|
8
|
+
* @position The alert domain of the UIKit constants table (motion/uikit);
|
|
9
|
+
* its springs are `springs.alertPresent` and `springs.alertDismiss`
|
|
10
|
+
*
|
|
11
|
+
* Every value was read from UIKit on the iOS 26.2 simulator. A host app
|
|
12
|
+
* presented `UIAlertController(.alert)` with two and with three actions.
|
|
13
|
+
* Real HID touches drove it, and the action views' highlight was sampled
|
|
14
|
+
* every frame. Lengths are in pt (CSS px), durations in ms.
|
|
15
|
+
*
|
|
16
|
+
* Every leaf carries one or more `@source`; GUESS values also carry the
|
|
17
|
+
* `@measure` task that will confirm or replace them. uikit.test.ts enforces
|
|
18
|
+
* both.
|
|
19
|
+
*
|
|
20
|
+
* SYNC: When modified, update /packages/core/src/motion/MEASUREMENTS.md
|
|
21
|
+
*/
|
|
22
|
+
|
|
23
|
+
export const alertController = {
|
|
24
|
+
actions: {
|
|
25
|
+
/**
|
|
26
|
+
* How long after touch-down the touched action highlights: none, it is
|
|
27
|
+
* highlighted in the touch-down frame (a tap and a 300 ms hold alike).
|
|
28
|
+
* @source measured: UIKit lab (injected host app), iOS 26.2 simulator,
|
|
29
|
+
* iPhone 17 Pro, per-frame highlight of the action views under real HID
|
|
30
|
+
* touches, Oct 23 2026
|
|
31
|
+
*/
|
|
32
|
+
highlightOnsetMs: 0,
|
|
33
|
+
/**
|
|
34
|
+
* How far outside an action the finger may go and keep it highlighted:
|
|
35
|
+
* none. The highlight cleared 1 pt below the action, and a lift there ran
|
|
36
|
+
* nothing. UIButton keeps 70 pt; an alert action does not.
|
|
37
|
+
* @source measured: UIKit lab (injected host app), iOS 26.2 simulator,
|
|
38
|
+
* iPhone 17 Pro, per-frame highlight of the action views under real HID
|
|
39
|
+
* touches, Oct 23 2026
|
|
40
|
+
*/
|
|
41
|
+
highlightExpansion: 0
|
|
42
|
+
}
|
|
43
|
+
};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @file privateAttributes/pressGroupItem.stylex.ts
|
|
3
|
+
* @input Nothing: the private press-group-item attribute
|
|
4
|
+
* @output pressGroupItemProps, which marks an action a group's tracker
|
|
5
|
+
* follows, and isTrackedByGroup, which reads the mark
|
|
6
|
+
* @position Owner module of the private press-group-item attribute: the only
|
|
7
|
+
* file that writes its name. AlertDialog marks its actions, and the press
|
|
8
|
+
* controller (utils/pressFeedback.ts) leaves their press to the group's
|
|
9
|
+
* tracker. No package entry exports it.
|
|
10
|
+
*/
|
|
11
|
+
/** Spread on each action that a group's tracker follows. */
|
|
12
|
+
export declare const pressGroupItemProps: Readonly<Record<string, string>>;
|
|
13
|
+
/** Whether a group's tracker paints the press on `element` or an ancestor. */
|
|
14
|
+
export declare function isTrackedByGroup(element: Element): boolean;
|
|
15
|
+
//# sourceMappingURL=pressGroupItem.stylex.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"pressGroupItem.stylex.d.ts","sourceRoot":"","sources":["../../src/privateAttributes/pressGroupItem.stylex.ts"],"names":[],"mappings":"AACA;;;;;;;;;GASG;AAIH,4DAA4D;AAC5D,eAAO,MAAM,mBAAmB,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAEhE,CAAC;AAEF,8EAA8E;AAC9E,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,CAE1D"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
|
+
/**
|
|
3
|
+
* @file privateAttributes/pressGroupItem.stylex.ts
|
|
4
|
+
* @input Nothing: the private press-group-item attribute
|
|
5
|
+
* @output pressGroupItemProps, which marks an action a group's tracker
|
|
6
|
+
* follows, and isTrackedByGroup, which reads the mark
|
|
7
|
+
* @position Owner module of the private press-group-item attribute: the only
|
|
8
|
+
* file that writes its name. AlertDialog marks its actions, and the press
|
|
9
|
+
* controller (utils/pressFeedback.ts) leaves their press to the group's
|
|
10
|
+
* tracker. No package entry exports it.
|
|
11
|
+
*/
|
|
12
|
+
|
|
13
|
+
const PRESS_GROUP_ITEM = 'data-astryx-press-group-item';
|
|
14
|
+
|
|
15
|
+
/** Spread on each action that a group's tracker follows. */
|
|
16
|
+
export const pressGroupItemProps = {
|
|
17
|
+
[PRESS_GROUP_ITEM]: ''
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
/** Whether a group's tracker paints the press on `element` or an ancestor. */
|
|
21
|
+
export function isTrackedByGroup(element) {
|
|
22
|
+
return element.closest(`[${PRESS_GROUP_ITEM}]`) != null;
|
|
23
|
+
}
|
|
@@ -18,9 +18,16 @@ export interface ClickGuardOptions {
|
|
|
18
18
|
* @default false
|
|
19
19
|
*/
|
|
20
20
|
readonly takesLateMouse?: boolean;
|
|
21
|
+
/**
|
|
22
|
+
* The menu press model's arm at a finger's release: the guard also cancels
|
|
23
|
+
* that touch's `touchend`, so the browser creates no click for it. A
|
|
24
|
+
* cancelled `touchend` disarms the guard.
|
|
25
|
+
* @default false
|
|
26
|
+
*/
|
|
27
|
+
readonly cancelsTouchEnd?: boolean;
|
|
21
28
|
}
|
|
22
29
|
/** Swallow the browser's next click on `doc` (see the file header). */
|
|
23
|
-
export declare function armClickGuard(doc: Document, { staysInstalled, takesLateMouse }?: ClickGuardOptions): void;
|
|
30
|
+
export declare function armClickGuard(doc: Document, { staysInstalled, takesLateMouse, cancelsTouchEnd, }?: ClickGuardOptions): void;
|
|
24
31
|
/** Stop swallowing on `doc`; idempotent. */
|
|
25
32
|
export declare function disarmClickGuard(doc: Document): void;
|
|
26
33
|
/** Whether the guard on `doc` would swallow the next click. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"clickGuard.d.ts","sourceRoot":"","sources":["../../src/utils/clickGuard.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"clickGuard.d.ts","sourceRoot":"","sources":["../../src/utils/clickGuard.ts"],"names":[],"mappings":"AA0CA;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,MAAM,CAAC;AAEzC,yCAAyC;AACzC,MAAM,WAAW,iBAAiB;IAChC;;;;OAIG;IACH,QAAQ,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAClC;;;;OAIG;IACH,QAAQ,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAClC;;;;;OAKG;IACH,QAAQ,CAAC,eAAe,CAAC,EAAE,OAAO,CAAC;CACpC;AA8BD,uEAAuE;AACvE,wBAAgB,aAAa,CAC3B,GAAG,EAAE,QAAQ,EACb,EACE,cAAsB,EACtB,cAAsB,EACtB,eAAuB,GACxB,GAAE,iBAAsB,GACxB,IAAI,CA+CN;AAED,4CAA4C;AAC5C,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,QAAQ,GAAG,IAAI,CAYpD;AAED,+DAA+D;AAC/D,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,QAAQ,GAAG,OAAO,CAExD;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,QAAQ,EAAE,MAAM,CAAC,GAAG,CAAC,CAOzD;AAED;;;GAGG;AACH,wBAAgB,wBAAwB,IAAI,IAAI,CAQ/C"}
|
package/dist/utils/clickGuard.js
CHANGED
|
@@ -26,6 +26,11 @@
|
|
|
26
26
|
// `touchend`, aimed at whatever is under the finger by then. They go with
|
|
27
27
|
// the click, the next `pointerdown` or the window, as the guard does.
|
|
28
28
|
//
|
|
29
|
+
// The menu press model's arm at a finger's release also cancels that touch's
|
|
30
|
+
// `touchend`, so the browser creates no click and no compatibility mouse
|
|
31
|
+
// events. A busy main thread can otherwise hold that click past the window,
|
|
32
|
+
// when a drill-in has put another row under the finger.
|
|
33
|
+
//
|
|
29
34
|
// Some clicks always pass:
|
|
30
35
|
// - a click with `detail` 0: a keyboard's, a screen reader's, or one that the
|
|
31
36
|
// page dispatches;
|
|
@@ -67,7 +72,8 @@ function listenForClicks(view) {
|
|
|
67
72
|
/** Swallow the browser's next click on `doc` (see the file header). */
|
|
68
73
|
export function armClickGuard(doc, {
|
|
69
74
|
staysInstalled = false,
|
|
70
|
-
takesLateMouse = false
|
|
75
|
+
takesLateMouse = false,
|
|
76
|
+
cancelsTouchEnd = false
|
|
71
77
|
} = {}) {
|
|
72
78
|
const view = doc.defaultView;
|
|
73
79
|
if (view == null) {
|
|
@@ -96,6 +102,23 @@ export function armClickGuard(doc, {
|
|
|
96
102
|
}));
|
|
97
103
|
}
|
|
98
104
|
}
|
|
105
|
+
if (cancelsTouchEnd) {
|
|
106
|
+
// A touch sends its pointerup before its touchend, so the next touchend is
|
|
107
|
+
// that touch's own. The next pointerdown disarms the guard first.
|
|
108
|
+
const stopTouchEnd = subscribeInput(view, 'touchend', event => {
|
|
109
|
+
stopTouchEnd();
|
|
110
|
+
// A touchend that the browser took for a scroll is not cancelable.
|
|
111
|
+
// The guard stays armed for a click that may follow it.
|
|
112
|
+
if (event.cancelable) {
|
|
113
|
+
event.preventDefault();
|
|
114
|
+
// No click follows a cancelled touchend.
|
|
115
|
+
disarmClickGuard(doc);
|
|
116
|
+
}
|
|
117
|
+
}, {
|
|
118
|
+
cancels: true
|
|
119
|
+
});
|
|
120
|
+
guard.unsubscribers.push(stopTouchEnd);
|
|
121
|
+
}
|
|
99
122
|
guard.timer = setTimeout(() => disarmClickGuard(doc), CLICK_GUARD_WINDOW_MS);
|
|
100
123
|
}
|
|
101
124
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dateParser.d.ts","sourceRoot":"","sources":["../../src/utils/dateParser.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAqC,MAAM,aAAa,CAAC;AAC/E,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,eAAe,CAAC;AAE1C,OAAO,EACL,gBAAgB,IAAI,QAAQ,EAC5B,cAAc,IAAI,SAAS,GAC5B,MAAM,aAAa,CAAC;AAErB;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,GAAE,MAAa,GAAG,OAAO,CAO/D;
|
|
1
|
+
{"version":3,"file":"dateParser.d.ts","sourceRoot":"","sources":["../../src/utils/dateParser.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAqC,MAAM,aAAa,CAAC;AAC/E,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,eAAe,CAAC;AAE1C,OAAO,EACL,gBAAgB,IAAI,QAAQ,EAC5B,cAAc,IAAI,SAAS,GAC5B,MAAM,aAAa,CAAC;AAErB;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,GAAE,MAAa,GAAG,OAAO,CAO/D;AAOD;;;;;;;;;;GAUG;AACH,wBAAgB,cAAc,CAC5B,KAAK,EAAE,MAAM,EACb,MAAM,GAAE,MAAa,GACpB,SAAS,GAAG,IAAI,CAiHlB"}
|
package/dist/utils/dateParser.js
CHANGED
|
@@ -27,6 +27,11 @@ export function isLocaleDayFirst(locale = 'en') {
|
|
|
27
27
|
return dayIndex < monthIndex;
|
|
28
28
|
}
|
|
29
29
|
|
|
30
|
+
// Built at run time: a Unicode property escape in a literal fails a source
|
|
31
|
+
// build whose Babel lacks the Unicode data.
|
|
32
|
+
const LETTER_FREE = new RegExp('^[^\\p{L}]+$', 'u');
|
|
33
|
+
const YEAR_FIRST = new RegExp('^\\d{4}[^\\p{L}\\d]', 'u');
|
|
34
|
+
|
|
30
35
|
/**
|
|
31
36
|
* Parses user input into a PlainDate.
|
|
32
37
|
*
|
|
@@ -122,6 +127,13 @@ export function parseDateInput(input, locale = 'en') {
|
|
|
122
127
|
if (/^\d+$/.test(trimmed)) {
|
|
123
128
|
return null;
|
|
124
129
|
}
|
|
130
|
+
// In a day-first locale, letter-free text that no form above matched is not
|
|
131
|
+
// a date. Native `Date` reads `a/b/c` month first. It also takes a year of
|
|
132
|
+
// one to three digits. So "12/01/2" gives a wrong date. A four-digit year
|
|
133
|
+
// written first is not ambiguous.
|
|
134
|
+
if (isLocaleDayFirst(locale) && LETTER_FREE.test(trimmed) && !YEAR_FIRST.test(trimmed)) {
|
|
135
|
+
return null;
|
|
136
|
+
}
|
|
125
137
|
const parsed = new Date(trimmed);
|
|
126
138
|
if (!isNaN(parsed.getTime())) {
|
|
127
139
|
const fromDate = plainDateFromDate(parsed);
|
|
@@ -75,4 +75,19 @@ export declare function moveFocusLeftBehind(note: FocusWithin | null, target: HT
|
|
|
75
75
|
* in the component that calls this.
|
|
76
76
|
*/
|
|
77
77
|
export declare function focusForLastInput(element: HTMLElement, options?: FocusOptions, modality?: InteractionModality): void;
|
|
78
|
+
/**
|
|
79
|
+
* Prepares the focus return for an open surface that may be removed while
|
|
80
|
+
* open (rendered only while open, or removed with its view). Removing a
|
|
81
|
+
* `<dialog>` runs no close and no browser focus return. Call this while the
|
|
82
|
+
* surface is mounted: it reads the frame that hosts the surface now, because a
|
|
83
|
+
* removed frame's document has no window. Call the returned function from the
|
|
84
|
+
* effect cleanup with the opener.
|
|
85
|
+
*
|
|
86
|
+
* Once the commit has finished, focus moves to the opener only when the
|
|
87
|
+
* surface really left the document (StrictMode's simulated unmount keeps it),
|
|
88
|
+
* the opener is still on the page, and the removal lost focus, both in the
|
|
89
|
+
* surface's document and in the document that hosts its frame. A control the
|
|
90
|
+
* user pressed outside the surface, or outside its frame, keeps its focus.
|
|
91
|
+
*/
|
|
92
|
+
export declare function prepareFocusReturnOnRemoval(surface: Element): (opener: Element | null) => void;
|
|
78
93
|
//# sourceMappingURL=focusReturn.d.ts.map
|