@react-md/core 6.5.2 → 7.0.0

package/src/avatar/Avatar.tsx

@@ -1,8 +1,9 @@
 import {
   type HTMLAttributes,
   type ImgHTMLAttributes,
+  type ReactElement,
   type ReactNode,
-  forwardRef,
+  type Ref,
 } from "react";
 
 import { type PropsWithRef } from "../types.js";
@@ -18,6 +19,8 @@ export interface AvatarProps
   extends
     Omit<HTMLAttributes<HTMLSpanElement>, "color">,
     AvatarClassNameOptions {
+  ref?: Ref<HTMLSpanElement>;
+
   /**
    * Since avatars are normally presentational data, they are hidden from screen
    * readers by default.
@@ -89,50 +92,49 @@ export interface AvatarProps
  * @see {@link https://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>(
-  function Avatar(props, ref) {
-    const {
-      "aria-hidden": ariaHidden = true,
-      className,
-      children,
-      src,
-      alt = "",
-      size = "avatar",
-      color,
-      theme,
-      imgProps,
-      referrerPolicy,
-      ...remaining
-    } = props;
-
-    let img: ReactNode;
-    if (src || imgProps) {
-      img = (
-        <img
-          src={src}
-          alt={alt}
-          referrerPolicy={referrerPolicy}
-          {...imgProps}
-          className={avatarImage({ className: imgProps?.className })}
-        />
-      );
-    }
+export function Avatar(props: AvatarProps): ReactElement {
+  const {
+    ref,
+    "aria-hidden": ariaHidden = true,
+    className,
+    children,
+    src,
+    alt = "",
+    size = "avatar",
+    color,
+    theme,
+    imgProps,
+    referrerPolicy,
+    ...remaining
+  } = props;
 
-    return (
-      <span
-        {...remaining}
-        aria-hidden={ariaHidden}
-        ref={ref}
-        className={avatar({
-          size,
-          color,
-          theme,
-          className,
-        })}
-      >
-        {img}
-        {children}
-      </span>
+  let img: ReactNode;
+  if (src || imgProps) {
+    img = (
+      <img
+        src={src}
+        alt={alt}
+        referrerPolicy={referrerPolicy}
+        {...imgProps}
+        className={avatarImage({ className: imgProps?.className })}
+      />
     );
   }
-);
+
+  return (
+    <span
+      {...remaining}
+      aria-hidden={ariaHidden}
+      ref={ref}
+      className={avatar({
+        size,
+        color,
+        theme,
+        className,
+      })}
+    >
+      {img}
+      {children}
+    </span>
+  );
+}

package/src/badge/Badge.tsx

@@ -1,4 +1,9 @@
-import { type HTMLAttributes, type ReactNode, forwardRef } from "react";
+import {
+  type HTMLAttributes,
+  type ReactElement,
+  type ReactNode,
+  type Ref,
+} from "react";
 
 import { type BadgeTheme, badge } from "./styles.js";
 
@@ -15,6 +20,8 @@ declare module "react" {
 }
 
 export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+  ref?: Ref<HTMLSpanElement>;
+
   /** @defaultValue `"greyscale"` */
   theme?: BadgeTheme;
 
@@ -62,13 +69,12 @@ export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
  * @since 6.0.0 Removed the `disableNullOnZero` feature since it's
  * easier just to use condition rendering yourself.
  */
-export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
-  function Badge(props, ref) {
-    const { children, className, theme, ...remaining } = props;
-    return (
-      <span {...remaining} ref={ref} className={badge({ theme, className })}>
-        {children}
-      </span>
-    );
-  }
-);
+export function Badge(props: BadgeProps): ReactElement {
+  const { ref, children, className, theme, ...remaining } = props;
+
+  return (
+    <span {...remaining} ref={ref} className={badge({ theme, className })}>
+      {children}
+    </span>
+  );
+}

package/src/box/Box.tsx

@@ -1,11 +1,13 @@
-import { type HTMLAttributes, forwardRef } from "react";
+import { type HTMLAttributes, type ReactElement, type Ref } from "react";
 
 import { type BoxOptions, boxStyles } from "./styles.js";
 
 /**
  * @since 6.0.0
  */
-export interface BoxProps extends HTMLAttributes<HTMLDivElement>, BoxOptions {}
+export interface BoxProps extends HTMLAttributes<HTMLDivElement>, BoxOptions {
+  ref?: Ref<HTMLDivElement>;
+}
 
 /**
  * The `Box` component is a wrapper around the CSS box model and should solve
@@ -106,52 +108,51 @@ export interface BoxProps extends HTMLAttributes<HTMLDivElement>, BoxOptions {}
  * @see {@link https://react-md.dev/components/box | Box Demos}
  * @since 6.0.0
  */
-export const Box = forwardRef<HTMLDivElement, BoxProps>(
-  function Box(props, ref) {
-    const {
-      style,
-      className,
-      children,
-      align,
-      justify,
-      stacked,
-      reversed,
-      grid,
-      gridName,
-      gridItemSize,
-      gridColumns,
-      gridAutoRows,
-      fullWidth,
-      disableGap,
-      disableWrap,
-      disablePadding,
-      ...remaining
-    } = props;
+export const Box = function Box(props: BoxProps): ReactElement {
+  const {
+    ref,
+    style,
+    className,
+    children,
+    align,
+    justify,
+    stacked,
+    reversed,
+    grid,
+    gridName,
+    gridItemSize,
+    gridColumns,
+    gridAutoRows,
+    fullWidth,
+    disableGap,
+    disableWrap,
+    disablePadding,
+    ...remaining
+  } = props;
 
-    return (
-      <div
-        {...remaining}
-        ref={ref}
-        {...boxStyles({
-          style,
-          className,
-          align,
-          justify,
-          stacked,
-          reversed,
-          grid,
-          gridName,
-          gridItemSize,
-          gridColumns,
-          gridAutoRows,
-          fullWidth,
-          disableGap,
-          disableWrap,
-          disablePadding,
-        })}
-      >
-        {children}
-      </div>
-    );
-  }
-);
+  return (
+    <div
+      {...remaining}
+      ref={ref}
+      {...boxStyles({
+        style,
+        className,
+        align,
+        justify,
+        stacked,
+        reversed,
+        grid,
+        gridName,
+        gridItemSize,
+        gridColumns,
+        gridAutoRows,
+        fullWidth,
+        disableGap,
+        disableWrap,
+        disablePadding,
+      })}
+    >
+      {children}
+    </div>
+  );
+};

package/src/button/AsyncButton.tsx

@@ -1,7 +1,12 @@
 "use client";
 
 import { cnb } from "cnbuilder";
-import { type MouseEvent, type ReactNode, forwardRef } from "react";
+import {
+  type MouseEvent,
+  type ReactElement,
+  type ReactNode,
+  type Ref,
+} from "react";
 
 import { type BoxAlignItems } from "../box/styles.js";
 import { overlay } from "../overlay/styles.js";
@@ -37,6 +42,8 @@ export type AsyncButtonLoadingType =
  * @since 6.0.0
  */
 export interface AsyncButtonProps extends ButtonProps {
+  ref?: Ref<HTMLButtonElement>;
+
   /**
    * @see {@link progressAriaLabelledBy}
    * @defaultValue `"async-button" + useId()`
@@ -192,128 +199,127 @@ export interface AsyncButtonProps extends ButtonProps {
  * @see {@link https://react-md.dev/components/button#async-button | AsyncButton Demos}
  * @since 6.0.0
  */
-export const AsyncButton = forwardRef<HTMLButtonElement, AsyncButtonProps>(
-  function AsyncButton(props, ref) {
-    const {
-      id: propId,
-      onClick = noop,
-      children,
-      floating = null,
-      theme = floating ? "secondary" : "clear",
-      themeType = floating ? "contained" : "flat",
-      buttonType = floating ? "icon" : "text",
-      className,
-      disabled,
-      loading: propLoading = false,
-      loadingType = "circular-overlay",
-      loadingChildren,
-      loadingDisabledTheme = false,
-      afterAddon: propAfterAddon,
-      beforeAddon: propBeforeAddon,
-      linearProgressProps,
-      circularProgressProps,
-      progressAriaLabel,
-      progressAriaLabelledBy: propProgressAriaLabelledBy,
-      ...remaining
-    } = props;
-    const id = useEnsuredId(propId, "async-button");
-    const { handleAsync, pending } = useAsyncFunction({ disabled });
-    const loading = pending || propLoading;
-
-    let progressTheme: ProgressTheme = "current-color";
-    if (theme === "clear" || theme === "disabled") {
-      progressTheme = "primary";
-    }
+export function AsyncButton(props: AsyncButtonProps): ReactElement {
+  const {
+    id: propId,
+    ref,
+    onClick = noop,
+    children,
+    floating = null,
+    theme = floating ? "secondary" : "clear",
+    themeType = floating ? "contained" : "flat",
+    buttonType = floating ? "icon" : "text",
+    className,
+    disabled,
+    loading: propLoading = false,
+    loadingType = "circular-overlay",
+    loadingChildren,
+    loadingDisabledTheme = false,
+    afterAddon: propAfterAddon,
+    beforeAddon: propBeforeAddon,
+    linearProgressProps,
+    circularProgressProps,
+    progressAriaLabel,
+    progressAriaLabelledBy: propProgressAriaLabelledBy,
+    ...remaining
+  } = props;
+  const id = useEnsuredId(propId, "async-button");
+  const { handleAsync, pending } = useAsyncFunction({ disabled });
+  const loading = pending || propLoading;
 
-    let progressAriaLabelledBy = propProgressAriaLabelledBy;
-    if (
-      !progressAriaLabel &&
-      !linearProgressProps?.["aria-label"] &&
-      !linearProgressProps?.["aria-labelledby"] &&
-      !circularProgressProps?.["aria-label"] &&
-      !circularProgressProps?.["aria-labelledby"]
-    ) {
-      progressAriaLabelledBy = id;
-    }
+  let progressTheme: ProgressTheme = "current-color";
+  if (theme === "clear" || theme === "disabled") {
+    progressTheme = "primary";
+  }
 
-    const progress = loadingType.includes("linear") ? (
-      <LinearProgress
-        aria-label={progressAriaLabel}
-        aria-labelledby={progressAriaLabelledBy as string}
-        {...linearProgressProps}
-        theme={progressTheme}
-      />
-    ) : (
-      <CircularProgress
-        aria-label={progressAriaLabel}
-        aria-labelledby={progressAriaLabelledBy as string}
-        {...circularProgressProps}
-        theme={progressTheme}
-      />
-    );
+  let progressAriaLabelledBy = propProgressAriaLabelledBy;
+  if (
+    !progressAriaLabel &&
+    !linearProgressProps?.["aria-label"] &&
+    !linearProgressProps?.["aria-labelledby"] &&
+    !circularProgressProps?.["aria-label"] &&
+    !circularProgressProps?.["aria-labelledby"]
+  ) {
+    progressAriaLabelledBy = id;
+  }
 
-    let afterAddon = propAfterAddon;
-    let beforeAddon = propBeforeAddon;
-    let overlayElement: ReactNode;
-    let isOverlayCover = false;
-    switch (loadingType) {
-      case "circular-before":
-        beforeAddon = loading ? progress : propBeforeAddon;
-        break;
-      case "circular-after":
-        afterAddon = loading ? progress : propAfterAddon;
-        break;
-      case "circular-overlay":
-      case "linear-above":
-      case "linear-below": {
-        let alignItems: BoxAlignItems = "center";
-        if (loadingType === "linear-above") {
-          alignItems = "start";
-        } else if (loadingType === "linear-below") {
-          alignItems = "end";
-        } else {
-          isOverlayCover = true;
-        }
+  const progress = loadingType.includes("linear") ? (
+    <LinearProgress
+      aria-label={progressAriaLabel}
+      aria-labelledby={progressAriaLabelledBy as string}
+      {...linearProgressProps}
+      theme={progressTheme}
+    />
+  ) : (
+    <CircularProgress
+      aria-label={progressAriaLabel}
+      aria-labelledby={progressAriaLabelledBy as string}
+      {...circularProgressProps}
+      theme={progressTheme}
+    />
+  );
 
-        overlayElement = loading && (
-          <span
-            className={overlay({
-              active: true,
-              visible: true,
-              absolute: true,
-              align: alignItems,
-            })}
-          >
-            {progress}
-          </span>
-        );
-        break;
+  let afterAddon = propAfterAddon;
+  let beforeAddon = propBeforeAddon;
+  let overlayElement: ReactNode;
+  let isOverlayCover = false;
+  switch (loadingType) {
+    case "circular-before":
+      beforeAddon = loading ? progress : propBeforeAddon;
+      break;
+    case "circular-after":
+      afterAddon = loading ? progress : propAfterAddon;
+      break;
+    case "circular-overlay":
+    case "linear-above":
+    case "linear-below": {
+      let alignItems: BoxAlignItems = "center";
+      if (loadingType === "linear-above") {
+        alignItems = "start";
+      } else if (loadingType === "linear-below") {
+        alignItems = "end";
+      } else {
+        isOverlayCover = true;
       }
-    }
 
-    return (
-      <Button
-        {...remaining}
-        aria-disabled={loading || undefined}
-        id={id}
-        ref={ref}
-        disabled={disabled}
-        floating={floating}
-        className={cnb(
-          "rmd-button--async",
-          loading && isOverlayCover && "rmd-button--async-overlay",
-          className
-        )}
-        theme={loading && loadingDisabledTheme ? "disabled" : theme}
-        themeType={themeType}
-        buttonType={buttonType}
-        onClick={handleAsync((event) => Promise.resolve(onClick(event)))}
-      >
-        {beforeAddon}
-        {loading && loadingChildren !== undefined ? loadingChildren : children}
-        {afterAddon}
-        {overlayElement}
-      </Button>
-    );
+      overlayElement = loading && (
+        <span
+          className={overlay({
+            active: true,
+            visible: true,
+            absolute: true,
+            align: alignItems,
+          })}
+        >
+          {progress}
+        </span>
+      );
+      break;
+    }
   }
-);
+
+  return (
+    <Button
+      {...remaining}
+      aria-disabled={loading || undefined}
+      id={id}
+      ref={ref}
+      disabled={disabled}
+      floating={floating}
+      className={cnb(
+        "rmd-button--async",
+        loading && isOverlayCover && "rmd-button--async-overlay",
+        className
+      )}
+      theme={loading && loadingDisabledTheme ? "disabled" : theme}
+      themeType={themeType}
+      buttonType={buttonType}
+      onClick={handleAsync((event) => Promise.resolve(onClick(event)))}
+    >
+      {beforeAddon}
+      {loading && loadingChildren !== undefined ? loadingChildren : children}
+      {afterAddon}
+      {overlayElement}
+    </Button>
+  );
+}