@dxos/react-ui-stack 0.7.5-main.e9bb01b → 0.7.5-staging.2ff1350

package/dist/lib/browser/index.mjs

@@ -1,9 +1,7 @@
 // packages/ui/react-ui-stack/src/components/Stack.tsx
-import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
-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";
-import React, { Children, forwardRef, useLayoutEffect, useState } from "react";
+import React, { Children, forwardRef, useState as useState2, useMemo } from "react";
 import { ListItem } from "@dxos/react-ui";
 import { mx } from "@dxos/react-ui-theme";
 
@@ -24,35 +22,28 @@ var StackItemContext = /* @__PURE__ */ createContext({
 });
 var useStackItem = () => useContext(StackItemContext);
 
-// packages/ui/react-ui-stack/src/components/Stack.tsx
-var railGridHorizontal = "grid-rows-[[rail-start]_var(--rail-size)_[content-start]_1fr_[content-end]]";
-var railGridVertical = "grid-cols-[[rail-start]_var(--rail-size)_[content-start]_1fr_[content-end]]";
-var Stack = /* @__PURE__ */ forwardRef(({ children, classNames, style, orientation = "vertical", rail = true, size = "intrinsic", onRearrange, itemsCount = Children.count(children), ...props }, forwardedRef) => {
-  const [stackElement, stackRef] = useState(null);
-  const composedItemRef = composeRefs(stackRef, forwardedRef);
+// packages/ui/react-ui-stack/src/hooks/useStackDropForElements.ts
+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 { useLayoutEffect, useState } from "react";
+var useStackDropForElements = ({ element, selfDroppable, orientation, id, onRearrange }) => {
   const [dropping, setDropping] = useState(false);
-  const arrowNavigationGroup = useArrowNavigationGroup({
-    axis: orientation
-  });
-  const styles = {
-    [orientation === "horizontal" ? "gridTemplateColumns" : "gridTemplateRows"]: `repeat(${itemsCount}, min-content)`,
-    ...style
-  };
-  const selfDroppable = !!(itemsCount < 1 && onRearrange && props.id);
   useLayoutEffect(() => {
-    if (!stackElement || !selfDroppable) {
+    if (!element || !selfDroppable) {
       return;
     }
     const acceptSourceType = orientation === "horizontal" ? "column" : "card";
-    return dropTargetForElements({
-      element: stackElement,
-      getData: ({ input, element }) => {
+    return combine(dropTargetForElements({
+      element,
+      getData: ({ input, element: element2 }) => {
         return attachClosestEdge({
-          id: props.id,
+          id,
           type: orientation === "horizontal" ? "card" : "column"
         }, {
           input,
-          element,
+          element: element2,
           allowedEdges: [
             orientation === "horizontal" ? "left" : "top"
           ]
@@ -68,17 +59,70 @@ var Stack = /* @__PURE__ */ forwardRef(({ children, classNames, style, orientati
           setDropping(true);
         }
       },
-      onDragLeave: () => setDropping(false),
+      onDragLeave: () => {
+        return setDropping(false);
+      },
       onDrop: ({ self, source }) => {
         setDropping(false);
-        if (source.data.type === acceptSourceType && selfDroppable) {
+        if (source.data.type === acceptSourceType && selfDroppable && onRearrange) {
           onRearrange(source.data, self.data, extractClosestEdge(self.data));
         }
       }
-    });
+    }), autoScrollForElements({
+      element,
+      getAllowedAxis: () => orientation
+    }));
+  }, [
+    element,
+    selfDroppable,
+    orientation,
+    id,
+    onRearrange
+  ]);
+  return {
+    dropping
+  };
+};
+
+// packages/ui/react-ui-stack/src/components/Stack.tsx
+var railGridHorizontal = "grid-rows-[[rail-start]_var(--rail-size)_[content-start]_1fr_[content-end]]";
+var railGridVertical = "grid-cols-[[rail-start]_var(--rail-size)_[content-start]_1fr_[content-end]]";
+var railGridHorizontalContainFitContent = "grid-rows-[[rail-start]_var(--rail-size)_[content-start]_fit-content(calc(100%-var(--rail-size)*2+2px))_[content-end]]";
+var railGridVerticalContainFitContent = "grid-cols-[[rail-start]_var(--rail-size)_[content-start]_fit-content(calc(100%-var(--rail-size)*2+2px))_[content-end]]";
+var autoScrollRootAttributes = {
+  "data-drag-autoscroll": "idle"
+};
+var Stack = /* @__PURE__ */ forwardRef(({ children, classNames, style, orientation = "vertical", rail = true, size = "intrinsic", onRearrange, itemsCount = Children.count(children), ...props }, forwardedRef) => {
+  const [stackElement, stackRef] = useState2(null);
+  const composedItemRef = composeRefs(stackRef, forwardedRef);
+  const arrowNavigationGroup = useArrowNavigationGroup({
+    axis: orientation
+  });
+  const styles = {
+    [orientation === "horizontal" ? "gridTemplateColumns" : "gridTemplateRows"]: `repeat(${itemsCount}, min-content) [tabster-dummies] 0`,
+    ...style
+  };
+  const selfDroppable = !!(itemsCount < 1 && onRearrange && props.id);
+  const { dropping } = useStackDropForElements({
+    id: props.id,
+    element: stackElement,
+    selfDroppable,
+    orientation,
+    onRearrange
+  });
+  const gridClasses = useMemo(() => {
+    if (!rail) {
+      return orientation === "horizontal" ? "grid-rows-1 pli-1" : "grid-cols-1 plb-1";
+    }
+    if (orientation === "horizontal") {
+      return size === "contain-fit-content" ? railGridHorizontalContainFitContent : railGridHorizontal;
+    } else {
+      return size === "contain-fit-content" ? railGridVerticalContainFitContent : railGridVertical;
+    }
   }, [
-    stackElement,
-    selfDroppable
+    rail,
+    orientation,
+    size
   ]);
   return /* @__PURE__ */ React.createElement(StackContext.Provider, {
     value: {
@@ -90,26 +134,31 @@ var Stack = /* @__PURE__ */ forwardRef(({ children, classNames, style, orientati
   }, /* @__PURE__ */ React.createElement("div", {
     ...props,
     ...arrowNavigationGroup,
-    className: mx("grid relative", rail ? orientation === "horizontal" ? railGridHorizontal : railGridVertical : orientation === "horizontal" ? "grid-rows-1" : "grid-cols-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),
+    className: mx("grid relative", gridClasses, (size === "contain" || size === "contain-fit-content") && (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 && /* @__PURE__ */ React.createElement(ListItem.DropIndicator, {
+    lineInset: 8,
+    terminalInset: -8,
+    gap: -8,
     edge: orientation === "horizontal" ? "left" : "top"
   })));
 });
 
 // packages/ui/react-ui-stack/src/components/StackItem.tsx
-import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
-import { draggable as draggable2, dropTargetForElements as dropTargetForElements2 } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { combine as combine2 } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { draggable, dropTargetForElements as dropTargetForElements2 } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { preserveOffsetOnSource } from "@atlaskit/pragmatic-drag-and-drop/element/preserve-offset-on-source";
 import { scrollJustEnoughIntoView } from "@atlaskit/pragmatic-drag-and-drop/element/scroll-just-enough-into-view";
 import { attachClosestEdge as attachClosestEdge2, extractClosestEdge as extractClosestEdge2 } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
 import { useFocusableGroup as useFocusableGroup2 } from "@fluentui/react-tabster";
 import { composeRefs as composeRefs2 } from "@radix-ui/react-compose-refs";
-import React8, { forwardRef as forwardRef5, useLayoutEffect as useLayoutEffect3, useState as useState3, useCallback } from "react";
+import React8, { forwardRef as forwardRef5, useLayoutEffect as useLayoutEffect2, useState as useState4, useCallback } from "react";
 import { ListItem as ListItem2 } from "@dxos/react-ui";
-import { mx as mx6 } from "@dxos/react-ui-theme";
+import { resizeAttributes, sizeStyle } from "@dxos/react-ui-dnd";
+import { mx as mx5 } from "@dxos/react-ui-theme";
 
 // packages/ui/react-ui-stack/src/components/StackItemContent.tsx
 import React2, { forwardRef as forwardRef2 } from "react";
@@ -176,94 +225,28 @@ var StackItemHeadingLabel = /* @__PURE__ */ forwardRef3(({ attendableId, related
 });
 
 // packages/ui/react-ui-stack/src/components/StackItemResizeHandle.tsx
-import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
-import { disableNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview";
-import { preventUnhandled } from "@atlaskit/pragmatic-drag-and-drop/prevent-unhandled";
-import React5, { useLayoutEffect as useLayoutEffect2, useRef } from "react";
-import { mx as mx4 } from "@dxos/react-ui-theme";
-var REM = parseFloat(getComputedStyle(document.documentElement).fontSize);
+import React5 from "react";
+import { ResizeHandle } from "@dxos/react-ui-dnd";
 var MIN_WIDTH = 20;
 var MIN_HEIGHT = 3;
-var measureStackItem = (element) => {
-  const stackItemElement = element.closest("[data-dx-stack-item]");
-  return stackItemElement?.getBoundingClientRect() ?? {
-    width: DEFAULT_EXTRINSIC_SIZE,
-    height: DEFAULT_EXTRINSIC_SIZE
-  };
-};
-var getNextSize = (startSize, location, client) => {
-  return Math.max(client === "clientX" ? MIN_WIDTH : MIN_HEIGHT, startSize + (location.current.input[client] - location.initial.input[client]) / REM);
-};
 var StackItemResizeHandle = () => {
   const { orientation } = useStack();
   const { setSize, size } = useStackItem();
-  const buttonRef = useRef(null);
-  const dragStartSize = useRef(size);
-  const client = orientation === "horizontal" ? "clientX" : "clientY";
-  useLayoutEffect2(() => {
-    if (!buttonRef.current || buttonRef.current.hasAttribute("draggable")) {
-      return;
-    }
-    draggable({
-      element: buttonRef.current,
-      onGenerateDragPreview: ({ nativeSetDragImage }) => {
-        disableNativeDragPreview({
-          nativeSetDragImage
-        });
-        preventUnhandled.start();
-      },
-      onDragStart: () => {
-        dragStartSize.current = dragStartSize.current === "min-content" ? measureStackItem(buttonRef.current)[orientation === "horizontal" ? "width" : "height"] / REM : dragStartSize.current;
-      },
-      onDrag: ({ location }) => {
-        if (typeof dragStartSize.current !== "number") {
-          return;
-        }
-        setSize(getNextSize(dragStartSize.current, location, client));
-      },
-      onDrop: ({ location }) => {
-        if (typeof dragStartSize.current !== "number") {
-          return;
-        }
-        const nextSize = getNextSize(dragStartSize.current, location, client);
-        setSize(nextSize, true);
-        dragStartSize.current = nextSize;
-      }
-    });
-  }, []);
-  return /* @__PURE__ */ React5.createElement("button", {
-    ref: buttonRef,
-    className: mx4("group absolute", orientation === "horizontal" ? "cursor-col-resize is-3 bs-full inline-end-[-1px] !border-lb-0 before:inset-block-0 before:inline-end-0 before:is-1" : "cursor-row-resize bs-3 is-full block-end-[-1px] !border-li-0 before:inset-inline-0 before:block-end-0 before:bs-1", "before:transition-opacity before:duration-100 before:ease-in-out before:opacity-0 hover:before:opacity-100 focus-visible:before:opacity-100 active:before:opacity-100", "before:absolute before:block before:bg-accentFocusIndicator")
-  }, /* @__PURE__ */ React5.createElement("div", {
-    role: "none",
-    className: mx4("absolute flex items-center group-hover:opacity-0 group-focus-visible:opacity-0 group-active:opacity-0", orientation === "horizontal" ? "block-start-0 inline-end-px bs-[--rail-size]" : "inline-start-0 block-end-px is-[--rail-size] flex justify-center")
-  }, /* @__PURE__ */ React5.createElement(DragHandleSignifier, {
-    orientation
-  })));
-};
-var DragHandleSignifier = ({ orientation }) => {
-  return /* @__PURE__ */ React5.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 256 256",
-    fill: "currentColor",
-    className: mx4("shrink-0 bs-[1em] is-[1em] text-unAccent", orientation === "vertical" && "rotate-90")
-  }, /* @__PURE__ */ React5.createElement("path", {
-    d: "M256,64c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
-  }), /* @__PURE__ */ React5.createElement("path", {
-    d: "M256,120c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
-  }), /* @__PURE__ */ React5.createElement("path", {
-    d: "M256,176c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
-  }), /* @__PURE__ */ React5.createElement("path", {
-    d: "M256,232c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
-  }));
+  return /* @__PURE__ */ React5.createElement(ResizeHandle, {
+    side: orientation === "horizontal" ? "inline-end" : "block-end",
+    fallbackSize: DEFAULT_EXTRINSIC_SIZE,
+    minSize: orientation === "horizontal" ? MIN_WIDTH : MIN_HEIGHT,
+    size,
+    onSizeChange: setSize
+  });
 };
 
 // packages/ui/react-ui-stack/src/components/StackItemSigil.tsx
-import React7, { Fragment, forwardRef as forwardRef4, useRef as useRef2, useState as useState2 } from "react";
+import React7, { Fragment, forwardRef as forwardRef4, useRef, useState as useState3 } from "react";
 import { keySymbols } from "@dxos/keyboard";
 import { Button, DropdownMenu, Icon, toLocalizedString, useTranslation } from "@dxos/react-ui";
 import { useAttention as useAttention2 } from "@dxos/react-ui-attention";
-import { descriptionText, mx as mx5 } from "@dxos/react-ui-theme";
+import { descriptionText, mx as mx4 } from "@dxos/react-ui-theme";
 import { getHostPlatform } from "@dxos/util";
 
 // packages/ui/react-ui-stack/src/components/MenuSignifier.tsx
@@ -320,8 +303,8 @@ var StackItemSigilButton = /* @__PURE__ */ forwardRef4(({ attendableId, classNam
 });
 var StackItemSigil = /* @__PURE__ */ forwardRef4(({ actions: actionGroups, onAction, triggerLabel, attendableId, icon, related, children }, forwardedRef) => {
   const { t } = useTranslation(translationKey);
-  const suppressNextTooltip = useRef2(false);
-  const [optionsMenuOpen, setOptionsMenuOpen] = useState2(false);
+  const suppressNextTooltip = useRef(false);
+  const [optionsMenuOpen, setOptionsMenuOpen] = useState3(false);
   const hasActions = actionGroups && actionGroups.length > 0;
   const button = /* @__PURE__ */ React7.createElement(StackItemSigilButton, {
     attendableId,
@@ -387,7 +370,7 @@ var StackItemSigil = /* @__PURE__ */ forwardRef4(({ actions: actionGroups, onAct
         icon: "ph--check--regular",
         size: 4
       })), shortcut && /* @__PURE__ */ React7.createElement("span", {
-        className: mx5("shrink-0", descriptionText)
+        className: mx4("shrink-0", descriptionText)
       }, keySymbols(shortcut).join("")));
     }));
   }), children), /* @__PURE__ */ React7.createElement(DropdownMenu.Arrow, null))));
@@ -397,12 +380,12 @@ var StackItemSigil = /* @__PURE__ */ forwardRef4(({ actions: actionGroups, onAct
 var DEFAULT_HORIZONTAL_SIZE = 44;
 var DEFAULT_VERTICAL_SIZE = "min-content";
 var DEFAULT_EXTRINSIC_SIZE = DEFAULT_HORIZONTAL_SIZE;
-var StackItemRoot = /* @__PURE__ */ forwardRef5(({ item, children, classNames, size: propsSize, onSizeChange, role, order, style, disableRearrange, ...props }, forwardedRef) => {
-  const [itemElement, itemRef] = useState3(null);
-  const [selfDragHandleElement, selfDragHandleRef] = useState3(null);
-  const [closestEdge, setEdge] = useState3(null);
+var StackItemRoot = /* @__PURE__ */ forwardRef5(({ item, children, classNames, size: propsSize, onSizeChange, role, order, style, disableRearrange, focusIndicatorVariant = "over-all", ...props }, forwardedRef) => {
+  const [itemElement, itemRef] = useState4(null);
+  const [selfDragHandleElement, selfDragHandleRef] = useState4(null);
+  const [closestEdge, setEdge] = useState4(null);
   const { orientation, rail, onRearrange } = useStack();
-  const [size = orientation === "horizontal" ? DEFAULT_HORIZONTAL_SIZE : DEFAULT_VERTICAL_SIZE, setInternalSize] = useState3(propsSize);
+  const [size = orientation === "horizontal" ? DEFAULT_HORIZONTAL_SIZE : DEFAULT_VERTICAL_SIZE, setInternalSize] = useState4(propsSize);
   const Root = role ?? "div";
   const composedItemRef = composeRefs2(itemRef, forwardedRef);
   const setSize = useCallback((nextSize, commit) => {
@@ -414,11 +397,11 @@ var StackItemRoot = /* @__PURE__ */ forwardRef5(({ item, children, classNames, s
     onSizeChange
   ]);
   const type = orientation === "horizontal" ? "column" : "card";
-  useLayoutEffect3(() => {
+  useLayoutEffect2(() => {
     if (!itemElement || !onRearrange || disableRearrange) {
       return;
     }
-    return combine(draggable2({
+    return combine2(draggable({
       element: itemElement,
       ...selfDragHandleElement && {
         dragHandle: selfDragHandleElement
@@ -442,6 +425,10 @@ var StackItemRoot = /* @__PURE__ */ forwardRef5(({ item, children, classNames, s
       },
       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");
       }
     }), dropTargetForElements2({
       element: itemElement,
@@ -499,12 +486,11 @@ var StackItemRoot = /* @__PURE__ */ forwardRef5(({ item, children, classNames, s
     ...props,
     tabIndex: 0,
     ...focusGroupAttrs,
-    className: mx6("group/stack-item grid relative dx-focus-ring-inset-over-all", 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"), classNames),
+    className: mx5("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", orientation === "horizontal" ? "grid-rows-subgrid" : "grid-cols-subgrid", rail && (orientation === "horizontal" ? "row-span-2" : "col-span-2"), classNames),
     "data-dx-stack-item": true,
+    ...resizeAttributes,
     style: {
-      ...size !== "min-content" && {
-        [orientation === "horizontal" ? "inlineSize" : "blockSize"]: `${size}rem`
-      },
+      ...sizeStyle(size, orientation),
       ...Number.isFinite(order) && {
         [orientation === "horizontal" ? "gridColumn" : "gridRow"]: `${order}`
       },
@@ -512,6 +498,8 @@ var StackItemRoot = /* @__PURE__ */ forwardRef5(({ item, children, classNames, s
     },
     ref: composedItemRef
   }, children, closestEdge && /* @__PURE__ */ React8.createElement(ListItem2.DropIndicator, {
+    lineInset: 8,
+    terminalInset: -8,
     edge: closestEdge
   })));
 });
@@ -600,8 +588,11 @@ export {
   StackContext,
   StackItem,
   StackItemContext,
+  autoScrollRootAttributes,
   railGridHorizontal,
+  railGridHorizontalContainFitContent,
   railGridVertical,
+  railGridVerticalContainFitContent,
   translations_default as translations,
   useStack,
   useStackItem