@astryxdesign/lab 0.4.2-canary.e60974e → 0.4.3-canary.00bed29
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/index.d.ts +0 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +0 -3
- package/dist/lab.css +0 -21
- package/package.json +3 -3
- package/src/Stepper/Stepper.test.tsx +69 -0
- package/src/index.ts +0 -9
- package/dist/BottomSheet/BottomSheet.d.ts +0 -65
- package/dist/BottomSheet/BottomSheet.d.ts.map +0 -1
- package/dist/BottomSheet/BottomSheet.js +0 -376
- package/dist/BottomSheet/BottomSheetPanel.d.ts +0 -57
- package/dist/BottomSheet/BottomSheetPanel.d.ts.map +0 -1
- package/dist/BottomSheet/BottomSheetPanel.js +0 -344
- package/dist/BottomSheet/BottomSheetSwitcher.d.ts +0 -60
- package/dist/BottomSheet/BottomSheetSwitcher.d.ts.map +0 -1
- package/dist/BottomSheet/BottomSheetSwitcher.js +0 -408
- package/dist/BottomSheet/BottomSheetSwitcherContext.d.ts +0 -21
- package/dist/BottomSheet/BottomSheetSwitcherContext.d.ts.map +0 -1
- package/dist/BottomSheet/BottomSheetSwitcherContext.js +0 -13
- package/dist/BottomSheet/index.d.ts +0 -11
- package/dist/BottomSheet/index.d.ts.map +0 -1
- package/dist/BottomSheet/index.js +0 -12
- package/dist/BottomSheet/snapOffsets.d.ts +0 -62
- package/dist/BottomSheet/snapOffsets.d.ts.map +0 -1
- package/dist/BottomSheet/snapOffsets.js +0 -114
- package/dist/BottomSheet/useMobileKeyboard.d.ts +0 -25
- package/dist/BottomSheet/useMobileKeyboard.d.ts.map +0 -1
- package/dist/BottomSheet/useMobileKeyboard.js +0 -384
- package/dist/BottomSheet/useSheetGestures.d.ts +0 -122
- package/dist/BottomSheet/useSheetGestures.d.ts.map +0 -1
- package/dist/BottomSheet/useSheetGestures.js +0 -591
- package/src/BottomSheet/BottomSheet.doc.mjs +0 -255
- package/src/BottomSheet/BottomSheet.test.tsx +0 -1404
- package/src/BottomSheet/BottomSheet.tsx +0 -539
- package/src/BottomSheet/BottomSheetPanel.test.tsx +0 -240
- package/src/BottomSheet/BottomSheetPanel.tsx +0 -481
- package/src/BottomSheet/BottomSheetSwitcher.doc.mjs +0 -107
- package/src/BottomSheet/BottomSheetSwitcher.test.tsx +0 -850
- package/src/BottomSheet/BottomSheetSwitcher.tsx +0 -634
- package/src/BottomSheet/BottomSheetSwitcherContext.ts +0 -51
- package/src/BottomSheet/index.ts +0 -15
- package/src/BottomSheet/snapOffsets.test.ts +0 -152
- package/src/BottomSheet/snapOffsets.ts +0 -139
- package/src/BottomSheet/useMobileKeyboard.ts +0 -566
- package/src/BottomSheet/useSheetGestures.test.ts +0 -547
- package/src/BottomSheet/useSheetGestures.ts +0 -813
package/dist/index.d.ts
CHANGED
|
@@ -16,7 +16,6 @@ export { TransferList, TransferListSelector, transferListVars, type TransferList
|
|
|
16
16
|
export { ChatReasoning, type ChatReasoningProps, } from './ChatReasoning/ChatReasoning';
|
|
17
17
|
export * from './Chat';
|
|
18
18
|
export { Drawer, type DrawerProps } from './Drawer';
|
|
19
|
-
export { BottomSheet, type BottomSheetHeight, type BottomSheetProps, BottomSheetSwitcher, type BottomSheetSwitcherProps, } from './BottomSheet';
|
|
20
19
|
export { Tour, type TourProps, TourStep, type TourStepProps, useTour, type UseTourReturn, type TourDismissSource, } from './Tour';
|
|
21
20
|
export { Stat, type StatProps, type StatDelta, type StatDeltaDirection, type StatDeltaSentiment, type StatSize, } from './Stat';
|
|
22
21
|
export * from './Schedule';
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AAGH,OAAO,EAAC,UAAU,EAAE,KAAK,eAAe,EAAC,MAAM,cAAc,CAAC;AAC9D,OAAO,EACL,QAAQ,EACR,aAAa,EACb,uBAAuB,EACvB,KAAK,WAAW,GACjB,MAAM,8BAA8B,CAAC;AAGtC,OAAO,EAAC,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,WAAW,EAAC,MAAM,WAAW,CAAC;AAGvE,OAAO,EACL,YAAY,EACZ,oBAAoB,EACpB,gBAAgB,EAChB,KAAK,kBAAkB,EACvB,KAAK,iBAAiB,EACtB,KAAK,kCAAkC,EACvC,KAAK,yBAAyB,GAC/B,MAAM,gBAAgB,CAAC;AAGxB,OAAO,EACL,aAAa,EACb,KAAK,kBAAkB,GACxB,MAAM,+BAA+B,CAAC;AACvC,cAAc,QAAQ,CAAC;AAGvB,OAAO,EAAC,MAAM,EAAE,KAAK,WAAW,EAAC,MAAM,UAAU,CAAC;AAGlD,OAAO,EACL,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -29,9 +29,6 @@ export * from "./Chat/index.js";
|
|
|
29
29
|
// Drawer — experimental overlay panel
|
|
30
30
|
export { Drawer } from "./Drawer/index.js";
|
|
31
31
|
|
|
32
|
-
// BottomSheet — mobile touch sheet on a native modal <dialog>
|
|
33
|
-
export { BottomSheet, BottomSheetSwitcher } from "./BottomSheet/index.js";
|
|
34
|
-
|
|
35
32
|
// Tour — guided product-tour / NUX walkthrough (facebook/astryx#4239)
|
|
36
33
|
export { Tour, TourStep, useTour } from "./Tour/index.js";
|
|
37
34
|
|
package/dist/lab.css
CHANGED
|
@@ -129,7 +129,6 @@
|
|
|
129
129
|
.xb3r6kr:not(#\#):not(#\#){overflow:hidden}
|
|
130
130
|
.x1rea2x4:not(#\#):not(#\#){overflow:visible}
|
|
131
131
|
.xish69e:not(#\#):not(#\#){overscroll-behavior:contain}
|
|
132
|
-
.x8du1vd:not(#\#):not(#\#){overscroll-behavior:none}
|
|
133
132
|
.xt970qd:not(#\#):not(#\#){padding-block:0}
|
|
134
133
|
.xsplgde:not(#\#):not(#\#){padding-block:1px}
|
|
135
134
|
.x13f7esw:not(#\#):not(#\#){padding-block:var(--spacing-0-5)}
|
|
@@ -253,8 +252,6 @@
|
|
|
253
252
|
.x1j92z86:not(#\#):not(#\#):not(#\#){border-inline-start-color:var(--color-border)}
|
|
254
253
|
.x1t7ytsu:not(#\#):not(#\#):not(#\#){border-inline-start-style:solid}
|
|
255
254
|
.xgbv0en:not(#\#):not(#\#):not(#\#){border-inline-start-width:var(--border-width)}
|
|
256
|
-
.x7hs6f1:not(#\#):not(#\#):not(#\#){border-start-end-radius:var(--radius-container)}
|
|
257
|
-
.x81l70g:not(#\#):not(#\#):not(#\#){border-start-start-radius:var(--radius-container)}
|
|
258
255
|
.x18oyj42:not(#\#):not(#\#):not(#\#){box-shadow:0 0 0 1px var(--color-accent)}
|
|
259
256
|
.xefcaua:not(#\#):not(#\#):not(#\#){box-shadow:0 0 0 2px var(--color-background-surface),0 0 0 4px var(--color-accent),0 0 0 9999px var(--color-overlay)}
|
|
260
257
|
.xr5mita:not(#\#):not(#\#):not(#\#){box-shadow:0 0 0 2px var(--color-background-surface),0 0 0 4px var(--color-accent)}
|
|
@@ -434,7 +431,6 @@
|
|
|
434
431
|
.xixxii4:not(#\#):not(#\#):not(#\#){position:fixed}
|
|
435
432
|
.x1n2onr6:not(#\#):not(#\#):not(#\#){position:relative}
|
|
436
433
|
.xxs79tx:not(#\#):not(#\#):not(#\#){row-gap:0}
|
|
437
|
-
.xrw9175:not(#\#):not(#\#):not(#\#){scroll-padding-block-end:48px}
|
|
438
434
|
.x185mbhu:not(#\#):not(#\#):not(#\#){scrollbar-gutter:stable}
|
|
439
435
|
.x1597r2g:not(#\#):not(#\#):not(#\#){scrollbar-width:thin}
|
|
440
436
|
.x1owpc8m:not(#\#):not(#\#):not(#\#){stroke-linecap:round}
|
|
@@ -478,7 +474,6 @@
|
|
|
478
474
|
.xxnu56j:not(#\#):not(#\#):not(#\#){transition-property:stroke-dashoffset}
|
|
479
475
|
.x1gfj591:not(#\#):not(#\#):not(#\#){transition-property:top,left,width,height}
|
|
480
476
|
.x1yw18vd:not(#\#):not(#\#):not(#\#){transition-property:transform,max-width,display}
|
|
481
|
-
.xwcsmn1:not(#\#):not(#\#):not(#\#){transition-property:transform,opacity}
|
|
482
477
|
.x9lcvmn:not(#\#):not(#\#):not(#\#){transition-timing-function:ease-out}
|
|
483
478
|
.xlr8y92:not(#\#):not(#\#):not(#\#){transition-timing-function:var(--ease-standard)}
|
|
484
479
|
.x87ps6o:not(#\#):not(#\#):not(#\#){user-select:none}
|
|
@@ -489,12 +484,10 @@
|
|
|
489
484
|
.xuxw1ft:not(#\#):not(#\#):not(#\#){white-space:nowrap}
|
|
490
485
|
.x126k92a:not(#\#):not(#\#):not(#\#){white-space:pre-wrap}
|
|
491
486
|
.x1sdyfia:not(#\#):not(#\#):not(#\#){white-space:pre}
|
|
492
|
-
.x1q1rmc8:not(#\#):not(#\#):not(#\#){will-change:transform,opacity}
|
|
493
487
|
.x1so62im:not(#\#):not(#\#):not(#\#){will-change:transform}
|
|
494
488
|
.x1lldw8n:not(#\#):not(#\#):not(#\#){word-break:normal}
|
|
495
489
|
.x98t3bc:not(#\#):not(#\#):not(#\#){writing-mode:vertical-rl}
|
|
496
490
|
.x1vjfegm:not(#\#):not(#\#):not(#\#){z-index:1}
|
|
497
|
-
.xfo81ep:not(#\#):not(#\#):not(#\#){z-index:1000}
|
|
498
491
|
.x1355qak:not(#\#):not(#\#):not(#\#){z-index:20}
|
|
499
492
|
.xr3buco:not(#\#):not(#\#):not(#\#){z-index:var(--x-zIndex)}
|
|
500
493
|
.x1rmeqbc.x1rmeqbc:where(.x1fcdk97:first-child *):not(#\#):not(#\#):not(#\#){visibility:hidden}
|
|
@@ -541,7 +534,6 @@
|
|
|
541
534
|
.x1ey2m1c:not(#\#):not(#\#):not(#\#):not(#\#){bottom:0}
|
|
542
535
|
.xdd4er5:not(#\#):not(#\#):not(#\#):not(#\#){bottom:auto}
|
|
543
536
|
.x1hmuevu:not(#\#):not(#\#):not(#\#):not(#\#){bottom:var(--spacing-3)}
|
|
544
|
-
.x5yr21d:not(#\#):not(#\#):not(#\#):not(#\#){height:100%}
|
|
545
537
|
.xtdtrs8:not(#\#):not(#\#):not(#\#):not(#\#){height:100dvh}
|
|
546
538
|
.x170jfvy:not(#\#):not(#\#):not(#\#):not(#\#){height:10px}
|
|
547
539
|
.x1v9usgg:not(#\#):not(#\#):not(#\#):not(#\#){height:14px}
|
|
@@ -553,16 +545,12 @@
|
|
|
553
545
|
.x1ycjhwn:not(#\#):not(#\#):not(#\#):not(#\#){height:5px}
|
|
554
546
|
.x1d9x2de:not(#\#):not(#\#):not(#\#):not(#\#){height:640px}
|
|
555
547
|
.xt7dq6l:not(#\#):not(#\#):not(#\#):not(#\#){height:auto}
|
|
556
|
-
.x1tpcejd:not(#\#):not(#\#):not(#\#):not(#\#){height:calc(var(--_sheet-budget) + 48px)}
|
|
557
|
-
.xg7h5cd:not(#\#):not(#\#):not(#\#):not(#\#){height:fit-content}
|
|
558
548
|
.xhigkf7:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--icon-size)}
|
|
559
549
|
.x11c6zpc:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--spacing-1)}
|
|
560
|
-
.x1k15mir:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--spacing-12)}
|
|
561
550
|
.x6b6gus:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--spacing-4)}
|
|
562
551
|
.x1grt7ep:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--spacing-5)}
|
|
563
552
|
.x16ye13r:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--x-height)}
|
|
564
553
|
.x1unci72:not(#\#):not(#\#):not(#\#):not(#\#){left:var(--spacing-4)}
|
|
565
|
-
.x1if0o47:not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:-48px}
|
|
566
554
|
.xlstkdb:not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:var(--spacing-0-5)}
|
|
567
555
|
.x1p37lm5:not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:var(--spacing-2)}
|
|
568
556
|
.x160xvyo:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:calc(var(--spacing-1) * -1)}
|
|
@@ -570,14 +558,12 @@
|
|
|
570
558
|
.xtbrsbv:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:var(--spacing-2)}
|
|
571
559
|
.x1vhfslr:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:var(--x-marginBlockStart)}
|
|
572
560
|
.x12ajvvl:not(#\#):not(#\#):not(#\#):not(#\#){max-height:calc(100vh - 32px)}
|
|
573
|
-
.x14bu9tk:not(#\#):not(#\#):not(#\#):not(#\#){max-height:calc(92dvh + 48px)}
|
|
574
561
|
.xedcshv:not(#\#):not(#\#):not(#\#):not(#\#){max-height:inherit}
|
|
575
562
|
.x7ab17h:not(#\#):not(#\#):not(#\#):not(#\#){max-height:none}
|
|
576
563
|
.x9rxgia:not(#\#):not(#\#):not(#\#):not(#\#){max-height:var(--transfer-list-panel-max-block-size)}
|
|
577
564
|
.x1jols5v:not(#\#):not(#\#):not(#\#):not(#\#){max-height:var(--x-maxHeight)}
|
|
578
565
|
.x1va8c73:not(#\#):not(#\#):not(#\#):not(#\#){max-width:320px}
|
|
579
566
|
.x1k2d6hx:not(#\#):not(#\#):not(#\#):not(#\#){max-width:44px}
|
|
580
|
-
.x11gisft:not(#\#):not(#\#):not(#\#):not(#\#){max-width:640px}
|
|
581
567
|
.x1x1rfll:not(#\#):not(#\#):not(#\#):not(#\#){max-width:none}
|
|
582
568
|
.xf68679:not(#\#):not(#\#):not(#\#):not(#\#){max-width:var(--x-maxWidth)}
|
|
583
569
|
.x2lwn1j:not(#\#):not(#\#):not(#\#):not(#\#){min-height:0}
|
|
@@ -597,7 +583,6 @@
|
|
|
597
583
|
.x6ikm8r:not(#\#):not(#\#):not(#\#):not(#\#){overflow-x:hidden}
|
|
598
584
|
.x1odjw0f:not(#\#):not(#\#):not(#\#):not(#\#){overflow-y:auto}
|
|
599
585
|
.x1j85h84:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:1px}
|
|
600
|
-
.x1wkw6tp:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:calc(env(safe-area-inset-bottom,0px) + 48px)}
|
|
601
586
|
.xy143xn:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:var(--spacing-1)}
|
|
602
587
|
.xpgmcrp:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--icon-block-offset)}
|
|
603
588
|
.xbx876j:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--spacing-0-5)}
|
|
@@ -619,7 +604,6 @@
|
|
|
619
604
|
.x1td3qas:not(#\#):not(#\#):not(#\#):not(#\#){width:32px}
|
|
620
605
|
.x1ftt334:not(#\#):not(#\#):not(#\#):not(#\#){width:5px}
|
|
621
606
|
.x1oai4fc:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--icon-size)}
|
|
622
|
-
.x1m747yf:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--size-element-lg)}
|
|
623
607
|
.xx9zwd3:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--spacing-1)}
|
|
624
608
|
.x12xnipv:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--spacing-4)}
|
|
625
609
|
.xfyiiit:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--spacing-5)}
|
|
@@ -653,19 +637,15 @@
|
|
|
653
637
|
.xnixb3f:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::backdrop{background-color:var(--color-overlay)}
|
|
654
638
|
.x1cpjm7i:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{content:""}
|
|
655
639
|
.x1s928wv:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{content:""}
|
|
656
|
-
.xhkezso:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{display:block}
|
|
657
640
|
.xxxjk75:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{inset-inline-start:-1px}
|
|
658
641
|
.xh7j7mt:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{inset-inline-start:-6px}
|
|
659
642
|
.xph5o2a:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::backdrop{opacity:0}
|
|
660
643
|
.xb3n6bw:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::backdrop{opacity:1}
|
|
661
|
-
.xni466t:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::backdrop{opacity:var(--_sheet-scrim-opacity,1)}
|
|
662
644
|
.x2q1x1w:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{pointer-events:none}
|
|
663
645
|
.xkk1bqk:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{pointer-events:none}
|
|
664
646
|
.x1hmns74:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{position:absolute}
|
|
665
647
|
.x1j6awrg:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{position:absolute}
|
|
666
|
-
.x142juwg:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::backdrop{transition-behavior:allow-discrete}
|
|
667
648
|
.xft5bk6:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::backdrop{transition-duration:var(--duration-medium)}
|
|
668
|
-
.xc0dz0a:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::backdrop{transition-property:opacity,display}
|
|
669
649
|
.x167zut7:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::backdrop{transition-property:opacity}
|
|
670
650
|
.x15h3t91:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::backdrop{transition-timing-function:var(--ease-standard)}
|
|
671
651
|
.x1jg531d:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{z-index:2}
|
|
@@ -678,7 +658,6 @@
|
|
|
678
658
|
.x1mprab4:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{bottom:calc(-1 * var(--spacing-0-5))}
|
|
679
659
|
.x17zp9gg:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{height:10px}
|
|
680
660
|
.x1bymyaz:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{height:10px}
|
|
681
|
-
.xu6fald:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{height:var(--_sheet-keyboard-inset,0px)}
|
|
682
661
|
.x1a9plwg:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{height:var(--spacing-0-5)}
|
|
683
662
|
.xiiru4q:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{height:var(--spacing-0-5)}
|
|
684
663
|
.x1mpa3hi:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{top:-6px}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@astryxdesign/lab",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.3-canary.00bed29",
|
|
4
4
|
"description": "Experimental Astryx components — published to npm only under the @canary dist-tag for early testing; never released as a stable (latest) version.",
|
|
5
5
|
"author": "Meta Open Source",
|
|
6
6
|
"license": "MIT",
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
},
|
|
46
46
|
"peerDependencies": {
|
|
47
47
|
"@stylexjs/stylex": ">=0.10.0",
|
|
48
|
-
"@astryxdesign/core": "0.4.
|
|
48
|
+
"@astryxdesign/core": "0.4.3-canary.00bed29",
|
|
49
49
|
"react": ">=19.0.0",
|
|
50
50
|
"react-dom": ">=19.0.0"
|
|
51
51
|
},
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
"d3-shape": "^3.2.0"
|
|
56
56
|
},
|
|
57
57
|
"devDependencies": {
|
|
58
|
-
"@astryxdesign/cli": "0.4.
|
|
58
|
+
"@astryxdesign/cli": "0.4.3-canary.00bed29",
|
|
59
59
|
"@types/d3-array": "^3.2.2",
|
|
60
60
|
"@types/d3-scale": "^4.0.9",
|
|
61
61
|
"@types/d3-shape": "^3.1.8",
|
|
@@ -583,6 +583,75 @@ describe('Stepper', () => {
|
|
|
583
583
|
});
|
|
584
584
|
});
|
|
585
585
|
|
|
586
|
+
describe('fragment-grouped steps', () => {
|
|
587
|
+
const onTrackSteps = (
|
|
588
|
+
<>
|
|
589
|
+
<Step step={0} label="Cart" />
|
|
590
|
+
<Step step={1} label="Shipping" />
|
|
591
|
+
<Step step={2} label="Payment" />
|
|
592
|
+
</>
|
|
593
|
+
);
|
|
594
|
+
|
|
595
|
+
it('renders on-track steps identically whether they are flat or grouped in a fragment', () => {
|
|
596
|
+
const flat = render(
|
|
597
|
+
<Stepper activeStep={1} indicatorPosition="on-track">
|
|
598
|
+
<Step step={0} label="Cart" />
|
|
599
|
+
<Step step={1} label="Shipping" />
|
|
600
|
+
<Step step={2} label="Payment" />
|
|
601
|
+
</Stepper>,
|
|
602
|
+
);
|
|
603
|
+
const flatHtml = flat.container.innerHTML;
|
|
604
|
+
flat.unmount();
|
|
605
|
+
|
|
606
|
+
const grouped = render(
|
|
607
|
+
<Stepper activeStep={1} indicatorPosition="on-track">
|
|
608
|
+
{onTrackSteps}
|
|
609
|
+
</Stepper>,
|
|
610
|
+
);
|
|
611
|
+
expect(grouped.container.innerHTML).toBe(flatHtml);
|
|
612
|
+
});
|
|
613
|
+
|
|
614
|
+
// The connector's end segments are hidden by CSS keyed to the step's own
|
|
615
|
+
// <li> position, which jsdom can't evaluate — assert the wiring instead:
|
|
616
|
+
// every step carries the same hide-if-first/hide-if-last classes, so no
|
|
617
|
+
// step is singled out by counting children.
|
|
618
|
+
it('gives every grouped step the same structural connector classes', () => {
|
|
619
|
+
render(
|
|
620
|
+
<Stepper activeStep={1} indicatorPosition="on-track">
|
|
621
|
+
{onTrackSteps}
|
|
622
|
+
</Stepper>,
|
|
623
|
+
);
|
|
624
|
+
const items = screen.getAllByRole('listitem');
|
|
625
|
+
expect(items).toHaveLength(3);
|
|
626
|
+
for (const item of items) {
|
|
627
|
+
expect(
|
|
628
|
+
item.querySelector('[class*="otSegHiddenIfFirst"]'),
|
|
629
|
+
).toBeInTheDocument();
|
|
630
|
+
expect(
|
|
631
|
+
item.querySelector('[class*="otSegHiddenIfLast"]'),
|
|
632
|
+
).toBeInTheDocument();
|
|
633
|
+
}
|
|
634
|
+
});
|
|
635
|
+
|
|
636
|
+
it('keeps every grouped step keyboard-activatable', async () => {
|
|
637
|
+
const user = userEvent.setup();
|
|
638
|
+
const handleClick = vi.fn();
|
|
639
|
+
render(
|
|
640
|
+
<Stepper
|
|
641
|
+
activeStep={2}
|
|
642
|
+
indicatorPosition="on-track"
|
|
643
|
+
onStepClick={handleClick}>
|
|
644
|
+
{onTrackSteps}
|
|
645
|
+
</Stepper>,
|
|
646
|
+
);
|
|
647
|
+
screen
|
|
648
|
+
.getByRole('button', {name: 'Go to step 2: Shipping, completed'})
|
|
649
|
+
.focus();
|
|
650
|
+
await user.keyboard('{Enter}');
|
|
651
|
+
expect(handleClick).toHaveBeenCalledWith(1);
|
|
652
|
+
});
|
|
653
|
+
});
|
|
654
|
+
|
|
586
655
|
describe('hasCollapsibleLabels', () => {
|
|
587
656
|
// The collapse is a container query, so jsdom can't evaluate the media
|
|
588
657
|
// condition — assert the opt-in wiring instead: the collapsible class is
|
package/src/index.ts
CHANGED
|
@@ -45,15 +45,6 @@ export * from './Chat';
|
|
|
45
45
|
// Drawer — experimental overlay panel
|
|
46
46
|
export {Drawer, type DrawerProps} from './Drawer';
|
|
47
47
|
|
|
48
|
-
// BottomSheet — mobile touch sheet on a native modal <dialog>
|
|
49
|
-
export {
|
|
50
|
-
BottomSheet,
|
|
51
|
-
type BottomSheetHeight,
|
|
52
|
-
type BottomSheetProps,
|
|
53
|
-
BottomSheetSwitcher,
|
|
54
|
-
type BottomSheetSwitcherProps,
|
|
55
|
-
} from './BottomSheet';
|
|
56
|
-
|
|
57
48
|
// Tour — guided product-tour / NUX walkthrough (facebook/astryx#4239)
|
|
58
49
|
export {
|
|
59
50
|
Tour,
|
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @file BottomSheet.tsx
|
|
3
|
-
* @input Uses React, StyleX, core hooks/utils, BottomSheetPanel, BottomSheetSwitcherContext
|
|
4
|
-
* @output Exports BottomSheet component and BottomSheetProps
|
|
5
|
-
* @position Public BottomSheet router plus private standalone/switcher hosts
|
|
6
|
-
*
|
|
7
|
-
* BottomSheet selects one of two focused hosts. A standalone host owns its
|
|
8
|
-
* native dialog lifecycle; a switcher item participates in the parent's shared
|
|
9
|
-
* dialog and transition state machine. Both render the same BottomSheetPanel,
|
|
10
|
-
* which owns sheet presentation, gestures, mobile-keyboard accommodation, and
|
|
11
|
-
* motion completion.
|
|
12
|
-
*
|
|
13
|
-
* SYNC: When modified, update these files to stay in sync:
|
|
14
|
-
* - /packages/lab/src/BottomSheet/BottomSheetPanel.tsx
|
|
15
|
-
* - /packages/lab/src/BottomSheet/BottomSheet.doc.mjs
|
|
16
|
-
* - /packages/lab/src/BottomSheet/BottomSheet.test.tsx
|
|
17
|
-
* - /packages/lab/src/BottomSheet/BottomSheetSwitcher.tsx
|
|
18
|
-
* - /packages/lab/src/BottomSheet/BottomSheetSwitcher.test.tsx
|
|
19
|
-
* - /apps/storybook/stories/BottomSheet.stories.tsx
|
|
20
|
-
*/
|
|
21
|
-
import { type ReactNode } from 'react';
|
|
22
|
-
import type { BaseProps } from '@astryxdesign/core';
|
|
23
|
-
import type { DialogPurpose } from '@astryxdesign/core/Dialog';
|
|
24
|
-
export type { BottomSheetHeight } from './BottomSheetPanel';
|
|
25
|
-
import type { BottomSheetHeight } from './BottomSheetPanel';
|
|
26
|
-
interface BottomSheetSharedProps extends BaseProps<HTMLDivElement> {
|
|
27
|
-
/** Ref forwarded to the visual sheet panel <div>. */
|
|
28
|
-
ref?: React.Ref<HTMLDivElement>;
|
|
29
|
-
/** Accessible label for the sheet. */
|
|
30
|
-
label: string;
|
|
31
|
-
/** Sheet content, rendered below the grab handle in a scrollable area. */
|
|
32
|
-
children: ReactNode;
|
|
33
|
-
/** Height budget or custom CSS length. Only fully expanded Tall is keyboard-aware. @default 'capped' */
|
|
34
|
-
height?: BottomSheetHeight | number | string;
|
|
35
|
-
/**
|
|
36
|
-
* Configures implicit dismissal behavior, matching Dialog.
|
|
37
|
-
* - required: Blocks swipe, scrim click, and Escape
|
|
38
|
-
* - form: Blocks swipe and scrim click, allows Escape
|
|
39
|
-
* - info: Allows swipe, scrim click, and Escape
|
|
40
|
-
* @default 'info'
|
|
41
|
-
*/
|
|
42
|
-
purpose?: DialogPurpose;
|
|
43
|
-
}
|
|
44
|
-
interface StandaloneBottomSheetProps extends BottomSheetSharedProps {
|
|
45
|
-
isOpen: boolean;
|
|
46
|
-
onOpenChange: (isOpen: boolean) => void;
|
|
47
|
-
hasScrim?: boolean;
|
|
48
|
-
sheetId?: never;
|
|
49
|
-
}
|
|
50
|
-
interface SwitcherBottomSheetProps extends BottomSheetSharedProps {
|
|
51
|
-
sheetId: string;
|
|
52
|
-
isOpen?: never;
|
|
53
|
-
onOpenChange?: never;
|
|
54
|
-
hasScrim?: never;
|
|
55
|
-
}
|
|
56
|
-
export type BottomSheetProps = StandaloneBottomSheetProps | SwitcherBottomSheetProps;
|
|
57
|
-
/**
|
|
58
|
-
* A mobile touch sheet that either owns a native dialog or participates in a
|
|
59
|
-
* BottomSheetSwitcher shared dialog when given a sheetId inside that context.
|
|
60
|
-
*/
|
|
61
|
-
export declare function BottomSheet(props: BottomSheetProps): import("react").JSX.Element;
|
|
62
|
-
export declare namespace BottomSheet {
|
|
63
|
-
var displayName: string;
|
|
64
|
-
}
|
|
65
|
-
//# sourceMappingURL=BottomSheet.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAClD,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,2BAA2B,CAAC;AAkB7D,YAAY,EAAC,iBAAiB,EAAC,MAAM,oBAAoB,CAAC;AAC1D,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,oBAAoB,CAAC;AA2D1D,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;;;;;;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;AA+VxD;;;GAGG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,+BA6BlD;yBA7Be,WAAW"}
|