@react-md/core 6.5.2 → 7.0.0

package/src/card/CardTitle.tsx

@@ -1,4 +1,4 @@
-import { forwardRef } from "react";
+import { type ReactElement, type Ref } from "react";
 
 import {
   Typography,
@@ -12,6 +12,8 @@ import { cardTitle } from "./styles.js";
  * `small`/`noWrap` props.
  */
 export interface CardTitleProps extends TypographyProps {
+  ref?: Ref<TypographyHTMLElement>;
+
   /** @defaultValue `"h5"` */
   as?: TypographyProps["as"];
 
@@ -27,28 +29,27 @@ export interface CardTitleProps extends TypographyProps {
  * @since 6.0.0 Extends the {@link Typography} component and removed
  * the `small`/`noWrap` props.
  */
-export const CardTitle = forwardRef<TypographyHTMLElement, CardTitleProps>(
-  function CardTitle(props, ref) {
-    const {
-      children,
-      as = "h5",
-      type = "headline-5",
-      margin = "none",
-      className,
-      ...remaining
-    } = props;
+export function CardTitle(props: CardTitleProps): ReactElement {
+  const {
+    ref,
+    as = "h5",
+    type = "headline-5",
+    margin = "none",
+    children,
+    className,
+    ...remaining
+  } = props;
 
-    return (
-      <Typography
-        {...remaining}
-        ref={ref}
-        as={as}
-        type={type}
-        margin={margin}
-        className={cardTitle({ className })}
-      >
-        {children}
-      </Typography>
-    );
-  }
-);
+  return (
+    <Typography
+      {...remaining}
+      ref={ref}
+      as={as}
+      type={type}
+      margin={margin}
+      className={cardTitle({ className })}
+    >
+      {children}
+    </Typography>
+  );
+}

package/src/card/ClickableCard.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { cnb } from "cnbuilder";
-import { type MouseEventHandler, forwardRef } from "react";
+import { type MouseEventHandler, type ReactElement, type Ref } from "react";
 
 import { type ComponentWithRippleProps } from "../interaction/types.js";
 import { useElementInteraction } from "../interaction/useElementInteraction.js";
@@ -17,6 +17,8 @@ const noop = (): void => {
  */
 export interface ClickableCardProps
   extends CardProps, ComponentWithRippleProps {
+  ref?: Ref<HTMLDivElement>;
+
   onClick: MouseEventHandler<HTMLDivElement>;
 
   /**
@@ -55,60 +57,61 @@ export interface ClickableCardProps
  * @see {@link https://react-md.dev/components/card#clickable-card | ClickableCard Demos}
  * @since 6.0.0
  */
-export const ClickableCard = forwardRef<HTMLDivElement, ClickableCardProps>(
-  function ClickableCard(props, ref) {
-    const {
-      role = "button",
-      disabled,
-      tabIndex = disabled ? undefined : 0,
-      onClick,
-      onKeyDown = noop,
-      className,
-      children: propChildren,
-      disableRipple,
-      ...remaining
-    } = props;
-    const { handlers, ripples } = useElementInteraction({
-      ...remaining,
-      mode: disableRipple ? "none" : undefined,
-    });
-    const children = useHigherContrastChildren(propChildren);
-
-    return (
-      <Card
-        {...remaining}
-        {...handlers}
-        aria-disabled={disabled || undefined}
-        ref={ref}
-        role={role}
-        tabIndex={tabIndex}
-        className={cnb("rmd-card--clickable", className)}
-        onClick={(event) => {
-          if (disabled) {
-            return;
-          }
+export const ClickableCard = function ClickableCard(
+  props: ClickableCardProps
+): ReactElement {
+  const {
+    ref,
+    role = "button",
+    disabled,
+    tabIndex = disabled ? undefined : 0,
+    onClick,
+    onKeyDown = noop,
+    className,
+    children: propChildren,
+    disableRipple,
+    ...remaining
+  } = props;
+  const { handlers, ripples } = useElementInteraction({
+    ...remaining,
+    mode: disableRipple ? "none" : undefined,
+  });
+  const children = useHigherContrastChildren(propChildren);
 
-          onClick(event);
-        }}
-        onKeyDown={(event) => {
-          onKeyDown(event);
-          if (disabled) {
-            return;
-          }
+  return (
+    <Card
+      {...remaining}
+      {...handlers}
+      aria-disabled={disabled || undefined}
+      ref={ref}
+      role={role}
+      tabIndex={tabIndex}
+      className={cnb("rmd-card--clickable", className)}
+      onClick={(event) => {
+        if (disabled) {
+          return;
+        }
 
-          const isSpace = event.key === " ";
-          if (isSpace || event.key === "Enter") {
-            if (isSpace) {
-              event.preventDefault();
-            }
+        onClick(event);
+      }}
+      onKeyDown={(event) => {
+        onKeyDown(event);
+        if (disabled) {
+          return;
+        }
 
-            event.currentTarget.click();
+        const isSpace = event.key === " ";
+        if (isSpace || event.key === "Enter") {
+          if (isSpace) {
+            event.preventDefault();
           }
-        }}
-      >
-        {children}
-        {ripples}
-      </Card>
-    );
-  }
-);
+
+          event.currentTarget.click();
+        }
+      }}
+    >
+      {children}
+      {ripples}
+    </Card>
+  );
+};

package/src/chip/Chip.tsx

@@ -5,8 +5,9 @@ import {
   type ButtonHTMLAttributes,
   type CSSProperties,
   type HTMLAttributes,
+  type ReactElement,
   type ReactNode,
-  forwardRef,
+  type Ref,
 } from "react";
 
 import { type BackgroundColor } from "../cssUtils.js";
@@ -32,6 +33,8 @@ export interface ChipProps
     ButtonHTMLAttributes<HTMLButtonElement>,
     BaseMaxWidthTransitionOptions,
     ComponentWithRippleProps {
+  ref?: Ref<HTMLButtonElement>;
+
   /**
    * @defaultValue `"solid"`
    */
@@ -202,25 +205,94 @@ export interface ChipProps
  * @see {@link https://react-md.dev/components/chip | Chip Demos}
  * @since 6.0.0 Renamed the `noninteractable` prop to
  * `noninteractive`.
+ * @since 7.0.0 No longer uses `forwardRef`
  */
-export const Chip = forwardRef<HTMLButtonElement, ChipProps>(
-  function Chip(props, ref) {
-    const {
-      "aria-pressed": ariaPressed,
-      theme = "solid",
-      className,
-      raisable = false,
-      disabled = false,
-      selected,
-      selectedThemed = false,
-      selectedClassName,
-      selectedIcon: propSelectedIcon,
-      selectedIconAfter = false,
-      backgroundColor,
-      noninteractive = false,
-      disableRipple,
-      disableIconTransition = false,
-      children: propChildren,
+export function Chip(props: ChipProps): ReactElement {
+  const {
+    "aria-pressed": ariaPressed,
+    ref,
+    theme = "solid",
+    className,
+    raisable = false,
+    disabled = false,
+    selected,
+    selectedThemed = false,
+    selectedClassName,
+    selectedIcon: propSelectedIcon,
+    selectedIconAfter = false,
+    backgroundColor,
+    noninteractive = false,
+    disableRipple,
+    disableIconTransition = false,
+    children: propChildren,
+    onClick,
+    onKeyDown,
+    onKeyUp,
+    onMouseDown,
+    onMouseUp,
+    onMouseLeave,
+    onDragStart,
+    onTouchStart,
+    onTouchEnd,
+    onTouchMove,
+    leftAddon: propLeftAddon,
+    rightAddon: propRightAddon,
+    contentProps,
+    contentStyle,
+    contentClassName,
+    disableContentWrap = false,
+    ...remaining
+  } = props;
+
+  let buttonProps: ButtonHTMLAttributes<HTMLButtonElement> | undefined;
+  if (!noninteractive) {
+    buttonProps = {
+      "aria-pressed": ariaPressed ?? (!!selected || undefined),
+      type: "button",
+      disabled,
+    };
+  }
+
+  let content = propChildren;
+  if (!disableContentWrap) {
+    content = (
+      <span
+        style={contentStyle}
+        {...contentProps}
+        className={cnb(
+          chipContent({ className: contentClassName }),
+          contentProps?.className
+        )}
+      >
+        {propChildren}
+      </span>
+    );
+  }
+
+  let leftAddon = propLeftAddon;
+  let rightAddon = propRightAddon;
+  const selectedIconNode = getIcon("selected", propSelectedIcon);
+  const isTransitionable =
+    !selectedThemed &&
+    typeof selected === "boolean" &&
+    (selectedIconAfter ? propRightAddon : propLeftAddon) === undefined;
+  const selectedIcon = useMaxWidthTransition({
+    element: selectedIconNode,
+    transitionIn: !!selected,
+    disabled: !isTransitionable,
+    disableTransition: disableIconTransition,
+  });
+  if (isTransitionable) {
+    if (selectedIconAfter) {
+      rightAddon = selectedIcon;
+    } else {
+      leftAddon = selectedIcon;
+    }
+  }
+
+  const { pressed, pressedClassName, ripples, handlers } =
+    useElementInteraction({
+      mode: disableRipple ? "none" : undefined,
       onClick,
       onKeyDown,
       onKeyUp,
@@ -231,106 +303,36 @@ export const Chip = forwardRef<HTMLButtonElement, ChipProps>(
       onTouchStart,
       onTouchEnd,
       onTouchMove,
-      leftAddon: propLeftAddon,
-      rightAddon: propRightAddon,
-      contentProps,
-      contentStyle,
-      contentClassName,
-      disableContentWrap = false,
-      ...remaining
-    } = props;
-
-    let buttonProps: ButtonHTMLAttributes<HTMLButtonElement> | undefined;
-    if (!noninteractive) {
-      buttonProps = {
-        "aria-pressed": ariaPressed ?? (!!selected || undefined),
-        type: "button",
-        disabled,
-      };
-    }
-
-    let content = propChildren;
-    if (!disableContentWrap) {
-      content = (
-        <span
-          style={contentStyle}
-          {...contentProps}
-          className={cnb(
-            chipContent({ className: contentClassName }),
-            contentProps?.className
-          )}
-        >
-          {propChildren}
-        </span>
-      );
-    }
-
-    let leftAddon = propLeftAddon;
-    let rightAddon = propRightAddon;
-    const selectedIconNode = getIcon("selected", propSelectedIcon);
-    const isTransitionable =
-      !selectedThemed &&
-      typeof selected === "boolean" &&
-      (selectedIconAfter ? propRightAddon : propLeftAddon) === undefined;
-    const selectedIcon = useMaxWidthTransition({
-      element: selectedIconNode,
-      transitionIn: !!selected,
-      disabled: !isTransitionable,
-      disableTransition: disableIconTransition,
+      disabled: disabled || noninteractive,
     });
-    if (isTransitionable) {
-      if (selectedIconAfter) {
-        rightAddon = selectedIcon;
-      } else {
-        leftAddon = selectedIcon;
-      }
-    }
+  const children = useHigherContrastChildren(content);
+  const Component = noninteractive ? "span" : "button";
 
-    const { pressed, pressedClassName, ripples, handlers } =
-      useElementInteraction({
-        mode: disableRipple ? "none" : undefined,
-        onClick,
-        onKeyDown,
-        onKeyUp,
-        onMouseDown,
-        onMouseUp,
-        onMouseLeave,
-        onDragStart,
-        onTouchStart,
-        onTouchEnd,
-        onTouchMove,
-        disabled: disabled || noninteractive,
-      });
-    const children = useHigherContrastChildren(content);
-    const Component = noninteractive ? "span" : "button";
-
-    return (
-      <Component
-        {...remaining}
-        {...buttonProps}
-        {...handlers}
-        className={chip({
-          className,
-          theme,
-          pressed: raisable && pressed,
-          disabled,
-          selected,
-          selectedThemed,
-          selectedClassName,
-          noninteractive,
-          backgroundColor,
-          pressedClassName,
-          leftAddon: !!leftAddon && (selectedIconAfter || selected !== false),
-          rightAddon:
-            !!rightAddon && (!selectedIconAfter || selected !== false),
-        })}
-        ref={ref}
-      >
-        {leftAddon}
-        {children}
-        {rightAddon}
-        {ripples}
-      </Component>
-    );
-  }
-);
+  return (
+    <Component
+      {...remaining}
+      {...buttonProps}
+      {...handlers}
+      className={chip({
+        className,
+        theme,
+        pressed: raisable && pressed,
+        disabled,
+        selected,
+        selectedThemed,
+        selectedClassName,
+        noninteractive,
+        backgroundColor,
+        pressedClassName,
+        leftAddon: !!leftAddon && (selectedIconAfter || selected !== false),
+        rightAddon: !!rightAddon && (!selectedIconAfter || selected !== false),
+      })}
+      ref={ref}
+    >
+      {leftAddon}
+      {children}
+      {rightAddon}
+      {ripples}
+    </Component>
+  );
+}

package/src/datetime/NativeDateField.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { forwardRef } from "react";
+import { type ReactElement, type Ref } from "react";
 
 import { TextField, type TextFieldProps } from "../form/TextField.js";
 import { type DateFieldOptions, useDateField } from "./useDateField.js";
@@ -9,7 +9,9 @@ import { type DateFieldOptions, useDateField } from "./useDateField.js";
 export interface NativeDateFieldProps
   extends
     Omit<TextFieldProps, keyof DateFieldOptions | "value">,
-    Omit<DateFieldOptions, "ref"> {}
+    Omit<DateFieldOptions, "ref"> {
+  ref?: Ref<HTMLInputElement>;
+}
 
 /**
  * The `NativeDateField` is a simple wrapper around the `TextField` using the
@@ -29,11 +31,9 @@ export interface NativeDateFieldProps
  * @see {@link https://react-md.dev/components/text-field | TextField Demos}
  * @since 6.3.0
  */
-export const NativeDateField = forwardRef<
-  HTMLInputElement,
-  NativeDateFieldProps
->(function NativeDateField(props, ref) {
+export function NativeDateField(props: NativeDateFieldProps): ReactElement {
   const {
+    ref,
     id,
     min,
     max,
@@ -90,4 +90,4 @@ export const NativeDateField = forwardRef<
   return (
     <TextField {...remaining} {...fieldProps} messageProps={messageProps} />
   );
-});
+}

package/src/datetime/NativeTimeField.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { forwardRef } from "react";
+import { type ReactElement, type Ref } from "react";
 
 import { TextField, type TextFieldProps } from "../form/TextField.js";
 import { type TimeFieldOptions, useTimeField } from "./useTimeField.js";
@@ -11,7 +11,9 @@ import { type TimeFieldOptions, useTimeField } from "./useTimeField.js";
 export interface NativeTimeFieldProps
   extends
     Omit<TextFieldProps, keyof TimeFieldOptions | "value">,
-    Omit<TimeFieldOptions, "ref"> {}
+    Omit<TimeFieldOptions, "ref"> {
+  ref?: Ref<HTMLInputElement>;
+}
 
 /**
  * The `NativeTimeField` is a simple wrapper around the `TextField` using the
@@ -31,11 +33,9 @@ export interface NativeTimeFieldProps
  * @see {@link https://react-md.dev/components/text-field | TextField Demos}
  * @since 6.3.0
  */
-export const NativeTimeField = forwardRef<
-  HTMLInputElement,
-  NativeTimeFieldProps
->(function NativeTimeField(props, ref) {
+export function NativeTimeField(props: NativeTimeFieldProps): ReactElement {
   const {
+    ref,
     id,
     min,
     max,
@@ -92,4 +92,4 @@ export const NativeTimeField = forwardRef<
   return (
     <TextField {...remaining} {...fieldProps} messageProps={messageProps} />
   );
-});
+}