@react-md/core 6.5.1 → 7.0.0

package/src/dialog/FixedDialog.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { type RefObject, forwardRef, useRef } from "react";
+import { type ReactElement, type Ref, type RefObject, useRef } from "react";
 
 import { TOP_INNER_RIGHT_ANCHOR } from "../positioning/constants.js";
 import {
@@ -13,8 +13,10 @@ import { type LabelRequiredForA11y } from "../types.js";
 import { type BaseDialogProps, Dialog } from "./Dialog.js";
 
 export interface BaseFixedDialogProps extends Omit<BaseDialogProps, "type"> {
+  ref?: Ref<HTMLDivElement>;
+
   anchor?: PositionAnchor;
-  fixedTo: RefObject<HTMLElement>;
+  fixedTo: RefObject<HTMLElement | null>;
   options?: CalculateFixedPositionOptions;
   getFixedPositionOptions?: () => CalculateFixedPositionOptions;
 
@@ -88,72 +90,71 @@ const noop = (): void => {
  *
  * @see {@link https://react-md.dev/components/dialog#fixed-dialog | FixedDialog Demos}
  */
-export const FixedDialog = forwardRef<HTMLDivElement, FixedDialogProps>(
-  function FixedDialog(props, nodeRef) {
-    const {
-      fixedTo,
-      style: propStyle,
-      classNames = DEFAULT_SCALE_CLASSNAMES,
-      children,
-      anchor = TOP_INNER_RIGHT_ANCHOR,
-      options,
-      getFixedPositionOptions,
-      onEnter = noop,
-      onEntering,
-      onEntered = noop,
-      onExited,
-      onRequestClose,
-      overlayHidden = true,
-      disableScrollLock = true,
-      isFocusTypeDisabled = noop,
-      ...remaining
-    } = props;
+export function FixedDialog(props: FixedDialogProps): ReactElement {
+  const {
+    ref: nodeRef,
+    fixedTo,
+    style: propStyle,
+    classNames = DEFAULT_SCALE_CLASSNAMES,
+    children,
+    anchor = TOP_INNER_RIGHT_ANCHOR,
+    options,
+    getFixedPositionOptions,
+    onEnter = noop,
+    onEntering,
+    onEntered = noop,
+    onExited,
+    onRequestClose,
+    overlayHidden = true,
+    disableScrollLock = true,
+    isFocusTypeDisabled = noop,
+    ...remaining
+  } = props;
 
-    const disableExitFocus = useRef(false);
-    const { ref, style, callbacks } = useFixedPositioning({
-      nodeRef,
-      style: propStyle,
-      transformOrigin: true,
-      onEnter(appearing) {
-        onEnter(appearing);
-        disableExitFocus.current = false;
-      },
-      onEntering,
-      onEntered(appearing) {
-        onEntered(appearing);
-        disableExitFocus.current = false;
-      },
-      onExited,
-      anchor,
-      fixedTo,
-      onScroll(_event, data) {
-        if (!data.visible) {
-          disableExitFocus.current = true;
-          onRequestClose();
-        }
-      },
-      ...options,
-      getFixedPositionOptions,
-    });
+  const disableExitFocus = useRef(false);
+  const { ref, style, callbacks } = useFixedPositioning({
+    nodeRef,
+    style: propStyle,
+    transformOrigin: true,
+    onEnter(appearing) {
+      onEnter(appearing);
+      disableExitFocus.current = false;
+    },
+    onEntering,
+    onEntered(appearing) {
+      onEntered(appearing);
+      disableExitFocus.current = false;
+    },
+    onExited,
+    anchor,
+    fixedTo,
+    onScroll(_event, data) {
+      if (!data.visible) {
+        disableExitFocus.current = true;
+        onRequestClose();
+      }
+    },
+    ...options,
+    getFixedPositionOptions,
+  });
 
-    return (
-      <Dialog
-        {...remaining}
-        {...callbacks}
-        ref={ref}
-        type="custom"
-        style={style}
-        classNames={classNames}
-        onRequestClose={onRequestClose}
-        overlayHidden={overlayHidden}
-        disableScrollLock={disableScrollLock}
-        isFocusTypeDisabled={(type) =>
-          isFocusTypeDisabled(type) ||
-          (type === "unmount" && disableExitFocus.current)
-        }
-      >
-        {children}
-      </Dialog>
-    );
-  }
-);
+  return (
+    <Dialog
+      {...remaining}
+      {...callbacks}
+      ref={ref}
+      type="custom"
+      style={style}
+      classNames={classNames}
+      onRequestClose={onRequestClose}
+      overlayHidden={overlayHidden}
+      disableScrollLock={disableScrollLock}
+      isFocusTypeDisabled={(type) =>
+        isFocusTypeDisabled(type) ||
+        (type === "unmount" && disableExitFocus.current)
+      }
+    >
+      {children}
+    </Dialog>
+  );
+}

package/src/divider/Divider.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 DividerClassNameOptions, divider } from "./styles.js";
 
@@ -8,7 +13,9 @@ export type DividerElement = HTMLHRElement | HTMLDivElement;
  * @since 6.0.0 Extends the {@link DividerClassNameOptions}
  */
 export interface DividerProps
-  extends HTMLAttributes<DividerElement>, DividerClassNameOptions {}
+  extends HTMLAttributes<DividerElement>, DividerClassNameOptions {
+  ref?: Ref<DividerElement>;
+}
 
 /**
  * @example Simple Example
@@ -23,29 +30,28 @@ export interface DividerProps
  *
  * @see {@link https://react-md.dev/components/divider | Divider Demos}
  */
-export const Divider = forwardRef<DividerElement, DividerProps>(
-  function Divider(props, ref) {
-    const {
-      inset = false,
-      vertical = false,
-      role = "separator",
-      className,
-      ...remaining
-    } = props;
+export function Divider(props: DividerProps): ReactElement {
+  const {
+    ref,
+    inset = false,
+    vertical = false,
+    role = "separator",
+    className,
+    ...remaining
+  } = props;
 
-    const Component = (vertical ? "div" : "hr") as ElementType;
+  const Component = (vertical ? "div" : "hr") as ElementType;
 
-    return (
-      <Component
-        {...remaining}
-        ref={ref}
-        role={role}
-        className={divider({
-          inset,
-          vertical,
-          className,
-        })}
-      />
-    );
-  }
-);
+  return (
+    <Component
+      {...remaining}
+      ref={ref}
+      role={role}
+      className={divider({
+        inset,
+        vertical,
+        className,
+      })}
+    />
+  );
+}

package/src/draggable/useDraggable.ts

@@ -5,6 +5,7 @@ import {
   type HTMLAttributes,
   type Ref,
   type RefCallback,
+  type RefObject,
   useCallback,
   useEffect,
   useRef,
@@ -13,11 +14,7 @@ import {
 
 import { useUserInteractionMode } from "../interaction/UserInteractionModeProvider.js";
 import { useScrollLock } from "../scroll/useScrollLock.js";
-import {
-  type NonNullRef,
-  type UseStateInitializer,
-  type UseStateSetter,
-} from "../types.js";
+import { type UseStateInitializer, type UseStateSetter } from "../types.js";
 import { useDir } from "../typography/WritingDirectionProvider.js";
 import { useEnsuredRef } from "../useEnsuredRef.js";
 import { useEnsuredState } from "../useEnsuredState.js";
@@ -331,7 +328,7 @@ export interface DraggableImplementation<
    * for manually persisting the value into local storage once the user has
    * stopped dragging.
    */
-  draggedOnce: NonNullRef<boolean>;
+  draggedOnce: RefObject<boolean>;
 
   value: number;
   setValue: UseStateSetter<number>;

package/src/draggable/utils.ts

@@ -125,7 +125,7 @@ interface UpdateDragPositionOptions extends Omit<
   "container"
 > {
   event: ClientPositionEvent;
-  nodeRef: RefObject<HTMLElement>;
+  nodeRef: RefObject<HTMLElement | null>;
   focus?: boolean;
   isDragStart: boolean;
   setValue: (value: number) => void;

package/src/expansion-panel/ExpansionList.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 { KeyboardMovementProvider } from "../movement/useKeyboardMovementProvider.js";
 import { useExpansionList } from "./useExpansionList.js";
@@ -9,6 +14,8 @@ import { useExpansionList } from "./useExpansionList.js";
  * @since 6.0.0 No longer requires the `onKeyDown` prop.
  */
 export interface ExpansionListProps extends HTMLAttributes<HTMLDivElement> {
+  ref?: Ref<HTMLDivElement>;
+
   children: ReactNode;
 }
 
@@ -24,23 +31,21 @@ export interface ExpansionListProps extends HTMLAttributes<HTMLDivElement> {
  * @since 6.0.0 Uses the new keyboard movement API and does not
  * require the `onKeyDown` prop to be provided.
  */
-export const ExpansionList = forwardRef<HTMLDivElement, ExpansionListProps>(
-  function ExpansionList(props, ref) {
-    const { onClick, onFocus, onKeyDown, children, ...remaining } = props;
+export function ExpansionList(props: ExpansionListProps): ReactElement {
+  const { ref, onClick, onFocus, onKeyDown, children, ...remaining } = props;
 
-    const { movementContext, movementProps } = useExpansionList({
-      ref,
-      onClick,
-      onFocus,
-      onKeyDown,
-    });
+  const { movementContext, movementProps } = useExpansionList({
+    ref,
+    onClick,
+    onFocus,
+    onKeyDown,
+  });
 
-    return (
-      <KeyboardMovementProvider value={movementContext}>
-        <div {...remaining} {...movementProps}>
-          {children}
-        </div>
-      </KeyboardMovementProvider>
-    );
-  }
-);
+  return (
+    <KeyboardMovementProvider value={movementContext}>
+      <div {...remaining} {...movementProps}>
+        {children}
+      </div>
+    </KeyboardMovementProvider>
+  );
+}

package/src/expansion-panel/ExpansionPanel.tsx

@@ -1,6 +1,11 @@
 "use client";
 
-import { type CSSProperties, type ReactNode, forwardRef } from "react";
+import {
+  type CSSProperties,
+  type ReactElement,
+  type ReactNode,
+  type Ref,
+} from "react";
 
 import { Card, type CardProps } from "../card/Card.js";
 import { CardContent, type CardContentProps } from "../card/CardContent.js";
@@ -21,6 +26,8 @@ import { expansionPanel } from "./styles.js";
  * @since 6.0.0 Removed the `marginTop` prop since it is no longer needed.
  */
 export interface ExpansionPanelProps extends CardProps {
+  ref?: Ref<HTMLHeadingElement>;
+
   /**
    * Set this to `true` if the {@link children} should be visible. This should
    * generally be provided by the `useExpansionPanels` hook.
@@ -204,12 +211,10 @@ export interface ExpansionPanelProps extends CardProps {
  * @since 6.0.0 The content will be persistent and invisible using `display: none`
  * instead of unmounting and also animate the `margin-top` style.
  */
-export const ExpansionPanel = forwardRef<
-  HTMLHeadingElement,
-  ExpansionPanelProps
->(function ExpansionPanel(props, ref) {
+export function ExpansionPanel(props: ExpansionPanelProps): ReactElement {
   const {
     id: propId,
+    ref,
     className,
     contentProps,
     contentStyle,
@@ -287,4 +292,4 @@ export const ExpansionPanel = forwardRef<
       )}
     </Card>
   );
-});
+}

package/src/expansion-panel/ExpansionPanelHeader.tsx

@@ -1,8 +1,9 @@
 import {
   type ButtonHTMLAttributes,
   type MouseEventHandler,
+  type ReactElement,
   type ReactNode,
-  forwardRef,
+  type Ref,
 } from "react";
 
 import { ButtonUnstyled } from "../button/ButtonUnstyled.js";
@@ -18,6 +19,8 @@ import { expansionPanelButton, expansionPanelHeading } from "./styles.js";
  * props.
  */
 export interface ExpansionPanelHeaderProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  ref?: Ref<HTMLHeadingElement>;
+
   id: string;
 
   /**
@@ -127,11 +130,11 @@ export interface ExpansionPanelHeaderProps extends ButtonHTMLAttributes<HTMLButt
  * @since 6.0.0 Updated to be wrapped by the {@link Typography}
  * component and rendered as an `<h6>`.
  */
-export const ExpansionPanelHeader = forwardRef<
-  HTMLHeadingElement,
-  ExpansionPanelHeaderProps
->(function ExpansionPanelHeader(props, ref) {
+export function ExpansionPanelHeader(
+  props: ExpansionPanelHeaderProps
+): ReactElement {
   const {
+    ref,
     id,
     headingType = "subtitle-1",
     headingProps,
@@ -177,4 +180,4 @@ export const ExpansionPanelHeader = forwardRef<
       {afterChildren}
     </Typography>
   );
-});
+}

package/src/files/FileInput.tsx

@@ -3,8 +3,9 @@
 import {
   type InputHTMLAttributes,
   type LabelHTMLAttributes,
+  type ReactElement,
   type ReactNode,
-  forwardRef,
+  type Ref,
 } from "react";
 
 import { type ButtonClassNameThemeOptions } from "../button/styles.js";
@@ -31,6 +32,8 @@ export interface FileInputProps
     ButtonClassNameThemeOptions,
     FileInputHTMLAttributes,
     ComponentWithRippleProps {
+  ref?: Ref<HTMLInputElement>;
+
   /**
    * This is the label text for icon-only file inputs.
    *
@@ -128,84 +131,81 @@ export interface FileInputProps
  * `responsive`. Also removed the `disableIconSpacing` prop since it is no
  * longer required.
  */
-export const FileInput = forwardRef<HTMLInputElement, FileInputProps>(
-  function FileInput(props, ref) {
-    const {
-      id: propId,
-      className,
-      children: propChildren,
-      icon: propIcon,
-      iconAfter = false,
-      srOnlyLabel = "Upload",
-      disableRepeatableFiles = false,
-      labelProps,
-      theme = "primary",
-      themeType = "contained",
-      buttonType = propChildren ? "text" : "icon",
-      disabled = false,
-      iconSize,
-      responsive,
-      multiple = false,
-      disableRipple,
-      ...remaining
-    } = props;
-    const id = useEnsuredId(propId, "file-input");
-    const { pressed, pressedClassName, ripples, handlers } =
-      useElementInteraction({
-        ...labelProps,
-        mode: disableRipple ? "none" : undefined,
-        onClick(event) {
-          labelProps?.onClick?.(event);
-
-          // stop propagation so 2 ripples are not created
-          event.stopPropagation();
-        },
-        disabled,
-      });
+export function FileInput(props: FileInputProps): ReactElement {
+  const {
+    ref,
+    id: propId,
+    className,
+    children: propChildren,
+    icon: propIcon,
+    iconAfter = false,
+    srOnlyLabel = "Upload",
+    disableRepeatableFiles = false,
+    labelProps,
+    theme = "primary",
+    themeType = "contained",
+    buttonType = propChildren ? "text" : "icon",
+    disabled = false,
+    iconSize,
+    responsive,
+    multiple = false,
+    disableRipple,
+    ...remaining
+  } = props;
+  const id = useEnsuredId(propId, "file-input");
+  const { pressed, pressedClassName, ripples, handlers } =
+    useElementInteraction({
+      ...labelProps,
+      mode: disableRipple ? "none" : undefined,
+      onClick(event) {
+        labelProps?.onClick?.(event);
 
-    const icon = getIcon("upload", propIcon);
-    let children = propChildren;
-    if (
-      propChildren === undefined &&
-      !props["aria-label"] &&
-      !props["aria-labelledby"]
-    ) {
-      children = <SrOnly phoneOnly={responsive}>{srOnlyLabel}</SrOnly>;
-    }
+        // stop propagation so 2 ripples are not created
+        event.stopPropagation();
+      },
+      disabled,
+    });
 
-    return (
-      <label
-        {...labelProps}
-        {...handlers}
-        className={fileInput({
-          theme,
-          themeType,
-          buttonType,
-          disabled,
-          iconSize,
-          pressed,
-          responsive,
-          pressedClassName,
-          className: className || labelProps?.className,
-        })}
-      >
-        {!iconAfter && icon}
-        {children}
-        {iconAfter && icon}
-        <input
-          {...remaining}
-          id={id}
-          ref={ref}
-          value={
-            disableRepeatableFiles || !props.onChange ? remaining.value : ""
-          }
-          type="file"
-          className="rmd-hidden-input"
-          disabled={disabled}
-          multiple={multiple}
-        />
-        {ripples}
-      </label>
-    );
+  const icon = getIcon("upload", propIcon);
+  let children = propChildren;
+  if (
+    propChildren === undefined &&
+    !props["aria-label"] &&
+    !props["aria-labelledby"]
+  ) {
+    children = <SrOnly phoneOnly={responsive}>{srOnlyLabel}</SrOnly>;
   }
-);
+
+  return (
+    <label
+      {...labelProps}
+      {...handlers}
+      className={fileInput({
+        theme,
+        themeType,
+        buttonType,
+        disabled,
+        iconSize,
+        pressed,
+        responsive,
+        pressedClassName,
+        className: className || labelProps?.className,
+      })}
+    >
+      {!iconAfter && icon}
+      {children}
+      {iconAfter && icon}
+      <input
+        {...remaining}
+        id={id}
+        ref={ref}
+        value={disableRepeatableFiles || !props.onChange ? remaining.value : ""}
+        type="file"
+        className="rmd-hidden-input"
+        disabled={disabled}
+        multiple={multiple}
+      />
+      {ripples}
+    </label>
+  );
+}

package/src/focus/useFocusContainer.ts

@@ -104,7 +104,7 @@ export interface FocusContainerOptions<E extends HTMLElement>
 
 /** @since 6.0.0 */
 export interface FocusContainerImplementation<E extends HTMLElement> {
-  nodeRef: RefObject<E>;
+  nodeRef: RefObject<E | null>;
   eventHandlers: Required<FocusContainerEventHandlers<E>>;
   transitionOptions: Required<FocusContainerTransitionOptions<E>>;
 }

package/src/form/Checkbox.tsx

@@ -1,4 +1,4 @@
-import { forwardRef } from "react";
+import { type ReactElement } from "react";
 
 import { type CheckboxProps, InputToggle } from "./InputToggle.js";
 
@@ -20,8 +20,8 @@ import { type CheckboxProps, InputToggle } from "./InputToggle.js";
  *
  * @see {@link https://react-md.dev/components/checkbox | Checkbox Demos}
  */
-export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
-  function Checkbox(props, ref) {
-    return <InputToggle {...props} ref={ref} type="checkbox" />;
-  }
-);
+export function Checkbox(props: CheckboxProps): ReactElement {
+  const { ref, ...remaining } = props;
+
+  return <InputToggle {...remaining} ref={ref} type="checkbox" />;
+}