@mui/docs 9.0.0-alpha.2 → 9.0.0-alpha.3

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 (253) hide show
  1. package/Ad/Ad.js +33 -42
  2. package/Ad/AdCarbon.js +18 -27
  3. package/Ad/AdDisplay.js +22 -29
  4. package/Ad/AdGuest.js +8 -15
  5. package/Ad/AdInHouse.js +4 -11
  6. package/Ad/AdManager.js +8 -17
  7. package/Ad/AdProvider.js +5 -13
  8. package/Ad/ad.styles.js +5 -13
  9. package/Ad/index.js +6 -62
  10. package/AnalyticsProvider/AnalyticsProvider.d.ts +17 -0
  11. package/AnalyticsProvider/AnalyticsProvider.js +225 -0
  12. package/AnalyticsProvider/index.d.ts +1 -0
  13. package/AnalyticsProvider/index.js +1 -0
  14. package/CHANGELOG.md +37 -0
  15. package/CodeCopy/CodeCopy.js +10 -19
  16. package/CodeCopy/CodeCopyButton.js +9 -16
  17. package/CodeCopy/index.js +3 -40
  18. package/CodeCopy/useClipboardCopy.js +4 -12
  19. package/ComponentLinkHeader/ComponentLinkHeader.js +46 -54
  20. package/ComponentLinkHeader/index.js +2 -24
  21. package/DemoContext/DemoContext.d.ts +86 -0
  22. package/DemoContext/DemoContext.js +13 -0
  23. package/DemoContext/index.d.ts +2 -0
  24. package/DemoContext/index.js +1 -0
  25. package/DocsProvider/DocsProvider.js +9 -17
  26. package/DocsProvider/index.js +1 -16
  27. package/Document/Document.d.ts +16 -0
  28. package/Document/Document.js +147 -0
  29. package/Document/getInitialProps.d.ts +18 -0
  30. package/Document/getInitialProps.js +62 -0
  31. package/Document/index.d.ts +2 -0
  32. package/Document/index.js +2 -0
  33. package/GoogleAnalytics/GoogleAnalytics.d.ts +9 -0
  34. package/GoogleAnalytics/GoogleAnalytics.js +129 -0
  35. package/GoogleAnalytics/index.d.ts +1 -0
  36. package/GoogleAnalytics/index.js +1 -0
  37. package/HighlightedCode/HighlightedCode.js +18 -26
  38. package/HighlightedCode/index.js +1 -16
  39. package/HighlightedCodeWithTabs/HighlightedCodeWithTabs.js +22 -31
  40. package/HighlightedCodeWithTabs/index.js +2 -24
  41. package/IconImage/IconImage.js +13 -21
  42. package/IconImage/index.js +1 -13
  43. package/InfoCard/InfoCard.js +20 -29
  44. package/InfoCard/index.js +1 -16
  45. package/Link/Link.js +17 -25
  46. package/Link/MarkdownLinks.d.ts +2 -0
  47. package/Link/MarkdownLinks.js +84 -0
  48. package/Link/SkipLink.d.ts +1 -0
  49. package/Link/SkipLink.js +66 -0
  50. package/Link/index.d.ts +3 -1
  51. package/Link/index.js +3 -16
  52. package/MarkdownElement/MarkdownElement.js +178 -186
  53. package/MarkdownElement/index.js +1 -16
  54. package/MuiPage/MuiPage.d.ts +67 -0
  55. package/MuiPage/MuiPage.js +1 -0
  56. package/MuiPage/index.d.ts +1 -0
  57. package/MuiPage/index.js +1 -0
  58. package/NextNProgressBar/NextNProgressBar.d.ts +1 -0
  59. package/NextNProgressBar/NextNProgressBar.js +44 -0
  60. package/NextNProgressBar/index.d.ts +1 -0
  61. package/NextNProgressBar/index.js +1 -0
  62. package/PageContext/PageContext.d.ts +31 -0
  63. package/PageContext/PageContext.js +6 -0
  64. package/PageContext/index.d.ts +2 -0
  65. package/PageContext/index.js +1 -0
  66. package/SectionHeadline/SectionHeadline.js +9 -17
  67. package/SectionHeadline/index.js +2 -25
  68. package/SectionTitle/SectionTitle.js +7 -13
  69. package/SectionTitle/index.js +1 -16
  70. package/StyledEngineProvider/StyledEngineProvider.d.ts +9 -0
  71. package/StyledEngineProvider/StyledEngineProvider.js +44 -0
  72. package/StyledEngineProvider/index.d.ts +1 -0
  73. package/StyledEngineProvider/index.js +1 -0
  74. package/ThemeContext/ThemeContext.js +26 -38
  75. package/ThemeContext/index.js +1 -42
  76. package/branding/BrandingCssVarsProvider.d.ts +23 -0
  77. package/branding/BrandingCssVarsProvider.js +170 -0
  78. package/branding/BrandingProvider.js +8 -15
  79. package/branding/brandingTheme.js +115 -126
  80. package/branding/index.d.ts +2 -1
  81. package/branding/index.js +3 -27
  82. package/codeStyling/codeStyling.d.ts +10 -0
  83. package/codeStyling/codeStyling.js +84 -0
  84. package/codeStyling/index.d.ts +1 -0
  85. package/codeStyling/index.js +1 -0
  86. package/codeVariant/codeVariant.d.ts +10 -0
  87. package/codeVariant/codeVariant.js +73 -0
  88. package/codeVariant/index.d.ts +1 -0
  89. package/codeVariant/index.js +1 -0
  90. package/constants/constants.d.ts +13 -0
  91. package/constants/constants.js +15 -0
  92. package/constants/index.d.ts +1 -0
  93. package/constants/index.js +1 -0
  94. package/createEmotionCache/createEmotionCache.d.ts +1 -0
  95. package/createEmotionCache/createEmotionCache.js +12 -0
  96. package/createEmotionCache/index.d.ts +1 -0
  97. package/createEmotionCache/index.js +1 -0
  98. package/findActivePage/findActivePage.d.ts +5 -0
  99. package/findActivePage/findActivePage.js +35 -0
  100. package/findActivePage/index.d.ts +1 -0
  101. package/findActivePage/index.js +1 -0
  102. package/getProductInfoFromUrl/getProductInfoFromUrl.d.ts +8 -0
  103. package/getProductInfoFromUrl/getProductInfoFromUrl.js +50 -0
  104. package/getProductInfoFromUrl/index.d.ts +2 -0
  105. package/getProductInfoFromUrl/index.js +1 -0
  106. package/globalSelector/globalSelector.d.ts +2 -0
  107. package/globalSelector/globalSelector.js +17 -0
  108. package/globalSelector/index.d.ts +1 -0
  109. package/globalSelector/index.js +1 -0
  110. package/helpers/helpers.d.ts +31 -0
  111. package/helpers/helpers.js +87 -0
  112. package/helpers/index.d.ts +2 -0
  113. package/helpers/index.js +1 -0
  114. package/i18n/i18n.js +17 -29
  115. package/i18n/index.js +1 -16
  116. package/mapApiPageTranslations/index.d.ts +1 -0
  117. package/mapApiPageTranslations/index.js +1 -0
  118. package/mapApiPageTranslations/mapApiPageTranslations.d.ts +11 -0
  119. package/mapApiPageTranslations/mapApiPageTranslations.js +46 -0
  120. package/nextFonts/index.js +8 -15
  121. package/package.json +231 -126
  122. package/svgIcons/BundleSizeIcon.js +5 -11
  123. package/svgIcons/FigmaIcon.js +8 -14
  124. package/svgIcons/FileDownload.js +5 -12
  125. package/svgIcons/JavaScript.js +5 -12
  126. package/svgIcons/MarkdownIcon.js +7 -14
  127. package/svgIcons/MaterialDesignIcon.js +6 -12
  128. package/svgIcons/SketchIcon.js +10 -16
  129. package/svgIcons/TypeScript.js +5 -12
  130. package/svgIcons/W3CIcon.js +6 -12
  131. package/translations/index.js +3 -10
  132. package/translations/translations.json +0 -1
  133. package/useLazyCSS/index.js +1 -13
  134. package/useLazyCSS/useLazyCSS.js +5 -11
  135. package/utils/index.d.ts +1 -0
  136. package/utils/index.js +2 -0
  137. package/utils/loadScript.js +1 -7
  138. package/Ad/Ad.d.mts +0 -5
  139. package/Ad/Ad.mjs +0 -226
  140. package/Ad/AdCarbon.d.mts +0 -2
  141. package/Ad/AdCarbon.mjs +0 -125
  142. package/Ad/AdDisplay.d.mts +0 -16
  143. package/Ad/AdDisplay.mjs +0 -86
  144. package/Ad/AdGuest.d.mts +0 -10
  145. package/Ad/AdGuest.mjs +0 -29
  146. package/Ad/AdInHouse.d.mts +0 -4
  147. package/Ad/AdInHouse.mjs +0 -14
  148. package/Ad/AdManager.d.mts +0 -19
  149. package/Ad/AdManager.mjs +0 -36
  150. package/Ad/AdProvider.d.mts +0 -15
  151. package/Ad/AdProvider.mjs +0 -24
  152. package/Ad/ad.styles.d.mts +0 -4512
  153. package/Ad/ad.styles.mjs +0 -91
  154. package/Ad/index.d.mts +0 -5
  155. package/Ad/index.mjs +0 -7
  156. package/CodeCopy/CodeCopy.d.mts +0 -22
  157. package/CodeCopy/CodeCopy.mjs +0 -172
  158. package/CodeCopy/CodeCopyButton.d.mts +0 -4
  159. package/CodeCopy/CodeCopyButton.mjs +0 -40
  160. package/CodeCopy/index.d.mts +0 -3
  161. package/CodeCopy/index.mjs +0 -3
  162. package/CodeCopy/useClipboardCopy.d.mts +0 -4
  163. package/CodeCopy/useClipboardCopy.mjs +0 -21
  164. package/ComponentLinkHeader/ComponentLinkHeader.d.mts +0 -8
  165. package/ComponentLinkHeader/ComponentLinkHeader.mjs +0 -197
  166. package/ComponentLinkHeader/index.d.mts +0 -2
  167. package/ComponentLinkHeader/index.mjs +0 -2
  168. package/DocsProvider/DocsProvider.d.mts +0 -24
  169. package/DocsProvider/DocsProvider.mjs +0 -31
  170. package/DocsProvider/index.d.mts +0 -1
  171. package/DocsProvider/index.mjs +0 -1
  172. package/HighlightedCode/HighlightedCode.d.mts +0 -14
  173. package/HighlightedCode/HighlightedCode.mjs +0 -67
  174. package/HighlightedCode/index.d.mts +0 -1
  175. package/HighlightedCode/index.mjs +0 -1
  176. package/HighlightedCodeWithTabs/HighlightedCodeWithTabs.d.mts +0 -28
  177. package/HighlightedCodeWithTabs/HighlightedCodeWithTabs.mjs +0 -362
  178. package/HighlightedCodeWithTabs/index.d.mts +0 -2
  179. package/HighlightedCodeWithTabs/index.mjs +0 -2
  180. package/IconImage/IconImage.d.mts +0 -11
  181. package/IconImage/IconImage.mjs +0 -83
  182. package/IconImage/index.d.mts +0 -1
  183. package/IconImage/index.mjs +0 -1
  184. package/InfoCard/InfoCard.d.mts +0 -22
  185. package/InfoCard/InfoCard.mjs +0 -87
  186. package/InfoCard/index.d.mts +0 -1
  187. package/InfoCard/index.mjs +0 -1
  188. package/Link/Link.d.mts +0 -25
  189. package/Link/Link.mjs +0 -75
  190. package/Link/index.d.mts +0 -1
  191. package/Link/index.mjs +0 -1
  192. package/MarkdownElement/MarkdownElement.d.mts +0 -7
  193. package/MarkdownElement/MarkdownElement.mjs +0 -847
  194. package/MarkdownElement/index.d.mts +0 -1
  195. package/MarkdownElement/index.mjs +0 -1
  196. package/NProgressBar/NProgressBar.d.mts +0 -6
  197. package/NProgressBar/NProgressBar.js +0 -98
  198. package/NProgressBar/index.d.mts +0 -2
  199. package/NProgressBar/index.d.ts +0 -2
  200. package/NProgressBar/index.js +0 -13
  201. package/NProgressBar/index.mjs +0 -1
  202. package/SectionHeadline/SectionHeadline.d.mts +0 -13
  203. package/SectionHeadline/SectionHeadline.mjs +0 -81
  204. package/SectionHeadline/index.d.mts +0 -2
  205. package/SectionHeadline/index.mjs +0 -2
  206. package/SectionTitle/SectionTitle.d.mts +0 -6
  207. package/SectionTitle/SectionTitle.mjs +0 -29
  208. package/SectionTitle/index.d.mts +0 -1
  209. package/SectionTitle/index.mjs +0 -1
  210. package/ThemeContext/ThemeContext.d.mts +0 -92
  211. package/ThemeContext/ThemeContext.mjs +0 -200
  212. package/ThemeContext/index.d.mts +0 -1
  213. package/ThemeContext/index.mjs +0 -1
  214. package/branding/BrandingProvider.d.mts +0 -9
  215. package/branding/BrandingProvider.mjs +0 -17
  216. package/branding/brandingTheme.d.mts +0 -147
  217. package/branding/brandingTheme.mjs +0 -1527
  218. package/branding/index.d.mts +0 -2
  219. package/branding/index.mjs +0 -2
  220. package/i18n/i18n.d.mts +0 -27
  221. package/i18n/i18n.mjs +0 -111
  222. package/i18n/index.d.mts +0 -1
  223. package/i18n/index.mjs +0 -1
  224. package/nextFonts/index.d.mts +0 -6
  225. package/nextFonts/index.mjs +0 -59
  226. package/svgIcons/BundleSizeIcon.d.mts +0 -4
  227. package/svgIcons/BundleSizeIcon.mjs +0 -13
  228. package/svgIcons/FigmaIcon.d.mts +0 -4
  229. package/svgIcons/FigmaIcon.mjs +0 -22
  230. package/svgIcons/FileDownload.d.mts +0 -6
  231. package/svgIcons/FileDownload.mjs +0 -13
  232. package/svgIcons/JavaScript.d.mts +0 -6
  233. package/svgIcons/JavaScript.mjs +0 -13
  234. package/svgIcons/MarkdownIcon.d.mts +0 -2
  235. package/svgIcons/MarkdownIcon.mjs +0 -22
  236. package/svgIcons/MaterialDesignIcon.d.mts +0 -4
  237. package/svgIcons/MaterialDesignIcon.mjs +0 -18
  238. package/svgIcons/SketchIcon.d.mts +0 -4
  239. package/svgIcons/SketchIcon.mjs +0 -27
  240. package/svgIcons/TypeScript.d.mts +0 -6
  241. package/svgIcons/TypeScript.mjs +0 -13
  242. package/svgIcons/W3CIcon.d.mts +0 -4
  243. package/svgIcons/W3CIcon.mjs +0 -15
  244. package/translations/index.d.mts +0 -3
  245. package/translations/index.mjs +0 -4
  246. package/useLazyCSS/index.d.mts +0 -1
  247. package/useLazyCSS/index.mjs +0 -1
  248. package/useLazyCSS/useLazyCSS.d.mts +0 -11
  249. package/useLazyCSS/useLazyCSS.mjs +0 -70
  250. package/utils/loadScript.d.mts +0 -1
  251. package/utils/loadScript.mjs +0 -7
  252. /package/{NProgressBar → NextNProgressBar}/NProgressBar.d.ts +0 -0
  253. /package/{NProgressBar/NProgressBar.mjs → NextNProgressBar/NProgressBar.js} +0 -0
package/Ad/ad.styles.mjs DELETED
@@ -1,91 +0,0 @@
1
- import { alpha } from '@mui/material/styles';
2
- export const adBodyImageStyles = theme => ({
3
- root: {
4
- display: 'block',
5
- overflow: 'hidden',
6
- border: '1px dashed',
7
- borderColor: (theme.vars || theme).palette.divider,
8
- borderRadius: (theme.vars || theme).shape.borderRadius,
9
- padding: 8,
10
- paddingLeft: 8 + 130,
11
- [theme.breakpoints.up('sm')]: {
12
- padding: 12,
13
- paddingLeft: 12 + 130
14
- }
15
- },
16
- imgWrapper: {
17
- float: 'left',
18
- marginLeft: -130,
19
- width: 130,
20
- height: 100
21
- },
22
- img: {
23
- verticalAlign: 'middle'
24
- },
25
- a: {
26
- color: (theme.vars || theme).palette.text.primary,
27
- textDecoration: 'none'
28
- },
29
- description: {
30
- ...theme.typography.body2,
31
- [theme.breakpoints.up('sm')]: {
32
- ...theme.typography.body1
33
- },
34
- display: 'block',
35
- marginLeft: theme.spacing(1.5)
36
- },
37
- poweredby: {
38
- ...theme.typography.caption,
39
- marginLeft: theme.spacing(1.5),
40
- color: (theme.vars || theme).palette.text.secondary,
41
- display: 'block',
42
- marginTop: theme.spacing(0.5),
43
- fontWeight: theme.typography.fontWeightRegular
44
- }
45
- });
46
- export const adBodyInlineStyles = theme => {
47
- const baseline = adBodyImageStyles(theme);
48
- return {
49
- ...baseline,
50
- root: {
51
- display: 'block',
52
- paddingTop: 8
53
- },
54
- imgWrapper: {
55
- display: 'none'
56
- },
57
- description: {
58
- ...baseline.description,
59
- marginLeft: 0,
60
- '&::before': {
61
- border: '1px solid #3e8e41',
62
- color: '#3e8e41',
63
- marginRight: 6,
64
- padding: '1px 5px',
65
- borderRadius: 3,
66
- content: '"Ad"',
67
- fontSize: theme.typography.pxToRem(14)
68
- },
69
- '&::after': {
70
- // Link
71
- marginLeft: 4,
72
- content: '"Get started"',
73
- // Style taken from the Link component & MarkdownElement.
74
- color: (theme.vars || theme).palette.primary[600],
75
- textDecoration: 'underline',
76
- textDecorationColor: alpha(theme.palette.primary.main, 0.4),
77
- ...theme.applyStyles('dark', {
78
- color: (theme.vars || theme).palette.primary[300]
79
- })
80
- }
81
- },
82
- poweredby: {
83
- ...baseline.poweredby,
84
- marginTop: 2,
85
- marginLeft: 0
86
- },
87
- link: {
88
- display: 'none'
89
- }
90
- };
91
- };
package/Ad/index.d.mts DELETED
@@ -1,5 +0,0 @@
1
- export * from "./Ad.mjs";
2
- export * from "./AdManager.mjs";
3
- export * from "./AdProvider.mjs";
4
- export * from "./AdGuest.mjs";
5
- export { AdCarbonInline } from "./AdCarbon.mjs";
package/Ad/index.mjs DELETED
@@ -1,7 +0,0 @@
1
- /// <reference types="gtag.js" />
2
-
3
- export * from "./Ad.mjs";
4
- export * from "./AdManager.mjs";
5
- export * from "./AdProvider.mjs";
6
- export * from "./AdGuest.mjs";
7
- export { AdCarbonInline } from "./AdCarbon.mjs";
@@ -1,22 +0,0 @@
1
- import * as React from 'react';
2
- /**
3
- * How to use: spread the handlers to the .MuiCode-root
4
- *
5
- * The html structure should be:
6
- * <div className="MuiCode-root">
7
- * <pre>...</pre>
8
- * <button className="MuiCode-copy">...</button>
9
- * </div>
10
- */
11
- export declare function useCodeCopy(): React.HTMLAttributes<HTMLDivElement>;
12
- interface CodeCopyProviderProps {
13
- children: React.ReactNode;
14
- }
15
- /**
16
- * Place <CodeCopyProvider> at the page level. It will check the keydown event and try to initiate copy click if rootNode exist.
17
- * Any code block inside the tree can set the rootNode when mouse enter to leverage keyboard copy.
18
- */
19
- export declare function CodeCopyProvider({
20
- children
21
- }: CodeCopyProviderProps): import("react/jsx-runtime").JSX.Element;
22
- export {};
@@ -1,172 +0,0 @@
1
- var _InitCodeCopy;
2
- import * as React from 'react';
3
- import { useRouter } from 'next/router';
4
- import clipboardCopy from 'clipboard-copy';
5
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
6
- const CodeBlockContext = /*#__PURE__*/React.createContext({
7
- current: null
8
- });
9
-
10
- /**
11
- * How to use: spread the handlers to the .MuiCode-root
12
- *
13
- * The html structure should be:
14
- * <div className="MuiCode-root">
15
- * <pre>...</pre>
16
- * <button className="MuiCode-copy">...</button>
17
- * </div>
18
- */
19
- export function useCodeCopy() {
20
- const rootNode = React.useContext(CodeBlockContext);
21
- return {
22
- onMouseEnter: event => {
23
- rootNode.current = event.currentTarget;
24
- },
25
- onMouseLeave: event => {
26
- if (rootNode.current === event.currentTarget) {
27
- rootNode.current.querySelector('.MuiCode-copy')?.blur();
28
- rootNode.current = null;
29
- }
30
- },
31
- onFocus: event => {
32
- rootNode.current = event.currentTarget;
33
- },
34
- onBlur: event => {
35
- if (rootNode.current === event.currentTarget) {
36
- rootNode.current = null;
37
- }
38
- }
39
- };
40
- }
41
- function InitCodeCopy() {
42
- const rootNode = React.useContext(CodeBlockContext);
43
- const router = useRouter();
44
- React.useEffect(() => {
45
- let key = 'Ctrl + ';
46
- if (typeof window !== 'undefined') {
47
- const macOS = window.navigator.platform.toUpperCase().includes('MAC');
48
- if (macOS) {
49
- key = '⌘';
50
- }
51
- }
52
- const codeRoots = document.getElementsByClassName('MuiCode-root');
53
- if (codeRoots !== null) {
54
- const listeners = [];
55
- Array.from(codeRoots).forEach(elm => {
56
- const handleMouseEnter = () => {
57
- rootNode.current = elm;
58
- };
59
- elm.addEventListener('mouseenter', handleMouseEnter);
60
- listeners.push(() => elm.removeEventListener('mouseenter', handleMouseEnter));
61
- const handleMouseLeave = () => {
62
- if (rootNode.current === elm) {
63
- rootNode.current.querySelector('.MuiCode-copy')?.blur();
64
- rootNode.current = null;
65
- }
66
- };
67
- elm.addEventListener('mouseleave', handleMouseLeave);
68
- listeners.push(() => elm.removeEventListener('mouseleave', handleMouseLeave));
69
- const handleFocusin = () => {
70
- // use `focusin` because it bubbles from the copy button
71
- rootNode.current = elm;
72
- };
73
- elm.addEventListener('focusin', handleFocusin);
74
- listeners.push(() => elm.removeEventListener('focusin', handleFocusin));
75
- const handleFocusout = () => {
76
- // use `focusout` because it bubbles from the copy button
77
- if (rootNode.current === elm) {
78
- rootNode.current = null;
79
- }
80
- };
81
- elm.addEventListener('focusout', handleFocusout);
82
- listeners.push(() => elm.removeEventListener('focusout', handleFocusout));
83
- async function handleClick(event) {
84
- const trigger = event.currentTarget;
85
- const pre = event.currentTarget?.previousElementSibling;
86
- const textNode = trigger.childNodes[0];
87
- textNode.nodeValue = textNode.textContent?.replace('Copy', 'Copied') || null;
88
- trigger.dataset.copied = 'true';
89
- setTimeout(() => {
90
- if (trigger) {
91
- textNode.nodeValue = textNode.textContent?.replace('Copied', 'Copy') || null;
92
- delete trigger.dataset.copied;
93
- }
94
- }, 2000);
95
- try {
96
- if (pre.textContent) {
97
- await clipboardCopy(pre.textContent);
98
- }
99
- // eslint-disable-next-line no-empty
100
- } catch (error) {}
101
- }
102
- const btn = elm.querySelector('.MuiCode-copy');
103
- if (btn) {
104
- const keyNode = btn.querySelector('.MuiCode-copyKeypress')?.childNodes[1];
105
- if (!keyNode) {
106
- // skip the logic if the btn is not generated from the markdown.
107
- return;
108
- }
109
- keyNode.textContent = keyNode?.textContent?.replace('$key', key) || null;
110
- btn.addEventListener('click', handleClick);
111
- listeners.push(() => btn.removeEventListener('click', handleClick));
112
- }
113
- });
114
- return () => {
115
- listeners.forEach(removeEventListener => {
116
- removeEventListener();
117
- });
118
- };
119
- }
120
- return undefined;
121
- }, [rootNode, router.pathname]);
122
- return null;
123
- }
124
- function hasNativeSelection(element) {
125
- if (window.getSelection()?.toString()) {
126
- return true;
127
- }
128
-
129
- // window.getSelection() returns an empty string in Firefox for selections inside a form element.
130
- // See: https://bugzilla.mozilla.org/show_bug.cgi?id=85686.
131
- // Instead, we can use element.selectionStart that is only defined on form elements.
132
- if (element && (element.selectionEnd || 0) - (element.selectionStart || 0) > 0) {
133
- return true;
134
- }
135
- return false;
136
- }
137
- /**
138
- * Place <CodeCopyProvider> at the page level. It will check the keydown event and try to initiate copy click if rootNode exist.
139
- * Any code block inside the tree can set the rootNode when mouse enter to leverage keyboard copy.
140
- */
141
- export function CodeCopyProvider({
142
- children
143
- }) {
144
- const rootNode = React.useRef(null);
145
- React.useEffect(() => {
146
- document.addEventListener('keydown', event => {
147
- if (!rootNode.current) {
148
- return;
149
- }
150
-
151
- // Skip if user is highlighting a text.
152
- if (hasNativeSelection(event.target)) {
153
- return;
154
- }
155
-
156
- // Skip if it's not a copy keyboard event
157
- if (!((event.ctrlKey || event.metaKey) && String.fromCharCode(event.keyCode) === 'C' && !event.shiftKey && !event.altKey)) {
158
- return;
159
- }
160
- const copyBtn = rootNode.current.querySelector('.MuiCode-copy');
161
- const initialEventAction = copyBtn.getAttribute('data-ga-event-action');
162
- // update the 'data-ga-event-action' on the button to track keyboard interaction
163
- copyBtn.dataset.gaEventAction = initialEventAction?.replace('click', 'keyboard') || 'copy-keyboard';
164
- copyBtn.click(); // let the GA setup in GoogleAnalytics.js do the job
165
- copyBtn.dataset.gaEventAction = initialEventAction; // reset the 'data-ga-event-action' back to initial
166
- });
167
- }, []);
168
- return /*#__PURE__*/_jsxs(CodeBlockContext.Provider, {
169
- value: rootNode,
170
- children: [_InitCodeCopy || (_InitCodeCopy = /*#__PURE__*/_jsx(InitCodeCopy, {})), children]
171
- });
172
- }
@@ -1,4 +0,0 @@
1
- export interface CodeCopyButtonProps {
2
- code: string;
3
- }
4
- export declare function CodeCopyButton(props: CodeCopyButtonProps): import("react/jsx-runtime").JSX.Element;
@@ -1,40 +0,0 @@
1
- var _span, _span2;
2
- import useClipboardCopy from "./useClipboardCopy.mjs";
3
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
4
- export function CodeCopyButton(props) {
5
- const {
6
- code,
7
- ...other
8
- } = props;
9
- const {
10
- copy,
11
- isCopied
12
- } = useClipboardCopy();
13
- // This component is designed to be wrapped in NoSsr
14
- const macOS = window.navigator.platform.toUpperCase().includes('MAC');
15
- const key = macOS ? '⌘' : 'Ctrl + ';
16
- return /*#__PURE__*/_jsx("div", {
17
- className: "MuiCode-copy-container",
18
- children: /*#__PURE__*/_jsxs("button", {
19
- ...other,
20
- "aria-label": "Copy the code",
21
- type: "button",
22
- className: "MuiCode-copy",
23
- onClick: async () => {
24
- // event.stopPropagation();
25
- await copy(code);
26
- },
27
- children: [isCopied ? 'Copied' : 'Copy', /*#__PURE__*/_jsxs("span", {
28
- className: "MuiCode-copyKeypress",
29
- style: {
30
- opacity: isCopied ? 0 : 1
31
- },
32
- children: [_span || (_span = /*#__PURE__*/_jsx("span", {
33
- children: "(or"
34
- })), " ", key, "C", _span2 || (_span2 = /*#__PURE__*/_jsx("span", {
35
- children: ")"
36
- }))]
37
- })]
38
- })
39
- });
40
- }
@@ -1,3 +0,0 @@
1
- export * from "./CodeCopy.mjs";
2
- export * from "./CodeCopyButton.mjs";
3
- export { default as useClipboardCopy } from "./useClipboardCopy.mjs";
@@ -1,3 +0,0 @@
1
- export * from "./CodeCopy.mjs";
2
- export * from "./CodeCopyButton.mjs";
3
- export { default as useClipboardCopy } from "./useClipboardCopy.mjs";
@@ -1,4 +0,0 @@
1
- export default function useClipboardCopy(): {
2
- copy: (text: string) => Promise<void>;
3
- isCopied: boolean;
4
- };
@@ -1,21 +0,0 @@
1
- import * as React from 'react';
2
- import clipboardCopy from 'clipboard-copy';
3
- export default function useClipboardCopy() {
4
- const [isCopied, setIsCopied] = React.useState(false);
5
- const timeout = React.useRef(undefined);
6
- React.useEffect(() => () => {
7
- clearTimeout(timeout.current);
8
- }, []);
9
- const copy = async text => {
10
- await clipboardCopy(text);
11
- setIsCopied(true);
12
- clearTimeout(timeout.current);
13
- timeout.current = setTimeout(() => {
14
- setIsCopied(false);
15
- }, 1200);
16
- };
17
- return {
18
- copy,
19
- isCopied
20
- };
21
- }
@@ -1,8 +0,0 @@
1
- import { MarkdownHeaders } from '@mui/internal-markdown';
2
- export interface ComponentLinkHeaderProps {
3
- design?: boolean;
4
- markdown: {
5
- headers: MarkdownHeaders;
6
- };
7
- }
8
- export declare function ComponentLinkHeader(props: ComponentLinkHeaderProps): import("react/jsx-runtime").JSX.Element;
@@ -1,197 +0,0 @@
1
- var _MarkdownIcon, _ChatRounded, _BundleSizeIcon, _GitHubIcon, _W3CIcon, _MaterialDesignIcon, _li, _li2;
2
- import * as React from 'react';
3
- import { useRouter } from 'next/router';
4
- import Chip from '@mui/material/Chip';
5
- import Tooltip from '@mui/material/Tooltip';
6
- import ChatRounded from '@mui/icons-material/ChatRounded';
7
- import GitHubIcon from '@mui/icons-material/GitHub';
8
- import { styled } from '@mui/material/styles';
9
- import MarkdownIcon from "../svgIcons/MarkdownIcon.mjs";
10
- import SketchIcon from "../svgIcons/SketchIcon.mjs";
11
- import FigmaIcon from "../svgIcons/FigmaIcon.mjs";
12
- import BundleSizeIcon from "../svgIcons/BundleSizeIcon.mjs";
13
- import W3CIcon from "../svgIcons/W3CIcon.mjs";
14
- import MaterialDesignIcon from "../svgIcons/MaterialDesignIcon.mjs";
15
- import { useTranslate } from "../i18n/index.mjs";
16
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
17
- const Root = styled('ul')(({
18
- theme
19
- }) => ({
20
- margin: theme.spacing(2, 0),
21
- padding: 0,
22
- listStyle: 'none',
23
- display: 'flex',
24
- flexWrap: 'wrap',
25
- gap: 8,
26
- '& .MuiChip-root': {
27
- height: 26,
28
- padding: '0 8px',
29
- gap: 6,
30
- '& .MuiChip-label': {
31
- padding: 0
32
- },
33
- '& .MuiChip-iconSmall': {
34
- margin: 0,
35
- fontSize: 14
36
- }
37
- }
38
- }));
39
- const defaultPackageNames = {
40
- 'material-ui': '@mui/material',
41
- 'joy-ui': '@mui/joy',
42
- 'base-ui': '@mui/base',
43
- system: '@mui/system'
44
- };
45
- export function ComponentLinkHeader(props) {
46
- const {
47
- markdown: {
48
- headers
49
- },
50
- design
51
- } = props;
52
- const t = useTranslate();
53
- const router = useRouter();
54
- const packageName = headers.packageName ?? defaultPackageNames[headers.productId] ?? '@mui/material';
55
- return /*#__PURE__*/_jsxs(Root, {
56
- children: [packageName === '@mui/material' && /*#__PURE__*/_jsx("li", {
57
- children: /*#__PURE__*/_jsx(Chip, {
58
- clickable: true,
59
- role: undefined,
60
- component: "a",
61
- size: "small",
62
- variant: "outlined",
63
- href: `${router.pathname}.md`,
64
- icon: _MarkdownIcon || (_MarkdownIcon = /*#__PURE__*/_jsx(MarkdownIcon, {})),
65
- "data-ga-event-category": "ComponentLinkHeader",
66
- "data-ga-event-action": "click",
67
- "data-ga-event-label": "Markdown",
68
- "data-ga-event-split": "0.1",
69
- label: "View as Markdown"
70
- })
71
- }), headers.githubLabel ? /*#__PURE__*/_jsx("li", {
72
- children: /*#__PURE__*/_jsx(Chip, {
73
- clickable: true,
74
- role: undefined,
75
- component: "a",
76
- size: "small",
77
- variant: "outlined",
78
- rel: "nofollow",
79
- href: `${process.env.SOURCE_CODE_REPO}/labels/${encodeURIComponent(headers.githubLabel)}`,
80
- icon: _ChatRounded || (_ChatRounded = /*#__PURE__*/_jsx(ChatRounded, {
81
- color: "primary"
82
- })),
83
- "data-ga-event-category": "ComponentLinkHeader",
84
- "data-ga-event-action": "click",
85
- "data-ga-event-label": t('githubLabel'),
86
- "data-ga-event-split": "0.1",
87
- label: t('githubLabel')
88
- })
89
- }) : null, /*#__PURE__*/_jsx("li", {
90
- children: /*#__PURE__*/_jsx(Tooltip, {
91
- title: t('bundleSizeTooltip'),
92
- describeChild: true,
93
- children: /*#__PURE__*/_jsx(Chip, {
94
- clickable: true,
95
- role: undefined,
96
- component: "a",
97
- size: "small",
98
- variant: "outlined",
99
- rel: "nofollow",
100
- href: `https://bundlephobia.com/package/${packageName}@latest`,
101
- icon: _BundleSizeIcon || (_BundleSizeIcon = /*#__PURE__*/_jsx(BundleSizeIcon, {
102
- color: "primary"
103
- })),
104
- "data-ga-event-category": "ComponentLinkHeader",
105
- "data-ga-event-action": "click",
106
- "data-ga-event-label": t('bundleSize'),
107
- "data-ga-event-split": "0.1",
108
- label: t('bundleSize')
109
- })
110
- })
111
- }), headers.githubSource ? /*#__PURE__*/_jsx("li", {
112
- children: /*#__PURE__*/_jsx(Chip, {
113
- clickable: true,
114
- role: undefined,
115
- component: "a",
116
- size: "small",
117
- variant: "outlined",
118
- rel: "nofollow",
119
- href: `${process.env.SOURCE_CODE_REPO}/tree/v${process.env.LIB_VERSION}/${headers.githubSource}`,
120
- icon: _GitHubIcon || (_GitHubIcon = /*#__PURE__*/_jsx(GitHubIcon, {})),
121
- "data-ga-event-category": "ComponentLinkHeader",
122
- "data-ga-event-action": "click",
123
- "data-ga-event-label": "Source",
124
- "data-ga-event-split": "0.1",
125
- label: "Source"
126
- })
127
- }) : null, headers.waiAria ? /*#__PURE__*/_jsx("li", {
128
- children: /*#__PURE__*/_jsx(Chip, {
129
- clickable: true,
130
- role: undefined,
131
- component: "a",
132
- size: "small",
133
- variant: "outlined",
134
- rel: "nofollow",
135
- href: headers.waiAria,
136
- icon: _W3CIcon || (_W3CIcon = /*#__PURE__*/_jsx(W3CIcon, {
137
- color: "primary"
138
- })),
139
- "data-ga-event-category": "ComponentLinkHeader",
140
- "data-ga-event-action": "click",
141
- "data-ga-event-label": "WAI-ARIA",
142
- "data-ga-event-split": "0.1",
143
- label: "WAI-ARIA"
144
- })
145
- }) : null, headers.materialDesign ? /*#__PURE__*/_jsx("li", {
146
- children: /*#__PURE__*/_jsx(Chip, {
147
- clickable: true,
148
- role: undefined,
149
- component: "a",
150
- size: "small",
151
- variant: "outlined",
152
- rel: "nofollow",
153
- href: headers.materialDesign,
154
- icon: _MaterialDesignIcon || (_MaterialDesignIcon = /*#__PURE__*/_jsx(MaterialDesignIcon, {})),
155
- "data-ga-event-category": "ComponentLinkHeader",
156
- "data-ga-event-action": "click",
157
- "data-ga-event-label": "Material Design",
158
- "data-ga-event-split": "0.1",
159
- label: "Material Design"
160
- })
161
- }) : null, design === false ? null : /*#__PURE__*/_jsxs(React.Fragment, {
162
- children: [_li || (_li = /*#__PURE__*/_jsx("li", {
163
- children: /*#__PURE__*/_jsx(Chip, {
164
- clickable: true,
165
- role: undefined,
166
- component: "a",
167
- size: "small",
168
- variant: "outlined",
169
- rel: "nofollow",
170
- href: "https://mui.com/store/items/figma-react/?utm_source=docs&utm_medium=referral&utm_campaign=component-link-header",
171
- icon: /*#__PURE__*/_jsx(FigmaIcon, {}),
172
- "data-ga-event-category": "ComponentLinkHeader",
173
- "data-ga-event-action": "click",
174
- "data-ga-event-label": "Figma",
175
- "data-ga-event-split": "0.1",
176
- label: "Figma"
177
- })
178
- })), packageName === '@mui/joy' ? null : _li2 || (_li2 = /*#__PURE__*/_jsx("li", {
179
- children: /*#__PURE__*/_jsx(Chip, {
180
- clickable: true,
181
- role: undefined,
182
- component: "a",
183
- size: "small",
184
- variant: "outlined",
185
- rel: "nofollow",
186
- href: "https://mui.com/store/items/sketch-react/?utm_source=docs&utm_medium=referral&utm_campaign=component-link-header",
187
- icon: /*#__PURE__*/_jsx(SketchIcon, {}),
188
- "data-ga-event-category": "ComponentLinkHeader",
189
- "data-ga-event-action": "click",
190
- "data-ga-event-label": "Sketch",
191
- "data-ga-event-split": "0.1",
192
- label: "Sketch"
193
- })
194
- }))]
195
- })]
196
- });
197
- }
@@ -1,2 +0,0 @@
1
- export * from "./ComponentLinkHeader.mjs";
2
- export { ComponentLinkHeader as default } from "./ComponentLinkHeader.mjs";
@@ -1,2 +0,0 @@
1
- export * from "./ComponentLinkHeader.mjs";
2
- export { ComponentLinkHeader as default } from "./ComponentLinkHeader.mjs";
@@ -1,24 +0,0 @@
1
- import * as React from 'react';
2
- import { Translations } from "../i18n/index.mjs";
3
- import { AdConfig } from "../Ad/index.mjs";
4
- export interface DocsConfig {
5
- LANGUAGES: string[];
6
- LANGUAGES_SSR: string[];
7
- LANGUAGES_IN_PROGRESS: string[];
8
- LANGUAGES_IGNORE_PAGES: (pathname: string) => boolean;
9
- }
10
- export interface DocsProviderProps {
11
- config: DocsConfig;
12
- adConfig?: Partial<AdConfig>;
13
- defaultUserLanguage: string;
14
- children?: React.ReactNode;
15
- translations?: Translations;
16
- }
17
- export declare function DocsProvider({
18
- config,
19
- adConfig,
20
- defaultUserLanguage,
21
- translations,
22
- children
23
- }: DocsProviderProps): import("react/jsx-runtime").JSX.Element;
24
- export declare function useDocsConfig(): DocsConfig;
@@ -1,31 +0,0 @@
1
- import * as React from 'react';
2
- import { UserLanguageProvider } from "../i18n/index.mjs";
3
- import { AdProvider } from "../Ad/index.mjs";
4
- import { jsx as _jsx } from "react/jsx-runtime";
5
- const DocsConfigContext = /*#__PURE__*/React.createContext(null);
6
- export function DocsProvider({
7
- config,
8
- adConfig,
9
- defaultUserLanguage,
10
- translations,
11
- children
12
- }) {
13
- return /*#__PURE__*/_jsx(DocsConfigContext.Provider, {
14
- value: config,
15
- children: /*#__PURE__*/_jsx(AdProvider, {
16
- config: adConfig,
17
- children: /*#__PURE__*/_jsx(UserLanguageProvider, {
18
- defaultUserLanguage: defaultUserLanguage,
19
- translations: translations,
20
- children: children
21
- })
22
- })
23
- });
24
- }
25
- export function useDocsConfig() {
26
- const config = React.useContext(DocsConfigContext);
27
- if (!config) {
28
- throw new Error('Could not find docs config context value; please ensure the component is wrapped in a <DocsProvider>');
29
- }
30
- return config;
31
- }
@@ -1 +0,0 @@
1
- export * from "./DocsProvider.mjs";
@@ -1 +0,0 @@
1
- export * from "./DocsProvider.mjs";
@@ -1,14 +0,0 @@
1
- import * as React from 'react';
2
- import { ButtonProps } from '@mui/material/Button';
3
- import { SxProps } from '@mui/material/styles';
4
- export interface HighlightedCodeProps {
5
- code: string;
6
- copyButtonHidden?: boolean;
7
- copyButtonProps?: ButtonProps;
8
- language: string;
9
- parentComponent?: React.ElementType;
10
- plainStyle?: boolean;
11
- preComponent?: React.ElementType;
12
- sx?: SxProps;
13
- }
14
- export declare function HighlightedCode(props: HighlightedCodeProps): import("react/jsx-runtime").JSX.Element;