@optiaxiom/react 3.0.0-next.4 → 3.0.1

package/dist/esm/packages/react/src/select/Select.js

@@ -1,183 +1,158 @@
 "use client";
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useComposedRefs } from '@radix-ui/react-compose-refs';
-import { Popper } from '@radix-ui/react-popper';
-import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import { useSelect } from 'downshift';
-import { forwardRef, useRef, useMemo, useState, useEffect } from 'react';
-import { Avatar } from '../avatar/Avatar.js';
-import '../avatar/AvatarGroup.js';
-import { useHighlightedIndex } from '../downshift/useHighlightedIndex.js';
-import '../field/FieldContext.js';
-import { useObserveValue } from '../hooks/useObserveValue.js';
-import '../utils/conditions.js';
-import '../utils/isHoverSupported.js';
-import '@optiaxiom/globals';
-import { useSurface } from '../surface/useSurface.js';
-import { useSuggestions } from '../surface/useSuggestions.js';
-import { SelectProvider } from './SelectContext.js';
-import { SelectHiddenSelect } from './SelectHiddenSelect.js';
-import { useObserveReset } from './useObserveReset.js';
-
-const Select = forwardRef(
-  ({
-    children,
-    defaultOpen = false,
-    defaultValue,
-    disabled,
-    loading,
-    name,
-    onBlur,
-    onChange,
-    onOpenChange,
-    onValueChange,
-    open,
-    options,
-    required,
-    value
-  }, outerRef) => {
-    const innerRef = useRef(null);
-    const ref = useComposedRefs(innerRef, outerRef);
-    const surface = useSurface("property");
-    const suggestions = useSuggestions("property", "value");
-    const suggestion = suggestions?.[0];
-    const [shadowValue, setShadowValue] = useControllableState({
-      caller: "@optiaxiom/react/Select",
-      defaultProp: defaultValue ?? "",
-      onChange: (newValue) => {
-        surface?.track({
-          name: "changed",
-          value: newValue
-        });
-        if (suggestion && newValue === suggestion.value) {
-          surface?.accept(suggestion.id);
-        }
-        onValueChange?.(newValue);
-      },
-      prop: value
-    });
-    const forceValueChange = useObserveValue(innerRef, setShadowValue);
-    useObserveReset(innerRef, setShadowValue);
-    const items = useMemo(() => {
-      return options.map(
-        (option) => option.value === suggestion?.value ? {
-          ...option,
-          detail: /* @__PURE__ */ jsx(Avatar, { fallback: "opal", size: "2xs" }),
-          group: {
-            hidden: true,
-            label: "Suggested",
-            priority: 1e3
-          }
-        } : option
-      ).sort((a, b) => {
-        return (b.group?.priority ?? 0) - (a.group?.priority ?? 0);
-      });
-    }, [options, suggestion]);
-    const selectedItem = useMemo(
-      () => shadowValue !== void 0 ? items.find((item) => item.value === shadowValue) : void 0,
-      [items, shadowValue]
-    );
-    const [isOpen, setIsOpen] = useControllableState({
-      caller: "@optiaxiom/react/Select",
-      defaultProp: defaultOpen,
-      onChange: onOpenChange,
-      prop: open
-    });
-    const [highlightedIndex, setHighlightedIndex] = useHighlightedIndex(
-      isOpen,
-      () => selectedItem ? items.findIndex(
-        (item) => !item.disabledReason && selectedItem.value === item.value
-      ) : -1
-    );
-    const highlightedItemRef = useRef(null);
-    const [focusVisible, setFocusVisible] = useState(false);
-    useEffect(() => {
-      if (!isOpen) {
-        setFocusVisible(false);
-      }
-    }, [isOpen]);
-    const downshift = useSelect({
-      highlightedIndex: highlightedIndex === -1 ? items.findIndex((item) => !item.disabledReason) : highlightedIndex,
-      isItemDisabled: (item) => !!item.disabledReason,
-      isOpen,
-      items,
-      itemToKey: (item) => item !== null ? item.value : item,
-      itemToString: (item) => item !== null ? item.label : "",
-      onHighlightedIndexChange(changes) {
-        if (changes.type === useSelect.stateChangeTypes.MenuMouseLeave) {
-          return;
-        }
-        if (changes.type === useSelect.stateChangeTypes.ItemMouseMove && isOpen || changes.isOpen) {
-          setHighlightedIndex(changes.highlightedIndex);
-        }
-        if (!(changes.type === useSelect.stateChangeTypes.ItemMouseMove || changes.type === useSelect.stateChangeTypes.ToggleButtonClick)) {
-          setFocusVisible(true);
-        }
-      },
-      onIsOpenChange({ isOpen: isOpen2, type }) {
-        setIsOpen(isOpen2);
-        if (isOpen2 && (type === useSelect.stateChangeTypes.ToggleButtonKeyDownArrowDown || type === useSelect.stateChangeTypes.ToggleButtonKeyDownArrowUp)) {
-          setFocusVisible(true);
-        }
-      },
-      onSelectedItemChange({ selectedItem: selectedItem2 }) {
-        forceValueChange(selectedItem2?.value ?? "");
-      },
-      selectedItem: selectedItem ?? null,
-      stateReducer: (state, actionAndChanges) => {
-        const { changes, type } = actionAndChanges;
-        switch (type) {
-          case useSelect.stateChangeTypes.ToggleButtonBlur:
-            return {
-              ...changes,
-              /**
-               * Do not select highlighted item when tabbing out of clicking
-               * outside to close the menu.
-               */
-              selectedItem: state.selectedItem
-            };
-          default:
-            return changes;
-        }
-      }
-    });
-    downshift.getToggleButtonProps({}, { suppressRefError: true });
-    downshift.getMenuProps({}, { suppressRefError: true });
-    return /* @__PURE__ */ jsx(Popper, { children: /* @__PURE__ */ jsxs(
-      SelectProvider,
-      {
-        disabled,
-        downshift,
-        focusVisible,
-        highlightedItem: items[downshift.highlightedIndex],
-        highlightedItemRef,
-        isOpen,
-        items,
-        loading,
-        onBlur,
-        selectedItem,
-        setFocusVisible,
-        children: [
-          /* @__PURE__ */ jsx(
-            SelectHiddenSelect,
-            {
-              defaultValue,
-              disabled,
-              name,
-              onChange: (event) => {
-                onChange?.(event);
-              },
-              ref,
-              required,
-              value
-            }
-          ),
-          children
-        ]
-      }
-    ) });
-  }
-);
+import { useSurface } from "../surface/useSurface.js";
+import { useObserveValue } from "../hooks/useObserveValue.js";
+import { Avatar } from "../avatar/Avatar.js";
+import { useHighlightedIndex } from "../downshift/useHighlightedIndex.js";
+import { useSuggestions } from "../surface/useSuggestions.js";
+import { SelectProvider } from "./SelectContext.js";
+import { SelectHiddenSelect } from "./SelectHiddenSelect.js";
+import { useObserveReset } from "./useObserveReset.js";
+import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { useSelect } from "downshift";
+import { Popper } from "@radix-ui/react-popper";
+//#region src/select/Select.tsx
+/**
+* Single-select form input for choosing one value from a dropdown list.
+* Works like a native `<select>` — supports `name`, `value`, `onChange`,
+* and works with `<form>` submissions.
+*
+* Must be used with SelectTrigger and SelectContent sub-components.
+*
+* Use Select when: single value selection in a form, controlled/uncontrolled
+* form input, you need form submission support.
+*
+* Use Menu instead when: you need multi-select, actions (edit/delete),
+* links, filtering/search, nested sub-menus, or checkbox/radio items.
+*
+* @group Select
+* @category form
+* @since 1.4.0
+*/
+const Select = forwardRef(({ children, defaultOpen = false, defaultValue, disabled, loading, name, onBlur, onChange, onOpenChange, onValueChange, open, options, required, value }, outerRef) => {
+	const innerRef = useRef(null);
+	const ref = useComposedRefs(innerRef, outerRef);
+	const surface = useSurface("property");
+	const suggestion = useSuggestions("property", "value")?.[0];
+	const [shadowValue, setShadowValue] = useControllableState({
+		caller: "@optiaxiom/react/Select",
+		defaultProp: defaultValue ?? "",
+		onChange: (newValue) => {
+			surface?.track({
+				name: "changed",
+				value: newValue
+			});
+			if (suggestion && newValue === suggestion.value) surface?.accept(suggestion.id);
+			onValueChange?.(newValue);
+		},
+		prop: value
+	});
+	const forceValueChange = useObserveValue(innerRef, setShadowValue);
+	useObserveReset(innerRef, setShadowValue);
+	const items = useMemo(() => {
+		return options.map((option) => option.value === suggestion?.value ? {
+			...option,
+			detail: /* @__PURE__ */ jsx(Avatar, {
+				fallback: "opal",
+				size: "2xs"
+			}),
+			group: {
+				hidden: true,
+				label: "Suggested",
+				priority: 1e3
+			}
+		} : option).sort((a, b) => {
+			return (b.group?.priority ?? 0) - (a.group?.priority ?? 0);
+		});
+	}, [options, suggestion]);
+	const selectedItem = useMemo(() => shadowValue !== void 0 ? items.find((item) => item.value === shadowValue) : void 0, [items, shadowValue]);
+	const [isOpen, setIsOpen] = useControllableState({
+		caller: "@optiaxiom/react/Select",
+		defaultProp: defaultOpen,
+		onChange: onOpenChange,
+		prop: open
+	});
+	const [highlightedIndex, setHighlightedIndex] = useHighlightedIndex(isOpen, () => selectedItem ? items.findIndex((item) => !item.disabledReason && selectedItem.value === item.value) : -1);
+	const highlightedItemRef = useRef(null);
+	const [focusVisible, setFocusVisible] = useState(false);
+	useEffect(() => {
+		if (!isOpen) setFocusVisible(false);
+	}, [isOpen]);
+	const downshift = useSelect({
+		highlightedIndex: highlightedIndex === -1 ? items.findIndex((item) => !item.disabledReason) : highlightedIndex,
+		isItemDisabled: (item) => !!item.disabledReason,
+		isOpen,
+		items,
+		itemToKey: (item) => item !== null ? item.value : item,
+		itemToString: (item) => item !== null ? item.label : "",
+		onHighlightedIndexChange(changes) {
+			if (changes.type === useSelect.stateChangeTypes.MenuMouseLeave) return;
+			if (changes.type === useSelect.stateChangeTypes.ItemMouseMove && isOpen || changes.isOpen) setHighlightedIndex(changes.highlightedIndex);
+			if (!(changes.type === useSelect.stateChangeTypes.ItemMouseMove || changes.type === useSelect.stateChangeTypes.ToggleButtonClick)) setFocusVisible(true);
+		},
+		onIsOpenChange({ isOpen, type }) {
+			setIsOpen(isOpen);
+			if (isOpen && (type === useSelect.stateChangeTypes.ToggleButtonKeyDownArrowDown || type === useSelect.stateChangeTypes.ToggleButtonKeyDownArrowUp)) setFocusVisible(true);
+		},
+		onSelectedItemChange({ selectedItem }) {
+			forceValueChange(selectedItem?.value ?? "");
+		},
+		selectedItem: selectedItem ?? null,
+		stateReducer: (state, actionAndChanges) => {
+			const { changes, type } = actionAndChanges;
+			switch (type) {
+				case useSelect.stateChangeTypes.ToggleButtonBlur: return {
+					...changes,
+					/**
+					* Do not select highlighted item when tabbing out of clicking
+					* outside to close the menu.
+					*/
+					selectedItem: state.selectedItem
+				};
+				default: return changes;
+			}
+		}
+	});
+	/**
+	* Dummy calls to suppress warning from downshift
+	*/
+	downshift.getToggleButtonProps({}, { suppressRefError: true });
+	downshift.getMenuProps({}, { suppressRefError: true });
+	return /* @__PURE__ */ jsx(Popper, { children: /* @__PURE__ */ jsxs(SelectProvider, {
+		disabled,
+		downshift,
+		focusVisible,
+		highlightedItem: items[downshift.highlightedIndex],
+		highlightedItemRef,
+		isOpen,
+		items,
+		loading,
+		onBlur,
+		selectedItem,
+		setFocusVisible,
+		children: [/* @__PURE__ */ jsx(SelectHiddenSelect, {
+			defaultValue,
+			disabled,
+			name,
+			onChange: (event) => {
+				/**
+				* Explicit wrapper needed to satisfy React's controlled component
+				* requirement. When `value` prop is provided, React expects an
+				* onChange handler to avoid "controlled without onChange"
+				* warnings. Actual value changes are driven by Downshift and the
+				* shadow value system (onValueChange), not by this onChange
+				* handler.
+				*/
+				onChange?.(event);
+			},
+			ref,
+			required,
+			value
+		}), children]
+	}) });
+});
 Select.displayName = "@optiaxiom/react/Select";
-
+//#endregion
 export { Select };

package/dist/esm/packages/react/src/select/SelectContent.js

@@ -1,148 +1,99 @@
 "use client";
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useId } from '@radix-ui/react-id';
-import { PopperContent } from '@radix-ui/react-popper';
-import clsx from 'clsx';
-import { forwardRef, useState } from 'react';
-import { useFieldContext } from '../field/FieldContext.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 { ListboxItemized } from '../listbox/ListboxItemized.js';
-import { ListboxLabel } from '../listbox/ListboxLabel.js';
-import '../listbox/ListboxRadioItem.js';
-import { ListboxSeparator } from '../listbox/ListboxSeparator.js';
-import '../listbox/ListboxSwitchItem.js';
-import { shouldShowSeparator, shouldShowGroup } from '../listbox/utils.js';
-import { ModalLayer } from '../modal/ModalLayer.js';
-import { ModalListbox } from '../modal/ModalListbox.js';
-import { Portal } from '../portal/Portal.js';
-import { Text } from '../text/Text.js';
-import { Tooltip } from '../tooltip/Tooltip.js';
-import '../tooltip/TooltipContent.js';
-import '../tooltip/TooltipProvider.js';
-import '../tooltip/TooltipRoot.js';
-import '../tooltip/TooltipTrigger.js';
-import '../transition/Transition.js';
-import { TransitionGroup } from '../transition/TransitionGroup.js';
-import '../utils/conditions.js';
-import { fallbackSpan } from '../utils/fallbackSpan.js';
-import '../utils/isHoverSupported.js';
-import { useSelectContext, resolveItemProperty } from './SelectContext.js';
-import { SelectRadioItem } from './SelectRadioItem.js';
-
-const SelectContent = forwardRef(
-  ({
-    align = "start",
-    "aria-label": ariaLabel,
-    children,
-    onPointerDown,
-    side = "bottom",
-    size,
-    ...props
-  }, ref) => {
-    const { labelId: fieldLabelId } = useFieldContext(
-      "@optiaxiom/react/SelectContent"
-    );
-    const {
-      downshift,
-      highlightedItem,
-      highlightedItemRef,
-      isOpen,
-      items,
-      loading
-    } = useSelectContext("@optiaxiom/react/SelectContent");
-    const labelId = useId();
-    const [placed, setPlaced] = useState(false);
-    return /* @__PURE__ */ jsx(TransitionGroup, { open: isOpen, children: /* @__PURE__ */ jsx(Portal, { asChild: true, children: /* @__PURE__ */ jsx(ModalLayer, { asChild: true, children: /* @__PURE__ */ jsx(
-      ModalListbox,
-      {
-        "aria-label": ariaLabel || "Menu",
-        asChild: true,
-        maxH: "sm",
-        minW: "trigger",
-        onPointerDown: (event) => {
-          onPointerDown?.(event);
-          if (event.defaultPrevented) {
-            return;
-          }
-          if (event.target instanceof Element && event.target.closest('[role="option"]')) {
-            return;
-          }
-          event.preventDefault();
-        },
-        ref,
-        role: "dialog",
-        size,
-        ...props,
-        children: /* @__PURE__ */ jsx(
-          PopperContent,
-          {
-            align,
-            "aria-labelledby": clsx(fieldLabelId, labelId),
-            collisionPadding: 16,
-            side,
-            sideOffset: 4,
-            children: /* @__PURE__ */ jsx(
-              ListboxItemized,
-              {
-                highlightedItem,
-                items,
-                itemToKey: (item) => item.value,
-                loading: loading ? "skeleton" : void 0,
-                onPlacedChange: (placed2) => {
-                  setPlaced(placed2);
-                  if (placed2 && highlightedItemRef.current) {
-                    highlightedItemRef.current.scrollIntoView({
-                      block: "nearest"
-                    });
-                  }
-                },
-                ...downshift.getMenuProps(
-                  {
-                    "aria-labelledby": fieldLabelId
-                  },
-                  { suppressRefError: !placed }
-                ),
-                children: children ?? ((item, index, prevItem) => {
-                  const group = item.group;
-                  return /* @__PURE__ */ jsxs(Fragment, { children: [
-                    shouldShowSeparator(group, prevItem) && /* @__PURE__ */ jsx(ListboxSeparator, {}),
-                    shouldShowGroup(group, prevItem) && /* @__PURE__ */ jsx(ListboxLabel, { children: group.label }),
-                    /* @__PURE__ */ jsx(
-                      Tooltip,
-                      {
-                        content: resolveItemProperty(item.disabledReason),
-                        children: /* @__PURE__ */ jsxs(
-                          SelectRadioItem,
-                          {
-                            addonBefore: item.addon,
-                            "aria-label": item["aria-label"],
-                            description: item.description,
-                            index,
-                            item,
-                            children: [
-                              item.label,
-                              item.detail && /* @__PURE__ */ jsx(Text, { asChild: true, color: "fg.secondary", truncate: true, children: fallbackSpan(item.detail) })
-                            ]
-                          },
-                          item.value
-                        )
-                      }
-                    )
-                  ] });
-                })
-              }
-            )
-          }
-        )
-      }
-    ) }) }) });
-  }
-);
+import { fallbackSpan } from "../utils/fallbackSpan.js";
+import { Text } from "../text/Text.js";
+import { TransitionGroup } from "../transition/TransitionGroup.js";
+import { Portal } from "../portal/Portal.js";
+import { useFieldContext } from "../field/FieldContext.js";
+import { Tooltip } from "../tooltip/Tooltip.js";
+import { ListboxItemized } from "../listbox/ListboxItemized.js";
+import { ListboxLabel } from "../listbox/ListboxLabel.js";
+import { ListboxSeparator } from "../listbox/ListboxSeparator.js";
+import { ModalListbox } from "../modal/ModalListbox.js";
+import { shouldShowGroup, shouldShowSeparator } from "../listbox/utils.js";
+import { resolveItemProperty, useSelectContext } from "./SelectContext.js";
+import { ModalLayer } from "../modal/ModalLayer.js";
+import { SelectRadioItem } from "./SelectRadioItem.js";
+import { useId } from "@radix-ui/react-id";
+import { forwardRef, useState } from "react";
+import clsx from "clsx";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { PopperContent } from "@radix-ui/react-popper";
+//#region src/select/SelectContent.tsx
+/**
+* @group Select
+*/
+const SelectContent = forwardRef(({ align = "start", "aria-label": ariaLabel, children, onPointerDown, side = "bottom", size, ...props }, ref) => {
+	const { labelId: fieldLabelId } = useFieldContext("@optiaxiom/react/SelectContent");
+	const { downshift, highlightedItem, highlightedItemRef, isOpen, items, loading } = useSelectContext("@optiaxiom/react/SelectContent");
+	const labelId = useId();
+	const [placed, setPlaced] = useState(false);
+	return /* @__PURE__ */ jsx(TransitionGroup, {
+		open: isOpen,
+		children: /* @__PURE__ */ jsx(Portal, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(ModalLayer, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx(ModalListbox, {
+					"aria-label": ariaLabel || "Menu",
+					asChild: true,
+					maxH: "sm",
+					minW: "trigger",
+					onPointerDown: (event) => {
+						onPointerDown?.(event);
+						if (event.defaultPrevented) return;
+						if (event.target instanceof Element && event.target.closest("[role=\"option\"]")) return;
+						event.preventDefault();
+					},
+					ref,
+					role: "dialog",
+					size,
+					...props,
+					children: /* @__PURE__ */ jsx(PopperContent, {
+						align,
+						"aria-labelledby": clsx(fieldLabelId, labelId),
+						collisionPadding: 16,
+						side,
+						sideOffset: 4,
+						children: /* @__PURE__ */ jsx(ListboxItemized, {
+							highlightedItem,
+							items,
+							itemToKey: (item) => item.value,
+							loading: loading ? "skeleton" : void 0,
+							onPlacedChange: (placed) => {
+								setPlaced(placed);
+								if (placed && highlightedItemRef.current) highlightedItemRef.current.scrollIntoView({ block: "nearest" });
+							},
+							...downshift.getMenuProps({ "aria-labelledby": fieldLabelId }, { suppressRefError: !placed }),
+							children: children ?? ((item, index, prevItem) => {
+								const group = item.group;
+								return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+									shouldShowSeparator(group, prevItem) && /* @__PURE__ */ jsx(ListboxSeparator, {}),
+									shouldShowGroup(group, prevItem) && /* @__PURE__ */ jsx(ListboxLabel, { children: group.label }),
+									/* @__PURE__ */ jsx(Tooltip, {
+										content: resolveItemProperty(item.disabledReason),
+										children: /* @__PURE__ */ jsxs(SelectRadioItem, {
+											addonBefore: item.addon,
+											"aria-label": item["aria-label"],
+											description: item.description,
+											index,
+											item,
+											children: [item.label, item.detail && /* @__PURE__ */ jsx(Text, {
+												asChild: true,
+												color: "fg.secondary",
+												truncate: true,
+												children: fallbackSpan(item.detail)
+											})]
+										}, item.value)
+									})
+								] });
+							})
+						})
+					})
+				})
+			})
+		})
+	});
+});
 SelectContent.displayName = "@optiaxiom/react/SelectContent";
-
+//#endregion
 export { SelectContent };

package/dist/esm/packages/react/src/select/SelectContext.js

@@ -1,7 +1,8 @@
 "use client";
-import { createContext } from '@radix-ui/react-context';
-
+"use client";
+import { createContext } from "@radix-ui/react-context";
+//#region src/select/SelectContext.ts
 const resolveItemProperty = (property, ...context) => typeof property === "function" ? property(...context) : property;
 const [SelectProvider, useSelectContext] = createContext("@optiaxiom/react/Select");
-
+//#endregion
 export { SelectProvider, resolveItemProperty, useSelectContext };