@astryxdesign/core 0.7.8-canary.e4c81f3 → 0.7.8-canary.eb985e5
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/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/DateInput/PickerWheel.d.ts +1 -1
- package/dist/DateInput/PickerWheel.d.ts.map +1 -1
- package/dist/DateInput/PickerWheel.js +28 -4
- package/dist/DateInput/Wheel.d.ts +2 -2
- package/dist/DateInput/Wheel.d.ts.map +1 -1
- package/dist/DateInput/Wheel.js +20 -4
- 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/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/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/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/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/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/selectionLock.d.ts +10 -1
- package/dist/utils/selectionLock.d.ts.map +1 -1
- package/dist/utils/selectionLock.js +31 -5
- 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/package.json +4 -4
- package/src/BottomSheet/BottomSheet.doc.mjs +1 -1
- package/src/BottomSheet/BottomSheetPanel.tsx +41 -13
- package/src/BottomSheet/bottomSheetStack.ts +1 -1
- package/src/BottomSheet/useSheetGestures.ts +6 -0
- package/src/DateInput/PickerWheel.tsx +37 -2
- package/src/DateInput/Wheel.tsx +30 -2
- package/src/DateInput/datePickerTouch.ts +15 -0
- package/src/DateInput/wheelOptions.ts +31 -2
- package/src/DateTimeInput/TouchDateTimeField.tsx +94 -178
- package/src/TimeInput/TimeWheels.tsx +218 -0
- package/src/TimeInput/TouchTimeField.tsx +93 -157
- package/src/TimeInput/timeWheelRules.ts +352 -0
- package/src/gestures/GestureHost.ts +5 -4
- package/src/i18n/generated-english/TimeInput/TimeWheels.generated.ts +18 -0
- 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/README.md +1 -0
- package/src/motion/android/index.ts +18 -0
- package/src/motion/android/keyboard.ts +96 -0
- package/src/utils/layoutViewport.ts +104 -0
- package/src/utils/selectionLock.ts +40 -6
- 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
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
* - /packages/core/src/BottomSheet/BottomSheet.tsx
|
|
11
11
|
* - /packages/core/src/BottomSheet/BottomSheetPanel.test.tsx
|
|
12
12
|
* - /packages/core/src/BottomSheet/snapOffsets.ts
|
|
13
|
-
* - /packages/core/src/
|
|
13
|
+
* - /packages/core/src/keyboard/useMobileKeyboard.ts
|
|
14
14
|
* - /packages/core/src/BottomSheet/useSheetGestures.ts
|
|
15
15
|
* - /packages/core/src/Layout/container.stylex.ts (bottom-sheet padding chain)
|
|
16
16
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BottomSheetPanel.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheetPanel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA+B5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAGL,KAAK,oBAAoB,EAC1B,MAAM,eAAe,CAAC;AAQvB,QAAA,MAAM,cAAc;;;;CAIV,CAAC;AAEX,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,cAAc,CAAC;AAC5D,YAAY,EAAC,oBAAoB,EAAC,CAAC;AA4CnC,eAAO,MAAM,2BAA2B,2DACkB,CAAC;AA+
|
|
1
|
+
{"version":3,"file":"BottomSheetPanel.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheetPanel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA+B5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAGL,KAAK,oBAAoB,EAC1B,MAAM,eAAe,CAAC;AAQvB,QAAA,MAAM,cAAc;;;;CAIV,CAAC;AAEX,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,cAAc,CAAC;AAC5D,YAAY,EAAC,oBAAoB,EAAC,CAAC;AA4CnC,eAAO,MAAM,2BAA2B,2DACkB,CAAC;AA+N3D,MAAM,MAAM,sBAAsB,GAChC,UAAU,GAAG,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEjD,MAAM,MAAM,qBAAqB,GAC7B;IAAC,IAAI,EAAE,QAAQ,CAAA;CAAC,GAChB;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,OAAO,CAAA;CAAC,GACjC;IACE,IAAI,EAAE,UAAU,CAAC;IACjB,MAAM,EAAE,SAAS,GAAG,UAAU,GAAG,QAAQ,CAAC;IAC1C,eAAe,EAAE,MAAM,CAAC;CACzB,GACD;IAAC,IAAI,EAAE,SAAS,CAAA;CAAC,CAAC;AAEtB,UAAU,qBAAsB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC/D,+CAA+C;IAC/C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,KAAK,EAAE,qBAAqB,CAAC;IAC7B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,MAAM,EAAE,iBAAiB,GAAG,MAAM,GAAG,MAAM,CAAC;IAC5C,mEAAmE;IACnE,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,UAAU,CAAC,EAAE,aAAa,CAAC,oBAAoB,CAAC,CAAC;IACjD,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,gFAAgF;IAChF,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,cAAc,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAC;IAC3D,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,sBAAsB,KAAK,IAAI,CAAC;IACzD,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,sBAAsB,KAAK,IAAI,CAAC;CAC7D;AAyJD,4EAA4E;AAC5E,wBAAgB,gBAAgB,CAAC,EAC/B,GAAG,EACH,KAAK,EACL,eAAe,EACf,MAAM,EACN,KAAK,EACL,QAAQ,EACR,OAAO,EACP,UAAU,EACV,SAAS,EACT,KAAK,EACL,QAAQ,EACR,MAAM,EACN,cAAsB,EACtB,cAAc,EACd,eAAe,EACf,qBAA4B,EAC5B,kBAA0B,EAC1B,SAAS,EACT,cAAc,EACd,eAAe,EACf,aAAa,EACb,gBAAgB,EAChB,GAAG,KAAK,EACT,EAAE,qBAAqB,+BAuavB;yBA/be,gBAAgB"}
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
* - /packages/core/src/BottomSheet/BottomSheet.tsx
|
|
15
15
|
* - /packages/core/src/BottomSheet/BottomSheetPanel.test.tsx
|
|
16
16
|
* - /packages/core/src/BottomSheet/snapOffsets.ts
|
|
17
|
-
* - /packages/core/src/
|
|
17
|
+
* - /packages/core/src/keyboard/useMobileKeyboard.ts
|
|
18
18
|
* - /packages/core/src/BottomSheet/useSheetGestures.ts
|
|
19
19
|
* - /packages/core/src/Layout/container.stylex.ts (bottom-sheet padding chain)
|
|
20
20
|
*/
|
|
@@ -34,7 +34,7 @@ import { LayerContentBoundary } from "../Layer/layerScopedContext.js";
|
|
|
34
34
|
import { container } from "../Layout/container.stylex.js";
|
|
35
35
|
import { containerPaddingBlockEndVarStyles, containerPaddingBlockStartVarStyles, containerPaddingInlineVarStyles, overlayPaddingReset, paddingStyles, spacingStepToToken } from "../Layout/padding.stylex.js";
|
|
36
36
|
import { isValidSnapPoint, resolveSnapPoints } from "./snapOffsets.js";
|
|
37
|
-
import { useMobileKeyboard } from "
|
|
37
|
+
import { useMobileKeyboard } from "../keyboard/useMobileKeyboard.js";
|
|
38
38
|
import { scrollPreservationPadding, sheetLayoutHeight, useSheetGestures } from "./useSheetGestures.js";
|
|
39
39
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
40
40
|
const HEIGHT_BUDGETS = {
|
|
@@ -83,6 +83,10 @@ function snapPointsKeyFor(points) {
|
|
|
83
83
|
const REDUCED_MOTION_COARSE = '@media (prefers-reduced-motion: reduce) and (pointer: coarse)';
|
|
84
84
|
export const REDUCED_MOTION_COARSE_QUERY = '(prefers-reduced-motion: reduce) and (pointer: coarse)';
|
|
85
85
|
const CROSS_FADE_MS = 200;
|
|
86
|
+
const _temp = {
|
|
87
|
+
k4zj60: "x1ipgmjk",
|
|
88
|
+
"$$css": true
|
|
89
|
+
};
|
|
86
90
|
const styles = {
|
|
87
91
|
sheet: {
|
|
88
92
|
kfzvcC: "x67bb7w",
|
|
@@ -161,12 +165,18 @@ const styles = {
|
|
|
161
165
|
},
|
|
162
166
|
tallKeyboardBody: {
|
|
163
167
|
kFlMNQ: "xrw9175",
|
|
168
|
+
$$css: true
|
|
169
|
+
},
|
|
170
|
+
tallKeyboardContent: {
|
|
164
171
|
k5JduY: "x1s928wv",
|
|
165
172
|
kc3QkE: "xhkezso",
|
|
166
|
-
k4zj60: "
|
|
173
|
+
k4zj60: "x1gmr53x",
|
|
167
174
|
kloYau: "x2q1x1w",
|
|
168
175
|
$$css: true
|
|
169
176
|
},
|
|
177
|
+
keyboardInset: inset => [_temp, {
|
|
178
|
+
"--x-nsbhg8": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(inset)
|
|
179
|
+
}],
|
|
170
180
|
budget: {
|
|
171
181
|
kZKoxP: "x1tpcejd",
|
|
172
182
|
$$css: true
|
|
@@ -321,6 +331,7 @@ export function BottomSheetPanel({
|
|
|
321
331
|
...props
|
|
322
332
|
}) {
|
|
323
333
|
const elementRef = useRef(null);
|
|
334
|
+
const dismissKeyboardRef = useRef(null);
|
|
324
335
|
const previousStateRef = useRef(state);
|
|
325
336
|
const reactivatedEntranceRef = useRef(false);
|
|
326
337
|
const onMotionStartRef = useRef(onMotionStart);
|
|
@@ -388,7 +399,6 @@ export function BottomSheetPanel({
|
|
|
388
399
|
dragOffset,
|
|
389
400
|
settledOffset,
|
|
390
401
|
isDragging,
|
|
391
|
-
isTraveling,
|
|
392
402
|
isDismissedByTouchDrag,
|
|
393
403
|
sheetHeight,
|
|
394
404
|
scrollPreservationInset,
|
|
@@ -402,6 +412,10 @@ export function BottomSheetPanel({
|
|
|
402
412
|
offscreenBlockEndInset: OVERSCROLL_PADDING,
|
|
403
413
|
onDismiss,
|
|
404
414
|
snapHeights,
|
|
415
|
+
onTravelStart: () => {
|
|
416
|
+
// Focusing the sheet dismisses the keyboard as the sheet starts to move.
|
|
417
|
+
dismissKeyboardRef.current?.(elementRef.current ?? undefined);
|
|
418
|
+
},
|
|
405
419
|
onScrimOpacity,
|
|
406
420
|
hasFixedHeight: consumerHeight != null
|
|
407
421
|
});
|
|
@@ -437,17 +451,19 @@ export function BottomSheetPanel({
|
|
|
437
451
|
isPresentedRef.current = isPresented;
|
|
438
452
|
sheetRef(isPresented ? elementRef.current : null);
|
|
439
453
|
}, [isPresented, sheetRef]);
|
|
440
|
-
useMobileKeyboard({
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
isSheetTraveling: isTraveling,
|
|
454
|
+
const keyboard = useMobileKeyboard(elementRef, {
|
|
455
|
+
move: 'ride',
|
|
456
|
+
inset: true,
|
|
457
|
+
offset: MOBILE_KEYBOARD_BOTTOM_CLEARANCE,
|
|
458
|
+
isEnabled: height === 'tall' && isPresented,
|
|
459
|
+
isExpanded: settledOffset === 0,
|
|
447
460
|
isOpen: isInteractive,
|
|
448
|
-
|
|
449
|
-
sheetRef: elementRef
|
|
461
|
+
isPageScrollLocked
|
|
450
462
|
});
|
|
463
|
+
const keyboardInset = keyboard.inset;
|
|
464
|
+
// The drag's own callback dismisses the keyboard as the sheet starts to
|
|
465
|
+
// move. It runs in the gesture, so it reads the newest dismiss.
|
|
466
|
+
dismissKeyboardRef.current = keyboard.dismiss;
|
|
451
467
|
// Keep controller registration attached to one stable host ref. React
|
|
452
468
|
// detaches an old callback ref when a consumer supplies a new identity; if
|
|
453
469
|
// that public ref were merged with setElement, an ordinary parent rerender
|
|
@@ -629,7 +645,7 @@ export function BottomSheetPanel({
|
|
|
629
645
|
} : {})
|
|
630
646
|
})),
|
|
631
647
|
children: /*#__PURE__*/_jsx("div", {
|
|
632
|
-
...whilePresented(isPresented, getContentProps(stylex.props(styles.content, ...container(usesThemePadding ? {
|
|
648
|
+
...whilePresented(isPresented, getContentProps(stylex.props(styles.content, height === 'tall' && styles.tallKeyboardContent, height === 'tall' && keyboardInset > 0 && styles.keyboardInset(keyboardInset), ...container(usesThemePadding ? {
|
|
633
649
|
useThemeDefault: 'bottom-sheet'
|
|
634
650
|
} : {
|
|
635
651
|
paddingInnerX: paddingToken,
|
|
@@ -1513,7 +1513,7 @@ export function getBottomSheetBeneath(key) {
|
|
|
1513
1513
|
|
|
1514
1514
|
// preventScroll on both: presenting a sheet must not scroll the page to reveal
|
|
1515
1515
|
// what it just focused. For an autofocused field that reveal is the mobile
|
|
1516
|
-
// keyboard's, and it moves the document under a fixed sheet
|
|
1516
|
+
// keyboard's, and it moves the document under a fixed sheet. useMobileKeyboard
|
|
1517
1517
|
// brings the field into view within the sheet instead.
|
|
1518
1518
|
/**
|
|
1519
1519
|
* Move focus into a sheet panel. Focus already inside the sheet stays put:
|
|
@@ -92,6 +92,8 @@ export interface UseSheetGesturesOptions {
|
|
|
92
92
|
snapHeights?: () => number[];
|
|
93
93
|
/** Notified when the settled visible detent height (px) changes. */
|
|
94
94
|
onSnap?: (heightPx: number) => void;
|
|
95
|
+
/** Called once a drag first moves the sheet off its detent. */
|
|
96
|
+
onTravelStart?: () => void;
|
|
95
97
|
/**
|
|
96
98
|
* Called with the scrim opacity the sheet should show (1 = fully visible,
|
|
97
99
|
* 0 = hidden) as the drag moves and on settle. Full while the sheet is at
|
|
@@ -226,5 +228,5 @@ export interface UseSheetGesturesResult {
|
|
|
226
228
|
* </div>
|
|
227
229
|
* ```
|
|
228
230
|
*/
|
|
229
|
-
export declare function useSheetGestures({ isOpen, isOpenRequested, canDismiss, offscreenBlockEndInset, onDismiss, snapHeights, onSnap, onScrimOpacity, hasFixedHeight, }: UseSheetGesturesOptions): UseSheetGesturesResult;
|
|
231
|
+
export declare function useSheetGestures({ isOpen, isOpenRequested, canDismiss, offscreenBlockEndInset, onDismiss, snapHeights, onSnap, onTravelStart, onScrimOpacity, hasFixedHeight, }: UseSheetGesturesOptions): UseSheetGesturesResult;
|
|
230
232
|
//# sourceMappingURL=useSheetGestures.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSheetGestures.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/useSheetGestures.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"useSheetGestures.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/useSheetGestures.ts"],"names":[],"mappings":"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"}
|
|
@@ -290,6 +290,7 @@ export function useSheetGestures({
|
|
|
290
290
|
onDismiss,
|
|
291
291
|
snapHeights,
|
|
292
292
|
onSnap,
|
|
293
|
+
onTravelStart,
|
|
293
294
|
onScrimOpacity,
|
|
294
295
|
hasFixedHeight = false
|
|
295
296
|
}) {
|
|
@@ -404,6 +405,8 @@ export function useSheetGestures({
|
|
|
404
405
|
// stops by the time the re-anchor read it.
|
|
405
406
|
const snapHeightsRef = useRef(snapHeights);
|
|
406
407
|
snapHeightsRef.current = snapHeights;
|
|
408
|
+
const onTravelStartRef = useRef(onTravelStart);
|
|
409
|
+
onTravelStartRef.current = onTravelStart;
|
|
407
410
|
const onDismissRef = useRef(onDismiss);
|
|
408
411
|
const canDismissRef = useRef(canDismiss);
|
|
409
412
|
const onSnapRef = useRef(onSnap);
|
|
@@ -895,6 +898,7 @@ export function useSheetGestures({
|
|
|
895
898
|
if (!state.hasTraveled && next !== state.baseOffset) {
|
|
896
899
|
state.hasTraveled = true;
|
|
897
900
|
setIsTraveling(true);
|
|
901
|
+
onTravelStartRef.current?.();
|
|
898
902
|
}
|
|
899
903
|
|
|
900
904
|
// Mirror the scrim to the live drag: full at/above the mid detent,
|
|
@@ -12,7 +12,7 @@ import { type WheelProps } from './wheelOptions.js';
|
|
|
12
12
|
* <PickerWheel label="Month" options={monthOptions} value={month} onChange={setMonth} />
|
|
13
13
|
* ```
|
|
14
14
|
*/
|
|
15
|
-
export declare function PickerWheel({ label, options, value, onChange, isActive, }: WheelProps): import("react").JSX.Element;
|
|
15
|
+
export declare function PickerWheel({ label, options, value, onChange, isActive, ref, }: WheelProps): import("react").JSX.Element;
|
|
16
16
|
export declare namespace PickerWheel {
|
|
17
17
|
var displayName: string;
|
|
18
18
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PickerWheel.d.ts","sourceRoot":"","sources":["../../src/DateInput/PickerWheel.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"PickerWheel.d.ts","sourceRoot":"","sources":["../../src/DateInput/PickerWheel.tsx"],"names":[],"mappings":"AA2DA,OAAO,EAML,KAAK,UAAU,EAChB,MAAM,gBAAgB,CAAC;AA2HxB;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,OAAO,EACP,KAAK,EACL,QAAQ,EACR,QAAe,EACf,GAAG,GACJ,EAAE,UAAU,+BAuiBZ;yBA9iBe,WAAW"}
|
|
@@ -4,7 +4,8 @@
|
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* @file PickerWheel.tsx
|
|
7
|
-
* @input Wheel's props (wheelOptions.ts): options, value and change callback
|
|
7
|
+
* @input Wheel's props (wheelOptions.ts): options, value and change callback;
|
|
8
|
+
* optionally a ref for programmatic turns
|
|
8
9
|
* @output PickerWheel: one picker column that moves like UIPickerView
|
|
9
10
|
* @position Internal component; the Wheel under a finger (Wheel.tsx picks it)
|
|
10
11
|
*
|
|
@@ -14,7 +15,7 @@
|
|
|
14
15
|
* SYNC: When modified, update PickerWheel.test.tsx, Wheel.tsx,
|
|
15
16
|
* DateInputTouch.test.tsx, DateInput.doc.mjs and TimeInput.doc.mjs.
|
|
16
17
|
*/
|
|
17
|
-
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
18
|
+
import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
|
|
18
19
|
import * as stylex from '@stylexjs/stylex';
|
|
19
20
|
import { scrollTypeOf } from "../gestures/GestureHost.js";
|
|
20
21
|
import { PanGestureRecognizer } from "../gestures/PanGestureRecognizer.js";
|
|
@@ -36,7 +37,7 @@ import { useOwnScrollGesture } from "./useOwnScrollGesture.js";
|
|
|
36
37
|
import { useWheelListbox } from "./useWheelListbox.js";
|
|
37
38
|
import { createWheelStrip } from "./wheelStrip.js";
|
|
38
39
|
import { dragOffset, nearestIndex, offsetBounds, planRelease, spinCurve } from "./wheelPhysics.js";
|
|
39
|
-
import { endIndex, nearestEnabledIndex, steppedIndex, WHEEL_ROW_HEIGHT } from "./wheelOptions.js";
|
|
40
|
+
import { canSpinTo, endIndex, nearestEnabledIndex, steppedIndex, WHEEL_ROW_HEIGHT } from "./wheelOptions.js";
|
|
40
41
|
|
|
41
42
|
/** Row pitch, px: the touch column keeps the scrolling column's pitch. */
|
|
42
43
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
@@ -130,7 +131,8 @@ export function PickerWheel({
|
|
|
130
131
|
options,
|
|
131
132
|
value,
|
|
132
133
|
onChange,
|
|
133
|
-
isActive = true
|
|
134
|
+
isActive = true,
|
|
135
|
+
ref
|
|
134
136
|
}) {
|
|
135
137
|
const columnRef = useRef(null);
|
|
136
138
|
const rowsRef = useRef(null);
|
|
@@ -468,6 +470,28 @@ export function PickerWheel({
|
|
|
468
470
|
isEnabled: isActive,
|
|
469
471
|
isPointerKept: true
|
|
470
472
|
});
|
|
473
|
+
|
|
474
|
+
// A spin turns only onto an enabled row (canSpinTo). So its arrival commits
|
|
475
|
+
// that row, and nothing turns on past it. It reports the row it was asked
|
|
476
|
+
// for, as the scrolling column does.
|
|
477
|
+
const spinTo = useCallback(async index => new Promise(resolve => {
|
|
478
|
+
if (!canSpinTo(latestRef.current.options, index)) {
|
|
479
|
+
resolve(false);
|
|
480
|
+
return;
|
|
481
|
+
}
|
|
482
|
+
const offset = motion.offset();
|
|
483
|
+
move(turnCurve(columnRef.current, offset, index * ROW_HEIGHT), {
|
|
484
|
+
onEnd: (outcome, end) => {
|
|
485
|
+
if (outcome === 'arrived') {
|
|
486
|
+
arrive(end);
|
|
487
|
+
}
|
|
488
|
+
resolve(outcome === 'arrived');
|
|
489
|
+
}
|
|
490
|
+
});
|
|
491
|
+
}), [motion, move, arrive]);
|
|
492
|
+
useImperativeHandle(ref, () => ({
|
|
493
|
+
spinTo
|
|
494
|
+
}), [spinTo]);
|
|
471
495
|
const turnToPosition = useCallback((position, offset) => {
|
|
472
496
|
const current = latestRef.current;
|
|
473
497
|
const option = current.options[position];
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type WheelProps } from './wheelOptions.js';
|
|
2
|
-
export { nearestEnabledIndex, type WheelOption, type WheelProps, } from './wheelOptions.js';
|
|
2
|
+
export { nearestEnabledIndex, type WheelHandle, type WheelOption, type WheelProps, } from './wheelOptions.js';
|
|
3
3
|
/**
|
|
4
4
|
* One picker column: UIPickerView's motion with flat rows under a finger, the
|
|
5
5
|
* snap-scrolling column under a fine pointer.
|
|
@@ -31,7 +31,7 @@ export declare namespace Wheel {
|
|
|
31
31
|
* />
|
|
32
32
|
* ```
|
|
33
33
|
*/
|
|
34
|
-
export declare function ScrollWheel({ label, options, value, onChange, isActive, }: WheelProps): import("react").JSX.Element;
|
|
34
|
+
export declare function ScrollWheel({ label, options, value, onChange, isActive, ref, }: WheelProps): import("react").JSX.Element;
|
|
35
35
|
export declare namespace ScrollWheel {
|
|
36
36
|
var displayName: string;
|
|
37
37
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Wheel.d.ts","sourceRoot":"","sources":["../../src/DateInput/Wheel.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Wheel.d.ts","sourceRoot":"","sources":["../../src/DateInput/Wheel.tsx"],"names":[],"mappings":"AA2DA,OAAO,EAKL,KAAK,UAAU,EAChB,MAAM,gBAAgB,CAAC;AAExB,OAAO,EACL,mBAAmB,EACnB,KAAK,WAAW,EAChB,KAAK,WAAW,EAChB,KAAK,UAAU,GAChB,MAAM,gBAAgB,CAAC;AAoMxB;;;;;;;;;;;;;GAaG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,+BAKtC;yBALe,KAAK;;;AASrB;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,OAAO,EACP,KAAK,EACL,QAAQ,EACR,QAAe,EACf,GAAG,GACJ,EAAE,UAAU,+BAqVZ;yBA5Ve,WAAW"}
|
package/dist/DateInput/Wheel.js
CHANGED
|
@@ -4,7 +4,8 @@
|
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* @file Wheel.tsx
|
|
7
|
-
* @input Option list, selected value and change callback
|
|
7
|
+
* @input Option list, selected value and change callback; a ref for
|
|
8
|
+
* programmatic turns
|
|
8
9
|
* @output Exports Wheel (one picker column), ScrollWheel (the scrolling
|
|
9
10
|
* column) and the shared types of wheelOptions.ts
|
|
10
11
|
* @position Internal component; consumed by MonthYearWheels.tsx,
|
|
@@ -26,7 +27,7 @@
|
|
|
26
27
|
* - /packages/core/src/DateInput/DateInput.doc.mjs
|
|
27
28
|
* - /packages/core/src/DateInput/DateInputTouch.test.tsx
|
|
28
29
|
*/
|
|
29
|
-
import { useCallback, useEffect, useRef, useState } from 'react';
|
|
30
|
+
import { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
|
|
30
31
|
import * as stylex from '@stylexjs/stylex';
|
|
31
32
|
import "../theme/tokens.stylex.js";
|
|
32
33
|
import { colorVars, radiusVars, fontWeightVars, typeScaleVars, spacingVars, durationVars } from "../theme/tokens.stylex.js";
|
|
@@ -40,7 +41,7 @@ import { useOwnScrollGesture } from "./useOwnScrollGesture.js";
|
|
|
40
41
|
import { usePointerDragScroll } from "./usePointerDragScroll.js";
|
|
41
42
|
import { useScrollSettle } from "./useScrollSettle.js";
|
|
42
43
|
import { useWheelListbox } from "./useWheelListbox.js";
|
|
43
|
-
import { endIndex, nearestEnabledIndex, steppedIndex } from "./wheelOptions.js";
|
|
44
|
+
import { canSpinTo, endIndex, nearestEnabledIndex, steppedIndex } from "./wheelOptions.js";
|
|
44
45
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
45
46
|
export { nearestEnabledIndex } from "./wheelOptions.js";
|
|
46
47
|
const ITEM_BLOCK_SIZE = dateInputTouchSizes.wheelItemSize;
|
|
@@ -130,8 +131,23 @@ export function ScrollWheel({
|
|
|
130
131
|
options,
|
|
131
132
|
value,
|
|
132
133
|
onChange,
|
|
133
|
-
isActive = true
|
|
134
|
+
isActive = true,
|
|
135
|
+
ref
|
|
134
136
|
}) {
|
|
137
|
+
// A spin commits the row at once. The new value then scrolls the column
|
|
138
|
+
// there, as any new value does.
|
|
139
|
+
useImperativeHandle(ref, () => ({
|
|
140
|
+
spinTo: async index => {
|
|
141
|
+
if (!canSpinTo(options, index)) {
|
|
142
|
+
return false;
|
|
143
|
+
}
|
|
144
|
+
const option = options[index];
|
|
145
|
+
if (option.value !== value) {
|
|
146
|
+
onChange(option.value);
|
|
147
|
+
}
|
|
148
|
+
return true;
|
|
149
|
+
}
|
|
150
|
+
}), [options, value, onChange]);
|
|
135
151
|
const scrollerRef = useRef(null);
|
|
136
152
|
const selectedIndex = Math.max(0, options.findIndex(option => option.value === value));
|
|
137
153
|
// Which row is under the band right now. Tracks the finger during a scroll;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @file datePickerTouch.ts
|
|
3
|
+
* @input The date and time pickers' touch-only pieces
|
|
4
|
+
* @output Re-exports what the date and time sheets use only under a finger:
|
|
5
|
+
* TimeWheels
|
|
6
|
+
* @position The pickers' touch layer. The sheets import touch behaviour from
|
|
7
|
+
* here only, so a desktop build can replace this one module.
|
|
8
|
+
*
|
|
9
|
+
* SYNC: When modified, update TouchTimeField.tsx and TouchDateTimeField.tsx.
|
|
10
|
+
*/
|
|
11
|
+
export { TimeWheels } from '../TimeInput/TimeWheels.js';
|
|
12
|
+
export type { TimeWheelsProps } from '../TimeInput/TimeWheels.js';
|
|
13
|
+
//# sourceMappingURL=datePickerTouch.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"datePickerTouch.d.ts","sourceRoot":"","sources":["../../src/DateInput/datePickerTouch.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH,OAAO,EAAC,UAAU,EAAC,MAAM,yBAAyB,CAAC;AACnD,YAAY,EAAC,eAAe,EAAC,MAAM,yBAAyB,CAAC"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* @file datePickerTouch.ts
|
|
5
|
+
* @input The date and time pickers' touch-only pieces
|
|
6
|
+
* @output Re-exports what the date and time sheets use only under a finger:
|
|
7
|
+
* TimeWheels
|
|
8
|
+
* @position The pickers' touch layer. The sheets import touch behaviour from
|
|
9
|
+
* here only, so a desktop build can replace this one module.
|
|
10
|
+
*
|
|
11
|
+
* SYNC: When modified, update TouchTimeField.tsx and TouchDateTimeField.tsx.
|
|
12
|
+
*/
|
|
13
|
+
|
|
14
|
+
export { TimeWheels } from "../TimeInput/TimeWheels.js";
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @file wheelOptions.ts
|
|
3
3
|
* @input Nothing; types, the row height and pure functions
|
|
4
|
-
* @output WheelOption, WheelProps, WHEEL_ROW_HEIGHT,
|
|
5
|
-
* steppedIndex and endIndex: what both wheels share
|
|
4
|
+
* @output WheelOption, WheelProps, WheelHandle, WHEEL_ROW_HEIGHT, canSpinTo,
|
|
5
|
+
* nearestEnabledIndex, steppedIndex and endIndex: what both wheels share
|
|
6
6
|
* @position Internal; read by Wheel.tsx (which re-exports all of it) and
|
|
7
7
|
* PickerWheel.tsx
|
|
8
8
|
*
|
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
* - /packages/core/src/DateInput/Wheel.tsx
|
|
11
11
|
* - /packages/core/src/DateInput/PickerWheel.tsx
|
|
12
12
|
*/
|
|
13
|
+
import type { Ref } from 'react';
|
|
13
14
|
/**
|
|
14
15
|
* The row height, px (`dateInputTouchSizes.wheelItemSize`): the pitch of both
|
|
15
16
|
* columns' rows, and the unit of the touch wheel's offset.
|
|
@@ -32,6 +33,18 @@ export interface WheelOption {
|
|
|
32
33
|
*/
|
|
33
34
|
order?: number;
|
|
34
35
|
}
|
|
36
|
+
/** What a Wheel's `ref` exposes. */
|
|
37
|
+
export interface WheelHandle {
|
|
38
|
+
/**
|
|
39
|
+
* Turn the wheel onto `index` (an index into `options`) on the tap spin, then
|
|
40
|
+
* commit it as a rest would. Resolves true once that row is the committed
|
|
41
|
+
* one, false if a finger or another turn interrupted it or the wheel went
|
|
42
|
+
* away first. An index outside `options` or a disabled row resolves false at
|
|
43
|
+
* once, and nothing turns. Under a fine pointer the row commits at once. The
|
|
44
|
+
* column then scrolls to it as for any new value, on the same rule.
|
|
45
|
+
*/
|
|
46
|
+
spinTo(index: number): Promise<boolean>;
|
|
47
|
+
}
|
|
35
48
|
export interface WheelProps {
|
|
36
49
|
/** Accessible name for the column, e.g. "Month". */
|
|
37
50
|
label: string;
|
|
@@ -48,7 +61,14 @@ export interface WheelProps {
|
|
|
48
61
|
* motion.
|
|
49
62
|
*/
|
|
50
63
|
isActive?: boolean;
|
|
64
|
+
/** Programmatic turns: `spinTo(index)`. */
|
|
65
|
+
ref?: Ref<WheelHandle>;
|
|
51
66
|
}
|
|
67
|
+
/**
|
|
68
|
+
* Whether `spinTo(index)` may turn onto `index`: an enabled row of `options`.
|
|
69
|
+
* The touch wheel and the scrolling column answer a spin by the same rule.
|
|
70
|
+
*/
|
|
71
|
+
export declare function canSpinTo(options: ReadonlyArray<WheelOption>, index: number): boolean;
|
|
52
72
|
/**
|
|
53
73
|
* The enabled row nearest `index`: `index` itself when it is enabled,
|
|
54
74
|
* otherwise the closest enabled row on either side. A tie goes to the side of
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"wheelOptions.d.ts","sourceRoot":"","sources":["../../src/DateInput/wheelOptions.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH;;;GAGG;AACH,eAAO,MAAM,gBAAgB,KAAK,CAAC;AAEnC,MAAM,WAAW,WAAW;IAC1B,oEAAoE;IACpE,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB;IAChB,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,UAAU;IACzB,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,OAAO,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACpC,wDAAwD;IACxD,KAAK,EAAE,MAAM,CAAC;IACd,sEAAsE;IACtE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"wheelOptions.d.ts","sourceRoot":"","sources":["../../src/DateInput/wheelOptions.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,GAAG,EAAC,MAAM,OAAO,CAAC;AAE/B;;;GAGG;AACH,eAAO,MAAM,gBAAgB,KAAK,CAAC;AAEnC,MAAM,WAAW,WAAW;IAC1B,oEAAoE;IACpE,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB;IAChB,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,oCAAoC;AACpC,MAAM,WAAW,WAAW;IAC1B;;;;;;;OAOG;IACH,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;CACzC;AAED,MAAM,WAAW,UAAU;IACzB,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,OAAO,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACpC,wDAAwD;IACxD,KAAK,EAAE,MAAM,CAAC;IACd,sEAAsE;IACtE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2CAA2C;IAC3C,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED;;;GAGG;AACH,wBAAgB,SAAS,CACvB,OAAO,EAAE,aAAa,CAAC,WAAW,CAAC,EACnC,KAAK,EAAE,MAAM,GACZ,OAAO,CAGT;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,mBAAmB,CACjC,OAAO,EAAE,aAAa,CAAC,WAAW,CAAC,EACnC,KAAK,EAAE,MAAM,EACb,WAAW,EAAE,MAAM,GAClB,MAAM,CAsBR;AAaD;;;;;GAKG;AACH,wBAAgB,YAAY,CAC1B,OAAO,EAAE,aAAa,CAAC,WAAW,CAAC,EACnC,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,MAAM,GACZ,MAAM,GAAG,IAAI,CAyBf;AAED,uFAAuF;AACvF,wBAAgB,QAAQ,CACtB,OAAO,EAAE,aAAa,CAAC,WAAW,CAAC,EACnC,GAAG,EAAE,OAAO,GAAG,MAAM,GACpB,MAAM,GAAG,IAAI,CAKf"}
|
|
@@ -3,8 +3,8 @@
|
|
|
3
3
|
/**
|
|
4
4
|
* @file wheelOptions.ts
|
|
5
5
|
* @input Nothing; types, the row height and pure functions
|
|
6
|
-
* @output WheelOption, WheelProps, WHEEL_ROW_HEIGHT,
|
|
7
|
-
* steppedIndex and endIndex: what both wheels share
|
|
6
|
+
* @output WheelOption, WheelProps, WheelHandle, WHEEL_ROW_HEIGHT, canSpinTo,
|
|
7
|
+
* nearestEnabledIndex, steppedIndex and endIndex: what both wheels share
|
|
8
8
|
* @position Internal; read by Wheel.tsx (which re-exports all of it) and
|
|
9
9
|
* PickerWheel.tsx
|
|
10
10
|
*
|
|
@@ -18,6 +18,18 @@
|
|
|
18
18
|
* columns' rows, and the unit of the touch wheel's offset.
|
|
19
19
|
*/
|
|
20
20
|
export const WHEEL_ROW_HEIGHT = 28;
|
|
21
|
+
|
|
22
|
+
/** What a Wheel's `ref` exposes. */
|
|
23
|
+
|
|
24
|
+
/**
|
|
25
|
+
* Whether `spinTo(index)` may turn onto `index`: an enabled row of `options`.
|
|
26
|
+
* The touch wheel and the scrolling column answer a spin by the same rule.
|
|
27
|
+
*/
|
|
28
|
+
export function canSpinTo(options, index) {
|
|
29
|
+
const option = options[index];
|
|
30
|
+
return option != null && !option.isDisabled;
|
|
31
|
+
}
|
|
32
|
+
|
|
21
33
|
/**
|
|
22
34
|
* The enabled row nearest `index`: `index` itself when it is enabled,
|
|
23
35
|
* otherwise the closest enabled row on either side. A tie goes to the side of
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TouchDateTimeField.d.ts","sourceRoot":"","sources":["../../src/DateTimeInput/TouchDateTimeField.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"TouchDateTimeField.d.ts","sourceRoot":"","sources":["../../src/DateTimeInput/TouchDateTimeField.tsx"],"names":[],"mappings":"AAuHA,OAAO,KAAK,EAAC,kBAAkB,EAAoB,MAAM,iBAAiB,CAAC;AA6S3E,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,eAAe,EACf,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,SAAiB,EACjB,GAAG,EACH,GAAG,EACH,eAAe,EACf,UAAkB,EAClB,UAAkB,EAElB,aAAa,EAAE,cAAc,EAC7B,kBAAkB,EAAE,mBAAmB,EACvC,QAAgB,EAChB,WAAW,EAAE,oBAAoB,EACjC,eAAe,EAAE,wBAAwB,EACzC,SAAS,EACT,IAAI,EAAE,QAAQ,EACd,MAAM,EACN,YAAY,EAEZ,cAAc,EAAE,eAAe,EAC/B,YAAY,EAAE,gBAAoB,EAClC,KAAK,EACL,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,GAAG,EACH,GAAG,SAAS,EACb,EAAE,kBAAkB,+BAk8BpB;yBAz+Be,kBAAkB"}
|