@dxos/react-ui-mosaic 0.3.3-main.ff5734a → 0.3.3

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);
@@ -272,7 +271,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, strategy = "default" }) => {
+var useItemsWithPreview = ({ path, items }) => {
   const { operation, activeItem, overItem } = useMosaic();
   const [itemsWithPreview, setItemsWithPreview] = useState2(items);
   const overParent = (
@@ -293,53 +292,31 @@ var useItemsWithPreview = ({ path, items, strategy = "default" }) => {
     const activeIsChild = Path.hasChild(path, activeItem.path);
     const overIsChild = Path.hasChild(path, overItem.path);
     const overSelf = overItem.path === path;
-    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;
+    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);
     }
   }, [
     operation,
@@ -350,7 +327,31 @@ var useItemsWithPreview = ({ path, items, strategy = "default" }) => {
     path,
     items
   ]);
-  return strategy !== "layout-stable" && items.length === itemsWithPreview.length ? items : itemsWithPreview;
+  return items.length === itemsWithPreview.length ? items : itemsWithPreview;
+};
+
+// 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
@@ -952,43 +953,30 @@ var Stack = ({ id, Component: Component2 = Mosaic.DefaultComponent, onOver, onDr
 };
 
 // packages/ui/react-ui-mosaic/src/views/Tree/Tree.tsx
-import React11, { forwardRef as forwardRef3, useMemo as useMemo3 } from "react";
+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, compare } = useContainer();
-  const sortedItems = useMemo3(() => {
-    return compare ? [
-      ...items
-    ].sort(compare) : items;
-  }, [
-    items,
-    compare
-  ]);
-  const itemsWithPreview = useItemsWithPreview({
-    items: sortedItems,
-    path: id,
-    strategy: "layout-stable"
-  });
+  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: itemsWithPreview,
+    items: itemsWithOrigin,
     direction: "vertical"
-  }, itemsWithPreview.map((item, index) => /* @__PURE__ */ React11.createElement(TreeItemComponent.Root, {
+  }, itemsWithOrigin.map((item, index) => /* @__PURE__ */ React11.createElement(TreeItemComponent.Root, {
     key: item.id,
     collapsible: true,
     defaultOpen: true
@@ -1014,27 +1002,15 @@ var TreeItem = /* @__PURE__ */ forwardRef3(({ path, draggableStyle, draggablePro
 });
 var TreeBranch = ({ path, items }) => {
   const { operation, overItem } = useMosaic();
-  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"
-  });
+  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: itemsWithPreview,
+    items: itemsWithOrigin,
     direction: "vertical"
-  }, itemsWithPreview.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,
@@ -1062,6 +1038,7 @@ export {
   getTransformCSS,
   swapItems,
   useContainer,
+  useItemsWithOrigin,
   useItemsWithPreview,
   useMosaic
 };