@cgi-learning-hub/ui
Version:
@cgi-learning-hub/ui is an open-source React component library that implements UI for HUB's features
316 lines (315 loc) • 6.83 kB
JavaScript
import * as J from "react";
import { P as e } from "./index-Sy88PpwE.js";
import { s as C, c as M, r as Q } from "./DefaultPropsProvider-DqazQPtr.js";
import { u as W } from "./useFormControl-CatNKXAi.js";
import { G as X, F as Y, K as Z } from "./identifier-PWESmBq6.js";
import { u as k } from "./useSlot-BzdKwDQ5.js";
import { jsxs as ee, jsx as oe } from "react/jsx-runtime";
import { u as te } from "./useControlled-nm4pBabJ.js";
import { B as se } from "./ButtonBase-6TF6t2SP.js";
import { r as ne } from "./refType-Dp7CJc86.js";
function re(s) {
return X("PrivateSwitchBase", s);
}
Y("PrivateSwitchBase", ["root", "checked", "disabled", "input", "edgeStart", "edgeEnd"]);
const ie = (s) => {
const {
classes: n,
checked: d,
disabled: p,
edge: a
} = s, u = {
root: ["root", d && "checked", p && "disabled", a && `edge${Z(a)}`],
input: ["input"]
};
return M(u, re, n);
}, ae = C(se)({
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 = C("input", {
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: w,
disableFocusRipple: g = !1,
edge: R = !1,
icon: x,
id: T,
inputProps: I,
inputRef: j,
name: O,
onBlur: h,
onChange: b,
onFocus: y,
readOnly: z,
required: q = !1,
tabIndex: N,
type: l,
value: P,
slots: E = {},
slotProps: U = {},
...v
} = n, [F, L] = te({
controlled: a,
default: !!m,
name: "SwitchBase",
state: "checked"
}), r = W(), D = (o) => {
y && y(o), r && r.onFocus && r.onFocus(o);
}, G = (o) => {
h && h(o), r && r.onBlur && r.onBlur(o);
}, K = (o) => {
if (o.nativeEvent.defaultPrevented)
return;
const t = o.target.checked;
L(t), b && b(o, t);
};
let c = w;
r && typeof c > "u" && (c = r.disabled);
const V = l === "checkbox" || l === "radio", f = {
...n,
checked: F,
disabled: c,
disableFocusRipple: g,
edge: R
}, S = ie(f), B = {
slots: E,
slotProps: {
input: I,
...U
}
}, [_, $] = k("root", {
ref: d,
elementType: ae,
className: S.root,
shouldForwardComponentProp: !0,
externalForwardedProps: {
...B,
component: "span",
...v
},
getSlotProps: (o) => ({
...o,
onFocus: (t) => {
var i;
(i = o.onFocus) == null || i.call(o, t), D(t);
},
onBlur: (t) => {
var i;
(i = o.onBlur) == null || i.call(o, t), G(t);
}
}),
ownerState: f,
additionalProps: {
centerRipple: !0,
focusRipple: !g,
disabled: c,
role: void 0,
tabIndex: null
}
}), [A, H] = k("input", {
ref: j,
elementType: ce,
className: S.input,
externalForwardedProps: B,
getSlotProps: (o) => ({
...o,
onChange: (t) => {
var i;
(i = o.onChange) == null || i.call(o, t), K(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__ */ ee(_, {
...$,
children: [/* @__PURE__ */ oe(A, {
...H
}), F ? 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
};