@cgi-learning-hub/ui
Version:
@cgi-learning-hub/ui is an open-source React component library that implements UI for HUB's features
409 lines (408 loc) • 11.3 kB
JavaScript
import * as l from "react";
import { P as e } from "./index-B9vkf41S.js";
import { F as P, G as B, H as V } from "./generateUtilityClasses-B_xKAflz.js";
import { a as Q, i as A } from "./utils-DWqc1kRF.js";
import { F as X, u as Y } from "./useFormControl-CatNKXAi.js";
import { jsx as D, jsxs as I } from "react/jsx-runtime";
import { u as z, s as x, c as _ } from "./DefaultPropsProvider-BrmlvPWg.js";
import { i as w } from "./isMuiElement-DnSE4qG4.js";
import { c as L } from "./capitalize-BHEX83JQ.js";
import { f as Z } from "./formControlState-vgaj2ksH.js";
import { m as H } from "./memoTheme-C-PaH-Cy.js";
import { c as ee } from "./createSimplePaletteValueFilter-B7--0ryQ.js";
function oe(o) {
return B("MuiFormControl", o);
}
const Se = P("MuiFormControl", ["root", "marginNone", "marginNormal", "marginDense", "fullWidth", "disabled"]), re = (o) => {
const {
classes: r,
margin: s,
fullWidth: a
} = o, t = {
root: ["root", s !== "none" && `margin${L(s)}`, a && "fullWidth"]
};
return _(t, oe, r);
}, se = x("div", {
name: "MuiFormControl",
slot: "Root",
overridesResolver: (o, r) => {
const {
ownerState: s
} = o;
return [r.root, r[`margin${L(s.margin)}`], s.fullWidth && r.fullWidth];
}
})({
display: "inline-flex",
flexDirection: "column",
position: "relative",
// Reset fieldset default style.
minWidth: 0,
padding: 0,
margin: 0,
border: 0,
verticalAlign: "top",
// Fix alignment issue on Safari.
variants: [{
props: {
margin: "normal"
},
style: {
marginTop: 16,
marginBottom: 8
}
}, {
props: {
margin: "dense"
},
style: {
marginTop: 8,
marginBottom: 4
}
}, {
props: {
fullWidth: !0
},
style: {
width: "100%"
}
}]
}), te = /* @__PURE__ */ l.forwardRef(function(r, s) {
const a = z({
props: r,
name: "MuiFormControl"
}), {
children: t,
className: f,
color: m = "primary",
component: d = "div",
disabled: i = !1,
error: y = !1,
focused: S,
fullWidth: g = !1,
hiddenLabel: F = !1,
margin: h = "none",
required: p = !1,
size: n = "medium",
variant: u = "outlined",
...C
} = a, M = {
...a,
color: m,
component: d,
disabled: i,
error: y,
fullWidth: g,
hiddenLabel: F,
margin: h,
required: p,
size: n,
variant: u
}, G = re(M), [q, J] = l.useState(() => {
let b = !1;
return t && l.Children.forEach(t, (c) => {
if (!w(c, ["Input", "Select"]))
return;
const U = w(c, ["Select"]) ? c.props.input : c;
U && Q(U.props) && (b = !0);
}), b;
}), [E, j] = l.useState(() => {
let b = !1;
return t && l.Children.forEach(t, (c) => {
w(c, ["Input", "Select"]) && (A(c.props, !0) || A(c.props.inputProps, !0)) && (b = !0);
}), b;
}), [R, O] = l.useState(!1);
i && R && O(!1);
const W = S !== void 0 && !i ? S : R;
let T;
const N = l.useRef(!1);
process.env.NODE_ENV !== "production" && (T = () => (N.current && console.error(["MUI: There are multiple `InputBase` components inside a FormControl.", "This creates visual inconsistencies, only use one `InputBase`."].join(`
`)), N.current = !0, () => {
N.current = !1;
}));
const k = l.useCallback(() => {
j(!0);
}, []), $ = l.useCallback(() => {
j(!1);
}, []), K = l.useMemo(() => ({
adornedStart: q,
setAdornedStart: J,
color: m,
disabled: i,
error: y,
filled: E,
focused: W,
fullWidth: g,
hiddenLabel: F,
size: n,
onBlur: () => {
O(!1);
},
onFocus: () => {
O(!0);
},
onEmpty: $,
onFilled: k,
registerEffect: T,
required: p,
variant: u
}), [q, m, i, y, E, W, g, F, T, $, k, p, n, u]);
return /* @__PURE__ */ D(X.Provider, {
value: K,
children: /* @__PURE__ */ D(se, {
as: d,
ownerState: M,
className: V(G.root, f),
ref: s,
...C,
children: t
})
});
});
process.env.NODE_ENV !== "production" && (te.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 color of the component.
* 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).
* @default 'primary'
*/
color: e.oneOfType([e.oneOf(["primary", "secondary", "error", "info", "success", "warning"]), e.string]),
/**
* The component used for the root node.
* Either a string to use a HTML element or a component.
*/
component: e.elementType,
/**
* If `true`, the label, input and helper text should be displayed in a disabled state.
* @default false
*/
disabled: e.bool,
/**
* If `true`, the label is displayed in an error state.
* @default false
*/
error: e.bool,
/**
* If `true`, the component is displayed in focused state.
*/
focused: e.bool,
/**
* If `true`, the component will take up the full width of its container.
* @default false
*/
fullWidth: e.bool,
/**
* If `true`, the label is hidden.
* This is used to increase density for a `FilledInput`.
* Be sure to add `aria-label` to the `input` element.
* @default false
*/
hiddenLabel: e.bool,
/**
* If `dense` or `normal`, will adjust vertical spacing of this and contained components.
* @default 'none'
*/
margin: e.oneOf(["dense", "none", "normal"]),
/**
* If `true`, the label will indicate that the `input` is required.
* @default false
*/
required: e.bool,
/**
* The size of the component.
* @default 'medium'
*/
size: e.oneOfType([e.oneOf(["medium", "small"]), e.string]),
/**
* 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 variant to use.
* @default 'outlined'
*/
variant: e.oneOf(["filled", "outlined", "standard"])
});
function ne(o) {
return B("MuiFormLabel", o);
}
const v = P("MuiFormLabel", ["root", "colorSecondary", "focused", "disabled", "error", "filled", "required", "asterisk"]), le = (o) => {
const {
classes: r,
color: s,
focused: a,
disabled: t,
error: f,
filled: m,
required: d
} = o, i = {
root: ["root", `color${L(s)}`, t && "disabled", f && "error", m && "filled", a && "focused", d && "required"],
asterisk: ["asterisk", f && "error"]
};
return _(i, ne, r);
}, ae = x("label", {
name: "MuiFormLabel",
slot: "Root",
overridesResolver: (o, r) => {
const {
ownerState: s
} = o;
return [r.root, s.color === "secondary" && r.colorSecondary, s.filled && r.filled];
}
})(H(({
theme: o
}) => ({
color: (o.vars || o).palette.text.secondary,
...o.typography.body1,
lineHeight: "1.4375em",
padding: 0,
position: "relative",
variants: [...Object.entries(o.palette).filter(ee()).map(([r]) => ({
props: {
color: r
},
style: {
[`&.${v.focused}`]: {
color: (o.vars || o).palette[r].main
}
}
})), {
props: {},
style: {
[`&.${v.disabled}`]: {
color: (o.vars || o).palette.text.disabled
},
[`&.${v.error}`]: {
color: (o.vars || o).palette.error.main
}
}
}]
}))), ie = x("span", {
name: "MuiFormLabel",
slot: "Asterisk"
})(H(({
theme: o
}) => ({
[`&.${v.error}`]: {
color: (o.vars || o).palette.error.main
}
}))), ce = /* @__PURE__ */ l.forwardRef(function(r, s) {
const a = z({
props: r,
name: "MuiFormLabel"
}), {
children: t,
className: f,
color: m,
component: d = "label",
disabled: i,
error: y,
filled: S,
focused: g,
required: F,
...h
} = a, p = Y(), n = Z({
props: a,
muiFormControl: p,
states: ["color", "required", "focused", "disabled", "error", "filled"]
}), u = {
...a,
color: n.color || "primary",
component: d,
disabled: n.disabled,
error: n.error,
filled: n.filled,
focused: n.focused,
required: n.required
}, C = le(u);
return /* @__PURE__ */ I(ae, {
as: d,
ownerState: u,
className: V(C.root, f),
ref: s,
...h,
children: [t, n.required && /* @__PURE__ */ I(ie, {
ownerState: u,
"aria-hidden": !0,
className: C.asterisk,
children: [" ", "*"]
})]
});
});
process.env.NODE_ENV !== "production" && (ce.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 color of the component.
* 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: e.oneOfType([e.oneOf(["error", "info", "primary", "secondary", "success", "warning"]), e.string]),
/**
* The component used for the root node.
* Either a string to use a HTML element or a component.
*/
component: e.elementType,
/**
* If `true`, the label should be displayed in a disabled state.
*/
disabled: e.bool,
/**
* If `true`, the label is displayed in an error state.
*/
error: e.bool,
/**
* If `true`, the label should use filled classes key.
*/
filled: e.bool,
/**
* If `true`, the input of this label is focused (used by `FormGroup` components).
*/
focused: e.bool,
/**
* If `true`, the label will indicate that the `input` is required.
*/
required: e.bool,
/**
* 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])
});
export {
te as F,
ce as a,
v as b,
ae as c,
ne as d,
Se as f,
oe as g
};