@react-md/core 6.5.2 → 7.0.0

package/src/list/ListItemLink.tsx

@@ -3,7 +3,8 @@
 import {
   type AnchorHTMLAttributes,
   type HTMLAttributes,
-  forwardRef,
+  type ReactElement,
+  type Ref,
 } from "react";
 
 import { type ComponentWithRippleProps } from "../interaction/types.js";
@@ -22,6 +23,8 @@ export interface ListItemLinkProps
     ListItemClassNameOptions,
     ListItemChildrenProps,
     ComponentWithRippleProps {
+  ref?: Ref<HTMLAnchorElement>;
+
   /** @defaultValue `"a"` */
   as?: CustomLinkComponent;
 
@@ -84,132 +87,131 @@ export interface ListItemLinkProps
  *
  * @see {@link https://react-md.dev/components/list | List Demos}
  */
-export const ListItemLink = forwardRef<HTMLAnchorElement, ListItemLinkProps>(
-  function ListItemLink(props, ref) {
-    const {
-      as: Link = "a",
-      to,
-      href,
-      className,
-      liProps,
-      textProps,
-      textClassName,
-      secondaryTextClassName,
-      primaryText,
-      secondaryText,
-      secondaryTextProps,
-      disableTextChildren = false,
-      height: propHeight,
-      leftAddon,
-      leftAddonType = "icon",
-      leftAddonPosition = "middle",
-      leftAddonClassName,
-      leftAddonForceWrap,
-      rightAddon,
-      rightAddonType = "icon",
-      rightAddonPosition = "middle",
-      rightAddonClassName,
-      rightAddonForceWrap,
-      disableLeftAddonCenteredMedia = false,
-      disableRightAddonCenteredMedia = false,
-      multiline = false,
-      disabled = false,
-      disabledOpacity = false,
-      onBlur,
-      onClick,
-      onKeyDown,
-      onKeyUp,
-      onMouseDown,
-      onMouseUp,
-      onMouseLeave,
-      onDragStart,
-      onTouchStart,
-      onTouchEnd,
-      onTouchMove,
-      role,
-      tabIndex = disabled || role === "menuitem" ? -1 : undefined,
-      children: propChildren,
-      disableRipple,
-      ...remaining
-    } = props;
+export function ListItemLink(props: ListItemLinkProps): ReactElement {
+  const {
+    ref,
+    as: Link = "a",
+    to,
+    href,
+    className,
+    liProps,
+    textProps,
+    textClassName,
+    secondaryTextClassName,
+    primaryText,
+    secondaryText,
+    secondaryTextProps,
+    disableTextChildren = false,
+    height: propHeight,
+    leftAddon,
+    leftAddonType = "icon",
+    leftAddonPosition = "middle",
+    leftAddonClassName,
+    leftAddonForceWrap,
+    rightAddon,
+    rightAddonType = "icon",
+    rightAddonPosition = "middle",
+    rightAddonClassName,
+    rightAddonForceWrap,
+    disableLeftAddonCenteredMedia = false,
+    disableRightAddonCenteredMedia = false,
+    multiline = false,
+    disabled = false,
+    disabledOpacity = false,
+    onBlur,
+    onClick,
+    onKeyDown,
+    onKeyUp,
+    onMouseDown,
+    onMouseUp,
+    onMouseLeave,
+    onDragStart,
+    onTouchStart,
+    onTouchEnd,
+    onTouchMove,
+    role,
+    tabIndex = disabled || role === "menuitem" ? -1 : undefined,
+    children: propChildren,
+    disableRipple,
+    ...remaining
+  } = props;
 
-    const { pressedClassName, ripples, handlers } = useElementInteraction({
-      mode: disableRipple ? "none" : undefined,
-      onBlur,
-      onClick,
-      onKeyDown,
-      onKeyUp,
-      onMouseDown,
-      onMouseUp,
-      onMouseLeave,
-      onDragStart,
-      onTouchStart,
-      onTouchEnd,
-      onTouchMove,
-      disabled,
-    });
-    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,
+  });
+  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 {...liProps} role="none">
-        <Link
-          ref={ref}
-          {...remaining}
-          {...handlers}
-          role={role}
-          className={listItem({
-            className,
-            link: true,
-            height,
-            disabled,
-            disabledOpacity,
-            multiline,
-            pressedClassName,
-          })}
-          // TODO: Figure out a better type for the CustomLinkComponent to fix this
-          to={to as string}
-          href={href as string}
-          tabIndex={tabIndex}
+  return (
+    <li {...liProps} role="none">
+      <Link
+        ref={ref}
+        {...remaining}
+        {...handlers}
+        role={role}
+        className={listItem({
+          className,
+          link: true,
+          height,
+          disabled,
+          disabledOpacity,
+          multiline,
+          pressedClassName,
+        })}
+        // TODO: Figure out a better type for the CustomLinkComponent to fix this
+        to={to as string}
+        href={href as string}
+        tabIndex={tabIndex}
+      >
+        <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}
+          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}
-            disableLeftAddonCenteredMedia={disableLeftAddonCenteredMedia}
-            disableRightAddonCenteredMedia={disableRightAddonCenteredMedia}
-          >
-            {children}
-          </ListItemChildren>
-          {ripples}
-        </Link>
-      </li>
-    );
-  }
-);
+          {children}
+        </ListItemChildren>
+        {ripples}
+      </Link>
+    </li>
+  );
+}

package/src/list/ListItemText.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 { listItemText } from "./listItemStyles.js";
@@ -7,6 +12,7 @@ import { listItemText } from "./listItemStyles.js";
  * @internal
  */
 export interface ListItemTextProps extends HTMLAttributes<HTMLSpanElement> {
+  ref?: Ref<HTMLSpanElement>;
   secondaryText?: ReactNode;
   secondaryTextProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>>;
 
@@ -21,40 +27,39 @@ export interface ListItemTextProps extends HTMLAttributes<HTMLSpanElement> {
  *
  * @internal
  */
-export const ListItemText = forwardRef<HTMLSpanElement, ListItemTextProps>(
-  function ListItemText(props, ref) {
-    const {
-      className,
-      secondaryText,
-      secondaryTextProps,
-      secondaryTextClamped = false,
-      secondaryTextClassName,
-      children,
-      ...remaining
-    } = props;
+export function ListItemText(props: ListItemTextProps): ReactElement {
+  const {
+    ref,
+    className,
+    secondaryText,
+    secondaryTextProps,
+    secondaryTextClamped = false,
+    secondaryTextClassName,
+    children,
+    ...remaining
+  } = props;
 
-    return (
-      <span
-        {...remaining}
-        ref={ref}
-        className={listItemText({
-          className,
-        })}
-      >
-        {children}
-        {secondaryText && (
-          <span
-            {...secondaryTextProps}
-            className={listItemText({
-              clamped: secondaryTextClamped,
-              className: secondaryTextClassName,
-              secondary: true,
-            })}
-          >
-            {secondaryText}
-          </span>
-        )}
-      </span>
-    );
-  }
-);
+  return (
+    <span
+      {...remaining}
+      ref={ref}
+      className={listItemText({
+        className,
+      })}
+    >
+      {children}
+      {secondaryText && (
+        <span
+          {...secondaryTextProps}
+          className={listItemText({
+            clamped: secondaryTextClamped,
+            className: secondaryTextClassName,
+            secondary: true,
+          })}
+        >
+          {secondaryText}
+        </span>
+      )}
+    </span>
+  );
+}

package/src/list/ListSubheader.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 { type PropsWithRef } from "../types.js";
 import { bem } from "../utils/bem.js";
@@ -36,6 +36,8 @@ export function listSubheader(
  */
 export interface ListSubheaderProps
   extends HTMLAttributes<HTMLLIElement>, ListSubheaderClassNameOptions {
+  ref?: Ref<HTMLLIElement>;
+
   /**
    * @defaultValue `"presentation"`
    */
@@ -53,29 +55,28 @@ export interface ListSubheaderProps
  *
  * @see {@link https://react-md.dev/components/list | List Demos}
  */
-export const ListSubheader = forwardRef<HTMLLIElement, ListSubheaderProps>(
-  function ListSubheader(props, ref) {
-    const {
-      role = "presentation",
-      inset = false,
-      className,
-      children,
-      textProps,
-      ...remaining
-    } = props;
+export function ListSubheader(props: ListSubheaderProps): ReactElement {
+  const {
+    ref,
+    role = "presentation",
+    inset = false,
+    className,
+    children,
+    textProps,
+    ...remaining
+  } = props;
 
-    return (
-      <li
-        {...remaining}
-        ref={ref}
-        role={role}
-        className={listSubheader({
-          inset,
-          className,
-        })}
-      >
-        <ListItemText {...textProps}>{children}</ListItemText>
-      </li>
-    );
-  }
-);
+  return (
+    <li
+      {...remaining}
+      ref={ref}
+      role={role}
+      className={listSubheader({
+        inset,
+        className,
+      })}
+    >
+      <ListItemText {...textProps}>{children}</ListItemText>
+    </li>
+  );
+}

package/src/menu/DropdownMenu.tsx

@@ -199,7 +199,7 @@ export function DropdownMenu(props: DropdownMenuProps): ReactElement {
       <MenuItemButton
         {...(remaining as DropdownMenuItemButtonProps)}
         id={id}
-        ref={fixedTo as RefObject<HTMLLIElement>}
+        ref={fixedTo as RefObject<HTMLLIElement | null>}
         iconRotatorProps={iconRotatorProps}
       >
         {buttonChildren}
@@ -210,7 +210,7 @@ export function DropdownMenu(props: DropdownMenuProps): ReactElement {
       <MenuButton
         {...(remaining as DropdownMenuButtonProps)}
         id={id}
-        ref={fixedTo as RefObject<HTMLButtonElement>}
+        ref={fixedTo as RefObject<HTMLButtonElement | null>}
         floating={floating}
         iconRotatorProps={iconRotatorProps}
       >