@react-md/core 1.0.0-next.0 → 1.0.0-next.10

package/dist/form/Select.js

@@ -1,294 +1,210 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cnb } from "cnbuilder";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useMemo, useRef, useState } from "react";
 import { IconRotator } from "../icon/IconRotator.js";
 import { getIcon } from "../icon/iconConfig.js";
 import { Menu } from "../menu/Menu.js";
-import { findMatchIndex } from "../movement/findMatchIndex.js";
-import { KeyboardMovementProvider, useKeyboardMovementProvider } from "../movement/useKeyboardMovementProvider.js";
-import { isSearchableEvent } from "../movement/utils.js";
-import { BELOW_CENTER_ANCHOR } from "../positioning/constants.js";
+import { KeyboardMovementProvider } from "../movement/useKeyboardMovementProvider.js";
 import { useEnsuredId } from "../useEnsuredId.js";
 import { useEnsuredRef } from "../useEnsuredRef.js";
-import { useToggle } from "../useToggle.js";
-import { loop } from "../utils/loop.js";
-import { SelectValue } from "./SelectValue.js";
-import { TextField } from "./TextField.js";
+import { label as labelStyles } from "./Label.js";
+import { SelectedOption } from "./SelectedOption.js";
+import { TextFieldContainer } from "./TextFieldContainer.js";
 import { getFormConfig } from "./formConfig.js";
 import { select } from "./selectStyles.js";
 import { extractOptionsFromChildren } from "./selectUtils.js";
+import { textField } from "./textFieldStyles.js";
+import { useFormReset } from "./useFormReset.js";
 import { ListboxProvider } from "./useListboxProvider.js";
-import { triggerManualChangeEvent, tryToSubmitRelatedForm } from "./utils.js";
+import { useSelectCombobox } from "./useSelectCombobox.js";
 const EMPTY_STRING = "";
 const noop = ()=>{
 // do nothing
 };
-const getNonDisabledOptions = (container)=>[
-        ...container.querySelectorAll('[role="option"]:not([aria-disabled])')
-    ];
 /**
  * **Client Component**
  *
+ * @example
+ * Simple Example
+ * ```tsx
+ * import { Select, Option } from "react-md";
+ * import { useState, type ReactElement } from "react";
+ *
+ * function Example(): ReactElement {
+ *   const [value, setValue] = useState("");
+ *
+ *   return (
+ *     <Select
+ *       label="Select"
+ *       value={value}
+ *       onChange={(event) => setValue(event.currentTarget.value)}
+ *       placeholder="Select a value"
+ *     >
+ *       <Option value="a">Option 1</Option>
+ *       <Option value="b">Option 2</Option>
+ *       <Option value="c">Option 3</Option>
+ *       <Option value="d">Option 4</Option>
+ *     </Select>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * Testing
+ * ```tsx
+ * rmdRender(
+ *   <Select label="Select" selectedOptionProps={{ "data-testid": "selected" }}>
+ *     <Option value="a">Option 1</Option>
+ *     <Option value="b">Option 2</Option>
+ *     <Option value="c">Option 3</Option>
+ *     <Option value="d">Option 4</Option>
+ *   </Select>
+ * );
+ *
+ * const user = userEvent.setup();
+ * const select = screen.getByRole("combobox", { name: "Select" });
+ * const selected = screen.getByTestId("selected")
+ * const selectInput = screen.getByRole("textbox", { hidden: true });
+ * expect(selected).toHaveTextContent("");
+ * expect(selectInput).toHaveValue("");
+ *
+ * await user.click(select);
+ * await user.click(screen.getByRole("option"), { name: "Option 2" });
+ *
+ * expect(selected).toHaveTextContent("Option 2");
+ * expect(selectInput).toHaveValue("b");
+ * ```
+ *
  * @remarks \@since 6.0.0 Rewritten with a new API.
  */ export function Select(props) {
-    const { id: propId, className, active = false, inputRef: propInputRef, inputClassName, menuProps = {}, containerProps: propContainerProps = {}, icon: propIcon, value, defaultValue, theme: propTheme, onChange = noop, leftAddon, rightAddon: propRightAddon, disableValueAddon = false, disableSelectedIcon = false, children, ...remaining } = props;
-    const { disabled = false, form } = props;
-    const id = useEnsuredId(propId, "select");
-    const containerId = useEnsuredId(propContainerProps.id, "select-container");
-    const icon = getIcon("dropdown", propIcon);
-    const theme = getFormConfig("theme", propTheme);
-    const { toggled: visible, enable: show, disable: hide } = useToggle();
-    const [inputRef, inputRefCallback] = useEnsuredRef(propInputRef);
-    const [containerRef, containerRefCallback] = useEnsuredRef(propContainerProps.ref);
-    const [menuRef, menuRefCallback] = useEnsuredRef(menuProps.nodeRef);
-    const [currentValue, setCurrentValue] = useState(()=>{
+    const { id, form, autoCompleteValue, autoComplete = autoCompleteValue, name = autoCompleteValue, className, onClick, onFocus, onKeyDown, inputRef: propInputRef, inputProps, containerRef, placeholder, menuProps = {}, label, labelProps = {}, selectedOptionProps, icon: propIcon, value, defaultValue, theme: propTheme, onChange = noop, rightAddon: propRightAddon, active = false, required, selectedIconAfter = false, disableOptionAddon = false, disableSelectedIcon = false, children, ...remaining } = props;
+    const { dense, error, disabled } = props;
+    const comboboxId = useEnsuredId(id, "select");
+    const inputId = useEnsuredId(inputProps?.id, "select-value");
+    const selectLabelId = useEnsuredId(labelProps.id, "select-label");
+    const labelId = label ? selectLabelId : undefined;
+    const [localValue, setLocalValue] = useState(()=>{
         if (typeof defaultValue !== "undefined") {
             return defaultValue;
         }
         return typeof value !== "undefined" ? value : EMPTY_STRING;
     });
+    const currentValue = typeof value === "undefined" ? localValue : value;
     const initialValue = useRef(currentValue);
-    useEffect(()=>{
-        const select = inputRef.current;
-        if (!select) {
-            return;
-        }
-        const formElement = select.closest("form") || form && document.getElementById(form) || null;
-        if (!formElement) {
-            return;
-        }
-        const handleReset = ()=>{
-            triggerManualChangeEvent(select, initialValue.current);
-        };
-        formElement.addEventListener("reset", handleReset);
-        return ()=>{
-            formElement.removeEventListener("reset", handleReset);
-        };
-    }, [
+    const { options, currentOption } = extractOptionsFromChildren(children, currentValue);
+    const { visible, comboboxProps, movementContext, getMenuProps } = useSelectCombobox({
         form,
-        inputRef
-    ]);
-    const { options, searchValues, currentOption, currentIndex } = extractOptionsFromChildren(children, typeof value === "undefined" ? currentValue : value);
-    const totalOptions = options.length - 1;
-    let rightAddon = propRightAddon;
-    if (typeof rightAddon === "undefined" && icon) {
-        rightAddon = /*#__PURE__*/ _jsx(IconRotator, {
-            rotated: visible,
-            children: icon
-        });
-    }
+        value: currentValue,
+        values: options,
+        onClick,
+        onFocus,
+        onKeyDown,
+        disabled,
+        popupId: menuProps.id,
+        popupRef: menuProps.nodeRef,
+        comboboxId,
+        comboboxRef: containerRef
+    });
+    const [inputRef, inputRefCallback] = useEnsuredRef(propInputRef);
+    useFormReset({
+        form,
+        elementRef: inputRef,
+        defaultValue: initialValue.current
+    });
     const listboxContext = useMemo(()=>({
             inputRef,
-            currentValue: typeof value === "undefined" ? currentValue : value,
+            currentValue,
+            selectedIconAfter,
             disableSelectedIcon
         }), [
         currentValue,
         disableSelectedIcon,
         inputRef,
-        value
+        selectedIconAfter
     ]);
-    // TODO: Need to update this to support editable listboxes where these props
-    // would go to the input element instead of the container
-    const a11yProps = {
-        "aria-haspopup": "listbox",
-        "aria-expanded": visible,
-        role: "combobox",
-        tabIndex: disabled ? -1 : 0
-    };
-    const { movementProps, movementContext, currentFocusIndex, setActiveDescendantId } = useKeyboardMovementProvider({
-        onFocus: propContainerProps.onFocus,
-        onClick (event) {
-            propContainerProps.onClick?.(event);
-            if (disabled) {
-                return;
-            }
-            show();
-        },
-        onKeyDown (event) {
-            propContainerProps.onKeyDown?.(event);
-            if (disabled) {
-                return;
-            }
-            if (visible) {
-                if (event.key === "Escape" || event.key === "Tab") {
-                    event.stopPropagation();
-                    hide();
-                }
-                return;
-            }
-            if (isSearchableEvent(event)) {
-                event.stopPropagation();
-                const nextIndex = findMatchIndex({
-                    value: event.key,
-                    values: searchValues,
-                    startIndex: event.shiftKey ? -1 : currentIndex
-                });
-                if (nextIndex !== -1) {
-                    triggerManualChangeEvent(inputRef.current, options[nextIndex].value);
-                }
-                return;
-            }
-            switch(event.key){
-                case " ":
-                    event.preventDefault();
-                    event.stopPropagation();
-                    show();
-                    break;
-                case "Enter":
-                    tryToSubmitRelatedForm(event, form);
-                    break;
-                case "Home":
-                    event.preventDefault();
-                    event.stopPropagation();
-                    if (currentIndex !== 0) {
-                        triggerManualChangeEvent(inputRef.current, options[0].value);
-                    }
-                    break;
-                case "End":
-                    event.preventDefault();
-                    event.stopPropagation();
-                    if (currentIndex !== totalOptions) {
-                        triggerManualChangeEvent(inputRef.current, options[totalOptions].value);
-                    }
-                    break;
-                case "ArrowDown":
-                case "ArrowUp":
-                    {
-                        event.preventDefault();
-                        event.stopPropagation();
-                        const increment = event.key === "ArrowDown";
-                        if (currentIndex === -1 && !increment) {
-                            // this matches the native select behavior where it will do
-                            // nothing if there is no current value
-                            return;
-                        }
-                        const nextIndex = loop({
-                            max: totalOptions,
-                            value: currentIndex,
-                            minmax: true,
-                            increment
-                        });
-                        triggerManualChangeEvent(inputRef.current, options[nextIndex].value);
-                        break;
-                    }
-            }
-        },
-        loopable: false,
-        searchable: true,
-        programmatic: true,
-        includeDisabled: false,
-        tabIndexBehavior: "virtual",
-        getDefaultFocusedIndex (focusOptions) {
-            if (typeof menuProps.getDefaultFocusedIndex === "function") {
-                return menuProps.getDefaultFocusedIndex(focusOptions);
-            }
-            const val = typeof value === "undefined" ? currentValue : value;
-            return options.findIndex((option)=>option.value === val);
-        },
-        getFocusableElements () {
-            const menu = menuRef.current;
-            if (!menu) {
-                return [];
-            }
-            return [
-                ...menu.querySelectorAll('[role="option"]:not([aria-disabled])')
-            ];
-        }
-    });
-    const containerProps = {
-        ...propContainerProps,
-        ...movementProps,
-        ...a11yProps,
-        ref: containerRefCallback
-    };
-    const { onEntering, onEntered, onExiting, onExited, disableTransition } = menuProps;
-    const handleMounting = (callback = noop, skipped = false)=>(appearing)=>{
-            callback(appearing);
-            const menu = menuRef.current;
-            if (!menu || skipped) {
-                return;
-            }
-            // Since the keyboard movement behavior is tied to the
-            // `TextFieldContainer` or `input` element instead of the menu for this
-            // widget, the focus index and active descendant must manually be updated
-            // whenever the menu becomes visible. Without this, no items will be
-            // focused until the first keyboard event that would move focus
-            const val = typeof value === "undefined" ? currentValue : value;
-            const focusables = getNonDisabledOptions(menu);
-            const index = Math.max(0, options.findIndex((option)=>option.value === val));
-            focusables[index].scrollIntoView({
-                block: "nearest"
-            });
-            currentFocusIndex.current = index;
-            setActiveDescendantId(focusables[index]?.id || "");
-        };
-    const handleUnmounting = (callback = noop, skipped = false)=>()=>{
-            callback();
-            if (!skipped) {
-                // since the menu is unmounted or set to hidden while not visible, need
-                // to clear the aria-activedescendant and current focus index when
-                // hiding
-                currentFocusIndex.current = -1;
-                setActiveDescendantId("");
-            }
-        };
+    const icon = getIcon("dropdown", propIcon);
+    const theme = getFormConfig("theme", propTheme);
+    let rightAddon = propRightAddon;
+    if (typeof rightAddon === "undefined" && icon) {
+        rightAddon = /*#__PURE__*/ _jsx(IconRotator, {
+            rotated: visible,
+            children: icon
+        });
+    }
+    let listboxLabelledBy = menuProps["aria-labelledby"];
+    const listboxLabel = menuProps["aria-label"];
+    if (!listboxLabel && !listboxLabelledBy) {
+        listboxLabelledBy = labelId || comboboxId;
+    }
     return /*#__PURE__*/ _jsx(ListboxProvider, {
         value: listboxContext,
         children: /*#__PURE__*/ _jsxs(KeyboardMovementProvider, {
             value: movementContext,
             children: [
-                /*#__PURE__*/ _jsx(TextField, {
+                /*#__PURE__*/ _jsxs(TextFieldContainer, {
+                    "aria-labelledby": labelId,
                     ...remaining,
-                    "aria-hidden": true,
-                    id: id,
-                    ref: inputRefCallback,
-                    containerProps: containerProps,
-                    type: "text",
-                    tabIndex: -1,
+                    ...comboboxProps,
+                    label: !!label,
                     theme: theme,
-                    value: value,
-                    defaultValue: defaultValue,
                     active: active || visible,
-                    leftAddon: leftAddon,
-                    rightAddon: rightAddon,
                     className: cnb("rmd-select-container", className),
-                    inputClassName: select({
-                        theme,
-                        className: inputClassName
-                    }),
-                    onChange: (event)=>{
-                        onChange(event);
-                        if (typeof value !== "undefined") {
-                            return;
-                        }
-                        const nextValue = event.currentTarget.value;
-                        const valueAsNumber = parseFloat(nextValue);
-                        const nextOption = options.find((option)=>// need to compare both here since
-                            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                            // @ts-expect-error
-                            option.value === nextValue || option.value === valueAsNumber);
-                        setCurrentValue(nextOption ? nextOption.value : initialValue.current);
-                    },
-                    children: /*#__PURE__*/ _jsx(SelectValue, {
-                        disableAddon: disableValueAddon,
-                        ...currentOption
-                    })
+                    rightAddon: rightAddon,
+                    children: [
+                        /*#__PURE__*/ _jsx(SelectedOption, {
+                            option: currentOption,
+                            placeholder: placeholder,
+                            disableAddon: disableOptionAddon,
+                            ...selectedOptionProps
+                        }),
+                        /*#__PURE__*/ _jsx("input", {
+                            "aria-hidden": true,
+                            id: inputId,
+                            ref: inputRefCallback,
+                            type: "text",
+                            autoComplete: autoComplete,
+                            name: name,
+                            tabIndex: -1,
+                            disabled: disabled,
+                            required: required,
+                            placeholder: " ",
+                            ...inputProps,
+                            value: value,
+                            defaultValue: defaultValue,
+                            className: cnb(select({
+                                theme
+                            }), textField()),
+                            onChange: (event)=>{
+                                onChange(event);
+                                if (typeof value !== "undefined") {
+                                    return;
+                                }
+                                const nextValue = event.currentTarget.value;
+                                const nextOption = options.find((option)=>option === nextValue);
+                                setLocalValue(nextOption ?? initialValue.current);
+                            }
+                        }),
+                        label && /*#__PURE__*/ _jsx("span", {
+                            ...labelProps,
+                            id: labelId,
+                            className: labelStyles({
+                                dense,
+                                error,
+                                disabled,
+                                active: active || visible,
+                                floating: true,
+                                floatingActive: !!placeholder || !!currentOption,
+                                className: labelProps.className
+                            }),
+                            children: label
+                        })
+                    ]
                 }),
                 /*#__PURE__*/ _jsx(Menu, {
-                    "aria-labelledby": containerId,
-                    anchor: BELOW_CENTER_ANCHOR,
-                    role: "listbox",
-                    width: "min",
-                    ...menuProps,
-                    ref: menuRefCallback,
-                    visible: visible,
-                    fixedTo: containerRef,
-                    onRequestClose: hide,
-                    onEntering: handleMounting(onEntering, false),
-                    onEntered: handleMounting(onEntered, !disableTransition),
-                    onExiting: handleUnmounting(onExiting, false),
-                    onExited: handleUnmounting(onExited, !disableTransition),
+                    ...getMenuProps(menuProps),
+                    "aria-label": listboxLabel,
+                    "aria-labelledby": listboxLabelledBy,
                     children: children
                 })
             ]

package/dist/form/Select.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/Select.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport {\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type ChangeEvent,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from \"react\";\nimport { IconRotator } from \"../icon/IconRotator.js\";\nimport { getIcon } from \"../icon/iconConfig.js\";\nimport { Menu, type MenuProps } from \"../menu/Menu.js\";\nimport { findMatchIndex } from \"../movement/findMatchIndex.js\";\nimport {\n  KeyboardMovementProvider,\n  useKeyboardMovementProvider,\n} from \"../movement/useKeyboardMovementProvider.js\";\nimport { isSearchableEvent } from \"../movement/utils.js\";\nimport { BELOW_CENTER_ANCHOR } from \"../positioning/constants.js\";\nimport {\n  type TransitionEnterHandler,\n  type TransitionExitHandler,\n} from \"../transition/types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { useToggle } from \"../useToggle.js\";\nimport { loop } from \"../utils/loop.js\";\nimport { SelectValue } from \"./SelectValue.js\";\nimport { TextField, type TextFieldProps } from \"./TextField.js\";\nimport { getFormConfig } from \"./formConfig.js\";\nimport { select } from \"./selectStyles.js\";\nimport { extractOptionsFromChildren } from \"./selectUtils.js\";\nimport {\n  type FormFieldOptions,\n  type UserAgentAutoCompleteProps,\n} from \"./types.js\";\nimport { ListboxProvider } from \"./useListboxProvider.js\";\nimport { triggerManualChangeEvent, tryToSubmitRelatedForm } from \"./utils.js\";\n\nconst EMPTY_STRING = \"\" as const;\nconst noop = (): void => {\n  // do nothing\n};\n\nconst getNonDisabledOptions = (\n  container: HTMLElement\n): readonly HTMLElement[] => [\n  ...container.querySelectorAll<HTMLLIElement>(\n    '[role=\"option\"]:not([aria-disabled])'\n  ),\n];\n\n/**\n * This is a convenience type for casting the `event.currentTarget.value` of a\n * `Select`'s change event to be union of available values.\n *\n * Note: The change event does not provide any sort of validation on the value\n * so automation tools like Cypress, Playwright, or Selenium might set an\n * invalid value. This also does not work for numbers, so you will need to\n * implement that yourself.\n *\n * @example\n * Simple Usage\n * ```tsx\n * import type { SelectedChangeEvent } from \"@react-md/core\";\n * import { Select, Option } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * type Value = \"\" | \"a\" | \"b\" | \"c\" | \"d\";\n *\n * function Example(): ReactElement {\n *   const [value, setValue] = useState<Value>(\"\");\n *\n *   const handleChange = (event: SelectChangeEvent<Value>): void => {\n *     // No type error!\n *     // `event.currentTarget.value`'s type is `Value` instead of a generic `string`\n *     setValue(event.currentTarget.value);\n *   };\n *\n *   return (\n *     <Select\n *       label=\"Label\"\n *       value={value}\n *       onChange={handleChange}\n *     >\n *       <Option value=\"a\">First</Option>\n *       <Option value=\"b\">Second</Option>\n *       <Option value=\"c\">Third</Option>\n *       <Option value=\"d\">Fourth</Option>\n *     </Select>\n *   );\n * }\n * ```\n * @remarks \\@since 6.0.0\n */\nexport type SelectChangeEvent<Value extends string> =\n  ChangeEvent<HTMLInputElement> & { currentTarget: { value: Value } };\n\n/**\n * @remarks \\@since 6.0.0 Rewritten with a new API.\n */\nexport interface SelectProps<Value extends string>\n  extends Omit<TextFieldProps, \"placeholder\" | \"type\" | \"onChange\">,\n    UserAgentAutoCompleteProps,\n    FormFieldOptions {\n  /**\n   * An optional ref to pass to the hidden `<input type=\"text\" />` element that\n   * stores the current value. This is really only useful if you'd like to keep\n   * this component uncontrolled and access the value through\n   * `inputRef.current.value`.\n   */\n  inputRef?: Ref<HTMLInputElement>;\n\n  /**\n   * Set this to a custom dropdown icon or `null` to not render a dropdown icon.\n   *\n   * @defaultValue `getIcon(\"dropdown\")`\n   */\n  icon?: ReactNode;\n\n  /**\n   * Set this value to fully control the value of the select component. The\n   * {@link onChange} handler **must** also be provided if this prop exists.\n   */\n  value?: Value;\n\n  /**\n   * An optional default value when the value of the select component is\n   * uncontrolled.\n   *\n   * @defaultValue `\"\"`\n   */\n  defaultValue?: Value;\n\n  /** @see {@link SelectChangeEvent} */\n  onChange?(event: SelectChangeEvent<Value>): void;\n\n  /**\n   * Any additional props to provide to the `Menu` component that renders all\n   * the `Option`s.\n   *\n   * The menu will always have these default values unless explicity\n   * overwritten by this prop:\n   *\n   * - `aria-labelledby={containerId}`\n   * - `anchor={BELOW_CENTER_ANCHOR}`\n   * - `width=\"min\"`\n   */\n  menuProps?: Omit<MenuProps, \"visible\" | \"onRequestClose\" | \"fixedTo\">;\n\n  /**\n   * Set this to `true` to update all the `Option` components to no longer\n   * render an icon while selected.\n   *\n   * @defaultValue `false`\n   */\n  disableSelectedIcon?: boolean;\n\n  /**\n   * Set this to `true` to prevent the current option from rendering the\n   * `leftAddon` in the `TextFieldContainer`.\n   *\n   * @defaultValue `false`\n   */\n  disableValueAddon?: boolean;\n\n  /**\n   * This should be the available `Option`s for the select to choose from. It\n   * can also contain `OptGroup` or any other elements but only clicking on an\n   * `Option` component will update the value.\n   */\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * @remarks \\@since 6.0.0 Rewritten with a new API.\n */\nexport function Select<Value extends string>(\n  props: SelectProps<Value>\n): ReactElement {\n  const {\n    id: propId,\n    className,\n    active = false,\n    inputRef: propInputRef,\n    inputClassName,\n    menuProps = {},\n    containerProps: propContainerProps = {},\n    icon: propIcon,\n    value,\n    defaultValue,\n    theme: propTheme,\n    onChange = noop,\n    leftAddon,\n    rightAddon: propRightAddon,\n    disableValueAddon = false,\n    disableSelectedIcon = false,\n    children,\n    ...remaining\n  } = props;\n  const { disabled = false, form } = props;\n\n  const id = useEnsuredId(propId, \"select\");\n  const containerId = useEnsuredId(propContainerProps.id, \"select-container\");\n  const icon = getIcon(\"dropdown\", propIcon);\n  const theme = getFormConfig(\"theme\", propTheme);\n\n  const { toggled: visible, enable: show, disable: hide } = useToggle();\n  const [inputRef, inputRefCallback] = useEnsuredRef(propInputRef);\n  const [containerRef, containerRefCallback] = useEnsuredRef(\n    propContainerProps.ref\n  );\n  const [menuRef, menuRefCallback] = useEnsuredRef(menuProps.nodeRef);\n  const [currentValue, setCurrentValue] = useState(() => {\n    if (typeof defaultValue !== \"undefined\") {\n      return defaultValue;\n    }\n\n    return typeof value !== \"undefined\" ? value : EMPTY_STRING;\n  });\n  const initialValue = useRef(currentValue);\n\n  useEffect(() => {\n    const select = inputRef.current;\n    if (!select) {\n      return;\n    }\n\n    const formElement =\n      select.closest<HTMLFormElement>(\"form\") ||\n      (form && document.getElementById(form)) ||\n      null;\n\n    if (!formElement) {\n      return;\n    }\n\n    const handleReset = (): void => {\n      triggerManualChangeEvent(select, initialValue.current);\n    };\n\n    formElement.addEventListener(\"reset\", handleReset);\n    return () => {\n      formElement.removeEventListener(\"reset\", handleReset);\n    };\n  }, [form, inputRef]);\n\n  const { options, searchValues, currentOption, currentIndex } =\n    extractOptionsFromChildren(\n      children,\n      typeof value === \"undefined\" ? currentValue : value\n    );\n  const totalOptions = options.length - 1;\n\n  let rightAddon = propRightAddon;\n  if (typeof rightAddon === \"undefined\" && icon) {\n    rightAddon = <IconRotator rotated={visible}>{icon}</IconRotator>;\n  }\n\n  const listboxContext = useMemo(\n    () => ({\n      inputRef,\n      currentValue: typeof value === \"undefined\" ? currentValue : value,\n      disableSelectedIcon,\n    }),\n    [currentValue, disableSelectedIcon, inputRef, value]\n  );\n\n  // TODO: Need to update this to support editable listboxes where these props\n  // would go to the input element instead of the container\n  const a11yProps = {\n    \"aria-haspopup\": \"listbox\",\n    \"aria-expanded\": visible,\n    role: \"combobox\",\n    tabIndex: disabled ? -1 : 0,\n  } as const;\n  const {\n    movementProps,\n    movementContext,\n    currentFocusIndex,\n    setActiveDescendantId,\n  } = useKeyboardMovementProvider<HTMLDivElement>({\n    onFocus: propContainerProps.onFocus,\n    onClick(event) {\n      propContainerProps.onClick?.(event);\n      if (disabled) {\n        return;\n      }\n\n      show();\n    },\n    onKeyDown(event) {\n      propContainerProps.onKeyDown?.(event);\n      if (disabled) {\n        return;\n      }\n\n      if (visible) {\n        if (event.key === \"Escape\" || event.key === \"Tab\") {\n          event.stopPropagation();\n          hide();\n        }\n\n        return;\n      }\n\n      if (isSearchableEvent(event)) {\n        event.stopPropagation();\n\n        const nextIndex = findMatchIndex({\n          value: event.key,\n          values: searchValues,\n          startIndex: event.shiftKey ? -1 : currentIndex,\n        });\n\n        if (nextIndex !== -1) {\n          triggerManualChangeEvent(inputRef.current, options[nextIndex].value);\n        }\n        return;\n      }\n\n      switch (event.key) {\n        case \" \":\n          event.preventDefault();\n          event.stopPropagation();\n          show();\n          break;\n        case \"Enter\":\n          tryToSubmitRelatedForm(event, form);\n          break;\n        case \"Home\":\n          event.preventDefault();\n          event.stopPropagation();\n          if (currentIndex !== 0) {\n            triggerManualChangeEvent(inputRef.current, options[0].value);\n          }\n          break;\n        case \"End\":\n          event.preventDefault();\n          event.stopPropagation();\n          if (currentIndex !== totalOptions) {\n            triggerManualChangeEvent(\n              inputRef.current,\n              options[totalOptions].value\n            );\n          }\n          break;\n        case \"ArrowDown\":\n        case \"ArrowUp\": {\n          event.preventDefault();\n          event.stopPropagation();\n\n          const increment = event.key === \"ArrowDown\";\n          if (currentIndex === -1 && !increment) {\n            // this matches the native select behavior where it will do\n            // nothing if there is no current value\n            return;\n          }\n\n          const nextIndex = loop({\n            max: totalOptions,\n            value: currentIndex,\n            minmax: true,\n            increment,\n          });\n\n          triggerManualChangeEvent(inputRef.current, options[nextIndex].value);\n          break;\n        }\n      }\n    },\n    loopable: false,\n    searchable: true,\n    programmatic: true,\n    includeDisabled: false,\n    tabIndexBehavior: \"virtual\",\n    getDefaultFocusedIndex(focusOptions) {\n      if (typeof menuProps.getDefaultFocusedIndex === \"function\") {\n        return menuProps.getDefaultFocusedIndex(focusOptions);\n      }\n\n      const val = typeof value === \"undefined\" ? currentValue : value;\n      return options.findIndex((option) => option.value === val);\n    },\n    getFocusableElements() {\n      const menu = menuRef.current;\n      if (!menu) {\n        return [];\n      }\n\n      return [\n        ...menu.querySelectorAll<HTMLLIElement>(\n          '[role=\"option\"]:not([aria-disabled])'\n        ),\n      ];\n    },\n  });\n\n  const containerProps: Required<SelectProps<Value>>[\"containerProps\"] = {\n    ...propContainerProps,\n    ...movementProps,\n    ...a11yProps,\n    ref: containerRefCallback,\n  };\n\n  const { onEntering, onEntered, onExiting, onExited, disableTransition } =\n    menuProps;\n  const handleMounting =\n    (callback: TransitionEnterHandler | undefined = noop, skipped = false) =>\n    (appearing: boolean) => {\n      callback(appearing);\n\n      const menu = menuRef.current;\n      if (!menu || skipped) {\n        return;\n      }\n\n      // Since the keyboard movement behavior is tied to the\n      // `TextFieldContainer` or `input` element instead of the menu for this\n      // widget, the focus index and active descendant must manually be updated\n      // whenever the menu becomes visible. Without this, no items will be\n      // focused until the first keyboard event that would move focus\n      const val = typeof value === \"undefined\" ? currentValue : value;\n      const focusables = getNonDisabledOptions(menu);\n      const index = Math.max(\n        0,\n        options.findIndex((option) => option.value === val)\n      );\n      focusables[index].scrollIntoView({ block: \"nearest\" });\n      currentFocusIndex.current = index;\n      setActiveDescendantId(focusables[index]?.id || \"\");\n    };\n\n  const handleUnmounting =\n    (callback: TransitionExitHandler | undefined = noop, skipped = false) =>\n    (): void => {\n      callback();\n\n      if (!skipped) {\n        // since the menu is unmounted or set to hidden while not visible, need\n        // to clear the aria-activedescendant and current focus index when\n        // hiding\n        currentFocusIndex.current = -1;\n        setActiveDescendantId(\"\");\n      }\n    };\n\n  return (\n    <ListboxProvider value={listboxContext}>\n      <KeyboardMovementProvider value={movementContext}>\n        <TextField\n          {...remaining}\n          aria-hidden\n          id={id}\n          ref={inputRefCallback}\n          containerProps={containerProps}\n          type=\"text\"\n          tabIndex={-1}\n          theme={theme}\n          value={value}\n          defaultValue={defaultValue}\n          active={active || visible}\n          leftAddon={leftAddon}\n          rightAddon={rightAddon}\n          className={cnb(\"rmd-select-container\", className)}\n          inputClassName={select({\n            theme,\n            className: inputClassName,\n          })}\n          onChange={(event) => {\n            onChange(event as SelectChangeEvent<Value>);\n            if (typeof value !== \"undefined\") {\n              return;\n            }\n\n            const nextValue = event.currentTarget.value;\n            const valueAsNumber = parseFloat(nextValue);\n            const nextOption = options.find(\n              (option) =>\n                // need to compare both here since\n                // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                // @ts-expect-error\n                option.value === nextValue || option.value === valueAsNumber\n            );\n\n            setCurrentValue(\n              nextOption ? nextOption.value : initialValue.current\n            );\n          }}\n        >\n          <SelectValue disableAddon={disableValueAddon} {...currentOption} />\n        </TextField>\n        <Menu\n          aria-labelledby={containerId}\n          anchor={BELOW_CENTER_ANCHOR}\n          role=\"listbox\"\n          width=\"min\"\n          {...menuProps}\n          ref={menuRefCallback}\n          visible={visible}\n          fixedTo={containerRef}\n          onRequestClose={hide}\n          onEntering={handleMounting(onEntering, false)}\n          onEntered={handleMounting(onEntered, !disableTransition)}\n          onExiting={handleUnmounting(onExiting, false)}\n          onExited={handleUnmounting(onExited, !disableTransition)}\n        >\n          {children}\n        </Menu>\n      </KeyboardMovementProvider>\n    </ListboxProvider>\n  );\n}\n"],"names":["cnb","useEffect","useMemo","useRef","useState","IconRotator","getIcon","Menu","findMatchIndex","KeyboardMovementProvider","useKeyboardMovementProvider","isSearchableEvent","BELOW_CENTER_ANCHOR","useEnsuredId","useEnsuredRef","useToggle","loop","SelectValue","TextField","getFormConfig","select","extractOptionsFromChildren","ListboxProvider","triggerManualChangeEvent","tryToSubmitRelatedForm","EMPTY_STRING","noop","getNonDisabledOptions","container","querySelectorAll","Select","props","id","propId","className","active","inputRef","propInputRef","inputClassName","menuProps","containerProps","propContainerProps","icon","propIcon","value","defaultValue","theme","propTheme","onChange","leftAddon","rightAddon","propRightAddon","disableValueAddon","disableSelectedIcon","children","remaining","disabled","form","containerId","toggled","visible","enable","show","disable","hide","inputRefCallback","containerRef","containerRefCallback","ref","menuRef","menuRefCallback","nodeRef","currentValue","setCurrentValue","initialValue","current","formElement","closest","document","getElementById","handleReset","addEventListener","removeEventListener","options","searchValues","currentOption","currentIndex","totalOptions","length","rotated","listboxContext","a11yProps","role","tabIndex","movementProps","movementContext","currentFocusIndex","setActiveDescendantId","onFocus","onClick","event","onKeyDown","key","stopPropagation","nextIndex","values","startIndex","shiftKey","preventDefault","increment","max","minmax","loopable","searchable","programmatic","includeDisabled","tabIndexBehavior","getDefaultFocusedIndex","focusOptions","val","findIndex","option","getFocusableElements","menu","onEntering","onEntered","onExiting","onExited","disableTransition","handleMounting","callback","skipped","appearing","focusables","index","Math","scrollIntoView","block","handleUnmounting","aria-hidden","type","nextValue","currentTarget","valueAsNumber","parseFloat","nextOption","find","disableAddon","aria-labelledby","anchor","width","fixedTo","onRequestClose"],"mappings":"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"}
+{"version":3,"sources":["../../src/form/Select.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport {\n  useMemo,\n  useRef,\n  useState,\n  type ChangeEvent,\n  type HTMLAttributes,\n  type InputHTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from \"react\";\nimport { type BoxProps } from \"../box/Box.js\";\nimport { IconRotator } from \"../icon/IconRotator.js\";\nimport { getIcon } from \"../icon/iconConfig.js\";\nimport { Menu, type MenuProps } from \"../menu/Menu.js\";\nimport { KeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\nimport {\n  type LabelA11y,\n  type PropsWithRef,\n  type RequireAtLeastOne,\n} from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { label as labelStyles } from \"./Label.js\";\nimport { SelectedOption } from \"./SelectedOption.js\";\nimport {\n  TextFieldContainer,\n  type TextFieldContainerProps,\n} from \"./TextFieldContainer.js\";\nimport { getFormConfig } from \"./formConfig.js\";\nimport { select } from \"./selectStyles.js\";\nimport { extractOptionsFromChildren } from \"./selectUtils.js\";\nimport { textField } from \"./textFieldStyles.js\";\nimport { type UserAgentAutocompleteProps } from \"./types.js\";\nimport { useFormReset } from \"./useFormReset.js\";\nimport { ListboxProvider, type ListboxContext } from \"./useListboxProvider.js\";\nimport { useSelectCombobox } from \"./useSelectCombobox.js\";\n\nconst EMPTY_STRING = \"\" as const;\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * This is a convenience type for casting the `event.currentTarget.value` of a\n * `Select`'s change event to be union of available values.\n *\n * Note: The change event does not provide any sort of validation on the value\n * so automation tools like Cypress, Playwright, or Selenium might set an\n * invalid value. This also does not work for numbers, so you will need to\n * implement that yourself.\n *\n * @example\n * Simple Usage\n * ```tsx\n * import type { SelectedChangeEvent } from \"@react-md/core\";\n * import { Select, Option } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * type Value = \"\" | \"a\" | \"b\" | \"c\" | \"d\";\n *\n * function Example(): ReactElement {\n *   const [value, setValue] = useState<Value>(\"\");\n *\n *   const handleChange = (event: SelectChangeEvent<Value>): void => {\n *     // No type error!\n *     // `event.currentTarget.value`'s type is `Value` instead of a generic `string`\n *     setValue(event.currentTarget.value);\n *   };\n *\n *   return (\n *     <Select\n *       label=\"Label\"\n *       value={value}\n *       onChange={handleChange}\n *     >\n *       <Option value=\"a\">First</Option>\n *       <Option value=\"b\">Second</Option>\n *       <Option value=\"c\">Third</Option>\n *       <Option value=\"d\">Fourth</Option>\n *     </Select>\n *   );\n * }\n * ```\n * @remarks \\@since 6.0.0\n */\nexport type SelectChangeEvent<Value extends string> =\n  ChangeEvent<HTMLInputElement> & { currentTarget: { value: Value } };\n\n/**\n * @remarks \\@since 6.0.0 Rewritten with a new API.\n */\nexport interface SelectProps<Value extends string>\n  extends Omit<TextFieldContainerProps, \"label\">,\n    Pick<InputHTMLAttributes<HTMLInputElement>, \"form\" | \"required\">,\n    UserAgentAutocompleteProps {\n  /**\n   * @defaultValue `\"select-\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * Optional placeholder text or element to render while no options have been\n   * selected.\n   */\n  placeholder?: ReactNode;\n\n  /**\n   * Set this to a custom dropdown icon or `null` to not render a dropdown icon.\n   *\n   * @defaultValue `getIcon(\"dropdown\")`\n   */\n  icon?: ReactNode;\n\n  /**\n   * Set this value to fully control the value of the select component. The\n   * {@link onChange} handler **must** also be provided if this prop exists.\n   */\n  value?: Value;\n\n  /**\n   * An optional default value when the value of the select component is\n   * uncontrolled.\n   *\n   * @defaultValue `\"\"`\n   */\n  defaultValue?: Value;\n\n  /** @see {@link SelectChangeEvent} */\n  onChange?(event: SelectChangeEvent<Value>): void;\n\n  /**\n   * An optional floating label to display like other form fields.\n   */\n  label?: ReactNode;\n\n  /**\n   * Optional props to pass to the `<span>` that surrounds the {@link label}\n   */\n  labelProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;\n\n  /**\n   * An optional ref to pass to the hidden `<input type=\"text\" />` element that\n   * stores the current value. This is really only useful if you'd like to keep\n   * this component uncontrolled and access the value through\n   * `inputRef.current.value`.\n   */\n  inputRef?: Ref<HTMLInputElement>;\n  inputProps?: InputHTMLAttributes<HTMLInputElement>;\n\n  /**\n   * A ref for the container `<div>` element.\n   */\n  containerRef?: Ref<HTMLDivElement>;\n\n  /**\n   * Any additional props to provide to the `Menu` component that renders all\n   * the `Option`s.\n   *\n   * The menu will always have these default values unless explicity\n   * overwritten by this prop:\n   *\n   * - `aria-labelledby={label ? labelId : id}` -- this will be undefined if\n   *   `aria-label` is provided\n   * - `anchor={BELOW_CENTER_ANCHOR}`\n   * - `width=\"min\"`\n   */\n  menuProps?: Omit<MenuProps, \"visible\" | \"onRequestClose\" | \"fixedTo\">;\n\n  /**\n   * Any additional props to pass to the div that contains the current visible\n   * option.\n   */\n  selectedOptionProps?: BoxProps;\n\n  /**\n   * Set this to `true` if all the `Option` components should display the\n   * selected icon after the children instead of before.\n   *\n   * @see {@link disableSelectedIcon} to remove the selected icon instead.\n   *\n   * @defaultValue `false`\n   */\n  selectedIconAfter?: boolean;\n\n  /**\n   * Set this to `true` to prevent the current option from rendering the\n   * `leftAddon` in the `TextFieldContainer`.\n   *\n   * @defaultValue `false`\n   */\n  disableOptionAddon?: boolean;\n\n  /**\n   * Set this to `true` to update all the `Option` components to no longer\n   * render an icon while selected.\n   *\n   * @defaultValue `false`\n   */\n  disableSelectedIcon?: boolean;\n\n  /**\n   * This should be the available `Option`s for the select to choose from. It\n   * can also contain `OptGroup` or any other elements but only clicking on an\n   * `Option` component will update the value.\n   */\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * @example\n * Simple Example\n * ```tsx\n * import { Select, Option } from \"react-md\";\n * import { useState, type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const [value, setValue] = useState(\"\");\n *\n *   return (\n *     <Select\n *       label=\"Select\"\n *       value={value}\n *       onChange={(event) => setValue(event.currentTarget.value)}\n *       placeholder=\"Select a value\"\n *     >\n *       <Option value=\"a\">Option 1</Option>\n *       <Option value=\"b\">Option 2</Option>\n *       <Option value=\"c\">Option 3</Option>\n *       <Option value=\"d\">Option 4</Option>\n *     </Select>\n *   );\n * }\n * ```\n *\n * @example\n * Testing\n * ```tsx\n * rmdRender(\n *   <Select label=\"Select\" selectedOptionProps={{ \"data-testid\": \"selected\" }}>\n *     <Option value=\"a\">Option 1</Option>\n *     <Option value=\"b\">Option 2</Option>\n *     <Option value=\"c\">Option 3</Option>\n *     <Option value=\"d\">Option 4</Option>\n *   </Select>\n * );\n *\n * const user = userEvent.setup();\n * const select = screen.getByRole(\"combobox\", { name: \"Select\" });\n * const selected = screen.getByTestId(\"selected\")\n * const selectInput = screen.getByRole(\"textbox\", { hidden: true });\n * expect(selected).toHaveTextContent(\"\");\n * expect(selectInput).toHaveValue(\"\");\n *\n * await user.click(select);\n * await user.click(screen.getByRole(\"option\"), { name: \"Option 2\" });\n *\n * expect(selected).toHaveTextContent(\"Option 2\");\n * expect(selectInput).toHaveValue(\"b\");\n * ```\n *\n * @remarks \\@since 6.0.0 Rewritten with a new API.\n */\nexport function Select<Value extends string>(\n  props: RequireAtLeastOne<SelectProps<Value>, \"label\" | keyof LabelA11y>\n): ReactElement {\n  const {\n    id,\n    form,\n    autoCompleteValue,\n    autoComplete = autoCompleteValue,\n    name = autoCompleteValue,\n    className,\n    onClick,\n    onFocus,\n    onKeyDown,\n    inputRef: propInputRef,\n    inputProps,\n    containerRef,\n    placeholder,\n    menuProps = {},\n    label,\n    labelProps = {},\n    selectedOptionProps,\n    icon: propIcon,\n    value,\n    defaultValue,\n    theme: propTheme,\n    onChange = noop,\n    rightAddon: propRightAddon,\n    active = false,\n    required,\n    selectedIconAfter = false,\n    disableOptionAddon = false,\n    disableSelectedIcon = false,\n    children,\n    ...remaining\n  } = props;\n  const { dense, error, disabled } = props;\n\n  const comboboxId = useEnsuredId(id, \"select\");\n  const inputId = useEnsuredId(inputProps?.id, \"select-value\");\n  const selectLabelId = useEnsuredId(labelProps.id, \"select-label\");\n  const labelId = label ? selectLabelId : undefined;\n\n  const [localValue, setLocalValue] = useState(() => {\n    if (typeof defaultValue !== \"undefined\") {\n      return defaultValue;\n    }\n\n    return typeof value !== \"undefined\" ? value : EMPTY_STRING;\n  });\n  const currentValue = typeof value === \"undefined\" ? localValue : value;\n  const initialValue = useRef(currentValue);\n  const { options, currentOption } = extractOptionsFromChildren(\n    children,\n    currentValue\n  );\n\n  const { visible, comboboxProps, movementContext, getMenuProps } =\n    useSelectCombobox({\n      form,\n      value: currentValue,\n      values: options,\n      onClick,\n      onFocus,\n      onKeyDown,\n      disabled,\n      popupId: menuProps.id,\n      popupRef: menuProps.nodeRef,\n      comboboxId,\n      comboboxRef: containerRef,\n    });\n\n  const [inputRef, inputRefCallback] = useEnsuredRef(propInputRef);\n  useFormReset({\n    form,\n    elementRef: inputRef,\n    defaultValue: initialValue.current,\n  });\n  const listboxContext = useMemo<ListboxContext>(\n    () => ({\n      inputRef,\n      currentValue,\n      selectedIconAfter,\n      disableSelectedIcon,\n    }),\n    [currentValue, disableSelectedIcon, inputRef, selectedIconAfter]\n  );\n\n  const icon = getIcon(\"dropdown\", propIcon);\n  const theme = getFormConfig(\"theme\", propTheme);\n  let rightAddon = propRightAddon;\n  if (typeof rightAddon === \"undefined\" && icon) {\n    rightAddon = <IconRotator rotated={visible}>{icon}</IconRotator>;\n  }\n\n  let listboxLabelledBy = menuProps[\"aria-labelledby\"];\n  const listboxLabel = menuProps[\"aria-label\"];\n  if (!listboxLabel && !listboxLabelledBy) {\n    listboxLabelledBy = labelId || comboboxId;\n  }\n\n  return (\n    <ListboxProvider value={listboxContext}>\n      <KeyboardMovementProvider value={movementContext}>\n        <TextFieldContainer\n          aria-labelledby={labelId}\n          {...remaining}\n          {...comboboxProps}\n          label={!!label}\n          theme={theme}\n          active={active || visible}\n          className={cnb(\"rmd-select-container\", className)}\n          rightAddon={rightAddon}\n        >\n          <SelectedOption\n            option={currentOption}\n            placeholder={placeholder}\n            disableAddon={disableOptionAddon}\n            {...selectedOptionProps}\n          />\n          <input\n            aria-hidden\n            id={inputId}\n            ref={inputRefCallback}\n            type=\"text\"\n            autoComplete={autoComplete}\n            name={name}\n            tabIndex={-1}\n            disabled={disabled}\n            required={required}\n            placeholder=\" \"\n            {...inputProps}\n            value={value}\n            defaultValue={defaultValue}\n            className={cnb(select({ theme }), textField())}\n            onChange={(event) => {\n              onChange(event as SelectChangeEvent<Value>);\n              if (typeof value !== \"undefined\") {\n                return;\n              }\n\n              const nextValue = event.currentTarget.value;\n              const nextOption = options.find((option) => option === nextValue);\n\n              setLocalValue(nextOption ?? initialValue.current);\n            }}\n          />\n          {label && (\n            <span\n              {...labelProps}\n              id={labelId}\n              className={labelStyles({\n                dense,\n                error,\n                disabled,\n                active: active || visible,\n                floating: true,\n                floatingActive: !!placeholder || !!currentOption,\n                className: labelProps.className,\n              })}\n            >\n              {label}\n            </span>\n          )}\n        </TextFieldContainer>\n        <Menu\n          {...getMenuProps(menuProps)}\n          aria-label={listboxLabel}\n          aria-labelledby={listboxLabelledBy as string}\n        >\n          {children}\n        </Menu>\n      </KeyboardMovementProvider>\n    </ListboxProvider>\n  );\n}\n"],"names":["cnb","useMemo","useRef","useState","IconRotator","getIcon","Menu","KeyboardMovementProvider","useEnsuredId","useEnsuredRef","label","labelStyles","SelectedOption","TextFieldContainer","getFormConfig","select","extractOptionsFromChildren","textField","useFormReset","ListboxProvider","useSelectCombobox","EMPTY_STRING","noop","Select","props","id","form","autoCompleteValue","autoComplete","name","className","onClick","onFocus","onKeyDown","inputRef","propInputRef","inputProps","containerRef","placeholder","menuProps","labelProps","selectedOptionProps","icon","propIcon","value","defaultValue","theme","propTheme","onChange","rightAddon","propRightAddon","active","required","selectedIconAfter","disableOptionAddon","disableSelectedIcon","children","remaining","dense","error","disabled","comboboxId","inputId","selectLabelId","labelId","undefined","localValue","setLocalValue","currentValue","initialValue","options","currentOption","visible","comboboxProps","movementContext","getMenuProps","values","popupId","popupRef","nodeRef","comboboxRef","inputRefCallback","elementRef","current","listboxContext","rotated","listboxLabelledBy","listboxLabel","aria-labelledby","option","disableAddon","input","aria-hidden","ref","type","tabIndex","event","nextValue","currentTarget","nextOption","find","span","floating","floatingActive","aria-label"],"mappings":"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"}

package/dist/form/SelectedOption.d.ts

@@ -0,0 +1,21 @@
+import { type ReactElement, type ReactNode } from "react";
+import { type BoxProps } from "../box/Box.js";
+import { type OptionProps } from "./Option.js";
+/**
+ * @remarks \@since 6.0.0
+ * @internal
+ */
+export interface SelectedOptionProps extends BoxProps {
+    option: OptionProps | undefined;
+    placeholder?: ReactNode;
+    disableAddon: boolean;
+}
+/**
+ * **Server Component**
+ *
+ * This component is used to render the current option.
+ *
+ * @remarks \@since 6.0.0
+ * @internal
+ */
+export declare function SelectedOption(props: SelectedOptionProps): ReactElement;

package/dist/form/SelectedOption.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cnb } from "cnbuilder";
+import { Box } from "../box/Box.js";
+import { cssUtils } from "../cssUtils.js";
+import { textField } from "./textFieldStyles.js";
+/**
+ * **Server Component**
+ *
+ * This component is used to render the current option.
+ *
+ * @remarks \@since 6.0.0
+ * @internal
+ */ export function SelectedOption(props) {
+    const { disableAddon, option, className, disablePadding = true, placeholder, ...remaining } = props;
+    let children = option?.children || placeholder;
+    // when the children are a string or number, wrap it in additional span so
+    // that overflow can be ellipsis-ed
+    if (typeof children === "string" || typeof children === "number") {
+        children = /*#__PURE__*/ _jsx("span", {
+            className: cssUtils({
+                textOverflow: "ellipsis"
+            }),
+            children: children
+        });
+    }
+    return /*#__PURE__*/ _jsxs(Box, {
+        ...remaining,
+        className: cnb("rmd-selected-option", textField(), className),
+        disablePadding: disablePadding,
+        children: [
+            !disableAddon && option?.leftAddon,
+            children
+        ]
+    });
+}
+
+//# sourceMappingURL=SelectedOption.js.map

package/dist/form/SelectedOption.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/form/SelectedOption.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { type ReactElement, type ReactNode } from \"react\";\nimport { Box, type BoxProps } from \"../box/Box.js\";\nimport { cssUtils } from \"../cssUtils.js\";\nimport { type OptionProps } from \"./Option.js\";\nimport { textField } from \"./textFieldStyles.js\";\n\n/**\n * @remarks \\@since 6.0.0\n * @internal\n */\nexport interface SelectedOptionProps extends BoxProps {\n  option: OptionProps | undefined;\n  placeholder?: ReactNode;\n  disableAddon: boolean;\n}\n\n/**\n * **Server Component**\n *\n * This component is used to render the current option.\n *\n * @remarks \\@since 6.0.0\n * @internal\n */\nexport function SelectedOption(props: SelectedOptionProps): ReactElement {\n  const {\n    disableAddon,\n    option,\n    className,\n    disablePadding = true,\n    placeholder,\n    ...remaining\n  } = props;\n\n  let children = option?.children || placeholder;\n  // when the children are a string or number, wrap it in additional span so\n  // that overflow can be ellipsis-ed\n  if (typeof children === \"string\" || typeof children === \"number\") {\n    children = (\n      <span className={cssUtils({ textOverflow: \"ellipsis\" })}>{children}</span>\n    );\n  }\n\n  return (\n    <Box\n      {...remaining}\n      className={cnb(\"rmd-selected-option\", textField(), className)}\n      disablePadding={disablePadding}\n    >\n      {!disableAddon && option?.leftAddon}\n      {children}\n    </Box>\n  );\n}\n"],"names":["cnb","Box","cssUtils","textField","SelectedOption","props","disableAddon","option","className","disablePadding","placeholder","remaining","children","span","textOverflow","leftAddon"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,GAAG,QAAuB,gBAAgB;AACnD,SAASC,QAAQ,QAAQ,iBAAiB;AAE1C,SAASC,SAAS,QAAQ,uBAAuB;AAYjD;;;;;;;CAOC,GACD,OAAO,SAASC,eAAeC,KAA0B;IACvD,MAAM,EACJC,YAAY,EACZC,MAAM,EACNC,SAAS,EACTC,iBAAiB,IAAI,EACrBC,WAAW,EACX,GAAGC,WACJ,GAAGN;IAEJ,IAAIO,WAAWL,QAAQK,YAAYF;IACnC,0EAA0E;IAC1E,mCAAmC;IACnC,IAAI,OAAOE,aAAa,YAAY,OAAOA,aAAa,UAAU;QAChEA,yBACE,KAACC;YAAKL,WAAWN,SAAS;gBAAEY,cAAc;YAAW;sBAAKF;;IAE9D;IAEA,qBACE,MAACX;QACE,GAAGU,SAAS;QACbH,WAAWR,IAAI,uBAAuBG,aAAaK;QACnDC,gBAAgBA;;YAEf,CAACH,gBAAgBC,QAAQQ;YACzBH;;;AAGP"}