react-easy-wall 1.0.11 → 1.0.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/panel/PanelButton.js +16 -0
- package/dist/cjs/components/panel/PanelButton.js.map +1 -0
- package/dist/cjs/index.js +2 -0
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/node_modules/@mui/material/esm/Button/Button.js +710 -0
- package/dist/cjs/node_modules/@mui/material/esm/Button/Button.js.map +1 -0
- package/dist/cjs/node_modules/@mui/material/esm/Button/buttonClasses.js +15 -0
- package/dist/cjs/node_modules/@mui/material/esm/Button/buttonClasses.js.map +1 -0
- package/dist/cjs/node_modules/@mui/material/esm/ButtonGroup/ButtonGroupButtonContext.js +36 -0
- package/dist/cjs/node_modules/@mui/material/esm/ButtonGroup/ButtonGroupButtonContext.js.map +1 -0
- package/dist/cjs/node_modules/@mui/material/esm/ButtonGroup/ButtonGroupContext.js +36 -0
- package/dist/cjs/node_modules/@mui/material/esm/ButtonGroup/ButtonGroupContext.js.map +1 -0
- package/dist/esm/components/panel/PanelButton.js +14 -0
- package/dist/esm/components/panel/PanelButton.js.map +1 -0
- package/dist/esm/index.js +1 -0
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/node_modules/@mui/material/esm/Button/Button.js +687 -0
- package/dist/esm/node_modules/@mui/material/esm/Button/Button.js.map +1 -0
- package/dist/esm/node_modules/@mui/material/esm/Button/buttonClasses.js +10 -0
- package/dist/esm/node_modules/@mui/material/esm/Button/buttonClasses.js.map +1 -0
- package/dist/esm/node_modules/@mui/material/esm/ButtonGroup/ButtonGroupButtonContext.js +13 -0
- package/dist/esm/node_modules/@mui/material/esm/ButtonGroup/ButtonGroupButtonContext.js.map +1 -0
- package/dist/esm/node_modules/@mui/material/esm/ButtonGroup/ButtonGroupContext.js +13 -0
- package/dist/esm/node_modules/@mui/material/esm/ButtonGroup/ButtonGroupContext.js.map +1 -0
- package/dist/esm/types/components/panel/PanelButton.d.ts +6 -0
- package/dist/esm/types/components/panel/index.d.ts +1 -0
- package/dist/index.d.ts +9 -4
- package/package.json +1 -1
|
@@ -0,0 +1,710 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
'use strict';
|
|
3
|
+
|
|
4
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
5
|
+
|
|
6
|
+
var React = require('react');
|
|
7
|
+
var index = require('../../../../../_virtual/index3.js');
|
|
8
|
+
var clsx = require('../../../../clsx/dist/clsx.js');
|
|
9
|
+
var rootShouldForwardProp = require('../styles/rootShouldForwardProp.js');
|
|
10
|
+
var memoTheme = require('../utils/memoTheme.js');
|
|
11
|
+
var createSimplePaletteValueFilter = require('../utils/createSimplePaletteValueFilter.js');
|
|
12
|
+
var buttonClasses = require('./buttonClasses.js');
|
|
13
|
+
var ButtonGroupContext = require('../ButtonGroup/ButtonGroupContext.js');
|
|
14
|
+
var ButtonGroupButtonContext = require('../ButtonGroup/ButtonGroupButtonContext.js');
|
|
15
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
16
|
+
var resolveProps = require('../../../utils/esm/resolveProps/resolveProps.js');
|
|
17
|
+
var DefaultPropsProvider = require('../DefaultPropsProvider/DefaultPropsProvider.js');
|
|
18
|
+
var useId = require('../../../utils/esm/useId/useId.js');
|
|
19
|
+
var capitalize = require('../../../utils/esm/capitalize/capitalize.js');
|
|
20
|
+
var composeClasses = require('../../../utils/esm/composeClasses/composeClasses.js');
|
|
21
|
+
var styled = require('../styles/styled.js');
|
|
22
|
+
var ButtonBase = require('../ButtonBase/ButtonBase.js');
|
|
23
|
+
var CircularProgress = require('../CircularProgress/CircularProgress.js');
|
|
24
|
+
|
|
25
|
+
function _interopNamespaceDefault(e) {
|
|
26
|
+
var n = Object.create(null);
|
|
27
|
+
if (e) {
|
|
28
|
+
Object.keys(e).forEach(function (k) {
|
|
29
|
+
if (k !== 'default') {
|
|
30
|
+
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
31
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
32
|
+
enumerable: true,
|
|
33
|
+
get: function () { return e[k]; }
|
|
34
|
+
});
|
|
35
|
+
}
|
|
36
|
+
});
|
|
37
|
+
}
|
|
38
|
+
n.default = e;
|
|
39
|
+
return Object.freeze(n);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
|
|
43
|
+
|
|
44
|
+
const useUtilityClasses = ownerState => {
|
|
45
|
+
const {
|
|
46
|
+
color,
|
|
47
|
+
disableElevation,
|
|
48
|
+
fullWidth,
|
|
49
|
+
size,
|
|
50
|
+
variant,
|
|
51
|
+
loading,
|
|
52
|
+
loadingPosition,
|
|
53
|
+
classes
|
|
54
|
+
} = ownerState;
|
|
55
|
+
const slots = {
|
|
56
|
+
root: ['root', loading && 'loading', variant, `${variant}${capitalize.default(color)}`, `size${capitalize.default(size)}`, `${variant}Size${capitalize.default(size)}`, `color${capitalize.default(color)}`, disableElevation && 'disableElevation', fullWidth && 'fullWidth', loading && `loadingPosition${capitalize.default(loadingPosition)}`],
|
|
57
|
+
startIcon: ['icon', 'startIcon', `iconSize${capitalize.default(size)}`],
|
|
58
|
+
endIcon: ['icon', 'endIcon', `iconSize${capitalize.default(size)}`],
|
|
59
|
+
loadingIndicator: ['loadingIndicator'],
|
|
60
|
+
loadingWrapper: ['loadingWrapper']
|
|
61
|
+
};
|
|
62
|
+
const composedClasses = composeClasses.default(slots, buttonClasses.getButtonUtilityClass, classes);
|
|
63
|
+
return {
|
|
64
|
+
...classes,
|
|
65
|
+
// forward the focused, disabled, etc. classes to the ButtonBase
|
|
66
|
+
...composedClasses
|
|
67
|
+
};
|
|
68
|
+
};
|
|
69
|
+
const commonIconStyles = [{
|
|
70
|
+
props: {
|
|
71
|
+
size: 'small'
|
|
72
|
+
},
|
|
73
|
+
style: {
|
|
74
|
+
'& > *:nth-of-type(1)': {
|
|
75
|
+
fontSize: 18
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
}, {
|
|
79
|
+
props: {
|
|
80
|
+
size: 'medium'
|
|
81
|
+
},
|
|
82
|
+
style: {
|
|
83
|
+
'& > *:nth-of-type(1)': {
|
|
84
|
+
fontSize: 20
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
}, {
|
|
88
|
+
props: {
|
|
89
|
+
size: 'large'
|
|
90
|
+
},
|
|
91
|
+
style: {
|
|
92
|
+
'& > *:nth-of-type(1)': {
|
|
93
|
+
fontSize: 22
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
}];
|
|
97
|
+
const ButtonRoot = styled.default(ButtonBase.default, {
|
|
98
|
+
shouldForwardProp: prop => rootShouldForwardProp.default(prop) || prop === 'classes',
|
|
99
|
+
name: 'MuiButton',
|
|
100
|
+
slot: 'Root',
|
|
101
|
+
overridesResolver: (props, styles) => {
|
|
102
|
+
const {
|
|
103
|
+
ownerState
|
|
104
|
+
} = props;
|
|
105
|
+
return [styles.root, styles[ownerState.variant], styles[`${ownerState.variant}${capitalize.default(ownerState.color)}`], styles[`size${capitalize.default(ownerState.size)}`], styles[`${ownerState.variant}Size${capitalize.default(ownerState.size)}`], ownerState.color === 'inherit' && styles.colorInherit, ownerState.disableElevation && styles.disableElevation, ownerState.fullWidth && styles.fullWidth, ownerState.loading && styles.loading];
|
|
106
|
+
}
|
|
107
|
+
})(memoTheme.default(({
|
|
108
|
+
theme
|
|
109
|
+
}) => {
|
|
110
|
+
const inheritContainedBackgroundColor = theme.palette.mode === 'light' ? theme.palette.grey[300] : theme.palette.grey[800];
|
|
111
|
+
const inheritContainedHoverBackgroundColor = theme.palette.mode === 'light' ? theme.palette.grey.A100 : theme.palette.grey[700];
|
|
112
|
+
return {
|
|
113
|
+
...theme.typography.button,
|
|
114
|
+
minWidth: 64,
|
|
115
|
+
padding: '6px 16px',
|
|
116
|
+
border: 0,
|
|
117
|
+
borderRadius: (theme.vars || theme).shape.borderRadius,
|
|
118
|
+
transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color', 'color'], {
|
|
119
|
+
duration: theme.transitions.duration.short
|
|
120
|
+
}),
|
|
121
|
+
'&:hover': {
|
|
122
|
+
textDecoration: 'none'
|
|
123
|
+
},
|
|
124
|
+
[`&.${buttonClasses.default.disabled}`]: {
|
|
125
|
+
color: (theme.vars || theme).palette.action.disabled
|
|
126
|
+
},
|
|
127
|
+
variants: [{
|
|
128
|
+
props: {
|
|
129
|
+
variant: 'contained'
|
|
130
|
+
},
|
|
131
|
+
style: {
|
|
132
|
+
color: `var(--variant-containedColor)`,
|
|
133
|
+
backgroundColor: `var(--variant-containedBg)`,
|
|
134
|
+
boxShadow: (theme.vars || theme).shadows[2],
|
|
135
|
+
'&:hover': {
|
|
136
|
+
boxShadow: (theme.vars || theme).shadows[4],
|
|
137
|
+
// Reset on touch devices, it doesn't add specificity
|
|
138
|
+
'@media (hover: none)': {
|
|
139
|
+
boxShadow: (theme.vars || theme).shadows[2]
|
|
140
|
+
}
|
|
141
|
+
},
|
|
142
|
+
'&:active': {
|
|
143
|
+
boxShadow: (theme.vars || theme).shadows[8]
|
|
144
|
+
},
|
|
145
|
+
[`&.${buttonClasses.default.focusVisible}`]: {
|
|
146
|
+
boxShadow: (theme.vars || theme).shadows[6]
|
|
147
|
+
},
|
|
148
|
+
[`&.${buttonClasses.default.disabled}`]: {
|
|
149
|
+
color: (theme.vars || theme).palette.action.disabled,
|
|
150
|
+
boxShadow: (theme.vars || theme).shadows[0],
|
|
151
|
+
backgroundColor: (theme.vars || theme).palette.action.disabledBackground
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
}, {
|
|
155
|
+
props: {
|
|
156
|
+
variant: 'outlined'
|
|
157
|
+
},
|
|
158
|
+
style: {
|
|
159
|
+
padding: '5px 15px',
|
|
160
|
+
border: '1px solid currentColor',
|
|
161
|
+
borderColor: `var(--variant-outlinedBorder, currentColor)`,
|
|
162
|
+
backgroundColor: `var(--variant-outlinedBg)`,
|
|
163
|
+
color: `var(--variant-outlinedColor)`,
|
|
164
|
+
[`&.${buttonClasses.default.disabled}`]: {
|
|
165
|
+
border: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
}, {
|
|
169
|
+
props: {
|
|
170
|
+
variant: 'text'
|
|
171
|
+
},
|
|
172
|
+
style: {
|
|
173
|
+
padding: '6px 8px',
|
|
174
|
+
color: `var(--variant-textColor)`,
|
|
175
|
+
backgroundColor: `var(--variant-textBg)`
|
|
176
|
+
}
|
|
177
|
+
}, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter.default()).map(([color]) => ({
|
|
178
|
+
props: {
|
|
179
|
+
color
|
|
180
|
+
},
|
|
181
|
+
style: {
|
|
182
|
+
'--variant-textColor': (theme.vars || theme).palette[color].main,
|
|
183
|
+
'--variant-outlinedColor': (theme.vars || theme).palette[color].main,
|
|
184
|
+
'--variant-outlinedBorder': theme.alpha((theme.vars || theme).palette[color].main, 0.5),
|
|
185
|
+
'--variant-containedColor': (theme.vars || theme).palette[color].contrastText,
|
|
186
|
+
'--variant-containedBg': (theme.vars || theme).palette[color].main,
|
|
187
|
+
'@media (hover: hover)': {
|
|
188
|
+
'&:hover': {
|
|
189
|
+
'--variant-containedBg': (theme.vars || theme).palette[color].dark,
|
|
190
|
+
'--variant-textBg': theme.alpha((theme.vars || theme).palette[color].main, (theme.vars || theme).palette.action.hoverOpacity),
|
|
191
|
+
'--variant-outlinedBorder': (theme.vars || theme).palette[color].main,
|
|
192
|
+
'--variant-outlinedBg': theme.alpha((theme.vars || theme).palette[color].main, (theme.vars || theme).palette.action.hoverOpacity)
|
|
193
|
+
}
|
|
194
|
+
}
|
|
195
|
+
}
|
|
196
|
+
})), {
|
|
197
|
+
props: {
|
|
198
|
+
color: 'inherit'
|
|
199
|
+
},
|
|
200
|
+
style: {
|
|
201
|
+
color: 'inherit',
|
|
202
|
+
borderColor: 'currentColor',
|
|
203
|
+
'--variant-containedBg': theme.vars ? theme.vars.palette.Button.inheritContainedBg : inheritContainedBackgroundColor,
|
|
204
|
+
'@media (hover: hover)': {
|
|
205
|
+
'&:hover': {
|
|
206
|
+
'--variant-containedBg': theme.vars ? theme.vars.palette.Button.inheritContainedHoverBg : inheritContainedHoverBackgroundColor,
|
|
207
|
+
'--variant-textBg': theme.alpha((theme.vars || theme).palette.text.primary, (theme.vars || theme).palette.action.hoverOpacity),
|
|
208
|
+
'--variant-outlinedBg': theme.alpha((theme.vars || theme).palette.text.primary, (theme.vars || theme).palette.action.hoverOpacity)
|
|
209
|
+
}
|
|
210
|
+
}
|
|
211
|
+
}
|
|
212
|
+
}, {
|
|
213
|
+
props: {
|
|
214
|
+
size: 'small',
|
|
215
|
+
variant: 'text'
|
|
216
|
+
},
|
|
217
|
+
style: {
|
|
218
|
+
padding: '4px 5px',
|
|
219
|
+
fontSize: theme.typography.pxToRem(13)
|
|
220
|
+
}
|
|
221
|
+
}, {
|
|
222
|
+
props: {
|
|
223
|
+
size: 'large',
|
|
224
|
+
variant: 'text'
|
|
225
|
+
},
|
|
226
|
+
style: {
|
|
227
|
+
padding: '8px 11px',
|
|
228
|
+
fontSize: theme.typography.pxToRem(15)
|
|
229
|
+
}
|
|
230
|
+
}, {
|
|
231
|
+
props: {
|
|
232
|
+
size: 'small',
|
|
233
|
+
variant: 'outlined'
|
|
234
|
+
},
|
|
235
|
+
style: {
|
|
236
|
+
padding: '3px 9px',
|
|
237
|
+
fontSize: theme.typography.pxToRem(13)
|
|
238
|
+
}
|
|
239
|
+
}, {
|
|
240
|
+
props: {
|
|
241
|
+
size: 'large',
|
|
242
|
+
variant: 'outlined'
|
|
243
|
+
},
|
|
244
|
+
style: {
|
|
245
|
+
padding: '7px 21px',
|
|
246
|
+
fontSize: theme.typography.pxToRem(15)
|
|
247
|
+
}
|
|
248
|
+
}, {
|
|
249
|
+
props: {
|
|
250
|
+
size: 'small',
|
|
251
|
+
variant: 'contained'
|
|
252
|
+
},
|
|
253
|
+
style: {
|
|
254
|
+
padding: '4px 10px',
|
|
255
|
+
fontSize: theme.typography.pxToRem(13)
|
|
256
|
+
}
|
|
257
|
+
}, {
|
|
258
|
+
props: {
|
|
259
|
+
size: 'large',
|
|
260
|
+
variant: 'contained'
|
|
261
|
+
},
|
|
262
|
+
style: {
|
|
263
|
+
padding: '8px 22px',
|
|
264
|
+
fontSize: theme.typography.pxToRem(15)
|
|
265
|
+
}
|
|
266
|
+
}, {
|
|
267
|
+
props: {
|
|
268
|
+
disableElevation: true
|
|
269
|
+
},
|
|
270
|
+
style: {
|
|
271
|
+
boxShadow: 'none',
|
|
272
|
+
'&:hover': {
|
|
273
|
+
boxShadow: 'none'
|
|
274
|
+
},
|
|
275
|
+
[`&.${buttonClasses.default.focusVisible}`]: {
|
|
276
|
+
boxShadow: 'none'
|
|
277
|
+
},
|
|
278
|
+
'&:active': {
|
|
279
|
+
boxShadow: 'none'
|
|
280
|
+
},
|
|
281
|
+
[`&.${buttonClasses.default.disabled}`]: {
|
|
282
|
+
boxShadow: 'none'
|
|
283
|
+
}
|
|
284
|
+
}
|
|
285
|
+
}, {
|
|
286
|
+
props: {
|
|
287
|
+
fullWidth: true
|
|
288
|
+
},
|
|
289
|
+
style: {
|
|
290
|
+
width: '100%'
|
|
291
|
+
}
|
|
292
|
+
}, {
|
|
293
|
+
props: {
|
|
294
|
+
loadingPosition: 'center'
|
|
295
|
+
},
|
|
296
|
+
style: {
|
|
297
|
+
transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color'], {
|
|
298
|
+
duration: theme.transitions.duration.short
|
|
299
|
+
}),
|
|
300
|
+
[`&.${buttonClasses.default.loading}`]: {
|
|
301
|
+
color: 'transparent'
|
|
302
|
+
}
|
|
303
|
+
}
|
|
304
|
+
}]
|
|
305
|
+
};
|
|
306
|
+
}));
|
|
307
|
+
const ButtonStartIcon = styled.default('span', {
|
|
308
|
+
name: 'MuiButton',
|
|
309
|
+
slot: 'StartIcon',
|
|
310
|
+
overridesResolver: (props, styles) => {
|
|
311
|
+
const {
|
|
312
|
+
ownerState
|
|
313
|
+
} = props;
|
|
314
|
+
return [styles.startIcon, ownerState.loading && styles.startIconLoadingStart, styles[`iconSize${capitalize.default(ownerState.size)}`]];
|
|
315
|
+
}
|
|
316
|
+
})(({
|
|
317
|
+
theme
|
|
318
|
+
}) => ({
|
|
319
|
+
display: 'inherit',
|
|
320
|
+
marginRight: 8,
|
|
321
|
+
marginLeft: -4,
|
|
322
|
+
variants: [{
|
|
323
|
+
props: {
|
|
324
|
+
size: 'small'
|
|
325
|
+
},
|
|
326
|
+
style: {
|
|
327
|
+
marginLeft: -2
|
|
328
|
+
}
|
|
329
|
+
}, {
|
|
330
|
+
props: {
|
|
331
|
+
loadingPosition: 'start',
|
|
332
|
+
loading: true
|
|
333
|
+
},
|
|
334
|
+
style: {
|
|
335
|
+
transition: theme.transitions.create(['opacity'], {
|
|
336
|
+
duration: theme.transitions.duration.short
|
|
337
|
+
}),
|
|
338
|
+
opacity: 0
|
|
339
|
+
}
|
|
340
|
+
}, {
|
|
341
|
+
props: {
|
|
342
|
+
loadingPosition: 'start',
|
|
343
|
+
loading: true,
|
|
344
|
+
fullWidth: true
|
|
345
|
+
},
|
|
346
|
+
style: {
|
|
347
|
+
marginRight: -8
|
|
348
|
+
}
|
|
349
|
+
}, ...commonIconStyles]
|
|
350
|
+
}));
|
|
351
|
+
const ButtonEndIcon = styled.default('span', {
|
|
352
|
+
name: 'MuiButton',
|
|
353
|
+
slot: 'EndIcon',
|
|
354
|
+
overridesResolver: (props, styles) => {
|
|
355
|
+
const {
|
|
356
|
+
ownerState
|
|
357
|
+
} = props;
|
|
358
|
+
return [styles.endIcon, ownerState.loading && styles.endIconLoadingEnd, styles[`iconSize${capitalize.default(ownerState.size)}`]];
|
|
359
|
+
}
|
|
360
|
+
})(({
|
|
361
|
+
theme
|
|
362
|
+
}) => ({
|
|
363
|
+
display: 'inherit',
|
|
364
|
+
marginRight: -4,
|
|
365
|
+
marginLeft: 8,
|
|
366
|
+
variants: [{
|
|
367
|
+
props: {
|
|
368
|
+
size: 'small'
|
|
369
|
+
},
|
|
370
|
+
style: {
|
|
371
|
+
marginRight: -2
|
|
372
|
+
}
|
|
373
|
+
}, {
|
|
374
|
+
props: {
|
|
375
|
+
loadingPosition: 'end',
|
|
376
|
+
loading: true
|
|
377
|
+
},
|
|
378
|
+
style: {
|
|
379
|
+
transition: theme.transitions.create(['opacity'], {
|
|
380
|
+
duration: theme.transitions.duration.short
|
|
381
|
+
}),
|
|
382
|
+
opacity: 0
|
|
383
|
+
}
|
|
384
|
+
}, {
|
|
385
|
+
props: {
|
|
386
|
+
loadingPosition: 'end',
|
|
387
|
+
loading: true,
|
|
388
|
+
fullWidth: true
|
|
389
|
+
},
|
|
390
|
+
style: {
|
|
391
|
+
marginLeft: -8
|
|
392
|
+
}
|
|
393
|
+
}, ...commonIconStyles]
|
|
394
|
+
}));
|
|
395
|
+
const ButtonLoadingIndicator = styled.default('span', {
|
|
396
|
+
name: 'MuiButton',
|
|
397
|
+
slot: 'LoadingIndicator'
|
|
398
|
+
})(({
|
|
399
|
+
theme
|
|
400
|
+
}) => ({
|
|
401
|
+
display: 'none',
|
|
402
|
+
position: 'absolute',
|
|
403
|
+
visibility: 'visible',
|
|
404
|
+
variants: [{
|
|
405
|
+
props: {
|
|
406
|
+
loading: true
|
|
407
|
+
},
|
|
408
|
+
style: {
|
|
409
|
+
display: 'flex'
|
|
410
|
+
}
|
|
411
|
+
}, {
|
|
412
|
+
props: {
|
|
413
|
+
loadingPosition: 'start'
|
|
414
|
+
},
|
|
415
|
+
style: {
|
|
416
|
+
left: 14
|
|
417
|
+
}
|
|
418
|
+
}, {
|
|
419
|
+
props: {
|
|
420
|
+
loadingPosition: 'start',
|
|
421
|
+
size: 'small'
|
|
422
|
+
},
|
|
423
|
+
style: {
|
|
424
|
+
left: 10
|
|
425
|
+
}
|
|
426
|
+
}, {
|
|
427
|
+
props: {
|
|
428
|
+
variant: 'text',
|
|
429
|
+
loadingPosition: 'start'
|
|
430
|
+
},
|
|
431
|
+
style: {
|
|
432
|
+
left: 6
|
|
433
|
+
}
|
|
434
|
+
}, {
|
|
435
|
+
props: {
|
|
436
|
+
loadingPosition: 'center'
|
|
437
|
+
},
|
|
438
|
+
style: {
|
|
439
|
+
left: '50%',
|
|
440
|
+
transform: 'translate(-50%)',
|
|
441
|
+
color: (theme.vars || theme).palette.action.disabled
|
|
442
|
+
}
|
|
443
|
+
}, {
|
|
444
|
+
props: {
|
|
445
|
+
loadingPosition: 'end'
|
|
446
|
+
},
|
|
447
|
+
style: {
|
|
448
|
+
right: 14
|
|
449
|
+
}
|
|
450
|
+
}, {
|
|
451
|
+
props: {
|
|
452
|
+
loadingPosition: 'end',
|
|
453
|
+
size: 'small'
|
|
454
|
+
},
|
|
455
|
+
style: {
|
|
456
|
+
right: 10
|
|
457
|
+
}
|
|
458
|
+
}, {
|
|
459
|
+
props: {
|
|
460
|
+
variant: 'text',
|
|
461
|
+
loadingPosition: 'end'
|
|
462
|
+
},
|
|
463
|
+
style: {
|
|
464
|
+
right: 6
|
|
465
|
+
}
|
|
466
|
+
}, {
|
|
467
|
+
props: {
|
|
468
|
+
loadingPosition: 'start',
|
|
469
|
+
fullWidth: true
|
|
470
|
+
},
|
|
471
|
+
style: {
|
|
472
|
+
position: 'relative',
|
|
473
|
+
left: -10
|
|
474
|
+
}
|
|
475
|
+
}, {
|
|
476
|
+
props: {
|
|
477
|
+
loadingPosition: 'end',
|
|
478
|
+
fullWidth: true
|
|
479
|
+
},
|
|
480
|
+
style: {
|
|
481
|
+
position: 'relative',
|
|
482
|
+
right: -10
|
|
483
|
+
}
|
|
484
|
+
}]
|
|
485
|
+
}));
|
|
486
|
+
const ButtonLoadingIconPlaceholder = styled.default('span', {
|
|
487
|
+
name: 'MuiButton',
|
|
488
|
+
slot: 'LoadingIconPlaceholder'
|
|
489
|
+
})({
|
|
490
|
+
display: 'inline-block',
|
|
491
|
+
width: '1em',
|
|
492
|
+
height: '1em'
|
|
493
|
+
});
|
|
494
|
+
const Button = /*#__PURE__*/React__namespace.forwardRef(function Button(inProps, ref) {
|
|
495
|
+
// props priority: `inProps` > `contextProps` > `themeDefaultProps`
|
|
496
|
+
const contextProps = React__namespace.useContext(ButtonGroupContext.default);
|
|
497
|
+
const buttonGroupButtonContextPositionClassName = React__namespace.useContext(ButtonGroupButtonContext.default);
|
|
498
|
+
const resolvedProps = resolveProps.default(contextProps, inProps);
|
|
499
|
+
const props = DefaultPropsProvider.useDefaultProps({
|
|
500
|
+
props: resolvedProps,
|
|
501
|
+
name: 'MuiButton'
|
|
502
|
+
});
|
|
503
|
+
const {
|
|
504
|
+
children,
|
|
505
|
+
color = 'primary',
|
|
506
|
+
component = 'button',
|
|
507
|
+
className,
|
|
508
|
+
disabled = false,
|
|
509
|
+
disableElevation = false,
|
|
510
|
+
disableFocusRipple = false,
|
|
511
|
+
endIcon: endIconProp,
|
|
512
|
+
focusVisibleClassName,
|
|
513
|
+
fullWidth = false,
|
|
514
|
+
id: idProp,
|
|
515
|
+
loading = null,
|
|
516
|
+
loadingIndicator: loadingIndicatorProp,
|
|
517
|
+
loadingPosition = 'center',
|
|
518
|
+
size = 'medium',
|
|
519
|
+
startIcon: startIconProp,
|
|
520
|
+
type,
|
|
521
|
+
variant = 'text',
|
|
522
|
+
...other
|
|
523
|
+
} = props;
|
|
524
|
+
const loadingId = useId.default(idProp);
|
|
525
|
+
const loadingIndicator = loadingIndicatorProp ?? /*#__PURE__*/jsxRuntime.jsx(CircularProgress.default, {
|
|
526
|
+
"aria-labelledby": loadingId,
|
|
527
|
+
color: "inherit",
|
|
528
|
+
size: 16
|
|
529
|
+
});
|
|
530
|
+
const ownerState = {
|
|
531
|
+
...props,
|
|
532
|
+
color,
|
|
533
|
+
component,
|
|
534
|
+
disabled,
|
|
535
|
+
disableElevation,
|
|
536
|
+
disableFocusRipple,
|
|
537
|
+
fullWidth,
|
|
538
|
+
loading,
|
|
539
|
+
loadingIndicator,
|
|
540
|
+
loadingPosition,
|
|
541
|
+
size,
|
|
542
|
+
type,
|
|
543
|
+
variant
|
|
544
|
+
};
|
|
545
|
+
const classes = useUtilityClasses(ownerState);
|
|
546
|
+
const startIcon = (startIconProp || loading && loadingPosition === 'start') && /*#__PURE__*/jsxRuntime.jsx(ButtonStartIcon, {
|
|
547
|
+
className: classes.startIcon,
|
|
548
|
+
ownerState: ownerState,
|
|
549
|
+
children: startIconProp || /*#__PURE__*/jsxRuntime.jsx(ButtonLoadingIconPlaceholder, {
|
|
550
|
+
className: classes.loadingIconPlaceholder,
|
|
551
|
+
ownerState: ownerState
|
|
552
|
+
})
|
|
553
|
+
});
|
|
554
|
+
const endIcon = (endIconProp || loading && loadingPosition === 'end') && /*#__PURE__*/jsxRuntime.jsx(ButtonEndIcon, {
|
|
555
|
+
className: classes.endIcon,
|
|
556
|
+
ownerState: ownerState,
|
|
557
|
+
children: endIconProp || /*#__PURE__*/jsxRuntime.jsx(ButtonLoadingIconPlaceholder, {
|
|
558
|
+
className: classes.loadingIconPlaceholder,
|
|
559
|
+
ownerState: ownerState
|
|
560
|
+
})
|
|
561
|
+
});
|
|
562
|
+
const positionClassName = buttonGroupButtonContextPositionClassName || '';
|
|
563
|
+
const loader = typeof loading === 'boolean' ?
|
|
564
|
+
/*#__PURE__*/
|
|
565
|
+
// use plain HTML span to minimize the runtime overhead
|
|
566
|
+
jsxRuntime.jsx("span", {
|
|
567
|
+
className: classes.loadingWrapper,
|
|
568
|
+
style: {
|
|
569
|
+
display: 'contents'
|
|
570
|
+
},
|
|
571
|
+
children: loading && /*#__PURE__*/jsxRuntime.jsx(ButtonLoadingIndicator, {
|
|
572
|
+
className: classes.loadingIndicator,
|
|
573
|
+
ownerState: ownerState,
|
|
574
|
+
children: loadingIndicator
|
|
575
|
+
})
|
|
576
|
+
}) : null;
|
|
577
|
+
return /*#__PURE__*/jsxRuntime.jsxs(ButtonRoot, {
|
|
578
|
+
ownerState: ownerState,
|
|
579
|
+
className: clsx.clsx(contextProps.className, classes.root, className, positionClassName),
|
|
580
|
+
component: component,
|
|
581
|
+
disabled: disabled || loading,
|
|
582
|
+
focusRipple: !disableFocusRipple,
|
|
583
|
+
focusVisibleClassName: clsx.clsx(classes.focusVisible, focusVisibleClassName),
|
|
584
|
+
ref: ref,
|
|
585
|
+
type: type,
|
|
586
|
+
id: loading ? loadingId : idProp,
|
|
587
|
+
...other,
|
|
588
|
+
classes: classes,
|
|
589
|
+
children: [startIcon, loadingPosition !== 'end' && loader, children, loadingPosition === 'end' && loader, endIcon]
|
|
590
|
+
});
|
|
591
|
+
});
|
|
592
|
+
process.env.NODE_ENV !== "production" ? Button.propTypes /* remove-proptypes */ = {
|
|
593
|
+
// ┌────────────────────────────── Warning ──────────────────────────────┐
|
|
594
|
+
// │ These PropTypes are generated from the TypeScript type definitions. │
|
|
595
|
+
// │ To update them, edit the d.ts file and run `pnpm proptypes`. │
|
|
596
|
+
// └─────────────────────────────────────────────────────────────────────┘
|
|
597
|
+
/**
|
|
598
|
+
* The content of the component.
|
|
599
|
+
*/
|
|
600
|
+
children: index.default.node,
|
|
601
|
+
/**
|
|
602
|
+
* Override or extend the styles applied to the component.
|
|
603
|
+
*/
|
|
604
|
+
classes: index.default.object,
|
|
605
|
+
/**
|
|
606
|
+
* @ignore
|
|
607
|
+
*/
|
|
608
|
+
className: index.default.string,
|
|
609
|
+
/**
|
|
610
|
+
* The color of the component.
|
|
611
|
+
* It supports both default and custom theme colors, which can be added as shown in the
|
|
612
|
+
* [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
|
|
613
|
+
* @default 'primary'
|
|
614
|
+
*/
|
|
615
|
+
color: index.default /* @typescript-to-proptypes-ignore */.oneOfType([index.default.oneOf(['inherit', 'primary', 'secondary', 'success', 'error', 'info', 'warning']), index.default.string]),
|
|
616
|
+
/**
|
|
617
|
+
* The component used for the root node.
|
|
618
|
+
* Either a string to use a HTML element or a component.
|
|
619
|
+
*/
|
|
620
|
+
component: index.default.elementType,
|
|
621
|
+
/**
|
|
622
|
+
* If `true`, the component is disabled.
|
|
623
|
+
* @default false
|
|
624
|
+
*/
|
|
625
|
+
disabled: index.default.bool,
|
|
626
|
+
/**
|
|
627
|
+
* If `true`, no elevation is used.
|
|
628
|
+
* @default false
|
|
629
|
+
*/
|
|
630
|
+
disableElevation: index.default.bool,
|
|
631
|
+
/**
|
|
632
|
+
* If `true`, the keyboard focus ripple is disabled.
|
|
633
|
+
* @default false
|
|
634
|
+
*/
|
|
635
|
+
disableFocusRipple: index.default.bool,
|
|
636
|
+
/**
|
|
637
|
+
* If `true`, the ripple effect is disabled.
|
|
638
|
+
*
|
|
639
|
+
* ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
|
|
640
|
+
* to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
|
|
641
|
+
* @default false
|
|
642
|
+
*/
|
|
643
|
+
disableRipple: index.default.bool,
|
|
644
|
+
/**
|
|
645
|
+
* Element placed after the children.
|
|
646
|
+
*/
|
|
647
|
+
endIcon: index.default.node,
|
|
648
|
+
/**
|
|
649
|
+
* @ignore
|
|
650
|
+
*/
|
|
651
|
+
focusVisibleClassName: index.default.string,
|
|
652
|
+
/**
|
|
653
|
+
* If `true`, the button will take up the full width of its container.
|
|
654
|
+
* @default false
|
|
655
|
+
*/
|
|
656
|
+
fullWidth: index.default.bool,
|
|
657
|
+
/**
|
|
658
|
+
* The URL to link to when the button is clicked.
|
|
659
|
+
* If defined, an `a` element will be used as the root node.
|
|
660
|
+
*/
|
|
661
|
+
href: index.default.string,
|
|
662
|
+
/**
|
|
663
|
+
* @ignore
|
|
664
|
+
*/
|
|
665
|
+
id: index.default.string,
|
|
666
|
+
/**
|
|
667
|
+
* If `true`, the loading indicator is visible and the button is disabled.
|
|
668
|
+
* If `true | false`, the loading wrapper is always rendered before the children to prevent [Google Translation Crash](https://github.com/mui/material-ui/issues/27853).
|
|
669
|
+
* @default null
|
|
670
|
+
*/
|
|
671
|
+
loading: index.default.bool,
|
|
672
|
+
/**
|
|
673
|
+
* Element placed before the children if the button is in loading state.
|
|
674
|
+
* The node should contain an element with `role="progressbar"` with an accessible name.
|
|
675
|
+
* By default, it renders a `CircularProgress` that is labeled by the button itself.
|
|
676
|
+
* @default <CircularProgress color="inherit" size={16} />
|
|
677
|
+
*/
|
|
678
|
+
loadingIndicator: index.default.node,
|
|
679
|
+
/**
|
|
680
|
+
* The loading indicator can be positioned on the start, end, or the center of the button.
|
|
681
|
+
* @default 'center'
|
|
682
|
+
*/
|
|
683
|
+
loadingPosition: index.default.oneOf(['center', 'end', 'start']),
|
|
684
|
+
/**
|
|
685
|
+
* The size of the component.
|
|
686
|
+
* `small` is equivalent to the dense button styling.
|
|
687
|
+
* @default 'medium'
|
|
688
|
+
*/
|
|
689
|
+
size: index.default /* @typescript-to-proptypes-ignore */.oneOfType([index.default.oneOf(['small', 'medium', 'large']), index.default.string]),
|
|
690
|
+
/**
|
|
691
|
+
* Element placed before the children.
|
|
692
|
+
*/
|
|
693
|
+
startIcon: index.default.node,
|
|
694
|
+
/**
|
|
695
|
+
* The system prop that allows defining system overrides as well as additional CSS styles.
|
|
696
|
+
*/
|
|
697
|
+
sx: index.default.oneOfType([index.default.arrayOf(index.default.oneOfType([index.default.func, index.default.object, index.default.bool])), index.default.func, index.default.object]),
|
|
698
|
+
/**
|
|
699
|
+
* @ignore
|
|
700
|
+
*/
|
|
701
|
+
type: index.default.oneOfType([index.default.oneOf(['button', 'reset', 'submit']), index.default.string]),
|
|
702
|
+
/**
|
|
703
|
+
* The variant to use.
|
|
704
|
+
* @default 'text'
|
|
705
|
+
*/
|
|
706
|
+
variant: index.default /* @typescript-to-proptypes-ignore */.oneOfType([index.default.oneOf(['contained', 'outlined', 'text']), index.default.string])
|
|
707
|
+
} : void 0;
|
|
708
|
+
|
|
709
|
+
exports.default = Button;
|
|
710
|
+
//# sourceMappingURL=Button.js.map
|