From 05bce52ea1cd085034e638ad2e5b6e6c49039d18 Mon Sep 17 00:00:00 2001
From: Varun Mulay <35381801+varunmulay22@users.noreply.github.com>
Date: Fri, 28 Apr 2023 15:17:27 +0530
Subject: [PATCH]  [docs][base] Move styles to the bottom of demos code for
 `Snackbar` (#36719)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Michał Dudak <michal@dudak.me>
---
 .../snackbar/TransitionComponentSnackbar.js   | 152 +++++++++---------
 .../snackbar/TransitionComponentSnackbar.tsx  | 152 +++++++++---------
 .../components/snackbar/UnstyledSnackbar.js   |  54 +++----
 .../components/snackbar/UnstyledSnackbar.tsx  |  54 +++----
 .../base/components/snackbar/UseSnackbar.js   |  62 +++----
 .../base/components/snackbar/UseSnackbar.tsx  |  62 +++----
 6 files changed, 268 insertions(+), 268 deletions(-)

diff --git a/docs/data/base/components/snackbar/TransitionComponentSnackbar.js b/docs/data/base/components/snackbar/TransitionComponentSnackbar.js
index 13f40dd565c597..b9b207cbc92904 100644
--- a/docs/data/base/components/snackbar/TransitionComponentSnackbar.js
+++ b/docs/data/base/components/snackbar/TransitionComponentSnackbar.js
@@ -5,6 +5,82 @@ import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
 import CloseIcon from '@mui/icons-material/Close';
 import Snackbar from '@mui/base/Snackbar';
 
+export default function TransitionComponentSnackbar() {
+  const [open, setOpen] = React.useState(false);
+  const [exited, setExited] = React.useState(true);
+  const nodeRef = React.useRef(null);
+
+  const handleClose = (_, reason) => {
+    if (reason === 'clickaway') {
+      return;
+    }
+
+    setOpen(false);
+  };
+
+  const handleClick = () => {
+    setOpen(true);
+  };
+
+  const handleOnEnter = () => {
+    setExited(false);
+  };
+
+  const handleOnExited = () => {
+    setExited(true);
+  };
+
+  return (
+    <React.Fragment>
+      <button type="button" onClick={handleClick}>
+        Open snackbar
+      </button>
+      <StyledSnackbar
+        autoHideDuration={5000}
+        open={open}
+        onClose={handleClose}
+        exited={exited}
+      >
+        <Transition
+          timeout={{ enter: 400, exit: 400 }}
+          in={open}
+          appear
+          unmountOnExit
+          onEnter={handleOnEnter}
+          onExited={handleOnExited}
+          nodeRef={nodeRef}
+        >
+          {(status) => (
+            <SnackbarContent
+              style={{
+                transform: positioningStyles[status],
+                transition: 'transform 300ms ease',
+              }}
+              ref={nodeRef}
+            >
+              <CheckRoundedIcon
+                sx={{
+                  flexShrink: 0,
+                  marginRight: '0.75rem',
+                  width: '1.25rem',
+                  height: '1.5rem',
+                }}
+              />
+              <div className="snackbar-message">
+                <div className="snackbar-title">Notifications sent</div>
+                <div className="snackbar-description">
+                  All your notifications were sent to the desired address.
+                </div>
+              </div>
+              <CloseIcon onClick={handleClose} className="snackbar-close-icon" />
+            </SnackbarContent>
+          )}
+        </Transition>
+      </StyledSnackbar>
+    </React.Fragment>
+  );
+}
+
 const blue = {
   50: '#F0F7FF',
   100: '#DAECFF',
@@ -85,79 +161,3 @@ const positioningStyles = {
   exited: 'translateX(500px)',
   unmounted: 'translateX(500px)',
 };
-
-export default function TransitionComponentSnackbar() {
-  const [open, setOpen] = React.useState(false);
-  const [exited, setExited] = React.useState(true);
-  const nodeRef = React.useRef(null);
-
-  const handleClose = (_, reason) => {
-    if (reason === 'clickaway') {
-      return;
-    }
-
-    setOpen(false);
-  };
-
-  const handleClick = () => {
-    setOpen(true);
-  };
-
-  const handleOnEnter = () => {
-    setExited(false);
-  };
-
-  const handleOnExited = () => {
-    setExited(true);
-  };
-
-  return (
-    <React.Fragment>
-      <button type="button" onClick={handleClick}>
-        Open snackbar
-      </button>
-      <StyledSnackbar
-        autoHideDuration={5000}
-        open={open}
-        onClose={handleClose}
-        exited={exited}
-      >
-        <Transition
-          timeout={{ enter: 400, exit: 400 }}
-          in={open}
-          appear
-          unmountOnExit
-          onEnter={handleOnEnter}
-          onExited={handleOnExited}
-          nodeRef={nodeRef}
-        >
-          {(status) => (
-            <SnackbarContent
-              style={{
-                transform: positioningStyles[status],
-                transition: 'transform 300ms ease',
-              }}
-              ref={nodeRef}
-            >
-              <CheckRoundedIcon
-                sx={{
-                  flexShrink: 0,
-                  marginRight: '0.75rem',
-                  width: '1.25rem',
-                  height: '1.5rem',
-                }}
-              />
-              <div className="snackbar-message">
-                <div className="snackbar-title">Notifications sent</div>
-                <div className="snackbar-description">
-                  All your notifications were sent to the desired address.
-                </div>
-              </div>
-              <CloseIcon onClick={handleClose} className="snackbar-close-icon" />
-            </SnackbarContent>
-          )}
-        </Transition>
-      </StyledSnackbar>
-    </React.Fragment>
-  );
-}
diff --git a/docs/data/base/components/snackbar/TransitionComponentSnackbar.tsx b/docs/data/base/components/snackbar/TransitionComponentSnackbar.tsx
index 465decef53d4d7..cfe9c78fa9c741 100644
--- a/docs/data/base/components/snackbar/TransitionComponentSnackbar.tsx
+++ b/docs/data/base/components/snackbar/TransitionComponentSnackbar.tsx
@@ -6,6 +6,82 @@ import CloseIcon from '@mui/icons-material/Close';
 import Snackbar from '@mui/base/Snackbar';
 import { SnackbarCloseReason } from '@mui/base/useSnackbar';
 
+export default function TransitionComponentSnackbar() {
+  const [open, setOpen] = React.useState(false);
+  const [exited, setExited] = React.useState(true);
+  const nodeRef = React.useRef(null);
+
+  const handleClose = (_: any, reason: SnackbarCloseReason) => {
+    if (reason === 'clickaway') {
+      return;
+    }
+
+    setOpen(false);
+  };
+
+  const handleClick = () => {
+    setOpen(true);
+  };
+
+  const handleOnEnter = () => {
+    setExited(false);
+  };
+
+  const handleOnExited = () => {
+    setExited(true);
+  };
+
+  return (
+    <React.Fragment>
+      <button type="button" onClick={handleClick}>
+        Open snackbar
+      </button>
+      <StyledSnackbar
+        autoHideDuration={5000}
+        open={open}
+        onClose={handleClose}
+        exited={exited}
+      >
+        <Transition
+          timeout={{ enter: 400, exit: 400 }}
+          in={open}
+          appear
+          unmountOnExit
+          onEnter={handleOnEnter}
+          onExited={handleOnExited}
+          nodeRef={nodeRef}
+        >
+          {(status) => (
+            <SnackbarContent
+              style={{
+                transform: positioningStyles[status],
+                transition: 'transform 300ms ease',
+              }}
+              ref={nodeRef}
+            >
+              <CheckRoundedIcon
+                sx={{
+                  flexShrink: 0,
+                  marginRight: '0.75rem',
+                  width: '1.25rem',
+                  height: '1.5rem',
+                }}
+              />
+              <div className="snackbar-message">
+                <div className="snackbar-title">Notifications sent</div>
+                <div className="snackbar-description">
+                  All your notifications were sent to the desired address.
+                </div>
+              </div>
+              <CloseIcon onClick={handleClose} className="snackbar-close-icon" />
+            </SnackbarContent>
+          )}
+        </Transition>
+      </StyledSnackbar>
+    </React.Fragment>
+  );
+}
+
 const blue = {
   50: '#F0F7FF',
   100: '#DAECFF',
@@ -86,79 +162,3 @@ const positioningStyles = {
   exited: 'translateX(500px)',
   unmounted: 'translateX(500px)',
 };
-
-export default function TransitionComponentSnackbar() {
-  const [open, setOpen] = React.useState(false);
-  const [exited, setExited] = React.useState(true);
-  const nodeRef = React.useRef(null);
-
-  const handleClose = (_: any, reason: SnackbarCloseReason) => {
-    if (reason === 'clickaway') {
-      return;
-    }
-
-    setOpen(false);
-  };
-
-  const handleClick = () => {
-    setOpen(true);
-  };
-
-  const handleOnEnter = () => {
-    setExited(false);
-  };
-
-  const handleOnExited = () => {
-    setExited(true);
-  };
-
-  return (
-    <React.Fragment>
-      <button type="button" onClick={handleClick}>
-        Open snackbar
-      </button>
-      <StyledSnackbar
-        autoHideDuration={5000}
-        open={open}
-        onClose={handleClose}
-        exited={exited}
-      >
-        <Transition
-          timeout={{ enter: 400, exit: 400 }}
-          in={open}
-          appear
-          unmountOnExit
-          onEnter={handleOnEnter}
-          onExited={handleOnExited}
-          nodeRef={nodeRef}
-        >
-          {(status) => (
-            <SnackbarContent
-              style={{
-                transform: positioningStyles[status],
-                transition: 'transform 300ms ease',
-              }}
-              ref={nodeRef}
-            >
-              <CheckRoundedIcon
-                sx={{
-                  flexShrink: 0,
-                  marginRight: '0.75rem',
-                  width: '1.25rem',
-                  height: '1.5rem',
-                }}
-              />
-              <div className="snackbar-message">
-                <div className="snackbar-title">Notifications sent</div>
-                <div className="snackbar-description">
-                  All your notifications were sent to the desired address.
-                </div>
-              </div>
-              <CloseIcon onClick={handleClose} className="snackbar-close-icon" />
-            </SnackbarContent>
-          )}
-        </Transition>
-      </StyledSnackbar>
-    </React.Fragment>
-  );
-}
diff --git a/docs/data/base/components/snackbar/UnstyledSnackbar.js b/docs/data/base/components/snackbar/UnstyledSnackbar.js
index 2052043a4b018b..4b112813214ab6 100644
--- a/docs/data/base/components/snackbar/UnstyledSnackbar.js
+++ b/docs/data/base/components/snackbar/UnstyledSnackbar.js
@@ -2,6 +2,33 @@ import * as React from 'react';
 import { styled, keyframes, css } from '@mui/system';
 import Snackbar from '@mui/base/Snackbar';
 
+export default function UnstyledSnackbar() {
+  const [open, setOpen] = React.useState(false);
+
+  const handleClose = (_, reason) => {
+    if (reason === 'clickaway') {
+      return;
+    }
+
+    setOpen(false);
+  };
+
+  const handleClick = () => {
+    setOpen(true);
+  };
+
+  return (
+    <React.Fragment>
+      <button type="button" onClick={handleClick}>
+        Open snackbar
+      </button>
+      <StyledSnackbar open={open} autoHideDuration={5000} onClose={handleClose}>
+        Hello World
+      </StyledSnackbar>
+    </React.Fragment>
+  );
+}
+
 const blue = {
   50: '#F0F7FF',
   400: '#3399FF',
@@ -48,30 +75,3 @@ const StyledSnackbar = styled(Snackbar)(
     transition: transform 0.2s ease-out;
   `,
 );
-
-export default function UnstyledSnackbar() {
-  const [open, setOpen] = React.useState(false);
-
-  const handleClose = (_, reason) => {
-    if (reason === 'clickaway') {
-      return;
-    }
-
-    setOpen(false);
-  };
-
-  const handleClick = () => {
-    setOpen(true);
-  };
-
-  return (
-    <React.Fragment>
-      <button type="button" onClick={handleClick}>
-        Open snackbar
-      </button>
-      <StyledSnackbar open={open} autoHideDuration={5000} onClose={handleClose}>
-        Hello World
-      </StyledSnackbar>
-    </React.Fragment>
-  );
-}
diff --git a/docs/data/base/components/snackbar/UnstyledSnackbar.tsx b/docs/data/base/components/snackbar/UnstyledSnackbar.tsx
index 8f2982d9196c2d..586d12aca1e10d 100644
--- a/docs/data/base/components/snackbar/UnstyledSnackbar.tsx
+++ b/docs/data/base/components/snackbar/UnstyledSnackbar.tsx
@@ -3,6 +3,33 @@ import { styled, keyframes, css } from '@mui/system';
 import Snackbar from '@mui/base/Snackbar';
 import { SnackbarCloseReason } from '@mui/base/useSnackbar';
 
+export default function UnstyledSnackbar() {
+  const [open, setOpen] = React.useState(false);
+
+  const handleClose = (_: any, reason: SnackbarCloseReason) => {
+    if (reason === 'clickaway') {
+      return;
+    }
+
+    setOpen(false);
+  };
+
+  const handleClick = () => {
+    setOpen(true);
+  };
+
+  return (
+    <React.Fragment>
+      <button type="button" onClick={handleClick}>
+        Open snackbar
+      </button>
+      <StyledSnackbar open={open} autoHideDuration={5000} onClose={handleClose}>
+        Hello World
+      </StyledSnackbar>
+    </React.Fragment>
+  );
+}
+
 const blue = {
   50: '#F0F7FF',
   400: '#3399FF',
@@ -49,30 +76,3 @@ const StyledSnackbar = styled(Snackbar)(
     transition: transform 0.2s ease-out;
   `,
 );
-
-export default function UnstyledSnackbar() {
-  const [open, setOpen] = React.useState(false);
-
-  const handleClose = (_: any, reason: SnackbarCloseReason) => {
-    if (reason === 'clickaway') {
-      return;
-    }
-
-    setOpen(false);
-  };
-
-  const handleClick = () => {
-    setOpen(true);
-  };
-
-  return (
-    <React.Fragment>
-      <button type="button" onClick={handleClick}>
-        Open snackbar
-      </button>
-      <StyledSnackbar open={open} autoHideDuration={5000} onClose={handleClose}>
-        Hello World
-      </StyledSnackbar>
-    </React.Fragment>
-  );
-}
diff --git a/docs/data/base/components/snackbar/UseSnackbar.js b/docs/data/base/components/snackbar/UseSnackbar.js
index 7cf75624bf1a97..be4e29e88cee7e 100644
--- a/docs/data/base/components/snackbar/UseSnackbar.js
+++ b/docs/data/base/components/snackbar/UseSnackbar.js
@@ -3,6 +3,37 @@ import useSnackbar from '@mui/base/useSnackbar';
 import ClickAwayListener from '@mui/base/ClickAwayListener';
 import { css, keyframes, styled } from '@mui/system';
 
+export default function UseSnackbar() {
+  const [open, setOpen] = React.useState(false);
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  const { getRootProps, onClickAway } = useSnackbar({
+    onClose: handleClose,
+    open,
+    autoHideDuration: 5000,
+  });
+
+  const handleOpen = () => {
+    setOpen(true);
+  };
+
+  return (
+    <React.Fragment>
+      <button type="button" onClick={handleOpen}>
+        Open Snackbar
+      </button>
+      {open ? (
+        <ClickAwayListener onClickAway={onClickAway}>
+          <CustomSnackbar {...getRootProps()}>Hello World</CustomSnackbar>
+        </ClickAwayListener>
+      ) : null}
+    </React.Fragment>
+  );
+}
+
 const blue = {
   50: '#F0F7FF',
   400: '#3399FF',
@@ -49,34 +80,3 @@ const CustomSnackbar = styled('div')(
     transition: transform 0.2s ease-out;
   `,
 );
-
-export default function UseSnackbar() {
-  const [open, setOpen] = React.useState(false);
-
-  const handleClose = () => {
-    setOpen(false);
-  };
-
-  const { getRootProps, onClickAway } = useSnackbar({
-    onClose: handleClose,
-    open,
-    autoHideDuration: 5000,
-  });
-
-  const handleOpen = () => {
-    setOpen(true);
-  };
-
-  return (
-    <React.Fragment>
-      <button type="button" onClick={handleOpen}>
-        Open Snackbar
-      </button>
-      {open ? (
-        <ClickAwayListener onClickAway={onClickAway}>
-          <CustomSnackbar {...getRootProps()}>Hello World</CustomSnackbar>
-        </ClickAwayListener>
-      ) : null}
-    </React.Fragment>
-  );
-}
diff --git a/docs/data/base/components/snackbar/UseSnackbar.tsx b/docs/data/base/components/snackbar/UseSnackbar.tsx
index 7cf75624bf1a97..be4e29e88cee7e 100644
--- a/docs/data/base/components/snackbar/UseSnackbar.tsx
+++ b/docs/data/base/components/snackbar/UseSnackbar.tsx
@@ -3,6 +3,37 @@ import useSnackbar from '@mui/base/useSnackbar';
 import ClickAwayListener from '@mui/base/ClickAwayListener';
 import { css, keyframes, styled } from '@mui/system';
 
+export default function UseSnackbar() {
+  const [open, setOpen] = React.useState(false);
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  const { getRootProps, onClickAway } = useSnackbar({
+    onClose: handleClose,
+    open,
+    autoHideDuration: 5000,
+  });
+
+  const handleOpen = () => {
+    setOpen(true);
+  };
+
+  return (
+    <React.Fragment>
+      <button type="button" onClick={handleOpen}>
+        Open Snackbar
+      </button>
+      {open ? (
+        <ClickAwayListener onClickAway={onClickAway}>
+          <CustomSnackbar {...getRootProps()}>Hello World</CustomSnackbar>
+        </ClickAwayListener>
+      ) : null}
+    </React.Fragment>
+  );
+}
+
 const blue = {
   50: '#F0F7FF',
   400: '#3399FF',
@@ -49,34 +80,3 @@ const CustomSnackbar = styled('div')(
     transition: transform 0.2s ease-out;
   `,
 );
-
-export default function UseSnackbar() {
-  const [open, setOpen] = React.useState(false);
-
-  const handleClose = () => {
-    setOpen(false);
-  };
-
-  const { getRootProps, onClickAway } = useSnackbar({
-    onClose: handleClose,
-    open,
-    autoHideDuration: 5000,
-  });
-
-  const handleOpen = () => {
-    setOpen(true);
-  };
-
-  return (
-    <React.Fragment>
-      <button type="button" onClick={handleOpen}>
-        Open Snackbar
-      </button>
-      {open ? (
-        <ClickAwayListener onClickAway={onClickAway}>
-          <CustomSnackbar {...getRootProps()}>Hello World</CustomSnackbar>
-        </ClickAwayListener>
-      ) : null}
-    </React.Fragment>
-  );
-}