@mui/material 6.1.3 → 6.1.4

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 (23) hide show
  1. package/CHANGELOG.md +323 -350
  2. package/Checkbox/Checkbox.js +1 -0
  3. package/IconButton/IconButton.js +5 -16
  4. package/PigmentHidden/PigmentHidden.js +1 -0
  5. package/Slider/Slider.js +52 -33
  6. package/index.js +1 -1
  7. package/modern/Checkbox/Checkbox.js +1 -0
  8. package/modern/IconButton/IconButton.js +5 -16
  9. package/modern/PigmentHidden/PigmentHidden.js +1 -0
  10. package/modern/Slider/Slider.js +52 -33
  11. package/modern/index.js +1 -1
  12. package/modern/styles/createPalette.js +78 -70
  13. package/modern/version/index.js +2 -2
  14. package/node/Checkbox/Checkbox.js +1 -0
  15. package/node/IconButton/IconButton.js +5 -16
  16. package/node/PigmentHidden/PigmentHidden.js +1 -0
  17. package/node/Slider/Slider.js +50 -32
  18. package/node/index.js +1 -1
  19. package/node/styles/createPalette.js +78 -70
  20. package/node/version/index.js +2 -2
  21. package/package.json +6 -6
  22. package/styles/createPalette.js +78 -70
  23. package/version/index.js +2 -2
package/node/Slider/Slider.js CHANGED
@@ -427,6 +427,28 @@ const SliderValueLabel = exports.SliderValueLabel = (0, _zeroStyled.styled)(_Sli
427
427
  }
428
428
  }]
429
429
  })));
430
+ process.env.NODE_ENV !== "production" ? SliderValueLabel.propTypes /* remove-proptypes */ = {
431
+ // ┌────────────────────────────── Warning ──────────────────────────────┐
432
+ // │ These PropTypes are generated from the TypeScript type definitions. │
433
+ // │ To update them, edit the d.ts file and run `pnpm proptypes`. │
434
+ // └─────────────────────────────────────────────────────────────────────┘
435
+ /**
436
+ * @ignore
437
+ */
438
+ children: _propTypes.default.element.isRequired,
439
+ /**
440
+ * @ignore
441
+ */
442
+ index: _propTypes.default.number.isRequired,
443
+ /**
444
+ * @ignore
445
+ */
446
+ open: _propTypes.default.bool.isRequired,
447
+ /**
448
+ * @ignore
449
+ */
450
+ value: _propTypes.default.number.isRequired
451
+ } : void 0;
430
452
  const SliderMark = exports.SliderMark = (0, _zeroStyled.styled)('span', {
431
453
  name: 'MuiSlider',
432
454
  slot: 'Mark',
@@ -766,40 +788,36 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
766
788
  const percent = (0, _useSlider.valueToPercent)(value, min, max);
767
789
  const style = axisProps[axis].offset(percent);
768
790
  const ValueLabelComponent = valueLabelDisplay === 'off' ? Forward : ValueLabelSlot;
769
- return (
770
- /*#__PURE__*/
771
- /* TODO v6: Change component structure. It will help in avoiding the complicated React.cloneElement API added in SliderValueLabel component. Should be: Thumb -> Input, ValueLabel. Follow Joy UI's Slider structure. */
772
- (0, _jsxRuntime.jsx)(ValueLabelComponent, {
773
- ...(!(0, _isHostComponent.default)(ValueLabelComponent) && {
774
- valueLabelFormat,
775
- valueLabelDisplay,
776
- value: typeof valueLabelFormat === 'function' ? valueLabelFormat(scale(value), index) : valueLabelFormat,
777
- index,
778
- open: open === index || active === index || valueLabelDisplay === 'on',
779
- disabled
780
- }),
781
- ...valueLabelProps,
782
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ThumbSlot, {
791
+ return /*#__PURE__*/ /* TODO v6: Change component structure. It will help in avoiding the complicated React.cloneElement API added in SliderValueLabel component. Should be: Thumb -> Input, ValueLabel. Follow Joy UI's Slider structure. */(0, _jsxRuntime.jsx)(ValueLabelComponent, {
792
+ ...(!(0, _isHostComponent.default)(ValueLabelComponent) && {
793
+ valueLabelFormat,
794
+ valueLabelDisplay,
795
+ value: typeof valueLabelFormat === 'function' ? valueLabelFormat(scale(value), index) : valueLabelFormat,
796
+ index,
797
+ open: open === index || active === index || valueLabelDisplay === 'on',
798
+ disabled
799
+ }),
800
+ ...valueLabelProps,
801
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ThumbSlot, {
802
+ "data-index": index,
803
+ ...thumbProps,
804
+ className: (0, _clsx.default)(classes.thumb, thumbProps.className, active === index && classes.active, focusedThumbIndex === index && classes.focusVisible),
805
+ style: {
806
+ ...style,
807
+ ...getThumbStyle(index),
808
+ ...thumbProps.style
809
+ },
810
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(InputSlot, {
783
811
  "data-index": index,
784
- ...thumbProps,
785
- className: (0, _clsx.default)(classes.thumb, thumbProps.className, active === index && classes.active, focusedThumbIndex === index && classes.focusVisible),
786
- style: {
787
- ...style,
788
- ...getThumbStyle(index),
789
- ...thumbProps.style
790
- },
791
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(InputSlot, {
792
- "data-index": index,
793
- "aria-label": getAriaLabel ? getAriaLabel(index) : ariaLabel,
794
- "aria-valuenow": scale(value),
795
- "aria-labelledby": ariaLabelledby,
796
- "aria-valuetext": getAriaValueText ? getAriaValueText(scale(value), index) : ariaValuetext,
797
- value: values[index],
798
- ...inputSliderProps
799
- })
812
+ "aria-label": getAriaLabel ? getAriaLabel(index) : ariaLabel,
813
+ "aria-valuenow": scale(value),
814
+ "aria-labelledby": ariaLabelledby,
815
+ "aria-valuetext": getAriaValueText ? getAriaValueText(scale(value), index) : ariaValuetext,
816
+ value: values[index],
817
+ ...inputSliderProps
800
818
  })
801
- }, index)
802
- );
819
+ })
820
+ }, index);
803
821
  })]
804
822
  });
805
823
  });
package/node/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/material v6.1.3
2
+ * @mui/material v6.1.4
3
3
  *
4
4
  * @license MIT
5
5
  * This source code is licensed under the MIT license found in the
package/node/styles/createPalette.js CHANGED
@@ -18,70 +18,76 @@ var _orange = _interopRequireDefault(require("../colors/orange"));
18
18
  var _blue = _interopRequireDefault(require("../colors/blue"));
19
19
  var _lightBlue = _interopRequireDefault(require("../colors/lightBlue"));
20
20
  var _green = _interopRequireDefault(require("../colors/green"));
21
- const light = exports.light = {
22
- // The colors used to style the text.
23
- text: {
24
- // The most important text.
25
- primary: 'rgba(0, 0, 0, 0.87)',
26
- // Secondary text.
27
- secondary: 'rgba(0, 0, 0, 0.6)',
28
- // Disabled text have even lower visual prominence.
29
- disabled: 'rgba(0, 0, 0, 0.38)'
30
- },
31
- // The color used to divide different elements.
32
- divider: 'rgba(0, 0, 0, 0.12)',
33
- // The background colors used to style the surfaces.
34
- // Consistency between these values is important.
35
- background: {
36
- paper: _common.default.white,
37
- default: _common.default.white
38
- },
39
- // The colors used to style the action elements.
40
- action: {
41
- // The color of an active action like an icon button.
42
- active: 'rgba(0, 0, 0, 0.54)',
43
- // The color of an hovered action.
44
- hover: 'rgba(0, 0, 0, 0.04)',
45
- hoverOpacity: 0.04,
46
- // The color of a selected action.
47
- selected: 'rgba(0, 0, 0, 0.08)',
48
- selectedOpacity: 0.08,
49
- // The color of a disabled action.
50
- disabled: 'rgba(0, 0, 0, 0.26)',
51
- // The background color of a disabled action.
52
- disabledBackground: 'rgba(0, 0, 0, 0.12)',
53
- disabledOpacity: 0.38,
54
- focus: 'rgba(0, 0, 0, 0.12)',
55
- focusOpacity: 0.12,
56
- activatedOpacity: 0.12
57
- }
58
- };
59
- const dark = exports.dark = {
60
- text: {
61
- primary: _common.default.white,
62
- secondary: 'rgba(255, 255, 255, 0.7)',
63
- disabled: 'rgba(255, 255, 255, 0.5)',
64
- icon: 'rgba(255, 255, 255, 0.5)'
65
- },
66
- divider: 'rgba(255, 255, 255, 0.12)',
67
- background: {
68
- paper: '#121212',
69
- default: '#121212'
70
- },
71
- action: {
72
- active: _common.default.white,
73
- hover: 'rgba(255, 255, 255, 0.08)',
74
- hoverOpacity: 0.08,
75
- selected: 'rgba(255, 255, 255, 0.16)',
76
- selectedOpacity: 0.16,
77
- disabled: 'rgba(255, 255, 255, 0.3)',
78
- disabledBackground: 'rgba(255, 255, 255, 0.12)',
79
- disabledOpacity: 0.38,
80
- focus: 'rgba(255, 255, 255, 0.12)',
81
- focusOpacity: 0.12,
82
- activatedOpacity: 0.24
83
- }
84
- };
21
+ function getLight() {
22
+ return {
23
+ // The colors used to style the text.
24
+ text: {
25
+ // The most important text.
26
+ primary: 'rgba(0, 0, 0, 0.87)',
27
+ // Secondary text.
28
+ secondary: 'rgba(0, 0, 0, 0.6)',
29
+ // Disabled text have even lower visual prominence.
30
+ disabled: 'rgba(0, 0, 0, 0.38)'
31
+ },
32
+ // The color used to divide different elements.
33
+ divider: 'rgba(0, 0, 0, 0.12)',
34
+ // The background colors used to style the surfaces.
35
+ // Consistency between these values is important.
36
+ background: {
37
+ paper: _common.default.white,
38
+ default: _common.default.white
39
+ },
40
+ // The colors used to style the action elements.
41
+ action: {
42
+ // The color of an active action like an icon button.
43
+ active: 'rgba(0, 0, 0, 0.54)',
44
+ // The color of an hovered action.
45
+ hover: 'rgba(0, 0, 0, 0.04)',
46
+ hoverOpacity: 0.04,
47
+ // The color of a selected action.
48
+ selected: 'rgba(0, 0, 0, 0.08)',
49
+ selectedOpacity: 0.08,
50
+ // The color of a disabled action.
51
+ disabled: 'rgba(0, 0, 0, 0.26)',
52
+ // The background color of a disabled action.
53
+ disabledBackground: 'rgba(0, 0, 0, 0.12)',
54
+ disabledOpacity: 0.38,
55
+ focus: 'rgba(0, 0, 0, 0.12)',
56
+ focusOpacity: 0.12,
57
+ activatedOpacity: 0.12
58
+ }
59
+ };
60
+ }
61
+ const light = exports.light = getLight();
62
+ function getDark() {
63
+ return {
64
+ text: {
65
+ primary: _common.default.white,
66
+ secondary: 'rgba(255, 255, 255, 0.7)',
67
+ disabled: 'rgba(255, 255, 255, 0.5)',
68
+ icon: 'rgba(255, 255, 255, 0.5)'
69
+ },
70
+ divider: 'rgba(255, 255, 255, 0.12)',
71
+ background: {
72
+ paper: '#121212',
73
+ default: '#121212'
74
+ },
75
+ action: {
76
+ active: _common.default.white,
77
+ hover: 'rgba(255, 255, 255, 0.08)',
78
+ hoverOpacity: 0.08,
79
+ selected: 'rgba(255, 255, 255, 0.16)',
80
+ selectedOpacity: 0.16,
81
+ disabled: 'rgba(255, 255, 255, 0.3)',
82
+ disabledBackground: 'rgba(255, 255, 255, 0.12)',
83
+ disabledOpacity: 0.38,
84
+ focus: 'rgba(255, 255, 255, 0.12)',
85
+ focusOpacity: 0.12,
86
+ activatedOpacity: 0.24
87
+ }
88
+ };
89
+ }
90
+ const dark = exports.dark = getDark();
85
91
  function addLightOrDark(intent, direction, shade, tonalOffset) {
86
92
  const tonalOffsetLight = tonalOffset.light || tonalOffset;
87
93
  const tonalOffsetDark = tonalOffset.dark || tonalOffset * 1.5;
@@ -233,12 +239,14 @@ function createPalette(palette) {
233
239
  }
234
240
  return color;
235
241
  };
236
- const modes = {
237
- dark,
238
- light
239
- };
242
+ let modeHydrated;
243
+ if (mode === 'light') {
244
+ modeHydrated = getLight();
245
+ } else if (mode === 'dark') {
246
+ modeHydrated = getDark();
247
+ }
240
248
  if (process.env.NODE_ENV !== 'production') {
241
- if (!modes[mode]) {
249
+ if (!modeHydrated) {
242
250
  console.error(`MUI: The palette mode \`${mode}\` is not supported.`);
243
251
  }
244
252
  }
@@ -297,7 +305,7 @@ function createPalette(palette) {
297
305
  // E.g., shift from Red 500 to Red 300 or Red 700.
298
306
  tonalOffset,
299
307
  // The light and dark mode object.
300
- ...modes[mode]
308
+ ...modeHydrated
301
309
  }, other);
302
310
  return paletteOutput;
303
311
  }
package/node/version/index.js CHANGED
@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.version = exports.prerelease = exports.patch = exports.minor = exports.major = exports.default = void 0;
7
- const version = exports.version = "6.1.3";
7
+ const version = exports.version = "6.1.4";
8
8
  const major = exports.major = Number("6");
9
9
  const minor = exports.minor = Number("1");
10
- const patch = exports.patch = Number("3");
10
+ const patch = exports.patch = Number("4");
11
11
  const prerelease = exports.prerelease = undefined;
12
12
  var _default = exports.default = version;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mui/material",
3
- "version": "6.1.3",
3
+ "version": "6.1.4",
4
4
  "private": false,
5
5
  "author": "MUI Team",
6
6
  "description": "Material UI is an open-source React component library that implements Google's Material Design. It's comprehensive and can be used in production out of the box.",
@@ -27,7 +27,7 @@
27
27
  "url": "https://opencollective.com/mui-org"
28
28
  },
29
29
  "dependencies": {
30
- "@babel/runtime": "^7.25.6",
30
+ "@babel/runtime": "^7.25.7",
31
31
  "@popperjs/core": "^2.11.8",
32
32
  "@types/react-transition-group": "^4.4.11",
33
33
  "clsx": "^2.1.1",
@@ -35,10 +35,10 @@
35
35
  "prop-types": "^15.8.1",
36
36
  "react-is": "^18.3.1",
37
37
  "react-transition-group": "^4.4.5",
38
- "@mui/core-downloads-tracker": "^6.1.3",
39
- "@mui/system": "^6.1.3",
38
+ "@mui/core-downloads-tracker": "^6.1.4",
39
+ "@mui/system": "^6.1.4",
40
40
  "@mui/types": "^7.2.18",
41
- "@mui/utils": "^6.1.3"
41
+ "@mui/utils": "^6.1.4"
42
42
  },
43
43
  "peerDependencies": {
44
44
  "@emotion/react": "^11.5.0",
@@ -46,7 +46,7 @@
46
46
  "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
47
47
  "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
48
48
  "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
49
- "@mui/material-pigment-css": "^6.1.3"
49
+ "@mui/material-pigment-css": "^6.1.4"
50
50
  },
51
51
  "peerDependenciesMeta": {
52
52
  "@types/react": {
package/styles/createPalette.js CHANGED
@@ -9,70 +9,76 @@ import orange from "../colors/orange.js";
9
9
  import blue from "../colors/blue.js";
10
10
  import lightBlue from "../colors/lightBlue.js";
11
11
  import green from "../colors/green.js";
12
- export const light = {
13
- // The colors used to style the text.
14
- text: {
15
- // The most important text.
16
- primary: 'rgba(0, 0, 0, 0.87)',
17
- // Secondary text.
18
- secondary: 'rgba(0, 0, 0, 0.6)',
19
- // Disabled text have even lower visual prominence.
20
- disabled: 'rgba(0, 0, 0, 0.38)'
21
- },
22
- // The color used to divide different elements.
23
- divider: 'rgba(0, 0, 0, 0.12)',
24
- // The background colors used to style the surfaces.
25
- // Consistency between these values is important.
26
- background: {
27
- paper: common.white,
28
- default: common.white
29
- },
30
- // The colors used to style the action elements.
31
- action: {
32
- // The color of an active action like an icon button.
33
- active: 'rgba(0, 0, 0, 0.54)',
34
- // The color of an hovered action.
35
- hover: 'rgba(0, 0, 0, 0.04)',
36
- hoverOpacity: 0.04,
37
- // The color of a selected action.
38
- selected: 'rgba(0, 0, 0, 0.08)',
39
- selectedOpacity: 0.08,
40
- // The color of a disabled action.
41
- disabled: 'rgba(0, 0, 0, 0.26)',
42
- // The background color of a disabled action.
43
- disabledBackground: 'rgba(0, 0, 0, 0.12)',
44
- disabledOpacity: 0.38,
45
- focus: 'rgba(0, 0, 0, 0.12)',
46
- focusOpacity: 0.12,
47
- activatedOpacity: 0.12
48
- }
49
- };
50
- export const dark = {
51
- text: {
52
- primary: common.white,
53
- secondary: 'rgba(255, 255, 255, 0.7)',
54
- disabled: 'rgba(255, 255, 255, 0.5)',
55
- icon: 'rgba(255, 255, 255, 0.5)'
56
- },
57
- divider: 'rgba(255, 255, 255, 0.12)',
58
- background: {
59
- paper: '#121212',
60
- default: '#121212'
61
- },
62
- action: {
63
- active: common.white,
64
- hover: 'rgba(255, 255, 255, 0.08)',
65
- hoverOpacity: 0.08,
66
- selected: 'rgba(255, 255, 255, 0.16)',
67
- selectedOpacity: 0.16,
68
- disabled: 'rgba(255, 255, 255, 0.3)',
69
- disabledBackground: 'rgba(255, 255, 255, 0.12)',
70
- disabledOpacity: 0.38,
71
- focus: 'rgba(255, 255, 255, 0.12)',
72
- focusOpacity: 0.12,
73
- activatedOpacity: 0.24
74
- }
75
- };
12
+ function getLight() {
13
+ return {
14
+ // The colors used to style the text.
15
+ text: {
16
+ // The most important text.
17
+ primary: 'rgba(0, 0, 0, 0.87)',
18
+ // Secondary text.
19
+ secondary: 'rgba(0, 0, 0, 0.6)',
20
+ // Disabled text have even lower visual prominence.
21
+ disabled: 'rgba(0, 0, 0, 0.38)'
22
+ },
23
+ // The color used to divide different elements.
24
+ divider: 'rgba(0, 0, 0, 0.12)',
25
+ // The background colors used to style the surfaces.
26
+ // Consistency between these values is important.
27
+ background: {
28
+ paper: common.white,
29
+ default: common.white
30
+ },
31
+ // The colors used to style the action elements.
32
+ action: {
33
+ // The color of an active action like an icon button.
34
+ active: 'rgba(0, 0, 0, 0.54)',
35
+ // The color of an hovered action.
36
+ hover: 'rgba(0, 0, 0, 0.04)',
37
+ hoverOpacity: 0.04,
38
+ // The color of a selected action.
39
+ selected: 'rgba(0, 0, 0, 0.08)',
40
+ selectedOpacity: 0.08,
41
+ // The color of a disabled action.
42
+ disabled: 'rgba(0, 0, 0, 0.26)',
43
+ // The background color of a disabled action.
44
+ disabledBackground: 'rgba(0, 0, 0, 0.12)',
45
+ disabledOpacity: 0.38,
46
+ focus: 'rgba(0, 0, 0, 0.12)',
47
+ focusOpacity: 0.12,
48
+ activatedOpacity: 0.12
49
+ }
50
+ };
51
+ }
52
+ export const light = getLight();
53
+ function getDark() {
54
+ return {
55
+ text: {
56
+ primary: common.white,
57
+ secondary: 'rgba(255, 255, 255, 0.7)',
58
+ disabled: 'rgba(255, 255, 255, 0.5)',
59
+ icon: 'rgba(255, 255, 255, 0.5)'
60
+ },
61
+ divider: 'rgba(255, 255, 255, 0.12)',
62
+ background: {
63
+ paper: '#121212',
64
+ default: '#121212'
65
+ },
66
+ action: {
67
+ active: common.white,
68
+ hover: 'rgba(255, 255, 255, 0.08)',
69
+ hoverOpacity: 0.08,
70
+ selected: 'rgba(255, 255, 255, 0.16)',
71
+ selectedOpacity: 0.16,
72
+ disabled: 'rgba(255, 255, 255, 0.3)',
73
+ disabledBackground: 'rgba(255, 255, 255, 0.12)',
74
+ disabledOpacity: 0.38,
75
+ focus: 'rgba(255, 255, 255, 0.12)',
76
+ focusOpacity: 0.12,
77
+ activatedOpacity: 0.24
78
+ }
79
+ };
80
+ }
81
+ export const dark = getDark();
76
82
  function addLightOrDark(intent, direction, shade, tonalOffset) {
77
83
  const tonalOffsetLight = tonalOffset.light || tonalOffset;
78
84
  const tonalOffsetDark = tonalOffset.dark || tonalOffset * 1.5;
@@ -224,12 +230,14 @@ export default function createPalette(palette) {
224
230
  }
225
231
  return color;
226
232
  };
227
- const modes = {
228
- dark,
229
- light
230
- };
233
+ let modeHydrated;
234
+ if (mode === 'light') {
235
+ modeHydrated = getLight();
236
+ } else if (mode === 'dark') {
237
+ modeHydrated = getDark();
238
+ }
231
239
  if (process.env.NODE_ENV !== 'production') {
232
- if (!modes[mode]) {
240
+ if (!modeHydrated) {
233
241
  console.error(`MUI: The palette mode \`${mode}\` is not supported.`);
234
242
  }
235
243
  }
@@ -288,7 +296,7 @@ export default function createPalette(palette) {
288
296
  // E.g., shift from Red 500 to Red 300 or Red 700.
289
297
  tonalOffset,
290
298
  // The light and dark mode object.
291
- ...modes[mode]
299
+ ...modeHydrated
292
300
  }, other);
293
301
  return paletteOutput;
294
302
  }
package/version/index.js CHANGED
@@ -1,6 +1,6 @@
1
- export const version = "6.1.3";
1
+ export const version = "6.1.4";
2
2
  export const major = Number("6");
3
3
  export const minor = Number("1");
4
- export const patch = Number("3");
4
+ export const patch = Number("4");
5
5
  export const prerelease = undefined;
6
6
  export default version;