@dxos/react-ui-stack 0.7.5-main.e9bb01b → 0.7.5-main.ff8607b

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-stack",
-  "version": "0.7.5-main.e9bb01b",
+  "version": "0.7.5-main.ff8607b",
   "description": "A stack component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -36,6 +36,7 @@
   ],
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
+    "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
     "@effect/schema": "^0.75.5",
     "@fluentui/react-tabster": "9.23.3",
@@ -46,12 +47,12 @@
     "@radix-ui/react-slot": "1.1.2",
     "@radix-ui/react-use-controllable-state": "1.1.0",
     "react-resize-detector": "^11.0.1",
-    "@dxos/echo-schema": "0.7.5-main.e9bb01b",
-    "@dxos/keyboard": "0.7.5-main.e9bb01b",
-    "@dxos/react-ui-attention": "0.7.5-main.e9bb01b",
-    "@dxos/live-object": "0.7.5-main.e9bb01b",
-    "@dxos/util": "0.7.5-main.e9bb01b",
-    "@dxos/react-ui-mosaic": "0.7.5-main.e9bb01b"
+    "@dxos/echo-schema": "0.7.5-main.ff8607b",
+    "@dxos/live-object": "0.7.5-main.ff8607b",
+    "@dxos/react-ui-attention": "0.7.5-main.ff8607b",
+    "@dxos/react-ui-mosaic": "0.7.5-main.ff8607b",
+    "@dxos/util": "0.7.5-main.ff8607b",
+    "@dxos/keyboard": "0.7.5-main.ff8607b"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -60,24 +61,24 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/app-graph": "0.7.5-main.e9bb01b",
-    "@dxos/client": "0.7.5-main.e9bb01b",
-    "@dxos/echo-schema": "0.7.5-main.e9bb01b",
-    "@dxos/random": "0.7.5-main.e9bb01b",
-    "@dxos/react-ui-editor": "0.7.5-main.e9bb01b",
-    "@dxos/react-ui": "0.7.5-main.e9bb01b",
-    "@dxos/react-ui-theme": "0.7.5-main.e9bb01b",
-    "@dxos/storybook-utils": "0.7.5-main.e9bb01b",
-    "@dxos/test-utils": "0.7.5-main.e9bb01b"
+    "@dxos/app-graph": "0.7.5-main.ff8607b",
+    "@dxos/client": "0.7.5-main.ff8607b",
+    "@dxos/echo-schema": "0.7.5-main.ff8607b",
+    "@dxos/random": "0.7.5-main.ff8607b",
+    "@dxos/react-ui": "0.7.5-main.ff8607b",
+    "@dxos/react-ui-editor": "0.7.5-main.ff8607b",
+    "@dxos/storybook-utils": "0.7.5-main.ff8607b",
+    "@dxos/test-utils": "0.7.5-main.ff8607b",
+    "@dxos/react-ui-theme": "0.7.5-main.ff8607b"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/client": "0.7.5-main.e9bb01b",
-    "@dxos/react-ui": "0.7.5-main.e9bb01b",
-    "@dxos/random": "0.7.5-main.e9bb01b",
-    "@dxos/react-ui-theme": "0.7.5-main.e9bb01b"
+    "@dxos/random": "0.7.5-main.ff8607b",
+    "@dxos/client": "0.7.5-main.ff8607b",
+    "@dxos/react-ui": "0.7.5-main.ff8607b",
+    "@dxos/react-ui-theme": "0.7.5-main.ff8607b"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Stack.tsx

@@ -1,7 +1,9 @@
 //
 // Copyright 2024 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 { useArrowNavigationGroup } from '@fluentui/react-tabster';
 import { composeRefs } from '@radix-ui/react-compose-refs';
@@ -29,6 +31,8 @@ export const railGridHorizontal = 'grid-rows-[[rail-start]_var(--rail-size)_[con
 
 export const railGridVertical = 'grid-cols-[[rail-start]_var(--rail-size)_[content-start]_1fr_[content-end]]';
 
+export const autoScrollRootAttributes = { 'data-drag-autoscroll': 'idle' };
+
 export const Stack = forwardRef<HTMLDivElement, StackProps>(
   (
     {
@@ -62,33 +66,36 @@ export const Stack = forwardRef<HTMLDivElement, StackProps>(
         return;
       }
       const acceptSourceType = orientation === 'horizontal' ? 'column' : 'card';
-      return dropTargetForElements({
-        element: stackElement,
-        getData: ({ input, element }) => {
-          return attachClosestEdge(
-            { id: props.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: () => setDropping(false),
-        onDrop: ({ self, source }) => {
-          setDropping(false);
-          if (source.data.type === acceptSourceType && selfDroppable) {
-            onRearrange(source.data as StackItemData, self.data as StackItemData, extractClosestEdge(self.data));
-          }
-        },
-      });
-    }, [stackElement, selfDroppable]);
+      return combine(
+        dropTargetForElements({
+          element: stackElement,
+          getData: ({ input, element }) => {
+            return attachClosestEdge(
+              { id: props.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: () => setDropping(false),
+          onDrop: ({ self, source }) => {
+            setDropping(false);
+            if (source.data.type === acceptSourceType && selfDroppable) {
+              onRearrange(source.data as StackItemData, self.data as StackItemData, extractClosestEdge(self.data));
+            }
+          },
+        }),
+        autoScrollForElements({ element: stackElement, getAllowedAxis: () => orientation }),
+      );
+    }, [stackElement, selfDroppable, orientation]);
 
     return (
       <StackContext.Provider value={{ orientation, rail, size, onRearrange }}>
@@ -102,20 +109,28 @@ export const Stack = forwardRef<HTMLDivElement, StackProps>(
                 ? railGridHorizontal
                 : railGridVertical
               : orientation === 'horizontal'
-                ? 'grid-rows-1'
-                : 'grid-cols-1',
+                ? 'grid-rows-1 pli-1'
+                : 'grid-cols-1 plb-1',
             size === 'contain' &&
               (orientation === 'horizontal'
                 ? 'overflow-x-auto min-bs-0 bs-full max-bs-full'
                 : 'overflow-y-auto min-is-0 is-full max-is-full'),
             classNames,
           )}
+          data-rail={rail}
           aria-orientation={orientation}
           style={styles}
           ref={composedItemRef}
         >
           {children}
-          {selfDroppable && dropping && <ListItem.DropIndicator edge={orientation === 'horizontal' ? 'left' : 'top'} />}
+          {selfDroppable && dropping && (
+            <ListItem.DropIndicator
+              lineInset={8}
+              terminalInset={-8}
+              gap={-8}
+              edge={orientation === 'horizontal' ? 'left' : 'top'}
+            />
+          )}
         </div>
       </StackContext.Provider>
     );

package/src/components/StackItem.tsx

@@ -47,11 +47,24 @@ export type StackItemRootProps = ThemedClassName<ComponentPropsWithRef<'div'>> &
   onSizeChange?: (nextSize: StackItemSize) => void;
   role?: 'article' | 'section';
   disableRearrange?: boolean;
+  focusIndicatorVariant?: 'over-all' | 'group';
 };
 
 const StackItemRoot = forwardRef<HTMLDivElement, StackItemRootProps>(
   (
-    { item, children, classNames, size: propsSize, onSizeChange, role, order, style, disableRearrange, ...props },
+    {
+      item,
+      children,
+      classNames,
+      size: propsSize,
+      onSizeChange,
+      role,
+      order,
+      style,
+      disableRearrange,
+      focusIndicatorVariant = 'over-all',
+      ...props
+    },
     forwardedRef,
   ) => {
     const [itemElement, itemRef] = useState<HTMLDivElement | null>(null);
@@ -96,6 +109,10 @@ const StackItemRoot = forwardRef<HTMLDivElement, StackItemRootProps>(
           },
           onDragStart: () => {
             document.body.removeAttribute('data-drag-preview');
+            itemElement?.closest('[data-drag-autoscroll]')?.setAttribute('data-drag-autoscroll', 'active');
+          },
+          onDrop: () => {
+            itemElement?.closest('[data-drag-autoscroll]')?.setAttribute('data-drag-autoscroll', 'idle');
           },
         }),
         dropTargetForElements({
@@ -136,7 +153,12 @@ const StackItemRoot = forwardRef<HTMLDivElement, StackItemRootProps>(
           tabIndex={0}
           {...focusGroupAttrs}
           className={mx(
-            'group/stack-item grid relative dx-focus-ring-inset-over-all',
+            'group/stack-item grid relative',
+            focusIndicatorVariant === 'over-all'
+              ? 'dx-focus-ring-inset-over-all'
+              : orientation === 'horizontal'
+                ? 'dx-focus-ring-group-x'
+                : 'dx-focus-ring-group-y',
             size === 'min-content' && (orientation === 'horizontal' ? 'is-min' : 'bs-min'),
             orientation === 'horizontal' ? 'grid-rows-subgrid' : 'grid-cols-subgrid',
             rail && (orientation === 'horizontal' ? 'row-span-2' : 'col-span-2'),
@@ -155,7 +177,7 @@ const StackItemRoot = forwardRef<HTMLDivElement, StackItemRootProps>(
           ref={composedItemRef}
         >
           {children}
-          {closestEdge && <ListItem.DropIndicator edge={closestEdge} />}
+          {closestEdge && <ListItem.DropIndicator lineInset={8} terminalInset={-8} edge={closestEdge} />}
         </Root>
       </StackItemContext.Provider>
     );