1 | import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
2 | import _extends from "@babel/runtime/helpers/esm/extends";
|
3 | const _excluded = ["components", "fullWidth", "inputComponent", "label", "multiline", "notched", "type"];
|
4 | import * as React from 'react';
|
5 | import PropTypes from 'prop-types';
|
6 | import { refType } from '@mui/utils';
|
7 | import { unstable_composeClasses as composeClasses } from '@mui/base';
|
8 | import NotchedOutline from './NotchedOutline';
|
9 | import useFormControl from '../FormControl/useFormControl';
|
10 | import formControlState from '../FormControl/formControlState';
|
11 | import styled, { rootShouldForwardProp } from '../styles/styled';
|
12 | import outlinedInputClasses, { getOutlinedInputUtilityClass } from './outlinedInputClasses';
|
13 | import InputBase, { rootOverridesResolver as inputBaseRootOverridesResolver, inputOverridesResolver as inputBaseInputOverridesResolver, InputBaseRoot, InputBaseComponent as InputBaseInput } from '../InputBase/InputBase';
|
14 | import useThemeProps from '../styles/useThemeProps';
|
15 | import { jsxs as _jsxs } from "react/jsx-runtime";
|
16 | import { jsx as _jsx } from "react/jsx-runtime";
|
17 |
|
18 | const useUtilityClasses = ownerState => {
|
19 | const {
|
20 | classes
|
21 | } = ownerState;
|
22 | const slots = {
|
23 | root: ['root'],
|
24 | notchedOutline: ['notchedOutline'],
|
25 | input: ['input']
|
26 | };
|
27 | const composedClasses = composeClasses(slots, getOutlinedInputUtilityClass, classes);
|
28 | return _extends({}, classes, composedClasses);
|
29 | };
|
30 |
|
31 | const OutlinedInputRoot = styled(InputBaseRoot, {
|
32 | shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
|
33 | name: 'MuiOutlinedInput',
|
34 | slot: 'Root',
|
35 | overridesResolver: inputBaseRootOverridesResolver
|
36 | })(({
|
37 | theme,
|
38 | ownerState
|
39 | }) => {
|
40 | const borderColor = theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)';
|
41 | return _extends({
|
42 | position: 'relative',
|
43 | borderRadius: (theme.vars || theme).shape.borderRadius,
|
44 | [`&:hover .${outlinedInputClasses.notchedOutline}`]: {
|
45 | borderColor: (theme.vars || theme).palette.text.primary
|
46 | },
|
47 |
|
48 | '@media (hover: none)': {
|
49 | [`&:hover .${outlinedInputClasses.notchedOutline}`]: {
|
50 | borderColor: theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : borderColor
|
51 | }
|
52 | },
|
53 | [`&.${outlinedInputClasses.focused} .${outlinedInputClasses.notchedOutline}`]: {
|
54 | borderColor: (theme.vars || theme).palette[ownerState.color].main,
|
55 | borderWidth: 2
|
56 | },
|
57 | [`&.${outlinedInputClasses.error} .${outlinedInputClasses.notchedOutline}`]: {
|
58 | borderColor: (theme.vars || theme).palette.error.main
|
59 | },
|
60 | [`&.${outlinedInputClasses.disabled} .${outlinedInputClasses.notchedOutline}`]: {
|
61 | borderColor: (theme.vars || theme).palette.action.disabled
|
62 | }
|
63 | }, ownerState.startAdornment && {
|
64 | paddingLeft: 14
|
65 | }, ownerState.endAdornment && {
|
66 | paddingRight: 14
|
67 | }, ownerState.multiline && _extends({
|
68 | padding: '16.5px 14px'
|
69 | }, ownerState.size === 'small' && {
|
70 | padding: '8.5px 14px'
|
71 | }));
|
72 | });
|
73 | const NotchedOutlineRoot = styled(NotchedOutline, {
|
74 | name: 'MuiOutlinedInput',
|
75 | slot: 'NotchedOutline',
|
76 | overridesResolver: (props, styles) => styles.notchedOutline
|
77 | })(({
|
78 | theme
|
79 | }) => {
|
80 | const borderColor = theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)';
|
81 | return {
|
82 | borderColor: theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : borderColor
|
83 | };
|
84 | });
|
85 | const OutlinedInputInput = styled(InputBaseInput, {
|
86 | name: 'MuiOutlinedInput',
|
87 | slot: 'Input',
|
88 | overridesResolver: inputBaseInputOverridesResolver
|
89 | })(({
|
90 | theme,
|
91 | ownerState
|
92 | }) => _extends({
|
93 | padding: '16.5px 14px'
|
94 | }, !theme.vars && {
|
95 | '&:-webkit-autofill': {
|
96 | WebkitBoxShadow: theme.palette.mode === 'light' ? null : '0 0 0 100px #266798 inset',
|
97 | WebkitTextFillColor: theme.palette.mode === 'light' ? null : '#fff',
|
98 | caretColor: theme.palette.mode === 'light' ? null : '#fff',
|
99 | borderRadius: 'inherit'
|
100 | }
|
101 | }, theme.vars && {
|
102 | '&:-webkit-autofill': {
|
103 | borderRadius: 'inherit'
|
104 | },
|
105 | [theme.getColorSchemeSelector('dark')]: {
|
106 | '&:-webkit-autofill': {
|
107 | WebkitBoxShadow: '0 0 0 100px #266798 inset',
|
108 | WebkitTextFillColor: '#fff',
|
109 | caretColor: '#fff'
|
110 | }
|
111 | }
|
112 | }, ownerState.size === 'small' && {
|
113 | padding: '8.5px 14px'
|
114 | }, ownerState.multiline && {
|
115 | padding: 0
|
116 | }, ownerState.startAdornment && {
|
117 | paddingLeft: 0
|
118 | }, ownerState.endAdornment && {
|
119 | paddingRight: 0
|
120 | }));
|
121 | const OutlinedInput = React.forwardRef(function OutlinedInput(inProps, ref) {
|
122 | var _React$Fragment;
|
123 |
|
124 | const props = useThemeProps({
|
125 | props: inProps,
|
126 | name: 'MuiOutlinedInput'
|
127 | });
|
128 |
|
129 | const {
|
130 | components = {},
|
131 | fullWidth = false,
|
132 | inputComponent = 'input',
|
133 | label,
|
134 | multiline = false,
|
135 | notched,
|
136 | type = 'text'
|
137 | } = props,
|
138 | other = _objectWithoutPropertiesLoose(props, _excluded);
|
139 |
|
140 | const classes = useUtilityClasses(props);
|
141 | const muiFormControl = useFormControl();
|
142 | const fcs = formControlState({
|
143 | props,
|
144 | muiFormControl,
|
145 | states: ['required']
|
146 | });
|
147 |
|
148 | const ownerState = _extends({}, props, {
|
149 | color: fcs.color || 'primary',
|
150 | disabled: fcs.disabled,
|
151 | error: fcs.error,
|
152 | focused: fcs.focused,
|
153 | formControl: muiFormControl,
|
154 | fullWidth,
|
155 | hiddenLabel: fcs.hiddenLabel,
|
156 | multiline,
|
157 | size: fcs.size,
|
158 | type
|
159 | });
|
160 |
|
161 | return _jsx(InputBase, _extends({
|
162 | components: _extends({
|
163 | Root: OutlinedInputRoot,
|
164 | Input: OutlinedInputInput
|
165 | }, components),
|
166 | renderSuffix: state => _jsx(NotchedOutlineRoot, {
|
167 | ownerState: ownerState,
|
168 | className: classes.notchedOutline,
|
169 | label: label != null && label !== '' && fcs.required ? _React$Fragment || (_React$Fragment = _jsxs(React.Fragment, {
|
170 | children: [label, "\xA0", '*']
|
171 | })) : label,
|
172 | notched: typeof notched !== 'undefined' ? notched : Boolean(state.startAdornment || state.filled || state.focused)
|
173 | }),
|
174 | fullWidth: fullWidth,
|
175 | inputComponent: inputComponent,
|
176 | multiline: multiline,
|
177 | ref: ref,
|
178 | type: type
|
179 | }, other, {
|
180 | classes: _extends({}, classes, {
|
181 | notchedOutline: null
|
182 | })
|
183 | }));
|
184 | });
|
185 | process.env.NODE_ENV !== "production" ? OutlinedInput.propTypes
|
186 |
|
187 | = {
|
188 |
|
189 |
|
190 |
|
191 |
|
192 |
|
193 | |
194 |
|
195 |
|
196 |
|
197 |
|
198 | autoComplete: PropTypes.string,
|
199 |
|
200 | |
201 |
|
202 |
|
203 | autoFocus: PropTypes.bool,
|
204 |
|
205 | |
206 |
|
207 |
|
208 | classes: PropTypes.object,
|
209 |
|
210 | |
211 |
|
212 |
|
213 |
|
214 |
|
215 |
|
216 | color: PropTypes
|
217 |
|
218 | .oneOfType([PropTypes.oneOf(['primary', 'secondary']), PropTypes.string]),
|
219 |
|
220 | |
221 |
|
222 |
|
223 |
|
224 |
|
225 | components: PropTypes.shape({
|
226 | Input: PropTypes.elementType,
|
227 | Root: PropTypes.elementType
|
228 | }),
|
229 |
|
230 | |
231 |
|
232 |
|
233 | defaultValue: PropTypes.any,
|
234 |
|
235 | |
236 |
|
237 |
|
238 |
|
239 | disabled: PropTypes.bool,
|
240 |
|
241 | |
242 |
|
243 |
|
244 | endAdornment: PropTypes.node,
|
245 |
|
246 | |
247 |
|
248 |
|
249 |
|
250 | error: PropTypes.bool,
|
251 |
|
252 | |
253 |
|
254 |
|
255 |
|
256 | fullWidth: PropTypes.bool,
|
257 |
|
258 | |
259 |
|
260 |
|
261 | id: PropTypes.string,
|
262 |
|
263 | |
264 |
|
265 |
|
266 |
|
267 |
|
268 | inputComponent: PropTypes.elementType,
|
269 |
|
270 | |
271 |
|
272 |
|
273 |
|
274 | inputProps: PropTypes.object,
|
275 |
|
276 | |
277 |
|
278 |
|
279 | inputRef: refType,
|
280 |
|
281 | |
282 |
|
283 |
|
284 |
|
285 | label: PropTypes.node,
|
286 |
|
287 | |
288 |
|
289 |
|
290 |
|
291 |
|
292 | margin: PropTypes.oneOf(['dense', 'none']),
|
293 |
|
294 | |
295 |
|
296 |
|
297 | maxRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
298 |
|
299 | |
300 |
|
301 |
|
302 | minRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
303 |
|
304 | |
305 |
|
306 |
|
307 |
|
308 | multiline: PropTypes.bool,
|
309 |
|
310 | |
311 |
|
312 |
|
313 | name: PropTypes.string,
|
314 |
|
315 | |
316 |
|
317 |
|
318 | notched: PropTypes.bool,
|
319 |
|
320 | |
321 |
|
322 |
|
323 |
|
324 |
|
325 |
|
326 | onChange: PropTypes.func,
|
327 |
|
328 | |
329 |
|
330 |
|
331 | placeholder: PropTypes.string,
|
332 |
|
333 | |
334 |
|
335 |
|
336 |
|
337 | readOnly: PropTypes.bool,
|
338 |
|
339 | |
340 |
|
341 |
|
342 |
|
343 | required: PropTypes.bool,
|
344 |
|
345 | |
346 |
|
347 |
|
348 | rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
349 |
|
350 | |
351 |
|
352 |
|
353 | startAdornment: PropTypes.node,
|
354 |
|
355 | |
356 |
|
357 |
|
358 | sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
|
359 |
|
360 | |
361 |
|
362 |
|
363 |
|
364 | type: PropTypes.string,
|
365 |
|
366 | |
367 |
|
368 |
|
369 | value: PropTypes.any
|
370 | } : void 0;
|
371 | OutlinedInput.muiName = 'Input';
|
372 | export default OutlinedInput; |
\ | No newline at end of file |