@optiaxiom/react 3.0.0-next.4 → 3.0.1

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

@@ -1,13 +1,11 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { Popover } from '../popover/Popover.js';
-import '../popover/PopoverAnchor.js';
-import '../popover/PopoverContent.js';
-import '../popover/PopoverTrigger.js';
-
+import { Popover } from "../popover/Popover.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/menu/MenuPopover.tsx
 function MenuPopover(props) {
-  return /* @__PURE__ */ jsx(Popover, { ...props });
+	return /* @__PURE__ */ jsx(Popover, { ...props });
 }
 MenuPopover.displayName = "@optiaxiom/react/MenuPopover";
-
+//#endregion
 export { MenuPopover };

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

@@ -1,54 +1,49 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useModalContext } from '@optiaxiom/globals';
-import { useId } from '@radix-ui/react-id';
-import { createSlot } from '@radix-ui/react-slot';
-import clsx from 'clsx';
-import { forwardRef, useState, useLayoutEffect } from 'react';
-import { RemoveScroll } from 'react-remove-scroll';
-import { useFieldContext } from '../field/FieldContext.js';
-import '../popover/Popover.js';
-import '../popover/PopoverAnchor.js';
-import { PopoverContent } from '../popover/PopoverContent.js';
-import '../popover/PopoverTrigger.js';
-import { VisuallyHidden } from '../visually-hidden/VisuallyHidden.js';
-import { useMenuContext } from './MenuContext.js';
-
-const Slot$2 = createSlot("@optiaxiom/react/MenuPopoverContent");
+import { VisuallyHidden } from "../visually-hidden/VisuallyHidden.js";
+import { useFieldContext } from "../field/FieldContext.js";
+import { PopoverContent } from "../popover/PopoverContent.js";
+import { useMenuContext } from "./MenuContext.js";
+import { useId } from "@radix-ui/react-id";
+import { forwardRef, useLayoutEffect, useState } from "react";
+import { createSlot } from "@radix-ui/react-slot";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useModalContext } from "@optiaxiom/globals";
+import { RemoveScroll } from "react-remove-scroll";
+//#region src/menu/MenuPopoverContent.tsx
+const Slot = createSlot("@optiaxiom/react/MenuPopoverContent");
 const MenuPopoverContent = forwardRef(({ align, "aria-label": ariaLabel, children, ...props }, ref) => {
-  const { shardRef } = useModalContext("@optiaxiom/react/MenuPopoverContent");
-  const { labelId: fieldLabelId } = useFieldContext(
-    "@optiaxiom/react/MenuPopoverContent"
-  );
-  const { triggerRef } = useMenuContext("@optiaxiom/react/MenuPopoverContent");
-  const labelId = useId();
-  const [resolvedAlign, setResolvedAlign] = useState(align);
-  useLayoutEffect(() => {
-    const rect = triggerRef.current?.getBoundingClientRect();
-    if (rect) {
-      const center = rect.left + rect.width / 2;
-      setResolvedAlign(center > window.innerWidth * 0.75 ? "end" : "start");
-    }
-  }, [align, triggerRef]);
-  const content = /* @__PURE__ */ jsxs(
-    PopoverContent,
-    {
-      align: align ?? resolvedAlign,
-      "aria-labelledby": clsx(fieldLabelId ?? triggerRef.current?.id, labelId),
-      ref,
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx(VisuallyHidden, { id: labelId, children: ariaLabel || "Menu" }),
-        children
-      ]
-    }
-  );
-  if (shardRef.current) {
-    return /* @__PURE__ */ jsx(RemoveScroll, { allowPinchZoom: true, as: Slot$2, shards: [shardRef], children: content });
-  } else {
-    return content;
-  }
+	const { shardRef } = useModalContext("@optiaxiom/react/MenuPopoverContent");
+	const { labelId: fieldLabelId } = useFieldContext("@optiaxiom/react/MenuPopoverContent");
+	const { triggerRef } = useMenuContext("@optiaxiom/react/MenuPopoverContent");
+	const labelId = useId();
+	const [resolvedAlign, setResolvedAlign] = useState(align);
+	useLayoutEffect(() => {
+		const rect = triggerRef.current?.getBoundingClientRect();
+		if (rect) setResolvedAlign(rect.left + rect.width / 2 > window.innerWidth * .75 ? "end" : "start");
+	}, [align, triggerRef]);
+	const content = /* @__PURE__ */ jsxs(PopoverContent, {
+		align: align ?? resolvedAlign,
+		"aria-labelledby": clsx(fieldLabelId ?? triggerRef.current?.id, labelId),
+		ref,
+		...props,
+		children: [/* @__PURE__ */ jsx(VisuallyHidden, {
+			id: labelId,
+			children: ariaLabel || "Menu"
+		}), children]
+	});
+	if (shardRef.current)
+ /**
+	* Handle scroll locking when menu is used within a modal.
+	*/
+	return /* @__PURE__ */ jsx(RemoveScroll, {
+		allowPinchZoom: true,
+		as: Slot,
+		shards: [shardRef],
+		children: content
+	});
+	else return content;
 });
 MenuPopoverContent.displayName = "@optiaxiom/react/MenuPopoverContent";
-
+//#endregion
 export { MenuPopoverContent };

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

@@ -1,40 +1,28 @@
 "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 '../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 { ListboxRadioItem } from '../listbox/ListboxRadioItem.js';
-import '../listbox/ListboxSeparator.js';
-import '../listbox/ListboxSwitchItem.js';
-
-const MenuRadioItem = forwardRef(
-  ({ children, ...props }, ref) => {
-    const Comp = props.item.href ? "a" : "div";
-    const { inputValue } = useCommandContext("@optiaxiom/react/MenuRadioItem");
-    return /* @__PURE__ */ jsx(CommandItem, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsx(
-      ListboxRadioItem,
-      {
-        addonBefore: resolveItemProperty(props.item.addon, { inputValue }),
-        asChild: true,
-        description: resolveItemProperty(props.item.description, {
-          inputValue
-        }),
-        children: /* @__PURE__ */ jsx(Comp, { ...props.item.href && { href: props.item.href }, children })
-      }
-    ) });
-  }
-);
+import { resolveItemProperty, useCommandContext } from "../command/CommandContext.js";
+import { ListboxRadioItem } from "../listbox/ListboxRadioItem.js";
+import { CommandItem } from "../command/CommandItem.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/menu/MenuRadioItem.tsx
+const MenuRadioItem = forwardRef(({ children, ...props }, ref) => {
+	const Comp = props.item.href ? "a" : "div";
+	const { inputValue } = useCommandContext("@optiaxiom/react/MenuRadioItem");
+	return /* @__PURE__ */ jsx(CommandItem, {
+		asChild: true,
+		ref,
+		...props,
+		children: /* @__PURE__ */ jsx(ListboxRadioItem, {
+			addonBefore: resolveItemProperty(props.item.addon, { inputValue }),
+			asChild: true,
+			description: resolveItemProperty(props.item.description, { inputValue }),
+			children: /* @__PURE__ */ jsx(Comp, {
+				...props.item.href && { href: props.item.href },
+				children
+			})
+		})
+	});
+});
 MenuRadioItem.displayName = "@optiaxiom/react/MenuRadioItem";
-
+//#endregion
 export { MenuRadioItem };

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

@@ -1,168 +1,119 @@
 "use client";
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { useComposedRefs } from '@radix-ui/react-compose-refs';
-import { useId } from '@radix-ui/react-id';
-import clsx from 'clsx';
-import { forwardRef, useState, useMemo, useRef, useEffect } from 'react';
-import { Command } from '../command/Command.js';
-import '../command/CommandInput.js';
-import '../command/CommandItem.js';
-import '../command/CommandListbox.js';
-import { useCommandContext, resolveItemProperty } from '../command/CommandContext.js';
-import '../popover/Popover.js';
-import { PopoverAnchor } from '../popover/PopoverAnchor.js';
-import { PopoverContent } from '../popover/PopoverContent.js';
-import '../popover/PopoverTrigger.js';
-import '../popover/PopoverContentContext.js';
-import { usePopoverContext } from '../popover/PopoverContext.js';
-import { VisuallyHidden } from '../visually-hidden/VisuallyHidden.js';
-import { useMenuContext } from './MenuContext.js';
-import { MenuListbox } from './MenuListbox.js';
-import { useMenuSubContext, MenuSubProvider } from './MenuSubContext.js';
-import { MenuSubInput } from './MenuSubInput.js';
-
-const MenuSubContent = forwardRef(
-  ({ align = "start", side = "right", ...props }, outerRef) => {
-    const {
-      onSelect,
-      setFocusVisible,
-      setOpen: setRootMenuOpen
-    } = useMenuContext("@optiaxiom/react/MenuSubContent");
-    const {
-      highlightedItem: item,
-      inputValue: parentInputValue,
-      setInputValue: setParentInputValue
-    } = useCommandContext("@optiaxiom/react/MenuSubContent");
-    const {
-      contentRef: parentContentRef,
-      inputRef: parentInputRef,
-      itemRef: parentItemRef
-    } = useMenuSubContext("@optiaxiom/react/MenuSubContent");
-    const { open, presence } = usePopoverContext(
-      "@optiaxiom/react/MenuSubContent"
-    );
-    const labelId = useId();
-    const ref = useComposedRefs(parentContentRef, outerRef);
-    const [inputValue, setInputValue] = useState("");
-    const options = useMemo(
-      () => resolveItemProperty(item?.subOptions, { inputValue }) ?? [],
-      [inputValue, item]
-    );
-    const contentRef = useRef(null);
-    const inputRef = useRef(null);
-    const itemRef = useRef(null);
-    const [subMenuOpen, setSubMenuOpen] = useState(false);
-    useEffect(() => {
-      if (!open) {
-        setSubMenuOpen(false);
-      }
-    }, [open]);
-    useEffect(() => {
-      return () => {
-        setInputValue("");
-        setSubMenuOpen(false);
-      };
-    }, [item]);
-    if (!item || !(open || presence)) {
-      return null;
-    }
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(PopoverAnchor, { virtualRef: parentItemRef }),
-      /* @__PURE__ */ jsxs(
-        PopoverContent,
-        {
-          align,
-          alignOffset: item.subOptionsInputVisible ? -46 : -4,
-          "aria-labelledby": clsx(parentItemRef.current?.id, labelId),
-          maxH: "lg",
-          onCloseAutoFocus: (event) => {
-            event.preventDefault();
-            parentInputRef.current?.focus();
-          },
-          onEscapeKeyDown: () => setRootMenuOpen(false),
-          onPointerDown: (event) => {
-            if (event.defaultPrevented) {
-              return;
-            }
-            if (event.target instanceof Element && (event.target.closest('[role="option"]') || inputRef.current?.contains(event.target))) {
-              event.stopPropagation();
-              return;
-            }
-            event.preventDefault();
-            inputRef.current?.focus();
-          },
-          onPointerEnter: () => {
-            if (item.subOptionsInputVisible) {
-              inputRef.current?.focus();
-            }
-          },
-          onPointerLeave: (event) => {
-            if (item.subOptionsInputVisible) {
-              parentInputRef.current?.focus();
-              event.stopPropagation();
-            }
-          },
-          p: "4",
-          ref,
-          side,
-          sideOffset: 0,
-          ...props,
-          children: [
-            /* @__PURE__ */ jsx(VisuallyHidden, { asChild: true, children: /* @__PURE__ */ jsx("h2", { id: labelId, children: "Submenu" }) }),
-            /* @__PURE__ */ jsxs(
-              Command,
-              {
-                enabled: true,
-                inputValue,
-                onHover: (item2, pointer) => {
-                  if (!pointer) {
-                    setFocusVisible(true);
-                  }
-                  setSubMenuOpen(
-                    pointer && (typeof item2.subOptions === "function" || !!item2.subOptions?.length)
-                  );
-                },
-                onInputValueChange: (inputValue2) => {
-                  if (item.subOptionsInputVisible) {
-                    setInputValue(inputValue2);
-                    return;
-                  }
-                  parentInputRef.current?.focus();
-                  setParentInputValue(inputValue2);
-                },
-                onSelect: (item2, { dismiss }) => {
-                  if (typeof item2.subOptions === "function" || item2.subOptions?.length) {
-                    setSubMenuOpen(true);
-                  } else {
-                    onSelect(item2, { dismiss });
-                  }
-                },
-                options,
-                children: [
-                  /* @__PURE__ */ jsx(VisuallyHidden, { disabled: item.subOptionsInputVisible, children: /* @__PURE__ */ jsx(MenuSubInput, { placeholder: "Filter...", ref: inputRef }) }),
-                  /* @__PURE__ */ jsx(
-                    MenuSubProvider,
-                    {
-                      contentRef,
-                      inputRef,
-                      itemRef,
-                      open: subMenuOpen,
-                      setOpen: setSubMenuOpen,
-                      children: /* @__PURE__ */ jsx(MenuListbox, { onScroll: () => setSubMenuOpen(false) })
-                    }
-                  )
-                ]
-              },
-              item.key ?? resolveItemProperty(item.label, {
-                inputValue: parentInputValue
-              })
-            )
-          ]
-        }
-      )
-    ] });
-  }
-);
+import { VisuallyHidden } from "../visually-hidden/VisuallyHidden.js";
+import { resolveItemProperty, useCommandContext } from "../command/CommandContext.js";
+import { Command } from "../command/Command.js";
+import { usePopoverContext } from "../popover/PopoverContext.js";
+import { PopoverAnchor } from "../popover/PopoverAnchor.js";
+import { PopoverContent } from "../popover/PopoverContent.js";
+import { useMenuContext } from "./MenuContext.js";
+import { MenuSubProvider, useMenuSubContext } from "./MenuSubContext.js";
+import { MenuSubInput } from "./MenuSubInput.js";
+import { MenuListbox } from "./MenuListbox.js";
+import { useId } from "@radix-ui/react-id";
+import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import clsx from "clsx";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
+//#region src/menu/MenuSubContent.tsx
+const MenuSubContent = forwardRef(({ align = "start", side = "right", ...props }, outerRef) => {
+	const { onSelect, setFocusVisible, setOpen: setRootMenuOpen } = useMenuContext("@optiaxiom/react/MenuSubContent");
+	const { highlightedItem: item, inputValue: parentInputValue, setInputValue: setParentInputValue } = useCommandContext("@optiaxiom/react/MenuSubContent");
+	const { contentRef: parentContentRef, inputRef: parentInputRef, itemRef: parentItemRef } = useMenuSubContext("@optiaxiom/react/MenuSubContent");
+	const { open, presence } = usePopoverContext("@optiaxiom/react/MenuSubContent");
+	const labelId = useId();
+	const ref = useComposedRefs(parentContentRef, outerRef);
+	const [inputValue, setInputValue] = useState("");
+	const options = useMemo(() => resolveItemProperty(item?.subOptions, { inputValue }) ?? [], [inputValue, item]);
+	const contentRef = useRef(null);
+	const inputRef = useRef(null);
+	const itemRef = useRef(null);
+	const [subMenuOpen, setSubMenuOpen] = useState(false);
+	useEffect(() => {
+		if (!open) setSubMenuOpen(false);
+	}, [open]);
+	useEffect(() => {
+		return () => {
+			setInputValue("");
+			setSubMenuOpen(false);
+		};
+	}, [item]);
+	if (!item || !(open || presence)) return null;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(PopoverAnchor, { virtualRef: parentItemRef }), /* @__PURE__ */ jsxs(PopoverContent, {
+		align,
+		alignOffset: item.subOptionsInputVisible ? -46 : -4,
+		"aria-labelledby": clsx(parentItemRef.current?.id, labelId),
+		maxH: "lg",
+		onCloseAutoFocus: (event) => {
+			event.preventDefault();
+			parentInputRef.current?.focus();
+		},
+		onEscapeKeyDown: () => setRootMenuOpen(false),
+		onPointerDown: (event) => {
+			if (event.defaultPrevented) return;
+			if (event.target instanceof Element && (event.target.closest("[role=\"option\"]") || inputRef.current?.contains(event.target))) {
+				event.stopPropagation();
+				return;
+			}
+			event.preventDefault();
+			inputRef.current?.focus();
+		},
+		onPointerEnter: () => {
+			if (item.subOptionsInputVisible) inputRef.current?.focus();
+		},
+		onPointerLeave: (event) => {
+			if (item.subOptionsInputVisible) {
+				parentInputRef.current?.focus();
+				event.stopPropagation();
+			}
+		},
+		p: "4",
+		ref,
+		side,
+		sideOffset: 0,
+		...props,
+		children: [/* @__PURE__ */ jsx(VisuallyHidden, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx("h2", {
+				id: labelId,
+				children: "Submenu"
+			})
+		}), /* @__PURE__ */ jsxs(Command, {
+			enabled: true,
+			inputValue,
+			onHover: (item, pointer) => {
+				if (!pointer) setFocusVisible(true);
+				setSubMenuOpen(pointer && (typeof item.subOptions === "function" || !!item.subOptions?.length));
+			},
+			onInputValueChange: (inputValue) => {
+				if (item.subOptionsInputVisible) {
+					setInputValue(inputValue);
+					return;
+				}
+				parentInputRef.current?.focus();
+				setParentInputValue(inputValue);
+			},
+			onSelect: (item, { dismiss }) => {
+				if (typeof item.subOptions === "function" || item.subOptions?.length) setSubMenuOpen(true);
+				else onSelect(item, { dismiss });
+			},
+			options,
+			children: [/* @__PURE__ */ jsx(VisuallyHidden, {
+				disabled: item.subOptionsInputVisible,
+				children: /* @__PURE__ */ jsx(MenuSubInput, {
+					placeholder: "Filter...",
+					ref: inputRef
+				})
+			}), /* @__PURE__ */ jsx(MenuSubProvider, {
+				contentRef,
+				inputRef,
+				itemRef,
+				open: subMenuOpen,
+				setOpen: setSubMenuOpen,
+				children: /* @__PURE__ */ jsx(MenuListbox, { onScroll: () => setSubMenuOpen(false) })
+			})]
+		}, item.key ?? resolveItemProperty(item.label, { inputValue: parentInputValue }))]
+	})] });
+});
 MenuSubContent.displayName = "@optiaxiom/react/MenuSubContent";
-
+//#endregion
 export { MenuSubContent };

package/dist/esm/packages/react/src/menu/MenuSubContext.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/MenuSubContext.ts
 const [MenuSubProvider, useMenuSubContext] = createContext("@optiaxiom/react/MenuSub");
-
+//#endregion
 export { MenuSubProvider, useMenuSubContext };

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

@@ -1,48 +1,32 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import '../command/Command.js';
-import { CommandInput } from '../command/CommandInput.js';
-import '../command/CommandItem.js';
-import '../command/CommandListbox.js';
-import { useCommandContext } from '../command/CommandContext.js';
-import { useMenuSubContext } from './MenuSubContext.js';
-
-const MenuSubInput = forwardRef(
-  ({ onKeyDown, ...props }, ref) => {
-    const { downshift, highlightedItem } = useCommandContext(
-      "@optiaxiom/react/MenuSubInput"
-    );
-    const { setOpen } = useMenuSubContext("@optiaxiom/react/MenuSubInput");
-    return /* @__PURE__ */ jsx(
-      CommandInput,
-      {
-        m: "4",
-        onKeyDown: (event) => {
-          onKeyDown?.(event);
-          if (event.defaultPrevented) {
-            return;
-          }
-          if (!(event.target instanceof HTMLInputElement)) {
-            return;
-          }
-          if (event.target.value) {
-            return;
-          }
-          if (event.key === "ArrowLeft") {
-            event.preventDefault();
-            setOpen(false);
-          } else if (event.key === "ArrowRight" && (typeof highlightedItem?.subOptions === "function" || highlightedItem?.subOptions?.length)) {
-            event.preventDefault();
-            downshift.selectItem(highlightedItem);
-          }
-        },
-        ref,
-        ...props
-      }
-    );
-  }
-);
+import { useCommandContext } from "../command/CommandContext.js";
+import { CommandInput } from "../command/CommandInput.js";
+import { useMenuSubContext } from "./MenuSubContext.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/menu/MenuSubInput.tsx
+const MenuSubInput = forwardRef(({ onKeyDown, ...props }, ref) => {
+	const { downshift, highlightedItem } = useCommandContext("@optiaxiom/react/MenuSubInput");
+	const { setOpen } = useMenuSubContext("@optiaxiom/react/MenuSubInput");
+	return /* @__PURE__ */ jsx(CommandInput, {
+		m: "4",
+		onKeyDown: (event) => {
+			onKeyDown?.(event);
+			if (event.defaultPrevented) return;
+			if (!(event.target instanceof HTMLInputElement)) return;
+			if (event.target.value) return;
+			if (event.key === "ArrowLeft") {
+				event.preventDefault();
+				setOpen(false);
+			} else if (event.key === "ArrowRight" && (typeof highlightedItem?.subOptions === "function" || highlightedItem?.subOptions?.length)) {
+				event.preventDefault();
+				downshift.selectItem(highlightedItem);
+			}
+		},
+		ref,
+		...props
+	});
+});
 MenuSubInput.displayName = "@optiaxiom/react/MenuSubInput";
-
+//#endregion
 export { MenuSubInput };