@react-md/core 6.5.1 → 7.0.0

package/src/icon/IconRotator.tsx

@@ -3,9 +3,10 @@ import {
   type CSSProperties,
   Children,
   type HTMLAttributes,
+  type ReactElement,
   type ReactNode,
+  type Ref,
   cloneElement,
-  forwardRef,
   isValidElement,
 } from "react";
 
@@ -33,6 +34,8 @@ export interface IconRotatorBaseProps
 }
 
 export interface IconRotatorProps extends IconRotatorBaseProps {
+  ref?: Ref<HTMLSpanElement>;
+
   /**
    * The icon that should be rotated. If this is a valid React Element, the
    * class names will be cloned into that icon, otherwise the icon will be
@@ -47,33 +50,32 @@ export interface IconRotatorProps extends IconRotatorBaseProps {
  *
  * @see {@link https://react-md.dev/components/icon-rotator | IconRotator Demos}
  */
-export const IconRotator = forwardRef<HTMLSpanElement, IconRotatorProps>(
-  function IconRotator(props, ref) {
-    const {
-      className: propClassName,
-      rotated,
-      children,
-      forceIconWrap = false,
-      disableTransition = false,
-      ...remaining
-    } = props;
+export function IconRotator(props: IconRotatorProps): ReactElement {
+  const {
+    ref,
+    className: propClassName,
+    rotated,
+    children,
+    forceIconWrap = false,
+    disableTransition = false,
+    ...remaining
+  } = props;
 
-    const className = iconRotator({
-      rotated,
-      className: propClassName,
-      disableTransition,
+  const className = iconRotator({
+    rotated,
+    className: propClassName,
+    disableTransition,
+  });
+  if (!forceIconWrap && isValidElement<{ className?: string }>(children)) {
+    const child = Children.only(children);
+    return cloneElement(child, {
+      className: cnb(className, child.props.className),
     });
-    if (!forceIconWrap && isValidElement<{ className?: string }>(children)) {
-      const child = Children.only(children);
-      return cloneElement(child, {
-        className: cnb(className, child.props.className),
-      });
-    }
-
-    return (
-      <span {...remaining} ref={ref} className={className}>
-        {children}
-      </span>
-    );
   }
-);
+
+  return (
+    <span {...remaining} ref={ref} className={className}>
+      {children}
+    </span>
+  );
+}

package/src/icon/MaterialIcon.tsx

@@ -1,4 +1,9 @@
-import { type AriaAttributes, type HTMLAttributes, forwardRef } from "react";
+import {
+  type AriaAttributes,
+  type HTMLAttributes,
+  type ReactElement,
+  type Ref,
+} from "react";
 
 import { type MaterialIconFamily, type MaterialIconName } from "./material.js";
 import { MATERIAL_CONFIG } from "./materialConfig.js";
@@ -9,6 +14,8 @@ export interface MaterialIconProps
   extends
     HTMLAttributes<HTMLSpanElement>,
     Partial<MaterialIconClassNameOptions> {
+  ref?: Ref<HTMLSpanElement>;
+
   /**
    * The icon name to use
    */
@@ -39,33 +46,32 @@ export interface MaterialIconProps
  * @see {@link https://react-md.dev/components/material-icons|Available Material Icons}
  * @since 6.0.0
  */
-export const MaterialIcon = forwardRef<HTMLSpanElement, MaterialIconProps>(
-  function MaterialIcon(props, ref) {
-    const {
-      "aria-hidden": ariaHidden = true,
-      name,
-      family = MATERIAL_CONFIG.iconFamily,
-      theme,
-      dense,
-      className,
-      ...remaining
-    } = props;
+export function MaterialIcon(props: MaterialIconProps): ReactElement {
+  const {
+    ref,
+    "aria-hidden": ariaHidden = true,
+    name,
+    family = MATERIAL_CONFIG.iconFamily,
+    theme,
+    dense,
+    className,
+    ...remaining
+  } = props;
 
-    return (
-      <span
-        {...remaining}
-        aria-hidden={ariaHidden}
-        ref={ref}
-        className={icon({
-          type: "material",
-          family,
-          theme,
-          dense,
-          className,
-        })}
-      >
-        {name}
-      </span>
-    );
-  }
-);
+  return (
+    <span
+      {...remaining}
+      aria-hidden={ariaHidden}
+      ref={ref}
+      className={icon({
+        type: "material",
+        family,
+        theme,
+        dense,
+        className,
+      })}
+    >
+      {name}
+    </span>
+  );
+}

package/src/icon/MaterialSymbol.tsx

@@ -1,4 +1,9 @@
-import { type AriaAttributes, type HTMLAttributes, forwardRef } from "react";
+import {
+  type AriaAttributes,
+  type HTMLAttributes,
+  type ReactElement,
+  type Ref,
+} from "react";
 
 import { type MaterialSymbolName } from "./material.js";
 import {
@@ -28,6 +33,8 @@ export interface MaterialSymbolProps
     HTMLAttributes<HTMLSpanElement>,
     MaterialSymbolCustomization,
     Partial<MaterialSymbolClassNameOptions> {
+  ref?: Ref<HTMLSpanElement>;
+
   /** @defaultValue `true` */
   "aria-hidden"?: AriaAttributes["aria-hidden"];
   name: MaterialSymbolName;
@@ -68,47 +75,46 @@ export interface MaterialSymbolProps
  * @see {@link https://react-md.dev/components/material-icons|Available Material Icons}
  * @since 6.0.0
  */
-export const MaterialSymbol = forwardRef<HTMLSpanElement, MaterialSymbolProps>(
-  function MaterialSymbol(props, ref) {
-    const {
-      "aria-hidden": ariaHidden = true,
-      className,
-      name: symbol,
-      style: propStyle,
-      family: propFamily,
-      fill,
-      weight,
-      grade,
-      opticalSize,
-      theme,
-      dense,
-      ...remaining
-    } = props;
-    const { style, family } = getFontVariationSettings({
-      style: propStyle,
-      fill,
-      weight,
-      grade,
-      opticalSize,
-      family: propFamily,
-    });
+export function MaterialSymbol(props: MaterialSymbolProps): ReactElement {
+  const {
+    ref,
+    "aria-hidden": ariaHidden = true,
+    className,
+    name: symbol,
+    style: propStyle,
+    family: propFamily,
+    fill,
+    weight,
+    grade,
+    opticalSize,
+    theme,
+    dense,
+    ...remaining
+  } = props;
+  const { style, family } = getFontVariationSettings({
+    style: propStyle,
+    fill,
+    weight,
+    grade,
+    opticalSize,
+    family: propFamily,
+  });
 
-    return (
-      <span
-        {...remaining}
-        aria-hidden={ariaHidden}
-        ref={ref}
-        style={style}
-        className={icon({
-          type: "symbol",
-          family,
-          theme,
-          dense,
-          className,
-        })}
-      >
-        {symbol}
-      </span>
-    );
-  }
-);
+  return (
+    <span
+      {...remaining}
+      aria-hidden={ariaHidden}
+      ref={ref}
+      style={style}
+      className={icon({
+        type: "symbol",
+        family,
+        theme,
+        dense,
+        className,
+      })}
+    >
+      {symbol}
+    </span>
+  );
+}

package/src/icon/SVGIcon.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 SVGIconClassNameOptions, icon } from "./styles.js";
 
@@ -7,6 +12,8 @@ import { type SVGIconClassNameOptions, icon } from "./styles.js";
  */
 export interface SVGIconProps
   extends HTMLAttributes<SVGSVGElement>, SVGIconClassNameOptions {
+  ref?: Ref<SVGSVGElement>;
+
   /**
    * Boolean if the SVG should gain the `focusable` attribute. This is disabled
    * by default since IE11 and Edge actually default this to true and keyboard's
@@ -78,45 +85,44 @@ export interface SVGIconProps
  *
  * @see {@link https://react-md.dev/components/icon | Icon Demos}
  */
-export const SVGIcon = forwardRef<SVGSVGElement, SVGIconProps>(
-  function SVGIcon(props, ref) {
-    const {
-      "aria-hidden": ariaHidden = true,
-      focusable = "false",
-      use,
-      xmlns = use ? "http://www.w3.org/2000/svg" : undefined,
-      viewBox = "0 0 24 24",
-      dense = false,
-      className,
-      theme,
-      inline,
-      children: propChildren,
-      ...remaining
-    } = props;
-
-    let children = propChildren;
-    if (!children && use) {
-      children = <use xlinkHref={use} />;
-    }
+export function SVGIcon(props: SVGIconProps): ReactElement {
+  const {
+    ref,
+    "aria-hidden": ariaHidden = true,
+    focusable = "false",
+    use,
+    xmlns = use ? "http://www.w3.org/2000/svg" : undefined,
+    viewBox = "0 0 24 24",
+    dense = false,
+    className,
+    theme,
+    inline,
+    children: propChildren,
+    ...remaining
+  } = props;
 
-    return (
-      <svg
-        {...remaining}
-        aria-hidden={ariaHidden}
-        ref={ref}
-        className={icon({
-          type: "svg",
-          dense,
-          theme,
-          inline,
-          className,
-        })}
-        focusable={focusable}
-        xmlns={xmlns}
-        viewBox={viewBox}
-      >
-        {children}
-      </svg>
-    );
+  let children = propChildren;
+  if (!children && use) {
+    children = <use xlinkHref={use} />;
   }
-);
+
+  return (
+    <svg
+      {...remaining}
+      aria-hidden={ariaHidden}
+      ref={ref}
+      className={icon({
+        type: "svg",
+        dense,
+        theme,
+        inline,
+        className,
+      })}
+      focusable={focusable}
+      xmlns={xmlns}
+      viewBox={viewBox}
+    >
+      {children}
+    </svg>
+  );
+}

package/src/layout/LayoutAppBar.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { forwardRef } from "react";
+import { type ReactElement, type Ref } from "react";
 
 import {
   AppBar,
@@ -20,6 +20,8 @@ import { useLayoutAppBarHeight } from "./useLayoutAppBarHeight.js";
  * @since 6.0.0 Only supports `AppBar` + `SkipToMainContent` props
  */
 export interface LayoutAppBarProps extends AppBarProps {
+  ref?: Ref<HTMLDivElement>;
+
   /** @defaultValue `"header"` */
   as?: CustomAppBarComponent;
 
@@ -66,31 +68,24 @@ export interface LayoutAppBarProps extends AppBarProps {
  * `LayoutAppBarTitle` since they no longer exist. The only purpose of this
  * component is to dynamically set the `--rmd-layout-header-height` variable.
  */
-export const LayoutAppBar = forwardRef<HTMLDivElement, LayoutAppBarProps>(
-  function LayoutAppBar(props, ref) {
-    const {
-      as = "header",
-      id: propId,
-      position = "fixed",
-      skipProps,
-      children,
-      ...remaining
-    } = props;
-    const id = useEnsuredId(propId, "layout-header");
-    const { appBarRef, variables } = useLayoutAppBarHeight(ref);
-    useCSSVariables(variables);
+export function LayoutAppBar(props: LayoutAppBarProps): ReactElement {
+  const {
+    ref,
+    as = "header",
+    id: propId,
+    position = "fixed",
+    skipProps,
+    children,
+    ...remaining
+  } = props;
+  const id = useEnsuredId(propId, "layout-header");
+  const { appBarRef, variables } = useLayoutAppBarHeight(ref);
+  useCSSVariables(variables);
 
-    return (
-      <AppBar
-        {...remaining}
-        id={id}
-        as={as}
-        ref={appBarRef}
-        position={position}
-      >
-        <SkipToMainContent {...skipProps} />
-        {children}
-      </AppBar>
-    );
-  }
-);
+  return (
+    <AppBar {...remaining} id={id} as={as} ref={appBarRef} position={position}>
+      <SkipToMainContent {...skipProps} />
+      {children}
+    </AppBar>
+  );
+}

package/src/layout/LayoutNav.tsx

@@ -1,7 +1,12 @@
 "use client";
 
 import { cnb } from "cnbuilder";
-import { type HTMLAttributes, type ReactNode, forwardRef } from "react";
+import {
+  type HTMLAttributes,
+  type ReactElement,
+  type ReactNode,
+  type Ref,
+} from "react";
 
 import {
   type BaseSheetClassNameOptions,
@@ -27,6 +32,8 @@ export interface LayoutNavProps
     BaseSheetClassNameOptions,
     TransitionCallbacks,
     TransitionActions {
+  ref?: Ref<HTMLDivElement>;
+
   children: ReactNode;
 
   /**
@@ -136,65 +143,64 @@ export interface LayoutNavProps
  * @see {@link https://react-md.dev/getting-started/layout | Layout Demos}
  * @since 6.0.0
  */
-export const LayoutNav = forwardRef<HTMLDivElement, LayoutNavProps>(
-  function LayoutNav(props, ref) {
-    const {
-      as: Component = "nav",
-      "aria-labelledby": ariaLabelledBy,
-      "aria-label": ariaLabel = Component === "nav" && !ariaLabelledBy
-        ? "Navigation"
-        : undefined,
-      expanded,
-      children,
-      className,
-      timeout = DEFAULT_SHEET_TIMEOUT,
-      classNames = DEFAULT_SHEET_CLASSNAMES,
-      appear,
-      enter,
-      exit,
-      onEnter,
-      onEntering,
-      onEntered,
-      onExit,
-      onExited,
-      onExiting,
-      appBarOffset,
-      ...remaining
-    } = props;
-    const { elementProps } = useCSSTransition({
-      nodeRef: ref,
-      timeout,
-      className: cnb(
-        layoutNav({ appBarOffset }),
-        sheet({
-          className,
-          raised: false,
-          horizontalSize: "none",
-        })
-      ),
-      classNames,
-      enter,
-      exit,
-      appear,
-      onEnter,
-      onEntering,
-      onEntered,
-      onExit,
-      onExited,
-      onExiting,
-      exitedHidden: true,
-      transitionIn: expanded,
-    });
+export function LayoutNav(props: LayoutNavProps): ReactElement {
+  const {
+    ref,
+    as: Component = "nav",
+    "aria-labelledby": ariaLabelledBy,
+    "aria-label": ariaLabel = Component === "nav" && !ariaLabelledBy
+      ? "Navigation"
+      : undefined,
+    expanded,
+    children,
+    className,
+    timeout = DEFAULT_SHEET_TIMEOUT,
+    classNames = DEFAULT_SHEET_CLASSNAMES,
+    appear,
+    enter,
+    exit,
+    onEnter,
+    onEntering,
+    onEntered,
+    onExit,
+    onExited,
+    onExiting,
+    appBarOffset,
+    ...remaining
+  } = props;
+  const { elementProps } = useCSSTransition({
+    nodeRef: ref,
+    timeout,
+    className: cnb(
+      layoutNav({ appBarOffset }),
+      sheet({
+        className,
+        raised: false,
+        horizontalSize: "none",
+      })
+    ),
+    classNames,
+    enter,
+    exit,
+    appear,
+    onEnter,
+    onEntering,
+    onEntered,
+    onExit,
+    onExited,
+    onExiting,
+    exitedHidden: true,
+    transitionIn: expanded,
+  });
 
-    return (
-      <Component
-        aria-label={ariaLabel}
-        aria-labelledby={ariaLabelledBy}
-        {...remaining}
-        {...elementProps}
-      >
-        {children}
-      </Component>
-    );
-  }
-);
+  return (
+    <Component
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledBy}
+      {...remaining}
+      {...elementProps}
+    >
+      {children}
+    </Component>
+  );
+}

package/src/layout/LayoutWindowSplitter.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { forwardRef, useMemo } from "react";
+import { type ReactElement, type Ref, useMemo } from "react";
 
 import { type DefinedCSSVariableName } from "../theme/types.js";
 import { useCSSVariables } from "../theme/useCSSVariables.js";
@@ -19,12 +19,14 @@ import {
  */
 export interface LayoutWindowSplitterProps
   extends
-    WindowSplitterWidgetProps<HTMLButtonElement>,
+    Omit<WindowSplitterWidgetProps<HTMLButtonElement>, "ref">,
     Omit<
       BaseWindowSplitterProps,
       keyof WindowSplitterWidgetProps<HTMLButtonElement>
     >,
     LayoutWindowSplitterClassNameOptions {
+  ref?: Ref<HTMLButtonElement>;
+
   /** @defaultValue `"Resize Navigation"` */
   "aria-label"?: string;
 
@@ -93,11 +95,11 @@ export interface LayoutWindowSplitterProps
  * @see {@link https://react-md.dev/getting-started/layout | Layout Demos}
  * @since 6.0.0
  */
-export const LayoutWindowSplitter = forwardRef<
-  HTMLButtonElement,
-  LayoutWindowSplitterProps
->(function LayoutWindowSplitter(props, ref) {
+export function LayoutWindowSplitter(
+  props: LayoutWindowSplitterProps
+): ReactElement {
   const {
+    ref,
     "aria-labelledby": ariaLabelledBy,
     "aria-label": ariaLabel = ariaLabelledBy ? undefined : "Resize Navigation",
     appBarOffset,
@@ -127,4 +129,4 @@ export const LayoutWindowSplitter = forwardRef<
       })}
     />
   );
-});
+}