@react-md/core 1.0.0-next.16 → 1.0.0-next.18

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;

package/dist/autocomplete/defaults.js

@@ -9,6 +9,16 @@ import { defaultExtractor } from "../searching/utils.js";
     }
     return defaultExtractor("Autocomplete")(item);
 };
+/**
+ * @since 6.0.0
+ * @internal
+ */ export const defaultAutocompleteFilter = (options)=>caseInsensitiveSearch({
+        ...options,
+        startsWith: true
+    });
+/**
+ * @since 6.0.0
+ */ export const noopAutocompleteFilter = (options)=>options.list;
 /**
  * @since 6.0.0
  * @internal
@@ -16,11 +26,12 @@ import { defaultExtractor } from "../searching/utils.js";
 /**
  * @since 6.0.0
  * @internal
- */ export const defaultAutocompleteOptionProps = (options)=>{
+ */ export const defaultAutocompleteGetOptionProps = (options)=>{
     const { option } = options;
     if (isProbablyMenuItemProps(option)) {
-        const { leftAddon, rightAddon, className, disabled, height, textProps, textClassName, primaryText, secondaryText, secondaryTextClassName, multiline, disableTextChildren } = option;
+        const { leftAddon, rightAddon, className, children, disabled, height, textProps, textClassName, primaryText, secondaryText, secondaryTextClassName, multiline, disableTextChildren } = option;
         return {
+            children,
             leftAddon,
             rightAddon,
             className,
@@ -37,16 +48,5 @@ import { defaultExtractor } from "../searching/utils.js";
     }
     return;
 };
-/**
- * This is just the {@link caseInsensitiveSearch} but requires
- * the options to start with the current query.
- *
- * @since 6.0.0
- */ export function defaultAutocompleteFilter(options) {
-    return caseInsensitiveSearch({
-        ...options,
-        startsWith: true
-    });
-}
 
 //# sourceMappingURL=defaults.js.map

package/dist/autocomplete/defaults.js.map

@@ -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 { type AutocompleteFilterOptions } from \"./types.js\";\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport const defaultAutocompleteExtractor = <T>(item: T): 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 */\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 defaultAutocompleteOptionProps = <T>(options: {\n  option: T;\n}): Partial<MenuItemProps> | undefined => {\n  const { option } = options;\n  if (isProbablyMenuItemProps(option)) {\n    const {\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    } = option;\n\n    return {\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\n/**\n * This is just the {@link caseInsensitiveSearch} but requires\n * the options to start with the current query.\n *\n * @since 6.0.0\n */\nexport function defaultAutocompleteFilter<T>(\n  options: AutocompleteFilterOptions<T>\n): readonly T[] {\n  return caseInsensitiveSearch({ ...options, startsWith: true });\n}\n"],"names":["caseInsensitiveSearch","defaultExtractor","defaultAutocompleteExtractor","item","label","isProbablyMenuItemProps","defaultAutocompleteOptionProps","options","option","leftAddon","rightAddon","className","disabled","height","textProps","textClassName","primaryText","secondaryText","secondaryTextClassName","multiline","disableTextChildren","defaultAutocompleteFilter","startsWith"],"mappings":"AACA,SAASA,qBAAqB,QAAQ,kCAAkC;AACxE,SAASC,gBAAgB,QAAQ,wBAAwB;AAGzD;;;CAGC,GACD,OAAO,MAAMC,+BAA+B,CAAIC;IAC9C,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,MAAME,0BAA0B,CAC9BF,OACmC,CAAC,CAACA,QAAQ,OAAOA,SAAS;AAE/D;;;CAGC,GACD,OAAO,MAAMG,iCAAiC,CAAIC;IAGhD,MAAM,EAAEC,MAAM,EAAE,GAAGD;IACnB,IAAIF,wBAAwBG,SAAS;QACnC,MAAM,EACJC,SAAS,EACTC,UAAU,EACVC,SAAS,EACTC,QAAQ,EACRC,MAAM,EACNC,SAAS,EACTC,aAAa,EACbC,WAAW,EACXC,aAAa,EACbC,sBAAsB,EACtBC,SAAS,EACTC,mBAAmB,EACpB,GAAGZ;QAEJ,OAAO;YACLC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;QACF;IACF;IACA;AACF,EAAE;AAEF;;;;;CAKC,GACD,OAAO,SAASC,0BACdd,OAAqC;IAErC,OAAOP,sBAAsB;QAAE,GAAGO,OAAO;QAAEe,YAAY;IAAK;AAC9D"}
+{"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"}