chore: replace react-portal with react-useportal

canonical · Apr 2, 2024 · 6a733f9 · 6a733f9
1 parent 27e3e09
commit 6a733f9
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 51 deletions.
diff --git a/package.json b/package.json
@@ -64,7 +64,6 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-dropzone": "14.2.3",
-    "react-portal": "4.2.2",
     "react-redux": "8.0.5",
     "react-router-dom": "6.22.3",
     "react-storage-hooks": "4.0.1",
@@ -109,7 +108,6 @@
     "@types/pluralize": "0.0.33",
     "@types/react": "18.2.73",
     "@types/react-dom": "18.2.23",
-    "@types/react-portal": "4.0.7",
     "@types/react-redux": "7.1.33",
     "@types/react-router": "5.1.20",
     "@types/react-router-dom": "5.3.3",

diff --git a/src/app/base/components/NodeConfigurationFields/NodeConfigurationFields.tsx b/src/app/base/components/NodeConfigurationFields/NodeConfigurationFields.tsx
@@ -2,8 +2,8 @@ import { useState } from "react";
 
 import { Col, Modal, Row, Textarea } from "@canonical/react-components";
 import { useFormikContext } from "formik";
-import { Portal } from "react-portal";
 import { useSelector } from "react-redux";
+import usePortal from "react-useportal";
 import * as Yup from "yup";
 import type { SchemaOf } from "yup";
 
@@ -31,11 +31,11 @@ export const NodeConfigurationSchema: SchemaOf<NodeConfigurationValues> =
     .defined();
 
 const NodeConfigurationFields = (): JSX.Element => {
+  const { openPortal, closePortal, isOpen, Portal, ref } = usePortal();
   const { setFieldValue, values } = useFormikContext<NodeConfigurationValues>();
   const selectedTags = useSelector((state: RootState) =>
     tagSelectors.getByIDs(state, values.tags)
   );
-  const [isOpen, setIsOpen] = useState(false);
   const [newTagName, setNewTagName] = useState<string | null>(null);
   const manualTags = useSelector(tagSelectors.getManual);
 
@@ -50,14 +50,15 @@ const NodeConfigurationFields = (): JSX.Element => {
             name="description"
           />
           <TagIdField
+            addTagRef={ref}
             disabledTags={selectedTags.filter(
               (tag) => tag.definition.length > 0
             )}
             externalSelectedTags={selectedTags}
             name="tags"
             onAddNewTag={(name) => {
               setNewTagName(name);
-              setIsOpen(true);
+              openPortal();
             }}
             placeholder="Create or remove tags"
             tagList={manualTags}
@@ -68,7 +69,7 @@ const NodeConfigurationFields = (): JSX.Element => {
         <Portal>
           <Modal
             className="tag-form__modal"
-            close={() => setIsOpen(false)}
+            close={() => closePortal()}
             title={Label.AddTag}
           >
             <AddTagForm
@@ -81,7 +82,7 @@ const NodeConfigurationFields = (): JSX.Element => {
               onTagCreated={(tag) => {
                 setFieldValue("tags", values.tags.concat([tag.id]));
                 setNewTagName(null);
-                setIsOpen(false);
+                closePortal();
               }}
             />
           </Modal>

diff --git a/src/app/base/components/TagSelector/TagSelector.tsx b/src/app/base/components/TagSelector/TagSelector.tsx
@@ -13,6 +13,7 @@ export type Tag = {
 };
 
 export type Props = {
+  addTagRef?: React.RefObject<HTMLLIElement>;
   allowNewTags?: boolean;
   disabled?: boolean;
   error?: string;
@@ -66,6 +67,7 @@ const generateDropdownItems = ({
   tags,
   updateTags,
   generateDropdownEntry,
+  addTagRef,
 }: {
   allowNewTags: Props["allowNewTags"];
   onAddNewTag: Props["onAddNewTag"];
@@ -75,6 +77,7 @@ const generateDropdownItems = ({
   tags: Tag[];
   updateTags: UpdateTags;
   generateDropdownEntry: Props["generateDropdownEntry"];
+  addTagRef?: React.RefObject<HTMLLIElement>;
 }): JSX.Element[] => {
   const dropdownItems = [];
   if (
@@ -86,7 +89,7 @@ const generateDropdownItems = ({
     // Insert an extra item for creating a new tag if allowed and filter is not
     // an already existing tag
     const newTagItem = (
-      <li className="tag-selector__dropdown-item" key={filter}>
+      <li className="tag-selector__dropdown-item" key={filter} ref={addTagRef}>
         <Button
           appearance="base"
           className="tag-selector__dropdown-button u-break-word"
@@ -202,6 +205,7 @@ export const TagSelector = ({
   showSelectedTags = true,
   tags = [],
   disabledTags = [],
+  addTagRef,
   ...props
 }: Props): JSX.Element => {
   const wrapperRef = useClickOutside<HTMLDivElement>(() =>
@@ -237,6 +241,7 @@ export const TagSelector = ({
     tags,
     updateTags,
     generateDropdownEntry,
+    addTagRef,
   });
 
   return (

diff --git a/yarn.lock b/yarn.lock
@@ -4801,13 +4801,6 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-portal@4.0.7":
-  version "4.0.7"
-  resolved "https://registry.yarnpkg.com/@types/react-portal/-/react-portal-4.0.7.tgz#c7436c5039e74ec80d488fbe5c98dbcc6469bf44"
-  integrity sha512-3zQJL6Pqcq7d73+cakVkZDqAYGFBo37XXPfahjhdScr9EdYPlf9evYilL38Fpzs1YGWz7F2SkPtN6+ygTO7ymg==
-  dependencies:
-    "@types/react" "*"
-
 "@types/react-redux@7.1.33":
   version "7.1.33"
   resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.33.tgz#53c5564f03f1ded90904e3c90f77e4bd4dc20b15"
@@ -11209,7 +11202,7 @@ prompts@^2.4.0:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@15.8.1, prop-types@^15.5.8, prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@15.8.1, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -11466,13 +11459,6 @@ react-is@^18.0.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
-react-portal@4.2.2:
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/react-portal/-/react-portal-4.2.2.tgz#bff1e024147d6041ba8c530ffc99d4c8248f49fa"
-  integrity sha512-vS18idTmevQxyQpnde0Td6ZcUlv+pD8GTyR42n3CHUQq9OHi1C4jDE4ZWEbEsrbrLRhSECYiao58cvocwMtP7Q==
-  dependencies:
-    prop-types "^15.5.8"
-
 react-redux@8.0.5:
   version "8.0.5"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-8.0.5.tgz#e5fb8331993a019b8aaf2e167a93d10af469c7bd"
@@ -12455,7 +12441,8 @@ string-natural-compare@^3.0.1:
   resolved "https://registry.yarnpkg.com/string-natural-compare/-/string-natural-compare-3.0.1.tgz#7a42d58474454963759e8e8b7ae63d71c1e7fdf4"
   integrity sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw==
 
-"string-width-cjs@npm:string-width@^4.2.0":
+"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.2.3:
+  name string-width-cjs
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -12473,15 +12460,6 @@ string-width@^4.1.0, string-width@^4.2.0:
     is-fullwidth-code-point "^3.0.0"
     strip-ansi "^6.0.0"
 
-string-width@^4.2.3:
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
 string-width@^5.0.1, string-width@^5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794"
@@ -12547,7 +12525,8 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.1:
+  name strip-ansi-cjs
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -12561,13 +12540,6 @@ strip-ansi@^6.0.0:
   dependencies:
     ansi-regex "^5.0.0"
 
-strip-ansi@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
 strip-ansi@^7.0.1:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.0.1.tgz#61740a08ce36b61e50e65653f07060d000975fb2"
@@ -13745,7 +13717,8 @@ wordwrap@^1.0.0:
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
   integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+  name wrap-ansi-cjs
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -13763,15 +13736,6 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"