@enonic/ui 0.13.0 → 0.13.2

package/dist/enonic-ui.es.js

@@ -1,9 +1,8 @@
 import { options, Fragment } from "preact";
-import { createContext, useContext, useId, useCallback, forwardRef, useState, useMemo, useEffect, createElement, useRef, isValidElement, Children, createPortal as createPortal$1 } from "react";
+import { createContext, useContext, useId, useCallback, forwardRef, useState, useMemo, useEffect, useRef, createElement, isValidElement, Children, createPortal as createPortal$1 } from "react";
 import { Slot, Root } from "@radix-ui/react-slot";
 import { FocusTrap } from "focus-trap-react";
 import { createPortal } from "react-dom";
-import { useState as useState$1 } from "preact/hooks";
 var f = 0;
 function u(e, t, n, o, i, u2) {
   t || (t = {});
@@ -13,7 +12,7 @@ function u(e, t, n, o, i, u2) {
   if ("function" == typeof e && (a = e.defaultProps)) for (c in a) void 0 === p[c] && (p[c] = a[c]);
   return options.vnode && options.vnode(l), l;
 }
-const AvatarContext = createContext(null);
+const AvatarContext = createContext(void 0);
 const AvatarProvider = ({ value, children }) => {
   return /* @__PURE__ */ u(AvatarContext.Provider, { value, children });
 };
@@ -25,7 +24,7 @@ const useAvatar = () => {
   }
   return ctx;
 };
-const ComboboxContext = createContext(null);
+const ComboboxContext = createContext(void 0);
 const ComboboxProvider = ({ value, children }) => {
   return /* @__PURE__ */ u(ComboboxContext.Provider, { value, children });
 };
@@ -59,7 +58,7 @@ const usePrefixedId = (providedId, prefix) => {
   const context = useContext(IdContext);
   return [context?.prefix, prefix, baseId].filter(Boolean).join("-");
 };
-const ListboxContext = createContext(null);
+const ListboxContext = createContext(void 0);
 const ListboxProvider = ({ value, children }) => {
   return /* @__PURE__ */ u(ListboxContext.Provider, { value, children });
 };
@@ -82,6 +81,27 @@ const useMenu = () => {
   }
   return context;
 };
+function generateAriaId(baseId, suffix) {
+  return `${baseId}-${suffix}`;
+}
+function generateAriaIds(baseId, parts) {
+  return parts.reduce(
+    (acc, part) => {
+      acc[part] = generateAriaId(baseId, part);
+      return acc;
+    },
+    {}
+  );
+}
+function generateItemId(baseId, componentType, itemValue) {
+  return `${baseId}-${componentType}-item-${itemValue}`;
+}
+function getActiveDescendantId(baseId, componentType, activeValue) {
+  if (!activeValue) {
+    return void 0;
+  }
+  return generateItemId(baseId, componentType, activeValue);
+}
 function r(e) {
   var t, f2, n = "";
   if ("string" == typeof e || "number" == typeof e) n += e;
@@ -3233,7 +3253,7 @@ const Avatar = Object.assign(AvatarRoot, {
 const buttonVariants = cva(
   [
     "inline-flex items-center justify-center",
-    "text-main font-medium",
+    "text-main font-semibold",
     "box-border rounded-sm transition-highlight",
     "focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:ring-offset-0",
     "disabled:select-none disabled:pointer-events-none disabled:opacity-30",
@@ -3262,11 +3282,11 @@ const buttonVariants = cva(
 const getIconSize = (size) => {
   switch (size) {
     case "sm":
-      return 16;
+      return 14;
     case "md":
-      return 18;
-    case "lg":
       return 20;
+    case "lg":
+      return 24;
   }
 };
 const Button = forwardRef(
@@ -3307,6 +3327,159 @@ const Button = forwardRef(
   }
 );
 Button.displayName = "Button";
+const useScrollLock = (lock, element) => {
+  useEffect(() => {
+    if (!lock) {
+      return;
+    }
+    const target = element ?? document.body;
+    const originalOverflow = target.style.overflow;
+    target.style.overflow = "hidden";
+    return () => {
+      target.style.overflow = originalOverflow;
+    };
+  }, [lock, element]);
+};
+function useControlledState(controlledValue, defaultValue, onChange) {
+  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+  const isControlled = controlledValue !== void 0;
+  const value = isControlled ? controlledValue : uncontrolledValue;
+  const setValue = useCallback(
+    (nextValue) => {
+      if (!isControlled) {
+        setUncontrolledValue(nextValue);
+      }
+      onChange?.(nextValue);
+    },
+    [isControlled, onChange]
+  );
+  return [value, setValue];
+}
+function useItemRegistry() {
+  const itemsRef = useRef(/* @__PURE__ */ new Map());
+  const registerItem = useCallback((id, disabled = false) => {
+    itemsRef.current.set(id, { disabled });
+  }, []);
+  const unregisterItem = useCallback((id) => {
+    itemsRef.current.delete(id);
+  }, []);
+  const getItems = useCallback(() => {
+    return Array.from(itemsRef.current.keys());
+  }, []);
+  const isItemDisabled = useCallback((id) => {
+    return itemsRef.current.get(id)?.disabled ?? false;
+  }, []);
+  return {
+    registerItem,
+    unregisterItem,
+    getItems,
+    isItemDisabled
+  };
+}
+function useKeyboardNavigation(config) {
+  const {
+    getItems,
+    isItemDisabled,
+    active,
+    setActive,
+    loop = false,
+    orientation = "vertical",
+    onSelect,
+    onEscape
+  } = config;
+  const moveActive = useCallback(
+    (delta) => {
+      const items = getItems();
+      if (!items.length) {
+        return;
+      }
+      const currentIndex = active ? items.indexOf(active) : -1;
+      let newIndex;
+      let attempts = 0;
+      const maxAttempts = items.length;
+      if (currentIndex === -1) {
+        newIndex = delta > 0 ? 0 : items.length - 1;
+      } else {
+        newIndex = currentIndex + delta;
+      }
+      while (attempts < maxAttempts) {
+        if (loop) {
+          if (newIndex < 0) {
+            newIndex = items.length - 1;
+          } else if (newIndex >= items.length) {
+            newIndex = 0;
+          }
+        } else {
+          if (newIndex < 0 || newIndex >= items.length) {
+            return;
+          }
+        }
+        if (!isItemDisabled(items[newIndex])) {
+          setActive(items[newIndex]);
+          return;
+        }
+        newIndex += delta;
+        attempts++;
+      }
+    },
+    [getItems, active, setActive, loop, isItemDisabled]
+  );
+  const handleKeyDown = useCallback(
+    (e) => {
+      const items = getItems();
+      if (!items.length) {
+        return;
+      }
+      const isVertical = orientation === "vertical";
+      const nextKey = isVertical ? "ArrowDown" : "ArrowRight";
+      const prevKey = isVertical ? "ArrowUp" : "ArrowLeft";
+      switch (e.key) {
+        case nextKey:
+          e.preventDefault();
+          moveActive(1);
+          break;
+        case prevKey:
+          e.preventDefault();
+          moveActive(-1);
+          break;
+        case "Home":
+          e.preventDefault();
+          {
+            const firstEnabled = items.find((id) => !isItemDisabled(id));
+            if (firstEnabled) {
+              setActive(firstEnabled);
+            }
+          }
+          break;
+        case "End":
+          e.preventDefault();
+          {
+            const lastEnabled = [...items].reverse().find((id) => !isItemDisabled(id));
+            if (lastEnabled) {
+              setActive(lastEnabled);
+            }
+          }
+          break;
+        case "Enter":
+        case " ":
+          e.preventDefault();
+          if (active && !isItemDisabled(active)) {
+            onSelect?.(active);
+          }
+          break;
+        case "Escape":
+          e.preventDefault();
+          onEscape?.();
+          break;
+      }
+    },
+    [getItems, active, moveActive, setActive, isItemDisabled, orientation, onSelect, onEscape]
+  );
+  return {
+    moveActive,
+    handleKeyDown
+  };
+}
 /**
  * @license lucide-react v0.545.0 - ISC
  *
@@ -3570,9 +3743,7 @@ const Checkbox = forwardRef(
     const inputId = usePrefixedId(unwrap(id));
     const state = error ? "error" : "default";
     const editable = !disabled && !readOnly;
-    const [uncontrolledChecked, setUncontrolledChecked] = useState(defaultChecked);
-    const isControlled = checked !== void 0;
-    const checkedState = isControlled ? checked : uncontrolledChecked;
+    const [checkedState, setCheckedState] = useControlledState(checked, defaultChecked, onCheckedChange);
     const isIndeterminate = checkedState === "indeterminate";
     const isChecked = checkedState === true;
     const handleChange = (e) => {
@@ -3583,10 +3754,7 @@ const Checkbox = forwardRef(
       } else {
         nextValue = e.currentTarget.checked;
       }
-      if (!isControlled) {
-        setUncontrolledChecked(nextValue);
-      }
-      onCheckedChange?.(nextValue);
+      setCheckedState(nextValue);
     };
     return /* @__PURE__ */ u("div", { children: [
       /* @__PURE__ */ u(
@@ -3687,141 +3855,103 @@ const IconButton = forwardRef(
   }
 );
 IconButton.displayName = "IconButton";
+const EMPTY_SELECTION$1 = [];
 const ComboboxRoot = ({
   children,
   open: controlledOpen,
+  defaultOpen = false,
   onOpenChange,
   closeOnBlur = true,
   value,
+  defaultValue = "",
   onChange,
   disabled = false,
   error = false,
   selectionMode = "single",
   selection: controlledSelection,
-  onSelectionChange
+  defaultSelection = EMPTY_SELECTION$1,
+  onSelectionChange,
+  active: controlledActive,
+  defaultActive,
+  setActive
 }) => {
   const baseId = usePrefixedId();
-  const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
-  const isOpenControlled = controlledOpen !== void 0;
-  const open = isOpenControlled ? controlledOpen : uncontrolledOpen;
-  const setOpen = useCallback(
-    (next) => {
-      if (!isOpenControlled) {
-        setUncontrolledOpen(next);
-      }
-      onOpenChange?.(next);
-    },
-    [isOpenControlled, onOpenChange]
-  );
-  const [uncontrolledSelection, setUncontrolledSelection] = useState([]);
+  const [open, setOpenInternal] = useControlledState(controlledOpen, defaultOpen, onOpenChange);
+  const [inputValue, setInputValueInternal] = useControlledState(value, defaultValue, onChange);
+  const [uncontrolledSelection, setUncontrolledSelection] = useState(() => new Set(defaultSelection));
   const isSelectionControlled = controlledSelection !== void 0;
-  const selectedItems = isSelectionControlled ? controlledSelection : uncontrolledSelection;
+  const selectionSet = useMemo(
+    () => isSelectionControlled ? new Set(controlledSelection) : uncontrolledSelection,
+    [isSelectionControlled, controlledSelection, uncontrolledSelection]
+  );
   const onSelectionChangeInner = useCallback(
     (newSelection) => {
+      const newSet = new Set(newSelection);
       if (!isSelectionControlled) {
-        setUncontrolledSelection(newSelection);
+        setUncontrolledSelection(newSet);
       }
       onSelectionChange?.(newSelection);
       if (selectionMode === "single") {
-        setOpen(false);
+        setOpenInternal(false);
       }
     },
-    [isSelectionControlled, selectionMode, setOpen, onSelectionChange, selectedItems]
+    [isSelectionControlled, selectionMode, setOpenInternal, onSelectionChange]
   );
-  const [uncontrolledInput, setUncontrolledInput] = useState("");
-  const isInputControlled = value !== void 0;
-  const inputValue = isInputControlled ? value : uncontrolledInput;
+  const [activeInternal, setActiveInternal] = useControlledState(controlledActive, defaultActive, setActive);
+  const { registerItem, unregisterItem, getItems, isItemDisabled } = useItemRegistry();
   const setInputValue = useCallback(
     (next) => {
-      if (!isInputControlled) {
-        setUncontrolledInput(next);
-      }
-      onChange?.(next);
-      setOpen(true);
+      setInputValueInternal(next);
+      setOpenInternal(true);
     },
-    [isInputControlled, onChange, setOpen]
+    [setInputValueInternal, setOpenInternal]
   );
-  const toggleValueSelection = useCallback(
-    (value2) => {
-      let newSelection = [];
-      if (selectionMode === "multiple") {
-        if (selectedItems.includes(value2)) {
-          newSelection = selectedItems.filter((item) => item !== value2);
-        } else {
-          newSelection = [...selectedItems, value2];
-        }
-      } else {
-        newSelection = [value2];
-      }
-      onSelectionChangeInner(newSelection);
+  const setOpen = useCallback(
+    (next) => {
+      setOpenInternal(next);
     },
-    [selectionMode, selectedItems, onSelectionChangeInner]
+    [setOpenInternal]
   );
-  const [active, setActive] = useState(void 0);
-  const innerRef = useRef(null);
-  const getItems = useCallback(() => {
-    const container = innerRef.current;
-    if (!container) {
-      return [];
+  const { handleKeyDown: handleNavKeyDown } = useKeyboardNavigation({
+    getItems,
+    isItemDisabled,
+    active: activeInternal,
+    setActive: setActiveInternal,
+    loop: false,
+    orientation: "vertical",
+    onSelect: (id) => {
+      const newSelection = selectionMode === "multiple" ? selectionSet.has(id) ? Array.from(selectionSet).filter((item) => item !== id) : [...Array.from(selectionSet), id] : [id];
+      onSelectionChangeInner(newSelection);
     }
-    const optionNodes = container.querySelectorAll('[role="option"][data-value]');
-    return Array.from(optionNodes).map((node) => node.dataset.value).filter((v) => v !== void 0);
-  }, []);
-  const moveActive = useCallback(
-    (delta) => {
-      const items = getItems();
-      if (!items.length) {
-        return;
-      }
-      const currentIndex = active ? items.indexOf(active) : -1;
-      const newIndex = Math.max(0, Math.min(items.length - 1, currentIndex + delta));
-      setActive(items[newIndex]);
-    },
-    [active, setActive, getItems]
-  );
+  });
   const keyHandler = useCallback(
     (e) => {
       if (disabled) {
         return;
       }
-      const items = getItems();
-      if (e.key === "ArrowDown") {
-        e.preventDefault();
-        setOpen(true);
-        moveActive(1);
-      } else if (e.key === "ArrowUp") {
-        setOpen(true);
-        moveActive(-1);
-      } else if (e.key === "Home") {
-        e.preventDefault();
-        setActive(items[0]);
-      } else if (e.key === "End") {
-        e.preventDefault();
-        setActive(items[items.length - 1]);
-      } else if (e.key === "Enter") {
-        if (open) {
+      if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+        if (!open) {
           e.preventDefault();
-          if (active) {
-            toggleValueSelection(active);
-          }
-          setOpen(false);
-          setActive(items[0]);
+          setOpenInternal(true);
         }
-      } else if (e.key === "Escape") {
-        setOpen(false);
-        setActive(items[0]);
       }
+      if (e.key === "Escape") {
+        e.preventDefault();
+        setOpenInternal(false);
+        return;
+      }
+      handleNavKeyDown(e);
     },
-    [disabled, moveActive, setOpen, toggleValueSelection, open]
+    [disabled, open, setOpenInternal, handleNavKeyDown]
   );
   useEffect(() => {
-    if (open && active === void 0) {
+    if (open && activeInternal === void 0) {
       const items = getItems();
       if (items.length > 0) {
-        setActive(items[0]);
+        setActiveInternal(items[0]);
       }
     }
-  }, [open, active, getItems]);
+  }, [open, activeInternal, getItems, setActiveInternal]);
   const context = useMemo(
     () => ({
       open,
@@ -3829,36 +3959,52 @@ const ComboboxRoot = ({
       inputValue,
       setInputValue,
       baseId,
-      active,
+      active: activeInternal,
       disabled,
       error,
       closeOnBlur,
       keyHandler,
-      selection: selectedItems
+      selection: selectionSet
     }),
-    [open, setOpen, closeOnBlur, keyHandler, inputValue, setInputValue, active, baseId, disabled, error, selectedItems]
+    [
+      open,
+      setOpen,
+      closeOnBlur,
+      keyHandler,
+      inputValue,
+      setInputValue,
+      activeInternal,
+      baseId,
+      disabled,
+      error,
+      selectionSet
+    ]
   );
-  return /* @__PURE__ */ u("div", { ref: innerRef, children: /* @__PURE__ */ u(ComboboxProvider, { value: context, children: /* @__PURE__ */ u(
+  return /* @__PURE__ */ u(ComboboxProvider, { value: context, children: /* @__PURE__ */ u(
     Listbox.Root,
     {
       selectionMode,
-      selection: selectedItems,
+      selection: Array.from(selectionSet),
       onSelectionChange: onSelectionChangeInner,
       disabled,
-      active,
+      active: activeInternal,
       focusable: false,
       baseId,
-      setActive,
+      setActive: setActiveInternal,
       keyHandler,
+      registerItem,
+      unregisterItem,
+      getItems,
+      isItemDisabled,
       children
     }
-  ) }) });
+  ) });
 };
 ComboboxRoot.displayName = "Combobox.Root";
 const ComboboxContent = forwardRef(
   ({ className, children }, ref) => {
-    const { setOpen, baseId, closeOnBlur } = useCombobox();
     const innerRef = useRef(null);
+    const { setOpen, baseId, closeOnBlur } = useCombobox();
     const handleFocusOut = closeOnBlur ? useCallback(
       (e) => {
         const nextTarget = e.relatedTarget;
@@ -3875,6 +4021,7 @@ const ComboboxContent = forwardRef(
     );
   }
 );
+ComboboxContent.displayName = "Combobox.Content";
 const comboboxControlVariants = cva(
   [
     "flex items-center",
@@ -3925,8 +4072,8 @@ const ComboboxControl = ({ children, className }) => {
 ComboboxControl.displayName = "Combobox.Control";
 const ComboboxInput = forwardRef(
   ({ className, placeholder, ...props }, ref) => {
-    const { inputValue, setInputValue, open, keyHandler, selection, baseId, active, disabled } = useCombobox();
     const innerRef = useRef(null);
+    const { inputValue, setInputValue, open, keyHandler, selection, baseId, active, disabled, error } = useCombobox();
     useEffect(() => {
       if (open && !disabled) {
         innerRef.current?.focus();
@@ -3944,6 +4091,7 @@ const ComboboxInput = forwardRef(
         placeholder,
         disabled,
         "aria-disabled": disabled,
+        "aria-invalid": error ?? void 0,
         role: "combobox",
         "aria-autocomplete": "list",
         "aria-expanded": open,
@@ -4009,37 +4157,13 @@ const Combobox = Object.assign(ComboboxRoot, {
   Toggle: ComboboxToggle,
   Popup: ComboboxPopup
 });
-const useScrollLock = (lock, element) => {
-  useEffect(() => {
-    if (!lock) {
-      return;
-    }
-    const target = element ?? document.body;
-    const originalOverflow = target.style.overflow;
-    target.style.overflow = "hidden";
-    return () => {
-      target.style.overflow = originalOverflow;
-    };
-  }, [lock, element]);
-};
 const DialogRoot = ({
   open: controlledOpen,
   defaultOpen = false,
   onOpenChange,
   children
 }) => {
-  const isControlled = controlledOpen !== void 0;
-  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
-  const open = isControlled ? controlledOpen : uncontrolledOpen;
-  const setOpen = useCallback(
-    (next) => {
-      if (!isControlled) {
-        setUncontrolledOpen(next);
-      }
-      onOpenChange?.(next);
-    },
-    [isControlled, onOpenChange]
-  );
+  const [open, setOpen] = useControlledState(controlledOpen, defaultOpen, onOpenChange);
   const value = useMemo(() => ({ open, setOpen }), [open, setOpen]);
   return /* @__PURE__ */ u(DialogProvider, { value, children });
 };
@@ -4179,7 +4303,7 @@ const DialogContent = forwardRef(
           preventScroll: false,
           onActivate: () => {
             requestAnimationFrame(() => {
-              const event = new Event("openautofocus");
+              const event = new Event("openautofocus", { bubbles: true, cancelable: true });
               onOpenAutoFocus?.(event);
               if (!event.defaultPrevented && contentRef.current) {
                 contentRef.current.focus();
@@ -4188,7 +4312,7 @@ const DialogContent = forwardRef(
           },
           onDeactivate: () => {
             requestAnimationFrame(() => {
-              const event = new Event("closeautofocus");
+              const event = new Event("closeautofocus", { bubbles: true, cancelable: true });
               onCloseAutoFocus?.(event);
             });
           }
@@ -4207,6 +4331,7 @@ const DialogContent = forwardRef(
               "relative rounded-lg shadow-xl bg-surface-neutral",
               "flex flex-col max-w-lg w-full max-h-[90vh] gap-10 p-10",
               "border border-bdr-subtle outline-none overflow-hidden",
+              "focus:outline-none focus:ring-0",
               "data-[state=open]:animate-in data-[state=closed]:animate-out",
               "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
               "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
@@ -4379,7 +4504,7 @@ const Input = forwardRef(
     const state = error ? "error" : "default";
     const hasError = state === "error";
     return /* @__PURE__ */ u("div", { className: cn("w-full", disabled && "opacity-30", className), children: [
-      /* @__PURE__ */ u("div", { className: "mb-2", children: [
+      (!!label || !!description) && /* @__PURE__ */ u("div", { className: "mb-2", children: [
         label && /* @__PURE__ */ u(
           "label",
           {
@@ -4549,7 +4674,11 @@ const ListboxRoot = ({
   focusable = true,
   disabled,
   children,
-  keyHandler
+  keyHandler,
+  registerItem: externalRegisterItem,
+  unregisterItem: externalUnregisterItem,
+  getItems: externalGetItems,
+  isItemDisabled: externalIsItemDisabled
 }) => {
   const listboxBaseId = baseId ?? usePrefixedId();
   const [uncontrolledSelection, setUncontrolledSelection] = useState(() => new Set(defaultSelection));
@@ -4558,18 +4687,12 @@ const ListboxRoot = ({
     () => isSelectionControlled ? new Set(controlledSelection) : uncontrolledSelection,
     [isSelectionControlled, controlledSelection, uncontrolledSelection]
   );
-  const [uncontrolledActive, setUncontrolledActive] = useState(defaultActive);
-  const isActiveControlled = controlledActive !== void 0;
-  const active = isActiveControlled ? controlledActive : uncontrolledActive;
-  const updateActive = useCallback(
-    (id) => {
-      if (!isActiveControlled) {
-        setUncontrolledActive(id);
-      }
-      setActive?.(id);
-    },
-    [isActiveControlled, setActive]
-  );
+  const [active, updateActive] = useControlledState(controlledActive, defaultActive, setActive);
+  const internalRegistry = useItemRegistry();
+  const registerItem = externalRegisterItem ?? internalRegistry.registerItem;
+  const unregisterItem = externalUnregisterItem ?? internalRegistry.unregisterItem;
+  const getItems = externalGetItems ?? internalRegistry.getItems;
+  const isItemDisabled = externalIsItemDisabled ?? internalRegistry.isItemDisabled;
   const toggleValue = useCallback(
     (value) => {
       const isSelected = selectionSet.has(value);
@@ -4604,15 +4727,34 @@ const ListboxRoot = ({
       setActive: updateActive,
       toggleValue,
       baseId: listboxBaseId,
-      keyHandler
+      keyHandler,
+      registerItem,
+      unregisterItem,
+      getItems,
+      isItemDisabled
     }),
-    [active, selectionSet, selectionMode, focusable, disabled, updateActive, toggleValue, listboxBaseId, keyHandler]
+    [
+      active,
+      selectionSet,
+      selectionMode,
+      focusable,
+      disabled,
+      updateActive,
+      toggleValue,
+      listboxBaseId,
+      keyHandler,
+      registerItem,
+      unregisterItem,
+      getItems,
+      isItemDisabled
+    ]
   );
   return /* @__PURE__ */ u(ListboxProvider, { value: contextValue, children });
 };
 ListboxRoot.displayName = "ListboxRoot";
 const ListboxContent = forwardRef(
   ({ className, label, children, ...props }, ref) => {
+    const innerRef = useRef(null);
     const {
       active,
       disabled,
@@ -4621,59 +4763,22 @@ const ListboxContent = forwardRef(
       baseId,
       selectionMode,
       keyHandler,
-      focusable = true
+      focusable = true,
+      getItems,
+      isItemDisabled
     } = useListbox();
-    const innerRef = useRef(null);
-    const getItems = useCallback(() => {
-      const container = innerRef.current;
-      if (!container) {
-        return [];
+    const { handleKeyDown: handleNavKeyDown } = useKeyboardNavigation({
+      getItems,
+      isItemDisabled,
+      active,
+      setActive,
+      loop: false,
+      orientation: "vertical",
+      onSelect: (id) => {
+        toggleValue(id);
       }
-      const optionNodes = container.querySelectorAll('[role="option"][data-value]');
-      return Array.from(optionNodes).map((node) => node.dataset.value).filter((v) => v !== void 0);
-    }, []);
-    const moveActive = useCallback(
-      (delta) => {
-        const items = getItems();
-        if (!items.length) {
-          return;
-        }
-        const currentIndex = active ? items.indexOf(active) : -1;
-        const newIndex = Math.max(0, Math.min(items.length - 1, currentIndex + delta));
-        setActive(items[newIndex]);
-      },
-      [active, setActive, getItems]
-    );
-    const handleKeyDown = keyHandler ?? useCallback(
-      (e) => {
-        if (disabled) {
-          return;
-        }
-        const items = getItems();
-        if (!items.length) {
-          return;
-        }
-        if (e.key === "ArrowDown") {
-          e.preventDefault();
-          moveActive(1);
-        } else if (e.key === "ArrowUp") {
-          e.preventDefault();
-          moveActive(-1);
-        } else if (e.key === "Home") {
-          e.preventDefault();
-          setActive(items[0]);
-        } else if (e.key === "End") {
-          e.preventDefault();
-          setActive(items[items.length - 1]);
-        } else if (e.key === " " || e.key === "Enter") {
-          e.preventDefault();
-          if (active) {
-            toggleValue(active);
-          }
-        }
-      },
-      [disabled, getItems, active, moveActive, toggleValue, setActive]
-    );
+    });
+    const handleKeyDown = keyHandler ?? handleNavKeyDown;
     useEffect(() => {
       if (!active || !innerRef.current) {
         return;
@@ -4721,6 +4826,10 @@ const listboxItemVariants = cva("flex w-full items-center px-4.5 py-1 gap-x-2.5
     active: {
       true: "bg-surface-primary-hover",
       false: ""
+    },
+    disabled: {
+      true: "opacity-30 cursor-not-allowed pointer-events-none",
+      false: ""
     }
   },
   compoundVariants: [
@@ -4732,19 +4841,25 @@ const listboxItemVariants = cva("flex w-full items-center px-4.5 py-1 gap-x-2.5
   ],
   defaultVariants: {
     selected: false,
-    active: false
+    active: false,
+    disabled: false
   }
 });
-const ListboxItem = ({ value, children, className, ...props }) => {
+const ListboxItem = ({ value, disabled = false, children, className, ...props }) => {
   const ctx = useListbox();
-  const { disabled, toggleValue, baseId } = ctx;
+  const { disabled: listboxDisabled, toggleValue, baseId, registerItem, unregisterItem } = ctx;
   const isSelected = ctx.selection.has(value);
   const isActive = ctx.active === value;
+  const isDisabled = disabled || listboxDisabled;
+  useEffect(() => {
+    registerItem(value, isDisabled);
+    return () => unregisterItem(value);
+  }, [value, isDisabled, registerItem, unregisterItem]);
   const handleClick = useCallback(() => {
-    if (!disabled) {
+    if (!isDisabled) {
       toggleValue(value);
     }
-  }, [disabled, toggleValue, value]);
+  }, [isDisabled, toggleValue, value]);
   return (
     // ARIA listbox pattern: options are not individually focusable
     // Parent listbox handles all keyboard interactions via aria-activedescendant
@@ -4753,9 +4868,10 @@ const ListboxItem = ({ value, children, className, ...props }) => {
       "div",
       {
         id: `${baseId}-listbox-option-${value}`,
-        className: cn(listboxItemVariants({ selected: isSelected, active: isActive }), className),
+        className: cn(listboxItemVariants({ selected: isSelected, active: isActive, disabled: isDisabled }), className),
         role: "option",
         "aria-selected": isSelected,
+        "aria-disabled": isDisabled ?? void 0,
         "data-value": value,
         "data-active": isActive || void 0,
         onClick: handleClick,
@@ -4777,35 +4893,12 @@ const MenuRoot = ({
   onOpenChange,
   children
 }) => {
-  const isControlled = controlledOpen !== void 0;
-  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
-  const open = isControlled ? controlledOpen : uncontrolledOpen;
-  const setOpen = useCallback(
-    (next) => {
-      if (!isControlled) {
-        setUncontrolledOpen(next);
-      }
-      onOpenChange?.(next);
-    },
-    [isControlled, onOpenChange]
-  );
-  const [active, setActive] = useState(void 0);
-  const itemsRef = useRef(/* @__PURE__ */ new Map());
   const triggerRef = useRef(null);
   const triggerId = usePrefixedId(void 0, "menu-trigger");
   const menuId = usePrefixedId(void 0, "menu");
-  const registerItem = useCallback((id, disabled = false) => {
-    itemsRef.current.set(id, { disabled });
-  }, []);
-  const unregisterItem = useCallback((id) => {
-    itemsRef.current.delete(id);
-  }, []);
-  const getItems = useCallback(() => {
-    return Array.from(itemsRef.current.keys());
-  }, []);
-  const isItemDisabled = useCallback((id) => {
-    return itemsRef.current.get(id)?.disabled ?? false;
-  }, []);
+  const [open, setOpen] = useControlledState(controlledOpen, defaultOpen, onOpenChange);
+  const [active, setActive] = useState(void 0);
+  const { registerItem, unregisterItem, getItems, isItemDisabled } = useItemRegistry();
   const value = useMemo(
     () => ({
       open,
@@ -4892,9 +4985,7 @@ const MenuContent = forwardRef(
     const { open, setOpen, active, setActive, getItems, isItemDisabled, menuId, triggerRef } = useMenu();
     const contentRef = useRef(null);
     const composedRefs = useComposedRefs(ref, contentRef);
-    const [position, setPosition] = useState(
-      null
-    );
+    const [position, setPosition] = useState(void 0);
     useEffect(() => {
       if (!open || !triggerRef?.current || !contentRef.current) {
         return;
@@ -4950,101 +5041,42 @@ const MenuContent = forwardRef(
         }
       }
     }, [open, getItems, isItemDisabled, setActive]);
-    const moveActive = useCallback(
-      (delta) => {
-        const items = getItems();
-        if (!items.length) {
-          return;
-        }
-        const currentIndex = active ? items.indexOf(active) : -1;
-        let newIndex;
-        let attempts = 0;
-        const maxAttempts = items.length;
-        if (currentIndex === -1) {
-          newIndex = delta > 0 ? 0 : items.length - 1;
-        } else {
-          newIndex = currentIndex + delta;
-        }
-        while (attempts < maxAttempts) {
-          if (loop) {
-            if (newIndex < 0) {
-              newIndex = items.length - 1;
-            } else if (newIndex >= items.length) {
-              newIndex = 0;
-            }
-          } else {
-            if (newIndex < 0 || newIndex >= items.length) {
-              return;
-            }
-          }
-          if (!isItemDisabled(items[newIndex])) {
-            setActive(items[newIndex]);
-            return;
-          }
-          newIndex += delta;
-          attempts++;
+    const { handleKeyDown: handleNavKeyDown } = useKeyboardNavigation({
+      getItems,
+      isItemDisabled,
+      active,
+      setActive,
+      loop,
+      orientation: "vertical",
+      onSelect: (id) => {
+        const itemElement = document.getElementById(id);
+        if (itemElement) {
+          itemElement.click();
         }
-      },
-      [getItems, active, setActive, loop, isItemDisabled]
-    );
+      }
+    });
     const handleKeyDown = useCallback(
       (e) => {
-        const items = getItems();
-        if (!items.length) {
+        if (e.key === "Tab") {
+          setOpen(false);
           return;
         }
-        switch (e.key) {
-          case "ArrowDown":
-            e.preventDefault();
-            moveActive(1);
-            break;
-          case "ArrowUp":
-            e.preventDefault();
-            moveActive(-1);
-            break;
-          case "Home":
-            e.preventDefault();
-            {
-              const firstEnabled = items.find((id) => !isItemDisabled(id));
-              if (firstEnabled) {
-                setActive(firstEnabled);
-              }
-            }
-            break;
-          case "End":
-            e.preventDefault();
-            {
-              const lastEnabled = [...items].reverse().find((id) => !isItemDisabled(id));
-              if (lastEnabled) {
-                setActive(lastEnabled);
-              }
-            }
-            break;
-          case "Enter":
-          case " ":
-            e.preventDefault();
-            if (active && !isItemDisabled(active)) {
-              const itemElement = document.getElementById(active);
-              if (itemElement) {
-                itemElement.click();
-              }
-            }
-            break;
-          case "Escape":
-            e.preventDefault();
-            onEscapeKeyDown?.(e);
-            setOpen(false);
-            break;
-          case "Tab":
-            setOpen(false);
-            break;
+        if (e.key === "Escape") {
+          e.preventDefault();
+          onEscapeKeyDown?.(e);
+          setOpen(false);
+          return;
         }
+        handleNavKeyDown(e);
       },
-      [getItems, active, moveActive, setActive, isItemDisabled, onEscapeKeyDown, setOpen]
+      [handleNavKeyDown, setOpen, onEscapeKeyDown]
     );
     const handlePointerDownOutside = useCallback(
       (e) => {
         const target = e.target;
+        if (!(target instanceof Node)) {
+          return;
+        }
         if (triggerRef?.current?.contains(target)) {
           return;
         }
@@ -5227,25 +5259,16 @@ const SearchInput = forwardRef(
     ...props
   }, ref) => {
     const inputId = usePrefixedId(unwrap(id));
-    const [uncontrolledValue, setUncontrolledValue] = useState$1(defaultValue);
-    const isControlled = value !== void 0;
-    const inputValue = isControlled ? value : uncontrolledValue;
+    const inputRef = useRef(null);
+    const [inputValue, setInputValue] = useControlledState(value, defaultValue, onChange);
     const isValueSet = inputValue.length > 0;
     const canClear = showClearButton && isValueSet && !disabled && !readOnly;
     const handleChange = (e) => {
       const newValue = e.currentTarget.value;
-      if (!isControlled) {
-        setUncontrolledValue(newValue);
-      }
-      onChange?.(newValue);
+      setInputValue(newValue);
     };
-    const inputRef = useRef(null);
     const handleClear = () => {
-      const newValue = "";
-      if (!isControlled) {
-        setUncontrolledValue(newValue);
-      }
-      onChange?.(newValue);
+      setInputValue("");
       inputRef.current?.focus();
     };
     return /* @__PURE__ */ u(
@@ -5277,7 +5300,7 @@ const SearchInput = forwardRef(
                 "w-full text-base border-0",
                 "text-main bg-surface-neutral",
                 "placeholder:text-subtle",
-                "focus:outline-none",
+                "focus:outline-none focus:ring-0",
                 "read-only:bg-surface-primary",
                 !showSearchIcon && "pl-4.5",
                 "pr-4"
@@ -5606,12 +5629,19 @@ export {
   Separator,
   Tooltip,
   cn,
+  generateAriaId,
+  generateAriaIds,
+  generateItemId,
+  getActiveDescendantId,
   setRef,
   unwrap,
   useAvatar,
   useCombobox,
   useComposedRefs,
+  useControlledState,
   useDialog,
+  useItemRegistry,
+  useKeyboardNavigation,
   useListbox,
   useMenu,
   usePrefixedId,