@salesforcedevs/dx-components 0.8.0 → 0.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.8.0",
+    "version": "0.8.1",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -29,5 +29,5 @@
         "@types/debounce": "^1.2.0",
         "@types/lodash.get": "^4.4.6"
     },
-    "gitHead": "fd0ff16461b3b952181aa6dc6e94af1cab0bc300"
+    "gitHead": "9c9dc1dbb7ff863bfa26b863daac98f638b7c299"
 }

package/src/modules/dx/dropdown/__tests__/dropdown.test.ts

@@ -1,5 +1,6 @@
 import Dropdown from "dx/dropdown";
 import DropdownOption from "dx/dropdownOption";
+import Popover from "dx/popover";
 import { getOptionsCount } from "utils/options";
 import { createRenderComponent } from "utils/tests";
 import mockNestedOptions from "./mockNestedOptions";
@@ -12,6 +13,13 @@ describe(TAG, () => {
     describe("render", () => {
         it("renders all options when open", () => {
             const component = render({ ...mockProps, open: true });
+
+            const menuDiv: HTMLElement = component.shadowRoot.querySelector(
+                ".menu_list"
+            );
+            expect(menuDiv).not.toBeNull();
+            expect(menuDiv.getAttribute("role")).toBe("menu");
+
             const options = component.shadowRoot.querySelectorAll(
                 "dx-dropdown-option"
             );
@@ -55,6 +63,24 @@ describe(TAG, () => {
             expect(id).toEqual(mockProps.value);
             return expect(component).toBeAccessible();
         });
+
+        it("renders with menu-offset-small and menu-hidden", () => {
+            const component = render({ offset: "small", options: [] });
+            const popover: Popover = component.shadowRoot.querySelector(
+                "dx-popover"
+            );
+            expect(popover).not.toBeNull();
+
+            expect(popover.classList).toContain("menu-offset-small");
+            expect(popover.classList).toContain("menu-hidden");
+
+            const options = component.shadowRoot.querySelectorAll(
+                "dx-dropdown-option"
+            );
+            expect(options).toHaveLength(0);
+
+            return expect(component).toBeAccessible();
+        });
     });
 
     describe("interactions", () => {
@@ -98,34 +124,49 @@ describe(TAG, () => {
             option.dispatchEvent(new CustomEvent("select", { detail: id }));
 
             expect(mockClose).toHaveBeenCalledTimes(1);
-            expect(component.open).toEqual(false);
             return expect(component).toBeAccessible();
         });
 
-        it("handles open event from popover", () => {
-            const component = render(mockProps);
-            expect(component.open).toBeFalsy();
+        it("handles keydown event with ArrowDown key", () => {
+            const [firstOption] = mockProps.options;
+            const component = render({ ...mockProps, value: null, open: true });
+            expect(component.focusedValue).toBeNull();
 
-            const popover: HTMLElement = component.shadowRoot.querySelector(
-                "dx-popover"
+            component.dispatchEvent(
+                new KeyboardEvent("keydown", { key: "ArrowDown" })
             );
-            expect(popover).not.toBeNull();
-            popover.dispatchEvent(new CustomEvent("open"));
+            expect(component.focusedValue).toBe(firstOption.id);
+        });
+
+        it("ignores other click keys", () => {
+            const component = render({ ...mockProps, open: true });
 
-            expect(component.open).toBe(true);
+            component.dispatchEvent(
+                new KeyboardEvent("keydown", { key: "ArrowDown" })
+            );
+            expect(component.focusedValue).toBe(mockProps.value);
+
+            component.dispatchEvent(
+                new KeyboardEvent("keydown", { key: "ArrowLeft" })
+            );
+
+            expect(component.focusedValue).toBe(mockProps.value);
         });
 
         it("handles close event from popover", () => {
             const component = render({ ...mockProps, open: true });
-            expect(component.open).toBe(true);
+
+            component.dispatchEvent(
+                new KeyboardEvent("keydown", { key: "ArrowDown" })
+            );
+            expect(component.focusedValue).toBe(mockProps.value);
 
             const popover: HTMLElement = component.shadowRoot.querySelector(
                 "dx-popover"
             );
             expect(popover).not.toBeNull();
             popover.dispatchEvent(new CustomEvent("close"));
-
-            expect(component.open).toBe(false);
+            expect(component.focusedValue).toBeNull();
         });
     });
 });

package/src/modules/dx/dropdown/dropdown.html

@@ -4,7 +4,6 @@
         class={className}
         full-width={fullWidth}
         offset={offset}
-        onopen={onOpen}
         onclose={onClose}
         open-on-hover={openOnHover}
         open={open}

package/src/modules/dx/dropdown/dropdown.ts

@@ -23,6 +23,7 @@ export default class Dropdown extends LightningElement {
     @api ariaLabel: string | null = null;
     @api tempId: string | null = null;
     @api offset?: "small" | "medium";
+    @api open: boolean | null = null;
     @api pagePadding?: number = 16; // padding between dropdown and the edge of the page
     @api placement?: PopperPlacement = "bottom-start";
     @api small?: boolean = false;
@@ -44,12 +45,8 @@ export default class Dropdown extends LightningElement {
     }
 
     @api
-    get open() {
-        return this._open;
-    }
-
-    set open(value) {
-        this._open = value;
+    get focusedValue() {
+        return this._focusedValue;
     }
 
     @track
@@ -57,8 +54,7 @@ export default class Dropdown extends LightningElement {
 
     // PRIVATE VARS
 
-    private focusedValue: string | null = null;
-    private _open = false;
+    private _focusedValue: string | null = null;
     private popoverEl: HTMLElement | null = null;
 
     constructor() {
@@ -98,18 +94,16 @@ export default class Dropdown extends LightningElement {
     // CLASS FNS
 
     private onKeyDown = (e: KeyboardEvent) => {
-        if (this.open) {
-            switch (e.key) {
-                case "ArrowDown":
-                    e.preventDefault();
-                    this.incrementOptionFocus(1);
-                    break;
-                case "ArrowUp":
-                    e.preventDefault();
-                    this.incrementOptionFocus(-1);
-                    break;
-                default:
-            }
+        switch (e.key) {
+            case "ArrowDown":
+                e.preventDefault();
+                this.incrementOptionFocus(1);
+                break;
+            case "ArrowUp":
+                e.preventDefault();
+                this.incrementOptionFocus(-1);
+                break;
+            default:
         }
     };
 
@@ -125,7 +119,7 @@ export default class Dropdown extends LightningElement {
     private onOptionFocus(e: PointerEvent) {
         if (e.target) {
             // @ts-ignore
-            this.focusedValue = e.target.option.id;
+            this._focusedValue = e.target.option.id;
         }
     }
 
@@ -137,13 +131,13 @@ export default class Dropdown extends LightningElement {
     }
 
     private incrementOptionFocus(indexChange: number) {
-        if (!this.focusedValue) {
+        if (!this._focusedValue) {
             this.focusDefaultOption();
             return;
         }
 
         const focusedOptionIndex = this.findOptionElementIndex(
-            this.focusedValue
+            this._focusedValue
         );
 
         let nextIndex = focusedOptionIndex + indexChange;
@@ -160,13 +154,8 @@ export default class Dropdown extends LightningElement {
         }
     }
 
-    private onOpen(): void {
-        this._open = true;
-    }
-
     private onClose(): void {
-        this.focusedValue = null;
-        this._open = false;
+        this._focusedValue = null;
     }
 
     private focusDefaultOption() {
@@ -179,7 +168,7 @@ export default class Dropdown extends LightningElement {
         ];
         if (optionToFocus) {
             optionToFocus.focus();
-            this.focusedValue = optionToFocus.option.id;
+            this._focusedValue = optionToFocus.option.id;
         }
     }
 

package/src/modules/dx/headerSearch/__tests__/headerSearch.test.ts

@@ -24,7 +24,7 @@ const COVEO_CONFIG = {
     reducers: searchAppReducers
 };
 
-const REDIRECT_URL = "https://beta.developer.salesforce.com";
+const REDIRECT_URL = "https://developer.salesforce.com";
 
 const TAG = "dx-header-search";
 const render = createRenderComponent(TAG, HeaderSearch);

package/src/modules/dx/headerSearch/headerSearch.ts

@@ -80,7 +80,7 @@ export default class HeaderSearch extends LightningElement {
     private instantiateSearchbox() {
         const options: StandaloneSearchBoxOptions = {
             numberOfSuggestions: 3,
-            redirectionUrl: "https://beta.developer.salesforce.com"
+            redirectionUrl: "https://developer.salesforce.com"
         };
 
         const engine = new HeadlessEngine({

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

@@ -4,6 +4,5 @@ export default {
     pagePadding: 20,
     placement: "top-start",
     small: true,
-    openOnHover: true,
     width: "300px"
 };

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

@@ -37,6 +37,7 @@ export default class Popover extends LightningElement {
         return this._open;
     }
     set open(value: boolean | null) {
+        this.controlled = typeof value === "boolean";
         if (value !== this._open) {
             if (value) {
                 this.openPopover();
@@ -101,6 +102,7 @@ export default class Popover extends LightningElement {
 
     // PRIVATE VARS
 
+    private controlled: boolean = false;
     private _open: boolean = false;
     private _rendered: boolean = isPrerender();
     private _role: string | null = null;
@@ -152,19 +154,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
@@ -186,11 +195,7 @@ export default class Popover extends LightningElement {
         // @ts-ignore something weird happening here with debounce types
         debounce(this._interactOutsideListener(e), 100);
 
-    private onControlMouseEnter = () => {
-        if (this.openOnHover) {
-            this.openPopover();
-        }
-    };
+    private onControlMouseEnter = () => this.openPopover();
 
     private onControlKeydown = (e: KeyboardEvent) => {
         switch (e.key) {
@@ -207,13 +212,13 @@ export default class Popover extends LightningElement {
     };
 
     private onControlClick = () => {
-        if (this.open && !this.openOnHover) {
-            this.closePopover();
+        if (this.controlled) {
+            this.dispatchRequestCloseEvent("click-control");
             return;
         }
 
         if (this.open) {
-            this.dispatchRequestCloseEvent("click-control");
+            this.closePopover();
             return;
         }