@astryxdesign/lab 0.7.0-canary.e3c1cfd → 0.7.0-canary.e48e2ef

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.
Files changed (19) hide show
  1. package/dist/MobileTokenizer/MobileTokenizer.js +2 -1
  2. package/dist/SVGIcon/variations.stylex.d.ts +1 -1
  3. package/dist/Schedule/shared.d.ts +42 -42
  4. package/dist/Tour/Tour.d.ts.map +1 -1
  5. package/dist/Tour/Tour.js +8 -5
  6. package/dist/TransferList/TransferList.js +1 -1
  7. package/dist/TransferList/TransferListSelector.d.ts +1 -1
  8. package/dist/TransferList/TransferListSelector.d.ts.map +1 -1
  9. package/dist/TransferList/TransferListSelector.js +14 -15
  10. package/dist/reorderStyles.d.ts +4 -4
  11. package/package.json +4 -4
  12. package/src/ListInput/ListInput.test.tsx +1 -1
  13. package/src/MobileTokenizer/MobileTokenizer.tsx +2 -2
  14. package/src/Tour/Tour.test.tsx +53 -1
  15. package/src/Tour/Tour.tsx +8 -5
  16. package/src/TransferList/TransferList.doc.mjs +9 -7
  17. package/src/TransferList/TransferList.tsx +1 -1
  18. package/src/TransferList/TransferListSelector.test.tsx +44 -5
  19. package/src/TransferList/TransferListSelector.tsx +16 -19
package/dist/MobileTokenizer/MobileTokenizer.js CHANGED
@@ -255,6 +255,7 @@ export function MobileTokenizer({
255
255
  sheetId: "manage",
256
256
  label: label,
257
257
  height: "tall",
258
+ padding: 0,
258
259
  children: /*#__PURE__*/_jsxs("div", {
259
260
  ...{
260
261
  className: "x78zum5 xdt5ytf x5yr21d x2lwn1j xrrkdod xoxd1wu xvmdzux"
@@ -278,7 +279,7 @@ export function MobileTokenizer({
278
279
  setQuery(next);
279
280
  onChangeQuery?.(next);
280
281
  },
281
- xstyle: styles.filterInput
282
+ controlXstyle: styles.filterInput
282
283
  })
283
284
  }), /*#__PURE__*/_jsxs("div", {
284
285
  ...{
package/dist/SVGIcon/variations.stylex.d.ts CHANGED
@@ -29,7 +29,7 @@ export declare const variations: Readonly<{
29
29
  /** Optical size compensation — thicker strokes at smaller sizes */
30
30
  export declare const opticalSize: Readonly<{
31
31
  readonly xsm: Readonly<{
32
- readonly [x: string]: stylex.StyleXClassNameFor<string, "12px" | "2">;
32
+ readonly [x: string]: stylex.StyleXClassNameFor<string, "2" | "12px">;
33
33
  }>;
34
34
  readonly sm: Readonly<{
35
35
  readonly [x: string]: stylex.StyleXClassNameFor<string, "16px" | "1.75">;
package/dist/Schedule/shared.d.ts CHANGED
@@ -222,9 +222,9 @@ export declare const styles: Readonly<{
222
222
  readonly display: stylex.StyleXClassNameFor<"display", "grid">;
223
223
  readonly gridTemplateColumns: stylex.StyleXClassNameFor<"gridTemplateColumns", "minmax(0, 1fr) auto minmax(0, 1fr)">;
224
224
  readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
225
- readonly gap: stylex.StyleXClassNameFor<"gap", "12px">;
226
- readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", "12px">;
227
- readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", "16px">;
225
+ readonly gap: stylex.StyleXClassNameFor<"gap", "0.75rem">;
226
+ readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", "0.75rem">;
227
+ readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", "1rem">;
228
228
  readonly borderBottomWidth: stylex.StyleXClassNameFor<"borderBottomWidth", "1px">;
229
229
  readonly borderBottomStyle: stylex.StyleXClassNameFor<"borderBottomStyle", "solid">;
230
230
  readonly borderBottomColor: stylex.StyleXClassNameFor<"borderBottomColor", "light-dark(#05365919, #F2F4F619)">;
@@ -240,7 +240,7 @@ export declare const styles: Readonly<{
240
240
  readonly headerTitleContent: Readonly<{
241
241
  readonly display: stylex.StyleXClassNameFor<"display", "inline-flex">;
242
242
  readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
243
- readonly gap: stylex.StyleXClassNameFor<"gap", "8px">;
243
+ readonly gap: stylex.StyleXClassNameFor<"gap", "0.5rem">;
244
244
  }>;
245
245
  readonly loadingSpinner: Readonly<{
246
246
  readonly display: stylex.StyleXClassNameFor<"display", "inline-flex">;
@@ -274,8 +274,8 @@ export declare const styles: Readonly<{
274
274
  readonly borderBottomColor: stylex.StyleXClassNameFor<"borderBottomColor", "light-dark(#05365919, #F2F4F619)">;
275
275
  }>;
276
276
  readonly weekdayLabel: Readonly<{
277
- readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", "8px">;
278
- readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", "12px">;
277
+ readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", "0.5rem">;
278
+ readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", "0.75rem">;
279
279
  readonly textAlign: stylex.StyleXClassNameFor<"textAlign", "center">;
280
280
  }>;
281
281
  readonly weekdayHeading: Readonly<{
@@ -302,7 +302,7 @@ export declare const styles: Readonly<{
302
302
  readonly position: stylex.StyleXClassNameFor<"position", "relative">;
303
303
  readonly display: stylex.StyleXClassNameFor<"display", "flex">;
304
304
  readonly flexDirection: stylex.StyleXClassNameFor<"flexDirection", "column">;
305
- readonly gap: stylex.StyleXClassNameFor<"gap", "4px">;
305
+ readonly gap: stylex.StyleXClassNameFor<"gap", "0.25rem">;
306
306
  readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
307
307
  readonly padding: stylex.StyleXClassNameFor<"padding", 0>;
308
308
  readonly borderInlineEndWidth: stylex.StyleXClassNameFor<"borderInlineEndWidth", "1px">;
@@ -332,8 +332,8 @@ export declare const styles: Readonly<{
332
332
  readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "flex-start">;
333
333
  readonly width: stylex.StyleXClassNameFor<"width", "24px">;
334
334
  readonly height: stylex.StyleXClassNameFor<"height", "24px">;
335
- readonly margin: stylex.StyleXClassNameFor<"margin", "2px">;
336
- readonly paddingInlineStart: stylex.StyleXClassNameFor<"paddingInlineStart", "4px">;
335
+ readonly margin: stylex.StyleXClassNameFor<"margin", "0.125rem">;
336
+ readonly paddingInlineStart: stylex.StyleXClassNameFor<"paddingInlineStart", "0.25rem">;
337
337
  readonly paddingInlineEnd: stylex.StyleXClassNameFor<"paddingInlineEnd", 0>;
338
338
  readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", "9999px">;
339
339
  readonly color: stylex.StyleXClassNameFor<"color", "light-dark(#4E606F, #AAAFB5)">;
@@ -345,27 +345,27 @@ export declare const styles: Readonly<{
345
345
  readonly monthEventStack: Readonly<{
346
346
  readonly display: stylex.StyleXClassNameFor<"display", "flex">;
347
347
  readonly flexDirection: stylex.StyleXClassNameFor<"flexDirection", "column">;
348
- readonly gap: stylex.StyleXClassNameFor<"gap", "2px">;
348
+ readonly gap: stylex.StyleXClassNameFor<"gap", "0.125rem">;
349
349
  readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
350
350
  }>;
351
351
  readonly monthChip: (span: number, level: number) => readonly [Readonly<{
352
352
  position: stylex.StyleXClassNameFor<"position", "absolute">;
353
- insetInlineStart: stylex.StyleXClassNameFor<"insetInlineStart", "2px">;
353
+ insetInlineStart: stylex.StyleXClassNameFor<"insetInlineStart", "0.125rem">;
354
354
  insetBlockStart: stylex.StyleXClassNameFor<"insetBlockStart", string>;
355
355
  inlineSize: stylex.StyleXClassNameFor<"inlineSize", string>;
356
356
  minWidth: stylex.StyleXClassNameFor<"minWidth", number>;
357
357
  zIndex: stylex.StyleXClassNameFor<"zIndex", number>;
358
358
  }>, stylex.InlineStyles];
359
359
  readonly monthChipInLastColumn: Readonly<{
360
- readonly inlineSize: stylex.StyleXClassNameFor<"inlineSize", `calc(100% - 2 * ${stylex.StyleXVar<"2px">} - ${stylex.StyleXVar<"1px">})`>;
360
+ readonly inlineSize: stylex.StyleXClassNameFor<"inlineSize", `calc(100% - 2 * ${stylex.StyleXVar<"0.125rem">} - ${stylex.StyleXVar<"1px">})`>;
361
361
  }>;
362
362
  readonly monthChipFocus: Readonly<{
363
363
  readonly zIndex: stylex.StyleXClassNameFor<"zIndex", 1 | 2>;
364
364
  }>;
365
365
  readonly monthMoreButton: Readonly<{
366
366
  readonly position: stylex.StyleXClassNameFor<"position", "absolute">;
367
- readonly insetInlineStart: stylex.StyleXClassNameFor<"insetInlineStart", "2px">;
368
- readonly insetInlineEnd: stylex.StyleXClassNameFor<"insetInlineEnd", `calc(${stylex.StyleXVar<"2px">} + ${stylex.StyleXVar<"1px">})`>;
367
+ readonly insetInlineStart: stylex.StyleXClassNameFor<"insetInlineStart", "0.125rem">;
368
+ readonly insetInlineEnd: stylex.StyleXClassNameFor<"insetInlineEnd", `calc(${stylex.StyleXVar<"0.125rem">} + ${stylex.StyleXVar<"1px">})`>;
369
369
  readonly display: stylex.StyleXClassNameFor<"display", "flex">;
370
370
  readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
371
371
  readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
@@ -374,8 +374,8 @@ export declare const styles: Readonly<{
374
374
  readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "solid">;
375
375
  readonly borderColor: stylex.StyleXClassNameFor<"borderColor", "transparent">;
376
376
  readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", "4px">;
377
- readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", "2px">;
378
- readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", "6px">;
377
+ readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", "0.125rem">;
378
+ readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", "0.375rem">;
379
379
  readonly fontFamily: stylex.StyleXClassNameFor<"fontFamily", "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif">;
380
380
  readonly fontSize: stylex.StyleXClassNameFor<"fontSize", "var(--font-size-sm)">;
381
381
  readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", "1.6667">;
@@ -392,7 +392,7 @@ export declare const styles: Readonly<{
392
392
  readonly monthDayEvents: Readonly<{
393
393
  readonly display: stylex.StyleXClassNameFor<"display", "flex">;
394
394
  readonly flexDirection: stylex.StyleXClassNameFor<"flexDirection", "column">;
395
- readonly gap: stylex.StyleXClassNameFor<"gap", "8px">;
395
+ readonly gap: stylex.StyleXClassNameFor<"gap", "0.5rem">;
396
396
  readonly maxInlineSize: stylex.StyleXClassNameFor<"maxInlineSize", "360px">;
397
397
  }>;
398
398
  readonly monthDayEventButton: Readonly<{
@@ -403,7 +403,7 @@ export declare const styles: Readonly<{
403
403
  readonly monthDayEventList: Readonly<{
404
404
  readonly display: stylex.StyleXClassNameFor<"display", "flex">;
405
405
  readonly flexDirection: stylex.StyleXClassNameFor<"flexDirection", "column">;
406
- readonly gap: stylex.StyleXClassNameFor<"gap", "8px">;
406
+ readonly gap: stylex.StyleXClassNameFor<"gap", "0.5rem">;
407
407
  readonly margin: stylex.StyleXClassNameFor<"margin", 0>;
408
408
  readonly padding: stylex.StyleXClassNameFor<"padding", 0>;
409
409
  readonly listStyle: stylex.StyleXClassNameFor<"listStyle", "none">;
@@ -411,13 +411,13 @@ export declare const styles: Readonly<{
411
411
  readonly eventPill: Readonly<{
412
412
  readonly display: stylex.StyleXClassNameFor<"display", "flex">;
413
413
  readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
414
- readonly gap: stylex.StyleXClassNameFor<"gap", "4px">;
414
+ readonly gap: stylex.StyleXClassNameFor<"gap", "0.25rem">;
415
415
  readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
416
416
  readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", "1px">;
417
417
  readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "solid">;
418
418
  readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", "4px">;
419
- readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", "2px">;
420
- readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", "6px">;
419
+ readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", "0.125rem">;
420
+ readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", "0.375rem">;
421
421
  readonly fontSize: stylex.StyleXClassNameFor<"fontSize", "var(--font-size-sm)">;
422
422
  readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", "1.6667">;
423
423
  readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", "500">;
@@ -442,7 +442,7 @@ export declare const styles: Readonly<{
442
442
  readonly display: stylex.StyleXClassNameFor<"display", "flex">;
443
443
  readonly flexWrap: stylex.StyleXClassNameFor<"flexWrap", "wrap">;
444
444
  readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "baseline">;
445
- readonly columnGap: stylex.StyleXClassNameFor<"columnGap", "4px">;
445
+ readonly columnGap: stylex.StyleXClassNameFor<"columnGap", "0.25rem">;
446
446
  readonly flexGrow: stylex.StyleXClassNameFor<"flexGrow", 1>;
447
447
  readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
448
448
  readonly blockSize: stylex.StyleXClassNameFor<"blockSize", `calc(${stylex.StyleXVar<"var(--font-size-sm)">} * ${stylex.StyleXVar<"1.6667">})`>;
@@ -528,7 +528,7 @@ export declare const styles: Readonly<{
528
528
  readonly flexDirection: stylex.StyleXClassNameFor<"flexDirection", "column">;
529
529
  readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
530
530
  readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "center">;
531
- readonly gap: stylex.StyleXClassNameFor<"gap", "2px">;
531
+ readonly gap: stylex.StyleXClassNameFor<"gap", "0.125rem">;
532
532
  readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
533
533
  readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "light-dark(#FFFFFF, #1F1F22)">;
534
534
  readonly borderInlineEndWidth: stylex.StyleXClassNameFor<"borderInlineEndWidth", "1px">;
@@ -548,7 +548,7 @@ export declare const styles: Readonly<{
548
548
  readonly display: stylex.StyleXClassNameFor<"display", "inline-flex">;
549
549
  readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
550
550
  readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "center">;
551
- readonly gap: stylex.StyleXClassNameFor<"gap", "4px">;
551
+ readonly gap: stylex.StyleXClassNameFor<"gap", "0.25rem">;
552
552
  }>;
553
553
  readonly timeGridDayNumber: Readonly<{
554
554
  readonly display: stylex.StyleXClassNameFor<"display", "inline-flex">;
@@ -570,8 +570,8 @@ export declare const styles: Readonly<{
570
570
  readonly insetBlockStart: stylex.StyleXClassNameFor<"insetBlockStart", "56px">;
571
571
  readonly insetInlineStart: stylex.StyleXClassNameFor<"insetInlineStart", 0>;
572
572
  readonly zIndex: stylex.StyleXClassNameFor<"zIndex", 3>;
573
- readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", "4px">;
574
- readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", "8px">;
573
+ readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", "0.25rem">;
574
+ readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", "0.5rem">;
575
575
  readonly display: stylex.StyleXClassNameFor<"display", "flex">;
576
576
  readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
577
577
  readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "flex-end">;
@@ -617,7 +617,7 @@ export declare const styles: Readonly<{
617
617
  gridColumn: stylex.StyleXClassNameFor<"gridColumn", string>;
618
618
  alignSelf: stylex.StyleXClassNameFor<"alignSelf", "start">;
619
619
  minWidth: stylex.StyleXClassNameFor<"minWidth", number>;
620
- marginInlineStart: stylex.StyleXClassNameFor<"marginInlineStart", "2px">;
620
+ marginInlineStart: stylex.StyleXClassNameFor<"marginInlineStart", "0.125rem">;
621
621
  marginInlineEnd: stylex.StyleXClassNameFor<"marginInlineEnd", string>;
622
622
  marginBlockStart: stylex.StyleXClassNameFor<"marginBlockStart", string>;
623
623
  }>, stylex.InlineStyles];
@@ -636,8 +636,8 @@ export declare const styles: Readonly<{
636
636
  readonly position: stylex.StyleXClassNameFor<"position", "absolute">;
637
637
  readonly insetInline: stylex.StyleXClassNameFor<"insetInline", 0>;
638
638
  readonly transform: stylex.StyleXClassNameFor<"transform", "translateY(-50%)">;
639
- readonly paddingInlineStart: stylex.StyleXClassNameFor<"paddingInlineStart", "4px">;
640
- readonly paddingInlineEnd: stylex.StyleXClassNameFor<"paddingInlineEnd", "4px">;
639
+ readonly paddingInlineStart: stylex.StyleXClassNameFor<"paddingInlineStart", "0.25rem">;
640
+ readonly paddingInlineEnd: stylex.StyleXClassNameFor<"paddingInlineEnd", "0.25rem">;
641
641
  readonly color: stylex.StyleXClassNameFor<"color", "light-dark(#4E606F, #AAAFB5)">;
642
642
  readonly fontSize: stylex.StyleXClassNameFor<"fontSize", "var(--font-size-sm)">;
643
643
  readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", "1.6667">;
@@ -683,9 +683,9 @@ export declare const styles: Readonly<{
683
683
  readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", "1px">;
684
684
  readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "solid">;
685
685
  readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", "4px">;
686
- readonly paddingBlockStart: stylex.StyleXClassNameFor<"paddingBlockStart", "2px">;
687
- readonly paddingBlockEnd: stylex.StyleXClassNameFor<"paddingBlockEnd", "4px">;
688
- readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", "4px">;
686
+ readonly paddingBlockStart: stylex.StyleXClassNameFor<"paddingBlockStart", "0.125rem">;
687
+ readonly paddingBlockEnd: stylex.StyleXClassNameFor<"paddingBlockEnd", "0.25rem">;
688
+ readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", "0.25rem">;
689
689
  readonly fontSize: stylex.StyleXClassNameFor<"fontSize", "var(--font-size-sm)">;
690
690
  readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", "1.6667">;
691
691
  readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", "500">;
@@ -710,7 +710,7 @@ export declare const styles: Readonly<{
710
710
  readonly zIndex: stylex.StyleXClassNameFor<"zIndex", 1 | null>;
711
711
  }>;
712
712
  readonly eventPopoverBody: Readonly<{
713
- readonly maxBlockSize: stylex.StyleXClassNameFor<"maxBlockSize", `calc(100dvb - 2 * ${stylex.StyleXVar<"16px">} - 2 * ${stylex.StyleXVar<"12px">})` | `calc(100vh - 2 * ${stylex.StyleXVar<"16px">} - 2 * ${stylex.StyleXVar<"12px">})`>;
713
+ readonly maxBlockSize: stylex.StyleXClassNameFor<"maxBlockSize", `calc(100dvb - 2 * ${stylex.StyleXVar<"1rem">} - 2 * ${stylex.StyleXVar<"0.75rem">})` | `calc(100vh - 2 * ${stylex.StyleXVar<"1rem">} - 2 * ${stylex.StyleXVar<"0.75rem">})`>;
714
714
  }>;
715
715
  readonly timedEventPosition: (top: number, height: number, inlineStart: number, inlineSize: number) => readonly [Readonly<{
716
716
  top: stylex.StyleXClassNameFor<"top", string>;
@@ -746,9 +746,9 @@ export declare const styles: Readonly<{
746
746
  readonly display: stylex.StyleXClassNameFor<"display", "grid">;
747
747
  readonly gridTemplateColumns: stylex.StyleXClassNameFor<"gridTemplateColumns", "88px minmax(0, 1fr)">;
748
748
  readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "start">;
749
- readonly columnGap: stylex.StyleXClassNameFor<"columnGap", "12px">;
750
- readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", "12px">;
751
- readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", "12px">;
749
+ readonly columnGap: stylex.StyleXClassNameFor<"columnGap", "0.75rem">;
750
+ readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", "0.75rem">;
751
+ readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", "0.75rem">;
752
752
  readonly borderBottomWidth: stylex.StyleXClassNameFor<"borderBottomWidth", "1px">;
753
753
  readonly borderBottomStyle: stylex.StyleXClassNameFor<"borderBottomStyle", "solid">;
754
754
  readonly borderBottomColor: stylex.StyleXClassNameFor<"borderBottomColor", "light-dark(#05365919, #F2F4F619)">;
@@ -761,9 +761,9 @@ export declare const styles: Readonly<{
761
761
  readonly display: stylex.StyleXClassNameFor<"display", "inline-flex">;
762
762
  readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
763
763
  readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "flex-start">;
764
- readonly columnGap: stylex.StyleXClassNameFor<"columnGap", "8px">;
765
- readonly marginBlockStart: stylex.StyleXClassNameFor<"marginBlockStart", `calc(${stylex.StyleXVar<"4px">} * -1)`>;
766
- readonly marginInlineStart: stylex.StyleXClassNameFor<"marginInlineStart", `calc(${stylex.StyleXVar<"4px">} * -1)`>;
764
+ readonly columnGap: stylex.StyleXClassNameFor<"columnGap", "0.5rem">;
765
+ readonly marginBlockStart: stylex.StyleXClassNameFor<"marginBlockStart", `calc(${stylex.StyleXVar<"0.25rem">} * -1)`>;
766
+ readonly marginInlineStart: stylex.StyleXClassNameFor<"marginInlineStart", `calc(${stylex.StyleXVar<"0.25rem">} * -1)`>;
767
767
  }>;
768
768
  readonly listDayNumber: Readonly<{
769
769
  readonly display: stylex.StyleXClassNameFor<"display", "inline-flex">;
@@ -785,13 +785,13 @@ export declare const styles: Readonly<{
785
785
  readonly gridColumn: stylex.StyleXClassNameFor<"gridColumn", 2>;
786
786
  readonly display: stylex.StyleXClassNameFor<"display", "flex">;
787
787
  readonly flexDirection: stylex.StyleXClassNameFor<"flexDirection", "column">;
788
- readonly gap: stylex.StyleXClassNameFor<"gap", "8px">;
788
+ readonly gap: stylex.StyleXClassNameFor<"gap", "0.5rem">;
789
789
  readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
790
790
  }>;
791
791
  readonly listNowRow: Readonly<{
792
792
  readonly position: stylex.StyleXClassNameFor<"position", "relative">;
793
793
  readonly height: stylex.StyleXClassNameFor<"height", "10px">;
794
- readonly marginBlock: stylex.StyleXClassNameFor<"marginBlock", "2px">;
794
+ readonly marginBlock: stylex.StyleXClassNameFor<"marginBlock", "0.125rem">;
795
795
  readonly '::before': stylex.StyleXClassNameFor<"::before", {
796
796
  readonly content: "\"\"";
797
797
  readonly position: "absolute";
@@ -816,7 +816,7 @@ export declare const styles: Readonly<{
816
816
  readonly display: stylex.StyleXClassNameFor<"display", "grid">;
817
817
  readonly gridTemplateColumns: stylex.StyleXClassNameFor<"gridTemplateColumns", "12px 144px minmax(0, 1fr)">;
818
818
  readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
819
- readonly gap: stylex.StyleXClassNameFor<"gap", "8px">;
819
+ readonly gap: stylex.StyleXClassNameFor<"gap", "0.5rem">;
820
820
  readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
821
821
  }>;
822
822
  readonly listEventDot: Readonly<{
package/dist/Tour/Tour.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Tour.d.ts","sourceRoot":"","sources":["../../src/Tour/Tour.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,EAA4C,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAChF,OAAO,EAEL,KAAK,iBAAiB,EAEvB,MAAM,eAAe,CAAC;AAEvB,MAAM,WAAW,SAAS;IACxB;;;;OAIG;IACH,QAAQ,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;;OAKG;IACH,SAAS,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC/C;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,WAAmB,EACnB,gBAAwB,GACzB,EAAE,SAAS,+BAuEX;yBA7Ee,IAAI"}
1
+ {"version":3,"file":"Tour.d.ts","sourceRoot":"","sources":["../../src/Tour/Tour.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,EAAiC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AACrE,OAAO,EAEL,KAAK,iBAAiB,EAEvB,MAAM,eAAe,CAAC;AAEvB,MAAM,WAAW,SAAS;IACxB;;;;OAIG;IACH,QAAQ,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;;OAKG;IACH,SAAS,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC/C;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,WAAmB,EACnB,gBAAwB,GACzB,EAAE,SAAS,+BA0EX;yBAhFe,IAAI"}
package/dist/Tour/Tour.js CHANGED
@@ -28,7 +28,7 @@
28
28
  * - /packages/lab/src/Tour/Tour.test.tsx (tests for new/changed behavior)
29
29
  * - /packages/lab/src/Tour/index.ts (exports if types change)
30
30
  */
31
- import { useCallback, useEffect, useMemo, useState } from 'react';
31
+ import { useCallback, useMemo, useState } from 'react';
32
32
  import { TourContext } from "./TourContext.js";
33
33
  import { jsx as _jsx } from "react/jsx-runtime";
34
34
  /**
@@ -68,13 +68,16 @@ export function Tour({
68
68
  };
69
69
  }, []);
70
70
 
71
- // Reset to the first step whenever the tour is (re)started, so a dismissed
72
- // tour begins from the top next time isActive flips back on.
73
- useEffect(() => {
71
+ // Reset to the first step when the tour is deactivated, so a dismissed tour
72
+ // begins from the top next time isActive flips back on. Adjusted during
73
+ // render, so no commit carries the old step past deactivation.
74
+ const [wasActive, setWasActive] = useState(isActive);
75
+ if (!Object.is(wasActive, isActive)) {
76
+ setWasActive(isActive);
74
77
  if (!isActive) {
75
78
  setActiveStepIndex(0);
76
79
  }
77
- }, [isActive]);
80
+ }
78
81
  const stepCount = stepIds.length;
79
82
  const onNext = useCallback(() => {
80
83
  // Runs from a click/imperative call (never during render), so branch on the
package/dist/TransferList/TransferList.js CHANGED
@@ -839,7 +839,7 @@ export function TransferList({
839
839
  }),
840
840
  hasClear: true,
841
841
  width: "100%",
842
- xstyle: styles.search,
842
+ controlXstyle: styles.search,
843
843
  onChange: handleSearch
844
844
  })
845
845
  }), /*#__PURE__*/_jsx(VisuallyHidden, {
package/dist/TransferList/TransferListSelector.d.ts CHANGED
@@ -12,7 +12,7 @@
12
12
  import { type ReactNode } from 'react';
13
13
  import { type ComplexSelectorProps } from '@astryxdesign/core/ComplexSelector';
14
14
  import { type TransferListProps } from './TransferList';
15
- type TransferListSelectorShellProp = 'label' | 'triggerLabel' | 'isLabelHidden' | 'description' | 'isOptional' | 'isRequired' | 'isDisabled' | 'isLoading' | 'status' | 'statusVariant' | 'labelTooltip' | 'size' | 'width' | 'placement' | 'xstyle' | 'className' | 'style' | 'data-testid';
15
+ type TransferListSelectorShellProp = 'label' | 'triggerLabel' | 'isLabelHidden' | 'description' | 'isOptional' | 'isRequired' | 'isDisabled' | 'isLoading' | 'status' | 'statusVariant' | 'labelTooltip' | 'size' | 'width' | 'placement' | 'controlXstyle' | 'controlClassName' | 'controlStyle' | 'data-testid';
16
16
  type TransferListContentProp = 'options' | 'selectedLabel' | 'availableLabel' | 'hasSearch' | 'searchLabel' | 'searchPlaceholder' | 'isReorderable' | 'hasSelectAll' | 'hasClear' | 'renderOption' | 'selectedEmptyText' | 'availableEmptyText' | 'noResultsText';
17
17
  export type TransferListSelectorCommitBehavior = 'immediate' | 'staged';
18
18
  export type TransferListSelectorProps<T extends string = string> = Pick<ComplexSelectorProps<readonly T[]>, TransferListSelectorShellProp> & Pick<TransferListProps<T>, TransferListContentProp> & {
package/dist/TransferList/TransferListSelector.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TransferListSelector.d.ts","sourceRoot":"","sources":["../../src/TransferList/TransferListSelector.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,EAA2C,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAG/E,OAAO,EAEL,KAAK,oBAAoB,EAC1B,MAAM,oCAAoC,CAAC;AAI5C,OAAO,EAAe,KAAK,iBAAiB,EAAC,MAAM,gBAAgB,CAAC;AAsDpE,KAAK,6BAA6B,GAC9B,OAAO,GACP,cAAc,GACd,eAAe,GACf,aAAa,GACb,YAAY,GACZ,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,QAAQ,GACR,eAAe,GACf,cAAc,GACd,MAAM,GACN,OAAO,GACP,WAAW,GACX,QAAQ,GACR,WAAW,GACX,OAAO,GACP,aAAa,CAAC;AAElB,KAAK,uBAAuB,GACxB,SAAS,GACT,eAAe,GACf,gBAAgB,GAChB,WAAW,GACX,aAAa,GACb,mBAAmB,GACnB,eAAe,GACf,cAAc,GACd,UAAU,GACV,cAAc,GACd,mBAAmB,GACnB,oBAAoB,GACpB,eAAe,CAAC;AAEpB,MAAM,MAAM,kCAAkC,GAAG,WAAW,GAAG,QAAQ,CAAC;AAExE,MAAM,MAAM,yBAAyB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,IAAI,CACrE,oBAAoB,CAAC,SAAS,CAAC,EAAE,CAAC,EAClC,6BAA6B,CAC9B,GACC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,uBAAuB,CAAC,GAAG;IACpD,mDAAmD;IACnD,KAAK,EAAE,SAAS,CAAC,EAAE,CAAC;IACpB,4CAA4C;IAC5C,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,EAAE,KAAK,IAAI,CAAC;IACxC,8DAA8D;IAC9D,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,EAAE,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7D;;;OAGG;IACH,cAAc,CAAC,EAAE,kCAAkC,CAAC;IACpD,yFAAyF;IACzF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2FAA2F;IAC3F,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AA+BJ;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,EAC9D,KAAK,EACL,WAAW,EACX,OAAO,EACP,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,cAA4B,EAC5B,YAAY,EACZ,UAAU,EACV,SAAS,EACT,KAAK,EACL,UAAU,EAAE,mBAAmB,EAC/B,WAAW,EAAE,oBAAoB,EACjC,aAAa,EACb,cAAc,EACd,SAAS,EACT,WAAW,EACX,iBAAiB,EACjB,aAAa,EACb,YAAY,EACZ,QAAQ,EACR,YAAY,EACZ,iBAAiB,EACjB,kBAAkB,EAClB,aAAa,EACb,GAAG,aAAa,EACjB,EAAE,yBAAyB,CAAC,CAAC,CAAC,GAAG,SAAS,CAqI1C;yBAhKe,oBAAoB"}
1
+ {"version":3,"file":"TransferListSelector.d.ts","sourceRoot":"","sources":["../../src/TransferList/TransferListSelector.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,EAA2C,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAG/E,OAAO,EAEL,KAAK,oBAAoB,EAC1B,MAAM,oCAAoC,CAAC;AAI5C,OAAO,EAAe,KAAK,iBAAiB,EAAC,MAAM,gBAAgB,CAAC;AAsDpE,KAAK,6BAA6B,GAC9B,OAAO,GACP,cAAc,GACd,eAAe,GACf,aAAa,GACb,YAAY,GACZ,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,QAAQ,GACR,eAAe,GACf,cAAc,GACd,MAAM,GACN,OAAO,GACP,WAAW,GACX,eAAe,GACf,kBAAkB,GAClB,cAAc,GACd,aAAa,CAAC;AAElB,KAAK,uBAAuB,GACxB,SAAS,GACT,eAAe,GACf,gBAAgB,GAChB,WAAW,GACX,aAAa,GACb,mBAAmB,GACnB,eAAe,GACf,cAAc,GACd,UAAU,GACV,cAAc,GACd,mBAAmB,GACnB,oBAAoB,GACpB,eAAe,CAAC;AAEpB,MAAM,MAAM,kCAAkC,GAAG,WAAW,GAAG,QAAQ,CAAC;AAExE,MAAM,MAAM,yBAAyB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,IAAI,CACrE,oBAAoB,CAAC,SAAS,CAAC,EAAE,CAAC,EAClC,6BAA6B,CAC9B,GACC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,uBAAuB,CAAC,GAAG;IACpD,mDAAmD;IACnD,KAAK,EAAE,SAAS,CAAC,EAAE,CAAC;IACpB,4CAA4C;IAC5C,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,EAAE,KAAK,IAAI,CAAC;IACxC,8DAA8D;IAC9D,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,EAAE,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7D;;;OAGG;IACH,cAAc,CAAC,EAAE,kCAAkC,CAAC;IACpD,yFAAyF;IACzF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2FAA2F;IAC3F,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AA+BJ;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,EAC9D,KAAK,EACL,WAAW,EACX,OAAO,EACP,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,cAA4B,EAC5B,YAAY,EACZ,UAAU,EACV,SAAS,EACT,KAAK,EACL,UAAU,EAAE,mBAAmB,EAC/B,WAAW,EAAE,oBAAoB,EACjC,aAAa,EACb,cAAc,EACd,SAAS,EACT,WAAW,EACX,iBAAiB,EACjB,aAAa,EACb,YAAY,EACZ,QAAQ,EACR,YAAY,EACZ,iBAAiB,EACjB,kBAAkB,EAClB,aAAa,EACb,GAAG,aAAa,EACjB,EAAE,yBAAyB,CAAC,CAAC,CAAC,GAAG,SAAS,CAkI1C;yBA7Je,oBAAoB"}
package/dist/TransferList/TransferListSelector.js CHANGED
@@ -115,24 +115,23 @@ export function TransferListSelector({
115
115
  const applyLabel = applyLabelFromProps ?? t('@astryx.transferListSelector.apply');
116
116
  const cancelLabel = cancelLabelFromProps ?? t('@astryx.transferListSelector.cancel');
117
117
  const [draftValue, setDraftValue] = useState(value);
118
- const previousAppliedValueRef = useRef([...value]);
119
- const previousCommitBehaviorRef = useRef(commitBehavior);
120
118
  const resetDraft = useCallback(() => {
121
119
  setDraftValue([...value]);
122
120
  }, [value]);
123
- useEffect(() => {
124
- const previousAppliedValue = previousAppliedValueRef.current;
125
- previousAppliedValueRef.current = [...value];
126
- if (!areOrderedValuesEqual(previousAppliedValue, value)) {
127
- resetDraft();
128
- }
129
- }, [resetDraft, value]);
130
- useEffect(() => {
131
- if (previousCommitBehaviorRef.current !== commitBehavior) {
132
- resetDraft();
133
- }
134
- previousCommitBehaviorRef.current = commitBehavior;
135
- }, [commitBehavior, resetDraft]);
121
+
122
+ // A changed applied value or commit behavior discards the staged draft.
123
+ // Adjusted during render, so no commit paints the discarded draft.
124
+ const [draftSource, setDraftSource] = useState(() => ({
125
+ value: [...value],
126
+ commitBehavior
127
+ }));
128
+ if (!areOrderedValuesEqual(draftSource.value, value) || !Object.is(draftSource.commitBehavior, commitBehavior)) {
129
+ setDraftSource({
130
+ value: [...value],
131
+ commitBehavior
132
+ });
133
+ setDraftValue([...value]);
134
+ }
136
135
  const resolvedWidth = typeof width === 'number' ? `${width}px` : width ?? DEFAULT_SELECTOR_WIDTH;
137
136
  return /*#__PURE__*/_jsx(ComplexSelector, {
138
137
  ...selectorProps,
package/dist/reorderStyles.d.ts CHANGED
@@ -32,11 +32,11 @@ export declare const reorderStyles: Readonly<{
32
32
  readonly dropBefore: Readonly<{
33
33
  readonly position: stylex.StyleXClassNameFor<"position", "relative">;
34
34
  readonly '::before': stylex.StyleXClassNameFor<"::before", {
35
- readonly insetBlockStart: `calc(-1 * ${stylex.StyleXVar<"2px">})`;
35
+ readonly insetBlockStart: `calc(-1 * ${stylex.StyleXVar<"0.125rem">})`;
36
36
  readonly content: string;
37
37
  readonly position: "absolute";
38
38
  readonly insetInline: number;
39
- readonly height: stylex.StyleXVar<"2px">;
39
+ readonly height: stylex.StyleXVar<"0.125rem">;
40
40
  readonly borderRadius: stylex.StyleXVar<"9999px">;
41
41
  readonly backgroundColor: stylex.StyleXVar<"light-dark(#0064E0, #2694FE)">;
42
42
  readonly pointerEvents: "none";
@@ -46,11 +46,11 @@ export declare const reorderStyles: Readonly<{
46
46
  readonly dropAfter: Readonly<{
47
47
  readonly position: stylex.StyleXClassNameFor<"position", "relative">;
48
48
  readonly '::after': stylex.StyleXClassNameFor<"::after", {
49
- readonly insetBlockEnd: `calc(-1 * ${stylex.StyleXVar<"2px">})`;
49
+ readonly insetBlockEnd: `calc(-1 * ${stylex.StyleXVar<"0.125rem">})`;
50
50
  readonly content: string;
51
51
  readonly position: "absolute";
52
52
  readonly insetInline: number;
53
- readonly height: stylex.StyleXVar<"2px">;
53
+ readonly height: stylex.StyleXVar<"0.125rem">;
54
54
  readonly borderRadius: stylex.StyleXVar<"9999px">;
55
55
  readonly backgroundColor: stylex.StyleXVar<"light-dark(#0064E0, #2694FE)">;
56
56
  readonly pointerEvents: "none";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@astryxdesign/lab",
3
- "version": "0.7.0-canary.e3c1cfd",
3
+ "version": "0.7.0-canary.e48e2ef",
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",
@@ -47,7 +47,7 @@
47
47
  },
48
48
  "peerDependencies": {
49
49
  "@stylexjs/stylex": ">=0.10.0",
50
- "@astryxdesign/core": "0.7.0-canary.e3c1cfd",
50
+ "@astryxdesign/core": "0.7.0-canary.e48e2ef",
51
51
  "react": ">=19.0.0",
52
52
  "react-dom": ">=19.0.0"
53
53
  },
@@ -57,8 +57,8 @@
57
57
  "d3-shape": "^3.2.0"
58
58
  },
59
59
  "devDependencies": {
60
- "@astryxdesign/a11y-spec": "0.7.0-canary.e3c1cfd",
61
- "@astryxdesign/cli": "0.7.0-canary.e3c1cfd",
60
+ "@astryxdesign/a11y-spec": "0.7.0-canary.e48e2ef",
61
+ "@astryxdesign/cli": "0.7.0-canary.e48e2ef",
62
62
  "@babel/cli": "^7.29.7",
63
63
  "@babel/core": "^7.29.7",
64
64
  "@babel/preset-react": "^7.29.7",
package/src/ListInput/ListInput.test.tsx CHANGED
@@ -535,7 +535,7 @@ describe('ListInput', () => {
535
535
  expect(addedAnimationIndex).toBeGreaterThanOrEqual(0);
536
536
  expect(animate).toHaveBeenCalledTimes(1);
537
537
  expect(animate.mock.calls[addedAnimationIndex]).toEqual([
538
- [{transform: 'translateY(8px)'}, {transform: 'translateY(0)'}],
538
+ [{transform: 'translateY(0.5rem)'}, {transform: 'translateY(0)'}],
539
539
  {
540
540
  duration: 230,
541
541
  easing: 'cubic-bezier(0.24, 1, 0.4, 1)',
package/src/MobileTokenizer/MobileTokenizer.tsx CHANGED
@@ -399,7 +399,7 @@ export function MobileTokenizer<T extends SearchableItem>({
399
399
  <BottomSheetSwitcher
400
400
  activeSheet={activeSheet}
401
401
  onActiveSheetChange={id => setActiveSheet(id as SheetId | null)}>
402
- <BottomSheet sheetId="manage" label={label} height="tall">
402
+ <BottomSheet sheetId="manage" label={label} height="tall" padding={0}>
403
403
  <div {...stylex.props(styles.sheetBody)}>
404
404
  <div {...stylex.props(styles.filterRow)}>
405
405
  <TextInput
@@ -417,7 +417,7 @@ export function MobileTokenizer<T extends SearchableItem>({
417
417
  setQuery(next);
418
418
  onChangeQuery?.(next);
419
419
  }}
420
- xstyle={styles.filterInput}
420
+ controlXstyle={styles.filterInput}
421
421
  />
422
422
  </div>
423
423
  <div
package/src/Tour/Tour.test.tsx CHANGED
@@ -12,7 +12,7 @@
12
12
 
13
13
  import {describe, it, expect, vi, beforeAll} from 'vitest';
14
14
  import {render, screen, fireEvent} from '@testing-library/react';
15
- import {useRef, useState} from 'react';
15
+ import {Profiler, useRef, useState} from 'react';
16
16
  import {Tour} from './Tour';
17
17
  import {TourStep} from './TourStep';
18
18
  import {useTour} from './useTour';
@@ -259,3 +259,55 @@ describe('useTour', () => {
259
259
  expect(last.last).toBe(false);
260
260
  });
261
261
  });
262
+
263
+ describe('Tour reset timing', () => {
264
+ function StepProbe() {
265
+ const tour = useTour();
266
+ return <output data-testid="step-index">{tour?.activeStepIndex}</output>;
267
+ }
268
+
269
+ function Harness({isActive}: {isActive: boolean}) {
270
+ const aRef = useRef<HTMLButtonElement>(null);
271
+ const bRef = useRef<HTMLButtonElement>(null);
272
+ return (
273
+ <>
274
+ <button type="button" ref={aRef}>
275
+ Target A
276
+ </button>
277
+ <button type="button" ref={bRef}>
278
+ Target B
279
+ </button>
280
+ <Tour isActive={isActive} onDismiss={() => {}}>
281
+ <StepProbe />
282
+ <TourStep targetRef={aRef} heading="First">
283
+ First body
284
+ </TourStep>
285
+ <TourStep targetRef={bRef} heading="Second">
286
+ Second body
287
+ </TourStep>
288
+ </Tour>
289
+ </>
290
+ );
291
+ }
292
+
293
+ it('resets to the first step in the same commit that deactivates the tour', () => {
294
+ const frames: string[] = [];
295
+ const onRender = () =>
296
+ frames.push(screen.getByTestId('step-index').textContent ?? '');
297
+ const ui = (isActive: boolean) => (
298
+ <Profiler id="tour" onRender={onRender}>
299
+ <Harness isActive={isActive} />
300
+ </Profiler>
301
+ );
302
+ const {rerender} = render(ui(true));
303
+ fireEvent.click(screen.getByText('Next'));
304
+ expect(screen.getByTestId('step-index')).toHaveTextContent('1');
305
+
306
+ frames.length = 0;
307
+ rerender(ui(false));
308
+
309
+ expect(frames.length).toBeGreaterThan(0);
310
+ expect(frames).not.toContain('1');
311
+ expect(screen.getByTestId('step-index')).toHaveTextContent('0');
312
+ });
313
+ });
package/src/Tour/Tour.tsx CHANGED
@@ -29,7 +29,7 @@
29
29
  * - /packages/lab/src/Tour/index.ts (exports if types change)
30
30
  */
31
31
 
32
- import {useCallback, useEffect, useMemo, useState, type ReactNode} from 'react';
32
+ import {useCallback, useMemo, useState, type ReactNode} from 'react';
33
33
  import {
34
34
  TourContext,
35
35
  type TourDismissSource,
@@ -108,13 +108,16 @@ export function Tour({
108
108
  };
109
109
  }, []);
110
110
 
111
- // Reset to the first step whenever the tour is (re)started, so a dismissed
112
- // tour begins from the top next time isActive flips back on.
113
- useEffect(() => {
111
+ // Reset to the first step when the tour is deactivated, so a dismissed tour
112
+ // begins from the top next time isActive flips back on. Adjusted during
113
+ // render, so no commit carries the old step past deactivation.
114
+ const [wasActive, setWasActive] = useState(isActive);
115
+ if (!Object.is(wasActive, isActive)) {
116
+ setWasActive(isActive);
114
117
  if (!isActive) {
115
118
  setActiveStepIndex(0);
116
119
  }
117
- }, [isActive]);
120
+ }
118
121
 
119
122
  const stepCount = stepIds.length;
120
123
 
package/src/TransferList/TransferList.doc.mjs CHANGED
@@ -239,24 +239,26 @@ export const docs = {
239
239
  'Optional async action run after each immediate commit or a changed staged Apply; drives optimistic and busy state.',
240
240
  },
241
241
  {
242
- name: 'xstyle',
242
+ name: 'controlXstyle',
243
243
  type: 'StyleXStyles',
244
- description: 'StyleX styles for the external selector field.',
244
+ description:
245
+ "StyleX styles for the external selector's bordered control box.",
245
246
  },
246
247
  {
247
- name: 'className',
248
+ name: 'controlClassName',
248
249
  type: 'string',
249
- description: 'Class name applied to the external selector field.',
250
+ description: "Class name applied to the external selector's control box.",
250
251
  },
251
252
  {
252
- name: 'style',
253
+ name: 'controlStyle',
253
254
  type: 'CSSProperties',
254
- description: 'Inline styles applied to the external selector field.',
255
+ description:
256
+ "Inline styles applied to the external selector's control box.",
255
257
  },
256
258
  {
257
259
  name: 'data-testid',
258
260
  type: 'string',
259
- description: 'Test ID for the selector trigger container.',
261
+ description: 'Test ID for the selector trigger button.',
260
262
  },
261
263
  ],
262
264
  components: [
package/src/TransferList/TransferList.tsx CHANGED
@@ -1216,7 +1216,7 @@ export function TransferList<T extends string = string>({
1216
1216
  startIcon={<Icon icon="search" size="sm" color="secondary" />}
1217
1217
  hasClear
1218
1218
  width="100%"
1219
- xstyle={styles.search}
1219
+ controlXstyle={styles.search}
1220
1220
  onChange={handleSearch}
1221
1221
  />
1222
1222
  </div>
package/src/TransferList/TransferListSelector.test.tsx CHANGED
@@ -9,7 +9,7 @@
9
9
  * SYNC: When TransferListSelector.tsx behavior changes, update this test.
10
10
  */
11
11
 
12
- import {useState} from 'react';
12
+ import {Profiler, useState} from 'react';
13
13
  import {afterAll, beforeEach, describe, expect, it, vi} from 'vitest';
14
14
  import {
15
15
  fireEvent,
@@ -557,10 +557,10 @@ describe('TransferListSelector', () => {
557
557
  expect(
558
558
  screen.getByText('Choose the columns shown in the table.'),
559
559
  ).toBeVisible();
560
- expect(screen.getByTestId('column-selector')).toHaveAttribute(
561
- 'data-size',
562
- 'sm',
563
- );
560
+ // data-testid lands on the trigger button inside the control box.
561
+ expect(
562
+ screen.getByTestId('column-selector').closest('.astryx-complex-selector'),
563
+ ).toHaveAttribute('data-size', 'sm');
564
564
  expect(
565
565
  screen.getByRole('button', {name: 'Table columns'}),
566
566
  ).toHaveTextContent('Customize columns');
@@ -603,3 +603,42 @@ describe('TransferListSelector', () => {
603
603
  );
604
604
  });
605
605
  });
606
+
607
+ describe('TransferListSelector draft reset timing', () => {
608
+ it('replaces a staged draft in the same commit as an external value change', async () => {
609
+ const user = userEvent.setup();
610
+ const frames: boolean[] = [];
611
+ const onRender = () =>
612
+ frames.push(
613
+ screen.queryByRole('button', {name: 'Remove Owner', ...hidden}) != null,
614
+ );
615
+ const ui = (value: string[]) => (
616
+ <Profiler id="selector" onRender={onRender}>
617
+ <TransferListSelector
618
+ label="Visible fields"
619
+ options={OPTIONS}
620
+ value={value}
621
+ onChange={() => {}}
622
+ commitBehavior="staged"
623
+ />
624
+ </Profiler>
625
+ );
626
+ const view = render(ui(['name', 'status']));
627
+ await openSelector();
628
+ await user.click(
629
+ screen.getByRole('button', {name: 'Add Owner', ...hidden}),
630
+ );
631
+ expect(
632
+ screen.getByRole('button', {name: 'Remove Owner', ...hidden}),
633
+ ).toBeInTheDocument();
634
+
635
+ frames.length = 0;
636
+ view.rerender(ui(['name']));
637
+
638
+ expect(frames.length).toBeGreaterThan(0);
639
+ expect(frames).not.toContain(true);
640
+ expect(
641
+ screen.getByRole('button', {name: 'Add Owner', ...hidden}),
642
+ ).toBeInTheDocument();
643
+ });
644
+ });
package/src/TransferList/TransferListSelector.tsx CHANGED
@@ -93,9 +93,9 @@ type TransferListSelectorShellProp =
93
93
  | 'size'
94
94
  | 'width'
95
95
  | 'placement'
96
- | 'xstyle'
97
- | 'className'
98
- | 'style'
96
+ | 'controlXstyle'
97
+ | 'controlClassName'
98
+ | 'controlStyle'
99
99
  | 'data-testid';
100
100
 
101
101
  type TransferListContentProp =
@@ -217,27 +217,24 @@ export function TransferListSelector<T extends string = string>({
217
217
  const cancelLabel =
218
218
  cancelLabelFromProps ?? t('@astryx.transferListSelector.cancel');
219
219
  const [draftValue, setDraftValue] = useState<readonly T[]>(value);
220
- const previousAppliedValueRef = useRef<readonly T[]>([...value]);
221
- const previousCommitBehaviorRef = useRef(commitBehavior);
222
220
 
223
221
  const resetDraft = useCallback(() => {
224
222
  setDraftValue([...value]);
225
223
  }, [value]);
226
224
 
227
- useEffect(() => {
228
- const previousAppliedValue = previousAppliedValueRef.current;
229
- previousAppliedValueRef.current = [...value];
230
- if (!areOrderedValuesEqual(previousAppliedValue, value)) {
231
- resetDraft();
232
- }
233
- }, [resetDraft, value]);
234
-
235
- useEffect(() => {
236
- if (previousCommitBehaviorRef.current !== commitBehavior) {
237
- resetDraft();
238
- }
239
- previousCommitBehaviorRef.current = commitBehavior;
240
- }, [commitBehavior, resetDraft]);
225
+ // A changed applied value or commit behavior discards the staged draft.
226
+ // Adjusted during render, so no commit paints the discarded draft.
227
+ const [draftSource, setDraftSource] = useState(() => ({
228
+ value: [...value],
229
+ commitBehavior,
230
+ }));
231
+ if (
232
+ !areOrderedValuesEqual(draftSource.value, value) ||
233
+ !Object.is(draftSource.commitBehavior, commitBehavior)
234
+ ) {
235
+ setDraftSource({value: [...value], commitBehavior});
236
+ setDraftValue([...value]);
237
+ }
241
238
 
242
239
  const resolvedWidth =
243
240
  typeof width === 'number'