@salesforcedevs/dx-components 1.3.150-canary.7 → 1.3.150

package/LICENSE

@@ -0,0 +1,12 @@
+Copyright (c) 2020, Salesforce.com, Inc.
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
+
+* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
+
+* Neither the name of Salesforce.com nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/lwc.config.json

@@ -4,7 +4,6 @@
         { "npm": "@salesforcedevs/dw-components" }
     ],
     "expose": [
-        "dx/alert",
         "dx/audio",
         "dx/banner",
         "dx/brandThemeProvider",
@@ -23,7 +22,6 @@
         "dx/cardNews",
         "dx/cardPodcastEpisode",
         "dx/cardSmall",
-        "dx/cardStep",
         "dx/cardTrailheadModule",
         "dx/cardTrial",
         "dx/cardTrialExpanded",
@@ -51,7 +49,6 @@
         "dx/headerSearch",
         "dx/helmet",
         "dx/hr",
-        "dx/htmlRenderer",
         "dx/icon",
         "dx/iconBadge",
         "dx/imageAndLabel",
@@ -92,7 +89,6 @@
         "dx/typeBadge",
         "dx/vimeoPlayer",
         "dxBaseElements/headerBase",
-        "dxBaseElements/lightningElementWithState",
         "dxBaseElements/matchMediaElement",
         "dxConstants/brands",
         "dxConstants/colors",
@@ -114,7 +110,6 @@
         "dxUtils/dates",
         "dxUtils/highlight",
         "dxUtils/language",
-        "dxUtils/list",
         "dxUtils/lwc",
         "dxUtils/normalizers",
         "dxUtils/queryCoordinator",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.150-canary.7",
+    "version": "1.3.150",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -11,11 +11,12 @@
     },
     "dependencies": {
         "@coveo/headless": "^2.16.5",
-        "@floating-ui/dom": "^1.0.4",
+        "@floating-ui/dom": "1.5.1",
         "@sfdocs-internal/wires": "^0.6.3",
         "@types/throttle-debounce": "^5.0.0",
         "@vimeo/player": "^2.16.4",
         "classnames": "^2.2.6",
+        "composed-offset-position": "^0.0.4",
         "coveo-search-ui": "^2.10109.0",
         "debounce": "^1.2.0",
         "js-cookie": "^3.0.1",
@@ -39,5 +40,6 @@
         "@types/vimeo__player": "^2.16.2",
         "eventsourcemock": "^2.0.0",
         "luxon": "^3.1.0"
-    }
+    },
+    "gitHead": "ca1041e6f13585f85b24a5ca48804f20e040d405"
 }

package/src/modules/dx/button/button.ts

@@ -10,7 +10,6 @@ import {
 } from "typings/custom";
 
 export default class Button extends LightningElement {
-    private _didSetFormAttribute = false;
     @api ariaLabel: string = "";
     @api disabled: boolean | null = null;
     @api iconSize?: IconSize = "small";
@@ -22,7 +21,6 @@ export default class Button extends LightningElement {
     @api variant: ButtonVariant = "primary";
     @api inlineTextColor: ButtonTextColor = "dark";
     @api font: "display" | "sans" = "display";
-    @api form: string | undefined;
     @api name?: string;
     @api value?: any;
 
@@ -63,19 +61,6 @@ export default class Button extends LightningElement {
         );
     }
 
-    renderedCallback() {
-        if (
-            !this.href &&
-            typeof this.form !== "undefined" &&
-            !this._didSetFormAttribute
-        ) {
-            this._didSetFormAttribute = true;
-            this.template
-                .querySelector("button")
-                ?.setAttribute("form", this.form);
-        }
-    }
-
     private onSlotChange(e: LightningSlotElement) {
         const slot = e.target;
         this.isSlotEmpty = slot.assignedElements().length !== 0;

package/src/modules/dx/checkbox/checkbox.ts

@@ -5,12 +5,12 @@ export default class Checkbox extends LightningElement {
     @api disabled: boolean = false;
     @api errorMessage?: string = "Please check this box if you want to proceed";
     @api label?: string;
+    @api name: string | null = null;
+    @api required: boolean = false;
     @api type: "checkbox" | "radio" = "checkbox";
     @api value!: string;
 
     private _checked: boolean = false;
-    private _required: boolean = false;
-    private _name: string | null = null;
 
     @api
     get checked(): boolean {
@@ -20,24 +20,6 @@ export default class Checkbox extends LightningElement {
         this._checked = value;
     }
 
-    @api
-    get name(): string | null {
-        return this._name;
-    }
-    set name(value: string | null) {
-        this._name = value;
-        this.setAttribute("name", value); // reflect to HTML
-    }
-
-    @api
-    get required(): boolean {
-        return this._required;
-    }
-    set required(value: boolean) {
-        this._required = value;
-        this.setAttribute("required", value); // reflect to HTML
-    }
-
     private showValidity = false;
 
     private get valid(): boolean {
@@ -58,11 +40,6 @@ export default class Checkbox extends LightningElement {
         return this.valid;
     }
 
-    @api
-    checkValidity(): boolean {
-        return this.valid;
-    }
-
     private onChange(e: InputEvent) {
         this._checked = ((e.currentTarget as HTMLInputElement) || {}).checked;
         this.dispatchEvent(

package/src/modules/dx/faq/faq.html

@@ -24,8 +24,8 @@
                         ></dx-icon-badge>
                     </summary>
                     <p class="faq-body dx-text-body-2">{it.value.body}</p>
+                    <dx-hr no-padding="true"></dx-hr>
                 </details>
-                <dx-hr no-padding="true"></dx-hr>
             </template>
         </div>
     </div>

package/src/modules/dx/featuresListHeader/featuresListHeader.css

@@ -62,11 +62,6 @@ dx-button {
     margin-top: var(--dx-g-spacing-smd);
 }
 
-img.desktop {
-    padding-left: 20px;
-    max-width: 50%; /* assumes desktop images are high-res */
-}
-
 img.mobile {
     display: none;
 }

package/src/modules/dx/imageAndLabel/imageAndLabel.css

@@ -16,10 +16,6 @@ img {
     margin-right: var(--dx-g-spacing-sm);
 }
 
-span {
-    white-space: nowrap;
-}
-
 a img {
     transition: var(--dx-g-transition-filter-2x);
 }
@@ -50,4 +46,5 @@ img.size-large {
 
 .dx-text-label-1-dark {
     color: var(--dx-c-image-and-label-text-color);
+    text-align: left;
 }

package/src/modules/dx/input/input.ts

@@ -30,7 +30,9 @@ export default class Input extends LightningElement {
     @api loading: boolean = false;
     @api missingErrorMessage: string = "Complete this field";
     @api formatErrorMessage?: string;
+    @api name?: string;
     @api placeholder!: string;
+    @api required = false;
     @api role: string | null = null;
     @api shortcutKey: string | null = null;
     @api size: "small" | "large" | "override" = "small";
@@ -46,24 +48,6 @@ export default class Input extends LightningElement {
         this._value = value || "";
     }
 
-    @api
-    get name() {
-        return this._name;
-    }
-    set name(name: string | undefined) {
-        this._name = name;
-        this.setAttribute("name", name); // reflect to HTML
-    }
-
-    @api
-    get required(): boolean {
-        return this._required;
-    }
-    set required(value: boolean) {
-        this._required = value;
-        this.setAttribute("required", value); // reflect to HTML
-    }
-
     @api
     get errorMessage() {
         return this._errorMessage;
@@ -81,7 +65,7 @@ export default class Input extends LightningElement {
 
     @api
     reportValidity(): boolean {
-        if (this.isRequiredButEmpty) {
+        if (this.isRequiredAndFilled) {
             this._errorMessage = this.missingErrorMessage;
             return false;
         }
@@ -97,25 +81,10 @@ export default class Input extends LightningElement {
         return true;
     }
 
-    @api checkValidity(): boolean {
-        if (this.isRequiredButEmpty) {
-            return false;
-        }
-
-        const typeValidator = typeValidatorMap[this.type];
-        if (typeValidator && !typeValidator.validator(this.value)) {
-            return false;
-        }
-
-        return true;
-    }
-
     private _errorMessage: string = "";
     private focused: boolean = false;
     private input: HTMLInputElement | null = null;
     private _value: string | null = null;
-    private _name?: string;
-    private _required: boolean = false;
     private _loading: boolean = false;
     private isMac: boolean = false;
 
@@ -138,7 +107,7 @@ export default class Input extends LightningElement {
     private get inputInvalid() {
         const typeValidator = typeValidatorMap[this.type];
         return (
-            this.isRequiredButEmpty &&
+            this.isRequiredAndFilled &&
             typeValidator &&
             !typeValidator.validator(this.value)
         );
@@ -182,7 +151,7 @@ export default class Input extends LightningElement {
         return `${this.commandKey}-${this.shortcutKey} is the search shortcut`;
     }
 
-    private get isRequiredButEmpty() {
+    private get isRequiredAndFilled() {
         return this.required && (!this.value || !this.value.trim());
     }
 

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

@@ -5,7 +5,15 @@ import {
     PopperPlacement
 } from "typings/custom";
 
-import { computePosition, flip, size, shift, arrow } from "@floating-ui/dom";
+import {
+    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 "dxUtils/seo";
@@ -246,9 +254,9 @@ export default class Popover extends LightningElement {
         const elements = slot.assignedElements();
         const slotted = elements.length === 0 ? null : elements[0];
         // allows dropdown/select to compose popover
-        const slotElement = (
-            slotted?.tagName === "SLOT" ? slotted.firstChild : slotted
-        ) as HTMLElement | null;
+        const slotElement = (slotted?.tagName === "SLOT"
+            ? slotted.firstChild
+            : slotted) as HTMLElement | null;
         const isWorkToDo =
             slotElement &&
             (!this.control || !slotElement.isSameNode(this.control));
@@ -310,7 +318,11 @@ export default class Popover extends LightningElement {
 
             computePosition(this.control, popoverEl, {
                 placement: this.placement,
-                strategy: "fixed",
+                platform: {
+                    ...platform,
+                    getOffsetParent: (element) =>
+                        platform.getOffsetParent(element, offsetParent)
+                },
                 middleware
             }).then(({ x, y, placement, middlewareData }) => {
                 Object.assign(popoverEl.style, {

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

@@ -166,7 +166,6 @@ export default class ScrollManager extends LightningElement {
     saveScroll = throttle(100, () => {
         window.history.replaceState(
             {
-                ...window.history.state,
                 scroll: {
                     value: document.body.scrollTop,
                     docSize: document.body.scrollHeight

package/src/modules/dx/select/select.ts

@@ -10,6 +10,7 @@ export default class Select extends LightningElement {
     @api autocomplete?: string;
     @api label?: string;
     @api messageWhenValueMissing: string = DEFAULT_MISSING_MESSAGE;
+    @api name?: string;
     @api placeholder?: string;
     @api size?: string;
 
@@ -50,22 +51,11 @@ export default class Select extends LightningElement {
         this.updateSelectValue();
     }
 
-    @api
-    get name() {
-        return this._name;
-    }
-
-    set name(name) {
-        this._name = name;
-        this.setAttribute("name", name); // reflect to HTML
-    }
-
     _disabled = false;
     _size = "";
     _required = false;
     _options: Array<SelectOption> = [];
     _value: string = "";
-    _name?: string;
     _selectElement: HTMLSelectElement | null = null;
     helpMessage?: string = "";
 

package/src/modules/dx/stepSequence/stepSequence.css

@@ -9,6 +9,10 @@
     width: 100%;
 }
 
+.hidden {
+    visibility: hidden;
+}
+
 .no-animations ::slotted(*) {
     display: none;
 }

package/src/modules/dx/stepSequence/stepSequence.html

@@ -1,7 +1,6 @@
 <template>
     <div class={containerClassName}>
         <slot
-            class={slotClassName}
             onslotchange={handleSlotChange}
             onstepincrement={handleStepIncrement}
             onstepdecrement={handleStepDecrement}

package/src/modules/dx/stepSequence/stepSequence.ts

@@ -7,18 +7,12 @@ import cx from "classnames";
 // forward/back buttons and via any action buttons defined in the dx-step-sequence-step components (see that
 // component for details on the action buttons).
 export default class StepSequence extends LightningElement {
-    @api animateTransitions = false;
-    @api communicateStepChanges = false;
     @api initialStepIndex: string | undefined;
-    @api sessionStorageId = "";
-    @api useHistory = false;
+    @api animateTransitions = false;
 
     private currentStepIndex = 0;
-    private defaultScrollRestorationValue = history.scrollRestoration;
-    private isHiddenForInitialAnimation = true;
-    private numPendingInitialTransitions = 0;
-    private slotClassName = "step-sequence-steps-slot";
     private steps: Array<HTMLElement> = [];
+    private isHiddenForInitialAnimation = true;
 
     private get containerClassName() {
         return cx("step-sequence-container", {
@@ -29,33 +23,16 @@ export default class StepSequence extends LightningElement {
 
     connectedCallback() {
         const initialStepIndex = parseInt(this.initialStepIndex as string, 10);
-
         if (!isNaN(initialStepIndex)) {
             this.currentStepIndex = initialStepIndex;
         }
-
-        if (this.useHistory) {
-            this.defaultScrollRestorationValue = history.scrollRestoration;
-            history.scrollRestoration = "manual";
-            history.replaceState(
-                {
-                    ...window.history.state,
-                    currentStepIndex: this.currentStepIndex
-                },
-                ""
-            );
-            window.addEventListener("popstate", this.handleHistoryPopstate);
-        }
-
-        if (this.sessionStorageId) {
-            sessionStorage.setItem(
-                this.sessionStorageId,
-                JSON.stringify({
-                    currentStepIndex: this.currentStepIndex
-                })
-            );
-        }
-
+        history.replaceState(
+            {
+                currentStepIndex: this.currentStepIndex
+            },
+            ""
+        );
+        window.addEventListener("popstate", this.handleHistoryPopstate);
         if (this.animateTransitions) {
             this.addEventListener("transitionend", this.handleTransitionEnd);
         } else {
@@ -66,11 +43,6 @@ export default class StepSequence extends LightningElement {
     disconnectedCallback() {
         window.removeEventListener("popstate", this.handleHistoryPopstate);
         this.removeEventListener("transitionend", this.handleTransitionEnd);
-        history.scrollRestoration = this.defaultScrollRestorationValue;
-    }
-
-    private scrollToStepTop() {
-        this.template.host.scrollIntoView();
     }
 
     // Used only if this.animateTransitions is truthy
@@ -83,6 +55,10 @@ export default class StepSequence extends LightningElement {
             return;
         }
 
+        if (this.isHiddenForInitialAnimation) {
+            this.isHiddenForInitialAnimation = false;
+        }
+
         // Ensure subsequent steps are no longer visible:
         const prevStep = this.steps[this.currentStepIndex - 1];
         const nextStep = this.steps[this.currentStepIndex + 1];
@@ -95,38 +71,18 @@ export default class StepSequence extends LightningElement {
 
         // Mark the current step as fully active:
         this.steps[this.currentStepIndex].classList.add("active-step");
-
-        if (
-            this.isHiddenForInitialAnimation &&
-            this.numPendingInitialTransitions > 0
-        ) {
-            // Initial animation; allow subsequent animations to be visible when ready
-            this.numPendingInitialTransitions =
-                this.numPendingInitialTransitions - 1;
-            if (this.numPendingInitialTransitions === 0) {
-                this.isHiddenForInitialAnimation = false;
-            }
-        }
     };
 
     private changeActiveStep(nextStepIndex: number, updateHistory = true) {
-        if (
-            nextStepIndex === this.currentStepIndex ||
-            !this.isStepIndexWithinBounds(nextStepIndex)
-        ) {
+        if (nextStepIndex === this.currentStepIndex) {
             // Should never happen, but covering all logical bases. Nothing to do here.
             return;
         }
 
-        this.scrollToStepTop();
-
         if (!this.animateTransitions) {
             this.steps[this.currentStepIndex].className = "";
             this.steps[nextStepIndex].className = "visible active-step";
         } else {
-            this.template.querySelector(
-                ".step-sequence-container"
-            )!.style.minHeight = `${this.steps[nextStepIndex].clientHeight}px`;
             // If animations are enabled, we need to animate in the correct directions:
             if (nextStepIndex > this.currentStepIndex) {
                 this.steps[this.currentStepIndex].className =
@@ -139,7 +95,7 @@ export default class StepSequence extends LightningElement {
             }
         }
 
-        if (this.useHistory && updateHistory) {
+        if (updateHistory) {
             history.pushState(
                 {
                     currentStepIndex: nextStepIndex
@@ -147,29 +103,7 @@ export default class StepSequence extends LightningElement {
                 ""
             );
         }
-
-        if (this.sessionStorageId) {
-            sessionStorage.setItem(
-                this.sessionStorageId,
-                JSON.stringify({
-                    currentStepIndex: nextStepIndex
-                })
-            );
-        }
-
         this.currentStepIndex = nextStepIndex;
-
-        if (this.communicateStepChanges) {
-            this.dispatchEvent(
-                new CustomEvent("stepsequencechange", {
-                    detail: {
-                        stepIndex: this.currentStepIndex
-                    },
-                    composed: true,
-                    bubbles: true
-                })
-            );
-        }
     }
 
     private initializeStepAnimationClasses(
@@ -189,15 +123,10 @@ export default class StepSequence extends LightningElement {
         }
     }
 
-    @api
-    public getCurrentStepIndex(): number {
-        return this.currentStepIndex;
-    }
-
     // This method is available in case there are scenarios where a sequence needs to "jump" in some cases
     @api
     public jumpToStep(stepIndex: number) {
-        if (!this.isStepIndexWithinBounds(stepIndex)) {
+        if (stepIndex < 0 || stepIndex >= this.steps.length) {
             // illegal value; ignore
             return;
         }
@@ -211,10 +140,6 @@ export default class StepSequence extends LightningElement {
         }
     }
 
-    private isStepIndexWithinBounds(stepIndex: number) {
-        return stepIndex >= 0 && stepIndex < this.steps.length;
-    }
-
     handleHistoryPopstate = ({ state }: PopStateEvent) => {
         if (typeof state.currentStepIndex === "number") {
             this.changeActiveStep(state.currentStepIndex, false);
@@ -244,35 +169,29 @@ export default class StepSequence extends LightningElement {
     // change it).
     handleSlotChange(e: Event) {
         const slot = e.target as HTMLSlotElement;
-
-        if (slot.className !== this.slotClassName) {
-            return;
-        }
-
         this.steps = slot.assignedElements() as HTMLElement[];
-        let numPendingInitialTransitions = 0;
-
-        this.steps.forEach((step, index) => {
-            if (this.animateTransitions) {
+        if (!this.animateTransitions) {
+            this.steps[this.currentStepIndex].className = "visible active-step";
+        } else {
+            // For transition animations to be visible, the container must have a height that will
+            // keep the components visible as they transition in and out. Currently this component
+            // will have at least the height of the "tallest" slotted element.
+            let minHeight = 0;
+            this.steps.forEach((step, index) => {
+                if (step.clientHeight > minHeight) {
+                    minHeight = step.clientHeight;
+                }
                 this.initializeStepAnimationClasses(
                     this.currentStepIndex,
                     step,
                     index
                 );
-                if (index !== this.currentStepIndex) {
-                    const numTransitionsForStep = getComputedStyle(
-                        step
-                    )?.transition?.split(",").length;
-                    if (numTransitionsForStep) {
-                        numPendingInitialTransitions =
-                            numPendingInitialTransitions +
-                            numTransitionsForStep;
-                    }
-                }
+            });
+            if (minHeight > 0) {
+                this.template.querySelector(
+                    ".step-sequence-container"
+                )!.style.minHeight = `${minHeight}px`;
             }
-        });
-
-        this.numPendingInitialTransitions = numPendingInitialTransitions;
-        this.steps[this.currentStepIndex].className = "visible active-step";
+        }
     }
 }