@astryxdesign/lab 0.4.5-canary.bc34238 → 0.4.5-canary.ffd05c4

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

@@ -1 +1 @@
-{"version":3,"file":"TransferList.d.ts","sourceRoot":"","sources":["../../src/TransferList/TransferList.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"TransferList.d.ts","sourceRoot":"","sources":["../../src/TransferList/TransferList.tsx"],"names":[],"mappings":"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"}

package/dist/TransferList/TransferList.js

@@ -13,13 +13,14 @@
  * - /packages/lab/src/TransferList/TransferList.test.tsx
  * - /packages/lab/src/TransferList/index.ts
  */
-import { Fragment, useCallback, useId, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { Fragment, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import * as stylex from '@stylexjs/stylex';
-import { createPortal, flushSync } from 'react-dom';
+import { flushSync } from 'react-dom';
 import { Button } from '@astryxdesign/core/Button';
 import { Icon } from '@astryxdesign/core/Icon';
 import { IconButton } from '@astryxdesign/core/IconButton';
 import { Item } from '@astryxdesign/core/Item';
+import { useLayer } from '@astryxdesign/core/Layer';
 import { List } from '@astryxdesign/core/List';
 import { Text } from '@astryxdesign/core/Text';
 import { TextInput } from '@astryxdesign/core/TextInput';
@@ -171,17 +172,12 @@ const styles = {
     $$css: true
   }
 };
-const _temp = {
-  k3aq6I: "xsqj5wx",
-  "$$css": true
-};
 const dynamicStyles = {
-  dragPreview: (x, y, width) => [_temp, {
+  dragPreview: width => [{
     kzqmXN: width != null ? "x5lhr3w" : width,
     $$css: true
   }, {
-    "--x-width": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(width),
-    "--x-transform": `translate3d(${x}px, ${y}px, 0)` != null ? `translate3d(${x}px, ${y}px, 0)` : undefined
+    "--x-width": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(width)
   }]
 };
 function moveItem(value, fromIndex, toIndex) {
@@ -256,6 +252,13 @@ export function TransferList({
   const availablePanelRef = useRef(null);
   const selectedRowRefs = useRef(new Map());
   const dragPreviewRef = useRef(null);
+  // The ghost that follows the pointer is a layer, not a portal into body.
+  // Its coordinates come from getBoundingClientRect, so they are viewport
+  // relative; the top layer is the only host that reads them that way from
+  // any scroll position and still paints above a Popover or open dialog.
+  const dragPreviewLayer = useLayer({
+    mode: 'fixed'
+  });
   const currentValueRef = useRef(value);
   const reorderSessionRef = useRef(null);
   const suppressClickRef = useRef(false);
@@ -666,7 +669,18 @@ export function TransferList({
     y: reorderSession.pointerClientY - reorderSession.pointerOffsetY,
     width: reorderSession.previewWidth
   } : null;
-  const dragPreviewPortalTarget = typeof document === 'undefined' ? null : rootRef.current?.closest('[popover], dialog[open]') ?? document.body;
+  const isDraggingPreview = dragPreviewPosition != null;
+  const {
+    show: showDragPreview,
+    hide: hideDragPreview
+  } = dragPreviewLayer;
+  useEffect(() => {
+    if (!isDraggingPreview) {
+      return undefined;
+    }
+    showDragPreview();
+    return hideDragPreview;
+  }, [isDraggingPreview, showDragPreview, hideDragPreview]);
   const reorderControl = option => {
     if (!isReorderable) {
       return undefined;
@@ -897,12 +911,15 @@ export function TransferList({
           })
         })]
       })]
-    }), dragPreviewPosition != null && dragPreviewPortalTarget != null ? /*#__PURE__*/createPortal(/*#__PURE__*/_jsx("div", {
+    }), dragPreviewPosition != null ? dragPreviewLayer.render(/*#__PURE__*/_jsx("div", {
       ref: dragPreviewRef,
       "aria-hidden": "true",
       "data-transfer-list-drag-preview": "",
-      ...stylex.props(reorderStyles.preview, styles.dragPreviewContainer, dynamicStyles.dragPreview(dragPreviewPosition.x, dragPreviewPosition.y, dragPreviewPosition.width))
-    }), dragPreviewPortalTarget) : null]
+      ...stylex.props(reorderStyles.preview, styles.dragPreviewContainer, dynamicStyles.dragPreview(dragPreviewPosition.width))
+    }), {
+      x: dragPreviewPosition.x,
+      y: dragPreviewPosition.y
+    }) : null]
   });
 }
 TransferList.displayName = 'TransferList';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/lab",
-  "version": "0.4.5-canary.bc34238",
+  "version": "0.4.5-canary.ffd05c4",
   "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.4.5-canary.bc34238",
+    "@astryxdesign/core": "0.4.5-canary.ffd05c4",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0"
   },
@@ -55,7 +55,7 @@
     "d3-shape": "^3.2.0"
   },
   "devDependencies": {
-    "@astryxdesign/cli": "0.4.5-canary.bc34238",
+    "@astryxdesign/cli": "0.4.5-canary.ffd05c4",
     "@types/d3-array": "^3.2.2",
     "@types/d3-scale": "^4.0.9",
     "@types/d3-shape": "^3.1.8",

package/src/TransferList/TransferList.doc.mjs

@@ -482,6 +482,29 @@ export const docs = {
       },
     ],
   },
+  // Mirrors the themeProps() calls in TransferList.tsx. `astryx theme build`
+  // reads this inventory to learn which visual props a target can vary on, so
+  // a target missing here cannot be themed even though it carries the class.
+  theming: {
+    targets: [
+      {
+        className: 'astryx-transfer-list',
+        visualProps: [],
+      },
+      {
+        className: 'astryx-transfer-list-collection',
+        visualProps: [],
+      },
+      {
+        className: 'astryx-transfer-list-panel',
+        visualProps: ['side'],
+      },
+      {
+        className: 'astryx-transfer-list-item',
+        visualProps: ['side', 'state'],
+      },
+    ],
+  },
   examples: [
     {
       label: 'Default immediate selector',

package/src/TransferList/TransferList.test.tsx

@@ -496,7 +496,7 @@ describe('TransferList', () => {
   });
 
   describe('pointer reordering', () => {
-    it('mounts the drag preview in the nearest top-layer container', () => {
+    it('promotes the drag preview to the top layer from inside a popover host', () => {
       const {container} = render(
         <div data-testid="popover-host" popover="auto">
           <ControlledTransferList initialValue={['name', 'owner', 'status']} />
@@ -521,7 +521,13 @@ describe('TransferList', () => {
       const preview = document.querySelector<HTMLElement>(
         '[data-transfer-list-drag-preview]',
       );
-      expect(preview?.parentElement).toBe(screen.getByTestId('popover-host'));
+      // The ghost reaches the top layer through its host's popover attribute
+      // rather than by being relocated into an ancestor. That keeps it painted
+      // above this popover host while it still inherits the host's theme
+      // variables, which a portal to document.body would have dropped.
+      const layer = preview?.parentElement ?? null;
+      expect(layer).toHaveAttribute('popover');
+      expect(screen.getByTestId('popover-host')).toContainElement(layer);
     });
 
     it('keeps rows stationary, locks X, follows pointer Y, and commits once', () => {
@@ -560,9 +566,10 @@ describe('TransferList', () => {
       expect(getComputedStyle(preview!).opacity).toBe('0.5');
       expect(preview).toHaveAttribute('aria-hidden', 'true');
       expect(preview).toHaveTextContent('Owner');
-      expect(preview!.style.getPropertyValue('--x-transform')).toBe(
-        'translate3d(0px, 40px, 0)',
-      );
+      // Placement lives on the layer as fixed insets. The coordinates come
+      // from getBoundingClientRect, so reading them as viewport insets is what
+      // keeps the ghost under the pointer once the page has been scrolled.
+      expect(preview!.parentElement).toHaveStyle({top: '40px', left: '0px'});
       expect(
         container.querySelector('[data-transfer-list-drop-target]'),
       ).not.toBeInTheDocument();
@@ -573,9 +580,7 @@ describe('TransferList', () => {
         clientY: 5,
       });
 
-      expect(preview!.style.getPropertyValue('--x-transform')).toBe(
-        'translate3d(0px, -5px, 0)',
-      );
+      expect(preview!.parentElement).toHaveStyle({top: '-5px', left: '0px'});
       expect([
         ...container.querySelectorAll<HTMLElement>('[data-transfer-list-row]'),
       ]).toEqual(rows);
@@ -596,9 +601,7 @@ describe('TransferList', () => {
         clientY: 115,
       });
 
-      expect(preview!.style.getPropertyValue('--x-transform')).toBe(
-        'translate3d(0px, 105px, 0)',
-      );
+      expect(preview!.parentElement).toHaveStyle({top: '105px', left: '0px'});
       expect(rows[0]).not.toHaveAttribute('data-transfer-list-drop-target');
       expect(rows[2]).toHaveAttribute(
         'data-transfer-list-drop-target',
@@ -655,11 +658,12 @@ describe('TransferList', () => {
       expect(
         document.querySelector('[data-transfer-list-drag-preview]'),
       ).toBeInTheDocument();
+      // A horizontal-only gesture must not move the ghost off the row it came
+      // from: the drag is locked to the Y axis.
       expect(
-        document
-          .querySelector<HTMLElement>('[data-transfer-list-drag-preview]')
-          ?.style.getPropertyValue('--x-transform'),
-      ).toBe('translate3d(0px, 0px, 0)');
+        document.querySelector<HTMLElement>('[data-transfer-list-drag-preview]')
+          ?.parentElement,
+      ).toHaveStyle({top: '0px', left: '0px'});
       expect(
         container.querySelector('[data-transfer-list-drop-target]'),
       ).not.toBeInTheDocument();

package/src/TransferList/TransferList.tsx

@@ -17,6 +17,7 @@
 import {
   Fragment,
   useCallback,
+  useEffect,
   useId,
   useLayoutEffect,
   useMemo,
@@ -27,12 +28,13 @@ import {
   type ReactNode,
 } from 'react';
 import * as stylex from '@stylexjs/stylex';
-import {createPortal, flushSync} from 'react-dom';
+import {flushSync} from 'react-dom';
 import type {BaseProps} from '@astryxdesign/core';
 import {Button} from '@astryxdesign/core/Button';
 import {Icon} from '@astryxdesign/core/Icon';
 import {IconButton} from '@astryxdesign/core/IconButton';
 import {Item} from '@astryxdesign/core/Item';
+import {useLayer} from '@astryxdesign/core/Layer';
 import {List} from '@astryxdesign/core/List';
 import {Text} from '@astryxdesign/core/Text';
 import {TextInput} from '@astryxdesign/core/TextInput';
@@ -345,10 +347,10 @@ const styles = stylex.create({
 });
 
 const dynamicStyles = stylex.create({
-  dragPreview: (x: number, y: number, width: number) => ({
-    width,
-    transform: `translate3d(${x}px, ${y}px, 0)`,
-  }),
+  // Only the width is dynamic here. The layer owns the placement: it reads the
+  // same viewport coordinates as `position: fixed` insets, which is what
+  // getBoundingClientRect gives us.
+  dragPreview: (width: number) => ({width}),
 });
 
 function moveItem<T>(
@@ -435,6 +437,11 @@ export function TransferList<T extends string = string>({
   const availablePanelRef = useRef<HTMLDivElement | null>(null);
   const selectedRowRefs = useRef(new Map<T, HTMLElement>());
   const dragPreviewRef = useRef<HTMLDivElement | null>(null);
+  // The ghost that follows the pointer is a layer, not a portal into body.
+  // Its coordinates come from getBoundingClientRect, so they are viewport
+  // relative; the top layer is the only host that reads them that way from
+  // any scroll position and still paints above a Popover or open dialog.
+  const dragPreviewLayer = useLayer({mode: 'fixed'});
   const currentValueRef = useRef<readonly T[]>(value);
   const reorderSessionRef = useRef<ReorderSession<T> | null>(null);
   const suppressClickRef = useRef(false);
@@ -1010,11 +1017,15 @@ export function TransferList<T extends string = string>({
           width: reorderSession.previewWidth,
         }
       : null;
-  const dragPreviewPortalTarget =
-    typeof document === 'undefined'
-      ? null
-      : (rootRef.current?.closest<HTMLElement>('[popover], dialog[open]') ??
-        document.body);
+  const isDraggingPreview = dragPreviewPosition != null;
+  const {show: showDragPreview, hide: hideDragPreview} = dragPreviewLayer;
+  useEffect(() => {
+    if (!isDraggingPreview) {
+      return undefined;
+    }
+    showDragPreview();
+    return hideDragPreview;
+  }, [isDraggingPreview, showDragPreview, hideDragPreview]);
 
   const reorderControl = (option: TransferListOption<T>) => {
     if (!isReorderable) {
@@ -1304,8 +1315,8 @@ export function TransferList<T extends string = string>({
           </div>
         </div>
       </div>
-      {dragPreviewPosition != null && dragPreviewPortalTarget != null
-        ? createPortal(
+      {dragPreviewPosition != null
+        ? dragPreviewLayer.render(
             <div
               ref={dragPreviewRef}
               aria-hidden="true"
@@ -1313,14 +1324,10 @@ export function TransferList<T extends string = string>({
               {...stylex.props(
                 reorderStyles.preview,
                 styles.dragPreviewContainer,
-                dynamicStyles.dragPreview(
-                  dragPreviewPosition.x,
-                  dragPreviewPosition.y,
-                  dragPreviewPosition.width,
-                ),
+                dynamicStyles.dragPreview(dragPreviewPosition.width),
               )}
             />,
-            dragPreviewPortalTarget,
+            {x: dragPreviewPosition.x, y: dragPreviewPosition.y},
           )
         : null}
     </div>