@react-md/core 6.5.1 → 7.0.0

package/src/snackbar/Toast.tsx

@@ -5,7 +5,7 @@ import {
   type HTMLAttributes,
   type ReactElement,
   type ReactNode,
-  forwardRef,
+  type Ref,
   isValidElement,
 } from "react";
 
@@ -31,6 +31,8 @@ export interface ConfigurableToastProps
     HTMLAttributes<HTMLDivElement>,
     BaseToastClasNameOptions,
     TransitionCallbacks {
+  ref?: Ref<HTMLDivElement>;
+
   /**
    * Note: this default value will only be generated in the `Toast` component.
    *
@@ -136,116 +138,115 @@ export interface ToastProps extends ConfigurableToastProps {
  * @see {@link https://react-md.dev/components/snackbar | Snackbar Demos}
  * @since 6.0.0
  */
-export const Toast = forwardRef<HTMLDivElement, ToastProps>(
-  function Toast(props, ref) {
-    const {
-      id: propId,
-      className,
-      timeout,
-      classNames,
-      theme = "surface",
-      action: propAction,
-      actionButton: propActionButton,
-      paused,
-      visible,
-      closeIcon: propCloseIcon,
-      closeButtonProps,
-      closeButton = !!closeButtonProps,
-      contentProps,
-      disableToastContent,
-      stacked,
-      multiline,
-      onEnter,
-      onEntering,
-      onEntered,
-      onExit,
-      onExiting,
-      onExited,
-      children,
-      ...remaining
-    } = props;
-    const id = useEnsuredId(propId, "toast");
-
-    let actionButton = propActionButton;
-    if (propAction) {
-      let overrides: ButtonProps = {};
-      let buttonChildren: ReactNode;
-      // have to use `any` to correctly filter out all react elements
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      if (isValidElement<any>(propAction) || typeof propAction !== "object") {
-        buttonChildren = propAction;
-      } else {
-        ({ children: buttonChildren, ...overrides } = propAction);
-      }
-
-      actionButton = (
-        <ToastActionButton
-          theme={theme === "surface" ? "secondary" : "clear"}
-          reordered={stacked && closeButton}
-          {...overrides}
-        >
-          {buttonChildren}
-        </ToastActionButton>
-      );
+export function Toast(props: ToastProps): ReactElement | null {
+  const {
+    ref,
+    id: propId,
+    className,
+    timeout,
+    classNames,
+    theme = "surface",
+    action: propAction,
+    actionButton: propActionButton,
+    paused,
+    visible,
+    closeIcon: propCloseIcon,
+    closeButtonProps,
+    closeButton = !!closeButtonProps,
+    contentProps,
+    disableToastContent,
+    stacked,
+    multiline,
+    onEnter,
+    onEntering,
+    onEntered,
+    onExit,
+    onExiting,
+    onExited,
+    children,
+    ...remaining
+  } = props;
+  const id = useEnsuredId(propId, "toast");
+
+  let actionButton = propActionButton;
+  if (propAction) {
+    let overrides: ButtonProps = {};
+    let buttonChildren: ReactNode;
+    // have to use `any` to correctly filter out all react elements
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    if (isValidElement<any>(propAction) || typeof propAction !== "object") {
+      buttonChildren = propAction;
+    } else {
+      ({ children: buttonChildren, ...overrides } = propAction);
     }
 
-    let closeIcon = propCloseIcon;
-    if (closeButtonProps?.children !== undefined) {
-      closeIcon = closeButtonProps.children;
-    }
+    actionButton = (
+      <ToastActionButton
+        theme={theme === "surface" ? "secondary" : "clear"}
+        reordered={stacked && closeButton}
+        {...overrides}
+      >
+        {buttonChildren}
+      </ToastActionButton>
+    );
+  }
 
-    const action = !!actionButton;
-    const reordered = stacked && action && closeButton;
-    const { elementProps, rendered } = useScaleTransition({
-      appear: true,
-      nodeRef: ref,
-      className: toast({
-        className,
-        theme,
-        action,
-        paused,
-        stacked,
-        reordered,
-        closeButton,
-      }),
-      timeout,
-      classNames,
-      onEnter,
-      onEntering,
-      onEntered,
-      onExit,
-      onExiting,
-      onExited,
-      temporary: true,
-      transitionIn: visible,
-      exitedHidden: true,
-    });
-
-    // this might get rid of the weird popping-back-in for a split second
-    // that sometimes happens on mobile firefox
-    if (!rendered) {
-      return null;
-    }
+  let closeIcon = propCloseIcon;
+  if (closeButtonProps?.children !== undefined) {
+    closeIcon = closeButtonProps.children;
+  }
 
-    return (
-      <div {...remaining} {...elementProps} id={id}>
-        <ToastContent
-          action={action}
-          stacked={stacked}
-          multiline={multiline}
-          closeButton={closeButton}
-          disableWrapper={disableToastContent}
-          {...contentProps}
-        >
-          {children}
-        </ToastContent>
-        {actionButton}
-        {closeButton && (
-          <ToastCloseButton reordered={reordered} {...closeButtonProps}>
-            {closeIcon}
-          </ToastCloseButton>
-        )}
-      </div>
-    );
+  const action = !!actionButton;
+  const reordered = stacked && action && closeButton;
+  const { elementProps, rendered } = useScaleTransition({
+    appear: true,
+    nodeRef: ref,
+    className: toast({
+      className,
+      theme,
+      action,
+      paused,
+      stacked,
+      reordered,
+      closeButton,
+    }),
+    timeout,
+    classNames,
+    onEnter,
+    onEntering,
+    onEntered,
+    onExit,
+    onExiting,
+    onExited,
+    temporary: true,
+    transitionIn: visible,
+    exitedHidden: true,
+  });
+
+  // this might get rid of the weird popping-back-in for a split second
+  // that sometimes happens on mobile firefox
+  if (!rendered) {
+    return null;
   }
-);
+
+  return (
+    <div {...remaining} {...elementProps} id={id}>
+      <ToastContent
+        action={action}
+        stacked={stacked}
+        multiline={multiline}
+        closeButton={closeButton}
+        disableWrapper={disableToastContent}
+        {...contentProps}
+      >
+        {children}
+      </ToastContent>
+      {actionButton}
+      {closeButton && (
+        <ToastCloseButton reordered={reordered} {...closeButtonProps}>
+          {closeIcon}
+        </ToastCloseButton>
+      )}
+    </div>
+  );
+}

package/src/snackbar/ToastActionButton.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { cnb } from "cnbuilder";
-import { forwardRef } from "react";
+import { type ReactElement } from "react";
 
 import { Button, type ButtonProps } from "../button/Button.js";
 import { type ButtonTheme } from "../button/styles.js";
@@ -39,11 +39,11 @@ export interface ToastActionButtonProps extends ButtonProps {
  * @see {@link https://react-md.dev/components/snackbar | Snackbar Demos}
  * @since 6.0.0
  */
-export const ToastActionButton = forwardRef<
-  HTMLButtonElement,
-  ToastActionButtonProps
->(function ToastActionButton(props, ref) {
+export const ToastActionButton = function ToastActionButton(
+  props: ToastActionButtonProps
+): ReactElement {
   const {
+    ref,
     className,
     children,
     theme = "secondary",
@@ -71,4 +71,4 @@ export const ToastActionButton = forwardRef<
       {children}
     </Button>
   );
-});
+};

package/src/snackbar/ToastCloseButton.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { cnb } from "cnbuilder";
-import { forwardRef } from "react";
+import { type ReactElement } from "react";
 
 import { Button, type ButtonProps } from "../button/Button.js";
 import { type ButtonType } from "../button/styles.js";
@@ -48,11 +48,9 @@ export interface ToastCloseButtonProps extends ButtonProps {
  * @see {@link https://react-md.dev/components/snackbar | Snackbar Demos}
  * @since 6.0.0
  */
-export const ToastCloseButton = forwardRef<
-  HTMLButtonElement,
-  ToastCloseButtonProps
->(function ToastCloseButton(props, ref) {
+export function ToastCloseButton(props: ToastCloseButtonProps): ReactElement {
   const {
+    ref,
     buttonType = "icon-square",
     "aria-labelledby": ariaLabelledBy,
     "aria-label": ariaLabel = buttonType !== "text" && !ariaLabelledBy
@@ -88,4 +86,4 @@ export const ToastCloseButton = forwardRef<
       {children}
     </Button>
   );
-});
+}

package/src/snackbar/ToastContent.tsx

@@ -1,6 +1,12 @@
 "use client";
 
-import { type HTMLAttributes, forwardRef, useCallback, useState } from "react";
+import {
+  type HTMLAttributes,
+  type ReactElement,
+  type Ref,
+  useCallback,
+  useState,
+} from "react";
 
 import { useResizeObserver } from "../useResizeObserver.js";
 import { toastContent } from "./toastContentStyles.js";
@@ -9,6 +15,8 @@ import { toastContent } from "./toastContentStyles.js";
  * @since 6.0.0
  */
 export interface ToastContentProps extends HTMLAttributes<HTMLDivElement> {
+  ref?: Ref<HTMLDivElement>;
+
   /** @defaultValue `false` */
   action?: boolean;
 
@@ -42,55 +50,54 @@ export interface ToastContentProps extends HTMLAttributes<HTMLDivElement> {
  * @see {@link https://react-md.dev/components/snackbar | Snackbar Demos}
  * @since 6.0.0
  */
-export const ToastContent = forwardRef<HTMLDivElement, ToastContentProps>(
-  function ToastContent(props, ref) {
-    const {
-      className,
-      children,
-      action,
-      stacked,
-      multiline: propMultiline,
-      closeButton,
-      disableWrapper,
-      ...remaining
-    } = props;
-
-    const [isMultiline, setMultiline] = useState(false);
-    const nodeRef = useResizeObserver({
-      ref,
-      disabled: disableWrapper || typeof propMultiline === "boolean",
-      disableWidth: true,
-      onUpdate: useCallback((entry) => {
-        const element = entry.target;
-        const style = globalThis.getComputedStyle(element);
-        const lineHeight = Number.parseFloat(style.lineHeight);
-        if (Number.isNaN(lineHeight)) {
-          return;
-        }
+export function ToastContent(props: ToastContentProps): ReactElement {
+  const {
+    ref,
+    className,
+    children,
+    action,
+    stacked,
+    multiline: propMultiline,
+    closeButton,
+    disableWrapper,
+    ...remaining
+  } = props;
 
-        setMultiline(element.scrollHeight > lineHeight);
-      }, []),
-    });
-    const multiline = propMultiline ?? isMultiline;
+  const [isMultiline, setMultiline] = useState(false);
+  const nodeRef = useResizeObserver({
+    ref,
+    disabled: disableWrapper || typeof propMultiline === "boolean",
+    disableWidth: true,
+    onUpdate: useCallback((entry) => {
+      const element = entry.target;
+      const style = globalThis.getComputedStyle(element);
+      const lineHeight = Number.parseFloat(style.lineHeight);
+      if (Number.isNaN(lineHeight)) {
+        return;
+      }
 
-    if (disableWrapper) {
-      return <>{children}</>;
-    }
+      setMultiline(element.scrollHeight > lineHeight);
+    }, []),
+  });
+  const multiline = propMultiline ?? isMultiline;
 
-    return (
-      <div
-        {...remaining}
-        ref={nodeRef}
-        className={toastContent({
-          action,
-          stacked,
-          multiline,
-          closeButton,
-          className,
-        })}
-      >
-        {children}
-      </div>
-    );
+  if (disableWrapper) {
+    return <>{children}</>;
   }
-);
+
+  return (
+    <div
+      {...remaining}
+      ref={nodeRef}
+      className={toastContent({
+        action,
+        stacked,
+        multiline,
+        closeButton,
+        className,
+      })}
+    >
+      {children}
+    </div>
+  );
+}

package/src/spinbutton/SpinButton.tsx

@@ -1,13 +1,12 @@
 "use client";
 
-import { type HTMLAttributes, forwardRef } from "react";
+import { type HTMLAttributes, type ReactElement, type Ref } from "react";
 
 import { type LabelRequiredForA11y } from "../types.js";
 import { defaultGetSpinButtonTextContent } from "./defaults.js";
 import {
   type SpinButtonOptions,
   type SpinButtonUncontrolledValueOptions,
-  type SpinButtonValueOptions,
 } from "./types.js";
 import { useSpinButton } from "./useSpinButton.js";
 
@@ -17,7 +16,9 @@ import { useSpinButton } from "./useSpinButton.js";
 export interface SpinButtonProps
   extends
     Omit<HTMLAttributes<HTMLDivElement>, keyof SpinButtonOptions>,
-    Omit<SpinButtonOptions<HTMLDivElement>, "ref" | "children"> {}
+    Omit<SpinButtonOptions<HTMLDivElement>, "ref" | "children"> {
+  ref?: Ref<HTMLDivElement>;
+}
 
 /**
  * The `SpinButton` component can be used as a simple wrapper around the
@@ -26,11 +27,11 @@ export interface SpinButtonProps
  *
  * @since 6.4.0
  */
-export const SpinButton = forwardRef<
-  HTMLDivElement,
-  LabelRequiredForA11y<SpinButtonProps> & SpinButtonValueOptions
->(function SpinButton(props, ref) {
+export function SpinButton(
+  props: LabelRequiredForA11y<SpinButtonProps>
+): ReactElement {
   const {
+    ref,
     id,
     min,
     max,
@@ -95,4 +96,4 @@ export const SpinButton = forwardRef<
       })}
     </div>
   );
-});
+}

package/src/spinbutton/types.ts

@@ -408,6 +408,6 @@ export interface SpinButtonImplementation<
 > {
   value: SpinButtonValue;
   setValue: (value: SpinButtonValue) => void;
-  spinButtonRef: RefObject<E>;
+  spinButtonRef: RefObject<E | null>;
   spinButtonProps: Readonly<ProvidedSpinButtonProps<E>>;
 }

package/src/table/StickyTableSection.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { type HTMLAttributes, forwardRef } from "react";
+import { type HTMLAttributes, type ReactElement, type Ref } from "react";
 
 import { TableConfigProvider } from "./TableConfigurationProvider.js";
 import { tableFooter } from "./tableFooterStyles.js";
@@ -18,6 +18,8 @@ export interface StickyTableSectionProps
     HTMLAttributes<HTMLTableSectionElement>,
     TableStickySectionConfiguration,
     TableSectionConfiguration {
+  ref?: Ref<HTMLTableSectionElement>;
+
   type: "header" | "footer";
 
   /**
@@ -40,11 +42,11 @@ export interface StickyTableSectionProps
  * @see {@link https://react-md.dev/components/table#sticky-tables | Sticky Table Demos}
  * @since 6.0.0
  */
-export const StickyTableSection = forwardRef<
-  HTMLTableSectionElement,
-  StickyTableSectionProps
->(function StickyTableSection(props, ref) {
+export function StickyTableSection(
+  props: StickyTableSectionProps
+): ReactElement {
   const {
+    ref,
     type,
     className,
     hoverable,
@@ -93,4 +95,4 @@ export const StickyTableSection = forwardRef<
       {isHeader && tbody}
     </TableConfigProvider>
   );
-});
+}

package/src/table/Table.tsx

@@ -1,6 +1,11 @@
 "use client";
 
-import { type TableHTMLAttributes, forwardRef, useMemo } from "react";
+import {
+  type ReactElement,
+  type Ref,
+  type TableHTMLAttributes,
+  useMemo,
+} from "react";
 
 import { TableConfigProvider } from "./TableConfigurationProvider.js";
 import { table } from "./tableStyles.js";
@@ -27,7 +32,9 @@ declare module "react" {
 }
 
 export interface TableProps
-  extends TableHTMLAttributes<HTMLTableElement>, TableConfiguration {}
+  extends TableHTMLAttributes<HTMLTableElement>, TableConfiguration {
+  ref?: Ref<HTMLTableElement>;
+}
 
 /**
  * **Client Component**
@@ -78,44 +85,43 @@ export interface TableProps
  *
  * @see {@link https://react-md.dev/components/table | Table Demos}
  */
-export const Table = forwardRef<HTMLTableElement, TableProps>(
-  function Table(props, ref) {
-    const {
-      className,
-      children,
-      dense = false,
-      hAlign = "left",
-      vAlign = "middle",
-      lineWrap = false,
-      fullWidth = false,
-      disableHover = false,
-      disableBorders = false,
-      ...remaining
-    } = props;
+export function Table(props: TableProps): ReactElement {
+  const {
+    ref,
+    className,
+    children,
+    dense = false,
+    hAlign = "left",
+    vAlign = "middle",
+    lineWrap = false,
+    fullWidth = false,
+    disableHover = false,
+    disableBorders = false,
+    ...remaining
+  } = props;
 
-    const configuration = useMemo<TableConfigContext>(
-      () => ({
-        dense,
-        header: false,
-        hAlign,
-        vAlign,
-        lineWrap,
-        disableHover,
-        disableBorders,
-      }),
-      [dense, hAlign, vAlign, lineWrap, disableHover, disableBorders]
-    );
+  const configuration = useMemo<TableConfigContext>(
+    () => ({
+      dense,
+      header: false,
+      hAlign,
+      vAlign,
+      lineWrap,
+      disableHover,
+      disableBorders,
+    }),
+    [dense, hAlign, vAlign, lineWrap, disableHover, disableBorders]
+  );
 
-    return (
-      <TableConfigProvider value={configuration}>
-        <table
-          {...remaining}
-          ref={ref}
-          className={table({ dense, fullWidth, className })}
-        >
-          {children}
-        </table>
-      </TableConfigProvider>
-    );
-  }
-);
+  return (
+    <TableConfigProvider value={configuration}>
+      <table
+        {...remaining}
+        ref={ref}
+        className={table({ dense, fullWidth, className })}
+      >
+        {children}
+      </table>
+    </TableConfigProvider>
+  );
+}