@salesforcedevs/dx-components 0.63.1 → 0.64.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.63.1",
+    "version": "0.64.1",
     "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": "68b83e9181604ceaadfda8f8466e5cee989f68eb"
+    "gitHead": "2a2f653d7f778950001eacf42053e0d6c5b823d3"
 }

package/src/modules/dx/dropdownOption/dropdownOption.ts

@@ -47,7 +47,6 @@ export default class DropdownOption extends LightningElement {
             ...this.analyticsBasePayload,
             clickText: this.keyValue || undefined,
             itemTitle: this.option.label || undefined,
-            pageLocation: window.location.pathname,
             clickUrl: this.option.link?.href || undefined
         };
 
@@ -58,6 +57,7 @@ export default class DropdownOption extends LightningElement {
         if (!this.suppressGtmNavHeadings) {
             payload.navHeading = navHeading;
             payload.navSubHeading = navSubHeading;
+            payload.pageLocation = window.location.pathname;
         }
 
         if (this.analyticsEvent && e.currentTarget) {

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/headerSearch/headerSearch.html

@@ -40,7 +40,6 @@
             <dx-dropdown
                 options={suggestions}
                 open={isDropdownOpen}
-                placement="bottom-end"
                 onrequestclose={onDropdownRequestClose}
                 offset="small"
                 full-width

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;

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

@@ -5,7 +5,7 @@ import {
     PopperPlacement
 } from "typings/custom";
 
-import { createPopper } from "@popperjs/core";
+import { computePosition, flip, size, 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();
         }
     }
 
@@ -278,35 +272,30 @@ export default class Popover extends LightningElement {
 
     private setPosition = async () => {
         if (this.popover && this.control) {
-            await Promise.resolve();
-            createPopper(this.control, this.popover, {
+            const popoverEl = this.popover;
+
+            computePosition(this.control, popoverEl, {
                 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: [
+                    ...(this.fullWidth
+                        ? [
+                              size({
+                                  apply({ rects }) {
+                                      Object.assign(popoverEl.style, {
+                                          width: `${rects.reference.width}px`
+                                      });
+                                  }
+                              })
+                          ]
+                        : []),
+                    flip(),
+                    shift({ padding: this.pagePadding })
                 ]
+            }).then(({ x, y }) => {
+                Object.assign(popoverEl.style, {
+                    left: `${x}px`,
+                    top: `${y}px`
+                });
             });
         }
     };