@salesforcedevs/dx-components 0.3.12 → 0.3.14-banner-alpha1

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

@@ -1,13 +1,14 @@
+import { LightningElement, api } from "lwc";
 import {
-    PopoverRequestCloseType,
     LightningSlotElement,
+    PopoverRequestCloseType,
     PopperPlacement
 } from "typings/custom";
-import { LightningElement, api } from "lwc";
 
-import { createPopper } from "@popperjs/core";
+import { computePosition, flip, size, shift, arrow } from "@floating-ui/dom";
 import cx from "classnames";
 import debounce from "debounce";
+import { isPrerender } from "dxUtils/seo";
 
 const isEventOutsideElements = (
     e: Event,
@@ -30,14 +31,15 @@ export default class Popover extends LightningElement {
     @api openOnHover?: boolean = false; // dropdown opens/closes with hover
     @api width?: string | null = null;
     @api fullWidth?: boolean | null;
+    @api showArrow?: boolean | null;
 
     @api
     get open() {
         return this._open;
     }
     set open(value: boolean | null) {
-        this._controlled = typeof value === "boolean";
-        if (this.controlled && value !== this._open) {
+        this.controlled = typeof value === "boolean";
+        if (value !== this._open) {
             if (value) {
                 this.openPopover();
             } else {
@@ -59,11 +61,6 @@ export default class Popover extends LightningElement {
         );
     };
 
-    @api
-    get controlled() {
-        return this._controlled;
-    }
-
     @api
     openPopover() {
         this._rendered = true;
@@ -74,9 +71,6 @@ export default class Popover extends LightningElement {
 
             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();
@@ -87,7 +81,7 @@ export default class Popover extends LightningElement {
     @api
     closePopover(focusControl: boolean = false) {
         this._open = false;
-        if (focusControl && this.control && !this.controlled) {
+        if (focusControl && this.control && this.control.focus) {
             this.control.focus();
         }
         if (this.control) {
@@ -106,13 +100,15 @@ export default class Popover extends LightningElement {
 
     // PRIVATE VARS
 
+    private controlled: boolean = false;
     private _open: boolean = false;
-    private _controlled: boolean = false;
-    private _rendered: boolean = false;
+    private _rendered: boolean = isPrerender();
     private _role: string | null = null;
+    private arrow: HTMLElement | null = null;
     private control: (HTMLElement & { disabled?: boolean }) | null = null;
     private focusedValue: string | null = null;
     private popover: HTMLElement | null = null;
+    private popoverContent: HTMLElement | null = null;
 
     // LIFECYCLE METHODS
 
@@ -127,6 +123,12 @@ export default class Popover extends LightningElement {
         if (!this.popover) {
             this.popover = this.template.querySelector(".popover-container");
         }
+        if (!this.popoverContent) {
+            this.popoverContent = this.template.querySelector(".popover");
+        }
+        if (!this.arrow && this.showArrow) {
+            this.arrow = this.template.querySelector(".popover-arrow");
+        }
     }
 
     // GETTERS
@@ -148,7 +150,7 @@ export default class Popover extends LightningElement {
     private get style() {
         if (this.fullWidth && this.width) {
             console.error(
-                `The "width" and "full-width" properties cannot be provided simultaneously.`
+                'The "width" and "full-width" properties cannot be provided simultaneously.'
             );
         }
         return cx(this.width && `width: ${this.width};`);
@@ -158,19 +160,26 @@ export default class Popover extends LightningElement {
 
     private addControlListeners() {
         if (this.control) {
-            this.control.addEventListener("click", this.onControlClick);
             this.control.addEventListener("keydown", this.onControlKeydown);
-            this.control.addEventListener(
-                "mouseenter",
-                this.onControlMouseEnter
-            );
+
+            if (!this.openOnHover) {
+                this.control.addEventListener("click", this.onControlClick);
+            }
+
+            if (this.openOnHover) {
+                this.control.addEventListener(
+                    "mouseenter",
+                    this.onControlMouseEnter
+                );
+            }
         }
     }
 
     private removeControlListeners() {
         if (this.control) {
-            this.control.removeEventListener("click", this.onControlClick);
             this.control.removeEventListener("keydown", this.onControlKeydown);
+
+            this.control.removeEventListener("click", this.onControlClick);
             this.control.removeEventListener(
                 "mouseenter",
                 this.onControlMouseEnter
@@ -184,28 +193,21 @@ export default class Popover extends LightningElement {
             this.popover &&
             isEventOutsideElements(e, this.control, this.popover)
         ) {
-            if (this.controlled) {
-                this.dispatchRequestCloseEvent("interact-outside");
-                return;
-            }
             this.closePopover();
+            this.dispatchRequestCloseEvent("interact-outside");
         }
     };
     private interactOutsideListener = (e: Event) =>
         // @ts-ignore something weird happening here with debounce types
         debounce(this._interactOutsideListener(e), 100);
 
-    private onControlMouseEnter = () => {
-        if (this.openOnHover && !this.controlled) {
-            this.openPopover();
-        }
-    };
+    private onControlMouseEnter = () => this.openPopover();
 
     private onControlKeydown = (e: KeyboardEvent) => {
         switch (e.key) {
             case "ArrowDown": {
                 e.preventDefault();
-                if (!this.controlled && !this.open) {
+                if (!this.open) {
                     this.openPopover();
                 }
                 this.dispatchEvent(new CustomEvent("controlarrowdown"));
@@ -216,7 +218,12 @@ export default class Popover extends LightningElement {
     };
 
     private onControlClick = () => {
-        if (!this.open && this.controlled) {
+        if (this.controlled && this.open) {
+            this.dispatchRequestCloseEvent("click-control");
+            return;
+        }
+
+        if (this.controlled && !this.open) {
             this.dispatchEvent(
                 new CustomEvent("requestopen", {
                     bubbles: true,
@@ -225,44 +232,43 @@ export default class Popover extends LightningElement {
             );
             return;
         }
-        if (this.open && this.controlled) {
-            this.dispatchRequestCloseEvent("click-control");
-            return;
-        }
-        if (this.open && !this.openOnHover) {
+
+        if (this.open) {
             this.closePopover();
-        } else if (!this.open) {
-            this.openPopover();
+            return;
         }
+
+        this.openPopover();
     };
 
-    private onSlotChange(e: LightningSlotElement) {
-        const slot = e.target;
+    private onSlotChange(e: Event) {
+        const slot = e.target as LightningSlotElement;
         const elements = slot.assignedElements();
         const slotted = elements.length === 0 ? null : elements[0];
         // allows dropdown/select to compose popover
-        const control =
-            slotted.tagName === "SLOT" ? slotted.firstChild : slotted;
-        const onboardControl =
-            (!this.control || (control && !control.isSameNode(this.control))) &&
-            control;
-        if (onboardControl) {
-            control.setAttribute("aria-haspopup", "true");
-            control.style.cursor = this.openOnHover ? "default" : "cursor";
-            this.control = control;
-            this.addControlListeners();
-            this.setPosition();
+        const slotElement = (
+            slotted?.tagName === "SLOT" ? slotted.firstChild : slotted
+        ) as HTMLElement | null;
+        const isWorkToDo =
+            slotElement &&
+            (!this.control || !slotElement.isSameNode(this.control));
+
+        if (!isWorkToDo) {
+            return;
         }
+
+        slotElement.setAttribute("aria-haspopup", "true");
+        slotElement.style.cursor = this.openOnHover ? "default" : "cursor";
+        this.control = slotElement;
+        this.addControlListeners();
+        this.setPosition();
     }
 
-    private onKeyDown(e: KeyboardEvent) {
+    private onKeyDown(e: KeyboardEvent): void {
         switch (e.key) {
             case "Esc":
             case "Escape":
-                if (this.controlled) {
-                    this.dispatchRequestCloseEvent("keypress-escape");
-                    break;
-                }
+                this.dispatchRequestCloseEvent("keypress-escape");
                 this.closePopover(true);
                 break;
             default:
@@ -283,34 +289,63 @@ export default class Popover extends LightningElement {
     private setPosition = async () => {
         if (this.popover && this.control) {
             await Promise.resolve();
-            createPopper(this.control, this.popover, {
-                placement: this.placement,
-                modifiers: [
-                    {
-                        name: "preventOverflow",
-                        options: {
-                            boundary: document.documentElement,
-                            padding: this.pagePadding
+            const popoverEl = this.popover;
+            const middleware = [flip(), shift({ padding: this.pagePadding })];
+
+            if (this.fullWidth) {
+                middleware.unshift(
+                    size({
+                        apply({ rects }) {
+                            Object.assign(popoverEl.style, {
+                                width: `${rects.reference.width}px`
+                            });
                         }
-                    },
-                    {
-                        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"]
-                          }
-                        : {}
-                ]
+                    })
+                );
+            }
+
+            if (this.arrow) {
+                middleware.push(arrow({ element: this.arrow, padding: 24 }));
+            }
+
+            computePosition(this.control, popoverEl, {
+                placement: this.placement,
+                middleware
+            }).then(({ x, y, placement, middlewareData }) => {
+                Object.assign(popoverEl.style, {
+                    left: `${x}px`,
+                    top: `${y}px`
+                });
+
+                if (this.arrow && middlewareData.arrow) {
+                    const { x: arrowX, y: arrowY } = middlewareData.arrow;
+                    const popoverPlacementSide = placement.split("-")[0] as
+                        | "top"
+                        | "bottom"
+                        | "left"
+                        | "right";
+                    const staticSide = {
+                        top: "bottom",
+                        right: "left",
+                        bottom: "top",
+                        left: "right"
+                    }[popoverPlacementSide];
+                    const arrowStyles = {
+                        left: arrowX != null ? `${arrowX}px` : "",
+                        top: arrowY != null ? `${arrowY}px` : "",
+                        right: "",
+                        bottom: "",
+                        [staticSide]: "-4px"
+                    };
+
+                    if (this.offset && this.popoverContent) {
+                        arrowStyles.marginTop = getComputedStyle(
+                            this.popoverContent
+                        ).marginTop;
+                    }
+
+                    Object.assign(this.arrow.style, arrowStyles);
+                }
             });
         }
     };

package/src/modules/dx/radioGroup/radioGroup.css

@@ -1,4 +1,4 @@
-@import "helpers/reset";
+@import "dxHelpers/reset";
 
 fieldset {
     display: grid;

package/src/modules/dx/radioGroup/radioGroup.ts

@@ -1,5 +1,5 @@
 import { LightningElement, api } from "lwc";
-import { toJson } from "utils/normalizers";
+import { toJson } from "dxUtils/normalizers";
 
 type Option = {
     value: string;