@cgi-learning-hub/ui
Version:
@cgi-learning-hub/ui is an open-source React component library that implements UI for HUB's features
612 lines (611 loc) • 17.1 kB
JavaScript
import * as y from "react";
import { P as e } from "./index-Sy88PpwE.js";
import { F as K, G as W, H as M, K as h, n as G } from "./identifier-PWESmBq6.js";
import { m as w } from "./memoTheme-DAFDflPY.js";
import { f as re } from "./formControlState-vgaj2ksH.js";
import { u as Z } from "./useSlot-BzdKwDQ5.js";
import { jsx as d, jsxs as O } from "react/jsx-runtime";
import { u as J, s as v, c as Q, r as X } from "./DefaultPropsProvider-DqazQPtr.js";
import { u as Y } from "./useFormControl-CatNKXAi.js";
import { T as _ } from "./Typography-Dy8r_tT2.js";
import { r as ee } from "./refType-Dp7CJc86.js";
import { S as ae } from "./SwitchBase-DZV8S81Z.js";
import { c as oe } from "./createSvgIcon-B1E6Wo8z.js";
import { c as A } from "./createSimplePaletteValueFilter-B7--0ryQ.js";
import { c as se } from "./createChainedFunction-C0nujS3O.js";
function ne(o) {
return W("MuiFormControlLabel", o);
}
const S = K("MuiFormControlLabel", ["root", "labelPlacementStart", "labelPlacementTop", "labelPlacementBottom", "disabled", "label", "error", "required", "asterisk"]), le = (o) => {
const {
classes: t,
disabled: r,
labelPlacement: a,
error: s,
required: g
} = o, R = {
root: ["root", r && "disabled", `labelPlacement${h(a)}`, s && "error", g && "required"],
label: ["label", r && "disabled"],
asterisk: ["asterisk", s && "error"]
};
return Q(R, ne, t);
}, ie = v("label", {
name: "MuiFormControlLabel",
slot: "Root",
overridesResolver: (o, t) => {
const {
ownerState: r
} = o;
return [{
[`& .${S.label}`]: t.label
}, t.root, t[`labelPlacement${h(r.labelPlacement)}`]];
}
})(w(({
theme: o
}) => ({
display: "inline-flex",
alignItems: "center",
cursor: "pointer",
// For correct alignment with the text.
verticalAlign: "middle",
WebkitTapHighlightColor: "transparent",
marginLeft: -11,
marginRight: 16,
// used for row presentation of radio/checkbox
[`&.${S.disabled}`]: {
cursor: "default"
},
[`& .${S.label}`]: {
[`&.${S.disabled}`]: {
color: (o.vars || o).palette.text.disabled
}
},
variants: [{
props: {
labelPlacement: "start"
},
style: {
flexDirection: "row-reverse",
marginRight: -11
}
}, {
props: {
labelPlacement: "top"
},
style: {
flexDirection: "column-reverse"
}
}, {
props: {
labelPlacement: "bottom"
},
style: {
flexDirection: "column"
}
}, {
props: ({
labelPlacement: t
}) => t === "start" || t === "top" || t === "bottom",
style: {
marginLeft: 16
// used for row presentation of radio/checkbox
}
}]
}))), ce = v("span", {
name: "MuiFormControlLabel",
slot: "Asterisk"
})(w(({
theme: o
}) => ({
[`&.${S.error}`]: {
color: (o.vars || o).palette.error.main
}
}))), pe = /* @__PURE__ */ y.forwardRef(function(t, r) {
const a = J({
props: t,
name: "MuiFormControlLabel"
}), {
checked: s,
className: g,
componentsProps: R = {},
control: u,
disabled: N,
disableTypography: x,
inputRef: k,
label: F,
labelPlacement: z = "end",
name: U,
onChange: $,
required: T,
slots: j = {},
slotProps: I = {},
value: E,
...f
} = a, c = Y(), P = N ?? u.props.disabled ?? (c == null ? void 0 : c.disabled), n = T ?? u.props.required, C = {
disabled: P,
required: n
};
["checked", "name", "onChange", "value", "inputRef"].forEach((b) => {
typeof u.props[b] > "u" && typeof a[b] < "u" && (C[b] = a[b]);
});
const L = re({
props: a,
muiFormControl: c,
states: ["error"]
}), p = {
...a,
disabled: P,
labelPlacement: z,
required: n,
error: L.error
}, m = le(p), q = {
slots: j,
slotProps: {
...R,
...I
}
}, [B, l] = Z("typography", {
elementType: _,
externalForwardedProps: q,
ownerState: p
});
let i = F;
return i != null && i.type !== _ && !x && (i = /* @__PURE__ */ d(B, {
component: "span",
...l,
className: M(m.label, l == null ? void 0 : l.className),
children: i
})), /* @__PURE__ */ O(ie, {
className: M(m.root, g),
ownerState: p,
ref: r,
...f,
children: [/* @__PURE__ */ y.cloneElement(u, C), n ? /* @__PURE__ */ O("div", {
children: [i, /* @__PURE__ */ O(ce, {
ownerState: p,
"aria-hidden": !0,
className: m.asterisk,
children: [" ", "*"]
})]
}) : i]
});
});
process.env.NODE_ENV !== "production" && (pe.propTypes = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the d.ts file and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* If `true`, the component appears selected.
*/
checked: e.bool,
/**
* Override or extend the styles applied to the component.
*/
classes: e.object,
/**
* @ignore
*/
className: e.string,
/**
* The props used for each slot inside.
* @default {}
* @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.
*/
componentsProps: e.shape({
typography: e.object
}),
/**
* A control element. For instance, it can be a `Radio`, a `Switch` or a `Checkbox`.
*/
control: e.element.isRequired,
/**
* If `true`, the control is disabled.
*/
disabled: e.bool,
/**
* If `true`, the label is rendered as it is passed without an additional typography node.
*/
disableTypography: e.bool,
/**
* Pass a ref to the `input` element.
*/
inputRef: ee,
/**
* A text or an element to be used in an enclosing label element.
*/
label: e.node,
/**
* The position of the label.
* @default 'end'
*/
labelPlacement: e.oneOf(["bottom", "end", "start", "top"]),
/**
* @ignore
*/
name: e.string,
/**
* Callback fired when the state is changed.
*
* @param {React.SyntheticEvent} event The event source of the callback.
* You can pull out the new checked state by accessing `event.target.checked` (boolean).
*/
onChange: e.func,
/**
* If `true`, the label will indicate that the `input` is required.
*/
required: e.bool,
/**
* The props used for each slot inside.
* @default {}
*/
slotProps: e.shape({
typography: e.oneOfType([e.func, e.object])
}),
/**
* The components used for each slot inside.
* @default {}
*/
slots: e.shape({
typography: 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 value of the component.
*/
value: e.any
});
const de = oe(/* @__PURE__ */ d("path", {
d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
}), "RadioButtonUnchecked"), ue = oe(/* @__PURE__ */ d("path", {
d: "M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
}), "RadioButtonChecked"), fe = v("span", {
shouldForwardProp: X
})({
position: "relative",
display: "flex"
}), me = v(de)({
// Scale applied to prevent dot misalignment in Safari
transform: "scale(1)"
}), be = v(ue)(w(({
theme: o
}) => ({
left: 0,
position: "absolute",
transform: "scale(0)",
transition: o.transitions.create("transform", {
easing: o.transitions.easing.easeIn,
duration: o.transitions.duration.shortest
}),
variants: [{
props: {
checked: !0
},
style: {
transform: "scale(1)",
transition: o.transitions.create("transform", {
easing: o.transitions.easing.easeOut,
duration: o.transitions.duration.shortest
})
}
}]
})));
function D(o) {
const {
checked: t = !1,
classes: r = {},
fontSize: a
} = o, s = {
...o,
checked: t
};
return /* @__PURE__ */ O(fe, {
className: r.root,
ownerState: s,
children: [/* @__PURE__ */ d(me, {
fontSize: a,
className: r.background,
ownerState: s
}), /* @__PURE__ */ d(be, {
fontSize: a,
className: r.dot,
ownerState: s
})]
});
}
process.env.NODE_ENV !== "production" && (D.propTypes = {
/**
* If `true`, the component is checked.
*/
checked: e.bool,
/**
* Override or extend the styles applied to the component.
*/
classes: e.object,
/**
* The size of the component.
* `small` is equivalent to the dense radio styling.
*/
fontSize: e.oneOf(["small", "medium"])
});
const te = /* @__PURE__ */ y.createContext(void 0);
process.env.NODE_ENV !== "production" && (te.displayName = "RadioGroupContext");
function ye() {
return y.useContext(te);
}
function ge(o) {
return W("MuiRadio", o);
}
const H = K("MuiRadio", ["root", "checked", "disabled", "colorPrimary", "colorSecondary", "sizeSmall"]), Ce = (o) => {
const {
classes: t,
color: r,
size: a
} = o, s = {
root: ["root", `color${h(r)}`, a !== "medium" && `size${h(a)}`]
};
return {
...t,
...Q(s, ge, t)
};
}, he = v(ae, {
shouldForwardProp: (o) => X(o) || o === "classes",
name: "MuiRadio",
slot: "Root",
overridesResolver: (o, t) => {
const {
ownerState: r
} = o;
return [t.root, r.size !== "medium" && t[`size${h(r.size)}`], t[`color${h(r.color)}`]];
}
})(w(({
theme: o
}) => ({
color: (o.vars || o).palette.text.secondary,
[`&.${H.disabled}`]: {
color: (o.vars || o).palette.action.disabled
},
variants: [{
props: {
color: "default",
disabled: !1,
disableRipple: !1
},
style: {
"&:hover": {
backgroundColor: o.vars ? `rgba(${o.vars.palette.action.activeChannel} / ${o.vars.palette.action.hoverOpacity})` : G(o.palette.action.active, o.palette.action.hoverOpacity)
}
}
}, ...Object.entries(o.palette).filter(A()).map(([t]) => ({
props: {
color: t,
disabled: !1,
disableRipple: !1
},
style: {
"&:hover": {
backgroundColor: o.vars ? `rgba(${o.vars.palette[t].mainChannel} / ${o.vars.palette.action.hoverOpacity})` : G(o.palette[t].main, o.palette.action.hoverOpacity)
}
}
})), ...Object.entries(o.palette).filter(A()).map(([t]) => ({
props: {
color: t,
disabled: !1
},
style: {
[`&.${H.checked}`]: {
color: (o.vars || o).palette[t].main
}
}
})), {
// Should be last to override other colors
props: {
disableRipple: !1
},
style: {
// Reset on touch devices, it doesn't add specificity
"&:hover": {
"@media (hover: none)": {
backgroundColor: "transparent"
}
}
}
}]
})));
function ve(o, t) {
return typeof t == "object" && t !== null ? o === t : String(o) === String(t);
}
const Re = /* @__PURE__ */ d(D, {
checked: !0
}), Pe = /* @__PURE__ */ d(D, {}), Se = /* @__PURE__ */ y.forwardRef(function(t, r) {
const a = J({
props: t,
name: "MuiRadio"
}), {
checked: s,
checkedIcon: g = Re,
color: R = "primary",
icon: u = Pe,
name: N,
onChange: x,
size: k = "medium",
className: F,
disabled: z,
disableRipple: U = !1,
slots: $ = {},
slotProps: T = {},
inputProps: j,
...I
} = a, E = Y();
let f = z;
E && typeof f > "u" && (f = E.disabled), f ?? (f = !1);
const c = {
...a,
disabled: f,
disableRipple: U,
color: R,
size: k
}, P = Ce(c), n = ye();
let C = s;
const L = se(x, n && n.onChange);
let p = N;
n && (typeof C > "u" && (C = ve(n.value, a.value)), typeof p > "u" && (p = n.name));
const m = T.input ?? j, [q, B] = Z("root", {
ref: r,
elementType: he,
className: M(P.root, F),
shouldForwardComponentProp: !0,
externalForwardedProps: {
slots: $,
slotProps: T,
...I
},
getSlotProps: (l) => ({
...l,
onChange: (i, ...b) => {
var V;
(V = l.onChange) == null || V.call(l, i, ...b), L(i, ...b);
}
}),
ownerState: c,
additionalProps: {
type: "radio",
icon: /* @__PURE__ */ y.cloneElement(u, {
fontSize: u.props.fontSize ?? k
}),
checkedIcon: /* @__PURE__ */ y.cloneElement(g, {
fontSize: g.props.fontSize ?? k
}),
disabled: f,
name: p,
checked: C,
slots: $,
slotProps: {
// Do not forward `slotProps.root` again because it's already handled by the `RootSlot` in this file.
input: typeof m == "function" ? m(c) : m
}
}
});
return /* @__PURE__ */ d(q, {
...B,
classes: P
});
});
process.env.NODE_ENV !== "production" && (Se.propTypes = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the d.ts file and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* If `true`, the component is checked.
*/
checked: e.bool,
/**
* The icon to display when the component is checked.
* @default <RadioButtonIcon checked />
*/
checkedIcon: 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(["default", "primary", "secondary", "error", "info", "success", "warning"]), e.string]),
/**
* If `true`, the component is disabled.
*/
disabled: e.bool,
/**
* If `true`, the ripple effect is disabled.
* @default false
*/
disableRipple: e.bool,
/**
* The icon to display when the component is unchecked.
* @default <RadioButtonIcon />
*/
icon: e.node,
/**
* The id of the `input` element.
*/
id: e.string,
/**
* [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#attributes) applied to the `input` element.
* @deprecated Use `slotProps.input` 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.
*/
inputProps: e.object,
/**
* Pass a ref to the `input` element.
* @deprecated Use `slotProps.input.ref` 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.
*/
inputRef: ee,
/**
* Name attribute of the `input` element.
*/
name: e.string,
/**
* Callback fired when the state is changed.
*
* @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
* You can pull out the new value by accessing `event.target.value` (string).
* You can pull out the new checked state by accessing `event.target.checked` (boolean).
*/
onChange: e.func,
/**
* If `true`, the `input` element is required.
* @default false
*/
required: e.bool,
/**
* The size of the component.
* `small` is equivalent to the dense radio styling.
* @default 'medium'
*/
size: e.oneOfType([e.oneOf(["medium", "small"]), e.string]),
/**
* The props used for each slot inside.
* @default {}
*/
slotProps: e.shape({
input: e.oneOfType([e.func, e.object]),
root: e.oneOfType([e.func, e.object])
}),
/**
* The components used for each slot inside.
* @default {}
*/
slots: e.shape({
input: e.elementType,
root: 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 value of the component. The DOM API casts this to a string.
*/
value: e.any
});
export {
pe as F,
Se as R,
ge as a,
te as b,
S as f,
ne as g,
H as r,
ye as u
};