Implement new menu component

Committed-by: Eduard Heimbuch <eduard.heimbuch@cloudogu.com>
2025-10-26 08:06:09 +01:00 · 2023-04-18 09:43:57 +02:00
parent 0d80b68661
commit 0ded2ce352
15 changed files with 551 additions and 26 deletions
--- a/gradle/changelog/menu_component.yaml
+++ b/gradle/changelog/menu_component.yaml
@@ -0,0 +1,2 @@
+- type: added
+  description: New menu component
--- a/package.json
+++ b/package.json
@@ -32,7 +32,8 @@
  "resolutions": {
    "babel-core": "7.0.0-bridge.0",
    "gitdiff-parser": "https://github.com/scm-manager/gitdiff-parser#420d6cfa17a6a8f9bf1a517a2c629dcb332dbe13",
-    "@types/react": "17.0.47"
+    "@types/react": "17.0.47",
+    "**/react": "17.0.2"
  },
  "babel": {
    "presets": [
--- a/scm-ui/ui-buttons/src/Button.tsx
+++ b/scm-ui/ui-buttons/src/Button.tsx
@@ -103,7 +103,9 @@ export const LinkButton = React.forwardRef<HTMLAnchorElement, LinkButtonProps>(
 type ExternalLinkButtonProps = BaseButtonProps & AnchorHTMLAttributes<HTMLAnchorElement>;

 /**
- * Styled html anchor
+ * Styled html anchor.
+ *
+ * External links open in a new browser tab with rel flags "noopener" and "noreferrer" set by default.
 *
 * @beta
 * @since 2.41.0
@@ -111,6 +113,8 @@ type ExternalLinkButtonProps = BaseButtonProps & AnchorHTMLAttributes<HTMLAnchor
 export const ExternalLinkButton = React.forwardRef<HTMLAnchorElement, ExternalLinkButtonProps>(
  ({ className, variant, isLoading, testId, children, ...props }, ref) => (
    <a
+      target="_blank"
+      rel="noreferrer noopener"
      {...props}
      className={classNames(createButtonClasses(variant, isLoading), className)}
      ref={ref}
--- a/scm-ui/ui-buttons/src/Icon.tsx
+++ b/scm-ui/ui-buttons/src/Icon.tsx
@@ -0,0 +1,51 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from "react";
+import classNames from "classnames";
+
+type Props = React.HTMLProps<HTMLElement> & {
+  children?: string;
+};
+
+/**
+ * @beta
+ * @since 2.44.0
+ * @see https://bulma.io/documentation/elements/icon/
+ */
+const Icon = React.forwardRef<HTMLElement, Props>(({ children, className, ...props }, ref) => {
+  return (
+    <span className={classNames(className, "icon")} {...props} ref={ref}>
+      <i
+        className={classNames(`fas fa-fw fa-${children}`, {
+          "fa-xs": className?.includes("is-small"),
+          "fa-lg": className?.includes("is-medium"),
+          "fa-2x": className?.includes("is-large"),
+        })}
+      />
+    </span>
+  );
+});
+
+export default Icon;
--- a/scm-ui/ui-buttons/src/index.ts
+++ b/scm-ui/ui-buttons/src/index.ts
@@ -23,3 +23,4 @@
 */

 export { Button, LinkButton, ExternalLinkButton, ButtonVariants } from "./Button";
+export { default as Icon } from "./Icon";
--- a/scm-ui/ui-overlays/.storybook/.babelrc
+++ b/scm-ui/ui-overlays/.storybook/.babelrc
@@ -0,0 +1,4 @@
+{
+  "presets": ["@scm-manager/babel-preset"],
+  "plugins": ["@babel/plugin-syntax-dynamic-import"]
+}
--- a/scm-ui/ui-overlays/.storybook/preview.js
+++ b/scm-ui/ui-overlays/.storybook/preview.js
@@ -23,8 +23,9 @@
 */

 import React, { useEffect } from "react";
-import { I18nextProvider, initReactI18next } from "react-i18next";
+import { initReactI18next } from "react-i18next";
 import i18n from "i18next";
+import { withThemes } from "storybook-addon-themes";

 i18n.use(initReactI18next).init({
  whitelist: ["en", "de"],
@@ -36,7 +37,6 @@ i18n.use(initReactI18next).init({
  react: {
    useSuspense: false,
  },
-
 });

 const Decorator = ({ children, themeName }) => {
@@ -50,15 +50,10 @@ const Decorator = ({ children, themeName }) => {
  return <>{children}</>;
 };

+export const decorators = [withThemes];
+
 export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
-  decorators: [
-    (Story) => (
-      <I18nextProvider i18n={i18n}>
-        <Story />
-      </I18nextProvider>
-    ),
-  ],
  themes: {
    Decorator,
    clearable: false,
--- a/scm-ui/ui-overlays/package.json
+++ b/scm-ui/ui-overlays/package.json
@@ -32,12 +32,16 @@
    "tsup": "^6.2.3"
  },
  "peerDependencies": {
-    "classnames": "^2.3.1",
    "react": "17",
-    "styled-components": "^5.3.6"
+    "react-dom": "17",
+    "react-router-dom": "5",
+    "classnames": "2",
+    "styled-components": "5"
  },
  "dependencies": {
-    "@radix-ui/react-tooltip": "1.0.2"
+    "@radix-ui/react-tooltip": "1.0.2",
+    "@radix-ui/react-dropdown-menu": "2.0.4",
+    "@scm-manager/ui-buttons": "2.43.1-SNAPSHOT"
  },
  "prettier": "@scm-manager/prettier-config",
  "eslintConfig": {
@@ -46,4 +50,4 @@
  "publishConfig": {
    "access": "public"
  }
-}
+}
--- a/scm-ui/ui-overlays/src/index.ts
+++ b/scm-ui/ui-overlays/src/index.ts
@@ -22,4 +22,15 @@
 * SOFTWARE.
 */

+import MenuComponent, { MenuButton, MenuExternalLink, MenuLink } from "./menu/Menu";
+import MenuTrigger, { DEFAULT_MENU_TRIGGER } from "./menu/MenuTrigger";
+
 export { default as Tooltip } from "./tooltip/Tooltip";
+
+export const Menu = Object.assign(MenuComponent, {
+  Button: MenuButton,
+  Link: MenuLink,
+  ExternalLink: MenuExternalLink,
+  Trigger: MenuTrigger,
+  DEFAULT_TRIGGER: DEFAULT_MENU_TRIGGER,
+});
--- a/scm-ui/ui-overlays/src/menu/Menu.stories.tsx
+++ b/scm-ui/ui-overlays/src/menu/Menu.stories.tsx
@@ -0,0 +1,58 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import StoryRouter from "storybook-react-router";
+import { ComponentMeta, StoryFn } from "@storybook/react";
+import React, { ComponentProps } from "react";
+import { ExtractProps } from "@scm-manager/ui-extensions";
+import Menu, { MenuButton, MenuExternalLink, MenuLink } from "./Menu";
+import { Icon } from "@scm-manager/ui-buttons";
+
+export default {
+  title: "Menu",
+  component: Menu,
+  decorators: [StoryRouter()],
+} as ComponentMeta<typeof Menu>;
+
+const Template: StoryFn<ExtractProps<typeof Menu>> = (args) => <Menu {...args} />;
+
+export const Default = Template.bind({});
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+Default.args = {
+  children: [
+    // eslint-disable-next-line no-console
+    <MenuButton onSelect={() => console.log("A button has been clicked")}>
+      <Icon />A button
+    </MenuButton>,
+    <MenuLink to="/repos">
+      <Icon />A link
+    </MenuLink>,
+    <MenuExternalLink href="https://scm-manager.org">
+      <Icon>link</Icon>An external link
+    </MenuExternalLink>,
+    <MenuButton disabled>
+      <Icon>trash</Icon>A disabled button
+    </MenuButton>,
+  ],
+} as ComponentProps<typeof Menu>;
--- a/scm-ui/ui-overlays/src/menu/Menu.tsx
+++ b/scm-ui/ui-overlays/src/menu/Menu.tsx
@@ -0,0 +1,137 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React, { AnchorHTMLAttributes, ButtonHTMLAttributes, FC } from "react";
+import * as RadixMenu from "@radix-ui/react-dropdown-menu";
+import styled from "styled-components";
+import { DEFAULT_MENU_TRIGGER } from "./MenuTrigger";
+import classNames from "classnames";
+import { Link as ReactRouterLink, LinkProps as ReactRouterLinkProps } from "react-router-dom";
+
+const MenuContent = styled(RadixMenu.Content)`
+  border: var(--scm-border);
+  background-color: var(--scm-secondary-background);
+`;
+
+const MenuItem = styled(RadixMenu.Item).attrs({
+  className:
+    "is-flex is-align-items-center px-3 py-2 has-text-inherit is-clickable is-size-6 has-hover-color-blue is-borderless has-background-transparent has-rounded-border",
+})`
+  line-height: inherit;
+  :focus {
+    outline: #af3ee7 3px solid;
+    outline-offset: 0px;
+  }
+  &[data-disabled] {
+    color: unset !important;
+    opacity: 40%;
+    cursor: unset !important;
+  }
+`;
+
+type MenuLinkProps = Omit<ReactRouterLinkProps, "onSelect"> & Pick<RadixMenu.MenuItemProps, "disabled">;
+
+/**
+ * @beta
+ * @since 2.44.0
+ */
+export const MenuLink = React.forwardRef<HTMLAnchorElement, MenuLinkProps>(({ children, disabled, ...props }, ref) => (
+  <MenuItem asChild disabled={disabled}>
+    <ReactRouterLink ref={ref} {...props}>
+      {children}
+    </ReactRouterLink>
+  </MenuItem>
+));
+
+type MenuExternalLinkProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "onSelect"> &
+  Pick<RadixMenu.MenuItemProps, "disabled">;
+
+/**
+ * External links open in a new browser tab with rel flags "noopener" and "noreferrer" set by default.
+ *
+ * @beta
+ * @since 2.44.0
+ */
+export const MenuExternalLink = React.forwardRef<HTMLAnchorElement, MenuExternalLinkProps>(
+  ({ children, disabled, ...props }, ref) => (
+    <MenuItem asChild disabled={disabled}>
+      <a ref={ref} target="_blank" rel="noopener noreferrer" {...props}>
+        {children}
+      </a>
+    </MenuItem>
+  )
+);
+
+type MenuButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onClick" | "onSelect"> &
+  Pick<RadixMenu.MenuItemProps, "onSelect">;
+
+/**
+ * Use {@link MenuButtonProps#onSelect} to handle menu item selection.
+ * The menu will close by default. This behavior can be overwritten by calling {@link Event.preventDefault} on the event.
+ *
+ * @beta
+ * @since 2.44.0
+ */
+export const MenuButton = React.forwardRef<HTMLButtonElement, MenuButtonProps>(
+  ({ children, onSelect, disabled, ...props }, ref) => (
+    <MenuItem asChild disabled={disabled} onSelect={onSelect}>
+      <button ref={ref} {...props}>
+        {children}
+      </button>
+    </MenuItem>
+  )
+);
+
+type Props = {
+  className?: string;
+  trigger?: React.ReactElement;
+} & Pick<RadixMenu.DropdownMenuContentProps, "side">;
+
+/**
+ * A menu consists of a trigger button (vertical ellipsis icon button by default)
+ * and a dropdown container containing individual menu items.
+ *
+ * @beta
+ * @since 2.44.0
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/menubar/
+ */
+const Menu: FC<Props> = ({ children, side, className, trigger = DEFAULT_MENU_TRIGGER }) => {
+  return (
+    <RadixMenu.Root>
+      {trigger}
+      <RadixMenu.Portal>
+        <MenuContent
+          className={classNames(className, "is-flex is-flex-direction-column has-rounded-border has-box-shadow")}
+          side={side}
+          sideOffset={4}
+          collisionPadding={4}
+        >
+          {children}
+        </MenuContent>
+      </RadixMenu.Portal>
+    </RadixMenu.Root>
+  );
+};
+
+export default Menu;
--- a/scm-ui/ui-overlays/src/menu/MenuTrigger.tsx
+++ b/scm-ui/ui-overlays/src/menu/MenuTrigger.tsx
@@ -0,0 +1,59 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React, { ComponentProps } from "react";
+import { Button, Icon } from "@scm-manager/ui-buttons";
+import * as RadixMenu from "@radix-ui/react-dropdown-menu";
+import styled from "styled-components";
+
+type Props = ComponentProps<typeof Button>;
+
+/**
+ * @beta
+ * @since 2.44.0
+ */
+const MenuTrigger = React.forwardRef<HTMLButtonElement, Props>(({ children, ...props }, ref) => (
+  <RadixMenu.Trigger asChild>
+    <Button ref={ref} {...props}>
+      {children}
+    </Button>
+  </RadixMenu.Trigger>
+));
+
+const StyledMenuTrigger = styled(MenuTrigger)`
+  padding-left: 1em;
+  padding-right: 1em;
+`;
+
+/**
+ * @beta
+ * @since 2.44.0
+ */
+export const DEFAULT_MENU_TRIGGER = (
+  <StyledMenuTrigger className="is-borderless has-background-transparent has-hover-color-blue">
+    <Icon>ellipsis-v</Icon>
+  </StyledMenuTrigger>
+);
+
+export default MenuTrigger;
--- a/scm-ui/ui-overlays/src/tooltip/Tooltip.tsx
+++ b/scm-ui/ui-overlays/src/tooltip/Tooltip.tsx
@@ -82,7 +82,8 @@ const Tooltip = React.forwardRef<HTMLDivElement, Props>(({ children, className,
            className
          )}
          side={side}
-          sideOffset={5}
+          sideOffset={4}
+          collisionPadding={4}
          ref={ref}
        >
          {message}
--- a/scm-ui/ui-styles/src/components/_main.scss
+++ b/scm-ui/ui-styles/src/components/_main.scss
@@ -45,6 +45,29 @@
  --scm-popover-border-color: #{$popover-border-color};
 }

+// Workaround for https://github.com/radix-ui/primitives/issues/1572
+@supports (scrollbar-gutter: stable) {
+  html body {
+    margin-right: 0 !important;
+  }
+}
+
+.has-box-shadow {
+  box-shadow: $box-shadow;
+}
+
+.is-borderless {
+  border: none;
+}
+
+.has-background-transparent {
+  background-color: transparent;
+}
+
+.has-hover-color-blue:hover {
+  color: $blue !important;
+}
+
 details > * {
  box-sizing: border-box;
 }
--- a/yarn.lock
+++ b/yarn.lock
@@ -2385,6 +2385,25 @@
    "@babel/runtime" "^7.13.10"
    "@radix-ui/react-primitive" "1.0.1"

+"@radix-ui/react-arrow@1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-arrow/-/react-arrow-1.0.2.tgz#93b0ff95f65e2264a05b14ef1031ec798243dd6f"
+  integrity sha512-fqYwhhI9IarZ0ll2cUSfKuXHlJK0qE4AfnRrPBbRwEH/4mGQn04/QFGomLi8TXWIdv9WJk//KgGm+aDxVIr1wA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-primitive" "1.0.2"
+
+"@radix-ui/react-collection@1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-collection/-/react-collection-1.0.2.tgz#d50da00bfa2ac14585319efdbbb081d4c5a29a97"
+  integrity sha512-s8WdQQ6wNXpaxdZ308KSr8fEWGrg4un8i4r/w7fhiS4ElRNjk5rRcl0/C6TANG2LvLOGIxtzo/jAg6Qf73TEBw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/react-context" "1.0.0"
+    "@radix-ui/react-primitive" "1.0.2"
+    "@radix-ui/react-slot" "1.0.1"
+
 "@radix-ui/react-compose-refs@1.0.0":
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.0.tgz#37595b1f16ec7f228d698590e78eeed18ff218ae"
@@ -2399,6 +2418,13 @@
  dependencies:
    "@babel/runtime" "^7.13.10"

+"@radix-ui/react-direction@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-direction/-/react-direction-1.0.0.tgz#a2e0b552352459ecf96342c79949dd833c1e6e45"
+  integrity sha512-2HV05lGUgYcA6xgLQ4BKPDmtL+QbIZYH5fCOTAOOcJ5O0QbWS3i9lKaurLzliYUDhORI2Qr3pyjhJh44lKA3rQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
 "@radix-ui/react-dismissable-layer@1.0.2":
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.2.tgz#f04d1061bddf00b1ca304148516b9ddc62e45fb2"
@@ -2411,6 +2437,49 @@
    "@radix-ui/react-use-callback-ref" "1.0.0"
    "@radix-ui/react-use-escape-keydown" "1.0.2"

+"@radix-ui/react-dismissable-layer@1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.3.tgz#63844d8e6bbcd010a513e7176d051c3c4044e09e"
+  integrity sha512-nXZOvFjOuHS1ovumntGV7NNoLaEp9JEvTht3MBjP44NSW5hUKj/8OnfN3+8WmB+CEhN44XaGhpHoSsUIEl5P7Q==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.0"
+    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/react-primitive" "1.0.2"
+    "@radix-ui/react-use-callback-ref" "1.0.0"
+    "@radix-ui/react-use-escape-keydown" "1.0.2"
+
+"@radix-ui/react-dropdown-menu@2.0.4":
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.0.4.tgz#237909fb94622a4900b03fbbf75dd394f1ca6273"
+  integrity sha512-y6AT9+MydyXcByivdK1+QpjWoKaC7MLjkS/cH1Q3keEyMvDkiY85m8o2Bi6+Z1PPUlCsMULopxagQOSfN0wahg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.0"
+    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/react-context" "1.0.0"
+    "@radix-ui/react-id" "1.0.0"
+    "@radix-ui/react-menu" "2.0.4"
+    "@radix-ui/react-primitive" "1.0.2"
+    "@radix-ui/react-use-controllable-state" "1.0.0"
+
+"@radix-ui/react-focus-guards@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.0.tgz#339c1c69c41628c1a5e655f15f7020bf11aa01fa"
+  integrity sha512-UagjDk4ijOAnGu4WMUPj9ahi7/zJJqNZ9ZAiGPp7waUWJO0O1aWXi/udPphI0IUjvrhBsZJGSN66dR2dsueLWQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-focus-scope@1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.2.tgz#5fe129cbdb5986d0a3ae16d14c473c243fe3bc79"
+  integrity sha512-spwXlNTfeIprt+kaEWE/qYuYT3ZAqJiAGjN/JgdvgVDTu8yc+HuX+WOWXrKliKnLnwck0F6JDkqIERncnih+4A==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/react-primitive" "1.0.2"
+    "@radix-ui/react-use-callback-ref" "1.0.0"
+
 "@radix-ui/react-id@1.0.0":
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/@radix-ui/react-id/-/react-id-1.0.0.tgz#8d43224910741870a45a8c9d092f25887bb6d11e"
@@ -2419,6 +2488,31 @@
    "@babel/runtime" "^7.13.10"
    "@radix-ui/react-use-layout-effect" "1.0.0"

+"@radix-ui/react-menu@2.0.4":
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-menu/-/react-menu-2.0.4.tgz#0bf06f2ee76889ce9bdcf7fa920545f53060824f"
+  integrity sha512-mzKR47tZ1t193trEqlQoJvzY4u9vYfVH16ryBrVrCAGZzkgyWnMQYEZdUkM7y8ak9mrkKtJiqB47TlEnubeOFQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.0"
+    "@radix-ui/react-collection" "1.0.2"
+    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/react-context" "1.0.0"
+    "@radix-ui/react-direction" "1.0.0"
+    "@radix-ui/react-dismissable-layer" "1.0.3"
+    "@radix-ui/react-focus-guards" "1.0.0"
+    "@radix-ui/react-focus-scope" "1.0.2"
+    "@radix-ui/react-id" "1.0.0"
+    "@radix-ui/react-popper" "1.1.1"
+    "@radix-ui/react-portal" "1.0.2"
+    "@radix-ui/react-presence" "1.0.0"
+    "@radix-ui/react-primitive" "1.0.2"
+    "@radix-ui/react-roving-focus" "1.0.3"
+    "@radix-ui/react-slot" "1.0.1"
+    "@radix-ui/react-use-callback-ref" "1.0.0"
+    aria-hidden "^1.1.1"
+    react-remove-scroll "2.5.5"
+
 "@radix-ui/react-popper@1.0.1":
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/@radix-ui/react-popper/-/react-popper-1.0.1.tgz#9fa8a6a493404afa225866a5cd75af23d141baa0"
@@ -2435,6 +2529,23 @@
    "@radix-ui/react-use-size" "1.0.0"
    "@radix-ui/rect" "1.0.0"

+"@radix-ui/react-popper@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-popper/-/react-popper-1.1.1.tgz#54f060941c981e965ff5d6b64e152d6298d2326e"
+  integrity sha512-keYDcdMPNMjSC8zTsZ8wezUMiWM9Yj14wtF3s0PTIs9srnEPC9Kt2Gny1T3T81mmSeyDjZxsD9N5WCwNNb712w==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@floating-ui/react-dom" "0.7.2"
+    "@radix-ui/react-arrow" "1.0.2"
+    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/react-context" "1.0.0"
+    "@radix-ui/react-primitive" "1.0.2"
+    "@radix-ui/react-use-callback-ref" "1.0.0"
+    "@radix-ui/react-use-layout-effect" "1.0.0"
+    "@radix-ui/react-use-rect" "1.0.0"
+    "@radix-ui/react-use-size" "1.0.0"
+    "@radix-ui/rect" "1.0.0"
+
 "@radix-ui/react-portal@1.0.1":
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.0.1.tgz#169c5a50719c2bb0079cf4c91a27aa6d37e5dd33"
@@ -2443,6 +2554,14 @@
    "@babel/runtime" "^7.13.10"
    "@radix-ui/react-primitive" "1.0.1"

+"@radix-ui/react-portal@1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.0.2.tgz#102370b1027a767a371cab0243be4bc664f72330"
+  integrity sha512-swu32idoCW7KA2VEiUZGBSu9nB6qwGdV6k6HYhUoOo3M1FFpD+VgLzUqtt3mwL1ssz7r2x8MggpLSQach2Xy/Q==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-primitive" "1.0.2"
+
 "@radix-ui/react-presence@1.0.0":
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-1.0.0.tgz#814fe46df11f9a468808a6010e3f3ca7e0b2e84a"
@@ -2460,6 +2579,30 @@
    "@babel/runtime" "^7.13.10"
    "@radix-ui/react-slot" "1.0.1"

+"@radix-ui/react-primitive@1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-1.0.2.tgz#54e22f49ca59ba88d8143090276d50b93f8a7053"
+  integrity sha512-zY6G5Qq4R8diFPNwtyoLRZBxzu1Z+SXMlfYpChN7Dv8gvmx9X3qhDqiLWvKseKVJMuedFeU/Sa0Sy/Ia+t06Dw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-slot" "1.0.1"
+
+"@radix-ui/react-roving-focus@1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.3.tgz#0b4f4f9bd509f4510079e9e0734a734fd17cdce3"
+  integrity sha512-stjCkIoMe6h+1fWtXlA6cRfikdBzCLp3SnVk7c48cv/uy3DTGoXhN76YaOYUJuy3aEDvDIKwKR5KSmvrtPvQPQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.0"
+    "@radix-ui/react-collection" "1.0.2"
+    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/react-context" "1.0.0"
+    "@radix-ui/react-direction" "1.0.0"
+    "@radix-ui/react-id" "1.0.0"
+    "@radix-ui/react-primitive" "1.0.2"
+    "@radix-ui/react-use-callback-ref" "1.0.0"
+    "@radix-ui/react-use-controllable-state" "1.0.0"
+
 "@radix-ui/react-slot@1.0.1":
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.0.1.tgz#e7868c669c974d649070e9ecbec0b367ee0b4d81"
@@ -6548,6 +6691,13 @@ args@^5.0.1:
    leven "2.1.0"
    mri "1.1.4"

+aria-hidden@^1.1.1:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/aria-hidden/-/aria-hidden-1.2.3.tgz#14aeb7fb692bbb72d69bebfa47279c1fd725e954"
+  integrity sha512-xcLxITLe2HYa1cnYnwCjkOO1PqUHQpozB8x9AR0OgWN2woOBi5kSDVxKfd0b7sb1hw5qFeJhXm9H1nu3xSfLeQ==
+  dependencies:
+    tslib "^2.0.0"
+
 aria-query@^4.2.2:
  version "4.2.2"
  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-4.2.2.tgz#0d2ca6c9aceb56b8977e9fed6aed7e15bbd2f83b"
@@ -11123,6 +11273,11 @@ get-intrinsic@^1.0.2, get-intrinsic@^1.1.0, get-intrinsic@^1.1.1:
    has "^1.0.3"
    has-symbols "^1.0.3"

+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"
@@ -17373,6 +17528,25 @@ react-refresh@^0.14.0:
  resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e"
  integrity sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==

+react-remove-scroll-bar@^2.3.3:
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.4.tgz#53e272d7a5cb8242990c7f144c44d8bd8ab5afd9"
+  integrity sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==
+  dependencies:
+    react-style-singleton "^2.2.1"
+    tslib "^2.0.0"
+
+react-remove-scroll@2.5.5:
+  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-router-dom@^5.3.1:
  version "5.3.3"
  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.3.3.tgz#8779fc28e6691d07afcaf98406d3812fe6f11199"
@@ -17433,6 +17607,15 @@ react-sizeme@^3.0.1:
    shallowequal "^1.1.0"
    throttle-debounce "^3.0.1"

+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-syntax-highlighter@^11.0.2:
  version "11.0.3"
  resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-11.0.3.tgz#de639b97b781c3f7056d1ee7b6573ea8ab741460"
@@ -17483,16 +17666,7 @@ react-transition-group@^2.2.1:
    prop-types "^15.6.2"
    react-lifecycles-compat "^3.0.4"

-react@^16.8.3:
-  version "16.14.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"
-  integrity sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    prop-types "^15.6.2"
-
-react@^17.0.1:
+react@17.0.2, react@^16.8.3, react@^17.0.1:
  version "17.0.2"
  resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
  integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==