@salesforcedevs/dx-components 0.64.0 → 0.64.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.64.0",
+    "version": "0.64.1",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -25,5 +25,5 @@
         "@types/lodash.get": "^4.4.6",
         "@types/vimeo__player": "^2.16.2"
     },
-    "gitHead": "369ff728fbf7ea16a249785a16dbc73331456a9b"
+    "gitHead": "2a2f653d7f778950001eacf42053e0d6c5b823d3"
 }

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

@@ -52,6 +52,14 @@
     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 { computePosition, flip, offset, shift } from "@floating-ui/dom";
+import { computePosition, flip, size, shift } from "@floating-ui/dom";
 import cx from "classnames";
 import debounce from "debounce";
 import { isPrerender } from "dxUtils/seo";
@@ -124,6 +124,7 @@ 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"
@@ -271,24 +272,30 @@ export default class Popover extends LightningElement {
 
     private setPosition = async () => {
         if (this.popover && this.control) {
-            computePosition(this.control, this.popover, {
+            const popoverEl = this.popover;
+
+            computePosition(this.control, popoverEl, {
                 placement: this.placement,
                 middleware: [
+                    ...(this.fullWidth
+                        ? [
+                              size({
+                                  apply({ rects }) {
+                                      Object.assign(popoverEl.style, {
+                                          width: `${rects.reference.width}px`
+                                      });
+                                  }
+                              })
+                          ]
+                        : []),
                     flip(),
-                    shift({ padding: this.pagePadding }),
-                    ...(this.offset === "medium"
-                        ? [offset(16)]
-                        : this.offset === "small"
-                        ? [offset(8)]
-                        : [])
+                    shift({ padding: this.pagePadding })
                 ]
             }).then(({ x, y }) => {
-                if (this.popover) {
-                    Object.assign(this.popover.style, {
-                        left: `${x}px`,
-                        top: `${y}px`
-                    });
-                }
+                Object.assign(popoverEl.style, {
+                    left: `${x}px`,
+                    top: `${y}px`
+                });
             });
         }
     };