@react-md/core 1.0.0-next.2 → 1.0.0-next.20

package/dist/form/useCombobox.js

@@ -0,0 +1,221 @@
+"use client";
+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 { useEnsuredState } from "../useEnsuredState.js";
+import { tryToSubmitRelatedForm } from "./utils.js";
+const noop = ()=>{
+// do nothing
+};
+/**
+ * @since 6.0.0
+ */ export const getNonDisabledOptions = (container)=>[
+        ...container.querySelectorAll('[role="option"]:not([aria-disabled])')
+    ];
+/**
+ * @since 6.0.0
+ */ export function useCombobox(options) {
+    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);
+    const [popupRef, popupRefCallback] = useEnsuredRef(propPopupRef);
+    const focusLast = useRef(false);
+    const { movementProps, movementContext, currentFocusIndex, activeDescendantId, setActiveDescendantId } = useKeyboardMovementProvider({
+        onFocus,
+        onKeyDown,
+        onClick (event) {
+            onClick(event);
+            if (disabled) {
+                return;
+            }
+            show();
+        },
+        extendKeyDown (movementData) {
+            extendKeyDown({
+                ...movementData,
+                show,
+                hide,
+                visible,
+                focusLast
+            });
+            const { event } = movementData;
+            if (event.isPropagationStopped()) {
+                return;
+            }
+            if (visible) {
+                switch(event.key){
+                    case "Tab":
+                    case "Escape":
+                        event.stopPropagation();
+                        hide();
+                        break;
+                    case "Enter":
+                        event.preventDefault();
+                        break;
+                }
+                // while visible, always use the default keyboard movement behavior
+                return;
+            }
+            switch(event.key){
+                case "ArrowUp":
+                case "ArrowDown":
+                    event.preventDefault();
+                    event.stopPropagation();
+                    focusLast.current = event.key === "ArrowUp";
+                    show();
+                    break;
+                case "Enter":
+                    tryToSubmitRelatedForm(event, form);
+                    break;
+            }
+        },
+        disabled,
+        loopable,
+        searchable,
+        onFocusChange,
+        programmatic: true,
+        includeDisabled: false,
+        tabIndexBehavior: "virtual",
+        getFocusableElements (container, programmatic) {
+            const popup = popupRef.current;
+            if (!popup) {
+                return [];
+            }
+            return getFocusableElements(popup || container, programmatic);
+        },
+        isNegativeOneAllowed,
+        getDefaultFocusedIndex
+    });
+    const getTransitionCallbacks = (options = {})=>{
+        const { onEntered, onEntering, onExiting, onExited, disableTransition } = options;
+        const handleEntering = (callback = noop, skipped)=>(appearing)=>{
+                callback(appearing);
+                const popup = popupRef.current;
+                if (!popup || skipped) {
+                    // Chrome does not trigger the scrollIntoView behavior correctly while
+                    // using a scale transition, so need to trigger this on the entered
+                    // flow to really make sure the item is in view.
+                    // An alternative would be to implement a custom scrollIntoView
+                    // behavior again like the previous versions of react-md, but this is
+                    // less lines of code
+                    const activeOption = document.getElementById(activeDescendantId);
+                    if (activeOption) {
+                        activeOption.scrollIntoView({
+                            block: "nearest"
+                        });
+                    }
+                    return;
+                }
+                const focusables = getFocusableElements(popup, true);
+                const index = getEnterDefaultFocusedIndex({
+                    focusLast: focusLast.current,
+                    focusables,
+                    currentFocusIndex: currentFocusIndex.current
+                });
+                focusLast.current = false;
+                currentFocusIndex.current = index;
+                const option = focusables[index];
+                if (!option) {
+                    return;
+                }
+                onFocusChange({
+                    index,
+                    element: option
+                });
+                option.scrollIntoView({
+                    block: "nearest"
+                });
+                setActiveDescendantId(option.id || "");
+            };
+        const handleExiting = (callback = noop, skipped)=>()=>{
+                callback();
+                if (!skipped) {
+                    // since the menu is unmounted or set to hidden while not visible, need
+                    // to clear the aria-activedescendant and current focus index when
+                    // hiding
+                    currentFocusIndex.current = -1;
+                    setActiveDescendantId("");
+                }
+            };
+        const isTransitionCompleteSkipped = !disableTransition && !TRANSITION_CONFIG.disabled;
+        return {
+            onEntering: handleEntering(onEntering, false),
+            onEntered: handleEntering(onEntered, isTransitionCompleteSkipped),
+            onExiting: handleExiting(onExiting, false),
+            onExited: handleExiting(onExited, isTransitionCompleteSkipped)
+        };
+    };
+    const popupProps = {
+        "aria-multiselectable": multiselect || undefined,
+        id: popupId,
+        ref: popupRefCallback,
+        role: popup
+    };
+    return {
+        show,
+        hide,
+        visible,
+        setVisible,
+        focusLast,
+        popupRef,
+        popupProps,
+        comboboxRef,
+        comboboxProps: {
+            ...movementProps,
+            "aria-controls": popupId,
+            "aria-disabled": disabled || undefined,
+            "aria-expanded": visible,
+            "aria-haspopup": popup,
+            id: comboboxId,
+            ref: comboboxRefCallback,
+            role: "combobox"
+        },
+        movementProps,
+        movementContext,
+        currentFocusIndex,
+        activeDescendantId,
+        setActiveDescendantId,
+        getTransitionCallbacks,
+        getMenuProps (props = {}) {
+            const { sheetProps, disableTransition } = props;
+            return {
+                anchor: BELOW_CENTER_ANCHOR,
+                width: "min",
+                fixedTo: comboboxRef,
+                ...props,
+                ...popupProps,
+                visible,
+                onRequestClose: hide,
+                ...getTransitionCallbacks(props),
+                sheetProps: {
+                    ...sheetProps,
+                    ...getTransitionCallbacks({
+                        ...sheetProps,
+                        disableTransition: sheetProps?.disableTransition ?? disableTransition
+                    })
+                }
+            };
+        }
+    };
+}
+
+//# sourceMappingURL=useCombobox.js.map

package/dist/form/useCombobox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/form/useCombobox.ts"],"sourcesContent":["\"use client\";\n\nimport {\n  type FocusEventHandler,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  type InputHTMLAttributes,\n  type KeyboardEventHandler,\n  type MouseEventHandler,\n  type Ref,\n  type RefCallback,\n  type RefObject,\n  useCallback,\n  useRef,\n} from \"react\";\n\nimport { type MenuProps } from \"../menu/Menu.js\";\nimport { type MenuSheetConfigurableProps } from \"../menu/MenuSheet.js\";\nimport {\n  type GetDefaultFocusedIndex,\n  type GetFocusableElements,\n  type KeyboardMovementExtensionData,\n  type KeyboardMovementProviderImplementation,\n  type KeyboardMovementProviderOptions,\n} from \"../movement/types.js\";\nimport { useKeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\nimport { BELOW_CENTER_ANCHOR } from \"../positioning/constants.js\";\nimport {\n  type PositionAnchor,\n  type PositionWidth,\n} from \"../positioning/types.js\";\nimport { 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

@@ -0,0 +1,35 @@
+import { type ComboboxImplementation, type ComboboxWidgetProps, type ConfigurableComboboxOptions } from "./useCombobox.js";
+import { type EditableHTMLElement } from "./utils.js";
+/**
+ * @since 6.0.0
+ */
+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 EditableHTMLElement = HTMLInputElement, PopupEl extends HTMLElement = HTMLElement> extends ComboboxImplementation<ComboboxEl, PopupEl> {
+    comboboxProps: EditableComboboxWidgetProps<ComboboxEl>;
+}
+/**
+ * @since 6.0.0
+ */
+export declare function useEditableCombobox<ComboboxEl extends EditableHTMLElement = HTMLInputElement, PopupEl extends HTMLElement = HTMLElement>(options?: EditableComboboxOptions<ComboboxEl, PopupEl>): EditableComboboxImplementation<ComboboxEl, PopupEl>;

package/dist/form/useEditableCombobox.js

@@ -0,0 +1,109 @@
+"use client";
+import { useRef } from "react";
+import { isTypeEvent } from "../movement/utils.js";
+import { useCombobox } from "./useCombobox.js";
+import { isChangeableHTMLElement, triggerManualChangeEvent } from "./utils.js";
+/**
+ * @since 6.0.0
+ */ export function useEditableCombobox(options = {}) {
+    const focusFirst = useRef(false);
+    const { getMenuProps, ...combobox } = useCombobox({
+        ...options,
+        loopable: true,
+        searchable: false,
+        isNegativeOneAllowed: true,
+        getEnterDefaultFocusedIndex (options) {
+            const { focusLast, focusables, currentFocusIndex } = options;
+            if (focusFirst.current) {
+                focusFirst.current = false;
+                return 0;
+            }
+            if (focusLast) {
+                return focusables.length - 1;
+            }
+            return currentFocusIndex;
+        },
+        extendKeyDown (movementData) {
+            const { event, show, hide, visible, currentFocusIndex, setActiveDescendantId } = movementData;
+            const resetFocus = ()=>{
+                currentFocusIndex.current = -1;
+                setActiveDescendantId("");
+            };
+            switch(event.key){
+                case "Escape":
+                    if (!visible && isChangeableHTMLElement(event.currentTarget)) {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        triggerManualChangeEvent(event.currentTarget, "");
+                    }
+                    break;
+                case "Home":
+                case "End":
+                    // do not attempt to jump to the start or end of the listbox so
+                    // natural text editing occurs
+                    event.stopPropagation();
+                    if (visible) {
+                        resetFocus();
+                    }
+                    break;
+                case "ArrowLeft":
+                case "ArrowRight":
+                    if (visible) {
+                        resetFocus();
+                    }
+                    break;
+                case "ArrowUp":
+                    // Note: The non-altKey version is handled in the `useCombobox` hook
+                    //
+                    // if the popup is available and the altKey was pressed, return focus
+                    // to the combobox without closing. If the focus was already on the
+                    // combobox, hide the popup
+                    if (visible && event.altKey) {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        if (currentFocusIndex.current !== -1) {
+                            resetFocus();
+                        } else {
+                            hide();
+                        }
+                    }
+                    break;
+                case "ArrowDown":
+                    // if the popup is available, display the popup keep the focus on the
+                    // combobox if the altKey was pressed. Otherwise, move focus into the
+                    // listbox
+                    if (!visible) {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        focusFirst.current = !event.altKey;
+                        show();
+                    }
+                    break;
+                default:
+                    if (isTypeEvent(event)) {
+                        show();
+                        resetFocus();
+                    }
+            }
+        }
+    });
+    return {
+        ...combobox,
+        comboboxProps: {
+            ...combobox.comboboxProps,
+            autoCapitalize: "none",
+            autoComplete: "off"
+        },
+        getMenuProps (props) {
+            return {
+                // override the inherited renderAsSheet context since the sheet makes it
+                // so the user can't actually type in the combobox
+                renderAsSheet: false,
+                preventOverlap: true,
+                ...getMenuProps(props)
+            };
+        }
+    };
+}
+
+//# sourceMappingURL=useEditableCombobox.js.map

package/dist/form/useEditableCombobox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/form/useEditableCombobox.ts"],"sourcesContent":["\"use client\";\n\nimport { useRef } from \"react\";\n\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;AAEA,SAASA,MAAM,QAAQ,QAAQ;AAE/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/useFormReset.d.ts

@@ -0,0 +1,16 @@
+import { type RefObject } from "react";
+import { type ChangeableHTMLElement } from "./utils.js";
+/**
+ * @since 6.0.0
+ * @internal
+ */
+export interface FormResetOptions {
+    form?: string;
+    elementRef: RefObject<ChangeableHTMLElement>;
+    defaultValue: string;
+}
+/**
+ * @since 6.0.0
+ * @internal
+ */
+export declare function useFormReset(options: FormResetOptions): void;

package/dist/form/useFormReset.js

@@ -0,0 +1,32 @@
+"use client";
+import { useEffect } from "react";
+import { triggerManualChangeEvent } from "./utils.js";
+/**
+ * @since 6.0.0
+ * @internal
+ */ export function useFormReset(options) {
+    const { form, elementRef, defaultValue } = options;
+    useEffect(()=>{
+        const element = elementRef.current;
+        if (!element) {
+            return;
+        }
+        const formElement = form && document.getElementById(form) || element.closest("form") || null;
+        if (!formElement) {
+            return;
+        }
+        const handleReset = ()=>{
+            triggerManualChangeEvent(element, defaultValue);
+        };
+        formElement.addEventListener("reset", handleReset);
+        return ()=>{
+            formElement.removeEventListener("reset", handleReset);
+        };
+    }, [
+        defaultValue,
+        elementRef,
+        form
+    ]);
+}
+
+//# sourceMappingURL=useFormReset.js.map

package/dist/form/useFormReset.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/form/useFormReset.ts"],"sourcesContent":["\"use client\";\n\nimport { type RefObject, useEffect } from \"react\";\n\nimport {\n  type ChangeableHTMLElement,\n  triggerManualChangeEvent,\n} from \"./utils.js\";\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface FormResetOptions {\n  form?: string;\n  elementRef: RefObject<ChangeableHTMLElement>;\n  defaultValue: string;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport function useFormReset(options: FormResetOptions): void {\n  const { form, elementRef, defaultValue } = options;\n\n  useEffect(() => {\n    const element = elementRef.current;\n    if (!element) {\n      return;\n    }\n\n    const formElement =\n      (form && document.getElementById(form)) ||\n      element.closest<HTMLFormElement>(\"form\") ||\n      null;\n    if (!formElement) {\n      return;\n    }\n\n    const handleReset = (): void => {\n      triggerManualChangeEvent(element, defaultValue);\n    };\n\n    formElement.addEventListener(\"reset\", handleReset);\n    return () => {\n      formElement.removeEventListener(\"reset\", handleReset);\n    };\n  }, [defaultValue, elementRef, form]);\n}\n"],"names":["useEffect","triggerManualChangeEvent","useFormReset","options","form","elementRef","defaultValue","element","current","formElement","document","getElementById","closest","handleReset","addEventListener","removeEventListener"],"mappings":"AAAA;AAEA,SAAyBA,SAAS,QAAQ,QAAQ;AAElD,SAEEC,wBAAwB,QACnB,aAAa;AAYpB;;;CAGC,GACD,OAAO,SAASC,aAAaC,OAAyB;IACpD,MAAM,EAAEC,IAAI,EAAEC,UAAU,EAAEC,YAAY,EAAE,GAAGH;IAE3CH,UAAU;QACR,MAAMO,UAAUF,WAAWG,OAAO;QAClC,IAAI,CAACD,SAAS;YACZ;QACF;QAEA,MAAME,cACJ,AAACL,QAAQM,SAASC,cAAc,CAACP,SACjCG,QAAQK,OAAO,CAAkB,WACjC;QACF,IAAI,CAACH,aAAa;YAChB;QACF;QAEA,MAAMI,cAAc;YAClBZ,yBAAyBM,SAASD;QACpC;QAEAG,YAAYK,gBAAgB,CAAC,SAASD;QACtC,OAAO;YACLJ,YAAYM,mBAAmB,CAAC,SAASF;QAC3C;IACF,GAAG;QAACP;QAAcD;QAAYD;KAAK;AACrC"}

package/dist/form/useNumberField.d.ts

@@ -1,6 +1,6 @@
 import { type UseStateInitializer, type UseStateSetter } from "../types.js";
 import { type ProvidedTextFieldMessageProps, type ProvidedTextFieldProps, type TextFieldHookOptions, type TextFieldHookState, type TextFieldImplementation, type ValidatedTextFieldImplementation } from "./useTextField.js";
-/** @remarks \@since 2.5.0 */
+/** @since 2.5.0 */
 export interface NumberFieldConstraints {
     /**
      * An optional min value for the number field.
@@ -19,9 +19,8 @@ export interface NumberFieldConstraints {
     step?: number;
 }
 /**
- * @remarks
- * \@since 2.5.0
- * \@since 6.0.0
+ * @since 2.5.0
+ * @since 6.0.0
  * - Removed `updateOnChange` in favor of `updateValue`
  * - Renamed `fixOnBlur` to `updateValueOnBlur`
  */
@@ -36,8 +35,7 @@ export interface NumberFieldHookOptions extends Omit<TextFieldHookOptions<HTMLIn
      * other components, keep this as the default of `"change"`. Otherwise, set
      * this to `"blur"`.
      *
-     * @example
-     * Deferring Updates on Blur
+     * @example Deferring Updates on Blur
      * ```tsx
      * import { TextField, useNumberField } from "@react-md/core";
      * import type { ReactElement } from "react";
@@ -80,42 +78,41 @@ export interface NumberFieldHookOptions extends Omit<TextFieldHookOptions<HTMLIn
      * fix any min/max errors manually and maintain weird formatting.
      *
      * @defaultValue `true`
-     * @remarks \@since 6.0.0 This was renamed from `fixOnBlur` and removed the
+     * @since 6.0.0 This was renamed from `fixOnBlur` and removed the
      * `"min"` and `"max"` behavior.
      */
     updateValueOnBlur?: boolean;
 }
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface NumberFieldHookState extends Omit<TextFieldHookState, "value"> {
     value: number | undefined;
 }
-/** @remarks \@since 2.5.6 */
+/** @since 2.5.6 */
 export interface ProvidedNumberFieldProps extends ProvidedTextFieldProps<HTMLInputElement>, NumberFieldConstraints {
     type: "number";
 }
-/** @remarks \@since 2.5.6 */
+/** @since 2.5.6 */
 export interface ProvidedNumberFieldMessageProps extends ProvidedTextFieldMessageProps<HTMLInputElement>, NumberFieldConstraints {
     type: "number";
 }
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface NumberFieldImplementation extends Omit<TextFieldImplementation<HTMLInputElement>, "value" | "setState"> {
     value: number | undefined;
     setState: UseStateSetter<NumberFieldHookState>;
     fieldProps: ProvidedNumberFieldProps;
 }
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface NumberFieldWithMessageImplementation extends NumberFieldImplementation {
     fieldProps: ProvidedNumberFieldMessageProps;
 }
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface ValidatedNumberFieldImplementation extends Omit<ValidatedTextFieldImplementation<HTMLInputElement>, "value" | "setState"> {
     value: number | undefined;
     setState: UseStateSetter<NumberFieldHookState>;
     fieldProps: ProvidedNumberFieldProps | ProvidedNumberFieldMessageProps;
 }
 /**
- * @example
- * Enforce Number Value and No Error Messages
+ * @example Enforce Number Value and No Error Messages
  * ```tsx
  * import { TextField, useNumberField } from "@react-md/core";
  * import type { ReactElement } from "react";
@@ -151,8 +148,7 @@ export declare function useNumberField(options: NumberFieldHookOptions & {
     }>;
 };
 /**
- * @example
- * No Error Messages
+ * @example No Error Messages
  * ```tsx
  * import { TextField, useNumberField } from "@react-md/core";
  * import type { ReactElement } from "react";
@@ -182,8 +178,7 @@ export declare function useNumberField(options: NumberFieldHookOptions & {
     disableMessage: true;
 }): NumberFieldImplementation;
 /**
- * @example
- * Enforce Number Value
+ * @example Enforce Number Value
  * ```tsx
  * import { TextField, useNumberField } from "@react-md/core";
  * import type { ReactElement } from "react";
@@ -205,8 +200,7 @@ export declare function useNumberField(options: NumberFieldHookOptions & {
  * }
  * ```
  *
- * @example
- * Enforce Number Value and Deferring Updates
+ * @example Enforce Number Value and Deferring Updates
  * ```tsx
  * import { TextField, useNumberField } from "@react-md/core";
  * import type { ReactElement } from "react";
@@ -244,8 +238,7 @@ export declare function useNumberField(options: NumberFieldHookOptions & {
  * The `useNumberField` hook is used to control the state of a `TextField` or
  * `<input type="number">`
  *
- * @example
- * Default Implementation
+ * @example Default Implementation
  * ```tsx
  * import { TextField, useNumberField } from "@react-md/core";
  * import type { ReactElement } from "react";
@@ -267,8 +260,7 @@ export declare function useNumberField(options: NumberFieldHookOptions & {
  * }
  * ```
  *
- * @example
- * Adding Constraints
+ * @example Adding Constraints
  * ```tsx
  * import { TextField, useNumberField } from "@react-md/core";
  * import type { ReactElement } from "react";