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