@optiaxiom/react 1.9.37 → 1.9.38

package/dist/esm/packages/react/src/menu/Menu.js

@@ -1,201 +1,153 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import { useState, useEffect, useRef, useMemo } from 'react';
-import { Command } from '../command/Command.js';
-import '../command/CommandInput.js';
-import '../command/CommandItem.js';
-import '../command/CommandListbox.js';
-import { resolveItemProperty } from '../command/CommandContext.js';
-import { Dialog } from '../dialog/Dialog.js';
-import '../dialog/DialogBody.js';
-import '../dialog/DialogClose.js';
-import '../dialog/DialogContent.js';
-import '../dialog/DialogFooter.js';
-import '../dialog/DialogForm.js';
-import '../dialog/DialogHeader.js';
-import '../dialog/DialogTrigger.js';
-import '../field/FieldContext.js';
-import { useResponsiveMatches } from '../hooks/useResponsiveMatches.js';
-import { MenuProvider } from './MenuContext.js';
-import { MenuPopover } from './MenuPopover.js';
-import { MenuSubProvider } from './MenuSubContext.js';
-import { useMenuSurface } from './useMenuSurface.js';
-
-function Menu({
-  children,
-  defaultOpen = false,
-  inputValue: inputValueProp,
-  inputVisible: inputVisibleProp,
-  onInputValueChange,
-  onOpenChange,
-  open: openProp,
-  options: optionsProp,
-  placeholder = "Filter...",
-  size: sizeProp,
-  ...props
-}) {
-  const size = useResponsiveMatches({
-    base: "lg",
-    sm: sizeProp ?? "sm"
-  });
-  const Comp = size === "sm" ? MenuPopover : Dialog;
-  const track = useMenuSurface();
-  const [open, setOpen] = useControllableState({
-    caller: "@optiaxiom/react/Menu",
-    defaultProp: defaultOpen,
-    onChange: onOpenChange,
-    prop: openProp
-  });
-  const [inputValue, setInputValue] = useControllableState({
-    caller: "@optiaxiom/react/Menu",
-    defaultProp: "",
-    onChange: onInputValueChange,
-    prop: inputValueProp
-  });
-  const [activeItemStack, setActiveItemStack] = useState([]);
-  const [subMenuOpen, setSubMenuOpen] = useState(false);
-  useEffect(() => {
-    if (inputValue && size === "sm") {
-      setSubMenuOpen(false);
-    }
-  }, [inputValue, size]);
-  useEffect(() => {
-    if (size === "sm") {
-      if (!open) {
-        setSubMenuOpen(false);
-      }
-    } else {
-      if (open) {
-        setActiveItemStack(
-          (activeItemStack2) => activeItemStack2.length ? [] : activeItemStack2
-        );
-      }
-    }
-  }, [open, size]);
-  const contentRef = useRef(null);
-  const inputRef = useRef(null);
-  const itemRef = useRef(null);
-  const triggerRef = useRef(null);
-  const options = useMemo(
-    () => size === "sm" ? optionsProp.map((option) => ({
-      ...option,
-      label: option.subOptions ? resolveItemProperty(option.label, { inputValue }).replace(
-        "\u2026",
-        ""
-      ) : resolveItemProperty(option.label, { inputValue })
-    })) : activeItemStack.length ? activeItemStack.reduce((result, stackItem) => {
-      const stackKey = stackItem.key ?? resolveItemProperty(stackItem.label, { inputValue });
-      for (const resultItem of result) {
-        const resultKey = resultItem.key ?? resolveItemProperty(resultItem.label, { inputValue });
-        if (resultKey === stackKey) {
-          return resolveItemProperty(resultItem.subOptions, {
-            inputValue
-          }) ?? [];
-        }
-      }
-      throw new Error(`Could not find item: ${stackKey}`);
-    }, optionsProp) : optionsProp,
-    [activeItemStack, inputValue, optionsProp, size]
-  );
-  const hasSelectableItem = useMemo(
-    () => options.filter((item) => "selected" in item).length > options.length / 2 && options.length >= 10,
-    [options]
-  );
-  const inputDefaultVisibleRef = useRef(hasSelectableItem);
-  inputDefaultVisibleRef.current = inputVisibleProp === "always" ? true : hasSelectableItem || false;
-  const [inputVisible, setInputVisible] = useState(
-    inputDefaultVisibleRef.current
-  );
-  const [focusVisible, setFocusVisible] = useState(false);
-  useEffect(() => {
-    if (inputValue) {
-      setInputVisible(true);
-    }
-  }, [inputValue]);
-  useEffect(() => {
-    if (open) {
-      setInputVisible(inputDefaultVisibleRef.current);
-    } else {
-      setFocusVisible(false);
-    }
-  }, [open]);
-  useEffect(() => {
-    if (size === "lg") {
-      setInputVisible(inputDefaultVisibleRef.current);
-    }
-  }, [activeItemStack, size]);
-  return /* @__PURE__ */ jsx(Comp, { onOpenChange: setOpen, open, children: /* @__PURE__ */ jsx(
-    MenuProvider,
-    {
-      activeItemStack,
-      focusVisible,
-      inputRef,
-      inputVisible,
-      onSelect: (item, { dismiss }) => {
-        track(item);
-        item.execute?.({ dismiss, inputValue });
-        if (typeof openProp === "undefined" && dismiss) {
-          setOpen(false);
-        }
-      },
-      open,
-      placeholder: activeItemStack.length ? resolveItemProperty(
-        activeItemStack[activeItemStack.length - 1].label,
-        { inputValue }
-      ) : placeholder,
-      setActiveItemStack,
-      setFocusVisible,
-      setOpen,
-      size,
-      triggerRef,
-      children: /* @__PURE__ */ jsx(
-        Command,
-        {
-          enabled: open ? activeItemStack.length + 1 : false,
-          inputValue,
-          onHover: (item, pointer) => {
-            if (!pointer) {
-              setFocusVisible(true);
-            }
-            setSubMenuOpen(
-              pointer && (typeof item.subOptions === "function" || !!item.subOptions?.length)
-            );
-          },
-          onInputValueChange: setInputValue,
-          onSelect: (item, { dismiss }) => {
-            if (typeof item.subOptions === "function" || item.subOptions?.length) {
-              if (size === "lg") {
-                setActiveItemStack((stack) => [...stack ?? [], item]);
-              } else {
-                setSubMenuOpen(true);
-              }
-            } else {
-              track(item);
-              item.execute?.({ dismiss, inputValue });
-              if (typeof openProp === "undefined" && dismiss) {
-                setOpen(false);
-              }
-            }
-          },
-          options,
-          ...props,
-          children: /* @__PURE__ */ jsx(
-            MenuSubProvider,
-            {
-              contentRef,
-              inputRef,
-              itemRef,
-              open: subMenuOpen,
-              setOpen: setSubMenuOpen,
-              children
-            }
-          )
-        }
-      )
-    }
-  ) });
+import { Dialog } from "../dialog/Dialog.js";
+import { useResponsiveMatches } from "../hooks/useResponsiveMatches.js";
+import { resolveItemProperty } from "../command/CommandContext.js";
+import { Command } from "../command/Command.js";
+import { MenuProvider } from "./MenuContext.js";
+import { MenuPopover } from "./MenuPopover.js";
+import { MenuSubProvider } from "./MenuSubContext.js";
+import { useMenuSurface } from "./useMenuSurface.js";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+//#region src/menu/Menu.tsx
+/**
+* Dropdown menu for actions, multi-select, and complex interactions.
+* Supports filtering/search, checkbox/radio items, nested sub-menus,
+* links, and action handlers via `execute`.
+*
+* Must be used with MenuTrigger and MenuContent sub-components. MenuTrigger
+* automatically renders a button with chevron icon, or use MenuTrigger asChild
+* with custom buttons like EllipsisMenuButton for overflow menus.
+*
+* Use Menu when: action menus (edit/delete/archive), multi-select dropdowns,
+* filterable lists, nested menus, or items with links/navigation.
+*
+* Use Select instead when: you need a simple single-select form input
+* with `value`/`onChange` and form submission support.
+*
+* @category overlay
+* @group Menu
+* @since 1.6.0
+*/
+function Menu({ children, defaultOpen = false, inputValue: inputValueProp, inputVisible: inputVisibleProp, onInputValueChange, onOpenChange, open: openProp, options: optionsProp, placeholder = "Filter...", size: sizeProp, ...props }) {
+	const size = useResponsiveMatches({
+		base: "lg",
+		sm: sizeProp ?? "sm"
+	});
+	const Comp = size === "sm" ? MenuPopover : Dialog;
+	const track = useMenuSurface();
+	const [open, setOpen] = useControllableState({
+		caller: "@optiaxiom/react/Menu",
+		defaultProp: defaultOpen,
+		onChange: onOpenChange,
+		prop: openProp
+	});
+	const [inputValue, setInputValue] = useControllableState({
+		caller: "@optiaxiom/react/Menu",
+		defaultProp: "",
+		onChange: onInputValueChange,
+		prop: inputValueProp
+	});
+	const [activeItemStack, setActiveItemStack] = useState([]);
+	const [subMenuOpen, setSubMenuOpen] = useState(false);
+	useEffect(() => {
+		if (inputValue && size === "sm") setSubMenuOpen(false);
+	}, [inputValue, size]);
+	useEffect(() => {
+		if (size === "sm") {
+			if (!open) setSubMenuOpen(false);
+		} else if (open) setActiveItemStack((activeItemStack) => activeItemStack.length ? [] : activeItemStack);
+	}, [open, size]);
+	const contentRef = useRef(null);
+	const inputRef = useRef(null);
+	const itemRef = useRef(null);
+	const triggerRef = useRef(null);
+	const options = useMemo(() => size === "sm" ? optionsProp.map((option) => ({
+		...option,
+		label: option.subOptions ? resolveItemProperty(option.label, { inputValue }).replace("…", "") : resolveItemProperty(option.label, { inputValue })
+	})) : activeItemStack.length ? activeItemStack.reduce((result, stackItem) => {
+		const stackKey = stackItem.key ?? resolveItemProperty(stackItem.label, { inputValue });
+		for (const resultItem of result) if ((resultItem.key ?? resolveItemProperty(resultItem.label, { inputValue })) === stackKey) return resolveItemProperty(resultItem.subOptions, { inputValue }) ?? [];
+		throw new Error(`Could not find item: ${stackKey}`);
+	}, optionsProp) : optionsProp, [
+		activeItemStack,
+		inputValue,
+		optionsProp,
+		size
+	]);
+	const hasSelectableItem = useMemo(() => options.filter((item) => "selected" in item).length > options.length / 2 && options.length >= 10, [options]);
+	const inputDefaultVisibleRef = useRef(hasSelectableItem);
+	inputDefaultVisibleRef.current = inputVisibleProp === "always" ? true : hasSelectableItem || false;
+	const [inputVisible, setInputVisible] = useState(inputDefaultVisibleRef.current);
+	const [focusVisible, setFocusVisible] = useState(false);
+	useEffect(() => {
+		if (inputValue) setInputVisible(true);
+	}, [inputValue]);
+	useEffect(() => {
+		if (open) setInputVisible(inputDefaultVisibleRef.current);
+		else setFocusVisible(false);
+	}, [open]);
+	useEffect(() => {
+		if (size === "lg") setInputVisible(inputDefaultVisibleRef.current);
+	}, [activeItemStack, size]);
+	return /* @__PURE__ */ jsx(Comp, {
+		onOpenChange: setOpen,
+		open,
+		children: /* @__PURE__ */ jsx(MenuProvider, {
+			activeItemStack,
+			focusVisible,
+			inputRef,
+			inputVisible,
+			onSelect: (item, { dismiss }) => {
+				track(item);
+				item.execute?.({
+					dismiss,
+					inputValue
+				});
+				if (typeof openProp === "undefined" && dismiss) setOpen(false);
+			},
+			open,
+			placeholder: activeItemStack.length ? resolveItemProperty(activeItemStack[activeItemStack.length - 1].label, { inputValue }) : placeholder,
+			setActiveItemStack,
+			setFocusVisible,
+			setOpen,
+			size,
+			triggerRef,
+			children: /* @__PURE__ */ jsx(Command, {
+				enabled: open ? activeItemStack.length + 1 : false,
+				inputValue,
+				onHover: (item, pointer) => {
+					if (!pointer) setFocusVisible(true);
+					setSubMenuOpen(pointer && (typeof item.subOptions === "function" || !!item.subOptions?.length));
+				},
+				onInputValueChange: setInputValue,
+				onSelect: (item, { dismiss }) => {
+					if (typeof item.subOptions === "function" || item.subOptions?.length) if (size === "lg") setActiveItemStack((stack) => [...stack ?? [], item]);
+					else setSubMenuOpen(true);
+					else {
+						track(item);
+						item.execute?.({
+							dismiss,
+							inputValue
+						});
+						if (typeof openProp === "undefined" && dismiss) setOpen(false);
+					}
+				},
+				options,
+				...props,
+				children: /* @__PURE__ */ jsx(MenuSubProvider, {
+					contentRef,
+					inputRef,
+					itemRef,
+					open: subMenuOpen,
+					setOpen: setSubMenuOpen,
+					children
+				})
+			})
+		})
+	});
 }
 Menu.displayName = "@optiaxiom/react/Menu";
-
+//#endregion
 export { Menu };

package/dist/esm/packages/react/src/menu/MenuCheckboxItem.js

@@ -1,46 +1,39 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import '../command/Command.js';
-import '../command/CommandInput.js';
-import { CommandItem } from '../command/CommandItem.js';
-import '../command/CommandListbox.js';
-import { useCommandContext, resolveItemProperty } from '../command/CommandContext.js';
-import '../listbox/Listbox.js';
-import { ListboxCheckboxItem } from '../listbox/ListboxCheckboxItem.js';
-import '../listbox/ListboxEmpty.js';
-import '../listbox/ListboxGroup.js';
-import '../listbox/ListboxItem.js';
-import '../listbox/ListboxItemIndicator.js';
-import '../listbox/ListboxItemized.js';
-import '../listbox/ListboxLabel.js';
-import '../listbox/ListboxRadioItem.js';
-import '../listbox/ListboxSeparator.js';
-import '../listbox/ListboxSwitchItem.js';
-import { useMenuSurface } from './useMenuSurface.js';
-
+import { resolveItemProperty, useCommandContext } from "../command/CommandContext.js";
+import { ListboxCheckboxItem } from "../listbox/ListboxCheckboxItem.js";
+import { CommandItem } from "../command/CommandItem.js";
+import { useMenuSurface } from "./useMenuSurface.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/menu/MenuCheckboxItem.tsx
 const MenuCheckboxItem = forwardRef(({ children, ...props }, ref) => {
-  const Comp = props.item.href ? "a" : "div";
-  const { inputValue } = useCommandContext("@optiaxiom/react/MenuCheckboxItem");
-  const track = useMenuSurface();
-  return /* @__PURE__ */ jsx(CommandItem, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsx(
-    ListboxCheckboxItem,
-    {
-      addonBefore: resolveItemProperty(props.item.addon, { inputValue }),
-      asChild: true,
-      description: resolveItemProperty(props.item.description, {
-        inputValue
-      }),
-      onCheckedChange: () => {
-        if (!resolveItemProperty(props.item.disabledReason)) {
-          track(props.item);
-          props.item.execute?.({ dismiss: false, inputValue });
-        }
-      },
-      children: /* @__PURE__ */ jsx(Comp, { ...props.item.href && { href: props.item.href }, children })
-    }
-  ) });
+	const Comp = props.item.href ? "a" : "div";
+	const { inputValue } = useCommandContext("@optiaxiom/react/MenuCheckboxItem");
+	const track = useMenuSurface();
+	return /* @__PURE__ */ jsx(CommandItem, {
+		asChild: true,
+		ref,
+		...props,
+		children: /* @__PURE__ */ jsx(ListboxCheckboxItem, {
+			addonBefore: resolveItemProperty(props.item.addon, { inputValue }),
+			asChild: true,
+			description: resolveItemProperty(props.item.description, { inputValue }),
+			onCheckedChange: () => {
+				if (!resolveItemProperty(props.item.disabledReason)) {
+					track(props.item);
+					props.item.execute?.({
+						dismiss: false,
+						inputValue
+					});
+				}
+			},
+			children: /* @__PURE__ */ jsx(Comp, {
+				...props.item.href && { href: props.item.href },
+				children
+			})
+		})
+	});
 });
 MenuCheckboxItem.displayName = "@optiaxiom/react/MenuCheckboxItem";
-
+//#endregion
 export { MenuCheckboxItem };

package/dist/esm/packages/react/src/menu/MenuContent.js

@@ -1,73 +1,66 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useComposedRefs } from '@radix-ui/react-compose-refs';
-import { forwardRef, useRef, useEffect } from 'react';
-import { useCommandContext } from '../command/CommandContext.js';
-import { Spinner } from '../spinner/Spinner.js';
-import { VisuallyHidden } from '../visually-hidden/VisuallyHidden.js';
-import { useMenuContext } from './MenuContext.js';
-import { MenuDialogContent } from './MenuDialogContent.js';
-import { MenuInput } from './MenuInput.js';
-import { MenuListbox } from './MenuListbox.js';
-import { MenuPopoverContent } from './MenuPopoverContent.js';
-import { useMenuSubContext } from './MenuSubContext.js';
-
-const MenuContent = forwardRef(
-  ({ children, onPointerDown, ...props }, outerRef) => {
-    const innerRef = useRef(null);
-    const ref = useComposedRefs(innerRef, outerRef);
-    const { activeItemStack, inputRef, inputVisible, placeholder, size } = useMenuContext("@optiaxiom/react/MenuContent");
-    const { empty, loading } = useCommandContext(
-      "@optiaxiom/react/MenuContent"
-    );
-    const { setOpen } = useMenuSubContext("@optiaxiom/react/MenuContent");
-    const Comp = size === "sm" ? MenuPopoverContent : MenuDialogContent;
-    useEffect(() => {
-      innerRef.current?.animate([{ scale: 1 }, { scale: 0.97 }, { scale: 1 }], {
-        duration: 150
-      });
-    }, [activeItemStack]);
-    return /* @__PURE__ */ jsxs(
-      Comp,
-      {
-        onPointerDown: (event) => {
-          onPointerDown?.(event);
-          if (event.defaultPrevented) {
-            return;
-          }
-          if (event.target instanceof Element && (event.target.closest('[role="option"]') || inputRef.current?.contains(event.target))) {
-            return;
-          }
-          event.preventDefault();
-          inputRef.current?.focus();
-        },
-        overflow: "hidden",
-        p: size === "sm" ? "4" : "0",
-        ref,
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx(VisuallyHidden, { disabled: inputVisible, children: /* @__PURE__ */ jsx(
-            MenuInput,
-            {
-              addonAfter: (loading === "both" || loading === "spinner") && /* @__PURE__ */ jsx(Spinner, { size: "2xs" }),
-              placeholder
-            }
-          ) }),
-          /* @__PURE__ */ jsx(
-            MenuListbox,
-            {
-              empty,
-              loading: loading === true ? "both" : loading || void 0,
-              onScroll: () => setOpen(false),
-              p: size === "lg" ? "6" : "0",
-              children
-            }
-          )
-        ]
-      }
-    );
-  }
-);
+import { Spinner } from "../spinner/Spinner.js";
+import { VisuallyHidden } from "../visually-hidden/VisuallyHidden.js";
+import { useCommandContext } from "../command/CommandContext.js";
+import { useMenuContext } from "./MenuContext.js";
+import { useMenuSubContext } from "./MenuSubContext.js";
+import { MenuDialogContent } from "./MenuDialogContent.js";
+import { MenuInput } from "./MenuInput.js";
+import { MenuListbox } from "./MenuListbox.js";
+import { MenuPopoverContent } from "./MenuPopoverContent.js";
+import { forwardRef, useEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
+//#region src/menu/MenuContent.tsx
+/**
+* Menu content rendered in a portal with absolute positioning.
+*
+* Rendered as a popover in larger screens and in a dialog in smaller screens by
+* default.
+*
+* @group Menu
+*/
+const MenuContent = forwardRef(({ children, onPointerDown, ...props }, outerRef) => {
+	const innerRef = useRef(null);
+	const ref = useComposedRefs(innerRef, outerRef);
+	const { activeItemStack, inputRef, inputVisible, placeholder, size } = useMenuContext("@optiaxiom/react/MenuContent");
+	const { empty, loading } = useCommandContext("@optiaxiom/react/MenuContent");
+	const { setOpen } = useMenuSubContext("@optiaxiom/react/MenuContent");
+	const Comp = size === "sm" ? MenuPopoverContent : MenuDialogContent;
+	useEffect(() => {
+		innerRef.current?.animate([
+			{ scale: 1 },
+			{ scale: .97 },
+			{ scale: 1 }
+		], { duration: 150 });
+	}, [activeItemStack]);
+	return /* @__PURE__ */ jsxs(Comp, {
+		onPointerDown: (event) => {
+			onPointerDown?.(event);
+			if (event.defaultPrevented) return;
+			if (event.target instanceof Element && (event.target.closest("[role=\"option\"]") || inputRef.current?.contains(event.target))) return;
+			event.preventDefault();
+			inputRef.current?.focus();
+		},
+		overflow: "hidden",
+		p: size === "sm" ? "4" : "0",
+		ref,
+		...props,
+		children: [/* @__PURE__ */ jsx(VisuallyHidden, {
+			disabled: inputVisible,
+			children: /* @__PURE__ */ jsx(MenuInput, {
+				addonAfter: (loading === "both" || loading === "spinner") && /* @__PURE__ */ jsx(Spinner, { size: "2xs" }),
+				placeholder
+			})
+		}), /* @__PURE__ */ jsx(MenuListbox, {
+			empty,
+			loading: loading === true ? "both" : loading || void 0,
+			onScroll: () => setOpen(false),
+			p: size === "lg" ? "6" : "0",
+			children
+		})]
+	});
+});
 MenuContent.displayName = "@optiaxiom/react/MenuContent";
-
+//#endregion
 export { MenuContent };

package/dist/esm/packages/react/src/menu/MenuContext.js

@@ -1,6 +1,7 @@
 "use client";
-import { createContext } from '@radix-ui/react-context';
-
+"use client";
+import { createContext } from "@radix-ui/react-context";
+//#region src/menu/MenuContext.ts
 const [MenuProvider, useMenuContext] = createContext("@optiaxiom/react/Menu");
-
+//#endregion
 export { MenuProvider, useMenuContext };

package/dist/esm/packages/react/src/menu/MenuDialogContent-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-vDw4DFSx.css';
-import './../../../../assets/src/menu/MenuDialogContent.css.ts.vanilla-Tl9PXRid.css';
-import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
-
-var content$2 = recipeRuntime({base:'_1o835vb'});
-
-export { content$2 as content };
+import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-D2KEETGI.css";
+import "./../../../../assets/src/menu/MenuDialogContent.css.ts.vanilla-CmoxpNjN.css";
+//#region src/menu/MenuDialogContent.css.ts
+var content = recipeRuntime({ base: "_1hdwxbg" });
+//#endregion
+export { content };