@react-md/core 6.4.0 → 6.5.1

package/dist/_a11y.scss

@@ -183,5 +183,7 @@ $_linear-channel-values: (
   $light-contrast: _contrast($background-color, $light-color);
   $dark-contrast: _contrast($background-color, $dark-color);
 
-  @return if($light-contrast > $dark-contrast, $light-color, $dark-color);
+  @return if(
+    sass($light-contrast > $dark-contrast): $light-color; else: $dark-color
+  );
 }

package/dist/_box-shadows.scss

@@ -203,7 +203,11 @@ $box-shadow-3-layers: (
   $create-pseudo: true,
   $position-relative: true
 ) {
-  $pseudo-selector: if($pseudo-before, "&::before", "&::after");
+  $pseudo-selector: "&::after";
+  @if $pseudo-before {
+    $pseudo-selector: "&::before";
+  }
+
   $suffix: string.slice($pseudo-selector, 2);
   $active-string: "";
 
@@ -230,7 +234,11 @@ $box-shadow-3-layers: (
       @for $i from 1 to list.length($active-selectors) + 1 {
         $selector: list.nth($active-selectors, $i);
 
-        $prefix: $active-string + if($i > 1, ", ", "");
+        $maybe-comma: "";
+        @if $i > 1 {
+          $maybe-comma: ", ";
+        }
+        $prefix: $active-string + $maybe-comma;
         $active-string: $prefix + $selector + $suffix;
       }
     }
@@ -282,16 +290,16 @@ $box-shadow-3-layers: (
   $opacity-boost: 0,
   $position-relative: true
 ) {
-  $start-shadow: if(
-    $start-z-value == none or $start-z-value == 0,
-    none,
-    box-shadow($start-z-value, $color, $opacity-boost)
-  );
-  $end-shadow: if(
-    $end-z-value == none or $end-z-value == 0,
-    none,
-    if($end-z-value, box-shadow($end-z-value, $color, $opacity-boost), null)
-  );
+  $start-shadow: none;
+  $end-shadow: null;
+  @if $start-z-value != none and $start-z-value != 0 {
+    $start-shadow: box-shadow($start-z-value, $color, $opacity-boost);
+  }
+  @if $end-z-value {
+    @if $end-z-value != none and $end-z-value != 0 {
+      $end-shadow: box-shadow($end-z-value, $color, $opacity-boost);
+    }
+  }
 
   @include box-shadow-transition(
     $start-shadow,

package/dist/_core.scss

@@ -15,9 +15,9 @@
 @forward "box-shadows";
 @forward "interaction/interaction" as interaction-*;
 @forward "draggable/draggable" as draggable-*;
+@forward "divider/divider" as divider-*;
 @forward "window-splitter/window-splitter" as window-splitter-*;
 @forward "icon/icon" as icon-*;
-@forward "divider/divider" as divider-*;
 @forward "progress/progress" as progress-*;
 @forward "overlay/overlay" as overlay-*;
 @forward "button/button" as button-*;

package/dist/_utils.scss

@@ -97,30 +97,40 @@ $_swappable-properties: text-align;
 /// @param {String} error-message - The additional error message to display
 /// @returns {any} the value from the list or map
 @function validate($options, $key-or-value, $error-message) {
-  $options: if(
-    meta.type-of($options) == string,
-    list.append((), $options),
-    $options
-  );
+  @if meta.type-of($options) == string {
+    $options: list.append((), $options);
+  }
 
   $type: meta.type-of($options);
   $is-map: $type == map;
   $is-list: $type == list;
 
   @if $disable-validation {
-    @return if($is-list, $key-or-value, map.get($options, $key-or-value));
+    @if $is-list {
+      @return $key-or-value;
+    }
+
+    @return map.get($options, $key-or-value);
   }
 
   @if not $is-map and not $is-list {
     @error "Unable to validate anything except for lists and maps at this time. Received: '#{$options}'.";
   }
 
-  $choices: if($is-map, map.keys($options), $options);
+  $choices: $options;
+  @if $is-map {
+    $choices: map.keys($options);
+  }
+
   @if not list.index($choices, $key-or-value) {
     @error "Invalid #{$error-message}: '#{$key-or-value}'. Choose one of: #{$choices}";
   }
 
-  @return if($is-list, $key-or-value, map.get($options, $key-or-value));
+  @if $is-list {
+    @return $key-or-value;
+  }
+
+  @return map.get($options, $key-or-value);
 }
 
 /// Used to get a custom property variable name.
@@ -272,7 +282,7 @@ $_swappable-properties: text-align;
   content: "";
   inset: $inset;
   pointer-events: none;
-  position: if($fixed, fixed, absolute);
+  position: if(sass($fixed): fixed; else: absolute);
   z-index: $z-index;
 }
 
@@ -349,8 +359,13 @@ $_swappable-properties: text-align;
   $css-modules: false,
   $parent-selector: true
 ) {
-  $selector: if($css-modules, ":global #{$selector} :local", $selector);
-  $selector: if($parent-selector, "#{$selector} &", $selector);
+  @if $css-modules {
+    $selector: ":global(#{$selector})";
+  }
+
+  @if $parent-selector {
+    $selector: "#{$selector} &";
+  }
 
   #{$selector} {
     @content;

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

@@ -115,10 +115,10 @@ $light-theme-surface-color: a11y.contrast-color(
 /// The background color to use when `theme="surface"` and using the global dark
 /// theme
 /// @type Color
+// prettier-ignore
 $dark-theme-surface-background-color: if(
-  theme.$disable-dark-elevation,
-  theme.$dark-theme-surface-color,
-  map.get(theme.$dark-elevation-colors, $fixed-elevation)
+  sass(theme.$disable-dark-elevation): theme.$dark-theme-surface-color;
+  else: map.get(theme.$dark-elevation-colors, $fixed-elevation)
 ) !default;
 
 /// The text color to use when `theme="surface"` and using the global dark theme

package/dist/autocomplete/AutocompleteChip.js

@@ -14,10 +14,10 @@ import { autocompleteChip } from "./autocompleteStyles.js";
     let rightAddon = propRightAddon;
     let ariaDescription = propAriaDescription;
     const removeIcon = getIcon("remove", propRemoveIcon);
-    if (typeof rightAddon === "undefined") {
+    if (rightAddon === undefined) {
         rightAddon = removeIcon;
     }
-    if (typeof ariaDescription === "undefined" && typeof children === "string") {
+    if (ariaDescription === undefined && typeof children === "string") {
         ariaDescription = `Remove "${children}"`;
     }
     return /*#__PURE__*/ _jsx(Chip, {

package/dist/autocomplete/AutocompleteChip.js.map

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

package/dist/autocomplete/AutocompleteListboxChildren.js

@@ -14,7 +14,7 @@ import { Option } from "../form/Option.js";
     return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
             children,
-            !availableOptions.length && noOptionsChildren,
+            availableOptions.length === 0 && noOptionsChildren,
             availableOptions.map((option, index)=>{
                 const label = getOptionLabel(option);
                 const optionProps = getOptionProps({

package/dist/autocomplete/AutocompleteListboxChildren.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/autocomplete/AutocompleteListboxChildren.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactElement, type ReactNode } from \"react\";\n\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  extends\n    Required<AutocompleteGetOptionProps<Option>>,\n    Required<AutocompleteGetOptionLabel<Option>> {\n  query: string;\n  options: readonly 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;;AAIA,SAASA,iBAAiB,QAAQ,6BAA6B;AAC/D,SAASC,MAAM,QAAQ,oBAAoB;AAuB3C;;;;;;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"}
+{"version":3,"sources":["../../src/autocomplete/AutocompleteListboxChildren.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactElement, type ReactNode } from \"react\";\n\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  extends\n    Required<AutocompleteGetOptionProps<Option>>,\n    Required<AutocompleteGetOptionLabel<Option>> {\n  query: string;\n  options: readonly 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 === 0 && 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;;AAIA,SAASA,iBAAiB,QAAQ,6BAA6B;AAC/D,SAASC,MAAM,QAAQ,oBAAoB;AAuB3C;;;;;;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;YACAG,iBAAiBK,MAAM,KAAK,KAAKJ;YACjCD,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

@@ -195,21 +195,22 @@ $variables: (
 @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-clear-button: "";
+  @if not $disable-clear-button {
+    $calc-clear-button: " + " + get-var(clear-button-size, 0px);
+  }
+
+  $calc-dropdown-button: "";
+  @if not $disable-dropdown-button {
+    $calc-dropdown-button: " + " + get-var(dropdown-button-size, 0px);
+  }
+
+  $calc-circular-progress: "";
+  @if not $disable-circular-progress {
+    $calc-circular-progress: " + " + get-var(circular-progress-size, 0px);
+  }
+
   $calc-addon-size: $calc-clear-button + $calc-dropdown-button +
     $calc-circular-progress;
 
@@ -223,7 +224,10 @@ $variables: (
 /// @param {String} addon-selector
 /// @returns {String} a class name selector
 @function _add-has-selector($appending-selector, $addon-selector) {
-  $prefix: if(string.length($appending-selector), "", "&");
+  $prefix: "";
+  @if not string.length($appending-selector) {
+    $prefix: "&";
+  }
 
   @return $appending-selector + $prefix + ":has(" + $addon-selector + ")";
 }

package/dist/autocomplete/useAutocomplete.js

@@ -33,7 +33,7 @@ const noop = ()=>{
     });
     const multiselect = propMultiselect ?? (!!value && typeof value === "object" && "length" in value);
     let updateQueryOnSelect = propUpdateQueryOnSelect;
-    if (typeof propUpdateQueryOnSelect === "undefined") {
+    if (propUpdateQueryOnSelect === undefined) {
         updateQueryOnSelect = multiselect ? "clear" : "selected";
     }
     const disableCloseOnSelect = propDisableCloseOnSelect ?? (multiselect && checkboxes);
@@ -160,13 +160,13 @@ const noop = ()=>{
             let unselectedIcon = propUnselectedIcon;
             let disableSelectedIcon = propDisableSelectedIcon;
             if (multiselect && checkboxes) {
-                if (typeof selectedIcon === "undefined") {
+                if (selectedIcon === undefined) {
                     selectedIcon = getIcon("checkboxChecked");
                 }
-                if (typeof unselectedIcon === "undefined") {
+                if (unselectedIcon === undefined) {
                     unselectedIcon = getIcon("checkbox");
                 }
-            } else if (typeof disableSelectedIcon === "undefined") {
+            } else if (disableSelectedIcon === undefined) {
                 disableSelectedIcon = true;
             }
             return {

package/dist/autocomplete/useAutocomplete.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/autocomplete/useAutocomplete.ts"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useMemo, useRef } from \"react\";\n\nimport { useEditableCombobox } from \"../form/useEditableCombobox.js\";\nimport {\n  type EditableHTMLElement,\n  triggerManualChangeEvent,\n} from \"../form/utils.js\";\nimport { getIcon } from \"../icon/config.js\";\nimport { useUserInteractionMode } from \"../interaction/UserInteractionModeProvider.js\";\nimport { getTransitionCallbacks } from \"../transition/getTransitionCallbacks.js\";\nimport { useEnsuredState } from \"../useEnsuredState.js\";\nimport {\n  defaultAutocompleteExtractor,\n  defaultAutocompleteFilter,\n  defaultAutocompleteGetOptionProps,\n  noopAutocompleteFilter,\n} from \"./defaults.js\";\nimport {\n  type AutocompleteImplementation,\n  type AutocompleteMultiSelectImplementation,\n  type AutocompleteMultiSelectOptions,\n  type AutocompleteOption,\n  type AutocompleteOptions,\n  type AutocompleteSingleSelectImplementation,\n  type AutocompleteSingleSelectOptions,\n} from \"./types.js\";\nimport {\n  enforceSelectedValue,\n  getDefaultQuery,\n  getDefaultValue,\n  isMultipleValues,\n} from \"./utils.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * This is the single select autocomplete implementation.\n *\n * @see {@link https://react-md.dev/components/autocomplete | Autocomplete Demos}\n * @since 6.0.0\n */\nexport function useAutocomplete<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n>(\n  options: AutocompleteSingleSelectOptions<Option, ComboboxEl, PopupEl>\n): AutocompleteSingleSelectImplementation<Option, ComboboxEl, PopupEl>;\n/**\n * This is the multiselect autocomplete implementation.\n *\n * @see {@link https://react-md.dev/components/autocomplete | Autocomplete Demos}\n * @since 6.0.0\n */\nexport function useAutocomplete<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n>(\n  options: AutocompleteMultiSelectOptions<Option, ComboboxEl, PopupEl>\n): AutocompleteMultiSelectImplementation<Option, ComboboxEl, PopupEl>;\n/**\n * This is an internal override implementation where the types are less strict\n * so it can be used with the `Autocomplete` component.\n *\n * @see {@link https://react-md.dev/components/autocomplete | Autocomplete Demos}\n * @since 6.0.0\n * @internal\n */\nexport function useAutocomplete<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n>(\n  options: AutocompleteOptions<Option, ComboboxEl, PopupEl>\n): AutocompleteImplementation<Option, ComboboxEl, PopupEl>;\n/**\n * @see {@link https://react-md.dev/components/autocomplete | Autocomplete Demos}\n * @since 6.0.0\n * @internal\n */\nexport function useAutocomplete<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n>(\n  options: AutocompleteOptions<Option, ComboboxEl, PopupEl>\n): AutocompleteImplementation<Option, ComboboxEl, PopupEl> {\n  const {\n    value: propValue,\n    setValue: propSetValue,\n    defaultValue,\n    onValueChange = noop,\n    query: propQuery,\n    setQuery: propSetQuery,\n    defaultQuery,\n    options: values,\n    getOptionLabel = defaultAutocompleteExtractor,\n    getOptionProps = defaultAutocompleteGetOptionProps,\n    onBlur = noop,\n    onChange = noop,\n    onOpen = noop,\n    filter = defaultAutocompleteFilter,\n    filterSelected,\n    allowAnyValue = filter === noopAutocompleteFilter,\n    multiselect: propMultiselect,\n    checkboxes,\n    selectedIcon: propSelectedIcon,\n    unselectedIcon: propUnselectedIcon,\n    selectedIconAfter,\n    disableSelectedIcon: propDisableSelectedIcon,\n    updateQueryOnSelect: propUpdateQueryOnSelect,\n    disableCloseOnSelect: propDisableCloseOnSelect,\n    ...comboboxOptions\n  } = options;\n\n  const mode = useUserInteractionMode();\n  const [value, setValueState] = useEnsuredState({\n    value: propValue,\n    setValue: propSetValue,\n    defaultValue: getDefaultValue({\n      query: propQuery,\n      filter,\n      multiselect: propMultiselect,\n      defaultQuery,\n      defaultValue,\n      options: values,\n      getOptionLabel,\n    }),\n  });\n  const multiselect =\n    propMultiselect ??\n    (!!value && typeof value === \"object\" && \"length\" in value);\n  let updateQueryOnSelect = propUpdateQueryOnSelect;\n  if (typeof propUpdateQueryOnSelect === \"undefined\") {\n    updateQueryOnSelect = multiselect ? \"clear\" : \"selected\";\n  }\n\n  const disableCloseOnSelect =\n    propDisableCloseOnSelect ?? (multiselect && checkboxes);\n\n  const [query, setQuery] = useEnsuredState({\n    name: \"query\",\n    value: propQuery,\n    setValue: propSetQuery,\n    defaultValue: getDefaultQuery({\n      value,\n      getOptionLabel,\n      defaultQuery,\n    }),\n  });\n  const setValue = useCallback(\n    (value: Option | null | readonly Option[]) => {\n      onValueChange(value);\n      setValueState(value);\n    },\n    [onValueChange, setValueState]\n  );\n\n  const combobox = useEditableCombobox<ComboboxEl, PopupEl>({\n    ...comboboxOptions,\n    multiselect,\n  });\n  const {\n    visible,\n    setVisible,\n    popupRef,\n    comboboxRef,\n    comboboxProps,\n    getMenuProps,\n  } = combobox;\n\n  // These refs are used to make it so that the options are not filtered until\n  // the user types a new query while the listbox is visible. The filtered\n  // options will be \"cached\" while:\n  // - the listbox is closing\n  // - the listbox is opening and:\n  //   - the user has not typed at least one letter\n  //   - the options have not changed\n  const entered = useRef(visible);\n  const initialQuery = useRef(\"\");\n  const prevAvailableOptions = useRef<readonly Option[] | null>(null);\n  const isQueryChange =\n    query && query !== initialQuery.current && entered.current;\n\n  let availableOptions = prevAvailableOptions.current || values;\n  if (\n    isQueryChange &&\n    filter !== noopAutocompleteFilter &&\n    !prevAvailableOptions.current\n  ) {\n    initialQuery.current = \"\";\n    availableOptions = filter({\n      list: values,\n      query,\n      extractor: getOptionLabel,\n    });\n  }\n\n  // This is probably overkill, but `filterSelected` will create a quick-lookup\n  // for all the selected values in a `Set` since it is much faster than\n  // `Array.includes()`. The lookup will only be re-created whenever the `value`\n  // changes or is uninitialized to prevent it being created each render as\n  // well.\n  //\n  // These optimizations only start mattering when there are around 5000 items\n  // selected...\n  const selectedOptions = useMemo(() => {\n    if (!filterSelected) {\n      return null;\n    }\n\n    let optionList: readonly Option[] = [];\n    if (isMultipleValues(value)) {\n      optionList = value;\n    } else if (value) {\n      optionList = [value];\n    }\n\n    return new Set(optionList);\n  }, [filterSelected, value]);\n\n  if (filterSelected && selectedOptions?.size) {\n    availableOptions = availableOptions.filter(\n      (option) => !selectedOptions.has(option)\n    );\n  }\n\n  return {\n    ...combobox,\n    value,\n    setValue,\n    query,\n    setQuery,\n    availableOptions,\n    multiselect,\n    comboboxProps: {\n      ...comboboxProps,\n      \"aria-autocomplete\": filter === noopAutocompleteFilter ? \"none\" : \"list\",\n      value: query,\n      onKeyDown(event) {\n        comboboxProps.onKeyDown(event);\n        if (!visible && event.key === \"Escape\") {\n          setQuery(\"\");\n        }\n      },\n      onBlur(event) {\n        onBlur(event);\n\n        if (allowAnyValue) {\n          return;\n        }\n\n        enforceSelectedValue({\n          value,\n          visible,\n          popupRef,\n          container: event.currentTarget.parentElement,\n          comboboxRef,\n          getOptionLabel,\n          availableOptions,\n          prevAvailableOptions,\n        });\n      },\n      onFocus(event) {\n        comboboxProps.onFocus(event);\n        event.currentTarget.select();\n      },\n      onChange(event) {\n        onChange(event);\n\n        const { value } = event.currentTarget;\n        setQuery(value);\n        if (!value && !multiselect) {\n          setValue(null);\n        }\n      },\n    },\n    getListboxProps(overrides) {\n      const {\n        ref,\n        onEnter,\n        onEntered,\n        onExited,\n        disableTransition,\n        ...listboxProps\n      } = getMenuProps(overrides);\n\n      let selectedIcon = propSelectedIcon;\n      let unselectedIcon = propUnselectedIcon;\n      let disableSelectedIcon = propDisableSelectedIcon;\n      if (multiselect && checkboxes) {\n        if (typeof selectedIcon === \"undefined\") {\n          selectedIcon = getIcon(\"checkboxChecked\");\n        }\n        if (typeof unselectedIcon === \"undefined\") {\n          unselectedIcon = getIcon(\"checkbox\");\n        }\n      } else if (typeof disableSelectedIcon === \"undefined\") {\n        disableSelectedIcon = true;\n      }\n\n      return {\n        selectedIcon,\n        unselectedIcon,\n        selectedIconAfter,\n        disableSelectedIcon,\n        ...listboxProps,\n        disableTransition,\n        onRequestClose() {\n          // Make it so clicking on the text field, clear button, dropdown\n          // button, etc does not close the listbox\n          if (\n            mode !== \"keyboard\" &&\n            comboboxRef.current?.parentElement?.contains(document.activeElement)\n          ) {\n            return;\n          }\n\n          listboxProps.onRequestClose();\n        },\n        nodeRef: ref,\n        value,\n        setValue(option) {\n          if (!disableCloseOnSelect) {\n            // this makes it so that the options are not filtered again while the\n            // listbox is closing after selecting a value\n            prevAvailableOptions.current = availableOptions;\n          }\n\n          if (value && typeof value === \"object\" && \"length\" in value) {\n            const nextValue = [...value];\n            const i = value.indexOf(option);\n            if (i === -1) {\n              nextValue.push(option);\n            } else {\n              nextValue.splice(i, 1);\n            }\n\n            setValue(nextValue);\n          } else {\n            setValue(option);\n          }\n\n          if (updateQueryOnSelect === \"as-is\") {\n            return;\n          }\n\n          const nextQuery =\n            updateQueryOnSelect === \"clear\" ? \"\" : getOptionLabel(option);\n          triggerManualChangeEvent(comboboxRef.current, nextQuery);\n        },\n        ...getTransitionCallbacks({\n          enter: true,\n          onEnter,\n          onEntered,\n          onEnterOnce: () => {\n            onOpen();\n\n            // when the listbox is opened, need to flag the entered state to show\n            // that new `query` values should be accepted. Also store the initial\n            // query.\n            entered.current = true;\n            initialQuery.current = query;\n          },\n          disableTransition,\n        }),\n        onExited() {\n          onExited();\n\n          // once the listbox has exited, reset any cached states so the next\n          // time the listbox is opened the filtering behaves the same\n          entered.current = false;\n          prevAvailableOptions.current = null;\n        },\n      };\n    },\n    getOptionLabel,\n    getOptionProps(options) {\n      const overrides = getOptionProps(options);\n\n      return {\n        ...overrides,\n        onClick: (event) => {\n          overrides?.onClick?.(event);\n          if (disableCloseOnSelect) {\n            event.stopPropagation();\n          }\n        },\n      };\n    },\n    getClearButtonProps(overrides) {\n      return {\n        ...overrides,\n        onClick(event) {\n          overrides?.onClick?.(event);\n          comboboxRef.current?.focus();\n\n          if (!multiselect) {\n            setValue(null);\n          }\n          triggerManualChangeEvent(comboboxRef.current, \"\");\n        },\n      };\n    },\n    getDropdownButtonProps(overrides) {\n      return {\n        \"aria-controls\": comboboxProps.id,\n        visible,\n        ...overrides,\n        onClick(event) {\n          overrides?.onClick?.(event);\n          comboboxRef.current?.focus();\n          if (visible) {\n            prevAvailableOptions.current = availableOptions;\n          }\n          setVisible((prev) => !prev);\n        },\n      };\n    },\n  };\n}\n"],"names":["useCallback","useMemo","useRef","useEditableCombobox","triggerManualChangeEvent","getIcon","useUserInteractionMode","getTransitionCallbacks","useEnsuredState","defaultAutocompleteExtractor","defaultAutocompleteFilter","defaultAutocompleteGetOptionProps","noopAutocompleteFilter","enforceSelectedValue","getDefaultQuery","getDefaultValue","isMultipleValues","noop","useAutocomplete","options","value","propValue","setValue","propSetValue","defaultValue","onValueChange","query","propQuery","setQuery","propSetQuery","defaultQuery","values","getOptionLabel","getOptionProps","onBlur","onChange","onOpen","filter","filterSelected","allowAnyValue","multiselect","propMultiselect","checkboxes","selectedIcon","propSelectedIcon","unselectedIcon","propUnselectedIcon","selectedIconAfter","disableSelectedIcon","propDisableSelectedIcon","updateQueryOnSelect","propUpdateQueryOnSelect","disableCloseOnSelect","propDisableCloseOnSelect","comboboxOptions","mode","setValueState","name","combobox","visible","setVisible","popupRef","comboboxRef","comboboxProps","getMenuProps","entered","initialQuery","prevAvailableOptions","isQueryChange","current","availableOptions","list","extractor","selectedOptions","optionList","Set","size","option","has","onKeyDown","event","key","container","currentTarget","parentElement","onFocus","select","getListboxProps","overrides","ref","onEnter","onEntered","onExited","disableTransition","listboxProps","onRequestClose","contains","document","activeElement","nodeRef","nextValue","i","indexOf","push","splice","nextQuery","enter","onEnterOnce","onClick","stopPropagation","getClearButtonProps","focus","getDropdownButtonProps","id","prev"],"mappings":"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"}
+{"version":3,"sources":["../../src/autocomplete/useAutocomplete.ts"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useMemo, useRef } from \"react\";\n\nimport { useEditableCombobox } from \"../form/useEditableCombobox.js\";\nimport {\n  type EditableHTMLElement,\n  triggerManualChangeEvent,\n} from \"../form/utils.js\";\nimport { getIcon } from \"../icon/config.js\";\nimport { useUserInteractionMode } from \"../interaction/UserInteractionModeProvider.js\";\nimport { getTransitionCallbacks } from \"../transition/getTransitionCallbacks.js\";\nimport { useEnsuredState } from \"../useEnsuredState.js\";\nimport {\n  defaultAutocompleteExtractor,\n  defaultAutocompleteFilter,\n  defaultAutocompleteGetOptionProps,\n  noopAutocompleteFilter,\n} from \"./defaults.js\";\nimport {\n  type AutocompleteImplementation,\n  type AutocompleteMultiSelectImplementation,\n  type AutocompleteMultiSelectOptions,\n  type AutocompleteOption,\n  type AutocompleteOptions,\n  type AutocompleteSingleSelectImplementation,\n  type AutocompleteSingleSelectOptions,\n} from \"./types.js\";\nimport {\n  enforceSelectedValue,\n  getDefaultQuery,\n  getDefaultValue,\n  isMultipleValues,\n} from \"./utils.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * This is the single select autocomplete implementation.\n *\n * @see {@link https://react-md.dev/components/autocomplete | Autocomplete Demos}\n * @since 6.0.0\n */\nexport function useAutocomplete<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n>(\n  options: AutocompleteSingleSelectOptions<Option, ComboboxEl, PopupEl>\n): AutocompleteSingleSelectImplementation<Option, ComboboxEl, PopupEl>;\n/**\n * This is the multiselect autocomplete implementation.\n *\n * @see {@link https://react-md.dev/components/autocomplete | Autocomplete Demos}\n * @since 6.0.0\n */\nexport function useAutocomplete<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n>(\n  options: AutocompleteMultiSelectOptions<Option, ComboboxEl, PopupEl>\n): AutocompleteMultiSelectImplementation<Option, ComboboxEl, PopupEl>;\n/**\n * This is an internal override implementation where the types are less strict\n * so it can be used with the `Autocomplete` component.\n *\n * @see {@link https://react-md.dev/components/autocomplete | Autocomplete Demos}\n * @since 6.0.0\n * @internal\n */\nexport function useAutocomplete<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n>(\n  options: AutocompleteOptions<Option, ComboboxEl, PopupEl>\n): AutocompleteImplementation<Option, ComboboxEl, PopupEl>;\n/**\n * @see {@link https://react-md.dev/components/autocomplete | Autocomplete Demos}\n * @since 6.0.0\n * @internal\n */\nexport function useAutocomplete<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n>(\n  options: AutocompleteOptions<Option, ComboboxEl, PopupEl>\n): AutocompleteImplementation<Option, ComboboxEl, PopupEl> {\n  const {\n    value: propValue,\n    setValue: propSetValue,\n    defaultValue,\n    onValueChange = noop,\n    query: propQuery,\n    setQuery: propSetQuery,\n    defaultQuery,\n    options: values,\n    getOptionLabel = defaultAutocompleteExtractor,\n    getOptionProps = defaultAutocompleteGetOptionProps,\n    onBlur = noop,\n    onChange = noop,\n    onOpen = noop,\n    filter = defaultAutocompleteFilter,\n    filterSelected,\n    allowAnyValue = filter === noopAutocompleteFilter,\n    multiselect: propMultiselect,\n    checkboxes,\n    selectedIcon: propSelectedIcon,\n    unselectedIcon: propUnselectedIcon,\n    selectedIconAfter,\n    disableSelectedIcon: propDisableSelectedIcon,\n    updateQueryOnSelect: propUpdateQueryOnSelect,\n    disableCloseOnSelect: propDisableCloseOnSelect,\n    ...comboboxOptions\n  } = options;\n\n  const mode = useUserInteractionMode();\n  const [value, setValueState] = useEnsuredState({\n    value: propValue,\n    setValue: propSetValue,\n    defaultValue: getDefaultValue({\n      query: propQuery,\n      filter,\n      multiselect: propMultiselect,\n      defaultQuery,\n      defaultValue,\n      options: values,\n      getOptionLabel,\n    }),\n  });\n  const multiselect =\n    propMultiselect ??\n    (!!value && typeof value === \"object\" && \"length\" in value);\n  let updateQueryOnSelect = propUpdateQueryOnSelect;\n  if (propUpdateQueryOnSelect === undefined) {\n    updateQueryOnSelect = multiselect ? \"clear\" : \"selected\";\n  }\n\n  const disableCloseOnSelect =\n    propDisableCloseOnSelect ?? (multiselect && checkboxes);\n\n  const [query, setQuery] = useEnsuredState({\n    name: \"query\",\n    value: propQuery,\n    setValue: propSetQuery,\n    defaultValue: getDefaultQuery({\n      value,\n      getOptionLabel,\n      defaultQuery,\n    }),\n  });\n  const setValue = useCallback(\n    (value: Option | null | readonly Option[]) => {\n      onValueChange(value);\n      setValueState(value);\n    },\n    [onValueChange, setValueState]\n  );\n\n  const combobox = useEditableCombobox<ComboboxEl, PopupEl>({\n    ...comboboxOptions,\n    multiselect,\n  });\n  const {\n    visible,\n    setVisible,\n    popupRef,\n    comboboxRef,\n    comboboxProps,\n    getMenuProps,\n  } = combobox;\n\n  // These refs are used to make it so that the options are not filtered until\n  // the user types a new query while the listbox is visible. The filtered\n  // options will be \"cached\" while:\n  // - the listbox is closing\n  // - the listbox is opening and:\n  //   - the user has not typed at least one letter\n  //   - the options have not changed\n  const entered = useRef(visible);\n  const initialQuery = useRef(\"\");\n  const prevAvailableOptions = useRef<readonly Option[] | null>(null);\n  const isQueryChange =\n    query && query !== initialQuery.current && entered.current;\n\n  let availableOptions = prevAvailableOptions.current || values;\n  if (\n    isQueryChange &&\n    filter !== noopAutocompleteFilter &&\n    !prevAvailableOptions.current\n  ) {\n    initialQuery.current = \"\";\n    availableOptions = filter({\n      list: values,\n      query,\n      extractor: getOptionLabel,\n    });\n  }\n\n  // This is probably overkill, but `filterSelected` will create a quick-lookup\n  // for all the selected values in a `Set` since it is much faster than\n  // `Array.includes()`. The lookup will only be re-created whenever the `value`\n  // changes or is uninitialized to prevent it being created each render as\n  // well.\n  //\n  // These optimizations only start mattering when there are around 5000 items\n  // selected...\n  const selectedOptions = useMemo(() => {\n    if (!filterSelected) {\n      return null;\n    }\n\n    let optionList: readonly Option[] = [];\n    if (isMultipleValues(value)) {\n      optionList = value;\n    } else if (value) {\n      optionList = [value];\n    }\n\n    return new Set(optionList);\n  }, [filterSelected, value]);\n\n  if (filterSelected && selectedOptions?.size) {\n    availableOptions = availableOptions.filter(\n      (option) => !selectedOptions.has(option)\n    );\n  }\n\n  return {\n    ...combobox,\n    value,\n    setValue,\n    query,\n    setQuery,\n    availableOptions,\n    multiselect,\n    comboboxProps: {\n      ...comboboxProps,\n      \"aria-autocomplete\": filter === noopAutocompleteFilter ? \"none\" : \"list\",\n      value: query,\n      onKeyDown(event) {\n        comboboxProps.onKeyDown(event);\n        if (!visible && event.key === \"Escape\") {\n          setQuery(\"\");\n        }\n      },\n      onBlur(event) {\n        onBlur(event);\n\n        if (allowAnyValue) {\n          return;\n        }\n\n        enforceSelectedValue({\n          value,\n          visible,\n          popupRef,\n          container: event.currentTarget.parentElement,\n          comboboxRef,\n          getOptionLabel,\n          availableOptions,\n          prevAvailableOptions,\n        });\n      },\n      onFocus(event) {\n        comboboxProps.onFocus(event);\n        event.currentTarget.select();\n      },\n      onChange(event) {\n        onChange(event);\n\n        const { value } = event.currentTarget;\n        setQuery(value);\n        if (!value && !multiselect) {\n          setValue(null);\n        }\n      },\n    },\n    getListboxProps(overrides) {\n      const {\n        ref,\n        onEnter,\n        onEntered,\n        onExited,\n        disableTransition,\n        ...listboxProps\n      } = getMenuProps(overrides);\n\n      let selectedIcon = propSelectedIcon;\n      let unselectedIcon = propUnselectedIcon;\n      let disableSelectedIcon = propDisableSelectedIcon;\n      if (multiselect && checkboxes) {\n        if (selectedIcon === undefined) {\n          selectedIcon = getIcon(\"checkboxChecked\");\n        }\n        if (unselectedIcon === undefined) {\n          unselectedIcon = getIcon(\"checkbox\");\n        }\n      } else if (disableSelectedIcon === undefined) {\n        disableSelectedIcon = true;\n      }\n\n      return {\n        selectedIcon,\n        unselectedIcon,\n        selectedIconAfter,\n        disableSelectedIcon,\n        ...listboxProps,\n        disableTransition,\n        onRequestClose() {\n          // Make it so clicking on the text field, clear button, dropdown\n          // button, etc does not close the listbox\n          if (\n            mode !== \"keyboard\" &&\n            comboboxRef.current?.parentElement?.contains(document.activeElement)\n          ) {\n            return;\n          }\n\n          listboxProps.onRequestClose();\n        },\n        nodeRef: ref,\n        value,\n        setValue(option) {\n          if (!disableCloseOnSelect) {\n            // this makes it so that the options are not filtered again while the\n            // listbox is closing after selecting a value\n            prevAvailableOptions.current = availableOptions;\n          }\n\n          if (value && typeof value === \"object\" && \"length\" in value) {\n            const nextValue = [...value];\n            const i = value.indexOf(option);\n            if (i === -1) {\n              nextValue.push(option);\n            } else {\n              nextValue.splice(i, 1);\n            }\n\n            setValue(nextValue);\n          } else {\n            setValue(option);\n          }\n\n          if (updateQueryOnSelect === \"as-is\") {\n            return;\n          }\n\n          const nextQuery =\n            updateQueryOnSelect === \"clear\" ? \"\" : getOptionLabel(option);\n          triggerManualChangeEvent(comboboxRef.current, nextQuery);\n        },\n        ...getTransitionCallbacks({\n          enter: true,\n          onEnter,\n          onEntered,\n          onEnterOnce: () => {\n            onOpen();\n\n            // when the listbox is opened, need to flag the entered state to show\n            // that new `query` values should be accepted. Also store the initial\n            // query.\n            entered.current = true;\n            initialQuery.current = query;\n          },\n          disableTransition,\n        }),\n        onExited() {\n          onExited();\n\n          // once the listbox has exited, reset any cached states so the next\n          // time the listbox is opened the filtering behaves the same\n          entered.current = false;\n          prevAvailableOptions.current = null;\n        },\n      };\n    },\n    getOptionLabel,\n    getOptionProps(options) {\n      const overrides = getOptionProps(options);\n\n      return {\n        ...overrides,\n        onClick: (event) => {\n          overrides?.onClick?.(event);\n          if (disableCloseOnSelect) {\n            event.stopPropagation();\n          }\n        },\n      };\n    },\n    getClearButtonProps(overrides) {\n      return {\n        ...overrides,\n        onClick(event) {\n          overrides?.onClick?.(event);\n          comboboxRef.current?.focus();\n\n          if (!multiselect) {\n            setValue(null);\n          }\n          triggerManualChangeEvent(comboboxRef.current, \"\");\n        },\n      };\n    },\n    getDropdownButtonProps(overrides) {\n      return {\n        \"aria-controls\": comboboxProps.id,\n        visible,\n        ...overrides,\n        onClick(event) {\n          overrides?.onClick?.(event);\n          comboboxRef.current?.focus();\n          if (visible) {\n            prevAvailableOptions.current = availableOptions;\n          }\n          setVisible((prev) => !prev);\n        },\n      };\n    },\n  };\n}\n"],"names":["useCallback","useMemo","useRef","useEditableCombobox","triggerManualChangeEvent","getIcon","useUserInteractionMode","getTransitionCallbacks","useEnsuredState","defaultAutocompleteExtractor","defaultAutocompleteFilter","defaultAutocompleteGetOptionProps","noopAutocompleteFilter","enforceSelectedValue","getDefaultQuery","getDefaultValue","isMultipleValues","noop","useAutocomplete","options","value","propValue","setValue","propSetValue","defaultValue","onValueChange","query","propQuery","setQuery","propSetQuery","defaultQuery","values","getOptionLabel","getOptionProps","onBlur","onChange","onOpen","filter","filterSelected","allowAnyValue","multiselect","propMultiselect","checkboxes","selectedIcon","propSelectedIcon","unselectedIcon","propUnselectedIcon","selectedIconAfter","disableSelectedIcon","propDisableSelectedIcon","updateQueryOnSelect","propUpdateQueryOnSelect","disableCloseOnSelect","propDisableCloseOnSelect","comboboxOptions","mode","setValueState","undefined","name","combobox","visible","setVisible","popupRef","comboboxRef","comboboxProps","getMenuProps","entered","initialQuery","prevAvailableOptions","isQueryChange","current","availableOptions","list","extractor","selectedOptions","optionList","Set","size","option","has","onKeyDown","event","key","container","currentTarget","parentElement","onFocus","select","getListboxProps","overrides","ref","onEnter","onEntered","onExited","disableTransition","listboxProps","onRequestClose","contains","document","activeElement","nodeRef","nextValue","i","indexOf","push","splice","nextQuery","enter","onEnterOnce","onClick","stopPropagation","getClearButtonProps","focus","getDropdownButtonProps","id","prev"],"mappings":"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"}

package/dist/autocomplete/utils.js

@@ -5,7 +5,7 @@ import { noopAutocompleteFilter } from "./defaults.js";
  * @internal
  */ export function getDefaultValue(options) {
     const { query, filter, multiselect, defaultQuery, defaultValue, options: values, getOptionLabel } = options;
-    if (typeof defaultValue !== "undefined") {
+    if (defaultValue !== undefined) {
         return defaultValue;
     }
     // do not support determining the default value for a multiselect
@@ -22,7 +22,7 @@ import { noopAutocompleteFilter } from "./defaults.js";
         if (query) {
             q = query;
         } else if (defaultQuery) {
-            q = defaultQuery instanceof Function ? defaultQuery() : defaultQuery;
+            q = typeof defaultQuery === "function" ? defaultQuery() : defaultQuery;
         }
         if (!q) {
             return null;
@@ -81,7 +81,7 @@ import { noopAutocompleteFilter } from "./defaults.js";
     if (!container) {
         return;
     }
-    window.requestAnimationFrame(()=>{
+    globalThis.requestAnimationFrame(()=>{
         if (container.contains(document.activeElement) || popupRef.current?.contains(document.activeElement)) {
             return;
         }

package/dist/autocomplete/utils.js.map

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

package/dist/avatar/_avatar.scss

@@ -165,7 +165,8 @@ $variables: (
 /// @param {Boolean} disable-prefix [false] - Set to `true` to disable the
 /// `.rmd-avatar--` prefix for the class name
 @mixin custom-color($name, $color, $background-color, $disable-prefix: false) {
-  $class-name: if($disable-prefix, $name, ".rmd-avatar--#{$name}");
+  // prettier-ignore
+  $class-name: if(sass($disable-prefix): $name; else: ".rmd-avatar--#{$name}");
 
   #{$class-name} {
     @include set-var(background-color, $background-color);

package/dist/box/styles.js

@@ -114,14 +114,14 @@ const styles = bem("rmd-box");
         value
     });
     if (value && typeof value === "object") {
-        BREAKPOINTS.forEach((media)=>{
+        for (const media of BREAKPOINTS){
             style = applyBoxVar({
                 type,
                 style,
                 media,
                 value: value[media]
             });
-        });
+        }
     }
     return style;
 }

package/dist/box/styles.js.map

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

package/dist/button/AsyncButton.js

@@ -146,7 +146,7 @@ const noop = ()=>{
         onClick: handleAsync((event)=>Promise.resolve(onClick(event))),
         children: [
             beforeAddon,
-            loading && typeof loadingChildren !== "undefined" ? loadingChildren : children,
+            loading && loadingChildren !== undefined ? loadingChildren : children,
             afterAddon,
             overlayElement
         ]