@salesforcedevs/dx-components 0.17.0 → 0.18.3

package/lwc.config.json

@@ -60,6 +60,7 @@
         "dx/sectionSmall",
         "dx/select",
         "dx/sidebar",
+        "dx/sidebarOld",
         "dx/socials",
         "dx/toc",
         "dx/tree",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.17.0",
+    "version": "0.18.3",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -14,7 +14,7 @@
         "access": "public"
     },
     "dependencies": {
-        "@coveo/headless": "0.1.0-alpha.33",
+        "@coveo/headless": "^1.32.0",
         "@popperjs/core": "2.9.1",
         "@sfdocs-internal/wires": "^0.6.3",
         "classnames": "^2.2.6",
@@ -29,5 +29,5 @@
         "@types/debounce": "^1.2.0",
         "@types/lodash.get": "^4.4.6"
     },
-    "gitHead": "b7a26c9e46cee9298b3ebc7cbea85930320b83a0"
+    "gitHead": "52ca593aa106591201218495916da5169e0e9470"
 }

package/src/assets/svg/sidebar-loading.svg

@@ -0,0 +1,34 @@
+
+<svg width="100%" height="374px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Scoped-Search" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Docs-–-Search-Results-Loading" transform="translate(-52.000000, -240.000000)" fill="#DAD8D7">
+            <g id="Group-12" transform="translate(52.000000, 240.000000)">
+                <g id="Group-5">
+                    <rect id="Rectangle" x="0" y="0" width="90%" height="10" rx="5"></rect>
+                    <rect id="Rectangle" x="0" y="26" width="80%" height="10" rx="5"></rect>
+                    <rect id="Rectangle" x="0" y="52" width="70%" height="10" rx="5"></rect>
+                </g>
+                <g id="Group-5" opacity="0.8" transform="translate(0.000000, 78.000000)">
+                    <rect id="Rectangle" x="0" y="0" width="90%" height="10" rx="5"></rect>
+                    <rect id="Rectangle" x="0" y="26" width="80%" height="10" rx="5"></rect>
+                    <rect id="Rectangle" x="0" y="52" width="70%" height="10" rx="5"></rect>
+                </g>
+                <g id="Group-5" opacity="0.6" transform="translate(0.000000, 156.000000)">
+                    <rect id="Rectangle" x="0" y="0" width="90%" height="10" rx="5"></rect>
+                    <rect id="Rectangle" x="0" y="26" width="80%" height="10" rx="5"></rect>
+                    <rect id="Rectangle" x="0" y="52" width="70%" height="10" rx="5"></rect>
+                </g>
+                <g id="Group-5" opacity="0.4" transform="translate(0.000000, 234.000000)">
+                    <rect id="Rectangle" x="0" y="0" width="90%" height="10" rx="5"></rect>
+                    <rect id="Rectangle" x="0" y="26" width="80%" height="10" rx="5"></rect>
+                    <rect id="Rectangle" x="0" y="52" width="70%" height="10" rx="5"></rect>
+                </g>
+                <g id="Group-5" opacity="0.197206577" transform="translate(0.000000, 312.000000)">
+                    <rect id="Rectangle" x="0" y="0" width="90%" height="10" rx="5"></rect>
+                    <rect id="Rectangle" x="0" y="26" width="80%" height="10" rx="5"></rect>
+                    <rect id="Rectangle" x="0" y="52" width="70%" height="10" rx="5"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

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

@@ -13,7 +13,13 @@ import {
     mockNavAnalytics
 } from "./mockNavs";
 import mockNavDevelopers from "./mockNavDevelopers";
-import { coveoConfig } from "../../headerSearch/__tests__/mockProps";
+
+export const coveoConfig = {
+    coveoOrganizationId: "coveosalesforcetestakshatha",
+    coveoPublicAccessToken: "xx114e9d50-bc6b-40f1-b25b-fa5a06c7e168",
+    coveoSearchPipeline: "salesforcedevdoc",
+    coveoSearchHub: "salesforcedevdoc2"
+};
 
 const versions = JSON.stringify([
     {

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

@@ -1,27 +1,23 @@
-import {
-    HeadlessEngine,
-    buildStandaloneSearchBox,
-    searchAppReducers
-} from "@coveo/headless";
+import { buildSearchEngine, buildStandaloneSearchBox } from "@coveo/headless";
 import Input from "dx/input";
 import Button from "dx/button";
 import Dropdown from "dx/dropdown";
 import HeaderSearch from "dx/headerSearch";
 import { PopoverRequestCloseType } from "typings/custom";
 import { createRenderComponent } from "utils/tests";
+import { coveoHeaderConfig } from "utils/coveo";
 import { MOCK_SUGGESTIONS } from "./mockData";
-import mockProps, { coveoConfig } from "./mockProps";
+import mockProps from "./mockProps";
 
 const COVEO_CONFIG = {
     configuration: {
-        organizationId: coveoConfig.coveoOrganizationId,
-        accessToken: coveoConfig.coveoPublicAccessToken,
+        organizationId: coveoHeaderConfig.coveoOrganizationId,
+        accessToken: coveoHeaderConfig.coveoPublicAccessToken,
         search: {
-            pipeline: coveoConfig.coveoSearchPipeline,
-            searchHub: coveoConfig.coveoSearchHub
+            pipeline: coveoHeaderConfig.coveoSearchPipeline,
+            searchHub: coveoHeaderConfig.coveoSearchHub
         }
-    },
-    reducers: searchAppReducers
+    }
 };
 
 const REDIRECT_URL = "https://developer.salesforce.com";
@@ -37,9 +33,8 @@ const mockUpdateText = jest.fn();
 
 jest.mock("@coveo/headless", () => {
     return {
-        HeadlessEngine: jest.fn(),
-        buildStandaloneSearchBox: jest.fn(),
-        searchAppReducers: jest.fn()
+        buildSearchEngine: jest.fn(),
+        buildStandaloneSearchBox: jest.fn()
     };
 });
 
@@ -68,14 +63,11 @@ const expectMobileToDefaultRender = ({
 };
 
 const expectSearchToInit = () => {
-    expect(HeadlessEngine).toHaveBeenCalledTimes(1);
-    expect(HeadlessEngine).toHaveBeenCalledWith(COVEO_CONFIG);
+    expect(buildSearchEngine).toHaveBeenCalledTimes(1);
+    expect(buildSearchEngine).toHaveBeenCalledWith(COVEO_CONFIG);
     expect(buildStandaloneSearchBox).toHaveBeenCalledTimes(1);
-    const [
-        engine,
-        options
-    ] = (buildStandaloneSearchBox as jest.Mock).mock.calls[0];
-    expect(engine).toBeInstanceOf(HeadlessEngine);
+    const options = (buildStandaloneSearchBox as jest.Mock).mock.calls[0][1];
+
     expect(options).toEqual({
         options: {
             numberOfSuggestions: 3,
@@ -85,8 +77,6 @@ const expectSearchToInit = () => {
     expect(mockSubscribe).toHaveBeenCalledTimes(1);
     expect(subscribeCallback).not.toBeNull();
     expect(subscribeCallback).toBeInstanceOf(Function);
-    expect(mockUpdateText).toHaveBeenCalledTimes(1);
-    expect(mockUpdateText).toHaveBeenCalledWith("");
 };
 
 describe(TAG, () => {
@@ -113,9 +103,8 @@ describe(TAG, () => {
             expect(container).not.toBeNull();
             expect(container.classList).toContain("desktop_search-container");
 
-            const suggestionsDropdown: Dropdown = element.shadowRoot.querySelector(
-                "dx-dropdown"
-            );
+            const suggestionsDropdown: Dropdown =
+                element.shadowRoot.querySelector("dx-dropdown");
             expect(suggestionsDropdown.options).toHaveLength(0);
             expect(suggestionsDropdown.open).toBe(false);
 
@@ -132,21 +121,18 @@ describe(TAG, () => {
 
         it("renders as mobile view", () => {
             const element = render({ ...mockProps, mobile: true });
-            const container: HTMLElement = element.shadowRoot.querySelector(
-                "div"
-            );
+            const container: HTMLElement =
+                element.shadowRoot.querySelector("div");
             expect(container).not.toBeNull();
             expect(container.classList).toHaveLength(0);
 
-            const dropdowns: Dropdown[] = element.shadowRoot.querySelectorAll(
-                "dx-dropdown"
-            );
+            const dropdowns: Dropdown[] =
+                element.shadowRoot.querySelectorAll("dx-dropdown");
             expect(dropdowns).toHaveLength(1);
             const [dropdown] = dropdowns;
             const input: Input = element.shadowRoot.querySelector("dx-input");
-            const button: Button = element.shadowRoot.querySelector(
-                "dx-button"
-            );
+            const button: Button =
+                element.shadowRoot.querySelector("dx-button");
             expectMobileToDefaultRender({
                 input,
                 dropdown,
@@ -165,9 +151,8 @@ describe(TAG, () => {
             const element = render({ ...mockProps, mobile: true });
 
             const input: Input = element.shadowRoot.querySelector("dx-input");
-            const dropdown: Dropdown = element.shadowRoot.querySelector(
-                "dx-dropdown"
-            );
+            const dropdown: Dropdown =
+                element.shadowRoot.querySelector("dx-dropdown");
             const button = element.shadowRoot.querySelector("dx-button");
             button.click();
 

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

@@ -1,11 +1,6 @@
-export const coveoConfig = {
-    coveoOrganizationId: "coveosalesforcetestakshatha",
-    coveoPublicAccessToken: "xx8d9c92ef-1018-4d92-a3c7-647dff01c21c",
-    coveoSearchPipeline: "salesforcedevdoc",
-    coveoSearchHub: "salesforcedevdoc"
-};
+import { coveoHeaderConfig } from "utils/coveo";
 
 export default {
     mobile: false,
-    ...coveoConfig
+    ...coveoHeaderConfig
 };

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

@@ -1,13 +1,12 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
 import { PopoverRequestCloseType, Option } from "typings/custom";
+import { buildSearchEngine } from "utils/coveo";
 import {
-    HeadlessEngine,
     StandaloneSearchBox as StandaloneSearchBoxType,
-    StandaloneSearchBoxOptions,
     StandaloneSearchBoxState,
     buildStandaloneSearchBox,
-    searchAppReducers
+    StandaloneSearchBoxOptions
 } from "@coveo/headless";
 
 const baseSearchHref = `/search`;
@@ -32,11 +31,11 @@ export default class HeaderSearch extends LightningElement {
     private get suggestions(): Option[] {
         if (this.searchState) {
             return this.searchState.suggestions.map(
-                ({ value }: { value: string }) => ({
-                    id: value,
-                    label: value,
+                ({ highlightedValue }: { highlightedValue: string }) => ({
+                    id: highlightedValue,
+                    label: highlightedValue,
                     link: {
-                        href: this.createSearchHref(value),
+                        href: this.createSearchHref(highlightedValue),
                         target: null
                     }
                 })
@@ -83,25 +82,20 @@ export default class HeaderSearch extends LightningElement {
             redirectionUrl: "https://developer.salesforce.com"
         };
 
-        const engine = new HeadlessEngine({
-            configuration: {
-                organizationId: this.coveoOrganizationId,
-                accessToken: this.coveoPublicAccessToken,
-                search: {
-                    pipeline: this.coveoSearchPipeline,
-                    searchHub: this.coveoSearchHub
-                }
-            },
-            reducers: searchAppReducers
+        const engine = buildSearchEngine({
+            organizationId: this.coveoOrganizationId,
+            publicAccessToken: this.coveoPublicAccessToken,
+            searchPipeline: this.coveoSearchPipeline,
+            searchHub: this.coveoSearchHub
         });
 
         this.searchBox = buildStandaloneSearchBox(engine, { options });
-        this.searchBox.subscribe(() => {
+
+        this.searchBox?.subscribe(() => {
             if (this.searchBox) {
                 this.searchState = this.searchBox.state;
             }
         });
-        this.searchBox.updateText("");
     }
 
     private createSearchHref = (value: string | null = "") => {

package/src/modules/dx/lazy/lazy.ts

@@ -2,13 +2,6 @@ import { LightningElement, api } from "lwc";
 
 import { LazyMode } from "typings/custom";
 
-declare global {
-    interface Window {
-        requestIdleCallback: any;
-        cancelIdleCallback: any;
-    }
-}
-
 /**
  * Defines a fallback for BackgroundTasksAPI for browsers that doesn't support it.
  * Currently BackgroundTasksAPI is supported by all major browsers

package/src/modules/dx/sidebar/__tests__/mockSearchChangeEmptyEvent.ts

@@ -0,0 +1,6 @@
+export default {
+    detail: {
+        value: "pwa",
+        results: []
+    }
+};