✨(app-desk) component DropButton

Button that opens a dropdown menu when clicked. It will manage all the state related to the dropdown menu. Can be used controlled or uncontrolled.
2024-03-01 16:52:02 +01:00
parent b5ce19a28e
commit b41fd1ab69
4 changed files with 214 additions and 25 deletions
--- a/src/frontend/apps/desk/package.json
+++ b/src/frontend/apps/desk/package.json
@@ -21,6 +21,7 @@
    "luxon": "3.4.4",
    "next": "14.1.1",
    "react": "18.2.0",
+    "react-aria-components": "1.1.1",
    "react-dom": "18.2.0",
    "react-i18next": "14.0.5",
    "styled-components": "6.1.8",
--- a/src/frontend/apps/desk/src/components/DropButton.tsx
+++ b/src/frontend/apps/desk/src/components/DropButton.tsx
@@ -0,0 +1,64 @@
+import React, {
+  PropsWithChildren,
+  ReactNode,
+  useEffect,
+  useState,
+} from 'react';
+import { Button, DialogTrigger, Popover } from 'react-aria-components';
+import styled from 'styled-components';
+
+const StyledPopover = styled(Popover)`
+  background-color: white;
+  border-radius: 4px;
+  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
+  padding: 0.5rem;
+  border: 1px solid #dddddd;
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+`;
+
+const StyledButton = styled(Button)`
+  cursor: pointer;
+  border: none;
+  background: none;
+  outline: none;
+  transition: all 0.2s ease-in-out;
+`;
+
+interface DropButtonProps {
+  button: ReactNode;
+  isOpen?: boolean;
+  onOpenChange?: (isOpen: boolean) => void;
+}
+
+export const DropButton = ({
+  button,
+  isOpen = false,
+  onOpenChange,
+  children,
+}: PropsWithChildren<DropButtonProps>) => {
+  const [opacity, setOpacity] = useState(false);
+  const [isLocalOpen, setIsLocalOpen] = useState(isOpen);
+
+  useEffect(() => {
+    setIsLocalOpen(isOpen);
+  }, [isOpen]);
+
+  return (
+    <DialogTrigger
+      onOpenChange={(isOpen) => {
+        setIsLocalOpen(isOpen);
+        onOpenChange?.(isOpen);
+        setTimeout(() => {
+          setOpacity(isOpen);
+        }, 10);
+      }}
+      isOpen={isLocalOpen}
+    >
+      <StyledButton>{button}</StyledButton>
+      <StyledPopover style={{ opacity: opacity ? 1 : 0 }} isOpen={isLocalOpen}>
+        {children}
+      </StyledPopover>
+    </DialogTrigger>
+  );
+};
--- a/src/frontend/apps/desk/src/components/index.ts
+++ b/src/frontend/apps/desk/src/components/index.ts
@@ -1,5 +1,6 @@
 export * from './Box';
-export * from './Text';
-export * from './Link';
-export * from './TextErrors';
 export * from './Card';
+export * from './DropButton';
+export * from './Link';
+export * from './Text';
+export * from './TextErrors';
--- a/src/frontend/yarn.lock
+++ b/src/frontend/yarn.lock
@@ -1809,7 +1809,7 @@
  dependencies:
    playwright "1.42.1"

-"@react-aria/breadcrumbs@^3.5.8":
+"@react-aria/breadcrumbs@^3.5.11", "@react-aria/breadcrumbs@^3.5.8":
  version "3.5.11"
  resolved "https://registry.yarnpkg.com/@react-aria/breadcrumbs/-/breadcrumbs-3.5.11.tgz#993898f81e01e7dcc1e3aff82b3ae939e55a1030"
  integrity sha512-bQz4g2tKvcWxeqPGj9O0RQf++Ka8f2o/pJMJB+QQ27DVQWhxpQpND//oFku2aFYkxHB/fyD9qVoiqpQR25bidw==
@@ -1821,7 +1821,7 @@
    "@react-types/shared" "^3.22.1"
    "@swc/helpers" "^0.5.0"

-"@react-aria/button@^3.9.0":
+"@react-aria/button@^3.9.0", "@react-aria/button@^3.9.3":
  version "3.9.3"
  resolved "https://registry.yarnpkg.com/@react-aria/button/-/button-3.9.3.tgz#5d83a455667820ae1b91dad581680b5cf1bcbcee"
  integrity sha512-ZXo2VGTxfbaTEnfeIlm5ym4vYpGAy8sGrad8Scv+EyDAJWLMKokqctfaN6YSWbqUApC3FN63IvMqASflbmnYig==
@@ -1850,7 +1850,7 @@
    "@react-types/shared" "^3.22.0"
    "@swc/helpers" "^0.5.0"

-"@react-aria/calendar@^3.5.3":
+"@react-aria/calendar@^3.5.3", "@react-aria/calendar@^3.5.6":
  version "3.5.6"
  resolved "https://registry.yarnpkg.com/@react-aria/calendar/-/calendar-3.5.6.tgz#2d2c530a50063cb35169f73b445d7cb1ee982121"
  integrity sha512-PA0Ur5WcODMn7t2gCUvq61YktkB+WlSZjzDr5kcY3sdl53ZjiyqCa2hYgrb6R0J859LVJXAp+5Qaproz8g1oLA==
@@ -1866,7 +1866,7 @@
    "@react-types/shared" "^3.22.1"
    "@swc/helpers" "^0.5.0"

-"@react-aria/checkbox@^3.12.0":
+"@react-aria/checkbox@^3.12.0", "@react-aria/checkbox@^3.14.1":
  version "3.14.1"
  resolved "https://registry.yarnpkg.com/@react-aria/checkbox/-/checkbox-3.14.1.tgz#0d9fb482f9b74702ead6629e2aadc0fd89770fd9"
  integrity sha512-b4rtrg5SpRSa9jBOqzJMmprJ+jDi3KyVvUh+DsvISe5Ti7gVAhMBgnca1D0xBp22w2jhk/o4gyu1bYxGLum0GA==
@@ -1883,7 +1883,7 @@
    "@react-types/shared" "^3.22.1"
    "@swc/helpers" "^0.5.0"

-"@react-aria/combobox@^3.8.0":
+"@react-aria/combobox@^3.8.0", "@react-aria/combobox@^3.8.4":
  version "3.8.4"
  resolved "https://registry.yarnpkg.com/@react-aria/combobox/-/combobox-3.8.4.tgz#8ae8e935ff323a3c12331aa7731af7945c0c82a5"
  integrity sha512-HyTWIo2B/0xq0Of+sDEZCfJyf4BvCvDYIWG4UhjqL1kHIHIGQyyr+SldbVUjXVYnk8pP1eGB3ttiREujjjALPQ==
@@ -1928,7 +1928,7 @@
    "@react-types/shared" "^3.22.0"
    "@swc/helpers" "^0.5.0"

-"@react-aria/datepicker@^3.9.0":
+"@react-aria/datepicker@^3.9.0", "@react-aria/datepicker@^3.9.3":
  version "3.9.3"
  resolved "https://registry.yarnpkg.com/@react-aria/datepicker/-/datepicker-3.9.3.tgz#5efbc22e8529bf582336ffa81618f18212fff3a3"
  integrity sha512-1AjCAizd88ACKjVNhFazX4HZZFwWi2rsSlGCTm66Nx6wm5N/Cpbm466dpYEFyQUsKSOG4CC65G1zfYoMPe48MQ==
@@ -1952,7 +1952,7 @@
    "@react-types/shared" "^3.22.1"
    "@swc/helpers" "^0.5.0"

-"@react-aria/dialog@^3.5.8":
+"@react-aria/dialog@^3.5.12", "@react-aria/dialog@^3.5.8":
  version "3.5.12"
  resolved "https://registry.yarnpkg.com/@react-aria/dialog/-/dialog-3.5.12.tgz#e43d31211bde833de6add609e4f24e8409a9a200"
  integrity sha512-7UJR/h/Y364u6Ltpw0bT51B48FybTuIBacGpEJN5IxZlpxvQt0KQcBDiOWfAa/GQogw4B5hH6agaOO0nJcP49Q==
@@ -1964,7 +1964,7 @@
    "@react-types/shared" "^3.22.1"
    "@swc/helpers" "^0.5.0"

-"@react-aria/dnd@^3.5.0":
+"@react-aria/dnd@^3.5.0", "@react-aria/dnd@^3.5.3":
  version "3.5.3"
  resolved "https://registry.yarnpkg.com/@react-aria/dnd/-/dnd-3.5.3.tgz#7747ed2d7f3e54f59799c51efc12c63ea7afd4d4"
  integrity sha512-0gi6sRnr97fSQnGy+CMt+99/+vVqr+qv2T9Ts8X9TAzxHNokz5QfSL88QSlTU36EnAVLxPY18iZQWCExSjKpEQ==
@@ -2137,7 +2137,7 @@
    "@react-types/shared" "^3.22.1"
    "@swc/helpers" "^0.5.0"

-"@react-aria/meter@^3.4.8":
+"@react-aria/meter@^3.4.11", "@react-aria/meter@^3.4.8":
  version "3.4.11"
  resolved "https://registry.yarnpkg.com/@react-aria/meter/-/meter-3.4.11.tgz#c150e3c890ffa9ebd34519a0c0985c0e9bf30965"
  integrity sha512-P1G3Jdh0f/uieUDqvc3Ee4wzqBJa7H077BVSC3KPRqEp6YY7JimZGWjOwbFlO2PXhryXm/dI8EzUmh+4ZXjq/g==
@@ -2147,7 +2147,7 @@
    "@react-types/shared" "^3.22.1"
    "@swc/helpers" "^0.5.0"

-"@react-aria/numberfield@^3.10.0":
+"@react-aria/numberfield@^3.10.0", "@react-aria/numberfield@^3.11.1":
  version "3.11.1"
  resolved "https://registry.yarnpkg.com/@react-aria/numberfield/-/numberfield-3.11.1.tgz#34925e2e05ff24102aa63da13318d5a5d36a28ef"
  integrity sha512-JQ1Z+Ho5H+jeav7jt9A4vBsIQR/Dd2CFbObrULjGkqSrnWjARFZBv3gZwmfGCtplEPeAv9buYKHAqebPtJNUww==
@@ -2193,7 +2193,7 @@
    "@react-types/shared" "^3.22.1"
    "@swc/helpers" "^0.5.0"

-"@react-aria/radio@^3.9.0":
+"@react-aria/radio@^3.10.2", "@react-aria/radio@^3.9.0":
  version "3.10.2"
  resolved "https://registry.yarnpkg.com/@react-aria/radio/-/radio-3.10.2.tgz#075a41ef462c0c0403cb97eff9a4b5205f9b666e"
  integrity sha512-CTUTR+qt3BLjmyQvKHZuVm+1kyvT72ZptOty++sowKXgJApTLdjq8so1IpaLAr8JIfzqD5I4tovsYwIQOX8log==
@@ -2209,7 +2209,7 @@
    "@react-types/shared" "^3.22.1"
    "@swc/helpers" "^0.5.0"

-"@react-aria/searchfield@^3.6.0":
+"@react-aria/searchfield@^3.6.0", "@react-aria/searchfield@^3.7.3":
  version "3.7.3"
  resolved "https://registry.yarnpkg.com/@react-aria/searchfield/-/searchfield-3.7.3.tgz#1b8b129085abf63cc0d4c3d52cb192c4731e570b"
  integrity sha512-mnYI969R7tU3yMRIGmY1+peq7tmEW0W3MB/J2ImK36Obz/91tTtspHHEeFtPlQDLIyvVPB0Ucam4LIxCKPJm/Q==
@@ -2223,7 +2223,7 @@
    "@react-types/shared" "^3.22.1"
    "@swc/helpers" "^0.5.0"

-"@react-aria/select@^3.14.0":
+"@react-aria/select@^3.14.0", "@react-aria/select@^3.14.3":
  version "3.14.3"
  resolved "https://registry.yarnpkg.com/@react-aria/select/-/select-3.14.3.tgz#2daad6253998e17b97bd044e2368025072c033ec"
  integrity sha512-9KCxI41FI+jTxEfUzRsMdJsZvjkCuuhL4UHig8MZXtXs0nsi7Ir3ezUDQ9m5MSG+ooBYM/CA9DyLDvo5Ioef+g==
@@ -2256,7 +2256,7 @@
    "@react-types/shared" "^3.22.1"
    "@swc/helpers" "^0.5.0"

-"@react-aria/separator@^3.3.8":
+"@react-aria/separator@^3.3.11", "@react-aria/separator@^3.3.8":
  version "3.3.11"
  resolved "https://registry.yarnpkg.com/@react-aria/separator/-/separator-3.3.11.tgz#64e4bd25cd5ddaac80e22c6537c89e9d4eccb84a"
  integrity sha512-UTla+3P2pELpP73WSfbwZgP1y1wODFBQbEOHnUxxO8ocyaUyQLJdvc07bBLLpPoyutlggRG0v9ACo0Rui7AjOg==
@@ -2265,7 +2265,7 @@
    "@react-types/shared" "^3.22.1"
    "@swc/helpers" "^0.5.0"

-"@react-aria/slider@^3.7.3":
+"@react-aria/slider@^3.7.3", "@react-aria/slider@^3.7.6":
  version "3.7.6"
  resolved "https://registry.yarnpkg.com/@react-aria/slider/-/slider-3.7.6.tgz#51618d0fe1fd9f61035e92eba9e7908558e16e9a"
  integrity sha512-ZeZhyHzhk9gxGuThPKgX2K3RKsxPxsFig1iYoJvqP8485NtHYQIPht2YcpEKA9siLxGF0DR9VCfouVhSoW0AEA==
@@ -2299,7 +2299,7 @@
  dependencies:
    "@swc/helpers" "^0.5.0"

-"@react-aria/switch@^3.5.7":
+"@react-aria/switch@^3.5.7", "@react-aria/switch@^3.6.2":
  version "3.6.2"
  resolved "https://registry.yarnpkg.com/@react-aria/switch/-/switch-3.6.2.tgz#a790b97ffcdd4104d4a8167229a4eb73455f7d4b"
  integrity sha512-X5m/omyhXK+V/vhJFsHuRs2zmt9Asa/RuzlldbXnWohLdeuHMPgQnV8C9hg3f+sRi3sh9UUZ64H61pCtRoZNwg==
@@ -2309,7 +2309,7 @@
    "@react-types/switch" "^3.5.1"
    "@swc/helpers" "^0.5.0"

-"@react-aria/table@^3.13.2":
+"@react-aria/table@^3.13.2", "@react-aria/table@^3.13.5":
  version "3.13.5"
  resolved "https://registry.yarnpkg.com/@react-aria/table/-/table-3.13.5.tgz#1ecc2387c9cdabe282b24d1444928864a5d6087e"
  integrity sha512-P2nHEDk2CCoEbMFKNCyBC9qvmv7F/IXARDt/7z/J4mKFgU2iNSK+/zw6yrb38q33Zlk8hDaqSYNxHlMrh+/1MQ==
@@ -2331,7 +2331,7 @@
    "@react-types/table" "^3.9.3"
    "@swc/helpers" "^0.5.0"

-"@react-aria/tabs@^3.8.2":
+"@react-aria/tabs@^3.8.2", "@react-aria/tabs@^3.8.5":
  version "3.8.5"
  resolved "https://registry.yarnpkg.com/@react-aria/tabs/-/tabs-3.8.5.tgz#b83df9f9055ad67d3797b86892702065fc5f06bc"
  integrity sha512-Jvt33/W+66n5oCxVwHAYarJ3Fit61vULiPcG7uTez0Mf11cq/C72wOrj+ZuNz6PTLTi2veBNQ7MauY72SnOjRg==
@@ -2345,7 +2345,7 @@
    "@react-types/tabs" "^3.3.5"
    "@swc/helpers" "^0.5.0"

-"@react-aria/tag@^3.3.0":
+"@react-aria/tag@^3.3.0", "@react-aria/tag@^3.3.3":
  version "3.3.3"
  resolved "https://registry.yarnpkg.com/@react-aria/tag/-/tag-3.3.3.tgz#adb4e02ab2e15a78046bbb7831a534d6d33781b6"
  integrity sha512-tlJD9qj1XcsPIZD7DVJ6tWv8t7Z87/8qkbRDx7ugNqeHso9z0WqH9ZkSt17OFUWE2IQIk3V8D3iBSOtmhXcZGQ==
@@ -2388,7 +2388,18 @@
    "@react-types/checkbox" "^3.7.1"
    "@swc/helpers" "^0.5.0"

-"@react-aria/tooltip@^3.6.5":
+"@react-aria/toolbar@3.0.0-beta.3":
+  version "3.0.0-beta.3"
+  resolved "https://registry.yarnpkg.com/@react-aria/toolbar/-/toolbar-3.0.0-beta.3.tgz#7b4a0e1da137cb84a65b38e0a4802984759e3d9f"
+  integrity sha512-tPIEPRsZI/6Mb0tAW/GBTt3wBk7dfJg/eUnTloY8NHialvDa+cMUQyUVzPyLWGpErhYeBeutBmw1e2seMjmu+A==
+  dependencies:
+    "@react-aria/focus" "^3.16.2"
+    "@react-aria/i18n" "^3.10.2"
+    "@react-aria/utils" "^3.23.2"
+    "@react-types/shared" "^3.22.1"
+    "@swc/helpers" "^0.5.0"
+
+"@react-aria/tooltip@^3.6.5", "@react-aria/tooltip@^3.7.2":
  version "3.7.2"
  resolved "https://registry.yarnpkg.com/@react-aria/tooltip/-/tooltip-3.7.2.tgz#ccbcef4efcb27486cd845a734794d541696e3692"
  integrity sha512-6jXOSGPao3gPgUQWLbH2r/jxGMqIaIKrJgfwu9TQrh+UkwwiTYW20EpEDCYY2nRFlcoi7EYAiPDSEbHCwXS7Lg==
@@ -2478,6 +2489,14 @@
    "@react-types/shared" "^3.22.1"
    "@swc/helpers" "^0.5.0"

+"@react-stately/data@^3.11.2":
+  version "3.11.2"
+  resolved "https://registry.yarnpkg.com/@react-stately/data/-/data-3.11.2.tgz#835c9a90eaeb832dbaac4c96f1aa91008913efb8"
+  integrity sha512-yhK2upk2WbJeiLBRWHrh/4G2CvmmozCzoivLaRAPYu53m1J3MyzVGCLJgnZMbMZvAbNcYWZK6IzO6VqZ2y1fOw==
+  dependencies:
+    "@react-types/shared" "^3.22.1"
+    "@swc/helpers" "^0.5.0"
+
 "@react-stately/datepicker@3.9.0":
  version "3.9.0"
  resolved "https://registry.yarnpkg.com/@react-stately/datepicker/-/datepicker-3.9.0.tgz#0771c66df937806f812392f8a512a2e72bebbaf0"
@@ -2759,6 +2778,13 @@
    "@react-types/overlays" "^3.8.5"
    "@react-types/shared" "^3.22.1"

+"@react-types/form@^3.7.2":
+  version "3.7.2"
+  resolved "https://registry.yarnpkg.com/@react-types/form/-/form-3.7.2.tgz#bfa8aef2f6e1ee579ab2f9a1f40556ae24f72d32"
+  integrity sha512-6/isEJY4PsYoHdMaGQtqQyquXGTwB1FqCBOPKQjI/vBGWG3fL7FGfWm4Z62eTbCH4Xyv3FZuNywlT8UjPMQyKA==
+  dependencies:
+    "@react-types/shared" "^3.22.1"
+
 "@react-types/grid@^3.2.4":
  version "3.2.4"
  resolved "https://registry.yarnpkg.com/@react-types/grid/-/grid-3.2.4.tgz#47b28424409b66b3bfcfcde03c92f03d6d41d1ba"
@@ -4186,7 +4212,7 @@ classnames@2.3.2:
  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
  integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==

-client-only@0.0.1:
+client-only@0.0.1, client-only@^0.0.1:
  version "0.0.1"
  resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
  integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
@@ -7782,6 +7808,31 @@ quick-temp@^0.1.8:
    rimraf "^2.5.4"
    underscore.string "~3.3.4"

+react-aria-components@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/react-aria-components/-/react-aria-components-1.1.1.tgz#85e47d9321af878f9e7a183c943d7c222ab0c370"
+  integrity sha512-XdgqSbrlh9V1vJEvTwrnr+YGndQWYcVEAbN+Rx104o9g88cAAabclgetU2OUJ9Gbht6+gwnvnA0ksgXzVZog2Q==
+  dependencies:
+    "@internationalized/date" "^3.5.2"
+    "@internationalized/string" "^3.2.1"
+    "@react-aria/focus" "^3.16.2"
+    "@react-aria/interactions" "^3.21.1"
+    "@react-aria/menu" "^3.13.1"
+    "@react-aria/toolbar" "3.0.0-beta.3"
+    "@react-aria/utils" "^3.23.2"
+    "@react-stately/menu" "^3.6.1"
+    "@react-stately/table" "^3.11.6"
+    "@react-stately/utils" "^3.9.1"
+    "@react-types/form" "^3.7.2"
+    "@react-types/grid" "^3.2.4"
+    "@react-types/shared" "^3.22.1"
+    "@react-types/table" "^3.9.3"
+    "@swc/helpers" "^0.5.0"
+    client-only "^0.0.1"
+    react-aria "^3.32.1"
+    react-stately "^3.30.1"
+    use-sync-external-store "^1.2.0"
+
 react-aria@3.30.0:
  version "3.30.0"
  resolved "https://registry.yarnpkg.com/react-aria/-/react-aria-3.30.0.tgz#dd53d2103050e7279ec8f3faacce5ae8521f61ce"
@@ -7824,6 +7875,49 @@ react-aria@3.30.0:
    "@react-aria/visually-hidden" "^3.8.7"
    "@react-types/shared" "^3.22.0"

+react-aria@^3.32.1:
+  version "3.32.1"
+  resolved "https://registry.yarnpkg.com/react-aria/-/react-aria-3.32.1.tgz#e490259969b8cfbcc0fdb9cd3e041b1769b285d4"
+  integrity sha512-7KCJg4K5vlRqiXdGjgCT05Du8RhGBYC+2ok4GOh/Znmg8aMwOk7t0YwxaT5i1z30+fmDcJS/pk/ipUPUg28CXg==
+  dependencies:
+    "@internationalized/string" "^3.2.1"
+    "@react-aria/breadcrumbs" "^3.5.11"
+    "@react-aria/button" "^3.9.3"
+    "@react-aria/calendar" "^3.5.6"
+    "@react-aria/checkbox" "^3.14.1"
+    "@react-aria/combobox" "^3.8.4"
+    "@react-aria/datepicker" "^3.9.3"
+    "@react-aria/dialog" "^3.5.12"
+    "@react-aria/dnd" "^3.5.3"
+    "@react-aria/focus" "^3.16.2"
+    "@react-aria/gridlist" "^3.7.5"
+    "@react-aria/i18n" "^3.10.2"
+    "@react-aria/interactions" "^3.21.1"
+    "@react-aria/label" "^3.7.6"
+    "@react-aria/link" "^3.6.5"
+    "@react-aria/listbox" "^3.11.5"
+    "@react-aria/menu" "^3.13.1"
+    "@react-aria/meter" "^3.4.11"
+    "@react-aria/numberfield" "^3.11.1"
+    "@react-aria/overlays" "^3.21.1"
+    "@react-aria/progress" "^3.4.11"
+    "@react-aria/radio" "^3.10.2"
+    "@react-aria/searchfield" "^3.7.3"
+    "@react-aria/select" "^3.14.3"
+    "@react-aria/selection" "^3.17.5"
+    "@react-aria/separator" "^3.3.11"
+    "@react-aria/slider" "^3.7.6"
+    "@react-aria/ssr" "^3.9.2"
+    "@react-aria/switch" "^3.6.2"
+    "@react-aria/table" "^3.13.5"
+    "@react-aria/tabs" "^3.8.5"
+    "@react-aria/tag" "^3.3.3"
+    "@react-aria/textfield" "^3.14.3"
+    "@react-aria/tooltip" "^3.7.2"
+    "@react-aria/utils" "^3.23.2"
+    "@react-aria/visually-hidden" "^3.8.10"
+    "@react-types/shared" "^3.22.1"
+
 react-dom@18.2.0:
  version "18.2.0"
  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
@@ -7855,6 +7949,35 @@ react-is@^18.0.0, react-is@^18.2.0:
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
  integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==

+react-stately@^3.30.1:
+  version "3.30.1"
+  resolved "https://registry.yarnpkg.com/react-stately/-/react-stately-3.30.1.tgz#7d87649c69f1bcf42c68a732f121ff23393f5abb"
+  integrity sha512-IEhKHMT7wijtczA5vtw/kdq9CZuOIF+ReoSimydTFiABRQxWO9ESAl/fToXOUM9qmCdhdqjGJgMAhqTnmheh8g==
+  dependencies:
+    "@react-stately/calendar" "^3.4.4"
+    "@react-stately/checkbox" "^3.6.3"
+    "@react-stately/collections" "^3.10.5"
+    "@react-stately/combobox" "^3.8.2"
+    "@react-stately/data" "^3.11.2"
+    "@react-stately/datepicker" "^3.9.2"
+    "@react-stately/dnd" "^3.2.8"
+    "@react-stately/form" "^3.0.1"
+    "@react-stately/list" "^3.10.3"
+    "@react-stately/menu" "^3.6.1"
+    "@react-stately/numberfield" "^3.9.1"
+    "@react-stately/overlays" "^3.6.5"
+    "@react-stately/radio" "^3.10.2"
+    "@react-stately/searchfield" "^3.5.1"
+    "@react-stately/select" "^3.6.2"
+    "@react-stately/selection" "^3.14.3"
+    "@react-stately/slider" "^3.5.2"
+    "@react-stately/table" "^3.11.6"
+    "@react-stately/tabs" "^3.6.4"
+    "@react-stately/toggle" "^3.7.2"
+    "@react-stately/tooltip" "^3.4.7"
+    "@react-stately/tree" "^3.7.6"
+    "@react-types/shared" "^3.22.1"
+
 react@18.2.0:
  version "18.2.0"
  resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
@@ -9002,7 +9125,7 @@ url-parse@^1.5.3:
    querystringify "^2.1.1"
    requires-port "^1.0.0"

-use-sync-external-store@1.2.0:
+use-sync-external-store@1.2.0, use-sync-external-store@^1.2.0:
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
  integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==