@cgi-learning-hub/ui
Version:
@cgi-learning-hub/ui is an open-source React component library that implements UI for HUB's features
469 lines (468 loc) • 13.1 kB
JavaScript
import * as u from "react";
import { P as o } from "./index-Sy88PpwE.js";
import { F as so, G as io, H as v, K as n } from "./identifier-PWESmBq6.js";
import { u as po } from "./useTheme-XJ9sFCWX.js";
import { jsx as i } from "react/jsx-runtime";
import { u as co, s as m, c as uo } from "./DefaultPropsProvider-DqazQPtr.js";
import { m as mo } from "./memoTheme-DAFDflPY.js";
import { u as p } from "./useSlot-BzdKwDQ5.js";
import { P as w } from "./Paper-IQckggbn.js";
import { F as W, B as bo } from "./Backdrop-CjZYrxkZ.js";
import { u as fo } from "./useId-CK6Kn3Tn.js";
import { M as yo } from "./Modal-D3Q9vEAI.js";
const O = /* @__PURE__ */ u.createContext({});
process.env.NODE_ENV !== "production" && (O.displayName = "DialogContext");
function ho(r) {
return io("MuiDialog", r);
}
const k = so("MuiDialog", ["root", "scrollPaper", "scrollBody", "container", "paper", "paperScrollPaper", "paperScrollBody", "paperWidthFalse", "paperWidthXs", "paperWidthSm", "paperWidthMd", "paperWidthLg", "paperWidthXl", "paperFullWidth", "paperFullScreen"]), go = m(bo, {
name: "MuiDialog",
slot: "Backdrop",
overrides: (r, e) => e.backdrop
})({
// Improve scrollable dialog support.
zIndex: -1
}), xo = (r) => {
const {
classes: e,
scroll: a,
maxWidth: c,
fullWidth: d,
fullScreen: b
} = r, f = {
root: ["root"],
container: ["container", `scroll${n(a)}`],
paper: ["paper", `paperScroll${n(a)}`, `paperWidth${n(String(c))}`, d && "paperFullWidth", b && "paperFullScreen"]
};
return uo(f, ho, e);
}, ko = m(yo, {
name: "MuiDialog",
slot: "Root"
})({
"@media print": {
// Use !important to override the Modal inline-style.
position: "absolute !important"
}
}), Po = m("div", {
name: "MuiDialog",
slot: "Container",
overridesResolver: (r, e) => {
const {
ownerState: a
} = r;
return [e.container, e[`scroll${n(a.scroll)}`]];
}
})({
height: "100%",
"@media print": {
height: "auto"
},
// We disable the focus ring for mouse, touch and keyboard users.
outline: 0,
variants: [{
props: {
scroll: "paper"
},
style: {
display: "flex",
justifyContent: "center",
alignItems: "center"
}
}, {
props: {
scroll: "body"
},
style: {
overflowY: "auto",
overflowX: "hidden",
textAlign: "center",
"&::after": {
content: '""',
display: "inline-block",
verticalAlign: "middle",
height: "100%",
width: "0"
}
}
}]
}), So = m(w, {
name: "MuiDialog",
slot: "Paper",
overridesResolver: (r, e) => {
const {
ownerState: a
} = r;
return [e.paper, e[`scrollPaper${n(a.scroll)}`], e[`paperWidth${n(String(a.maxWidth))}`], a.fullWidth && e.paperFullWidth, a.fullScreen && e.paperFullScreen];
}
})(mo(({
theme: r
}) => ({
margin: 32,
position: "relative",
overflowY: "auto",
"@media print": {
overflowY: "visible",
boxShadow: "none"
},
variants: [{
props: {
scroll: "paper"
},
style: {
display: "flex",
flexDirection: "column",
maxHeight: "calc(100% - 64px)"
}
}, {
props: {
scroll: "body"
},
style: {
display: "inline-block",
verticalAlign: "middle",
textAlign: "initial"
}
}, {
props: ({
ownerState: e
}) => !e.maxWidth,
style: {
maxWidth: "calc(100% - 64px)"
}
}, {
props: {
maxWidth: "xs"
},
style: {
maxWidth: r.breakpoints.unit === "px" ? Math.max(r.breakpoints.values.xs, 444) : `max(${r.breakpoints.values.xs}${r.breakpoints.unit}, 444px)`,
[`&.${k.paperScrollBody}`]: {
[r.breakpoints.down(Math.max(r.breakpoints.values.xs, 444) + 32 * 2)]: {
maxWidth: "calc(100% - 64px)"
}
}
}
}, ...Object.keys(r.breakpoints.values).filter((e) => e !== "xs").map((e) => ({
props: {
maxWidth: e
},
style: {
maxWidth: `${r.breakpoints.values[e]}${r.breakpoints.unit}`,
[`&.${k.paperScrollBody}`]: {
[r.breakpoints.down(r.breakpoints.values[e] + 32 * 2)]: {
maxWidth: "calc(100% - 64px)"
}
}
}
})), {
props: ({
ownerState: e
}) => e.fullWidth,
style: {
width: "calc(100% - 64px)"
}
}, {
props: ({
ownerState: e
}) => e.fullScreen,
style: {
margin: 0,
width: "100%",
maxWidth: "100%",
height: "100%",
maxHeight: "none",
borderRadius: 0,
[`&.${k.paperScrollBody}`]: {
margin: 0,
maxWidth: "100%"
}
}
}]
}))), To = /* @__PURE__ */ u.forwardRef(function(e, a) {
const c = co({
props: e,
name: "MuiDialog"
}), d = po(), b = {
enter: d.transitions.duration.enteringScreen,
exit: d.transitions.duration.leavingScreen
}, {
"aria-describedby": f,
"aria-labelledby": M,
"aria-modal": B = !0,
BackdropComponent: j,
BackdropProps: F,
children: $,
className: N,
disableEscapeKeyDown: P = !1,
fullScreen: R = !1,
fullWidth: E = !1,
maxWidth: A = "sm",
onClick: S,
onClose: y,
open: T,
PaperComponent: I = w,
PaperProps: C = {},
scroll: K = "paper",
slots: U = {},
slotProps: H = {},
TransitionComponent: L = W,
transitionDuration: D = b,
TransitionProps: V,
...X
} = c, t = {
...c,
disableEscapeKeyDown: P,
fullScreen: R,
fullWidth: E,
maxWidth: A,
scroll: K
}, h = xo(t), g = u.useRef(), Y = (s) => {
g.current = s.target === s.currentTarget;
}, z = (s) => {
S && S(s), g.current && (g.current = null, y && y(s, "backdropClick"));
}, x = fo(M), _ = u.useMemo(() => ({
titleId: x
}), [x]), q = {
transition: L,
...U
}, G = {
transition: V,
paper: C,
backdrop: F,
...H
}, l = {
slots: q,
slotProps: G
}, [J, Q] = p("root", {
elementType: ko,
shouldForwardComponentProp: !0,
externalForwardedProps: l,
ownerState: t,
className: v(h.root, N),
ref: a
}), [Z, oo] = p("backdrop", {
elementType: go,
shouldForwardComponentProp: !0,
externalForwardedProps: l,
ownerState: t
}), [eo, ro] = p("paper", {
elementType: So,
shouldForwardComponentProp: !0,
externalForwardedProps: l,
ownerState: t,
className: v(h.paper, C.className)
}), [ao, to] = p("container", {
elementType: Po,
externalForwardedProps: l,
ownerState: t,
className: h.container
}), [no, lo] = p("transition", {
elementType: W,
externalForwardedProps: l,
ownerState: t,
additionalProps: {
appear: !0,
in: T,
timeout: D,
role: "presentation"
}
});
return /* @__PURE__ */ i(J, {
closeAfterTransition: !0,
slots: {
backdrop: Z
},
slotProps: {
backdrop: {
transitionDuration: D,
as: j,
...oo
}
},
disableEscapeKeyDown: P,
onClose: y,
open: T,
onClick: z,
...Q,
...X,
children: /* @__PURE__ */ i(no, {
...lo,
children: /* @__PURE__ */ i(ao, {
onMouseDown: Y,
...to,
children: /* @__PURE__ */ i(eo, {
as: I,
elevation: 24,
role: "dialog",
"aria-describedby": f,
"aria-labelledby": x,
"aria-modal": B,
...ro,
children: /* @__PURE__ */ i(O.Provider, {
value: _,
children: $
})
})
})
})
});
});
process.env.NODE_ENV !== "production" && (To.propTypes = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the d.ts file and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* The id(s) of the element(s) that describe the dialog.
*/
"aria-describedby": o.string,
/**
* The id(s) of the element(s) that label the dialog.
*/
"aria-labelledby": o.string,
/**
* Informs assistive technologies that the element is modal.
* It's added on the element with role="dialog".
* @default true
*/
"aria-modal": o.oneOfType([o.oneOf(["false", "true"]), o.bool]),
/**
* A backdrop component. This prop enables custom backdrop rendering.
* @deprecated Use `slots.backdrop` instead. While this prop currently works, it will be removed in the next major version.
* Use the `slots.backdrop` prop to make your application ready for the next version of Material UI.
* @default styled(Backdrop, {
* name: 'MuiModal',
* slot: 'Backdrop',
* })({
* zIndex: -1,
* })
*/
BackdropComponent: o.elementType,
/**
* @ignore
*/
BackdropProps: o.object,
/**
* Dialog children, usually the included sub-components.
*/
children: o.node,
/**
* Override or extend the styles applied to the component.
*/
classes: o.object,
/**
* @ignore
*/
className: o.string,
/**
* If `true`, hitting escape will not fire the `onClose` callback.
* @default false
*/
disableEscapeKeyDown: o.bool,
/**
* If `true`, the dialog is full-screen.
* @default false
*/
fullScreen: o.bool,
/**
* If `true`, the dialog stretches to `maxWidth`.
*
* Notice that the dialog width grow is limited by the default margin.
* @default false
*/
fullWidth: o.bool,
/**
* Determine the max-width of the dialog.
* The dialog width grows with the size of the screen.
* Set to `false` to disable `maxWidth`.
* @default 'sm'
*/
maxWidth: o.oneOfType([o.oneOf(["xs", "sm", "md", "lg", "xl", !1]), o.string]),
/**
* @ignore
*/
onClick: o.func,
/**
* Callback fired when the component requests to be closed.
*
* @param {object} event The event source of the callback.
* @param {string} reason Can be: `"escapeKeyDown"`, `"backdropClick"`.
*/
onClose: o.func,
/**
* If `true`, the component is shown.
*/
open: o.bool.isRequired,
/**
* The component used to render the body of the dialog.
* @default Paper
*/
PaperComponent: o.elementType,
/**
* Props applied to the [`Paper`](https://mui.com/material-ui/api/paper/) element.
* @default {}
* @deprecated Use `slotProps.paper` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
PaperProps: o.object,
/**
* Determine the container for scrolling the dialog.
* @default 'paper'
*/
scroll: o.oneOf(["body", "paper"]),
/**
* The props used for each slot inside.
* @default {}
*/
slotProps: o.shape({
backdrop: o.oneOfType([o.func, o.object]),
container: o.oneOfType([o.func, o.object]),
paper: o.oneOfType([o.func, o.object]),
root: o.oneOfType([o.func, o.object]),
transition: o.oneOfType([o.func, o.object])
}),
/**
* The components used for each slot inside.
* @default {}
*/
slots: o.shape({
backdrop: o.elementType,
container: o.elementType,
paper: o.elementType,
root: o.elementType,
transition: o.elementType
}),
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object]),
/**
* The component used for the transition.
* [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
* @default Fade
* @deprecated Use `slots.transition` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
TransitionComponent: o.elementType,
/**
* The duration for the transition, in milliseconds.
* You may specify a single timeout for all transitions, or individually with an object.
* @default {
* enter: theme.transitions.duration.enteringScreen,
* exit: theme.transitions.duration.leavingScreen,
* }
*/
transitionDuration: o.oneOfType([o.number, o.shape({
appear: o.number,
enter: o.number,
exit: o.number
})]),
/**
* Props applied to the transition element.
* By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
* @deprecated Use `slotProps.transition` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
TransitionProps: o.object
});
export {
To as D,
O as a,
k as d
};