@react-md/core 6.5.1 → 7.0.0

package/src/tooltip/Tooltip.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { type HTMLAttributes, forwardRef } from "react";
+import { type HTMLAttributes, type ReactElement, type Ref } from "react";
 
 import { Portal } from "../portal/Portal.js";
 import {
@@ -38,6 +38,7 @@ export interface TooltipProps
     CSSTransitionComponentProps,
     SSRTransitionOptions,
     TransitionActions {
+  ref?: Ref<HTMLSpanElement>;
   visible: boolean;
 
   /**
@@ -89,67 +90,66 @@ export interface TooltipProps
  *
  * @see {@link https://react-md.dev/components/tooltip | Tooltip Demos}
  */
-export const Tooltip = forwardRef<HTMLSpanElement, TooltipProps>(
-  function Tooltip(props, nodeRef) {
-    const {
-      id: propId,
+export function Tooltip(props: TooltipProps): ReactElement {
+  const {
+    id: propId,
+    ref: nodeRef,
+    dense,
+    visible,
+    children,
+    appear,
+    enter,
+    exit,
+    onEnter,
+    onEntering,
+    onEntered,
+    onExit,
+    onExiting,
+    onExited,
+    timeout = DEFAULT_TOOLTIP_TIMEOUT,
+    classNames = DEFAULT_TOOLTIP_CLASSNAMES,
+    className,
+    position = DEFAULT_TOOLTIP_POSITION,
+    temporary = true,
+    exitedHidden = !temporary,
+    textOverflow,
+    disablePortal: propDisablePortal,
+    ...remaining
+  } = props;
+  const id = useEnsuredId(propId, "tooltip");
+
+  const { rendered, elementProps, disablePortal } = useCSSTransition({
+    nodeRef,
+    appear,
+    enter,
+    exit,
+    transitionIn: visible,
+    timeout,
+    classNames,
+    className: tooltip({
       dense,
-      visible,
-      children,
-      appear,
-      enter,
-      exit,
-      onEnter,
-      onEntering,
-      onEntered,
-      onExit,
-      onExiting,
-      onExited,
-      timeout = DEFAULT_TOOLTIP_TIMEOUT,
-      classNames = DEFAULT_TOOLTIP_CLASSNAMES,
+      position,
       className,
-      position = DEFAULT_TOOLTIP_POSITION,
-      temporary = true,
-      exitedHidden = !temporary,
       textOverflow,
-      disablePortal: propDisablePortal,
-      ...remaining
-    } = props;
-    const id = useEnsuredId(propId, "tooltip");
-
-    const { rendered, elementProps, disablePortal } = useCSSTransition({
-      nodeRef,
-      appear,
-      enter,
-      exit,
-      transitionIn: visible,
-      timeout,
-      classNames,
-      className: tooltip({
-        dense,
-        position,
-        className,
-        textOverflow,
-      }),
-      onEnter,
-      onEntering,
-      onEntered,
-      onExit,
-      onExiting,
-      onExited,
-      temporary,
-      exitedHidden,
-      disablePortal: propDisablePortal,
-    });
+    }),
+    onEnter,
+    onEntering,
+    onEntered,
+    onExit,
+    onExiting,
+    onExited,
+    temporary,
+    exitedHidden,
+    disablePortal: propDisablePortal,
+  });
 
-    return (
-      <Portal disabled={disablePortal}>
-        {rendered && (
-          <span {...remaining} {...elementProps} id={id} role="tooltip">
-            {children}
-          </span>
-        )}
-      </Portal>
-    );
-  }
-);
+  return (
+    <Portal disabled={disablePortal}>
+      {rendered && (
+        <span {...remaining} {...elementProps} id={id} role="tooltip">
+          {children}
+        </span>
+      )}
+    </Portal>
+  );
+}

package/src/tooltip/useTooltip.ts

@@ -5,7 +5,6 @@ import {
   type CSSProperties,
   type FocusEvent,
   type MouseEvent,
-  type MutableRefObject,
   type Ref,
   type RefObject,
   type TouchEvent,
@@ -291,7 +290,7 @@ export interface TooltipImplementation<
   visible: boolean;
   setVisible: UseStateSetter<boolean>;
   animatedOnce: boolean;
-  initiatedBy: MutableRefObject<UserInteractionMode | null>;
+  initiatedBy: RefObject<UserInteractionMode | null>;
   elementProps: ProvidedTooltippedElementProps<TooltippedElement>;
   tooltipProps: ProvidedTooltipProps<TooltipElement>;
 
@@ -304,7 +303,7 @@ export interface TooltipImplementation<
   /**
    * @since 6.0.0
    */
-  overflowRef: RefObject<HTMLElement>;
+  overflowRef: RefObject<HTMLElement | null>;
 }
 
 /**

package/src/transition/SkeletonPlaceholder.tsx

@@ -4,7 +4,7 @@ import {
   type HTMLAttributes,
   type ReactElement,
   type ReactNode,
-  forwardRef,
+  type Ref,
 } from "react";
 
 import {
@@ -15,6 +15,8 @@ import {
 /** @since 6.0.0 */
 export interface SkeletonPlaceholderProps
   extends HTMLAttributes<HTMLDivElement>, SkeletonPlaceholderOptions {
+  ref?: Ref<HTMLDivElement>;
+
   /**
    * @defaultValue `!!children`
    * @see {@link SkeletonPlaceholderOptions.disabled}
@@ -129,11 +131,11 @@ export interface SkeletonPlaceholderProps
  * @see {@link https://react-md.dev/components/skeleton-placeholder | SkeletonPlaceholder Demos}
  * @since 6.0.0
  */
-export const SkeletonPlaceholder = forwardRef<
-  HTMLDivElement,
-  SkeletonPlaceholderProps
->(function SkeletonPlaceholder(props, ref): ReactElement {
+export function SkeletonPlaceholder(
+  props: SkeletonPlaceholderProps
+): ReactElement {
   const {
+    ref,
     style,
     className,
     height,
@@ -165,4 +167,4 @@ export const SkeletonPlaceholder = forwardRef<
       {children}
     </div>
   );
-});
+}

package/src/transition/Slide.tsx

@@ -1,6 +1,11 @@
 "use client";
 
-import { type HTMLAttributes, type ReactNode, forwardRef } from "react";
+import {
+  type HTMLAttributes,
+  type ReactElement,
+  type ReactNode,
+  type Ref,
+} from "react";
 
 import {
   type CSSTransitionComponentProps,
@@ -26,6 +31,8 @@ export interface SlideProps
     HTMLAttributes<HTMLDivElement>,
     CSSTransitionComponentProps,
     TransitionActions {
+  ref?: Ref<HTMLDivElement>;
+
   /**
    * Set this to `true` to animate this slide into view within a
    * `SlideContainer`. When this switches from `true` to `false`, it will
@@ -48,53 +55,52 @@ export interface SlideProps
  * @see {@link SlideContainer} for example usage.
  * @since 6.0.0
  */
-export const Slide = forwardRef<HTMLDivElement, SlideProps>(
-  function Slide(props, nodeRef) {
-    const {
-      active,
-      appear,
-      enter,
-      exit,
-      onEnter,
-      onEntering,
-      onEntered,
-      onExit,
-      onExiting,
-      onExited,
-      className,
-      children,
-      timeout = DEFAULT_SLIDE_TRANSITION_TIMEOUT,
-      temporary = false,
-      exitedHidden = true,
-      ...remaining
-    } = props;
-
-    const { rendered, elementProps } = useSlideTransition({
-      nodeRef,
-      appear,
-      enter,
-      exit,
-      onEnter,
-      onEntering,
-      onEntered,
-      onExit,
-      onExiting,
-      onExited,
-      className,
-      timeout,
-      temporary,
-      transitionIn: active,
-      exitedHidden,
-    });
+export function Slide(props: SlideProps): ReactElement | null {
+  const {
+    ref: nodeRef,
+    active,
+    appear,
+    enter,
+    exit,
+    onEnter,
+    onEntering,
+    onEntered,
+    onExit,
+    onExiting,
+    onExited,
+    className,
+    children,
+    timeout = DEFAULT_SLIDE_TRANSITION_TIMEOUT,
+    temporary = false,
+    exitedHidden = true,
+    ...remaining
+  } = props;
 
-    if (!rendered) {
-      return null;
-    }
+  const { rendered, elementProps } = useSlideTransition({
+    nodeRef,
+    appear,
+    enter,
+    exit,
+    onEnter,
+    onEntering,
+    onEntered,
+    onExit,
+    onExiting,
+    onExited,
+    className,
+    timeout,
+    temporary,
+    transitionIn: active,
+    exitedHidden,
+  });
 
-    return (
-      <div {...remaining} {...elementProps}>
-        {children}
-      </div>
-    );
+  if (!rendered) {
+    return null;
   }
-);
+
+  return (
+    <div {...remaining} {...elementProps}>
+      {children}
+    </div>
+  );
+}

package/src/transition/SlideContainer.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 { bem } from "../utils/bem.js";
 
@@ -72,7 +72,9 @@ export function slideContainer(
 
 /** @since 6.0.0 */
 export interface SlideContainerProps
-  extends HTMLAttributes<HTMLDivElement>, SlideContainerClassNameOptions {}
+  extends HTMLAttributes<HTMLDivElement>, SlideContainerClassNameOptions {
+  ref?: Ref<HTMLDivElement>;
+}
 
 /**
  * The `SlideContainer` is used to enable a slide transition when child `Slide`
@@ -125,18 +127,16 @@ export interface SlideContainerProps
  * @see {@link https://react-md.dev/components/slide | Slide Demos}
  * @since 6.0.0
  */
-export const SlideContainer = forwardRef<HTMLDivElement, SlideContainerProps>(
-  function SlideContainer(props, ref) {
-    const { className, direction, vertical, children, ...remaining } = props;
+export function SlideContainer(props: SlideContainerProps): ReactElement {
+  const { ref, className, direction, vertical, children, ...remaining } = props;
 
-    return (
-      <div
-        {...remaining}
-        ref={ref}
-        className={slideContainer({ className, direction, vertical })}
-      >
-        {children}
-      </div>
-    );
-  }
-);
+  return (
+    <div
+      {...remaining}
+      ref={ref}
+      className={slideContainer({ className, direction, vertical })}
+    >
+      {children}
+    </div>
+  );
+}

package/src/tree/TreeGroup.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { type CSSProperties, type ReactNode, forwardRef } from "react";
+import { type CSSProperties, type ReactElement, type ReactNode } from "react";
 
 import { List, type ListProps } from "../list/List.js";
 import { useCollapseTransition } from "../transition/useCollapseTransition.js";
@@ -35,62 +35,61 @@ export interface TreeGroupProps extends OverridableTreeGroupProps {
  * @since 6.0.0 Removed the collapse options and is no longer a
  * "public" component.
  */
-export const TreeGroup = forwardRef<HTMLUListElement, TreeGroupProps>(
-  function TreeGroup(props, ref) {
-    const {
-      className,
-      collapsed,
-      depth,
-      onClick,
-      onMouseDown,
-      children,
-      temporary: propTemporary,
-      disableTransition = false,
-      ...remaining
-    } = props;
+export function TreeGroup(props: TreeGroupProps): ReactElement | null {
+  const {
+    ref,
+    className,
+    collapsed,
+    depth,
+    onClick,
+    onMouseDown,
+    children,
+    temporary: propTemporary,
+    disableTransition = false,
+    ...remaining
+  } = props;
 
-    const style: CSSProperties = {
-      ...remaining.style,
-      "--rmd-tree-depth": depth,
-    };
+  const style: CSSProperties = {
+    ...remaining.style,
+    "--rmd-tree-depth": depth,
+  };
 
-    const { temporaryChildItems } = useTreeContext();
-    const temporary = propTemporary ?? temporaryChildItems;
+  const { temporaryChildItems } = useTreeContext();
+  const temporary = propTemporary ?? temporaryChildItems;
 
-    const { elementProps, rendered } = useCollapseTransition({
-      style,
-      nodeRef: ref,
-      enter: !disableTransition,
-      exit: !disableTransition,
-      transitionIn: !collapsed,
-      temporary,
-      className: treeGroup({ className }),
-    });
+  const { elementProps, rendered } = useCollapseTransition({
+    style,
+    nodeRef: ref,
+    enter: !disableTransition,
+    exit: !disableTransition,
+    transitionIn: !collapsed,
+    temporary,
+    className: treeGroup({ className }),
+  });
 
-    if (!rendered || !children) {
-      return null;
-    }
-
-    return (
-      <List
-        {...remaining}
-        onClick={(event) => {
-          onClick?.(event);
-          // always stop propagation for click events and mousedown for groups
-          // so that the parent child item's click and mousedown events aren't
-          // also fired while there are disabled child elementsS or
-          // non-interactable (like dividers or subheader)
-          event.stopPropagation();
-        }}
-        onMouseDown={(event) => {
-          onMouseDown?.(event);
-          event.stopPropagation();
-        }}
-        {...elementProps}
-        role="group"
-      >
-        {children}
-      </List>
-    );
+  if (!rendered || !children) {
+    return null;
   }
-);
+
+  return (
+    <List
+      {...remaining}
+      onClick={(event) => {
+        onClick?.(event);
+        // always stop propagation for click events and mousedown for groups
+        // so that the parent child item's click and mousedown events aren't
+        // also fired while there are disabled child elementsS or
+        // non-interactable (like dividers or subheader)
+        event.stopPropagation();
+      }}
+      onMouseDown={(event) => {
+        onMouseDown?.(event);
+        event.stopPropagation();
+      }}
+      {...elementProps}
+      role="group"
+    >
+      {children}
+    </List>
+  );
+}

package/src/tree/TreeProvider.tsx

@@ -3,13 +3,13 @@
 import {
   type ReactElement,
   type ReactNode,
+  type RefObject,
   createContext,
   useContext,
   useMemo,
 } from "react";
 
 import { type CustomLinkComponent } from "../link/Link.js";
-import { type NonNullRef } from "../types.js";
 import {
   type DefaultTreeItemNode,
   type TreeData,
@@ -93,7 +93,7 @@ export interface TreeContext<T extends TreeItemNode = DefaultTreeItemNode>
   /** @internal */
   expansionMode: TreeExpansionMode;
   /** @internal */
-  metadataLookup: NonNullRef<TreeItemMetadataLookup>;
+  metadataLookup: RefObject<TreeItemMetadataLookup>;
 }
 
 // Allow the hook to correct typecast this instead

package/src/tree/useTreeMovement.ts

@@ -5,17 +5,17 @@ import type {
   KeyboardEventHandler,
   MouseEventHandler,
   Ref,
+  RefObject,
 } from "react";
 import { useRef } from "react";
 
 import type { KeyboardMovementProviderImplementation } from "../movement/types.js";
 import { useKeyboardMovementProvider } from "../movement/useKeyboardMovementProvider.js";
 import { getNextFocusableIndex } from "../movement/utils.js";
-import type { NonNullMutableRef } from "../types.js";
-import type { TreeItemMetadataLookup } from "./TreeProvider.js";
-import type { TreeData, TreeItemNode } from "./types.js";
-import type { TreeExpansion } from "./useTreeExpansion.js";
-import type { TreeItemChildIds } from "./useTreeItems.js";
+import { type TreeItemMetadataLookup } from "./TreeProvider.js";
+import { type TreeData, type TreeItemNode } from "./types.js";
+import { type TreeExpansion } from "./useTreeExpansion.js";
+import { type TreeItemChildIds } from "./useTreeItems.js";
 
 /**
  * This helps catch the edge case where the collapse transition has occurred for
@@ -78,7 +78,7 @@ interface TreeMovement extends KeyboardMovementProviderImplementation<HTMLUListE
    * This will be mutated by the `TreeItem` component and used to handle
    * keyboard movement.
    */
-  metadataLookup: NonNullMutableRef<TreeItemMetadataLookup>;
+  metadataLookup: RefObject<TreeItemMetadataLookup>;
 }
 
 /**

package/src/types.ts

@@ -1,6 +1,7 @@
 import {
   type Dispatch,
   type HTMLAttributes,
+  type JSX,
   type ReactElement,
   type Ref,
   type SetStateAction,
@@ -81,22 +82,6 @@ export type LabelRequiredForA11y<Props extends LabelA11y> = RequireAtLeastOne<
   keyof LabelA11y
 >;
 
-/**
- * @since 5.0.0
- * @internal
- */
-export interface NonNullRef<T> {
-  readonly current: T;
-}
-
-/**
- * @since 6.0.0
- * @internal
- */
-export interface NonNullMutableRef<T> {
-  current: T;
-}
-
 /** @since 6.0.0 */
 export type HtmlTagName = keyof JSX.IntrinsicElements;
 

package/src/typography/Mark.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 MarkClassNameOptions, mark } from "./markStyles.js";
 
@@ -9,6 +14,7 @@ import { type MarkClassNameOptions, mark } from "./markStyles.js";
  */
 export interface MarkProps
   extends HTMLAttributes<HTMLElement>, MarkClassNameOptions {
+  ref?: Ref<HTMLElement>;
   children: ReactNode;
 }
 
@@ -32,13 +38,12 @@ export interface MarkProps
  * @see {@link https://react-md.dev/components/mark | Mark Demos}
  * @since 6.0.0
  */
-export const Mark = forwardRef<HTMLElement, MarkProps>(
-  function Mark(props, ref) {
-    const { children, className, ...remaining } = props;
-    return (
-      <mark {...remaining} ref={ref} className={mark({ className })}>
-        {children}
-      </mark>
-    );
-  }
-);
+export function Mark(props: MarkProps): ReactElement {
+  const { ref, children, className, ...remaining } = props;
+
+  return (
+    <mark {...remaining} ref={ref} className={mark({ className })}>
+      {children}
+    </mark>
+  );
+}