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

package/src/autocomplete/autocompleteStyles.ts

@@ -2,6 +2,7 @@ import { cnb } from "cnbuilder";
 
 import { cssUtils } from "../cssUtils.js";
 import { bem } from "../utils/bem.js";
+import { type ClearButtonVisibility } from "./types.js";
 
 const styles = bem("rmd-autocomplete");
 
@@ -86,6 +87,8 @@ export function autocompleteDropdownButton(
  */
 export interface AutocompleteClearButtonClassNameOptions {
   className?: string;
+  /** {@inheritDoc ClearButtonVisibility} */
+  visibility?: ClearButtonVisibility;
 }
 
 /**
@@ -94,9 +97,15 @@ export interface AutocompleteClearButtonClassNameOptions {
 export function autocompleteClearButton(
   options: AutocompleteClearButtonClassNameOptions = {}
 ): string {
-  const { className } = options;
+  const { className, visibility = "always" } = options;
 
-  return cnb(styles("clear-button"), className);
+  return cnb(
+    styles("clear-button", {
+      hover: visibility === "active" || visibility === "query",
+      query: visibility === "query",
+    }),
+    className
+  );
 }
 
 /**

package/src/autocomplete/types.ts

@@ -51,8 +51,7 @@ export type AutocompleteLabeledOption = string | { label: string };
 /**
  * @since 6.0.0
  */
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
-export type AutocompleteOption = AutocompleteLabeledOption | {};
+export type AutocompleteOption = AutocompleteLabeledOption | object;
 
 /**
  * @since 6.0.0
@@ -83,37 +82,42 @@ export interface AutocompleteGetOptionPropsOptions<
 }
 
 /**
- * This can be used to add additional props to each option.
- *
- * @example Simple Example
- * ```tsx
- * getOptionProps={({ option }) => {
- *   return {
- *     disabled: option === "",
- *     className: cnb(option === "a" && styles.blue),
- *     leftAddon: option === value && <CheckIcon />,
- *   };
- * }}
- * ```
- * @since 6.0.0
- */
-export type AutocompleteGetOptionProps<Option extends AutocompleteOption> = (
+ * @see {@link AutocompleteGetOptionProps.getOptionProps}
+ * @since 6.0.0
+ */
+export type AutocompleteGetOptionPropsCallback<
+  Option extends AutocompleteOption,
+> = (
   options: AutocompleteGetOptionPropsOptions<Option>
 ) => ConfigurableAutocompleteOptionProps | undefined;
 
 /**
- * This can be used to add additional props to each inline chip for multiselect
- * autocompletes.
- *
- * @example Simple Example
- * ```tsx
- * getChipProps={({ option, index }) => {
- *   return {
- *     disabled: index < 3,
- *     className: cnb(option === "a" && styles.blue)<
- *   };
- * }}
- * ```
+ * @since 6.0.0
+ */
+export interface AutocompleteGetOptionProps<Option extends AutocompleteOption> {
+  /**
+   * This can be used to add additional props to each option.
+   *
+   * @example Simple Example
+   * ```tsx
+   * getOptionProps={({ option }) => {
+   *   return {
+   *     disabled: option === "",
+   *     className: cnb(option === "a" && styles.blue),
+   *     leftAddon: option === value && <CheckIcon />,
+   *   };
+   * }}
+   * ```
+   *
+   * @see {@link AutocompleteGetOptionPropsOptions}
+   * @see {@link AutocompleteGetOptionPropsCallback}
+   * @since 6.0.0
+   */
+  getOptionProps?: AutocompleteGetOptionPropsCallback<Option>;
+}
+
+/**
+ * @see {@link AutocompleteBaseProps.getChipProps}
  * @since 6.0.0
  */
 export type AutocompleteGetChipProps<Option extends AutocompleteOption> = (
@@ -121,41 +125,52 @@ export type AutocompleteGetChipProps<Option extends AutocompleteOption> = (
 ) => Partial<AutocompleteChipProps> | undefined;
 
 /**
- * If the list of options contain an object that doesn't have a
- * `label: string`, this prop must be provided to extract a string to display
- * in the text field once selected.
- *
- * @example No Getter Required
- * ```tsx
- * const options1 = ['a', 'b', 'c', 'd'];
- * const options2 = [{ label: 'a' }, { label: 'b' }, { label: 'c' }, { label: 'd' }];
- *
- * <Autocomplete options={options1} />
- * <Autocomplete options={options2} />
- * ```
- *
- * @example Getter Required
- * ```tsx
- * const options = [
- *   {
- *     name: "Alaska",
- *     abbr: "AK",
- *   },
- *   {
- *     name: "Arizona",
- *     abbr: "AZ",
- *   }
- * ];
- *
- * <Autocomplete options={options} getOptionLabel={(state) => state.name} />
- * ```
- *
- * @defaultValue `defaultAutocompleteExtractor`
+ * @see {@link AutocompleteGetOptionLabel}
+ * @since 6.0.0
+ */
+export type AutocompleteGetOptionLabelCallback<
+  Option extends AutocompleteOption,
+> = (option: Option) => string;
+
+/**
  * @since 6.0.0
  */
-export type AutocompleteGetOptionLabel<Option extends AutocompleteOption> = (
-  option: Option
-) => string;
+export interface AutocompleteGetOptionLabel<Option extends AutocompleteOption> {
+  /**
+   * If the list of options contain an object that doesn't have a
+   * `label: string`, this prop must be provided to extract a string to display
+   * in the text field once selected.
+   *
+   * @example No Getter Required
+   * ```tsx
+   * const options1 = ['a', 'b', 'c', 'd'];
+   * const options2 = [{ label: 'a' }, { label: 'b' }, { label: 'c' }, { label: 'd' }];
+   *
+   * <Autocomplete options={options1} />
+   * <Autocomplete options={options2} />
+   * ```
+   *
+   * @example Getter Required
+   * ```tsx
+   * const options = [
+   *   {
+   *     name: "Alaska",
+   *     abbr: "AK",
+   *   },
+   *   {
+   *     name: "Arizona",
+   *     abbr: "AZ",
+   *   }
+   * ];
+   *
+   * <Autocomplete options={options} getOptionLabel={(state) => state.name} />
+   * ```
+   *
+   * @defaultValue `defaultAutocompleteExtractor`
+   * @since 6.0.0
+   */
+  getOptionLabel?: AutocompleteGetOptionLabelCallback<Option>;
+}
 
 /**
  * @since 6.0.0
@@ -231,7 +246,7 @@ export type AutocompleteQuery =
  * - `"selected"` - sets the 	query	 to the selected value's label
  * - `"as-is"` - doesn't change the `query`
  *
- * @defaultValue `(multiselect || Array.isArray(value ?? defaultValue)) ? "clear" : "as-is"`
+ * @defaultValue `(multiselect || Array.isArray(value ?? defaultValue)) ? "clear" : "selected"`
  * @since 6.0.0
  */
 export type AutocompleteUpdateQueryOnSelect = "clear" | "selected" | "as-is";
@@ -260,24 +275,20 @@ export interface AutocompleteUnknownQueryAndValueOptions<
 export type AutocompleteOptionLabelExtractor<
   Option extends AutocompleteOption,
 > = Option extends AutocompleteLabeledOption
-  ? { getOptionLabel?: AutocompleteGetOptionLabel<Option> }
-  : { getOptionLabel: AutocompleteGetOptionLabel<Option> };
+  ? AutocompleteGetOptionLabel<Option>
+  : Required<AutocompleteGetOptionLabel<Option>>;
 
 /**
  * @since 6.0.0
  */
-export interface AutocompleteFilteringOptions<
-  Option extends AutocompleteOption,
-> {
+export interface AutocompleteFilteringOptions<Option extends AutocompleteOption>
+  extends AutocompleteGetOptionLabel<Option> {
   /**
    * The list of options that can be shown within the autocomplete and filtered
    * based on the current query.
    */
   options: readonly Option[];
 
-  /** @see {@link AutocompleteGetOptionLabel} */
-  getOptionLabel?: AutocompleteGetOptionLabel<Option>;
-
   /**
    * The function that filters the {@link options} based on the current query
    * and defaults to a case insensitive search that starts with the query.
@@ -360,6 +371,7 @@ export interface AutocompleteFilteringOptions<
 export interface AutocompleteFilterAndListboxOptions<
   Option extends AutocompleteOption,
 > extends AutocompleteFilteringOptions<Option>,
+    AutocompleteGetOptionProps<Option>,
     OptionSelectedIconProps {
   /**
    * Set this to `true` when using a multiselect autocomplete to update each
@@ -377,7 +389,7 @@ export interface AutocompleteFilterAndListboxOptions<
 
   /**
    * @see {@link AutocompleteUpdateQueryOnSelect}
-   * @defaultValue `multiselect ? "clear" : "as-is"`
+   * @defaultValue `multiselect ? "clear" : "selected"`
    */
   updateQueryOnSelect?: AutocompleteUpdateQueryOnSelect;
 
@@ -388,9 +400,6 @@ export interface AutocompleteFilterAndListboxOptions<
    * @defaultValue `checkboxes`
    */
   disableCloseOnSelect?: boolean;
-
-  /** @see {@link AutocompleteGetOptionProps} */
-  getOptionProps?: AutocompleteGetOptionProps<Option>;
 }
 
 /**
@@ -489,6 +498,20 @@ export interface ConfigurableAutocompleteListboxProps
   id?: string;
 }
 
+/**
+ * - `"always"` - the clear button is always visible
+ * - `"active"` - the clear button will be visible when:
+ *   - the user moves focus within the autocomplete
+ *   - the user hovers the autocomplete
+ * - `"query"` - the clear button will be visible when:
+ *   - the input has a value and:
+ *     - the user moves focus within the autocomplete
+ *     - the user hovers the autocomplete
+ *
+ * @since 6.0.0
+ */
+export type ClearButtonVisibility = "query" | "active" | "always";
+
 /**
  * @since 6.0.0
  */
@@ -498,6 +521,9 @@ export interface ConfigurableAutocompleteClearButtonProps extends ButtonProps {
 
   /** @defaultValue `"autocomplete-clear-" + useId()` */
   id?: string;
+
+  /** {@inheritDoc ClearButtonVisibility} */
+  visibility?: ClearButtonVisibility;
 }
 
 /**
@@ -554,7 +580,7 @@ export interface AutocompleteCircularProgressProps
  */
 export interface AutocompleteChipProps extends ChipProps {
   /**
-   * @defaultValue `typeof children === "string" && \`Remove "${children}"\`
+   * @defaultValue `typeof children === "string" ? \`Remove "${children}"\` : undefined`
    */
   "aria-description"?: string;
 
@@ -570,7 +596,9 @@ export interface AutocompleteWithQueryImplementation<
   Option extends AutocompleteOption,
   ComboboxEl extends EditableHTMLElement = HTMLInputElement,
   PopupEl extends HTMLElement = HTMLElement,
-> extends EditableComboboxImplementation<ComboboxEl, PopupEl> {
+> extends EditableComboboxImplementation<ComboboxEl, PopupEl>,
+    Required<AutocompleteGetOptionProps<Option>>,
+    Required<AutocompleteGetOptionLabel<Option>> {
   query: string;
   setQuery: Dispatch<string>;
   comboboxProps: AutocompleteComboboxProps<ComboboxEl>;
@@ -610,11 +638,6 @@ export interface AutocompleteWithQueryImplementation<
   getDropdownButtonProps: (
     overrides?: ConfigurableAutocompleteDropdownButtonProps
   ) => AutocompleteDropdownButtonProps;
-
-  /** @see {@link AutocompleteGetOptionLabel} */
-  getOptionLabel: AutocompleteGetOptionLabel<Option>;
-  /** @see {@link AutocompleteGetOptionProps} */
-  getOptionProps: AutocompleteGetOptionProps<Option>;
 }
 
 /**
@@ -684,9 +707,6 @@ export interface AutocompleteBaseProps<Option extends AutocompleteOption>
     HTMLDivElement
   >;
 
-  /** @see {@link AutocompleteGetOptionProps} */
-  getOptionProps?: AutocompleteGetOptionProps<Option>;
-
   /**
    * This can be used to add any custom styling, change the icon, change the
    * label, etc for the dropdown button.
@@ -723,16 +743,37 @@ export interface AutocompleteBaseProps<Option extends AutocompleteOption>
    */
   loadingProps?: AutocompleteCircularProgressProps;
 
+  /**
+   * This will do nothing if {@link disableClearButton} is `true`.
+   */
   clearButtonProps?: PropsWithRef<
     ConfigurableAutocompleteClearButtonProps,
     HTMLButtonElement
   >;
 
   /**
+   * Set to `true` to hide the clear button that appears when hovering an
+   * `Autocomplete` that has a value. The user will still be able to clear the
+   * value quickly using the `Escape` key.
+   *
    * @defaultValue `false`
    */
   disableClearButton?: boolean;
 
+  /**
+   * - `"always"` - the clear button is always visible
+   * - `"active"` - the clear button will be visible when:
+   *   - the user moves focus within the autocomplete
+   *   - the user hovers the autocomplete
+   * - `"query"` - the clear button will be visible when:
+   *   - the input has a value and:
+   *     - the user moves focus within the autocomplete
+   *     - the user hovers the autocomplete
+   *
+   * @defaultValue `"query"`
+   */
+  clearButtonVisibility?: ClearButtonVisibility;
+
   /**
    * This is a convenience prop for the `onEntering`/`onEntered` transition
    * callbacks that will ensure it is only called once even if the transitions
@@ -759,7 +800,20 @@ export interface AutocompleteBaseProps<Option extends AutocompleteOption>
    */
   disableInlineChips?: boolean;
 
-  /** @see {@link AutocompleteGetChipProps} */
+  /**
+   * This can be used to add additional props to each inline chip for multiselect
+   * autocompletes.
+   *
+   * @example Simple Example
+   * ```tsx
+   * getChipProps={({ option, index }) => {
+   *   return {
+   *     disabled: index < 3,
+   *     className: cnb(option === "a" && styles.blue)<
+   *   };
+   * }}
+   * ```
+   */
   getChipProps?: AutocompleteGetChipProps<Option>;
 }
 

package/src/autocomplete/useAutocomplete.ts

@@ -9,8 +9,7 @@ import {
 } from "../form/utils.js";
 import { getIcon } from "../icon/config.js";
 import { useUserInteractionMode } from "../interaction/UserInteractionModeProvider.js";
-import { TRANSITION_CONFIG } from "../transition/config.js";
-import { type TransitionEnterHandler } from "../transition/types.js";
+import { getTransitionCallbacks } from "../transition/getTransitionCallbacks.js";
 import { useEnsuredState } from "../useEnsuredState.js";
 import {
   defaultAutocompleteExtractor,
@@ -41,6 +40,7 @@ const noop = (): void => {
 /**
  * This is the single select autocomplete implementation.
  *
+ * @see {@link https://next.react-md.dev/components/autocomplete | Autocomplete Demos}
  * @since 6.0.0
  */
 export function useAutocomplete<
@@ -53,6 +53,7 @@ export function useAutocomplete<
 /**
  * This is the multiselect autocomplete implementation.
  *
+ * @see {@link https://next.react-md.dev/components/autocomplete | Autocomplete Demos}
  * @since 6.0.0
  */
 export function useAutocomplete<
@@ -66,6 +67,7 @@ export function useAutocomplete<
  * This is an internal override implementation where the types are less strict
  * so it can be used with the `Autocomplete` component.
  *
+ * @see {@link https://next.react-md.dev/components/autocomplete | Autocomplete Demos}
  * @since 6.0.0
  * @internal
  */
@@ -77,6 +79,7 @@ export function useAutocomplete<
   options: AutocompleteOptions<Option, ComboboxEl, PopupEl>
 ): AutocompleteImplementation<Option, ComboboxEl, PopupEl>;
 /**
+ * @see {@link https://next.react-md.dev/components/autocomplete | Autocomplete Demos}
  * @since 6.0.0
  * @internal
  */
@@ -236,7 +239,7 @@ export function useAutocomplete<
     multiselect,
     comboboxProps: {
       ...comboboxProps,
-      "aria-autocomplete": "list",
+      "aria-autocomplete": filter === noopAutocompleteFilter ? "none" : "list",
       value: query,
       onKeyDown(event) {
         comboboxProps.onKeyDown(event);
@@ -286,27 +289,6 @@ export function useAutocomplete<
         ...listboxProps
       } = getMenuProps(overrides);
 
-      const isTransitionCompleteSkipped =
-        !disableTransition && !TRANSITION_CONFIG.disabled;
-
-      const handleEntering =
-        (callback: TransitionEnterHandler = noop, skipped: boolean) =>
-        (appearing: boolean) => {
-          callback(appearing);
-
-          if (skipped) {
-            return;
-          }
-
-          onOpen();
-
-          // when the listbox is opened, need to flag the entered state to show
-          // that new `query` values should be accepted. Also store the initial
-          // query.
-          entered.current = true;
-          initialQuery.current = query;
-        };
-
       let selectedIcon = propSelectedIcon;
       let unselectedIcon = propUnselectedIcon;
       let disableSelectedIcon = propDisableSelectedIcon;
@@ -371,8 +353,21 @@ export function useAutocomplete<
             updateQueryOnSelect === "clear" ? "" : getOptionLabel(option);
           triggerManualChangeEvent(comboboxRef.current, nextQuery);
         },
-        onEnter: handleEntering(onEnter, false),
-        onEntered: handleEntering(onEntered, isTransitionCompleteSkipped),
+        ...getTransitionCallbacks({
+          enter: true,
+          onEnter,
+          onEntered,
+          onEnterOnce: () => {
+            onOpen();
+
+            // when the listbox is opened, need to flag the entered state to show
+            // that new `query` values should be accepted. Also store the initial
+            // query.
+            entered.current = true;
+            initialQuery.current = query;
+          },
+          disableTransition,
+        }),
         onExited() {
           onExited();
 

package/src/autocomplete/utils.ts

@@ -16,7 +16,8 @@ import {
  * @since 6.0.0
  * @internal
  */
-export interface GetDefaultValueOptions<Option extends AutocompleteOption> {
+export interface GetDefaultValueOptions<Option extends AutocompleteOption>
+  extends Required<AutocompleteGetOptionLabel<Option>> {
   query: string | undefined;
   multiselect?: boolean;
   defaultQuery: UseStateInitializer<string> | undefined;
@@ -24,7 +25,6 @@ export interface GetDefaultValueOptions<Option extends AutocompleteOption> {
     | UseStateInitializer<Option | null | readonly Option[]>
     | undefined;
   options: readonly Option[];
-  getOptionLabel: AutocompleteGetOptionLabel<Option>;
   filter: (options: AutocompleteFilterOptions<Option>) => readonly Option[];
 }
 
@@ -86,9 +86,9 @@ export function getDefaultValue<Option extends AutocompleteOption>(
  * @since 6.0.0
  * @internal
  */
-interface GetDefaultQueryOptions<Option extends AutocompleteOption> {
+interface GetDefaultQueryOptions<Option extends AutocompleteOption>
+  extends Required<AutocompleteGetOptionLabel<Option>> {
   value: Option | null | readonly Option[];
-  getOptionLabel: AutocompleteGetOptionLabel<Option>;
   defaultQuery?: UseStateInitializer<string>;
 }
 
@@ -122,15 +122,13 @@ export function getDefaultQuery<Option extends AutocompleteOption>(
  * @since 6.0.0
  * @internal
  */
-export interface EnforceSelectedValueOptions<
-  Option extends AutocompleteOption,
-> {
+export interface EnforceSelectedValueOptions<Option extends AutocompleteOption>
+  extends Required<AutocompleteGetOptionLabel<Option>> {
   value: Option | readonly Option[] | null;
   visible: boolean;
   container: HTMLElement | null;
   popupRef: RefObject<HTMLElement>;
   comboboxRef: RefObject<EditableHTMLElement>;
-  getOptionLabel: AutocompleteGetOptionLabel<Option>;
   availableOptions: readonly Option[];
   prevAvailableOptions: NonNullMutableRef<readonly Option[] | null>;
 }

package/src/avatar/Avatar.tsx

@@ -88,7 +88,7 @@ export interface AvatarProps
  *
  * @example Simple Example
  * ```tsx
- * import { Avatar } from "@react-md/core";
+ * import { Avatar } from "@react-md/core/avatar/Avatar";
  * import { type ReactElement } from "react";
  *
  * export function Example(): ReactElement {
@@ -96,6 +96,7 @@ export interface AvatarProps
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/avatar | Avatar Demos}
  * @since 6.0.0 `aria-hidden` is set to `true` by default.
  */
 export const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(

package/src/badge/Badge.tsx

@@ -12,8 +12,9 @@ export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
 /**
  * @example Simple Example
  * ```tsx
- * import type { ReactElement } from "react";
- * import { Badge, Button, MaterialSymbol } from "@react-md/core";
+ * import { Badge } from "@react-md/core/badge/Badge";
+ * import { Button } from "@react-md/core/button/Button";
+ * import { type ReactElement } from "react";
  *
  * function Example(): ReactElement {
  *   return (
@@ -30,8 +31,10 @@ export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
  *
  * @example Within Buttons Example
  * ```tsx
- * import type { ReactElement } from "react";
- * import { Badge, Button, MaterialSymbol } from "@react-md/core";
+ * import { Badge } from "@react-md/core/badge/Badge";
+ * import { Button } from "@react-md/core/button/Button";
+ * import { MaterialSymbol } from "@react-md/core/icon/MaterialSymbol";
+ * import { type ReactElement } from "react";
  *
  * function Example(): ReactElement {
  *   return (
@@ -43,6 +46,7 @@ export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/badge | Badge Demos}
  * @since 6.0.0 Removed the `disableNullOnZero` feature since it's
  * easier just to use condition rendering yourself.
  */

package/src/box/Box.tsx

@@ -25,7 +25,7 @@ export interface BoxProps extends HTMLAttributes<HTMLDivElement>, BoxOptions {}
  * ```
  *
  * ```tsx
- * import { Box } from "@react-md/core";
+ * import { Box } from "@react-md/core/box/Box";
  * import type { ReactElement } from "react";
  *
  * export default function Example(): ReactElement {
@@ -53,7 +53,7 @@ export interface BoxProps extends HTMLAttributes<HTMLDivElement>, BoxOptions {}
  * ```
  *
  * ```tsx
- * import { Box } from "@react-md/core";
+ * import { Box } from "@react-md/core/box/Box";
  * import type { ReactElement } from "react";
  *
  * export default function Example(): ReactElement {
@@ -87,7 +87,7 @@ export interface BoxProps extends HTMLAttributes<HTMLDivElement>, BoxOptions {}
  * ```
  *
  * ```tsx
- * import { Box } from "@react-md/core";
+ * import { Box } from "@react-md/core/box/Box";
  * import type { ReactElement } from "react";
  *
  * export default function Example(): ReactElement {
@@ -103,6 +103,7 @@ export interface BoxProps extends HTMLAttributes<HTMLDivElement>, BoxOptions {}
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/box | Box Demos}
  * @since 6.0.0
  */
 export const Box = forwardRef<HTMLDivElement, BoxProps>(

package/src/button/AsyncButton.tsx

@@ -4,7 +4,7 @@ import { cnb } from "cnbuilder";
 import { type MouseEvent, type ReactNode, forwardRef } from "react";
 
 import { type BoxAlignItems } from "../box/styles.js";
-import { overlay } from "../overlay/overlayStyles.js";
+import { overlay } from "../overlay/styles.js";
 import {
   CircularProgress,
   type CircularProgressProps,
@@ -141,7 +141,7 @@ export interface AsyncButtonProps extends ButtonProps {
  *
  * @example Async onClick
  * ```tsx
- * import { AsyncButton } from "@react-md/core";
+ * import { AsyncButton } from "@react-md/core/button/AsyncButton";
  * import { useState, type ReactElement } from "react";
  *
  * function Example(): ReactElement {
@@ -163,7 +163,7 @@ export interface AsyncButtonProps extends ButtonProps {
  *
  * @example Manual Loading State
  * ```tsx
- * import { AsyncButton } from "@react-md/core";
+ * import { AsyncButton } from "@react-md/core/button/AsyncButton";
  * import { useMutation } from "@tanstack/query";
  * import { useState, type ReactElement } from "react";
  *
@@ -189,6 +189,7 @@ export interface AsyncButtonProps extends ButtonProps {
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/button#async-button | AsyncButton Demos}
  * @since 6.0.0
  */
 export const AsyncButton = forwardRef<HTMLButtonElement, AsyncButtonProps>(