@cgi-learning-hub/ui
Version:
@cgi-learning-hub/ui is an open-source React component library that implements UI for HUB's features
369 lines (368 loc) • 11.8 kB
JavaScript
import * as q from "react";
import { P as o } from "./index-Sy88PpwE.js";
import { F as G, G as K, H as _, K as y, q as b, s as M } from "./identifier-PWESmBq6.js";
import { m as J } from "./memoTheme-DAFDflPY.js";
import { u as i } from "./useSlot-BzdKwDQ5.js";
import { c as m } from "./createSimplePaletteValueFilter-B7--0ryQ.js";
import { c as u } from "./createSvgIcon-B1E6Wo8z.js";
import { jsx as n, jsxs as Q } from "react/jsx-runtime";
import { C as X } from "./Close-DEMecSZ6.js";
import { u as Y, s as f, c as oo } from "./DefaultPropsProvider-DqazQPtr.js";
import { I as eo } from "./IconButton-BYvak8Nw.js";
import { P as to } from "./Paper-IQckggbn.js";
function no(e) {
return K("MuiAlert", e);
}
const P = G("MuiAlert", ["root", "action", "icon", "message", "filled", "colorSuccess", "colorInfo", "colorWarning", "colorError", "filledSuccess", "filledInfo", "filledWarning", "filledError", "outlined", "outlinedSuccess", "outlinedInfo", "outlinedWarning", "outlinedError", "standard", "standardSuccess", "standardInfo", "standardWarning", "standardError"]), so = u(/* @__PURE__ */ n("path", {
d: "M20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4C12.76,4 13.5,4.11 14.2, 4.31L15.77,2.74C14.61,2.26 13.34,2 12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0, 0 22,12M7.91,10.08L6.5,11.5L11,16L21,6L19.59,4.58L11,13.17L7.91,10.08Z"
}), "SuccessOutlined"), ro = u(/* @__PURE__ */ n("path", {
d: "M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z"
}), "ReportProblemOutlined"), lo = u(/* @__PURE__ */ n("path", {
d: "M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
}), "ErrorOutline"), ao = u(/* @__PURE__ */ n("path", {
d: "M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20, 12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10, 10 0 0,0 12,2M11,17H13V11H11V17Z"
}), "InfoOutlined"), io = (e) => {
const {
variant: s,
color: r,
severity: t,
classes: c
} = e, g = {
root: ["root", `color${y(r || t)}`, `${s}${y(r || t)}`, `${s}`],
icon: ["icon"],
message: ["message"],
action: ["action"]
};
return oo(g, no, c);
}, co = f(to, {
name: "MuiAlert",
slot: "Root",
overridesResolver: (e, s) => {
const {
ownerState: r
} = e;
return [s.root, s[r.variant], s[`${r.variant}${y(r.color || r.severity)}`]];
}
})(J(({
theme: e
}) => {
const s = e.palette.mode === "light" ? b : M, r = e.palette.mode === "light" ? M : b;
return {
...e.typography.body2,
backgroundColor: "transparent",
display: "flex",
padding: "6px 16px",
variants: [...Object.entries(e.palette).filter(m(["light"])).map(([t]) => ({
props: {
colorSeverity: t,
variant: "standard"
},
style: {
color: e.vars ? e.vars.palette.Alert[`${t}Color`] : s(e.palette[t].light, 0.6),
backgroundColor: e.vars ? e.vars.palette.Alert[`${t}StandardBg`] : r(e.palette[t].light, 0.9),
[`& .${P.icon}`]: e.vars ? {
color: e.vars.palette.Alert[`${t}IconColor`]
} : {
color: e.palette[t].main
}
}
})), ...Object.entries(e.palette).filter(m(["light"])).map(([t]) => ({
props: {
colorSeverity: t,
variant: "outlined"
},
style: {
color: e.vars ? e.vars.palette.Alert[`${t}Color`] : s(e.palette[t].light, 0.6),
border: `1px solid ${(e.vars || e).palette[t].light}`,
[`& .${P.icon}`]: e.vars ? {
color: e.vars.palette.Alert[`${t}IconColor`]
} : {
color: e.palette[t].main
}
}
})), ...Object.entries(e.palette).filter(m(["dark"])).map(([t]) => ({
props: {
colorSeverity: t,
variant: "filled"
},
style: {
fontWeight: e.typography.fontWeightMedium,
...e.vars ? {
color: e.vars.palette.Alert[`${t}FilledColor`],
backgroundColor: e.vars.palette.Alert[`${t}FilledBg`]
} : {
backgroundColor: e.palette.mode === "dark" ? e.palette[t].dark : e.palette[t].main,
color: e.palette.getContrastText(e.palette[t].main)
}
}
}))]
};
})), po = f("div", {
name: "MuiAlert",
slot: "Icon"
})({
marginRight: 12,
padding: "7px 0",
display: "flex",
fontSize: 22,
opacity: 0.9
}), uo = f("div", {
name: "MuiAlert",
slot: "Message"
})({
padding: "8px 0",
minWidth: 0,
overflow: "auto"
}), fo = f("div", {
name: "MuiAlert",
slot: "Action"
})({
display: "flex",
alignItems: "flex-start",
padding: "4px 0 0 16px",
marginLeft: "auto",
marginRight: -8
}), x = {
success: /* @__PURE__ */ n(so, {
fontSize: "inherit"
}),
warning: /* @__PURE__ */ n(ro, {
fontSize: "inherit"
}),
error: /* @__PURE__ */ n(lo, {
fontSize: "inherit"
}),
info: /* @__PURE__ */ n(ao, {
fontSize: "inherit"
})
}, go = /* @__PURE__ */ q.forwardRef(function(s, r) {
const t = Y({
props: s,
name: "MuiAlert"
}), {
action: c,
children: g,
className: h,
closeText: v = "Close",
color: C,
components: A = {},
componentsProps: j = {},
icon: S,
iconMapping: $ = x,
onClose: T,
role: z = "alert",
severity: p = "success",
slotProps: B = {},
slots: L = {},
variant: w = "standard",
...k
} = t, l = {
...t,
color: C,
severity: p,
variant: w,
colorSeverity: C || p
}, d = io(l), a = {
slots: {
closeButton: A.CloseButton,
closeIcon: A.CloseIcon,
...L
},
slotProps: {
...j,
...B
}
}, [R, E] = i("root", {
ref: r,
shouldForwardComponentProp: !0,
className: _(d.root, h),
elementType: co,
externalForwardedProps: {
...a,
...k
},
ownerState: l,
additionalProps: {
role: z,
elevation: 0
}
}), [N, F] = i("icon", {
className: d.icon,
elementType: po,
externalForwardedProps: a,
ownerState: l
}), [W, H] = i("message", {
className: d.message,
elementType: uo,
externalForwardedProps: a,
ownerState: l
}), [I, O] = i("action", {
className: d.action,
elementType: fo,
externalForwardedProps: a,
ownerState: l
}), [V, U] = i("closeButton", {
elementType: eo,
externalForwardedProps: a,
ownerState: l
}), [D, Z] = i("closeIcon", {
elementType: X,
externalForwardedProps: a,
ownerState: l
});
return /* @__PURE__ */ Q(R, {
...E,
children: [S !== !1 ? /* @__PURE__ */ n(N, {
...F,
children: S || $[p] || x[p]
}) : null, /* @__PURE__ */ n(W, {
...H,
children: g
}), c != null ? /* @__PURE__ */ n(I, {
...O,
children: c
}) : null, c == null && T ? /* @__PURE__ */ n(I, {
...O,
children: /* @__PURE__ */ n(V, {
size: "small",
"aria-label": v,
title: v,
color: "inherit",
onClick: T,
...U,
children: /* @__PURE__ */ n(D, {
fontSize: "small",
...Z
})
})
}) : null]
});
});
process.env.NODE_ENV !== "production" && (go.propTypes = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the d.ts file and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* The action to display. It renders after the message, at the end of the alert.
*/
action: o.node,
/**
* The content of the component.
*/
children: o.node,
/**
* Override or extend the styles applied to the component.
*/
classes: o.object,
/**
* @ignore
*/
className: o.string,
/**
* Override the default label for the *close popup* icon button.
*
* For localization purposes, you can use the provided [translations](https://mui.com/material-ui/guides/localization/).
* @default 'Close'
*/
closeText: o.string,
/**
* The color of the component. Unless provided, the value is taken from the `severity` prop.
* It supports both default and custom theme colors, which can be added as shown in the
* [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
*/
color: o.oneOfType([o.oneOf(["error", "info", "success", "warning"]), o.string]),
/**
* 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: o.shape({
CloseButton: o.elementType,
CloseIcon: o.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: o.shape({
closeButton: o.object,
closeIcon: o.object
}),
/**
* Override the icon displayed before the children.
* Unless provided, the icon is mapped to the value of the `severity` prop.
* Set to `false` to remove the `icon`.
*/
icon: o.node,
/**
* The component maps the `severity` prop to a range of different icons,
* for instance success to `<SuccessOutlined>`.
* If you wish to change this mapping, you can provide your own.
* Alternatively, you can use the `icon` prop to override the icon displayed.
*/
iconMapping: o.shape({
error: o.node,
info: o.node,
success: o.node,
warning: o.node
}),
/**
* Callback fired when the component requests to be closed.
* When provided and no `action` prop is set, a close icon button is displayed that triggers the callback when clicked.
* @param {React.SyntheticEvent} event The event source of the callback.
*/
onClose: o.func,
/**
* The ARIA role attribute of the element.
* @default 'alert'
*/
role: o.string,
/**
* The severity of the alert. This defines the color and icon used.
* @default 'success'
*/
severity: o.oneOfType([o.oneOf(["error", "info", "success", "warning"]), o.string]),
/**
* The props used for each slot inside.
* @default {}
*/
slotProps: o.shape({
action: o.oneOfType([o.func, o.object]),
closeButton: o.oneOfType([o.func, o.object]),
closeIcon: o.oneOfType([o.func, o.object]),
icon: o.oneOfType([o.func, o.object]),
message: o.oneOfType([o.func, o.object]),
root: o.oneOfType([o.func, o.object])
}),
/**
* The components used for each slot inside.
* @default {}
*/
slots: o.shape({
action: o.elementType,
closeButton: o.elementType,
closeIcon: o.elementType,
icon: o.elementType,
message: o.elementType,
root: 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 variant to use.
* @default 'standard'
*/
variant: o.oneOfType([o.oneOf(["filled", "outlined", "standard"]), o.string])
});
export {
go as A
};