@salesforcedevs/dx-components 0.71.0 → 0.72.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.71.0",
+    "version": "0.72.0",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -18,13 +18,15 @@
         "coveo-search-ui": "^2.10082.5",
         "debounce": "^1.2.0",
         "lodash.get": "^4.4.2",
+        "lodash.kebabcase": "^4.1.1",
         "microtip": "0.2.2"
     },
     "devDependencies": {
         "@types/classnames": "^2.2.10",
         "@types/debounce": "^1.2.0",
         "@types/lodash.get": "^4.4.6",
+        "@types/lodash.kebabcase": "^4.1.7",
         "@types/vimeo__player": "^2.16.2"
     },
-    "gitHead": "4a5210f6d819521bdad4cd5a21ffc38051c7bd75"
+    "gitHead": "fd347f27dc9472a9ead4f35f701b8914ba9f872e"
 }

package/src/modules/dxUtils/queryCoordinator/queryCoordinator.ts

@@ -1,20 +1,43 @@
-import qs from "query-string";
+import qs, { ParsedQuery } from "query-string";
+/*
+ we import this util function below to get/set the query params as hyphenated versions of their camelcase counterparts.
+*/
+import kebabCase from "lodash.kebabcase";
 
 export function getUrlParamValue(key: string) {
-    const urlParams = qs.parse(window.location.search);
+    const urlParams: ParsedQuery<string> = qs.parse(window.location.search);
+    const hyphenatedKey = kebabCase(key);
 
-    return urlParams[key] ? urlParams[key]?.split(",") : [];
+    if (hyphenatedKey in urlParams) {
+        return (urlParams[hyphenatedKey] as string)
+            .split(",")
+            .map((urlParam) => urlParam.replace("-", " "));
+    }
+
+    return [];
 }
 
-export function setUrlParamValue(key: string, value: any) {
-    const newUrl = new URL(window.location.href);
-    if (value) {
-        newUrl.search = qs.stringify(
-            { [key]: value },
-            { arrayFormat: "comma" }
-        );
-    } else {
-        newUrl.searchParams.delete(key);
+export function setUrlParamValue(options: { [key: string]: string[] }) {
+    const url = new URL(window.location.href);
+
+    const newParams = {} as any;
+    const urlParams = qs.parse(window.location.search) as any;
+
+    for (const [key, value] of Object.entries(options)) {
+        if (value?.length) {
+            newParams[kebabCase(key)] = value.map((v) => kebabCase(v));
+        } else {
+            delete urlParams[kebabCase(key)];
+        }
     }
-    window.history.replaceState(null, "", newUrl.href);
+
+    url.search = qs.stringify(
+        {
+            ...urlParams,
+            ...newParams
+        },
+        { arrayFormat: "comma" }
+    );
+
+    window.history.replaceState(null, "", url.href);
 }