@react-md/core 1.0.0-next.19 → 1.0.0-next.20

package/dist/autocomplete/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/autocomplete/types.ts"],"sourcesContent":["import {\n  type AriaAttributes,\n  type ChangeEventHandler,\n  type Dispatch,\n  type FocusEventHandler,\n  type MouseEventHandler,\n  type ReactNode,\n  type Ref,\n} from \"react\";\nimport { type ButtonProps } from \"../button/Button.js\";\nimport { type ChipProps } from \"../chip/Chip.js\";\nimport {\n  type OptionProps,\n  type OptionSelectedIconProps,\n} from \"../form/Option.js\";\nimport { type TextFieldProps } from \"../form/TextField.js\";\nimport {\n  type ComboboxMenuProps,\n  type ComboboxVisibilityOptions,\n  type ConfigurableComboboxMenuProps,\n} from \"../form/useCombobox.js\";\nimport {\n  type EditableComboboxImplementation,\n  type EditableComboboxOptions,\n  type EditableComboboxWidgetProps,\n} from \"../form/useEditableCombobox.js\";\nimport { type EditableHTMLElement } from \"../form/utils.js\";\nimport { type IconRotatorProps } from \"../icon/IconRotator.js\";\nimport { type CircularProgressProps } from \"../progress/CircularProgress.js\";\nimport { type ProgressTheme } from \"../progress/types.js\";\nimport { type BaseSearchOptions } from \"../searching/types.js\";\nimport {\n  type PropsWithRef,\n  type TextExtractor,\n  type UseStateInitializer,\n} from \"../types.js\";\n\n/**\n * If a autocomplete value is one of these types, no additional code is required\n * to display a label in the input/chip for the autocomplete once the value has\n * been selected.\n *\n * - `\"some value\"` -&gt; `\"some value\"`\n * - `{ label: \"Hello, world\", value: 300 }` -&gt; `\"Hello, world!\"`\n *\n * @since 6.0.0\n */\nexport type AutocompleteLabeledOption = string | { label: string };\n\n/**\n * @since 6.0.0\n */\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\nexport type AutocompleteOption = AutocompleteLabeledOption | {};\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteFilterOptions<Option extends AutocompleteOption> = Pick<\n  Required<BaseSearchOptions<Option>>,\n  \"list\" | \"query\" | \"extractor\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteFilterFunction<Option extends AutocompleteOption> = (\n  options: AutocompleteFilterOptions<Option>\n) => readonly Option[];\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteGetOptionPropsOptions<\n  Option extends AutocompleteOption,\n> {\n  index: number;\n  query: string;\n  option: Option;\n  selected: boolean;\n  extractor: TextExtractor<Option>;\n}\n\n/**\n * This can be used to add additional props to each option.\n *\n * @example Simple Example\n * ```tsx\n * getOptionProps={({ option }) => {\n *   return {\n *     disabled: option === \"\",\n *     className: cnb(option === \"a\" && styles.blue),\n *     leftAddon: option === value && <CheckIcon />,\n *   };\n * }}\n * ```\n * @since 6.0.0\n */\nexport type AutocompleteGetOptionProps<Option extends AutocompleteOption> = (\n  options: AutocompleteGetOptionPropsOptions<Option>\n) => ConfigurableAutocompleteOptionProps | undefined;\n\n/**\n * This can be used to add additional props to each inline chip for multiselect\n * autocompletes.\n *\n * @example Simple Example\n * ```tsx\n * getChipProps={({ option, index }) => {\n *   return {\n *     disabled: index < 3,\n *     className: cnb(option === \"a\" && styles.blue)<\n *   };\n * }}\n * ```\n * @since 6.0.0\n */\nexport type AutocompleteGetChipProps<Option extends AutocompleteOption> = (\n  options: Omit<AutocompleteGetOptionPropsOptions<Option>, \"selected\">\n) => Partial<AutocompleteChipProps> | undefined;\n\n/**\n * If the list of options contain an object that doesn't have a\n * `label: string`, this prop must be provided to extract a string to display\n * in the text field once selected.\n *\n * @example No Getter Required\n * ```tsx\n * const options1 = ['a', 'b', 'c', 'd'];\n * const options2 = [{ label: 'a' }, { label: 'b' }, { label: 'c' }, { label: 'd' }];\n *\n * <Autocomplete options={options1} />\n * <Autocomplete options={options2} />\n * ```\n *\n * @example Getter Required\n * ```tsx\n * const options = [\n *   {\n *     name: \"Alaska\",\n *     abbr: \"AK\",\n *   },\n *   {\n *     name: \"Arizona\",\n *     abbr: \"AZ\",\n *   }\n * ];\n *\n * <Autocomplete options={options} getOptionLabel={(state) => state.name} />\n * ```\n *\n * @defaultValue `defaultAutocompleteExtractor`\n * @since 6.0.0\n */\nexport type AutocompleteGetOptionLabel<Option extends AutocompleteOption> = (\n  option: Option\n) => string;\n\n/**\n * @since 6.0.0\n */\nexport type ConfigurableAutocompleteOptionProps = Partial<\n  Omit<OptionProps, \"role\" | \"value\">\n>;\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteControlledValue<T> {\n  value: T;\n  setValue: Dispatch<T>;\n  defaultValue?: never;\n  onValueChange?: never;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteUncontrolledValue<T> {\n  value?: never;\n  setValue?: never;\n  defaultValue?: UseStateInitializer<T>;\n\n  /**\n   * This prop should be used when some action should occur whenever the value\n   * changes, but is not required to be stored in state. For all other cases, it\n   * is recommended to control the `value` instead of using this prop.\n   *\n   * @defaultValue `() => {}`\n   */\n  onValueChange?: (value: T) => void;\n}\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteValue<T> =\n  | AutocompleteControlledValue<T>\n  | AutocompleteUncontrolledValue<T>;\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteControlledQuery {\n  query: string;\n  setQuery: Dispatch<string>;\n  defaultQuery?: never;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteUncontrolledQuery {\n  query?: never;\n  setQuery?: never;\n  defaultQuery?: UseStateInitializer<string>;\n}\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteQuery =\n  | AutocompleteControlledQuery\n  | AutocompleteUncontrolledQuery;\n\n/**\n * This allows the `query` to be updated whenever a new value has been selected.\n *\n * - `\"clear\"` - clears the `query`\n * - `\"selected\"` - sets the \tquery\t to the selected value's label\n * - `\"as-is\"` - doesn't change the `query`\n *\n * @defaultValue `(multiselect || Array.isArray(value ?? defaultValue)) ? \"clear\" : \"as-is\"`\n * @since 6.0.0\n */\nexport type AutocompleteUpdateQueryOnSelect = \"clear\" | \"selected\" | \"as-is\";\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteUnknownQueryAndValueOptions<\n  Option extends AutocompleteOption,\n> {\n  query?: string;\n  setQuery?: Dispatch<string>;\n  defaultQuery?: UseStateInitializer<string>;\n  value?: Option | null | readonly Option[];\n  setValue?: Dispatch<Option | null | readonly Option[]>;\n  defaultValue?: UseStateInitializer<Option | null | readonly Option[]>;\n  onValueChange?: (value: Option | null | readonly Option[]) => void;\n}\n\n/**\n * A utility type that makes the `getOptionLabel` required when an option is not\n * a {@link AutocompleteLabeledOption}.\n *\n * @since 6.0.0\n */\nexport type AutocompleteOptionLabelExtractor<\n  Option extends AutocompleteOption,\n> = Option extends AutocompleteLabeledOption\n  ? { getOptionLabel?: AutocompleteGetOptionLabel<Option> }\n  : { getOptionLabel: AutocompleteGetOptionLabel<Option> };\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteFilteringOptions<\n  Option extends AutocompleteOption,\n> {\n  /**\n   * The list of options that can be shown within the autocomplete and filtered\n   * based on the current query.\n   */\n  options: readonly Option[];\n\n  /** @see {@link AutocompleteGetOptionLabel} */\n  getOptionLabel?: AutocompleteGetOptionLabel<Option>;\n\n  /**\n   * The function that filters the {@link options} based on the current query\n   * and defaults to a case insensitive search that starts with the query.\n   *\n   * @example Case Insensitive Anywhere\n   * ```tsx\n   * import { caseInsensitiveSearch } from \"@react-md/core/searching/caseInsensitive\";\n   *\n   * <Autocomplete {...props} filter={caseInsensitiveSearch} />\n   * ```\n   *\n   * @example Fuzzy Filtering\n   * ```tsx\n   * import { fuzzySearch } from \"@react-md/core/searching/fuzzy\";\n   *\n   * <Autocomplete {...props} filter={fuzzySearch} />\n   * ```\n   *\n   * @example Async Searching\n   * ```tsx\n   * import { useDebouncedFunction } from \"@react-md/core/useDebouncedFunction\";\n   * import { useState } from \"react\";\n   *\n   * interface State {\n   *   loading: boolean;\n   *   options: readonly string[];\n   * }\n   *\n   * function Example() {\n   *   const [state, setState] = useState<State>({\n   *     loading: false,\n   *     options: [],\n   *   });\n   *\n   *   const search = useDebouncedFunction(async (query: string) => {\n   *     setState(prev => ({ ...prev, loading: true }));\n   *\n   *     const options = await someAsyncTask(query);\n   *     setState({ loading: false, options })\n   *   });\n   *\n   *   return (\n   *     <Autocomplete\n   *       {...props}\n   *       // Setting `type=\"search\"` automatically updates the `filter` prop to\n   *       // be `noopAutocompleteFilter`\n   *       type=\"search\"\n   *       options={options}\n   *       onChange={(event) => search(event.currentTarget.value)}\n   *     />\n   *   );\n   * }\n   * ```\n   *\n   * @defaultValue `defaultAutocompleteFilter`\n   */\n  filter?: AutocompleteFilterFunction<Option>;\n\n  /**\n   * Set this to `true` to update the filtering behavior to also remove the\n   * selected value from the available options. This is mostly for the\n   * multiselect behavior.\n   *\n   * @defaultValue `false`\n   */\n  filterSelected?: boolean;\n\n  /**\n   * Set this to `true` to allow any value to be typed into the autocomplete\n   * instead of enforcing an empty string or one of the option labels.\n   *\n   * @defaultValue `filter === noopAutocompleteFilter`\n   */\n  allowAnyValue?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteFilterAndListboxOptions<\n  Option extends AutocompleteOption,\n> extends AutocompleteFilteringOptions<Option>,\n    OptionSelectedIconProps {\n  /**\n   * Set this to `true` when using a multiselect autocomplete to update each\n   * option to use checkboxes to show the selection state.\n   *\n   * @defaultValue `false`\n   */\n  checkboxes?: boolean;\n\n  /**\n   * @see {@link OptionSelectedIconProps.disableSelectedIcon}\n   * @defaultValue `!checkboxes`\n   */\n  disableSelectedIcon?: boolean;\n\n  /**\n   * @see {@link AutocompleteUpdateQueryOnSelect}\n   * @defaultValue `multiselect ? \"clear\" : \"as-is\"`\n   */\n  updateQueryOnSelect?: AutocompleteUpdateQueryOnSelect;\n\n  /**\n   * Set this to `true` to prevent the listbox from closing when an option is\n   * selected.\n   *\n   * @defaultValue `checkboxes`\n   */\n  disableCloseOnSelect?: boolean;\n\n  /** @see {@link AutocompleteGetOptionProps} */\n  getOptionProps?: AutocompleteGetOptionProps<Option>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteEditableComboboxOptions<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends EditableComboboxOptions<ComboboxEl, PopupEl>,\n    AutocompleteFilterAndListboxOptions<Option> {\n  onBlur?: FocusEventHandler<ComboboxEl>;\n  onChange?: ChangeEventHandler<ComboboxEl>;\n\n  /**\n   * This is a convenience prop for the `onEntering`/`onEntered` transition\n   * callbacks that will ensure it is only called once even if the transitions\n   * are disabled. A great use-case for this function is to fetch data once the\n   * menu is opened.\n   */\n  onOpen?: () => void;\n}\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteQueryAndExtractorOptions<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> = AutocompleteEditableComboboxOptions<Option, ComboboxEl, PopupEl> &\n  AutocompleteOptionLabelExtractor<Option> &\n  AutocompleteQuery;\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteSingleSelectOptions<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> = AutocompleteQueryAndExtractorOptions<Option, ComboboxEl, PopupEl> &\n  AutocompleteValue<Option | null>;\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteMultiSelectOptions<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> = AutocompleteQueryAndExtractorOptions<Option, ComboboxEl, PopupEl> &\n  AutocompleteValue<readonly Option[]>;\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteOptions<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends AutocompleteEditableComboboxOptions<Option, ComboboxEl, PopupEl>,\n    AutocompleteUnknownQueryAndValueOptions<Option> {}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteComboboxProps<\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n> extends EditableComboboxWidgetProps<ComboboxEl> {\n  \"aria-autocomplete\": NonNullable<AriaAttributes[\"aria-autocomplete\"]>;\n  value: string;\n  onBlur: FocusEventHandler<ComboboxEl>;\n  onChange: ChangeEventHandler<ComboboxEl>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteListboxProps<\n  T extends AutocompleteOption = AutocompleteOption,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends Omit<ComboboxMenuProps<PopupEl>, \"ref\">,\n    OptionSelectedIconProps {\n  value: T | null | readonly T[];\n  setValue: Dispatch<T>;\n  onEnter: (appearing: boolean) => void;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ConfigurableAutocompleteListboxProps\n  extends ConfigurableComboboxMenuProps,\n    OptionSelectedIconProps {\n  id?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ConfigurableAutocompleteClearButtonProps extends ButtonProps {\n  /** @defaultValue `\"Clear\"` */\n  \"aria-label\"?: string;\n\n  /** @defaultValue `\"autocomplete-clear-\" + useId()` */\n  id?: string;\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface AutocompleteClearButtonProps\n  extends ConfigurableAutocompleteClearButtonProps {\n  onClick: MouseEventHandler<HTMLButtonElement>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ConfigurableAutocompleteDropdownButtonProps\n  extends ButtonProps {\n  /** @defaultValue `AutocompleteProps.listboxLabel` */\n  \"aria-label\"?: string;\n  /** @defaultValue `AutocompleteProps.listboxLabelledby` */\n  \"aria-labelledby\"?: string;\n\n  /** @defaultValue `\"autocomplete-dropdown-\" + useId()` */\n  id?: string;\n\n  /** @defaultValue `getIcon(\"dropdown\")` */\n  icon?: ReactNode;\n  iconRotatorProps?: Omit<IconRotatorProps, \"rotated\">;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteDropdownButtonProps\n  extends ConfigurableAutocompleteDropdownButtonProps {\n  \"aria-controls\": string;\n  onClick: MouseEventHandler<HTMLButtonElement>;\n  visible: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteCircularProgressProps\n  extends CircularProgressProps {\n  /** @defaultValue `\"Loading\"` */\n  \"aria-label\"?: string;\n\n  /** @defaultValue `\"current-color\"` */\n  theme?: ProgressTheme;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteChipProps extends ChipProps {\n  /**\n   * @defaultValue `typeof children === \"string\" && \\`Remove \"${children}\"\\`\n   */\n  \"aria-description\"?: string;\n\n  /** @defaultValue `getIcon(\"remove\")` */\n  removeIcon?: ReactNode;\n  children: ReactNode;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteWithQueryImplementation<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends EditableComboboxImplementation<ComboboxEl, PopupEl> {\n  query: string;\n  setQuery: Dispatch<string>;\n  comboboxProps: AutocompleteComboboxProps<ComboboxEl>;\n\n  /**\n   * This is a convenience prop to determine if the autocomplete supports\n   * multiselect.\n   */\n  multiselect: boolean;\n\n  /**\n   * This is the current list of options that will be filtered based on the\n   * current `query`. This should normally be rendered in the\n   * `AutocompleteListboxChildren` component\n   */\n  availableOptions: readonly Option[];\n\n  /**\n   * Generates the props required for the `Listbox` component and should\n   * normally be provided any menu props that might override the default display\n   * settings.\n   */\n  getListboxProps: (\n    overrides?: ConfigurableAutocompleteListboxProps\n  ) => AutocompleteListboxProps<Option, PopupEl>;\n\n  /**\n   * Generates the props required for the `AutocompleteClearButton`.\n   */\n  getClearButtonProps: (\n    overrides?: ConfigurableAutocompleteClearButtonProps\n  ) => AutocompleteClearButtonProps;\n\n  /**\n   * Generates the props required for the `AutocompleteDropdownButton`.\n   */\n  getDropdownButtonProps: (\n    overrides?: ConfigurableAutocompleteDropdownButtonProps\n  ) => AutocompleteDropdownButtonProps;\n\n  /** @see {@link AutocompleteGetOptionLabel} */\n  getOptionLabel: AutocompleteGetOptionLabel<Option>;\n  /** @see {@link AutocompleteGetOptionProps} */\n  getOptionProps: AutocompleteGetOptionProps<Option>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteSingleSelectImplementation<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends AutocompleteWithQueryImplementation<Option, ComboboxEl, PopupEl> {\n  value: Option | null;\n  setValue: Dispatch<Option | null>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteMultiSelectImplementation<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends AutocompleteWithQueryImplementation<Option, ComboboxEl, PopupEl> {\n  value: readonly Option[];\n  setValue: Dispatch<readonly Option[]>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteImplementation<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends AutocompleteWithQueryImplementation<Option, ComboboxEl, PopupEl> {\n  value: Option | null | readonly Option[];\n  setValue: Dispatch<Option | null | readonly Option[]>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteBaseProps<Option extends AutocompleteOption>\n  extends Omit<TextFieldProps, \"value\" | \"defaultValue\">,\n    AutocompleteFilterAndListboxOptions<Option>,\n    ComboboxVisibilityOptions {\n  inputRef?: Ref<HTMLInputElement>;\n\n  /**\n   * An `aria-label` to pass to the `Listbox` component that describes the list\n   * of {@link options}. Either this or the {@link listboxLabelledBy} are\n   * required for accessibility.\n   */\n  listboxLabel?: string;\n\n  /**\n   * An `aria-labelledby` to pass to the `Listbox` component that describes the\n   * list of {@link options}. Either this or the {@link listboxLabel} are\n   * required for accessibility.\n   */\n  listboxLabelledBy?: string;\n\n  /**\n   * Any additional props that should be passed to the `Listbox` component.\n   */\n  listboxProps?: PropsWithRef<\n    ConfigurableAutocompleteListboxProps,\n    HTMLDivElement\n  >;\n\n  /** @see {@link AutocompleteGetOptionProps} */\n  getOptionProps?: AutocompleteGetOptionProps<Option>;\n\n  /**\n   * This can be used to add any custom styling, change the icon, change the\n   * label, etc for the dropdown button.\n   *\n   * @example Simple Example\n   * ```tsx\n   * dropdownButtonProps={{\n   *   \"aria-label\": \"Open\",\n   *   className: styles.dropdownButton,\n   *   icon: <MyCustomDropdownIcon />,\n   * }}\n   * ```\n   */\n  dropdownButtonProps?: ConfigurableAutocompleteDropdownButtonProps;\n\n  /**\n   * Set this to `true` to remove the {@link DropdownButton} from being rendered\n   * after the input element.\n   *\n   * @defaultValue `false`\n   */\n  disableDropdownButton?: boolean;\n\n  /**\n   * Set this to `true` to disable a `<CircularProgress />` after the input and\n   * before the `<DropdownButton />`.\n   *\n   * @defaultValue `false`\n   */\n  loading?: boolean;\n\n  /**\n   * @defaultValue `{ \"aria-label\": \"Loading\", ...loadingProps }`\n   */\n  loadingProps?: AutocompleteCircularProgressProps;\n\n  clearButtonProps?: PropsWithRef<\n    ConfigurableAutocompleteClearButtonProps,\n    HTMLButtonElement\n  >;\n\n  /**\n   * @defaultValue `false`\n   */\n  disableClearButton?: boolean;\n\n  /**\n   * This is a convenience prop for the `onEntering`/`onEntered` transition\n   * callbacks that will ensure it is only called once even if the transitions\n   * are disabled. A great use-case for this function is to fetch data once the\n   * menu is opened.\n   */\n  onOpen?: () => void;\n\n  /**\n   * The children to display when there are no {@link options} due to the\n   * current text box value.\n   *\n   * @defaultValue `<ListSubheader>No options</ListSubheader`\n   */\n  noOptionsChildren?: ReactNode;\n\n  /**\n   * Set this to `true` when using a multiselect autocomplete to prevent the\n   * selected values from being rendered inline with the input. This is useful\n   * when the selected values should be shown in a different part of the UI\n   * instead.\n   *\n   * @defaultValue `false`\n   */\n  disableInlineChips?: boolean;\n\n  /** @see {@link AutocompleteGetChipProps} */\n  getChipProps?: AutocompleteGetChipProps<Option>;\n}\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteListboxLabelProps =\n  | { listboxLabel: string }\n  | { listboxLabelledBy: string };\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteQueryAndExtractorProps<\n  Option extends AutocompleteOption,\n> = AutocompleteBaseProps<Option> &\n  AutocompleteOptionLabelExtractor<Option> &\n  AutocompleteQuery &\n  AutocompleteListboxLabelProps;\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteSingleSelectProps<Option extends AutocompleteOption> =\n  AutocompleteQueryAndExtractorProps<Option> &\n    AutocompleteValue<Option | null> & {\n      checkboxes?: never;\n      getChipProps?: never;\n      disableInlineChips?: never;\n    };\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteMultiSelectProps<Option extends AutocompleteOption> =\n  AutocompleteQueryAndExtractorProps<Option> &\n    AutocompleteValue<readonly Option[]>;\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteProps<Option extends AutocompleteOption> =\n  AutocompleteBaseProps<Option> &\n    AutocompleteUnknownQueryAndValueOptions<Option>;\n"],"names":[],"mappings":"AA+xBA;;CAEC,GACD,WAEoD"}
+{"version":3,"sources":["../../src/autocomplete/types.ts"],"sourcesContent":["import {\n  type AriaAttributes,\n  type ChangeEventHandler,\n  type Dispatch,\n  type FocusEventHandler,\n  type MouseEventHandler,\n  type ReactNode,\n  type Ref,\n} from \"react\";\n\nimport { type ButtonProps } from \"../button/Button.js\";\nimport { type ChipProps } from \"../chip/Chip.js\";\nimport {\n  type OptionProps,\n  type OptionSelectedIconProps,\n} from \"../form/Option.js\";\nimport { type TextFieldProps } from \"../form/TextField.js\";\nimport {\n  type ComboboxMenuProps,\n  type ComboboxVisibilityOptions,\n  type ConfigurableComboboxMenuProps,\n} from \"../form/useCombobox.js\";\nimport {\n  type EditableComboboxImplementation,\n  type EditableComboboxOptions,\n  type EditableComboboxWidgetProps,\n} from \"../form/useEditableCombobox.js\";\nimport { type EditableHTMLElement } from \"../form/utils.js\";\nimport { type IconRotatorProps } from \"../icon/IconRotator.js\";\nimport { type CircularProgressProps } from \"../progress/CircularProgress.js\";\nimport { type ProgressTheme } from \"../progress/types.js\";\nimport { type BaseSearchOptions } from \"../searching/types.js\";\nimport {\n  type PropsWithRef,\n  type TextExtractor,\n  type UseStateInitializer,\n} from \"../types.js\";\n\n/**\n * If a autocomplete value is one of these types, no additional code is required\n * to display a label in the input/chip for the autocomplete once the value has\n * been selected.\n *\n * - `\"some value\"` -&gt; `\"some value\"`\n * - `{ label: \"Hello, world\", value: 300 }` -&gt; `\"Hello, world!\"`\n *\n * @since 6.0.0\n */\nexport type AutocompleteLabeledOption = string | { label: string };\n\n/**\n * @since 6.0.0\n */\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\nexport type AutocompleteOption = AutocompleteLabeledOption | {};\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteFilterOptions<Option extends AutocompleteOption> = Pick<\n  Required<BaseSearchOptions<Option>>,\n  \"list\" | \"query\" | \"extractor\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteFilterFunction<Option extends AutocompleteOption> = (\n  options: AutocompleteFilterOptions<Option>\n) => readonly Option[];\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteGetOptionPropsOptions<\n  Option extends AutocompleteOption,\n> {\n  index: number;\n  query: string;\n  option: Option;\n  selected: boolean;\n  extractor: TextExtractor<Option>;\n}\n\n/**\n * This can be used to add additional props to each option.\n *\n * @example Simple Example\n * ```tsx\n * getOptionProps={({ option }) => {\n *   return {\n *     disabled: option === \"\",\n *     className: cnb(option === \"a\" && styles.blue),\n *     leftAddon: option === value && <CheckIcon />,\n *   };\n * }}\n * ```\n * @since 6.0.0\n */\nexport type AutocompleteGetOptionProps<Option extends AutocompleteOption> = (\n  options: AutocompleteGetOptionPropsOptions<Option>\n) => ConfigurableAutocompleteOptionProps | undefined;\n\n/**\n * This can be used to add additional props to each inline chip for multiselect\n * autocompletes.\n *\n * @example Simple Example\n * ```tsx\n * getChipProps={({ option, index }) => {\n *   return {\n *     disabled: index < 3,\n *     className: cnb(option === \"a\" && styles.blue)<\n *   };\n * }}\n * ```\n * @since 6.0.0\n */\nexport type AutocompleteGetChipProps<Option extends AutocompleteOption> = (\n  options: Omit<AutocompleteGetOptionPropsOptions<Option>, \"selected\">\n) => Partial<AutocompleteChipProps> | undefined;\n\n/**\n * If the list of options contain an object that doesn't have a\n * `label: string`, this prop must be provided to extract a string to display\n * in the text field once selected.\n *\n * @example No Getter Required\n * ```tsx\n * const options1 = ['a', 'b', 'c', 'd'];\n * const options2 = [{ label: 'a' }, { label: 'b' }, { label: 'c' }, { label: 'd' }];\n *\n * <Autocomplete options={options1} />\n * <Autocomplete options={options2} />\n * ```\n *\n * @example Getter Required\n * ```tsx\n * const options = [\n *   {\n *     name: \"Alaska\",\n *     abbr: \"AK\",\n *   },\n *   {\n *     name: \"Arizona\",\n *     abbr: \"AZ\",\n *   }\n * ];\n *\n * <Autocomplete options={options} getOptionLabel={(state) => state.name} />\n * ```\n *\n * @defaultValue `defaultAutocompleteExtractor`\n * @since 6.0.0\n */\nexport type AutocompleteGetOptionLabel<Option extends AutocompleteOption> = (\n  option: Option\n) => string;\n\n/**\n * @since 6.0.0\n */\nexport type ConfigurableAutocompleteOptionProps = Partial<\n  Omit<OptionProps, \"role\" | \"value\">\n>;\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteControlledValue<T> {\n  value: T;\n  setValue: Dispatch<T>;\n  defaultValue?: never;\n  onValueChange?: never;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteUncontrolledValue<T> {\n  value?: never;\n  setValue?: never;\n  defaultValue?: UseStateInitializer<T>;\n\n  /**\n   * This prop should be used when some action should occur whenever the value\n   * changes, but is not required to be stored in state. For all other cases, it\n   * is recommended to control the `value` instead of using this prop.\n   *\n   * @defaultValue `() => {}`\n   */\n  onValueChange?: (value: T) => void;\n}\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteValue<T> =\n  | AutocompleteControlledValue<T>\n  | AutocompleteUncontrolledValue<T>;\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteControlledQuery {\n  query: string;\n  setQuery: Dispatch<string>;\n  defaultQuery?: never;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteUncontrolledQuery {\n  query?: never;\n  setQuery?: never;\n  defaultQuery?: UseStateInitializer<string>;\n}\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteQuery =\n  | AutocompleteControlledQuery\n  | AutocompleteUncontrolledQuery;\n\n/**\n * This allows the `query` to be updated whenever a new value has been selected.\n *\n * - `\"clear\"` - clears the `query`\n * - `\"selected\"` - sets the \tquery\t to the selected value's label\n * - `\"as-is\"` - doesn't change the `query`\n *\n * @defaultValue `(multiselect || Array.isArray(value ?? defaultValue)) ? \"clear\" : \"as-is\"`\n * @since 6.0.0\n */\nexport type AutocompleteUpdateQueryOnSelect = \"clear\" | \"selected\" | \"as-is\";\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteUnknownQueryAndValueOptions<\n  Option extends AutocompleteOption,\n> {\n  query?: string;\n  setQuery?: Dispatch<string>;\n  defaultQuery?: UseStateInitializer<string>;\n  value?: Option | null | readonly Option[];\n  setValue?: Dispatch<Option | null | readonly Option[]>;\n  defaultValue?: UseStateInitializer<Option | null | readonly Option[]>;\n  onValueChange?: (value: Option | null | readonly Option[]) => void;\n}\n\n/**\n * A utility type that makes the `getOptionLabel` required when an option is not\n * a {@link AutocompleteLabeledOption}.\n *\n * @since 6.0.0\n */\nexport type AutocompleteOptionLabelExtractor<\n  Option extends AutocompleteOption,\n> = Option extends AutocompleteLabeledOption\n  ? { getOptionLabel?: AutocompleteGetOptionLabel<Option> }\n  : { getOptionLabel: AutocompleteGetOptionLabel<Option> };\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteFilteringOptions<\n  Option extends AutocompleteOption,\n> {\n  /**\n   * The list of options that can be shown within the autocomplete and filtered\n   * based on the current query.\n   */\n  options: readonly Option[];\n\n  /** @see {@link AutocompleteGetOptionLabel} */\n  getOptionLabel?: AutocompleteGetOptionLabel<Option>;\n\n  /**\n   * The function that filters the {@link options} based on the current query\n   * and defaults to a case insensitive search that starts with the query.\n   *\n   * @example Case Insensitive Anywhere\n   * ```tsx\n   * import { caseInsensitiveSearch } from \"@react-md/core/searching/caseInsensitive\";\n   *\n   * <Autocomplete {...props} filter={caseInsensitiveSearch} />\n   * ```\n   *\n   * @example Fuzzy Filtering\n   * ```tsx\n   * import { fuzzySearch } from \"@react-md/core/searching/fuzzy\";\n   *\n   * <Autocomplete {...props} filter={fuzzySearch} />\n   * ```\n   *\n   * @example Async Searching\n   * ```tsx\n   * import { useDebouncedFunction } from \"@react-md/core/useDebouncedFunction\";\n   * import { useState } from \"react\";\n   *\n   * interface State {\n   *   loading: boolean;\n   *   options: readonly string[];\n   * }\n   *\n   * function Example() {\n   *   const [state, setState] = useState<State>({\n   *     loading: false,\n   *     options: [],\n   *   });\n   *\n   *   const search = useDebouncedFunction(async (query: string) => {\n   *     setState(prev => ({ ...prev, loading: true }));\n   *\n   *     const options = await someAsyncTask(query);\n   *     setState({ loading: false, options })\n   *   });\n   *\n   *   return (\n   *     <Autocomplete\n   *       {...props}\n   *       // Setting `type=\"search\"` automatically updates the `filter` prop to\n   *       // be `noopAutocompleteFilter`\n   *       type=\"search\"\n   *       options={options}\n   *       onChange={(event) => search(event.currentTarget.value)}\n   *     />\n   *   );\n   * }\n   * ```\n   *\n   * @defaultValue `defaultAutocompleteFilter`\n   */\n  filter?: AutocompleteFilterFunction<Option>;\n\n  /**\n   * Set this to `true` to update the filtering behavior to also remove the\n   * selected value from the available options. This is mostly for the\n   * multiselect behavior.\n   *\n   * @defaultValue `false`\n   */\n  filterSelected?: boolean;\n\n  /**\n   * Set this to `true` to allow any value to be typed into the autocomplete\n   * instead of enforcing an empty string or one of the option labels.\n   *\n   * @defaultValue `filter === noopAutocompleteFilter`\n   */\n  allowAnyValue?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteFilterAndListboxOptions<\n  Option extends AutocompleteOption,\n> extends AutocompleteFilteringOptions<Option>,\n    OptionSelectedIconProps {\n  /**\n   * Set this to `true` when using a multiselect autocomplete to update each\n   * option to use checkboxes to show the selection state.\n   *\n   * @defaultValue `false`\n   */\n  checkboxes?: boolean;\n\n  /**\n   * @see {@link OptionSelectedIconProps.disableSelectedIcon}\n   * @defaultValue `!checkboxes`\n   */\n  disableSelectedIcon?: boolean;\n\n  /**\n   * @see {@link AutocompleteUpdateQueryOnSelect}\n   * @defaultValue `multiselect ? \"clear\" : \"as-is\"`\n   */\n  updateQueryOnSelect?: AutocompleteUpdateQueryOnSelect;\n\n  /**\n   * Set this to `true` to prevent the listbox from closing when an option is\n   * selected.\n   *\n   * @defaultValue `checkboxes`\n   */\n  disableCloseOnSelect?: boolean;\n\n  /** @see {@link AutocompleteGetOptionProps} */\n  getOptionProps?: AutocompleteGetOptionProps<Option>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteEditableComboboxOptions<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends EditableComboboxOptions<ComboboxEl, PopupEl>,\n    AutocompleteFilterAndListboxOptions<Option> {\n  onBlur?: FocusEventHandler<ComboboxEl>;\n  onChange?: ChangeEventHandler<ComboboxEl>;\n\n  /**\n   * This is a convenience prop for the `onEntering`/`onEntered` transition\n   * callbacks that will ensure it is only called once even if the transitions\n   * are disabled. A great use-case for this function is to fetch data once the\n   * menu is opened.\n   */\n  onOpen?: () => void;\n}\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteQueryAndExtractorOptions<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> = AutocompleteEditableComboboxOptions<Option, ComboboxEl, PopupEl> &\n  AutocompleteOptionLabelExtractor<Option> &\n  AutocompleteQuery;\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteSingleSelectOptions<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> = AutocompleteQueryAndExtractorOptions<Option, ComboboxEl, PopupEl> &\n  AutocompleteValue<Option | null>;\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteMultiSelectOptions<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> = AutocompleteQueryAndExtractorOptions<Option, ComboboxEl, PopupEl> &\n  AutocompleteValue<readonly Option[]>;\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteOptions<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends AutocompleteEditableComboboxOptions<Option, ComboboxEl, PopupEl>,\n    AutocompleteUnknownQueryAndValueOptions<Option> {}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteComboboxProps<\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n> extends EditableComboboxWidgetProps<ComboboxEl> {\n  \"aria-autocomplete\": NonNullable<AriaAttributes[\"aria-autocomplete\"]>;\n  value: string;\n  onBlur: FocusEventHandler<ComboboxEl>;\n  onChange: ChangeEventHandler<ComboboxEl>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteListboxProps<\n  T extends AutocompleteOption = AutocompleteOption,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends Omit<ComboboxMenuProps<PopupEl>, \"ref\">,\n    OptionSelectedIconProps {\n  value: T | null | readonly T[];\n  setValue: Dispatch<T>;\n  onEnter: (appearing: boolean) => void;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ConfigurableAutocompleteListboxProps\n  extends ConfigurableComboboxMenuProps,\n    OptionSelectedIconProps {\n  id?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ConfigurableAutocompleteClearButtonProps extends ButtonProps {\n  /** @defaultValue `\"Clear\"` */\n  \"aria-label\"?: string;\n\n  /** @defaultValue `\"autocomplete-clear-\" + useId()` */\n  id?: string;\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface AutocompleteClearButtonProps\n  extends ConfigurableAutocompleteClearButtonProps {\n  onClick: MouseEventHandler<HTMLButtonElement>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ConfigurableAutocompleteDropdownButtonProps\n  extends ButtonProps {\n  /** @defaultValue `AutocompleteProps.listboxLabel` */\n  \"aria-label\"?: string;\n  /** @defaultValue `AutocompleteProps.listboxLabelledby` */\n  \"aria-labelledby\"?: string;\n\n  /** @defaultValue `\"autocomplete-dropdown-\" + useId()` */\n  id?: string;\n\n  /** @defaultValue `getIcon(\"dropdown\")` */\n  icon?: ReactNode;\n  iconRotatorProps?: Omit<IconRotatorProps, \"rotated\">;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteDropdownButtonProps\n  extends ConfigurableAutocompleteDropdownButtonProps {\n  \"aria-controls\": string;\n  onClick: MouseEventHandler<HTMLButtonElement>;\n  visible: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteCircularProgressProps\n  extends CircularProgressProps {\n  /** @defaultValue `\"Loading\"` */\n  \"aria-label\"?: string;\n\n  /** @defaultValue `\"current-color\"` */\n  theme?: ProgressTheme;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteChipProps extends ChipProps {\n  /**\n   * @defaultValue `typeof children === \"string\" && \\`Remove \"${children}\"\\`\n   */\n  \"aria-description\"?: string;\n\n  /** @defaultValue `getIcon(\"remove\")` */\n  removeIcon?: ReactNode;\n  children: ReactNode;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteWithQueryImplementation<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends EditableComboboxImplementation<ComboboxEl, PopupEl> {\n  query: string;\n  setQuery: Dispatch<string>;\n  comboboxProps: AutocompleteComboboxProps<ComboboxEl>;\n\n  /**\n   * This is a convenience prop to determine if the autocomplete supports\n   * multiselect.\n   */\n  multiselect: boolean;\n\n  /**\n   * This is the current list of options that will be filtered based on the\n   * current `query`. This should normally be rendered in the\n   * `AutocompleteListboxChildren` component\n   */\n  availableOptions: readonly Option[];\n\n  /**\n   * Generates the props required for the `Listbox` component and should\n   * normally be provided any menu props that might override the default display\n   * settings.\n   */\n  getListboxProps: (\n    overrides?: ConfigurableAutocompleteListboxProps\n  ) => AutocompleteListboxProps<Option, PopupEl>;\n\n  /**\n   * Generates the props required for the `AutocompleteClearButton`.\n   */\n  getClearButtonProps: (\n    overrides?: ConfigurableAutocompleteClearButtonProps\n  ) => AutocompleteClearButtonProps;\n\n  /**\n   * Generates the props required for the `AutocompleteDropdownButton`.\n   */\n  getDropdownButtonProps: (\n    overrides?: ConfigurableAutocompleteDropdownButtonProps\n  ) => AutocompleteDropdownButtonProps;\n\n  /** @see {@link AutocompleteGetOptionLabel} */\n  getOptionLabel: AutocompleteGetOptionLabel<Option>;\n  /** @see {@link AutocompleteGetOptionProps} */\n  getOptionProps: AutocompleteGetOptionProps<Option>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteSingleSelectImplementation<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends AutocompleteWithQueryImplementation<Option, ComboboxEl, PopupEl> {\n  value: Option | null;\n  setValue: Dispatch<Option | null>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteMultiSelectImplementation<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends AutocompleteWithQueryImplementation<Option, ComboboxEl, PopupEl> {\n  value: readonly Option[];\n  setValue: Dispatch<readonly Option[]>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteImplementation<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends AutocompleteWithQueryImplementation<Option, ComboboxEl, PopupEl> {\n  value: Option | null | readonly Option[];\n  setValue: Dispatch<Option | null | readonly Option[]>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteBaseProps<Option extends AutocompleteOption>\n  extends Omit<TextFieldProps, \"value\" | \"defaultValue\">,\n    AutocompleteFilterAndListboxOptions<Option>,\n    ComboboxVisibilityOptions {\n  inputRef?: Ref<HTMLInputElement>;\n\n  /**\n   * An `aria-label` to pass to the `Listbox` component that describes the list\n   * of {@link options}. Either this or the {@link listboxLabelledBy} are\n   * required for accessibility.\n   */\n  listboxLabel?: string;\n\n  /**\n   * An `aria-labelledby` to pass to the `Listbox` component that describes the\n   * list of {@link options}. Either this or the {@link listboxLabel} are\n   * required for accessibility.\n   */\n  listboxLabelledBy?: string;\n\n  /**\n   * Any additional props that should be passed to the `Listbox` component.\n   */\n  listboxProps?: PropsWithRef<\n    ConfigurableAutocompleteListboxProps,\n    HTMLDivElement\n  >;\n\n  /** @see {@link AutocompleteGetOptionProps} */\n  getOptionProps?: AutocompleteGetOptionProps<Option>;\n\n  /**\n   * This can be used to add any custom styling, change the icon, change the\n   * label, etc for the dropdown button.\n   *\n   * @example Simple Example\n   * ```tsx\n   * dropdownButtonProps={{\n   *   \"aria-label\": \"Open\",\n   *   className: styles.dropdownButton,\n   *   icon: <MyCustomDropdownIcon />,\n   * }}\n   * ```\n   */\n  dropdownButtonProps?: ConfigurableAutocompleteDropdownButtonProps;\n\n  /**\n   * Set this to `true` to remove the {@link DropdownButton} from being rendered\n   * after the input element.\n   *\n   * @defaultValue `false`\n   */\n  disableDropdownButton?: boolean;\n\n  /**\n   * Set this to `true` to disable a `<CircularProgress />` after the input and\n   * before the `<DropdownButton />`.\n   *\n   * @defaultValue `false`\n   */\n  loading?: boolean;\n\n  /**\n   * @defaultValue `{ \"aria-label\": \"Loading\", ...loadingProps }`\n   */\n  loadingProps?: AutocompleteCircularProgressProps;\n\n  clearButtonProps?: PropsWithRef<\n    ConfigurableAutocompleteClearButtonProps,\n    HTMLButtonElement\n  >;\n\n  /**\n   * @defaultValue `false`\n   */\n  disableClearButton?: boolean;\n\n  /**\n   * This is a convenience prop for the `onEntering`/`onEntered` transition\n   * callbacks that will ensure it is only called once even if the transitions\n   * are disabled. A great use-case for this function is to fetch data once the\n   * menu is opened.\n   */\n  onOpen?: () => void;\n\n  /**\n   * The children to display when there are no {@link options} due to the\n   * current text box value.\n   *\n   * @defaultValue `<ListSubheader>No options</ListSubheader`\n   */\n  noOptionsChildren?: ReactNode;\n\n  /**\n   * Set this to `true` when using a multiselect autocomplete to prevent the\n   * selected values from being rendered inline with the input. This is useful\n   * when the selected values should be shown in a different part of the UI\n   * instead.\n   *\n   * @defaultValue `false`\n   */\n  disableInlineChips?: boolean;\n\n  /** @see {@link AutocompleteGetChipProps} */\n  getChipProps?: AutocompleteGetChipProps<Option>;\n}\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteListboxLabelProps =\n  | { listboxLabel: string }\n  | { listboxLabelledBy: string };\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteQueryAndExtractorProps<\n  Option extends AutocompleteOption,\n> = AutocompleteBaseProps<Option> &\n  AutocompleteOptionLabelExtractor<Option> &\n  AutocompleteQuery &\n  AutocompleteListboxLabelProps;\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteSingleSelectProps<Option extends AutocompleteOption> =\n  AutocompleteQueryAndExtractorProps<Option> &\n    AutocompleteValue<Option | null> & {\n      checkboxes?: never;\n      getChipProps?: never;\n      disableInlineChips?: never;\n    };\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteMultiSelectProps<Option extends AutocompleteOption> =\n  AutocompleteQueryAndExtractorProps<Option> &\n    AutocompleteValue<readonly Option[]>;\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteProps<Option extends AutocompleteOption> =\n  AutocompleteBaseProps<Option> &\n    AutocompleteUnknownQueryAndValueOptions<Option>;\n"],"names":[],"mappings":"AAgyBA;;CAEC,GACD,WAEoD"}

package/dist/autocomplete/useAutocomplete.js

@@ -2,7 +2,7 @@
 import { useCallback, useMemo, useRef } from "react";
 import { useEditableCombobox } from "../form/useEditableCombobox.js";
 import { triggerManualChangeEvent } from "../form/utils.js";
-import { getIcon } from "../icon/iconConfig.js";
+import { getIcon } from "../icon/config.js";
 import { useUserInteractionMode } from "../interaction/UserInteractionModeProvider.js";
 import { TRANSITION_CONFIG } from "../transition/config.js";
 import { useEnsuredState } from "../useEnsuredState.js";

package/dist/autocomplete/useAutocomplete.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/autocomplete/useAutocomplete.ts"],"sourcesContent":["\"use client\";\nimport { useCallback, useMemo, useRef } from \"react\";\nimport { useEditableCombobox } from \"../form/useEditableCombobox.js\";\nimport {\n  triggerManualChangeEvent,\n  type EditableHTMLElement,\n} from \"../form/utils.js\";\nimport { getIcon } from \"../icon/iconConfig.js\";\nimport { useUserInteractionMode } from \"../interaction/UserInteractionModeProvider.js\";\nimport { TRANSITION_CONFIG } from \"../transition/config.js\";\nimport { type TransitionEnterHandler } from \"../transition/types.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 * @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 * @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 * @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 * @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    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\": \"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      const isTransitionCompleteSkipped =\n        !disableTransition && !TRANSITION_CONFIG.disabled;\n\n      const handleEntering =\n        (callback: TransitionEnterHandler = noop, skipped: boolean) =>\n        (appearing: boolean) => {\n          callback(appearing);\n\n          if (skipped) {\n            return;\n          }\n\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\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        onEnter: handleEntering(onEnter, false),\n        onEntered: handleEntering(onEntered, isTransitionCompleteSkipped),\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","TRANSITION_CONFIG","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","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","isTransitionCompleteSkipped","disabled","handleEntering","callback","skipped","appearing","onRequestClose","contains","document","activeElement","nodeRef","nextValue","i","indexOf","push","splice","nextQuery","onClick","stopPropagation","getClearButtonProps","focus","getDropdownButtonProps","id","prev"],"mappings":"AAAA;AACA,SAASA,WAAW,EAAEC,OAAO,EAAEC,MAAM,QAAQ,QAAQ;AACrD,SAASC,mBAAmB,QAAQ,iCAAiC;AACrE,SACEC,wBAAwB,QAEnB,mBAAmB;AAC1B,SAASC,OAAO,QAAQ,wBAAwB;AAChD,SAASC,sBAAsB,QAAQ,gDAAgD;AACvF,SAASC,iBAAiB,QAAQ,0BAA0B;AAE5D,SAASC,eAAe,QAAQ,wBAAwB;AACxD,SACEC,4BAA4B,EAC5BC,yBAAyB,EACzBC,iCAAiC,EACjCC,sBAAsB,QACjB,gBAAgB;AAUvB,SACEC,oBAAoB,EACpBC,eAAe,EACfC,eAAe,EACfC,gBAAgB,QACX,aAAa;AAEpB,MAAMC,OAAO;AACX,aAAa;AACf;AAwCA;;;CAGC,GACD,OAAO,SAASC,gBAKdC,OAAyD;IAEzD,MAAM,EACJC,OAAOC,SAAS,EAChBC,UAAUC,YAAY,EACtBC,YAAY,EACZC,gBAAgBR,IAAI,EACpBS,OAAOC,SAAS,EAChBC,UAAUC,YAAY,EACtBC,YAAY,EACZX,SAASY,MAAM,EACfC,iBAAiBvB,4BAA4B,EAC7CwB,iBAAiBtB,iCAAiC,EAClDuB,SAASjB,IAAI,EACbkB,WAAWlB,IAAI,EACfmB,SAASnB,IAAI,EACboB,SAAS3B,yBAAyB,EAClC4B,cAAc,EACdC,gBAAgBF,WAAWzB,sBAAsB,EACjD4B,aAAaC,eAAe,EAC5BC,UAAU,EACVC,cAAcC,gBAAgB,EAC9BC,gBAAgBC,kBAAkB,EAClCC,iBAAiB,EACjBC,qBAAqBC,uBAAuB,EAC5CC,qBAAqBC,uBAAuB,EAC5CC,sBAAsBC,wBAAwB,EAC9C,GAAGC,iBACJ,GAAGnC;IAEJ,MAAMoC,OAAOjD;IACb,MAAM,CAACc,OAAOoC,cAAc,GAAGhD,gBAAgB;QAC7CY,OAAOC;QACPC,UAAUC;QACVC,cAAcT,gBAAgB;YAC5BW,OAAOC;YACPU;YACAG,aAAaC;YACbX;YACAN;YACAL,SAASY;YACTC;QACF;IACF;IACA,MAAMQ,cACJC,mBACC,CAAA,CAAC,CAACrB,SAAS,OAAOA,UAAU,YAAY,YAAYA,KAAI;IAC3D,IAAI8B,sBAAsBC;IAC1B,IAAI,OAAOA,4BAA4B,aAAa;QAClDD,sBAAsBV,cAAc,UAAU;IAChD;IAEA,MAAMY,uBACJC,4BAA6Bb,CAAAA,eAAeE,UAAS;IAEvD,MAAM,CAAChB,OAAOE,SAAS,GAAGpB,gBAAgB;QACxCY,OAAOO;QACPL,UAAUO;QACVL,cAAcV,gBAAgB;YAC5BM;YACAY;YACAF;QACF;IACF;IACA,MAAMR,WAAWtB,YACf,CAACoB;QACCK,cAAcL;QACdoC,cAAcpC;IAChB,GACA;QAACK;QAAe+B;KAAc;IAGhC,MAAMC,WAAWtD,oBAAyC;QACxD,GAAGmD,eAAe;QAClBd;IACF;IACA,MAAM,EACJkB,OAAO,EACPC,UAAU,EACVC,QAAQ,EACRC,WAAW,EACXC,aAAa,EACbC,YAAY,EACb,GAAGN;IAEJ,4EAA4E;IAC5E,wEAAwE;IACxE,kCAAkC;IAClC,2BAA2B;IAC3B,gCAAgC;IAChC,iDAAiD;IACjD,mCAAmC;IACnC,MAAMO,UAAU9D,OAAOwD;IACvB,MAAMO,eAAe/D,OAAO;IAC5B,MAAMgE,uBAAuBhE,OAAiC;IAC9D,MAAMiE,gBACJzC,SAASA,UAAUuC,aAAaG,OAAO,IAAIJ,QAAQI,OAAO;IAE5D,IAAIC,mBAAmBH,qBAAqBE,OAAO,IAAIrC;IACvD,IACEoC,iBACA9B,WAAWzB,0BACX,CAACsD,qBAAqBE,OAAO,EAC7B;QACAH,aAAaG,OAAO,GAAG;QACvBC,mBAAmBhC,OAAO;YACxBiC,MAAMvC;YACNL;YACA6C,WAAWvC;QACb;IACF;IAEA,6EAA6E;IAC7E,sEAAsE;IACtE,8EAA8E;IAC9E,yEAAyE;IACzE,QAAQ;IACR,EAAE;IACF,4EAA4E;IAC5E,cAAc;IACd,MAAMwC,kBAAkBvE,QAAQ;QAC9B,IAAI,CAACqC,gBAAgB;YACnB,OAAO;QACT;QAEA,IAAImC,aAAgC,EAAE;QACtC,IAAIzD,iBAAiBI,QAAQ;YAC3BqD,aAAarD;QACf,OAAO,IAAIA,OAAO;YAChBqD,aAAa;gBAACrD;aAAM;QACtB;QAEA,OAAO,IAAIsD,IAAID;IACjB,GAAG;QAACnC;QAAgBlB;KAAM;IAE1B,IAAIkB,kBAAkBkC,iBAAiBG,MAAM;QAC3CN,mBAAmBA,iBAAiBhC,MAAM,CACxC,CAACuC,SAAW,CAACJ,gBAAgBK,GAAG,CAACD;IAErC;IAEA,OAAO;QACL,GAAGnB,QAAQ;QACXrC;QACAE;QACAI;QACAE;QACAyC;QACA7B;QACAsB,eAAe;YACb,GAAGA,aAAa;YAChB,qBAAqB;YACrB1C,OAAOM;YACPoD,WAAUC,KAAK;gBACbjB,cAAcgB,SAAS,CAACC;gBACxB,IAAI,CAACrB,WAAWqB,MAAMC,GAAG,KAAK,UAAU;oBACtCpD,SAAS;gBACX;YACF;YACAM,QAAO6C,KAAK;gBACV7C,OAAO6C;gBAEP,IAAIxC,eAAe;oBACjB;gBACF;gBAEA1B,qBAAqB;oBACnBO;oBACAsC;oBACAE;oBACAqB,WAAWF,MAAMG,aAAa,CAACC,aAAa;oBAC5CtB;oBACA7B;oBACAqC;oBACAH;gBACF;YACF;YACAkB,SAAQL,KAAK;gBACXjB,cAAcsB,OAAO,CAACL;gBACtBA,MAAMG,aAAa,CAACG,MAAM;YAC5B;YACAlD,UAAS4C,KAAK;gBACZ5C,SAAS4C;gBAET,MAAM,EAAE3D,KAAK,EAAE,GAAG2D,MAAMG,aAAa;gBACrCtD,SAASR;gBACT,IAAI,CAACA,SAAS,CAACoB,aAAa;oBAC1BlB,SAAS;gBACX;YACF;QACF;QACAgE,iBAAgBC,SAAS;YACvB,MAAM,EACJC,GAAG,EACHC,OAAO,EACPC,SAAS,EACTC,QAAQ,EACRC,iBAAiB,EACjB,GAAGC,cACJ,GAAG9B,aAAawB;YAEjB,MAAMO,8BACJ,CAACF,qBAAqB,CAACrF,kBAAkBwF,QAAQ;YAEnD,MAAMC,iBACJ,CAACC,WAAmChF,IAAI,EAAEiF,UAC1C,CAACC;oBACCF,SAASE;oBAET,IAAID,SAAS;wBACX;oBACF;oBAEA9D;oBAEA,qEAAqE;oBACrE,qEAAqE;oBACrE,SAAS;oBACT4B,QAAQI,OAAO,GAAG;oBAClBH,aAAaG,OAAO,GAAG1C;gBACzB;YAEF,IAAIiB,eAAeC;YACnB,IAAIC,iBAAiBC;YACrB,IAAIE,sBAAsBC;YAC1B,IAAIT,eAAeE,YAAY;gBAC7B,IAAI,OAAOC,iBAAiB,aAAa;oBACvCA,eAAetC,QAAQ;gBACzB;gBACA,IAAI,OAAOwC,mBAAmB,aAAa;oBACzCA,iBAAiBxC,QAAQ;gBAC3B;YACF,OAAO,IAAI,OAAO2C,wBAAwB,aAAa;gBACrDA,sBAAsB;YACxB;YAEA,OAAO;gBACLL;gBACAE;gBACAE;gBACAC;gBACA,GAAG6C,YAAY;gBACfD;gBACAQ;oBACE,gEAAgE;oBAChE,yCAAyC;oBACzC,IACE7C,SAAS,cACTM,YAAYO,OAAO,EAAEe,eAAekB,SAASC,SAASC,aAAa,GACnE;wBACA;oBACF;oBAEAV,aAAaO,cAAc;gBAC7B;gBACAI,SAAShB;gBACTpE;gBACAE,UAASsD,MAAM;oBACb,IAAI,CAACxB,sBAAsB;wBACzB,qEAAqE;wBACrE,6CAA6C;wBAC7Cc,qBAAqBE,OAAO,GAAGC;oBACjC;oBAEA,IAAIjD,SAAS,OAAOA,UAAU,YAAY,YAAYA,OAAO;wBAC3D,MAAMqF,YAAY;+BAAIrF;yBAAM;wBAC5B,MAAMsF,IAAItF,MAAMuF,OAAO,CAAC/B;wBACxB,IAAI8B,MAAM,CAAC,GAAG;4BACZD,UAAUG,IAAI,CAAChC;wBACjB,OAAO;4BACL6B,UAAUI,MAAM,CAACH,GAAG;wBACtB;wBAEApF,SAASmF;oBACX,OAAO;wBACLnF,SAASsD;oBACX;oBAEA,IAAI1B,wBAAwB,SAAS;wBACnC;oBACF;oBAEA,MAAM4D,YACJ5D,wBAAwB,UAAU,KAAKlB,eAAe4C;oBACxDxE,yBAAyByD,YAAYO,OAAO,EAAE0C;gBAChD;gBACArB,SAASO,eAAeP,SAAS;gBACjCC,WAAWM,eAAeN,WAAWI;gBACrCH;oBACEA;oBAEA,mEAAmE;oBACnE,4DAA4D;oBAC5D3B,QAAQI,OAAO,GAAG;oBAClBF,qBAAqBE,OAAO,GAAG;gBACjC;YACF;QACF;QACApC;QACAC,gBAAed,OAAO;YACpB,MAAMoE,YAAYtD,eAAed;YAEjC,OAAO;gBACL,GAAGoE,SAAS;gBACZwB,SAAS,CAAChC;oBACRQ,WAAWwB,UAAUhC;oBACrB,IAAI3B,sBAAsB;wBACxB2B,MAAMiC,eAAe;oBACvB;gBACF;YACF;QACF;QACAC,qBAAoB1B,SAAS;YAC3B,OAAO;gBACL,GAAGA,SAAS;gBACZwB,SAAQhC,KAAK;oBACXQ,WAAWwB,UAAUhC;oBACrBlB,YAAYO,OAAO,EAAE8C;oBAErB,IAAI,CAAC1E,aAAa;wBAChBlB,SAAS;oBACX;oBACAlB,yBAAyByD,YAAYO,OAAO,EAAE;gBAChD;YACF;QACF;QACA+C,wBAAuB5B,SAAS;YAC9B,OAAO;gBACL,iBAAiBzB,cAAcsD,EAAE;gBACjC1D;gBACA,GAAG6B,SAAS;gBACZwB,SAAQhC,KAAK;oBACXQ,WAAWwB,UAAUhC;oBACrBlB,YAAYO,OAAO,EAAE8C;oBACrB,IAAIxD,SAAS;wBACXQ,qBAAqBE,OAAO,GAAGC;oBACjC;oBACAV,WAAW,CAAC0D,OAAS,CAACA;gBACxB;YACF;QACF;IACF;AACF"}
+{"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 { TRANSITION_CONFIG } from \"../transition/config.js\";\nimport { type TransitionEnterHandler } from \"../transition/types.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 * @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 * @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 * @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 * @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    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\": \"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      const isTransitionCompleteSkipped =\n        !disableTransition && !TRANSITION_CONFIG.disabled;\n\n      const handleEntering =\n        (callback: TransitionEnterHandler = noop, skipped: boolean) =>\n        (appearing: boolean) => {\n          callback(appearing);\n\n          if (skipped) {\n            return;\n          }\n\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\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        onEnter: handleEntering(onEnter, false),\n        onEntered: handleEntering(onEntered, isTransitionCompleteSkipped),\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","TRANSITION_CONFIG","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","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","isTransitionCompleteSkipped","disabled","handleEntering","callback","skipped","appearing","onRequestClose","contains","document","activeElement","nodeRef","nextValue","i","indexOf","push","splice","nextQuery","onClick","stopPropagation","getClearButtonProps","focus","getDropdownButtonProps","id","prev"],"mappings":"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"}

package/dist/autocomplete/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/autocomplete/utils.ts"],"sourcesContent":["import { type RefObject } from \"react\";\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<Option extends AutocompleteOption> {\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  getOptionLabel: AutocompleteGetOptionLabel<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<Option extends AutocompleteOption> {\n  value: Option | null | readonly Option[];\n  getOptionLabel: AutocompleteGetOptionLabel<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> {\n  value: Option | readonly Option[] | null;\n  visible: boolean;\n  container: HTMLElement | null;\n  popupRef: RefObject<HTMLElement>;\n  comboboxRef: RefObject<EditableHTMLElement>;\n  getOptionLabel: AutocompleteGetOptionLabel<Option>;\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":"AACA,SAEEA,wBAAwB,QACnB,mBAAmB;AAE1B,SAASC,sBAAsB,QAAQ,gBAAgB;AAuBvD;;;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;AAYA;;;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;AAmBA;;;;;;;;;;;;;;;;;;;;;;;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<Option extends AutocompleteOption> {\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  getOptionLabel: AutocompleteGetOptionLabel<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<Option extends AutocompleteOption> {\n  value: Option | null | readonly Option[];\n  getOptionLabel: AutocompleteGetOptionLabel<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> {\n  value: Option | readonly Option[] | null;\n  visible: boolean;\n  container: HTMLElement | null;\n  popupRef: RefObject<HTMLElement>;\n  comboboxRef: RefObject<EditableHTMLElement>;\n  getOptionLabel: AutocompleteGetOptionLabel<Option>;\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;AAuBvD;;;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;AAYA;;;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;AAmBA;;;;;;;;;;;;;;;;;;;;;;;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"}

package/dist/avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/avatar/Avatar.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type HTMLAttributes,\n  type ImgHTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { avatar, avatarImage, type AvatarClassNameOptions } from \"./styles.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-avatar-background-color\"?: string;\n    \"--rmd-avatar-color\"?: string;\n    \"--rmd-avatar-border-color\"?: string;\n    \"--rmd-avatar-border-radius\"?: string | number;\n    \"--rmd-avatar-size\"?: string | number;\n    \"--rmd-avatar-font-size\"?: string | number;\n  }\n}\n\nexport type AvatarImgAttributes = ImgHTMLAttributes<HTMLImageElement>;\n\n/**\n * @since 6.0.0 `aria-hidden` is set to `true` by default and removed\n * the `role=\"presentation\"`.\n */\nexport interface AvatarProps\n  extends Omit<HTMLAttributes<HTMLSpanElement>, \"color\">,\n    AvatarClassNameOptions {\n  /**\n   * Since avatars are normally presentational data, they are hidden from screen\n   * readers by default.\n   *\n   * @defaultValue `true`\n   */\n  \"aria-hidden\"?: HTMLAttributes<HTMLSpanElement>[\"aria-hidden\"];\n\n  /**\n   * This should be an image `src` attribute to create an avatar from. When this\n   * prop is defined, you should not add any children to the avatar as the\n   * positioning will break.\n   */\n  src?: string;\n\n  /**\n   * An optional alt tag to display on the `<img>` when the `src` prop is also\n   * applied.\n   *\n   * For accessibility and screen readers, you normally do not want to actually\n   * provide this prop. This should only be used if the `Avatar` is not\n   * accompanied by some other component or main content as it will be extra\n   * noise for screen readers.\n   *\n   * @defaultValue `\"\"`\n   */\n  alt?: string;\n\n  /**\n   * An optional `referrerPolicy` to provide to the `<img>` element if the `src`\n   * or `imgProps` props are provided.\n   *\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-referrerpolicy|Referrer Policy}\n   *\n   * @since 2.2.0\n   */\n  referrerPolicy?: AvatarImgAttributes[\"referrerPolicy\"];\n\n  /**\n   * An optional object of image props and ref that can be used to create an\n   * image within the `Avatar`. This can be useful to add a custom `style`\n   * or`className` to the `<img>` element if that additional customization is\n   * needed.\n   *\n   * Note: The values in this object will override the `src`, `alt`, and\n   * `referrerPolicy` root level avatar props if they exist on this object.\n   *\n   * @since 2.2.0\n   */\n  imgProps?: PropsWithRef<AvatarImgAttributes, HTMLImageElement>;\n}\n\n/**\n * An `Avatar` is generally used to represent objects or people within your app.\n * The avatar can consist of an image, an icon, or some text to display. When\n * the avatar is not an image, different themes can be applied to make the\n * avatar more unique.\n *\n * @example Simple Example\n * ```tsx\n * import { Avatar } from \"@react-md/core\";\n * import { type ReactElement } from \"react\";\n *\n * export function Example(): ReactElement {\n *   return <Avatar src=\"/path-to-img.png\" />;\n * }\n * ```\n *\n * @since 6.0.0 `aria-hidden` is set to `true` by default.\n */\nexport const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(\n  function Avatar(props, ref) {\n    const {\n      \"aria-hidden\": ariaHidden = true,\n      className,\n      children,\n      src,\n      alt = \"\",\n      size = \"avatar\",\n      color = \"\",\n      theme,\n      imgProps,\n      referrerPolicy,\n      ...remaining\n    } = props;\n\n    let img: ReactNode;\n    if (src || imgProps) {\n      img = (\n        <img\n          src={src}\n          alt={alt}\n          referrerPolicy={referrerPolicy}\n          {...imgProps}\n          className={avatarImage({ className: imgProps?.className })}\n        />\n      );\n    }\n\n    return (\n      <span\n        {...remaining}\n        aria-hidden={ariaHidden}\n        ref={ref}\n        className={avatar({\n          size,\n          color,\n          theme,\n          className,\n        })}\n      >\n        {img}\n        {children}\n      </span>\n    );\n  }\n);\n"],"names":["forwardRef","avatar","avatarImage","Avatar","props","ref","ariaHidden","className","children","src","alt","size","color","theme","imgProps","referrerPolicy","remaining","img","span","aria-hidden"],"mappings":";AAAA,SACEA,UAAU,QAIL,QAAQ;AAEf,SAASC,MAAM,EAAEC,WAAW,QAAqC,cAAc;AA0E/E;;;;;;;;;;;;;;;;;CAiBC,GACD,OAAO,MAAMC,uBAASH,WACpB,SAASG,OAAOC,KAAK,EAAEC,GAAG;IACxB,MAAM,EACJ,eAAeC,aAAa,IAAI,EAChCC,SAAS,EACTC,QAAQ,EACRC,GAAG,EACHC,MAAM,EAAE,EACRC,OAAO,QAAQ,EACfC,QAAQ,EAAE,EACVC,KAAK,EACLC,QAAQ,EACRC,cAAc,EACd,GAAGC,WACJ,GAAGZ;IAEJ,IAAIa;IACJ,IAAIR,OAAOK,UAAU;QACnBG,oBACE,KAACA;YACCR,KAAKA;YACLC,KAAKA;YACLK,gBAAgBA;YACf,GAAGD,QAAQ;YACZP,WAAWL,YAAY;gBAAEK,WAAWO,UAAUP;YAAU;;IAG9D;IAEA,qBACE,MAACW;QACE,GAAGF,SAAS;QACbG,eAAab;QACbD,KAAKA;QACLE,WAAWN,OAAO;YAChBU;YACAC;YACAC;YACAN;QACF;;YAECU;YACAT;;;AAGP,GACA"}
+{"version":3,"sources":["../../src/avatar/Avatar.tsx"],"sourcesContent":["import {\n  type HTMLAttributes,\n  type ImgHTMLAttributes,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\n\nimport { type PropsWithRef } from \"../types.js\";\nimport { type AvatarClassNameOptions, avatar, avatarImage } from \"./styles.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-avatar-background-color\"?: string;\n    \"--rmd-avatar-color\"?: string;\n    \"--rmd-avatar-border-color\"?: string;\n    \"--rmd-avatar-border-radius\"?: string | number;\n    \"--rmd-avatar-size\"?: string | number;\n    \"--rmd-avatar-font-size\"?: string | number;\n  }\n}\n\nexport type AvatarImgAttributes = ImgHTMLAttributes<HTMLImageElement>;\n\n/**\n * @since 6.0.0 `aria-hidden` is set to `true` by default and removed\n * the `role=\"presentation\"`.\n */\nexport interface AvatarProps\n  extends Omit<HTMLAttributes<HTMLSpanElement>, \"color\">,\n    AvatarClassNameOptions {\n  /**\n   * Since avatars are normally presentational data, they are hidden from screen\n   * readers by default.\n   *\n   * @defaultValue `true`\n   */\n  \"aria-hidden\"?: HTMLAttributes<HTMLSpanElement>[\"aria-hidden\"];\n\n  /**\n   * This should be an image `src` attribute to create an avatar from. When this\n   * prop is defined, you should not add any children to the avatar as the\n   * positioning will break.\n   */\n  src?: string;\n\n  /**\n   * An optional alt tag to display on the `<img>` when the `src` prop is also\n   * applied.\n   *\n   * For accessibility and screen readers, you normally do not want to actually\n   * provide this prop. This should only be used if the `Avatar` is not\n   * accompanied by some other component or main content as it will be extra\n   * noise for screen readers.\n   *\n   * @defaultValue `\"\"`\n   */\n  alt?: string;\n\n  /**\n   * An optional `referrerPolicy` to provide to the `<img>` element if the `src`\n   * or `imgProps` props are provided.\n   *\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-referrerpolicy|Referrer Policy}\n   *\n   * @since 2.2.0\n   */\n  referrerPolicy?: AvatarImgAttributes[\"referrerPolicy\"];\n\n  /**\n   * An optional object of image props and ref that can be used to create an\n   * image within the `Avatar`. This can be useful to add a custom `style`\n   * or`className` to the `<img>` element if that additional customization is\n   * needed.\n   *\n   * Note: The values in this object will override the `src`, `alt`, and\n   * `referrerPolicy` root level avatar props if they exist on this object.\n   *\n   * @since 2.2.0\n   */\n  imgProps?: PropsWithRef<AvatarImgAttributes, HTMLImageElement>;\n}\n\n/**\n * An `Avatar` is generally used to represent objects or people within your app.\n * The avatar can consist of an image, an icon, or some text to display. When\n * the avatar is not an image, different themes can be applied to make the\n * avatar more unique.\n *\n * @example Simple Example\n * ```tsx\n * import { Avatar } from \"@react-md/core\";\n * import { type ReactElement } from \"react\";\n *\n * export function Example(): ReactElement {\n *   return <Avatar src=\"/path-to-img.png\" />;\n * }\n * ```\n *\n * @since 6.0.0 `aria-hidden` is set to `true` by default.\n */\nexport const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(\n  function Avatar(props, ref) {\n    const {\n      \"aria-hidden\": ariaHidden = true,\n      className,\n      children,\n      src,\n      alt = \"\",\n      size = \"avatar\",\n      color = \"\",\n      theme,\n      imgProps,\n      referrerPolicy,\n      ...remaining\n    } = props;\n\n    let img: ReactNode;\n    if (src || imgProps) {\n      img = (\n        <img\n          src={src}\n          alt={alt}\n          referrerPolicy={referrerPolicy}\n          {...imgProps}\n          className={avatarImage({ className: imgProps?.className })}\n        />\n      );\n    }\n\n    return (\n      <span\n        {...remaining}\n        aria-hidden={ariaHidden}\n        ref={ref}\n        className={avatar({\n          size,\n          color,\n          theme,\n          className,\n        })}\n      >\n        {img}\n        {children}\n      </span>\n    );\n  }\n);\n"],"names":["forwardRef","avatar","avatarImage","Avatar","props","ref","ariaHidden","className","children","src","alt","size","color","theme","imgProps","referrerPolicy","remaining","img","span","aria-hidden"],"mappings":";AAAA,SAIEA,UAAU,QACL,QAAQ;AAGf,SAAsCC,MAAM,EAAEC,WAAW,QAAQ,cAAc;AA0E/E;;;;;;;;;;;;;;;;;CAiBC,GACD,OAAO,MAAMC,uBAASH,WACpB,SAASG,OAAOC,KAAK,EAAEC,GAAG;IACxB,MAAM,EACJ,eAAeC,aAAa,IAAI,EAChCC,SAAS,EACTC,QAAQ,EACRC,GAAG,EACHC,MAAM,EAAE,EACRC,OAAO,QAAQ,EACfC,QAAQ,EAAE,EACVC,KAAK,EACLC,QAAQ,EACRC,cAAc,EACd,GAAGC,WACJ,GAAGZ;IAEJ,IAAIa;IACJ,IAAIR,OAAOK,UAAU;QACnBG,oBACE,KAACA;YACCR,KAAKA;YACLC,KAAKA;YACLK,gBAAgBA;YACf,GAAGD,QAAQ;YACZP,WAAWL,YAAY;gBAAEK,WAAWO,UAAUP;YAAU;;IAG9D;IAEA,qBACE,MAACW;QACE,GAAGF,SAAS;QACbG,eAAab;QACbD,KAAKA;QACLE,WAAWN,OAAO;YAChBU;YACAC;YACAC;YACAN;QACF;;YAECU;YACAT;;;AAGP,GACA"}

package/dist/avatar/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/avatar/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { cssUtils, type ThemeColor } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-avatar\");\n\n/** @since 6.0.0 */\nexport interface AvatarClassNameOptions {\n  className?: string;\n\n  /**\n   * An optional color to apply to the avatar. This will apply a className of\n   * `rmd-avatar--${color}`, so only the keys from the `$rmd-avatar-colors` Map\n   * are supported by default. It is recommended to create custom colors using\n   * the `rmd-avatar-theme-update-var` mixin with custom class names if the\n   * default colors aren't extensive enough.\n   *\n   * @see {@link theme}\n   * @defaultValue `\"\"`\n   */\n  color?: string;\n\n  /**\n   * @defaultValue `\"avatar\"`\n   */\n  size?: \"avatar\" | \"icon\";\n\n  /**\n   * This can be used instead of {@link color} to set the background color to one of\n   * the theme colors. This will also set the text color to either be `#000` or\n   * `#fff` automatically to enforce the correct aspect ratio.\n   */\n  theme?: ThemeColor;\n}\n\n/**\n * @since 6.0.0\n */\nexport function avatar(options: AvatarClassNameOptions): string {\n  const { className, color = \"\", size, theme } = options;\n\n  return cnb(\n    styles({ [color]: color, icon: size === \"icon\" }),\n    cssUtils({ backgroundColor: theme }),\n    className\n  );\n}\n\n/** @since 6.0.0 */\nexport interface AvatarImageClassNameOptions {\n  className?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function avatarImage(options: AvatarImageClassNameOptions = {}): string {\n  const { className } = options;\n\n  return cnb(styles(\"image\"), className);\n}\n"],"names":["cnb","cssUtils","bem","styles","avatar","options","className","color","size","theme","icon","backgroundColor","avatarImage"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,QAAQ,QAAyB,iBAAiB;AAC3D,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AA+BnB;;CAEC,GACD,OAAO,SAASE,OAAOC,OAA+B;IACpD,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAE,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGJ;IAE/C,OAAOL,IACLG,OAAO;QAAE,CAACI,MAAM,EAAEA;QAAOG,MAAMF,SAAS;IAAO,IAC/CP,SAAS;QAAEU,iBAAiBF;IAAM,IAClCH;AAEJ;AAOA;;CAEC,GACD,OAAO,SAASM,YAAYP,UAAuC,CAAC,CAAC;IACnE,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IAAIG,OAAO,UAAUG;AAC9B"}
+{"version":3,"sources":["../../src/avatar/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { type ThemeColor, cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-avatar\");\n\n/** @since 6.0.0 */\nexport interface AvatarClassNameOptions {\n  className?: string;\n\n  /**\n   * An optional color to apply to the avatar. This will apply a className of\n   * `rmd-avatar--${color}`, so only the keys from the `$rmd-avatar-colors` Map\n   * are supported by default. It is recommended to create custom colors using\n   * the `rmd-avatar-theme-update-var` mixin with custom class names if the\n   * default colors aren't extensive enough.\n   *\n   * @see {@link theme}\n   * @defaultValue `\"\"`\n   */\n  color?: string;\n\n  /**\n   * @defaultValue `\"avatar\"`\n   */\n  size?: \"avatar\" | \"icon\";\n\n  /**\n   * This can be used instead of {@link color} to set the background color to one of\n   * the theme colors. This will also set the text color to either be `#000` or\n   * `#fff` automatically to enforce the correct aspect ratio.\n   */\n  theme?: ThemeColor;\n}\n\n/**\n * @since 6.0.0\n */\nexport function avatar(options: AvatarClassNameOptions): string {\n  const { className, color = \"\", size, theme } = options;\n\n  return cnb(\n    styles({ [color]: color, icon: size === \"icon\" }),\n    cssUtils({ backgroundColor: theme }),\n    className\n  );\n}\n\n/** @since 6.0.0 */\nexport interface AvatarImageClassNameOptions {\n  className?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function avatarImage(options: AvatarImageClassNameOptions = {}): string {\n  const { className } = options;\n\n  return cnb(styles(\"image\"), className);\n}\n"],"names":["cnb","cssUtils","bem","styles","avatar","options","className","color","size","theme","icon","backgroundColor","avatarImage"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAA0BC,QAAQ,QAAQ,iBAAiB;AAC3D,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AA+BnB;;CAEC,GACD,OAAO,SAASE,OAAOC,OAA+B;IACpD,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAE,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGJ;IAE/C,OAAOL,IACLG,OAAO;QAAE,CAACI,MAAM,EAAEA;QAAOG,MAAMF,SAAS;IAAO,IAC/CP,SAAS;QAAEU,iBAAiBF;IAAM,IAClCH;AAEJ;AAOA;;CAEC,GACD,OAAO,SAASM,YAAYP,UAAuC,CAAC,CAAC;IACnE,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IAAIG,OAAO,UAAUG;AAC9B"}

package/dist/badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/badge/Badge.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport { badge, type BadgeTheme } from \"./styles.js\";\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  /** @defaultValue `\"greyscale\"` */\n  theme?: BadgeTheme;\n\n  children: ReactNode;\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { Badge, Button, MaterialSymbol } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <>\n *       <Badge>3</Badge>\n *       <Badge theme=\"primary\">100</Badge>\n *       <Badge theme=\"secondary\">23</Badge>\n *       <Badge theme=\"greyscale\">18</Badge>\n *       <Badge theme=\"clear\">1</Badge>\n *     </>\n *   );\n * }\n * ```\n *\n * @example Within Buttons Example\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { Badge, Button, MaterialSymbol } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <Button aria-label=\"Notifications\" buttonType=\"icon\">\n *       <Badge>88</Badge>\n *       <MaterialSymbol name=\"notifications\" />\n *     </Button>\n *   );\n * }\n * ```\n *\n * @since 6.0.0 Removed the `disableNullOnZero` feature since it's\n * easier just to use condition rendering yourself.\n */\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(\n  function Badge(props, ref) {\n    const { children, className, theme, ...remaining } = props;\n    return (\n      <span {...remaining} ref={ref} className={badge({ theme, className })}>\n        {children}\n      </span>\n    );\n  }\n);\n"],"names":["forwardRef","badge","Badge","props","ref","children","className","theme","remaining","span"],"mappings":";AAAA,SAASA,UAAU,QAA6C,QAAQ;AACxE,SAASC,KAAK,QAAyB,cAAc;AASrD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCC,GACD,OAAO,MAAMC,sBAAQF,WACnB,SAASE,MAAMC,KAAK,EAAEC,GAAG;IACvB,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,KAAK,EAAE,GAAGC,WAAW,GAAGL;IACrD,qBACE,KAACM;QAAM,GAAGD,SAAS;QAAEJ,KAAKA;QAAKE,WAAWL,MAAM;YAAEM;YAAOD;QAAU;kBAChED;;AAGP,GACA"}
+{"version":3,"sources":["../../src/badge/Badge.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode, forwardRef } from \"react\";\n\nimport { type BadgeTheme, badge } from \"./styles.js\";\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  /** @defaultValue `\"greyscale\"` */\n  theme?: BadgeTheme;\n\n  children: ReactNode;\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { Badge, Button, MaterialSymbol } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <>\n *       <Badge>3</Badge>\n *       <Badge theme=\"primary\">100</Badge>\n *       <Badge theme=\"secondary\">23</Badge>\n *       <Badge theme=\"greyscale\">18</Badge>\n *       <Badge theme=\"clear\">1</Badge>\n *     </>\n *   );\n * }\n * ```\n *\n * @example Within Buttons Example\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { Badge, Button, MaterialSymbol } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <Button aria-label=\"Notifications\" buttonType=\"icon\">\n *       <Badge>88</Badge>\n *       <MaterialSymbol name=\"notifications\" />\n *     </Button>\n *   );\n * }\n * ```\n *\n * @since 6.0.0 Removed the `disableNullOnZero` feature since it's\n * easier just to use condition rendering yourself.\n */\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(\n  function Badge(props, ref) {\n    const { children, className, theme, ...remaining } = props;\n    return (\n      <span {...remaining} ref={ref} className={badge({ theme, className })}>\n        {children}\n      </span>\n    );\n  }\n);\n"],"names":["forwardRef","badge","Badge","props","ref","children","className","theme","remaining","span"],"mappings":";AAAA,SAA8CA,UAAU,QAAQ,QAAQ;AAExE,SAA0BC,KAAK,QAAQ,cAAc;AASrD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCC,GACD,OAAO,MAAMC,sBAAQF,WACnB,SAASE,MAAMC,KAAK,EAAEC,GAAG;IACvB,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,KAAK,EAAE,GAAGC,WAAW,GAAGL;IACrD,qBACE,KAACM;QAAM,GAAGD,SAAS;QAAEJ,KAAKA;QAAKE,WAAWL,MAAM;YAAEM;YAAOD;QAAU;kBAChED;;AAGP,GACA"}

package/dist/badge/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/badge/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { type BackgroundColor, cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-badge-size\"?: string | number;\n    \"--rmd-badge-offset\"?: string | number;\n    \"--rmd-badge-offset-top\"?: string | number;\n    \"--rmd-badge-offset-right\"?: string | number;\n  }\n}\n\nconst styles = bem(\"rmd-badge\");\n\n/**\n * @since 6.0.0 Renamed `\"default\"` to `\"greyscale\"` and added all\n * theme colors.\n */\nexport type BadgeTheme = BackgroundColor | \"greyscale\" | \"clear\";\n\n/**\n * @since 6.0.0\n */\nexport interface BadgeClassNameOptions {\n  className?: string;\n\n  /** @defaultValue `\"\"greyscale` */\n  theme?: BadgeTheme;\n}\n\n/**\n * @since 6.0.0\n */\nexport function badge(options: BadgeClassNameOptions = {}): string {\n  const { className, theme = \"greyscale\" } = options;\n  const greyscale = theme === \"greyscale\";\n  const clear = theme === \"clear\";\n\n  return cnb(\n    styles({ greyscale }),\n    cssUtils({ backgroundColor: !clear && !greyscale ? theme : undefined }),\n    className\n  );\n}\n"],"names":["cnb","cssUtils","bem","styles","badge","options","className","theme","greyscale","clear","backgroundColor","undefined"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAA+BC,QAAQ,QAAQ,iBAAiB;AAChE,SAASC,GAAG,QAAQ,kBAAkB;AAWtC,MAAMC,SAASD,IAAI;AAkBnB;;CAEC,GACD,OAAO,SAASE,MAAMC,UAAiC,CAAC,CAAC;IACvD,MAAM,EAAEC,SAAS,EAAEC,QAAQ,WAAW,EAAE,GAAGF;IAC3C,MAAMG,YAAYD,UAAU;IAC5B,MAAME,QAAQF,UAAU;IAExB,OAAOP,IACLG,OAAO;QAAEK;IAAU,IACnBP,SAAS;QAAES,iBAAiB,CAACD,SAAS,CAACD,YAAYD,QAAQI;IAAU,IACrEL;AAEJ"}
+{"version":3,"sources":["../../src/badge/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { type BackgroundColor, cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-badge-size\"?: string | number;\n    \"--rmd-badge-offset\"?: string | number;\n    \"--rmd-badge-offset-top\"?: string | number;\n    \"--rmd-badge-offset-right\"?: string | number;\n  }\n}\n\nconst styles = bem(\"rmd-badge\");\n\n/**\n * @since 6.0.0 Renamed `\"default\"` to `\"greyscale\"` and added all\n * theme colors.\n */\nexport type BadgeTheme = BackgroundColor | \"greyscale\" | \"clear\";\n\n/**\n * @since 6.0.0\n */\nexport interface BadgeClassNameOptions {\n  className?: string;\n\n  /** @defaultValue `\"\"greyscale` */\n  theme?: BadgeTheme;\n}\n\n/**\n * @since 6.0.0\n */\nexport function badge(options: BadgeClassNameOptions = {}): string {\n  const { className, theme = \"greyscale\" } = options;\n  const greyscale = theme === \"greyscale\";\n  const clear = theme === \"clear\";\n\n  return cnb(\n    styles({ greyscale }),\n    cssUtils({ backgroundColor: !clear && !greyscale ? theme : undefined }),\n    className\n  );\n}\n"],"names":["cnb","cssUtils","bem","styles","badge","options","className","theme","greyscale","clear","backgroundColor","undefined"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAA+BC,QAAQ,QAAQ,iBAAiB;AAChE,SAASC,GAAG,QAAQ,kBAAkB;AAWtC,MAAMC,SAASD,IAAI;AAkBnB;;CAEC,GACD,OAAO,SAASE,MAAMC,UAAiC,CAAC,CAAC;IACvD,MAAM,EAAEC,SAAS,EAAEC,QAAQ,WAAW,EAAE,GAAGF;IAC3C,MAAMG,YAAYD,UAAU;IAC5B,MAAME,QAAQF,UAAU;IAExB,OAAOP,IACLG,OAAO;QAAEK;IAAU,IACnBP,SAAS;QAAES,iBAAiB,CAACD,SAAS,CAACD,YAAYD,QAAQI;IAAU,IACrEL;AAEJ"}

package/dist/box/Box.js

@@ -99,7 +99,7 @@ import { box } from "./styles.js";
  *
  * @since 6.0.0
  */ export const Box = /*#__PURE__*/ forwardRef(function Box(props, ref) {
-    const { style: propStyle, className, children, align, grid, gridName, justify, stacked, reversed, gridColumns, fullWidth, disableGap, disableWrap, disablePadding, ...remaining } = props;
+    const { style: propStyle, className, children, align, grid, gridName, justify, stacked, reversed, gridColumns, gridAutoRows, fullWidth, disableGap, disableWrap, disablePadding, ...remaining } = props;
     let style = propStyle;
     if (typeof gridColumns === "number") {
         style = {
@@ -118,6 +118,7 @@ import { box } from "./styles.js";
             stacked,
             gridName,
             gridColumns,
+            gridAutoRows,
             align,
             justify,
             reversed,

package/dist/box/Box.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/box/Box.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from \"react\";\nimport { box, type BoxOptions } from \"./styles.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface BoxProps extends HTMLAttributes<HTMLDivElement>, BoxOptions {}\n\n/**\n * The `Box` component is a wrapper around the CSS box model and should solve\n * most of your `flex` and `grid` layout requirements for responsive design.\n * There are pass-through props for all of the box module styling properties\n * available by default.\n *\n * @example Default Styles\n * ```scss\n * .box {\n *   align-items: center;\n *   display: flex;\n *   flex-wrap: wrap;\n *   gap: 1rem;\n *   padding: 1rem;\n * }\n * ```\n *\n * ```tsx\n * import { Box } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * export default function Example(): ReactElement {\n *   return (\n *     <Box>\n *       <div>Thing 1</div>\n *       <div>Thing 2</div>\n *       <div>Thing 3</div>\n *       <div>Thing 4</div>\n *       <div>Thing 5</div>\n *     </Box>\n *   ):\n * }\n * ```\n *\n * @example Default Grid Styles\n * ```scss\n * .box {\n *   align-items: center;\n *   display: grid;\n *   grid-gap: 1rem;\n *   grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));\n *   padding: 1rem;\n * }\n * ```\n *\n * ```tsx\n * import { Box } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * export default function Example(): ReactElement {\n *   return (\n *     <Box grid>\n *       <div>Thing 1</div>\n *       <div>Thing 2</div>\n *       <div>Thing 3</div>\n *       <div>Thing 4</div>\n *       <div>Thing 5</div>\n *     </Box>\n *   ):\n * }\n * ```\n *\n * @example Custom Grid\n * ```scss\n * @use \"@react-md/core\" with (\n *   $box-grids: (\n *     small: (\n *       min: 5rem,\n *     ),\n *     medium: (\n *       min: 7rem,\n *       padding: 2rem,\n *       gap: 0.5rem,\n *     ),\n *   )\n * );\n *\n * ```\n *\n * ```tsx\n * import { Box } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * export default function Example(): ReactElement {\n *   return (\n *     <Box grid gridName=\"medium\">\n *       <div>Thing 1</div>\n *       <div>Thing 2</div>\n *       <div>Thing 3</div>\n *       <div>Thing 4</div>\n *       <div>Thing 5</div>\n *     </Box>\n *   ):\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport const Box = forwardRef<HTMLDivElement, BoxProps>(\n  function Box(props, ref) {\n    const {\n      style: propStyle,\n      className,\n      children,\n      align,\n      grid,\n      gridName,\n      justify,\n      stacked,\n      reversed,\n      gridColumns,\n      fullWidth,\n      disableGap,\n      disableWrap,\n      disablePadding,\n      ...remaining\n    } = props;\n\n    let style = propStyle;\n    if (typeof gridColumns === \"number\") {\n      style = {\n        ...propStyle,\n        \"--rmd-box-columns\": gridColumns,\n      };\n    }\n\n    return (\n      <div\n        {...remaining}\n        style={style}\n        ref={ref}\n        className={box({\n          className,\n          fullWidth,\n          grid,\n          stacked,\n          gridName,\n          gridColumns,\n          align,\n          justify,\n          reversed,\n          disableGap,\n          disableWrap,\n          disablePadding,\n        })}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["forwardRef","box","Box","props","ref","style","propStyle","className","children","align","grid","gridName","justify","stacked","reversed","gridColumns","fullWidth","disableGap","disableWrap","disablePadding","remaining","div"],"mappings":";AAAA,SAASA,UAAU,QAA6B,QAAQ;AACxD,SAASC,GAAG,QAAyB,cAAc;AAOnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiGC,GACD,OAAO,MAAMC,oBAAMF,WACjB,SAASE,IAAIC,KAAK,EAAEC,GAAG;IACrB,MAAM,EACJC,OAAOC,SAAS,EAChBC,SAAS,EACTC,QAAQ,EACRC,KAAK,EACLC,IAAI,EACJC,QAAQ,EACRC,OAAO,EACPC,OAAO,EACPC,QAAQ,EACRC,WAAW,EACXC,SAAS,EACTC,UAAU,EACVC,WAAW,EACXC,cAAc,EACd,GAAGC,WACJ,GAAGjB;IAEJ,IAAIE,QAAQC;IACZ,IAAI,OAAOS,gBAAgB,UAAU;QACnCV,QAAQ;YACN,GAAGC,SAAS;YACZ,qBAAqBS;QACvB;IACF;IAEA,qBACE,KAACM;QACE,GAAGD,SAAS;QACbf,OAAOA;QACPD,KAAKA;QACLG,WAAWN,IAAI;YACbM;YACAS;YACAN;YACAG;YACAF;YACAI;YACAN;YACAG;YACAE;YACAG;YACAC;YACAC;QACF;kBAECX;;AAGP,GACA"}
+{"version":3,"sources":["../../src/box/Box.tsx"],"sourcesContent":["import { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { type BoxOptions, box } from \"./styles.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface BoxProps extends HTMLAttributes<HTMLDivElement>, BoxOptions {}\n\n/**\n * The `Box` component is a wrapper around the CSS box model and should solve\n * most of your `flex` and `grid` layout requirements for responsive design.\n * There are pass-through props for all of the box module styling properties\n * available by default.\n *\n * @example Default Styles\n * ```scss\n * .box {\n *   align-items: center;\n *   display: flex;\n *   flex-wrap: wrap;\n *   gap: 1rem;\n *   padding: 1rem;\n * }\n * ```\n *\n * ```tsx\n * import { Box } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * export default function Example(): ReactElement {\n *   return (\n *     <Box>\n *       <div>Thing 1</div>\n *       <div>Thing 2</div>\n *       <div>Thing 3</div>\n *       <div>Thing 4</div>\n *       <div>Thing 5</div>\n *     </Box>\n *   ):\n * }\n * ```\n *\n * @example Default Grid Styles\n * ```scss\n * .box {\n *   align-items: center;\n *   display: grid;\n *   grid-gap: 1rem;\n *   grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));\n *   padding: 1rem;\n * }\n * ```\n *\n * ```tsx\n * import { Box } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * export default function Example(): ReactElement {\n *   return (\n *     <Box grid>\n *       <div>Thing 1</div>\n *       <div>Thing 2</div>\n *       <div>Thing 3</div>\n *       <div>Thing 4</div>\n *       <div>Thing 5</div>\n *     </Box>\n *   ):\n * }\n * ```\n *\n * @example Custom Grid\n * ```scss\n * @use \"@react-md/core\" with (\n *   $box-grids: (\n *     small: (\n *       min: 5rem,\n *     ),\n *     medium: (\n *       min: 7rem,\n *       padding: 2rem,\n *       gap: 0.5rem,\n *     ),\n *   )\n * );\n *\n * ```\n *\n * ```tsx\n * import { Box } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * export default function Example(): ReactElement {\n *   return (\n *     <Box grid gridName=\"medium\">\n *       <div>Thing 1</div>\n *       <div>Thing 2</div>\n *       <div>Thing 3</div>\n *       <div>Thing 4</div>\n *       <div>Thing 5</div>\n *     </Box>\n *   ):\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport const Box = forwardRef<HTMLDivElement, BoxProps>(\n  function Box(props, ref) {\n    const {\n      style: propStyle,\n      className,\n      children,\n      align,\n      grid,\n      gridName,\n      justify,\n      stacked,\n      reversed,\n      gridColumns,\n      gridAutoRows,\n      fullWidth,\n      disableGap,\n      disableWrap,\n      disablePadding,\n      ...remaining\n    } = props;\n\n    let style = propStyle;\n    if (typeof gridColumns === \"number\") {\n      style = {\n        ...propStyle,\n        \"--rmd-box-columns\": gridColumns,\n      };\n    }\n\n    return (\n      <div\n        {...remaining}\n        style={style}\n        ref={ref}\n        className={box({\n          className,\n          fullWidth,\n          grid,\n          stacked,\n          gridName,\n          gridColumns,\n          gridAutoRows,\n          align,\n          justify,\n          reversed,\n          disableGap,\n          disableWrap,\n          disablePadding,\n        })}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["forwardRef","box","Box","props","ref","style","propStyle","className","children","align","grid","gridName","justify","stacked","reversed","gridColumns","gridAutoRows","fullWidth","disableGap","disableWrap","disablePadding","remaining","div"],"mappings":";AAAA,SAA8BA,UAAU,QAAQ,QAAQ;AAExD,SAA0BC,GAAG,QAAQ,cAAc;AAOnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiGC,GACD,OAAO,MAAMC,oBAAMF,WACjB,SAASE,IAAIC,KAAK,EAAEC,GAAG;IACrB,MAAM,EACJC,OAAOC,SAAS,EAChBC,SAAS,EACTC,QAAQ,EACRC,KAAK,EACLC,IAAI,EACJC,QAAQ,EACRC,OAAO,EACPC,OAAO,EACPC,QAAQ,EACRC,WAAW,EACXC,YAAY,EACZC,SAAS,EACTC,UAAU,EACVC,WAAW,EACXC,cAAc,EACd,GAAGC,WACJ,GAAGlB;IAEJ,IAAIE,QAAQC;IACZ,IAAI,OAAOS,gBAAgB,UAAU;QACnCV,QAAQ;YACN,GAAGC,SAAS;YACZ,qBAAqBS;QACvB;IACF;IAEA,qBACE,KAACO;QACE,GAAGD,SAAS;QACbhB,OAAOA;QACPD,KAAKA;QACLG,WAAWN,IAAI;YACbM;YACAU;YACAP;YACAG;YACAF;YACAI;YACAC;YACAP;YACAG;YACAE;YACAI;YACAC;YACAC;QACF;kBAECZ;;AAGP,GACA"}

package/dist/box/_box.scss

@@ -24,6 +24,10 @@ $disable-grid: false !default;
 // @type boolean
 $disable-grid-columns: false !default;
 
+// Set to `true` to disable the styles for the `grid-auto-rows` behavior.
+// @type boolean
+$disable-grid-auto-rows: false !default;
+
 // This is the default `align-items` property value to set if you don't like
 // everything being centered by default. This value is always overridable using
 // the `alignItems` prop on the `Box` component.
@@ -91,7 +95,15 @@ $grids: () !default;
 // The available configurable css variables and mostly used internally for the
 // `get-var`, `set-var`, and `use-var` utils.
 // @type List
-$variables: (gap, padding, item-min-size, columns);
+$variables: (
+  gap,
+  padding,
+  item-min-size,
+  item-min-height,
+  columns,
+  row-max-height,
+  auto-rows-height
+);
 
 // @param {string} name - The supported variable name
 // @param {any} fallback - An optional fallback value
@@ -266,6 +278,17 @@ $variables: (gap, padding, item-min-size, columns);
             }
           }
 
+          @if not $disable-grid-auto-rows {
+            &--grid-auto-rows {
+              grid-auto-rows: minmax(
+                get-var(item-min-height, get-var(item-min-size)),
+                get-var(row-max-height, 1fr)
+              );
+              max-height: get-var(auto-rows-height, 100%);
+              overflow: auto;
+            }
+          }
+
           @each $name, $values in $grids {
             @include custom-grid-class(
               "&--#{$name}",

package/dist/box/styles.d.ts

@@ -81,6 +81,17 @@ export interface BoxOptions {
      * @defaultValue `"fit"`
      */
     gridColumns?: "fit" | "fill" | number;
+    /**
+     * Set this to `true` to enable equal height rows within the grid based
+     * on the current `max-height`. This requires the `max-height` to be set
+     * on the `Box` either by:
+     *
+     * - a custom class name that sets `max-height`
+     * - `core.box-set-var(auto-rows-height, VALUE)` on the box or a parent element
+     *
+     * @defaultValue `false`
+     */
+    gridAutoRows?: boolean;
     /**
      * @defaultValue `""`
      */

package/dist/box/styles.js

@@ -4,7 +4,7 @@ const styles = bem("rmd-box");
 /**
  * @since 6.0.0
  */ export function box(options = {}) {
-    const { className, align = "", grid, gridName = "", gridColumns = "fit", justify = "", stacked, reversed, fullWidth, disableGap, disableWrap, disablePadding } = options;
+    const { className, align = "", grid, gridName = "", gridColumns = "fit", gridAutoRows, justify = "", stacked, reversed, fullWidth, disableGap, disableWrap, disablePadding } = options;
     return cnb(styles({
         gap: !disableGap,
         wrap: !disableWrap,
@@ -14,8 +14,9 @@ const styles = bem("rmd-box");
         "column-reverse": stacked && reversed,
         "full-width": fullWidth,
         grid,
-        "grid-fill": gridColumns === "fill",
-        "grid-columns": typeof gridColumns === "number",
+        "grid-fill": grid && gridColumns === "fill",
+        "grid-columns": grid && typeof gridColumns === "number",
+        "grid-auto-rows": grid && gridAutoRows,
         [gridName]: grid && gridName,
         "align-start": align === "start" || align === "flex-start",
         "align-center": align === "center",

package/dist/box/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/box/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\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-item-min-size\"?: string | number;\n    \"--rmd-box-columns\"?: string | number;\n  }\n}\n\n/**\n * @since 6.0.0\n */\nexport type BoxAlignItems =\n  | \"start\"\n  | \"flex-start\"\n  | \"center\"\n  | \"end\"\n  | \"flex-end\"\n  | \"stretch\";\n\n/**\n * @since 6.0.0\n */\nexport type BoxJustifyContent =\n  | BoxAlignItems\n  | \"space-around\"\n  | \"space-between\"\n  | \"space-evenly\";\n\n/**\n * @since 6.0.0\n */\nexport type BoxFlexDirection = \"row\" | \"column\";\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;\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   * The `gridName` should be `\"small\" | \"medium\"`.\n   *\n   * @defaultValue `\"\"`\n   */\n  gridName?: string;\n\n  /**\n   * @defaultValue `\"fit\"`\n   */\n  gridColumns?: \"fit\" | \"fill\" | number;\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 * @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    justify = \"\",\n    stacked,\n    reversed,\n    fullWidth,\n    disableGap,\n    disableWrap,\n    disablePadding,\n  } = options;\n\n  return cnb(\n    styles({\n      gap: !disableGap,\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\": gridColumns === \"fill\",\n      \"grid-columns\": typeof gridColumns === \"number\",\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"],"names":["cnb","bem","styles","box","options","className","align","grid","gridName","gridColumns","justify","stacked","reversed","fullWidth","disableGap","disableWrap","disablePadding","gap","wrap","padded","column","reverse"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AA0InB;;CAEC,GACD,OAAO,SAASE,IAAIC,UAAsB,CAAC,CAAC;IAC1C,MAAM,EACJC,SAAS,EACTC,QAAQ,EAAE,EACVC,IAAI,EACJC,WAAW,EAAE,EACbC,cAAc,KAAK,EACnBC,UAAU,EAAE,EACZC,OAAO,EACPC,QAAQ,EACRC,SAAS,EACTC,UAAU,EACVC,WAAW,EACXC,cAAc,EACf,GAAGZ;IAEJ,OAAOJ,IACLE,OAAO;QACLe,KAAK,CAACH;QACNI,MAAM,CAACH;QACPI,QAAQ,CAACH;QACTI,QAAQT,WAAW,CAACC;QACpBS,SAAS,CAACV,WAAWC;QACrB,kBAAkBD,WAAWC;QAC7B,cAAcC;QACdN;QACA,aAAaE,gBAAgB;QAC7B,gBAAgB,OAAOA,gBAAgB;QACvC,CAACD,SAAS,EAAED,QAAQC;QACpB,eAAeF,UAAU,WAAWA,UAAU;QAC9C,gBAAgBA,UAAU;QAC1B,aAAaA,UAAU,SAASA,UAAU;QAC1C,iBAAiBA,UAAU;QAC3B,kBAAkBI,YAAY;QAC9B,iBAAiBA,YAAY,WAAWA,YAAY;QACpD,eAAeA,YAAY,SAASA,YAAY;QAChD,mBAAmBA,YAAY;QAC/B,kBAAkBA,YAAY;QAC9B,mBAAmBA,YAAY;QAC/B,kBAAkBA,YAAY;IAChC,IACAL;AAEJ"}
+{"version":3,"sources":["../../src/box/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\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-item-min-size\"?: string | number;\n    \"--rmd-box-columns\"?: string | number;\n  }\n}\n\n/**\n * @since 6.0.0\n */\nexport type BoxAlignItems =\n  | \"start\"\n  | \"flex-start\"\n  | \"center\"\n  | \"end\"\n  | \"flex-end\"\n  | \"stretch\";\n\n/**\n * @since 6.0.0\n */\nexport type BoxJustifyContent =\n  | BoxAlignItems\n  | \"space-around\"\n  | \"space-between\"\n  | \"space-evenly\";\n\n/**\n * @since 6.0.0\n */\nexport type BoxFlexDirection = \"row\" | \"column\";\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;\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   * The `gridName` should be `\"small\" | \"medium\"`.\n   *\n   * @defaultValue `\"\"`\n   */\n  gridName?: string;\n\n  /**\n   * @defaultValue `\"fit\"`\n   */\n  gridColumns?: \"fit\" | \"fill\" | number;\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 * @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    gridAutoRows,\n    justify = \"\",\n    stacked,\n    reversed,\n    fullWidth,\n    disableGap,\n    disableWrap,\n    disablePadding,\n  } = options;\n\n  return cnb(\n    styles({\n      gap: !disableGap,\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-columns\": grid && typeof gridColumns === \"number\",\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"],"names":["cnb","bem","styles","box","options","className","align","grid","gridName","gridColumns","gridAutoRows","justify","stacked","reversed","fullWidth","disableGap","disableWrap","disablePadding","gap","wrap","padded","column","reverse"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAsJnB;;CAEC,GACD,OAAO,SAASE,IAAIC,UAAsB,CAAC,CAAC;IAC1C,MAAM,EACJC,SAAS,EACTC,QAAQ,EAAE,EACVC,IAAI,EACJC,WAAW,EAAE,EACbC,cAAc,KAAK,EACnBC,YAAY,EACZC,UAAU,EAAE,EACZC,OAAO,EACPC,QAAQ,EACRC,SAAS,EACTC,UAAU,EACVC,WAAW,EACXC,cAAc,EACf,GAAGb;IAEJ,OAAOJ,IACLE,OAAO;QACLgB,KAAK,CAACH;QACNI,MAAM,CAACH;QACPI,QAAQ,CAACH;QACTI,QAAQT,WAAW,CAACC;QACpBS,SAAS,CAACV,WAAWC;QACrB,kBAAkBD,WAAWC;QAC7B,cAAcC;QACdP;QACA,aAAaA,QAAQE,gBAAgB;QACrC,gBAAgBF,QAAQ,OAAOE,gBAAgB;QAC/C,kBAAkBF,QAAQG;QAC1B,CAACF,SAAS,EAAED,QAAQC;QACpB,eAAeF,UAAU,WAAWA,UAAU;QAC9C,gBAAgBA,UAAU;QAC1B,aAAaA,UAAU,SAASA,UAAU;QAC1C,iBAAiBA,UAAU;QAC3B,kBAAkBK,YAAY;QAC9B,iBAAiBA,YAAY,WAAWA,YAAY;QACpD,eAAeA,YAAY,SAASA,YAAY;QAChD,mBAAmBA,YAAY;QAC/B,kBAAkBA,YAAY;QAC9B,mBAAmBA,YAAY;QAC/B,kBAAkBA,YAAY;IAChC,IACAN;AAEJ"}

package/dist/button/AsyncButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/button/AsyncButton.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport { forwardRef, type MouseEvent, type ReactNode } from \"react\";\nimport { type BoxAlignItems } from \"../box/styles.js\";\nimport { overlay } from \"../overlay/overlayStyles.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, HTMLDivElement>;\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, HTMLSpanElement>;\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\";\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\";\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 * @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/overlayStyles.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, HTMLDivElement>;\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, HTMLSpanElement>;\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\";\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\";\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 * @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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"}