@refineui/react 0.0.4 → 0.0.6

package/dist/index.cjs

@@ -88,6 +88,10 @@ __export(index_exports, {
   ChartYAxisLabels: () => ChartYAxisLabels,
   Checkbox: () => Checkbox,
   Chip: () => Chip,
+  Collapsible: () => Collapsible,
+  CollapsibleContent: () => CollapsibleContent,
+  CollapsibleRoot: () => CollapsibleRoot,
+  CollapsibleTrigger: () => CollapsibleTrigger,
   Command: () => Command,
   CommandDialog: () => CommandDialog,
   CommandEmpty: () => CommandEmpty,
@@ -99,6 +103,17 @@ __export(index_exports, {
   CommandSeparator: () => CommandSeparator,
   CommandShortcut: () => CommandShortcut,
   Container: () => Container,
+  ContextMenu: () => ContextMenu,
+  ContextMenuContent: () => ContextMenuContent,
+  ContextMenuItem: () => ContextMenuItem,
+  ContextMenuPortal: () => ContextMenuPortal,
+  ContextMenuRoot: () => ContextMenuRoot,
+  ContextMenuSection: () => ContextMenuSection,
+  ContextMenuSeparator: () => ContextMenuSeparator,
+  ContextMenuSub: () => ContextMenuSub,
+  ContextMenuSubContent: () => ContextMenuSubContent,
+  ContextMenuSubTrigger: () => ContextMenuSubTrigger,
+  ContextMenuTrigger: () => ContextMenuTrigger,
   Dialog: () => Dialog,
   DialogClose: () => DialogClose,
   DialogContent: () => DialogContent,
@@ -197,7 +212,7 @@ __export(index_exports, {
   ResizableHandle: () => ResizableHandle,
   ResizablePanel: () => ResizablePanel,
   ResizablePanelGroup: () => ResizablePanelGroup,
-  SEMANTIC_TEXT: () => import_tokens36.SEMANTIC_TEXT,
+  SEMANTIC_TEXT: () => import_tokens38.SEMANTIC_TEXT,
   ScrollArea: () => ScrollArea,
   ScrollAreaScrollbar: () => ScrollAreaScrollbar,
   ScrollAreaThumb: () => ScrollAreaThumb,
@@ -241,6 +256,7 @@ __export(index_exports, {
   SidebarPeekPin: () => SidebarPeekPin,
   Skeleton: () => Skeleton,
   Slider: () => Slider,
+  Slot: () => import_react57.Slot,
   Spacer: () => Spacer,
   SpinButton: () => SpinButton,
   Spinner: () => Spinner,
@@ -1365,7 +1381,7 @@ function buildSemanticTextClassMap(map) {
 }
 
 // src/index.ts
-var import_tokens36 = require("@refineui/tokens");
+var import_tokens38 = require("@refineui/tokens");
 
 // src/componentSizes.ts
 var import_tokens3 = require("@refineui/tokens");
@@ -8973,27 +8989,27 @@ function DropdownTrigger({ children, className, ...props }) {
   };
   const mergeEl = (0, import_react35.getMergeableTriggerChild)(children);
   if (mergeEl) {
-    const el = mergeEl;
     const passthrough = props;
-    const passthroughCn = props.className;
-    return (0, import_react34.cloneElement)(el, {
-      ...props,
-      ref: (0, import_react35.composeRefs)(triggerRef, el.ref),
-      className: (0, import_clsx70.clsx)(className, passthroughCn, el.props.className),
-      "aria-expanded": open,
-      "aria-haspopup": "menu",
-      "aria-controls": menuId,
-      onClick: (e) => {
-        passthrough.onClick?.(e);
-        el.props.onClick?.(e);
-        toggle();
-      },
-      onKeyDown: (e) => {
-        passthrough.onKeyDown?.(e);
-        el.props.onKeyDown?.(e);
-        onTriggerKeyDown(e);
+    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+      import_react35.Slot,
+      {
+        ref: triggerRef,
+        ...props,
+        className,
+        "aria-expanded": open,
+        "aria-haspopup": "menu",
+        "aria-controls": menuId,
+        onClick: (event) => {
+          passthrough.onClick?.(event);
+          toggle();
+        },
+        onKeyDown: (event) => {
+          passthrough.onKeyDown?.(event);
+          onTriggerKeyDown(event);
+        },
+        children: mergeEl
       }
-    });
+    );
   }
   const passthroughBtn = props;
   return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
@@ -9742,15 +9758,7 @@ function MenuTrigger({ children }) {
   const { open, setOpen } = useMenuContext("MenuTrigger");
   const mergeEl = (0, import_react37.getMergeableTriggerChild)(children);
   if (mergeEl) {
-    const el = mergeEl;
-    return (0, import_react36.cloneElement)(el, {
-      "aria-expanded": open,
-      "aria-haspopup": "menu",
-      onClick: (e) => {
-        el.props.onClick?.(e);
-        setOpen(!open);
-      }
-    });
+    return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react37.Slot, { "aria-expanded": open, "aria-haspopup": "menu", onClick: () => setOpen(!open), children: mergeEl });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
     "button",
@@ -11451,27 +11459,27 @@ function PopoverTrigger({ children, className, ...props }) {
   const { open, toggle, triggerRef, contentId, onTriggerKeyDown } = usePopoverContext("PopoverTrigger");
   const mergeEl = (0, import_react41.getMergeableTriggerChild)(children);
   if (mergeEl) {
-    const el = mergeEl;
     const passthrough = props;
-    const passthroughCn = props.className;
-    return (0, import_react40.cloneElement)(el, {
-      ...props,
-      ref: (0, import_react41.composeRefs)(triggerRef, el.ref),
-      className: (0, import_clsx85.clsx)(className, passthroughCn, el.props.className),
-      "aria-expanded": open,
-      "aria-haspopup": "dialog",
-      "aria-controls": contentId,
-      onClick: (e) => {
-        passthrough.onClick?.(e);
-        el.props.onClick?.(e);
-        toggle();
-      },
-      onKeyDown: (e) => {
-        passthrough.onKeyDown?.(e);
-        el.props.onKeyDown?.(e);
-        onTriggerKeyDown(e);
+    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+      import_react41.Slot,
+      {
+        ref: triggerRef,
+        ...props,
+        className,
+        "aria-expanded": open,
+        "aria-haspopup": "dialog",
+        "aria-controls": contentId,
+        onClick: (event) => {
+          passthrough.onClick?.(event);
+          toggle();
+        },
+        onKeyDown: (event) => {
+          passthrough.onKeyDown?.(event);
+          onTriggerKeyDown(event);
+        },
+        children: mergeEl
       }
-    });
+    );
   }
   const passthroughBtn = props;
   return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
@@ -14659,31 +14667,22 @@ function Tooltip({
   const mergeEl = (0, import_react55.getMergeableTriggerChild)(trigger);
   let triggerNode;
   if (mergeEl != null) {
-    const el = mergeEl;
-    const prevDescribedBy = el.props["aria-describedby"];
-    triggerNode = (0, import_react54.cloneElement)(el, {
-      "aria-describedby": prevDescribedBy && describedBy ? `${prevDescribedBy} ${describedBy}` : describedBy ?? prevDescribedBy,
-      onMouseEnter: (e) => {
-        el.props.onMouseEnter?.(e);
-        scheduleShow();
-      },
-      onMouseLeave: (e) => {
-        el.props.onMouseLeave?.(e);
-        hide();
-      },
-      onFocus: (e) => {
-        el.props.onFocus?.(e);
-        scheduleShow();
-      },
-      onBlur: (e) => {
-        el.props.onBlur?.(e);
-        if (!e.currentTarget.contains(e.relatedTarget)) hide();
-      },
-      onKeyDown: (e) => {
-        el.props.onKeyDown?.(e);
-        if (e.key === "Escape") hide();
+    triggerNode = /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+      import_react55.Slot,
+      {
+        "aria-describedby": describedBy,
+        onMouseEnter: scheduleShow,
+        onMouseLeave: hide,
+        onFocus: scheduleShow,
+        onBlur: (event) => {
+          if (!event.currentTarget.contains(event.relatedTarget)) hide();
+        },
+        onKeyDown: (event) => {
+          if (event.key === "Escape") hide();
+        },
+        children: mergeEl
       }
-    });
+    );
   } else {
     triggerNode = /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
       "span",
@@ -15458,6 +15457,527 @@ function ChartLegendItem({
     }
   );
 }
+
+// src/components/Slot/Slot.tsx
+var import_react57 = require("@refineui/utilities/react");
+
+// src/components/Collapsible/Collapsible.tsx
+var import_react58 = require("react");
+var import_clsx108 = require("clsx");
+var import_tokens36 = require("@refineui/tokens");
+var import_react59 = require("@refineui/utilities/react");
+var import_jsx_runtime78 = require("react/jsx-runtime");
+var CollapsibleContext = (0, import_react58.createContext)(null);
+function useCollapsible() {
+  const value = (0, import_react58.useContext)(CollapsibleContext);
+  if (!value) throw new Error("Collapsible parts must be used inside Collapsible.Root");
+  return value;
+}
+function usePrefersReducedMotion3() {
+  const [reduce, setReduce] = (0, import_react58.useState)(false);
+  (0, import_react58.useEffect)(() => {
+    const query = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const sync = () => setReduce(query.matches);
+    sync();
+    query.addEventListener("change", sync);
+    return () => query.removeEventListener("change", sync);
+  }, []);
+  return reduce;
+}
+var CollapsibleRoot = (0, import_react58.forwardRef)(function CollapsibleRoot2({ open: openProp, defaultOpen = false, onOpenChange, asChild = false, className, children, ...props }, ref) {
+  const [uncontrolled, setUncontrolled] = (0, import_react58.useState)(defaultOpen);
+  const open = openProp ?? uncontrolled;
+  const openRef = (0, import_react58.useRef)(open);
+  openRef.current = open;
+  const reactId = (0, import_react58.useId)();
+  const reduceMotion = usePrefersReducedMotion3();
+  const toggle = () => {
+    const next = !openRef.current;
+    if (openProp === void 0) setUncontrolled(next);
+    onOpenChange?.(next);
+  };
+  const shared = {
+    ...props,
+    ref,
+    "data-state": open ? "open" : "closed",
+    "data-refineui": "collapsible",
+    className
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+    CollapsibleContext.Provider,
+    {
+      value: {
+        open,
+        toggle,
+        contentId: `${reactId}-content`,
+        triggerId: `${reactId}-trigger`,
+        reduceMotion
+      },
+      children: asChild ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_react59.Slot, { ...shared, children }) : /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { ...shared, children })
+    }
+  );
+});
+var CollapsibleTrigger = (0, import_react58.forwardRef)(function CollapsibleTrigger2({ asChild = false, onClick, className, children, ...props }, ref) {
+  const { open, toggle, contentId, triggerId } = useCollapsible();
+  const shared = {
+    ...props,
+    ref,
+    id: triggerId,
+    "aria-expanded": open,
+    "aria-controls": contentId,
+    "data-state": open ? "open" : "closed",
+    "data-refineui": "collapsible-trigger",
+    className,
+    onClick: (event) => {
+      onClick?.(event);
+      if (!event.defaultPrevented) toggle();
+    }
+  };
+  if (asChild) return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_react59.Slot, { ...shared, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("button", { ...shared, type: "button", children });
+});
+var CollapsibleContent = (0, import_react58.forwardRef)(function CollapsibleContent2({ className, children, style, ...props }, ref) {
+  const { open, contentId, triggerId, reduceMotion } = useCollapsible();
+  const innerRef = (0, import_react58.useRef)(null);
+  const [size, setSize] = (0, import_react58.useState)({ height: 0, width: 0 });
+  (0, import_react58.useLayoutEffect)(() => {
+    const node = innerRef.current;
+    if (!node) return;
+    const measure = () => {
+      setSize({ height: node.scrollHeight, width: node.scrollWidth });
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [children, open]);
+  const clipStyle = {
+    ["--refineui-collapsible-content-height"]: `${size.height}px`,
+    ["--refineui-collapsible-content-width"]: `${size.width}px`,
+    height: open ? size.height : 0,
+    overflow: "hidden",
+    transition: reduceMotion ? void 0 : `height ${import_tokens36.semanticInteraction.duration.panel} ${import_tokens36.semanticInteraction.easing.panel}`
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+    "div",
+    {
+      ...props,
+      ref,
+      id: contentId,
+      role: "region",
+      "aria-labelledby": triggerId,
+      "aria-hidden": !open,
+      "data-state": open ? "open" : "closed",
+      "data-refineui": "collapsible-content",
+      style: clipStyle,
+      children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { ref: innerRef, className: (0, import_clsx108.clsx)(className), style, children })
+    }
+  );
+});
+var Collapsible = Object.assign(CollapsibleRoot, {
+  Root: CollapsibleRoot,
+  Trigger: CollapsibleTrigger,
+  Content: CollapsibleContent
+});
+
+// src/components/ContextMenu/ContextMenu.tsx
+var import_react60 = require("react");
+var import_react_dom7 = require("react-dom");
+var import_clsx109 = require("clsx");
+var import_tokens37 = require("@refineui/tokens");
+var import_animation9 = require("@refineui/utilities/animation");
+var import_react61 = require("@refineui/utilities/react");
+var import_jsx_runtime79 = require("react/jsx-runtime");
+var MENU_ATTR = "data-refineui-context-menu";
+var CLOSE_MS = (0, import_animation9.motionMsToNumber)(import_tokens37.semanticInteraction.duration.normal);
+var MenuContext2 = (0, import_react60.createContext)(null);
+var SubContext = (0, import_react60.createContext)(null);
+function useMenu() {
+  const value = (0, import_react60.useContext)(MenuContext2);
+  if (!value) throw new Error("Context menu parts must be used inside ContextMenu.Root");
+  return value;
+}
+function placeInView(element, x, y) {
+  const width = element.offsetWidth;
+  const height = element.offsetHeight;
+  const pad = 4;
+  let left = x;
+  let top = y;
+  if (left + width > window.innerWidth - pad) left = Math.max(pad, window.innerWidth - width - pad);
+  if (top + height > window.innerHeight - pad) top = Math.max(pad, window.innerHeight - height - pad);
+  element.style.left = `${left}px`;
+  element.style.top = `${top}px`;
+}
+function ContextMenuRoot({ modal = true, onOpenChange, children }) {
+  void modal;
+  const [open, setOpen] = (0, import_react60.useState)(false);
+  const [point, setPoint] = (0, import_react60.useState)({ x: 0, y: 0 });
+  const openRef = (0, import_react60.useRef)(false);
+  const onOpenChangeRef = (0, import_react60.useRef)(onOpenChange);
+  openRef.current = open;
+  onOpenChangeRef.current = onOpenChange;
+  const close = (0, import_react60.useCallback)(() => {
+    if (!openRef.current) return;
+    openRef.current = false;
+    setOpen(false);
+    onOpenChangeRef.current?.(false);
+  }, []);
+  const openAt = (0, import_react60.useCallback)((x, y) => {
+    setPoint({ x, y });
+    const wasOpen = openRef.current;
+    openRef.current = true;
+    setOpen(true);
+    if (!wasOpen) onOpenChangeRef.current?.(true);
+  }, []);
+  const value = (0, import_react60.useMemo)(() => ({ open, point, openAt, close }), [open, point, openAt, close]);
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(MenuContext2.Provider, { value, children });
+}
+var ContextMenuTrigger = (0, import_react60.forwardRef)(function ContextMenuTrigger2({ asChild = false, onContextMenu, children, ...props }, ref) {
+  const { openAt } = useMenu();
+  const shared = {
+    ...props,
+    ref,
+    [MENU_ATTR]: "",
+    onContextMenu: (event) => {
+      onContextMenu?.(event);
+      if (event.defaultPrevented) return;
+      event.preventDefault();
+      openAt(event.clientX, event.clientY);
+    }
+  };
+  if (asChild) return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_react61.Slot, { ...shared, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { ...shared, className: (0, import_clsx109.clsx)(menuStyles.triggerFallback, props.className), children });
+});
+function ContextMenuPortal({ children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_jsx_runtime79.Fragment, { children });
+}
+var ContextMenuContent = (0, import_react60.forwardRef)(function ContextMenuContent2({ className, style, onPointerDown, children, ...props }, ref) {
+  const { open, point, close } = useMenu();
+  const localRef = (0, import_react60.useRef)(null);
+  const [shouldRender, setShouldRender] = (0, import_react60.useState)(open);
+  const [isClosing, setIsClosing] = (0, import_react60.useState)(false);
+  (0, import_react60.useEffect)(() => {
+    if (open) {
+      setShouldRender(true);
+      setIsClosing(false);
+      return;
+    }
+    if (!shouldRender) return;
+    setIsClosing(true);
+    const timeout = window.setTimeout(() => {
+      setShouldRender(false);
+      setIsClosing(false);
+    }, CLOSE_MS);
+    return () => window.clearTimeout(timeout);
+  }, [open, shouldRender]);
+  (0, import_react60.useLayoutEffect)(() => {
+    if (!shouldRender || !localRef.current) return;
+    placeInView(localRef.current, point.x, point.y);
+  }, [shouldRender, point.x, point.y]);
+  (0, import_react60.useEffect)(() => {
+    if (!open) return;
+    const onKey = (event) => {
+      if (event.key === "Escape") close();
+    };
+    const onPointer = (event) => {
+      const target = event.target;
+      if (target instanceof Element && target.closest(`[${MENU_ATTR}]`)) return;
+      close();
+    };
+    document.addEventListener("keydown", onKey);
+    document.addEventListener("pointerdown", onPointer);
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.removeEventListener("pointerdown", onPointer);
+    };
+  }, [open, close]);
+  if (!shouldRender || typeof document === "undefined") return null;
+  return (0, import_react_dom7.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+      "div",
+      {
+        ...props,
+        ref: (node) => {
+          localRef.current = node;
+          if (typeof ref === "function") ref(node);
+          else if (ref) ref.current = node;
+        },
+        "data-refineui": "menu-popover",
+        "data-state": isClosing ? "closed" : "open",
+        ...{ [MENU_ATTR]: "" },
+        className: menuStyles.popover,
+        style: {
+          position: "fixed",
+          top: point.y,
+          left: point.x,
+          width: import_tokens37.componentSizes.menuPanelWidth,
+          minWidth: import_tokens37.componentSizes.menuPanelWidth,
+          zIndex: 9999,
+          ...style
+        },
+        onPointerDown: (event) => {
+          event.preventDefault();
+          onPointerDown?.(event);
+        },
+        onContextMenu: (event) => event.preventDefault(),
+        children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { role: "menu", "data-refineui": "menu", className: (0, import_clsx109.clsx)(menuStyles.list, className), children })
+      }
+    ),
+    document.body
+  );
+});
+function runSelect(onSelect, close, disabled) {
+  if (disabled) return;
+  const selectEvent = {
+    defaultPrevented: false,
+    preventDefault() {
+      selectEvent.defaultPrevented = true;
+    }
+  };
+  onSelect?.(selectEvent);
+  if (!selectEvent.defaultPrevented) close();
+}
+var ContextMenuItem = (0, import_react60.forwardRef)(function ContextMenuItem2({ disabled = false, description, shortcut, startIcon, endIcon, state = "default", onSelect, className, onClick, onKeyDown, children, ...props }, ref) {
+  const { close } = useMenu();
+  const isDisabled = disabled || state === "disabled";
+  const slotted = startIcon != null || description != null || shortcut != null || endIcon != null;
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+    "button",
+    {
+      ref,
+      type: "button",
+      role: "menuitem",
+      disabled: isDisabled,
+      "aria-disabled": isDisabled || void 0,
+      "data-refineui": "menu-item",
+      "data-state": isDisabled ? "disabled" : state,
+      ...{ [MENU_ATTR]: "" },
+      className: (0, import_clsx109.clsx)(menuStyles.itemBase, isDisabled ? menuStyles.itemDisabled : menuStyles.itemEnabled, className),
+      ...props,
+      onClick: (event) => {
+        onClick?.(event);
+        if (event.defaultPrevented) return;
+        runSelect(onSelect, close, isDisabled);
+      },
+      onKeyDown: (event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented) return;
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          runSelect(onSelect, close, isDisabled);
+        }
+      },
+      children: slotted ? /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("span", { className: menuStyles.row, children: [
+        startIcon ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+          "span",
+          {
+            className: menuStyles.iconWrap,
+            style: { width: import_tokens37.iconSizes.small, minWidth: import_tokens37.iconSizes.small, height: import_tokens37.iconSizes.small },
+            children: startIcon
+          }
+        ) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("span", { className: menuStyles.textCol, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { className: menuStyles.title, children }),
+          description ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { className: (0, import_clsx109.clsx)(menuStyles.description, isDisabled ? menuStyles.descriptionDisabled : menuStyles.descriptionEnabled), children: description }) : null
+        ] }),
+        (shortcut || endIcon) && /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("span", { className: menuStyles.rightWrap, children: [
+          shortcut ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { className: menuStyles.shortcut, children: shortcut }) : null,
+          endIcon ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+            "span",
+            {
+              className: menuStyles.iconWrap,
+              style: { width: import_tokens37.iconSizes.small, minWidth: import_tokens37.iconSizes.small, height: import_tokens37.iconSizes.small },
+              children: endIcon
+            }
+          ) : null
+        ] })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { className: menuStyles.row, children })
+    }
+  );
+});
+var ContextMenuSeparator = (0, import_react60.forwardRef)(
+  function ContextMenuSeparator2({ className, ...props }, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+      "div",
+      {
+        ref,
+        role: "separator",
+        "aria-orientation": "horizontal",
+        "data-refineui": "menu-divider",
+        ...{ [MENU_ATTR]: "" },
+        className: (0, import_clsx109.clsx)(menuStyles.dividerWrap, className),
+        ...props,
+        children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: menuStyles.dividerLine })
+      }
+    );
+  }
+);
+function ContextMenuSection({ className, children, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { "data-refineui": "menu-section", className: (0, import_clsx109.clsx)(menuStyles.section, className), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { className: menuStyles.sectionText, children }) });
+}
+function ContextMenuSub({ children }) {
+  const [open, setOpen] = (0, import_react60.useState)(false);
+  const triggerRef = (0, import_react60.useRef)(null);
+  const timer = (0, import_react60.useRef)(null);
+  const clear = () => {
+    if (timer.current != null) window.clearTimeout(timer.current);
+    timer.current = null;
+  };
+  (0, import_react60.useEffect)(() => clear, []);
+  const value = (0, import_react60.useMemo)(
+    () => ({
+      open,
+      triggerRef,
+      show: () => {
+        clear();
+        setOpen(true);
+      },
+      hideSoon: () => {
+        clear();
+        timer.current = window.setTimeout(() => setOpen(false), 150);
+      }
+    }),
+    [open]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(SubContext.Provider, { value, children });
+}
+function useSub2() {
+  const value = (0, import_react60.useContext)(SubContext);
+  if (!value) throw new Error("ContextMenu.SubTrigger must be used inside ContextMenu.Sub");
+  return value;
+}
+var ContextMenuSubTrigger = (0, import_react60.forwardRef)(
+  function ContextMenuSubTrigger2({ asChild = false, description, startIcon, onMouseEnter, onMouseLeave, onClick, className, children, ...props }, ref) {
+    const sub = useSub2();
+    const shared = {
+      ...props,
+      type: "button",
+      role: "menuitem",
+      "aria-haspopup": "menu",
+      "aria-expanded": sub.open,
+      "data-state": sub.open ? "active" : "default",
+      "data-refineui": "menu-item",
+      [MENU_ATTR]: "",
+      className: (0, import_clsx109.clsx)(
+        menuStyles.itemBase,
+        menuStyles.itemEnabled,
+        sub.open && "bg-refineui-alias-background-primary-hover",
+        className
+      ),
+      ref: (node) => {
+        sub.triggerRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      onMouseEnter: (event) => {
+        onMouseEnter?.(event);
+        sub.show();
+      },
+      onMouseLeave: (event) => {
+        onMouseLeave?.(event);
+        sub.hideSoon();
+      },
+      onClick: (event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) sub.show();
+      }
+    };
+    if (asChild) return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_react61.Slot, { ...shared, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("button", { ...shared, children: /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("span", { className: menuStyles.row, children: [
+      startIcon ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+        "span",
+        {
+          className: menuStyles.iconWrap,
+          style: { width: import_tokens37.iconSizes.small, minWidth: import_tokens37.iconSizes.small, height: import_tokens37.iconSizes.small },
+          children: startIcon
+        }
+      ) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("span", { className: menuStyles.textCol, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { className: menuStyles.title, children }),
+        description ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { className: (0, import_clsx109.clsx)(menuStyles.description, menuStyles.descriptionEnabled), children: description }) : null
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { className: menuStyles.rightWrap, children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+        "span",
+        {
+          className: menuStyles.iconWrap,
+          style: { width: import_tokens37.iconSizes.small, minWidth: import_tokens37.iconSizes.small, height: import_tokens37.iconSizes.small },
+          children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(WebIcon, { name: "chevron-right", size: import_tokens37.iconSizes.small, color: "currentColor", "aria-hidden": true })
+        }
+      ) })
+    ] }) });
+  }
+);
+var ContextMenuSubContent = (0, import_react60.forwardRef)(
+  function ContextMenuSubContent2({ className, style, onPointerDown, onMouseEnter, onMouseLeave, ...props }, ref) {
+    const sub = useSub2();
+    const localRef = (0, import_react60.useRef)(null);
+    const [side, setSide] = (0, import_react60.useState)("right");
+    (0, import_react60.useLayoutEffect)(() => {
+      const trigger = sub.triggerRef.current;
+      const element = localRef.current;
+      if (!sub.open || !trigger || !element) return;
+      const rect = trigger.getBoundingClientRect();
+      const width = element.offsetWidth;
+      const pad = 4;
+      let left = rect.right;
+      let nextSide = "right";
+      if (left + width > window.innerWidth - pad) {
+        left = Math.max(pad, rect.left - width);
+        nextSide = "left";
+      }
+      setSide(nextSide);
+      placeInView(element, left, rect.top);
+    }, [sub.open, sub.triggerRef]);
+    if (!sub.open || typeof document === "undefined") return null;
+    return (0, import_react_dom7.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+        "div",
+        {
+          ...props,
+          ref: (node) => {
+            localRef.current = node;
+            if (typeof ref === "function") ref(node);
+            else if (ref) ref.current = node;
+          },
+          role: "menu",
+          "data-refineui": "menu",
+          "data-submenu": "true",
+          "data-state": "open",
+          "data-side": side,
+          ...{ [MENU_ATTR]: "" },
+          className: (0, import_clsx109.clsx)(menuStyles.subPanel, className),
+          style: { position: "fixed", zIndex: 1e4, ...style },
+          onPointerDown: (event) => {
+            event.preventDefault();
+            onPointerDown?.(event);
+          },
+          onMouseEnter: (event) => {
+            onMouseEnter?.(event);
+            sub.show();
+          },
+          onMouseLeave: (event) => {
+            onMouseLeave?.(event);
+            sub.hideSoon();
+          },
+          onContextMenu: (event) => event.preventDefault()
+        }
+      ),
+      document.body
+    );
+  }
+);
+var ContextMenu = Object.assign(ContextMenuRoot, {
+  Root: ContextMenuRoot,
+  Trigger: ContextMenuTrigger,
+  Portal: ContextMenuPortal,
+  Content: ContextMenuContent,
+  Item: ContextMenuItem,
+  Section: ContextMenuSection,
+  Separator: ContextMenuSeparator,
+  Sub: ContextMenuSub,
+  SubTrigger: ContextMenuSubTrigger,
+  SubContent: ContextMenuSubContent
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
@@ -15528,6 +16048,10 @@ function ChartLegendItem({
   ChartYAxisLabels,
   Checkbox,
   Chip,
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleRoot,
+  CollapsibleTrigger,
   Command,
   CommandDialog,
   CommandEmpty,
@@ -15539,6 +16063,17 @@ function ChartLegendItem({
   CommandSeparator,
   CommandShortcut,
   Container,
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuPortal,
+  ContextMenuRoot,
+  ContextMenuSection,
+  ContextMenuSeparator,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger,
   Dialog,
   DialogClose,
   DialogContent,
@@ -15681,6 +16216,7 @@ function ChartLegendItem({
   SidebarPeekPin,
   Skeleton,
   Slider,
+  Slot,
   Spacer,
   SpinButton,
   Spinner,