@react-md/core 1.0.0-next.0

package/dist/form/Select.js

@@ -0,0 +1,299 @@
+"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 { 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 { 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 { getFormConfig } from "./formConfig.js";
+import { select } from "./selectStyles.js";
+import { extractOptionsFromChildren } from "./selectUtils.js";
+import { ListboxProvider } from "./useListboxProvider.js";
+import { triggerManualChangeEvent, tryToSubmitRelatedForm } from "./utils.js";
+const EMPTY_STRING = "";
+const noop = ()=>{
+// do nothing
+};
+const getNonDisabledOptions = (container)=>[
+        ...container.querySelectorAll('[role="option"]:not([aria-disabled])')
+    ];
+/**
+ * **Client Component**
+ *
+ * @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(()=>{
+        if (typeof defaultValue !== "undefined") {
+            return defaultValue;
+        }
+        return typeof value !== "undefined" ? value : EMPTY_STRING;
+    });
+    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);
+        };
+    }, [
+        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
+        });
+    }
+    const listboxContext = useMemo(()=>({
+            inputRef,
+            currentValue: typeof value === "undefined" ? currentValue : value,
+            disableSelectedIcon
+        }), [
+        currentValue,
+        disableSelectedIcon,
+        inputRef,
+        value
+    ]);
+    // 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("");
+            }
+        };
+    return /*#__PURE__*/ _jsx(ListboxProvider, {
+        value: listboxContext,
+        children: /*#__PURE__*/ _jsxs(KeyboardMovementProvider, {
+            value: movementContext,
+            children: [
+                /*#__PURE__*/ _jsx(TextField, {
+                    ...remaining,
+                    "aria-hidden": true,
+                    id: id,
+                    ref: inputRefCallback,
+                    containerProps: containerProps,
+                    type: "text",
+                    tabIndex: -1,
+                    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
+                    })
+                }),
+                /*#__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),
+                    children: children
+                })
+            ]
+        })
+    });
+}
+
+//# sourceMappingURL=Select.js.map

package/dist/form/Select.js.map

@@ -0,0 +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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"}

package/dist/form/SelectValue.d.ts

@@ -0,0 +1,17 @@
+import { type ReactElement } from "react";
+import { type OptionProps } from "./Option.js";
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface SelectValueProps extends Partial<OptionProps> {
+    disableAddon: boolean;
+}
+/**
+ * **Server Component**
+ *
+ * This component is used to render the current option.
+ *
+ * @remarks \@since 6.0.0
+ * @internal
+ */
+export declare function SelectValue(props: SelectValueProps): ReactElement;

package/dist/form/SelectValue.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cnb } from "cnbuilder";
+import { bem } from "../utils/bem.js";
+const styles = bem("rmd-select-value");
+/**
+ * **Server Component**
+ *
+ * This component is used to render the current option.
+ *
+ * @remarks \@since 6.0.0
+ * @internal
+ */ export function SelectValue(props) {
+    const { leftAddon, disableAddon, children: propChildren } = props;
+    let children = propChildren;
+    // 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: styles("v"),
+            children: children
+        });
+    }
+    return /*#__PURE__*/ _jsxs("div", {
+        className: cnb(styles()),
+        children: [
+            !disableAddon && leftAddon,
+            children
+        ]
+    });
+}
+
+//# sourceMappingURL=SelectValue.js.map

package/dist/form/SelectValue.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/form/SelectValue.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { type ReactElement } from \"react\";\nimport { bem } from \"../utils/bem.js\";\nimport { type OptionProps } from \"./Option.js\";\n\nconst styles = bem(\"rmd-select-value\");\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface SelectValueProps extends Partial<OptionProps> {\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 SelectValue(props: SelectValueProps): ReactElement {\n  const { leftAddon, disableAddon, children: propChildren } = props;\n\n  let children = propChildren;\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 = <span className={styles(\"v\")}>{children}</span>;\n  }\n\n  return (\n    <div className={cnb(styles())}>\n      {!disableAddon && leftAddon}\n      {children}\n    </div>\n  );\n}\n"],"names":["cnb","bem","styles","SelectValue","props","leftAddon","disableAddon","children","propChildren","span","className","div"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,GAAG,QAAQ,kBAAkB;AAGtC,MAAMC,SAASD,IAAI;AASnB;;;;;;;CAOC,GACD,OAAO,SAASE,YAAYC,KAAuB;IACjD,MAAM,EAAEC,SAAS,EAAEC,YAAY,EAAEC,UAAUC,YAAY,EAAE,GAAGJ;IAE5D,IAAIG,WAAWC;IACf,0EAA0E;IAC1E,mCAAmC;IACnC,IAAI,OAAOD,aAAa,YAAY,OAAOA,aAAa,UAAU;QAChEA,yBAAW,KAACE;YAAKC,WAAWR,OAAO;sBAAOK;;IAC5C;IAEA,qBACE,MAACI;QAAID,WAAWV,IAAIE;;YACjB,CAACI,gBAAgBD;YACjBE;;;AAGP"}

package/dist/form/Slider.d.ts

@@ -0,0 +1,249 @@
+import { type HTMLAttributes, type ReactElement, type ReactNode, type Ref } from "react";
+import { type TooltipProps } from "../tooltip/Tooltip.js";
+import { type LabelRequiredForA11y, type PropsWithRef } from "../types.js";
+import { type SliderAddonProps } from "./SliderContainer.js";
+import { type SliderThumbPresentation } from "./SliderThumb.js";
+import { type SliderMarksOptions } from "./SliderValueMarks.js";
+import { type RangeSliderState } from "./useRangeSlider.js";
+import { type SliderState, type SliderValueOptions } from "./useSlider.js";
+declare module "react" {
+    interface CSSProperties {
+        "--rmd-slider-color"?: string;
+        "--rmd-slider-active-color"?: string;
+        "--rmd-slider-inactive-color"?: string;
+        "--rmd-slider-size"?: string | number;
+        "--rmd-slider-active-size"?: string | number;
+        "--rmd-slider-inactive-size"?: string | number;
+        "--rmd-slider-vertical-size"?: string | number;
+        "--rmd-slider-offset-1"?: string;
+        "--rmd-slider-offset-2"?: string;
+        "--rmd-slider-tooltip-scale"?: string | number;
+        "--rmd-slider-tooltip-translate"?: string | number;
+        "--rmd-slider-mark-offset"?: string;
+    }
+}
+/**
+ * @remarks \@since 2.5.0
+ */
+export interface BaseSliderProps extends HTMLAttributes<HTMLDivElement>, SliderThumbPresentation, SliderValueOptions, SliderAddonProps, SliderMarksOptions {
+    /**
+     * This can be used to apply a ref to the container element since this
+     * component does not use `forwardRef`.
+     */
+    containerRef?: Ref<HTMLDivElement>;
+    /**
+     * The amount to jump the slider's value when the `PageUp` or `PageDown`
+     * key is pressed.
+     *
+     * The default value is 1/10th of the range.
+     *
+     * @defaultValue `(numberOfSteps / 10) * step`
+     */
+    jump?: number;
+    /** @defaultValue `false` */
+    disabled?: boolean;
+    /** @defaultValue `false` */
+    vertical?: boolean;
+    /**
+     * This can be used to apply custom styles or a `ref` to the track element if
+     * needed.
+     */
+    trackProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
+    /**
+     * This can be used to configure any additional tooltip props like the
+     * CSS transition `classNames`, styles, etc.
+     *
+     * This will only be used when {@link discrete} is `true`.
+     *
+     * Note: The `position` will always be `"above"` for horizontal sliders and
+     * `"left"` for vertical sliders.
+     */
+    tooltipProps?: Omit<Partial<TooltipProps>, "position">;
+}
+/**
+ * @remarks
+ * \@since 2.5.0
+ * \@since 6.0.0 Only requires `value` and `setValue` props instead of all the
+ * slider controls.
+ * \@since 6.0.0 The `thumbLabel` and `thumbLabelledBy` props were removed. Use
+ * the `aria-label` or `aria-labelledby` props instead.
+ */
+export interface SliderProps extends BaseSliderProps, SliderState {
+    /**
+     * Any additional props that should be provided to the thumb element. This can
+     * be useful for applying additional styling.
+     */
+    thumbProps?: HTMLAttributes<HTMLSpanElement>;
+    /**
+     * This can be used to update the discrete slider's value tooltip.
+     *
+     * @example
+     * More Value Information
+     * ```tsx
+     * <Slider
+     *   {...slider}
+     *   discrete
+     *   getTooltipChildren={(value) => (
+     *     <TextIconSpacing icon={<FavoriteIcon />}>
+     *       {value}
+     *     </TextIconSpacing>
+     *   )}
+     * />
+     * ```
+     *
+     * This will only be used when {@link discrete} is `true`.
+     *
+     * @defaultValue `(value) => value`
+     */
+    getTooltipChildren?(value: number): ReactNode;
+}
+/**
+ * @remarks
+ * \@since 2.5.0
+ * \@since 6.0.0 Only requires `rangeValue` and `setRangeValue` props instead of
+ * all the slider controls.
+ * \@since 6.0.0 The `thumb1Label`, `thumb1LabelledBy`, `thumb1Props`,
+ * `thumb2Label`, `thumb2LabelledBy` and `thumb2Props` were renamed to
+ * `minThumbLabel`, `minThumbLabelledBy`, `minThumbProps`, `maxThumbLabel`,
+ * `maxThumbLabelledBy`, and `maxThumbProps` respectively.
+ */
+export interface RangeSliderProps extends BaseSliderProps, RangeSliderState {
+    /**
+     * Any additional props that should be provided to the min value thumb
+     * element. This can be useful for applying additional styling.
+     */
+    minThumbProps?: HTMLAttributes<HTMLSpanElement>;
+    /**
+     * Any additional props that should be provided to the max value thumb
+     * element. This can be useful for applying additional styling.
+     */
+    maxThumbProps?: HTMLAttributes<HTMLSpanElement>;
+    /**
+     * The `aria-label` to apply to the min value.
+     *
+     * Note: Either this prop or the {@link minThumbLabelledBy} are required for
+     * accessibility.
+     *
+     * @defaultValue `"Min"`
+     */
+    minThumbLabel?: string;
+    /**
+     * Set this to an element's id that labels the min value.
+     *
+     * Note: Either this prop or the {@link minThumbLabel} are required for
+     * accessibility.
+     */
+    minThumbLabelledBy?: string;
+    /**
+     * The `aria-label` to apply to the max value.
+     *
+     * Note: Either this prop or the {@link maxThumbLabelledBy} are required for
+     * accessibility.
+     *
+     * @defaultValue `"Max"`
+     */
+    maxThumbLabel?: string;
+    /**
+     * Set this to an element's id that labels the max value.
+     *
+     * Note: Either this prop or the {@link maxThumbLabel} are required for
+     * accessibility.
+     */
+    maxThumbLabelledBy?: string;
+    /**
+     * This can be used to update the discrete slider's value tooltip.
+     *
+     * @example
+     * More Value Information
+     * ```tsx
+     * <Slider
+     *   {...slider}
+     *   discrete
+     *   getTooltipChildren={(value, isMinValue) => (
+     *     <TextIconSpacing
+     *       icon={isMinValue ? <FavoriteIcon /> : <CloseIcon /}
+     *       iconAfter={!isMinValue}
+     *     >
+     *       {value}
+     *     </TextIconSpacing>
+     *   )}
+     * />
+     * ```
+     *
+     * This will only be used when {@link discrete} is `true`.
+     *
+     * @defaultValue `(value) => value`
+     */
+    getTooltipChildren?(value: number, isMinValue: boolean): ReactNode;
+}
+/**
+ * **Client Component**
+ *
+ * @example
+ * Simple Example
+ * ```tsx
+ * import { Form, Slider, useSlider } from "@react-md/core";
+ * import type { ReactElement } from "react";
+ *
+ * function Example(): ReactElement {
+ *   const slider = useSlider({
+ *     // these are the defaults and can be changed
+ *     min: 0,
+ *     max: 100,
+ *     step: 1,
+ *     defaultValue: 50,
+ *   });
+ *
+ *   // if you need access to the current value or manually change the value
+ *   // yourself.
+ *   const { value, setValue } = slider;
+ *
+ *   return (
+ *     <Form>
+ *       <Slider {...slider} aria-label="Volume" />
+ *     </Form>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * Range Slider Example
+ * ```tsx
+ * import { Fieldset, Form, Legend, Slider, useRangeSlider } from "@react-md/core";
+ * import type { ReactElement } from "react";
+ * import { useId } from "react";
+ *
+ * function Example(): ReactElement {
+ *   const slider = useRangeSlider({
+ *     // these are the defaults and can be changed
+ *     min: 0,
+ *     max: 100,
+ *     step: 1,
+ *     defaultValue: [0, 100],
+ *   });
+ *
+ *   // if you need access to the current value or manually change the value
+ *   // yourself.
+ *   const { rangeValue, setRangeValue } = slider;
+ *   const [minPrice, maxPrice] = rangeValue;
+ *
+ *   return (
+ *     <Form>
+ *       <Fieldset>
+ *         <Legend>Price Range</Legend>
+ *         <Slider {...slider} />
+ *       </Fieldset>
+ *     </Form>
+ *   );
+ * }
+ * ```
+ *
+ * @remarks
+ * \@since 2.5.0
+ * \@since 6.0.0 The `Slider` and `RangeSlider` have been combined into the
+ * single `Slider` component and removed the `label` support.
+ * \@since 6.0.0 Each thumb includes an invisible `<input type="range">` instead
+ * of an `<input type="hidden">`.
+ */
+export declare function Slider(props: LabelRequiredForA11y<SliderProps>): ReactElement;
+export declare function Slider(props: RangeSliderProps): ReactElement;