@react-md/core 1.0.0-next.1 → 1.0.0-next.11

package/dist/form/useCombobox.js

@@ -0,0 +1,206 @@
+"use client";
+import { 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 { tryToSubmitRelatedForm } from "./utils.js";
+const noop = ()=>{
+// do nothing
+};
+/**
+ * @remarks \@since 6.0.0
+ */ export const getNonDisabledOptions = (container)=>[
+        ...container.querySelectorAll('[role="option"]:not([aria-disabled])')
+    ];
+/**
+ * @remarks \@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 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 = {
+        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",
+                ...props,
+                ...popupProps,
+                fixedTo: comboboxRef,
+                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\";\nimport {\n  useRef,\n  type FocusEventHandler,\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 * @remarks \\@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 * @remarks \\@since 6.0.0\n */\nexport type SupportedComboboxPopup = \"listbox\" | \"grid\" | \"dialog\";\n\n/**\n * @remarks \\@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 * @remarks \\@since 6.0.0\n */\nexport type ExtendComboboxKeyDown<E extends HTMLElement = HTMLInputElement> = (\n  movementData: ComboboxKeyboardMovementData<E>\n) => void;\n\n/**\n * @remarks \\@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 * @remarks \\@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 * @remarks \\@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 * @remarks \\@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 * @remarks \\@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 * @remarks \\@since 6.0.0\n */\nexport type ComboboxTransitionCallbacks = Pick<\n  TransitionCallbacks,\n  \"onEntering\" | \"onEntered\" | \"onExiting\" | \"onExited\"\n>;\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface ComboboxTransitionOptions extends ComboboxTransitionCallbacks {\n  disableTransition?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type ConfigurableComboboxMenuProps = Partial<\n  Omit<\n    MenuProps,\n    \"fixedTo\" | \"visible\" | \"onRequestClose\" | keyof ComboboxWidgetPopupProps\n  >\n>;\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface ProvidedComboboxMenuProps<\n  ComboboxEl extends HTMLElement = HTMLInputElement,\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<ComboboxEl>;\n\n  sheetProps: MenuSheetConfigurableProps &\n    Required<ComboboxTransitionCallbacks>;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface ComboboxMenuProps<\n  ComboboxEl extends HTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLDivElement,\n> extends Omit<ConfigurableComboboxMenuProps, keyof ProvidedComboboxMenuProps>,\n    ProvidedComboboxMenuProps<ComboboxEl, 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<\n  ComboboxEl extends HTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLDivElement,\n> = (\n  props?: ConfigurableComboboxMenuProps\n) => ComboboxMenuProps<ComboboxEl, PopupEl>;\n\n/**\n * @remarks \\@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<ComboboxEl, PopupEl>;\n  getTransitionCallbacks(\n    options: ComboboxTransitionOptions\n  ): Required<ComboboxTransitionCallbacks>;\n}\n\n/**\n * @remarks \\@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        ...props,\n        ...popupProps,\n        fixedTo: comboboxRef,\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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"}

package/dist/form/useEditableCombobox.d.ts

@@ -0,0 +1,15 @@
+import { type BaseComboboxOptions, type ComboboxImplementation } from "./useCombobox.js";
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface EditableComboboxOptions<ComboboxEl extends HTMLElement = HTMLInputElement, PopupEl extends HTMLElement = HTMLElement> extends BaseComboboxOptions<ComboboxEl, PopupEl> {
+}
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface EditableComboboxImplementation<ComboboxEl extends HTMLElement = HTMLInputElement, PopupEl extends HTMLElement = HTMLElement> extends ComboboxImplementation<ComboboxEl, PopupEl> {
+}
+/**
+ * @remarks \@since 6.0.0
+ */
+export declare function useEditableCombobox<ComboboxEl extends HTMLElement = HTMLInputElement, PopupEl extends HTMLElement = HTMLElement>(options?: EditableComboboxOptions<ComboboxEl, PopupEl>): EditableComboboxImplementation<ComboboxEl, PopupEl>;

package/dist/form/useEditableCombobox.js

@@ -0,0 +1,101 @@
+"use client";
+import { useRef } from "react";
+import { isTypeEvent } from "../movement/utils.js";
+import { useCombobox } from "./useCombobox.js";
+import { isChangeableHTMLElement, triggerManualChangeEvent } from "./utils.js";
+/**
+ * @remarks \@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,
+        getMenuProps (props) {
+            return {
+                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\";\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 * @remarks \\@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 * @remarks \\@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 * @remarks \\@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        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","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;gBACLC,gBAAgB;gBAChB,GAAGzB,aAAawB,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";
+/**
+ * @remarks \@since 6.0.0
+ * @internal
+ */
+export interface FormResetOptions {
+    form?: string;
+    elementRef: RefObject<ChangeableHTMLElement>;
+    defaultValue: string;
+}
+/**
+ * @remarks \@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";
+/**
+ * @remarks \@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\";\nimport { useEffect, type RefObject } from \"react\";\nimport {\n  triggerManualChangeEvent,\n  type ChangeableHTMLElement,\n} from \"./utils.js\";\n\n/**\n * @remarks \\@since 6.0.0\n * @internal\n */\nexport interface FormResetOptions {\n  form?: string;\n  elementRef: RefObject<ChangeableHTMLElement>;\n  defaultValue: string;\n}\n\n/**\n * @remarks \\@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;AACA,SAASA,SAAS,QAAwB,QAAQ;AAClD,SACEC,wBAAwB,QAEnB,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/useListboxProvider.d.ts

@@ -1,4 +1,5 @@
 import { type RefObject } from "react";
+import { type ChangeableHTMLElement } from "./utils.js";
 /**
  * @internal
  * \@remarks \@since 6.0.0
@@ -7,12 +8,13 @@ export interface ListboxContext {
     /**
      * This ref is used to trigger the change event when an option is clicked.
      */
-    inputRef: RefObject<HTMLInputElement>;
+    inputRef: RefObject<ChangeableHTMLElement>;
     /**
      * This is used within the `Option` component to determine if it is currently
      * selected or not.
      */
     currentValue: string | number | null;
+    selectedIconAfter: boolean;
     disableSelectedIcon: boolean;
 }
 /**
@@ -21,7 +23,7 @@ export interface ListboxContext {
  * @internal
  * @remarks \@since 6.0.0
  */
-export declare const ListboxProvider: import("react").Provider<ListboxContext>;
+export declare const ListboxProvider: import("react").Provider<ListboxContext | null>;
 /**
  * @internal
  * @remarks \@since 6.0.0

package/dist/form/useListboxProvider.js

@@ -1,12 +1,6 @@
 "use client";
 import { createContext, useContext } from "react";
-const context = createContext({
-    inputRef: {
-        current: null
-    },
-    currentValue: null,
-    disableSelectedIcon: false
-});
+const context = createContext(null);
 /**
  * **Client Component**
  *
@@ -17,7 +11,11 @@ const context = createContext({
  * @internal
  * @remarks \@since 6.0.0
  */ export function useListboxContext() {
-    return useContext(context);
+    const value = useContext(context);
+    if (!value) {
+        throw new Error("The `ListboxProvider` must be a parent component");
+    }
+    return value;
 }
 
 //# sourceMappingURL=useListboxProvider.js.map

package/dist/form/useListboxProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/useListboxProvider.ts"],"sourcesContent":["\"use client\";\nimport { createContext, useContext, type RefObject } from \"react\";\n\n/**\n * @internal\n * \\@remarks \\@since 6.0.0\n */\nexport interface ListboxContext {\n  /**\n   * This ref is used to trigger the change event when an option is clicked.\n   */\n  inputRef: RefObject<HTMLInputElement>;\n\n  /**\n   * This is used within the `Option` component to determine if it is currently\n   * selected or not.\n   */\n  currentValue: string | number | null;\n\n  disableSelectedIcon: boolean;\n}\n\nconst context = createContext<ListboxContext>({\n  inputRef: { current: null },\n  currentValue: null,\n  disableSelectedIcon: false,\n});\n\n/**\n * **Client Component**\n *\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport const { Provider: ListboxProvider } = context;\n\n/**\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport function useListboxContext(): ListboxContext {\n  return useContext(context);\n}\n"],"names":["createContext","useContext","context","inputRef","current","currentValue","disableSelectedIcon","Provider","ListboxProvider","useListboxContext"],"mappings":"AAAA;AACA,SAASA,aAAa,EAAEC,UAAU,QAAwB,QAAQ;AAqBlE,MAAMC,UAAUF,cAA8B;IAC5CG,UAAU;QAAEC,SAAS;IAAK;IAC1BC,cAAc;IACdC,qBAAqB;AACvB;AAEA;;;;;CAKC,GACD,OAAO,MAAM,EAAEC,UAAUC,eAAe,EAAE,GAAGN,QAAQ;AAErD;;;CAGC,GACD,OAAO,SAASO;IACd,OAAOR,WAAWC;AACpB"}
+{"version":3,"sources":["../../src/form/useListboxProvider.ts"],"sourcesContent":["\"use client\";\nimport { createContext, useContext, type RefObject } from \"react\";\nimport { type ChangeableHTMLElement } from \"./utils.js\";\n\n/**\n * @internal\n * \\@remarks \\@since 6.0.0\n */\nexport interface ListboxContext {\n  /**\n   * This ref is used to trigger the change event when an option is clicked.\n   */\n  inputRef: RefObject<ChangeableHTMLElement>;\n\n  /**\n   * This is used within the `Option` component to determine if it is currently\n   * selected or not.\n   */\n  currentValue: string | number | null;\n\n  selectedIconAfter: boolean;\n  disableSelectedIcon: boolean;\n}\n\nconst context = createContext<ListboxContext | null>(null);\n\n/**\n * **Client Component**\n *\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport const { Provider: ListboxProvider } = context;\n\n/**\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport function useListboxContext(): ListboxContext {\n  const value = useContext(context);\n  if (!value) {\n    throw new Error(\"The `ListboxProvider` must be a parent component\");\n  }\n  return value;\n}\n"],"names":["createContext","useContext","context","Provider","ListboxProvider","useListboxContext","value","Error"],"mappings":"AAAA;AACA,SAASA,aAAa,EAAEC,UAAU,QAAwB,QAAQ;AAuBlE,MAAMC,UAAUF,cAAqC;AAErD;;;;;CAKC,GACD,OAAO,MAAM,EAAEG,UAAUC,eAAe,EAAE,GAAGF,QAAQ;AAErD;;;CAGC,GACD,OAAO,SAASG;IACd,MAAMC,QAAQL,WAAWC;IACzB,IAAI,CAACI,OAAO;QACV,MAAM,IAAIC,MAAM;IAClB;IACA,OAAOD;AACT"}

package/dist/form/useResizingTextArea.d.ts

@@ -1,4 +1,4 @@
-import { type ChangeEventHandler, type RefCallback, type RefObject } from "react";
+import { type ChangeEventHandler, type Ref, type RefCallback } from "react";
 /**
  * A textarea is normally resizable in browsers by default by dragging the
  * bottom right corner to the desired size which will set inline styles for
@@ -22,14 +22,17 @@ export interface ResizingTextAreaOptions {
     resize: TextAreaResize;
     maxRows: number;
     onChange: ChangeEventHandler<HTMLTextAreaElement> | undefined;
-    containerRef: RefObject<HTMLDivElement>;
+    containerRef?: Ref<HTMLDivElement>;
+    disableTransition: boolean | undefined;
 }
 /** @internal */
 export interface ResizingTextAreaReturnValue {
     height: string | undefined;
     maskRef: RefCallback<HTMLTextAreaElement>;
+    containerRef: RefCallback<HTMLDivElement>;
     onChange: ChangeEventHandler<HTMLTextAreaElement>;
     scrollable: boolean;
+    disableTransition: boolean;
 }
 /** @internal */
 export declare function useResizingTextArea(options: ResizingTextAreaOptions): ResizingTextAreaReturnValue;

package/dist/form/useResizingTextArea.js

@@ -1,16 +1,17 @@
 "use client";
 import { useCallback, useEffect, useRef, useState } from "react";
+import { useEnsuredRef } from "../useEnsuredRef.js";
 import { useResizeObserver } from "../useResizeObserver.js";
 // this is the default of 1.5rem line-height in the styles
-const DEFAULT_LINE_HEIGHT = "24";
+const DEFAULT_LINE_HEIGHT = 24;
 const noop = ()=>{
 // do nothing
 };
 /** @internal */ export function useResizingTextArea(options) {
-    const { maxRows, resize, onChange = noop, containerRef } = options;
+    const { maxRows, resize, onChange = noop, containerRef: propContainerRef, disableTransition } = options;
     const maskRef = useRef(null);
+    const [containerRef, containerRefCallback] = useEnsuredRef(propContainerRef);
     const [height, setHeight] = useState();
-    const [scrollable, setScrollable] = useState(false);
     useEffect(()=>{
         if (resize !== "auto") {
             setHeight(undefined);
@@ -18,32 +19,60 @@ const noop = ()=>{
     }, [
         resize
     ]);
+    // Since access to the DOM is required to calculate the current height of the
+    // textarea, do not enable the height transition until it has been calculated
+    // once.
+    const isHeightSet = useRef(true);
+    useEffect(()=>{
+        isHeightSet.current = !height;
+    }, [
+        height
+    ]);
+    // Do not enable the scrollbar until the max height has been reached since
+    // it'll flash as the user types on OS that display scrollbars.
+    //
+    // Note: This does cause an infinite loop issue on browsers that display OS
+    // when rendered in a flex/grid container and a "fluid" width since:
+    // - the width changes when the overflow changes to `auto`
+    // - the resize observer triggers since there was a width change
+    // - the number of rows imght change because of this width change
+    // - it might no longer be at the max height, so remove the scrollbar
+    // - restart
+    const [isMaxHeightReached, setMaxHeightReached] = useState(false);
     const updateHeight = useCallback(()=>{
         const mask = maskRef.current;
         const container = containerRef.current;
-        if (!mask || !container) {
+        /* c8 ignore start */ if (!mask || !container) {
             return;
         }
-        const containerStyles = window.getComputedStyle(container);
-        const borderHeight = parseFloat(containerStyles.borderTopWidth) + parseFloat(containerStyles.borderBottomWidth);
+        /* c8 ignore stop */ const containerStyles = window.getComputedStyle(container);
+        const isBorderBox = containerStyles.boxSizing === "border-box";
+        let borderHeight = 0;
+        if (isBorderBox) {
+            borderHeight = parseFloat(containerStyles.borderTopWidth) + parseFloat(containerStyles.borderBottomWidth);
+        }
         let nextHeight = mask.scrollHeight + borderHeight;
-        /* istanbul ignore if */ if (maxRows > 0) {
-            const lineHeight = parseFloat(window.getComputedStyle(mask).lineHeight || DEFAULT_LINE_HEIGHT);
+        if (maxRows > 0) {
+            nextHeight -= borderHeight;
+            const maskStyles = window.getComputedStyle(mask);
+            // in tests, this is `"normal"` by default instead of a number
+            let lineHeight = parseFloat(maskStyles.lineHeight);
+            if (Number.isNaN(lineHeight)) {
+                lineHeight = DEFAULT_LINE_HEIGHT;
+            }
             const maxHeight = maxRows * lineHeight;
             nextHeight = Math.min(maxHeight, nextHeight);
-            // only want the textarea to be scrollable if there's a limit on the rows
-            // since it'll flash the scrollbar on most OS during the height transition
-            if (nextHeight === maxHeight && !scrollable) {
-                setScrollable(true);
-            } else if (nextHeight !== maxHeight && scrollable) {
-                setScrollable(false);
-            }
+            setMaxHeightReached(nextHeight === maxHeight);
+            nextHeight += borderHeight;
+        }
+        // This just makes snapshots look nicer since `nextHeight` will be 0 in
+        // tests unless the user mocks out all the DOM properties
+        if (nextHeight) {
+            setHeight(nextHeight);
         }
-        setHeight(nextHeight + 2);
     }, [
         containerRef,
-        maxRows,
-        scrollable
+        maxRows
     ]);
     const maskRefCallback = useResizeObserver({
         ref: maskRef,
@@ -53,11 +82,13 @@ const noop = ()=>{
     return {
         height: typeof height === "number" ? `${height}px` : undefined,
         maskRef: maskRefCallback,
-        scrollable,
+        containerRef: containerRefCallback,
+        scrollable: maxRows > 0 && isMaxHeightReached,
+        disableTransition: disableTransition || isHeightSet.current,
         onChange (event) {
-            const mask = maskRef.current;
             onChange(event);
-            if (event.isPropagationStopped() || !mask || resize !== "auto") {
+            const mask = maskRef.current;
+            if (!mask || resize !== "auto") {
                 return;
             }
             // to get the height transition to work, you have to set the height on: