@dxos/react-ui-stack 0.8.2 → 0.8.3-main.7f5a14c

package/dist/lib/browser/index.mjs

@@ -2,7 +2,7 @@
 import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
 import { useArrowNavigationGroup } from "@fluentui/react-tabster";
 import { composeRefs } from "@radix-ui/react-compose-refs";
-import React, { Children, forwardRef, useState as useState2, useMemo, useCallback } from "react";
+import React, { Children, forwardRef, useState as useState2, useMemo, useCallback, useEffect } from "react";
 import { ListItem } from "@dxos/react-ui";
 import { mx } from "@dxos/react-ui-theme";
 
@@ -12,7 +12,7 @@ import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element
 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 = ({ id, element, selfDroppable, orientation, onRearrange }) => {
+var useStackDropForElements = ({ id, element, scrollElement = element, selfDroppable, orientation, onRearrange }) => {
   const [dropping, setDropping] = useState(false);
   useLayoutEffect(() => {
     if (!element || !selfDroppable) {
@@ -53,11 +53,12 @@ var useStackDropForElements = ({ id, element, selfDroppable, orientation, onRear
         }
       }
     }), autoScrollForElements({
-      element,
+      element: scrollElement,
       getAllowedAxis: () => orientation
     }));
   }, [
     element,
+    scrollElement,
     selfDroppable,
     orientation,
     id,
@@ -115,6 +116,7 @@ var Stack = /* @__PURE__ */ forwardRef(({ children, classNames, style, orientati
     const { dropping } = useStackDropForElements({
       id: props.id,
       element: getDropElement && stackElement ? getDropElement(stackElement) : stackElement,
+      scrollElement: stackElement,
       selfDroppable,
       orientation,
       onRearrange
@@ -149,6 +151,24 @@ var Stack = /* @__PURE__ */ forwardRef(({ children, classNames, style, orientati
       orientation,
       size
     ]);
+    useEffect(() => {
+      if (!(stackElement && Number.isFinite(separatorOnScroll))) {
+        return;
+      }
+      const observer = new MutationObserver(() => {
+        handleScroll();
+      });
+      observer.observe(stackElement, {
+        childList: true,
+        subtree: true
+      });
+      return () => {
+        observer.disconnect();
+      };
+    }, [
+      stackElement,
+      handleScroll
+    ]);
     return /* @__PURE__ */ React.createElement(StackContext.Provider, {
       value: {
         orientation,
@@ -245,17 +265,19 @@ var StackItemDragHandle = ({ asChild, children }) => {
 // packages/ui/react-ui-stack/src/components/StackItem/StackItemHeading.tsx
 import { useSignals as _useSignals4 } from "@preact-signals/safe-react/tracking";
 import { useFocusableGroup } from "@fluentui/react-tabster";
+import { Slot as Slot2 } from "@radix-ui/react-slot";
 import React4, { forwardRef as forwardRef3 } from "react";
 import { useAttention } from "@dxos/react-ui-attention";
 import { mx as mx3 } from "@dxos/react-ui-theme";
-var StackItemHeading = ({ children, classNames, ...props }) => {
+var StackItemHeading = ({ children, classNames, asChild, ...props }) => {
   var _effect = _useSignals4();
   try {
     const { orientation } = useStack();
     const focusableGroupAttrs = useFocusableGroup({
       tabBehavior: "limited"
     });
-    return /* @__PURE__ */ React4.createElement("div", {
+    const Root = asChild ? Slot2 : "div";
+    return /* @__PURE__ */ React4.createElement(Root, {
       role: "heading",
       ...props,
       tabIndex: 0,
@@ -348,6 +370,7 @@ var translations_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",
@@ -646,7 +669,458 @@ var StackItem = {
   SigilButton: StackItemSigilButton,
   DragPreview: StackItemDragPreview
 };
+
+// packages/ui/react-ui-stack/src/exemplars/Card/Card.tsx
+import { useSignals as _useSignals9 } from "@preact-signals/safe-react/tracking";
+import { Primitive } from "@radix-ui/react-primitive";
+import { Slot as Slot3 } from "@radix-ui/react-slot";
+import React9, { forwardRef as forwardRef6 } from "react";
+import { Icon as Icon2, IconButton, Toolbar, useTranslation as useTranslation2 } from "@dxos/react-ui";
+import { mx as mx6 } from "@dxos/react-ui-theme";
+
+// packages/ui/react-ui-stack/src/exemplars/Card/fragments.ts
+var cardRoot = "contain-layout pli-2 plb-1 first-of-type:pbs-0 last-of-type:pbe-0";
+var cardContent = "rounded overflow-hidden bg-cardSurface border border-separator dark:border-subduedSeparator dx-focus-ring-group-y-indicator relative min-bs-[--rail-item] group/card";
+var cardSpacing = "pli-card-spacing-inline mlb-card-spacing-block";
+var cardText = cardSpacing;
+var cardHeading = "text-lg font-medium line-clamp-2";
+var cardChrome = "pli-[--dx-card-spacing-chrome] mlb-[--dx-card-spacing-chrome] [&_.dx-button]:text-start [&_.dx-button]:is-full";
+
+// packages/ui/react-ui-stack/src/exemplars/Card/Card.tsx
+var CardRoot = /* @__PURE__ */ forwardRef6(({ children, classNames, asChild, role = "none", ...props }, forwardedRef) => {
+  var _effect = _useSignals9();
+  try {
+    const Root = asChild ? Slot3 : "div";
+    const rootProps = asChild ? {
+      classNames: [
+        cardRoot,
+        classNames
+      ]
+    } : {
+      className: mx6(cardRoot, classNames),
+      role
+    };
+    return /* @__PURE__ */ React9.createElement(Root, {
+      ...props,
+      ...rootProps,
+      ref: forwardedRef
+    }, children);
+  } finally {
+    _effect.f();
+  }
+});
+var CardContent = /* @__PURE__ */ forwardRef6(({ children, classNames, asChild, role = "group", ...props }, forwardedRef) => {
+  var _effect = _useSignals9();
+  try {
+    const Root = asChild ? Slot3 : "div";
+    const rootProps = asChild ? {
+      classNames: [
+        cardContent,
+        classNames
+      ]
+    } : {
+      className: mx6(cardContent, classNames),
+      role
+    };
+    return /* @__PURE__ */ React9.createElement(Root, {
+      ...props,
+      ...rootProps,
+      ref: forwardedRef
+    }, children);
+  } finally {
+    _effect.f();
+  }
+});
+var CardConditionalContent = ({ role, children }) => {
+  var _effect = _useSignals9();
+  try {
+    if ([
+      "popover",
+      "card--kanban"
+    ].includes(role ?? "never")) {
+      return /* @__PURE__ */ React9.createElement("div", {
+        className: role === "popover" ? "popover-card-width" : role === "card--kanban" ? "contents" : ""
+      }, children);
+    } else {
+      return /* @__PURE__ */ React9.createElement(CardContent, null, children);
+    }
+  } finally {
+    _effect.f();
+  }
+};
+var CardHeading = /* @__PURE__ */ forwardRef6(({ children, classNames, asChild, role = "heading", ...props }, forwardedRef) => {
+  var _effect = _useSignals9();
+  try {
+    const Root = asChild ? Slot3 : "div";
+    const rootProps = asChild ? {
+      classNames: [
+        cardHeading,
+        cardText,
+        classNames
+      ]
+    } : {
+      className: mx6(cardHeading, cardText, classNames),
+      role
+    };
+    return /* @__PURE__ */ React9.createElement(Root, {
+      ...props,
+      ...rootProps,
+      ref: forwardedRef
+    }, children);
+  } finally {
+    _effect.f();
+  }
+});
+var CardToolbar = /* @__PURE__ */ forwardRef6(({ children, classNames, ...props }, forwardedRef) => {
+  var _effect = _useSignals9();
+  try {
+    return /* @__PURE__ */ React9.createElement(Toolbar.Root, {
+      ...props,
+      classNames: [
+        "bg-transparent",
+        classNames
+      ],
+      ref: forwardedRef
+    }, children);
+  } finally {
+    _effect.f();
+  }
+});
+var CardToolbarIconButton = Toolbar.IconButton;
+var CardToolbarSeparator = Toolbar.Separator;
+var CardDragHandle = /* @__PURE__ */ forwardRef6(({ toolbarItem }, forwardedRef) => {
+  var _effect = _useSignals9();
+  try {
+    const { t } = useTranslation2(translationKey);
+    const Root = toolbarItem ? Toolbar.IconButton : IconButton;
+    return /* @__PURE__ */ React9.createElement(Root, {
+      iconOnly: true,
+      icon: "ph--dots-six-vertical--regular",
+      variant: "ghost",
+      label: t("card drag handle label"),
+      classNames: "pli-2",
+      ref: forwardedRef
+    });
+  } finally {
+    _effect.f();
+  }
+});
+var CardDragPreview = StackItem.DragPreview;
+var CardMenu = Primitive.div;
+var CardPoster = (props) => {
+  var _effect = _useSignals9();
+  try {
+    const aspect = props.aspect === "auto" ? "aspect-auto" : "aspect-video";
+    if (props.image) {
+      return /* @__PURE__ */ React9.createElement("img", {
+        className: `dx-card__poster ${aspect} object-cover is-full bs-auto`,
+        src: props.image,
+        alt: props.alt
+      });
+    }
+    if (props.icon) {
+      return /* @__PURE__ */ React9.createElement("div", {
+        role: "image",
+        className: `dx-card__poster grid ${aspect} place-items-center bg-inputSurface text-subdued`,
+        "aria-label": props.alt
+      }, /* @__PURE__ */ React9.createElement(Icon2, {
+        icon: props.icon,
+        size: 10
+      }));
+    }
+  } finally {
+    _effect.f();
+  }
+};
+var CardChrome = /* @__PURE__ */ forwardRef6(({ children, classNames, asChild, role = "none", ...props }, forwardedRef) => {
+  var _effect = _useSignals9();
+  try {
+    const Root = asChild ? Slot3 : "div";
+    const rootProps = asChild ? {
+      classNames: [
+        cardChrome,
+        classNames
+      ]
+    } : {
+      className: mx6(cardChrome, classNames),
+      role
+    };
+    return /* @__PURE__ */ React9.createElement(Root, {
+      ...props,
+      ...rootProps,
+      ref: forwardedRef
+    }, children);
+  } finally {
+    _effect.f();
+  }
+});
+var CardText = /* @__PURE__ */ forwardRef6(({ children, classNames, asChild, role = "none", ...props }, forwardedRef) => {
+  var _effect = _useSignals9();
+  try {
+    const Root = asChild ? Slot3 : "p";
+    const rootProps = asChild ? {
+      classNames: [
+        cardText,
+        classNames
+      ]
+    } : {
+      className: mx6(cardText, classNames),
+      role
+    };
+    return /* @__PURE__ */ React9.createElement(Root, {
+      ...props,
+      ...rootProps,
+      ref: forwardedRef
+    }, children);
+  } finally {
+    _effect.f();
+  }
+});
+var Card = {
+  Root: CardRoot,
+  Content: CardContent,
+  Container: CardConditionalContent,
+  Heading: CardHeading,
+  Toolbar: CardToolbar,
+  ToolbarIconButton: CardToolbarIconButton,
+  ToolbarSeparator: CardToolbarSeparator,
+  DragHandle: CardDragHandle,
+  DragPreview: CardDragPreview,
+  Menu: CardMenu,
+  Poster: CardPoster,
+  Chrome: CardChrome,
+  Text: CardText
+};
+
+// packages/ui/react-ui-stack/src/exemplars/Card/CardDragPreview.tsx
+import { useSignals as _useSignals10 } from "@preact-signals/safe-react/tracking";
+import React10 from "react";
+import { mx as mx7 } from "@dxos/react-ui-theme";
+var CardDragPreviewRoot = ({ children }) => {
+  var _effect = _useSignals10();
+  try {
+    return /* @__PURE__ */ React10.createElement("div", {
+      className: "p-2"
+    }, children);
+  } finally {
+    _effect.f();
+  }
+};
+var CardDragPreviewContent = ({ children }) => {
+  var _effect = _useSignals10();
+  try {
+    return /* @__PURE__ */ React10.createElement("div", {
+      className: mx7(cardContent, "ring-focusLine ring-neutralFocusIndicator")
+    }, children);
+  } finally {
+    _effect.f();
+  }
+};
+var CardDragPreview2 = {
+  Root: CardDragPreviewRoot,
+  Content: CardDragPreviewContent
+};
+
+// packages/ui/react-ui-stack/src/exemplars/CardStack/CardStack.tsx
+import { useSignals as _useSignals11 } from "@preact-signals/safe-react/tracking";
+import { Slot as Slot4 } from "@radix-ui/react-slot";
+import React11, { forwardRef as forwardRef7 } from "react";
+import { mx as mx8 } from "@dxos/react-ui-theme";
+var CardStackStack = /* @__PURE__ */ forwardRef7(({ children, classNames, itemsCount = 0, ...props }, forwardedRef) => {
+  var _effect = _useSignals11();
+  try {
+    return /* @__PURE__ */ React11.createElement(Stack, {
+      orientation: "vertical",
+      size: "contain",
+      rail: false,
+      classNames: (
+        /* NOTE(thure): Do not let this element have zero intrinsic size, otherwise the drop indicator will not display. See #9035. */
+        [
+          "plb-1",
+          itemsCount > 0 && "plb-2",
+          classNames
+        ]
+      ),
+      itemsCount,
+      separatorOnScroll: 9,
+      ...props,
+      ref: forwardedRef
+    }, children);
+  } finally {
+    _effect.f();
+  }
+});
+var CardStackDragHandle = Card.DragHandle;
+var cardStackHeading = "mli-2 order-first bg-transparent rounded-bs-md flex items-center";
+var CardStackHeading = /* @__PURE__ */ forwardRef7(({ children, classNames, asChild, role = "heading", ...props }, forwardedRef) => {
+  var _effect = _useSignals11();
+  try {
+    const Root = asChild ? Slot4 : "div";
+    const rootProps = asChild ? {
+      classNames: [
+        cardStackHeading,
+        classNames
+      ]
+    } : {
+      className: mx8(cardStackHeading, classNames),
+      role
+    };
+    return /* @__PURE__ */ React11.createElement(Root, {
+      ...props,
+      ...rootProps,
+      ref: forwardedRef
+    }, children);
+  } finally {
+    _effect.f();
+  }
+});
+var cardStackFooter = 'plb-2 mli-2 border-bs border-transparent [[data-scroll-separator-end="true"]_&]:border-subduedSeparator';
+var CardStackFooter = /* @__PURE__ */ forwardRef7(({ children, classNames, asChild, role = "none", ...props }, forwardedRef) => {
+  var _effect = _useSignals11();
+  try {
+    const Root = asChild ? Slot4 : "div";
+    const rootProps = asChild ? {
+      classNames: [
+        cardStackFooter,
+        classNames
+      ]
+    } : {
+      className: mx8(cardStackFooter, classNames),
+      role
+    };
+    return /* @__PURE__ */ React11.createElement(Root, {
+      ...props,
+      ...rootProps,
+      ref: forwardedRef
+    }, children);
+  } finally {
+    _effect.f();
+  }
+});
+var cardStackContent = [
+  "shrink min-bs-0 bg-baseSurface border border-separator rounded-md grid dx-focus-ring-group-x-indicator kanban-drop",
+  railGridHorizontalContainFitContent
+];
+var CardStackContent = /* @__PURE__ */ forwardRef7(({ children, classNames, asChild, role = "none", ...props }, forwardedRef) => {
+  var _effect = _useSignals11();
+  try {
+    const Root = asChild ? Slot4 : "div";
+    const rootProps = asChild ? {
+      classNames: [
+        ...cardStackContent,
+        classNames
+      ]
+    } : {
+      className: mx8(...cardStackContent, classNames),
+      role
+    };
+    return /* @__PURE__ */ React11.createElement(Root, {
+      ...props,
+      ...rootProps,
+      "data-scroll-separator": "false",
+      ref: forwardedRef
+    }, children);
+  } finally {
+    _effect.f();
+  }
+});
+var cardStackRoot = "flex flex-col pli-2 plb-2";
+var CardStackRoot = /* @__PURE__ */ forwardRef7(({ children, classNames, asChild, role = "none", ...props }, forwardedRef) => {
+  var _effect = _useSignals11();
+  try {
+    const Root = asChild ? Slot4 : "div";
+    const rootProps = asChild ? {
+      classNames: [
+        cardStackRoot,
+        classNames
+      ]
+    } : {
+      className: mx8(cardStackRoot, classNames),
+      role
+    };
+    return /* @__PURE__ */ React11.createElement(Root, {
+      ...props,
+      ...rootProps,
+      ref: forwardedRef
+    }, children);
+  } finally {
+    _effect.f();
+  }
+});
+var CardStack = {
+  Root: CardStackRoot,
+  Content: CardStackContent,
+  Stack: CardStackStack,
+  Heading: CardStackHeading,
+  Footer: CardStackFooter,
+  DragHandle: CardStackDragHandle
+};
+
+// packages/ui/react-ui-stack/src/exemplars/CardStack/CardStackDragPreview.tsx
+import { useSignals as _useSignals12 } from "@preact-signals/safe-react/tracking";
+import React12 from "react";
+import { IconButton as IconButton2, useTranslation as useTranslation3 } from "@dxos/react-ui";
+import { mx as mx9 } from "@dxos/react-ui-theme";
+var CardStackDragPreviewRoot = ({ children }) => {
+  var _effect = _useSignals12();
+  try {
+    return /* @__PURE__ */ React12.createElement("div", {
+      className: "p-2"
+    }, /* @__PURE__ */ React12.createElement("div", {
+      className: "rounded-md max-bs-[calc(100dvh-1rem)] overflow-hidden bg-baseSurface border border-separator ring-focusLine ring-neutralFocusIndicator flex flex-col"
+    }, children));
+  } finally {
+    _effect.f();
+  }
+};
+var CardStackDragPreviewHeading = ({ children }) => {
+  var _effect = _useSignals12();
+  try {
+    const { t } = useTranslation3(translationKey);
+    return /* @__PURE__ */ React12.createElement("div", {
+      className: "flex items-center p-2"
+    }, /* @__PURE__ */ React12.createElement(IconButton2, {
+      iconOnly: true,
+      icon: "ph--dots-six-vertical--regular",
+      variant: "ghost",
+      label: t("column drag handle label"),
+      classNames: "pli-2"
+    }), children);
+  } finally {
+    _effect.f();
+  }
+};
+var CardStackDragPreviewContent = ({ children, itemsCount = 0 }) => {
+  var _effect = _useSignals12();
+  try {
+    return /* @__PURE__ */ React12.createElement("div", {
+      className: mx9("overflow-y-auto flex-1 pli-2 flex flex-col gap-2", "plb-1", itemsCount > 0 ? "plb-2" : "plb-1")
+    }, children);
+  } finally {
+    _effect.f();
+  }
+};
+var CardStackDragPreviewFooter = ({ children }) => {
+  var _effect = _useSignals12();
+  try {
+    return /* @__PURE__ */ React12.createElement("div", {
+      className: "p-2 border-t border-separator"
+    }, children);
+  } finally {
+    _effect.f();
+  }
+};
+var CardStackDragPreview = {
+  Root: CardStackDragPreviewRoot,
+  Heading: CardStackDragPreviewHeading,
+  Content: CardStackDragPreviewContent,
+  Footer: CardStackDragPreviewFooter
+};
 export {
+  Card,
+  CardDragPreview2 as CardDragPreview,
+  CardStack,
+  CardStackDragPreview,
   DEFAULT_EXTRINSIC_SIZE,
   DEFAULT_HORIZONTAL_SIZE,
   DEFAULT_VERTICAL_SIZE,
@@ -655,6 +1129,16 @@ export {
   StackItem,
   StackItemDragPreview,
   autoScrollRootAttributes,
+  cardChrome,
+  cardContent,
+  cardHeading,
+  cardRoot,
+  cardSpacing,
+  cardStackContent,
+  cardStackFooter,
+  cardStackHeading,
+  cardStackRoot,
+  cardText,
   railGridHorizontal,
   railGridHorizontalContainFitContent,
   railGridVertical,