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

package/CHANGELOG.md

@@ -1,5 +1,57 @@
 # [Versions](https://mui.com/versions/)
 
+## v6.0.0-alpha.14
+
+<!-- generated comparing v6.0.0-alpha.13..next -->
+
+_Jul 3, 2024_
+
+A big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- ✨ Updated Grid v2 to match PigmentGrid (#42742) @DiegoAndai
+
+### `@mui/material@v6.0.0-alpha.14`
+
+#### BREAKING CHANGES
+
+- [Grid] Update Grid props to match PigmentGrid (#42742) @DiegoAndai
+
+  Use the codemod below to migrate the props:
+
+  ```bash
+  npx @mui/codemod@next v6.0.0/grid-v2-props /path/to/folder
+  ```
+
+#### Changes
+
+- [Alert] Add ability to override slot props (#42787) @alexey-kozlenkov
+- [Dialog] Revert incorrect textAlign style removal (#42778) @DiegoAndai
+- [theme] Support `CssVarsTheme` in `responsiveFontSizes` return type (#42786) @jxdp
+
+### Docs
+
+- [material-ui] Add some writing tweaks to v6 migration page (#42623) @danilo-leal
+- [material-ui] Fix issues reported by react-compiler in docs folder (#42830) @sai6855
+- [material-ui] Add some writing tweaks to v6 migration page (#42623) @danilo-leal
+- [base-ui] Fix wrong description for `UseTabParameters.onChange` (#42749) @ohgree
+- Fix 301 MDN redirections @oliviertassinari
+
+### Core
+
+- [core] Bump React to 18.3.1 (#42047) @renovate[bot]
+- [core] Revert lint for `useThemeProps` (#42817) @siriwatknp
+- [core] Remove useIsFocusVisible util (#42467) @DiegoAndai
+- [core] Remove react-test-renderer (#42784) @aarongarciah
+- [core][mui-utils] Remove remaining IE11 references (#42777) @DiegoAndai
+- [code-infra] Move `HighlightedCode` test into `@mui/docs` package (#42835) @LukasTy
+- [code-infra] Cleanup `@mui/docs` usage and legacy re-exports (#42833) @LukasTy
+- [docs-infra] Fix React Compiler ESLint issues in website components (#42566) @aarongarciah
+- [docs-infra] Add batch of design polish (#42823) @danilo-leal
+- [test][mui-utils] Remove usages of deprecated react-dom APIs (#42780) @aarongarciah
+- [test][joy-ui][Autocomplete] Fix spread key error in test (#42775) @aarongarciah
+
+All contributors of this release in alphabetical order: @aarongarciah, @alexey-kozlenkov, @danilo-leal, @DiegoAndai, @Janpot, @jxdp, @LukasTy, @ohgree, @oliviertassinari, @renovate[bot], @sai6855, @siriwatknp
+
 ## v6.0.0-alpha.13
 
 <!-- generated comparing v6.0.0-alpha.12..next -->

package/HighlightedCode/HighlightedCodeWithTabs.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+export declare const CodeTabList: import("@mui/styled-engine").StyledComponent<import("@mui/base/TabsList").TabsListOwnProps & Omit<any, keyof import("@mui/base/TabsList").TabsListOwnProps> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    ownerState: {
+        mounted: boolean;
+        contained?: boolean;
+    };
+}, {}, {}>;
+export declare const CodeTabPanel: import("@mui/styled-engine").StyledComponent<import("@mui/base/TabPanel").TabPanelOwnProps & Omit<any, keyof import("@mui/base/TabPanel").TabPanelOwnProps> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    ownerState: {
+        mounted: boolean;
+        contained?: boolean;
+    };
+}, {}, {}>;
+export declare const CodeTab: import("@mui/styled-engine").StyledComponent<import("@mui/base/Tab").TabOwnProps & Omit<any, keyof import("@mui/base/Tab").TabOwnProps> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    ownerState: {
+        mounted: boolean;
+        contained?: boolean;
+    };
+}, {}, {}>;
+type TabsConfig = {
+    code: string | ((tab: string) => string);
+    language: string;
+    tab: string;
+};
+export declare function HighlightedCodeWithTabs(props: {
+    tabs: Array<TabsConfig>;
+    storageKey?: string;
+} & Record<string, any>): React.JSX.Element;
+export {};

package/HighlightedCode/HighlightedCodeWithTabs.js

@@ -0,0 +1,353 @@
+import * as React from 'react';
+import { styled, alpha } from '@mui/material/styles';
+import { Tabs } from '@mui/base/Tabs';
+import { TabsList as TabsListBase } from '@mui/base/TabsList';
+import { TabPanel as TabPanelBase } from '@mui/base/TabPanel';
+import { Tab as TabBase } from '@mui/base/Tab';
+import useLocalStorageState from '@mui/utils/useLocalStorageState';
+import { HighlightedCode } from './HighlightedCode';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const CodeTabList = styled(TabsListBase)(({
+  theme
+}) => ({
+  display: 'flex',
+  gap: theme.spacing(0.5),
+  borderLeft: '1px solid',
+  borderRight: '1px solid',
+  ...theme.applyDarkStyles({
+    backgroundColor: 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: alpha(theme.palette.grey[50], 0.2)
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !ownerState?.contained,
+    style: {
+      backgroundColor: (theme.vars || theme).palette.primaryDark[900]
+    }
+  }]
+}));
+export const CodeTabPanel = styled(TabPanelBase)({
+  '& 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
+        }
+      }
+    }
+  }]
+});
+export const CodeTab = styled(TabBase)(({
+  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: 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({
+    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
+    }
+  })
+}));
+export function HighlightedCodeWithTabs(props) {
+  const {
+    tabs,
+    storageKey
+  } = props;
+  const availableTabs = React.useMemo(() => tabs.map(({
+    tab
+  }) => tab), [tabs]);
+  const [activeTab, setActiveTab] = useLocalStorageState(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__*/_jsxs(Tabs, {
+    selectionFollowsFocus: true,
+    value: defaultizedActiveTab,
+    onChange: handleChange,
+    children: [/*#__PURE__*/_jsx(CodeTabList, {
+      ownerState: ownerState,
+      children: tabs.map(({
+        tab
+      }) => /*#__PURE__*/_jsx(CodeTab, {
+        ownerState: ownerState,
+        value: tab,
+        children: tab
+      }, tab))
+    }), tabs.map(({
+      tab,
+      language,
+      code
+    }) => /*#__PURE__*/_jsx(CodeTabPanel, {
+      ownerState: ownerState,
+      value: tab,
+      children: /*#__PURE__*/_jsx(HighlightedCode, {
+        language: language || 'bash',
+        code: typeof code === 'function' ? code(tab) : code
+      })
+    }, tab))]
+  });
+}

package/HighlightedCode/index.d.ts

@@ -1 +1,2 @@
 export * from './HighlightedCode';
+export * from './HighlightedCodeWithTabs';

package/HighlightedCode/index.js

@@ -1 +1,2 @@
-export * from './HighlightedCode';
+export * from './HighlightedCode';
+export * from './HighlightedCodeWithTabs';

package/MarkdownElement/MarkdownElement.js

@@ -197,11 +197,13 @@ const Root = styled('div')(({
       marginLeft: 8,
       height: 26,
       width: 26,
-      backgroundColor: `var(--muidocs-palette-primary-50, ${lightTheme.palette.grey[50]})`,
       color: `var(--muidocs-palette-grey-600, ${lightTheme.palette.grey[600]})`,
-      border: '1px solid',
-      borderColor: `var(--muidocs-palette-divider, ${lightTheme.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: alpha(lightTheme.palette.primary[100], 0.4),
         borderColor: `var(--muidocs-palette-primary-100, ${lightTheme.palette.primary[100]})`,
@@ -222,7 +224,7 @@ const Root = 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': {
@@ -548,7 +550,6 @@ const Root = styled('div')(({
     display: 'inline-flex',
     flexDirection: 'row-reverse',
     alignItems: 'center',
-    height: 24,
     padding: theme.spacing(0.5),
     paddingBottom: '5px',
     // optical alignment
@@ -681,9 +682,7 @@ const Root = styled('div')(({
     '& h1, & h2, & h3, & h4, & h5': {
       color: `var(--muidocs-palette-grey-50, ${darkTheme.palette.grey[50]})`,
       '& .anchor-icon, & .comment-link': {
-        color: `var(--muidocs-palette-primary-300, ${darkTheme.palette.primaryDark[300]})`,
-        borderColor: `var(--muidocs-palette-divider, ${darkTheme.palette.divider})`,
-        backgroundColor: alpha(darkTheme.palette.primaryDark[700], 0.5),
+        color: `var(--muidocs-palette-primary-300, ${darkTheme.palette.primaryDark[400]})`,
         '&:hover': {
           color: `var(--muidocs-palette-primary-100, ${darkTheme.palette.primary[100]})`,
           borderColor: `var(--muidocs-palette-primary-900, ${darkTheme.palette.primary[900]})`,

package/branding/BrandingProvider.d.ts

@@ -4,6 +4,6 @@ export interface BrandingProviderProps {
     /**
      * If not `undefined`, the provider is considered nesting and does not render NextNProgressBar & CssBaseline
      */
-    mode: 'light' | 'dark';
+    mode?: 'light' | 'dark';
 }
 export declare function BrandingProvider(props: BrandingProviderProps): React.JSX.Element;