@cgi-learning-hub/ui
Version:
@cgi-learning-hub/ui is an open-source React component library that implements UI for HUB's features
320 lines (319 loc) • 6.94 kB
JavaScript
import * as J from "react";
import { P as e } from "./index-B9vkf41S.js";
import { s as k, c as K, r as Q } from "./DefaultPropsProvider-BrmlvPWg.js";
import { u as W } from "./useFormControl-CatNKXAi.js";
import { G as X, F as Y } from "./generateUtilityClasses-B_xKAflz.js";
import { u as w } from "./useSlot-BSkdRaZr.js";
import { jsxs as Z, jsx as ee } from "react/jsx-runtime";
import { u as oe } from "./useControlled-nm4pBabJ.js";
import { c as te } from "./capitalize-BHEX83JQ.js";
import { B as se } from "./ButtonBase-C2jRC_V7.js";
import { r as ne } from "./refType-8hihVLUh.js";
function ie(s) {
return X("PrivateSwitchBase", s);
}
Y("PrivateSwitchBase", ["root", "checked", "disabled", "input", "edgeStart", "edgeEnd"]);
const re = (s) => {
const {
classes: n,
checked: d,
disabled: p,
edge: a
} = s, u = {
root: ["root", d && "checked", p && "disabled", a && `edge${te(a)}`],
input: ["input"]
};
return K(u, ie, n);
}, ae = k(se, {
name: "MuiSwitchBase"
})({
padding: 9,
borderRadius: "50%",
variants: [{
props: {
edge: "start",
size: "small"
},
style: {
marginLeft: -3
}
}, {
props: ({
edge: s,
ownerState: n
}) => s === "start" && n.size !== "small",
style: {
marginLeft: -12
}
}, {
props: {
edge: "end",
size: "small"
},
style: {
marginRight: -3
}
}, {
props: ({
edge: s,
ownerState: n
}) => s === "end" && n.size !== "small",
style: {
marginRight: -12
}
}]
}), ce = k("input", {
name: "MuiSwitchBase",
shouldForwardProp: Q
})({
cursor: "inherit",
position: "absolute",
opacity: 0,
width: "100%",
height: "100%",
top: 0,
left: 0,
margin: 0,
padding: 0,
zIndex: 1
}), le = /* @__PURE__ */ J.forwardRef(function(n, d) {
const {
autoFocus: p,
checked: a,
checkedIcon: u,
defaultChecked: m,
disabled: C,
disableFocusRipple: h = !1,
edge: R = !1,
icon: x,
id: T,
inputProps: I,
inputRef: j,
name: O,
onBlur: g,
onChange: b,
onFocus: y,
readOnly: z,
required: q = !1,
tabIndex: N,
type: l,
value: P,
slots: E = {},
slotProps: U = {},
...v
} = n, [S, L] = oe({
controlled: a,
default: !!m,
name: "SwitchBase",
state: "checked"
}), i = W(), M = (o) => {
y && y(o), i && i.onFocus && i.onFocus(o);
}, D = (o) => {
g && g(o), i && i.onBlur && i.onBlur(o);
}, G = (o) => {
if (o.nativeEvent.defaultPrevented)
return;
const t = o.target.checked;
L(t), b && b(o, t);
};
let c = C;
i && typeof c > "u" && (c = i.disabled);
const V = l === "checkbox" || l === "radio", f = {
...n,
checked: S,
disabled: c,
disableFocusRipple: h,
edge: R
}, B = re(f), F = {
slots: E,
slotProps: {
input: I,
...U
}
}, [_, $] = w("root", {
ref: d,
elementType: ae,
className: B.root,
shouldForwardComponentProp: !0,
externalForwardedProps: {
...F,
component: "span",
...v
},
getSlotProps: (o) => ({
...o,
onFocus: (t) => {
var r;
(r = o.onFocus) == null || r.call(o, t), M(t);
},
onBlur: (t) => {
var r;
(r = o.onBlur) == null || r.call(o, t), D(t);
}
}),
ownerState: f,
additionalProps: {
centerRipple: !0,
focusRipple: !h,
disabled: c,
role: void 0,
tabIndex: null
}
}), [A, H] = w("input", {
ref: j,
elementType: ce,
className: B.input,
externalForwardedProps: F,
getSlotProps: (o) => ({
...o,
onChange: (t) => {
var r;
(r = o.onChange) == null || r.call(o, t), G(t);
}
}),
ownerState: f,
additionalProps: {
autoFocus: p,
checked: a,
defaultChecked: m,
disabled: c,
id: V ? T : void 0,
name: O,
readOnly: z,
required: q,
tabIndex: N,
type: l,
...l === "checkbox" && P === void 0 ? {} : {
value: P
}
}
});
return /* @__PURE__ */ Z(_, {
...$,
children: [/* @__PURE__ */ ee(A, {
...H
}), S ? u : x]
});
});
process.env.NODE_ENV !== "production" && (le.propTypes = {
/**
* If `true`, the `input` element is focused during the first mount.
*/
autoFocus: e.bool,
/**
* If `true`, the component is checked.
*/
checked: e.bool,
/**
* The icon to display when the component is checked.
*/
checkedIcon: e.node.isRequired,
/**
* Override or extend the styles applied to the component.
*/
classes: e.object,
/**
* @ignore
*/
className: e.string,
/**
* @ignore
*/
defaultChecked: e.bool,
/**
* If `true`, the component is disabled.
*/
disabled: e.bool,
/**
* If `true`, the keyboard focus ripple is disabled.
* @default false
*/
disableFocusRipple: e.bool,
/**
* If given, uses a negative margin to counteract the padding on one
* side (this is often helpful for aligning the left or right
* side of the icon with content above or below, without ruining the border
* size and shape).
* @default false
*/
edge: e.oneOf(["end", "start", !1]),
/**
* The icon to display when the component is unchecked.
*/
icon: e.node.isRequired,
/**
* 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.
*/
inputProps: e.object,
/**
* Pass a ref to the `input` element.
*/
inputRef: ne,
/*
* @ignore
*/
name: e.string,
/**
* @ignore
*/
onBlur: e.func,
/**
* Callback fired when the state is changed.
*
* @param {object} event The event source of the callback.
* You can pull out the new checked state by accessing `event.target.checked` (boolean).
*/
onChange: e.func,
/**
* @ignore
*/
onFocus: e.func,
/**
* It prevents the user from changing the value of the field
* (not from interacting with the field).
*/
readOnly: e.bool,
/**
* If `true`, the `input` element is required.
*/
required: e.bool,
/**
* 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.object,
/**
* @ignore
*/
tabIndex: e.oneOfType([e.number, e.string]),
/**
* The input component prop `type`.
*/
type: e.string.isRequired,
/**
* The value of the component.
*/
value: e.any
});
export {
le as S
};