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

package/dist/lib/node/index.cjs

@@ -28,6 +28,10 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var node_exports = {};
 __export(node_exports, {
+  Card: () => Card,
+  CardDragPreview: () => CardDragPreview2,
+  CardStack: () => CardStack,
+  CardStackDragPreview: () => CardStackDragPreview,
   DEFAULT_EXTRINSIC_SIZE: () => DEFAULT_EXTRINSIC_SIZE,
   DEFAULT_HORIZONTAL_SIZE: () => DEFAULT_HORIZONTAL_SIZE,
   DEFAULT_VERTICAL_SIZE: () => DEFAULT_VERTICAL_SIZE,
@@ -36,6 +40,15 @@ __export(node_exports, {
   StackItem: () => StackItem,
   StackItemDragPreview: () => StackItemDragPreview,
   autoScrollRootAttributes: () => autoScrollRootAttributes,
+  cardChrome: () => cardChrome,
+  cardContent: () => cardContent,
+  cardHeading: () => cardHeading,
+  cardRoot: () => cardRoot,
+  cardStackContent: () => cardStackContent,
+  cardStackFooter: () => cardStackFooter,
+  cardStackHeading: () => cardStackHeading,
+  cardStackRoot: () => cardStackRoot,
+  cardText: () => cardText,
   railGridHorizontal: () => railGridHorizontal,
   railGridHorizontalContainFitContent: () => railGridHorizontalContainFitContent,
   railGridVertical: () => railGridVertical,
@@ -76,6 +89,7 @@ var import_react_slot = require("@radix-ui/react-slot");
 var import_react6 = __toESM(require("react"));
 var import_tracking5 = require("@preact-signals/safe-react/tracking");
 var import_react_tabster3 = require("@fluentui/react-tabster");
+var import_react_slot2 = require("@radix-ui/react-slot");
 var import_react7 = __toESM(require("react"));
 var import_react_ui_attention = require("@dxos/react-ui-attention");
 var import_react_ui_theme4 = require("@dxos/react-ui-theme");
@@ -91,7 +105,24 @@ var import_react_ui_theme5 = require("@dxos/react-ui-theme");
 var import_util = require("@dxos/util");
 var import_tracking8 = require("@preact-signals/safe-react/tracking");
 var import_react10 = __toESM(require("react"));
-var useStackDropForElements = ({ id, element, selfDroppable, orientation, onRearrange }) => {
+var import_tracking9 = require("@preact-signals/safe-react/tracking");
+var import_react_primitive = require("@radix-ui/react-primitive");
+var import_react_slot3 = require("@radix-ui/react-slot");
+var import_react11 = __toESM(require("react"));
+var import_react_ui4 = require("@dxos/react-ui");
+var import_react_ui_theme6 = require("@dxos/react-ui-theme");
+var import_tracking10 = require("@preact-signals/safe-react/tracking");
+var import_react12 = __toESM(require("react"));
+var import_react_ui_theme7 = require("@dxos/react-ui-theme");
+var import_tracking11 = require("@preact-signals/safe-react/tracking");
+var import_react_slot4 = require("@radix-ui/react-slot");
+var import_react13 = __toESM(require("react"));
+var import_react_ui_theme8 = require("@dxos/react-ui-theme");
+var import_tracking12 = require("@preact-signals/safe-react/tracking");
+var import_react14 = __toESM(require("react"));
+var import_react_ui5 = require("@dxos/react-ui");
+var import_react_ui_theme9 = require("@dxos/react-ui-theme");
+var useStackDropForElements = ({ id, element, scrollElement = element, selfDroppable, orientation, onRearrange }) => {
   const [dropping, setDropping] = (0, import_react2.useState)(false);
   (0, import_react2.useLayoutEffect)(() => {
     if (!element || !selfDroppable) {
@@ -132,11 +163,12 @@ var useStackDropForElements = ({ id, element, selfDroppable, orientation, onRear
         }
       }
     }), (0, import_element.autoScrollForElements)({
-      element,
+      element: scrollElement,
       getAllowedAxis: () => orientation
     }));
   }, [
     element,
+    scrollElement,
     selfDroppable,
     orientation,
     id,
@@ -189,6 +221,7 @@ var Stack = /* @__PURE__ */ (0, import_react.forwardRef)(({ children, classNames
     const { dropping } = useStackDropForElements({
       id: props.id,
       element: getDropElement && stackElement ? getDropElement(stackElement) : stackElement,
+      scrollElement: stackElement,
       selfDroppable,
       orientation,
       onRearrange
@@ -223,6 +256,24 @@ var Stack = /* @__PURE__ */ (0, import_react.forwardRef)(({ children, classNames
       orientation,
       size
     ]);
+    (0, import_react.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__ */ import_react.default.createElement(StackContext.Provider, {
       value: {
         orientation,
@@ -290,14 +341,15 @@ var StackItemDragHandle = ({ asChild, children }) => {
     _effect.f();
   }
 };
-var StackItemHeading = ({ children, classNames, ...props }) => {
+var StackItemHeading = ({ children, classNames, asChild, ...props }) => {
   var _effect = (0, import_tracking5.useSignals)();
   try {
     const { orientation } = useStack();
     const focusableGroupAttrs = (0, import_react_tabster3.useFocusableGroup)({
       tabBehavior: "limited"
     });
-    return /* @__PURE__ */ import_react7.default.createElement("div", {
+    const Root = asChild ? import_react_slot2.Slot : "div";
+    return /* @__PURE__ */ import_react7.default.createElement(Root, {
       role: "heading",
       ...props,
       tabIndex: 0,
@@ -370,6 +422,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",
@@ -664,8 +717,425 @@ var StackItem = {
   SigilButton: StackItemSigilButton,
   DragPreview: StackItemDragPreview
 };
+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 cardText = "pli-3 mlb-3";
+var cardHeading = "text-lg font-medium line-clamp-2";
+var cardChrome = "pli-1.5 mlb-1.5 [&_.dx-button]:pli-1.5 [&_.dx-button]:text-start [&_.dx-button]:is-full";
+var CardRoot = /* @__PURE__ */ (0, import_react11.forwardRef)(({ children, classNames, asChild, role = "none", ...props }, forwardedRef) => {
+  var _effect = (0, import_tracking9.useSignals)();
+  try {
+    const Root = asChild ? import_react_slot3.Slot : "div";
+    const rootProps = asChild ? {
+      classNames: [
+        cardRoot,
+        classNames
+      ]
+    } : {
+      className: (0, import_react_ui_theme6.mx)(cardRoot, classNames),
+      role
+    };
+    return /* @__PURE__ */ import_react11.default.createElement(Root, {
+      ...props,
+      ...rootProps,
+      ref: forwardedRef
+    }, children);
+  } finally {
+    _effect.f();
+  }
+});
+var CardContent = /* @__PURE__ */ (0, import_react11.forwardRef)(({ children, classNames, asChild, role = "group", ...props }, forwardedRef) => {
+  var _effect = (0, import_tracking9.useSignals)();
+  try {
+    const Root = asChild ? import_react_slot3.Slot : "div";
+    const rootProps = asChild ? {
+      classNames: [
+        cardContent,
+        classNames
+      ]
+    } : {
+      className: (0, import_react_ui_theme6.mx)(cardContent, classNames),
+      role
+    };
+    return /* @__PURE__ */ import_react11.default.createElement(Root, {
+      ...props,
+      ...rootProps,
+      ref: forwardedRef
+    }, children);
+  } finally {
+    _effect.f();
+  }
+});
+var CardConditionalContent = ({ role, children }) => {
+  var _effect = (0, import_tracking9.useSignals)();
+  try {
+    if ([
+      "popover",
+      "card--kanban"
+    ].includes(role ?? "never")) {
+      return /* @__PURE__ */ import_react11.default.createElement("div", {
+        className: role === "popover" ? "popover-card-width" : role === "card--kanban" ? "contents" : ""
+      }, children);
+    } else {
+      return /* @__PURE__ */ import_react11.default.createElement(CardContent, null, children);
+    }
+  } finally {
+    _effect.f();
+  }
+};
+var CardHeading = /* @__PURE__ */ (0, import_react11.forwardRef)(({ children, classNames, asChild, role = "heading", ...props }, forwardedRef) => {
+  var _effect = (0, import_tracking9.useSignals)();
+  try {
+    const Root = asChild ? import_react_slot3.Slot : "div";
+    const rootProps = asChild ? {
+      classNames: [
+        cardHeading,
+        cardText,
+        classNames
+      ]
+    } : {
+      className: (0, import_react_ui_theme6.mx)(cardHeading, cardText, classNames),
+      role
+    };
+    return /* @__PURE__ */ import_react11.default.createElement(Root, {
+      ...props,
+      ...rootProps,
+      ref: forwardedRef
+    }, children);
+  } finally {
+    _effect.f();
+  }
+});
+var CardToolbar = /* @__PURE__ */ (0, import_react11.forwardRef)(({ children, ...props }, forwardedRef) => {
+  var _effect = (0, import_tracking9.useSignals)();
+  try {
+    return /* @__PURE__ */ import_react11.default.createElement(import_react_ui4.Toolbar.Root, {
+      ...props,
+      ref: forwardedRef
+    }, children);
+  } finally {
+    _effect.f();
+  }
+});
+var CardToolbarIconButton = import_react_ui4.Toolbar.IconButton;
+var CardToolbarSeparator = import_react_ui4.Toolbar.Separator;
+var CardDragHandle = /* @__PURE__ */ (0, import_react11.forwardRef)(({ toolbarItem }, forwardedRef) => {
+  var _effect = (0, import_tracking9.useSignals)();
+  try {
+    const { t } = (0, import_react_ui4.useTranslation)(translationKey);
+    const Root = toolbarItem ? import_react_ui4.Toolbar.IconButton : import_react_ui4.IconButton;
+    return /* @__PURE__ */ import_react11.default.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 = import_react_primitive.Primitive.div;
+var CardPoster = (props) => {
+  var _effect = (0, import_tracking9.useSignals)();
+  try {
+    const aspect = props.aspect === "auto" ? "aspect-auto" : "aspect-video";
+    if (props.image) {
+      return /* @__PURE__ */ import_react11.default.createElement("img", {
+        className: `dx-card__poster ${aspect} object-cover is-full bs-auto`,
+        src: props.image,
+        alt: props.alt
+      });
+    }
+    if (props.icon) {
+      return /* @__PURE__ */ import_react11.default.createElement("div", {
+        role: "image",
+        className: `dx-card__poster grid ${aspect} place-items-center bg-inputSurface text-subdued`,
+        "aria-label": props.alt
+      }, /* @__PURE__ */ import_react11.default.createElement(import_react_ui4.Icon, {
+        icon: props.icon,
+        size: 10
+      }));
+    }
+  } finally {
+    _effect.f();
+  }
+};
+var CardChrome = /* @__PURE__ */ (0, import_react11.forwardRef)(({ children, classNames, asChild, role = "none", ...props }, forwardedRef) => {
+  var _effect = (0, import_tracking9.useSignals)();
+  try {
+    const Root = asChild ? import_react_slot3.Slot : "div";
+    const rootProps = asChild ? {
+      classNames: [
+        cardChrome,
+        classNames
+      ]
+    } : {
+      className: (0, import_react_ui_theme6.mx)(cardChrome, classNames),
+      role
+    };
+    return /* @__PURE__ */ import_react11.default.createElement(Root, {
+      ...props,
+      ...rootProps,
+      ref: forwardedRef
+    }, children);
+  } finally {
+    _effect.f();
+  }
+});
+var CardText = /* @__PURE__ */ (0, import_react11.forwardRef)(({ children, classNames, asChild, role = "none", ...props }, forwardedRef) => {
+  var _effect = (0, import_tracking9.useSignals)();
+  try {
+    const Root = asChild ? import_react_slot3.Slot : "p";
+    const rootProps = asChild ? {
+      classNames: [
+        cardText,
+        classNames
+      ]
+    } : {
+      className: (0, import_react_ui_theme6.mx)(cardText, classNames),
+      role
+    };
+    return /* @__PURE__ */ import_react11.default.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
+};
+var CardDragPreviewRoot = ({ children }) => {
+  var _effect = (0, import_tracking10.useSignals)();
+  try {
+    return /* @__PURE__ */ import_react12.default.createElement("div", {
+      className: "p-2"
+    }, children);
+  } finally {
+    _effect.f();
+  }
+};
+var CardDragPreviewContent = ({ children }) => {
+  var _effect = (0, import_tracking10.useSignals)();
+  try {
+    return /* @__PURE__ */ import_react12.default.createElement("div", {
+      className: (0, import_react_ui_theme7.mx)(cardContent, "ring-focusLine ring-neutralFocusIndicator")
+    }, children);
+  } finally {
+    _effect.f();
+  }
+};
+var CardDragPreview2 = {
+  Root: CardDragPreviewRoot,
+  Content: CardDragPreviewContent
+};
+var CardStackStack = /* @__PURE__ */ (0, import_react13.forwardRef)(({ children, classNames, itemsCount = 0, ...props }, forwardedRef) => {
+  var _effect = (0, import_tracking11.useSignals)();
+  try {
+    return /* @__PURE__ */ import_react13.default.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__ */ (0, import_react13.forwardRef)(({ children, classNames, asChild, role = "heading", ...props }, forwardedRef) => {
+  var _effect = (0, import_tracking11.useSignals)();
+  try {
+    const Root = asChild ? import_react_slot4.Slot : "div";
+    const rootProps = asChild ? {
+      classNames: [
+        cardStackHeading,
+        classNames
+      ]
+    } : {
+      className: (0, import_react_ui_theme8.mx)(cardStackHeading, classNames),
+      role
+    };
+    return /* @__PURE__ */ import_react13.default.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__ */ (0, import_react13.forwardRef)(({ children, classNames, asChild, role = "none", ...props }, forwardedRef) => {
+  var _effect = (0, import_tracking11.useSignals)();
+  try {
+    const Root = asChild ? import_react_slot4.Slot : "div";
+    const rootProps = asChild ? {
+      classNames: [
+        cardStackFooter,
+        classNames
+      ]
+    } : {
+      className: (0, import_react_ui_theme8.mx)(cardStackFooter, classNames),
+      role
+    };
+    return /* @__PURE__ */ import_react13.default.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__ */ (0, import_react13.forwardRef)(({ children, classNames, asChild, role = "none", ...props }, forwardedRef) => {
+  var _effect = (0, import_tracking11.useSignals)();
+  try {
+    const Root = asChild ? import_react_slot4.Slot : "div";
+    const rootProps = asChild ? {
+      classNames: [
+        ...cardStackContent,
+        classNames
+      ]
+    } : {
+      className: (0, import_react_ui_theme8.mx)(...cardStackContent, classNames),
+      role
+    };
+    return /* @__PURE__ */ import_react13.default.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__ */ (0, import_react13.forwardRef)(({ children, classNames, asChild, role = "none", ...props }, forwardedRef) => {
+  var _effect = (0, import_tracking11.useSignals)();
+  try {
+    const Root = asChild ? import_react_slot4.Slot : "div";
+    const rootProps = asChild ? {
+      classNames: [
+        cardStackRoot,
+        classNames
+      ]
+    } : {
+      className: (0, import_react_ui_theme8.mx)(cardStackRoot, classNames),
+      role
+    };
+    return /* @__PURE__ */ import_react13.default.createElement(Root, {
+      ...props,
+      ...rootProps,
+      ref: forwardedRef
+    }, children);
+  } finally {
+    _effect.f();
+  }
+});
+var CardStack = {
+  Root: CardStackRoot,
+  Content: CardStackContent,
+  Stack: CardStackStack,
+  Heading: CardStackHeading,
+  Footer: CardStackFooter,
+  DragHandle: CardStackDragHandle
+};
+var CardStackDragPreviewRoot = ({ children }) => {
+  var _effect = (0, import_tracking12.useSignals)();
+  try {
+    return /* @__PURE__ */ import_react14.default.createElement("div", {
+      className: "p-2"
+    }, /* @__PURE__ */ import_react14.default.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 = (0, import_tracking12.useSignals)();
+  try {
+    const { t } = (0, import_react_ui5.useTranslation)(translationKey);
+    return /* @__PURE__ */ import_react14.default.createElement("div", {
+      className: "flex items-center p-2"
+    }, /* @__PURE__ */ import_react14.default.createElement(import_react_ui5.IconButton, {
+      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 = (0, import_tracking12.useSignals)();
+  try {
+    return /* @__PURE__ */ import_react14.default.createElement("div", {
+      className: (0, import_react_ui_theme9.mx)("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 = (0, import_tracking12.useSignals)();
+  try {
+    return /* @__PURE__ */ import_react14.default.createElement("div", {
+      className: "p-2 border-t border-separator"
+    }, children);
+  } finally {
+    _effect.f();
+  }
+};
+var CardStackDragPreview = {
+  Root: CardStackDragPreviewRoot,
+  Heading: CardStackDragPreviewHeading,
+  Content: CardStackDragPreviewContent,
+  Footer: CardStackDragPreviewFooter
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Card,
+  CardDragPreview,
+  CardStack,
+  CardStackDragPreview,
   DEFAULT_EXTRINSIC_SIZE,
   DEFAULT_HORIZONTAL_SIZE,
   DEFAULT_VERTICAL_SIZE,
@@ -674,6 +1144,15 @@ var StackItem = {
   StackItem,
   StackItemDragPreview,
   autoScrollRootAttributes,
+  cardChrome,
+  cardContent,
+  cardHeading,
+  cardRoot,
+  cardStackContent,
+  cardStackFooter,
+  cardStackHeading,
+  cardStackRoot,
+  cardText,
   railGridHorizontal,
   railGridHorizontalContainFitContent,
   railGridVertical,