@mui/docs 6.0.0-alpha.1 → 6.0.0-alpha.10

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 (99) hide show
  1. package/CHANGELOG.md +462 -4
  2. package/CodeCopy/CodeCopy.d.ts +20 -0
  3. package/CodeCopy/CodeCopy.js +172 -0
  4. package/CodeCopy/CodeCopyButton.d.ts +5 -0
  5. package/CodeCopy/CodeCopyButton.js +41 -0
  6. package/CodeCopy/index.d.ts +3 -0
  7. package/CodeCopy/index.js +3 -0
  8. package/CodeCopy/package.json +6 -0
  9. package/CodeCopy/useClipboardCopy.d.ts +4 -0
  10. package/CodeCopy/useClipboardCopy.js +21 -0
  11. package/ComponentLinkHeader/ComponentLinkHeader.d.ts +9 -0
  12. package/ComponentLinkHeader/ComponentLinkHeader.js +179 -0
  13. package/ComponentLinkHeader/index.d.ts +2 -0
  14. package/ComponentLinkHeader/index.js +2 -0
  15. package/ComponentLinkHeader/package.json +6 -0
  16. package/HighlightedCode/HighlightedCode.d.ts +14 -0
  17. package/HighlightedCode/HighlightedCode.js +68 -0
  18. package/HighlightedCode/index.d.ts +1 -0
  19. package/HighlightedCode/index.js +1 -0
  20. package/HighlightedCode/package.json +6 -0
  21. package/InfoCard/InfoCard.d.ts +0 -1
  22. package/InfoCard/InfoCard.js +45 -44
  23. package/Link/Link.js +40 -38
  24. package/MarkdownElement/MarkdownElement.d.ts +6 -0
  25. package/MarkdownElement/MarkdownElement.js +825 -0
  26. package/MarkdownElement/index.d.ts +1 -0
  27. package/MarkdownElement/index.js +1 -0
  28. package/MarkdownElement/package.json +6 -0
  29. package/NProgressBar/NProgressBar.js +6 -7
  30. package/SectionTitle/SectionTitle.d.ts +7 -0
  31. package/SectionTitle/SectionTitle.js +30 -0
  32. package/SectionTitle/index.d.ts +1 -0
  33. package/SectionTitle/index.js +1 -0
  34. package/SectionTitle/package.json +6 -0
  35. package/branding/brandingTheme.js +569 -369
  36. package/node/CodeCopy/CodeCopy.js +188 -0
  37. package/node/CodeCopy/CodeCopyButton.js +50 -0
  38. package/node/CodeCopy/index.js +40 -0
  39. package/node/CodeCopy/useClipboardCopy.js +30 -0
  40. package/node/ComponentLinkHeader/ComponentLinkHeader.js +189 -0
  41. package/node/ComponentLinkHeader/index.js +24 -0
  42. package/node/HighlightedCode/HighlightedCode.js +77 -0
  43. package/node/HighlightedCode/index.js +16 -0
  44. package/node/InfoCard/InfoCard.js +45 -44
  45. package/node/Link/Link.js +43 -40
  46. package/node/MarkdownElement/MarkdownElement.js +837 -0
  47. package/node/MarkdownElement/index.js +16 -0
  48. package/node/NProgressBar/NProgressBar.js +6 -7
  49. package/node/SectionTitle/SectionTitle.js +38 -0
  50. package/node/SectionTitle/index.js +16 -0
  51. package/node/branding/brandingTheme.js +569 -369
  52. package/node/svgIcons/AdobeXDIcon.js +22 -0
  53. package/node/svgIcons/BundleSizeIcon.js +22 -0
  54. package/node/svgIcons/FigmaIcon.js +31 -0
  55. package/node/svgIcons/FileDownload.js +3 -3
  56. package/node/svgIcons/JavaScript.js +3 -3
  57. package/node/svgIcons/MaterialDesignIcon.js +27 -0
  58. package/node/svgIcons/SketchIcon.js +36 -0
  59. package/node/svgIcons/TypeScript.js +3 -3
  60. package/node/svgIcons/W3CIcon.js +24 -0
  61. package/node/translations/translations.json +4 -2
  62. package/package.json +6 -4
  63. package/svgIcons/AdobeXDIcon.d.ts +4 -0
  64. package/svgIcons/AdobeXDIcon.js +14 -0
  65. package/svgIcons/BundleSizeIcon.d.ts +4 -0
  66. package/svgIcons/BundleSizeIcon.js +14 -0
  67. package/svgIcons/FigmaIcon.d.ts +4 -0
  68. package/svgIcons/FigmaIcon.js +23 -0
  69. package/svgIcons/FileDownload.d.ts +7 -0
  70. package/svgIcons/FileDownload.js +3 -3
  71. package/svgIcons/JavaScript.d.ts +7 -0
  72. package/svgIcons/JavaScript.js +3 -3
  73. package/svgIcons/MaterialDesignIcon.d.ts +4 -0
  74. package/svgIcons/MaterialDesignIcon.js +19 -0
  75. package/svgIcons/SketchIcon.d.ts +4 -0
  76. package/svgIcons/SketchIcon.js +28 -0
  77. package/svgIcons/TypeScript.d.ts +7 -0
  78. package/svgIcons/TypeScript.js +3 -3
  79. package/svgIcons/W3CIcon.d.ts +4 -0
  80. package/svgIcons/W3CIcon.js +16 -0
  81. package/translations/translations.json +4 -2
  82. package/tsconfig.build.tsbuildinfo +1 -1
  83. package/legacy/DocsProvider/DocsProvider.js +0 -25
  84. package/legacy/DocsProvider/index.js +0 -1
  85. package/legacy/InfoCard/InfoCard.js +0 -86
  86. package/legacy/InfoCard/index.js +0 -1
  87. package/legacy/Link/Link.js +0 -101
  88. package/legacy/Link/index.js +0 -1
  89. package/legacy/NProgressBar/NProgressBar.js +0 -80
  90. package/legacy/NProgressBar/index.js +0 -1
  91. package/legacy/branding/BrandingProvider.js +0 -17
  92. package/legacy/branding/brandingTheme.js +0 -1168
  93. package/legacy/branding/index.js +0 -2
  94. package/legacy/i18n/i18n.js +0 -105
  95. package/legacy/i18n/index.js +0 -1
  96. package/legacy/svgIcons/FileDownload.js +0 -14
  97. package/legacy/svgIcons/JavaScript.js +0 -14
  98. package/legacy/svgIcons/TypeScript.js +0 -14
  99. package/legacy/translations/index.js +0 -4
@@ -1,6 +1,3 @@
1
- import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
2
- import _extends from "@babel/runtime/helpers/esm/extends";
3
- const _excluded = ["classNameDescription", "classNameTitle", "dense", "description", "icon", "link", "svg", "title", "titleProps"];
4
1
  import * as React from 'react';
5
2
  import { alpha } from '@mui/material/styles';
6
3
  import Box from '@mui/material/Box';
@@ -12,9 +9,9 @@ export function GlowingIconContainer({
12
9
  icon
13
10
  }) {
14
11
  return /*#__PURE__*/_jsx(Box, {
15
- sx: theme => _extends({
16
- width: 40,
17
- height: 40,
12
+ sx: theme => ({
13
+ width: 36,
14
+ height: 36,
18
15
  display: 'flex',
19
16
  justifyContent: 'center',
20
17
  alignItems: 'center',
@@ -23,64 +20,68 @@ export function GlowingIconContainer({
23
20
  border: '1px solid',
24
21
  borderColor: 'primary.200',
25
22
  bgcolor: 'primary.50',
26
- boxShadow: `0px 1px 6px 0px ${alpha(theme.palette.primary[500], 0.2)}, 0px 2px 12px 0px rgba(234, 237, 241, 0.3) inset`
27
- }, theme.applyDarkStyles({
28
- borderColor: alpha(theme.palette.primary[400], 0.25),
29
- bgcolor: alpha(theme.palette.primary[900], 0.25),
30
- boxShadow: `0 2px 6px 0 ${alpha(theme.palette.primary[600], 0.3)}, 0px 2px 12px 0px rgba(0, 0, 0, 0.25) inset`
31
- })),
23
+ boxShadow: `0px 0 0 2px ${alpha(theme.palette.primary[500], 0.1)}, 0px 2px 12px 0px rgba(234, 237, 241, 0.3) inset`,
24
+ '& .MuiSvgIcon-root': {
25
+ fontSize: theme.typography.pxToRem(18)
26
+ },
27
+ ...theme.applyDarkStyles({
28
+ borderColor: alpha(theme.palette.primary[400], 0.25),
29
+ bgcolor: alpha(theme.palette.primary[900], 0.2),
30
+ boxShadow: `0 0 0 2px ${alpha(theme.palette.primary[600], 0.1)}, 0px 2px 12px 0px rgba(0, 0, 0, 0.25) inset`
31
+ })
32
+ }),
32
33
  children: icon
33
34
  });
34
35
  }
35
36
  export function InfoCard(props) {
36
37
  const {
37
- classNameDescription,
38
- classNameTitle,
39
- dense,
40
- description,
41
- icon,
42
- link,
43
- svg,
44
- title,
45
- titleProps
46
- } = props,
47
- other = _objectWithoutPropertiesLoose(props, _excluded);
48
- return /*#__PURE__*/_jsxs(Paper, _extends({
38
+ classNameDescription,
39
+ classNameTitle,
40
+ description,
41
+ icon,
42
+ link,
43
+ svg,
44
+ title,
45
+ titleProps,
46
+ ...other
47
+ } = props;
48
+ return /*#__PURE__*/_jsxs(Paper, {
49
49
  variant: "outlined",
50
50
  component: link ? Link : 'div',
51
- href: link
52
- }, link ? {
53
- noLinkStyle: true,
54
- // Fix overloading with prefetch={false}, only prefetch on hover.
55
- prefetch: false
56
- } : {}, {
57
- sx: theme => _extends({
58
- p: dense ? 2.5 : 3.5,
51
+ href: link,
52
+ ...(link ? {
53
+ noLinkStyle: true,
54
+ // Fix overloading with prefetch={false}, only prefetch on hover.
55
+ prefetch: false
56
+ } : {}),
57
+ sx: theme => ({
58
+ p: 2.5,
59
59
  height: '100%',
60
- background: `${(theme.vars || theme).palette.gradients.linearSubtle}`
61
- }, theme.applyDarkStyles({
62
- bgcolor: alpha(theme.palette.primaryDark[800], 0.25),
63
60
  background: `${(theme.vars || theme).palette.gradients.linearSubtle}`,
64
- borderColor: 'primaryDark.700'
65
- }))
66
- }, other, {
61
+ ...theme.applyDarkStyles({
62
+ bgcolor: alpha(theme.palette.primaryDark[800], 0.25),
63
+ background: `${(theme.vars || theme).palette.gradients.linearSubtle}`,
64
+ borderColor: 'primaryDark.700'
65
+ })
66
+ }),
67
+ ...other,
67
68
  children: [svg && svg, icon && /*#__PURE__*/_jsx(GlowingIconContainer, {
68
69
  icon: icon
69
- }), /*#__PURE__*/_jsx(Typography, _extends({
70
- fontWeight: "bold",
70
+ }), /*#__PURE__*/_jsx(Typography, {
71
+ fontWeight: "semiBold",
71
72
  component: "h3",
72
73
  color: "text.primary",
73
74
  variant: "body2",
74
75
  mt: icon ? 2 : 0,
75
76
  mb: description ? 0.5 : 0,
76
- className: classNameTitle
77
- }, titleProps, {
77
+ className: classNameTitle,
78
+ ...titleProps,
78
79
  children: title
79
- })), /*#__PURE__*/_jsx(Typography, {
80
+ }), /*#__PURE__*/_jsx(Typography, {
80
81
  variant: "body2",
81
82
  color: "text.secondary",
82
83
  className: classNameDescription,
83
84
  children: description
84
85
  })]
85
- }));
86
+ });
86
87
  }
package/Link/Link.js CHANGED
@@ -1,7 +1,3 @@
1
- import _extends from "@babel/runtime/helpers/esm/extends";
2
- import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
3
- const _excluded = ["to", "linkAs", "replace", "scroll", "shallow", "prefetch", "legacyBehavior", "locale"],
4
- _excluded2 = ["activeClassName", "as", "className", "href", "legacyBehavior", "linkAs", "locale", "noLinkStyle", "prefetch", "replace", "role", "scroll", "shallow"];
5
1
  import * as React from 'react';
6
2
  import clsx from 'clsx';
7
3
  import { useRouter } from 'next/router';
@@ -24,16 +20,16 @@ import { jsx as _jsx } from "react/jsx-runtime";
24
20
  const Anchor = styled('a')({});
25
21
  const NextLinkComposed = /*#__PURE__*/React.forwardRef(function NextLinkComposed(props, ref) {
26
22
  const {
27
- to,
28
- linkAs,
29
- replace,
30
- scroll,
31
- shallow,
32
- prefetch,
33
- legacyBehavior = true,
34
- locale
35
- } = props,
36
- other = _objectWithoutPropertiesLoose(props, _excluded);
23
+ to,
24
+ linkAs,
25
+ replace,
26
+ scroll,
27
+ shallow,
28
+ prefetch,
29
+ legacyBehavior = true,
30
+ locale,
31
+ ...other
32
+ } = props;
37
33
  return /*#__PURE__*/_jsx(NextLink, {
38
34
  href: to,
39
35
  prefetch: prefetch,
@@ -44,31 +40,33 @@ const NextLinkComposed = /*#__PURE__*/React.forwardRef(function NextLinkComposed
44
40
  passHref: true,
45
41
  locale: locale,
46
42
  legacyBehavior: legacyBehavior,
47
- children: /*#__PURE__*/_jsx(Anchor, _extends({
43
+ children: /*#__PURE__*/_jsx(Anchor, {
48
44
  "data-no-markdown-link": "true",
49
- ref: ref
50
- }, other))
45
+ ref: ref,
46
+ ...other
47
+ })
51
48
  });
52
49
  });
53
50
  // A styled version of the Next.js Pages Router Link component:
54
51
  // https://nextjs.org/docs/pages/api-reference/components/link
55
52
  export const Link = /*#__PURE__*/React.forwardRef(function Link(props, ref) {
56
53
  const {
57
- activeClassName = 'active',
58
- as,
59
- className: classNameProps,
60
- href,
61
- legacyBehavior,
62
- linkAs: linkAsProp,
63
- locale,
64
- noLinkStyle,
65
- prefetch,
66
- replace,
67
- // Link don't have roles.
68
- scroll,
69
- shallow
70
- } = props,
71
- other = _objectWithoutPropertiesLoose(props, _excluded2);
54
+ activeClassName = 'active',
55
+ as,
56
+ className: classNameProps,
57
+ href,
58
+ legacyBehavior,
59
+ linkAs: linkAsProp,
60
+ locale,
61
+ noLinkStyle,
62
+ prefetch,
63
+ replace,
64
+ role,
65
+ // Link don't have roles.
66
+ scroll,
67
+ shallow,
68
+ ...other
69
+ } = props;
72
70
  const router = useRouter();
73
71
  const pathname = typeof href === 'string' ? href : href?.pathname;
74
72
  const routerPathname = router.pathname.replace('/[docsTab]', '');
@@ -93,14 +91,18 @@ export const Link = /*#__PURE__*/React.forwardRef(function Link(props, ref) {
93
91
  locale
94
92
  };
95
93
  if (noLinkStyle) {
96
- return /*#__PURE__*/_jsx(NextLinkComposed, _extends({
94
+ return /*#__PURE__*/_jsx(NextLinkComposed, {
97
95
  className: className,
98
- ref: ref
99
- }, nextjsProps, other));
96
+ ref: ref,
97
+ ...nextjsProps,
98
+ ...other
99
+ });
100
100
  }
101
- return /*#__PURE__*/_jsx(MuiLink, _extends({
101
+ return /*#__PURE__*/_jsx(MuiLink, {
102
102
  component: NextLinkComposed,
103
103
  className: className,
104
- ref: ref
105
- }, nextjsProps, other));
104
+ ref: ref,
105
+ ...nextjsProps,
106
+ ...other
107
+ });
106
108
  });
@@ -0,0 +1,6 @@
1
+ import * as React from 'react';
2
+ export interface MarkdownElementProps {
3
+ className?: string;
4
+ renderedMarkdown?: string;
5
+ }
6
+ export declare const MarkdownElement: React.ForwardRefExoticComponent<MarkdownElementProps & React.RefAttributes<HTMLDivElement>>;