@deadragdoll/reactnu 0.1.73 → 0.1.75

package/dist/index.cjs

@@ -1061,226 +1061,167 @@ var import_react6 = require("react");
 
 // src/components/DragDrop/NuDragDropProvider.tsx
 var import_react5 = require("react");
-
-// src/components/_shared/themePortal.ts
-function getThemePortalStyle(anchor) {
-  if (typeof window === "undefined") {
-    return void 0;
-  }
-  const themeRoot = anchor?.closest(".nu-theme-root");
-  if (!themeRoot) {
-    return void 0;
-  }
-  const computed = window.getComputedStyle(themeRoot);
-  const style = {
-    color: computed.color,
-    fontFamily: computed.fontFamily,
-    fontSize: computed.fontSize
-  };
-  for (const propertyName of computed) {
-    if (propertyName.startsWith("--nu-")) {
-      style[propertyName] = computed.getPropertyValue(propertyName).trim();
-    }
-  }
-  return style;
-}
-
-// src/components/DragDrop/NuDragDropProvider.tsx
+var import_react_dnd = require("react-dnd");
+var import_react_dnd_html5_backend = require("react-dnd-html5-backend");
 var import_jsx_runtime10 = require("react/jsx-runtime");
-var DRAG_THRESHOLD = 3;
-function createDragPreview(sourceElement) {
-  const rect = sourceElement.getBoundingClientRect();
-  const preview = sourceElement.cloneNode(true);
-  preview.removeAttribute("id");
-  preview.setAttribute("aria-hidden", "true");
-  Object.assign(preview.style, {
-    height: `${rect.height}px`,
-    left: `${rect.left}px`,
-    margin: "0",
-    opacity: "0.85",
-    pointerEvents: "none",
-    position: "fixed",
-    top: `${rect.top}px`,
-    width: `${rect.width}px`,
-    zIndex: "2147483647"
-  });
-  const themeStyle = getThemePortalStyle(sourceElement);
-  Object.entries(themeStyle ?? {}).forEach(([property, value]) => {
-    if (value !== void 0) {
-      preview.style.setProperty(property, String(value));
-    }
-  });
-  document.body.append(preview);
-  return preview;
-}
-function createController() {
-  const targets = /* @__PURE__ */ new Map();
-  let activeDrag = null;
-  function findTarget(clientX, clientY) {
-    const elementAtPoint = document.elementFromPoint(clientX, clientY);
-    let candidate = elementAtPoint;
-    while (candidate) {
-      const target = targets.get(candidate);
-      if (target) {
-        return target;
-      }
-      candidate = candidate.parentElement;
-    }
-    return Array.from(targets.values()).reverse().find((target) => {
-      const rect = target.element.getBoundingClientRect();
-      return clientX >= rect.left && clientX <= rect.right && clientY >= rect.top && clientY <= rect.bottom;
-    });
-  }
-  function clearActiveDrag() {
-    activeDrag?.preview.remove();
-    activeDrag = null;
-  }
+var NU_DRAG_ITEM_TYPE = "reactnu-shared-item";
+function getDropContext(item, element, type, clientOffset) {
   return {
-    beginDrag(item, sourceElement, sourceType) {
-      clearActiveDrag();
-      activeDrag = {
-        item,
-        preview: createDragPreview(sourceElement),
-        sourceElement,
-        sourceType
-      };
-    },
-    cancelDrag: clearActiveDrag,
-    dropAt(clientX, clientY) {
-      const currentDrag = activeDrag;
-      if (!currentDrag) {
-        return false;
-      }
-      const target = findTarget(clientX, clientY);
-      clearActiveDrag();
-      if (!target || target.element === currentDrag.sourceElement) {
-        return false;
-      }
-      if (target.accepts?.(currentDrag.item) === false) {
-        return false;
-      }
-      return target.onDrop(currentDrag.item, {
-        clientX,
-        clientY,
-        source: {
-          element: currentDrag.sourceElement,
-          type: currentDrag.sourceType
-        },
-        target: { element: target.element, type: target.type }
-      }) !== false;
-    },
-    moveDrag(clientX, clientY) {
-      const currentDrag = activeDrag;
-      if (!currentDrag) {
-        return;
-      }
-      const rect = currentDrag.sourceElement.getBoundingClientRect();
-      currentDrag.preview.style.left = `${Math.round(clientX - rect.width / 2)}px`;
-      currentDrag.preview.style.top = `${Math.round(clientY - rect.height / 2)}px`;
+    clientX: clientOffset?.x ?? 0,
+    clientY: clientOffset?.y ?? 0,
+    source: {
+      element: item.sourceElement ?? element,
+      type: item.sourceType
     },
-    registerTarget(element, options) {
-      targets.set(element, { ...options, element });
-      return () => targets.delete(element);
-    }
+    target: { element, type }
   };
 }
-var fallbackController = createController();
-var NuDragDropContext = (0, import_react5.createContext)(null);
+function NuDragPreviewLayer() {
+  const { isDragging, item, offset } = (0, import_react_dnd.useDragLayer)((monitor) => ({
+    isDragging: monitor.isDragging(),
+    item: monitor.getItem() ?? null,
+    offset: monitor.getClientOffset()
+  }));
+  if (!isDragging || !item?.preview || !offset) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    "div",
+    {
+      "aria-hidden": "true",
+      style: {
+        left: 0,
+        pointerEvents: "none",
+        position: "fixed",
+        top: 0,
+        transform: `translate(${Math.round(offset.x + 12)}px, ${Math.round(offset.y + 12)}px)`,
+        zIndex: 2147483647
+      },
+      children: item.preview
+    }
+  );
+}
 function NuDragDropProvider({ children }) {
-  const controller = (0, import_react5.useMemo)(() => createController(), []);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(NuDragDropContext.Provider, { value: controller, children });
+  const { dragDropManager } = (0, import_react5.useContext)(import_react_dnd.DndContext);
+  if (dragDropManager) {
+    return children;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_dnd.DndProvider, { backend: import_react_dnd_html5_backend.HTML5Backend, children: [
+    children,
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(NuDragPreviewLayer, {})
+  ] });
 }
 function useNuDragDrop() {
-  return (0, import_react5.useContext)(NuDragDropContext) ?? fallbackController;
+  return (0, import_react_dnd.useDragDropManager)();
 }
 function useNuDropTarget(element, options) {
-  const controller = useNuDragDrop();
+  const [{ canDrop, isOver, item }, drop] = (0, import_react_dnd.useDrop)(
+    () => ({
+      accept: NU_DRAG_ITEM_TYPE,
+      canDrop: (dragItem) => options ? options.accepts?.(dragItem) !== false : false,
+      collect: (monitor) => ({
+        canDrop: monitor.canDrop(),
+        isOver: monitor.isOver({ shallow: true }),
+        item: monitor.isOver({ shallow: true }) ? monitor.getItem() ?? null : null
+      }),
+      drop: (dragItem, monitor) => {
+        if (!options || monitor.didDrop()) {
+          return void 0;
+        }
+        const result = options.onDrop(
+          dragItem,
+          getDropContext(
+            dragItem,
+            element ?? dragItem.sourceElement ?? document.body,
+            options.type,
+            monitor.getClientOffset()
+          )
+        );
+        if (result === false) {
+          return { accepted: false };
+        }
+        return {
+          ...typeof result === "object" && result ? result : {},
+          accepted: true
+        };
+      }
+    }),
+    [element, options]
+  );
   (0, import_react5.useEffect)(() => {
     if (!element || !options) {
+      drop(null);
       return void 0;
     }
-    return controller.registerTarget(element, options);
-  }, [controller, element, options]);
+    drop(element);
+    return () => {
+      drop(null);
+    };
+  }, [drop, element, options]);
+  const previousItemRef = (0, import_react5.useRef)(null);
+  (0, import_react5.useEffect)(() => {
+    const previousItem = previousItemRef.current;
+    if (isOver && item && (!previousItem || previousItem !== item)) {
+      options?.onDragEnter?.(item, canDrop);
+    } else if (!isOver && previousItem) {
+      options?.onDragLeave?.(previousItem);
+    }
+    previousItemRef.current = isOver ? item : null;
+  }, [canDrop, isOver, item, options]);
+  return { canDrop, isOver, item };
 }
 function useNuDragSource({
   disabled = false,
   getItem,
   onDropAccepted,
+  renderPreview,
   sourceType
 }) {
-  const controller = useNuDragDrop();
-  const stateRef = (0, import_react5.useRef)({
-    dragging: false,
-    pointerId: -1,
-    sourceElement: null,
-    startX: 0,
-    startY: 0
-  });
-  const state = stateRef.current;
-  function stop(event, shouldDrop) {
-    if (state.pointerId !== event.pointerId) {
-      return;
-    }
-    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
-      event.currentTarget.releasePointerCapture(event.pointerId);
-    }
-    state.pointerId = -1;
-    if (state.dragging && shouldDrop && controller.dropAt(event.clientX, event.clientY)) {
-      onDropAccepted?.();
-    } else if (state.dragging) {
-      controller.cancelDrag();
-    }
-    state.dragging = false;
-    state.sourceElement = null;
-  }
-  return {
-    onPointerCancel(event) {
-      stop(event, false);
-    },
-    onPointerDown(event) {
-      if (disabled || event.button !== 0) {
-        return;
-      }
-      if (event.target instanceof HTMLElement && event.target.closest("button, input, select, textarea, a")) {
-        return;
-      }
-      state.dragging = false;
-      state.pointerId = event.pointerId;
-      state.sourceElement = event.currentTarget;
-      state.startX = event.clientX;
-      state.startY = event.clientY;
-      event.currentTarget.setPointerCapture(event.pointerId);
-    },
-    onPointerMove(event) {
-      if (state.pointerId !== event.pointerId || !state.sourceElement) {
-        return;
-      }
-      if (!state.dragging) {
-        const distance = Math.max(
-          Math.abs(event.clientX - state.startX),
-          Math.abs(event.clientY - state.startY)
-        );
-        if (distance < DRAG_THRESHOLD) {
-          return;
-        }
+  const sourceElementRef = (0, import_react5.useRef)(null);
+  const [{ isDragging }, drag, preview] = (0, import_react_dnd.useDrag)(
+    () => ({
+      type: NU_DRAG_ITEM_TYPE,
+      canDrag: () => !disabled && Boolean(getItem()),
+      item: () => {
         const item = getItem();
         if (!item) {
-          if (event.currentTarget.hasPointerCapture(event.pointerId)) {
-            event.currentTarget.releasePointerCapture(event.pointerId);
-          }
-          state.pointerId = -1;
-          state.sourceElement = null;
-          return;
+          throw new Error("getItem must return a drag item when dragging is enabled.");
         }
-        state.dragging = true;
-        controller.beginDrag(item, state.sourceElement, sourceType);
+        return {
+          ...item,
+          preview: renderPreview?.(item),
+          sourceElement: sourceElementRef.current,
+          sourceType
+        };
+      },
+      end: (_item, monitor) => {
+        const result = monitor.getDropResult();
+        if (monitor.didDrop() && result?.accepted !== false) {
+          onDropAccepted?.(result ?? {});
+        }
+      },
+      collect: (monitor) => ({ isDragging: monitor.isDragging() })
+    }),
+    [disabled, getItem, onDropAccepted, renderPreview, sourceType]
+  );
+  const dragRef = (0, import_react5.useCallback)(
+    (element) => {
+      if (disabled) {
+        sourceElementRef.current = null;
+        drag(null);
+        return;
       }
-      controller.moveDrag(event.clientX, event.clientY);
+      sourceElementRef.current = element;
+      drag(element);
     },
-    onPointerUp(event) {
-      stop(event, true);
+    [disabled, drag]
+  );
+  (0, import_react5.useEffect)(() => {
+    if (renderPreview) {
+      preview((0, import_react_dnd_html5_backend.getEmptyImage)(), { captureDraggingState: true });
     }
-  };
+  }, [preview, renderPreview]);
+  return { dragRef, isDragging };
 }
 
 // src/components/ListBox/internals/ListBoxCheckControl.tsx
@@ -1331,6 +1272,7 @@ function ListBoxItemViewInner({
   onDoubleClick,
   onDragOut,
   onToggleCheck,
+  renderDragPreview,
   registerItemRef,
   rightCheckBox,
   uncheckedShape
@@ -1339,6 +1281,7 @@ function ListBoxItemViewInner({
     disabled: item.disabled || !getDragItem,
     getItem: () => getDragItem?.(item, group) ?? false,
     onDropAccepted: () => onDragOut?.(item, group),
+    renderPreview: renderDragPreview ? () => renderDragPreview(item, group) : void 0,
     sourceType: "listbox-item"
   });
   function handleActivate() {
@@ -1386,11 +1329,10 @@ function ListBoxItemViewInner({
       onClick: handleActivate,
       onContextMenu: onPopupMenu ? handleContextMenu : void 0,
       onDoubleClick: handleDoubleClick,
-      onPointerCancel: dragSource.onPointerCancel,
-      onPointerDown: dragSource.onPointerDown,
-      onPointerMove: dragSource.onPointerMove,
-      onPointerUp: dragSource.onPointerUp,
-      ref: (node) => registerItemRef(itemId, node),
+      ref: (node) => {
+        registerItemRef(itemId, node);
+        dragSource.dragRef(node);
+      },
       role: "option",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "nu-listbox__item-main", children: [
@@ -1416,6 +1358,7 @@ function ListBoxGroupView({
   onActivateItem,
   onDoubleClickItem,
   onItemDragOut,
+  renderDragPreview,
   onPopupMenuItem,
   onToggleItemCheck,
   registerItemRef,
@@ -1450,6 +1393,7 @@ function ListBoxGroupView({
           onActivate: onActivateItem,
           onDoubleClick: onDoubleClickItem,
           onDragOut: onItemDragOut,
+          renderDragPreview,
           onPopupMenu: onPopupMenuItem,
           onToggleCheck: onToggleItemCheck,
           registerItemRef,
@@ -1477,6 +1421,7 @@ function ListBoxInner({
   onItemDragOut,
   onItemSelect,
   onDrop,
+  renderDragPreview,
   rightCheckBox = false,
   selectedId,
   uncheckedShape = "box",
@@ -1679,6 +1624,7 @@ function ListBoxInner({
           onItemDragOut,
           onPopupMenuItem: handleItemPopupMenu,
           onToggleItemCheck: toggleItemCheck,
+          renderDragPreview,
           registerItemRef,
           resolvedActiveId,
           rightCheckBox,
@@ -1690,7 +1636,10 @@ function ListBoxInner({
     }
   );
 }
-var ListBox = (0, import_react7.forwardRef)(ListBoxInner);
+function ListBoxWithDragDrop(props, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(NuDragDropProvider, { children: ListBoxInner(props, ref) });
+}
+var ListBox = (0, import_react7.forwardRef)(ListBoxWithDragDrop);
 
 // src/components/Stack/Stack.tsx
 var import_jsx_runtime15 = require("react/jsx-runtime");
@@ -4724,6 +4673,31 @@ var import_react27 = require("react");
 // src/components/PopupMenu/PopupMenu.tsx
 var import_react24 = require("react");
 var import_react_dom2 = require("react-dom");
+
+// src/components/_shared/themePortal.ts
+function getThemePortalStyle(anchor) {
+  if (typeof window === "undefined") {
+    return void 0;
+  }
+  const themeRoot = anchor?.closest(".nu-theme-root");
+  if (!themeRoot) {
+    return void 0;
+  }
+  const computed = window.getComputedStyle(themeRoot);
+  const style = {
+    color: computed.color,
+    fontFamily: computed.fontFamily,
+    fontSize: computed.fontSize
+  };
+  for (const propertyName of computed) {
+    if (propertyName.startsWith("--nu-")) {
+      style[propertyName] = computed.getPropertyValue(propertyName).trim();
+    }
+  }
+  return style;
+}
+
+// src/components/PopupMenu/PopupMenu.tsx
 var import_jsx_runtime37 = require("react/jsx-runtime");
 function hasVisibleChildren2(item) {
   return Boolean(
@@ -4956,7 +4930,6 @@ function useNuIconGridContext() {
 
 // src/components/IconGrid/NuIconGrid.tsx
 var import_jsx_runtime38 = require("react/jsx-runtime");
-var DRAG_THRESHOLD2 = 3;
 var gridRegistrations = /* @__PURE__ */ new Map();
 function clamp2(value, minimum, maximum) {
   return Math.min(Math.max(value, minimum), maximum);
@@ -4967,23 +4940,6 @@ function resolveIconContextMenuItems(source, icon) {
 function resolveGridContextMenuItems(source, manager) {
   return typeof source === "function" ? source(manager) : source ?? [];
 }
-function findGridRegistrationAtPoint(clientX, clientY) {
-  const target = document.elementFromPoint(clientX, clientY);
-  const gridElement = target?.closest(".nu-icon-grid");
-  if (gridElement) {
-    return gridRegistrations.get(gridElement);
-  }
-  if (target?.closest(".nu-window")) {
-    return void 0;
-  }
-  return Array.from(gridRegistrations.values()).reverse().find((registration) => {
-    if (!registration.dropTarget) {
-      return false;
-    }
-    const rect = registration.element.getBoundingClientRect();
-    return clientX >= rect.left && clientX <= rect.right && clientY >= rect.top && clientY <= rect.bottom;
-  });
-}
 function getTransferredPosition(targetGrid, iconElement, clientX, clientY) {
   const targetRect = targetGrid.getBoundingClientRect();
   const iconRect = iconElement.getBoundingClientRect();
@@ -5005,149 +4961,31 @@ function getTransferredPosition(targetGrid, iconElement, clientX, clientY) {
   };
 }
 function NuIconGridItem({
-  gridElement,
   icon,
-  onDragOut,
-  onIconMoveOut
+  onDragOut
 }) {
   const manager = useNuIconGridContext();
-  const dragDrop = useNuDragDrop();
   const contextMenu = usePopupMenu();
-  const dragStartRef = (0, import_react27.useRef)(void 0);
-  const isDraggingRef = (0, import_react27.useRef)(false);
-  const [isDragging, setIsDragging] = (0, import_react27.useState)(false);
-  const suppressClickRef = (0, import_react27.useRef)(false);
-  const latestPositionRef = (0, import_react27.useRef)(icon.position);
   const contextMenuItems = resolveIconContextMenuItems(
     icon.contextMenuItems,
     icon
   );
-  function handlePointerDown(event) {
-    if (event.button !== 0 || icon.disabled) {
-      return;
-    }
-    manager.selectIcon(icon.id);
-    latestPositionRef.current = icon.position;
-    isDraggingRef.current = false;
-    dragStartRef.current = {
-      clientX: event.clientX,
-      clientY: event.clientY,
-      pointerId: event.pointerId,
-      position: icon.position
-    };
-    event.currentTarget.setPointerCapture(event.pointerId);
-  }
-  function handlePointerMove(event) {
-    const dragStart = dragStartRef.current;
-    if (!dragStart || dragStart.pointerId !== event.pointerId || !gridElement) {
-      return;
-    }
-    const deltaX = event.clientX - dragStart.clientX;
-    const deltaY = event.clientY - dragStart.clientY;
-    if (!isDraggingRef.current && Math.max(Math.abs(deltaX), Math.abs(deltaY)) < DRAG_THRESHOLD2) {
-      return;
-    }
-    if (!isDraggingRef.current) {
-      isDraggingRef.current = true;
-      setIsDragging(true);
-      dragDrop.beginDrag(
-        { data: icon, id: icon.id, type: "icon" },
-        event.currentTarget,
-        "icon-grid"
-      );
-    }
-    dragDrop.moveDrag(event.clientX, event.clientY);
-    const gridRect = gridElement.getBoundingClientRect();
-    const iconRect = event.currentTarget.getBoundingClientRect();
-    const position = {
-      x: Math.round(
-        clamp2(
-          dragStart.position.x + deltaX,
-          0,
-          Math.max(0, gridRect.width - iconRect.width)
-        )
-      ),
-      y: Math.round(
-        clamp2(
-          dragStart.position.y + deltaY,
-          0,
-          Math.max(0, gridRect.height - iconRect.height)
-        )
-      )
-    };
-    latestPositionRef.current = position;
-  }
-  function finishDragging(event) {
-    const dragStart = dragStartRef.current;
-    if (!dragStart || dragStart.pointerId !== event.pointerId) {
-      return;
-    }
-    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
-      event.currentTarget.releasePointerCapture(event.pointerId);
-    }
-    dragStartRef.current = void 0;
-    if (!isDraggingRef.current) {
-      return;
-    }
-    suppressClickRef.current = true;
-    isDraggingRef.current = false;
-    setIsDragging(false);
-    if (event.type === "pointercancel" || !gridElement) {
-      dragDrop.cancelDrag();
-      return;
-    }
-    if (dragDrop.dropAt(event.clientX, event.clientY)) {
-      manager.removeIcon(icon.id);
-      onDragOut?.({ data: icon, id: icon.id, type: "icon" });
-      return;
-    }
-    const targetRegistration = findGridRegistrationAtPoint(
-      event.clientX,
-      event.clientY
-    );
-    if (!targetRegistration) {
-      return;
-    }
-    if (targetRegistration.element === gridElement) {
-      manager.moveIcon(icon.id, latestPositionRef.current);
-      icon.onPositionChange?.(latestPositionRef.current, {
-        ...icon,
-        position: latestPositionRef.current
-      });
-      return;
-    }
-    if (!targetRegistration.manager.icons.some(
-      (targetIcon) => targetIcon.id === icon.id
-    )) {
-      const position = getTransferredPosition(
-        targetRegistration.element,
-        event.currentTarget,
-        event.clientX,
-        event.clientY
-      );
-      const transferredIcon = { ...icon, position };
-      const context = {
-        position,
-        source: manager,
-        sourceGrid: gridElement,
-        target: targetRegistration.manager,
-        targetGrid: targetRegistration.element
-      };
-      if (targetRegistration.accepts?.(transferredIcon) !== false && targetRegistration.onIconDrop?.(transferredIcon, context) !== false) {
-        targetRegistration.manager.addIcon(transferredIcon);
-        targetRegistration.manager.selectIcon(transferredIcon.id);
-        manager.removeIcon(icon.id);
-        onIconMoveOut?.(transferredIcon, context);
+  const dragSource = useNuDragSource({
+    disabled: icon.disabled,
+    getItem: () => ({ data: icon, id: icon.id, type: "icon" }),
+    onDropAccepted: (result) => {
+      if (result.targetType === "icon-grid") {
         return;
       }
-    }
-  }
+      const dragItem = { data: icon, id: icon.id, type: "icon" };
+      const shouldMove = result.action !== "copy" && onDragOut?.(dragItem, result) !== false;
+      if (shouldMove) {
+        manager.removeIcon(icon.id);
+      }
+    },
+    sourceType: "icon-grid"
+  });
   function handleClick(event) {
-    if (suppressClickRef.current) {
-      suppressClickRef.current = false;
-      event.preventDefault();
-      return;
-    }
     manager.selectIcon(icon.id);
     icon.onClick?.(event);
   }
@@ -5175,17 +5013,14 @@ function NuIconGridItem({
       {
         "aria-haspopup": contextMenuItems.length > 0 ? "menu" : void 0,
         className: "nu-icon-grid__icon",
-        "data-dragging": isDragging || void 0,
+        "data-dragging": dragSource.isDragging || void 0,
         "data-selected": manager.selectedIconId === icon.id || void 0,
         disabled: icon.disabled,
         onClick: handleClick,
         onContextMenu: handleContextMenu,
         onDoubleClick: icon.onDoubleClick,
         onKeyDown: handleKeyDown,
-        onPointerDown: handlePointerDown,
-        onPointerMove: handlePointerMove,
-        onPointerUp: finishDragging,
-        onPointerCancel: finishDragging,
+        ref: dragSource.dragRef,
         style: { left: icon.position.x, top: icon.position.y },
         type: "button",
         children: [
@@ -5205,7 +5040,7 @@ function NuIconGridItem({
     )
   ] });
 }
-function NuIconGrid({
+function NuIconGridContent({
   accepts,
   acceptsDrop,
   className,
@@ -5230,15 +5065,89 @@ function NuIconGrid({
     () => resolveGridContextMenuItems(contextMenuItemsSource, manager),
     [contextMenuItemsSource, manager]
   );
-  const sharedDropTargetOptions = (0, import_react27.useMemo)(
-    () => onDrop ? {
-      accepts: (item) => item.type !== "icon" && acceptsDrop?.(item) !== false,
-      onDrop,
+  const sharedDropTargetOptions = (0, import_react27.useMemo)(() => {
+    if (!gridElement) {
+      return void 0;
+    }
+    return {
+      accepts: (item) => {
+        if (item.type === "icon") {
+          return accepts?.(item.data) !== false;
+        }
+        return Boolean(onDrop) && acceptsDrop?.(item) !== false;
+      },
+      onDrop: (item, context) => {
+        if (item.type !== "icon") {
+          return onDrop?.(item, context) ?? false;
+        }
+        const sourceGridElement = context.source.element.closest(
+          ".nu-icon-grid"
+        );
+        const sourceRegistration = sourceGridElement ? gridRegistrations.get(sourceGridElement) : void 0;
+        if (!sourceRegistration) {
+          return false;
+        }
+        const sourceIcon = item.data;
+        const position = getTransferredPosition(
+          gridElement,
+          context.source.element,
+          context.clientX,
+          context.clientY
+        );
+        if (sourceRegistration.element === gridElement) {
+          manager.moveIcon(sourceIcon.id, position);
+          sourceIcon.onPositionChange?.(position, {
+            ...sourceIcon,
+            position
+          });
+          return { action: "move", targetType: "icon-grid" };
+        }
+        if (manager.icons.some((targetIcon) => targetIcon.id === sourceIcon.id)) {
+          return false;
+        }
+        const transferredIcon = { ...sourceIcon, position };
+        const dropContext = {
+          position,
+          source: sourceRegistration.manager,
+          sourceGrid: sourceRegistration.element,
+          target: manager,
+          targetGrid: gridElement
+        };
+        if (onIconDrop?.(transferredIcon, dropContext) === false) {
+          return false;
+        }
+        manager.addIcon(transferredIcon);
+        manager.selectIcon(transferredIcon.id);
+        sourceRegistration.manager.removeIcon(sourceIcon.id);
+        sourceRegistration.onIconMoveOut?.(transferredIcon, dropContext);
+        return { action: "move", targetType: "icon-grid" };
+      },
       type: "icon-grid"
-    } : void 0,
-    [acceptsDrop, onDrop]
-  );
+    };
+  }, [accepts, acceptsDrop, gridElement, manager, onDrop, onIconDrop]);
   useNuDropTarget(gridElement, sharedDropTargetOptions);
+  const backgroundDropTargetOptions = (0, import_react27.useMemo)(() => {
+    if (!dropTarget || !gridElement || !sharedDropTargetOptions) {
+      return void 0;
+    }
+    return {
+      ...sharedDropTargetOptions,
+      onDrop: (item, context) => {
+        const rect = gridElement.getBoundingClientRect();
+        if (context.clientX < rect.left || context.clientX > rect.right || context.clientY < rect.top || context.clientY > rect.bottom) {
+          return false;
+        }
+        return sharedDropTargetOptions.onDrop(item, {
+          ...context,
+          target: { element: gridElement, type: "icon-grid" }
+        });
+      }
+    };
+  }, [dropTarget, gridElement, sharedDropTargetOptions]);
+  useNuDropTarget(
+    dropTarget && typeof document !== "undefined" ? document.body : null,
+    backgroundDropTargetOptions
+  );
   (0, import_react27.useLayoutEffect)(() => {
     if (!gridElement) {
       return;
@@ -5265,16 +5174,15 @@ function NuIconGrid({
       return;
     }
     gridRegistrations.set(gridElement, {
-      accepts,
-      dropTarget,
       element: gridElement,
       manager,
-      onIconDrop
+      onIconDrop,
+      onIconMoveOut
     });
     return () => {
       gridRegistrations.delete(gridElement);
     };
-  }, [accepts, dropTarget, gridElement, manager, onIconDrop]);
+  }, [gridElement, manager, onIconDrop, onIconMoveOut]);
   function handleContextMenu(event) {
     onContextMenu?.(event);
     if (event.defaultPrevented || contextMenuItems.length === 0) {
@@ -5290,6 +5198,7 @@ function NuIconGrid({
       ...props,
       "aria-label": props["aria-label"] ?? "Application icons",
       className: ["nu-icon-grid", className].filter(Boolean).join(" "),
+      "data-drop-target": dropTarget || void 0,
       onContextMenu: handleContextMenu,
       onPointerDown: (event) => {
         onPointerDown?.(event);
@@ -5306,10 +5215,8 @@ function NuIconGrid({
         manager.icons.map((icon) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           NuIconGridItem,
           {
-            gridElement,
             icon,
-            onDragOut,
-            onIconMoveOut
+            onDragOut
           },
           icon.id
         )),
@@ -5326,6 +5233,9 @@ function NuIconGrid({
     }
   );
 }
+function NuIconGrid(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(NuDragDropProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(NuIconGridContent, { ...props }) });
+}
 
 // src/components/IconGrid/NuIconProvider.tsx
 var import_react28 = require("react");
@@ -6212,16 +6122,26 @@ function ListViewRowInner({
   isActive,
   isChecked,
   isSelected,
+  getDragItem,
   onActivate,
   onDoubleClick,
+  onDragOut,
   onToggleCheck,
   registerRowRef,
+  renderDragPreview,
   row,
   showCheckBox,
   templateColumns,
   uncheckedShape
 }) {
   const rowId = row.id;
+  const dragSource = useNuDragSource({
+    disabled: row.disabled || !getDragItem,
+    getItem: () => getDragItem?.(row) ?? false,
+    onDropAccepted: () => onDragOut?.(row),
+    renderPreview: renderDragPreview ? () => renderDragPreview(row) : void 0,
+    sourceType: "list-view-row"
+  });
   function handleActivate() {
     if (!row.disabled) {
       onActivate(rowId);
@@ -6252,7 +6172,10 @@ function ListViewRowInner({
       id: rowId,
       onClick: handleActivate,
       onDoubleClick: handleDoubleClick,
-      ref: (node) => registerRowRef(rowId, node),
+      ref: (node) => {
+        registerRowRef(rowId, node);
+        dragSource.dragRef(node);
+      },
       role: "row",
       style: {
         "--nu-list-view-columns": templateColumns
@@ -6289,6 +6212,7 @@ var ListViewRow = (0, import_react32.memo)(ListViewRowInner);
 // src/components/ListView/ListView.tsx
 var import_jsx_runtime45 = require("react/jsx-runtime");
 function ListViewInner({
+  acceptsDrop,
   activeRowId: activeRowIdProp,
   checkedIds,
   className,
@@ -6296,16 +6220,21 @@ function ListViewInner({
   data,
   defaultActiveRowId,
   emptyText = "No rows",
+  getDragItem,
   onActiveRowChange,
   onRowCheckChange,
   onRowDoubleClick,
+  onRowDragOut,
   onRowSelect,
+  onDrop,
+  renderDragPreview,
   selectedId,
   showCheckBox = false,
   uncheckedShape = "box",
   ...props
 }, ref) {
   const rootRef = (0, import_react33.useRef)(null);
+  const [rootElement, setRootElement] = (0, import_react33.useState)(null);
   const rowRefs = (0, import_react33.useRef)({});
   const selectableRows = (0, import_react33.useMemo)(
     () => data.filter((row) => !row.disabled),
@@ -6324,6 +6253,15 @@ function ListViewInner({
     );
     return [checkboxColumn, ...dataColumns].filter(Boolean).join(" ");
   }, [columns, showCheckBox]);
+  const dropTargetOptions = (0, import_react33.useMemo)(
+    () => onDrop ? { accepts: acceptsDrop, onDrop, type: "list-view" } : void 0,
+    [acceptsDrop, onDrop]
+  );
+  useNuDropTarget(rootElement, dropTargetOptions);
+  const setRootRef = (0, import_react33.useCallback)((node) => {
+    rootRef.current = node;
+    setRootElement(node);
+  }, []);
   (0, import_react33.useEffect)(() => {
     if (!resolvedActiveRowId) {
       return;
@@ -6462,7 +6400,7 @@ function ListViewInner({
       "aria-activedescendant": resolvedActiveRowId ?? void 0,
       className: ["nu-list-view", className].filter(Boolean).join(" "),
       onKeyDown: handleKeyDown,
-      ref: rootRef,
+      ref: setRootRef,
       role: "grid",
       tabIndex: 0,
       children: [
@@ -6496,13 +6434,16 @@ function ListViewInner({
           ListViewRow,
           {
             columns,
+            getDragItem,
             isActive: row.id === resolvedActiveRowId,
             isChecked: isRowChecked(row),
             isSelected: row.id === selectedId,
             onActivate: activateRowId,
             onDoubleClick: onRowDoubleClick,
+            onDragOut: onRowDragOut,
             onToggleCheck: toggleRowCheck,
             registerRowRef,
+            renderDragPreview,
             row,
             showCheckBox,
             templateColumns,
@@ -6514,7 +6455,10 @@ function ListViewInner({
     }
   );
 }
-var ListView = (0, import_react33.forwardRef)(ListViewInner);
+function ListViewWithDragDrop(props, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(NuDragDropProvider, { children: ListViewInner(props, ref) });
+}
+var ListView = (0, import_react33.forwardRef)(ListViewWithDragDrop);
 
 // src/components/MaskedField/MaskedField.tsx
 var import_react34 = require("react");
@@ -9522,6 +9466,7 @@ function TreeListViewRowInner({
   onActivateItem,
   onDoubleClickItem,
   onItemDragOut,
+  renderDragPreview,
   onPopupMenuItem,
   onToggleItemCheck,
   onToggleItemExpanded,
@@ -9553,6 +9498,7 @@ function TreeListViewRowInner({
     disabled: item.disabled || !getDragItem,
     getItem: () => getDragItem?.(item, dragContext) ?? false,
     onDropAccepted: () => onItemDragOut?.(item, dragContext),
+    renderPreview: renderDragPreview ? () => renderDragPreview(item, dragContext) : void 0,
     sourceType: "tree-list-item"
   });
   function handleActivate() {
@@ -9619,11 +9565,10 @@ function TreeListViewRowInner({
         onClick: handleActivate,
         onContextMenu: onPopupMenuItem ? handleContextMenu : void 0,
         onDoubleClick: handleDoubleClick,
-        onPointerCancel: dragSource.onPointerCancel,
-        onPointerDown: dragSource.onPointerDown,
-        onPointerMove: dragSource.onPointerMove,
-        onPointerUp: dragSource.onPointerUp,
-        ref: (node) => registerItemRef(itemId, node),
+        ref: (node) => {
+          registerItemRef(itemId, node);
+          dragSource.dragRef(node);
+        },
         role: "row",
         style: {
           "--nu-tree-list-view-columns": templateColumns
@@ -9803,11 +9748,42 @@ var TreeListViewRow = (0, import_react46.memo)(
 
 // src/components/TreeListView/TreeListView.tsx
 var import_jsx_runtime63 = require("react/jsx-runtime");
+function getColumnStorageKey(columnStoreKey) {
+  const normalizedKey = columnStoreKey?.trim();
+  return normalizedKey ? `reactnu.${normalizedKey}` : null;
+}
+function readStoredColumnWidths(storageKey, columns) {
+  if (!storageKey || typeof window === "undefined") {
+    return {};
+  }
+  try {
+    const rawValue = window.localStorage.getItem(storageKey);
+    if (!rawValue) {
+      return {};
+    }
+    const parsedValue = JSON.parse(rawValue);
+    if (!parsedValue || typeof parsedValue !== "object") {
+      return {};
+    }
+    return Object.fromEntries(
+      columns.flatMap((column) => {
+        const width = parsedValue[column.id];
+        if (typeof width !== "number" || !Number.isFinite(width)) {
+          return [];
+        }
+        return [[column.id, Math.max(width, column.minWidth ?? 0)]];
+      })
+    );
+  } catch {
+    return {};
+  }
+}
 function TreeListViewInner({
   acceptsDrop,
   activeItemId: activeItemIdProp,
   checkedIds,
   className,
+  columnStoreKey,
   columns,
   onPopupMenu,
   data,
@@ -9823,6 +9799,7 @@ function TreeListViewInner({
   onItemCheckChange,
   onItemDoubleClick,
   onItemDragOut,
+  renderDragPreview,
   onItemSelect,
   onDrop,
   selectedId,
@@ -9832,6 +9809,9 @@ function TreeListViewInner({
   const rootRef = (0, import_react47.useRef)(null);
   const [rootElement, setRootElement] = (0, import_react47.useState)(null);
   const treeId = (0, import_react47.useId)();
+  const storageKey = getColumnStorageKey(columnStoreKey);
+  const loadedStorageKeyRef = (0, import_react47.useRef)(storageKey);
+  const shouldPersistColumnWidthsRef = (0, import_react47.useRef)(false);
   const itemRefs = (0, import_react47.useRef)({});
   const resizeFrameRef = (0, import_react47.useRef)(null);
   const resizeStateRef = (0, import_react47.useRef)(null);
@@ -9845,7 +9825,7 @@ function TreeListViewInner({
   });
   const [uncontrolledSelectedId, setUncontrolledSelectedId] = (0, import_react47.useState)(null);
   const [autoColumnWidths, setAutoColumnWidths] = (0, import_react47.useState)({});
-  const [userColumnWidths, setUserColumnWidths] = (0, import_react47.useState)({});
+  const [userColumnWidths, setUserColumnWidths] = (0, import_react47.useState)(() => readStoredColumnWidths(storageKey, columns));
   const isActiveControlled = activeItemIdProp !== void 0;
   const resolvedExpandedIds = isExpandedControlled ? expandedIds : uncontrolledExpandedIds;
   const expandedIdSet = (0, import_react47.useMemo)(
@@ -9907,6 +9887,27 @@ function TreeListViewInner({
       block: "nearest"
     });
   }, [resolvedActiveItemId]);
+  (0, import_react47.useEffect)(() => {
+    if (loadedStorageKeyRef.current === storageKey) {
+      return;
+    }
+    loadedStorageKeyRef.current = storageKey;
+    shouldPersistColumnWidthsRef.current = false;
+    setUserColumnWidths(readStoredColumnWidths(storageKey, columns));
+  }, [columns, storageKey]);
+  (0, import_react47.useEffect)(() => {
+    if (!shouldPersistColumnWidthsRef.current) {
+      return;
+    }
+    shouldPersistColumnWidthsRef.current = false;
+    if (!storageKey || typeof window === "undefined") {
+      return;
+    }
+    try {
+      window.localStorage.setItem(storageKey, JSON.stringify(userColumnWidths));
+    } catch {
+    }
+  }, [storageKey, userColumnWidths]);
   const registerItemRef = (0, import_react47.useCallback)(
     (itemId, node) => {
       itemRefs.current[itemId] = node;
@@ -10197,9 +10198,15 @@ function TreeListViewInner({
       return;
     }
     setUserColumnWidths(
-      (currentWidths) => currentWidths[resizeState.columnId] === resizeState.nextWidth ? currentWidths : {
-        ...currentWidths,
-        [resizeState.columnId]: resizeState.nextWidth
+      (currentWidths) => {
+        if (currentWidths[resizeState.columnId] === resizeState.nextWidth) {
+          return currentWidths;
+        }
+        shouldPersistColumnWidthsRef.current = true;
+        return {
+          ...currentWidths,
+          [resizeState.columnId]: resizeState.nextWidth
+        };
       }
     );
   }
@@ -10311,6 +10318,7 @@ function TreeListViewInner({
             onActivateItem: activateEntry,
             onDoubleClickItem: onItemDoubleClick ? handleItemDoubleClick : void 0,
             onItemDragOut,
+            renderDragPreview,
             onPopupMenuItem: handleItemPopupMenu,
             onToggleItemCheck: handleItemCheckChange,
             onToggleItemExpanded: setExpandedState,
@@ -10329,7 +10337,10 @@ function TreeListViewInner({
     }
   );
 }
-var TreeListView = (0, import_react47.forwardRef)(TreeListViewInner);
+function TreeListViewWithDragDrop(props, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(NuDragDropProvider, { children: TreeListViewInner(props, ref) });
+}
+var TreeListView = (0, import_react47.forwardRef)(TreeListViewWithDragDrop);
 
 // src/theme/NuThemeProvider.tsx
 var import_react49 = require("react");