@mui/material 5.11.3 → 5.11.5
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/Autocomplete/Autocomplete.d.ts +4 -3
- package/Autocomplete/Autocomplete.js +1 -0
- package/Box/Box.d.ts +5 -22
- package/CHANGELOG.md +106 -0
- package/FilledInput/FilledInput.js +0 -4
- package/Input/Input.js +1 -5
- package/MenuItem/MenuItem.d.ts +1 -1
- package/MenuItem/MenuItem.js +2 -1
- package/Modal/Modal.d.ts +35 -12
- package/Select/Select.d.ts +25 -83
- package/Slider/Slider.d.ts +1 -2
- package/Slider/Slider.js +222 -63
- package/Slider/SliderValueLabel.d.ts +15 -0
- package/Slider/SliderValueLabel.js +49 -0
- package/Slider/SliderValueLabel.types.d.ts +24 -0
- package/Slider/SliderValueLabel.types.js +1 -0
- package/Slider/index.d.ts +1 -0
- package/Slider/index.js +2 -1
- package/Slider/sliderClasses.d.ts +29 -0
- package/Slider/sliderClasses.js +5 -0
- package/Tabs/Tabs.js +3 -1
- package/Tooltip/Tooltip.js +0 -1
- package/index.js +3 -1
- package/legacy/Autocomplete/Autocomplete.js +1 -0
- package/legacy/FilledInput/FilledInput.js +0 -3
- package/legacy/Input/Input.js +1 -4
- package/legacy/MenuItem/MenuItem.js +2 -1
- package/legacy/Slider/Slider.js +251 -72
- package/legacy/Slider/SliderValueLabel.js +45 -0
- package/legacy/Slider/SliderValueLabel.types.js +1 -0
- package/legacy/Slider/index.js +2 -1
- package/legacy/Slider/sliderClasses.js +5 -0
- package/legacy/Tabs/Tabs.js +3 -1
- package/legacy/Tooltip/Tooltip.js +0 -1
- package/legacy/index.js +3 -1
- package/legacy/locale/index.js +230 -144
- package/legacy/styles/experimental_extendTheme.js +16 -8
- package/locale/index.d.ts +1 -0
- package/locale/index.js +85 -0
- package/modern/Autocomplete/Autocomplete.js +1 -0
- package/modern/FilledInput/FilledInput.js +0 -4
- package/modern/Input/Input.js +1 -5
- package/modern/MenuItem/MenuItem.js +2 -1
- package/modern/Slider/Slider.js +221 -62
- package/modern/Slider/SliderValueLabel.js +49 -0
- package/modern/Slider/SliderValueLabel.types.js +1 -0
- package/modern/Slider/index.js +2 -1
- package/modern/Slider/sliderClasses.js +5 -0
- package/modern/Tabs/Tabs.js +3 -1
- package/modern/Tooltip/Tooltip.js +0 -1
- package/modern/index.js +3 -1
- package/modern/locale/index.js +85 -0
- package/modern/styles/experimental_extendTheme.js +16 -8
- package/node/Autocomplete/Autocomplete.js +1 -0
- package/node/FilledInput/FilledInput.js +0 -4
- package/node/Input/Input.js +1 -5
- package/node/MenuItem/MenuItem.js +2 -1
- package/node/Slider/Slider.js +228 -71
- package/node/Slider/SliderValueLabel.js +57 -0
- package/node/Slider/SliderValueLabel.types.js +5 -0
- package/node/Slider/index.js +11 -1
- package/node/Slider/sliderClasses.js +13 -0
- package/node/Tabs/Tabs.js +3 -1
- package/node/Tooltip/Tooltip.js +0 -1
- package/node/index.js +3 -1
- package/node/locale/index.js +87 -1
- package/node/styles/experimental_extendTheme.js +16 -8
- package/package.json +4 -4
- package/styles/experimental_extendTheme.js +16 -8
- package/umd/material-ui.development.js +523 -787
- package/umd/material-ui.production.min.js +23 -21
package/legacy/Slider/Slider.js
CHANGED
|
@@ -4,16 +4,25 @@ import _extends from "@babel/runtime/helpers/esm/extends";
|
|
|
4
4
|
import * as React from 'react';
|
|
5
5
|
import PropTypes from 'prop-types';
|
|
6
6
|
import clsx from 'clsx';
|
|
7
|
-
import { chainPropTypes
|
|
8
|
-
import
|
|
7
|
+
import { chainPropTypes } from '@mui/utils';
|
|
8
|
+
import { isHostComponent, useSlotProps, unstable_composeClasses as composeClasses } from '@mui/base';
|
|
9
|
+
import { useSlider, getSliderUtilityClass } from '@mui/base/SliderUnstyled';
|
|
9
10
|
import { alpha, lighten, darken } from '@mui/system';
|
|
10
11
|
import useThemeProps from '../styles/useThemeProps';
|
|
11
12
|
import styled, { slotShouldForwardProp } from '../styles/styled';
|
|
12
13
|
import useTheme from '../styles/useTheme';
|
|
13
14
|
import shouldSpreadAdditionalProps from '../utils/shouldSpreadAdditionalProps';
|
|
14
15
|
import capitalize from '../utils/capitalize';
|
|
16
|
+
import SliderValueLabelComponent from './SliderValueLabel';
|
|
17
|
+
import sliderClasses from './sliderClasses';
|
|
15
18
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
16
|
-
|
|
19
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
20
|
+
var valueToPercent = function valueToPercent(value, min, max) {
|
|
21
|
+
return (value - min) * 100 / (max - min);
|
|
22
|
+
};
|
|
23
|
+
function Identity(x) {
|
|
24
|
+
return x;
|
|
25
|
+
}
|
|
17
26
|
var SliderRoot = styled('span', {
|
|
18
27
|
name: 'MuiSlider',
|
|
19
28
|
slot: 'Root',
|
|
@@ -251,7 +260,7 @@ process.env.NODE_ENV !== "production" ? SliderThumb.propTypes /* remove-proptype
|
|
|
251
260
|
children: PropTypes.node
|
|
252
261
|
} : void 0;
|
|
253
262
|
export { SliderThumb };
|
|
254
|
-
var SliderValueLabel = styled(
|
|
263
|
+
var SliderValueLabel = styled(SliderValueLabelComponent, {
|
|
255
264
|
name: 'MuiSlider',
|
|
256
265
|
slot: 'ValueLabel',
|
|
257
266
|
overridesResolver: function overridesResolver(props, styles) {
|
|
@@ -406,25 +415,47 @@ process.env.NODE_ENV !== "production" ? SliderMarkLabel.propTypes /* remove-prop
|
|
|
406
415
|
children: PropTypes.node
|
|
407
416
|
} : void 0;
|
|
408
417
|
export { SliderMarkLabel };
|
|
409
|
-
var
|
|
410
|
-
var
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
+
var useUtilityClasses = function useUtilityClasses(ownerState) {
|
|
419
|
+
var disabled = ownerState.disabled,
|
|
420
|
+
dragging = ownerState.dragging,
|
|
421
|
+
marked = ownerState.marked,
|
|
422
|
+
orientation = ownerState.orientation,
|
|
423
|
+
track = ownerState.track,
|
|
424
|
+
classes = ownerState.classes,
|
|
425
|
+
color = ownerState.color,
|
|
426
|
+
size = ownerState.size;
|
|
427
|
+
var slots = {
|
|
428
|
+
root: ['root', disabled && 'disabled', dragging && 'dragging', marked && 'marked', orientation === 'vertical' && 'vertical', track === 'inverted' && 'trackInverted', track === false && 'trackFalse', color && "color".concat(capitalize(color)), size && "size".concat(capitalize(size))],
|
|
429
|
+
rail: ['rail'],
|
|
430
|
+
track: ['track'],
|
|
431
|
+
mark: ['mark'],
|
|
432
|
+
markActive: ['markActive'],
|
|
433
|
+
markLabel: ['markLabel'],
|
|
434
|
+
markLabelActive: ['markLabelActive'],
|
|
435
|
+
valueLabel: ['valueLabel'],
|
|
436
|
+
thumb: ['thumb', disabled && 'disabled', size && "thumbSize".concat(capitalize(size)), color && "thumbColor".concat(capitalize(color))],
|
|
437
|
+
active: ['active'],
|
|
438
|
+
disabled: ['disabled'],
|
|
439
|
+
focusVisible: ['focusVisible']
|
|
440
|
+
};
|
|
441
|
+
return composeClasses(slots, getSliderUtilityClass, classes);
|
|
442
|
+
};
|
|
443
|
+
var Forward = function Forward(_ref8) {
|
|
444
|
+
var children = _ref8.children;
|
|
445
|
+
return children;
|
|
418
446
|
};
|
|
419
447
|
var Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
|
|
420
|
-
var
|
|
448
|
+
var _ref9, _slots$root, _ref10, _slots$rail, _ref11, _slots$track, _ref12, _slots$thumb, _ref13, _slots$valueLabel, _ref14, _slots$mark, _ref15, _slots$markLabel, _ref16, _slots$input, _slotProps$root, _slotProps$rail, _slotProps$track, _slotProps$thumb, _slotProps$valueLabel, _slotProps$mark, _slotProps$markLabel, _slotProps$input;
|
|
421
449
|
var props = useThemeProps({
|
|
422
450
|
props: inputProps,
|
|
423
451
|
name: 'MuiSlider'
|
|
424
452
|
});
|
|
425
453
|
var theme = useTheme();
|
|
426
454
|
var isRtl = theme.direction === 'rtl';
|
|
427
|
-
var
|
|
455
|
+
var ariaLabel = props['aria-label'],
|
|
456
|
+
ariaValuetext = props['aria-valuetext'],
|
|
457
|
+
ariaLabelledby = props['aria-labelledby'],
|
|
458
|
+
_props$component = props.component,
|
|
428
459
|
component = _props$component === void 0 ? 'span' : _props$component,
|
|
429
460
|
_props$components = props.components,
|
|
430
461
|
components = _props$components === void 0 ? {} : _props$components,
|
|
@@ -432,26 +463,92 @@ var Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
|
|
|
432
463
|
componentsProps = _props$componentsProp === void 0 ? {} : _props$componentsProp,
|
|
433
464
|
_props$color = props.color,
|
|
434
465
|
color = _props$color === void 0 ? 'primary' : _props$color,
|
|
466
|
+
classesProp = props.classes,
|
|
467
|
+
className = props.className,
|
|
468
|
+
_props$disableSwap = props.disableSwap,
|
|
469
|
+
disableSwap = _props$disableSwap === void 0 ? false : _props$disableSwap,
|
|
470
|
+
_props$disabled = props.disabled,
|
|
471
|
+
disabled = _props$disabled === void 0 ? false : _props$disabled,
|
|
472
|
+
getAriaLabel = props.getAriaLabel,
|
|
473
|
+
getAriaValueText = props.getAriaValueText,
|
|
474
|
+
_props$marks = props.marks,
|
|
475
|
+
marksProp = _props$marks === void 0 ? false : _props$marks,
|
|
476
|
+
_props$max = props.max,
|
|
477
|
+
max = _props$max === void 0 ? 100 : _props$max,
|
|
478
|
+
_props$min = props.min,
|
|
479
|
+
min = _props$min === void 0 ? 0 : _props$min,
|
|
480
|
+
name = props.name,
|
|
481
|
+
onChange = props.onChange,
|
|
482
|
+
onChangeCommitted = props.onChangeCommitted,
|
|
483
|
+
_props$orientation = props.orientation,
|
|
484
|
+
orientation = _props$orientation === void 0 ? 'horizontal' : _props$orientation,
|
|
435
485
|
_props$size = props.size,
|
|
436
486
|
size = _props$size === void 0 ? 'medium' : _props$size,
|
|
487
|
+
_props$step = props.step,
|
|
488
|
+
step = _props$step === void 0 ? 1 : _props$step,
|
|
489
|
+
_props$scale = props.scale,
|
|
490
|
+
scale = _props$scale === void 0 ? Identity : _props$scale,
|
|
437
491
|
slotProps = props.slotProps,
|
|
438
492
|
slots = props.slots,
|
|
439
|
-
|
|
493
|
+
tabIndex = props.tabIndex,
|
|
494
|
+
_props$track = props.track,
|
|
495
|
+
track = _props$track === void 0 ? 'normal' : _props$track,
|
|
496
|
+
valueProp = props.value,
|
|
497
|
+
_props$valueLabelDisp = props.valueLabelDisplay,
|
|
498
|
+
valueLabelDisplay = _props$valueLabelDisp === void 0 ? 'off' : _props$valueLabelDisp,
|
|
499
|
+
_props$valueLabelForm = props.valueLabelFormat,
|
|
500
|
+
valueLabelFormat = _props$valueLabelForm === void 0 ? Identity : _props$valueLabelForm,
|
|
501
|
+
other = _objectWithoutProperties(props, ["aria-label", "aria-valuetext", "aria-labelledby", "component", "components", "componentsProps", "color", "classes", "className", "disableSwap", "disabled", "getAriaLabel", "getAriaValueText", "marks", "max", "min", "name", "onChange", "onChangeCommitted", "orientation", "size", "step", "scale", "slotProps", "slots", "tabIndex", "track", "value", "valueLabelDisplay", "valueLabelFormat"]);
|
|
440
502
|
var ownerState = _extends({}, props, {
|
|
503
|
+
isRtl: isRtl,
|
|
504
|
+
max: max,
|
|
505
|
+
min: min,
|
|
506
|
+
classes: classesProp,
|
|
507
|
+
disabled: disabled,
|
|
508
|
+
disableSwap: disableSwap,
|
|
509
|
+
orientation: orientation,
|
|
510
|
+
marks: marksProp,
|
|
441
511
|
color: color,
|
|
442
|
-
size: size
|
|
512
|
+
size: size,
|
|
513
|
+
step: step,
|
|
514
|
+
scale: scale,
|
|
515
|
+
track: track,
|
|
516
|
+
valueLabelDisplay: valueLabelDisplay,
|
|
517
|
+
valueLabelFormat: valueLabelFormat
|
|
443
518
|
});
|
|
444
|
-
var
|
|
519
|
+
var _useSlider = useSlider(_extends({}, ownerState, {
|
|
520
|
+
ref: ref
|
|
521
|
+
})),
|
|
522
|
+
axisProps = _useSlider.axisProps,
|
|
523
|
+
getRootProps = _useSlider.getRootProps,
|
|
524
|
+
getHiddenInputProps = _useSlider.getHiddenInputProps,
|
|
525
|
+
getThumbProps = _useSlider.getThumbProps,
|
|
526
|
+
open = _useSlider.open,
|
|
527
|
+
active = _useSlider.active,
|
|
528
|
+
axis = _useSlider.axis,
|
|
529
|
+
focusedThumbIndex = _useSlider.focusedThumbIndex,
|
|
530
|
+
range = _useSlider.range,
|
|
531
|
+
dragging = _useSlider.dragging,
|
|
532
|
+
marks = _useSlider.marks,
|
|
533
|
+
values = _useSlider.values,
|
|
534
|
+
trackOffset = _useSlider.trackOffset,
|
|
535
|
+
trackLeap = _useSlider.trackLeap;
|
|
536
|
+
ownerState.marked = marks.length > 0 && marks.some(function (mark) {
|
|
537
|
+
return mark.label;
|
|
538
|
+
});
|
|
539
|
+
ownerState.dragging = dragging;
|
|
540
|
+
ownerState.focusedThumbIndex = focusedThumbIndex;
|
|
541
|
+
var classes = useUtilityClasses(ownerState);
|
|
445
542
|
|
|
446
543
|
// support both `slots` and `components` for backward compatibility
|
|
447
|
-
var RootSlot = (
|
|
448
|
-
var RailSlot = (
|
|
449
|
-
var TrackSlot = (
|
|
450
|
-
var ThumbSlot = (
|
|
451
|
-
var ValueLabelSlot = (
|
|
452
|
-
var MarkSlot = (
|
|
453
|
-
var MarkLabelSlot = (
|
|
454
|
-
var InputSlot = (_slots$input = slots == null ? void 0 : slots.input) != null ? _slots$input : components.Input;
|
|
544
|
+
var RootSlot = (_ref9 = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components.Root) != null ? _ref9 : SliderRoot;
|
|
545
|
+
var RailSlot = (_ref10 = (_slots$rail = slots == null ? void 0 : slots.rail) != null ? _slots$rail : components.Rail) != null ? _ref10 : SliderRail;
|
|
546
|
+
var TrackSlot = (_ref11 = (_slots$track = slots == null ? void 0 : slots.track) != null ? _slots$track : components.Track) != null ? _ref11 : SliderTrack;
|
|
547
|
+
var ThumbSlot = (_ref12 = (_slots$thumb = slots == null ? void 0 : slots.thumb) != null ? _slots$thumb : components.Thumb) != null ? _ref12 : SliderThumb;
|
|
548
|
+
var ValueLabelSlot = (_ref13 = (_slots$valueLabel = slots == null ? void 0 : slots.valueLabel) != null ? _slots$valueLabel : components.ValueLabel) != null ? _ref13 : SliderValueLabel;
|
|
549
|
+
var MarkSlot = (_ref14 = (_slots$mark = slots == null ? void 0 : slots.mark) != null ? _slots$mark : components.Mark) != null ? _ref14 : SliderMark;
|
|
550
|
+
var MarkLabelSlot = (_ref15 = (_slots$markLabel = slots == null ? void 0 : slots.markLabel) != null ? _slots$markLabel : components.MarkLabel) != null ? _ref15 : SliderMarkLabel;
|
|
551
|
+
var InputSlot = (_ref16 = (_slots$input = slots == null ? void 0 : slots.input) != null ? _slots$input : components.Input) != null ? _ref16 : 'input';
|
|
455
552
|
var rootSlotProps = (_slotProps$root = slotProps == null ? void 0 : slotProps.root) != null ? _slotProps$root : componentsProps.root;
|
|
456
553
|
var railSlotProps = (_slotProps$rail = slotProps == null ? void 0 : slotProps.rail) != null ? _slotProps$rail : componentsProps.rail;
|
|
457
554
|
var trackSlotProps = (_slotProps$track = slotProps == null ? void 0 : slotProps.track) != null ? _slotProps$track : componentsProps.track;
|
|
@@ -460,51 +557,125 @@ var Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
|
|
|
460
557
|
var markSlotProps = (_slotProps$mark = slotProps == null ? void 0 : slotProps.mark) != null ? _slotProps$mark : componentsProps.mark;
|
|
461
558
|
var markLabelSlotProps = (_slotProps$markLabel = slotProps == null ? void 0 : slotProps.markLabel) != null ? _slotProps$markLabel : componentsProps.markLabel;
|
|
462
559
|
var inputSlotProps = (_slotProps$input = slotProps == null ? void 0 : slotProps.input) != null ? _slotProps$input : componentsProps.input;
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
valueLabel: ValueLabelSlot,
|
|
471
|
-
mark: MarkSlot,
|
|
472
|
-
markLabel: MarkLabelSlot,
|
|
473
|
-
input: InputSlot
|
|
474
|
-
},
|
|
475
|
-
slotProps: _extends({}, componentsProps, {
|
|
476
|
-
root: _extends({}, rootSlotProps, shouldSpreadAdditionalProps(RootSlot) && {
|
|
477
|
-
as: component,
|
|
478
|
-
ownerState: _extends({}, rootSlotProps == null ? void 0 : rootSlotProps.ownerState, {
|
|
479
|
-
color: color,
|
|
480
|
-
size: size
|
|
481
|
-
})
|
|
482
|
-
}),
|
|
483
|
-
rail: railSlotProps,
|
|
484
|
-
thumb: _extends({}, thumbSlotProps, shouldSpreadAdditionalProps(ThumbSlot) && {
|
|
485
|
-
ownerState: _extends({}, thumbSlotProps == null ? void 0 : thumbSlotProps.ownerState, {
|
|
486
|
-
color: color,
|
|
487
|
-
size: size
|
|
488
|
-
})
|
|
489
|
-
}),
|
|
490
|
-
track: _extends({}, trackSlotProps, shouldSpreadAdditionalProps(TrackSlot) && {
|
|
491
|
-
ownerState: _extends({}, trackSlotProps == null ? void 0 : trackSlotProps.ownerState, {
|
|
492
|
-
color: color,
|
|
493
|
-
size: size
|
|
494
|
-
})
|
|
495
|
-
}),
|
|
496
|
-
valueLabel: _extends({}, valueLabelSlotProps, shouldSpreadAdditionalProps(ValueLabelSlot) && {
|
|
497
|
-
ownerState: _extends({}, valueLabelSlotProps == null ? void 0 : valueLabelSlotProps.ownerState, {
|
|
498
|
-
color: color,
|
|
499
|
-
size: size
|
|
500
|
-
})
|
|
501
|
-
}),
|
|
502
|
-
mark: markSlotProps,
|
|
503
|
-
markLabel: markLabelSlotProps,
|
|
504
|
-
input: inputSlotProps
|
|
560
|
+
var rootProps = useSlotProps({
|
|
561
|
+
elementType: RootSlot,
|
|
562
|
+
getSlotProps: getRootProps,
|
|
563
|
+
externalSlotProps: rootSlotProps,
|
|
564
|
+
externalForwardedProps: other,
|
|
565
|
+
additionalProps: _extends({}, shouldSpreadAdditionalProps(RootSlot) && {
|
|
566
|
+
as: component
|
|
505
567
|
}),
|
|
506
|
-
|
|
507
|
-
|
|
568
|
+
ownerState: _extends({}, ownerState, rootSlotProps == null ? void 0 : rootSlotProps.ownerState),
|
|
569
|
+
className: [classes.root, className]
|
|
570
|
+
});
|
|
571
|
+
var railProps = useSlotProps({
|
|
572
|
+
elementType: RailSlot,
|
|
573
|
+
externalSlotProps: railSlotProps,
|
|
574
|
+
ownerState: ownerState,
|
|
575
|
+
className: classes.rail
|
|
576
|
+
});
|
|
577
|
+
var trackProps = useSlotProps({
|
|
578
|
+
elementType: TrackSlot,
|
|
579
|
+
externalSlotProps: trackSlotProps,
|
|
580
|
+
additionalProps: {
|
|
581
|
+
style: _extends({}, axisProps[axis].offset(trackOffset), axisProps[axis].leap(trackLeap))
|
|
582
|
+
},
|
|
583
|
+
ownerState: _extends({}, ownerState, trackSlotProps == null ? void 0 : trackSlotProps.ownerState),
|
|
584
|
+
className: classes.track
|
|
585
|
+
});
|
|
586
|
+
var thumbProps = useSlotProps({
|
|
587
|
+
elementType: ThumbSlot,
|
|
588
|
+
getSlotProps: getThumbProps,
|
|
589
|
+
externalSlotProps: thumbSlotProps,
|
|
590
|
+
ownerState: _extends({}, ownerState, thumbSlotProps == null ? void 0 : thumbSlotProps.ownerState)
|
|
591
|
+
});
|
|
592
|
+
var valueLabelProps = useSlotProps({
|
|
593
|
+
elementType: ValueLabelSlot,
|
|
594
|
+
externalSlotProps: valueLabelSlotProps,
|
|
595
|
+
ownerState: _extends({}, ownerState, valueLabelSlotProps == null ? void 0 : valueLabelSlotProps.ownerState),
|
|
596
|
+
className: classes.valueLabel
|
|
597
|
+
});
|
|
598
|
+
var markProps = useSlotProps({
|
|
599
|
+
elementType: MarkSlot,
|
|
600
|
+
externalSlotProps: markSlotProps,
|
|
601
|
+
ownerState: ownerState,
|
|
602
|
+
className: classes.mark
|
|
603
|
+
});
|
|
604
|
+
var markLabelProps = useSlotProps({
|
|
605
|
+
elementType: MarkLabelSlot,
|
|
606
|
+
externalSlotProps: markLabelSlotProps,
|
|
607
|
+
ownerState: ownerState
|
|
608
|
+
});
|
|
609
|
+
var inputSliderProps = useSlotProps({
|
|
610
|
+
elementType: InputSlot,
|
|
611
|
+
getSlotProps: getHiddenInputProps,
|
|
612
|
+
externalSlotProps: inputSlotProps,
|
|
613
|
+
ownerState: ownerState
|
|
614
|
+
});
|
|
615
|
+
return /*#__PURE__*/_jsxs(RootSlot, _extends({}, rootProps, {
|
|
616
|
+
children: [/*#__PURE__*/_jsx(RailSlot, _extends({}, railProps)), /*#__PURE__*/_jsx(TrackSlot, _extends({}, trackProps)), marks.filter(function (mark) {
|
|
617
|
+
return mark.value >= min && mark.value <= max;
|
|
618
|
+
}).map(function (mark, index) {
|
|
619
|
+
var percent = valueToPercent(mark.value, min, max);
|
|
620
|
+
var style = axisProps[axis].offset(percent);
|
|
621
|
+
var markActive;
|
|
622
|
+
if (track === false) {
|
|
623
|
+
markActive = values.indexOf(mark.value) !== -1;
|
|
624
|
+
} else {
|
|
625
|
+
markActive = track === 'normal' && (range ? mark.value >= values[0] && mark.value <= values[values.length - 1] : mark.value <= values[0]) || track === 'inverted' && (range ? mark.value <= values[0] || mark.value >= values[values.length - 1] : mark.value >= values[0]);
|
|
626
|
+
}
|
|
627
|
+
return /*#__PURE__*/_jsxs(React.Fragment, {
|
|
628
|
+
children: [/*#__PURE__*/_jsx(MarkSlot, _extends({
|
|
629
|
+
"data-index": index
|
|
630
|
+
}, markProps, !isHostComponent(MarkSlot) && {
|
|
631
|
+
markActive: markActive
|
|
632
|
+
}, {
|
|
633
|
+
style: _extends({}, style, markProps.style),
|
|
634
|
+
className: clsx(markProps.className, markActive && classes.markActive)
|
|
635
|
+
})), mark.label != null ? /*#__PURE__*/_jsx(MarkLabelSlot, _extends({
|
|
636
|
+
"aria-hidden": true,
|
|
637
|
+
"data-index": index
|
|
638
|
+
}, markLabelProps, !isHostComponent(MarkLabelSlot) && {
|
|
639
|
+
markLabelActive: markActive
|
|
640
|
+
}, {
|
|
641
|
+
style: _extends({}, style, markLabelProps.style),
|
|
642
|
+
className: clsx(classes.markLabel, markLabelProps.className, markActive && classes.markLabelActive),
|
|
643
|
+
children: mark.label
|
|
644
|
+
})) : null]
|
|
645
|
+
}, index);
|
|
646
|
+
}), values.map(function (value, index) {
|
|
647
|
+
var percent = valueToPercent(value, min, max);
|
|
648
|
+
var style = axisProps[axis].offset(percent);
|
|
649
|
+
var ValueLabelComponent = valueLabelDisplay === 'off' ? Forward : ValueLabelSlot;
|
|
650
|
+
return /*#__PURE__*/_jsx(React.Fragment, {
|
|
651
|
+
children: /*#__PURE__*/_jsx(ValueLabelComponent, _extends({}, !isHostComponent(ValueLabelComponent) && {
|
|
652
|
+
valueLabelFormat: valueLabelFormat,
|
|
653
|
+
valueLabelDisplay: valueLabelDisplay,
|
|
654
|
+
value: typeof valueLabelFormat === 'function' ? valueLabelFormat(scale(value), index) : valueLabelFormat,
|
|
655
|
+
index: index,
|
|
656
|
+
open: open === index || active === index || valueLabelDisplay === 'on',
|
|
657
|
+
disabled: disabled
|
|
658
|
+
}, valueLabelProps, {
|
|
659
|
+
children: /*#__PURE__*/_jsx(ThumbSlot, _extends({
|
|
660
|
+
"data-index": index,
|
|
661
|
+
"data-focusvisible": focusedThumbIndex === index
|
|
662
|
+
}, thumbProps, {
|
|
663
|
+
className: clsx(classes.thumb, thumbProps.className, active === index && classes.active, focusedThumbIndex === index && classes.focusVisible),
|
|
664
|
+
style: _extends({}, style, {
|
|
665
|
+
pointerEvents: disableSwap && active !== index ? 'none' : undefined
|
|
666
|
+
}, thumbProps.style),
|
|
667
|
+
children: /*#__PURE__*/_jsx(InputSlot, _extends({
|
|
668
|
+
"data-index": index,
|
|
669
|
+
"aria-label": getAriaLabel ? getAriaLabel(index) : ariaLabel,
|
|
670
|
+
"aria-valuenow": scale(value),
|
|
671
|
+
"aria-labelledby": ariaLabelledby,
|
|
672
|
+
"aria-valuetext": getAriaValueText ? getAriaValueText(scale(value), index) : ariaValuetext,
|
|
673
|
+
value: values[index]
|
|
674
|
+
}, inputSliderProps))
|
|
675
|
+
}))
|
|
676
|
+
}))
|
|
677
|
+
}, index);
|
|
678
|
+
})]
|
|
508
679
|
}));
|
|
509
680
|
});
|
|
510
681
|
process.env.NODE_ENV !== "production" ? Slider.propTypes /* remove-proptypes */ = {
|
|
@@ -674,7 +845,11 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes /* remove-proptypes */
|
|
|
674
845
|
orientation: PropTypes.oneOf(['horizontal', 'vertical']),
|
|
675
846
|
/**
|
|
676
847
|
* A transformation function, to change the scale of the slider.
|
|
677
|
-
* @
|
|
848
|
+
* @param {any} x
|
|
849
|
+
* @returns {any}
|
|
850
|
+
* @default function Identity(x) {
|
|
851
|
+
* return x;
|
|
852
|
+
* }
|
|
678
853
|
*/
|
|
679
854
|
scale: PropTypes.func,
|
|
680
855
|
/**
|
|
@@ -765,7 +940,11 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes /* remove-proptypes */
|
|
|
765
940
|
*
|
|
766
941
|
* - {number} value The value label's value to format
|
|
767
942
|
* - {number} index The value label's index to format
|
|
768
|
-
* @
|
|
943
|
+
* @param {any} x
|
|
944
|
+
* @returns {any}
|
|
945
|
+
* @default function Identity(x) {
|
|
946
|
+
* return x;
|
|
947
|
+
* }
|
|
769
948
|
*/
|
|
770
949
|
valueLabelFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
|
|
771
950
|
} : void 0;
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import PropTypes from 'prop-types';
|
|
3
|
+
import clsx from 'clsx';
|
|
4
|
+
import sliderClasses from './sliderClasses';
|
|
5
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
6
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
7
|
+
var useValueLabelClasses = function useValueLabelClasses(props) {
|
|
8
|
+
var open = props.open;
|
|
9
|
+
var utilityClasses = {
|
|
10
|
+
offset: clsx(open && sliderClasses.valueLabelOpen),
|
|
11
|
+
circle: sliderClasses.valueLabelCircle,
|
|
12
|
+
label: sliderClasses.valueLabelLabel
|
|
13
|
+
};
|
|
14
|
+
return utilityClasses;
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
/**
|
|
18
|
+
* @ignore - internal component.
|
|
19
|
+
*/
|
|
20
|
+
export default function SliderValueLabel(props) {
|
|
21
|
+
var children = props.children,
|
|
22
|
+
className = props.className,
|
|
23
|
+
value = props.value;
|
|
24
|
+
var classes = useValueLabelClasses(props);
|
|
25
|
+
return /*#__PURE__*/React.cloneElement(children, {
|
|
26
|
+
className: clsx(children.props.className)
|
|
27
|
+
}, /*#__PURE__*/_jsxs(React.Fragment, {
|
|
28
|
+
children: [children.props.children, /*#__PURE__*/_jsx("span", {
|
|
29
|
+
className: clsx(classes.offset, className),
|
|
30
|
+
"aria-hidden": true,
|
|
31
|
+
children: /*#__PURE__*/_jsx("span", {
|
|
32
|
+
className: classes.circle,
|
|
33
|
+
children: /*#__PURE__*/_jsx("span", {
|
|
34
|
+
className: classes.label,
|
|
35
|
+
children: value
|
|
36
|
+
})
|
|
37
|
+
})
|
|
38
|
+
})]
|
|
39
|
+
}));
|
|
40
|
+
}
|
|
41
|
+
process.env.NODE_ENV !== "production" ? SliderValueLabel.propTypes = {
|
|
42
|
+
children: PropTypes.element.isRequired,
|
|
43
|
+
className: PropTypes.string,
|
|
44
|
+
value: PropTypes.node
|
|
45
|
+
} : void 0;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/legacy/Slider/index.js
CHANGED
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
+
import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
|
|
3
|
+
import { sliderUnstyledClasses } from '@mui/base/SliderUnstyled';
|
|
4
|
+
var sliderClasses = _extends({}, sliderUnstyledClasses, generateUtilityClasses('MuiSlider', ['colorPrimary', 'colorSecondary', 'thumbColorPrimary', 'thumbColorSecondary', 'sizeSmall', 'thumbSizeSmall']));
|
|
5
|
+
export default sliderClasses;
|
package/legacy/Tabs/Tabs.js
CHANGED
|
@@ -315,7 +315,9 @@ var Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
|
|
|
315
315
|
}
|
|
316
316
|
tabMeta = tab ? tab.getBoundingClientRect() : null;
|
|
317
317
|
if (process.env.NODE_ENV !== 'production') {
|
|
318
|
-
if (process.env.NODE_ENV !== 'test' && !warnedOnceTabPresent && tabMeta && tabMeta.width === 0 && tabMeta.height === 0
|
|
318
|
+
if (process.env.NODE_ENV !== 'test' && !warnedOnceTabPresent && tabMeta && tabMeta.width === 0 && tabMeta.height === 0 &&
|
|
319
|
+
// if the whole Tabs component is hidden, don't warn
|
|
320
|
+
tabsMeta.clientWidth !== 0) {
|
|
319
321
|
tabsMeta = null;
|
|
320
322
|
console.error(['MUI: The `value` provided to the Tabs component is invalid.', "The Tab with this `value` (\"".concat(value, "\") is not part of the document layout."), "Make sure the tab item is present in the document or that it's not `display: none`."].join('\n'));
|
|
321
323
|
warnedOnceTabPresent = true;
|
|
@@ -584,7 +584,6 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
|
|
|
584
584
|
return /*#__PURE__*/_jsx(TransitionComponent, _extends({
|
|
585
585
|
timeout: theme.transitions.duration.shorter
|
|
586
586
|
}, TransitionPropsInner, transitionProps, {
|
|
587
|
-
"data-foo": "bar",
|
|
588
587
|
children: /*#__PURE__*/_jsxs(TooltipComponent, _extends({}, tooltipProps, {
|
|
589
588
|
children: [title, arrow ? /*#__PURE__*/_jsx(ArrowComponent, _extends({}, tooltipArrowProps, {
|
|
590
589
|
ref: setArrowRef
|