@react-md/core 6.5.1 → 7.0.0

package/dist/_utils.scss

@@ -142,6 +142,9 @@ $_swappable-properties: text-align;
 /// @returns {String} the name to be used in a `var()`
 @function get-var-name($variables, $name, $group) {
   @if $group == icon {
+    @if $name == symbol-fill {
+      @return --rmd-symbol-fill;
+    }
     @if $name == symbol-grade {
       @return --rmd-symbol-grad;
     }

package/dist/app-bar/AppBar.d.ts

@@ -1,4 +1,4 @@
-import { type ElementType, type HTMLAttributes, type Ref } from "react";
+import { type ElementType, type HTMLAttributes, type ReactElement, type Ref } from "react";
 import { type AppBarClassNameOptions } from "./styles.js";
 /** @since 6.0.0 */
 export type CustomAppBarComponent = ElementType<HTMLAttributes<HTMLDivElement> & {
@@ -17,6 +17,7 @@ export type CustomAppBarComponent = ElementType<HTMLAttributes<HTMLDivElement> &
  * @since 6.0.0 Added the {@link stacked} and {@link scrollbarOffset} props.
  */
 export interface AppBarProps extends HTMLAttributes<HTMLDivElement>, AppBarClassNameOptions {
+    ref?: Ref<HTMLDivElement>;
     /** @defaultValue `fixed ? "header" : "div"` */
     as?: CustomAppBarComponent;
 }
@@ -44,4 +45,4 @@ export interface AppBarProps extends HTMLAttributes<HTMLDivElement>, AppBarClass
  * @since 6.0.0 The `AppBar` was updated to use `gap` for spacing
  * instead of requiring the `AppBarNav` and `AppBarAction` components.
  */
-export declare const AppBar: import("react").ForwardRefExoticComponent<AppBarProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare function AppBar(props: AppBarProps): ReactElement;

package/dist/app-bar/AppBar.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { appBar } from "./styles.js";
 /**
  * @example Simple Example
@@ -24,8 +23,8 @@ import { appBar } from "./styles.js";
  *
  * @since 6.0.0 The `AppBar` was updated to use `gap` for spacing
  * instead of requiring the `AppBarNav` and `AppBarAction` components.
- */ export const AppBar = /*#__PURE__*/ forwardRef(function AppBar(props, ref) {
-    const { className, theme, stacked, height, align, grid, gridName, justify, reversed, gridColumns, disableWrap, disablePadding, position, pagePosition, surfaceColor, scrollbarOffset, disableElevation, as: Component = position ? "header" : "div", children, ...remaining } = props;
+ */ export function AppBar(props) {
+    const { ref, className, theme, stacked, height, align, grid, gridName, justify, reversed, gridColumns, disableWrap, disablePadding, position, pagePosition, surfaceColor, scrollbarOffset, disableElevation, as: Component = position ? "header" : "div", children, ...remaining } = props;
     return /*#__PURE__*/ _jsx(Component, {
         ...remaining,
         className: appBar({
@@ -50,6 +49,6 @@ import { appBar } from "./styles.js";
         ref: ref,
         children: children
     });
-});
+}
 
 //# sourceMappingURL=AppBar.js.map

package/dist/app-bar/AppBar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/app-bar/AppBar.tsx"],"sourcesContent":["import {\n  type ElementType,\n  type HTMLAttributes,\n  type Ref,\n  forwardRef,\n} from \"react\";\n\nimport { type AppBarClassNameOptions, appBar } from \"./styles.js\";\n\n/** @since 6.0.0 */\nexport type CustomAppBarComponent = ElementType<\n  HTMLAttributes<HTMLDivElement> & {\n    ref?: Ref<HTMLDivElement>;\n    className: string;\n  }\n>;\n\n/**\n * @since 6.0.0 Renamed the `component` prop to `as` and updated the default\n * value to be a `\"div\"` when `fixed` is `false`.\n * @since 6.0.0 Renamed the `fixedElevation` prop to `disableFixedElevation` to\n * match naming conventions when a feature is enabled by default.\n * @since 6.0.0 Removed the `inheritColor` and `flexWrap` props since they are\n * no longer required.\n * @since 6.0.0 Removed the `fixed` prop in favor of the new `position` prop\n * which enables position `fixed` or `sticky` behavior.\n * @since 6.0.0 Added the {@link stacked} and {@link scrollbarOffset} props.\n */\nexport interface AppBarProps\n  extends HTMLAttributes<HTMLDivElement>, AppBarClassNameOptions {\n  /** @defaultValue `fixed ? \"header\" : \"div\"` */\n  as?: CustomAppBarComponent;\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { AppBar } from \"@react-md/core/app-bar/AppBar\";\n * import { AppBarTitle } from \"@react-md/core/app-bar/AppBarTitle\";\n * import { Button } from \"@react-md/core/button/Button\";\n * import MenuIcon from \"@react-md/material-icons/MenuIcon\";\n * import MoreVertIcon from \"@react-md/material-icons/MoreVertIcon\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <AppBar>\n *       <Button aria-label=\"Navigation\"><MenuIcon /></Button>\n *       <AppBarTitle>My Main Title</AppBarTitle>\n *       <Button aria-label=\"Options\"><MoreVertIcon /></Button>\n *     </AppBar>\n *   );\n * }\n * ```\n *\n * @since 6.0.0 The `AppBar` was updated to use `gap` for spacing\n * instead of requiring the `AppBarNav` and `AppBarAction` components.\n */\nexport const AppBar = forwardRef<HTMLDivElement, AppBarProps>(\n  function AppBar(props, ref) {\n    const {\n      className,\n      theme,\n      stacked,\n      height,\n      align,\n      grid,\n      gridName,\n      justify,\n      reversed,\n      gridColumns,\n      disableWrap,\n      disablePadding,\n      position,\n      pagePosition,\n      surfaceColor,\n      scrollbarOffset,\n      disableElevation,\n      as: Component = position ? \"header\" : \"div\",\n      children,\n      ...remaining\n    } = props;\n\n    return (\n      <Component\n        {...remaining}\n        className={appBar({\n          className,\n          theme,\n          position,\n          pagePosition,\n          disableElevation,\n          scrollbarOffset,\n          height,\n          grid,\n          gridName,\n          gridColumns,\n          align,\n          stacked,\n          justify,\n          reversed,\n          surfaceColor,\n          disableWrap,\n          disablePadding,\n        })}\n        ref={ref}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["forwardRef","appBar","AppBar","props","ref","className","theme","stacked","height","align","grid","gridName","justify","reversed","gridColumns","disableWrap","disablePadding","position","pagePosition","surfaceColor","scrollbarOffset","disableElevation","as","Component","children","remaining"],"mappings":";AAAA,SAIEA,UAAU,QACL,QAAQ;AAEf,SAAsCC,MAAM,QAAQ,cAAc;AA2BlE;;;;;;;;;;;;;;;;;;;;;;;CAuBC,GACD,OAAO,MAAMC,uBAASF,WACpB,SAASE,OAAOC,KAAK,EAAEC,GAAG;IACxB,MAAM,EACJC,SAAS,EACTC,KAAK,EACLC,OAAO,EACPC,MAAM,EACNC,KAAK,EACLC,IAAI,EACJC,QAAQ,EACRC,OAAO,EACPC,QAAQ,EACRC,WAAW,EACXC,WAAW,EACXC,cAAc,EACdC,QAAQ,EACRC,YAAY,EACZC,YAAY,EACZC,eAAe,EACfC,gBAAgB,EAChBC,IAAIC,YAAYN,WAAW,WAAW,KAAK,EAC3CO,QAAQ,EACR,GAAGC,WACJ,GAAGtB;IAEJ,qBACE,KAACoB;QACE,GAAGE,SAAS;QACbpB,WAAWJ,OAAO;YAChBI;YACAC;YACAW;YACAC;YACAG;YACAD;YACAZ;YACAE;YACAC;YACAG;YACAL;YACAF;YACAK;YACAC;YACAM;YACAJ;YACAC;QACF;QACAZ,KAAKA;kBAEJoB;;AAGP,GACA"}
+{"version":3,"sources":["../../src/app-bar/AppBar.tsx"],"sourcesContent":["import {\n  type ElementType,\n  type HTMLAttributes,\n  type ReactElement,\n  type Ref,\n} from \"react\";\n\nimport { type AppBarClassNameOptions, appBar } from \"./styles.js\";\n\n/** @since 6.0.0 */\nexport type CustomAppBarComponent = ElementType<\n  HTMLAttributes<HTMLDivElement> & {\n    ref?: Ref<HTMLDivElement>;\n    className: string;\n  }\n>;\n\n/**\n * @since 6.0.0 Renamed the `component` prop to `as` and updated the default\n * value to be a `\"div\"` when `fixed` is `false`.\n * @since 6.0.0 Renamed the `fixedElevation` prop to `disableFixedElevation` to\n * match naming conventions when a feature is enabled by default.\n * @since 6.0.0 Removed the `inheritColor` and `flexWrap` props since they are\n * no longer required.\n * @since 6.0.0 Removed the `fixed` prop in favor of the new `position` prop\n * which enables position `fixed` or `sticky` behavior.\n * @since 6.0.0 Added the {@link stacked} and {@link scrollbarOffset} props.\n */\nexport interface AppBarProps\n  extends HTMLAttributes<HTMLDivElement>, AppBarClassNameOptions {\n  ref?: Ref<HTMLDivElement>;\n  /** @defaultValue `fixed ? \"header\" : \"div\"` */\n  as?: CustomAppBarComponent;\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { AppBar } from \"@react-md/core/app-bar/AppBar\";\n * import { AppBarTitle } from \"@react-md/core/app-bar/AppBarTitle\";\n * import { Button } from \"@react-md/core/button/Button\";\n * import MenuIcon from \"@react-md/material-icons/MenuIcon\";\n * import MoreVertIcon from \"@react-md/material-icons/MoreVertIcon\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <AppBar>\n *       <Button aria-label=\"Navigation\"><MenuIcon /></Button>\n *       <AppBarTitle>My Main Title</AppBarTitle>\n *       <Button aria-label=\"Options\"><MoreVertIcon /></Button>\n *     </AppBar>\n *   );\n * }\n * ```\n *\n * @since 6.0.0 The `AppBar` was updated to use `gap` for spacing\n * instead of requiring the `AppBarNav` and `AppBarAction` components.\n */\nexport function AppBar(props: AppBarProps): ReactElement {\n  const {\n    ref,\n    className,\n    theme,\n    stacked,\n    height,\n    align,\n    grid,\n    gridName,\n    justify,\n    reversed,\n    gridColumns,\n    disableWrap,\n    disablePadding,\n    position,\n    pagePosition,\n    surfaceColor,\n    scrollbarOffset,\n    disableElevation,\n    as: Component = position ? \"header\" : \"div\",\n    children,\n    ...remaining\n  } = props;\n\n  return (\n    <Component\n      {...remaining}\n      className={appBar({\n        className,\n        theme,\n        position,\n        pagePosition,\n        disableElevation,\n        scrollbarOffset,\n        height,\n        grid,\n        gridName,\n        gridColumns,\n        align,\n        stacked,\n        justify,\n        reversed,\n        surfaceColor,\n        disableWrap,\n        disablePadding,\n      })}\n      ref={ref}\n    >\n      {children}\n    </Component>\n  );\n}\n"],"names":["appBar","AppBar","props","ref","className","theme","stacked","height","align","grid","gridName","justify","reversed","gridColumns","disableWrap","disablePadding","position","pagePosition","surfaceColor","scrollbarOffset","disableElevation","as","Component","children","remaining"],"mappings":";AAOA,SAAsCA,MAAM,QAAQ,cAAc;AA4BlE;;;;;;;;;;;;;;;;;;;;;;;CAuBC,GACD,OAAO,SAASC,OAAOC,KAAkB;IACvC,MAAM,EACJC,GAAG,EACHC,SAAS,EACTC,KAAK,EACLC,OAAO,EACPC,MAAM,EACNC,KAAK,EACLC,IAAI,EACJC,QAAQ,EACRC,OAAO,EACPC,QAAQ,EACRC,WAAW,EACXC,WAAW,EACXC,cAAc,EACdC,QAAQ,EACRC,YAAY,EACZC,YAAY,EACZC,eAAe,EACfC,gBAAgB,EAChBC,IAAIC,YAAYN,WAAW,WAAW,KAAK,EAC3CO,QAAQ,EACR,GAAGC,WACJ,GAAGtB;IAEJ,qBACE,KAACoB;QACE,GAAGE,SAAS;QACbpB,WAAWJ,OAAO;YAChBI;YACAC;YACAW;YACAC;YACAG;YACAD;YACAZ;YACAE;YACAC;YACAG;YACAL;YACAF;YACAK;YACAC;YACAM;YACAJ;YACAC;QACF;QACAZ,KAAKA;kBAEJoB;;AAGP"}

package/dist/app-bar/AppBarTitle.d.ts

@@ -1,3 +1,4 @@
+import { type ReactElement, type Ref } from "react";
 import { type TextOverflow } from "../cssUtils.js";
 import { type TypographyProps } from "../typography/Typography.js";
 import { type TypographyType } from "../typography/typographyStyles.js";
@@ -10,6 +11,7 @@ import { type AppBarTitleClassNameOptions } from "./styles.js";
  * will default to `"ellipsis"` which is new as well.
  */
 export interface AppBarTitleProps extends TypographyProps, AppBarTitleClassNameOptions {
+    ref?: Ref<HTMLHeadingElement>;
     /** @defaultValue `"headline-6"` */
     type?: TypographyType;
     /**
@@ -41,4 +43,4 @@ export interface AppBarTitleProps extends TypographyProps, AppBarTitleClassNameO
  * prop inherited through the base `Typography` component. The `textOverflow`
  * will default to `"ellipsis"` which is new as well.
  */
-export declare const AppBarTitle: import("react").ForwardRefExoticComponent<AppBarTitleProps & import("react").RefAttributes<HTMLHeadingElement>>;
+export declare function AppBarTitle(props: AppBarTitleProps): ReactElement;

package/dist/app-bar/AppBarTitle.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { Typography } from "../typography/Typography.js";
 import { appBarTitle } from "./styles.js";
 /**
@@ -25,8 +24,8 @@ import { appBarTitle } from "./styles.js";
  * @since 6.0.0 The `noWrap` prop was removed in favor of the `textOverflow`
  * prop inherited through the base `Typography` component. The `textOverflow`
  * will default to `"ellipsis"` which is new as well.
- */ export const AppBarTitle = /*#__PURE__*/ forwardRef(function AppBarTitle(props, ref) {
-    const { type = "headline-6", keyline = "small", children, className, textOverflow = "ellipsis", ...remaining } = props;
+ */ export function AppBarTitle(props) {
+    const { ref, type = "headline-6", keyline = "small", children, className, textOverflow = "ellipsis", ...remaining } = props;
     return /*#__PURE__*/ _jsx(Typography, {
         ...remaining,
         ref: ref,
@@ -38,6 +37,6 @@ import { appBarTitle } from "./styles.js";
         textOverflow: textOverflow,
         children: children
     });
-});
+}
 
 //# sourceMappingURL=AppBarTitle.js.map

package/dist/app-bar/AppBarTitle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/app-bar/AppBarTitle.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport { type TextOverflow } from \"../cssUtils.js\";\nimport { Typography, type TypographyProps } from \"../typography/Typography.js\";\nimport { type TypographyType } from \"../typography/typographyStyles.js\";\nimport { type AppBarTitleClassNameOptions, appBarTitle } from \"./styles.js\";\n\n/**\n * @since 6.0.0 The `keyline` prop was changed from a boolean to a type\n * union of different keylines: {@link AppBarTitleKeyline}\n * @since 6.0.0 The `noWrap` prop was removed in favor of the `textOverflow`\n * prop inherited through the base `Typography` component. The `textOverflow`\n * will default to `\"ellipsis\"` which is new as well.\n */\nexport interface AppBarTitleProps\n  extends TypographyProps, AppBarTitleClassNameOptions {\n  /** @defaultValue `\"headline-6\"` */\n  type?: TypographyType;\n\n  /**\n   * @defaultValue `\"ellipsis\"`\n   */\n  textOverflow?: TextOverflow;\n}\n\n/**\n * @example Updating the Keyline\n * ```tsx\n * import { AppBar } from \"@react-md/core/app-bar/AppBar\";\n * import { AppBarTitle } from \"@react-md/core/app-bar/AppBarTitle\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <AppBar>\n *       <AppBarTitle keyline=\"nav\">\n *         Offset as if there was a nav button to the left\n *       </AppBarTitle>\n *     </AppBar>\n *   );\n * }\n * ```\n *\n * @since 6.0.0 The `keyline` prop was changed from a boolean to a type\n * union of different keylines: {@link AppBarTitleKeyline}\n * @since 6.0.0 The `noWrap` prop was removed in favor of the `textOverflow`\n * prop inherited through the base `Typography` component. The `textOverflow`\n * will default to `\"ellipsis\"` which is new as well.\n */\nexport const AppBarTitle = forwardRef<HTMLHeadingElement, AppBarTitleProps>(\n  function AppBarTitle(props, ref) {\n    const {\n      type = \"headline-6\",\n      keyline = \"small\",\n      children,\n      className,\n      textOverflow = \"ellipsis\",\n      ...remaining\n    } = props;\n    return (\n      <Typography\n        {...remaining}\n        ref={ref}\n        type={type}\n        className={appBarTitle({\n          keyline,\n          className,\n        })}\n        textOverflow={textOverflow}\n      >\n        {children}\n      </Typography>\n    );\n  }\n);\n"],"names":["forwardRef","Typography","appBarTitle","AppBarTitle","props","ref","type","keyline","children","className","textOverflow","remaining"],"mappings":";AAAA,SAASA,UAAU,QAAQ,QAAQ;AAGnC,SAASC,UAAU,QAA8B,8BAA8B;AAE/E,SAA2CC,WAAW,QAAQ,cAAc;AAoB5E;;;;;;;;;;;;;;;;;;;;;;;CAuBC,GACD,OAAO,MAAMC,4BAAcH,WACzB,SAASG,YAAYC,KAAK,EAAEC,GAAG;IAC7B,MAAM,EACJC,OAAO,YAAY,EACnBC,UAAU,OAAO,EACjBC,QAAQ,EACRC,SAAS,EACTC,eAAe,UAAU,EACzB,GAAGC,WACJ,GAAGP;IACJ,qBACE,KAACH;QACE,GAAGU,SAAS;QACbN,KAAKA;QACLC,MAAMA;QACNG,WAAWP,YAAY;YACrBK;YACAE;QACF;QACAC,cAAcA;kBAEbF;;AAGP,GACA"}
+{"version":3,"sources":["../../src/app-bar/AppBarTitle.tsx"],"sourcesContent":["import { type ReactElement, type Ref } from \"react\";\n\nimport { type TextOverflow } from \"../cssUtils.js\";\nimport { Typography, type TypographyProps } from \"../typography/Typography.js\";\nimport { type TypographyType } from \"../typography/typographyStyles.js\";\nimport { type AppBarTitleClassNameOptions, appBarTitle } from \"./styles.js\";\n\n/**\n * @since 6.0.0 The `keyline` prop was changed from a boolean to a type\n * union of different keylines: {@link AppBarTitleKeyline}\n * @since 6.0.0 The `noWrap` prop was removed in favor of the `textOverflow`\n * prop inherited through the base `Typography` component. The `textOverflow`\n * will default to `\"ellipsis\"` which is new as well.\n */\nexport interface AppBarTitleProps\n  extends TypographyProps, AppBarTitleClassNameOptions {\n  ref?: Ref<HTMLHeadingElement>;\n\n  /** @defaultValue `\"headline-6\"` */\n  type?: TypographyType;\n\n  /**\n   * @defaultValue `\"ellipsis\"`\n   */\n  textOverflow?: TextOverflow;\n}\n\n/**\n * @example Updating the Keyline\n * ```tsx\n * import { AppBar } from \"@react-md/core/app-bar/AppBar\";\n * import { AppBarTitle } from \"@react-md/core/app-bar/AppBarTitle\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <AppBar>\n *       <AppBarTitle keyline=\"nav\">\n *         Offset as if there was a nav button to the left\n *       </AppBarTitle>\n *     </AppBar>\n *   );\n * }\n * ```\n *\n * @since 6.0.0 The `keyline` prop was changed from a boolean to a type\n * union of different keylines: {@link AppBarTitleKeyline}\n * @since 6.0.0 The `noWrap` prop was removed in favor of the `textOverflow`\n * prop inherited through the base `Typography` component. The `textOverflow`\n * will default to `\"ellipsis\"` which is new as well.\n */\nexport function AppBarTitle(props: AppBarTitleProps): ReactElement {\n  const {\n    ref,\n    type = \"headline-6\",\n    keyline = \"small\",\n    children,\n    className,\n    textOverflow = \"ellipsis\",\n    ...remaining\n  } = props;\n\n  return (\n    <Typography\n      {...remaining}\n      ref={ref}\n      type={type}\n      className={appBarTitle({\n        keyline,\n        className,\n      })}\n      textOverflow={textOverflow}\n    >\n      {children}\n    </Typography>\n  );\n}\n"],"names":["Typography","appBarTitle","AppBarTitle","props","ref","type","keyline","children","className","textOverflow","remaining"],"mappings":";AAGA,SAASA,UAAU,QAA8B,8BAA8B;AAE/E,SAA2CC,WAAW,QAAQ,cAAc;AAsB5E;;;;;;;;;;;;;;;;;;;;;;;CAuBC,GACD,OAAO,SAASC,YAAYC,KAAuB;IACjD,MAAM,EACJC,GAAG,EACHC,OAAO,YAAY,EACnBC,UAAU,OAAO,EACjBC,QAAQ,EACRC,SAAS,EACTC,eAAe,UAAU,EACzB,GAAGC,WACJ,GAAGP;IAEJ,qBACE,KAACH;QACE,GAAGU,SAAS;QACbN,KAAKA;QACLC,MAAMA;QACNG,WAAWP,YAAY;YACrBK;YACAE;QACF;QACAC,cAAcA;kBAEbF;;AAGP"}

package/dist/autocomplete/AutocompleteChip.d.ts

@@ -1,3 +1,4 @@
+import { type ReactElement } from "react";
 import { type AutocompleteChipProps } from "./types.js";
 /**
  * A small wrapper around the `Chip` that defaults the `rightAddon` to the
@@ -6,4 +7,4 @@ import { type AutocompleteChipProps } from "./types.js";
  * @see {@link https://react-md.dev/components/autocomplete | Autocomplete Demos}
  * @since 6.0.0
  */
-export declare const AutocompleteChip: import("react").ForwardRefExoticComponent<AutocompleteChipProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare function AutocompleteChip(props: AutocompleteChipProps): ReactElement;

package/dist/autocomplete/AutocompleteChip.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { Chip } from "../chip/Chip.js";
 import { getIcon } from "../icon/config.js";
 import { autocompleteChip } from "./autocompleteStyles.js";
@@ -9,8 +8,8 @@ import { autocompleteChip } from "./autocompleteStyles.js";
  *
  * @see {@link https://react-md.dev/components/autocomplete | Autocomplete Demos}
  * @since 6.0.0
- */ export const AutocompleteChip = /*#__PURE__*/ forwardRef(function AutocompleteChip(props, ref) {
-    const { "aria-description": propAriaDescription, children, className, removeIcon: propRemoveIcon, rightAddon: propRightAddon, ...remaining } = props;
+ */ export function AutocompleteChip(props) {
+    const { ref, "aria-description": propAriaDescription, children, className, removeIcon: propRemoveIcon, rightAddon: propRightAddon, ...remaining } = props;
     let rightAddon = propRightAddon;
     let ariaDescription = propAriaDescription;
     const removeIcon = getIcon("remove", propRemoveIcon);
@@ -30,6 +29,6 @@ import { autocompleteChip } from "./autocompleteStyles.js";
         }),
         children: children
     });
-});
+}
 
 //# sourceMappingURL=AutocompleteChip.js.map

package/dist/autocomplete/AutocompleteChip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/autocomplete/AutocompleteChip.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport { Chip } from \"../chip/Chip.js\";\nimport { getIcon } from \"../icon/config.js\";\nimport { autocompleteChip } from \"./autocompleteStyles.js\";\nimport { type AutocompleteChipProps } from \"./types.js\";\n\n/**\n * A small wrapper around the `Chip` that defaults the `rightAddon` to the\n * remove icon and adds a default `aria-description`.\n *\n * @see {@link https://react-md.dev/components/autocomplete | Autocomplete Demos}\n * @since 6.0.0\n */\nexport const AutocompleteChip = forwardRef<\n  HTMLButtonElement,\n  AutocompleteChipProps\n>(function AutocompleteChip(props, ref) {\n  const {\n    \"aria-description\": propAriaDescription,\n    children,\n    className,\n    removeIcon: propRemoveIcon,\n    rightAddon: propRightAddon,\n    ...remaining\n  } = props;\n\n  let rightAddon = propRightAddon;\n  let ariaDescription = propAriaDescription;\n  const removeIcon = getIcon(\"remove\", propRemoveIcon);\n  if (rightAddon === undefined) {\n    rightAddon = removeIcon;\n  }\n\n  if (ariaDescription === undefined && typeof children === \"string\") {\n    ariaDescription = `Remove \"${children}\"`;\n  }\n\n  return (\n    <Chip\n      {...remaining}\n      aria-description={ariaDescription}\n      ref={ref}\n      rightAddon={rightAddon}\n      className={autocompleteChip({ className })}\n    >\n      {children}\n    </Chip>\n  );\n});\n"],"names":["forwardRef","Chip","getIcon","autocompleteChip","AutocompleteChip","props","ref","propAriaDescription","children","className","removeIcon","propRemoveIcon","rightAddon","propRightAddon","remaining","ariaDescription","undefined","aria-description"],"mappings":";AAAA,SAASA,UAAU,QAAQ,QAAQ;AAEnC,SAASC,IAAI,QAAQ,kBAAkB;AACvC,SAASC,OAAO,QAAQ,oBAAoB;AAC5C,SAASC,gBAAgB,QAAQ,0BAA0B;AAG3D;;;;;;CAMC,GACD,OAAO,MAAMC,iCAAmBJ,WAG9B,SAASI,iBAAiBC,KAAK,EAAEC,GAAG;IACpC,MAAM,EACJ,oBAAoBC,mBAAmB,EACvCC,QAAQ,EACRC,SAAS,EACTC,YAAYC,cAAc,EAC1BC,YAAYC,cAAc,EAC1B,GAAGC,WACJ,GAAGT;IAEJ,IAAIO,aAAaC;IACjB,IAAIE,kBAAkBR;IACtB,MAAMG,aAAaR,QAAQ,UAAUS;IACrC,IAAIC,eAAeI,WAAW;QAC5BJ,aAAaF;IACf;IAEA,IAAIK,oBAAoBC,aAAa,OAAOR,aAAa,UAAU;QACjEO,kBAAkB,CAAC,QAAQ,EAAEP,SAAS,CAAC,CAAC;IAC1C;IAEA,qBACE,KAACP;QACE,GAAGa,SAAS;QACbG,oBAAkBF;QAClBT,KAAKA;QACLM,YAAYA;QACZH,WAAWN,iBAAiB;YAAEM;QAAU;kBAEvCD;;AAGP,GAAG"}
+{"version":3,"sources":["../../src/autocomplete/AutocompleteChip.tsx"],"sourcesContent":["import { type ReactElement } from \"react\";\n\nimport { Chip } from \"../chip/Chip.js\";\nimport { getIcon } from \"../icon/config.js\";\nimport { autocompleteChip } from \"./autocompleteStyles.js\";\nimport { type AutocompleteChipProps } from \"./types.js\";\n\n/**\n * A small wrapper around the `Chip` that defaults the `rightAddon` to the\n * remove icon and adds a default `aria-description`.\n *\n * @see {@link https://react-md.dev/components/autocomplete | Autocomplete Demos}\n * @since 6.0.0\n */\nexport function AutocompleteChip(props: AutocompleteChipProps): ReactElement {\n  const {\n    ref,\n    \"aria-description\": propAriaDescription,\n    children,\n    className,\n    removeIcon: propRemoveIcon,\n    rightAddon: propRightAddon,\n    ...remaining\n  } = props;\n\n  let rightAddon = propRightAddon;\n  let ariaDescription = propAriaDescription;\n  const removeIcon = getIcon(\"remove\", propRemoveIcon);\n  if (rightAddon === undefined) {\n    rightAddon = removeIcon;\n  }\n\n  if (ariaDescription === undefined && typeof children === \"string\") {\n    ariaDescription = `Remove \"${children}\"`;\n  }\n\n  return (\n    <Chip\n      {...remaining}\n      aria-description={ariaDescription}\n      ref={ref}\n      rightAddon={rightAddon}\n      className={autocompleteChip({ className })}\n    >\n      {children}\n    </Chip>\n  );\n}\n"],"names":["Chip","getIcon","autocompleteChip","AutocompleteChip","props","ref","propAriaDescription","children","className","removeIcon","propRemoveIcon","rightAddon","propRightAddon","remaining","ariaDescription","undefined","aria-description"],"mappings":";AAEA,SAASA,IAAI,QAAQ,kBAAkB;AACvC,SAASC,OAAO,QAAQ,oBAAoB;AAC5C,SAASC,gBAAgB,QAAQ,0BAA0B;AAG3D;;;;;;CAMC,GACD,OAAO,SAASC,iBAAiBC,KAA4B;IAC3D,MAAM,EACJC,GAAG,EACH,oBAAoBC,mBAAmB,EACvCC,QAAQ,EACRC,SAAS,EACTC,YAAYC,cAAc,EAC1BC,YAAYC,cAAc,EAC1B,GAAGC,WACJ,GAAGT;IAEJ,IAAIO,aAAaC;IACjB,IAAIE,kBAAkBR;IACtB,MAAMG,aAAaR,QAAQ,UAAUS;IACrC,IAAIC,eAAeI,WAAW;QAC5BJ,aAAaF;IACf;IAEA,IAAIK,oBAAoBC,aAAa,OAAOR,aAAa,UAAU;QACjEO,kBAAkB,CAAC,QAAQ,EAAEP,SAAS,CAAC,CAAC;IAC1C;IAEA,qBACE,KAACP;QACE,GAAGa,SAAS;QACbG,oBAAkBF;QAClBT,KAAKA;QACLM,YAAYA;QACZH,WAAWN,iBAAiB;YAAEM;QAAU;kBAEvCD;;AAGP"}

package/dist/autocomplete/types.d.ts

@@ -450,6 +450,7 @@ export interface AutocompleteCircularProgressProps extends CircularProgressProps
  * @since 6.0.0
  */
 export interface AutocompleteChipProps extends ChipProps {
+    ref?: Ref<HTMLButtonElement>;
     /**
      * @defaultValue `typeof children === "string" ? \`Remove "${children}"\` : undefined`
      */

package/dist/autocomplete/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/autocomplete/types.ts"],"sourcesContent":["import {\n  type AriaAttributes,\n  type ChangeEventHandler,\n  type Dispatch,\n  type FocusEventHandler,\n  type MouseEventHandler,\n  type ReactNode,\n  type Ref,\n} from \"react\";\n\nimport { type ButtonProps } from \"../button/Button.js\";\nimport { type ChipProps } from \"../chip/Chip.js\";\nimport {\n  type OptionProps,\n  type OptionSelectedIconProps,\n} from \"../form/Option.js\";\nimport { type TextFieldProps } from \"../form/TextField.js\";\nimport {\n  type ComboboxMenuProps,\n  type ComboboxVisibilityOptions,\n  type ConfigurableComboboxMenuProps,\n} from \"../form/useCombobox.js\";\nimport {\n  type EditableComboboxImplementation,\n  type EditableComboboxOptions,\n  type EditableComboboxWidgetProps,\n} from \"../form/useEditableCombobox.js\";\nimport { type EditableHTMLElement } from \"../form/utils.js\";\nimport { type IconRotatorProps } from \"../icon/IconRotator.js\";\nimport { type CircularProgressProps } from \"../progress/CircularProgress.js\";\nimport { type ProgressTheme } from \"../progress/types.js\";\nimport { type BaseSearchOptions } from \"../searching/types.js\";\nimport {\n  type AutomaticTextExtraction,\n  type PropsWithRef,\n  type TextExtractor,\n  type UseStateInitializer,\n} from \"../types.js\";\n\n// NOTE: The augmentation appears in this file since both\n// the `Autocomplete` and `autocompleteStyles` import this\n// file. The augmentation only works if a type definition\n// exists in the compiled `*.d.ts`\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-autocomplete-clear-button-size\"?: string;\n    \"--rmd-autocomplete-dropdown-button-size\"?: string;\n    \"--rmd-autocomplete-circular-progress-size\"?: string;\n    \"--rmd-autocomplete-inline-gap\"?: string;\n    \"--rmd-autocomplete-inline-min-width\"?: string;\n    \"--rmd-autocomplete-addon-gap\"?: string;\n    \"--rmd-autocomplete-gap-count\"?: string;\n    \"--rmd-autocomplete-addon-spacing\"?: string;\n  }\n}\n\n/**\n * If a autocomplete value is one of these types, no additional code is required\n * to display a label in the input/chip for the autocomplete once the value has\n * been selected.\n *\n * - `\"some value\"` -&gt; `\"some value\"`\n * - `{ label: \"Hello, world\", value: 300 }` -&gt; `\"Hello, world!\"`\n * - `{ name: \"Hello, world\", value: 300 }` -&gt; `\"Hello, world!\"`\n *\n * @since 6.0.0\n * @deprecated @since 6.2.0 Use `AutomaticTextExtraction` instead.\n */\nexport type AutocompleteLabeledOption = AutomaticTextExtraction;\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteOption = AutomaticTextExtraction | object;\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteFilterOptions<Option extends AutocompleteOption> = Pick<\n  Required<BaseSearchOptions<Option>>,\n  \"list\" | \"query\" | \"extractor\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteFilterFunction<Option extends AutocompleteOption> = (\n  options: AutocompleteFilterOptions<Option>\n) => readonly Option[];\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteGetOptionPropsOptions<\n  Option extends AutocompleteOption,\n> {\n  index: number;\n  query: string;\n  option: Option;\n  selected: boolean;\n  extractor: TextExtractor<Option>;\n}\n\n/**\n * @see {@link AutocompleteGetOptionProps.getOptionProps}\n * @since 6.0.0\n */\nexport type AutocompleteGetOptionPropsCallback<\n  Option extends AutocompleteOption,\n> = (\n  options: AutocompleteGetOptionPropsOptions<Option>\n) => ConfigurableAutocompleteOptionProps | undefined;\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteGetOptionProps<Option extends AutocompleteOption> {\n  /**\n   * This can be used to add additional props to each option.\n   *\n   * @example Simple Example\n   * ```tsx\n   * getOptionProps={({ option }) => {\n   *   return {\n   *     disabled: option === \"\",\n   *     className: cnb(option === \"a\" && styles.blue),\n   *     leftAddon: option === value && <CheckIcon />,\n   *   };\n   * }}\n   * ```\n   *\n   * @see {@link AutocompleteGetOptionPropsOptions}\n   * @see {@link AutocompleteGetOptionPropsCallback}\n   * @since 6.0.0\n   */\n  getOptionProps?: AutocompleteGetOptionPropsCallback<Option>;\n}\n\n/**\n * @see {@link AutocompleteBaseProps.getChipProps}\n * @since 6.0.0\n */\nexport type AutocompleteGetChipProps<Option extends AutocompleteOption> = (\n  options: Omit<AutocompleteGetOptionPropsOptions<Option>, \"selected\">\n) => Partial<AutocompleteChipProps> | undefined;\n\n/**\n * @see {@link AutocompleteGetOptionLabel}\n * @since 6.0.0\n */\nexport type AutocompleteGetOptionLabelCallback<\n  Option extends AutocompleteOption,\n> = (option: Option) => string;\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteGetOptionLabel<Option extends AutocompleteOption> {\n  /**\n   * If the list of options contain an object that doesn't have a\n   * `label: string`, this prop must be provided to extract a string to display\n   * in the text field once selected.\n   *\n   * @example No Getter Required\n   * ```tsx\n   * const options1 = ['a', 'b', 'c', 'd'];\n   * const options2 = [{ label: 'a' }, { label: 'b' }, { label: 'c' }, { label: 'd' }];\n   *\n   * <Autocomplete options={options1} />\n   * <Autocomplete options={options2} />\n   * ```\n   *\n   * @example Getter Required\n   * ```tsx\n   * const options = [\n   *   {\n   *     name: \"Alaska\",\n   *     abbr: \"AK\",\n   *   },\n   *   {\n   *     name: \"Arizona\",\n   *     abbr: \"AZ\",\n   *   }\n   * ];\n   *\n   * <Autocomplete options={options} getOptionLabel={(state) => state.name} />\n   * ```\n   *\n   * @defaultValue `defaultAutocompleteExtractor`\n   * @since 6.0.0\n   */\n  getOptionLabel?: AutocompleteGetOptionLabelCallback<Option>;\n}\n\n/**\n * @since 6.0.0\n */\nexport type ConfigurableAutocompleteOptionProps = Partial<\n  Omit<OptionProps, \"role\" | \"value\">\n>;\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteControlledValue<T> {\n  value: T;\n  setValue: Dispatch<T>;\n  defaultValue?: never;\n  onValueChange?: never;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteUncontrolledValue<T> {\n  value?: never;\n  setValue?: never;\n  defaultValue?: UseStateInitializer<T>;\n\n  /**\n   * This prop should be used when some action should occur whenever the value\n   * changes, but is not required to be stored in state. For all other cases, it\n   * is recommended to control the `value` instead of using this prop.\n   *\n   * @defaultValue `() => {}`\n   */\n  onValueChange?: (value: T) => void;\n}\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteValue<T> =\n  | AutocompleteControlledValue<T>\n  | AutocompleteUncontrolledValue<T>;\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteControlledQuery {\n  query: string;\n  setQuery: Dispatch<string>;\n  defaultQuery?: never;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteUncontrolledQuery {\n  query?: never;\n  setQuery?: never;\n  defaultQuery?: UseStateInitializer<string>;\n}\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteQuery =\n  | AutocompleteControlledQuery\n  | AutocompleteUncontrolledQuery;\n\n/**\n * This allows the `query` to be updated whenever a new value has been selected.\n *\n * - `\"clear\"` - clears the `query`\n * - `\"selected\"` - sets the \tquery\t to the selected value's label\n * - `\"as-is\"` - doesn't change the `query`\n *\n * @defaultValue `(multiselect || Array.isArray(value ?? defaultValue)) ? \"clear\" : \"selected\"`\n * @since 6.0.0\n */\nexport type AutocompleteUpdateQueryOnSelect = \"clear\" | \"selected\" | \"as-is\";\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteUnknownQueryAndValueOptions<\n  Option extends AutocompleteOption,\n> {\n  query?: string;\n  setQuery?: Dispatch<string>;\n  defaultQuery?: UseStateInitializer<string>;\n  value?: Option | null | readonly Option[];\n  setValue?: Dispatch<Option | null | readonly Option[]>;\n  defaultValue?: UseStateInitializer<Option | null | readonly Option[]>;\n  onValueChange?: (value: Option | null | readonly Option[]) => void;\n}\n\n/**\n * A utility type that makes the `getOptionLabel` required when an option is not\n * a {@link AutomaticTextExtraction}.\n *\n * @since 6.0.0\n */\nexport type AutocompleteOptionLabelExtractor<\n  Option extends AutocompleteOption,\n> = Option extends AutomaticTextExtraction\n  ? AutocompleteGetOptionLabel<Option>\n  : Required<AutocompleteGetOptionLabel<Option>>;\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteFilteringOptions<\n  Option extends AutocompleteOption,\n> extends AutocompleteGetOptionLabel<Option> {\n  /**\n   * The list of options that can be shown within the autocomplete and filtered\n   * based on the current query.\n   */\n  options: readonly Option[];\n\n  /**\n   * The function that filters the {@link options} based on the current query\n   * and defaults to a case insensitive search that starts with the query.\n   *\n   * @example Case Insensitive Anywhere\n   * ```tsx\n   * import { caseInsensitiveSearch } from \"@react-md/core/searching/caseInsensitive\";\n   *\n   * <Autocomplete {...props} filter={caseInsensitiveSearch} />\n   * ```\n   *\n   * @example Fuzzy Filtering\n   * ```tsx\n   * import { fuzzySearch } from \"@react-md/core/searching/fuzzy\";\n   *\n   * <Autocomplete {...props} filter={fuzzySearch} />\n   * ```\n   *\n   * @example Async Searching\n   * ```tsx\n   * import { useDebouncedFunction } from \"@react-md/core/useDebouncedFunction\";\n   * import { useState } from \"react\";\n   *\n   * interface State {\n   *   loading: boolean;\n   *   options: readonly string[];\n   * }\n   *\n   * function Example() {\n   *   const [state, setState] = useState<State>({\n   *     loading: false,\n   *     options: [],\n   *   });\n   *\n   *   const search = useDebouncedFunction(async (query: string) => {\n   *     setState(prev => ({ ...prev, loading: true }));\n   *\n   *     const options = await someAsyncTask(query);\n   *     setState({ loading: false, options })\n   *   });\n   *\n   *   return (\n   *     <Autocomplete\n   *       {...props}\n   *       // Setting `type=\"search\"` automatically updates the `filter` prop to\n   *       // be `noopAutocompleteFilter`\n   *       type=\"search\"\n   *       options={options}\n   *       onChange={(event) => search(event.currentTarget.value)}\n   *     />\n   *   );\n   * }\n   * ```\n   *\n   * @defaultValue `defaultAutocompleteFilter`\n   */\n  filter?: AutocompleteFilterFunction<Option>;\n\n  /**\n   * Set this to `true` to update the filtering behavior to also remove the\n   * selected value from the available options. This is mostly for the\n   * multiselect behavior.\n   *\n   * @defaultValue `false`\n   */\n  filterSelected?: boolean;\n\n  /**\n   * Set this to `true` to allow any value to be typed into the autocomplete\n   * instead of enforcing an empty string or one of the option labels.\n   *\n   * @defaultValue `filter === noopAutocompleteFilter`\n   */\n  allowAnyValue?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteFilterAndListboxOptions<\n  Option extends AutocompleteOption,\n>\n  extends\n    AutocompleteFilteringOptions<Option>,\n    AutocompleteGetOptionProps<Option>,\n    OptionSelectedIconProps {\n  /**\n   * Set this to `true` when using a multiselect autocomplete to update each\n   * option to use checkboxes to show the selection state.\n   *\n   * @defaultValue `false`\n   */\n  checkboxes?: boolean;\n\n  /**\n   * @see {@link OptionSelectedIconProps.disableSelectedIcon}\n   * @defaultValue `!checkboxes`\n   */\n  disableSelectedIcon?: boolean;\n\n  /**\n   * @see {@link AutocompleteUpdateQueryOnSelect}\n   * @defaultValue `multiselect ? \"clear\" : \"selected\"`\n   */\n  updateQueryOnSelect?: AutocompleteUpdateQueryOnSelect;\n\n  /**\n   * Set this to `true` to prevent the listbox from closing when an option is\n   * selected.\n   *\n   * @defaultValue `checkboxes`\n   */\n  disableCloseOnSelect?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteEditableComboboxOptions<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n>\n  extends\n    EditableComboboxOptions<ComboboxEl, PopupEl>,\n    AutocompleteFilterAndListboxOptions<Option> {\n  onBlur?: FocusEventHandler<ComboboxEl>;\n  onChange?: ChangeEventHandler<ComboboxEl>;\n\n  /**\n   * This is a convenience prop for the `onEntering`/`onEntered` transition\n   * callbacks that will ensure it is only called once even if the transitions\n   * are disabled. A great use-case for this function is to fetch data once the\n   * menu is opened.\n   */\n  onOpen?: () => void;\n}\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteQueryAndExtractorOptions<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> = AutocompleteEditableComboboxOptions<Option, ComboboxEl, PopupEl> &\n  AutocompleteOptionLabelExtractor<Option> &\n  AutocompleteQuery;\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteSingleSelectOptions<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> = AutocompleteQueryAndExtractorOptions<Option, ComboboxEl, PopupEl> &\n  AutocompleteValue<Option | null>;\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteMultiSelectOptions<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> = AutocompleteQueryAndExtractorOptions<Option, ComboboxEl, PopupEl> &\n  AutocompleteValue<readonly Option[]>;\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteOptions<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n>\n  extends\n    AutocompleteEditableComboboxOptions<Option, ComboboxEl, PopupEl>,\n    AutocompleteUnknownQueryAndValueOptions<Option> {}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteComboboxProps<\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n> extends EditableComboboxWidgetProps<ComboboxEl> {\n  \"aria-autocomplete\": NonNullable<AriaAttributes[\"aria-autocomplete\"]>;\n  value: string;\n  onBlur: FocusEventHandler<ComboboxEl>;\n  onChange: ChangeEventHandler<ComboboxEl>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteListboxProps<\n  T extends AutocompleteOption = AutocompleteOption,\n  PopupEl extends HTMLElement = HTMLElement,\n>\n  extends Omit<ComboboxMenuProps<PopupEl>, \"ref\">, OptionSelectedIconProps {\n  value: T | null | readonly T[];\n  setValue: Dispatch<T>;\n  onEnter: (appearing: boolean) => void;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ConfigurableAutocompleteListboxProps\n  extends ConfigurableComboboxMenuProps, OptionSelectedIconProps {\n  id?: string;\n}\n\n/**\n * - `\"always\"` - the clear button is always visible\n * - `\"active\"` - the clear button will be visible when:\n *   - the user moves focus within the autocomplete\n *   - the user hovers the autocomplete\n * - `\"query\"` - the clear button will be visible when:\n *   - the input has a value and:\n *     - the user moves focus within the autocomplete\n *     - the user hovers the autocomplete\n *\n * @since 6.0.0\n */\nexport type ClearButtonVisibility = \"query\" | \"active\" | \"always\";\n\n/**\n * @since 6.0.0\n */\nexport interface ConfigurableAutocompleteClearButtonProps extends ButtonProps {\n  /** @defaultValue `\"Clear\"` */\n  \"aria-label\"?: string;\n\n  /** @defaultValue `\"autocomplete-clear-\" + useId()` */\n  id?: string;\n\n  /** {@inheritDoc ClearButtonVisibility} */\n  visibility?: ClearButtonVisibility;\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface AutocompleteClearButtonProps extends ConfigurableAutocompleteClearButtonProps {\n  onClick: MouseEventHandler<HTMLButtonElement>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ConfigurableAutocompleteDropdownButtonProps extends ButtonProps {\n  /** @defaultValue `AutocompleteProps.listboxLabel` */\n  \"aria-label\"?: string;\n  /** @defaultValue `AutocompleteProps.listboxLabelledby` */\n  \"aria-labelledby\"?: string;\n\n  /** @defaultValue `\"autocomplete-dropdown-\" + useId()` */\n  id?: string;\n\n  /** @defaultValue `getIcon(\"dropdown\")` */\n  icon?: ReactNode;\n  iconRotatorProps?: Omit<IconRotatorProps, \"rotated\">;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteDropdownButtonProps extends ConfigurableAutocompleteDropdownButtonProps {\n  \"aria-controls\": string;\n  onClick: MouseEventHandler<HTMLButtonElement>;\n  visible: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteCircularProgressProps extends CircularProgressProps {\n  /** @defaultValue `\"Loading\"` */\n  \"aria-label\"?: string;\n\n  /** @defaultValue `\"current-color\"` */\n  theme?: ProgressTheme;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteChipProps extends ChipProps {\n  /**\n   * @defaultValue `typeof children === \"string\" ? \\`Remove \"${children}\"\\` : undefined`\n   */\n  \"aria-description\"?: string;\n\n  /** @defaultValue `getIcon(\"remove\")` */\n  removeIcon?: ReactNode;\n  children: ReactNode;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteWithQueryImplementation<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n>\n  extends\n    EditableComboboxImplementation<ComboboxEl, PopupEl>,\n    Required<AutocompleteGetOptionProps<Option>>,\n    Required<AutocompleteGetOptionLabel<Option>> {\n  query: string;\n  setQuery: Dispatch<string>;\n  comboboxProps: AutocompleteComboboxProps<ComboboxEl>;\n\n  /**\n   * This is a convenience prop to determine if the autocomplete supports\n   * multiselect.\n   */\n  multiselect: boolean;\n\n  /**\n   * This is the current list of options that will be filtered based on the\n   * current `query`. This should normally be rendered in the\n   * `AutocompleteListboxChildren` component\n   */\n  availableOptions: readonly Option[];\n\n  /**\n   * Generates the props required for the `Listbox` component and should\n   * normally be provided any menu props that might override the default display\n   * settings.\n   */\n  getListboxProps: (\n    overrides?: ConfigurableAutocompleteListboxProps\n  ) => AutocompleteListboxProps<Option, PopupEl>;\n\n  /**\n   * Generates the props required for the `AutocompleteClearButton`.\n   */\n  getClearButtonProps: (\n    overrides?: ConfigurableAutocompleteClearButtonProps\n  ) => AutocompleteClearButtonProps;\n\n  /**\n   * Generates the props required for the `AutocompleteDropdownButton`.\n   */\n  getDropdownButtonProps: (\n    overrides?: ConfigurableAutocompleteDropdownButtonProps\n  ) => AutocompleteDropdownButtonProps;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteSingleSelectImplementation<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends AutocompleteWithQueryImplementation<Option, ComboboxEl, PopupEl> {\n  value: Option | null;\n  setValue: Dispatch<Option | null>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteMultiSelectImplementation<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends AutocompleteWithQueryImplementation<Option, ComboboxEl, PopupEl> {\n  value: readonly Option[];\n  setValue: Dispatch<readonly Option[]>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteImplementation<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends AutocompleteWithQueryImplementation<Option, ComboboxEl, PopupEl> {\n  value: Option | null | readonly Option[];\n  setValue: Dispatch<Option | null | readonly Option[]>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteBaseProps<Option extends AutocompleteOption>\n  extends\n    Omit<TextFieldProps, \"value\" | \"defaultValue\">,\n    AutocompleteFilterAndListboxOptions<Option>,\n    ComboboxVisibilityOptions {\n  inputRef?: Ref<HTMLInputElement>;\n\n  /**\n   * An `aria-label` to pass to the `Listbox` component that describes the list\n   * of {@link options}. Either this or the {@link listboxLabelledBy} are\n   * required for accessibility.\n   */\n  listboxLabel?: string;\n\n  /**\n   * An `aria-labelledby` to pass to the `Listbox` component that describes the\n   * list of {@link options}. Either this or the {@link listboxLabel} are\n   * required for accessibility.\n   */\n  listboxLabelledBy?: string;\n\n  /**\n   * Any additional props that should be passed to the `Listbox` component.\n   */\n  listboxProps?: PropsWithRef<ConfigurableAutocompleteListboxProps>;\n\n  /**\n   * This can be used to add any custom styling, change the icon, change the\n   * label, etc for the dropdown button.\n   *\n   * @example Simple Example\n   * ```tsx\n   * dropdownButtonProps={{\n   *   \"aria-label\": \"Open\",\n   *   className: styles.dropdownButton,\n   *   icon: <MyCustomDropdownIcon />,\n   * }}\n   * ```\n   */\n  dropdownButtonProps?: ConfigurableAutocompleteDropdownButtonProps;\n\n  /**\n   * Set this to `true` to remove the {@link DropdownButton} from being rendered\n   * after the input element.\n   *\n   * @defaultValue `false`\n   */\n  disableDropdownButton?: boolean;\n\n  /**\n   * Set this to `true` to disable a `<CircularProgress />` after the input and\n   * before the `<DropdownButton />`.\n   *\n   * @defaultValue `false`\n   */\n  loading?: boolean;\n\n  /**\n   * @defaultValue `{ \"aria-label\": \"Loading\", ...loadingProps }`\n   */\n  loadingProps?: AutocompleteCircularProgressProps;\n\n  /**\n   * This will do nothing if {@link disableClearButton} is `true`.\n   */\n  clearButtonProps?: PropsWithRef<ConfigurableAutocompleteClearButtonProps>;\n\n  /**\n   * Set to `true` to hide the clear button that appears when hovering an\n   * `Autocomplete` that has a value. The user will still be able to clear the\n   * value quickly using the `Escape` key.\n   *\n   * @defaultValue `false`\n   */\n  disableClearButton?: boolean;\n\n  /**\n   * - `\"always\"` - the clear button is always visible\n   * - `\"active\"` - the clear button will be visible when:\n   *   - the user moves focus within the autocomplete\n   *   - the user hovers the autocomplete\n   * - `\"query\"` - the clear button will be visible when:\n   *   - the input has a value and:\n   *     - the user moves focus within the autocomplete\n   *     - the user hovers the autocomplete\n   *\n   * @defaultValue `\"query\"`\n   */\n  clearButtonVisibility?: ClearButtonVisibility;\n\n  /**\n   * This is a convenience prop for the `onEntering`/`onEntered` transition\n   * callbacks that will ensure it is only called once even if the transitions\n   * are disabled. A great use-case for this function is to fetch data once the\n   * menu is opened.\n   */\n  onOpen?: () => void;\n\n  /**\n   * The children to display when there are no {@link options} due to the\n   * current text box value.\n   *\n   * @defaultValue `<ListSubheader>No options</ListSubheader`\n   */\n  noOptionsChildren?: ReactNode;\n\n  /**\n   * Set this to `true` when using a multiselect autocomplete to prevent the\n   * selected values from being rendered inline with the input. This is useful\n   * when the selected values should be shown in a different part of the UI\n   * instead.\n   *\n   * @defaultValue `false`\n   */\n  disableInlineChips?: boolean;\n\n  /**\n   * This can be used to add additional props to each inline chip for multiselect\n   * autocompletes.\n   *\n   * @example Simple Example\n   * ```tsx\n   * getChipProps={({ option, index }) => {\n   *   return {\n   *     disabled: index < 3,\n   *     className: cnb(option === \"a\" && styles.blue)<\n   *   };\n   * }}\n   * ```\n   */\n  getChipProps?: AutocompleteGetChipProps<Option>;\n}\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteListboxLabelProps =\n  | { listboxLabel: string }\n  | { listboxLabelledBy: string };\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteQueryAndExtractorProps<\n  Option extends AutocompleteOption,\n> = AutocompleteBaseProps<Option> &\n  AutocompleteOptionLabelExtractor<Option> &\n  AutocompleteQuery &\n  AutocompleteListboxLabelProps;\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteSingleSelectProps<Option extends AutocompleteOption> =\n  AutocompleteQueryAndExtractorProps<Option> &\n    AutocompleteValue<Option | null> & {\n      checkboxes?: never;\n      getChipProps?: never;\n      disableInlineChips?: never;\n    };\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteMultiSelectProps<Option extends AutocompleteOption> =\n  AutocompleteQueryAndExtractorProps<Option> &\n    AutocompleteValue<readonly Option[]>;\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteProps<Option extends AutocompleteOption> =\n  AutocompleteBaseProps<Option> &\n    AutocompleteUnknownQueryAndValueOptions<Option>;\n"],"names":[],"mappings":"AAy2BA;;CAEC,GACD,WAEoD"}
+{"version":3,"sources":["../../src/autocomplete/types.ts"],"sourcesContent":["import {\n  type AriaAttributes,\n  type ChangeEventHandler,\n  type Dispatch,\n  type FocusEventHandler,\n  type MouseEventHandler,\n  type ReactNode,\n  type Ref,\n} from \"react\";\n\nimport { type ButtonProps } from \"../button/Button.js\";\nimport { type ChipProps } from \"../chip/Chip.js\";\nimport {\n  type OptionProps,\n  type OptionSelectedIconProps,\n} from \"../form/Option.js\";\nimport { type TextFieldProps } from \"../form/TextField.js\";\nimport {\n  type ComboboxMenuProps,\n  type ComboboxVisibilityOptions,\n  type ConfigurableComboboxMenuProps,\n} from \"../form/useCombobox.js\";\nimport {\n  type EditableComboboxImplementation,\n  type EditableComboboxOptions,\n  type EditableComboboxWidgetProps,\n} from \"../form/useEditableCombobox.js\";\nimport { type EditableHTMLElement } from \"../form/utils.js\";\nimport { type IconRotatorProps } from \"../icon/IconRotator.js\";\nimport { type CircularProgressProps } from \"../progress/CircularProgress.js\";\nimport { type ProgressTheme } from \"../progress/types.js\";\nimport { type BaseSearchOptions } from \"../searching/types.js\";\nimport {\n  type AutomaticTextExtraction,\n  type PropsWithRef,\n  type TextExtractor,\n  type UseStateInitializer,\n} from \"../types.js\";\n\n// NOTE: The augmentation appears in this file since both\n// the `Autocomplete` and `autocompleteStyles` import this\n// file. The augmentation only works if a type definition\n// exists in the compiled `*.d.ts`\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-autocomplete-clear-button-size\"?: string;\n    \"--rmd-autocomplete-dropdown-button-size\"?: string;\n    \"--rmd-autocomplete-circular-progress-size\"?: string;\n    \"--rmd-autocomplete-inline-gap\"?: string;\n    \"--rmd-autocomplete-inline-min-width\"?: string;\n    \"--rmd-autocomplete-addon-gap\"?: string;\n    \"--rmd-autocomplete-gap-count\"?: string;\n    \"--rmd-autocomplete-addon-spacing\"?: string;\n  }\n}\n\n/**\n * If a autocomplete value is one of these types, no additional code is required\n * to display a label in the input/chip for the autocomplete once the value has\n * been selected.\n *\n * - `\"some value\"` -&gt; `\"some value\"`\n * - `{ label: \"Hello, world\", value: 300 }` -&gt; `\"Hello, world!\"`\n * - `{ name: \"Hello, world\", value: 300 }` -&gt; `\"Hello, world!\"`\n *\n * @since 6.0.0\n * @deprecated @since 6.2.0 Use `AutomaticTextExtraction` instead.\n */\nexport type AutocompleteLabeledOption = AutomaticTextExtraction;\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteOption = AutomaticTextExtraction | object;\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteFilterOptions<Option extends AutocompleteOption> = Pick<\n  Required<BaseSearchOptions<Option>>,\n  \"list\" | \"query\" | \"extractor\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteFilterFunction<Option extends AutocompleteOption> = (\n  options: AutocompleteFilterOptions<Option>\n) => readonly Option[];\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteGetOptionPropsOptions<\n  Option extends AutocompleteOption,\n> {\n  index: number;\n  query: string;\n  option: Option;\n  selected: boolean;\n  extractor: TextExtractor<Option>;\n}\n\n/**\n * @see {@link AutocompleteGetOptionProps.getOptionProps}\n * @since 6.0.0\n */\nexport type AutocompleteGetOptionPropsCallback<\n  Option extends AutocompleteOption,\n> = (\n  options: AutocompleteGetOptionPropsOptions<Option>\n) => ConfigurableAutocompleteOptionProps | undefined;\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteGetOptionProps<Option extends AutocompleteOption> {\n  /**\n   * This can be used to add additional props to each option.\n   *\n   * @example Simple Example\n   * ```tsx\n   * getOptionProps={({ option }) => {\n   *   return {\n   *     disabled: option === \"\",\n   *     className: cnb(option === \"a\" && styles.blue),\n   *     leftAddon: option === value && <CheckIcon />,\n   *   };\n   * }}\n   * ```\n   *\n   * @see {@link AutocompleteGetOptionPropsOptions}\n   * @see {@link AutocompleteGetOptionPropsCallback}\n   * @since 6.0.0\n   */\n  getOptionProps?: AutocompleteGetOptionPropsCallback<Option>;\n}\n\n/**\n * @see {@link AutocompleteBaseProps.getChipProps}\n * @since 6.0.0\n */\nexport type AutocompleteGetChipProps<Option extends AutocompleteOption> = (\n  options: Omit<AutocompleteGetOptionPropsOptions<Option>, \"selected\">\n) => Partial<AutocompleteChipProps> | undefined;\n\n/**\n * @see {@link AutocompleteGetOptionLabel}\n * @since 6.0.0\n */\nexport type AutocompleteGetOptionLabelCallback<\n  Option extends AutocompleteOption,\n> = (option: Option) => string;\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteGetOptionLabel<Option extends AutocompleteOption> {\n  /**\n   * If the list of options contain an object that doesn't have a\n   * `label: string`, this prop must be provided to extract a string to display\n   * in the text field once selected.\n   *\n   * @example No Getter Required\n   * ```tsx\n   * const options1 = ['a', 'b', 'c', 'd'];\n   * const options2 = [{ label: 'a' }, { label: 'b' }, { label: 'c' }, { label: 'd' }];\n   *\n   * <Autocomplete options={options1} />\n   * <Autocomplete options={options2} />\n   * ```\n   *\n   * @example Getter Required\n   * ```tsx\n   * const options = [\n   *   {\n   *     name: \"Alaska\",\n   *     abbr: \"AK\",\n   *   },\n   *   {\n   *     name: \"Arizona\",\n   *     abbr: \"AZ\",\n   *   }\n   * ];\n   *\n   * <Autocomplete options={options} getOptionLabel={(state) => state.name} />\n   * ```\n   *\n   * @defaultValue `defaultAutocompleteExtractor`\n   * @since 6.0.0\n   */\n  getOptionLabel?: AutocompleteGetOptionLabelCallback<Option>;\n}\n\n/**\n * @since 6.0.0\n */\nexport type ConfigurableAutocompleteOptionProps = Partial<\n  Omit<OptionProps, \"role\" | \"value\">\n>;\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteControlledValue<T> {\n  value: T;\n  setValue: Dispatch<T>;\n  defaultValue?: never;\n  onValueChange?: never;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteUncontrolledValue<T> {\n  value?: never;\n  setValue?: never;\n  defaultValue?: UseStateInitializer<T>;\n\n  /**\n   * This prop should be used when some action should occur whenever the value\n   * changes, but is not required to be stored in state. For all other cases, it\n   * is recommended to control the `value` instead of using this prop.\n   *\n   * @defaultValue `() => {}`\n   */\n  onValueChange?: (value: T) => void;\n}\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteValue<T> =\n  | AutocompleteControlledValue<T>\n  | AutocompleteUncontrolledValue<T>;\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteControlledQuery {\n  query: string;\n  setQuery: Dispatch<string>;\n  defaultQuery?: never;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteUncontrolledQuery {\n  query?: never;\n  setQuery?: never;\n  defaultQuery?: UseStateInitializer<string>;\n}\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteQuery =\n  | AutocompleteControlledQuery\n  | AutocompleteUncontrolledQuery;\n\n/**\n * This allows the `query` to be updated whenever a new value has been selected.\n *\n * - `\"clear\"` - clears the `query`\n * - `\"selected\"` - sets the \tquery\t to the selected value's label\n * - `\"as-is\"` - doesn't change the `query`\n *\n * @defaultValue `(multiselect || Array.isArray(value ?? defaultValue)) ? \"clear\" : \"selected\"`\n * @since 6.0.0\n */\nexport type AutocompleteUpdateQueryOnSelect = \"clear\" | \"selected\" | \"as-is\";\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteUnknownQueryAndValueOptions<\n  Option extends AutocompleteOption,\n> {\n  query?: string;\n  setQuery?: Dispatch<string>;\n  defaultQuery?: UseStateInitializer<string>;\n  value?: Option | null | readonly Option[];\n  setValue?: Dispatch<Option | null | readonly Option[]>;\n  defaultValue?: UseStateInitializer<Option | null | readonly Option[]>;\n  onValueChange?: (value: Option | null | readonly Option[]) => void;\n}\n\n/**\n * A utility type that makes the `getOptionLabel` required when an option is not\n * a {@link AutomaticTextExtraction}.\n *\n * @since 6.0.0\n */\nexport type AutocompleteOptionLabelExtractor<\n  Option extends AutocompleteOption,\n> = Option extends AutomaticTextExtraction\n  ? AutocompleteGetOptionLabel<Option>\n  : Required<AutocompleteGetOptionLabel<Option>>;\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteFilteringOptions<\n  Option extends AutocompleteOption,\n> extends AutocompleteGetOptionLabel<Option> {\n  /**\n   * The list of options that can be shown within the autocomplete and filtered\n   * based on the current query.\n   */\n  options: readonly Option[];\n\n  /**\n   * The function that filters the {@link options} based on the current query\n   * and defaults to a case insensitive search that starts with the query.\n   *\n   * @example Case Insensitive Anywhere\n   * ```tsx\n   * import { caseInsensitiveSearch } from \"@react-md/core/searching/caseInsensitive\";\n   *\n   * <Autocomplete {...props} filter={caseInsensitiveSearch} />\n   * ```\n   *\n   * @example Fuzzy Filtering\n   * ```tsx\n   * import { fuzzySearch } from \"@react-md/core/searching/fuzzy\";\n   *\n   * <Autocomplete {...props} filter={fuzzySearch} />\n   * ```\n   *\n   * @example Async Searching\n   * ```tsx\n   * import { useDebouncedFunction } from \"@react-md/core/useDebouncedFunction\";\n   * import { useState } from \"react\";\n   *\n   * interface State {\n   *   loading: boolean;\n   *   options: readonly string[];\n   * }\n   *\n   * function Example() {\n   *   const [state, setState] = useState<State>({\n   *     loading: false,\n   *     options: [],\n   *   });\n   *\n   *   const search = useDebouncedFunction(async (query: string) => {\n   *     setState(prev => ({ ...prev, loading: true }));\n   *\n   *     const options = await someAsyncTask(query);\n   *     setState({ loading: false, options })\n   *   });\n   *\n   *   return (\n   *     <Autocomplete\n   *       {...props}\n   *       // Setting `type=\"search\"` automatically updates the `filter` prop to\n   *       // be `noopAutocompleteFilter`\n   *       type=\"search\"\n   *       options={options}\n   *       onChange={(event) => search(event.currentTarget.value)}\n   *     />\n   *   );\n   * }\n   * ```\n   *\n   * @defaultValue `defaultAutocompleteFilter`\n   */\n  filter?: AutocompleteFilterFunction<Option>;\n\n  /**\n   * Set this to `true` to update the filtering behavior to also remove the\n   * selected value from the available options. This is mostly for the\n   * multiselect behavior.\n   *\n   * @defaultValue `false`\n   */\n  filterSelected?: boolean;\n\n  /**\n   * Set this to `true` to allow any value to be typed into the autocomplete\n   * instead of enforcing an empty string or one of the option labels.\n   *\n   * @defaultValue `filter === noopAutocompleteFilter`\n   */\n  allowAnyValue?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteFilterAndListboxOptions<\n  Option extends AutocompleteOption,\n>\n  extends\n    AutocompleteFilteringOptions<Option>,\n    AutocompleteGetOptionProps<Option>,\n    OptionSelectedIconProps {\n  /**\n   * Set this to `true` when using a multiselect autocomplete to update each\n   * option to use checkboxes to show the selection state.\n   *\n   * @defaultValue `false`\n   */\n  checkboxes?: boolean;\n\n  /**\n   * @see {@link OptionSelectedIconProps.disableSelectedIcon}\n   * @defaultValue `!checkboxes`\n   */\n  disableSelectedIcon?: boolean;\n\n  /**\n   * @see {@link AutocompleteUpdateQueryOnSelect}\n   * @defaultValue `multiselect ? \"clear\" : \"selected\"`\n   */\n  updateQueryOnSelect?: AutocompleteUpdateQueryOnSelect;\n\n  /**\n   * Set this to `true` to prevent the listbox from closing when an option is\n   * selected.\n   *\n   * @defaultValue `checkboxes`\n   */\n  disableCloseOnSelect?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteEditableComboboxOptions<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n>\n  extends\n    EditableComboboxOptions<ComboboxEl, PopupEl>,\n    AutocompleteFilterAndListboxOptions<Option> {\n  onBlur?: FocusEventHandler<ComboboxEl>;\n  onChange?: ChangeEventHandler<ComboboxEl>;\n\n  /**\n   * This is a convenience prop for the `onEntering`/`onEntered` transition\n   * callbacks that will ensure it is only called once even if the transitions\n   * are disabled. A great use-case for this function is to fetch data once the\n   * menu is opened.\n   */\n  onOpen?: () => void;\n}\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteQueryAndExtractorOptions<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> = AutocompleteEditableComboboxOptions<Option, ComboboxEl, PopupEl> &\n  AutocompleteOptionLabelExtractor<Option> &\n  AutocompleteQuery;\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteSingleSelectOptions<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> = AutocompleteQueryAndExtractorOptions<Option, ComboboxEl, PopupEl> &\n  AutocompleteValue<Option | null>;\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteMultiSelectOptions<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> = AutocompleteQueryAndExtractorOptions<Option, ComboboxEl, PopupEl> &\n  AutocompleteValue<readonly Option[]>;\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteOptions<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n>\n  extends\n    AutocompleteEditableComboboxOptions<Option, ComboboxEl, PopupEl>,\n    AutocompleteUnknownQueryAndValueOptions<Option> {}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteComboboxProps<\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n> extends EditableComboboxWidgetProps<ComboboxEl> {\n  \"aria-autocomplete\": NonNullable<AriaAttributes[\"aria-autocomplete\"]>;\n  value: string;\n  onBlur: FocusEventHandler<ComboboxEl>;\n  onChange: ChangeEventHandler<ComboboxEl>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteListboxProps<\n  T extends AutocompleteOption = AutocompleteOption,\n  PopupEl extends HTMLElement = HTMLElement,\n>\n  extends Omit<ComboboxMenuProps<PopupEl>, \"ref\">, OptionSelectedIconProps {\n  value: T | null | readonly T[];\n  setValue: Dispatch<T>;\n  onEnter: (appearing: boolean) => void;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ConfigurableAutocompleteListboxProps\n  extends ConfigurableComboboxMenuProps, OptionSelectedIconProps {\n  id?: string;\n}\n\n/**\n * - `\"always\"` - the clear button is always visible\n * - `\"active\"` - the clear button will be visible when:\n *   - the user moves focus within the autocomplete\n *   - the user hovers the autocomplete\n * - `\"query\"` - the clear button will be visible when:\n *   - the input has a value and:\n *     - the user moves focus within the autocomplete\n *     - the user hovers the autocomplete\n *\n * @since 6.0.0\n */\nexport type ClearButtonVisibility = \"query\" | \"active\" | \"always\";\n\n/**\n * @since 6.0.0\n */\nexport interface ConfigurableAutocompleteClearButtonProps extends ButtonProps {\n  /** @defaultValue `\"Clear\"` */\n  \"aria-label\"?: string;\n\n  /** @defaultValue `\"autocomplete-clear-\" + useId()` */\n  id?: string;\n\n  /** {@inheritDoc ClearButtonVisibility} */\n  visibility?: ClearButtonVisibility;\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface AutocompleteClearButtonProps extends ConfigurableAutocompleteClearButtonProps {\n  onClick: MouseEventHandler<HTMLButtonElement>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ConfigurableAutocompleteDropdownButtonProps extends ButtonProps {\n  /** @defaultValue `AutocompleteProps.listboxLabel` */\n  \"aria-label\"?: string;\n  /** @defaultValue `AutocompleteProps.listboxLabelledby` */\n  \"aria-labelledby\"?: string;\n\n  /** @defaultValue `\"autocomplete-dropdown-\" + useId()` */\n  id?: string;\n\n  /** @defaultValue `getIcon(\"dropdown\")` */\n  icon?: ReactNode;\n  iconRotatorProps?: Omit<IconRotatorProps, \"rotated\">;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteDropdownButtonProps extends ConfigurableAutocompleteDropdownButtonProps {\n  \"aria-controls\": string;\n  onClick: MouseEventHandler<HTMLButtonElement>;\n  visible: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteCircularProgressProps extends CircularProgressProps {\n  /** @defaultValue `\"Loading\"` */\n  \"aria-label\"?: string;\n\n  /** @defaultValue `\"current-color\"` */\n  theme?: ProgressTheme;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteChipProps extends ChipProps {\n  ref?: Ref<HTMLButtonElement>;\n\n  /**\n   * @defaultValue `typeof children === \"string\" ? \\`Remove \"${children}\"\\` : undefined`\n   */\n  \"aria-description\"?: string;\n\n  /** @defaultValue `getIcon(\"remove\")` */\n  removeIcon?: ReactNode;\n  children: ReactNode;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteWithQueryImplementation<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n>\n  extends\n    EditableComboboxImplementation<ComboboxEl, PopupEl>,\n    Required<AutocompleteGetOptionProps<Option>>,\n    Required<AutocompleteGetOptionLabel<Option>> {\n  query: string;\n  setQuery: Dispatch<string>;\n  comboboxProps: AutocompleteComboboxProps<ComboboxEl>;\n\n  /**\n   * This is a convenience prop to determine if the autocomplete supports\n   * multiselect.\n   */\n  multiselect: boolean;\n\n  /**\n   * This is the current list of options that will be filtered based on the\n   * current `query`. This should normally be rendered in the\n   * `AutocompleteListboxChildren` component\n   */\n  availableOptions: readonly Option[];\n\n  /**\n   * Generates the props required for the `Listbox` component and should\n   * normally be provided any menu props that might override the default display\n   * settings.\n   */\n  getListboxProps: (\n    overrides?: ConfigurableAutocompleteListboxProps\n  ) => AutocompleteListboxProps<Option, PopupEl>;\n\n  /**\n   * Generates the props required for the `AutocompleteClearButton`.\n   */\n  getClearButtonProps: (\n    overrides?: ConfigurableAutocompleteClearButtonProps\n  ) => AutocompleteClearButtonProps;\n\n  /**\n   * Generates the props required for the `AutocompleteDropdownButton`.\n   */\n  getDropdownButtonProps: (\n    overrides?: ConfigurableAutocompleteDropdownButtonProps\n  ) => AutocompleteDropdownButtonProps;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteSingleSelectImplementation<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends AutocompleteWithQueryImplementation<Option, ComboboxEl, PopupEl> {\n  value: Option | null;\n  setValue: Dispatch<Option | null>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteMultiSelectImplementation<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends AutocompleteWithQueryImplementation<Option, ComboboxEl, PopupEl> {\n  value: readonly Option[];\n  setValue: Dispatch<readonly Option[]>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteImplementation<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends AutocompleteWithQueryImplementation<Option, ComboboxEl, PopupEl> {\n  value: Option | null | readonly Option[];\n  setValue: Dispatch<Option | null | readonly Option[]>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteBaseProps<Option extends AutocompleteOption>\n  extends\n    Omit<TextFieldProps, \"value\" | \"defaultValue\">,\n    AutocompleteFilterAndListboxOptions<Option>,\n    ComboboxVisibilityOptions {\n  inputRef?: Ref<HTMLInputElement>;\n\n  /**\n   * An `aria-label` to pass to the `Listbox` component that describes the list\n   * of {@link options}. Either this or the {@link listboxLabelledBy} are\n   * required for accessibility.\n   */\n  listboxLabel?: string;\n\n  /**\n   * An `aria-labelledby` to pass to the `Listbox` component that describes the\n   * list of {@link options}. Either this or the {@link listboxLabel} are\n   * required for accessibility.\n   */\n  listboxLabelledBy?: string;\n\n  /**\n   * Any additional props that should be passed to the `Listbox` component.\n   */\n  listboxProps?: PropsWithRef<ConfigurableAutocompleteListboxProps>;\n\n  /**\n   * This can be used to add any custom styling, change the icon, change the\n   * label, etc for the dropdown button.\n   *\n   * @example Simple Example\n   * ```tsx\n   * dropdownButtonProps={{\n   *   \"aria-label\": \"Open\",\n   *   className: styles.dropdownButton,\n   *   icon: <MyCustomDropdownIcon />,\n   * }}\n   * ```\n   */\n  dropdownButtonProps?: ConfigurableAutocompleteDropdownButtonProps;\n\n  /**\n   * Set this to `true` to remove the {@link DropdownButton} from being rendered\n   * after the input element.\n   *\n   * @defaultValue `false`\n   */\n  disableDropdownButton?: boolean;\n\n  /**\n   * Set this to `true` to disable a `<CircularProgress />` after the input and\n   * before the `<DropdownButton />`.\n   *\n   * @defaultValue `false`\n   */\n  loading?: boolean;\n\n  /**\n   * @defaultValue `{ \"aria-label\": \"Loading\", ...loadingProps }`\n   */\n  loadingProps?: AutocompleteCircularProgressProps;\n\n  /**\n   * This will do nothing if {@link disableClearButton} is `true`.\n   */\n  clearButtonProps?: PropsWithRef<ConfigurableAutocompleteClearButtonProps>;\n\n  /**\n   * Set to `true` to hide the clear button that appears when hovering an\n   * `Autocomplete` that has a value. The user will still be able to clear the\n   * value quickly using the `Escape` key.\n   *\n   * @defaultValue `false`\n   */\n  disableClearButton?: boolean;\n\n  /**\n   * - `\"always\"` - the clear button is always visible\n   * - `\"active\"` - the clear button will be visible when:\n   *   - the user moves focus within the autocomplete\n   *   - the user hovers the autocomplete\n   * - `\"query\"` - the clear button will be visible when:\n   *   - the input has a value and:\n   *     - the user moves focus within the autocomplete\n   *     - the user hovers the autocomplete\n   *\n   * @defaultValue `\"query\"`\n   */\n  clearButtonVisibility?: ClearButtonVisibility;\n\n  /**\n   * This is a convenience prop for the `onEntering`/`onEntered` transition\n   * callbacks that will ensure it is only called once even if the transitions\n   * are disabled. A great use-case for this function is to fetch data once the\n   * menu is opened.\n   */\n  onOpen?: () => void;\n\n  /**\n   * The children to display when there are no {@link options} due to the\n   * current text box value.\n   *\n   * @defaultValue `<ListSubheader>No options</ListSubheader`\n   */\n  noOptionsChildren?: ReactNode;\n\n  /**\n   * Set this to `true` when using a multiselect autocomplete to prevent the\n   * selected values from being rendered inline with the input. This is useful\n   * when the selected values should be shown in a different part of the UI\n   * instead.\n   *\n   * @defaultValue `false`\n   */\n  disableInlineChips?: boolean;\n\n  /**\n   * This can be used to add additional props to each inline chip for multiselect\n   * autocompletes.\n   *\n   * @example Simple Example\n   * ```tsx\n   * getChipProps={({ option, index }) => {\n   *   return {\n   *     disabled: index < 3,\n   *     className: cnb(option === \"a\" && styles.blue)<\n   *   };\n   * }}\n   * ```\n   */\n  getChipProps?: AutocompleteGetChipProps<Option>;\n}\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteListboxLabelProps =\n  | { listboxLabel: string }\n  | { listboxLabelledBy: string };\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteQueryAndExtractorProps<\n  Option extends AutocompleteOption,\n> = AutocompleteBaseProps<Option> &\n  AutocompleteOptionLabelExtractor<Option> &\n  AutocompleteQuery &\n  AutocompleteListboxLabelProps;\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteSingleSelectProps<Option extends AutocompleteOption> =\n  AutocompleteQueryAndExtractorProps<Option> &\n    AutocompleteValue<Option | null> & {\n      checkboxes?: never;\n      getChipProps?: never;\n      disableInlineChips?: never;\n    };\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteMultiSelectProps<Option extends AutocompleteOption> =\n  AutocompleteQueryAndExtractorProps<Option> &\n    AutocompleteValue<readonly Option[]>;\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteProps<Option extends AutocompleteOption> =\n  AutocompleteBaseProps<Option> &\n    AutocompleteUnknownQueryAndValueOptions<Option>;\n"],"names":[],"mappings":"AA22BA;;CAEC,GACD,WAEoD"}

package/dist/autocomplete/utils.d.ts

@@ -1,6 +1,6 @@
 import { type RefObject } from "react";
 import { type EditableHTMLElement } from "../form/utils.js";
-import { type NonNullMutableRef, type UseStateInitializer } from "../types.js";
+import { type UseStateInitializer } from "../types.js";
 import { type AutocompleteFilterOptions, type AutocompleteGetOptionLabel, type AutocompleteOption } from "./types.js";
 /**
  * @since 6.0.0
@@ -40,10 +40,10 @@ export interface EnforceSelectedValueOptions<Option extends AutocompleteOption>
     value: Option | readonly Option[] | null;
     visible: boolean;
     container: HTMLElement | null;
-    popupRef: RefObject<HTMLElement>;
-    comboboxRef: RefObject<EditableHTMLElement>;
+    popupRef: RefObject<HTMLElement | null>;
+    comboboxRef: RefObject<EditableHTMLElement | null>;
     availableOptions: readonly Option[];
-    prevAvailableOptions: NonNullMutableRef<readonly Option[] | null>;
+    prevAvailableOptions: RefObject<readonly Option[] | null>;
 }
 /**
  * This enforces that if the user clicks away, touches somewhere else on the

package/dist/autocomplete/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/autocomplete/utils.ts"],"sourcesContent":["import { type RefObject } from \"react\";\n\nimport {\n  type EditableHTMLElement,\n  triggerManualChangeEvent,\n} from \"../form/utils.js\";\nimport { type NonNullMutableRef, type UseStateInitializer } from \"../types.js\";\nimport { noopAutocompleteFilter } from \"./defaults.js\";\nimport {\n  type AutocompleteFilterOptions,\n  type AutocompleteGetOptionLabel,\n  type AutocompleteOption,\n} from \"./types.js\";\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface GetDefaultValueOptions<\n  Option extends AutocompleteOption,\n> extends Required<AutocompleteGetOptionLabel<Option>> {\n  query: string | undefined;\n  multiselect?: boolean;\n  defaultQuery: UseStateInitializer<string> | undefined;\n  defaultValue:\n    | UseStateInitializer<Option | null | readonly Option[]>\n    | undefined;\n  options: readonly Option[];\n  filter: (options: AutocompleteFilterOptions<Option>) => readonly Option[];\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport function getDefaultValue<Option extends AutocompleteOption>(\n  options: GetDefaultValueOptions<Option>\n): UseStateInitializer<Option | null | readonly Option[]> {\n  const {\n    query,\n    filter,\n    multiselect,\n    defaultQuery,\n    defaultValue,\n    options: values,\n    getOptionLabel,\n  } = options;\n\n  if (defaultValue !== undefined) {\n    return defaultValue;\n  }\n\n  // do not support determining the default value for a multiselect\n  // autocomplete if only a query was provided.\n  if (multiselect) {\n    return [];\n  }\n\n  // do not support a default value out of the box for this case\n  if (filter === noopAutocompleteFilter) {\n    return null;\n  }\n\n  return () => {\n    let q = \"\";\n    if (query) {\n      q = query;\n    } else if (defaultQuery) {\n      q = typeof defaultQuery === \"function\" ? defaultQuery() : defaultQuery;\n    }\n\n    if (!q) {\n      return null;\n    }\n\n    const filtered = filter({\n      list: values,\n      query: q,\n      extractor: getOptionLabel,\n    });\n\n    return filtered[0] ?? null;\n  };\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\ninterface GetDefaultQueryOptions<\n  Option extends AutocompleteOption,\n> extends Required<AutocompleteGetOptionLabel<Option>> {\n  value: Option | null | readonly Option[];\n  defaultQuery?: UseStateInitializer<string>;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport function getDefaultQuery<Option extends AutocompleteOption>(\n  options: GetDefaultQueryOptions<Option>\n): UseStateInitializer<string> {\n  const { value, getOptionLabel, defaultQuery } = options;\n\n  if (defaultQuery) {\n    return defaultQuery;\n  }\n\n  return () => {\n    if (typeof value === \"string\") {\n      return value;\n    }\n\n    if (value && typeof value === \"object\" && !(\"length\" in value)) {\n      return getOptionLabel(value);\n    }\n\n    return \"\";\n  };\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface EnforceSelectedValueOptions<\n  Option extends AutocompleteOption,\n> extends Required<AutocompleteGetOptionLabel<Option>> {\n  value: Option | readonly Option[] | null;\n  visible: boolean;\n  container: HTMLElement | null;\n  popupRef: RefObject<HTMLElement>;\n  comboboxRef: RefObject<EditableHTMLElement>;\n  availableOptions: readonly Option[];\n  prevAvailableOptions: NonNullMutableRef<readonly Option[] | null>;\n}\n\n/**\n * This enforces that if the user clicks away, touches somewhere else on the\n * page, tabs to the next element, or focuses another element programmatically\n * the autocomplete will set the `value` back to the previous selected value if\n * there was one. i.e.\n *\n * Case 1:\n * - User selects \"Apple\"\n * - User hits backspace twice. Input displays \"App\"\n * - User clicks somewhere else on the page\n * - Input now displays \"Apple\" again\n *\n * Case 2:\n * - User selects \"Apple\"\n * - User clears the input\n * - User types \"app\"\n * - User clicks somewhere else on the page\n * - Input now displays \"\" and the value is set to `null`\n *\n * NOTE: This mutates the {@link EnforceSelectedValueOptions.prevAvailableOptions}\n *\n * @since 6.0.0\n * @internal\n */\nexport function enforceSelectedValue<Option extends AutocompleteOption>(\n  options: EnforceSelectedValueOptions<Option>\n): void {\n  const {\n    value,\n    visible,\n    container,\n    popupRef,\n    comboboxRef,\n    getOptionLabel,\n    availableOptions,\n    prevAvailableOptions,\n  } = options;\n\n  if (!container) {\n    return;\n  }\n\n  globalThis.requestAnimationFrame(() => {\n    if (\n      container.contains(document.activeElement) ||\n      popupRef.current?.contains(document.activeElement)\n    ) {\n      return;\n    }\n\n    if (visible) {\n      // this makes it so that the options are not filtered again while closing\n      prevAvailableOptions.current = availableOptions;\n    }\n\n    let label = \"\";\n    if (typeof value === \"string\") {\n      label = value;\n    } else if (typeof value === \"object\" && value && !(\"length\" in value)) {\n      label = getOptionLabel(value);\n    }\n\n    triggerManualChangeEvent(comboboxRef.current, label);\n  });\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport function isMultipleValues<Option extends AutocompleteOption>(\n  value: Option | null | readonly Option[]\n): value is readonly Option[] {\n  return !!value && typeof value === \"object\" && \"length\" in value;\n}\n"],"names":["triggerManualChangeEvent","noopAutocompleteFilter","getDefaultValue","options","query","filter","multiselect","defaultQuery","defaultValue","values","getOptionLabel","undefined","q","filtered","list","extractor","getDefaultQuery","value","enforceSelectedValue","visible","container","popupRef","comboboxRef","availableOptions","prevAvailableOptions","globalThis","requestAnimationFrame","contains","document","activeElement","current","label","isMultipleValues"],"mappings":"AAEA,SAEEA,wBAAwB,QACnB,mBAAmB;AAE1B,SAASC,sBAAsB,QAAQ,gBAAgB;AAwBvD;;;CAGC,GACD,OAAO,SAASC,gBACdC,OAAuC;IAEvC,MAAM,EACJC,KAAK,EACLC,MAAM,EACNC,WAAW,EACXC,YAAY,EACZC,YAAY,EACZL,SAASM,MAAM,EACfC,cAAc,EACf,GAAGP;IAEJ,IAAIK,iBAAiBG,WAAW;QAC9B,OAAOH;IACT;IAEA,iEAAiE;IACjE,6CAA6C;IAC7C,IAAIF,aAAa;QACf,OAAO,EAAE;IACX;IAEA,8DAA8D;IAC9D,IAAID,WAAWJ,wBAAwB;QACrC,OAAO;IACT;IAEA,OAAO;QACL,IAAIW,IAAI;QACR,IAAIR,OAAO;YACTQ,IAAIR;QACN,OAAO,IAAIG,cAAc;YACvBK,IAAI,OAAOL,iBAAiB,aAAaA,iBAAiBA;QAC5D;QAEA,IAAI,CAACK,GAAG;YACN,OAAO;QACT;QAEA,MAAMC,WAAWR,OAAO;YACtBS,MAAML;YACNL,OAAOQ;YACPG,WAAWL;QACb;QAEA,OAAOG,QAAQ,CAAC,EAAE,IAAI;IACxB;AACF;AAaA;;;CAGC,GACD,OAAO,SAASG,gBACdb,OAAuC;IAEvC,MAAM,EAAEc,KAAK,EAAEP,cAAc,EAAEH,YAAY,EAAE,GAAGJ;IAEhD,IAAII,cAAc;QAChB,OAAOA;IACT;IAEA,OAAO;QACL,IAAI,OAAOU,UAAU,UAAU;YAC7B,OAAOA;QACT;QAEA,IAAIA,SAAS,OAAOA,UAAU,YAAY,CAAE,CAAA,YAAYA,KAAI,GAAI;YAC9D,OAAOP,eAAeO;QACxB;QAEA,OAAO;IACT;AACF;AAkBA;;;;;;;;;;;;;;;;;;;;;;;CAuBC,GACD,OAAO,SAASC,qBACdf,OAA4C;IAE5C,MAAM,EACJc,KAAK,EACLE,OAAO,EACPC,SAAS,EACTC,QAAQ,EACRC,WAAW,EACXZ,cAAc,EACda,gBAAgB,EAChBC,oBAAoB,EACrB,GAAGrB;IAEJ,IAAI,CAACiB,WAAW;QACd;IACF;IAEAK,WAAWC,qBAAqB,CAAC;QAC/B,IACEN,UAAUO,QAAQ,CAACC,SAASC,aAAa,KACzCR,SAASS,OAAO,EAAEH,SAASC,SAASC,aAAa,GACjD;YACA;QACF;QAEA,IAAIV,SAAS;YACX,yEAAyE;YACzEK,qBAAqBM,OAAO,GAAGP;QACjC;QAEA,IAAIQ,QAAQ;QACZ,IAAI,OAAOd,UAAU,UAAU;YAC7Bc,QAAQd;QACV,OAAO,IAAI,OAAOA,UAAU,YAAYA,SAAS,CAAE,CAAA,YAAYA,KAAI,GAAI;YACrEc,QAAQrB,eAAeO;QACzB;QAEAjB,yBAAyBsB,YAAYQ,OAAO,EAAEC;IAChD;AACF;AAEA;;;CAGC,GACD,OAAO,SAASC,iBACdf,KAAwC;IAExC,OAAO,CAAC,CAACA,SAAS,OAAOA,UAAU,YAAY,YAAYA;AAC7D"}
+{"version":3,"sources":["../../src/autocomplete/utils.ts"],"sourcesContent":["import { type RefObject } from \"react\";\n\nimport {\n  type EditableHTMLElement,\n  triggerManualChangeEvent,\n} from \"../form/utils.js\";\nimport { type UseStateInitializer } from \"../types.js\";\nimport { noopAutocompleteFilter } from \"./defaults.js\";\nimport {\n  type AutocompleteFilterOptions,\n  type AutocompleteGetOptionLabel,\n  type AutocompleteOption,\n} from \"./types.js\";\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface GetDefaultValueOptions<\n  Option extends AutocompleteOption,\n> extends Required<AutocompleteGetOptionLabel<Option>> {\n  query: string | undefined;\n  multiselect?: boolean;\n  defaultQuery: UseStateInitializer<string> | undefined;\n  defaultValue:\n    | UseStateInitializer<Option | null | readonly Option[]>\n    | undefined;\n  options: readonly Option[];\n  filter: (options: AutocompleteFilterOptions<Option>) => readonly Option[];\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport function getDefaultValue<Option extends AutocompleteOption>(\n  options: GetDefaultValueOptions<Option>\n): UseStateInitializer<Option | null | readonly Option[]> {\n  const {\n    query,\n    filter,\n    multiselect,\n    defaultQuery,\n    defaultValue,\n    options: values,\n    getOptionLabel,\n  } = options;\n\n  if (defaultValue !== undefined) {\n    return defaultValue;\n  }\n\n  // do not support determining the default value for a multiselect\n  // autocomplete if only a query was provided.\n  if (multiselect) {\n    return [];\n  }\n\n  // do not support a default value out of the box for this case\n  if (filter === noopAutocompleteFilter) {\n    return null;\n  }\n\n  return () => {\n    let q = \"\";\n    if (query) {\n      q = query;\n    } else if (defaultQuery) {\n      q = typeof defaultQuery === \"function\" ? defaultQuery() : defaultQuery;\n    }\n\n    if (!q) {\n      return null;\n    }\n\n    const filtered = filter({\n      list: values,\n      query: q,\n      extractor: getOptionLabel,\n    });\n\n    return filtered[0] ?? null;\n  };\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\ninterface GetDefaultQueryOptions<\n  Option extends AutocompleteOption,\n> extends Required<AutocompleteGetOptionLabel<Option>> {\n  value: Option | null | readonly Option[];\n  defaultQuery?: UseStateInitializer<string>;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport function getDefaultQuery<Option extends AutocompleteOption>(\n  options: GetDefaultQueryOptions<Option>\n): UseStateInitializer<string> {\n  const { value, getOptionLabel, defaultQuery } = options;\n\n  if (defaultQuery) {\n    return defaultQuery;\n  }\n\n  return () => {\n    if (typeof value === \"string\") {\n      return value;\n    }\n\n    if (value && typeof value === \"object\" && !(\"length\" in value)) {\n      return getOptionLabel(value);\n    }\n\n    return \"\";\n  };\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface EnforceSelectedValueOptions<\n  Option extends AutocompleteOption,\n> extends Required<AutocompleteGetOptionLabel<Option>> {\n  value: Option | readonly Option[] | null;\n  visible: boolean;\n  container: HTMLElement | null;\n  popupRef: RefObject<HTMLElement | null>;\n  comboboxRef: RefObject<EditableHTMLElement | null>;\n  availableOptions: readonly Option[];\n  prevAvailableOptions: RefObject<readonly Option[] | null>;\n}\n\n/**\n * This enforces that if the user clicks away, touches somewhere else on the\n * page, tabs to the next element, or focuses another element programmatically\n * the autocomplete will set the `value` back to the previous selected value if\n * there was one. i.e.\n *\n * Case 1:\n * - User selects \"Apple\"\n * - User hits backspace twice. Input displays \"App\"\n * - User clicks somewhere else on the page\n * - Input now displays \"Apple\" again\n *\n * Case 2:\n * - User selects \"Apple\"\n * - User clears the input\n * - User types \"app\"\n * - User clicks somewhere else on the page\n * - Input now displays \"\" and the value is set to `null`\n *\n * NOTE: This mutates the {@link EnforceSelectedValueOptions.prevAvailableOptions}\n *\n * @since 6.0.0\n * @internal\n */\nexport function enforceSelectedValue<Option extends AutocompleteOption>(\n  options: EnforceSelectedValueOptions<Option>\n): void {\n  const {\n    value,\n    visible,\n    container,\n    popupRef,\n    comboboxRef,\n    getOptionLabel,\n    availableOptions,\n    prevAvailableOptions,\n  } = options;\n\n  if (!container) {\n    return;\n  }\n\n  globalThis.requestAnimationFrame(() => {\n    if (\n      container.contains(document.activeElement) ||\n      popupRef.current?.contains(document.activeElement)\n    ) {\n      return;\n    }\n\n    if (visible) {\n      // this makes it so that the options are not filtered again while closing\n      prevAvailableOptions.current = availableOptions;\n    }\n\n    let label = \"\";\n    if (typeof value === \"string\") {\n      label = value;\n    } else if (typeof value === \"object\" && value && !(\"length\" in value)) {\n      label = getOptionLabel(value);\n    }\n\n    triggerManualChangeEvent(comboboxRef.current, label);\n  });\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport function isMultipleValues<Option extends AutocompleteOption>(\n  value: Option | null | readonly Option[]\n): value is readonly Option[] {\n  return !!value && typeof value === \"object\" && \"length\" in value;\n}\n"],"names":["triggerManualChangeEvent","noopAutocompleteFilter","getDefaultValue","options","query","filter","multiselect","defaultQuery","defaultValue","values","getOptionLabel","undefined","q","filtered","list","extractor","getDefaultQuery","value","enforceSelectedValue","visible","container","popupRef","comboboxRef","availableOptions","prevAvailableOptions","globalThis","requestAnimationFrame","contains","document","activeElement","current","label","isMultipleValues"],"mappings":"AAEA,SAEEA,wBAAwB,QACnB,mBAAmB;AAE1B,SAASC,sBAAsB,QAAQ,gBAAgB;AAwBvD;;;CAGC,GACD,OAAO,SAASC,gBACdC,OAAuC;IAEvC,MAAM,EACJC,KAAK,EACLC,MAAM,EACNC,WAAW,EACXC,YAAY,EACZC,YAAY,EACZL,SAASM,MAAM,EACfC,cAAc,EACf,GAAGP;IAEJ,IAAIK,iBAAiBG,WAAW;QAC9B,OAAOH;IACT;IAEA,iEAAiE;IACjE,6CAA6C;IAC7C,IAAIF,aAAa;QACf,OAAO,EAAE;IACX;IAEA,8DAA8D;IAC9D,IAAID,WAAWJ,wBAAwB;QACrC,OAAO;IACT;IAEA,OAAO;QACL,IAAIW,IAAI;QACR,IAAIR,OAAO;YACTQ,IAAIR;QACN,OAAO,IAAIG,cAAc;YACvBK,IAAI,OAAOL,iBAAiB,aAAaA,iBAAiBA;QAC5D;QAEA,IAAI,CAACK,GAAG;YACN,OAAO;QACT;QAEA,MAAMC,WAAWR,OAAO;YACtBS,MAAML;YACNL,OAAOQ;YACPG,WAAWL;QACb;QAEA,OAAOG,QAAQ,CAAC,EAAE,IAAI;IACxB;AACF;AAaA;;;CAGC,GACD,OAAO,SAASG,gBACdb,OAAuC;IAEvC,MAAM,EAAEc,KAAK,EAAEP,cAAc,EAAEH,YAAY,EAAE,GAAGJ;IAEhD,IAAII,cAAc;QAChB,OAAOA;IACT;IAEA,OAAO;QACL,IAAI,OAAOU,UAAU,UAAU;YAC7B,OAAOA;QACT;QAEA,IAAIA,SAAS,OAAOA,UAAU,YAAY,CAAE,CAAA,YAAYA,KAAI,GAAI;YAC9D,OAAOP,eAAeO;QACxB;QAEA,OAAO;IACT;AACF;AAkBA;;;;;;;;;;;;;;;;;;;;;;;CAuBC,GACD,OAAO,SAASC,qBACdf,OAA4C;IAE5C,MAAM,EACJc,KAAK,EACLE,OAAO,EACPC,SAAS,EACTC,QAAQ,EACRC,WAAW,EACXZ,cAAc,EACda,gBAAgB,EAChBC,oBAAoB,EACrB,GAAGrB;IAEJ,IAAI,CAACiB,WAAW;QACd;IACF;IAEAK,WAAWC,qBAAqB,CAAC;QAC/B,IACEN,UAAUO,QAAQ,CAACC,SAASC,aAAa,KACzCR,SAASS,OAAO,EAAEH,SAASC,SAASC,aAAa,GACjD;YACA;QACF;QAEA,IAAIV,SAAS;YACX,yEAAyE;YACzEK,qBAAqBM,OAAO,GAAGP;QACjC;QAEA,IAAIQ,QAAQ;QACZ,IAAI,OAAOd,UAAU,UAAU;YAC7Bc,QAAQd;QACV,OAAO,IAAI,OAAOA,UAAU,YAAYA,SAAS,CAAE,CAAA,YAAYA,KAAI,GAAI;YACrEc,QAAQrB,eAAeO;QACzB;QAEAjB,yBAAyBsB,YAAYQ,OAAO,EAAEC;IAChD;AACF;AAEA;;;CAGC,GACD,OAAO,SAASC,iBACdf,KAAwC;IAExC,OAAO,CAAC,CAACA,SAAS,OAAOA,UAAU,YAAY,YAAYA;AAC7D"}

package/dist/avatar/Avatar.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLAttributes, type ImgHTMLAttributes } from "react";
+import { type HTMLAttributes, type ImgHTMLAttributes, type ReactElement, type Ref } from "react";
 import { type PropsWithRef } from "../types.js";
 import { type AvatarClassNameOptions } from "./styles.js";
 export type AvatarImgAttributes = ImgHTMLAttributes<HTMLImageElement>;
@@ -7,6 +7,7 @@ export type AvatarImgAttributes = ImgHTMLAttributes<HTMLImageElement>;
  * the `role="presentation"`.
  */
 export interface AvatarProps extends Omit<HTMLAttributes<HTMLSpanElement>, "color">, AvatarClassNameOptions {
+    ref?: Ref<HTMLSpanElement>;
     /**
      * Since avatars are normally presentational data, they are hidden from screen
      * readers by default.
@@ -73,4 +74,4 @@ export interface AvatarProps extends Omit<HTMLAttributes<HTMLSpanElement>, "colo
  * @see {@link https://react-md.dev/components/avatar | Avatar Demos}
  * @since 6.0.0 `aria-hidden` is set to `true` by default.
  */
-export declare const Avatar: import("react").ForwardRefExoticComponent<AvatarProps & import("react").RefAttributes<HTMLSpanElement>>;
+export declare function Avatar(props: AvatarProps): ReactElement;

package/dist/avatar/Avatar.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { avatar, avatarImage } from "./styles.js";
 /**
  * An `Avatar` is generally used to represent objects or people within your app.
@@ -19,8 +18,8 @@ import { avatar, avatarImage } from "./styles.js";
  *
  * @see {@link https://react-md.dev/components/avatar | Avatar Demos}
  * @since 6.0.0 `aria-hidden` is set to `true` by default.
- */ export const Avatar = /*#__PURE__*/ forwardRef(function Avatar(props, ref) {
-    const { "aria-hidden": ariaHidden = true, className, children, src, alt = "", size = "avatar", color, theme, imgProps, referrerPolicy, ...remaining } = props;
+ */ export function Avatar(props) {
+    const { ref, "aria-hidden": ariaHidden = true, className, children, src, alt = "", size = "avatar", color, theme, imgProps, referrerPolicy, ...remaining } = props;
     let img;
     if (src || imgProps) {
         img = /*#__PURE__*/ _jsx("img", {
@@ -48,6 +47,6 @@ import { avatar, avatarImage } from "./styles.js";
             children
         ]
     });
-});
+}
 
 //# sourceMappingURL=Avatar.js.map

package/dist/avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/avatar/Avatar.tsx"],"sourcesContent":["import {\n  type HTMLAttributes,\n  type ImgHTMLAttributes,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\n\nimport { type PropsWithRef } from \"../types.js\";\nimport { type AvatarClassNameOptions, avatar, avatarImage } from \"./styles.js\";\n\nexport type AvatarImgAttributes = ImgHTMLAttributes<HTMLImageElement>;\n\n/**\n * @since 6.0.0 `aria-hidden` is set to `true` by default and removed\n * the `role=\"presentation\"`.\n */\nexport interface AvatarProps\n  extends\n    Omit<HTMLAttributes<HTMLSpanElement>, \"color\">,\n    AvatarClassNameOptions {\n  /**\n   * Since avatars are normally presentational data, they are hidden from screen\n   * readers by default.\n   *\n   * @defaultValue `true`\n   */\n  \"aria-hidden\"?: HTMLAttributes<HTMLSpanElement>[\"aria-hidden\"];\n\n  /**\n   * This should be an image `src` attribute to create an avatar from. When this\n   * prop is defined, you should not add any children to the avatar as the\n   * positioning will break.\n   */\n  src?: string;\n\n  /**\n   * An optional alt tag to display on the `<img>` when the `src` prop is also\n   * applied.\n   *\n   * For accessibility and screen readers, you normally do not want to actually\n   * provide this prop. This should only be used if the `Avatar` is not\n   * accompanied by some other component or main content as it will be extra\n   * noise for screen readers.\n   *\n   * @defaultValue `\"\"`\n   */\n  alt?: string;\n\n  /**\n   * An optional `referrerPolicy` to provide to the `<img>` element if the `src`\n   * or `imgProps` props are provided.\n   *\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-referrerpolicy|Referrer Policy}\n   *\n   * @since 2.2.0\n   */\n  referrerPolicy?: AvatarImgAttributes[\"referrerPolicy\"];\n\n  /**\n   * An optional object of image props and ref that can be used to create an\n   * image within the `Avatar`. This can be useful to add a custom `style`\n   * or`className` to the `<img>` element if that additional customization is\n   * needed.\n   *\n   * Note: The values in this object will override the `src`, `alt`, and\n   * `referrerPolicy` root level avatar props if they exist on this object.\n   *\n   * @since 2.2.0\n   */\n  imgProps?: PropsWithRef<AvatarImgAttributes>;\n}\n\n/**\n * An `Avatar` is generally used to represent objects or people within your app.\n * The avatar can consist of an image, an icon, or some text to display. When\n * the avatar is not an image, different themes can be applied to make the\n * avatar more unique.\n *\n * @example Simple Example\n * ```tsx\n * import { Avatar } from \"@react-md/core/avatar/Avatar\";\n * import { type ReactElement } from \"react\";\n *\n * export function Example(): ReactElement {\n *   return <Avatar src=\"/path-to-img.png\" />;\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/avatar | Avatar Demos}\n * @since 6.0.0 `aria-hidden` is set to `true` by default.\n */\nexport const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(\n  function Avatar(props, ref) {\n    const {\n      \"aria-hidden\": ariaHidden = true,\n      className,\n      children,\n      src,\n      alt = \"\",\n      size = \"avatar\",\n      color,\n      theme,\n      imgProps,\n      referrerPolicy,\n      ...remaining\n    } = props;\n\n    let img: ReactNode;\n    if (src || imgProps) {\n      img = (\n        <img\n          src={src}\n          alt={alt}\n          referrerPolicy={referrerPolicy}\n          {...imgProps}\n          className={avatarImage({ className: imgProps?.className })}\n        />\n      );\n    }\n\n    return (\n      <span\n        {...remaining}\n        aria-hidden={ariaHidden}\n        ref={ref}\n        className={avatar({\n          size,\n          color,\n          theme,\n          className,\n        })}\n      >\n        {img}\n        {children}\n      </span>\n    );\n  }\n);\n"],"names":["forwardRef","avatar","avatarImage","Avatar","props","ref","ariaHidden","className","children","src","alt","size","color","theme","imgProps","referrerPolicy","remaining","img","span","aria-hidden"],"mappings":";AAAA,SAIEA,UAAU,QACL,QAAQ;AAGf,SAAsCC,MAAM,EAAEC,WAAW,QAAQ,cAAc;AAgE/E;;;;;;;;;;;;;;;;;;CAkBC,GACD,OAAO,MAAMC,uBAASH,WACpB,SAASG,OAAOC,KAAK,EAAEC,GAAG;IACxB,MAAM,EACJ,eAAeC,aAAa,IAAI,EAChCC,SAAS,EACTC,QAAQ,EACRC,GAAG,EACHC,MAAM,EAAE,EACRC,OAAO,QAAQ,EACfC,KAAK,EACLC,KAAK,EACLC,QAAQ,EACRC,cAAc,EACd,GAAGC,WACJ,GAAGZ;IAEJ,IAAIa;IACJ,IAAIR,OAAOK,UAAU;QACnBG,oBACE,KAACA;YACCR,KAAKA;YACLC,KAAKA;YACLK,gBAAgBA;YACf,GAAGD,QAAQ;YACZP,WAAWL,YAAY;gBAAEK,WAAWO,UAAUP;YAAU;;IAG9D;IAEA,qBACE,MAACW;QACE,GAAGF,SAAS;QACbG,eAAab;QACbD,KAAKA;QACLE,WAAWN,OAAO;YAChBU;YACAC;YACAC;YACAN;QACF;;YAECU;YACAT;;;AAGP,GACA"}
+{"version":3,"sources":["../../src/avatar/Avatar.tsx"],"sourcesContent":["import {\n  type HTMLAttributes,\n  type ImgHTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from \"react\";\n\nimport { type PropsWithRef } from \"../types.js\";\nimport { type AvatarClassNameOptions, avatar, avatarImage } from \"./styles.js\";\n\nexport type AvatarImgAttributes = ImgHTMLAttributes<HTMLImageElement>;\n\n/**\n * @since 6.0.0 `aria-hidden` is set to `true` by default and removed\n * the `role=\"presentation\"`.\n */\nexport interface AvatarProps\n  extends\n    Omit<HTMLAttributes<HTMLSpanElement>, \"color\">,\n    AvatarClassNameOptions {\n  ref?: Ref<HTMLSpanElement>;\n\n  /**\n   * Since avatars are normally presentational data, they are hidden from screen\n   * readers by default.\n   *\n   * @defaultValue `true`\n   */\n  \"aria-hidden\"?: HTMLAttributes<HTMLSpanElement>[\"aria-hidden\"];\n\n  /**\n   * This should be an image `src` attribute to create an avatar from. When this\n   * prop is defined, you should not add any children to the avatar as the\n   * positioning will break.\n   */\n  src?: string;\n\n  /**\n   * An optional alt tag to display on the `<img>` when the `src` prop is also\n   * applied.\n   *\n   * For accessibility and screen readers, you normally do not want to actually\n   * provide this prop. This should only be used if the `Avatar` is not\n   * accompanied by some other component or main content as it will be extra\n   * noise for screen readers.\n   *\n   * @defaultValue `\"\"`\n   */\n  alt?: string;\n\n  /**\n   * An optional `referrerPolicy` to provide to the `<img>` element if the `src`\n   * or `imgProps` props are provided.\n   *\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-referrerpolicy|Referrer Policy}\n   *\n   * @since 2.2.0\n   */\n  referrerPolicy?: AvatarImgAttributes[\"referrerPolicy\"];\n\n  /**\n   * An optional object of image props and ref that can be used to create an\n   * image within the `Avatar`. This can be useful to add a custom `style`\n   * or`className` to the `<img>` element if that additional customization is\n   * needed.\n   *\n   * Note: The values in this object will override the `src`, `alt`, and\n   * `referrerPolicy` root level avatar props if they exist on this object.\n   *\n   * @since 2.2.0\n   */\n  imgProps?: PropsWithRef<AvatarImgAttributes>;\n}\n\n/**\n * An `Avatar` is generally used to represent objects or people within your app.\n * The avatar can consist of an image, an icon, or some text to display. When\n * the avatar is not an image, different themes can be applied to make the\n * avatar more unique.\n *\n * @example Simple Example\n * ```tsx\n * import { Avatar } from \"@react-md/core/avatar/Avatar\";\n * import { type ReactElement } from \"react\";\n *\n * export function Example(): ReactElement {\n *   return <Avatar src=\"/path-to-img.png\" />;\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/avatar | Avatar Demos}\n * @since 6.0.0 `aria-hidden` is set to `true` by default.\n */\nexport function Avatar(props: AvatarProps): ReactElement {\n  const {\n    ref,\n    \"aria-hidden\": ariaHidden = true,\n    className,\n    children,\n    src,\n    alt = \"\",\n    size = \"avatar\",\n    color,\n    theme,\n    imgProps,\n    referrerPolicy,\n    ...remaining\n  } = props;\n\n  let img: ReactNode;\n  if (src || imgProps) {\n    img = (\n      <img\n        src={src}\n        alt={alt}\n        referrerPolicy={referrerPolicy}\n        {...imgProps}\n        className={avatarImage({ className: imgProps?.className })}\n      />\n    );\n  }\n\n  return (\n    <span\n      {...remaining}\n      aria-hidden={ariaHidden}\n      ref={ref}\n      className={avatar({\n        size,\n        color,\n        theme,\n        className,\n      })}\n    >\n      {img}\n      {children}\n    </span>\n  );\n}\n"],"names":["avatar","avatarImage","Avatar","props","ref","ariaHidden","className","children","src","alt","size","color","theme","imgProps","referrerPolicy","remaining","img","span","aria-hidden"],"mappings":";AASA,SAAsCA,MAAM,EAAEC,WAAW,QAAQ,cAAc;AAkE/E;;;;;;;;;;;;;;;;;;CAkBC,GACD,OAAO,SAASC,OAAOC,KAAkB;IACvC,MAAM,EACJC,GAAG,EACH,eAAeC,aAAa,IAAI,EAChCC,SAAS,EACTC,QAAQ,EACRC,GAAG,EACHC,MAAM,EAAE,EACRC,OAAO,QAAQ,EACfC,KAAK,EACLC,KAAK,EACLC,QAAQ,EACRC,cAAc,EACd,GAAGC,WACJ,GAAGZ;IAEJ,IAAIa;IACJ,IAAIR,OAAOK,UAAU;QACnBG,oBACE,KAACA;YACCR,KAAKA;YACLC,KAAKA;YACLK,gBAAgBA;YACf,GAAGD,QAAQ;YACZP,WAAWL,YAAY;gBAAEK,WAAWO,UAAUP;YAAU;;IAG9D;IAEA,qBACE,MAACW;QACE,GAAGF,SAAS;QACbG,eAAab;QACbD,KAAKA;QACLE,WAAWN,OAAO;YAChBU;YACAC;YACAC;YACAN;QACF;;YAECU;YACAT;;;AAGP"}

package/dist/badge/Badge.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLAttributes, type ReactNode } from "react";
+import { type HTMLAttributes, type ReactElement, type ReactNode, type Ref } from "react";
 import { type BadgeTheme } from "./styles.js";
 declare module "react" {
     interface CSSProperties {
@@ -12,6 +12,7 @@ declare module "react" {
     }
 }
 export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    ref?: Ref<HTMLSpanElement>;
     /** @defaultValue `"greyscale"` */
     theme?: BadgeTheme;
     children: ReactNode;
@@ -57,4 +58,4 @@ export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
  * @since 6.0.0 Removed the `disableNullOnZero` feature since it's
  * easier just to use condition rendering yourself.
  */
-export declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<HTMLSpanElement>>;
+export declare function Badge(props: BadgeProps): ReactElement;

package/dist/badge/Badge.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { badge } from "./styles.js";
 /**
  * @example Simple Example
@@ -41,8 +40,8 @@ import { badge } from "./styles.js";
  * @see {@link https://react-md.dev/components/badge | Badge Demos}
  * @since 6.0.0 Removed the `disableNullOnZero` feature since it's
  * easier just to use condition rendering yourself.
- */ export const Badge = /*#__PURE__*/ forwardRef(function Badge(props, ref) {
-    const { children, className, theme, ...remaining } = props;
+ */ export function Badge(props) {
+    const { ref, children, className, theme, ...remaining } = props;
     return /*#__PURE__*/ _jsx("span", {
         ...remaining,
         ref: ref,
@@ -52,6 +51,6 @@ import { badge } from "./styles.js";
         }),
         children: children
     });
-});
+}
 
 //# sourceMappingURL=Badge.js.map

package/dist/badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/badge/Badge.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode, forwardRef } from \"react\";\n\nimport { type BadgeTheme, badge } from \"./styles.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-badge-border-radius\"?: string | number;\n    \"--rmd-badge-greyscale-background-color\"?: string;\n    \"--rmd-badge-greyscale-color\"?: string;\n    \"--rmd-badge-size\"?: string | number;\n    \"--rmd-badge-offset\"?: string | number;\n    \"--rmd-badge-offset-top\"?: string | number;\n    \"--rmd-badge-offset-right\"?: string | number;\n  }\n}\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  /** @defaultValue `\"greyscale\"` */\n  theme?: BadgeTheme;\n\n  children: ReactNode;\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { Badge } from \"@react-md/core/badge/Badge\";\n * import { Button } from \"@react-md/core/button/Button\";\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <>\n *       <Badge>3</Badge>\n *       <Badge theme=\"primary\">100</Badge>\n *       <Badge theme=\"secondary\">23</Badge>\n *       <Badge theme=\"greyscale\">18</Badge>\n *       <Badge theme=\"clear\">1</Badge>\n *     </>\n *   );\n * }\n * ```\n *\n * @example Within Buttons Example\n * ```tsx\n * import { Badge } from \"@react-md/core/badge/Badge\";\n * import { Button } from \"@react-md/core/button/Button\";\n * import { MaterialSymbol } from \"@react-md/core/icon/MaterialSymbol\";\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <Button aria-label=\"Notifications\" buttonType=\"icon\">\n *       <Badge>88</Badge>\n *       <MaterialSymbol name=\"notifications\" />\n *     </Button>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/badge | Badge Demos}\n * @since 6.0.0 Removed the `disableNullOnZero` feature since it's\n * easier just to use condition rendering yourself.\n */\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(\n  function Badge(props, ref) {\n    const { children, className, theme, ...remaining } = props;\n    return (\n      <span {...remaining} ref={ref} className={badge({ theme, className })}>\n        {children}\n      </span>\n    );\n  }\n);\n"],"names":["forwardRef","badge","Badge","props","ref","children","className","theme","remaining","span"],"mappings":";AAAA,SAA8CA,UAAU,QAAQ,QAAQ;AAExE,SAA0BC,KAAK,QAAQ,cAAc;AAqBrD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCC,GACD,OAAO,MAAMC,sBAAQF,WACnB,SAASE,MAAMC,KAAK,EAAEC,GAAG;IACvB,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,KAAK,EAAE,GAAGC,WAAW,GAAGL;IACrD,qBACE,KAACM;QAAM,GAAGD,SAAS;QAAEJ,KAAKA;QAAKE,WAAWL,MAAM;YAAEM;YAAOD;QAAU;kBAChED;;AAGP,GACA"}
+{"version":3,"sources":["../../src/badge/Badge.tsx"],"sourcesContent":["import {\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from \"react\";\n\nimport { type BadgeTheme, badge } from \"./styles.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-badge-border-radius\"?: string | number;\n    \"--rmd-badge-greyscale-background-color\"?: string;\n    \"--rmd-badge-greyscale-color\"?: string;\n    \"--rmd-badge-size\"?: string | number;\n    \"--rmd-badge-offset\"?: string | number;\n    \"--rmd-badge-offset-top\"?: string | number;\n    \"--rmd-badge-offset-right\"?: string | number;\n  }\n}\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  ref?: Ref<HTMLSpanElement>;\n\n  /** @defaultValue `\"greyscale\"` */\n  theme?: BadgeTheme;\n\n  children: ReactNode;\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { Badge } from \"@react-md/core/badge/Badge\";\n * import { Button } from \"@react-md/core/button/Button\";\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <>\n *       <Badge>3</Badge>\n *       <Badge theme=\"primary\">100</Badge>\n *       <Badge theme=\"secondary\">23</Badge>\n *       <Badge theme=\"greyscale\">18</Badge>\n *       <Badge theme=\"clear\">1</Badge>\n *     </>\n *   );\n * }\n * ```\n *\n * @example Within Buttons Example\n * ```tsx\n * import { Badge } from \"@react-md/core/badge/Badge\";\n * import { Button } from \"@react-md/core/button/Button\";\n * import { MaterialSymbol } from \"@react-md/core/icon/MaterialSymbol\";\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <Button aria-label=\"Notifications\" buttonType=\"icon\">\n *       <Badge>88</Badge>\n *       <MaterialSymbol name=\"notifications\" />\n *     </Button>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/badge | Badge Demos}\n * @since 6.0.0 Removed the `disableNullOnZero` feature since it's\n * easier just to use condition rendering yourself.\n */\nexport function Badge(props: BadgeProps): ReactElement {\n  const { ref, children, className, theme, ...remaining } = props;\n\n  return (\n    <span {...remaining} ref={ref} className={badge({ theme, className })}>\n      {children}\n    </span>\n  );\n}\n"],"names":["badge","Badge","props","ref","children","className","theme","remaining","span"],"mappings":";AAOA,SAA0BA,KAAK,QAAQ,cAAc;AAuBrD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCC,GACD,OAAO,SAASC,MAAMC,KAAiB;IACrC,MAAM,EAAEC,GAAG,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,KAAK,EAAE,GAAGC,WAAW,GAAGL;IAE1D,qBACE,KAACM;QAAM,GAAGD,SAAS;QAAEJ,KAAKA;QAAKE,WAAWL,MAAM;YAAEM;YAAOD;QAAU;kBAChED;;AAGP"}

package/dist/box/Box.d.ts

@@ -1,9 +1,10 @@
-import { type HTMLAttributes } from "react";
+import { type HTMLAttributes, type ReactElement, type Ref } from "react";
 import { type BoxOptions } from "./styles.js";
 /**
  * @since 6.0.0
  */
 export interface BoxProps extends HTMLAttributes<HTMLDivElement>, BoxOptions {
+    ref?: Ref<HTMLDivElement>;
 }
 /**
  * The `Box` component is a wrapper around the CSS box model and should solve
@@ -104,4 +105,4 @@ export interface BoxProps extends HTMLAttributes<HTMLDivElement>, BoxOptions {
  * @see {@link https://react-md.dev/components/box | Box Demos}
  * @since 6.0.0
  */
-export declare const Box: import("react").ForwardRefExoticComponent<BoxProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Box: (props: BoxProps) => ReactElement;

package/dist/box/Box.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { boxStyles } from "./styles.js";
 /**
  * The `Box` component is a wrapper around the CSS box model and should solve
@@ -99,8 +98,8 @@ import { boxStyles } from "./styles.js";
  *
  * @see {@link https://react-md.dev/components/box | Box Demos}
  * @since 6.0.0
- */ export const Box = /*#__PURE__*/ forwardRef(function Box(props, ref) {
-    const { style, className, children, align, justify, stacked, reversed, grid, gridName, gridItemSize, gridColumns, gridAutoRows, fullWidth, disableGap, disableWrap, disablePadding, ...remaining } = props;
+ */ export const Box = function Box(props) {
+    const { ref, style, className, children, align, justify, stacked, reversed, grid, gridName, gridItemSize, gridColumns, gridAutoRows, fullWidth, disableGap, disableWrap, disablePadding, ...remaining } = props;
     return /*#__PURE__*/ _jsx("div", {
         ...remaining,
         ref: ref,
@@ -123,6 +122,6 @@ import { boxStyles } from "./styles.js";
         }),
         children: children
     });
-});
+};
 
 //# sourceMappingURL=Box.js.map