@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.
- package/Accordion/accordionClasses.d.ts +18 -18
- package/AccordionActions/accordionActionsClasses.d.ts +10 -10
- package/AccordionDetails/accordionDetailsClasses.d.ts +8 -8
- package/AccordionSummary/accordionSummaryClasses.d.ts +22 -22
- package/Alert/alertClasses.d.ts +44 -44
- package/AlertTitle/alertTitleClasses.d.ts +8 -8
- package/AppBar/appBarClasses.d.ts +28 -28
- package/Autocomplete/Autocomplete.d.ts +3 -3
- package/Autocomplete/autocompleteClasses.d.ts +54 -54
- package/Avatar/avatarClasses.d.ts +20 -20
- package/AvatarGroup/avatarGroupClasses.d.ts +10 -10
- package/Backdrop/backdropClasses.d.ts +10 -10
- package/Badge/badgeClasses.d.ts +56 -56
- package/BottomNavigation/BottomNavigation.js +0 -0
- package/BottomNavigation/bottomNavigationClasses.d.ts +8 -8
- package/BottomNavigationAction/bottomNavigationActionClasses.d.ts +14 -14
- package/Box/Box.d.ts +5 -22
- package/Breadcrumbs/breadcrumbsClasses.d.ts +14 -14
- package/Button/buttonClasses.d.ts +100 -100
- package/ButtonBase/buttonBaseClasses.d.ts +12 -12
- package/ButtonBase/touchRippleClasses.d.ts +20 -20
- package/ButtonGroup/ButtonGroupContext.d.ts +18 -18
- package/ButtonGroup/buttonGroupClasses.d.ts +58 -58
- package/CHANGELOG.md +58 -0
- package/Card/cardClasses.d.ts +8 -8
- package/CardActionArea/cardActionAreaClasses.d.ts +12 -12
- package/CardActions/cardActionsClasses.d.ts +10 -10
- package/CardContent/cardContentClasses.d.ts +8 -8
- package/CardHeader/cardHeaderClasses.d.ts +18 -18
- package/CardMedia/cardMediaClasses.d.ts +12 -12
- package/Checkbox/checkboxClasses.d.ts +18 -18
- package/Chip/chipClasses.d.ts +96 -96
- package/CircularProgress/circularProgressClasses.d.ts +26 -26
- package/ClickAwayListener/index.d.ts +2 -2
- package/Collapse/collapseClasses.d.ts +18 -18
- package/Container/containerClasses.d.ts +6 -6
- package/Dialog/DialogContext.d.ts +6 -6
- package/Dialog/dialogClasses.d.ts +36 -36
- package/DialogActions/dialogActionsClasses.d.ts +10 -10
- package/DialogContent/dialogContentClasses.d.ts +10 -10
- package/DialogContentText/dialogContentTextClasses.d.ts +8 -8
- package/DialogTitle/dialogTitleClasses.d.ts +8 -8
- package/Divider/dividerClasses.d.ts +34 -34
- package/Drawer/drawerClasses.d.ts +30 -30
- package/Fab/fabClasses.d.ts +26 -26
- package/FilledInput/filledInputClasses.d.ts +40 -40
- package/FormControl/FormControlContext.d.ts +17 -17
- package/FormControl/formControlClasses.d.ts +14 -14
- package/FormControl/useFormControl.d.ts +2 -2
- package/FormControlLabel/formControlLabelClasses.d.ts +20 -20
- package/FormGroup/formGroupClasses.d.ts +12 -12
- package/FormHelperText/formHelperTextClasses.d.ts +22 -22
- package/FormLabel/formLabelClasses.d.ts +22 -22
- package/Grid/gridClasses.d.ts +48 -48
- package/Icon/iconClasses.d.ts +24 -24
- package/IconButton/iconButtonClasses.d.ts +34 -34
- package/ImageList/imageListClasses.d.ts +16 -16
- package/ImageListItem/imageListItemClasses.d.ts +18 -18
- package/ImageListItemBar/imageListItemBarClasses.d.ts +30 -30
- package/Input/inputClasses.d.ts +34 -34
- package/InputAdornment/inputAdornmentClasses.d.ts +24 -24
- package/InputBase/inputBaseClasses.d.ts +46 -46
- package/InputLabel/inputLabelClasses.d.ts +32 -32
- package/LinearProgress/linearProgressClasses.d.ts +42 -42
- package/Link/getTextDecoration.d.ts +15 -15
- package/Link/linkClasses.d.ts +18 -18
- package/List/listClasses.d.ts +14 -14
- package/ListItem/listItemClasses.d.ts +30 -30
- package/ListItemAvatar/listItemAvatarClasses.d.ts +10 -10
- package/ListItemButton/listItemButtonClasses.d.ts +22 -22
- package/ListItemIcon/listItemIconClasses.d.ts +10 -10
- package/ListItemSecondaryAction/listItemSecondaryActionClasses.d.ts +10 -10
- package/ListItemText/listItemTextClasses.d.ts +18 -18
- package/ListSubheader/listSubheaderClasses.d.ts +18 -18
- package/Menu/menuClasses.d.ts +12 -12
- package/MenuItem/menuItemClasses.d.ts +20 -20
- package/MobileStepper/mobileStepperClasses.d.ts +22 -22
- package/NativeSelect/nativeSelectClasses.d.ts +32 -32
- package/OutlinedInput/outlinedInputClasses.d.ts +36 -36
- package/Pagination/paginationClasses.d.ts +14 -14
- package/PaginationItem/paginationItemClasses.d.ts +42 -42
- package/Paper/paperClasses.d.ts +39 -39
- package/Popover/popoverClasses.d.ts +10 -10
- package/Popper/Popper.d.ts +37 -37
- package/Radio/radioClasses.d.ts +16 -16
- package/RadioGroup/RadioGroupContext.d.ts +11 -11
- package/RadioGroup/useRadioGroup.d.ts +4 -4
- package/Rating/ratingClasses.d.ts +40 -40
- package/ScopedCssBaseline/scopedCssBaselineClasses.d.ts +8 -8
- package/Select/selectClasses.d.ts +30 -30
- package/Skeleton/skeletonClasses.d.ts +26 -26
- 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/Snackbar/snackbarClasses.d.ts +20 -20
- package/SnackbarContent/snackbarContentClasses.d.ts +12 -12
- package/SpeedDial/speedDialClasses.d.ts +22 -22
- package/SpeedDialAction/speedDialActionClasses.d.ts +20 -20
- package/SpeedDialIcon/speedDialIconClasses.d.ts +18 -18
- package/Step/StepContext.d.ts +20 -20
- package/Step/stepClasses.d.ts +16 -16
- package/StepButton/stepButtonClasses.d.ts +14 -14
- package/StepConnector/stepConnectorClasses.d.ts +26 -26
- package/StepContent/stepContentClasses.d.ts +12 -12
- package/StepIcon/stepIconClasses.d.ts +16 -16
- package/StepLabel/stepLabelClasses.d.ts +28 -28
- package/Stepper/StepperContext.d.ts +18 -18
- package/Stepper/stepperClasses.d.ts +14 -14
- package/SvgIcon/svgIconClasses.d.ts +26 -26
- package/Switch/switchClasses.d.ts +32 -32
- package/Tab/tabClasses.d.ts +26 -26
- package/TabScrollButton/tabScrollButtonClasses.d.ts +12 -12
- package/Table/tableClasses.d.ts +10 -10
- package/TableBody/tableBodyClasses.d.ts +8 -8
- package/TableCell/tableCellClasses.d.ts +32 -32
- package/TableContainer/tableContainerClasses.d.ts +8 -8
- package/TableFooter/tableFooterClasses.d.ts +8 -8
- package/TableHead/tableHeadClasses.d.ts +8 -8
- package/TablePagination/tablePaginationClasses.d.ts +28 -28
- package/TableRow/tableRowClasses.d.ts +16 -16
- package/TableSortLabel/tableSortLabelClasses.d.ts +16 -16
- package/Tabs/tabsClasses.d.ts +32 -32
- package/TextField/textFieldClasses.d.ts +8 -8
- package/ToggleButton/toggleButtonClasses.d.ts +24 -24
- package/ToggleButtonGroup/toggleButtonGroupClasses.d.ts +18 -18
- package/Toolbar/toolbarClasses.d.ts +14 -14
- package/Tooltip/tooltipClasses.d.ts +30 -30
- package/Typography/typographyClasses.d.ts +50 -50
- package/Unstable_Grid2/Grid2.d.ts +4 -4
- package/Unstable_Grid2/Grid2Props.d.ts +15 -15
- package/Unstable_Grid2/grid2Classes.d.ts +5 -5
- package/Unstable_Grid2/index.d.ts +4 -4
- package/className/index.d.ts +1 -1
- package/darkScrollbar/index.d.ts +28 -28
- package/generateUtilityClass/index.d.ts +2 -2
- package/generateUtilityClasses/index.d.ts +1 -1
- package/index.js +1 -1
- package/internal/switchBaseClasses.d.ts +12 -12
- package/legacy/BottomNavigation/BottomNavigation.js +0 -0
- 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/index.js +1 -1
- package/legacy/locale/index.js +230 -144
- package/legacy/styles/experimental_extendTheme.js +16 -8
- package/locale/index.d.ts +75 -74
- package/locale/index.js +85 -0
- package/modern/BottomNavigation/BottomNavigation.js +0 -0
- 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/index.js +1 -1
- package/modern/locale/index.js +85 -0
- package/modern/styles/experimental_extendTheme.js +16 -8
- package/node/BottomNavigation/BottomNavigation.js +0 -0
- 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/index.js +1 -1
- package/node/locale/index.js +87 -1
- package/node/styles/experimental_extendTheme.js +16 -8
- package/package.json +4 -4
- package/styles/CssVarsProvider.d.ts +16 -16
- package/styles/excludeVariablesFromRoot.d.ts +5 -5
- package/styles/experimental_extendTheme.js +16 -8
- package/styles/getOverlayAlpha.d.ts +2 -2
- package/transitions/index.d.ts +1 -1
- package/transitions/transition.d.ts +13 -13
- package/transitions/utils.d.ts +23 -23
- package/types/OverridableComponentAugmentation.d.ts +31 -31
- package/umd/material-ui.development.js +497 -770
- package/umd/material-ui.production.min.js +21 -21
- package/useMediaQuery/useMediaQuery.d.ts +31 -31
- package/useTouchRipple/index.d.ts +1 -1
- package/useTouchRipple/useTouchRipple.d.ts +28 -28
- package/utils/getScrollbarSize.d.ts +2 -2
- package/utils/ownerDocument.d.ts +2 -2
- package/utils/ownerWindow.d.ts +2 -2
- package/utils/setRef.d.ts +2 -2
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/index.js
CHANGED