@astryxdesign/lab 0.7.0-canary.4ec1f4e → 0.7.0-canary.61639ee

package/dist/MobileTokenizer/MobileTokenizer.js

@@ -278,7 +278,7 @@ export function MobileTokenizer({
                 setQuery(next);
                 onChangeQuery?.(next);
               },
-              xstyle: styles.filterInput
+              controlXstyle: styles.filterInput
             })
           }), /*#__PURE__*/_jsxs("div", {
             ...{

package/dist/Tour/Tour.d.ts.map

@@ -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"}
+{"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

@@ -28,7 +28,7 @@
  * - /packages/lab/src/Tour/Tour.test.tsx (tests for new/changed behavior)
  * - /packages/lab/src/Tour/index.ts (exports if types change)
  */
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { TourContext } from "./TourContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
@@ -68,13 +68,16 @@ export function Tour({
     };
   }, []);
 
-  // Reset to the first step whenever the tour is (re)started, so a dismissed
-  // tour begins from the top next time isActive flips back on.
-  useEffect(() => {
+  // Reset to the first step when the tour is deactivated, so a dismissed tour
+  // begins from the top next time isActive flips back on. Adjusted during
+  // render, so no commit carries the old step past deactivation.
+  const [wasActive, setWasActive] = useState(isActive);
+  if (!Object.is(wasActive, isActive)) {
+    setWasActive(isActive);
     if (!isActive) {
       setActiveStepIndex(0);
     }
-  }, [isActive]);
+  }
   const stepCount = stepIds.length;
   const onNext = useCallback(() => {
     // Runs from a click/imperative call (never during render), so branch on the

package/dist/TransferList/TransferList.js

@@ -839,7 +839,7 @@ export function TransferList({
         }),
         hasClear: true,
         width: "100%",
-        xstyle: styles.search,
+        controlXstyle: styles.search,
         onChange: handleSearch
       })
     }), /*#__PURE__*/_jsx(VisuallyHidden, {

package/dist/TransferList/TransferListSelector.d.ts

@@ -12,7 +12,7 @@
 import { type ReactNode } from 'react';
 import { type ComplexSelectorProps } from '@astryxdesign/core/ComplexSelector';
 import { type TransferListProps } from './TransferList';
-type TransferListSelectorShellProp = 'label' | 'triggerLabel' | 'isLabelHidden' | 'description' | 'isOptional' | 'isRequired' | 'isDisabled' | 'isLoading' | 'status' | 'statusVariant' | 'labelTooltip' | 'size' | 'width' | 'placement' | 'xstyle' | 'className' | 'style' | 'data-testid';
+type TransferListSelectorShellProp = 'label' | 'triggerLabel' | 'isLabelHidden' | 'description' | 'isOptional' | 'isRequired' | 'isDisabled' | 'isLoading' | 'status' | 'statusVariant' | 'labelTooltip' | 'size' | 'width' | 'placement' | 'controlXstyle' | 'controlClassName' | 'controlStyle' | 'data-testid';
 type TransferListContentProp = 'options' | 'selectedLabel' | 'availableLabel' | 'hasSearch' | 'searchLabel' | 'searchPlaceholder' | 'isReorderable' | 'hasSelectAll' | 'hasClear' | 'renderOption' | 'selectedEmptyText' | 'availableEmptyText' | 'noResultsText';
 export type TransferListSelectorCommitBehavior = 'immediate' | 'staged';
 export type TransferListSelectorProps<T extends string = string> = Pick<ComplexSelectorProps<readonly T[]>, TransferListSelectorShellProp> & Pick<TransferListProps<T>, TransferListContentProp> & {

package/dist/TransferList/TransferListSelector.d.ts.map

@@ -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"}
+{"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

@@ -115,24 +115,23 @@ export function TransferListSelector({
   const applyLabel = applyLabelFromProps ?? t('@astryx.transferListSelector.apply');
   const cancelLabel = cancelLabelFromProps ?? t('@astryx.transferListSelector.cancel');
   const [draftValue, setDraftValue] = useState(value);
-  const previousAppliedValueRef = useRef([...value]);
-  const previousCommitBehaviorRef = useRef(commitBehavior);
   const resetDraft = useCallback(() => {
     setDraftValue([...value]);
   }, [value]);
-  useEffect(() => {
-    const previousAppliedValue = previousAppliedValueRef.current;
-    previousAppliedValueRef.current = [...value];
-    if (!areOrderedValuesEqual(previousAppliedValue, value)) {
-      resetDraft();
-    }
-  }, [resetDraft, value]);
-  useEffect(() => {
-    if (previousCommitBehaviorRef.current !== commitBehavior) {
-      resetDraft();
-    }
-    previousCommitBehaviorRef.current = commitBehavior;
-  }, [commitBehavior, resetDraft]);
+
+  // A changed applied value or commit behavior discards the staged draft.
+  // Adjusted during render, so no commit paints the discarded draft.
+  const [draftSource, setDraftSource] = useState(() => ({
+    value: [...value],
+    commitBehavior
+  }));
+  if (!areOrderedValuesEqual(draftSource.value, value) || !Object.is(draftSource.commitBehavior, commitBehavior)) {
+    setDraftSource({
+      value: [...value],
+      commitBehavior
+    });
+    setDraftValue([...value]);
+  }
   const resolvedWidth = typeof width === 'number' ? `${width}px` : width ?? DEFAULT_SELECTOR_WIDTH;
   return /*#__PURE__*/_jsx(ComplexSelector, {
     ...selectorProps,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/lab",
-  "version": "0.7.0-canary.4ec1f4e",
+  "version": "0.7.0-canary.61639ee",
   "description": "Experimental Astryx components — published to npm only under the @canary dist-tag for early testing; never released as a stable (latest) version.",
   "author": "Meta Open Source",
   "license": "MIT",
@@ -47,7 +47,7 @@
   },
   "peerDependencies": {
     "@stylexjs/stylex": ">=0.10.0",
-    "@astryxdesign/core": "0.7.0-canary.4ec1f4e",
+    "@astryxdesign/core": "0.7.0-canary.61639ee",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0"
   },
@@ -57,8 +57,8 @@
     "d3-shape": "^3.2.0"
   },
   "devDependencies": {
-    "@astryxdesign/a11y-spec": "0.7.0-canary.4ec1f4e",
-    "@astryxdesign/cli": "0.7.0-canary.4ec1f4e",
+    "@astryxdesign/a11y-spec": "0.7.0-canary.61639ee",
+    "@astryxdesign/cli": "0.7.0-canary.61639ee",
     "@babel/cli": "^7.29.7",
     "@babel/core": "^7.29.7",
     "@babel/preset-react": "^7.29.7",

package/src/MobileTokenizer/MobileTokenizer.tsx

@@ -417,7 +417,7 @@ export function MobileTokenizer<T extends SearchableItem>({
                     setQuery(next);
                     onChangeQuery?.(next);
                   }}
-                  xstyle={styles.filterInput}
+                  controlXstyle={styles.filterInput}
                 />
               </div>
               <div

package/src/Tour/Tour.test.tsx

@@ -12,7 +12,7 @@
 
 import {describe, it, expect, vi, beforeAll} from 'vitest';
 import {render, screen, fireEvent} from '@testing-library/react';
-import {useRef, useState} from 'react';
+import {Profiler, useRef, useState} from 'react';
 import {Tour} from './Tour';
 import {TourStep} from './TourStep';
 import {useTour} from './useTour';
@@ -259,3 +259,55 @@ describe('useTour', () => {
     expect(last.last).toBe(false);
   });
 });
+
+describe('Tour reset timing', () => {
+  function StepProbe() {
+    const tour = useTour();
+    return <output data-testid="step-index">{tour?.activeStepIndex}</output>;
+  }
+
+  function Harness({isActive}: {isActive: boolean}) {
+    const aRef = useRef<HTMLButtonElement>(null);
+    const bRef = useRef<HTMLButtonElement>(null);
+    return (
+      <>
+        <button type="button" ref={aRef}>
+          Target A
+        </button>
+        <button type="button" ref={bRef}>
+          Target B
+        </button>
+        <Tour isActive={isActive} onDismiss={() => {}}>
+          <StepProbe />
+          <TourStep targetRef={aRef} heading="First">
+            First body
+          </TourStep>
+          <TourStep targetRef={bRef} heading="Second">
+            Second body
+          </TourStep>
+        </Tour>
+      </>
+    );
+  }
+
+  it('resets to the first step in the same commit that deactivates the tour', () => {
+    const frames: string[] = [];
+    const onRender = () =>
+      frames.push(screen.getByTestId('step-index').textContent ?? '');
+    const ui = (isActive: boolean) => (
+      <Profiler id="tour" onRender={onRender}>
+        <Harness isActive={isActive} />
+      </Profiler>
+    );
+    const {rerender} = render(ui(true));
+    fireEvent.click(screen.getByText('Next'));
+    expect(screen.getByTestId('step-index')).toHaveTextContent('1');
+
+    frames.length = 0;
+    rerender(ui(false));
+
+    expect(frames.length).toBeGreaterThan(0);
+    expect(frames).not.toContain('1');
+    expect(screen.getByTestId('step-index')).toHaveTextContent('0');
+  });
+});

package/src/Tour/Tour.tsx

@@ -29,7 +29,7 @@
  * - /packages/lab/src/Tour/index.ts (exports if types change)
  */
 
-import {useCallback, useEffect, useMemo, useState, type ReactNode} from 'react';
+import {useCallback, useMemo, useState, type ReactNode} from 'react';
 import {
   TourContext,
   type TourDismissSource,
@@ -108,13 +108,16 @@ export function Tour({
     };
   }, []);
 
-  // Reset to the first step whenever the tour is (re)started, so a dismissed
-  // tour begins from the top next time isActive flips back on.
-  useEffect(() => {
+  // Reset to the first step when the tour is deactivated, so a dismissed tour
+  // begins from the top next time isActive flips back on. Adjusted during
+  // render, so no commit carries the old step past deactivation.
+  const [wasActive, setWasActive] = useState(isActive);
+  if (!Object.is(wasActive, isActive)) {
+    setWasActive(isActive);
     if (!isActive) {
       setActiveStepIndex(0);
     }
-  }, [isActive]);
+  }
 
   const stepCount = stepIds.length;
 

package/src/TransferList/TransferList.doc.mjs

@@ -239,24 +239,26 @@ export const docs = {
         'Optional async action run after each immediate commit or a changed staged Apply; drives optimistic and busy state.',
     },
     {
-      name: 'xstyle',
+      name: 'controlXstyle',
       type: 'StyleXStyles',
-      description: 'StyleX styles for the external selector field.',
+      description:
+        "StyleX styles for the external selector's bordered control box.",
     },
     {
-      name: 'className',
+      name: 'controlClassName',
       type: 'string',
-      description: 'Class name applied to the external selector field.',
+      description: "Class name applied to the external selector's control box.",
     },
     {
-      name: 'style',
+      name: 'controlStyle',
       type: 'CSSProperties',
-      description: 'Inline styles applied to the external selector field.',
+      description:
+        "Inline styles applied to the external selector's control box.",
     },
     {
       name: 'data-testid',
       type: 'string',
-      description: 'Test ID for the selector trigger container.',
+      description: 'Test ID for the selector trigger button.',
     },
   ],
   components: [

package/src/TransferList/TransferList.tsx

@@ -1216,7 +1216,7 @@ export function TransferList<T extends string = string>({
             startIcon={<Icon icon="search" size="sm" color="secondary" />}
             hasClear
             width="100%"
-            xstyle={styles.search}
+            controlXstyle={styles.search}
             onChange={handleSearch}
           />
         </div>

package/src/TransferList/TransferListSelector.test.tsx

@@ -9,7 +9,7 @@
  * SYNC: When TransferListSelector.tsx behavior changes, update this test.
  */
 
-import {useState} from 'react';
+import {Profiler, useState} from 'react';
 import {afterAll, beforeEach, describe, expect, it, vi} from 'vitest';
 import {
   fireEvent,
@@ -557,10 +557,10 @@ describe('TransferListSelector', () => {
     expect(
       screen.getByText('Choose the columns shown in the table.'),
     ).toBeVisible();
-    expect(screen.getByTestId('column-selector')).toHaveAttribute(
-      'data-size',
-      'sm',
-    );
+    // data-testid lands on the trigger button inside the control box.
+    expect(
+      screen.getByTestId('column-selector').closest('.astryx-complex-selector'),
+    ).toHaveAttribute('data-size', 'sm');
     expect(
       screen.getByRole('button', {name: 'Table columns'}),
     ).toHaveTextContent('Customize columns');
@@ -603,3 +603,42 @@ describe('TransferListSelector', () => {
     );
   });
 });
+
+describe('TransferListSelector draft reset timing', () => {
+  it('replaces a staged draft in the same commit as an external value change', async () => {
+    const user = userEvent.setup();
+    const frames: boolean[] = [];
+    const onRender = () =>
+      frames.push(
+        screen.queryByRole('button', {name: 'Remove Owner', ...hidden}) != null,
+      );
+    const ui = (value: string[]) => (
+      <Profiler id="selector" onRender={onRender}>
+        <TransferListSelector
+          label="Visible fields"
+          options={OPTIONS}
+          value={value}
+          onChange={() => {}}
+          commitBehavior="staged"
+        />
+      </Profiler>
+    );
+    const view = render(ui(['name', 'status']));
+    await openSelector();
+    await user.click(
+      screen.getByRole('button', {name: 'Add Owner', ...hidden}),
+    );
+    expect(
+      screen.getByRole('button', {name: 'Remove Owner', ...hidden}),
+    ).toBeInTheDocument();
+
+    frames.length = 0;
+    view.rerender(ui(['name']));
+
+    expect(frames.length).toBeGreaterThan(0);
+    expect(frames).not.toContain(true);
+    expect(
+      screen.getByRole('button', {name: 'Add Owner', ...hidden}),
+    ).toBeInTheDocument();
+  });
+});

package/src/TransferList/TransferListSelector.tsx

@@ -93,9 +93,9 @@ type TransferListSelectorShellProp =
   | 'size'
   | 'width'
   | 'placement'
-  | 'xstyle'
-  | 'className'
-  | 'style'
+  | 'controlXstyle'
+  | 'controlClassName'
+  | 'controlStyle'
   | 'data-testid';
 
 type TransferListContentProp =
@@ -217,27 +217,24 @@ export function TransferListSelector<T extends string = string>({
   const cancelLabel =
     cancelLabelFromProps ?? t('@astryx.transferListSelector.cancel');
   const [draftValue, setDraftValue] = useState<readonly T[]>(value);
-  const previousAppliedValueRef = useRef<readonly T[]>([...value]);
-  const previousCommitBehaviorRef = useRef(commitBehavior);
 
   const resetDraft = useCallback(() => {
     setDraftValue([...value]);
   }, [value]);
 
-  useEffect(() => {
-    const previousAppliedValue = previousAppliedValueRef.current;
-    previousAppliedValueRef.current = [...value];
-    if (!areOrderedValuesEqual(previousAppliedValue, value)) {
-      resetDraft();
-    }
-  }, [resetDraft, value]);
-
-  useEffect(() => {
-    if (previousCommitBehaviorRef.current !== commitBehavior) {
-      resetDraft();
-    }
-    previousCommitBehaviorRef.current = commitBehavior;
-  }, [commitBehavior, resetDraft]);
+  // A changed applied value or commit behavior discards the staged draft.
+  // Adjusted during render, so no commit paints the discarded draft.
+  const [draftSource, setDraftSource] = useState(() => ({
+    value: [...value],
+    commitBehavior,
+  }));
+  if (
+    !areOrderedValuesEqual(draftSource.value, value) ||
+    !Object.is(draftSource.commitBehavior, commitBehavior)
+  ) {
+    setDraftSource({value: [...value], commitBehavior});
+    setDraftValue([...value]);
+  }
 
   const resolvedWidth =
     typeof width === 'number'