@flanksource/clicky-ui 0.3.24 → 0.3.26

package/dist/overlay/CellActions.js

@@ -1,148 +1,42 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { FloatingTree, useFloatingTree, useFloatingNodeId, useFloating, autoUpdate, offset, flip, shift, useDismiss, useRole, useListNavigation, useInteractions, FloatingNode, FloatingPortal, FloatingFocusManager, FloatingList } from "@floating-ui/react";
-import { useState, useRef, useCallback, useEffect } from "react";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useEffect } from "react";
 import { Icon } from "../data/Icon.js";
 import { cn } from "../lib/utils.js";
-import { MenuItemList } from "./DropdownMenuSubmenu.js";
-import { MENU_POPOVER_CLASS, MenuContext } from "./dropdownMenuContext.js";
-import { useFloatingZIndex, useEscapeLayer } from "./modalStack.js";
-function pointReference(x, y, contextElement) {
-  return {
-    contextElement,
-    getBoundingClientRect: () => ({
-      x,
-      y,
-      top: y,
-      left: x,
-      right: x,
-      bottom: y,
-      width: 0,
-      height: 0,
-      toJSON: () => ({})
-    })
-  };
-}
-function CellActionsRoot({
+import { ContextMenu } from "./ContextMenu.js";
+function CellActions({
   contextTarget,
   menuLabel,
   menuItems,
   children,
   className
 }) {
-  const [open, setOpen] = useState(false);
-  const [activeIndex, setActiveIndex] = useState(null);
-  const returnFocusRef = useRef(null);
-  const elementsRef = useRef([]);
-  const floatingZ = useFloatingZIndex();
-  const tree = useFloatingTree();
-  const nodeId = useFloatingNodeId();
-  const closeMenu = useCallback(() => {
-    setOpen(false);
-    queueMicrotask(() => {
-      var _a;
-      return (_a = returnFocusRef.current) == null ? void 0 : _a.focus({ preventScroll: true });
-    });
-  }, []);
-  const { refs, floatingStyles, context } = useFloating({
-    ...nodeId ? { nodeId } : {},
-    open,
-    onOpenChange: (next) => next ? setOpen(true) : closeMenu(),
-    placement: "right-start",
-    middleware: [offset(4), flip({ padding: 8 }), shift({ padding: 8 })],
-    whileElementsMounted: autoUpdate
-  });
-  const dismiss = useDismiss(context, { escapeKey: false });
-  const role = useRole(context, { role: "menu" });
-  const listNavigation = useListNavigation(context, {
-    listRef: elementsRef,
-    activeIndex,
-    onNavigate: setActiveIndex,
-    loop: true
-  });
-  const { getFloatingProps, getItemProps } = useInteractions([
-    dismiss,
-    role,
-    listNavigation
-  ]);
-  const openAt = useCallback(
-    (x, y) => {
-      if (!contextTarget || menuItems.length === 0) return;
-      const active = document.activeElement;
-      returnFocusRef.current = active instanceof HTMLElement ? active : contextTarget;
-      refs.setPositionReference(pointReference(x, y, contextTarget));
-      setActiveIndex(null);
-      setOpen(true);
-    },
-    [contextTarget, menuItems.length, refs]
-  );
   useEffect(() => {
-    if (!contextTarget || menuItems.length === 0) return;
+    if (!contextTarget) return;
     contextTarget.classList.add("group/cell-actions");
-    const onContextMenu = (event) => {
-      event.preventDefault();
-      event.stopPropagation();
-      openAt(event.clientX, event.clientY);
-    };
-    const onKeyDown = (event) => {
-      if (event.key !== "ContextMenu" && !(event.key === "F10" && event.shiftKey)) return;
-      event.preventDefault();
-      event.stopPropagation();
-      const rect = contextTarget.getBoundingClientRect();
-      openAt(rect.left + 8, rect.top + Math.min(rect.height, 24));
-    };
-    contextTarget.addEventListener("contextmenu", onContextMenu);
-    contextTarget.addEventListener("keydown", onKeyDown);
-    return () => {
-      contextTarget.classList.remove("group/cell-actions");
-      contextTarget.removeEventListener("contextmenu", onContextMenu);
-      contextTarget.removeEventListener("keydown", onKeyDown);
-    };
-  }, [contextTarget, menuItems.length, openAt]);
-  useEffect(() => {
-    if (!tree) return;
-    tree.events.on("click", closeMenu);
-    return () => tree.events.off("click", closeMenu);
-  }, [closeMenu, tree]);
-  useEscapeLayer(open, closeMenu);
-  return /* @__PURE__ */ jsxs(FloatingNode, { id: nodeId, children: [
+    return () => contextTarget.classList.remove("group/cell-actions");
+  }, [contextTarget]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       "span",
       {
-        className: cn("ms-1 inline-flex items-center gap-0.5 align-middle", className),
+        className: cn(
+          "ms-1 inline-flex items-center gap-0.5 align-middle",
+          className
+        ),
         contentEditable: false,
         children
       }
     ),
-    open && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(FloatingFocusManager, { context, modal: false, returnFocus: false, children: /* @__PURE__ */ jsx(
-      "div",
+    /* @__PURE__ */ jsx(
+      ContextMenu,
       {
-        ref: refs.setFloating,
-        role: "menu",
-        "aria-label": menuLabel,
-        style: { ...floatingStyles, zIndex: floatingZ },
-        className: MENU_POPOVER_CLASS,
-        ...getFloatingProps(),
-        children: /* @__PURE__ */ jsx(
-          MenuContext.Provider,
-          {
-            value: {
-              getItemProps,
-              activeIndex,
-              setActiveIndex,
-              setHasFocusInside: () => {
-              },
-              isOpen: open
-            },
-            children: /* @__PURE__ */ jsx(FloatingList, { elementsRef, children: /* @__PURE__ */ jsx(MenuItemList, { items: menuItems }) })
-          }
-        )
+        contextTarget,
+        menuLabel,
+        menuItems
       }
-    ) }) })
+    )
   ] });
 }
-function CellActions(props) {
-  return /* @__PURE__ */ jsx(FloatingTree, { children: /* @__PURE__ */ jsx(CellActionsRoot, { ...props }) });
-}
 function CellActionButton({
   label,
   icon,

package/dist/overlay/CellActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"CellActions.js","sources":["../../src/overlay/CellActions.tsx"],"sourcesContent":["import {\n  autoUpdate,\n  flip,\n  FloatingFocusManager,\n  FloatingList,\n  FloatingNode,\n  FloatingPortal,\n  FloatingTree,\n  offset,\n  shift,\n  useDismiss,\n  useFloating,\n  useFloatingNodeId,\n  useFloatingTree,\n  useInteractions,\n  useListNavigation,\n  useRole,\n  type VirtualElement,\n} from \"@floating-ui/react\";\nimport {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type ButtonHTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\nimport { cn } from \"../lib/utils\";\nimport type { DropdownMenuItem } from \"./DropdownMenu\";\nimport { MenuItemList } from \"./DropdownMenuSubmenu\";\nimport { MENU_POPOVER_CLASS, MenuContext } from \"./dropdownMenuContext\";\nimport { useEscapeLayer, useFloatingZIndex } from \"./modalStack\";\n\nexport type CellActionsProps = {\n  contextTarget: HTMLElement | null;\n  menuLabel: string;\n  menuItems: DropdownMenuItem[];\n  children: ReactNode;\n  className?: string;\n};\n\nexport type CellActionButtonProps = Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  \"children\" | \"onClick\"\n> & {\n  label: string;\n  icon: StaticIconComponent;\n  onSelect: () => void;\n};\n\nfunction pointReference(\n  x: number,\n  y: number,\n  contextElement: HTMLElement,\n): VirtualElement {\n  return {\n    contextElement,\n    getBoundingClientRect: () => ({\n      x,\n      y,\n      top: y,\n      left: x,\n      right: x,\n      bottom: y,\n      width: 0,\n      height: 0,\n      toJSON: () => ({}),\n    }),\n  };\n}\n\nfunction CellActionsRoot({\n  contextTarget,\n  menuLabel,\n  menuItems,\n  children,\n  className,\n}: CellActionsProps) {\n  const [open, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n  const returnFocusRef = useRef<HTMLElement | null>(null);\n  const elementsRef = useRef<Array<HTMLElement | null>>([]);\n  const floatingZ = useFloatingZIndex();\n  const tree = useFloatingTree();\n  const nodeId = useFloatingNodeId();\n\n  const closeMenu = useCallback(() => {\n    setOpen(false);\n    queueMicrotask(() => returnFocusRef.current?.focus({ preventScroll: true }));\n  }, []);\n\n  const { refs, floatingStyles, context } = useFloating<HTMLDivElement>({\n    ...(nodeId ? { nodeId } : {}),\n    open,\n    onOpenChange: (next) => (next ? setOpen(true) : closeMenu()),\n    placement: \"right-start\",\n    middleware: [offset(4), flip({ padding: 8 }), shift({ padding: 8 })],\n    whileElementsMounted: autoUpdate,\n  });\n\n  const dismiss = useDismiss(context, { escapeKey: false });\n  const role = useRole(context, { role: \"menu\" });\n  const listNavigation = useListNavigation(context, {\n    listRef: elementsRef,\n    activeIndex,\n    onNavigate: setActiveIndex,\n    loop: true,\n  });\n  const { getFloatingProps, getItemProps } = useInteractions([\n    dismiss,\n    role,\n    listNavigation,\n  ]);\n\n  const openAt = useCallback(\n    (x: number, y: number) => {\n      if (!contextTarget || menuItems.length === 0) return;\n      const active = document.activeElement;\n      returnFocusRef.current = active instanceof HTMLElement ? active : contextTarget;\n      refs.setPositionReference(pointReference(x, y, contextTarget));\n      setActiveIndex(null);\n      setOpen(true);\n    },\n    [contextTarget, menuItems.length, refs],\n  );\n\n  useEffect(() => {\n    if (!contextTarget || menuItems.length === 0) return;\n    contextTarget.classList.add(\"group/cell-actions\");\n\n    const onContextMenu = (event: MouseEvent) => {\n      event.preventDefault();\n      event.stopPropagation();\n      openAt(event.clientX, event.clientY);\n    };\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key !== \"ContextMenu\" && !(event.key === \"F10\" && event.shiftKey)) return;\n      event.preventDefault();\n      event.stopPropagation();\n      const rect = contextTarget.getBoundingClientRect();\n      openAt(rect.left + 8, rect.top + Math.min(rect.height, 24));\n    };\n\n    contextTarget.addEventListener(\"contextmenu\", onContextMenu);\n    contextTarget.addEventListener(\"keydown\", onKeyDown);\n    return () => {\n      contextTarget.classList.remove(\"group/cell-actions\");\n      contextTarget.removeEventListener(\"contextmenu\", onContextMenu);\n      contextTarget.removeEventListener(\"keydown\", onKeyDown);\n    };\n  }, [contextTarget, menuItems.length, openAt]);\n\n  useEffect(() => {\n    if (!tree) return;\n    tree.events.on(\"click\", closeMenu);\n    return () => tree.events.off(\"click\", closeMenu);\n  }, [closeMenu, tree]);\n\n  useEscapeLayer(open, closeMenu);\n\n  return (\n    <FloatingNode id={nodeId}>\n      <span\n        className={cn(\"ms-1 inline-flex items-center gap-0.5 align-middle\", className)}\n        contentEditable={false}\n      >\n        {children}\n      </span>\n      {open && (\n        <FloatingPortal>\n          <FloatingFocusManager context={context} modal={false} returnFocus={false}>\n            <div\n              ref={refs.setFloating}\n              role=\"menu\"\n              aria-label={menuLabel}\n              style={{ ...floatingStyles, zIndex: floatingZ }}\n              className={MENU_POPOVER_CLASS}\n              {...getFloatingProps()}\n            >\n              <MenuContext.Provider\n                value={{\n                  getItemProps,\n                  activeIndex,\n                  setActiveIndex,\n                  setHasFocusInside: () => {},\n                  isOpen: open,\n                }}\n              >\n                <FloatingList elementsRef={elementsRef}>\n                  <MenuItemList items={menuItems} />\n                </FloatingList>\n              </MenuContext.Provider>\n            </div>\n          </FloatingFocusManager>\n        </FloatingPortal>\n      )}\n    </FloatingNode>\n  );\n}\n\nexport function CellActions(props: CellActionsProps) {\n  return (\n    <FloatingTree>\n      <CellActionsRoot {...props} />\n    </FloatingTree>\n  );\n}\n\nexport function CellActionButton({\n  label,\n  icon,\n  onSelect,\n  className,\n  title = label,\n  onMouseDown,\n  ...props\n}: CellActionButtonProps) {\n  return (\n    <button\n      {...props}\n      type=\"button\"\n      title={title}\n      aria-label={label}\n      className={cn(\n        \"inline-flex size-5 items-center justify-center rounded-full p-1 text-muted-foreground opacity-70 transition-colors transition-opacity hover:bg-primary/10 hover:text-primary hover:opacity-100 focus-visible:bg-primary/10 focus-visible:text-primary focus-visible:opacity-100 focus-visible:outline-none group-hover/cell-actions:opacity-95\",\n        className,\n      )}\n      onMouseDown={(event) => {\n        event.preventDefault();\n        onMouseDown?.(event);\n      }}\n      onClick={(event) => {\n        event.preventDefault();\n        event.stopPropagation();\n        onSelect();\n      }}\n    >\n      <Icon icon={icon} className=\"text-sm\" />\n    </button>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"CellActions.js","sources":["../../src/overlay/CellActions.tsx"],"sourcesContent":["import { useEffect, type ButtonHTMLAttributes, type ReactNode } from \"react\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\nimport { cn } from \"../lib/utils\";\nimport type { DropdownMenuItem } from \"./DropdownMenu\";\nimport { ContextMenu } from \"./ContextMenu\";\n\nexport type CellActionsProps = {\n  contextTarget: HTMLElement | null;\n  menuLabel: string;\n  menuItems: DropdownMenuItem[];\n  children: ReactNode;\n  className?: string;\n};\n\nexport type CellActionButtonProps = Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  \"children\" | \"onClick\"\n> & {\n  label: string;\n  icon: StaticIconComponent;\n  onSelect: () => void;\n};\n\nexport function CellActions({\n  contextTarget,\n  menuLabel,\n  menuItems,\n  children,\n  className,\n}: CellActionsProps) {\n  useEffect(() => {\n    if (!contextTarget) return;\n    contextTarget.classList.add(\"group/cell-actions\");\n    return () => contextTarget.classList.remove(\"group/cell-actions\");\n  }, [contextTarget]);\n\n  return (\n    <>\n      <span\n        className={cn(\n          \"ms-1 inline-flex items-center gap-0.5 align-middle\",\n          className,\n        )}\n        contentEditable={false}\n      >\n        {children}\n      </span>\n      <ContextMenu\n        contextTarget={contextTarget}\n        menuLabel={menuLabel}\n        menuItems={menuItems}\n      />\n    </>\n  );\n}\n\nexport function CellActionButton({\n  label,\n  icon,\n  onSelect,\n  className,\n  title = label,\n  onMouseDown,\n  ...props\n}: CellActionButtonProps) {\n  return (\n    <button\n      {...props}\n      type=\"button\"\n      title={title}\n      aria-label={label}\n      className={cn(\n        \"inline-flex size-5 items-center justify-center rounded-full p-1 text-muted-foreground opacity-70 transition-colors transition-opacity hover:bg-primary/10 hover:text-primary hover:opacity-100 focus-visible:bg-primary/10 focus-visible:text-primary focus-visible:opacity-100 focus-visible:outline-none group-hover/cell-actions:opacity-95\",\n        className,\n      )}\n      onMouseDown={(event) => {\n        event.preventDefault();\n        onMouseDown?.(event);\n      }}\n      onClick={(event) => {\n        event.preventDefault();\n        event.stopPropagation();\n        onSelect();\n      }}\n    >\n      <Icon icon={icon} className=\"text-sm\" />\n    </button>\n  );\n}\n"],"names":[],"mappings":";;;;;AAuBO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAqB;AACnB,YAAU,MAAM;AACd,QAAI,CAAC,cAAe;AACpB,kBAAc,UAAU,IAAI,oBAAoB;AAChD,WAAO,MAAM,cAAc,UAAU,OAAO,oBAAoB;AAAA,EAClE,GAAG,CAAC,aAAa,CAAC;AAElB,SACE,qBAAA,UAAA,EACE,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAEF,iBAAiB;AAAA,QAEhB;AAAA,MAAA;AAAA,IAAA;AAAA,IAEH;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;AAEO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA,GAAG;AACL,GAA0B;AACxB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,MAAK;AAAA,MACL;AAAA,MACA,cAAY;AAAA,MACZ,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,aAAa,CAAC,UAAU;AACtB,cAAM,eAAA;AACN,mDAAc;AAAA,MAChB;AAAA,MACA,SAAS,CAAC,UAAU;AAClB,cAAM,eAAA;AACN,cAAM,gBAAA;AACN,iBAAA;AAAA,MACF;AAAA,MAEA,UAAA,oBAAC,MAAA,EAAK,MAAY,WAAU,UAAA,CAAU;AAAA,IAAA;AAAA,EAAA;AAG5C;"}

package/dist/overlay/ContextMenu.cjs

@@ -0,0 +1,144 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("@floating-ui/react");
+const react$1 = require("react");
+const DropdownMenuSubmenu = require("./DropdownMenuSubmenu.cjs");
+const dropdownMenuContext = require("./dropdownMenuContext.cjs");
+const modalStack = require("./modalStack.cjs");
+function pointReference(x, y, contextElement) {
+  return {
+    contextElement,
+    getBoundingClientRect: () => ({
+      x,
+      y,
+      top: y,
+      left: x,
+      right: x,
+      bottom: y,
+      width: 0,
+      height: 0,
+      toJSON: () => ({})
+    })
+  };
+}
+function ContextMenuRoot({
+  contextTarget,
+  menuLabel,
+  menuItems
+}) {
+  const [open, setOpen] = react$1.useState(false);
+  const [activeIndex, setActiveIndex] = react$1.useState(null);
+  const returnFocusRef = react$1.useRef(null);
+  const elementsRef = react$1.useRef([]);
+  const floatingZ = modalStack.useFloatingZIndex();
+  const tree = react.useFloatingTree();
+  const nodeId = react.useFloatingNodeId();
+  const closeMenu = react$1.useCallback(() => {
+    setOpen(false);
+    queueMicrotask(
+      () => {
+        var _a;
+        return (_a = returnFocusRef.current) == null ? void 0 : _a.focus({ preventScroll: true });
+      }
+    );
+  }, []);
+  const { refs, floatingStyles, context } = react.useFloating({
+    ...nodeId ? { nodeId } : {},
+    open,
+    onOpenChange: (next) => next ? setOpen(true) : closeMenu(),
+    placement: "right-start",
+    middleware: [react.offset(4), react.flip({ padding: 8 }), react.shift({ padding: 8 })],
+    whileElementsMounted: react.autoUpdate
+  });
+  const dismiss = react.useDismiss(context, { escapeKey: false });
+  const role = react.useRole(context, { role: "menu" });
+  const listNavigation = react.useListNavigation(context, {
+    listRef: elementsRef,
+    activeIndex,
+    onNavigate: setActiveIndex,
+    loop: true
+  });
+  const { getFloatingProps, getItemProps } = react.useInteractions([
+    dismiss,
+    role,
+    listNavigation
+  ]);
+  const openAt = react$1.useCallback(
+    (x, y) => {
+      if (!contextTarget || menuItems.length === 0) return;
+      const active = document.activeElement;
+      returnFocusRef.current = active instanceof HTMLElement ? active : contextTarget;
+      refs.setPositionReference(pointReference(x, y, contextTarget));
+      setActiveIndex(null);
+      setOpen(true);
+    },
+    [contextTarget, menuItems.length, refs]
+  );
+  react$1.useEffect(() => {
+    if (!contextTarget || menuItems.length === 0) return;
+    const onContextMenu = (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      openAt(event.clientX, event.clientY);
+    };
+    const onKeyDown = (event) => {
+      if (event.key !== "ContextMenu" && !(event.key === "F10" && event.shiftKey))
+        return;
+      event.preventDefault();
+      event.stopPropagation();
+      const rect = contextTarget.getBoundingClientRect();
+      openAt(rect.left + 8, rect.top + Math.min(rect.height, 24));
+    };
+    contextTarget.addEventListener("contextmenu", onContextMenu);
+    contextTarget.addEventListener("keydown", onKeyDown);
+    return () => {
+      contextTarget.removeEventListener("contextmenu", onContextMenu);
+      contextTarget.removeEventListener("keydown", onKeyDown);
+    };
+  }, [contextTarget, menuItems.length, openAt]);
+  react$1.useEffect(() => {
+    if (!tree) return;
+    tree.events.on("click", closeMenu);
+    return () => tree.events.off("click", closeMenu);
+  }, [closeMenu, tree]);
+  modalStack.useEscapeLayer(open, closeMenu);
+  return /* @__PURE__ */ jsxRuntime.jsx(react.FloatingNode, { id: nodeId, children: open && /* @__PURE__ */ jsxRuntime.jsx(react.FloatingPortal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    react.FloatingFocusManager,
+    {
+      context,
+      modal: false,
+      returnFocus: false,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref: refs.setFloating,
+          role: "menu",
+          "aria-label": menuLabel,
+          style: { ...floatingStyles, zIndex: floatingZ },
+          className: dropdownMenuContext.MENU_POPOVER_CLASS,
+          ...getFloatingProps(),
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            dropdownMenuContext.MenuContext.Provider,
+            {
+              value: {
+                getItemProps,
+                activeIndex,
+                setActiveIndex,
+                setHasFocusInside: () => {
+                },
+                isOpen: open
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(react.FloatingList, { elementsRef, children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSubmenu.MenuItemList, { items: menuItems }) })
+            }
+          )
+        }
+      )
+    }
+  ) }) });
+}
+function ContextMenu(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(react.FloatingTree, { children: /* @__PURE__ */ jsxRuntime.jsx(ContextMenuRoot, { ...props }) });
+}
+exports.ContextMenu = ContextMenu;
+//# sourceMappingURL=ContextMenu.cjs.map

package/dist/overlay/ContextMenu.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenu.cjs","sources":["../../src/overlay/ContextMenu.tsx"],"sourcesContent":["import {\n  autoUpdate,\n  flip,\n  FloatingFocusManager,\n  FloatingList,\n  FloatingNode,\n  FloatingPortal,\n  FloatingTree,\n  offset,\n  shift,\n  useDismiss,\n  useFloating,\n  useFloatingNodeId,\n  useFloatingTree,\n  useInteractions,\n  useListNavigation,\n  useRole,\n  type VirtualElement,\n} from \"@floating-ui/react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport type { DropdownMenuItem } from \"./DropdownMenu\";\nimport { MenuItemList } from \"./DropdownMenuSubmenu\";\nimport { MENU_POPOVER_CLASS, MenuContext } from \"./dropdownMenuContext\";\nimport { useEscapeLayer, useFloatingZIndex } from \"./modalStack\";\n\nexport type ContextMenuProps = {\n  contextTarget: HTMLElement | null;\n  menuLabel: string;\n  menuItems: DropdownMenuItem[];\n};\n\nfunction pointReference(\n  x: number,\n  y: number,\n  contextElement: HTMLElement,\n): VirtualElement {\n  return {\n    contextElement,\n    getBoundingClientRect: () => ({\n      x,\n      y,\n      top: y,\n      left: x,\n      right: x,\n      bottom: y,\n      width: 0,\n      height: 0,\n      toJSON: () => ({}),\n    }),\n  };\n}\n\nfunction ContextMenuRoot({\n  contextTarget,\n  menuLabel,\n  menuItems,\n}: ContextMenuProps) {\n  const [open, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n  const returnFocusRef = useRef<HTMLElement | null>(null);\n  const elementsRef = useRef<Array<HTMLElement | null>>([]);\n  const floatingZ = useFloatingZIndex();\n  const tree = useFloatingTree();\n  const nodeId = useFloatingNodeId();\n\n  const closeMenu = useCallback(() => {\n    setOpen(false);\n    queueMicrotask(() =>\n      returnFocusRef.current?.focus({ preventScroll: true }),\n    );\n  }, []);\n\n  const { refs, floatingStyles, context } = useFloating<HTMLDivElement>({\n    ...(nodeId ? { nodeId } : {}),\n    open,\n    onOpenChange: (next) => (next ? setOpen(true) : closeMenu()),\n    placement: \"right-start\",\n    middleware: [offset(4), flip({ padding: 8 }), shift({ padding: 8 })],\n    whileElementsMounted: autoUpdate,\n  });\n\n  const dismiss = useDismiss(context, { escapeKey: false });\n  const role = useRole(context, { role: \"menu\" });\n  const listNavigation = useListNavigation(context, {\n    listRef: elementsRef,\n    activeIndex,\n    onNavigate: setActiveIndex,\n    loop: true,\n  });\n  const { getFloatingProps, getItemProps } = useInteractions([\n    dismiss,\n    role,\n    listNavigation,\n  ]);\n\n  const openAt = useCallback(\n    (x: number, y: number) => {\n      if (!contextTarget || menuItems.length === 0) return;\n      const active = document.activeElement;\n      returnFocusRef.current =\n        active instanceof HTMLElement ? active : contextTarget;\n      refs.setPositionReference(pointReference(x, y, contextTarget));\n      setActiveIndex(null);\n      setOpen(true);\n    },\n    [contextTarget, menuItems.length, refs],\n  );\n\n  useEffect(() => {\n    if (!contextTarget || menuItems.length === 0) return;\n    const onContextMenu = (event: MouseEvent) => {\n      event.preventDefault();\n      event.stopPropagation();\n      openAt(event.clientX, event.clientY);\n    };\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key !== \"ContextMenu\" &&\n        !(event.key === \"F10\" && event.shiftKey)\n      )\n        return;\n      event.preventDefault();\n      event.stopPropagation();\n      const rect = contextTarget.getBoundingClientRect();\n      openAt(rect.left + 8, rect.top + Math.min(rect.height, 24));\n    };\n\n    contextTarget.addEventListener(\"contextmenu\", onContextMenu);\n    contextTarget.addEventListener(\"keydown\", onKeyDown);\n    return () => {\n      contextTarget.removeEventListener(\"contextmenu\", onContextMenu);\n      contextTarget.removeEventListener(\"keydown\", onKeyDown);\n    };\n  }, [contextTarget, menuItems.length, openAt]);\n\n  useEffect(() => {\n    if (!tree) return;\n    tree.events.on(\"click\", closeMenu);\n    return () => tree.events.off(\"click\", closeMenu);\n  }, [closeMenu, tree]);\n\n  useEscapeLayer(open, closeMenu);\n\n  return (\n    <FloatingNode id={nodeId}>\n      {open && (\n        <FloatingPortal>\n          <FloatingFocusManager\n            context={context}\n            modal={false}\n            returnFocus={false}\n          >\n            <div\n              ref={refs.setFloating}\n              role=\"menu\"\n              aria-label={menuLabel}\n              style={{ ...floatingStyles, zIndex: floatingZ }}\n              className={MENU_POPOVER_CLASS}\n              {...getFloatingProps()}\n            >\n              <MenuContext.Provider\n                value={{\n                  getItemProps,\n                  activeIndex,\n                  setActiveIndex,\n                  setHasFocusInside: () => {},\n                  isOpen: open,\n                }}\n              >\n                <FloatingList elementsRef={elementsRef}>\n                  <MenuItemList items={menuItems} />\n                </FloatingList>\n              </MenuContext.Provider>\n            </div>\n          </FloatingFocusManager>\n        </FloatingPortal>\n      )}\n    </FloatingNode>\n  );\n}\n\nexport function ContextMenu(props: ContextMenuProps) {\n  return (\n    <FloatingTree>\n      <ContextMenuRoot {...props} />\n    </FloatingTree>\n  );\n}\n"],"names":["useState","useRef","useFloatingZIndex","useFloatingTree","useFloatingNodeId","useCallback","useFloating","offset","flip","shift","autoUpdate","useDismiss","useRole","useListNavigation","useInteractions","useEffect","useEscapeLayer","FloatingNode","FloatingPortal","jsx","FloatingFocusManager","MENU_POPOVER_CLASS","MenuContext","FloatingList","MenuItemList","FloatingTree"],"mappings":"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"}

package/dist/overlay/ContextMenu.d.ts

@@ -0,0 +1,8 @@
+import { DropdownMenuItem } from './DropdownMenu';
+export type ContextMenuProps = {
+    contextTarget: HTMLElement | null;
+    menuLabel: string;
+    menuItems: DropdownMenuItem[];
+};
+export declare function ContextMenu(props: ContextMenuProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ContextMenu.d.ts.map

package/dist/overlay/ContextMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../src/overlay/ContextMenu.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAKvD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,aAAa,EAAE,WAAW,GAAG,IAAI,CAAC;IAClC,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,gBAAgB,EAAE,CAAC;CAC/B,CAAC;AAwJF,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAMlD"}

package/dist/overlay/ContextMenu.js

@@ -0,0 +1,144 @@
+import { jsx } from "react/jsx-runtime";
+import { FloatingTree, useFloatingTree, useFloatingNodeId, useFloating, autoUpdate, offset, flip, shift, useDismiss, useRole, useListNavigation, useInteractions, FloatingNode, FloatingPortal, FloatingFocusManager, FloatingList } from "@floating-ui/react";
+import { useState, useRef, useCallback, useEffect } from "react";
+import { MenuItemList } from "./DropdownMenuSubmenu.js";
+import { MENU_POPOVER_CLASS, MenuContext } from "./dropdownMenuContext.js";
+import { useFloatingZIndex, useEscapeLayer } from "./modalStack.js";
+function pointReference(x, y, contextElement) {
+  return {
+    contextElement,
+    getBoundingClientRect: () => ({
+      x,
+      y,
+      top: y,
+      left: x,
+      right: x,
+      bottom: y,
+      width: 0,
+      height: 0,
+      toJSON: () => ({})
+    })
+  };
+}
+function ContextMenuRoot({
+  contextTarget,
+  menuLabel,
+  menuItems
+}) {
+  const [open, setOpen] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(null);
+  const returnFocusRef = useRef(null);
+  const elementsRef = useRef([]);
+  const floatingZ = useFloatingZIndex();
+  const tree = useFloatingTree();
+  const nodeId = useFloatingNodeId();
+  const closeMenu = useCallback(() => {
+    setOpen(false);
+    queueMicrotask(
+      () => {
+        var _a;
+        return (_a = returnFocusRef.current) == null ? void 0 : _a.focus({ preventScroll: true });
+      }
+    );
+  }, []);
+  const { refs, floatingStyles, context } = useFloating({
+    ...nodeId ? { nodeId } : {},
+    open,
+    onOpenChange: (next) => next ? setOpen(true) : closeMenu(),
+    placement: "right-start",
+    middleware: [offset(4), flip({ padding: 8 }), shift({ padding: 8 })],
+    whileElementsMounted: autoUpdate
+  });
+  const dismiss = useDismiss(context, { escapeKey: false });
+  const role = useRole(context, { role: "menu" });
+  const listNavigation = useListNavigation(context, {
+    listRef: elementsRef,
+    activeIndex,
+    onNavigate: setActiveIndex,
+    loop: true
+  });
+  const { getFloatingProps, getItemProps } = useInteractions([
+    dismiss,
+    role,
+    listNavigation
+  ]);
+  const openAt = useCallback(
+    (x, y) => {
+      if (!contextTarget || menuItems.length === 0) return;
+      const active = document.activeElement;
+      returnFocusRef.current = active instanceof HTMLElement ? active : contextTarget;
+      refs.setPositionReference(pointReference(x, y, contextTarget));
+      setActiveIndex(null);
+      setOpen(true);
+    },
+    [contextTarget, menuItems.length, refs]
+  );
+  useEffect(() => {
+    if (!contextTarget || menuItems.length === 0) return;
+    const onContextMenu = (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      openAt(event.clientX, event.clientY);
+    };
+    const onKeyDown = (event) => {
+      if (event.key !== "ContextMenu" && !(event.key === "F10" && event.shiftKey))
+        return;
+      event.preventDefault();
+      event.stopPropagation();
+      const rect = contextTarget.getBoundingClientRect();
+      openAt(rect.left + 8, rect.top + Math.min(rect.height, 24));
+    };
+    contextTarget.addEventListener("contextmenu", onContextMenu);
+    contextTarget.addEventListener("keydown", onKeyDown);
+    return () => {
+      contextTarget.removeEventListener("contextmenu", onContextMenu);
+      contextTarget.removeEventListener("keydown", onKeyDown);
+    };
+  }, [contextTarget, menuItems.length, openAt]);
+  useEffect(() => {
+    if (!tree) return;
+    tree.events.on("click", closeMenu);
+    return () => tree.events.off("click", closeMenu);
+  }, [closeMenu, tree]);
+  useEscapeLayer(open, closeMenu);
+  return /* @__PURE__ */ jsx(FloatingNode, { id: nodeId, children: open && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(
+    FloatingFocusManager,
+    {
+      context,
+      modal: false,
+      returnFocus: false,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: refs.setFloating,
+          role: "menu",
+          "aria-label": menuLabel,
+          style: { ...floatingStyles, zIndex: floatingZ },
+          className: MENU_POPOVER_CLASS,
+          ...getFloatingProps(),
+          children: /* @__PURE__ */ jsx(
+            MenuContext.Provider,
+            {
+              value: {
+                getItemProps,
+                activeIndex,
+                setActiveIndex,
+                setHasFocusInside: () => {
+                },
+                isOpen: open
+              },
+              children: /* @__PURE__ */ jsx(FloatingList, { elementsRef, children: /* @__PURE__ */ jsx(MenuItemList, { items: menuItems }) })
+            }
+          )
+        }
+      )
+    }
+  ) }) });
+}
+function ContextMenu(props) {
+  return /* @__PURE__ */ jsx(FloatingTree, { children: /* @__PURE__ */ jsx(ContextMenuRoot, { ...props }) });
+}
+export {
+  ContextMenu
+};
+//# sourceMappingURL=ContextMenu.js.map

package/dist/overlay/ContextMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenu.js","sources":["../../src/overlay/ContextMenu.tsx"],"sourcesContent":["import {\n  autoUpdate,\n  flip,\n  FloatingFocusManager,\n  FloatingList,\n  FloatingNode,\n  FloatingPortal,\n  FloatingTree,\n  offset,\n  shift,\n  useDismiss,\n  useFloating,\n  useFloatingNodeId,\n  useFloatingTree,\n  useInteractions,\n  useListNavigation,\n  useRole,\n  type VirtualElement,\n} from \"@floating-ui/react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport type { DropdownMenuItem } from \"./DropdownMenu\";\nimport { MenuItemList } from \"./DropdownMenuSubmenu\";\nimport { MENU_POPOVER_CLASS, MenuContext } from \"./dropdownMenuContext\";\nimport { useEscapeLayer, useFloatingZIndex } from \"./modalStack\";\n\nexport type ContextMenuProps = {\n  contextTarget: HTMLElement | null;\n  menuLabel: string;\n  menuItems: DropdownMenuItem[];\n};\n\nfunction pointReference(\n  x: number,\n  y: number,\n  contextElement: HTMLElement,\n): VirtualElement {\n  return {\n    contextElement,\n    getBoundingClientRect: () => ({\n      x,\n      y,\n      top: y,\n      left: x,\n      right: x,\n      bottom: y,\n      width: 0,\n      height: 0,\n      toJSON: () => ({}),\n    }),\n  };\n}\n\nfunction ContextMenuRoot({\n  contextTarget,\n  menuLabel,\n  menuItems,\n}: ContextMenuProps) {\n  const [open, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n  const returnFocusRef = useRef<HTMLElement | null>(null);\n  const elementsRef = useRef<Array<HTMLElement | null>>([]);\n  const floatingZ = useFloatingZIndex();\n  const tree = useFloatingTree();\n  const nodeId = useFloatingNodeId();\n\n  const closeMenu = useCallback(() => {\n    setOpen(false);\n    queueMicrotask(() =>\n      returnFocusRef.current?.focus({ preventScroll: true }),\n    );\n  }, []);\n\n  const { refs, floatingStyles, context } = useFloating<HTMLDivElement>({\n    ...(nodeId ? { nodeId } : {}),\n    open,\n    onOpenChange: (next) => (next ? setOpen(true) : closeMenu()),\n    placement: \"right-start\",\n    middleware: [offset(4), flip({ padding: 8 }), shift({ padding: 8 })],\n    whileElementsMounted: autoUpdate,\n  });\n\n  const dismiss = useDismiss(context, { escapeKey: false });\n  const role = useRole(context, { role: \"menu\" });\n  const listNavigation = useListNavigation(context, {\n    listRef: elementsRef,\n    activeIndex,\n    onNavigate: setActiveIndex,\n    loop: true,\n  });\n  const { getFloatingProps, getItemProps } = useInteractions([\n    dismiss,\n    role,\n    listNavigation,\n  ]);\n\n  const openAt = useCallback(\n    (x: number, y: number) => {\n      if (!contextTarget || menuItems.length === 0) return;\n      const active = document.activeElement;\n      returnFocusRef.current =\n        active instanceof HTMLElement ? active : contextTarget;\n      refs.setPositionReference(pointReference(x, y, contextTarget));\n      setActiveIndex(null);\n      setOpen(true);\n    },\n    [contextTarget, menuItems.length, refs],\n  );\n\n  useEffect(() => {\n    if (!contextTarget || menuItems.length === 0) return;\n    const onContextMenu = (event: MouseEvent) => {\n      event.preventDefault();\n      event.stopPropagation();\n      openAt(event.clientX, event.clientY);\n    };\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key !== \"ContextMenu\" &&\n        !(event.key === \"F10\" && event.shiftKey)\n      )\n        return;\n      event.preventDefault();\n      event.stopPropagation();\n      const rect = contextTarget.getBoundingClientRect();\n      openAt(rect.left + 8, rect.top + Math.min(rect.height, 24));\n    };\n\n    contextTarget.addEventListener(\"contextmenu\", onContextMenu);\n    contextTarget.addEventListener(\"keydown\", onKeyDown);\n    return () => {\n      contextTarget.removeEventListener(\"contextmenu\", onContextMenu);\n      contextTarget.removeEventListener(\"keydown\", onKeyDown);\n    };\n  }, [contextTarget, menuItems.length, openAt]);\n\n  useEffect(() => {\n    if (!tree) return;\n    tree.events.on(\"click\", closeMenu);\n    return () => tree.events.off(\"click\", closeMenu);\n  }, [closeMenu, tree]);\n\n  useEscapeLayer(open, closeMenu);\n\n  return (\n    <FloatingNode id={nodeId}>\n      {open && (\n        <FloatingPortal>\n          <FloatingFocusManager\n            context={context}\n            modal={false}\n            returnFocus={false}\n          >\n            <div\n              ref={refs.setFloating}\n              role=\"menu\"\n              aria-label={menuLabel}\n              style={{ ...floatingStyles, zIndex: floatingZ }}\n              className={MENU_POPOVER_CLASS}\n              {...getFloatingProps()}\n            >\n              <MenuContext.Provider\n                value={{\n                  getItemProps,\n                  activeIndex,\n                  setActiveIndex,\n                  setHasFocusInside: () => {},\n                  isOpen: open,\n                }}\n              >\n                <FloatingList elementsRef={elementsRef}>\n                  <MenuItemList items={menuItems} />\n                </FloatingList>\n              </MenuContext.Provider>\n            </div>\n          </FloatingFocusManager>\n        </FloatingPortal>\n      )}\n    </FloatingNode>\n  );\n}\n\nexport function ContextMenu(props: ContextMenuProps) {\n  return (\n    <FloatingTree>\n      <ContextMenuRoot {...props} />\n    </FloatingTree>\n  );\n}\n"],"names":[],"mappings":"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"}