@mui/material 5.11.4 → 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.
Files changed (192) hide show
  1. package/Accordion/accordionClasses.d.ts +18 -18
  2. package/AccordionActions/accordionActionsClasses.d.ts +10 -10
  3. package/AccordionDetails/accordionDetailsClasses.d.ts +8 -8
  4. package/AccordionSummary/accordionSummaryClasses.d.ts +22 -22
  5. package/Alert/alertClasses.d.ts +44 -44
  6. package/AlertTitle/alertTitleClasses.d.ts +8 -8
  7. package/AppBar/appBarClasses.d.ts +28 -28
  8. package/Autocomplete/Autocomplete.d.ts +3 -3
  9. package/Autocomplete/autocompleteClasses.d.ts +54 -54
  10. package/Avatar/avatarClasses.d.ts +20 -20
  11. package/AvatarGroup/avatarGroupClasses.d.ts +10 -10
  12. package/Backdrop/backdropClasses.d.ts +10 -10
  13. package/Badge/badgeClasses.d.ts +56 -56
  14. package/BottomNavigation/BottomNavigation.js +0 -0
  15. package/BottomNavigation/bottomNavigationClasses.d.ts +8 -8
  16. package/BottomNavigationAction/bottomNavigationActionClasses.d.ts +14 -14
  17. package/Box/Box.d.ts +5 -22
  18. package/Breadcrumbs/breadcrumbsClasses.d.ts +14 -14
  19. package/Button/buttonClasses.d.ts +100 -100
  20. package/ButtonBase/buttonBaseClasses.d.ts +12 -12
  21. package/ButtonBase/touchRippleClasses.d.ts +20 -20
  22. package/ButtonGroup/ButtonGroupContext.d.ts +18 -18
  23. package/ButtonGroup/buttonGroupClasses.d.ts +58 -58
  24. package/CHANGELOG.md +58 -0
  25. package/Card/cardClasses.d.ts +8 -8
  26. package/CardActionArea/cardActionAreaClasses.d.ts +12 -12
  27. package/CardActions/cardActionsClasses.d.ts +10 -10
  28. package/CardContent/cardContentClasses.d.ts +8 -8
  29. package/CardHeader/cardHeaderClasses.d.ts +18 -18
  30. package/CardMedia/cardMediaClasses.d.ts +12 -12
  31. package/Checkbox/checkboxClasses.d.ts +18 -18
  32. package/Chip/chipClasses.d.ts +96 -96
  33. package/CircularProgress/circularProgressClasses.d.ts +26 -26
  34. package/ClickAwayListener/index.d.ts +2 -2
  35. package/Collapse/collapseClasses.d.ts +18 -18
  36. package/Container/containerClasses.d.ts +6 -6
  37. package/Dialog/DialogContext.d.ts +6 -6
  38. package/Dialog/dialogClasses.d.ts +36 -36
  39. package/DialogActions/dialogActionsClasses.d.ts +10 -10
  40. package/DialogContent/dialogContentClasses.d.ts +10 -10
  41. package/DialogContentText/dialogContentTextClasses.d.ts +8 -8
  42. package/DialogTitle/dialogTitleClasses.d.ts +8 -8
  43. package/Divider/dividerClasses.d.ts +34 -34
  44. package/Drawer/drawerClasses.d.ts +30 -30
  45. package/Fab/fabClasses.d.ts +26 -26
  46. package/FilledInput/filledInputClasses.d.ts +40 -40
  47. package/FormControl/FormControlContext.d.ts +17 -17
  48. package/FormControl/formControlClasses.d.ts +14 -14
  49. package/FormControl/useFormControl.d.ts +2 -2
  50. package/FormControlLabel/formControlLabelClasses.d.ts +20 -20
  51. package/FormGroup/formGroupClasses.d.ts +12 -12
  52. package/FormHelperText/formHelperTextClasses.d.ts +22 -22
  53. package/FormLabel/formLabelClasses.d.ts +22 -22
  54. package/Grid/gridClasses.d.ts +48 -48
  55. package/Icon/iconClasses.d.ts +24 -24
  56. package/IconButton/iconButtonClasses.d.ts +34 -34
  57. package/ImageList/imageListClasses.d.ts +16 -16
  58. package/ImageListItem/imageListItemClasses.d.ts +18 -18
  59. package/ImageListItemBar/imageListItemBarClasses.d.ts +30 -30
  60. package/Input/inputClasses.d.ts +34 -34
  61. package/InputAdornment/inputAdornmentClasses.d.ts +24 -24
  62. package/InputBase/inputBaseClasses.d.ts +46 -46
  63. package/InputLabel/inputLabelClasses.d.ts +32 -32
  64. package/LinearProgress/linearProgressClasses.d.ts +42 -42
  65. package/Link/getTextDecoration.d.ts +15 -15
  66. package/Link/linkClasses.d.ts +18 -18
  67. package/List/listClasses.d.ts +14 -14
  68. package/ListItem/listItemClasses.d.ts +30 -30
  69. package/ListItemAvatar/listItemAvatarClasses.d.ts +10 -10
  70. package/ListItemButton/listItemButtonClasses.d.ts +22 -22
  71. package/ListItemIcon/listItemIconClasses.d.ts +10 -10
  72. package/ListItemSecondaryAction/listItemSecondaryActionClasses.d.ts +10 -10
  73. package/ListItemText/listItemTextClasses.d.ts +18 -18
  74. package/ListSubheader/listSubheaderClasses.d.ts +18 -18
  75. package/Menu/menuClasses.d.ts +12 -12
  76. package/MenuItem/menuItemClasses.d.ts +20 -20
  77. package/MobileStepper/mobileStepperClasses.d.ts +22 -22
  78. package/NativeSelect/nativeSelectClasses.d.ts +32 -32
  79. package/OutlinedInput/outlinedInputClasses.d.ts +36 -36
  80. package/Pagination/paginationClasses.d.ts +14 -14
  81. package/PaginationItem/paginationItemClasses.d.ts +42 -42
  82. package/Paper/paperClasses.d.ts +39 -39
  83. package/Popover/popoverClasses.d.ts +10 -10
  84. package/Popper/Popper.d.ts +37 -37
  85. package/Radio/radioClasses.d.ts +16 -16
  86. package/RadioGroup/RadioGroupContext.d.ts +11 -11
  87. package/RadioGroup/useRadioGroup.d.ts +4 -4
  88. package/Rating/ratingClasses.d.ts +40 -40
  89. package/ScopedCssBaseline/scopedCssBaselineClasses.d.ts +8 -8
  90. package/Select/selectClasses.d.ts +30 -30
  91. package/Skeleton/skeletonClasses.d.ts +26 -26
  92. package/Slider/Slider.d.ts +1 -2
  93. package/Slider/Slider.js +222 -63
  94. package/Slider/SliderValueLabel.d.ts +15 -0
  95. package/Slider/SliderValueLabel.js +49 -0
  96. package/Slider/SliderValueLabel.types.d.ts +24 -0
  97. package/Slider/SliderValueLabel.types.js +1 -0
  98. package/Slider/index.d.ts +1 -0
  99. package/Slider/index.js +2 -1
  100. package/Slider/sliderClasses.d.ts +29 -0
  101. package/Slider/sliderClasses.js +5 -0
  102. package/Snackbar/snackbarClasses.d.ts +20 -20
  103. package/SnackbarContent/snackbarContentClasses.d.ts +12 -12
  104. package/SpeedDial/speedDialClasses.d.ts +22 -22
  105. package/SpeedDialAction/speedDialActionClasses.d.ts +20 -20
  106. package/SpeedDialIcon/speedDialIconClasses.d.ts +18 -18
  107. package/Step/StepContext.d.ts +20 -20
  108. package/Step/stepClasses.d.ts +16 -16
  109. package/StepButton/stepButtonClasses.d.ts +14 -14
  110. package/StepConnector/stepConnectorClasses.d.ts +26 -26
  111. package/StepContent/stepContentClasses.d.ts +12 -12
  112. package/StepIcon/stepIconClasses.d.ts +16 -16
  113. package/StepLabel/stepLabelClasses.d.ts +28 -28
  114. package/Stepper/StepperContext.d.ts +18 -18
  115. package/Stepper/stepperClasses.d.ts +14 -14
  116. package/SvgIcon/svgIconClasses.d.ts +26 -26
  117. package/Switch/switchClasses.d.ts +32 -32
  118. package/Tab/tabClasses.d.ts +26 -26
  119. package/TabScrollButton/tabScrollButtonClasses.d.ts +12 -12
  120. package/Table/tableClasses.d.ts +10 -10
  121. package/TableBody/tableBodyClasses.d.ts +8 -8
  122. package/TableCell/tableCellClasses.d.ts +32 -32
  123. package/TableContainer/tableContainerClasses.d.ts +8 -8
  124. package/TableFooter/tableFooterClasses.d.ts +8 -8
  125. package/TableHead/tableHeadClasses.d.ts +8 -8
  126. package/TablePagination/tablePaginationClasses.d.ts +28 -28
  127. package/TableRow/tableRowClasses.d.ts +16 -16
  128. package/TableSortLabel/tableSortLabelClasses.d.ts +16 -16
  129. package/Tabs/tabsClasses.d.ts +32 -32
  130. package/TextField/textFieldClasses.d.ts +8 -8
  131. package/ToggleButton/toggleButtonClasses.d.ts +24 -24
  132. package/ToggleButtonGroup/toggleButtonGroupClasses.d.ts +18 -18
  133. package/Toolbar/toolbarClasses.d.ts +14 -14
  134. package/Tooltip/tooltipClasses.d.ts +30 -30
  135. package/Typography/typographyClasses.d.ts +50 -50
  136. package/Unstable_Grid2/Grid2.d.ts +4 -4
  137. package/Unstable_Grid2/Grid2Props.d.ts +15 -15
  138. package/Unstable_Grid2/grid2Classes.d.ts +5 -5
  139. package/Unstable_Grid2/index.d.ts +4 -4
  140. package/className/index.d.ts +1 -1
  141. package/darkScrollbar/index.d.ts +28 -28
  142. package/generateUtilityClass/index.d.ts +2 -2
  143. package/generateUtilityClasses/index.d.ts +1 -1
  144. package/index.js +1 -1
  145. package/internal/switchBaseClasses.d.ts +12 -12
  146. package/legacy/BottomNavigation/BottomNavigation.js +0 -0
  147. package/legacy/Slider/Slider.js +251 -72
  148. package/legacy/Slider/SliderValueLabel.js +45 -0
  149. package/legacy/Slider/SliderValueLabel.types.js +1 -0
  150. package/legacy/Slider/index.js +2 -1
  151. package/legacy/Slider/sliderClasses.js +5 -0
  152. package/legacy/index.js +1 -1
  153. package/legacy/locale/index.js +230 -144
  154. package/legacy/styles/experimental_extendTheme.js +16 -8
  155. package/locale/index.d.ts +75 -74
  156. package/locale/index.js +85 -0
  157. package/modern/BottomNavigation/BottomNavigation.js +0 -0
  158. package/modern/Slider/Slider.js +221 -62
  159. package/modern/Slider/SliderValueLabel.js +49 -0
  160. package/modern/Slider/SliderValueLabel.types.js +1 -0
  161. package/modern/Slider/index.js +2 -1
  162. package/modern/Slider/sliderClasses.js +5 -0
  163. package/modern/index.js +1 -1
  164. package/modern/locale/index.js +85 -0
  165. package/modern/styles/experimental_extendTheme.js +16 -8
  166. package/node/BottomNavigation/BottomNavigation.js +0 -0
  167. package/node/Slider/Slider.js +228 -71
  168. package/node/Slider/SliderValueLabel.js +57 -0
  169. package/node/Slider/SliderValueLabel.types.js +5 -0
  170. package/node/Slider/index.js +11 -1
  171. package/node/Slider/sliderClasses.js +13 -0
  172. package/node/index.js +1 -1
  173. package/node/locale/index.js +87 -1
  174. package/node/styles/experimental_extendTheme.js +16 -8
  175. package/package.json +4 -4
  176. package/styles/CssVarsProvider.d.ts +16 -16
  177. package/styles/excludeVariablesFromRoot.d.ts +5 -5
  178. package/styles/experimental_extendTheme.js +16 -8
  179. package/styles/getOverlayAlpha.d.ts +2 -2
  180. package/transitions/index.d.ts +1 -1
  181. package/transitions/transition.d.ts +13 -13
  182. package/transitions/utils.d.ts +23 -23
  183. package/types/OverridableComponentAugmentation.d.ts +31 -31
  184. package/umd/material-ui.development.js +497 -770
  185. package/umd/material-ui.production.min.js +21 -21
  186. package/useMediaQuery/useMediaQuery.d.ts +31 -31
  187. package/useTouchRipple/index.d.ts +1 -1
  188. package/useTouchRipple/useTouchRipple.d.ts +28 -28
  189. package/utils/getScrollbarSize.d.ts +2 -2
  190. package/utils/ownerDocument.d.ts +2 -2
  191. package/utils/ownerWindow.d.ts +2 -2
  192. package/utils/setRef.d.ts +2 -2
@@ -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, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
8
- import SliderUnstyled, { SliderValueLabelUnstyled, sliderUnstyledClasses, getSliderUtilityClass } from '@mui/base/SliderUnstyled';
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
- export var sliderClasses = _extends({}, sliderUnstyledClasses, generateUtilityClasses('MuiSlider', ['colorPrimary', 'colorSecondary', 'thumbColorPrimary', 'thumbColorSecondary', 'sizeSmall', 'thumbSizeSmall']));
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(SliderValueLabelUnstyled, {
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 extendUtilityClasses = function extendUtilityClasses(ownerState) {
410
- var color = ownerState.color,
411
- size = ownerState.size,
412
- _ownerState$classes = ownerState.classes,
413
- classes = _ownerState$classes === void 0 ? {} : _ownerState$classes;
414
- return _extends({}, classes, {
415
- root: clsx(classes.root, getSliderUtilityClass("color".concat(capitalize(color))), classes["color".concat(capitalize(color))], size && [getSliderUtilityClass("size".concat(capitalize(size))), classes["size".concat(capitalize(size))]]),
416
- thumb: clsx(classes.thumb, getSliderUtilityClass("thumbColor".concat(capitalize(color))), classes["thumbColor".concat(capitalize(color))], size && [getSliderUtilityClass("thumbSize".concat(capitalize(size))), classes["thumbSize".concat(capitalize(size))]])
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 _ref8, _slots$root, _ref9, _slots$rail, _ref10, _slots$track, _ref11, _slots$thumb, _ref12, _slots$valueLabel, _ref13, _slots$mark, _ref14, _slots$markLabel, _slots$input, _slotProps$root, _slotProps$rail, _slotProps$track, _slotProps$thumb, _slotProps$valueLabel, _slotProps$mark, _slotProps$markLabel, _slotProps$input;
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 _props$component = props.component,
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
- other = _objectWithoutProperties(props, ["component", "components", "componentsProps", "color", "size", "slotProps", "slots"]);
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 classes = extendUtilityClasses(ownerState);
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 = (_ref8 = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components.Root) != null ? _ref8 : SliderRoot;
448
- var RailSlot = (_ref9 = (_slots$rail = slots == null ? void 0 : slots.rail) != null ? _slots$rail : components.Rail) != null ? _ref9 : SliderRail;
449
- var TrackSlot = (_ref10 = (_slots$track = slots == null ? void 0 : slots.track) != null ? _slots$track : components.Track) != null ? _ref10 : SliderTrack;
450
- var ThumbSlot = (_ref11 = (_slots$thumb = slots == null ? void 0 : slots.thumb) != null ? _slots$thumb : components.Thumb) != null ? _ref11 : SliderThumb;
451
- var ValueLabelSlot = (_ref12 = (_slots$valueLabel = slots == null ? void 0 : slots.valueLabel) != null ? _slots$valueLabel : components.ValueLabel) != null ? _ref12 : SliderValueLabel;
452
- var MarkSlot = (_ref13 = (_slots$mark = slots == null ? void 0 : slots.mark) != null ? _slots$mark : components.Mark) != null ? _ref13 : SliderMark;
453
- var MarkLabelSlot = (_ref14 = (_slots$markLabel = slots == null ? void 0 : slots.markLabel) != null ? _slots$markLabel : components.MarkLabel) != null ? _ref14 : SliderMarkLabel;
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
- return /*#__PURE__*/_jsx(SliderUnstyled, _extends({}, other, {
464
- isRtl: isRtl,
465
- slots: {
466
- root: RootSlot,
467
- rail: RailSlot,
468
- track: TrackSlot,
469
- thumb: ThumbSlot,
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
- classes: classes,
507
- ref: ref
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
- * @default (x) => x
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
- * @default (x) => x
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 {};
@@ -1,2 +1,3 @@
1
1
  export { default } from './Slider';
2
- export * from './Slider';
2
+ export * from './Slider';
3
+ export { default as sliderClasses } from './sliderClasses';
@@ -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/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/material v5.11.4
2
+ * @mui/material v5.11.5
3
3
  *
4
4
  * @license MIT
5
5
  * This source code is licensed under the MIT license found in the