@dxos/react-ui-mosaic 0.3.3-main.1817c8a → 0.3.3-main.22971a3

package/dist/lib/browser/index.mjs

@@ -272,7 +272,7 @@ var MosaicDebug = ({ containers, operation, activeItem, overItem }) => {
 var useMosaic = () => useContext2(MosaicContext) ?? raise2(new Error("Missing MosaicContext"));
 
 // packages/ui/react-ui-mosaic/src/mosaic/hooks/useItemsWithPreview.ts
-var useItemsWithPreview = ({ path, items }) => {
+var useItemsWithPreview = ({ path, items, strategy = "default" }) => {
   const { operation, activeItem, overItem } = useMosaic();
   const [itemsWithPreview, setItemsWithPreview] = useState2(items);
   const overParent = (
@@ -282,7 +282,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,28 +290,56 @@ 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 (!activeIsChild && overIsChild) {
-      setItemsWithPreview((items2) => {
-        const position = overItem.position;
-        return [
-          ...items2.slice(0, position),
-          activeItem.item,
-          ...items2.slice(position)
-        ];
-      });
-    } else if (!activeIsChild && overSelf) {
-      setItemsWithPreview((items2) => [
-        ...items2,
-        activeItem.item
-      ]);
-    } else if (activeIsChild && !overIsChild) {
-      setItemsWithPreview((items2) => items2.filter((item) => item.id !== activeItem.item.id));
-    } else {
-      setItemsWithPreview(items);
+    switch (strategy) {
+      case "layout-stable":
+        setLastOverParent(overParent);
+        if (activeIsChild && !overIsChild && operation !== "rearrange") {
+          setItemsWithPreview((sortedItems) => sortedItems.map((item) => {
+            if (item.id === activeItem.item.id) {
+              return {
+                ...item,
+                id: `${item.id}--origin`
+              };
+            } else {
+              return item;
+            }
+          }));
+        } else {
+          setItemsWithPreview(items);
+        }
+        break;
+      case "default":
+      default:
+        if (operation === "reject" || operation === "rearrange") {
+          setLastOverParent(void 0);
+          setItemsWithPreview(items);
+          return;
+        } else {
+          setLastOverParent(overParent);
+        }
+        if (!activeIsChild && overIsChild) {
+          setItemsWithPreview((items2) => {
+            const position = overItem.position;
+            return [
+              ...items2.slice(0, position),
+              activeItem.item,
+              ...items2.slice(position)
+            ];
+          });
+        } else if (!activeIsChild && overSelf) {
+          setItemsWithPreview((items2) => [
+            ...items2,
+            activeItem.item
+          ]);
+        } else if (activeIsChild && !overIsChild) {
+          setItemsWithPreview((items2) => items2.filter((item) => item.id !== activeItem.item.id));
+        } else {
+          setItemsWithPreview(items);
+        }
+        break;
     }
   }, [
     operation,
@@ -322,15 +350,7 @@ var useItemsWithPreview = ({ path, items }) => {
     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;
+  return strategy !== "layout-stable" && items.length === itemsWithPreview.length ? items : itemsWithPreview;
 };
 
 // packages/ui/react-ui-mosaic/src/mosaic/DragOverlay.tsx
@@ -637,7 +657,7 @@ var defaultGridOptions = {
   },
   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 +725,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", {
@@ -931,7 +952,7 @@ var Stack = ({ id, Component: Component2 = Mosaic.DefaultComponent, onOver, onDr
 };
 
 // packages/ui/react-ui-mosaic/src/views/Tree/Tree.tsx
-import React11, { forwardRef as forwardRef3 } from "react";
+import React11, { forwardRef as forwardRef3, useMemo as useMemo3 } 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 }) => {
@@ -947,15 +968,27 @@ var Tree = ({ id, Component: Component2 = TreeItem, onOver, onDrop, items = [],
   }));
 };
 var TreeRoot = ({ items }) => {
-  const { id, Component: Component2 } = useContainer();
-  const sortedItems = useSortedItems(items);
+  const { id, Component: Component2, compare } = useContainer();
+  const sortedItems = useMemo3(() => {
+    return compare ? [
+      ...items
+    ].sort(compare) : items;
+  }, [
+    items,
+    compare
+  ]);
+  const itemsWithPreview = useItemsWithPreview({
+    items: sortedItems,
+    path: id,
+    strategy: "layout-stable"
+  });
   return /* @__PURE__ */ React11.createElement(TreeComponent.Root, {
     classNames: "flex flex-col"
   }, /* @__PURE__ */ React11.createElement(Mosaic.SortableContext, {
     id,
-    items: sortedItems,
+    items: itemsWithPreview,
     direction: "vertical"
-  }, sortedItems.map((item, index) => /* @__PURE__ */ React11.createElement(TreeItemComponent.Root, {
+  }, itemsWithPreview.map((item, index) => /* @__PURE__ */ React11.createElement(TreeItemComponent.Root, {
     key: item.id,
     collapsible: true,
     defaultOpen: true
@@ -981,15 +1014,27 @@ var TreeItem = /* @__PURE__ */ forwardRef3(({ path, draggableStyle, draggablePro
 });
 var TreeBranch = ({ path, items }) => {
   const { operation, overItem } = useMosaic();
-  const { Component: Component2 } = useContainer();
-  const sortedItems = useSortedItems(items);
+  const { Component: Component2, compare } = useContainer();
+  const sortedItems = useMemo3(() => {
+    return compare ? [
+      ...items
+    ].sort(compare) : items;
+  }, [
+    items,
+    compare
+  ]);
+  const itemsWithPreview = useItemsWithPreview({
+    items: sortedItems,
+    path,
+    strategy: "layout-stable"
+  });
   return /* @__PURE__ */ React11.createElement(TreeItemComponent.Body, {
     className: "pis-4"
   }, /* @__PURE__ */ React11.createElement(Mosaic.SortableContext, {
     id: path,
-    items: sortedItems,
+    items: itemsWithPreview,
     direction: "vertical"
-  }, sortedItems.map((child, index) => /* @__PURE__ */ React11.createElement(TreeComponent.Branch, {
+  }, itemsWithPreview.map((child, index) => /* @__PURE__ */ React11.createElement(TreeComponent.Branch, {
     key: child.id
   }, /* @__PURE__ */ React11.createElement(TreeItemComponent.Root, {
     collapsible: true,
@@ -1018,7 +1063,6 @@ export {
   swapItems,
   useContainer,
   useItemsWithPreview,
-  useMosaic,
-  useSortedItems
+  useMosaic
 };
 //# sourceMappingURL=index.mjs.map