fix(core-components-*): portal related issues

core-ds · Dec 7, 2020 · a5735fb · a5735fb
1 parent 5638163
commit a5735fb
Show file tree

Hide file tree

Showing 8 changed files with 149 additions and 173 deletions.
diff --git a/packages/notification/package.json b/packages/notification/package.json
@@ -17,7 +17,7 @@
     },
     "dependencies": {
         "@alfalab/core-components-button": "^1.8.0",
-        "@alfalab/core-components-portal": "^1.3.1",
+        "@alfalab/core-components-portal": "^2.0.0",
         "classnames": "^2.2.6",
         "react-merge-refs": "^1.1.0",
         "react-swipeable": "^6.0.0"

diff --git a/packages/notification/src/__snapshots__/Component.test.tsx.snap b/packages/notification/src/__snapshots__/Component.test.tsx.snap
@@ -3,173 +3,161 @@
 exports[`Notification Snapshots tests should match snapshot 1`] = `
 <body>
   <div />
-  <div
-    alfa-portal-container=""
-  >
-    <div>
+  <div>
+    <div
+      class="notificationComponent hasCloser"
+      style="top: 108px;"
+    >
       <div
-        class="notificationComponent hasCloser"
-        style="top: 108px;"
+        class="leftAddons"
       >
         <div
-          class="leftAddons"
+          class="icon positive"
         >
-          <div
-            class="icon positive"
+          <svg
+            class="iconSvg"
+            fill="currentColor"
+            focusable="false"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
           >
-            <svg
-              class="iconSvg"
-              fill="currentColor"
-              focusable="false"
-              height="24"
-              viewBox="0 0 24 24"
-              width="24"
-            >
-              <path
-                clip-rule="evenodd"
-                d="M20 7.5L10.5 17 4 10.5 5.5 9l5 5 8-8L20 7.5z"
-                fill-rule="evenodd"
-              />
-            </svg>
-          </div>
+            <path
+              clip-rule="evenodd"
+              d="M20 7.5L10.5 17 4 10.5 5.5 9l5 5 8-8L20 7.5z"
+              fill-rule="evenodd"
+            />
+          </svg>
         </div>
+      </div>
+      <div
+        class="contentContainer"
+      >
         <div
-          class="contentContainer"
+          class="title"
         >
-          <div
-            class="title"
-          >
-            title
-          </div>
-          <div
-            class="content"
-          >
-            text
-          </div>
+          title
         </div>
-        <button
-          aria-label="закрыть"
-          class="component ghost m closer"
+        <div
+          class="content"
         >
-          <span
-            class="text"
-          >
-            <svg
-              focusable="false"
-              height="18"
-              version="1"
-              viewBox="0 0 18 18"
-              width="18"
-            >
-              <path
-                d="M14.646 2.646L9 8.293 3.354 2.646l-.708.708L8.293 9l-5.647 5.646.708.708L9 9.707l5.646 5.647.708-.708L9.707 9l5.647-5.646z"
-                fill="#FFF"
-              />
-            </svg>
-          </span>
-        </button>
+          text
+        </div>
       </div>
+      <button
+        aria-label="закрыть"
+        class="component ghost m closer"
+      >
+        <span
+          class="text"
+        >
+          <svg
+            focusable="false"
+            height="18"
+            version="1"
+            viewBox="0 0 18 18"
+            width="18"
+          >
+            <path
+              d="M14.646 2.646L9 8.293 3.354 2.646l-.708.708L8.293 9l-5.647 5.646.708.708L9 9.707l5.646 5.647.708-.708L9.707 9l5.647-5.646z"
+              fill="#FFF"
+            />
+          </svg>
+        </span>
+      </button>
     </div>
   </div>
 </body>
 `;
 
 exports[`Notification Snapshots tests should match snapshot with leftAddons 1`] = `
 <body>
-  <div
-    alfa-portal-container=""
-  >
-    <div>
+  <div />
+  <div>
+    <div
+      class="notificationComponent hasCloser"
+      style="top: 108px;"
+    >
       <div
-        class="notificationComponent hasCloser"
-        style="top: 108px;"
+        class="leftAddons"
       >
-        <div
-          class="leftAddons"
-        >
-          <div>
-            leftAddons
-          </div>
+        <div>
+          leftAddons
         </div>
-        <div
-          class="contentContainer"
-        />
-        <button
-          aria-label="закрыть"
-          class="component ghost m closer"
+      </div>
+      <div
+        class="contentContainer"
+      />
+      <button
+        aria-label="закрыть"
+        class="component ghost m closer"
+      >
+        <span
+          class="text"
         >
-          <span
-            class="text"
+          <svg
+            focusable="false"
+            height="18"
+            version="1"
+            viewBox="0 0 18 18"
+            width="18"
           >
-            <svg
-              focusable="false"
-              height="18"
-              version="1"
-              viewBox="0 0 18 18"
-              width="18"
-            >
-              <path
-                d="M14.646 2.646L9 8.293 3.354 2.646l-.708.708L8.293 9l-5.647 5.646.708.708L9 9.707l5.646 5.647.708-.708L9.707 9l5.647-5.646z"
-                fill="#FFF"
-              />
-            </svg>
-          </span>
-        </button>
-      </div>
+            <path
+              d="M14.646 2.646L9 8.293 3.354 2.646l-.708.708L8.293 9l-5.647 5.646.708.708L9 9.707l5.646 5.647.708-.708L9.707 9l5.647-5.646z"
+              fill="#FFF"
+            />
+          </svg>
+        </span>
+      </button>
     </div>
   </div>
-  <div />
 </body>
 `;
 
 exports[`Notification Snapshots tests should match snapshot without icon 1`] = `
 <body>
-  <div
-    alfa-portal-container=""
-  >
-    <div>
+  <div />
+  <div>
+    <div
+      class="notificationComponent hasCloser"
+      style="top: 108px;"
+    >
       <div
-        class="notificationComponent hasCloser"
-        style="top: 108px;"
+        class="contentContainer"
       >
         <div
-          class="contentContainer"
+          class="title"
         >
-          <div
-            class="title"
-          >
-            title
-          </div>
-          <div
-            class="content"
-          >
-            text
-          </div>
+          title
         </div>
-        <button
-          aria-label="закрыть"
-          class="component ghost m closer"
+        <div
+          class="content"
         >
-          <span
-            class="text"
-          >
-            <svg
-              focusable="false"
-              height="18"
-              version="1"
-              viewBox="0 0 18 18"
-              width="18"
-            >
-              <path
-                d="M14.646 2.646L9 8.293 3.354 2.646l-.708.708L8.293 9l-5.647 5.646.708.708L9 9.707l5.646 5.647.708-.708L9.707 9l5.647-5.646z"
-                fill="#FFF"
-              />
-            </svg>
-          </span>
-        </button>
+          text
+        </div>
       </div>
+      <button
+        aria-label="закрыть"
+        class="component ghost m closer"
+      >
+        <span
+          class="text"
+        >
+          <svg
+            focusable="false"
+            height="18"
+            version="1"
+            viewBox="0 0 18 18"
+            width="18"
+          >
+            <path
+              d="M14.646 2.646L9 8.293 3.354 2.646l-.708.708L8.293 9l-5.647 5.646.708.708L9 9.707l5.646 5.647.708-.708L9.707 9l5.647-5.646z"
+              fill="#FFF"
+            />
+          </svg>
+        </span>
+      </button>
     </div>
   </div>
-  <div />
 </body>
 `;
diff --git a/packages/popover/package.json b/packages/popover/package.json
@@ -16,7 +16,7 @@
         "react-dom": "^16.9.0"
     },
     "dependencies": {
-        "@alfalab/core-components-portal": "^1.3.2",
+        "@alfalab/core-components-portal": "^2.0.0",
         "@popperjs/core": "^2.3.3",
         "classnames": "^2.2.6",
         "react-popper": "^2.2.2",

diff --git a/packages/popover/src/Component.tsx b/packages/popover/src/Component.tsx
@@ -152,7 +152,7 @@ export const Popover: React.FC<PopoverProps> = ({
     }, [updatePopper, update]);
 
     const renderPortal = (showContent: boolean, className?: string, style?: CSSProperties) => (
-        <Portal getPortalContainer={getPortalContainer}>
+        <Portal container={getPortalContainer}>
             {showContent && (
                 <div
                     ref={setPopperElement}

diff --git a/packages/popover/src/__snapshots__/Component.test.tsx.snap b/packages/popover/src/__snapshots__/Component.test.tsx.snap
@@ -6,18 +6,14 @@ Object {
   "baseElement": <body>
     <div />
     <div
-      alfa-portal-container=""
+      class="component entered entered"
+      data-popper-escaped="true"
+      data-popper-placement="left"
+      data-popper-reference-hidden="true"
+      style="position: absolute; left: 0px; top: 0px; transition-duration: 300ms; right: 0px; transform: translate(0px, 0px);"
     >
-      <div
-        class="component entered entered"
-        data-popper-escaped="true"
-        data-popper-placement="left"
-        data-popper-reference-hidden="true"
-        style="position: absolute; left: 0px; top: 0px; transition-duration: 300ms; right: 0px; transform: translate(0px, 0px);"
-      >
-        <div>
-          I am popover
-        </div>
+      <div>
+        I am popover
       </div>
     </div>
   </body>,
@@ -80,22 +76,18 @@ exports[`Render tests should render without Transition of withTransition is fals
 Object {
   "asFragment": [Function],
   "baseElement": <body>
+    <div />
     <div
-      alfa-portal-container=""
+      class="component"
+      data-popper-escaped="true"
+      data-popper-placement="left"
+      data-popper-reference-hidden="true"
+      style="position: absolute; left: 0px; top: 0px; right: 0px; transform: translate(0px, 0px);"
     >
-      <div
-        class="component"
-        data-popper-escaped="true"
-        data-popper-placement="left"
-        data-popper-reference-hidden="true"
-        style="position: absolute; left: 0px; top: 0px; right: 0px; transform: translate(0px, 0px);"
-      >
-        <div>
-          I am popover
-        </div>
+      <div>
+        I am popover
       </div>
     </div>
-    <div />
   </body>,
   "container": <div />,
   "debug": [Function],