@godxjp/ui 22.0.0 → 23.0.0

package/dist/components/data-entry/switch.js

@@ -5,6 +5,7 @@ import { Switch as AriaSwitch } from "react-aria-components";
 import { Loader2 } from "lucide-react";
 import { cn } from "../../lib/utils.js";
 import { useFieldIdentity, useMirroredInputAttributes } from "../../lib/field-a11y.js";
+import { withOwnHitTarget } from "./choice-hit-target.js";
 const Switch = React.forwardRef(
   ({
     className,
@@ -72,6 +73,7 @@ const Switch = React.forwardRef(
             event.preventDefault();
             handleCheckedChange(!isChecked);
           },
+          render: (domProps) => /* @__PURE__ */ jsx("label", { ...domProps, children: withOwnHitTarget(domProps.children) }),
           className: cn(
             // `.ui-switch:disabled, .ui-switch[data-disabled]` in styles/control.css already
             // declares both and reads --disabled-opacity. The utility was layered after

package/dist/components/navigation/dropdown-menu.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { type MenuItemRenderProps, type PopoverProps, type PopoverRenderProps } from "react-aria-components";
-import type { DropdownMenuPlacementProp } from "../../props/components/navigation.prop.js";
-export type { DropdownMenuPlacementProp } from "../../props/components/navigation.prop.js";
+import type { DropdownMenuPlacementProp, DropdownMenuTriggerActionProp } from "../../props/components/navigation.prop.js";
+export type { DropdownMenuPlacementProp, DropdownMenuTriggerActionProp, } from "../../props/components/navigation.prop.js";
 /**
  * Dịch trạng thái item của RAC sang bộ `data-*` mà Radix phát ra và CSS của kho đang bám.
  *
@@ -47,9 +47,17 @@ interface DropdownMenuPropsOwn {
      * `useLocale`), nên prop này còn trong API vì hợp đồng, nhưng không tự đảo hướng.
      */
     dir?: "ltr" | "rtl";
+    /** Ant Design `trigger`. @see DropdownMenuTriggerActionProp. Default `['click']`. */
+    trigger?: readonly DropdownMenuTriggerActionProp[];
+    /** Ant Design `disabled` — no gesture opens the menu (antd empties the trigger list). */
+    disabled?: boolean;
+    /** Ant Design `mouseEnterDelay`, in SECONDS, for `trigger={['hover']}`. Default 0.15. */
+    mouseEnterDelay?: number;
+    /** Ant Design `mouseLeaveDelay`, in SECONDS. Default 0.1 — long enough to cross the gap. */
+    mouseLeaveDelay?: number;
 }
 type DropdownMenuProps = React.PropsWithChildren<DropdownMenuPropsOwn>;
-export declare function DropdownMenu({ children, open, defaultOpen, onOpenChange, modal, dir, }: DropdownMenuProps): React.JSX.Element;
+export declare function DropdownMenu({ children, open, defaultOpen, onOpenChange, modal, dir, trigger, disabled, mouseEnterDelay, mouseLeaveDelay, }: DropdownMenuProps): React.JSX.Element;
 interface DropdownMenuTriggerProps extends React.ComponentPropsWithoutRef<"button"> {
     /** Giao hành vi mở cho phần tử con thay vì `<button>` mặc định — như Radix. */
     asChild?: boolean;

package/dist/components/navigation/dropdown-menu.js

@@ -12,9 +12,11 @@ import {
   OverlayTriggerStateContext,
   Popover,
   Pressable,
+  RootMenuTriggerStateContext,
   Separator,
   OverlayArrow,
-  SubmenuTrigger
+  SubmenuTrigger,
+  useLocale
 } from "react-aria-components";
 import { Check, ChevronRight } from "lucide-react";
 import { cn } from "../../lib/utils.js";
@@ -58,39 +60,201 @@ function selectEvent(name) {
   return typeof CustomEvent === "function" ? new CustomEvent(name, { bubbles: false, cancelable: true }) : { defaultPrevented: false, preventDefault() {
   } };
 }
-const DropdownMenuModalContext = React.createContext({ modal: true });
+const DROPDOWN_MENU_DEFAULT_TRIGGER = ["click"];
+const DROPDOWN_MENU_MOUSE_ENTER_DELAY = 0.15;
+const DROPDOWN_MENU_MOUSE_LEAVE_DELAY = 0.1;
+const SECOND_IN_MS = 1e3;
+const DropdownMenuModalContext = React.createContext({
+  modal: true,
+  contextMenuGesture: false,
+  disabled: false,
+  hover: null,
+  racOwnsContextMenu: false,
+  openedByHover: { current: false }
+});
+function clearContextMenuPoint(state) {
+  state?.setPoint(null);
+}
+function chainGestureProps(own, incoming) {
+  const merged = { ...own };
+  for (const [key, handler] of Object.entries(incoming)) {
+    const existing = own[key];
+    merged[key] = typeof existing === "function" && typeof handler === "function" ? (event) => {
+      existing(event);
+      if (!event.defaultPrevented) handler(event);
+    } : handler;
+  }
+  return merged;
+}
+function isContextMenuKey(event) {
+  return event.key === "ContextMenu" || event.key === "F10" && event.shiftKey;
+}
 function DropdownMenu({
   children,
   open,
   defaultOpen,
   onOpenChange,
   modal = true,
-  dir
+  dir,
+  trigger = DROPDOWN_MENU_DEFAULT_TRIGGER,
+  disabled = false,
+  mouseEnterDelay = DROPDOWN_MENU_MOUSE_ENTER_DELAY,
+  mouseLeaveDelay = DROPDOWN_MENU_MOUSE_LEAVE_DELAY
 }) {
   void dir;
-  const options = React.useMemo(() => ({ modal }), [modal]);
-  return /* @__PURE__ */ jsx(DropdownMenuModalContext.Provider, { value: options, children: /* @__PURE__ */ jsx(MenuTrigger, { isOpen: open, defaultOpen, onOpenChange, children }) });
+  const wantsHover = !disabled && trigger.includes("hover");
+  const wantsClick = !disabled && trigger.includes("click");
+  const wantsContextMenu = !disabled && trigger.includes("contextMenu");
+  const racOwnsContextMenu = wantsContextMenu && !wantsClick && !wantsHover;
+  const [uncontrolled, setUncontrolled] = React.useState(defaultOpen ?? false);
+  const isOpen = open ?? uncontrolled;
+  const isOpenRef = React.useRef(isOpen);
+  isOpenRef.current = isOpen;
+  const openedByHover = React.useRef(false);
+  const setOpen = React.useCallback(
+    (next) => {
+      if (next === isOpenRef.current) return;
+      if (next && disabled) return;
+      if (!next) openedByHover.current = false;
+      if (open === void 0) setUncontrolled(next);
+      onOpenChange?.(next);
+    },
+    [disabled, open, onOpenChange]
+  );
+  const enterTimer = React.useRef(null);
+  const leaveTimer = React.useRef(null);
+  React.useEffect(
+    () => () => {
+      if (enterTimer.current) clearTimeout(enterTimer.current);
+      if (leaveTimer.current) clearTimeout(leaveTimer.current);
+    },
+    []
+  );
+  const hover = React.useMemo(() => {
+    if (!wantsHover) return null;
+    return {
+      enter: () => {
+        if (leaveTimer.current) clearTimeout(leaveTimer.current);
+        if (isOpenRef.current) return;
+        enterTimer.current = setTimeout(() => {
+          openedByHover.current = true;
+          setOpen(true);
+        }, mouseEnterDelay * SECOND_IN_MS);
+      },
+      leave: () => {
+        if (enterTimer.current) clearTimeout(enterTimer.current);
+        leaveTimer.current = setTimeout(() => setOpen(false), mouseLeaveDelay * SECOND_IN_MS);
+      }
+    };
+  }, [wantsHover, mouseEnterDelay, mouseLeaveDelay, setOpen]);
+  const options = React.useMemo(
+    () => ({
+      // A HOVER MENU CANNOT BE MODAL. A modal RAC popover paints a full-bleed underlay the instant
+      // it opens; that underlay lands under the pointer, the trigger gets `pointerleave`, and the
+      // menu closes before the reader can move onto it. antd's hover dropdown is non-modal for the
+      // same reason. Every other mode keeps the caller's `modal`.
+      modal: wantsHover ? false : modal,
+      contextMenuGesture: wantsContextMenu,
+      disabled,
+      hover,
+      racOwnsContextMenu,
+      openedByHover
+    }),
+    [modal, wantsContextMenu, disabled, hover, racOwnsContextMenu, wantsHover]
+  );
+  return /* @__PURE__ */ jsx(DropdownMenuModalContext.Provider, { value: options, children: /* @__PURE__ */ jsx(
+    MenuTrigger,
+    {
+      isOpen,
+      onOpenChange: setOpen,
+      trigger: racOwnsContextMenu ? "contextMenu" : "press",
+      children
+    }
+  ) });
 }
 function DropdownMenuTrigger({ asChild, children, ...props }) {
   const state = React.useContext(OverlayTriggerStateContext);
+  const menuState = React.useContext(
+    RootMenuTriggerStateContext
+  );
+  const { contextMenuGesture, disabled, hover, racOwnsContextMenu } = React.useContext(DropdownMenuModalContext);
   const dataState = state?.isOpen ? "open" : "closed";
+  const wantsContextMenu = contextMenuGesture;
+  const isDisabled = disabled || props.disabled;
+  const { direction } = useLocale();
+  const openAtTriggerBox = (element) => {
+    const rect = element.getBoundingClientRect();
+    menuState?.setPoint({ x: direction === "rtl" ? rect.right : rect.left, y: rect.bottom });
+    menuState?.open("first");
+  };
+  const gestureProps = {};
+  if (wantsContextMenu && !isDisabled) {
+    gestureProps.onKeyDown = (event) => {
+      if (!isContextMenuKey(event)) return;
+      event.preventDefault();
+      openAtTriggerBox(event.currentTarget);
+    };
+    if (!racOwnsContextMenu) {
+      gestureProps.onContextMenu = (event) => {
+        event.preventDefault();
+        menuState?.setPoint({ x: event.clientX, y: event.clientY });
+        menuState?.open(null);
+      };
+    }
+  }
+  if (!racOwnsContextMenu) {
+    gestureProps.onPointerDownCapture = () => clearContextMenuPoint(menuState);
+    gestureProps.onKeyDownCapture = (event) => {
+      if (!isContextMenuKey(event)) clearContextMenuPoint(menuState);
+    };
+  }
+  if (hover && !isDisabled) {
+    gestureProps.onPointerEnter = (event) => {
+      if (event.pointerType === "mouse") hover.enter();
+    };
+    gestureProps.onPointerLeave = (event) => {
+      if (event.pointerType === "mouse") hover.leave();
+    };
+  }
   if (asChild && React.isValidElement(children)) {
-    return /* @__PURE__ */ jsx(Pressable, { children: React.cloneElement(children, {
+    return /* @__PURE__ */ jsx(Pressable, { isDisabled, children: React.cloneElement(children, {
       "data-slot": "dropdown-menu-trigger",
-      "data-state": dataState
+      "data-state": dataState,
+      // A right click target is usually a region rather than a button, and Shift+F10 needs it
+      // focusable — so it is given a tab stop unless the consumer already placed one.
+      ...wantsContextMenu && children.props.tabIndex === void 0 ? { tabIndex: 0 } : {},
+      ...chainGestureProps(
+        children.props,
+        gestureProps
+      )
     }) });
   }
   return /* @__PURE__ */ jsx(
     AriaButton,
     {
-      ...props,
-      isDisabled: props.disabled,
+      ...chainGestureProps(
+        props,
+        gestureProps
+      ),
+      isDisabled,
       "data-slot": "dropdown-menu-trigger",
       "data-state": dataState,
       children
     }
   );
 }
+function useHoverSurfaceProps() {
+  const { hover } = React.useContext(DropdownMenuModalContext);
+  if (!hover) return {};
+  return {
+    onPointerEnter: (event) => {
+      if (event.pointerType === "mouse") hover.enter();
+    },
+    onPointerLeave: (event) => {
+      if (event.pointerType === "mouse") hover.leave();
+    }
+  };
+}
 function DropdownMenuPortal({ children }) {
   return /* @__PURE__ */ jsx(Fragment, { children });
 }
@@ -129,7 +293,7 @@ function DropdownMenuContent({
   className,
   side,
   align,
-  sideOffset = 4,
+  sideOffset,
   placement,
   arrow,
   width,
@@ -144,17 +308,25 @@ function DropdownMenuContent({
   void hideWhenDetached;
   void sticky;
   void forceMount;
-  const { modal } = React.useContext(DropdownMenuModalContext);
+  const { modal, openedByHover } = React.useContext(DropdownMenuModalContext);
+  const hoverSurfaceProps = useHoverSurfaceProps();
+  const menuState = React.useContext(
+    RootMenuTriggerStateContext
+  );
   const anchor = placement ? DROPDOWN_MENU_PLACEMENT[placement] : void 0;
   const overlayPortalContainer = useOverlayPortalContainer();
+  const pointAnchored = menuState?.point != null;
+  const hasExplicitAnchor = placement !== void 0 || side !== void 0 || align !== void 0;
+  const resolvedPlacement = hasExplicitAnchor || !pointAnchored ? toPlacement(side ?? anchor?.side, align ?? anchor?.align) : "bottom start";
+  const resolvedOffset = sideOffset ?? (pointAnchored && !hasExplicitAnchor ? 0 : 4);
   return /* @__PURE__ */ jsx(DropdownMenuPortal, { children: /* @__PURE__ */ jsxs(
     Popover,
     {
       UNSTABLE_portalContainer: overlayPortalContainer,
       "data-slot": "dropdown-menu-content",
       isNonModal: !modal,
-      placement: toPlacement(side ?? anchor?.side, align ?? anchor?.align),
-      offset: sideOffset,
+      placement: resolvedPlacement,
+      offset: resolvedOffset,
       crossOffset: alignOffset,
       shouldFlip: avoidCollisions,
       containerPadding: collisionPadding,
@@ -168,15 +340,16 @@ function DropdownMenuContent({
           "div",
           {
             ...props,
+            ...hoverSurfaceProps,
             role: void 0,
             ...radixSurfaceState(state),
-            "data-align": align ?? anchor?.align ?? "center",
+            "data-align": align ?? anchor?.align ?? (pointAnchored && !hasExplicitAnchor ? "start" : "center"),
             "data-width": width
           }
         )
       ),
       children: [
-        /* @__PURE__ */ jsx(Menu, { shouldFocusWrap: loop, children }),
+        /* @__PURE__ */ jsx(Menu, { shouldFocusWrap: loop, autoFocus: openedByHover.current ? false : void 0, children }),
         arrow ? /* @__PURE__ */ jsx(OverlayArrow, { children: /* @__PURE__ */ jsx(
           "svg",
           {
@@ -388,6 +561,7 @@ function DropdownMenuSubContent({
   void hideWhenDetached;
   void sticky;
   const overlayPortalContainer = useOverlayPortalContainer();
+  const hoverSurfaceProps = useHoverSurfaceProps();
   return /* @__PURE__ */ jsx(
     Popover,
     {
@@ -408,6 +582,7 @@ function DropdownMenuSubContent({
           "div",
           {
             ...props,
+            ...hoverSurfaceProps,
             role: void 0,
             ...radixSurfaceState(state),
             "data-align": align ?? "center"

package/dist/components/navigation/index.d.ts

@@ -1,8 +1,5 @@
 export { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs.js";
-export { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, } from "./context-menu.js";
 export { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationEllipsis, PaginationPrevious, PaginationNext, } from "./pagination.js";
-export { Menubar, MenubarCheckboxItem, MenubarContent, MenubarItem, MenubarLabel, MenubarMenu, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, } from "./menubar.js";
-export { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, } from "./navigation-menu.js";
 export { Steps } from "./steps.js";
 export { FilterBar, FilterBarGroup, Toolbar, ToolbarGroup } from "./filter-bar.js";
 export type { FilterBarChipProp, FilterBarChipProps, FilterBarFilterProp, FilterBarFilterProps, FilterBarGroupProp, FilterBarGroupProps, FilterBarOverflowProp, FilterBarProp, FilterBarProps, FilterBarSearchProp, FilterBarSearchProps, ToolbarGroupProps, ToolbarProps, } from "./filter-bar.js";

package/dist/components/navigation/index.js

@@ -1,20 +1,4 @@
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs.js";
-import {
-  ContextMenu,
-  ContextMenuCheckboxItem,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuLabel,
-  ContextMenuPortal,
-  ContextMenuRadioGroup,
-  ContextMenuRadioItem,
-  ContextMenuSeparator,
-  ContextMenuShortcut,
-  ContextMenuSub,
-  ContextMenuSubContent,
-  ContextMenuSubTrigger,
-  ContextMenuTrigger
-} from "./context-menu.js";
 import {
   Pagination,
   PaginationContent,
@@ -24,32 +8,6 @@ import {
   PaginationPrevious,
   PaginationNext
 } from "./pagination.js";
-import {
-  Menubar,
-  MenubarCheckboxItem,
-  MenubarContent,
-  MenubarItem,
-  MenubarLabel,
-  MenubarMenu,
-  MenubarRadioGroup,
-  MenubarRadioItem,
-  MenubarSeparator,
-  MenubarShortcut,
-  MenubarSub,
-  MenubarSubContent,
-  MenubarSubTrigger,
-  MenubarTrigger
-} from "./menubar.js";
-import {
-  NavigationMenu,
-  NavigationMenuContent,
-  NavigationMenuIndicator,
-  NavigationMenuItem,
-  NavigationMenuLink,
-  NavigationMenuList,
-  NavigationMenuTrigger,
-  NavigationMenuViewport
-} from "./navigation-menu.js";
 import { Steps } from "./steps.js";
 import { FilterBar, FilterBarGroup, Toolbar, ToolbarGroup } from "./filter-bar.js";
 import { AppSettingPicker } from "./app-setting-picker.js";
@@ -74,20 +32,6 @@ import {
 export {
   AppSettingPicker,
   AppSettingToggle,
-  ContextMenu,
-  ContextMenuCheckboxItem,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuLabel,
-  ContextMenuPortal,
-  ContextMenuRadioGroup,
-  ContextMenuRadioItem,
-  ContextMenuSeparator,
-  ContextMenuShortcut,
-  ContextMenuSub,
-  ContextMenuSubContent,
-  ContextMenuSubTrigger,
-  ContextMenuTrigger,
   DropdownMenu,
   DropdownMenuCheckboxItem,
   DropdownMenuContent,
@@ -105,28 +49,6 @@ export {
   DropdownMenuTrigger,
   FilterBar,
   FilterBarGroup,
-  Menubar,
-  MenubarCheckboxItem,
-  MenubarContent,
-  MenubarItem,
-  MenubarLabel,
-  MenubarMenu,
-  MenubarRadioGroup,
-  MenubarRadioItem,
-  MenubarSeparator,
-  MenubarShortcut,
-  MenubarSub,
-  MenubarSubContent,
-  MenubarSubTrigger,
-  MenubarTrigger,
-  NavigationMenu,
-  NavigationMenuContent,
-  NavigationMenuIndicator,
-  NavigationMenuItem,
-  NavigationMenuLink,
-  NavigationMenuList,
-  NavigationMenuTrigger,
-  NavigationMenuViewport,
   Pagination,
   PaginationContent,
   PaginationEllipsis,

package/dist/components/ui/index.d.ts

@@ -10,9 +10,6 @@ export * from "./card.js";
 export * from "./checkbox.js";
 export * from "./color-picker.js";
 export * from "./command.js";
-export * from "./context-menu.js";
-export * from "./menubar.js";
-export * from "./navigation-menu.js";
 export * from "./resizable.js";
 export * from "./date-picker.js";
 export * from "./dialog.js";

package/dist/components/ui/index.js

@@ -11,9 +11,6 @@ export * from "./card.js";
 export * from "./checkbox.js";
 export * from "./color-picker.js";
 export * from "./command.js";
-export * from "./context-menu.js";
-export * from "./menubar.js";
-export * from "./navigation-menu.js";
 export * from "./resizable.js";
 export * from "./date-picker.js";
 export * from "./dialog.js";

package/dist/components/ui/input-otp.d.ts

@@ -16,7 +16,7 @@ import * as React from "react";
  * too, and `input-otp` writes its own internal state inside its paste handler, which a wrapper
  * that only intercepted `onChange` could not undo.
  */
-export declare const InputOTP: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "defaultValue" | "onChange" | "size" | "value"> & {
+export declare const InputOTP: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "defaultValue" | "onChange" | "size" | "style" | "value"> & {
     maxLength: number;
     value?: string;
     defaultValue?: string;

package/dist/components/ui/segmented.js

@@ -2,6 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Radio as AriaRadio, RadioGroup as AriaRadioGroup } from "react-aria-components";
+import { withOwnHitTarget } from "../data-entry/choice-hit-target.js";
 import { cn } from "../../lib/utils.js";
 const Segmented = React.forwardRef(function Segmented2({
   options,
@@ -44,7 +45,8 @@ const Segmented = React.forwardRef(function Segmented2({
             "label",
             {
               ...domProps,
-              "data-state": state.isSelected ? "checked" : "unchecked"
+              "data-state": state.isSelected ? "checked" : "unchecked",
+              children: withOwnHitTarget(domProps.children)
             }
           ),
           children: [

package/dist/components/ui/tag-input.js

@@ -7,11 +7,9 @@ import { cn } from "../../lib/utils.js";
 import {
   applyMaxTagCount,
   controlSurfaceAttrs,
-  resolveAllowClear
+  resolveAllowClear,
+  splitByTokenSeparators
 } from "../data-entry/control-surface.js";
-function escapeForCharClass(character) {
-  return character.replace(/[\\\]^-]/g, "\\$&");
-}
 const TagInput = React.forwardRef(
   ({
     value,
@@ -51,7 +49,7 @@ const TagInput = React.forwardRef(
     };
     const addAll = (raw) => {
       let next = [...tags];
-      const pieces = tokenSeparators.length ? raw.split(new RegExp(`[${tokenSeparators.map(escapeForCharClass).join("")}]`)) : [raw];
+      const pieces = splitByTokenSeparators(raw, tokenSeparators);
       for (const piece of pieces) {
         const tag = piece.trim();
         if (!tag || next.includes(tag)) continue;

package/dist/lib/select-options.d.ts

@@ -0,0 +1,21 @@
+import type { SearchSelectOptionProp, SelectFieldNamesProp, SelectOptionGroupProp } from "../props/components/data-entry.prop.js";
+/**
+ * One list of rows, whatever shape the call site had.
+ *
+ * `Select` accepts three spellings of the same thing and they all have to arrive at the engine as
+ * ONE flat array, or every feature downstream (filtering, `maxCount`, the hidden `<option>` list)
+ * would need to know about all three:
+ *
+ *   • this library's flat rows, `{ value, label, group? }`
+ *   • antd's nested groups, `{ label, options: [...] }`
+ *   • a foreign row read through `fieldNames`, `{ id, name, children }`
+ *
+ * Written once, here, rather than in both `select.tsx` and `search-select.tsx` — the two branches
+ * of one component must not disagree about what an option is. Group headings survive as the flat
+ * `group` string the rows already carried, so a grouped list renders identically whichever
+ * spelling produced it.
+ */
+/** A row whose keys are not known ahead of time — what `fieldNames` exists to read. */
+type RawOption = Record<string, unknown>;
+export declare function normalizeSelectOptions(options: readonly (SearchSelectOptionProp | SelectOptionGroupProp | RawOption)[] | undefined, fieldNames?: SelectFieldNamesProp): SearchSelectOptionProp[];
+export {};

package/dist/lib/select-options.js

@@ -0,0 +1,46 @@
+function text(value) {
+  if (typeof value === "string" || typeof value === "number" || typeof value === "bigint") {
+    return String(value);
+  }
+  return "";
+}
+function groupChildren(option, optionsKey) {
+  const children = option[optionsKey];
+  return Array.isArray(children) ? children : void 0;
+}
+function normalizeSelectOptions(options, fieldNames) {
+  if (!options?.length) return [];
+  const labelKey = fieldNames?.label ?? "label";
+  const valueKey = fieldNames?.value ?? "value";
+  const optionsKey = fieldNames?.options ?? "options";
+  const groupLabelKey = fieldNames?.groupLabel ?? labelKey;
+  const disabledKey = fieldNames?.disabled ?? "disabled";
+  const flat = [];
+  const push = (raw, group) => {
+    const value = text(raw[valueKey]);
+    const label = text(raw[labelKey]);
+    flat.push({
+      ...raw,
+      value,
+      // A row with no label reads as its own value — the id is at least identifiable, where an
+      // empty row is not selectable by sight or by type-to-select.
+      label: label || value,
+      disabled: raw[disabledKey] === true || void 0,
+      // A row inside a group takes the group's heading; a flat row keeps the `group` it declared.
+      group: group ?? (typeof raw.group === "string" ? raw.group : void 0)
+    });
+  };
+  for (const entry of options) {
+    const children = groupChildren(entry, optionsKey);
+    if (children) {
+      const heading = text(entry[groupLabelKey]) || void 0;
+      for (const child of children) push(child, heading);
+      continue;
+    }
+    push(entry, void 0);
+  }
+  return flat;
+}
+export {
+  normalizeSelectOptions
+};

package/dist/props/components/data-display.prop.d.ts

@@ -403,9 +403,10 @@ export type PermissionMatrixProp = {
 export type ScrollAreaAnchorProp = "none" | "bottom";
 /** @see ScrollArea */
 /**
- * @see ScrollArea — which AXES scroll. This is not decoration: Radix sets the viewport's
- * `overflowX`/`overflowY` inline from which scrollbars are mounted, so an axis with no `ScrollBar`
- * is `overflow: hidden` and its content is CLIPPED, not merely un-barred.
+ * @see ScrollArea — which AXES scroll. This is not decoration: it IS the `overflow` the element
+ * carries, so an axis this does not name is `hidden` and its content is CLIPPED, not merely
+ * un-barred. It is also the whole replacement for mounting a `<ScrollBar>`, which was how the
+ * Radix-era component was told to open a second axis.
  *
  * `both` is a third value rather than an array or a pair of booleans because the axes are one
  * decision — a pane scrolls down, across, or freely — and a closed union is what `check:prop-vocabulary`
@@ -419,12 +420,14 @@ export type ScrollAreaProp = {
      *
      * Reach for `horizontal` for a strip of non-shrinking columns (a board, a lane of cards): the
      * viewport keeps its tab stop, so the strip is scrollable from the keyboard, and the consumer
-     * writes no overflow styling of its own.
+     * writes no overflow styling of its own. `both` is what replaces a vertical area that also
+     * mounted `<ScrollBar orientation="horizontal" />`.
      */
     orientation?: ScrollAreaOrientationProp;
     /**
-     * Ref to the element that actually SCROLLS — the Radix viewport — not the root. The root is
-     * `overflow: hidden` and never scrolls, so the component's own `ref` cannot serve.
+     * Ref to the element that actually SCROLLS. Since v23 that is the component's own element, so
+     * this and `ref` hand back the SAME node — it is kept because it names the thing precisely, and
+     * because the Radix-era shape (a root wrapping a separate viewport) made `ref` the wrong handle.
      */
     viewportRef?: React.Ref<HTMLDivElement>;
     /** Edge the viewport sticks to as content grows. Default `none` (inert). */