@octanejs/radix 0.1.31 → 0.1.33

package/dist/cjs/DismissableLayer.cjs

@@ -0,0 +1,382 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var DismissableLayer_exports = {};
+__export(DismissableLayer_exports, {
+  Branch: () => DismissableLayerBranch,
+  DismissableLayer: () => DismissableLayer,
+  DismissableLayerBranch: () => DismissableLayerBranch,
+  Root: () => DismissableLayer,
+  useDismissableLayerSurface: () => useDismissableLayerSurface
+});
+module.exports = __toCommonJS(DismissableLayer_exports);
+var import_octane = require("octane");
+var import_compose_event_handlers = require("./compose-event-handlers.cjs");
+var import_compose_refs = require("./compose-refs.cjs");
+var import_internal = require("./internal.cjs");
+var import_Primitive = require("./Primitive.cjs");
+const CONTEXT_UPDATE = "dismissableLayer.update";
+const POINTER_DOWN_OUTSIDE = "dismissableLayer.pointerDownOutside";
+const FOCUS_OUTSIDE = "dismissableLayer.focusOutside";
+let originalBodyPointerEvents;
+const layerContext = {
+  layers: /* @__PURE__ */ new Set(),
+  layersWithOutsidePointerEventsDisabled: /* @__PURE__ */ new Set(),
+  branches: /* @__PURE__ */ new Set(),
+  // Outside elements that belong to a layer's own dismiss affordance (eg, a dialog
+  // overlay). Pressing them should dismiss the layer regardless of whether or not they
+  // stop propagation.
+  dismissableSurfaces: /* @__PURE__ */ new Set()
+};
+function DismissableLayer(props) {
+  const slot = (0, import_internal.S)("DismissableLayer");
+  const {
+    disableOutsidePointerEvents = false,
+    deferPointerDownOutside = false,
+    onEscapeKeyDown,
+    onPointerDownOutside,
+    onFocusOutside,
+    onInteractOutside,
+    onDismiss,
+    ref: forwardedRef,
+    ...layerProps
+  } = props ?? {};
+  const context = layerContext;
+  const [node, setNode] = (0, import_octane.useState)(null, (0, import_internal.subSlot)(slot, "node"));
+  const ownerDocument = node?.ownerDocument ?? globalThis?.document;
+  const [, force] = (0, import_octane.useState)({}, (0, import_internal.subSlot)(slot, "force"));
+  const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, setNode, (0, import_internal.subSlot)(slot, "refs"));
+  const layers = Array.from(context.layers);
+  const [highestLayerWithOutsidePointerEventsDisabled] = [
+    ...context.layersWithOutsidePointerEventsDisabled
+  ].slice(-1);
+  const highestLayerWithOutsidePointerEventsDisabledIndex = layers.indexOf(
+    highestLayerWithOutsidePointerEventsDisabled
+  );
+  const index = node ? layers.indexOf(node) : -1;
+  const isBodyPointerEventsDisabled = context.layersWithOutsidePointerEventsDisabled.size > 0;
+  const isPointerEventsEnabled = index >= highestLayerWithOutsidePointerEventsDisabledIndex;
+  const isDeferredPointerDownOutsideRef = (0, import_octane.useRef)(false, (0, import_internal.subSlot)(slot, "deferred"));
+  const pointerDownOutside = usePointerDownOutside(
+    (event) => {
+      const target = event.target;
+      if (!(target instanceof Node)) return;
+      const isPointerDownOnBranch = [...context.branches].some((branch) => branch.contains(target));
+      if (!isPointerEventsEnabled || isPointerDownOnBranch) return;
+      onPointerDownOutside?.(event);
+      onInteractOutside?.(event);
+      if (!event.defaultPrevented) onDismiss?.();
+    },
+    {
+      ownerDocument,
+      deferPointerDownOutside,
+      isDeferredPointerDownOutsideRef,
+      dismissableSurfaces: context.dismissableSurfaces
+    },
+    (0, import_internal.subSlot)(slot, "pdo")
+  );
+  const focusOutside = useFocusOutside(
+    (event) => {
+      if (deferPointerDownOutside && isDeferredPointerDownOutsideRef.current) return;
+      const target = event.target;
+      const isFocusInBranch = [...context.branches].some((branch) => branch.contains(target));
+      if (isFocusInBranch) return;
+      onFocusOutside?.(event);
+      onInteractOutside?.(event);
+      if (!event.defaultPrevented) onDismiss?.();
+    },
+    ownerDocument,
+    (0, import_internal.subSlot)(slot, "fo")
+  );
+  const isHighestLayer = node ? index === layers.length - 1 : false;
+  const handleKeyDown = (0, import_octane.useEffectEvent)(
+    (event) => {
+      if (event.key !== "Escape") return;
+      onEscapeKeyDown?.(event);
+      if (!event.defaultPrevented && onDismiss) {
+        event.preventDefault();
+        onDismiss();
+      }
+    },
+    (0, import_internal.subSlot)(slot, "esc")
+  );
+  (0, import_octane.useEffect)(
+    () => {
+      if (!isHighestLayer) return;
+      ownerDocument.addEventListener("keydown", handleKeyDown, { capture: true });
+      return () => ownerDocument.removeEventListener("keydown", handleKeyDown, { capture: true });
+    },
+    [ownerDocument, isHighestLayer],
+    (0, import_internal.subSlot)(slot, "e:esc")
+  );
+  (0, import_octane.useEffect)(
+    () => {
+      if (!node) return;
+      if (disableOutsidePointerEvents) {
+        if (context.layersWithOutsidePointerEventsDisabled.size === 0) {
+          originalBodyPointerEvents = ownerDocument.body.style.pointerEvents;
+          ownerDocument.body.style.pointerEvents = "none";
+        }
+        context.layersWithOutsidePointerEventsDisabled.add(node);
+      }
+      context.layers.add(node);
+      dispatchUpdate();
+      return () => {
+        if (disableOutsidePointerEvents) {
+          context.layersWithOutsidePointerEventsDisabled.delete(node);
+          if (context.layersWithOutsidePointerEventsDisabled.size === 0) {
+            ownerDocument.body.style.pointerEvents = originalBodyPointerEvents;
+          }
+        }
+      };
+    },
+    [node, ownerDocument, disableOutsidePointerEvents],
+    (0, import_internal.subSlot)(slot, "e:layer")
+  );
+  (0, import_octane.useEffect)(
+    () => {
+      return () => {
+        if (!node) return;
+        context.layers.delete(node);
+        context.layersWithOutsidePointerEventsDisabled.delete(node);
+        dispatchUpdate();
+      };
+    },
+    [node],
+    (0, import_internal.subSlot)(slot, "e:cleanup")
+  );
+  (0, import_octane.useEffect)(
+    () => {
+      const handleUpdate = () => force({});
+      document.addEventListener(CONTEXT_UPDATE, handleUpdate);
+      return () => document.removeEventListener(CONTEXT_UPDATE, handleUpdate);
+    },
+    [],
+    (0, import_internal.subSlot)(slot, "e:update")
+  );
+  return (0, import_octane.createElement)(import_Primitive.Primitive.div, {
+    ...layerProps,
+    ref: composedRefs,
+    style: {
+      pointerEvents: isBodyPointerEventsDisabled ? isPointerEventsEnabled ? "auto" : "none" : void 0,
+      ...props.style
+    },
+    onFocusCapture: (0, import_compose_event_handlers.composeEventHandlers)(props.onFocusCapture, focusOutside.onFocusCapture),
+    onBlurCapture: (0, import_compose_event_handlers.composeEventHandlers)(props.onBlurCapture, focusOutside.onBlurCapture),
+    onPointerDownCapture: (0, import_compose_event_handlers.composeEventHandlers)(
+      props.onPointerDownCapture,
+      pointerDownOutside.onPointerDownCapture
+    )
+  });
+}
+function DismissableLayerBranch(props) {
+  const slot = (0, import_internal.S)("DismissableLayerBranch");
+  const { ref: forwardedRef, ...branchProps } = props ?? {};
+  const ref = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "ref"));
+  const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, ref, (0, import_internal.subSlot)(slot, "refs"));
+  (0, import_octane.useEffect)(
+    () => {
+      const node = ref.current;
+      if (node) {
+        layerContext.branches.add(node);
+        return () => {
+          layerContext.branches.delete(node);
+        };
+      }
+    },
+    [],
+    (0, import_internal.subSlot)(slot, "e:branch")
+  );
+  return (0, import_octane.createElement)(import_Primitive.Primitive.div, { ...branchProps, ref: composedRefs });
+}
+function useDismissableLayerSurface(...args) {
+  const slotArg = args[args.length - 1];
+  const slot = typeof slotArg === "symbol" ? slotArg : (0, import_internal.S)("useDismissableLayerSurface");
+  const [node, setNode] = (0, import_octane.useState)(null, (0, import_internal.subSlot)(slot, "node"));
+  (0, import_octane.useEffect)(
+    () => {
+      if (!node) return;
+      layerContext.dismissableSurfaces.add(node);
+      return () => {
+        layerContext.dismissableSurfaces.delete(node);
+      };
+    },
+    [node],
+    (0, import_internal.subSlot)(slot, "e:surface")
+  );
+  return setNode;
+}
+function usePointerDownOutside(onPointerDownOutside, args, slot) {
+  const {
+    ownerDocument,
+    deferPointerDownOutside,
+    isDeferredPointerDownOutsideRef,
+    dismissableSurfaces
+  } = args;
+  const handlePointerDownOutside = (0, import_octane.useEffectEvent)(onPointerDownOutside, (0, import_internal.subSlot)(slot, "cb"));
+  const isPointerInsideReactTreeRef = (0, import_octane.useRef)(false, (0, import_internal.subSlot)(slot, "inside"));
+  const isPointerDownOutsideRef = (0, import_octane.useRef)(false, (0, import_internal.subSlot)(slot, "outside"));
+  const interceptedRef = (0, import_octane.useRef)(/* @__PURE__ */ new Map(), (0, import_internal.subSlot)(slot, "intercepted"));
+  const handleClickRef = (0, import_octane.useRef)(() => {
+  }, (0, import_internal.subSlot)(slot, "click"));
+  (0, import_octane.useEffect)(
+    () => {
+      function resetOutsideInteraction() {
+        isPointerDownOutsideRef.current = false;
+        isDeferredPointerDownOutsideRef.current = false;
+        interceptedRef.current.clear();
+      }
+      function isOutsideInteractionIntercepted() {
+        return Array.from(interceptedRef.current.values()).some(Boolean);
+      }
+      function handleInteractionCapture(event) {
+        if (!isPointerDownOutsideRef.current) return;
+        const target = event.target;
+        const isDismissableSurface = target instanceof Node && [...dismissableSurfaces].some((surface) => surface.contains(target));
+        if (!isDismissableSurface) {
+          interceptedRef.current.set(event.type, true);
+        }
+        if (event.type === "click") {
+          window.setTimeout(() => {
+            if (isPointerDownOutsideRef.current) {
+              handleClickRef.current();
+            }
+          }, 0);
+        }
+      }
+      function handleInteractionBubble(event) {
+        if (isPointerDownOutsideRef.current) {
+          interceptedRef.current.set(event.type, false);
+        }
+      }
+      const handlePointerDown = (event) => {
+        if (event.target && !isPointerInsideReactTreeRef.current) {
+          const eventDetail = { originalEvent: event };
+          const handleAndDispatchPointerDownOutsideEvent = () => {
+            ownerDocument.removeEventListener("click", handleClickRef.current);
+            const wasIntercepted = isOutsideInteractionIntercepted();
+            resetOutsideInteraction();
+            if (!wasIntercepted) {
+              handleAndDispatchCustomEvent(
+                POINTER_DOWN_OUTSIDE,
+                handlePointerDownOutside,
+                eventDetail,
+                { discrete: true }
+              );
+            }
+          };
+          isPointerDownOutsideRef.current = true;
+          isDeferredPointerDownOutsideRef.current = deferPointerDownOutside && event.button === 0;
+          interceptedRef.current.clear();
+          if (!deferPointerDownOutside || event.button !== 0) {
+            handleAndDispatchPointerDownOutsideEvent();
+          } else {
+            ownerDocument.removeEventListener("click", handleClickRef.current);
+            handleClickRef.current = handleAndDispatchPointerDownOutsideEvent;
+            ownerDocument.addEventListener("click", handleClickRef.current, { once: true });
+          }
+        } else {
+          ownerDocument.removeEventListener("click", handleClickRef.current);
+          resetOutsideInteraction();
+        }
+        isPointerInsideReactTreeRef.current = false;
+      };
+      const outsideInteractionEvents = [
+        "pointerup",
+        "mousedown",
+        "mouseup",
+        "touchstart",
+        "touchend",
+        "click"
+      ];
+      for (const eventName of outsideInteractionEvents) {
+        ownerDocument.addEventListener(eventName, handleInteractionCapture, true);
+        ownerDocument.addEventListener(eventName, handleInteractionBubble);
+      }
+      const timerId = window.setTimeout(() => {
+        ownerDocument.addEventListener("pointerdown", handlePointerDown);
+      }, 0);
+      return () => {
+        window.clearTimeout(timerId);
+        ownerDocument.removeEventListener("pointerdown", handlePointerDown);
+        ownerDocument.removeEventListener("click", handleClickRef.current);
+        for (const eventName of outsideInteractionEvents) {
+          ownerDocument.removeEventListener(eventName, handleInteractionCapture, true);
+          ownerDocument.removeEventListener(eventName, handleInteractionBubble);
+        }
+      };
+    },
+    [ownerDocument, deferPointerDownOutside],
+    (0, import_internal.subSlot)(slot, "e:pdo")
+  );
+  return {
+    // ensures we check the COMPONENT tree (not just DOM tree) — capture on the layer.
+    onPointerDownCapture: () => {
+      isPointerInsideReactTreeRef.current = true;
+    }
+  };
+}
+function useFocusOutside(onFocusOutside, ownerDocument, slot) {
+  const handleFocusOutside = (0, import_octane.useEffectEvent)(onFocusOutside, (0, import_internal.subSlot)(slot, "cb"));
+  const isFocusInsideReactTreeRef = (0, import_octane.useRef)(false, (0, import_internal.subSlot)(slot, "inside"));
+  (0, import_octane.useEffect)(
+    () => {
+      const handleFocus = (event) => {
+        if (event.target && !isFocusInsideReactTreeRef.current) {
+          const eventDetail = { originalEvent: event };
+          handleAndDispatchCustomEvent(FOCUS_OUTSIDE, handleFocusOutside, eventDetail, {
+            discrete: false
+          });
+        }
+      };
+      ownerDocument.addEventListener("focusin", handleFocus);
+      return () => ownerDocument.removeEventListener("focusin", handleFocus);
+    },
+    [ownerDocument],
+    (0, import_internal.subSlot)(slot, "e:fo")
+  );
+  return {
+    onFocusCapture: () => {
+      isFocusInsideReactTreeRef.current = true;
+    },
+    onBlurCapture: () => {
+      isFocusInsideReactTreeRef.current = false;
+    }
+  };
+}
+function dispatchUpdate() {
+  document.dispatchEvent(new CustomEvent(CONTEXT_UPDATE));
+}
+function handleAndDispatchCustomEvent(name, handler, detail, { discrete }) {
+  const target = detail.originalEvent.target;
+  const event = new CustomEvent(name, { bubbles: false, cancelable: true, detail });
+  if (handler) target.addEventListener(name, handler, { once: true });
+  if (discrete) {
+    (0, import_Primitive.dispatchDiscreteCustomEvent)(target, event);
+  } else {
+    target.dispatchEvent(event);
+  }
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Branch,
+  DismissableLayer,
+  DismissableLayerBranch,
+  Root,
+  useDismissableLayerSurface
+});

package/dist/cjs/DropdownMenu.cjs

@@ -0,0 +1,296 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var DropdownMenu_exports = {};
+__export(DropdownMenu_exports, {
+  Arrow: () => Arrow,
+  CheckboxItem: () => CheckboxItem,
+  Content: () => Content,
+  DropdownMenu: () => Root,
+  DropdownMenuContent: () => Content,
+  DropdownMenuItem: () => Item,
+  DropdownMenuTrigger: () => Trigger,
+  Group: () => Group,
+  Item: () => Item,
+  ItemIndicator: () => ItemIndicator,
+  Label: () => Label,
+  Portal: () => Portal,
+  RadioGroup: () => RadioGroup,
+  RadioItem: () => RadioItem,
+  Root: () => Root,
+  Separator: () => Separator,
+  Sub: () => Sub,
+  SubContent: () => SubContent,
+  SubTrigger: () => SubTrigger,
+  Trigger: () => Trigger,
+  createDropdownMenuScope: () => createDropdownMenuScope
+});
+module.exports = __toCommonJS(DropdownMenu_exports);
+var import_octane = require("octane");
+var import_compose_event_handlers = require("./compose-event-handlers.cjs");
+var import_compose_refs = require("./compose-refs.cjs");
+var import_context = require("./context.cjs");
+var import_internal = require("./internal.cjs");
+var MenuPrimitive = __toESM(require("./Menu.cjs"), 1);
+var import_Menu = require("./Menu.cjs");
+var import_Primitive = require("./Primitive.cjs");
+var import_useControllableState = require("./useControllableState.cjs");
+var import_useId = require("./useId.cjs");
+const DROPDOWN_MENU_NAME = "DropdownMenu";
+const [createDropdownMenuContext, createDropdownMenuScope] = (0, import_context.createContextScope)(
+  DROPDOWN_MENU_NAME,
+  [import_Menu.createMenuScope]
+);
+const useMenuScope = (0, import_Menu.createMenuScope)();
+const [DropdownMenuProvider, useDropdownMenuContext] = createDropdownMenuContext(DROPDOWN_MENU_NAME);
+function Root(props) {
+  const slot = (0, import_internal.S)("DropdownMenu.Root");
+  const {
+    __scopeDropdownMenu,
+    children,
+    dir,
+    open: openProp,
+    defaultOpen,
+    onOpenChange,
+    modal = true
+  } = props ?? {};
+  const menuScope = useMenuScope(__scopeDropdownMenu, (0, import_internal.subSlot)(slot, "menu"));
+  const triggerRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "trigger"));
+  const [open, setOpen] = (0, import_useControllableState.useControllableState)(
+    { prop: openProp, defaultProp: defaultOpen ?? false, onChange: onOpenChange },
+    (0, import_internal.subSlot)(slot, "open")
+  );
+  return (0, import_octane.createElement)(DropdownMenuProvider, {
+    scope: __scopeDropdownMenu,
+    triggerId: (0, import_useId.useId)((0, import_internal.subSlot)(slot, "triggerId")),
+    triggerRef,
+    contentId: (0, import_useId.useId)((0, import_internal.subSlot)(slot, "contentId")),
+    open,
+    onOpenChange: setOpen,
+    onOpenToggle: (0, import_octane.useCallback)(
+      () => setOpen((prevOpen) => !prevOpen),
+      [setOpen],
+      (0, import_internal.subSlot)(slot, "toggle")
+    ),
+    modal,
+    children: (0, import_octane.createElement)(MenuPrimitive.Root, {
+      ...menuScope,
+      open,
+      onOpenChange: setOpen,
+      dir,
+      modal,
+      children
+    })
+  });
+}
+function Trigger(props) {
+  const slot = (0, import_internal.S)("DropdownMenu.Trigger");
+  const { __scopeDropdownMenu, disabled = false, ref: forwardedRef, ...triggerProps } = props ?? {};
+  const context = useDropdownMenuContext("DropdownMenuTrigger", __scopeDropdownMenu);
+  const menuScope = useMenuScope(__scopeDropdownMenu, (0, import_internal.subSlot)(slot, "menu"));
+  const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, context.triggerRef, (0, import_internal.subSlot)(slot, "refs"));
+  return (0, import_octane.createElement)(MenuPrimitive.Anchor, {
+    asChild: true,
+    ...menuScope,
+    children: (0, import_octane.createElement)(import_Primitive.Primitive.button, {
+      type: "button",
+      id: context.triggerId,
+      "aria-haspopup": "menu",
+      "aria-expanded": context.open,
+      "aria-controls": context.open ? context.contentId : void 0,
+      "data-state": context.open ? "open" : "closed",
+      "data-disabled": disabled ? "" : void 0,
+      disabled,
+      ...triggerProps,
+      ref: composedRefs,
+      onPointerDown: (0, import_compose_event_handlers.composeEventHandlers)(props?.onPointerDown, (event) => {
+        if (!disabled && event.button === 0 && event.ctrlKey === false) {
+          context.onOpenToggle();
+          if (!context.open) event.preventDefault();
+        }
+      }),
+      onKeyDown: (0, import_compose_event_handlers.composeEventHandlers)(props?.onKeyDown, (event) => {
+        if (disabled) return;
+        if (["Enter", " "].includes(event.key)) context.onOpenToggle();
+        if (event.key === "ArrowDown") context.onOpenChange(true);
+        if (["Enter", " ", "ArrowDown"].includes(event.key)) event.preventDefault();
+      })
+    })
+  });
+}
+function Portal(props) {
+  const slot = (0, import_internal.S)("DropdownMenu.Portal");
+  const { __scopeDropdownMenu, ...portalProps } = props ?? {};
+  const menuScope = useMenuScope(__scopeDropdownMenu, (0, import_internal.subSlot)(slot, "menu"));
+  return (0, import_octane.createElement)(MenuPrimitive.Portal, { ...menuScope, ...portalProps });
+}
+function Content(props) {
+  const slot = (0, import_internal.S)("DropdownMenu.Content");
+  const { __scopeDropdownMenu, ...contentProps } = props ?? {};
+  const context = useDropdownMenuContext("DropdownMenuContent", __scopeDropdownMenu);
+  const menuScope = useMenuScope(__scopeDropdownMenu, (0, import_internal.subSlot)(slot, "menu"));
+  const hasInteractedOutsideRef = (0, import_octane.useRef)(false, (0, import_internal.subSlot)(slot, "interacted"));
+  return (0, import_octane.createElement)(MenuPrimitive.Content, {
+    id: context.contentId,
+    "aria-labelledby": context.triggerId,
+    ...menuScope,
+    ...contentProps,
+    onCloseAutoFocus: (0, import_compose_event_handlers.composeEventHandlers)(props?.onCloseAutoFocus, (event) => {
+      if (!hasInteractedOutsideRef.current) context.triggerRef.current?.focus();
+      hasInteractedOutsideRef.current = false;
+      event.preventDefault();
+    }),
+    onInteractOutside: (0, import_compose_event_handlers.composeEventHandlers)(props?.onInteractOutside, (event) => {
+      const originalEvent = event.detail.originalEvent;
+      const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
+      const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
+      if (!context.modal || isRightClick) hasInteractedOutsideRef.current = true;
+    }),
+    style: {
+      ...props?.style,
+      // re-namespace exposed content custom properties
+      "--radix-dropdown-menu-content-transform-origin": "var(--radix-popper-transform-origin)",
+      "--radix-dropdown-menu-content-available-width": "var(--radix-popper-available-width)",
+      "--radix-dropdown-menu-content-available-height": "var(--radix-popper-available-height)",
+      "--radix-dropdown-menu-trigger-width": "var(--radix-popper-anchor-width)",
+      "--radix-dropdown-menu-trigger-height": "var(--radix-popper-anchor-height)"
+    }
+  });
+}
+function Group(props) {
+  const slot = (0, import_internal.S)("DropdownMenu.Group");
+  const { __scopeDropdownMenu, ...groupProps } = props ?? {};
+  const menuScope = useMenuScope(__scopeDropdownMenu, (0, import_internal.subSlot)(slot, "menu"));
+  return (0, import_octane.createElement)(MenuPrimitive.Group, { ...menuScope, ...groupProps });
+}
+function Label(props) {
+  const slot = (0, import_internal.S)("DropdownMenu.Label");
+  const { __scopeDropdownMenu, ...labelProps } = props ?? {};
+  const menuScope = useMenuScope(__scopeDropdownMenu, (0, import_internal.subSlot)(slot, "menu"));
+  return (0, import_octane.createElement)(MenuPrimitive.Label, { ...menuScope, ...labelProps });
+}
+function Item(props) {
+  const slot = (0, import_internal.S)("DropdownMenu.Item");
+  const { __scopeDropdownMenu, ...itemProps } = props ?? {};
+  const menuScope = useMenuScope(__scopeDropdownMenu, (0, import_internal.subSlot)(slot, "menu"));
+  return (0, import_octane.createElement)(MenuPrimitive.Item, { ...menuScope, ...itemProps });
+}
+function CheckboxItem(props) {
+  const slot = (0, import_internal.S)("DropdownMenu.CheckboxItem");
+  const { __scopeDropdownMenu, ...checkboxItemProps } = props ?? {};
+  const menuScope = useMenuScope(__scopeDropdownMenu, (0, import_internal.subSlot)(slot, "menu"));
+  return (0, import_octane.createElement)(MenuPrimitive.CheckboxItem, { ...menuScope, ...checkboxItemProps });
+}
+function RadioGroup(props) {
+  const slot = (0, import_internal.S)("DropdownMenu.RadioGroup");
+  const { __scopeDropdownMenu, ...radioGroupProps } = props ?? {};
+  const menuScope = useMenuScope(__scopeDropdownMenu, (0, import_internal.subSlot)(slot, "menu"));
+  return (0, import_octane.createElement)(MenuPrimitive.RadioGroup, { ...menuScope, ...radioGroupProps });
+}
+function RadioItem(props) {
+  const slot = (0, import_internal.S)("DropdownMenu.RadioItem");
+  const { __scopeDropdownMenu, ...radioItemProps } = props ?? {};
+  const menuScope = useMenuScope(__scopeDropdownMenu, (0, import_internal.subSlot)(slot, "menu"));
+  return (0, import_octane.createElement)(MenuPrimitive.RadioItem, { ...menuScope, ...radioItemProps });
+}
+function ItemIndicator(props) {
+  const slot = (0, import_internal.S)("DropdownMenu.ItemIndicator");
+  const { __scopeDropdownMenu, ...itemIndicatorProps } = props ?? {};
+  const menuScope = useMenuScope(__scopeDropdownMenu, (0, import_internal.subSlot)(slot, "menu"));
+  return (0, import_octane.createElement)(MenuPrimitive.ItemIndicator, { ...menuScope, ...itemIndicatorProps });
+}
+function Separator(props) {
+  const slot = (0, import_internal.S)("DropdownMenu.Separator");
+  const { __scopeDropdownMenu, ...separatorProps } = props ?? {};
+  const menuScope = useMenuScope(__scopeDropdownMenu, (0, import_internal.subSlot)(slot, "menu"));
+  return (0, import_octane.createElement)(MenuPrimitive.Separator, { ...menuScope, ...separatorProps });
+}
+function Arrow(props) {
+  const slot = (0, import_internal.S)("DropdownMenu.Arrow");
+  const { __scopeDropdownMenu, ...arrowProps } = props ?? {};
+  const menuScope = useMenuScope(__scopeDropdownMenu, (0, import_internal.subSlot)(slot, "menu"));
+  return (0, import_octane.createElement)(MenuPrimitive.Arrow, { ...menuScope, ...arrowProps });
+}
+function Sub(props) {
+  const slot = (0, import_internal.S)("DropdownMenu.Sub");
+  const { __scopeDropdownMenu, children, open: openProp, onOpenChange, defaultOpen } = props ?? {};
+  const menuScope = useMenuScope(__scopeDropdownMenu, (0, import_internal.subSlot)(slot, "menu"));
+  const [open, setOpen] = (0, import_useControllableState.useControllableState)(
+    { prop: openProp, defaultProp: defaultOpen ?? false, onChange: onOpenChange },
+    (0, import_internal.subSlot)(slot, "open")
+  );
+  return (0, import_octane.createElement)(MenuPrimitive.Sub, { ...menuScope, open, onOpenChange: setOpen, children });
+}
+function SubTrigger(props) {
+  const slot = (0, import_internal.S)("DropdownMenu.SubTrigger");
+  const { __scopeDropdownMenu, ...subTriggerProps } = props ?? {};
+  const menuScope = useMenuScope(__scopeDropdownMenu, (0, import_internal.subSlot)(slot, "menu"));
+  return (0, import_octane.createElement)(MenuPrimitive.SubTrigger, { ...menuScope, ...subTriggerProps });
+}
+function SubContent(props) {
+  const slot = (0, import_internal.S)("DropdownMenu.SubContent");
+  const { __scopeDropdownMenu, ...subContentProps } = props ?? {};
+  const menuScope = useMenuScope(__scopeDropdownMenu, (0, import_internal.subSlot)(slot, "menu"));
+  return (0, import_octane.createElement)(MenuPrimitive.SubContent, {
+    ...menuScope,
+    ...subContentProps,
+    style: {
+      ...props?.style,
+      // re-namespace exposed content custom properties
+      "--radix-dropdown-menu-content-transform-origin": "var(--radix-popper-transform-origin)",
+      "--radix-dropdown-menu-content-available-width": "var(--radix-popper-available-width)",
+      "--radix-dropdown-menu-content-available-height": "var(--radix-popper-available-height)",
+      "--radix-dropdown-menu-trigger-width": "var(--radix-popper-anchor-width)",
+      "--radix-dropdown-menu-trigger-height": "var(--radix-popper-anchor-height)"
+    }
+  });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Arrow,
+  CheckboxItem,
+  Content,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  Group,
+  Item,
+  ItemIndicator,
+  Label,
+  Portal,
+  RadioGroup,
+  RadioItem,
+  Root,
+  Separator,
+  Sub,
+  SubContent,
+  SubTrigger,
+  Trigger,
+  createDropdownMenuScope
+});