npm - @react-md/core - Versions diffs - 6.1.0 → 6.2.1 - Mend

@react-md/core 6.1.0 → 6.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (173) hide show

package/dist/RootHtml.d.ts +1 -1
package/dist/RootHtml.js.map +1 -1
package/dist/_base.scss +1 -0
package/dist/autocomplete/defaults.d.ts +1 -0
package/dist/autocomplete/defaults.js +2 -6
package/dist/autocomplete/defaults.js.map +1 -1
package/dist/autocomplete/types.d.ts +9 -9
package/dist/autocomplete/types.js.map +1 -1
package/dist/avatar/Avatar.d.ts +1 -1
package/dist/avatar/Avatar.js +1 -1
package/dist/avatar/Avatar.js.map +1 -1
package/dist/avatar/styles.d.ts +29 -1
package/dist/avatar/styles.js.map +1 -1
package/dist/box/styles.d.ts +26 -3
package/dist/box/styles.js.map +1 -1
package/dist/button/AsyncButton.d.ts +2 -2
package/dist/button/AsyncButton.js.map +1 -1
package/dist/button/Button.d.ts +1 -1
package/dist/button/Button.js.map +1 -1
package/dist/card/CardHeader.d.ts +1 -1
package/dist/card/CardHeader.js.map +1 -1
package/dist/chip/Chip.d.ts +1 -1
package/dist/chip/Chip.js.map +1 -1
package/dist/dialog/Dialog.d.ts +1 -1
package/dist/dialog/Dialog.js.map +1 -1
package/dist/expansion-panel/ExpansionPanel.d.ts +1 -1
package/dist/expansion-panel/ExpansionPanel.js.map +1 -1
package/dist/expansion-panel/ExpansionPanelHeader.d.ts +1 -1
package/dist/expansion-panel/ExpansionPanelHeader.js.map +1 -1
package/dist/files/FileInput.d.ts +1 -1
package/dist/files/FileInput.js.map +1 -1
package/dist/form/FormMessageContainer.d.ts +1 -1
package/dist/form/FormMessageContainer.js.map +1 -1
package/dist/form/InputToggle.d.ts +2 -2
package/dist/form/InputToggle.js.map +1 -1
package/dist/form/NativeSelect.d.ts +1 -1
package/dist/form/NativeSelect.js.map +1 -1
package/dist/form/OptGroup.d.ts +1 -1
package/dist/form/OptGroup.js.map +1 -1
package/dist/form/Password.d.ts +1 -1
package/dist/form/Password.js.map +1 -1
package/dist/form/Select.d.ts +2 -2
package/dist/form/Select.js.map +1 -1
package/dist/form/Slider.d.ts +1 -1
package/dist/form/Slider.js.map +1 -1
package/dist/form/Switch.d.ts +3 -3
package/dist/form/Switch.js.map +1 -1
package/dist/form/SwitchTrack.d.ts +1 -1
package/dist/form/SwitchTrack.js.map +1 -1
package/dist/form/TextArea.d.ts +2 -2
package/dist/form/TextArea.js.map +1 -1
package/dist/form/TextField.d.ts +1 -1
package/dist/form/TextField.js.map +1 -1
package/dist/form/_select.scss +1 -1
package/dist/form/_slider.scss +1 -1
package/dist/form/types.d.ts +5 -5
package/dist/form/types.js.map +1 -1
package/dist/layout/LayoutAppBar.d.ts +1 -1
package/dist/layout/LayoutAppBar.js.map +1 -1
package/dist/list/ListItemLink.d.ts +1 -1
package/dist/list/ListItemLink.js.map +1 -1
package/dist/list/ListItemText.d.ts +1 -1
package/dist/list/ListItemText.js.map +1 -1
package/dist/list/ListSubheader.d.ts +1 -1
package/dist/list/ListSubheader.js.map +1 -1
package/dist/list/types.d.ts +2 -2
package/dist/list/types.js.map +1 -1
package/dist/menu/Menu.d.ts +3 -3
package/dist/menu/Menu.js.map +1 -1
package/dist/menu/MenuItemInputToggle.d.ts +2 -2
package/dist/menu/MenuItemInputToggle.js.map +1 -1
package/dist/menu/MenuItemTextField.d.ts +1 -1
package/dist/menu/MenuItemTextField.js.map +1 -1
package/dist/menu/MenuSheet.d.ts +1 -1
package/dist/menu/MenuSheet.js.map +1 -1
package/dist/navigation/CollapsibleNavGroup.d.ts +2 -2
package/dist/navigation/CollapsibleNavGroup.js.map +1 -1
package/dist/navigation/NavItemLink.d.ts +1 -1
package/dist/navigation/NavItemLink.js.map +1 -1
package/dist/progress/CircularProgress.d.ts +2 -17
package/dist/progress/CircularProgress.js +19 -23
package/dist/progress/CircularProgress.js.map +1 -1
package/dist/progress/LinearProgress.d.ts +5 -1
package/dist/progress/LinearProgress.js +13 -25
package/dist/progress/LinearProgress.js.map +1 -1
package/dist/progress/circularProgressStyles.d.ts +62 -0
package/dist/progress/circularProgressStyles.js +38 -0
package/dist/progress/circularProgressStyles.js.map +1 -0
package/dist/progress/linearProgressStyles.d.ts +38 -0
package/dist/progress/linearProgressStyles.js +38 -0
package/dist/progress/linearProgressStyles.js.map +1 -0
package/dist/searching/caseInsensitive.d.ts +20 -4
package/dist/searching/caseInsensitive.js +5 -1
package/dist/searching/caseInsensitive.js.map +1 -1
package/dist/searching/fuzzy.d.ts +3 -3
package/dist/searching/fuzzy.js +5 -1
package/dist/searching/fuzzy.js.map +1 -1
package/dist/searching/utils.d.ts +2 -1
package/dist/searching/utils.js +11 -2
package/dist/searching/utils.js.map +1 -1
package/dist/snackbar/Toast.d.ts +1 -1
package/dist/snackbar/Toast.js.map +1 -1
package/dist/table/TableCell.d.ts +1 -1
package/dist/table/TableCell.js.map +1 -1
package/dist/table/TableCheckbox.d.ts +1 -1
package/dist/table/TableCheckbox.js.map +1 -1
package/dist/table/TableRadio.d.ts +1 -1
package/dist/table/TableRadio.js.map +1 -1
package/dist/tabs/TabListScrollButton.d.ts +1 -1
package/dist/tabs/TabListScrollButton.js.map +1 -1
package/dist/tree/TreeItem.d.ts +2 -2
package/dist/tree/TreeItem.js.map +1 -1
package/dist/tree/_tree.scss +1 -1
package/dist/types.d.ts +29 -2
package/dist/types.js +1 -1
package/dist/types.js.map +1 -1
package/dist/utils/alphaNumericSort.d.ts +9 -9
package/dist/utils/alphaNumericSort.js +5 -1
package/dist/utils/alphaNumericSort.js.map +1 -1
package/dist/window-splitter/_window-splitter.scss +1 -1
package/package.json +6 -6
package/src/RootHtml.tsx +1 -1
package/src/autocomplete/defaults.ts +5 -12
package/src/autocomplete/types.ts +9 -12
package/src/avatar/Avatar.tsx +2 -2
package/src/avatar/styles.ts +53 -1
package/src/box/styles.ts +34 -13
package/src/button/AsyncButton.tsx +2 -2
package/src/button/Button.tsx +1 -1
package/src/card/CardHeader.tsx +1 -1
package/src/chip/Chip.tsx +1 -1
package/src/dialog/Dialog.tsx +1 -4
package/src/expansion-panel/ExpansionPanel.tsx +1 -1
package/src/expansion-panel/ExpansionPanelHeader.tsx +1 -1
package/src/files/FileInput.tsx +1 -4
package/src/form/FormMessageContainer.tsx +1 -1
package/src/form/InputToggle.tsx +2 -5
package/src/form/NativeSelect.tsx +1 -1
package/src/form/OptGroup.tsx +1 -4
package/src/form/Password.tsx +1 -1
package/src/form/Select.tsx +2 -3
package/src/form/Slider.tsx +1 -1
package/src/form/Switch.tsx +3 -3
package/src/form/SwitchTrack.tsx +1 -1
package/src/form/TextArea.tsx +2 -5
package/src/form/TextField.tsx +1 -1
package/src/form/types.ts +5 -15
package/src/layout/LayoutAppBar.tsx +1 -1
package/src/list/ListItemLink.tsx +1 -1
package/src/list/ListItemText.tsx +1 -4
package/src/list/ListSubheader.tsx +1 -1
package/src/list/types.ts +2 -5
package/src/menu/Menu.tsx +3 -4
package/src/menu/MenuItemInputToggle.tsx +2 -2
package/src/menu/MenuItemTextField.tsx +1 -1
package/src/menu/MenuSheet.tsx +1 -1
package/src/navigation/CollapsibleNavGroup.tsx +2 -2
package/src/navigation/NavItemLink.tsx +1 -1
package/src/progress/CircularProgress.tsx +31 -53
package/src/progress/LinearProgress.tsx +27 -40
package/src/progress/circularProgressStyles.ts +114 -0
package/src/progress/linearProgressStyles.ts +90 -0
package/src/searching/caseInsensitive.ts +29 -7
package/src/searching/fuzzy.ts +12 -6
package/src/searching/utils.ts +13 -2
package/src/snackbar/Toast.tsx +1 -1
package/src/table/TableCell.tsx +1 -4
package/src/table/TableCheckbox.tsx +1 -1
package/src/table/TableRadio.tsx +1 -1
package/src/tabs/TabListScrollButton.tsx +1 -1
package/src/tree/TreeItem.tsx +2 -2
package/src/types.ts +44 -2
package/src/utils/alphaNumericSort.ts +17 -11

package/dist/RootHtml.d.ts CHANGED Viewed

@@ -13,7 +13,7 @@ export interface RootHtmlProps extends HtmlHTMLAttributes<HTMLHtmlElement> {
      * `ref` if that is required for some reason. Using a `ref` would make your
      * root layout a client component though.
      */
-    bodyProps?: PropsWithRef<HTMLAttributes<HTMLBodyElement>, HTMLBodyElement>;
+    bodyProps?: PropsWithRef<HTMLAttributes<HTMLBodyElement>>;
     /**
      * Convenience prop to replace `bodyProps={{ className: "custom-class-name" }}`.
      */

package/dist/RootHtml.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/RootHtml.tsx"],"sourcesContent":["import {\n type HTMLAttributes,\n type HtmlHTMLAttributes,\n type ReactElement,\n type ReactNode,\n} from \"react\";\n\nimport { type PropsWithRef } from \"./types.js\";\n\n/*\n @since 6.0.0\n /\nexport interface RootHtmlProps extends HtmlHTMLAttributes<HTMLHtmlElement> {\n /* @defaultValue `\"ltr\"` /\n dir?: string;\n\n /* @defaultValue `\"en\"` /\n lang?: string;\n\n /\n Any additional props to provide to the `<body>` element and also supports a\n * `ref` if that is required for some reason. Using a `ref` would make your\n * root layout a client component though.\n /\n bodyProps?: PropsWithRef<HTMLAttributes<HTMLBodyElement~~>, HTMLBodyElement>;\~~n\n /\n Convenience prop to replace `bodyProps={{ className: \"custom-class-name\" }}`.\n /\n bodyClassName?: string;\n\n /\n Any content to render before the `<body>` tag. This can be useful if you\n * need to render a custom `<head>` element.\n /\n beforeBodyChildren?: ReactNode;\n\n /\n Any content to render after the `<body>` tag. This can be useful to insert\n * `<script>` tags for analytics or other external libraries.\n /\n afterBodyChildren?: ReactNode;\n}\n\n/\n This is mostly for creating the root html for next.js applications that\n * defaults to setting the `dir=\"ltr\"` and `lang=\"en\"`. Additional props can be\n * passed to the root `<html>` and `<body>` elements and children can be\n * rendered before and after the `<body>` if needed.\n \n @example Simple Example\n * ```tsx\n * // src/app/layout.tsx\n * import { RootHtml } from \"@react-md/core/RootHtml\";\n * import { type ReactElement, type PropsWithChildren } from \"react\";\n * import { Roboto_Flex } from \"next/font/google\";\n \n const roboto = Roboto_Flex({\n * subsets: [\"latin\"],\n * variable: \"--roboto\",\n * });\n \n export default function RootLayout(props: PropsWithChildren): ReactElement {\n * const { children } = props;\n \n return <RootHtml className={roboto.variable}>{children}</RootHtml>;\n * }\n * ```\n \n @since 6.0.0\n */\nexport function RootHtml(props: RootHtmlProps): ReactElement {\n const {\n dir = \"ltr\",\n lang = \"en\",\n children,\n bodyProps,\n bodyClassName,\n beforeBodyChildren,\n afterBodyChildren,\n ...remaining\n } = props;\n\n return (\n <html dir={dir} lang={lang} {...remaining}>\n {beforeBodyChildren}\n <body {...bodyProps} className={bodyClassName \|\| bodyProps?.className}>\n {children}\n </body>\n {afterBodyChildren}\n </html>\n );\n}\n"],"names":["RootHtml","props","dir","lang","children","bodyProps","bodyClassName","beforeBodyChildren","afterBodyChildren","remaining","html","body","className"],"mappings":";AA4CA;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BC,GACD,OAAO,SAASA,SAASC,KAAoB;IAC3C,MAAM,EACJC,MAAM,KAAK,EACXC,OAAO,IAAI,EACXC,QAAQ,EACRC,SAAS,EACTC,aAAa,EACbC,kBAAkB,EAClBC,iBAAiB,EACjB,GAAGC,WACJ,GAAGR;IAEJ,qBACE,MAACS;QAAKR,KAAKA;QAAKC,MAAMA;QAAO,GAAGM,SAAS;;YACtCF;0BACD,KAACI;gBAAM,GAAGN,SAAS;gBAAEO,WAAWN,iBAAiBD,WAAWO;0BACzDR;;YAEFI;;;AAGP"}
1	+ {"version":3,"sources":["../src/RootHtml.tsx"],"sourcesContent":["import {\n type HTMLAttributes,\n type HtmlHTMLAttributes,\n type ReactElement,\n type ReactNode,\n} from \"react\";\n\nimport { type PropsWithRef } from \"./types.js\";\n\n/*\n @since 6.0.0\n /\nexport interface RootHtmlProps extends HtmlHTMLAttributes<HTMLHtmlElement> {\n /* @defaultValue `\"ltr\"` /\n dir?: string;\n\n /* @defaultValue `\"en\"` /\n lang?: string;\n\n /\n Any additional props to provide to the `<body>` element and also supports a\n * `ref` if that is required for some reason. Using a `ref` would make your\n * root layout a client component though.\n /\n bodyProps?: PropsWithRef<HTMLAttributes<HTMLBodyElement>>;\n\n /\n Convenience prop to replace `bodyProps={{ className: \"custom-class-name\" }}`.\n /\n bodyClassName?: string;\n\n /\n Any content to render before the `<body>` tag. This can be useful if you\n * need to render a custom `<head>` element.\n /\n beforeBodyChildren?: ReactNode;\n\n /\n Any content to render after the `<body>` tag. This can be useful to insert\n * `<script>` tags for analytics or other external libraries.\n /\n afterBodyChildren?: ReactNode;\n}\n\n/\n This is mostly for creating the root html for next.js applications that\n * defaults to setting the `dir=\"ltr\"` and `lang=\"en\"`. Additional props can be\n * passed to the root `<html>` and `<body>` elements and children can be\n * rendered before and after the `<body>` if needed.\n \n @example Simple Example\n * ```tsx\n * // src/app/layout.tsx\n * import { RootHtml } from \"@react-md/core/RootHtml\";\n * import { type ReactElement, type PropsWithChildren } from \"react\";\n * import { Roboto_Flex } from \"next/font/google\";\n \n const roboto = Roboto_Flex({\n * subsets: [\"latin\"],\n * variable: \"--roboto\",\n * });\n \n export default function RootLayout(props: PropsWithChildren): ReactElement {\n * const { children } = props;\n \n return <RootHtml className={roboto.variable}>{children}</RootHtml>;\n * }\n * ```\n \n @since 6.0.0\n */\nexport function RootHtml(props: RootHtmlProps): ReactElement {\n const {\n dir = \"ltr\",\n lang = \"en\",\n children,\n bodyProps,\n bodyClassName,\n beforeBodyChildren,\n afterBodyChildren,\n ...remaining\n } = props;\n\n return (\n <html dir={dir} lang={lang} {...remaining}>\n {beforeBodyChildren}\n <body {...bodyProps} className={bodyClassName \|\| bodyProps?.className}>\n {children}\n </body>\n {afterBodyChildren}\n </html>\n );\n}\n"],"names":["RootHtml","props","dir","lang","children","bodyProps","bodyClassName","beforeBodyChildren","afterBodyChildren","remaining","html","body","className"],"mappings":";AA4CA;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BC,GACD,OAAO,SAASA,SAASC,KAAoB;IAC3C,MAAM,EACJC,MAAM,KAAK,EACXC,OAAO,IAAI,EACXC,QAAQ,EACRC,SAAS,EACTC,aAAa,EACbC,kBAAkB,EAClBC,iBAAiB,EACjB,GAAGC,WACJ,GAAGR;IAEJ,qBACE,MAACS;QAAKR,KAAKA;QAAKC,MAAMA;QAAO,GAAGM,SAAS;;YACtCF;0BACD,KAACI;gBAAM,GAAGN,SAAS;gBAAEO,WAAWN,iBAAiBD,WAAWO;0BACzDR;;YAEFI;;;AAGP"}

package/dist/_base.scss CHANGED Viewed

@@ -88,6 +88,7 @@ $_layer-order: (
   form-message,
   fieldset,
   label,
+  select,
   text-field,
   text-area,
   password,

package/dist/autocomplete/defaults.d.ts CHANGED Viewed

@@ -2,6 +2,7 @@ import { type MenuItemProps } from "../menu/MenuItem.js";
 import { type AutocompleteFilterOptions, type AutocompleteGetOptionPropsOptions, type AutocompleteOption } from "./types.js";
 /**
  * @since 6.0.0
+ * @since 6.2.0 Added support for `item.name` and provide better error messaging.
  * @internal
  */
 export declare const defaultAutocompleteExtractor: (item: unknown) => string;

package/dist/autocomplete/defaults.js CHANGED Viewed

@@ -2,13 +2,9 @@ import { caseInsensitiveSearch } from "../searching/caseInsensitive.js";
 import { defaultExtractor } from "../searching/utils.js";
 /**
  * @since 6.0.0
+ * @since 6.2.0 Added support for `item.name` and provide better error messaging.
  * @internal
- */ export const defaultAutocompleteExtractor = (item)=>{
-    if (item && typeof item === "object" && "label" in item && typeof item.label === "string") {
-        return item.label;
-    }
-    return defaultExtractor("Autocomplete")(item);
-};
+ */ export const defaultAutocompleteExtractor = defaultExtractor("Autocomplete", "getOptionLabel");
 /**
  * @since 6.0.0
  * @internal

package/dist/autocomplete/defaults.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/autocomplete/defaults.ts"],"sourcesContent":["import { type MenuItemProps } from \"../menu/MenuItem.js\";\nimport { caseInsensitiveSearch } from \"../searching/caseInsensitive.js\";\nimport { defaultExtractor } from \"../searching/utils.js\";\nimport {\n type AutocompleteFilterOptions,\n type AutocompleteGetOptionPropsOptions,\n type AutocompleteOption,\n} from \"./types.js\";\n\n/*\n @since 6.0.0\n * @~~internal\n~~ /\nexport ~~const~~ ~~defaultAutocompleteExtractor~~ = (item: ~~unknown):~~ ~~string~~ => ~~{\n if~~ (\n ~~item~~ ~~&&\n typeof~~ ~~item ===~~ \~~"object\" &&\~~n ~~\"label\"~~ in ~~item~~ ~~&&\n typeof~~ ~~item.label~~ ~~===~~ \~~"string\"\~~n ~~) {~~\~~n return item.label;\n }~~\n\n ~~return defaultExtractor(~~\"~~Autocomplete~~\")~~(item)~~;\n~~};\n~~\n/\n @since 6.0.0\n * @internal\n /\nexport const defaultAutocompleteFilter = <Option extends AutocompleteOption>(\n options: AutocompleteFilterOptions<Option>\n): readonly Option[] => caseInsensitiveSearch({ ...options, startsWith: true });\n\n/\n @since 6.0.0\n /\nexport const noopAutocompleteFilter = <Option extends AutocompleteOption>(\n options: AutocompleteFilterOptions<Option>\n): readonly Option[] => options.list;\n\n/\n @since 6.0.0\n * @internal\n /\nconst isProbablyMenuItemProps = (\n item: unknown\n): item is Partial<MenuItemProps> => !!item && typeof item === \"object\";\n\n/\n @since 6.0.0\n * @internal\n */\nexport const defaultAutocompleteGetOptionProps = <T extends AutocompleteOption>(\n options: AutocompleteGetOptionPropsOptions<T>\n): Partial<MenuItemProps> \| undefined => {\n const { option } = options;\n if (isProbablyMenuItemProps(option)) {\n const {\n leftAddon,\n rightAddon,\n className,\n children,\n disabled,\n height,\n textProps,\n textClassName,\n primaryText,\n secondaryText,\n secondaryTextClassName,\n multiline,\n disableTextChildren,\n } = option;\n\n return {\n children,\n leftAddon,\n rightAddon,\n className,\n disabled,\n height,\n textProps,\n textClassName,\n primaryText,\n secondaryText,\n secondaryTextClassName,\n multiline,\n disableTextChildren,\n };\n }\n return;\n};\n"],"names":["caseInsensitiveSearch","defaultExtractor","defaultAutocompleteExtractor","~~item","label","~~defaultAutocompleteFilter","options","startsWith","noopAutocompleteFilter","list","isProbablyMenuItemProps","defaultAutocompleteGetOptionProps","option","leftAddon","rightAddon","className","children","disabled","height","textProps","textClassName","primaryText","secondaryText","secondaryTextClassName","multiline","disableTextChildren"],"mappings":"AACA,SAASA,qBAAqB,QAAQ,kCAAkC;AACxE,SAASC,gBAAgB,QAAQ,wBAAwB;AAOzD~~;;;CAGC~~,GACD,OAAO,MAAMC,+BAA+B,~~CAACC;IAC3C~~,~~IACEA~~,~~QACA,OAAOA,SAAS,YAChB,WAAWA,QACX,OAAOA,KAAKC,KAAK,KAAK,UACtB~~;~~QACA,OAAOD,KAAKC,KAAK;IACnB;IAEA,OAAOH,iBAAiB,gBAAgBE;AAC1C,EAAE;~~AAEF;;;CAGC,GACD,OAAO,MAAME,4BAA4B,CACvCC,~~UACsBN~~,sBAAsB;QAAE,~~GAAGM~~,OAAO;QAAEC,YAAY;IAAK,GAAG;AAEhF;;CAEC,GACD,OAAO,MAAMC,yBAAyB,CACpCF,UACsBA,QAAQG,IAAI,CAAC;AAErC;;;CAGC,GACD,MAAMC,0BAA0B,~~CAC9BP~~,OACmC,CAAC,CAACA,QAAQ,OAAOA,SAAS;AAE/D;;;CAGC,GACD,OAAO,~~MAAMQ~~,oCAAoC,CAC/CL;IAEA,MAAM,~~EAAEM~~,MAAM,EAAE,~~GAAGN~~;IACnB,IAAII,~~wBAAwBE~~,SAAS;QACnC,MAAM,EACJC,SAAS,EACTC,UAAU,EACVC,SAAS,EACTC,QAAQ,EACRC,QAAQ,EACRC,MAAM,EACNC,SAAS,EACTC,aAAa,EACbC,WAAW,EACXC,aAAa,EACbC,sBAAsB,EACtBC,SAAS,EACTC,mBAAmB,EACpB,GAAGb;QAEJ,OAAO;YACLI;YACAH;YACAC;YACAC;YACAE;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;QACF;IACF;IACA;AACF,EAAE"}
1	+ {"version":3,"sources":["../../src/autocomplete/defaults.ts"],"sourcesContent":["import { type MenuItemProps } from \"../menu/MenuItem.js\";\nimport { caseInsensitiveSearch } from \"../searching/caseInsensitive.js\";\nimport { defaultExtractor } from \"../searching/utils.js\";\nimport {\n type AutocompleteFilterOptions,\n type AutocompleteGetOptionPropsOptions,\n type AutocompleteOption,\n} from \"./types.js\";\n\n/*\n @since 6.0.0\n * @since 6.2.0 Added support for `item.name` and provide better error messaging.\n * @internal\n /\nexport const defaultAutocompleteExtractor = defaultExtractor(\n \"Autocomplete\",\n \"getOptionLabel\"\n);\n\n/\n @since 6.0.0\n * @internal\n /\nexport const defaultAutocompleteFilter = <Option extends AutocompleteOption>(\n options: AutocompleteFilterOptions<Option>\n): readonly Option[] => caseInsensitiveSearch({ ...options, startsWith: true });\n\n/\n @since 6.0.0\n /\nexport const noopAutocompleteFilter = <Option extends AutocompleteOption>(\n options: AutocompleteFilterOptions<Option>\n): readonly Option[] => options.list;\n\n/\n @since 6.0.0\n * @internal\n /\nconst isProbablyMenuItemProps = (\n item: unknown\n): item is Partial<MenuItemProps> => !!item && typeof item === \"object\";\n\n/\n @since 6.0.0\n * @internal\n */\nexport const defaultAutocompleteGetOptionProps = <T extends AutocompleteOption>(\n options: AutocompleteGetOptionPropsOptions<T>\n): Partial<MenuItemProps> \| undefined => {\n const { option } = options;\n if (isProbablyMenuItemProps(option)) {\n const {\n leftAddon,\n rightAddon,\n className,\n children,\n disabled,\n height,\n textProps,\n textClassName,\n primaryText,\n secondaryText,\n secondaryTextClassName,\n multiline,\n disableTextChildren,\n } = option;\n\n return {\n children,\n leftAddon,\n rightAddon,\n className,\n disabled,\n height,\n textProps,\n textClassName,\n primaryText,\n secondaryText,\n secondaryTextClassName,\n multiline,\n disableTextChildren,\n };\n }\n return;\n};\n"],"names":["caseInsensitiveSearch","defaultExtractor","defaultAutocompleteExtractor","defaultAutocompleteFilter","options","startsWith","noopAutocompleteFilter","list","isProbablyMenuItemProps","item","defaultAutocompleteGetOptionProps","option","leftAddon","rightAddon","className","children","disabled","height","textProps","textClassName","primaryText","secondaryText","secondaryTextClassName","multiline","disableTextChildren"],"mappings":"AACA,SAASA,qBAAqB,QAAQ,kCAAkC;AACxE,SAASC,gBAAgB,QAAQ,wBAAwB;AAOzD;;;;CAIC,GACD,OAAO,MAAMC,+BAA+BD,iBAC1C,gBACA,kBACA;AAEF;;;CAGC,GACD,OAAO,MAAME,4BAA4B,CACvCC,UACsBJ,sBAAsB;QAAE,GAAGI,OAAO;QAAEC,YAAY;IAAK,GAAG;AAEhF;;CAEC,GACD,OAAO,MAAMC,yBAAyB,CACpCF,UACsBA,QAAQG,IAAI,CAAC;AAErC;;;CAGC,GACD,MAAMC,0BAA0B,CAC9BC,OACmC,CAAC,CAACA,QAAQ,OAAOA,SAAS;AAE/D;;;CAGC,GACD,OAAO,MAAMC,oCAAoC,CAC/CN;IAEA,MAAM,EAAEO,MAAM,EAAE,GAAGP;IACnB,IAAII,wBAAwBG,SAAS;QACnC,MAAM,EACJC,SAAS,EACTC,UAAU,EACVC,SAAS,EACTC,QAAQ,EACRC,QAAQ,EACRC,MAAM,EACNC,SAAS,EACTC,aAAa,EACbC,WAAW,EACXC,aAAa,EACbC,sBAAsB,EACtBC,SAAS,EACTC,mBAAmB,EACpB,GAAGb;QAEJ,OAAO;YACLI;YACAH;YACAC;YACAC;YACAE;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;QACF;IACF;IACA;AACF,EAAE"}

package/dist/autocomplete/types.d.ts CHANGED Viewed

@@ -10,7 +10,7 @@ import { type IconRotatorProps } from "../icon/IconRotator.js";
 import { type CircularProgressProps } from "../progress/CircularProgress.js";
 import { type ProgressTheme } from "../progress/types.js";
 import { type BaseSearchOptions } from "../searching/types.js";
-import { type PropsWithRef, type TextExtractor, type UseStateInitializer } from "../types.js";
+import { type AutomaticTextExtraction, type PropsWithRef, type TextExtractor, type UseStateInitializer } from "../types.js";
 /**
  * If a autocomplete value is one of these types, no additional code is required
  * to display a label in the input/chip for the autocomplete once the value has
@@ -18,16 +18,16 @@ import { type PropsWithRef, type TextExtractor, type UseStateInitializer } from
  *
  * - `"some value"` -&gt; `"some value"`
  * - `{ label: "Hello, world", value: 300 }` -&gt; `"Hello, world!"`
+ * - `{ name: "Hello, world", value: 300 }` -&gt; `"Hello, world!"`
  *
  * @since 6.0.0
+ * @deprecated @since 6.2.0 Use `AutomaticTextExtraction` instead.
  */
-export type AutocompleteLabeledOption = string | {
-    label: string;
-};
+export type AutocompleteLabeledOption = AutomaticTextExtraction;
 /**
  * @since 6.0.0
  */
-export type AutocompleteOption = AutocompleteLabeledOption | object;
+export type AutocompleteOption = AutomaticTextExtraction | object;
 /**
  * @since 6.0.0
  */
@@ -202,11 +202,11 @@ export interface AutocompleteUnknownQueryAndValueOptions<Option extends Autocomp
 }
 /**
  * A utility type that makes the `getOptionLabel` required when an option is not
- * a {@link AutocompleteLabeledOption}.
+ * a {@link AutomaticTextExtraction}.
  *
  * @since 6.0.0
  */
-export type AutocompleteOptionLabelExtractor<Option extends AutocompleteOption> = Option extends AutocompleteLabeledOption ? AutocompleteGetOptionLabel<Option> : Required<AutocompleteGetOptionLabel<Option>>;
+export type AutocompleteOptionLabelExtractor<Option extends AutocompleteOption> = Option extends AutomaticTextExtraction ? AutocompleteGetOptionLabel<Option> : Required<AutocompleteGetOptionLabel<Option>>;
 /**
  * @since 6.0.0
  */
@@ -520,7 +520,7 @@ export interface AutocompleteBaseProps<Option extends AutocompleteOption> extend
     /**
      * Any additional props that should be passed to the `Listbox` component.
      */
-    listboxProps?: PropsWithRef<ConfigurableAutocompleteListboxProps, HTMLDivElement>;
+    listboxProps?: PropsWithRef<ConfigurableAutocompleteListboxProps>;
     /**
      * This can be used to add any custom styling, change the icon, change the
      * label, etc for the dropdown button.
@@ -556,7 +556,7 @@ export interface AutocompleteBaseProps<Option extends AutocompleteOption> extend
     /**
      * This will do nothing if {@link disableClearButton} is `true`.
      */
-    clearButtonProps?: PropsWithRef<ConfigurableAutocompleteClearButtonProps, HTMLButtonElement>;
+    clearButtonProps?: PropsWithRef<ConfigurableAutocompleteClearButtonProps>;
     /**
      * Set to `true` to hide the clear button that appears when hovering an
      * `Autocomplete` that has a value. The user will still be able to clear the

package/dist/autocomplete/types.js.map CHANGED Viewed

	@@ -1 +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 PropsWithRef,\n type TextExtractor,\n type UseStateInitializer,\n} from \"../types.js\";\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\"` -> `\"some value\"`\n * - `{ label: \"Hello, world\", value: 300 }` -> `\"Hello, world!\"`\n \n @since 6.0.0\n /\nexport type AutocompleteLabeledOption = string \| { label: string };\n\n/\n @since 6.0.0\n /\nexport type AutocompleteOption = AutocompleteLabeledOption \| 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 AutocompleteLabeledOption}.\n \n @since 6.0.0\n /\nexport type AutocompleteOptionLabelExtractor<\n Option extends AutocompleteOption,\n> = Option extends AutocompleteLabeledOption\n ? AutocompleteGetOptionLabel<Option>\n : Required<AutocompleteGetOptionLabel<Option>>;\n\n/\n @since 6.0.0\n /\nexport interface AutocompleteFilteringOptions<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> extends 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> extends 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> extends 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> extends Omit<ComboboxMenuProps<PopupEl>, \"ref\">,\n 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,\n 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\n extends ConfigurableAutocompleteClearButtonProps {\n onClick: MouseEventHandler<HTMLButtonElement>;\n}\n\n/\n @since 6.0.0\n /\nexport interface ConfigurableAutocompleteDropdownButtonProps\n 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\n 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\n 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> extends 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 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<\n ConfigurableAutocompleteListboxProps,\n HTMLDivElement\n >;\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<\n ConfigurableAutocompleteClearButtonProps,\n HTMLButtonElement\n >;\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":"AAs1BA;;CAEC,GACD,WAEoD"}
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/*\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\"` -> `\"some value\"`\n * - `{ label: \"Hello, world\", value: 300 }` -> `\"Hello, world!\"`\n * - `{ name: \"Hello, world\", value: 300 }` -> `\"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<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> extends 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> extends 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> extends 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> extends Omit<ComboboxMenuProps<PopupEl>, \"ref\">,\n 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,\n 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\n extends ConfigurableAutocompleteClearButtonProps {\n onClick: MouseEventHandler<HTMLButtonElement>;\n}\n\n/\n @since 6.0.0\n /\nexport interface ConfigurableAutocompleteDropdownButtonProps\n 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\n 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\n 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> extends 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 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":"AAm1BA;;CAEC,GACD,WAEoD"}

package/dist/avatar/Avatar.d.ts CHANGED Viewed

@@ -62,7 +62,7 @@ export interface AvatarProps extends Omit<HTMLAttributes<HTMLSpanElement>, "colo
      *
      * @since 2.2.0
      */
-    imgProps?: PropsWithRef<AvatarImgAttributes, HTMLImageElement>;
+    imgProps?: PropsWithRef<AvatarImgAttributes>;
 }
 /**
  * An `Avatar` is generally used to represent objects or people within your app.

package/dist/avatar/Avatar.js CHANGED Viewed

@@ -20,7 +20,7 @@ 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;
+    const { "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", {

package/dist/avatar/Avatar.js.map CHANGED Viewed

	@@ -1 +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\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-avatar-background-color\"?: string;\n \"--rmd-avatar-color\"?: string;\n \"--rmd-avatar-border-color\"?: string;\n \"--rmd-avatar-border-radius\"?: string \| number;\n \"--rmd-avatar-size\"?: string \| number;\n \"--rmd-avatar-font-size\"?: string \| number;\n }\n}\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 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~~, HTMLImageElement~~>;\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;AA0E/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,~~QAAQ~~,~~EAAE~~,~~EACVC,~~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"}
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\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-avatar-background-color\"?: string;\n \"--rmd-avatar-color\"?: string;\n \"--rmd-avatar-border-color\"?: string;\n \"--rmd-avatar-border-radius\"?: string \| number;\n \"--rmd-avatar-size\"?: string \| number;\n \"--rmd-avatar-font-size\"?: string \| number;\n }\n}\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 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;AA0E/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"}

package/dist/avatar/styles.d.ts CHANGED Viewed

@@ -1,4 +1,32 @@
 import { type ThemeColor } from "../cssUtils.js";
+import { type OverridableStringUnion } from "../types.js";
+/**
+ * @since 6.2.0
+ */
+export interface AvatarColorOverrides {
+}
+/**
+ * @since 6.2.0
+ */
+export type DefaultAvatarColors = "red" | "pink" | "purple" | "deep-purple" | "indigo" | "blue" | "light-blue" | "cyan" | "teal" | "green" | "light-green" | "lime" | "yellow" | "amber" | "orange" | "deep-orange" | "brown" | "grey" | "blue-grey";
+/**
+ * The avatar available colors can be configured using module augmentation:
+ *
+ * ```ts
+ * declare module "@react-md/core/avatar/styles" {
+ *   interface AvatarColorOverrides {
+ *     "light-blue": false;
+ *     brandColor: true;
+ *   }
+ * }
+ * ```
+ *
+ * This would remove the support for the `light-blue` color and enable
+ * `brandColor`.
+ *
+ * @since 6.2.0
+ */
+export type AvatarColor = OverridableStringUnion<DefaultAvatarColors, AvatarColorOverrides>;
 /** @since 6.0.0 */
 export interface AvatarClassNameOptions {
     className?: string;
@@ -12,7 +40,7 @@ export interface AvatarClassNameOptions {
      * @see {@link theme}
      * @defaultValue `""`
      */
-    color?: string;
+    color?: AvatarColor;
     /**
      * @defaultValue `"avatar"`
      */

package/dist/avatar/styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/avatar/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { type ThemeColor, cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-avatar\");\n\n/** @since 6.0.0 /\nexport interface AvatarClassNameOptions {\n className?: string;\n\n /\n An optional color to apply to the avatar. This will apply a className of\n * `rmd-avatar--${color}`, so only the keys from the `$rmd-avatar-colors` Map\n * are supported by default. It is recommended to create custom colors using\n * the `rmd-avatar-theme-update-var` mixin with custom class names if the\n * default colors aren't extensive enough.\n \n @see {@link theme}\n * @defaultValue `\"\"`\n /\n color?: ~~string~~;\n\n /\n @defaultValue `\"avatar\"`\n /\n size?: \"avatar\" \| \"icon\";\n\n /\n This can be used instead of {@link color} to set the background color to one of\n * the theme colors. This will also set the text color to either be `#000` or\n * `#fff` automatically to enforce the correct aspect ratio.\n /\n theme?: ThemeColor;\n}\n\n/\n @since 6.0.0\n /\nexport function avatar(options: AvatarClassNameOptions): string {\n const { className, color = \"\", size, theme } = options;\n\n return cnb(\n styles({ [color]: color, icon: size === \"icon\" }),\n cssUtils({ backgroundColor: theme }),\n className\n );\n}\n\n/* @since 6.0.0 /\nexport interface AvatarImageClassNameOptions {\n className?: string;\n}\n\n/\n @since 6.0.0\n */\nexport function avatarImage(options: AvatarImageClassNameOptions = {}): string {\n const { className } = options;\n\n return cnb(styles(\"image\"), className);\n}\n"],"names":["cnb","cssUtils","bem","styles","avatar","options","className","color","size","theme","icon","backgroundColor","avatarImage"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAA0BC,QAAQ,QAAQ,iBAAiB;~~AAC3D~~,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;~~AA+BnB~~;;CAEC,GACD,OAAO,SAASE,OAAOC,OAA+B;IACpD,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAE,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGJ;IAE/C,OAAOL,IACLG,OAAO;QAAE,CAACI,MAAM,EAAEA;QAAOG,MAAMF,SAAS;IAAO,IAC/CP,SAAS;QAAEU,iBAAiBF;IAAM,IAClCH;AAEJ;AAOA;;CAEC,GACD,OAAO,SAASM,YAAYP,UAAuC,CAAC,CAAC;IACnE,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IAAIG,OAAO,UAAUG;AAC9B"}
1	+ {"version":3,"sources":["../../src/avatar/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { type ThemeColor, cssUtils } from \"../cssUtils.js\";\nimport { type OverridableStringUnion } from \"../types.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-avatar\");\n\n/*\n @since 6.2.0\n /\nexport interface AvatarColorOverrides {}\n\n/\n @since 6.2.0\n /\nexport type DefaultAvatarColors =\n \| \"red\"\n \| \"pink\"\n \| \"purple\"\n \| \"deep-purple\"\n \| \"indigo\"\n \| \"blue\"\n \| \"light-blue\"\n \| \"cyan\"\n \| \"teal\"\n \| \"green\"\n \| \"light-green\"\n \| \"lime\"\n \| \"yellow\"\n \| \"amber\"\n \| \"orange\"\n \| \"deep-orange\"\n \| \"brown\"\n \| \"grey\"\n \| \"blue-grey\";\n\n/\n The avatar available colors can be configured using module augmentation:\n \n ```ts\n * declare module \"@react-md/core/avatar/styles\" {\n * interface AvatarColorOverrides {\n * \"light-blue\": false;\n * brandColor: true;\n * }\n * }\n * ```\n \n This would remove the support for the `light-blue` color and enable\n * `brandColor`.\n \n @since 6.2.0\n /\nexport type AvatarColor = OverridableStringUnion<\n DefaultAvatarColors,\n AvatarColorOverrides\n>;\n\n/* @since 6.0.0 /\nexport interface AvatarClassNameOptions {\n className?: string;\n\n /\n An optional color to apply to the avatar. This will apply a className of\n * `rmd-avatar--${color}`, so only the keys from the `$rmd-avatar-colors` Map\n * are supported by default. It is recommended to create custom colors using\n * the `rmd-avatar-theme-update-var` mixin with custom class names if the\n * default colors aren't extensive enough.\n \n @see {@link theme}\n * @defaultValue `\"\"`\n /\n color?: AvatarColor;\n\n /\n @defaultValue `\"avatar\"`\n /\n size?: \"avatar\" \| \"icon\";\n\n /\n This can be used instead of {@link color} to set the background color to one of\n * the theme colors. This will also set the text color to either be `#000` or\n * `#fff` automatically to enforce the correct aspect ratio.\n /\n theme?: ThemeColor;\n}\n\n/\n @since 6.0.0\n /\nexport function avatar(options: AvatarClassNameOptions): string {\n const { className, color = \"\", size, theme } = options;\n\n return cnb(\n styles({ [color]: color, icon: size === \"icon\" }),\n cssUtils({ backgroundColor: theme }),\n className\n );\n}\n\n/* @since 6.0.0 /\nexport interface AvatarImageClassNameOptions {\n className?: string;\n}\n\n/\n @since 6.0.0\n */\nexport function avatarImage(options: AvatarImageClassNameOptions = {}): string {\n const { className } = options;\n\n return cnb(styles(\"image\"), className);\n}\n"],"names":["cnb","cssUtils","bem","styles","avatar","options","className","color","size","theme","icon","backgroundColor","avatarImage"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAA0BC,QAAQ,QAAQ,iBAAiB;AAE3D,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAkFnB;;CAEC,GACD,OAAO,SAASE,OAAOC,OAA+B;IACpD,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAE,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGJ;IAE/C,OAAOL,IACLG,OAAO;QAAE,CAACI,MAAM,EAAEA;QAAOG,MAAMF,SAAS;IAAO,IAC/CP,SAAS;QAAEU,iBAAiBF;IAAM,IAClCH;AAEJ;AAOA;;CAEC,GACD,OAAO,SAASM,YAAYP,UAAuC,CAAC,CAAC;IACnE,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IAAIG,OAAO,UAAUG;AAC9B"}

package/dist/box/styles.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 import { type CSSProperties } from "react";
+import { type IsEmptyObject, type OverridableStringUnion } from "../types.js";
 declare module "react" {
     interface CSSProperties {
         "--rmd-box-gap"?: string | number;
@@ -15,14 +16,23 @@ declare module "react" {
         "--rmd-box-large-desktop-item-min-size"?: number | string;
     }
 }
+/** @since 6.2.0 */
+export interface BoxAlignItemsOverrides {
+}
+/** @since 6.2.0 */
+export interface BoxJustifyContentOverrides {
+}
+/** @since 6.2.0 */
+export interface BoxGridNameOverrides {
+}
 /**
  * @since 6.0.0
  */
-export type BoxAlignItems = "start" | "flex-start" | "center" | "end" | "flex-end" | "stretch";
+export type BoxAlignItems = OverridableStringUnion<"start" | "flex-start" | "center" | "end" | "flex-end" | "stretch", BoxAlignItemsOverrides>;
 /**
  * @since 6.0.0
  */
-export type BoxJustifyContent = BoxAlignItems | "space-around" | "space-between" | "space-evenly";
+export type BoxJustifyContent = OverridableStringUnion<BoxAlignItems | "space-around" | "space-between" | "space-evenly", BoxJustifyContentOverrides>;
 /**
  * @since 6.0.0
  */
@@ -31,6 +41,10 @@ export type BoxFlexDirection = "row" | "column";
  * @since 6.0.0
  */
 export type BoxGridColumns = "fit" | "fill" | number;
+/**
+ * @since 6.2.0
+ */
+export type BoxGridName = IsEmptyObject<BoxGridNameOverrides> extends true ? string : OverridableStringUnion<never, BoxGridNameOverrides>;
 /**
  * @since 6.0.0
  */
@@ -101,11 +115,20 @@ export interface BoxOptions {
      * );
      * ```
      *
+     * ```ts
+     * declare module "@react-md/core/box/styles" {
+     *   interface BoxGridNameOverrides {
+     *     small: true;
+     *     medium: true;
+     *   }
+     * }
+     * ```
+     *
      * The `gridName` should be `"small" | "medium"`.
      *
      * @defaultValue `""`
      */
-    gridName?: string;
+    gridName?: BoxGridName;
     /**
      * The default behavior for a grid is to automatically determine the number
      * of columns to render by placing as many items as possible with a specific

package/dist/box/styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/box/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { type CSSProperties } from \"react\";\n\nimport { type DefinedCSSVariableName } from \"../theme/types.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-box\");\n\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-box-gap\"?: string \| number;\n \"--rmd-box-padding\"?: string \| number;\n \"--rmd-box-item-min-size\"?: string \| number;\n \"--rmd-box-columns\"?: string \| number;\n \"--rmd-box-phone-columns\"?: number \| string;\n \"--rmd-box-phone-item-min-size\"?: number \| string;\n \"--rmd-box-tablet-columns\"?: number \| string;\n \"--rmd-box-tablet-item-min-size\"?: number \| string;\n \"--rmd-box-desktop-columns\"?: number \| string;\n \"--rmd-box-desktop-item-min-size\"?: number \| string;\n \"--rmd-box-large-desktop-columns\"?: number \| string;\n \"--rmd-box-large-desktop-item-min-size\"?: number \| string;\n }\n}\n\n/*\n @since 6.0.0\n /\nexport type BoxAlignItems =\n \| \"start\"\n \| \"flex-start\"\n \| \"center\"\n \| \"end\"\n \| \"flex-end\"\n \| \"stretch\";\n\n/\n @since 6.0.0\n /\nexport type BoxJustifyContent =\n \| BoxAlignItems\n \| \"space-around\"\n \| \"space-between\"\n \| \"space-evenly\";\n\n/\n @since 6.0.0\n /\nexport type BoxFlexDirection = \"row\" \| \"column\";\n\n/\n @since 6.0.0\n /\nexport type BoxGridColumns = \"fit\" \| \"fill\" \| number;\n\n/\n @since 6.0.0\n /\nexport type BoxBreakpoints = \"phone\" \| \"tablet\" \| \"desktop\" \| \"largeDesktop\";\n\n/\n @since 6.0.0\n /\nexport type BoxGridBreakpointColumns = {\n [key in BoxBreakpoints]?: BoxGridColumns;\n};\n\n/\n @since 6.0.0\n /\nexport type BoxGridBreakpointItemSize = {\n [key in BoxBreakpoints]?: string;\n};\n\n/\n @since 6.0.0\n /\nexport interface BoxOptions {\n className?: string;\n\n /\n Set this to `true` to use `display: grid` instead of `display: flex`.\n \n @defaultValue `false`\n /\n grid?: boolean;\n\n /\n Set this to `true` to apply `width: 100%`. This can be useful when using\n * nested box layouts.\n \n @defaultValue `false`\n /\n fullWidth?: boolean;\n\n /\n Set this to `true` to prevent gap between items.\n \n @defaultValue `false`\n /\n disableGap?: boolean \| \"row\" \| \"column\";\n\n /\n Set this to `true` to set `flex-wrap: nowrap`.\n \n @defaultValue `false`\n /\n disableWrap?: boolean;\n\n /\n Set this to `true` to disable the default padding.\n \n @defaultValue `false`\n /\n disablePadding?: boolean;\n\n /\n This should match one of the names in the `$box-grids` map. So for example:\n \n ```scss\n * @use \"react-md\" with (\n * $box-grids: (\n * small: (\n * min: 5rem\n * ),\n * medium: (\n * min: 7rem,\n * gap: 0.5rem,\n * padding: 2rem,\n * ),\n * ),\n * );\n * ```\n \n The `gridName` should be `\"small\" \| \"medium\"`.\n \n @defaultValue `\"\"`\n /\n gridName?: string;\n\n /\n The default behavior for a grid is to automatically determine the number\n * of columns to render by placing as many items as possible with a specific\n * item min-width and the defined gap between items. Once the number of\n * columns has been determined, place the items in the grid and expand to the\n * full column width.\n \n This prop is a convenience prop to control how to display items when there\n * are not enough to span all columns without a separate SCSS file.\n \n i.e. 3 items were provided but 4 can be rendered.\n \n - `\"fit\"` - fill the entire width with columns and stretch columns to fill\n * the remaining space\n * - `\"fill\"` - fill the entire width with columns and add empty columns to\n * fill the remaining space\n * - `number` - ignore the auto layout behavior and specify the number of\n * columns to use instead.\n \n If additional responsive behavior is required, an object can be provided\n * to define the column behavior for: phone, tablet, desktop, or\n * largeDesktop.\n \n @see {@link gridItemSize} for how the number of columns are determined.\n * @defaultValue `\"fit\"`\n /\n gridColumns?: BoxGridColumns \| BoxGridBreakpointColumns;\n\n /\n This prop can be used to override the default `--rmd-box-item-min-size`\n * for the grid without a separate SCSS file. Since this is set as a CSS variable,\n * the value must be a number with a unit to work correctly. i.e. `10rem`\n * instead of `160`.\n \n If additional responsive behavior is required, an object can be provided\n * to define the column behavior for: phone, tablet, desktop, or\n * largeDesktop.\n \n @see {@link https://react-md.dev/sassdoc/box#variables-box-item-min-size}\n /\n gridItemSize?: string \| BoxGridBreakpointItemSize;\n\n /\n Set this to `true` to enable equal height rows within the grid based\n * on the current `max-height`. This requires the `max-height` to be set\n * on the `Box` either by:\n \n - a custom class name that sets `max-height`\n * - `core.box-set-var(auto-rows-height, VALUE)` on the box or a parent element\n \n @defaultValue `false`\n /\n gridAutoRows?: boolean;\n\n /\n @defaultValue `\"\"`\n /\n align?: BoxAlignItems;\n\n /\n The default value is really `center` or whatever the\n * `$box-default-align-items` is set to.\n \n @defaultValue `\"\"`\n /\n justify?: BoxJustifyContent;\n\n /\n Set this to `true` to set `flex-direction: column` which will stack all\n * items in the box.\n \n @defaultValue `false`\n /\n stacked?: boolean;\n\n /\n Set this to `true` to reverse the `flex-direction`. i.e.\n * - `flex-direction: row-reverse`\n * - `flex-direction: column-reverse`\n \n @defaultValue `false`\n /\n reversed?: boolean;\n}\n\n/\n @see {@link boxStyles}\n * @since 6.0.0\n /\nexport function box(options: BoxOptions = {}): string {\n const {\n className,\n align = \"\",\n grid,\n gridName = \"\",\n gridColumns = \"fit\",\n gridItemSize,\n gridAutoRows,\n justify = \"\",\n stacked,\n reversed,\n fullWidth,\n disableGap,\n disableWrap,\n disablePadding,\n } = options;\n let phoneColumns: BoxGridColumns \| undefined;\n let phoneItemSize: string \| number \| undefined;\n let tabletColumns: BoxGridColumns \| undefined;\n let tabletItemSize: string \| number \| undefined;\n let desktopColumns: BoxGridColumns \| undefined;\n let desktopItemSize: string \| number \| undefined;\n let largeDesktopColumns: BoxGridColumns \| undefined;\n let largeDesktopItemSize: string \| number \| undefined;\n if (gridColumns && typeof gridColumns === \"object\") {\n ({\n phone: phoneColumns,\n tablet: tabletColumns,\n desktop: desktopColumns,\n largeDesktop: largeDesktopColumns,\n } = gridColumns);\n }\n if (gridItemSize && typeof gridItemSize === \"object\") {\n ({\n phone: phoneItemSize,\n tablet: tabletItemSize,\n desktop: desktopItemSize,\n largeDesktop: largeDesktopItemSize,\n } = gridItemSize);\n }\n\n const isItemSizeEnabled = (\n value: string \| number \| undefined\n ): boolean \| undefined => grid && (!!value \|\| value === 0);\n const isColumnsEnabled = (\n value: BoxGridColumns \| BoxGridBreakpointColumns \| undefined\n ): boolean \| undefined => grid && typeof value === \"number\";\n\n return cnb(\n styles({\n gap: !disableGap,\n \"gap-h\": disableGap === \"row\",\n \"gap-v\": disableGap === \"column\",\n wrap: !disableWrap,\n padded: !disablePadding,\n column: stacked && !reversed,\n reverse: !stacked && reversed,\n \"column-reverse\": stacked && reversed,\n \"full-width\": fullWidth,\n grid,\n \"grid-fill\": grid && gridColumns === \"fill\",\n \"grid-size\": isColumnsEnabled(gridColumns),\n \"grid-phone\": grid && (phoneColumns \|\| phoneItemSize),\n \"grid-phone-size\":\n isColumnsEnabled(phoneColumns) \|\| isItemSizeEnabled(phoneItemSize),\n \"grid-tablet\": grid && (tabletColumns \|\| tabletItemSize),\n \"grid-tablet-size\":\n isColumnsEnabled(tabletColumns) \|\| isItemSizeEnabled(tabletItemSize),\n \"grid-desktop\": grid && (desktopColumns \|\| desktopItemSize),\n \"grid-desktop-size\":\n isColumnsEnabled(desktopColumns) \|\| isItemSizeEnabled(desktopItemSize),\n \"grid-large-desktop\":\n grid && (largeDesktopColumns \|\| largeDesktopItemSize),\n \"grid-large-desktop-size\":\n isColumnsEnabled(largeDesktopColumns) \|\|\n isItemSizeEnabled(largeDesktopItemSize),\n \"grid-auto-rows\": grid && gridAutoRows,\n [gridName]: grid && gridName,\n \"align-start\": align === \"start\" \|\| align === \"flex-start\",\n \"align-center\": align === \"center\",\n \"align-end\": align === \"end\" \|\| align === \"flex-end\",\n \"align-stretch\": align === \"stretch\",\n \"justify-center\": justify === \"center\",\n \"justify-start\": justify === \"start\" \|\| justify === \"flex-start\",\n \"justify-end\": justify === \"end\" \|\| justify === \"flex-end\",\n \"justify-stretch\": justify === \"stretch\",\n \"justify-around\": justify === \"space-around\",\n \"justify-between\": justify === \"space-between\",\n \"justify-evenly\": justify === \"space-evenly\",\n }),\n className\n );\n}\n\n/\n @since 6.0.0\n * @internal\n /\ninterface ApplyOptions {\n media: keyof BoxGridBreakpointColumns \| \"\";\n style: CSSProperties \| undefined;\n type: \"columns\" \| \"size\";\n value:\n \| BoxGridColumns\n \| BoxGridBreakpointColumns\n \| string\n \| BoxGridBreakpointItemSize\n \| undefined;\n}\n\n/\n @since 6.0.0\n * @internal\n /\nfunction applyBoxVar(options: ApplyOptions): CSSProperties \| undefined {\n const { type, media, style, value } = options;\n const expectedType = type === \"columns\" ? \"number\" : \"string\";\n if (typeof value !== expectedType) {\n return style;\n }\n\n const suffix = type === \"columns\" ? type : \"item-min-size\";\n let varName: DefinedCSSVariableName = `--rmd-box-${suffix}`;\n if (media === \"largeDesktop\") {\n varName = `--rmd-box-large-desktop-${suffix}`;\n } else if (media) {\n varName = `--rmd-box-${media}-${suffix}`;\n }\n\n return {\n ...style,\n [varName]: value,\n };\n}\n\n/\n @since 6.0.0\n * @internal\n /\nconst BREAKPOINTS = [\"phone\", \"tablet\", \"desktop\", \"largeDesktop\"] as const;\n\n/\n @since 6.0.0\n * @internal\n /\nfunction applyBoxVarGroup(\n options: Pick<ApplyOptions, \"value\" \| \"style\" \| \"type\">\n): CSSProperties \| undefined {\n const { style: propStyle, value, type } = options;\n let style = applyBoxVar({\n type,\n style: propStyle,\n media: \"\",\n value,\n });\n if (value && typeof value === \"object\") {\n BREAKPOINTS.forEach((media) => {\n style = applyBoxVar({\n type,\n style,\n media,\n value: value[media],\n });\n });\n }\n return style;\n}\n\n/\n @since 6.0.0\n /\nexport interface BoxStyles {\n style?: CSSProperties;\n className: string;\n}\n\n/\n @since 6.0.0\n /\nexport interface BoxStylesOptions extends BoxOptions {\n style?: CSSProperties;\n}\n\n/\n @see {@link box}\n * @since 6.0.0\n */\nexport function boxStyles(options: BoxStylesOptions): BoxStyles {\n const { style: propStyle, gridColumns, gridItemSize } = options;\n let style = applyBoxVarGroup({\n type: \"columns\",\n style: propStyle,\n value: gridColumns,\n });\n style = applyBoxVarGroup({\n type: \"size\",\n style,\n value: gridItemSize,\n });\n\n return {\n style,\n className: box(options),\n };\n}\n"],"names":["cnb","bem","styles","box","options","className","align","grid","gridName","gridColumns","gridItemSize","gridAutoRows","justify","stacked","reversed","fullWidth","disableGap","disableWrap","disablePadding","phoneColumns","phoneItemSize","tabletColumns","tabletItemSize","desktopColumns","desktopItemSize","largeDesktopColumns","largeDesktopItemSize","phone","tablet","desktop","largeDesktop","isItemSizeEnabled","value","isColumnsEnabled","gap","wrap","padded","column","reverse","applyBoxVar","type","media","style","expectedType","suffix","varName","BREAKPOINTS","applyBoxVarGroup","propStyle","forEach","boxStyles"],"mappings":"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"}
1	+ {"version":3,"sources":["../../src/box/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { type CSSProperties } from \"react\";\n\nimport { type DefinedCSSVariableName } from \"../theme/types.js\";\nimport { type IsEmptyObject, type OverridableStringUnion } from \"../types.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-box\");\n\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-box-gap\"?: string \| number;\n \"--rmd-box-padding\"?: string \| number;\n \"--rmd-box-item-min-size\"?: string \| number;\n \"--rmd-box-columns\"?: string \| number;\n \"--rmd-box-phone-columns\"?: number \| string;\n \"--rmd-box-phone-item-min-size\"?: number \| string;\n \"--rmd-box-tablet-columns\"?: number \| string;\n \"--rmd-box-tablet-item-min-size\"?: number \| string;\n \"--rmd-box-desktop-columns\"?: number \| string;\n \"--rmd-box-desktop-item-min-size\"?: number \| string;\n \"--rmd-box-large-desktop-columns\"?: number \| string;\n \"--rmd-box-large-desktop-item-min-size\"?: number \| string;\n }\n}\n\n/** @since 6.2.0 /\nexport interface BoxAlignItemsOverrides {}\n/* @since 6.2.0 /\nexport interface BoxJustifyContentOverrides {}\n/* @since 6.2.0 /\nexport interface BoxGridNameOverrides {}\n\n/\n @since 6.0.0\n /\nexport type BoxAlignItems = OverridableStringUnion<\n \"start\" \| \"flex-start\" \| \"center\" \| \"end\" \| \"flex-end\" \| \"stretch\",\n BoxAlignItemsOverrides\n>;\n\n/\n @since 6.0.0\n /\nexport type BoxJustifyContent = OverridableStringUnion<\n BoxAlignItems \| \"space-around\" \| \"space-between\" \| \"space-evenly\",\n BoxJustifyContentOverrides\n>;\n\n/\n @since 6.0.0\n /\nexport type BoxFlexDirection = \"row\" \| \"column\";\n\n/\n @since 6.0.0\n /\nexport type BoxGridColumns = \"fit\" \| \"fill\" \| number;\n\n/\n @since 6.2.0\n /\nexport type BoxGridName =\n IsEmptyObject<BoxGridNameOverrides> extends true\n ? string\n : OverridableStringUnion<never, BoxGridNameOverrides>;\n\n/\n @since 6.0.0\n /\nexport type BoxBreakpoints = \"phone\" \| \"tablet\" \| \"desktop\" \| \"largeDesktop\";\n\n/\n @since 6.0.0\n /\nexport type BoxGridBreakpointColumns = {\n [key in BoxBreakpoints]?: BoxGridColumns;\n};\n\n/\n @since 6.0.0\n /\nexport type BoxGridBreakpointItemSize = {\n [key in BoxBreakpoints]?: string;\n};\n\n/\n @since 6.0.0\n /\nexport interface BoxOptions {\n className?: string;\n\n /\n Set this to `true` to use `display: grid` instead of `display: flex`.\n \n @defaultValue `false`\n /\n grid?: boolean;\n\n /\n Set this to `true` to apply `width: 100%`. This can be useful when using\n * nested box layouts.\n \n @defaultValue `false`\n /\n fullWidth?: boolean;\n\n /\n Set this to `true` to prevent gap between items.\n \n @defaultValue `false`\n /\n disableGap?: boolean \| \"row\" \| \"column\";\n\n /\n Set this to `true` to set `flex-wrap: nowrap`.\n \n @defaultValue `false`\n /\n disableWrap?: boolean;\n\n /\n Set this to `true` to disable the default padding.\n \n @defaultValue `false`\n /\n disablePadding?: boolean;\n\n /\n This should match one of the names in the `$box-grids` map. So for example:\n \n ```scss\n * @use \"react-md\" with (\n * $box-grids: (\n * small: (\n * min: 5rem\n * ),\n * medium: (\n * min: 7rem,\n * gap: 0.5rem,\n * padding: 2rem,\n * ),\n * ),\n * );\n * ```\n \n ```ts\n * declare module \"@react-md/core/box/styles\" {\n * interface BoxGridNameOverrides {\n * small: true;\n * medium: true;\n * }\n * }\n * ```\n \n The `gridName` should be `\"small\" \| \"medium\"`.\n \n @defaultValue `\"\"`\n /\n gridName?: BoxGridName;\n\n /\n The default behavior for a grid is to automatically determine the number\n * of columns to render by placing as many items as possible with a specific\n * item min-width and the defined gap between items. Once the number of\n * columns has been determined, place the items in the grid and expand to the\n * full column width.\n \n This prop is a convenience prop to control how to display items when there\n * are not enough to span all columns without a separate SCSS file.\n \n i.e. 3 items were provided but 4 can be rendered.\n \n - `\"fit\"` - fill the entire width with columns and stretch columns to fill\n * the remaining space\n * - `\"fill\"` - fill the entire width with columns and add empty columns to\n * fill the remaining space\n * - `number` - ignore the auto layout behavior and specify the number of\n * columns to use instead.\n \n If additional responsive behavior is required, an object can be provided\n * to define the column behavior for: phone, tablet, desktop, or\n * largeDesktop.\n \n @see {@link gridItemSize} for how the number of columns are determined.\n * @defaultValue `\"fit\"`\n /\n gridColumns?: BoxGridColumns \| BoxGridBreakpointColumns;\n\n /\n This prop can be used to override the default `--rmd-box-item-min-size`\n * for the grid without a separate SCSS file. Since this is set as a CSS variable,\n * the value must be a number with a unit to work correctly. i.e. `10rem`\n * instead of `160`.\n \n If additional responsive behavior is required, an object can be provided\n * to define the column behavior for: phone, tablet, desktop, or\n * largeDesktop.\n \n @see {@link https://react-md.dev/sassdoc/box#variables-box-item-min-size}\n /\n gridItemSize?: string \| BoxGridBreakpointItemSize;\n\n /\n Set this to `true` to enable equal height rows within the grid based\n * on the current `max-height`. This requires the `max-height` to be set\n * on the `Box` either by:\n \n - a custom class name that sets `max-height`\n * - `core.box-set-var(auto-rows-height, VALUE)` on the box or a parent element\n \n @defaultValue `false`\n /\n gridAutoRows?: boolean;\n\n /\n @defaultValue `\"\"`\n /\n align?: BoxAlignItems;\n\n /\n The default value is really `center` or whatever the\n * `$box-default-align-items` is set to.\n \n @defaultValue `\"\"`\n /\n justify?: BoxJustifyContent;\n\n /\n Set this to `true` to set `flex-direction: column` which will stack all\n * items in the box.\n \n @defaultValue `false`\n /\n stacked?: boolean;\n\n /\n Set this to `true` to reverse the `flex-direction`. i.e.\n * - `flex-direction: row-reverse`\n * - `flex-direction: column-reverse`\n \n @defaultValue `false`\n /\n reversed?: boolean;\n}\n\n/\n @see {@link boxStyles}\n * @since 6.0.0\n /\nexport function box(options: BoxOptions = {}): string {\n const {\n className,\n align = \"\",\n grid,\n gridName = \"\",\n gridColumns = \"fit\",\n gridItemSize,\n gridAutoRows,\n justify = \"\",\n stacked,\n reversed,\n fullWidth,\n disableGap,\n disableWrap,\n disablePadding,\n } = options;\n let phoneColumns: BoxGridColumns \| undefined;\n let phoneItemSize: string \| number \| undefined;\n let tabletColumns: BoxGridColumns \| undefined;\n let tabletItemSize: string \| number \| undefined;\n let desktopColumns: BoxGridColumns \| undefined;\n let desktopItemSize: string \| number \| undefined;\n let largeDesktopColumns: BoxGridColumns \| undefined;\n let largeDesktopItemSize: string \| number \| undefined;\n if (gridColumns && typeof gridColumns === \"object\") {\n ({\n phone: phoneColumns,\n tablet: tabletColumns,\n desktop: desktopColumns,\n largeDesktop: largeDesktopColumns,\n } = gridColumns);\n }\n if (gridItemSize && typeof gridItemSize === \"object\") {\n ({\n phone: phoneItemSize,\n tablet: tabletItemSize,\n desktop: desktopItemSize,\n largeDesktop: largeDesktopItemSize,\n } = gridItemSize);\n }\n\n const isItemSizeEnabled = (\n value: string \| number \| undefined\n ): boolean \| undefined => grid && (!!value \|\| value === 0);\n const isColumnsEnabled = (\n value: BoxGridColumns \| BoxGridBreakpointColumns \| undefined\n ): boolean \| undefined => grid && typeof value === \"number\";\n\n return cnb(\n styles({\n gap: !disableGap,\n \"gap-h\": disableGap === \"row\",\n \"gap-v\": disableGap === \"column\",\n wrap: !disableWrap,\n padded: !disablePadding,\n column: stacked && !reversed,\n reverse: !stacked && reversed,\n \"column-reverse\": stacked && reversed,\n \"full-width\": fullWidth,\n grid,\n \"grid-fill\": grid && gridColumns === \"fill\",\n \"grid-size\": isColumnsEnabled(gridColumns),\n \"grid-phone\": grid && (phoneColumns \|\| phoneItemSize),\n \"grid-phone-size\":\n isColumnsEnabled(phoneColumns) \|\| isItemSizeEnabled(phoneItemSize),\n \"grid-tablet\": grid && (tabletColumns \|\| tabletItemSize),\n \"grid-tablet-size\":\n isColumnsEnabled(tabletColumns) \|\| isItemSizeEnabled(tabletItemSize),\n \"grid-desktop\": grid && (desktopColumns \|\| desktopItemSize),\n \"grid-desktop-size\":\n isColumnsEnabled(desktopColumns) \|\| isItemSizeEnabled(desktopItemSize),\n \"grid-large-desktop\":\n grid && (largeDesktopColumns \|\| largeDesktopItemSize),\n \"grid-large-desktop-size\":\n isColumnsEnabled(largeDesktopColumns) \|\|\n isItemSizeEnabled(largeDesktopItemSize),\n \"grid-auto-rows\": grid && gridAutoRows,\n [gridName]: grid && gridName,\n \"align-start\": align === \"start\" \|\| align === \"flex-start\",\n \"align-center\": align === \"center\",\n \"align-end\": align === \"end\" \|\| align === \"flex-end\",\n \"align-stretch\": align === \"stretch\",\n \"justify-center\": justify === \"center\",\n \"justify-start\": justify === \"start\" \|\| justify === \"flex-start\",\n \"justify-end\": justify === \"end\" \|\| justify === \"flex-end\",\n \"justify-stretch\": justify === \"stretch\",\n \"justify-around\": justify === \"space-around\",\n \"justify-between\": justify === \"space-between\",\n \"justify-evenly\": justify === \"space-evenly\",\n }),\n className\n );\n}\n\n/\n @since 6.0.0\n * @internal\n /\ninterface ApplyOptions {\n media: keyof BoxGridBreakpointColumns \| \"\";\n style: CSSProperties \| undefined;\n type: \"columns\" \| \"size\";\n value:\n \| BoxGridColumns\n \| BoxGridBreakpointColumns\n \| string\n \| BoxGridBreakpointItemSize\n \| undefined;\n}\n\n/\n @since 6.0.0\n * @internal\n /\nfunction applyBoxVar(options: ApplyOptions): CSSProperties \| undefined {\n const { type, media, style, value } = options;\n const expectedType = type === \"columns\" ? \"number\" : \"string\";\n if (typeof value !== expectedType) {\n return style;\n }\n\n const suffix = type === \"columns\" ? type : \"item-min-size\";\n let varName: DefinedCSSVariableName = `--rmd-box-${suffix}`;\n if (media === \"largeDesktop\") {\n varName = `--rmd-box-large-desktop-${suffix}`;\n } else if (media) {\n varName = `--rmd-box-${media}-${suffix}`;\n }\n\n return {\n ...style,\n [varName]: value,\n };\n}\n\n/\n @since 6.0.0\n * @internal\n /\nconst BREAKPOINTS = [\"phone\", \"tablet\", \"desktop\", \"largeDesktop\"] as const;\n\n/\n @since 6.0.0\n * @internal\n /\nfunction applyBoxVarGroup(\n options: Pick<ApplyOptions, \"value\" \| \"style\" \| \"type\">\n): CSSProperties \| undefined {\n const { style: propStyle, value, type } = options;\n let style = applyBoxVar({\n type,\n style: propStyle,\n media: \"\",\n value,\n });\n if (value && typeof value === \"object\") {\n BREAKPOINTS.forEach((media) => {\n style = applyBoxVar({\n type,\n style,\n media,\n value: value[media],\n });\n });\n }\n return style;\n}\n\n/\n @since 6.0.0\n /\nexport interface BoxStyles {\n style?: CSSProperties;\n className: string;\n}\n\n/\n @since 6.0.0\n /\nexport interface BoxStylesOptions extends BoxOptions {\n style?: CSSProperties;\n}\n\n/\n @see {@link box}\n * @since 6.0.0\n */\nexport function boxStyles(options: BoxStylesOptions): BoxStyles {\n const { style: propStyle, gridColumns, gridItemSize } = options;\n let style = applyBoxVarGroup({\n type: \"columns\",\n style: propStyle,\n value: gridColumns,\n });\n style = applyBoxVarGroup({\n type: \"size\",\n style,\n value: gridItemSize,\n });\n\n return {\n style,\n className: box(options),\n };\n}\n"],"names":["cnb","bem","styles","box","options","className","align","grid","gridName","gridColumns","gridItemSize","gridAutoRows","justify","stacked","reversed","fullWidth","disableGap","disableWrap","disablePadding","phoneColumns","phoneItemSize","tabletColumns","tabletItemSize","desktopColumns","desktopItemSize","largeDesktopColumns","largeDesktopItemSize","phone","tablet","desktop","largeDesktop","isItemSizeEnabled","value","isColumnsEnabled","gap","wrap","padded","column","reverse","applyBoxVar","type","media","style","expectedType","suffix","varName","BREAKPOINTS","applyBoxVarGroup","propStyle","forEach","boxStyles"],"mappings":"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"}

package/dist/button/AsyncButton.d.ts CHANGED Viewed

@@ -86,12 +86,12 @@ export interface AsyncButtonProps extends ButtonProps {
      * Any additional props to pass to the `CircularProgress` bar when the
      * {@link loadingType} is one of the circular types.
      */
-    linearProgressProps?: PropsWithRef<LinearProgressProps, HTMLDivElement>;
+    linearProgressProps?: PropsWithRef<LinearProgressProps>;
     /**
      * Any additional props to pass to the `LinearProgress` bar when the
      * {@link loadingType} is one of the linear types.
      */
-    circularProgressProps?: PropsWithRef<CircularProgressProps, HTMLSpanElement>;
+    circularProgressProps?: PropsWithRef<CircularProgressProps>;
 }
 /**
  * **Client Component**