@dxos/react-ui-stack 0.8.3 → 0.8.4-main.03d5cd7b56

package/src/hooks/useStackDropForElements.ts

@@ -2,73 +2,90 @@
 // Copyright 2025 DXOS.org
 //
 
-import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
-import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
 import { attachClosestEdge, extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
+import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { useLayoutEffect, useState } from 'react';
 
-import { type StackItemRearrangeHandler, type StackItemData, type Orientation } from '../components';
+import { type Orientation, type StackItemData, type StackItemRearrangeHandler } from '../components';
+
+const noop = () => {};
+
+export type UseStackDropForElementsProps = {
+  id?: string;
+  element: HTMLDivElement | null;
+  scrollElement?: HTMLDivElement | null;
+  orientation: Orientation;
+  selfDroppable: boolean;
+  onRearrange?: StackItemRearrangeHandler;
+};
+
+export type UseStackDropForElements = {
+  dropping: boolean;
+};
 
 /**
- * Hook to handle drag and drop functionality for Stack components.
+ * Hook to handle drag-and-drop functionality for Stack components.
  */
 export const useStackDropForElements = ({
   id,
   element,
   scrollElement = element,
-  selfDroppable,
   orientation,
+  selfDroppable,
   onRearrange,
-}: {
-  id?: string;
-  element: HTMLDivElement | null;
-  scrollElement?: HTMLDivElement | null;
-  selfDroppable: boolean;
-  orientation: Orientation;
-  onRearrange?: StackItemRearrangeHandler;
-}) => {
+}: UseStackDropForElementsProps): UseStackDropForElements => {
   const [dropping, setDropping] = useState(false);
 
   useLayoutEffect(() => {
-    if (!element || !selfDroppable) {
+    if (!element) {
       return;
     }
 
     const acceptSourceType = orientation === 'horizontal' ? 'column' : 'card';
 
+    // TODO(burdon): Use monitor?
     return combine(
-      dropTargetForElements({
-        element,
-        getData: ({ input, element }) => {
-          return attachClosestEdge(
-            { id, type: orientation === 'horizontal' ? 'card' : 'column' },
-            { input, element, allowedEdges: [orientation === 'horizontal' ? 'left' : 'top'] },
-          );
-        },
-        onDragEnter: ({ source }) => {
-          if (source.data.type === acceptSourceType) {
-            setDropping(true);
-          }
-        },
-        onDrag: ({ source }) => {
-          if (source.data.type === acceptSourceType) {
-            setDropping(true);
-          }
-        },
-        onDragLeave: () => {
-          return setDropping(false);
-        },
-        onDrop: ({ self, source }) => {
-          setDropping(false);
-          if (source.data.type === acceptSourceType && selfDroppable && onRearrange) {
-            onRearrange(source.data as StackItemData, self.data as StackItemData, extractClosestEdge(self.data));
-          }
-        },
-      }),
-      autoScrollForElements({ element: scrollElement as Element, getAllowedAxis: () => orientation }),
+      selfDroppable
+        ? dropTargetForElements({
+            element,
+            getData: ({ input, element }) => {
+              return attachClosestEdge(
+                { id, type: orientation === 'horizontal' ? 'card' : 'column' },
+                { input, element, allowedEdges: [orientation === 'horizontal' ? 'left' : 'top'] },
+              );
+            },
+            onDragEnter: ({ source }) => {
+              if (source.data.type === acceptSourceType) {
+                setDropping(true);
+              }
+            },
+            onDrag: ({ source }) => {
+              if (source.data.type === acceptSourceType) {
+                setDropping(true);
+              }
+            },
+            onDragLeave: () => {
+              return setDropping(false);
+            },
+            onDrop: ({ self, source }) => {
+              setDropping(false);
+              if (source.data.type === acceptSourceType && selfDroppable && onRearrange) {
+                onRearrange(source.data as StackItemData, self.data as StackItemData, extractClosestEdge(self.data));
+              }
+            },
+          })
+        : noop,
+
+      scrollElement
+        ? autoScrollForElements({
+            element: scrollElement,
+            getAllowedAxis: () => orientation,
+          })
+        : noop,
     );
-  }, [element, scrollElement, selfDroppable, orientation, id, onRearrange]);
+  }, [id, element, scrollElement, selfDroppable, orientation, onRearrange]);
 
   return { dropping };
 };

package/src/index.ts

@@ -3,8 +3,3 @@
 //
 
 export * from './components';
-
-// TODO(thure): Consider exporting exemplars from separate endpoints.
-export * from './exemplars';
-
-export { default as translations } from './translations';

package/src/{testing → playwright}/index.ts

@@ -1,5 +1,5 @@
 //
-// Copyright 2023 DXOS.org
+// Copyright 2025 DXOS.org
 //
 
 export * from './stack-manager';

package/src/playwright/playwright.config.ts

@@ -0,0 +1,17 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { defineConfig } from '@playwright/test';
+
+import { e2ePreset } from '@dxos/test-utils/playwright';
+
+export default defineConfig({
+  ...e2ePreset(import.meta.dirname),
+  // TODO(wittjosiah): Avoid hard-coding ports.
+  webServer: {
+    command: 'pnpm storybook dev --ci --quiet --port=9003 --config-dir=.storybook',
+    port: 9003,
+    reuseExistingServer: false,
+  },
+});

package/src/playwright/smoke.spec.ts

@@ -6,12 +6,14 @@ import { expect, test } from '@playwright/test';
 
 import { setupPage, storybookUrl } from '@dxos/test-utils/playwright';
 
-import { StackManager } from '../testing';
+import { StackManager } from './stack-manager';
+
+const PORT = 9003;
 
 // TODO(wittjosiah): Update for new stack.
 test.describe.skip('Stack', () => {
   test('remove', async ({ browser }) => {
-    const { page } = await setupPage(browser, { url: storybookUrl('ui-react-ui-stack-stack--transfer') });
+    const { page } = await setupPage(browser, { url: storybookUrl('ui-react-ui-stack-stack--transfer', PORT) });
     await page.getByTestId('stack-transfer').waitFor({ state: 'visible' });
 
     const stack = new StackManager(page.getByTestId('stack-1'));
@@ -24,7 +26,7 @@ test.describe.skip('Stack', () => {
   });
 
   test('rearrange', async ({ browser }) => {
-    const { page } = await setupPage(browser, { url: storybookUrl('ui-react-ui-stack-stack--transfer') });
+    const { page } = await setupPage(browser, { url: storybookUrl('ui-react-ui-stack-stack--transfer', PORT) });
     await page.getByTestId('stack-transfer').waitFor({ state: 'visible' });
 
     const stack = new StackManager(page.getByTestId('stack-1'));
@@ -41,7 +43,7 @@ test.describe.skip('Stack', () => {
       test.skip();
     }
 
-    const { page } = await setupPage(browser, { url: storybookUrl('ui-react-ui-stack-stack--transfer') });
+    const { page } = await setupPage(browser, { url: storybookUrl('ui-react-ui-stack-stack--transfer', PORT) });
     await page.getByTestId('stack-transfer').waitFor({ state: 'visible' });
 
     const stack1 = new StackManager(page.getByTestId('stack-1'));
@@ -61,7 +63,7 @@ test.describe.skip('Stack', () => {
   });
 
   test('copy', async ({ browser }) => {
-    const { page } = await setupPage(browser, { url: storybookUrl('ui-react-ui-stack-stack--copy') });
+    const { page } = await setupPage(browser, { url: storybookUrl('ui-react-ui-stack-stack--copy', PORT) });
     await page.getByTestId('stack-copy').waitFor({ state: 'visible' });
 
     const stack1 = new StackManager(page.getByTestId('stack-1'));

package/src/translations.ts

@@ -2,21 +2,23 @@
 // Copyright 2023 DXOS.org
 //
 
-export const translationKey = 'stack';
+import { type Resource } from '@dxos/react-ui';
 
-export default [
+export const translationKey = '@dxos/react-ui-stack';
+
+export const translations = [
   {
     'en-US': {
       [translationKey]: {
-        'resize label': 'Drag to resize',
-        'drag handle label': 'Drag to rearrange',
-        'pin start label': 'Pin to the left sidebar',
-        'pin end label': 'Pin to the right sidebar',
-        'increment start label': 'Move to the left',
-        'increment end label': 'Move to the right',
-        'close label': 'Close',
-        'minify label': 'Minify',
+        'resize.label': 'Drag to resize',
+        'drag-handle.label': 'Drag to rearrange',
+        'pin-start.label': 'Pin to the left sidebar',
+        'pin-end.label': 'Pin to the right sidebar',
+        'increment-start.label': 'Move to the left',
+        'increment-end.label': 'Move to the right',
+        'close.label': 'Close',
+        'minify.label': 'Minify',
       },
     },
   },
-];
+] as const satisfies Resource[];