@react-md/core 6.5.1 → 7.0.0

package/src/typography/SrOnly.tsx

@@ -1,4 +1,9 @@
-import { type ElementType, type HTMLAttributes, forwardRef } from "react";
+import {
+  type ElementType,
+  type HTMLAttributes,
+  type ReactElement,
+  type Ref,
+} from "react";
 
 import { type SrOnlyBehavior, cssUtils } from "../cssUtils.js";
 import {
@@ -7,6 +12,8 @@ import {
 } from "./Typography.js";
 
 export interface SrOnlyProps extends HTMLAttributes<TypographyHTMLElement> {
+  ref?: Ref<TypographyHTMLElement>;
+
   /** @defaultValue `"span"` */
   as?: CustomTypographyComponent;
 
@@ -52,40 +59,39 @@ export interface SrOnlyProps extends HTMLAttributes<TypographyHTMLElement> {
  *
  * @see {@link https://react-md.dev/components/sr-only | SrOnly Demos}
  */
-export const SrOnly = forwardRef<TypographyHTMLElement, SrOnlyProps>(
-  function SrOnly(props, ref) {
-    const {
-      as: AsComponent = "span",
-      className,
-      phoneOnly,
-      focusable,
-      children,
-      tabIndex,
-      ...remaining
-    } = props;
-
-    // do some type-casting so ref works
-    const Component = AsComponent as ElementType;
+export function SrOnly(props: SrOnlyProps): ReactElement {
+  const {
+    ref,
+    as: AsComponent = "span",
+    className,
+    phoneOnly,
+    focusable,
+    children,
+    tabIndex,
+    ...remaining
+  } = props;
 
-    let srOnly: SrOnlyBehavior = true;
-    if (focusable) {
-      srOnly = "focusable";
-    } else if (phoneOnly) {
-      srOnly = "phone";
-    }
+  // do some type-casting so ref works
+  const Component = AsComponent as ElementType;
 
-    return (
-      <Component
-        {...remaining}
-        ref={ref}
-        tabIndex={tabIndex ?? (focusable ? 0 : undefined)}
-        className={cssUtils({
-          srOnly,
-          className,
-        })}
-      >
-        {children}
-      </Component>
-    );
+  let srOnly: SrOnlyBehavior = true;
+  if (focusable) {
+    srOnly = "focusable";
+  } else if (phoneOnly) {
+    srOnly = "phone";
   }
-);
+
+  return (
+    <Component
+      {...remaining}
+      ref={ref}
+      tabIndex={tabIndex ?? (focusable ? 0 : undefined)}
+      className={cssUtils({
+        srOnly,
+        className,
+      })}
+    >
+      {children}
+    </Component>
+  );
+}

package/src/typography/TextContainer.tsx

@@ -1,4 +1,4 @@
-import { type HTMLAttributes, forwardRef } from "react";
+import { type HTMLAttributes, type ReactElement, type Ref } from "react";
 
 import {
   type TextContainerClassNameOptions,
@@ -12,7 +12,9 @@ import {
  * behavior. Use the `textContainer` class name utility instead.
  */
 export interface TextContainerProps
-  extends HTMLAttributes<HTMLDivElement>, TextContainerClassNameOptions {}
+  extends HTMLAttributes<HTMLDivElement>, TextContainerClassNameOptions {
+  ref?: Ref<HTMLDivElement>;
+}
 
 /**
  * This component should be used to render text based content with an
@@ -47,14 +49,12 @@ export interface TextContainerProps
  * @since 6.0.0 Removed the `clone` prop and the children render function
  * behavior. Use the `textContainer` class name utility instead.
  */
-export const TextContainer = forwardRef<HTMLDivElement, TextContainerProps>(
-  function TextContainer(props, ref) {
-    const { className, children, ...remaining } = props;
+export function TextContainer(props: TextContainerProps): ReactElement {
+  const { ref, className, children, ...remaining } = props;
 
-    return (
-      <div {...remaining} ref={ref} className={textContainer({ className })}>
-        {children}
-      </div>
-    );
-  }
-);
+  return (
+    <div {...remaining} ref={ref} className={textContainer({ className })}>
+      {children}
+    </div>
+  );
+}

package/src/typography/Typography.tsx

@@ -2,7 +2,7 @@ import {
   type ElementType,
   type HTMLAttributes,
   type ReactElement,
-  forwardRef,
+  type Ref,
 } from "react";
 
 import {
@@ -73,6 +73,8 @@ function getComponent(
  */
 export interface TypographyProps
   extends HTMLAttributes<TypographyHTMLElement>, TypographyClassNameOptions {
+  ref?: Ref<TypographyHTMLElement>;
+
   /**
    * The component to render as when the children are not a render function. If
    * this prop is omitted, the component will be determined by the `type` prop
@@ -139,44 +141,43 @@ export interface TypographyProps
  * @since 6.0.0 Removed the children render function behavior . Use the
  * `typography` class name utility instead.
  */
-export const Typography = forwardRef<TypographyHTMLElement, TypographyProps>(
-  function Typography(props, ref): ReactElement {
-    const {
-      as,
-      type = "body-1",
-      className,
-      margin,
-      fontStyle,
-      fontWeight,
-      textAlign,
-      textColor,
-      textDecoration,
-      textTransform,
-      textOverflow,
-      children,
-      ...remaining
-    } = props;
+export function Typography(props: TypographyProps): ReactElement {
+  const {
+    ref,
+    as,
+    type = "body-1",
+    className,
+    margin,
+    fontStyle,
+    fontWeight,
+    textAlign,
+    textColor,
+    textDecoration,
+    textTransform,
+    textOverflow,
+    children,
+    ...remaining
+  } = props;
 
-    const Component = getComponent(as, type);
-    return (
-      <Component
-        {...remaining}
-        ref={ref}
-        className={typography({
-          type,
-          margin,
-          fontStyle,
-          fontWeight,
-          textAlign,
-          textColor,
-          textDecoration,
-          textTransform,
-          textOverflow,
-          className,
-        })}
-      >
-        {children}
-      </Component>
-    );
-  }
-);
+  const Component = getComponent(as, type);
+  return (
+    <Component
+      {...remaining}
+      ref={ref}
+      className={typography({
+        type,
+        margin,
+        fontStyle,
+        fontWeight,
+        textAlign,
+        textColor,
+        textDecoration,
+        textTransform,
+        textOverflow,
+        className,
+      })}
+    >
+      {children}
+    </Component>
+  );
+}

package/src/useAsyncFunction.ts

@@ -1,10 +1,10 @@
 "use client";
 
-import { useCallback, useState } from "react";
+import { type RefObject, useCallback, useState } from "react";
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { type AsyncButton } from "./button/AsyncButton.js";
-import { type NonNullRef, type UseStateSetter } from "./types.js";
+import { type UseStateSetter } from "./types.js";
 import { useUnmounted } from "./useUnmounted.js";
 
 /**
@@ -55,7 +55,7 @@ export interface AsyncFunctionHookImplementation {
    * );
    * ```
    */
-  unmounted: NonNullRef<boolean>;
+  unmounted: RefObject<boolean>;
   setPending: UseStateSetter<boolean>;
   handleAsync: HandleAsyncFunction;
 }

package/src/useDebouncedFunction.ts

@@ -87,7 +87,7 @@ export function useDebouncedFunction<F extends AnyFunction>(
   func: F,
   wait: number
 ): DebouncedFunction<F> {
-  const timeout = useRef<NodeJS.Timeout>();
+  const timeout = useRef<NodeJS.Timeout>(undefined);
   const funcRef = useRef(func);
   useIsomorphicLayoutEffect(() => {
     funcRef.current = func;

package/src/useDropzone.ts

@@ -162,7 +162,7 @@ export function useDropzone(options: DropzoneOptions): DropzoneImplementation {
     enable: startDragging,
     disable: stopDragging,
   } = useToggle();
-  const draggingTimeout = useRef<NodeJS.Timeout>();
+  const draggingTimeout = useRef<NodeJS.Timeout>(undefined);
 
   // Browsers sometimes don't trigger a dragleave event for the entire
   // document, so we have to work around that by using the `dragover` event

package/src/useEnsuredRef.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import type { MutableRefObject, Ref, RefCallback } from "react";
+import type { Ref, RefCallback, RefObject } from "react";
 import { useCallback, useRef } from "react";
 
 import { applyRef } from "./utils/applyRef.js";
@@ -10,14 +10,14 @@ import { applyRef } from "./utils/applyRef.js";
  * @internal
  */
 export type EnsuredRefs<E extends HTMLElement> = readonly [
-  MutableRefObject<E | null>,
+  RefObject<E | null>,
   RefCallback<E | null>,
 ];
 
 /**
  * This is mostly an internal hook that allows for an optional ref (normally
  * from props or hook options) to be merged with a hook's required `ref`. This
- * will return a MutableRefObject used for DOM manipulation in a custom hook
+ * will return a RefObject used for DOM manipulation in a custom hook
  * followed by a ref callback function that should be passed to the DOM node
  * that will ensure that both the optional `propRef` and hook ref are updated.
  *

package/src/useThrottledFunction.ts

@@ -86,9 +86,9 @@ export function useThrottledFunction<F extends AnyFunction>(
   func: F,
   wait: number
 ): ThrottledFunction<F> {
-  const args = useRef<Parameters<F>>();
-  const result = useRef<ReturnType<F>>();
-  const timeout = useRef<NodeJS.Timeout>();
+  const args = useRef<Parameters<F>>(undefined);
+  const result = useRef<ReturnType<F>>(undefined);
+  const timeout = useRef<NodeJS.Timeout>(undefined);
   const funcRef = useRef(func);
   const lastCalledTime = useRef(0);
 

package/src/useUnmounted.ts

@@ -1,8 +1,6 @@
 "use client";
 
-import { useEffect, useRef } from "react";
-
-import type { NonNullRef } from "./types.js";
+import { type RefObject, useEffect, useRef } from "react";
 
 /**
  * @example Simple Example
@@ -32,7 +30,7 @@ import type { NonNullRef } from "./types.js";
  * ```
  * @since 6.0.0
  */
-export function useUnmounted(): NonNullRef<boolean> {
+export function useUnmounted(): RefObject<boolean> {
   const unmounted = useRef(false);
   useEffect(() => {
     unmounted.current = false;

package/src/utils/applyRef.ts

@@ -1,4 +1,4 @@
-import type { MutableRefObject, Ref } from "react";
+import { type Ref } from "react";
 
 /**
  * A small utility function that allows me to apply a passed in ref along with
@@ -37,6 +37,6 @@ export function applyRef<E>(instance: E | null, ref: Ref<E> | undefined): void {
   if (typeof ref === "function") {
     ref(instance);
   } else if (typeof ref === "object") {
-    (ref as MutableRefObject<E | null>).current = instance;
+    ref.current = instance;
   }
 }

package/src/window-splitter/WindowSplitter.tsx

@@ -1,4 +1,4 @@
-import { type ButtonHTMLAttributes, forwardRef } from "react";
+import { type ButtonHTMLAttributes, type ReactElement, type Ref } from "react";
 
 import { type LabelRequiredForA11y } from "../types.js";
 import {
@@ -18,6 +18,8 @@ export interface BaseWindowSplitterProps
   extends
     Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type" | "children">,
     BaseWindowSplitterClassNameOptions {
+  ref?: Ref<HTMLButtonElement>;
+
   /**
    * This will be provided by the {@link useWindowSplitter} hook.
    */
@@ -83,11 +85,9 @@ export type WindowSplitterProps = LabelRequiredForA11y<BaseWindowSplitterProps>;
  * @see {@link https://react-md.dev/components/window-splitter | WindowSplitter Demos}
  * @since 6.0.0
  */
-export const WindowSplitter = forwardRef<
-  HTMLButtonElement,
-  WindowSplitterProps
->(function WindowSplitter(props, ref) {
+export function WindowSplitter(props: WindowSplitterProps): ReactElement {
   const {
+    ref,
     role = "separator",
     className,
     dragging,
@@ -114,4 +114,4 @@ export const WindowSplitter = forwardRef<
       })}
     />
   );
-});
+}