Buckets:
ktongue/docker_container / CAD_kevin /frontend /node_modules /@mui /material /NativeSelect /NativeSelectInput.js
| 'use client'; | |
| import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose"; | |
| import _extends from "@babel/runtime/helpers/esm/extends"; | |
| const _excluded = ["className", "disabled", "error", "IconComponent", "inputRef", "variant"]; | |
| import * as React from 'react'; | |
| import PropTypes from 'prop-types'; | |
| import clsx from 'clsx'; | |
| import refType from '@mui/utils/refType'; | |
| import composeClasses from '@mui/utils/composeClasses'; | |
| import capitalize from '../utils/capitalize'; | |
| import nativeSelectClasses, { getNativeSelectUtilityClasses } from './nativeSelectClasses'; | |
| import styled, { rootShouldForwardProp } from '../styles/styled'; | |
| import { jsx as _jsx } from "react/jsx-runtime"; | |
| import { jsxs as _jsxs } from "react/jsx-runtime"; | |
| const useUtilityClasses = ownerState => { | |
| const { | |
| classes, | |
| variant, | |
| disabled, | |
| multiple, | |
| open, | |
| error | |
| } = ownerState; | |
| const slots = { | |
| select: ['select', variant, disabled && 'disabled', multiple && 'multiple', error && 'error'], | |
| icon: ['icon', `icon${capitalize(variant)}`, open && 'iconOpen', disabled && 'disabled'] | |
| }; | |
| return composeClasses(slots, getNativeSelectUtilityClasses, classes); | |
| }; | |
| export const nativeSelectSelectStyles = ({ | |
| ownerState, | |
| theme | |
| }) => _extends({ | |
| MozAppearance: 'none', | |
| // Reset | |
| WebkitAppearance: 'none', | |
| // Reset | |
| // When interacting quickly, the text can end up selected. | |
| // Native select can't be selected either. | |
| userSelect: 'none', | |
| borderRadius: 0, | |
| // Reset | |
| cursor: 'pointer', | |
| '&:focus': _extends({}, theme.vars ? { | |
| backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.05)` | |
| } : { | |
| backgroundColor: theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.05)' : 'rgba(255, 255, 255, 0.05)' | |
| }, { | |
| borderRadius: 0 // Reset Chrome style | |
| }), | |
| // Remove IE11 arrow | |
| '&::-ms-expand': { | |
| display: 'none' | |
| }, | |
| [`&.${nativeSelectClasses.disabled}`]: { | |
| cursor: 'default' | |
| }, | |
| '&[multiple]': { | |
| height: 'auto' | |
| }, | |
| '&:not([multiple]) option, &:not([multiple]) optgroup': { | |
| backgroundColor: (theme.vars || theme).palette.background.paper | |
| }, | |
| // Bump specificity to allow extending custom inputs | |
| '&&&': { | |
| paddingRight: 24, | |
| minWidth: 16 // So it doesn't collapse. | |
| } | |
| }, ownerState.variant === 'filled' && { | |
| '&&&': { | |
| paddingRight: 32 | |
| } | |
| }, ownerState.variant === 'outlined' && { | |
| borderRadius: (theme.vars || theme).shape.borderRadius, | |
| '&:focus': { | |
| borderRadius: (theme.vars || theme).shape.borderRadius // Reset the reset for Chrome style | |
| }, | |
| '&&&': { | |
| paddingRight: 32 | |
| } | |
| }); | |
| const NativeSelectSelect = styled('select', { | |
| name: 'MuiNativeSelect', | |
| slot: 'Select', | |
| shouldForwardProp: rootShouldForwardProp, | |
| overridesResolver: (props, styles) => { | |
| const { | |
| ownerState | |
| } = props; | |
| return [styles.select, styles[ownerState.variant], ownerState.error && styles.error, { | |
| [`&.${nativeSelectClasses.multiple}`]: styles.multiple | |
| }]; | |
| } | |
| })(nativeSelectSelectStyles); | |
| export const nativeSelectIconStyles = ({ | |
| ownerState, | |
| theme | |
| }) => _extends({ | |
| // 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, | |
| top: 'calc(50% - .5em)', | |
| // Center vertically, height is 1em | |
| pointerEvents: 'none', | |
| // Don't block pointer events on the select under the icon. | |
| color: (theme.vars || theme).palette.action.active, | |
| [`&.${nativeSelectClasses.disabled}`]: { | |
| color: (theme.vars || theme).palette.action.disabled | |
| } | |
| }, ownerState.open && { | |
| transform: 'rotate(180deg)' | |
| }, ownerState.variant === 'filled' && { | |
| right: 7 | |
| }, ownerState.variant === 'outlined' && { | |
| right: 7 | |
| }); | |
| const NativeSelectIcon = styled('svg', { | |
| name: 'MuiNativeSelect', | |
| slot: 'Icon', | |
| overridesResolver: (props, styles) => { | |
| const { | |
| ownerState | |
| } = props; | |
| return [styles.icon, ownerState.variant && styles[`icon${capitalize(ownerState.variant)}`], ownerState.open && styles.iconOpen]; | |
| } | |
| })(nativeSelectIconStyles); | |
| /** | |
| * @ignore - internal component. | |
| */ | |
| const NativeSelectInput = /*#__PURE__*/React.forwardRef(function NativeSelectInput(props, ref) { | |
| const { | |
| className, | |
| disabled, | |
| error, | |
| IconComponent, | |
| inputRef, | |
| variant = 'standard' | |
| } = props, | |
| other = _objectWithoutPropertiesLoose(props, _excluded); | |
| const ownerState = _extends({}, props, { | |
| disabled, | |
| variant, | |
| error | |
| }); | |
| const classes = useUtilityClasses(ownerState); | |
| return /*#__PURE__*/_jsxs(React.Fragment, { | |
| children: [/*#__PURE__*/_jsx(NativeSelectSelect, _extends({ | |
| ownerState: ownerState, | |
| className: clsx(classes.select, className), | |
| disabled: disabled, | |
| ref: inputRef || ref | |
| }, other)), props.multiple ? null : /*#__PURE__*/_jsx(NativeSelectIcon, { | |
| as: IconComponent, | |
| ownerState: ownerState, | |
| className: classes.icon | |
| })] | |
| }); | |
| }); | |
| process.env.NODE_ENV !== "production" ? NativeSelectInput.propTypes = { | |
| /** | |
| * The option elements to populate the select with. | |
| * Can be some `<option>` elements. | |
| */ | |
| children: PropTypes.node, | |
| /** | |
| * Override or extend the styles applied to the component. | |
| */ | |
| classes: PropTypes.object, | |
| /** | |
| * The CSS class name of the select element. | |
| */ | |
| className: PropTypes.string, | |
| /** | |
| * If `true`, the select is disabled. | |
| */ | |
| disabled: PropTypes.bool, | |
| /** | |
| * If `true`, the `select input` will indicate an error. | |
| */ | |
| error: PropTypes.bool, | |
| /** | |
| * The icon that displays the arrow. | |
| */ | |
| IconComponent: PropTypes.elementType.isRequired, | |
| /** | |
| * Use that prop to pass a ref to the native select element. | |
| * @deprecated | |
| */ | |
| inputRef: refType, | |
| /** | |
| * @ignore | |
| */ | |
| multiple: PropTypes.bool, | |
| /** | |
| * Name attribute of the `select` or hidden `input` element. | |
| */ | |
| name: PropTypes.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: PropTypes.func, | |
| /** | |
| * The input value. | |
| */ | |
| value: PropTypes.any, | |
| /** | |
| * The variant to use. | |
| */ | |
| variant: PropTypes.oneOf(['standard', 'outlined', 'filled']) | |
| } : void 0; | |
| export default NativeSelectInput; |
Xet Storage Details
- Size:
- 6.36 kB
- Xet hash:
- 7ac1c07b8a74ea6edd7b5f130ae09e1b1c2b432b8685ca3843b898715a3b1a96
·
Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.