@deadragdoll/reactnu 0.1.24 → 0.1.49

package/dist/index.cjs

@@ -1024,6 +1024,7 @@ function ListBoxItemViewInner({
   item,
   itemId,
   onActivate,
+  onPopupMenu,
   onDoubleClick,
   onToggleCheck,
   registerItemRef,
@@ -1042,6 +1043,9 @@ function ListBoxItemViewInner({
       onDoubleClick?.(item, group);
     }
   }
+  function handleContextMenu(event) {
+    onPopupMenu?.(event, item, group, itemId);
+  }
   function handleToggleCheck() {
     onToggleCheck(itemId);
   }
@@ -1070,6 +1074,7 @@ function ListBoxItemViewInner({
       ].filter(Boolean).join(" "),
       id: itemId,
       onClick: handleActivate,
+      onContextMenu: onPopupMenu ? handleContextMenu : void 0,
       onDoubleClick: handleDoubleClick,
       ref: (node) => registerItemRef(itemId, node),
       role: "option",
@@ -1095,6 +1100,7 @@ function ListBoxGroupView({
   listboxId,
   onActivateItem,
   onDoubleClickItem,
+  onPopupMenuItem,
   onToggleItemCheck,
   registerItemRef,
   resolvedActiveId,
@@ -1126,6 +1132,7 @@ function ListBoxGroupView({
           itemId,
           onActivate: onActivateItem,
           onDoubleClick: onDoubleClickItem,
+          onPopupMenu: onPopupMenuItem,
           onToggleCheck: onToggleItemCheck,
           registerItemRef,
           rightCheckBox,
@@ -1144,6 +1151,7 @@ function ListBoxInner({
   data,
   checkedIds,
   emptyText = "No items",
+  onPopupMenu,
   onItemCheckChange,
   onItemDoubleClick,
   onItemSelect,
@@ -1203,6 +1211,18 @@ function ListBoxInner({
     },
     [activateItem, selectableItems]
   );
+  const handleItemPopupMenu = (0, import_react5.useCallback)(
+    (event, item, group, itemId) => {
+      if (item.disabled || !onPopupMenu) {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      activateItem(item, group, itemId);
+      onPopupMenu(event, item, group);
+    },
+    [activateItem, onPopupMenu]
+  );
   function moveActive(direction) {
     if (selectableItems.length === 0) {
       return;
@@ -1323,6 +1343,7 @@ function ListBoxInner({
           listboxId,
           onActivateItem: activateItem,
           onDoubleClickItem: onItemDoubleClick,
+          onPopupMenuItem: handleItemPopupMenu,
           onToggleItemCheck: toggleItemCheck,
           registerItemRef,
           resolvedActiveId,
@@ -1998,8 +2019,6 @@ function WindowInner({
       return;
     }
     onActivate?.();
-    event.preventDefault();
-    event.stopPropagation();
   }
   function handleTitlePointerDown(event) {
     onActivate?.();
@@ -4495,7 +4514,7 @@ function PopupMenu({
         ref: rootRef,
         style: {
           ...getThemePortalStyle(
-            anchor?.type === "element" ? anchor.element : null
+            anchor.type === "element" ? anchor.element : anchor.themeSource ?? null
           ),
           ...styleProp,
           left: 0,
@@ -4528,8 +4547,9 @@ function usePopupMenu() {
   function close() {
     setOpen(false);
   }
-  function openAtPoint(x, y) {
+  function openAtPoint(x, y, themeSource) {
     setAnchor({
+      themeSource,
       type: "point",
       x,
       y
@@ -4548,7 +4568,7 @@ function usePopupMenu() {
   }
   function openFromContextMenu(event) {
     event.preventDefault();
-    openAtPoint(event.clientX, event.clientY);
+    openAtPoint(event.clientX, event.clientY, event.currentTarget);
   }
   return {
     anchor,
@@ -4582,6 +4602,7 @@ function useNuIconGridContext() {
 // src/components/IconGrid/NuIconGrid.tsx
 var import_jsx_runtime35 = require("react/jsx-runtime");
 var DRAG_THRESHOLD = 3;
+var gridRegistrations = /* @__PURE__ */ new Map();
 function clamp2(value, minimum, maximum) {
   return Math.min(Math.max(value, minimum), maximum);
 }
@@ -4591,11 +4612,85 @@ function resolveIconContextMenuItems(source, icon) {
 function resolveGridContextMenuItems(source, manager) {
   return typeof source === "function" ? source(manager) : source ?? [];
 }
-function NuIconGridItem({ gridElement, icon }) {
+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();
+  return {
+    x: Math.round(
+      clamp2(
+        clientX - targetRect.left - iconRect.width / 2,
+        0,
+        Math.max(0, targetRect.width - iconRect.width)
+      )
+    ),
+    y: Math.round(
+      clamp2(
+        clientY - targetRect.top - iconRect.height / 2,
+        0,
+        Math.max(0, targetRect.height - iconRect.height)
+      )
+    )
+  };
+}
+function createDragPreview(iconElement) {
+  const rect = iconElement.getBoundingClientRect();
+  const preview = iconElement.cloneNode(true);
+  preview.removeAttribute("id");
+  preview.setAttribute("aria-hidden", "true");
+  preview.setAttribute("disabled", "");
+  preview.setAttribute("tabindex", "-1");
+  Object.assign(preview.style, {
+    height: `${rect.height}px`,
+    left: `${rect.left}px`,
+    margin: "0",
+    opacity: window.getComputedStyle(iconElement).getPropertyValue("--nu-icon-grid-icon-drag-preview-opacity").trim() || "0.85",
+    pointerEvents: "none",
+    position: "fixed",
+    top: `${rect.top}px`,
+    width: `${rect.width}px`,
+    zIndex: "2147483647"
+  });
+  const themeStyle = getThemePortalStyle(iconElement);
+  Object.entries(themeStyle ?? {}).forEach(([property, value]) => {
+    if (value !== void 0) {
+      preview.style.setProperty(property, String(value));
+    }
+  });
+  document.body.append(preview);
+  return preview;
+}
+function moveDragPreview(preview, iconElement, clientX, clientY) {
+  const rect = iconElement.getBoundingClientRect();
+  preview.style.left = `${Math.round(clientX - rect.width / 2)}px`;
+  preview.style.top = `${Math.round(clientY - rect.height / 2)}px`;
+}
+function NuIconGridItem({
+  gridElement,
+  icon,
+  onIconMoveOut
+}) {
   const manager = useNuIconGridContext();
   const contextMenu = usePopupMenu();
   const dragStartRef = (0, import_react25.useRef)(void 0);
   const isDraggingRef = (0, import_react25.useRef)(false);
+  const dragPreviewRef = (0, import_react25.useRef)(null);
   const [isDragging, setIsDragging] = (0, import_react25.useState)(false);
   const suppressClickRef = (0, import_react25.useRef)(false);
   const latestPositionRef = (0, import_react25.useRef)(icon.position);
@@ -4603,6 +4698,11 @@ function NuIconGridItem({ gridElement, icon }) {
     icon.contextMenuItems,
     icon
   );
+  function removeDragPreview() {
+    dragPreviewRef.current?.remove();
+    dragPreviewRef.current = null;
+  }
+  (0, import_react25.useEffect)(() => removeDragPreview, []);
   function handlePointerDown(event) {
     if (event.button !== 0 || icon.disabled) {
       return;
@@ -4628,8 +4728,19 @@ function NuIconGridItem({ gridElement, icon }) {
     if (!isDraggingRef.current && Math.max(Math.abs(deltaX), Math.abs(deltaY)) < DRAG_THRESHOLD) {
       return;
     }
-    isDraggingRef.current = true;
-    setIsDragging(true);
+    if (!isDraggingRef.current) {
+      isDraggingRef.current = true;
+      setIsDragging(true);
+      dragPreviewRef.current = createDragPreview(event.currentTarget);
+    }
+    if (dragPreviewRef.current) {
+      moveDragPreview(
+        dragPreviewRef.current,
+        event.currentTarget,
+        event.clientX,
+        event.clientY
+      );
+    }
     const gridRect = gridElement.getBoundingClientRect();
     const iconRect = event.currentTarget.getBoundingClientRect();
     const position = {
@@ -4649,7 +4760,6 @@ function NuIconGridItem({ gridElement, icon }) {
       )
     };
     latestPositionRef.current = position;
-    manager.moveIcon(icon.id, position);
   }
   function finishDragging(event) {
     const dragStart = dragStartRef.current;
@@ -4660,16 +4770,56 @@ function NuIconGridItem({ gridElement, icon }) {
       event.currentTarget.releasePointerCapture(event.pointerId);
     }
     dragStartRef.current = void 0;
+    removeDragPreview();
     if (!isDraggingRef.current) {
       return;
     }
     suppressClickRef.current = true;
     isDraggingRef.current = false;
     setIsDragging(false);
-    icon.onPositionChange?.(latestPositionRef.current, {
-      ...icon,
-      position: latestPositionRef.current
-    });
+    if (event.type === "pointercancel" || !gridElement) {
+      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);
+        return;
+      }
+    }
   }
   function handleClick(event) {
     if (suppressClickRef.current) {
@@ -4688,7 +4838,7 @@ function NuIconGridItem({ gridElement, icon }) {
       return;
     }
     event.preventDefault();
-    contextMenu.openAtPoint(event.clientX, event.clientY);
+    contextMenu.openAtPoint(event.clientX, event.clientY, event.currentTarget);
   }
   function handleKeyDown(event) {
     if (event.key !== "ContextMenu" && !(event.key === "F10" && event.shiftKey) || contextMenuItems.length === 0) {
@@ -4735,9 +4885,13 @@ function NuIconGridItem({ gridElement, icon }) {
   ] });
 }
 function NuIconGrid({
+  accepts,
   className,
   contextMenuItems: contextMenuItemsSource,
   defaultArrangeMode,
+  dropTarget = false,
+  onIconDrop,
+  onIconMoveOut,
   onContextMenu,
   onPointerDown,
   ...props
@@ -4773,6 +4927,21 @@ function NuIconGrid({
     resizeObserver.observe(gridElement);
     return () => resizeObserver.disconnect();
   }, [arrangeIcons, defaultArrangeMode, gridElement, setGridSize]);
+  (0, import_react25.useLayoutEffect)(() => {
+    if (!gridElement) {
+      return;
+    }
+    gridRegistrations.set(gridElement, {
+      accepts,
+      dropTarget,
+      element: gridElement,
+      manager,
+      onIconDrop
+    });
+    return () => {
+      gridRegistrations.delete(gridElement);
+    };
+  }, [accepts, dropTarget, gridElement, manager, onIconDrop]);
   function handleContextMenu(event) {
     onContextMenu?.(event);
     if (event.defaultPrevented || contextMenuItems.length === 0) {
@@ -4780,7 +4949,7 @@ function NuIconGrid({
     }
     event.preventDefault();
     manager.selectIcon(null);
-    contextMenu.openAtPoint(event.clientX, event.clientY);
+    contextMenu.openAtPoint(event.clientX, event.clientY, event.currentTarget);
   }
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
     "div",
@@ -4801,7 +4970,15 @@ function NuIconGrid({
       ref: setGridElement,
       role: "group",
       children: [
-        manager.icons.map((icon) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(NuIconGridItem, { gridElement, icon }, icon.id)),
+        manager.icons.map((icon) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          NuIconGridItem,
+          {
+            gridElement,
+            icon,
+            onIconMoveOut
+          },
+          icon.id
+        )),
         /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
           PopupMenu,
           {
@@ -9003,6 +9180,7 @@ function TreeListViewRowInner({
   item,
   onActivateItem,
   onDoubleClickItem,
+  onPopupMenuItem,
   onToggleItemCheck,
   onToggleItemExpanded,
   originOffset,
@@ -9041,6 +9219,17 @@ function TreeListViewRowInner({
     }
     onDoubleClickItem?.(item);
   }
+  function handleContextMenu(event) {
+    if (item.disabled) {
+      return;
+    }
+    onPopupMenuItem?.(event, item, {
+      depth,
+      isLeaf: !hasChildren,
+      item,
+      rowIndex
+    });
+  }
   function handleToggleExpanded(event) {
     event.stopPropagation();
     if (item.disabled || !hasChildren) {
@@ -9074,6 +9263,7 @@ function TreeListViewRowInner({
         ].filter(Boolean).join(" "),
         id: `${treeId}-${itemId}`,
         onClick: handleActivate,
+        onContextMenu: onPopupMenuItem ? handleContextMenu : void 0,
         onDoubleClick: handleDoubleClick,
         ref: (node) => registerItemRef(itemId, node),
         role: "row",
@@ -9222,6 +9412,7 @@ function TreeListViewRowInner({
         item: child,
         onActivateItem,
         onDoubleClickItem,
+        onPopupMenuItem,
         onToggleItemCheck,
         onToggleItemExpanded,
         originOffset: originOffset + leadOffset,
@@ -9243,7 +9434,7 @@ function areTreeListViewRowPropsEqual(previousProps, nextProps) {
   return !didActivePathChange && !didSelectedPathChange && previousProps.checkedIds === nextProps.checkedIds && previousProps.columns === nextProps.columns && previousProps.depth === nextProps.depth && previousProps.expandedIdSet === nextProps.expandedIdSet && previousProps.getCellContent === nextProps.getCellContent && areTreeListGuideArraysEqual(previousProps.guideMask, nextProps.guideMask) && areTreeListGuideArraysEqual(
     previousProps.guideOffsets,
     nextProps.guideOffsets
-  ) && previousProps.hasNextSibling === nextProps.hasNextSibling && previousProps.item === nextProps.item && previousProps.onActivateItem === nextProps.onActivateItem && previousProps.onDoubleClickItem === nextProps.onDoubleClickItem && previousProps.onToggleItemCheck === nextProps.onToggleItemCheck && previousProps.onToggleItemExpanded === nextProps.onToggleItemExpanded && previousProps.originOffset === nextProps.originOffset && previousProps.registerItemRef === nextProps.registerItemRef && previousProps.rowIndexMap === nextProps.rowIndexMap && previousProps.templateColumns === nextProps.templateColumns && previousProps.treeColumnId === nextProps.treeColumnId && previousProps.treeId === nextProps.treeId && previousProps.uncheckedShape === nextProps.uncheckedShape;
+  ) && previousProps.hasNextSibling === nextProps.hasNextSibling && previousProps.item === nextProps.item && previousProps.onActivateItem === nextProps.onActivateItem && previousProps.onDoubleClickItem === nextProps.onDoubleClickItem && previousProps.onPopupMenuItem === nextProps.onPopupMenuItem && previousProps.onToggleItemCheck === nextProps.onToggleItemCheck && previousProps.onToggleItemExpanded === nextProps.onToggleItemExpanded && previousProps.originOffset === nextProps.originOffset && previousProps.registerItemRef === nextProps.registerItemRef && previousProps.rowIndexMap === nextProps.rowIndexMap && previousProps.templateColumns === nextProps.templateColumns && previousProps.treeColumnId === nextProps.treeColumnId && previousProps.treeId === nextProps.treeId && previousProps.uncheckedShape === nextProps.uncheckedShape;
 }
 var TreeListViewRow = (0, import_react44.memo)(
   TreeListViewRowInner,
@@ -9257,6 +9448,7 @@ function TreeListViewInner({
   checkedIds,
   className,
   columns,
+  onPopupMenu,
   data,
   dataVersion,
   defaultActiveItemId,
@@ -9426,6 +9618,18 @@ function TreeListViewInner({
     },
     [onItemSelect, selectedId, updateActiveItem]
   );
+  const handleItemPopupMenu = (0, import_react45.useCallback)(
+    (event, item, context) => {
+      if (item.disabled || !onPopupMenu) {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      activateEntry(item, item.id);
+      onPopupMenu(event, item, context);
+    },
+    [activateEntry, onPopupMenu]
+  );
   const activateResolvedItem = (0, import_react45.useCallback)(
     (itemId) => {
       if (!itemId) {
@@ -9731,6 +9935,7 @@ function TreeListViewInner({
             item,
             onActivateItem: activateEntry,
             onDoubleClickItem: onItemDoubleClick ? handleItemDoubleClick : void 0,
+            onPopupMenuItem: handleItemPopupMenu,
             onToggleItemCheck: handleItemCheckChange,
             onToggleItemExpanded: setExpandedState,
             originOffset: 0,
@@ -9767,10 +9972,12 @@ var classicTheme = {
     panelBackground: "#6262e3",
     panelInsetBackground: "#6262e3",
     titleBackground: "#ffffff",
+    menuBackground: "#ffffff",
     titleText: "#1f36bc",
     textPrimary: "#ffffff",
     textMuted: "#dfe3ff",
     textInverse: "#000000",
+    mainMenuText: "#000000",
     textAccent: "#ffff55",
     textHotkey: "#ff5555",
     buttonFace: "#ffffff",
@@ -9803,10 +10010,12 @@ var amberTheme = {
     panelBackground: "#4b2b00",
     panelInsetBackground: "#382000",
     titleBackground: "#ffd28f",
+    menuBackground: "#ffd28f",
     titleText: "#4b2b00",
     textPrimary: "#ffd28f",
     textMuted: "#d6b57a",
     textInverse: "#201000",
+    mainMenuText: "#201000",
     textAccent: "#fff27a",
     textHotkey: "#ff5f00",
     buttonFace: "#ffd28f",
@@ -9839,10 +10048,12 @@ var phosphorTheme = {
     panelBackground: "#11351a",
     panelInsetBackground: "#0d2813",
     titleBackground: "#b7ffbf",
+    menuBackground: "#b7ffbf",
     titleText: "#0b2310",
     textPrimary: "#b7ffbf",
     textMuted: "#8ed39a",
     textInverse: "#061208",
+    mainMenuText: "#061208",
     textAccent: "#f7ff7a",
     textHotkey: "#ff6f6f",
     buttonFace: "#b7ffbf",
@@ -9875,10 +10086,12 @@ var midnightTheme = {
     panelBackground: "#17273b",
     panelInsetBackground: "#111e2e",
     titleBackground: "#d4dde8",
+    menuBackground: "#d4dde8",
     titleText: "#14233a",
     textPrimary: "#e6edf7",
     textMuted: "#aebdcd",
     textInverse: "#0b1220",
+    mainMenuText: "#0b1220",
     textAccent: "#ffd166",
     textHotkey: "#ff7171",
     buttonFace: "#d4dde8",
@@ -9898,11 +10111,50 @@ var midnightTheme = {
     windowModalBackdrop: "rgb(7 12 20 / 0.48)"
   }
 };
+var grayscaleTheme = {
+  name: "grayscale",
+  label: "Grayscale Monitor",
+  tokens: {
+    desktopBackground: "#808080",
+    desktopPattern: "rgb(0 0 0 / 0.3)",
+    shellBackground: "#202020",
+    appBackground: "#3f3f3f",
+    appBackgroundAlt: "#2b2b2b",
+    chromeBackground: "#727272",
+    panelBackground: "#3f3f3f",
+    panelInsetBackground: "#343434",
+    titleBackground: "#262626",
+    menuBackground: "#262626",
+    titleText: "#d0d0d0",
+    textPrimary: "#c8c8c8",
+    textMuted: "#969696",
+    textInverse: "#d0d0d0",
+    mainMenuText: "#d0d0d0",
+    textAccent: "#e0e0e0",
+    textHotkey: "#ffffff",
+    buttonFace: "#5b5b5b",
+    buttonFaceAlt: "#414141",
+    buttonDanger: "#303030",
+    buttonSuccess: "#6b6b6b",
+    buttonText: "#d0d0d0",
+    fieldBackground: "#0e0e0e",
+    fieldText: "#d8d8d8",
+    borderLight: "#c7c7c7",
+    borderDark: "#000000",
+    borderAccent: "#ffffff",
+    shadowColor: "#000000",
+    panelShadowColor: "rgb(0 0 0 / 0.5)",
+    focusColor: "#ffffff",
+    windowInactiveOverlay: "rgb(0 0 0 / 0.34)",
+    windowModalBackdrop: "rgb(0 0 0 / 0.5)"
+  }
+};
 var nuThemes = {
   classic: classicTheme,
   amber: amberTheme,
   phosphor: phosphorTheme,
-  midnight: midnightTheme
+  midnight: midnightTheme,
+  grayscale: grayscaleTheme
 };
 function isNuThemeName(value) {
   return value in nuThemes;
@@ -9921,10 +10173,12 @@ function getNuThemeStyle(theme) {
     "--nu-color-panel": theme.tokens.panelBackground,
     "--nu-color-panel-inset": theme.tokens.panelInsetBackground,
     "--nu-color-title-bg": theme.tokens.titleBackground,
+    "--nu-color-menu": theme.tokens.menuBackground,
     "--nu-color-title-text": theme.tokens.titleText,
     "--nu-text-primary": theme.tokens.textPrimary,
     "--nu-text-muted": theme.tokens.textMuted,
     "--nu-text-inverse": theme.tokens.textInverse,
+    "--nu-main-menu-text": theme.tokens.mainMenuText,
     "--nu-text-accent": theme.tokens.textAccent,
     "--nu-text-hotkey": theme.tokens.textHotkey,
     "--nu-color-button-face": theme.tokens.buttonFace,
@@ -10008,6 +10262,7 @@ function NuThemeProvider({
   onFontFamilyChange,
   onFontSizeChange,
   onThemeChange,
+  style,
   theme
 }) {
   const generatedId = (0, import_react47.useId)();
@@ -10093,7 +10348,8 @@ function NuThemeProvider({
         ...getNuThemeStyle(resolvedTheme),
         "--nu-font-body": resolvedFontFamily,
         fontFamily: resolvedFontFamily,
-        fontSize: `${resolvedFontSize}px`
+        fontSize: `${resolvedFontSize}px`,
+        ...style
       },
       children: [
         crtGlitch ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(NuCrtGlitch, { ...typeof crtGlitch === "object" ? crtGlitch : {} }) : null,