@octanejs/radix 0.1.31 → 0.1.33

package/dist/cjs/Menubar.cjs

@@ -0,0 +1,475 @@
+"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 Menubar_exports = {};
+__export(Menubar_exports, {
+  Arrow: () => Arrow,
+  CheckboxItem: () => CheckboxItem,
+  Content: () => Content,
+  Group: () => Group,
+  Item: () => Item,
+  ItemIndicator: () => ItemIndicator,
+  Label: () => Label,
+  Menu: () => Menu,
+  Menubar: () => Root,
+  MenubarArrow: () => Arrow,
+  MenubarCheckboxItem: () => CheckboxItem,
+  MenubarContent: () => Content,
+  MenubarGroup: () => Group,
+  MenubarItem: () => Item,
+  MenubarItemIndicator: () => ItemIndicator,
+  MenubarLabel: () => Label,
+  MenubarMenu: () => Menu,
+  MenubarPortal: () => Portal,
+  MenubarRadioGroup: () => RadioGroup,
+  MenubarRadioItem: () => RadioItem,
+  MenubarSeparator: () => Separator,
+  MenubarSub: () => Sub,
+  MenubarSubContent: () => SubContent,
+  MenubarSubTrigger: () => SubTrigger,
+  MenubarTrigger: () => Trigger,
+  Portal: () => Portal,
+  RadioGroup: () => RadioGroup,
+  RadioItem: () => RadioItem,
+  Root: () => Root,
+  Separator: () => Separator,
+  Sub: () => Sub,
+  SubContent: () => SubContent,
+  SubTrigger: () => SubTrigger,
+  Trigger: () => Trigger,
+  createMenubarScope: () => createMenubarScope
+});
+module.exports = __toCommonJS(Menubar_exports);
+var import_octane = require("octane");
+var import_collection = require("./collection.cjs");
+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_direction = require("./direction.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 RovingFocusGroup = __toESM(require("./RovingFocusGroup.cjs"), 1);
+var import_RovingFocusGroup = require("./RovingFocusGroup.cjs");
+var import_useControllableState = require("./useControllableState.cjs");
+var import_useId = require("./useId.cjs");
+const MENUBAR_NAME = "Menubar";
+const [Collection, useCollection, createCollectionScope] = (0, import_collection.createCollection)(MENUBAR_NAME);
+const [createMenubarContext, createMenubarScope] = (0, import_context.createContextScope)(MENUBAR_NAME, [
+  createCollectionScope,
+  import_RovingFocusGroup.createRovingFocusGroupScope
+]);
+const useMenuScope = (0, import_Menu.createMenuScope)();
+const useRovingFocusGroupScope = (0, import_RovingFocusGroup.createRovingFocusGroupScope)();
+const [MenubarContextProvider, useMenubarContext] = createMenubarContext(MENUBAR_NAME);
+function Root(props) {
+  const slot = (0, import_internal.S)("Menubar.Root");
+  const {
+    __scopeMenubar,
+    value: valueProp,
+    onValueChange,
+    defaultValue,
+    loop = true,
+    dir,
+    ref: forwardedRef,
+    ...menubarProps
+  } = props ?? {};
+  const direction = (0, import_direction.useDirection)(dir);
+  const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeMenubar, (0, import_internal.subSlot)(slot, "rfs"));
+  const [value, setValue] = (0, import_useControllableState.useControllableState)(
+    { prop: valueProp, onChange: onValueChange, defaultProp: defaultValue ?? "" },
+    (0, import_internal.subSlot)(slot, "value")
+  );
+  const [currentTabStopId, setCurrentTabStopId] = (0, import_octane.useState)(
+    null,
+    (0, import_internal.subSlot)(slot, "tabStop")
+  );
+  return (0, import_octane.createElement)(MenubarContextProvider, {
+    scope: __scopeMenubar,
+    value,
+    onMenuOpen: (0, import_octane.useCallback)(
+      (value2) => {
+        setValue(value2);
+        setCurrentTabStopId(value2);
+      },
+      [setValue],
+      (0, import_internal.subSlot)(slot, "open")
+    ),
+    onMenuClose: (0, import_octane.useCallback)(() => setValue(""), [setValue], (0, import_internal.subSlot)(slot, "close")),
+    onMenuToggle: (0, import_octane.useCallback)(
+      (value2) => {
+        setValue((prevValue) => prevValue ? "" : value2);
+        setCurrentTabStopId(value2);
+      },
+      [setValue],
+      (0, import_internal.subSlot)(slot, "toggle")
+    ),
+    dir: direction,
+    loop,
+    children: (0, import_octane.createElement)(Collection.Provider, {
+      scope: __scopeMenubar,
+      children: (0, import_octane.createElement)(Collection.Slot, {
+        scope: __scopeMenubar,
+        children: (0, import_octane.createElement)(RovingFocusGroup.Root, {
+          asChild: true,
+          ...rovingFocusGroupScope,
+          orientation: "horizontal",
+          loop,
+          dir: direction,
+          currentTabStopId,
+          onCurrentTabStopIdChange: setCurrentTabStopId,
+          children: (0, import_octane.createElement)(import_Primitive.Primitive.div, {
+            role: "menubar",
+            ...menubarProps,
+            ref: forwardedRef
+          })
+        })
+      })
+    })
+  });
+}
+const MENU_NAME = "MenubarMenu";
+const [MenubarMenuProvider, useMenubarMenuContext] = createMenubarContext(MENU_NAME);
+function Menu(props) {
+  const slot = (0, import_internal.S)("Menubar.Menu");
+  const { __scopeMenubar, value: valueProp, ...menuProps } = props ?? {};
+  const autoValue = (0, import_useId.useId)((0, import_internal.subSlot)(slot, "autoValue"));
+  const value = valueProp || autoValue || "LEGACY_REACT_AUTO_VALUE";
+  const context = useMenubarContext(MENU_NAME, __scopeMenubar);
+  const menuScope = useMenuScope(__scopeMenubar, (0, import_internal.subSlot)(slot, "menu"));
+  const triggerRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "triggerRef"));
+  const wasKeyboardTriggerOpenRef = (0, import_octane.useRef)(false, (0, import_internal.subSlot)(slot, "wasKeyboard"));
+  const open = context.value === value;
+  (0, import_octane.useEffect)(
+    () => {
+      if (!open) wasKeyboardTriggerOpenRef.current = false;
+    },
+    [open],
+    (0, import_internal.subSlot)(slot, "e:open")
+  );
+  return (0, import_octane.createElement)(MenubarMenuProvider, {
+    scope: __scopeMenubar,
+    value,
+    triggerId: (0, import_useId.useId)((0, import_internal.subSlot)(slot, "triggerId")),
+    triggerRef,
+    contentId: (0, import_useId.useId)((0, import_internal.subSlot)(slot, "contentId")),
+    wasKeyboardTriggerOpenRef,
+    children: (0, import_octane.createElement)(MenuPrimitive.Root, {
+      ...menuScope,
+      open,
+      onOpenChange: (open2) => {
+        if (!open2) context.onMenuClose();
+      },
+      modal: false,
+      dir: context.dir,
+      ...menuProps
+    })
+  });
+}
+const TRIGGER_NAME = "MenubarTrigger";
+function Trigger(props) {
+  const slot = (0, import_internal.S)("Menubar.Trigger");
+  const { __scopeMenubar, disabled = false, ref: forwardedRef, ...triggerProps } = props ?? {};
+  const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeMenubar, (0, import_internal.subSlot)(slot, "rfs"));
+  const menuScope = useMenuScope(__scopeMenubar, (0, import_internal.subSlot)(slot, "menu"));
+  const context = useMenubarContext(TRIGGER_NAME, __scopeMenubar);
+  const menuContext = useMenubarMenuContext(TRIGGER_NAME, __scopeMenubar);
+  const ref = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "ref"));
+  const composedRefs = (0, import_compose_refs.useComposedRefs)(
+    forwardedRef,
+    ref,
+    menuContext.triggerRef,
+    (0, import_internal.subSlot)(slot, "refs")
+  );
+  const [isFocused, setIsFocused] = (0, import_octane.useState)(false, (0, import_internal.subSlot)(slot, "focused"));
+  const open = context.value === menuContext.value;
+  return (0, import_octane.createElement)(Collection.ItemSlot, {
+    scope: __scopeMenubar,
+    value: menuContext.value,
+    disabled,
+    children: (0, import_octane.createElement)(RovingFocusGroup.Item, {
+      asChild: true,
+      ...rovingFocusGroupScope,
+      focusable: !disabled,
+      tabStopId: menuContext.value,
+      children: (0, import_octane.createElement)(MenuPrimitive.Anchor, {
+        asChild: true,
+        ...menuScope,
+        children: (0, import_octane.createElement)(import_Primitive.Primitive.button, {
+          type: "button",
+          role: "menuitem",
+          id: menuContext.triggerId,
+          "aria-haspopup": "menu",
+          "aria-expanded": open,
+          "aria-controls": open ? menuContext.contentId : void 0,
+          "data-highlighted": isFocused ? "" : void 0,
+          "data-state": 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.onMenuOpen(menuContext.value);
+              if (!open) event.preventDefault();
+            }
+          }),
+          onPointerEnter: (0, import_compose_event_handlers.composeEventHandlers)(props?.onPointerEnter, () => {
+            const menubarOpen = Boolean(context.value);
+            if (menubarOpen && !open) {
+              context.onMenuOpen(menuContext.value);
+              ref.current?.focus();
+            }
+          }),
+          onKeyDown: (0, import_compose_event_handlers.composeEventHandlers)(props?.onKeyDown, (event) => {
+            if (disabled) return;
+            if (["Enter", " "].includes(event.key)) context.onMenuToggle(menuContext.value);
+            if (event.key === "ArrowDown") context.onMenuOpen(menuContext.value);
+            if (["Enter", " ", "ArrowDown"].includes(event.key)) {
+              menuContext.wasKeyboardTriggerOpenRef.current = true;
+              event.preventDefault();
+            }
+          }),
+          onFocus: (0, import_compose_event_handlers.composeEventHandlers)(props?.onFocus, () => setIsFocused(true)),
+          onBlur: (0, import_compose_event_handlers.composeEventHandlers)(props?.onBlur, () => setIsFocused(false))
+        })
+      })
+    })
+  });
+}
+function Portal(props) {
+  const slot = (0, import_internal.S)("Menubar.Portal");
+  const { __scopeMenubar, ...portalProps } = props ?? {};
+  const menuScope = useMenuScope(__scopeMenubar, (0, import_internal.subSlot)(slot, "menu"));
+  return (0, import_octane.createElement)(MenuPrimitive.Portal, { ...menuScope, ...portalProps });
+}
+const CONTENT_NAME = "MenubarContent";
+function Content(props) {
+  const slot = (0, import_internal.S)("Menubar.Content");
+  const { __scopeMenubar, align = "start", ref: forwardedRef, ...contentProps } = props ?? {};
+  const menuScope = useMenuScope(__scopeMenubar, (0, import_internal.subSlot)(slot, "menu"));
+  const context = useMenubarContext(CONTENT_NAME, __scopeMenubar);
+  const menuContext = useMenubarMenuContext(CONTENT_NAME, __scopeMenubar);
+  const getItems = useCollection(__scopeMenubar, (0, import_internal.subSlot)(slot, "items"));
+  const hasInteractedOutsideRef = (0, import_octane.useRef)(false, (0, import_internal.subSlot)(slot, "interacted"));
+  return (0, import_octane.createElement)(MenuPrimitive.Content, {
+    id: menuContext.contentId,
+    "aria-labelledby": menuContext.triggerId,
+    "data-radix-menubar-content": "",
+    ...menuScope,
+    ...contentProps,
+    ref: forwardedRef,
+    align,
+    onCloseAutoFocus: (0, import_compose_event_handlers.composeEventHandlers)(props?.onCloseAutoFocus, (event) => {
+      const menubarOpen = Boolean(context.value);
+      if (!menubarOpen && !hasInteractedOutsideRef.current) {
+        menuContext.triggerRef.current?.focus();
+      }
+      hasInteractedOutsideRef.current = false;
+      event.preventDefault();
+    }),
+    onFocusOutside: (0, import_compose_event_handlers.composeEventHandlers)(props?.onFocusOutside, (event) => {
+      const target = event.target;
+      const isMenubarTrigger = getItems().some((item) => item.ref.current?.contains(target));
+      if (isMenubarTrigger) event.preventDefault();
+    }),
+    onInteractOutside: (0, import_compose_event_handlers.composeEventHandlers)(props?.onInteractOutside, () => {
+      hasInteractedOutsideRef.current = true;
+    }),
+    onEntryFocus: (event) => {
+      if (!menuContext.wasKeyboardTriggerOpenRef.current) event.preventDefault();
+    },
+    onKeyDown: (0, import_compose_event_handlers.composeEventHandlers)(
+      props?.onKeyDown,
+      (event) => {
+        if (["ArrowRight", "ArrowLeft"].includes(event.key)) {
+          const target = event.target;
+          const targetIsSubTrigger = target.hasAttribute("data-radix-menubar-subtrigger");
+          const isKeyDownInsideSubMenu = target.closest("[data-radix-menubar-content]") !== event.currentTarget;
+          const prevMenuKey = context.dir === "rtl" ? "ArrowRight" : "ArrowLeft";
+          const isPrevKey = prevMenuKey === event.key;
+          const isNextKey = !isPrevKey;
+          if (isNextKey && targetIsSubTrigger) return;
+          if (isKeyDownInsideSubMenu && isPrevKey) return;
+          const items = getItems().filter((item) => !item.disabled);
+          let candidateValues = items.map((item) => item.value);
+          if (isPrevKey) candidateValues.reverse();
+          const currentIndex = candidateValues.indexOf(menuContext.value);
+          candidateValues = context.loop ? wrapArray(candidateValues, currentIndex + 1) : candidateValues.slice(currentIndex + 1);
+          const [nextValue] = candidateValues;
+          if (nextValue) context.onMenuOpen(nextValue);
+        }
+      },
+      { checkForDefaultPrevented: false }
+    ),
+    style: {
+      ...props?.style,
+      // re-namespace exposed content custom properties
+      "--radix-menubar-content-transform-origin": "var(--radix-popper-transform-origin)",
+      "--radix-menubar-content-available-width": "var(--radix-popper-available-width)",
+      "--radix-menubar-content-available-height": "var(--radix-popper-available-height)",
+      "--radix-menubar-trigger-width": "var(--radix-popper-anchor-width)",
+      "--radix-menubar-trigger-height": "var(--radix-popper-anchor-height)"
+    }
+  });
+}
+function Group(props) {
+  const slot = (0, import_internal.S)("Menubar.Group");
+  const { __scopeMenubar, ...groupProps } = props ?? {};
+  const menuScope = useMenuScope(__scopeMenubar, (0, import_internal.subSlot)(slot, "menu"));
+  return (0, import_octane.createElement)(MenuPrimitive.Group, { ...menuScope, ...groupProps });
+}
+function Label(props) {
+  const slot = (0, import_internal.S)("Menubar.Label");
+  const { __scopeMenubar, ...labelProps } = props ?? {};
+  const menuScope = useMenuScope(__scopeMenubar, (0, import_internal.subSlot)(slot, "menu"));
+  return (0, import_octane.createElement)(MenuPrimitive.Label, { ...menuScope, ...labelProps });
+}
+function Item(props) {
+  const slot = (0, import_internal.S)("Menubar.Item");
+  const { __scopeMenubar, ...itemProps } = props ?? {};
+  const menuScope = useMenuScope(__scopeMenubar, (0, import_internal.subSlot)(slot, "menu"));
+  return (0, import_octane.createElement)(MenuPrimitive.Item, { ...menuScope, ...itemProps });
+}
+function CheckboxItem(props) {
+  const slot = (0, import_internal.S)("Menubar.CheckboxItem");
+  const { __scopeMenubar, ...checkboxItemProps } = props ?? {};
+  const menuScope = useMenuScope(__scopeMenubar, (0, import_internal.subSlot)(slot, "menu"));
+  return (0, import_octane.createElement)(MenuPrimitive.CheckboxItem, { ...menuScope, ...checkboxItemProps });
+}
+function RadioGroup(props) {
+  const slot = (0, import_internal.S)("Menubar.RadioGroup");
+  const { __scopeMenubar, ...radioGroupProps } = props ?? {};
+  const menuScope = useMenuScope(__scopeMenubar, (0, import_internal.subSlot)(slot, "menu"));
+  return (0, import_octane.createElement)(MenuPrimitive.RadioGroup, { ...menuScope, ...radioGroupProps });
+}
+function RadioItem(props) {
+  const slot = (0, import_internal.S)("Menubar.RadioItem");
+  const { __scopeMenubar, ...radioItemProps } = props ?? {};
+  const menuScope = useMenuScope(__scopeMenubar, (0, import_internal.subSlot)(slot, "menu"));
+  return (0, import_octane.createElement)(MenuPrimitive.RadioItem, { ...menuScope, ...radioItemProps });
+}
+function ItemIndicator(props) {
+  const slot = (0, import_internal.S)("Menubar.ItemIndicator");
+  const { __scopeMenubar, ...itemIndicatorProps } = props ?? {};
+  const menuScope = useMenuScope(__scopeMenubar, (0, import_internal.subSlot)(slot, "menu"));
+  return (0, import_octane.createElement)(MenuPrimitive.ItemIndicator, { ...menuScope, ...itemIndicatorProps });
+}
+function Separator(props) {
+  const slot = (0, import_internal.S)("Menubar.Separator");
+  const { __scopeMenubar, ...separatorProps } = props ?? {};
+  const menuScope = useMenuScope(__scopeMenubar, (0, import_internal.subSlot)(slot, "menu"));
+  return (0, import_octane.createElement)(MenuPrimitive.Separator, { ...menuScope, ...separatorProps });
+}
+function Arrow(props) {
+  const slot = (0, import_internal.S)("Menubar.Arrow");
+  const { __scopeMenubar, ...arrowProps } = props ?? {};
+  const menuScope = useMenuScope(__scopeMenubar, (0, import_internal.subSlot)(slot, "menu"));
+  return (0, import_octane.createElement)(MenuPrimitive.Arrow, { ...menuScope, ...arrowProps });
+}
+function Sub(props) {
+  const slot = (0, import_internal.S)("Menubar.Sub");
+  const { __scopeMenubar, children, open: openProp, onOpenChange, defaultOpen } = props ?? {};
+  const menuScope = useMenuScope(__scopeMenubar, (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)("Menubar.SubTrigger");
+  const { __scopeMenubar, ...subTriggerProps } = props ?? {};
+  const menuScope = useMenuScope(__scopeMenubar, (0, import_internal.subSlot)(slot, "menu"));
+  return (0, import_octane.createElement)(MenuPrimitive.SubTrigger, {
+    "data-radix-menubar-subtrigger": "",
+    ...menuScope,
+    ...subTriggerProps
+  });
+}
+function SubContent(props) {
+  const slot = (0, import_internal.S)("Menubar.SubContent");
+  const { __scopeMenubar, ...subContentProps } = props ?? {};
+  const menuScope = useMenuScope(__scopeMenubar, (0, import_internal.subSlot)(slot, "menu"));
+  return (0, import_octane.createElement)(MenuPrimitive.SubContent, {
+    ...menuScope,
+    "data-radix-menubar-content": "",
+    ...subContentProps,
+    style: {
+      ...props?.style,
+      // re-namespace exposed content custom properties
+      "--radix-menubar-content-transform-origin": "var(--radix-popper-transform-origin)",
+      "--radix-menubar-content-available-width": "var(--radix-popper-available-width)",
+      "--radix-menubar-content-available-height": "var(--radix-popper-available-height)",
+      "--radix-menubar-trigger-width": "var(--radix-popper-anchor-width)",
+      "--radix-menubar-trigger-height": "var(--radix-popper-anchor-height)"
+    }
+  });
+}
+function wrapArray(array, startIndex) {
+  return array.map((_, index) => array[(startIndex + index) % array.length]);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Arrow,
+  CheckboxItem,
+  Content,
+  Group,
+  Item,
+  ItemIndicator,
+  Label,
+  Menu,
+  Menubar,
+  MenubarArrow,
+  MenubarCheckboxItem,
+  MenubarContent,
+  MenubarGroup,
+  MenubarItem,
+  MenubarItemIndicator,
+  MenubarLabel,
+  MenubarMenu,
+  MenubarPortal,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSeparator,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarTrigger,
+  Portal,
+  RadioGroup,
+  RadioItem,
+  Root,
+  Separator,
+  Sub,
+  SubContent,
+  SubTrigger,
+  Trigger,
+  createMenubarScope
+});