1 | import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
2 | import _extends from "@babel/runtime/helpers/esm/extends";
|
3 | const _excluded = ["children", "className", "color", "component", "disabled", "error", "filled", "focused", "required"];
|
4 | import * as React from 'react';
|
5 | import PropTypes from 'prop-types';
|
6 | import clsx from 'clsx';
|
7 | import { unstable_composeClasses as composeClasses } from '@mui/base';
|
8 | import formControlState from '../FormControl/formControlState';
|
9 | import useFormControl from '../FormControl/useFormControl';
|
10 | import capitalize from '../utils/capitalize';
|
11 | import useThemeProps from '../styles/useThemeProps';
|
12 | import styled from '../styles/styled';
|
13 | import formLabelClasses, { getFormLabelUtilityClasses } from './formLabelClasses';
|
14 | import { jsxs as _jsxs } from "react/jsx-runtime";
|
15 |
|
16 | const useUtilityClasses = ownerState => {
|
17 | const {
|
18 | classes,
|
19 | color,
|
20 | focused,
|
21 | disabled,
|
22 | error,
|
23 | filled,
|
24 | required
|
25 | } = ownerState;
|
26 | const slots = {
|
27 | root: ['root', `color${capitalize(color)}`, disabled && 'disabled', error && 'error', filled && 'filled', focused && 'focused', required && 'required'],
|
28 | asterisk: ['asterisk', error && 'error']
|
29 | };
|
30 | return composeClasses(slots, getFormLabelUtilityClasses, classes);
|
31 | };
|
32 |
|
33 | export const FormLabelRoot = styled('label', {
|
34 | name: 'MuiFormLabel',
|
35 | slot: 'Root',
|
36 | overridesResolver: ({
|
37 | ownerState
|
38 | }, styles) => {
|
39 | return _extends({}, styles.root, ownerState.color === 'secondary' && styles.colorSecondary, ownerState.filled && styles.filled);
|
40 | }
|
41 | })(({
|
42 | theme,
|
43 | ownerState
|
44 | }) => _extends({
|
45 | color: (theme.vars || theme).palette.text.secondary
|
46 | }, theme.typography.body1, {
|
47 | lineHeight: '1.4375em',
|
48 | padding: 0,
|
49 | position: 'relative',
|
50 | [`&.${formLabelClasses.focused}`]: {
|
51 | color: (theme.vars || theme).palette[ownerState.color].main
|
52 | },
|
53 | [`&.${formLabelClasses.disabled}`]: {
|
54 | color: (theme.vars || theme).palette.text.disabled
|
55 | },
|
56 | [`&.${formLabelClasses.error}`]: {
|
57 | color: (theme.vars || theme).palette.error.main
|
58 | }
|
59 | }));
|
60 | const AsteriskComponent = styled('span', {
|
61 | name: 'MuiFormLabel',
|
62 | slot: 'Asterisk',
|
63 | overridesResolver: (props, styles) => styles.asterisk
|
64 | })(({
|
65 | theme
|
66 | }) => ({
|
67 | [`&.${formLabelClasses.error}`]: {
|
68 | color: (theme.vars || theme).palette.error.main
|
69 | }
|
70 | }));
|
71 | const FormLabel = React.forwardRef(function FormLabel(inProps, ref) {
|
72 | const props = useThemeProps({
|
73 | props: inProps,
|
74 | name: 'MuiFormLabel'
|
75 | });
|
76 |
|
77 | const {
|
78 | children,
|
79 | className,
|
80 | component = 'label'
|
81 | } = props,
|
82 | other = _objectWithoutPropertiesLoose(props, _excluded);
|
83 |
|
84 | const muiFormControl = useFormControl();
|
85 | const fcs = formControlState({
|
86 | props,
|
87 | muiFormControl,
|
88 | states: ['color', 'required', 'focused', 'disabled', 'error', 'filled']
|
89 | });
|
90 |
|
91 | const ownerState = _extends({}, props, {
|
92 | color: fcs.color || 'primary',
|
93 | component,
|
94 | disabled: fcs.disabled,
|
95 | error: fcs.error,
|
96 | filled: fcs.filled,
|
97 | focused: fcs.focused,
|
98 | required: fcs.required
|
99 | });
|
100 |
|
101 | const classes = useUtilityClasses(ownerState);
|
102 | return _jsxs(FormLabelRoot, _extends({
|
103 | as: component,
|
104 | ownerState: ownerState,
|
105 | className: clsx(classes.root, className),
|
106 | ref: ref
|
107 | }, other, {
|
108 | children: [children, fcs.required && _jsxs(AsteriskComponent, {
|
109 | ownerState: ownerState,
|
110 | "aria-hidden": true,
|
111 | className: classes.asterisk,
|
112 | children: ["\u2009", '*']
|
113 | })]
|
114 | }));
|
115 | });
|
116 | process.env.NODE_ENV !== "production" ? FormLabel.propTypes
|
117 |
|
118 | = {
|
119 |
|
120 |
|
121 |
|
122 |
|
123 |
|
124 | |
125 |
|
126 |
|
127 | children: PropTypes.node,
|
128 |
|
129 | |
130 |
|
131 |
|
132 | classes: PropTypes.object,
|
133 |
|
134 | |
135 |
|
136 |
|
137 | className: PropTypes.string,
|
138 |
|
139 | |
140 |
|
141 |
|
142 |
|
143 |
|
144 | color: PropTypes
|
145 |
|
146 | .oneOfType([PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']), PropTypes.string]),
|
147 |
|
148 | |
149 |
|
150 |
|
151 |
|
152 | component: PropTypes.elementType,
|
153 |
|
154 | |
155 |
|
156 |
|
157 | disabled: PropTypes.bool,
|
158 |
|
159 | |
160 |
|
161 |
|
162 | error: PropTypes.bool,
|
163 |
|
164 | |
165 |
|
166 |
|
167 | filled: PropTypes.bool,
|
168 |
|
169 | |
170 |
|
171 |
|
172 | focused: PropTypes.bool,
|
173 |
|
174 | |
175 |
|
176 |
|
177 | required: PropTypes.bool,
|
178 |
|
179 | |
180 |
|
181 |
|
182 | sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
|
183 | } : void 0;
|
184 | export default FormLabel; |
\ | No newline at end of file |