@react-md/core 6.5.2 → 7.0.0

package/dist/form/useTextField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/useTextField.ts"],"sourcesContent":["\"use client\";\n\nimport {\n  type HTMLAttributes,\n  type ReactNode,\n  type Ref,\n  type RefCallback,\n  type RefObject,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { getIcon } from \"../icon/config.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 { useFormReset } from \"./useFormReset.js\";\nimport {\n  type ErrorMessageOptions,\n  type GetErrorIcon,\n  type GetErrorMessage,\n  type IsErrored,\n  type TextFieldValidationOptions,\n  type TextFieldValidationType,\n  defaultGetErrorIcon,\n  defaultGetErrorMessage,\n  defaultIsErrored,\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 = HTMLInputElement,\n> = Pick<HTMLAttributes<E>, \"onBlur\" | \"onChange\" | \"onInvalid\">;\n\n/** @since 6.0.0 */\nexport interface ErrorChangeHandlerOptions<\n  E extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement,\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 = HTMLInputElement,\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\n    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 = HTMLInputElement,\n>\n  extends\n    TextFieldValidationOptions,\n    Required<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 = HTMLInputElement,\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/**\n * @since 6.3.0\n */\nexport interface TextFieldHookComponentOptions<\n  E extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement,\n> {\n  /**\n   * An optional id to use for the `TextField`, `Password`, or `TextArea` that\n   * is also used to create an id for the inline help/error messages.\n   *\n   * @defaultValue `\"text-field-\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * A unique name to attach to the `TextField`, `TextArea`, or `Password`\n   * component.\n   */\n  name: string;\n\n  /**\n   * @since 6.3.0\n   */\n  form?: 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   * 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   * Set to `true` to prevent the state from automatically resetting with a\n   * form's `reset` event.\n   *\n   * @defaultValue `false`\n   * @since 6.3.0\n   */\n  disableReset?: boolean;\n\n  /**\n   * Set this to `true` to prevent the `errorMessage` from being\n   * rendered inline below the `TextField`.\n   *\n   * @defaultValue `false`\n   * @since 6.0.0 Only disables the `errorMessage` behavior so\n   * that counters and help text can still be rendered easily.\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 2.5.6 */\nexport interface TextFieldHookOptions<\n  E extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement,\n>\n  extends\n    TextFieldValidationOptions,\n    TextFieldHookComponentOptions<E>,\n    TextFieldChangeHandlers<E> {\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 } from \"@react-md/core/form/TextField\";\n   * import { useTextField } from \"@react-md/core/form/useTextField\";\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   * 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/** @since 6.0.0 */\nexport interface TextFieldImplementation<\n  E extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement,\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 = HTMLInputElement,\n> extends TextFieldImplementation<E> {\n  fieldProps: ProvidedTextFieldMessageProps<E>;\n}\n\n/** @since 6.0.0 */\nexport interface ValidatedTextFieldImplementation<\n  E extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement,\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 } from \"@react-md/core/form/TextField\";\n * import { useTextField } from \"@react-md/core/form/useTextField\";\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 *\n * @see {@link https://react-md.dev/components/text-field | TextField Demos}\n * @see {@link https://react-md.dev/hooks/use-text-field | useTextField Demos}\n */\nexport function useTextField<\n  E extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement,\n>(\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 } from \"@react-md/core/form/TextField\";\n * import { useTextField } from \"@react-md/core/form/useTextField\";\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 } from \"@react-md/core/form/TextField\";\n * import { useTextField } from \"@react-md/core/form/useTextField\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps } = useTextField({\n *     name: \"example\",\n *     counter: true,\n *     required: true,\n *     maxLength: 20,\n *     // this allows the user to type beyond the max length limit and display\n *     // an error message. omit or set to `false` to enforce the max length instead\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 } from \"@react-md/core/form/TextField\";\n * import { useTextField } from \"@react-md/core/form/useTextField\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps } = useTextField({\n *     name: \"example\",\n *     required: true,\n *     pattern: \"^[A-Za-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 } from \"@react-md/core/form/TextField\";\n * import { useTextField } from \"@react-md/core/form/useTextField\";\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 {@link https://react-md.dev/components/text-field | TextField Demos}\n * @see {@link https://react-md.dev/hooks/use-text-field | useTextField Demos}\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. Also\n * added the ability to display an inline counter and help text while disabling\n * the error messaging.\n */\nexport function useTextField<\n  E extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement,\n>(options: TextFieldHookOptions<E>): TextFieldWithMessageImplementation<E>;\n/**\n * @see {@link https://react-md.dev/components/text-field | TextField Demos}\n * @see {@link https://react-md.dev/hooks/use-text-field | useTextField Demos}\n * @since 6.0.0\n */\nexport function useTextField<\n  E extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement,\n>(options: TextFieldHookOptions<E>): ValidatedTextFieldImplementation<E> {\n  const {\n    id: propId,\n    ref: propRef,\n    name,\n    form,\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    disableReset,\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\n      checkValidity(true);\n    },\n    onChange(event) {\n      onChange(event);\n      if (event.isPropagationStopped()) {\n        return;\n      }\n\n      if (validationType === \"blur\") {\n        const { value } = event.currentTarget;\n        setState((prevState) => ({\n          ...prevState,\n          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  const isCounter = counter && typeof maxLength === \"number\";\n  if (isCounter || helpText || !disableMessage) {\n    fieldProps[\"aria-describedby\"] = messageId;\n    fieldProps.messageProps = {\n      id: messageId,\n      error,\n      length: counter ? value.length : undefined,\n      maxLength: (counter && maxLength) || undefined,\n      children: (!disableMessage && errorMessage) || helpText,\n    };\n  }\n\n  useFormReset({\n    form,\n    onReset: disableReset ? undefined : reset,\n    elementRef: fieldRef,\n  });\n\n  return {\n    ...state,\n    reset,\n    setState,\n    fieldRef,\n    fieldProps,\n  };\n}\n"],"names":["useCallback","useRef","useState","getIcon","useEnsuredId","useEnsuredRef","useFormReset","defaultGetErrorIcon","defaultGetErrorMessage","defaultIsErrored","noop","useTextField","options","id","propId","ref","propRef","name","form","defaultValue","isNumber","required","pattern","minLength","maxLength","onBlur","onChange","onInvalid","counter","helpText","disableReset","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","isCounter","messageProps","length","children","onReset","elementRef"],"mappings":"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"}
+{"version":3,"sources":["../../src/form/useTextField.ts"],"sourcesContent":["\"use client\";\n\nimport {\n  type HTMLAttributes,\n  type ReactNode,\n  type Ref,\n  type RefCallback,\n  type RefObject,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { getIcon } from \"../icon/config.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 ConfigurableFormMessageProps,\n  type FormMessageInputLengthCounterProps,\n} from \"./types.js\";\nimport { useFormReset } from \"./useFormReset.js\";\nimport {\n  type ErrorMessageOptions,\n  type GetErrorIcon,\n  type GetErrorMessage,\n  type IsErrored,\n  type TextFieldValidationOptions,\n  type TextFieldValidationType,\n  defaultGetErrorIcon,\n  defaultGetErrorMessage,\n  defaultIsErrored,\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 = HTMLInputElement,\n> = Pick<HTMLAttributes<E>, \"onBlur\" | \"onChange\" | \"onInvalid\">;\n\n/** @since 6.0.0 */\nexport interface ErrorChangeHandlerOptions<\n  E extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement,\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 | null>;\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 = HTMLInputElement,\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\n    Pick<ConfigurableFormMessageProps, \"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 = HTMLInputElement,\n>\n  extends\n    TextFieldValidationOptions,\n    Required<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 = HTMLInputElement,\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/**\n * @since 6.3.0\n */\nexport interface TextFieldHookComponentOptions<\n  E extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement,\n> {\n  /**\n   * An optional id to use for the `TextField`, `Password`, or `TextArea` that\n   * is also used to create an id for the inline help/error messages.\n   *\n   * @defaultValue `\"text-field-\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * A unique name to attach to the `TextField`, `TextArea`, or `Password`\n   * component.\n   */\n  name: string;\n\n  /**\n   * @since 6.3.0\n   */\n  form?: 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   * 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   * Set to `true` to prevent the state from automatically resetting with a\n   * form's `reset` event.\n   *\n   * @defaultValue `false`\n   * @since 6.3.0\n   */\n  disableReset?: boolean;\n\n  /**\n   * Set this to `true` to prevent the `errorMessage` from being\n   * rendered inline below the `TextField`.\n   *\n   * @defaultValue `false`\n   * @since 6.0.0 Only disables the `errorMessage` behavior so\n   * that counters and help text can still be rendered easily.\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 2.5.6 */\nexport interface TextFieldHookOptions<\n  E extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement,\n>\n  extends\n    TextFieldValidationOptions,\n    TextFieldHookComponentOptions<E>,\n    TextFieldChangeHandlers<E> {\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 } from \"@react-md/core/form/TextField\";\n   * import { useTextField } from \"@react-md/core/form/useTextField\";\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   * 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/** @since 6.0.0 */\nexport interface TextFieldImplementation<\n  E extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement,\n> extends TextFieldHookState {\n  fieldRef: RefObject<E | null>;\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 = HTMLInputElement,\n> extends TextFieldImplementation<E> {\n  fieldProps: ProvidedTextFieldMessageProps<E>;\n}\n\n/** @since 6.0.0 */\nexport interface ValidatedTextFieldImplementation<\n  E extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement,\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 } from \"@react-md/core/form/TextField\";\n * import { useTextField } from \"@react-md/core/form/useTextField\";\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 *\n * @see {@link https://react-md.dev/components/text-field | TextField Demos}\n * @see {@link https://react-md.dev/hooks/use-text-field | useTextField Demos}\n */\nexport function useTextField<\n  E extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement,\n>(\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 } from \"@react-md/core/form/TextField\";\n * import { useTextField } from \"@react-md/core/form/useTextField\";\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 } from \"@react-md/core/form/TextField\";\n * import { useTextField } from \"@react-md/core/form/useTextField\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps } = useTextField({\n *     name: \"example\",\n *     counter: true,\n *     required: true,\n *     maxLength: 20,\n *     // this allows the user to type beyond the max length limit and display\n *     // an error message. omit or set to `false` to enforce the max length instead\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 } from \"@react-md/core/form/TextField\";\n * import { useTextField } from \"@react-md/core/form/useTextField\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps } = useTextField({\n *     name: \"example\",\n *     required: true,\n *     pattern: \"^[A-Za-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 } from \"@react-md/core/form/TextField\";\n * import { useTextField } from \"@react-md/core/form/useTextField\";\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 {@link https://react-md.dev/components/text-field | TextField Demos}\n * @see {@link https://react-md.dev/hooks/use-text-field | useTextField Demos}\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. Also\n * added the ability to display an inline counter and help text while disabling\n * the error messaging.\n */\nexport function useTextField<\n  E extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement,\n>(options: TextFieldHookOptions<E>): TextFieldWithMessageImplementation<E>;\n/**\n * @see {@link https://react-md.dev/components/text-field | TextField Demos}\n * @see {@link https://react-md.dev/hooks/use-text-field | useTextField Demos}\n * @since 6.0.0\n */\nexport function useTextField<\n  E extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement,\n>(options: TextFieldHookOptions<E>): ValidatedTextFieldImplementation<E> {\n  const {\n    id: propId,\n    ref: propRef,\n    name,\n    form,\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    disableReset,\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\n      checkValidity(true);\n    },\n    onChange(event) {\n      onChange(event);\n      if (event.isPropagationStopped()) {\n        return;\n      }\n\n      if (validationType === \"blur\") {\n        const { value } = event.currentTarget;\n        setState((prevState) => ({\n          ...prevState,\n          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  const isCounter = counter && typeof maxLength === \"number\";\n  if (isCounter || helpText || !disableMessage) {\n    fieldProps[\"aria-describedby\"] = messageId;\n    fieldProps.messageProps = {\n      id: messageId,\n      error,\n      length: counter ? value.length : undefined,\n      maxLength: (counter && maxLength) || undefined,\n      children: (!disableMessage && errorMessage) || helpText,\n    };\n  }\n\n  useFormReset({\n    form,\n    onReset: disableReset ? undefined : reset,\n    elementRef: fieldRef,\n  });\n\n  return {\n    ...state,\n    reset,\n    setState,\n    fieldRef,\n    fieldProps,\n  };\n}\n"],"names":["useCallback","useRef","useState","getIcon","useEnsuredId","useEnsuredRef","useFormReset","defaultGetErrorIcon","defaultGetErrorMessage","defaultIsErrored","noop","useTextField","options","id","propId","ref","propRef","name","form","defaultValue","isNumber","required","pattern","minLength","maxLength","onBlur","onChange","onInvalid","counter","helpText","disableReset","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","isCounter","messageProps","length","children","onReset","elementRef"],"mappings":"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"}

package/dist/hoverMode/useHoverMode.js

@@ -10,7 +10,7 @@ export function useHoverMode(options) {
     } else {
         [visible, setVisible] = state;
     }
-    const visibilityTimeout = useRef();
+    const visibilityTimeout = useRef(undefined);
     const clearVisibilityTimeout = useCallback(()=>{
         globalThis.clearTimeout(visibilityTimeout.current);
     }, []);

package/dist/hoverMode/useHoverMode.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hoverMode/useHoverMode.ts"],"sourcesContent":["\"use client\";\n\nimport {\n  type MouseEvent,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { type UseStateInitializer, type UseStateSetter } from \"../types.js\";\nimport {\n  type SimpleHoverModeContext,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  type useHoverModeProvider,\n} 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 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 extends HoverModeConfigurationOptions {\n  defaultVisible?: UseStateInitializer<boolean>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface UncontrolledHoverModeImplementation extends ControlledHoverModeImplementation {\n  visible: boolean;\n  setVisible: UseStateSetter<boolean>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface HoverModeImplementation extends ControlledHoverModeImplementation {\n  visible?: boolean;\n  setVisible?: UseStateSetter<boolean>;\n}\n\n/**\n * The `useHoverMode` hook is used to implement an immediate hover state after\n * hovering related elements for a short duration. The main use-case is for\n * showing tooltips immediately after hovering another tooltipped element.\n *\n * This relies on creating a context provider using {@link useHoverModeProvider}\n * to link related elements together.\n *\n * @example Example Usage\n * ```ts\n * import { type MouseEvent } from \"react\";\n *\n * import {\n *   type CustomHoverContext,\n *   useCustomHoverContext,\n * } from \"./useCustomHoverContext.jsx\";\n *\n * interface CustomHoverModeImplementation {\n *   onMouseEnter: <E extends HTMLElement>(event: MouseEvent<E>) => void;\n *   onMouseLeave: <E extends HTMLElement>(event: MouseEvent<E>) => void;\n * }\n *\n * function useCustomHoverMode(): CustomHoverModeImplementation {\n *   const {\n *     animatedOnceRef,\n *     hoverTimeoutRef,\n *     leaveTimeoutRef,\n *     enableHoverMode,\n *     disableHoverMode,\n *     startDisableTimer,\n *     clearDisableTimer,\n *   } = useCustomHoverContext();\n *   const {\n *     visible,\n *     setVisible,\n *     startShowFlow,\n *     startHideFlow,\n *     clearVisibilityTimeout,\n *   } = useHoverMode({\n *     hoverTimeout,\n *     hoverTimeoutRef,\n *     leaveTimeout,\n *     leaveTimeoutRef,\n *     enableHoverMode,\n *     disableHoverMode,\n *     startDisableTimer,\n *     clearDisableTimer,\n *   });\n *\n *   return {\n *     onMouseEnter(event) {\n *       startShowFlow(event.currentTarget.id);\n *     },\n *     onMouseLeave(event) {\n *       startHideFlow();\n *     },\n *   };\n * }\n * ```\n *\n * @see The `useTooltip` source code for a real world example.\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 (propSetVisible !== undefined) {\n    setVisible = propSetVisible;\n  } else {\n    [visible, setVisible] = state;\n  }\n\n  const visibilityTimeout = useRef<NodeJS.Timeout>();\n  const clearVisibilityTimeout = useCallback(() => {\n    globalThis.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      globalThis.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      globalThis.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 || hoverTimeout === undefined) {\n          return;\n        }\n\n        let id: string;\n        if (typeof eventOrId === \"string\" || eventOrId === undefined) {\n          id = eventOrId || \"\";\n        } else {\n          id = eventOrId.currentTarget.id;\n        }\n\n        clearDisableTimer();\n        clearVisibilityTimeout();\n        visibilityTimeout.current = globalThis.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 = globalThis.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","undefined","visibilityTimeout","clearVisibilityTimeout","globalThis","clearTimeout","current","handler","document","addEventListener","removeEventListener","startShowFlow","eventOrId","id","currentTarget","setTimeout","startHideFlow"],"mappings":"AAAA;AAEA,SAEEA,WAAW,EACXC,SAAS,EACTC,MAAM,EACNC,QAAQ,QACH,QAAQ;AA4If,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,IAAIC,mBAAmBI,WAAW;QAChCL,aAAaC;IACf,OAAO;QACL,CAACG,SAASJ,WAAW,GAAGG;IAC1B;IAEA,MAAMG,oBAAoBrB;IAC1B,MAAMsB,yBAAyBxB,YAAY;QACzCyB,WAAWC,YAAY,CAACH,kBAAkBI,OAAO;IACnD,GAAG,EAAE;IAEL,2EAA2E;IAC3E,0EAA0E;IAC1E,yEAAyE;IACzE,WAAW;IACX1B,UAAU;QACR,IAAIK,UAAU;YACZ;QACF;QAEA,MAAMsB,UAAU;YACdH,WAAWC,YAAY,CAACH,kBAAkBI,OAAO;YAEjD,0EAA0E;YAC1E,oEAAoE;YACpE,kCAAkC;YAClCb;QACF;QAEAe,SAASC,gBAAgB,CAAC,cAAcF;QACxC,OAAO;YACLC,SAASE,mBAAmB,CAAC,cAAcH;QAC7C;IACF,GAAG;QAACd;QAAkBR;KAAS;IAE/BL,UAAU;QACR,OAAO;YACLwB,WAAWC,YAAY,CAACH,kBAAkBI,OAAO;QACnD;IACF,GAAG,EAAE;IAEL,OAAO;QACLN;QACAJ,YAAYA,eAAeC,iBAAiBI,YAAYL;QACxDe,eAAehC,YACb,CAACiC;YACC,MAAM1B,eAAeC,aAAaC,gBAAgBkB,OAAO;YACzD,IAAIrB,YAAYC,iBAAiBe,WAAW;gBAC1C;YACF;YAEA,IAAIY;YACJ,IAAI,OAAOD,cAAc,YAAYA,cAAcX,WAAW;gBAC5DY,KAAKD,aAAa;YACpB,OAAO;gBACLC,KAAKD,UAAUE,aAAa,CAACD,EAAE;YACjC;YAEAlB;YACAQ;YACAD,kBAAkBI,OAAO,GAAGF,WAAWW,UAAU,CAAC;gBAChDvB,gBAAgBqB;gBAChBjB,WAAW;YACb,GAAGV;QACL,GACA;YACES;YACAQ;YACAlB;YACAO;YACAL;YACAC;YACAQ;SACD;QAEHoB,eAAerC,YAAY;YACzB,IAAIM,UAAU;gBACZ;YACF;YAEAS;YACAS;YACAD,kBAAkBI,OAAO,GAAGF,WAAWW,UAAU,CAAC;gBAChDnB,WAAW;YACb,GAAGN,aAAaC,gBAAgBe,OAAO;QACzC,GAAG;YACDH;YACAlB;YACAK;YACAC;YACAK;YACAF;SACD;QACDS;IACF;AACF"}
+{"version":3,"sources":["../../src/hoverMode/useHoverMode.ts"],"sourcesContent":["\"use client\";\n\nimport {\n  type MouseEvent,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { type UseStateInitializer, type UseStateSetter } from \"../types.js\";\nimport {\n  type SimpleHoverModeContext,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  type useHoverModeProvider,\n} 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 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 extends HoverModeConfigurationOptions {\n  defaultVisible?: UseStateInitializer<boolean>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface UncontrolledHoverModeImplementation extends ControlledHoverModeImplementation {\n  visible: boolean;\n  setVisible: UseStateSetter<boolean>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface HoverModeImplementation extends ControlledHoverModeImplementation {\n  visible?: boolean;\n  setVisible?: UseStateSetter<boolean>;\n}\n\n/**\n * The `useHoverMode` hook is used to implement an immediate hover state after\n * hovering related elements for a short duration. The main use-case is for\n * showing tooltips immediately after hovering another tooltipped element.\n *\n * This relies on creating a context provider using {@link useHoverModeProvider}\n * to link related elements together.\n *\n * @example Example Usage\n * ```ts\n * import { type MouseEvent } from \"react\";\n *\n * import {\n *   type CustomHoverContext,\n *   useCustomHoverContext,\n * } from \"./useCustomHoverContext.jsx\";\n *\n * interface CustomHoverModeImplementation {\n *   onMouseEnter: <E extends HTMLElement>(event: MouseEvent<E>) => void;\n *   onMouseLeave: <E extends HTMLElement>(event: MouseEvent<E>) => void;\n * }\n *\n * function useCustomHoverMode(): CustomHoverModeImplementation {\n *   const {\n *     animatedOnceRef,\n *     hoverTimeoutRef,\n *     leaveTimeoutRef,\n *     enableHoverMode,\n *     disableHoverMode,\n *     startDisableTimer,\n *     clearDisableTimer,\n *   } = useCustomHoverContext();\n *   const {\n *     visible,\n *     setVisible,\n *     startShowFlow,\n *     startHideFlow,\n *     clearVisibilityTimeout,\n *   } = useHoverMode({\n *     hoverTimeout,\n *     hoverTimeoutRef,\n *     leaveTimeout,\n *     leaveTimeoutRef,\n *     enableHoverMode,\n *     disableHoverMode,\n *     startDisableTimer,\n *     clearDisableTimer,\n *   });\n *\n *   return {\n *     onMouseEnter(event) {\n *       startShowFlow(event.currentTarget.id);\n *     },\n *     onMouseLeave(event) {\n *       startHideFlow();\n *     },\n *   };\n * }\n * ```\n *\n * @see The `useTooltip` source code for a real world example.\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 (propSetVisible !== undefined) {\n    setVisible = propSetVisible;\n  } else {\n    [visible, setVisible] = state;\n  }\n\n  const visibilityTimeout = useRef<NodeJS.Timeout>(undefined);\n  const clearVisibilityTimeout = useCallback(() => {\n    globalThis.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      globalThis.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      globalThis.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 || hoverTimeout === undefined) {\n          return;\n        }\n\n        let id: string;\n        if (typeof eventOrId === \"string\" || eventOrId === undefined) {\n          id = eventOrId || \"\";\n        } else {\n          id = eventOrId.currentTarget.id;\n        }\n\n        clearDisableTimer();\n        clearVisibilityTimeout();\n        visibilityTimeout.current = globalThis.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 = globalThis.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","undefined","visibilityTimeout","clearVisibilityTimeout","globalThis","clearTimeout","current","handler","document","addEventListener","removeEventListener","startShowFlow","eventOrId","id","currentTarget","setTimeout","startHideFlow"],"mappings":"AAAA;AAEA,SAEEA,WAAW,EACXC,SAAS,EACTC,MAAM,EACNC,QAAQ,QACH,QAAQ;AA4If,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,IAAIC,mBAAmBI,WAAW;QAChCL,aAAaC;IACf,OAAO;QACL,CAACG,SAASJ,WAAW,GAAGG;IAC1B;IAEA,MAAMG,oBAAoBrB,OAAuBoB;IACjD,MAAME,yBAAyBxB,YAAY;QACzCyB,WAAWC,YAAY,CAACH,kBAAkBI,OAAO;IACnD,GAAG,EAAE;IAEL,2EAA2E;IAC3E,0EAA0E;IAC1E,yEAAyE;IACzE,WAAW;IACX1B,UAAU;QACR,IAAIK,UAAU;YACZ;QACF;QAEA,MAAMsB,UAAU;YACdH,WAAWC,YAAY,CAACH,kBAAkBI,OAAO;YAEjD,0EAA0E;YAC1E,oEAAoE;YACpE,kCAAkC;YAClCb;QACF;QAEAe,SAASC,gBAAgB,CAAC,cAAcF;QACxC,OAAO;YACLC,SAASE,mBAAmB,CAAC,cAAcH;QAC7C;IACF,GAAG;QAACd;QAAkBR;KAAS;IAE/BL,UAAU;QACR,OAAO;YACLwB,WAAWC,YAAY,CAACH,kBAAkBI,OAAO;QACnD;IACF,GAAG,EAAE;IAEL,OAAO;QACLN;QACAJ,YAAYA,eAAeC,iBAAiBI,YAAYL;QACxDe,eAAehC,YACb,CAACiC;YACC,MAAM1B,eAAeC,aAAaC,gBAAgBkB,OAAO;YACzD,IAAIrB,YAAYC,iBAAiBe,WAAW;gBAC1C;YACF;YAEA,IAAIY;YACJ,IAAI,OAAOD,cAAc,YAAYA,cAAcX,WAAW;gBAC5DY,KAAKD,aAAa;YACpB,OAAO;gBACLC,KAAKD,UAAUE,aAAa,CAACD,EAAE;YACjC;YAEAlB;YACAQ;YACAD,kBAAkBI,OAAO,GAAGF,WAAWW,UAAU,CAAC;gBAChDvB,gBAAgBqB;gBAChBjB,WAAW;YACb,GAAGV;QACL,GACA;YACES;YACAQ;YACAlB;YACAO;YACAL;YACAC;YACAQ;SACD;QAEHoB,eAAerC,YAAY;YACzB,IAAIM,UAAU;gBACZ;YACF;YAEAS;YACAS;YACAD,kBAAkBI,OAAO,GAAGF,WAAWW,UAAU,CAAC;gBAChDnB,WAAW;YACb,GAAGN,aAAaC,gBAAgBe,OAAO;QACzC,GAAG;YACDH;YACAlB;YACAK;YACAC;YACAK;YACAF;SACD;QACDS;IACF;AACF"}

package/dist/hoverMode/useHoverModeProvider.d.ts

@@ -1,4 +1,4 @@
-import { type NonNullMutableRef, type NonNullRef } from "../types.js";
+import { type RefObject } from "react";
 /** @since 6.0.0 */
 export interface SimpleHoverModeContext {
     /**
@@ -20,7 +20,7 @@ export interface SimpleHoverModeContext {
      * }
      * ```
      */
-    hoverTimeoutRef: NonNullRef<number | undefined>;
+    hoverTimeoutRef: RefObject<number | undefined>;
     /**
      * @example Main Usage
      * ```ts
@@ -37,7 +37,7 @@ export interface SimpleHoverModeContext {
      * }
      * ```
      */
-    leaveTimeoutRef: NonNullRef<number>;
+    leaveTimeoutRef: RefObject<number>;
     /**
      * When this is called, the {@link hoverTimeoutRef} will be set to `0` and the
      * {@link HoverModeContext.activeId} will be set to this `activeId` value.
@@ -75,7 +75,7 @@ export interface HoverModeContext extends SimpleHoverModeContext {
      * hovered within the `HoverModeProvider`. This will be an empty string
      * when the hover mode is not active.
      */
-    activeIdRef: NonNullMutableRef<string>;
+    activeIdRef: RefObject<string>;
     /**
      * This ref can be used to disable transitions for a group of components using
      * the same hover mode provider. The general flow would be:
@@ -86,7 +86,7 @@ export interface HoverModeContext extends SimpleHoverModeContext {
      *   disabled. This would normally be after a timeout for the `onExited`
      *   callback
      */
-    animatedOnceRef: NonNullMutableRef<boolean>;
+    animatedOnceRef: RefObject<boolean>;
 }
 /**
  * @since 6.0.0

package/dist/hoverMode/useHoverModeProvider.js

@@ -94,7 +94,7 @@ const noop = ()=>{
     const hoverTimeoutRef = useRef(hoverTimeout);
     const leaveTimeoutRef = useRef(leaveTimeout);
     const animatedOnceRef = useRef(!!defaultActiveId);
-    const disableHoverModeTimeout = useRef();
+    const disableHoverModeTimeout = useRef(undefined);
     const clearDisableTimer = useCallback(()=>{
         globalThis.clearTimeout(disableHoverModeTimeout.current);
     }, []);

package/dist/hoverMode/useHoverModeProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hoverMode/useHoverModeProvider.ts"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { type NonNullMutableRef, type NonNullRef } from \"../types.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/** @since 6.0.0 */\nexport interface SimpleHoverModeContext {\n  /**\n   * @example Main Usage\n   * ```ts\n   * onMouseEnter(event) {\n   *   const hoverTimeout = hoverTimeoutRef.current;\n   *   if (typeof hoverTimeout !== \"number\" || mode === \"touch\") {\n   *     return;\n   *   }\n   *\n   *   const { id } = event.currentTarget;\n   *   clearDisableTimer();\n   *   window.clearTimeout(visibilityTimeout.current);\n   *   visibilityTimeout.current = window.setTimeout(() => {\n   *     enableHoverMode(id);\n   *     setVisible(true);\n   *   }, hoverTimeout);\n   * }\n   * ```\n   */\n  hoverTimeoutRef: NonNullRef<number | undefined>;\n\n  /**\n   * @example Main Usage\n   * ```ts\n   * onMouseLeave() {\n   *   if (mode === \"touch\") {\n   *     return\n   *   }\n   *\n   *   startDisableTimer();\n   *   window.clearTimeout(visibilityTimeout.current);\n   *   visibilityTimeout.current = window.setTimeout(() => {\n   *     setVisible(false)\n   *   }, leaveTimeoutRef.current);\n   * }\n   * ```\n   */\n  leaveTimeoutRef: NonNullRef<number>;\n\n  /**\n   * When this is called, the {@link hoverTimeoutRef} will be set to `0` and the\n   * {@link HoverModeContext.activeId} will be set to this `activeId` value.\n   *\n   * @see {@link hoverTimeoutRef} for an example.\n   */\n  enableHoverMode: (activeId: string) => void;\n\n  /**\n   * Disables all hover mode behavior by clearing all timeouts and resetting\n   * internal state.\n   */\n  disableHoverMode: () => void;\n\n  /**\n   * @see {@link leaveTimeoutRef} for an example.\n   */\n  startDisableTimer: () => void;\n\n  /**\n   * @see {@link hoverTimeoutRef} for an example.\n   */\n  clearDisableTimer: () => void;\n}\n\n/**\n * @since 2.8.0\n * @since 6.0.0 Uses refs to increase performance by preventing unneeded\n * re-renders of the entire hover mode provider's component tree. The API also\n * changed to support custom hover mode providers.\n */\nexport interface HoverModeContext extends SimpleHoverModeContext {\n  /**\n   * This will only be updated if {@link HoverModeConfiguration.forceRerender} is `true`\n   */\n  activeId: string;\n\n  /**\n   * This ref contains the current DOM `id` for the element that is being\n   * hovered within the `HoverModeProvider`. This will be an empty string\n   * when the hover mode is not active.\n   */\n  activeIdRef: NonNullMutableRef<string>;\n\n  /**\n   * This ref can be used to disable transitions for a group of components using\n   * the same hover mode provider. The general flow would be:\n   *\n   * - set `disableTransition: animatedOnceRef.current` on hover mode components\n   * - set `animatedOnceRef.current = true` when the `onEntered` transition callback fires\n   * - set `animatedOnceRef.current = false` when the hover mode behavior is\n   *   disabled. This would normally be after a timeout for the `onExited`\n   *   callback\n   */\n  animatedOnceRef: NonNullMutableRef<boolean>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface CreateHoverModeContextOptions {\n  /**\n   * This should only be used if creating nested hover mode behavior where the\n   * hover mode should default to being enabled if a parent element is hovered.\n   * So set this to an element's `id` if a parent element is being hovered when\n   * the component **mounts**.\n   *\n   * The use case for this is the `MenuBar` component since after clicking a\n   * menu button or hovering it long enough to enable the hover mode, all child\n   * menus should also be in the hover mode until the top-most element is\n   * closed.\n   *\n   * @defaultValue `\"\"`\n   */\n  defaultActiveId?: string;\n\n  /**\n   * When this is `undefined`, the hover mode behavior will be disabled.\n   * Otherwise, this will be the amount of time to wait on a `mouseenter` event\n   * before setting the visibility to `true`.\n   *\n   * @defaultValue `undefined`\n   */\n  hoverTimeout?: number;\n\n  /**\n   * The amount of time to wait after a `mouseleave` event before setting the\n   * visibility to `false`.\n   *\n   * @defaultValue `0`\n   * @since 6.0.0 This was renamed from `exitVisibilityDelay` and the\n   * default value changed from `300` to `0`.\n   */\n  leaveTimeout?: number;\n}\n\n/**\n * @since 6.0.0\n */\nexport function createHoverModeContext(\n  options: CreateHoverModeContextOptions = {}\n): Readonly<HoverModeContext> {\n  const { defaultActiveId = \"\", hoverTimeout, leaveTimeout = 0 } = options;\n\n  return {\n    activeId: defaultActiveId,\n    activeIdRef: { current: defaultActiveId },\n    hoverTimeoutRef: { current: hoverTimeout },\n    leaveTimeoutRef: { current: leaveTimeout },\n    animatedOnceRef: { current: false },\n    enableHoverMode: noop,\n    disableHoverMode: noop,\n    startDisableTimer: noop,\n    clearDisableTimer: noop,\n  };\n}\n\n/** @since 6.0.0 */\nexport interface HoverModeConfiguration extends CreateHoverModeContextOptions {\n  /**\n   * The amount of time to wait before disabling the hover mode behavior if none\n   * of the components are being hovered.\n   *\n   * If this is `undefined`, {@link HoverModeContext.startDisableTimer} will do\n   * nothing. You must manually call {@link HoverModeContext.disableHoverMode}\n   * to disable the hover mode instead.\n   */\n  disableTimeout?: number;\n\n  /**\n   * @defaultValue `false`\n   */\n  forceRerender?: boolean;\n}\n\n/**\n * @example Creating a Hover Mode Group\n * ```tsx\n * import {\n *   type HoverModeContext,\n *   createHoverModeContext,\n *   useHoverModeProvider,\n * } from \"@react-md/core/hoverMode/useHoverModeProvider\";\n * import {\n *   type ReactElement,\n *   type ReactNode,\n *   createContext,\n *   useContext,\n * } from \"react\";\n *\n * export interface CustomHoverContext extends HoverModeContext {\n *   // any additional fields in the context\n * }\n *\n * const context = createContext<CustomHoverContext>(\n *   createHoverModeContext()\n *   // you can also provide default values if needed when the context provider\n *   // isn't a parent component. the following are the defaults\n *   // createHoverModeContext({\n *   //    hoverTimeout: undefined,\n *   //    leaveTimeout: 0,\n *   //    defaultActiveId: \"\",\n *   // })\n * );\n * const { Provider } = context;\n *\n * interface Props extends HoverModeConfiguration {\n *   children: ReactNode;\n * }\n *\n * export function CustomHoverModeProvider({\n *   children,\n *   // change to whatever defaults you want\n *   hoverTimeout = 3000,\n *   leaveTimeout = 3000,\n *   defaultActiveId = \"\",\n *   disableTimeout = 5000,\n * }: Props): ReactElement {\n *   const context = useHoverModeProvider({\n *     hoverTimeout,\n *     leaveTimeout,\n *     defaultActiveId,\n *     disableTimeout,\n *   });\n *\n *   return <Provider value={context}>{children}</Provider>;\n * }\n * ```\n *\n * @see {@link CreateHoverModeContextOptions}\n * @see {@link useHoverMode}\n * @since 6.0.0 The `HoverModeProvider` component was replaced by this\n * hook implementation. After developing the `MenuBar`, I realized the hover\n * mode should normally be grouped by related components or types instead of a\n * top-level catch all.\n */\nexport function useHoverModeProvider(\n  options: HoverModeConfiguration\n): Readonly<HoverModeContext> {\n  const {\n    hoverTimeout,\n    leaveTimeout = 0,\n    forceRerender = false,\n    defaultActiveId = \"\",\n    disableTimeout,\n  } = options;\n\n  const [activeId, setActiveId] = useState(defaultActiveId);\n  const activeIdRef = useRef(defaultActiveId);\n  const hoverTimeoutRef = useRef(hoverTimeout);\n  const leaveTimeoutRef = useRef(leaveTimeout);\n  const animatedOnceRef = useRef(!!defaultActiveId);\n  const disableHoverModeTimeout = useRef<NodeJS.Timeout>();\n  const clearDisableTimer = useCallback(() => {\n    globalThis.clearTimeout(disableHoverModeTimeout.current);\n  }, []);\n  const enableHoverMode = useCallback(\n    (activeId: string) => {\n      clearDisableTimer();\n      activeIdRef.current = activeId;\n      hoverTimeoutRef.current = 0;\n\n      if (forceRerender) {\n        setActiveId(activeId);\n      }\n    },\n    [clearDisableTimer, forceRerender]\n  );\n  const disableHoverMode = useCallback(() => {\n    clearDisableTimer();\n    activeIdRef.current = \"\";\n    hoverTimeoutRef.current = hoverTimeout;\n    animatedOnceRef.current = false;\n    if (forceRerender) {\n      setActiveId(\"\");\n    }\n  }, [clearDisableTimer, forceRerender, hoverTimeout]);\n  const startDisableTimer = useCallback(() => {\n    if (typeof disableTimeout !== \"number\") {\n      return;\n    }\n\n    clearDisableTimer();\n    disableHoverModeTimeout.current = globalThis.setTimeout(() => {\n      disableHoverMode();\n    }, disableTimeout);\n  }, [clearDisableTimer, disableHoverMode, disableTimeout]);\n\n  useEffect(() => {\n    hoverTimeoutRef.current = hoverTimeout;\n    return () => {\n      globalThis.clearTimeout(disableHoverModeTimeout.current);\n    };\n  }, [hoverTimeout]);\n\n  return useMemo<HoverModeContext>(\n    () => ({\n      activeId,\n      activeIdRef,\n      hoverTimeoutRef,\n      leaveTimeoutRef,\n      animatedOnceRef,\n      enableHoverMode,\n      disableHoverMode,\n      startDisableTimer,\n      clearDisableTimer,\n    }),\n    [\n      activeId,\n      enableHoverMode,\n      disableHoverMode,\n      startDisableTimer,\n      clearDisableTimer,\n    ]\n  );\n}\n"],"names":["useCallback","useEffect","useMemo","useRef","useState","noop","createHoverModeContext","options","defaultActiveId","hoverTimeout","leaveTimeout","activeId","activeIdRef","current","hoverTimeoutRef","leaveTimeoutRef","animatedOnceRef","enableHoverMode","disableHoverMode","startDisableTimer","clearDisableTimer","useHoverModeProvider","forceRerender","disableTimeout","setActiveId","disableHoverModeTimeout","globalThis","clearTimeout","setTimeout"],"mappings":"AAAA;AAEA,SAASA,WAAW,EAAEC,SAAS,EAAEC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAI1E,MAAMC,OAAO;AACX,aAAa;AACf;AA2IA;;CAEC,GACD,OAAO,SAASC,uBACdC,UAAyC,CAAC,CAAC;IAE3C,MAAM,EAAEC,kBAAkB,EAAE,EAAEC,YAAY,EAAEC,eAAe,CAAC,EAAE,GAAGH;IAEjE,OAAO;QACLI,UAAUH;QACVI,aAAa;YAAEC,SAASL;QAAgB;QACxCM,iBAAiB;YAAED,SAASJ;QAAa;QACzCM,iBAAiB;YAAEF,SAASH;QAAa;QACzCM,iBAAiB;YAAEH,SAAS;QAAM;QAClCI,iBAAiBZ;QACjBa,kBAAkBb;QAClBc,mBAAmBd;QACnBe,mBAAmBf;IACrB;AACF;AAoBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4DC,GACD,OAAO,SAASgB,qBACdd,OAA+B;IAE/B,MAAM,EACJE,YAAY,EACZC,eAAe,CAAC,EAChBY,gBAAgB,KAAK,EACrBd,kBAAkB,EAAE,EACpBe,cAAc,EACf,GAAGhB;IAEJ,MAAM,CAACI,UAAUa,YAAY,GAAGpB,SAASI;IACzC,MAAMI,cAAcT,OAAOK;IAC3B,MAAMM,kBAAkBX,OAAOM;IAC/B,MAAMM,kBAAkBZ,OAAOO;IAC/B,MAAMM,kBAAkBb,OAAO,CAAC,CAACK;IACjC,MAAMiB,0BAA0BtB;IAChC,MAAMiB,oBAAoBpB,YAAY;QACpC0B,WAAWC,YAAY,CAACF,wBAAwBZ,OAAO;IACzD,GAAG,EAAE;IACL,MAAMI,kBAAkBjB,YACtB,CAACW;QACCS;QACAR,YAAYC,OAAO,GAAGF;QACtBG,gBAAgBD,OAAO,GAAG;QAE1B,IAAIS,eAAe;YACjBE,YAAYb;QACd;IACF,GACA;QAACS;QAAmBE;KAAc;IAEpC,MAAMJ,mBAAmBlB,YAAY;QACnCoB;QACAR,YAAYC,OAAO,GAAG;QACtBC,gBAAgBD,OAAO,GAAGJ;QAC1BO,gBAAgBH,OAAO,GAAG;QAC1B,IAAIS,eAAe;YACjBE,YAAY;QACd;IACF,GAAG;QAACJ;QAAmBE;QAAeb;KAAa;IACnD,MAAMU,oBAAoBnB,YAAY;QACpC,IAAI,OAAOuB,mBAAmB,UAAU;YACtC;QACF;QAEAH;QACAK,wBAAwBZ,OAAO,GAAGa,WAAWE,UAAU,CAAC;YACtDV;QACF,GAAGK;IACL,GAAG;QAACH;QAAmBF;QAAkBK;KAAe;IAExDtB,UAAU;QACRa,gBAAgBD,OAAO,GAAGJ;QAC1B,OAAO;YACLiB,WAAWC,YAAY,CAACF,wBAAwBZ,OAAO;QACzD;IACF,GAAG;QAACJ;KAAa;IAEjB,OAAOP,QACL,IAAO,CAAA;YACLS;YACAC;YACAE;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;QACF,CAAA,GACA;QACET;QACAM;QACAC;QACAC;QACAC;KACD;AAEL"}
+{"version":3,"sources":["../../src/hoverMode/useHoverModeProvider.ts"],"sourcesContent":["\"use client\";\n\nimport {\n  type RefObject,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/** @since 6.0.0 */\nexport interface SimpleHoverModeContext {\n  /**\n   * @example Main Usage\n   * ```ts\n   * onMouseEnter(event) {\n   *   const hoverTimeout = hoverTimeoutRef.current;\n   *   if (typeof hoverTimeout !== \"number\" || mode === \"touch\") {\n   *     return;\n   *   }\n   *\n   *   const { id } = event.currentTarget;\n   *   clearDisableTimer();\n   *   window.clearTimeout(visibilityTimeout.current);\n   *   visibilityTimeout.current = window.setTimeout(() => {\n   *     enableHoverMode(id);\n   *     setVisible(true);\n   *   }, hoverTimeout);\n   * }\n   * ```\n   */\n  hoverTimeoutRef: RefObject<number | undefined>;\n\n  /**\n   * @example Main Usage\n   * ```ts\n   * onMouseLeave() {\n   *   if (mode === \"touch\") {\n   *     return\n   *   }\n   *\n   *   startDisableTimer();\n   *   window.clearTimeout(visibilityTimeout.current);\n   *   visibilityTimeout.current = window.setTimeout(() => {\n   *     setVisible(false)\n   *   }, leaveTimeoutRef.current);\n   * }\n   * ```\n   */\n  leaveTimeoutRef: RefObject<number>;\n\n  /**\n   * When this is called, the {@link hoverTimeoutRef} will be set to `0` and the\n   * {@link HoverModeContext.activeId} will be set to this `activeId` value.\n   *\n   * @see {@link hoverTimeoutRef} for an example.\n   */\n  enableHoverMode: (activeId: string) => void;\n\n  /**\n   * Disables all hover mode behavior by clearing all timeouts and resetting\n   * internal state.\n   */\n  disableHoverMode: () => void;\n\n  /**\n   * @see {@link leaveTimeoutRef} for an example.\n   */\n  startDisableTimer: () => void;\n\n  /**\n   * @see {@link hoverTimeoutRef} for an example.\n   */\n  clearDisableTimer: () => void;\n}\n\n/**\n * @since 2.8.0\n * @since 6.0.0 Uses refs to increase performance by preventing unneeded\n * re-renders of the entire hover mode provider's component tree. The API also\n * changed to support custom hover mode providers.\n */\nexport interface HoverModeContext extends SimpleHoverModeContext {\n  /**\n   * This will only be updated if {@link HoverModeConfiguration.forceRerender} is `true`\n   */\n  activeId: string;\n\n  /**\n   * This ref contains the current DOM `id` for the element that is being\n   * hovered within the `HoverModeProvider`. This will be an empty string\n   * when the hover mode is not active.\n   */\n  activeIdRef: RefObject<string>;\n\n  /**\n   * This ref can be used to disable transitions for a group of components using\n   * the same hover mode provider. The general flow would be:\n   *\n   * - set `disableTransition: animatedOnceRef.current` on hover mode components\n   * - set `animatedOnceRef.current = true` when the `onEntered` transition callback fires\n   * - set `animatedOnceRef.current = false` when the hover mode behavior is\n   *   disabled. This would normally be after a timeout for the `onExited`\n   *   callback\n   */\n  animatedOnceRef: RefObject<boolean>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface CreateHoverModeContextOptions {\n  /**\n   * This should only be used if creating nested hover mode behavior where the\n   * hover mode should default to being enabled if a parent element is hovered.\n   * So set this to an element's `id` if a parent element is being hovered when\n   * the component **mounts**.\n   *\n   * The use case for this is the `MenuBar` component since after clicking a\n   * menu button or hovering it long enough to enable the hover mode, all child\n   * menus should also be in the hover mode until the top-most element is\n   * closed.\n   *\n   * @defaultValue `\"\"`\n   */\n  defaultActiveId?: string;\n\n  /**\n   * When this is `undefined`, the hover mode behavior will be disabled.\n   * Otherwise, this will be the amount of time to wait on a `mouseenter` event\n   * before setting the visibility to `true`.\n   *\n   * @defaultValue `undefined`\n   */\n  hoverTimeout?: number;\n\n  /**\n   * The amount of time to wait after a `mouseleave` event before setting the\n   * visibility to `false`.\n   *\n   * @defaultValue `0`\n   * @since 6.0.0 This was renamed from `exitVisibilityDelay` and the\n   * default value changed from `300` to `0`.\n   */\n  leaveTimeout?: number;\n}\n\n/**\n * @since 6.0.0\n */\nexport function createHoverModeContext(\n  options: CreateHoverModeContextOptions = {}\n): Readonly<HoverModeContext> {\n  const { defaultActiveId = \"\", hoverTimeout, leaveTimeout = 0 } = options;\n\n  return {\n    activeId: defaultActiveId,\n    activeIdRef: { current: defaultActiveId },\n    hoverTimeoutRef: { current: hoverTimeout },\n    leaveTimeoutRef: { current: leaveTimeout },\n    animatedOnceRef: { current: false },\n    enableHoverMode: noop,\n    disableHoverMode: noop,\n    startDisableTimer: noop,\n    clearDisableTimer: noop,\n  };\n}\n\n/** @since 6.0.0 */\nexport interface HoverModeConfiguration extends CreateHoverModeContextOptions {\n  /**\n   * The amount of time to wait before disabling the hover mode behavior if none\n   * of the components are being hovered.\n   *\n   * If this is `undefined`, {@link HoverModeContext.startDisableTimer} will do\n   * nothing. You must manually call {@link HoverModeContext.disableHoverMode}\n   * to disable the hover mode instead.\n   */\n  disableTimeout?: number;\n\n  /**\n   * @defaultValue `false`\n   */\n  forceRerender?: boolean;\n}\n\n/**\n * @example Creating a Hover Mode Group\n * ```tsx\n * import {\n *   type HoverModeContext,\n *   createHoverModeContext,\n *   useHoverModeProvider,\n * } from \"@react-md/core/hoverMode/useHoverModeProvider\";\n * import {\n *   type ReactElement,\n *   type ReactNode,\n *   createContext,\n *   useContext,\n * } from \"react\";\n *\n * export interface CustomHoverContext extends HoverModeContext {\n *   // any additional fields in the context\n * }\n *\n * const context = createContext<CustomHoverContext>(\n *   createHoverModeContext()\n *   // you can also provide default values if needed when the context provider\n *   // isn't a parent component. the following are the defaults\n *   // createHoverModeContext({\n *   //    hoverTimeout: undefined,\n *   //    leaveTimeout: 0,\n *   //    defaultActiveId: \"\",\n *   // })\n * );\n * const { Provider } = context;\n *\n * interface Props extends HoverModeConfiguration {\n *   children: ReactNode;\n * }\n *\n * export function CustomHoverModeProvider({\n *   children,\n *   // change to whatever defaults you want\n *   hoverTimeout = 3000,\n *   leaveTimeout = 3000,\n *   defaultActiveId = \"\",\n *   disableTimeout = 5000,\n * }: Props): ReactElement {\n *   const context = useHoverModeProvider({\n *     hoverTimeout,\n *     leaveTimeout,\n *     defaultActiveId,\n *     disableTimeout,\n *   });\n *\n *   return <Provider value={context}>{children}</Provider>;\n * }\n * ```\n *\n * @see {@link CreateHoverModeContextOptions}\n * @see {@link useHoverMode}\n * @since 6.0.0 The `HoverModeProvider` component was replaced by this\n * hook implementation. After developing the `MenuBar`, I realized the hover\n * mode should normally be grouped by related components or types instead of a\n * top-level catch all.\n */\nexport function useHoverModeProvider(\n  options: HoverModeConfiguration\n): Readonly<HoverModeContext> {\n  const {\n    hoverTimeout,\n    leaveTimeout = 0,\n    forceRerender = false,\n    defaultActiveId = \"\",\n    disableTimeout,\n  } = options;\n\n  const [activeId, setActiveId] = useState(defaultActiveId);\n  const activeIdRef = useRef(defaultActiveId);\n  const hoverTimeoutRef = useRef(hoverTimeout);\n  const leaveTimeoutRef = useRef(leaveTimeout);\n  const animatedOnceRef = useRef(!!defaultActiveId);\n  const disableHoverModeTimeout = useRef<NodeJS.Timeout>(undefined);\n  const clearDisableTimer = useCallback(() => {\n    globalThis.clearTimeout(disableHoverModeTimeout.current);\n  }, []);\n  const enableHoverMode = useCallback(\n    (activeId: string) => {\n      clearDisableTimer();\n      activeIdRef.current = activeId;\n      hoverTimeoutRef.current = 0;\n\n      if (forceRerender) {\n        setActiveId(activeId);\n      }\n    },\n    [clearDisableTimer, forceRerender]\n  );\n  const disableHoverMode = useCallback(() => {\n    clearDisableTimer();\n    activeIdRef.current = \"\";\n    hoverTimeoutRef.current = hoverTimeout;\n    animatedOnceRef.current = false;\n    if (forceRerender) {\n      setActiveId(\"\");\n    }\n  }, [clearDisableTimer, forceRerender, hoverTimeout]);\n  const startDisableTimer = useCallback(() => {\n    if (typeof disableTimeout !== \"number\") {\n      return;\n    }\n\n    clearDisableTimer();\n    disableHoverModeTimeout.current = globalThis.setTimeout(() => {\n      disableHoverMode();\n    }, disableTimeout);\n  }, [clearDisableTimer, disableHoverMode, disableTimeout]);\n\n  useEffect(() => {\n    hoverTimeoutRef.current = hoverTimeout;\n    return () => {\n      globalThis.clearTimeout(disableHoverModeTimeout.current);\n    };\n  }, [hoverTimeout]);\n\n  return useMemo<HoverModeContext>(\n    () => ({\n      activeId,\n      activeIdRef,\n      hoverTimeoutRef,\n      leaveTimeoutRef,\n      animatedOnceRef,\n      enableHoverMode,\n      disableHoverMode,\n      startDisableTimer,\n      clearDisableTimer,\n    }),\n    [\n      activeId,\n      enableHoverMode,\n      disableHoverMode,\n      startDisableTimer,\n      clearDisableTimer,\n    ]\n  );\n}\n"],"names":["useCallback","useEffect","useMemo","useRef","useState","noop","createHoverModeContext","options","defaultActiveId","hoverTimeout","leaveTimeout","activeId","activeIdRef","current","hoverTimeoutRef","leaveTimeoutRef","animatedOnceRef","enableHoverMode","disableHoverMode","startDisableTimer","clearDisableTimer","useHoverModeProvider","forceRerender","disableTimeout","setActiveId","disableHoverModeTimeout","undefined","globalThis","clearTimeout","setTimeout"],"mappings":"AAAA;AAEA,SAEEA,WAAW,EACXC,SAAS,EACTC,OAAO,EACPC,MAAM,EACNC,QAAQ,QACH,QAAQ;AAEf,MAAMC,OAAO;AACX,aAAa;AACf;AA2IA;;CAEC,GACD,OAAO,SAASC,uBACdC,UAAyC,CAAC,CAAC;IAE3C,MAAM,EAAEC,kBAAkB,EAAE,EAAEC,YAAY,EAAEC,eAAe,CAAC,EAAE,GAAGH;IAEjE,OAAO;QACLI,UAAUH;QACVI,aAAa;YAAEC,SAASL;QAAgB;QACxCM,iBAAiB;YAAED,SAASJ;QAAa;QACzCM,iBAAiB;YAAEF,SAASH;QAAa;QACzCM,iBAAiB;YAAEH,SAAS;QAAM;QAClCI,iBAAiBZ;QACjBa,kBAAkBb;QAClBc,mBAAmBd;QACnBe,mBAAmBf;IACrB;AACF;AAoBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4DC,GACD,OAAO,SAASgB,qBACdd,OAA+B;IAE/B,MAAM,EACJE,YAAY,EACZC,eAAe,CAAC,EAChBY,gBAAgB,KAAK,EACrBd,kBAAkB,EAAE,EACpBe,cAAc,EACf,GAAGhB;IAEJ,MAAM,CAACI,UAAUa,YAAY,GAAGpB,SAASI;IACzC,MAAMI,cAAcT,OAAOK;IAC3B,MAAMM,kBAAkBX,OAAOM;IAC/B,MAAMM,kBAAkBZ,OAAOO;IAC/B,MAAMM,kBAAkBb,OAAO,CAAC,CAACK;IACjC,MAAMiB,0BAA0BtB,OAAuBuB;IACvD,MAAMN,oBAAoBpB,YAAY;QACpC2B,WAAWC,YAAY,CAACH,wBAAwBZ,OAAO;IACzD,GAAG,EAAE;IACL,MAAMI,kBAAkBjB,YACtB,CAACW;QACCS;QACAR,YAAYC,OAAO,GAAGF;QACtBG,gBAAgBD,OAAO,GAAG;QAE1B,IAAIS,eAAe;YACjBE,YAAYb;QACd;IACF,GACA;QAACS;QAAmBE;KAAc;IAEpC,MAAMJ,mBAAmBlB,YAAY;QACnCoB;QACAR,YAAYC,OAAO,GAAG;QACtBC,gBAAgBD,OAAO,GAAGJ;QAC1BO,gBAAgBH,OAAO,GAAG;QAC1B,IAAIS,eAAe;YACjBE,YAAY;QACd;IACF,GAAG;QAACJ;QAAmBE;QAAeb;KAAa;IACnD,MAAMU,oBAAoBnB,YAAY;QACpC,IAAI,OAAOuB,mBAAmB,UAAU;YACtC;QACF;QAEAH;QACAK,wBAAwBZ,OAAO,GAAGc,WAAWE,UAAU,CAAC;YACtDX;QACF,GAAGK;IACL,GAAG;QAACH;QAAmBF;QAAkBK;KAAe;IAExDtB,UAAU;QACRa,gBAAgBD,OAAO,GAAGJ;QAC1B,OAAO;YACLkB,WAAWC,YAAY,CAACH,wBAAwBZ,OAAO;QACzD;IACF,GAAG;QAACJ;KAAa;IAEjB,OAAOP,QACL,IAAO,CAAA;YACLS;YACAC;YACAE;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;QACF,CAAA,GACA;QACET;QACAM;QACAC;QACAC;QACAC;KACD;AAEL"}

package/dist/icon/FontIcon.d.ts

@@ -1,10 +1,11 @@
-import { type AriaAttributes, type HTMLAttributes, type ReactNode } from "react";
+import { type AriaAttributes, type HTMLAttributes, type ReactElement, type ReactNode, type Ref } from "react";
 import { type FontIconClassNameOptions } from "./styles.js";
 /**
  * @since 6.0.0 Removed the `forceSize`/`forceFontSize` props and added the
  * `inline` and `theme` props.
  */
 export interface FontIconProps extends HTMLAttributes<HTMLSpanElement>, FontIconClassNameOptions {
+    ref?: Ref<HTMLElement>;
     /** @defaultValue `true` */
     "aria-hidden"?: AriaAttributes["aria-hidden"];
     /**
@@ -26,4 +27,4 @@ export interface FontIconProps extends HTMLAttributes<HTMLSpanElement>, FontIcon
  * @since 6.0.0 Switched from `<i>` to `<span>` element and removed
  * the `forceSize`/`forceFontSize` props.
  */
-export declare const FontIcon: import("react").ForwardRefExoticComponent<FontIconProps & import("react").RefAttributes<HTMLElement>>;
+export declare function FontIcon(props: FontIconProps): ReactElement;

package/dist/icon/FontIcon.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { icon } from "./styles.js";
 /**
  * The `FontIcon` component is used for rendering a font-icon library's icon.
@@ -9,8 +8,8 @@ import { icon } from "./styles.js";
  * @see {@link https://react-md.dev/components/icon | Icon Demos}
  * @since 6.0.0 Switched from `<i>` to `<span>` element and removed
  * the `forceSize`/`forceFontSize` props.
- */ export const FontIcon = /*#__PURE__*/ forwardRef(function FontIcon(props, ref) {
-    const { "aria-hidden": ariaHidden = true, iconClassName = "material-icons", dense = false, theme, className, children, ...remaining } = props;
+ */ export function FontIcon(props) {
+    const { ref, "aria-hidden": ariaHidden = true, iconClassName = "material-icons", dense = false, theme, className, children, ...remaining } = props;
     return /*#__PURE__*/ _jsx("span", {
         ...remaining,
         "aria-hidden": ariaHidden,
@@ -24,6 +23,6 @@ import { icon } from "./styles.js";
         }),
         children: children
     });
-});
+}
 
 //# sourceMappingURL=FontIcon.js.map

package/dist/icon/FontIcon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/icon/FontIcon.tsx"],"sourcesContent":["import {\n  type AriaAttributes,\n  type HTMLAttributes,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\n\nimport { type FontIconClassNameOptions, icon } from \"./styles.js\";\n\n/**\n * @since 6.0.0 Removed the `forceSize`/`forceFontSize` props and added the\n * `inline` and `theme` props.\n */\nexport interface FontIconProps\n  extends HTMLAttributes<HTMLSpanElement>, FontIconClassNameOptions {\n  /** @defaultValue `true` */\n  \"aria-hidden\"?: AriaAttributes[\"aria-hidden\"];\n\n  /**\n   * Any children to render to create the font icon. This is required for\n   * material-icons. For example:\n   *\n   * ```tsx\n   * <FontIcon>clear</FontIcon>\n   * ```\n   */\n  children?: ReactNode;\n}\n\n/**\n * The `FontIcon` component is used for rendering a font-icon library's icon.\n * The default is to use the `material-icons` library, but others can be used as\n * well.\n *\n * @see {@link https://react-md.dev/components/icon | Icon Demos}\n * @since 6.0.0 Switched from `<i>` to `<span>` element and removed\n * the `forceSize`/`forceFontSize` props.\n */\nexport const FontIcon = forwardRef<HTMLElement, FontIconProps>(\n  function FontIcon(props, ref) {\n    const {\n      \"aria-hidden\": ariaHidden = true,\n      iconClassName = \"material-icons\",\n      dense = false,\n      theme,\n      className,\n      children,\n      ...remaining\n    } = props;\n\n    return (\n      <span\n        {...remaining}\n        aria-hidden={ariaHidden}\n        ref={ref}\n        className={icon({\n          type: \"font\",\n          dense,\n          theme,\n          className,\n          iconClassName,\n        })}\n      >\n        {children}\n      </span>\n    );\n  }\n);\n"],"names":["forwardRef","icon","FontIcon","props","ref","ariaHidden","iconClassName","dense","theme","className","children","remaining","span","aria-hidden","type"],"mappings":";AAAA,SAIEA,UAAU,QACL,QAAQ;AAEf,SAAwCC,IAAI,QAAQ,cAAc;AAsBlE;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAWF,WACtB,SAASE,SAASC,KAAK,EAAEC,GAAG;IAC1B,MAAM,EACJ,eAAeC,aAAa,IAAI,EAChCC,gBAAgB,gBAAgB,EAChCC,QAAQ,KAAK,EACbC,KAAK,EACLC,SAAS,EACTC,QAAQ,EACR,GAAGC,WACJ,GAAGR;IAEJ,qBACE,KAACS;QACE,GAAGD,SAAS;QACbE,eAAaR;QACbD,KAAKA;QACLK,WAAWR,KAAK;YACda,MAAM;YACNP;YACAC;YACAC;YACAH;QACF;kBAECI;;AAGP,GACA"}
+{"version":3,"sources":["../../src/icon/FontIcon.tsx"],"sourcesContent":["import {\n  type AriaAttributes,\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from \"react\";\n\nimport { type FontIconClassNameOptions, icon } from \"./styles.js\";\n\n/**\n * @since 6.0.0 Removed the `forceSize`/`forceFontSize` props and added the\n * `inline` and `theme` props.\n */\nexport interface FontIconProps\n  extends HTMLAttributes<HTMLSpanElement>, FontIconClassNameOptions {\n  ref?: Ref<HTMLElement>;\n\n  /** @defaultValue `true` */\n  \"aria-hidden\"?: AriaAttributes[\"aria-hidden\"];\n\n  /**\n   * Any children to render to create the font icon. This is required for\n   * material-icons. For example:\n   *\n   * ```tsx\n   * <FontIcon>clear</FontIcon>\n   * ```\n   */\n  children?: ReactNode;\n}\n\n/**\n * The `FontIcon` component is used for rendering a font-icon library's icon.\n * The default is to use the `material-icons` library, but others can be used as\n * well.\n *\n * @see {@link https://react-md.dev/components/icon | Icon Demos}\n * @since 6.0.0 Switched from `<i>` to `<span>` element and removed\n * the `forceSize`/`forceFontSize` props.\n */\nexport function FontIcon(props: FontIconProps): ReactElement {\n  const {\n    ref,\n    \"aria-hidden\": ariaHidden = true,\n    iconClassName = \"material-icons\",\n    dense = false,\n    theme,\n    className,\n    children,\n    ...remaining\n  } = props;\n\n  return (\n    <span\n      {...remaining}\n      aria-hidden={ariaHidden}\n      ref={ref}\n      className={icon({\n        type: \"font\",\n        dense,\n        theme,\n        className,\n        iconClassName,\n      })}\n    >\n      {children}\n    </span>\n  );\n}\n"],"names":["icon","FontIcon","props","ref","ariaHidden","iconClassName","dense","theme","className","children","remaining","span","aria-hidden","type"],"mappings":";AAQA,SAAwCA,IAAI,QAAQ,cAAc;AAwBlE;;;;;;;;CAQC,GACD,OAAO,SAASC,SAASC,KAAoB;IAC3C,MAAM,EACJC,GAAG,EACH,eAAeC,aAAa,IAAI,EAChCC,gBAAgB,gBAAgB,EAChCC,QAAQ,KAAK,EACbC,KAAK,EACLC,SAAS,EACTC,QAAQ,EACR,GAAGC,WACJ,GAAGR;IAEJ,qBACE,KAACS;QACE,GAAGD,SAAS;QACbE,eAAaR;QACbD,KAAKA;QACLK,WAAWR,KAAK;YACda,MAAM;YACNP;YACAC;YACAC;YACAH;QACF;kBAECI;;AAGP"}

package/dist/icon/IconRotator.d.ts

@@ -1,4 +1,4 @@
-import { type CSSProperties, type HTMLAttributes, type ReactNode } from "react";
+import { type CSSProperties, type HTMLAttributes, type ReactElement, type ReactNode, type Ref } from "react";
 import { type IconRotatorClassNameOptions } from "./styles.js";
 /**
  * @since 6.0.0 Removed `animate` prop and added `disableTransition`
@@ -19,6 +19,7 @@ export interface IconRotatorBaseProps extends HTMLAttributes<HTMLSpanElement>, I
     forceIconWrap?: boolean;
 }
 export interface IconRotatorProps extends IconRotatorBaseProps {
+    ref?: Ref<HTMLSpanElement>;
     /**
      * The icon that should be rotated. If this is a valid React Element, the
      * class names will be cloned into that icon, otherwise the icon will be
@@ -32,4 +33,4 @@ export interface IconRotatorProps extends IconRotatorBaseProps {
  *
  * @see {@link https://react-md.dev/components/icon-rotator | IconRotator Demos}
  */
-export declare const IconRotator: import("react").ForwardRefExoticComponent<IconRotatorProps & import("react").RefAttributes<HTMLSpanElement>>;
+export declare function IconRotator(props: IconRotatorProps): ReactElement;

package/dist/icon/IconRotator.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cnb } from "cnbuilder";
-import { Children, cloneElement, forwardRef, isValidElement } from "react";
+import { Children, cloneElement, isValidElement } from "react";
 import { iconRotator } from "./styles.js";
 /**
  * The `IconRotator` is a simple component that is used to rotate an icon from a
  * one degrees to another.
  *
  * @see {@link https://react-md.dev/components/icon-rotator | IconRotator Demos}
- */ export const IconRotator = /*#__PURE__*/ forwardRef(function IconRotator(props, ref) {
-    const { className: propClassName, rotated, children, forceIconWrap = false, disableTransition = false, ...remaining } = props;
+ */ export function IconRotator(props) {
+    const { ref, className: propClassName, rotated, children, forceIconWrap = false, disableTransition = false, ...remaining } = props;
     const className = iconRotator({
         rotated,
         className: propClassName,
@@ -26,6 +26,6 @@ import { iconRotator } from "./styles.js";
         className: className,
         children: children
     });
-});
+}
 
 //# sourceMappingURL=IconRotator.js.map

package/dist/icon/IconRotator.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/icon/IconRotator.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n  type CSSProperties,\n  Children,\n  type HTMLAttributes,\n  type ReactNode,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n} from \"react\";\n\nimport { type IconRotatorClassNameOptions, iconRotator } from \"./styles.js\";\n\n/**\n * @since 6.0.0 Removed `animate` prop and added `disableTransition`\n */\nexport interface IconRotatorBaseProps\n  extends HTMLAttributes<HTMLSpanElement>, IconRotatorClassNameOptions {\n  /**\n   * An optional style to apply to the surrounding span when the `forceIconWrap`\n   * prop is enabled or the children is not a single react element.\n   */\n  style?: CSSProperties;\n\n  /**\n   * Boolean if the child icon should be \"forcefully\" wrapped in a `<span>`\n   * element. This should be enabled if you have a custom icon that does not\n   * pass the `className` prop down.\n   *\n   * @defaultValue `false`\n   */\n  forceIconWrap?: boolean;\n}\n\nexport interface IconRotatorProps extends IconRotatorBaseProps {\n  /**\n   * The icon that should be rotated. If this is a valid React Element, the\n   * class names will be cloned into that icon, otherwise the icon will be\n   * wrapped in a span with the correct class names applied.\n   */\n  children: ReactNode;\n}\n\n/**\n * The `IconRotator` is a simple component that is used to rotate an icon from a\n * one degrees to another.\n *\n * @see {@link https://react-md.dev/components/icon-rotator | IconRotator Demos}\n */\nexport const IconRotator = forwardRef<HTMLSpanElement, IconRotatorProps>(\n  function IconRotator(props, ref) {\n    const {\n      className: propClassName,\n      rotated,\n      children,\n      forceIconWrap = false,\n      disableTransition = false,\n      ...remaining\n    } = props;\n\n    const className = iconRotator({\n      rotated,\n      className: propClassName,\n      disableTransition,\n    });\n    if (!forceIconWrap && isValidElement<{ className?: string }>(children)) {\n      const child = Children.only(children);\n      return cloneElement(child, {\n        className: cnb(className, child.props.className),\n      });\n    }\n\n    return (\n      <span {...remaining} ref={ref} className={className}>\n        {children}\n      </span>\n    );\n  }\n);\n"],"names":["cnb","Children","cloneElement","forwardRef","isValidElement","iconRotator","IconRotator","props","ref","className","propClassName","rotated","children","forceIconWrap","disableTransition","remaining","child","only","span"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAEEC,QAAQ,EAGRC,YAAY,EACZC,UAAU,EACVC,cAAc,QACT,QAAQ;AAEf,SAA2CC,WAAW,QAAQ,cAAc;AAgC5E;;;;;CAKC,GACD,OAAO,MAAMC,4BAAcH,WACzB,SAASG,YAAYC,KAAK,EAAEC,GAAG;IAC7B,MAAM,EACJC,WAAWC,aAAa,EACxBC,OAAO,EACPC,QAAQ,EACRC,gBAAgB,KAAK,EACrBC,oBAAoB,KAAK,EACzB,GAAGC,WACJ,GAAGR;IAEJ,MAAME,YAAYJ,YAAY;QAC5BM;QACAF,WAAWC;QACXI;IACF;IACA,IAAI,CAACD,+BAAiBT,eAAuCQ,WAAW;QACtE,MAAMI,QAAQf,SAASgB,IAAI,CAACL;QAC5B,qBAAOV,aAAac,OAAO;YACzBP,WAAWT,IAAIS,WAAWO,MAAMT,KAAK,CAACE,SAAS;QACjD;IACF;IAEA,qBACE,KAACS;QAAM,GAAGH,SAAS;QAAEP,KAAKA;QAAKC,WAAWA;kBACvCG;;AAGP,GACA"}
+{"version":3,"sources":["../../src/icon/IconRotator.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n  type CSSProperties,\n  Children,\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n  cloneElement,\n  isValidElement,\n} from \"react\";\n\nimport { type IconRotatorClassNameOptions, iconRotator } from \"./styles.js\";\n\n/**\n * @since 6.0.0 Removed `animate` prop and added `disableTransition`\n */\nexport interface IconRotatorBaseProps\n  extends HTMLAttributes<HTMLSpanElement>, IconRotatorClassNameOptions {\n  /**\n   * An optional style to apply to the surrounding span when the `forceIconWrap`\n   * prop is enabled or the children is not a single react element.\n   */\n  style?: CSSProperties;\n\n  /**\n   * Boolean if the child icon should be \"forcefully\" wrapped in a `<span>`\n   * element. This should be enabled if you have a custom icon that does not\n   * pass the `className` prop down.\n   *\n   * @defaultValue `false`\n   */\n  forceIconWrap?: boolean;\n}\n\nexport interface IconRotatorProps extends IconRotatorBaseProps {\n  ref?: Ref<HTMLSpanElement>;\n\n  /**\n   * The icon that should be rotated. If this is a valid React Element, the\n   * class names will be cloned into that icon, otherwise the icon will be\n   * wrapped in a span with the correct class names applied.\n   */\n  children: ReactNode;\n}\n\n/**\n * The `IconRotator` is a simple component that is used to rotate an icon from a\n * one degrees to another.\n *\n * @see {@link https://react-md.dev/components/icon-rotator | IconRotator Demos}\n */\nexport function IconRotator(props: IconRotatorProps): ReactElement {\n  const {\n    ref,\n    className: propClassName,\n    rotated,\n    children,\n    forceIconWrap = false,\n    disableTransition = false,\n    ...remaining\n  } = props;\n\n  const className = iconRotator({\n    rotated,\n    className: propClassName,\n    disableTransition,\n  });\n  if (!forceIconWrap && isValidElement<{ className?: string }>(children)) {\n    const child = Children.only(children);\n    return cloneElement(child, {\n      className: cnb(className, child.props.className),\n    });\n  }\n\n  return (\n    <span {...remaining} ref={ref} className={className}>\n      {children}\n    </span>\n  );\n}\n"],"names":["cnb","Children","cloneElement","isValidElement","iconRotator","IconRotator","props","ref","className","propClassName","rotated","children","forceIconWrap","disableTransition","remaining","child","only","span"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAEEC,QAAQ,EAKRC,YAAY,EACZC,cAAc,QACT,QAAQ;AAEf,SAA2CC,WAAW,QAAQ,cAAc;AAkC5E;;;;;CAKC,GACD,OAAO,SAASC,YAAYC,KAAuB;IACjD,MAAM,EACJC,GAAG,EACHC,WAAWC,aAAa,EACxBC,OAAO,EACPC,QAAQ,EACRC,gBAAgB,KAAK,EACrBC,oBAAoB,KAAK,EACzB,GAAGC,WACJ,GAAGR;IAEJ,MAAME,YAAYJ,YAAY;QAC5BM;QACAF,WAAWC;QACXI;IACF;IACA,IAAI,CAACD,+BAAiBT,eAAuCQ,WAAW;QACtE,MAAMI,QAAQd,SAASe,IAAI,CAACL;QAC5B,qBAAOT,aAAaa,OAAO;YACzBP,WAAWR,IAAIQ,WAAWO,MAAMT,KAAK,CAACE,SAAS;QACjD;IACF;IAEA,qBACE,KAACS;QAAM,GAAGH,SAAS;QAAEP,KAAKA;QAAKC,WAAWA;kBACvCG;;AAGP"}

package/dist/icon/MaterialIcon.d.ts

@@ -1,8 +1,9 @@
-import { type AriaAttributes, type HTMLAttributes } from "react";
+import { type AriaAttributes, type HTMLAttributes, type ReactElement, type Ref } from "react";
 import { type MaterialIconFamily, type MaterialIconName } from "./material.js";
 import { type MaterialIconClassNameOptions } from "./styles.js";
 /** @since 6.0.0 */
 export interface MaterialIconProps extends HTMLAttributes<HTMLSpanElement>, Partial<MaterialIconClassNameOptions> {
+    ref?: Ref<HTMLSpanElement>;
     /**
      * The icon name to use
      */
@@ -30,4 +31,4 @@ export interface MaterialIconProps extends HTMLAttributes<HTMLSpanElement>, Part
  * @see {@link https://react-md.dev/components/material-icons|Available Material Icons}
  * @since 6.0.0
  */
-export declare const MaterialIcon: import("react").ForwardRefExoticComponent<MaterialIconProps & import("react").RefAttributes<HTMLSpanElement>>;
+export declare function MaterialIcon(props: MaterialIconProps): ReactElement;

package/dist/icon/MaterialIcon.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { MATERIAL_CONFIG } from "./materialConfig.js";
 import { icon } from "./styles.js";
 /**
@@ -18,8 +17,8 @@ import { icon } from "./styles.js";
  * @see {@link https://react-md.dev/components/icon | Icon Demos}
  * @see {@link https://react-md.dev/components/material-icons|Available Material Icons}
  * @since 6.0.0
- */ export const MaterialIcon = /*#__PURE__*/ forwardRef(function MaterialIcon(props, ref) {
-    const { "aria-hidden": ariaHidden = true, name, family = MATERIAL_CONFIG.iconFamily, theme, dense, className, ...remaining } = props;
+ */ export function MaterialIcon(props) {
+    const { ref, "aria-hidden": ariaHidden = true, name, family = MATERIAL_CONFIG.iconFamily, theme, dense, className, ...remaining } = props;
     return /*#__PURE__*/ _jsx("span", {
         ...remaining,
         "aria-hidden": ariaHidden,
@@ -33,6 +32,6 @@ import { icon } from "./styles.js";
         }),
         children: name
     });
-});
+}
 
 //# sourceMappingURL=MaterialIcon.js.map

package/dist/icon/MaterialIcon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/icon/MaterialIcon.tsx"],"sourcesContent":["import { type AriaAttributes, type HTMLAttributes, forwardRef } from \"react\";\n\nimport { type MaterialIconFamily, type MaterialIconName } from \"./material.js\";\nimport { MATERIAL_CONFIG } from \"./materialConfig.js\";\nimport { type MaterialIconClassNameOptions, icon } from \"./styles.js\";\n\n/** @since 6.0.0 */\nexport interface MaterialIconProps\n  extends\n    HTMLAttributes<HTMLSpanElement>,\n    Partial<MaterialIconClassNameOptions> {\n  /**\n   * The icon name to use\n   */\n  name: MaterialIconName;\n\n  /** @defaultValue `true` */\n  \"aria-hidden\"?: AriaAttributes[\"aria-hidden\"];\n\n  /** @defaultValue `MATERIAL_CONFIG.iconFamily` */\n  family?: MaterialIconFamily;\n  children?: never;\n}\n\n/**\n * The `MaterialIcon` component is used for rendering a material icon using the\n * Google Fonts stylesheet (handled separately). This is mostly a convenience\n * wrapper around the `FontIcon` that will catch typos for the supported icon\n * names.\n *\n * @example Simple Example\n * ```tsx\n * <MaterialIcon name=\"3k\" />\n * <MaterialIcon name=\"favorite\" theme=\"primary\" />\n * <MaterialIcon name=\"wifi\" family=\"two-tone\" dense theme=\"warning\" />\n * ```\n *\n * @see {@link https://react-md.dev/components/icon | Icon Demos}\n * @see {@link https://react-md.dev/components/material-icons|Available Material Icons}\n * @since 6.0.0\n */\nexport const MaterialIcon = forwardRef<HTMLSpanElement, MaterialIconProps>(\n  function MaterialIcon(props, ref) {\n    const {\n      \"aria-hidden\": ariaHidden = true,\n      name,\n      family = MATERIAL_CONFIG.iconFamily,\n      theme,\n      dense,\n      className,\n      ...remaining\n    } = props;\n\n    return (\n      <span\n        {...remaining}\n        aria-hidden={ariaHidden}\n        ref={ref}\n        className={icon({\n          type: \"material\",\n          family,\n          theme,\n          dense,\n          className,\n        })}\n      >\n        {name}\n      </span>\n    );\n  }\n);\n"],"names":["forwardRef","MATERIAL_CONFIG","icon","MaterialIcon","props","ref","ariaHidden","name","family","iconFamily","theme","dense","className","remaining","span","aria-hidden","type"],"mappings":";AAAA,SAAmDA,UAAU,QAAQ,QAAQ;AAG7E,SAASC,eAAe,QAAQ,sBAAsB;AACtD,SAA4CC,IAAI,QAAQ,cAAc;AAoBtE;;;;;;;;;;;;;;;;CAgBC,GACD,OAAO,MAAMC,6BAAeH,WAC1B,SAASG,aAAaC,KAAK,EAAEC,GAAG;IAC9B,MAAM,EACJ,eAAeC,aAAa,IAAI,EAChCC,IAAI,EACJC,SAASP,gBAAgBQ,UAAU,EACnCC,KAAK,EACLC,KAAK,EACLC,SAAS,EACT,GAAGC,WACJ,GAAGT;IAEJ,qBACE,KAACU;QACE,GAAGD,SAAS;QACbE,eAAaT;QACbD,KAAKA;QACLO,WAAWV,KAAK;YACdc,MAAM;YACNR;YACAE;YACAC;YACAC;QACF;kBAECL;;AAGP,GACA"}
+{"version":3,"sources":["../../src/icon/MaterialIcon.tsx"],"sourcesContent":["import {\n  type AriaAttributes,\n  type HTMLAttributes,\n  type ReactElement,\n  type Ref,\n} from \"react\";\n\nimport { type MaterialIconFamily, type MaterialIconName } from \"./material.js\";\nimport { MATERIAL_CONFIG } from \"./materialConfig.js\";\nimport { type MaterialIconClassNameOptions, icon } from \"./styles.js\";\n\n/** @since 6.0.0 */\nexport interface MaterialIconProps\n  extends\n    HTMLAttributes<HTMLSpanElement>,\n    Partial<MaterialIconClassNameOptions> {\n  ref?: Ref<HTMLSpanElement>;\n\n  /**\n   * The icon name to use\n   */\n  name: MaterialIconName;\n\n  /** @defaultValue `true` */\n  \"aria-hidden\"?: AriaAttributes[\"aria-hidden\"];\n\n  /** @defaultValue `MATERIAL_CONFIG.iconFamily` */\n  family?: MaterialIconFamily;\n  children?: never;\n}\n\n/**\n * The `MaterialIcon` component is used for rendering a material icon using the\n * Google Fonts stylesheet (handled separately). This is mostly a convenience\n * wrapper around the `FontIcon` that will catch typos for the supported icon\n * names.\n *\n * @example Simple Example\n * ```tsx\n * <MaterialIcon name=\"3k\" />\n * <MaterialIcon name=\"favorite\" theme=\"primary\" />\n * <MaterialIcon name=\"wifi\" family=\"two-tone\" dense theme=\"warning\" />\n * ```\n *\n * @see {@link https://react-md.dev/components/icon | Icon Demos}\n * @see {@link https://react-md.dev/components/material-icons|Available Material Icons}\n * @since 6.0.0\n */\nexport function MaterialIcon(props: MaterialIconProps): ReactElement {\n  const {\n    ref,\n    \"aria-hidden\": ariaHidden = true,\n    name,\n    family = MATERIAL_CONFIG.iconFamily,\n    theme,\n    dense,\n    className,\n    ...remaining\n  } = props;\n\n  return (\n    <span\n      {...remaining}\n      aria-hidden={ariaHidden}\n      ref={ref}\n      className={icon({\n        type: \"material\",\n        family,\n        theme,\n        dense,\n        className,\n      })}\n    >\n      {name}\n    </span>\n  );\n}\n"],"names":["MATERIAL_CONFIG","icon","MaterialIcon","props","ref","ariaHidden","name","family","iconFamily","theme","dense","className","remaining","span","aria-hidden","type"],"mappings":";AAQA,SAASA,eAAe,QAAQ,sBAAsB;AACtD,SAA4CC,IAAI,QAAQ,cAAc;AAsBtE;;;;;;;;;;;;;;;;CAgBC,GACD,OAAO,SAASC,aAAaC,KAAwB;IACnD,MAAM,EACJC,GAAG,EACH,eAAeC,aAAa,IAAI,EAChCC,IAAI,EACJC,SAASP,gBAAgBQ,UAAU,EACnCC,KAAK,EACLC,KAAK,EACLC,SAAS,EACT,GAAGC,WACJ,GAAGT;IAEJ,qBACE,KAACU;QACE,GAAGD,SAAS;QACbE,eAAaT;QACbD,KAAKA;QACLO,WAAWV,KAAK;YACdc,MAAM;YACNR;YACAE;YACAC;YACAC;QACF;kBAECL;;AAGP"}

package/dist/icon/MaterialSymbol.d.ts

@@ -1,4 +1,4 @@
-import { type AriaAttributes, type HTMLAttributes } from "react";
+import { type AriaAttributes, type HTMLAttributes, type ReactElement, type Ref } from "react";
 import { type MaterialSymbolName } from "./material.js";
 import { type MaterialSymbolCustomization, type MaterialSymbolFill, type MaterialSymbolGrade, type MaterialSymbolOpticalSize, type MaterialSymbolWeight } from "./materialConfig.js";
 import { type MaterialSymbolClassNameOptions } from "./styles.js";
@@ -14,6 +14,7 @@ declare module "react" {
  * @since 6.0.0
  */
 export interface MaterialSymbolProps extends HTMLAttributes<HTMLSpanElement>, MaterialSymbolCustomization, Partial<MaterialSymbolClassNameOptions> {
+    ref?: Ref<HTMLSpanElement>;
     /** @defaultValue `true` */
     "aria-hidden"?: AriaAttributes["aria-hidden"];
     name: MaterialSymbolName;
@@ -53,4 +54,4 @@ export interface MaterialSymbolProps extends HTMLAttributes<HTMLSpanElement>, Ma
  * @see {@link https://react-md.dev/components/material-icons|Available Material Icons}
  * @since 6.0.0
  */
-export declare const MaterialSymbol: import("react").ForwardRefExoticComponent<MaterialSymbolProps & import("react").RefAttributes<HTMLSpanElement>>;
+export declare function MaterialSymbol(props: MaterialSymbolProps): ReactElement;

package/dist/icon/MaterialSymbol.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { getFontVariationSettings } from "./materialConfig.js";
 import { icon } from "./styles.js";
 /**
@@ -35,8 +34,8 @@ import { icon } from "./styles.js";
  * @see {@link https://react-md.dev/components/icon | Icon Demos}
  * @see {@link https://react-md.dev/components/material-icons|Available Material Icons}
  * @since 6.0.0
- */ export const MaterialSymbol = /*#__PURE__*/ forwardRef(function MaterialSymbol(props, ref) {
-    const { "aria-hidden": ariaHidden = true, className, name: symbol, style: propStyle, family: propFamily, fill, weight, grade, opticalSize, theme, dense, ...remaining } = props;
+ */ export function MaterialSymbol(props) {
+    const { ref, "aria-hidden": ariaHidden = true, className, name: symbol, style: propStyle, family: propFamily, fill, weight, grade, opticalSize, theme, dense, ...remaining } = props;
     const { style, family } = getFontVariationSettings({
         style: propStyle,
         fill,
@@ -59,6 +58,6 @@ import { icon } from "./styles.js";
         }),
         children: symbol
     });
-});
+}
 
 //# sourceMappingURL=MaterialSymbol.js.map

package/dist/icon/MaterialSymbol.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/icon/MaterialSymbol.tsx"],"sourcesContent":["import { type AriaAttributes, type HTMLAttributes, forwardRef } from \"react\";\n\nimport { type MaterialSymbolName } from \"./material.js\";\nimport {\n  type MaterialSymbolCustomization,\n  type MaterialSymbolFill,\n  type MaterialSymbolGrade,\n  type MaterialSymbolOpticalSize,\n  type MaterialSymbolWeight,\n  getFontVariationSettings,\n} from \"./materialConfig.js\";\nimport { type MaterialSymbolClassNameOptions, icon } from \"./styles.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-symbol-fill\"?: MaterialSymbolFill;\n    \"--rmd-symbol-wght\"?: MaterialSymbolWeight;\n    \"--rmd-symbol-grad\"?: MaterialSymbolGrade;\n    \"--rmd-symbol-opsz\"?: MaterialSymbolOpticalSize;\n  }\n}\n\n/**\n * @since 6.0.0\n */\nexport interface MaterialSymbolProps\n  extends\n    HTMLAttributes<HTMLSpanElement>,\n    MaterialSymbolCustomization,\n    Partial<MaterialSymbolClassNameOptions> {\n  /** @defaultValue `true` */\n  \"aria-hidden\"?: AriaAttributes[\"aria-hidden\"];\n  name: MaterialSymbolName;\n  children?: never;\n}\n\n/**\n * This is a convenience component that provides autocomplete for all the\n * available material symbols via the `name` prop.\n *\n * Note: You might notice IDE slowdowns for files that use this component since\n * there are so many icons available. If it becomes an issue, just stop using\n * this component and define the icons inline instead.\n *\n * @example Simple Example\n * ```tsx\n * import { MaterialSymbol } from \"@react-md/core/icon/MaterialSymbol\";\n * import type { ReactElement } from \"react\";\n * import { createRoot } from \"react-dom/client\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <>\n *       <MaterialSymbol symbol=\"close\" />\n *       <MaterialSymbol symbol=\"tune\" type=\"outline\" />\n *\n *       <MaterialSymbol symbol=\"add\" type=\"round\" />\n *       <MaterialSymbol symbol=\"air\" type=\"sharp\" />\n *     </>\n *   );\n * }\n *\n * const root = createRoot(document.getElementById(\"root\"));\n * root.render(<App />);\n * ```\n *\n * @see {@link https://react-md.dev/components/icon | Icon Demos}\n * @see {@link https://react-md.dev/components/material-icons|Available Material Icons}\n * @since 6.0.0\n */\nexport const MaterialSymbol = forwardRef<HTMLSpanElement, MaterialSymbolProps>(\n  function MaterialSymbol(props, ref) {\n    const {\n      \"aria-hidden\": ariaHidden = true,\n      className,\n      name: symbol,\n      style: propStyle,\n      family: propFamily,\n      fill,\n      weight,\n      grade,\n      opticalSize,\n      theme,\n      dense,\n      ...remaining\n    } = props;\n    const { style, family } = getFontVariationSettings({\n      style: propStyle,\n      fill,\n      weight,\n      grade,\n      opticalSize,\n      family: propFamily,\n    });\n\n    return (\n      <span\n        {...remaining}\n        aria-hidden={ariaHidden}\n        ref={ref}\n        style={style}\n        className={icon({\n          type: \"symbol\",\n          family,\n          theme,\n          dense,\n          className,\n        })}\n      >\n        {symbol}\n      </span>\n    );\n  }\n);\n"],"names":["forwardRef","getFontVariationSettings","icon","MaterialSymbol","props","ref","ariaHidden","className","name","symbol","style","propStyle","family","propFamily","fill","weight","grade","opticalSize","theme","dense","remaining","span","aria-hidden","type"],"mappings":";AAAA,SAAmDA,UAAU,QAAQ,QAAQ;AAG7E,SAMEC,wBAAwB,QACnB,sBAAsB;AAC7B,SAA8CC,IAAI,QAAQ,cAAc;AAyBxE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCC,GACD,OAAO,MAAMC,+BAAiBH,WAC5B,SAASG,eAAeC,KAAK,EAAEC,GAAG;IAChC,MAAM,EACJ,eAAeC,aAAa,IAAI,EAChCC,SAAS,EACTC,MAAMC,MAAM,EACZC,OAAOC,SAAS,EAChBC,QAAQC,UAAU,EAClBC,IAAI,EACJC,MAAM,EACNC,KAAK,EACLC,WAAW,EACXC,KAAK,EACLC,KAAK,EACL,GAAGC,WACJ,GAAGhB;IACJ,MAAM,EAAEM,KAAK,EAAEE,MAAM,EAAE,GAAGX,yBAAyB;QACjDS,OAAOC;QACPG;QACAC;QACAC;QACAC;QACAL,QAAQC;IACV;IAEA,qBACE,KAACQ;QACE,GAAGD,SAAS;QACbE,eAAahB;QACbD,KAAKA;QACLK,OAAOA;QACPH,WAAWL,KAAK;YACdqB,MAAM;YACNX;YACAM;YACAC;YACAZ;QACF;kBAECE;;AAGP,GACA"}
+{"version":3,"sources":["../../src/icon/MaterialSymbol.tsx"],"sourcesContent":["import {\n  type AriaAttributes,\n  type HTMLAttributes,\n  type ReactElement,\n  type Ref,\n} from \"react\";\n\nimport { type MaterialSymbolName } from \"./material.js\";\nimport {\n  type MaterialSymbolCustomization,\n  type MaterialSymbolFill,\n  type MaterialSymbolGrade,\n  type MaterialSymbolOpticalSize,\n  type MaterialSymbolWeight,\n  getFontVariationSettings,\n} from \"./materialConfig.js\";\nimport { type MaterialSymbolClassNameOptions, icon } from \"./styles.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-symbol-fill\"?: MaterialSymbolFill;\n    \"--rmd-symbol-wght\"?: MaterialSymbolWeight;\n    \"--rmd-symbol-grad\"?: MaterialSymbolGrade;\n    \"--rmd-symbol-opsz\"?: MaterialSymbolOpticalSize;\n  }\n}\n\n/**\n * @since 6.0.0\n */\nexport interface MaterialSymbolProps\n  extends\n    HTMLAttributes<HTMLSpanElement>,\n    MaterialSymbolCustomization,\n    Partial<MaterialSymbolClassNameOptions> {\n  ref?: Ref<HTMLSpanElement>;\n\n  /** @defaultValue `true` */\n  \"aria-hidden\"?: AriaAttributes[\"aria-hidden\"];\n  name: MaterialSymbolName;\n  children?: never;\n}\n\n/**\n * This is a convenience component that provides autocomplete for all the\n * available material symbols via the `name` prop.\n *\n * Note: You might notice IDE slowdowns for files that use this component since\n * there are so many icons available. If it becomes an issue, just stop using\n * this component and define the icons inline instead.\n *\n * @example Simple Example\n * ```tsx\n * import { MaterialSymbol } from \"@react-md/core/icon/MaterialSymbol\";\n * import type { ReactElement } from \"react\";\n * import { createRoot } from \"react-dom/client\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <>\n *       <MaterialSymbol symbol=\"close\" />\n *       <MaterialSymbol symbol=\"tune\" type=\"outline\" />\n *\n *       <MaterialSymbol symbol=\"add\" type=\"round\" />\n *       <MaterialSymbol symbol=\"air\" type=\"sharp\" />\n *     </>\n *   );\n * }\n *\n * const root = createRoot(document.getElementById(\"root\"));\n * root.render(<App />);\n * ```\n *\n * @see {@link https://react-md.dev/components/icon | Icon Demos}\n * @see {@link https://react-md.dev/components/material-icons|Available Material Icons}\n * @since 6.0.0\n */\nexport function MaterialSymbol(props: MaterialSymbolProps): ReactElement {\n  const {\n    ref,\n    \"aria-hidden\": ariaHidden = true,\n    className,\n    name: symbol,\n    style: propStyle,\n    family: propFamily,\n    fill,\n    weight,\n    grade,\n    opticalSize,\n    theme,\n    dense,\n    ...remaining\n  } = props;\n  const { style, family } = getFontVariationSettings({\n    style: propStyle,\n    fill,\n    weight,\n    grade,\n    opticalSize,\n    family: propFamily,\n  });\n\n  return (\n    <span\n      {...remaining}\n      aria-hidden={ariaHidden}\n      ref={ref}\n      style={style}\n      className={icon({\n        type: \"symbol\",\n        family,\n        theme,\n        dense,\n        className,\n      })}\n    >\n      {symbol}\n    </span>\n  );\n}\n"],"names":["getFontVariationSettings","icon","MaterialSymbol","props","ref","ariaHidden","className","name","symbol","style","propStyle","family","propFamily","fill","weight","grade","opticalSize","theme","dense","remaining","span","aria-hidden","type"],"mappings":";AAQA,SAMEA,wBAAwB,QACnB,sBAAsB;AAC7B,SAA8CC,IAAI,QAAQ,cAAc;AA2BxE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCC,GACD,OAAO,SAASC,eAAeC,KAA0B;IACvD,MAAM,EACJC,GAAG,EACH,eAAeC,aAAa,IAAI,EAChCC,SAAS,EACTC,MAAMC,MAAM,EACZC,OAAOC,SAAS,EAChBC,QAAQC,UAAU,EAClBC,IAAI,EACJC,MAAM,EACNC,KAAK,EACLC,WAAW,EACXC,KAAK,EACLC,KAAK,EACL,GAAGC,WACJ,GAAGhB;IACJ,MAAM,EAAEM,KAAK,EAAEE,MAAM,EAAE,GAAGX,yBAAyB;QACjDS,OAAOC;QACPG;QACAC;QACAC;QACAC;QACAL,QAAQC;IACV;IAEA,qBACE,KAACQ;QACE,GAAGD,SAAS;QACbE,eAAahB;QACbD,KAAKA;QACLK,OAAOA;QACPH,WAAWL,KAAK;YACdqB,MAAM;YACNX;YACAM;YACAC;YACAZ;QACF;kBAECE;;AAGP"}

package/dist/icon/SVGIcon.d.ts

@@ -1,9 +1,10 @@
-import { type HTMLAttributes, type ReactNode } from "react";
+import { type HTMLAttributes, type ReactElement, type ReactNode, type Ref } from "react";
 import { type SVGIconClassNameOptions } from "./styles.js";
 /**
  * @since 6.0.0 Added the `inline` and `theme` props.
  */
 export interface SVGIconProps extends HTMLAttributes<SVGSVGElement>, SVGIconClassNameOptions {
+    ref?: Ref<SVGSVGElement>;
     /**
      * Boolean if the SVG should gain the `focusable` attribute. This is disabled
      * by default since IE11 and Edge actually default this to true and keyboard's
@@ -70,4 +71,4 @@ export interface SVGIconProps extends HTMLAttributes<SVGSVGElement>, SVGIconClas
  *
  * @see {@link https://react-md.dev/components/icon | Icon Demos}
  */
-export declare const SVGIcon: import("react").ForwardRefExoticComponent<SVGIconProps & import("react").RefAttributes<SVGSVGElement>>;
+export declare function SVGIcon(props: SVGIconProps): ReactElement;