@react-md/core 6.4.0 → 6.5.1

package/dist/form/useCombobox.js.map

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

package/dist/form/useFormReset.js

@@ -8,7 +8,7 @@ import { triggerManualChangeEvent } from "./utils.js";
     const { form, elementRef, defaultValue, onReset } = options;
     useEffect(()=>{
         const element = elementRef.current;
-        if (!element || typeof defaultValue === "undefined" && !onReset) {
+        if (!element || defaultValue === undefined && !onReset) {
             return;
         }
         const formElement = form && document.getElementById(form) || element.closest("form") || null;
@@ -18,7 +18,7 @@ import { triggerManualChangeEvent } from "./utils.js";
         const handleReset = ()=>{
             if (onReset) {
                 onReset();
-            } else if (typeof defaultValue !== "undefined") {
+            } else if (defaultValue !== undefined) {
                 triggerManualChangeEvent(element, defaultValue);
             }
         };

package/dist/form/useFormReset.js.map

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

package/dist/form/useNumberField.js

@@ -49,7 +49,7 @@ const noop = ()=>{
             if (!Number.isNaN(value)) {
                 setNumber(value);
                 input.value = `${value}`;
-            } else if (typeof initial.current === "undefined") {
+            } else if (initial.current === undefined) {
                 setNumber(undefined);
             }
         },

package/dist/form/useNumberField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/useNumberField.ts"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useRef, useState } from \"react\";\n\nimport { type UseStateInitializer, type UseStateSetter } from \"../types.js\";\nimport { useIsomorphicLayoutEffect } from \"../useIsomorphicLayoutEffect.js\";\nimport { withinRange } from \"../utils/withinRange.js\";\nimport { useFormReset } from \"./useFormReset.js\";\nimport {\n  type ProvidedTextFieldMessageProps,\n  type ProvidedTextFieldProps,\n  type TextFieldHookOptions,\n  type TextFieldHookState,\n  type TextFieldImplementation,\n  type ValidatedTextFieldImplementation,\n  useTextField,\n} from \"./useTextField.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/** @since 2.5.0 */\nexport interface NumberFieldConstraints {\n  /**\n   * An optional min value for the number field.\n   */\n  min?: number;\n\n  /**\n   * An optional max value for the number field.\n   */\n  max?: number;\n\n  /**\n   * An optional step amount to use.\n   *\n   * Note: The `min` and `max` values must be divisible by this value when any\n   * are defined.\n   */\n  step?: number;\n}\n\n/**\n * @since 2.5.0\n * @since 6.0.0\n * - Removed `updateOnChange` in favor of `updateValue`\n * - Renamed `fixOnBlur` to `updateValueOnBlur`\n */\nexport interface NumberFieldHookOptions\n  extends\n    Omit<TextFieldHookOptions, \"defaultValue\" | \"isNumber\">,\n    NumberFieldConstraints {\n  /**\n   * @defaultValue `undefined`\n   */\n  defaultValue?: UseStateInitializer<number>;\n\n  /**\n   * This controls the behavior for the `value` returned by this hook. If you\n   * need access to the current value immediately as the user types to update\n   * other components, keep this as the default of `\"change\"`. Otherwise, set\n   * this to `\"blur\"`.\n   *\n   * @example Deferring Updates on Blur\n   * ```tsx\n   * import { TextField } from \"@react-md/core/form/TextField\";\n   * import { useNumberField } from \"@react-md/core/form/useNumberField\";\n   * import type { ReactElement } from \"react\";\n   *\n   * function Example(): ReactElement {\n   *   const { fieldProps, value } = useNumberField({\n   *     min: 0,\n   *     max: 100,\n   *     name: \"someName\",\n   *     defaultValue: 0,\n   *     updateValue: \"blur\",\n   *   });\n   *\n   *   const result = useMemo(() => someExpensiveComputation(value), [value]);\n   *\n   *   return <TextField {...fieldProps} label=\"Label\" />;\n   * }\n   * ```\n   *\n   * @defaultValue `\"change\"`\n   */\n  updateValue?: \"blur\" | \"change\";\n\n  /**\n   * This option is used to update the `number` value and text field value to be\n   * within the `min` and `max` range or just format the text field value when\n   * the input is blurred. This update will only be applied if the text field\n   * contains a valid number. Using `min = 0` and `max = 10`:\n   *\n   * | text value | updated value |\n   * | ---------- | ------------- |\n   * | 000001     | 1             |\n   * | -1         | 0             |\n   * | 20         | 10            |\n   * | -12        | 0             |\n   * | --1        | --1           |\n   * | fjdka      | fjdka         |\n   *\n   *\n   * Set this to `false` if no changed should be applied and force the user to\n   * fix any min/max errors manually and maintain weird formatting.\n   *\n   * @defaultValue `true`\n   * @since 6.0.0 This was renamed from `fixOnBlur` and removed the\n   * `\"min\"` and `\"max\"` behavior.\n   */\n  updateValueOnBlur?: boolean;\n}\n\n/** @since 6.0.0 */\nexport interface NumberFieldHookState extends Omit<\n  TextFieldHookState,\n  \"value\"\n> {\n  value: number | undefined;\n}\n\n/** @since 2.5.6 */\nexport interface ProvidedNumberFieldProps\n  extends ProvidedTextFieldProps, NumberFieldConstraints {\n  type: \"number\";\n}\n\n/** @since 2.5.6 */\nexport interface ProvidedNumberFieldMessageProps\n  extends ProvidedTextFieldMessageProps, NumberFieldConstraints {\n  type: \"number\";\n}\n\n/** @since 6.0.0 */\nexport interface NumberFieldImplementation extends Omit<\n  TextFieldImplementation,\n  \"value\" | \"setState\"\n> {\n  value: number | undefined;\n  setState: UseStateSetter<NumberFieldHookState>;\n  fieldProps: ProvidedNumberFieldProps;\n}\n\n/** @since 6.0.0 */\nexport interface NumberFieldWithMessageImplementation extends NumberFieldImplementation {\n  fieldProps: ProvidedNumberFieldMessageProps;\n}\n\n/** @since 6.0.0 */\nexport interface ValidatedNumberFieldImplementation extends Omit<\n  ValidatedTextFieldImplementation,\n  \"value\" | \"setState\"\n> {\n  value: number | undefined;\n  setState: UseStateSetter<NumberFieldHookState>;\n  fieldProps: ProvidedNumberFieldProps | ProvidedNumberFieldMessageProps;\n}\n\n/**\n * @example Enforce Number Value and No Error Messages\n * ```tsx\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { useNumberField } from \"@react-md/core/form/useNumberField\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps, value } = useNumberField({\n *     min: 0,\n *     max: 100,\n *     name: \"someName\",\n *     defaultValue: 0,\n *     disableMessage: true,\n *   });\n *\n *   // this is safe since `value` will always be a number even if there is a\n *   // validation error. since the min and max options were provided as well,\n *   // number will be between that range as well.\n *   const computed = value * 10;\n *\n *   return <TextField {...fieldProps} label=\"Label\" />;\n * }\n * ```\n *\n * @see {@link useTextField}\n * @see {@link useNumberField} overrides for other examples.\n * ```\n */\nexport function useNumberField(\n  options: NumberFieldHookOptions & {\n    disableMessage: true;\n    defaultValue: UseStateInitializer<number>;\n  }\n): NumberFieldImplementation & {\n  value: number;\n  setState: UseStateSetter<NumberFieldHookState & { value: number }>;\n};\n\n/**\n * @example No Error Messages\n * ```tsx\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { useNumberField } from \"@react-md/core/form/useNumberField\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps, value } = useNumberField({\n *     min: 0,\n *     max: 100,\n *     name: \"someName\",\n *     disableMessage: true,\n *   });\n *\n *   // `value` will be `undefined` until the user enters a valid value once\n *   // there is a valid value, `value` will be a `number`. So this might cause\n *   // `computed` to be `NaN | number`\n *   //\n *   // const computed = value * 10;\n *\n *   return <TextField {...fieldProps} label=\"Label\" />;\n * }\n * ```\n *\n * @see {@link useTextField}\n * @see {@link useNumberField} overrides for other examples.\n */\nexport function useNumberField(\n  options: NumberFieldHookOptions & { disableMessage: true }\n): NumberFieldImplementation;\n\n/**\n * @example Enforce Number Value\n * ```tsx\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { useNumberField } from \"@react-md/core/form/useNumberField\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps, value } = useNumberField({\n *     min: 0,\n *     max: 100,\n *     name: \"someName\",\n *     defaultValue: 0,\n *   });\n *\n *   // this is safe since `value` will always be a number even if there is a\n *   // validation error. since the min and max options were provided as well,\n *   // number will be between that range as well.\n *   const computed = value * 10;\n *\n *   return <TextField {...fieldProps} label=\"Label\" />;\n * }\n * ```\n *\n * @example Enforce Number Value and Deferring Updates\n * ```tsx\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { useNumberField } from \"@react-md/core/form/useNumberField\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps, value } = useNumberField({\n *     min: 0,\n *     max: 100,\n *     name: \"someName\",\n *     defaultValue: 0,\n *     updateValue: \"blur\",\n *   });\n *\n *   // the `value` will only be updated whenever the `TextField` is blurred.\n *   // This is helpful if the `value` is used in expensive computations or\n *   // updates that do not need to be updated as the user types\n *   const computed = value * 10;\n *\n *   return <TextField {...fieldProps} label=\"Label\" />;\n * }\n * ```\n *\n * @see {@link useTextField}\n * @see {@link useNumberField} overrides for other examples.\n */\nexport function useNumberField(\n  options: NumberFieldHookOptions & {\n    defaultValue: UseStateInitializer<number>;\n  }\n): NumberFieldWithMessageImplementation & {\n  value: number;\n  setState: UseStateSetter<NumberFieldHookState & { value: number }>;\n};\n\n/**\n * The `useNumberField` hook is used to control the state of a `TextField` or\n * `<input type=\"number\">`\n *\n * @example Default Implementation\n * ```tsx\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { useNumberField } from \"@react-md/core/form/useNumberField\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps, value } = useNumberField({\n *     name: \"someName\",\n *   });\n *\n *   // `value` will be `undefined` until the user enters a valid value once\n *   // there is a valid value, `value` will be a `number`. So this might cause\n *   // `computed` to be `NaN | number`\n *   //\n *   // const computed = value * 10;\n *\n *   // whenever there is an error, an error message will be displayed below the\n *   // `TextField`\n *   return <TextField {...fieldProps} label=\"Label\" />;\n * }\n * ```\n *\n * @example Adding Constraints\n * ```tsx\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { useNumberField } from \"@react-md/core/form/useNumberField\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps, value } = useNumberField({\n *     name: \"someName\",\n *     min: 0,\n *     max: 100,\n *     step: 2,\n *     required: true,\n *   });\n *\n *   return <TextField {...fieldProps} label=\"Label\" />;\n * }\n * ```\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation\n * @see {@link https://react-md.dev/components/text-field#number | Number TextField Demos}\n * @see {@link https://react-md.dev/hooks/use-number-field | useNumberField Demos}\n * @see {@link useTextField}\n */\nexport function useNumberField(\n  options: NumberFieldHookOptions\n): NumberFieldWithMessageImplementation;\n\n/**\n * @internal\n * @see {@link https://react-md.dev/components/text-field#number | Number TextField Demos}\n * @see {@link https://react-md.dev/hooks/use-number-field | useNumberField Demos}\n * @see {@link useTextField}\n * @see {@link useNumberField} overrides for other examples.\n */\nexport function useNumberField(\n  options: NumberFieldHookOptions\n): ValidatedNumberFieldImplementation {\n  const {\n    min,\n    max,\n    step,\n    form,\n    onBlur = noop,\n    onChange = noop,\n    updateValue = \"change\",\n    updateValueOnBlur = true,\n    disableReset,\n    defaultValue,\n    ...textOptions\n  } = options;\n\n  const [number, setNumber] = useState(defaultValue);\n  const initial = useRef(number);\n  const {\n    value: _value,\n    reset: resetTextField,\n    fieldRef,\n    fieldProps,\n    setState: setTextFieldState,\n    ...remaining\n  } = useTextField({\n    ...textOptions,\n    isNumber: true,\n    defaultValue: `${number ?? \"\"}`,\n    disableReset: true,\n    onBlur(event) {\n      onBlur(event);\n      if (event.isPropagationStopped()) {\n        return;\n      }\n\n      const input = event.currentTarget;\n      input.setCustomValidity(\"\");\n      input.checkValidity();\n      if (\n        !updateValueOnBlur ||\n        // do nothing else since it's a weird value like: `\"--0\"` which causes\n        // the value to be `\"\"` and `numberAsValue` to be `NaN`\n        input.validity.badInput\n      ) {\n        return;\n      }\n\n      let value = input.valueAsNumber;\n      if (input.value === \"\" && typeof initial.current === \"number\") {\n        value = min ?? initial.current;\n      }\n\n      // can't have both rangeUnderflow and rangeOverflow at the same time, so\n      // it's \"safe\" to always provide both\n      value = withinRange({ min, max, value });\n      if (!Number.isNaN(value)) {\n        setNumber(value);\n        input.value = `${value}`;\n      } else if (typeof initial.current === \"undefined\") {\n        setNumber(undefined);\n      }\n    },\n    onChange(event) {\n      onChange(event);\n      if (event.isPropagationStopped() || updateValue === \"blur\") {\n        return;\n      }\n\n      const input = event.currentTarget;\n      input.checkValidity();\n      const value = withinRange({\n        min,\n        max,\n        value: event.currentTarget.valueAsNumber,\n      });\n      if (\n        !input.validity.valid &&\n        !input.validity.rangeUnderflow &&\n        !input.validity.rangeOverflow\n      ) {\n        return;\n      }\n\n      if (!Number.isNaN(value)) {\n        setNumber(value);\n      } else if (initial.current === undefined) {\n        setNumber(undefined);\n      }\n    },\n  });\n\n  const { error, errorMessage } = remaining;\n  const prevState = useRef({\n    error,\n    errorMessage,\n    value: number,\n  } satisfies NumberFieldHookState);\n  useIsomorphicLayoutEffect(() => {\n    prevState.current = {\n      error,\n      errorMessage,\n      value: number,\n    };\n  });\n  const reset = useCallback(() => {\n    resetTextField();\n    setNumber(initial.current);\n  }, [resetTextField]);\n  const setState = useCallback<UseStateSetter<NumberFieldHookState>>(\n    (nextState) => {\n      const resolvedNextState =\n        typeof nextState === \"function\"\n          ? nextState(prevState.current)\n          : nextState;\n\n      const { value, error, errorMessage } = resolvedNextState;\n      setNumber(value);\n      setTextFieldState({\n        value: `${value ?? \"\"}`,\n        error,\n        errorMessage,\n      });\n    },\n    [setTextFieldState]\n  );\n\n  useFormReset({\n    form,\n    elementRef: fieldRef,\n    onReset: disableReset ? undefined : reset,\n  });\n\n  return {\n    ...remaining,\n    reset,\n    value: number,\n    setState,\n    fieldRef,\n    fieldProps: {\n      ...fieldProps,\n      min,\n      max,\n      step,\n      type: \"number\",\n    },\n  };\n}\n"],"names":["useCallback","useRef","useState","useIsomorphicLayoutEffect","withinRange","useFormReset","useTextField","noop","useNumberField","options","min","max","step","form","onBlur","onChange","updateValue","updateValueOnBlur","disableReset","defaultValue","textOptions","number","setNumber","initial","value","_value","reset","resetTextField","fieldRef","fieldProps","setState","setTextFieldState","remaining","isNumber","event","isPropagationStopped","input","currentTarget","setCustomValidity","checkValidity","validity","badInput","valueAsNumber","current","Number","isNaN","undefined","valid","rangeUnderflow","rangeOverflow","error","errorMessage","prevState","nextState","resolvedNextState","elementRef","onReset","type"],"mappings":"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"}
+{"version":3,"sources":["../../src/form/useNumberField.ts"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useRef, useState } from \"react\";\n\nimport { type UseStateInitializer, type UseStateSetter } from \"../types.js\";\nimport { useIsomorphicLayoutEffect } from \"../useIsomorphicLayoutEffect.js\";\nimport { withinRange } from \"../utils/withinRange.js\";\nimport { useFormReset } from \"./useFormReset.js\";\nimport {\n  type ProvidedTextFieldMessageProps,\n  type ProvidedTextFieldProps,\n  type TextFieldHookOptions,\n  type TextFieldHookState,\n  type TextFieldImplementation,\n  type ValidatedTextFieldImplementation,\n  useTextField,\n} from \"./useTextField.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/** @since 2.5.0 */\nexport interface NumberFieldConstraints {\n  /**\n   * An optional min value for the number field.\n   */\n  min?: number;\n\n  /**\n   * An optional max value for the number field.\n   */\n  max?: number;\n\n  /**\n   * An optional step amount to use.\n   *\n   * Note: The `min` and `max` values must be divisible by this value when any\n   * are defined.\n   */\n  step?: number;\n}\n\n/**\n * @since 2.5.0\n * @since 6.0.0\n * - Removed `updateOnChange` in favor of `updateValue`\n * - Renamed `fixOnBlur` to `updateValueOnBlur`\n */\nexport interface NumberFieldHookOptions\n  extends\n    Omit<TextFieldHookOptions, \"defaultValue\" | \"isNumber\">,\n    NumberFieldConstraints {\n  /**\n   * @defaultValue `undefined`\n   */\n  defaultValue?: UseStateInitializer<number>;\n\n  /**\n   * This controls the behavior for the `value` returned by this hook. If you\n   * need access to the current value immediately as the user types to update\n   * other components, keep this as the default of `\"change\"`. Otherwise, set\n   * this to `\"blur\"`.\n   *\n   * @example Deferring Updates on Blur\n   * ```tsx\n   * import { TextField } from \"@react-md/core/form/TextField\";\n   * import { useNumberField } from \"@react-md/core/form/useNumberField\";\n   * import type { ReactElement } from \"react\";\n   *\n   * function Example(): ReactElement {\n   *   const { fieldProps, value } = useNumberField({\n   *     min: 0,\n   *     max: 100,\n   *     name: \"someName\",\n   *     defaultValue: 0,\n   *     updateValue: \"blur\",\n   *   });\n   *\n   *   const result = useMemo(() => someExpensiveComputation(value), [value]);\n   *\n   *   return <TextField {...fieldProps} label=\"Label\" />;\n   * }\n   * ```\n   *\n   * @defaultValue `\"change\"`\n   */\n  updateValue?: \"blur\" | \"change\";\n\n  /**\n   * This option is used to update the `number` value and text field value to be\n   * within the `min` and `max` range or just format the text field value when\n   * the input is blurred. This update will only be applied if the text field\n   * contains a valid number. Using `min = 0` and `max = 10`:\n   *\n   * | text value | updated value |\n   * | ---------- | ------------- |\n   * | 000001     | 1             |\n   * | -1         | 0             |\n   * | 20         | 10            |\n   * | -12        | 0             |\n   * | --1        | --1           |\n   * | fjdka      | fjdka         |\n   *\n   *\n   * Set this to `false` if no changed should be applied and force the user to\n   * fix any min/max errors manually and maintain weird formatting.\n   *\n   * @defaultValue `true`\n   * @since 6.0.0 This was renamed from `fixOnBlur` and removed the\n   * `\"min\"` and `\"max\"` behavior.\n   */\n  updateValueOnBlur?: boolean;\n}\n\n/** @since 6.0.0 */\nexport interface NumberFieldHookState extends Omit<\n  TextFieldHookState,\n  \"value\"\n> {\n  value: number | undefined;\n}\n\n/** @since 2.5.6 */\nexport interface ProvidedNumberFieldProps\n  extends ProvidedTextFieldProps, NumberFieldConstraints {\n  type: \"number\";\n}\n\n/** @since 2.5.6 */\nexport interface ProvidedNumberFieldMessageProps\n  extends ProvidedTextFieldMessageProps, NumberFieldConstraints {\n  type: \"number\";\n}\n\n/** @since 6.0.0 */\nexport interface NumberFieldImplementation extends Omit<\n  TextFieldImplementation,\n  \"value\" | \"setState\"\n> {\n  value: number | undefined;\n  setState: UseStateSetter<NumberFieldHookState>;\n  fieldProps: ProvidedNumberFieldProps;\n}\n\n/** @since 6.0.0 */\nexport interface NumberFieldWithMessageImplementation extends NumberFieldImplementation {\n  fieldProps: ProvidedNumberFieldMessageProps;\n}\n\n/** @since 6.0.0 */\nexport interface ValidatedNumberFieldImplementation extends Omit<\n  ValidatedTextFieldImplementation,\n  \"value\" | \"setState\"\n> {\n  value: number | undefined;\n  setState: UseStateSetter<NumberFieldHookState>;\n  fieldProps: ProvidedNumberFieldProps | ProvidedNumberFieldMessageProps;\n}\n\n/**\n * @example Enforce Number Value and No Error Messages\n * ```tsx\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { useNumberField } from \"@react-md/core/form/useNumberField\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps, value } = useNumberField({\n *     min: 0,\n *     max: 100,\n *     name: \"someName\",\n *     defaultValue: 0,\n *     disableMessage: true,\n *   });\n *\n *   // this is safe since `value` will always be a number even if there is a\n *   // validation error. since the min and max options were provided as well,\n *   // number will be between that range as well.\n *   const computed = value * 10;\n *\n *   return <TextField {...fieldProps} label=\"Label\" />;\n * }\n * ```\n *\n * @see {@link useTextField}\n * @see {@link useNumberField} overrides for other examples.\n * ```\n */\nexport function useNumberField(\n  options: NumberFieldHookOptions & {\n    disableMessage: true;\n    defaultValue: UseStateInitializer<number>;\n  }\n): NumberFieldImplementation & {\n  value: number;\n  setState: UseStateSetter<NumberFieldHookState & { value: number }>;\n};\n\n/**\n * @example No Error Messages\n * ```tsx\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { useNumberField } from \"@react-md/core/form/useNumberField\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps, value } = useNumberField({\n *     min: 0,\n *     max: 100,\n *     name: \"someName\",\n *     disableMessage: true,\n *   });\n *\n *   // `value` will be `undefined` until the user enters a valid value once\n *   // there is a valid value, `value` will be a `number`. So this might cause\n *   // `computed` to be `NaN | number`\n *   //\n *   // const computed = value * 10;\n *\n *   return <TextField {...fieldProps} label=\"Label\" />;\n * }\n * ```\n *\n * @see {@link useTextField}\n * @see {@link useNumberField} overrides for other examples.\n */\nexport function useNumberField(\n  options: NumberFieldHookOptions & { disableMessage: true }\n): NumberFieldImplementation;\n\n/**\n * @example Enforce Number Value\n * ```tsx\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { useNumberField } from \"@react-md/core/form/useNumberField\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps, value } = useNumberField({\n *     min: 0,\n *     max: 100,\n *     name: \"someName\",\n *     defaultValue: 0,\n *   });\n *\n *   // this is safe since `value` will always be a number even if there is a\n *   // validation error. since the min and max options were provided as well,\n *   // number will be between that range as well.\n *   const computed = value * 10;\n *\n *   return <TextField {...fieldProps} label=\"Label\" />;\n * }\n * ```\n *\n * @example Enforce Number Value and Deferring Updates\n * ```tsx\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { useNumberField } from \"@react-md/core/form/useNumberField\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps, value } = useNumberField({\n *     min: 0,\n *     max: 100,\n *     name: \"someName\",\n *     defaultValue: 0,\n *     updateValue: \"blur\",\n *   });\n *\n *   // the `value` will only be updated whenever the `TextField` is blurred.\n *   // This is helpful if the `value` is used in expensive computations or\n *   // updates that do not need to be updated as the user types\n *   const computed = value * 10;\n *\n *   return <TextField {...fieldProps} label=\"Label\" />;\n * }\n * ```\n *\n * @see {@link useTextField}\n * @see {@link useNumberField} overrides for other examples.\n */\nexport function useNumberField(\n  options: NumberFieldHookOptions & {\n    defaultValue: UseStateInitializer<number>;\n  }\n): NumberFieldWithMessageImplementation & {\n  value: number;\n  setState: UseStateSetter<NumberFieldHookState & { value: number }>;\n};\n\n/**\n * The `useNumberField` hook is used to control the state of a `TextField` or\n * `<input type=\"number\">`\n *\n * @example Default Implementation\n * ```tsx\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { useNumberField } from \"@react-md/core/form/useNumberField\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps, value } = useNumberField({\n *     name: \"someName\",\n *   });\n *\n *   // `value` will be `undefined` until the user enters a valid value once\n *   // there is a valid value, `value` will be a `number`. So this might cause\n *   // `computed` to be `NaN | number`\n *   //\n *   // const computed = value * 10;\n *\n *   // whenever there is an error, an error message will be displayed below the\n *   // `TextField`\n *   return <TextField {...fieldProps} label=\"Label\" />;\n * }\n * ```\n *\n * @example Adding Constraints\n * ```tsx\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { useNumberField } from \"@react-md/core/form/useNumberField\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps, value } = useNumberField({\n *     name: \"someName\",\n *     min: 0,\n *     max: 100,\n *     step: 2,\n *     required: true,\n *   });\n *\n *   return <TextField {...fieldProps} label=\"Label\" />;\n * }\n * ```\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation\n * @see {@link https://react-md.dev/components/text-field#number | Number TextField Demos}\n * @see {@link https://react-md.dev/hooks/use-number-field | useNumberField Demos}\n * @see {@link useTextField}\n */\nexport function useNumberField(\n  options: NumberFieldHookOptions\n): NumberFieldWithMessageImplementation;\n\n/**\n * @internal\n * @see {@link https://react-md.dev/components/text-field#number | Number TextField Demos}\n * @see {@link https://react-md.dev/hooks/use-number-field | useNumberField Demos}\n * @see {@link useTextField}\n * @see {@link useNumberField} overrides for other examples.\n */\nexport function useNumberField(\n  options: NumberFieldHookOptions\n): ValidatedNumberFieldImplementation {\n  const {\n    min,\n    max,\n    step,\n    form,\n    onBlur = noop,\n    onChange = noop,\n    updateValue = \"change\",\n    updateValueOnBlur = true,\n    disableReset,\n    defaultValue,\n    ...textOptions\n  } = options;\n\n  const [number, setNumber] = useState(defaultValue);\n  const initial = useRef(number);\n  const {\n    value: _value,\n    reset: resetTextField,\n    fieldRef,\n    fieldProps,\n    setState: setTextFieldState,\n    ...remaining\n  } = useTextField({\n    ...textOptions,\n    isNumber: true,\n    defaultValue: `${number ?? \"\"}`,\n    disableReset: true,\n    onBlur(event) {\n      onBlur(event);\n      if (event.isPropagationStopped()) {\n        return;\n      }\n\n      const input = event.currentTarget;\n      input.setCustomValidity(\"\");\n      input.checkValidity();\n      if (\n        !updateValueOnBlur ||\n        // do nothing else since it's a weird value like: `\"--0\"` which causes\n        // the value to be `\"\"` and `numberAsValue` to be `NaN`\n        input.validity.badInput\n      ) {\n        return;\n      }\n\n      let value = input.valueAsNumber;\n      if (input.value === \"\" && typeof initial.current === \"number\") {\n        value = min ?? initial.current;\n      }\n\n      // can't have both rangeUnderflow and rangeOverflow at the same time, so\n      // it's \"safe\" to always provide both\n      value = withinRange({ min, max, value });\n      if (!Number.isNaN(value)) {\n        setNumber(value);\n        input.value = `${value}`;\n      } else if (initial.current === undefined) {\n        setNumber(undefined);\n      }\n    },\n    onChange(event) {\n      onChange(event);\n      if (event.isPropagationStopped() || updateValue === \"blur\") {\n        return;\n      }\n\n      const input = event.currentTarget;\n      input.checkValidity();\n      const value = withinRange({\n        min,\n        max,\n        value: event.currentTarget.valueAsNumber,\n      });\n      if (\n        !input.validity.valid &&\n        !input.validity.rangeUnderflow &&\n        !input.validity.rangeOverflow\n      ) {\n        return;\n      }\n\n      if (!Number.isNaN(value)) {\n        setNumber(value);\n      } else if (initial.current === undefined) {\n        setNumber(undefined);\n      }\n    },\n  });\n\n  const { error, errorMessage } = remaining;\n  const prevState = useRef({\n    error,\n    errorMessage,\n    value: number,\n  } satisfies NumberFieldHookState);\n  useIsomorphicLayoutEffect(() => {\n    prevState.current = {\n      error,\n      errorMessage,\n      value: number,\n    };\n  });\n  const reset = useCallback(() => {\n    resetTextField();\n    setNumber(initial.current);\n  }, [resetTextField]);\n  const setState = useCallback<UseStateSetter<NumberFieldHookState>>(\n    (nextState) => {\n      const resolvedNextState =\n        typeof nextState === \"function\"\n          ? nextState(prevState.current)\n          : nextState;\n\n      const { value, error, errorMessage } = resolvedNextState;\n      setNumber(value);\n      setTextFieldState({\n        value: `${value ?? \"\"}`,\n        error,\n        errorMessage,\n      });\n    },\n    [setTextFieldState]\n  );\n\n  useFormReset({\n    form,\n    elementRef: fieldRef,\n    onReset: disableReset ? undefined : reset,\n  });\n\n  return {\n    ...remaining,\n    reset,\n    value: number,\n    setState,\n    fieldRef,\n    fieldProps: {\n      ...fieldProps,\n      min,\n      max,\n      step,\n      type: \"number\",\n    },\n  };\n}\n"],"names":["useCallback","useRef","useState","useIsomorphicLayoutEffect","withinRange","useFormReset","useTextField","noop","useNumberField","options","min","max","step","form","onBlur","onChange","updateValue","updateValueOnBlur","disableReset","defaultValue","textOptions","number","setNumber","initial","value","_value","reset","resetTextField","fieldRef","fieldProps","setState","setTextFieldState","remaining","isNumber","event","isPropagationStopped","input","currentTarget","setCustomValidity","checkValidity","validity","badInput","valueAsNumber","current","Number","isNaN","undefined","valid","rangeUnderflow","rangeOverflow","error","errorMessage","prevState","nextState","resolvedNextState","elementRef","onReset","type"],"mappings":"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"}

package/dist/form/useResizingTextArea.js

@@ -45,18 +45,18 @@ const noop = ()=>{
         /* c8 ignore start */ if (!mask || !container) {
             return;
         }
-        /* c8 ignore stop */ const containerStyles = window.getComputedStyle(container);
+        /* c8 ignore stop */ const containerStyles = globalThis.getComputedStyle(container);
         const isBorderBox = containerStyles.boxSizing === "border-box";
         let borderHeight = 0;
         if (isBorderBox) {
-            borderHeight = parseFloat(containerStyles.borderTopWidth) + parseFloat(containerStyles.borderBottomWidth);
+            borderHeight = Number.parseFloat(containerStyles.borderTopWidth) + Number.parseFloat(containerStyles.borderBottomWidth);
         }
         let nextHeight = mask.scrollHeight + borderHeight;
         if (maxRows > 0) {
             nextHeight -= borderHeight;
-            const maskStyles = window.getComputedStyle(mask);
+            const maskStyles = globalThis.getComputedStyle(mask);
             // in tests, this is `"normal"` by default instead of a number
-            let lineHeight = parseFloat(maskStyles.lineHeight);
+            let lineHeight = Number.parseFloat(maskStyles.lineHeight);
             if (Number.isNaN(lineHeight)) {
                 lineHeight = DEFAULT_LINE_HEIGHT;
             }

package/dist/form/useResizingTextArea.js.map

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

package/dist/form/useSelectCombobox.js

@@ -28,7 +28,7 @@ import { useCombobox } from "./useCombobox.js";
             if (focusLast && !value) {
                 return values.length - 1;
             }
-            return Math.max(0, values.findIndex((option)=>option === value));
+            return Math.max(0, values.indexOf(value));
         }
     });
 }

package/dist/form/useSelectCombobox.js.map

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

package/dist/form/validation.js

@@ -69,7 +69,7 @@
     const keys = typeof validate === "string" ? [
         validate
     ] : validate;
-    return keys.length && VALIDITY_STATE_KEYS.some((key)=>validity[key] && keys.includes(key)) ? validationMessage : "";
+    return keys.length > 0 && VALIDITY_STATE_KEYS.some((key)=>validity[key] && keys.includes(key)) ? validationMessage : "";
 };
 /**
  * The default implementation for checking if a `TextField` or `TextArea` is

package/dist/form/validation.js.map

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

package/dist/hoverMode/useHoverMode.js

@@ -5,14 +5,14 @@ export function useHoverMode(options) {
     const state = useState(defaultVisible);
     let visible;
     let setVisible;
-    if (typeof propSetVisible !== "undefined") {
+    if (propSetVisible !== undefined) {
         setVisible = propSetVisible;
     } else {
         [visible, setVisible] = state;
     }
     const visibilityTimeout = useRef();
     const clearVisibilityTimeout = useCallback(()=>{
-        window.clearTimeout(visibilityTimeout.current);
+        globalThis.clearTimeout(visibilityTimeout.current);
     }, []);
     // if the element is near the viewport edge, the mouseleave event might not
     // trigger correctly. for these cases, just clear any timeouts to be safe.
@@ -23,7 +23,7 @@ export function useHoverMode(options) {
             return;
         }
         const handler = ()=>{
-            window.clearTimeout(visibilityTimeout.current);
+            globalThis.clearTimeout(visibilityTimeout.current);
             // might need to play with this more or make it configurable. if the mouse
             // leaves the window, you're _normally_ not interacting with the app
             // anymore and state should reset.
@@ -39,7 +39,7 @@ export function useHoverMode(options) {
     ]);
     useEffect(()=>{
         return ()=>{
-            window.clearTimeout(visibilityTimeout.current);
+            globalThis.clearTimeout(visibilityTimeout.current);
         };
     }, []);
     return {
@@ -47,18 +47,18 @@ export function useHoverMode(options) {
         setVisible: setVisible === propSetVisible ? undefined : setVisible,
         startShowFlow: useCallback((eventOrId)=>{
             const hoverTimeout = hoverTime ?? hoverTimeoutRef.current;
-            if (disabled || typeof hoverTimeout === "undefined") {
+            if (disabled || hoverTimeout === undefined) {
                 return;
             }
             let id;
-            if (typeof eventOrId === "string" || typeof eventOrId === "undefined") {
+            if (typeof eventOrId === "string" || eventOrId === undefined) {
                 id = eventOrId || "";
             } else {
                 id = eventOrId.currentTarget.id;
             }
             clearDisableTimer();
             clearVisibilityTimeout();
-            visibilityTimeout.current = window.setTimeout(()=>{
+            visibilityTimeout.current = globalThis.setTimeout(()=>{
                 enableHoverMode(id);
                 setVisible(true);
             }, hoverTimeout);
@@ -77,7 +77,7 @@ export function useHoverMode(options) {
             }
             startDisableTimer();
             clearVisibilityTimeout();
-            visibilityTimeout.current = window.setTimeout(()=>{
+            visibilityTimeout.current = globalThis.setTimeout(()=>{
                 setVisible(false);
             }, leaveTime ?? leaveTimeoutRef.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 (typeof propSetVisible !== \"undefined\") {\n    setVisible = propSetVisible;\n  } else {\n    [visible, setVisible] = state;\n  }\n\n  const visibilityTimeout = useRef<number | undefined>();\n  const clearVisibilityTimeout = useCallback(() => {\n    window.clearTimeout(visibilityTimeout.current);\n  }, []);\n\n  // if the element is near the viewport edge, the mouseleave event might not\n  // trigger correctly. for these cases, just clear any timeouts to be safe.\n  // do not hide the visibility so that you can still inspect things in the\n  // devtools\n  useEffect(() => {\n    if (disabled) {\n      return;\n    }\n\n    const handler = (): void => {\n      window.clearTimeout(visibilityTimeout.current);\n\n      // might need to play with this more or make it configurable. if the mouse\n      // leaves the window, you're _normally_ not interacting with the app\n      // anymore and state should reset.\n      disableHoverMode();\n    };\n\n    document.addEventListener(\"mouseleave\", handler);\n    return () => {\n      document.removeEventListener(\"mouseleave\", handler);\n    };\n  }, [disableHoverMode, disabled]);\n\n  useEffect(() => {\n    return () => {\n      window.clearTimeout(visibilityTimeout.current);\n    };\n  }, []);\n\n  return {\n    visible,\n    setVisible: setVisible === propSetVisible ? undefined : setVisible,\n    startShowFlow: useCallback(\n      (eventOrId) => {\n        const hoverTimeout = hoverTime ?? hoverTimeoutRef.current;\n        if (disabled || typeof hoverTimeout === \"undefined\") {\n          return;\n        }\n\n        let id: string;\n        if (typeof eventOrId === \"string\" || typeof eventOrId === \"undefined\") {\n          id = eventOrId || \"\";\n        } else {\n          id = eventOrId.currentTarget.id;\n        }\n\n        clearDisableTimer();\n        clearVisibilityTimeout();\n        visibilityTimeout.current = window.setTimeout(() => {\n          enableHoverMode(id);\n          setVisible(true);\n        }, hoverTimeout);\n      },\n      [\n        clearDisableTimer,\n        clearVisibilityTimeout,\n        disabled,\n        enableHoverMode,\n        hoverTime,\n        hoverTimeoutRef,\n        setVisible,\n      ]\n    ),\n    startHideFlow: useCallback(() => {\n      if (disabled) {\n        return;\n      }\n\n      startDisableTimer();\n      clearVisibilityTimeout();\n      visibilityTimeout.current = window.setTimeout(() => {\n        setVisible(false);\n      }, leaveTime ?? leaveTimeoutRef.current);\n    }, [\n      clearVisibilityTimeout,\n      disabled,\n      leaveTime,\n      leaveTimeoutRef,\n      setVisible,\n      startDisableTimer,\n    ]),\n    clearVisibilityTimeout,\n  };\n}\n"],"names":["useCallback","useEffect","useRef","useState","useHoverMode","options","disabled","hoverTimeout","hoverTime","hoverTimeoutRef","leaveTimeout","leaveTime","leaveTimeoutRef","enableHoverMode","disableHoverMode","startDisableTimer","clearDisableTimer","setVisible","propSetVisible","defaultVisible","state","visible","visibilityTimeout","clearVisibilityTimeout","window","clearTimeout","current","handler","document","addEventListener","removeEventListener","undefined","startShowFlow","eventOrId","id","currentTarget","setTimeout","startHideFlow"],"mappings":"AAAA;AAEA,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,IAAI,OAAOC,mBAAmB,aAAa;QACzCD,aAAaC;IACf,OAAO;QACL,CAACG,SAASJ,WAAW,GAAGG;IAC1B;IAEA,MAAME,oBAAoBpB;IAC1B,MAAMqB,yBAAyBvB,YAAY;QACzCwB,OAAOC,YAAY,CAACH,kBAAkBI,OAAO;IAC/C,GAAG,EAAE;IAEL,2EAA2E;IAC3E,0EAA0E;IAC1E,yEAAyE;IACzE,WAAW;IACXzB,UAAU;QACR,IAAIK,UAAU;YACZ;QACF;QAEA,MAAMqB,UAAU;YACdH,OAAOC,YAAY,CAACH,kBAAkBI,OAAO;YAE7C,0EAA0E;YAC1E,oEAAoE;YACpE,kCAAkC;YAClCZ;QACF;QAEAc,SAASC,gBAAgB,CAAC,cAAcF;QACxC,OAAO;YACLC,SAASE,mBAAmB,CAAC,cAAcH;QAC7C;IACF,GAAG;QAACb;QAAkBR;KAAS;IAE/BL,UAAU;QACR,OAAO;YACLuB,OAAOC,YAAY,CAACH,kBAAkBI,OAAO;QAC/C;IACF,GAAG,EAAE;IAEL,OAAO;QACLL;QACAJ,YAAYA,eAAeC,iBAAiBa,YAAYd;QACxDe,eAAehC,YACb,CAACiC;YACC,MAAM1B,eAAeC,aAAaC,gBAAgBiB,OAAO;YACzD,IAAIpB,YAAY,OAAOC,iBAAiB,aAAa;gBACnD;YACF;YAEA,IAAI2B;YACJ,IAAI,OAAOD,cAAc,YAAY,OAAOA,cAAc,aAAa;gBACrEC,KAAKD,aAAa;YACpB,OAAO;gBACLC,KAAKD,UAAUE,aAAa,CAACD,EAAE;YACjC;YAEAlB;YACAO;YACAD,kBAAkBI,OAAO,GAAGF,OAAOY,UAAU,CAAC;gBAC5CvB,gBAAgBqB;gBAChBjB,WAAW;YACb,GAAGV;QACL,GACA;YACES;YACAO;YACAjB;YACAO;YACAL;YACAC;YACAQ;SACD;QAEHoB,eAAerC,YAAY;YACzB,IAAIM,UAAU;gBACZ;YACF;YAEAS;YACAQ;YACAD,kBAAkBI,OAAO,GAAGF,OAAOY,UAAU,CAAC;gBAC5CnB,WAAW;YACb,GAAGN,aAAaC,gBAAgBc,OAAO;QACzC,GAAG;YACDH;YACAjB;YACAK;YACAC;YACAK;YACAF;SACD;QACDQ;IACF;AACF"}
+{"version":3,"sources":["../../src/hoverMode/useHoverMode.ts"],"sourcesContent":["\"use client\";\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"}

package/dist/hoverMode/useHoverModeProvider.js

@@ -96,7 +96,7 @@ const noop = ()=>{
     const animatedOnceRef = useRef(!!defaultActiveId);
     const disableHoverModeTimeout = useRef();
     const clearDisableTimer = useCallback(()=>{
-        window.clearTimeout(disableHoverModeTimeout.current);
+        globalThis.clearTimeout(disableHoverModeTimeout.current);
     }, []);
     const enableHoverMode = useCallback((activeId)=>{
         clearDisableTimer();
@@ -127,7 +127,7 @@ const noop = ()=>{
             return;
         }
         clearDisableTimer();
-        disableHoverModeTimeout.current = window.setTimeout(()=>{
+        disableHoverModeTimeout.current = globalThis.setTimeout(()=>{
             disableHoverMode();
         }, disableTimeout);
     }, [
@@ -138,7 +138,7 @@ const noop = ()=>{
     useEffect(()=>{
         hoverTimeoutRef.current = hoverTimeout;
         return ()=>{
-            window.clearTimeout(disableHoverModeTimeout.current);
+            globalThis.clearTimeout(disableHoverModeTimeout.current);
         };
     }, [
         hoverTimeout