@react-md/core 6.2.1 → 6.3.1

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\";\n\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 * @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\n/**\n * @since 6.0.0\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 * @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 AutocompleteAttributeValue =\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 * @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 AutocompleteAttributeValue}\n   * @see {@link autoComplete}\n   * @see {@link UserAgentAutocompleteProps.name}\n   */\n  autoCompleteValue?: AutocompleteAttributeValue;\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 * @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 * @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  >;\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<HTMLAttributes<HTMLDivElement>>;\n}\n\n/** @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 * @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 * @since 6.0.0 Split props into `ConfigurableTextFieldAddonProps`\n */\nexport interface TextFieldAddonProps extends ConfigurableTextFieldAddonProps {\n  /**\n   * @defaultValue `false`\n   */\n  after?: boolean;\n\n  /**\n   * Set this to `true` if the addon should not be wrapped in a `<span>` with some\n   * additional styles.\n   *\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n}\n\n/**\n * @since 6.0.0 Renamed the `leftChildren` / `rightChildren` props to\n * `leftAddon` / `rightAddon`. Renamed `isLeftAddon` / `isRightAddon` to\n * `disableLeftAddonStyles` / `disableRightAddonStyles`. Added\n * `leftAddonProps` / `rightAddonProps`. Removed `stretch`\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   * 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   * @since 6.0.0\n   */\n  leftAddonProps?: PropsWithRef<ConfigurableTextFieldAddonProps>;\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   * @since 6.0.0\n   */\n  rightAddonProps?: PropsWithRef<ConfigurableTextFieldAddonProps>;\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>;\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":"AAuhBA,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\";\n\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    // NOTE: The label properties are in this file since all label types are\n    // in this file. If they are able to be moved to labelStyles or Label and\n    // the compiled `.d.ts` includes the types from those files, this can be\n    // moved.\n    \"--rmd-label-floating-x\"?: string | number;\n    \"--rmd-label-floating-y\"?: string | number;\n    \"--rmd-label-floating-active-x\"?: string | number;\n    \"--rmd-label-floating-active-y\"?: string | number;\n    \"--rmd-label-active-padding\"?: string | number;\n    \"--rmd-label-active-background-color\"?: string;\n\n    // NOTE: The text field properties are in this file since there are no\n    // typedefs included from `TextFieldContainer` or\n    // `textFieldContainerStyles`.\n    \"--rmd-text-field-addon-top\"?: string | number;\n    \"--rmd-text-field-addon-spacing\"?: string | number;\n    \"--rmd-text-field-addon-margin-top\"?: string | number;\n    \"--rmd-text-field-addon-left-offset\"?: string | number;\n    \"--rmd-text-field-height\"?: string | number;\n    \"--rmd-text-field-padding-left\"?: string | number;\n    \"--rmd-text-field-padding-right\"?: string | number;\n    \"--rmd-text-field-padding-top\"?: string | number;\n    \"--rmd-text-field-border-color\"?: string;\n    \"--rmd-text-field-hover-border-color\"?: string;\n    \"--rmd-text-field-filled-color\"?: string;\n    \"--rmd-text-field-filled-padding\"?: string | number;\n    \"--rmd-text-field-outlined-padding\"?: string | number;\n    \"--rmd-text-field-underlined-padding\"?: string | number;\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 * @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\n/**\n * @since 6.0.0\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 * @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 AutocompleteAttributeValue =\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 * @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 AutocompleteAttributeValue}\n   * @see {@link autoComplete}\n   * @see {@link UserAgentAutocompleteProps.name}\n   */\n  autoCompleteValue?: AutocompleteAttributeValue;\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   * Optional props to provide to inline counter.\n   *\n   * @since 6.3.0\n   */\n  counterProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>>;\n\n  /**\n   * Optional props to apply to the `<p>` tag that surrounds the `children`.\n   * This will not be used if `role=\"alert\"` or `disableWrap={true}`.\n   *\n   * @since 6.3.0\n   */\n  messageProps?: PropsWithRef<HTMLAttributes<HTMLParagraphElement>>;\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 * @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 * @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  >;\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<HTMLAttributes<HTMLDivElement>>;\n}\n\n/** @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 * @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 * @since 6.0.0 Split props into `ConfigurableTextFieldAddonProps`\n */\nexport interface TextFieldAddonProps extends ConfigurableTextFieldAddonProps {\n  /**\n   * @defaultValue `false`\n   */\n  after?: boolean;\n\n  /**\n   * Set this to `true` if the addon should not be wrapped in a `<span>` with some\n   * additional styles.\n   *\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n}\n\n/**\n * @since 6.0.0 Renamed the `leftChildren` / `rightChildren` props to\n * `leftAddon` / `rightAddon`. Renamed `isLeftAddon` / `isRightAddon` to\n * `disableLeftAddonStyles` / `disableRightAddonStyles`. Added\n * `leftAddonProps` / `rightAddonProps`. Removed `stretch`\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   * 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   * @since 6.0.0\n   */\n  leftAddonProps?: PropsWithRef<ConfigurableTextFieldAddonProps>;\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   * @since 6.0.0\n   */\n  rightAddonProps?: PropsWithRef<ConfigurableTextFieldAddonProps>;\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>;\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":"AAmkBA,WAmDC"}

package/dist/form/useCombobox.d.ts

@@ -20,7 +20,11 @@ export interface ComboboxKeyboardMovementData<E extends HTMLElement = HTMLInputE
     show: () => void;
     hide: () => void;
     visible: boolean;
-    focusLast: NonNullMutableRef<boolean>;
+    /**
+     * @since 6.3.0 Renamed from `focusLast` to `focusLastRef` to support the new
+     * actions.
+     */
+    focusLastRef: NonNullMutableRef<boolean>;
 }
 /**
  * @since 6.0.0
@@ -168,7 +172,7 @@ export interface ComboboxMenuProps<PopupEl extends HTMLElement = HTMLDivElement>
 /**
  * @since 6.0.0
  */
-export interface ComboboxImplementation<ComboboxEl extends HTMLElement = HTMLInputElement, PopupEl extends HTMLElement = HTMLElement> extends KeyboardMovementProviderImplementation<ComboboxEl> {
+export interface ComboboxImplementation<ComboboxEl extends HTMLElement = HTMLInputElement, PopupEl extends HTMLElement = HTMLElement> extends Omit<KeyboardMovementProviderImplementation<ComboboxEl>, "nodeRef"> {
     show: () => void;
     hide: () => void;
     visible: boolean;

package/dist/form/useCombobox.js

@@ -37,10 +37,10 @@ const noop = ()=>{
     ]);
     const popupId = useEnsuredId(propPopupId, "combobox-popup");
     const comboboxId = useEnsuredId(propComboboxId, "combobox");
-    const [comboboxRef, comboboxRefCallback] = useEnsuredRef(propComboboxRef);
     const [popupRef, popupRefCallback] = useEnsuredRef(propPopupRef);
-    const focusLast = useRef(false);
-    const { movementProps, movementContext, currentFocusIndex, activeDescendantId, setActiveDescendantId } = useKeyboardMovementProvider({
+    const focusLastRef = useRef(false);
+    const { nodeRef: comboboxRef, movementProps, movementContext, currentFocusIndex, activeDescendantId, setActiveDescendantId } = useKeyboardMovementProvider({
+        ref: propComboboxRef,
         onFocus,
         onKeyDown,
         onClick (event) {
@@ -56,7 +56,7 @@ const noop = ()=>{
                 show,
                 hide,
                 visible,
-                focusLast
+                focusLastRef
             });
             const { event } = movementData;
             if (event.isPropagationStopped()) {
@@ -84,7 +84,7 @@ const noop = ()=>{
                 case "ArrowDown":
                     event.preventDefault();
                     event.stopPropagation();
-                    focusLast.current = event.key === "ArrowUp";
+                    focusLastRef.current = event.key === "ArrowUp";
                     show();
                     break;
                 case "Enter":
@@ -120,7 +120,7 @@ const noop = ()=>{
         hide,
         visible,
         setVisible,
-        focusLast,
+        focusLast: focusLastRef,
         popupRef,
         popupProps,
         comboboxRef,
@@ -131,7 +131,6 @@ const noop = ()=>{
             "aria-expanded": visible,
             "aria-haspopup": popup,
             id: comboboxId,
-            ref: comboboxRefCallback,
             role: "combobox"
         },
         movementProps,
@@ -162,11 +161,11 @@ const noop = ()=>{
                 }
                 const focusables = getFocusableElements(popup, true);
                 const index = getEnterDefaultFocusedIndex({
-                    focusLast: focusLast.current,
+                    focusLast: focusLastRef.current,
                     focusables,
                     currentFocusIndex: currentFocusIndex.current
                 });
-                focusLast.current = false;
+                focusLastRef.current = false;
                 currentFocusIndex.current = index;
                 const option = focusables[index];
                 if (!option) {

package/dist/form/useCombobox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/useCombobox.ts"],"sourcesContent":["\"use client\";\n\nimport {\n  type FocusEventHandler,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  type InputHTMLAttributes,\n  type KeyboardEventHandler,\n  type MouseEventHandler,\n  type Ref,\n  type RefCallback,\n  type RefObject,\n  useCallback,\n  useRef,\n} from \"react\";\n\nimport { type MenuProps } from \"../menu/Menu.js\";\nimport { type MenuSheetConfigurableProps } from \"../menu/MenuSheet.js\";\nimport {\n  type GetDefaultFocusedIndex,\n  type GetFocusableElements,\n  type KeyboardMovementExtensionData,\n  type KeyboardMovementProviderImplementation,\n  type KeyboardMovementProviderOptions,\n} from \"../movement/types.js\";\nimport { useKeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\nimport { BELOW_CENTER_ANCHOR } from \"../positioning/constants.js\";\nimport {\n  type PositionAnchor,\n  type PositionWidth,\n} from \"../positioning/types.js\";\nimport { getTransitionCallbacks } from \"../transition/getTransitionCallbacks.js\";\nimport { type TransitionCallbacks } from \"../transition/types.js\";\nimport {\n  type NonNullMutableRef,\n  type UseStateInitializer,\n  type UseStateSetter,\n} from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { useEnsuredState } from \"../useEnsuredState.js\";\nimport { tryToSubmitRelatedForm } from \"./utils.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @since 6.0.0\n */\nexport const getNonDisabledOptions = (\n  container: HTMLElement\n): readonly HTMLElement[] => [\n  ...container.querySelectorAll<HTMLLIElement>(\n    '[role=\"option\"]:not([aria-disabled])'\n  ),\n];\n\n/**\n * @since 6.0.0\n */\nexport type SupportedComboboxPopup = \"listbox\" | \"grid\" | \"dialog\";\n\n/**\n * @since 6.0.0\n */\nexport interface ComboboxKeyboardMovementData<\n  E extends HTMLElement = HTMLInputElement,\n> extends KeyboardMovementExtensionData<E> {\n  show: () => void;\n  hide: () => void;\n  visible: boolean;\n  focusLast: NonNullMutableRef<boolean>;\n}\n\n/**\n * @since 6.0.0\n */\nexport type ExtendComboboxKeyDown<E extends HTMLElement = HTMLInputElement> = (\n  movementData: ComboboxKeyboardMovementData<E>\n) => void;\n\n/**\n * @since 6.0.0\n */\nexport type ComboboxKeyboardMovementOptions<\n  ComboboxEl extends HTMLElement = HTMLInputElement,\n> = Pick<\n  KeyboardMovementProviderOptions<ComboboxEl>,\n  | \"onClick\"\n  | \"onFocus\"\n  | \"onKeyDown\"\n  | \"disabled\"\n  | \"loopable\"\n  | \"searchable\"\n  | \"onFocusChange\"\n  | \"isNegativeOneAllowed\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport interface ComboboxVisibilityOptions {\n  /**\n   * This can be used to control the popup's visibility and **must** be used\n   * along with {@link setVisible}.\n   */\n  visible?: boolean;\n\n  /**\n   * Used to control the popup's visibility and should generally be a `useState`\n   * setter.\n   *\n   * @example Controlling the Visibility\n   * ```tsx\n   * const [visible, setVisible] = useState(false);\n   *\n   * useCombobox({\n   *   visible,\n   *   setVisible,\n   * });\n   * ```\n   */\n  setVisible?: UseStateSetter<boolean>;\n\n  /**\n   * Set this to `true` to have the combobox's popup visible by default.\n   *\n   * @defaultValue `false`\n   */\n  defaultVisible?: UseStateInitializer<boolean>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ConfigurableComboboxOptions<\n  ComboboxEl extends HTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends ComboboxKeyboardMovementOptions<ComboboxEl>,\n    ComboboxVisibilityOptions {\n  /**\n   * This is the {@link InputHTMLAttributes.form} attribute and is used to\n   * attempt submitting a form when the enter key is pressed.\n   */\n  form?: string;\n\n  /**\n   * @defaultValue `\"combobox-popup-\" + useId()`\n   */\n  popupId?: string;\n  popupRef?: Ref<PopupEl>;\n\n  /**\n   * @defaultValue `\"combobox-\" + useId()`\n   */\n  comboboxId?: string;\n  comboboxRef?: Ref<ComboboxEl>;\n\n  /**\n   * @defaultValue `\"listbox\"`\n   */\n  popup?: \"listbox\" | \"grid\" | \"dialog\";\n\n  /**\n   * @defaultValue `false`\n   */\n  multiselect?: boolean;\n\n  extendKeyDown?: ExtendComboboxKeyDown<ComboboxEl>;\n\n  /**\n   * @defaultValue {@link getNonDisabledOptions}\n   */\n  getFocusableElements?: GetFocusableElements;\n\n  getDefaultFocusedIndex?: GetDefaultFocusedIndex;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ComboboxGetEnterDefaultFocusedIndexOptions {\n  focusLast: boolean;\n  focusables: readonly HTMLElement[];\n  currentFocusIndex: number;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ComboboxOptions<\n  ComboboxEl extends HTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends ConfigurableComboboxOptions<ComboboxEl, PopupEl> {\n  getEnterDefaultFocusedIndex: (\n    options: ComboboxGetEnterDefaultFocusedIndexOptions\n  ) => number;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ComboboxWidgetProps<\n  ComboboxEl extends HTMLElement = HTMLInputElement,\n> {\n  \"aria-controls\": string;\n  \"aria-disabled\": true | undefined;\n  \"aria-expanded\": boolean;\n  \"aria-haspopup\": SupportedComboboxPopup;\n  id: string;\n  ref: RefCallback<ComboboxEl>;\n  role: \"combobox\";\n  onClick: MouseEventHandler<ComboboxEl>;\n  onFocus: FocusEventHandler<ComboboxEl>;\n  onKeyDown: KeyboardEventHandler<ComboboxEl>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ComboboxWidgetPopupProps<\n  PopupEl extends HTMLElement = HTMLElement,\n> {\n  \"aria-multiselectable\": true | undefined;\n  id: string;\n  ref: RefCallback<PopupEl>;\n  role: \"listbox\" | \"dialog\" | \"grid\";\n}\n\n/**\n * @since 6.0.0\n */\nexport type ComboboxTransitionCallbacks = Pick<\n  TransitionCallbacks,\n  \"onEntering\" | \"onEntered\" | \"onExiting\" | \"onExited\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport interface ComboboxTransitionOptions extends ComboboxTransitionCallbacks {\n  disableTransition?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport type ConfigurableComboboxMenuProps = Partial<\n  Omit<MenuProps, \"visible\" | \"onRequestClose\" | keyof ComboboxWidgetPopupProps>\n>;\n\n/**\n * @since 6.0.0\n */\nexport interface ProvidedComboboxMenuProps<\n  PopupEl extends HTMLElement = HTMLDivElement,\n> extends Required<ComboboxTransitionCallbacks>,\n    ComboboxWidgetPopupProps<PopupEl> {\n  visible: boolean;\n  onRequestClose: () => void;\n  /** @defaultValue `\"min\"` */\n  width: PositionWidth;\n  /** @defaultValue `BELOW_CENTER_ANCHOR` */\n  anchor: PositionAnchor;\n  fixedTo: RefObject<HTMLElement>;\n  sheetProps: MenuSheetConfigurableProps &\n    Required<ComboboxTransitionCallbacks>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ComboboxMenuProps<PopupEl extends HTMLElement = HTMLDivElement>\n  extends Omit<ConfigurableComboboxMenuProps, keyof ProvidedComboboxMenuProps>,\n    ProvidedComboboxMenuProps<PopupEl> {}\n\n/**\n * @since 6.0.0\n */\nexport interface ComboboxImplementation<\n  ComboboxEl extends HTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends KeyboardMovementProviderImplementation<ComboboxEl> {\n  show: () => void;\n  hide: () => void;\n  visible: boolean;\n  setVisible: UseStateSetter<boolean>;\n  focusLast: NonNullMutableRef<boolean>;\n  popupRef: RefObject<PopupEl>;\n  popupProps: ComboboxWidgetPopupProps<PopupEl>;\n  comboboxRef: RefObject<ComboboxEl>;\n  comboboxProps: ComboboxWidgetProps<ComboboxEl>;\n  /**\n   * Since the combobox usually uses the `Menu` as a popup element, this is a\n   * helper util to create the required props and merge any additional props\n   * with reasonable defaults.\n   */\n  getMenuProps: (\n    overrides?: ConfigurableComboboxMenuProps\n  ) => ComboboxMenuProps<PopupEl>;\n}\n\n/**\n * @since 6.0.0\n */\nexport function useCombobox<\n  ComboboxEl extends HTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n>(\n  options: ComboboxOptions<ComboboxEl, PopupEl>\n): ComboboxImplementation<ComboboxEl, PopupEl> {\n  const {\n    form,\n    popup = \"listbox\",\n    onClick = noop,\n    onFocus,\n    onKeyDown,\n    searchable,\n    multiselect,\n    isNegativeOneAllowed,\n    loopable,\n    disabled,\n    visible: propVisible,\n    setVisible: propSetVisible,\n    defaultVisible = false,\n    comboboxId: propComboboxId,\n    comboboxRef: propComboboxRef,\n    popupId: propPopupId,\n    popupRef: propPopupRef,\n    onFocusChange = noop,\n    extendKeyDown = noop,\n    getFocusableElements = getNonDisabledOptions,\n    getEnterDefaultFocusedIndex,\n    getDefaultFocusedIndex,\n  } = options;\n\n  const [visible, setVisible] = useEnsuredState({\n    name: \"visible\",\n    value: propVisible,\n    setValue: propSetVisible,\n    defaultValue: defaultVisible,\n  });\n  const show = useCallback(() => {\n    setVisible(true);\n  }, [setVisible]);\n  const hide = useCallback(() => {\n    setVisible(false);\n  }, [setVisible]);\n\n  const popupId = useEnsuredId(propPopupId, \"combobox-popup\");\n  const comboboxId = useEnsuredId(propComboboxId, \"combobox\");\n  const [comboboxRef, comboboxRefCallback] = useEnsuredRef(propComboboxRef);\n  const [popupRef, popupRefCallback] = useEnsuredRef(propPopupRef);\n  const focusLast = useRef(false);\n  const {\n    movementProps,\n    movementContext,\n    currentFocusIndex,\n    activeDescendantId,\n    setActiveDescendantId,\n  } = useKeyboardMovementProvider<ComboboxEl>({\n    onFocus,\n    onKeyDown,\n    onClick(event) {\n      onClick(event);\n      if (disabled) {\n        return;\n      }\n\n      show();\n    },\n    extendKeyDown(movementData) {\n      extendKeyDown({\n        ...movementData,\n        show,\n        hide,\n        visible,\n        focusLast,\n      });\n      const { event } = movementData;\n      if (event.isPropagationStopped()) {\n        return;\n      }\n\n      if (visible) {\n        switch (event.key) {\n          case \"Tab\":\n            // do not stop propagation for tab so that shift+tab works correctly in dialogs\n            hide();\n            break;\n          case \"Escape\":\n            event.stopPropagation();\n            hide();\n            break;\n          case \"Enter\":\n            event.preventDefault();\n            break;\n        }\n\n        // while visible, always use the default keyboard movement behavior\n        return;\n      }\n\n      switch (event.key) {\n        case \"ArrowUp\":\n        case \"ArrowDown\":\n          event.preventDefault();\n          event.stopPropagation();\n          focusLast.current = event.key === \"ArrowUp\";\n          show();\n          break;\n        case \"Enter\":\n          tryToSubmitRelatedForm(event, form);\n          break;\n      }\n    },\n    disabled,\n    loopable,\n    searchable,\n    onFocusChange,\n    programmatic: true,\n    includeDisabled: false,\n    tabIndexBehavior: \"virtual\",\n    getFocusableElements(container, programmatic) {\n      const popup = popupRef.current;\n      if (!popup) {\n        return [];\n      }\n\n      return getFocusableElements(popup || container, programmatic);\n    },\n    isNegativeOneAllowed,\n    getDefaultFocusedIndex,\n  });\n\n  const popupProps: ComboboxWidgetPopupProps<PopupEl> = {\n    \"aria-multiselectable\": multiselect || undefined,\n    id: popupId,\n    ref: popupRefCallback,\n    role: popup,\n  };\n\n  return {\n    show,\n    hide,\n    visible,\n    setVisible,\n    focusLast,\n    popupRef,\n    popupProps,\n    comboboxRef,\n    comboboxProps: {\n      ...movementProps,\n      \"aria-controls\": popupId,\n      \"aria-disabled\": disabled || undefined,\n      \"aria-expanded\": visible,\n      \"aria-haspopup\": popup,\n      id: comboboxId,\n      ref: comboboxRefCallback,\n      role: \"combobox\",\n    },\n    movementProps,\n    movementContext,\n    currentFocusIndex,\n    activeDescendantId,\n    setActiveDescendantId,\n    getMenuProps(props = {}) {\n      const {\n        sheetProps,\n        disableTransition,\n        onEnter,\n        onEntering,\n        onEntered = noop,\n        onExited,\n        onExiting,\n        onExit,\n      } = props;\n\n      // Chrome does not trigger the scrollIntoView behavior correctly while\n      // using a scale transition, so need to trigger this on the entered flow\n      // to really make sure the item is in view. An alternative would be to\n      // implement a custom scrollIntoView behavior again like the previous\n      // versions of react-md, but this is less lines of code\n      const attemptScroll = (): void => {\n        const activeOption = document.getElementById(activeDescendantId);\n        if (activeOption) {\n          activeOption.scrollIntoView({ block: \"nearest\" });\n        }\n      };\n      const onEnterOnce = (): void => {\n        const popup = popupRef.current;\n        if (!popup) {\n          attemptScroll();\n          return;\n        }\n\n        const focusables = getFocusableElements(popup, true);\n        const index = getEnterDefaultFocusedIndex({\n          focusLast: focusLast.current,\n          focusables,\n          currentFocusIndex: currentFocusIndex.current,\n        });\n        focusLast.current = false;\n        currentFocusIndex.current = index;\n\n        const option = focusables[index];\n        if (!option) {\n          return;\n        }\n\n        onFocusChange({\n          index,\n          element: option,\n        });\n\n        option.scrollIntoView({ block: \"nearest\" });\n        setActiveDescendantId(option.id || \"\");\n      };\n\n      return {\n        anchor: BELOW_CENTER_ANCHOR,\n        width: \"min\",\n        fixedTo: comboboxRef,\n        ...props,\n        ...popupProps,\n        visible,\n        onRequestClose: hide,\n        ...getTransitionCallbacks({\n          disableTransition,\n          onEnter,\n          onEntered: (appearing) => {\n            onEntered(appearing);\n            attemptScroll();\n          },\n          onEntering,\n          onEnterOnce,\n          onExit,\n          onExiting,\n          onExited,\n          onExitOnce: () => {\n            // since the menu is unmounted or set to hidden while not visible, need\n            // to clear the aria-activedescendant and current focus index when\n            // hiding\n            currentFocusIndex.current = -1;\n            setActiveDescendantId(\"\");\n          },\n        }),\n        sheetProps: {\n          ...sheetProps,\n          ...getTransitionCallbacks({\n            ...sheetProps,\n            onEnterOnce,\n            disableTransition:\n              sheetProps?.disableTransition ?? disableTransition,\n          }),\n        },\n      };\n    },\n  };\n}\n"],"names":["useCallback","useRef","useKeyboardMovementProvider","BELOW_CENTER_ANCHOR","getTransitionCallbacks","useEnsuredId","useEnsuredRef","useEnsuredState","tryToSubmitRelatedForm","noop","getNonDisabledOptions","container","querySelectorAll","useCombobox","options","form","popup","onClick","onFocus","onKeyDown","searchable","multiselect","isNegativeOneAllowed","loopable","disabled","visible","propVisible","setVisible","propSetVisible","defaultVisible","comboboxId","propComboboxId","comboboxRef","propComboboxRef","popupId","propPopupId","popupRef","propPopupRef","onFocusChange","extendKeyDown","getFocusableElements","getEnterDefaultFocusedIndex","getDefaultFocusedIndex","name","value","setValue","defaultValue","show","hide","comboboxRefCallback","popupRefCallback","focusLast","movementProps","movementContext","currentFocusIndex","activeDescendantId","setActiveDescendantId","event","movementData","isPropagationStopped","key","stopPropagation","preventDefault","current","programmatic","includeDisabled","tabIndexBehavior","popupProps","undefined","id","ref","role","comboboxProps","getMenuProps","props","sheetProps","disableTransition","onEnter","onEntering","onEntered","onExited","onExiting","onExit","attemptScroll","activeOption","document","getElementById","scrollIntoView","block","onEnterOnce","focusables","index","option","element","anchor","width","fixedTo","onRequestClose","appearing","onExitOnce"],"mappings":"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"}
+{"version":3,"sources":["../../src/form/useCombobox.ts"],"sourcesContent":["\"use client\";\n\nimport {\n  type FocusEventHandler,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  type InputHTMLAttributes,\n  type KeyboardEventHandler,\n  type MouseEventHandler,\n  type Ref,\n  type RefCallback,\n  type RefObject,\n  useCallback,\n  useRef,\n} from \"react\";\n\nimport { type MenuProps } from \"../menu/Menu.js\";\nimport { type MenuSheetConfigurableProps } from \"../menu/MenuSheet.js\";\nimport {\n  type GetDefaultFocusedIndex,\n  type GetFocusableElements,\n  type KeyboardMovementExtensionData,\n  type KeyboardMovementProviderImplementation,\n  type KeyboardMovementProviderOptions,\n} from \"../movement/types.js\";\nimport { useKeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\nimport { BELOW_CENTER_ANCHOR } from \"../positioning/constants.js\";\nimport {\n  type PositionAnchor,\n  type PositionWidth,\n} from \"../positioning/types.js\";\nimport { getTransitionCallbacks } from \"../transition/getTransitionCallbacks.js\";\nimport { type TransitionCallbacks } from \"../transition/types.js\";\nimport {\n  type NonNullMutableRef,\n  type UseStateInitializer,\n  type UseStateSetter,\n} from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { useEnsuredState } from \"../useEnsuredState.js\";\nimport { tryToSubmitRelatedForm } from \"./utils.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @since 6.0.0\n */\nexport const getNonDisabledOptions = (\n  container: HTMLElement\n): readonly HTMLElement[] => [\n  ...container.querySelectorAll<HTMLLIElement>(\n    '[role=\"option\"]:not([aria-disabled])'\n  ),\n];\n\n/**\n * @since 6.0.0\n */\nexport type SupportedComboboxPopup = \"listbox\" | \"grid\" | \"dialog\";\n\n/**\n * @since 6.0.0\n */\nexport interface ComboboxKeyboardMovementData<\n  E extends HTMLElement = HTMLInputElement,\n> extends KeyboardMovementExtensionData<E> {\n  show: () => void;\n  hide: () => void;\n  visible: boolean;\n\n  /**\n   * @since 6.3.0 Renamed from `focusLast` to `focusLastRef` to support the new\n   * actions.\n   */\n  focusLastRef: NonNullMutableRef<boolean>;\n}\n\n/**\n * @since 6.0.0\n */\nexport type ExtendComboboxKeyDown<E extends HTMLElement = HTMLInputElement> = (\n  movementData: ComboboxKeyboardMovementData<E>\n) => void;\n\n/**\n * @since 6.0.0\n */\nexport type ComboboxKeyboardMovementOptions<\n  ComboboxEl extends HTMLElement = HTMLInputElement,\n> = Pick<\n  KeyboardMovementProviderOptions<ComboboxEl>,\n  | \"onClick\"\n  | \"onFocus\"\n  | \"onKeyDown\"\n  | \"disabled\"\n  | \"loopable\"\n  | \"searchable\"\n  | \"onFocusChange\"\n  | \"isNegativeOneAllowed\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport interface ComboboxVisibilityOptions {\n  /**\n   * This can be used to control the popup's visibility and **must** be used\n   * along with {@link setVisible}.\n   */\n  visible?: boolean;\n\n  /**\n   * Used to control the popup's visibility and should generally be a `useState`\n   * setter.\n   *\n   * @example Controlling the Visibility\n   * ```tsx\n   * const [visible, setVisible] = useState(false);\n   *\n   * useCombobox({\n   *   visible,\n   *   setVisible,\n   * });\n   * ```\n   */\n  setVisible?: UseStateSetter<boolean>;\n\n  /**\n   * Set this to `true` to have the combobox's popup visible by default.\n   *\n   * @defaultValue `false`\n   */\n  defaultVisible?: UseStateInitializer<boolean>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ConfigurableComboboxOptions<\n  ComboboxEl extends HTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends ComboboxKeyboardMovementOptions<ComboboxEl>,\n    ComboboxVisibilityOptions {\n  /**\n   * This is the {@link InputHTMLAttributes.form} attribute and is used to\n   * attempt submitting a form when the enter key is pressed.\n   */\n  form?: string;\n\n  /**\n   * @defaultValue `\"combobox-popup-\" + useId()`\n   */\n  popupId?: string;\n  popupRef?: Ref<PopupEl>;\n\n  /**\n   * @defaultValue `\"combobox-\" + useId()`\n   */\n  comboboxId?: string;\n  comboboxRef?: Ref<ComboboxEl>;\n\n  /**\n   * @defaultValue `\"listbox\"`\n   */\n  popup?: \"listbox\" | \"grid\" | \"dialog\";\n\n  /**\n   * @defaultValue `false`\n   */\n  multiselect?: boolean;\n\n  extendKeyDown?: ExtendComboboxKeyDown<ComboboxEl>;\n\n  /**\n   * @defaultValue {@link getNonDisabledOptions}\n   */\n  getFocusableElements?: GetFocusableElements;\n\n  getDefaultFocusedIndex?: GetDefaultFocusedIndex;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ComboboxGetEnterDefaultFocusedIndexOptions {\n  focusLast: boolean;\n  focusables: readonly HTMLElement[];\n  currentFocusIndex: number;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ComboboxOptions<\n  ComboboxEl extends HTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends ConfigurableComboboxOptions<ComboboxEl, PopupEl> {\n  getEnterDefaultFocusedIndex: (\n    options: ComboboxGetEnterDefaultFocusedIndexOptions\n  ) => number;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ComboboxWidgetProps<\n  ComboboxEl extends HTMLElement = HTMLInputElement,\n> {\n  \"aria-controls\": string;\n  \"aria-disabled\": true | undefined;\n  \"aria-expanded\": boolean;\n  \"aria-haspopup\": SupportedComboboxPopup;\n  id: string;\n  ref: RefCallback<ComboboxEl>;\n  role: \"combobox\";\n  onClick: MouseEventHandler<ComboboxEl>;\n  onFocus: FocusEventHandler<ComboboxEl>;\n  onKeyDown: KeyboardEventHandler<ComboboxEl>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ComboboxWidgetPopupProps<\n  PopupEl extends HTMLElement = HTMLElement,\n> {\n  \"aria-multiselectable\": true | undefined;\n  id: string;\n  ref: RefCallback<PopupEl>;\n  role: \"listbox\" | \"dialog\" | \"grid\";\n}\n\n/**\n * @since 6.0.0\n */\nexport type ComboboxTransitionCallbacks = Pick<\n  TransitionCallbacks,\n  \"onEntering\" | \"onEntered\" | \"onExiting\" | \"onExited\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport interface ComboboxTransitionOptions extends ComboboxTransitionCallbacks {\n  disableTransition?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport type ConfigurableComboboxMenuProps = Partial<\n  Omit<MenuProps, \"visible\" | \"onRequestClose\" | keyof ComboboxWidgetPopupProps>\n>;\n\n/**\n * @since 6.0.0\n */\nexport interface ProvidedComboboxMenuProps<\n  PopupEl extends HTMLElement = HTMLDivElement,\n> extends Required<ComboboxTransitionCallbacks>,\n    ComboboxWidgetPopupProps<PopupEl> {\n  visible: boolean;\n  onRequestClose: () => void;\n  /** @defaultValue `\"min\"` */\n  width: PositionWidth;\n  /** @defaultValue `BELOW_CENTER_ANCHOR` */\n  anchor: PositionAnchor;\n  fixedTo: RefObject<HTMLElement>;\n  sheetProps: MenuSheetConfigurableProps &\n    Required<ComboboxTransitionCallbacks>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ComboboxMenuProps<PopupEl extends HTMLElement = HTMLDivElement>\n  extends Omit<ConfigurableComboboxMenuProps, keyof ProvidedComboboxMenuProps>,\n    ProvidedComboboxMenuProps<PopupEl> {}\n\n/**\n * @since 6.0.0\n */\nexport interface ComboboxImplementation<\n  ComboboxEl extends HTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends Omit<KeyboardMovementProviderImplementation<ComboboxEl>, \"nodeRef\"> {\n  show: () => void;\n  hide: () => void;\n  visible: boolean;\n  setVisible: UseStateSetter<boolean>;\n  focusLast: NonNullMutableRef<boolean>;\n  popupRef: RefObject<PopupEl>;\n  popupProps: ComboboxWidgetPopupProps<PopupEl>;\n  comboboxRef: RefObject<ComboboxEl>;\n  comboboxProps: ComboboxWidgetProps<ComboboxEl>;\n  /**\n   * Since the combobox usually uses the `Menu` as a popup element, this is a\n   * helper util to create the required props and merge any additional props\n   * with reasonable defaults.\n   */\n  getMenuProps: (\n    overrides?: ConfigurableComboboxMenuProps\n  ) => ComboboxMenuProps<PopupEl>;\n}\n\n/**\n * @since 6.0.0\n */\nexport function useCombobox<\n  ComboboxEl extends HTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n>(\n  options: ComboboxOptions<ComboboxEl, PopupEl>\n): ComboboxImplementation<ComboboxEl, PopupEl> {\n  const {\n    form,\n    popup = \"listbox\",\n    onClick = noop,\n    onFocus,\n    onKeyDown,\n    searchable,\n    multiselect,\n    isNegativeOneAllowed,\n    loopable,\n    disabled,\n    visible: propVisible,\n    setVisible: propSetVisible,\n    defaultVisible = false,\n    comboboxId: propComboboxId,\n    comboboxRef: propComboboxRef,\n    popupId: propPopupId,\n    popupRef: propPopupRef,\n    onFocusChange = noop,\n    extendKeyDown = noop,\n    getFocusableElements = getNonDisabledOptions,\n    getEnterDefaultFocusedIndex,\n    getDefaultFocusedIndex,\n  } = options;\n\n  const [visible, setVisible] = useEnsuredState({\n    name: \"visible\",\n    value: propVisible,\n    setValue: propSetVisible,\n    defaultValue: defaultVisible,\n  });\n  const show = useCallback(() => {\n    setVisible(true);\n  }, [setVisible]);\n  const hide = useCallback(() => {\n    setVisible(false);\n  }, [setVisible]);\n\n  const popupId = useEnsuredId(propPopupId, \"combobox-popup\");\n  const comboboxId = useEnsuredId(propComboboxId, \"combobox\");\n  const [popupRef, popupRefCallback] = useEnsuredRef(propPopupRef);\n  const focusLastRef = useRef(false);\n  const {\n    nodeRef: comboboxRef,\n    movementProps,\n    movementContext,\n    currentFocusIndex,\n    activeDescendantId,\n    setActiveDescendantId,\n  } = useKeyboardMovementProvider<ComboboxEl>({\n    ref: propComboboxRef,\n    onFocus,\n    onKeyDown,\n    onClick(event) {\n      onClick(event);\n      if (disabled) {\n        return;\n      }\n\n      show();\n    },\n    extendKeyDown(movementData) {\n      extendKeyDown({\n        ...movementData,\n        show,\n        hide,\n        visible,\n        focusLastRef,\n      });\n      const { event } = movementData;\n      if (event.isPropagationStopped()) {\n        return;\n      }\n\n      if (visible) {\n        switch (event.key) {\n          case \"Tab\":\n            // do not stop propagation for tab so that shift+tab works correctly in dialogs\n            hide();\n            break;\n          case \"Escape\":\n            event.stopPropagation();\n            hide();\n            break;\n          case \"Enter\":\n            event.preventDefault();\n            break;\n        }\n\n        // while visible, always use the default keyboard movement behavior\n        return;\n      }\n\n      switch (event.key) {\n        case \"ArrowUp\":\n        case \"ArrowDown\":\n          event.preventDefault();\n          event.stopPropagation();\n          focusLastRef.current = event.key === \"ArrowUp\";\n          show();\n          break;\n        case \"Enter\":\n          tryToSubmitRelatedForm(event, form);\n          break;\n      }\n    },\n    disabled,\n    loopable,\n    searchable,\n    onFocusChange,\n    programmatic: true,\n    includeDisabled: false,\n    tabIndexBehavior: \"virtual\",\n    getFocusableElements(container, programmatic) {\n      const popup = popupRef.current;\n      if (!popup) {\n        return [];\n      }\n\n      return getFocusableElements(popup || container, programmatic);\n    },\n    isNegativeOneAllowed,\n    getDefaultFocusedIndex,\n  });\n\n  const popupProps: ComboboxWidgetPopupProps<PopupEl> = {\n    \"aria-multiselectable\": multiselect || undefined,\n    id: popupId,\n    ref: popupRefCallback,\n    role: popup,\n  };\n\n  return {\n    show,\n    hide,\n    visible,\n    setVisible,\n    focusLast: focusLastRef,\n    popupRef,\n    popupProps,\n    comboboxRef,\n    comboboxProps: {\n      ...movementProps,\n      \"aria-controls\": popupId,\n      \"aria-disabled\": disabled || undefined,\n      \"aria-expanded\": visible,\n      \"aria-haspopup\": popup,\n      id: comboboxId,\n      role: \"combobox\",\n    },\n    movementProps,\n    movementContext,\n    currentFocusIndex,\n    activeDescendantId,\n    setActiveDescendantId,\n    getMenuProps(props = {}) {\n      const {\n        sheetProps,\n        disableTransition,\n        onEnter,\n        onEntering,\n        onEntered = noop,\n        onExited,\n        onExiting,\n        onExit,\n      } = props;\n\n      // Chrome does not trigger the scrollIntoView behavior correctly while\n      // using a scale transition, so need to trigger this on the entered flow\n      // to really make sure the item is in view. An alternative would be to\n      // implement a custom scrollIntoView behavior again like the previous\n      // versions of react-md, but this is less lines of code\n      const attemptScroll = (): void => {\n        const activeOption = document.getElementById(activeDescendantId);\n        if (activeOption) {\n          activeOption.scrollIntoView({ block: \"nearest\" });\n        }\n      };\n      const onEnterOnce = (): void => {\n        const popup = popupRef.current;\n        if (!popup) {\n          attemptScroll();\n          return;\n        }\n\n        const focusables = getFocusableElements(popup, true);\n        const index = getEnterDefaultFocusedIndex({\n          focusLast: focusLastRef.current,\n          focusables,\n          currentFocusIndex: currentFocusIndex.current,\n        });\n        focusLastRef.current = false;\n        currentFocusIndex.current = index;\n\n        const option = focusables[index];\n        if (!option) {\n          return;\n        }\n\n        onFocusChange({\n          index,\n          element: option,\n        });\n\n        option.scrollIntoView({ block: \"nearest\" });\n        setActiveDescendantId(option.id || \"\");\n      };\n\n      return {\n        anchor: BELOW_CENTER_ANCHOR,\n        width: \"min\",\n        fixedTo: comboboxRef,\n        ...props,\n        ...popupProps,\n        visible,\n        onRequestClose: hide,\n        ...getTransitionCallbacks({\n          disableTransition,\n          onEnter,\n          onEntered: (appearing) => {\n            onEntered(appearing);\n            attemptScroll();\n          },\n          onEntering,\n          onEnterOnce,\n          onExit,\n          onExiting,\n          onExited,\n          onExitOnce: () => {\n            // since the menu is unmounted or set to hidden while not visible, need\n            // to clear the aria-activedescendant and current focus index when\n            // hiding\n            currentFocusIndex.current = -1;\n            setActiveDescendantId(\"\");\n          },\n        }),\n        sheetProps: {\n          ...sheetProps,\n          ...getTransitionCallbacks({\n            ...sheetProps,\n            onEnterOnce,\n            disableTransition:\n              sheetProps?.disableTransition ?? disableTransition,\n          }),\n        },\n      };\n    },\n  };\n}\n"],"names":["useCallback","useRef","useKeyboardMovementProvider","BELOW_CENTER_ANCHOR","getTransitionCallbacks","useEnsuredId","useEnsuredRef","useEnsuredState","tryToSubmitRelatedForm","noop","getNonDisabledOptions","container","querySelectorAll","useCombobox","options","form","popup","onClick","onFocus","onKeyDown","searchable","multiselect","isNegativeOneAllowed","loopable","disabled","visible","propVisible","setVisible","propSetVisible","defaultVisible","comboboxId","propComboboxId","comboboxRef","propComboboxRef","popupId","propPopupId","popupRef","propPopupRef","onFocusChange","extendKeyDown","getFocusableElements","getEnterDefaultFocusedIndex","getDefaultFocusedIndex","name","value","setValue","defaultValue","show","hide","popupRefCallback","focusLastRef","nodeRef","movementProps","movementContext","currentFocusIndex","activeDescendantId","setActiveDescendantId","ref","event","movementData","isPropagationStopped","key","stopPropagation","preventDefault","current","programmatic","includeDisabled","tabIndexBehavior","popupProps","undefined","id","role","focusLast","comboboxProps","getMenuProps","props","sheetProps","disableTransition","onEnter","onEntering","onEntered","onExited","onExiting","onExit","attemptScroll","activeOption","document","getElementById","scrollIntoView","block","onEnterOnce","focusables","index","option","element","anchor","width","fixedTo","onRequestClose","appearing","onExitOnce"],"mappings":"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"}

package/dist/form/useFormReset.d.ts

@@ -2,12 +2,15 @@ import { type RefObject } from "react";
 import { type ChangeableHTMLElement } from "./utils.js";
 /**
  * @since 6.0.0
+ * @since 6.3.0 Added the optional `onReset` callback and updated
+ * `defaultValue` to be optional.
  * @internal
  */
 export interface FormResetOptions {
     form?: string;
     elementRef: RefObject<ChangeableHTMLElement>;
-    defaultValue: string;
+    onReset?: () => void;
+    defaultValue?: string;
 }
 /**
  * @since 6.0.0

package/dist/form/useFormReset.js

@@ -5,10 +5,10 @@ import { triggerManualChangeEvent } from "./utils.js";
  * @since 6.0.0
  * @internal
  */ export function useFormReset(options) {
-    const { form, elementRef, defaultValue } = options;
+    const { form, elementRef, defaultValue, onReset } = options;
     useEffect(()=>{
         const element = elementRef.current;
-        if (!element) {
+        if (!element || typeof defaultValue === "undefined" && !onReset) {
             return;
         }
         const formElement = form && document.getElementById(form) || element.closest("form") || null;
@@ -16,7 +16,11 @@ import { triggerManualChangeEvent } from "./utils.js";
             return;
         }
         const handleReset = ()=>{
-            triggerManualChangeEvent(element, defaultValue);
+            if (onReset) {
+                onReset();
+            } else if (typeof defaultValue !== "undefined") {
+                triggerManualChangeEvent(element, defaultValue);
+            }
         };
         formElement.addEventListener("reset", handleReset);
         return ()=>{
@@ -25,7 +29,8 @@ import { triggerManualChangeEvent } from "./utils.js";
     }, [
         defaultValue,
         elementRef,
-        form
+        form,
+        onReset
     ]);
 }
 

package/dist/form/useFormReset.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/useFormReset.ts"],"sourcesContent":["\"use client\";\n\nimport { type RefObject, useEffect } from \"react\";\n\nimport {\n  type ChangeableHTMLElement,\n  triggerManualChangeEvent,\n} from \"./utils.js\";\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface FormResetOptions {\n  form?: string;\n  elementRef: RefObject<ChangeableHTMLElement>;\n  defaultValue: string;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport function useFormReset(options: FormResetOptions): void {\n  const { form, elementRef, defaultValue } = options;\n\n  useEffect(() => {\n    const element = elementRef.current;\n    if (!element) {\n      return;\n    }\n\n    const formElement =\n      (form && document.getElementById(form)) ||\n      element.closest<HTMLFormElement>(\"form\") ||\n      null;\n    if (!formElement) {\n      return;\n    }\n\n    const handleReset = (): void => {\n      triggerManualChangeEvent(element, defaultValue);\n    };\n\n    formElement.addEventListener(\"reset\", handleReset);\n    return () => {\n      formElement.removeEventListener(\"reset\", handleReset);\n    };\n  }, [defaultValue, elementRef, form]);\n}\n"],"names":["useEffect","triggerManualChangeEvent","useFormReset","options","form","elementRef","defaultValue","element","current","formElement","document","getElementById","closest","handleReset","addEventListener","removeEventListener"],"mappings":"AAAA;AAEA,SAAyBA,SAAS,QAAQ,QAAQ;AAElD,SAEEC,wBAAwB,QACnB,aAAa;AAYpB;;;CAGC,GACD,OAAO,SAASC,aAAaC,OAAyB;IACpD,MAAM,EAAEC,IAAI,EAAEC,UAAU,EAAEC,YAAY,EAAE,GAAGH;IAE3CH,UAAU;QACR,MAAMO,UAAUF,WAAWG,OAAO;QAClC,IAAI,CAACD,SAAS;YACZ;QACF;QAEA,MAAME,cACJ,AAACL,QAAQM,SAASC,cAAc,CAACP,SACjCG,QAAQK,OAAO,CAAkB,WACjC;QACF,IAAI,CAACH,aAAa;YAChB;QACF;QAEA,MAAMI,cAAc;YAClBZ,yBAAyBM,SAASD;QACpC;QAEAG,YAAYK,gBAAgB,CAAC,SAASD;QACtC,OAAO;YACLJ,YAAYM,mBAAmB,CAAC,SAASF;QAC3C;IACF,GAAG;QAACP;QAAcD;QAAYD;KAAK;AACrC"}
+{"version":3,"sources":["../../src/form/useFormReset.ts"],"sourcesContent":["\"use client\";\n\nimport { type RefObject, useEffect } from \"react\";\n\nimport {\n  type ChangeableHTMLElement,\n  triggerManualChangeEvent,\n} from \"./utils.js\";\n\n/**\n * @since 6.0.0\n * @since 6.3.0 Added the optional `onReset` callback and updated\n * `defaultValue` to be optional.\n * @internal\n */\nexport interface FormResetOptions {\n  form?: string;\n  elementRef: RefObject<ChangeableHTMLElement>;\n  onReset?: () => void;\n  defaultValue?: string;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport function useFormReset(options: FormResetOptions): void {\n  const { form, elementRef, defaultValue, onReset } = options;\n\n  useEffect(() => {\n    const element = elementRef.current;\n    if (!element || (typeof defaultValue === \"undefined\" && !onReset)) {\n      return;\n    }\n\n    const formElement =\n      (form && document.getElementById(form)) ||\n      element.closest<HTMLFormElement>(\"form\") ||\n      null;\n    if (!formElement) {\n      return;\n    }\n\n    const handleReset = (): void => {\n      if (onReset) {\n        onReset();\n      } else if (typeof defaultValue !== \"undefined\") {\n        triggerManualChangeEvent(element, defaultValue);\n      }\n    };\n\n    formElement.addEventListener(\"reset\", handleReset);\n    return () => {\n      formElement.removeEventListener(\"reset\", handleReset);\n    };\n  }, [defaultValue, elementRef, form, onReset]);\n}\n"],"names":["useEffect","triggerManualChangeEvent","useFormReset","options","form","elementRef","defaultValue","onReset","element","current","formElement","document","getElementById","closest","handleReset","addEventListener","removeEventListener"],"mappings":"AAAA;AAEA,SAAyBA,SAAS,QAAQ,QAAQ;AAElD,SAEEC,wBAAwB,QACnB,aAAa;AAepB;;;CAGC,GACD,OAAO,SAASC,aAAaC,OAAyB;IACpD,MAAM,EAAEC,IAAI,EAAEC,UAAU,EAAEC,YAAY,EAAEC,OAAO,EAAE,GAAGJ;IAEpDH,UAAU;QACR,MAAMQ,UAAUH,WAAWI,OAAO;QAClC,IAAI,CAACD,WAAY,OAAOF,iBAAiB,eAAe,CAACC,SAAU;YACjE;QACF;QAEA,MAAMG,cACJ,AAACN,QAAQO,SAASC,cAAc,CAACR,SACjCI,QAAQK,OAAO,CAAkB,WACjC;QACF,IAAI,CAACH,aAAa;YAChB;QACF;QAEA,MAAMI,cAAc;YAClB,IAAIP,SAAS;gBACXA;YACF,OAAO,IAAI,OAAOD,iBAAiB,aAAa;gBAC9CL,yBAAyBO,SAASF;YACpC;QACF;QAEAI,YAAYK,gBAAgB,CAAC,SAASD;QACtC,OAAO;YACLJ,YAAYM,mBAAmB,CAAC,SAASF;QAC3C;IACF,GAAG;QAACR;QAAcD;QAAYD;QAAMG;KAAQ;AAC9C"}

package/dist/form/useNumberField.d.ts

@@ -24,7 +24,7 @@ export interface NumberFieldConstraints {
  * - Removed `updateOnChange` in favor of `updateValue`
  * - Renamed `fixOnBlur` to `updateValueOnBlur`
  */
-export interface NumberFieldHookOptions extends Omit<TextFieldHookOptions<HTMLInputElement>, "defaultValue" | "isNumber">, NumberFieldConstraints {
+export interface NumberFieldHookOptions extends Omit<TextFieldHookOptions, "defaultValue" | "isNumber">, NumberFieldConstraints {
     /**
      * @defaultValue `undefined`
      */
@@ -89,15 +89,15 @@ export interface NumberFieldHookState extends Omit<TextFieldHookState, "value">
     value: number | undefined;
 }
 /** @since 2.5.6 */
-export interface ProvidedNumberFieldProps extends ProvidedTextFieldProps<HTMLInputElement>, NumberFieldConstraints {
+export interface ProvidedNumberFieldProps extends ProvidedTextFieldProps, NumberFieldConstraints {
     type: "number";
 }
 /** @since 2.5.6 */
-export interface ProvidedNumberFieldMessageProps extends ProvidedTextFieldMessageProps<HTMLInputElement>, NumberFieldConstraints {
+export interface ProvidedNumberFieldMessageProps extends ProvidedTextFieldMessageProps, NumberFieldConstraints {
     type: "number";
 }
 /** @since 6.0.0 */
-export interface NumberFieldImplementation extends Omit<TextFieldImplementation<HTMLInputElement>, "value" | "setState"> {
+export interface NumberFieldImplementation extends Omit<TextFieldImplementation, "value" | "setState"> {
     value: number | undefined;
     setState: UseStateSetter<NumberFieldHookState>;
     fieldProps: ProvidedNumberFieldProps;
@@ -107,7 +107,7 @@ export interface NumberFieldWithMessageImplementation extends NumberFieldImpleme
     fieldProps: ProvidedNumberFieldMessageProps;
 }
 /** @since 6.0.0 */
-export interface ValidatedNumberFieldImplementation extends Omit<ValidatedTextFieldImplementation<HTMLInputElement>, "value" | "setState"> {
+export interface ValidatedNumberFieldImplementation extends Omit<ValidatedTextFieldImplementation, "value" | "setState"> {
     value: number | undefined;
     setState: UseStateSetter<NumberFieldHookState>;
     fieldProps: ProvidedNumberFieldProps | ProvidedNumberFieldMessageProps;

package/dist/form/useNumberField.js

@@ -1,6 +1,7 @@
 "use client";
 import { useCallback, useRef, useState } from "react";
 import { withinRange } from "../utils/withinRange.js";
+import { useFormReset } from "./useFormReset.js";
 import { useTextField } from "./useTextField.js";
 const noop = ()=>{
 // do nothing
@@ -12,13 +13,14 @@ const noop = ()=>{
  * @see {@link useTextField}
  * @see {@link useNumberField} overrides for other examples.
  */ export function useNumberField(options) {
-    const { min, max, step, onBlur = noop, onChange = noop, updateValue = "change", updateValueOnBlur = true, defaultValue, ...textOptions } = options;
+    const { min, max, step, form, onBlur = noop, onChange = noop, updateValue = "change", updateValueOnBlur = true, disableReset, defaultValue, ...textOptions } = options;
     const [number, setNumber] = useState(defaultValue);
     const initial = useRef(number);
-    const { value: _value, reset: resetTextField, fieldProps, setState: setTextFieldState, ...remaining } = useTextField({
+    const { value: _value, reset: resetTextField, fieldRef, fieldProps, setState: setTextFieldState, ...remaining } = useTextField({
         ...textOptions,
         isNumber: true,
         defaultValue: `${number ?? ""}`,
+        disableReset: true,
         onBlur (event) {
             onBlur(event);
             if (event.isPropagationStopped()) {
@@ -107,11 +109,17 @@ const noop = ()=>{
     }, [
         setTextFieldState
     ]);
+    useFormReset({
+        form,
+        elementRef: fieldRef,
+        onReset: disableReset ? undefined : reset
+    });
     return {
         ...remaining,
         reset,
         value: number,
         setState,
+        fieldRef,
         fieldProps: {
             ...fieldProps,
             min,

package/dist/form/useNumberField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/useNumberField.ts"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useRef, useState } from \"react\";\n\nimport { type UseStateInitializer, type UseStateSetter } from \"../types.js\";\nimport { withinRange } from \"../utils/withinRange.js\";\nimport {\n  type ProvidedTextFieldMessageProps,\n  type ProvidedTextFieldProps,\n  type TextFieldHookOptions,\n  type TextFieldHookState,\n  type TextFieldImplementation,\n  type ValidatedTextFieldImplementation,\n  useTextField,\n} from \"./useTextField.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/** @since 2.5.0 */\nexport interface NumberFieldConstraints {\n  /**\n   * An optional min value for the number field.\n   */\n  min?: number;\n\n  /**\n   * An optional max value for the number field.\n   */\n  max?: number;\n\n  /**\n   * An optional step amount to use.\n   *\n   * Note: The `min` and `max` values must be divisible by this value when any\n   * are defined.\n   */\n  step?: number;\n}\n\n/**\n * @since 2.5.0\n * @since 6.0.0\n * - Removed `updateOnChange` in favor of `updateValue`\n * - Renamed `fixOnBlur` to `updateValueOnBlur`\n */\nexport interface NumberFieldHookOptions\n  extends Omit<\n      TextFieldHookOptions<HTMLInputElement>,\n      \"defaultValue\" | \"isNumber\"\n    >,\n    NumberFieldConstraints {\n  /**\n   * @defaultValue `undefined`\n   */\n  defaultValue?: UseStateInitializer<number>;\n\n  /**\n   * This controls the behavior for the `value` returned by this hook. If you\n   * need access to the current value immediately as the user types to update\n   * other components, keep this as the default of `\"change\"`. Otherwise, set\n   * this to `\"blur\"`.\n   *\n   * @example Deferring Updates on Blur\n   * ```tsx\n   * import { TextField } from \"@react-md/core/form/TextField\";\n   * import { useNumberField } from \"@react-md/core/form/useNumberField\";\n   * import type { ReactElement } from \"react\";\n   *\n   * function Example(): ReactElement {\n   *   const { fieldProps, value } = useNumberField({\n   *     min: 0,\n   *     max: 100,\n   *     name: \"someName\",\n   *     defaultValue: 0,\n   *     updateValue: \"blur\",\n   *   });\n   *\n   *   const result = useMemo(() => someExpensiveComputation(value), [value]);\n   *\n   *   return <TextField {...fieldProps} label=\"Label\" />;\n   * }\n   * ```\n   *\n   * @defaultValue `\"change\"`\n   */\n  updateValue?: \"blur\" | \"change\";\n\n  /**\n   * This option is used to update the `number` value and text field value to be\n   * within the `min` and `max` range or just format the text field value when\n   * the input is blurred. This update will only be applied if the text field\n   * contains a valid number. Using `min = 0` and `max = 10`:\n   *\n   * | text value | updated value |\n   * | ---------- | ------------- |\n   * | 000001     | 1             |\n   * | -1         | 0             |\n   * | 20         | 10            |\n   * | -12        | 0             |\n   * | --1        | --1           |\n   * | fjdka      | fjdka         |\n   *\n   *\n   * Set this to `false` if no changed should be applied and force the user to\n   * fix any min/max errors manually and maintain weird formatting.\n   *\n   * @defaultValue `true`\n   * @since 6.0.0 This was renamed from `fixOnBlur` and removed the\n   * `\"min\"` and `\"max\"` behavior.\n   */\n  updateValueOnBlur?: boolean;\n}\n\n/** @since 6.0.0 */\nexport interface NumberFieldHookState\n  extends Omit<TextFieldHookState, \"value\"> {\n  value: number | undefined;\n}\n\n/** @since 2.5.6 */\nexport interface ProvidedNumberFieldProps\n  extends ProvidedTextFieldProps<HTMLInputElement>,\n    NumberFieldConstraints {\n  type: \"number\";\n}\n\n/** @since 2.5.6 */\nexport interface ProvidedNumberFieldMessageProps\n  extends ProvidedTextFieldMessageProps<HTMLInputElement>,\n    NumberFieldConstraints {\n  type: \"number\";\n}\n\n/** @since 6.0.0 */\nexport interface NumberFieldImplementation\n  extends Omit<\n    TextFieldImplementation<HTMLInputElement>,\n    \"value\" | \"setState\"\n  > {\n  value: number | undefined;\n  setState: UseStateSetter<NumberFieldHookState>;\n  fieldProps: ProvidedNumberFieldProps;\n}\n\n/** @since 6.0.0 */\nexport interface NumberFieldWithMessageImplementation\n  extends NumberFieldImplementation {\n  fieldProps: ProvidedNumberFieldMessageProps;\n}\n\n/** @since 6.0.0 */\nexport interface ValidatedNumberFieldImplementation\n  extends Omit<\n    ValidatedTextFieldImplementation<HTMLInputElement>,\n    \"value\" | \"setState\"\n  > {\n  value: number | undefined;\n  setState: UseStateSetter<NumberFieldHookState>;\n  fieldProps: ProvidedNumberFieldProps | ProvidedNumberFieldMessageProps;\n}\n\n/**\n * @example Enforce Number Value and No Error Messages\n * ```tsx\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { useNumberField } from \"@react-md/core/form/useNumberField\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps, value } = useNumberField({\n *     min: 0,\n *     max: 100,\n *     name: \"someName\",\n *     defaultValue: 0,\n *     disableMessage: true,\n *   });\n *\n *   // this is safe since `value` will always be a number even if there is a\n *   // validation error. since the min and max options were provided as well,\n *   // number will be between that range as well.\n *   const computed = value * 10;\n *\n *   return <TextField {...fieldProps} label=\"Label\" />;\n * }\n * ```\n *\n * @see {@link useTextField}\n * @see {@link useNumberField} overrides for other examples.\n * ```\n */\nexport function useNumberField(\n  options: NumberFieldHookOptions & {\n    disableMessage: true;\n    defaultValue: UseStateInitializer<number>;\n  }\n): NumberFieldImplementation & {\n  value: number;\n  setState: UseStateSetter<NumberFieldHookState & { value: number }>;\n};\n\n/**\n * @example No Error Messages\n * ```tsx\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { useNumberField } from \"@react-md/core/form/useNumberField\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps, value } = useNumberField({\n *     min: 0,\n *     max: 100,\n *     name: \"someName\",\n *     disableMessage: true,\n *   });\n *\n *   // `value` will be `undefined` until the user enters a valid value once\n *   // there is a valid value, `value` will be a `number`. So this might cause\n *   // `computed` to be `NaN | number`\n *   //\n *   // const computed = value * 10;\n *\n *   return <TextField {...fieldProps} label=\"Label\" />;\n * }\n * ```\n *\n * @see {@link useTextField}\n * @see {@link useNumberField} overrides for other examples.\n */\nexport function useNumberField(\n  options: NumberFieldHookOptions & { disableMessage: true }\n): NumberFieldImplementation;\n\n/**\n * @example Enforce Number Value\n * ```tsx\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { useNumberField } from \"@react-md/core/form/useNumberField\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps, value } = useNumberField({\n *     min: 0,\n *     max: 100,\n *     name: \"someName\",\n *     defaultValue: 0,\n *   });\n *\n *   // this is safe since `value` will always be a number even if there is a\n *   // validation error. since the min and max options were provided as well,\n *   // number will be between that range as well.\n *   const computed = value * 10;\n *\n *   return <TextField {...fieldProps} label=\"Label\" />;\n * }\n * ```\n *\n * @example Enforce Number Value and Deferring Updates\n * ```tsx\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { useNumberField } from \"@react-md/core/form/useNumberField\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps, value } = useNumberField({\n *     min: 0,\n *     max: 100,\n *     name: \"someName\",\n *     defaultValue: 0,\n *     updateValue: \"blur\",\n *   });\n *\n *   // the `value` will only be updated whenever the `TextField` is blurred.\n *   // This is helpful if the `value` is used in expensive computations or\n *   // updates that do not need to be updated as the user types\n *   const computed = value * 10;\n *\n *   return <TextField {...fieldProps} label=\"Label\" />;\n * }\n * ```\n *\n * @see {@link useTextField}\n * @see {@link useNumberField} overrides for other examples.\n */\nexport function useNumberField(\n  options: NumberFieldHookOptions & {\n    defaultValue: UseStateInitializer<number>;\n  }\n): NumberFieldWithMessageImplementation & {\n  value: number;\n  setState: UseStateSetter<NumberFieldHookState & { value: number }>;\n};\n\n/**\n * The `useNumberField` hook is used to control the state of a `TextField` or\n * `<input type=\"number\">`\n *\n * @example Default Implementation\n * ```tsx\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { useNumberField } from \"@react-md/core/form/useNumberField\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps, value } = useNumberField({\n *     name: \"someName\",\n *   });\n *\n *   // `value` will be `undefined` until the user enters a valid value once\n *   // there is a valid value, `value` will be a `number`. So this might cause\n *   // `computed` to be `NaN | number`\n *   //\n *   // const computed = value * 10;\n *\n *   // whenever there is an error, an error message will be displayed below the\n *   // `TextField`\n *   return <TextField {...fieldProps} label=\"Label\" />;\n * }\n * ```\n *\n * @example Adding Constraints\n * ```tsx\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { useNumberField } from \"@react-md/core/form/useNumberField\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps, value } = useNumberField({\n *     name: \"someName\",\n *     min: 0,\n *     max: 100,\n *     step: 2,\n *     required: true,\n *   });\n *\n *   return <TextField {...fieldProps} label=\"Label\" />;\n * }\n * ```\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation\n * @see {@link https://react-md.dev/components/text-field#number | Number TextField Demos}\n * @see {@link https://react-md.dev/hooks/use-number-field | useNumberField Demos}\n * @see {@link useTextField}\n */\nexport function useNumberField(\n  options: NumberFieldHookOptions\n): NumberFieldWithMessageImplementation;\n\n/**\n * @internal\n * @see {@link https://react-md.dev/components/text-field#number | Number TextField Demos}\n * @see {@link https://react-md.dev/hooks/use-number-field | useNumberField Demos}\n * @see {@link useTextField}\n * @see {@link useNumberField} overrides for other examples.\n */\nexport function useNumberField(\n  options: NumberFieldHookOptions\n): ValidatedNumberFieldImplementation {\n  const {\n    min,\n    max,\n    step,\n    onBlur = noop,\n    onChange = noop,\n    updateValue = \"change\",\n    updateValueOnBlur = true,\n    defaultValue,\n    ...textOptions\n  } = options;\n\n  const [number, setNumber] = useState(defaultValue);\n  const initial = useRef(number);\n  const {\n    value: _value,\n    reset: resetTextField,\n    fieldProps,\n    setState: setTextFieldState,\n    ...remaining\n  } = useTextField({\n    ...textOptions,\n    isNumber: true,\n    defaultValue: `${number ?? \"\"}`,\n    onBlur(event) {\n      onBlur(event);\n      if (event.isPropagationStopped()) {\n        return;\n      }\n\n      const input = event.currentTarget;\n      input.setCustomValidity(\"\");\n      input.checkValidity();\n      if (\n        !updateValueOnBlur ||\n        // do nothing else since it's a weird value like: `\"--0\"` which causes\n        // the value to be `\"\"` and `numberAsValue` to be `NaN`\n        input.validity.badInput\n      ) {\n        return;\n      }\n\n      let value = input.valueAsNumber;\n      if (input.value === \"\" && typeof initial.current === \"number\") {\n        value = min ?? initial.current;\n      }\n\n      // can't have both rangeUnderflow and rangeOverflow at the same time, so\n      // it's \"safe\" to always provide both\n      value = withinRange({ min, max, value });\n      if (!Number.isNaN(value)) {\n        setNumber(value);\n        input.value = `${value}`;\n      } else if (typeof initial.current === \"undefined\") {\n        setNumber(undefined);\n      }\n    },\n    onChange(event) {\n      onChange(event);\n      if (event.isPropagationStopped() || updateValue === \"blur\") {\n        return;\n      }\n\n      const input = event.currentTarget;\n      input.checkValidity();\n      const value = withinRange({\n        min,\n        max,\n        value: event.currentTarget.valueAsNumber,\n      });\n      if (\n        !input.validity.valid &&\n        !input.validity.rangeUnderflow &&\n        !input.validity.rangeOverflow\n      ) {\n        return;\n      }\n\n      if (!Number.isNaN(value)) {\n        setNumber(value);\n      } else if (initial.current === undefined) {\n        setNumber(undefined);\n      }\n    },\n  });\n\n  const reset = useCallback(() => {\n    resetTextField();\n    setNumber(initial.current);\n  }, [resetTextField]);\n  const setState = useCallback<UseStateSetter<NumberFieldHookState>>(\n    (nextState) => {\n      if (typeof nextState === \"function\") {\n        setNumber((prevNumber) => {\n          let nextNumber: number | undefined = prevNumber;\n          setTextFieldState((prevState) => {\n            const updated = nextState({\n              ...prevState,\n              value: prevNumber,\n            });\n\n            nextNumber = updated.value;\n\n            return {\n              ...updated,\n              value: `${nextNumber ?? \"\"}`,\n            };\n          });\n\n          return nextNumber;\n        });\n        return;\n      }\n\n      const { value, error, errorMessage } = nextState;\n      setNumber(value);\n      setTextFieldState({\n        value: `${value ?? \"\"}`,\n        error,\n        errorMessage,\n      });\n    },\n    [setTextFieldState]\n  );\n\n  return {\n    ...remaining,\n    reset,\n    value: number,\n    setState,\n    fieldProps: {\n      ...fieldProps,\n      min,\n      max,\n      step,\n      type: \"number\",\n    },\n  };\n}\n"],"names":["useCallback","useRef","useState","withinRange","useTextField","noop","useNumberField","options","min","max","step","onBlur","onChange","updateValue","updateValueOnBlur","defaultValue","textOptions","number","setNumber","initial","value","_value","reset","resetTextField","fieldProps","setState","setTextFieldState","remaining","isNumber","event","isPropagationStopped","input","currentTarget","setCustomValidity","checkValidity","validity","badInput","valueAsNumber","current","Number","isNaN","undefined","valid","rangeUnderflow","rangeOverflow","nextState","prevNumber","nextNumber","prevState","updated","error","errorMessage","type"],"mappings":"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"}
+{"version":3,"sources":["../../src/form/useNumberField.ts"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useRef, useState } from \"react\";\n\nimport { type UseStateInitializer, type UseStateSetter } from \"../types.js\";\nimport { withinRange } from \"../utils/withinRange.js\";\nimport { useFormReset } from \"./useFormReset.js\";\nimport {\n  type ProvidedTextFieldMessageProps,\n  type ProvidedTextFieldProps,\n  type TextFieldHookOptions,\n  type TextFieldHookState,\n  type TextFieldImplementation,\n  type ValidatedTextFieldImplementation,\n  useTextField,\n} from \"./useTextField.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/** @since 2.5.0 */\nexport interface NumberFieldConstraints {\n  /**\n   * An optional min value for the number field.\n   */\n  min?: number;\n\n  /**\n   * An optional max value for the number field.\n   */\n  max?: number;\n\n  /**\n   * An optional step amount to use.\n   *\n   * Note: The `min` and `max` values must be divisible by this value when any\n   * are defined.\n   */\n  step?: number;\n}\n\n/**\n * @since 2.5.0\n * @since 6.0.0\n * - Removed `updateOnChange` in favor of `updateValue`\n * - Renamed `fixOnBlur` to `updateValueOnBlur`\n */\nexport interface NumberFieldHookOptions\n  extends Omit<TextFieldHookOptions, \"defaultValue\" | \"isNumber\">,\n    NumberFieldConstraints {\n  /**\n   * @defaultValue `undefined`\n   */\n  defaultValue?: UseStateInitializer<number>;\n\n  /**\n   * This controls the behavior for the `value` returned by this hook. If you\n   * need access to the current value immediately as the user types to update\n   * other components, keep this as the default of `\"change\"`. Otherwise, set\n   * this to `\"blur\"`.\n   *\n   * @example Deferring Updates on Blur\n   * ```tsx\n   * import { TextField } from \"@react-md/core/form/TextField\";\n   * import { useNumberField } from \"@react-md/core/form/useNumberField\";\n   * import type { ReactElement } from \"react\";\n   *\n   * function Example(): ReactElement {\n   *   const { fieldProps, value } = useNumberField({\n   *     min: 0,\n   *     max: 100,\n   *     name: \"someName\",\n   *     defaultValue: 0,\n   *     updateValue: \"blur\",\n   *   });\n   *\n   *   const result = useMemo(() => someExpensiveComputation(value), [value]);\n   *\n   *   return <TextField {...fieldProps} label=\"Label\" />;\n   * }\n   * ```\n   *\n   * @defaultValue `\"change\"`\n   */\n  updateValue?: \"blur\" | \"change\";\n\n  /**\n   * This option is used to update the `number` value and text field value to be\n   * within the `min` and `max` range or just format the text field value when\n   * the input is blurred. This update will only be applied if the text field\n   * contains a valid number. Using `min = 0` and `max = 10`:\n   *\n   * | text value | updated value |\n   * | ---------- | ------------- |\n   * | 000001     | 1             |\n   * | -1         | 0             |\n   * | 20         | 10            |\n   * | -12        | 0             |\n   * | --1        | --1           |\n   * | fjdka      | fjdka         |\n   *\n   *\n   * Set this to `false` if no changed should be applied and force the user to\n   * fix any min/max errors manually and maintain weird formatting.\n   *\n   * @defaultValue `true`\n   * @since 6.0.0 This was renamed from `fixOnBlur` and removed the\n   * `\"min\"` and `\"max\"` behavior.\n   */\n  updateValueOnBlur?: boolean;\n}\n\n/** @since 6.0.0 */\nexport interface NumberFieldHookState\n  extends Omit<TextFieldHookState, \"value\"> {\n  value: number | undefined;\n}\n\n/** @since 2.5.6 */\nexport interface ProvidedNumberFieldProps\n  extends ProvidedTextFieldProps,\n    NumberFieldConstraints {\n  type: \"number\";\n}\n\n/** @since 2.5.6 */\nexport interface ProvidedNumberFieldMessageProps\n  extends ProvidedTextFieldMessageProps,\n    NumberFieldConstraints {\n  type: \"number\";\n}\n\n/** @since 6.0.0 */\nexport interface NumberFieldImplementation\n  extends Omit<TextFieldImplementation, \"value\" | \"setState\"> {\n  value: number | undefined;\n  setState: UseStateSetter<NumberFieldHookState>;\n  fieldProps: ProvidedNumberFieldProps;\n}\n\n/** @since 6.0.0 */\nexport interface NumberFieldWithMessageImplementation\n  extends NumberFieldImplementation {\n  fieldProps: ProvidedNumberFieldMessageProps;\n}\n\n/** @since 6.0.0 */\nexport interface ValidatedNumberFieldImplementation\n  extends Omit<ValidatedTextFieldImplementation, \"value\" | \"setState\"> {\n  value: number | undefined;\n  setState: UseStateSetter<NumberFieldHookState>;\n  fieldProps: ProvidedNumberFieldProps | ProvidedNumberFieldMessageProps;\n}\n\n/**\n * @example Enforce Number Value and No Error Messages\n * ```tsx\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { useNumberField } from \"@react-md/core/form/useNumberField\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps, value } = useNumberField({\n *     min: 0,\n *     max: 100,\n *     name: \"someName\",\n *     defaultValue: 0,\n *     disableMessage: true,\n *   });\n *\n *   // this is safe since `value` will always be a number even if there is a\n *   // validation error. since the min and max options were provided as well,\n *   // number will be between that range as well.\n *   const computed = value * 10;\n *\n *   return <TextField {...fieldProps} label=\"Label\" />;\n * }\n * ```\n *\n * @see {@link useTextField}\n * @see {@link useNumberField} overrides for other examples.\n * ```\n */\nexport function useNumberField(\n  options: NumberFieldHookOptions & {\n    disableMessage: true;\n    defaultValue: UseStateInitializer<number>;\n  }\n): NumberFieldImplementation & {\n  value: number;\n  setState: UseStateSetter<NumberFieldHookState & { value: number }>;\n};\n\n/**\n * @example No Error Messages\n * ```tsx\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { useNumberField } from \"@react-md/core/form/useNumberField\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps, value } = useNumberField({\n *     min: 0,\n *     max: 100,\n *     name: \"someName\",\n *     disableMessage: true,\n *   });\n *\n *   // `value` will be `undefined` until the user enters a valid value once\n *   // there is a valid value, `value` will be a `number`. So this might cause\n *   // `computed` to be `NaN | number`\n *   //\n *   // const computed = value * 10;\n *\n *   return <TextField {...fieldProps} label=\"Label\" />;\n * }\n * ```\n *\n * @see {@link useTextField}\n * @see {@link useNumberField} overrides for other examples.\n */\nexport function useNumberField(\n  options: NumberFieldHookOptions & { disableMessage: true }\n): NumberFieldImplementation;\n\n/**\n * @example Enforce Number Value\n * ```tsx\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { useNumberField } from \"@react-md/core/form/useNumberField\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps, value } = useNumberField({\n *     min: 0,\n *     max: 100,\n *     name: \"someName\",\n *     defaultValue: 0,\n *   });\n *\n *   // this is safe since `value` will always be a number even if there is a\n *   // validation error. since the min and max options were provided as well,\n *   // number will be between that range as well.\n *   const computed = value * 10;\n *\n *   return <TextField {...fieldProps} label=\"Label\" />;\n * }\n * ```\n *\n * @example Enforce Number Value and Deferring Updates\n * ```tsx\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { useNumberField } from \"@react-md/core/form/useNumberField\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps, value } = useNumberField({\n *     min: 0,\n *     max: 100,\n *     name: \"someName\",\n *     defaultValue: 0,\n *     updateValue: \"blur\",\n *   });\n *\n *   // the `value` will only be updated whenever the `TextField` is blurred.\n *   // This is helpful if the `value` is used in expensive computations or\n *   // updates that do not need to be updated as the user types\n *   const computed = value * 10;\n *\n *   return <TextField {...fieldProps} label=\"Label\" />;\n * }\n * ```\n *\n * @see {@link useTextField}\n * @see {@link useNumberField} overrides for other examples.\n */\nexport function useNumberField(\n  options: NumberFieldHookOptions & {\n    defaultValue: UseStateInitializer<number>;\n  }\n): NumberFieldWithMessageImplementation & {\n  value: number;\n  setState: UseStateSetter<NumberFieldHookState & { value: number }>;\n};\n\n/**\n * The `useNumberField` hook is used to control the state of a `TextField` or\n * `<input type=\"number\">`\n *\n * @example Default Implementation\n * ```tsx\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { useNumberField } from \"@react-md/core/form/useNumberField\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps, value } = useNumberField({\n *     name: \"someName\",\n *   });\n *\n *   // `value` will be `undefined` until the user enters a valid value once\n *   // there is a valid value, `value` will be a `number`. So this might cause\n *   // `computed` to be `NaN | number`\n *   //\n *   // const computed = value * 10;\n *\n *   // whenever there is an error, an error message will be displayed below the\n *   // `TextField`\n *   return <TextField {...fieldProps} label=\"Label\" />;\n * }\n * ```\n *\n * @example Adding Constraints\n * ```tsx\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { useNumberField } from \"@react-md/core/form/useNumberField\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps, value } = useNumberField({\n *     name: \"someName\",\n *     min: 0,\n *     max: 100,\n *     step: 2,\n *     required: true,\n *   });\n *\n *   return <TextField {...fieldProps} label=\"Label\" />;\n * }\n * ```\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation\n * @see {@link https://react-md.dev/components/text-field#number | Number TextField Demos}\n * @see {@link https://react-md.dev/hooks/use-number-field | useNumberField Demos}\n * @see {@link useTextField}\n */\nexport function useNumberField(\n  options: NumberFieldHookOptions\n): NumberFieldWithMessageImplementation;\n\n/**\n * @internal\n * @see {@link https://react-md.dev/components/text-field#number | Number TextField Demos}\n * @see {@link https://react-md.dev/hooks/use-number-field | useNumberField Demos}\n * @see {@link useTextField}\n * @see {@link useNumberField} overrides for other examples.\n */\nexport function useNumberField(\n  options: NumberFieldHookOptions\n): ValidatedNumberFieldImplementation {\n  const {\n    min,\n    max,\n    step,\n    form,\n    onBlur = noop,\n    onChange = noop,\n    updateValue = \"change\",\n    updateValueOnBlur = true,\n    disableReset,\n    defaultValue,\n    ...textOptions\n  } = options;\n\n  const [number, setNumber] = useState(defaultValue);\n  const initial = useRef(number);\n  const {\n    value: _value,\n    reset: resetTextField,\n    fieldRef,\n    fieldProps,\n    setState: setTextFieldState,\n    ...remaining\n  } = useTextField({\n    ...textOptions,\n    isNumber: true,\n    defaultValue: `${number ?? \"\"}`,\n    disableReset: true,\n    onBlur(event) {\n      onBlur(event);\n      if (event.isPropagationStopped()) {\n        return;\n      }\n\n      const input = event.currentTarget;\n      input.setCustomValidity(\"\");\n      input.checkValidity();\n      if (\n        !updateValueOnBlur ||\n        // do nothing else since it's a weird value like: `\"--0\"` which causes\n        // the value to be `\"\"` and `numberAsValue` to be `NaN`\n        input.validity.badInput\n      ) {\n        return;\n      }\n\n      let value = input.valueAsNumber;\n      if (input.value === \"\" && typeof initial.current === \"number\") {\n        value = min ?? initial.current;\n      }\n\n      // can't have both rangeUnderflow and rangeOverflow at the same time, so\n      // it's \"safe\" to always provide both\n      value = withinRange({ min, max, value });\n      if (!Number.isNaN(value)) {\n        setNumber(value);\n        input.value = `${value}`;\n      } else if (typeof initial.current === \"undefined\") {\n        setNumber(undefined);\n      }\n    },\n    onChange(event) {\n      onChange(event);\n      if (event.isPropagationStopped() || updateValue === \"blur\") {\n        return;\n      }\n\n      const input = event.currentTarget;\n      input.checkValidity();\n      const value = withinRange({\n        min,\n        max,\n        value: event.currentTarget.valueAsNumber,\n      });\n      if (\n        !input.validity.valid &&\n        !input.validity.rangeUnderflow &&\n        !input.validity.rangeOverflow\n      ) {\n        return;\n      }\n\n      if (!Number.isNaN(value)) {\n        setNumber(value);\n      } else if (initial.current === undefined) {\n        setNumber(undefined);\n      }\n    },\n  });\n\n  const reset = useCallback(() => {\n    resetTextField();\n    setNumber(initial.current);\n  }, [resetTextField]);\n  const setState = useCallback<UseStateSetter<NumberFieldHookState>>(\n    (nextState) => {\n      if (typeof nextState === \"function\") {\n        setNumber((prevNumber) => {\n          let nextNumber: number | undefined = prevNumber;\n          setTextFieldState((prevState) => {\n            const updated = nextState({\n              ...prevState,\n              value: prevNumber,\n            });\n\n            nextNumber = updated.value;\n\n            return {\n              ...updated,\n              value: `${nextNumber ?? \"\"}`,\n            };\n          });\n\n          return nextNumber;\n        });\n        return;\n      }\n\n      const { value, error, errorMessage } = nextState;\n      setNumber(value);\n      setTextFieldState({\n        value: `${value ?? \"\"}`,\n        error,\n        errorMessage,\n      });\n    },\n    [setTextFieldState]\n  );\n\n  useFormReset({\n    form,\n    elementRef: fieldRef,\n    onReset: disableReset ? undefined : reset,\n  });\n\n  return {\n    ...remaining,\n    reset,\n    value: number,\n    setState,\n    fieldRef,\n    fieldProps: {\n      ...fieldProps,\n      min,\n      max,\n      step,\n      type: \"number\",\n    },\n  };\n}\n"],"names":["useCallback","useRef","useState","withinRange","useFormReset","useTextField","noop","useNumberField","options","min","max","step","form","onBlur","onChange","updateValue","updateValueOnBlur","disableReset","defaultValue","textOptions","number","setNumber","initial","value","_value","reset","resetTextField","fieldRef","fieldProps","setState","setTextFieldState","remaining","isNumber","event","isPropagationStopped","input","currentTarget","setCustomValidity","checkValidity","validity","badInput","valueAsNumber","current","Number","isNaN","undefined","valid","rangeUnderflow","rangeOverflow","nextState","prevNumber","nextNumber","prevState","updated","error","errorMessage","elementRef","onReset","type"],"mappings":"AAAA;AAEA,SAASA,WAAW,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAGtD,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,YAAY,QAAQ,oBAAoB;AACjD,SAOEC,YAAY,QACP,oBAAoB;AAE3B,MAAMC,OAAO;AACX,aAAa;AACf;AAkUA;;;;;;CAMC,GACD,OAAO,SAASC,eACdC,OAA+B;IAE/B,MAAM,EACJC,GAAG,EACHC,GAAG,EACHC,IAAI,EACJC,IAAI,EACJC,SAASP,IAAI,EACbQ,WAAWR,IAAI,EACfS,cAAc,QAAQ,EACtBC,oBAAoB,IAAI,EACxBC,YAAY,EACZC,YAAY,EACZ,GAAGC,aACJ,GAAGX;IAEJ,MAAM,CAACY,QAAQC,UAAU,GAAGnB,SAASgB;IACrC,MAAMI,UAAUrB,OAAOmB;IACvB,MAAM,EACJG,OAAOC,MAAM,EACbC,OAAOC,cAAc,EACrBC,QAAQ,EACRC,UAAU,EACVC,UAAUC,iBAAiB,EAC3B,GAAGC,WACJ,GAAG1B,aAAa;QACf,GAAGc,WAAW;QACda,UAAU;QACVd,cAAc,GAAGE,UAAU,IAAI;QAC/BH,cAAc;QACdJ,QAAOoB,KAAK;YACVpB,OAAOoB;YACP,IAAIA,MAAMC,oBAAoB,IAAI;gBAChC;YACF;YAEA,MAAMC,QAAQF,MAAMG,aAAa;YACjCD,MAAME,iBAAiB,CAAC;YACxBF,MAAMG,aAAa;YACnB,IACE,CAACtB,qBACD,sEAAsE;YACtE,uDAAuD;YACvDmB,MAAMI,QAAQ,CAACC,QAAQ,EACvB;gBACA;YACF;YAEA,IAAIjB,QAAQY,MAAMM,aAAa;YAC/B,IAAIN,MAAMZ,KAAK,KAAK,MAAM,OAAOD,QAAQoB,OAAO,KAAK,UAAU;gBAC7DnB,QAAQd,OAAOa,QAAQoB,OAAO;YAChC;YAEA,wEAAwE;YACxE,qCAAqC;YACrCnB,QAAQpB,YAAY;gBAAEM;gBAAKC;gBAAKa;YAAM;YACtC,IAAI,CAACoB,OAAOC,KAAK,CAACrB,QAAQ;gBACxBF,UAAUE;gBACVY,MAAMZ,KAAK,GAAG,GAAGA,OAAO;YAC1B,OAAO,IAAI,OAAOD,QAAQoB,OAAO,KAAK,aAAa;gBACjDrB,UAAUwB;YACZ;QACF;QACA/B,UAASmB,KAAK;YACZnB,SAASmB;YACT,IAAIA,MAAMC,oBAAoB,MAAMnB,gBAAgB,QAAQ;gBAC1D;YACF;YAEA,MAAMoB,QAAQF,MAAMG,aAAa;YACjCD,MAAMG,aAAa;YACnB,MAAMf,QAAQpB,YAAY;gBACxBM;gBACAC;gBACAa,OAAOU,MAAMG,aAAa,CAACK,aAAa;YAC1C;YACA,IACE,CAACN,MAAMI,QAAQ,CAACO,KAAK,IACrB,CAACX,MAAMI,QAAQ,CAACQ,cAAc,IAC9B,CAACZ,MAAMI,QAAQ,CAACS,aAAa,EAC7B;gBACA;YACF;YAEA,IAAI,CAACL,OAAOC,KAAK,CAACrB,QAAQ;gBACxBF,UAAUE;YACZ,OAAO,IAAID,QAAQoB,OAAO,KAAKG,WAAW;gBACxCxB,UAAUwB;YACZ;QACF;IACF;IAEA,MAAMpB,QAAQzB,YAAY;QACxB0B;QACAL,UAAUC,QAAQoB,OAAO;IAC3B,GAAG;QAAChB;KAAe;IACnB,MAAMG,WAAW7B,YACf,CAACiD;QACC,IAAI,OAAOA,cAAc,YAAY;YACnC5B,UAAU,CAAC6B;gBACT,IAAIC,aAAiCD;gBACrCpB,kBAAkB,CAACsB;oBACjB,MAAMC,UAAUJ,UAAU;wBACxB,GAAGG,SAAS;wBACZ7B,OAAO2B;oBACT;oBAEAC,aAAaE,QAAQ9B,KAAK;oBAE1B,OAAO;wBACL,GAAG8B,OAAO;wBACV9B,OAAO,GAAG4B,cAAc,IAAI;oBAC9B;gBACF;gBAEA,OAAOA;YACT;YACA;QACF;QAEA,MAAM,EAAE5B,KAAK,EAAE+B,KAAK,EAAEC,YAAY,EAAE,GAAGN;QACvC5B,UAAUE;QACVO,kBAAkB;YAChBP,OAAO,GAAGA,SAAS,IAAI;YACvB+B;YACAC;QACF;IACF,GACA;QAACzB;KAAkB;IAGrB1B,aAAa;QACXQ;QACA4C,YAAY7B;QACZ8B,SAASxC,eAAe4B,YAAYpB;IACtC;IAEA,OAAO;QACL,GAAGM,SAAS;QACZN;QACAF,OAAOH;QACPS;QACAF;QACAC,YAAY;YACV,GAAGA,UAAU;YACbnB;YACAC;YACAC;YACA+C,MAAM;QACR;IACF;AACF"}

package/dist/form/useSelectCombobox.js

@@ -8,7 +8,7 @@ import { useCombobox } from "./useCombobox.js";
         ...comboboxOptions,
         searchable: true,
         extendKeyDown (movementData) {
-            const { event, show, focusLast, visible } = movementData;
+            const { event, show, focusLastRef, visible } = movementData;
             if (visible) {
                 return;
             }
@@ -18,7 +18,7 @@ import { useCombobox } from "./useCombobox.js";
                 case "End":
                     event.preventDefault();
                     event.stopPropagation();
-                    focusLast.current = event.key === "End";
+                    focusLastRef.current = event.key === "End";
                     show();
                     break;
             }

package/dist/form/useSelectCombobox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/useSelectCombobox.ts"],"sourcesContent":["\"use client\";\n\nimport {\n  type ComboboxImplementation,\n  type ConfigurableComboboxOptions,\n  useCombobox,\n} from \"./useCombobox.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface SelectComboboxOptions<\n  ComboboxEl extends HTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends ConfigurableComboboxOptions<ComboboxEl, PopupEl> {\n  value: string;\n  values: readonly string[];\n}\n\n/**\n * @since 6.0.0\n */\nexport type SelectComboboxImplementation<\n  ComboboxEl extends HTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> = ComboboxImplementation<ComboboxEl, PopupEl>;\n\n/**\n * @since 6.0.0\n */\nexport function useSelectCombobox<\n  ComboboxEl extends HTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n>(\n  options: SelectComboboxOptions<ComboboxEl, PopupEl>\n): SelectComboboxImplementation<ComboboxEl, PopupEl> {\n  const { value, values, ...comboboxOptions } = options;\n\n  return useCombobox({\n    ...comboboxOptions,\n    searchable: true,\n    extendKeyDown(movementData) {\n      const { event, show, focusLast, visible } = movementData;\n      if (visible) {\n        return;\n      }\n\n      switch (event.key) {\n        case \" \":\n        case \"Home\":\n        case \"End\":\n          event.preventDefault();\n          event.stopPropagation();\n          focusLast.current = event.key === \"End\";\n          show();\n          break;\n      }\n    },\n    getEnterDefaultFocusedIndex(options) {\n      const { focusLast } = options;\n      if (focusLast && !value) {\n        return values.length - 1;\n      }\n\n      return Math.max(\n        0,\n        values.findIndex((option) => option === value)\n      );\n    },\n  });\n}\n"],"names":["useCombobox","useSelectCombobox","options","value","values","comboboxOptions","searchable","extendKeyDown","movementData","event","show","focusLast","visible","key","preventDefault","stopPropagation","current","getEnterDefaultFocusedIndex","length","Math","max","findIndex","option"],"mappings":"AAAA;AAEA,SAGEA,WAAW,QACN,mBAAmB;AAqB1B;;CAEC,GACD,OAAO,SAASC,kBAIdC,OAAmD;IAEnD,MAAM,EAAEC,KAAK,EAAEC,MAAM,EAAE,GAAGC,iBAAiB,GAAGH;IAE9C,OAAOF,YAAY;QACjB,GAAGK,eAAe;QAClBC,YAAY;QACZC,eAAcC,YAAY;YACxB,MAAM,EAAEC,KAAK,EAAEC,IAAI,EAAEC,SAAS,EAAEC,OAAO,EAAE,GAAGJ;YAC5C,IAAII,SAAS;gBACX;YACF;YAEA,OAAQH,MAAMI,GAAG;gBACf,KAAK;gBACL,KAAK;gBACL,KAAK;oBACHJ,MAAMK,cAAc;oBACpBL,MAAMM,eAAe;oBACrBJ,UAAUK,OAAO,GAAGP,MAAMI,GAAG,KAAK;oBAClCH;oBACA;YACJ;QACF;QACAO,6BAA4Bf,OAAO;YACjC,MAAM,EAAES,SAAS,EAAE,GAAGT;YACtB,IAAIS,aAAa,CAACR,OAAO;gBACvB,OAAOC,OAAOc,MAAM,GAAG;YACzB;YAEA,OAAOC,KAAKC,GAAG,CACb,GACAhB,OAAOiB,SAAS,CAAC,CAACC,SAAWA,WAAWnB;QAE5C;IACF;AACF"}
+{"version":3,"sources":["../../src/form/useSelectCombobox.ts"],"sourcesContent":["\"use client\";\n\nimport {\n  type ComboboxImplementation,\n  type ConfigurableComboboxOptions,\n  useCombobox,\n} from \"./useCombobox.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface SelectComboboxOptions<\n  ComboboxEl extends HTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends ConfigurableComboboxOptions<ComboboxEl, PopupEl> {\n  value: string;\n  values: readonly string[];\n}\n\n/**\n * @since 6.0.0\n */\nexport type SelectComboboxImplementation<\n  ComboboxEl extends HTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> = ComboboxImplementation<ComboboxEl, PopupEl>;\n\n/**\n * @since 6.0.0\n */\nexport function useSelectCombobox<\n  ComboboxEl extends HTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n>(\n  options: SelectComboboxOptions<ComboboxEl, PopupEl>\n): SelectComboboxImplementation<ComboboxEl, PopupEl> {\n  const { value, values, ...comboboxOptions } = options;\n\n  return useCombobox({\n    ...comboboxOptions,\n    searchable: true,\n    extendKeyDown(movementData) {\n      const { event, show, focusLastRef, visible } = movementData;\n      if (visible) {\n        return;\n      }\n\n      switch (event.key) {\n        case \" \":\n        case \"Home\":\n        case \"End\":\n          event.preventDefault();\n          event.stopPropagation();\n          focusLastRef.current = event.key === \"End\";\n          show();\n          break;\n      }\n    },\n    getEnterDefaultFocusedIndex(options) {\n      const { focusLast } = options;\n      if (focusLast && !value) {\n        return values.length - 1;\n      }\n\n      return Math.max(\n        0,\n        values.findIndex((option) => option === value)\n      );\n    },\n  });\n}\n"],"names":["useCombobox","useSelectCombobox","options","value","values","comboboxOptions","searchable","extendKeyDown","movementData","event","show","focusLastRef","visible","key","preventDefault","stopPropagation","current","getEnterDefaultFocusedIndex","focusLast","length","Math","max","findIndex","option"],"mappings":"AAAA;AAEA,SAGEA,WAAW,QACN,mBAAmB;AAqB1B;;CAEC,GACD,OAAO,SAASC,kBAIdC,OAAmD;IAEnD,MAAM,EAAEC,KAAK,EAAEC,MAAM,EAAE,GAAGC,iBAAiB,GAAGH;IAE9C,OAAOF,YAAY;QACjB,GAAGK,eAAe;QAClBC,YAAY;QACZC,eAAcC,YAAY;YACxB,MAAM,EAAEC,KAAK,EAAEC,IAAI,EAAEC,YAAY,EAAEC,OAAO,EAAE,GAAGJ;YAC/C,IAAII,SAAS;gBACX;YACF;YAEA,OAAQH,MAAMI,GAAG;gBACf,KAAK;gBACL,KAAK;gBACL,KAAK;oBACHJ,MAAMK,cAAc;oBACpBL,MAAMM,eAAe;oBACrBJ,aAAaK,OAAO,GAAGP,MAAMI,GAAG,KAAK;oBACrCH;oBACA;YACJ;QACF;QACAO,6BAA4Bf,OAAO;YACjC,MAAM,EAAEgB,SAAS,EAAE,GAAGhB;YACtB,IAAIgB,aAAa,CAACf,OAAO;gBACvB,OAAOC,OAAOe,MAAM,GAAG;YACzB;YAEA,OAAOC,KAAKC,GAAG,CACb,GACAjB,OAAOkB,SAAS,CAAC,CAACC,SAAWA,WAAWpB;QAE5C;IACF;AACF"}