@astryxdesign/core 0.7.9-canary.35bbaee → 0.7.9-canary.3731ec3
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/BottomSheet.d.ts.map +1 -1
- package/dist/BottomSheet/BottomSheet.js +31 -2
- package/dist/DateInput/wheelStrip.js +2 -2
- package/dist/Drawer/Drawer.d.ts.map +1 -1
- package/dist/Drawer/Drawer.js +3 -1
- package/dist/InputGroup/InputGroupText.d.ts +2 -1
- package/dist/InputGroup/InputGroupText.d.ts.map +1 -1
- package/dist/InputGroup/InputGroupText.js +2 -1
- package/dist/Item/Item.d.ts.map +1 -1
- package/dist/Item/Item.js +4 -1
- package/dist/Layout/LayoutPanel.d.ts.map +1 -1
- package/dist/Layout/LayoutPanel.js +12 -3
- package/dist/OverflowList/OverflowList.d.ts.map +1 -1
- package/dist/OverflowList/OverflowList.js +7 -2
- package/dist/SegmentedControl/useSegmentedSelectionMotion.d.ts.map +1 -1
- package/dist/SegmentedControl/useSegmentedSelectionMotion.js +16 -56
- package/dist/Slider/sliderTouchController.js +2 -2
- package/dist/Switch/useSwitchTouch.js +4 -4
- package/dist/animator/createAnimator.js +2 -2
- package/dist/gestures/createPanGesture.d.ts +49 -0
- package/dist/gestures/createPanGesture.d.ts.map +1 -0
- package/dist/gestures/createPanGesture.js +80 -0
- package/dist/hooks/index.d.ts +2 -0
- package/dist/hooks/index.d.ts.map +1 -1
- package/dist/hooks/index.js +2 -1
- package/dist/hooks/useOverflow.d.ts +10 -0
- package/dist/hooks/useOverflow.d.ts.map +1 -1
- package/dist/hooks/useOverflow.js +25 -3
- package/dist/hooks/usePanGesture.d.ts +31 -0
- package/dist/hooks/usePanGesture.d.ts.map +1 -0
- package/dist/hooks/usePanGesture.js +61 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/dist/internal/touch.d.ts +10 -5
- package/dist/internal/touch.d.ts.map +1 -1
- package/dist/internal/touch.js +15 -7
- package/dist/motion/animator.d.ts +5 -5
- package/dist/motion/animator.d.ts.map +1 -1
- package/dist/motion/animator.js +7 -6
- package/dist/motion/themeTiming.d.ts +63 -0
- package/dist/motion/themeTiming.d.ts.map +1 -0
- package/dist/motion/themeTiming.js +173 -0
- package/dist/utils/focusReturn.d.ts +24 -11
- package/dist/utils/focusReturn.d.ts.map +1 -1
- package/dist/utils/focusReturn.js +48 -14
- package/package.json +4 -4
- package/src/BottomSheet/BottomSheet.tsx +39 -2
- package/src/DateInput/wheelStrip.ts +2 -2
- package/src/Drawer/Drawer.tsx +3 -1
- package/src/Icon/useIcon.doc.mjs +94 -0
- package/src/InputGroup/InputGroupText.doc.mjs +45 -3
- package/src/InputGroup/InputGroupText.tsx +2 -1
- package/src/Item/Item.doc.mjs +19 -4
- package/src/Item/Item.tsx +7 -1
- package/src/Layout/LayoutPanel.tsx +16 -2
- package/src/OverflowList/OverflowList.tsx +15 -9
- package/src/SegmentedControl/useSegmentedSelectionMotion.ts +15 -62
- package/src/Slider/sliderTouchController.ts +2 -2
- package/src/Switch/useSwitchTouch.ts +4 -4
- package/src/animator/createAnimator.ts +3 -3
- package/src/gestures/README.md +2 -1
- package/src/gestures/createPanGesture.doc.mjs +145 -0
- package/src/gestures/createPanGesture.ts +107 -0
- package/src/hooks/index.ts +8 -0
- package/src/hooks/useOverflow.ts +25 -3
- package/src/hooks/usePanGesture.doc.mjs +159 -0
- package/src/hooks/usePanGesture.ts +69 -0
- package/src/index.ts +2 -0
- package/src/internal/touch.ts +16 -8
- package/src/motion/README.md +3 -3
- package/src/motion/animator.ts +7 -7
- package/src/motion/themeTiming.ts +198 -0
- package/src/utils/focusReturn.ts +61 -15
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAuBH,OAAO,EAOL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,WAAW,CAAC;AAC7C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAuBH,OAAO,EAOL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,WAAW,CAAC;AAC7C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AA4DhD,YAAY,EAAC,iBAAiB,EAAE,oBAAoB,EAAC,MAAM,oBAAoB,CAAC;AAChF,OAAO,KAAK,EAAC,iBAAiB,EAAE,oBAAoB,EAAC,MAAM,oBAAoB,CAAC;AAmLhF,UAAU,sBAAuB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAChE,qDAAqD;IACrD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IAEd,0EAA0E;IAC1E,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB,wGAAwG;IACxG,MAAM,CAAC,EAAE,iBAAiB,GAAG,MAAM,GAAG,MAAM,CAAC;IAE7C;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,aAAa,CAAC,oBAAoB,CAAC,CAAC;IAEjD;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB;AAED,UAAU,0BAA2B,SAAQ,sBAAsB;IACjE,MAAM,EAAE,OAAO,CAAC;IAChB,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC9C,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,UAAU,wBAAyB,SAAQ,sBAAsB;IAC/D;;;;OAIG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB;AAED,MAAM,MAAM,gBAAgB,GAC1B,0BAA0B,GAAG,wBAAwB,CAAC;AA27BxD;;;GAGG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,+BA6BlD;yBA7Be,WAAW"}
|
|
@@ -65,7 +65,7 @@ import { ModalAnnounceProvider } from "../hooks/ModalAnnounceProvider.js";
|
|
|
65
65
|
import { useModalOutlet } from "../Layer/modalOutlet.js";
|
|
66
66
|
import { useLayerDismissal } from "../Layer/useLayerDismissal.js";
|
|
67
67
|
import { useFocusRegionContainment } from "../hooks/useFocusTrap.js";
|
|
68
|
-
import { returnFocusForLastInput } from "../utils/focusReturn.js";
|
|
68
|
+
import { prepareFocusRepairOnRemoval, returnFocusForLastInput } from "../utils/focusReturn.js";
|
|
69
69
|
import { useInteractionModalityTracking } from "../utils/interactionModality.js";
|
|
70
70
|
import { BottomSheetPanel } from "./BottomSheetPanel.js";
|
|
71
71
|
import { BottomSheetEdgeTint } from "./BottomSheetEdgeTint.js";
|
|
@@ -387,7 +387,14 @@ function StandaloneBottomSheet({
|
|
|
387
387
|
return;
|
|
388
388
|
}
|
|
389
389
|
const key = stackKeyRef.current;
|
|
390
|
-
|
|
390
|
+
const dialog = dialogRef.current;
|
|
391
|
+
// Removing an open dialog runs no close, so focus would drop to the page.
|
|
392
|
+
// After the commit, the repair sends focus where a close would, if the
|
|
393
|
+
// removal lost focus.
|
|
394
|
+
const repairOnRemoval = dialog == null ? null : prepareFocusRepairOnRemoval(dialog, {
|
|
395
|
+
keepRestingFocus: true
|
|
396
|
+
});
|
|
397
|
+
const leave = registerBottomSheet({
|
|
391
398
|
key,
|
|
392
399
|
getElement: () => dialogRef.current,
|
|
393
400
|
show: () => {
|
|
@@ -437,6 +444,28 @@ function StandaloneBottomSheet({
|
|
|
437
444
|
}
|
|
438
445
|
}
|
|
439
446
|
}, isOpenRef.current, hasScrim);
|
|
447
|
+
return () => {
|
|
448
|
+
// Read before the registry lets go of the sheet beneath. Focus the
|
|
449
|
+
// person had already moved out of the sheet to the page body stays
|
|
450
|
+
// there: the removal did not lose it.
|
|
451
|
+
if (repairOnRemoval != null && isSheetHostPresented(dialog)) {
|
|
452
|
+
const returnTarget = finalFocusRefRef.current?.current ?? triggerRef.current;
|
|
453
|
+
const revealed = hasScrim ? getBottomSheetBeneath(key) : null;
|
|
454
|
+
repairOnRemoval(() => {
|
|
455
|
+
// The sheet beneath left too. Its own repair returns focus for the
|
|
456
|
+
// stack.
|
|
457
|
+
if (revealed != null && !revealed.element.isConnected) {
|
|
458
|
+
return;
|
|
459
|
+
}
|
|
460
|
+
if (revealed != null && (returnTarget == null || !revealed.element.contains(returnTarget))) {
|
|
461
|
+
revealed.focus();
|
|
462
|
+
} else if (returnTarget != null && returnTarget.isConnected) {
|
|
463
|
+
returnFocusForLastInput(returnTarget);
|
|
464
|
+
}
|
|
465
|
+
});
|
|
466
|
+
}
|
|
467
|
+
leave();
|
|
468
|
+
};
|
|
440
469
|
}, [hasScrim, shouldPresent, writeScrim]);
|
|
441
470
|
useLayoutEffect(() => {
|
|
442
471
|
if (!isOpen) {
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
*/
|
|
17
17
|
|
|
18
18
|
import { canVibrate, playHaptic } from "../gestures/haptics.js";
|
|
19
|
-
import {
|
|
19
|
+
import { createMotionEngine } from "../motion/animator.js";
|
|
20
20
|
import { reducedMotionFade } from "../motion/reducedMotion.js";
|
|
21
21
|
import { picker } from "../motion/uikit/picker.js";
|
|
22
22
|
import { nearestIndex, reachesRow, tickTimes } from "./wheelPhysics.js";
|
|
@@ -55,7 +55,7 @@ function now() {
|
|
|
55
55
|
* ```
|
|
56
56
|
*/
|
|
57
57
|
export function createWheelStrip(initialLayout) {
|
|
58
|
-
const animator =
|
|
58
|
+
const animator = createMotionEngine(null);
|
|
59
59
|
let layout = initialLayout;
|
|
60
60
|
let running = null;
|
|
61
61
|
let nearestListener = null;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../src/Drawer/Drawer.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDG;AAEH,OAAO,EAAgC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAIpE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAQ5C,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../src/Drawer/Drawer.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDG;AAEH,OAAO,EAAgC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAIpE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAQ5C,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,WAAW,CAAC;AAsB7C,OAAO,KAAK,EAAC,WAAW,EAAe,MAAM,WAAW,CAAC;AA+MzD,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC/D,iDAAiD;IACjD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAEnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;;OAMG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAExC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAEvB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;;;OAKG;IACH,YAAY,CAAC,EAAE;QACb;;;;;;WAMG;QACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;KAC/B,CAAC;IAEF;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EAAE,UAAU,EAClB,YAAY,EACZ,IAAY,EACZ,KAAW,EACX,YAAY,EACZ,KAAK,EACL,QAAe,EACf,OAAgB,EAChB,OAAO,EACP,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,+BAsNb;yBAxOe,MAAM"}
|
package/dist/Drawer/Drawer.js
CHANGED
|
@@ -64,7 +64,9 @@ import { useSettledOpen } from "../hooks/useSettledOpen.js";
|
|
|
64
64
|
import * as stylex from '@stylexjs/stylex';
|
|
65
65
|
import "../theme/tokens.stylex.js";
|
|
66
66
|
import { borderVars, colorVars, durationVars, easeVars, shadowVars } from "../theme/tokens.stylex.js";
|
|
67
|
-
import { useFocusTrap
|
|
67
|
+
import { useFocusTrap } from "../hooks/useFocusTrap.js";
|
|
68
|
+
import { useMergedRefs } from "../hooks/useMergedRefs.js";
|
|
69
|
+
import { useScrollLock } from "../hooks/useScrollLock.js";
|
|
68
70
|
import { LayerDepthProvider, useLayerDismissal } from "../Layer/index.js";
|
|
69
71
|
import { layerTextReset } from "../Layer/layerTextReset.stylex.js";
|
|
70
72
|
import { layerStructureReset } from "../Layer/layerStructureReset.stylex.js";
|
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
*
|
|
7
7
|
* SYNC: When modified, update these files to stay in sync:
|
|
8
8
|
* - /packages/core/src/InputGroup/InputGroup.doc.mjs
|
|
9
|
+
* - /packages/core/src/InputGroup/InputGroupText.doc.mjs
|
|
9
10
|
* - /packages/core/src/InputGroup/index.ts
|
|
10
11
|
* - /packages/cli/assets/templates/blocks/components/InputGroup/
|
|
11
12
|
*/
|
|
@@ -24,7 +25,7 @@ export interface InputGroupTextProps extends BaseProps<HTMLDivElement> {
|
|
|
24
25
|
*
|
|
25
26
|
* @example
|
|
26
27
|
* ```
|
|
27
|
-
* <InputGroup label="
|
|
28
|
+
* <InputGroup label="Website">
|
|
28
29
|
* <InputGroupText>https://</InputGroupText>
|
|
29
30
|
* <TextInput label="URL" isLabelHidden value={url} onChange={setUrl} />
|
|
30
31
|
* </InputGroup>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputGroupText.d.ts","sourceRoot":"","sources":["../../src/InputGroup/InputGroupText.tsx"],"names":[],"mappings":"AAIA
|
|
1
|
+
{"version":3,"file":"InputGroupText.d.ts","sourceRoot":"","sources":["../../src/InputGroup/InputGroupText.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAmD5C,MAAM,WAAW,mBAAoB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACpE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,cAAc,CAAC,EAC7B,GAAG,EACH,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,mBAAmB,qBAerB;yBAtBe,cAAc"}
|
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
*
|
|
11
11
|
* SYNC: When modified, update these files to stay in sync:
|
|
12
12
|
* - /packages/core/src/InputGroup/InputGroup.doc.mjs
|
|
13
|
+
* - /packages/core/src/InputGroup/InputGroupText.doc.mjs
|
|
13
14
|
* - /packages/core/src/InputGroup/index.ts
|
|
14
15
|
* - /packages/cli/assets/templates/blocks/components/InputGroup/
|
|
15
16
|
*/
|
|
@@ -49,7 +50,7 @@ const styles = {
|
|
|
49
50
|
*
|
|
50
51
|
* @example
|
|
51
52
|
* ```
|
|
52
|
-
* <InputGroup label="
|
|
53
|
+
* <InputGroup label="Website">
|
|
53
54
|
* <InputGroupText>https://</InputGroupText>
|
|
54
55
|
* <TextInput label="URL" isLabelHidden value={url} onChange={setUrl} />
|
|
55
56
|
* </InputGroup>
|
package/dist/Item/Item.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../src/Item/Item.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../src/Item/Item.tsx"],"names":[],"mappings":"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"}
|
package/dist/Item/Item.js
CHANGED
|
@@ -589,7 +589,10 @@ export function Item({
|
|
|
589
589
|
...(isInteractive ? pressable : undefined),
|
|
590
590
|
...mergeProps(themeProps('item', {
|
|
591
591
|
density,
|
|
592
|
-
align
|
|
592
|
+
align,
|
|
593
|
+
highlighted: isHighlighted ? 'highlighted' : null,
|
|
594
|
+
selected: isSelected ? 'selected' : null,
|
|
595
|
+
disabled: isDisabled ? 'disabled' : null
|
|
593
596
|
}), focusOutlineProps.focusWithin(styles.root, densityStyles[density], align === 'start' && styles.alignStart, align === 'first-line' && styles.alignFirstLine, isInteractive && styles.interactive, isInteractive && interactionOverlayStyles.backgroundColor,
|
|
594
597
|
// The touch press on a compositor layer (after the overlay, whose
|
|
595
598
|
// own touch paint it turns off): the release keeps fading while
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LayoutPanel.d.ts","sourceRoot":"","sources":["../../src/Layout/LayoutPanel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAC,QAAQ,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAS5C,OAAO,KAAK,EAAC,SAAS,EAAE,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAC3D,OAAO,EAEL,KAAK,cAAc,EACnB,KAAK,eAAe,EACrB,MAAM,2BAA2B,CAAC;
|
|
1
|
+
{"version":3,"file":"LayoutPanel.d.ts","sourceRoot":"","sources":["../../src/Layout/LayoutPanel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAC,QAAQ,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAS5C,OAAO,KAAK,EAAC,SAAS,EAAE,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAC3D,OAAO,EAEL,KAAK,cAAc,EACnB,KAAK,eAAe,EACrB,MAAM,2BAA2B,CAAC;AAmGnC,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACjE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;;;;;OASG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;;;;;;;;;;;OAaG;IACH,SAAS,CAAC,EAAE,eAAe,GAAG,cAAc,CAAC;CAC9C;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,UAAkB,EAClB,YAAmB,EACnB,KAAK,EACL,OAAO,EACP,IAAI,EACJ,KAAK,EACL,SAAS,EAAE,cAAc,EACzB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,gBAAgB,+BA0IlB;yBAxJe,WAAW"}
|
|
@@ -79,6 +79,12 @@ const styles = {
|
|
|
79
79
|
kVQacm: "xysyzu8",
|
|
80
80
|
$$css: true
|
|
81
81
|
},
|
|
82
|
+
zeroWidth: {
|
|
83
|
+
kZCmMZ: "x1c1uobl",
|
|
84
|
+
kwRFfy: "xyri2b",
|
|
85
|
+
kVQacm: "x7giv3",
|
|
86
|
+
$$css: true
|
|
87
|
+
},
|
|
82
88
|
dividerEnd: {
|
|
83
89
|
ke9TFa: "x1lun4ml",
|
|
84
90
|
k8ry5P: "x18b5jzi",
|
|
@@ -205,11 +211,14 @@ export function LayoutPanel({
|
|
|
205
211
|
const isStartPanel = area === 'start';
|
|
206
212
|
const isEndPanel = area === 'end';
|
|
207
213
|
const isZeroPadding = padding === 0;
|
|
214
|
+
// A collapsed region sizes its panel to 0.
|
|
215
|
+
const isZeroWidth = effectiveWidth === 0;
|
|
208
216
|
|
|
209
217
|
// When no divider, collapse spacing for seamless visual flow
|
|
210
|
-
const shouldCollapseSpacing = !hasDivider && !isZeroPadding && padding == null;
|
|
218
|
+
const shouldCollapseSpacing = !hasDivider && !isZeroPadding && padding == null && !isZeroWidth;
|
|
219
|
+
// At width 0 the panel clips its content, so it does not scroll.
|
|
211
220
|
const region = useScrollRegionProps({
|
|
212
|
-
isScrollable,
|
|
221
|
+
isScrollable: isScrollable && !isZeroWidth,
|
|
213
222
|
role,
|
|
214
223
|
label
|
|
215
224
|
});
|
|
@@ -226,7 +235,7 @@ export function LayoutPanel({
|
|
|
226
235
|
"aria-label": region['aria-label'],
|
|
227
236
|
...mergeProps(themeProps('layout-panel'), stylex.props(styles.panel, dynamicStyles.sizing(effectiveWidth ?? null),
|
|
228
237
|
// Outer padding on container edges (unless component is full bleed)
|
|
229
|
-
isStartPanel && !isZeroPadding && padding == null && styles.startPanel, isEndPanel && !isZeroPadding && padding == null && styles.endPanel, !hasHeader && !isZeroPadding && padding == null && styles.noHeader, !hasFooter && !isZeroPadding && padding == null && styles.noFooter, isScrollable && styles.scrollable, isZeroPadding && styles.fullBleed, padding != null && paddingStyles[padding], padding != null && containerPaddingInlineVarStyles[padding], padding != null && containerPaddingBlockStartVarStyles[padding], padding != null && containerPaddingBlockEndVarStyles[padding], hasDivider && dividerStyle, shouldCollapseSpacing && collapseStyle, xstyle), className, style),
|
|
238
|
+
isStartPanel && !isZeroPadding && padding == null && styles.startPanel, isEndPanel && !isZeroPadding && padding == null && styles.endPanel, !hasHeader && !isZeroPadding && padding == null && styles.noHeader, !hasFooter && !isZeroPadding && padding == null && styles.noFooter, isScrollable && styles.scrollable, isZeroPadding && styles.fullBleed, padding != null && paddingStyles[padding], padding != null && containerPaddingInlineVarStyles[padding], padding != null && containerPaddingBlockStartVarStyles[padding], padding != null && containerPaddingBlockEndVarStyles[padding], hasDivider && dividerStyle, shouldCollapseSpacing && collapseStyle, isZeroWidth && styles.zeroWidth, xstyle), className, style),
|
|
230
239
|
...props,
|
|
231
240
|
...(isConcealed ? {
|
|
232
241
|
inert: true,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OverflowList.d.ts","sourceRoot":"","sources":["../../src/OverflowList/OverflowList.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EACL,KAAK,SAAS,EACd,KAAK,YAAY,EAKlB,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAgFhD,MAAM,WAAW,YAAY;IAC3B,sCAAsC;IACtC,KAAK,EAAE,YAAY,CAAC;IACpB,2DAA2D;IAC3D,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,iBAAkB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAClE,qDAAqD;IACrD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;OAIG;IACH,GAAG,CAAC,EAAE,WAAW,CAAC;IAElB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAE/B;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,eAAe,GAAG,aAAa,CAAC;IAE3C;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,gBAAgB,CAAC,EAAE,CAAC,aAAa,EAAE,YAAY,EAAE,KAAK,SAAS,CAAC;IAEhE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAsCG;IACH,gBAAgB,CAAC,EAAE,CAAC,aAAa,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;CAC5D;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,GAAO,EACP,eAAmB,EACnB,eAAe,EACf,OAAO,EACP,YAAoB,EACpB,QAAwB,EACxB,gBAAgB,EAChB,gBAAgB,EAChB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,iBAAiB,+
|
|
1
|
+
{"version":3,"file":"OverflowList.d.ts","sourceRoot":"","sources":["../../src/OverflowList/OverflowList.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EACL,KAAK,SAAS,EACd,KAAK,YAAY,EAKlB,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAgFhD,MAAM,WAAW,YAAY;IAC3B,sCAAsC;IACtC,KAAK,EAAE,YAAY,CAAC;IACpB,2DAA2D;IAC3D,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,iBAAkB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAClE,qDAAqD;IACrD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;OAIG;IACH,GAAG,CAAC,EAAE,WAAW,CAAC;IAElB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAE/B;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,eAAe,GAAG,aAAa,CAAC;IAE3C;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,gBAAgB,CAAC,EAAE,CAAC,aAAa,EAAE,YAAY,EAAE,KAAK,SAAS,CAAC;IAEhE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAsCG;IACH,gBAAgB,CAAC,EAAE,CAAC,aAAa,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;CAC5D;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,GAAO,EACP,eAAmB,EACnB,eAAe,EACf,OAAO,EACP,YAAoB,EACpB,QAAwB,EACxB,gBAAgB,EAChB,gBAAgB,EAChB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,iBAAiB,+BA4InB;yBA3Je,YAAY"}
|
|
@@ -21,7 +21,7 @@ import { Children, useCallback, useRef, useState } from 'react';
|
|
|
21
21
|
import { isRenderable } from "../utils/isRenderable.js";
|
|
22
22
|
import * as stylex from '@stylexjs/stylex';
|
|
23
23
|
import { mergeProps } from "../utils/index.js";
|
|
24
|
-
import {
|
|
24
|
+
import { useOverflowInternal } from "../hooks/useOverflow.js";
|
|
25
25
|
import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js";
|
|
26
26
|
import "../theme/tokens.stylex.js";
|
|
27
27
|
import { spacingVars } from "../theme/tokens.stylex.js";
|
|
@@ -176,19 +176,24 @@ export function OverflowList({
|
|
|
176
176
|
const gapPx = spacingToPx[gap];
|
|
177
177
|
const observeParent = behavior === 'observeParent';
|
|
178
178
|
const isMultiRow = maxRows != null && maxRows > 1;
|
|
179
|
+
|
|
180
|
+
// Only the multi-row path renders from `rowHeight` (it caps the
|
|
181
|
+
// container's height), so only that path tracks it.
|
|
179
182
|
const {
|
|
180
183
|
containerRef,
|
|
181
184
|
measureRef,
|
|
182
185
|
visibleCount,
|
|
183
186
|
hasOverflow,
|
|
184
187
|
rowHeight
|
|
185
|
-
} =
|
|
188
|
+
} = useOverflowInternal(itemCount, {
|
|
186
189
|
gap: gapPx,
|
|
187
190
|
minVisibleItems,
|
|
188
191
|
maxVisibleItems,
|
|
189
192
|
maxRows,
|
|
190
193
|
collapseFrom,
|
|
191
194
|
behavior
|
|
195
|
+
}, {
|
|
196
|
+
tracksRows: isMultiRow
|
|
192
197
|
});
|
|
193
198
|
const allItems = childArray.map((child, index) => ({
|
|
194
199
|
child,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSegmentedSelectionMotion.d.ts","sourceRoot":"","sources":["../../src/SegmentedControl/useSegmentedSelectionMotion.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAKL,KAAK,WAAW,EAChB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAGL,KAAK,QAAQ,
|
|
1
|
+
{"version":3,"file":"useSegmentedSelectionMotion.d.ts","sourceRoot":"","sources":["../../src/SegmentedControl/useSegmentedSelectionMotion.ts"],"names":[],"mappings":"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"}
|
|
@@ -16,14 +16,14 @@
|
|
|
16
16
|
* - /packages/core/src/SegmentedControl/useSegmentedTouchTracking.ts
|
|
17
17
|
*/
|
|
18
18
|
import { useCallback, useEffect, useRef, useState } from 'react';
|
|
19
|
-
import {
|
|
19
|
+
import { createMotionEngine } from "../motion/animator.js";
|
|
20
20
|
import { registerSegmentedTable, segmentedControl } from "../motion/uikit/segmented.js";
|
|
21
21
|
import { registerSpringsTable, springs } from "../motion/uikit/springs.js";
|
|
22
22
|
import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js";
|
|
23
23
|
import { observeResize } from "../utils/sharedResizeObserver.js";
|
|
24
24
|
import { titleOfSegment } from "../privateAttributes/segmentTitle.stylex.js";
|
|
25
|
-
import {
|
|
26
|
-
import {
|
|
25
|
+
import { mapProgress, mapRange } from "../motion/progress.js";
|
|
26
|
+
import { easedProgress, readThemeTiming } from "../motion/themeTiming.js";
|
|
27
27
|
import { useSegmentedTouchTracking } from "./useSegmentedTouchTracking.js";
|
|
28
28
|
|
|
29
29
|
/** The segments, in DOM order. */
|
|
@@ -201,54 +201,8 @@ function isEnabledSegment(segment) {
|
|
|
201
201
|
}
|
|
202
202
|
const titleOf = titleOfSegment;
|
|
203
203
|
|
|
204
|
-
/** The theme's timing: a duration in seconds and its easing. */
|
|
205
|
-
|
|
206
|
-
/**
|
|
207
|
-
* The timing of `segment`'s own transition, which reads the theme's duration
|
|
208
|
-
* and easing tokens. The values stay readable while a carry turns the
|
|
209
|
-
* transition's property off. Null when the theme gives no duration.
|
|
210
|
-
*/
|
|
211
|
-
function themeTimingOf(segment) {
|
|
212
|
-
const view = segment.ownerDocument.defaultView;
|
|
213
|
-
if (view == null) {
|
|
214
|
-
return null;
|
|
215
|
-
}
|
|
216
|
-
const style = view.getComputedStyle(segment);
|
|
217
|
-
const ms = parseMotionRoleValue('duration', style.transitionDuration.split(',')[0] ?? '');
|
|
218
|
-
const points = parseCssEasing(style.transitionTimingFunction.split(/,(?![^(]*\))/)[0] ?? '');
|
|
219
|
-
if (ms == null || ms <= 0 || points == null) {
|
|
220
|
-
return null;
|
|
221
|
-
}
|
|
222
|
-
return {
|
|
223
|
-
seconds: ms / 1000,
|
|
224
|
-
ease: cubicBezier(points)
|
|
225
|
-
};
|
|
226
|
-
}
|
|
227
|
-
|
|
228
204
|
/** A theme that gives the segments no transition: the lens lands at once. */
|
|
229
|
-
const INSTANT =
|
|
230
|
-
seconds: 0.001,
|
|
231
|
-
ease: progress => progress
|
|
232
|
-
};
|
|
233
|
-
|
|
234
|
-
/** A curve from `from` to `to` on `timing`. */
|
|
235
|
-
function timedCurve(from, to, timing) {
|
|
236
|
-
const {
|
|
237
|
-
seconds,
|
|
238
|
-
ease
|
|
239
|
-
} = timing;
|
|
240
|
-
const at = t => from + (to - from) * ease(Math.min(1, Math.max(0, t / seconds)));
|
|
241
|
-
const step = Math.min(seconds / 100, 0.001);
|
|
242
|
-
return {
|
|
243
|
-
duration: seconds,
|
|
244
|
-
at,
|
|
245
|
-
velocity: t => {
|
|
246
|
-
const before = Math.max(0, t - step);
|
|
247
|
-
const after = Math.min(seconds, t + step);
|
|
248
|
-
return (at(after) - at(before)) / (after - before);
|
|
249
|
-
}
|
|
250
|
-
};
|
|
251
|
-
}
|
|
205
|
+
const INSTANT = easedProgress(0.001, progress => progress);
|
|
252
206
|
|
|
253
207
|
/** What the control reads of its selection motion. */
|
|
254
208
|
|
|
@@ -361,7 +315,7 @@ export class SegmentedSelectionMotion {
|
|
|
361
315
|
|
|
362
316
|
/** The ::after: the surface fading out under Reduced Motion. */
|
|
363
317
|
|
|
364
|
-
constructor(animator =
|
|
318
|
+
constructor(animator = createMotionEngine(null, {
|
|
365
319
|
pseudoElement: '::before'
|
|
366
320
|
}), options = {}) {
|
|
367
321
|
this.animator = animator;
|
|
@@ -371,7 +325,7 @@ export class SegmentedSelectionMotion {
|
|
|
371
325
|
registerSpringsTable();
|
|
372
326
|
registerSegmentedTable();
|
|
373
327
|
this.now = options.now ?? defaultNow;
|
|
374
|
-
this.after = options.afterAnimator ??
|
|
328
|
+
this.after = options.afterAnimator ?? createMotionEngine(null, {
|
|
375
329
|
pseudoElement: '::after',
|
|
376
330
|
initial: {
|
|
377
331
|
opacity: 0
|
|
@@ -1037,12 +991,18 @@ export class SegmentedSelectionMotion {
|
|
|
1037
991
|
return;
|
|
1038
992
|
}
|
|
1039
993
|
this.velocity = {};
|
|
1040
|
-
|
|
994
|
+
// The segment's own transition carries the theme's duration and easing.
|
|
995
|
+
// They stay readable while a carry turns its property off.
|
|
996
|
+
const progress = readThemeTiming(segment) ?? INSTANT;
|
|
1041
997
|
const at = options.at;
|
|
998
|
+
// Unclamped, so an easing that overshoots carries the lens with it.
|
|
999
|
+
const toward = (from, to) => mapProgress(progress, mapRange([0, 1], [from, to], {
|
|
1000
|
+
clamp: false
|
|
1001
|
+
}));
|
|
1042
1002
|
this.trackHandle(this.animator.play({
|
|
1043
|
-
x:
|
|
1044
|
-
scaleX:
|
|
1045
|
-
scaleY:
|
|
1003
|
+
x: toward(this.animator.get('x', at), 0),
|
|
1004
|
+
scaleX: toward(this.animator.get('scaleX', at), 1),
|
|
1005
|
+
scaleY: toward(this.animator.get('scaleY', at), 1)
|
|
1046
1006
|
}, options));
|
|
1047
1007
|
}
|
|
1048
1008
|
|
|
@@ -21,7 +21,7 @@ import { PRESS_PROFILES, createPressTracker } from "../gestures/PressTracker.js"
|
|
|
21
21
|
import { lockSelection } from "../gestures/selectionLock.js";
|
|
22
22
|
import { TapGestureRecognizer } from "../gestures/TapGestureRecognizer.js";
|
|
23
23
|
import { isRtlElement } from "../hooks/isRtlElement.js";
|
|
24
|
-
import {
|
|
24
|
+
import { createMotionEngine } from "../motion/animator.js";
|
|
25
25
|
import { projectDistance } from "../motion/projection.js";
|
|
26
26
|
import { resolveMotion } from "../motion/resolveMotion.js";
|
|
27
27
|
import { solveSpring, toSpring } from "../motion/spring.js";
|
|
@@ -995,7 +995,7 @@ export class SliderTouchController {
|
|
|
995
995
|
animatorFor(element) {
|
|
996
996
|
let animator = this.animators.get(element);
|
|
997
997
|
if (animator == null) {
|
|
998
|
-
animator =
|
|
998
|
+
animator = createMotionEngine(element);
|
|
999
999
|
this.animators.set(element, animator);
|
|
1000
1000
|
}
|
|
1001
1001
|
return animator;
|
|
@@ -20,7 +20,7 @@ import { getGestureHost } from "../gestures/GestureHost.js";
|
|
|
20
20
|
import { createPressTracker } from "../gestures/PressTracker.js";
|
|
21
21
|
import { isRtlElement } from "../hooks/isRtlElement.js";
|
|
22
22
|
import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js";
|
|
23
|
-
import {
|
|
23
|
+
import { createMotionEngine } from "../motion/animator.js";
|
|
24
24
|
import { solveSpring, toSpring } from "../motion/spring.js";
|
|
25
25
|
import { UIKIT_GESTURES } from "../motion/uikit/gestures.js";
|
|
26
26
|
import { registerSwitchTable, switchControl } from "../motion/uikit/switch.js";
|
|
@@ -203,10 +203,10 @@ export class SwitchTouchController {
|
|
|
203
203
|
return;
|
|
204
204
|
}
|
|
205
205
|
registerSwitchTable();
|
|
206
|
-
this.thumb =
|
|
206
|
+
this.thumb = createMotionEngine(elements.thumb);
|
|
207
207
|
// The layer rests clear (its class's opacity 0) while the visuals show
|
|
208
208
|
// the value; from here its opacity is the animator's.
|
|
209
|
-
this.fade =
|
|
209
|
+
this.fade = createMotionEngine(elements.track, {
|
|
210
210
|
pseudoElement: '::after',
|
|
211
211
|
initial: {
|
|
212
212
|
opacity: 0
|
|
@@ -215,7 +215,7 @@ export class SwitchTouchController {
|
|
|
215
215
|
this.fade.set({
|
|
216
216
|
opacity: 0
|
|
217
217
|
});
|
|
218
|
-
this.shadow =
|
|
218
|
+
this.shadow = createMotionEngine(elements.thumb, {
|
|
219
219
|
pseudoElement: '::after',
|
|
220
220
|
initial: {
|
|
221
221
|
opacity: 0
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
* - /packages/core/src/animator/createAnimator.doc.mjs
|
|
17
17
|
* - /packages/core/src/hooks/useAnimator.ts
|
|
18
18
|
*/
|
|
19
|
-
import {
|
|
19
|
+
import { createMotionEngine, SETTLE_THRESHOLD } from "../motion/animator.js";
|
|
20
20
|
import { coast } from "../motion/coast.js";
|
|
21
21
|
import { solveDecay } from "../motion/decay.js";
|
|
22
22
|
import { registerSpringsTable, springs } from "../motion/uikit/springs.js";
|
|
@@ -125,7 +125,7 @@ async function settledOrTakenOver(moving) {
|
|
|
125
125
|
* no behavior of its own. Not exported from the package.
|
|
126
126
|
*/
|
|
127
127
|
export function createAttachableAnimator() {
|
|
128
|
-
const motion =
|
|
128
|
+
const motion = createMotionEngine(null);
|
|
129
129
|
// Calls do nothing while no element is attached, before the ref attaches
|
|
130
130
|
// or after it lets go. They also do nothing after destroy, and animate and
|
|
131
131
|
// decay then resolve at once.
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
/** Where a drag is: it began, moved, ended at the release, or was cancelled. */
|
|
2
|
+
export type PanGestureState = 'began' | 'changed' | 'ended' | 'cancelled';
|
|
3
|
+
export interface PanGestureEvent {
|
|
4
|
+
state: PanGestureState;
|
|
5
|
+
/**
|
|
6
|
+
* Movement since the drag began, in CSS px. The travel the drag needed to
|
|
7
|
+
* begin is not part of it, so an element that follows it does not jump.
|
|
8
|
+
*/
|
|
9
|
+
translation: {
|
|
10
|
+
x: number;
|
|
11
|
+
y: number;
|
|
12
|
+
};
|
|
13
|
+
/**
|
|
14
|
+
* Velocity in px/s. At `ended` it is the release velocity, 0 when the
|
|
15
|
+
* finger rested before lifting; at `cancelled` it is 0.
|
|
16
|
+
*/
|
|
17
|
+
velocity: {
|
|
18
|
+
x: number;
|
|
19
|
+
y: number;
|
|
20
|
+
};
|
|
21
|
+
}
|
|
22
|
+
export interface PanGestureOptions {
|
|
23
|
+
/** Limit the drag to one axis: a drag along the other is not reported, and that component reads 0. */
|
|
24
|
+
axis?: 'x' | 'y';
|
|
25
|
+
/** Called as the drag begins, changes, ends, or is cancelled. */
|
|
26
|
+
onPan: (event: PanGestureEvent) => void;
|
|
27
|
+
}
|
|
28
|
+
export interface PanGesture {
|
|
29
|
+
/** Remove every listener the pan added; a drag in progress is cancelled. */
|
|
30
|
+
destroy(): void;
|
|
31
|
+
}
|
|
32
|
+
/**
|
|
33
|
+
* Report drags on `element` as values. The drag claims its touch at UIKit's
|
|
34
|
+
* 10 pt, as `UIPanGestureRecognizer` does, so a tap stays a tap. The pan sets
|
|
35
|
+
* the element's `touch-action` for the axis.
|
|
36
|
+
* @example
|
|
37
|
+
* ```
|
|
38
|
+
* const pan = createPanGesture(card, {
|
|
39
|
+
* axis: 'x',
|
|
40
|
+
* onPan: ({state, translation}) => {
|
|
41
|
+
* card.style.translate = state === 'changed' ? `${translation.x}px` : '';
|
|
42
|
+
* },
|
|
43
|
+
* });
|
|
44
|
+
* // Later:
|
|
45
|
+
* pan.destroy();
|
|
46
|
+
* ```
|
|
47
|
+
*/
|
|
48
|
+
export declare function createPanGesture(element: Element, options: PanGestureOptions): PanGesture;
|
|
49
|
+
//# sourceMappingURL=createPanGesture.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"createPanGesture.d.ts","sourceRoot":"","sources":["../../src/gestures/createPanGesture.ts"],"names":[],"mappings":"AAiBA,gFAAgF;AAChF,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,WAAW,CAAC;AAE1E,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,eAAe,CAAC;IACvB;;;OAGG;IACH,WAAW,EAAE;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAC,CAAC;IACpC;;;OAGG;IACH,QAAQ,EAAE;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAC,CAAC;CAClC;AAED,MAAM,WAAW,iBAAiB;IAChC,sGAAsG;IACtG,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB,iEAAiE;IACjE,KAAK,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;CACzC;AAED,MAAM,WAAW,UAAU;IACzB,4EAA4E;IAC5E,OAAO,IAAI,IAAI,CAAC;CACjB;AAID;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,gBAAgB,CAC9B,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,iBAAiB,GACzB,UAAU,CAuCZ"}
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* @file createPanGesture.ts
|
|
5
|
+
* @input An element and a pan listener
|
|
6
|
+
* @output Exports createPanGesture and its types: the public pan factory
|
|
7
|
+
* @position Public face of packages/core/src/gestures. It reports a drag as
|
|
8
|
+
* values and hands out no recognizer; `usePanGesture` is its React layer.
|
|
9
|
+
* Importing it does no DOM work.
|
|
10
|
+
* SYNC: When modified, update ../hooks/usePanGesture.ts, its .doc.mjs and
|
|
11
|
+
* __tests__/createPanGesture.test.tsx.
|
|
12
|
+
*/
|
|
13
|
+
|
|
14
|
+
import { getGestureHost } from "./GestureHost.js";
|
|
15
|
+
import { PanGestureRecognizer } from "./PanGestureRecognizer.js";
|
|
16
|
+
|
|
17
|
+
/** Where a drag is: it began, moved, ended at the release, or was cancelled. */
|
|
18
|
+
|
|
19
|
+
const ZERO = {
|
|
20
|
+
x: 0,
|
|
21
|
+
y: 0
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
/**
|
|
25
|
+
* Report drags on `element` as values. The drag claims its touch at UIKit's
|
|
26
|
+
* 10 pt, as `UIPanGestureRecognizer` does, so a tap stays a tap. The pan sets
|
|
27
|
+
* the element's `touch-action` for the axis.
|
|
28
|
+
* @example
|
|
29
|
+
* ```
|
|
30
|
+
* const pan = createPanGesture(card, {
|
|
31
|
+
* axis: 'x',
|
|
32
|
+
* onPan: ({state, translation}) => {
|
|
33
|
+
* card.style.translate = state === 'changed' ? `${translation.x}px` : '';
|
|
34
|
+
* },
|
|
35
|
+
* });
|
|
36
|
+
* // Later:
|
|
37
|
+
* pan.destroy();
|
|
38
|
+
* ```
|
|
39
|
+
*/
|
|
40
|
+
export function createPanGesture(element, options) {
|
|
41
|
+
const {
|
|
42
|
+
axis,
|
|
43
|
+
onPan
|
|
44
|
+
} = options;
|
|
45
|
+
const recognizer = new PanGestureRecognizer({
|
|
46
|
+
name: 'pan',
|
|
47
|
+
direction: axis === 'x' ? 'horizontal' : axis === 'y' ? 'vertical' : 'any'
|
|
48
|
+
});
|
|
49
|
+
const along = point => axis === 'x' ? {
|
|
50
|
+
x: point.x,
|
|
51
|
+
y: 0
|
|
52
|
+
} : axis === 'y' ? {
|
|
53
|
+
x: 0,
|
|
54
|
+
y: point.y
|
|
55
|
+
} : {
|
|
56
|
+
x: point.x,
|
|
57
|
+
y: point.y
|
|
58
|
+
};
|
|
59
|
+
recognizer.addListener(() => {
|
|
60
|
+
const state = recognizer.state;
|
|
61
|
+
if (state !== 'began' && state !== 'changed' && state !== 'ended' && state !== 'cancelled') {
|
|
62
|
+
return;
|
|
63
|
+
}
|
|
64
|
+
onPan({
|
|
65
|
+
state,
|
|
66
|
+
translation: along(recognizer.translation()),
|
|
67
|
+
velocity: state === 'cancelled' ? {
|
|
68
|
+
...ZERO
|
|
69
|
+
} : along(recognizer.velocity())
|
|
70
|
+
});
|
|
71
|
+
});
|
|
72
|
+
let detach = getGestureHost(element.ownerDocument).attach(element, recognizer);
|
|
73
|
+
return {
|
|
74
|
+
destroy() {
|
|
75
|
+
const current = detach;
|
|
76
|
+
detach = null;
|
|
77
|
+
current?.();
|
|
78
|
+
}
|
|
79
|
+
};
|
|
80
|
+
}
|
package/dist/hooks/index.d.ts
CHANGED
|
@@ -61,4 +61,6 @@ export { useDevWarning } from './useDevWarning.js';
|
|
|
61
61
|
export { useIndicatorFocusRing } from './useIndicatorFocusRing.js';
|
|
62
62
|
export { useContainerReveal } from './useContainerReveal.js';
|
|
63
63
|
export type { UseContainerRevealOptions, UseContainerRevealReturn, ContainerRevealOptions, ContentRevealOptions, } from './useContainerReveal.js';
|
|
64
|
+
export { usePanGesture } from './usePanGesture.js';
|
|
65
|
+
export type { PanGesture, PanGestureEvent, PanGestureOptions, PanGestureState, } from '../gestures/createPanGesture.js';
|
|
64
66
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"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"}
|