@cgi-learning-hub/ui
Version:
@cgi-learning-hub/ui is an open-source React component library that implements UI for HUB's features
361 lines (360 loc) • 9.78 kB
JavaScript
import * as h from "react";
import { P as e } from "./index-B9vkf41S.js";
import { F as q, G as A, H } from "./generateUtilityClasses-B_xKAflz.js";
import { u as B } from "./useSlot-BSkdRaZr.js";
import { jsx as j } from "react/jsx-runtime";
import { u as V, s as _, c as z } from "./DefaultPropsProvider-BrmlvPWg.js";
import { u as G } from "./useTheme-0AkY41zn.js";
import { T as W, g as N, r as I } from "./utils-B_pVp6UZ.js";
import { u as J } from "./useForkRef-u29GSuCu.js";
import { g as K, e as Q } from "./elementAcceptingRef-CZLfau9O.js";
const X = {
entering: {
opacity: 1
},
entered: {
opacity: 1
}
}, F = /* @__PURE__ */ h.forwardRef(function(o, a) {
const t = G(), T = {
enter: t.transitions.duration.enteringScreen,
exit: t.transitions.duration.leavingScreen
}, {
addEndListener: m,
appear: f = !0,
children: u,
easing: y,
in: b,
onEnter: E,
onEntered: x,
onEntering: v,
onExit: g,
onExited: R,
onExiting: C,
style: c,
timeout: d = T,
// eslint-disable-next-line react/prop-types
TransitionComponent: P = W,
...k
} = o, p = h.useRef(null), w = J(p, K(u), a), s = (n) => (r) => {
if (n) {
const l = p.current;
r === void 0 ? n(l) : n(l, r);
}
}, O = s(v), S = s((n, r) => {
I(n);
const l = N({
style: c,
timeout: d,
easing: y
}, {
mode: "enter"
});
n.style.webkitTransition = t.transitions.create("opacity", l), n.style.transition = t.transitions.create("opacity", l), E && E(n, r);
}), D = s(x), L = s(C), M = s((n) => {
const r = N({
style: c,
timeout: d,
easing: y
}, {
mode: "exit"
});
n.style.webkitTransition = t.transitions.create("opacity", r), n.style.transition = t.transitions.create("opacity", r), g && g(n);
}), U = s(R);
return /* @__PURE__ */ j(P, {
appear: f,
in: b,
nodeRef: p,
onEnter: S,
onEntered: D,
onEntering: O,
onExit: M,
onExited: U,
onExiting: L,
addEndListener: (n) => {
m && m(p.current, n);
},
timeout: d,
...k,
children: (n, {
ownerState: r,
...l
}) => /* @__PURE__ */ h.cloneElement(u, {
style: {
opacity: 0,
visibility: n === "exited" && !b ? "hidden" : void 0,
...X[n],
...c,
...u.props.style
},
ref: w,
...l
})
});
});
process.env.NODE_ENV !== "production" && (F.propTypes = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the d.ts file and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* Add a custom transition end trigger. Called with the transitioning DOM
* node and a done callback. Allows for more fine grained transition end
* logic. Note: Timeouts are still used as a fallback if provided.
*/
addEndListener: e.func,
/**
* Perform the enter transition when it first mounts if `in` is also `true`.
* Set this to `false` to disable this behavior.
* @default true
*/
appear: e.bool,
/**
* A single child content element.
*/
children: Q.isRequired,
/**
* The transition timing function.
* You may specify a single easing or a object containing enter and exit values.
*/
easing: e.oneOfType([e.shape({
enter: e.string,
exit: e.string
}), e.string]),
/**
* If `true`, the component will transition in.
*/
in: e.bool,
/**
* @ignore
*/
onEnter: e.func,
/**
* @ignore
*/
onEntered: e.func,
/**
* @ignore
*/
onEntering: e.func,
/**
* @ignore
*/
onExit: e.func,
/**
* @ignore
*/
onExited: e.func,
/**
* @ignore
*/
onExiting: e.func,
/**
* @ignore
*/
style: e.object,
/**
* 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,
* }
*/
timeout: e.oneOfType([e.number, e.shape({
appear: e.number,
enter: e.number,
exit: e.number
})])
});
function Y(i) {
return A("MuiBackdrop", i);
}
const de = q("MuiBackdrop", ["root", "invisible"]), Z = (i) => {
const {
classes: o,
invisible: a
} = i;
return z({
root: ["root", a && "invisible"]
}, Y, o);
}, $ = _("div", {
name: "MuiBackdrop",
slot: "Root",
overridesResolver: (i, o) => {
const {
ownerState: a
} = i;
return [o.root, a.invisible && o.invisible];
}
})({
position: "fixed",
display: "flex",
alignItems: "center",
justifyContent: "center",
right: 0,
bottom: 0,
top: 0,
left: 0,
backgroundColor: "rgba(0, 0, 0, 0.5)",
WebkitTapHighlightColor: "transparent",
variants: [{
props: {
invisible: !0
},
style: {
backgroundColor: "transparent"
}
}]
}), ee = /* @__PURE__ */ h.forwardRef(function(o, a) {
const t = V({
props: o,
name: "MuiBackdrop"
}), {
children: T,
className: m,
component: f = "div",
invisible: u = !1,
open: y,
components: b = {},
componentsProps: E = {},
slotProps: x = {},
slots: v = {},
TransitionComponent: g,
transitionDuration: R,
...C
} = t, c = {
...t,
component: f,
invisible: u
}, d = Z(c), P = {
transition: g,
root: b.Root,
...v
}, k = {
...E,
...x
}, p = {
component: f,
slots: P,
slotProps: k
}, [w, s] = B("root", {
elementType: $,
externalForwardedProps: p,
className: H(d.root, m),
ownerState: c
}), [O, S] = B("transition", {
elementType: F,
externalForwardedProps: p,
ownerState: c
});
return /* @__PURE__ */ j(O, {
in: y,
timeout: R,
...C,
...S,
children: /* @__PURE__ */ j(w, {
"aria-hidden": !0,
...s,
classes: d,
ref: a,
children: T
})
});
});
process.env.NODE_ENV !== "production" && (ee.propTypes = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the d.ts file and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* The content of the component.
*/
children: e.node,
/**
* Override or extend the styles applied to the component.
*/
classes: e.object,
/**
* @ignore
*/
className: e.string,
/**
* The component used for the root node.
* Either a string to use a HTML element or a component.
*/
component: e.elementType,
/**
* The components used for each slot inside.
*
* @deprecated Use the `slots` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*
* @default {}
*/
components: e.shape({
Root: e.elementType
}),
/**
* The extra props for the slot components.
* You can override the existing props or add new ones.
*
* @deprecated Use the `slotProps` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*
* @default {}
*/
componentsProps: e.shape({
root: e.object
}),
/**
* If `true`, the backdrop is invisible.
* It can be used when rendering a popover or a custom select component.
* @default false
*/
invisible: e.bool,
/**
* If `true`, the component is shown.
*/
open: e.bool.isRequired,
/**
* The props used for each slot inside.
* @default {}
*/
slotProps: e.shape({
root: e.oneOfType([e.func, e.object]),
transition: e.oneOfType([e.func, e.object])
}),
/**
* The components used for each slot inside.
* @default {}
*/
slots: e.shape({
root: e.elementType,
transition: e.elementType
}),
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.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: e.elementType,
/**
* The duration for the transition, in milliseconds.
* You may specify a single timeout for all transitions, or individually with an object.
*/
transitionDuration: e.oneOfType([e.number, e.shape({
appear: e.number,
enter: e.number,
exit: e.number
})])
});
export {
ee as B,
F,
de as b,
Y as g
};