@cgi-learning-hub/ui
Version:
@cgi-learning-hub/ui is an open-source React component library that implements UI for HUB's features
412 lines (411 loc) • 13.3 kB
JavaScript
import { P as e } from "./index-Sy88PpwE.js";
import { u as K } from "./useTheme-XJ9sFCWX.js";
import * as w from "react";
import { H as Q, G as Y, Q as J } from "./identifier-PWESmBq6.js";
import { jsx as X } from "react/jsx-runtime";
import { s as Z } from "./styled-C7gyRDlj.js";
import { u as ee } from "./useTheme--i9fxE_A.js";
import { e as ne } from "./extendSxProp-CesAxox9.js";
import { i as re } from "./isMuiElement-DnSE4qG4.js";
import { u as oe } from "./useThemeProps-B4VFkcP0.js";
import { c as te, s as se, u as ie } from "./DefaultPropsProvider-DqazQPtr.js";
const ce = (n, r) => n.filter((o) => r.includes(o)), T = (n, r, o) => {
const t = n.keys[0];
Array.isArray(r) ? r.forEach((i, s) => {
o((c, y) => {
s <= n.keys.length - 1 && (s === 0 ? Object.assign(c, y) : c[n.up(n.keys[s])] = y);
}, i);
}) : r && typeof r == "object" ? (Object.keys(r).length > n.keys.length ? n.keys : ce(n.keys, Object.keys(r))).forEach((s) => {
if (n.keys.includes(s)) {
const c = r[s];
c !== void 0 && o((y, d) => {
t === s ? Object.assign(y, d) : y[n.up(s)] = d;
}, c);
}
}) : (typeof r == "number" || typeof r == "string") && o((i, s) => {
Object.assign(i, s);
}, 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, i) => {
let s = {};
i === "grow" && (s = {
flexBasis: 0,
flexGrow: 1,
maxWidth: "100%"
}), i === "auto" && (s = {
flexBasis: "auto",
flexGrow: 0,
flexShrink: 0,
maxWidth: "none",
width: "auto"
}), typeof i == "number" && (s = {
flexGrow: 0,
flexBasis: "auto",
width: `calc(100% * ${i} / var(${O}) - (var(${O}) - ${i}) * (var(${S("column")}) / var(${O})))`
}), t(o, s);
}), o;
}, fe = ({
theme: n,
ownerState: r
}) => {
const o = {};
return T(n.breakpoints, r.offset, (t, i) => {
let s = {};
i === "auto" && (s = {
marginLeft: "auto"
}), typeof i == "number" && (s = {
marginLeft: i === 0 ? "0px" : `calc(100% * ${i} / var(${O}) + var(${S("column")}) * ${i} / var(${O}))`
}), t(o, s);
}), o;
}, ue = ({
theme: n,
ownerState: r
}) => {
if (!r.container)
return {};
const o = {
[C]: 12
};
return T(n.breakpoints, r.columns, (t, i) => {
const s = i ?? 12;
t(o, {
[C]: s,
"> *": {
[O]: s
}
});
}), o;
}, pe = ({
theme: n,
ownerState: r
}) => {
if (!r.container)
return {};
const o = {};
return T(n.breakpoints, r.rowSpacing, (t, i) => {
var c;
const s = typeof i == "string" ? i : (c = n.spacing) == null ? void 0 : c.call(n, i);
t(o, {
[h("row")]: s,
"> *": {
[S("row")]: s
}
});
}), o;
}, le = ({
theme: n,
ownerState: r
}) => {
if (!r.container)
return {};
const o = {};
return T(n.breakpoints, r.columnSpacing, (t, i) => {
var c;
const s = typeof i == "string" ? i : (c = n.spacing) == null ? void 0 : c.call(n, i);
t(o, {
[h("column")]: s,
"> *": {
[S("column")]: s
}
});
}), o;
}, me = ({
theme: n,
ownerState: r
}) => {
if (!r.container)
return {};
const o = {};
return T(n.breakpoints, r.direction, (t, i) => {
t(o, {
flexDirection: i
});
}), 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(([i, s]) => {
o(s) && t.push(`spacing-${i}-${String(s)}`);
}), 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 = J(), he = Z("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 = ee,
componentName: i = "MuiGrid"
} = n, s = (p, a) => {
const {
container: m,
direction: f,
spacing: l,
wrap: u,
size: $
} = p, G = {
root: ["root", m && "container", u !== "wrap" && `wrap-xs-${String(u)}`, ...be(f), ...de($), ...m ? ge(l, a.breakpoints.keys[0]) : []]
};
return te(G, (j) => Y(i, j), {});
};
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 = ne(l);
Te(u, f.breakpoints);
const {
className: $,
children: G,
columns: j = 12,
container: E = !1,
component: M = "div",
direction: W = "row",
wrap: v = "wrap",
size: D = {},
offset: R = {},
spacing: x = 0,
rowSpacing: _ = x,
columnSpacing: A = x,
unstable_level: b = 0,
...B
} = u, V = c(D, f.breakpoints, (g) => g !== !1), L = c(R, f.breakpoints), q = a.columns ?? (b ? void 0 : j), U = a.spacing ?? (b ? void 0 : x), F = a.rowSpacing ?? a.spacing ?? (b ? void 0 : _), H = a.columnSpacing ?? a.spacing ?? (b ? void 0 : A), N = {
...u,
level: b,
columns: q,
container: E,
direction: W,
wrap: v,
spacing: U,
rowSpacing: F,
columnSpacing: H,
size: V,
offset: L
}, I = s(N, f);
return /* @__PURE__ */ X(y, {
ref: m,
as: M,
ownerState: N,
className: Q(I.root, $),
...B,
children: w.Children.map(G, (g) => {
var k;
return /* @__PURE__ */ w.isValidElement(g) && re(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 Ge(n, r) {
if (process.env.NODE_ENV === "production")
return () => () => null;
const o = r ? {
...r.propTypes
} : null;
return (i) => (s, c, y, d, p, ...a) => {
const m = p || c, f = o == null ? void 0 : o[m];
if (f) {
const l = f(s, c, y, d, p, ...a);
if (l)
return l;
}
return typeof s[c] < "u" && !s[i] ? new Error(`The prop \`${m}\` of \`${n}\` can only be used together with the \`${i}\` prop.`) : null;
};
}
const z = $e({
createStyledComponent: se("div", {
name: "MuiGrid",
slot: "Root",
overridesResolver: (n, r) => {
const {
ownerState: o
} = n;
return [r.root, o.container && r.container];
}
}),
componentName: "MuiGrid",
useThemeProps: (n) => ie({
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 = Ge("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
};