@hitachivantara/uikit-react-core
Version:
UI Kit Core React components.
55 lines (54 loc) • 1.95 kB
JavaScript
import { HvIcon } from "../icons.js";
import { getElementById } from "../utils/document.js";
import { HvIconButton } from "../IconButton/IconButton.js";
import { DialogContext } from "./context.js";
import { useClasses } from "./Dialog.styles.js";
import { useDefaultProps, useTheme } from "@hitachivantara/uikit-react-utils";
import { forwardRef, useMemo } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import MuiDialog from "@mui/material/Dialog";
//#region src/Dialog/Dialog.tsx
/**
* A Dialog is a graphical control element in the form of a small panel that communicates information and prompts for a response.
*/
var HvDialog = forwardRef((props, ref) => {
const { variant, classes: classesProp, className, children, open = false, onClose, buttonTitle = "Close", fullHeight, fullScreen = false, disableBackdropClick = false, ...others } = useDefaultProps("HvDialog", props);
const { classes, cx } = useClasses(classesProp);
const { rootId } = useTheme();
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
})
},
ref,
open,
fullScreen,
onClose: (event, reason) => {
if (disableBackdropClick) return;
onClose?.(event, reason);
},
slotProps: { backdrop: { classes: { root: classes.background } } },
...others,
children: [onClose && /* @__PURE__ */ jsx(HvIconButton, {
title: buttonTitle,
className: classes.closeButton,
onClick: (event) => onClose?.(event, void 0),
children: /* @__PURE__ */ jsx(HvIcon, {
name: "Close",
compact: true
})
}), /* @__PURE__ */ jsx(DialogContext.Provider, {
value: contextValue,
children
})]
});
});
//#endregion
export { HvDialog };