@dxos/react-ui-mosaic 0.3.3-main.3ce60d4 → 0.3.3-main.44bdbf7

package/dist/lib/browser/index.mjs

@@ -344,19 +344,19 @@ var MosaicDragOverlay = ({ delay = 200, debug = false, ...overlayProps }) => {
   useEffect3(() => {
     if (activeItem) {
       let container2;
-      let OverlayComponent2;
+      let OverlayComponent3;
       if (overItem?.path) {
         container2 = containers[Path.first(overItem.path)];
-        OverlayComponent2 = container2?.Component;
+        OverlayComponent3 = container2?.Component;
       }
-      if (!OverlayComponent2) {
+      if (!OverlayComponent3) {
         container2 = containers[Path.first(activeItem.path)];
-        OverlayComponent2 = container2?.Component ?? DefaultComponent;
+        OverlayComponent3 = container2?.Component ?? DefaultComponent;
       }
       clearTimeout(timer.current);
       timer.current = setTimeout(() => setState({
         container: container2,
-        OverlayComponent: OverlayComponent2
+        OverlayComponent: OverlayComponent3
       }), timer.current ? delay : 0);
     } else {
       setState({});
@@ -366,7 +366,7 @@ var MosaicDragOverlay = ({ delay = 200, debug = false, ...overlayProps }) => {
     overItem
   ]);
   const container = state.container ?? (activeItem && containers[Path.first(activeItem.path)]);
-  const OverlayComponent = state.OverlayComponent ?? container?.Component;
+  const OverlayComponent2 = 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).
@@ -376,7 +376,7 @@ var MosaicDragOverlay = ({ delay = 200, debug = false, ...overlayProps }) => {
       style: {
         ...container?.getOverlayStyle?.()
       }
-    }, activeItem?.path && container && OverlayComponent && /* @__PURE__ */ React5.createElement(DensityProvider, {
+    }, activeItem?.path && container && OverlayComponent2 && /* @__PURE__ */ React5.createElement(DensityProvider, {
       density: "fine"
     }, /* @__PURE__ */ React5.createElement(OverlayErrorBoundary, {
       fallback: /* @__PURE__ */ React5.createElement(FallbackComponent, {
@@ -386,7 +386,7 @@ var MosaicDragOverlay = ({ delay = 200, debug = false, ...overlayProps }) => {
         operation,
         active: "overlay"
       })
-    }, /* @__PURE__ */ React5.createElement(OverlayComponent, {
+    }, /* @__PURE__ */ React5.createElement(OverlayComponent2, {
       ...container.getOverlayProps?.(),
       item: activeItem.item,
       path: activeItem.path,
@@ -583,9 +583,437 @@ 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: 280,
+    height: 280
+  },
+  spacing: 8
+};
+var Grid = ({ id, items = [], layout = {}, options: opts, margin, square = true, debug, selected: controlledSelected, Component: Component2 = Mosaic.DefaultComponent, className, onDrop, 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: () => getDimension(cellBounds, options.spacing),
+    onDrop
+  }, /* @__PURE__ */ React8.createElement("div", {
+    className: mx2("flex grow overflow-auto", className)
+  }, /* @__PURE__ */ React8.createElement("div", {
+    ref: containerRef,
+    className: mx2("grow overflow-auto snap-x snap-mandatory md:snap-none")
+  }, /* @__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-100 rounded-lg", "transition ease-in-out duration-300", isOver && "flex bg-neutral-200 border-neutral-400")
+  }, /* @__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) ? "adopt" : "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, compare }) => {
+  return /* @__PURE__ */ React11.createElement(Mosaic.Container, {
+    id,
+    debug,
+    Component: Component2,
+    onOver,
+    onDrop,
+    compare
+  }, /* @__PURE__ */ React11.createElement(TreeRoot, {
+    items
+  }));
+};
+var TreeRoot = ({ items }) => {
+  const { id, Component: Component2 } = useContainer();
+  const sortedItems = useSortedItems(items);
+  return /* @__PURE__ */ React11.createElement(TreeComponent.Root, {
+    classNames: "flex flex-col"
+  }, /* @__PURE__ */ React11.createElement(Mosaic.SortableContext, {
+    id,
+    items: sortedItems,
+    direction: "vertical"
+  }, sortedItems.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 sortedItems = useSortedItems(items);
+  return /* @__PURE__ */ React11.createElement(TreeItemComponent.Body, {
+    className: "pis-4"
+  }, /* @__PURE__ */ React11.createElement(Mosaic.SortableContext, {
+    id: path,
+    items: sortedItems,
+    direction: "vertical"
+  }, sortedItems.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 === "adopt" || operation === "copy")
+  }))))));
+};
 export {
+  Grid,
+  Kanban,
   Mosaic,
   Path,
+  Stack,
+  Tree,
+  calculateCellWidth,
+  createMatrix,
+  getBounds,
+  getDimension,
+  getPanelBounds,
   getTransformCSS,
   swapItems,
   useContainer,