@cgi-learning-hub/ui
Version:
@cgi-learning-hub/ui is an open-source React component library that implements UI for HUB's features
1,806 lines • 74.1 kB
JavaScript
import * as u from "react";
import { P as e } from "./index-Sy88PpwE.js";
import { F as V, G as q, O as ve, H as de, K as _, Y as mo, X as go } from "./identifier-PWESmBq6.js";
import { f as ye } from "./formControlState-vgaj2ksH.js";
import { u as he } from "./useFormControl-CatNKXAi.js";
import { u as G, s as h, c as A, r as F, e as vo } from "./DefaultPropsProvider-DqazQPtr.js";
import { m as M } from "./memoTheme-DAFDflPY.js";
import { jsx as g, jsxs as Oe } from "react/jsx-runtime";
import { a as yo, b as ho } from "./FormLabel-B3WAnPGP.js";
import { M as Oo } from "./Menu-9BK8jmzW.js";
import { r as J } from "./refType-Dp7CJc86.js";
import { i as Co } from "./utils-DWqc1kRF.js";
import { u as qe } from "./useControlled-nm4pBabJ.js";
import { u as He } from "./useForkRef-u29GSuCu.js";
import { o as Io } from "./ownerDocument-CUrv0DIK.js";
import { u as So } from "./useId-CK6Kn3Tn.js";
import { c as xo } from "./createSvgIcon-B1E6Wo8z.js";
import { g as wo } from "./elementAcceptingRef-CEweUuUA.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-BS5oknUK.js";
import { u as Ro } from "./useSlot-BzdKwDQ5.js";
function To(o) {
return q("MuiInput", o);
}
const H = {
...Ie,
...V("MuiInput", ["root", "underline", "input"])
};
function Po(o) {
return q("MuiOutlinedInput", o);
}
const P = {
...Ie,
...V("MuiOutlinedInput", ["root", "notchedOutline", "input"])
};
function No(o) {
return q("MuiFilledInput", o);
}
const W = {
...Ie,
...V("MuiFilledInput", ["root", "underline", "input", "adornedStart", "adornedEnd", "sizeSmall", "multiline", "hiddenLabel"])
}, $o = xo(/* @__PURE__ */ g("path", {
d: "M7 10l5 5 5-5z"
}), "ArrowDropDown"), ko = (o) => {
const {
classes: t,
disableUnderline: n
} = o, d = A({
root: ["root", !n && "underline"],
input: ["input"]
}, To, t);
return {
...t,
// forward classes to the InputBase
...d
};
}, Eo = h(xe, {
shouldForwardProp: (o) => F(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 = `rgba(${o.vars.palette.common.onBackgroundChannel} / ${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.
},
[`&.${H.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)"
},
[`&.${H.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(.${H.disabled}, .${H.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}`
}
},
[`&.${H.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}`
}
}
}))]
};
})), Fo = h(Re, {
name: "MuiInput",
slot: "Input",
overridesResolver: Te
})({}), Pe = /* @__PURE__ */ u.forwardRef(function(t, n) {
const r = G({
props: t,
name: "MuiInput"
}), {
disableUnderline: d = !1,
components: p = {},
componentsProps: a,
fullWidth: i = !1,
inputComponent: v = "input",
multiline: b = !1,
slotProps: c,
slots: f = {},
type: O = "text",
...C
} = r, R = ko(r), y = {
root: {
ownerState: {
disableUnderline: d
}
}
}, w = c ?? a ? ve(c ?? a, y) : y, I = f.root ?? p.Root ?? Eo, S = f.input ?? p.Input ?? Fo;
return /* @__PURE__ */ g(Se, {
slots: {
root: I,
input: S
},
slotProps: w,
fullWidth: i,
inputComponent: v,
multiline: b,
ref: n,
type: O,
...C,
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: J,
/**
* 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 Mo(o) {
return q("MuiInputLabel", o);
}
const Rt = V("MuiInputLabel", ["root", "focused", "disabled", "error", "required", "asterisk", "formControl", "sizeSmall", "shrink", "animated", "standard", "filled", "outlined"]), jo = (o) => {
const {
classes: t,
formControl: n,
size: r,
shrink: d,
disableAnimation: p,
variant: a,
required: i
} = o, v = {
root: ["root", n && "formControl", !p && "animated", d && "shrink", r && r !== "medium" && `size${_(r)}`, a],
asterisk: [i && "asterisk"]
}, b = A(v, Mo, t);
return {
...t,
// forward the focused, disabled, etc. classes to the FormLabel
...b
};
}, Lo = h(yo, {
shouldForwardProp: (o) => F(o) || o === "classes",
name: "MuiInputLabel",
slot: "Root",
overridesResolver: (o, t) => {
const {
ownerState: n
} = o;
return [{
[`& .${ho.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)"
}
}]
}))), Bo = /* @__PURE__ */ u.forwardRef(function(t, n) {
const r = G({
name: "MuiInputLabel",
props: t
}), {
disableAnimation: d = !1,
margin: p,
shrink: a,
variant: i,
className: v,
...b
} = r, c = he();
let f = a;
typeof f > "u" && c && (f = c.filled || c.focused || c.adornedStart);
const O = ye({
props: r,
muiFormControl: c,
states: ["size", "variant", "required", "focused"]
}), C = {
...r,
disableAnimation: d,
formControl: c,
shrink: f,
size: O.size,
variant: O.variant,
required: O.required,
focused: O.focused
}, R = jo(C);
return /* @__PURE__ */ g(Lo, {
"data-shrink": f,
ref: n,
className: de(R.root, v),
...b,
ownerState: C,
classes: R
});
});
process.env.NODE_ENV !== "production" && (Bo.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 Wo(o) {
return q("MuiNativeSelect", o);
}
const Ne = V("MuiNativeSelect", ["root", "select", "multiple", "filled", "outlined", "standard", "disabled", "icon", "iconOpen", "iconFilled", "iconOutlined", "iconStandard", "nativeInput", "error"]), Ao = (o) => {
const {
classes: t,
variant: n,
disabled: r,
multiple: d,
open: p,
error: a
} = o, i = {
select: ["select", n, r && "disabled", d && "multiple", a && "error"],
icon: ["icon", `icon${_(n)}`, p && "iconOpen", r && "disabled"]
};
return A(i, Wo, t);
}, Ye = h("select")(({
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
}
}
}]
})), Uo = h(Ye, {
name: "MuiNativeSelect",
slot: "Select",
shouldForwardProp: F,
overridesResolver: (o, t) => {
const {
ownerState: n
} = o;
return [t.select, t[n.variant], n.error && t.error, {
[`&.${Ne.multiple}`]: t.multiple
}];
}
})({}), Ge = h("svg")(({
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
}
}]
})), Do = h(Ge, {
name: "MuiNativeSelect",
slot: "Icon",
overridesResolver: (o, t) => {
const {
ownerState: n
} = o;
return [t.icon, n.variant && t[`icon${_(n.variant)}`], n.open && t.iconOpen];
}
})({}), Je = /* @__PURE__ */ u.forwardRef(function(t, n) {
const {
className: r,
disabled: d,
error: p,
IconComponent: a,
inputRef: i,
variant: v = "standard",
...b
} = t, c = {
...t,
disabled: d,
variant: v,
error: p
}, f = Ao(c);
return /* @__PURE__ */ Oe(u.Fragment, {
children: [/* @__PURE__ */ g(Uo, {
ownerState: c,
className: de(f.select, r),
disabled: d,
ref: i || n,
...b
}), t.multiple ? null : /* @__PURE__ */ g(Do, {
as: a,
ownerState: c,
className: f.icon
})]
});
});
process.env.NODE_ENV !== "production" && (Je.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: J,
/**
* @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 Qe(o) {
return q("MuiSelect", o);
}
const Y = V("MuiSelect", ["root", "select", "multiple", "filled", "outlined", "standard", "disabled", "focused", "icon", "iconOpen", "iconFilled", "iconOutlined", "iconStandard", "nativeInput", "error"]);
var _e;
const zo = h(Ye, {
name: "MuiSelect",
slot: "Select",
overridesResolver: (o, t) => {
const {
ownerState: n
} = o;
return [
// Win specificity over the input base
{
[`&.${Y.select}`]: t.select
},
{
[`&.${Y.select}`]: t[n.variant]
},
{
[`&.${Y.error}`]: t.error
},
{
[`&.${Y.multiple}`]: t.multiple
}
];
}
})({
// Win specificity over the input base
[`&.${Y.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"
}
}), Vo = h(Ge, {
name: "MuiSelect",
slot: "Icon",
overridesResolver: (o, t) => {
const {
ownerState: n
} = o;
return [t.icon, n.variant && t[`icon${_(n.variant)}`], n.open && t.iconOpen];
}
})({}), qo = h("input", {
shouldForwardProp: (o) => vo(o) && o !== "classes",
name: "MuiSelect",
slot: "NativeInput"
})({
bottom: 0,
left: 0,
position: "absolute",
opacity: 0,
pointerEvents: "none",
width: "100%",
boxSizing: "border-box"
});
function Ke(o, t) {
return typeof t == "object" && t !== null ? o === t : String(o) === String(t);
}
function _o(o) {
return o == null || typeof o == "string" && !o.trim();
}
const Ko = (o) => {
const {
classes: t,
variant: n,
disabled: r,
multiple: d,
open: p,
error: a
} = o, i = {
select: ["select", n, r && "disabled", d && "multiple", a && "error"],
icon: ["icon", `icon${_(n)}`, p && "iconOpen", r && "disabled"],
nativeInput: ["nativeInput"]
};
return A(i, Qe, t);
}, Ze = /* @__PURE__ */ u.forwardRef(function(t, n) {
var ze;
const {
"aria-describedby": r,
"aria-label": d,
autoFocus: p,
autoWidth: a,
children: i,
className: v,
defaultOpen: b,
defaultValue: c,
disabled: f,
displayEmpty: O,
error: C = !1,
IconComponent: R,
inputRef: T,
labelId: y,
MenuProps: w = {},
multiple: I,
name: S,
onBlur: $,
onChange: k,
onClose: E,
onFocus: pe,
onOpen: Q,
open: Z,
readOnly: ee,
renderValue: oe,
required: K,
SelectDisplayProps: N = {},
tabIndex: j,
// catching `type` from Input which makes no sense for SelectInput
type: ue,
value: Fe,
variant: te = "standard",
...U
} = t, [m, Me] = qe({
controlled: Fe,
default: c,
name: "Select"
}), [je, to] = qe({
controlled: Z,
default: b,
name: "Select"
}), Le = u.useRef(null), L = u.useRef(null), [B, no] = u.useState(null), {
current: ce
} = u.useRef(Z != null), [ro, Be] = u.useState(), so = He(n, T), ao = u.useCallback((s) => {
L.current = s, s && no(s);
}, []), ne = B == null ? void 0 : B.parentNode;
u.useImperativeHandle(so, () => ({
focus: () => {
L.current.focus();
},
node: Le.current,
value: m
}), [m]), u.useEffect(() => {
b && je && B && !ce && (Be(a ? null : ne.clientWidth), L.current.focus());
}, [B, a]), u.useEffect(() => {
p && L.current.focus();
}, [p]), u.useEffect(() => {
if (!y)
return;
const s = Io(L.current).getElementById(y);
if (s) {
const l = () => {
getSelection().isCollapsed && L.current.focus();
};
return s.addEventListener("click", l), () => {
s.removeEventListener("click", l);
};
}
}, [y]);
const re = (s, l) => {
s ? Q && Q(l) : E && E(l), ce || (Be(a ? null : ne.clientWidth), to(s));
}, io = (s) => {
s.button === 0 && (s.preventDefault(), L.current.focus(), re(!0, s));
}, lo = (s) => {
re(!1, s);
}, se = u.Children.toArray(i), po = (s) => {
const l = se.find((x) => x.props.value === s.target.value);
l !== void 0 && (Me(l.props.value), k && k(s, l));
}, uo = (s) => (l) => {
let x;
if (l.currentTarget.hasAttribute("tabindex")) {
if (I) {
x = Array.isArray(m) ? m.slice() : [];
const z = m.indexOf(s.props.value);
z === -1 ? x.push(s.props.value) : x.splice(z, 1);
} else
x = s.props.value;
if (s.props.onClick && s.props.onClick(l), m !== x && (Me(x), k)) {
const z = l.nativeEvent || l, Ve = new z.constructor(z.type, z);
Object.defineProperty(Ve, "target", {
writable: !0,
value: {
value: x,
name: S
}
}), k(Ve, s);
}
I || re(!1, l);
}
}, co = (s) => {
ee || [
" ",
"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(), re(!0, s));
}, X = B !== null && je, fo = (s) => {
!X && $ && (Object.defineProperty(s, "target", {
writable: !0,
value: {
value: m,
name: S
}
}), $(s));
};
delete U["aria-invalid"];
let D, We;
const ae = [];
let ie = !1, fe = !1;
(Co({
value: m
}) || O) && (oe ? D = oe(m) : ie = !0);
const bo = se.map((s) => {
if (!/* @__PURE__ */ u.isValidElement(s))
return null;
process.env.NODE_ENV !== "production" && mo.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 (I) {
if (!Array.isArray(m))
throw new Error(process.env.NODE_ENV !== "production" ? "MUI: The `value` prop must be an array when using the `Select` component with `multiple`." : go(2));
l = m.some((x) => Ke(x, s.props.value)), l && ie && ae.push(s.props.children);
} else
l = Ke(m, s.props.value), l && ie && (We = s.props.children);
return l && (fe = !0), /* @__PURE__ */ u.cloneElement(s, {
"aria-selected": l ? "true" : "false",
onClick: uo(s),
onKeyUp: (x) => {
x.key === " " && x.preventDefault(), s.props.onKeyUp && s.props.onKeyUp(x);
},
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 && !I && m !== "") {
const s = se.map((l) => l.props.value);
console.warn([`MUI: You have provided an out-of-range value \`${m}\` for the select ${S ? `(name="${S}") ` : ""}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, se, I, S, m]), ie && (I ? ae.length === 0 ? D = null : D = ae.reduce((s, l, x) => (s.push(l), x < ae.length - 1 && s.push(", "), s), []) : D = We);
let Ae = ro;
!a && ce && B && (Ae = ne.clientWidth);
let be;
typeof j < "u" ? be = j : be = f ? null : 0;
const Ue = N.id || (S ? `mui-component-select-${S}` : void 0), le = {
...t,
variant: te,
value: m,
open: X,
error: C
}, me = Ko(le), ge = {
...w.PaperProps,
...(ze = w.slotProps) == null ? void 0 : ze.paper
}, De = So();
return /* @__PURE__ */ Oe(u.Fragment, {
children: [/* @__PURE__ */ g(zo, {
as: "div",
ref: ao,
tabIndex: be,
role: "combobox",
"aria-controls": X ? De : void 0,
"aria-disabled": f ? "true" : void 0,
"aria-expanded": X ? "true" : "false",
"aria-haspopup": "listbox",
"aria-label": d,
"aria-labelledby": [y, Ue].filter(Boolean).join(" ") || void 0,
"aria-describedby": r,
"aria-required": K ? "true" : void 0,
"aria-invalid": C ? "true" : void 0,
onKeyDown: co,
onMouseDown: f || ee ? null : io,
onBlur: fo,
onFocus: pe,
...N,
ownerState: le,
className: de(N.className, me.select, v),
id: Ue,
children: _o(D) ? (
// notranslate needed while Google Translate will not fix zero-width space issue
_e || (_e = /* @__PURE__ */ g("span", {
className: "notranslate",
"aria-hidden": !0,
children: ""
}))
) : D
}), /* @__PURE__ */ g(qo, {
"aria-invalid": C,
value: Array.isArray(m) ? m.join(",") : m,
name: S,
ref: Le,
"aria-hidden": !0,
onChange: po,
tabIndex: -1,
disabled: f,
className: me.nativeInput,
autoFocus: p,
required: K,
...U,
ownerState: le
}), /* @__PURE__ */ g(Vo, {
as: R,
className: me.icon,
ownerState: le
}), /* @__PURE__ */ g(Oo, {
id: `menu-${S || ""}`,
anchorEl: ne,
open: X,
onClose: lo,
anchorOrigin: {
vertical: "bottom",
horizontal: "center"
},
transformOrigin: {
vertical: "top",
horizontal: "center"
},
...w,
slotProps: {
...w.slotProps,
list: {
"aria-labelledby": y,
role: "listbox",
"aria-multiselectable": I ? "true" : void 0,
disableListWrap: !0,
id: De,
...w.MenuListProps
},
paper: {
...ge,
style: {
minWidth: Ae,
...ge != null ? ge.style : null
}
}
},
children: bo
})]
});
});
process.env.NODE_ENV !== "production" && (Ze.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: J,
/**
* 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 Xo = (o) => {
const {
classes: t,
disableUnderline: n,
startAdornment: r,
endAdornment: d,
size: p,
hiddenLabel: a,
multiline: i
} = o, v = {
root: ["root", !n && "underline", r && "adornedStart", d && "adornedEnd", p === "small" && `size${_(p)}`, a && "hiddenLabel", i && "multiline"],
input: ["input"]
}, b = A(v, No, t);
return {
...t,
// forward classes to the InputBase
...b
};
}, Ho = h(xe, {
shouldForwardProp: (o) => F(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)", d = t ? "rgba(0, 0, 0, 0.09)" : "rgba(255, 255, 255, 0.13)", p = 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 : d,
// 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 : p
},
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 ? `rgba(${o.vars.palette.common.onBackgroundChannel} / ${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
}
}]
};
})), Yo = h(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
}
}]
}))), $e = /* @__PURE__ */ u.forwardRef(function(t, n) {
const r = G({
props: t,
name: "MuiFilledInput"
}), {
disableUnderline: d = !1,
components: p = {},
componentsProps: a,
fullWidth: i = !1,
hiddenLabel: v,
// declare here to prevent spreading to DOM
inputComponent: b = "input",
multiline: c = !1,
slotProps: f,
slots: O = {},
type: C = "text",
...R
} = r, T = {
...r,
disableUnderline: d,
fullWidth: i,
inputComponent: b,
multiline: c,
type: C
}, y = Xo(r), w = {
root: {
ownerState: T
},
input: {
ownerState: T
}
}, I = f ?? a ? ve(w, f ?? a) : w, S = O.root ?? p.Root ?? Ho, $ = O.input ?? p.Input ?? Yo;
return /* @__PURE__ */ g(Se, {
slots: {
root: S,
input: $
},
slotProps: I,
fullWidth: i,
inputComponent: b,
multiline: c,
ref: n,
type: C,
...R,
classes: y
});
});
process.env.NODE_ENV !== "production" && ($e.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: J,
/**
* 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.elementT