@react-md/core 6.5.2 → 7.0.0

package/src/layout/Main.tsx

@@ -3,9 +3,9 @@
 import {
   type ElementType,
   type HTMLAttributes,
+  type ReactElement,
   type ReactNode,
   type Ref,
-  forwardRef,
 } from "react";
 
 import { useEnsuredId } from "../useEnsuredId.js";
@@ -17,7 +17,7 @@ import { useMainTabIndex } from "./useMainTabIndex.js";
  */
 export type CustomMainElement = ElementType<
   HTMLAttributes<HTMLElement> & {
-    ref: Ref<HTMLElement>;
+    ref?: Ref<HTMLElement>;
     className?: string;
     tabIndex?: number;
   }
@@ -28,6 +28,8 @@ export type CustomMainElement = ElementType<
  */
 export interface MainProps
   extends HTMLAttributes<HTMLElement>, MainClassNameOptions {
+  ref?: Ref<HTMLElement>;
+
   /**
    * @defaultValue `"main"`
    */
@@ -65,31 +67,30 @@ export interface MainProps
  * @since 6.0.0 Renamed from `LayoutMain` removed a lot of
  * functionality to keep this component simple.
  */
-export const Main = forwardRef<HTMLElement, MainProps>(
-  function Main(props, ref) {
-    const {
-      as: Component = "main",
-      id: propId,
-      className,
-      children,
-      tabIndex: propTabIndex,
-      navOffset,
-      appBarOffset,
-      ...remaining
-    } = props;
-    const id = useEnsuredId(propId, "main");
-    const tabIndex = useMainTabIndex(propTabIndex);
+export function Main(props: MainProps): ReactElement {
+  const {
+    as: Component = "main",
+    id: propId,
+    ref,
+    className,
+    children,
+    tabIndex: propTabIndex,
+    navOffset,
+    appBarOffset,
+    ...remaining
+  } = props;
+  const id = useEnsuredId(propId, "main");
+  const tabIndex = useMainTabIndex(propTabIndex);
 
-    return (
-      <Component
-        {...remaining}
-        id={id}
-        ref={ref}
-        className={main({ navOffset, appBarOffset, className })}
-        tabIndex={tabIndex}
-      >
-        {children}
-      </Component>
-    );
-  }
-);
+  return (
+    <Component
+      {...remaining}
+      id={id}
+      ref={ref}
+      className={main({ navOffset, appBarOffset, className })}
+      tabIndex={tabIndex}
+    >
+      {children}
+    </Component>
+  );
+}

package/src/link/Link.tsx

@@ -1,7 +1,9 @@
 import {
   type AnchorHTMLAttributes,
+  type ComponentType,
   type ForwardRefExoticComponent,
-  forwardRef,
+  type ReactElement,
+  type Ref,
 } from "react";
 
 import { type LinkClassNameOptions, link } from "./styles.js";
@@ -12,6 +14,8 @@ import { type LinkClassNameOptions, link } from "./styles.js";
 export type CustomLinkComponent =
   | ForwardRefExoticComponent<{ href: string }>
   | ForwardRefExoticComponent<{ to: string }>
+  | ComponentType<{ ref?: Ref<HTMLAnchorElement>; href: string }>
+  | ComponentType<{ ref?: Ref<HTMLAnchorElement>; to: string }>
   | "a";
 
 /**
@@ -24,6 +28,8 @@ export type CustomLinkComponent =
  */
 export interface LinkProps
   extends AnchorHTMLAttributes<HTMLAnchorElement>, LinkClassNameOptions {
+  ref?: Ref<HTMLAnchorElement>;
+
   /**
    * All links **must** have a valid href.
    */
@@ -64,15 +70,14 @@ export interface LinkProps
  * behavior is `className="rmd-link"`.
  * @since 6.0.0 The `href` prop is required.
  * @since 6.0.0 Renamed `flexCentered` to `flex`.
+ * @since 7.0.0 No longer uses `forwardRef`
  */
-export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
-  function Link(props, ref) {
-    const { className, flex, children, ...remaining } = props;
+export function Link(props: LinkProps): ReactElement {
+  const { ref, className, flex, children, ...remaining } = props;
 
-    return (
-      <a {...remaining} ref={ref} className={link({ flex, className })}>
-        {children}
-      </a>
-    );
-  }
-);
+  return (
+    <a {...remaining} ref={ref} className={link({ flex, className })}>
+      {children}
+    </a>
+  );
+}

package/src/link/SkipToMainContent.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { type ReactNode, forwardRef, useRef } from "react";
+import { type ReactElement, type ReactNode, type Ref, useRef } from "react";
 
 import { useDevEffect } from "../utils/useDevEffect.js";
 import { Link, type LinkProps } from "./Link.js";
@@ -23,6 +23,8 @@ const getMainElement = (mainId: string): HTMLElement | null =>
  */
 export interface SkipToMainContentProps
   extends Omit<LinkProps, "href">, SkipToMainContentClassNameOptions {
+  ref?: Ref<HTMLAnchorElement>;
+
   /**
    * @since 6.0.0 Changed default value from `"skip-to-main-content"`
    * @defaultValue `"skip-to-main"`
@@ -77,11 +79,9 @@ export interface SkipToMainContentProps
  * with the provided `mainId` in development mode. The previous behavior would
  * only log an error after being clicked.
  */
-export const SkipToMainContent = forwardRef<
-  HTMLAnchorElement,
-  SkipToMainContentProps
->(function SkipToMainContent(props, ref) {
+export function SkipToMainContent(props: SkipToMainContentProps): ReactElement {
   const {
+    ref,
     id = "skip-to-main",
     className,
     children = "Skip to main content",
@@ -144,4 +144,4 @@ export const SkipToMainContent = forwardRef<
       {children}
     </Link>
   );
-});
+}

package/src/list/List.tsx

@@ -1,4 +1,4 @@
-import { type HTMLAttributes, forwardRef } from "react";
+import { type HTMLAttributes, type ReactElement, type Ref } from "react";
 
 import { type ListClassNameOptions, list } from "./listStyles.js";
 
@@ -9,6 +9,8 @@ export type ListElement = HTMLUListElement | HTMLOListElement;
  */
 export interface ListProps
   extends HTMLAttributes<ListElement>, ListClassNameOptions {
+  ref?: Ref<ListElement>;
+
   /**
    * @defaultValue `"none"`
    */
@@ -66,31 +68,31 @@ export interface ListProps
  *
  * @see {@link https://react-md.dev/components/list | List Demos}
  */
-export const List = forwardRef<ListElement, ListProps>(
-  function List(props, ref) {
-    const {
-      className,
-      children,
-      role = "none",
-      dense = false,
-      ordered = false,
-      horizontal = false,
-      ...remaining
-    } = props;
-    const Component = (ordered ? "ol" : "ul") as "ul";
-    return (
-      <Component
-        {...remaining}
-        ref={ref}
-        role={role}
-        className={list({
-          dense,
-          horizontal,
-          className,
-        })}
-      >
-        {children}
-      </Component>
-    );
-  }
-);
+export function List(props: ListProps): ReactElement {
+  const {
+    ref,
+    className,
+    children,
+    role = "none",
+    dense = false,
+    ordered = false,
+    horizontal = false,
+    ...remaining
+  } = props;
+
+  const Component = (ordered ? "ol" : "ul") as "ul";
+  return (
+    <Component
+      {...remaining}
+      ref={ref}
+      role={role}
+      className={list({
+        dense,
+        horizontal,
+        className,
+      })}
+    >
+      {children}
+    </Component>
+  );
+}

package/src/list/ListItem.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { type HTMLAttributes, forwardRef } from "react";
+import { type HTMLAttributes, type ReactElement, type Ref } from "react";
 
 import { type ComponentWithRippleProps } from "../interaction/types.js";
 import { useElementInteraction } from "../interaction/useElementInteraction.js";
@@ -24,6 +24,8 @@ export interface ListItemProps
     ListItemChildrenProps,
     BaseListItemClassNameOptions,
     ComponentWithRippleProps {
+  ref?: Ref<HTMLLIElement>;
+
   /**
    * @defaultValue `"button"`
    */
@@ -111,132 +113,131 @@ export interface ListItemProps
  *
  * @see {@link https://react-md.dev/components/list | List Demos}
  */
-export const ListItem = forwardRef<HTMLLIElement, ListItemProps>(
-  function ListItem(props, ref) {
-    const {
-      className,
-      textProps,
-      textClassName,
-      secondaryTextClassName,
-      primaryText,
-      secondaryText,
-      secondaryTextProps,
-      disableTextChildren = false,
-      height: propHeight,
-      leftAddon,
-      leftAddonType,
-      leftAddonPosition,
-      leftAddonClassName,
-      leftAddonForceWrap,
-      rightAddon,
-      rightAddonType,
-      rightAddonPosition,
-      rightAddonClassName,
-      rightAddonForceWrap,
-      disableLeftAddonSpacing,
-      disableLeftAddonCenteredMedia,
-      disableRightAddonCenteredMedia,
-      multiline = false,
-      disabled = false,
-      disableRipple,
-      disabledOpacity = false,
-      role = "button",
-      onBlur,
-      onClick,
-      onKeyDown,
-      onKeyUp,
-      onMouseDown,
-      onMouseUp,
-      onMouseLeave,
-      onDragStart,
-      onTouchStart,
-      onTouchEnd,
-      onTouchMove,
-      tabIndex: propTabIndex,
-      children: propChildren,
-      presentational = role === "presentation",
-      ...remaining
-    } = props;
+export function ListItem(props: ListItemProps): ReactElement {
+  const {
+    ref,
+    className,
+    textProps,
+    textClassName,
+    secondaryTextClassName,
+    primaryText,
+    secondaryText,
+    secondaryTextProps,
+    disableTextChildren = false,
+    height: propHeight,
+    leftAddon,
+    leftAddonType,
+    leftAddonPosition,
+    leftAddonClassName,
+    leftAddonForceWrap,
+    rightAddon,
+    rightAddonType,
+    rightAddonPosition,
+    rightAddonClassName,
+    rightAddonForceWrap,
+    disableLeftAddonSpacing,
+    disableLeftAddonCenteredMedia,
+    disableRightAddonCenteredMedia,
+    multiline = false,
+    disabled = false,
+    disableRipple,
+    disabledOpacity = false,
+    role = "button",
+    onBlur,
+    onClick,
+    onKeyDown,
+    onKeyUp,
+    onMouseDown,
+    onMouseUp,
+    onMouseLeave,
+    onDragStart,
+    onTouchStart,
+    onTouchEnd,
+    onTouchMove,
+    tabIndex: propTabIndex,
+    children: propChildren,
+    presentational = role === "presentation",
+    ...remaining
+  } = props;
 
-    let tabIndex = propTabIndex;
-    if (!presentational && tabIndex === undefined) {
-      tabIndex = disabled ? -1 : 0;
-    }
+  let tabIndex = propTabIndex;
+  if (!presentational && tabIndex === undefined) {
+    tabIndex = disabled ? -1 : 0;
+  }
 
-    const { pressedClassName, ripples, handlers } = useElementInteraction({
-      mode: disableRipple ? "none" : undefined,
-      onBlur,
-      onClick,
-      onKeyDown,
-      onKeyUp,
-      onMouseDown,
-      onMouseUp,
-      onMouseLeave,
-      onDragStart,
-      onTouchStart,
-      onTouchEnd,
-      onTouchMove,
-      disabled: disabled || presentational,
-    });
-    const children = useHigherContrastChildren(
-      propChildren,
-      !disableTextChildren
-    );
+  const { pressedClassName, ripples, handlers } = useElementInteraction({
+    mode: disableRipple ? "none" : undefined,
+    onBlur,
+    onClick,
+    onKeyDown,
+    onKeyUp,
+    onMouseDown,
+    onMouseUp,
+    onMouseLeave,
+    onDragStart,
+    onTouchStart,
+    onTouchEnd,
+    onTouchMove,
+    disabled: disabled || presentational,
+  });
+  const children = useHigherContrastChildren(
+    propChildren,
+    !disableTextChildren
+  );
 
-    const height = getListItemHeight({
-      height: propHeight,
-      leftAddon,
-      leftAddonType,
-      rightAddon,
-      rightAddonType,
-      secondaryText,
-    });
+  const height = getListItemHeight({
+    height: propHeight,
+    leftAddon,
+    leftAddonType,
+    rightAddon,
+    rightAddonType,
+    secondaryText,
+  });
 
-    return (
-      <li
-        {...remaining}
-        {...handlers}
-        aria-disabled={disabled || undefined}
-        ref={ref}
-        role={role}
-        tabIndex={tabIndex}
-        className={listItem({
-          className,
-          height,
-          disabled,
-          disabledOpacity,
-          multiline,
-          clickable: !presentational,
-          pressedClassName,
-        })}
+  return (
+    <li
+      {...remaining}
+      {...handlers}
+      aria-disabled={disabled || undefined}
+      ref={ref}
+      role={role}
+      tabIndex={tabIndex}
+      className={listItem({
+        className,
+        height,
+        disabled,
+        disabledOpacity,
+        multiline,
+        clickable: !presentational,
+        pressedClassName,
+      })}
+    >
+      <ListItemChildren
+        multiline={multiline}
+        textClassName={textClassName}
+        secondaryTextClassName={secondaryTextClassName}
+        disableTextChildren={disableTextChildren}
+        primaryText={primaryText}
+        textProps={textProps}
+        secondaryText={secondaryText}
+        secondaryTextProps={secondaryTextProps}
+        leftAddon={leftAddon}
+        leftAddonType={leftAddonType}
+        leftAddonPosition={leftAddonPosition}
+        leftAddonClassName={leftAddonClassName}
+        leftAddonForceWrap={leftAddonForceWrap}
+        rightAddon={rightAddon}
+        rightAddonType={rightAddonType}
+        rightAddonPosition={rightAddonPosition}
+        rightAddonClassName={rightAddonClassName}
+        rightAddonForceWrap={rightAddonForceWrap}
+        disableLeftAddonSpacing={disableLeftAddonSpacing}
+        disableLeftAddonCenteredMedia={disableLeftAddonCenteredMedia}
+        disableRightAddonCenteredMedia={disableRightAddonCenteredMedia}
       >
-        <ListItemChildren
-          multiline={multiline}
-          textClassName={textClassName}
-          secondaryTextClassName={secondaryTextClassName}
-          disableTextChildren={disableTextChildren}
-          primaryText={primaryText}
-          textProps={textProps}
-          secondaryText={secondaryText}
-          secondaryTextProps={secondaryTextProps}
-          leftAddon={leftAddon}
-          leftAddonType={leftAddonType}
-          leftAddonPosition={leftAddonPosition}
-          leftAddonClassName={leftAddonClassName}
-          leftAddonForceWrap={leftAddonForceWrap}
-          rightAddon={rightAddon}
-          rightAddonType={rightAddonType}
-          rightAddonPosition={rightAddonPosition}
-          rightAddonClassName={rightAddonClassName}
-          rightAddonForceWrap={rightAddonForceWrap}
-          disableLeftAddonSpacing={disableLeftAddonSpacing}
-          disableLeftAddonCenteredMedia={disableLeftAddonCenteredMedia}
-          disableRightAddonCenteredMedia={disableRightAddonCenteredMedia}
-        >
-          {children}
-        </ListItemChildren>
-        {ripples}
-      </li>
-    );
-  }
-);
+        {children}
+      </ListItemChildren>
+      {ripples}
+    </li>
+  );
+}