@beinformed/ui 1.65.10 → 1.65.12

package/lib/models/parameter/Parameter.js

@@ -55,13 +55,13 @@ class Parameter {
     }
 
     // parameter has the structure prefix~name=value
-    const namePart = parameter.substr(0, parameter.indexOf("="));
-    const value = parameter.substr(parameter.indexOf("=") + 1);
+    const namePart = parameter.substring(0, parameter.indexOf("="));
+    const value = parameter.substring(parameter.indexOf("=") + 1);
     let prefix;
-    let name = namePart;
-    if ((0, _includes.default)(namePart).call(namePart, _Constants.PARAMETER_SEPARATOR)) {
-      prefix = namePart.substr(0, namePart.indexOf("~"));
-      name = namePart.substr(namePart.indexOf("~") + 1);
+    let name = decodeURIComponent(namePart);
+    if ((0, _includes.default)(name).call(name, _Constants.PARAMETER_SEPARATOR)) {
+      prefix = name.substring(0, name.indexOf("~"));
+      name = name.substring(name.indexOf("~") + 1);
     }
     if (name === "") {
       return null;

package/lib/models/parameter/Parameter.js.map

@@ -1 +1 @@
-{"version":3,"file":"Parameter.js","names":["_Constants","require","_Settings","Parameter","constructor","prefix","name","value","_defineProperty2","default","_prefix","_name","_value","fromString","parameter","_includes","call","namePart","substr","indexOf","PARAMETER_SEPARATOR","decodeURIComponent","toString","withPrefix","toQuerystring","encodeURIComponent","isModUIParameter","_isModUIParameter","_context","uiParameterSetting","getSetting","DEFAULT_UI_PARAMETERS","_default","exports"],"sources":["../../../src/models/parameter/Parameter.js"],"sourcesContent":["// @flow\nimport {\n  PARAMETER_SEPARATOR,\n  DEFAULT_UI_PARAMETERS,\n} from \"../../constants/Constants\";\nimport { getSetting } from \"../../constants/Settings\";\n\n/**\n * Querystring parameter\n */\nclass Parameter {\n  _prefix: ?string;\n  _name: string;\n  _value: ?string;\n  _isModUIParameter: boolean | null = null;\n\n  /**\n   */\n  constructor(prefix: ?string, name: string, value: ?string) {\n    this._prefix = prefix;\n    this._name = name;\n    this._value = value;\n  }\n\n  /**\n   * Getting prefix\n   */\n  get prefix(): ?string {\n    return this._prefix;\n  }\n\n  /**\n   * Getting name\n   */\n  get name(): string {\n    return this._name;\n  }\n\n  /**\n   * Getting value\n   */\n  get value(): ?string {\n    return this._value;\n  }\n\n  /**\n   * Create parameter from string input\n   */\n  static fromString(parameter: string): null | Parameter {\n    if (parameter == null || parameter === \"\" || !parameter.includes(\"=\")) {\n      return null;\n    }\n\n    // parameter has the structure prefix~name=value\n    const namePart = parameter.substr(0, parameter.indexOf(\"=\"));\n    const value = parameter.substr(parameter.indexOf(\"=\") + 1);\n\n    let prefix;\n    let name = namePart;\n    if (namePart.includes(PARAMETER_SEPARATOR)) {\n      prefix = namePart.substr(0, namePart.indexOf(\"~\"));\n      name = namePart.substr(namePart.indexOf(\"~\") + 1);\n    }\n\n    if (name === \"\") {\n      return null;\n    }\n\n    return new Parameter(prefix, name, decodeURIComponent(value));\n  }\n\n  /**\n   * Convert parameter to string\n   */\n  toString(withPrefix: boolean = true): string {\n    if (!this.name) {\n      return \"\";\n    }\n\n    const value = this.value == null ? \"\" : this.value;\n\n    return withPrefix && this.prefix\n      ? `${this.prefix}${PARAMETER_SEPARATOR}${this.name}=${value}`\n      : `${this.name}=${value}`;\n  }\n\n  /**\n   */\n  toQuerystring(withPrefix: boolean = true): string {\n    if (!this.name) {\n      return \"\";\n    }\n\n    const value = this.value == null ? \"\" : encodeURIComponent(this.value);\n\n    return withPrefix && this.prefix\n      ? `${this.prefix}${PARAMETER_SEPARATOR}${this.name}=${value}`\n      : `${this.name}=${value}`;\n  }\n\n  /**\n   * Indicates if parameter can be send to the Be Informed modular UI\n   */\n  get isModUIParameter(): boolean {\n    if (this._isModUIParameter == null) {\n      const uiParameterSetting = getSetting(\"UI_PARAMETERS\", []);\n      this._isModUIParameter = ![\n        ...DEFAULT_UI_PARAMETERS,\n        ...uiParameterSetting,\n      ].includes(this.name);\n    }\n\n    return this._isModUIParameter;\n  }\n}\n\nexport default Parameter;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Parameter.js","names":["_Constants","require","_Settings","Parameter","constructor","prefix","name","value","_defineProperty2","default","_prefix","_name","_value","fromString","parameter","_includes","call","namePart","substring","indexOf","decodeURIComponent","PARAMETER_SEPARATOR","toString","withPrefix","toQuerystring","encodeURIComponent","isModUIParameter","_isModUIParameter","_context","uiParameterSetting","getSetting","DEFAULT_UI_PARAMETERS","_default","exports"],"sources":["../../../src/models/parameter/Parameter.js"],"sourcesContent":["// @flow\nimport {\n  PARAMETER_SEPARATOR,\n  DEFAULT_UI_PARAMETERS,\n} from \"../../constants/Constants\";\nimport { getSetting } from \"../../constants/Settings\";\n\n/**\n * Querystring parameter\n */\nclass Parameter {\n  _prefix: ?string;\n  _name: string;\n  _value: ?string;\n  _isModUIParameter: boolean | null = null;\n\n  /**\n   */\n  constructor(prefix: ?string, name: string, value: ?string) {\n    this._prefix = prefix;\n    this._name = name;\n    this._value = value;\n  }\n\n  /**\n   * Getting prefix\n   */\n  get prefix(): ?string {\n    return this._prefix;\n  }\n\n  /**\n   * Getting name\n   */\n  get name(): string {\n    return this._name;\n  }\n\n  /**\n   * Getting value\n   */\n  get value(): ?string {\n    return this._value;\n  }\n\n  /**\n   * Create parameter from string input\n   */\n  static fromString(parameter: string): null | Parameter {\n    if (parameter == null || parameter === \"\" || !parameter.includes(\"=\")) {\n      return null;\n    }\n\n    // parameter has the structure prefix~name=value\n    const namePart = parameter.substring(0, parameter.indexOf(\"=\"));\n    const value = parameter.substring(parameter.indexOf(\"=\") + 1);\n\n    let prefix;\n    let name = decodeURIComponent(namePart);\n    if (name.includes(PARAMETER_SEPARATOR)) {\n      prefix = name.substring(0, name.indexOf(\"~\"));\n      name = name.substring(name.indexOf(\"~\") + 1);\n    }\n\n    if (name === \"\") {\n      return null;\n    }\n\n    return new Parameter(prefix, name, decodeURIComponent(value));\n  }\n\n  /**\n   * Convert parameter to string\n   */\n  toString(withPrefix: boolean = true): string {\n    if (!this.name) {\n      return \"\";\n    }\n\n    const value = this.value == null ? \"\" : this.value;\n\n    return withPrefix && this.prefix\n      ? `${this.prefix}${PARAMETER_SEPARATOR}${this.name}=${value}`\n      : `${this.name}=${value}`;\n  }\n\n  /**\n   */\n  toQuerystring(withPrefix: boolean = true): string {\n    if (!this.name) {\n      return \"\";\n    }\n\n    const value = this.value == null ? \"\" : encodeURIComponent(this.value);\n\n    return withPrefix && this.prefix\n      ? `${this.prefix}${PARAMETER_SEPARATOR}${this.name}=${value}`\n      : `${this.name}=${value}`;\n  }\n\n  /**\n   * Indicates if parameter can be send to the Be Informed modular UI\n   */\n  get isModUIParameter(): boolean {\n    if (this._isModUIParameter == null) {\n      const uiParameterSetting = getSetting(\"UI_PARAMETERS\", []);\n      this._isModUIParameter = ![\n        ...DEFAULT_UI_PARAMETERS,\n        ...uiParameterSetting,\n      ].includes(this.name);\n    }\n\n    return this._isModUIParameter;\n  }\n}\n\nexport default Parameter;\n"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@beinformed/ui",
-  "version": "1.65.10",
+  "version": "1.65.12",
   "description": "Toolbox for be informed javascript layouts",
   "license": "SEE LICENSE IN LICENSE.md",
   "bugs": "https://support.beinformed.com",
@@ -69,9 +69,9 @@
     "styled-components": "^5.0.0"
   },
   "dependencies": {
-    "@babel/runtime-corejs3": "^7.28.4",
+    "@babel/runtime-corejs3": "^7.28.6",
     "@date-fns/tz": "^1.4.1",
-    "baseline-browser-mapping": "^2.9.11",
+    "baseline-browser-mapping": "^2.9.14",
     "big.js": "^7.0.1",
     "date-fns": "^4.1.0",
     "deepmerge": "^4.3.1",
@@ -89,18 +89,18 @@
     "timezone-soft": "^1.5.2"
   },
   "devDependencies": {
-    "@babel/cli": "^7.28.3",
-    "@babel/core": "^7.28.5",
-    "@babel/eslint-parser": "^7.28.5",
+    "@babel/cli": "^7.28.6",
+    "@babel/core": "^7.28.6",
+    "@babel/eslint-parser": "^7.28.6",
     "@babel/eslint-plugin": "^7.27.1",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-transform-runtime": "^7.28.5",
-    "@babel/preset-env": "^7.28.5",
+    "@babel/preset-env": "^7.28.6",
     "@babel/preset-flow": "^7.27.1",
     "@babel/preset-react": "^7.28.5",
-    "@commitlint/cli": "^20.3.0",
-    "@commitlint/config-conventional": "^20.3.0",
+    "@commitlint/cli": "^20.3.1",
+    "@commitlint/config-conventional": "^20.3.1",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.1",
     "auditjs": "^4.0.47",
@@ -122,7 +122,7 @@
     "flow-bin": "^0.200.1",
     "flow-copy-source": "^2.0.9",
     "flow-typed": "^3.9.0",
-    "hermes-eslint": "^0.33.2",
+    "hermes-eslint": "^0.33.3",
     "history": "^4.0.0",
     "husky": "^9.1.7",
     "jest": "^30.2.0",

package/src/hooks/useDeepCompareEffect.js

@@ -1,34 +1,50 @@
 // @flow
-import * as React from "react";
+import { useRef, useEffect } from "react";
 import { dequal as deepEqual } from "dequal/lite";
 
 type Callback = () => void | (() => void);
-type DependencyList = Array<mixed>;
+type DependencyList = $ReadOnlyArray<any>;
 
 /**
- * As copied from https://github.com/kentcdodds/use-deep-compare-effect/
- * Need to copy this, because the dependency on dequal breaks in ie11
+ * Validates that dependencies are used correctly.
+ * Deep compare should not be used with empty arrays or no dependencies.
  */
-const useDeepCompareMemoize = (value: DependencyList) => {
-  const ref = React.useRef<DependencyList | null>(null); // NOSONAR
-  const signalRef = React.useRef<number>(0);
+function checkDeps(deps: DependencyList) {
+  if (process.env.NODE_ENV !== "production") {
+    if (!deps || deps.length === 0) {
+      console.warn(
+        "useDeepCompareEffect should not be used with no dependencies. Use React.useEffect instead.",
+      );
+    }
+  }
+}
+
+const useDeepCompareMemoize = (value: DependencyList): DependencyList => {
+  const ref = useRef<DependencyList>(value);
 
+  // Only update the ref if the deep equality check fails
   if (!deepEqual(value, ref.current)) {
     ref.current = value;
-    signalRef.current += 1;
   }
 
-  return [signalRef.current];
+  return ref.current;
 };
 
 /**
+ * A version of useEffect that accepts a deep comparison of dependencies.
  */
 export function useDeepCompareEffect(
   callback: Callback,
   dependencies: DependencyList,
 ): void {
+  if (process.env.NODE_ENV !== "production") {
+    checkDeps(dependencies);
+  }
+
+  // We use the memoized ref as the dependency.
+  // React's shallow check will only trigger when the ref object itself changes.
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  return React.useEffect(callback, useDeepCompareMemoize(dependencies));
+  useEffect(callback, useDeepCompareMemoize(dependencies));
 }
 
 export default useDeepCompareEffect;

package/src/hooks/useList.js

@@ -1,5 +1,4 @@
 // @flow
-import { useHistory } from "react-router";
 import { useDispatch } from "react-redux";
 
 import { useModularUIBasic } from "./useModularUIBasic";
@@ -7,6 +6,8 @@ import { HTTP_METHODS } from "../constants/Constants";
 
 import { loadModularUI } from "../redux";
 
+import { useNavigation } from "./useRouter";
+
 import DetailModel from "../models/detail/DetailModel";
 import ListModel from "../models/list/ListModel";
 import CaseSearchModel from "../models/search/CaseSearchModel";
@@ -84,9 +85,11 @@ export const useListNavigation = ({
   syncLocation = true,
   historyAction = "push",
 }: ListNavigationOptions = {}): ListNavigationHook => {
-  const history = useHistory();
+  const { push, replace } = useNavigation();
   const dispatch = useDispatch();
 
+  const navigate = historyAction === "push" ? push : replace;
+
   const update = useCallback(
     (list: ListModel, resetPage: boolean = false) => {
       const listHref = list.selfhref;
@@ -96,9 +99,9 @@ export const useListNavigation = ({
 
       if (list.requestMethod === HTTP_METHODS.POST) {
         if (syncLocation) {
-          history[historyAction]({
+          navigate({
             search: listHref.getQuerystring(true),
-            state: list.formdata,
+            state: { formdata: list.formdata },
           });
         }
 
@@ -111,7 +114,7 @@ export const useListNavigation = ({
         );
       } else {
         if (syncLocation) {
-          history[historyAction]({ search: listHref.getQuerystring(true) });
+          navigate({ search: listHref.getQuerystring(true) });
         }
         dispatch(
           loadModularUI(list.connectKey, listHref, {
@@ -121,7 +124,7 @@ export const useListNavigation = ({
         );
       }
     },
-    [dispatch, history, historyAction, syncLocation],
+    [dispatch, navigate, syncLocation],
   );
 
   const updateFilters = useCallback(

package/src/hooks/useLookup.js

@@ -21,7 +21,7 @@ type UseLookupHook = {
 export const useLookup = (
   lookupLink: LinkModel,
   filterInput: string = "",
-  minLength: number = 2,
+  minLength: number = 1,
   debounceMs: number = 300,
 ): UseLookupHook => {
   const { start, finish } = useProgressIndicator();

package/src/hooks/useModularUIBasic.js

@@ -4,7 +4,7 @@ import { useSelector } from "react-redux";
 import { useMemo } from "react";
 import { useModularUI } from "./useModularUI";
 
-import { MODULARUI_STATUS } from "../constants";
+import { HTTP_METHODS, MODULARUI_STATUS } from "../constants";
 import { useModularUIKey } from "./useModularUIKey";
 
 import type { ModularUIModel, Href } from "../models";
@@ -13,6 +13,7 @@ export type HookOptions = {
   origin?: string,
   contextPath?: string,
   removeOnUnmount?: boolean,
+  formdata?: any,
 };
 
 export type UseModularUIBasicOptions<T: ModularUIModel> = {
@@ -25,6 +26,7 @@ export type UseModularUIBasicOptions<T: ModularUIModel> = {
   key?: string,
   isReload?: boolean,
   removeOnUnmount?: boolean,
+  formdata?: any,
 };
 
 // Helper to create useModularUI options
@@ -41,6 +43,8 @@ const createUseModularUIOptions = <T: ModularUIModel>(
     contextPath: undefined,
     cache: false,
     removeOnUnmount: false,
+    method: HTTP_METHODS.GET,
+    data: undefined,
   };
 
   // Handle targetModel and forceTargetModel
@@ -62,6 +66,11 @@ const createUseModularUIOptions = <T: ModularUIModel>(
     baseOptions.removeOnUnmount = true;
   }
 
+  if (options.formdata != null) {
+    baseOptions.method = HTTP_METHODS.POST;
+    baseOptions.data = options.formdata;
+  }
+
   // Handle origin and contextPath options
   baseOptions.origin = options.origin ?? baseOptions.origin;
   baseOptions.contextPath = options.contextPath ?? baseOptions.contextPath;
@@ -94,6 +103,7 @@ export const useModularUIBasic = <T: ModularUIModel>(
     origin: undefined,
     contextPath: undefined,
     key: undefined,
+    formdata: undefined,
   },
 ): T | null => {
   const memoizedHref = useMemo(() => href.toString(), [href]);

package/src/hooks/usePanel.js

@@ -64,7 +64,7 @@ const useUrl = (href?: string | Href, fromRoute: boolean = false) => {
  */
 export const usePanel = (
   href?: string | Href,
-  options?: HookOptions & { fromRoute?: boolean },
+  options?: { ...HookOptions, fromRoute?: boolean },
 ): ListModel | GroupingPanelModel | DetailModel | null => {
   const { fromRoute, ...hookOptions } = options || { fromRoute: false };
 

package/src/hooks/useRouter.js

@@ -1,6 +1,6 @@
 // @flow
+import { useMemo } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import type { Location, LocationShape } from "react-router";
 
 import {
   push,
@@ -9,6 +9,8 @@ import {
   goBack,
   goForward,
 } from "../redux/_router/RouterActions";
+
+import type { Location, LocationShape } from "react-router";
 import type {
   GoAction,
   GoBackAction,
@@ -17,48 +19,52 @@ import type {
   ReplaceAction,
 } from "../redux";
 
-type UseLocationHook = () => Location;
-type UseLocationKeyHook = () => string;
-type UseQuerystringHook = () => string;
-type UsePathnameHook = () => string;
-type UseNavigationHook = () => {
+type NavigationAPI = {|
   push: (location: LocationShape | string, state?: { ... }) => PushAction,
   replace: (location: LocationShape | string, state?: { ... }) => ReplaceAction,
   go: (delta: number) => GoAction,
   goBack: () => GoBackAction,
   goForward: () => GoForwardAction,
-};
+|};
 
 /**
+ * Returns the full location object from the router state.
  */
-export const useLocation: UseLocationHook = () =>
-  useSelector((state) => state.router.location);
+export const useLocation = (): Location =>
+  useSelector((state) => state.router?.location || {});
 
 /**
+ * Returns the unique key of the current location.
  */
-export const useLocationKey: UseLocationKeyHook = () =>
-  useLocation()?.key ?? "";
+export const useLocationKey = (): string =>
+  useSelector((state) => state.router?.location?.key ?? "");
 
 /**
+ * Returns the current search (querystring) portion of the URL.
  */
-export const useQuerystring: UseQuerystringHook = () => useLocation()?.search;
+export const useQuerystring = (): string =>
+  useSelector((state) => state.router?.location?.search ?? "");
 
 /**
+ * Returns the current URL pathname.
  */
-export const usePathname: UsePathnameHook = () => useLocation()?.pathname;
+export const usePathname = (): string =>
+  useSelector((state) => state.router?.location?.pathname ?? "");
 
 /**
+ * Provides navigation methods.
  */
-export const useNavigation: UseNavigationHook = () => {
+export const useNavigation = (): NavigationAPI => {
   const dispatch = useDispatch();
 
-  return {
-    push: (location: LocationShape | string, state?: { ... }) =>
-      dispatch(push(location, state)),
-    replace: (location: LocationShape | string, state?: { ... }) =>
-      dispatch(replace(location, state)),
-    go: (delta: number) => dispatch(go(delta)),
-    goBack: () => dispatch(goBack()),
-    goForward: () => dispatch(goForward()),
-  };
+  return useMemo(
+    () => ({
+      push: (location, state) => dispatch(push(location, state)),
+      replace: (location, state) => dispatch(replace(location, state)),
+      go: (delta) => dispatch(go(delta)),
+      goBack: () => dispatch(goBack()),
+      goForward: () => dispatch(goForward()),
+    }),
+    [dispatch],
+  );
 };

package/src/models/href/Href.js

@@ -336,6 +336,15 @@ class Href {
     return this.getQuerystring(false);
   }
 
+  /**
+   * Retrieve all parameters from the parameter collection in a querystring style prefix~name1=value1&prefix~name2=value2, with the prefix
+   * The prefix is used to identify parameters per component on a grouping panel
+   * @returns {string}
+   */
+  get publicQuerystring(): string {
+    return this.getQuerystring(true);
+  }
+
   /**
    * Set the path of the Href, the part before the querystring question mark
    */
@@ -413,6 +422,23 @@ class Href {
     return this;
   }
 
+  /**
+   */
+  set formdata(formdata: any) {
+    const currentState = this.state ?? {};
+
+    this.state = {
+      ...currentState,
+      formdata,
+    };
+  }
+
+  /**
+   */
+  get formdata(): any {
+    return this.state?.formdata;
+  }
+
   /**
    * Set resourctype
    */
@@ -551,7 +577,8 @@ class Href {
   toLocation(): LocationShape {
     return {
       pathname: this.path,
-      search: this.querystring.length > 0 ? `?${this.querystring}` : "",
+      search:
+        this.publicQuerystring.length > 0 ? `?${this.publicQuerystring}` : "",
       hash: this.hash.length > 0 ? `#${this.hash}` : "",
       state: {
         origin: this.origin,

package/src/models/href/ListHref.js

@@ -18,6 +18,7 @@ export default class ListHref extends Href {
   _pagingName: string;
   _pagesizeName: string;
   _sortingName: string;
+  _lookupToken: ?string;
 
   /**
    * Create a ListHref
@@ -28,7 +29,7 @@ export default class ListHref extends Href {
     this._isPrefixed = isPrefixed;
 
     if (list != null) {
-      this.setParameterNamesFromListModel(list);
+      this.setParametersFromListModel(list);
     } else if (href != null && href instanceof ListHref) {
       this.setParameterNamesFromHref(href);
     }
@@ -47,7 +48,7 @@ export default class ListHref extends Href {
   /**
    * Retrieve parameter names and settings from List model
    */
-  setParameterNamesFromListModel(list: ListModel) {
+  setParametersFromListModel(list: ListModel) {
     this._prefix = this._isPrefixed ? list.key : null;
 
     this._pagingName = list.paging ? list.paging.name : "";
@@ -65,6 +66,10 @@ export default class ListHref extends Href {
     this.sort = list.sorting && list.sorting.param ? list.sorting.param : null;
 
     this.filterCollection = list.filterCollection;
+
+    this.formdata = list.formdata;
+
+    this.lookupToken = list.lookupToken;
   }
 
   /**
@@ -126,6 +131,13 @@ export default class ListHref extends Href {
     this.setParameter(this.pagesizeName, pageSizeValue, this.prefix);
   }
 
+  /**
+   * Set the lookup token
+   */
+  set lookupToken(token: ?string) {
+    this.setParameter("lookupToken", token, this.prefix);
+  }
+
   /**
    * Add filter parameters to the parameter collection
    */

package/src/models/list/ListModel.js

@@ -35,6 +35,18 @@ export default class ListModel extends ResourceModel {
   _actionCollection: ActionCollection;
   _listItemCollection: ListItemCollection;
   _grouping: GroupingModel;
+  _lookupToken: ?string = null;
+
+  /**
+   */
+  constructor(modularuiResponse: ModularUIResponse) {
+    super(modularuiResponse);
+
+    const lookupToken = modularuiResponse?.parameters?.find(
+      (param) => param.name === "lookupToken",
+    );
+    this.lookupToken = lookupToken?.value;
+  }
 
   /**
    */
@@ -109,6 +121,19 @@ export default class ListModel extends ResourceModel {
     return this.contributions.label;
   }
 
+  /**
+   * In case of a lookup list, the token being used to request the list
+   */
+  get lookupToken(): ?string {
+    return this._lookupToken;
+  }
+
+  /**
+   */
+  set lookupToken(lookupToken: ?string) {
+    this._lookupToken = lookupToken;
+  }
+
   /**
    * Getting the introduction text
    */
@@ -448,7 +473,13 @@ export default class ListModel extends ResourceModel {
 
   /**
    */
-  get formdata(): string {
-    return JSON.stringify(this.filterCollection.formdata);
+  get formdata(): string | null {
+    const { formdata } = this.filterCollection;
+
+    if (formdata != null) {
+      return JSON.stringify(formdata);
+    }
+
+    return null;
   }
 }

package/src/models/parameter/Parameter.js

@@ -52,14 +52,14 @@ class Parameter {
     }
 
     // parameter has the structure prefix~name=value
-    const namePart = parameter.substr(0, parameter.indexOf("="));
-    const value = parameter.substr(parameter.indexOf("=") + 1);
+    const namePart = parameter.substring(0, parameter.indexOf("="));
+    const value = parameter.substring(parameter.indexOf("=") + 1);
 
     let prefix;
-    let name = namePart;
-    if (namePart.includes(PARAMETER_SEPARATOR)) {
-      prefix = namePart.substr(0, namePart.indexOf("~"));
-      name = namePart.substr(namePart.indexOf("~") + 1);
+    let name = decodeURIComponent(namePart);
+    if (name.includes(PARAMETER_SEPARATOR)) {
+      prefix = name.substring(0, name.indexOf("~"));
+      name = name.substring(name.indexOf("~") + 1);
     }
 
     if (name === "") {