@cgi-learning-hub/ui
Version:
@cgi-learning-hub/ui is an open-source React component library that implements UI for HUB's features
420 lines (419 loc) • 13.8 kB
JavaScript
import { P as e } from "./index-B9vkf41S.js";
import { u as K } from "./useTheme-0AkY41zn.js";
import * as w from "react";
import { H as Q, Q as Y } from "./generateUtilityClasses-B_xKAflz.js";
import { jsx as J } from "react/jsx-runtime";
import { s as X, c as Z, g as ee } from "./composeClasses-BskurlZX.js";
import { u as ne } from "./useTheme-DSA6Ir8k.js";
import { e as re } from "./extendSxProp-DGsHTtAe.js";
import { u as oe } from "./useThemeProps-CAonvyKa.js";
import { s as te, u as se } from "./DefaultPropsProvider-BrmlvPWg.js";
function ie(n, r) {
var o, t, s;
return /* @__PURE__ */ w.isValidElement(n) && r.indexOf(
// For server components `muiName` is available in element.type._payload.value.muiName
// relevant info - https://github.com/facebook/react/blob/2807d781a08db8e9873687fccc25c0f12b4fb3d4/packages/react/src/ReactLazy.js#L45
// eslint-disable-next-line no-underscore-dangle
n.type.muiName ?? ((s = (t = (o = n.type) == null ? void 0 : o._payload) == null ? void 0 : t.value) == null ? void 0 : s.muiName)
) !== -1;
}
const ce = (n, r) => n.filter((o) => r.includes(o)), T = (n, r, o) => {
const t = n.keys[0];
Array.isArray(r) ? r.forEach((s, i) => {
o((c, y) => {
i <= n.keys.length - 1 && (i === 0 ? Object.assign(c, y) : c[n.up(n.keys[i])] = y);
}, s);
}) : r && typeof r == "object" ? (Object.keys(r).length > n.keys.length ? n.keys : ce(n.keys, Object.keys(r))).forEach((i) => {
if (n.keys.includes(i)) {
const c = r[i];
c !== void 0 && o((y, d) => {
t === i ? Object.assign(y, d) : y[n.up(i)] = d;
}, c);
}
}) : (typeof r == "number" || typeof r == "string") && o((s, i) => {
Object.assign(s, i);
}, r);
};
function h(n) {
return `--Grid-${n}Spacing`;
}
function S(n) {
return `--Grid-parent-${n}Spacing`;
}
const C = "--Grid-columns", O = "--Grid-parent-columns", ae = ({
theme: n,
ownerState: r
}) => {
const o = {};
return T(n.breakpoints, r.size, (t, s) => {
let i = {};
s === "grow" && (i = {
flexBasis: 0,
flexGrow: 1,
maxWidth: "100%"
}), s === "auto" && (i = {
flexBasis: "auto",
flexGrow: 0,
flexShrink: 0,
maxWidth: "none",
width: "auto"
}), typeof s == "number" && (i = {
flexGrow: 0,
flexBasis: "auto",
width: `calc(100% * ${s} / var(${O}) - (var(${O}) - ${s}) * (var(${S("column")}) / var(${O})))`
}), t(o, i);
}), o;
}, fe = ({
theme: n,
ownerState: r
}) => {
const o = {};
return T(n.breakpoints, r.offset, (t, s) => {
let i = {};
s === "auto" && (i = {
marginLeft: "auto"
}), typeof s == "number" && (i = {
marginLeft: s === 0 ? "0px" : `calc(100% * ${s} / var(${O}) + var(${S("column")}) * ${s} / var(${O}))`
}), t(o, i);
}), o;
}, ue = ({
theme: n,
ownerState: r
}) => {
if (!r.container)
return {};
const o = {
[C]: 12
};
return T(n.breakpoints, r.columns, (t, s) => {
const i = s ?? 12;
t(o, {
[C]: i,
"> *": {
[O]: i
}
});
}), o;
}, pe = ({
theme: n,
ownerState: r
}) => {
if (!r.container)
return {};
const o = {};
return T(n.breakpoints, r.rowSpacing, (t, s) => {
var c;
const i = typeof s == "string" ? s : (c = n.spacing) == null ? void 0 : c.call(n, s);
t(o, {
[h("row")]: i,
"> *": {
[S("row")]: i
}
});
}), o;
}, le = ({
theme: n,
ownerState: r
}) => {
if (!r.container)
return {};
const o = {};
return T(n.breakpoints, r.columnSpacing, (t, s) => {
var c;
const i = typeof s == "string" ? s : (c = n.spacing) == null ? void 0 : c.call(n, s);
t(o, {
[h("column")]: i,
"> *": {
[S("column")]: i
}
});
}), o;
}, me = ({
theme: n,
ownerState: r
}) => {
if (!r.container)
return {};
const o = {};
return T(n.breakpoints, r.direction, (t, s) => {
t(o, {
flexDirection: s
});
}), o;
}, ye = ({
ownerState: n
}) => ({
minWidth: 0,
boxSizing: "border-box",
...n.container && {
display: "flex",
flexWrap: "wrap",
...n.wrap && n.wrap !== "wrap" && {
flexWrap: n.wrap
},
gap: `var(${h("row")}) var(${h("column")})`
}
}), de = (n) => {
const r = [];
return Object.entries(n).forEach(([o, t]) => {
t !== !1 && t !== void 0 && r.push(`grid-${o}-${String(t)}`);
}), r;
}, ge = (n, r = "xs") => {
function o(t) {
return t === void 0 ? !1 : typeof t == "string" && !Number.isNaN(Number(t)) || typeof t == "number" && t > 0;
}
if (o(n))
return [`spacing-${r}-${String(n)}`];
if (typeof n == "object" && !Array.isArray(n)) {
const t = [];
return Object.entries(n).forEach(([s, i]) => {
o(i) && t.push(`spacing-${s}-${String(i)}`);
}), t;
}
return [];
}, be = (n) => n === void 0 ? [] : typeof n == "object" ? Object.entries(n).map(([r, o]) => `direction-${r}-${o}`) : [`direction-xs-${String(n)}`], Oe = (n) => ["item", "zeroMinWidth"].includes(n) ? `The \`${n}\` prop has been removed and is no longer necessary. You can safely remove it.` : `The \`${n}\` prop has been removed. See https://mui.com/material-ui/migration/upgrade-to-grid-v2/ for migration instructions.`, P = [];
function Te(n, r) {
const o = [];
n.item !== void 0 && (delete n.item, o.push("item")), n.zeroMinWidth !== void 0 && (delete n.zeroMinWidth, o.push("zeroMinWidth")), r.keys.forEach((t) => {
n[t] !== void 0 && (o.push(t), delete n[t]);
}), process.env.NODE_ENV !== "production" && o.forEach((t) => {
P.includes(t) || (P.push(t), console.warn(`MUI Grid: ${Oe(t)}
`));
});
}
const we = Y(), he = X("div", {
name: "MuiGrid",
slot: "Root"
});
function Se(n) {
return oe({
props: n,
name: "MuiGrid",
defaultTheme: we
});
}
function $e(n = {}) {
const {
// This will allow adding custom styled fn (for example for custom sx style function)
createStyledComponent: r = he,
useThemeProps: o = Se,
useTheme: t = ne,
componentName: s = "MuiGrid"
} = n, i = (p, a) => {
const {
container: m,
direction: f,
spacing: l,
wrap: u,
size: $
} = p, j = {
root: ["root", m && "container", u !== "wrap" && `wrap-xs-${String(u)}`, ...be(f), ...de($), ...m ? ge(l, a.breakpoints.keys[0]) : []]
};
return Z(j, (G) => ee(s, G), {});
};
function c(p, a, m = () => !0) {
const f = {};
return p === null || (Array.isArray(p) ? p.forEach((l, u) => {
l !== null && m(l) && a.keys[u] && (f[a.keys[u]] = l);
}) : typeof p == "object" ? Object.keys(p).forEach((l) => {
const u = p[l];
u != null && m(u) && (f[l] = u);
}) : f[a.keys[0]] = p), f;
}
const y = r(ue, le, pe, ae, me, ye, fe), d = /* @__PURE__ */ w.forwardRef(function(a, m) {
const f = t(), l = o(a), u = re(l);
Te(u, f.breakpoints);
const {
className: $,
children: j,
columns: G = 12,
container: E = !1,
component: M = "div",
direction: v = "row",
wrap: W = "wrap",
size: D = {},
offset: _ = {},
spacing: x = 0,
rowSpacing: R = x,
columnSpacing: A = x,
unstable_level: b = 0,
...B
} = u, V = c(D, f.breakpoints, (g) => g !== !1), L = c(_, f.breakpoints), q = a.columns ?? (b ? void 0 : G), U = a.spacing ?? (b ? void 0 : x), F = a.rowSpacing ?? a.spacing ?? (b ? void 0 : R), H = a.columnSpacing ?? a.spacing ?? (b ? void 0 : A), N = {
...u,
level: b,
columns: q,
container: E,
direction: v,
wrap: W,
spacing: U,
rowSpacing: F,
columnSpacing: H,
size: V,
offset: L
}, I = i(N, f);
return /* @__PURE__ */ J(y, {
ref: m,
as: M,
ownerState: N,
className: Q(I.root, $),
...B,
children: w.Children.map(j, (g) => {
var k;
return /* @__PURE__ */ w.isValidElement(g) && ie(g, ["Grid"]) && E && g.props.container ? /* @__PURE__ */ w.cloneElement(g, {
unstable_level: ((k = g.props) == null ? void 0 : k.unstable_level) ?? b + 1
}) : g;
})
});
});
return process.env.NODE_ENV !== "production" && (d.propTypes = {
children: e.node,
className: e.string,
columns: e.oneOfType([e.arrayOf(e.number), e.number, e.object]),
columnSpacing: e.oneOfType([e.arrayOf(e.oneOfType([e.number, e.string])), e.number, e.object, e.string]),
component: e.elementType,
container: e.bool,
direction: e.oneOfType([e.oneOf(["column-reverse", "column", "row-reverse", "row"]), e.arrayOf(e.oneOf(["column-reverse", "column", "row-reverse", "row"])), e.object]),
offset: e.oneOfType([e.string, e.number, e.arrayOf(e.oneOfType([e.string, e.number])), e.object]),
rowSpacing: e.oneOfType([e.arrayOf(e.oneOfType([e.number, e.string])), e.number, e.object, e.string]),
size: e.oneOfType([e.string, e.bool, e.number, e.arrayOf(e.oneOfType([e.string, e.bool, e.number])), e.object]),
spacing: e.oneOfType([e.arrayOf(e.oneOfType([e.number, e.string])), e.number, e.object, e.string]),
sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object]),
wrap: e.oneOf(["nowrap", "wrap-reverse", "wrap"])
}), d.muiName = "Grid", d;
}
function je(n, r) {
if (process.env.NODE_ENV === "production")
return () => () => null;
const o = r ? {
...r.propTypes
} : null;
return (s) => (i, c, y, d, p, ...a) => {
const m = p || c, f = o == null ? void 0 : o[m];
if (f) {
const l = f(i, c, y, d, p, ...a);
if (l)
return l;
}
return typeof i[c] < "u" && !i[s] ? new Error(`The prop \`${m}\` of \`${n}\` can only be used together with the \`${s}\` prop.`) : null;
};
}
const z = $e({
createStyledComponent: te("div", {
name: "MuiGrid",
slot: "Root",
overridesResolver: (n, r) => {
const {
ownerState: o
} = n;
return [r.root, o.container && r.container];
}
}),
componentName: "MuiGrid",
useThemeProps: (n) => se({
props: n,
name: "MuiGrid"
}),
useTheme: K
});
process.env.NODE_ENV !== "production" && (z.propTypes = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* The content of the component.
*/
children: e.node,
/**
* The number of columns.
* @default 12
*/
columns: e.oneOfType([e.arrayOf(e.number), e.number, e.object]),
/**
* Defines the horizontal space between the type `item` components.
* It overrides the value of the `spacing` prop.
*/
columnSpacing: e.oneOfType([e.arrayOf(e.oneOfType([e.number, e.string])), e.number, e.object, e.string]),
/**
* If `true`, the component will have the flex *container* behavior.
* You should be wrapping *items* with a *container*.
* @default false
*/
container: e.bool,
/**
* Defines the `flex-direction` style property.
* It is applied for all screen sizes.
* @default 'row'
*/
direction: e.oneOfType([e.oneOf(["column-reverse", "column", "row-reverse", "row"]), e.arrayOf(e.oneOf(["column-reverse", "column", "row-reverse", "row"])), e.object]),
/**
* Defines the offset value for the type `item` components.
*/
offset: e.oneOfType([e.string, e.number, e.arrayOf(e.oneOfType([e.string, e.number])), e.object]),
/**
* Defines the vertical space between the type `item` components.
* It overrides the value of the `spacing` prop.
*/
rowSpacing: e.oneOfType([e.arrayOf(e.oneOfType([e.number, e.string])), e.number, e.object, e.string]),
/**
* Defines the size of the the type `item` components.
*/
size: e.oneOfType([e.string, e.bool, e.number, e.arrayOf(e.oneOfType([e.string, e.bool, e.number])), e.object]),
/**
* Defines the space between the type `item` components.
* It can only be used on a type `container` component.
* @default 0
*/
spacing: e.oneOfType([e.arrayOf(e.oneOfType([e.number, e.string])), e.number, e.object, e.string]),
/**
* @ignore
*/
sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object]),
/**
* @internal
* The level of the grid starts from `0` and increases when the grid nests
* inside another grid. Nesting is defined as a container Grid being a direct
* child of a container Grid.
*
* ```js
* <Grid container> // level 0
* <Grid container> // level 1
* <Grid container> // level 2
* ```
*
* Only consecutive grid is considered nesting. A grid container will start at
* `0` if there are non-Grid container element above it.
*
* ```js
* <Grid container> // level 0
* <div>
* <Grid container> // level 0
* ```
*
* ```js
* <Grid container> // level 0
* <Grid>
* <Grid container> // level 0
* ```
*/
unstable_level: e.number,
/**
* Defines the `flex-wrap` style property.
* It's applied for all screen sizes.
* @default 'wrap'
*/
wrap: e.oneOf(["nowrap", "wrap-reverse", "wrap"])
});
if (process.env.NODE_ENV !== "production") {
const n = z, r = je("Grid", n);
n.propTypes = {
// eslint-disable-next-line react/forbid-foreign-prop-types
...n.propTypes,
direction: r("container"),
spacing: r("container"),
wrap: r("container")
};
}
export {
z as G
};