@react-md/core 6.5.0 → 6.5.2

package/dist/_utils.scss

@@ -142,6 +142,9 @@ $_swappable-properties: text-align;
 /// @returns {String} the name to be used in a `var()`
 @function get-var-name($variables, $name, $group) {
   @if $group == icon {
+    @if $name == symbol-fill {
+      @return --rmd-symbol-fill;
+    }
     @if $name == symbol-grade {
       @return --rmd-symbol-grad;
     }
@@ -360,8 +363,9 @@ $_swappable-properties: text-align;
   $parent-selector: true
 ) {
   @if $css-modules {
-    $selector: ":global #{$selector} :local";
+    $selector: ":global(#{$selector})";
   }
+
   @if $parent-selector {
     $selector: "#{$selector} &";
   }

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/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/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
         ]

package/dist/button/AsyncButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/button/AsyncButton.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport { type MouseEvent, type ReactNode, forwardRef } from \"react\";\n\nimport { type BoxAlignItems } from \"../box/styles.js\";\nimport { overlay } from \"../overlay/styles.js\";\nimport {\n  CircularProgress,\n  type CircularProgressProps,\n} from \"../progress/CircularProgress.js\";\nimport {\n  LinearProgress,\n  type LinearProgressProps,\n} from \"../progress/LinearProgress.js\";\nimport { type ProgressTheme } from \"../progress/types.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useAsyncFunction } from \"../useAsyncFunction.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { Button, type ButtonProps } from \"./Button.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @since 6.0.0\n */\nexport type AsyncButtonLoadingType =\n  | \"circular-before\"\n  | \"circular-after\"\n  | \"circular-overlay\"\n  | \"linear-above\"\n  | \"linear-below\";\n\n/**\n * @since 6.0.0\n */\nexport interface AsyncButtonProps extends ButtonProps {\n  /**\n   * @see {@link progressAriaLabelledBy}\n   * @defaultValue `\"async-button\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * When this is defined and returns a `Promise`, the loading indicator will\n   * display until the promise has resolved.\n   *\n   * @defaultValue `() => {}`\n   */\n  onClick?: (event: MouseEvent<HTMLButtonElement>) => Promise<void> | void;\n\n  /**\n   * Set this to `true` to manually display a loading spinner.\n   *\n   * @defaultValue `false`\n   */\n  loading?: boolean;\n\n  /**\n   * - `\"circular-overlay\"` - Covers and hides the button content with a\n   *   centered circular progress\n   * - `\"circular-before\"` - Renders a circular progress bar before the button\n   *   content which is useful when rendering an icon before the button text.\n   *   See {@link beforeAddon} as well.\n   * - `\"circular-after\"` - Renders a circular progress bar before the button\n   *   content which is useful when rendering an icon after the button text.\n   *   See {@link afterAddon} as well.\n   * - `\"linear-above\"` - Renders a linear progress bar at the top of the button\n   *   while still displaying the button contents. Usually looks good for\n   *   outlined buttons.\n   * - `\"linear-below\"` - Renders a linear progress bar at the bottom of the\n   *   button while still displaying the button contents. Usually looks good for\n   *   outlined buttons.\n   *\n   * @defaultValue `\"circular-overlay\"`\n   */\n  loadingType?: AsyncButtonLoadingType;\n\n  /**\n   * Optional content to display instead of the default `children` while\n   * loading.\n   */\n  loadingChildren?: ReactNode;\n\n  /**\n   * Set this to `true` to use the `disabled` theme while loading.\n   *\n   * @defaultValue `false`\n   */\n  loadingDisabledTheme?: boolean;\n\n  /**\n   * This should be used when the {@link loadingType} is set to\n   * `\"circular-before\"`, an icon should appear before the other content in\n   * the button, and the loading indicator should replace the icon.\n   */\n  beforeAddon?: ReactNode;\n\n  /**\n   * This should be used when the {@link loadingType} is set to\n   * `\"circular-after\"`, an icon should appear before the other content in\n   * the button, and the loading indicator should replace the icon.\n   */\n  afterAddon?: ReactNode;\n\n  /**\n   * An optional label to provide to the progressbar.\n   *\n   * @see {@link progressAriaLabelledBy}\n   */\n  progressAriaLabel?: string;\n\n  /**\n   * @see {@link id}\n   * @defaultValue `id`\n   */\n  progressAriaLabelledBy?: string;\n\n  /**\n   * Any additional props to pass to the `CircularProgress` bar when the\n   * {@link loadingType} is one of the circular types.\n   */\n  linearProgressProps?: PropsWithRef<LinearProgressProps>;\n\n  /**\n   * Any additional props to pass to the `LinearProgress` bar when the\n   * {@link loadingType} is one of the linear types.\n   */\n  circularProgressProps?: PropsWithRef<CircularProgressProps>;\n}\n\n/**\n * **Client Component**\n *\n * The async button can be used to render a loading indicator within a button\n * during an async task. The loading spinner can be shown either by enabling the\n * `loading` prop or returning a promise from the `onClick` event which will\n * continue to show the loading indicator until the promise has been resolved.\n *\n * @example Async onClick\n * ```tsx\n * import { AsyncButton } from \"@react-md/core/button/AsyncButton\";\n * import { useState, type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const [data, setData] = useState(null);\n *   return (\n *     <AsyncButton\n *       type=\"submit\"\n *       onClick={async () => {\n *         const response = await fetch(\"/my-api\");\n *         const json = await response.json();\n *         setData(json);\n *       }}\n *     >\n *       Submit\n *     </AsyncButton>\n *   );\n * }\n * ```\n *\n * @example Manual Loading State\n * ```tsx\n * import { AsyncButton } from \"@react-md/core/button/AsyncButton\";\n * import { useMutation } from \"@tanstack/query\";\n * import { useState, type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { isLoading, mutate } = useMutation({\n *     mutationFn: (newTodo) => fetch('/todos', {\n *       method: \"POST\",\n *       body: JSON.stringify(newTodo),\n *     }),\n *   });\n *\n *   return (\n *     <AsyncButton\n *       type=\"submit\"\n *       loading={isLoading}\n *       onClick={() => {\n *         mutate({ id: Date.now(), title: \"Create example\" });\n *       }}\n *     >\n *       Create Todo\n *     </AsyncButton>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/button#async-button | AsyncButton Demos}\n * @since 6.0.0\n */\nexport const AsyncButton = forwardRef<HTMLButtonElement, AsyncButtonProps>(\n  function AsyncButton(props, ref) {\n    const {\n      id: propId,\n      onClick = noop,\n      children,\n      floating = null,\n      theme = floating ? \"secondary\" : \"clear\",\n      themeType = floating ? \"contained\" : \"flat\",\n      buttonType = floating ? \"icon\" : \"text\",\n      className,\n      disabled,\n      loading: propLoading = false,\n      loadingType = \"circular-overlay\",\n      loadingChildren,\n      loadingDisabledTheme = false,\n      afterAddon: propAfterAddon,\n      beforeAddon: propBeforeAddon,\n      linearProgressProps,\n      circularProgressProps,\n      progressAriaLabel,\n      progressAriaLabelledBy: propProgressAriaLabelledBy,\n      ...remaining\n    } = props;\n    const id = useEnsuredId(propId, \"async-button\");\n    const { handleAsync, pending } = useAsyncFunction({ disabled });\n    const loading = pending || propLoading;\n\n    let progressTheme: ProgressTheme = \"current-color\";\n    if (theme === \"clear\" || theme === \"disabled\") {\n      progressTheme = \"primary\";\n    }\n\n    let progressAriaLabelledBy = propProgressAriaLabelledBy;\n    if (\n      !progressAriaLabel &&\n      !linearProgressProps?.[\"aria-label\"] &&\n      !linearProgressProps?.[\"aria-labelledby\"] &&\n      !circularProgressProps?.[\"aria-label\"] &&\n      !circularProgressProps?.[\"aria-labelledby\"]\n    ) {\n      progressAriaLabelledBy = id;\n    }\n\n    const progress = loadingType.includes(\"linear\") ? (\n      <LinearProgress\n        aria-label={progressAriaLabel}\n        aria-labelledby={progressAriaLabelledBy as string}\n        {...linearProgressProps}\n        theme={progressTheme}\n      />\n    ) : (\n      <CircularProgress\n        aria-label={progressAriaLabel}\n        aria-labelledby={progressAriaLabelledBy as string}\n        {...circularProgressProps}\n        theme={progressTheme}\n      />\n    );\n\n    let afterAddon = propAfterAddon;\n    let beforeAddon = propBeforeAddon;\n    let overlayElement: ReactNode;\n    let isOverlayCover = false;\n    switch (loadingType) {\n      case \"circular-before\":\n        beforeAddon = loading ? progress : propBeforeAddon;\n        break;\n      case \"circular-after\":\n        afterAddon = loading ? progress : propAfterAddon;\n        break;\n      case \"circular-overlay\":\n      case \"linear-above\":\n      case \"linear-below\": {\n        let alignItems: BoxAlignItems = \"center\";\n        if (loadingType === \"linear-above\") {\n          alignItems = \"start\";\n        } else if (loadingType === \"linear-below\") {\n          alignItems = \"end\";\n        } else {\n          isOverlayCover = true;\n        }\n\n        overlayElement = loading && (\n          <span\n            className={overlay({\n              active: true,\n              visible: true,\n              absolute: true,\n              align: alignItems,\n            })}\n          >\n            {progress}\n          </span>\n        );\n        break;\n      }\n    }\n\n    return (\n      <Button\n        {...remaining}\n        aria-disabled={loading || undefined}\n        id={id}\n        ref={ref}\n        disabled={disabled}\n        floating={floating}\n        className={cnb(\n          \"rmd-button--async\",\n          loading && isOverlayCover && \"rmd-button--async-overlay\",\n          className\n        )}\n        theme={loading && loadingDisabledTheme ? \"disabled\" : theme}\n        themeType={themeType}\n        buttonType={buttonType}\n        onClick={handleAsync((event) => Promise.resolve(onClick(event)))}\n      >\n        {beforeAddon}\n        {loading && typeof loadingChildren !== \"undefined\"\n          ? loadingChildren\n          : children}\n        {afterAddon}\n        {overlayElement}\n      </Button>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","overlay","CircularProgress","LinearProgress","useAsyncFunction","useEnsuredId","Button","noop","AsyncButton","props","ref","id","propId","onClick","children","floating","theme","themeType","buttonType","className","disabled","loading","propLoading","loadingType","loadingChildren","loadingDisabledTheme","afterAddon","propAfterAddon","beforeAddon","propBeforeAddon","linearProgressProps","circularProgressProps","progressAriaLabel","progressAriaLabelledBy","propProgressAriaLabelledBy","remaining","handleAsync","pending","progressTheme","progress","includes","aria-label","aria-labelledby","overlayElement","isOverlayCover","alignItems","span","active","visible","absolute","align","aria-disabled","undefined","event","Promise","resolve"],"mappings":"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"}
+{"version":3,"sources":["../../src/button/AsyncButton.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport { type MouseEvent, type ReactNode, forwardRef } from \"react\";\n\nimport { type BoxAlignItems } from \"../box/styles.js\";\nimport { overlay } from \"../overlay/styles.js\";\nimport {\n  CircularProgress,\n  type CircularProgressProps,\n} from \"../progress/CircularProgress.js\";\nimport {\n  LinearProgress,\n  type LinearProgressProps,\n} from \"../progress/LinearProgress.js\";\nimport { type ProgressTheme } from \"../progress/types.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useAsyncFunction } from \"../useAsyncFunction.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { Button, type ButtonProps } from \"./Button.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @since 6.0.0\n */\nexport type AsyncButtonLoadingType =\n  | \"circular-before\"\n  | \"circular-after\"\n  | \"circular-overlay\"\n  | \"linear-above\"\n  | \"linear-below\";\n\n/**\n * @since 6.0.0\n */\nexport interface AsyncButtonProps extends ButtonProps {\n  /**\n   * @see {@link progressAriaLabelledBy}\n   * @defaultValue `\"async-button\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * When this is defined and returns a `Promise`, the loading indicator will\n   * display until the promise has resolved.\n   *\n   * @defaultValue `() => {}`\n   */\n  onClick?: (event: MouseEvent<HTMLButtonElement>) => Promise<void> | void;\n\n  /**\n   * Set this to `true` to manually display a loading spinner.\n   *\n   * @defaultValue `false`\n   */\n  loading?: boolean;\n\n  /**\n   * - `\"circular-overlay\"` - Covers and hides the button content with a\n   *   centered circular progress\n   * - `\"circular-before\"` - Renders a circular progress bar before the button\n   *   content which is useful when rendering an icon before the button text.\n   *   See {@link beforeAddon} as well.\n   * - `\"circular-after\"` - Renders a circular progress bar before the button\n   *   content which is useful when rendering an icon after the button text.\n   *   See {@link afterAddon} as well.\n   * - `\"linear-above\"` - Renders a linear progress bar at the top of the button\n   *   while still displaying the button contents. Usually looks good for\n   *   outlined buttons.\n   * - `\"linear-below\"` - Renders a linear progress bar at the bottom of the\n   *   button while still displaying the button contents. Usually looks good for\n   *   outlined buttons.\n   *\n   * @defaultValue `\"circular-overlay\"`\n   */\n  loadingType?: AsyncButtonLoadingType;\n\n  /**\n   * Optional content to display instead of the default `children` while\n   * loading.\n   */\n  loadingChildren?: ReactNode;\n\n  /**\n   * Set this to `true` to use the `disabled` theme while loading.\n   *\n   * @defaultValue `false`\n   */\n  loadingDisabledTheme?: boolean;\n\n  /**\n   * This should be used when the {@link loadingType} is set to\n   * `\"circular-before\"`, an icon should appear before the other content in\n   * the button, and the loading indicator should replace the icon.\n   */\n  beforeAddon?: ReactNode;\n\n  /**\n   * This should be used when the {@link loadingType} is set to\n   * `\"circular-after\"`, an icon should appear before the other content in\n   * the button, and the loading indicator should replace the icon.\n   */\n  afterAddon?: ReactNode;\n\n  /**\n   * An optional label to provide to the progressbar.\n   *\n   * @see {@link progressAriaLabelledBy}\n   */\n  progressAriaLabel?: string;\n\n  /**\n   * @see {@link id}\n   * @defaultValue `id`\n   */\n  progressAriaLabelledBy?: string;\n\n  /**\n   * Any additional props to pass to the `CircularProgress` bar when the\n   * {@link loadingType} is one of the circular types.\n   */\n  linearProgressProps?: PropsWithRef<LinearProgressProps>;\n\n  /**\n   * Any additional props to pass to the `LinearProgress` bar when the\n   * {@link loadingType} is one of the linear types.\n   */\n  circularProgressProps?: PropsWithRef<CircularProgressProps>;\n}\n\n/**\n * **Client Component**\n *\n * The async button can be used to render a loading indicator within a button\n * during an async task. The loading spinner can be shown either by enabling the\n * `loading` prop or returning a promise from the `onClick` event which will\n * continue to show the loading indicator until the promise has been resolved.\n *\n * @example Async onClick\n * ```tsx\n * import { AsyncButton } from \"@react-md/core/button/AsyncButton\";\n * import { useState, type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const [data, setData] = useState(null);\n *   return (\n *     <AsyncButton\n *       type=\"submit\"\n *       onClick={async () => {\n *         const response = await fetch(\"/my-api\");\n *         const json = await response.json();\n *         setData(json);\n *       }}\n *     >\n *       Submit\n *     </AsyncButton>\n *   );\n * }\n * ```\n *\n * @example Manual Loading State\n * ```tsx\n * import { AsyncButton } from \"@react-md/core/button/AsyncButton\";\n * import { useMutation } from \"@tanstack/query\";\n * import { useState, type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { isLoading, mutate } = useMutation({\n *     mutationFn: (newTodo) => fetch('/todos', {\n *       method: \"POST\",\n *       body: JSON.stringify(newTodo),\n *     }),\n *   });\n *\n *   return (\n *     <AsyncButton\n *       type=\"submit\"\n *       loading={isLoading}\n *       onClick={() => {\n *         mutate({ id: Date.now(), title: \"Create example\" });\n *       }}\n *     >\n *       Create Todo\n *     </AsyncButton>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/button#async-button | AsyncButton Demos}\n * @since 6.0.0\n */\nexport const AsyncButton = forwardRef<HTMLButtonElement, AsyncButtonProps>(\n  function AsyncButton(props, ref) {\n    const {\n      id: propId,\n      onClick = noop,\n      children,\n      floating = null,\n      theme = floating ? \"secondary\" : \"clear\",\n      themeType = floating ? \"contained\" : \"flat\",\n      buttonType = floating ? \"icon\" : \"text\",\n      className,\n      disabled,\n      loading: propLoading = false,\n      loadingType = \"circular-overlay\",\n      loadingChildren,\n      loadingDisabledTheme = false,\n      afterAddon: propAfterAddon,\n      beforeAddon: propBeforeAddon,\n      linearProgressProps,\n      circularProgressProps,\n      progressAriaLabel,\n      progressAriaLabelledBy: propProgressAriaLabelledBy,\n      ...remaining\n    } = props;\n    const id = useEnsuredId(propId, \"async-button\");\n    const { handleAsync, pending } = useAsyncFunction({ disabled });\n    const loading = pending || propLoading;\n\n    let progressTheme: ProgressTheme = \"current-color\";\n    if (theme === \"clear\" || theme === \"disabled\") {\n      progressTheme = \"primary\";\n    }\n\n    let progressAriaLabelledBy = propProgressAriaLabelledBy;\n    if (\n      !progressAriaLabel &&\n      !linearProgressProps?.[\"aria-label\"] &&\n      !linearProgressProps?.[\"aria-labelledby\"] &&\n      !circularProgressProps?.[\"aria-label\"] &&\n      !circularProgressProps?.[\"aria-labelledby\"]\n    ) {\n      progressAriaLabelledBy = id;\n    }\n\n    const progress = loadingType.includes(\"linear\") ? (\n      <LinearProgress\n        aria-label={progressAriaLabel}\n        aria-labelledby={progressAriaLabelledBy as string}\n        {...linearProgressProps}\n        theme={progressTheme}\n      />\n    ) : (\n      <CircularProgress\n        aria-label={progressAriaLabel}\n        aria-labelledby={progressAriaLabelledBy as string}\n        {...circularProgressProps}\n        theme={progressTheme}\n      />\n    );\n\n    let afterAddon = propAfterAddon;\n    let beforeAddon = propBeforeAddon;\n    let overlayElement: ReactNode;\n    let isOverlayCover = false;\n    switch (loadingType) {\n      case \"circular-before\":\n        beforeAddon = loading ? progress : propBeforeAddon;\n        break;\n      case \"circular-after\":\n        afterAddon = loading ? progress : propAfterAddon;\n        break;\n      case \"circular-overlay\":\n      case \"linear-above\":\n      case \"linear-below\": {\n        let alignItems: BoxAlignItems = \"center\";\n        if (loadingType === \"linear-above\") {\n          alignItems = \"start\";\n        } else if (loadingType === \"linear-below\") {\n          alignItems = \"end\";\n        } else {\n          isOverlayCover = true;\n        }\n\n        overlayElement = loading && (\n          <span\n            className={overlay({\n              active: true,\n              visible: true,\n              absolute: true,\n              align: alignItems,\n            })}\n          >\n            {progress}\n          </span>\n        );\n        break;\n      }\n    }\n\n    return (\n      <Button\n        {...remaining}\n        aria-disabled={loading || undefined}\n        id={id}\n        ref={ref}\n        disabled={disabled}\n        floating={floating}\n        className={cnb(\n          \"rmd-button--async\",\n          loading && isOverlayCover && \"rmd-button--async-overlay\",\n          className\n        )}\n        theme={loading && loadingDisabledTheme ? \"disabled\" : theme}\n        themeType={themeType}\n        buttonType={buttonType}\n        onClick={handleAsync((event) => Promise.resolve(onClick(event)))}\n      >\n        {beforeAddon}\n        {loading && loadingChildren !== undefined ? loadingChildren : children}\n        {afterAddon}\n        {overlayElement}\n      </Button>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","overlay","CircularProgress","LinearProgress","useAsyncFunction","useEnsuredId","Button","noop","AsyncButton","props","ref","id","propId","onClick","children","floating","theme","themeType","buttonType","className","disabled","loading","propLoading","loadingType","loadingChildren","loadingDisabledTheme","afterAddon","propAfterAddon","beforeAddon","propBeforeAddon","linearProgressProps","circularProgressProps","progressAriaLabel","progressAriaLabelledBy","propProgressAriaLabelledBy","remaining","handleAsync","pending","progressTheme","progress","includes","aria-label","aria-labelledby","overlayElement","isOverlayCover","alignItems","span","active","visible","absolute","align","aria-disabled","undefined","event","Promise","resolve"],"mappings":"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"}

package/dist/chip/Chip.js

@@ -78,7 +78,7 @@ import { chip, chipContent } from "./styles.js";
     let leftAddon = propLeftAddon;
     let rightAddon = propRightAddon;
     const selectedIconNode = getIcon("selected", propSelectedIcon);
-    const isTransitionable = !selectedThemed && typeof selected === "boolean" && typeof (selectedIconAfter ? propRightAddon : propLeftAddon) === "undefined";
+    const isTransitionable = !selectedThemed && typeof selected === "boolean" && (selectedIconAfter ? propRightAddon : propLeftAddon) === undefined;
     const selectedIcon = useMaxWidthTransition({
         element: selectedIconNode,
         transitionIn: !!selected,

package/dist/chip/Chip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/chip/Chip.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport {\n  type ButtonHTMLAttributes,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\n\nimport { type BackgroundColor } from \"../cssUtils.js\";\nimport { getIcon } from \"../icon/config.js\";\nimport { type ComponentWithRippleProps } from \"../interaction/types.js\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { useHigherContrastChildren } from \"../interaction/useHigherContrastChildren.js\";\nimport {\n  type BaseMaxWidthTransitionOptions,\n  useMaxWidthTransition,\n} from \"../transition/useMaxWidthTransition.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { type ChipTheme, chip, chipContent } from \"./styles.js\";\n\n/**\n * @since 6.0.0 Renamed the `noninteractive` prop to\n * `noninteractable`.\n * @since 6.3.1 Extends BaseMaxWidthTransitionOptions for CSSProperties module\n * augmentation.\n */\nexport interface ChipProps\n  extends\n    ButtonHTMLAttributes<HTMLButtonElement>,\n    BaseMaxWidthTransitionOptions,\n    ComponentWithRippleProps {\n  /**\n   * @defaultValue `\"solid\"`\n   */\n  theme?: ChipTheme;\n\n  /**\n   * Set this to `true` if the chip should gain additional box shadow while the\n   * user is pressing down on the chip.\n   *\n   * @defaultValue `false`\n   */\n  raisable?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n\n  /**\n   * When this is a boolean, a selected icon will be displayed before the\n   * `children` and appear/disappear when `true`/`false`.\n   *\n   * @see {@link selectedIcon}\n   * @see {@link selectedIconAfter}\n   * @see {@link selectedThemed}\n   */\n  selected?: boolean;\n\n  /**\n   * Set this to `true` if the chip should change background color while\n   * {@link selected} instead of displaying an icon. The default background\n   * color is a lighter swatch of the theme primary color.\n   *\n   * @defaultValue `false`\n   */\n  selectedThemed?: boolean;\n\n  /**\n   * An optional className to provide only while {@link selected} is `true`.\n   */\n  selectedClassName?: string;\n\n  /**\n   * This will be ignored if {@link selected} is `undefined`.\n   *\n   * @defaultValue `getIcon(\"selected\")`\n   */\n  selectedIcon?: ReactNode;\n\n  /**\n   * Set this to `true` if the {@link selectedIcon} should display as the\n   * {@link rightAddon} instead of the {@link leftAddon}.\n   *\n   * @defaultValue `false`\n   * @since 6.0.0\n   */\n  selectedIconAfter?: boolean;\n\n  /**\n   * Set this to `true` if the {@link selectedIcon} should not animate and\n   * instead apply `display: none`\n   *\n   * @defaultValue `false`\n   */\n  disableIconTransition?: boolean;\n\n  /**\n   * Set this to `true` to render the chip as a `<span>` instead of a button.\n   *\n   * @since 2.6.0\n   * @since 6.0.0 Renamed from `noninteractable`\n   * @defaultValue `false`\n   */\n  noninteractive?: boolean;\n\n  /**\n   * An optional background color theme to use.\n   *\n   * @since 6.0.0\n   */\n  backgroundColor?: BackgroundColor;\n\n  /**\n   * An optional icon, avatar, circular progress, or custom component to render\n   * before the `children`. This will remove some of the leading horizontal\n   * padding on the chip as well.\n   */\n  leftAddon?: ReactNode;\n\n  /**\n   * An optional icon, avatar, circular progress, or custom component to render\n   * after the `children`. This will remove some of the trailing horizontal\n   * padding on the chip as well.\n   */\n  rightAddon?: ReactNode;\n\n  /**\n   * Set this to true if the `children` should not be wrapped in a span to apply\n   * the {@link chipContent} styles which allow for shrinking text and\n   * truncating text with ellipsis.\n   *\n   * @defaultValue `false`\n   */\n  disableContentWrap?: boolean;\n\n  /**\n   * This will be ignored if {@link disableContentWrap} is `true`.\n   *\n   * @since 6.0.0\n   */\n  contentProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>>;\n\n  /**\n   * This will be ignored if {@link disableContentWrap} is `true`.\n   */\n  contentStyle?: CSSProperties;\n\n  /**\n   * This will be ignored if {@link disableContentWrap} is `true`.\n   */\n  contentClassName?: string;\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { Chip } from \"@react-md/core/chip/Chip\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return <Chip>Content</Chip>;\n * }\n * ```\n *\n * @example Outlined Example\n * ```tsx\n * import { Chip } from \"@react-md/core/chip/Chip\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return <Chip theme=\"outline\">Content</Chip>;\n * }\n * ```\n *\n * @example Addons Example\n * ```tsx\n * import { Avatar } from \"@react-md/core/avatar/Avatar\";\n * import { Chip } from \"@react-md/core/chip/Chip\";\n * import AddCircleIcon from \"@react-md/material-icons/AddCircleIcon\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <Chip\n *       leftAddon={\n *         <Avatar>\n *           <img src=\"https://i.pravatar.cc/40?img=3\" alt=\"\" />\n *         </Avatar>\n *       }\n *       rightAddon={<AddCircleIcon />}\n *     >\n *       Chip\n *     </Chip>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/chip | Chip Demos}\n * @since 6.0.0 Renamed the `noninteractable` prop to\n * `noninteractive`.\n */\nexport const Chip = forwardRef<HTMLButtonElement, ChipProps>(\n  function Chip(props, ref) {\n    const {\n      \"aria-pressed\": ariaPressed,\n      theme = \"solid\",\n      className,\n      raisable = false,\n      disabled = false,\n      selected,\n      selectedThemed = false,\n      selectedClassName,\n      selectedIcon: propSelectedIcon,\n      selectedIconAfter = false,\n      backgroundColor,\n      noninteractive = false,\n      disableRipple,\n      disableIconTransition = false,\n      children: propChildren,\n      onClick,\n      onKeyDown,\n      onKeyUp,\n      onMouseDown,\n      onMouseUp,\n      onMouseLeave,\n      onDragStart,\n      onTouchStart,\n      onTouchEnd,\n      onTouchMove,\n      leftAddon: propLeftAddon,\n      rightAddon: propRightAddon,\n      contentProps,\n      contentStyle,\n      contentClassName,\n      disableContentWrap = false,\n      ...remaining\n    } = props;\n\n    let buttonProps: ButtonHTMLAttributes<HTMLButtonElement> | undefined;\n    if (!noninteractive) {\n      buttonProps = {\n        \"aria-pressed\": ariaPressed ?? (!!selected || undefined),\n        type: \"button\",\n        disabled,\n      };\n    }\n\n    let content = propChildren;\n    if (!disableContentWrap) {\n      content = (\n        <span\n          style={contentStyle}\n          {...contentProps}\n          className={cnb(\n            chipContent({ className: contentClassName }),\n            contentProps?.className\n          )}\n        >\n          {propChildren}\n        </span>\n      );\n    }\n\n    let leftAddon = propLeftAddon;\n    let rightAddon = propRightAddon;\n    const selectedIconNode = getIcon(\"selected\", propSelectedIcon);\n    const isTransitionable =\n      !selectedThemed &&\n      typeof selected === \"boolean\" &&\n      typeof (selectedIconAfter ? propRightAddon : propLeftAddon) ===\n        \"undefined\";\n    const selectedIcon = useMaxWidthTransition({\n      element: selectedIconNode,\n      transitionIn: !!selected,\n      disabled: !isTransitionable,\n      disableTransition: disableIconTransition,\n    });\n    if (isTransitionable) {\n      if (selectedIconAfter) {\n        rightAddon = selectedIcon;\n      } else {\n        leftAddon = selectedIcon;\n      }\n    }\n\n    const { pressed, pressedClassName, ripples, handlers } =\n      useElementInteraction({\n        mode: disableRipple ? \"none\" : undefined,\n        onClick,\n        onKeyDown,\n        onKeyUp,\n        onMouseDown,\n        onMouseUp,\n        onMouseLeave,\n        onDragStart,\n        onTouchStart,\n        onTouchEnd,\n        onTouchMove,\n        disabled: disabled || noninteractive,\n      });\n    const children = useHigherContrastChildren(content);\n    const Component = noninteractive ? \"span\" : \"button\";\n\n    return (\n      <Component\n        {...remaining}\n        {...buttonProps}\n        {...handlers}\n        className={chip({\n          className,\n          theme,\n          pressed: raisable && pressed,\n          disabled,\n          selected,\n          selectedThemed,\n          selectedClassName,\n          noninteractive,\n          backgroundColor,\n          pressedClassName,\n          leftAddon: !!leftAddon && (selectedIconAfter || selected !== false),\n          rightAddon:\n            !!rightAddon && (!selectedIconAfter || selected !== false),\n        })}\n        ref={ref}\n      >\n        {leftAddon}\n        {children}\n        {rightAddon}\n        {ripples}\n      </Component>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","getIcon","useElementInteraction","useHigherContrastChildren","useMaxWidthTransition","chip","chipContent","Chip","props","ref","ariaPressed","theme","className","raisable","disabled","selected","selectedThemed","selectedClassName","selectedIcon","propSelectedIcon","selectedIconAfter","backgroundColor","noninteractive","disableRipple","disableIconTransition","children","propChildren","onClick","onKeyDown","onKeyUp","onMouseDown","onMouseUp","onMouseLeave","onDragStart","onTouchStart","onTouchEnd","onTouchMove","leftAddon","propLeftAddon","rightAddon","propRightAddon","contentProps","contentStyle","contentClassName","disableContentWrap","remaining","buttonProps","undefined","type","content","span","style","selectedIconNode","isTransitionable","element","transitionIn","disableTransition","pressed","pressedClassName","ripples","handlers","mode","Component"],"mappings":"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"}
+{"version":3,"sources":["../../src/chip/Chip.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport {\n  type ButtonHTMLAttributes,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\n\nimport { type BackgroundColor } from \"../cssUtils.js\";\nimport { getIcon } from \"../icon/config.js\";\nimport { type ComponentWithRippleProps } from \"../interaction/types.js\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { useHigherContrastChildren } from \"../interaction/useHigherContrastChildren.js\";\nimport {\n  type BaseMaxWidthTransitionOptions,\n  useMaxWidthTransition,\n} from \"../transition/useMaxWidthTransition.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { type ChipTheme, chip, chipContent } from \"./styles.js\";\n\n/**\n * @since 6.0.0 Renamed the `noninteractive` prop to\n * `noninteractable`.\n * @since 6.3.1 Extends BaseMaxWidthTransitionOptions for CSSProperties module\n * augmentation.\n */\nexport interface ChipProps\n  extends\n    ButtonHTMLAttributes<HTMLButtonElement>,\n    BaseMaxWidthTransitionOptions,\n    ComponentWithRippleProps {\n  /**\n   * @defaultValue `\"solid\"`\n   */\n  theme?: ChipTheme;\n\n  /**\n   * Set this to `true` if the chip should gain additional box shadow while the\n   * user is pressing down on the chip.\n   *\n   * @defaultValue `false`\n   */\n  raisable?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n\n  /**\n   * When this is a boolean, a selected icon will be displayed before the\n   * `children` and appear/disappear when `true`/`false`.\n   *\n   * @see {@link selectedIcon}\n   * @see {@link selectedIconAfter}\n   * @see {@link selectedThemed}\n   */\n  selected?: boolean;\n\n  /**\n   * Set this to `true` if the chip should change background color while\n   * {@link selected} instead of displaying an icon. The default background\n   * color is a lighter swatch of the theme primary color.\n   *\n   * @defaultValue `false`\n   */\n  selectedThemed?: boolean;\n\n  /**\n   * An optional className to provide only while {@link selected} is `true`.\n   */\n  selectedClassName?: string;\n\n  /**\n   * This will be ignored if {@link selected} is `undefined`.\n   *\n   * @defaultValue `getIcon(\"selected\")`\n   */\n  selectedIcon?: ReactNode;\n\n  /**\n   * Set this to `true` if the {@link selectedIcon} should display as the\n   * {@link rightAddon} instead of the {@link leftAddon}.\n   *\n   * @defaultValue `false`\n   * @since 6.0.0\n   */\n  selectedIconAfter?: boolean;\n\n  /**\n   * Set this to `true` if the {@link selectedIcon} should not animate and\n   * instead apply `display: none`\n   *\n   * @defaultValue `false`\n   */\n  disableIconTransition?: boolean;\n\n  /**\n   * Set this to `true` to render the chip as a `<span>` instead of a button.\n   *\n   * @since 2.6.0\n   * @since 6.0.0 Renamed from `noninteractable`\n   * @defaultValue `false`\n   */\n  noninteractive?: boolean;\n\n  /**\n   * An optional background color theme to use.\n   *\n   * @since 6.0.0\n   */\n  backgroundColor?: BackgroundColor;\n\n  /**\n   * An optional icon, avatar, circular progress, or custom component to render\n   * before the `children`. This will remove some of the leading horizontal\n   * padding on the chip as well.\n   */\n  leftAddon?: ReactNode;\n\n  /**\n   * An optional icon, avatar, circular progress, or custom component to render\n   * after the `children`. This will remove some of the trailing horizontal\n   * padding on the chip as well.\n   */\n  rightAddon?: ReactNode;\n\n  /**\n   * Set this to true if the `children` should not be wrapped in a span to apply\n   * the {@link chipContent} styles which allow for shrinking text and\n   * truncating text with ellipsis.\n   *\n   * @defaultValue `false`\n   */\n  disableContentWrap?: boolean;\n\n  /**\n   * This will be ignored if {@link disableContentWrap} is `true`.\n   *\n   * @since 6.0.0\n   */\n  contentProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>>;\n\n  /**\n   * This will be ignored if {@link disableContentWrap} is `true`.\n   */\n  contentStyle?: CSSProperties;\n\n  /**\n   * This will be ignored if {@link disableContentWrap} is `true`.\n   */\n  contentClassName?: string;\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { Chip } from \"@react-md/core/chip/Chip\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return <Chip>Content</Chip>;\n * }\n * ```\n *\n * @example Outlined Example\n * ```tsx\n * import { Chip } from \"@react-md/core/chip/Chip\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return <Chip theme=\"outline\">Content</Chip>;\n * }\n * ```\n *\n * @example Addons Example\n * ```tsx\n * import { Avatar } from \"@react-md/core/avatar/Avatar\";\n * import { Chip } from \"@react-md/core/chip/Chip\";\n * import AddCircleIcon from \"@react-md/material-icons/AddCircleIcon\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <Chip\n *       leftAddon={\n *         <Avatar>\n *           <img src=\"https://i.pravatar.cc/40?img=3\" alt=\"\" />\n *         </Avatar>\n *       }\n *       rightAddon={<AddCircleIcon />}\n *     >\n *       Chip\n *     </Chip>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/chip | Chip Demos}\n * @since 6.0.0 Renamed the `noninteractable` prop to\n * `noninteractive`.\n */\nexport const Chip = forwardRef<HTMLButtonElement, ChipProps>(\n  function Chip(props, ref) {\n    const {\n      \"aria-pressed\": ariaPressed,\n      theme = \"solid\",\n      className,\n      raisable = false,\n      disabled = false,\n      selected,\n      selectedThemed = false,\n      selectedClassName,\n      selectedIcon: propSelectedIcon,\n      selectedIconAfter = false,\n      backgroundColor,\n      noninteractive = false,\n      disableRipple,\n      disableIconTransition = false,\n      children: propChildren,\n      onClick,\n      onKeyDown,\n      onKeyUp,\n      onMouseDown,\n      onMouseUp,\n      onMouseLeave,\n      onDragStart,\n      onTouchStart,\n      onTouchEnd,\n      onTouchMove,\n      leftAddon: propLeftAddon,\n      rightAddon: propRightAddon,\n      contentProps,\n      contentStyle,\n      contentClassName,\n      disableContentWrap = false,\n      ...remaining\n    } = props;\n\n    let buttonProps: ButtonHTMLAttributes<HTMLButtonElement> | undefined;\n    if (!noninteractive) {\n      buttonProps = {\n        \"aria-pressed\": ariaPressed ?? (!!selected || undefined),\n        type: \"button\",\n        disabled,\n      };\n    }\n\n    let content = propChildren;\n    if (!disableContentWrap) {\n      content = (\n        <span\n          style={contentStyle}\n          {...contentProps}\n          className={cnb(\n            chipContent({ className: contentClassName }),\n            contentProps?.className\n          )}\n        >\n          {propChildren}\n        </span>\n      );\n    }\n\n    let leftAddon = propLeftAddon;\n    let rightAddon = propRightAddon;\n    const selectedIconNode = getIcon(\"selected\", propSelectedIcon);\n    const isTransitionable =\n      !selectedThemed &&\n      typeof selected === \"boolean\" &&\n      (selectedIconAfter ? propRightAddon : propLeftAddon) === undefined;\n    const selectedIcon = useMaxWidthTransition({\n      element: selectedIconNode,\n      transitionIn: !!selected,\n      disabled: !isTransitionable,\n      disableTransition: disableIconTransition,\n    });\n    if (isTransitionable) {\n      if (selectedIconAfter) {\n        rightAddon = selectedIcon;\n      } else {\n        leftAddon = selectedIcon;\n      }\n    }\n\n    const { pressed, pressedClassName, ripples, handlers } =\n      useElementInteraction({\n        mode: disableRipple ? \"none\" : undefined,\n        onClick,\n        onKeyDown,\n        onKeyUp,\n        onMouseDown,\n        onMouseUp,\n        onMouseLeave,\n        onDragStart,\n        onTouchStart,\n        onTouchEnd,\n        onTouchMove,\n        disabled: disabled || noninteractive,\n      });\n    const children = useHigherContrastChildren(content);\n    const Component = noninteractive ? \"span\" : \"button\";\n\n    return (\n      <Component\n        {...remaining}\n        {...buttonProps}\n        {...handlers}\n        className={chip({\n          className,\n          theme,\n          pressed: raisable && pressed,\n          disabled,\n          selected,\n          selectedThemed,\n          selectedClassName,\n          noninteractive,\n          backgroundColor,\n          pressedClassName,\n          leftAddon: !!leftAddon && (selectedIconAfter || selected !== false),\n          rightAddon:\n            !!rightAddon && (!selectedIconAfter || selected !== false),\n        })}\n        ref={ref}\n      >\n        {leftAddon}\n        {children}\n        {rightAddon}\n        {ripples}\n      </Component>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","getIcon","useElementInteraction","useHigherContrastChildren","useMaxWidthTransition","chip","chipContent","Chip","props","ref","ariaPressed","theme","className","raisable","disabled","selected","selectedThemed","selectedClassName","selectedIcon","propSelectedIcon","selectedIconAfter","backgroundColor","noninteractive","disableRipple","disableIconTransition","children","propChildren","onClick","onKeyDown","onKeyUp","onMouseDown","onMouseUp","onMouseLeave","onDragStart","onTouchStart","onTouchEnd","onTouchMove","leftAddon","propLeftAddon","rightAddon","propRightAddon","contentProps","contentStyle","contentClassName","disableContentWrap","remaining","buttonProps","undefined","type","content","span","style","selectedIconNode","isTransitionable","element","transitionIn","disableTransition","pressed","pressedClassName","ripples","handlers","mode","Component"],"mappings":"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"}

package/dist/cssUtils.d.ts

@@ -80,20 +80,25 @@ export interface TextCssUtilsOptions {
      */
     textOverflow?: TextOverflow;
 }
+/**
+ * Set this to `true` to allow the content to only be visible for screen
+ * readers. Set this to `"focusable"` to allow the content to be visible to
+ * screen readers and once focused. Set this to `"phone"` to only render the
+ * content as screen reader only text on phones.
+ *
+ * @since 6.5.1
+ */
+export type SrOnlyBehavior = boolean | "focusable" | "phone";
 /**
  * @since 6.0.0
  */
 export interface CssUtilsOptions extends TextCssUtilsOptions {
     className?: string;
     /**
-     * Set this to `true` to allow the content to only be visible for screen
-     * readers. Set this to `"focusable"` to allow the content to be visible to
-     * screen readers and once focused. Set this to `"phone"` to only render the
-     * the content as screen reader only text on phones.
-     *
+     * @see {@link SrOnlyBehavior}
      * @defaultValue `false`
      */
-    srOnly?: boolean | "focusable" | "phone";
+    srOnly?: SrOnlyBehavior;
     /**
      * Set this to `"current-color"` to inherit the current text color or a
      * specific theme color as the outline `box-shadow`.