@cgi-learning-hub/ui
Version:
@cgi-learning-hub/ui is an open-source React component library that implements UI for HUB's features
1,797 lines • 74.5 kB
JavaScript
import * as u from "react";
import { P as e } from "./index-B9vkf41S.js";
import { F as q, G as _, $ as ve, H as pe, Y as ho, I as Oo } from "./generateUtilityClasses-B_xKAflz.js";
import { f as ye } from "./formControlState-vgaj2ksH.js";
import { u as he } from "./useFormControl-CatNKXAi.js";
import { u as J, s as O, c as A, r as $, e as Co } from "./DefaultPropsProvider-BrmlvPWg.js";
import { m as M } from "./memoTheme-C-PaH-Cy.js";
import { jsx as g, jsxs as Oe } from "react/jsx-runtime";
import { c as K } from "./capitalize-BHEX83JQ.js";
import { a as Io, b as So } from "./FormLabel-DtxJI2CU.js";
import { M as xo } from "./Menu-DGvAkF5F.js";
import { r as Q } from "./refType-8hihVLUh.js";
import { i as wo } from "./utils-DWqc1kRF.js";
import { u as Xe } from "./useControlled-nm4pBabJ.js";
import { u as Je } from "./useForkRef-u29GSuCu.js";
import { o as Ro } from "./ownerDocument-CUrv0DIK.js";
import { u as To } from "./useId-CK6Kn3Tn.js";
import { c as Po } from "./createSvgIcon-DFIM5PqN.js";
import { g as No } from "./elementAcceptingRef-CZLfau9O.js";
import { c as Ce } from "./createSimplePaletteValueFilter-B7--0ryQ.js";
import { i as Ie, I as Se, a as xe, r as we, b as Re, c as Te } from "./InputBase-D5UJOJBu.js";
import { u as ko } from "./useSlot-BSkdRaZr.js";
function Eo(o) {
return _("MuiInput", o);
}
const Y = {
...Ie,
...q("MuiInput", ["root", "underline", "input"])
};
function Fo(o) {
return _("MuiOutlinedInput", o);
}
const P = {
...Ie,
...q("MuiOutlinedInput", ["root", "notchedOutline", "input"])
};
function $o(o) {
return _("MuiFilledInput", o);
}
const W = {
...Ie,
...q("MuiFilledInput", ["root", "underline", "input", "adornedStart", "adornedEnd", "sizeSmall", "multiline", "hiddenLabel"])
}, Mo = Po(/* @__PURE__ */ g("path", {
d: "M7 10l5 5 5-5z"
}), "ArrowDropDown"), jo = (o) => {
const {
classes: t,
disableUnderline: n
} = o, p = A({
root: ["root", !n && "underline"],
input: ["input"]
}, Eo, t);
return {
...t,
// forward classes to the InputBase
...p
};
}, Lo = O(xe, {
shouldForwardProp: (o) => $(o) || o === "classes",
name: "MuiInput",
slot: "Root",
overridesResolver: (o, t) => {
const {
ownerState: n
} = o;
return [...we(o, t), !n.disableUnderline && t.underline];
}
})(M(({
theme: o
}) => {
let n = o.palette.mode === "light" ? "rgba(0, 0, 0, 0.42)" : "rgba(255, 255, 255, 0.7)";
return o.vars && (n = o.alpha(o.vars.palette.common.onBackground, o.vars.opacity.inputUnderline)), {
position: "relative",
variants: [{
props: ({
ownerState: r
}) => r.formControl,
style: {
"label + &": {
marginTop: 16
}
}
}, {
props: ({
ownerState: r
}) => !r.disableUnderline,
style: {
"&::after": {
left: 0,
bottom: 0,
content: '""',
position: "absolute",
right: 0,
transform: "scaleX(0)",
transition: o.transitions.create("transform", {
duration: o.transitions.duration.shorter,
easing: o.transitions.easing.easeOut
}),
pointerEvents: "none"
// Transparent to the hover style.
},
[`&.${Y.focused}:after`]: {
// translateX(0) is a workaround for Safari transform scale bug
// See https://github.com/mui/material-ui/issues/31766
transform: "scaleX(1) translateX(0)"
},
[`&.${Y.error}`]: {
"&::before, &::after": {
borderBottomColor: (o.vars || o).palette.error.main
}
},
"&::before": {
borderBottom: `1px solid ${n}`,
left: 0,
bottom: 0,
content: '"\\00a0"',
position: "absolute",
right: 0,
transition: o.transitions.create("border-bottom-color", {
duration: o.transitions.duration.shorter
}),
pointerEvents: "none"
// Transparent to the hover style.
},
[`&:hover:not(.${Y.disabled}, .${Y.error}):before`]: {
borderBottom: `2px solid ${(o.vars || o).palette.text.primary}`,
// Reset on touch devices, it doesn't add specificity
"@media (hover: none)": {
borderBottom: `1px solid ${n}`
}
},
[`&.${Y.disabled}:before`]: {
borderBottomStyle: "dotted"
}
}
}, ...Object.entries(o.palette).filter(Ce()).map(([r]) => ({
props: {
color: r,
disableUnderline: !1
},
style: {
"&::after": {
borderBottom: `2px solid ${(o.vars || o).palette[r].main}`
}
}
}))]
};
})), Bo = O(Re, {
name: "MuiInput",
slot: "Input",
overridesResolver: Te
})({}), Pe = /* @__PURE__ */ u.forwardRef(function(t, n) {
const r = J({
props: t,
name: "MuiInput"
}), {
disableUnderline: p = !1,
components: d = {},
componentsProps: a,
fullWidth: i = !1,
inputComponent: v = "input",
multiline: m = !1,
slotProps: c,
slots: f = {},
type: C = "text",
...I
} = r, R = jo(r), y = {
root: {
ownerState: {
disableUnderline: p
}
}
}, h = c ?? a ? ve(c ?? a, y) : y, S = f.root ?? d.Root ?? Lo, x = f.input ?? d.Input ?? Bo;
return /* @__PURE__ */ g(Se, {
slots: {
root: S,
input: x
},
slotProps: h,
fullWidth: i,
inputComponent: v,
multiline: m,
ref: n,
type: C,
...I,
classes: R
});
});
process.env.NODE_ENV !== "production" && (Pe.propTypes = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the d.ts file and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* 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,
/**
* 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"]), 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`, the `input` will not have an underline.
* @default false
*/
disableUnderline: 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.elementType,
/**
* [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: Q,
/**
* 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 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,
/**
* 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,
/**
* 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 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
});
Pe.muiName = "Input";
function Wo(o) {
return _("MuiInputLabel", o);
}
const Et = q("MuiInputLabel", ["root", "focused", "disabled", "error", "required", "asterisk", "formControl", "sizeSmall", "shrink", "animated", "standard", "filled", "outlined"]), Ao = (o) => {
const {
classes: t,
formControl: n,
size: r,
shrink: p,
disableAnimation: d,
variant: a,
required: i
} = o, v = {
root: ["root", n && "formControl", !d && "animated", p && "shrink", r && r !== "medium" && `size${K(r)}`, a],
asterisk: [i && "asterisk"]
}, m = A(v, Wo, t);
return {
...t,
// forward the focused, disabled, etc. classes to the FormLabel
...m
};
}, Uo = O(Io, {
shouldForwardProp: (o) => $(o) || o === "classes",
name: "MuiInputLabel",
slot: "Root",
overridesResolver: (o, t) => {
const {
ownerState: n
} = o;
return [{
[`& .${So.asterisk}`]: t.asterisk
}, t.root, n.formControl && t.formControl, n.size === "small" && t.sizeSmall, n.shrink && t.shrink, !n.disableAnimation && t.animated, n.focused && t.focused, t[n.variant]];
}
})(M(({
theme: o
}) => ({
display: "block",
transformOrigin: "top left",
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis",
maxWidth: "100%",
variants: [{
props: ({
ownerState: t
}) => t.formControl,
style: {
position: "absolute",
left: 0,
top: 0,
// slight alteration to spec spacing to match visual spec result
transform: "translate(0, 20px) scale(1)"
}
}, {
props: {
size: "small"
},
style: {
// Compensation for the `Input.inputSizeSmall` style.
transform: "translate(0, 17px) scale(1)"
}
}, {
props: ({
ownerState: t
}) => t.shrink,
style: {
transform: "translate(0, -1.5px) scale(0.75)",
transformOrigin: "top left",
maxWidth: "133%"
}
}, {
props: ({
ownerState: t
}) => !t.disableAnimation,
style: {
transition: o.transitions.create(["color", "transform", "max-width"], {
duration: o.transitions.duration.shorter,
easing: o.transitions.easing.easeOut
})
}
}, {
props: {
variant: "filled"
},
style: {
// Chrome's autofill feature gives the input field a yellow background.
// Since the input field is behind the label in the HTML tree,
// the input field is drawn last and hides the label with an opaque background color.
// zIndex: 1 will raise the label above opaque background-colors of input.
zIndex: 1,
pointerEvents: "none",
transform: "translate(12px, 16px) scale(1)",
maxWidth: "calc(100% - 24px)"
}
}, {
props: {
variant: "filled",
size: "small"
},
style: {
transform: "translate(12px, 13px) scale(1)"
}
}, {
props: ({
variant: t,
ownerState: n
}) => t === "filled" && n.shrink,
style: {
userSelect: "none",
pointerEvents: "auto",
transform: "translate(12px, 7px) scale(0.75)",
maxWidth: "calc(133% - 24px)"
}
}, {
props: ({
variant: t,
ownerState: n,
size: r
}) => t === "filled" && n.shrink && r === "small",
style: {
transform: "translate(12px, 4px) scale(0.75)"
}
}, {
props: {
variant: "outlined"
},
style: {
// see comment above on filled.zIndex
zIndex: 1,
pointerEvents: "none",
transform: "translate(14px, 16px) scale(1)",
maxWidth: "calc(100% - 24px)"
}
}, {
props: {
variant: "outlined",
size: "small"
},
style: {
transform: "translate(14px, 9px) scale(1)"
}
}, {
props: ({
variant: t,
ownerState: n
}) => t === "outlined" && n.shrink,
style: {
userSelect: "none",
pointerEvents: "auto",
// Theoretically, we should have (8+5)*2/0.75 = 34px
// but it feels a better when it bleeds a bit on the left, so 32px.
maxWidth: "calc(133% - 32px)",
transform: "translate(14px, -9px) scale(0.75)"
}
}]
}))), Do = /* @__PURE__ */ u.forwardRef(function(t, n) {
const r = J({
name: "MuiInputLabel",
props: t
}), {
disableAnimation: p = !1,
margin: d,
shrink: a,
variant: i,
className: v,
...m
} = r, c = he();
let f = a;
typeof f > "u" && c && (f = c.filled || c.focused || c.adornedStart);
const C = ye({
props: r,
muiFormControl: c,
states: ["size", "variant", "required", "focused"]
}), I = {
...r,
disableAnimation: p,
formControl: c,
shrink: f,
size: C.size,
variant: C.variant,
required: C.required,
focused: C.focused
}, R = Ao(I);
return /* @__PURE__ */ g(Uo, {
"data-shrink": f,
ref: n,
className: pe(R.root, v),
...m,
ownerState: I,
classes: R
});
});
process.env.NODE_ENV !== "production" && (Do.propTypes = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the d.ts file and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* The content of the component.
*/
children: 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).
*/
color: e.oneOfType([e.oneOf(["error", "info", "primary", "secondary", "success", "warning"]), e.string]),
/**
* If `true`, the transition animation is disabled.
* @default false
*/
disableAnimation: e.bool,
/**
* If `true`, the component is disabled.
*/
disabled: e.bool,
/**
* If `true`, the label is displayed in an error state.
*/
error: e.bool,
/**
* If `true`, the `input` of this label is focused.
*/
focused: e.bool,
/**
* If `dense`, will adjust vertical spacing. This is normally obtained via context from
* FormControl.
*/
margin: e.oneOf(["dense"]),
/**
* if `true`, the label will indicate that the `input` is required.
*/
required: e.bool,
/**
* If `true`, the label is shrunk.
*/
shrink: e.bool,
/**
* The size of the component.
* @default 'medium'
*/
size: e.oneOfType([e.oneOf(["medium", "small"]), e.string]),
/**
* 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 variant to use.
*/
variant: e.oneOf(["filled", "outlined", "standard"])
});
function zo(o) {
return _("MuiNativeSelect", o);
}
const Ne = q("MuiNativeSelect", ["root", "select", "multiple", "filled", "outlined", "standard", "disabled", "icon", "iconOpen", "iconFilled", "iconOutlined", "iconStandard", "nativeInput", "error"]), Vo = (o) => {
const {
classes: t,
variant: n,
disabled: r,
multiple: p,
open: d,
error: a
} = o, i = {
select: ["select", n, r && "disabled", p && "multiple", a && "error"],
icon: ["icon", `icon${K(n)}`, d && "iconOpen", r && "disabled"]
};
return A(i, zo, t);
}, Qe = O("select", {
name: "MuiNativeSelect"
})(({
theme: o
}) => ({
// Reset
MozAppearance: "none",
// Reset
WebkitAppearance: "none",
// When interacting quickly, the text can end up selected.
// Native select can't be selected either.
userSelect: "none",
// Reset
borderRadius: 0,
cursor: "pointer",
"&:focus": {
// Reset Chrome style
borderRadius: 0
},
[`&.${Ne.disabled}`]: {
cursor: "default"
},
"&[multiple]": {
height: "auto"
},
"&:not([multiple]) option, &:not([multiple]) optgroup": {
backgroundColor: (o.vars || o).palette.background.paper
},
variants: [{
props: ({
ownerState: t
}) => t.variant !== "filled" && t.variant !== "outlined",
style: {
// Bump specificity to allow extending custom inputs
"&&&": {
paddingRight: 24,
minWidth: 16
// So it doesn't collapse.
}
}
}, {
props: {
variant: "filled"
},
style: {
"&&&": {
paddingRight: 32
}
}
}, {
props: {
variant: "outlined"
},
style: {
borderRadius: (o.vars || o).shape.borderRadius,
"&:focus": {
borderRadius: (o.vars || o).shape.borderRadius
// Reset the reset for Chrome style
},
"&&&": {
paddingRight: 32
}
}
}]
})), qo = O(Qe, {
name: "MuiNativeSelect",
slot: "Select",
shouldForwardProp: $,
overridesResolver: (o, t) => {
const {
ownerState: n
} = o;
return [t.select, t[n.variant], n.error && t.error, {
[`&.${Ne.multiple}`]: t.multiple
}];
}
})({}), Ze = O("svg", {
name: "MuiNativeSelect"
})(({
theme: o
}) => ({
// We use a position absolute over a flexbox in order to forward the pointer events
// to the input and to support wrapping tags..
position: "absolute",
right: 0,
// Center vertically, height is 1em
top: "calc(50% - .5em)",
// Don't block pointer events on the select under the icon.
pointerEvents: "none",
color: (o.vars || o).palette.action.active,
[`&.${Ne.disabled}`]: {
color: (o.vars || o).palette.action.disabled
},
variants: [{
props: ({
ownerState: t
}) => t.open,
style: {
transform: "rotate(180deg)"
}
}, {
props: {
variant: "filled"
},
style: {
right: 7
}
}, {
props: {
variant: "outlined"
},
style: {
right: 7
}
}]
})), _o = O(Ze, {
name: "MuiNativeSelect",
slot: "Icon",
overridesResolver: (o, t) => {
const {
ownerState: n
} = o;
return [t.icon, n.variant && t[`icon${K(n.variant)}`], n.open && t.iconOpen];
}
})({}), eo = /* @__PURE__ */ u.forwardRef(function(t, n) {
const {
className: r,
disabled: p,
error: d,
IconComponent: a,
inputRef: i,
variant: v = "standard",
...m
} = t, c = {
...t,
disabled: p,
variant: v,
error: d
}, f = Vo(c);
return /* @__PURE__ */ Oe(u.Fragment, {
children: [/* @__PURE__ */ g(qo, {
ownerState: c,
className: pe(f.select, r),
disabled: p,
ref: i || n,
...m
}), t.multiple ? null : /* @__PURE__ */ g(_o, {
as: a,
ownerState: c,
className: f.icon
})]
});
});
process.env.NODE_ENV !== "production" && (eo.propTypes = {
/**
* The option elements to populate the select with.
* Can be some `<option>` elements.
*/
children: e.node,
/**
* Override or extend the styles applied to the component.
*/
classes: e.object,
/**
* The CSS class name of the select element.
*/
className: e.string,
/**
* If `true`, the select is disabled.
*/
disabled: e.bool,
/**
* If `true`, the `select input` will indicate an error.
*/
error: e.bool,
/**
* The icon that displays the arrow.
*/
IconComponent: e.elementType.isRequired,
/**
* Use that prop to pass a ref to the native select element.
* @deprecated
*/
inputRef: Q,
/**
* @ignore
*/
multiple: e.bool,
/**
* Name attribute of the `select` or hidden `input` element.
*/
name: e.string,
/**
* Callback fired when a menu item is selected.
*
* @param {object} event The event source of the callback.
* You can pull out the new value by accessing `event.target.value` (string).
*/
onChange: e.func,
/**
* The input value.
*/
value: e.any,
/**
* The variant to use.
*/
variant: e.oneOf(["standard", "outlined", "filled"])
});
function oo(o) {
return _("MuiSelect", o);
}
const G = q("MuiSelect", ["root", "select", "multiple", "filled", "outlined", "standard", "disabled", "focused", "icon", "iconOpen", "iconFilled", "iconOutlined", "iconStandard", "nativeInput", "error"]);
var He;
const Ko = O(Qe, {
name: "MuiSelect",
slot: "Select",
overridesResolver: (o, t) => {
const {
ownerState: n
} = o;
return [
// Win specificity over the input base
{
[`&.${G.select}`]: t.select
},
{
[`&.${G.select}`]: t[n.variant]
},
{
[`&.${G.error}`]: t.error
},
{
[`&.${G.multiple}`]: t.multiple
}
];
}
})({
// Win specificity over the input base
[`&.${G.select}`]: {
height: "auto",
// Resets for multiple select with chips
minHeight: "1.4375em",
// Required for select\text-field height consistency
textOverflow: "ellipsis",
whiteSpace: "nowrap",
overflow: "hidden"
}
}), Xo = O(Ze, {
name: "MuiSelect",
slot: "Icon",
overridesResolver: (o, t) => {
const {
ownerState: n
} = o;
return [t.icon, n.variant && t[`icon${K(n.variant)}`], n.open && t.iconOpen];
}
})({}), Ho = O("input", {
shouldForwardProp: (o) => Co(o) && o !== "classes",
name: "MuiSelect",
slot: "NativeInput"
})({
bottom: 0,
left: 0,
position: "absolute",
opacity: 0,
pointerEvents: "none",
width: "100%",
boxSizing: "border-box"
});
function Ye(o, t) {
return typeof t == "object" && t !== null ? o === t : String(o) === String(t);
}
function Yo(o) {
return o == null || typeof o == "string" && !o.trim();
}
const Go = (o) => {
const {
classes: t,
variant: n,
disabled: r,
multiple: p,
open: d,
error: a
} = o, i = {
select: ["select", n, r && "disabled", p && "multiple", a && "error"],
icon: ["icon", `icon${K(n)}`, d && "iconOpen", r && "disabled"],
nativeInput: ["nativeInput"]
};
return A(i, oo, t);
}, to = /* @__PURE__ */ u.forwardRef(function(t, n) {
var ze, Ve, qe, _e;
const {
"aria-describedby": r,
"aria-label": p,
autoFocus: d,
autoWidth: a,
children: i,
className: v,
defaultOpen: m,
defaultValue: c,
disabled: f,
displayEmpty: C,
error: I = !1,
IconComponent: R,
inputRef: T,
labelId: y,
MenuProps: h = {},
multiple: S,
name: x,
onBlur: k,
onChange: E,
onClose: F,
onFocus: de,
onOpen: Z,
open: ee,
readOnly: oe,
renderValue: te,
required: X,
SelectDisplayProps: N = {},
tabIndex: j,
// catching `type` from Input which makes no sense for SelectInput
type: ue,
value: $e,
variant: ne = "standard",
...U
} = t, [b, Me] = Xe({
controlled: $e,
default: c,
name: "Select"
}), [je, so] = Xe({
controlled: ee,
default: m,
name: "Select"
}), Le = u.useRef(null), L = u.useRef(null), [B, ao] = u.useState(null), {
current: ce
} = u.useRef(ee != null), [io, Be] = u.useState(), lo = Je(n, T), po = u.useCallback((s) => {
L.current = s, s && ao(s);
}, []), re = B == null ? void 0 : B.parentNode;
u.useImperativeHandle(lo, () => ({
focus: () => {
L.current.focus();
},
node: Le.current,
value: b
}), [b]), u.useEffect(() => {
m && je && B && !ce && (Be(a ? null : re.clientWidth), L.current.focus());
}, [B, a]), u.useEffect(() => {
d && L.current.focus();
}, [d]), u.useEffect(() => {
if (!y)
return;
const s = Ro(L.current).getElementById(y);
if (s) {
const l = () => {
getSelection().isCollapsed && L.current.focus();
};
return s.addEventListener("click", l), () => {
s.removeEventListener("click", l);
};
}
}, [y]);
const se = (s, l) => {
s ? Z && Z(l) : F && F(l), ce || (Be(a ? null : re.clientWidth), so(s));
}, uo = (s) => {
s.button === 0 && (s.preventDefault(), L.current.focus(), se(!0, s));
}, co = (s) => {
se(!1, s);
}, ae = u.Children.toArray(i), fo = (s) => {
const l = ae.find((w) => w.props.value === s.target.value);
l !== void 0 && (Me(l.props.value), E && E(s, l));
}, mo = (s) => (l) => {
let w;
if (l.currentTarget.hasAttribute("tabindex")) {
if (S) {
w = Array.isArray(b) ? b.slice() : [];
const V = b.indexOf(s.props.value);
V === -1 ? w.push(s.props.value) : w.splice(V, 1);
} else
w = s.props.value;
if (s.props.onClick && s.props.onClick(l), b !== w && (Me(w), E)) {
const V = l.nativeEvent || l, Ke = new V.constructor(V.type, V);
Object.defineProperty(Ke, "target", {
writable: !0,
value: {
value: w,
name: x
}
}), E(Ke, s);
}
S || se(!1, l);
}
}, bo = (s) => {
oe || [
" ",
"ArrowUp",
"ArrowDown",
// The native select doesn't respond to enter on macOS, but it's recommended by
// https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
"Enter"
].includes(s.key) && (s.preventDefault(), se(!0, s));
}, H = B !== null && je, go = (s) => {
!H && k && (Object.defineProperty(s, "target", {
writable: !0,
value: {
value: b,
name: x
}
}), k(s));
};
delete U["aria-invalid"];
let D, We;
const ie = [];
let le = !1, fe = !1;
(wo({
value: b
}) || C) && (te ? D = te(b) : le = !0);
const vo = ae.map((s) => {
if (!/* @__PURE__ */ u.isValidElement(s))
return null;
process.env.NODE_ENV !== "production" && ho.isFragment(s) && console.error(["MUI: The Select component doesn't accept a Fragment as a child.", "Consider providing an array instead."].join(`
`));
let l;
if (S) {
if (!Array.isArray(b))
throw new Error(process.env.NODE_ENV !== "production" ? "MUI: The `value` prop must be an array when using the `Select` component with `multiple`." : Oo(2));
l = b.some((w) => Ye(w, s.props.value)), l && le && ie.push(s.props.children);
} else
l = Ye(b, s.props.value), l && le && (We = s.props.children);
return l && (fe = !0), /* @__PURE__ */ u.cloneElement(s, {
"aria-selected": l ? "true" : "false",
onClick: mo(s),
onKeyUp: (w) => {
w.key === " " && w.preventDefault(), s.props.onKeyUp && s.props.onKeyUp(w);
},
role: "option",
selected: l,
value: void 0,
// The value is most likely not a valid HTML attribute.
"data-value": s.props.value
// Instead, we provide it as a data attribute.
});
});
process.env.NODE_ENV !== "production" && u.useEffect(() => {
if (!fe && !S && b !== "") {
const s = ae.map((l) => l.props.value);
console.warn([`MUI: You have provided an out-of-range value \`${b}\` for the select ${x ? `(name="${x}") ` : ""}component.`, "Consider providing a value that matches one of the available options or ''.", `The available values are ${s.filter((l) => l != null).map((l) => `\`${l}\``).join(", ") || '""'}.`].join(`
`));
}
}, [fe, ae, S, x, b]), le && (S ? ie.length === 0 ? D = null : D = ie.reduce((s, l, w) => (s.push(l), w < ie.length - 1 && s.push(", "), s), []) : D = We);
let Ae = io;
!a && ce && B && (Ae = re.clientWidth);
let me;
typeof j < "u" ? me = j : me = f ? null : 0;
const Ue = N.id || (x ? `mui-component-select-${x}` : void 0), z = {
...t,
variant: ne,
value: b,
open: H,
error: I
}, be = Go(z), ge = {
...h.PaperProps,
...typeof ((ze = h.slotProps) == null ? void 0 : ze.paper) == "function" ? h.slotProps.paper(z) : (Ve = h.slotProps) == null ? void 0 : Ve.paper
}, yo = {
...h.MenuListProps,
...typeof ((qe = h.slotProps) == null ? void 0 : qe.list) == "function" ? h.slotProps.list(z) : (_e = h.slotProps) == null ? void 0 : _e.list
}, De = To();
return /* @__PURE__ */ Oe(u.Fragment, {
children: [/* @__PURE__ */ g(Ko, {
as: "div",
ref: po,
tabIndex: me,
role: "combobox",
"aria-controls": H ? De : void 0,
"aria-disabled": f ? "true" : void 0,
"aria-expanded": H ? "true" : "false",
"aria-haspopup": "listbox",
"aria-label": p,
"aria-labelledby": [y, Ue].filter(Boolean).join(" ") || void 0,
"aria-describedby": r,
"aria-required": X ? "true" : void 0,
"aria-invalid": I ? "true" : void 0,
onKeyDown: bo,
onMouseDown: f || oe ? null : uo,
onBlur: go,
onFocus: de,
...N,
ownerState: z,
className: pe(N.className, be.select, v),
id: Ue,
children: Yo(D) ? (
// notranslate needed while Google Translate will not fix zero-width space issue
He || (He = /* @__PURE__ */ g("span", {
className: "notranslate",
"aria-hidden": !0,
children: ""
}))
) : D
}), /* @__PURE__ */ g(Ho, {
"aria-invalid": I,
value: Array.isArray(b) ? b.join(",") : b,
name: x,
ref: Le,
"aria-hidden": !0,
onChange: fo,
tabIndex: -1,
disabled: f,
className: be.nativeInput,
autoFocus: d,
required: X,
...U,
ownerState: z
}), /* @__PURE__ */ g(Xo, {
as: R,
className: be.icon,
ownerState: z
}), /* @__PURE__ */ g(xo, {
id: `menu-${x || ""}`,
anchorEl: re,
open: H,
onClose: co,
anchorOrigin: {
vertical: "bottom",
horizontal: "center"
},
transformOrigin: {
vertical: "top",
horizontal: "center"
},
...h,
slotProps: {
...h.slotProps,
list: {
"aria-labelledby": y,
role: "listbox",
"aria-multiselectable": S ? "true" : void 0,
disableListWrap: !0,
id: De,
...yo
},
paper: {
...ge,
style: {
minWidth: Ae,
...ge != null ? ge.style : null
}
}
},
children: vo
})]
});
});
process.env.NODE_ENV !== "production" && (to.propTypes = {
/**
* @ignore
*/
"aria-describedby": e.string,
/**
* @ignore
*/
"aria-label": e.string,
/**
* @ignore
*/
autoFocus: e.bool,
/**
* If `true`, the width of the popover will automatically be set according to the items inside the
* menu, otherwise it will be at least the width of the select input.
*/
autoWidth: e.bool,
/**
* The option elements to populate the select with.
* Can be some `<MenuItem>` elements.
*/
children: e.node,
/**
* Override or extend the styles applied to the component.
*/
classes: e.object,
/**
* The CSS class name of the select element.
*/
className: e.string,
/**
* If `true`, the component is toggled on mount. Use when the component open state is not controlled.
* You can only use it when the `native` prop is `false` (default).
*/
defaultOpen: e.bool,
/**
* The default value. Use when the component is not controlled.
*/
defaultValue: e.any,
/**
* If `true`, the select is disabled.
*/
disabled: e.bool,
/**
* If `true`, the selected item is displayed even if its value is empty.
*/
displayEmpty: e.bool,
/**
* If `true`, the `select input` will indicate an error.
*/
error: e.bool,
/**
* The icon that displays the arrow.
*/
IconComponent: e.elementType.isRequired,
/**
* Imperative handle implementing `{ value: T, node: HTMLElement, focus(): void }`
* Equivalent to `ref`
*/
inputRef: Q,
/**
* The ID of an element that acts as an additional label. The Select will
* be labelled by the additional label and the selected value.
*/
labelId: e.string,
/**
* Props applied to the [`Menu`](/material-ui/api/menu/) element.
*/
MenuProps: e.object,
/**
* If `true`, `value` must be an array and the menu will support multiple selections.
*/
multiple: e.bool,
/**
* Name attribute of the `select` or hidden `input` element.
*/
name: e.string,
/**
* @ignore
*/
onBlur: e.func,
/**
* Callback fired when a menu item is selected.
*
* @param {object} event The event source of the callback.
* You can pull out the new value by accessing `event.target.value` (any).
* @param {object} [child] The react element that was selected.
*/
onChange: e.func,
/**
* Callback fired when the component requests to be closed.
* Use in controlled mode (see open).
*
* @param {object} event The event source of the callback.
*/
onClose: e.func,
/**
* @ignore
*/
onFocus: e.func,
/**
* Callback fired when the component requests to be opened.
* Use in controlled mode (see open).
*
* @param {object} event The event source of the callback.
*/
onOpen: e.func,
/**
* If `true`, the component is shown.
*/
open: e.bool,
/**
* @ignore
*/
readOnly: e.bool,
/**
* Render the selected value.
*
* @param {any} value The `value` provided to the component.
* @returns {ReactNode}
*/
renderValue: e.func,
/**
* If `true`, the component is required.
*/
required: e.bool,
/**
* Props applied to the clickable div element.
*/
SelectDisplayProps: e.object,
/**
* @ignore
*/
tabIndex: e.oneOfType([e.number, e.string]),
/**
* @ignore
*/
type: e.any,
/**
* The input value.
*/
value: e.any,
/**
* The variant to use.
*/
variant: e.oneOf(["standard", "outlined", "filled"])
});
const Jo = (o) => {
const {
classes: t,
disableUnderline: n,
startAdornment: r,
endAdornment: p,
size: d,
hiddenLabel: a,
multiline: i
} = o, v = {
root: ["root", !n && "underline", r && "adornedStart", p && "adornedEnd", d === "small" && `size${K(d)}`, a && "hiddenLabel", i && "multiline"],
input: ["input"]
}, m = A(v, $o, t);
return {
...t,
// forward classes to the InputBase
...m
};
}, Qo = O(xe, {
shouldForwardProp: (o) => $(o) || o === "classes",
name: "MuiFilledInput",
slot: "Root",
overridesResolver: (o, t) => {
const {
ownerState: n
} = o;
return [...we(o, t), !n.disableUnderline && t.underline];
}
})(M(({
theme: o
}) => {
const t = o.palette.mode === "light", n = t ? "rgba(0, 0, 0, 0.42)" : "rgba(255, 255, 255, 0.7)", r = t ? "rgba(0, 0, 0, 0.06)" : "rgba(255, 255, 255, 0.09)", p = t ? "rgba(0, 0, 0, 0.09)" : "rgba(255, 255, 255, 0.13)", d = t ? "rgba(0, 0, 0, 0.12)" : "rgba(255, 255, 255, 0.12)";
return {
position: "relative",
backgroundColor: o.vars ? o.vars.palette.FilledInput.bg : r,
borderTopLeftRadius: (o.vars || o).shape.borderRadius,
borderTopRightRadius: (o.vars || o).shape.borderRadius,
transition: o.transitions.create("background-color", {
duration: o.transitions.duration.shorter,
easing: o.transitions.easing.easeOut
}),
"&:hover": {
backgroundColor: o.vars ? o.vars.palette.FilledInput.hoverBg : p,
// Reset on touch devices, it doesn't add specificity
"@media (hover: none)": {
backgroundColor: o.vars ? o.vars.palette.FilledInput.bg : r
}
},
[`&.${W.focused}`]: {
backgroundColor: o.vars ? o.vars.palette.FilledInput.bg : r
},
[`&.${W.disabled}`]: {
backgroundColor: o.vars ? o.vars.palette.FilledInput.disabledBg : d
},
variants: [{
props: ({
ownerState: a
}) => !a.disableUnderline,
style: {
"&::after": {
left: 0,
bottom: 0,
content: '""',
position: "absolute",
right: 0,
transform: "scaleX(0)",
transition: o.transitions.create("transform", {
duration: o.transitions.duration.shorter,
easing: o.transitions.easing.easeOut
}),
pointerEvents: "none"
// Transparent to the hover style.
},
[`&.${W.focused}:after`]: {
// translateX(0) is a workaround for Safari transform scale bug
// See https://github.com/mui/material-ui/issues/31766
transform: "scaleX(1) translateX(0)"
},
[`&.${W.error}`]: {
"&::before, &::after": {
borderBottomColor: (o.vars || o).palette.error.main
}
},
"&::before": {
borderBottom: `1px solid ${o.vars ? o.alpha(o.vars.palette.common.onBackground, o.vars.opacity.inputUnderline) : n}`,
left: 0,
bottom: 0,
content: '"\\00a0"',
position: "absolute",
right: 0,
transition: o.transitions.create("border-bottom-color", {
duration: o.transitions.duration.shorter
}),
pointerEvents: "none"
// Transparent to the hover style.
},
[`&:hover:not(.${W.disabled}, .${W.error}):before`]: {
borderBottom: `1px solid ${(o.vars || o).palette.text.primary}`
},
[`&.${W.disabled}:before`]: {
borderBottomStyle: "dotted"
}
}
}, ...Object.entries(o.palette).filter(Ce()).map(([a]) => {
var i;
return {
props: {
disableUnderline: !1,
color: a
},
style: {
"&::after": {
borderBottom: `2px solid ${(i = (o.vars || o).palette[a]) == null ? void 0 : i.main}`
}
}
};
}), {
props: ({
ownerState: a
}) => a.startAdornment,
style: {
paddingLeft: 12
}
}, {
props: ({
ownerState: a
}) => a.endAdornment,
style: {
paddingRight: 12
}
}, {
props: ({
ownerState: a
}) => a.multiline,
style: {
padding: "25px 12px 8px"
}
}, {
props: ({
ownerState: a,
size: i
}) => a.multiline && i === "small",
style: {
paddingTop: 21,
paddingBottom: 4
}
}, {
props: ({
ownerState: a
}) => a.multiline && a.hiddenLabel,
style: {
paddingTop: 16,
paddingBottom: 17
}
}, {
props: ({
ownerState: a
}) => a.multiline && a.hiddenLabel && a.size === "small",
style: {
paddingTop: 8,
paddingBottom: 9
}
}]
};
})), Zo = O(Re, {
name: "MuiFilledInput",
slot: "Input",
overridesResolver: Te
})(M(({
theme: o
}) => ({
paddingTop: 25,
paddingRight: 12,
paddingBottom: 8,
paddingLeft: 12,
...!o.vars && {
"&:-webkit-autofill": {
WebkitBoxShadow: o.palette.mode === "light" ? null : "0 0 0 100px #266798 inset",
WebkitTextFillColor: o.palette.mode === "light" ? null : "#fff",
caretColor: o.palette.mode === "light" ? null : "#fff",
borderTopLeftRadius: "inherit",
borderTopRightRadius: "inherit"
}
},
...o.vars && {
"&:-webkit-autofill": {
borderTopLeftRadius: "inherit",
borderTopRightRadius: "inherit"
},
[o.getColorSchemeSelector("dark")]: {
"&:-webkit-autofill": {
WebkitBoxShadow: "0 0 0 100px #266798 inset",
WebkitTextFillColor: "#fff",
caretColor: "#fff"
}
}
},
variants: [{
props: {
size: "small"
},
style: {
paddingTop: 21,
paddingBottom: 4
}
}, {
props: ({
ownerState: t
}) => t.hiddenLabel,
style: {
paddingTop: 16,
paddingBottom: 17
}
}, {
props: ({
ownerState: t
}) => t.startAdornment,
style: {
paddingLeft: 0
}
}, {
props: ({
ownerState: t
}) => t.endAdornment,
style: {
paddingRight: 0
}
}, {
props: ({
ownerState: t
}) => t.hiddenLabel && t.size === "small",
style: {
paddingTop: 8,
paddingBottom: 9
}
}, {
props: ({
ownerState: t
}) => t.multiline,
style: {
paddingTop: 0,
paddingBottom: 0,
paddingLeft: 0,
paddingRight: 0
}
}]
}))), ke = /* @__PURE__ */ u.forwardRef(function(t, n) {
const r = J({
props: t,
name: "MuiFilledInput"
}), {
disableUnderline: p = !1,
components: d = {},
componentsProps: a,
fullWidth: i = !1,
hiddenLabel: v,
// declare here to prevent spreading to DOM
inputComponent: m = "input",
multiline: c = !1,
slotProps: f,
slots: C = {},
type: I = "text",
...R
} = r, T = {
...r,
disableUnderline: p,
fullWidth: i,
inputComponent: m,
multiline: c,
type: I
}, y = Jo(r), h = {
root: {
ownerState: T
},
input: {
ownerState: T
}
}, S = f ?? a ? ve(h, f ?? a) : h, x = C.root ?? d.Root ?? Qo, k = C.input ?? d.Input ?? Zo;
return /* @__PURE__ */ g(Se, {
slots: {
root: x,
input: k
},
slotProps: S,
fullWidth: i,
inputComponent: m,
multiline: c,
ref: n,
type: I,
...R,
classes: y
});
});
process.env.NODE_ENV !== "production" && (ke.propTypes = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the d.ts file and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* 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,
/**
* 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"]), 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`, the input will not have an underline.
* @default false
*/
disableUnderline: 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,
/**
* If `true`, the label is hidden.
* This is used to increase density for a `FilledInput`.
* Be sure to add `aria-label` to the `input` element.
* @default false
*/
hiddenLabel: 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.elementType,
/**
* [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: Q,
/**
* 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 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,
/**
* 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,
/**
* 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 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 dep