@mui/docs 6.0.0-dev.240424162023-9968b4889d → 6.0.0

package/node/HighlightedCode/HighlightedCode.js

@@ -5,41 +5,67 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.HighlightedCode = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _prism = _interopRequireDefault(require("@mui/internal-markdown/prism"));
 var _NoSsr = require("@mui/base/NoSsr");
+var _styles = require("@mui/material/styles");
 var _CodeCopy = require("../CodeCopy");
 var _MarkdownElement = require("../MarkdownElement");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["copyButtonHidden", "copyButtonProps", "code", "language", "component"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const Pre = (0, _styles.styled)('pre')(({
+  theme
+}) => ({
+  margin: 0,
+  color: 'hsl(60deg 30% 96.08%)',
+  // fallback color until Prism's theme is loaded
+  WebkitOverflowScrolling: 'touch',
+  // iOS momentum scrolling.
+  maxWidth: 'calc(100vw - 32px)',
+  [theme.breakpoints.up('md')]: {
+    maxWidth: 'calc(100vw - 32px - 16px)'
+  },
+  '& code': {
+    // Avoid layout jump after hydration (style injected by Prism)
+    ...theme.typography.caption,
+    fontFamily: theme.typography.fontFamilyCode,
+    fontWeight: 400,
+    WebkitFontSmoothing: 'subpixel-antialiased'
+    // Reset for Safari
+    // https://github.com/necolas/normalize.css/blob/master/normalize.css#L102
+  }
+}));
 const HighlightedCode = exports.HighlightedCode = /*#__PURE__*/React.forwardRef(function HighlightedCode(props, ref) {
   const {
-      copyButtonHidden = false,
-      copyButtonProps,
-      code,
-      language,
-      component: Component = _MarkdownElement.MarkdownElement
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+    code,
+    copyButtonHidden = false,
+    copyButtonProps,
+    language,
+    plainStyle,
+    parentComponent: Component = plainStyle ? React.Fragment : _MarkdownElement.MarkdownElement,
+    preComponent: PreComponent = plainStyle ? Pre : 'pre',
+    ...other
+  } = props;
   const renderedCode = React.useMemo(() => {
     return (0, _prism.default)(code.trim(), language);
   }, [code, language]);
   const handlers = (0, _CodeCopy.useCodeCopy)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, (0, _extends2.default)({
-    ref: ref
-  }, other, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({
-      className: "MuiCode-root"
-    }, handlers, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
+    ref: ref,
+    ...other,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "MuiCode-root",
+      ...handlers,
+      style: {
+        height: '100%'
+      },
       children: [copyButtonHidden ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_NoSsr.NoSsr, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CodeCopy.CodeCopyButton, (0, _extends2.default)({
-          code: code
-        }, copyButtonProps))
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("pre", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CodeCopy.CodeCopyButton, {
+          code: code,
+          ...copyButtonProps
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(PreComponent, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
           className: `language-${language}`
           // eslint-disable-next-line react/no-danger
@@ -49,6 +75,6 @@ const HighlightedCode = exports.HighlightedCode = /*#__PURE__*/React.forwardRef(
           }
         })
       })]
-    }))
-  }));
+    })
+  });
 });

package/node/HighlightedCodeWithTabs/HighlightedCodeWithTabs.js

@@ -0,0 +1,365 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CodeTabPanel = exports.CodeTabList = exports.CodeTab = void 0;
+exports.HighlightedCodeWithTabs = HighlightedCodeWithTabs;
+var React = _interopRequireWildcard(require("react"));
+var _styles = require("@mui/material/styles");
+var _Tabs = require("@mui/base/Tabs");
+var _TabsList = require("@mui/base/TabsList");
+var _TabPanel = require("@mui/base/TabPanel");
+var _Tab = require("@mui/base/Tab");
+var _useLocalStorageState = _interopRequireDefault(require("@mui/utils/useLocalStorageState"));
+var _HighlightedCode = require("../HighlightedCode");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const CodeTabList = exports.CodeTabList = (0, _styles.styled)(_TabsList.TabsList)(({
+  theme
+}) => ({
+  display: 'flex',
+  gap: theme.spacing(0.5),
+  borderLeft: '1px solid',
+  borderRight: '1px solid',
+  overflowX: 'auto',
+  ...theme.applyDarkStyles({
+    backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[800], 0.2)
+  }),
+  variants: [{
+    props: ({
+      ownerState
+    }) => ownerState?.contained,
+    style: {
+      padding: theme.spacing(1.5, 1)
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !ownerState?.contained,
+    style: {
+      padding: theme.spacing(1)
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState?.contained,
+    style: {
+      borderTop: 'none'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !ownerState?.contained,
+    style: {
+      borderTop: '1px solid'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState?.contained,
+    style: {
+      borderBottom: 'none'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !ownerState?.contained,
+    style: {
+      borderBottom: '1px solid'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState?.contained,
+    style: {
+      borderTopLeftRadius: 0
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !ownerState?.contained,
+    style: {
+      borderTopLeftRadius: (theme.vars || theme).shape.borderRadius
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState?.contained,
+    style: {
+      borderTopRightRadius: 0
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !ownerState?.contained,
+    style: {
+      borderTopRightRadius: (theme.vars || theme).shape.borderRadius
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState?.contained,
+    style: {
+      borderColor: (theme.vars || theme).palette.divider
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !ownerState?.contained,
+    style: {
+      borderColor: (theme.vars || theme).palette.primaryDark[700]
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState?.contained,
+    style: {
+      backgroundColor: (0, _styles.alpha)(theme.palette.grey[50], 0.2)
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !ownerState?.contained,
+    style: {
+      backgroundColor: (theme.vars || theme).palette.primaryDark[900]
+    }
+  }]
+}));
+const CodeTabPanel = exports.CodeTabPanel = (0, _styles.styled)(_TabPanel.TabPanel)({
+  '& pre': {
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0,
+    '& code': {}
+  },
+  variants: [{
+    props: ({
+      ownerState
+    }) => ownerState?.contained,
+    style: {
+      marginTop: -1
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !ownerState?.contained,
+    style: {
+      marginTop: 0
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState?.contained,
+    style: {
+      '& pre': {
+        marginTop: 0
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !ownerState?.contained,
+    style: {
+      '& pre': {
+        marginTop: -1
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.mounted,
+    style: {
+      '& pre': {
+        '& code': {
+          opacity: 1
+        }
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !ownerState.mounted,
+    style: {
+      '& pre': {
+        '& code': {
+          opacity: 0
+        }
+      }
+    }
+  }]
+});
+const CodeTab = exports.CodeTab = (0, _styles.styled)(_Tab.Tab)(({
+  theme
+}) => ({
+  variants: [{
+    props: ({
+      ownerState
+    }) => ownerState?.contained,
+    style: {
+      border: '1px solid transparent',
+      fontSize: theme.typography.pxToRem(13)
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !ownerState?.contained,
+    style: {
+      border: 'none',
+      fontSize: theme.typography.pxToRem(12)
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState?.contained,
+    style: {
+      color: (theme.vars || theme).palette.text.tertiary
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !ownerState?.contained,
+    style: {
+      color: (theme.vars || theme).palette.grey[500]
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState?.contained,
+    style: {
+      fontFamily: theme.typography.fontFamily
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !ownerState?.contained,
+    style: {
+      fontFamily: theme.typography.fontFamilyCode
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState?.contained,
+    style: {
+      fontWeight: theme.typography.fontWeightMedium
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !ownerState?.contained,
+    style: {
+      fontWeight: theme.typography.fontWeightBold
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState?.contained,
+    style: {
+      transition: 'background, color, 100ms ease'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !ownerState?.contained,
+    style: {
+      transition: 'unset'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !ownerState?.contained,
+    style: {
+      '&:hover': {
+        backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[500], 0.5),
+        color: (theme.vars || theme).palette.grey[400]
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !ownerState?.contained && ownerState.mounted,
+    style: {
+      '&.base--selected': {
+        color: '#FFF',
+        '&::after': {
+          content: "''",
+          position: 'absolute',
+          left: 0,
+          bottom: '-8px',
+          height: 2,
+          width: '100%',
+          bgcolor: (theme.vars || theme).palette.primary.light
+        }
+      }
+    }
+  }],
+  ...theme.unstable_sx({
+    flex: '0 0 auto',
+    height: 26,
+    p: '2px 8px',
+    bgcolor: 'transparent',
+    lineHeight: 1.2,
+    outline: 'none',
+    minWidth: 45,
+    cursor: 'pointer',
+    borderRadius: 99,
+    position: 'relative',
+    '&:hover': {
+      backgroundColor: (theme.vars || theme).palette.divider
+    },
+    '&:focus-visible': {
+      outline: '3px solid',
+      outlineOffset: '1px',
+      outlineColor: (theme.vars || theme).palette.primary.light
+    }
+  })
+}));
+function HighlightedCodeWithTabs(props) {
+  const {
+    tabs,
+    storageKey
+  } = props;
+  const availableTabs = React.useMemo(() => tabs.map(({
+    tab
+  }) => tab), [tabs]);
+  const [activeTab, setActiveTab] = (0, _useLocalStorageState.default)(storageKey ?? null, availableTabs[0]);
+  // During hydration, activeTab is null, default to first value.
+  const defaultizedActiveTab = activeTab ?? availableTabs[0];
+  const [mounted, setMounted] = React.useState(false);
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+  const handleChange = (event, newValue) => {
+    setActiveTab(newValue);
+  };
+  const ownerState = {
+    mounted
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Tabs.Tabs, {
+    selectionFollowsFocus: true,
+    value: defaultizedActiveTab,
+    onChange: handleChange,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(CodeTabList, {
+      ownerState: ownerState,
+      children: tabs.map(({
+        tab
+      }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(CodeTab, {
+        ownerState: ownerState,
+        value: tab,
+        children: tab
+      }, tab))
+    }), tabs.map(({
+      tab,
+      language,
+      code
+    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(CodeTabPanel, {
+      ownerState: ownerState,
+      value: tab,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_HighlightedCode.HighlightedCode, {
+        language: language || 'bash',
+        code: typeof code === 'function' ? code(tab) : code
+      })
+    }, tab))]
+  });
+}

package/node/HighlightedCodeWithTabs/index.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _HighlightedCodeWithTabs.HighlightedCodeWithTabs;
+  }
+});
+var _HighlightedCodeWithTabs = require("./HighlightedCodeWithTabs");
+Object.keys(_HighlightedCodeWithTabs).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _HighlightedCodeWithTabs[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _HighlightedCodeWithTabs[key];
+    }
+  });
+});

package/node/InfoCard/InfoCard.js

@@ -6,8 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.GlowingIconContainer = GlowingIconContainer;
 exports.InfoCard = InfoCard;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _styles = require("@mui/material/styles");
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
@@ -15,16 +13,15 @@ var _Paper = _interopRequireDefault(require("@mui/material/Paper"));
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 var _Link = require("../Link");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["classNameDescription", "classNameTitle", "dense", "description", "icon", "link", "svg", "title", "titleProps"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function GlowingIconContainer({
   icon
 }) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
-    sx: theme => (0, _extends2.default)({
-      width: 40,
-      height: 40,
+    sx: theme => ({
+      width: 36,
+      height: 36,
       display: 'flex',
       justifyContent: 'center',
       alignItems: 'center',
@@ -33,64 +30,68 @@ function GlowingIconContainer({
       border: '1px solid',
       borderColor: 'primary.200',
       bgcolor: 'primary.50',
-      boxShadow: `0px 0 0 2px ${(0, _styles.alpha)(theme.palette.primary[500], 0.1)}, 0px 2px 12px 0px rgba(234, 237, 241, 0.3) inset`
-    }, theme.applyDarkStyles({
-      borderColor: (0, _styles.alpha)(theme.palette.primary[400], 0.25),
-      bgcolor: (0, _styles.alpha)(theme.palette.primary[900], 0.4),
-      boxShadow: `0 0 0 2px ${(0, _styles.alpha)(theme.palette.primary[600], 0.1)}, 0px 2px 12px 0px rgba(0, 0, 0, 0.25) inset`
-    })),
+      boxShadow: `0px 0 0 2px ${(0, _styles.alpha)(theme.palette.primary[500], 0.1)}, 0px 2px 12px 0px rgba(234, 237, 241, 0.3) inset`,
+      '& .MuiSvgIcon-root': {
+        fontSize: theme.typography.pxToRem(18)
+      },
+      ...theme.applyDarkStyles({
+        borderColor: (0, _styles.alpha)(theme.palette.primary[400], 0.25),
+        bgcolor: (0, _styles.alpha)(theme.palette.primary[900], 0.2),
+        boxShadow: `0 0 0 2px ${(0, _styles.alpha)(theme.palette.primary[600], 0.1)}, 0px 2px 12px 0px rgba(0, 0, 0, 0.25) inset`
+      })
+    }),
     children: icon
   });
 }
 function InfoCard(props) {
   const {
-      classNameDescription,
-      classNameTitle,
-      dense,
-      description,
-      icon,
-      link,
-      svg,
-      title,
-      titleProps
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Paper.default, (0, _extends2.default)({
+    classNameDescription,
+    classNameTitle,
+    description,
+    icon,
+    link,
+    svg,
+    title,
+    titleProps,
+    ...other
+  } = props;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Paper.default, {
     variant: "outlined",
     component: link ? _Link.Link : 'div',
-    href: link
-  }, link ? {
-    noLinkStyle: true,
-    // Fix overloading with prefetch={false}, only prefetch on hover.
-    prefetch: false
-  } : {}, {
-    sx: theme => (0, _extends2.default)({
-      p: dense ? 2.5 : 3.5,
+    href: link,
+    ...(link ? {
+      noLinkStyle: true,
+      // Fix overloading with prefetch={false}, only prefetch on hover.
+      prefetch: false
+    } : {}),
+    sx: theme => ({
+      p: 2.5,
       height: '100%',
-      background: `${(theme.vars || theme).palette.gradients.linearSubtle}`
-    }, theme.applyDarkStyles({
-      bgcolor: (0, _styles.alpha)(theme.palette.primaryDark[800], 0.25),
       background: `${(theme.vars || theme).palette.gradients.linearSubtle}`,
-      borderColor: 'primaryDark.700'
-    }))
-  }, other, {
+      ...theme.applyDarkStyles({
+        bgcolor: (0, _styles.alpha)(theme.palette.primaryDark[800], 0.25),
+        background: `${(theme.vars || theme).palette.gradients.linearSubtle}`,
+        borderColor: 'primaryDark.700'
+      })
+    }),
+    ...other,
     children: [svg && svg, icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(GlowingIconContainer, {
       icon: icon
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, (0, _extends2.default)({
-      fontWeight: "bold",
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+      fontWeight: "semiBold",
       component: "h3",
       color: "text.primary",
       variant: "body2",
       mt: icon ? 2 : 0,
       mb: description ? 0.5 : 0,
-      className: classNameTitle
-    }, titleProps, {
+      className: classNameTitle,
+      ...titleProps,
       children: title
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
       variant: "body2",
       color: "text.secondary",
       className: classNameDescription,
       children: description
     })]
-  }));
+  });
 }