Buckets:
ktongue/docker_container / CAD_kevin /frontend /node_modules /@mui /material /OutlinedInput /OutlinedInput.js
| 'use client'; | |
| import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose"; | |
| import _extends from "@babel/runtime/helpers/esm/extends"; | |
| const _excluded = ["components", "fullWidth", "inputComponent", "label", "multiline", "notched", "slots", "type"]; | |
| import * as React from 'react'; | |
| import PropTypes from 'prop-types'; | |
| import refType from '@mui/utils/refType'; | |
| import composeClasses from '@mui/utils/composeClasses'; | |
| import NotchedOutline from './NotchedOutline'; | |
| import useFormControl from '../FormControl/useFormControl'; | |
| import formControlState from '../FormControl/formControlState'; | |
| import styled, { rootShouldForwardProp } from '../styles/styled'; | |
| import outlinedInputClasses, { getOutlinedInputUtilityClass } from './outlinedInputClasses'; | |
| import InputBase, { rootOverridesResolver as inputBaseRootOverridesResolver, inputOverridesResolver as inputBaseInputOverridesResolver, InputBaseRoot, InputBaseComponent as InputBaseInput } from '../InputBase/InputBase'; | |
| import { useDefaultProps } from '../DefaultPropsProvider'; | |
| import { jsxs as _jsxs } from "react/jsx-runtime"; | |
| import { jsx as _jsx } from "react/jsx-runtime"; | |
| const useUtilityClasses = ownerState => { | |
| const { | |
| classes | |
| } = ownerState; | |
| const slots = { | |
| root: ['root'], | |
| notchedOutline: ['notchedOutline'], | |
| input: ['input'] | |
| }; | |
| const composedClasses = composeClasses(slots, getOutlinedInputUtilityClass, classes); | |
| return _extends({}, classes, composedClasses); | |
| }; | |
| const OutlinedInputRoot = styled(InputBaseRoot, { | |
| shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes', | |
| name: 'MuiOutlinedInput', | |
| slot: 'Root', | |
| overridesResolver: inputBaseRootOverridesResolver | |
| })(({ | |
| theme, | |
| ownerState | |
| }) => { | |
| const borderColor = theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'; | |
| return _extends({ | |
| position: 'relative', | |
| borderRadius: (theme.vars || theme).shape.borderRadius, | |
| [`&:hover .${outlinedInputClasses.notchedOutline}`]: { | |
| borderColor: (theme.vars || theme).palette.text.primary | |
| }, | |
| // Reset on touch devices, it doesn't add specificity | |
| '@media (hover: none)': { | |
| [`&:hover .${outlinedInputClasses.notchedOutline}`]: { | |
| borderColor: theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : borderColor | |
| } | |
| }, | |
| [`&.${outlinedInputClasses.focused} .${outlinedInputClasses.notchedOutline}`]: { | |
| borderColor: (theme.vars || theme).palette[ownerState.color].main, | |
| borderWidth: 2 | |
| }, | |
| [`&.${outlinedInputClasses.error} .${outlinedInputClasses.notchedOutline}`]: { | |
| borderColor: (theme.vars || theme).palette.error.main | |
| }, | |
| [`&.${outlinedInputClasses.disabled} .${outlinedInputClasses.notchedOutline}`]: { | |
| borderColor: (theme.vars || theme).palette.action.disabled | |
| } | |
| }, ownerState.startAdornment && { | |
| paddingLeft: 14 | |
| }, ownerState.endAdornment && { | |
| paddingRight: 14 | |
| }, ownerState.multiline && _extends({ | |
| padding: '16.5px 14px' | |
| }, ownerState.size === 'small' && { | |
| padding: '8.5px 14px' | |
| })); | |
| }); | |
| const NotchedOutlineRoot = styled(NotchedOutline, { | |
| name: 'MuiOutlinedInput', | |
| slot: 'NotchedOutline', | |
| overridesResolver: (props, styles) => styles.notchedOutline | |
| })(({ | |
| theme | |
| }) => { | |
| const borderColor = theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'; | |
| return { | |
| borderColor: theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : borderColor | |
| }; | |
| }); | |
| const OutlinedInputInput = styled(InputBaseInput, { | |
| name: 'MuiOutlinedInput', | |
| slot: 'Input', | |
| overridesResolver: inputBaseInputOverridesResolver | |
| })(({ | |
| theme, | |
| ownerState | |
| }) => _extends({ | |
| padding: '16.5px 14px' | |
| }, !theme.vars && { | |
| '&:-webkit-autofill': { | |
| WebkitBoxShadow: theme.palette.mode === 'light' ? null : '0 0 0 100px #266798 inset', | |
| WebkitTextFillColor: theme.palette.mode === 'light' ? null : '#fff', | |
| caretColor: theme.palette.mode === 'light' ? null : '#fff', | |
| borderRadius: 'inherit' | |
| } | |
| }, theme.vars && { | |
| '&:-webkit-autofill': { | |
| borderRadius: 'inherit' | |
| }, | |
| [theme.getColorSchemeSelector('dark')]: { | |
| '&:-webkit-autofill': { | |
| WebkitBoxShadow: '0 0 0 100px #266798 inset', | |
| WebkitTextFillColor: '#fff', | |
| caretColor: '#fff' | |
| } | |
| } | |
| }, ownerState.size === 'small' && { | |
| padding: '8.5px 14px' | |
| }, ownerState.multiline && { | |
| padding: 0 | |
| }, ownerState.startAdornment && { | |
| paddingLeft: 0 | |
| }, ownerState.endAdornment && { | |
| paddingRight: 0 | |
| })); | |
| const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inProps, ref) { | |
| var _ref, _slots$root, _ref2, _slots$input, _React$Fragment; | |
| const props = useDefaultProps({ | |
| props: inProps, | |
| name: 'MuiOutlinedInput' | |
| }); | |
| const { | |
| components = {}, | |
| fullWidth = false, | |
| inputComponent = 'input', | |
| label, | |
| multiline = false, | |
| notched, | |
| slots = {}, | |
| type = 'text' | |
| } = props, | |
| other = _objectWithoutPropertiesLoose(props, _excluded); | |
| const classes = useUtilityClasses(props); | |
| const muiFormControl = useFormControl(); | |
| const fcs = formControlState({ | |
| props, | |
| muiFormControl, | |
| states: ['color', 'disabled', 'error', 'focused', 'hiddenLabel', 'size', 'required'] | |
| }); | |
| const ownerState = _extends({}, props, { | |
| color: fcs.color || 'primary', | |
| disabled: fcs.disabled, | |
| error: fcs.error, | |
| focused: fcs.focused, | |
| formControl: muiFormControl, | |
| fullWidth, | |
| hiddenLabel: fcs.hiddenLabel, | |
| multiline, | |
| size: fcs.size, | |
| type | |
| }); | |
| const RootSlot = (_ref = (_slots$root = slots.root) != null ? _slots$root : components.Root) != null ? _ref : OutlinedInputRoot; | |
| const InputSlot = (_ref2 = (_slots$input = slots.input) != null ? _slots$input : components.Input) != null ? _ref2 : OutlinedInputInput; | |
| return /*#__PURE__*/_jsx(InputBase, _extends({ | |
| slots: { | |
| root: RootSlot, | |
| input: InputSlot | |
| }, | |
| renderSuffix: state => /*#__PURE__*/_jsx(NotchedOutlineRoot, { | |
| ownerState: ownerState, | |
| className: classes.notchedOutline, | |
| label: label != null && label !== '' && fcs.required ? _React$Fragment || (_React$Fragment = /*#__PURE__*/_jsxs(React.Fragment, { | |
| children: [label, "\u2009", '*'] | |
| })) : label, | |
| notched: typeof notched !== 'undefined' ? notched : Boolean(state.startAdornment || state.filled || state.focused) | |
| }), | |
| fullWidth: fullWidth, | |
| inputComponent: inputComponent, | |
| multiline: multiline, | |
| ref: ref, | |
| type: type | |
| }, other, { | |
| classes: _extends({}, classes, { | |
| notchedOutline: null | |
| }) | |
| })); | |
| }); | |
| process.env.NODE_ENV !== "production" ? OutlinedInput.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`. │ | |
| // └─────────────────────────────────────────────────────────────────────┘ | |
| /** | |
| * 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.string, | |
| /** | |
| * If `true`, the `input` element is focused during the first mount. | |
| */ | |
| autoFocus: PropTypes.bool, | |
| /** | |
| * Override or extend the styles applied to the component. | |
| */ | |
| classes: PropTypes.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: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['primary', 'secondary']), PropTypes.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.shape({ | |
| Input: PropTypes.elementType, | |
| Root: PropTypes.elementType | |
| }), | |
| /** | |
| * The default value. Use when the component is not controlled. | |
| */ | |
| defaultValue: PropTypes.any, | |
| /** | |
| * If `true`, the component is disabled. | |
| * The prop defaults to the value (`false`) inherited from the parent FormControl component. | |
| */ | |
| disabled: PropTypes.bool, | |
| /** | |
| * End `InputAdornment` for this component. | |
| */ | |
| endAdornment: PropTypes.node, | |
| /** | |
| * If `true`, the `input` will indicate an error. | |
| * The prop defaults to the value (`false`) inherited from the parent FormControl component. | |
| */ | |
| error: PropTypes.bool, | |
| /** | |
| * If `true`, the `input` will take up the full width of its container. | |
| * @default false | |
| */ | |
| fullWidth: PropTypes.bool, | |
| /** | |
| * The id of the `input` element. | |
| */ | |
| id: PropTypes.string, | |
| /** | |
| * The component used for the `input` element. | |
| * Either a string to use a HTML element or a component. | |
| * @default 'input' | |
| */ | |
| inputComponent: PropTypes.elementType, | |
| /** | |
| * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element. | |
| * @default {} | |
| */ | |
| inputProps: PropTypes.object, | |
| /** | |
| * Pass a ref to the `input` element. | |
| */ | |
| inputRef: refType, | |
| /** | |
| * The label of the `input`. It is only used for layout. The actual labelling | |
| * is handled by `InputLabel`. | |
| */ | |
| label: PropTypes.node, | |
| /** | |
| * 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.oneOf(['dense', 'none']), | |
| /** | |
| * Maximum number of rows to display when multiline option is set to true. | |
| */ | |
| maxRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), | |
| /** | |
| * Minimum number of rows to display when multiline option is set to true. | |
| */ | |
| minRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), | |
| /** | |
| * If `true`, a [TextareaAutosize](/material-ui/react-textarea-autosize/) element is rendered. | |
| * @default false | |
| */ | |
| multiline: PropTypes.bool, | |
| /** | |
| * Name attribute of the `input` element. | |
| */ | |
| name: PropTypes.string, | |
| /** | |
| * If `true`, the outline is notched to accommodate the label. | |
| */ | |
| notched: PropTypes.bool, | |
| /** | |
| * 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: PropTypes.func, | |
| /** | |
| * The short hint displayed in the `input` before the user enters a value. | |
| */ | |
| placeholder: PropTypes.string, | |
| /** | |
| * It prevents the user from changing the value of the field | |
| * (not from interacting with the field). | |
| */ | |
| readOnly: PropTypes.bool, | |
| /** | |
| * If `true`, the `input` element is required. | |
| * The prop defaults to the value (`false`) inherited from the parent FormControl component. | |
| */ | |
| required: PropTypes.bool, | |
| /** | |
| * Number of rows to display when multiline option is set to true. | |
| */ | |
| rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), | |
| /** | |
| * 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.shape({ | |
| input: PropTypes.elementType, | |
| root: PropTypes.elementType | |
| }), | |
| /** | |
| * Start `InputAdornment` for this component. | |
| */ | |
| startAdornment: PropTypes.node, | |
| /** | |
| * The system prop that allows defining system overrides as well as additional CSS styles. | |
| */ | |
| sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.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.string, | |
| /** | |
| * The value of the `input` element, required for a controlled component. | |
| */ | |
| value: PropTypes.any | |
| } : void 0; | |
| OutlinedInput.muiName = 'Input'; | |
| export default OutlinedInput; |
Xet Storage Details
- Size:
- 12.8 kB
- Xet hash:
- 2a7aef6f936038ee0b7420fdac5b2d571f49216addb99462e9449a8d281af6be
·
Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.