@react-md/core 1.0.0-next.13 → 1.0.0-next.15

package/dist/form/useRadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/useRadioGroup.ts"],"sourcesContent":["\"use client\";\nimport {\n  useCallback,\n  useRef,\n  useState,\n  type ChangeEventHandler,\n  type FormEventHandler,\n} from \"react\";\nimport { type UseStateInitializer, type UseStateSetter } from \"../types.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/** @since 6.0.0 */\nexport interface RadioGroupOptions<T extends string | number> {\n  /**\n   * A `name` to apply to all the radios within the group. This is required if\n   * unless {@link menu} is set to `true`.\n   */\n  name?: string;\n\n  /**\n   * Set this to `true` if using the `MenuItemRadio` component instead of the\n   * `Radio` so the correct props can be provided.\n   *\n   * @defaultValue `false`\n   */\n  menu?: boolean;\n\n  /**\n   * The value of a radio that should be checked by default. If you want to\n   * force the user to select one of the radios, keep this as the empty string\n   * or set it to a string or number that does not represent a valid radio\n   * value.\n   *\n   * @defaultValue `\"\"`\n   */\n  defaultValue?: UseStateInitializer<T>;\n\n  /**\n   * Set this to `true` if one of the radios within the group must be checked before\n   * a form can be submitted.\n   *\n   * This option is invalid and will be ignored if {@link menu} is `true`.\n   *\n   * @defaultValue `false`\n   */\n  required?: boolean;\n\n  /**\n   * If you need to prevent the default behavior in a radio group for some\n   * reason, you can provide a custom `onChange` event handler and call\n   * `event.stopPropagation()`. This will be called whenever a new radio button\n   * is checked.\n   *\n   * This option is invalid and will be ignored if {@link menu} is `true`.\n   *\n   * @defaultValue `() => {}`\n   */\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n\n  /**\n   * If the radio group has {@link required} set to `true`, the radios will gain\n   * the `error` state if a form is submitted without a checked radio. If you\n   * want to prevent that behavior for some reason, you can provide this\n   * function and call `event.stopPropagation()`.\n   *\n   * This option is invalid and will be ignored if {@link menu} is `true`.\n   *\n   * @defaultValue `() => {}`\n   */\n  onInvalid?: FormEventHandler<HTMLInputElement>;\n}\n\n/** @since 6.0.0 */\nexport interface ProvidedRadioGroupProps<V extends string | number> {\n  name: string;\n  value: V;\n  checked: boolean;\n  onChange: ChangeEventHandler<HTMLInputElement>;\n  error: boolean;\n  required: boolean;\n  onInvalid: FormEventHandler<HTMLInputElement>;\n}\n\n/** @since 6.0.0 */\nexport type GetRadioGroupProps<V extends string | number> = (\n  value: V\n) => Readonly<ProvidedRadioGroupProps<V>>;\n\n/** @since 6.0.0 */\nexport interface RadioGroupImplementation<V extends string | number> {\n  reset(): void;\n  value: V;\n  setValue: UseStateSetter<V>;\n  getRadioProps: GetRadioGroupProps<V>;\n}\n\nexport type GetMenuItemRadioGroupProps<V extends string | number> = (\n  value: V\n) => Readonly<{ checked: boolean; onCheckedChange(): void }>;\n\n/** @since 6.0.0 */\nexport interface MenuItemRadioGroupImplementation<V extends string | number> {\n  reset(): void;\n  value: V;\n  setValue: UseStateSetter<V>;\n  getRadioProps: GetMenuItemRadioGroupProps<V>;\n}\n\n/** @since 6.0.0 */\nexport interface CombinedRadioGroupReturnValue<V extends string | number> {\n  reset(): void;\n  value: V;\n  setValue: UseStateSetter<V>;\n  getRadioProps?(value: V): {\n    name?: string;\n    value?: V;\n    checked: boolean;\n    error?: boolean;\n    required?: boolean;\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    onCheckedChange?(): void;\n    onInvalid?: FormEventHandler<HTMLInputElement>;\n  };\n}\n\n// Note: These overrides are set up so that the value will default to any\n// string.\n\n/**\n * @example Generic Number Example\n * ```tsx\n * const { value, getRadioProps } = useRadioGroup<number>({\n *   name: \"group\",\n *   defaultValue: -1\n * });\n *\n *\n * return (\n *   <>\n *     <Radio {...getRadioProps(0)} label=\"First\" />\n *     <Radio {...getRadioProps(1)} label=\"Second\" />\n *     <Radio {...getRadioProps(2)} label=\"Third\" />\n *   </>\n * );\n * ```\n * @since 6.0.0\n */\nexport function useRadioGroup<V extends number>(\n  options: RadioGroupOptions<V> & {\n    menu?: false;\n    name: string;\n    defaultValue: UseStateInitializer<V>;\n  }\n): RadioGroupImplementation<V>;\nexport function useRadioGroup<V extends number>(\n  options: RadioGroupOptions<V> & {\n    menu: true;\n    name?: never;\n    required?: never;\n    onChange?: never;\n    onInvalid?: never;\n    defaultValue: UseStateInitializer<V>;\n  }\n): MenuItemRadioGroupImplementation<V>;\n/**\n * @example Generic String Example\n * ```tsx\n * const { value, getRadioProps } = useRadioGroup({ name: \"group\" });\n *\n * return (\n *   <>\n *     <Radio {...getRadioProps(\"a\")} label=\"First\" />\n *     <Radio {...getRadioProps(\"b\")} label=\"Second\" />\n *     <Radio {...getRadioProps(\"c\")} label=\"Third\" />\n *   </>\n * );\n * ```\n *\n * @example String Union Example\n * ```tsx\n * const values = [\n *   { label: \"First\", value: \"a\" },\n *   { label: \"Second\", value: \"b\" },\n *   { label: \"Third\", value: \"c\" },\n * ] as const;\n *\n * type Values = typeof values[number][\"value\"];\n * //   ^ \"a\" | \"b\" | \"c\"\n *\n * const { value, getRadioProps } = useRadioGroup<Values | \"\">({\n *   name: \"group\",\n *   defaultValue: \"\",\n * });\n *\n *\n * return (\n *   <>\n *     {values.map(({ label, value }) => (\n *       <Radio {...getRadioProps(value)} key={value} label={label} />\n *     ))}\n *   </>\n * );\n * ```\n * @since 6.0.0\n */\nexport function useRadioGroup<V extends string>(\n  options: RadioGroupOptions<V> & {\n    menu?: false;\n    name: string;\n    defaultValue?: UseStateInitializer<V>;\n  }\n): RadioGroupImplementation<V>;\nexport function useRadioGroup<V extends string>(\n  options: RadioGroupOptions<V> & {\n    menu: true;\n    name?: never;\n    required?: never;\n    onChange?: never;\n    onInvalid?: never;\n    defaultValue?: UseStateInitializer<V>;\n  }\n): MenuItemRadioGroupImplementation<V>;\n/**\n * @example Strict Union Example\n * ```tsx\n * type ValidValues = 1 | 2 | 3 | 4 | \"\" | \"a\" | \"b\";\n *\n * const { value, getRadioProps } = useRadioGroup<ValidValues>({\n *   name: \"group\",\n *   defaultValue: \"\"\n * });\n *\n *\n * return (\n *   <>\n *     <Radio {...getRadioProps(1)} label=\"First\" />\n *     <Radio {...getRadioProps(2)} label=\"Second\" />\n *     <Radio {...getRadioProps(3)} label=\"Third\" />\n *     <Radio {...getRadioProps(4)} label=\"Forth\" />\n *     <Radio {...getRadioProps(\"a\")} label=\"Fifth\" />\n *     <Radio {...getRadioProps(\"b\")} label=\"Sixth\" />\n *     <Radio {...getRadioProps(\"c\")} label=\"Seventh\" />\n *   </>\n * );\n * ```\n * @since 6.0.0\n */\nexport function useRadioGroup<V extends string | number>(\n  options: RadioGroupOptions<V>\n): CombinedRadioGroupReturnValue<V> {\n  const {\n    name,\n    defaultValue,\n    menu = false,\n    required,\n    onChange = noop,\n    onInvalid = noop,\n  } = options;\n  const [value, setValue] = useState<V>(() => {\n    if (typeof defaultValue === \"function\") {\n      return defaultValue();\n    }\n\n    return defaultValue ?? (\"\" as V);\n  });\n  const initial = useRef(value);\n  const [error, setError] = useState(false);\n\n  return {\n    reset: useCallback(() => {\n      setError(false);\n      setValue(initial.current);\n    }, []),\n    value,\n    setValue,\n    getRadioProps(radioValue) {\n      const checked = value === radioValue;\n      if (menu) {\n        return {\n          checked,\n          onCheckedChange() {\n            setValue(radioValue);\n          },\n        };\n      }\n\n      return {\n        name,\n        value: radioValue,\n        error,\n        checked,\n        required,\n        onChange(event) {\n          onChange(event);\n          setError(false);\n          setValue(radioValue);\n        },\n        onInvalid(event) {\n          onInvalid(event);\n          setError(true);\n        },\n      };\n    },\n  };\n}\n"],"names":["useCallback","useRef","useState","noop","useRadioGroup","options","name","defaultValue","menu","required","onChange","onInvalid","value","setValue","initial","error","setError","reset","current","getRadioProps","radioValue","checked","onCheckedChange","event"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,SACEA,WAAW,EACXC,MAAM,EACNC,QAAQ,QAGH,QAAQ;AAGf,MAAMC,OAAO;AACX,aAAa;AACf;AAqNA;;;;;;;;;;;;;;;;;;;;;;;;CAwBC,GACD,OAAO,SAASC,cACdC,OAA6B;IAE7B,MAAM,EACJC,IAAI,EACJC,YAAY,EACZC,OAAO,KAAK,EACZC,QAAQ,EACRC,WAAWP,IAAI,EACfQ,YAAYR,IAAI,EACjB,GAAGE;IACJ,MAAM,CAACO,OAAOC,SAAS,GAAGX,SAAY;QACpC,IAAI,OAAOK,iBAAiB,YAAY;YACtC,OAAOA;QACT;QAEA,OAAOA,gBAAiB;IAC1B;IACA,MAAMO,UAAUb,OAAOW;IACvB,MAAM,CAACG,OAAOC,SAAS,GAAGd,SAAS;IAEnC,OAAO;QACLe,OAAOjB,YAAY;YACjBgB,SAAS;YACTH,SAASC,QAAQI,OAAO;QAC1B,GAAG,EAAE;QACLN;QACAC;QACAM,eAAcC,UAAU;YACtB,MAAMC,UAAUT,UAAUQ;YAC1B,IAAIZ,MAAM;gBACR,OAAO;oBACLa;oBACAC;wBACET,SAASO;oBACX;gBACF;YACF;YAEA,OAAO;gBACLd;gBACAM,OAAOQ;gBACPL;gBACAM;gBACAZ;gBACAC,UAASa,KAAK;oBACZb,SAASa;oBACTP,SAAS;oBACTH,SAASO;gBACX;gBACAT,WAAUY,KAAK;oBACbZ,UAAUY;oBACVP,SAAS;gBACX;YACF;QACF;IACF;AACF"}
+{"version":3,"sources":["../../src/form/useRadioGroup.ts"],"sourcesContent":["\"use client\";\nimport {\n  useCallback,\n  useRef,\n  useState,\n  type ChangeEventHandler,\n  type FormEventHandler,\n} from \"react\";\nimport { type UseStateInitializer, type UseStateSetter } from \"../types.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/** @since 6.0.0 */\nexport interface RadioGroupOptions<T extends string | number> {\n  /**\n   * A `name` to apply to all the radios within the group. This is required if\n   * unless {@link menu} is set to `true`.\n   */\n  name?: string;\n\n  /**\n   * Set this to `true` if using the `MenuItemRadio` component instead of the\n   * `Radio` so the correct props can be provided.\n   *\n   * @defaultValue `false`\n   */\n  menu?: boolean;\n\n  /**\n   * The value of a radio that should be checked by default. If you want to\n   * force the user to select one of the radios, keep this as the empty string\n   * or set it to a string or number that does not represent a valid radio\n   * value.\n   *\n   * @defaultValue `\"\"`\n   */\n  defaultValue?: UseStateInitializer<T>;\n\n  /**\n   * Set this to `true` if one of the radios within the group must be checked before\n   * a form can be submitted.\n   *\n   * This option is invalid and will be ignored if {@link menu} is `true`.\n   *\n   * @defaultValue `false`\n   */\n  required?: boolean;\n\n  /**\n   * If you need to prevent the default behavior in a radio group for some\n   * reason, you can provide a custom `onChange` event handler and call\n   * `event.stopPropagation()`. This will be called whenever a new radio button\n   * is checked.\n   *\n   * This option is invalid and will be ignored if {@link menu} is `true`.\n   *\n   * @defaultValue `() => {}`\n   */\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n\n  /**\n   * If the radio group has {@link required} set to `true`, the radios will gain\n   * the `error` state if a form is submitted without a checked radio. If you\n   * want to prevent that behavior for some reason, you can provide this\n   * function and call `event.stopPropagation()`.\n   *\n   * This option is invalid and will be ignored if {@link menu} is `true`.\n   *\n   * @defaultValue `() => {}`\n   */\n  onInvalid?: FormEventHandler<HTMLInputElement>;\n}\n\n/** @since 6.0.0 */\nexport interface ProvidedRadioGroupProps<V extends string | number> {\n  name: string;\n  value: V;\n  checked: boolean;\n  onChange: ChangeEventHandler<HTMLInputElement>;\n  error: boolean;\n  required: boolean;\n  onInvalid: FormEventHandler<HTMLInputElement>;\n}\n\n/** @since 6.0.0 */\nexport type GetRadioGroupProps<V extends string | number> = (\n  value: V\n) => Readonly<ProvidedRadioGroupProps<V>>;\n\n/** @since 6.0.0 */\nexport interface RadioGroupImplementation<V extends string | number> {\n  reset(): void;\n  value: V;\n  setValue: UseStateSetter<V>;\n  getRadioProps: GetRadioGroupProps<V>;\n}\n\nexport type GetMenuItemRadioGroupProps<V extends string | number> = (\n  value: V\n) => Readonly<{ checked: boolean; onCheckedChange(): void }>;\n\n/** @since 6.0.0 */\nexport interface MenuItemRadioGroupImplementation<V extends string | number> {\n  reset(): void;\n  value: V;\n  setValue: UseStateSetter<V>;\n  getRadioProps: GetMenuItemRadioGroupProps<V>;\n}\n\n/** @since 6.0.0 */\nexport interface CombinedRadioGroupReturnValue<V extends string | number> {\n  reset(): void;\n  value: V;\n  setValue: UseStateSetter<V>;\n  getRadioProps?(value: V): {\n    name?: string;\n    value?: V;\n    checked: boolean;\n    error?: boolean;\n    required?: boolean;\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    onCheckedChange?(): void;\n    onInvalid?: FormEventHandler<HTMLInputElement>;\n  };\n}\n\n// Note: These overrides are set up so that the value will default to any\n// string.\n\n/**\n * @example Generic Number Example\n * ```tsx\n * const { value, getRadioProps } = useRadioGroup<number>({\n *   name: \"group\",\n *   defaultValue: -1\n * });\n *\n *\n * return (\n *   <>\n *     <Radio {...getRadioProps(0)} label=\"First\" />\n *     <Radio {...getRadioProps(1)} label=\"Second\" />\n *     <Radio {...getRadioProps(2)} label=\"Third\" />\n *   </>\n * );\n * ```\n * @since 6.0.0\n */\nexport function useRadioGroup<V extends number>(\n  options: RadioGroupOptions<V> & {\n    menu?: false;\n    name: string;\n    defaultValue: UseStateInitializer<V>;\n  }\n): RadioGroupImplementation<V>;\nexport function useRadioGroup<V extends number>(\n  options: RadioGroupOptions<V> & {\n    menu: true;\n    name?: never;\n    required?: never;\n    onChange?: never;\n    onInvalid?: never;\n    defaultValue: UseStateInitializer<V>;\n  }\n): MenuItemRadioGroupImplementation<V>;\n/**\n * @example Generic String Example\n * ```tsx\n * const { value, getRadioProps } = useRadioGroup({ name: \"group\" });\n *\n * return (\n *   <>\n *     <Radio {...getRadioProps(\"a\")} label=\"First\" />\n *     <Radio {...getRadioProps(\"b\")} label=\"Second\" />\n *     <Radio {...getRadioProps(\"c\")} label=\"Third\" />\n *   </>\n * );\n * ```\n *\n * @example String Union Example\n * ```tsx\n * const values = [\n *   { label: \"First\", value: \"a\" },\n *   { label: \"Second\", value: \"b\" },\n *   { label: \"Third\", value: \"c\" },\n * ] as const;\n *\n * type Values = typeof values[number][\"value\"];\n * //   ^ \"a\" | \"b\" | \"c\"\n *\n * const { value, getRadioProps } = useRadioGroup<Values | \"\">({\n *   name: \"group\",\n *   defaultValue: \"\",\n * });\n *\n *\n * return (\n *   <>\n *     {values.map(({ label, value }) => (\n *       <Radio {...getRadioProps(value)} key={value} label={label} />\n *     ))}\n *   </>\n * );\n * ```\n * @since 6.0.0\n */\nexport function useRadioGroup<V extends string>(\n  options: RadioGroupOptions<V> & {\n    menu?: false;\n    name: string;\n    defaultValue?: UseStateInitializer<V>;\n  }\n): RadioGroupImplementation<V>;\nexport function useRadioGroup<V extends string>(\n  options: RadioGroupOptions<V> & {\n    menu: true;\n    name?: never;\n    required?: never;\n    onChange?: never;\n    onInvalid?: never;\n    defaultValue?: UseStateInitializer<V>;\n  }\n): MenuItemRadioGroupImplementation<V>;\n/**\n * @example Strict Union Example\n * ```tsx\n * type ValidValues = 1 | 2 | 3 | 4 | \"\" | \"a\" | \"b\";\n *\n * const { value, getRadioProps } = useRadioGroup<ValidValues>({\n *   name: \"group\",\n *   defaultValue: \"\"\n * });\n *\n *\n * return (\n *   <>\n *     <Radio {...getRadioProps(1)} label=\"First\" />\n *     <Radio {...getRadioProps(2)} label=\"Second\" />\n *     <Radio {...getRadioProps(3)} label=\"Third\" />\n *     <Radio {...getRadioProps(4)} label=\"Forth\" />\n *     <Radio {...getRadioProps(\"a\")} label=\"Fifth\" />\n *     <Radio {...getRadioProps(\"b\")} label=\"Sixth\" />\n *     <Radio {...getRadioProps(\"c\")} label=\"Seventh\" />\n *   </>\n * );\n * ```\n * @since 6.0.0\n */\nexport function useRadioGroup<V extends string | number>(\n  options: RadioGroupOptions<V>\n): CombinedRadioGroupReturnValue<V> {\n  const {\n    name,\n    defaultValue,\n    menu = false,\n    required,\n    onChange = noop,\n    onInvalid = noop,\n  } = options;\n  const [value, setValue] = useState<V>(() => {\n    if (typeof defaultValue === \"function\") {\n      return defaultValue();\n    }\n\n    return defaultValue ?? (\"\" as V);\n  });\n  const initial = useRef(value);\n  const [error, setError] = useState(false);\n\n  return {\n    reset: useCallback(() => {\n      setError(false);\n      setValue(initial.current);\n    }, []),\n    value,\n    setValue,\n    getRadioProps(radioValue) {\n      const checked = value === radioValue;\n      if (menu) {\n        return {\n          checked,\n          onCheckedChange() {\n            setValue(radioValue);\n          },\n        };\n      }\n\n      return {\n        name,\n        value: radioValue,\n        error,\n        checked,\n        required,\n        onChange(event) {\n          onChange(event);\n          setError(false);\n          setValue(radioValue);\n        },\n        onInvalid(event) {\n          onInvalid(event);\n          setError(true);\n        },\n      };\n    },\n  };\n}\n"],"names":["useCallback","useRef","useState","noop","useRadioGroup","options","name","defaultValue","menu","required","onChange","onInvalid","value","setValue","initial","error","setError","reset","current","getRadioProps","radioValue","checked","onCheckedChange","event"],"mappings":"AAAA;AACA,SACEA,WAAW,EACXC,MAAM,EACNC,QAAQ,QAGH,QAAQ;AAGf,MAAMC,OAAO;AACX,aAAa;AACf;AAqNA;;;;;;;;;;;;;;;;;;;;;;;;CAwBC,GACD,OAAO,SAASC,cACdC,OAA6B;IAE7B,MAAM,EACJC,IAAI,EACJC,YAAY,EACZC,OAAO,KAAK,EACZC,QAAQ,EACRC,WAAWP,IAAI,EACfQ,YAAYR,IAAI,EACjB,GAAGE;IACJ,MAAM,CAACO,OAAOC,SAAS,GAAGX,SAAY;QACpC,IAAI,OAAOK,iBAAiB,YAAY;YACtC,OAAOA;QACT;QAEA,OAAOA,gBAAiB;IAC1B;IACA,MAAMO,UAAUb,OAAOW;IACvB,MAAM,CAACG,OAAOC,SAAS,GAAGd,SAAS;IAEnC,OAAO;QACLe,OAAOjB,YAAY;YACjBgB,SAAS;YACTH,SAASC,QAAQI,OAAO;QAC1B,GAAG,EAAE;QACLN;QACAC;QACAM,eAAcC,UAAU;YACtB,MAAMC,UAAUT,UAAUQ;YAC1B,IAAIZ,MAAM;gBACR,OAAO;oBACLa;oBACAC;wBACET,SAASO;oBACX;gBACF;YACF;YAEA,OAAO;gBACLd;gBACAM,OAAOQ;gBACPL;gBACAM;gBACAZ;gBACAC,UAASa,KAAK;oBACZb,SAASa;oBACTP,SAAS;oBACTH,SAASO;gBACX;gBACAT,WAAUY,KAAK;oBACbZ,UAAUY;oBACVP,SAAS;gBACX;YACF;QACF;IACF;AACF"}

package/dist/form/useRangeSlider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/useRangeSlider.ts"],"sourcesContent":["\"use client\";\nimport { useState } from \"react\";\nimport { type UseStateInitializer, type UseStateSetter } from \"../types.js\";\nimport { type SliderValueOptions } from \"./useSlider.js\";\n\n/**\n * @since 2.5.0\n * @since 6.0.0 Updated to use labeled tuple.\n */\nexport type RangeSliderValue = readonly [minValue: number, maxValue: number];\n\n/**\n * @since 6.0.0\n */\nexport interface RangeSliderState {\n  rangeValue: RangeSliderValue;\n  setRangeValue: UseStateSetter<RangeSliderValue>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface RangeSliderOptions extends SliderValueOptions {\n  defaultValue?: UseStateInitializer<RangeSliderValue>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface RangeSliderImplementation\n  extends Required<SliderValueOptions>,\n    RangeSliderState {}\n\n/**\n * @example Range Slider Example\n * ```tsx\n * import { Fieldset, Form, Legend, Slider, useRangeSlider } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n * import { useId } from \"react\";\n *\n * function Example(): ReactElement {\n *   const slider = useRangeSlider({\n *     // these are the defaults and can be changed\n *     min: 0,\n *     max: 100,\n *     step: 1,\n *     defaultValue: [0, 100],\n *   });\n *\n *   // if you need access to the current value or manually change the value\n *   // yourself.\n *   const { rangeValue, setRangeValue } = slider;\n *   const [minPrice, maxPrice] = rangeValue;\n *\n *   return (\n *     <Form>\n *       <Fieldset>\n *         <Legend>Price Range</Legend>\n *         <Slider {...slider} />\n *       </Fieldset>\n *     </Form>\n *   );\n * }\n * ```\n *\n * @see The `Slider` component for additional examples.\n * @since 2.5.0\n * @since 6.0.0 Now returns an object instead of an ordered tuple and only\n * return the `rangeValue` and `setRangeValue` instead of all the slider\n * functionality. In addition, the hook only accepts a single object argument.\n */\nexport function useRangeSlider(\n  options: RangeSliderOptions = {}\n): RangeSliderImplementation {\n  const { min = 0, max = 100, step = 1, defaultValue } = options;\n  const [rangeValue, setRangeValue] = useState<RangeSliderValue>(\n    defaultValue ?? [min, max]\n  );\n\n  return {\n    min,\n    max,\n    step,\n    rangeValue,\n    setRangeValue,\n  };\n}\n"],"names":["useState","useRangeSlider","options","min","max","step","defaultValue","rangeValue","setRangeValue"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,SAASA,QAAQ,QAAQ,QAAQ;AAgCjC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqCC,GACD,OAAO,SAASC,eACdC,UAA8B,CAAC,CAAC;IAEhC,MAAM,EAAEC,MAAM,CAAC,EAAEC,MAAM,GAAG,EAAEC,OAAO,CAAC,EAAEC,YAAY,EAAE,GAAGJ;IACvD,MAAM,CAACK,YAAYC,cAAc,GAAGR,SAClCM,gBAAgB;QAACH;QAAKC;KAAI;IAG5B,OAAO;QACLD;QACAC;QACAC;QACAE;QACAC;IACF;AACF"}
+{"version":3,"sources":["../../src/form/useRangeSlider.ts"],"sourcesContent":["\"use client\";\nimport { useState } from \"react\";\nimport { type UseStateInitializer, type UseStateSetter } from \"../types.js\";\nimport { type SliderValueOptions } from \"./useSlider.js\";\n\n/**\n * @since 2.5.0\n * @since 6.0.0 Updated to use labeled tuple.\n */\nexport type RangeSliderValue = readonly [minValue: number, maxValue: number];\n\n/**\n * @since 6.0.0\n */\nexport interface RangeSliderState {\n  rangeValue: RangeSliderValue;\n  setRangeValue: UseStateSetter<RangeSliderValue>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface RangeSliderOptions extends SliderValueOptions {\n  defaultValue?: UseStateInitializer<RangeSliderValue>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface RangeSliderImplementation\n  extends Required<SliderValueOptions>,\n    RangeSliderState {}\n\n/**\n * @example Range Slider Example\n * ```tsx\n * import { Fieldset, Form, Legend, Slider, useRangeSlider } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n * import { useId } from \"react\";\n *\n * function Example(): ReactElement {\n *   const slider = useRangeSlider({\n *     // these are the defaults and can be changed\n *     min: 0,\n *     max: 100,\n *     step: 1,\n *     defaultValue: [0, 100],\n *   });\n *\n *   // if you need access to the current value or manually change the value\n *   // yourself.\n *   const { rangeValue, setRangeValue } = slider;\n *   const [minPrice, maxPrice] = rangeValue;\n *\n *   return (\n *     <Form>\n *       <Fieldset>\n *         <Legend>Price Range</Legend>\n *         <Slider {...slider} />\n *       </Fieldset>\n *     </Form>\n *   );\n * }\n * ```\n *\n * @see The `Slider` component for additional examples.\n * @since 2.5.0\n * @since 6.0.0 Now returns an object instead of an ordered tuple and only\n * return the `rangeValue` and `setRangeValue` instead of all the slider\n * functionality. In addition, the hook only accepts a single object argument.\n */\nexport function useRangeSlider(\n  options: RangeSliderOptions = {}\n): RangeSliderImplementation {\n  const { min = 0, max = 100, step = 1, defaultValue } = options;\n  const [rangeValue, setRangeValue] = useState<RangeSliderValue>(\n    defaultValue ?? [min, max]\n  );\n\n  return {\n    min,\n    max,\n    step,\n    rangeValue,\n    setRangeValue,\n  };\n}\n"],"names":["useState","useRangeSlider","options","min","max","step","defaultValue","rangeValue","setRangeValue"],"mappings":"AAAA;AACA,SAASA,QAAQ,QAAQ,QAAQ;AAgCjC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqCC,GACD,OAAO,SAASC,eACdC,UAA8B,CAAC,CAAC;IAEhC,MAAM,EAAEC,MAAM,CAAC,EAAEC,MAAM,GAAG,EAAEC,OAAO,CAAC,EAAEC,YAAY,EAAE,GAAGJ;IACvD,MAAM,CAACK,YAAYC,cAAc,GAAGR,SAClCM,gBAAgB;QAACH;QAAKC;KAAI;IAG5B,OAAO;QACLD;QACAC;QACAC;QACAE;QACAC;IACF;AACF"}

package/dist/form/useResizingTextArea.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/useResizingTextArea.ts"],"sourcesContent":["\"use client\";\nimport {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type ChangeEventHandler,\n  type Ref,\n  type RefCallback,\n} from \"react\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { useResizeObserver } from \"../useResizeObserver.js\";\n\n// this is the default of 1.5rem line-height in the styles\nconst DEFAULT_LINE_HEIGHT = 24;\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * A textarea is normally resizable in browsers by default by dragging the\n * bottom right corner to the desired size which will set inline styles for\n * `height` and `width`. Since this makes creating layouts a bit more difficult,\n * this is disabled by default but can be configured using one of these values:\n *\n * - `\"auto\"` - The textarea will automatically grow in in height as the user\n *   types until a max number of rows have been added. If there is additional\n *   text, a scrollbar will appear in the textarea. The browser's native resize\n *   behavior is disabled.\n * - `\"none\"` - The textarea's height and width will remain static\n * - `\"horizontal\"` - The textarea's width can be resized by the browser's\n *   native resize behavior.\n * - `\"vertical\"` - The textarea's height can be resized by the browser's native\n *   resize behavior.\n * - `\"both\"` - The browser's native resize behavior will be allowed.\n */\nexport type TextAreaResize =\n  | \"none\"\n  | \"auto\"\n  | \"horizontal\"\n  | \"vertical\"\n  | \"both\";\n\n/** @internal */\nexport interface ResizingTextAreaOptions {\n  resize: TextAreaResize;\n  maxRows: number;\n  onChange: ChangeEventHandler<HTMLTextAreaElement> | undefined;\n  containerRef?: Ref<HTMLDivElement>;\n  disableTransition: boolean | undefined;\n}\n\n/** @internal */\nexport interface ResizingTextAreaReturnValue {\n  height: string | undefined;\n  maskRef: RefCallback<HTMLTextAreaElement>;\n  containerRef: RefCallback<HTMLDivElement>;\n  onChange: ChangeEventHandler<HTMLTextAreaElement>;\n  scrollable: boolean;\n  disableTransition: boolean;\n}\n\n/** @internal */\nexport function useResizingTextArea(\n  options: ResizingTextAreaOptions\n): ResizingTextAreaReturnValue {\n  const {\n    maxRows,\n    resize,\n    onChange = noop,\n    containerRef: propContainerRef,\n    disableTransition,\n  } = options;\n\n  const maskRef = useRef<HTMLTextAreaElement>(null);\n  const [containerRef, containerRefCallback] = useEnsuredRef(propContainerRef);\n  const [height, setHeight] = useState<number>();\n  useEffect(() => {\n    if (resize !== \"auto\") {\n      setHeight(undefined);\n    }\n  }, [resize]);\n\n  // Since access to the DOM is required to calculate the current height of the\n  // textarea, do not enable the height transition until it has been calculated\n  // once.\n  const isHeightSet = useRef(true);\n  useEffect(() => {\n    isHeightSet.current = !height;\n  }, [height]);\n\n  // Do not enable the scrollbar until the max height has been reached since\n  // it'll flash as the user types on OS that display scrollbars.\n  //\n  // Note: This does cause an infinite loop issue on browsers that display OS\n  // when rendered in a flex/grid container and a \"fluid\" width since:\n  // - the width changes when the overflow changes to `auto`\n  // - the resize observer triggers since there was a width change\n  // - the number of rows imght change because of this width change\n  // - it might no longer be at the max height, so remove the scrollbar\n  // - restart\n  const [isMaxHeightReached, setMaxHeightReached] = useState(false);\n  const updateHeight = useCallback(() => {\n    const mask = maskRef.current;\n    const container = containerRef.current;\n    /* c8 ignore start */\n    if (!mask || !container) {\n      return;\n    }\n    /* c8 ignore stop */\n\n    const containerStyles = window.getComputedStyle(container);\n    const isBorderBox = containerStyles.boxSizing === \"border-box\";\n    let borderHeight = 0;\n    if (isBorderBox) {\n      borderHeight =\n        parseFloat(containerStyles.borderTopWidth) +\n        parseFloat(containerStyles.borderBottomWidth);\n    }\n\n    let nextHeight = mask.scrollHeight + borderHeight;\n    if (maxRows > 0) {\n      nextHeight -= borderHeight;\n      const maskStyles = window.getComputedStyle(mask);\n      // in tests, this is `\"normal\"` by default instead of a number\n      let lineHeight = parseFloat(maskStyles.lineHeight);\n      if (Number.isNaN(lineHeight)) {\n        lineHeight = DEFAULT_LINE_HEIGHT;\n      }\n\n      const maxHeight = maxRows * lineHeight;\n      nextHeight = Math.min(maxHeight, nextHeight);\n      setMaxHeightReached(nextHeight === maxHeight);\n      nextHeight += borderHeight;\n    }\n\n    // This just makes snapshots look nicer since `nextHeight` will be 0 in\n    // tests unless the user mocks out all the DOM properties\n    if (nextHeight) {\n      setHeight(nextHeight);\n    }\n  }, [containerRef, maxRows]);\n\n  const maskRefCallback = useResizeObserver({\n    ref: maskRef,\n    onUpdate: updateHeight,\n    disableHeight: true,\n  });\n\n  return {\n    height: typeof height === \"number\" ? `${height}px` : undefined,\n    maskRef: maskRefCallback,\n    containerRef: containerRefCallback,\n    scrollable: maxRows > 0 && isMaxHeightReached,\n    disableTransition: disableTransition || isHeightSet.current,\n    onChange(event) {\n      onChange(event);\n\n      const mask = maskRef.current;\n      if (!mask || resize !== \"auto\") {\n        return;\n      }\n\n      // to get the height transition to work, you have to set the height on:\n      // - the main container element (including padding) that has the height\n      //    transition enabled\n      // - a child div wrapper (without padding) that has the height transition\n      //    enabled\n      // - the textarea element (without padding) and without a height transition\n      //\n      // if it isn't done this way, the height transition will look weird since\n      // the text will be fixed to the bottom of the area and more text at the top\n      // will become visible as the height transition completes. applying the\n      // transition on the two parent elements work because:\n      // - the height is set immediately on the text field so it expands to show all\n      //    the text\n      // - the height is correctly applied to both parent elements, but their height\n      //    haven't fully been adjusted due to the animation\n      // - the parent divs have overflow visible by default, so the textarea's text\n      //    will expand past the boundaries of the divs and not cause the upwards\n      //    animation weirdness.\n      mask.value = event.currentTarget.value;\n      updateHeight();\n    },\n  };\n}\n"],"names":["useCallback","useEffect","useRef","useState","useEnsuredRef","useResizeObserver","DEFAULT_LINE_HEIGHT","noop","useResizingTextArea","options","maxRows","resize","onChange","containerRef","propContainerRef","disableTransition","maskRef","containerRefCallback","height","setHeight","undefined","isHeightSet","current","isMaxHeightReached","setMaxHeightReached","updateHeight","mask","container","containerStyles","window","getComputedStyle","isBorderBox","boxSizing","borderHeight","parseFloat","borderTopWidth","borderBottomWidth","nextHeight","scrollHeight","maskStyles","lineHeight","Number","isNaN","maxHeight","Math","min","maskRefCallback","ref","onUpdate","disableHeight","scrollable","event","value","currentTarget"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../../src/form/useResizingTextArea.ts"],"sourcesContent":["\"use client\";\nimport {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type ChangeEventHandler,\n  type Ref,\n  type RefCallback,\n} from \"react\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { useResizeObserver } from \"../useResizeObserver.js\";\n\n// this is the default of 1.5rem line-height in the styles\nconst DEFAULT_LINE_HEIGHT = 24;\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * A textarea is normally resizable in browsers by default by dragging the\n * bottom right corner to the desired size which will set inline styles for\n * `height` and `width`. Since this makes creating layouts a bit more difficult,\n * this is disabled by default but can be configured using one of these values:\n *\n * - `\"auto\"` - The textarea will automatically grow in in height as the user\n *   types until a max number of rows have been added. If there is additional\n *   text, a scrollbar will appear in the textarea. The browser's native resize\n *   behavior is disabled.\n * - `\"none\"` - The textarea's height and width will remain static\n * - `\"horizontal\"` - The textarea's width can be resized by the browser's\n *   native resize behavior.\n * - `\"vertical\"` - The textarea's height can be resized by the browser's native\n *   resize behavior.\n * - `\"both\"` - The browser's native resize behavior will be allowed.\n */\nexport type TextAreaResize =\n  | \"none\"\n  | \"auto\"\n  | \"horizontal\"\n  | \"vertical\"\n  | \"both\";\n\n/** @internal */\nexport interface ResizingTextAreaOptions {\n  resize: TextAreaResize;\n  maxRows: number;\n  onChange: ChangeEventHandler<HTMLTextAreaElement> | undefined;\n  containerRef?: Ref<HTMLDivElement>;\n  disableTransition: boolean | undefined;\n}\n\n/** @internal */\nexport interface ResizingTextAreaReturnValue {\n  height: string | undefined;\n  maskRef: RefCallback<HTMLTextAreaElement>;\n  containerRef: RefCallback<HTMLDivElement>;\n  onChange: ChangeEventHandler<HTMLTextAreaElement>;\n  scrollable: boolean;\n  disableTransition: boolean;\n}\n\n/** @internal */\nexport function useResizingTextArea(\n  options: ResizingTextAreaOptions\n): ResizingTextAreaReturnValue {\n  const {\n    maxRows,\n    resize,\n    onChange = noop,\n    containerRef: propContainerRef,\n    disableTransition,\n  } = options;\n\n  const maskRef = useRef<HTMLTextAreaElement>(null);\n  const [containerRef, containerRefCallback] = useEnsuredRef(propContainerRef);\n  const [height, setHeight] = useState<number>();\n  useEffect(() => {\n    if (resize !== \"auto\") {\n      setHeight(undefined);\n    }\n  }, [resize]);\n\n  // Since access to the DOM is required to calculate the current height of the\n  // textarea, do not enable the height transition until it has been calculated\n  // once.\n  const isHeightSet = useRef(true);\n  useEffect(() => {\n    isHeightSet.current = !height;\n  }, [height]);\n\n  // Do not enable the scrollbar until the max height has been reached since\n  // it'll flash as the user types on OS that display scrollbars.\n  //\n  // Note: This does cause an infinite loop issue on browsers that display OS\n  // when rendered in a flex/grid container and a \"fluid\" width since:\n  // - the width changes when the overflow changes to `auto`\n  // - the resize observer triggers since there was a width change\n  // - the number of rows imght change because of this width change\n  // - it might no longer be at the max height, so remove the scrollbar\n  // - restart\n  const [isMaxHeightReached, setMaxHeightReached] = useState(false);\n  const updateHeight = useCallback(() => {\n    const mask = maskRef.current;\n    const container = containerRef.current;\n    /* c8 ignore start */\n    if (!mask || !container) {\n      return;\n    }\n    /* c8 ignore stop */\n\n    const containerStyles = window.getComputedStyle(container);\n    const isBorderBox = containerStyles.boxSizing === \"border-box\";\n    let borderHeight = 0;\n    if (isBorderBox) {\n      borderHeight =\n        parseFloat(containerStyles.borderTopWidth) +\n        parseFloat(containerStyles.borderBottomWidth);\n    }\n\n    let nextHeight = mask.scrollHeight + borderHeight;\n    if (maxRows > 0) {\n      nextHeight -= borderHeight;\n      const maskStyles = window.getComputedStyle(mask);\n      // in tests, this is `\"normal\"` by default instead of a number\n      let lineHeight = parseFloat(maskStyles.lineHeight);\n      if (Number.isNaN(lineHeight)) {\n        lineHeight = DEFAULT_LINE_HEIGHT;\n      }\n\n      const maxHeight = maxRows * lineHeight;\n      nextHeight = Math.min(maxHeight, nextHeight);\n      setMaxHeightReached(nextHeight === maxHeight);\n      nextHeight += borderHeight;\n    }\n\n    // This just makes snapshots look nicer since `nextHeight` will be 0 in\n    // tests unless the user mocks out all the DOM properties\n    if (nextHeight) {\n      setHeight(nextHeight);\n    }\n  }, [containerRef, maxRows]);\n\n  const maskRefCallback = useResizeObserver({\n    ref: maskRef,\n    onUpdate: updateHeight,\n    disableHeight: true,\n  });\n\n  return {\n    height: typeof height === \"number\" ? `${height}px` : undefined,\n    maskRef: maskRefCallback,\n    containerRef: containerRefCallback,\n    scrollable: maxRows > 0 && isMaxHeightReached,\n    disableTransition: disableTransition || isHeightSet.current,\n    onChange(event) {\n      onChange(event);\n\n      const mask = maskRef.current;\n      if (!mask || resize !== \"auto\") {\n        return;\n      }\n\n      // to get the height transition to work, you have to set the height on:\n      // - the main container element (including padding) that has the height\n      //    transition enabled\n      // - a child div wrapper (without padding) that has the height transition\n      //    enabled\n      // - the textarea element (without padding) and without a height transition\n      //\n      // if it isn't done this way, the height transition will look weird since\n      // the text will be fixed to the bottom of the area and more text at the top\n      // will become visible as the height transition completes. applying the\n      // transition on the two parent elements work because:\n      // - the height is set immediately on the text field so it expands to show all\n      //    the text\n      // - the height is correctly applied to both parent elements, but their height\n      //    haven't fully been adjusted due to the animation\n      // - the parent divs have overflow visible by default, so the textarea's text\n      //    will expand past the boundaries of the divs and not cause the upwards\n      //    animation weirdness.\n      mask.value = event.currentTarget.value;\n      updateHeight();\n    },\n  };\n}\n"],"names":["useCallback","useEffect","useRef","useState","useEnsuredRef","useResizeObserver","DEFAULT_LINE_HEIGHT","noop","useResizingTextArea","options","maxRows","resize","onChange","containerRef","propContainerRef","disableTransition","maskRef","containerRefCallback","height","setHeight","undefined","isHeightSet","current","isMaxHeightReached","setMaxHeightReached","updateHeight","mask","container","containerStyles","window","getComputedStyle","isBorderBox","boxSizing","borderHeight","parseFloat","borderTopWidth","borderBottomWidth","nextHeight","scrollHeight","maskStyles","lineHeight","Number","isNaN","maxHeight","Math","min","maskRefCallback","ref","onUpdate","disableHeight","scrollable","event","value","currentTarget"],"mappings":"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"}

package/dist/form/useSelectCombobox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/useSelectCombobox.ts"],"sourcesContent":["\"use client\";\nimport {\n  useCombobox,\n  type BaseComboboxOptions,\n  type ComboboxImplementation,\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 BaseComboboxOptions<ComboboxEl, PopupEl> {\n  value: string;\n  values: readonly string[];\n}\n\n/**\n * @since 6.0.0\n */\nexport interface SelectComboboxImplementation<\n  ComboboxEl extends HTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends 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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,SACEA,WAAW,QAGN,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\";\nimport {\n  useCombobox,\n  type BaseComboboxOptions,\n  type ComboboxImplementation,\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 BaseComboboxOptions<ComboboxEl, PopupEl> {\n  value: string;\n  values: readonly string[];\n}\n\n/**\n * @since 6.0.0\n */\nexport interface SelectComboboxImplementation<\n  ComboboxEl extends HTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends 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;AACA,SACEA,WAAW,QAGN,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"}

package/dist/form/useSlider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/useSlider.ts"],"sourcesContent":["\"use client\";\nimport { useState } from \"react\";\nimport { type UseStateInitializer, type UseStateSetter } from \"../types.js\";\nimport { getRangeDefaultValue } from \"../utils/getRangeDefaultValue.js\";\n\n/**\n * @since 2.5.0\n */\nexport interface SliderValueOptions {\n  /**\n   * The min value for the slider.\n   *\n   * @defaultValue `0`\n   */\n  min?: number;\n\n  /**\n   * The max value for the slider.\n   *\n   * @defaultValue `100`\n   */\n  max?: number;\n\n  /**\n   * A positive number representing the value to \"jump\" while incrementing or\n   * decrementing the slider's value. This should normally stay as the default\n   * value of `1`, but can also be decimal values if needed.\n   *\n   * @defaultValue `1`\n   */\n  step?: number;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface SliderState {\n  value: number;\n  setValue: UseStateSetter<number>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface SliderImplementation\n  extends Required<SliderValueOptions>,\n    SliderState {}\n\n/**\n * @since 6.0.0\n */\nexport interface SliderOptions extends SliderValueOptions {\n  /**\n   * @defaultValue `(max - min ) / 2`\n   */\n  defaultValue?: UseStateInitializer<number>;\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { Form, Slider, useSlider } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const slider = useSlider({\n *     // these are the defaults and can be changed\n *     min: 0,\n *     max: 100,\n *     step: 1,\n *     defaultValue: 50,\n *   });\n *\n *   // if you need access to the current value or manually change the value\n *   // yourself.\n *   const { value, setValue } = slider;\n *\n *   return (\n *     <Form>\n *       <Slider {...slider} aria-label=\"Volume\" />\n *     </Form>\n *   );\n * }\n * ```\n *\n * @see The `Slider` component for additional examples.\n * @since 2.5.0\n * @since 6.0.0 Now returns an object instead of an ordered tuple and only\n * return the `value` and `setValue` instead of all the slider functionality. In\n * addition, the hook only accepts a single object argument.\n */\nexport function useSlider(options: SliderOptions = {}): SliderImplementation {\n  const { min = 0, max = 100, step = 1, defaultValue } = options;\n  const [value, setValue] = useState(\n    getRangeDefaultValue({\n      min,\n      max,\n      step,\n      defaultValue,\n    })\n  );\n\n  return {\n    min,\n    max,\n    step,\n    value,\n    setValue,\n  };\n}\n"],"names":["useState","getRangeDefaultValue","useSlider","options","min","max","step","defaultValue","value","setValue"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,SAASA,QAAQ,QAAQ,QAAQ;AAEjC,SAASC,oBAAoB,QAAQ,mCAAmC;AAuDxE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCC,GACD,OAAO,SAASC,UAAUC,UAAyB,CAAC,CAAC;IACnD,MAAM,EAAEC,MAAM,CAAC,EAAEC,MAAM,GAAG,EAAEC,OAAO,CAAC,EAAEC,YAAY,EAAE,GAAGJ;IACvD,MAAM,CAACK,OAAOC,SAAS,GAAGT,SACxBC,qBAAqB;QACnBG;QACAC;QACAC;QACAC;IACF;IAGF,OAAO;QACLH;QACAC;QACAC;QACAE;QACAC;IACF;AACF"}
+{"version":3,"sources":["../../src/form/useSlider.ts"],"sourcesContent":["\"use client\";\nimport { useState } from \"react\";\nimport { type UseStateInitializer, type UseStateSetter } from \"../types.js\";\nimport { getRangeDefaultValue } from \"../utils/getRangeDefaultValue.js\";\n\n/**\n * @since 2.5.0\n */\nexport interface SliderValueOptions {\n  /**\n   * The min value for the slider.\n   *\n   * @defaultValue `0`\n   */\n  min?: number;\n\n  /**\n   * The max value for the slider.\n   *\n   * @defaultValue `100`\n   */\n  max?: number;\n\n  /**\n   * A positive number representing the value to \"jump\" while incrementing or\n   * decrementing the slider's value. This should normally stay as the default\n   * value of `1`, but can also be decimal values if needed.\n   *\n   * @defaultValue `1`\n   */\n  step?: number;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface SliderState {\n  value: number;\n  setValue: UseStateSetter<number>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface SliderImplementation\n  extends Required<SliderValueOptions>,\n    SliderState {}\n\n/**\n * @since 6.0.0\n */\nexport interface SliderOptions extends SliderValueOptions {\n  /**\n   * @defaultValue `(max - min ) / 2`\n   */\n  defaultValue?: UseStateInitializer<number>;\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { Form, Slider, useSlider } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const slider = useSlider({\n *     // these are the defaults and can be changed\n *     min: 0,\n *     max: 100,\n *     step: 1,\n *     defaultValue: 50,\n *   });\n *\n *   // if you need access to the current value or manually change the value\n *   // yourself.\n *   const { value, setValue } = slider;\n *\n *   return (\n *     <Form>\n *       <Slider {...slider} aria-label=\"Volume\" />\n *     </Form>\n *   );\n * }\n * ```\n *\n * @see The `Slider` component for additional examples.\n * @since 2.5.0\n * @since 6.0.0 Now returns an object instead of an ordered tuple and only\n * return the `value` and `setValue` instead of all the slider functionality. In\n * addition, the hook only accepts a single object argument.\n */\nexport function useSlider(options: SliderOptions = {}): SliderImplementation {\n  const { min = 0, max = 100, step = 1, defaultValue } = options;\n  const [value, setValue] = useState(\n    getRangeDefaultValue({\n      min,\n      max,\n      step,\n      defaultValue,\n    })\n  );\n\n  return {\n    min,\n    max,\n    step,\n    value,\n    setValue,\n  };\n}\n"],"names":["useState","getRangeDefaultValue","useSlider","options","min","max","step","defaultValue","value","setValue"],"mappings":"AAAA;AACA,SAASA,QAAQ,QAAQ,QAAQ;AAEjC,SAASC,oBAAoB,QAAQ,mCAAmC;AAuDxE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCC,GACD,OAAO,SAASC,UAAUC,UAAyB,CAAC,CAAC;IACnD,MAAM,EAAEC,MAAM,CAAC,EAAEC,MAAM,GAAG,EAAEC,OAAO,CAAC,EAAEC,YAAY,EAAE,GAAGJ;IACvD,MAAM,CAACK,OAAOC,SAAS,GAAGT,SACxBC,qBAAqB;QACnBG;QACAC;QACAC;QACAC;IACF;IAGF,OAAO;QACLH;QACAC;QACAC;QACAE;QACAC;IACF;AACF"}

package/dist/form/useTextField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/useTextField.ts"],"sourcesContent":["\"use client\";\nimport {\n  useCallback,\n  useRef,\n  useState,\n  type HTMLAttributes,\n  type ReactNode,\n  type Ref,\n  type RefCallback,\n  type RefObject,\n} from \"react\";\nimport { getIcon } from \"../icon/iconConfig.js\";\nimport { type UseStateInitializer, type UseStateSetter } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { type TextFieldProps } from \"./TextField.js\";\nimport {\n  type FormMessageInputLengthCounterProps,\n  type FormMessageProps,\n} from \"./types.js\";\nimport {\n  defaultGetErrorIcon,\n  defaultGetErrorMessage,\n  defaultIsErrored,\n  type ErrorMessageOptions,\n  type GetErrorIcon,\n  type GetErrorMessage,\n  type IsErrored,\n  type TextFieldValidationOptions,\n  type TextFieldValidationType,\n} from \"./validation.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @since 2.5.0\n * @since 6.0.0 Added the `onInvalid` handler\n */\nexport type TextFieldChangeHandlers<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> = Pick<HTMLAttributes<E>, \"onBlur\" | \"onChange\" | \"onInvalid\">;\n\n/** @since 6.0.0 */\nexport interface ErrorChangeHandlerOptions<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> {\n  /**\n   * A ref containing the `TextField` or `TextArea` if you need access to that\n   * DOM node for error reporting.\n   */\n  ref: RefObject<E>;\n\n  /**\n   * The current name for the `TextField` or `TextArea`.\n   */\n  name: string;\n\n  /**\n   * This will be `true` when the `TextField`/`TextArea` has an error.\n   */\n  error: boolean;\n\n  /**\n   * The error message returned by {@link GetErrorMessage}/the browser's\n   * validation message. This is normally an empty string when the {@link error}\n   * state is `false`.\n   */\n  errorMessage: string;\n}\n\n/**\n * A function that reports the error state changing. A good use-case for this is\n * to keep track of all the errors within your form and keep a submit button\n * disabled until they have been resolved.\n *\n * Example:\n *\n * ```ts\n * const [errors, setErrors] = useState<Record<string, boolean | undefined>>({});\n * const onErrorChange: ErrorChangeHandler = ({ name, error }) =>\n *   setErrors((prevErrors) => ({ ...prevErrors, [name]: error }));\n *\n * const invalid = Object.values(errors).some(Boolean);\n *\n * // form implementation is left as an exercise for the reader\n * <Button type=\"submit\" disabled={invalid} onClick={submitForm}>Submit</Button>\n * ```\n *\n * @since 2.5.0\n * @since 6.0.0 Changed to object argument.\n */\nexport type ErrorChangeHandler<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> = (options: ErrorChangeHandlerOptions<E>) => void;\n\n/** @since 2.5.6 */\nexport interface TextFieldHookState {\n  /**\n   * The current value for the `TextField` or `TextArea`.\n   */\n  value: string;\n\n  /**\n   * This will be `true` when the `TextField`/`TextArea` has an error.\n   */\n  error: boolean;\n\n  /**\n   * The error message returned by {@link GetErrorMessage}/the browser's\n   * validation message. This is normally an empty string when the {@link error}\n   * state is `false`.\n   */\n  errorMessage: string;\n}\n\n/**\n * All the props that will be generated and return from the `useTextField` hook\n * that should be passed to a `FormMessage` component.\n *\n * @since 2.5.0\n */\nexport interface ProvidedFormMessageProps\n  extends Pick<FormMessageProps, \"id\" | \"theme\" | \"children\">,\n    Required<Pick<TextFieldProps, \"error\">>,\n    Partial<Pick<FormMessageInputLengthCounterProps, \"length\" | \"maxLength\">> {}\n\n/**\n * All the props that will be generated and returned by the `useTextField` hook\n * that should be passed to a `TextField` component.\n *\n * @since 2.5.0\n */\nexport interface ProvidedTextFieldProps<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> extends TextFieldValidationOptions,\n    TextFieldChangeHandlers<E>,\n    Required<Pick<TextFieldProps, \"id\" | \"name\" | \"value\" | \"error\">>,\n    Pick<TextFieldProps, \"aria-describedby\" | \"rightAddon\"> {\n  /**\n   * A ref that must be passed to the `TextField`/`TextArea` so that the custom\n   * validity behavior can work.\n   *\n   * @since 6.0.0\n   */\n  ref: RefCallback<E>;\n}\n\n/**\n * @since 2.5.0\n */\nexport interface ProvidedTextFieldMessageProps<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> extends ProvidedTextFieldProps<E> {\n  /**\n   * These props will be defined as long as the `disableMessage` prop is not\n   * `true` from the `useTextField` hook.\n   */\n  messageProps: ProvidedFormMessageProps;\n}\n\n/** @since 2.5.6 */\nexport interface TextFieldHookOptions<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> extends TextFieldValidationOptions,\n    TextFieldChangeHandlers<E> {\n  /**\n   * An optional id to use for the `TextField` or `TextArea` that is also used\n   * to create an id for the inline help/error messages.\n   *\n   * @defaultValue `\"text-field-\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * An optional ref that should be merged with the ref returned by this hook.\n   * This should really only be used if you are making a custom component using\n   * this hook and forwarding refs. If you need a ref to access the `<input>` or\n   * `<textarea>` DOM node, you can use the `fieldRef` returned by this hook\n   * instead.\n   *\n   * @example Accessing TextField DOM Node\n   * ```tsx\n   * import { TextField, useTextField } from \"@react-md/core\";\n   * import { useEffect } from \"react\";\n   * import type { ReactElement } from \"react\";\n   *\n   * function Example(): ReactElement {\n   *   const { fieldRef, fieldProps } = useTextField({ name: \"example\" });\n   *\n   *   useEffect(() => {\n   *     fieldRef.current;\n   *     //       ^ HTMLInputElement | null\n   *   }, [fieldRef]);\n   *\n   *   return <TextField {...fieldProps} label=\"Example\" />;\n   * }\n   * ```\n   */\n  ref?: Ref<E>;\n\n  /**\n   * A unique name to attach to the `TextField`, `TextArea` or `Password`\n   * component.\n   */\n  name: string;\n\n  /**\n   * Boolean if the `FormMessage` should also display a counter for the\n   * remaining letters allowed based on the `maxLength`.\n   *\n   * This will still be considered false if the `maxLength` value is not\n   * provided.\n   *\n   * @defaultValue `false`\n   */\n  counter?: boolean;\n\n  /**\n   * This is used internally for the `useNumberField` hook and probably\n   * shouldn't be used otherwise. This is just passed into the\n   * {@link getErrorMessage} options and is used for additional validation.\n   *\n   * @defaultValue `false`\n   */\n  isNumber?: boolean;\n\n  /**\n   * The default value to use for the `TextField` or `TextArea` one initial\n   * render. If you want to manually change the value to something else after\n   * the initial render, either change the `key` for the component containing\n   * this hook, or use the `setState` function returned from this hook.\n   *\n   * @defaultValue `\"\"`\n   */\n  defaultValue?: UseStateInitializer<string>;\n\n  /**\n   * An optional help text to display in the `FormMessage` component when there\n   * is not an error.\n   */\n  helpText?: ReactNode;\n\n  /**\n   * A function used to determine if the `TextField` or `TextArea` is an in\n   * errored state.\n   *\n   * @see {@link defaultIsErrored}\n   * @defaultValue `defaultIsErrored`\n   */\n  isErrored?: IsErrored;\n\n  /**\n   * An optional error icon used in the {@link getErrorIcon} option.\n   *\n   * @defaultValue `getIcon(\"error\")`\n   */\n  errorIcon?: ReactNode;\n\n  /**\n   * A function used to get the error icon to display at the right of the\n   * `TextField` or `TextArea`. The default behavior will only show an icon when\n   * the `error` state is `true` and an `errorIcon` option has been provided.\n   *\n   * @see {@link defaultGetErrorIcon}\n   * @defaultValue `defaultGetErrorIcon`\n   */\n  getErrorIcon?: GetErrorIcon;\n\n  /**\n   * A function to get and display an error message based on the `TextField` or\n   * `TextArea` validity.\n   *\n   * @see {@link defaultGetErrorMessage}\n   * @defaultValue `defaultGetErrorMessage`\n   */\n  getErrorMessage?: GetErrorMessage;\n\n  /**\n   * An optional function that will be called whenever the `error` state is\n   * changed. This can be used for more complex forms to `disable` the Submit\n   * button or anything else if any field has an error.\n   *\n   * @defaultValue `() => {}`\n   */\n  onErrorChange?: ErrorChangeHandler<E>;\n\n  /**\n   * Boolean if the `TextField` or `TextArea` will **not** be rendered along\n   * with a `FormMessage` component. This will prevent the `aria-describedby`\n   * prop from being returned when set to `true`.\n   *\n   * @defaultValue `false`\n   */\n  disableMessage?: boolean;\n\n  /**\n   * Boolean if the `maxLength` prop should not be passed to the `TextField`\n   * component since it will prevent any additional characters from being\n   * entered in the text field which might feel like weird behavior to some\n   * users. This should really only be used when the `counter` option is also\n   * enabled and rendering along with a `FormMessage` component.\n   *\n   * @defaultValue `false`\n   */\n  disableMaxLength?: boolean;\n\n  /**\n   * @defaultValue `\"recommended\"`\n   */\n  validationType?: TextFieldValidationType;\n}\n\n/** @since 6.0.0 */\nexport interface TextFieldImplementation<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> extends TextFieldHookState {\n  fieldRef: RefObject<E>;\n  reset(): void;\n  setState: UseStateSetter<Readonly<TextFieldHookState>>;\n  fieldProps: ProvidedTextFieldProps<E>;\n}\n\n/** @since 6.0.0 */\nexport interface TextFieldWithMessageImplementation<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> extends TextFieldImplementation<E> {\n  fieldProps: ProvidedTextFieldMessageProps<E>;\n}\n\n/** @since 6.0.0 */\nexport interface ValidatedTextFieldImplementation<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> extends TextFieldImplementation<E> {\n  fieldProps: ProvidedTextFieldProps<E> | ProvidedTextFieldMessageProps<E>;\n}\n\n/**\n * If you do not want to display the error messages below the `TextField` and\n * handle error messages separately, set the `disableMessage` option to `true`.\n *\n * @example No Inline Error Messages\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { TextField, useTextField } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps } = useTextField({\n *     name: \"example\",\n *     disableMessage: true,\n *   });\n *\n *   return <TextField {...fieldProps} label=\"Example\" />;\n * }\n * ```\n *\n * Look at the other {@link useTextField} override for additional examples.\n */\nexport function useTextField<E extends HTMLInputElement | HTMLTextAreaElement>(\n  options: TextFieldHookOptions<E> & { disableMessage: true }\n): TextFieldImplementation<E>;\n\n/**\n * @example Simple Example\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { TextField, useTextField } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps } = useTextField({\n *     name: \"example\",\n *   });\n *\n *   return <TextField {...fieldProps} label=\"Example\" />;\n * }\n * ```\n *\n * @example Inline Counter\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { TextField, useTextField } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps } = useTextField({\n *     name: \"example\",\n *     counter: true,\n *     required: true,\n *     maxLength: 20,\n *     disableMaxLength: true,\n *   });\n *\n *   return <TextField {...fieldProps} label=\"Example\" />;\n * }\n * ```\n *\n * @example Adding Constraints\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { TextField, useTextField } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps } = useTextField({\n *     name: \"example\",\n *     required: true,\n *     pattern: \"^[A-z]+$\",\n *     minLength: 4,\n *     maxLength: 20,\n *   });\n *\n *   return <TextField {...fieldProps} label=\"Example\" />;\n * }\n * ```\n *\n * @example Custom Validation\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { TextField, useTextField } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps } = useTextField({\n *     name: \"example\",\n *     required: true,\n *     getErrorMessage(options) {\n *       const {\n *         value,\n *         pattern,\n *         required,\n *         minLength,\n *         maxLength,\n *         validity,\n *         validationMessage,\n *         isNumber,\n *         isBlurEvent,\n *         validationType,\n *       } = options;\n *\n *       if (validity.tooLong) {\n *         return `No more than ${maxLength} characters.`;\n *       }\n *\n *       if (validity.tooShort) {\n *         return `No more than ${minLength} characters.`;\n *       }\n *\n *       if (validity.valueMissing) {\n *         return \"This value is required!\";\n *       }\n *\n *       if (value === \"bad value\") {\n *         return \"Value cannot be bad value\";\n *       }\n *\n *       return defaultGetErrorMessage(options);\n *     }\n *   });\n *\n *   return <TextField {...fieldProps} label=\"Example\" />;\n * }\n * ```\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation\n * @since 2.5.6\n * @since 6.0.0 This hook returns an object instead of an ordered list.\n */\nexport function useTextField<E extends HTMLInputElement | HTMLTextAreaElement>(\n  options: TextFieldHookOptions<E>\n): TextFieldWithMessageImplementation<E>;\nexport function useTextField<E extends HTMLInputElement | HTMLTextAreaElement>(\n  options: TextFieldHookOptions<E>\n): ValidatedTextFieldImplementation<E> {\n  const {\n    id: propId,\n    ref: propRef,\n    name,\n    defaultValue = \"\",\n    isNumber = false,\n    required,\n    pattern,\n    minLength,\n    maxLength,\n    onBlur = noop,\n    onChange = noop,\n    onInvalid = noop,\n    counter = false,\n    helpText,\n    validationType = \"recommended\",\n    disableMessage = false,\n    disableMaxLength = false,\n    errorIcon: propErrorIcon,\n    isErrored = defaultIsErrored,\n    onErrorChange = noop,\n    getErrorIcon = defaultGetErrorIcon,\n    getErrorMessage = defaultGetErrorMessage,\n  } = options;\n\n  const id = useEnsuredId(propId, \"text-field\");\n  const messageId = `${id}-message`;\n  const [fieldRef, ref] = useEnsuredRef(propRef);\n  const [state, setState] = useState<TextFieldHookState>(() => {\n    const value =\n      typeof defaultValue === \"function\" ? defaultValue() : defaultValue;\n\n    return {\n      value,\n      error: false,\n      errorMessage: \"\",\n    };\n  });\n  const { value, error, errorMessage } = state;\n\n  // using a `ref` instead of a `useCallback` makes it so the `defaultValue`\n  // will always be used once reset.\n  const reset = useRef(() => {\n    fieldRef.current?.setCustomValidity(\"\");\n    setState({ value, error: false, errorMessage: \"\" });\n  }).current;\n\n  const errored = useRef(error);\n  const checkValidity = useCallback(\n    (isBlurEvent: boolean) => {\n      const field = fieldRef.current;\n      if (!field) {\n        throw new Error(\"Unable to check validity due to missing ref\");\n      }\n\n      // need to temporarily set the `maxLength` back so it can be \"verified\"\n      // through the validity api\n      /* istanbul ignore next */\n      if (isBlurEvent && disableMaxLength && typeof maxLength === \"number\") {\n        field.maxLength = maxLength;\n      }\n\n      const { value } = field;\n      field.setCustomValidity(\"\");\n      field.checkValidity();\n\n      // remove the temporarily set `maxLength` attribute after checking the\n      // validity\n      /* istanbul ignore next */\n      if (disableMaxLength && typeof maxLength === \"number\") {\n        field.removeAttribute(\"maxLength\");\n      }\n\n      const options: ErrorMessageOptions = {\n        value,\n        pattern,\n        required,\n        minLength,\n        maxLength,\n        isBlurEvent,\n        isNumber,\n        validationType,\n        validity: field.validity,\n        validationMessage: field.validationMessage,\n      };\n      const errorMessage = getErrorMessage(options);\n      const error = isErrored({ ...options, errorMessage });\n\n      if (errored.current !== error) {\n        errored.current = error;\n        onErrorChange({\n          ref: fieldRef,\n          name,\n          error,\n          errorMessage,\n        });\n      }\n\n      /* istanbul ignore next */\n      if (errorMessage !== field.validationMessage) {\n        field.setCustomValidity(errorMessage);\n      }\n\n      setState((prevState) => {\n        if (\n          prevState.value === value &&\n          prevState.error === error &&\n          prevState.errorMessage === errorMessage\n        ) {\n          return prevState;\n        }\n\n        return {\n          value,\n          error,\n          errorMessage,\n        };\n      });\n    },\n    [\n      disableMaxLength,\n      fieldRef,\n      getErrorMessage,\n      isErrored,\n      isNumber,\n      maxLength,\n      minLength,\n      name,\n      onErrorChange,\n      pattern,\n      required,\n      validationType,\n    ]\n  );\n\n  const errorIcon = getIcon(\"error\", propErrorIcon);\n  const fieldProps: ProvidedTextFieldProps<E> & {\n    messageProps?: ProvidedFormMessageProps;\n  } = {\n    id,\n    ref,\n    name,\n    value,\n    error,\n    required,\n    pattern,\n    minLength,\n    maxLength: disableMaxLength ? undefined : maxLength,\n    rightAddon: getErrorIcon({\n      error,\n      errorIcon,\n      errorMessage,\n    }),\n    onBlur(event) {\n      onBlur(event);\n      if (event.isPropagationStopped()) {\n        return;\n      }\n      checkValidity(true);\n    },\n    onChange(event) {\n      onChange(event);\n      if (event.isPropagationStopped()) {\n        return;\n      }\n\n      if (validationType === \"blur\") {\n        setState((prevState) => ({\n          ...prevState,\n          value: event.currentTarget.value,\n        }));\n        return;\n      }\n\n      checkValidity(false);\n    },\n    onInvalid(event) {\n      onInvalid(event);\n      if (\n        event.isPropagationStopped() ||\n        event.currentTarget === document.activeElement\n      ) {\n        return;\n      }\n\n      // this makes it so that if a submit button is clicked in a form, all\n      // textfields will gain the error state immediately\n      // also need to extract the validationMessage immediately because of the\n      // SyntheticEvent behavior in React. By the time the `setState` is called,\n      // the event might've been deleted\n      const { validationMessage } = event.currentTarget;\n\n      setState((prevState) => {\n        if (prevState.error) {\n          return prevState;\n        }\n\n        return {\n          ...prevState,\n          error: true,\n          errorMessage: validationMessage,\n        };\n      });\n    },\n  };\n\n  if (!disableMessage) {\n    fieldProps[\"aria-describedby\"] = messageId;\n    fieldProps.messageProps = {\n      id: messageId,\n      error,\n      length: counter ? value.length : undefined,\n      maxLength:\n        counter && typeof maxLength === \"number\" ? maxLength : undefined,\n      children: errorMessage || helpText,\n    };\n  }\n\n  return {\n    ...state,\n    reset,\n    setState,\n    fieldRef,\n    fieldProps,\n  };\n}\n"],"names":["useCallback","useRef","useState","getIcon","useEnsuredId","useEnsuredRef","defaultGetErrorIcon","defaultGetErrorMessage","defaultIsErrored","noop","useTextField","options","id","propId","ref","propRef","name","defaultValue","isNumber","required","pattern","minLength","maxLength","onBlur","onChange","onInvalid","counter","helpText","validationType","disableMessage","disableMaxLength","errorIcon","propErrorIcon","isErrored","onErrorChange","getErrorIcon","getErrorMessage","messageId","fieldRef","state","setState","value","error","errorMessage","reset","current","setCustomValidity","errored","checkValidity","isBlurEvent","field","Error","removeAttribute","validity","validationMessage","prevState","fieldProps","undefined","rightAddon","event","isPropagationStopped","currentTarget","document","activeElement","messageProps","length","children"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../../src/form/useTextField.ts"],"sourcesContent":["\"use client\";\nimport {\n  useCallback,\n  useRef,\n  useState,\n  type HTMLAttributes,\n  type ReactNode,\n  type Ref,\n  type RefCallback,\n  type RefObject,\n} from \"react\";\nimport { getIcon } from \"../icon/iconConfig.js\";\nimport { type UseStateInitializer, type UseStateSetter } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { type TextFieldProps } from \"./TextField.js\";\nimport {\n  type FormMessageInputLengthCounterProps,\n  type FormMessageProps,\n} from \"./types.js\";\nimport {\n  defaultGetErrorIcon,\n  defaultGetErrorMessage,\n  defaultIsErrored,\n  type ErrorMessageOptions,\n  type GetErrorIcon,\n  type GetErrorMessage,\n  type IsErrored,\n  type TextFieldValidationOptions,\n  type TextFieldValidationType,\n} from \"./validation.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @since 2.5.0\n * @since 6.0.0 Added the `onInvalid` handler\n */\nexport type TextFieldChangeHandlers<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> = Pick<HTMLAttributes<E>, \"onBlur\" | \"onChange\" | \"onInvalid\">;\n\n/** @since 6.0.0 */\nexport interface ErrorChangeHandlerOptions<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> {\n  /**\n   * A ref containing the `TextField` or `TextArea` if you need access to that\n   * DOM node for error reporting.\n   */\n  ref: RefObject<E>;\n\n  /**\n   * The current name for the `TextField` or `TextArea`.\n   */\n  name: string;\n\n  /**\n   * This will be `true` when the `TextField`/`TextArea` has an error.\n   */\n  error: boolean;\n\n  /**\n   * The error message returned by {@link GetErrorMessage}/the browser's\n   * validation message. This is normally an empty string when the {@link error}\n   * state is `false`.\n   */\n  errorMessage: string;\n}\n\n/**\n * A function that reports the error state changing. A good use-case for this is\n * to keep track of all the errors within your form and keep a submit button\n * disabled until they have been resolved.\n *\n * Example:\n *\n * ```ts\n * const [errors, setErrors] = useState<Record<string, boolean | undefined>>({});\n * const onErrorChange: ErrorChangeHandler = ({ name, error }) =>\n *   setErrors((prevErrors) => ({ ...prevErrors, [name]: error }));\n *\n * const invalid = Object.values(errors).some(Boolean);\n *\n * // form implementation is left as an exercise for the reader\n * <Button type=\"submit\" disabled={invalid} onClick={submitForm}>Submit</Button>\n * ```\n *\n * @since 2.5.0\n * @since 6.0.0 Changed to object argument.\n */\nexport type ErrorChangeHandler<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> = (options: ErrorChangeHandlerOptions<E>) => void;\n\n/** @since 2.5.6 */\nexport interface TextFieldHookState {\n  /**\n   * The current value for the `TextField` or `TextArea`.\n   */\n  value: string;\n\n  /**\n   * This will be `true` when the `TextField`/`TextArea` has an error.\n   */\n  error: boolean;\n\n  /**\n   * The error message returned by {@link GetErrorMessage}/the browser's\n   * validation message. This is normally an empty string when the {@link error}\n   * state is `false`.\n   */\n  errorMessage: string;\n}\n\n/**\n * All the props that will be generated and return from the `useTextField` hook\n * that should be passed to a `FormMessage` component.\n *\n * @since 2.5.0\n */\nexport interface ProvidedFormMessageProps\n  extends Pick<FormMessageProps, \"id\" | \"theme\" | \"children\">,\n    Required<Pick<TextFieldProps, \"error\">>,\n    Partial<Pick<FormMessageInputLengthCounterProps, \"length\" | \"maxLength\">> {}\n\n/**\n * All the props that will be generated and returned by the `useTextField` hook\n * that should be passed to a `TextField` component.\n *\n * @since 2.5.0\n */\nexport interface ProvidedTextFieldProps<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> extends TextFieldValidationOptions,\n    TextFieldChangeHandlers<E>,\n    Required<Pick<TextFieldProps, \"id\" | \"name\" | \"value\" | \"error\">>,\n    Pick<TextFieldProps, \"aria-describedby\" | \"rightAddon\"> {\n  /**\n   * A ref that must be passed to the `TextField`/`TextArea` so that the custom\n   * validity behavior can work.\n   *\n   * @since 6.0.0\n   */\n  ref: RefCallback<E>;\n}\n\n/**\n * @since 2.5.0\n */\nexport interface ProvidedTextFieldMessageProps<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> extends ProvidedTextFieldProps<E> {\n  /**\n   * These props will be defined as long as the `disableMessage` prop is not\n   * `true` from the `useTextField` hook.\n   */\n  messageProps: ProvidedFormMessageProps;\n}\n\n/** @since 2.5.6 */\nexport interface TextFieldHookOptions<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> extends TextFieldValidationOptions,\n    TextFieldChangeHandlers<E> {\n  /**\n   * An optional id to use for the `TextField` or `TextArea` that is also used\n   * to create an id for the inline help/error messages.\n   *\n   * @defaultValue `\"text-field-\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * An optional ref that should be merged with the ref returned by this hook.\n   * This should really only be used if you are making a custom component using\n   * this hook and forwarding refs. If you need a ref to access the `<input>` or\n   * `<textarea>` DOM node, you can use the `fieldRef` returned by this hook\n   * instead.\n   *\n   * @example Accessing TextField DOM Node\n   * ```tsx\n   * import { TextField, useTextField } from \"@react-md/core\";\n   * import { useEffect } from \"react\";\n   * import type { ReactElement } from \"react\";\n   *\n   * function Example(): ReactElement {\n   *   const { fieldRef, fieldProps } = useTextField({ name: \"example\" });\n   *\n   *   useEffect(() => {\n   *     fieldRef.current;\n   *     //       ^ HTMLInputElement | null\n   *   }, [fieldRef]);\n   *\n   *   return <TextField {...fieldProps} label=\"Example\" />;\n   * }\n   * ```\n   */\n  ref?: Ref<E>;\n\n  /**\n   * A unique name to attach to the `TextField`, `TextArea` or `Password`\n   * component.\n   */\n  name: string;\n\n  /**\n   * Boolean if the `FormMessage` should also display a counter for the\n   * remaining letters allowed based on the `maxLength`.\n   *\n   * This will still be considered false if the `maxLength` value is not\n   * provided.\n   *\n   * @defaultValue `false`\n   */\n  counter?: boolean;\n\n  /**\n   * This is used internally for the `useNumberField` hook and probably\n   * shouldn't be used otherwise. This is just passed into the\n   * {@link getErrorMessage} options and is used for additional validation.\n   *\n   * @defaultValue `false`\n   */\n  isNumber?: boolean;\n\n  /**\n   * The default value to use for the `TextField` or `TextArea` one initial\n   * render. If you want to manually change the value to something else after\n   * the initial render, either change the `key` for the component containing\n   * this hook, or use the `setState` function returned from this hook.\n   *\n   * @defaultValue `\"\"`\n   */\n  defaultValue?: UseStateInitializer<string>;\n\n  /**\n   * An optional help text to display in the `FormMessage` component when there\n   * is not an error.\n   */\n  helpText?: ReactNode;\n\n  /**\n   * A function used to determine if the `TextField` or `TextArea` is an in\n   * errored state.\n   *\n   * @see {@link defaultIsErrored}\n   * @defaultValue `defaultIsErrored`\n   */\n  isErrored?: IsErrored;\n\n  /**\n   * An optional error icon used in the {@link getErrorIcon} option.\n   *\n   * @defaultValue `getIcon(\"error\")`\n   */\n  errorIcon?: ReactNode;\n\n  /**\n   * A function used to get the error icon to display at the right of the\n   * `TextField` or `TextArea`. The default behavior will only show an icon when\n   * the `error` state is `true` and an `errorIcon` option has been provided.\n   *\n   * @see {@link defaultGetErrorIcon}\n   * @defaultValue `defaultGetErrorIcon`\n   */\n  getErrorIcon?: GetErrorIcon;\n\n  /**\n   * A function to get and display an error message based on the `TextField` or\n   * `TextArea` validity.\n   *\n   * @see {@link defaultGetErrorMessage}\n   * @defaultValue `defaultGetErrorMessage`\n   */\n  getErrorMessage?: GetErrorMessage;\n\n  /**\n   * An optional function that will be called whenever the `error` state is\n   * changed. This can be used for more complex forms to `disable` the Submit\n   * button or anything else if any field has an error.\n   *\n   * @defaultValue `() => {}`\n   */\n  onErrorChange?: ErrorChangeHandler<E>;\n\n  /**\n   * Boolean if the `TextField` or `TextArea` will **not** be rendered along\n   * with a `FormMessage` component. This will prevent the `aria-describedby`\n   * prop from being returned when set to `true`.\n   *\n   * @defaultValue `false`\n   */\n  disableMessage?: boolean;\n\n  /**\n   * Boolean if the `maxLength` prop should not be passed to the `TextField`\n   * component since it will prevent any additional characters from being\n   * entered in the text field which might feel like weird behavior to some\n   * users. This should really only be used when the `counter` option is also\n   * enabled and rendering along with a `FormMessage` component.\n   *\n   * @defaultValue `false`\n   */\n  disableMaxLength?: boolean;\n\n  /**\n   * @defaultValue `\"recommended\"`\n   */\n  validationType?: TextFieldValidationType;\n}\n\n/** @since 6.0.0 */\nexport interface TextFieldImplementation<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> extends TextFieldHookState {\n  fieldRef: RefObject<E>;\n  reset(): void;\n  setState: UseStateSetter<Readonly<TextFieldHookState>>;\n  fieldProps: ProvidedTextFieldProps<E>;\n}\n\n/** @since 6.0.0 */\nexport interface TextFieldWithMessageImplementation<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> extends TextFieldImplementation<E> {\n  fieldProps: ProvidedTextFieldMessageProps<E>;\n}\n\n/** @since 6.0.0 */\nexport interface ValidatedTextFieldImplementation<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> extends TextFieldImplementation<E> {\n  fieldProps: ProvidedTextFieldProps<E> | ProvidedTextFieldMessageProps<E>;\n}\n\n/**\n * If you do not want to display the error messages below the `TextField` and\n * handle error messages separately, set the `disableMessage` option to `true`.\n *\n * @example No Inline Error Messages\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { TextField, useTextField } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps } = useTextField({\n *     name: \"example\",\n *     disableMessage: true,\n *   });\n *\n *   return <TextField {...fieldProps} label=\"Example\" />;\n * }\n * ```\n *\n * Look at the other {@link useTextField} override for additional examples.\n */\nexport function useTextField<E extends HTMLInputElement | HTMLTextAreaElement>(\n  options: TextFieldHookOptions<E> & { disableMessage: true }\n): TextFieldImplementation<E>;\n\n/**\n * @example Simple Example\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { TextField, useTextField } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps } = useTextField({\n *     name: \"example\",\n *   });\n *\n *   return <TextField {...fieldProps} label=\"Example\" />;\n * }\n * ```\n *\n * @example Inline Counter\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { TextField, useTextField } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps } = useTextField({\n *     name: \"example\",\n *     counter: true,\n *     required: true,\n *     maxLength: 20,\n *     disableMaxLength: true,\n *   });\n *\n *   return <TextField {...fieldProps} label=\"Example\" />;\n * }\n * ```\n *\n * @example Adding Constraints\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { TextField, useTextField } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps } = useTextField({\n *     name: \"example\",\n *     required: true,\n *     pattern: \"^[A-z]+$\",\n *     minLength: 4,\n *     maxLength: 20,\n *   });\n *\n *   return <TextField {...fieldProps} label=\"Example\" />;\n * }\n * ```\n *\n * @example Custom Validation\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { TextField, useTextField } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps } = useTextField({\n *     name: \"example\",\n *     required: true,\n *     getErrorMessage(options) {\n *       const {\n *         value,\n *         pattern,\n *         required,\n *         minLength,\n *         maxLength,\n *         validity,\n *         validationMessage,\n *         isNumber,\n *         isBlurEvent,\n *         validationType,\n *       } = options;\n *\n *       if (validity.tooLong) {\n *         return `No more than ${maxLength} characters.`;\n *       }\n *\n *       if (validity.tooShort) {\n *         return `No more than ${minLength} characters.`;\n *       }\n *\n *       if (validity.valueMissing) {\n *         return \"This value is required!\";\n *       }\n *\n *       if (value === \"bad value\") {\n *         return \"Value cannot be bad value\";\n *       }\n *\n *       return defaultGetErrorMessage(options);\n *     }\n *   });\n *\n *   return <TextField {...fieldProps} label=\"Example\" />;\n * }\n * ```\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation\n * @since 2.5.6\n * @since 6.0.0 This hook returns an object instead of an ordered list.\n */\nexport function useTextField<E extends HTMLInputElement | HTMLTextAreaElement>(\n  options: TextFieldHookOptions<E>\n): TextFieldWithMessageImplementation<E>;\nexport function useTextField<E extends HTMLInputElement | HTMLTextAreaElement>(\n  options: TextFieldHookOptions<E>\n): ValidatedTextFieldImplementation<E> {\n  const {\n    id: propId,\n    ref: propRef,\n    name,\n    defaultValue = \"\",\n    isNumber = false,\n    required,\n    pattern,\n    minLength,\n    maxLength,\n    onBlur = noop,\n    onChange = noop,\n    onInvalid = noop,\n    counter = false,\n    helpText,\n    validationType = \"recommended\",\n    disableMessage = false,\n    disableMaxLength = false,\n    errorIcon: propErrorIcon,\n    isErrored = defaultIsErrored,\n    onErrorChange = noop,\n    getErrorIcon = defaultGetErrorIcon,\n    getErrorMessage = defaultGetErrorMessage,\n  } = options;\n\n  const id = useEnsuredId(propId, \"text-field\");\n  const messageId = `${id}-message`;\n  const [fieldRef, ref] = useEnsuredRef(propRef);\n  const [state, setState] = useState<TextFieldHookState>(() => {\n    const value =\n      typeof defaultValue === \"function\" ? defaultValue() : defaultValue;\n\n    return {\n      value,\n      error: false,\n      errorMessage: \"\",\n    };\n  });\n  const { value, error, errorMessage } = state;\n\n  // using a `ref` instead of a `useCallback` makes it so the `defaultValue`\n  // will always be used once reset.\n  const reset = useRef(() => {\n    fieldRef.current?.setCustomValidity(\"\");\n    setState({ value, error: false, errorMessage: \"\" });\n  }).current;\n\n  const errored = useRef(error);\n  const checkValidity = useCallback(\n    (isBlurEvent: boolean) => {\n      const field = fieldRef.current;\n      if (!field) {\n        throw new Error(\"Unable to check validity due to missing ref\");\n      }\n\n      // need to temporarily set the `maxLength` back so it can be \"verified\"\n      // through the validity api\n      /* istanbul ignore next */\n      if (isBlurEvent && disableMaxLength && typeof maxLength === \"number\") {\n        field.maxLength = maxLength;\n      }\n\n      const { value } = field;\n      field.setCustomValidity(\"\");\n      field.checkValidity();\n\n      // remove the temporarily set `maxLength` attribute after checking the\n      // validity\n      /* istanbul ignore next */\n      if (disableMaxLength && typeof maxLength === \"number\") {\n        field.removeAttribute(\"maxLength\");\n      }\n\n      const options: ErrorMessageOptions = {\n        value,\n        pattern,\n        required,\n        minLength,\n        maxLength,\n        isBlurEvent,\n        isNumber,\n        validationType,\n        validity: field.validity,\n        validationMessage: field.validationMessage,\n      };\n      const errorMessage = getErrorMessage(options);\n      const error = isErrored({ ...options, errorMessage });\n\n      if (errored.current !== error) {\n        errored.current = error;\n        onErrorChange({\n          ref: fieldRef,\n          name,\n          error,\n          errorMessage,\n        });\n      }\n\n      /* istanbul ignore next */\n      if (errorMessage !== field.validationMessage) {\n        field.setCustomValidity(errorMessage);\n      }\n\n      setState((prevState) => {\n        if (\n          prevState.value === value &&\n          prevState.error === error &&\n          prevState.errorMessage === errorMessage\n        ) {\n          return prevState;\n        }\n\n        return {\n          value,\n          error,\n          errorMessage,\n        };\n      });\n    },\n    [\n      disableMaxLength,\n      fieldRef,\n      getErrorMessage,\n      isErrored,\n      isNumber,\n      maxLength,\n      minLength,\n      name,\n      onErrorChange,\n      pattern,\n      required,\n      validationType,\n    ]\n  );\n\n  const errorIcon = getIcon(\"error\", propErrorIcon);\n  const fieldProps: ProvidedTextFieldProps<E> & {\n    messageProps?: ProvidedFormMessageProps;\n  } = {\n    id,\n    ref,\n    name,\n    value,\n    error,\n    required,\n    pattern,\n    minLength,\n    maxLength: disableMaxLength ? undefined : maxLength,\n    rightAddon: getErrorIcon({\n      error,\n      errorIcon,\n      errorMessage,\n    }),\n    onBlur(event) {\n      onBlur(event);\n      if (event.isPropagationStopped()) {\n        return;\n      }\n      checkValidity(true);\n    },\n    onChange(event) {\n      onChange(event);\n      if (event.isPropagationStopped()) {\n        return;\n      }\n\n      if (validationType === \"blur\") {\n        setState((prevState) => ({\n          ...prevState,\n          value: event.currentTarget.value,\n        }));\n        return;\n      }\n\n      checkValidity(false);\n    },\n    onInvalid(event) {\n      onInvalid(event);\n      if (\n        event.isPropagationStopped() ||\n        event.currentTarget === document.activeElement\n      ) {\n        return;\n      }\n\n      // this makes it so that if a submit button is clicked in a form, all\n      // textfields will gain the error state immediately\n      // also need to extract the validationMessage immediately because of the\n      // SyntheticEvent behavior in React. By the time the `setState` is called,\n      // the event might've been deleted\n      const { validationMessage } = event.currentTarget;\n\n      setState((prevState) => {\n        if (prevState.error) {\n          return prevState;\n        }\n\n        return {\n          ...prevState,\n          error: true,\n          errorMessage: validationMessage,\n        };\n      });\n    },\n  };\n\n  if (!disableMessage) {\n    fieldProps[\"aria-describedby\"] = messageId;\n    fieldProps.messageProps = {\n      id: messageId,\n      error,\n      length: counter ? value.length : undefined,\n      maxLength:\n        counter && typeof maxLength === \"number\" ? maxLength : undefined,\n      children: errorMessage || helpText,\n    };\n  }\n\n  return {\n    ...state,\n    reset,\n    setState,\n    fieldRef,\n    fieldProps,\n  };\n}\n"],"names":["useCallback","useRef","useState","getIcon","useEnsuredId","useEnsuredRef","defaultGetErrorIcon","defaultGetErrorMessage","defaultIsErrored","noop","useTextField","options","id","propId","ref","propRef","name","defaultValue","isNumber","required","pattern","minLength","maxLength","onBlur","onChange","onInvalid","counter","helpText","validationType","disableMessage","disableMaxLength","errorIcon","propErrorIcon","isErrored","onErrorChange","getErrorIcon","getErrorMessage","messageId","fieldRef","state","setState","value","error","errorMessage","reset","current","setCustomValidity","errored","checkValidity","isBlurEvent","field","Error","removeAttribute","validity","validationMessage","prevState","fieldProps","undefined","rightAddon","event","isPropagationStopped","currentTarget","document","activeElement","messageProps","length","children"],"mappings":"AAAA;AACA,SACEA,WAAW,EACXC,MAAM,EACNC,QAAQ,QAMH,QAAQ;AACf,SAASC,OAAO,QAAQ,wBAAwB;AAEhD,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,aAAa,QAAQ,sBAAsB;AAMpD,SACEC,mBAAmB,EACnBC,sBAAsB,EACtBC,gBAAgB,QAOX,kBAAkB;AAEzB,MAAMC,OAAO;AACX,aAAa;AACf;AAkbA,OAAO,SAASC,aACdC,OAAgC;IAEhC,MAAM,EACJC,IAAIC,MAAM,EACVC,KAAKC,OAAO,EACZC,IAAI,EACJC,eAAe,EAAE,EACjBC,WAAW,KAAK,EAChBC,QAAQ,EACRC,OAAO,EACPC,SAAS,EACTC,SAAS,EACTC,SAASd,IAAI,EACbe,WAAWf,IAAI,EACfgB,YAAYhB,IAAI,EAChBiB,UAAU,KAAK,EACfC,QAAQ,EACRC,iBAAiB,aAAa,EAC9BC,iBAAiB,KAAK,EACtBC,mBAAmB,KAAK,EACxBC,WAAWC,aAAa,EACxBC,YAAYzB,gBAAgB,EAC5B0B,gBAAgBzB,IAAI,EACpB0B,eAAe7B,mBAAmB,EAClC8B,kBAAkB7B,sBAAsB,EACzC,GAAGI;IAEJ,MAAMC,KAAKR,aAAaS,QAAQ;IAChC,MAAMwB,YAAY,CAAC,EAAEzB,GAAG,QAAQ,CAAC;IACjC,MAAM,CAAC0B,UAAUxB,IAAI,GAAGT,cAAcU;IACtC,MAAM,CAACwB,OAAOC,SAAS,GAAGtC,SAA6B;QACrD,MAAMuC,QACJ,OAAOxB,iBAAiB,aAAaA,iBAAiBA;QAExD,OAAO;YACLwB;YACAC,OAAO;YACPC,cAAc;QAChB;IACF;IACA,MAAM,EAAEF,KAAK,EAAEC,KAAK,EAAEC,YAAY,EAAE,GAAGJ;IAEvC,0EAA0E;IAC1E,kCAAkC;IAClC,MAAMK,QAAQ3C,OAAO;QACnBqC,SAASO,OAAO,EAAEC,kBAAkB;QACpCN,SAAS;YAAEC;YAAOC,OAAO;YAAOC,cAAc;QAAG;IACnD,GAAGE,OAAO;IAEV,MAAME,UAAU9C,OAAOyC;IACvB,MAAMM,gBAAgBhD,YACpB,CAACiD;QACC,MAAMC,QAAQZ,SAASO,OAAO;QAC9B,IAAI,CAACK,OAAO;YACV,MAAM,IAAIC,MAAM;QAClB;QAEA,uEAAuE;QACvE,2BAA2B;QAC3B,wBAAwB,GACxB,IAAIF,eAAenB,oBAAoB,OAAOR,cAAc,UAAU;YACpE4B,MAAM5B,SAAS,GAAGA;QACpB;QAEA,MAAM,EAAEmB,KAAK,EAAE,GAAGS;QAClBA,MAAMJ,iBAAiB,CAAC;QACxBI,MAAMF,aAAa;QAEnB,sEAAsE;QACtE,WAAW;QACX,wBAAwB,GACxB,IAAIlB,oBAAoB,OAAOR,cAAc,UAAU;YACrD4B,MAAME,eAAe,CAAC;QACxB;QAEA,MAAMzC,UAA+B;YACnC8B;YACArB;YACAD;YACAE;YACAC;YACA2B;YACA/B;YACAU;YACAyB,UAAUH,MAAMG,QAAQ;YACxBC,mBAAmBJ,MAAMI,iBAAiB;QAC5C;QACA,MAAMX,eAAeP,gBAAgBzB;QACrC,MAAM+B,QAAQT,UAAU;YAAE,GAAGtB,OAAO;YAAEgC;QAAa;QAEnD,IAAII,QAAQF,OAAO,KAAKH,OAAO;YAC7BK,QAAQF,OAAO,GAAGH;YAClBR,cAAc;gBACZpB,KAAKwB;gBACLtB;gBACA0B;gBACAC;YACF;QACF;QAEA,wBAAwB,GACxB,IAAIA,iBAAiBO,MAAMI,iBAAiB,EAAE;YAC5CJ,MAAMJ,iBAAiB,CAACH;QAC1B;QAEAH,SAAS,CAACe;YACR,IACEA,UAAUd,KAAK,KAAKA,SACpBc,UAAUb,KAAK,KAAKA,SACpBa,UAAUZ,YAAY,KAAKA,cAC3B;gBACA,OAAOY;YACT;YAEA,OAAO;gBACLd;gBACAC;gBACAC;YACF;QACF;IACF,GACA;QACEb;QACAQ;QACAF;QACAH;QACAf;QACAI;QACAD;QACAL;QACAkB;QACAd;QACAD;QACAS;KACD;IAGH,MAAMG,YAAY5B,QAAQ,SAAS6B;IACnC,MAAMwB,aAEF;QACF5C;QACAE;QACAE;QACAyB;QACAC;QACAvB;QACAC;QACAC;QACAC,WAAWQ,mBAAmB2B,YAAYnC;QAC1CoC,YAAYvB,aAAa;YACvBO;YACAX;YACAY;QACF;QACApB,QAAOoC,KAAK;YACVpC,OAAOoC;YACP,IAAIA,MAAMC,oBAAoB,IAAI;gBAChC;YACF;YACAZ,cAAc;QAChB;QACAxB,UAASmC,KAAK;YACZnC,SAASmC;YACT,IAAIA,MAAMC,oBAAoB,IAAI;gBAChC;YACF;YAEA,IAAIhC,mBAAmB,QAAQ;gBAC7BY,SAAS,CAACe,YAAe,CAAA;wBACvB,GAAGA,SAAS;wBACZd,OAAOkB,MAAME,aAAa,CAACpB,KAAK;oBAClC,CAAA;gBACA;YACF;YAEAO,cAAc;QAChB;QACAvB,WAAUkC,KAAK;YACblC,UAAUkC;YACV,IACEA,MAAMC,oBAAoB,MAC1BD,MAAME,aAAa,KAAKC,SAASC,aAAa,EAC9C;gBACA;YACF;YAEA,qEAAqE;YACrE,mDAAmD;YACnD,wEAAwE;YACxE,0EAA0E;YAC1E,kCAAkC;YAClC,MAAM,EAAET,iBAAiB,EAAE,GAAGK,MAAME,aAAa;YAEjDrB,SAAS,CAACe;gBACR,IAAIA,UAAUb,KAAK,EAAE;oBACnB,OAAOa;gBACT;gBAEA,OAAO;oBACL,GAAGA,SAAS;oBACZb,OAAO;oBACPC,cAAcW;gBAChB;YACF;QACF;IACF;IAEA,IAAI,CAACzB,gBAAgB;QACnB2B,UAAU,CAAC,mBAAmB,GAAGnB;QACjCmB,WAAWQ,YAAY,GAAG;YACxBpD,IAAIyB;YACJK;YACAuB,QAAQvC,UAAUe,MAAMwB,MAAM,GAAGR;YACjCnC,WACEI,WAAW,OAAOJ,cAAc,WAAWA,YAAYmC;YACzDS,UAAUvB,gBAAgBhB;QAC5B;IACF;IAEA,OAAO;QACL,GAAGY,KAAK;QACRK;QACAJ;QACAF;QACAkB;IACF;AACF"}

package/dist/form/useTextFieldContainerAddons.d.ts

@@ -0,0 +1,88 @@
+import { type CSSProperties, type Ref, type RefCallback } from "react";
+import { type FormTheme } from "./types.js";
+/**
+ * @since 6.0.0
+ */
+export interface TextFieldContainerAddonsOptions {
+    /**
+     * This style will automatically be merged with the returned `style`.
+     */
+    style?: CSSProperties;
+    /** @defaultValue `getFormConfig("theme")` */
+    theme?: FormTheme;
+    /**
+     * Set this to `true` if the `leftAddon` should be watched for size changes.
+     */
+    leftAddon: boolean;
+    /**
+     * An optional ref that will be merged with the returned
+     * {@link TextFieldContainerAddonsImplementation.leftAddonRef}.
+     */
+    leftAddonRef?: Ref<HTMLSpanElement>;
+    /**
+     * This can be used to update the CSS `calc()` expression to change the
+     * padding.
+     *
+     * @example Add an additional 0.25rem padding
+     * ```
+     * leftAddonExtraCalc="+ 0.25rem"
+     * ```
+     *
+     * @defaultValue `""`
+     */
+    leftAddonExtraCalc?: string;
+    /**
+     * Set this to `true` if the `rightAddon` should be watched for size changes.
+     */
+    rightAddon: boolean;
+    /**
+     * An optional ref that will be merged with the returned
+     * {@link TextFieldContainerAddonsImplementation.rightAddonRef}.
+     */
+    rightAddonRef?: Ref<HTMLSpanElement>;
+    /**
+     * This can be used to update the CSS `calc()` expression to change the
+     * padding.
+     *
+     * @example Add an additional 0.25rem padding
+     * ```
+     * leftAddonExtraCalc="+ 0.25rem"
+     * ```
+     *
+     * @defaultValue `""`
+     */
+    rightAddonExtraCalc?: string;
+}
+/**
+ * @since 6.0.0
+ */
+export interface TextFieldContainerAddonsImplementation {
+    style?: CSSProperties;
+    leftAddonRef: RefCallback<HTMLSpanElement>;
+    rightAddonRef: RefCallback<HTMLSpanElement>;
+}
+/**
+ * This hook can be used to automatically update the padding on the
+ * `TextFieldContainer` based on the size of the `leftAddon` and `rightAddon`.
+ *
+ * @example Simple Example
+ * ```tsx
+ * const { style, leftAddonRef, rightAddonRef } = useTextFieldContainerAddons({
+ *   leftAddon: true,
+ *   rightAddon: true,
+ * });
+ *
+ * return (
+ *   <TextField
+ *     style={style}
+ *     leftAddon={<SomeDynamicAddon />}
+ *     leftAddonProps={{ ref: leftAddonRef }}
+ *     rightAddon={<SomeDynamicAddon />}
+ *     rightAddonProps={{ ref: rightAddonRef }}
+ *   />
+ * );
+ * ```
+ *
+ * @since 6.0.0
+ */
+export declare function useTextFieldContainerAddons(options: TextFieldContainerAddonsOptions): TextFieldContainerAddonsImplementation;

package/dist/form/useTextFieldContainerAddons.js

@@ -0,0 +1,85 @@
+"use client";
+import { useCallback, useState } from "react";
+import { useResizeObserver } from "../useResizeObserver.js";
+import { getFormConfig } from "./formConfig.js";
+/**
+ * @since 6.0.0
+ * @internal
+ */ function useAddonPadding(options) {
+    const { ref, addon, theme, extra } = options;
+    const [padding, setPadding] = useState();
+    const addonRef = useResizeObserver({
+        ref,
+        onUpdate: useCallback((entry)=>{
+            const inlineSize = entry.borderBoxSize[0]?.inlineSize;
+            if (typeof inlineSize !== "number") {
+                return;
+            }
+            // the leading space for the extra calc is required
+            setPadding(`calc(var(--rmd-text-field-${theme}d-padding) + ${inlineSize}px${extra ? ` ${extra}` : ""})`);
+        }, [
+            extra,
+            theme
+        ]),
+        disabled: !addon,
+        disableHeight: true
+    });
+    return [
+        padding,
+        addonRef
+    ];
+}
+/**
+ * This hook can be used to automatically update the padding on the
+ * `TextFieldContainer` based on the size of the `leftAddon` and `rightAddon`.
+ *
+ * @example Simple Example
+ * ```tsx
+ * const { style, leftAddonRef, rightAddonRef } = useTextFieldContainerAddons({
+ *   leftAddon: true,
+ *   rightAddon: true,
+ * });
+ *
+ * return (
+ *   <TextField
+ *     style={style}
+ *     leftAddon={<SomeDynamicAddon />}
+ *     leftAddonProps={{ ref: leftAddonRef }}
+ *     rightAddon={<SomeDynamicAddon />}
+ *     rightAddonProps={{ ref: rightAddonRef }}
+ *   />
+ * );
+ * ```
+ *
+ * @since 6.0.0
+ */ export function useTextFieldContainerAddons(options) {
+    const { style: propStyle, theme: propTheme, leftAddon, rightAddon, leftAddonRef: propLeftAddonRef, rightAddonRef: propRightAddonRef, leftAddonExtraCalc = "", rightAddonExtraCalc = "" } = options;
+    const theme = getFormConfig("theme", propTheme);
+    const [paddingLeft, leftAddonRef] = useAddonPadding({
+        ref: propLeftAddonRef,
+        theme,
+        addon: leftAddon,
+        extra: `+ var(--rmd-addon-spacing)${leftAddonExtraCalc ? ` ${leftAddonExtraCalc}` : ""}`
+    });
+    const [paddingRight, rightAddonRef] = useAddonPadding({
+        ref: propRightAddonRef,
+        theme,
+        addon: rightAddon,
+        extra: rightAddonExtraCalc
+    });
+    let style = propStyle;
+    if (typeof paddingLeft === "string" || typeof paddingRight === "string") {
+        style = {
+            ...propStyle,
+            "--rmd-text-field-padding-left": paddingLeft ?? propStyle?.["--rmd-text-field-padding-left"],
+            "--rmd-text-field-padding-right": paddingRight ?? propStyle?.["--rmd-text-field-padding-right"]
+        };
+    }
+    return {
+        style,
+        leftAddonRef,
+        rightAddonRef
+    };
+}
+
+//# sourceMappingURL=useTextFieldContainerAddons.js.map

package/dist/form/useTextFieldContainerAddons.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/form/useTextFieldContainerAddons.ts"],"sourcesContent":["\"use client\";\nimport {\n  useCallback,\n  useState,\n  type CSSProperties,\n  type Ref,\n  type RefCallback,\n} from \"react\";\nimport { useResizeObserver } from \"../useResizeObserver.js\";\nimport { getFormConfig } from \"./formConfig.js\";\nimport { type FormTheme } from \"./types.js\";\n\n/**\n * @since 6.0.0\n * @internal\n */\ninterface AddonPaddingOptions {\n  ref?: Ref<HTMLSpanElement>;\n  addon: boolean;\n  theme: FormTheme;\n  extra: string;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nfunction useAddonPadding(\n  options: AddonPaddingOptions\n): [padding: string | undefined, addonRef: RefCallback<HTMLSpanElement>] {\n  const { ref, addon, theme, extra } = options;\n  const [padding, setPadding] = useState<string | undefined>();\n  const addonRef = useResizeObserver({\n    ref,\n    onUpdate: useCallback(\n      (entry) => {\n        const inlineSize = entry.borderBoxSize[0]?.inlineSize;\n        if (typeof inlineSize !== \"number\") {\n          return;\n        }\n\n        // the leading space for the extra calc is required\n        setPadding(\n          `calc(var(--rmd-text-field-${theme}d-padding) + ${inlineSize}px${extra ? ` ${extra}` : \"\"})`\n        );\n      },\n      [extra, theme]\n    ),\n    disabled: !addon,\n    disableHeight: true,\n  });\n\n  return [padding, addonRef];\n}\n\n/**\n * @since 6.0.0\n */\nexport interface TextFieldContainerAddonsOptions {\n  /**\n   * This style will automatically be merged with the returned `style`.\n   */\n  style?: CSSProperties;\n\n  /** @defaultValue `getFormConfig(\"theme\")` */\n  theme?: FormTheme;\n\n  /**\n   * Set this to `true` if the `leftAddon` should be watched for size changes.\n   */\n  leftAddon: boolean;\n\n  /**\n   * An optional ref that will be merged with the returned\n   * {@link TextFieldContainerAddonsImplementation.leftAddonRef}.\n   */\n  leftAddonRef?: Ref<HTMLSpanElement>;\n\n  /**\n   * This can be used to update the CSS `calc()` expression to change the\n   * padding.\n   *\n   * @example Add an additional 0.25rem padding\n   * ```\n   * leftAddonExtraCalc=\"+ 0.25rem\"\n   * ```\n   *\n   * @defaultValue `\"\"`\n   */\n  leftAddonExtraCalc?: string;\n\n  /**\n   * Set this to `true` if the `rightAddon` should be watched for size changes.\n   */\n  rightAddon: boolean;\n\n  /**\n   * An optional ref that will be merged with the returned\n   * {@link TextFieldContainerAddonsImplementation.rightAddonRef}.\n   */\n  rightAddonRef?: Ref<HTMLSpanElement>;\n\n  /**\n   * This can be used to update the CSS `calc()` expression to change the\n   * padding.\n   *\n   * @example Add an additional 0.25rem padding\n   * ```\n   * leftAddonExtraCalc=\"+ 0.25rem\"\n   * ```\n   *\n   * @defaultValue `\"\"`\n   */\n  rightAddonExtraCalc?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface TextFieldContainerAddonsImplementation {\n  style?: CSSProperties;\n  leftAddonRef: RefCallback<HTMLSpanElement>;\n  rightAddonRef: RefCallback<HTMLSpanElement>;\n}\n\n/**\n * This hook can be used to automatically update the padding on the\n * `TextFieldContainer` based on the size of the `leftAddon` and `rightAddon`.\n *\n * @example Simple Example\n * ```tsx\n * const { style, leftAddonRef, rightAddonRef } = useTextFieldContainerAddons({\n *   leftAddon: true,\n *   rightAddon: true,\n * });\n *\n * return (\n *   <TextField\n *     style={style}\n *     leftAddon={<SomeDynamicAddon />}\n *     leftAddonProps={{ ref: leftAddonRef }}\n *     rightAddon={<SomeDynamicAddon />}\n *     rightAddonProps={{ ref: rightAddonRef }}\n *   />\n * );\n * ```\n *\n * @since 6.0.0\n */\nexport function useTextFieldContainerAddons(\n  options: TextFieldContainerAddonsOptions\n): TextFieldContainerAddonsImplementation {\n  const {\n    style: propStyle,\n    theme: propTheme,\n    leftAddon,\n    rightAddon,\n    leftAddonRef: propLeftAddonRef,\n    rightAddonRef: propRightAddonRef,\n    leftAddonExtraCalc = \"\",\n    rightAddonExtraCalc = \"\",\n  } = options;\n  const theme = getFormConfig(\"theme\", propTheme);\n\n  const [paddingLeft, leftAddonRef] = useAddonPadding({\n    ref: propLeftAddonRef,\n    theme,\n    addon: leftAddon,\n    extra: `+ var(--rmd-addon-spacing)${leftAddonExtraCalc ? ` ${leftAddonExtraCalc}` : \"\"}`,\n  });\n\n  const [paddingRight, rightAddonRef] = useAddonPadding({\n    ref: propRightAddonRef,\n    theme,\n    addon: rightAddon,\n    extra: rightAddonExtraCalc,\n  });\n\n  let style = propStyle;\n  if (typeof paddingLeft === \"string\" || typeof paddingRight === \"string\") {\n    style = {\n      ...propStyle,\n      \"--rmd-text-field-padding-left\":\n        paddingLeft ?? propStyle?.[\"--rmd-text-field-padding-left\"],\n      \"--rmd-text-field-padding-right\":\n        paddingRight ?? propStyle?.[\"--rmd-text-field-padding-right\"],\n    };\n  }\n\n  return {\n    style,\n    leftAddonRef,\n    rightAddonRef,\n  };\n}\n"],"names":["useCallback","useState","useResizeObserver","getFormConfig","useAddonPadding","options","ref","addon","theme","extra","padding","setPadding","addonRef","onUpdate","entry","inlineSize","borderBoxSize","disabled","disableHeight","useTextFieldContainerAddons","style","propStyle","propTheme","leftAddon","rightAddon","leftAddonRef","propLeftAddonRef","rightAddonRef","propRightAddonRef","leftAddonExtraCalc","rightAddonExtraCalc","paddingLeft","paddingRight"],"mappings":"AAAA;AACA,SACEA,WAAW,EACXC,QAAQ,QAIH,QAAQ;AACf,SAASC,iBAAiB,QAAQ,0BAA0B;AAC5D,SAASC,aAAa,QAAQ,kBAAkB;AAchD;;;CAGC,GACD,SAASC,gBACPC,OAA4B;IAE5B,MAAM,EAAEC,GAAG,EAAEC,KAAK,EAAEC,KAAK,EAAEC,KAAK,EAAE,GAAGJ;IACrC,MAAM,CAACK,SAASC,WAAW,GAAGV;IAC9B,MAAMW,WAAWV,kBAAkB;QACjCI;QACAO,UAAUb,YACR,CAACc;YACC,MAAMC,aAAaD,MAAME,aAAa,CAAC,EAAE,EAAED;YAC3C,IAAI,OAAOA,eAAe,UAAU;gBAClC;YACF;YAEA,mDAAmD;YACnDJ,WACE,CAAC,0BAA0B,EAAEH,MAAM,aAAa,EAAEO,WAAW,EAAE,EAAEN,QAAQ,CAAC,CAAC,EAAEA,MAAM,CAAC,GAAG,GAAG,CAAC,CAAC;QAEhG,GACA;YAACA;YAAOD;SAAM;QAEhBS,UAAU,CAACV;QACXW,eAAe;IACjB;IAEA,OAAO;QAACR;QAASE;KAAS;AAC5B;AAwEA;;;;;;;;;;;;;;;;;;;;;;;CAuBC,GACD,OAAO,SAASO,4BACdd,OAAwC;IAExC,MAAM,EACJe,OAAOC,SAAS,EAChBb,OAAOc,SAAS,EAChBC,SAAS,EACTC,UAAU,EACVC,cAAcC,gBAAgB,EAC9BC,eAAeC,iBAAiB,EAChCC,qBAAqB,EAAE,EACvBC,sBAAsB,EAAE,EACzB,GAAGzB;IACJ,MAAMG,QAAQL,cAAc,SAASmB;IAErC,MAAM,CAACS,aAAaN,aAAa,GAAGrB,gBAAgB;QAClDE,KAAKoB;QACLlB;QACAD,OAAOgB;QACPd,OAAO,CAAC,0BAA0B,EAAEoB,qBAAqB,CAAC,CAAC,EAAEA,mBAAmB,CAAC,GAAG,GAAG,CAAC;IAC1F;IAEA,MAAM,CAACG,cAAcL,cAAc,GAAGvB,gBAAgB;QACpDE,KAAKsB;QACLpB;QACAD,OAAOiB;QACPf,OAAOqB;IACT;IAEA,IAAIV,QAAQC;IACZ,IAAI,OAAOU,gBAAgB,YAAY,OAAOC,iBAAiB,UAAU;QACvEZ,QAAQ;YACN,GAAGC,SAAS;YACZ,iCACEU,eAAeV,WAAW,CAAC,gCAAgC;YAC7D,kCACEW,gBAAgBX,WAAW,CAAC,iCAAiC;QACjE;IACF;IAEA,OAAO;QACLD;QACAK;QACAE;IACF;AACF"}

package/dist/form/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/utils.ts"],"sourcesContent":["import { type KeyboardEvent } from \"react\";\n\n/**\n * This util should be used to implement the native \"Enter\" keypress behavior\n * for \"fake\" form components to submit the form if exists.\n *\n * The way this will work will be:\n * - attempt to find a form by querying for a parent form element. if no parent\n *   form element can be found, try to use the `formId` in a\n *   `document.getElementById`\n * - if a form element is found, find the submit button within the form. If\n *   there are no submit buttons within the form, try to find a submit button in\n *   the document that is linked to this form by `form={formId}`\n * - if the submit button was found, click it to trigger the form submit\n *   behavior\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/requestSubmit\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit\n * @internal\n * @since 2.7.0\n * @since 6.0.0 No longer returns a boolean, added the `formId` parameter, and\n * moved into the form package.\n * @since 6.0.0 Uses `form.requestSubmit` instead of clicking the submit button\n */\nexport function tryToSubmitRelatedForm<E extends HTMLElement>(\n  event: KeyboardEvent<E>,\n  formId: string | undefined\n): void {\n  const { currentTarget } = event;\n  let form: HTMLElement | null = null;\n  if (formId) {\n    form = document.getElementById(formId);\n  } else {\n    form = currentTarget.closest(\"form\");\n  }\n\n  if (!form || !(form instanceof HTMLFormElement)) {\n    return;\n  }\n\n  formId = formId || form.id;\n  let submit = form.querySelector<HTMLButtonElement>('[type=\"submit\"]');\n  if (!submit && formId) {\n    submit = document.querySelector<HTMLButtonElement>(\n      `[type=\"submit\"][form=\"${formId}\"]`\n    );\n  }\n\n  form.requestSubmit(submit);\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport type EditableHTMLElement = HTMLInputElement | HTMLTextAreaElement;\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport type ChangeableHTMLElement = EditableHTMLElement | HTMLSelectElement;\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport function isChangeableHTMLElement(\n  element: Element | null\n): element is ChangeableHTMLElement {\n  return !!element && \"value\" in element;\n}\n\n/**\n * This is used to trigger a change event for a form element.\n *\n * @internal\n * @see https://stackoverflow.com/a/46012210\n * @since 6.0.0\n */\nexport function triggerManualChangeEvent(\n  element: ChangeableHTMLElement | null,\n  value: string | number\n): void {\n  if (!element) {\n    return;\n  }\n\n  const prototype = Object.getPrototypeOf(element);\n  const setter = Object.getOwnPropertyDescriptor(prototype, \"value\")?.set;\n  if (!setter) {\n    return;\n  }\n\n  setter.call(element, value);\n  const event = new Event(\"input\", { bubbles: true });\n  element.dispatchEvent(event);\n}\n"],"names":["tryToSubmitRelatedForm","event","formId","currentTarget","form","document","getElementById","closest","HTMLFormElement","id","submit","querySelector","requestSubmit","isChangeableHTMLElement","element","triggerManualChangeEvent","value","prototype","Object","getPrototypeOf","setter","getOwnPropertyDescriptor","set","call","Event","bubbles","dispatchEvent"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;CAqBC,GACD,OAAO,SAASA,uBACdC,KAAuB,EACvBC,MAA0B;IAE1B,MAAM,EAAEC,aAAa,EAAE,GAAGF;IAC1B,IAAIG,OAA2B;IAC/B,IAAIF,QAAQ;QACVE,OAAOC,SAASC,cAAc,CAACJ;IACjC,OAAO;QACLE,OAAOD,cAAcI,OAAO,CAAC;IAC/B;IAEA,IAAI,CAACH,QAAQ,CAAEA,CAAAA,gBAAgBI,eAAc,GAAI;QAC/C;IACF;IAEAN,SAASA,UAAUE,KAAKK,EAAE;IAC1B,IAAIC,SAASN,KAAKO,aAAa,CAAoB;IACnD,IAAI,CAACD,UAAUR,QAAQ;QACrBQ,SAASL,SAASM,aAAa,CAC7B,CAAC,sBAAsB,EAAET,OAAO,EAAE,CAAC;IAEvC;IAEAE,KAAKQ,aAAa,CAACF;AACrB;AAcA;;;CAGC,GACD,OAAO,SAASG,wBACdC,OAAuB;IAEvB,OAAO,CAAC,CAACA,WAAW,WAAWA;AACjC;AAEA;;;;;;CAMC,GACD,OAAO,SAASC,yBACdD,OAAqC,EACrCE,KAAsB;IAEtB,IAAI,CAACF,SAAS;QACZ;IACF;IAEA,MAAMG,YAAYC,OAAOC,cAAc,CAACL;IACxC,MAAMM,SAASF,OAAOG,wBAAwB,CAACJ,WAAW,UAAUK;IACpE,IAAI,CAACF,QAAQ;QACX;IACF;IAEAA,OAAOG,IAAI,CAACT,SAASE;IACrB,MAAMf,QAAQ,IAAIuB,MAAM,SAAS;QAAEC,SAAS;IAAK;IACjDX,QAAQY,aAAa,CAACzB;AACxB"}
+{"version":3,"sources":["../../src/form/utils.ts"],"sourcesContent":["import { type KeyboardEvent } from \"react\";\n\n/**\n * This util should be used to implement the native \"Enter\" keypress behavior\n * for \"fake\" form components to submit the form if exists.\n *\n * The way this will work will be:\n * - attempt to find a form by querying for a parent form element. if no parent\n *   form element can be found, try to use the `formId` in a\n *   `document.getElementById`\n * - if a form element is found, find the submit button within the form. If\n *   there are no submit buttons within the form, try to find a submit button in\n *   the document that is linked to this form by `form={formId}`\n * - if the submit button was found, click it to trigger the form submit\n *   behavior\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/requestSubmit\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit\n * @internal\n * @since 2.7.0\n * @since 6.0.0 No longer returns a boolean, added the `formId` parameter, and\n * moved into the form package.\n * @since 6.0.0 Uses `form.requestSubmit` instead of clicking the submit button\n */\nexport function tryToSubmitRelatedForm<E extends HTMLElement>(\n  event: KeyboardEvent<E>,\n  formId: string | undefined\n): void {\n  const { currentTarget } = event;\n  let form: HTMLElement | null = null;\n  if (formId) {\n    form = document.getElementById(formId);\n  } else {\n    form = currentTarget.closest(\"form\");\n  }\n\n  if (!form || !(form instanceof HTMLFormElement)) {\n    return;\n  }\n\n  formId = formId || form.id;\n  let submit = form.querySelector<HTMLButtonElement>('[type=\"submit\"]');\n  if (!submit && formId) {\n    submit = document.querySelector<HTMLButtonElement>(\n      `[type=\"submit\"][form=\"${formId}\"]`\n    );\n  }\n\n  form.requestSubmit(submit);\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport type EditableHTMLElement = HTMLInputElement | HTMLTextAreaElement;\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport type ChangeableHTMLElement = EditableHTMLElement | HTMLSelectElement;\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport function isChangeableHTMLElement(\n  element: Element | null\n): element is ChangeableHTMLElement {\n  return !!element && \"value\" in element;\n}\n\n/**\n * This is used to trigger a change event for a form element.\n *\n * @internal\n * @see https://stackoverflow.com/a/46012210\n * @since 6.0.0\n */\nexport function triggerManualChangeEvent(\n  element: ChangeableHTMLElement | null,\n  value: string | number\n): void {\n  if (!element) {\n    return;\n  }\n\n  const prototype = Object.getPrototypeOf(element);\n  const setter = Object.getOwnPropertyDescriptor(prototype, \"value\")?.set;\n  if (!setter) {\n    return;\n  }\n\n  setter.call(element, value);\n  const event = new Event(\"input\", { bubbles: true });\n  element.dispatchEvent(event);\n}\n"],"names":["tryToSubmitRelatedForm","event","formId","currentTarget","form","document","getElementById","closest","HTMLFormElement","id","submit","querySelector","requestSubmit","isChangeableHTMLElement","element","triggerManualChangeEvent","value","prototype","Object","getPrototypeOf","setter","getOwnPropertyDescriptor","set","call","Event","bubbles","dispatchEvent"],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;CAqBC,GACD,OAAO,SAASA,uBACdC,KAAuB,EACvBC,MAA0B;IAE1B,MAAM,EAAEC,aAAa,EAAE,GAAGF;IAC1B,IAAIG,OAA2B;IAC/B,IAAIF,QAAQ;QACVE,OAAOC,SAASC,cAAc,CAACJ;IACjC,OAAO;QACLE,OAAOD,cAAcI,OAAO,CAAC;IAC/B;IAEA,IAAI,CAACH,QAAQ,CAAEA,CAAAA,gBAAgBI,eAAc,GAAI;QAC/C;IACF;IAEAN,SAASA,UAAUE,KAAKK,EAAE;IAC1B,IAAIC,SAASN,KAAKO,aAAa,CAAoB;IACnD,IAAI,CAACD,UAAUR,QAAQ;QACrBQ,SAASL,SAASM,aAAa,CAC7B,CAAC,sBAAsB,EAAET,OAAO,EAAE,CAAC;IAEvC;IAEAE,KAAKQ,aAAa,CAACF;AACrB;AAcA;;;CAGC,GACD,OAAO,SAASG,wBACdC,OAAuB;IAEvB,OAAO,CAAC,CAACA,WAAW,WAAWA;AACjC;AAEA;;;;;;CAMC,GACD,OAAO,SAASC,yBACdD,OAAqC,EACrCE,KAAsB;IAEtB,IAAI,CAACF,SAAS;QACZ;IACF;IAEA,MAAMG,YAAYC,OAAOC,cAAc,CAACL;IACxC,MAAMM,SAASF,OAAOG,wBAAwB,CAACJ,WAAW,UAAUK;IACpE,IAAI,CAACF,QAAQ;QACX;IACF;IAEAA,OAAOG,IAAI,CAACT,SAASE;IACrB,MAAMf,QAAQ,IAAIuB,MAAM,SAAS;QAAEC,SAAS;IAAK;IACjDX,QAAQY,aAAa,CAACzB;AACxB"}

package/dist/form/validation.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/validation.ts"],"sourcesContent":["import { type InputHTMLAttributes, type ReactNode } from \"react\";\n\n/**\n * @since 2.5.6\n * @since 6.0.0 Renamed from `TextConstraints` to\n * `TextFieldValidationOptions`\n */\nexport type TextFieldValidationOptions = Pick<\n  InputHTMLAttributes<HTMLInputElement>,\n  \"minLength\" | \"maxLength\" | \"required\" | \"pattern\"\n>;\n\n/**\n * Since the default validation messages can be verbose, this type is used to\n * configure when/how to display the native browser messages when the validation\n * state changes during the `change` event phase. The validation message will\n * always be shown on blur.\n *\n * When this is:\n *\n * - `true` -&gt; always show the browser message when it exists\n * - `false` -&gt; never show the browser message\n * - `\"recommended\"` -&gt; only shows the browser message if it is one of the\n *   `RECOMMENDED_STATE_KEYS`/`RECOMMENDED_NUMBER_STATE_KEYS` validation errors\n * - `keyof ValidityState` -&gt; only shows the browser message if it is not the\n *   specific validation error\n * - `(keyof ValidityState)[]` -&gt; only shows the browser message if it is not\n *   the specific validation errors\n *\n * @see {@link RECOMMENDED_STATE_KEYS}\n * @see {@link RECOMMENDED_NUMBER_STATE_KEYS}\n * @since 2.5.6\n * @since 6.0.0 Renamed from `ChangeValidationBehavior` to\n * `TextFieldValidationType`\n */\nexport type TextFieldValidationType =\n  | \"blur\"\n  | \"change\"\n  | \"recommended\"\n  | keyof ValidityState\n  | readonly (keyof ValidityState)[];\n\n/**\n * @since 2.5.0\n */\nexport interface ErrorMessageOptions extends TextFieldValidationOptions {\n  /**\n   * The current input or textarea's validity state.\n   */\n  validity: ValidityState;\n\n  /**\n   * The browser defined validation message based on the validity state. This\n   * will be the empty string when there are no errors.\n   */\n  validationMessage: string;\n\n  /**\n   * The current `TextField` or `TextArea` value.\n   */\n  value: string;\n\n  /**\n   * This will only be `true` if called by the `useNumberField` hook.\n   */\n  isNumber: boolean;\n\n  /**\n   * Boolean if this is triggered from a blur event instead of a change event.\n   */\n  isBlurEvent: boolean;\n\n  /**\n   * The validation type defined by the `useTextField` hook.\n   */\n  validationType: TextFieldValidationType;\n}\n\n/**\n * A function to get a custom error message for specific errors. This is really\n * useful when using the `pattern` attribute to give additional information or\n * changing the native \"language translated\" error message.\n *\n * @param options - An object containing metadata that can be used to create an\n * error message for your `TextField` or `TextArea`.\n * @returns An error message to display or an empty string.\n * @since 2.5.0\n */\nexport type GetErrorMessage = (options: ErrorMessageOptions) => string;\n\n/**\n * @internal\n * @since 2.5.0\n */\nconst VALIDITY_STATE_KEYS: readonly (keyof ValidityState)[] = [\n  \"badInput\",\n  \"customError\",\n  \"patternMismatch\",\n  \"rangeOverflow\",\n  \"rangeUnderflow\",\n  \"stepMismatch\",\n  \"tooLong\",\n  \"tooShort\",\n  \"typeMismatch\",\n  \"valueMissing\",\n];\n\n/**\n * @internal\n * @since 2.5.0\n */\nexport const RECOMMENDED_STATE_KEYS: readonly (keyof ValidityState)[] = [\n  \"badInput\",\n  \"tooLong\",\n  \"valueMissing\",\n];\n\n/**\n * @internal\n * @since 2.5.0\n */\nexport const RECOMMENDED_NUMBER_STATE_KEYS: readonly (keyof ValidityState)[] = [\n  ...RECOMMENDED_STATE_KEYS,\n  \"rangeOverflow\",\n  \"rangeUnderflow\",\n  \"tooShort\",\n  \"typeMismatch\",\n];\n\n/**\n * The validation message is actually kind of weird since it's possible for a\n * form element to have multiple errors at once. The validation message will be\n * the first error that appears, so need to make sure that the first error is\n * one of the recommended state keys so the message appears for only those types\n * of errors.\n *\n * @internal\n * @since 2.5.0\n */\nconst isRecommended = (validity: ValidityState, isNumber: boolean): boolean => {\n  const errorable = isNumber\n    ? RECOMMENDED_NUMBER_STATE_KEYS\n    : RECOMMENDED_STATE_KEYS;\n\n  return VALIDITY_STATE_KEYS.every((key) => {\n    const errored = validity[key];\n    return !errored || errorable.includes(key);\n  });\n};\n\n/**\n * The default implementation for getting an error message for the `TextField`\n * or `TextArea` components that relies on the behavior of the\n * {@link ChangeValidationBehavior}\n *\n * @since 2.5.0\n */\nexport const defaultGetErrorMessage: GetErrorMessage = (options) => {\n  const {\n    isNumber,\n    isBlurEvent,\n    validity,\n    validationMessage,\n    validationType: validate,\n  } = options;\n\n  if (isBlurEvent || !validationMessage || validate === \"change\") {\n    return validationMessage;\n  }\n\n  if (validate === \"blur\") {\n    return \"\";\n  }\n\n  if (validate === \"recommended\") {\n    return isRecommended(validity, isNumber) ? validationMessage : \"\";\n  }\n\n  const keys = typeof validate === \"string\" ? [validate] : validate;\n\n  return keys.length &&\n    VALIDITY_STATE_KEYS.some((key) => validity[key] && keys.includes(key))\n    ? validationMessage\n    : \"\";\n};\n\n/**\n * @since 2.5.0\n */\nexport interface IsErroredOptions extends ErrorMessageOptions {\n  /**\n   * The current error message or an empty string.\n   */\n  errorMessage: string;\n}\n\n/**\n * A function that is used to determine if a `TextField` or `TextArea` is in an\n * errored state.\n *\n * @param options - All the current options that can be used to determine the\n * error state.\n * @returns True if the component is considered to be in an errored state.\n * @since 2.5.0\n */\nexport type IsErrored = (options: IsErroredOptions) => boolean;\n\n/**\n * The default implementation for checking if a `TextField` or `TextArea` is\n * errored by returning `true` if the `errorMessage` string is truthy or the\n * value is not within the `minLength` and `maxLength` constraints when they\n * exist.\n *\n * @since 2.5.0\n */\nexport const defaultIsErrored: IsErrored = (options) => {\n  const { value, errorMessage, minLength, maxLength, isBlurEvent } = options;\n\n  return (\n    !!errorMessage ||\n    (typeof maxLength === \"number\" && value.length > maxLength) ||\n    (isBlurEvent && typeof minLength === \"number\" && value.length < minLength)\n  );\n};\n\n/**\n * @since 6.0.0\n */\nexport interface GetErrorIconOptions {\n  /**\n   * This will be `true` if the `TextField` or `TextArea` is in an errored state.\n   */\n  error: boolean;\n\n  /**\n   * The current error icon that was provided.\n   */\n  errorIcon: ReactNode;\n\n  /**\n   * The current error message or an empty string.\n   */\n  errorMessage: string;\n}\n\n/**\n * A function that can be used to dynamically get an error icon based on the\n * current visible error.\n *\n * @param options - The {@link GetErrorIconOptions}\n * @returns An icon to render or falsey to render nothing.\n * @since 2.5.0\n * @since 6.0.0 Updated to accept a single object argument\n */\nexport type GetErrorIcon = (options: GetErrorIconOptions) => ReactNode;\n\n/**\n * The default implementation for showing an error icon in `TextField` and\n * `TextArea` components that will only display when the error flag is enabled.\n *\n * @since 2.5.0\n */\nexport const defaultGetErrorIcon: GetErrorIcon = (options) => {\n  const { error, errorIcon } = options;\n\n  return error && errorIcon;\n};\n"],"names":["VALIDITY_STATE_KEYS","RECOMMENDED_STATE_KEYS","RECOMMENDED_NUMBER_STATE_KEYS","isRecommended","validity","isNumber","errorable","every","key","errored","includes","defaultGetErrorMessage","options","isBlurEvent","validationMessage","validationType","validate","keys","length","some","defaultIsErrored","value","errorMessage","minLength","maxLength","defaultGetErrorIcon","error","errorIcon"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AA0FA;;;CAGC,GACD,MAAMA,sBAAwD;IAC5D;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;CACD;AAED;;;CAGC,GACD,OAAO,MAAMC,yBAA2D;IACtE;IACA;IACA;CACD,CAAC;AAEF;;;CAGC,GACD,OAAO,MAAMC,gCAAkE;OAC1ED;IACH;IACA;IACA;IACA;CACD,CAAC;AAEF;;;;;;;;;CASC,GACD,MAAME,gBAAgB,CAACC,UAAyBC;IAC9C,MAAMC,YAAYD,WACdH,gCACAD;IAEJ,OAAOD,oBAAoBO,KAAK,CAAC,CAACC;QAChC,MAAMC,UAAUL,QAAQ,CAACI,IAAI;QAC7B,OAAO,CAACC,WAAWH,UAAUI,QAAQ,CAACF;IACxC;AACF;AAEA;;;;;;CAMC,GACD,OAAO,MAAMG,yBAA0C,CAACC;IACtD,MAAM,EACJP,QAAQ,EACRQ,WAAW,EACXT,QAAQ,EACRU,iBAAiB,EACjBC,gBAAgBC,QAAQ,EACzB,GAAGJ;IAEJ,IAAIC,eAAe,CAACC,qBAAqBE,aAAa,UAAU;QAC9D,OAAOF;IACT;IAEA,IAAIE,aAAa,QAAQ;QACvB,OAAO;IACT;IAEA,IAAIA,aAAa,eAAe;QAC9B,OAAOb,cAAcC,UAAUC,YAAYS,oBAAoB;IACjE;IAEA,MAAMG,OAAO,OAAOD,aAAa,WAAW;QAACA;KAAS,GAAGA;IAEzD,OAAOC,KAAKC,MAAM,IAChBlB,oBAAoBmB,IAAI,CAAC,CAACX,MAAQJ,QAAQ,CAACI,IAAI,IAAIS,KAAKP,QAAQ,CAACF,QAC/DM,oBACA;AACN,EAAE;AAuBF;;;;;;;CAOC,GACD,OAAO,MAAMM,mBAA8B,CAACR;IAC1C,MAAM,EAAES,KAAK,EAAEC,YAAY,EAAEC,SAAS,EAAEC,SAAS,EAAEX,WAAW,EAAE,GAAGD;IAEnE,OACE,CAAC,CAACU,gBACD,OAAOE,cAAc,YAAYH,MAAMH,MAAM,GAAGM,aAChDX,eAAe,OAAOU,cAAc,YAAYF,MAAMH,MAAM,GAAGK;AAEpE,EAAE;AAiCF;;;;;CAKC,GACD,OAAO,MAAME,sBAAoC,CAACb;IAChD,MAAM,EAAEc,KAAK,EAAEC,SAAS,EAAE,GAAGf;IAE7B,OAAOc,SAASC;AAClB,EAAE"}
+{"version":3,"sources":["../../src/form/validation.ts"],"sourcesContent":["import { type InputHTMLAttributes, type ReactNode } from \"react\";\n\n/**\n * @since 2.5.6\n * @since 6.0.0 Renamed from `TextConstraints` to\n * `TextFieldValidationOptions`\n */\nexport type TextFieldValidationOptions = Pick<\n  InputHTMLAttributes<HTMLInputElement>,\n  \"minLength\" | \"maxLength\" | \"required\" | \"pattern\"\n>;\n\n/**\n * Since the default validation messages can be verbose, this type is used to\n * configure when/how to display the native browser messages when the validation\n * state changes during the `change` event phase. The validation message will\n * always be shown on blur.\n *\n * When this is:\n *\n * - `true` -&gt; always show the browser message when it exists\n * - `false` -&gt; never show the browser message\n * - `\"recommended\"` -&gt; only shows the browser message if it is one of the\n *   `RECOMMENDED_STATE_KEYS`/`RECOMMENDED_NUMBER_STATE_KEYS` validation errors\n * - `keyof ValidityState` -&gt; only shows the browser message if it is not the\n *   specific validation error\n * - `(keyof ValidityState)[]` -&gt; only shows the browser message if it is not\n *   the specific validation errors\n *\n * @see {@link RECOMMENDED_STATE_KEYS}\n * @see {@link RECOMMENDED_NUMBER_STATE_KEYS}\n * @since 2.5.6\n * @since 6.0.0 Renamed from `ChangeValidationBehavior` to\n * `TextFieldValidationType`\n */\nexport type TextFieldValidationType =\n  | \"blur\"\n  | \"change\"\n  | \"recommended\"\n  | keyof ValidityState\n  | readonly (keyof ValidityState)[];\n\n/**\n * @since 2.5.0\n */\nexport interface ErrorMessageOptions extends TextFieldValidationOptions {\n  /**\n   * The current input or textarea's validity state.\n   */\n  validity: ValidityState;\n\n  /**\n   * The browser defined validation message based on the validity state. This\n   * will be the empty string when there are no errors.\n   */\n  validationMessage: string;\n\n  /**\n   * The current `TextField` or `TextArea` value.\n   */\n  value: string;\n\n  /**\n   * This will only be `true` if called by the `useNumberField` hook.\n   */\n  isNumber: boolean;\n\n  /**\n   * Boolean if this is triggered from a blur event instead of a change event.\n   */\n  isBlurEvent: boolean;\n\n  /**\n   * The validation type defined by the `useTextField` hook.\n   */\n  validationType: TextFieldValidationType;\n}\n\n/**\n * A function to get a custom error message for specific errors. This is really\n * useful when using the `pattern` attribute to give additional information or\n * changing the native \"language translated\" error message.\n *\n * @param options - An object containing metadata that can be used to create an\n * error message for your `TextField` or `TextArea`.\n * @returns An error message to display or an empty string.\n * @since 2.5.0\n */\nexport type GetErrorMessage = (options: ErrorMessageOptions) => string;\n\n/**\n * @internal\n * @since 2.5.0\n */\nconst VALIDITY_STATE_KEYS: readonly (keyof ValidityState)[] = [\n  \"badInput\",\n  \"customError\",\n  \"patternMismatch\",\n  \"rangeOverflow\",\n  \"rangeUnderflow\",\n  \"stepMismatch\",\n  \"tooLong\",\n  \"tooShort\",\n  \"typeMismatch\",\n  \"valueMissing\",\n];\n\n/**\n * @internal\n * @since 2.5.0\n */\nexport const RECOMMENDED_STATE_KEYS: readonly (keyof ValidityState)[] = [\n  \"badInput\",\n  \"tooLong\",\n  \"valueMissing\",\n];\n\n/**\n * @internal\n * @since 2.5.0\n */\nexport const RECOMMENDED_NUMBER_STATE_KEYS: readonly (keyof ValidityState)[] = [\n  ...RECOMMENDED_STATE_KEYS,\n  \"rangeOverflow\",\n  \"rangeUnderflow\",\n  \"tooShort\",\n  \"typeMismatch\",\n];\n\n/**\n * The validation message is actually kind of weird since it's possible for a\n * form element to have multiple errors at once. The validation message will be\n * the first error that appears, so need to make sure that the first error is\n * one of the recommended state keys so the message appears for only those types\n * of errors.\n *\n * @internal\n * @since 2.5.0\n */\nconst isRecommended = (validity: ValidityState, isNumber: boolean): boolean => {\n  const errorable = isNumber\n    ? RECOMMENDED_NUMBER_STATE_KEYS\n    : RECOMMENDED_STATE_KEYS;\n\n  return VALIDITY_STATE_KEYS.every((key) => {\n    const errored = validity[key];\n    return !errored || errorable.includes(key);\n  });\n};\n\n/**\n * The default implementation for getting an error message for the `TextField`\n * or `TextArea` components that relies on the behavior of the\n * {@link ChangeValidationBehavior}\n *\n * @since 2.5.0\n */\nexport const defaultGetErrorMessage: GetErrorMessage = (options) => {\n  const {\n    isNumber,\n    isBlurEvent,\n    validity,\n    validationMessage,\n    validationType: validate,\n  } = options;\n\n  if (isBlurEvent || !validationMessage || validate === \"change\") {\n    return validationMessage;\n  }\n\n  if (validate === \"blur\") {\n    return \"\";\n  }\n\n  if (validate === \"recommended\") {\n    return isRecommended(validity, isNumber) ? validationMessage : \"\";\n  }\n\n  const keys = typeof validate === \"string\" ? [validate] : validate;\n\n  return keys.length &&\n    VALIDITY_STATE_KEYS.some((key) => validity[key] && keys.includes(key))\n    ? validationMessage\n    : \"\";\n};\n\n/**\n * @since 2.5.0\n */\nexport interface IsErroredOptions extends ErrorMessageOptions {\n  /**\n   * The current error message or an empty string.\n   */\n  errorMessage: string;\n}\n\n/**\n * A function that is used to determine if a `TextField` or `TextArea` is in an\n * errored state.\n *\n * @param options - All the current options that can be used to determine the\n * error state.\n * @returns True if the component is considered to be in an errored state.\n * @since 2.5.0\n */\nexport type IsErrored = (options: IsErroredOptions) => boolean;\n\n/**\n * The default implementation for checking if a `TextField` or `TextArea` is\n * errored by returning `true` if the `errorMessage` string is truthy or the\n * value is not within the `minLength` and `maxLength` constraints when they\n * exist.\n *\n * @since 2.5.0\n */\nexport const defaultIsErrored: IsErrored = (options) => {\n  const { value, errorMessage, minLength, maxLength, isBlurEvent } = options;\n\n  return (\n    !!errorMessage ||\n    (typeof maxLength === \"number\" && value.length > maxLength) ||\n    (isBlurEvent && typeof minLength === \"number\" && value.length < minLength)\n  );\n};\n\n/**\n * @since 6.0.0\n */\nexport interface GetErrorIconOptions {\n  /**\n   * This will be `true` if the `TextField` or `TextArea` is in an errored state.\n   */\n  error: boolean;\n\n  /**\n   * The current error icon that was provided.\n   */\n  errorIcon: ReactNode;\n\n  /**\n   * The current error message or an empty string.\n   */\n  errorMessage: string;\n}\n\n/**\n * A function that can be used to dynamically get an error icon based on the\n * current visible error.\n *\n * @param options - The {@link GetErrorIconOptions}\n * @returns An icon to render or falsey to render nothing.\n * @since 2.5.0\n * @since 6.0.0 Updated to accept a single object argument\n */\nexport type GetErrorIcon = (options: GetErrorIconOptions) => ReactNode;\n\n/**\n * The default implementation for showing an error icon in `TextField` and\n * `TextArea` components that will only display when the error flag is enabled.\n *\n * @since 2.5.0\n */\nexport const defaultGetErrorIcon: GetErrorIcon = (options) => {\n  const { error, errorIcon } = options;\n\n  return error && errorIcon;\n};\n"],"names":["VALIDITY_STATE_KEYS","RECOMMENDED_STATE_KEYS","RECOMMENDED_NUMBER_STATE_KEYS","isRecommended","validity","isNumber","errorable","every","key","errored","includes","defaultGetErrorMessage","options","isBlurEvent","validationMessage","validationType","validate","keys","length","some","defaultIsErrored","value","errorMessage","minLength","maxLength","defaultGetErrorIcon","error","errorIcon"],"mappings":"AA0FA;;;CAGC,GACD,MAAMA,sBAAwD;IAC5D;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;CACD;AAED;;;CAGC,GACD,OAAO,MAAMC,yBAA2D;IACtE;IACA;IACA;CACD,CAAC;AAEF;;;CAGC,GACD,OAAO,MAAMC,gCAAkE;OAC1ED;IACH;IACA;IACA;IACA;CACD,CAAC;AAEF;;;;;;;;;CASC,GACD,MAAME,gBAAgB,CAACC,UAAyBC;IAC9C,MAAMC,YAAYD,WACdH,gCACAD;IAEJ,OAAOD,oBAAoBO,KAAK,CAAC,CAACC;QAChC,MAAMC,UAAUL,QAAQ,CAACI,IAAI;QAC7B,OAAO,CAACC,WAAWH,UAAUI,QAAQ,CAACF;IACxC;AACF;AAEA;;;;;;CAMC,GACD,OAAO,MAAMG,yBAA0C,CAACC;IACtD,MAAM,EACJP,QAAQ,EACRQ,WAAW,EACXT,QAAQ,EACRU,iBAAiB,EACjBC,gBAAgBC,QAAQ,EACzB,GAAGJ;IAEJ,IAAIC,eAAe,CAACC,qBAAqBE,aAAa,UAAU;QAC9D,OAAOF;IACT;IAEA,IAAIE,aAAa,QAAQ;QACvB,OAAO;IACT;IAEA,IAAIA,aAAa,eAAe;QAC9B,OAAOb,cAAcC,UAAUC,YAAYS,oBAAoB;IACjE;IAEA,MAAMG,OAAO,OAAOD,aAAa,WAAW;QAACA;KAAS,GAAGA;IAEzD,OAAOC,KAAKC,MAAM,IAChBlB,oBAAoBmB,IAAI,CAAC,CAACX,MAAQJ,QAAQ,CAACI,IAAI,IAAIS,KAAKP,QAAQ,CAACF,QAC/DM,oBACA;AACN,EAAE;AAuBF;;;;;;;CAOC,GACD,OAAO,MAAMM,mBAA8B,CAACR;IAC1C,MAAM,EAAES,KAAK,EAAEC,YAAY,EAAEC,SAAS,EAAEC,SAAS,EAAEX,WAAW,EAAE,GAAGD;IAEnE,OACE,CAAC,CAACU,gBACD,OAAOE,cAAc,YAAYH,MAAMH,MAAM,GAAGM,aAChDX,eAAe,OAAOU,cAAc,YAAYF,MAAMH,MAAM,GAAGK;AAEpE,EAAE;AAiCF;;;;;CAKC,GACD,OAAO,MAAME,sBAAoC,CAACb;IAChD,MAAM,EAAEc,KAAK,EAAEC,SAAS,EAAE,GAAGf;IAE7B,OAAOc,SAASC;AAClB,EAAE"}

package/dist/hoverMode/useHoverMode.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hoverMode/useHoverMode.ts"],"sourcesContent":["\"use client\";\nimport type { MouseEvent } from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport type { UseStateInitializer, UseStateSetter } from \"../types.js\";\nimport type { SimpleHoverModeContext } from \"./useHoverModeProvider.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface HoverModeConfigurationOptions extends SimpleHoverModeContext {\n  /** @defaultValue `false` */\n  disabled?: boolean;\n\n  /**\n   * This can be used to override the `HoverModeContext`'s hover time.\n   */\n  hoverTimeout?: number;\n\n  /**\n   * This can be used to override the `HoverModeContext`'s leave time.\n   */\n  leaveTimeout?: number;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ControlledHoverModeOptions\n  extends HoverModeConfigurationOptions {\n  setVisible: UseStateSetter<boolean>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ControlledHoverModeImplementation {\n  startShowFlow(id?: string | MouseEvent): void;\n  startHideFlow(): void;\n  clearVisibilityTimeout(): void;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface UncontrolledHoverModeOptions\n  extends HoverModeConfigurationOptions {\n  defaultVisible?: UseStateInitializer<boolean>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface UncontrolledHoverModeImplementation\n  extends ControlledHoverModeImplementation {\n  visible: boolean;\n  setVisible: UseStateSetter<boolean>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface HoverModeImplementation\n  extends ControlledHoverModeImplementation {\n  visible?: boolean;\n  setVisible?: UseStateSetter<boolean>;\n}\n\n/**\n * @since 2.8.0\n * @since 5.0.0 This hook no longer returns `handlers` or\n * `stickyHandlers` and does not hide when an element on the page is clicked.\n * @since 6.0.0 Requires passing the custom hover mode context to\n * work.\n */\nexport function useHoverMode(\n  options: ControlledHoverModeOptions\n): ControlledHoverModeImplementation;\nexport function useHoverMode(\n  options: UncontrolledHoverModeOptions\n): UncontrolledHoverModeImplementation;\nexport function useHoverMode(\n  options: ControlledHoverModeOptions | UncontrolledHoverModeOptions\n): HoverModeImplementation {\n  const {\n    disabled,\n    hoverTimeout: hoverTime,\n    hoverTimeoutRef,\n    leaveTimeout: leaveTime,\n    leaveTimeoutRef,\n    enableHoverMode,\n    disableHoverMode,\n    startDisableTimer,\n    clearDisableTimer,\n    setVisible: propSetVisible,\n    defaultVisible = false,\n  } = options as ControlledHoverModeOptions & UncontrolledHoverModeOptions;\n\n  const state = useState(defaultVisible);\n  let visible: boolean | undefined;\n  let setVisible: UseStateSetter<boolean>;\n  if (typeof propSetVisible !== \"undefined\") {\n    setVisible = propSetVisible;\n  } else {\n    [visible, setVisible] = state;\n  }\n\n  const visibilityTimeout = useRef<number | undefined>();\n  const clearVisibilityTimeout = useCallback(() => {\n    window.clearTimeout(visibilityTimeout.current);\n  }, []);\n\n  // if the element is near the viewport edge, the mouseleave event might not\n  // trigger correctly. for these cases, just clear any timeouts to be safe.\n  // do not hide the visibility so that you can still inspect things in the\n  // devtools\n  useEffect(() => {\n    if (disabled) {\n      return;\n    }\n\n    const handler = (): void => {\n      window.clearTimeout(visibilityTimeout.current);\n\n      // might need to play with this more or make it configurable. if the mouse\n      // leaves the window, you're _normally_ not interacting with the app\n      // anymore and state should reset.\n      disableHoverMode();\n    };\n\n    document.addEventListener(\"mouseleave\", handler);\n    return () => {\n      document.removeEventListener(\"mouseleave\", handler);\n    };\n  }, [disableHoverMode, disabled]);\n\n  useEffect(() => {\n    return () => {\n      window.clearTimeout(visibilityTimeout.current);\n    };\n  }, []);\n\n  return {\n    visible,\n    setVisible: setVisible === propSetVisible ? undefined : setVisible,\n    startShowFlow: useCallback(\n      (eventOrId) => {\n        const hoverTimeout = hoverTime ?? hoverTimeoutRef.current;\n        if (disabled || typeof hoverTimeout === \"undefined\") {\n          return;\n        }\n\n        let id: string;\n        if (typeof eventOrId === \"string\" || typeof eventOrId === \"undefined\") {\n          id = eventOrId || \"\";\n        } else {\n          id = eventOrId.currentTarget.id;\n        }\n\n        clearDisableTimer();\n        clearVisibilityTimeout();\n        visibilityTimeout.current = window.setTimeout(() => {\n          enableHoverMode(id);\n          setVisible(true);\n        }, hoverTimeout);\n      },\n      [\n        clearDisableTimer,\n        clearVisibilityTimeout,\n        disabled,\n        enableHoverMode,\n        hoverTime,\n        hoverTimeoutRef,\n        setVisible,\n      ]\n    ),\n    startHideFlow: useCallback(() => {\n      if (disabled) {\n        return;\n      }\n\n      startDisableTimer();\n      clearVisibilityTimeout();\n      visibilityTimeout.current = window.setTimeout(() => {\n        setVisible(false);\n      }, leaveTime ?? leaveTimeoutRef.current);\n    }, [\n      clearVisibilityTimeout,\n      disabled,\n      leaveTime,\n      leaveTimeoutRef,\n      setVisible,\n      startDisableTimer,\n    ]),\n    clearVisibilityTimeout,\n  };\n}\n"],"names":["useCallback","useEffect","useRef","useState","useHoverMode","options","disabled","hoverTimeout","hoverTime","hoverTimeoutRef","leaveTimeout","leaveTime","leaveTimeoutRef","enableHoverMode","disableHoverMode","startDisableTimer","clearDisableTimer","setVisible","propSetVisible","defaultVisible","state","visible","visibilityTimeout","clearVisibilityTimeout","window","clearTimeout","current","handler","document","addEventListener","removeEventListener","undefined","startShowFlow","eventOrId","id","currentTarget","setTimeout","startHideFlow"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AAEA,SAASA,WAAW,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AA8EjE,OAAO,SAASC,aACdC,OAAkE;IAElE,MAAM,EACJC,QAAQ,EACRC,cAAcC,SAAS,EACvBC,eAAe,EACfC,cAAcC,SAAS,EACvBC,eAAe,EACfC,eAAe,EACfC,gBAAgB,EAChBC,iBAAiB,EACjBC,iBAAiB,EACjBC,YAAYC,cAAc,EAC1BC,iBAAiB,KAAK,EACvB,GAAGd;IAEJ,MAAMe,QAAQjB,SAASgB;IACvB,IAAIE;IACJ,IAAIJ;IACJ,IAAI,OAAOC,mBAAmB,aAAa;QACzCD,aAAaC;IACf,OAAO;QACL,CAACG,SAASJ,WAAW,GAAGG;IAC1B;IAEA,MAAME,oBAAoBpB;IAC1B,MAAMqB,yBAAyBvB,YAAY;QACzCwB,OAAOC,YAAY,CAACH,kBAAkBI,OAAO;IAC/C,GAAG,EAAE;IAEL,2EAA2E;IAC3E,0EAA0E;IAC1E,yEAAyE;IACzE,WAAW;IACXzB,UAAU;QACR,IAAIK,UAAU;YACZ;QACF;QAEA,MAAMqB,UAAU;YACdH,OAAOC,YAAY,CAACH,kBAAkBI,OAAO;YAE7C,0EAA0E;YAC1E,oEAAoE;YACpE,kCAAkC;YAClCZ;QACF;QAEAc,SAASC,gBAAgB,CAAC,cAAcF;QACxC,OAAO;YACLC,SAASE,mBAAmB,CAAC,cAAcH;QAC7C;IACF,GAAG;QAACb;QAAkBR;KAAS;IAE/BL,UAAU;QACR,OAAO;YACLuB,OAAOC,YAAY,CAACH,kBAAkBI,OAAO;QAC/C;IACF,GAAG,EAAE;IAEL,OAAO;QACLL;QACAJ,YAAYA,eAAeC,iBAAiBa,YAAYd;QACxDe,eAAehC,YACb,CAACiC;YACC,MAAM1B,eAAeC,aAAaC,gBAAgBiB,OAAO;YACzD,IAAIpB,YAAY,OAAOC,iBAAiB,aAAa;gBACnD;YACF;YAEA,IAAI2B;YACJ,IAAI,OAAOD,cAAc,YAAY,OAAOA,cAAc,aAAa;gBACrEC,KAAKD,aAAa;YACpB,OAAO;gBACLC,KAAKD,UAAUE,aAAa,CAACD,EAAE;YACjC;YAEAlB;YACAO;YACAD,kBAAkBI,OAAO,GAAGF,OAAOY,UAAU,CAAC;gBAC5CvB,gBAAgBqB;gBAChBjB,WAAW;YACb,GAAGV;QACL,GACA;YACES;YACAO;YACAjB;YACAO;YACAL;YACAC;YACAQ;SACD;QAEHoB,eAAerC,YAAY;YACzB,IAAIM,UAAU;gBACZ;YACF;YAEAS;YACAQ;YACAD,kBAAkBI,OAAO,GAAGF,OAAOY,UAAU,CAAC;gBAC5CnB,WAAW;YACb,GAAGN,aAAaC,gBAAgBc,OAAO;QACzC,GAAG;YACDH;YACAjB;YACAK;YACAC;YACAK;YACAF;SACD;QACDQ;IACF;AACF"}
+{"version":3,"sources":["../../src/hoverMode/useHoverMode.ts"],"sourcesContent":["\"use client\";\nimport type { MouseEvent } from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport type { UseStateInitializer, UseStateSetter } from \"../types.js\";\nimport type { SimpleHoverModeContext } from \"./useHoverModeProvider.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface HoverModeConfigurationOptions extends SimpleHoverModeContext {\n  /** @defaultValue `false` */\n  disabled?: boolean;\n\n  /**\n   * This can be used to override the `HoverModeContext`'s hover time.\n   */\n  hoverTimeout?: number;\n\n  /**\n   * This can be used to override the `HoverModeContext`'s leave time.\n   */\n  leaveTimeout?: number;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ControlledHoverModeOptions\n  extends HoverModeConfigurationOptions {\n  setVisible: UseStateSetter<boolean>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ControlledHoverModeImplementation {\n  startShowFlow(id?: string | MouseEvent): void;\n  startHideFlow(): void;\n  clearVisibilityTimeout(): void;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface UncontrolledHoverModeOptions\n  extends HoverModeConfigurationOptions {\n  defaultVisible?: UseStateInitializer<boolean>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface UncontrolledHoverModeImplementation\n  extends ControlledHoverModeImplementation {\n  visible: boolean;\n  setVisible: UseStateSetter<boolean>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface HoverModeImplementation\n  extends ControlledHoverModeImplementation {\n  visible?: boolean;\n  setVisible?: UseStateSetter<boolean>;\n}\n\n/**\n * @since 2.8.0\n * @since 5.0.0 This hook no longer returns `handlers` or\n * `stickyHandlers` and does not hide when an element on the page is clicked.\n * @since 6.0.0 Requires passing the custom hover mode context to\n * work.\n */\nexport function useHoverMode(\n  options: ControlledHoverModeOptions\n): ControlledHoverModeImplementation;\nexport function useHoverMode(\n  options: UncontrolledHoverModeOptions\n): UncontrolledHoverModeImplementation;\nexport function useHoverMode(\n  options: ControlledHoverModeOptions | UncontrolledHoverModeOptions\n): HoverModeImplementation {\n  const {\n    disabled,\n    hoverTimeout: hoverTime,\n    hoverTimeoutRef,\n    leaveTimeout: leaveTime,\n    leaveTimeoutRef,\n    enableHoverMode,\n    disableHoverMode,\n    startDisableTimer,\n    clearDisableTimer,\n    setVisible: propSetVisible,\n    defaultVisible = false,\n  } = options as ControlledHoverModeOptions & UncontrolledHoverModeOptions;\n\n  const state = useState(defaultVisible);\n  let visible: boolean | undefined;\n  let setVisible: UseStateSetter<boolean>;\n  if (typeof propSetVisible !== \"undefined\") {\n    setVisible = propSetVisible;\n  } else {\n    [visible, setVisible] = state;\n  }\n\n  const visibilityTimeout = useRef<number | undefined>();\n  const clearVisibilityTimeout = useCallback(() => {\n    window.clearTimeout(visibilityTimeout.current);\n  }, []);\n\n  // if the element is near the viewport edge, the mouseleave event might not\n  // trigger correctly. for these cases, just clear any timeouts to be safe.\n  // do not hide the visibility so that you can still inspect things in the\n  // devtools\n  useEffect(() => {\n    if (disabled) {\n      return;\n    }\n\n    const handler = (): void => {\n      window.clearTimeout(visibilityTimeout.current);\n\n      // might need to play with this more or make it configurable. if the mouse\n      // leaves the window, you're _normally_ not interacting with the app\n      // anymore and state should reset.\n      disableHoverMode();\n    };\n\n    document.addEventListener(\"mouseleave\", handler);\n    return () => {\n      document.removeEventListener(\"mouseleave\", handler);\n    };\n  }, [disableHoverMode, disabled]);\n\n  useEffect(() => {\n    return () => {\n      window.clearTimeout(visibilityTimeout.current);\n    };\n  }, []);\n\n  return {\n    visible,\n    setVisible: setVisible === propSetVisible ? undefined : setVisible,\n    startShowFlow: useCallback(\n      (eventOrId) => {\n        const hoverTimeout = hoverTime ?? hoverTimeoutRef.current;\n        if (disabled || typeof hoverTimeout === \"undefined\") {\n          return;\n        }\n\n        let id: string;\n        if (typeof eventOrId === \"string\" || typeof eventOrId === \"undefined\") {\n          id = eventOrId || \"\";\n        } else {\n          id = eventOrId.currentTarget.id;\n        }\n\n        clearDisableTimer();\n        clearVisibilityTimeout();\n        visibilityTimeout.current = window.setTimeout(() => {\n          enableHoverMode(id);\n          setVisible(true);\n        }, hoverTimeout);\n      },\n      [\n        clearDisableTimer,\n        clearVisibilityTimeout,\n        disabled,\n        enableHoverMode,\n        hoverTime,\n        hoverTimeoutRef,\n        setVisible,\n      ]\n    ),\n    startHideFlow: useCallback(() => {\n      if (disabled) {\n        return;\n      }\n\n      startDisableTimer();\n      clearVisibilityTimeout();\n      visibilityTimeout.current = window.setTimeout(() => {\n        setVisible(false);\n      }, leaveTime ?? leaveTimeoutRef.current);\n    }, [\n      clearVisibilityTimeout,\n      disabled,\n      leaveTime,\n      leaveTimeoutRef,\n      setVisible,\n      startDisableTimer,\n    ]),\n    clearVisibilityTimeout,\n  };\n}\n"],"names":["useCallback","useEffect","useRef","useState","useHoverMode","options","disabled","hoverTimeout","hoverTime","hoverTimeoutRef","leaveTimeout","leaveTime","leaveTimeoutRef","enableHoverMode","disableHoverMode","startDisableTimer","clearDisableTimer","setVisible","propSetVisible","defaultVisible","state","visible","visibilityTimeout","clearVisibilityTimeout","window","clearTimeout","current","handler","document","addEventListener","removeEventListener","undefined","startShowFlow","eventOrId","id","currentTarget","setTimeout","startHideFlow"],"mappings":"AAAA;AAEA,SAASA,WAAW,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AA8EjE,OAAO,SAASC,aACdC,OAAkE;IAElE,MAAM,EACJC,QAAQ,EACRC,cAAcC,SAAS,EACvBC,eAAe,EACfC,cAAcC,SAAS,EACvBC,eAAe,EACfC,eAAe,EACfC,gBAAgB,EAChBC,iBAAiB,EACjBC,iBAAiB,EACjBC,YAAYC,cAAc,EAC1BC,iBAAiB,KAAK,EACvB,GAAGd;IAEJ,MAAMe,QAAQjB,SAASgB;IACvB,IAAIE;IACJ,IAAIJ;IACJ,IAAI,OAAOC,mBAAmB,aAAa;QACzCD,aAAaC;IACf,OAAO;QACL,CAACG,SAASJ,WAAW,GAAGG;IAC1B;IAEA,MAAME,oBAAoBpB;IAC1B,MAAMqB,yBAAyBvB,YAAY;QACzCwB,OAAOC,YAAY,CAACH,kBAAkBI,OAAO;IAC/C,GAAG,EAAE;IAEL,2EAA2E;IAC3E,0EAA0E;IAC1E,yEAAyE;IACzE,WAAW;IACXzB,UAAU;QACR,IAAIK,UAAU;YACZ;QACF;QAEA,MAAMqB,UAAU;YACdH,OAAOC,YAAY,CAACH,kBAAkBI,OAAO;YAE7C,0EAA0E;YAC1E,oEAAoE;YACpE,kCAAkC;YAClCZ;QACF;QAEAc,SAASC,gBAAgB,CAAC,cAAcF;QACxC,OAAO;YACLC,SAASE,mBAAmB,CAAC,cAAcH;QAC7C;IACF,GAAG;QAACb;QAAkBR;KAAS;IAE/BL,UAAU;QACR,OAAO;YACLuB,OAAOC,YAAY,CAACH,kBAAkBI,OAAO;QAC/C;IACF,GAAG,EAAE;IAEL,OAAO;QACLL;QACAJ,YAAYA,eAAeC,iBAAiBa,YAAYd;QACxDe,eAAehC,YACb,CAACiC;YACC,MAAM1B,eAAeC,aAAaC,gBAAgBiB,OAAO;YACzD,IAAIpB,YAAY,OAAOC,iBAAiB,aAAa;gBACnD;YACF;YAEA,IAAI2B;YACJ,IAAI,OAAOD,cAAc,YAAY,OAAOA,cAAc,aAAa;gBACrEC,KAAKD,aAAa;YACpB,OAAO;gBACLC,KAAKD,UAAUE,aAAa,CAACD,EAAE;YACjC;YAEAlB;YACAO;YACAD,kBAAkBI,OAAO,GAAGF,OAAOY,UAAU,CAAC;gBAC5CvB,gBAAgBqB;gBAChBjB,WAAW;YACb,GAAGV;QACL,GACA;YACES;YACAO;YACAjB;YACAO;YACAL;YACAC;YACAQ;SACD;QAEHoB,eAAerC,YAAY;YACzB,IAAIM,UAAU;gBACZ;YACF;YAEAS;YACAQ;YACAD,kBAAkBI,OAAO,GAAGF,OAAOY,UAAU,CAAC;gBAC5CnB,WAAW;YACb,GAAGN,aAAaC,gBAAgBc,OAAO;QACzC,GAAG;YACDH;YACAjB;YACAK;YACAC;YACAK;YACAF;SACD;QACDQ;IACF;AACF"}