@cgi-learning-hub/ui
Version:
@cgi-learning-hub/ui is an open-source React component library that implements UI for HUB's features
271 lines (270 loc) • 8.58 kB
JavaScript
import * as f from "react";
import { P as e } from "./index-Sy88PpwE.js";
import { F as j, G as w, H as B, K as c, n as I } from "./identifier-PWESmBq6.js";
import { S as M } from "./SwitchBase-DZV8S81Z.js";
import { c as h } from "./createSvgIcon-B1E6Wo8z.js";
import { jsx as s } from "react/jsx-runtime";
import { u as F, s as H, c as V, r as N } from "./DefaultPropsProvider-DqazQPtr.js";
import { m as E } from "./memoTheme-DAFDflPY.js";
import { c as O } from "./createSimplePaletteValueFilter-B7--0ryQ.js";
import { u as U } from "./useSlot-BzdKwDQ5.js";
import { m as D } from "./mergeSlotProps-ChAye7iz.js";
const L = h(/* @__PURE__ */ s("path", {
d: "M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
}), "CheckBoxOutlineBlank"), q = h(/* @__PURE__ */ s("path", {
d: "M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
}), "CheckBox"), G = h(/* @__PURE__ */ s("path", {
d: "M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2z"
}), "IndeterminateCheckBox");
function K(o) {
return w("MuiCheckbox", o);
}
const b = j("MuiCheckbox", ["root", "checked", "disabled", "indeterminate", "colorPrimary", "colorSecondary", "sizeSmall", "sizeMedium"]), _ = (o) => {
const {
classes: t,
indeterminate: a,
color: r,
size: i
} = o, l = {
root: ["root", a && "indeterminate", `color${c(r)}`, `size${c(i)}`]
}, p = V(l, K, t);
return {
...t,
// forward the disabled and checked classes to the SwitchBase
...p
};
}, A = H(M, {
shouldForwardProp: (o) => N(o) || o === "classes",
name: "MuiCheckbox",
slot: "Root",
overridesResolver: (o, t) => {
const {
ownerState: a
} = o;
return [t.root, a.indeterminate && t.indeterminate, t[`size${c(a.size)}`], a.color !== "default" && t[`color${c(a.color)}`]];
}
})(E(({
theme: o
}) => ({
color: (o.vars || o).palette.text.secondary,
variants: [{
props: {
color: "default",
disableRipple: !1
},
style: {
"&:hover": {
backgroundColor: o.vars ? `rgba(${o.vars.palette.action.activeChannel} / ${o.vars.palette.action.hoverOpacity})` : I(o.palette.action.active, o.palette.action.hoverOpacity)
}
}
}, ...Object.entries(o.palette).filter(O()).map(([t]) => ({
props: {
color: t,
disableRipple: !1
},
style: {
"&:hover": {
backgroundColor: o.vars ? `rgba(${o.vars.palette[t].mainChannel} / ${o.vars.palette.action.hoverOpacity})` : I(o.palette[t].main, o.palette.action.hoverOpacity)
}
}
})), ...Object.entries(o.palette).filter(O()).map(([t]) => ({
props: {
color: t
},
style: {
[`&.${b.checked}, &.${b.indeterminate}`]: {
color: (o.vars || o).palette[t].main
},
[`&.${b.disabled}`]: {
color: (o.vars || o).palette.action.disabled
}
}
})), {
// 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"
}
}
}
}]
}))), J = /* @__PURE__ */ s(q, {}), Q = /* @__PURE__ */ s(L, {}), W = /* @__PURE__ */ s(G, {}), X = /* @__PURE__ */ f.forwardRef(function(t, a) {
const r = F({
props: t,
name: "MuiCheckbox"
}), {
checkedIcon: i = J,
color: l = "primary",
icon: p = Q,
indeterminate: n = !1,
indeterminateIcon: v = W,
inputProps: g,
size: d = "medium",
disableRipple: y = !1,
className: S,
slots: C = {},
slotProps: k = {},
...T
} = r, x = n ? v : p, P = n ? v : i, m = {
...r,
disableRipple: y,
color: l,
indeterminate: n,
size: d
}, z = _(m), u = k.input ?? g, [R, $] = U("root", {
ref: a,
elementType: A,
className: B(z.root, S),
shouldForwardComponentProp: !0,
externalForwardedProps: {
slots: C,
slotProps: k,
...T
},
ownerState: m,
additionalProps: {
type: "checkbox",
icon: /* @__PURE__ */ f.cloneElement(x, {
fontSize: x.props.fontSize ?? d
}),
checkedIcon: /* @__PURE__ */ f.cloneElement(P, {
fontSize: P.props.fontSize ?? d
}),
disableRipple: y,
slots: C,
slotProps: {
input: D(typeof u == "function" ? u(m) : u, {
"data-indeterminate": n
})
}
}
});
return /* @__PURE__ */ s(R, {
...$,
classes: z
});
});
process.env.NODE_ENV !== "production" && (X.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 <CheckBoxIcon />
*/
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]),
/**
* The default checked state. Use when the component is not controlled.
*/
defaultChecked: e.bool,
/**
* If `true`, the component is disabled.
* @default false
*/
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 <CheckBoxOutlineBlankIcon />
*/
icon: e.node,
/**
* The id of the `input` element.
*/
id: e.string,
/**
* If `true`, the component appears indeterminate.
* This does not set the native input element to indeterminate due
* to inconsistent behavior across browsers.
* However, we set a `data-indeterminate` attribute on the `input`.
* @default false
*/
indeterminate: e.bool,
/**
* The icon to display when the component is indeterminate.
* @default <IndeterminateCheckBoxIcon />
*/
indeterminateIcon: e.node,
/**
* [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,
/**
* Callback fired when the state is changed.
*
* @param {React.ChangeEvent<HTMLInputElement>} 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 `input` element is required.
* @default false
*/
required: e.bool,
/**
* The size of the component.
* `small` is equivalent to the dense checkbox 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.
* The browser uses "on" as the default value.
*/
value: e.any
});
export {
X as C,
b as c,
K as g
};