"use strict"; 'use client'; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); Object.defineProperty(exports, "__esModule", { value: true }); exports.rootOverridesResolver = exports.inputOverridesResolver = exports.default = exports.InputBaseRoot = exports.InputBaseComponent = void 0; var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose")); var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")); var _formatMuiErrorMessage2 = _interopRequireDefault(require("@mui/utils/formatMuiErrorMessage")); var React = _interopRequireWildcard(require("react")); var _propTypes = _interopRequireDefault(require("prop-types")); var _clsx = _interopRequireDefault(require("clsx")); var _elementTypeAcceptingRef = _interopRequireDefault(require("@mui/utils/elementTypeAcceptingRef")); var _refType = _interopRequireDefault(require("@mui/utils/refType")); var _base = require("@mui/base"); var _utils = require("@mui/base/utils"); var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses")); var _formControlState = _interopRequireDefault(require("../FormControl/formControlState")); var _FormControlContext = _interopRequireDefault(require("../FormControl/FormControlContext")); var _useFormControl = _interopRequireDefault(require("../FormControl/useFormControl")); var _styled = _interopRequireDefault(require("../styles/styled")); var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps")); var _capitalize = _interopRequireDefault(require("../utils/capitalize")); var _useForkRef = _interopRequireDefault(require("../utils/useForkRef")); var _useEnhancedEffect = _interopRequireDefault(require("../utils/useEnhancedEffect")); var _GlobalStyles = _interopRequireDefault(require("../GlobalStyles")); var _utils2 = require("./utils"); var _inputBaseClasses = _interopRequireWildcard(require("./inputBaseClasses")); var _jsxRuntime = require("react/jsx-runtime"); const _excluded = ["aria-describedby", "autoComplete", "autoFocus", "className", "color", "components", "componentsProps", "defaultValue", "disabled", "disableInjectingGlobalStyles", "endAdornment", "error", "fullWidth", "id", "inputComponent", "inputProps", "inputRef", "margin", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "onKeyUp", "placeholder", "readOnly", "renderSuffix", "rows", "size", "slotProps", "slots", "startAdornment", "type", "value"]; function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); } function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; } const rootOverridesResolver = (props, styles) => { const { ownerState } = props; return [styles.root, ownerState.formControl && styles.formControl, ownerState.startAdornment && styles.adornedStart, ownerState.endAdornment && styles.adornedEnd, ownerState.error && styles.error, ownerState.size === 'small' && styles.sizeSmall, ownerState.multiline && styles.multiline, ownerState.color && styles[`color${(0, _capitalize.default)(ownerState.color)}`], ownerState.fullWidth && styles.fullWidth, ownerState.hiddenLabel && styles.hiddenLabel]; }; exports.rootOverridesResolver = rootOverridesResolver; const inputOverridesResolver = (props, styles) => { const { ownerState } = props; return [styles.input, ownerState.size === 'small' && styles.inputSizeSmall, ownerState.multiline && styles.inputMultiline, ownerState.type === 'search' && styles.inputTypeSearch, ownerState.startAdornment && styles.inputAdornedStart, ownerState.endAdornment && styles.inputAdornedEnd, ownerState.hiddenLabel && styles.inputHiddenLabel]; }; exports.inputOverridesResolver = inputOverridesResolver; const useUtilityClasses = ownerState => { const { classes, color, disabled, error, endAdornment, focused, formControl, fullWidth, hiddenLabel, multiline, readOnly, size, startAdornment, type } = ownerState; const slots = { root: ['root', `color${(0, _capitalize.default)(color)}`, disabled && 'disabled', error && 'error', fullWidth && 'fullWidth', focused && 'focused', formControl && 'formControl', size && size !== 'medium' && `size${(0, _capitalize.default)(size)}`, multiline && 'multiline', startAdornment && 'adornedStart', endAdornment && 'adornedEnd', hiddenLabel && 'hiddenLabel', readOnly && 'readOnly'], input: ['input', disabled && 'disabled', type === 'search' && 'inputTypeSearch', multiline && 'inputMultiline', size === 'small' && 'inputSizeSmall', hiddenLabel && 'inputHiddenLabel', startAdornment && 'inputAdornedStart', endAdornment && 'inputAdornedEnd', readOnly && 'readOnly'] }; return (0, _composeClasses.default)(slots, _inputBaseClasses.getInputBaseUtilityClass, classes); }; const InputBaseRoot = exports.InputBaseRoot = (0, _styled.default)('div', { name: 'MuiInputBase', slot: 'Root', overridesResolver: rootOverridesResolver })(({ theme, ownerState }) => (0, _extends2.default)({}, theme.typography.body1, { color: (theme.vars || theme).palette.text.primary, lineHeight: '1.4375em', // 23px boxSizing: 'border-box', // Prevent padding issue with fullWidth. position: 'relative', cursor: 'text', display: 'inline-flex', alignItems: 'center', [`&.${_inputBaseClasses.default.disabled}`]: { color: (theme.vars || theme).palette.text.disabled, cursor: 'default' } }, ownerState.multiline && (0, _extends2.default)({ padding: '4px 0 5px' }, ownerState.size === 'small' && { paddingTop: 1 }), ownerState.fullWidth && { width: '100%' })); const InputBaseComponent = exports.InputBaseComponent = (0, _styled.default)('input', { name: 'MuiInputBase', slot: 'Input', overridesResolver: inputOverridesResolver })(({ theme, ownerState }) => { const light = theme.palette.mode === 'light'; const placeholder = (0, _extends2.default)({ color: 'currentColor' }, theme.vars ? { opacity: theme.vars.opacity.inputPlaceholder } : { opacity: light ? 0.42 : 0.5 }, { transition: theme.transitions.create('opacity', { duration: theme.transitions.duration.shorter }) }); const placeholderHidden = { opacity: '0 !important' }; const placeholderVisible = theme.vars ? { opacity: theme.vars.opacity.inputPlaceholder } : { opacity: light ? 0.42 : 0.5 }; return (0, _extends2.default)({ 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%', // Fix IE11 width issue animationName: 'mui-auto-fill-cancel', animationDuration: '10ms', '&::-webkit-input-placeholder': placeholder, '&::-moz-placeholder': placeholder, // Firefox 19+ '&:-ms-input-placeholder': placeholder, // IE11 '&::-ms-input-placeholder': placeholder, // 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] + .${_inputBaseClasses.default.formControl} &`]: { '&::-webkit-input-placeholder': placeholderHidden, '&::-moz-placeholder': placeholderHidden, // Firefox 19+ '&:-ms-input-placeholder': placeholderHidden, // IE11 '&::-ms-input-placeholder': placeholderHidden, // Edge '&:focus::-webkit-input-placeholder': placeholderVisible, '&:focus::-moz-placeholder': placeholderVisible, // Firefox 19+ '&:focus:-ms-input-placeholder': placeholderVisible, // IE11 '&:focus::-ms-input-placeholder': placeholderVisible // Edge }, [`&.${_inputBaseClasses.default.disabled}`]: { opacity: 1, // Reset iOS opacity WebkitTextFillColor: (theme.vars || theme).palette.text.disabled // Fix opacity Safari bug }, '&:-webkit-autofill': { animationDuration: '5000s', animationName: 'mui-auto-fill' } }, ownerState.size === 'small' && { paddingTop: 1 }, ownerState.multiline && { height: 'auto', resize: 'none', padding: 0, paddingTop: 0 }, ownerState.type === 'search' && { // Improve type search style. MozAppearance: 'textfield' }); }); const inputGlobalStyles = /*#__PURE__*/(0, _jsxRuntime.jsx)(_GlobalStyles.default, { styles: { '@keyframes mui-auto-fill': { from: { display: 'block' } }, '@keyframes mui-auto-fill-cancel': { from: { display: 'block' } } } }); /** * `InputBase` contains as few styles as possible. * It aims to be a simple building block for creating an input. * It contains a load of style reset and some state logic. */ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref) { var _slotProps$input; const props = (0, _useThemeProps.default)({ props: inProps, name: 'MuiInputBase' }); const { 'aria-describedby': ariaDescribedby, autoComplete, autoFocus, className, components = {}, componentsProps = {}, defaultValue, disabled, disableInjectingGlobalStyles, endAdornment, fullWidth = false, id, inputComponent = 'input', inputProps: inputPropsProp = {}, inputRef: inputRefProp, maxRows, minRows, multiline = false, name, onBlur, onChange, onClick, onFocus, onKeyDown, onKeyUp, placeholder, readOnly, renderSuffix, rows, slotProps = {}, slots = {}, startAdornment, type = 'text', value: valueProp } = props, other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded); const value = inputPropsProp.value != null ? inputPropsProp.value : valueProp; const { current: isControlled } = React.useRef(value != null); const inputRef = React.useRef(); const handleInputRefWarning = React.useCallback(instance => { if (process.env.NODE_ENV !== 'production') { if (instance && instance.nodeName !== 'INPUT' && !instance.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('\n')); } } }, []); const handleInputRef = (0, _useForkRef.default)(inputRef, inputRefProp, inputPropsProp.ref, handleInputRefWarning); const [focused, setFocused] = React.useState(false); const muiFormControl = (0, _useFormControl.default)(); if (process.env.NODE_ENV !== 'production') { // eslint-disable-next-line react-hooks/rules-of-hooks React.useEffect(() => { if (muiFormControl) { return muiFormControl.registerEffect(); } return undefined; }, [muiFormControl]); } const fcs = (0, _formControlState.default)({ props, muiFormControl, states: ['color', 'disabled', 'error', 'hiddenLabel', 'size', 'required', 'filled'] }); fcs.focused = muiFormControl ? muiFormControl.focused : focused; // The blur won't fire when the disabled state is set on a focused input. // We need to book keep the focused state manually. React.useEffect(() => { if (!muiFormControl && disabled && focused) { setFocused(false); if (onBlur) { onBlur(); } } }, [muiFormControl, disabled, focused, onBlur]); const onFilled = muiFormControl && muiFormControl.onFilled; const onEmpty = muiFormControl && muiFormControl.onEmpty; const checkDirty = React.useCallback(obj => { if ((0, _utils2.isFilled)(obj)) { if (onFilled) { onFilled(); } } else if (onEmpty) { onEmpty(); } }, [onFilled, onEmpty]); (0, _useEnhancedEffect.default)(() => { if (isControlled) { checkDirty({ value }); } }, [value, checkDirty, isControlled]); const handleFocus = event => { // Fix a bug with IE11 where the focus/blur events are triggered // while the component is disabled. if (fcs.disabled) { event.stopPropagation(); return; } if (onFocus) { onFocus(event); } if (inputPropsProp.onFocus) { inputPropsProp.onFocus(event); } if (muiFormControl && muiFormControl.onFocus) { muiFormControl.onFocus(event); } else { setFocused(true); } }; const handleBlur = event => { if (onBlur) { onBlur(event); } if (inputPropsProp.onBlur) { inputPropsProp.onBlur(event); } if (muiFormControl && muiFormControl.onBlur) { muiFormControl.onBlur(event); } else { setFocused(false); } }; const handleChange = (event, ...args) => { if (!isControlled) { const element = event.target || inputRef.current; if (element == 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.` : (0, _formatMuiErrorMessage2.default)(1)); } checkDirty({ value: element.value }); } if (inputPropsProp.onChange) { inputPropsProp.onChange(event, ...args); } // Perform in the willUpdate if (onChange) { onChange(event, ...args); } }; // Check the input state on mount, in case it was filled by the user // or auto filled by the browser before the hydration (for SSR). React.useEffect(() => { checkDirty(inputRef.current); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); const handleClick = event => { if (inputRef.current && event.currentTarget === event.target) { inputRef.current.focus(); } if (onClick) { onClick(event); } }; let InputComponent = inputComponent; let inputProps = inputPropsProp; if (multiline && InputComponent === 'input') { if (rows) { if (process.env.NODE_ENV !== 'production') { if (minRows || maxRows) { console.warn('MUI: You can not use the `minRows` or `maxRows` props when the input `rows` prop is set.'); } } inputProps = (0, _extends2.default)({ type: undefined, minRows: rows, maxRows: rows }, inputProps); } else { inputProps = (0, _extends2.default)({ type: undefined, maxRows, minRows }, inputProps); } InputComponent = _base.TextareaAutosize; } const handleAutoFill = event => { // Provide a fake value as Chrome might not let you access it for security reasons. checkDirty(event.animationName === 'mui-auto-fill-cancel' ? inputRef.current : { value: 'x' }); }; React.useEffect(() => { if (muiFormControl) { muiFormControl.setAdornedStart(Boolean(startAdornment)); } }, [muiFormControl, startAdornment]); const ownerState = (0, _extends2.default)({}, props, { color: fcs.color || 'primary', disabled: fcs.disabled, endAdornment, error: fcs.error, focused: fcs.focused, formControl: muiFormControl, fullWidth, hiddenLabel: fcs.hiddenLabel, multiline, size: fcs.size, startAdornment, type }); const classes = useUtilityClasses(ownerState); const Root = slots.root || components.Root || InputBaseRoot; const rootProps = slotProps.root || componentsProps.root || {}; const Input = slots.input || components.Input || InputBaseComponent; inputProps = (0, _extends2.default)({}, inputProps, (_slotProps$input = slotProps.input) != null ? _slotProps$input : componentsProps.input); return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, { children: [!disableInjectingGlobalStyles && inputGlobalStyles, /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, (0, _extends2.default)({}, rootProps, !(0, _utils.isHostComponent)(Root) && { ownerState: (0, _extends2.default)({}, ownerState, rootProps.ownerState) }, { ref: ref, onClick: handleClick }, other, { className: (0, _clsx.default)(classes.root, rootProps.className, className, readOnly && 'MuiInputBase-readOnly'), children: [startAdornment, /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControlContext.default.Provider, { value: null, children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Input, (0, _extends2.default)({ ownerState: ownerState, "aria-invalid": fcs.error, "aria-describedby": ariaDescribedby, autoComplete: autoComplete, autoFocus: autoFocus, defaultValue: defaultValue, disabled: fcs.disabled, id: id, onAnimationStart: handleAutoFill, name: name, placeholder: placeholder, readOnly: readOnly, required: fcs.required, rows: rows, value: value, onKeyDown: onKeyDown, onKeyUp: onKeyUp, type: type }, inputProps, !(0, _utils.isHostComponent)(Input) && { as: InputComponent, ownerState: (0, _extends2.default)({}, ownerState, inputProps.ownerState) }, { ref: handleInputRef, className: (0, _clsx.default)(classes.input, inputProps.className, readOnly && 'MuiInputBase-readOnly'), onBlur: handleBlur, onChange: handleChange, onFocus: handleFocus })) }), endAdornment, renderSuffix ? renderSuffix((0, _extends2.default)({}, fcs, { startAdornment })) : null] }))] }); }); process.env.NODE_ENV !== "production" ? InputBase.propTypes /* remove-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': _propTypes.default.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: _propTypes.default.string, /** * If `true`, the `input` element is focused during the first mount. */ autoFocus: _propTypes.default.bool, /** * Override or extend the styles applied to the component. */ classes: _propTypes.default.object, /** * @ignore */ className: _propTypes.default.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: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.oneOf(['primary', 'secondary', 'error', 'info', 'success', 'warning']), _propTypes.default.string]), /** * The components used for each slot inside. * * This prop is an alias for the `slots` prop. * It's recommended to use the `slots` prop instead. * * @default {} */ components: _propTypes.default.shape({ Input: _propTypes.default.elementType, Root: _propTypes.default.elementType }), /** * The extra props for the slot components. * You can override the existing props or add new ones. * * This prop is an alias for the `slotProps` prop. * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future. * * @default {} */ componentsProps: _propTypes.default.shape({ input: _propTypes.default.object, root: _propTypes.default.object }), /** * The default value. Use when the component is not controlled. */ defaultValue: _propTypes.default.any, /** * If `true`, the component is disabled. * The prop defaults to the value (`false`) inherited from the parent FormControl component. */ disabled: _propTypes.default.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: _propTypes.default.bool, /** * End `InputAdornment` for this component. */ endAdornment: _propTypes.default.node, /** * If `true`, the `input` will indicate an error. * The prop defaults to the value (`false`) inherited from the parent FormControl component. */ error: _propTypes.default.bool, /** * If `true`, the `input` will take up the full width of its container. * @default false */ fullWidth: _propTypes.default.bool, /** * The id of the `input` element. */ id: _propTypes.default.string, /** * The component used for the `input` element. * Either a string to use a HTML element or a component. * @default 'input' */ inputComponent: _elementTypeAcceptingRef.default, /** * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element. * @default {} */ inputProps: _propTypes.default.object, /** * Pass a ref to the `input` element. */ inputRef: _refType.default, /** * 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: _propTypes.default.oneOf(['dense', 'none']), /** * Maximum number of rows to display when multiline option is set to true. */ maxRows: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]), /** * Minimum number of rows to display when multiline option is set to true. */ minRows: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]), /** * If `true`, a [TextareaAutosize](/material-ui/react-textarea-autosize/) element is rendered. * @default false */ multiline: _propTypes.default.bool, /** * Name attribute of the `input` element. */ name: _propTypes.default.string, /** * Callback fired when the `input` is blurred. * * Notice that the first argument (event) might be undefined. */ onBlur: _propTypes.default.func, /** * Callback fired when the value is changed. * * @param {React.ChangeEvent} event The event source of the callback. * You can pull out the new value by accessing `event.target.value` (string). */ onChange: _propTypes.default.func, /** * @ignore */ onClick: _propTypes.default.func, /** * @ignore */ onFocus: _propTypes.default.func, /** * Callback fired when the `input` doesn't satisfy its constraints. */ onInvalid: _propTypes.default.func, /** * @ignore */ onKeyDown: _propTypes.default.func, /** * @ignore */ onKeyUp: _propTypes.default.func, /** * The short hint displayed in the `input` before the user enters a value. */ placeholder: _propTypes.default.string, /** * It prevents the user from changing the value of the field * (not from interacting with the field). */ readOnly: _propTypes.default.bool, /** * @ignore */ renderSuffix: _propTypes.default.func, /** * If `true`, the `input` element is required. * The prop defaults to the value (`false`) inherited from the parent FormControl component. */ required: _propTypes.default.bool, /** * Number of rows to display when multiline option is set to true. */ rows: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]), /** * The size of the component. */ size: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.oneOf(['medium', 'small']), _propTypes.default.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: _propTypes.default.shape({ input: _propTypes.default.object, root: _propTypes.default.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: _propTypes.default.shape({ input: _propTypes.default.elementType, root: _propTypes.default.elementType }), /** * Start `InputAdornment` for this component. */ startAdornment: _propTypes.default.node, /** * The system prop that allows defining system overrides as well as additional CSS styles. */ sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]), /** * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types). * @default 'text' */ type: _propTypes.default.string, /** * The value of the `input` element, required for a controlled component. */ value: _propTypes.default.any } : void 0; var _default = exports.default = InputBase;