@react-md/core 1.0.0-next.15 → 1.0.0-next.17

package/dist/autocomplete/AutocompleteDropdownButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/autocomplete/AutocompleteDropdownButton.tsx"],"sourcesContent":["\"use client\";\nimport {\n  type MouseEventHandler,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport { Button, type ButtonProps } from \"../button/Button.js\";\nimport { IconRotator, type IconRotatorProps } from \"../icon/IconRotator.js\";\nimport { getIcon } from \"../icon/iconConfig.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface ConfigurableAutocompleteDropdownButtonProps\n  extends ButtonProps {\n  /** @defaultValue `AutocompleteProps.menuLabel` */\n  \"aria-label\"?: string;\n  /** @defaultValue `AutocompleteProps.menuLabelledby` */\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 * This is a simple `Button` wrapper to be used as a dropdown button within the\n * `Autocomplete`.\n *\n * @since 6.0.0\n */\nexport function AutocompleteDropdownButton(\n  props: AutocompleteDropdownButtonProps\n): ReactElement {\n  const { id: propId, icon, visible, iconRotatorProps, ...remaining } = props;\n\n  const id = useEnsuredId(propId, \"autocomplete-dropdown\");\n\n  return (\n    <Button\n      {...remaining}\n      id={id}\n      aria-expanded={visible}\n      tabIndex={-1}\n      buttonType=\"icon\"\n    >\n      <IconRotator {...iconRotatorProps} rotated={visible}>\n        {getIcon(\"dropdown\", icon)}\n      </IconRotator>\n    </Button>\n  );\n}\n"],"names":["Button","IconRotator","getIcon","useEnsuredId","AutocompleteDropdownButton","props","id","propId","icon","visible","iconRotatorProps","remaining","aria-expanded","tabIndex","buttonType","rotated"],"mappings":"AAAA;;AAMA,SAASA,MAAM,QAA0B,sBAAsB;AAC/D,SAASC,WAAW,QAA+B,yBAAyB;AAC5E,SAASC,OAAO,QAAQ,wBAAwB;AAChD,SAASC,YAAY,QAAQ,qBAAqB;AA8BlD;;;;;CAKC,GACD,OAAO,SAASC,2BACdC,KAAsC;IAEtC,MAAM,EAAEC,IAAIC,MAAM,EAAEC,IAAI,EAAEC,OAAO,EAAEC,gBAAgB,EAAE,GAAGC,WAAW,GAAGN;IAEtE,MAAMC,KAAKH,aAAaI,QAAQ;IAEhC,qBACE,KAACP;QACE,GAAGW,SAAS;QACbL,IAAIA;QACJM,iBAAeH;QACfI,UAAU,CAAC;QACXC,YAAW;kBAEX,cAAA,KAACb;YAAa,GAAGS,gBAAgB;YAAEK,SAASN;sBACzCP,QAAQ,YAAYM;;;AAI7B"}
+{"version":3,"sources":["../../src/autocomplete/AutocompleteDropdownButton.tsx"],"sourcesContent":["\"use client\";\nimport { type ReactElement } from \"react\";\nimport { Button } from \"../button/Button.js\";\nimport { IconRotator } from \"../icon/IconRotator.js\";\nimport { getIcon } from \"../icon/iconConfig.js\";\nimport { type LabelRequiredForA11y } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { autocompleteDropdownButton } from \"./autocompleteStyles.js\";\nimport { type AutocompleteDropdownButtonProps } from \"./types.js\";\n\n/**\n * This is a simple `Button` wrapper to be used as a dropdown button within the\n * `Autocomplete`.\n *\n * @since 6.0.0\n */\nexport function AutocompleteDropdownButton(\n  props: LabelRequiredForA11y<AutocompleteDropdownButtonProps>\n): ReactElement {\n  const {\n    id: propId,\n    icon,\n    visible,\n    iconRotatorProps,\n    className,\n    ...remaining\n  } = props;\n\n  const id = useEnsuredId(propId, \"autocomplete-dropdown\");\n\n  return (\n    <Button\n      {...remaining}\n      id={id}\n      aria-expanded={visible}\n      tabIndex={-1}\n      buttonType=\"icon\"\n      className={autocompleteDropdownButton({ className })}\n    >\n      <IconRotator {...iconRotatorProps} rotated={visible}>\n        {getIcon(\"dropdown\", icon)}\n      </IconRotator>\n    </Button>\n  );\n}\n"],"names":["Button","IconRotator","getIcon","useEnsuredId","autocompleteDropdownButton","AutocompleteDropdownButton","props","id","propId","icon","visible","iconRotatorProps","className","remaining","aria-expanded","tabIndex","buttonType","rotated"],"mappings":"AAAA;;AAEA,SAASA,MAAM,QAAQ,sBAAsB;AAC7C,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,OAAO,QAAQ,wBAAwB;AAEhD,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,0BAA0B,QAAQ,0BAA0B;AAGrE;;;;;CAKC,GACD,OAAO,SAASC,2BACdC,KAA4D;IAE5D,MAAM,EACJC,IAAIC,MAAM,EACVC,IAAI,EACJC,OAAO,EACPC,gBAAgB,EAChBC,SAAS,EACT,GAAGC,WACJ,GAAGP;IAEJ,MAAMC,KAAKJ,aAAaK,QAAQ;IAEhC,qBACE,KAACR;QACE,GAAGa,SAAS;QACbN,IAAIA;QACJO,iBAAeJ;QACfK,UAAU,CAAC;QACXC,YAAW;QACXJ,WAAWR,2BAA2B;YAAEQ;QAAU;kBAElD,cAAA,KAACX;YAAa,GAAGU,gBAAgB;YAAEM,SAASP;sBACzCR,QAAQ,YAAYO;;;AAI7B"}

package/dist/autocomplete/AutocompleteListboxChildren.d.ts

@@ -0,0 +1,22 @@
+import { type ReactElement, type ReactNode } from "react";
+import { type AutocompleteGetOptionLabel, type AutocompleteGetOptionProps, type AutocompleteOption } from "./types.js";
+/**
+ * @since 6.0.0
+ * @internal
+ */
+export interface AutocompleteListboxChildrenProps<Option extends AutocompleteOption> {
+    query: string;
+    options: readonly Option[];
+    getOptionLabel: AutocompleteGetOptionLabel<Option>;
+    getOptionProps: AutocompleteGetOptionProps<Option>;
+    children: ReactNode;
+    noOptionsChildren: ReactNode;
+}
+/**
+ * NOTE: This was moved to a second component to improve performance so
+ * that the availableOptions aren't looped until the listbox is visible
+ *
+ * @since 6.0.0
+ * @internal
+ */
+export declare function AutocompleteListboxChildren<Option extends AutocompleteOption>(props: AutocompleteListboxChildrenProps<Option>): ReactElement;

package/dist/autocomplete/AutocompleteListboxChildren.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useListboxContext } from "../form/ListboxProvider.js";
+import { Option } from "../form/Option.js";
+/**
+ * NOTE: This was moved to a second component to improve performance so
+ * that the availableOptions aren't looped until the listbox is visible
+ *
+ * @since 6.0.0
+ * @internal
+ */ export function AutocompleteListboxChildren(props) {
+    const { children, query, options: availableOptions, noOptionsChildren, getOptionLabel, getOptionProps } = props;
+    const { isOptionSelected } = useListboxContext();
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            children,
+            !availableOptions.length && noOptionsChildren,
+            availableOptions.map((option, index)=>{
+                const label = getOptionLabel(option);
+                const optionProps = getOptionProps({
+                    index,
+                    query,
+                    option,
+                    selected: isOptionSelected(option),
+                    extractor: getOptionLabel
+                });
+                return /*#__PURE__*/ _jsx(Option, {
+                    value: option,
+                    ...optionProps,
+                    children: optionProps?.children ?? label
+                }, label);
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=AutocompleteListboxChildren.js.map

package/dist/autocomplete/AutocompleteListboxChildren.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/autocomplete/AutocompleteListboxChildren.tsx"],"sourcesContent":["\"use client\";\nimport { type ReactElement, type ReactNode } from \"react\";\nimport { useListboxContext } from \"../form/ListboxProvider.js\";\nimport { Option } from \"../form/Option.js\";\nimport {\n  type AutocompleteGetOptionLabel,\n  type AutocompleteGetOptionProps,\n  type AutocompleteOption,\n} from \"./types.js\";\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface AutocompleteListboxChildrenProps<\n  Option extends AutocompleteOption,\n> {\n  query: string;\n  options: readonly Option[];\n  getOptionLabel: AutocompleteGetOptionLabel<Option>;\n  getOptionProps: AutocompleteGetOptionProps<Option>;\n  children: ReactNode;\n  noOptionsChildren: ReactNode;\n}\n\n/**\n * NOTE: This was moved to a second component to improve performance so\n * that the availableOptions aren't looped until the listbox is visible\n *\n * @since 6.0.0\n * @internal\n */\nexport function AutocompleteListboxChildren<Option extends AutocompleteOption>(\n  props: AutocompleteListboxChildrenProps<Option>\n): ReactElement {\n  const {\n    children,\n    query,\n    options: availableOptions,\n    noOptionsChildren,\n    getOptionLabel,\n    getOptionProps,\n  } = props;\n  const { isOptionSelected } = useListboxContext();\n\n  return (\n    <>\n      {children}\n      {!availableOptions.length && noOptionsChildren}\n      {availableOptions.map((option, index) => {\n        const label = getOptionLabel(option);\n        const optionProps = getOptionProps({\n          index,\n          query,\n          option,\n          selected: isOptionSelected(option),\n          extractor: getOptionLabel,\n        });\n\n        return (\n          <Option key={label} value={option} {...optionProps}>\n            {optionProps?.children ?? label}\n          </Option>\n        );\n      })}\n    </>\n  );\n}\n"],"names":["useListboxContext","Option","AutocompleteListboxChildren","props","children","query","options","availableOptions","noOptionsChildren","getOptionLabel","getOptionProps","isOptionSelected","length","map","option","index","label","optionProps","selected","extractor","value"],"mappings":"AAAA;;AAEA,SAASA,iBAAiB,QAAQ,6BAA6B;AAC/D,SAASC,MAAM,QAAQ,oBAAoB;AAsB3C;;;;;;CAMC,GACD,OAAO,SAASC,4BACdC,KAA+C;IAE/C,MAAM,EACJC,QAAQ,EACRC,KAAK,EACLC,SAASC,gBAAgB,EACzBC,iBAAiB,EACjBC,cAAc,EACdC,cAAc,EACf,GAAGP;IACJ,MAAM,EAAEQ,gBAAgB,EAAE,GAAGX;IAE7B,qBACE;;YACGI;YACA,CAACG,iBAAiBK,MAAM,IAAIJ;YAC5BD,iBAAiBM,GAAG,CAAC,CAACC,QAAQC;gBAC7B,MAAMC,QAAQP,eAAeK;gBAC7B,MAAMG,cAAcP,eAAe;oBACjCK;oBACAV;oBACAS;oBACAI,UAAUP,iBAAiBG;oBAC3BK,WAAWV;gBACb;gBAEA,qBACE,KAACR;oBAAmBmB,OAAON;oBAAS,GAAGG,WAAW;8BAC/CA,aAAab,YAAYY;mBADfA;YAIjB;;;AAGN"}

package/dist/autocomplete/_autocomplete.scss

@@ -1,73 +1,401 @@
 @use "sass:list";
 @use "sass:map";
+@use "sass:math";
+@use "sass:string";
 @use "../utils";
+@use "../box/box";
 @use "../button/button";
+@use "../chip/chip";
+@use "../icon/icon";
 @use "../form/form";
 @use "../progress/progress";
 
+// Set to `true` to disable all the styles
+// @type boolean
 $disable-everything: false !default;
+
+// Set to `true` to disable the clear button styles
+// @type boolean
+$disable-clear-button: false !default;
+
+// Set to `true` to disable the dropdown button styles
+// @type boolean
 $disable-dropdown-button: false !default;
+
+// Set to `true` to disable the circular progress styles
+// @type boolean
 $disable-circular-progress: false !default;
 
-$button-size: button.$icon-small-size !default;
-$circular-progress-size: progress.$circular-dense-size !default;
+// Set to `true` to disable setting `text-overflow: ellipsis` on the input
+// @type boolean
+$disable-text-overflow-ellipsis: false !default;
 
-$dropdown-button-calc: calc(button.get-var(icon-font-size) * 2) !default;
-$dropdown-button-only-calc: calc(
-  form.get-var(addon-spacing) + $dropdown-button-calc
-) !default;
-$circular-progress-only-calc: calc(
-  form.get-var(addon-spacing) + progress.get-var(circular-size)
-) !default;
-$circular-progress-and-dropdown-button-calc: calc(
-  calc(form.get-var(addon-spacing) * 2) + progress.get-var(circular-size) +
-    $dropdown-button-calc
+// Set to `true` to disable the inline chip styles
+// @type boolean
+$disable-inline-chips: chip.$disable-everything !default;
+
+// This is the min width for the input when there are inline chips. This causes
+// the input to wrap to the next line.
+// @type number
+$inline-min-width: 5rem !default;
+
+// The amount of spacing between each inline chip
+// @type number
+$inline-chips-gap: icon.get-var(spacing) !default;
+
+// The vertical padding to apply to the text field when using inline chips and
+// the outline theme. This is used so that the chips and floating label look
+// nice.
+// @type number
+$inline-outlined-vertical-padding: calc(
+  (form.get-var(text-field-height) - chip.get-var(height)) / 2 -
+    form.$text-field-border-width
 ) !default;
 
+// The amount of padding to apply to the text field when there is at least one
+// chip visible. The default behavior makes it so the text in the input matches
+// with a chip if they were stacked.
+//
+// @type number
+$inline-input-leading-padding: chip.get-var(horizontal-padding) !default;
+
+// Updates all the icon button sizes that appear within the autocomplete to use
+// this new size
+// @type number
+$button-size: button.$icon-small-size !default;
+
+// Updates the circular progress size in the autocomplete to this size.
+// @type number
+$circular-progress-size: button.$icon-small-size !default;
+
+// The amount of gap between the circular progress, clear button, and dropdown
+// button (when they exist).
+//
+// @type number
+$addon-gap: form.$text-field-addon-gap !default;
+
+// The spacing between the input and the circular progress/clear button/dropdown
+// button addons.
+//
+// @type number
+$addon-spacing: form.get-var(addon-spacing) !default;
+
+// The size of the clear button and used to generate the correct padding for all
+// the inline addons
+// @type number
+$clear-button-size: calc(button.get-var(icon-font-size) * 2) !default;
+
+// The size of the dropdown button and used to generate the correct padding for all
+// the inline addons
+// @type number
+$dropdown-button-size: calc(button.get-var(icon-font-size) * 2) !default;
+
+// The size of the circular progress and used to generate the correct padding
+// for all the inline addons
+// @type number
+$circular-progress-size: progress.get-var(circular-size) !default;
+
+$_chip-selector: ".rmd-autocomplete__chip";
+$_clear-button-selector: ".rmd-autocomplete__clear-button";
+$_dropdown-button-selector: ".rmd-autocomplete__dropdown-button";
+$_outline-selector: ".rmd-text-field-container--outline";
+$_underline-selector: ".rmd-text-field-container--underline";
+
+// The available configurable css variables and mostly used internally for the
+// `get-var`, `set-var`, and `use-var` utils.
+// @type List
+$variables: (
+  clear-button-size,
+  dropdown-button-size,
+  circular-progress-size,
+  inline-gap,
+  inline-min-width,
+  addon-gap,
+  gap-count,
+  addon-spacing
+);
+
+// @param {string} name - The supported variable name
+// @param {any} fallback - An optional fallback value
+// @returns {string} a `var()` statement
+@function get-var($name, $fallback: null) {
+  $var: utils.get-var-name($variables, $name, "autocomplete");
+  @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, "autocomplete")}: #{$value};
+  }
+}
+
+// @param {string} property - The css property to apply the variable to
+// @param {string} name - The supported variable name
+// @param {any} fallback - 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(addon-gap, $addon-gap);
+    @include set-var(addon-spacing, $addon-spacing);
+    @if not $disable-inline-chips {
+      @include set-var(inline-gap, $inline-chips-gap);
+      @include set-var(inline-min-width, $inline-min-width);
+    }
+  }
+}
+
+// @internal
+@function _right-addon-calc() {
+  $calc-spacing: get-var(addon-spacing);
+  $calc-total-gap: calc(get-var(gap-count, 0) * get-var(addon-gap));
+  $calc-clear-button: if(
+    $disable-clear-button,
+    "",
+    " + " + get-var(clear-button-size, 0px)
+  );
+  $calc-dropdown-button: if(
+    $disable-dropdown-button,
+    "",
+    " + " + get-var(dropdown-button-size, 0px)
+  );
+  $calc-circular-progress: if(
+    $disable-circular-progress,
+    "",
+    " + " + get-var(circular-progress-size, 0px)
+  );
+  $calc-addon-size: $calc-clear-button + $calc-dropdown-button +
+    $calc-circular-progress;
+
+  @return calc($calc-spacing + #{$calc-total-gap + $calc-addon-size});
+}
+
+// @internal
+@function _add-has-selector($appending-selector, $addon-selector) {
+  $prefix: if(string.length($appending-selector), "", "&");
+
+  @return $appending-selector + $prefix + ":has(" + $addon-selector + ")";
+}
+
+// Generates all the styles for the `Autocomplete` components based on feature
+// flags.
+//
+// @param {boolean} disable-layer - Set this to `true` to disable the
+// layer behavior
 @mixin styles($disable-layer: false) {
+  // disclaimer: this is the first component where I'm trying to utilize more of
+  // the `:has`, `:where`, `:is`, etc selectors to require less javascript and
+  // move more behavior into CSS
+
   @if not $disable-everything {
     @include utils.optional-layer(autocomplete, $disable-layer) {
       .rmd-autocomplete {
-        @if not $disable-dropdown-button {
+        @if not $disable-clear-button and not $disable-dropdown-button {
           @include button.set-var(icon-font-size, $button-size);
         }
         @if not $disable-circular-progress {
           @include progress.set-var(circular-size, $circular-progress-size);
         }
 
+        @if not
+          $disable-clear-button or not
+          $disable-dropdown-button or not
+          $disable-circular-progress
+        {
+          // the way the padding right works is to create a calc string that
+          // sums all the available addons widths (including gap) that have
+          // been rendered in the autocomplete. to calculate the gap, the
+          // `&--db` and `&--cp` selectors will increase the `gap-count`
+          // variable based on how many other addons exist with it.
+          //
+          // So:
+          // - only clear button - count == 0
+          // - only dropdown button - count == 0
+          // - only circular progress - count == 0
+          // - clear button and dropdown button - count == 1
+          // - clear button and circular progress - count == 1
+          // - dropdown button and circular progress - count == 1
+          // - circular progress, clear button, and dropdown button - count == 2
+          //
+          // When the addon isn't included, its size will be set to `0px`. When
+          // the addon is included, the size is set to the correct value
+          @include form.set-var(text-field-padding-right, _right-addon-calc());
+        }
+
+        @if not $disable-text-overflow-ellipsis {
+          &:where(:not(:hover):not(:focus-within)) :where(.rmd-text-field) {
+            text-overflow: ellipsis;
+          }
+        }
+
+        @if not $disable-clear-button {
+          &--cb {
+            @include set-var(clear-button-size, $clear-button-size);
+          }
+        }
+
         @if not $disable-dropdown-button {
-          // right-addon-1: dropdown button
-          &--ra1 {
-            @include form.set-var(
-              text-field-padding-right,
-              $dropdown-button-only-calc
-            );
+          &--db {
+            @include set-var(dropdown-button-size, $dropdown-button-size);
+
+            @if not $disable-clear-button {
+              &:has(#{$_clear-button-selector}) {
+                @include set-var(gap-count, 1);
+              }
+            }
           }
+        }
 
-          @if not $disable-circular-progress {
-            // right-addon-2: circular progress and dropdown button
-            &--ra2 {
-              @include form.set-var(
-                text-field-padding-right,
-                $circular-progress-and-dropdown-button-calc
+        @if not $disable-circular-progress {
+          &--cp {
+            @include set-var(circular-progress-size, $circular-progress-size);
+
+            $two-addon-selector: "";
+            $single-selector-list: ();
+            @if not $disable-clear-button {
+              $single-selector-list: list.append(
+                $single-selector-list,
+                $_clear-button-selector,
+                $separator: comma
+              );
+              $two-addon-selector: _add-has-selector(
+                $two-addon-selector,
+                $_clear-button-selector
+              );
+            }
+
+            @if not $disable-dropdown-button {
+              $single-selector-list: list.append(
+                $single-selector-list,
+                $_dropdown-button-selector,
+                $separator: comma
               );
+              $two-addon-selector: _add-has-selector(
+                $two-addon-selector,
+                $_dropdown-button-selector
+              );
+            }
+
+            @if list.length($single-selector-list) {
+              &:has(#{$single-selector-list}) {
+                @include set-var(gap-count, 1);
+              }
+            }
+            @if string.length($two-addon-selector) {
+              #{$two-addon-selector} {
+                @include set-var(gap-count, 2);
+              }
             }
           }
         }
 
-        @if not $disable-circular-progress {
-          // right-addon-3: circular progress
-          &--ra3 {
-            @include form.set-var(
-              text-field-padding-right,
-              $circular-progress-only-calc
-            );
+        @include utils.mouse-hover($wrap-in-hover: false) {
+          &:where(:not(:hover):not(:focus-within))
+            :where(#{$_clear-button-selector}) {
+            opacity: 0;
+          }
+        }
+
+        @if not $disable-inline-chips {
+          // the basic idea for the inline chips are:
+          // - move any padding from the input to the container element
+          // - update the styles to display a text cursor when hovering the
+          //   container element instead of only the input (since clicking
+          //   anywhere in the container focuses the input)
+          // - keep other styles the same until at least one chip exists
+          // - when a chip exists, update the vertical padding to align
+          //   everything nicely
+          // - the input will also be updated to align with the text of a chip
+          //   so it looks nicely when stacked and starting at the beginning of
+          //   a line
+          // - I am NOT updating the underline behavior to match the input width
+          //   since those are still "boxed" elements and it helps show current
+          //   focus
+          &--inline-chips {
+            @include form.use-var(min-height, text-field-height);
+            @include form.use-var(padding-right, text-field-padding-right);
+            @include use-var(gap, inline-gap);
+
+            flex-wrap: wrap;
+            height: auto;
+
+            &:where(:not(:has(.rmd-text-field:disabled))) {
+              cursor: text;
+            }
+
+            @if not
+              form.$disable-text-field-filled-theme or not
+              form.$disable-text-field-underlined-theme
+            {
+              &:where(#{$_underline-selector}):has(#{$_chip-selector}) {
+                @include form.use-var(padding-top, text-field-padding-top);
+                @include use-var(padding-bottom, inline-gap);
+
+                :where(.rmd-text-field) {
+                  padding-top: 0;
+                }
+              }
+            }
+
+            @if not form.$disable-text-field-outlined-theme {
+              &:where(#{$_outline-selector}):has(#{$_chip-selector}) {
+                padding-bottom: $inline-outlined-vertical-padding;
+                padding-top: $inline-outlined-vertical-padding;
+              }
+            }
+
+            &:has(#{$_chip-selector}) {
+              // when at least one chip exists, ensure the text field has some
+              // leading padding and always display the placeholder (if exists)
+              // since the label will also be forced to floating
+              :where(.rmd-text-field) {
+                @include use-var(min-width, inline-min-width);
+                @include chip.use-var(height);
+
+                padding-left: $inline-input-leading-padding;
+                padding-right: 0;
+                width: 0;
+
+                &::placeholder {
+                  opacity: 1;
+                }
+
+                @include utils.rtl {
+                  padding-left: 0;
+                  padding-right: $inline-input-leading-padding;
+                }
+              }
+            }
+
+            @include utils.rtl {
+              @include form.use-var(padding-left, text-field-padding-right);
+
+              padding-right: 0;
+            }
           }
         }
 
         &__right-addon {
-          @include utils.auto-rtl(right, 0);
-          @include utils.auto-rtl(padding-left, form.get-var(addon-spacing), 0);
+          padding-left: get-var(addon-spacing);
+          right: 0;
+
+          @include utils.rtl {
+            left: 0;
+            padding-left: 0;
+            padding-right: get-var(addon-spacing);
+            right: auto;
+          }
         }
       }
     }

package/dist/autocomplete/autocompleteStyles.d.ts

@@ -4,6 +4,8 @@
 export interface AutocompleteClassNameOptions {
     className?: string;
     loading?: boolean;
+    inlineChips?: boolean;
+    disableClearButton?: boolean;
     disableDropdownButton?: boolean;
 }
 /**
@@ -20,6 +22,16 @@ export interface AutocompleteRightAddonClassNameOptions {
  * @since 6.0.0
  */
 export declare function autocompleteRightAddon(options?: AutocompleteRightAddonClassNameOptions): string;
+/**
+ * @since 6.0.0
+ */
+export interface AutocompleteDropdownButtonClassNameOptions {
+    className?: string;
+}
+/**
+ * @since 6.0.0
+ */
+export declare function autocompleteDropdownButton(options?: AutocompleteDropdownButtonClassNameOptions): string;
 /**
  * @since 6.0.0
  */
@@ -30,3 +42,13 @@ export interface AutocompleteClearButtonClassNameOptions {
  * @since 6.0.0
  */
 export declare function autocompleteClearButton(options?: AutocompleteClearButtonClassNameOptions): string;
+/**
+ * @since 6.0.0
+ */
+export interface AutocompleteChipClassNameOptions {
+    className?: string;
+}
+/**
+ * @since 6.0.0
+ */
+export declare function autocompleteChip(options?: AutocompleteChipClassNameOptions): string;

package/dist/autocomplete/autocompleteStyles.js

@@ -5,15 +5,12 @@ const styles = bem("rmd-autocomplete");
 /**
  * @since 6.0.0
  */ export function autocomplete(options = {}) {
-    const { className, loading, disableDropdownButton } = options;
+    const { className, loading, inlineChips, disableClearButton, disableDropdownButton } = options;
     return cnb(styles({
-        // all other configurations must be set manually
-        // right-addon-1: dropdown button only
-        ra1: !loading && !disableDropdownButton,
-        // right-addon-2: circular progress and dropdown button
-        ra2: loading && !disableDropdownButton,
-        // right-addon-3: circular progress only
-        ra3: loading && disableDropdownButton
+        cb: !disableClearButton,
+        db: !disableDropdownButton,
+        cp: loading,
+        "inline-chips": inlineChips
     }), className);
 }
 /**
@@ -24,11 +21,23 @@ const styles = bem("rmd-autocomplete");
         backgroundColor: "current-color"
     }), className);
 }
+/**
+ * @since 6.0.0
+ */ export function autocompleteDropdownButton(options = {}) {
+    const { className } = options;
+    return cnb(styles("dropdown-button"), className);
+}
 /**
  * @since 6.0.0
  */ export function autocompleteClearButton(options = {}) {
     const { className } = options;
     return cnb(styles("clear-button"), className);
 }
+/**
+ * @since 6.0.0
+ */ export function autocompleteChip(options = {}) {
+    const { className } = options;
+    return cnb(styles("chip"), className);
+}
 
 //# sourceMappingURL=autocompleteStyles.js.map

package/dist/autocomplete/autocompleteStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/autocomplete/autocompleteStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-autocomplete\");\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteClassNameOptions {\n  className?: string;\n\n  loading?: boolean;\n  disableDropdownButton?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function autocomplete(\n  options: AutocompleteClassNameOptions = {}\n): string {\n  const { className, loading, disableDropdownButton } = options;\n\n  return cnb(\n    styles({\n      // all other configurations must be set manually\n\n      // right-addon-1: dropdown button only\n      ra1: !loading && !disableDropdownButton,\n      // right-addon-2: circular progress and dropdown button\n      ra2: loading && !disableDropdownButton,\n      // right-addon-3: circular progress only\n      ra3: loading && disableDropdownButton,\n    }),\n    className\n  );\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteRightAddonClassNameOptions {\n  className?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function autocompleteRightAddon(\n  options: AutocompleteRightAddonClassNameOptions = {}\n): string {\n  const { className } = options;\n\n  return cnb(\n    styles(\"right-addon\"),\n    cssUtils({ backgroundColor: \"current-color\" }),\n    className\n  );\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteClearButtonClassNameOptions {\n  className?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function autocompleteClearButton(\n  options: AutocompleteClearButtonClassNameOptions = {}\n): string {\n  const { className } = options;\n\n  return cnb(styles(\"clear-button\"), className);\n}\n"],"names":["cnb","cssUtils","bem","styles","autocomplete","options","className","loading","disableDropdownButton","ra1","ra2","ra3","autocompleteRightAddon","backgroundColor","autocompleteClearButton"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAYnB;;CAEC,GACD,OAAO,SAASE,aACdC,UAAwC,CAAC,CAAC;IAE1C,MAAM,EAAEC,SAAS,EAAEC,OAAO,EAAEC,qBAAqB,EAAE,GAAGH;IAEtD,OAAOL,IACLG,OAAO;QACL,gDAAgD;QAEhD,sCAAsC;QACtCM,KAAK,CAACF,WAAW,CAACC;QAClB,uDAAuD;QACvDE,KAAKH,WAAW,CAACC;QACjB,wCAAwC;QACxCG,KAAKJ,WAAWC;IAClB,IACAF;AAEJ;AASA;;CAEC,GACD,OAAO,SAASM,uBACdP,UAAkD,CAAC,CAAC;IAEpD,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IACLG,OAAO,gBACPF,SAAS;QAAEY,iBAAiB;IAAgB,IAC5CP;AAEJ;AASA;;CAEC,GACD,OAAO,SAASQ,wBACdT,UAAmD,CAAC,CAAC;IAErD,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IAAIG,OAAO,iBAAiBG;AACrC"}
+{"version":3,"sources":["../../src/autocomplete/autocompleteStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-autocomplete\");\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteClassNameOptions {\n  className?: string;\n\n  loading?: boolean;\n  inlineChips?: boolean;\n  disableClearButton?: boolean;\n  disableDropdownButton?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function autocomplete(\n  options: AutocompleteClassNameOptions = {}\n): string {\n  const {\n    className,\n    loading,\n    inlineChips,\n    disableClearButton,\n    disableDropdownButton,\n  } = options;\n\n  return cnb(\n    styles({\n      cb: !disableClearButton,\n      db: !disableDropdownButton,\n      cp: loading,\n      \"inline-chips\": inlineChips,\n    }),\n    className\n  );\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteRightAddonClassNameOptions {\n  className?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function autocompleteRightAddon(\n  options: AutocompleteRightAddonClassNameOptions = {}\n): string {\n  const { className } = options;\n\n  return cnb(\n    styles(\"right-addon\"),\n    cssUtils({ backgroundColor: \"current-color\" }),\n    className\n  );\n}\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteDropdownButtonClassNameOptions {\n  className?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function autocompleteDropdownButton(\n  options: AutocompleteDropdownButtonClassNameOptions = {}\n): string {\n  const { className } = options;\n\n  return cnb(styles(\"dropdown-button\"), className);\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteClearButtonClassNameOptions {\n  className?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function autocompleteClearButton(\n  options: AutocompleteClearButtonClassNameOptions = {}\n): string {\n  const { className } = options;\n\n  return cnb(styles(\"clear-button\"), className);\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteChipClassNameOptions {\n  className?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function autocompleteChip(\n  options: AutocompleteChipClassNameOptions = {}\n): string {\n  const { className } = options;\n\n  return cnb(styles(\"chip\"), className);\n}\n"],"names":["cnb","cssUtils","bem","styles","autocomplete","options","className","loading","inlineChips","disableClearButton","disableDropdownButton","cb","db","cp","autocompleteRightAddon","backgroundColor","autocompleteDropdownButton","autocompleteClearButton","autocompleteChip"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAcnB;;CAEC,GACD,OAAO,SAASE,aACdC,UAAwC,CAAC,CAAC;IAE1C,MAAM,EACJC,SAAS,EACTC,OAAO,EACPC,WAAW,EACXC,kBAAkB,EAClBC,qBAAqB,EACtB,GAAGL;IAEJ,OAAOL,IACLG,OAAO;QACLQ,IAAI,CAACF;QACLG,IAAI,CAACF;QACLG,IAAIN;QACJ,gBAAgBC;IAClB,IACAF;AAEJ;AASA;;CAEC,GACD,OAAO,SAASQ,uBACdT,UAAkD,CAAC,CAAC;IAEpD,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IACLG,OAAO,gBACPF,SAAS;QAAEc,iBAAiB;IAAgB,IAC5CT;AAEJ;AAQA;;CAEC,GACD,OAAO,SAASU,2BACdX,UAAsD,CAAC,CAAC;IAExD,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IAAIG,OAAO,oBAAoBG;AACxC;AASA;;CAEC,GACD,OAAO,SAASW,wBACdZ,UAAmD,CAAC,CAAC;IAErD,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IAAIG,OAAO,iBAAiBG;AACrC;AASA;;CAEC,GACD,OAAO,SAASY,iBACdb,UAA4C,CAAC,CAAC;IAE9C,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IAAIG,OAAO,SAASG;AAC7B"}

package/dist/autocomplete/defaults.d.ts

@@ -1,21 +1,21 @@
 import { type MenuItemProps } from "../menu/MenuItem.js";
-import { type AutocompleteFilterOptions } from "./types.js";
+import { type AutocompleteFilterOptions, type AutocompleteGetOptionPropsOptions, type AutocompleteOption } from "./types.js";
 /**
  * @since 6.0.0
  * @internal
  */
-export declare const defaultAutocompleteExtractor: <T>(item: T) => string;
+export declare const defaultAutocompleteExtractor: (item: unknown) => string;
 /**
  * @since 6.0.0
  * @internal
  */
-export declare const defaultAutocompleteOptionProps: <T>(options: {
-    option: T;
-}) => Partial<MenuItemProps> | undefined;
+export declare const defaultAutocompleteFilter: <Option extends AutocompleteOption>(options: AutocompleteFilterOptions<Option>) => readonly Option[];
 /**
- * This is just the {@link caseInsensitiveSearch} but requires
- * the options to start with the current query.
- *
  * @since 6.0.0
  */
-export declare function defaultAutocompleteFilter<T>(options: AutocompleteFilterOptions<T>): readonly T[];
+export declare const noopAutocompleteFilter: <Option extends AutocompleteOption>(options: AutocompleteFilterOptions<Option>) => readonly Option[];
+/**
+ * @since 6.0.0
+ * @internal
+ */
+export declare const defaultAutocompleteGetOptionProps: <T extends AutocompleteOption>(options: AutocompleteGetOptionPropsOptions<T>) => Partial<MenuItemProps> | undefined;