@salesforcedevs/dx-components 0.63.2 → 0.64.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.63.2",
+    "version": "0.64.0",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -11,7 +11,7 @@
     },
     "dependencies": {
         "@coveo/headless": "^1.32.0",
-        "@popperjs/core": "2.9.1",
+        "@floating-ui/dom": "^0.5.3",
         "@sfdocs-internal/wires": "^0.6.3",
         "@vimeo/player": "^2.16.4",
         "classnames": "^2.2.6",
@@ -25,5 +25,5 @@
         "@types/lodash.get": "^4.4.6",
         "@types/vimeo__player": "^2.16.2"
     },
-    "gitHead": "4e885b33ab4f17d2e7f4a083d9be2f90e8ba6363"
+    "gitHead": "369ff728fbf7ea16a249785a16dbc73331456a9b"
 }

package/src/modules/dx/footer/footer.css

@@ -273,7 +273,7 @@ footer.signup-variant-no-signup {
 @media screen and (min-width: 1400px) {
     .content-container_top_large {
         /* takes into account the background assets' h:w ratio */
-        height: 32vw;
+        height: 38vw;
     }
 }
 

package/src/modules/dx/popover/popover.css

@@ -9,7 +9,9 @@
 }
 
 .popover-container {
-    position: fixed;
+    position: absolute;
+    top: 0;
+    left: 0;
     z-index: var(--dx-c-popover-z-index, var(--dx-g-z-index-max));
     visibility: hidden;
     pointer-events: none;
@@ -50,14 +52,6 @@
     max-width: unset;
 }
 
-.popover-offset-small {
-    margin-top: var(--dx-g-spacing-sm);
-}
-
-.popover-offset-medium {
-    margin-top: var(--dx-g-spacing-md);
-}
-
 .popover-small {
     width: 136px;
 }

package/src/modules/dx/popover/popover.ts

@@ -5,7 +5,7 @@ import {
     PopperPlacement
 } from "typings/custom";
 
-import { createPopper } from "@popperjs/core";
+import { computePosition, flip, offset, shift } from "@floating-ui/dom";
 import cx from "classnames";
 import debounce from "debounce";
 import { isPrerender } from "dxUtils/seo";
@@ -69,14 +69,8 @@ export default class Popover extends LightningElement {
             this.control.setAttribute("aria-expanded", "true");
 
             this.dispatchEvent(new CustomEvent("open"));
-
-            // awaiting .popover-container to receive 'visibility: visible;' in order to execute functions on it;
-            // another approach would be to use IntersectionObserver to determine exactly when the visiblity
-            // is applied before running
-            setTimeout(() => {
-                this.setPosition();
-                this.attachListenersTopopover();
-            });
+            this.setPosition();
+            this.attachListenersTopopover();
         }
     }
 
@@ -130,7 +124,6 @@ export default class Popover extends LightningElement {
     private get className() {
         return cx(
             "popover",
-            this.offset && `popover-offset-${this.offset}`,
             this.small && "popover-small",
             this.width && "popover-overridewidth",
             this.fullWidth && "popover-fullwidth"
@@ -278,35 +271,24 @@ export default class Popover extends LightningElement {
 
     private setPosition = async () => {
         if (this.popover && this.control) {
-            await Promise.resolve();
-            createPopper(this.control, this.popover, {
+            computePosition(this.control, this.popover, {
                 placement: this.placement,
-                modifiers: [
-                    {
-                        name: "preventOverflow",
-                        options: {
-                            boundary: document.documentElement,
-                            padding: this.pagePadding
-                        }
-                    },
-                    {
-                        name: "flip",
-                        options: {
-                            fallbackPlacements: []
-                        }
-                    },
-                    this.fullWidth
-                        ? {
-                              name: "fullWidth",
-                              enabled: true,
-                              fn: ({ state }) => {
-                                  state.styles.popper.width = `${state.rects.reference.width}px`;
-                              },
-                              phase: "beforeWrite",
-                              requires: ["computeStyles"]
-                          }
-                        : {}
+                middleware: [
+                    flip(),
+                    shift({ padding: this.pagePadding }),
+                    ...(this.offset === "medium"
+                        ? [offset(16)]
+                        : this.offset === "small"
+                        ? [offset(8)]
+                        : [])
                 ]
+            }).then(({ x, y }) => {
+                if (this.popover) {
+                    Object.assign(this.popover.style, {
+                        left: `${x}px`,
+                        top: `${y}px`
+                    });
+                }
             });
         }
     };