From 12cc7e7bfee8dd827ae9eb7fc8bbd0b55ecfad61 Mon Sep 17 00:00:00 2001
From: Thomas Heyenbrock <thomas.heyenbrock@gmail.com>
Date: Thu, 28 Jul 2022 13:13:18 +0200
Subject: [PATCH] [redesign] add settings dialog (#2595)

* add `Dialog` component to `@graphiql/react`

* add a `clear` method to the `Storage` type

* add success and failure states to `Button` component

* add settings dialog

* make sure to show dialog above editor scrollbars
---
 .changeset/five-pillows-fail.md               |   2 +-
 .changeset/tender-impalas-provide.md          |   5 +
 packages/graphiql-react/package.json          |   2 +
 packages/graphiql-react/src/style/root.css    |   7 +-
 packages/graphiql-react/src/ui/button.css     |   7 +
 packages/graphiql-react/src/ui/button.tsx     |  18 ++-
 packages/graphiql-react/src/ui/dialog.css     |  34 +++++
 packages/graphiql-react/src/ui/dialog.tsx     |  27 ++++
 packages/graphiql-react/src/ui/index.ts       |   1 +
 packages/graphiql-toolkit/src/storage/base.ts |   7 +
 .../graphiql/__mocks__/@graphiql/react.tsx    |   1 +
 packages/graphiql/src/components/GraphiQL.tsx |  89 +++++++++++--
 packages/graphiql/src/style.css               |  37 ++++++
 yarn.lock                                     | 120 +++++++++++++++++-
 14 files changed, 339 insertions(+), 18 deletions(-)
 create mode 100644 .changeset/tender-impalas-provide.md
 create mode 100644 packages/graphiql-react/src/ui/dialog.css
 create mode 100644 packages/graphiql-react/src/ui/dialog.tsx

diff --git a/.changeset/five-pillows-fail.md b/.changeset/five-pillows-fail.md
index b0bf36e27bb..bb9ae37c7d9 100644
--- a/.changeset/five-pillows-fail.md
+++ b/.changeset/five-pillows-fail.md
@@ -3,7 +3,7 @@
 ---
 
 Add new components:
-- UI components (`Button`, `Dropdown`, `Spinner`, `Tab`, `Tabs`, `UnStyledButton` and lots of icon components)
+- UI components (`Button`, `Dialog`, `Dropdown`, `Spinner`, `Tab`, `Tabs`, `UnStyledButton` and lots of icon components)
 - Editor components (`QueryEditor`, `VariableEditor`, `HeaderEditor` and `ResponseEditor`)
 - Toolbar components (`ExecuteButton` and `ToolbarButton`)
 - Docs components (`Argument`, `DefaultValue`, `DeprecationReason`, `Directive`, `DocExplorer`, `ExplorerSection`, `FieldDocumentation`, `FieldLink`, `SchemaDocumentation`, `Search`, `TypeDocumentation` and `TypeLink`)
diff --git a/.changeset/tender-impalas-provide.md b/.changeset/tender-impalas-provide.md
new file mode 100644
index 00000000000..b76196bf4dc
--- /dev/null
+++ b/.changeset/tender-impalas-provide.md
@@ -0,0 +1,5 @@
+---
+'@graphiql/toolkit': minor
+---
+
+Add a `clear` method to `Storage` classes
diff --git a/packages/graphiql-react/package.json b/packages/graphiql-react/package.json
index 620b72a71db..e46a85f60bc 100644
--- a/packages/graphiql-react/package.json
+++ b/packages/graphiql-react/package.json
@@ -39,6 +39,8 @@
   "dependencies": {
     "@graphiql/toolkit": "^1.0.0-next.1",
     "@reach/combobox": "^0.17.0",
+    "@reach/dialog": "^0.17.0",
+    "@reach/visually-hidden": "^0.17.0",
     "codemirror": "^5.65.3",
     "codemirror-graphql": "^2.0.0-next.1",
     "copy-to-clipboard": "^3.2.0",
diff --git a/packages/graphiql-react/src/style/root.css b/packages/graphiql-react/src/style/root.css
index 6de75b9dbe3..3face8112d0 100644
--- a/packages/graphiql-react/src/style/root.css
+++ b/packages/graphiql-react/src/style/root.css
@@ -1,6 +1,7 @@
 .graphiql-container,
 .CodeMirror-info,
-.CodeMirror-lint-tooltip {
+.CodeMirror-lint-tooltip,
+reach-portal {
   /* Colors */
   --color-pink: #d60690;
   --color-purple: #6e6acf;
@@ -23,6 +24,8 @@
   --color-orche-background: rgba(211, 127, 0, 0.07);
   --color-orche-background-dark: rgba(211, 127, 0, 0.12);
   --color-red-background: rgba(248, 91, 48, 0.12);
+  --color-green-background: rgba(43, 171, 124, 0.12);
+  --color-neutral-background: rgba(59, 75, 104, 0.1);
 
   /* Font */
   --font-family: 'Roboto', sans-serif;
@@ -46,6 +49,7 @@
   --px-12: 12px;
   --px-16: 16px;
   --px-20: 20px;
+  --px-24: 24px;
 
   /* Border radius */
   --border-radius-2: 2px;
@@ -67,6 +71,7 @@
 .graphiql-container,
 .CodeMirror-info,
 .CodeMirror-lint-tooltip,
+reach-portal,
 .graphiql-container:is(button) {
   color: var(--color-neutral-100);
   font-family: var(--font-family);
diff --git a/packages/graphiql-react/src/ui/button.css b/packages/graphiql-react/src/ui/button.css
index c81313e2b09..272c06ad76f 100644
--- a/packages/graphiql-react/src/ui/button.css
+++ b/packages/graphiql-react/src/ui/button.css
@@ -28,4 +28,11 @@ button.graphiql-button {
   &:focus {
     outline: var(--color-neutral-15) auto 1px;
   }
+
+  &.graphiql-button-success {
+    background-color: var(--color-green-background);
+  }
+  &.graphiql-button-error {
+    background-color: var(--color-red-background);
+  }
 }
diff --git a/packages/graphiql-react/src/ui/button.tsx b/packages/graphiql-react/src/ui/button.tsx
index 50a30763ff3..950210116fb 100644
--- a/packages/graphiql-react/src/ui/button.tsx
+++ b/packages/graphiql-react/src/ui/button.tsx
@@ -1,19 +1,31 @@
+import { compose } from '../utility/compose';
+
 import './button.css';
 
 export function UnStyledButton(props: JSX.IntrinsicElements['button']) {
   return (
     <button
       {...props}
-      className={`graphiql-un-styled ${props.className || ''}`.trim()}
+      className={compose('graphiql-un-styled', props.className)}
     />
   );
 }
 
-export function Button(props: JSX.IntrinsicElements['button']) {
+type ButtonProps = { state?: 'success' | 'error' };
+
+export function Button(props: ButtonProps & JSX.IntrinsicElements['button']) {
   return (
     <button
       {...props}
-      className={`graphiql-button ${props.className || ''}`.trim()}
+      className={compose(
+        'graphiql-button',
+        props.state === 'success'
+          ? 'graphiql-button-success'
+          : props.state === 'error'
+          ? 'graphiql-button-error'
+          : '',
+        props.className,
+      )}
     />
   );
 }
diff --git a/packages/graphiql-react/src/ui/dialog.css b/packages/graphiql-react/src/ui/dialog.css
new file mode 100644
index 00000000000..ef7b513f0e7
--- /dev/null
+++ b/packages/graphiql-react/src/ui/dialog.css
@@ -0,0 +1,34 @@
+@import url('@reach/dialog/styles.css');
+
+[data-reach-dialog-overlay] {
+  align-items: center;
+  background-color: var(--color-neutral-background);
+  display: flex;
+  justify-content: center;
+  /**
+   * CodeMirror has a `z-index` set for the container of the scrollbar of the
+   * editor, so we have to add one here to make sure that the dialog is shown
+   * above the editor scrollbar (if they are visible).
+   */
+  z-index: 10;
+}
+
+[data-reach-dialog-content] {
+  background-color: var(--color-neutral-0);
+  border-radius: var(--border-radius-12);
+  box-shadow: var(--box-shadow);
+  margin: 0;
+  max-height: 80vh;
+  max-width: 80vw;
+  overflow: auto;
+  padding: 0;
+  width: unset;
+}
+
+.graphiql-dialog-close > svg {
+  color: var(--color-neutral-60);
+  display: block;
+  height: var(--px-12);
+  padding: var(--px-12);
+  width: var(--px-12);
+}
diff --git a/packages/graphiql-react/src/ui/dialog.tsx b/packages/graphiql-react/src/ui/dialog.tsx
new file mode 100644
index 00000000000..95f3a8e2f44
--- /dev/null
+++ b/packages/graphiql-react/src/ui/dialog.tsx
@@ -0,0 +1,27 @@
+import { Dialog as ReachDialog } from '@reach/dialog';
+import { VisuallyHidden } from '@reach/visually-hidden';
+import { ComponentProps } from 'react';
+import { CloseIcon } from '../icons';
+import { compose } from '../utility/compose';
+import { UnStyledButton } from './button';
+
+import './dialog.css';
+
+export function Dialog(props: ComponentProps<typeof ReachDialog>) {
+  return <ReachDialog {...props} />;
+}
+
+function DialogClose(props: JSX.IntrinsicElements['button']) {
+  return (
+    <UnStyledButton
+      {...props}
+      type="button"
+      className={compose('graphiql-dialog-close', props.className)}
+    >
+      <VisuallyHidden>Close dialog</VisuallyHidden>
+      <CloseIcon />
+    </UnStyledButton>
+  );
+}
+
+Dialog.Close = DialogClose;
diff --git a/packages/graphiql-react/src/ui/index.ts b/packages/graphiql-react/src/ui/index.ts
index 075e0c433a0..b3e8f7e606d 100644
--- a/packages/graphiql-react/src/ui/index.ts
+++ b/packages/graphiql-react/src/ui/index.ts
@@ -1,4 +1,5 @@
 export * from './button';
+export * from './dialog';
 export * from './dropdown';
 export * from './markdown';
 export * from './spinner';
diff --git a/packages/graphiql-toolkit/src/storage/base.ts b/packages/graphiql-toolkit/src/storage/base.ts
index 0530f84d536..035fdb01f76 100644
--- a/packages/graphiql-toolkit/src/storage/base.ts
+++ b/packages/graphiql-toolkit/src/storage/base.ts
@@ -2,6 +2,7 @@ export type Storage = {
   getItem(key: string): string | null;
   removeItem(key: string): void;
   setItem(key: string, value: string): void;
+  clear(): void;
   length: number;
 };
 
@@ -77,6 +78,12 @@ export class StorageAPI {
 
     return { isQuotaError: quotaError, error };
   }
+
+  clear() {
+    if (this.storage) {
+      this.storage.clear();
+    }
+  }
 }
 
 const STORAGE_NAMESPACE = 'graphiql';
diff --git a/packages/graphiql/__mocks__/@graphiql/react.tsx b/packages/graphiql/__mocks__/@graphiql/react.tsx
index 6bd3f1b5934..efa9d3f6d53 100644
--- a/packages/graphiql/__mocks__/@graphiql/react.tsx
+++ b/packages/graphiql/__mocks__/@graphiql/react.tsx
@@ -25,6 +25,7 @@ export {
   DeprecatedEnumValueIcon,
   DeprecatedFieldIcon,
   DeprecationReason,
+  Dialog,
   Directive,
   DirectiveIcon,
   DocExplorer,
diff --git a/packages/graphiql/src/components/GraphiQL.tsx b/packages/graphiql/src/components/GraphiQL.tsx
index 96484a40166..cf98623ddbc 100644
--- a/packages/graphiql/src/components/GraphiQL.tsx
+++ b/packages/graphiql/src/components/GraphiQL.tsx
@@ -22,33 +22,43 @@ import {
 } from 'graphql';
 
 import {
+  Button,
   ChevronDownIcon,
   ChevronUpIcon,
   CopyIcon,
+  Dialog,
   DocExplorer,
   DocsIcon,
   EditorContextProvider,
+  EditorContextType,
   ExecuteButton,
   ExecutionContextProvider,
   ExecutionContextType,
   ExplorerContextProvider,
+  ExplorerContextType,
   HeaderEditor,
   History,
   HistoryContextProvider,
+  HistoryContextType,
   HistoryIcon,
   KeyboardShortcutIcon,
+  KeyMap,
   MergeIcon,
   PlusIcon,
   PrettifyIcon,
   QueryEditor,
   ReloadIcon,
   ResponseEditor,
+  ResponseTooltipType,
   SchemaContextProvider,
+  SchemaContextType,
   SettingsIcon,
   Spinner,
   StorageContextProvider,
+  StorageContextType,
   Tab,
   Tabs,
+  TabsState,
   ToolbarButton,
   UnStyledButton,
   useAutoCompleteLeafs,
@@ -64,16 +74,6 @@ import {
   useStorageContext,
   VariableEditor,
 } from '@graphiql/react';
-import type {
-  EditorContextType,
-  ExplorerContextType,
-  HistoryContextType,
-  ResponseTooltipType,
-  SchemaContextType,
-  StorageContextType,
-  TabsState,
-  KeyMap,
-} from '@graphiql/react';
 
 import { ToolbarMenu, ToolbarMenuItem } from './ToolbarMenu';
 import find from '../utility/find';
@@ -635,6 +635,8 @@ type GraphiQLWithContextConsumerProps = Omit<
 
 export type GraphiQLState = {
   activeSecondaryEditor: 'variable' | 'header';
+  showSettings: boolean;
+  clearStorageStatus: 'success' | 'error' | null;
 };
 
 class GraphiQLWithContext extends React.Component<
@@ -645,7 +647,11 @@ class GraphiQLWithContext extends React.Component<
     super(props);
 
     // Initialize state
-    this.state = { activeSecondaryEditor: 'variable' };
+    this.state = {
+      activeSecondaryEditor: 'variable',
+      showSettings: false,
+      clearStorageStatus: null,
+    };
   }
 
   render() {
@@ -776,7 +782,12 @@ class GraphiQLWithContext extends React.Component<
             <UnStyledButton type="button">
               <KeyboardShortcutIcon />
             </UnStyledButton>
-            <UnStyledButton type="button">
+            <UnStyledButton
+              type="button"
+              onClick={() => {
+                this.setState({ showSettings: true });
+              }}
+            >
               <SettingsIcon />
             </UnStyledButton>
           </div>
@@ -1030,6 +1041,60 @@ class GraphiQLWithContext extends React.Component<
             </div>
           </div>
         </div>
+        <Dialog
+          isOpen={this.state.showSettings}
+          onDismiss={() => {
+            this.setState({
+              showSettings: false,
+              clearStorageStatus: null,
+            });
+          }}
+        >
+          <div className="graphiql-dialog-header">
+            <div className="graphiql-dialog-title">Settings</div>
+            <Dialog.Close
+              onClick={() => {
+                this.setState({
+                  showSettings: false,
+                  clearStorageStatus: null,
+                });
+              }}
+            />
+          </div>
+          {this.props.storageContext ? (
+            <div className="graphiql-dialog-section">
+              <div>
+                <div className="graphiql-dialog-section-title">
+                  Clear storage
+                </div>
+                <div className="graphiql-dialog-section-caption">
+                  Remove all locally stored data and start fresh.
+                </div>
+              </div>
+              <div>
+                <Button
+                  type="button"
+                  state={this.state.clearStorageStatus || undefined}
+                  disabled={this.state.clearStorageStatus === 'success'}
+                  onClick={() => {
+                    try {
+                      this.props.storageContext?.clear();
+                      this.setState({ clearStorageStatus: 'success' });
+                    } catch {
+                      this.setState({ clearStorageStatus: 'error' });
+                    }
+                  }}
+                >
+                  {this.state.clearStorageStatus === 'success'
+                    ? 'Cleared data'
+                    : this.state.clearStorageStatus === 'error'
+                    ? 'Failed'
+                    : 'Clear data'}
+                </Button>
+              </div>
+            </div>
+          ) : null}
+        </Dialog>
       </div>
     );
   }
diff --git a/packages/graphiql/src/style.css b/packages/graphiql/src/style.css
index 8267e8d021a..eb9668e22ee 100644
--- a/packages/graphiql/src/style.css
+++ b/packages/graphiql/src/style.css
@@ -231,3 +231,40 @@ button.graphiql-tab-add > svg {
     transform: rotate(360deg);
   }
 }
+
+/* The header of the settings dialog */
+reach-portal .graphiql-dialog-header {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  padding: var(--px-24);
+}
+
+/* The title of the settings dialog */
+reach-portal .graphiql-dialog-title {
+  font-size: var(--font-size-h3);
+  font-weight: var(--font-weight-medium);
+}
+
+/* A section inside the settings dialog */
+reach-portal .graphiql-dialog-section {
+  align-items: center;
+  border-top: 1px solid var(--color-neutral-15);
+  display: flex;
+  justify-content: space-between;
+  padding: var(--px-24);
+}
+reach-portal .graphiql-dialog-section > :not(:first-child) {
+  margin-left: var(--px-24);
+}
+
+/* The section title in the settings dialog */
+reach-portal .graphiql-dialog-section-title {
+  font-size: var(--font-size-h4);
+  font-weight: var(--font-weight-medium);
+}
+
+/* The section caption in the settings dialog */
+reach-portal .graphiql-dialog-section-caption {
+  color: var(--color-neutral-60);
+}
diff --git a/yarn.lock b/yarn.lock
index d474fdb1c92..deb7c38944e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3043,6 +3043,13 @@
     core-js-pure "^3.0.0"
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.12.13":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.9.tgz#b4fcfce55db3d2e5e080d2490f608a3b9f407f4a"
+  integrity sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.8.3":
   version "7.11.2"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.11.2.tgz#f549c13c754cc40b87644b9fa9f09a6a95fe0736"
@@ -4465,6 +4472,18 @@
     "@reach/utils" "0.17.0"
     tslib "^2.3.0"
 
+"@reach/dialog@^0.17.0":
+  version "0.17.0"
+  resolved "https://registry.yarnpkg.com/@reach/dialog/-/dialog-0.17.0.tgz#81c48dd4405945dfc6b6c3e5e125db2c4324e9e8"
+  integrity sha512-AnfKXugqDTGbeG3c8xDcrQDE4h9b/vnc27Sa118oQSquz52fneUeX9MeFb5ZEiBJK8T5NJpv7QUTBIKnFCAH5A==
+  dependencies:
+    "@reach/portal" "0.17.0"
+    "@reach/utils" "0.17.0"
+    prop-types "^15.7.2"
+    react-focus-lock "^2.5.2"
+    react-remove-scroll "^2.4.3"
+    tslib "^2.3.0"
+
 "@reach/observe-rect@1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@reach/observe-rect/-/observe-rect-1.2.0.tgz#d7a6013b8aafcc64c778a0ccb83355a11204d3b2"
@@ -4509,6 +4528,14 @@
     tiny-warning "^1.0.3"
     tslib "^2.3.0"
 
+"@reach/visually-hidden@^0.17.0":
+  version "0.17.0"
+  resolved "https://registry.yarnpkg.com/@reach/visually-hidden/-/visually-hidden-0.17.0.tgz#033adba10b5ec419649da8d6bd8e46db06d4c3a1"
+  integrity sha512-T6xF3Nv8vVnjVkGU6cm0+kWtvliLqPAo8PcZ+WxkKacZsaHTjaZb4v1PaCcyQHmuTNT/vtTVNOJLG0SjQOIb7g==
+  dependencies:
+    prop-types "^15.7.2"
+    tslib "^2.3.0"
+
 "@rollup/pluginutils@^4.1.1":
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.1.1.tgz#1d4da86dd4eded15656a57d933fda2b9a08d47ec"
@@ -8324,6 +8351,11 @@ detect-newline@^3.0.0:
   resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651"
   integrity sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==
 
+detect-node-es@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/detect-node-es/-/detect-node-es-1.1.0.tgz#163acdf643330caa0b4cd7c21e7ee7755d6fa493"
+  integrity sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==
+
 detect-node@^2.0.4:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.0.5.tgz#9d270aa7eaa5af0b72c4c9d9b814e7f4ce738b79"
@@ -10132,6 +10164,13 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
+focus-lock@^0.11.2:
+  version "0.11.2"
+  resolved "https://registry.yarnpkg.com/focus-lock/-/focus-lock-0.11.2.tgz#aeef3caf1cea757797ac8afdebaec8fd9ab243ed"
+  integrity sha512-pZ2bO++NWLHhiKkgP1bEXHhR1/OjVcSvlCJ98aNJDFeb7H5OOQaO+SKOZle6041O9rv2tmbrO4JzClAvDUHf0g==
+  dependencies:
+    tslib "^2.0.3"
+
 follow-redirects@^1.0.0, follow-redirects@^1.13.2, follow-redirects@^1.14.0:
   version "1.15.0"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.0.tgz#06441868281c86d0dda4ad8bdaead2d02dca89d4"
@@ -10387,6 +10426,11 @@ get-intrinsic@^1.0.2, get-intrinsic@^1.1.0, get-intrinsic@^1.1.1:
     has "^1.0.3"
     has-symbols "^1.0.1"
 
+get-nonce@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/get-nonce/-/get-nonce-1.0.1.tgz#fdf3f0278073820d2ce9426c18f07481b1e0cdf3"
+  integrity sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==
+
 get-own-enumerable-property-symbols@^3.0.0:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz#b5fde77f22cbe35f390b4e089922c50bce6ef664"
@@ -11408,6 +11452,13 @@ interpret@^1.4.0:
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.4.0.tgz#665ab8bc4da27a774a40584e812e3e0fa45b1a1e"
   integrity sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==
 
+invariant@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
+  integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
+  dependencies:
+    loose-envify "^1.0.0"
+
 ip-regex@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/ip-regex/-/ip-regex-2.1.0.tgz#fa78bf5d2e6913c911ce9f819ee5146bb6d844e9"
@@ -13002,7 +13053,7 @@ loglevel@^1.6.8:
   resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.7.1.tgz#005fde2f5e6e47068f935ff28573e125ef72f197"
   integrity sha512-Hesni4s5UkWkwCGJMQGAh71PaLUmKFM60dHvq0zi/vDhhrzuk+4GgNbTXJ12YYQJn6ZKBDNIjYcuQGKudvqrIw==
 
-loose-envify@^1.1.0, loose-envify@^1.4.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -15646,6 +15697,13 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.2.7, rc@^1.2.8:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-clientside-effect@^1.2.6:
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/react-clientside-effect/-/react-clientside-effect-1.2.6.tgz#29f9b14e944a376b03fb650eed2a754dd128ea3a"
+  integrity sha512-XGGGRQAKY+q25Lz9a/4EPqom7WRjz3z9R2k4jhVKA/puQFH/5Nt27vFZYql4m4NVNdUvX8PS3O7r/Zzm7cjUlg==
+  dependencies:
+    "@babel/runtime" "^7.12.13"
+
 react-dom@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
@@ -15655,6 +15713,18 @@ react-dom@^17.0.2:
     object-assign "^4.1.1"
     scheduler "^0.20.2"
 
+react-focus-lock@^2.5.2:
+  version "2.9.1"
+  resolved "https://registry.yarnpkg.com/react-focus-lock/-/react-focus-lock-2.9.1.tgz#094cfc19b4f334122c73bb0bff65d77a0c92dd16"
+  integrity sha512-pSWOQrUmiKLkffPO6BpMXN7SNKXMsuOakl652IBuALAu1esk+IcpJyM+ALcYzPTTFz1rD0R54aB9A4HuP5t1Wg==
+  dependencies:
+    "@babel/runtime" "^7.0.0"
+    focus-lock "^0.11.2"
+    prop-types "^15.6.2"
+    react-clientside-effect "^1.2.6"
+    use-callback-ref "^1.3.0"
+    use-sidecar "^1.1.2"
+
 react-hot-loader@^4.12.20:
   version "4.12.21"
   resolved "https://registry.yarnpkg.com/react-hot-loader/-/react-hot-loader-4.12.21.tgz#332e830801fb33024b5a147d6b13417f491eb975"
@@ -15694,6 +15764,34 @@ react-refresh@^0.13.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.13.0.tgz#cbd01a4482a177a5da8d44c9755ebb1f26d5a1c1"
   integrity sha512-XP8A9BT0CpRBD+NYLLeIhld/RqG9+gktUjW1FkE+Vm7OCinbG1SshcK5tb9ls4kzvjZr9mOQc7HYgBngEyPAXg==
 
+react-remove-scroll-bar@^2.3.3:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.3.tgz#e291f71b1bb30f5f67f023765b7435f4b2b2cd94"
+  integrity sha512-i9GMNWwpz8XpUpQ6QlevUtFjHGqnPG4Hxs+wlIJntu/xcsZVEpJcIV71K3ZkqNy2q3GfgvkD7y6t/Sv8ofYSbw==
+  dependencies:
+    react-style-singleton "^2.2.1"
+    tslib "^2.0.0"
+
+react-remove-scroll@^2.4.3:
+  version "2.5.5"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz#1e31a1260df08887a8a0e46d09271b52b3a37e77"
+  integrity sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==
+  dependencies:
+    react-remove-scroll-bar "^2.3.3"
+    react-style-singleton "^2.2.1"
+    tslib "^2.1.0"
+    use-callback-ref "^1.3.0"
+    use-sidecar "^1.1.2"
+
+react-style-singleton@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.1.tgz#f99e420492b2d8f34d38308ff660b60d0b1205b4"
+  integrity sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==
+  dependencies:
+    get-nonce "^1.0.0"
+    invariant "^2.2.4"
+    tslib "^2.0.0"
+
 react-test-renderer@^16.13.1:
   version "16.14.0"
   resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.14.0.tgz#e98360087348e260c56d4fe2315e970480c228ae"
@@ -17730,6 +17828,11 @@ tslib@^2, tslib@^2.0.0, tslib@^2.3.0, tslib@^2.4.0, tslib@~2.4.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
   integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
 
+tslib@^2.0.0, tslib@^2.1.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
+  integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
+
 tslib@^2.0.3:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.1.0.tgz#da60860f1c2ecaa5703ab7d39bc05b6bf988b97a"
@@ -18128,6 +18231,21 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
+use-callback-ref@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.3.0.tgz#772199899b9c9a50526fedc4993fc7fa1f7e32d5"
+  integrity sha512-3FT9PRuRdbB9HfXhEq35u4oZkvpJ5kuYbpqhCfmiZyReuRgpnhDlbr2ZEnnuS0RrJAPn6l23xjFg9kpDM+Ms7w==
+  dependencies:
+    tslib "^2.0.0"
+
+use-sidecar@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.1.2.tgz#2f43126ba2d7d7e117aa5855e5d8f0276dfe73c2"
+  integrity sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==
+  dependencies:
+    detect-node-es "^1.1.0"
+    tslib "^2.0.0"
+
 use@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"