@react-md/core 6.5.1 → 7.0.0

package/src/dialog/Dialog.tsx

@@ -1,6 +1,11 @@
 "use client";
 
-import { type HTMLAttributes, forwardRef, useState } from "react";
+import {
+  type HTMLAttributes,
+  type ReactElement,
+  type Ref,
+  useState,
+} from "react";
 
 import { useSsr } from "../SsrProvider.js";
 import {
@@ -47,6 +52,8 @@ export interface BaseDialogProps
     CSSTransitionComponentProps,
     TransitionActions,
     FocusContainerComponentProps {
+  ref?: Ref<HTMLDivElement>;
+
   /**
    * @defaultValue `"dialog-" + useId()`
    */
@@ -236,157 +243,156 @@ export type DialogProps = LabelRequiredForA11y<BaseDialogProps>;
  * within once it becomes visible. You must manually add `autoFocus` to a
  * element instead.
  */
-export const Dialog = forwardRef<HTMLDivElement, DialogProps>(
-  function Dialog(props, ref) {
-    const {
-      id: propId,
-      modal = false,
-      role = modal ? "alertdialog" : "dialog",
-      type = "centered",
-      width,
-      tabIndex = -1,
-      visible,
-      onRequestClose,
-      containerProps,
-      temporary = true,
-      className,
-      timeout = DEFAULT_DIALOG_TIMEOUT,
-      classNames = DEFAULT_DIALOG_CLASSNAMES,
-      disableTransition = false,
-      appear = false,
-      enter = true,
-      exit = true,
-      onEnter = noop,
-      onEntering = noop,
-      onEntered = noop,
-      onExit = noop,
-      onExiting = noop,
-      onExited = noop,
-      exitedHidden = true,
-      disableOverlay = false,
-      overlayProps,
-      overlayHidden,
-      onKeyDown = noop,
-      isFocusTypeDisabled = noopBool,
-      disablePortal: propDisablePortal,
-      disableScrollLock = false,
-      disableEscapeClose = modal,
-      disableFocusOutline = type === "full-page",
-      children,
-      ...remaining
-    } = props;
-    const id = useEnsuredId(propId, "dialog");
+export function Dialog(props: DialogProps): ReactElement {
+  const {
+    ref,
+    id: propId,
+    modal = false,
+    role = modal ? "alertdialog" : "dialog",
+    type = "centered",
+    width,
+    tabIndex = -1,
+    visible,
+    onRequestClose,
+    containerProps,
+    temporary = true,
+    className,
+    timeout = DEFAULT_DIALOG_TIMEOUT,
+    classNames = DEFAULT_DIALOG_CLASSNAMES,
+    disableTransition = false,
+    appear = false,
+    enter = true,
+    exit = true,
+    onEnter = noop,
+    onEntering = noop,
+    onEntered = noop,
+    onExit = noop,
+    onExiting = noop,
+    onExited = noop,
+    exitedHidden = true,
+    disableOverlay = false,
+    overlayProps,
+    overlayHidden,
+    onKeyDown = noop,
+    isFocusTypeDisabled = noopBool,
+    disablePortal: propDisablePortal,
+    disableScrollLock = false,
+    disableEscapeClose = modal,
+    disableFocusOutline = type === "full-page",
+    children,
+    ...remaining
+  } = props;
+  const id = useEnsuredId(propId, "dialog");
 
-    const ssr = useSsr();
-    const setChildVisible = useNestedDialogContext();
+  const ssr = useSsr();
+  const setChildVisible = useNestedDialogContext();
 
-    // this makes it so that as more non-full page dialogs become visible, the
-    // overlay does not become darker as more and more overlays are stacked upon
-    // each other. only the top-most overlay will have and active background
-    // color.
-    const [isChildVisible, setIsChildVisible] = useState(false);
-    const { eventHandlers, transitionOptions } = useFocusContainer({
-      nodeRef: ref,
-      activate: visible,
-      onEnter(appearing) {
-        onEnter(appearing);
-        setChildVisible(type !== "full-page");
-      },
-      onEntered(appear) {
-        onEntered(appear);
-        // this needs to be called onEnter and onEntered just in case the
-        // transition is disabled
-        setChildVisible(type !== "full-page");
-      },
-      onEntering,
-      onExit() {
-        onExit();
-        setChildVisible(false);
-      },
-      onExiting,
-      onExited() {
-        onExited();
-        // this needs to be called onExit and onExited just in case the
-        // transition is disabled
-        setChildVisible(false);
-      },
-      disableTransition,
-      onKeyDown(event) {
-        onKeyDown(event);
-        if (
-          event.isPropagationStopped() ||
-          modal ||
-          disableEscapeClose ||
-          event.key !== "Escape"
-        ) {
-          return;
-        }
+  // this makes it so that as more non-full page dialogs become visible, the
+  // overlay does not become darker as more and more overlays are stacked upon
+  // each other. only the top-most overlay will have and active background
+  // color.
+  const [isChildVisible, setIsChildVisible] = useState(false);
+  const { eventHandlers, transitionOptions } = useFocusContainer({
+    nodeRef: ref,
+    activate: visible,
+    onEnter(appearing) {
+      onEnter(appearing);
+      setChildVisible(type !== "full-page");
+    },
+    onEntered(appear) {
+      onEntered(appear);
+      // this needs to be called onEnter and onEntered just in case the
+      // transition is disabled
+      setChildVisible(type !== "full-page");
+    },
+    onEntering,
+    onExit() {
+      onExit();
+      setChildVisible(false);
+    },
+    onExiting,
+    onExited() {
+      onExited();
+      // this needs to be called onExit and onExited just in case the
+      // transition is disabled
+      setChildVisible(false);
+    },
+    disableTransition,
+    onKeyDown(event) {
+      onKeyDown(event);
+      if (
+        event.isPropagationStopped() ||
+        modal ||
+        disableEscapeClose ||
+        event.key !== "Escape"
+      ) {
+        return;
+      }
 
-        // prevent parent dialogs from closing as well
-        event.stopPropagation();
-        onRequestClose();
-      },
-      isFocusTypeDisabled,
-    });
-    const { elementProps, stage, rendered, disablePortal } = useCSSTransition({
-      transitionIn: visible,
-      timeout,
-      classNames,
-      className: dialog({
-        type,
-        width,
-        fixed: type === "custom",
-        outline: !disableFocusOutline,
-        disableBoxShadow: isChildVisible,
-        className,
-      }),
-      appear: appear && !disableTransition && !ssr,
-      enter: enter && !disableTransition,
-      exit: exit && !disableTransition,
-      temporary,
-      exitedHidden,
-      disablePortal: propDisablePortal,
-      ...transitionOptions,
-    });
-    useScrollLock(!disableScrollLock && visible);
+      // prevent parent dialogs from closing as well
+      event.stopPropagation();
+      onRequestClose();
+    },
+    isFocusTypeDisabled,
+  });
+  const { elementProps, stage, rendered, disablePortal } = useCSSTransition({
+    transitionIn: visible,
+    timeout,
+    classNames,
+    className: dialog({
+      type,
+      width,
+      fixed: type === "custom",
+      outline: !disableFocusOutline,
+      disableBoxShadow: isChildVisible,
+      className,
+    }),
+    appear: appear && !disableTransition && !ssr,
+    enter: enter && !disableTransition,
+    exit: exit && !disableTransition,
+    temporary,
+    exitedHidden,
+    disablePortal: propDisablePortal,
+    ...transitionOptions,
+  });
+  useScrollLock(!disableScrollLock && visible);
 
-    return (
-      <NestedDialogProvider value={setIsChildVisible}>
-        {!disableOverlay && (
-          <Overlay
-            visible={visible}
-            disableTransition={disableTransition}
-            temporary={temporary}
-            disablePortal={disablePortal}
-            {...overlayProps}
-            onClick={modal ? noop : onRequestClose}
-            clickable={!modal}
-            noOpacity={overlayHidden || isChildVisible}
-          />
-        )}
-        <Portal disabled={disablePortal}>
-          {rendered && (
-            <DialogContainer
-              enabled={type !== "custom"}
-              {...containerProps}
-              centered={type === "centered"}
-              displayNone={!temporary && exitedHidden && stage === "exited"}
+  return (
+    <NestedDialogProvider value={setIsChildVisible}>
+      {!disableOverlay && (
+        <Overlay
+          visible={visible}
+          disableTransition={disableTransition}
+          temporary={temporary}
+          disablePortal={disablePortal}
+          {...overlayProps}
+          onClick={modal ? noop : onRequestClose}
+          clickable={!modal}
+          noOpacity={overlayHidden || isChildVisible}
+        />
+      )}
+      <Portal disabled={disablePortal}>
+        {rendered && (
+          <DialogContainer
+            enabled={type !== "custom"}
+            {...containerProps}
+            centered={type === "centered"}
+            displayNone={!temporary && exitedHidden && stage === "exited"}
+          >
+            <div
+              aria-modal={modal || undefined}
+              {...remaining}
+              {...elementProps}
+              {...eventHandlers}
+              id={id}
+              role={role}
+              tabIndex={tabIndex}
             >
-              <div
-                aria-modal={modal || undefined}
-                {...remaining}
-                {...elementProps}
-                {...eventHandlers}
-                id={id}
-                role={role}
-                tabIndex={tabIndex}
-              >
-                {children}
-              </div>
-            </DialogContainer>
-          )}
-        </Portal>
-      </NestedDialogProvider>
-    );
-  }
-);
+              {children}
+            </div>
+          </DialogContainer>
+        )}
+      </Portal>
+    </NestedDialogProvider>
+  );
+}

package/src/dialog/DialogContainer.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 { dialogContainer } from "./styles.js";
 
@@ -6,6 +11,8 @@ import { dialogContainer } from "./styles.js";
  * @since 6.0.0
  */
 export interface ConfigurableDialogContainerProps extends HTMLAttributes<HTMLDivElement> {
+  ref?: Ref<HTMLDivElement>;
+
   /**
    * Set to `true` to force the `Dialog` to be wrapped in a `DialogContainer`
    * div. This defaults to `true` for `type !== "custom"`.
@@ -28,33 +35,32 @@ export interface DialogContainerProps extends ConfigurableDialogContainerProps {
  * @since 6.0.0
  * @internal
  */
-export const DialogContainer = forwardRef<HTMLDivElement, DialogContainerProps>(
-  function DialogContainer(props, ref) {
-    const {
-      enabled,
-      centered,
-      displayNone,
-      children,
-      className,
-      ...remaining
-    } = props;
-
-    if (!enabled) {
-      return <>{children}</>;
-    }
+export function DialogContainer(props: DialogContainerProps): ReactElement {
+  const {
+    ref,
+    enabled,
+    centered,
+    displayNone,
+    children,
+    className,
+    ...remaining
+  } = props;
 
-    return (
-      <div
-        {...remaining}
-        ref={ref}
-        className={dialogContainer({
-          className,
-          centered,
-          displayNone,
-        })}
-      >
-        {children}
-      </div>
-    );
+  if (!enabled) {
+    return <>{children}</>;
   }
-);
+
+  return (
+    <div
+      {...remaining}
+      ref={ref}
+      className={dialogContainer({
+        className,
+        centered,
+        displayNone,
+      })}
+    >
+      {children}
+    </div>
+  );
+}

package/src/dialog/DialogContent.tsx

@@ -1,9 +1,11 @@
-import { type HTMLAttributes, forwardRef } from "react";
+import { type HTMLAttributes, type ReactElement, type Ref } from "react";
 
 import { type DialogContentClassNameOptions, dialogContent } from "./styles.js";
 
 export interface DialogContentProps
-  extends HTMLAttributes<HTMLDivElement>, DialogContentClassNameOptions {}
+  extends HTMLAttributes<HTMLDivElement>, DialogContentClassNameOptions {
+  ref?: Ref<HTMLDivElement>;
+}
 
 /**
  * The `DialogContent` component should be used as a child of the `Dialog`
@@ -12,20 +14,25 @@ export interface DialogContentProps
  *
  * @see {@link https://react-md.dev/components/dialog | Dialog Demos}
  */
-export const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(
-  function DialogContent(props, ref) {
-    const { children, className, disablePadding = false, ...remaining } = props;
-    return (
-      <div
-        {...remaining}
-        ref={ref}
-        className={dialogContent({
-          className,
-          disablePadding,
-        })}
-      >
-        {children}
-      </div>
-    );
-  }
-);
+export function DialogContent(props: DialogContentProps): ReactElement {
+  const {
+    ref,
+    children,
+    className,
+    disablePadding = false,
+    ...remaining
+  } = props;
+
+  return (
+    <div
+      {...remaining}
+      ref={ref}
+      className={dialogContent({
+        className,
+        disablePadding,
+      })}
+    >
+      {children}
+    </div>
+  );
+}

package/src/dialog/DialogFooter.tsx

@@ -1,9 +1,11 @@
-import { type HTMLAttributes, forwardRef } from "react";
+import { type HTMLAttributes, type ReactElement, type Ref } from "react";
 
 import { type DialogFooterClassNameOptions, dialogFooter } from "./styles.js";
 
 export interface DialogFooterProps
-  extends HTMLAttributes<HTMLDivElement>, DialogFooterClassNameOptions {}
+  extends HTMLAttributes<HTMLDivElement>, DialogFooterClassNameOptions {
+  ref?: Ref<HTMLDivElement>;
+}
 
 /**
  * The `DialogFooter` is a simple `<footer>` with simple `display: flex` styles
@@ -11,20 +13,21 @@ export interface DialogFooterProps
  *
  * @see {@link https://react-md.dev/components/dialog | Dialog Demos}
  */
-export const DialogFooter = forwardRef<HTMLDivElement, DialogFooterProps>(
-  function DialogFooter(props, ref) {
-    const { children, className, align = "end", ...remaining } = props;
-    return (
-      <footer
-        {...remaining}
-        ref={ref}
-        className={dialogFooter({
-          align,
-          className,
-        })}
-      >
-        {children}
-      </footer>
-    );
-  }
-);
+export const DialogFooter = function DialogFooter(
+  props: DialogFooterProps
+): ReactElement {
+  const { ref, children, className, align = "end", ...remaining } = props;
+
+  return (
+    <footer
+      {...remaining}
+      ref={ref}
+      className={dialogFooter({
+        align,
+        className,
+      })}
+    >
+      {children}
+    </footer>
+  );
+};

package/src/dialog/DialogHeader.tsx

@@ -1,4 +1,4 @@
-import { forwardRef } from "react";
+import { type ReactElement, type Ref } from "react";
 
 import { Box, type BoxProps } from "../box/Box.js";
 import { type BoxAlignItems } from "../box/styles.js";
@@ -8,6 +8,8 @@ import { dialogHeader } from "./styles.js";
  * @since 6.0.0 Extends the `BoxProps`.
  */
 export interface DialogHeaderProps extends BoxProps {
+  ref?: Ref<HTMLDivElement>;
+
   /** @defaultValue `"center"` */
   align?: BoxAlignItems;
 
@@ -23,26 +25,25 @@ export interface DialogHeaderProps extends BoxProps {
  * @see {@link https://react-md.dev/components/dialog | Dialog Demos}
  * @since 6.0.0 Extends the `Box` component.
  */
-export const DialogHeader = forwardRef<HTMLDivElement, DialogHeaderProps>(
-  function DialogHeader(props, ref) {
-    const {
-      align = "center",
-      disableWrap = true,
-      children,
-      className,
-      ...remaining
-    } = props;
+export function DialogHeader(props: DialogHeaderProps): ReactElement {
+  const {
+    ref,
+    align = "center",
+    disableWrap = true,
+    children,
+    className,
+    ...remaining
+  } = props;
 
-    return (
-      <Box
-        {...remaining}
-        align={align}
-        disableWrap={disableWrap}
-        ref={ref}
-        className={dialogHeader({ className })}
-      >
-        {children}
-      </Box>
-    );
-  }
-);
+  return (
+    <Box
+      {...remaining}
+      align={align}
+      disableWrap={disableWrap}
+      ref={ref}
+      className={dialogHeader({ className })}
+    >
+      {children}
+    </Box>
+  );
+}

package/src/dialog/DialogTitle.tsx

@@ -1,5 +1,5 @@
 import { cnb } from "cnbuilder";
-import { forwardRef } from "react";
+import { type ReactElement, type Ref } from "react";
 
 import { type Margin } from "../cssUtils.js";
 import {
@@ -14,6 +14,8 @@ import { type TypographyType } from "../typography/typographyStyles.js";
  * `HTMLAttributes<HTMLHeadingElement>`.
  */
 export interface DialogTitleProps extends TypographyProps {
+  ref?: Ref<HTMLHeadingElement>;
+
   /** @defaultValue `"h2"` */
   as?: CustomTypographyComponent;
 
@@ -31,29 +33,28 @@ export interface DialogTitleProps extends TypographyProps {
  *
  * @see {@link https://react-md.dev/components/dialog | Dialog Demos}
  */
-export const DialogTitle = forwardRef<HTMLHeadingElement, DialogTitleProps>(
-  function DialogTitle(props, ref) {
-    const {
-      as = "h2",
-      type = "headline-4",
-      margin = "none",
-      children,
-      className,
-      ...remaining
-    } = props;
+export function DialogTitle(props: DialogTitleProps): ReactElement {
+  const {
+    ref,
+    as = "h2",
+    type = "headline-4",
+    margin = "none",
+    children,
+    className,
+    ...remaining
+  } = props;
 
-    return (
-      <Typography
-        {...remaining}
-        ref={ref}
-        as={as}
-        type={type}
-        margin={margin}
-        // Note: This class applies no styles at this time
-        className={cnb("rmd-dialog__title", className)}
-      >
-        {children}
-      </Typography>
-    );
-  }
-);
+  return (
+    <Typography
+      {...remaining}
+      ref={ref}
+      as={as}
+      type={type}
+      margin={margin}
+      // Note: This class applies no styles at this time
+      className={cnb("rmd-dialog__title", className)}
+    >
+      {children}
+    </Typography>
+  );
+}