@astryxdesign/lab 0.3.0-canary.fb2d385 → 0.3.0-canary.fbf9c0b

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' | 'contentXstyle' | 'xstyle' | 'className' | 'style' | 'data-testid';
+type TransferListSelectorShellProp = 'label' | 'triggerLabel' | 'isLabelHidden' | 'description' | 'isOptional' | 'isRequired' | 'isDisabled' | 'isLoading' | 'status' | 'statusVariant' | 'labelTooltip' | 'size' | 'width' | 'placement' | 'xstyle' | 'className' | 'style' | '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> & {
@@ -49,7 +49,7 @@ export type TransferListSelectorProps<T extends string = string> = Pick<ComplexS
  * />
  * ```
  */
-export declare function TransferListSelector<T extends string = string>({ label, description, options, value, onChange, changeAction, commitBehavior, triggerLabel, isDisabled, isLoading, width, contentXstyle, applyLabel, cancelLabel, selectedLabel, availableLabel, hasSearch, searchLabel, searchPlaceholder, isReorderable, hasSelectAll, hasClear, renderOption, selectedEmptyText, availableEmptyText, noResultsText, ...selectorProps }: TransferListSelectorProps<T>): ReactNode;
+export declare function TransferListSelector<T extends string = string>({ label, description, options, value, onChange, changeAction, commitBehavior, triggerLabel, isDisabled, isLoading, width, applyLabel, cancelLabel, selectedLabel, availableLabel, hasSearch, searchLabel, searchPlaceholder, isReorderable, hasSelectAll, hasClear, renderOption, selectedEmptyText, availableEmptyText, noResultsText, ...selectorProps }: TransferListSelectorProps<T>): ReactNode;
 export declare namespace TransferListSelector {
     var displayName: string;
 }

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;AAG5C,OAAO,EAAe,KAAK,iBAAiB,EAAC,MAAM,gBAAgB,CAAC;AA0CpE,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,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,aAAa,EACb,UAAoB,EACpB,WAAsB,EACtB,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,CA+G1C;yBA3Ie,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;AAG5C,OAAO,EAAe,KAAK,iBAAiB,EAAC,MAAM,gBAAgB,CAAC;AA4CpE,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,UAAoB,EACpB,WAAsB,EACtB,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,CAoH1C;yBA/Ie,oBAAoB"}

package/dist/TransferList/TransferListSelector.js

@@ -23,16 +23,22 @@ import { borderVars, colorVars } from '@astryxdesign/core/theme/tokens.stylex';
 import { TransferList } from "./TransferList.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const DEFAULT_SELECTOR_WIDTH = 'min(41rem, calc(100vw - 32px))';
+const _temp = {
+  kskxy: "x12ajvvl",
+  kmVPX3: "x1717udv",
+  kVQacm: "xb3r6kr",
+  kaIpWk: "x1pjcqnp",
+  "$$css": true
+};
 const styles = {
-  content: {
-    kzqmXN: "x1nalo9x",
-    ks0D6T: "x1rk9ocf",
-    kskxy: "x12ajvvl",
-    kmVPX3: "x1717udv",
-    kVQacm: "xb3r6kr",
-    kaIpWk: "x1pjcqnp",
+  content: width => [_temp, {
+    kzqmXN: width != null ? "x5lhr3w" : width,
+    ks0D6T: width != null ? "xf68679" : width,
     $$css: true
-  },
+  }, {
+    "--x-width": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(width),
+    "--x-maxWidth": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(width)
+  }],
   footer: {
     kmuXW: "x2lah0s",
     kEafiO: "x11xkdxz",
@@ -88,7 +94,6 @@ export function TransferListSelector({
   isDisabled,
   isLoading,
   width,
-  contentXstyle,
   applyLabel = 'Apply',
   cancelLabel = 'Cancel',
   selectedLabel,
@@ -124,6 +129,7 @@ export function TransferListSelector({
     }
     previousCommitBehaviorRef.current = commitBehavior;
   }, [commitBehavior, resetDraft]);
+  const resolvedWidth = typeof width === 'number' ? `${width}px` : width ?? DEFAULT_SELECTOR_WIDTH;
   return /*#__PURE__*/_jsx(ComplexSelector, {
     ...selectorProps,
     label: label,
@@ -134,8 +140,8 @@ export function TransferListSelector({
     triggerLabel: triggerLabel ?? `${value.length} selected`,
     isDisabled: isDisabled,
     isLoading: isLoading,
-    width: width ?? DEFAULT_SELECTOR_WIDTH,
-    contentXstyle: [styles.content, contentXstyle],
+    width: resolvedWidth,
+    contentXstyle: styles.content(resolvedWidth),
     children: (appliedValue, commit, close, state) => {
       const isStaged = commitBehavior === 'staged';
       const transferListValue = isStaged ? draftValue : appliedValue;

package/dist/lab.css

@@ -604,7 +604,6 @@
   .x1va8c73:not(#\#):not(#\#):not(#\#):not(#\#){max-width:320px}
   .x1k2d6hx:not(#\#):not(#\#):not(#\#):not(#\#){max-width:44px}
   .x11gisft:not(#\#):not(#\#):not(#\#):not(#\#){max-width:640px}
-  .x1rk9ocf:not(#\#):not(#\#):not(#\#):not(#\#){max-width:min(41rem,calc(100vw - 32px))}
   .x1x1rfll:not(#\#):not(#\#):not(#\#):not(#\#){max-width:none}
   .xf68679:not(#\#):not(#\#):not(#\#):not(#\#){max-width:var(--x-maxWidth)}
   .x2lwn1j:not(#\#):not(#\#):not(#\#):not(#\#){min-height:0}
@@ -648,7 +647,6 @@
   .x1849jeq:not(#\#):not(#\#):not(#\#):not(#\#){width:30px}
   .x1td3qas:not(#\#):not(#\#):not(#\#):not(#\#){width:32px}
   .x1ftt334:not(#\#):not(#\#):not(#\#):not(#\#){width:5px}
-  .x1nalo9x:not(#\#):not(#\#):not(#\#):not(#\#){width:min(41rem,calc(100vw - 32px))}
   .x1oai4fc:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--icon-size)}
   .x1m747yf:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--size-element-lg)}
   .xx9zwd3:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--spacing-1)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/lab",
-  "version": "0.3.0-canary.fb2d385",
+  "version": "0.3.0-canary.fbf9c0b",
   "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",
@@ -45,7 +45,7 @@
   },
   "peerDependencies": {
     "@stylexjs/stylex": ">=0.10.0",
-    "@astryxdesign/core": "0.3.0-canary.fb2d385",
+    "@astryxdesign/core": "0.3.0-canary.fbf9c0b",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
     "lexical": "^0.46.0",
@@ -66,7 +66,7 @@
     "d3-shape": "^3.2.0"
   },
   "devDependencies": {
-    "@astryxdesign/cli": "0.3.0-canary.fb2d385",
+    "@astryxdesign/cli": "0.3.0-canary.fbf9c0b",
     "@lexical/code": "^0.46.0",
     "@lexical/headless": "^0.46.0",
     "@lexical/html": "^0.46.0",

package/src/TransferList/TransferList.doc.mjs

@@ -187,7 +187,7 @@ export const docs = {
       name: 'width',
       type: 'SizeValue',
       description:
-        'Width of the external field. Its default matches the responsive popup width; use contentXstyle to override the popup.',
+        'Width of the field and its popup — both track this one value.',
       default: "'min(41rem, calc(100vw - 32px))'",
     },
     {
@@ -238,12 +238,6 @@ export const docs = {
       description:
         'Optional async action run after each immediate commit or a changed staged Apply; drives optimistic and busy state.',
     },
-    {
-      name: 'contentXstyle',
-      type: 'StyleXStyles',
-      description:
-        'StyleX styles composed after the default zero-padding, clipped popover content style.',
-    },
     {
       name: 'xstyle',
       type: 'StyleXStyles',
@@ -710,7 +704,6 @@ export const docsDense = {
     labelTooltip: 'Field-label tooltip.',
     changeAction:
       'Async action after each immediate commit or changed staged Apply.',
-    contentXstyle: 'Popover-content StyleX override.',
     xstyle: 'External field StyleX override.',
     className: 'External field class name.',
     style: 'External field inline styles.',

package/src/TransferList/TransferListSelector.tsx

@@ -28,14 +28,16 @@ import {TransferList, type TransferListProps} from './TransferList';
 const DEFAULT_SELECTOR_WIDTH = 'min(41rem, calc(100vw - 32px))';
 
 const styles = stylex.create({
-  content: {
-    width: DEFAULT_SELECTOR_WIDTH,
-    maxWidth: DEFAULT_SELECTOR_WIDTH,
+  // Width tracks the `width` prop, so the field and its popup are one
+  // measurement rather than two that can disagree.
+  content: (width: string) => ({
+    width,
+    maxWidth: width,
     maxHeight: 'calc(100vh - 32px)',
     padding: 0,
     overflow: 'hidden',
     borderRadius: 'inherit',
-  },
+  }),
   surface: {
     display: 'flex',
     flexDirection: 'column',
@@ -80,7 +82,6 @@ type TransferListSelectorShellProp =
   | 'size'
   | 'width'
   | 'placement'
-  | 'contentXstyle'
   | 'xstyle'
   | 'className'
   | 'style'
@@ -183,7 +184,6 @@ export function TransferListSelector<T extends string = string>({
   isDisabled,
   isLoading,
   width,
-  contentXstyle,
   applyLabel = 'Apply',
   cancelLabel = 'Cancel',
   selectedLabel,
@@ -223,6 +223,11 @@ export function TransferListSelector<T extends string = string>({
     previousCommitBehaviorRef.current = commitBehavior;
   }, [commitBehavior, resetDraft]);
 
+  const resolvedWidth =
+    typeof width === 'number'
+      ? `${width}px`
+      : (width ?? DEFAULT_SELECTOR_WIDTH);
+
   return (
     <ComplexSelector
       {...selectorProps}
@@ -234,8 +239,8 @@ export function TransferListSelector<T extends string = string>({
       triggerLabel={triggerLabel ?? `${value.length} selected`}
       isDisabled={isDisabled}
       isLoading={isLoading}
-      width={width ?? DEFAULT_SELECTOR_WIDTH}
-      contentXstyle={[styles.content, contentXstyle]}>
+      width={resolvedWidth}
+      contentXstyle={styles.content(resolvedWidth)}>
       {(appliedValue, commit, close, state) => {
         const isStaged = commitBehavior === 'staged';
         const transferListValue = isStaged ? draftValue : appliedValue;