@dxos/react-ui-stack 0.8.2-staging.7ac8446 → 0.8.3-main.672df60

package/src/exemplars/CardStack/CardStackDragPreview.tsx

@@ -0,0 +1,61 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { type PropsWithChildren } from 'react';
+
+import { IconButton, useTranslation } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+
+import { type StackProps } from '../../components';
+import { translationKey } from '../../translations';
+
+const CardStackDragPreviewRoot = ({ children }: PropsWithChildren<{}>) => {
+  return (
+    <div className='p-2'>
+      <div className='rounded-md max-bs-[calc(100dvh-1rem)] overflow-hidden bg-baseSurface border border-separator ring-focusLine ring-neutralFocusIndicator flex flex-col'>
+        {children}
+      </div>
+    </div>
+  );
+};
+
+const CardStackDragPreviewHeading = ({ children }: PropsWithChildren<{}>) => {
+  const { t } = useTranslation(translationKey);
+  return (
+    <div className='flex items-center p-2'>
+      <IconButton
+        iconOnly
+        icon='ph--dots-six-vertical--regular'
+        variant='ghost'
+        label={t('column drag handle label')}
+        classNames='pli-2'
+      />
+      {children}
+    </div>
+  );
+};
+
+const CardStackDragPreviewContent = ({
+  children,
+  itemsCount = 0,
+}: PropsWithChildren<Pick<StackProps, 'itemsCount'>>) => {
+  return (
+    <div
+      className={mx('overflow-y-auto flex-1 pli-2 flex flex-col gap-2', 'plb-1', itemsCount > 0 ? 'plb-2' : 'plb-1')}
+    >
+      {children}
+    </div>
+  );
+};
+
+const CardStackDragPreviewFooter = ({ children }: PropsWithChildren<{}>) => {
+  return <div className='p-2 border-t border-separator'>{children}</div>;
+};
+
+export const CardStackDragPreview = {
+  Root: CardStackDragPreviewRoot,
+  Heading: CardStackDragPreviewHeading,
+  Content: CardStackDragPreviewContent,
+  Footer: CardStackDragPreviewFooter,
+};

package/src/exemplars/CardStack/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './CardStack';
+export * from './CardStackDragPreview';

package/src/exemplars/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './Card';
+export * from './CardStack';

package/src/hooks/useStackDropForElements.ts

@@ -8,23 +8,24 @@ import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-sc
 import { attachClosestEdge, extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
 import { useLayoutEffect, useState } from 'react';
 
-import { type Orientation } from '../components/Stack';
-import { type StackItemRearrangeHandler, type StackItemData } from '../components/StackContext';
+import { type StackItemRearrangeHandler, type StackItemData, type Orientation } from '../components';
 
 /**
  * Hook to handle drag and drop functionality for Stack components.
  */
 export const useStackDropForElements = ({
+  id,
   element,
+  scrollElement = element,
   selfDroppable,
   orientation,
-  id,
   onRearrange,
 }: {
+  id?: string;
   element: HTMLDivElement | null;
+  scrollElement?: HTMLDivElement | null;
   selfDroppable: boolean;
   orientation: Orientation;
-  id?: string;
   onRearrange?: StackItemRearrangeHandler;
 }) => {
   const [dropping, setDropping] = useState(false);
@@ -65,9 +66,9 @@ export const useStackDropForElements = ({
           }
         },
       }),
-      autoScrollForElements({ element, getAllowedAxis: () => orientation }),
+      autoScrollForElements({ element: scrollElement as Element, getAllowedAxis: () => orientation }),
     );
-  }, [element, selfDroppable, orientation, id, onRearrange]);
+  }, [element, scrollElement, selfDroppable, orientation, id, onRearrange]);
 
   return { dropping };
 };

package/src/index.ts

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

package/src/testing/stack-manager.ts

@@ -11,7 +11,7 @@ export class StackManager {
     this._page = locator.page();
   }
 
-  sections() {
+  sections(): Locator {
     return this.locator.locator('section');
   }
 
@@ -19,7 +19,7 @@ export class StackManager {
     return this.locator.locator('section').evaluateAll((els) => els.map((el) => el.getAttribute('id')));
   }
 
-  section(index: number) {
+  section(index: number): SectionManager {
     return new SectionManager(this.locator.locator('section').nth(index));
   }
 }
@@ -31,21 +31,21 @@ export class SectionManager {
     this._page = locator.page();
   }
 
-  async id() {
+  async id(): Promise<string | null> {
     return this.locator.getAttribute('id');
   }
 
-  async remove() {
+  async remove(): Promise<void> {
     await this.locator.getByTestId('section.drag-handle-menu-trigger').click();
     await this._page.getByTestId('section.remove').click();
   }
 
-  async navigateTo() {
+  async navigateTo(): Promise<void> {
     await this.locator.getByTestId('section.drag-handle-menu-trigger').click();
     await this._page.getByTestId('section.navigate-to').click();
   }
 
-  async dragTo(target: Locator, offset: { x: number; y: number } = { x: 0, y: 0 }) {
+  async dragTo(target: Locator, offset: { x: number; y: number } = { x: 0, y: 0 }): Promise<void> {
     const active = this.locator.getByTestId('section.drag-handle-menu-trigger');
     const box = await target.boundingBox();
     if (box) {

package/src/translations.ts

@@ -9,6 +9,7 @@ export default [
     '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',

package/dist/types/src/components/LayoutControls.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"LayoutControls.d.ts","sourceRoot":"","sources":["../../../../src/components/LayoutControls.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAGL,KAAK,gBAAgB,EAKtB,MAAM,gBAAgB,CAAC;AAIxB,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,OAAO,GAAG,GAAG,KAAK,GAAG,WAAW,IAAI,OAAO,GAAG,KAAK,EAAE,CAAC;AAChG,MAAM,MAAM,oBAAoB,GAAG,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;AAEvE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,gBAAgB,EAAE,SAAS,CAAC,GAAG;IACpE,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAC/B,OAAO,CAAC,EAAE,eAAe,GAAG,SAAS,CAAC;IACtC,KAAK,CAAC,EAAE,OAAO,GAAG,cAAc,GAAG,YAAY,CAAC;IAChD,YAAY,EAAE,kBAAkB,CAAC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,GAAG,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;CAChC,CAAC;AAkBF,eAAO,MAAM,cAAc,yGA4E1B,CAAC"}

package/dist/types/src/components/MenuSignifier.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"MenuSignifier.d.ts","sourceRoot":"","sources":["../../../../src/components/MenuSignifier.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAO,MAAM,uBAAuB,yBAoBnC,CAAC;AAEF,eAAO,MAAM,qBAAqB,yBAIjC,CAAC"}

package/dist/types/src/components/Stack.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../../../src/components/Stack.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,EAAgC,KAAK,qBAAqB,EAAiC,MAAM,OAAO,CAAC;AAEvH,OAAO,EAAE,KAAK,eAAe,EAAY,MAAM,gBAAgB,CAAC;AAGhE,OAAO,EAAE,KAAK,iBAAiB,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGtE,MAAM,MAAM,WAAW,GAAG,YAAY,GAAG,UAAU,CAAC;AACpD,MAAM,MAAM,IAAI,GAAG,WAAW,GAAG,SAAS,GAAG,qBAAqB,CAAC;AAEnE,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,eAAe,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC,EAAE,kBAAkB,CAAC,GAC9F,OAAO,CAAC,iBAAiB,CAAC,GAAG;IAAE,UAAU,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEvD,eAAO,MAAM,kBAAkB,gFAAgF,CAAC;AAChH,eAAO,MAAM,gBAAgB,gFAAgF,CAAC;AAG9G,eAAO,MAAM,mCAAmC,2HAC0E,CAAC;AAC3H,eAAO,MAAM,iCAAiC,2HAC4E,CAAC;AAE3H,eAAO,MAAM,wBAAwB;;CAAqC,CAAC;AAE3E,eAAO,MAAM,KAAK,gGA8EjB,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC;AAExB,YAAY,EAAE,iBAAiB,EAAE,CAAC"}

package/dist/types/src/components/Stack.stories.d.ts

@@ -1,8 +0,0 @@
-import { type Meta, type StoryObj } from '@storybook/react';
-import React from 'react';
-declare const StorybookStack: () => React.JSX.Element;
-type Story = StoryObj<typeof StorybookStack>;
-export declare const Default: Story;
-declare const meta: Meta<typeof StorybookStack>;
-export default meta;
-//# sourceMappingURL=Stack.stories.d.ts.map

package/dist/types/src/components/Stack.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Stack.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Stack.stories.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,KAAgC,MAAM,OAAO,CAAC;AAuBrD,QAAA,MAAM,cAAc,yBAwFnB,CAAC;AAEF,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,cAAc,CAAC,CAAC;AAE7C,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,cAAc,CAKrC,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/types/src/components/StackItem.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"StackItem.d.ts","sourceRoot":"","sources":["../../../../src/components/StackItem.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,EAAyC,KAAK,qBAAqB,EAAe,MAAM,OAAO,CAAC;AAE9G,OAAO,EAAE,KAAK,eAAe,EAAY,MAAM,gBAAgB,CAAC;AAIhE,OAAO,EAA8B,KAAK,aAAa,EAAE,KAAK,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACpG,OAAO,EAAoB,KAAK,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAClF,OAAO,EAAuB,KAAK,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AAC3F,OAAO,EAGL,KAAK,qBAAqB,EAC1B,KAAK,0BAA0B,EAChC,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAyB,KAAK,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AACjG,OAAO,EAEL,KAAK,mBAAmB,EACxB,KAAK,oBAAoB,EACzB,KAAK,yBAAyB,EAE/B,MAAM,kBAAkB,CAAC;AAG1B,eAAO,MAAM,uBAAuB,KAA6B,CAAC;AAClE,eAAO,MAAM,qBAAqB,gBAAwC,CAAC;AAC3E,eAAO,MAAM,sBAAsB,KAAkD,CAAC;AAEtF,MAAM,MAAM,kBAAkB,GAAG,eAAe,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC,GAAG;IAC/E,IAAI,EAAE,IAAI,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,aAAa,KAAK,IAAI,CAAC;IACjD,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAC7B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,qBAAqB,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;CAC9C,CAAC;AAuIF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;CASrB,CAAC;AAEF,YAAY,EACV,qBAAqB,EACrB,qBAAqB,EACrB,0BAA0B,EAC1B,0BAA0B,EAC1B,wBAAwB,EACxB,mBAAmB,EACnB,yBAAyB,EACzB,oBAAoB,GACrB,CAAC"}

package/dist/types/src/components/StackItemContent.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"StackItemContent.d.ts","sourceRoot":"","sources":["../../../../src/components/StackItemContent.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,KAAK,wBAAwB,EAAc,MAAM,OAAO,CAAC;AAEzE,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAKtD,MAAM,MAAM,qBAAqB,GAAG,eAAe,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,GAAG;IACrF;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,GAAG,OAAO,GAAG,QAAQ,CAAC;CACzC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,gBAAgB;;;IAtB3B;;;OAGG;cACO,OAAO;IAEjB;;OAEG;gBACS,OAAO;IAEnB;;;OAGG;WACI,WAAW,GAAG,OAAO,GAAG,QAAQ;wCAkCxC,CAAC"}

package/dist/types/src/components/StackItemDragHandle.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"StackItemDragHandle.d.ts","sourceRoot":"","sources":["../../../../src/components/StackItemDragHandle.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EAAE,KAAK,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAI7D,MAAM,MAAM,wBAAwB,GAAG,wBAAwB,CAAC,QAAQ,CAAC,GAAG;IAAE,OAAO,EAAE,OAAO,CAAA;CAAE,CAAC;AAEjG,eAAO,MAAM,mBAAmB,0BAA2B,wBAAwB,sBAUlF,CAAC"}

package/dist/types/src/components/StackItemHeading.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"StackItemHeading.d.ts","sourceRoot":"","sources":["../../../../src/components/StackItemHeading.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EAAE,KAAK,wBAAwB,EAAE,KAAK,qBAAqB,EAAc,MAAM,OAAO,CAAC;AAErG,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACtD,OAAO,EAAgB,KAAK,YAAY,EAAE,KAAK,OAAO,EAAE,MAAM,0BAA0B,CAAC;AAKzF,MAAM,MAAM,qBAAqB,GAAG,eAAe,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,CAAC;AAErF,eAAO,MAAM,gBAAgB,uCAAwC,qBAAqB,sBAmBzF,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG,eAAe,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAC,GAAG,YAAY,GAAG,OAAO,CAAC;AAE/G,eAAO,MAAM,qBAAqB,oHAgBjC,CAAC"}

package/dist/types/src/components/StackItemResizeHandle.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"StackItemResizeHandle.d.ts","sourceRoot":"","sources":["../../../../src/components/StackItemResizeHandle.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,MAAM,MAAM,0BAA0B,GAAG,EAAE,CAAC;AAE5C,eAAO,MAAM,qBAAqB,yBAajC,CAAC"}

package/dist/types/src/components/StackItemSigil.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"StackItemSigil.d.ts","sourceRoot":"","sources":["../../../../src/components/StackItemSigil.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAY,KAAK,iBAAiB,EAAgC,MAAM,OAAO,CAAC;AAE9F,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,OAAO,EAAU,KAAK,WAAW,EAAyD,MAAM,gBAAgB,CAAC;AACjH,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,OAAO,EAAgB,MAAM,0BAA0B,CAAC;AAOzF,MAAM,MAAM,UAAU,GAAG;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,UAAU,EAAE,IAAI,GAAG,YAAY,GAAG,MAAM,CAAC,CAAC;AAElF,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,GAClE,YAAY,GACZ,OAAO,GAAG;IACR,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEJ,eAAO,MAAM,oBAAoB,kHAiBhC,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,iBAAiB,CACjD;IACE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,oBAAoB,EAAE,EAAE,CAAC;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,oBAAoB,KAAK,IAAI,CAAC;CACnD,GAAG,OAAO,CACZ,CAAC;AAEF,eAAO,MAAM,cAAc;mBARR,MAAM;kBACP,MAAM;cACV,oBAAoB,EAAE,EAAE;UAC5B,MAAM;eACD,CAAC,MAAM,EAAE,oBAAoB,KAAK,IAAI;;;2CAyGpD,CAAC"}