npm - @react-md/core - Versions diffs - 6.0.2 → 6.2.0 - Mend

@react-md/core 6.0.2 → 6.2.0

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 (230) hide show

package/dist/RootHtml.d.ts +1 -1
package/dist/RootHtml.js.map +1 -1
package/dist/_base.scss +6 -2
package/dist/_border-radius.scss +92 -0
package/dist/_core.scss +2 -0
package/dist/_spacing.scss +86 -0
package/dist/app-bar/_app-bar.scss +9 -7
package/dist/app-bar/styles.js +1 -1
package/dist/app-bar/styles.js.map +1 -1
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/_avatar.scss +3 -3
package/dist/avatar/styles.d.ts +29 -1
package/dist/avatar/styles.js.map +1 -1
package/dist/badge/_badge.scss +10 -2
package/dist/box/_box.scss +78 -11
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/button/_button.scss +21 -11
package/dist/card/CardHeader.d.ts +1 -1
package/dist/card/CardHeader.js.map +1 -1
package/dist/card/_card.scss +9 -7
package/dist/chip/Chip.d.ts +1 -1
package/dist/chip/Chip.js.map +1 -1
package/dist/chip/_chip.scss +9 -7
package/dist/dialog/Dialog.d.ts +1 -1
package/dist/dialog/Dialog.js.map +1 -1
package/dist/dialog/_dialog.scss +7 -6
package/dist/divider/_divider.scss +3 -2
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/expansion-panel/_expansion-panel.scss +4 -3
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 +1 -1
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/_form-message.scss +4 -3
package/dist/form/_input-toggle.scss +2 -1
package/dist/form/_label.scss +3 -2
package/dist/form/_password.scss +2 -1
package/dist/form/_select.scss +4 -4
package/dist/form/_slider.scss +4 -3
package/dist/form/_switch.scss +2 -1
package/dist/form/_text-area.scss +3 -2
package/dist/form/_text-field.scss +20 -16
package/dist/form/types.d.ts +5 -5
package/dist/form/types.js.map +1 -1
package/dist/form/utils.js +1 -0
package/dist/form/utils.js.map +1 -1
package/dist/icon/_icon.scss +2 -1
package/dist/interaction/useElementInteraction.js +1 -1
package/dist/interaction/useElementInteraction.js.map +1 -1
package/dist/layout/LayoutAppBar.d.ts +1 -1
package/dist/layout/LayoutAppBar.js.map +1 -1
package/dist/layout/LayoutNav.js +1 -1
package/dist/layout/LayoutNav.js.map +1 -1
package/dist/layout/useMainTabIndex.js +1 -0
package/dist/layout/useMainTabIndex.js.map +1 -1
package/dist/link/_link.scss +3 -2
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/_list.scss +7 -6
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/menu/_menu.scss +2 -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/navigation/_navigation.scss +5 -3
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/responsive-item/_responsive-item.scss +2 -1
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/segmented-button/_segmented-button.scss +20 -13
package/dist/sheet/_sheet.scss +2 -1
package/dist/snackbar/Toast.d.ts +1 -1
package/dist/snackbar/Toast.js.map +1 -1
package/dist/snackbar/_snackbar.scss +12 -10
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/table/_table.scss +5 -4
package/dist/tabs/TabListScrollButton.d.ts +1 -1
package/dist/tabs/TabListScrollButton.js.map +1 -1
package/dist/tabs/_tabs.scss +7 -4
package/dist/theme/utils.js +2 -2
package/dist/theme/utils.js.map +1 -1
package/dist/tooltip/_tooltip.scss +52 -25
package/dist/transition/_transition.scss +2 -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/utils/bem.js +1 -1
package/dist/utils/bem.js.map +1 -1
package/dist/utils/parseCssLengthUnit.js +3 -0
package/dist/utils/parseCssLengthUnit.js.map +1 -1
package/package.json +13 -13
package/src/RootHtml.tsx +1 -1
package/src/app-bar/styles.ts +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 +3 -6
package/src/form/TextField.tsx +1 -1
package/src/form/types.ts +5 -15
package/src/form/utils.ts +1 -0
package/src/interaction/useElementInteraction.tsx +1 -1
package/src/layout/LayoutAppBar.tsx +1 -1
package/src/layout/LayoutNav.tsx +1 -1
package/src/layout/useMainTabIndex.ts +1 -0
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/theme/utils.ts +2 -1
package/src/tree/TreeItem.tsx +2 -2
package/src/types.ts +44 -2
package/src/utils/alphaNumericSort.ts +17 -11
package/src/utils/bem.ts +1 -1
package/src/utils/parseCssLengthUnit.ts +4 -0

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

@@ -28,6 +28,8 @@
 @use "chip/chip";
 @use "table/table";
 @use "theme/theme";
+@use "border-radius";
+@use "spacing";
 @use "dialog/dialog";
 @use "sheet/sheet";
 @use "transition/transition";
@@ -385,6 +387,10 @@ $_layer-order: (
 ///   }
 ///
 @mixin variables {
+  @include theme.theme-variables;
+  @include border-radius.variables;
+  @include spacing.variables;
+  @include typography.typography-variables;
   @include app-bar.variables;
   @include autocomplete.variables;
   @include avatar.variables;
@@ -416,11 +422,9 @@ $_layer-order: (
   @include tabs.variables;
   @include text-field.variables;
   @include text-area.variables;
-  @include theme.theme-variables;
   @include tooltip.variables;
   @include transition.transition-variables;
   @include tree.variables;
-  @include typography.typography-variables;
   @include window-splitter.variables;
 }

package/dist/_border-radius.scss ADDED Viewed

@@ -0,0 +1,92 @@
+////
+/// @group core.border-radius
+////
+@use "utils";
+/// Set to `true` to disable the border radius variables. You probably don't
+/// want to do this.
+/// @type Boolean
+$disable-everything: false !default;
+/// No Border Radius.
+///
+/// @type Number
+$none: 0 !default;
+/// Extra Small Border Radius.
+///
+/// @type Number
+$xs: 0.25rem !default;
+/// Small Border Radius.
+///
+/// @type Number
+$sm: 0.5rem !default;
+/// Medium Border Radius.
+///
+/// @type Number
+$md: 0.75rem !default;
+/// Large Border Radius.
+///
+/// @type Number
+$lg: 1rem !default;
+/// Extra Large Border Radius.
+///
+/// @type Number
+$xl: 1.75rem !default;
+/// Full Border Radius.
+///
+/// @type Number
+$full: 50% !default;
+/// The available configurable css variables and mostly used internally for the
+/// `get-var`, `set-var`, and `use-var` utils.
+/// @type List
+$variables: (none, xs, sm, md, lg, xl, full);
+/// @param {String} name - The supported variable name
+/// @param {any} fallback [null] - An optional fallback value
+/// @returns {String} a `var()` statement
+@function get-var($name, $fallback: null) {
+  $var: utils.get-var-name($variables, $name, "border-radius");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
+  }
+  @return var(#{$var});
+}
+/// @param {String} name - The supported variable name
+/// @param {any} value - The value to set the variable to. Supports `null` which
+/// will just be a no-op.
+@mixin set-var($name, $value) {
+  @if $value {
+    #{utils.get-var-name($variables, $name, "border-radius")}: #{$value};
+  }
+}
+/// @param {String} property - The css property to apply the variable to
+/// @param {String} name [$property] - The supported variable name
+/// @param {any} fallback [null] - An optional fallback value if the variable
+/// has not been set
+@mixin use-var($property, $name: $property, $fallback: null) {
+  #{$property}: get-var($name, $fallback);
+}
+/// Conditionally applies the css variables based on feature flags
+@mixin variables {
+  @if not $disable-everything {
+    @include set-var(none, $none);
+    @include set-var(xs, $xs);
+    @include set-var(sm, $sm);
+    @include set-var(md, $md);
+    @include set-var(lg, $lg);
+    @include set-var(xl, $xl);
+    @include set-var(full, $full);
+  }
+}

package/dist/_core.scss CHANGED Viewed

@@ -8,6 +8,8 @@
 @forward "theme/a11y";
 @forward "theme/colors";
 @forward "theme/theme";
+@forward "border-radius" as border-radius-*;
+@forward "spacing" as spacing-*;
 @forward "typography/typography";
 @forward "transition/transition";
 @forward "box-shadows";

package/dist/_spacing.scss ADDED Viewed

@@ -0,0 +1,86 @@
+////
+/// @group core.spacing
+////
+@use "utils";
+/// Set to `true` to disable all the spacing variables. You probably don't want
+/// to do this.
+/// @type Boolean
+$disable-everything: false !default;
+/// No spacing. Generally applied as `gap`, `padding`, or `margin`.
+///
+/// @type Number
+$none: 0 !default;
+/// Extra Small Spacing. Generally applied as `gap`, `padding`, or `margin`.
+///
+/// @type Number
+$xs: 0.25rem !default;
+/// Small Spacing. Generally applied as `gap`, `padding`, or `margin`.
+///
+/// @type Number
+$sm: 0.5rem !default;
+/// Medium Spacing. Generally applied as `gap`, `padding`, or `margin`.
+///
+/// @type Number
+$md: 1rem !default;
+/// Large Spacing. Generally applied as `gap`, `padding`, or `margin`.
+///
+/// @type Number
+$lg: 1.5rem !default;
+/// Extra Large Spacing. Generally applied as `gap`, `padding`, or `margin`.
+///
+/// @type Number
+$xl: 2rem !default;
+/// The available configurable css variables and mostly used internally for the
+/// `get-var`, `set-var`, and `use-var` utils.
+/// @type List
+$variables: (none, xs, sm, md, lg, xl);
+/// @param {String} name - The supported variable name
+/// @param {any} fallback [null] - An optional fallback value
+/// @returns {String} a `var()` statement
+@function get-var($name, $fallback: null) {
+  $var: utils.get-var-name($variables, $name, "spacing");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
+  }
+  @return var(#{$var});
+}
+/// @param {String} name - The supported variable name
+/// @param {any} value - The value to set the variable to. Supports `null` which
+/// will just be a no-op.
+@mixin set-var($name, $value) {
+  @if $value {
+    #{utils.get-var-name($variables, $name, "spacing")}: #{$value};
+  }
+}
+/// @param {String} property - The css property to apply the variable to
+/// @param {String} name [$property] - The supported variable name
+/// @param {any} fallback [null] - An optional fallback value if the variable
+/// has not been set
+@mixin use-var($property, $name: $property, $fallback: null) {
+  #{$property}: get-var($name, $fallback);
+}
+/// Conditionally applies the css variables based on feature flags
+@mixin variables {
+  @if not $disable-everything {
+    @include set-var(none, $none);
+    @include set-var(xs, $xs);
+    @include set-var(sm, $sm);
+    @include set-var(md, $md);
+    @include set-var(lg, $lg);
+    @include set-var(xl, $xl);
+  }
+}

package/dist/app-bar/_app-bar.scss CHANGED Viewed

@@ -5,6 +5,7 @@
 @use "sass:map";
 @use "../utils";
+@use "../spacing";
 @use "../box/box";
 @use "../box-shadows";
 @use "../interaction/interaction";
@@ -60,7 +61,7 @@ $disable-title: false !default;
 /// Sets the `gap` css property to apply spacing between each item.
 /// @type Number
-$gap: 0.25rem !default;
+$gap: spacing.get-var(xs) !default;
 /// The default height for an app bar.
 /// @type Number
@@ -142,11 +143,11 @@ $surface-color: theme.get-default-color(
 /// Horizontal padding for the app bar
 /// @type String|Number
-$horizontal-padding: 0.25rem !default;
+$horizontal-padding: spacing.get-var(xs) !default;
 /// Vertical padding for the app bar
 /// @type String|Number
-$vertical-padding: 0 !default;
+$vertical-padding: spacing.get-var(none) !default;
 /// This value is used to align the first element (normally a button) nicely with
 /// other elements on the page.
@@ -166,7 +167,7 @@ $title-keyline: 4.5rem !default;
 /// based on font-size now and `em`
 ///
 /// @type String|Number
-$nav-keyline: $title-keyline - $horizontal-padding - $gap - 3rem !default;
+$nav-keyline: calc($title-keyline - $horizontal-padding - $gap - 3rem) !default;
 /// The available configurable css variables and mostly used internally for the
 /// `get-var`, `set-var`, and `use-var` utils.
@@ -253,7 +254,8 @@ $variables: (height, surface-background-color, surface-color);
       .rmd-app-bar {
         @include box.set-var(gap, $gap);
-        @include box.set-var(padding, $vertical-padding $horizontal-padding);
+        @include box.set-var(padding-v, $vertical-padding);
+        @include box.set-var(padding-h, $horizontal-padding);
         @include use-var(height);
         // since app bars can appear a lot in full page dialogs, setting these flex
@@ -348,8 +350,8 @@ $variables: (height, surface-background-color, surface-color);
       @if not $disable-title {
         .rmd-app-bar-title {
-          $title-h-margin: $keyline - $horizontal-padding;
-          $title-keyline-h-margin: $title-keyline - $horizontal-padding;
+          $title-h-margin: calc($keyline - $horizontal-padding);
+          $title-keyline-h-margin: calc($title-keyline - $horizontal-padding);
           flex: 1 1 auto;
           margin: 0 auto 0 $title-h-margin;

package/dist/app-bar/styles.js CHANGED Viewed

@@ -47,7 +47,7 @@ const titleStyles = bem("rmd-app-bar-title");
  */ export function appBarTitle(options = {}) {
     const { className, keyline = "small" } = options;
     return cnb(titleStyles({
-        keyline: keyline == "list",
+        keyline: keyline === "list",
         "nav-keyline": keyline === "nav"
     }), className);
 }

package/dist/app-bar/styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/app-bar/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { type BoxOptions, box } from \"../box/styles.js\";\nimport { type BackgroundColor, cssUtils } from \"../cssUtils.js\";\nimport { type CssPosition } from \"../types.js\";\nimport { bem } from \"../utils/bem.js\";\n\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-app-bar-height\"?: string \| number;\n \"--rmd-app-bar-background-color\"?: string;\n \"--rmd-app-bar-color\"?: string;\n \"--rmd-app-bar-surface-background-color\"?: string;\n \"--rmd-app-bar-surface-color\"?: string;\n }\n}\n\nconst styles = bem(\"rmd-app-bar\");\nconst titleStyles = bem(\"rmd-app-bar-title\");\n\nexport type AppBarPosition = \"top\" \| \"bottom\";\n\n/*\n - `\"clear\"` - the background color will be transparent\n * - `\"primary\"` - defaults to the current primary theme color\n * - `\"secondary\"` - defaults to the current secondary theme color\n * - `\"surface\"` - this will use the current surface background color which\n * defaults to `#fff` for light themes, `#242424` for dark themes, and\n * `#424242` for dark themes when the `$disable-dark-elevation` is set to\n * `true`\n \n The default dark theme surface color also depends on the `$fixed-elevation`\n * value.\n /\nexport type AppBarTheme = BackgroundColor \| \"clear\";\n\n/\n - `\"auto\"` - the height will be determined by the height of the content\n * - `\"normal\"` - defaults to `3.5rem` (`$height`)\n * - `\"prominent\"` - defaults to `7rem` (`$prominent-height`)\n * - `\"dense\"` - defaults to `3rem` (`$dense-height`)\n * - `\"prominent-dense\"` - defaults to `6rem` (`$prominent-dense-height`)\n /\nexport type AppBarHeight =\n \| \"auto\"\n \| \"normal\"\n \| \"prominent\"\n \| \"dense\"\n \| \"prominent-dense\";\n\n/* @since 6.0.0 /\nexport interface AppBarClassNameOptions extends Omit<BoxOptions, \"fullWidth\"> {\n className?: string;\n\n /\n Set this to `\"fixed\"` or `\"sticky\"` to set `position: fixed;` or\n * `position: sticky;` to the app bar. The default position will be static and\n * inline with other content.\n \n @defaultValue `'static'`\n /\n position?: CssPosition;\n\n /\n The position within the page to \"fix\" the `AppBar` when the `fixed` prop is\n * enabled.\n \n @defaultValue `\"top\"`\n /\n pagePosition?: AppBarPosition;\n\n /\n Set this to `true` to remove the box-shadow.\n \n @defaultValue `false`\n /\n disableElevation?: boolean;\n\n /\n The theme to apply to the `AppBar`.\n \n @defaultValue `\"primary\"`\n * @see {@link AppBarTheme}\n /\n theme?: AppBarTheme;\n\n /\n @defaultValue `stacked ? \"auto\" : \"normal\"`\n * @see {@link AppBarHeight}\n /\n height?: AppBarHeight;\n\n /* @see {@link CssUtilsOptions.surfaceColor} /\n surfaceColor?: \"light\" \| \"dark\";\n\n /\n Set this to `true` if the app bar's positioning and width should be\n * changed whenever the scrollbar is visible on the page. This defaults to\n * `true` when the {@link position} prop is `true` so that once dialogs and menus\n * become visible the contents in the app bar do not need to be repainted.\n \n @since 6.0.0\n * @defaultValue `position === \"fixed\"`\n /\n scrollbarOffset?: boolean;\n}\n\n/\n Apply the `className`s for a tree component. This will be type-safe if using\n * typescript.\n \n @since 6.0.0\n /\nexport function appBar(options: AppBarClassNameOptions = {}): string {\n const {\n className,\n theme = \"primary\",\n stacked,\n height = stacked ? \"auto\" : \"normal\",\n position = \"static\",\n pagePosition = \"top\",\n scrollbarOffset = position === \"fixed\",\n align,\n grid,\n gridColumns,\n gridName,\n justify,\n reversed,\n surfaceColor,\n disableWrap = true,\n disablePadding,\n disableElevation,\n } = options;\n const surface = theme === \"surface\";\n const clear = theme === \"clear\";\n\n return cnb(\n styles({\n surface,\n [height]: height !== \"normal\",\n fixed: position !== \"static\",\n stacked,\n sticky: position === \"sticky\",\n [pagePosition]: position !== \"static\",\n elevated: position !== \"static\" && !disableElevation,\n \"scrollbar-offset\": scrollbarOffset,\n \"static-scrollbar-offset\": position === \"static\" && scrollbarOffset,\n }),\n box({\n align,\n stacked,\n fullWidth: true,\n grid,\n gridColumns,\n gridName,\n justify,\n reversed,\n disableWrap,\n disablePadding,\n }),\n cssUtils({\n backgroundColor: !surface && !clear ? theme : undefined,\n surfaceColor,\n }),\n className\n );\n}\n\n/\n - `\"small\"` - the first character in the title will be `1rem` (`$keyline`)\n * from the edge of the app bar horizontally\n * - `\"nav\"` - this should be set when there is a nav button before the title so\n * that the first character in the title will be `4.5rem` (`title-keyline`)\n * - `\"list\"` - this should be used when the title should align with the list\n * item keyline and there is no nav icon before.\n \n @since 6.0.0\n /\nexport type AppBarTitleKeyline = \"small\" \| \"nav\" \| \"list\";\n\n/* @since 6.0.0 /\nexport interface AppBarTitleClassNameOptions {\n className?: string;\n\n /\n @defaultValue `\"small\"`\n * @see {@link AppBarTitleKeyline}\n /\n keyline?: AppBarTitleKeyline;\n}\n\n/\n Apply the `className`s for a `AppBarTitle` component. This will be type-safe\n * if using typescript.\n \n @since 6.0.0\n */\nexport function appBarTitle(options: AppBarTitleClassNameOptions = {}): string {\n const { className, keyline = \"small\" } = options;\n return cnb(\n titleStyles({\n keyline: keyline == \"list\",\n \"nav-keyline\": keyline === \"nav\",\n }),\n className\n );\n}\n"],"names":["cnb","box","cssUtils","bem","styles","titleStyles","appBar","options","className","theme","stacked","height","position","pagePosition","scrollbarOffset","align","grid","gridColumns","gridName","justify","reversed","surfaceColor","disableWrap","disablePadding","disableElevation","surface","clear","fixed","sticky","elevated","fullWidth","backgroundColor","undefined","appBarTitle","keyline"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAA0BC,GAAG,QAAQ,mBAAmB;AACxD,SAA+BC,QAAQ,QAAQ,iBAAiB;AAEhE,SAASC,GAAG,QAAQ,kBAAkB;AAYtC,MAAMC,SAASD,IAAI;AACnB,MAAME,cAAcF,IAAI;AAyFxB;;;;;CAKC,GACD,OAAO,SAASG,OAAOC,UAAkC,CAAC,CAAC;IACzD,MAAM,EACJC,SAAS,EACTC,QAAQ,SAAS,EACjBC,OAAO,EACPC,SAASD,UAAU,SAAS,QAAQ,EACpCE,WAAW,QAAQ,EACnBC,eAAe,KAAK,EACpBC,kBAAkBF,aAAa,OAAO,EACtCG,KAAK,EACLC,IAAI,EACJC,WAAW,EACXC,QAAQ,EACRC,OAAO,EACPC,QAAQ,EACRC,YAAY,EACZC,cAAc,IAAI,EAClBC,cAAc,EACdC,gBAAgB,EACjB,GAAGjB;IACJ,MAAMkB,UAAUhB,UAAU;IAC1B,MAAMiB,QAAQjB,UAAU;IAExB,OAAOT,IACLI,OAAO;QACLqB;QACA,CAACd,OAAO,EAAEA,WAAW;QACrBgB,OAAOf,aAAa;QACpBF;QACAkB,QAAQhB,aAAa;QACrB,CAACC,aAAa,EAAED,aAAa;QAC7BiB,UAAUjB,aAAa,YAAY,CAACY;QACpC,oBAAoBV;QACpB,2BAA2BF,aAAa,YAAYE;IACtD,IACAb,IAAI;QACFc;QACAL;QACAoB,WAAW;QACXd;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;IACF,IACArB,SAAS;QACP6B,iBAAiB,CAACN,WAAW,CAACC,QAAQjB,QAAQuB;QAC9CX;IACF,IACAb;AAEJ;AAyBA;;;;;CAKC,GACD,OAAO,SAASyB,YAAY1B,UAAuC,CAAC,CAAC;IACnE,MAAM,EAAEC,SAAS,EAAE0B,UAAU,OAAO,EAAE,GAAG3B;IACzC,OAAOP,IACLK,YAAY;QACV6B,SAASA,~~WAAW~~;~~QACpB~~,eAAeA,YAAY;IAC7B,IACA1B;AAEJ"}
1	+ {"version":3,"sources":["../../src/app-bar/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { type BoxOptions, box } from \"../box/styles.js\";\nimport { type BackgroundColor, cssUtils } from \"../cssUtils.js\";\nimport { type CssPosition } from \"../types.js\";\nimport { bem } from \"../utils/bem.js\";\n\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-app-bar-height\"?: string \| number;\n \"--rmd-app-bar-background-color\"?: string;\n \"--rmd-app-bar-color\"?: string;\n \"--rmd-app-bar-surface-background-color\"?: string;\n \"--rmd-app-bar-surface-color\"?: string;\n }\n}\n\nconst styles = bem(\"rmd-app-bar\");\nconst titleStyles = bem(\"rmd-app-bar-title\");\n\nexport type AppBarPosition = \"top\" \| \"bottom\";\n\n/*\n - `\"clear\"` - the background color will be transparent\n * - `\"primary\"` - defaults to the current primary theme color\n * - `\"secondary\"` - defaults to the current secondary theme color\n * - `\"surface\"` - this will use the current surface background color which\n * defaults to `#fff` for light themes, `#242424` for dark themes, and\n * `#424242` for dark themes when the `$disable-dark-elevation` is set to\n * `true`\n \n The default dark theme surface color also depends on the `$fixed-elevation`\n * value.\n /\nexport type AppBarTheme = BackgroundColor \| \"clear\";\n\n/\n - `\"auto\"` - the height will be determined by the height of the content\n * - `\"normal\"` - defaults to `3.5rem` (`$height`)\n * - `\"prominent\"` - defaults to `7rem` (`$prominent-height`)\n * - `\"dense\"` - defaults to `3rem` (`$dense-height`)\n * - `\"prominent-dense\"` - defaults to `6rem` (`$prominent-dense-height`)\n /\nexport type AppBarHeight =\n \| \"auto\"\n \| \"normal\"\n \| \"prominent\"\n \| \"dense\"\n \| \"prominent-dense\";\n\n/* @since 6.0.0 /\nexport interface AppBarClassNameOptions extends Omit<BoxOptions, \"fullWidth\"> {\n className?: string;\n\n /\n Set this to `\"fixed\"` or `\"sticky\"` to set `position: fixed;` or\n * `position: sticky;` to the app bar. The default position will be static and\n * inline with other content.\n \n @defaultValue `'static'`\n /\n position?: CssPosition;\n\n /\n The position within the page to \"fix\" the `AppBar` when the `fixed` prop is\n * enabled.\n \n @defaultValue `\"top\"`\n /\n pagePosition?: AppBarPosition;\n\n /\n Set this to `true` to remove the box-shadow.\n \n @defaultValue `false`\n /\n disableElevation?: boolean;\n\n /\n The theme to apply to the `AppBar`.\n \n @defaultValue `\"primary\"`\n * @see {@link AppBarTheme}\n /\n theme?: AppBarTheme;\n\n /\n @defaultValue `stacked ? \"auto\" : \"normal\"`\n * @see {@link AppBarHeight}\n /\n height?: AppBarHeight;\n\n /* @see {@link CssUtilsOptions.surfaceColor} /\n surfaceColor?: \"light\" \| \"dark\";\n\n /\n Set this to `true` if the app bar's positioning and width should be\n * changed whenever the scrollbar is visible on the page. This defaults to\n * `true` when the {@link position} prop is `true` so that once dialogs and menus\n * become visible the contents in the app bar do not need to be repainted.\n \n @since 6.0.0\n * @defaultValue `position === \"fixed\"`\n /\n scrollbarOffset?: boolean;\n}\n\n/\n Apply the `className`s for a tree component. This will be type-safe if using\n * typescript.\n \n @since 6.0.0\n /\nexport function appBar(options: AppBarClassNameOptions = {}): string {\n const {\n className,\n theme = \"primary\",\n stacked,\n height = stacked ? \"auto\" : \"normal\",\n position = \"static\",\n pagePosition = \"top\",\n scrollbarOffset = position === \"fixed\",\n align,\n grid,\n gridColumns,\n gridName,\n justify,\n reversed,\n surfaceColor,\n disableWrap = true,\n disablePadding,\n disableElevation,\n } = options;\n const surface = theme === \"surface\";\n const clear = theme === \"clear\";\n\n return cnb(\n styles({\n surface,\n [height]: height !== \"normal\",\n fixed: position !== \"static\",\n stacked,\n sticky: position === \"sticky\",\n [pagePosition]: position !== \"static\",\n elevated: position !== \"static\" && !disableElevation,\n \"scrollbar-offset\": scrollbarOffset,\n \"static-scrollbar-offset\": position === \"static\" && scrollbarOffset,\n }),\n box({\n align,\n stacked,\n fullWidth: true,\n grid,\n gridColumns,\n gridName,\n justify,\n reversed,\n disableWrap,\n disablePadding,\n }),\n cssUtils({\n backgroundColor: !surface && !clear ? theme : undefined,\n surfaceColor,\n }),\n className\n );\n}\n\n/\n - `\"small\"` - the first character in the title will be `1rem` (`$keyline`)\n * from the edge of the app bar horizontally\n * - `\"nav\"` - this should be set when there is a nav button before the title so\n * that the first character in the title will be `4.5rem` (`title-keyline`)\n * - `\"list\"` - this should be used when the title should align with the list\n * item keyline and there is no nav icon before.\n \n @since 6.0.0\n /\nexport type AppBarTitleKeyline = \"small\" \| \"nav\" \| \"list\";\n\n/* @since 6.0.0 /\nexport interface AppBarTitleClassNameOptions {\n className?: string;\n\n /\n @defaultValue `\"small\"`\n * @see {@link AppBarTitleKeyline}\n /\n keyline?: AppBarTitleKeyline;\n}\n\n/\n Apply the `className`s for a `AppBarTitle` component. This will be type-safe\n * if using typescript.\n \n @since 6.0.0\n */\nexport function appBarTitle(options: AppBarTitleClassNameOptions = {}): string {\n const { className, keyline = \"small\" } = options;\n return cnb(\n titleStyles({\n keyline: keyline === \"list\",\n \"nav-keyline\": keyline === \"nav\",\n }),\n className\n );\n}\n"],"names":["cnb","box","cssUtils","bem","styles","titleStyles","appBar","options","className","theme","stacked","height","position","pagePosition","scrollbarOffset","align","grid","gridColumns","gridName","justify","reversed","surfaceColor","disableWrap","disablePadding","disableElevation","surface","clear","fixed","sticky","elevated","fullWidth","backgroundColor","undefined","appBarTitle","keyline"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAA0BC,GAAG,QAAQ,mBAAmB;AACxD,SAA+BC,QAAQ,QAAQ,iBAAiB;AAEhE,SAASC,GAAG,QAAQ,kBAAkB;AAYtC,MAAMC,SAASD,IAAI;AACnB,MAAME,cAAcF,IAAI;AAyFxB;;;;;CAKC,GACD,OAAO,SAASG,OAAOC,UAAkC,CAAC,CAAC;IACzD,MAAM,EACJC,SAAS,EACTC,QAAQ,SAAS,EACjBC,OAAO,EACPC,SAASD,UAAU,SAAS,QAAQ,EACpCE,WAAW,QAAQ,EACnBC,eAAe,KAAK,EACpBC,kBAAkBF,aAAa,OAAO,EACtCG,KAAK,EACLC,IAAI,EACJC,WAAW,EACXC,QAAQ,EACRC,OAAO,EACPC,QAAQ,EACRC,YAAY,EACZC,cAAc,IAAI,EAClBC,cAAc,EACdC,gBAAgB,EACjB,GAAGjB;IACJ,MAAMkB,UAAUhB,UAAU;IAC1B,MAAMiB,QAAQjB,UAAU;IAExB,OAAOT,IACLI,OAAO;QACLqB;QACA,CAACd,OAAO,EAAEA,WAAW;QACrBgB,OAAOf,aAAa;QACpBF;QACAkB,QAAQhB,aAAa;QACrB,CAACC,aAAa,EAAED,aAAa;QAC7BiB,UAAUjB,aAAa,YAAY,CAACY;QACpC,oBAAoBV;QACpB,2BAA2BF,aAAa,YAAYE;IACtD,IACAb,IAAI;QACFc;QACAL;QACAoB,WAAW;QACXd;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;IACF,IACArB,SAAS;QACP6B,iBAAiB,CAACN,WAAW,CAACC,QAAQjB,QAAQuB;QAC9CX;IACF,IACAb;AAEJ;AAyBA;;;;;CAKC,GACD,OAAO,SAASyB,YAAY1B,UAAuC,CAAC,CAAC;IACnE,MAAM,EAAEC,SAAS,EAAE0B,UAAU,OAAO,EAAE,GAAG3B;IACzC,OAAOP,IACLK,YAAY;QACV6B,SAASA,YAAY;QACrB,eAAeA,YAAY;IAC7B,IACA1B;AAEJ"}

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", {