@dxos/react-ui-mosaic 0.8.4-main.21d9917 → 0.8.4-main.937b3ca

package/dist/lib/browser/{chunk-FS5LRPMY.mjs → chunk-QKMUWO5X.mjs}

@@ -471,18 +471,20 @@ var styles3 = {
   placeholder: {
     root: [
       "group opacity-0",
-      'group-data-[mosaic-debug="true"]:bg-orange-500',
       'group-data-[mosaic-debug="true"]:opacity-100',
+      'group-data-[mosaic-debug="true"]:bg-orange-500',
       "data-[mosaic-placeholder-state=active]:opacity-100",
       "data-[mosaic-placeholder-axis=vertical]:plb-1",
       "data-[mosaic-placeholder-axis=vertical]:data-[mosaic-placeholder-state=active]:plb-2.5",
       "data-[mosaic-placeholder-axis=horizontal]:pli-1",
       "data-[mosaic-placeholder-axis=horizontal]:data-[mosaic-placeholder-state=active]:pli-2.5"
     ],
-    // TODO(burdon): Don't animate open if placeholder is the source.
     content: [
       "transition-all duration-0",
-      "group-data-[mosaic-placeholder-state=active]:duration-200",
+      // TODO(burdon): Don't animate open if placeholder is the source.
+      // TODO(burdon): Flickers when start to drag since source is removed and then the placeholder shows up.
+      //  - Use absolute positioning?
+      // 'group-data-[mosaic-placeholder-state=active]:duration-200',
       "group-data-[mosaic-placeholder-axis=vertical]:bs-0",
       "group-data-[mosaic-placeholder-axis=horizontal]:is-0",
       "group-data-[mosaic-placeholder-axis=vertical]:group-data-[mosaic-placeholder-state=active]:bs-[var(--mosaic-placeholder-height)]",
@@ -623,29 +625,6 @@ import React6, { Fragment, forwardRef as forwardRef5 } from "react";
 import { invariant } from "@dxos/invariant";
 import { mx as mx6 } from "@dxos/ui-theme";
 
-// src/hooks/useVisibleItems.ts
-import { useMemo } from "react";
-var useVisibleItems = ({ id, items, dragging, getId }) => {
-  const visibleItems = useMemo(() => {
-    if (!items || !dragging || id !== dragging.containerId) {
-      return items ?? [];
-    }
-    const idx = items.findIndex((item) => getId(item) === dragging.id);
-    if (idx === -1) {
-      return items;
-    }
-    const visibleItems2 = items.slice();
-    visibleItems2.splice(idx, 1);
-    return visibleItems2;
-  }, [
-    id,
-    items,
-    dragging,
-    getId
-  ]);
-  return visibleItems;
-};
-
 // src/components/Mosaic/Mosaic.tsx
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { draggable, dropTargetForElements, monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
@@ -659,16 +638,15 @@ import { createContext as createContext3 } from "@radix-ui/react-context";
 import { Primitive as Primitive2 } from "@radix-ui/react-primitive";
 import { Slot as Slot3 } from "@radix-ui/react-slot";
 import { bind } from "bind-event-listener";
-import React5, { forwardRef as forwardRef4, useCallback as useCallback2, useEffect as useEffect2, useLayoutEffect, useMemo as useMemo3, useRef as useRef4, useState as useState3 } from "react";
+import React5, { forwardRef as forwardRef4, useCallback as useCallback2, useEffect as useEffect2, useLayoutEffect, useMemo as useMemo2, useRef as useRef4, useState as useState3 } from "react";
 import { createPortal } from "react-dom";
 import { log } from "@dxos/log";
-import { Json } from "@dxos/react-ui-syntax-highlighter";
 import { mx as mx5 } from "@dxos/ui-theme";
 import { isTruthy } from "@dxos/util";
 
 // src/components/Scrollable/Scrollable.tsx
 import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
-import React4, { forwardRef as forwardRef3, useEffect, useMemo as useMemo2, useRef as useRef3 } from "react";
+import React4, { forwardRef as forwardRef3, useEffect, useMemo, useRef as useRef3 } from "react";
 import { mx as mx4 } from "@dxos/ui-theme";
 import "overlayscrollbars/styles/overlayscrollbars.css";
 var defaultOptions = {
@@ -680,7 +658,7 @@ var defaultOptions = {
 };
 var Scrollable = /* @__PURE__ */ forwardRef3(({ classNames, axis = "vertical", padding, options: optionsProp = defaultOptions, onScroll, viewportRef, ...props }, forwardedRef) => {
   const osRef = useRef3(null);
-  const options = useMemo2(() => {
+  const options = useMemo(() => {
     const options2 = {
       ...optionsProp
     };
@@ -714,7 +692,7 @@ var Scrollable = /* @__PURE__ */ forwardRef3(({ classNames, axis = "vertical", p
     osRef,
     viewportRef
   ]);
-  const events = useMemo2(() => {
+  const events = useMemo(() => {
     if (!onScroll) {
       return null;
     }
@@ -802,7 +780,19 @@ var Root = /* @__PURE__ */ forwardRef4(({ classNames, children, asChild, debug }
         };
       });
     };
-    return monitorForElements({
+    const handleCancel = () => {
+      setDragging((dragging2) => {
+        requestAnimationFrame(() => {
+          dragging2?.target?.handler?.onCancel?.();
+          dragging2?.source?.container?.dispatchEvent(new CustomEvent("dnd:cancel", {
+            bubbles: true
+          }));
+        });
+        return void 0;
+      });
+    };
+    let noTargetTimeout;
+    return combine(monitorForElements({
       /**
       * Dragging started within any container.
       */
@@ -812,7 +802,7 @@ var Root = /* @__PURE__ */ forwardRef4(({ classNames, children, asChild, debug }
           location: location.current.dropTargets.map((target) => target.data)
         }, {
           F: __dxlog_file,
-          L: 203,
+          L: 215,
           S: void 0,
           C: (f, a) => f(...a)
         });
@@ -825,19 +815,24 @@ var Root = /* @__PURE__ */ forwardRef4(({ classNames, children, asChild, debug }
       * Dragging entered a new container.
       */
       onDropTargetChange: ({ source, location }) => {
+        clearTimeout(noTargetTimeout);
         log("Root.onDropTargetChange", {
           source: source.data,
           location: location.current.dropTargets.map((target) => target.data)
         }, {
           F: __dxlog_file,
-          L: 215,
+          L: 228,
           S: void 0,
           C: (f, a) => f(...a)
         });
-        handleChange({
-          source,
-          location
-        });
+        if (location.current.dropTargets.length === 0) {
+          noTargetTimeout = setTimeout(() => setDragging(void 0), 1e3);
+        } else {
+          handleChange({
+            source,
+            location
+          });
+        }
       },
       /**
       * Dragging within any container.
@@ -860,12 +855,12 @@ var Root = /* @__PURE__ */ forwardRef4(({ classNames, children, asChild, debug }
       * Dragging ended.
       */
       onDrop: ({ source, location }) => {
-        log("Root.onDrop", {
+        log.info("Root.onDrop", {
           source: source.data,
           location: location.current.dropTargets.map((target) => target.data)
         }, {
           F: __dxlog_file,
-          L: 239,
+          L: 257,
           S: void 0,
           C: (f, a) => f(...a)
         });
@@ -876,14 +871,21 @@ var Root = /* @__PURE__ */ forwardRef4(({ classNames, children, asChild, debug }
             handlers: Object.keys(handlers)
           }, {
             F: __dxlog_file,
-            L: 247,
+            L: 265,
             S: void 0,
             C: (f, a) => f(...a)
           });
           return;
         }
         try {
-          if (location.current.dropTargets.length > 0) {
+          if (location.current.dropTargets.length === 0) {
+            log.info("cancelled", void 0, {
+              F: __dxlog_file,
+              L: 280,
+              S: void 0,
+              C: (f, a) => f(...a)
+            });
+          } else {
             const { data: targetData, handler: targetHandler } = getTargetHandler(location);
             if (!targetHandler) {
               log.warn("invalid target", {
@@ -892,7 +894,7 @@ var Root = /* @__PURE__ */ forwardRef4(({ classNames, children, asChild, debug }
                 handlers: Object.keys(handlers)
               }, {
                 F: __dxlog_file,
-                L: 260,
+                L: 285,
                 S: void 0,
                 C: (f, a) => f(...a)
               });
@@ -909,7 +911,7 @@ var Root = /* @__PURE__ */ forwardRef4(({ classNames, children, asChild, debug }
                   source: sourceData
                 }, {
                   F: __dxlog_file,
-                  L: 276,
+                  L: 301,
                   S: void 0,
                   C: (f, a) => f(...a)
                 });
@@ -931,18 +933,10 @@ var Root = /* @__PURE__ */ forwardRef4(({ classNames, children, asChild, debug }
             }
           }
         } finally {
-          setDragging((dragging2) => {
-            requestAnimationFrame(() => {
-              dragging2?.target?.handler?.onCancel?.();
-              dragging2?.source?.container?.dispatchEvent(new CustomEvent("dnd:cancel", {
-                bubbles: true
-              }));
-            });
-            return void 0;
-          });
+          handleCancel();
         }
       }
-    });
+    }));
   }, [
     handlers,
     getSourceHandler,
@@ -976,7 +970,7 @@ var Container = /* @__PURE__ */ forwardRef4(({ className, classNames, children,
   const rootRef = useRef4(null);
   const composedRef = useComposedRefs2(rootRef, forwardedRef);
   const Root2 = asChild ? Slot3 : Primitive2.div;
-  const eventHandler = useMemo3(() => eventHandlerProp ?? {
+  const eventHandler = useMemo2(() => eventHandlerProp ?? {
     id: `mosaic-container-${counter++}`
   }, [
     eventHandlerProp
@@ -1004,7 +998,7 @@ var Container = /* @__PURE__ */ forwardRef4(({ className, classNames, children,
   }, [
     eventHandler
   ]);
-  const data = useMemo3(() => ({
+  const data = useMemo2(() => ({
     type: "container",
     id: eventHandler.id
   }), [
@@ -1023,6 +1017,8 @@ var Container = /* @__PURE__ */ forwardRef4(({ className, classNames, children,
       }, 500);
     };
     return combine(...[
+      // Autoscroll.
+      // TODO(burdon): Autoscroll doesn't work well horizontally.
       autoscrollElement && [
         autoScrollForElements({
           element: autoscrollElement,
@@ -1139,44 +1135,6 @@ var Container = /* @__PURE__ */ forwardRef4(({ className, classNames, children,
   }, children), debug?.());
 });
 Container.displayName = "MosaicContainer";
-var useContainerDebug = (debug) => {
-  const debugRef = useRef4(null);
-  return useMemo3(() => {
-    if (!debug) {
-      return [
-        () => null,
-        void 0
-      ];
-    }
-    return [
-      ({ classNames }) => /* @__PURE__ */ React5.createElement("div", {
-        role: "none",
-        className: mx5("overflow-hidden", classNames),
-        ref: debugRef
-      }),
-      () => debugRef.current && /* @__PURE__ */ createPortal(/* @__PURE__ */ React5.createElement(ContainerInfo, null), debugRef.current)
-    ];
-  }, [
-    debug,
-    debugRef
-  ]);
-};
-var ContainerInfo = /* @__PURE__ */ forwardRef4(({ classNames }, forwardedRef) => {
-  const { id, state, activeLocation, scrolling } = useContainerContext(ContainerInfo.displayName);
-  const counter2 = useRef4(0);
-  return /* @__PURE__ */ React5.createElement(Json, {
-    data: {
-      id,
-      activeLocation,
-      scrolling,
-      state,
-      count: counter2.current++
-    },
-    classNames: mx5("text-xs", classNames),
-    ref: forwardedRef
-  });
-});
-ContainerInfo.displayName = "ContainerInfo";
 var [TileContextProvider, useTileContext] = createContext3("MosaicTile");
 var TILE_STATE_ATTR = "mosaic-tile-state";
 var Tile = /* @__PURE__ */ forwardRef4(({ className, classNames, children, asChild, dragHandle, allowedEdges: allowedEdgesProp, location, id, data: dataProp, debug: _ }, forwardedRef) => {
@@ -1187,7 +1145,7 @@ var Tile = /* @__PURE__ */ forwardRef4(({ className, classNames, children, asChi
   const [state, setState] = useState3({
     type: "idle"
   });
-  const allowedEdges = useMemo3(() => allowedEdgesProp || (axis === "vertical" ? [
+  const allowedEdges = useMemo2(() => allowedEdgesProp || (axis === "vertical" ? [
     "top",
     "bottom"
   ] : [
@@ -1197,7 +1155,7 @@ var Tile = /* @__PURE__ */ forwardRef4(({ className, classNames, children, asChi
     allowedEdgesProp,
     axis
   ]);
-  const data = useMemo3(() => ({
+  const data = useMemo2(() => ({
     type: "tile",
     id,
     containerId,
@@ -1336,7 +1294,7 @@ var Placeholder = ({ classNames, children, asChild, axis = "vertical", location
   const rootRef = useRef4(null);
   const Root2 = asChild ? Slot3 : Primitive2.div;
   const { id: containerId, eventHandler, scrolling, activeLocation, setActiveLocation } = useContainerContext(Placeholder.displayName);
-  const data = useMemo3(() => ({
+  const data = useMemo2(() => ({
     type: "placeholder",
     containerId,
     location
@@ -1394,7 +1352,6 @@ DropIndicator.displayName = "MosaicDropIndicator";
 var Mosaic = {
   Root,
   Container,
-  ContainerInfo,
   Tile,
   Placeholder,
   DropIndicator,
@@ -1404,6 +1361,29 @@ var Mosaic = {
   VirtualStack
 };
 
+// src/hooks/useVisibleItems.ts
+import { useMemo as useMemo3 } from "react";
+var useVisibleItems = ({ id, items, dragging, getId }) => {
+  const visibleItems = useMemo3(() => {
+    if (!items || !dragging || id !== dragging.containerId) {
+      return items ?? [];
+    }
+    const idx = items.findIndex((item) => getId(item) === dragging.id);
+    if (idx === -1) {
+      return items;
+    }
+    const visibleItems2 = items.slice();
+    visibleItems2.splice(idx, 1);
+    return visibleItems2;
+  }, [
+    id,
+    items,
+    dragging,
+    getId
+  ]);
+  return visibleItems;
+};
+
 // src/components/Stack/Stack.tsx
 var __dxlog_file2 = "/__w/dxos/dxos/packages/ui/react-ui-mosaic/src/components/Stack/Stack.tsx";
 var StackInner = /* @__PURE__ */ forwardRef5(({ className, classNames, role = "list", axis = "vertical", draggable: draggable2 = true, items, getId, Tile: Tile2, debug, ...props }, forwardedRef) => {
@@ -1540,8 +1520,7 @@ export {
   VirtualStack,
   useRootContext,
   useContainerContext,
-  useContainerDebug,
   useTileContext,
   Mosaic
 };
-//# sourceMappingURL=chunk-FS5LRPMY.mjs.map
+//# sourceMappingURL=chunk-QKMUWO5X.mjs.map