@dxos/react-ui-mosaic 0.3.9-main.58adff6 → 0.3.9-main.5d43cb5

package/dist/lib/browser/index.mjs

@@ -5,6 +5,12 @@ import { useContext } from "react";
 import React, { createContext, useEffect } from "react";
 var DEFAULT_TRANSITION = 200;
 var DEFAULT_TYPE = "unknown";
+var MosaicOperations = [
+  "transfer",
+  "copy",
+  "rearrange",
+  "reject"
+];
 var MosaicContainerContext = /* @__PURE__ */ createContext({
   id: "never",
   type: DEFAULT_TYPE
@@ -85,6 +91,10 @@ var Path = {
   onPath: (path, id) => Path.parts(path).includes(id)
 };
 
+// packages/ui/react-ui-mosaic/src/mosaic/util/props.ts
+var isTileProps = (props) => typeof props.path === "string" && typeof props.item === "object" && props.item ? "id" in props.item && typeof props.item.id === "string" : false;
+var isTileComponentProps = (props) => isTileProps(props) && typeof props.operation === "string" && MosaicOperations.includes(props.operation);
+
 // packages/ui/react-ui-mosaic/src/mosaic/util/styles.ts
 import { CSS } from "@dnd-kit/utilities";
 var getTransformCSS = (transform) => transform ? CSS.Transform.toString(Object.assign(transform, {
@@ -370,19 +380,19 @@ var MosaicDragOverlay = ({ delay = 200, debug = false, ...overlayProps }) => {
   useEffect3(() => {
     if (activeItem) {
       let container2;
-      let OverlayComponent3;
+      let OverlayComponent2;
       if (overItem?.path) {
         container2 = containers[Path.first(overItem.path)];
-        OverlayComponent3 = container2?.Component;
+        OverlayComponent2 = container2?.Component;
       }
-      if (!OverlayComponent3) {
+      if (!OverlayComponent2) {
         container2 = containers[Path.first(activeItem.path)];
-        OverlayComponent3 = container2?.Component ?? DefaultComponent;
+        OverlayComponent2 = container2?.Component ?? DefaultComponent;
       }
       clearTimeout(timer.current);
       timer.current = setTimeout(() => setState({
         container: container2,
-        OverlayComponent: OverlayComponent3
+        OverlayComponent: OverlayComponent2
       }), timer.current ? delay : 0);
     } else {
       setState({});
@@ -392,7 +402,7 @@ var MosaicDragOverlay = ({ delay = 200, debug = false, ...overlayProps }) => {
     overItem
   ]);
   const container = state.container ?? (activeItem && containers[Path.first(activeItem.path)]);
-  const OverlayComponent2 = state.OverlayComponent ?? container?.Component;
+  const OverlayComponent = state.OverlayComponent ?? container?.Component;
   const FallbackComponent = (activeItem && containers[Path.first(activeItem.path)])?.Component ?? DefaultComponent;
   return (
     // TODO(burdon): Set custom animations (e.g., in/out/around).
@@ -402,7 +412,7 @@ var MosaicDragOverlay = ({ delay = 200, debug = false, ...overlayProps }) => {
       style: {
         ...container?.getOverlayStyle?.()
       }
-    }, activeItem?.path && container && OverlayComponent2 && /* @__PURE__ */ React5.createElement(OverlayErrorBoundary, {
+    }, activeItem?.path && container && OverlayComponent && /* @__PURE__ */ React5.createElement(OverlayErrorBoundary, {
       fallback: /* @__PURE__ */ React5.createElement(FallbackComponent, {
         ...container.getOverlayProps?.(),
         item: activeItem.item,
@@ -410,10 +420,11 @@ var MosaicDragOverlay = ({ delay = 200, debug = false, ...overlayProps }) => {
         operation,
         active: "overlay"
       })
-    }, /* @__PURE__ */ React5.createElement(OverlayComponent2, {
+    }, /* @__PURE__ */ React5.createElement(OverlayComponent, {
       ...container.getOverlayProps?.(),
       item: activeItem.item,
       path: activeItem.path,
+      type: activeItem.type,
       operation,
       active: "overlay"
     }), debug && /* @__PURE__ */ React5.createElement("div", {
@@ -613,441 +624,12 @@ var Mosaic = {
   // TODO(burdon): Don't export; move to util.
   Debug
 };
-
-// packages/ui/react-ui-mosaic/src/views/Grid/layout.ts
-var createMatrix = (size, value) => {
-  const matrix = [];
-  for (let x = 0; x < size.x; x++) {
-    matrix.push(Array.from({
-      length: size.y
-    }, (_, y) => value({
-      x,
-      y
-    })));
-  }
-  return matrix;
-};
-var getDimension = ({ width, height }, spacing = 0) => ({
-  width: width - spacing * 2,
-  height: height - spacing * 2
-});
-var getBounds = ({ x, y }, { width, height }, spacing = 0) => ({
-  left: x * width + spacing * 2,
-  top: y * height + spacing * 2,
-  width: width - spacing * 2,
-  height: height - spacing * 2
-});
-var getPanelBounds = ({ x, y }, { width, height }, spacing = 0) => ({
-  width: x * width + spacing * 2,
-  height: y * height + spacing * 2
-});
-var calculateCellWidth = (defaultWidth, screenWidth, options = {
-  min: 260,
-  max: 400
-}) => {
-  return screenWidth > options.min && screenWidth < options.max ? screenWidth : defaultWidth;
-};
-
-// packages/ui/react-ui-mosaic/src/views/Grid/Grid.tsx
-import { useDroppable as useDroppable2 } from "@dnd-kit/core";
-import { PlusCircle } from "@phosphor-icons/react";
-import defaultsDeep from "lodash.defaultsdeep";
-import React8, { useState as useState4, useMemo, useEffect as useEffect4 } from "react";
-import { useResizeDetector } from "react-resize-detector";
-import { Button, useMediaQuery } from "@dxos/react-ui";
-import { getSize, mx as mx2 } from "@dxos/react-ui-theme";
-var defaultGridOptions = {
-  size: {
-    x: 8,
-    y: 8
-  },
-  cellBounds: {
-    width: 272,
-    height: 272
-  },
-  spacing: 6
-};
-var Grid = ({ id, items = [], layout = {}, options: opts, margin, square = true, debug, selected: controlledSelected, Component: Component2 = Mosaic.DefaultComponent, className, onDrop, onOver, onSelect, onCreate, onAction }) => {
-  const { ref: containerRef, width, height } = useResizeDetector({
-    refreshRate: 200
-  });
-  const options = defaultsDeep({}, opts, defaultGridOptions);
-  const { matrix, bounds, cellBounds } = useMemo(() => {
-    const cellWidth = calculateCellWidth(options.cellBounds.width, width ?? 0);
-    const cellBounds2 = {
-      width: cellWidth,
-      height: square ? cellWidth : options.cellBounds.height
-    };
-    return {
-      matrix: createMatrix(options.size, ({ x, y }) => ({
-        x,
-        y
-      })),
-      bounds: getPanelBounds(options.size, cellBounds2, options.spacing),
-      cellBounds: cellBounds2
-    };
-  }, [
-    options,
-    width
-  ]);
-  const [isNotMobile] = useMediaQuery("md");
-  const marginSize = margin && !isNotMobile ? Math.max(cellBounds.width, cellBounds.height) : 0;
-  const [selected, setSelected] = useState4(controlledSelected);
-  useEffect4(() => {
-    setSelected(controlledSelected);
-    if (controlledSelected) {
-      scrollToCenter(controlledSelected);
-    }
-  }, [
-    controlledSelected
-  ]);
-  const scrollToCenter = (id2) => {
-    const item = items.find((item2) => item2.id === id2);
-    if (item && width && height) {
-      const pos = getBounds(layout[item.id], cellBounds);
-      const top = pos.top + marginSize - (height - cellBounds.height) / 2;
-      const left = pos.left + marginSize - (width - cellBounds.width) / 2;
-      containerRef.current.scrollTo({
-        top,
-        left,
-        behavior: "smooth"
-      });
-    }
-  };
-  const handleSelect = (id2) => {
-    setSelected(id2);
-    scrollToCenter(id2);
-    onSelect?.(id2);
-  };
-  useEffect4(() => {
-    if (selected) {
-      scrollToCenter(selected);
-    }
-  }, [
-    selected,
-    width,
-    height
-  ]);
-  return /* @__PURE__ */ React8.createElement(Mosaic.Container, {
-    id,
-    Component: Component2,
-    getOverlayProps: () => ({
-      grow: true
-    }),
-    getOverlayStyle: () => ({
-      display: "flex",
-      ...getDimension(cellBounds, options.spacing)
-    }),
-    onDrop,
-    onOver
-  }, /* @__PURE__ */ React8.createElement("div", {
-    className: mx2("flex grow overflow-auto", className)
-  }, /* @__PURE__ */ React8.createElement("div", {
-    ref: containerRef,
-    className: mx2("grow overflow-auto snap-x md:snap-none snap-mandatory")
-  }, /* @__PURE__ */ React8.createElement("div", {
-    className: "group block relative",
-    style: {
-      ...bounds,
-      margin: marginSize
-    }
-  }, matrix && /* @__PURE__ */ React8.createElement("div", {
-    style: {
-      padding: options.spacing
-    }
-  }, /* @__PURE__ */ React8.createElement("div", {
-    className: "relative"
-  }, matrix.map((row) => row.map(({ x, y }) => /* @__PURE__ */ React8.createElement(GridCell, {
-    key: `${x}-${y}`,
-    path: id,
-    position: {
-      x,
-      y
-    },
-    bounds: getBounds({
-      x,
-      y
-    }, cellBounds),
-    padding: options.spacing,
-    onCreate
-  }))))), /* @__PURE__ */ React8.createElement("div", null, items.map((item) => {
-    const position = layout[item.id] ?? {
-      x: 0,
-      y: 0
-    };
-    return /* @__PURE__ */ React8.createElement(Mosaic.DraggableTile, {
-      key: item.id,
-      item,
-      path: id,
-      position,
-      Component: Component2,
-      draggableStyle: {
-        position: "absolute",
-        ...getBounds(position, cellBounds, options.spacing)
-      },
-      onSelect: () => handleSelect(item.id),
-      onAction
-    });
-  }))), debug && /* @__PURE__ */ React8.createElement(Mosaic.Debug, {
-    data: {
-      items: items?.length
-    },
-    position: "bottom-right"
-  }))));
-};
-var GridCell = ({ path, position, bounds, padding, onCreate }) => {
-  const { overItem } = useMosaic();
-  const isOverContainer = path === overItem?.path;
-  const { setNodeRef, isOver } = useDroppable2({
-    id: Path.create(path, "cell", `${position.x}-${position.y}`),
-    data: {
-      path,
-      position
-    }
-  });
-  return /* @__PURE__ */ React8.createElement("div", {
-    ref: setNodeRef,
-    style: {
-      ...bounds,
-      padding
-    },
-    className: "absolute flex justify-center items-center grow select-none cursor-pointer"
-  }, /* @__PURE__ */ React8.createElement("div", {
-    className: mx2("group/cell flex group-hover:flex w-full h-full items-center justify-center", "box-border border-dashed border-4 border-neutral-75 dark:border-neutral-850 rounded-lg", "transition ease-in-out duration-300", isOver && "flex bg-neutral-75 dark:bg-neutral-850 border-neutral-200 dark:border-neutral-800")
-  }, /* @__PURE__ */ React8.createElement("div", {
-    className: mx2("opacity-10 transition ease-in-out duration-300 group-hover/cell:opacity-100", isOverContainer && "hidden")
-  }, onCreate && // TODO(burdon): Style button.
-  /* @__PURE__ */ React8.createElement(Button, {
-    variant: "ghost",
-    onClick: () => onCreate(position)
-  }, /* @__PURE__ */ React8.createElement(PlusCircle, {
-    className: getSize(8)
-  })))));
-};
-
-// packages/ui/react-ui-mosaic/src/views/Kanban/Kanban.tsx
-import React9, { forwardRef as forwardRef2, useMemo as useMemo2 } from "react";
-import { Card as Card2 } from "@dxos/react-ui";
-import { groupSurface, mx as mx3 } from "@dxos/react-ui-theme";
-var Kanban = ({ id, columns, Component: TileComponent = Mosaic.DefaultComponent, debug, onDrop }) => {
-  const Component2 = useMemo2(() => OverlayComponent(id, TileComponent), [
-    id,
-    TileComponent
-  ]);
-  return /* @__PURE__ */ React9.createElement(Mosaic.Container, {
-    id,
-    debug,
-    Component: Component2,
-    // Restrict columns to x-axis.
-    modifier: ({ path, item }, { transform }) => path === Path.create(id, item.id) ? {
-      ...transform,
-      y: 0
-    } : transform,
-    // Restrict to objects from other columns.
-    // TODO(burdon): Consider objects from other containers.
-    // TODO(wittjosiah): Allow override.
-    onOver: ({ active, over }) => Path.length(active.path) >= Path.length(over.path) ? "transfer" : "reject",
-    onDrop
-  }, /* @__PURE__ */ React9.createElement("div", {
-    className: "grow flex overflow-y-hidden overflow-x-auto"
-  }, /* @__PURE__ */ React9.createElement("div", {
-    className: "flex"
-  }, /* @__PURE__ */ React9.createElement(Mosaic.SortableContext, {
-    items: columns,
-    direction: "horizontal"
-  }, columns.map((column, index) => /* @__PURE__ */ React9.createElement(Mosaic.SortableTile, {
-    key: column.id,
-    item: column,
-    path: id,
-    position: index,
-    Component: Component2,
-    debug
-  }))))));
-};
-var OverlayComponent = (id, Component2) => /* @__PURE__ */ forwardRef2((props, ref) => {
-  const isColumn = Path.hasRoot(props.path, id) && Path.length(props.path) === 2;
-  if (isColumn && props.active === "overlay") {
-    return (
-      // Needs to not override the main kanban path.
-      /* @__PURE__ */ React9.createElement(Mosaic.Container, {
-        id: `${id}-active`,
-        Component: Component2
-      }, /* @__PURE__ */ React9.createElement(KanbanColumnComponent, {
-        ...props,
-        ref
-      }))
-    );
-  }
-  return isColumn ? /* @__PURE__ */ React9.createElement(KanbanColumnComponent, {
-    ...props,
-    ref
-  }) : /* @__PURE__ */ React9.createElement(Component2, {
-    ...props,
-    ref
-  });
-});
-var KanbanColumnComponent = /* @__PURE__ */ forwardRef2(({ path, item, active, draggableStyle, draggableProps, debug }, forwardRef1) => {
-  const { id, title, items } = item;
-  const { Component: Component2 } = useContainer();
-  const itemsWithPreview = useItemsWithPreview({
-    path,
-    items
-  });
-  return /* @__PURE__ */ React9.createElement("div", {
-    role: "none",
-    className: "grow flex flex-col",
-    ref: forwardRef1
-  }, /* @__PURE__ */ React9.createElement("div", {
-    className: mx3(groupSurface, "grow flex flex-col w-[300px] snap-center overflow-hidden m-1", active === "rearrange" && "opacity-0"),
-    style: draggableStyle
-  }, /* @__PURE__ */ React9.createElement(Card2.Root, {
-    classNames: "shrink-0 bg-cyan-200"
-  }, /* @__PURE__ */ React9.createElement(Card2.Header, null, /* @__PURE__ */ React9.createElement(Card2.DragHandle, draggableProps), /* @__PURE__ */ React9.createElement(Card2.Title, {
-    title
-  }), /* @__PURE__ */ React9.createElement(Card2.Menu, null))), /* @__PURE__ */ React9.createElement("div", {
-    className: mx3("flex flex-col grow overflow-y-scroll")
-  }, /* @__PURE__ */ React9.createElement("div", {
-    className: "flex flex-col my-1"
-  }, /* @__PURE__ */ React9.createElement(Mosaic.SortableContext, {
-    id: path,
-    items: itemsWithPreview,
-    direction: "vertical"
-  }, itemsWithPreview.map((item2, index) => /* @__PURE__ */ React9.createElement(Mosaic.SortableTile, {
-    key: item2.id,
-    item: item2,
-    path,
-    position: index,
-    Component: Component2,
-    className: "m-1"
-  }))))), debug && /* @__PURE__ */ React9.createElement(Mosaic.Debug, {
-    data: {
-      path,
-      id,
-      items: itemsWithPreview.length
-    }
-  })));
-});
-
-// packages/ui/react-ui-mosaic/src/views/Stack/Stack.tsx
-import React10 from "react";
-import { mx as mx4 } from "@dxos/react-ui-theme";
-var Stack = ({ id, Component: Component2 = Mosaic.DefaultComponent, onOver, onDrop, items = [], direction = "vertical", debug }) => {
-  const itemsWithPreview = useItemsWithPreview({
-    path: id,
-    items
-  });
-  return /* @__PURE__ */ React10.createElement("div", {
-    className: mx4("flex overflow-hidden", direction === "vertical" && "w-[300px]")
-  }, /* @__PURE__ */ React10.createElement("div", {
-    className: mx4("flex flex-col w-full my-1", direction === "vertical" ? "overflow-y-auto" : "overflow-x-auto")
-  }, /* @__PURE__ */ React10.createElement(Mosaic.Container, {
-    id,
-    Component: Component2,
-    onOver,
-    onDrop
-  }, /* @__PURE__ */ React10.createElement(Mosaic.SortableContext, {
-    items: itemsWithPreview,
-    direction
-  }, itemsWithPreview.map((item, index) => /* @__PURE__ */ React10.createElement(Mosaic.SortableTile, {
-    key: item.id,
-    item,
-    path: id,
-    position: index,
-    className: "m-1"
-  })))), debug && /* @__PURE__ */ React10.createElement("div", {
-    className: "grow"
-  }, /* @__PURE__ */ React10.createElement(Mosaic.Debug, {
-    data: {
-      id,
-      items: itemsWithPreview.length
-    }
-  }))));
-};
-
-// packages/ui/react-ui-mosaic/src/views/Tree/Tree.tsx
-import React11, { forwardRef as forwardRef3 } from "react";
-import { Card as Card3, Tree as TreeComponent, TreeItem as TreeItemComponent } from "@dxos/react-ui";
-import { dropRing, mx as mx5 } from "@dxos/react-ui-theme";
-var Tree = ({ id, Component: Component2 = TreeItem, onOver, onDrop, items = [], debug }) => {
-  return /* @__PURE__ */ React11.createElement(Mosaic.Container, {
-    id,
-    debug,
-    Component: Component2,
-    onOver,
-    onDrop
-  }, /* @__PURE__ */ React11.createElement(TreeRoot, {
-    items
-  }));
-};
-var TreeRoot = ({ items }) => {
-  const { id, Component: Component2 } = useContainer();
-  const itemsWithOrigin = useItemsWithOrigin(id, items);
-  return /* @__PURE__ */ React11.createElement(TreeComponent.Root, {
-    classNames: "flex flex-col"
-  }, /* @__PURE__ */ React11.createElement(Mosaic.SortableContext, {
-    id,
-    items: itemsWithOrigin,
-    direction: "vertical"
-  }, itemsWithOrigin.map((item, index) => /* @__PURE__ */ React11.createElement(TreeItemComponent.Root, {
-    key: item.id,
-    collapsible: true,
-    defaultOpen: true
-  }, /* @__PURE__ */ React11.createElement(Mosaic.SortableTile, {
-    item,
-    path: id,
-    position: index,
-    Component: Component2
-  })))));
-};
-var TreeItem = /* @__PURE__ */ forwardRef3(({ path, draggableStyle, draggableProps, item, operation, active, isOver, isDragging, className }, forwardedRef) => {
-  return /* @__PURE__ */ React11.createElement("div", {
-    ref: forwardedRef,
-    style: draggableStyle,
-    className: mx5("flex flex-col rounded", className, (active === "rearrange" || active === "origin") && "opacity-0", active === "destination" && "opacity-20", isOver && dropRing)
-  }, /* @__PURE__ */ React11.createElement(Card3.Header, null, /* @__PURE__ */ React11.createElement(Card3.DragHandle, draggableProps), /* @__PURE__ */ React11.createElement(Card3.Title, {
-    title: item.label ?? path,
-    classNames: "truncate"
-  })), !active && item.children && /* @__PURE__ */ React11.createElement(TreeBranch, {
-    path,
-    items: item.children
-  }));
-});
-var TreeBranch = ({ path, items }) => {
-  const { operation, overItem } = useMosaic();
-  const { Component: Component2 } = useContainer();
-  const itemsWithOrigin = useItemsWithOrigin(path, items);
-  return /* @__PURE__ */ React11.createElement(TreeItemComponent.Body, {
-    className: "pis-4"
-  }, /* @__PURE__ */ React11.createElement(Mosaic.SortableContext, {
-    id: path,
-    items: itemsWithOrigin,
-    direction: "vertical"
-  }, itemsWithOrigin.map((child, index) => /* @__PURE__ */ React11.createElement(TreeComponent.Branch, {
-    key: child.id
-  }, /* @__PURE__ */ React11.createElement(TreeItemComponent.Root, {
-    collapsible: true,
-    defaultOpen: true
-  }, /* @__PURE__ */ React11.createElement(Mosaic.SortableTile, {
-    item: child,
-    path,
-    position: index,
-    Component: Component2,
-    isOver: overItem?.path === Path.create(path, child.id) && (operation === "transfer" || operation === "copy")
-  }))))));
-};
 export {
-  Grid,
-  Kanban,
   Mosaic,
   Path,
-  Stack,
-  Tree,
-  calculateCellWidth,
-  createMatrix,
-  getBounds,
-  getDimension,
-  getPanelBounds,
   getTransformCSS,
+  isTileComponentProps,
+  isTileProps,
   swapItems,
   useContainer,
   useItemsWithOrigin,