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

package/dist/lib/browser/index.mjs

@@ -1,5 +1,7 @@
 // packages/ui/react-ui-stack/src/components/Stack.tsx
+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";
@@ -27,6 +29,9 @@ 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 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] = useState(null);
   const composedItemRef = composeRefs(stackRef, forwardedRef);
@@ -44,7 +49,7 @@ var Stack = /* @__PURE__ */ forwardRef(({ children, classNames, style, orientati
       return;
     }
     const acceptSourceType = orientation === "horizontal" ? "column" : "card";
-    return dropTargetForElements({
+    return combine(dropTargetForElements({
       element: stackElement,
       getData: ({ input, element }) => {
         return attachClosestEdge({
@@ -75,10 +80,14 @@ var Stack = /* @__PURE__ */ forwardRef(({ children, classNames, style, orientati
           onRearrange(source.data, self.data, extractClosestEdge(self.data));
         }
       }
-    });
+    }), autoScrollForElements({
+      element: stackElement,
+      getAllowedAxis: () => orientation
+    }));
   }, [
     stackElement,
-    selfDroppable
+    selfDroppable,
+    orientation
   ]);
   return /* @__PURE__ */ React.createElement(StackContext.Provider, {
     value: {
@@ -90,20 +99,24 @@ 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", rail ? orientation === "horizontal" ? railGridHorizontal : railGridVertical : orientation === "horizontal" ? "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 && /* @__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 { combine as combine2 } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { draggable as draggable2, dropTargetForElements as dropTargetForElements2 } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
-import { disableNativeDragPreview as disableNativeDragPreview2 } from "@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview";
-import { preventUnhandled as preventUnhandled2 } from "@atlaskit/pragmatic-drag-and-drop/prevent-unhandled";
+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";
@@ -162,7 +175,7 @@ var StackItemHeading = ({ children, classNames, ...props }) => {
     ...props,
     tabIndex: 0,
     ...focusableGroupAttrs,
-    className: mx3("flex items-center ch-focus-ring-inset-over-all relative !border-is-0", orientation === "horizontal" ? "bs-[--rail-size]" : "is-[--rail-size] flex-col", classNames)
+    className: mx3("flex items-center dx-focus-ring-inset-over-all relative !border-is-0", orientation === "horizontal" ? "bs-[--rail-size]" : "is-[--rail-size] flex-col", classNames)
   }, children);
 };
 var StackItemHeadingLabel = /* @__PURE__ */ forwardRef3(({ attendableId, related, classNames, ...props }, forwardedRef) => {
@@ -182,7 +195,8 @@ import { preventUnhandled } from "@atlaskit/pragmatic-drag-and-drop/prevent-unha
 import React5, { useLayoutEffect as useLayoutEffect2, useRef } from "react";
 import { mx as mx4 } from "@dxos/react-ui-theme";
 var REM = parseFloat(getComputedStyle(document.documentElement).fontSize);
-var MIN_SIZE = 20;
+var MIN_WIDTH = 20;
+var MIN_HEIGHT = 3;
 var measureStackItem = (element) => {
   const stackItemElement = element.closest("[data-dx-stack-item]");
   return stackItemElement?.getBoundingClientRect() ?? {
@@ -191,7 +205,7 @@ var measureStackItem = (element) => {
   };
 };
 var getNextSize = (startSize, location, client) => {
-  return Math.max(MIN_SIZE, startSize + (location.current.input[client] - location.initial.input[client]) / REM);
+  return Math.max(client === "clientX" ? MIN_WIDTH : MIN_HEIGHT, startSize + (location.current.input[client] - location.initial.input[client]) / REM);
 };
 var StackItemResizeHandle = () => {
   const { orientation } = useStack();
@@ -232,18 +246,20 @@ var StackItemResizeHandle = () => {
   }, []);
   return /* @__PURE__ */ React5.createElement("button", {
     ref: buttonRef,
-    className: mx4(orientation === "horizontal" ? "cursor-col-resize" : "cursor-row-resize", "group absolute is-3 bs-full inline-end-[-1px] !border-lb-0", "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:inset-block-0 before:inline-end-0 before:is-1 before:bg-accentFocusIndicator")
+    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: "absolute block-start-0 inline-end-[1px] bs-[--rail-size] flex items-center group-hover:opacity-0 group-focus-visible:opacity-0 group-active:opacity-0"
-  }, /* @__PURE__ */ React5.createElement(DragHandleSignifier, null)));
+    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 = () => {
+var DragHandleSignifier = ({ orientation }) => {
   return /* @__PURE__ */ React5.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 256 256",
     fill: "currentColor",
-    className: "shrink-0 bs-[1em] is-[1em] text-unAccent"
+    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", {
@@ -258,7 +274,7 @@ var DragHandleSignifier = () => {
 // packages/ui/react-ui-stack/src/components/StackItemSigil.tsx
 import React7, { Fragment, forwardRef as forwardRef4, useRef as useRef2, useState as useState2 } from "react";
 import { keySymbols } from "@dxos/keyboard";
-import { Button, DropdownMenu, Icon, toLocalizedString, Tooltip, useTranslation } from "@dxos/react-ui";
+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 { getHostPlatform } from "@dxos/util";
@@ -309,7 +325,7 @@ var StackItemSigilButton = /* @__PURE__ */ forwardRef4(({ attendableId, classNam
     ...props,
     variant,
     classNames: [
-      "shrink-0 pli-0 min-bs-0 is-[--rail-action] bs-[--rail-action] relative",
+      "shrink-0 pli-0 min-bs-0 is-[--rail-action] bs-[--rail-action] relative app-no-drag",
       classNames
     ],
     ref: forwardedRef
@@ -319,18 +335,23 @@ var StackItemSigil = /* @__PURE__ */ forwardRef4(({ actions: actionGroups, onAct
   const { t } = useTranslation(translationKey);
   const suppressNextTooltip = useRef2(false);
   const [optionsMenuOpen, setOptionsMenuOpen] = useState2(false);
-  const [triggerTooltipOpen, setTriggerTooltipOpen] = useState2(false);
-  return /* @__PURE__ */ React7.createElement(Tooltip.Root, {
-    open: triggerTooltipOpen,
-    onOpenChange: (nextOpen) => {
-      if (suppressNextTooltip.current) {
-        setTriggerTooltipOpen(false);
-        suppressNextTooltip.current = false;
-      } else {
-        setTriggerTooltipOpen(nextOpen);
-      }
-    }
-  }, /* @__PURE__ */ React7.createElement(DropdownMenu.Root, {
+  const hasActions = actionGroups && actionGroups.length > 0;
+  const button = /* @__PURE__ */ React7.createElement(StackItemSigilButton, {
+    attendableId,
+    related,
+    // TODO(wittjosiah): Better disabling of interactive styles when no action are available.
+    //   Remove underscore icon when no actions are available?
+    classNames: !hasActions && "cursor-default"
+  }, /* @__PURE__ */ React7.createElement("span", {
+    className: "sr-only"
+  }, triggerLabel), /* @__PURE__ */ React7.createElement(Icon, {
+    icon,
+    size: 5
+  }));
+  if (!hasActions) {
+    return button;
+  }
+  return /* @__PURE__ */ React7.createElement(DropdownMenu.Root, {
     open: optionsMenuOpen,
     onOpenChange: (nextOpen) => {
       if (!nextOpen) {
@@ -338,20 +359,10 @@ var StackItemSigil = /* @__PURE__ */ forwardRef4(({ actions: actionGroups, onAct
       }
       return setOptionsMenuOpen(nextOpen);
     }
-  }, /* @__PURE__ */ React7.createElement(Tooltip.Trigger, {
-    asChild: true
   }, /* @__PURE__ */ React7.createElement(DropdownMenu.Trigger, {
     asChild: true,
     ref: forwardedRef
-  }, /* @__PURE__ */ React7.createElement(StackItemSigilButton, {
-    attendableId,
-    related
-  }, /* @__PURE__ */ React7.createElement("span", {
-    className: "sr-only"
-  }, triggerLabel), /* @__PURE__ */ React7.createElement(Icon, {
-    icon,
-    size: 5
-  })))), /* @__PURE__ */ React7.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React7.createElement(DropdownMenu.Content, {
+  }, button), /* @__PURE__ */ React7.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React7.createElement(DropdownMenu.Content, {
     classNames: "z-[31]"
   }, /* @__PURE__ */ React7.createElement(DropdownMenu.Viewport, null, actionGroups?.map((actions, index) => {
     const separator = index > 0 ? /* @__PURE__ */ React7.createElement(DropdownMenu.Separator, null) : null;
@@ -392,16 +403,14 @@ var StackItemSigil = /* @__PURE__ */ forwardRef4(({ actions: actionGroups, onAct
         className: mx5("shrink-0", descriptionText)
       }, keySymbols(shortcut).join("")));
     }));
-  }), children), /* @__PURE__ */ React7.createElement(DropdownMenu.Arrow, null)))), /* @__PURE__ */ React7.createElement(Tooltip.Portal, null, /* @__PURE__ */ React7.createElement(Tooltip.Content, {
-    side: "bottom"
-  }, triggerLabel, /* @__PURE__ */ React7.createElement(Tooltip.Arrow, null))));
+  }), children), /* @__PURE__ */ React7.createElement(DropdownMenu.Arrow, null))));
 });
 
 // packages/ui/react-ui-stack/src/components/StackItem.tsx
 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, ...props }, forwardedRef) => {
+var StackItemRoot = /* @__PURE__ */ forwardRef5(({ item, children, classNames, size: propsSize, onSizeChange, role, order, style, disableRearrange, focusIndicatorVariant = "over-all", ...props }, forwardedRef) => {
   const [itemElement, itemRef] = useState3(null);
   const [selfDragHandleElement, selfDragHandleRef] = useState3(null);
   const [closestEdge, setEdge] = useState3(null);
@@ -419,10 +428,10 @@ var StackItemRoot = /* @__PURE__ */ forwardRef5(({ item, children, classNames, s
   ]);
   const type = orientation === "horizontal" ? "column" : "card";
   useLayoutEffect3(() => {
-    if (!itemElement || !onRearrange) {
+    if (!itemElement || !onRearrange || disableRearrange) {
       return;
     }
-    return combine(draggable2({
+    return combine2(draggable2({
       element: itemElement,
       ...selfDragHandleElement && {
         dragHandle: selfDragHandleElement
@@ -431,12 +440,25 @@ var StackItemRoot = /* @__PURE__ */ forwardRef5(({ item, children, classNames, s
         id: item.id,
         type
       }),
-      // TODO(thure): tabster focus honeypots are causing the preview to render with the wrong dimensions; what do?
-      onGenerateDragPreview: ({ nativeSetDragImage }) => {
-        disableNativeDragPreview2({
-          nativeSetDragImage
+      onGenerateDragPreview: ({ nativeSetDragImage, source, location }) => {
+        document.body.setAttribute("data-drag-preview", "true");
+        scrollJustEnoughIntoView({
+          element: source.element
         });
-        preventUnhandled2.start();
+        const { x, y } = preserveOffsetOnSource({
+          element: source.element,
+          input: location.current.input
+        })({
+          container: source.element.offsetParent ?? document.body
+        });
+        nativeSetDragImage?.(source.element, x, y);
+      },
+      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,
@@ -494,7 +516,7 @@ var StackItemRoot = /* @__PURE__ */ forwardRef5(({ item, children, classNames, s
     ...props,
     tabIndex: 0,
     ...focusGroupAttrs,
-    className: mx6("group/stack-item grid relative ch-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: mx6("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"), classNames),
     "data-dx-stack-item": true,
     style: {
       ...size !== "min-content" && {
@@ -507,6 +529,8 @@ var StackItemRoot = /* @__PURE__ */ forwardRef5(({ item, children, classNames, s
     },
     ref: composedItemRef
   }, children, closestEdge && /* @__PURE__ */ React8.createElement(ListItem2.DropIndicator, {
+    lineInset: 8,
+    terminalInset: -8,
     edge: closestEdge
   })));
 });
@@ -523,9 +547,9 @@ var StackItem = {
 
 // packages/ui/react-ui-stack/src/components/LayoutControls.tsx
 import React9, { forwardRef as forwardRef6 } from "react";
-import { Button as Button2, ButtonGroup, Icon as Icon2, Tooltip as Tooltip2, useTranslation as useTranslation2 } from "@dxos/react-ui";
+import { Button as Button2, ButtonGroup, Icon as Icon2, Tooltip, useTranslation as useTranslation2 } from "@dxos/react-ui";
 var LayoutControl = ({ icon, label, ...props }) => {
-  return /* @__PURE__ */ React9.createElement(Tooltip2.Root, null, /* @__PURE__ */ React9.createElement(Tooltip2.Trigger, {
+  return /* @__PURE__ */ React9.createElement(Tooltip.Root, null, /* @__PURE__ */ React9.createElement(Tooltip.Trigger, {
     asChild: true
   }, /* @__PURE__ */ React9.createElement(Button2, {
     variant: "ghost",
@@ -534,7 +558,7 @@ var LayoutControl = ({ icon, label, ...props }) => {
     className: "sr-only"
   }, label), /* @__PURE__ */ React9.createElement(Icon2, {
     icon
-  }))), /* @__PURE__ */ React9.createElement(Tooltip2.Portal, null, /* @__PURE__ */ React9.createElement(Tooltip2.Content, {
+  }))), /* @__PURE__ */ React9.createElement(Tooltip.Portal, null, /* @__PURE__ */ React9.createElement(Tooltip.Content, {
     side: "bottom"
   }, label)));
 };
@@ -595,6 +619,7 @@ export {
   StackContext,
   StackItem,
   StackItemContext,
+  autoScrollRootAttributes,
   railGridHorizontal,
   railGridVertical,
   translations_default as translations,