@astryxdesign/core 0.4.6-canary.cea9ecd → 0.4.6-canary.f30c604
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 -7
- package/dist/BottomSheet/BottomSheetPanel.d.ts.map +1 -1
- package/dist/BottomSheet/BottomSheetPanel.js +1 -0
- package/dist/BottomSheet/BottomSheetSwitcher.d.ts.map +1 -1
- package/dist/BottomSheet/BottomSheetSwitcher.js +5 -1
- package/dist/BottomSheet/useSheetGestures.d.ts.map +1 -1
- package/dist/BottomSheet/useSheetGestures.js +23 -5
- package/dist/TabList/Tab.d.ts.map +1 -1
- package/dist/TabList/Tab.js +5 -1
- package/dist/astryx.css +2 -0
- package/package.json +2 -2
- package/src/BottomSheet/BottomSheet.tsx +15 -0
- package/src/BottomSheet/BottomSheetPanel.test.tsx +66 -0
- package/src/BottomSheet/BottomSheetPanel.tsx +19 -0
- package/src/BottomSheet/BottomSheetSwitcher.tsx +9 -0
- package/src/BottomSheet/useSheetGestures.test.ts +27 -0
- package/src/BottomSheet/useSheetGestures.ts +25 -5
- package/src/TabList/Tab.tsx +5 -1
- package/src/TabList/TabList.test.tsx +21 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,WAAW,CAAC;AAc7C,YAAY,EAAC,iBAAiB,EAAE,oBAAoB,EAAC,MAAM,oBAAoB,CAAC;AAChF,OAAO,KAAK,EAAC,iBAAiB,EAAE,oBAAoB,EAAC,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,WAAW,CAAC;AAc7C,YAAY,EAAC,iBAAiB,EAAE,oBAAoB,EAAC,MAAM,oBAAoB,CAAC;AAChF,OAAO,KAAK,EAAC,iBAAiB,EAAE,oBAAoB,EAAC,MAAM,oBAAoB,CAAC;AAyEhF,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,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,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,UAAU,wBAAyB,SAAQ,sBAAsB;IAC/D,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;AA6WxD;;;GAGG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,+BA6BlD;yBA7Be,WAAW"}
|
|
@@ -185,28 +185,52 @@ function StandaloneBottomSheet({
|
|
|
185
185
|
0: {
|
|
186
186
|
className: "xixxii4 x10a8y8t x1o6l61p xtdtrs8 x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1s85apg x1a2a7pz"
|
|
187
187
|
},
|
|
188
|
-
|
|
188
|
+
8: {
|
|
189
189
|
className: "xixxii4 x10a8y8t x1o6l61p xtdtrs8 x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1a2a7pz x1lliihq"
|
|
190
190
|
},
|
|
191
|
-
|
|
191
|
+
4: {
|
|
192
192
|
className: "xixxii4 x10a8y8t x1o6l61p xtdtrs8 x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1s85apg x1a2a7pz xnixb3f xni466t xxiuuzi xc0dz0a xft5bk6 x15h3t91 x142juwg x1viac0w"
|
|
193
193
|
},
|
|
194
|
-
|
|
194
|
+
12: {
|
|
195
195
|
className: "xixxii4 x10a8y8t x1o6l61p xtdtrs8 x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1a2a7pz x1lliihq xnixb3f xni466t xxiuuzi xc0dz0a xft5bk6 x15h3t91 x142juwg x1viac0w"
|
|
196
196
|
},
|
|
197
|
+
2: {
|
|
198
|
+
className: "xixxii4 x10a8y8t x1o6l61p xtdtrs8 x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1s85apg x1a2a7pz x1cz9k3x"
|
|
199
|
+
},
|
|
200
|
+
10: {
|
|
201
|
+
className: "xixxii4 x10a8y8t x1o6l61p xtdtrs8 x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1a2a7pz x1lliihq x1cz9k3x"
|
|
202
|
+
},
|
|
203
|
+
6: {
|
|
204
|
+
className: "xixxii4 x10a8y8t x1o6l61p xtdtrs8 x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1s85apg x1a2a7pz xnixb3f xni466t xxiuuzi xc0dz0a xft5bk6 x142juwg x1viac0w x1cz9k3x"
|
|
205
|
+
},
|
|
206
|
+
14: {
|
|
207
|
+
className: "xixxii4 x10a8y8t x1o6l61p xtdtrs8 x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1a2a7pz x1lliihq xnixb3f xni466t xxiuuzi xc0dz0a xft5bk6 x142juwg x1viac0w x1cz9k3x"
|
|
208
|
+
},
|
|
197
209
|
1: {
|
|
198
210
|
className: "xixxii4 x10a8y8t x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1s85apg x1a2a7pz x47corl xfo81ep xh8yej3 x5yr21d"
|
|
199
211
|
},
|
|
200
|
-
|
|
212
|
+
9: {
|
|
201
213
|
className: "xixxii4 x10a8y8t x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1a2a7pz x1lliihq x47corl xfo81ep xh8yej3 x5yr21d"
|
|
202
214
|
},
|
|
203
|
-
|
|
215
|
+
5: {
|
|
204
216
|
className: "xixxii4 x10a8y8t x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1s85apg x1a2a7pz xnixb3f xni466t xxiuuzi xc0dz0a xft5bk6 x15h3t91 x142juwg x1viac0w x47corl xfo81ep xh8yej3 x5yr21d"
|
|
205
217
|
},
|
|
206
|
-
|
|
218
|
+
13: {
|
|
207
219
|
className: "xixxii4 x10a8y8t x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1a2a7pz x1lliihq xnixb3f xni466t xxiuuzi xc0dz0a xft5bk6 x15h3t91 x142juwg x1viac0w x47corl xfo81ep xh8yej3 x5yr21d"
|
|
220
|
+
},
|
|
221
|
+
3: {
|
|
222
|
+
className: "xixxii4 x10a8y8t x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1s85apg x1a2a7pz x1cz9k3x x47corl xfo81ep xh8yej3 x5yr21d"
|
|
223
|
+
},
|
|
224
|
+
11: {
|
|
225
|
+
className: "xixxii4 x10a8y8t x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1a2a7pz x1lliihq x1cz9k3x x47corl xfo81ep xh8yej3 x5yr21d"
|
|
226
|
+
},
|
|
227
|
+
7: {
|
|
228
|
+
className: "xixxii4 x10a8y8t x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1s85apg x1a2a7pz xnixb3f xni466t xxiuuzi xc0dz0a xft5bk6 x142juwg x1viac0w x1cz9k3x x47corl xfo81ep xh8yej3 x5yr21d"
|
|
229
|
+
},
|
|
230
|
+
15: {
|
|
231
|
+
className: "xixxii4 x10a8y8t x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1a2a7pz x1lliihq xnixb3f xni466t xxiuuzi xc0dz0a xft5bk6 x142juwg x1viac0w x1cz9k3x x47corl xfo81ep xh8yej3 x5yr21d"
|
|
208
232
|
}
|
|
209
|
-
}[!!shouldPresent << 2 | !!hasScrim << 1 | !!!hasScrim << 0],
|
|
233
|
+
}[!!shouldPresent << 3 | !!hasScrim << 2 | !!(hasScrim && !isOpen && isPresented) << 1 | !!!hasScrim << 0],
|
|
210
234
|
ref: dialogRef,
|
|
211
235
|
"aria-label": label,
|
|
212
236
|
"aria-hidden": !isOpen && isPresented ? 'true' : undefined,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BottomSheetPanel.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheetPanel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAc5C,OAAO,EAGL,KAAK,oBAAoB,EAC1B,MAAM,eAAe,CAAC;AAIvB,QAAA,MAAM,cAAc;;;;CAIV,CAAC;AAEX,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,cAAc,CAAC;AAC5D,YAAY,EAAC,oBAAoB,EAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"BottomSheetPanel.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheetPanel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAc5C,OAAO,EAGL,KAAK,oBAAoB,EAC1B,MAAM,eAAe,CAAC;AAIvB,QAAA,MAAM,cAAc;;;;CAIV,CAAC;AAEX,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,cAAc,CAAC;AAC5D,YAAY,EAAC,oBAAoB,EAAC,CAAC;AA2LnC,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,MAAM,EAAE,iBAAiB,GAAG,MAAM,GAAG,MAAM,CAAC;IAC5C,QAAQ,EAAE,SAAS,CAAC;IACpB,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;AA+GD,4EAA4E;AAC5E,wBAAgB,gBAAgB,CAAC,EAC/B,GAAG,EACH,KAAK,EACL,MAAM,EACN,QAAQ,EACR,UAAU,EACV,SAAS,EACT,KAAK,EACL,QAAQ,EACR,MAAM,EACN,qBAA4B,EAC5B,kBAA0B,EAC1B,SAAS,EACT,cAAc,EACd,eAAe,EACf,aAAa,EACb,gBAAgB,EAChB,GAAG,KAAK,EACT,EAAE,qBAAqB,+BAyQvB;yBA3Re,gBAAgB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BottomSheetSwitcher.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheetSwitcher.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,EAQL,KAAK,SAAS,EACd,KAAK,cAAc,EACpB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"BottomSheetSwitcher.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheetSwitcher.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,EAQL,KAAK,SAAS,EACd,KAAK,cAAc,EACpB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAmI5C,MAAM,WAAW,wBAAyB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC5E,iDAAiD;IACjD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAEnC,oEAAoE;IACpE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAE9D;;;;;OAKG;IACH,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAE3B,iEAAiE;IACjE,mBAAmB,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAEtD;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,0DAA0D;IAC1D,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,WAAW,EACX,mBAAmB,EACnB,QAAe,EACf,QAAQ,EACR,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,QAAQ,EACR,OAAO,EACP,SAAS,EACT,GAAG,KAAK,EACT,EAAE,wBAAwB,+BA6Z1B;yBA1ae,mBAAmB"}
|
|
@@ -72,6 +72,10 @@ const styles = {
|
|
|
72
72
|
kwHxkk: "x142juwg",
|
|
73
73
|
k4oj2o: "x1viac0w",
|
|
74
74
|
$$css: true
|
|
75
|
+
},
|
|
76
|
+
scrimClosing: {
|
|
77
|
+
kb4ib: "x1cz9k3x",
|
|
78
|
+
$$css: true
|
|
75
79
|
}
|
|
76
80
|
};
|
|
77
81
|
const IDLE_TRANSITION = {
|
|
@@ -386,7 +390,7 @@ export function BottomSheetSwitcher({
|
|
|
386
390
|
dismissOnLightInteraction();
|
|
387
391
|
}
|
|
388
392
|
}, [dismissOnLightInteraction, hasScrim]);
|
|
389
|
-
const dialogStyleProps = stylex.props(styles.dialog, isFlowVisible && styles.dialogOpen, hasScrim && styles.scrim, !hasScrim && styles.dialogNonModal, xstyle);
|
|
393
|
+
const dialogStyleProps = stylex.props(styles.dialog, isFlowVisible && styles.dialogOpen, hasScrim && styles.scrim, hasScrim && isFlowVisible && activeSheet == null && styles.scrimClosing, !hasScrim && styles.dialogNonModal, xstyle);
|
|
390
394
|
const dialogPresentationProps = mergeProps(dialogStyleProps, className, style);
|
|
391
395
|
const ariaLabel = props['aria-label'] ?? (props['aria-labelledby'] == null ? activeLabel : undefined);
|
|
392
396
|
return /*#__PURE__*/_jsx(BottomSheetSwitcherContext, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSheetGestures.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/useSheetGestures.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AAEH,OAAO,EAOL,KAAK,aAAa,EAClB,KAAK,UAAU,IAAI,eAAe,EAClC,KAAK,YAAY,IAAI,iBAAiB,EACtC,KAAK,SAAS,EACd,KAAK,OAAO,IAAI,YAAY,EAC7B,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"useSheetGestures.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/useSheetGestures.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AAEH,OAAO,EAOL,KAAK,aAAa,EAClB,KAAK,UAAU,IAAI,eAAe,EAClC,KAAK,YAAY,IAAI,iBAAiB,EACtC,KAAK,SAAS,EACd,KAAK,OAAO,IAAI,YAAY,EAC7B,MAAM,OAAO,CAAC;AA8If,MAAM,WAAW,uBAAuB;IACtC,0EAA0E;IAC1E,MAAM,EAAE,OAAO,CAAC;IAChB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,gFAAgF;IAChF,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB;;;;;;;;;;OAUG;IACH,WAAW,CAAC,EAAE,MAAM,MAAM,EAAE,CAAC;IAC7B,oEAAoE;IACpE,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,aAAa,CAAC;CACtB;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,aAAa,CAAC;IACrB,aAAa,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAChD,oBAAoB,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACzD,aAAa,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAClD,aAAa,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAClD,WAAW,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAChD,eAAe,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;CACrD;AAED,MAAM,WAAW,cAAc;IAC7B,GAAG,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IACxC,aAAa,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAChD,oBAAoB,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACzD,aAAa,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAClD,aAAa,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAClD,WAAW,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAChD,eAAe,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACpD,QAAQ,EAAE,CAAC,KAAK,EAAE,YAAY,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CACtD;AAED,MAAM,WAAW,sBAAsB;IACrC;;;;OAIG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7C,0EAA0E;IAC1E,YAAY,EAAE,iBAAiB,CAAC;IAChC,gEAAgE;IAChE,WAAW,EAAE,gBAAgB,CAAC;IAC9B;;;;OAIG;IACH,SAAS,EAAE,cAAc,CAAC;IAC1B;;;;;OAKG;IACH,cAAc,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC9C,kFAAkF;IAClF,UAAU,EAAE,MAAM,CAAC;IACnB,kEAAkE;IAClE,aAAa,EAAE,MAAM,CAAC;IACtB,+CAA+C;IAC/C,UAAU,EAAE,OAAO,CAAC;IACpB,mDAAmD;IACnD,WAAW,EAAE,MAAM,CAAC;IACpB,4EAA4E;IAC5E,uBAAuB,EAAE,MAAM,CAAC;IAChC,qEAAqE;IACrE,oBAAoB,EAAE,MAAM,GAAG,IAAI,CAAC;IACpC;;;;;;;OAOG;IACH,wBAAwB,EAAE,MAAM,IAAI,CAAC;IACrC;;;;OAIG;IACH,mBAAmB,EAAE,MAAM,CAAC;CAC7B;AASD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,MAAM,EACN,UAAiB,EACjB,sBAA0B,EAC1B,SAAS,EACT,WAAW,EACX,MAAM,EACN,cAAc,GACf,EAAE,uBAAuB,GAAG,sBAAsB,CAyoClD"}
|
|
@@ -95,6 +95,20 @@ const OVERSCROLL_MAX = 48;
|
|
|
95
95
|
// the scroll, large enough that a swipe merely coming to rest on the last pixel
|
|
96
96
|
// doesn't start a drag on jitter.
|
|
97
97
|
const CONTENT_END_HANDOFF_SLOP = 4;
|
|
98
|
+
// How far a finger resting on the body must travel before the pull becomes a
|
|
99
|
+
// sheet drag rather than a tap.
|
|
100
|
+
//
|
|
101
|
+
// This used to be zero: any downward movement promoted. A finger is never
|
|
102
|
+
// still, so tapping a control inside the sheet drifted a pixel or two and
|
|
103
|
+
// started a drag -- which suppresses the panel's transition, correctly, for as
|
|
104
|
+
// long as the sheet is tracking the finger. The close that the tap triggered
|
|
105
|
+
// then landed inside that window and cut instead of animating. A deliberate
|
|
106
|
+
// pull was unaffected; only a tap, and only a tap inside the sheet, since the
|
|
107
|
+
// scrim is outside the body and arms nothing.
|
|
108
|
+
//
|
|
109
|
+
// 8px is the conventional tap slop, a shade over iOS's own recognizer, and
|
|
110
|
+
// well under what a real pull covers in its first frames.
|
|
111
|
+
const DRAG_PROMOTION_SLOP = 8;
|
|
98
112
|
|
|
99
113
|
// Short haptic tick on detent settle where supported. iOS Safari doesn't
|
|
100
114
|
// expose navigator.vibrate, so this is a no-op there; skipped under
|
|
@@ -754,7 +768,7 @@ export function useSheetGestures({
|
|
|
754
768
|
return;
|
|
755
769
|
}
|
|
756
770
|
const delta = event.clientY - armed.startCoord;
|
|
757
|
-
if (delta >
|
|
771
|
+
if (delta > DRAG_PROMOTION_SLOP && armed.scroller.scrollTop <= 0) {
|
|
758
772
|
// Downward pull at the top: promote to a sheet drag, anchored at the
|
|
759
773
|
// original pointer-down position so the pull distance carries over.
|
|
760
774
|
armedBodyRef.current = null;
|
|
@@ -883,8 +897,8 @@ export function useSheetGestures({
|
|
|
883
897
|
// no longer scroll that way: at the top, a downward pull (delta > 0)
|
|
884
898
|
// collapses; at the bottom, an upward pull (delta < 0) expands. The
|
|
885
899
|
// opposite direction is a real scroll, so disarm and let it through.
|
|
886
|
-
const pullDownAtTop = armed.top && delta >
|
|
887
|
-
const pullUpAtBottom = armed.bottom && delta <
|
|
900
|
+
const pullDownAtTop = armed.top && delta > DRAG_PROMOTION_SLOP && atTop(scroller);
|
|
901
|
+
const pullUpAtBottom = armed.bottom && delta < -DRAG_PROMOTION_SLOP && atBottom(scroller);
|
|
888
902
|
if (pullDownAtTop || pullUpAtBottom) {
|
|
889
903
|
event.preventDefault();
|
|
890
904
|
touchDragRef.current = null;
|
|
@@ -993,11 +1007,15 @@ export function useSheetGestures({
|
|
|
993
1007
|
const contentProps = useMemo(() => ({
|
|
994
1008
|
style: {
|
|
995
1009
|
transform: activeOffset !== 0 ? `translateY(${activeOffset}px)` : undefined,
|
|
996
|
-
|
|
1010
|
+
// Gated on the sheet being up: suppression must not outlive the sheet
|
|
1011
|
+
// it was suppressing for. The host swaps the panel to its closing
|
|
1012
|
+
// state in whatever frame the dismissal lands, and a stale `none`
|
|
1013
|
+
// would apply to that transform too, cutting the exit.
|
|
1014
|
+
transition: isOpen && (isDragging || isScrollAreaReconciling || reducedMotion) ? 'none' : undefined,
|
|
997
1015
|
touchAction: 'none',
|
|
998
1016
|
overscrollBehavior: 'contain'
|
|
999
1017
|
}
|
|
1000
|
-
}), [activeOffset, isDragging, isScrollAreaReconciling, reducedMotion]);
|
|
1018
|
+
}), [activeOffset, isDragging, isOpen, isScrollAreaReconciling, reducedMotion]);
|
|
1001
1019
|
const handleProps = useMemo(() => ({
|
|
1002
1020
|
style: {
|
|
1003
1021
|
touchAction: 'none',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../src/TabList/Tab.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,EAAc,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAYzD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAK5C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAMrD,MAAM,WAAW,QAAS,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC5D;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAmID;;;;;;;;;;;GAWG;AACH,wBAAgB,GAAG,CAAC,EAClB,EAAE,EACF,GAAG,EACH,KAAK,EACL,KAAK,EACL,aAAqB,EACrB,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,SAAS,EACb,EAAE,QAAQ,
|
|
1
|
+
{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../src/TabList/Tab.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,EAAc,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAYzD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAK5C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAMrD,MAAM,WAAW,QAAS,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC5D;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAmID;;;;;;;;;;;GAWG;AACH,wBAAgB,GAAG,CAAC,EAClB,EAAE,EACF,GAAG,EACH,KAAK,EACL,KAAK,EACL,aAAqB,EACrB,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,SAAS,EACb,EAAE,QAAQ,qBA+GV;yBA7He,GAAG"}
|
package/dist/TabList/Tab.js
CHANGED
|
@@ -186,7 +186,11 @@ export function Tab({
|
|
|
186
186
|
} : {}),
|
|
187
187
|
[EDGE_COMP_ATTR]: '',
|
|
188
188
|
'data-tab-value': value,
|
|
189
|
-
|
|
189
|
+
// Generic `true` ("the current item within a set"), not `page`: the strip
|
|
190
|
+
// switches views in place at least as often as it navigates, and claiming
|
|
191
|
+
// "current page" when no page changed is a false statement to a screen
|
|
192
|
+
// reader. Stays truthful for the `href` case too, just less specific.
|
|
193
|
+
'aria-current': isSelected ? 'true' : undefined,
|
|
190
194
|
// Roving tabindex: the tab strip is a single Tab stop. The selected tab is
|
|
191
195
|
// the tabbable one; the rest are reachable via arrow keys (handled by
|
|
192
196
|
// TabList's onKeyDown). When no tab is selected, TabList's repair effect
|
package/dist/astryx.css
CHANGED
|
@@ -1187,6 +1187,7 @@
|
|
|
1187
1187
|
.x11xpdln:not(#\#):not(#\#):not(#\#){transition-property:transform}
|
|
1188
1188
|
.x74b7sa:not(#\#):not(#\#):not(#\#){transition-property:visibility}
|
|
1189
1189
|
.xxrbq2n:not(#\#):not(#\#):not(#\#){transition-property:width}
|
|
1190
|
+
.xv2sgk5:not(#\#):not(#\#):not(#\#){transition-timing-function:cubic-bezier(.3,0,.6,.6)}
|
|
1190
1191
|
.x9lcvmn:not(#\#):not(#\#):not(#\#){transition-timing-function:ease-out}
|
|
1191
1192
|
.xcj1dhv:not(#\#):not(#\#):not(#\#){transition-timing-function:linear}
|
|
1192
1193
|
.xlr8y92:not(#\#):not(#\#):not(#\#){transition-timing-function:var(--ease-standard)}
|
|
@@ -1761,6 +1762,7 @@
|
|
|
1761
1762
|
.xxcwgru:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{transition-property:background-color}
|
|
1762
1763
|
.xc0dz0a:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::backdrop{transition-property:opacity,display}
|
|
1763
1764
|
.x167zut7:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::backdrop{transition-property:opacity}
|
|
1765
|
+
.x1cz9k3x:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::backdrop{transition-timing-function:linear}
|
|
1764
1766
|
.x15h3t91:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::backdrop{transition-timing-function:var(--ease-standard)}
|
|
1765
1767
|
.x1dlmc9c:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{transition-timing-function:var(--ease-standard)}
|
|
1766
1768
|
.xa5v58t:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{transition-timing-function:var(--ease-standard)}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@astryxdesign/core",
|
|
3
|
-
"version": "0.4.6-canary.
|
|
3
|
+
"version": "0.4.6-canary.f30c604",
|
|
4
4
|
"displayName": "Astryx Core",
|
|
5
5
|
"description": "The component library. Accessible, themeable React components with built-in spacing, dark mode, and StyleX styling.",
|
|
6
6
|
"author": "Meta Open Source",
|
|
@@ -656,7 +656,7 @@
|
|
|
656
656
|
"react-dom": ">=19.0.0"
|
|
657
657
|
},
|
|
658
658
|
"devDependencies": {
|
|
659
|
-
"@astryxdesign/cli": "0.4.6-canary.
|
|
659
|
+
"@astryxdesign/cli": "0.4.6-canary.f30c604",
|
|
660
660
|
"@babel/cli": "^8.0.4",
|
|
661
661
|
"@babel/core": "^7.29.7",
|
|
662
662
|
"@babel/preset-react": "^8.0.1",
|
|
@@ -93,6 +93,20 @@ const styles = stylex.create({
|
|
|
93
93
|
},
|
|
94
94
|
},
|
|
95
95
|
},
|
|
96
|
+
/**
|
|
97
|
+
* The dim leaves with the sheet, on a curve that matches.
|
|
98
|
+
*
|
|
99
|
+
* A fade covers no distance, so the decelerate token front-loads its
|
|
100
|
+
* progress and simply ends it early: `--ease-standard` puts the scrim at 90%
|
|
101
|
+
* faded in 163ms of a 410ms close, leaving an undimmed page under a sheet
|
|
102
|
+
* that is still sliding across it. `linear` spends the duration it is given.
|
|
103
|
+
* Same reasoning the touch date picker's surface swap already carries.
|
|
104
|
+
*/
|
|
105
|
+
scrimClosing: {
|
|
106
|
+
'::backdrop': {
|
|
107
|
+
transitionTimingFunction: 'linear',
|
|
108
|
+
},
|
|
109
|
+
},
|
|
96
110
|
positioner: {
|
|
97
111
|
position: 'absolute',
|
|
98
112
|
insetInline: 0,
|
|
@@ -327,6 +341,7 @@ function StandaloneBottomSheet({
|
|
|
327
341
|
styles.dialog,
|
|
328
342
|
shouldPresent && styles.dialogOpen,
|
|
329
343
|
hasScrim && styles.scrim,
|
|
344
|
+
hasScrim && !isOpen && isPresented && styles.scrimClosing,
|
|
330
345
|
!hasScrim && styles.dialogNonModal,
|
|
331
346
|
)}
|
|
332
347
|
ref={dialogRef}
|
|
@@ -328,4 +328,70 @@ describe('BottomSheetPanel', () => {
|
|
|
328
328
|
"backgroundColor: colorVars['--color-background-surface']",
|
|
329
329
|
);
|
|
330
330
|
});
|
|
331
|
+
|
|
332
|
+
/**
|
|
333
|
+
* The exit is not the entrance played backwards.
|
|
334
|
+
*
|
|
335
|
+
* `--ease-standard` is a decelerate curve: on it the sheet was half gone in
|
|
336
|
+
* 59ms of a 410ms transition and 90% gone in 163ms, so the close was over
|
|
337
|
+
* before it could be seen. The closing state therefore carries its own
|
|
338
|
+
* accelerating curve, and only the closing state does.
|
|
339
|
+
*/
|
|
340
|
+
it('closes on an accelerating curve of its own, not the entrance timing', () => {
|
|
341
|
+
const declarationsFor = (element: HTMLElement) => {
|
|
342
|
+
const classes = new Set(element.className.split(/\s+/));
|
|
343
|
+
const out: string[] = [];
|
|
344
|
+
for (const styleSheet of Array.from(document.styleSheets)) {
|
|
345
|
+
let rules: CSSRuleList;
|
|
346
|
+
try {
|
|
347
|
+
rules = styleSheet.cssRules;
|
|
348
|
+
} catch {
|
|
349
|
+
continue;
|
|
350
|
+
}
|
|
351
|
+
for (const rule of Array.from(rules)) {
|
|
352
|
+
const selector = (rule as CSSStyleRule).selectorText;
|
|
353
|
+
const owner = selector?.match(/^\.([\w-]+)/)?.[1];
|
|
354
|
+
if (owner != null && classes.has(owner)) {
|
|
355
|
+
out.push(rule.cssText);
|
|
356
|
+
}
|
|
357
|
+
}
|
|
358
|
+
}
|
|
359
|
+
return out.join('\n');
|
|
360
|
+
};
|
|
361
|
+
|
|
362
|
+
const {container: closing} = render(
|
|
363
|
+
<BottomSheetPanel
|
|
364
|
+
state={{kind: 'exiting'}}
|
|
365
|
+
height="hug"
|
|
366
|
+
onDismiss={() => {}}
|
|
367
|
+
onScrimOpacity={() => {}}>
|
|
368
|
+
Panel content
|
|
369
|
+
</BottomSheetPanel>,
|
|
370
|
+
);
|
|
371
|
+
const closingRules = declarationsFor(
|
|
372
|
+
closing.querySelector('.astryx-bottom-sheet') as HTMLElement,
|
|
373
|
+
);
|
|
374
|
+
// An accelerating curve: no vertical rise at the start (y1 = 0), so the
|
|
375
|
+
// travel lands inside the duration instead of ahead of it.
|
|
376
|
+
expect(closingRules).toContain(
|
|
377
|
+
'transition-timing-function: cubic-bezier(.3,0,.6,.6)',
|
|
378
|
+
);
|
|
379
|
+
|
|
380
|
+
const {container: resting} = render(
|
|
381
|
+
<BottomSheetPanel
|
|
382
|
+
state={{kind: 'open', entering: false}}
|
|
383
|
+
height="hug"
|
|
384
|
+
onDismiss={() => {}}
|
|
385
|
+
onScrimOpacity={() => {}}>
|
|
386
|
+
Panel content
|
|
387
|
+
</BottomSheetPanel>,
|
|
388
|
+
);
|
|
389
|
+
const restingRules = declarationsFor(
|
|
390
|
+
resting.querySelector('.astryx-bottom-sheet') as HTMLElement,
|
|
391
|
+
);
|
|
392
|
+
expect(restingRules).toContain(
|
|
393
|
+
'transition-timing-function: var(--ease-standard)',
|
|
394
|
+
);
|
|
395
|
+
expect(restingRules).not.toContain('cubic-bezier(.3,0,.6,.6)');
|
|
396
|
+
});
|
|
331
397
|
});
|
|
@@ -149,8 +149,27 @@ const styles = stylex.create({
|
|
|
149
149
|
transitionDuration: '0.01s',
|
|
150
150
|
},
|
|
151
151
|
},
|
|
152
|
+
/**
|
|
153
|
+
* The exit is its own motion, not the entrance played backwards.
|
|
154
|
+
*
|
|
155
|
+
* `--ease-standard` is `cubic-bezier(0.24, 1, 0.4, 1)`, a decelerate curve:
|
|
156
|
+
* it spends its speed immediately and coasts. That is right for an entrance,
|
|
157
|
+
* where the sheet arrives fast and settles, and wrong for an exit. Measured
|
|
158
|
+
* on device, it put the sheet half off-screen in 59ms of a 410ms close and
|
|
159
|
+
* 90% off in 163ms -- the travel is over before the eye has followed it, and
|
|
160
|
+
* the rest of the duration moves pixels already below the fold.
|
|
161
|
+
*
|
|
162
|
+
* An exit accelerates instead: away from rest, gathering speed, quickest as
|
|
163
|
+
* it leaves the screen. The curve is deliberately gentle rather than a hard
|
|
164
|
+
* `ease-in` -- it is moving within ~50ms, so the close reads as one
|
|
165
|
+
* departure rather than a hesitation and a snap. The duration is the
|
|
166
|
+
* entrance's own band, so only the curve differs between the two
|
|
167
|
+
* directions; a shorter band leaves too little visible travel once a theme
|
|
168
|
+
* scales the motion scale down (neutral's medium is 300ms against 410ms).
|
|
169
|
+
*/
|
|
152
170
|
sheetClosing: {
|
|
153
171
|
transform: 'translateY(100%)',
|
|
172
|
+
transitionTimingFunction: 'cubic-bezier(0.3, 0, 0.6, 0.6)',
|
|
154
173
|
},
|
|
155
174
|
sheetFading: {
|
|
156
175
|
opacity: 0,
|
|
@@ -103,6 +103,14 @@ const styles = stylex.create({
|
|
|
103
103
|
},
|
|
104
104
|
},
|
|
105
105
|
},
|
|
106
|
+
// The flow's dim leaves with its last panel. Same rule, same reasoning, as
|
|
107
|
+
// a standalone sheet's -- see `scrimClosing` in BottomSheet.tsx. A handoff
|
|
108
|
+
// between two sheets is not a close, and keeps the entrance curve.
|
|
109
|
+
scrimClosing: {
|
|
110
|
+
'::backdrop': {
|
|
111
|
+
transitionTimingFunction: 'linear',
|
|
112
|
+
},
|
|
113
|
+
},
|
|
106
114
|
});
|
|
107
115
|
|
|
108
116
|
type RetainedSheetPhase = 'covered' | 'aligning' | 'fading' | 'exiting';
|
|
@@ -593,6 +601,7 @@ export function BottomSheetSwitcher({
|
|
|
593
601
|
styles.dialog,
|
|
594
602
|
isFlowVisible && styles.dialogOpen,
|
|
595
603
|
hasScrim && styles.scrim,
|
|
604
|
+
hasScrim && isFlowVisible && activeSheet == null && styles.scrimClosing,
|
|
596
605
|
!hasScrim && styles.dialogNonModal,
|
|
597
606
|
xstyle,
|
|
598
607
|
);
|
|
@@ -530,6 +530,33 @@ describe('useSheetGestures', () => {
|
|
|
530
530
|
expect(hook.result.current.dragOffset).toBe(40);
|
|
531
531
|
});
|
|
532
532
|
|
|
533
|
+
/**
|
|
534
|
+
* A finger is never still. Tapping a control inside the sheet drifts a
|
|
535
|
+
* pixel or two, and with no slop that drift promoted to a sheet drag —
|
|
536
|
+
* which wrote `transition: none` onto the panel across the release, so the
|
|
537
|
+
* close the tap triggered cut instead of animating. That is the "the sheet
|
|
538
|
+
* closes with no animation" report: only on a tap, and only on a tap
|
|
539
|
+
* inside the sheet (the scrim never arms a drag).
|
|
540
|
+
*/
|
|
541
|
+
it('treats a few pixels of finger drift as a tap, not a drag', () => {
|
|
542
|
+
const {hook} = setup({snapHeights: () => [200]});
|
|
543
|
+
const body = makeBody(0); // at the top, where a pull-down would promote
|
|
544
|
+
bodyDown(hook, 0, 0, body);
|
|
545
|
+
bodyMove(hook, 3, 40, body); // the drift of a finger tapping a button
|
|
546
|
+
expect(hook.result.current.isDragging).toBe(false);
|
|
547
|
+
// and nothing suppressed the panel's transition, so a close that lands
|
|
548
|
+
// now still animates
|
|
549
|
+
expect(hook.result.current.contentProps.style.transition).toBeUndefined();
|
|
550
|
+
});
|
|
551
|
+
|
|
552
|
+
it('still promotes once the pull passes the tap slop', () => {
|
|
553
|
+
const {hook} = setup({snapHeights: () => [200]});
|
|
554
|
+
const body = makeBody(0);
|
|
555
|
+
bodyDown(hook, 0, 0, body);
|
|
556
|
+
bodyMove(hook, 9, 40, body); // just past the 8px slop
|
|
557
|
+
expect(hook.result.current.isDragging).toBe(true);
|
|
558
|
+
});
|
|
559
|
+
|
|
533
560
|
it('does not hijack scrolling when the body is scrolled down', () => {
|
|
534
561
|
const {hook} = setup({snapHeights: () => [200]});
|
|
535
562
|
const body = makeBody(120); // scrolled, not at the top
|
|
@@ -118,6 +118,20 @@ const OVERSCROLL_MAX = 48;
|
|
|
118
118
|
// the scroll, large enough that a swipe merely coming to rest on the last pixel
|
|
119
119
|
// doesn't start a drag on jitter.
|
|
120
120
|
const CONTENT_END_HANDOFF_SLOP = 4;
|
|
121
|
+
// How far a finger resting on the body must travel before the pull becomes a
|
|
122
|
+
// sheet drag rather than a tap.
|
|
123
|
+
//
|
|
124
|
+
// This used to be zero: any downward movement promoted. A finger is never
|
|
125
|
+
// still, so tapping a control inside the sheet drifted a pixel or two and
|
|
126
|
+
// started a drag -- which suppresses the panel's transition, correctly, for as
|
|
127
|
+
// long as the sheet is tracking the finger. The close that the tap triggered
|
|
128
|
+
// then landed inside that window and cut instead of animating. A deliberate
|
|
129
|
+
// pull was unaffected; only a tap, and only a tap inside the sheet, since the
|
|
130
|
+
// scrim is outside the body and arms nothing.
|
|
131
|
+
//
|
|
132
|
+
// 8px is the conventional tap slop, a shade over iOS's own recognizer, and
|
|
133
|
+
// well under what a real pull covers in its first frames.
|
|
134
|
+
const DRAG_PROMOTION_SLOP = 8;
|
|
121
135
|
|
|
122
136
|
// Short haptic tick on detent settle where supported. iOS Safari doesn't
|
|
123
137
|
// expose navigator.vibrate, so this is a no-op there; skipped under
|
|
@@ -1140,7 +1154,7 @@ export function useSheetGestures({
|
|
|
1140
1154
|
return;
|
|
1141
1155
|
}
|
|
1142
1156
|
const delta = event.clientY - armed.startCoord;
|
|
1143
|
-
if (delta >
|
|
1157
|
+
if (delta > DRAG_PROMOTION_SLOP && armed.scroller.scrollTop <= 0) {
|
|
1144
1158
|
// Downward pull at the top: promote to a sheet drag, anchored at the
|
|
1145
1159
|
// original pointer-down position so the pull distance carries over.
|
|
1146
1160
|
armedBodyRef.current = null;
|
|
@@ -1302,8 +1316,10 @@ export function useSheetGestures({
|
|
|
1302
1316
|
// no longer scroll that way: at the top, a downward pull (delta > 0)
|
|
1303
1317
|
// collapses; at the bottom, an upward pull (delta < 0) expands. The
|
|
1304
1318
|
// opposite direction is a real scroll, so disarm and let it through.
|
|
1305
|
-
const pullDownAtTop =
|
|
1306
|
-
|
|
1319
|
+
const pullDownAtTop =
|
|
1320
|
+
armed.top && delta > DRAG_PROMOTION_SLOP && atTop(scroller);
|
|
1321
|
+
const pullUpAtBottom =
|
|
1322
|
+
armed.bottom && delta < -DRAG_PROMOTION_SLOP && atBottom(scroller);
|
|
1307
1323
|
if (pullDownAtTop || pullUpAtBottom) {
|
|
1308
1324
|
event.preventDefault();
|
|
1309
1325
|
touchDragRef.current = null;
|
|
@@ -1433,15 +1449,19 @@ export function useSheetGestures({
|
|
|
1433
1449
|
style: {
|
|
1434
1450
|
transform:
|
|
1435
1451
|
activeOffset !== 0 ? `translateY(${activeOffset}px)` : undefined,
|
|
1452
|
+
// Gated on the sheet being up: suppression must not outlive the sheet
|
|
1453
|
+
// it was suppressing for. The host swaps the panel to its closing
|
|
1454
|
+
// state in whatever frame the dismissal lands, and a stale `none`
|
|
1455
|
+
// would apply to that transform too, cutting the exit.
|
|
1436
1456
|
transition:
|
|
1437
|
-
isDragging || isScrollAreaReconciling || reducedMotion
|
|
1457
|
+
isOpen && (isDragging || isScrollAreaReconciling || reducedMotion)
|
|
1438
1458
|
? 'none'
|
|
1439
1459
|
: undefined,
|
|
1440
1460
|
touchAction: 'none',
|
|
1441
1461
|
overscrollBehavior: 'contain',
|
|
1442
1462
|
},
|
|
1443
1463
|
}),
|
|
1444
|
-
[activeOffset, isDragging, isScrollAreaReconciling, reducedMotion],
|
|
1464
|
+
[activeOffset, isDragging, isOpen, isScrollAreaReconciling, reducedMotion],
|
|
1445
1465
|
);
|
|
1446
1466
|
|
|
1447
1467
|
const handleProps = useMemo<SheetHandleProps>(
|
package/src/TabList/Tab.tsx
CHANGED
|
@@ -260,7 +260,11 @@ export function Tab({
|
|
|
260
260
|
...(isLabelHidden ? {'aria-label': label} : {}),
|
|
261
261
|
[EDGE_COMP_ATTR]: '',
|
|
262
262
|
'data-tab-value': value,
|
|
263
|
-
|
|
263
|
+
// Generic `true` ("the current item within a set"), not `page`: the strip
|
|
264
|
+
// switches views in place at least as often as it navigates, and claiming
|
|
265
|
+
// "current page" when no page changed is a false statement to a screen
|
|
266
|
+
// reader. Stays truthful for the `href` case too, just less specific.
|
|
267
|
+
'aria-current': isSelected ? ('true' as const) : undefined,
|
|
264
268
|
// Roving tabindex: the tab strip is a single Tab stop. The selected tab is
|
|
265
269
|
// the tabbable one; the rest are reachable via arrow keys (handled by
|
|
266
270
|
// TabList's onKeyDown). When no tab is selected, TabList's repair effect
|
|
@@ -106,7 +106,7 @@ describe('TabList', () => {
|
|
|
106
106
|
);
|
|
107
107
|
});
|
|
108
108
|
|
|
109
|
-
it('marks selected tab with aria-current', () => {
|
|
109
|
+
it('marks selected tab with a generic aria-current, not "page"', () => {
|
|
110
110
|
render(
|
|
111
111
|
<TabList value="home" onChange={() => {}}>
|
|
112
112
|
<Tab value="home" label="Home" />
|
|
@@ -116,13 +116,30 @@ describe('TabList', () => {
|
|
|
116
116
|
|
|
117
117
|
expect(screen.getByRole('button', {name: 'Home'})).toHaveAttribute(
|
|
118
118
|
'aria-current',
|
|
119
|
-
'
|
|
119
|
+
'true',
|
|
120
120
|
);
|
|
121
121
|
expect(screen.getByRole('button', {name: 'Settings'})).not.toHaveAttribute(
|
|
122
122
|
'aria-current',
|
|
123
123
|
);
|
|
124
124
|
});
|
|
125
125
|
|
|
126
|
+
it('marks a selected link tab with the same generic aria-current', () => {
|
|
127
|
+
render(
|
|
128
|
+
<TabList value="home" onChange={() => {}}>
|
|
129
|
+
<Tab value="home" label="Home" href="/home" />
|
|
130
|
+
<Tab value="settings" label="Settings" href="/settings" />
|
|
131
|
+
</TabList>,
|
|
132
|
+
);
|
|
133
|
+
|
|
134
|
+
expect(screen.getByRole('link', {name: 'Home'})).toHaveAttribute(
|
|
135
|
+
'aria-current',
|
|
136
|
+
'true',
|
|
137
|
+
);
|
|
138
|
+
expect(screen.getByRole('link', {name: 'Settings'})).not.toHaveAttribute(
|
|
139
|
+
'aria-current',
|
|
140
|
+
);
|
|
141
|
+
});
|
|
142
|
+
|
|
126
143
|
it('calls onChange when a tab is clicked', async () => {
|
|
127
144
|
const user = userEvent.setup();
|
|
128
145
|
const handleChange = vi.fn();
|
|
@@ -148,7 +165,7 @@ describe('TabList', () => {
|
|
|
148
165
|
|
|
149
166
|
expect(screen.getByRole('button', {name: 'Home'})).toHaveAttribute(
|
|
150
167
|
'aria-current',
|
|
151
|
-
'
|
|
168
|
+
'true',
|
|
152
169
|
);
|
|
153
170
|
|
|
154
171
|
rerender(
|
|
@@ -163,7 +180,7 @@ describe('TabList', () => {
|
|
|
163
180
|
);
|
|
164
181
|
expect(screen.getByRole('button', {name: 'Settings'})).toHaveAttribute(
|
|
165
182
|
'aria-current',
|
|
166
|
-
'
|
|
183
|
+
'true',
|
|
167
184
|
);
|
|
168
185
|
});
|
|
169
186
|
|