@react-md/core 6.5.1 → 7.0.0

package/src/button/Button.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { type ButtonHTMLAttributes, forwardRef } from "react";
+import { type ButtonHTMLAttributes, type ReactElement, type Ref } from "react";
 
 import { type ComponentWithRippleProps } from "../interaction/types.js";
 import { useElementInteraction } from "../interaction/useElementInteraction.js";
@@ -18,6 +18,8 @@ export interface ButtonProps
     ButtonHTMLAttributes<HTMLButtonElement>,
     ButtonClassNameThemeOptions,
     ComponentWithRippleProps {
+  ref?: Ref<HTMLButtonElement>;
+
   /** @defaultValue `"button"` */
   type?: "button" | "reset" | "submit";
 
@@ -119,20 +121,39 @@ export interface ButtonProps
  *
  * @see {@link https://react-md.dev/components/button | Button Demos}
  */
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  function Button(props, ref) {
-    const {
-      type = "button",
-      disabled = false,
-      floating = null,
-      floatingProps,
-      theme = floating ? "secondary" : "clear",
-      themeType = floating ? "contained" : "flat",
-      iconSize,
-      buttonType = floating || iconSize ? "icon" : "text",
-      className,
-      responsive,
-      children: propChildren,
+export function Button(props: ButtonProps): ReactElement {
+  const {
+    ref,
+    type = "button",
+    disabled = false,
+    floating = null,
+    floatingProps,
+    theme = floating ? "secondary" : "clear",
+    themeType = floating ? "contained" : "flat",
+    iconSize,
+    buttonType = floating || iconSize ? "icon" : "text",
+    className,
+    responsive,
+    children: propChildren,
+    onBlur,
+    onClick,
+    onKeyDown,
+    onKeyUp,
+    onMouseDown,
+    onMouseUp,
+    onMouseLeave,
+    onDragStart,
+    onTouchStart,
+    onTouchEnd,
+    onTouchMove,
+    disableRipple,
+    ...remaining
+  } = props;
+  const isThemeDisabled = theme === "disabled";
+  const ariaDisabled = props["aria-disabled"];
+  const { pressed, pressedClassName, ripples, handlers } =
+    useElementInteraction({
+      mode: disableRipple ? "press" : undefined,
       onBlur,
       onClick,
       onKeyDown,
@@ -144,63 +165,43 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       onTouchStart,
       onTouchEnd,
       onTouchMove,
-      disableRipple,
-      ...remaining
-    } = props;
-    const isThemeDisabled = theme === "disabled";
-    const ariaDisabled = props["aria-disabled"];
-    const { pressed, pressedClassName, ripples, handlers } =
-      useElementInteraction({
-        mode: disableRipple ? "press" : undefined,
-        onBlur,
-        onClick,
-        onKeyDown,
-        onKeyUp,
-        onMouseDown,
-        onMouseUp,
-        onMouseLeave,
-        onDragStart,
-        onTouchStart,
-        onTouchEnd,
-        onTouchMove,
-        disabled:
-          disabled ||
-          isThemeDisabled ||
-          (ariaDisabled && ariaDisabled !== "false"),
-      });
+      disabled:
+        disabled ||
+        isThemeDisabled ||
+        (ariaDisabled && ariaDisabled !== "false"),
+    });
 
-    const children = useHigherContrastChildren(propChildren);
+  const children = useHigherContrastChildren(propChildren);
 
-    return (
-      <FloatingActionButton position={floating} {...floatingProps}>
-        <button
-          {...remaining}
-          // when the theme is set to `"disabled"`, the event handlers should be
-          // removed so that it behaves like a disabled button. you do not want to
-          // actually set the `disabled` attribute since it will lose keyboard
-          // focus. this is mostly for supporting circular progress bars within
-          // buttons
-          {...(isThemeDisabled ? {} : handlers)}
-          aria-disabled={isThemeDisabled || remaining["aria-disabled"]}
-          disabled={disabled}
-          ref={ref}
-          type={type}
-          className={button({
-            theme,
-            themeType,
-            buttonType,
-            disabled,
-            responsive,
-            iconSize,
-            pressed,
-            pressedClassName,
-            className,
-          })}
-        >
-          {children}
-          {ripples}
-        </button>
-      </FloatingActionButton>
-    );
-  }
-);
+  return (
+    <FloatingActionButton position={floating} {...floatingProps}>
+      <button
+        {...remaining}
+        // when the theme is set to `"disabled"`, the event handlers should be
+        // removed so that it behaves like a disabled button. you do not want to
+        // actually set the `disabled` attribute since it will lose keyboard
+        // focus. this is mostly for supporting circular progress bars within
+        // buttons
+        {...(isThemeDisabled ? {} : handlers)}
+        aria-disabled={isThemeDisabled || remaining["aria-disabled"]}
+        disabled={disabled}
+        ref={ref}
+        type={type}
+        className={button({
+          theme,
+          themeType,
+          buttonType,
+          disabled,
+          responsive,
+          iconSize,
+          pressed,
+          pressedClassName,
+          className,
+        })}
+      >
+        {children}
+        {ripples}
+      </button>
+    </FloatingActionButton>
+  );
+}

package/src/button/ButtonUnstyled.tsx

@@ -1,4 +1,4 @@
-import { type ButtonHTMLAttributes, forwardRef } from "react";
+import { type ButtonHTMLAttributes, type ReactElement, type Ref } from "react";
 
 import { buttonUnstyled } from "./styles.js";
 
@@ -9,10 +9,12 @@ import { buttonUnstyled } from "./styles.js";
  *
  * @since 6.0.0 Renamed from `UnstyledButtonProps`
  */
-export type ButtonUnstyledProps = Omit<
+export interface ButtonUnstyledProps extends Omit<
   ButtonHTMLAttributes<HTMLButtonElement>,
   "type"
->;
+> {
+  ref?: Ref<HTMLButtonElement>;
+}
 
 /**
  * A simple wrapper for a `<button type="button">` that applies the unstyled
@@ -24,11 +26,9 @@ export type ButtonUnstyledProps = Omit<
  * @see {@link buttonUnstyled}
  * @since 6.0.0 Renamed from `UnstyledButton`
  */
-export const ButtonUnstyled = forwardRef<
-  HTMLButtonElement,
-  ButtonUnstyledProps
->(function ButtonUnstyled(props, ref) {
-  const { children, className, ...remaining } = props;
+export function ButtonUnstyled(props: ButtonUnstyledProps): ReactElement {
+  const { ref, children, className, ...remaining } = props;
+
   return (
     <button
       {...remaining}
@@ -39,4 +39,4 @@ export const ButtonUnstyled = forwardRef<
       {children}
     </button>
   );
-});
+}

package/src/button/FloatingActionButton.tsx

@@ -1,5 +1,5 @@
 import { cnb } from "cnbuilder";
-import { type HTMLAttributes, forwardRef } from "react";
+import { type HTMLAttributes, type ReactElement, type Ref } from "react";
 
 import { bem } from "../utils/bem.js";
 
@@ -64,17 +64,19 @@ export function fab(options: FloatingActionButtonClassNameOptions): string {
 export interface FloatingActionButtonProps
   extends
     HTMLAttributes<HTMLSpanElement>,
-    FloatingActionButtonClassNameOptions {}
+    FloatingActionButtonClassNameOptions {
+  ref?: Ref<HTMLSpanElement>;
+}
 
 /**
  * @since 6.0.0
  * @internal
  */
-export const FloatingActionButton = forwardRef<
-  HTMLSpanElement,
-  FloatingActionButtonProps
->(function FloatingActionButton(props, ref) {
+export function FloatingActionButton(
+  props: FloatingActionButtonProps
+): ReactElement {
   const {
+    ref,
     children,
     className,
     position = null,
@@ -98,4 +100,4 @@ export const FloatingActionButton = forwardRef<
       {children}
     </span>
   );
-});
+}

package/src/button/TooltippedButton.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { type ReactNode, forwardRef } from "react";
+import { type ReactElement, type ReactNode, type Ref } from "react";
 
 import { Tooltip, type TooltipProps } from "../tooltip/Tooltip.js";
 import {
@@ -16,6 +16,8 @@ import { type ButtonType } from "./styles.js";
  * @since 6.0.0
  */
 export interface TooltippedButtonProps extends ButtonProps {
+  ref?: Ref<HTMLButtonElement>;
+
   /** @defaultValue `"icon"` */
   buttonType?: ButtonType;
 
@@ -73,11 +75,9 @@ export interface TooltippedButtonProps extends ButtonProps {
  * @see {@link https://react-md.dev/components/button | Button Demos}
  * @since 6.0.0
  */
-export const TooltippedButton = forwardRef<
-  HTMLButtonElement,
-  TooltippedButtonProps
->(function TooltippedButton(props, ref) {
+export function TooltippedButton(props: TooltippedButtonProps): ReactElement {
   const {
+    ref,
     tooltip,
     tooltipProps,
     tooltipOptions,
@@ -116,4 +116,4 @@ export const TooltippedButton = forwardRef<
       </Tooltip>
     </>
   );
-});
+}

package/src/card/Card.tsx

@@ -1,4 +1,4 @@
-import { type HTMLAttributes, forwardRef } from "react";
+import { type HTMLAttributes, type ReactElement, type Ref } from "react";
 
 import { Box } from "../box/Box.js";
 import { type BoxAlignItems, type BoxOptions } from "../box/styles.js";
@@ -13,6 +13,8 @@ export interface CardProps
     HTMLAttributes<HTMLDivElement>,
     CardClassNameOptions,
     Pick<BoxOptions, "align" | "justify" | "fullWidth" | "disableWrap"> {
+  ref?: Ref<HTMLDivElement>;
+
   /** @defaultValue `"stretch"` */
   align?: BoxAlignItems;
 
@@ -59,38 +61,37 @@ export interface CardProps
  * @since 6.0.0 Uses the `Box` component and displays as `flex` instead of
  * `block`/`inline-block`.
  */
-export const Card = forwardRef<HTMLDivElement, CardProps>(
-  function Card(props, ref) {
-    const {
-      children,
-      className,
-      align = "stretch",
-      justify = "stretch",
-      bordered,
-      raisable,
-      interactable,
-      ...remaining
-    } = props;
+export function Card(props: CardProps): ReactElement {
+  const {
+    ref,
+    children,
+    className,
+    align = "stretch",
+    justify = "stretch",
+    bordered,
+    raisable,
+    interactable,
+    ...remaining
+  } = props;
 
-    return (
-      <Box
-        align={align}
-        justify={justify}
-        disableWrap
-        {...remaining}
-        stacked
-        disableGap
-        disablePadding
-        ref={ref}
-        className={card({
-          className,
-          bordered,
-          raisable,
-          interactable,
-        })}
-      >
-        {children}
-      </Box>
-    );
-  }
-);
+  return (
+    <Box
+      align={align}
+      justify={justify}
+      disableWrap
+      {...remaining}
+      stacked
+      disableGap
+      disablePadding
+      ref={ref}
+      className={card({
+        className,
+        bordered,
+        raisable,
+        interactable,
+      })}
+    >
+      {children}
+    </Box>
+  );
+}

package/src/card/CardContent.tsx

@@ -1,4 +1,4 @@
-import { type HTMLAttributes, forwardRef } from "react";
+import { type HTMLAttributes, type ReactElement, type Ref } from "react";
 
 import { type CardContentClassNameOptions, cardContent } from "./styles.js";
 
@@ -7,37 +7,40 @@ import { type CardContentClassNameOptions, cardContent } from "./styles.js";
  * removed the `disableParagraphMargin` prop.
  */
 export interface CardContentProps
-  extends HTMLAttributes<HTMLDivElement>, CardContentClassNameOptions {}
+  extends HTMLAttributes<HTMLDivElement>, CardContentClassNameOptions {
+  ref?: Ref<HTMLDivElement>;
+}
 
 /**
  * @see {@link https://react-md.dev/components/card | Card Demos}
  * @since 6.0.0 Renamed `disableExtraPadding` to `disableLastChildPadding` and
  * removed the `disableParagraphMargin` prop.
  */
-export const CardContent = forwardRef<HTMLDivElement, CardContentProps>(
-  function CardContent(props, ref) {
-    const {
-      children,
-      className,
-      disablePadding,
-      disableSecondaryColor,
-      disableLastChildPadding,
-      ...remaining
-    } = props;
+export const CardContent = function CardContent(
+  props: CardContentProps
+): ReactElement {
+  const {
+    ref,
+    children,
+    className,
+    disablePadding,
+    disableSecondaryColor,
+    disableLastChildPadding,
+    ...remaining
+  } = props;
 
-    return (
-      <div
-        {...remaining}
-        ref={ref}
-        className={cardContent({
-          className,
-          disablePadding,
-          disableSecondaryColor,
-          disableLastChildPadding,
-        })}
-      >
-        {children}
-      </div>
-    );
-  }
-);
+  return (
+    <div
+      {...remaining}
+      ref={ref}
+      className={cardContent({
+        className,
+        disablePadding,
+        disableSecondaryColor,
+        disableLastChildPadding,
+      })}
+    >
+      {children}
+    </div>
+  );
+};

package/src/card/CardFooter.tsx

@@ -1,4 +1,4 @@
-import { forwardRef } from "react";
+import { type ReactElement, type Ref } from "react";
 
 import { Box, type BoxProps } from "../box/Box.js";
 import { type BoxJustifyContent } from "../box/styles.js";
@@ -6,6 +6,8 @@ import { cardFooter } from "./styles.js";
 
 /** @since 6.0.0 */
 export interface CardFooterProps extends BoxProps {
+  ref?: Ref<HTMLDivElement>;
+
   /**
    * @defaultValue `"flex-end"`
    */
@@ -19,19 +21,23 @@ export interface CardFooterProps extends BoxProps {
  * @see {@link https://react-md.dev/components/card | Card Demos}
  * @since 6.0.0
  */
-export const CardFooter = forwardRef<HTMLDivElement, CardFooterProps>(
-  function CardFooter(props, ref) {
-    const { className, children, justify = "flex-end", ...remaining } = props;
+export function CardFooter(props: CardFooterProps): ReactElement {
+  const {
+    ref,
+    className,
+    children,
+    justify = "flex-end",
+    ...remaining
+  } = props;
 
-    return (
-      <Box
-        {...remaining}
-        ref={ref}
-        className={cardFooter({ className })}
-        justify={justify}
-      >
-        {children}
-      </Box>
-    );
-  }
-);
+  return (
+    <Box
+      {...remaining}
+      ref={ref}
+      className={cardFooter({ className })}
+      justify={justify}
+    >
+      {children}
+    </Box>
+  );
+}

package/src/card/CardHeader.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 PropsWithRef } from "../types.js";
 import { cardHeader, cardHeaderContent } from "./styles.js";
@@ -11,6 +16,8 @@ import { cardHeader, cardHeaderContent } from "./styles.js";
  * `contentProps`.
  */
 export interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
+  ref?: Ref<HTMLDivElement>;
+
   /**
    * Any content to display after the children in the header. This could be an
    * expander icon button, visual media like an image or video, etc.
@@ -41,36 +48,35 @@ export interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
  * relies on the CSS `gap` for spacing.
  * @since 6.0.0 Renders as a `<div>` instead of a `<header>`
  */
-export const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(
-  function CardHeader(props, ref) {
-    const {
-      className,
-      children,
-      beforeAddon,
-      afterAddon,
-      contentProps,
-      ...remaining
-    } = props;
+export function CardHeader(props: CardHeaderProps): ReactElement {
+  const {
+    ref,
+    className,
+    children,
+    beforeAddon,
+    afterAddon,
+    contentProps,
+    ...remaining
+  } = props;
 
-    return (
+  return (
+    <div
+      {...remaining}
+      ref={ref}
+      className={cardHeader({
+        className,
+        addonBefore: !!beforeAddon,
+        addonAfter: !!afterAddon,
+      })}
+    >
+      {beforeAddon}
       <div
-        {...remaining}
-        ref={ref}
-        className={cardHeader({
-          className,
-          addonBefore: !!beforeAddon,
-          addonAfter: !!afterAddon,
-        })}
+        {...contentProps}
+        className={cardHeaderContent({ className: contentProps?.className })}
       >
-        {beforeAddon}
-        <div
-          {...contentProps}
-          className={cardHeaderContent({ className: contentProps?.className })}
-        >
-          {children}
-        </div>
-        {afterAddon}
+        {children}
       </div>
-    );
-  }
-);
+      {afterAddon}
+    </div>
+  );
+}

package/src/card/CardSubtitle.tsx

@@ -1,4 +1,4 @@
-import { forwardRef } from "react";
+import { type ReactElement, type Ref } from "react";
 
 import {
   Typography,
@@ -12,6 +12,8 @@ import { cardSubtitle } from "./styles.js";
  * `noWrap`/`disableSecondaryColor` props.
  */
 export interface CardSubtitleProps extends TypographyProps {
+  ref?: Ref<TypographyHTMLElement>;
+
   /** @defaultValue `"h6"` */
   as?: TypographyProps["as"];
 
@@ -34,11 +36,11 @@ export interface CardSubtitleProps extends TypographyProps {
  * @since 6.0.0 Extends the {@link Typography} component and removed the
  * `noWrap`/`disableSecondaryColor` props.
  */
-export const CardSubtitle = forwardRef<
-  TypographyHTMLElement,
-  CardSubtitleProps
->(function CardSubtitle(props, ref) {
+export const CardSubtitle = function CardSubtitle(
+  props: CardSubtitleProps
+): ReactElement {
   const {
+    ref,
     children,
     as = "h6",
     type = "subtitle-2",
@@ -61,4 +63,4 @@ export const CardSubtitle = forwardRef<
       {children}
     </Typography>
   );
-});
+};