From a2ef8a6d0dd52f067d0b3afa3817011454355917 Mon Sep 17 00:00:00 2001
From: Zeeshan Tamboli <zeeshan.tamboli@gmail.com>
Date: Thu, 17 Aug 2023 19:57:55 +0530
Subject: [PATCH] [docs-infra] Cleanup code on demo code block expansion
 (#38522)

---
 docs/src/modules/components/Demo.js        | 14 +--------
 docs/src/modules/components/DemoToolbar.js | 36 +---------------------
 2 files changed, 2 insertions(+), 48 deletions(-)

diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js
index 5c452730126744..f05635225ba5e6 100644
--- a/docs/src/modules/components/Demo.js
+++ b/docs/src/modules/components/Demo.js
@@ -412,11 +412,6 @@ export default function Demo(props) {
 
   const hasNonSystemDemos = demo.rawTailwind || demo.rawTailwindTS || demo.rawCSS || demo.rawCSSTs;
 
-  const [demoHovered, setDemoHovered] = React.useState(false);
-  const handleDemoHover = (event) => {
-    setDemoHovered(event.type === 'mouseenter');
-  };
-
   const demoName = getDemoName(demoData.githubLocation);
   const demoSandboxedStyle = React.useMemo(
     () => ({
@@ -513,13 +508,7 @@ export default function Demo(props) {
   return (
     <Root>
       <AnchorLink id={demoName} />
-      <DemoRoot
-        hideToolbar={demoOptions.hideToolbar}
-        bg={demoOptions.bg}
-        id={demoId}
-        onMouseEnter={handleDemoHover}
-        onMouseLeave={handleDemoHover}
-      >
+      <DemoRoot hideToolbar={demoOptions.hideToolbar} bg={demoOptions.bg} id={demoId}>
         <Wrapper {...(demoData.productId === 'joy-ui' && { mode })}>
           <InitialFocus
             aria-label={t('initialFocusLabel')}
@@ -558,7 +547,6 @@ export default function Demo(props) {
                   hasNonSystemDemos={hasNonSystemDemos}
                   demo={demo}
                   demoData={demoData}
-                  demoHovered={demoHovered}
                   demoId={demoId}
                   demoName={demoName}
                   demoOptions={demoOptions}
diff --git a/docs/src/modules/components/DemoToolbar.js b/docs/src/modules/components/DemoToolbar.js
index df9b9b00ad3032..3966f125fcfd3f 100644
--- a/docs/src/modules/components/DemoToolbar.js
+++ b/docs/src/modules/components/DemoToolbar.js
@@ -4,7 +4,6 @@ import copy from 'clipboard-copy';
 import { useTheme, styled, alpha } from '@mui/material/styles';
 import IconButton from '@mui/material/IconButton';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import useMediaQuery from '@mui/material/useMediaQuery';
 import CheckIcon from '@mui/icons-material/Check';
 import Fade from '@mui/material/Fade';
 import MDButton from '@mui/material/Button';
@@ -22,7 +21,6 @@ import RefreshRoundedIcon from '@mui/icons-material/RefreshRounded';
 import ResetFocusIcon from '@mui/icons-material/CenterFocusWeak';
 import ContentCopyRoundedIcon from '@mui/icons-material/ContentCopyRounded';
 import { useRouter } from 'next/router';
-import { getCookie } from 'docs/src/modules/utils/helpers';
 import { CODE_VARIANTS, CODE_STYLING } from 'docs/src/modules/constants';
 import { useSetCodeVariant } from 'docs/src/modules/utils/codeVariant';
 import { useSetCodeStyling, useCodeStyling } from 'docs/src/modules/utils/codeStylingSolution';
@@ -65,24 +63,6 @@ function DemoTooltip(props) {
   );
 }
 
-function ToggleCodeTooltip(props) {
-  const { showSourceHint, ...other } = props;
-  const atLeastSmallViewport = useMediaQuery((theme) => theme.breakpoints.up('sm'));
-  const [open, setOpen] = React.useState(false);
-
-  return (
-    <DemoTooltip
-      {...other}
-      onClose={() => setOpen(false)}
-      onOpen={() => setOpen(true)}
-      open={showSourceHint && atLeastSmallViewport ? true : open}
-    />
-  );
-}
-ToggleCodeTooltip.propTypes = {
-  showSourceHint: PropTypes.bool,
-};
-
 const alwaysTrue = () => true;
 
 const ToggleButtonGroup = styled(MDToggleButtonGroup)(({ theme }) => [
@@ -297,7 +277,6 @@ export default function DemoToolbar(props) {
     demo,
     demoData,
     demoId,
-    demoHovered,
     demoName,
     demoOptions,
     demoSourceId,
@@ -365,21 +344,10 @@ export default function DemoToolbar(props) {
     }
   };
 
-  const [sourceHintSeen, setSourceHintSeen] = React.useState(false);
-  React.useEffect(() => {
-    setSourceHintSeen(getCookie('sourceHintSeen'));
-  }, []);
-  const handleCodeOpenClick = () => {
-    document.cookie = `sourceHintSeen=true;path=/;max-age=31536000`;
-    onCodeOpenChange();
-    setSourceHintSeen(true);
-  };
-
   const handleResetFocusClick = () => {
     initialFocusRef.current.focusVisible();
   };
 
-  const showSourceHint = demoHovered && !sourceHintSeen;
   let showCodeLabel;
   if (codeOpen) {
     showCodeLabel = showPreview ? t('hideFullSource') : t('hideSource');
@@ -561,8 +529,7 @@ export default function DemoToolbar(props) {
             data-ga-event-category="demo"
             data-ga-event-label={demo.gaLabel}
             data-ga-event-action="expand"
-            onClick={handleCodeOpenClick}
-            showSourceHint={showSourceHint}
+            onClick={onCodeOpenChange}
             {...getControlProps(3)}
           >
             {showCodeLabel}
@@ -757,7 +724,6 @@ DemoToolbar.propTypes = {
   codeVariant: PropTypes.string.isRequired,
   demo: PropTypes.object.isRequired,
   demoData: PropTypes.object.isRequired,
-  demoHovered: PropTypes.bool.isRequired,
   demoId: PropTypes.string,
   demoName: PropTypes.string.isRequired,
   demoOptions: PropTypes.object.isRequired,