@onewelcome/react-lib-components 7.0.0 → 8.0.0

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

@@ -1,2 +1,156 @@
-const t=(t=15,e)=>{let r=["1","2","3","4","5","6","7","8","9","0","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"];let o="";for(let n=0;n<t&&o.length<t;n++){let t=typeof e==="string"&&(e===null||e===void 0?void 0:e[n])!==void 0&&!/\s/.test(e[n])?e[n]:"";o=o+t+r[Math.floor(Math.random()*r.length)]}return o.slice(0,t)};const e=(t,e,r=true)=>{if(r)return Object.keys(t).reduce(((r,o)=>{if(e.test(o))r[o]=t[o];return r}),{});else return Object.entries(t).filter((([t])=>!e.test(t))).reduce(((t,e)=>({...t,[e[0]]:e[1]})),{})};const r=(t,e)=>{let r;return function o(...n){const l=()=>{clearTimeout(r);t(...n)};clearTimeout(r);r=setTimeout(l,e)}};const o=(t,e)=>{let r=0;return function(){let o=Date.now();if(o-r>=e){t();r=o}}};const n=t=>t*parseFloat(getComputedStyle(document.documentElement).fontSize);const l=(t,e)=>{if(!e)return t;let r={...t};for(let o in e)if(Object.prototype.hasOwnProperty.call(e,o))if(typeof e[o]==="object"&&e[o]!==null&&Object.prototype.hasOwnProperty.call(t,o)&&!Array.isArray(e[o]))r[o]=l(t[o],e[o]);else r[o]=e[o];return r};const c=t=>t.replace(/[.*+?^${}()|[\]\\]/g,"\\$&");export{r as debounce,l as deepMerge,c as escapeRegExp,e as filterProps,t as generateID,n as remToPx,o as throttle};
+/*
+ * 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 generateID = (length = 15, stringToWeaveIn) => {
+    /** We will make sure to mesh the generate id and name property together to basically create a unique ID */
+    let hashCharacters = [
+        "1",
+        "2",
+        "3",
+        "4",
+        "5",
+        "6",
+        "7",
+        "8",
+        "9",
+        "0",
+        "A",
+        "B",
+        "C",
+        "D",
+        "E",
+        "F",
+        "G",
+        "H",
+        "I",
+        "J",
+        "K",
+        "L",
+        "M",
+        "N",
+        "O",
+        "P",
+        "Q",
+        "R",
+        "S",
+        "T",
+        "U",
+        "V",
+        "W",
+        "X",
+        "Y",
+        "Z",
+        "a",
+        "b",
+        "c",
+        "d",
+        "e",
+        "f",
+        "g",
+        "h",
+        "i",
+        "j",
+        "k",
+        "l",
+        "m",
+        "n",
+        "o",
+        "p",
+        "q",
+        "r",
+        "s",
+        "t",
+        "u",
+        "v",
+        "w",
+        "x",
+        "y",
+        "z"
+    ];
+    let id = "";
+    /** Generate an id of x characters in length */
+    for (let i = 0; i < length && id.length < length; i++) {
+        let stringCharacter = typeof stringToWeaveIn === "string" &&
+            (stringToWeaveIn === null || stringToWeaveIn === void 0 ? void 0 : stringToWeaveIn[i]) !== undefined &&
+            !/\s/.test(stringToWeaveIn[i])
+            ? stringToWeaveIn[i]
+            : "";
+        id = id + stringCharacter + hashCharacters[Math.floor(Math.random() * hashCharacters.length)];
+    }
+    return id.slice(0, length);
+};
+const filterProps = (props, regexPattern, returnFiltered = true) => {
+    if (returnFiltered) {
+        return Object.keys(props).reduce((acc, key) => {
+            if (regexPattern.test(key)) {
+                acc[key] = props[key];
+            }
+            return acc;
+        }, {});
+    }
+    else {
+        return Object.entries(props)
+            .filter(([key]) => !regexPattern.test(key))
+            .reduce((prevObj, currKeyValPair) => ({ ...prevObj, [currKeyValPair[0]]: currKeyValPair[1] }), {});
+    }
+};
+const debounce = (fn, delay) => {
+    let timeout;
+    return function executedFunction(...args) {
+        const later = () => {
+            clearTimeout(timeout);
+            fn(...args);
+        };
+        clearTimeout(timeout);
+        timeout = setTimeout(later, delay);
+    };
+};
+const throttle = (fn, delay) => {
+    let lastTime = 0;
+    return function () {
+        let now = Date.now();
+        if (now - lastTime >= delay) {
+            fn();
+            lastTime = now;
+        }
+    };
+};
+/** Source: https://stackoverflow.com/a/42769683/5084110 */
+const remToPx = (rem) => {
+    return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
+};
+const deepMerge = (obj1, obj2) => {
+    if (!obj2)
+        return obj1;
+    let result = { ...obj1 };
+    for (let key in obj2) {
+        if (Object.prototype.hasOwnProperty.call(obj2, key)) {
+            if (typeof obj2[key] === "object" &&
+                obj2[key] !== null &&
+                Object.prototype.hasOwnProperty.call(obj1, key) &&
+                !Array.isArray(obj2[key])) {
+                result[key] = deepMerge(obj1[key], obj2[key]);
+            }
+            else {
+                result[key] = obj2[key];
+            }
+        }
+    }
+    return result;
+};
+const escapeRegExp = (str) => str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+
+export { debounce, deepMerge, escapeRegExp, filterProps, generateID, 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":["generateID","length","stringToWeaveIn","hashCharacters","id","i","stringCharacter","undefined","test","Math","floor","random","slice","filterProps","props","regexPattern","returnFiltered","Object","keys","reduce","acc","key","entries","filter","prevObj","currKeyValPair","debounce","fn","delay","timeout","executedFunction","args","later","clearTimeout","setTimeout","throttle","lastTime","now","Date","remToPx","rem","parseFloat","getComputedStyle","document","documentElement","fontSize","deepMerge","obj1","obj2","result","prototype","hasOwnProperty","call","Array","isArray","escapeRegExp","str","replace"],"mappings":"AAkBa,MAAAA,EAAa,CAACC,EAAS,GAAIC,KAEtC,IAAIC,EAAiB,CACnB,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,KAGF,IAAIC,EAAK,GAGT,IAAK,IAAIC,EAAI,EAAGA,EAAIJ,GAAUG,EAAGH,OAASA,EAAQI,IAAK,CACrD,IAAIC,SACKJ,IAAoB,WAC3BA,UAAAA,SAAe,OAAA,EAAfA,EAAkBG,WAAOE,IACxB,KAAKC,KAAKN,EAAgBG,IACvBH,EAAgBG,GAChB,GACND,EAAKA,EAAKE,EAAkBH,EAAeM,KAAKC,MAAMD,KAAKE,SAAWR,EAAeF,QACtF,CAED,OAAOG,EAAGQ,MAAM,EAAGX,EAAO,EAGrB,MAAMY,EAAc,CAACC,EAAYC,EAAsBC,EAA0B,QACtF,GAAIA,EACF,OAAOC,OAAOC,KAAKJ,GAAOK,QAAO,CAACC,EAAmBC,KACnD,GAAIN,EAAaP,KAAKa,GACpBD,EAAIC,GAAOP,EAAMO,GAGnB,OAAOD,CAAG,GACT,CAAE,QAEL,OAAOH,OAAOK,QAAQR,GACnBS,QAAO,EAAEF,MAAUN,EAAaP,KAAKa,KACrCF,QACC,CAACK,EAASC,KAAc,IAAWD,EAAS,CAACC,EAAe,IAAKA,EAAe,MAChF,CAAE,EAEP,QAGUC,EAAW,CAACC,EAAqCC,KAC5D,IAAIC,EAEJ,OAAO,SAASC,KAAoBC,GAClC,MAAMC,EAAQ,KACZC,aAAaJ,GACbF,KAAMI,EAAK,EAGbE,aAAaJ,GAEbA,EAAUK,WAAWF,EAAOJ,EAC9B,CAAC,QAGUO,EAAW,CAACR,EAAqCC,KAC5D,IAAIQ,EAAW,EAEf,OAAO,WACL,IAAIC,EAAMC,KAAKD,MAEf,GAAIA,EAAMD,GAAYR,EAAO,CAC3BD,IACAS,EAAWC,CACZ,CACH,CAAC,EAqCU,MAAAE,EAAWC,GACfA,EAAMC,WAAWC,iBAAiBC,SAASC,iBAAiBC,gBAcxDC,EAAY,CAAeC,EAAkBC,KACxD,IAAKA,EAAM,OAAOD,EAElB,IAAIE,EAAqB,IAAKF,GAE9B,IAAK,IAAI1B,KAAO2B,EACd,GAAI/B,OAAOiC,UAAUC,eAAeC,KAAKJ,EAAM3B,GAC7C,UACS2B,EAAK3B,KAAS,UACrB2B,EAAK3B,KAAS,MACdJ,OAAOiC,UAAUC,eAAeC,KAAKL,EAAM1B,KAC1CgC,MAAMC,QAAQN,EAAK3B,IAEpB4B,EAAO5B,GAAOyB,EAAUC,EAAK1B,GAAM2B,EAAK3B,SAExC4B,EAAO5B,GAAO2B,EAAK3B,GAKzB,OAAO4B,CAAW,EAGP,MAAAM,EAAgBC,GAAgBA,EAAIC,QAAQ,sBAAuB"}
+{"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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"}

package/dist/lib/style-inject.js

@@ -10,8 +10,6 @@ function getDefaultExportFromCjs (x) {
 
 var styleInject$1 = {exports: {}};
 
-styleInject$1.exports;
-
 (function (module, exports) {
 	(function (global, factory) {
 		module.exports = factory() ;
@@ -46,10 +44,10 @@ styleInject$1.exports;
 	return styleInject;
 
 	}))); 
-} (styleInject$1, styleInject$1.exports));
+} (styleInject$1));
 
 var styleInjectExports = styleInject$1.exports;
 var styleInject = /*@__PURE__*/getDefaultExportFromCjs(styleInjectExports);
 
-exports["default"] = styleInject;
+exports.default = styleInject;
 //# sourceMappingURL=style-inject.js.map

package/dist/lib/style-inject.js.map

@@ -1 +1 @@
-{"version":3,"file":"style-inject.js","sources":["../../node_modules/style-inject/dist/style-inject.js"],"sourcesContent":["(function (global, factory) {\n\ttypeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :\n\ttypeof define === 'function' && define.amd ? define(factory) :\n\t(global.styleInject = factory());\n}(this, (function () { 'use strict';\n\nfunction styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nreturn styleInject;\n\n})));\n"],"names":["this"],"mappings":";;;;;;;;;;;;;;;AAAA,CAAA,CAAC,UAAU,MAAM,EAAE,OAAO,EAAE;EACoC,MAAiB,CAAA,OAAA,GAAA,OAAO,EAAE,CAEzD,CAAC;AAClC,EAAC,CAACA,cAAI,GAAG,YAAY,CACrB;AACA,CAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;GAC7B,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,GAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;GACE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,GAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;GACrE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,GAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,GAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,KAAI,IAAI,IAAI,CAAC,UAAU,EAAE;OACnB,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,MAAK,MAAM;AACX,OAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;MACzB;AACL,IAAG,MAAM;AACT,KAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IACzB;AACH;AACA,GAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,KAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,IAAG,MAAM;KACL,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;IACjD;EACF;AACD;AACA,CAAA,OAAO,WAAW,CAAC;AACnB;AACA,EAAC,EAAE,EAAA;;;;;;;;"}
+{"version":3,"file":"style-inject.js","sources":["../../node_modules/style-inject/dist/style-inject.js"],"sourcesContent":["(function (global, factory) {\n\ttypeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :\n\ttypeof define === 'function' && define.amd ? define(factory) :\n\t(global.styleInject = factory());\n}(this, (function () { 'use strict';\n\nfunction styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nreturn styleInject;\n\n})));\n"],"names":["this"],"mappings":";;;;;;;;;;;;;AAAA,CAAA,CAAC,UAAU,MAAM,EAAE,OAAO,EAAE;EACoC,MAAiB,CAAA,OAAA,GAAA,OAAO,EAAE,CAEzD,CAAC;AAClC,EAAC,CAACA,cAAI,GAAG,YAAY,CACrB;AACA,CAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;GAC7B,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,GAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;GACE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,GAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;GACrE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,GAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,GAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,KAAI,IAAI,IAAI,CAAC,UAAU,EAAE;OACnB,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,MAAK,MAAM;AACX,OAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;MACzB;AACL,IAAG,MAAM;AACT,KAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IACzB;AACH;AACA,GAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,KAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,IAAG,MAAM;KACL,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;IACjD;EACF;AACD;AACA,CAAA,OAAO,WAAW,CAAC;AACnB;AACA,EAAC,EAAE,EAAA;;;;;;;;","x_google_ignoreList":[0]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "homepage": "http://onewelcome.github.io/react-lib-components",
   "name": "@onewelcome/react-lib-components",
-  "version": "7.0.0",
+  "version": "8.0.0",
   "license": "Apache-2.0",
   "author": "OneWelcome B.V.",
   "main": "dist/cjs/src/index.cjs.js",
@@ -31,14 +31,14 @@
   },
   "scripts": {
     "analyze": "size-limit --why",
-    "build": "rm -rf dist && rollup -c",
+    "build": "rm -rf dist && rollup -c --bundleConfigAsCjs",
     "build-storybook": "storybook build",
     "chromatic": "chromatic --exit-zero-on-changes",
     "dev": "npm-run-all -p start test:watch storybook",
     "lint": "eslint '**/*.{ts,tsx}'",
-    "prepare": "husky install && rollup -c",
+    "prepare": "husky install && rollup -c --bundleConfigAsCjs",
     "size": "size-limit",
-    "start": "rollup -c -w",
+    "start": "rollup -c -w --bundleConfigAsCjs",
     "test": "jest",
     "test:watch": "npm test -- --watch",
     "prettier": "prettier --write --ignore-path .gitignore \"**/*.+(ts|tsx|scss|mdx)\"",
@@ -60,8 +60,9 @@
     "@mdx-js/react": "^3.0.1",
     "@onewelcome/eslint-config-shared-codestyle": "^9.2.3",
     "@onewelcome/storybook-addon-basestyling": "^2.0.0",
-    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.6",
     "@storybook/addon-a11y": "^8.1.11",
     "@storybook/addon-actions": "^8.1.11",
@@ -76,9 +77,9 @@
     "@storybook/react": "^8.1.11",
     "@storybook/react-webpack5": "^8.1.11",
     "@storybook/theming": "^8.1.11",
-    "@testing-library/dom": "^10.2.0",
+    "@testing-library/dom": "^10.3.0",
     "@testing-library/jest-dom": "^6.4.6",
-    "@testing-library/react": "^15.0.7",
+    "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.12",
     "@types/mdx": "^2.0.13",
@@ -86,16 +87,16 @@
     "@types/react-dom": "^18.3.0",
     "@types/react-router": "^5.1.20",
     "@types/react-router-dom": "^5.3.3",
-    "@typescript-eslint/eslint-plugin": "^7.14.1",
-    "@typescript-eslint/parser": "^7.14.1",
+    "@typescript-eslint/eslint-plugin": "^7.15.0",
+    "@typescript-eslint/parser": "^7.15.0",
     "babel-loader": "^9.1.3",
     "chromatic": "^11.5.4",
-    "css-loader": "^6.10.0",
+    "css-loader": "^7.1.2",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-cypress": "^2.15.1",
+    "eslint-plugin-cypress": "^3.3.0",
     "eslint-plugin-export-scope": "^2.4.0",
-    "eslint-plugin-jest": "^27.9.0",
+    "eslint-plugin-jest": "^28.6.0",
     "eslint-plugin-license-header": "^0.6.1",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.34.3",
@@ -110,18 +111,17 @@
     "lint-staged": "^15.2.7",
     "mini-css-extract-plugin": "^2.9.0",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.38",
+    "postcss": "^8.4.39",
     "postcss-modules": "^6.0.0",
     "postcss-url": "^10.1.3",
     "prettier": "^3.3.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-is": "^18.3.1",
-    "react-router-dom": "^6.24.0",
+    "react-router-dom": "^6.24.1",
     "remark-gfm": "^4.0.0",
-    "rollup": "^2.79.1",
+    "rollup": "^4.18.0",
     "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-terser": "^7.0.2",
     "sass": "^1.77.6",
     "sass-loader": "^14.2.1",
     "size-limit": "^11.1.4",
@@ -131,6 +131,6 @@
     "style-loader": "^4.0.0",
     "ts-jest": "^29.1.5",
     "tslib": "^2.6.3",
-    "typescript": "^5.5.2"
+    "typescript": "^5.5.3"
   }
 }

package/src/components/DataGrid/DataGrid.tsx

@@ -24,6 +24,8 @@ import { HeaderCell, OnSortFunction, Sort } from "./datagrid.interfaces";
 import { Pagination, Props as PaginationProps } from "../Pagination/Pagination";
 import { Spacing, useSpacing } from "../../hooks/useSpacing";
 import { DataGridToolbar, DataGridToolbarProps } from "./DataGridFilters/DataGridToolbar";
+import { DataGridToolbarWrapper } from "./DataGridFilters/DataGridToolbarWrapper";
+import { DataGridSearchbar, DataGridSearchbarProps } from "./DataGridFilters/DataGridSearchbar";
 
 export interface Props<T> extends Omit<ComponentPropsWithRef<"div">, "children"> {
   children: ({ item, index }: { item: T; index: number }) => ReactElement;
@@ -44,10 +46,8 @@ export interface Props<T> extends Omit<ComponentPropsWithRef<"div">, "children">
   paginationProps?: PaginationProps;
   disableContextMenuColumn?: boolean;
   enableExpandableRow?: boolean;
-  filters?: {
-    enable: boolean;
-    filtersProps: DataGridToolbarProps;
-  };
+  filters?: DataGridToolbarProps;
+  search?: DataGridSearchbarProps;
   isLoading?: boolean;
   enableMultiSorting?: boolean;
   spacing?: Spacing;
@@ -65,6 +65,7 @@ const DataGridInner = <T extends {}>(
     disableContextMenuColumn,
     enableExpandableRow,
     filters,
+    search,
     isLoading,
     enableMultiSorting,
     emptyLabel,
@@ -132,8 +133,11 @@ const DataGridInner = <T extends {}>(
         paddingBottom: styleWithSpacing?.paddingBottom
       }}
     >
-      {filters?.enable ? (
-        <DataGridToolbar {...filters.filtersProps} />
+      {filters || search ? (
+        <DataGridToolbarWrapper>
+          {search && <DataGridSearchbar {...search} />}
+          {filters && <DataGridToolbar {...filters} />}
+        </DataGridToolbarWrapper>
       ) : (
         <DataGridActions
           {...actions}
@@ -164,6 +168,7 @@ const DataGridInner = <T extends {}>(
             disableContextMenuColumn={disableContextMenuColumn}
             emptyLabel={emptyLabel}
             spacing={styleWithSpacing}
+            searchValue={search?.initialSearchValue}
           >
             {children}
           </DataGridBody>

package/src/components/DataGrid/DataGridBody/DataGridBody.tsx

@@ -27,6 +27,7 @@ export interface Props<T> extends Omit<ComponentPropsWithRef<"tbody">, "children
   headers: HeaderCell[];
   isLoading?: boolean;
   disableContextMenuColumn?: boolean;
+  searchValue?: string;
   emptyLabel?: string;
   spacing?: React.CSSProperties;
 }
@@ -42,6 +43,7 @@ const DataGridBodyInner = <T extends {}>(
     disableContextMenuColumn,
     emptyLabel,
     spacing,
+    searchValue,
     ...rest
   }: Props<T>,
   ref: Ref<HTMLTableSectionElement>
@@ -77,6 +79,7 @@ const DataGridBodyInner = <T extends {}>(
 
     return data?.map((item, index) => {
       return React.cloneElement(children({ item, index }), {
+        searchValue: searchValue,
         headers,
         spacing,
         disableContextMenuColumn

package/src/components/DataGrid/DataGridBody/DataGridCell/DataGridCell.tsx

@@ -14,7 +14,12 @@
  *    limitations under the License.
  */
 
-import React, { ForwardRefRenderFunction, ComponentPropsWithRef, ReactElement } from "react";
+import React, {
+  ForwardRefRenderFunction,
+  ComponentPropsWithRef,
+  ReactElement,
+  Fragment
+} from "react";
 import { Typography } from "../../../Typography/Typography";
 import classes from "./DataGridCell.module.scss";
 
@@ -22,6 +27,7 @@ export interface Props extends ComponentPropsWithRef<"td"> {
   children?: ReactElement | string | number;
   isLoading?: boolean;
   spacing?: React.CSSProperties;
+  searchValue?: string;
   cellIndex?: number;
   columnLength?: number;
   disableContextMenuColumn?: boolean;
@@ -33,6 +39,7 @@ const DataGridCellComponent: ForwardRefRenderFunction<HTMLTableCellElement, Prop
     className,
     isLoading,
     spacing,
+    searchValue,
     cellIndex,
     columnLength,
     disableContextMenuColumn,
@@ -52,6 +59,31 @@ const DataGridCellComponent: ForwardRefRenderFunction<HTMLTableCellElement, Prop
     cellStyle.paddingRight = spacing?.paddingRight;
   }
 
+  //NOTE: we might want to migrate to Highlight API once it's supported by Firefox
+  const renderContent = () => {
+    if (typeof children === "string" && searchValue) {
+      if (!children.toLowerCase().includes(searchValue.toLowerCase())) {
+        return children;
+      }
+
+      const matchingSequence = new RegExp(searchValue, "i").exec(children);
+
+      const parts = children.split(matchingSequence?.[0] ?? "");
+      return parts.map((part, i) => {
+        if (i === parts.length - 1) return <Fragment key={`${part}-${i}`}>{part}</Fragment>;
+
+        return (
+          <Fragment key={`${part}-${i}`}>
+            {part}
+            <mark data-testid={`${matchingSequence}-mark`}>{matchingSequence}</mark>
+          </Fragment>
+        );
+      });
+    }
+
+    return children;
+  };
+
   return (
     <td
       {...rest}
@@ -62,7 +94,7 @@ const DataGridCellComponent: ForwardRefRenderFunction<HTMLTableCellElement, Prop
       {isLoading && <div className={classes["loading"]} aria-busy="true" aria-live="polite"></div>}
       {!isLoading && (
         <Typography className={classes["text"]} variant="body" tag="span">
-          {children}
+          {renderContent()}
         </Typography>
       )}
     </td>

package/src/components/DataGrid/DataGridBody/DataGridRow/DataGridRow.tsx

@@ -27,6 +27,7 @@ export interface Props extends ComponentPropsWithRef<"tr"> {
   headers?: HeaderCell[];
   isLoading?: boolean;
   spacing?: React.CSSProperties;
+  searchValue?: string;
   disableContextMenuColumn?: boolean;
   expandableRowProps?: {
     enableExpandableRow: boolean;
@@ -42,6 +43,7 @@ const DataGridRowComponent: ForwardRefRenderFunction<HTMLTableRowElement, Props>
     children,
     className,
     headers,
+    searchValue,
     isLoading,
     spacing,
     expandableRowProps,
@@ -61,6 +63,7 @@ const DataGridRowComponent: ForwardRefRenderFunction<HTMLTableRowElement, Props>
   const visibleCells = React.Children.map(children as React.ReactElement[], (child, index) => {
     if (child) {
       const cellWithSpacing = React.cloneElement(child, {
+        searchValue,
         spacing: spacing,
         cellIndex: index,
         columnLength: headers?.length,

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

@@ -0,0 +1,68 @@
+/*
+ * 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 React, { useState, useEffect } from "react";
+import { InputWrapper } from "../../Form/Wrapper/InputWrapper/InputWrapper";
+import { Icon, Icons } from "../../Icon/Icon";
+import classes from "./DataGridToolbar.module.scss";
+import { InputWrapperProps, useDebouncedCallback } from "../../..";
+
+export interface DataGridSearchbarProps {
+  onSearch: (value: string) => void;
+  initialSearchValue?: string;
+  debounceTime?: number;
+  placeholder?: string;
+  inputWrapperProps?: InputWrapperProps;
+}
+
+export const DataGridSearchbar = ({
+  onSearch,
+  initialSearchValue,
+  debounceTime,
+  inputWrapperProps,
+  placeholder
+}: DataGridSearchbarProps) => {
+  const [search, setSearch] = useState(initialSearchValue ?? "");
+  const debouncedCallback = useDebouncedCallback(onSearch, debounceTime ?? 500);
+  const onSearchCallback = debounceTime ? debouncedCallback : onSearch;
+
+  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    onSearchCallback(event.target.value);
+    setSearch(event.target.value);
+  };
+
+  useEffect(() => {
+    initialSearchValue && setSearch(initialSearchValue);
+  }, [initialSearchValue]);
+
+  return (
+    <InputWrapper
+      {...inputWrapperProps}
+      className={`${classes["searchbar"]} ${inputWrapperProps?.className ?? ""}`}
+      label={inputWrapperProps?.label ?? ""}
+      onChange={onChange}
+      type="search"
+      name={inputWrapperProps?.name ?? "searchbar"}
+      value={search}
+      inputProps={{
+        ...inputWrapperProps?.inputProps,
+        type: "search",
+        prefix: <Icon icon={Icons.Search} />,
+        placeholder: placeholder ?? "Search items"
+      }}
+    ></InputWrapper>
+  );
+};

package/src/components/DataGrid/DataGridFilters/DataGridToolbar.module.scss

@@ -16,7 +16,7 @@
 
 @use "../../../mixins.module.scss";
 
-.toolbar {
+.wrapper {
   display: flex;
   align-items: center;
   justify-content: flex-start;
@@ -25,6 +25,11 @@
   width: 100%;
   padding-bottom: 1rem;
 
+  .searchbar {
+    min-width: 7rem;
+    flex-basis: 15rem;
+  }
+
   .actions-wrapper {
     display: flex;
     align-items: center;