@react-md/core 1.0.0-next.13 → 1.0.0-next.14

package/dist/form/TextFieldAddon.js

@@ -1,16 +1,19 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { cnb } from "cnbuilder";
 import { forwardRef } from "react";
+import { box } from "../box/styles.js";
 import { bem } from "../utils/bem.js";
 const styles = bem("rmd-text-field-addon");
 /**
  * @since 6.0.0
  */ export function textFieldAddon(options = {}) {
-    const { className, after = false, presentational = false } = options;
+    const { className, after, presentational } = options;
     return cnb(styles({
         before: !after,
         after,
         presentational
+    }), box({
+        disablePadding: true
     }), className);
 }
 /**
@@ -19,7 +22,7 @@ const styles = bem("rmd-text-field-addon");
  * This component is used to add an an icon before or after the text field with
  * correct styling.
  */ export const TextFieldAddon = /*#__PURE__*/ forwardRef(function TextFieldAddon(props, ref) {
-    const { after = false, children, className, disabled = false, pointerEvents = false, ...remaining } = props;
+    const { after, disabled, pointerEvents, children, className, ...remaining } = props;
     if (!children) {
         return null;
     }

package/dist/form/TextFieldAddon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/TextFieldAddon.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { forwardRef } from \"react\";\nimport { bem } from \"../utils/bem.js\";\nimport { type ConfigurableTextFieldAddonProps } from \"./types.js\";\n\nconst styles = bem(\"rmd-text-field-addon\");\n\n/** @since 6.0.0 */\nexport interface TextFieldAddonClassNameOptions {\n  className?: string;\n\n  /**\n   * @defaultValue `false`\n   */\n  after?: boolean;\n\n  /**\n   *\n   * @defaultValue `true`\n   */\n  presentational?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function textFieldAddon(\n  options: TextFieldAddonClassNameOptions = {}\n): string {\n  const { className, after = false, presentational = false } = options;\n\n  return cnb(\n    styles({\n      before: !after,\n      after,\n      presentational,\n    }),\n    className\n  );\n}\n\n/**\n * @since 6.0.0 Split props into `ConfigurableTextFieldAddonProps`\n */\nexport interface TextFieldAddonProps extends ConfigurableTextFieldAddonProps {\n  /**\n   * @defaultValue `false`\n   */\n  after?: boolean;\n\n  /**\n   * Set this to `true` if the addon should not be wrapped in a `<span>` with some\n   * additional styles.\n   *\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n}\n\n/**\n * **Server Component**\n *\n * This component is used to add an an icon before or after the text field with\n * correct styling.\n */\nexport const TextFieldAddon = forwardRef<HTMLSpanElement, TextFieldAddonProps>(\n  function TextFieldAddon(props, ref) {\n    const {\n      after = false,\n      children,\n      className,\n      disabled = false,\n      pointerEvents = false,\n      ...remaining\n    } = props;\n\n    if (!children) {\n      return null;\n    }\n\n    if (disabled) {\n      return <>{children}</>;\n    }\n\n    return (\n      <span\n        {...remaining}\n        ref={ref}\n        className={textFieldAddon({\n          after,\n          presentational: !pointerEvents,\n          className,\n        })}\n      >\n        {children}\n      </span>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","bem","styles","textFieldAddon","options","className","after","presentational","before","TextFieldAddon","props","ref","children","disabled","pointerEvents","remaining","span"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAAQ,QAAQ;AACnC,SAASC,GAAG,QAAQ,kBAAkB;AAGtC,MAAMC,SAASD,IAAI;AAkBnB;;CAEC,GACD,OAAO,SAASE,eACdC,UAA0C,CAAC,CAAC;IAE5C,MAAM,EAAEC,SAAS,EAAEC,QAAQ,KAAK,EAAEC,iBAAiB,KAAK,EAAE,GAAGH;IAE7D,OAAOL,IACLG,OAAO;QACLM,QAAQ,CAACF;QACTA;QACAC;IACF,IACAF;AAEJ;AAoBA;;;;;CAKC,GACD,OAAO,MAAMI,+BAAiBT,WAC5B,SAASS,eAAeC,KAAK,EAAEC,GAAG;IAChC,MAAM,EACJL,QAAQ,KAAK,EACbM,QAAQ,EACRP,SAAS,EACTQ,WAAW,KAAK,EAChBC,gBAAgB,KAAK,EACrB,GAAGC,WACJ,GAAGL;IAEJ,IAAI,CAACE,UAAU;QACb,OAAO;IACT;IAEA,IAAIC,UAAU;QACZ,qBAAO;sBAAGD;;IACZ;IAEA,qBACE,KAACI;QACE,GAAGD,SAAS;QACbJ,KAAKA;QACLN,WAAWF,eAAe;YACxBG;YACAC,gBAAgB,CAACO;YACjBT;QACF;kBAECO;;AAGP,GACA"}
+{"version":3,"sources":["../../src/form/TextFieldAddon.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { forwardRef } from \"react\";\nimport { box } from \"../box/styles.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { type ConfigurableTextFieldAddonProps } from \"./types.js\";\n\nconst styles = bem(\"rmd-text-field-addon\");\n\n/** @since 6.0.0 */\nexport interface TextFieldAddonClassNameOptions {\n  className?: string;\n\n  /**\n   * @defaultValue `false`\n   */\n  after?: boolean;\n\n  /**\n   *\n   * @defaultValue `true`\n   */\n  presentational?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function textFieldAddon(\n  options: TextFieldAddonClassNameOptions = {}\n): string {\n  const { className, after, presentational } = options;\n\n  return cnb(\n    styles({\n      before: !after,\n      after,\n      presentational,\n    }),\n    box({ disablePadding: true }),\n    className\n  );\n}\n\n/**\n * @since 6.0.0 Split props into `ConfigurableTextFieldAddonProps`\n */\nexport interface TextFieldAddonProps extends ConfigurableTextFieldAddonProps {\n  /**\n   * @defaultValue `false`\n   */\n  after?: boolean;\n\n  /**\n   * Set this to `true` if the addon should not be wrapped in a `<span>` with some\n   * additional styles.\n   *\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n}\n\n/**\n * **Server Component**\n *\n * This component is used to add an an icon before or after the text field with\n * correct styling.\n */\nexport const TextFieldAddon = forwardRef<HTMLSpanElement, TextFieldAddonProps>(\n  function TextFieldAddon(props, ref) {\n    const {\n      after,\n      disabled,\n      pointerEvents,\n      children,\n      className,\n      ...remaining\n    } = props;\n\n    if (!children) {\n      return null;\n    }\n\n    if (disabled) {\n      return <>{children}</>;\n    }\n\n    return (\n      <span\n        {...remaining}\n        ref={ref}\n        className={textFieldAddon({\n          after,\n          presentational: !pointerEvents,\n          className,\n        })}\n      >\n        {children}\n      </span>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","box","bem","styles","textFieldAddon","options","className","after","presentational","before","disablePadding","TextFieldAddon","props","ref","disabled","pointerEvents","children","remaining","span"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAAQ,QAAQ;AACnC,SAASC,GAAG,QAAQ,mBAAmB;AACvC,SAASC,GAAG,QAAQ,kBAAkB;AAGtC,MAAMC,SAASD,IAAI;AAkBnB;;CAEC,GACD,OAAO,SAASE,eACdC,UAA0C,CAAC,CAAC;IAE5C,MAAM,EAAEC,SAAS,EAAEC,KAAK,EAAEC,cAAc,EAAE,GAAGH;IAE7C,OAAON,IACLI,OAAO;QACLM,QAAQ,CAACF;QACTA;QACAC;IACF,IACAP,IAAI;QAAES,gBAAgB;IAAK,IAC3BJ;AAEJ;AAoBA;;;;;CAKC,GACD,OAAO,MAAMK,+BAAiBX,WAC5B,SAASW,eAAeC,KAAK,EAAEC,GAAG;IAChC,MAAM,EACJN,KAAK,EACLO,QAAQ,EACRC,aAAa,EACbC,QAAQ,EACRV,SAAS,EACT,GAAGW,WACJ,GAAGL;IAEJ,IAAI,CAACI,UAAU;QACb,OAAO;IACT;IAEA,IAAIF,UAAU;QACZ,qBAAO;sBAAGE;;IACZ;IAEA,qBACE,KAACE;QACE,GAAGD,SAAS;QACbJ,KAAKA;QACLP,WAAWF,eAAe;YACxBG;YACAC,gBAAgB,CAACO;YACjBT;QACF;kBAECU;;AAGP,GACA"}

package/dist/form/_form.scss

@@ -3,6 +3,7 @@
 @use "sass:color";
 @use "../utils";
 @use "../box-shadows";
+@use "../box/box";
 @use "../button/button";
 @use "../progress/progress";
 @use "../theme/colors";
@@ -106,7 +107,6 @@ $text-field-height: 3rem !default;
 $text-field-dense-height: 2.5rem !default;
 $text-field-label-height: 3.5rem !default;
 $text-field-label-dense-height: 3.25rem !default;
-$text-field-spacing: icon.$spacing !default;
 $text-field-border-radius: 0.25rem !default;
 $text-field-border-width: 1px !default;
 $text-field-border-width-active: 2px !default;
@@ -122,7 +122,9 @@ $text-field-underlined-label-padding-top: 1.5rem !default;
 $text-field-underlined-label-left-offset: icon.$spacing !default;
 $text-field-color-min-width: 5rem !default;
 
+$text-field-addon-gap: 0.25rem !default;
 $text-field-addon-margin: icon.$spacing !default;
+$text-field-addon-spacing: icon.get-var(spacing) !default;
 
 $text-field-light-border-color: rgba(#000, 0.12) !default;
 $text-field-dark-border-color: rgba(#fff, 0.5) !default;
@@ -270,6 +272,7 @@ $variables: (
   active-color,
   focus-color,
   addon-top,
+  addon-spacing,
   addon-margin-top,
   addon-left-offset,
   label-floating-top,
@@ -284,6 +287,9 @@ $variables: (
   text-field-border-color,
   text-field-hover-border-color,
   text-field-filled-color,
+  text-field-filled-padding,
+  text-field-outlined-padding,
+  text-field-underlined-padding,
   textarea-height,
   textarea-padding,
   switch-track-background-color,
@@ -459,30 +465,24 @@ $variables: (
       margin: $message-margin-top 0 $message-margin-bottom;
       min-height: $message-min-height;
 
-      @if not $disable-text-field-filled-theme and $text-field-filled-padding {
+      @if not $disable-text-field-filled-theme {
         &--filled {
-          padding-left: $text-field-filled-padding;
-          padding-right: $text-field-filled-padding;
+          @include use-var(padding-left, text-field-filled-padding);
+          @include use-var(padding-right, text-field-filled-padding);
         }
       }
 
-      @if not
-        $disable-text-field-outlined-theme and
-        $text-field-outlined-padding
-      {
+      @if not $disable-text-field-outlined-theme {
         &--outline {
-          padding-left: $text-field-outlined-padding;
-          padding-right: $text-field-outlined-padding;
+          @include use-var(padding-left, text-field-outlined-padding);
+          @include use-var(padding-right, text-field-outlined-padding);
         }
       }
 
-      @if not
-        $disable-text-field-underlined-theme and
-        $text-field-underlined-padding
-      {
+      @if not $disable-text-field-underlined-theme {
         &--underline {
-          padding-left: $text-field-underlined-padding;
-          padding-right: $text-field-underlined-padding;
+          @include use-var(padding-left, text-field-underlined-padding);
+          @include use-var(padding-right, text-field-underlined-padding);
         }
       }
 
@@ -678,19 +678,25 @@ $variables: (
         &--outline {
           @include set-var(
             text-field-padding-left,
-            $text-field-outlined-padding
+            get-var(text-field-outlined-padding)
           );
           @include set-var(
             text-field-padding-right,
-            $text-field-outlined-padding
+            get-var(text-field-outlined-padding)
           );
           @include use-var(border-color, text-field-border-color);
           @if not $disable-text-field-addon {
-            @include set-var(addon-left-offset, $text-field-outlined-padding);
+            @include set-var(
+              addon-left-offset,
+              get-var(text-field-outlined-padding)
+            );
           }
 
           @if not $disable-floating-label {
-            @include set-var(label-left-offset, $text-field-outlined-padding);
+            @include set-var(
+              label-left-offset,
+              get-var(text-field-outlined-padding)
+            );
             @include set-var(label-top-offset, -50%);
             @include set-var(label-active-padding, 0 $label-floating-padding);
             @include set-var(
@@ -721,20 +727,24 @@ $variables: (
           opacity: 1;
         }
 
-        &--outline-left {
-          $distance: calc(
-            #{icon.get-var(size)} +
-              #{$text-field-outlined-padding +
-              $text-field-spacing}
-          );
+        @if not $disable-text-field-addon {
+          &--outline-left {
+            $distance: calc(
+              icon.get-var(size) +
+                get-var(text-field-outlined-padding) +
+                get-var(addon-spacing)
+            );
 
-          @include set-var(text-field-padding-left, $distance);
-        }
+            @include set-var(text-field-padding-left, $distance);
+          }
 
-        &--outline-right {
-          $distance: calc(#{icon.get-var(size)} + #{$text-field-spacing * 2});
+          &--outline-right {
+            $distance: calc(
+              icon.get-var(size) + calc(get-var(addon-spacing) * 2)
+            );
 
-          @include set-var(text-field-padding-right, $distance);
+            @include set-var(text-field-padding-right, $distance);
+          }
         }
       }
 
@@ -1095,25 +1105,22 @@ $variables: (
 
       @if not $disable-text-field-outlined-theme {
         &--outline {
+          @include use-var(padding-right, text-field-outlined-padding);
           @include utils.rtl {
+            @include use-var(padding-left, text-field-outlined-padding);
             @include use-var(padding-right, text-field-padding-left);
-
-            padding-left: $text-field-outlined-padding;
           }
-
-          padding-right: $text-field-outlined-padding;
         }
       }
 
       @if not $disable-text-field-filled-theme {
         &--filled {
+          @include use-var(padding-right, text-field-filled-padding);
           @include utils.rtl {
             @include use-var(padding-right, text-field-padding-left);
 
-            padding-left: $text-field-filled-padding;
+            @include use-var(padding-left, text-field-filled-padding);
           }
-
-          padding-right: $text-field-filled-padding;
         }
       }
     }
@@ -1191,6 +1198,9 @@ $variables: (
 @mixin text-field-addon-styles($disable-layer: false) {
   @include utils.optional-layer(form, $disable-layer) {
     .rmd-text-field-addon {
+      @if $text-field-addon-gap {
+        @include box.set-var(gap, $text-field-addon-gap);
+      }
       @if not
         $disable-text-field-filled-theme or not
         $disable-text-field-underlined-theme
@@ -1201,7 +1211,6 @@ $variables: (
       // this makes it so that this container element is the same size as the
       // child (normally icons). without this, icons would have a height of 30.5px
       // and no longer be centered
-      display: inline-flex;
       position: absolute;
 
       // Note: Can't use `:first-child` and `:last-child` since
@@ -1213,7 +1222,7 @@ $variables: (
       }
 
       &--after {
-        @include utils.auto-rtl(right, $text-field-spacing);
+        @include utils.auto-rtl(right, get-var(addon-spacing));
       }
 
       &--presentational {
@@ -1977,6 +1986,37 @@ $variables: (
       @include set-var(label-active-background-color, transparent);
     }
 
+    @if not
+      $disable-text-field or not
+      $disable-textarea or not
+      $disable-select or not
+      $disable-native-select
+    {
+      @if not $disable-text-field-filled-theme and $text-field-filled-padding {
+        @include set-var(text-field-filled-padding, $text-field-filled-padding);
+      }
+
+      @if not
+        $disable-text-field-outlined-theme and
+        $text-field-outlined-padding
+      {
+        @include set-var(
+          text-field-outlined-padding,
+          $text-field-outlined-padding
+        );
+      }
+
+      @if not
+        $disable-text-field-underlined-theme and
+        $text-field-underlined-padding
+      {
+        @include set-var(
+          text-field-underlined-padding,
+          $text-field-underlined-padding
+        );
+      }
+    }
+
     @if not $disable-text-field {
       @include set-var(text-field-height, $text-field-height);
       @include set-var(text-field-padding-left, 0px);
@@ -2003,6 +2043,7 @@ $variables: (
       @include set-var(addon-top, auto);
       @include set-var(addon-margin-top, 0px);
       @include set-var(addon-left-offset, 0px);
+      @include set-var(addon-spacing, $text-field-addon-spacing);
     }
 
     @if not $disable-switch {

package/dist/form/useCombobox.d.ts

@@ -110,31 +110,31 @@ export interface ComboboxTransitionOptions extends ComboboxTransitionCallbacks {
 /**
  * @since 6.0.0
  */
-export type ConfigurableComboboxMenuProps = Partial<Omit<MenuProps, "fixedTo" | "visible" | "onRequestClose" | keyof ComboboxWidgetPopupProps>>;
+export type ConfigurableComboboxMenuProps = Partial<Omit<MenuProps, "visible" | "onRequestClose" | keyof ComboboxWidgetPopupProps>>;
 /**
  * @since 6.0.0
  */
-export interface ProvidedComboboxMenuProps<ComboboxEl extends HTMLElement = HTMLInputElement, PopupEl extends HTMLElement = HTMLDivElement> extends Required<ComboboxTransitionCallbacks>, ComboboxWidgetPopupProps<PopupEl> {
+export interface ProvidedComboboxMenuProps<PopupEl extends HTMLElement = HTMLDivElement> extends Required<ComboboxTransitionCallbacks>, ComboboxWidgetPopupProps<PopupEl> {
     visible: boolean;
     onRequestClose(): void;
     /** @defaultValue `"min"` */
     width: PositionWidth;
     /** @defaultValue `BELOW_CENTER_ANCHOR` */
     anchor: PositionAnchor;
-    fixedTo: RefObject<ComboboxEl>;
+    fixedTo: RefObject<HTMLElement>;
     sheetProps: MenuSheetConfigurableProps & Required<ComboboxTransitionCallbacks>;
 }
 /**
  * @since 6.0.0
  */
-export interface ComboboxMenuProps<ComboboxEl extends HTMLElement = HTMLInputElement, PopupEl extends HTMLElement = HTMLDivElement> extends Omit<ConfigurableComboboxMenuProps, keyof ProvidedComboboxMenuProps>, ProvidedComboboxMenuProps<ComboboxEl, PopupEl> {
+export interface ComboboxMenuProps<PopupEl extends HTMLElement = HTMLDivElement> extends Omit<ConfigurableComboboxMenuProps, keyof ProvidedComboboxMenuProps>, ProvidedComboboxMenuProps<PopupEl> {
 }
 /**
  * Since the combobox usually uses the `Menu` as a popup element, this is a
  * helper util to create the required props and merge any additional props
  * with reasonable defaults.
  */
-export type ComboboxGetMenuProps<ComboboxEl extends HTMLElement = HTMLInputElement, PopupEl extends HTMLElement = HTMLDivElement> = (props?: ConfigurableComboboxMenuProps) => ComboboxMenuProps<ComboboxEl, PopupEl>;
+export type ComboboxGetMenuProps<PopupEl extends HTMLElement = HTMLDivElement> = (props?: ConfigurableComboboxMenuProps) => ComboboxMenuProps<PopupEl>;
 /**
  * @since 6.0.0
  */
@@ -148,7 +148,7 @@ export interface ComboboxImplementation<ComboboxEl extends HTMLElement = HTMLInp
     popupProps: ComboboxWidgetPopupProps<PopupEl>;
     comboboxRef: RefObject<ComboboxEl>;
     comboboxProps: ComboboxWidgetProps<ComboboxEl>;
-    getMenuProps: ComboboxGetMenuProps<ComboboxEl, PopupEl>;
+    getMenuProps: ComboboxGetMenuProps<PopupEl>;
     getTransitionCallbacks(options: ComboboxTransitionOptions): Required<ComboboxTransitionCallbacks>;
 }
 /**

package/dist/form/useCombobox.js

@@ -185,9 +185,9 @@ const noop = ()=>{
             return {
                 anchor: BELOW_CENTER_ANCHOR,
                 width: "min",
+                fixedTo: comboboxRef,
                 ...props,
                 ...popupProps,
-                fixedTo: comboboxRef,
                 visible,
                 onRequestClose: hide,
                 ...getTransitionCallbacks(props),

package/dist/form/useCombobox.js.map

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

package/dist/form/useEditableCombobox.js

@@ -91,6 +91,9 @@ import { isChangeableHTMLElement, triggerManualChangeEvent } from "./utils.js";
         ...combobox,
         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)
             };

package/dist/form/useEditableCombobox.js.map

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

package/dist/form/useTextFieldContainerAddons.d.ts

@@ -0,0 +1,88 @@
+import { type CSSProperties, type Ref, type RefCallback } from "react";
+import { type FormTheme } from "./types.js";
+/**
+ * @since 6.0.0
+ */
+export interface TextFieldContainerAddonsOptions {
+    /**
+     * This style will automatically be merged with the returned `style`.
+     */
+    style?: CSSProperties;
+    /** @defaultValue `getFormConfig("theme")` */
+    theme?: FormTheme;
+    /**
+     * Set this to `true` if the `leftAddon` should be watched for size changes.
+     */
+    leftAddon: boolean;
+    /**
+     * An optional ref that will be merged with the returned
+     * {@link TextFieldContainerAddonsImplementation.leftAddonRef}.
+     */
+    leftAddonRef?: Ref<HTMLSpanElement>;
+    /**
+     * This can be used to update the CSS `calc()` expression to change the
+     * padding.
+     *
+     * @example Add an additional 0.25rem padding
+     * ```
+     * leftAddonExtraCalc="+ 0.25rem"
+     * ```
+     *
+     * @defaultValue `""`
+     */
+    leftAddonExtraCalc?: string;
+    /**
+     * Set this to `true` if the `rightAddon` should be watched for size changes.
+     */
+    rightAddon: boolean;
+    /**
+     * An optional ref that will be merged with the returned
+     * {@link TextFieldContainerAddonsImplementation.rightAddonRef}.
+     */
+    rightAddonRef?: Ref<HTMLSpanElement>;
+    /**
+     * This can be used to update the CSS `calc()` expression to change the
+     * padding.
+     *
+     * @example Add an additional 0.25rem padding
+     * ```
+     * leftAddonExtraCalc="+ 0.25rem"
+     * ```
+     *
+     * @defaultValue `""`
+     */
+    rightAddonExtraCalc?: string;
+}
+/**
+ * @since 6.0.0
+ */
+export interface TextFieldContainerAddonsImplementation {
+    style?: CSSProperties;
+    leftAddonRef: RefCallback<HTMLSpanElement>;
+    rightAddonRef: RefCallback<HTMLSpanElement>;
+}
+/**
+ * This hook can be used to automatically update the padding on the
+ * `TextFieldContainer` based on the size of the `leftAddon` and `rightAddon`.
+ *
+ * @example Simple Example
+ * ```tsx
+ * const { style, leftAddonRef, rightAddonRef } = useTextFieldContainerAddons({
+ *   leftAddon: true,
+ *   rightAddon: true,
+ * });
+ *
+ * return (
+ *   <TextField
+ *     style={style}
+ *     leftAddon={<SomeDynamicAddon />}
+ *     leftAddonProps={{ ref: leftAddonRef }}
+ *     rightAddon={<SomeDynamicAddon />}
+ *     rightAddonProps={{ ref: rightAddonRef }}
+ *   />
+ * );
+ * ```
+ *
+ * @since 6.0.0
+ */
+export declare function useTextFieldContainerAddons(options: TextFieldContainerAddonsOptions): TextFieldContainerAddonsImplementation;