Diffusion Open Access Compliance Check Tool (OACCT) (paginated-inlines) Browse

rOACCT/node_modules/@mui/material/modern/OutlinedInput/OutlinedInput.js
f646e1f695a7paginated-inlines

OutlinedInput.js
View Options

			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';
			import { unstable_composeClasses as composeClasses } from '@mui/base';
			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 useThemeProps from '../styles/useThemeProps';
			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 _React$Fragment;
			const props = useThemeProps({
			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: ['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 = slots.root ?? components.Root ?? OutlinedInputRoot;
			const InputSlot = slots.input ?? components.Input ?? 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, "\xA0", '*']
			})) : 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 "yarn 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/#adding-new-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;