@astryxdesign/core 0.7.8-canary.ffd29c5 → 0.7.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +132 -0
- package/dist/BottomSheet/BottomSheetPanel.d.ts +1 -1
- package/dist/BottomSheet/BottomSheetPanel.d.ts.map +1 -1
- package/dist/BottomSheet/BottomSheetPanel.js +30 -14
- package/dist/BottomSheet/bottomSheetStack.js +1 -1
- package/dist/BottomSheet/useSheetGestures.d.ts +3 -1
- package/dist/BottomSheet/useSheetGestures.d.ts.map +1 -1
- package/dist/BottomSheet/useSheetGestures.js +4 -0
- package/dist/CheckboxList/CheckboxList.d.ts +13 -2
- package/dist/CheckboxList/CheckboxList.d.ts.map +1 -1
- package/dist/CheckboxList/CheckboxList.js +10 -4
- package/dist/CheckboxList/CheckboxListContext.d.ts +7 -0
- package/dist/CheckboxList/CheckboxListContext.d.ts.map +1 -1
- package/dist/CheckboxList/CheckboxListContext.js +2 -1
- package/dist/CheckboxList/CheckboxListItem.d.ts.map +1 -1
- package/dist/CheckboxList/CheckboxListItem.js +14 -2
- package/dist/CheckboxList/requiredGroup.d.ts +22 -0
- package/dist/CheckboxList/requiredGroup.d.ts.map +1 -0
- package/dist/CheckboxList/requiredGroup.js +52 -0
- package/dist/DateInput/PickerWheel.d.ts +1 -1
- package/dist/DateInput/PickerWheel.d.ts.map +1 -1
- package/dist/DateInput/PickerWheel.js +27 -6
- package/dist/DateInput/Wheel.d.ts +2 -2
- package/dist/DateInput/Wheel.d.ts.map +1 -1
- package/dist/DateInput/Wheel.js +20 -6
- package/dist/DateInput/datePickerTouch.d.ts +13 -0
- package/dist/DateInput/datePickerTouch.d.ts.map +1 -0
- package/dist/DateInput/datePickerTouch.js +14 -0
- package/dist/DateInput/wheelOptions.d.ts +22 -2
- package/dist/DateInput/wheelOptions.d.ts.map +1 -1
- package/dist/DateInput/wheelOptions.js +14 -2
- package/dist/DateTimeInput/TouchDateTimeField.d.ts.map +1 -1
- package/dist/DateTimeInput/TouchDateTimeField.js +62 -119
- package/dist/HoverCard/useHoverCard.d.ts.map +1 -1
- package/dist/HoverCard/useHoverCard.js +6 -1
- package/dist/Overlay/Overlay.d.ts.map +1 -1
- package/dist/Overlay/Overlay.js +7 -2
- package/dist/PowerSearch/PowerSearch.d.ts +4 -2
- package/dist/PowerSearch/PowerSearch.d.ts.map +1 -1
- package/dist/PowerSearch/PowerSearchBottomSheet.d.ts +24 -1
- package/dist/PowerSearch/PowerSearchBottomSheet.d.ts.map +1 -1
- package/dist/PowerSearch/PowerSearchBottomSheet.js +172 -50
- package/dist/Resizable/ResizeHandle.d.ts.map +1 -1
- package/dist/Resizable/ResizeHandle.js +15 -15
- package/dist/Resizable/createResizable.d.ts +70 -16
- package/dist/Resizable/createResizable.d.ts.map +1 -1
- package/dist/Resizable/createResizable.js +180 -22
- package/dist/Resizable/separatorAttributes.d.ts +45 -0
- package/dist/Resizable/separatorAttributes.d.ts.map +1 -0
- package/dist/Resizable/separatorAttributes.js +35 -0
- package/dist/Resizable/useResizable.js +2 -2
- package/dist/TimeInput/TimeWheels.d.ts +32 -0
- package/dist/TimeInput/TimeWheels.d.ts.map +1 -0
- package/dist/TimeInput/TimeWheels.js +144 -0
- package/dist/TimeInput/TouchTimeField.d.ts.map +1 -1
- package/dist/TimeInput/TouchTimeField.js +63 -118
- package/dist/TimeInput/timeWheelRules.d.ts +124 -0
- package/dist/TimeInput/timeWheelRules.d.ts.map +1 -0
- package/dist/TimeInput/timeWheelRules.js +277 -0
- package/dist/Tokenizer/TokenizerBottomSheet.js +8 -12
- package/dist/Tooltip/useTooltip.d.ts.map +1 -1
- package/dist/Tooltip/useTooltip.js +6 -0
- package/dist/astryx.css +3 -1
- package/dist/gestures/GestureHost.d.ts.map +1 -1
- package/dist/gestures/GestureHost.js +3 -0
- package/dist/i18n/generated-english/PowerSearch/PowerSearchBottomSheet.generated.d.ts.map +1 -1
- package/dist/i18n/generated-english/PowerSearch/PowerSearchBottomSheet.generated.js +5 -2
- package/dist/i18n/generated-english/Resizable/createResizable.generated.d.ts +8 -0
- package/dist/i18n/generated-english/Resizable/createResizable.generated.d.ts.map +1 -0
- package/dist/i18n/generated-english/Resizable/createResizable.generated.js +13 -0
- package/dist/i18n/generated-english/TimeInput/TimeWheels.generated.d.ts +8 -0
- package/dist/i18n/generated-english/TimeInput/TimeWheels.generated.d.ts.map +1 -0
- package/dist/i18n/generated-english/TimeInput/TimeWheels.generated.js +17 -0
- package/dist/i18n/generated-locales/en.generated.d.ts.map +1 -1
- package/dist/i18n/generated-locales/en.generated.js +5 -2
- package/dist/i18n/generated-locales/pseudo.generated.d.ts.map +1 -1
- package/dist/i18n/generated-locales/pseudo.generated.js +5 -2
- package/dist/keyboard/index.d.ts +17 -0
- package/dist/keyboard/index.d.ts.map +1 -0
- package/dist/keyboard/index.js +19 -0
- package/dist/keyboard/keyboardHeight.d.ts +149 -0
- package/dist/keyboard/keyboardHeight.d.ts.map +1 -0
- package/dist/keyboard/keyboardHeight.js +432 -0
- package/dist/keyboard/keyboardLayoutGuide.d.ts +59 -0
- package/dist/keyboard/keyboardLayoutGuide.d.ts.map +1 -0
- package/dist/keyboard/keyboardLayoutGuide.js +207 -0
- package/dist/keyboard/keyboardModel.d.ts +93 -0
- package/dist/keyboard/keyboardModel.d.ts.map +1 -0
- package/dist/keyboard/keyboardModel.js +220 -0
- package/dist/keyboard/rideKeyboard.d.ts +42 -0
- package/dist/keyboard/rideKeyboard.d.ts.map +1 -0
- package/dist/keyboard/rideKeyboard.js +77 -0
- package/dist/keyboard/useMobileKeyboard.d.ts +61 -0
- package/dist/keyboard/useMobileKeyboard.d.ts.map +1 -0
- package/dist/keyboard/useMobileKeyboard.js +699 -0
- package/dist/motion/android/index.d.ts +16 -0
- package/dist/motion/android/index.d.ts.map +1 -0
- package/dist/motion/android/index.js +18 -0
- package/dist/motion/android/keyboard.d.ts +83 -0
- package/dist/motion/android/keyboard.d.ts.map +1 -0
- package/dist/motion/android/keyboard.js +96 -0
- package/dist/motion/uikit/datePicker.d.ts +58 -0
- package/dist/motion/uikit/datePicker.d.ts.map +1 -0
- package/dist/motion/uikit/datePicker.js +60 -0
- package/dist/motion/uikit/index.d.ts +4 -3
- package/dist/motion/uikit/index.d.ts.map +1 -1
- package/dist/motion/uikit/index.js +4 -3
- 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/layoutViewport.d.ts +25 -0
- package/dist/utils/layoutViewport.d.ts.map +1 -0
- package/dist/utils/layoutViewport.js +102 -0
- package/dist/utils/pressFeedback.d.ts.map +1 -1
- package/dist/utils/pressFeedback.js +74 -9
- package/dist/utils/pressGesture.d.ts +4 -2
- package/dist/utils/pressGesture.d.ts.map +1 -1
- package/dist/utils/pressGesture.js +3 -1
- package/dist/utils/selectionLock.d.ts +10 -1
- package/dist/utils/selectionLock.d.ts.map +1 -1
- package/dist/utils/selectionLock.js +31 -5
- package/dist/utils/sharedMutationObserver.d.ts +2 -1
- package/dist/utils/sharedMutationObserver.d.ts.map +1 -1
- package/dist/utils/sharedMutationObserver.js +2 -1
- package/dist/utils/timeParser.d.ts +2 -1
- package/dist/utils/timeParser.d.ts.map +1 -1
- package/dist/utils/timeParser.js +29 -3
- package/locales/en.json +21 -9
- package/locales/pseudo.json +15 -6
- package/package.json +5 -5
- package/src/BottomSheet/BottomSheet.doc.mjs +1 -1
- package/src/BottomSheet/BottomSheetPanel.tsx +41 -13
- package/src/BottomSheet/BottomSheetSwitcher.doc.mjs +5 -0
- package/src/BottomSheet/bottomSheetStack.ts +1 -1
- package/src/BottomSheet/useSheetGestures.ts +6 -0
- package/src/CheckboxList/CheckboxList.doc.mjs +7 -0
- package/src/CheckboxList/CheckboxList.tsx +34 -2
- package/src/CheckboxList/CheckboxListContext.tsx +9 -1
- package/src/CheckboxList/CheckboxListItem.tsx +23 -2
- package/src/CheckboxList/requiredGroup.ts +77 -0
- package/src/DateInput/PickerWheel.tsx +37 -4
- package/src/DateInput/Wheel.tsx +30 -3
- package/src/DateInput/datePickerTouch.ts +15 -0
- package/src/DateInput/wheelOptions.ts +31 -2
- package/src/DateTimeInput/TouchDateTimeField.tsx +94 -178
- package/src/HoverCard/useHoverCard.tsx +6 -1
- package/src/Overlay/Overlay.tsx +7 -2
- package/src/PowerSearch/PowerSearch.doc.mjs +2 -2
- package/src/PowerSearch/PowerSearch.tsx +4 -2
- package/src/PowerSearch/PowerSearchBottomSheet.tsx +237 -62
- package/src/Resizable/ResizeHandle.tsx +18 -26
- package/src/Resizable/createResizable.ts +242 -27
- package/src/Resizable/separatorAttributes.ts +73 -0
- package/src/Resizable/useResizable.ts +2 -2
- package/src/TimeInput/TimeWheels.tsx +218 -0
- package/src/TimeInput/TouchTimeField.tsx +93 -157
- package/src/TimeInput/timeWheelRules.ts +352 -0
- package/src/Tokenizer/TokenizerBottomSheet.tsx +8 -12
- package/src/Tooltip/useTooltip.tsx +6 -0
- package/src/gestures/GestureHost.ts +5 -4
- package/src/i18n/generated-english/PowerSearch/PowerSearchBottomSheet.generated.ts +5 -2
- package/src/i18n/generated-english/Resizable/createResizable.generated.ts +14 -0
- package/src/i18n/generated-english/TimeInput/TimeWheels.generated.ts +18 -0
- package/src/i18n/generated-locales/en.generated.ts +6 -4
- package/src/i18n/generated-locales/pseudo.generated.ts +6 -4
- package/src/keyboard/README.md +197 -0
- package/src/keyboard/index.ts +48 -0
- package/src/keyboard/keyboardHeight.ts +543 -0
- package/src/keyboard/keyboardLayoutGuide.ts +266 -0
- package/src/keyboard/keyboardModel.ts +301 -0
- package/src/keyboard/rideKeyboard.ts +100 -0
- package/src/keyboard/useMobileKeyboard.ts +866 -0
- package/src/motion/MEASUREMENTS.md +10 -0
- package/src/motion/README.md +2 -0
- package/src/motion/android/index.ts +18 -0
- package/src/motion/android/keyboard.ts +96 -0
- package/src/motion/uikit/datePicker.ts +60 -0
- package/src/motion/uikit/index.ts +4 -3
- package/src/utils/interactionOverlay.stylex.ts +3 -2
- package/src/utils/layoutViewport.ts +104 -0
- package/src/utils/pressFeedback.ts +99 -21
- package/src/utils/pressGesture.ts +4 -2
- package/src/utils/selectionLock.ts +40 -6
- package/src/utils/sharedMutationObserver.ts +2 -1
- package/src/utils/timeParser.ts +40 -3
- package/dist/BottomSheet/useMobileKeyboard.d.ts +0 -21
- package/dist/BottomSheet/useMobileKeyboard.d.ts.map +0 -1
- package/dist/BottomSheet/useMobileKeyboard.js +0 -413
- package/src/BottomSheet/useMobileKeyboard.ts +0 -542
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @file index.ts
|
|
3
|
+
* @input The domain files of the Android constants table
|
|
4
|
+
* @output Re-exports `keyboard`
|
|
5
|
+
* @position Entry of the Android constants table (motion/android). It is
|
|
6
|
+
* internal to core, not exported from the package entry point.
|
|
7
|
+
*
|
|
8
|
+
* Where a touch presentation follows something Android draws itself, such as
|
|
9
|
+
* the software keyboard, its numbers come from here with their sources. The
|
|
10
|
+
* UIKit table does the same for iOS.
|
|
11
|
+
*
|
|
12
|
+
* SYNC: When you add a domain file, re-export it here and list it in
|
|
13
|
+
* /packages/core/src/motion/README.md.
|
|
14
|
+
*/
|
|
15
|
+
export { keyboard } from './keyboard.js';
|
|
16
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/motion/android/index.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAAC,QAAQ,EAAC,MAAM,YAAY,CAAC"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* @file index.ts
|
|
5
|
+
* @input The domain files of the Android constants table
|
|
6
|
+
* @output Re-exports `keyboard`
|
|
7
|
+
* @position Entry of the Android constants table (motion/android). It is
|
|
8
|
+
* internal to core, not exported from the package entry point.
|
|
9
|
+
*
|
|
10
|
+
* Where a touch presentation follows something Android draws itself, such as
|
|
11
|
+
* the software keyboard, its numbers come from here with their sources. The
|
|
12
|
+
* UIKit table does the same for iOS.
|
|
13
|
+
*
|
|
14
|
+
* SYNC: When you add a domain file, re-export it here and list it in
|
|
15
|
+
* /packages/core/src/motion/README.md.
|
|
16
|
+
*/
|
|
17
|
+
|
|
18
|
+
export { keyboard } from "./keyboard.js";
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @file keyboard.ts
|
|
3
|
+
* @input None
|
|
4
|
+
* @output `keyboard`: how the software keyboard moves on Android, in Chrome
|
|
5
|
+
* with Gboard, as the page sees it. It holds the slides' durations and
|
|
6
|
+
* curves, and when they start against Chrome's report and a blur.
|
|
7
|
+
* @position The keyboard domain of the Android constants table, read by
|
|
8
|
+
* keyboard/keyboardModel.ts. The UIKit table holds iOS's keyboard.
|
|
9
|
+
*
|
|
10
|
+
* SYNC: When modified, update /packages/core/src/keyboard/README.md
|
|
11
|
+
*/
|
|
12
|
+
export declare const keyboard: {
|
|
13
|
+
/**
|
|
14
|
+
* How long Gboard takes to slide up, in ms: from its first moved frame to
|
|
15
|
+
* its resting top.
|
|
16
|
+
*
|
|
17
|
+
* @source measured: Chromium 158 with Gboard on Android 15 (API 35
|
|
18
|
+
* emulator); 20 shows recorded frame by frame: 250 to 282 ms, 18 of
|
|
19
|
+
* them 264 to 268 ms, Oct 25 2026
|
|
20
|
+
*/
|
|
21
|
+
readonly showMs: 267;
|
|
22
|
+
/**
|
|
23
|
+
* The curve of Gboard's slide up, cubic-bézier control points: fast out,
|
|
24
|
+
* a long settle.
|
|
25
|
+
*
|
|
26
|
+
* @source measured: Chromium 158 with Gboard on Android 15 (API 35
|
|
27
|
+
* emulator); the same 20 shows fit this curve over `showMs` within
|
|
28
|
+
* 2.4 px rms, Oct 25 2026
|
|
29
|
+
*/
|
|
30
|
+
readonly showCurve: readonly [0.1, 0, 0, 1];
|
|
31
|
+
/**
|
|
32
|
+
* How long after Gboard starts to slide up Chrome's report of it fires, in
|
|
33
|
+
* ms. A show rides from the report dated back by this, joining the slide
|
|
34
|
+
* where it is.
|
|
35
|
+
*
|
|
36
|
+
* @source measured: Chromium 158 with Gboard on Android 15 (API 35
|
|
37
|
+
* emulator); twelve shows: the first frame the page painted after the
|
|
38
|
+
* visual viewport's resize came 14 to 35 ms (median 33) after Gboard's
|
|
39
|
+
* first moved frame, less the 8 ms an event takes on average to reach
|
|
40
|
+
* the screen, Oct 25 2026
|
|
41
|
+
*/
|
|
42
|
+
readonly showReportLagMs: 25;
|
|
43
|
+
/**
|
|
44
|
+
* How long Gboard takes to slide down out of the page, in ms.
|
|
45
|
+
*
|
|
46
|
+
* @source measured: Chromium 158 with Gboard on Android 15 (API 35
|
|
47
|
+
* emulator); 21 hides recorded frame by frame, from Gboard's first
|
|
48
|
+
* moved frame until it leaves the screen: 148 to 153 ms in 20 of them;
|
|
49
|
+
* this length with `hideCurve` fits them within 7.7 px rms,
|
|
50
|
+
* Oct 25 2026
|
|
51
|
+
*/
|
|
52
|
+
readonly hideMs: 167;
|
|
53
|
+
/**
|
|
54
|
+
* The curve of Gboard's slide down, cubic-bézier control points: a slow
|
|
55
|
+
* first frame, then fast.
|
|
56
|
+
*
|
|
57
|
+
* @source measured: Chromium 158 with Gboard on Android 15 (API 35
|
|
58
|
+
* emulator); the same 21 hides, a free fit over `hideMs`, Oct 25 2026
|
|
59
|
+
*/
|
|
60
|
+
readonly hideCurve: readonly [0.3, 0.1, 0.2, 0.9];
|
|
61
|
+
/**
|
|
62
|
+
* How long after the focused field blurs (to nothing that brings up a
|
|
63
|
+
* keyboard) Gboard starts to slide down, in ms.
|
|
64
|
+
*
|
|
65
|
+
* @source measured: Chromium 158 with Gboard on Android 15 (API 35
|
|
66
|
+
* emulator); five scripted blurs with a marker the page paints on the
|
|
67
|
+
* blur: Gboard's first moved frame came from a frame before the marker
|
|
68
|
+
* to 33 ms after it (median 16), Oct 25 2026
|
|
69
|
+
*/
|
|
70
|
+
readonly hideAfterBlurMs: 16;
|
|
71
|
+
/**
|
|
72
|
+
* How long after Gboard starts to slide down Chrome's report of the hide
|
|
73
|
+
* fires, in ms, measured on blurs. A hide nothing predicts, such as Back,
|
|
74
|
+
* reuses it, though Chrome can report Back later in the slide.
|
|
75
|
+
*
|
|
76
|
+
* @source measured: Chromium 158 with Gboard on Android 15 (API 35
|
|
77
|
+
* emulator); twelve scripted blurs: the visual viewport's resize came
|
|
78
|
+
* 42 to 52 ms after the blur (median 49), less `hideAfterBlurMs`,
|
|
79
|
+
* Oct 25 2026
|
|
80
|
+
*/
|
|
81
|
+
readonly hideReportLagMs: 33;
|
|
82
|
+
};
|
|
83
|
+
//# sourceMappingURL=keyboard.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"keyboard.d.ts","sourceRoot":"","sources":["../../../src/motion/android/keyboard.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AAaH,eAAO,MAAM,QAAQ;IACnB;;;;;;;OAOG;;IAEH;;;;;;;OAOG;;IAEH;;;;;;;;;;OAUG;;IAEH;;;;;;;;OAQG;;IAEH;;;;;;OAMG;;IAEH;;;;;;;;OAQG;;IAEH;;;;;;;;;OASG;;CAEK,CAAC"}
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* @file keyboard.ts
|
|
5
|
+
* @input None
|
|
6
|
+
* @output `keyboard`: how the software keyboard moves on Android, in Chrome
|
|
7
|
+
* with Gboard, as the page sees it. It holds the slides' durations and
|
|
8
|
+
* curves, and when they start against Chrome's report and a blur.
|
|
9
|
+
* @position The keyboard domain of the Android constants table, read by
|
|
10
|
+
* keyboard/keyboardModel.ts. The UIKit table holds iOS's keyboard.
|
|
11
|
+
*
|
|
12
|
+
* SYNC: When modified, update /packages/core/src/keyboard/README.md
|
|
13
|
+
*/
|
|
14
|
+
|
|
15
|
+
// Chrome reports the keyboard once per slide, through the visual viewport,
|
|
16
|
+
// just after the slide starts, never per frame. Content that rides the
|
|
17
|
+
// keyboard plays these curves from the slide's start, so it moves in step
|
|
18
|
+
// with Gboard. They are Gboard's own motion, with no motion role. The system
|
|
19
|
+
// moves the keyboard on them whatever the page does, so any other curve
|
|
20
|
+
// would leave the content out of step.
|
|
21
|
+
//
|
|
22
|
+
// The values come from the Android 15 emulator with Chromium 158 and Gboard.
|
|
23
|
+
// A screen recording at 540 × 1200 gives Gboard's top in every frame, beside
|
|
24
|
+
// a marker the page paints on each report. Every leaf carries one or more
|
|
25
|
+
// `@source`, and android.test.ts enforces it.
|
|
26
|
+
export const keyboard = {
|
|
27
|
+
/**
|
|
28
|
+
* How long Gboard takes to slide up, in ms: from its first moved frame to
|
|
29
|
+
* its resting top.
|
|
30
|
+
*
|
|
31
|
+
* @source measured: Chromium 158 with Gboard on Android 15 (API 35
|
|
32
|
+
* emulator); 20 shows recorded frame by frame: 250 to 282 ms, 18 of
|
|
33
|
+
* them 264 to 268 ms, Oct 25 2026
|
|
34
|
+
*/
|
|
35
|
+
showMs: 267,
|
|
36
|
+
/**
|
|
37
|
+
* The curve of Gboard's slide up, cubic-bézier control points: fast out,
|
|
38
|
+
* a long settle.
|
|
39
|
+
*
|
|
40
|
+
* @source measured: Chromium 158 with Gboard on Android 15 (API 35
|
|
41
|
+
* emulator); the same 20 shows fit this curve over `showMs` within
|
|
42
|
+
* 2.4 px rms, Oct 25 2026
|
|
43
|
+
*/
|
|
44
|
+
showCurve: [0.1, 0, 0, 1],
|
|
45
|
+
/**
|
|
46
|
+
* How long after Gboard starts to slide up Chrome's report of it fires, in
|
|
47
|
+
* ms. A show rides from the report dated back by this, joining the slide
|
|
48
|
+
* where it is.
|
|
49
|
+
*
|
|
50
|
+
* @source measured: Chromium 158 with Gboard on Android 15 (API 35
|
|
51
|
+
* emulator); twelve shows: the first frame the page painted after the
|
|
52
|
+
* visual viewport's resize came 14 to 35 ms (median 33) after Gboard's
|
|
53
|
+
* first moved frame, less the 8 ms an event takes on average to reach
|
|
54
|
+
* the screen, Oct 25 2026
|
|
55
|
+
*/
|
|
56
|
+
showReportLagMs: 25,
|
|
57
|
+
/**
|
|
58
|
+
* How long Gboard takes to slide down out of the page, in ms.
|
|
59
|
+
*
|
|
60
|
+
* @source measured: Chromium 158 with Gboard on Android 15 (API 35
|
|
61
|
+
* emulator); 21 hides recorded frame by frame, from Gboard's first
|
|
62
|
+
* moved frame until it leaves the screen: 148 to 153 ms in 20 of them;
|
|
63
|
+
* this length with `hideCurve` fits them within 7.7 px rms,
|
|
64
|
+
* Oct 25 2026
|
|
65
|
+
*/
|
|
66
|
+
hideMs: 167,
|
|
67
|
+
/**
|
|
68
|
+
* The curve of Gboard's slide down, cubic-bézier control points: a slow
|
|
69
|
+
* first frame, then fast.
|
|
70
|
+
*
|
|
71
|
+
* @source measured: Chromium 158 with Gboard on Android 15 (API 35
|
|
72
|
+
* emulator); the same 21 hides, a free fit over `hideMs`, Oct 25 2026
|
|
73
|
+
*/
|
|
74
|
+
hideCurve: [0.3, 0.1, 0.2, 0.9],
|
|
75
|
+
/**
|
|
76
|
+
* How long after the focused field blurs (to nothing that brings up a
|
|
77
|
+
* keyboard) Gboard starts to slide down, in ms.
|
|
78
|
+
*
|
|
79
|
+
* @source measured: Chromium 158 with Gboard on Android 15 (API 35
|
|
80
|
+
* emulator); five scripted blurs with a marker the page paints on the
|
|
81
|
+
* blur: Gboard's first moved frame came from a frame before the marker
|
|
82
|
+
* to 33 ms after it (median 16), Oct 25 2026
|
|
83
|
+
*/
|
|
84
|
+
hideAfterBlurMs: 16,
|
|
85
|
+
/**
|
|
86
|
+
* How long after Gboard starts to slide down Chrome's report of the hide
|
|
87
|
+
* fires, in ms, measured on blurs. A hide nothing predicts, such as Back,
|
|
88
|
+
* reuses it, though Chrome can report Back later in the slide.
|
|
89
|
+
*
|
|
90
|
+
* @source measured: Chromium 158 with Gboard on Android 15 (API 35
|
|
91
|
+
* emulator); twelve scripted blurs: the visual viewport's resize came
|
|
92
|
+
* 42 to 52 ms after the blur (median 49), less `hideAfterBlurMs`,
|
|
93
|
+
* Oct 25 2026
|
|
94
|
+
*/
|
|
95
|
+
hideReportLagMs: 33
|
|
96
|
+
};
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @file datePicker.ts
|
|
3
|
+
* @input Nothing; data only
|
|
4
|
+
* @output Exports `datePicker`: the rules UIDatePicker adds to its wheels. The
|
|
5
|
+
* month/year wheels change the date, the AM/PM column follows the hour, a
|
|
6
|
+
* column turns back onto a bound, and a day clamps to its month.
|
|
7
|
+
* @position The date picker domain of the UIKit constants table
|
|
8
|
+
* (motion/uikit), for the date and time touch sheets. Every leaf names its
|
|
9
|
+
* source, which uikit.test.ts checks.
|
|
10
|
+
*
|
|
11
|
+
* SYNC: When modified, update /packages/core/src/motion/MEASUREMENTS.md and
|
|
12
|
+
* /packages/core/src/motion/README.md.
|
|
13
|
+
*/
|
|
14
|
+
export declare const datePicker: {
|
|
15
|
+
readonly calendar: {
|
|
16
|
+
readonly monthYearWheels: {
|
|
17
|
+
/**
|
|
18
|
+
* Turning the month or year wheel changes the picker's date, keeping
|
|
19
|
+
* the day, and fires `valueChanged`.
|
|
20
|
+
* @source measured: UIKit lab, iOS 26.2 simulator, `.date` `.inline`,
|
|
21
|
+
* October 15 → May 15 after the month wheel's fling, with a
|
|
22
|
+
* `valueChanged` carrying May 15, Oct 23 2026
|
|
23
|
+
*/
|
|
24
|
+
readonly changesDate: true;
|
|
25
|
+
};
|
|
26
|
+
};
|
|
27
|
+
readonly wheels: {
|
|
28
|
+
/**
|
|
29
|
+
* In 12-hour time the AM/PM column follows the hour. Turning the hour from
|
|
30
|
+
* 11 to 12 turns the time from AM to PM, and back. From 12 to 1 it keeps
|
|
31
|
+
* the half of the day.
|
|
32
|
+
* @source measured: UIKit lab, iOS 26.2 simulator, `.time` `.wheels`,
|
|
33
|
+
* en_US: 11:58 AM, hour wheel +1 row → `valueChanged` 12:58 PM; then
|
|
34
|
+
* the minute wheel's +4 rows carried the hour from 12 to 1 → 1:02 PM,
|
|
35
|
+
* Oct 23 2026
|
|
36
|
+
*/
|
|
37
|
+
readonly meridiemFollowsHour: true;
|
|
38
|
+
/**
|
|
39
|
+
* A column that comes to rest past `minimumDate` or `maximumDate` turns
|
|
40
|
+
* back onto the bound. Its `valueChanged` already carries the bound. For
|
|
41
|
+
* example, with bounds 9:00–17:00, the hour of 10:00 dragged to 7 reads
|
|
42
|
+
* 9:00 at rest. The hour column then turns 64 pt, two rows, back to 9.
|
|
43
|
+
* @source measured: UIKit lab, iOS 26.2 simulator, `.time` `.wheels`
|
|
44
|
+
* with bounds 9:00–17:00 and `minuteInterval` 15, per-frame hour
|
|
45
|
+
* offsets after the rest (0.4, 2, 7.4, 16, 26.4, 37.7, 48.3, 56.7,
|
|
46
|
+
* 62, 64 pt at 33 ms steps) and the `valueChanged` time, Oct 23 2026
|
|
47
|
+
*/
|
|
48
|
+
readonly restPastBound: "turnToBound";
|
|
49
|
+
/**
|
|
50
|
+
* In `.date` wheels a day the month does not have clamps to the month's
|
|
51
|
+
* last day (January 30, month +1 → February 28).
|
|
52
|
+
* @source measured: UIKit lab, iOS 26.2 simulator, `.date` `.wheels`
|
|
53
|
+
* with bounds Jun 1 2026 – Mar 15 2027, Oct 23 2026
|
|
54
|
+
*/
|
|
55
|
+
readonly dayClampsToMonth: true;
|
|
56
|
+
};
|
|
57
|
+
};
|
|
58
|
+
//# sourceMappingURL=datePicker.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"datePicker.d.ts","sourceRoot":"","sources":["../../../src/motion/uikit/datePicker.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AAEH,eAAO,MAAM,UAAU;;;YAGjB;;;;;;eAMG;;;;;QAKL;;;;;;;;WAQG;;QAEH;;;;;;;;;WASG;;QAEH;;;;;WAKG;;;CAGG,CAAC"}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* @file datePicker.ts
|
|
5
|
+
* @input Nothing; data only
|
|
6
|
+
* @output Exports `datePicker`: the rules UIDatePicker adds to its wheels. The
|
|
7
|
+
* month/year wheels change the date, the AM/PM column follows the hour, a
|
|
8
|
+
* column turns back onto a bound, and a day clamps to its month.
|
|
9
|
+
* @position The date picker domain of the UIKit constants table
|
|
10
|
+
* (motion/uikit), for the date and time touch sheets. Every leaf names its
|
|
11
|
+
* source, which uikit.test.ts checks.
|
|
12
|
+
*
|
|
13
|
+
* SYNC: When modified, update /packages/core/src/motion/MEASUREMENTS.md and
|
|
14
|
+
* /packages/core/src/motion/README.md.
|
|
15
|
+
*/
|
|
16
|
+
|
|
17
|
+
export const datePicker = {
|
|
18
|
+
calendar: {
|
|
19
|
+
monthYearWheels: {
|
|
20
|
+
/**
|
|
21
|
+
* Turning the month or year wheel changes the picker's date, keeping
|
|
22
|
+
* the day, and fires `valueChanged`.
|
|
23
|
+
* @source measured: UIKit lab, iOS 26.2 simulator, `.date` `.inline`,
|
|
24
|
+
* October 15 → May 15 after the month wheel's fling, with a
|
|
25
|
+
* `valueChanged` carrying May 15, Oct 23 2026
|
|
26
|
+
*/
|
|
27
|
+
changesDate: true
|
|
28
|
+
}
|
|
29
|
+
},
|
|
30
|
+
wheels: {
|
|
31
|
+
/**
|
|
32
|
+
* In 12-hour time the AM/PM column follows the hour. Turning the hour from
|
|
33
|
+
* 11 to 12 turns the time from AM to PM, and back. From 12 to 1 it keeps
|
|
34
|
+
* the half of the day.
|
|
35
|
+
* @source measured: UIKit lab, iOS 26.2 simulator, `.time` `.wheels`,
|
|
36
|
+
* en_US: 11:58 AM, hour wheel +1 row → `valueChanged` 12:58 PM; then
|
|
37
|
+
* the minute wheel's +4 rows carried the hour from 12 to 1 → 1:02 PM,
|
|
38
|
+
* Oct 23 2026
|
|
39
|
+
*/
|
|
40
|
+
meridiemFollowsHour: true,
|
|
41
|
+
/**
|
|
42
|
+
* A column that comes to rest past `minimumDate` or `maximumDate` turns
|
|
43
|
+
* back onto the bound. Its `valueChanged` already carries the bound. For
|
|
44
|
+
* example, with bounds 9:00–17:00, the hour of 10:00 dragged to 7 reads
|
|
45
|
+
* 9:00 at rest. The hour column then turns 64 pt, two rows, back to 9.
|
|
46
|
+
* @source measured: UIKit lab, iOS 26.2 simulator, `.time` `.wheels`
|
|
47
|
+
* with bounds 9:00–17:00 and `minuteInterval` 15, per-frame hour
|
|
48
|
+
* offsets after the rest (0.4, 2, 7.4, 16, 26.4, 37.7, 48.3, 56.7,
|
|
49
|
+
* 62, 64 pt at 33 ms steps) and the `valueChanged` time, Oct 23 2026
|
|
50
|
+
*/
|
|
51
|
+
restPastBound: 'turnToBound',
|
|
52
|
+
/**
|
|
53
|
+
* In `.date` wheels a day the month does not have clamps to the month's
|
|
54
|
+
* last day (January 30, month +1 → February 28).
|
|
55
|
+
* @source measured: UIKit lab, iOS 26.2 simulator, `.date` `.wheels`
|
|
56
|
+
* with bounds Jun 1 2026 – Mar 15 2027, Oct 23 2026
|
|
57
|
+
*/
|
|
58
|
+
dayClampsToMonth: true
|
|
59
|
+
}
|
|
60
|
+
};
|
|
@@ -3,9 +3,9 @@
|
|
|
3
3
|
* @input The domain files of the UIKit constants table
|
|
4
4
|
* @output Re-exports `springs` and one constant per spring (`SHEET_PRESENT_SPRING`,
|
|
5
5
|
* …), `scroll`, `timing`, `navigation`, `picker`, `progressBar`,
|
|
6
|
-
* `segmentedControl`,
|
|
7
|
-
* the gesture thresholds
|
|
8
|
-
* `UIKIT_GESTURES`, and the haptic tables
|
|
6
|
+
* `segmentedControl`, `datePicker`, `slider` and `switchControl`. It also
|
|
7
|
+
* re-exports the gesture thresholds: one `UIKIT_*` group per recognizer,
|
|
8
|
+
* their union `UIKIT_GESTURES`, and the haptic tables
|
|
9
9
|
* @position Entry of the UIKit constants table (motion/uikit). Internal to
|
|
10
10
|
* core: not exported from the package entry point
|
|
11
11
|
*
|
|
@@ -18,6 +18,7 @@
|
|
|
18
18
|
* /packages/core/src/motion/README.md.
|
|
19
19
|
*/
|
|
20
20
|
export { HAPTIC_FEEDBACK_KINDS, HAPTIC_VIBRATION_PATTERNS, UIKIT_CLICK, UIKIT_CONTROL, UIKIT_GESTURES, UIKIT_LONG_PRESS, UIKIT_PAN, UIKIT_PINCH, UIKIT_PRESS, UIKIT_ROTATION, UIKIT_SCREEN_EDGE_PAN, UIKIT_SWIPE, UIKIT_TAP, UIKIT_VELOCITY, type GestureConstant, type GestureConstantUnit, type HapticFeedbackKind, } from './gestures.js';
|
|
21
|
+
export { datePicker } from './datePicker.js';
|
|
21
22
|
export { navigation, registerNavigationTable } from './navigation.js';
|
|
22
23
|
export { picker } from './picker.js';
|
|
23
24
|
export { progressBar, registerProgressBarTable } from './progressBar.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/motion/uikit/index.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,EACL,qBAAqB,EACrB,yBAAyB,EACzB,WAAW,EACX,aAAa,EACb,cAAc,EACd,gBAAgB,EAChB,SAAS,EACT,WAAW,EACX,WAAW,EACX,cAAc,EACd,qBAAqB,EACrB,WAAW,EACX,SAAS,EACT,cAAc,EACd,KAAK,eAAe,EACpB,KAAK,mBAAmB,EACxB,KAAK,kBAAkB,GACxB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAC,UAAU,EAAE,uBAAuB,EAAC,MAAM,cAAc,CAAC;AACjE,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAC;AAChC,OAAO,EAAC,WAAW,EAAE,wBAAwB,EAAC,MAAM,eAAe,CAAC;AACpE,OAAO,EAAC,mBAAmB,EAAE,MAAM,EAAC,MAAM,UAAU,CAAC;AACrD,OAAO,EAAC,gBAAgB,EAAC,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAC;AAChC,OAAO,EACL,2BAA2B,EAC3B,2BAA2B,EAC3B,oBAAoB,EACpB,oBAAoB,EACpB,aAAa,EACb,2BAA2B,EAC3B,wBAAwB,EACxB,yBAAyB,EACzB,oBAAoB,EACpB,eAAe,EACf,sBAAsB,EACtB,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,0BAA0B,EAC1B,8BAA8B,EAC9B,wCAAwC,EACxC,qBAAqB,EACrB,sBAAsB,EACtB,mBAAmB,EACnB,aAAa,EACb,mBAAmB,EACnB,oBAAoB,EACpB,0BAA0B,EAC1B,oBAAoB,EACpB,yBAAyB,EACzB,mBAAmB,EACnB,oBAAoB,EACpB,oBAAoB,EACpB,wBAAwB,EACxB,mBAAmB,EACnB,kBAAkB,EAClB,oBAAoB,EACpB,OAAO,GACR,MAAM,WAAW,CAAC;AACnB,OAAO,EAAC,aAAa,EAAC,MAAM,UAAU,CAAC;AACvC,OAAO,EAAC,mBAAmB,EAAE,MAAM,EAAC,MAAM,UAAU,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/motion/uikit/index.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,EACL,qBAAqB,EACrB,yBAAyB,EACzB,WAAW,EACX,aAAa,EACb,cAAc,EACd,gBAAgB,EAChB,SAAS,EACT,WAAW,EACX,WAAW,EACX,cAAc,EACd,qBAAqB,EACrB,WAAW,EACX,SAAS,EACT,cAAc,EACd,KAAK,eAAe,EACpB,KAAK,mBAAmB,EACxB,KAAK,kBAAkB,GACxB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AACxC,OAAO,EAAC,UAAU,EAAE,uBAAuB,EAAC,MAAM,cAAc,CAAC;AACjE,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAC;AAChC,OAAO,EAAC,WAAW,EAAE,wBAAwB,EAAC,MAAM,eAAe,CAAC;AACpE,OAAO,EAAC,mBAAmB,EAAE,MAAM,EAAC,MAAM,UAAU,CAAC;AACrD,OAAO,EAAC,gBAAgB,EAAC,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAC;AAChC,OAAO,EACL,2BAA2B,EAC3B,2BAA2B,EAC3B,oBAAoB,EACpB,oBAAoB,EACpB,aAAa,EACb,2BAA2B,EAC3B,wBAAwB,EACxB,yBAAyB,EACzB,oBAAoB,EACpB,eAAe,EACf,sBAAsB,EACtB,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,0BAA0B,EAC1B,8BAA8B,EAC9B,wCAAwC,EACxC,qBAAqB,EACrB,sBAAsB,EACtB,mBAAmB,EACnB,aAAa,EACb,mBAAmB,EACnB,oBAAoB,EACpB,0BAA0B,EAC1B,oBAAoB,EACpB,yBAAyB,EACzB,mBAAmB,EACnB,oBAAoB,EACpB,oBAAoB,EACpB,wBAAwB,EACxB,mBAAmB,EACnB,kBAAkB,EAClB,oBAAoB,EACpB,OAAO,GACR,MAAM,WAAW,CAAC;AACnB,OAAO,EAAC,aAAa,EAAC,MAAM,UAAU,CAAC;AACvC,OAAO,EAAC,mBAAmB,EAAE,MAAM,EAAC,MAAM,UAAU,CAAC"}
|
|
@@ -5,9 +5,9 @@
|
|
|
5
5
|
* @input The domain files of the UIKit constants table
|
|
6
6
|
* @output Re-exports `springs` and one constant per spring (`SHEET_PRESENT_SPRING`,
|
|
7
7
|
* …), `scroll`, `timing`, `navigation`, `picker`, `progressBar`,
|
|
8
|
-
* `segmentedControl`,
|
|
9
|
-
* the gesture thresholds
|
|
10
|
-
* `UIKIT_GESTURES`, and the haptic tables
|
|
8
|
+
* `segmentedControl`, `datePicker`, `slider` and `switchControl`. It also
|
|
9
|
+
* re-exports the gesture thresholds: one `UIKIT_*` group per recognizer,
|
|
10
|
+
* their union `UIKIT_GESTURES`, and the haptic tables
|
|
11
11
|
* @position Entry of the UIKit constants table (motion/uikit). Internal to
|
|
12
12
|
* core: not exported from the package entry point
|
|
13
13
|
*
|
|
@@ -21,6 +21,7 @@
|
|
|
21
21
|
*/
|
|
22
22
|
|
|
23
23
|
export { HAPTIC_FEEDBACK_KINDS, HAPTIC_VIBRATION_PATTERNS, UIKIT_CLICK, UIKIT_CONTROL, UIKIT_GESTURES, UIKIT_LONG_PRESS, UIKIT_PAN, UIKIT_PINCH, UIKIT_PRESS, UIKIT_ROTATION, UIKIT_SCREEN_EDGE_PAN, UIKIT_SWIPE, UIKIT_TAP, UIKIT_VELOCITY } from "./gestures.js";
|
|
24
|
+
export { datePicker } from "./datePicker.js";
|
|
24
25
|
export { navigation, registerNavigationTable } from "./navigation.js";
|
|
25
26
|
export { picker } from "./picker.js";
|
|
26
27
|
export { progressBar, registerProgressBarTable } from "./progressBar.js";
|
|
@@ -33,8 +33,9 @@ export declare const pressVars: stylex.VarGroup<Readonly<{
|
|
|
33
33
|
*
|
|
34
34
|
* `defineConsts`, so the one number is inlined here at build time and is the
|
|
35
35
|
* controller's constant at run time (`PRESS_FADE_MS` in pressGesture.ts):
|
|
36
|
-
* the release animation and the
|
|
37
|
-
*
|
|
36
|
+
* the release animation and the controller's clock cannot drift apart. When
|
|
37
|
+
* that clock runs out, the controller waits for a release animation that a
|
|
38
|
+
* busy main thread started late, then removes the attribute.
|
|
38
39
|
*/
|
|
39
40
|
export declare const pressConsts: {
|
|
40
41
|
/** How long the release takes, in ms. UIKit's deselect clock. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interactionOverlay.stylex.d.ts","sourceRoot":"","sources":["../../src/utils/interactionOverlay.stylex.ts"],"names":[],"mappings":"AAMA;;;;;;;;;;;;;;GAcG;AAmCH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAG3C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,SAAS;;WAEpB,CAAC;AAEH
|
|
1
|
+
{"version":3,"file":"interactionOverlay.stylex.d.ts","sourceRoot":"","sources":["../../src/utils/interactionOverlay.stylex.ts"],"names":[],"mappings":"AAMA;;;;;;;;;;;;;;GAcG;AAmCH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAG3C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,SAAS;;WAEpB,CAAC;AAEH;;;;;;;;GAQG;AACH,eAAO,MAAM,WAAW;IACtB,iEAAiE;;CAEjE,CAAC;AA8HH,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8HnC,CAAC"}
|
|
@@ -78,8 +78,9 @@ export const pressVars = {
|
|
|
78
78
|
*
|
|
79
79
|
* `defineConsts`, so the one number is inlined here at build time and is the
|
|
80
80
|
* controller's constant at run time (`PRESS_FADE_MS` in pressGesture.ts):
|
|
81
|
-
* the release animation and the
|
|
82
|
-
*
|
|
81
|
+
* the release animation and the controller's clock cannot drift apart. When
|
|
82
|
+
* that clock runs out, the controller waits for a release animation that a
|
|
83
|
+
* busy main thread started late, then removes the attribute.
|
|
83
84
|
*/
|
|
84
85
|
export const pressConsts = {
|
|
85
86
|
releaseMs: 200
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @file layoutViewport.ts
|
|
3
|
+
* @input A window: its innerHeight and innerWidth, its visual viewport's
|
|
4
|
+
* width and scale, and its document's root box
|
|
5
|
+
* @output layoutViewportHeight, the layout viewport's height in layout px
|
|
6
|
+
* less a classic horizontal scrollbar, and __resetLayoutViewportForTest
|
|
7
|
+
* @position Internal shared measurement, not re-exported from the utils
|
|
8
|
+
* entry. The keyboard module, BottomSheet's keyboard obstruction and any
|
|
9
|
+
* layout that sizes against the layout viewport read it.
|
|
10
|
+
*/
|
|
11
|
+
/**
|
|
12
|
+
* The layout viewport's height, CSS px, in the units of element rects.
|
|
13
|
+
*
|
|
14
|
+
* `innerHeight` is the layout viewport's height in most engines. WebKit
|
|
15
|
+
* reports `innerHeight` and `innerWidth` in the pinch-zoomed visual
|
|
16
|
+
* viewport's px instead. At a 1.33 zoom of a 402 × 714 layout viewport,
|
|
17
|
+
* Safari on iOS 26.2 reports 536 and 302. Element rects and the visual
|
|
18
|
+
* viewport's height times its scale stay in layout px. So, read as is, a zoom
|
|
19
|
+
* shrinks the layout viewport by the zoom, and the function scales the height
|
|
20
|
+
* back.
|
|
21
|
+
*/
|
|
22
|
+
export declare function layoutViewportHeight(win: Window): number;
|
|
23
|
+
/** Forgets every measured scrollbar thickness. Tests only. */
|
|
24
|
+
export declare function __resetLayoutViewportForTest(): void;
|
|
25
|
+
//# sourceMappingURL=layoutViewport.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"layoutViewport.d.ts","sourceRoot":"","sources":["../../src/utils/layoutViewport.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH;;;;;;;;;;GAUG;AACH,wBAAgB,oBAAoB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAmBxD;AAyDD,8DAA8D;AAC9D,wBAAgB,4BAA4B,IAAI,IAAI,CAEnD"}
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* @file layoutViewport.ts
|
|
5
|
+
* @input A window: its innerHeight and innerWidth, its visual viewport's
|
|
6
|
+
* width and scale, and its document's root box
|
|
7
|
+
* @output layoutViewportHeight, the layout viewport's height in layout px
|
|
8
|
+
* less a classic horizontal scrollbar, and __resetLayoutViewportForTest
|
|
9
|
+
* @position Internal shared measurement, not re-exported from the utils
|
|
10
|
+
* entry. The keyboard module, BottomSheet's keyboard obstruction and any
|
|
11
|
+
* layout that sizes against the layout viewport read it.
|
|
12
|
+
*/
|
|
13
|
+
|
|
14
|
+
/**
|
|
15
|
+
* The layout viewport's height, CSS px, in the units of element rects.
|
|
16
|
+
*
|
|
17
|
+
* `innerHeight` is the layout viewport's height in most engines. WebKit
|
|
18
|
+
* reports `innerHeight` and `innerWidth` in the pinch-zoomed visual
|
|
19
|
+
* viewport's px instead. At a 1.33 zoom of a 402 × 714 layout viewport,
|
|
20
|
+
* Safari on iOS 26.2 reports 536 and 302. Element rects and the visual
|
|
21
|
+
* viewport's height times its scale stay in layout px. So, read as is, a zoom
|
|
22
|
+
* shrinks the layout viewport by the zoom, and the function scales the height
|
|
23
|
+
* back.
|
|
24
|
+
*/
|
|
25
|
+
export function layoutViewportHeight(win) {
|
|
26
|
+
const viewport = win.visualViewport;
|
|
27
|
+
const width = viewport?.width ?? 0;
|
|
28
|
+
if (viewport == null || !(width > 0)) {
|
|
29
|
+
return win.innerHeight - horizontalScrollbarHeight(win);
|
|
30
|
+
}
|
|
31
|
+
const scale = viewport.scale;
|
|
32
|
+
// Which units `innerWidth` is in tells the two apart without naming an
|
|
33
|
+
// engine. It is the visual viewport's width where the zoom applies, and
|
|
34
|
+
// that width times the scale where it does not. `innerWidth` is a whole
|
|
35
|
+
// number of px against a fractional width, so it never equals either, and
|
|
36
|
+
// the nearest wins with no tolerance constant. At a scale of 1 the two
|
|
37
|
+
// widths are equal, so the function takes `innerHeight` as it is. A classic
|
|
38
|
+
// scrollbar, which `innerWidth` counts, then changes nothing.
|
|
39
|
+
const fromVisual = Math.abs(win.innerWidth - width);
|
|
40
|
+
const fromLayout = Math.abs(win.innerWidth - width * scale);
|
|
41
|
+
const height = fromVisual < fromLayout ? win.innerHeight * scale : win.innerHeight;
|
|
42
|
+
return height - horizontalScrollbarHeight(win);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
/**
|
|
46
|
+
* The document's classic horizontal scrollbar, CSS px. It is in
|
|
47
|
+
* `innerHeight` but not in the visual viewport's height. On a desktop page
|
|
48
|
+
* wider than its window, Chromium's `innerHeight` is 800 for a 785 px visual
|
|
49
|
+
* viewport. It is the part of `innerHeight` the root's client height leaves
|
|
50
|
+
* out, up to the thickness of a scrollbar that takes room. Where scrollbars
|
|
51
|
+
* overlay the content, as on every phone, that thickness is 0. So the room a
|
|
52
|
+
* hidden toolbar adds to `innerHeight` is never taken for a scrollbar. Chrome
|
|
53
|
+
* on Android sizes the root to the viewport with its toolbar shown.
|
|
54
|
+
*/
|
|
55
|
+
function horizontalScrollbarHeight(win) {
|
|
56
|
+
const root = win.document.documentElement;
|
|
57
|
+
const gap = win.innerHeight - root.clientHeight;
|
|
58
|
+
if (!(gap > 0) || root.scrollWidth <= root.clientWidth) {
|
|
59
|
+
return 0;
|
|
60
|
+
}
|
|
61
|
+
return Math.min(gap, scrollbarThickness(win.document));
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
// The scrollbar thickness each document measured, and the device pixel ratio
|
|
65
|
+
// it measured it at. A browser zoom changes the ratio, and with it how many
|
|
66
|
+
// CSS px a classic scrollbar takes. Measuring writes a probe to the document
|
|
67
|
+
// and forces a layout, so it runs once per document and zoom. Every later
|
|
68
|
+
// measurement stays one layout read.
|
|
69
|
+
let thicknesses = new WeakMap();
|
|
70
|
+
|
|
71
|
+
/** How much room a scrollbar takes from a scrolling box: 0 where overlaid. */
|
|
72
|
+
function scrollbarThickness(doc) {
|
|
73
|
+
const devicePixelRatio = doc.defaultView?.devicePixelRatio ?? 1;
|
|
74
|
+
const known = thicknesses.get(doc);
|
|
75
|
+
if (known != null && known.devicePixelRatio === devicePixelRatio) {
|
|
76
|
+
return known.thickness;
|
|
77
|
+
}
|
|
78
|
+
const thickness = measureScrollbarThickness(doc);
|
|
79
|
+
thicknesses.set(doc, {
|
|
80
|
+
devicePixelRatio,
|
|
81
|
+
thickness
|
|
82
|
+
});
|
|
83
|
+
return thickness;
|
|
84
|
+
}
|
|
85
|
+
function measureScrollbarThickness(doc) {
|
|
86
|
+
const probe = doc.createElement('div');
|
|
87
|
+
probe.style.position = 'absolute';
|
|
88
|
+
probe.style.top = '-200px';
|
|
89
|
+
probe.style.width = '100px';
|
|
90
|
+
probe.style.height = '100px';
|
|
91
|
+
probe.style.overflow = 'scroll';
|
|
92
|
+
probe.style.visibility = 'hidden';
|
|
93
|
+
(doc.body ?? doc.documentElement).append(probe);
|
|
94
|
+
const thickness = probe.offsetHeight - probe.clientHeight;
|
|
95
|
+
probe.remove();
|
|
96
|
+
return thickness;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
/** Forgets every measured scrollbar thickness. Tests only. */
|
|
100
|
+
export function __resetLayoutViewportForTest() {
|
|
101
|
+
thicknesses = new WeakMap();
|
|
102
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pressFeedback.d.ts","sourceRoot":"","sources":["../../src/utils/pressFeedback.ts"],"names":[],"mappings":"AAkDA;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB,0BAA0B,CAAC;AAE3D;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,sBAAsB,CAAC;AAErD,qDAAqD;AACrD,eAAO,MAAM,cAAc,EAAE;IAAC,QAAQ,CAAC,CAAC,mBAAmB,CAAC,EAAE,EAAE,CAAA;CAE/D,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"pressFeedback.d.ts","sourceRoot":"","sources":["../../src/utils/pressFeedback.ts"],"names":[],"mappings":"AAkDA;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB,0BAA0B,CAAC;AAE3D;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,sBAAsB,CAAC;AAErD,qDAAqD;AACrD,eAAO,MAAM,cAAc,EAAE;IAAC,QAAQ,CAAC,CAAC,mBAAmB,CAAC,EAAE,EAAE,CAAA;CAE/D,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,OAAO,CAAC;AA0E5C;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,OAAO,EAAE,OAAO,GAAG,MAAM,CAUpD;AAkoBD;;;;;;;;;;;;GAYG;AACH,wBAAgB,oBAAoB,IAAI,MAAM,IAAI,CA0BjD"}
|