@mui/docs 6.0.2 → 6.1.0

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 (17) hide show
  1. package/CHANGELOG.md +78 -15130
  2. package/branding/brandingTheme.js +89 -3
  3. package/node/branding/brandingTheme.js +89 -3
  4. package/node/svgIcons/AdobeXDIcon.js +1 -1
  5. package/node/svgIcons/BundleSizeIcon.js +1 -1
  6. package/node/svgIcons/FigmaIcon.js +1 -1
  7. package/node/svgIcons/MaterialDesignIcon.js +1 -1
  8. package/node/svgIcons/SketchIcon.js +1 -1
  9. package/node/svgIcons/W3CIcon.js +1 -1
  10. package/package.json +3 -3
  11. package/svgIcons/AdobeXDIcon.js +1 -1
  12. package/svgIcons/BundleSizeIcon.js +1 -1
  13. package/svgIcons/FigmaIcon.js +1 -1
  14. package/svgIcons/MaterialDesignIcon.js +1 -1
  15. package/svgIcons/SketchIcon.js +1 -1
  16. package/svgIcons/W3CIcon.js +1 -1
  17. package/tsconfig.build.tsbuildinfo +1 -1
package/branding/brandingTheme.js CHANGED
@@ -510,6 +510,9 @@ export function getThemedComponents() {
510
510
  },
511
511
  '&:active': {
512
512
  backgroundColor: (theme.vars || theme).palette.primaryDark[800]
513
+ },
514
+ '&.Mui-disabled': {
515
+ color: theme.palette.grey[500]
513
516
  }
514
517
  })
515
518
  }),
@@ -536,6 +539,11 @@ export function getThemedComponents() {
536
539
  },
537
540
  '&:active': {
538
541
  backgroundColor: alpha(theme.palette.primary[900], 0.3)
542
+ },
543
+ '&.Mui-disabled': {
544
+ background: 'none',
545
+ backgroundColor: alpha(theme.palette.primaryDark[700], 0.2),
546
+ color: theme.palette.grey[500]
539
547
  }
540
548
  })
541
549
  }),
@@ -555,7 +563,19 @@ export function getThemedComponents() {
555
563
  backgroundColor: (theme.vars || theme).palette.primary[800],
556
564
  borderColor: (theme.vars || theme).palette.primary[600],
557
565
  boxShadow: `${alpha(theme.palette.primary[900], 0.7)} 0 1px 0 1px inset`
558
- }
566
+ },
567
+ '&.Mui-disabled': {
568
+ color: theme.palette.grey[700],
569
+ textShadow: 'none',
570
+ borderColor: theme.palette.grey[400]
571
+ },
572
+ ...theme.applyDarkStyles({
573
+ '&.Mui-disabled': {
574
+ color: theme.palette.grey[400],
575
+ textShadow: 'none',
576
+ borderColor: theme.palette.grey[800]
577
+ }
578
+ })
559
579
  }),
560
580
  ...(ownerState.variant === 'contained' && ownerState.color === 'secondary' && {
561
581
  color: '#fff',
@@ -573,7 +593,19 @@ export function getThemedComponents() {
573
593
  backgroundColor: (theme.vars || theme).palette.primaryDark[700],
574
594
  borderColor: (theme.vars || theme).palette.primaryDark[600],
575
595
  boxShadow: `${alpha(theme.palette.primaryDark[900], 0.7)} 0 1px 0 1px inset`
576
- }
596
+ },
597
+ '&.Mui-disabled': {
598
+ color: theme.palette.grey[700],
599
+ textShadow: 'none',
600
+ borderColor: theme.palette.grey[400]
601
+ },
602
+ ...theme.applyDarkStyles({
603
+ '&.Mui-disabled': {
604
+ color: theme.palette.grey[400],
605
+ textShadow: 'none',
606
+ borderColor: theme.palette.grey[800]
607
+ }
608
+ })
577
609
  }),
578
610
  ...(ownerState.variant === 'text' && ownerState.color === 'secondary' && {
579
611
  color: (theme.vars || theme).palette.text.secondary,
@@ -589,6 +621,9 @@ export function getThemedComponents() {
589
621
  },
590
622
  '&:active': {
591
623
  backgroundColor: (theme.vars || theme).palette.primaryDark[700]
624
+ },
625
+ '&.Mui-disabled': {
626
+ color: theme.palette.grey[500]
592
627
  }
593
628
  })
594
629
  }),
@@ -607,6 +642,9 @@ export function getThemedComponents() {
607
642
  },
608
643
  '&:active': {
609
644
  backgroundColor: alpha(theme.palette.primary[900], 0.1)
645
+ },
646
+ '&.Mui-disabled': {
647
+ color: theme.palette.grey[500]
610
648
  }
611
649
  })
612
650
  })
@@ -1149,7 +1187,55 @@ export function getThemedComponents() {
1149
1187
  styleOverrides: {
1150
1188
  iconFilled: {
1151
1189
  top: 'calc(50% - .25em)'
1152
- }
1190
+ },
1191
+ root: ({
1192
+ theme
1193
+ }) => ({
1194
+ variants: [{
1195
+ props: {
1196
+ variant: 'outlined'
1197
+ },
1198
+ style: {
1199
+ backgroundColor: alpha(theme.palette.primaryDark[50], 0.1),
1200
+ '& .MuiOutlinedInput-notchedOutline': {
1201
+ border: `1px solid ${(theme.vars || theme).palette.primaryDark[100]}`,
1202
+ boxShadow: `#FFF 0 1px 0 inset, ${alpha(theme.palette.grey[200], 0.4)} 0 -1px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`
1203
+ },
1204
+ '&:not(.Mui-focused):hover': {
1205
+ background: (theme.vars || theme).palette.grey[50],
1206
+ '& .MuiOutlinedInput-notchedOutline': {
1207
+ borderColor: (theme.vars || theme).palette.grey[300],
1208
+ boxShadow: `${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`
1209
+ }
1210
+ },
1211
+ ...theme.applyDarkStyles({
1212
+ color: (theme.vars || theme).palette.primary[300],
1213
+ backgroundColor: alpha(theme.palette.primaryDark[700], 0.2),
1214
+ '& .MuiOutlinedInput-notchedOutline': {
1215
+ borderColor: alpha(theme.palette.primaryDark[600], 0.5),
1216
+ boxShadow: `${alpha(theme.palette.primaryDark[600], 0.3)} 0 1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`
1217
+ },
1218
+ '&:not(.Mui-focused):hover': {
1219
+ background: alpha(theme.palette.primaryDark[700], 0.8),
1220
+ '& .MuiOutlinedInput-notchedOutline': {
1221
+ borderColor: (theme.vars || theme).palette.primaryDark[600],
1222
+ boxShadow: `${(theme.vars || theme).palette.common.black} 0 1px 2px 0`
1223
+ }
1224
+ }
1225
+ })
1226
+ }
1227
+ }, {
1228
+ props: {
1229
+ size: 'small'
1230
+ },
1231
+ style: {
1232
+ minHeight: 32,
1233
+ '& [role="combobox"]': {
1234
+ paddingBlock: 5
1235
+ }
1236
+ }
1237
+ }]
1238
+ })
1153
1239
  }
1154
1240
  },
1155
1241
  MuiTab: {
package/node/branding/brandingTheme.js CHANGED
@@ -521,6 +521,9 @@ function getThemedComponents() {
521
521
  },
522
522
  '&:active': {
523
523
  backgroundColor: (theme.vars || theme).palette.primaryDark[800]
524
+ },
525
+ '&.Mui-disabled': {
526
+ color: theme.palette.grey[500]
524
527
  }
525
528
  })
526
529
  }),
@@ -547,6 +550,11 @@ function getThemedComponents() {
547
550
  },
548
551
  '&:active': {
549
552
  backgroundColor: (0, _styles.alpha)(theme.palette.primary[900], 0.3)
553
+ },
554
+ '&.Mui-disabled': {
555
+ background: 'none',
556
+ backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[700], 0.2),
557
+ color: theme.palette.grey[500]
550
558
  }
551
559
  })
552
560
  }),
@@ -566,7 +574,19 @@ function getThemedComponents() {
566
574
  backgroundColor: (theme.vars || theme).palette.primary[800],
567
575
  borderColor: (theme.vars || theme).palette.primary[600],
568
576
  boxShadow: `${(0, _styles.alpha)(theme.palette.primary[900], 0.7)} 0 1px 0 1px inset`
569
- }
577
+ },
578
+ '&.Mui-disabled': {
579
+ color: theme.palette.grey[700],
580
+ textShadow: 'none',
581
+ borderColor: theme.palette.grey[400]
582
+ },
583
+ ...theme.applyDarkStyles({
584
+ '&.Mui-disabled': {
585
+ color: theme.palette.grey[400],
586
+ textShadow: 'none',
587
+ borderColor: theme.palette.grey[800]
588
+ }
589
+ })
570
590
  }),
571
591
  ...(ownerState.variant === 'contained' && ownerState.color === 'secondary' && {
572
592
  color: '#fff',
@@ -584,7 +604,19 @@ function getThemedComponents() {
584
604
  backgroundColor: (theme.vars || theme).palette.primaryDark[700],
585
605
  borderColor: (theme.vars || theme).palette.primaryDark[600],
586
606
  boxShadow: `${(0, _styles.alpha)(theme.palette.primaryDark[900], 0.7)} 0 1px 0 1px inset`
587
- }
607
+ },
608
+ '&.Mui-disabled': {
609
+ color: theme.palette.grey[700],
610
+ textShadow: 'none',
611
+ borderColor: theme.palette.grey[400]
612
+ },
613
+ ...theme.applyDarkStyles({
614
+ '&.Mui-disabled': {
615
+ color: theme.palette.grey[400],
616
+ textShadow: 'none',
617
+ borderColor: theme.palette.grey[800]
618
+ }
619
+ })
588
620
  }),
589
621
  ...(ownerState.variant === 'text' && ownerState.color === 'secondary' && {
590
622
  color: (theme.vars || theme).palette.text.secondary,
@@ -600,6 +632,9 @@ function getThemedComponents() {
600
632
  },
601
633
  '&:active': {
602
634
  backgroundColor: (theme.vars || theme).palette.primaryDark[700]
635
+ },
636
+ '&.Mui-disabled': {
637
+ color: theme.palette.grey[500]
603
638
  }
604
639
  })
605
640
  }),
@@ -618,6 +653,9 @@ function getThemedComponents() {
618
653
  },
619
654
  '&:active': {
620
655
  backgroundColor: (0, _styles.alpha)(theme.palette.primary[900], 0.1)
656
+ },
657
+ '&.Mui-disabled': {
658
+ color: theme.palette.grey[500]
621
659
  }
622
660
  })
623
661
  })
@@ -1160,7 +1198,55 @@ function getThemedComponents() {
1160
1198
  styleOverrides: {
1161
1199
  iconFilled: {
1162
1200
  top: 'calc(50% - .25em)'
1163
- }
1201
+ },
1202
+ root: ({
1203
+ theme
1204
+ }) => ({
1205
+ variants: [{
1206
+ props: {
1207
+ variant: 'outlined'
1208
+ },
1209
+ style: {
1210
+ backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[50], 0.1),
1211
+ '& .MuiOutlinedInput-notchedOutline': {
1212
+ border: `1px solid ${(theme.vars || theme).palette.primaryDark[100]}`,
1213
+ boxShadow: `#FFF 0 1px 0 inset, ${(0, _styles.alpha)(theme.palette.grey[200], 0.4)} 0 -1px 0 inset, ${(0, _styles.alpha)(theme.palette.grey[200], 0.5)} 0 1px 2px 0`
1214
+ },
1215
+ '&:not(.Mui-focused):hover': {
1216
+ background: (theme.vars || theme).palette.grey[50],
1217
+ '& .MuiOutlinedInput-notchedOutline': {
1218
+ borderColor: (theme.vars || theme).palette.grey[300],
1219
+ boxShadow: `${(0, _styles.alpha)(theme.palette.grey[200], 0.5)} 0 1px 2px 0`
1220
+ }
1221
+ },
1222
+ ...theme.applyDarkStyles({
1223
+ color: (theme.vars || theme).palette.primary[300],
1224
+ backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[700], 0.2),
1225
+ '& .MuiOutlinedInput-notchedOutline': {
1226
+ borderColor: (0, _styles.alpha)(theme.palette.primaryDark[600], 0.5),
1227
+ boxShadow: `${(0, _styles.alpha)(theme.palette.primaryDark[600], 0.3)} 0 1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`
1228
+ },
1229
+ '&:not(.Mui-focused):hover': {
1230
+ background: (0, _styles.alpha)(theme.palette.primaryDark[700], 0.8),
1231
+ '& .MuiOutlinedInput-notchedOutline': {
1232
+ borderColor: (theme.vars || theme).palette.primaryDark[600],
1233
+ boxShadow: `${(theme.vars || theme).palette.common.black} 0 1px 2px 0`
1234
+ }
1235
+ }
1236
+ })
1237
+ }
1238
+ }, {
1239
+ props: {
1240
+ size: 'small'
1241
+ },
1242
+ style: {
1243
+ minHeight: 32,
1244
+ '& [role="combobox"]': {
1245
+ paddingBlock: 5
1246
+ }
1247
+ }
1248
+ }]
1249
+ })
1164
1250
  }
1165
1251
  },
1166
1252
  MuiTab: {
package/node/svgIcons/AdobeXDIcon.js CHANGED
@@ -8,7 +8,7 @@ exports.default = void 0;
8
8
  var React = _interopRequireWildcard(require("react"));
9
9
  var _utils = require("@mui/material/utils");
10
10
  var _jsxRuntime = require("react/jsx-runtime");
11
- var _default = exports.default = (0, _utils.createSvgIcon)( /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
11
+ var _default = exports.default = (0, _utils.createSvgIcon)(/*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
12
12
  fillRule: "nonzero",
13
13
  fill: "none",
14
14
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
package/node/svgIcons/BundleSizeIcon.js CHANGED
@@ -8,7 +8,7 @@ exports.default = void 0;
8
8
  var React = _interopRequireWildcard(require("react"));
9
9
  var _utils = require("@mui/material/utils");
10
10
  var _jsxRuntime = require("react/jsx-runtime");
11
- var _default = exports.default = (0, _utils.createSvgIcon)( /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
11
+ var _default = exports.default = (0, _utils.createSvgIcon)(/*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
12
12
  fill: "currentColor",
13
13
  fillRule: "nonzero",
14
14
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
package/node/svgIcons/FigmaIcon.js CHANGED
@@ -8,7 +8,7 @@ exports.default = void 0;
8
8
  var React = _interopRequireWildcard(require("react"));
9
9
  var _utils = require("@mui/material/utils");
10
10
  var _jsxRuntime = require("react/jsx-runtime");
11
- var _default = exports.default = (0, _utils.createSvgIcon)( /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
11
+ var _default = exports.default = (0, _utils.createSvgIcon)(/*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
12
12
  fillRule: "nonzero",
13
13
  fill: "none",
14
14
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
package/node/svgIcons/MaterialDesignIcon.js CHANGED
@@ -8,7 +8,7 @@ exports.default = void 0;
8
8
  var React = _interopRequireWildcard(require("react"));
9
9
  var _utils = require("@mui/material/utils");
10
10
  var _jsxRuntime = require("react/jsx-runtime");
11
- var _default = exports.default = (0, _utils.createSvgIcon)( /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
11
+ var _default = exports.default = (0, _utils.createSvgIcon)(/*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
12
12
  fill: "none",
13
13
  fillRule: "evenodd",
14
14
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
package/node/svgIcons/SketchIcon.js CHANGED
@@ -8,7 +8,7 @@ exports.default = void 0;
8
8
  var React = _interopRequireWildcard(require("react"));
9
9
  var _utils = require("@mui/material/utils");
10
10
  var _jsxRuntime = require("react/jsx-runtime");
11
- var _default = exports.default = (0, _utils.createSvgIcon)( /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
11
+ var _default = exports.default = (0, _utils.createSvgIcon)(/*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
12
12
  fillRule: "nonzero",
13
13
  fill: "none",
14
14
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
package/node/svgIcons/W3CIcon.js CHANGED
@@ -8,7 +8,7 @@ exports.default = void 0;
8
8
  var React = _interopRequireWildcard(require("react"));
9
9
  var _utils = require("@mui/material/utils");
10
10
  var _jsxRuntime = require("react/jsx-runtime");
11
- var _default = exports.default = (0, _utils.createSvgIcon)( /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
11
+ var _default = exports.default = (0, _utils.createSvgIcon)(/*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
12
12
  fillRule: "nonzero",
13
13
  fill: "none",
14
14
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mui/docs",
3
- "version": "6.0.2",
3
+ "version": "6.1.0",
4
4
  "private": false,
5
5
  "author": "MUI Team",
6
6
  "description": "MUI Docs - Documentation building blocks.",
@@ -23,12 +23,12 @@
23
23
  },
24
24
  "homepage": "https://github.com/mui/material-ui/tree/master/packages/mui-docs",
25
25
  "dependencies": {
26
- "@babel/runtime": "^7.25.0",
26
+ "@babel/runtime": "^7.25.6",
27
27
  "clipboard-copy": "^4.0.1",
28
28
  "clsx": "^2.1.1",
29
29
  "nprogress": "^0.2.0",
30
30
  "prop-types": "^15.8.1",
31
- "@mui/internal-markdown": "^1.0.12"
31
+ "@mui/internal-markdown": "^1.0.13"
32
32
  },
33
33
  "peerDependencies": {
34
34
  "@mui/base": "*",
package/svgIcons/AdobeXDIcon.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as React from 'react';
2
2
  import { createSvgIcon } from '@mui/material/utils';
3
3
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
4
- export default createSvgIcon( /*#__PURE__*/_jsxs("g", {
4
+ export default createSvgIcon(/*#__PURE__*/_jsxs("g", {
5
5
  fillRule: "nonzero",
6
6
  fill: "none",
7
7
  children: [/*#__PURE__*/_jsx("path", {
package/svgIcons/BundleSizeIcon.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as React from 'react';
2
2
  import { createSvgIcon } from '@mui/material/utils';
3
3
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
4
- export default createSvgIcon( /*#__PURE__*/_jsxs("g", {
4
+ export default createSvgIcon(/*#__PURE__*/_jsxs("g", {
5
5
  fill: "currentColor",
6
6
  fillRule: "nonzero",
7
7
  children: [/*#__PURE__*/_jsx("path", {
package/svgIcons/FigmaIcon.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as React from 'react';
2
2
  import { createSvgIcon } from '@mui/material/utils';
3
3
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
4
- export default createSvgIcon( /*#__PURE__*/_jsxs("g", {
4
+ export default createSvgIcon(/*#__PURE__*/_jsxs("g", {
5
5
  fillRule: "nonzero",
6
6
  fill: "none",
7
7
  children: [/*#__PURE__*/_jsx("path", {
package/svgIcons/MaterialDesignIcon.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as React from 'react';
2
2
  import { createSvgIcon } from '@mui/material/utils';
3
3
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
4
- export default createSvgIcon( /*#__PURE__*/_jsxs("g", {
4
+ export default createSvgIcon(/*#__PURE__*/_jsxs("g", {
5
5
  fill: "none",
6
6
  fillRule: "evenodd",
7
7
  children: [/*#__PURE__*/_jsx("circle", {
package/svgIcons/SketchIcon.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as React from 'react';
2
2
  import { createSvgIcon } from '@mui/material/utils';
3
3
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
4
- export default createSvgIcon( /*#__PURE__*/_jsxs("g", {
4
+ export default createSvgIcon(/*#__PURE__*/_jsxs("g", {
5
5
  fillRule: "nonzero",
6
6
  fill: "none",
7
7
  children: [/*#__PURE__*/_jsx("path", {
package/svgIcons/W3CIcon.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as React from 'react';
2
2
  import { createSvgIcon } from '@mui/material/utils';
3
3
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
4
- export default createSvgIcon( /*#__PURE__*/_jsxs("g", {
4
+ export default createSvgIcon(/*#__PURE__*/_jsxs("g", {
5
5
  fillRule: "nonzero",
6
6
  fill: "none",
7
7
  children: [/*#__PURE__*/_jsx("path", {