@react-md/core 6.5.1 → 7.0.0

package/src/overlay/Overlay.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { type HTMLAttributes, forwardRef } from "react";
+import { type HTMLAttributes, type ReactElement, type Ref } from "react";
 
 import { useSsr } from "../SsrProvider.js";
 import { Portal } from "../portal/Portal.js";
@@ -28,6 +28,8 @@ export interface OverlayProps
     BaseOverlayClassNameOptions,
     CSSTransitionComponentProps,
     TransitionActions {
+  ref?: Ref<HTMLSpanElement>;
+
   /**
    * Set this to `true` if the overlay should be rendered with an `opacity: 0`
    * and disabling the animation. This is useful if you'd like a "close on
@@ -80,69 +82,68 @@ export interface OverlayProps
  * @since 6.0.0 Removed the `onRequestClose` prop in favor of using
  * the `onClick` prop instead.
  */
-export const Overlay = forwardRef<HTMLSpanElement, OverlayProps>(
-  function Overlay(props, nodeRef) {
-    const {
-      children,
-      className,
-      visible,
-      noOpacity = false,
-      clickable = !noOpacity,
-      temporary = true,
-      timeout = DEFAULT_OVERLAY_TIMEOUT,
-      classNames = DEFAULT_OVERLAY_CLASSNAMES,
-      disableTransition = false,
-      align = "center",
-      justify = "center",
-      appear,
-      enter,
-      exit,
-      onEnter,
-      onEntering,
-      onEntered,
-      onExit,
-      onExiting,
-      onExited,
-      exitedHidden = true,
-      disablePortal: propDisablePortal = false,
-      ...remaining
-    } = props;
+export function Overlay(props: OverlayProps): ReactElement {
+  const {
+    ref: nodeRef,
+    children,
+    className,
+    visible,
+    noOpacity = false,
+    clickable = !noOpacity,
+    temporary = true,
+    timeout = DEFAULT_OVERLAY_TIMEOUT,
+    classNames = DEFAULT_OVERLAY_CLASSNAMES,
+    disableTransition = false,
+    align = "center",
+    justify = "center",
+    appear,
+    enter,
+    exit,
+    onEnter,
+    onEntering,
+    onEntered,
+    onExit,
+    onExiting,
+    onExited,
+    exitedHidden = true,
+    disablePortal: propDisablePortal = false,
+    ...remaining
+  } = props;
 
-    const ssr = useSsr();
-    const { elementProps, rendered, disablePortal } = useCSSTransition({
-      nodeRef,
-      transitionIn: visible,
-      timeout: noOpacity ? 0 : timeout,
-      classNames: noOpacity ? "" : classNames,
-      className: overlay({
-        visible,
-        clickable,
-        align,
-        justify,
-        className,
-      }),
-      appear: appear && !disableTransition && !ssr,
-      enter: enter && !disableTransition,
-      exit: exit && !disableTransition,
-      onEnter,
-      onEntering,
-      onEntered,
-      onExit,
-      onExiting,
-      onExited,
-      temporary,
-      exitedHidden,
-      disablePortal: propDisablePortal,
-    });
+  const ssr = useSsr();
+  const { elementProps, rendered, disablePortal } = useCSSTransition({
+    nodeRef,
+    transitionIn: visible,
+    timeout: noOpacity ? 0 : timeout,
+    classNames: noOpacity ? "" : classNames,
+    className: overlay({
+      visible,
+      clickable,
+      align,
+      justify,
+      className,
+    }),
+    appear: appear && !disableTransition && !ssr,
+    enter: enter && !disableTransition,
+    exit: exit && !disableTransition,
+    onEnter,
+    onEntering,
+    onEntered,
+    onExit,
+    onExiting,
+    onExited,
+    temporary,
+    exitedHidden,
+    disablePortal: propDisablePortal,
+  });
 
-    return (
-      <Portal disabled={disablePortal}>
-        {rendered && (
-          <span {...remaining} {...elementProps}>
-            {children}
-          </span>
-        )}
-      </Portal>
-    );
-  }
-);
+  return (
+    <Portal disabled={disablePortal}>
+      {rendered && (
+        <span {...remaining} {...elementProps}>
+          {children}
+        </span>
+      )}
+    </Portal>
+  );
+}

package/src/positioning/useFixedPositioning.ts

@@ -111,7 +111,7 @@ export interface FixedPositioningOptions<
    * A ref pointing to an element that another element should be fixed to. This
    * **must** be provided for the positioning to work.
    */
-  fixedTo: RefObject<FixedToElement>;
+  fixedTo: RefObject<FixedToElement | null>;
 
   /**
    * An optional function that can be used to override positioning options if

package/src/progress/CircularProgress.tsx

@@ -1,7 +1,7 @@
 import {
   type CSSProperties,
   type HTMLAttributes,
-  forwardRef,
+  type ReactElement,
   useMemo,
 } from "react";
 
@@ -128,11 +128,11 @@ export interface CircularProgressProps
  * @since 6.0.0 Updated the determinate circular progress to no longer
  * rotate while increasing the value and require a label for accessibility.
  */
-export const CircularProgress = forwardRef<
-  HTMLSpanElement,
-  LabelRequiredForA11y<CircularProgressProps>
->(function CircularProgress(props, ref) {
+export function CircularProgress(
+  props: LabelRequiredForA11y<CircularProgressProps>
+): ReactElement {
   const {
+    ref,
     id: propId,
     className,
     svgStyle,
@@ -212,4 +212,4 @@ export const CircularProgress = forwardRef<
       </svg>
     </span>
   );
-});
+}

package/src/progress/LinearProgress.tsx

@@ -1,7 +1,7 @@
 import {
   type CSSProperties,
   type HTMLAttributes,
-  forwardRef,
+  type ReactElement,
   useMemo,
 } from "react";
 
@@ -91,11 +91,11 @@ export interface LinearProgressProps
  * @since 6.0.0 Supports rendering as any of the theme colors and
  * requires a label for accessibility.
  */
-export const LinearProgress = forwardRef<
-  HTMLSpanElement,
-  LabelRequiredForA11y<LinearProgressProps>
->(function LinearProgress(props, ref) {
+export function LinearProgress(
+  props: LabelRequiredForA11y<LinearProgressProps>
+): ReactElement {
   const {
+    ref,
     id: propId,
     style: propStyle,
     className,
@@ -172,4 +172,4 @@ export const LinearProgress = forwardRef<
       />
     </span>
   );
-});
+}

package/src/progress/types.ts

@@ -1,3 +1,5 @@
+import { type Ref } from "react";
+
 import { type ThemeColor } from "../cssUtils.js";
 
 /**
@@ -11,6 +13,8 @@ export type ProgressTheme = ThemeColor | "current-color";
  * @since 6.0.0 Added the `theme` prop.
  */
 export interface ProgressProps {
+  ref?: Ref<HTMLSpanElement>;
+
   /**
    * The id for the progress component. This is required for accessibility since
    * the progress will 99% of the time be describing the progress of something

package/src/responsive-item/ResponsiveItem.tsx

@@ -1,4 +1,4 @@
-import { type HTMLAttributes, forwardRef } from "react";
+import { type HTMLAttributes, type ReactElement, type Ref } from "react";
 
 import {
   type ResponsiveItemClassNameOptions,
@@ -15,7 +15,9 @@ import {
  * {@link ResponsiveItemProps.responsive} prop.
  */
 export interface ResponsiveItemProps
-  extends HTMLAttributes<HTMLSpanElement>, ResponsiveItemClassNameOptions {}
+  extends HTMLAttributes<HTMLSpanElement>, ResponsiveItemClassNameOptions {
+  ref?: Ref<HTMLSpanElement>;
+}
 
 /**
  * @example Image Example
@@ -68,30 +70,29 @@ export interface ResponsiveItemProps
  * @since 6.0.0 Renamed from `MediaContainer` to
  * `ResponsiveItem` and renders a `<span>` instead of a `<div>`.
  */
-export const ResponsiveItem = forwardRef<HTMLSpanElement, ResponsiveItemProps>(
-  function ResponsiveItem(props, ref) {
-    const {
-      className,
-      fullWidth = false,
-      aspectRatio,
-      responsive = "auto",
-      children,
-      ...remaining
-    } = props;
+export function ResponsiveItem(props: ResponsiveItemProps): ReactElement {
+  const {
+    ref,
+    className,
+    fullWidth = false,
+    aspectRatio,
+    responsive = "auto",
+    children,
+    ...remaining
+  } = props;
 
-    return (
-      <span
-        {...remaining}
-        ref={ref}
-        className={responsiveItem({
-          className,
-          fullWidth,
-          aspectRatio,
-          responsive,
-        })}
-      >
-        {children}
-      </span>
-    );
-  }
-);
+  return (
+    <span
+      {...remaining}
+      ref={ref}
+      className={responsiveItem({
+        className,
+        fullWidth,
+        aspectRatio,
+        responsive,
+      })}
+    >
+      {children}
+    </span>
+  );
+}

package/src/responsive-item/ResponsiveItemOverlay.tsx

@@ -1,4 +1,4 @@
-import { type HTMLAttributes, forwardRef } from "react";
+import { type HTMLAttributes, type ReactElement, type Ref } from "react";
 
 import {
   type ResponsiveItemOverlayClassNameOptions,
@@ -14,7 +14,9 @@ import {
 export interface ResponsiveItemOverlayProps
   extends
     HTMLAttributes<HTMLSpanElement>,
-    ResponsiveItemOverlayClassNameOptions {}
+    ResponsiveItemOverlayClassNameOptions {
+  ref?: Ref<HTMLSpanElement>;
+}
 
 /**
  * @example Simple Example
@@ -43,11 +45,10 @@ export interface ResponsiveItemOverlayProps
  * @since 6.0.0 Renamed from `MediaOverlay` to `ResponsiveItemOverlay`
  * and renders as a `<span>` instead of a `<div>`.
  */
-export const ResponsiveItemOverlay = forwardRef<
-  HTMLSpanElement,
-  ResponsiveItemOverlayProps
->(function ResponsiveItemOverlay(props, ref) {
-  const { className, children, position = "bottom", ...remaining } = props;
+export function ResponsiveItemOverlay(
+  props: ResponsiveItemOverlayProps
+): ReactElement {
+  const { ref, className, children, position = "bottom", ...remaining } = props;
 
   return (
     <span
@@ -58,4 +59,4 @@ export const ResponsiveItemOverlay = forwardRef<
       {children}
     </span>
   );
-});
+}

package/src/segmented-button/SegmentedButton.tsx

@@ -1,6 +1,11 @@
 "use client";
 
-import { type ButtonHTMLAttributes, type ReactNode, forwardRef } from "react";
+import {
+  type ButtonHTMLAttributes,
+  type ReactElement,
+  type ReactNode,
+  type Ref,
+} from "react";
 
 import { getIcon } from "../icon/config.js";
 import { type ComponentWithRippleProps } from "../interaction/types.js";
@@ -28,6 +33,8 @@ export interface SegmentedButtonProps
     BaseMaxWidthTransitionOptions,
     BaseSegmentedButtonClassNameOptions,
     ComponentWithRippleProps {
+  ref?: Ref<HTMLButtonElement>;
+
   /** @defaultValue `getIcon("selected")` */
   selectedIcon?: ReactNode;
 
@@ -102,11 +109,9 @@ export interface SegmentedButtonProps
  * @see {@link https://react-md.dev/components/segmented-button | SegmentedButton Demos}
  * @since 6.0.0
  */
-export const SegmentedButton = forwardRef<
-  HTMLButtonElement,
-  SegmentedButtonProps
->(function SegmentedButton(props, ref) {
+export function SegmentedButton(props: SegmentedButtonProps): ReactElement {
   const {
+    ref,
     className,
     type = "button",
     leftAddon,
@@ -179,4 +184,4 @@ export const SegmentedButton = forwardRef<
       {ripples}
     </button>
   );
-});
+}

package/src/segmented-button/SegmentedButtonContainer.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 SegmentedButtonContainerClassNameOptions,
@@ -12,6 +17,8 @@ export interface SegmentedButtonContainerProps
   extends
     HTMLAttributes<HTMLDivElement>,
     SegmentedButtonContainerClassNameOptions {
+  ref?: Ref<HTMLDivElement>;
+
   children: ReactNode;
 }
 
@@ -25,7 +32,7 @@ export interface SegmentedButtonContainerProps
  * import { segmentedButtonContainer } from "@react-md/core/segmented-button/SegmentedButtonContainer";
  * import type { ReactElement } from "react";
  *
- * import { CustomWrapperComponent } from "./CustomWrapperComponent.jsx";
+ * import { CustomWrapperComponent } from "./CustomWrapperComponent.js";
  *
  * function Example(): ReactElement {
  *   return (
@@ -41,11 +48,10 @@ export interface SegmentedButtonContainerProps
  * @see {@link https://react-md.dev/components/segmented-button | SegmentedButton Demos}
  * @since 6.0.0
  */
-export const SegmentedButtonContainer = forwardRef<
-  HTMLDivElement,
-  SegmentedButtonContainerProps
->(function SegmentedButtonContainer(props, ref) {
-  const { className, disableFullWidth, children, ...remaining } = props;
+export function SegmentedButtonContainer(
+  props: SegmentedButtonContainerProps
+): ReactElement {
+  const { ref, className, disableFullWidth, children, ...remaining } = props;
 
   return (
     <div
@@ -59,4 +65,4 @@ export const SegmentedButtonContainer = forwardRef<
       {children}
     </div>
   );
-});
+}

package/src/sheet/Sheet.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { forwardRef } from "react";
+import { type ReactElement } from "react";
 
 import { type BaseDialogProps, Dialog } from "../dialog/Dialog.js";
 import { type LabelRequiredForA11y } from "../types.js";
@@ -66,46 +66,45 @@ export type SheetProps = LabelRequiredForA11y<BaseSheetProps>;
  *
  * @see {@link https://react-md.dev/components/sheet | Sheet Demos}
  */
-export const Sheet = forwardRef<HTMLDivElement, SheetProps>(
-  function Sheet(props, ref) {
-    const {
-      role = "dialog",
-      className,
-      position = "left",
-      horizontalSize = "media",
-      verticalSize = "recommended",
-      timeout = DEFAULT_SHEET_TIMEOUT,
-      classNames = DEFAULT_SHEET_CLASSNAMES,
-      visible,
-      temporary = true,
-      exitedHidden = true,
-      raised,
-      children,
-      ...remaining
-    } = props;
-    const { disableOverlay } = props;
+export function Sheet(props: SheetProps): ReactElement {
+  const {
+    ref,
+    role = "dialog",
+    className,
+    position = "left",
+    horizontalSize = "media",
+    verticalSize = "recommended",
+    timeout = DEFAULT_SHEET_TIMEOUT,
+    classNames = DEFAULT_SHEET_CLASSNAMES,
+    visible,
+    temporary = true,
+    exitedHidden = true,
+    raised,
+    children,
+    ...remaining
+  } = props;
+  const { disableOverlay } = props;
 
-    return (
-      <Dialog
-        {...remaining}
-        ref={ref}
-        role={role}
-        type="custom"
-        timeout={timeout}
-        classNames={classNames}
-        visible={visible}
-        temporary={temporary}
-        exitedHidden={exitedHidden}
-        className={sheet({
-          raised: raised ?? !disableOverlay,
-          position,
-          horizontalSize,
-          verticalSize,
-          className,
-        })}
-      >
-        {children}
-      </Dialog>
-    );
-  }
-);
+  return (
+    <Dialog
+      {...remaining}
+      ref={ref}
+      role={role}
+      type="custom"
+      timeout={timeout}
+      classNames={classNames}
+      visible={visible}
+      temporary={temporary}
+      exitedHidden={exitedHidden}
+      className={sheet({
+        raised: raised ?? !disableOverlay,
+        position,
+        horizontalSize,
+        verticalSize,
+        className,
+      })}
+    >
+      {children}
+    </Dialog>
+  );
+}

package/src/snackbar/Snackbar.tsx

@@ -1,6 +1,11 @@
 "use client";
 
-import { type ComponentType, type HTMLAttributes, forwardRef } from "react";
+import {
+  type ComponentType,
+  type HTMLAttributes,
+  type ReactElement,
+  type Ref,
+} from "react";
 
 import { Portal } from "../portal/Portal.js";
 import { useEnsuredId } from "../useEnsuredId.js";
@@ -16,6 +21,8 @@ import { type SnackbarPosition, snackbar } from "./snackbarStyles.js";
  * @since 6.0.0 The `id` prop is optional
  */
 export interface SnackbarProps extends HTMLAttributes<HTMLDivElement> {
+  ref?: Ref<HTMLDivElement>;
+
   /** @defaultValue `"snackbar-" + useId()` */
   id?: string;
 
@@ -147,41 +154,40 @@ export interface SnackbarProps extends HTMLAttributes<HTMLDivElement> {
  * @since 6.0.0 Rewritten to use a new API that supports adding toasts
  * outside of React components and rendering multiple toasts at once.
  */
-export const Snackbar = forwardRef<HTMLDivElement, SnackbarProps>(
-  function Snackbar(props, ref) {
-    const {
-      id: propId,
-      className,
-      limit = 1,
-      absolute,
-      position = "bottom",
-      renderToast: RenderToast = DefaultToastRenderer,
-      disablePortal,
-      toastDefaults,
-      ...remaining
-    } = props;
-    const id = useEnsuredId(propId, "snackbar");
-    const queue = useToastQueue(limit);
+export function Snackbar(props: SnackbarProps): ReactElement {
+  const {
+    ref,
+    id: propId,
+    className,
+    limit = 1,
+    absolute,
+    position = "bottom",
+    renderToast: RenderToast = DefaultToastRenderer,
+    disablePortal,
+    toastDefaults,
+    ...remaining
+  } = props;
+  const id = useEnsuredId(propId, "snackbar");
+  const queue = useToastQueue(limit);
 
-    return (
-      <Portal disabled={disablePortal}>
-        {queue.length > 0 && (
-          <div
-            {...remaining}
-            id={id}
-            ref={ref}
-            className={snackbar({ absolute, position, className })}
-          >
-            {queue.map((toast) => (
-              <RenderToast
-                {...toast}
-                key={toast.toastId}
-                toastDefaults={toastDefaults}
-              />
-            ))}
-          </div>
-        )}
-      </Portal>
-    );
-  }
-);
+  return (
+    <Portal disabled={disablePortal}>
+      {queue.length > 0 && (
+        <div
+          {...remaining}
+          id={id}
+          ref={ref}
+          className={snackbar({ absolute, position, className })}
+        >
+          {queue.map((toast) => (
+            <RenderToast
+              {...toast}
+              key={toast.toastId}
+              toastDefaults={toastDefaults}
+            />
+          ))}
+        </div>
+      )}
+    </Portal>
+  );
+}