@hitachivantara/uikit-react-core/dist/esm/Dialog/Dialog.js

Core React components for the NEXT Design System.

import { jsxs, jsx } from "react/jsx-runtime";
import { useCallback, useMemo } from "react";
import MuiDialog from "@mui/material/Dialog";
import { useDefaultProps, useTheme } from "@hitachivantara/uikit-react-utils";
import { HvIcon } from "../icons.js";
import { getElementById } from "../utils/document.js";
import { setId } from "../utils/setId.js";
import { DialogContext } from "./context.js";
import { useClasses } from "./Dialog.styles.js";
import { staticClasses } from "./Dialog.styles.js";
import { HvIconButton } from "../IconButton/IconButton.js";
const HvDialog = (props) => {
  const {
    variant,
    classes: classesProp,
    className,
    id,
    children,
    open = false,
    onClose,
    firstFocusable,
    buttonTitle = "Close",
    fullHeight,
    fullscreen: fullScreen = false,
    // TODO: rename to `fullScreen` in v6
    disableBackdropClick = false,
    ...others
  } = useDefaultProps("HvDialog", props);
  const { classes, cx } = useClasses(classesProp);
  const { rootId } = useTheme();
  const measuredRef = useCallback(() => {
    if (!firstFocusable) return;
    const element = document.getElementById(firstFocusable);
    element?.focus();
  }, [firstFocusable]);
  const contextValue = useMemo(() => ({ fullScreen }), [fullScreen]);
  return /* @__PURE__ */ jsxs(
    MuiDialog,
    {
      container: getElementById(rootId),
      className,
      classes: {
        root: classes.root,
        paper: cx(classes.paper, classes[variant], {
          [classes.fullHeight]: fullHeight,
          [classes.statusBar]: !!variant,
          [classes.fullscreen]: fullScreen
        })
      },
      id,
      ref: measuredRef,
      open,
      fullScreen,
      onClose: (event, reason) => {
        if (disableBackdropClick) return;
        onClose?.(event, reason);
      },
      slotProps: {
        backdrop: {
          classes: {
            root: classes.background
          }
        }
      },
      ...others,
      children: [
        /* @__PURE__ */ jsx(
          HvIconButton,
          {
            title: buttonTitle,
            id: setId(id, "close"),
            className: classes.closeButton,
            onClick: (event) => onClose?.(event, void 0),
            children: /* @__PURE__ */ jsx(HvIcon, { name: "Close", compact: true })
          }
        ),
        /* @__PURE__ */ jsx(DialogContext.Provider, { value: contextValue, children })
      ]
    }
  );
};
export {
  HvDialog,
  staticClasses as dialogClasses
};