add "Open in new tab" button in demo toolbar

Author: cherniavskii

docs/src/modules/components/DemoToolbar.js

@@ -19,6 +19,7 @@ import Tooltip from '@mui/material/Tooltip';
 import Divider from '@mui/material/Divider';
 import RefreshRoundedIcon from '@mui/icons-material/RefreshRounded';
 import ResetFocusIcon from '@mui/icons-material/CenterFocusWeak';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 import { useRouter } from 'next/router';
 import { CODE_VARIANTS, CODE_STYLING } from 'docs/src/modules/constants';
 import { useSetCodeVariant } from 'docs/src/modules/utils/codeVariant';
@@ -563,6 +564,23 @@ export default function DemoToolbar(props) {
               </DemoTooltip>
             </React.Fragment>
           )}
+          <DemoTooltip title={t('openInNewTab')} placement="bottom">
+            <IconButton
+              data-ga-event-category="demo"
+              data-ga-event-label={demo.gaLabel}
+              data-ga-event-action="openInNewTab"
+              onClick={() => {
+                const url = new URL(window.location.href);
+                url.hash = '';
+                url.searchParams.set('scopedDemo', demoOptions.demo);
+                window.open(url.toString(), '_blank');
+              }}
+              {...getControlProps(5)}
+              sx={{ borderRadius: 1 }}
+            >
+              <OpenInNewIcon />
+            </IconButton>
+          </DemoTooltip>
           <DemoTooltip title={t('copySource')} placement="bottom">
             <IconButton
               data-ga-event-category="demo"

packages/mui-docs/src/translations/translations.json

@@ -150,6 +150,7 @@
   "mainNavigation": "documentation",
   "newest": "Newest",
   "openDrawer": "Open documentation navigation",
+  "openInNewTab": "Open in new tab",
   "or": "or",
   "pageTOC": "Page table of contents",
   "praise": "Praise for MUI",