@react-md/core 1.0.0-next.8 → 1.0.0-next.9

package/dist/form/TextField.d.ts

@@ -1,6 +1,6 @@
 import { type CSSProperties, type HTMLAttributes, type InputHTMLAttributes, type ReactNode } from "react";
 import { type PropsWithRef } from "../types.js";
-import { type FormFieldOptions, type UserAgentAutoCompleteProps } from "./types.js";
+import { type FormFieldOptions, type UserAgentAutocompleteProps } from "./types.js";
 /**
  * These are all the "supported" input types for react-md so that they at least
  * render reasonably well by default. There is no built-in validation or
@@ -20,7 +20,7 @@ export type TextFieldInputAttributes = Omit<InputHTMLAttributes<HTMLInputElement
 /**
  * @remarks \@since 6.0.0 Removed the `containerRef` prop.
  */
-export interface TextFieldProps extends TextFieldInputAttributes, UserAgentAutoCompleteProps, FormFieldOptions {
+export interface TextFieldProps extends TextFieldInputAttributes, UserAgentAutocompleteProps, FormFieldOptions {
     /**
      * @defaultValue `"text-field-" + useId()`
      */

package/dist/form/TextField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/TextField.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type CSSProperties,\n  type HTMLAttributes,\n  type InputHTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { FormMessageContainer } from \"./FormMessageContainer.js\";\nimport { Label } from \"./Label.js\";\nimport { TextFieldContainer } from \"./TextFieldContainer.js\";\nimport { getFormConfig } from \"./formConfig.js\";\nimport { textField } from \"./textFieldStyles.js\";\nimport {\n  type FormFieldOptions,\n  type UserAgentAutoCompleteProps,\n} from \"./types.js\";\n\n/**\n * These are all the \"supported\" input types for react-md so that they at least\n * render reasonably well by default. There is no built-in validation or\n * anything adding onto existing browser functionality for these types.\n *\n * @remarks\n * \\@since 2.5.0 - `\"search\"` was added\n * \\@since 6.0.0 Dropped support for `\"week\"` and `\"month\"` input types since\n * they are not available in Firefox and Safari at this time.\n */\nexport type SupportedInputTypes =\n  | \"text\"\n  | \"password\"\n  | \"number\"\n  | \"tel\"\n  | \"email\"\n  | \"date\"\n  | \"time\"\n  | \"datetime-local\"\n  | \"url\"\n  | \"color\"\n  | \"search\";\n\n/**\n * @remarks \\@since 6.0.0 Renamed from `TextFieldAttributes` to\n * `TextFieldInputAttributes`\n */\nexport type TextFieldInputAttributes = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  \"type\"\n>;\n\n/**\n * @remarks \\@since 6.0.0 Removed the `containerRef` prop.\n */\nexport interface TextFieldProps\n  extends TextFieldInputAttributes,\n    UserAgentAutoCompleteProps,\n    FormFieldOptions {\n  /**\n   * @defaultValue `\"text-field-\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * Optional placeholder text to display in the text field.\n   *\n   * @defaultValue `label ? \" \" : \"\"`\n   */\n  placeholder?: string;\n\n  /**\n   * Any optional inline styles to set on the input.\n   */\n  inputStyle?: CSSProperties;\n\n  /**\n   * An optional `className` to add to the input.\n   */\n  inputClassName?: string;\n\n  /**\n   * The text field type.\n   *\n   * @defaultValue `\"text\"`\n   */\n  type?: SupportedInputTypes;\n\n  /**\n   * Optional props to provide to the {@link TextFieldContainer} component.\n   * There probably isn't any real use for this prop other than if you need to\n   * add a `ref` for some DOM behavior.\n   */\n  containerProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;\n\n  /**\n   * The `children` will be rendered within the `TextFieldContainer` and before\n   * the `<input />` element. This was added to support the new `Select`\n   * component implementation\n   *\n   * @internal\n   * @remarks \\@since 6.0.0\n   */\n  children?: ReactNode;\n}\n\n/**\n * **Server Component**\n *\n * The structure for this component is:\n * @example\n * Component Structure\n * ```tsx\n * <FormMessageContainer {...messageContainerProps}>\n *   <TextFieldContainer {...containerProps}>\n *     <input {...props} />\n *     <Label {...labelProps} />\n *   </TextFieldContainer>\n * </FormMessageContainer>\n * ```\n *\n * @example\n * Simple Example\n * ```tsx\n * import { TextField } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <TextField\n *       label=\"Name\"\n *       placeholder=\"Bob\"\n *       defaultValue=\"\"\n *     />\n *   );\n * }\n * ```\n */\nexport const TextField = forwardRef<HTMLInputElement, TextFieldProps>(\n  function TextField(props, ref) {\n    const {\n      id: propId,\n      style,\n      className,\n      type = \"text\",\n      label,\n      labelProps,\n      labelStyle,\n      labelClassName,\n      autoCompleteValue,\n      autoComplete = autoCompleteValue,\n      name = autoCompleteValue,\n      dense = false,\n      error = false,\n      active = false,\n      inline = false,\n      stretch = false,\n      leftAddon,\n      leftAddonProps,\n      rightAddon,\n      rightAddonProps,\n      disableLeftAddonStyles = false,\n      disableRightAddonStyles = false,\n      inputStyle,\n      inputClassName,\n      theme: propTheme,\n      underlineDirection: propUnderlineDirection,\n      messageProps,\n      messageContainerProps,\n      containerProps,\n      children,\n      ...remaining\n    } = props;\n    const { disabled = false, readOnly = false } = props;\n    const id = useEnsuredId(propId, \"text-field\");\n    const theme = getFormConfig(\"theme\", propTheme);\n    const underlineDirection = getFormConfig(\n      \"underlineDirection\",\n      propUnderlineDirection\n    );\n\n    let { placeholder = \"\" } = props;\n    if (label && !placeholder) {\n      // See the placeholder type definition comments for information\n      placeholder = \" \";\n    }\n\n    return (\n      <FormMessageContainer\n        {...messageContainerProps}\n        messageProps={messageProps}\n      >\n        <TextFieldContainer\n          {...containerProps}\n          style={style}\n          className={className}\n          theme={theme}\n          label={!!label}\n          error={error}\n          dense={dense}\n          inline={inline}\n          active={active}\n          stretch={stretch}\n          readOnly={readOnly}\n          disabled={disabled}\n          leftAddon={leftAddon}\n          leftAddonProps={leftAddonProps}\n          rightAddon={rightAddon}\n          rightAddonProps={rightAddonProps}\n          underlineDirection={underlineDirection}\n          disableLeftAddonStyles={disableLeftAddonStyles}\n          disableRightAddonStyles={disableRightAddonStyles}\n        >\n          {children}\n          <input\n            {...remaining}\n            id={id}\n            ref={ref}\n            type={type}\n            name={name}\n            disabled={disabled}\n            placeholder={placeholder}\n            autoComplete={autoComplete}\n            style={inputStyle}\n            className={textField({\n              className: inputClassName,\n              placeholderHidden: !!label && !active,\n            })}\n          />\n          {label && (\n            <Label\n              floating\n              dense={dense}\n              error={error}\n              active={active}\n              disabled={disabled}\n              {...labelProps}\n              htmlFor={id}\n              style={labelProps?.style ?? labelStyle}\n              className={labelProps?.className ?? labelClassName}\n            >\n              {label}\n            </Label>\n          )}\n        </TextFieldContainer>\n      </FormMessageContainer>\n    );\n  }\n);\n"],"names":["forwardRef","useEnsuredId","FormMessageContainer","Label","TextFieldContainer","getFormConfig","textField","TextField","props","ref","id","propId","style","className","type","label","labelProps","labelStyle","labelClassName","autoCompleteValue","autoComplete","name","dense","error","active","inline","stretch","leftAddon","leftAddonProps","rightAddon","rightAddonProps","disableLeftAddonStyles","disableRightAddonStyles","inputStyle","inputClassName","theme","propTheme","underlineDirection","propUnderlineDirection","messageProps","messageContainerProps","containerProps","children","remaining","disabled","readOnly","placeholder","input","placeholderHidden","floating","htmlFor"],"mappings":";AAAA,SACEA,UAAU,QAKL,QAAQ;AAEf,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,oBAAoB,QAAQ,4BAA4B;AACjE,SAASC,KAAK,QAAQ,aAAa;AACnC,SAASC,kBAAkB,QAAQ,0BAA0B;AAC7D,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,SAAS,QAAQ,uBAAuB;AA4FjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BC,GACD,OAAO,MAAMC,0BAAYP,WACvB,SAASO,UAAUC,KAAK,EAAEC,GAAG;IAC3B,MAAM,EACJC,IAAIC,MAAM,EACVC,KAAK,EACLC,SAAS,EACTC,OAAO,MAAM,EACbC,KAAK,EACLC,UAAU,EACVC,UAAU,EACVC,cAAc,EACdC,iBAAiB,EACjBC,eAAeD,iBAAiB,EAChCE,OAAOF,iBAAiB,EACxBG,QAAQ,KAAK,EACbC,QAAQ,KAAK,EACbC,SAAS,KAAK,EACdC,SAAS,KAAK,EACdC,UAAU,KAAK,EACfC,SAAS,EACTC,cAAc,EACdC,UAAU,EACVC,eAAe,EACfC,yBAAyB,KAAK,EAC9BC,0BAA0B,KAAK,EAC/BC,UAAU,EACVC,cAAc,EACdC,OAAOC,SAAS,EAChBC,oBAAoBC,sBAAsB,EAC1CC,YAAY,EACZC,qBAAqB,EACrBC,cAAc,EACdC,QAAQ,EACR,GAAGC,WACJ,GAAGnC;IACJ,MAAM,EAAEoC,WAAW,KAAK,EAAEC,WAAW,KAAK,EAAE,GAAGrC;IAC/C,MAAME,KAAKT,aAAaU,QAAQ;IAChC,MAAMwB,QAAQ9B,cAAc,SAAS+B;IACrC,MAAMC,qBAAqBhC,cACzB,sBACAiC;IAGF,IAAI,EAAEQ,cAAc,EAAE,EAAE,GAAGtC;IAC3B,IAAIO,SAAS,CAAC+B,aAAa;QACzB,+DAA+D;QAC/DA,cAAc;IAChB;IAEA,qBACE,KAAC5C;QACE,GAAGsC,qBAAqB;QACzBD,cAAcA;kBAEd,cAAA,MAACnC;YACE,GAAGqC,cAAc;YAClB7B,OAAOA;YACPC,WAAWA;YACXsB,OAAOA;YACPpB,OAAO,CAAC,CAACA;YACTQ,OAAOA;YACPD,OAAOA;YACPG,QAAQA;YACRD,QAAQA;YACRE,SAASA;YACTmB,UAAUA;YACVD,UAAUA;YACVjB,WAAWA;YACXC,gBAAgBA;YAChBC,YAAYA;YACZC,iBAAiBA;YACjBO,oBAAoBA;YACpBN,wBAAwBA;YACxBC,yBAAyBA;;gBAExBU;8BACD,KAACK;oBACE,GAAGJ,SAAS;oBACbjC,IAAIA;oBACJD,KAAKA;oBACLK,MAAMA;oBACNO,MAAMA;oBACNuB,UAAUA;oBACVE,aAAaA;oBACb1B,cAAcA;oBACdR,OAAOqB;oBACPpB,WAAWP,UAAU;wBACnBO,WAAWqB;wBACXc,mBAAmB,CAAC,CAACjC,SAAS,CAACS;oBACjC;;gBAEDT,uBACC,KAACZ;oBACC8C,QAAQ;oBACR3B,OAAOA;oBACPC,OAAOA;oBACPC,QAAQA;oBACRoB,UAAUA;oBACT,GAAG5B,UAAU;oBACdkC,SAASxC;oBACTE,OAAOI,YAAYJ,SAASK;oBAC5BJ,WAAWG,YAAYH,aAAaK;8BAEnCH;;;;;AAMb,GACA"}
+{"version":3,"sources":["../../src/form/TextField.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type CSSProperties,\n  type HTMLAttributes,\n  type InputHTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { FormMessageContainer } from \"./FormMessageContainer.js\";\nimport { Label } from \"./Label.js\";\nimport { TextFieldContainer } from \"./TextFieldContainer.js\";\nimport { getFormConfig } from \"./formConfig.js\";\nimport { textField } from \"./textFieldStyles.js\";\nimport {\n  type FormFieldOptions,\n  type UserAgentAutocompleteProps,\n} from \"./types.js\";\n\n/**\n * These are all the \"supported\" input types for react-md so that they at least\n * render reasonably well by default. There is no built-in validation or\n * anything adding onto existing browser functionality for these types.\n *\n * @remarks\n * \\@since 2.5.0 - `\"search\"` was added\n * \\@since 6.0.0 Dropped support for `\"week\"` and `\"month\"` input types since\n * they are not available in Firefox and Safari at this time.\n */\nexport type SupportedInputTypes =\n  | \"text\"\n  | \"password\"\n  | \"number\"\n  | \"tel\"\n  | \"email\"\n  | \"date\"\n  | \"time\"\n  | \"datetime-local\"\n  | \"url\"\n  | \"color\"\n  | \"search\";\n\n/**\n * @remarks \\@since 6.0.0 Renamed from `TextFieldAttributes` to\n * `TextFieldInputAttributes`\n */\nexport type TextFieldInputAttributes = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  \"type\"\n>;\n\n/**\n * @remarks \\@since 6.0.0 Removed the `containerRef` prop.\n */\nexport interface TextFieldProps\n  extends TextFieldInputAttributes,\n    UserAgentAutocompleteProps,\n    FormFieldOptions {\n  /**\n   * @defaultValue `\"text-field-\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * Optional placeholder text to display in the text field.\n   *\n   * @defaultValue `label ? \" \" : \"\"`\n   */\n  placeholder?: string;\n\n  /**\n   * Any optional inline styles to set on the input.\n   */\n  inputStyle?: CSSProperties;\n\n  /**\n   * An optional `className` to add to the input.\n   */\n  inputClassName?: string;\n\n  /**\n   * The text field type.\n   *\n   * @defaultValue `\"text\"`\n   */\n  type?: SupportedInputTypes;\n\n  /**\n   * Optional props to provide to the {@link TextFieldContainer} component.\n   * There probably isn't any real use for this prop other than if you need to\n   * add a `ref` for some DOM behavior.\n   */\n  containerProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;\n\n  /**\n   * The `children` will be rendered within the `TextFieldContainer` and before\n   * the `<input />` element. This was added to support the new `Select`\n   * component implementation\n   *\n   * @internal\n   * @remarks \\@since 6.0.0\n   */\n  children?: ReactNode;\n}\n\n/**\n * **Server Component**\n *\n * The structure for this component is:\n * @example\n * Component Structure\n * ```tsx\n * <FormMessageContainer {...messageContainerProps}>\n *   <TextFieldContainer {...containerProps}>\n *     <input {...props} />\n *     <Label {...labelProps} />\n *   </TextFieldContainer>\n * </FormMessageContainer>\n * ```\n *\n * @example\n * Simple Example\n * ```tsx\n * import { TextField } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <TextField\n *       label=\"Name\"\n *       placeholder=\"Bob\"\n *       defaultValue=\"\"\n *     />\n *   );\n * }\n * ```\n */\nexport const TextField = forwardRef<HTMLInputElement, TextFieldProps>(\n  function TextField(props, ref) {\n    const {\n      id: propId,\n      style,\n      className,\n      type = \"text\",\n      label,\n      labelProps,\n      labelStyle,\n      labelClassName,\n      autoCompleteValue,\n      autoComplete = autoCompleteValue,\n      name = autoCompleteValue,\n      dense = false,\n      error = false,\n      active = false,\n      inline = false,\n      stretch = false,\n      leftAddon,\n      leftAddonProps,\n      rightAddon,\n      rightAddonProps,\n      disableLeftAddonStyles = false,\n      disableRightAddonStyles = false,\n      inputStyle,\n      inputClassName,\n      theme: propTheme,\n      underlineDirection: propUnderlineDirection,\n      messageProps,\n      messageContainerProps,\n      containerProps,\n      children,\n      ...remaining\n    } = props;\n    const { disabled = false, readOnly = false } = props;\n    const id = useEnsuredId(propId, \"text-field\");\n    const theme = getFormConfig(\"theme\", propTheme);\n    const underlineDirection = getFormConfig(\n      \"underlineDirection\",\n      propUnderlineDirection\n    );\n\n    let { placeholder = \"\" } = props;\n    if (label && !placeholder) {\n      // See the placeholder type definition comments for information\n      placeholder = \" \";\n    }\n\n    return (\n      <FormMessageContainer\n        {...messageContainerProps}\n        messageProps={messageProps}\n      >\n        <TextFieldContainer\n          {...containerProps}\n          style={style}\n          className={className}\n          theme={theme}\n          label={!!label}\n          error={error}\n          dense={dense}\n          inline={inline}\n          active={active}\n          stretch={stretch}\n          readOnly={readOnly}\n          disabled={disabled}\n          leftAddon={leftAddon}\n          leftAddonProps={leftAddonProps}\n          rightAddon={rightAddon}\n          rightAddonProps={rightAddonProps}\n          underlineDirection={underlineDirection}\n          disableLeftAddonStyles={disableLeftAddonStyles}\n          disableRightAddonStyles={disableRightAddonStyles}\n        >\n          {children}\n          <input\n            {...remaining}\n            id={id}\n            ref={ref}\n            type={type}\n            name={name}\n            disabled={disabled}\n            placeholder={placeholder}\n            autoComplete={autoComplete}\n            style={inputStyle}\n            className={textField({\n              className: inputClassName,\n              placeholderHidden: !!label && !active,\n            })}\n          />\n          {label && (\n            <Label\n              floating\n              dense={dense}\n              error={error}\n              active={active}\n              disabled={disabled}\n              {...labelProps}\n              htmlFor={id}\n              style={labelProps?.style ?? labelStyle}\n              className={labelProps?.className ?? labelClassName}\n            >\n              {label}\n            </Label>\n          )}\n        </TextFieldContainer>\n      </FormMessageContainer>\n    );\n  }\n);\n"],"names":["forwardRef","useEnsuredId","FormMessageContainer","Label","TextFieldContainer","getFormConfig","textField","TextField","props","ref","id","propId","style","className","type","label","labelProps","labelStyle","labelClassName","autoCompleteValue","autoComplete","name","dense","error","active","inline","stretch","leftAddon","leftAddonProps","rightAddon","rightAddonProps","disableLeftAddonStyles","disableRightAddonStyles","inputStyle","inputClassName","theme","propTheme","underlineDirection","propUnderlineDirection","messageProps","messageContainerProps","containerProps","children","remaining","disabled","readOnly","placeholder","input","placeholderHidden","floating","htmlFor"],"mappings":";AAAA,SACEA,UAAU,QAKL,QAAQ;AAEf,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,oBAAoB,QAAQ,4BAA4B;AACjE,SAASC,KAAK,QAAQ,aAAa;AACnC,SAASC,kBAAkB,QAAQ,0BAA0B;AAC7D,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,SAAS,QAAQ,uBAAuB;AA4FjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BC,GACD,OAAO,MAAMC,0BAAYP,WACvB,SAASO,UAAUC,KAAK,EAAEC,GAAG;IAC3B,MAAM,EACJC,IAAIC,MAAM,EACVC,KAAK,EACLC,SAAS,EACTC,OAAO,MAAM,EACbC,KAAK,EACLC,UAAU,EACVC,UAAU,EACVC,cAAc,EACdC,iBAAiB,EACjBC,eAAeD,iBAAiB,EAChCE,OAAOF,iBAAiB,EACxBG,QAAQ,KAAK,EACbC,QAAQ,KAAK,EACbC,SAAS,KAAK,EACdC,SAAS,KAAK,EACdC,UAAU,KAAK,EACfC,SAAS,EACTC,cAAc,EACdC,UAAU,EACVC,eAAe,EACfC,yBAAyB,KAAK,EAC9BC,0BAA0B,KAAK,EAC/BC,UAAU,EACVC,cAAc,EACdC,OAAOC,SAAS,EAChBC,oBAAoBC,sBAAsB,EAC1CC,YAAY,EACZC,qBAAqB,EACrBC,cAAc,EACdC,QAAQ,EACR,GAAGC,WACJ,GAAGnC;IACJ,MAAM,EAAEoC,WAAW,KAAK,EAAEC,WAAW,KAAK,EAAE,GAAGrC;IAC/C,MAAME,KAAKT,aAAaU,QAAQ;IAChC,MAAMwB,QAAQ9B,cAAc,SAAS+B;IACrC,MAAMC,qBAAqBhC,cACzB,sBACAiC;IAGF,IAAI,EAAEQ,cAAc,EAAE,EAAE,GAAGtC;IAC3B,IAAIO,SAAS,CAAC+B,aAAa;QACzB,+DAA+D;QAC/DA,cAAc;IAChB;IAEA,qBACE,KAAC5C;QACE,GAAGsC,qBAAqB;QACzBD,cAAcA;kBAEd,cAAA,MAACnC;YACE,GAAGqC,cAAc;YAClB7B,OAAOA;YACPC,WAAWA;YACXsB,OAAOA;YACPpB,OAAO,CAAC,CAACA;YACTQ,OAAOA;YACPD,OAAOA;YACPG,QAAQA;YACRD,QAAQA;YACRE,SAASA;YACTmB,UAAUA;YACVD,UAAUA;YACVjB,WAAWA;YACXC,gBAAgBA;YAChBC,YAAYA;YACZC,iBAAiBA;YACjBO,oBAAoBA;YACpBN,wBAAwBA;YACxBC,yBAAyBA;;gBAExBU;8BACD,KAACK;oBACE,GAAGJ,SAAS;oBACbjC,IAAIA;oBACJD,KAAKA;oBACLK,MAAMA;oBACNO,MAAMA;oBACNuB,UAAUA;oBACVE,aAAaA;oBACb1B,cAAcA;oBACdR,OAAOqB;oBACPpB,WAAWP,UAAU;wBACnBO,WAAWqB;wBACXc,mBAAmB,CAAC,CAACjC,SAAS,CAACS;oBACjC;;gBAEDT,uBACC,KAACZ;oBACC8C,QAAQ;oBACR3B,OAAOA;oBACPC,OAAOA;oBACPC,QAAQA;oBACRoB,UAAUA;oBACT,GAAG5B,UAAU;oBACdkC,SAASxC;oBACTE,OAAOI,YAAYJ,SAASK;oBAC5BJ,WAAWG,YAAYH,aAAaK;8BAEnCH;;;;;AAMb,GACA"}

package/dist/form/_form.scss

@@ -1070,25 +1070,20 @@ $variables: (
       outline-style: none;
     }
 
-    .rmd-select-value {
-      @include _text-field-base-styles;
-
-      align-items: center;
-      display: flex;
-      gap: 0.5rem;
+    .rmd-selected-option {
       position: absolute;
-      white-space: nowrap;
-
-      &__v {
-        @include typography.text-overflow;
-      }
     }
 
     .rmd-select {
+      // disable pointer events on touch devices so the soft keyboard does not
+      // appear when clicking the select
+      @media (hover: none) and (pointer: course) {
+        pointer-events: none;
+      }
+
       opacity: 0;
-      pointer-events: none;
 
-      // ALl these additional overrides are provided so that the select will have
+      // All these additional overrides are provided so that the select will have
       // the same sizing as a text field with the same props provided.
       @if not $disable-text-field-underlined-theme {
         &--underline {

package/dist/form/selectUtils.d.ts

@@ -12,10 +12,8 @@ export interface SelectOption<Value extends string | number = string> extends Me
  * @remarks \@since 6.0.0
  */
 interface ExtractedOptions<Value extends string | number> {
-    options: readonly SelectOption<Value>[];
+    options: readonly Value[];
     currentOption: SelectOption<Value> | undefined;
-    searchValues: readonly string[];
-    currentIndex: number;
 }
 /**
  * @internal

package/dist/form/selectUtils.js

@@ -31,7 +31,6 @@ import { Children, isValidElement } from "react";
  * @remarks \@since 6.0.0
  */ export function extractOptionsFromChildren(children, currentValue) {
     let currentOption;
-    let currentIndex = -1;
     const options = [];
     const searchValues = [];
     Children.forEach(children, (child)=>{
@@ -42,10 +41,9 @@ import { Children, isValidElement } from "react";
         if (typeof value !== "undefined") {
             if (value === currentValue || !currentOption && typeof currentValue === "undefined") {
                 currentOption = child.props;
-                currentIndex = options.length;
             }
             if (!disabled) {
-                options.push(child.props);
+                options.push(child.props.value);
                 searchValues.push(getLabelFromChildren(children));
             }
         } else if (children) {
@@ -53,18 +51,12 @@ import { Children, isValidElement } from "react";
             if (!currentOption) {
                 ({ currentOption } = result);
             }
-            if (result.currentIndex !== -1) {
-                currentIndex = options.length + result.currentIndex;
-            }
             options.push(...result.options);
-            searchValues.push(...result.searchValues);
         }
     });
     return {
         options,
-        searchValues,
-        currentOption,
-        currentIndex
+        currentOption
     };
 }
 

package/dist/form/selectUtils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/selectUtils.ts"],"sourcesContent":["import { Children, isValidElement, type ReactNode } from \"react\";\nimport { type MenuItemProps } from \"../menu/MenuItem.js\";\n\n/**\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport interface SelectOption<Value extends string | number = string>\n  extends MenuItemProps {\n  value: Value;\n}\n\n/**\n * @internal\n * @remarks \\@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 * @remarks \\@since 6.0.0\n */\ninterface ExtractedOptions<Value extends string | number> {\n  options: readonly SelectOption<Value>[];\n  currentOption: SelectOption<Value> | undefined;\n  searchValues: readonly string[];\n  currentIndex: number;\n}\n\n/**\n * @internal\n * @remarks \\@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  let currentIndex = -1;\n\n  const options: SelectOption<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        currentIndex = options.length;\n      }\n\n      if (!disabled) {\n        options.push(child.props);\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      if (result.currentIndex !== -1) {\n        currentIndex = options.length + result.currentIndex;\n      }\n\n      options.push(...result.options);\n      searchValues.push(...result.searchValues);\n    }\n  });\n\n  return {\n    options,\n    searchValues,\n    currentOption,\n    currentIndex,\n  };\n}\n"],"names":["Children","isValidElement","getLabelFromChildren","children","props","hidden","childList","toArray","child","toUpperCase","extractOptionsFromChildren","currentValue","currentOption","currentIndex","options","searchValues","forEach","value","disabled","length","push","result"],"mappings":"AAAA,SAASA,QAAQ,EAAEC,cAAc,QAAwB,QAAQ;AAYjE;;;CAGC,GACD,SAASC,qBAAqBC,QAAmB;IAC/C,IAAI,CAACA,UAAU;QACb,OAAO;IACT;IAEA,IAAI,OAAOA,aAAa,YAAY,OAAOA,aAAa,UAAU;QAChE,OAAO,CAAC,EAAEA,SAAS,CAAC;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,CAAC,EAAEA,MAAM,CAAC,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;AAaA;;;CAGC,GACD,OAAO,SAASO,2BACdP,QAAmB,EACnBQ,YAA+B;IAE/B,IAAIC;IACJ,IAAIC,eAAe,CAAC;IAEpB,MAAMC,UAAiC,EAAE;IACzC,MAAMC,eAAyB,EAAE;IACjCf,SAASgB,OAAO,CAACb,UAAU,CAACK;QAC1B,IAAI,CAACP,eAAoCO,QAAQ;YAC/C;QACF;QAEA,MAAM,EAAES,KAAK,EAAEC,QAAQ,EAAEf,QAAQ,EAAE,GAAGK,MAAMJ,KAAK;QACjD,IAAI,OAAOa,UAAU,aAAa;YAChC,IACEA,UAAUN,gBACT,CAACC,iBAAiB,OAAOD,iBAAiB,aAC3C;gBACAC,gBAAgBJ,MAAMJ,KAAK;gBAC3BS,eAAeC,QAAQK,MAAM;YAC/B;YAEA,IAAI,CAACD,UAAU;gBACbJ,QAAQM,IAAI,CAACZ,MAAMJ,KAAK;gBACxBW,aAAaK,IAAI,CAAClB,qBAAqBC;YACzC;QACF,OAAO,IAAIA,UAAU;YACnB,MAAMkB,SAASX,2BAA2BP,UAAUQ;YACpD,IAAI,CAACC,eAAe;gBACjB,CAAA,EAAEA,aAAa,EAAE,GAAGS,MAAK;YAC5B;YAEA,IAAIA,OAAOR,YAAY,KAAK,CAAC,GAAG;gBAC9BA,eAAeC,QAAQK,MAAM,GAAGE,OAAOR,YAAY;YACrD;YAEAC,QAAQM,IAAI,IAAIC,OAAOP,OAAO;YAC9BC,aAAaK,IAAI,IAAIC,OAAON,YAAY;QAC1C;IACF;IAEA,OAAO;QACLD;QACAC;QACAH;QACAC;IACF;AACF"}
+{"version":3,"sources":["../../src/form/selectUtils.ts"],"sourcesContent":["import { Children, isValidElement, type ReactNode } from \"react\";\nimport { type MenuItemProps } from \"../menu/MenuItem.js\";\n\n/**\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport interface SelectOption<Value extends string | number = string>\n  extends MenuItemProps {\n  value: Value;\n}\n\n/**\n * @internal\n * @remarks \\@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 * @remarks \\@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 * @remarks \\@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,EAAEC,cAAc,QAAwB,QAAQ;AAYjE;;;CAGC,GACD,SAASC,qBAAqBC,QAAmB;IAC/C,IAAI,CAACA,UAAU;QACb,OAAO;IACT;IAEA,IAAI,OAAOA,aAAa,YAAY,OAAOA,aAAa,UAAU;QAChE,OAAO,CAAC,EAAEA,SAAS,CAAC;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,CAAC,EAAEA,MAAM,CAAC,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"}

package/dist/form/types.d.ts

@@ -73,15 +73,15 @@ export interface FormComponentStates {
  * @see https://html.spec.whatwg.org/multipage/forms.html#autofill
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values
  */
-export type AutoCompleteValue = "off" | "on" | "name" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "email" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel" | "tel-country-code" | "tel-national" | "tek-area-code" | "tel-local" | "tel-extension" | "impp" | "url" | "photo";
+export type AutocompleteValue = "off" | "on" | "name" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "email" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel" | "tel-country-code" | "tel-national" | "tek-area-code" | "tel-local" | "tel-extension" | "impp" | "url" | "photo";
 /**
  * @remarks \@since 6.0.0
  */
-export interface UserAgentAutoCompleteProps {
+export interface UserAgentAutocompleteProps {
     /**
      * Set this to enable additional autocompletion suggestions for a user for
      * different form fields. Using this prop will update the
-     * {@link UserAgentAutoCompleteProps.name} and {@link autoComplete} to default to
+     * {@link UserAgentAutocompleteProps.name} and {@link autoComplete} to default to
      * this value.
      *
      * @example
@@ -110,11 +110,11 @@ export interface UserAgentAutoCompleteProps {
      *
      * @see https://html.spec.whatwg.org/multipage/forms.html#autofill
      * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values
-     * @see {@link AutoCompleteValue}
+     * @see {@link AutocompleteValue}
      * @see {@link autoComplete}
-     * @see {@link UserAgentAutoCompleteProps.name}
+     * @see {@link UserAgentAutocompleteProps.name}
      */
-    autoCompleteValue?: AutoCompleteValue;
+    autoCompleteValue?: AutocompleteValue;
     /**
      * @see {@link autoCompleteValue}
      * @defaultValue `autoCompleteValue`

package/dist/form/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/types.ts"],"sourcesContent":["import {\n  type CSSProperties,\n  type HTMLAttributes,\n  type InputHTMLAttributes,\n  type LabelHTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { type PropsWithRef } from \"../types.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-form-active-color\"?: string;\n    \"--rmd-form-focus-color\"?: string;\n  }\n}\n\n/**\n * The supported themes for the `TextField`, `TextArea`, and `Select`\n * components.\n *\n * - \"none\" - display as an unstyled text field without any border or background\n *   colors.\n * - \"underline\" - display with only an underline that gains the form active\n *   color and animates from the left or right to the other side when the field\n *   is focused.\n * - \"filled\" - an extension of the `\"underline\"` state that will also have a\n *   slightly dark background applied.\n * - \"outline\" - outlines the entire text field in a border and applies the\n *   active color as box shadow when the field is focused.\n */\nexport type FormTheme = \"none\" | \"underline\" | \"filled\" | \"outline\";\n\n/**\n * The direction that the underline should appear from when the theme is\n * `\"underline\"` or `\"filled\"`.\n */\nexport type FormUnderlineDirection = \"left\" | \"center\" | \"right\";\n\nexport interface FormThemeOptions {\n  /**\n   * The current theme type.\n   *\n   * @defaultValue `\"outline\"`\n   */\n  theme?: FormTheme;\n\n  /**\n   * The current underline direction.\n   *\n   * @defaultValue `\"left\"`\n   */\n  underlineDirection?: FormUnderlineDirection;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface FormConfiguration extends Required<FormThemeOptions> {\n  /**\n   * Set this to `false` if the `$disable-uncontrolled-input-toggles` variable\n   * is set to `true` in the Sass configuration.\n   *\n   * Since the `checked` state only changes for the radio that has been clicked,\n   * the previously checked radio would also be shown as checked with no way of\n   * fixing it without controlling the radio component. When this flag is\n   * enabled, the checked icons and state are handled through css instead of\n   * `useState`.\n   *\n   * @defaultValue `true`\n   */\n  uncontrolledToggles: boolean;\n}\n\nexport interface FormComponentStates {\n  /** @defaultValue `false` */\n  error?: boolean;\n\n  /** @defaultValue `false` */\n  active?: boolean;\n\n  /** @defaultValue `false` */\n  disabled?: boolean;\n\n  /** @defaultValue `false` */\n  readOnly?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n * @see https://html.spec.whatwg.org/multipage/forms.html#autofill\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values\n */\nexport type AutoCompleteValue =\n  | \"off\"\n  | \"on\"\n  | \"name\"\n  | \"honorific-prefix\"\n  | \"given-name\"\n  | \"additional-name\"\n  | \"family-name\"\n  | \"honorific-suffix\"\n  | \"nickname\"\n  | \"email\"\n  | \"username\"\n  | \"new-password\"\n  | \"current-password\"\n  | \"one-time-code\"\n  | \"organization-title\"\n  | \"organization\"\n  | \"street-address\"\n  | \"address-line1\"\n  | \"address-line2\"\n  | \"address-line3\"\n  | \"address-level1\"\n  | \"address-level2\"\n  | \"address-level3\"\n  | \"address-level4\"\n  | \"country\"\n  | \"country-name\"\n  | \"postal-code\"\n  | \"cc-name\"\n  | \"cc-given-name\"\n  | \"cc-additional-name\"\n  | \"cc-family-name\"\n  | \"cc-number\"\n  | \"cc-exp\"\n  | \"cc-exp-month\"\n  | \"cc-exp-year\"\n  | \"cc-csc\"\n  | \"cc-type\"\n  | \"transaction-currency\"\n  | \"transaction-amount\"\n  | \"language\"\n  | \"bday\"\n  | \"bday-day\"\n  | \"bday-month\"\n  | \"bday-year\"\n  | \"sex\"\n  | \"tel\"\n  | \"tel-country-code\"\n  | \"tel-national\"\n  | \"tek-area-code\"\n  | \"tel-local\"\n  | \"tel-extension\"\n  | \"impp\"\n  | \"url\"\n  | \"photo\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface UserAgentAutoCompleteProps {\n  /**\n   * Set this to enable additional autocompletion suggestions for a user for\n   * different form fields. Using this prop will update the\n   * {@link UserAgentAutoCompleteProps.name} and {@link autoComplete} to default to\n   * this value.\n   *\n   * @example\n   * ```tsx\n   * <Form>\n   *   <TextField\n   *     label=\"Enter your credit card number\"\n   *     autoCompleteValue=\"cc-number\"\n   *     {...creditCardProps}\n   *     inputMode=\"number\"\n   *   />\n   *   <TextField\n   *     label=\"Name on card\"\n   *     autoCompleteValue=\"cc-name\"\n   *     {...creditCardNameProps}\n   *   />\n   *   <TextField\n   *     label=\"Security code\"\n   *     autoCompleteValue=\"cc-csc\"\n   *     {...securityCodeProps}\n   *     inputMode=\"number\"\n   *   />\n   *   <Button type=\"submit\">Submit</Button>\n   * </Form>\n   * ```\n   *\n   * @see https://html.spec.whatwg.org/multipage/forms.html#autofill\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values\n   * @see {@link AutoCompleteValue}\n   * @see {@link autoComplete}\n   * @see {@link UserAgentAutoCompleteProps.name}\n   */\n  autoCompleteValue?: AutoCompleteValue;\n\n  /**\n   * @see {@link autoCompleteValue}\n   * @defaultValue `autoCompleteValue`\n   */\n  autoComplete?: InputHTMLAttributes<HTMLInputElement>[\"autoComplete\"];\n\n  /**\n   * @see {@link autoCompleteValue}\n   * @defaultValue `autoCompleteValue`\n   */\n  name?: string;\n}\n\nexport interface FormMessageClassNameOptions {\n  className?: string;\n\n  /**\n   * Boolean if the message should gain the error state which changes the text\n   * color to `red` by default.\n   *\n   * @defaultValue `false`\n   */\n  error?: boolean;\n\n  /**\n   * The current theme for the related text field. This is really only used to\n   * match the current horizontal padding of the text field.\n   *\n   * @defaultValue `\"outline\"`\n   */\n  theme?: FormTheme;\n}\n\nexport interface FormMessageProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"minLength\" | \"maxLength\">,\n    FormMessageClassNameOptions {\n  /**\n   * If this component is acting as a form-level error message handler, the role\n   * should be updated to be `\"alert\"` for additional accessibility.\n   *\n   * Note: when creating a form-level error message handler, the messages should\n   * no longer appear as the user types and instead once the user tries to\n   * submit the form. Having an alert role disrupts normal screen reader\n   * behavior by immediately reading changes in this element.\n   *\n   * @defaultValue `undefined`\n   */\n  role?: \"alert\";\n\n  /**\n   * Boolean if the children should no longer be wrapped in a `<p>` tag. This\n   * should normally only be disabled if using a custom error message wrapper or\n   * the counter behavior is not being used. To get correct alignments of the\n   * message and counter, the `children` must be wrapped in some element and\n   * cannot be plain test.\n   *\n   * Note: this will always be considered `true` if the `role` is set to\n   * `\"alert\"`.\n   *\n   * @defaultValue `false`\n   */\n  disableWrap?: boolean;\n\n  /**\n   * An optional style to apply to the `<p>` tag that surrounds the `children`.\n   * This will not be used if `role=\"alert\"` or `disableWrap={true}`.\n   */\n  messageStyle?: CSSProperties;\n\n  /**\n   * An optional className to apply to the `<p>` tag that surrounds the\n   * `children`. This will not be used if `role=\"alert\"` or\n   * `disableWrap={true}`.\n   */\n  messageClassName?: string;\n}\n\n/**\n * Props that are used to automatically add a counter for the remaining letters\n * available for the text field. The counter will always be created to the right\n * of the optional message.\n *\n * The counter is really a simple string of: `${length} / ${maxLength}`.\n *\n * If you need additional customization, it is recommended to create your own\n * implementation such as:\n *\n * ```tsx\n * <FormMessage>\n *   {errorMessage}\n *   <MyCounter {...props} />\n * </FormMessage>\n * ```\n *\n * Note: this should not be used alongside form-level messages.\n *\n * @remarks \\@since 2.9.0 Renamed from `FormMessageCounterProps` to\n * `FormMessageInputLengthCounterProps` since a `FormMessageCounter` component\n * was added\n */\nexport interface FormMessageInputLengthCounterProps {\n  /**\n   * The current length of the value in the related text field.\n   */\n  length: number;\n\n  /**\n   * The max length allowed for the value in the related text field.\n   */\n  maxLength: number;\n\n  /**\n   * An optional style to apply to the counter wrapper element.\n   */\n  counterStyle?: CSSProperties;\n\n  /**\n   * An optional className to apply to the counter wrapper element.\n   */\n  counterClassName?: string;\n}\n\nexport interface FormMessageWithCounterProps\n  extends FormMessageProps,\n    FormMessageInputLengthCounterProps {}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface FormMessageWithoutCounterProps extends FormMessageProps {\n  length?: never;\n  maxLength?: never;\n  counterStyle?: never;\n  counterClassName?: never;\n}\n\nexport interface FormMessageContainerExtension {\n  /**\n   * If the extension doesn't actually want to render the `FormMessage`\n   * component, these props are optional. It kind of eliminates the whole\n   * purpose of this component though.\n   */\n  messageProps?: PropsWithRef<\n    FormMessageProps & Partial<FormMessageInputLengthCounterProps>,\n    HTMLDivElement\n  >;\n\n  /**\n   * Any props (and an optional ref) to provide to the `<div>` surrounding the\n   * children and `FormMessage` component.\n   *\n   * Note: This will not be used if the `messageProps` are not provided since\n   * only the `children` will be returned without the container.\n   */\n  messageContainerProps?: PropsWithRef<\n    HTMLAttributes<HTMLDivElement>,\n    HTMLDivElement\n  >;\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface LabelClassNameOptions {\n  className?: string;\n\n  /**\n   * Set this to `true` to remove the `gap` style from the label.\n   *\n   * @see `$label-gap`\n   * @defaultValue `false`\n   */\n  gap?: boolean;\n\n  /**\n   * Set this to `true` when the parent `TextFieldContainer` has the `dense`\n   * spec enabled. This updates the floating styles to match the smaller height.\n   *\n   * @defaultValue `false`\n   */\n  dense?: boolean;\n\n  /**\n   * Set this to `true` to update the label's color to the error color.\n   *\n   * @see `$error-color`\n   * @defaultValue `false`\n   */\n  error?: boolean;\n\n  /**\n   * Set this to `true` to update the label's color to the active color.\n   *\n   * @see `$active-color`\n   * @defaultValue `false`\n   */\n  active?: boolean;\n\n  /**\n   * Set this to `true` if the label should gain `flex-direction: column`\n   * styling.\n   *\n   * @defaultValue `false`\n   */\n  stacked?: boolean;\n\n  /**\n   * Set this to `true` to update the label's color to be the disabled color.\n   *\n   * @see `$disabled-color`\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n\n  /**\n   * Set this to true when label can floating above an input, textarea, or\n   * select inside of a `TextFieldContainer`.\n   *\n   * @defaultValue `false`\n   */\n  floating?: boolean;\n\n  /**\n   * Set this to true when label is currently floating above an input,\n   * textarea, or selected inside of a `TextFieldContainer`.\n   *\n   * @see {@link active}\n   * @defaultValue `active`\n   */\n  floatingActive?: boolean;\n\n  /**\n   * Set this to `true` to gain `flex-direction: row-reversed` styling. If the\n   * {@link stacked} prop is also `true`, `flex-direction: column-reversed` will\n   * be applied.\n   *\n   * @defaultValue `false`\n   */\n  reversed?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  inactive?: boolean;\n}\n\nexport interface LabelProps\n  extends LabelHTMLAttributes<HTMLLabelElement>,\n    LabelClassNameOptions {}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface ConfigurableTextFieldAddonProps\n  extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Boolean if the addon should be presentational only and prevent pointer\n   * events.\n   *\n   * @defaultValue `false`\n   */\n  pointerEvents?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0 Added support for `leftAddonProps` and\n * `rightAddonProps`.\n */\nexport interface TextFieldContainerOptions\n  extends FormThemeOptions,\n    FormComponentStates {\n  /**\n   * Set this to `true` to enable the dense spec which reduces the height.\n   *\n   * @defaultValue `false`\n   */\n  dense?: boolean;\n\n  /**\n   * Set this to `true` to change the style from `display: flex` to\n   * `display: inline-flex`.\n   *\n   * @defaultValue `false`\n   */\n  inline?: boolean;\n\n  /**\n   * Set this to `true` if this component should stretch to fill a flex or grid\n   * container using `flex: 1 1 auto`.\n   *\n   * @defaultValue `false`\n   */\n  stretch?: boolean;\n\n  /**\n   * This should generally be an icon or a button that will be placed before the\n   * `TextField` or `TextArea`.\n   */\n  leftAddon?: ReactNode;\n\n  /**\n   * Any additional props to pass to the `<span>` surrounding the {@link leftAddon}.\n   *\n   * @remarks \\@since 6.0.0\n   */\n  leftAddonProps?: PropsWithRef<\n    ConfigurableTextFieldAddonProps,\n    HTMLSpanElement\n  >;\n\n  /**\n   * @see {@link TextFieldAddonProps.disabled}\n   *\n   * @defaultValue `false`\n   */\n  disableLeftAddonStyles?: boolean;\n\n  /**\n   * This should generally be an icon or a button that will be placed after the\n   * `TextField` or `TextArea`.\n   */\n  rightAddon?: ReactNode;\n\n  /**\n   * Any additional props to pass to the `<span>` surrounding the {@link rightAddon}.\n   *\n   * @remarks \\@since 6.0.0\n   */\n  rightAddonProps?: PropsWithRef<\n    ConfigurableTextFieldAddonProps,\n    HTMLSpanElement\n  >;\n\n  /**\n   * @see {@link TextFieldAddonProps.disabled}\n   *\n   * @defaultValue `false`\n   */\n  disableRightAddonStyles?: boolean;\n}\n\nexport interface FormFieldOptions\n  extends TextFieldContainerOptions,\n    FormMessageContainerExtension {\n  /**\n   * An optional floating label to use with the text field. A label is generally\n   * recommended for accessibility, but can be omitted if an `aria-label` or\n   * `aria-labelledby` is provided.\n   */\n  label?: ReactNode;\n\n  /**\n   * Any additional props and/or ref that should be passed to the `<label>`\n   * element when a {@link label} is provided.\n   *\n   * @example\n   * ```tsx\n   * labelProps={{\n   *   ref: labelRef,\n   *   style: {},\n   *   className: \"some-custom-class-name\",\n   *   onClick: (event) => {\n   *     // do something\n   *   }\n   * }}\n   * ```\n   */\n  labelProps?: PropsWithRef<LabelProps, HTMLLabelElement>;\n\n  /**\n   * A convenience prop to apply a custom style to a label. This is equivalent\n   * to:\n   *\n   * ```ts\n   * labelProps={{\n   *   style: // some style here\n   * }}\n   * ```\n   */\n  labelStyle?: CSSProperties;\n\n  /**\n   * A convenience prop to apply a custom className to a label. This is\n   * equivalent to:\n   *\n   * ```ts\n   * labelProps={{\n   *   className: \"some-class-name\",\n   * }}\n   * ```\n   */\n  labelClassName?: string;\n}\n"],"names":[],"mappings":"AAihBA,WAmDC"}
+{"version":3,"sources":["../../src/form/types.ts"],"sourcesContent":["import {\n  type CSSProperties,\n  type HTMLAttributes,\n  type InputHTMLAttributes,\n  type LabelHTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { type PropsWithRef } from \"../types.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-form-active-color\"?: string;\n    \"--rmd-form-focus-color\"?: string;\n  }\n}\n\n/**\n * The supported themes for the `TextField`, `TextArea`, and `Select`\n * components.\n *\n * - \"none\" - display as an unstyled text field without any border or background\n *   colors.\n * - \"underline\" - display with only an underline that gains the form active\n *   color and animates from the left or right to the other side when the field\n *   is focused.\n * - \"filled\" - an extension of the `\"underline\"` state that will also have a\n *   slightly dark background applied.\n * - \"outline\" - outlines the entire text field in a border and applies the\n *   active color as box shadow when the field is focused.\n */\nexport type FormTheme = \"none\" | \"underline\" | \"filled\" | \"outline\";\n\n/**\n * The direction that the underline should appear from when the theme is\n * `\"underline\"` or `\"filled\"`.\n */\nexport type FormUnderlineDirection = \"left\" | \"center\" | \"right\";\n\nexport interface FormThemeOptions {\n  /**\n   * The current theme type.\n   *\n   * @defaultValue `\"outline\"`\n   */\n  theme?: FormTheme;\n\n  /**\n   * The current underline direction.\n   *\n   * @defaultValue `\"left\"`\n   */\n  underlineDirection?: FormUnderlineDirection;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface FormConfiguration extends Required<FormThemeOptions> {\n  /**\n   * Set this to `false` if the `$disable-uncontrolled-input-toggles` variable\n   * is set to `true` in the Sass configuration.\n   *\n   * Since the `checked` state only changes for the radio that has been clicked,\n   * the previously checked radio would also be shown as checked with no way of\n   * fixing it without controlling the radio component. When this flag is\n   * enabled, the checked icons and state are handled through css instead of\n   * `useState`.\n   *\n   * @defaultValue `true`\n   */\n  uncontrolledToggles: boolean;\n}\n\nexport interface FormComponentStates {\n  /** @defaultValue `false` */\n  error?: boolean;\n\n  /** @defaultValue `false` */\n  active?: boolean;\n\n  /** @defaultValue `false` */\n  disabled?: boolean;\n\n  /** @defaultValue `false` */\n  readOnly?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n * @see https://html.spec.whatwg.org/multipage/forms.html#autofill\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values\n */\nexport type AutocompleteValue =\n  | \"off\"\n  | \"on\"\n  | \"name\"\n  | \"honorific-prefix\"\n  | \"given-name\"\n  | \"additional-name\"\n  | \"family-name\"\n  | \"honorific-suffix\"\n  | \"nickname\"\n  | \"email\"\n  | \"username\"\n  | \"new-password\"\n  | \"current-password\"\n  | \"one-time-code\"\n  | \"organization-title\"\n  | \"organization\"\n  | \"street-address\"\n  | \"address-line1\"\n  | \"address-line2\"\n  | \"address-line3\"\n  | \"address-level1\"\n  | \"address-level2\"\n  | \"address-level3\"\n  | \"address-level4\"\n  | \"country\"\n  | \"country-name\"\n  | \"postal-code\"\n  | \"cc-name\"\n  | \"cc-given-name\"\n  | \"cc-additional-name\"\n  | \"cc-family-name\"\n  | \"cc-number\"\n  | \"cc-exp\"\n  | \"cc-exp-month\"\n  | \"cc-exp-year\"\n  | \"cc-csc\"\n  | \"cc-type\"\n  | \"transaction-currency\"\n  | \"transaction-amount\"\n  | \"language\"\n  | \"bday\"\n  | \"bday-day\"\n  | \"bday-month\"\n  | \"bday-year\"\n  | \"sex\"\n  | \"tel\"\n  | \"tel-country-code\"\n  | \"tel-national\"\n  | \"tek-area-code\"\n  | \"tel-local\"\n  | \"tel-extension\"\n  | \"impp\"\n  | \"url\"\n  | \"photo\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface UserAgentAutocompleteProps {\n  /**\n   * Set this to enable additional autocompletion suggestions for a user for\n   * different form fields. Using this prop will update the\n   * {@link UserAgentAutocompleteProps.name} and {@link autoComplete} to default to\n   * this value.\n   *\n   * @example\n   * ```tsx\n   * <Form>\n   *   <TextField\n   *     label=\"Enter your credit card number\"\n   *     autoCompleteValue=\"cc-number\"\n   *     {...creditCardProps}\n   *     inputMode=\"number\"\n   *   />\n   *   <TextField\n   *     label=\"Name on card\"\n   *     autoCompleteValue=\"cc-name\"\n   *     {...creditCardNameProps}\n   *   />\n   *   <TextField\n   *     label=\"Security code\"\n   *     autoCompleteValue=\"cc-csc\"\n   *     {...securityCodeProps}\n   *     inputMode=\"number\"\n   *   />\n   *   <Button type=\"submit\">Submit</Button>\n   * </Form>\n   * ```\n   *\n   * @see https://html.spec.whatwg.org/multipage/forms.html#autofill\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values\n   * @see {@link AutocompleteValue}\n   * @see {@link autoComplete}\n   * @see {@link UserAgentAutocompleteProps.name}\n   */\n  autoCompleteValue?: AutocompleteValue;\n\n  /**\n   * @see {@link autoCompleteValue}\n   * @defaultValue `autoCompleteValue`\n   */\n  autoComplete?: InputHTMLAttributes<HTMLInputElement>[\"autoComplete\"];\n\n  /**\n   * @see {@link autoCompleteValue}\n   * @defaultValue `autoCompleteValue`\n   */\n  name?: string;\n}\n\nexport interface FormMessageClassNameOptions {\n  className?: string;\n\n  /**\n   * Boolean if the message should gain the error state which changes the text\n   * color to `red` by default.\n   *\n   * @defaultValue `false`\n   */\n  error?: boolean;\n\n  /**\n   * The current theme for the related text field. This is really only used to\n   * match the current horizontal padding of the text field.\n   *\n   * @defaultValue `\"outline\"`\n   */\n  theme?: FormTheme;\n}\n\nexport interface FormMessageProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"minLength\" | \"maxLength\">,\n    FormMessageClassNameOptions {\n  /**\n   * If this component is acting as a form-level error message handler, the role\n   * should be updated to be `\"alert\"` for additional accessibility.\n   *\n   * Note: when creating a form-level error message handler, the messages should\n   * no longer appear as the user types and instead once the user tries to\n   * submit the form. Having an alert role disrupts normal screen reader\n   * behavior by immediately reading changes in this element.\n   *\n   * @defaultValue `undefined`\n   */\n  role?: \"alert\";\n\n  /**\n   * Boolean if the children should no longer be wrapped in a `<p>` tag. This\n   * should normally only be disabled if using a custom error message wrapper or\n   * the counter behavior is not being used. To get correct alignments of the\n   * message and counter, the `children` must be wrapped in some element and\n   * cannot be plain test.\n   *\n   * Note: this will always be considered `true` if the `role` is set to\n   * `\"alert\"`.\n   *\n   * @defaultValue `false`\n   */\n  disableWrap?: boolean;\n\n  /**\n   * An optional style to apply to the `<p>` tag that surrounds the `children`.\n   * This will not be used if `role=\"alert\"` or `disableWrap={true}`.\n   */\n  messageStyle?: CSSProperties;\n\n  /**\n   * An optional className to apply to the `<p>` tag that surrounds the\n   * `children`. This will not be used if `role=\"alert\"` or\n   * `disableWrap={true}`.\n   */\n  messageClassName?: string;\n}\n\n/**\n * Props that are used to automatically add a counter for the remaining letters\n * available for the text field. The counter will always be created to the right\n * of the optional message.\n *\n * The counter is really a simple string of: `${length} / ${maxLength}`.\n *\n * If you need additional customization, it is recommended to create your own\n * implementation such as:\n *\n * ```tsx\n * <FormMessage>\n *   {errorMessage}\n *   <MyCounter {...props} />\n * </FormMessage>\n * ```\n *\n * Note: this should not be used alongside form-level messages.\n *\n * @remarks \\@since 2.9.0 Renamed from `FormMessageCounterProps` to\n * `FormMessageInputLengthCounterProps` since a `FormMessageCounter` component\n * was added\n */\nexport interface FormMessageInputLengthCounterProps {\n  /**\n   * The current length of the value in the related text field.\n   */\n  length: number;\n\n  /**\n   * The max length allowed for the value in the related text field.\n   */\n  maxLength: number;\n\n  /**\n   * An optional style to apply to the counter wrapper element.\n   */\n  counterStyle?: CSSProperties;\n\n  /**\n   * An optional className to apply to the counter wrapper element.\n   */\n  counterClassName?: string;\n}\n\nexport interface FormMessageWithCounterProps\n  extends FormMessageProps,\n    FormMessageInputLengthCounterProps {}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface FormMessageWithoutCounterProps extends FormMessageProps {\n  length?: never;\n  maxLength?: never;\n  counterStyle?: never;\n  counterClassName?: never;\n}\n\nexport interface FormMessageContainerExtension {\n  /**\n   * If the extension doesn't actually want to render the `FormMessage`\n   * component, these props are optional. It kind of eliminates the whole\n   * purpose of this component though.\n   */\n  messageProps?: PropsWithRef<\n    FormMessageProps & Partial<FormMessageInputLengthCounterProps>,\n    HTMLDivElement\n  >;\n\n  /**\n   * Any props (and an optional ref) to provide to the `<div>` surrounding the\n   * children and `FormMessage` component.\n   *\n   * Note: This will not be used if the `messageProps` are not provided since\n   * only the `children` will be returned without the container.\n   */\n  messageContainerProps?: PropsWithRef<\n    HTMLAttributes<HTMLDivElement>,\n    HTMLDivElement\n  >;\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface LabelClassNameOptions {\n  className?: string;\n\n  /**\n   * Set this to `true` to remove the `gap` style from the label.\n   *\n   * @see `$label-gap`\n   * @defaultValue `false`\n   */\n  gap?: boolean;\n\n  /**\n   * Set this to `true` when the parent `TextFieldContainer` has the `dense`\n   * spec enabled. This updates the floating styles to match the smaller height.\n   *\n   * @defaultValue `false`\n   */\n  dense?: boolean;\n\n  /**\n   * Set this to `true` to update the label's color to the error color.\n   *\n   * @see `$error-color`\n   * @defaultValue `false`\n   */\n  error?: boolean;\n\n  /**\n   * Set this to `true` to update the label's color to the active color.\n   *\n   * @see `$active-color`\n   * @defaultValue `false`\n   */\n  active?: boolean;\n\n  /**\n   * Set this to `true` if the label should gain `flex-direction: column`\n   * styling.\n   *\n   * @defaultValue `false`\n   */\n  stacked?: boolean;\n\n  /**\n   * Set this to `true` to update the label's color to be the disabled color.\n   *\n   * @see `$disabled-color`\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n\n  /**\n   * Set this to true when label can floating above an input, textarea, or\n   * select inside of a `TextFieldContainer`.\n   *\n   * @defaultValue `false`\n   */\n  floating?: boolean;\n\n  /**\n   * Set this to true when label is currently floating above an input,\n   * textarea, or selected inside of a `TextFieldContainer`.\n   *\n   * @see {@link active}\n   * @defaultValue `active`\n   */\n  floatingActive?: boolean;\n\n  /**\n   * Set this to `true` to gain `flex-direction: row-reversed` styling. If the\n   * {@link stacked} prop is also `true`, `flex-direction: column-reversed` will\n   * be applied.\n   *\n   * @defaultValue `false`\n   */\n  reversed?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  inactive?: boolean;\n}\n\nexport interface LabelProps\n  extends LabelHTMLAttributes<HTMLLabelElement>,\n    LabelClassNameOptions {}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface ConfigurableTextFieldAddonProps\n  extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Boolean if the addon should be presentational only and prevent pointer\n   * events.\n   *\n   * @defaultValue `false`\n   */\n  pointerEvents?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0 Added support for `leftAddonProps` and\n * `rightAddonProps`.\n */\nexport interface TextFieldContainerOptions\n  extends FormThemeOptions,\n    FormComponentStates {\n  /**\n   * Set this to `true` to enable the dense spec which reduces the height.\n   *\n   * @defaultValue `false`\n   */\n  dense?: boolean;\n\n  /**\n   * Set this to `true` to change the style from `display: flex` to\n   * `display: inline-flex`.\n   *\n   * @defaultValue `false`\n   */\n  inline?: boolean;\n\n  /**\n   * Set this to `true` if this component should stretch to fill a flex or grid\n   * container using `flex: 1 1 auto`.\n   *\n   * @defaultValue `false`\n   */\n  stretch?: boolean;\n\n  /**\n   * This should generally be an icon or a button that will be placed before the\n   * `TextField` or `TextArea`.\n   */\n  leftAddon?: ReactNode;\n\n  /**\n   * Any additional props to pass to the `<span>` surrounding the {@link leftAddon}.\n   *\n   * @remarks \\@since 6.0.0\n   */\n  leftAddonProps?: PropsWithRef<\n    ConfigurableTextFieldAddonProps,\n    HTMLSpanElement\n  >;\n\n  /**\n   * @see {@link TextFieldAddonProps.disabled}\n   *\n   * @defaultValue `false`\n   */\n  disableLeftAddonStyles?: boolean;\n\n  /**\n   * This should generally be an icon or a button that will be placed after the\n   * `TextField` or `TextArea`.\n   */\n  rightAddon?: ReactNode;\n\n  /**\n   * Any additional props to pass to the `<span>` surrounding the {@link rightAddon}.\n   *\n   * @remarks \\@since 6.0.0\n   */\n  rightAddonProps?: PropsWithRef<\n    ConfigurableTextFieldAddonProps,\n    HTMLSpanElement\n  >;\n\n  /**\n   * @see {@link TextFieldAddonProps.disabled}\n   *\n   * @defaultValue `false`\n   */\n  disableRightAddonStyles?: boolean;\n}\n\nexport interface FormFieldOptions\n  extends TextFieldContainerOptions,\n    FormMessageContainerExtension {\n  /**\n   * An optional floating label to use with the text field. A label is generally\n   * recommended for accessibility, but can be omitted if an `aria-label` or\n   * `aria-labelledby` is provided.\n   */\n  label?: ReactNode;\n\n  /**\n   * Any additional props and/or ref that should be passed to the `<label>`\n   * element when a {@link label} is provided.\n   *\n   * @example\n   * ```tsx\n   * labelProps={{\n   *   ref: labelRef,\n   *   style: {},\n   *   className: \"some-custom-class-name\",\n   *   onClick: (event) => {\n   *     // do something\n   *   }\n   * }}\n   * ```\n   */\n  labelProps?: PropsWithRef<LabelProps, HTMLLabelElement>;\n\n  /**\n   * A convenience prop to apply a custom style to a label. This is equivalent\n   * to:\n   *\n   * ```ts\n   * labelProps={{\n   *   style: // some style here\n   * }}\n   * ```\n   */\n  labelStyle?: CSSProperties;\n\n  /**\n   * A convenience prop to apply a custom className to a label. This is\n   * equivalent to:\n   *\n   * ```ts\n   * labelProps={{\n   *   className: \"some-class-name\",\n   * }}\n   * ```\n   */\n  labelClassName?: string;\n}\n"],"names":[],"mappings":"AAihBA,WAmDC"}

package/dist/form/useCombobox.d.ts

@@ -0,0 +1,157 @@
+import { type FocusEventHandler, type KeyboardEventHandler, type MouseEventHandler, type Ref, type RefCallback, type RefObject } from "react";
+import { type MenuProps } from "../menu/Menu.js";
+import { type MenuSheetConfigurableProps } from "../menu/MenuSheet.js";
+import { type GetDefaultFocusedIndex, type GetFocusableElements, type KeyboardMovementExtensionData, type KeyboardMovementProviderImplementation, type KeyboardMovementProviderOptions } from "../movement/types.js";
+import { type PositionAnchor, type PositionWidth } from "../positioning/types.js";
+import { type TransitionCallbacks } from "../transition/types.js";
+import { type NonNullMutableRef, type UseStateInitializer, type UseStateSetter } from "../types.js";
+/**
+ * @remarks \@since 6.0.0
+ */
+export declare const getNonDisabledOptions: (container: HTMLElement) => readonly HTMLElement[];
+/**
+ * @remarks \@since 6.0.0
+ */
+export type SupportedComboboxPopup = "listbox" | "grid" | "dialog";
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface ComboboxKeyboardMovementData<E extends HTMLElement = HTMLInputElement> extends KeyboardMovementExtensionData<E> {
+    show(): void;
+    hide(): void;
+    visible: boolean;
+    focusLast: NonNullMutableRef<boolean>;
+}
+/**
+ * @remarks \@since 6.0.0
+ */
+export type ExtendComboboxKeyDown<E extends HTMLElement = HTMLInputElement> = (movementData: ComboboxKeyboardMovementData<E>) => void;
+/**
+ * @remarks \@since 6.0.0
+ */
+export type ComboboxKeyboardMovementOptions<ComboboxEl extends HTMLElement = HTMLInputElement> = Pick<KeyboardMovementProviderOptions<ComboboxEl>, "onClick" | "onFocus" | "onKeyDown" | "disabled" | "loopable" | "searchable" | "onFocusChange" | "isNegativeOneAllowed">;
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface BaseComboboxOptions<ComboboxEl extends HTMLElement = HTMLInputElement, PopupEl extends HTMLElement = HTMLElement> extends ComboboxKeyboardMovementOptions<ComboboxEl> {
+    /**
+     * This is the {@link InputHTMLAttributes.form} attribute and is used to
+     * attempt submitting a form when the enter key is pressed.
+     */
+    form?: string;
+    /**
+     * @defaultValue `"combobox-popup-" + useId()`
+     */
+    popupId?: string;
+    popupRef?: Ref<PopupEl>;
+    /**
+     * @defaultValue `"combobox-" + useId()`
+     */
+    comboboxId?: string;
+    comboboxRef?: Ref<ComboboxEl>;
+    /**
+     * @defaultValue `"listbox"`
+     */
+    popup?: "listbox" | "grid" | "dialog";
+    /**
+     * @defaultValue `false`
+     */
+    defaultVisible?: UseStateInitializer<boolean>;
+    extendKeyDown?: ExtendComboboxKeyDown<ComboboxEl>;
+    /**
+     * @defaultValue {@link getNonDisabledOptions}
+     */
+    getFocusableElements?: GetFocusableElements;
+    getDefaultFocusedIndex?: GetDefaultFocusedIndex;
+}
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface ComboboxOptions<ComboboxEl extends HTMLElement = HTMLInputElement, PopupEl extends HTMLElement = HTMLElement> extends BaseComboboxOptions<ComboboxEl, PopupEl> {
+    getEnterDefaultFocusedIndex(options: {
+        focusLast: boolean;
+        focusables: readonly HTMLElement[];
+        currentFocusIndex: number;
+    }): number;
+}
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface ComboboxWidgetProps<ComboboxEl extends HTMLElement = HTMLInputElement> {
+    "aria-controls": string;
+    "aria-disabled": true | undefined;
+    "aria-expanded": boolean;
+    "aria-haspopup": SupportedComboboxPopup;
+    id: string;
+    ref: RefCallback<ComboboxEl>;
+    role: "combobox";
+    onClick: MouseEventHandler<ComboboxEl>;
+    onFocus: FocusEventHandler<ComboboxEl>;
+    onKeyDown: KeyboardEventHandler<ComboboxEl>;
+}
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface ComboboxWidgetPopupProps<PopupEl extends HTMLElement = HTMLElement> {
+    id: string;
+    ref: RefCallback<PopupEl>;
+    role: "listbox" | "dialog" | "grid";
+}
+/**
+ * @remarks \@since 6.0.0
+ */
+export type ComboboxTransitionCallbacks = Pick<TransitionCallbacks, "onEntering" | "onEntered" | "onExiting" | "onExited">;
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface ComboboxTransitionOptions extends ComboboxTransitionCallbacks {
+    disableTransition?: boolean;
+}
+/**
+ * @remarks \@since 6.0.0
+ */
+export type ConfigurableComboboxMenuProps = Partial<Omit<MenuProps, "fixedTo" | "visible" | "onRequestClose" | keyof ComboboxWidgetPopupProps>>;
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface ProvidedComboboxMenuProps<ComboboxEl extends HTMLElement = HTMLInputElement, PopupEl extends HTMLElement = HTMLDivElement> extends Required<ComboboxTransitionCallbacks>, ComboboxWidgetPopupProps<PopupEl> {
+    visible: boolean;
+    onRequestClose(): void;
+    /** @defaultValue `"min"` */
+    width: PositionWidth;
+    /** @defaultValue `BELOW_CENTER_ANCHOR` */
+    anchor: PositionAnchor;
+    fixedTo: RefObject<ComboboxEl>;
+    sheetProps: MenuSheetConfigurableProps & Required<ComboboxTransitionCallbacks>;
+}
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface ComboboxMenuProps<ComboboxEl extends HTMLElement = HTMLInputElement, PopupEl extends HTMLElement = HTMLDivElement> extends Omit<ConfigurableComboboxMenuProps, keyof ProvidedComboboxMenuProps>, ProvidedComboboxMenuProps<ComboboxEl, PopupEl> {
+}
+/**
+ * Since the combobox usually uses the `Menu` as a popup element, this is a
+ * helper util to create the required props and merge any additional props
+ * with reasonable defaults.
+ */
+export type ComboboxGetMenuProps<ComboboxEl extends HTMLElement = HTMLInputElement, PopupEl extends HTMLElement = HTMLDivElement> = (props?: ConfigurableComboboxMenuProps) => ComboboxMenuProps<ComboboxEl, PopupEl>;
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface ComboboxImplementation<ComboboxEl extends HTMLElement = HTMLInputElement, PopupEl extends HTMLElement = HTMLElement> extends KeyboardMovementProviderImplementation<ComboboxEl> {
+    show(): void;
+    hide(): void;
+    visible: boolean;
+    setVisible: UseStateSetter<boolean>;
+    focusLast: NonNullMutableRef<boolean>;
+    popupRef: RefObject<PopupEl>;
+    popupProps: ComboboxWidgetPopupProps<PopupEl>;
+    comboboxRef: RefObject<ComboboxEl>;
+    comboboxProps: ComboboxWidgetProps<ComboboxEl>;
+    getMenuProps: ComboboxGetMenuProps<ComboboxEl, PopupEl>;
+    getTransitionCallbacks(options: ComboboxTransitionOptions): Required<ComboboxTransitionCallbacks>;
+}
+/**
+ * @remarks \@since 6.0.0
+ */
+export declare function useCombobox<ComboboxEl extends HTMLElement = HTMLInputElement, PopupEl extends HTMLElement = HTMLElement>(options: ComboboxOptions<ComboboxEl, PopupEl>): ComboboxImplementation<ComboboxEl, PopupEl>;