@cgi-learning-hub/ui
Version:
@cgi-learning-hub/ui is an open-source React component library that implements UI for HUB's features
797 lines (796 loc) • 23.9 kB
JavaScript
import * as l from "react";
import { P as e } from "./index-Sy88PpwE.js";
import { F as Ae, G as Be, H as pe, K as Q, X as He } from "./identifier-PWESmBq6.js";
import { i as fe } from "./isHostComponent-kiaBvYVo.js";
import { f as Me } from "./formControlState-vgaj2ksH.js";
import { u as We, F as Pe } from "./useFormControl-CatNKXAi.js";
import { g as Le } from "./index-8G2jvqZ8.js";
import { m as ge } from "./memoTheme-DAFDflPY.js";
import { i as De } from "./utils-DWqc1kRF.js";
import { jsxs as ee, jsx as B } from "react/jsx-runtime";
import { u as je, s as ve, c as Ue } from "./DefaultPropsProvider-DqazQPtr.js";
import { u as we } from "./useForkRef-u29GSuCu.js";
import { a as Ve, u as oe } from "./useEventCallback-Y2KwRxBw.js";
import { o as me } from "./ownerWindow-niciwP7I.js";
import { d as _e } from "./debounce-46wSf_lW.js";
import { r as Ke } from "./refType-Dp7CJc86.js";
import { e as $e } from "./elementTypeAcceptingRef-DOeckaXy.js";
function D(t) {
return parseInt(t, 10) || 0;
}
const Ge = {
shadow: {
// Visibility needed to hide the extra text area on iPads
visibility: "hidden",
// Remove from the content flow
position: "absolute",
// Ignore the scrollbar width
overflow: "hidden",
height: 0,
top: 0,
left: 0,
// Create a new layer, increase the isolation of the computed values
transform: "translateZ(0)"
}
};
function qe(t) {
for (const o in t)
return !1;
return !0;
}
function he(t) {
return qe(t) || t.outerHeightStyle === 0 && !t.overflowing;
}
const Se = /* @__PURE__ */ l.forwardRef(function(o, r) {
const {
onChange: d,
maxRows: h,
minRows: p = 1,
style: R,
value: T,
...H
} = o, {
current: S
} = l.useRef(T != null), f = l.useRef(null), O = we(r, f), m = l.useRef(null), C = l.useRef(null), g = l.useCallback(() => {
const i = f.current, n = C.current;
if (!i || !n)
return;
const u = me(i).getComputedStyle(i);
if (u.width === "0px")
return {
outerHeightStyle: 0,
overflowing: !1
};
n.style.width = u.width, n.value = i.value || o.placeholder || "x", n.value.slice(-1) === `
` && (n.value += " ");
const E = u.boxSizing, M = D(u.paddingBottom) + D(u.paddingTop), U = D(u.borderBottomWidth) + D(u.borderTopWidth), w = n.scrollHeight;
n.value = "x";
const I = n.scrollHeight;
let b = w;
p && (b = Math.max(Number(p) * I, b)), h && (b = Math.min(Number(h) * I, b)), b = Math.max(b, I);
const W = b + (E === "border-box" ? M + U : 0), V = Math.abs(b - w) <= 1;
return {
outerHeightStyle: W,
overflowing: V
};
}, [h, p, o.placeholder]), N = Ve(() => {
const i = f.current, n = g();
if (!i || !n || he(n))
return !1;
const c = n.outerHeightStyle;
return m.current != null && m.current !== c;
}), x = l.useCallback(() => {
const i = f.current, n = g();
if (!i || !n || he(n))
return;
const c = n.outerHeightStyle;
m.current !== c && (m.current = c, i.style.height = `${c}px`), i.style.overflow = n.overflowing ? "hidden" : "";
}, [g]), F = l.useRef(-1);
oe(() => {
const i = _e(x), n = f == null ? void 0 : f.current;
if (!n)
return;
const c = me(n);
c.addEventListener("resize", i);
let u;
return typeof ResizeObserver < "u" && (u = new ResizeObserver(() => {
N() && (u.unobserve(n), cancelAnimationFrame(F.current), x(), F.current = requestAnimationFrame(() => {
u.observe(n);
}));
}), u.observe(n)), () => {
i.clear(), cancelAnimationFrame(F.current), c.removeEventListener("resize", i), u && u.disconnect();
};
}, [g, x, N]), oe(() => {
x();
});
const j = (i) => {
S || x();
const n = i.target, c = n.value.length, u = n.value.endsWith(`
`), E = n.selectionStart === c;
u && E && n.setSelectionRange(c, c), d && d(i);
};
return /* @__PURE__ */ ee(l.Fragment, {
children: [/* @__PURE__ */ B("textarea", {
value: T,
onChange: j,
ref: O,
rows: p,
style: R,
...H
}), /* @__PURE__ */ B("textarea", {
"aria-hidden": !0,
className: o.className,
readOnly: !0,
ref: C,
tabIndex: -1,
style: {
...Ge.shadow,
...R,
paddingTop: 0,
paddingBottom: 0
}
})]
});
});
process.env.NODE_ENV !== "production" && (Se.propTypes = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* @ignore
*/
className: e.string,
/**
* Maximum number of rows to display.
*/
maxRows: e.oneOfType([e.number, e.string]),
/**
* Minimum number of rows to display.
* @default 1
*/
minRows: e.oneOfType([e.number, e.string]),
/**
* @ignore
*/
onChange: e.func,
/**
* @ignore
*/
placeholder: e.string,
/**
* @ignore
*/
style: e.object,
/**
* @ignore
*/
value: e.oneOfType([e.arrayOf(e.string), e.number, e.string])
});
function Ye(t) {
return Be("MuiInputBase", t);
}
const te = Ae("MuiInputBase", ["root", "formControl", "focused", "disabled", "adornedStart", "adornedEnd", "error", "sizeSmall", "multiline", "colorSecondary", "fullWidth", "hiddenLabel", "readOnly", "input", "inputSizeSmall", "inputMultiline", "inputTypeSearch", "inputAdornedStart", "inputAdornedEnd", "inputHiddenLabel"]);
var be;
const Xe = (t, o) => {
const {
ownerState: r
} = t;
return [o.root, r.formControl && o.formControl, r.startAdornment && o.adornedStart, r.endAdornment && o.adornedEnd, r.error && o.error, r.size === "small" && o.sizeSmall, r.multiline && o.multiline, r.color && o[`color${Q(r.color)}`], r.fullWidth && o.fullWidth, r.hiddenLabel && o.hiddenLabel];
}, Ze = (t, o) => {
const {
ownerState: r
} = t;
return [o.input, r.size === "small" && o.inputSizeSmall, r.multiline && o.inputMultiline, r.type === "search" && o.inputTypeSearch, r.startAdornment && o.inputAdornedStart, r.endAdornment && o.inputAdornedEnd, r.hiddenLabel && o.inputHiddenLabel];
}, Je = (t) => {
const {
classes: o,
color: r,
disabled: d,
error: h,
endAdornment: p,
focused: R,
formControl: T,
fullWidth: H,
hiddenLabel: S,
multiline: f,
readOnly: O,
size: m,
startAdornment: C,
type: g
} = t, N = {
root: ["root", `color${Q(r)}`, d && "disabled", h && "error", H && "fullWidth", R && "focused", T && "formControl", m && m !== "medium" && `size${Q(m)}`, f && "multiline", C && "adornedStart", p && "adornedEnd", S && "hiddenLabel", O && "readOnly"],
input: ["input", d && "disabled", g === "search" && "inputTypeSearch", f && "inputMultiline", m === "small" && "inputSizeSmall", S && "inputHiddenLabel", C && "inputAdornedStart", p && "inputAdornedEnd", O && "readOnly"]
};
return Ue(N, Ye, o);
}, Qe = ve("div", {
name: "MuiInputBase",
slot: "Root",
overridesResolver: Xe
})(ge(({
theme: t
}) => ({
...t.typography.body1,
color: (t.vars || t).palette.text.primary,
lineHeight: "1.4375em",
// 23px
boxSizing: "border-box",
// Prevent padding issue with fullWidth.
position: "relative",
cursor: "text",
display: "inline-flex",
alignItems: "center",
[`&.${te.disabled}`]: {
color: (t.vars || t).palette.text.disabled,
cursor: "default"
},
variants: [{
props: ({
ownerState: o
}) => o.multiline,
style: {
padding: "4px 0 5px"
}
}, {
props: ({
ownerState: o,
size: r
}) => o.multiline && r === "small",
style: {
paddingTop: 1
}
}, {
props: ({
ownerState: o
}) => o.fullWidth,
style: {
width: "100%"
}
}]
}))), eo = ve("input", {
name: "MuiInputBase",
slot: "Input",
overridesResolver: Ze
})(ge(({
theme: t
}) => {
const o = t.palette.mode === "light", r = {
color: "currentColor",
...t.vars ? {
opacity: t.vars.opacity.inputPlaceholder
} : {
opacity: o ? 0.42 : 0.5
},
transition: t.transitions.create("opacity", {
duration: t.transitions.duration.shorter
})
}, d = {
opacity: "0 !important"
}, h = t.vars ? {
opacity: t.vars.opacity.inputPlaceholder
} : {
opacity: o ? 0.42 : 0.5
};
return {
font: "inherit",
letterSpacing: "inherit",
color: "currentColor",
padding: "4px 0 5px",
border: 0,
boxSizing: "content-box",
background: "none",
height: "1.4375em",
// Reset 23pxthe native input line-height
margin: 0,
// Reset for Safari
WebkitTapHighlightColor: "transparent",
display: "block",
// Make the flex item shrink with Firefox
minWidth: 0,
width: "100%",
"&::-webkit-input-placeholder": r,
"&::-moz-placeholder": r,
// Firefox 19+
"&::-ms-input-placeholder": r,
// Edge
"&:focus": {
outline: 0
},
// Reset Firefox invalid required input style
"&:invalid": {
boxShadow: "none"
},
"&::-webkit-search-decoration": {
// Remove the padding when type=search.
WebkitAppearance: "none"
},
// Show and hide the placeholder logic
[`label[data-shrink=false] + .${te.formControl} &`]: {
"&::-webkit-input-placeholder": d,
"&::-moz-placeholder": d,
// Firefox 19+
"&::-ms-input-placeholder": d,
// Edge
"&:focus::-webkit-input-placeholder": h,
"&:focus::-moz-placeholder": h,
// Firefox 19+
"&:focus::-ms-input-placeholder": h
// Edge
},
[`&.${te.disabled}`]: {
opacity: 1,
// Reset iOS opacity
WebkitTextFillColor: (t.vars || t).palette.text.disabled
// Fix opacity Safari bug
},
variants: [{
props: ({
ownerState: p
}) => !p.disableInjectingGlobalStyles,
style: {
animationName: "mui-auto-fill-cancel",
animationDuration: "10ms",
"&:-webkit-autofill": {
animationDuration: "5000s",
animationName: "mui-auto-fill"
}
}
}, {
props: {
size: "small"
},
style: {
paddingTop: 1
}
}, {
props: ({
ownerState: p
}) => p.multiline,
style: {
height: "auto",
resize: "none",
padding: 0,
paddingTop: 0
}
}, {
props: {
type: "search"
},
style: {
MozAppearance: "textfield"
// Improve type search style.
}
}]
};
})), ye = Le({
"@keyframes mui-auto-fill": {
from: {
display: "block"
}
},
"@keyframes mui-auto-fill-cancel": {
from: {
display: "block"
}
}
}), oo = /* @__PURE__ */ l.forwardRef(function(o, r) {
const d = je({
props: o,
name: "MuiInputBase"
}), {
"aria-describedby": h,
autoComplete: p,
autoFocus: R,
className: T,
color: H,
components: S = {},
componentsProps: f = {},
defaultValue: O,
disabled: m,
disableInjectingGlobalStyles: C,
endAdornment: g,
error: N,
fullWidth: x = !1,
id: F,
inputComponent: j = "input",
inputProps: i = {},
inputRef: n,
margin: c,
maxRows: u,
minRows: E,
multiline: M = !1,
name: U,
onBlur: w,
onChange: I,
onClick: b,
onFocus: W,
onKeyDown: V,
onKeyUp: Ce,
placeholder: xe,
readOnly: _,
renderSuffix: ne,
rows: P,
size: to,
slotProps: re = {},
slots: ie = {},
startAdornment: k,
type: ae = "text",
value: Re,
...Te
} = d, L = i.value != null ? i.value : Re, {
current: K
} = l.useRef(L != null), z = l.useRef(), Oe = l.useCallback((a) => {
process.env.NODE_ENV !== "production" && a && a.nodeName !== "INPUT" && !a.focus && console.error(["MUI: You have provided a `inputComponent` to the input component", "that does not correctly handle the `ref` prop.", "Make sure the `ref` prop is called with a HTMLInputElement."].join(`
`));
}, []), Ee = we(z, n, i.ref, Oe), [$, G] = l.useState(!1), s = We();
process.env.NODE_ENV !== "production" && l.useEffect(() => {
if (s)
return s.registerEffect();
}, [s]);
const y = Me({
props: d,
muiFormControl: s,
states: ["color", "disabled", "error", "hiddenLabel", "size", "required", "filled"]
});
y.focused = s ? s.focused : $, l.useEffect(() => {
!s && m && $ && (G(!1), w && w());
}, [s, m, $, w]);
const q = s && s.onFilled, Y = s && s.onEmpty, A = l.useCallback((a) => {
De(a) ? q && q() : Y && Y();
}, [q, Y]);
oe(() => {
K && A({
value: L
});
}, [L, A, K]);
const Ie = (a) => {
W && W(a), i.onFocus && i.onFocus(a), s && s.onFocus ? s.onFocus(a) : G(!0);
}, ze = (a) => {
w && w(a), i.onBlur && i.onBlur(a), s && s.onBlur ? s.onBlur(a) : G(!1);
}, Ne = (a, ...ce) => {
if (!K) {
const de = a.target || z.current;
if (de == null)
throw new Error(process.env.NODE_ENV !== "production" ? "MUI: Expected valid input target. Did you use a custom `inputComponent` and forget to forward refs? See https://mui.com/r/input-component-ref-interface for more info." : He(1));
A({
value: de.value
});
}
i.onChange && i.onChange(a, ...ce), I && I(a, ...ce);
};
l.useEffect(() => {
A(z.current);
}, []);
const Fe = (a) => {
z.current && a.currentTarget === a.target && z.current.focus(), b && b(a);
};
let X = j, v = i;
M && X === "input" && (P ? (process.env.NODE_ENV !== "production" && (E || u) && console.warn("MUI: You can not use the `minRows` or `maxRows` props when the input `rows` prop is set."), v = {
type: void 0,
minRows: P,
maxRows: P,
...v
}) : v = {
type: void 0,
maxRows: u,
minRows: E,
...v
}, X = Se);
const ke = (a) => {
A(a.animationName === "mui-auto-fill-cancel" ? z.current : {
value: "x"
});
};
l.useEffect(() => {
s && s.setAdornedStart(!!k);
}, [s, k]);
const Z = {
...d,
color: y.color || "primary",
disabled: y.disabled,
endAdornment: g,
error: y.error,
focused: y.focused,
formControl: s,
fullWidth: x,
hiddenLabel: y.hiddenLabel,
multiline: M,
size: y.size,
startAdornment: k,
type: ae
}, se = Je(Z), le = ie.root || S.Root || Qe, J = re.root || f.root || {}, ue = ie.input || S.Input || eo;
return v = {
...v,
...re.input ?? f.input
}, /* @__PURE__ */ ee(l.Fragment, {
children: [!C && typeof ye == "function" && // For Emotion/Styled-components, InputGlobalStyles will be a function
// For Pigment CSS, this has no effect because the InputGlobalStyles will be null.
(be || (be = /* @__PURE__ */ B(ye, {}))), /* @__PURE__ */ ee(le, {
...J,
ref: r,
onClick: Fe,
...Te,
...!fe(le) && {
ownerState: {
...Z,
...J.ownerState
}
},
className: pe(se.root, J.className, T, _ && "MuiInputBase-readOnly"),
children: [k, /* @__PURE__ */ B(Pe.Provider, {
value: null,
children: /* @__PURE__ */ B(ue, {
"aria-invalid": y.error,
"aria-describedby": h,
autoComplete: p,
autoFocus: R,
defaultValue: O,
disabled: y.disabled,
id: F,
onAnimationStart: ke,
name: U,
placeholder: xe,
readOnly: _,
required: y.required,
rows: P,
value: L,
onKeyDown: V,
onKeyUp: Ce,
type: ae,
...v,
...!fe(ue) && {
as: X,
ownerState: {
...Z,
...v.ownerState
}
},
ref: Ee,
className: pe(se.input, v.className, _ && "MuiInputBase-readOnly"),
onBlur: ze,
onChange: Ne,
onFocus: Ie
})
}), g, ne ? ne({
...y,
startAdornment: k
}) : null]
})]
});
});
process.env.NODE_ENV !== "production" && (oo.propTypes = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the d.ts file and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* @ignore
*/
"aria-describedby": e.string,
/**
* This prop helps users to fill forms faster, especially on mobile devices.
* The name can be confusing, as it's more like an autofill.
* You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).
*/
autoComplete: e.string,
/**
* If `true`, the `input` element is focused during the first mount.
*/
autoFocus: e.bool,
/**
* 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).
* The prop defaults to the value (`'primary'`) inherited from the parent FormControl component.
*/
color: e.oneOfType([e.oneOf(["primary", "secondary", "error", "info", "success", "warning"]), e.string]),
/**
* The components used for each slot inside.
*
* @deprecated use the `slots` 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.
*
* @default {}
*/
components: e.shape({
Input: e.elementType,
Root: e.elementType
}),
/**
* The extra props for the slot components.
* You can override the existing props or add new ones.
*
* @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.
*
* @default {}
*/
componentsProps: e.shape({
input: e.object,
root: e.object
}),
/**
* The default value. Use when the component is not controlled.
*/
defaultValue: e.any,
/**
* If `true`, the component is disabled.
* The prop defaults to the value (`false`) inherited from the parent FormControl component.
*/
disabled: e.bool,
/**
* If `true`, GlobalStyles for the auto-fill keyframes will not be injected/removed on mount/unmount. Make sure to inject them at the top of your application.
* This option is intended to help with boosting the initial rendering performance if you are loading a big amount of Input components at once.
* @default false
*/
disableInjectingGlobalStyles: e.bool,
/**
* End `InputAdornment` for this component.
*/
endAdornment: e.node,
/**
* If `true`, the `input` will indicate an error.
* The prop defaults to the value (`false`) inherited from the parent FormControl component.
*/
error: e.bool,
/**
* If `true`, the `input` will take up the full width of its container.
* @default false
*/
fullWidth: e.bool,
/**
* The id of the `input` element.
*/
id: e.string,
/**
* The component used for the `input` element.
* Either a string to use a HTML element or a component.
* @default 'input'
*/
inputComponent: $e,
/**
* [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#attributes) applied to the `input` element.
* @default {}
*/
inputProps: e.object,
/**
* Pass a ref to the `input` element.
*/
inputRef: Ke,
/**
* If `dense`, will adjust vertical spacing. This is normally obtained via context from
* FormControl.
* The prop defaults to the value (`'none'`) inherited from the parent FormControl component.
*/
margin: e.oneOf(["dense", "none"]),
/**
* Maximum number of rows to display when multiline option is set to true.
*/
maxRows: e.oneOfType([e.number, e.string]),
/**
* Minimum number of rows to display when multiline option is set to true.
*/
minRows: e.oneOfType([e.number, e.string]),
/**
* If `true`, a [TextareaAutosize](https://mui.com/material-ui/react-textarea-autosize/) element is rendered.
* @default false
*/
multiline: e.bool,
/**
* Name attribute of the `input` element.
*/
name: e.string,
/**
* Callback fired when the `input` is blurred.
*
* Notice that the first argument (event) might be undefined.
*/
onBlur: e.func,
/**
* Callback fired when the value is changed.
*
* @param {React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>} event The event source of the callback.
* You can pull out the new value by accessing `event.target.value` (string).
*/
onChange: e.func,
/**
* @ignore
*/
onClick: e.func,
/**
* @ignore
*/
onFocus: e.func,
/**
* Callback fired when the `input` doesn't satisfy its constraints.
*/
onInvalid: e.func,
/**
* @ignore
*/
onKeyDown: e.func,
/**
* @ignore
*/
onKeyUp: e.func,
/**
* The short hint displayed in the `input` before the user enters a value.
*/
placeholder: e.string,
/**
* It prevents the user from changing the value of the field
* (not from interacting with the field).
*/
readOnly: e.bool,
/**
* @ignore
*/
renderSuffix: e.func,
/**
* If `true`, the `input` element is required.
* The prop defaults to the value (`false`) inherited from the parent FormControl component.
*/
required: e.bool,
/**
* Number of rows to display when multiline option is set to true.
*/
rows: e.oneOfType([e.number, e.string]),
/**
* The size of the component.
*/
size: e.oneOfType([e.oneOf(["medium", "small"]), e.string]),
/**
* The extra props for the slot components.
* You can override the existing props or add new ones.
*
* This prop is an alias for the `componentsProps` prop, which will be deprecated in the future.
*
* @default {}
*/
slotProps: e.shape({
input: e.object,
root: e.object
}),
/**
* The components used for each slot inside.
*
* This prop is an alias for the `components` prop, which will be deprecated in the future.
*
* @default {}
*/
slots: e.shape({
input: e.elementType,
root: e.elementType
}),
/**
* Start `InputAdornment` for this component.
*/
startAdornment: e.node,
/**
* 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]),
/**
* Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#input_types).
* @default 'text'
*/
type: e.string,
/**
* The value of the `input` element, required for a controlled component.
*/
value: e.any
});
export {
oo as I,
Qe as a,
eo as b,
Ze as c,
te as i,
Xe as r
};