@onewelcome/react-lib-components 8.2.0 → 8.4.0

package/dist/esm/src/hooks/useUploadFile.esm.js

@@ -0,0 +1,101 @@
+import { useState, useEffect } from 'react';
+import { isJsonString } from '../util/helper.esm.js';
+
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+const useUploadFile = (files, request, callbacks) => {
+    const { url, headers, withCredentials } = request;
+    const { onComplete, onProgress, onErrorMessageMapper } = callbacks !== null && callbacks !== void 0 ? callbacks : {};
+    const [uploadingFiles, setUploadingFiles] = useState([]);
+    const [updatedFiles, setUpdatedFiles] = useState([...files]);
+    const getUpdatedList = (fileName, fileStatus, progress, error) => {
+        return files.map(file => {
+            if (file.name === fileName) {
+                file.progress = progress;
+                file.error = error;
+                file.status = fileStatus;
+            }
+            return { ...file };
+        });
+    };
+    const recordProgress = (e, fileName) => {
+        const progress = (e.loaded / e.total) * 100;
+        const updatedData = getUpdatedList(fileName, "uploading", progress);
+        setUpdatedFiles(updatedData);
+        onProgress === null || onProgress === void 0 ? void 0 : onProgress(fileName, progress);
+    };
+    const getFileStatus = (responseStatus, responseJson) => {
+        var _a, _b, _c;
+        let fileStatus = undefined;
+        let error = "";
+        if (responseStatus >= 200 && responseStatus < 400) {
+            fileStatus = "completed";
+        }
+        else if (responseStatus === 0) {
+            fileStatus = "retry";
+            error =
+                (_a = onErrorMessageMapper === null || onErrorMessageMapper === void 0 ? void 0 : onErrorMessageMapper({ responseStatus, responseJson })) !== null && _a !== void 0 ? _a : "Network error. Check internet connection and retry uploading the file";
+        }
+        else if (responseStatus >= 400 && responseStatus < 500) {
+            fileStatus = "error";
+            error = (_b = onErrorMessageMapper === null || onErrorMessageMapper === void 0 ? void 0 : onErrorMessageMapper({ responseStatus, responseJson })) !== null && _b !== void 0 ? _b : "Bad request";
+        }
+        else if (responseStatus >= 500) {
+            fileStatus = "error";
+            error = (_c = onErrorMessageMapper === null || onErrorMessageMapper === void 0 ? void 0 : onErrorMessageMapper({ responseStatus, responseJson })) !== null && _c !== void 0 ? _c : "Server Error";
+        }
+        return { fileStatus, error };
+    };
+    const handleOnComplete = (xhr, fileName) => {
+        const { status, readyState, responseText } = xhr;
+        if (readyState === xhr.DONE) {
+            const responseJson = responseText && isJsonString(responseText) && JSON.parse(responseText);
+            const { fileStatus, error } = getFileStatus(status, responseJson);
+            const updatedList = getUpdatedList(fileName, fileStatus, undefined, error);
+            setUpdatedFiles(updatedList);
+            const response = { fileList: updatedList, status, responseJson };
+            setUploadingFiles(prevState => prevState.filter(selected => selected.name === fileName));
+            onComplete === null || onComplete === void 0 ? void 0 : onComplete(response);
+        }
+    };
+    const uploadFile = (file) => {
+        const xhr = new XMLHttpRequest();
+        xhr.upload.addEventListener("progress", e => recordProgress(e, file.name));
+        xhr.addEventListener("readystatechange", () => handleOnComplete(xhr, file.name));
+        withCredentials && (xhr.withCredentials = true);
+        xhr.open("POST", url, true);
+        headers === null || headers === void 0 ? void 0 : headers.forEach((value, key) => xhr.setRequestHeader(key, value));
+        const formData = new FormData();
+        formData.append("file", file.data);
+        formData.append("name", file.name);
+        xhr.send(formData);
+    };
+    useEffect(() => {
+        if (!url || !files.length) {
+            return;
+        }
+        files.forEach(file => {
+            if (!file.status && !uploadingFiles.find(selected => selected.name === file.name)) {
+                setUploadingFiles(prevState => [...prevState, file]);
+                uploadFile(file);
+            }
+        });
+    }, [url, files]);
+    return { updatedFiles, setUpdatedFiles, uploadingFiles };
+};
+
+export { useUploadFile };
+//# sourceMappingURL=useUploadFile.esm.js.map

package/dist/esm/src/hooks/useUploadFile.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useUploadFile.esm.js","sources":["../../../../../../src/hooks/useUploadFile.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport { FileType } from \"../components/Form/FileUpload/FileUpload\";\nimport { useEffect, useState } from \"react\";\nimport { isJsonString } from \"../util/helper\";\n\nexport type UploadResponseStatus = XMLHttpRequest[\"status\"];\nexport type UploadResponseJson = Record<string, unknown>;\nexport interface UploadResponseType {\n  fileList: FileType[];\n  status: UploadResponseStatus;\n  responseJson: UploadResponseJson;\n}\nexport interface OnErrorMessageMapperType {\n  responseStatus: UploadResponseStatus;\n  responseJson: UploadResponseJson;\n}\nexport interface UseUploadFileCallback {\n  onComplete?: (response: UploadResponseType) => void;\n  onProgress?: (fileName: string, progress: number) => void;\n  onErrorMessageMapper?: (args: OnErrorMessageMapperType) => string | undefined;\n}\nexport interface UploadFileRequestParams {\n  url: string;\n  headers?: Headers;\n  withCredentials?: boolean;\n}\n\nexport const useUploadFile = (\n  files: FileType[],\n  request: UploadFileRequestParams,\n  callbacks?: UseUploadFileCallback\n) => {\n  const { url, headers, withCredentials } = request;\n\n  const { onComplete, onProgress, onErrorMessageMapper } = callbacks ?? {};\n\n  const [uploadingFiles, setUploadingFiles] = useState<FileType[]>([]);\n  const [updatedFiles, setUpdatedFiles] = useState<FileType[]>([...files]);\n\n  const getUpdatedList = (\n    fileName: string,\n    fileStatus: FileType[\"status\"],\n    progress?: number,\n    error?: string\n  ) => {\n    return files.map(file => {\n      if (file.name === fileName) {\n        file.progress = progress;\n        file.error = error;\n        file.status = fileStatus;\n      }\n      return { ...file };\n    });\n  };\n\n  const recordProgress = (e: ProgressEvent<XMLHttpRequestEventTarget>, fileName: string) => {\n    const progress = (e.loaded / e.total) * 100;\n    const updatedData = getUpdatedList(fileName, \"uploading\", progress);\n    setUpdatedFiles(updatedData);\n    onProgress?.(fileName, progress);\n  };\n\n  const getFileStatus = (\n    responseStatus: UploadResponseStatus,\n    responseJson: UploadResponseJson\n  ) => {\n    let fileStatus: FileType[\"status\"] = undefined;\n    let error = \"\";\n    if (responseStatus >= 200 && responseStatus < 400) {\n      fileStatus = \"completed\";\n    } else if (responseStatus === 0) {\n      fileStatus = \"retry\";\n      error =\n        onErrorMessageMapper?.({ responseStatus, responseJson }) ??\n        \"Network error. Check internet connection and retry uploading the file\";\n    } else if (responseStatus >= 400 && responseStatus < 500) {\n      fileStatus = \"error\";\n      error = onErrorMessageMapper?.({ responseStatus, responseJson }) ?? \"Bad request\";\n    } else if (responseStatus >= 500) {\n      fileStatus = \"error\";\n      error = onErrorMessageMapper?.({ responseStatus, responseJson }) ?? \"Server Error\";\n    }\n    return { fileStatus, error };\n  };\n\n  const handleOnComplete = (xhr: XMLHttpRequest, fileName: string) => {\n    const { status, readyState, responseText } = xhr;\n    if (readyState === xhr.DONE) {\n      const responseJson = responseText && isJsonString(responseText) && JSON.parse(responseText);\n      const { fileStatus, error } = getFileStatus(status, responseJson);\n      const updatedList = getUpdatedList(fileName, fileStatus, undefined, error);\n      setUpdatedFiles(updatedList);\n      const response = { fileList: updatedList, status, responseJson };\n      setUploadingFiles(prevState => prevState.filter(selected => selected.name === fileName));\n      onComplete?.(response);\n    }\n  };\n\n  const uploadFile = (file: FileType) => {\n    const xhr = new XMLHttpRequest();\n    xhr.upload.addEventListener(\"progress\", e => recordProgress(e, file.name));\n    xhr.addEventListener(\"readystatechange\", () => handleOnComplete(xhr, file.name));\n    withCredentials && (xhr.withCredentials = true);\n    xhr.open(\"POST\", url, true);\n    headers?.forEach((value, key) => xhr.setRequestHeader(key, value));\n    const formData = new FormData();\n    formData.append(\"file\", file.data as File);\n    formData.append(\"name\", file.name);\n    xhr.send(formData);\n  };\n\n  useEffect(() => {\n    if (!url || !files.length) {\n      return;\n    }\n\n    files.forEach(file => {\n      if (!file.status && !uploadingFiles.find(selected => selected.name === file.name)) {\n        setUploadingFiles(prevState => [...prevState, file]);\n        uploadFile(file);\n      }\n    });\n  }, [url, files]);\n\n  return { updatedFiles, setUpdatedFiles, uploadingFiles };\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/src/index.d.ts

@@ -41,8 +41,11 @@ export { Pagination } from "./components/Pagination/Pagination";
 export type { Props as PaginationProps, PageChangeLabels, PaginationTranslations, PageSize } from "./components/Pagination/Pagination";
 export { useRepeater } from "./hooks/useRepeater";
 export { useFullHeightCollapse } from "./hooks/useFullHeightCollapse";
-export { usePosition, Placement } from "./hooks/usePosition";
+export { usePosition } from "./hooks/usePosition";
+export type { Placement } from "./hooks/usePosition";
 export { useDebouncedCallback } from "./hooks/useDebouncedCallback";
+export { useUploadFile } from "./hooks/useUploadFile";
+export type { UploadResponseStatus, UploadResponseJson, UploadResponseType, UseUploadFileCallback, UploadFileRequestParams } from "./hooks/useUploadFile";
 export { generateID, debounce, throttle } from "./util/helper";
 export { Modal } from "./components/Notifications/Modal/Modal";
 export type { Props as ModalProps } from "./components/Notifications/Modal/Modal";
@@ -65,6 +68,15 @@ export type { Props as NotificationProviderProps } from "./components/Notificati
 export type { AddNotification, RemoveNotification, Translations } from "./components/Notifications/NotificationProvider/notification.interfaces";
 export { SlideInModal } from "./components/Notifications/SlideInModal/SlideInModal";
 export type { Props as SlideInModalProps } from "./components/Notifications/SlideInModal/SlideInModal";
+/** SideSheet */
+export { SideSheet } from "./components/Notifications/SideSheet/SideSheet";
+export type { Props as SideSheetProps } from "./components/Notifications/SideSheet/SideSheet";
+export { SideSheetActions } from "./components/Notifications/SideSheet/SideSheetActions/SideSheetActions";
+export type { Props as SideSheetActionsProps } from "./components/Notifications/SideSheet/SideSheetActions/SideSheetActions";
+export { SideSheetContent } from "./components/Notifications/SideSheet/SideSheetContent/SideSheetContent";
+export type { Props as SideSheetContentProps } from "./components/Notifications/SideSheet/SideSheetContent/SideSheetContent";
+export { SideSheetHeader } from "./components/Notifications/SideSheet/SideSheetHeader/SideSheetHeader";
+export type { Props as SideSheetHeaderProps } from "./components/Notifications/SideSheet/SideSheetHeader/SideSheetHeader";
 /** Form components */
 export { Checkbox } from "./components/Form/Checkbox/Checkbox";
 export type { Props as CheckboxProps } from "./components/Form/Checkbox/Checkbox";
@@ -106,7 +118,8 @@ export type { Props as TextareaWrapperProps } from "./components/Form/Wrapper/Te
 export { SelectWrapper } from "./components/Form/Wrapper/SelectWrapper/SelectWrapper";
 export type { Props as SelectWrapperProps } from "./components/Form/Wrapper/SelectWrapper/SelectWrapper";
 export { FileUpload } from "./components/Form/FileUpload/FileUpload";
-export type { Props as FileUploadProps } from "./components/Form/FileUpload/FileUpload";
+export type { Props as FileUploadProps, FileType } from "./components/Form/FileUpload/FileUpload";
+export { FILE_ACTION, ACTION_STATUS } from "./components/Form/FileUpload/FileItem/FileItem";
 export { MultiSelectWrapper } from "./components/Form/Wrapper/MultiSelectWrapper/MultiSelectWrapper";
 export type { Props as MultiSelectWrapperProps } from "./components/Form/Wrapper/MultiSelectWrapper/MultiSelectWrapper";
 export { ContentHeader } from "./components/Layout/ContentHeader/ContentHeader";
@@ -127,9 +140,15 @@ export { DataGridDrawerItem } from "./components/DataGrid/DataGridBody/DataGridD
 export type { Props as DataGridDrawerItemProps } from "./components/DataGrid/DataGridBody/DataGridDrawer/DataGridDrawerItem";
 export { DataGridCell } from "./components/DataGrid/DataGridBody/DataGridCell/DataGridCell";
 export type { Props as DataGridCellProps } from "./components/DataGrid/DataGridBody/DataGridCell/DataGridCell";
+export { Filter } from "./components/DataGrid/DataGridFilters/DataGridFilters.interfaces";
+export { FilterKeyMapper } from "./components/DataGrid/DataGridFilters/FilterKeyMapper";
 export { useFiltersReducer } from "./components/DataGrid/DataGridFilters/useFiltersReducer";
+/** Banner */
 export { Banner } from "./components/Notifications/Banner/Banner";
 export type { Props as BannerProps } from "./components/Notifications/Banner/Banner";
+/** DatePicker */
+export { DatePicker } from "./components/DatePicker/DatePicker";
+export type { Props as DatePickerProps } from "./components/DatePicker/DatePicker";
 /** Admin */
 export { MicrofrontendContainer } from "./components/admin/layout/MicrofrontendContainer/MicrofrontendContainer";
 export type { Props as MicrofrontendContainerProps } from "./components/admin/layout/MicrofrontendContainer/MicrofrontendContainer";

package/dist/esm/src/index.esm.js

@@ -22,6 +22,7 @@ export { useRepeater } from './hooks/useRepeater.esm.js';
 export { useFullHeightCollapse } from './hooks/useFullHeightCollapse.esm.js';
 export { usePosition } from './hooks/usePosition.esm.js';
 export { useDebouncedCallback } from './hooks/useDebouncedCallback.esm.js';
+export { useUploadFile } from './hooks/useUploadFile.esm.js';
 export { debounce, generateID, throttle } from './util/helper.esm.js';
 export { BaseModal as Modal } from '../Notifications/BaseModal/BaseModal.esm.js';
 export { useAlert } from '../Notifications/Alert/useAlert.esm.js';
@@ -29,11 +30,14 @@ export { AlertProvider } from '../Notifications/Alert/AlertProvider/AlertProvide
 export { AlertItem } from '../Notifications/Alert/AlertItem/AlertItem.esm.js';
 export { Dialog } from '../Notifications/Dialog/Dialog.esm.js';
 export { DiscardChangesModal } from '../Notifications/DiscardChangesModal/DiscardChangesModal.esm.js';
-export { BaseModalActions as ModalActions } from '../Notifications/BaseModal/BaseModalActions/BaseModalActions.esm.js';
+export { BaseModalActions as ModalActions, BaseModalActions as SideSheetActions } from '../Notifications/BaseModal/BaseModalActions/BaseModalActions.esm.js';
 export { BaseModalContent as ModalContent } from '../Notifications/BaseModal/BaseModalContent/BaseModalContent.esm.js';
 export { BaseModalHeader as ModalHeader } from '../Notifications/BaseModal/BaseModalHeader/BaseModalHeader.esm.js';
 export { NotificationProvider, useNotificationContext } from '../Notifications/NotificationProvider/NotificationContext.esm.js';
 export { SlideInModal } from '../Notifications/SlideInModal/SlideInModal.esm.js';
+export { SideSheet } from '../Notifications/SideSheet/SideSheet.esm.js';
+export { SideSheetContent } from '../Notifications/SideSheet/SideSheetContent/SideSheetContent.esm.js';
+export { SideSheetHeader } from '../Notifications/SideSheet/SideSheetHeader/SideSheetHeader.esm.js';
 export { Checkbox } from '../Form/Checkbox/Checkbox.esm.js';
 export { Fieldset } from '../Form/Fieldset/Fieldset.esm.js';
 export { Form } from '../Form/Form.esm.js';
@@ -55,6 +59,7 @@ export { CheckboxWrapper } from '../Form/Wrapper/CheckboxWrapper/CheckboxWrapper
 export { TextareaWrapper } from '../Form/Wrapper/TextareaWrapper/TextareaWrapper.esm.js';
 export { SelectWrapper } from '../Form/Wrapper/SelectWrapper/SelectWrapper.esm.js';
 export { FileUpload } from '../Form/FileUpload/FileUpload.esm.js';
+export { ACTION_STATUS, FILE_ACTION } from '../Form/FileUpload/FileItem/FileItem.esm.js';
 export { MultiSelectWrapper } from '../Form/Wrapper/MultiSelectWrapper/MultiSelectWrapper.esm.js';
 export { ContentHeader } from '../Layout/ContentHeader/ContentHeader.esm.js';
 export { FormStepper } from '../Layout/FormPage/FormWithStepper/FormStepper/FormStepper.esm.js';
@@ -64,7 +69,9 @@ export { DataGrid } from '../DataGrid/DataGrid.esm.js';
 export { DataGridRow } from '../DataGrid/DataGridBody/DataGridRow/DataGridRow.esm.js';
 export { DataGridDrawerItem } from '../DataGrid/DataGridBody/DataGridDrawer/DataGridDrawerItem.esm.js';
 export { DataGridCell } from '../DataGrid/DataGridBody/DataGridCell/DataGridCell.esm.js';
+export { FilterKeyMapper } from '../DataGrid/DataGridFilters/FilterKeyMapper.esm.js';
 export { useFiltersReducer } from '../DataGrid/DataGridFilters/useFiltersReducer.esm.js';
 export { Banner } from '../Notifications/Banner/Banner.esm.js';
+export { DatePicker } from '../DatePicker/DatePicker.esm.js';
 export { MicrofrontendContainer } from '../admin/layout/MicrofrontendContainer/MicrofrontendContainer.esm.js';
 //# sourceMappingURL=index.esm.js.map

package/dist/esm/src/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/src/util/helper.d.ts

@@ -4,9 +4,6 @@ export declare const debounce: (fn: (...args: unknown[]) => unknown, delay: numb
 export declare const throttle: (fn: (...args: unknown[]) => unknown, delay: number) => () => void;
 export declare const isEqual: (x: any, y: any) => boolean;
 export declare const areArraysDifferent: (arr1: Record<string, any>[], arr2: Record<string, any>[], key: string) => boolean;
-export declare const getValueByPath: (obj: {
-    [key: string]: any;
-}, path: string) => any;
 /** Source: https://stackoverflow.com/a/42769683/5084110 */
 export declare const remToPx: (rem: number) => number;
 export declare const isJsonString: (str: any) => boolean;

package/dist/esm/src/util/helper.esm.js

@@ -131,6 +131,15 @@ const throttle = (fn, delay) => {
 const remToPx = (rem) => {
     return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
 };
+const isJsonString = (str) => {
+    try {
+        JSON.parse(str);
+    }
+    catch (e) {
+        return false;
+    }
+    return true;
+};
 const deepMerge = (obj1, obj2) => {
     if (!obj2)
         return obj1;
@@ -152,5 +161,5 @@ const deepMerge = (obj1, obj2) => {
 };
 const escapeRegExp = (str) => str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 
-export { debounce, deepMerge, escapeRegExp, filterProps, generateID, remToPx, throttle };
+export { debounce, deepMerge, escapeRegExp, filterProps, generateID, isJsonString, remToPx, throttle };
 //# sourceMappingURL=helper.esm.js.map

package/dist/esm/src/util/helper.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"helper.esm.js","sources":["../../../../../../src/util/helper.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\ntype KeyValuePair = { [key: string]: unknown };\n\nexport const generateID = (length = 15, stringToWeaveIn?: string) => {\n  /** We will make sure to mesh the generate id and name property together to basically create a unique ID */\n  let hashCharacters = [\n    \"1\",\n    \"2\",\n    \"3\",\n    \"4\",\n    \"5\",\n    \"6\",\n    \"7\",\n    \"8\",\n    \"9\",\n    \"0\",\n    \"A\",\n    \"B\",\n    \"C\",\n    \"D\",\n    \"E\",\n    \"F\",\n    \"G\",\n    \"H\",\n    \"I\",\n    \"J\",\n    \"K\",\n    \"L\",\n    \"M\",\n    \"N\",\n    \"O\",\n    \"P\",\n    \"Q\",\n    \"R\",\n    \"S\",\n    \"T\",\n    \"U\",\n    \"V\",\n    \"W\",\n    \"X\",\n    \"Y\",\n    \"Z\",\n    \"a\",\n    \"b\",\n    \"c\",\n    \"d\",\n    \"e\",\n    \"f\",\n    \"g\",\n    \"h\",\n    \"i\",\n    \"j\",\n    \"k\",\n    \"l\",\n    \"m\",\n    \"n\",\n    \"o\",\n    \"p\",\n    \"q\",\n    \"r\",\n    \"s\",\n    \"t\",\n    \"u\",\n    \"v\",\n    \"w\",\n    \"x\",\n    \"y\",\n    \"z\"\n  ];\n\n  let id = \"\";\n\n  /** Generate an id of x characters in length */\n  for (let i = 0; i < length && id.length < length; i++) {\n    let stringCharacter =\n      typeof stringToWeaveIn === \"string\" &&\n      stringToWeaveIn?.[i] !== undefined &&\n      !/\\s/.test(stringToWeaveIn[i])\n        ? stringToWeaveIn[i]\n        : \"\";\n    id = id + stringCharacter + hashCharacters[Math.floor(Math.random() * hashCharacters.length)];\n  }\n\n  return id.slice(0, length);\n};\n\nexport const filterProps = (props: any, regexPattern: RegExp, returnFiltered: boolean = true) => {\n  if (returnFiltered) {\n    return Object.keys(props).reduce((acc: KeyValuePair, key) => {\n      if (regexPattern.test(key)) {\n        acc[key] = props[key];\n      }\n\n      return acc;\n    }, {});\n  } else {\n    return Object.entries(props)\n      .filter(([key]) => !regexPattern.test(key))\n      .reduce(\n        (prevObj, currKeyValPair) => ({ ...prevObj, [currKeyValPair[0]]: currKeyValPair[1] }),\n        {}\n      );\n  }\n};\n\nexport const debounce = (fn: (...args: unknown[]) => unknown, delay: number) => {\n  let timeout: undefined | ReturnType<typeof setTimeout>;\n\n  return function executedFunction(...args: unknown[]) {\n    const later = () => {\n      clearTimeout(timeout);\n      fn(...args);\n    };\n\n    clearTimeout(timeout);\n\n    timeout = setTimeout(later, delay);\n  };\n};\n\nexport const throttle = (fn: (...args: unknown[]) => unknown, delay: number) => {\n  let lastTime = 0;\n\n  return function () {\n    let now = Date.now();\n\n    if (now - lastTime >= delay) {\n      fn();\n      lastTime = now;\n    }\n  };\n};\n\nexport const isEqual = (x: any, y: any): boolean => {\n  const typesCoincide = x && y && typeof x === \"object\" && typeof y === \"object\";\n  return typesCoincide\n    ? Object.keys(x).length === Object.keys(y).length &&\n        Object.keys(x).every(key => isEqual(x[key], y[key]))\n    : x === y;\n};\n\nexport const areArraysDifferent = (\n  arr1: Record<string, any>[],\n  arr2: Record<string, any>[],\n  key: string\n) => {\n  if (arr1.length !== arr2.length) {\n    return true;\n  } else {\n    const firstFilteredArray = arr1.filter(arr1Item =>\n      arr2.some((arr2Item: { [x: string]: any }) => !isEqual(arr1Item[key], arr2Item[key]))\n    );\n    const secondFilteredArray = arr2.filter(arr2Item =>\n      arr1.some((arr1Item: { [x: string]: any }) => !isEqual(arr1Item[key], arr2Item[key]))\n    );\n\n    return !!firstFilteredArray.length || !!secondFilteredArray.length;\n  }\n};\n\nexport const getValueByPath = (obj: { [key: string]: any }, path: string): any => {\n  return path.split(\".\").reduce((res, prop) => {\n    return res[prop];\n  }, obj);\n};\n\n/** Source: https://stackoverflow.com/a/42769683/5084110 */\nexport const remToPx = (rem: number): number => {\n  return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);\n};\n\nexport const isJsonString = (str: any) => {\n  try {\n    JSON.parse(str);\n  } catch (e) {\n    return false;\n  }\n  return true;\n};\n\ntype ObjectType = { [key: string]: any };\n\nexport const deepMerge = <T extends {}>(obj1: ObjectType, obj2: ObjectType | false): T => {\n  if (!obj2) return obj1 as T;\n\n  let result: ObjectType = { ...obj1 };\n\n  for (let key in obj2) {\n    if (Object.prototype.hasOwnProperty.call(obj2, key)) {\n      if (\n        typeof obj2[key] === \"object\" &&\n        obj2[key] !== null &&\n        Object.prototype.hasOwnProperty.call(obj1, key) &&\n        !Array.isArray(obj2[key])\n      ) {\n        result[key] = deepMerge(obj1[key], obj2[key]);\n      } else {\n        result[key] = obj2[key];\n      }\n    }\n  }\n\n  return result as T;\n};\n\nexport const escapeRegExp = (str: string) => str.replace(/[.*+?^${}()|[\\]\\\\]/g, \"\\\\$&\");\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"helper.esm.js","sources":["../../../../../../src/util/helper.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\ntype KeyValuePair = { [key: string]: unknown };\n\nexport const generateID = (length = 15, stringToWeaveIn?: string) => {\n  /** We will make sure to mesh the generate id and name property together to basically create a unique ID */\n  let hashCharacters = [\n    \"1\",\n    \"2\",\n    \"3\",\n    \"4\",\n    \"5\",\n    \"6\",\n    \"7\",\n    \"8\",\n    \"9\",\n    \"0\",\n    \"A\",\n    \"B\",\n    \"C\",\n    \"D\",\n    \"E\",\n    \"F\",\n    \"G\",\n    \"H\",\n    \"I\",\n    \"J\",\n    \"K\",\n    \"L\",\n    \"M\",\n    \"N\",\n    \"O\",\n    \"P\",\n    \"Q\",\n    \"R\",\n    \"S\",\n    \"T\",\n    \"U\",\n    \"V\",\n    \"W\",\n    \"X\",\n    \"Y\",\n    \"Z\",\n    \"a\",\n    \"b\",\n    \"c\",\n    \"d\",\n    \"e\",\n    \"f\",\n    \"g\",\n    \"h\",\n    \"i\",\n    \"j\",\n    \"k\",\n    \"l\",\n    \"m\",\n    \"n\",\n    \"o\",\n    \"p\",\n    \"q\",\n    \"r\",\n    \"s\",\n    \"t\",\n    \"u\",\n    \"v\",\n    \"w\",\n    \"x\",\n    \"y\",\n    \"z\"\n  ];\n\n  let id = \"\";\n\n  /** Generate an id of x characters in length */\n  for (let i = 0; i < length && id.length < length; i++) {\n    let stringCharacter =\n      typeof stringToWeaveIn === \"string\" &&\n      stringToWeaveIn?.[i] !== undefined &&\n      !/\\s/.test(stringToWeaveIn[i])\n        ? stringToWeaveIn[i]\n        : \"\";\n    id = id + stringCharacter + hashCharacters[Math.floor(Math.random() * hashCharacters.length)];\n  }\n\n  return id.slice(0, length);\n};\n\nexport const filterProps = (props: any, regexPattern: RegExp, returnFiltered: boolean = true) => {\n  if (returnFiltered) {\n    return Object.keys(props).reduce((acc: KeyValuePair, key) => {\n      if (regexPattern.test(key)) {\n        acc[key] = props[key];\n      }\n\n      return acc;\n    }, {});\n  } else {\n    return Object.entries(props)\n      .filter(([key]) => !regexPattern.test(key))\n      .reduce(\n        (prevObj, currKeyValPair) => ({ ...prevObj, [currKeyValPair[0]]: currKeyValPair[1] }),\n        {}\n      );\n  }\n};\n\nexport const debounce = (fn: (...args: unknown[]) => unknown, delay: number) => {\n  let timeout: undefined | ReturnType<typeof setTimeout>;\n\n  return function executedFunction(...args: unknown[]) {\n    const later = () => {\n      clearTimeout(timeout);\n      fn(...args);\n    };\n\n    clearTimeout(timeout);\n\n    timeout = setTimeout(later, delay);\n  };\n};\n\nexport const throttle = (fn: (...args: unknown[]) => unknown, delay: number) => {\n  let lastTime = 0;\n\n  return function () {\n    let now = Date.now();\n\n    if (now - lastTime >= delay) {\n      fn();\n      lastTime = now;\n    }\n  };\n};\n\nexport const isEqual = (x: any, y: any): boolean => {\n  const typesCoincide = x && y && typeof x === \"object\" && typeof y === \"object\";\n  return typesCoincide\n    ? Object.keys(x).length === Object.keys(y).length &&\n        Object.keys(x).every(key => isEqual(x[key], y[key]))\n    : x === y;\n};\n\nexport const areArraysDifferent = (\n  arr1: Record<string, any>[],\n  arr2: Record<string, any>[],\n  key: string\n) => {\n  if (arr1.length !== arr2.length) {\n    return true;\n  } else {\n    const firstFilteredArray = arr1.filter(arr1Item =>\n      arr2.some((arr2Item: { [x: string]: any }) => !isEqual(arr1Item[key], arr2Item[key]))\n    );\n    const secondFilteredArray = arr2.filter(arr2Item =>\n      arr1.some((arr1Item: { [x: string]: any }) => !isEqual(arr1Item[key], arr2Item[key]))\n    );\n\n    return !!firstFilteredArray.length || !!secondFilteredArray.length;\n  }\n};\n\n/** Source: https://stackoverflow.com/a/42769683/5084110 */\nexport const remToPx = (rem: number): number => {\n  return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);\n};\n\nexport const isJsonString = (str: any) => {\n  try {\n    JSON.parse(str);\n  } catch (e) {\n    return false;\n  }\n  return true;\n};\n\ntype ObjectType = { [key: string]: any };\n\nexport const deepMerge = <T extends {}>(obj1: ObjectType, obj2: ObjectType | false): T => {\n  if (!obj2) return obj1 as T;\n\n  let result: ObjectType = { ...obj1 };\n\n  for (let key in obj2) {\n    if (Object.prototype.hasOwnProperty.call(obj2, key)) {\n      if (\n        typeof obj2[key] === \"object\" &&\n        obj2[key] !== null &&\n        Object.prototype.hasOwnProperty.call(obj1, key) &&\n        !Array.isArray(obj2[key])\n      ) {\n        result[key] = deepMerge(obj1[key], obj2[key]);\n      } else {\n        result[key] = obj2[key];\n      }\n    }\n  }\n\n  return result as T;\n};\n\nexport const escapeRegExp = (str: string) => str.replace(/[.*+?^${}()|[\\]\\\\]/g, \"\\\\$&\");\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "homepage": "http://onewelcome.github.io/react-lib-components",
   "name": "@onewelcome/react-lib-components",
-  "version": "8.2.0",
+  "version": "8.4.0",
   "license": "Apache-2.0",
   "author": "OneWelcome B.V.",
   "main": "dist/cjs/src/index.cjs.js",
@@ -46,7 +46,8 @@
   },
   "peerDependencies": {
     "react": ">=16",
-    "react-dom": ">=16"
+    "react-dom": ">=16",
+    "react-day-picker": "^9.1.3"
   },
   "engines": {
     "node": ">=16"
@@ -123,7 +124,7 @@
     "rimraf": "^6.0.1",
     "rollup": "^4.18.0",
     "rollup-plugin-postcss": "^4.0.2",
-    "sass": "^1.77.6",
+    "sass": "1.77.6",
     "sass-loader": "^14.2.1",
     "size-limit": "^11.1.4",
     "storybook": "^8.1.11",

package/src/components/Button/BaseButton.module.scss

@@ -17,13 +17,16 @@
 @use "../../mixins.module.scss";
 
 .button {
-  @include mixins.buttonBase();
   position: relative;
 
   .content-hidden {
     visibility: hidden;
     display: flex;
   }
+
+  & {
+    @include mixins.buttonBase();
+  }
 }
 
 .spinner {

package/src/components/Button/IconButton.module.scss

@@ -32,27 +32,30 @@
 
   /** Sizes **/
   &.button-s {
+    width: 1.875rem;
+    height: 1.875rem;
+
     span {
       font-size: 0.75rem;
     }
-    width: 1.875rem;
-    height: 1.875rem;
   }
 
   &.button-m {
+    width: 2.5rem;
+    height: 2.5rem;
+
     span {
       font-size: 1rem;
     }
-    width: 2.5rem;
-    height: 2.5rem;
   }
 
   &.button-l {
+    width: 3.125rem;
+    height: 3.125rem;
+
     span {
       font-size: 1.375rem;
     }
-    width: 3.125rem;
-    height: 3.125rem;
   }
 
   &.fill {

package/src/components/ContextMenu/ContextMenuItem.module.scss

@@ -36,7 +36,6 @@
       outline: none;
 
       &::after {
-        @include mixins.focusVisibleOutline($outlineOffset: 0, $selectors: null);
         content: "";
         position: absolute;
         top: 0;
@@ -44,6 +43,7 @@
         height: 100%;
         width: 100%;
         z-index: calc(variables.$popover-z-index + 1);
+        @include mixins.focusVisibleOutline($outlineOffset: 0, $selectors: null);
       }
     }
 
@@ -56,6 +56,8 @@
     }
 
     &.active {
+      color: var(--color-primary);
+
       &::before {
         content: "";
         position: absolute;
@@ -66,8 +68,6 @@
         border-bottom-right-radius: 0.125rem;
         border-left: 0.25rem solid var(--color-primary);
       }
-
-      color: var(--color-primary);
     }
   }
 }

package/src/components/DataGrid/DataGridBody/DataGridCell/DataGridCell.module.scss

@@ -17,7 +17,7 @@
 @use "../../../../mixins.module.scss";
 
 .cell {
-  height: 2.75rem;
+  height: 2.625rem;
   padding: 0.25rem 1rem;
 
   &:first-child {
@@ -40,10 +40,11 @@
   }
 
   .loading {
-    @include mixins.skeletonLoading();
     border-radius: 0.5rem;
     height: 1.25rem;
     margin: 0.625rem 0;
+
+    @include mixins.skeletonLoading();
   }
 }
 

package/src/components/DataGrid/DataGridBody/DataGridRow/DataGridRow.module.scss

@@ -13,6 +13,8 @@
  *    See the License for the specific language governing permissions and
  *    limitations under the License.
  */
+@use "../../dataGridMixins.module";
+
 $nesting-limit: 6;
 
 .row {
@@ -23,29 +25,11 @@ $nesting-limit: 6;
     background-color: var(--data-grid-row-hover-background-color);
   }
 
-  @mixin borderAfter($i, $no-offset: false) {
-    content: "";
-    position: absolute;
-
-    @if $no-offset {
-      width: 100%;
-      left: 0;
-    } @else if $i > 0 {
-      width: calc(100% - calc(3.0625rem + $i * 4.125rem));
-      left: calc(3.0625rem + $i * 4.125rem);
-    } @else {
-      width: calc(100% - 3.0625rem);
-      left: 3.0625rem;
-    }
-    bottom: 0;
-    border-bottom: 1px solid var(--light-grey-border);
-  }
-
   @mixin border-x {
     @for $i from 0 through $nesting-limit {
       &.border-#{$i} {
-        &:not(:last-child)::after {
-          @include borderAfter($i);
+        &::after {
+          @include dataGridMixins.borderAfter($i);
         }
       }
     }
@@ -54,14 +38,14 @@ $nesting-limit: 6;
   @include border-x();
 
   &.border {
-    &:not(:last-child)::after {
-      @include borderAfter(0, true);
+    &::after {
+      @include dataGridMixins.borderAfter(0, true);
     }
   }
 
   &.border-drawer {
-    &:not(:last-child):not(:nth-last-child(2))::after {
-      @include borderAfter(0, true);
+    &:not(:nth-last-child(2))::after {
+      @include dataGridMixins.borderAfter(0, true);
     }
   }
 }

package/src/components/DataGrid/DataGridFilters/DataGridFilters.interfaces.ts

@@ -83,3 +83,8 @@ export interface FiltersTranslations {
   tag?: TagTranslations;
   popover?: PopoverTranslations;
 }
+
+export interface KeyValuePair<TKey = string, TValue = string> {
+  key: TKey;
+  value: TValue;
+}

package/src/components/DataGrid/DataGridFilters/DataGridSearchbar.tsx

@@ -15,10 +15,13 @@
  */
 
 import React, { useState, useEffect } from "react";
-import { InputWrapper } from "../../Form/Wrapper/InputWrapper/InputWrapper";
+import {
+  InputWrapper,
+  Props as InputWrapperProps
+} from "../../Form/Wrapper/InputWrapper/InputWrapper";
 import { Icon, Icons } from "../../Icon/Icon";
 import classes from "./DataGridToolbar.module.scss";
-import { InputWrapperProps, useDebouncedCallback } from "../../..";
+import { useDebouncedCallback } from "../../../hooks/useDebouncedCallback";
 
 export interface DataGridSearchbarProps {
   onSearch: (value: string) => void;

package/src/components/DataGrid/DataGridFilters/FilterKeyMapper.ts

@@ -0,0 +1,48 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+import { KeyValuePair } from "./DataGridFilters.interfaces";
+
+export class FilterKeyMapper {
+  columnKvPairs = new Map<string, { key: string; value: string }[]>();
+
+  setColumnKvPairs(columnName: string, kvPairs: { key: string; value: string }[]) {
+    this.columnKvPairs.set(columnName, kvPairs);
+  }
+
+  getValues(columnName: string): string[] {
+    return this.getKvPairs(columnName).map(kv => kv.value);
+  }
+
+  getKeysForValues(columnName: string, values: string[]): string[] {
+    const kvPairs = this.getKvPairs(columnName);
+    return values.map(v => {
+      const kv = kvPairs?.find(kv => kv.value === v);
+      if (kv == undefined) {
+        throw new Error(`Column '${columnName}' in FilterKeyMapper does not contain value '${v}'`);
+      }
+      return kv.key;
+    });
+  }
+
+  getKvPairs(columnName: string): KeyValuePair[] {
+    const kvPairs = this.columnKvPairs.get(columnName);
+    if (kvPairs == undefined) {
+      throw new Error(`Column '${columnName}' not found in ${FilterKeyMapper.name}`);
+    }
+    return kvPairs;
+  }
+}

package/src/components/DataGrid/DataGridHeader/DataGridHeader.module.scss

@@ -13,19 +13,20 @@
  *    See the License for the specific language governing permissions and
  *    limitations under the License.
  */
+@use "../dataGridMixins.module";
 
 .row {
-  height: 2.5rem;
+  height: 3.25rem;
+  background-color: var(--color-blue-grey25);
+  position: relative;
+  border-top: 2px solid var(--light-grey-border);
+
+  &::after {
+    @include dataGridMixins.borderAfter(0, true);
+  }
 }
 
 .context-menu {
   width: 4.125rem;
   box-sizing: border-box;
 }
-
-@media only screen and (min-width: 50em) {
-  .thead::after {
-    width: calc(100% - 2.5rem);
-    left: 1.25rem;
-  }
-}