@mui/docs 6.0.0-alpha.13 → 6.0.0-alpha.14

package/node/HighlightedCode/HighlightedCodeWithTabs.js

@@ -0,0 +1,363 @@
+"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',
+  ...theme.applyDarkStyles({
+    backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[800], 0.2)
+  }),
+  variants: [{
+    props: ({
+      ownerState
+    }) => ownerState == null ? void 0 : ownerState.contained,
+    style: {
+      padding: theme.spacing(1.5, 1)
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !(ownerState != null && ownerState.contained),
+    style: {
+      padding: theme.spacing(1)
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState == null ? void 0 : ownerState.contained,
+    style: {
+      borderTop: 'none'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !(ownerState != null && ownerState.contained),
+    style: {
+      borderTop: '1px solid'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState == null ? void 0 : ownerState.contained,
+    style: {
+      borderBottom: 'none'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !(ownerState != null && ownerState.contained),
+    style: {
+      borderBottom: '1px solid'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState == null ? void 0 : ownerState.contained,
+    style: {
+      borderTopLeftRadius: 0
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !(ownerState != null && ownerState.contained),
+    style: {
+      borderTopLeftRadius: (theme.vars || theme).shape.borderRadius
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState == null ? void 0 : ownerState.contained,
+    style: {
+      borderTopRightRadius: 0
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !(ownerState != null && ownerState.contained),
+    style: {
+      borderTopRightRadius: (theme.vars || theme).shape.borderRadius
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState == null ? void 0 : ownerState.contained,
+    style: {
+      borderColor: (theme.vars || theme).palette.divider
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !(ownerState != null && ownerState.contained),
+    style: {
+      borderColor: (theme.vars || theme).palette.primaryDark[700]
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState == null ? void 0 : ownerState.contained,
+    style: {
+      backgroundColor: (0, _styles.alpha)(theme.palette.grey[50], 0.2)
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !(ownerState != null && 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 == null ? void 0 : ownerState.contained,
+    style: {
+      marginTop: -1
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !(ownerState != null && ownerState.contained),
+    style: {
+      marginTop: 0
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState == null ? void 0 : ownerState.contained,
+    style: {
+      '& pre': {
+        marginTop: 0
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !(ownerState != null && 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 == null ? void 0 : ownerState.contained,
+    style: {
+      border: '1px solid transparent',
+      fontSize: theme.typography.pxToRem(13)
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !(ownerState != null && ownerState.contained),
+    style: {
+      border: 'none',
+      fontSize: theme.typography.pxToRem(12)
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState == null ? void 0 : ownerState.contained,
+    style: {
+      color: (theme.vars || theme).palette.text.tertiary
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !(ownerState != null && ownerState.contained),
+    style: {
+      color: (theme.vars || theme).palette.grey[500]
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState == null ? void 0 : ownerState.contained,
+    style: {
+      fontFamily: theme.typography.fontFamily
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !(ownerState != null && ownerState.contained),
+    style: {
+      fontFamily: theme.typography.fontFamilyCode
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState == null ? void 0 : ownerState.contained,
+    style: {
+      fontWeight: theme.typography.fontWeightMedium
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !(ownerState != null && ownerState.contained),
+    style: {
+      fontWeight: theme.typography.fontWeightBold
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState == null ? void 0 : ownerState.contained,
+    style: {
+      transition: 'background, color, 100ms ease'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !(ownerState != null && ownerState.contained),
+    style: {
+      transition: 'unset'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !(ownerState != null && ownerState.contained),
+    style: {
+      '&:hover': {
+        backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[500], 0.5),
+        color: (theme.vars || theme).palette.grey[400]
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !(ownerState != null && 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({
+    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 ? storageKey : null, availableTabs[0]);
+  // During hydration, activeTab is null, default to first value.
+  const defaultizedActiveTab = activeTab != null ? 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/HighlightedCode/index.js

@@ -13,4 +13,15 @@ Object.keys(_HighlightedCode).forEach(function (key) {
       return _HighlightedCode[key];
     }
   });
+});
+var _HighlightedCodeWithTabs = require("./HighlightedCodeWithTabs");
+Object.keys(_HighlightedCodeWithTabs).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _HighlightedCodeWithTabs[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _HighlightedCodeWithTabs[key];
+    }
+  });
 });

package/node/MarkdownElement/MarkdownElement.js

@@ -208,11 +208,13 @@ const Root = (0, _styles.styled)('div')(({
         marginLeft: 8,
         height: 26,
         width: 26,
-        backgroundColor: `var(--muidocs-palette-primary-50, ${_branding.brandingLightTheme.palette.grey[50]})`,
         color: `var(--muidocs-palette-grey-600, ${_branding.brandingLightTheme.palette.grey[600]})`,
-        border: '1px solid',
-        borderColor: `var(--muidocs-palette-divider, ${_branding.brandingLightTheme.palette.divider})`,
+        backgroundColor: 'transparent',
+        border: '1px solid transparent',
         borderRadius: 8,
+        transition: theme.transitions.create(['visibility', 'background-color', 'color', 'border-color'], {
+          duration: theme.transitions.duration.shortest
+        }),
         '&:hover': {
           backgroundColor: (0, _styles.alpha)(_branding.brandingLightTheme.palette.primary[100], 0.4),
           borderColor: `var(--muidocs-palette-primary-100, ${_branding.brandingLightTheme.palette.primary[100]})`,
@@ -233,7 +235,7 @@ const Root = (0, _styles.styled)('div')(({
         display: 'none',
         // So we can have the comment button opt-in.
         marginLeft: 'auto',
-        transition: theme.transitions.create('opacity', {
+        transition: theme.transitions.create(['background-color', 'color', 'border-color'], {
           duration: theme.transitions.duration.shortest
         }),
         '& svg': {
@@ -559,7 +561,6 @@ const Root = (0, _styles.styled)('div')(({
       display: 'inline-flex',
       flexDirection: 'row-reverse',
       alignItems: 'center',
-      height: 24,
       padding: theme.spacing(0.5),
       paddingBottom: '5px',
       // optical alignment
@@ -693,9 +694,7 @@ const Root = (0, _styles.styled)('div')(({
     '& h1, & h2, & h3, & h4, & h5': {
       color: `var(--muidocs-palette-grey-50, ${_branding.brandingDarkTheme.palette.grey[50]})`,
       '& .anchor-icon, & .comment-link': {
-        color: `var(--muidocs-palette-primary-300, ${_branding.brandingDarkTheme.palette.primaryDark[300]})`,
-        borderColor: `var(--muidocs-palette-divider, ${_branding.brandingDarkTheme.palette.divider})`,
-        backgroundColor: (0, _styles.alpha)(_branding.brandingDarkTheme.palette.primaryDark[700], 0.5),
+        color: `var(--muidocs-palette-primary-300, ${_branding.brandingDarkTheme.palette.primaryDark[400]})`,
         '&:hover': {
           color: `var(--muidocs-palette-primary-100, ${_branding.brandingDarkTheme.palette.primary[100]})`,
           borderColor: `var(--muidocs-palette-primary-900, ${_branding.brandingDarkTheme.palette.primary[900]})`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/docs",
-  "version": "6.0.0-alpha.13",
+  "version": "6.0.0-alpha.14",
   "private": false,
   "author": "MUI Team",
   "description": "MUI Docs - Documentation building blocks.",
@@ -28,7 +28,7 @@
     "clsx": "^2.1.1",
     "nprogress": "^0.2.0",
     "prop-types": "^15.8.1",
-    "@mui/internal-markdown": "^1.0.6"
+    "@mui/internal-markdown": "^1.0.7"
   },
   "peerDependencies": {
     "@mui/base": "*",
@@ -36,6 +36,7 @@
     "@mui/material": "^5.0.0",
     "@mui/system": "^5.0.0",
     "@types/react": "^17.0.0 || ^18.0.0",
+    "chai": "^4.4.1",
     "next": "^13.5.1 || ^14",
     "react": "^17.0.0 || ^18.0.0"
   },