@react-md/core 1.0.0-next.16 → 1.0.0-next.18

package/dist/form/useCombobox.js

@@ -1,11 +1,11 @@
 "use client";
-import { useRef } from "react";
+import { useCallback, useRef } from "react";
 import { useKeyboardMovementProvider } from "../movement/useKeyboardMovementProvider.js";
 import { BELOW_CENTER_ANCHOR } from "../positioning/constants.js";
 import { TRANSITION_CONFIG } from "../transition/config.js";
 import { useEnsuredId } from "../useEnsuredId.js";
 import { useEnsuredRef } from "../useEnsuredRef.js";
-import { useToggle } from "../useToggle.js";
+import { useEnsuredState } from "../useEnsuredState.js";
 import { tryToSubmitRelatedForm } from "./utils.js";
 const noop = ()=>{
 // do nothing
@@ -18,8 +18,22 @@ const noop = ()=>{
 /**
  * @since 6.0.0
  */ export function useCombobox(options) {
-    const { form, popup = "listbox", onClick = noop, onFocus, onKeyDown, searchable, isNegativeOneAllowed, loopable, disabled, comboboxId: propComboboxId, comboboxRef: propComboboxRef, popupId: propPopupId, popupRef: propPopupRef, defaultVisible = false, onFocusChange = noop, extendKeyDown = noop, getFocusableElements = getNonDisabledOptions, getEnterDefaultFocusedIndex, getDefaultFocusedIndex } = options;
-    const { toggled: visible, enable: show, disable: hide, setToggled: setVisible } = useToggle(defaultVisible);
+    const { form, popup = "listbox", onClick = noop, onFocus, onKeyDown, searchable, multiselect, isNegativeOneAllowed, loopable, disabled, visible: propVisible, setVisible: propSetVisible, defaultVisible = false, comboboxId: propComboboxId, comboboxRef: propComboboxRef, popupId: propPopupId, popupRef: propPopupRef, onFocusChange = noop, extendKeyDown = noop, getFocusableElements = getNonDisabledOptions, getEnterDefaultFocusedIndex, getDefaultFocusedIndex } = options;
+    const [visible, setVisible] = useEnsuredState({
+        value: propVisible,
+        setValue: propSetVisible,
+        defaultValue: defaultVisible
+    });
+    const show = useCallback(()=>{
+        setVisible(true);
+    }, [
+        setVisible
+    ]);
+    const hide = useCallback(()=>{
+        setVisible(false);
+    }, [
+        setVisible
+    ]);
     const popupId = useEnsuredId(propPopupId, "combobox-popup");
     const comboboxId = useEnsuredId(propComboboxId, "combobox");
     const [comboboxRef, comboboxRefCallback] = useEnsuredRef(propComboboxRef);
@@ -151,6 +165,7 @@ const noop = ()=>{
         };
     };
     const popupProps = {
+        "aria-multiselectable": multiselect || undefined,
         id: popupId,
         ref: popupRefCallback,
         role: popup

package/dist/form/useCombobox.js.map

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

package/dist/form/useEditableCombobox.d.ts

@@ -1,15 +1,35 @@
-import { type BaseComboboxOptions, type ComboboxImplementation } from "./useCombobox.js";
+import { type ComboboxImplementation, type ComboboxWidgetProps, type ConfigurableComboboxOptions } from "./useCombobox.js";
+import { type EditableHTMLElement } from "./utils.js";
 /**
  * @since 6.0.0
  */
-export interface EditableComboboxOptions<ComboboxEl extends HTMLElement = HTMLInputElement, PopupEl extends HTMLElement = HTMLElement> extends BaseComboboxOptions<ComboboxEl, PopupEl> {
+export type EditableComboboxOptions<ComboboxEl extends HTMLElement = HTMLInputElement, PopupEl extends HTMLElement = HTMLElement> = ConfigurableComboboxOptions<ComboboxEl, PopupEl>;
+/**
+ * @since 6.0.0
+ */
+export interface EditableComboboxWidgetProps<ComboboxEl extends EditableHTMLElement = HTMLInputElement> extends ComboboxWidgetProps<ComboboxEl> {
+    /**
+     * This is set to `off` to prevent browser from providing their own
+     * suggestions.
+     *
+     * @defaultValue `"off"`
+     */
+    autoComplete: string;
+    /**
+     * This is set to `"none"` to prevent browsers from automatically capitalizing
+     * the first letter.
+     *
+     * @defaultValue `"none"`
+     */
+    autoCapitalize: string;
 }
 /**
  * @since 6.0.0
  */
-export interface EditableComboboxImplementation<ComboboxEl extends HTMLElement = HTMLInputElement, PopupEl extends HTMLElement = HTMLElement> extends ComboboxImplementation<ComboboxEl, PopupEl> {
+export interface EditableComboboxImplementation<ComboboxEl extends EditableHTMLElement = HTMLInputElement, PopupEl extends HTMLElement = HTMLElement> extends ComboboxImplementation<ComboboxEl, PopupEl> {
+    comboboxProps: EditableComboboxWidgetProps<ComboboxEl>;
 }
 /**
  * @since 6.0.0
  */
-export declare function useEditableCombobox<ComboboxEl extends HTMLElement = HTMLInputElement, PopupEl extends HTMLElement = HTMLElement>(options?: EditableComboboxOptions<ComboboxEl, PopupEl>): EditableComboboxImplementation<ComboboxEl, PopupEl>;
+export declare function useEditableCombobox<ComboboxEl extends EditableHTMLElement = HTMLInputElement, PopupEl extends HTMLElement = HTMLElement>(options?: EditableComboboxOptions<ComboboxEl, PopupEl>): EditableComboboxImplementation<ComboboxEl, PopupEl>;

package/dist/form/useEditableCombobox.js

@@ -89,6 +89,11 @@ import { isChangeableHTMLElement, triggerManualChangeEvent } from "./utils.js";
     });
     return {
         ...combobox,
+        comboboxProps: {
+            ...combobox.comboboxProps,
+            autoCapitalize: "none",
+            autoComplete: "off"
+        },
         getMenuProps (props) {
             return {
                 // override the inherited renderAsSheet context since the sheet makes it

package/dist/form/useEditableCombobox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/useEditableCombobox.ts"],"sourcesContent":["\"use client\";\nimport { useRef } from \"react\";\nimport { isTypeEvent } from \"../movement/utils.js\";\nimport {\n  useCombobox,\n  type BaseComboboxOptions,\n  type ComboboxImplementation,\n} from \"./useCombobox.js\";\nimport { isChangeableHTMLElement, triggerManualChangeEvent } from \"./utils.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface EditableComboboxOptions<\n  ComboboxEl extends HTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends BaseComboboxOptions<ComboboxEl, PopupEl> {}\n\n/**\n * @since 6.0.0\n */\nexport interface EditableComboboxImplementation<\n  ComboboxEl extends HTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends ComboboxImplementation<ComboboxEl, PopupEl> {}\n\n/**\n * @since 6.0.0\n */\nexport function useEditableCombobox<\n  ComboboxEl extends HTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n>(\n  options: EditableComboboxOptions<ComboboxEl, PopupEl> = {}\n): EditableComboboxImplementation<ComboboxEl, PopupEl> {\n  const focusFirst = useRef(false);\n  const { getMenuProps, ...combobox } = useCombobox({\n    ...options,\n    loopable: true,\n    searchable: false,\n    isNegativeOneAllowed: true,\n    getEnterDefaultFocusedIndex(options) {\n      const { focusLast, focusables, currentFocusIndex } = options;\n      if (focusFirst.current) {\n        focusFirst.current = false;\n        return 0;\n      }\n\n      if (focusLast) {\n        return focusables.length - 1;\n      }\n\n      return currentFocusIndex;\n    },\n    extendKeyDown(movementData) {\n      const {\n        event,\n        show,\n        hide,\n        visible,\n        currentFocusIndex,\n        setActiveDescendantId,\n      } = movementData;\n\n      const resetFocus = (): void => {\n        currentFocusIndex.current = -1;\n        setActiveDescendantId(\"\");\n      };\n\n      switch (event.key) {\n        case \"Escape\":\n          if (!visible && isChangeableHTMLElement(event.currentTarget)) {\n            event.preventDefault();\n            event.stopPropagation();\n            triggerManualChangeEvent(event.currentTarget, \"\");\n          }\n          break;\n        case \"Home\":\n        case \"End\":\n          // do not attempt to jump to the start or end of the listbox so\n          // natural text editing occurs\n          event.stopPropagation();\n          if (visible) {\n            resetFocus();\n          }\n          break;\n        case \"ArrowLeft\":\n        case \"ArrowRight\":\n          if (visible) {\n            resetFocus();\n          }\n          break;\n        case \"ArrowUp\":\n          // Note: The non-altKey version is handled in the `useCombobox` hook\n          //\n          // if the popup is available and the altKey was pressed, return focus\n          // to the combobox without closing. If the focus was already on the\n          // combobox, hide the popup\n          if (visible && event.altKey) {\n            event.preventDefault();\n            event.stopPropagation();\n\n            if (currentFocusIndex.current !== -1) {\n              resetFocus();\n            } else {\n              hide();\n            }\n          }\n          break;\n        case \"ArrowDown\":\n          // if the popup is available, display the popup keep the focus on the\n          // combobox if the altKey was pressed. Otherwise, move focus into the\n          // listbox\n          if (!visible) {\n            event.preventDefault();\n            event.stopPropagation();\n            focusFirst.current = !event.altKey;\n            show();\n          }\n          break;\n        default:\n          if (isTypeEvent(event)) {\n            show();\n            resetFocus();\n          }\n      }\n    },\n  });\n\n  return {\n    ...combobox,\n    getMenuProps(props) {\n      return {\n        // override the inherited renderAsSheet context since the sheet makes it\n        // so the user can't actually type in the combobox\n        renderAsSheet: false,\n        preventOverlap: true,\n        ...getMenuProps(props),\n      };\n    },\n  };\n}\n"],"names":["useRef","isTypeEvent","useCombobox","isChangeableHTMLElement","triggerManualChangeEvent","useEditableCombobox","options","focusFirst","getMenuProps","combobox","loopable","searchable","isNegativeOneAllowed","getEnterDefaultFocusedIndex","focusLast","focusables","currentFocusIndex","current","length","extendKeyDown","movementData","event","show","hide","visible","setActiveDescendantId","resetFocus","key","currentTarget","preventDefault","stopPropagation","altKey","props","renderAsSheet","preventOverlap"],"mappings":"AAAA;AACA,SAASA,MAAM,QAAQ,QAAQ;AAC/B,SAASC,WAAW,QAAQ,uBAAuB;AACnD,SACEC,WAAW,QAGN,mBAAmB;AAC1B,SAASC,uBAAuB,EAAEC,wBAAwB,QAAQ,aAAa;AAkB/E;;CAEC,GACD,OAAO,SAASC,oBAIdC,UAAwD,CAAC,CAAC;IAE1D,MAAMC,aAAaP,OAAO;IAC1B,MAAM,EAAEQ,YAAY,EAAE,GAAGC,UAAU,GAAGP,YAAY;QAChD,GAAGI,OAAO;QACVI,UAAU;QACVC,YAAY;QACZC,sBAAsB;QACtBC,6BAA4BP,OAAO;YACjC,MAAM,EAAEQ,SAAS,EAAEC,UAAU,EAAEC,iBAAiB,EAAE,GAAGV;YACrD,IAAIC,WAAWU,OAAO,EAAE;gBACtBV,WAAWU,OAAO,GAAG;gBACrB,OAAO;YACT;YAEA,IAAIH,WAAW;gBACb,OAAOC,WAAWG,MAAM,GAAG;YAC7B;YAEA,OAAOF;QACT;QACAG,eAAcC,YAAY;YACxB,MAAM,EACJC,KAAK,EACLC,IAAI,EACJC,IAAI,EACJC,OAAO,EACPR,iBAAiB,EACjBS,qBAAqB,EACtB,GAAGL;YAEJ,MAAMM,aAAa;gBACjBV,kBAAkBC,OAAO,GAAG,CAAC;gBAC7BQ,sBAAsB;YACxB;YAEA,OAAQJ,MAAMM,GAAG;gBACf,KAAK;oBACH,IAAI,CAACH,WAAWrB,wBAAwBkB,MAAMO,aAAa,GAAG;wBAC5DP,MAAMQ,cAAc;wBACpBR,MAAMS,eAAe;wBACrB1B,yBAAyBiB,MAAMO,aAAa,EAAE;oBAChD;oBACA;gBACF,KAAK;gBACL,KAAK;oBACH,+DAA+D;oBAC/D,8BAA8B;oBAC9BP,MAAMS,eAAe;oBACrB,IAAIN,SAAS;wBACXE;oBACF;oBACA;gBACF,KAAK;gBACL,KAAK;oBACH,IAAIF,SAAS;wBACXE;oBACF;oBACA;gBACF,KAAK;oBACH,oEAAoE;oBACpE,EAAE;oBACF,qEAAqE;oBACrE,mEAAmE;oBACnE,2BAA2B;oBAC3B,IAAIF,WAAWH,MAAMU,MAAM,EAAE;wBAC3BV,MAAMQ,cAAc;wBACpBR,MAAMS,eAAe;wBAErB,IAAId,kBAAkBC,OAAO,KAAK,CAAC,GAAG;4BACpCS;wBACF,OAAO;4BACLH;wBACF;oBACF;oBACA;gBACF,KAAK;oBACH,qEAAqE;oBACrE,qEAAqE;oBACrE,UAAU;oBACV,IAAI,CAACC,SAAS;wBACZH,MAAMQ,cAAc;wBACpBR,MAAMS,eAAe;wBACrBvB,WAAWU,OAAO,GAAG,CAACI,MAAMU,MAAM;wBAClCT;oBACF;oBACA;gBACF;oBACE,IAAIrB,YAAYoB,QAAQ;wBACtBC;wBACAI;oBACF;YACJ;QACF;IACF;IAEA,OAAO;QACL,GAAGjB,QAAQ;QACXD,cAAawB,KAAK;YAChB,OAAO;gBACL,wEAAwE;gBACxE,kDAAkD;gBAClDC,eAAe;gBACfC,gBAAgB;gBAChB,GAAG1B,aAAawB,MAAM;YACxB;QACF;IACF;AACF"}
+{"version":3,"sources":["../../src/form/useEditableCombobox.ts"],"sourcesContent":["\"use client\";\nimport { useRef } from \"react\";\nimport { isTypeEvent } from \"../movement/utils.js\";\nimport {\n  type ComboboxImplementation,\n  type ComboboxWidgetProps,\n  type ConfigurableComboboxOptions,\n  useCombobox,\n} from \"./useCombobox.js\";\nimport {\n  type EditableHTMLElement,\n  isChangeableHTMLElement,\n  triggerManualChangeEvent,\n} from \"./utils.js\";\n\n/**\n * @since 6.0.0\n */\nexport type EditableComboboxOptions<\n  ComboboxEl extends HTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> = ConfigurableComboboxOptions<ComboboxEl, PopupEl>;\n\n/**\n * @since 6.0.0\n */\nexport interface EditableComboboxWidgetProps<\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n> extends ComboboxWidgetProps<ComboboxEl> {\n  /**\n   * This is set to `off` to prevent browser from providing their own\n   * suggestions.\n   *\n   * @defaultValue `\"off\"`\n   */\n  autoComplete: string;\n\n  /**\n   * This is set to `\"none\"` to prevent browsers from automatically capitalizing\n   * the first letter.\n   *\n   * @defaultValue `\"none\"`\n   */\n  autoCapitalize: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface EditableComboboxImplementation<\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends ComboboxImplementation<ComboboxEl, PopupEl> {\n  comboboxProps: EditableComboboxWidgetProps<ComboboxEl>;\n}\n\n/**\n * @since 6.0.0\n */\nexport function useEditableCombobox<\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n>(\n  options: EditableComboboxOptions<ComboboxEl, PopupEl> = {}\n): EditableComboboxImplementation<ComboboxEl, PopupEl> {\n  const focusFirst = useRef(false);\n  const { getMenuProps, ...combobox } = useCombobox({\n    ...options,\n    loopable: true,\n    searchable: false,\n    isNegativeOneAllowed: true,\n    getEnterDefaultFocusedIndex(options) {\n      const { focusLast, focusables, currentFocusIndex } = options;\n      if (focusFirst.current) {\n        focusFirst.current = false;\n        return 0;\n      }\n\n      if (focusLast) {\n        return focusables.length - 1;\n      }\n\n      return currentFocusIndex;\n    },\n    extendKeyDown(movementData) {\n      const {\n        event,\n        show,\n        hide,\n        visible,\n        currentFocusIndex,\n        setActiveDescendantId,\n      } = movementData;\n\n      const resetFocus = (): void => {\n        currentFocusIndex.current = -1;\n        setActiveDescendantId(\"\");\n      };\n\n      switch (event.key) {\n        case \"Escape\":\n          if (!visible && isChangeableHTMLElement(event.currentTarget)) {\n            event.preventDefault();\n            event.stopPropagation();\n            triggerManualChangeEvent(event.currentTarget, \"\");\n          }\n          break;\n        case \"Home\":\n        case \"End\":\n          // do not attempt to jump to the start or end of the listbox so\n          // natural text editing occurs\n          event.stopPropagation();\n          if (visible) {\n            resetFocus();\n          }\n          break;\n        case \"ArrowLeft\":\n        case \"ArrowRight\":\n          if (visible) {\n            resetFocus();\n          }\n          break;\n        case \"ArrowUp\":\n          // Note: The non-altKey version is handled in the `useCombobox` hook\n          //\n          // if the popup is available and the altKey was pressed, return focus\n          // to the combobox without closing. If the focus was already on the\n          // combobox, hide the popup\n          if (visible && event.altKey) {\n            event.preventDefault();\n            event.stopPropagation();\n\n            if (currentFocusIndex.current !== -1) {\n              resetFocus();\n            } else {\n              hide();\n            }\n          }\n          break;\n        case \"ArrowDown\":\n          // if the popup is available, display the popup keep the focus on the\n          // combobox if the altKey was pressed. Otherwise, move focus into the\n          // listbox\n          if (!visible) {\n            event.preventDefault();\n            event.stopPropagation();\n            focusFirst.current = !event.altKey;\n            show();\n          }\n          break;\n        default:\n          if (isTypeEvent(event)) {\n            show();\n            resetFocus();\n          }\n      }\n    },\n  });\n\n  return {\n    ...combobox,\n    comboboxProps: {\n      ...combobox.comboboxProps,\n      autoCapitalize: \"none\",\n      autoComplete: \"off\",\n    },\n    getMenuProps(props) {\n      return {\n        // override the inherited renderAsSheet context since the sheet makes it\n        // so the user can't actually type in the combobox\n        renderAsSheet: false,\n        preventOverlap: true,\n        ...getMenuProps(props),\n      };\n    },\n  };\n}\n"],"names":["useRef","isTypeEvent","useCombobox","isChangeableHTMLElement","triggerManualChangeEvent","useEditableCombobox","options","focusFirst","getMenuProps","combobox","loopable","searchable","isNegativeOneAllowed","getEnterDefaultFocusedIndex","focusLast","focusables","currentFocusIndex","current","length","extendKeyDown","movementData","event","show","hide","visible","setActiveDescendantId","resetFocus","key","currentTarget","preventDefault","stopPropagation","altKey","comboboxProps","autoCapitalize","autoComplete","props","renderAsSheet","preventOverlap"],"mappings":"AAAA;AACA,SAASA,MAAM,QAAQ,QAAQ;AAC/B,SAASC,WAAW,QAAQ,uBAAuB;AACnD,SAIEC,WAAW,QACN,mBAAmB;AAC1B,SAEEC,uBAAuB,EACvBC,wBAAwB,QACnB,aAAa;AA2CpB;;CAEC,GACD,OAAO,SAASC,oBAIdC,UAAwD,CAAC,CAAC;IAE1D,MAAMC,aAAaP,OAAO;IAC1B,MAAM,EAAEQ,YAAY,EAAE,GAAGC,UAAU,GAAGP,YAAY;QAChD,GAAGI,OAAO;QACVI,UAAU;QACVC,YAAY;QACZC,sBAAsB;QACtBC,6BAA4BP,OAAO;YACjC,MAAM,EAAEQ,SAAS,EAAEC,UAAU,EAAEC,iBAAiB,EAAE,GAAGV;YACrD,IAAIC,WAAWU,OAAO,EAAE;gBACtBV,WAAWU,OAAO,GAAG;gBACrB,OAAO;YACT;YAEA,IAAIH,WAAW;gBACb,OAAOC,WAAWG,MAAM,GAAG;YAC7B;YAEA,OAAOF;QACT;QACAG,eAAcC,YAAY;YACxB,MAAM,EACJC,KAAK,EACLC,IAAI,EACJC,IAAI,EACJC,OAAO,EACPR,iBAAiB,EACjBS,qBAAqB,EACtB,GAAGL;YAEJ,MAAMM,aAAa;gBACjBV,kBAAkBC,OAAO,GAAG,CAAC;gBAC7BQ,sBAAsB;YACxB;YAEA,OAAQJ,MAAMM,GAAG;gBACf,KAAK;oBACH,IAAI,CAACH,WAAWrB,wBAAwBkB,MAAMO,aAAa,GAAG;wBAC5DP,MAAMQ,cAAc;wBACpBR,MAAMS,eAAe;wBACrB1B,yBAAyBiB,MAAMO,aAAa,EAAE;oBAChD;oBACA;gBACF,KAAK;gBACL,KAAK;oBACH,+DAA+D;oBAC/D,8BAA8B;oBAC9BP,MAAMS,eAAe;oBACrB,IAAIN,SAAS;wBACXE;oBACF;oBACA;gBACF,KAAK;gBACL,KAAK;oBACH,IAAIF,SAAS;wBACXE;oBACF;oBACA;gBACF,KAAK;oBACH,oEAAoE;oBACpE,EAAE;oBACF,qEAAqE;oBACrE,mEAAmE;oBACnE,2BAA2B;oBAC3B,IAAIF,WAAWH,MAAMU,MAAM,EAAE;wBAC3BV,MAAMQ,cAAc;wBACpBR,MAAMS,eAAe;wBAErB,IAAId,kBAAkBC,OAAO,KAAK,CAAC,GAAG;4BACpCS;wBACF,OAAO;4BACLH;wBACF;oBACF;oBACA;gBACF,KAAK;oBACH,qEAAqE;oBACrE,qEAAqE;oBACrE,UAAU;oBACV,IAAI,CAACC,SAAS;wBACZH,MAAMQ,cAAc;wBACpBR,MAAMS,eAAe;wBACrBvB,WAAWU,OAAO,GAAG,CAACI,MAAMU,MAAM;wBAClCT;oBACF;oBACA;gBACF;oBACE,IAAIrB,YAAYoB,QAAQ;wBACtBC;wBACAI;oBACF;YACJ;QACF;IACF;IAEA,OAAO;QACL,GAAGjB,QAAQ;QACXuB,eAAe;YACb,GAAGvB,SAASuB,aAAa;YACzBC,gBAAgB;YAChBC,cAAc;QAChB;QACA1B,cAAa2B,KAAK;YAChB,OAAO;gBACL,wEAAwE;gBACxE,kDAAkD;gBAClDC,eAAe;gBACfC,gBAAgB;gBAChB,GAAG7B,aAAa2B,MAAM;YACxB;QACF;IACF;AACF"}

package/dist/form/useNumberField.js.map

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

package/dist/form/useRadioGroup.d.ts

@@ -69,35 +69,35 @@ export interface ProvidedRadioGroupProps<V extends string | number> {
 export type GetRadioGroupProps<V extends string | number> = (value: V) => Readonly<ProvidedRadioGroupProps<V>>;
 /** @since 6.0.0 */
 export interface RadioGroupImplementation<V extends string | number> {
-    reset(): void;
+    reset: () => void;
     value: V;
     setValue: UseStateSetter<V>;
     getRadioProps: GetRadioGroupProps<V>;
 }
 export type GetMenuItemRadioGroupProps<V extends string | number> = (value: V) => Readonly<{
     checked: boolean;
-    onCheckedChange(): void;
+    onCheckedChange: () => void;
 }>;
 /** @since 6.0.0 */
 export interface MenuItemRadioGroupImplementation<V extends string | number> {
-    reset(): void;
+    reset: () => void;
     value: V;
     setValue: UseStateSetter<V>;
     getRadioProps: GetMenuItemRadioGroupProps<V>;
 }
 /** @since 6.0.0 */
 export interface CombinedRadioGroupReturnValue<V extends string | number> {
-    reset(): void;
+    reset: () => void;
     value: V;
     setValue: UseStateSetter<V>;
-    getRadioProps?(value: V): {
+    getRadioProps?: (value: V) => {
         name?: string;
         value?: V;
         checked: boolean;
         error?: boolean;
         required?: boolean;
         onChange?: ChangeEventHandler<HTMLInputElement>;
-        onCheckedChange?(): void;
+        onCheckedChange?: () => void;
         onInvalid?: FormEventHandler<HTMLInputElement>;
     };
 }

package/dist/form/useRadioGroup.js.map

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

package/dist/form/useResizingTextArea.js.map

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

package/dist/form/useSelectCombobox.d.ts

@@ -1,16 +1,15 @@
-import { type BaseComboboxOptions, type ComboboxImplementation } from "./useCombobox.js";
+import { type ComboboxImplementation, type ConfigurableComboboxOptions } from "./useCombobox.js";
 /**
  * @since 6.0.0
  */
-export interface SelectComboboxOptions<ComboboxEl extends HTMLElement = HTMLInputElement, PopupEl extends HTMLElement = HTMLElement> extends BaseComboboxOptions<ComboboxEl, PopupEl> {
+export interface SelectComboboxOptions<ComboboxEl extends HTMLElement = HTMLInputElement, PopupEl extends HTMLElement = HTMLElement> extends ConfigurableComboboxOptions<ComboboxEl, PopupEl> {
     value: string;
     values: readonly string[];
 }
 /**
  * @since 6.0.0
  */
-export interface SelectComboboxImplementation<ComboboxEl extends HTMLElement = HTMLInputElement, PopupEl extends HTMLElement = HTMLElement> extends ComboboxImplementation<ComboboxEl, PopupEl> {
-}
+export type SelectComboboxImplementation<ComboboxEl extends HTMLElement = HTMLInputElement, PopupEl extends HTMLElement = HTMLElement> = ComboboxImplementation<ComboboxEl, PopupEl>;
 /**
  * @since 6.0.0
  */

package/dist/form/useSelectCombobox.js.map

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

package/dist/form/useTextField.d.ts

@@ -239,7 +239,7 @@ export interface TextFieldHookOptions<E extends HTMLInputElement | HTMLTextAreaE
 /** @since 6.0.0 */
 export interface TextFieldImplementation<E extends HTMLInputElement | HTMLTextAreaElement> extends TextFieldHookState {
     fieldRef: RefObject<E>;
-    reset(): void;
+    reset: () => void;
     setState: UseStateSetter<Readonly<TextFieldHookState>>;
     fieldProps: ProvidedTextFieldProps<E>;
 }