@react-md/core 6.4.0 → 6.5.1

package/dist/form/Select.d.ts

@@ -2,8 +2,27 @@ import { type ChangeEvent, type HTMLAttributes, type InputHTMLAttributes, type R
 import { type BoxProps } from "../box/Box.js";
 import { type MenuProps } from "../menu/Menu.js";
 import { type LabelA11y, type PropsWithRef, type RequireAtLeastOne } from "../types.js";
+import { type OptionProps } from "./Option.js";
 import { type TextFieldContainerProps } from "./TextFieldContainer.js";
 import { type UserAgentAutocompleteProps } from "./types.js";
+/**
+ * @since 6.5.0
+ */
+export interface GetSelectedOptionChildrenOptions<Value extends string = string> {
+    value: "" | Value;
+    /**
+     * The option will be undefined if there is no value or matching option.
+     */
+    option: OptionProps | undefined;
+    /**
+     * This is a pass-through of the {@link SelectProps.placeholder}
+     */
+    placeholder?: ReactNode;
+    /**
+     * This is a pass-through of the {@link SelectProps.selectedOptionProps}
+     */
+    children?: ReactNode;
+}
 /**
  * This is a convenience type for casting the `event.currentTarget.value` of a
  * `Select`'s change event to be union of available values.
@@ -145,6 +164,11 @@ export interface SelectProps<Value extends string> extends Omit<TextFieldContain
      * @defaultValue `false`
      */
     disableSelectedIcon?: boolean;
+    /**
+     * @since 6.5.0
+     * @defaultValue `({ children, option, placeholder }) => children ?? (option?.children || placeholder)`
+     */
+    getSelectedOptionChildren?: (options: GetSelectedOptionChildrenOptions<Value>) => ReactNode;
     /**
      * This should be the available `Option`s for the select to choose from. It
      * can also contain `OptGroup` or any other elements but only clicking on an

package/dist/form/Select.js

@@ -22,6 +22,12 @@ const EMPTY_STRING = "";
 const noop = ()=>{
 // do nothing
 };
+/**
+ * @since 6.5.0
+ */ const defaultGetSelectedOptionChildren = (options)=>{
+    const { children, option, placeholder } = options;
+    return children ?? (option?.children || placeholder);
+};
 /**
  * **Client Component**
  *
@@ -53,19 +59,19 @@ const noop = ()=>{
  * @see {@link https://react-md.dev/components/select | Select Demos}
  * @since 6.0.0 Rewritten with a new API.
  */ export function Select(props) {
-    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 { id, form, autoCompleteValue, autoComplete = autoCompleteValue, name = autoCompleteValue, className, onClick, onFocus, onKeyDown, inputRef: propInputRef, inputProps, containerRef, placeholder, menuProps = {}, label, labelProps = {}, selectedOptionProps, getSelectedOptionChildren = defaultGetSelectedOptionChildren, 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") {
+        if (defaultValue !== undefined) {
             return defaultValue;
         }
-        return typeof value !== "undefined" ? value : EMPTY_STRING;
+        return value !== undefined ? value : EMPTY_STRING;
     });
-    const currentValue = typeof value === "undefined" ? localValue : value;
+    const currentValue = value === undefined ? localValue : value;
     const initialValue = useRef(currentValue);
     const { options, currentOption } = extractOptionsFromChildren(children, currentValue);
     const { visible, comboboxProps, movementContext, getMenuProps } = useSelectCombobox({
@@ -90,7 +96,7 @@ const noop = ()=>{
     const icon = getIcon("dropdown", propIcon);
     const theme = getFormConfig("theme", propTheme);
     let rightAddon = propRightAddon;
-    if (typeof rightAddon === "undefined" && icon) {
+    if (rightAddon === undefined && icon) {
         rightAddon = /*#__PURE__*/ _jsx(IconRotator, {
             rotated: visible,
             children: icon
@@ -117,9 +123,14 @@ const noop = ()=>{
                 children: [
                     /*#__PURE__*/ _jsx(SelectedOption, {
                         option: currentOption,
-                        placeholder: placeholder,
                         disableAddon: disableOptionAddon,
-                        ...selectedOptionProps
+                        ...selectedOptionProps,
+                        children: getSelectedOptionChildren({
+                            value: currentValue,
+                            option: currentOption,
+                            placeholder,
+                            children: selectedOptionProps?.children
+                        })
                     }),
                     /*#__PURE__*/ _jsx("input", {
                         "aria-hidden": true,
@@ -140,7 +151,7 @@ const noop = ()=>{
                         }), textField()),
                         onChange: (event)=>{
                             onChange(event);
-                            if (typeof value !== "undefined") {
+                            if (value !== undefined) {
                                 return;
                             }
                             const nextValue = event.currentTarget.value;

package/dist/form/Select.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/Select.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport {\n  type ChangeEvent,\n  type HTMLAttributes,\n  type InputHTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { type BoxProps } from \"../box/Box.js\";\nimport { IconRotator } from \"../icon/IconRotator.js\";\nimport { getIcon } from \"../icon/config.js\";\nimport { 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 { Listbox } from \"./Listbox.js\";\nimport { SelectedOption } from \"./SelectedOption.js\";\nimport {\n  TextFieldContainer,\n  type TextFieldContainerProps,\n} from \"./TextFieldContainer.js\";\nimport { getFormConfig } from \"./formConfig.js\";\nimport { label as labelStyles } from \"./labelStyles.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 { useSelectCombobox } from \"./useSelectCombobox.js\";\nimport { triggerManualChangeEvent } from \"./utils.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 Simple Usage\n * ```tsx\n * import { Select, type SelectChangeEvent } from \"@react-md/core/form/Select\";\n * import { Option } from \"@react-md/core/form/Option\";\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 * @since 6.0.0\n */\nexport type SelectChangeEvent<Value extends string> =\n  ChangeEvent<HTMLInputElement> & { currentTarget: { value: Value } };\n\n/**\n * @since 6.0.0 Rewritten with a new API.\n */\nexport interface SelectProps<Value extends string>\n  extends\n    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>>;\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?: PropsWithRef<\n    Omit<MenuProps, \"visible\" | \"onRequestClose\" | \"fixedTo\">\n  >;\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 Simple Example\n * ```tsx\n * import { Option } from \"@react-md/core/form/Option\";\n * import { Select } from \"@react-md/core/form/Select\";\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 * @see {@link https://react-md.dev/components/select | Select Demos}\n * @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.ref,\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\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  const { ref: listboxRef, ...listboxProps } = getMenuProps(menuProps);\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    <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      <Listbox\n        {...listboxProps}\n        aria-label={listboxLabel}\n        aria-labelledby={listboxLabelledBy as string}\n        nodeRef={listboxRef}\n        value={currentValue}\n        setValue={useCallback(\n          (option: \"\" | Value) => {\n            triggerManualChangeEvent(inputRef.current, option);\n          },\n          [inputRef]\n        )}\n        selectedIconAfter={selectedIconAfter}\n        disableSelectedIcon={disableSelectedIcon}\n      >\n        {children}\n      </Listbox>\n    </KeyboardMovementProvider>\n  );\n}\n"],"names":["cnb","useCallback","useRef","useState","IconRotator","getIcon","KeyboardMovementProvider","useEnsuredId","useEnsuredRef","Listbox","SelectedOption","TextFieldContainer","getFormConfig","label","labelStyles","select","extractOptionsFromChildren","textField","useFormReset","useSelectCombobox","triggerManualChangeEvent","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","ref","comboboxRef","inputRefCallback","elementRef","current","rotated","listboxRef","listboxProps","listboxLabelledBy","listboxLabel","aria-labelledby","option","disableAddon","input","aria-hidden","type","tabIndex","event","nextValue","currentTarget","nextOption","find","span","floating","floatingActive","aria-label","nodeRef","setValue"],"mappings":"AAAA;;AAEA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAOEC,WAAW,EACXC,MAAM,EACNC,QAAQ,QACH,QAAQ;AAGf,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,OAAO,QAAQ,oBAAoB;AAE5C,SAASC,wBAAwB,QAAQ,6CAA6C;AAMtF,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,aAAa,QAAQ,sBAAsB;AACpD,SAASC,OAAO,QAAQ,eAAe;AACvC,SAASC,cAAc,QAAQ,sBAAsB;AACrD,SACEC,kBAAkB,QAEb,0BAA0B;AACjC,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,SAASC,WAAW,QAAQ,mBAAmB;AACxD,SAASC,MAAM,QAAQ,oBAAoB;AAC3C,SAASC,0BAA0B,QAAQ,mBAAmB;AAC9D,SAASC,SAAS,QAAQ,uBAAuB;AAEjD,SAASC,YAAY,QAAQ,oBAAoB;AACjD,SAASC,iBAAiB,QAAQ,yBAAyB;AAC3D,SAASC,wBAAwB,QAAQ,aAAa;AAEtD,MAAMC,eAAe;AACrB,MAAMC,OAAO;AACX,aAAa;AACf;AA0KA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BC,GACD,OAAO,SAASC,OACdC,KAAuE;IAEvE,MAAM,EACJC,EAAE,EACFC,IAAI,EACJC,iBAAiB,EACjBC,eAAeD,iBAAiB,EAChCE,OAAOF,iBAAiB,EACxBG,SAAS,EACTC,OAAO,EACPC,OAAO,EACPC,SAAS,EACTC,UAAUC,YAAY,EACtBC,UAAU,EACVC,YAAY,EACZC,WAAW,EACXC,YAAY,CAAC,CAAC,EACd1B,KAAK,EACL2B,aAAa,CAAC,CAAC,EACfC,mBAAmB,EACnBC,MAAMC,QAAQ,EACdC,KAAK,EACLC,YAAY,EACZC,OAAOC,SAAS,EAChBC,WAAW1B,IAAI,EACf2B,YAAYC,cAAc,EAC1BC,SAAS,KAAK,EACdC,QAAQ,EACRC,oBAAoB,KAAK,EACzBC,qBAAqB,KAAK,EAC1BC,sBAAsB,KAAK,EAC3BC,QAAQ,EACR,GAAGC,WACJ,GAAGjC;IACJ,MAAM,EAAEkC,KAAK,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GAAGpC;IAEnC,MAAMqC,aAAatD,aAAakB,IAAI;IACpC,MAAMqC,UAAUvD,aAAa6B,YAAYX,IAAI;IAC7C,MAAMsC,gBAAgBxD,aAAaiC,WAAWf,EAAE,EAAE;IAClD,MAAMuC,UAAUnD,QAAQkD,gBAAgBE;IAExC,MAAM,CAACC,YAAYC,cAAc,GAAGhE,SAAS;QAC3C,IAAI,OAAO0C,iBAAiB,aAAa;YACvC,OAAOA;QACT;QAEA,OAAO,OAAOD,UAAU,cAAcA,QAAQvB;IAChD;IACA,MAAM+C,eAAe,OAAOxB,UAAU,cAAcsB,aAAatB;IACjE,MAAMyB,eAAenE,OAAOkE;IAC5B,MAAM,EAAEE,OAAO,EAAEC,aAAa,EAAE,GAAGvD,2BACjCwC,UACAY;IAGF,MAAM,EAAEI,OAAO,EAAEC,aAAa,EAAEC,eAAe,EAAEC,YAAY,EAAE,GAC7DxD,kBAAkB;QAChBO;QACAkB,OAAOwB;QACPQ,QAAQN;QACRvC;QACAC;QACAC;QACA2B;QACAiB,SAAStC,UAAUd,EAAE;QACrBqD,UAAUvC,UAAUwC,GAAG;QACvBlB;QACAmB,aAAa3C;IACf;IAEF,MAAM,CAACH,UAAU+C,iBAAiB,GAAGzE,cAAc2B;IACnDjB,aAAa;QACXQ;QACAwD,YAAYhD;QACZW,cAAcwB,aAAac,OAAO;IACpC;IAEA,MAAMzC,OAAOrC,QAAQ,YAAYsC;IACjC,MAAMG,QAAQlC,cAAc,SAASmC;IACrC,IAAIE,aAAaC;IACjB,IAAI,OAAOD,eAAe,eAAeP,MAAM;QAC7CO,2BAAa,KAAC7C;YAAYgF,SAASZ;sBAAU9B;;IAC/C;IAEA,MAAM,EAAEqC,KAAKM,UAAU,EAAE,GAAGC,cAAc,GAAGX,aAAapC;IAC1D,IAAIgD,oBAAoBhD,SAAS,CAAC,kBAAkB;IACpD,MAAMiD,eAAejD,SAAS,CAAC,aAAa;IAC5C,IAAI,CAACiD,gBAAgB,CAACD,mBAAmB;QACvCA,oBAAoBvB,WAAWH;IACjC;IAEA,qBACE,MAACvD;QAAyBsC,OAAO8B;;0BAC/B,MAAC/D;gBACC8E,mBAAiBzB;gBAChB,GAAGP,SAAS;gBACZ,GAAGgB,aAAa;gBACjB5D,OAAO,CAAC,CAACA;gBACTiC,OAAOA;gBACPK,QAAQA,UAAUqB;gBAClB1C,WAAW9B,IAAI,wBAAwB8B;gBACvCmB,YAAYA;;kCAEZ,KAACvC;wBACCgF,QAAQnB;wBACRjC,aAAaA;wBACbqD,cAAcrC;wBACb,GAAGb,mBAAmB;;kCAEzB,KAACmD;wBACCC,aAAW;wBACXpE,IAAIqC;wBACJiB,KAAKE;wBACLa,MAAK;wBACLlE,cAAcA;wBACdC,MAAMA;wBACNkE,UAAU,CAAC;wBACXnC,UAAUA;wBACVR,UAAUA;wBACVd,aAAY;wBACX,GAAGF,UAAU;wBACdQ,OAAOA;wBACPC,cAAcA;wBACdf,WAAW9B,IAAIe,OAAO;4BAAE+B;wBAAM,IAAI7B;wBAClC+B,UAAU,CAACgD;4BACThD,SAASgD;4BACT,IAAI,OAAOpD,UAAU,aAAa;gCAChC;4BACF;4BAEA,MAAMqD,YAAYD,MAAME,aAAa,CAACtD,KAAK;4BAC3C,MAAMuD,aAAa7B,QAAQ8B,IAAI,CAAC,CAACV,SAAWA,WAAWO;4BAEvD9B,cAAcgC,cAAc9B,aAAac,OAAO;wBAClD;;oBAEDtE,uBACC,KAACwF;wBACE,GAAG7D,UAAU;wBACdf,IAAIuC;wBACJlC,WAAWhB,YAAY;4BACrB4C;4BACAC;4BACAC;4BACAT,QAAQA,UAAUqB;4BAClB8B,UAAU;4BACVC,gBAAgB,CAAC,CAACjE,eAAe,CAAC,CAACiC;4BACnCzC,WAAWU,WAAWV,SAAS;wBACjC;kCAECjB;;;;0BAIP,KAACJ;gBACE,GAAG6E,YAAY;gBAChBkB,cAAYhB;gBACZC,mBAAiBF;gBACjBkB,SAASpB;gBACTzC,OAAOwB;gBACPsC,UAAUzG,YACR,CAACyF;oBACCtE,yBAAyBc,SAASiD,OAAO,EAAEO;gBAC7C,GACA;oBAACxD;iBAAS;gBAEZmB,mBAAmBA;gBACnBE,qBAAqBA;0BAEpBC;;;;AAIT"}
+{"version":3,"sources":["../../src/form/Select.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport {\n  type ChangeEvent,\n  type HTMLAttributes,\n  type InputHTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { type BoxProps } from \"../box/Box.js\";\nimport { IconRotator } from \"../icon/IconRotator.js\";\nimport { getIcon } from \"../icon/config.js\";\nimport { 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 { Listbox } from \"./Listbox.js\";\nimport { type OptionProps } from \"./Option.js\";\nimport { SelectedOption } from \"./SelectedOption.js\";\nimport {\n  TextFieldContainer,\n  type TextFieldContainerProps,\n} from \"./TextFieldContainer.js\";\nimport { getFormConfig } from \"./formConfig.js\";\nimport { label as labelStyles } from \"./labelStyles.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 { useSelectCombobox } from \"./useSelectCombobox.js\";\nimport { triggerManualChangeEvent } from \"./utils.js\";\n\nconst EMPTY_STRING = \"\" as const;\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @since 6.5.0\n */\nexport interface GetSelectedOptionChildrenOptions<\n  Value extends string = string,\n> {\n  value: \"\" | Value;\n\n  /**\n   * The option will be undefined if there is no value or matching option.\n   */\n  option: OptionProps | undefined;\n\n  /**\n   * This is a pass-through of the {@link SelectProps.placeholder}\n   */\n  placeholder?: ReactNode;\n\n  /**\n   * This is a pass-through of the {@link SelectProps.selectedOptionProps}\n   */\n  children?: ReactNode;\n}\n\n/**\n * @since 6.5.0\n */\nconst defaultGetSelectedOptionChildren = (\n  options: GetSelectedOptionChildrenOptions\n): ReactNode => {\n  const { children, option, placeholder } = options;\n\n  return children ?? (option?.children || placeholder);\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 Simple Usage\n * ```tsx\n * import { Select, type SelectChangeEvent } from \"@react-md/core/form/Select\";\n * import { Option } from \"@react-md/core/form/Option\";\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 * @since 6.0.0\n */\nexport type SelectChangeEvent<Value extends string> =\n  ChangeEvent<HTMLInputElement> & { currentTarget: { value: Value } };\n\n/**\n * @since 6.0.0 Rewritten with a new API.\n */\nexport interface SelectProps<Value extends string>\n  extends\n    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>>;\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?: PropsWithRef<\n    Omit<MenuProps, \"visible\" | \"onRequestClose\" | \"fixedTo\">\n  >;\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   * @since 6.5.0\n   * @defaultValue `({ children, option, placeholder }) => children ?? (option?.children || placeholder)`\n   */\n  getSelectedOptionChildren?: (\n    options: GetSelectedOptionChildrenOptions<Value>\n  ) => ReactNode;\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 Simple Example\n * ```tsx\n * import { Option } from \"@react-md/core/form/Option\";\n * import { Select } from \"@react-md/core/form/Select\";\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 * @see {@link https://react-md.dev/components/select | Select Demos}\n * @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    getSelectedOptionChildren = defaultGetSelectedOptionChildren,\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 (defaultValue !== undefined) {\n      return defaultValue;\n    }\n\n    return value !== undefined ? value : EMPTY_STRING;\n  });\n  const currentValue = 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.ref,\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\n  const icon = getIcon(\"dropdown\", propIcon);\n  const theme = getFormConfig(\"theme\", propTheme);\n  let rightAddon = propRightAddon;\n  if (rightAddon === undefined && icon) {\n    rightAddon = <IconRotator rotated={visible}>{icon}</IconRotator>;\n  }\n\n  const { ref: listboxRef, ...listboxProps } = getMenuProps(menuProps);\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    <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          disableAddon={disableOptionAddon}\n          {...selectedOptionProps}\n        >\n          {getSelectedOptionChildren({\n            value: currentValue,\n            option: currentOption,\n            placeholder,\n            children: selectedOptionProps?.children,\n          })}\n        </SelectedOption>\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 (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      <Listbox\n        {...listboxProps}\n        aria-label={listboxLabel}\n        aria-labelledby={listboxLabelledBy as string}\n        nodeRef={listboxRef}\n        value={currentValue}\n        setValue={useCallback(\n          (option: \"\" | Value) => {\n            triggerManualChangeEvent(inputRef.current, option);\n          },\n          [inputRef]\n        )}\n        selectedIconAfter={selectedIconAfter}\n        disableSelectedIcon={disableSelectedIcon}\n      >\n        {children}\n      </Listbox>\n    </KeyboardMovementProvider>\n  );\n}\n"],"names":["cnb","useCallback","useRef","useState","IconRotator","getIcon","KeyboardMovementProvider","useEnsuredId","useEnsuredRef","Listbox","SelectedOption","TextFieldContainer","getFormConfig","label","labelStyles","select","extractOptionsFromChildren","textField","useFormReset","useSelectCombobox","triggerManualChangeEvent","EMPTY_STRING","noop","defaultGetSelectedOptionChildren","options","children","option","placeholder","Select","props","id","form","autoCompleteValue","autoComplete","name","className","onClick","onFocus","onKeyDown","inputRef","propInputRef","inputProps","containerRef","menuProps","labelProps","selectedOptionProps","getSelectedOptionChildren","icon","propIcon","value","defaultValue","theme","propTheme","onChange","rightAddon","propRightAddon","active","required","selectedIconAfter","disableOptionAddon","disableSelectedIcon","remaining","dense","error","disabled","comboboxId","inputId","selectLabelId","labelId","undefined","localValue","setLocalValue","currentValue","initialValue","currentOption","visible","comboboxProps","movementContext","getMenuProps","values","popupId","popupRef","ref","comboboxRef","inputRefCallback","elementRef","current","rotated","listboxRef","listboxProps","listboxLabelledBy","listboxLabel","aria-labelledby","disableAddon","input","aria-hidden","type","tabIndex","event","nextValue","currentTarget","nextOption","find","span","floating","floatingActive","aria-label","nodeRef","setValue"],"mappings":"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"}

package/dist/form/SelectedOption.d.ts

@@ -1,4 +1,4 @@
-import { type ReactElement, type ReactNode } from "react";
+import { type ReactElement } from "react";
 import { type BoxProps } from "../box/Box.js";
 import { type OptionProps } from "./Option.js";
 /**
@@ -7,7 +7,6 @@ import { type OptionProps } from "./Option.js";
  */
 export interface SelectedOptionProps extends BoxProps {
     option: OptionProps | undefined;
-    placeholder?: ReactNode;
     disableAddon: boolean;
 }
 /**

package/dist/form/SelectedOption.js

@@ -9,8 +9,8 @@ import { textField } from "./textFieldStyles.js";
  * @since 6.0.0
  * @internal
  */ export function SelectedOption(props) {
-    const { disableAddon, option, className, disableWrap = true, disablePadding = true, placeholder, ...remaining } = props;
-    let children = option?.children || placeholder;
+    const { disableAddon, option, className, disableWrap = true, disablePadding = true, ...remaining } = props;
+    let { children } = remaining;
     // 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") {

package/dist/form/SelectedOption.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/SelectedOption.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { type ReactElement, type ReactNode } from \"react\";\n\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 * @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 * This component is used to render the current option.\n *\n * @since 6.0.0\n * @internal\n */\nexport function SelectedOption(props: SelectedOptionProps): ReactElement {\n  const {\n    disableAddon,\n    option,\n    className,\n    disableWrap = true,\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      disableWrap={disableWrap}\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","disableWrap","disablePadding","placeholder","remaining","children","span","textOverflow","leftAddon"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAGhC,SAASC,GAAG,QAAuB,gBAAgB;AACnD,SAASC,QAAQ,QAAQ,iBAAiB;AAE1C,SAASC,SAAS,QAAQ,uBAAuB;AAYjD;;;;;CAKC,GACD,OAAO,SAASC,eAAeC,KAA0B;IACvD,MAAM,EACJC,YAAY,EACZC,MAAM,EACNC,SAAS,EACTC,cAAc,IAAI,EAClBC,iBAAiB,IAAI,EACrBC,WAAW,EACX,GAAGC,WACJ,GAAGP;IAEJ,IAAIQ,WAAWN,QAAQM,YAAYF;IACnC,0EAA0E;IAC1E,mCAAmC;IACnC,IAAI,OAAOE,aAAa,YAAY,OAAOA,aAAa,UAAU;QAChEA,yBACE,KAACC;YAAKN,WAAWN,SAAS;gBAAEa,cAAc;YAAW;sBAAKF;;IAE9D;IAEA,qBACE,MAACZ;QACE,GAAGW,SAAS;QACbJ,WAAWR,IAAI,uBAAuBG,aAAaK;QACnDC,aAAaA;QACbC,gBAAgBA;;YAEf,CAACJ,gBAAgBC,QAAQS;YACzBH;;;AAGP"}
+{"version":3,"sources":["../../src/form/SelectedOption.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { type ReactElement } from \"react\";\n\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 * @since 6.0.0\n * @internal\n */\nexport interface SelectedOptionProps extends BoxProps {\n  option: OptionProps | undefined;\n  disableAddon: boolean;\n}\n\n/**\n * This component is used to render the current option.\n *\n * @since 6.0.0\n * @internal\n */\nexport function SelectedOption(props: SelectedOptionProps): ReactElement {\n  const {\n    disableAddon,\n    option,\n    className,\n    disableWrap = true,\n    disablePadding = true,\n    ...remaining\n  } = props;\n\n  let { children } = remaining;\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      disableWrap={disableWrap}\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","disableWrap","disablePadding","remaining","children","span","textOverflow","leftAddon"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAGhC,SAASC,GAAG,QAAuB,gBAAgB;AACnD,SAASC,QAAQ,QAAQ,iBAAiB;AAE1C,SAASC,SAAS,QAAQ,uBAAuB;AAWjD;;;;;CAKC,GACD,OAAO,SAASC,eAAeC,KAA0B;IACvD,MAAM,EACJC,YAAY,EACZC,MAAM,EACNC,SAAS,EACTC,cAAc,IAAI,EAClBC,iBAAiB,IAAI,EACrB,GAAGC,WACJ,GAAGN;IAEJ,IAAI,EAAEO,QAAQ,EAAE,GAAGD;IACnB,0EAA0E;IAC1E,mCAAmC;IACnC,IAAI,OAAOC,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,aAAaA;QACbC,gBAAgBA;;YAEf,CAACJ,gBAAgBC,QAAQQ;YACzBH;;;AAGP"}

package/dist/form/_input-toggle.scss

@@ -91,13 +91,14 @@ $large-size: 2rem !default;
       @include hidden-input-styles(true);
 
       .rmd-input-toggle {
+        $focus-selector: "&:has(:focus-visible)";
+        @if utils.$disable-has-selectors or utils.$disable-focus-visible {
+          $focus-selector: "&:focus-within";
+        }
+
         @include icon.set-var(color, currentcolor);
         @include interaction.surface(
-          $focus-selector: if(
-              utils.$disable-has-selectors or utils.$disable-focus-visible,
-              "&:focus-within",
-              "&:has(:focus-visible)"
-            ),
+          $focus-selector: $focus-selector,
           $keyboard-only-focus: utils.$disable-has-selectors or
             utils.$disable-focus-visible,
           $disabled-selector: "&--disabled",

package/dist/form/_label.scss

@@ -151,8 +151,8 @@ $variables: (
   @include use-var(background-color, active-background-color);
   @include use-var(padding, active-padding);
 
-  transform: scale($floating-scale)
-    translate(get-var(floating-active-x), get-var(floating-active-y));
+  transform: translate(get-var(floating-active-x), get-var(floating-active-y))
+    scale($floating-scale);
   // need to add the `transform-origin` because of the scaling applied.
   // it'll change the position based on the size of the label otherwise
   transform-origin: 0 0;

package/dist/form/_legend.scss

@@ -28,33 +28,42 @@ $disable-floating: false !default;
         @if not $disable-floating {
           &--floating {
             @include label.set-var(floating-active-y, -50%);
-            @include label.set-var(active-padding, 0 label.$floating-padding);
-            @include label.set-var(
-              active-background-color,
-              theme.theme-get-var(background-color)
-            );
             @include label.set-var(
               floating-active-x,
               text-field.get-var(padding-left)
             );
+
+            .rmd-fieldset:has(:focus-within) & {
+              @include label.active-styles;
+            }
           }
 
           @if not base.$form-disable-filled-theme {
-            @include text-field.set-var(
-              padding-left,
-              text-field.get-var(filled-padding)
-            );
+            &--floating-filled {
+              @include text-field.set-var(
+                padding-left,
+                text-field.get-var(filled-padding)
+              );
+              @include label.set-var(floating-active-y, -100%);
+            }
           }
 
           @if not base.$form-disable-underlined-theme {
-            @include text-field.set-var(
-              padding-left,
-              text-field.get-var(underlined-padding)
-            );
+            &--floating-underline {
+              @include text-field.set-var(
+                padding-left,
+                text-field.get-var(underlined-padding)
+              );
+            }
           }
 
           @if not base.$form-disable-outlined-theme {
             &--floating-outline {
+              @include label.set-var(active-padding, 0 label.$floating-padding);
+              @include label.set-var(
+                active-background-color,
+                theme.theme-get-var(background-color)
+              );
               @include text-field.set-var(
                 padding-left,
                 text-field.get-var(outlined-padding)

package/dist/form/_slider.scss

@@ -634,11 +634,13 @@ $variables: (
       }
 
       .rmd-slider-thumb {
-        @include use-var(
-          background-color,
-          if($track-color, color, active-color),
-          if($track-color, theme.theme-color-var-fallback($track-color), null)
-        );
+        $color-name: active-color;
+        $color-fallback: null;
+        @if $track-color {
+          $color-name: color;
+          $color-fallback: theme.theme-color-var-fallback($track-color);
+        }
+        @include use-var(background-color, $color-name, $color-fallback);
 
         border-radius: $thumb-border-radius;
         height: $thumb-size;

package/dist/form/_switch.scss

@@ -80,10 +80,10 @@ $track-light-background-color: colors.$grey-400 !default;
 
 /// The background color to apply to the `SwitchTrack` in the dark theme.
 /// @type Color
+// prettier-ignore
 $track-dark-background-color: if(
-  theme.$disable-dark-elevation,
-  $track-light-background-color,
-  map.get(theme.$dark-elevation-colors, 24)
+  sass(theme.$disable-dark-elevation): $track-light-background-color;
+  else: map.get(theme.$dark-elevation-colors, 24)
 ) !default;
 
 /// The default background color to apply to the `SwitchTrack`.
@@ -274,8 +274,10 @@ $variables: (track-background-color, ball-background-color);
             z-index: 0;
           }
 
-          $active-selector: ".rmd-switch__input:checked + &" +
-            if($disable-menu-item-switch, "", ", &--active");
+          $active-selector: ".rmd-switch__input:checked + &";
+          @if not $disable-menu-item-switch {
+            $active-selector: $active-selector + ", &--active";
+          }
 
           #{$active-selector} {
             $offset: $ball-size + $ball-offset;

package/dist/form/_text-field.scss

@@ -271,6 +271,11 @@ $variables: (
 /// @param {any} fallback [null] - An optional fallback value
 /// @returns {String} a `var()` statement
 @function get-var($name, $fallback: null) {
+  @if $name == underlined-padding and not $underlined-padding and not $fallback
+  {
+    $fallback: 0px;
+  }
+
   $var: utils.get-var-name($variables, $name, "text-field");
   @if $fallback {
     @return var(#{$var}, #{$fallback});
@@ -502,17 +507,14 @@ $variables: (
         &--filled {
           @include theme.theme-set-var(background-color, get-var(filled-color));
           @include theme.theme-use-var(background-color);
-          @include set-var(padding-left, $filled-padding);
-          @include set-var(padding-right, $filled-padding);
+          @include set-var(padding-left, get-var(filled-padding));
+          @include set-var(padding-right, get-var(filled-padding));
           @if not label.$disable-floating {
-            @include label.set-var(
-              floating-active-x,
-              $filled-padding + label.$floating-padding
-            );
+            @include label.set-var(floating-active-x, get-var(filled-padding));
           }
 
           @if not $disable-addon {
-            @include set-var(addon-left-offset, $filled-padding);
+            @include set-var(addon-left-offset, get-var(filled-padding));
           }
         }
       }
@@ -529,8 +531,8 @@ $variables: (
           border-bottom-width: $border-width;
 
           @if $underlined-padding {
-            @include set-var(padding-left, $underlined-padding);
-            @include set-var(padding-right, $underlined-padding);
+            @include set-var(padding-left, get-var(underlined-padding));
+            @include set-var(padding-right, get-var(underlined-padding));
           }
 
           &::after {
@@ -594,8 +596,8 @@ $variables: (
 
         @if not $disable-addon {
           $addon-offset: calc(
-            #{icon.get-var(size) +
-              if($underlined-padding, "#{$underlined-padding} + ", "")} +
+            icon.get-var(size) +
+              get-var(underlined-padding) +
               $underlined-label-left-offset *
               2
           );

package/dist/form/formConfig.js

@@ -27,7 +27,7 @@ let uncontrolledToggles = true;
 /**
  * @since 6.0.0
  */ export function getFormConfig(name, override) {
-    if (typeof override !== "undefined") {
+    if (override !== undefined) {
         return override;
     }
     return FORM_CONFIG[name];

package/dist/form/formConfig.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/formConfig.ts"],"sourcesContent":["import {\n  type FormConfiguration,\n  type FormTheme,\n  type FormUnderlineDirection,\n} from \"./types.js\";\n\n// NOTE: Uses get/set for test mocking\n\nlet theme: FormTheme = \"outline\";\nlet underlineDirection: FormUnderlineDirection = \"left\";\nlet uncontrolledToggles = true;\n\n/**\n * @since 6.0.0\n */\nexport const FORM_CONFIG: FormConfiguration = {\n  get theme() {\n    return theme;\n  },\n  set theme(nextTheme: FormTheme) {\n    theme = nextTheme;\n  },\n  get underlineDirection() {\n    return underlineDirection;\n  },\n  set underlineDirection(nextUnderlineDirection: FormUnderlineDirection) {\n    underlineDirection = nextUnderlineDirection;\n  },\n  get uncontrolledToggles() {\n    return uncontrolledToggles;\n  },\n  set uncontrolledToggles(nextUncontrolledToggles: boolean) {\n    uncontrolledToggles = nextUncontrolledToggles;\n  },\n};\n\n/**\n * @since 6.0.0\n */\nexport function getFormConfig<N extends keyof FormConfiguration>(\n  name: N,\n  override?: FormConfiguration[N]\n): FormConfiguration[N] {\n  if (typeof override !== \"undefined\") {\n    return override;\n  }\n\n  return FORM_CONFIG[name];\n}\n"],"names":["theme","underlineDirection","uncontrolledToggles","FORM_CONFIG","nextTheme","nextUnderlineDirection","nextUncontrolledToggles","getFormConfig","name","override"],"mappings":"AAMA,sCAAsC;AAEtC,IAAIA,QAAmB;AACvB,IAAIC,qBAA6C;AACjD,IAAIC,sBAAsB;AAE1B;;CAEC,GACD,OAAO,MAAMC,cAAiC;IAC5C,IAAIH,SAAQ;QACV,OAAOA;IACT;IACA,IAAIA,OAAMI,UAAsB;QAC9BJ,QAAQI;IACV;IACA,IAAIH,sBAAqB;QACvB,OAAOA;IACT;IACA,IAAIA,oBAAmBI,uBAAgD;QACrEJ,qBAAqBI;IACvB;IACA,IAAIH,uBAAsB;QACxB,OAAOA;IACT;IACA,IAAIA,qBAAoBI,wBAAkC;QACxDJ,sBAAsBI;IACxB;AACF,EAAE;AAEF;;CAEC,GACD,OAAO,SAASC,cACdC,IAAO,EACPC,QAA+B;IAE/B,IAAI,OAAOA,aAAa,aAAa;QACnC,OAAOA;IACT;IAEA,OAAON,WAAW,CAACK,KAAK;AAC1B"}
+{"version":3,"sources":["../../src/form/formConfig.ts"],"sourcesContent":["import {\n  type FormConfiguration,\n  type FormTheme,\n  type FormUnderlineDirection,\n} from \"./types.js\";\n\n// NOTE: Uses get/set for test mocking\n\nlet theme: FormTheme = \"outline\";\nlet underlineDirection: FormUnderlineDirection = \"left\";\nlet uncontrolledToggles = true;\n\n/**\n * @since 6.0.0\n */\nexport const FORM_CONFIG: FormConfiguration = {\n  get theme() {\n    return theme;\n  },\n  set theme(nextTheme: FormTheme) {\n    theme = nextTheme;\n  },\n  get underlineDirection() {\n    return underlineDirection;\n  },\n  set underlineDirection(nextUnderlineDirection: FormUnderlineDirection) {\n    underlineDirection = nextUnderlineDirection;\n  },\n  get uncontrolledToggles() {\n    return uncontrolledToggles;\n  },\n  set uncontrolledToggles(nextUncontrolledToggles: boolean) {\n    uncontrolledToggles = nextUncontrolledToggles;\n  },\n};\n\n/**\n * @since 6.0.0\n */\nexport function getFormConfig<N extends keyof FormConfiguration>(\n  name: N,\n  override?: FormConfiguration[N]\n): FormConfiguration[N] {\n  if (override !== undefined) {\n    return override;\n  }\n\n  return FORM_CONFIG[name];\n}\n"],"names":["theme","underlineDirection","uncontrolledToggles","FORM_CONFIG","nextTheme","nextUnderlineDirection","nextUncontrolledToggles","getFormConfig","name","override","undefined"],"mappings":"AAMA,sCAAsC;AAEtC,IAAIA,QAAmB;AACvB,IAAIC,qBAA6C;AACjD,IAAIC,sBAAsB;AAE1B;;CAEC,GACD,OAAO,MAAMC,cAAiC;IAC5C,IAAIH,SAAQ;QACV,OAAOA;IACT;IACA,IAAIA,OAAMI,UAAsB;QAC9BJ,QAAQI;IACV;IACA,IAAIH,sBAAqB;QACvB,OAAOA;IACT;IACA,IAAIA,oBAAmBI,uBAAgD;QACrEJ,qBAAqBI;IACvB;IACA,IAAIH,uBAAsB;QACxB,OAAOA;IACT;IACA,IAAIA,qBAAoBI,wBAAkC;QACxDJ,sBAAsBI;IACxB;AACF,EAAE;AAEF;;CAEC,GACD,OAAO,SAASC,cACdC,IAAO,EACPC,QAA+B;IAE/B,IAAIA,aAAaC,WAAW;QAC1B,OAAOD;IACT;IAEA,OAAON,WAAW,CAACK,KAAK;AAC1B"}

package/dist/form/inputToggleStyles.js

@@ -6,6 +6,12 @@ const styles = bem("rmd-input-toggle");
  * @since 6.0.0
  */ export function inputToggle(options) {
     const { className, em = true, type, size = "auto", error, active = false, disabled = false, uncontrolled } = options;
+    let textColor;
+    if (disabled) {
+        textColor = "text-disabled";
+    } else if (error) {
+        textColor = "error";
+    }
     return cnb(`rmd-${type}`, styles({
         em,
         active: active && !disabled,
@@ -16,7 +22,7 @@ const styles = bem("rmd-input-toggle");
         large: size === "large",
         uncontrolled
     }), cssUtils({
-        textColor: disabled ? "text-disabled" : error ? "error" : undefined
+        textColor
     }), className);
 }
 

package/dist/form/inputToggleStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/inputToggleStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { type FormComponentStates } from \"./types.js\";\n\nconst styles = bem(\"rmd-input-toggle\");\n\n/**\n * The size to use for the `Checkbox` or `Radio` component. Each of these values\n * except for `\"auto\"` map to Sass variables:\n * - `\"small\"` - `$input-toggle-small-size`\n * - `\"dense\"` - `$input-toggle-dense-size`\n * - `\"normal\"` - `$input-toggle-large-size`\n * - `\"large\"` - `$input-toggle-large-size`\n *\n * When this is set to `\"auto\"`, the size will be determined by the current\n * `font-size` of the `Label` element.\n *\n * @since 6.0.0\n */\nexport type InputToggleSize = \"auto\" | \"small\" | \"dense\" | \"normal\" | \"large\";\n\n/** @since 6.0.0 */\nexport interface InputToggleClassNameOptions extends Omit<\n  FormComponentStates,\n  \"readOnly\"\n> {\n  className?: string;\n  type: \"checkbox\" | \"radio\";\n\n  /**\n   * Set the icon size to `1em` to allow easy sizing through font size.\n   *\n   * @defaultValue `true`\n   */\n  em?: boolean;\n\n  /**\n   * @see {@link InputToggleSize}\n   * @defaultValue `\"auto\"`\n   */\n  size?: InputToggleSize;\n\n  uncontrolled?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function inputToggle(options: InputToggleClassNameOptions): string {\n  const {\n    className,\n    em = true,\n    type,\n    size = \"auto\",\n    error,\n    active = false,\n    disabled = false,\n    uncontrolled,\n  } = options;\n\n  return cnb(\n    `rmd-${type}`,\n    styles({\n      em,\n      active: active && !disabled,\n      disabled,\n      small: size === \"small\",\n      dense: size === \"dense\",\n      normal: size === \"normal\",\n      large: size === \"large\",\n      uncontrolled,\n    }),\n    cssUtils({\n      textColor: disabled ? \"text-disabled\" : error ? \"error\" : undefined,\n    }),\n    className\n  );\n}\n"],"names":["cnb","cssUtils","bem","styles","inputToggle","options","className","em","type","size","error","active","disabled","uncontrolled","small","dense","normal","large","textColor","undefined"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,GAAG,QAAQ,kBAAkB;AAGtC,MAAMC,SAASD,IAAI;AAyCnB;;CAEC,GACD,OAAO,SAASE,YAAYC,OAAoC;IAC9D,MAAM,EACJC,SAAS,EACTC,KAAK,IAAI,EACTC,IAAI,EACJC,OAAO,MAAM,EACbC,KAAK,EACLC,SAAS,KAAK,EACdC,WAAW,KAAK,EAChBC,YAAY,EACb,GAAGR;IAEJ,OAAOL,IACL,CAAC,IAAI,EAAEQ,MAAM,EACbL,OAAO;QACLI;QACAI,QAAQA,UAAU,CAACC;QACnBA;QACAE,OAAOL,SAAS;QAChBM,OAAON,SAAS;QAChBO,QAAQP,SAAS;QACjBQ,OAAOR,SAAS;QAChBI;IACF,IACAZ,SAAS;QACPiB,WAAWN,WAAW,kBAAkBF,QAAQ,UAAUS;IAC5D,IACAb;AAEJ"}
+{"version":3,"sources":["../../src/form/inputToggleStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { type TextColor, type ThemeColor, cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { type FormComponentStates } from \"./types.js\";\n\nconst styles = bem(\"rmd-input-toggle\");\n\n/**\n * The size to use for the `Checkbox` or `Radio` component. Each of these values\n * except for `\"auto\"` map to Sass variables:\n * - `\"small\"` - `$input-toggle-small-size`\n * - `\"dense\"` - `$input-toggle-dense-size`\n * - `\"normal\"` - `$input-toggle-large-size`\n * - `\"large\"` - `$input-toggle-large-size`\n *\n * When this is set to `\"auto\"`, the size will be determined by the current\n * `font-size` of the `Label` element.\n *\n * @since 6.0.0\n */\nexport type InputToggleSize = \"auto\" | \"small\" | \"dense\" | \"normal\" | \"large\";\n\n/** @since 6.0.0 */\nexport interface InputToggleClassNameOptions extends Omit<\n  FormComponentStates,\n  \"readOnly\"\n> {\n  className?: string;\n  type: \"checkbox\" | \"radio\";\n\n  /**\n   * Set the icon size to `1em` to allow easy sizing through font size.\n   *\n   * @defaultValue `true`\n   */\n  em?: boolean;\n\n  /**\n   * @see {@link InputToggleSize}\n   * @defaultValue `\"auto\"`\n   */\n  size?: InputToggleSize;\n\n  uncontrolled?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function inputToggle(options: InputToggleClassNameOptions): string {\n  const {\n    className,\n    em = true,\n    type,\n    size = \"auto\",\n    error,\n    active = false,\n    disabled = false,\n    uncontrolled,\n  } = options;\n\n  let textColor: TextColor | ThemeColor | undefined;\n  if (disabled) {\n    textColor = \"text-disabled\";\n  } else if (error) {\n    textColor = \"error\";\n  }\n\n  return cnb(\n    `rmd-${type}`,\n    styles({\n      em,\n      active: active && !disabled,\n      disabled,\n      small: size === \"small\",\n      dense: size === \"dense\",\n      normal: size === \"normal\",\n      large: size === \"large\",\n      uncontrolled,\n    }),\n    cssUtils({ textColor }),\n    className\n  );\n}\n"],"names":["cnb","cssUtils","bem","styles","inputToggle","options","className","em","type","size","error","active","disabled","uncontrolled","textColor","small","dense","normal","large"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAA0CC,QAAQ,QAAQ,iBAAiB;AAC3E,SAASC,GAAG,QAAQ,kBAAkB;AAGtC,MAAMC,SAASD,IAAI;AAyCnB;;CAEC,GACD,OAAO,SAASE,YAAYC,OAAoC;IAC9D,MAAM,EACJC,SAAS,EACTC,KAAK,IAAI,EACTC,IAAI,EACJC,OAAO,MAAM,EACbC,KAAK,EACLC,SAAS,KAAK,EACdC,WAAW,KAAK,EAChBC,YAAY,EACb,GAAGR;IAEJ,IAAIS;IACJ,IAAIF,UAAU;QACZE,YAAY;IACd,OAAO,IAAIJ,OAAO;QAChBI,YAAY;IACd;IAEA,OAAOd,IACL,CAAC,IAAI,EAAEQ,MAAM,EACbL,OAAO;QACLI;QACAI,QAAQA,UAAU,CAACC;QACnBA;QACAG,OAAON,SAAS;QAChBO,OAAOP,SAAS;QAChBQ,QAAQR,SAAS;QACjBS,OAAOT,SAAS;QAChBI;IACF,IACAZ,SAAS;QAAEa;IAAU,IACrBR;AAEJ"}

package/dist/form/legendStyles.d.ts

@@ -2,7 +2,7 @@ import { type FormTheme, type LabelClassNameOptions } from "./types.js";
 /**
  * @since 6.4.0
  */
-export type LegendLabelClassNameOptions = Pick<LabelClassNameOptions, "active" | "gap" | "dense" | "error" | "stacked" | "disabled" | "reversed">;
+export type LegendLabelClassNameOptions = Pick<LabelClassNameOptions, "active" | "gap" | "error" | "stacked" | "disabled" | "reversed">;
 /**
  * @since 6.4.0
  */

package/dist/form/legendStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/legendStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { getFormConfig } from \"./formConfig.js\";\nimport { label } from \"./labelStyles.js\";\nimport { type FormTheme, type LabelClassNameOptions } from \"./types.js\";\n\nconst styles = bem(\"rmd-legend\");\n\n/**\n * @since 6.4.0\n */\nexport type LegendLabelClassNameOptions = Pick<\n  LabelClassNameOptions,\n  \"active\" | \"gap\" | \"dense\" | \"error\" | \"stacked\" | \"disabled\" | \"reversed\"\n>;\n\n/**\n * @since 6.4.0\n */\nexport interface LegendClassNameOptions extends LegendLabelClassNameOptions {\n  className?: string;\n\n  /**\n   * @defaultValue `false`\n   */\n  srOnly?: boolean;\n\n  /**\n   * Set this to `true` to make the `<legend>` have the styles of a floating label.\n   * This requires the parent `<fieldset>` to have the `floatingLegend` flag\n   * enabled.\n   *\n   * @defaultValue `false`\n   */\n  floating?: boolean;\n\n  /**\n   * This will only apply if {@link floating} is `true`.\n   *\n   * @see {@link FormTheme}\n   * @defaultValue `getFormConfig(\"theme\")`\n   */\n  theme?: FormTheme;\n\n  /**\n   * This will only apply if {@link floating} is `true`.\n   *\n   * @see {@link LabelClassNameOptions.active}\n   * @defaultValue `false`\n   */\n  active?: boolean;\n\n  /**\n   * This will only apply if {@link floating} is `true`.\n   *\n   * @see {@link LabelClassNameOptions.gap}\n   * @defaultValue `false`\n   */\n  gap?: boolean;\n\n  /**\n   * This will only apply if {@link floating} is `true`.\n   *\n   * @see {@link LabelClassNameOptions.disabled}\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n\n  /**\n   * This will only apply if {@link floating} is `true`.\n   *\n   * @see {@link LabelClassNameOptions.dense}\n   * @defaultValue `false`\n   */\n  dense?: boolean;\n\n  /**\n   * This will only apply if {@link floating} is `true`.\n   *\n   * @see {@link LabelClassNameOptions.error}\n   * @defaultValue `false`\n   */\n  error?: boolean;\n\n  /**\n   * This will only apply if {@link floating} is `true`.\n   *\n   * @see {@link LabelClassNameOptions.stacked}\n   * @defaultValue `false`\n   */\n  stacked?: boolean;\n\n  /**\n   * This will only apply if {@link floating} is `true`.\n   *\n   * @see {@link LabelClassNameOptions.reversed}\n   * @defaultValue `false`\n   */\n  reversed?: boolean;\n}\n\n/**\n * @since 6.4.0\n */\nexport function legend(options: LegendClassNameOptions = {}): string {\n  const {\n    className,\n    srOnly,\n    floating,\n    theme = getFormConfig(\"theme\"),\n    ...labelOptions\n  } = options;\n\n  return cnb(\n    styles({\n      floating,\n      \"floating-filled\": floating && theme === \"filled\",\n      \"floating-underline\": floating && theme === \"underline\",\n      \"floating-outline\": floating && theme === \"outline\",\n    }),\n    floating &&\n      label({\n        ...labelOptions,\n        floating: true,\n        floatingActive: true,\n      }),\n    cssUtils({ srOnly }),\n    className\n  );\n}\n"],"names":["cnb","cssUtils","bem","getFormConfig","label","styles","legend","options","className","srOnly","floating","theme","labelOptions","floatingActive"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,KAAK,QAAQ,mBAAmB;AAGzC,MAAMC,SAASH,IAAI;AA+FnB;;CAEC,GACD,OAAO,SAASI,OAAOC,UAAkC,CAAC,CAAC;IACzD,MAAM,EACJC,SAAS,EACTC,MAAM,EACNC,QAAQ,EACRC,QAAQR,cAAc,QAAQ,EAC9B,GAAGS,cACJ,GAAGL;IAEJ,OAAOP,IACLK,OAAO;QACLK;QACA,mBAAmBA,YAAYC,UAAU;QACzC,sBAAsBD,YAAYC,UAAU;QAC5C,oBAAoBD,YAAYC,UAAU;IAC5C,IACAD,YACEN,MAAM;QACJ,GAAGQ,YAAY;QACfF,UAAU;QACVG,gBAAgB;IAClB,IACFZ,SAAS;QAAEQ;IAAO,IAClBD;AAEJ"}
+{"version":3,"sources":["../../src/form/legendStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { getFormConfig } from \"./formConfig.js\";\nimport { label } from \"./labelStyles.js\";\nimport { type FormTheme, type LabelClassNameOptions } from \"./types.js\";\n\nconst styles = bem(\"rmd-legend\");\n\n/**\n * @since 6.4.0\n */\nexport type LegendLabelClassNameOptions = Pick<\n  LabelClassNameOptions,\n  \"active\" | \"gap\" | \"error\" | \"stacked\" | \"disabled\" | \"reversed\"\n>;\n\n/**\n * @since 6.4.0\n */\nexport interface LegendClassNameOptions extends LegendLabelClassNameOptions {\n  className?: string;\n\n  /**\n   * @defaultValue `false`\n   */\n  srOnly?: boolean;\n\n  /**\n   * Set this to `true` to make the `<legend>` have the styles of a floating label.\n   * This requires the parent `<fieldset>` to have the `floatingLegend` flag\n   * enabled.\n   *\n   * @defaultValue `false`\n   */\n  floating?: boolean;\n\n  /**\n   * This will only apply if {@link floating} is `true`.\n   *\n   * @see {@link FormTheme}\n   * @defaultValue `getFormConfig(\"theme\")`\n   */\n  theme?: FormTheme;\n\n  /**\n   * This will only apply if {@link floating} is `true`.\n   *\n   * @see {@link LabelClassNameOptions.active}\n   * @defaultValue `false`\n   */\n  active?: boolean;\n\n  /**\n   * This will only apply if {@link floating} is `true`.\n   *\n   * @see {@link LabelClassNameOptions.gap}\n   * @defaultValue `false`\n   */\n  gap?: boolean;\n\n  /**\n   * This will only apply if {@link floating} is `true`.\n   *\n   * @see {@link LabelClassNameOptions.disabled}\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n\n  /**\n   * This will only apply if {@link floating} is `true`.\n   *\n   * @see {@link LabelClassNameOptions.dense}\n   * @defaultValue `false`\n   */\n  dense?: boolean;\n\n  /**\n   * This will only apply if {@link floating} is `true`.\n   *\n   * @see {@link LabelClassNameOptions.error}\n   * @defaultValue `false`\n   */\n  error?: boolean;\n\n  /**\n   * This will only apply if {@link floating} is `true`.\n   *\n   * @see {@link LabelClassNameOptions.stacked}\n   * @defaultValue `false`\n   */\n  stacked?: boolean;\n\n  /**\n   * This will only apply if {@link floating} is `true`.\n   *\n   * @see {@link LabelClassNameOptions.reversed}\n   * @defaultValue `false`\n   */\n  reversed?: boolean;\n}\n\n/**\n * @since 6.4.0\n */\nexport function legend(options: LegendClassNameOptions = {}): string {\n  const {\n    className,\n    srOnly,\n    floating,\n    theme = getFormConfig(\"theme\"),\n    ...labelOptions\n  } = options;\n\n  return cnb(\n    styles({\n      floating,\n      \"floating-filled\": floating && theme === \"filled\",\n      \"floating-underline\": floating && theme === \"underline\",\n      \"floating-outline\": floating && theme === \"outline\",\n    }),\n    floating &&\n      label({\n        ...labelOptions,\n        floating: true,\n        floatingActive: true,\n      }),\n    cssUtils({ srOnly }),\n    className\n  );\n}\n"],"names":["cnb","cssUtils","bem","getFormConfig","label","styles","legend","options","className","srOnly","floating","theme","labelOptions","floatingActive"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,KAAK,QAAQ,mBAAmB;AAGzC,MAAMC,SAASH,IAAI;AA+FnB;;CAEC,GACD,OAAO,SAASI,OAAOC,UAAkC,CAAC,CAAC;IACzD,MAAM,EACJC,SAAS,EACTC,MAAM,EACNC,QAAQ,EACRC,QAAQR,cAAc,QAAQ,EAC9B,GAAGS,cACJ,GAAGL;IAEJ,OAAOP,IACLK,OAAO;QACLK;QACA,mBAAmBA,YAAYC,UAAU;QACzC,sBAAsBD,YAAYC,UAAU;QAC5C,oBAAoBD,YAAYC,UAAU;IAC5C,IACAD,YACEN,MAAM;QACJ,GAAGQ,YAAY;QACfF,UAAU;QACVG,gBAAgB;IAClB,IACFZ,SAAS;QAAEQ;IAAO,IAClBD;AAEJ"}

package/dist/form/selectUtils.js

@@ -38,8 +38,8 @@ import { Children, isValidElement } from "react";
             return;
         }
         const { value, disabled, children } = child.props;
-        if (typeof value !== "undefined") {
-            if (value === currentValue || !currentOption && typeof currentValue === "undefined") {
+        if (value !== undefined) {
+            if (value === currentValue || !currentOption && currentValue === undefined) {
                 currentOption = child.props;
             }
             if (!disabled) {

package/dist/form/selectUtils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/selectUtils.ts"],"sourcesContent":["import { Children, type ReactNode, isValidElement } from \"react\";\n\nimport { type MenuItemProps } from \"../menu/MenuItem.js\";\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface SelectOption<\n  Value extends string | number = string,\n> extends MenuItemProps {\n  value: Value;\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nfunction getLabelFromChildren(children: ReactNode): string {\n  if (!children) {\n    return \"\";\n  }\n\n  if (typeof children === \"string\" || typeof children === \"number\") {\n    return `${children}`;\n  }\n\n  if (isValidElement<{ children: ReactNode; hidden?: boolean }>(children)) {\n    if (children.props.hidden) {\n      return \"\";\n    }\n\n    return getLabelFromChildren(children.props.children);\n  }\n\n  const childList = Children.toArray(children);\n  for (const child of childList) {\n    if (typeof child === \"string\" || typeof child === \"number\") {\n      return `${child}`[0].toUpperCase();\n    }\n\n    if (\n      isValidElement<{ children: ReactNode; hidden?: boolean }>(child) &&\n      !child.props.hidden\n    ) {\n      return getLabelFromChildren(child.props.children);\n    }\n  }\n\n  return \"\";\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\ninterface ExtractedOptions<Value extends string | number> {\n  options: readonly Value[];\n  currentOption: SelectOption<Value> | undefined;\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport function extractOptionsFromChildren<Value extends string | number>(\n  children: ReactNode,\n  currentValue: Value | undefined\n): ExtractedOptions<Value> {\n  let currentOption: SelectOption<Value> | undefined;\n\n  const options: Value[] = [];\n  const searchValues: string[] = [];\n  Children.forEach(children, (child) => {\n    if (!isValidElement<SelectOption<Value>>(child)) {\n      return;\n    }\n\n    const { value, disabled, children } = child.props;\n    if (typeof value !== \"undefined\") {\n      if (\n        value === currentValue ||\n        (!currentOption && typeof currentValue === \"undefined\")\n      ) {\n        currentOption = child.props;\n      }\n\n      if (!disabled) {\n        options.push(child.props.value);\n        searchValues.push(getLabelFromChildren(children));\n      }\n    } else if (children) {\n      const result = extractOptionsFromChildren(children, currentValue);\n      if (!currentOption) {\n        ({ currentOption } = result);\n      }\n\n      options.push(...result.options);\n    }\n  });\n\n  return {\n    options,\n    currentOption,\n  };\n}\n"],"names":["Children","isValidElement","getLabelFromChildren","children","props","hidden","childList","toArray","child","toUpperCase","extractOptionsFromChildren","currentValue","currentOption","options","searchValues","forEach","value","disabled","push","result"],"mappings":"AAAA,SAASA,QAAQ,EAAkBC,cAAc,QAAQ,QAAQ;AAcjE;;;CAGC,GACD,SAASC,qBAAqBC,QAAmB;IAC/C,IAAI,CAACA,UAAU;QACb,OAAO;IACT;IAEA,IAAI,OAAOA,aAAa,YAAY,OAAOA,aAAa,UAAU;QAChE,OAAO,GAAGA,UAAU;IACtB;IAEA,IAAIF,eAA0DE,WAAW;QACvE,IAAIA,SAASC,KAAK,CAACC,MAAM,EAAE;YACzB,OAAO;QACT;QAEA,OAAOH,qBAAqBC,SAASC,KAAK,CAACD,QAAQ;IACrD;IAEA,MAAMG,YAAYN,SAASO,OAAO,CAACJ;IACnC,KAAK,MAAMK,SAASF,UAAW;QAC7B,IAAI,OAAOE,UAAU,YAAY,OAAOA,UAAU,UAAU;YAC1D,OAAO,GAAGA,OAAO,CAAC,EAAE,CAACC,WAAW;QAClC;QAEA,IACER,eAA0DO,UAC1D,CAACA,MAAMJ,KAAK,CAACC,MAAM,EACnB;YACA,OAAOH,qBAAqBM,MAAMJ,KAAK,CAACD,QAAQ;QAClD;IACF;IAEA,OAAO;AACT;AAWA;;;CAGC,GACD,OAAO,SAASO,2BACdP,QAAmB,EACnBQ,YAA+B;IAE/B,IAAIC;IAEJ,MAAMC,UAAmB,EAAE;IAC3B,MAAMC,eAAyB,EAAE;IACjCd,SAASe,OAAO,CAACZ,UAAU,CAACK;QAC1B,IAAI,CAACP,eAAoCO,QAAQ;YAC/C;QACF;QAEA,MAAM,EAAEQ,KAAK,EAAEC,QAAQ,EAAEd,QAAQ,EAAE,GAAGK,MAAMJ,KAAK;QACjD,IAAI,OAAOY,UAAU,aAAa;YAChC,IACEA,UAAUL,gBACT,CAACC,iBAAiB,OAAOD,iBAAiB,aAC3C;gBACAC,gBAAgBJ,MAAMJ,KAAK;YAC7B;YAEA,IAAI,CAACa,UAAU;gBACbJ,QAAQK,IAAI,CAACV,MAAMJ,KAAK,CAACY,KAAK;gBAC9BF,aAAaI,IAAI,CAAChB,qBAAqBC;YACzC;QACF,OAAO,IAAIA,UAAU;YACnB,MAAMgB,SAAST,2BAA2BP,UAAUQ;YACpD,IAAI,CAACC,eAAe;gBACjB,CAAA,EAAEA,aAAa,EAAE,GAAGO,MAAK;YAC5B;YAEAN,QAAQK,IAAI,IAAIC,OAAON,OAAO;QAChC;IACF;IAEA,OAAO;QACLA;QACAD;IACF;AACF"}
+{"version":3,"sources":["../../src/form/selectUtils.ts"],"sourcesContent":["import { Children, type ReactNode, isValidElement } from \"react\";\n\nimport { type MenuItemProps } from \"../menu/MenuItem.js\";\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface SelectOption<\n  Value extends string | number = string,\n> extends MenuItemProps {\n  value: Value;\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nfunction getLabelFromChildren(children: ReactNode): string {\n  if (!children) {\n    return \"\";\n  }\n\n  if (typeof children === \"string\" || typeof children === \"number\") {\n    return `${children}`;\n  }\n\n  if (isValidElement<{ children: ReactNode; hidden?: boolean }>(children)) {\n    if (children.props.hidden) {\n      return \"\";\n    }\n\n    return getLabelFromChildren(children.props.children);\n  }\n\n  const childList = Children.toArray(children);\n  for (const child of childList) {\n    if (typeof child === \"string\" || typeof child === \"number\") {\n      return `${child}`[0].toUpperCase();\n    }\n\n    if (\n      isValidElement<{ children: ReactNode; hidden?: boolean }>(child) &&\n      !child.props.hidden\n    ) {\n      return getLabelFromChildren(child.props.children);\n    }\n  }\n\n  return \"\";\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\ninterface ExtractedOptions<Value extends string | number> {\n  options: readonly Value[];\n  currentOption: SelectOption<Value> | undefined;\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport function extractOptionsFromChildren<Value extends string | number>(\n  children: ReactNode,\n  currentValue: Value | undefined\n): ExtractedOptions<Value> {\n  let currentOption: SelectOption<Value> | undefined;\n\n  const options: Value[] = [];\n  const searchValues: string[] = [];\n  Children.forEach(children, (child) => {\n    if (!isValidElement<SelectOption<Value>>(child)) {\n      return;\n    }\n\n    const { value, disabled, children } = child.props;\n    if (value !== undefined) {\n      if (\n        value === currentValue ||\n        (!currentOption && currentValue === undefined)\n      ) {\n        currentOption = child.props;\n      }\n\n      if (!disabled) {\n        options.push(child.props.value);\n        searchValues.push(getLabelFromChildren(children));\n      }\n    } else if (children) {\n      const result = extractOptionsFromChildren(children, currentValue);\n      if (!currentOption) {\n        ({ currentOption } = result);\n      }\n\n      options.push(...result.options);\n    }\n  });\n\n  return {\n    options,\n    currentOption,\n  };\n}\n"],"names":["Children","isValidElement","getLabelFromChildren","children","props","hidden","childList","toArray","child","toUpperCase","extractOptionsFromChildren","currentValue","currentOption","options","searchValues","forEach","value","disabled","undefined","push","result"],"mappings":"AAAA,SAASA,QAAQ,EAAkBC,cAAc,QAAQ,QAAQ;AAcjE;;;CAGC,GACD,SAASC,qBAAqBC,QAAmB;IAC/C,IAAI,CAACA,UAAU;QACb,OAAO;IACT;IAEA,IAAI,OAAOA,aAAa,YAAY,OAAOA,aAAa,UAAU;QAChE,OAAO,GAAGA,UAAU;IACtB;IAEA,IAAIF,eAA0DE,WAAW;QACvE,IAAIA,SAASC,KAAK,CAACC,MAAM,EAAE;YACzB,OAAO;QACT;QAEA,OAAOH,qBAAqBC,SAASC,KAAK,CAACD,QAAQ;IACrD;IAEA,MAAMG,YAAYN,SAASO,OAAO,CAACJ;IACnC,KAAK,MAAMK,SAASF,UAAW;QAC7B,IAAI,OAAOE,UAAU,YAAY,OAAOA,UAAU,UAAU;YAC1D,OAAO,GAAGA,OAAO,CAAC,EAAE,CAACC,WAAW;QAClC;QAEA,IACER,eAA0DO,UAC1D,CAACA,MAAMJ,KAAK,CAACC,MAAM,EACnB;YACA,OAAOH,qBAAqBM,MAAMJ,KAAK,CAACD,QAAQ;QAClD;IACF;IAEA,OAAO;AACT;AAWA;;;CAGC,GACD,OAAO,SAASO,2BACdP,QAAmB,EACnBQ,YAA+B;IAE/B,IAAIC;IAEJ,MAAMC,UAAmB,EAAE;IAC3B,MAAMC,eAAyB,EAAE;IACjCd,SAASe,OAAO,CAACZ,UAAU,CAACK;QAC1B,IAAI,CAACP,eAAoCO,QAAQ;YAC/C;QACF;QAEA,MAAM,EAAEQ,KAAK,EAAEC,QAAQ,EAAEd,QAAQ,EAAE,GAAGK,MAAMJ,KAAK;QACjD,IAAIY,UAAUE,WAAW;YACvB,IACEF,UAAUL,gBACT,CAACC,iBAAiBD,iBAAiBO,WACpC;gBACAN,gBAAgBJ,MAAMJ,KAAK;YAC7B;YAEA,IAAI,CAACa,UAAU;gBACbJ,QAAQM,IAAI,CAACX,MAAMJ,KAAK,CAACY,KAAK;gBAC9BF,aAAaK,IAAI,CAACjB,qBAAqBC;YACzC;QACF,OAAO,IAAIA,UAAU;YACnB,MAAMiB,SAASV,2BAA2BP,UAAUQ;YACpD,IAAI,CAACC,eAAe;gBACjB,CAAA,EAAEA,aAAa,EAAE,GAAGQ,MAAK;YAC5B;YAEAP,QAAQM,IAAI,IAAIC,OAAOP,OAAO;QAChC;IACF;IAEA,OAAO;QACLA;QACAD;IACF;AACF"}

package/dist/form/useCombobox.js

@@ -145,6 +145,7 @@ const noop = ()=>{
             // to really make sure the item is in view. An alternative would be to
             // implement a custom scrollIntoView behavior again like the previous
             // versions of react-md, but this is less lines of code
+            // eslint-disable-next-line unicorn/consistent-function-scoping
             const attemptScroll = ()=>{
                 const activeOption = document.getElementById(activeDescendantId);
                 if (activeOption) {