@dxos/react-ui-mosaic 0.3.3-main.f990aad → 0.3.3-next.6bede4d

package/dist/lib/browser/index.mjs

@@ -6,7 +6,7 @@ import { raise } from "@dxos/debug";
 import React, { createContext, useEffect } from "react";
 var DEFAULT_TRANSITION = 200;
 var MosaicContainerContext = /* @__PURE__ */ createContext(void 0);
-var MosaicContainer = ({ children, id, debug, Component: Component2, transitionDuration = DEFAULT_TRANSITION, modifier, getOverlayProps, getOverlayStyle, onOver, onDrop, compare }) => {
+var MosaicContainer = ({ children, id, debug, Component: Component2, transitionDuration = DEFAULT_TRANSITION, modifier, getOverlayProps, getOverlayStyle, onOver, onDrop }) => {
   const mosaic = useMosaic();
   const container = {
     id,
@@ -17,8 +17,7 @@ var MosaicContainer = ({ children, id, debug, Component: Component2, transitionD
     getOverlayProps,
     getOverlayStyle,
     onOver,
-    onDrop,
-    compare
+    onDrop
   };
   useEffect(() => {
     mosaic.setContainer(container.id, container);
@@ -181,7 +180,7 @@ var MosaicRoot = ({ Component: Component2 = DefaultComponent, debug, children })
           over
         });
       } else {
-        return "adopt";
+        return "reject";
       }
     };
     setOperation(onOver({
@@ -282,7 +281,7 @@ var useItemsWithPreview = ({ path, items }) => {
   );
   const [lastOverParent, setLastOverParent] = useState2(overParent);
   useEffect2(() => {
-    if (operation === "reject" || operation === "rearrange" || !activeItem || !overItem) {
+    if (!activeItem || !overItem) {
       setLastOverParent(void 0);
       setItemsWithPreview(items);
       return;
@@ -290,10 +289,16 @@ var useItemsWithPreview = ({ path, items }) => {
     if (lastOverParent === overParent) {
       return;
     }
-    setLastOverParent(overParent);
     const activeIsChild = Path.hasChild(path, activeItem.path);
     const overIsChild = Path.hasChild(path, overItem.path);
     const overSelf = overItem.path === path;
+    if (operation === "reject" || operation === "rearrange") {
+      setLastOverParent(void 0);
+      setItemsWithPreview(items);
+      return;
+    } else {
+      setLastOverParent(overParent);
+    }
     if (!activeIsChild && overIsChild) {
       setItemsWithPreview((items2) => {
         const position = overItem.position;
@@ -325,12 +330,28 @@ var useItemsWithPreview = ({ path, items }) => {
   return items.length === itemsWithPreview.length ? items : itemsWithPreview;
 };
 
-// packages/ui/react-ui-mosaic/src/mosaic/hooks/useSortedItems.ts
-var useSortedItems = (items) => {
-  const { compare } = useContainer();
-  return compare ? [
-    ...items
-  ].sort(compare) : items;
+// packages/ui/react-ui-mosaic/src/mosaic/hooks/useItemsWithOrigin.ts
+var useItemsWithOrigin = (path, items) => {
+  const { operation, activeItem, overItem } = useMosaic();
+  if (!activeItem || !overItem) {
+    return items;
+  }
+  const activeIsChild = Path.hasChild(path, activeItem.path);
+  const overIsChild = Path.hasChild(path, overItem.path);
+  if (activeIsChild && !overIsChild && operation !== "rearrange") {
+    return items.map((item) => {
+      if (item.id === activeItem.item.id) {
+        return {
+          ...item,
+          id: `${item.id}--origin`
+        };
+      } else {
+        return item;
+      }
+    });
+  } else {
+    return items;
+  }
 };
 
 // packages/ui/react-ui-mosaic/src/mosaic/DragOverlay.tsx
@@ -632,12 +653,12 @@ var defaultGridOptions = {
     y: 8
   },
   cellBounds: {
-    width: 280,
-    height: 280
+    width: 272,
+    height: 272
   },
-  spacing: 8
+  spacing: 6
 };
-var Grid = ({ id, items = [], layout = {}, options: opts, margin, square = true, debug, selected: controlledSelected, Component: Component2 = Mosaic.DefaultComponent, className, onDrop, onSelect, onCreate, onAction }) => {
+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
   });
@@ -705,7 +726,8 @@ var Grid = ({ id, items = [], layout = {}, options: opts, margin, square = true,
       grow: true
     }),
     getOverlayStyle: () => getDimension(cellBounds, options.spacing),
-    onDrop
+    onDrop,
+    onOver
   }, /* @__PURE__ */ React8.createElement("div", {
     className: mx2("flex grow overflow-auto", className)
   }, /* @__PURE__ */ React8.createElement("div", {
@@ -812,7 +834,7 @@ var Kanban = ({ id, columns, Component: TileComponent = Mosaic.DefaultComponent,
     // 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",
+    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"
@@ -934,28 +956,27 @@ var Stack = ({ id, Component: Component2 = Mosaic.DefaultComponent, onOver, onDr
 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 }) => {
+var Tree = ({ id, Component: Component2 = TreeItem, onOver, onDrop, items = [], debug }) => {
   return /* @__PURE__ */ React11.createElement(Mosaic.Container, {
     id,
     debug,
     Component: Component2,
     onOver,
-    onDrop,
-    compare
+    onDrop
   }, /* @__PURE__ */ React11.createElement(TreeRoot, {
     items
   }));
 };
 var TreeRoot = ({ items }) => {
   const { id, Component: Component2 } = useContainer();
-  const sortedItems = useSortedItems(items);
+  const itemsWithOrigin = useItemsWithOrigin(id, items);
   return /* @__PURE__ */ React11.createElement(TreeComponent.Root, {
     classNames: "flex flex-col"
   }, /* @__PURE__ */ React11.createElement(Mosaic.SortableContext, {
     id,
-    items: sortedItems,
+    items: itemsWithOrigin,
     direction: "vertical"
-  }, sortedItems.map((item, index) => /* @__PURE__ */ React11.createElement(TreeItemComponent.Root, {
+  }, itemsWithOrigin.map((item, index) => /* @__PURE__ */ React11.createElement(TreeItemComponent.Root, {
     key: item.id,
     collapsible: true,
     defaultOpen: true
@@ -982,14 +1003,14 @@ var TreeItem = /* @__PURE__ */ forwardRef3(({ path, draggableStyle, draggablePro
 var TreeBranch = ({ path, items }) => {
   const { operation, overItem } = useMosaic();
   const { Component: Component2 } = useContainer();
-  const sortedItems = useSortedItems(items);
+  const itemsWithOrigin = useItemsWithOrigin(path, items);
   return /* @__PURE__ */ React11.createElement(TreeItemComponent.Body, {
     className: "pis-4"
   }, /* @__PURE__ */ React11.createElement(Mosaic.SortableContext, {
     id: path,
-    items: sortedItems,
+    items: itemsWithOrigin,
     direction: "vertical"
-  }, sortedItems.map((child, index) => /* @__PURE__ */ React11.createElement(TreeComponent.Branch, {
+  }, itemsWithOrigin.map((child, index) => /* @__PURE__ */ React11.createElement(TreeComponent.Branch, {
     key: child.id
   }, /* @__PURE__ */ React11.createElement(TreeItemComponent.Root, {
     collapsible: true,
@@ -999,7 +1020,7 @@ var TreeBranch = ({ path, items }) => {
     path,
     position: index,
     Component: Component2,
-    isOver: overItem?.path === Path.create(path, child.id) && (operation === "adopt" || operation === "copy")
+    isOver: overItem?.path === Path.create(path, child.id) && (operation === "transfer" || operation === "copy")
   }))))));
 };
 export {
@@ -1017,8 +1038,8 @@ export {
   getTransformCSS,
   swapItems,
   useContainer,
+  useItemsWithOrigin,
   useItemsWithPreview,
-  useMosaic,
-  useSortedItems
+  useMosaic
 };
 //# sourceMappingURL=index.mjs.map