@cgi-learning-hub/ui
Version:
@cgi-learning-hub/ui is an open-source React component library that implements UI for HUB's features
618 lines (617 loc) • 17.2 kB
JavaScript
import * as y from "react";
import { P as o } from "./index-B9vkf41S.js";
import { F as H, G as W, H as q } from "./generateUtilityClasses-B_xKAflz.js";
import { m as w } from "./memoTheme-C-PaH-Cy.js";
import { f as to } from "./formControlState-vgaj2ksH.js";
import { u as Z } from "./useSlot-BSkdRaZr.js";
import { jsx as d, jsxs as O } from "react/jsx-runtime";
import { u as J, s as R, c as K, r as Q } from "./DefaultPropsProvider-BrmlvPWg.js";
import { u as X } from "./useFormControl-CatNKXAi.js";
import { T as G } from "./Typography-Cr-aIusw.js";
import { c as h } from "./capitalize-BHEX83JQ.js";
import { r as Y } from "./refType-8hihVLUh.js";
import { S as ro } from "./SwitchBase-BWz31Ed6.js";
import { c as oo } from "./createSvgIcon-DFIM5PqN.js";
import { c as _ } from "./createSimplePaletteValueFilter-B7--0ryQ.js";
import { c as so } from "./createChainedFunction-C0nujS3O.js";
function ao(e) {
return W("MuiFormControlLabel", e);
}
const S = H("MuiFormControlLabel", ["root", "labelPlacementStart", "labelPlacementTop", "labelPlacementBottom", "disabled", "label", "error", "required", "asterisk"]), no = (e) => {
const {
classes: t,
disabled: r,
labelPlacement: s,
error: a,
required: g
} = e, P = {
root: ["root", r && "disabled", `labelPlacement${h(s)}`, a && "error", g && "required"],
label: ["label", r && "disabled"],
asterisk: ["asterisk", a && "error"]
};
return K(P, ao, t);
}, lo = R("label", {
name: "MuiFormControlLabel",
slot: "Root",
overridesResolver: (e, t) => {
const {
ownerState: r
} = e;
return [{
[`& .${S.label}`]: t.label
}, t.root, t[`labelPlacement${h(r.labelPlacement)}`]];
}
})(w(({
theme: e
}) => ({
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: (e.vars || e).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
}
}]
}))), io = R("span", {
name: "MuiFormControlLabel",
slot: "Asterisk"
})(w(({
theme: e
}) => ({
[`&.${S.error}`]: {
color: (e.vars || e).palette.error.main
}
}))), co = /* @__PURE__ */ y.forwardRef(function(t, r) {
const s = J({
props: t,
name: "MuiFormControlLabel"
}), {
checked: a,
className: g,
componentsProps: P = {},
control: u,
disabled: N,
disableTypography: x,
inputRef: k,
label: F,
labelPlacement: z = "end",
name: U,
onChange: I,
required: T,
slots: j = {},
slotProps: B = {},
value: M,
...f
} = s, c = X(), v = N ?? u.props.disabled ?? (c == null ? void 0 : c.disabled), n = T ?? u.props.required, C = {
disabled: v,
required: n
};
["checked", "name", "onChange", "value", "inputRef"].forEach((b) => {
typeof u.props[b] > "u" && typeof s[b] < "u" && (C[b] = s[b]);
});
const $ = to({
props: s,
muiFormControl: c,
states: ["error"]
}), p = {
...s,
disabled: v,
labelPlacement: z,
required: n,
error: $.error
}, m = no(p), E = {
slots: j,
slotProps: {
...P,
...B
}
}, [L, l] = Z("typography", {
elementType: G,
externalForwardedProps: E,
ownerState: p
});
let i = F;
return i != null && i.type !== G && !x && (i = /* @__PURE__ */ d(L, {
component: "span",
...l,
className: q(m.label, l == null ? void 0 : l.className),
children: i
})), /* @__PURE__ */ O(lo, {
className: q(m.root, g),
ownerState: p,
ref: r,
...f,
children: [/* @__PURE__ */ y.cloneElement(u, C), n ? /* @__PURE__ */ O("div", {
children: [i, /* @__PURE__ */ O(io, {
ownerState: p,
"aria-hidden": !0,
className: m.asterisk,
children: [" ", "*"]
})]
}) : i]
});
});
process.env.NODE_ENV !== "production" && (co.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: o.bool,
/**
* Override or extend the styles applied to the component.
*/
classes: o.object,
/**
* @ignore
*/
className: o.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: o.shape({
typography: o.object
}),
/**
* A control element. For instance, it can be a `Radio`, a `Switch` or a `Checkbox`.
*/
control: o.element.isRequired,
/**
* If `true`, the control is disabled.
*/
disabled: o.bool,
/**
* If `true`, the label is rendered as it is passed without an additional typography node.
*/
disableTypography: o.bool,
/**
* Pass a ref to the `input` element.
*/
inputRef: Y,
/**
* A text or an element to be used in an enclosing label element.
*/
label: o.node,
/**
* The position of the label.
* @default 'end'
*/
labelPlacement: o.oneOf(["bottom", "end", "start", "top"]),
/**
* @ignore
*/
name: o.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: o.func,
/**
* If `true`, the label will indicate that the `input` is required.
*/
required: o.bool,
/**
* The props used for each slot inside.
* @default {}
*/
slotProps: o.shape({
typography: o.oneOfType([o.func, o.object])
}),
/**
* The components used for each slot inside.
* @default {}
*/
slots: o.shape({
typography: 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 value of the component.
*/
value: o.any
});
const po = oo(/* @__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"), uo = oo(/* @__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"), fo = R("span", {
name: "MuiRadioButtonIcon",
shouldForwardProp: Q
})({
position: "relative",
display: "flex"
}), mo = R(po, {
name: "MuiRadioButtonIcon"
})({
// Scale applied to prevent dot misalignment in Safari
transform: "scale(1)"
}), bo = R(uo, {
name: "MuiRadioButtonIcon"
})(w(({
theme: e
}) => ({
left: 0,
position: "absolute",
transform: "scale(0)",
transition: e.transitions.create("transform", {
easing: e.transitions.easing.easeIn,
duration: e.transitions.duration.shortest
}),
variants: [{
props: {
checked: !0
},
style: {
transform: "scale(1)",
transition: e.transitions.create("transform", {
easing: e.transitions.easing.easeOut,
duration: e.transitions.duration.shortest
})
}
}]
})));
function D(e) {
const {
checked: t = !1,
classes: r = {},
fontSize: s
} = e, a = {
...e,
checked: t
};
return /* @__PURE__ */ O(fo, {
className: r.root,
ownerState: a,
children: [/* @__PURE__ */ d(mo, {
fontSize: s,
className: r.background,
ownerState: a
}), /* @__PURE__ */ d(bo, {
fontSize: s,
className: r.dot,
ownerState: a
})]
});
}
process.env.NODE_ENV !== "production" && (D.propTypes = {
/**
* If `true`, the component is checked.
*/
checked: o.bool,
/**
* Override or extend the styles applied to the component.
*/
classes: o.object,
/**
* The size of the component.
* `small` is equivalent to the dense radio styling.
*/
fontSize: o.oneOf(["small", "medium"])
});
const eo = /* @__PURE__ */ y.createContext(void 0);
process.env.NODE_ENV !== "production" && (eo.displayName = "RadioGroupContext");
function yo() {
return y.useContext(eo);
}
function go(e) {
return W("MuiRadio", e);
}
const A = H("MuiRadio", ["root", "checked", "disabled", "colorPrimary", "colorSecondary", "sizeSmall"]), Co = (e) => {
const {
classes: t,
color: r,
size: s
} = e, a = {
root: ["root", `color${h(r)}`, s !== "medium" && `size${h(s)}`]
};
return {
...t,
...K(a, go, t)
};
}, ho = R(ro, {
shouldForwardProp: (e) => Q(e) || e === "classes",
name: "MuiRadio",
slot: "Root",
overridesResolver: (e, t) => {
const {
ownerState: r
} = e;
return [t.root, r.size !== "medium" && t[`size${h(r.size)}`], t[`color${h(r.color)}`]];
}
})(w(({
theme: e
}) => ({
color: (e.vars || e).palette.text.secondary,
[`&.${A.disabled}`]: {
color: (e.vars || e).palette.action.disabled
},
variants: [{
props: {
color: "default",
disabled: !1,
disableRipple: !1
},
style: {
"&:hover": {
backgroundColor: e.alpha((e.vars || e).palette.action.active, (e.vars || e).palette.action.hoverOpacity)
}
}
}, ...Object.entries(e.palette).filter(_()).map(([t]) => ({
props: {
color: t,
disabled: !1,
disableRipple: !1
},
style: {
"&:hover": {
backgroundColor: e.alpha((e.vars || e).palette[t].main, (e.vars || e).palette.action.hoverOpacity)
}
}
})), ...Object.entries(e.palette).filter(_()).map(([t]) => ({
props: {
color: t,
disabled: !1
},
style: {
[`&.${A.checked}`]: {
color: (e.vars || e).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 Ro(e, t) {
return typeof t == "object" && t !== null ? e === t : String(e) === String(t);
}
const Po = /* @__PURE__ */ d(D, {
checked: !0
}), vo = /* @__PURE__ */ d(D, {}), So = /* @__PURE__ */ y.forwardRef(function(t, r) {
const s = J({
props: t,
name: "MuiRadio"
}), {
checked: a,
checkedIcon: g = Po,
color: P = "primary",
icon: u = vo,
name: N,
onChange: x,
size: k = "medium",
className: F,
disabled: z,
disableRipple: U = !1,
slots: I = {},
slotProps: T = {},
inputProps: j,
...B
} = s, M = X();
let f = z;
M && typeof f > "u" && (f = M.disabled), f ?? (f = !1);
const c = {
...s,
disabled: f,
disableRipple: U,
color: P,
size: k
}, v = Co(c), n = yo();
let C = a;
const $ = so(x, n && n.onChange);
let p = N;
n && (typeof C > "u" && (C = Ro(n.value, s.value)), typeof p > "u" && (p = n.name));
const m = T.input ?? j, [E, L] = Z("root", {
ref: r,
elementType: ho,
className: q(v.root, F),
shouldForwardComponentProp: !0,
externalForwardedProps: {
slots: I,
slotProps: T,
...B
},
getSlotProps: (l) => ({
...l,
onChange: (i, ...b) => {
var V;
(V = l.onChange) == null || V.call(l, i, ...b), $(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: I,
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(E, {
...L,
classes: v
});
});
process.env.NODE_ENV !== "production" && (So.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: o.bool,
/**
* The icon to display when the component is checked.
* @default <RadioButtonIcon checked />
*/
checkedIcon: o.node,
/**
* Override or extend the styles applied to the component.
*/
classes: o.object,
/**
* @ignore
*/
className: o.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: o.oneOfType([o.oneOf(["default", "primary", "secondary", "error", "info", "success", "warning"]), o.string]),
/**
* If `true`, the component is disabled.
*/
disabled: o.bool,
/**
* If `true`, the ripple effect is disabled.
* @default false
*/
disableRipple: o.bool,
/**
* The icon to display when the component is unchecked.
* @default <RadioButtonIcon />
*/
icon: o.node,
/**
* The id of the `input` element.
*/
id: o.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: o.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: Y,
/**
* Name attribute of the `input` element.
*/
name: o.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: o.func,
/**
* If `true`, the `input` element is required.
* @default false
*/
required: o.bool,
/**
* The size of the component.
* `small` is equivalent to the dense radio styling.
* @default 'medium'
*/
size: o.oneOfType([o.oneOf(["medium", "small"]), o.string]),
/**
* The props used for each slot inside.
* @default {}
*/
slotProps: o.shape({
input: o.oneOfType([o.func, o.object]),
root: o.oneOfType([o.func, o.object])
}),
/**
* The components used for each slot inside.
* @default {}
*/
slots: o.shape({
input: 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 value of the component. The DOM API casts this to a string.
*/
value: o.any
});
export {
co as F,
So as R,
go as a,
eo as b,
S as f,
ao as g,
A as r,
yo as u
};