@dxos/react-ui-stack 0.8.3-main.672df60 → 0.8.3-staging.0fa589b

package/dist/lib/browser/index.mjs

@@ -207,7 +207,7 @@ import { setCustomNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/el
 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 useLayoutEffect2, useState as useState4, useCallback as useCallback2 } from "react";
+import React8, { forwardRef as forwardRef5, useLayoutEffect as useLayoutEffect2, useState as useState4, useCallback as useCallback2, useMemo as useMemo3 } from "react";
 import { createPortal } from "react-dom";
 import { ListItem as ListItem2 } from "@dxos/react-ui";
 import { resizeAttributes, sizeStyle } from "@dxos/react-ui-dnd";
@@ -215,27 +215,33 @@ import { mx as mx5 } from "@dxos/react-ui-theme";
 
 // packages/ui/react-ui-stack/src/components/StackItem/StackItemContent.tsx
 import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
-import React2, { forwardRef as forwardRef2 } from "react";
+import React2, { forwardRef as forwardRef2, useMemo as useMemo2 } from "react";
 import { mx as mx2 } from "@dxos/react-ui-theme";
-var StackItemContent = /* @__PURE__ */ forwardRef2(({ children, toolbar, statusbar, classNames, size = "intrinsic", ...props }, forwardedRef) => {
+var StackItemContent = /* @__PURE__ */ forwardRef2(({ children, toolbar, statusbar, layoutManaged, classNames, size = "intrinsic", ...props }, forwardedRef) => {
   var _effect = _useSignals2();
   try {
     const { size: stackItemSize } = useStack();
+    const { role } = useStackItem();
+    const style = useMemo2(() => layoutManaged ? {} : {
+      gridTemplateRows: [
+        ...toolbar ? [
+          role === "section" ? "calc(var(--toolbar-size) - 1px)" : "var(--toolbar-size)"
+        ] : [],
+        "1fr",
+        ...statusbar ? [
+          "var(--statusbar-size)"
+        ] : []
+      ].join(" ")
+    }, [
+      toolbar,
+      statusbar,
+      layoutManaged
+    ]);
     return /* @__PURE__ */ React2.createElement("div", {
       role: "none",
       ...props,
-      className: mx2("group grid grid-cols-[100%]", stackItemSize === "contain" && "min-bs-0 overflow-hidden", size === "video" ? "aspect-video" : size === "square" && "aspect-square", classNames),
-      style: {
-        gridTemplateRows: [
-          ...toolbar ? [
-            "var(--rail-action)"
-          ] : [],
-          "1fr",
-          ...statusbar ? [
-            "var(--statusbar-size)"
-          ] : []
-        ].join(" ")
-      },
+      className: mx2("group grid grid-cols-[100%]", stackItemSize === "contain" && "min-bs-0 overflow-hidden", size === "video" ? "aspect-video" : size === "square" && "aspect-square", toolbar && "[&_.dx-toolbar]:relative [&_.dx-toolbar]:border-be [&_.dx-toolbar]:border-subduedSeparator", role === "section" && toolbar && "[&_.dx-toolbar]:sticky [&_.dx-toolbar]:z-[1] [&_.dx-toolbar]:block-start-0 [&_.dx-toolbar]:-mbe-px [&_.dx-toolbar]:min-is-0", classNames),
+      style,
       "data-popover-collision-boundary": true,
       ref: forwardedRef
     }, children);
@@ -269,7 +275,7 @@ 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, asChild, ...props }) => {
+var StackItemHeading = ({ children, classNames, asChild, separateOnScroll, ...props }) => {
   var _effect = _useSignals4();
   try {
     const { orientation } = useStack();
@@ -282,7 +288,18 @@ var StackItemHeading = ({ children, classNames, asChild, ...props }) => {
       ...props,
       tabIndex: 0,
       ...focusableGroupAttrs,
-      className: mx3('flex items-center dx-focus-ring-inset-over-all relative !border-is-0 bg-headerSurface border-transparent [[data-scroll-separator="true"]_&]:border-subduedSeparator', orientation === "horizontal" ? "bs-[--rail-size]" : "is-[--rail-size] flex-col", orientation === "horizontal" ? "border-be" : "border-ie", classNames)
+      className: mx3("flex items-center dx-focus-ring-inset-over-all relative !border-is-0 bg-headerSurface", separateOnScroll ? 'border-transparent [[data-scroll-separator="true"]_&]:border-subduedSeparator' : "border-subduedSeparator", orientation === "horizontal" ? "bs-[--rail-size]" : "is-[--rail-size] flex-col", orientation === "horizontal" ? "border-be" : "border-ie", classNames)
+    }, children);
+  } finally {
+    _effect.f();
+  }
+};
+var StackItemHeadingStickyContent = ({ children }) => {
+  var _effect = _useSignals4();
+  try {
+    return /* @__PURE__ */ React4.createElement("div", {
+      role: "none",
+      className: "sticky block-start-0 bg-[--sticky-bg] p-1 is-full"
     }, children);
   } finally {
     _effect.f();
@@ -620,19 +637,28 @@ var StackItemRoot = /* @__PURE__ */ forwardRef5(({ item, children, classNames, s
       }
       return true;
     };
+    const stackItemContextValue = useMemo3(() => ({
+      selfDragHandleRef,
+      size,
+      setSize,
+      state: dragState,
+      setState: setDragState,
+      role
+    }), [
+      selfDragHandleRef,
+      size,
+      setSize,
+      dragState,
+      setDragState,
+      role
+    ]);
     return /* @__PURE__ */ React8.createElement(StackItemContext.Provider, {
-      value: {
-        selfDragHandleRef,
-        size,
-        setSize,
-        state: dragState,
-        setState: setDragState
-      }
+      value: stackItemContextValue
     }, /* @__PURE__ */ React8.createElement(Root, {
       ...props,
       tabIndex: 0,
       ...focusableGroupAttrs,
-      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),
+      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"), role === "section" && orientation !== "horizontal" && "border-be border-subduedSeparator", classNames),
       "data-dx-stack-item": true,
       ...resizeAttributes,
       style: {
@@ -663,6 +689,7 @@ var StackItem = {
   Content: StackItemContent,
   Heading: StackItemHeading,
   HeadingLabel: StackItemHeadingLabel,
+  HeadingStickyContent: StackItemHeadingStickyContent,
   ResizeHandle: StackItemResizeHandle,
   DragHandle: StackItemDragHandle,
   Sigil: StackItemSigil,
@@ -676,14 +703,21 @@ 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";
+import { hoverableControls, 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 cardText = "pli-3 mlb-3";
+var cardSpacing = "pli-cardSpacingInline mlb-cardSpacingBlock";
+var labelSpacing = "mbs-inputSpacingBlock mbe-labelSpacingBlock";
+var cardDialogContent = "p-0 bs-content min-bs-[8rem] max-bs-full md:max-is-[32rem] overflow-hidden";
+var cardDialogHeader = "pli-cardSpacingInline mbs-cardSpacingBlock flex justify-between";
+var cardDialogOverflow = "overflow-y-auto min-bs-0 flex-1";
+var cardDialogPaddedOverflow = `${cardDialogOverflow} plb-cardSpacingBlock`;
+var cardDialogSearchListRoot = "pli-cardSpacingInline pbs-cardSpacingBlock [&>input]:mbe-0 min-bs-0 flex-1 flex flex-col";
+var cardText = cardSpacing;
 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 cardChrome = "pli-[--dx-cardSpacingChrome] mlb-[--dx-cardSpacingChrome] [&_.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) => {
@@ -741,7 +775,12 @@ var CardConditionalContent = ({ role, children }) => {
         className: role === "popover" ? "popover-card-width" : role === "card--kanban" ? "contents" : ""
       }, children);
     } else {
-      return /* @__PURE__ */ React9.createElement(CardContent, null, children);
+      return /* @__PURE__ */ React9.createElement(CardContent, role === "card--document" && {
+        classNames: [
+          "mlb-[1em]",
+          hoverableControls
+        ]
+      }, children);
     }
   } finally {
     _effect.f();
@@ -770,11 +809,15 @@ var CardHeading = /* @__PURE__ */ forwardRef6(({ children, classNames, asChild,
     _effect.f();
   }
 });
-var CardToolbar = /* @__PURE__ */ forwardRef6(({ children, ...props }, forwardedRef) => {
+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 {
@@ -938,6 +981,7 @@ var CardStackStack = /* @__PURE__ */ forwardRef7(({ children, classNames, itemsC
       ),
       itemsCount,
       separatorOnScroll: 9,
+      "data-density": "fine",
       ...props,
       ref: forwardedRef
     }, children);
@@ -1126,13 +1170,20 @@ export {
   autoScrollRootAttributes,
   cardChrome,
   cardContent,
+  cardDialogContent,
+  cardDialogHeader,
+  cardDialogOverflow,
+  cardDialogPaddedOverflow,
+  cardDialogSearchListRoot,
   cardHeading,
   cardRoot,
+  cardSpacing,
   cardStackContent,
   cardStackFooter,
   cardStackHeading,
   cardStackRoot,
   cardText,
+  labelSpacing,
   railGridHorizontal,
   railGridHorizontalContainFitContent,
   railGridVertical,