@salesforcedevs/dx-components 0.16.3 → 0.17.1-review-diff1

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

@@ -5,10 +5,19 @@ import {
     PopperPlacement
 } from "typings/custom";
 
-import { createPopper } from "@popperjs/core";
+import {
+    autoUpdate,
+    computePosition,
+    flip,
+    size,
+    shift,
+    arrow,
+    platform
+} from "@floating-ui/dom";
+import { offsetParent } from "composed-offset-position";
 import cx from "classnames";
 import debounce from "debounce";
-import { isPrerender } from "utils/seo";
+import { isPrerender } from "dxUtils/seo";
 
 const isEventOutsideElements = (
     e: Event,
@@ -23,7 +32,8 @@ const isEventOutsideElements = (
         );
 
 export default class Popover extends LightningElement {
-    @api ariaLabel: string | null = null;
+    private autoUpdateCleanup?: () => void;
+
     @api offset?: "small" | "medium";
     @api pagePadding?: number = 16; // padding between dropdown and the edge of the page
     @api placement?: PopperPlacement = "bottom-start";
@@ -31,6 +41,7 @@ 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() {
@@ -68,11 +79,12 @@ export default class Popover extends LightningElement {
             this._open = true;
             this.control.setAttribute("aria-expanded", "true");
 
+            if (this.popover) {
+                this.autoUpdateCleanup = autoUpdate(this.control, this.popover, this.setPosition);
+            }
+
             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();
@@ -83,6 +95,7 @@ export default class Popover extends LightningElement {
     @api
     closePopover(focusControl: boolean = false) {
         this._open = false;
+        this.autoUpdateCleanup?.();
         if (focusControl && this.control && this.control.focus) {
             this.control.focus();
         }
@@ -106,9 +119,11 @@ export default class Popover extends LightningElement {
     private _open: 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
 
@@ -123,6 +138,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
@@ -235,23 +256,27 @@ export default class Popover extends LightningElement {
         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): void {
@@ -276,38 +301,78 @@ export default class Popover extends LightningElement {
         }
     }
 
-    private setPosition = async () => {
+    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
-                        }
-                    },
-                    {
-                        name: "flip",
-                        options: {
-                            fallbackPlacements: []
+            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`
+                            });
                         }
-                    },
-                    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,
+                platform: {
+                    ...platform,
+                    getOffsetParent: (element) =>
+                        platform.getOffsetParent(element, offsetParent)
+                },
+                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);
+                }
             });
         }
     };
+    public get setPosition() {
+        return this._setPosition;
+    }
+    public set setPosition(value) {
+        this._setPosition = value;
+    }
 }

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;

package/src/modules/dx/redirectChecker/redirectChecker.html

@@ -0,0 +1 @@
+<template></template>

package/src/modules/dx/redirectChecker/redirectChecker.ts

@@ -0,0 +1,10 @@
+// urlWatcherComponent.ts
+import { LightningElement } from "lwc";
+import { UrlWatcher } from "dxUtils/urlWatcher";
+
+export default class UrlWatcherComponent extends LightningElement {
+    watcher = UrlWatcher.getInstance();
+    connectedCallback() {
+        // Just ensure the singleton initializes
+    }
+}

package/src/modules/dx/relativeDateTime/relativeDateTime.ts

@@ -1,12 +1,6 @@
 import { LightningElement, api } from "lwc";
 
 export default class RelativeDateTime extends LightningElement {
-    @api messageWhenHoursPast: String = "";
-    @api messageWhenDaysPast: String = "";
-    @api messageWhenWeeksPast: String = "";
-    @api messageWhenMonthsPast: String = "";
-    @api messageWhenYearsPast: String = "";
-
     @api
     set value(value) {
         if (!value) {
@@ -14,100 +8,35 @@ export default class RelativeDateTime extends LightningElement {
             return;
         }
 
-        this._selectedDateTime = new Date(value);
+        this._inputDateTime = new Date(value);
     }
     get value() {
-        const relativeDateTimeInHours = this.formatDate(this._selectedDateTime);
-        this._relativeDateTime = this.getRelativeDateTimeAsString(
-            this._selectedDateTime,
-            relativeDateTimeInHours
+        this._relativeDateTime = this.getFormattedDateTime(
+            this._inputDateTime!
         );
         return this._relativeDateTime;
     }
     get original() {
-        return this._selectedDateTime;
-    }
-
-    private _relativeDateTime: String;
-    private _selectedDateTime: Date;
-
-    formatDate(selectedDateTime: Date) {
-        const currentDateTime = new Date();
-        const relativeDateTimeInHours = this.getDifferenceInHours(
-            selectedDateTime,
-            currentDateTime
-        );
-        return relativeDateTimeInHours;
-    }
-
-    getDifferenceInHours(selectedDateTime: Date, currentDateTime: Date) {
-        const milliseconds = Math.abs(+selectedDateTime - +currentDateTime);
-        const hours = Math.floor(milliseconds / 36e5);
-        return hours;
-    }
-
-    getRelativeDateTimeAsString(
-        selectedDateTime: Date,
-        relativeDateTimeInHours: Number
-    ) {
-        const daysPast = Math.floor(+relativeDateTimeInHours / 24);
-        const weeksPast = Math.floor(+daysPast / 7);
-        const monthsPast = Math.floor(+daysPast / 30);
-        const yearsPast = Math.floor(+monthsPast / 12);
-        if (yearsPast >= 1) {
-            return this.timeLabel("year", yearsPast);
-        } else if (monthsPast <= 11 && monthsPast >= 1) {
-            return this.timeLabel("month", monthsPast);
-        } else if (monthsPast < 1 && daysPast >= 7) {
-            return this.timeLabel("week", weeksPast);
-        } else if (daysPast <= 7 && daysPast >= 1) {
-            return this.timeLabel("day", daysPast);
-        } else if (relativeDateTimeInHours < 24) {
-            return this.timeLabel("hour", relativeDateTimeInHours);
+        return this._inputDateTime?.toLocaleString();
+    }
+
+    private _inputDateTime?: Date;
+    private _relativeDateTime?: string;
+
+    getFormattedDateTime(inputDateTime: Date) {
+        const now = new Date();
+        const yesterday = new Date(
+            now.getTime() - 24 * 60 * 60 * 1000
+        ).toLocaleDateString();
+        const twoDaysAgo = new Date(
+            now.getTime() - 48 * 60 * 60 * 1000
+        ).toLocaleDateString();
+        const dateStringFromInput = inputDateTime?.toLocaleDateString();
+        if (dateStringFromInput === yesterday) {
+            return "1 day ago";
+        } else if (dateStringFromInput === twoDaysAgo) {
+            return "2 days ago";
         }
-        return "";
-    }
-
-    timeLabel(type: String, number: Number) {
-        let suffix: String = "";
-        switch (type) {
-            case "hour": {
-                suffix =
-                    this.messageWhenHoursPast ||
-                    `${this.pluralize(type, number)} ago`;
-                break;
-            }
-            case "day": {
-                suffix =
-                    this.messageWhenDaysPast ||
-                    `${this.pluralize(type, number)} ago`;
-                break;
-            }
-            case "week": {
-                suffix =
-                    this.messageWhenWeeksPast ||
-                    `${this.pluralize(type, number)} ago`;
-                break;
-            }
-            case "month": {
-                suffix =
-                    this.messageWhenMonthsPast ||
-                    `${this.pluralize(type, number)} ago`;
-                break;
-            }
-            case "year": {
-                suffix =
-                    this.messageWhenYearsPast ||
-                    `${this.pluralize(type, number)} ago`;
-                break;
-            }
-            default:
-                suffix = "";
-        }
-        return suffix ? `${number} ${suffix}` : "";
-    }
-
-    pluralize(type: String, number: Number) {
-        return `${type}${number !== 1 ? "s" : ""}`;
+        return dateStringFromInput;
     }
 }

package/src/modules/dx/scrollManager/scrollManager.html

@@ -0,0 +1 @@
+<template></template>

package/src/modules/dx/scrollManager/scrollManager.ts

@@ -0,0 +1,212 @@
+import { LightningElement } from "lwc";
+import { throttle } from "throttle-debounce";
+import { track } from "dxUtils/analytics";
+
+const RESTORE_SCROLL_EVENT_NAME = "restore-scroll";
+const SCROLL_EVENT_NAME = "scroll";
+const GLOBAL_NAV_TOGGLE_EVENT_NAME = "toggle_global_nav";
+
+const LOAD_TIME_SCROLL_RESTORE_DELAY = 750;
+const REDUNDANT_INSTANCE_ERROR_MESSAGE =
+    "Multiple <dx-scroll-manager>s detected, this should never be the case.";
+const HTML_ELEMENT = document.querySelector("html");
+
+declare module globalThis {
+    let singletonScrollManagerRendered: boolean;
+    let singletonScrollManagerConnected: boolean;
+}
+// mostly components shouldn't be using this, but there are a few exceptions such as amfReference
+
+let scrollUnlocked: boolean = false;
+
+export const restoreScroll = () => {
+    if (scrollUnlocked) {
+        return;
+    }
+    const value = window.history.state?.scroll?.value;
+    if (value) {
+        document.body.scrollTop = document.documentElement.scrollTop = value;
+    }
+};
+
+export default class ScrollManager extends LightningElement {
+    /*
+      WARNING: Dark Magic(TM) follows. This code is likely to be unreliable if:
+          - Our load times significantly change (in this case, LOAD_TIME_SCROLL_RESTORE_DELAY may need to be adjusted)
+          - Any other components attempt to manipulate the body scroll (including #a links) before LOAD_TIME_SCROLL_RESTORE_DELAY has expired
+
+      This Dark Magic(TM) was required because of the following super annoying race condition occuring while trying to restore scroll position:
+          1. Load a page on our site (reproducible consistently at time of writing at https://developer.salesforce.com)
+          2. Scroll down somewhere (remember where)
+          3. Navigate to another page
+          4. Navigate back/forward/back, using the browser forward/back buttons (sometimes it takes a few tries to reproduce the race condition)
+          5. If the page you're on takes long enough for its components to finish rendering asynchronously, sometimes your scroll position will be incorrect 
+              (until the second scroll restore is called. To see the really bad behavior, simply remove the window.setTimeout bit)
+      This is because basically it scrolls you down a bit, then a component gets bigger above you as it finishes rendering
+      This pushes your whole view down, so unless we do this Dark Magic(TM) where we attempt to restore scroll _again_
+      after some reasonable interval, your window will be in the wrong spot when everything finishes rendering
+  */
+
+    protected scrollCount = 0; // this is for dark magic, basically we lock the user out of scrolling in the first quarter second, unless they really mean it. We do this because load timings mean that the scroll can get messed up in that period
+
+    private scrollPosition = 0;
+    private scrolledTwentyFivePercent = false;
+    private scrolledFiftyPercent = false;
+    private scrolledSevenFivePercent = false;
+    private scrolledOneHundredPercent = false;
+    private scrollUnlocked = false;
+
+    renderedCallback() {
+        scrollUnlocked = window.location.hash !== ""; // if we have anchor links, skip the entire scroll restore
+        if (!globalThis.singletonScrollManagerRendered && !scrollUnlocked) {
+            globalThis.singletonScrollManagerRendered = true;
+            if (
+                window.history.state?.scroll?.docSize ===
+                document.body.scrollHeight
+            ) {
+                // only do this if loading is complete and the scrollHeight matches expectations
+                // otherwise, we're likely still loading, so just chill to avoid jumping around so much
+                restoreScroll();
+                this.setScrolledPercentagesFromRestore(
+                    this.calculateScrollPercentage(
+                        +window.history.state?.scroll?.value
+                    )
+                );
+            } else {
+                window.setTimeout(() => {
+                    // sometimes loading is slow, so we may want to reset the scroll to
+                    // the correct position after loading is complete, to avoid weird behavior
+                    // but only if the user hasn't scrolled around in the meantime
+                    restoreScroll();
+                    this.setScrolledPercentagesFromRestore(
+                        this.calculateScrollPercentage(
+                            +window.history.state?.scroll?.value
+                        )
+                    );
+                    scrollUnlocked = true;
+                }, LOAD_TIME_SCROLL_RESTORE_DELAY);
+            }
+        } else {
+            console.error(REDUNDANT_INSTANCE_ERROR_MESSAGE);
+        }
+    }
+
+    connectedCallback(): void {
+        if (!globalThis.singletonScrollManagerConnected) {
+            globalThis.singletonScrollManagerConnected = true;
+            window.addEventListener(RESTORE_SCROLL_EVENT_NAME, restoreScroll);
+            window.addEventListener(SCROLL_EVENT_NAME, this.onWindowScroll);
+            /*
+                this global nav emits this event when it is shown or hidden
+                their full logic for when this occurs can be found here
+                https://github.com/sfdc-www/hgf-www/blob/main/packages/lwc-components/src/modules/hgf/c360nav/c360nav.ts#L1316
+            */
+            window.addEventListener(
+                GLOBAL_NAV_TOGGLE_EVENT_NAME,
+                this.onGlobalNavToggle
+            );
+        } else {
+            console.error(REDUNDANT_INSTANCE_ERROR_MESSAGE);
+        }
+    }
+
+    onWindowScroll = () => {
+        this.updateScrollState();
+    };
+
+    onGlobalNavToggle = (event: Event) => {
+        const isGlobalNavShowing: boolean = (event as CustomEvent).detail;
+        HTML_ELEMENT?.setAttribute(
+            "style",
+            `--dx-g-global-header-nav-row-count: ${isGlobalNavShowing ? 2 : 1}`
+        );
+    };
+
+    sendGtmScrollThresholdEvent(threshold: "25" | "50" | "75" | "100") {
+        track(document.body, "custEv_scroll", {
+            scrollDepth: threshold
+        });
+    }
+
+    calculateScrollPercentage(scrollTopOverride?: number) {
+        const scrollingElement = document.scrollingElement || document.body;
+        return (
+            ((scrollTopOverride || scrollingElement.scrollTop) /
+                (scrollingElement.scrollHeight - window.innerHeight)) *
+            100
+        );
+    }
+
+    // do not re-send scrolled events when scroll position is restored and user scrolls up
+    setScrolledPercentagesFromRestore(scrollPercentage: number) {
+        if (scrollPercentage > 25) {
+            this.scrolledTwentyFivePercent = true;
+        }
+        if (scrollPercentage > 50) {
+            this.scrolledFiftyPercent = true;
+        }
+        if (scrollPercentage > 75) {
+            this.scrolledSevenFivePercent = true;
+        }
+        if (scrollPercentage > 100) {
+            this.scrolledOneHundredPercent = true;
+        }
+    }
+
+    scrollThresholdHandler() {
+        this.scrollPosition = this.calculateScrollPercentage();
+
+        if (this.scrollPosition > 25 && !this.scrolledTwentyFivePercent) {
+            this.scrolledTwentyFivePercent = true;
+            this.sendGtmScrollThresholdEvent("25");
+        } else if (this.scrollPosition > 50 && !this.scrolledFiftyPercent) {
+            this.scrolledFiftyPercent = true;
+            this.sendGtmScrollThresholdEvent("50");
+        } else if (this.scrollPosition > 75 && !this.scrolledSevenFivePercent) {
+            this.scrolledSevenFivePercent = true;
+            this.sendGtmScrollThresholdEvent("75");
+        } else if (
+            this.scrollPosition === 100 &&
+            !this.scrolledOneHundredPercent
+        ) {
+            this.scrolledOneHundredPercent = true;
+            this.sendGtmScrollThresholdEvent("100");
+        }
+    }
+
+    saveScroll = throttle(500, () => {
+        const scrollingElement = document.scrollingElement || document.body;
+        window.history.replaceState(
+            {
+                ...window.history.state,
+                scroll: {
+                    value: scrollingElement.scrollTop,
+                    docSize: scrollingElement.scrollHeight
+                }
+            },
+            "",
+            window.location.href
+        );
+    });
+
+    updateScrollState = () => {
+        if (this.scrollCount < 5) {
+            this.scrollCount++;
+        } else {
+            this.scrollUnlocked = true;
+        }
+        if (this.scrollUnlocked) {
+            this.saveScroll();
+            this.scrollThresholdHandler();
+        }
+    };
+
+    disconnectedCallback(): void {
+        window.removeEventListener(RESTORE_SCROLL_EVENT_NAME, restoreScroll);
+        window.removeEventListener(SCROLL_EVENT_NAME, this.onWindowScroll);
+        window.removeEventListener(
+            GLOBAL_NAV_TOGGLE_EVENT_NAME,
+            this.onGlobalNavToggle
+        );
+    }
+}