@onewelcome/react-lib-components 6.5.0 → 6.6.0

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

@@ -1,2 +1,2 @@
-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};export{r as debounce,l as deepMerge,e as filterProps,t as generateID,n as remToPx,o as throttle};
+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};
 //# 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"],"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"],"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"}
+{"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "homepage": "http://onewelcome.github.io/react-lib-components",
   "name": "@onewelcome/react-lib-components",
-  "version": "6.5.0",
+  "version": "6.6.0",
   "license": "Apache-2.0",
   "author": "OneWelcome B.V.",
   "main": "dist/cjs/src/index.cjs.js",
@@ -82,14 +82,14 @@
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.12",
     "@types/mdx": "^2.0.12",
-    "@types/react": "^18.2.72",
-    "@types/react-dom": "^18.2.22",
+    "@types/react": "^18.2.73",
+    "@types/react-dom": "^18.2.23",
     "@types/react-router": "^5.1.20",
     "@types/react-router-dom": "^5.3.3",
-    "@typescript-eslint/eslint-plugin": "^6.21.0",
-    "@typescript-eslint/parser": "^6.21.0",
+    "@typescript-eslint/eslint-plugin": "^7.5.0",
+    "@typescript-eslint/parser": "^7.5.0",
     "babel-loader": "^9.1.3",
-    "chromatic": "^10.9.6",
+    "chromatic": "^11.2.0",
     "css-loader": "^6.10.0",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",

package/src/components/Form/Select/MultiSelect/MultiOption.tsx

@@ -14,18 +14,51 @@
  *    limitations under the License.
  */
 
-import React, { ForwardRefRenderFunction } from "react";
+import React, { ForwardRefRenderFunction, RefObject, createRef, useEffect } from "react";
 import { Props as SelectOptionProps, Option as SelectOption } from "../SingleSelect/Option";
 
+import classes from "./MultiSelect.module.scss";
+
 export interface Props extends SelectOptionProps {
   fixed?: boolean;
 }
 
 const MultiOptionComponent: ForwardRefRenderFunction<HTMLLIElement, Props> = (
-  { fixed: _fixed, ...rest }: Props,
+  { fixed: _fixed, hasFocus, className, ...rest }: Props,
   ref
 ) => {
-  return <SelectOption ref={ref} {...rest} />;
+  let innerOptionRef = (ref as RefObject<HTMLLIElement>) || createRef<HTMLLIElement>();
+
+  const additionalClasses = [];
+  className && additionalClasses.push(className);
+  hasFocus && additionalClasses.push(classes["focus"]);
+
+  const scrollToSelectedElement = (element: HTMLLIElement) => {
+    const listbox = element.parentElement;
+    const listboxWrapper = element.parentElement?.parentElement;
+    const isListboxWrapperScrollable = !!listboxWrapper?.style.maxHeight;
+    if (isListboxWrapperScrollable) {
+      listboxWrapper?.scrollTo(0, element.offsetTop - (listboxWrapper?.offsetHeight ?? 1) / 2);
+    }
+    listbox?.scrollTo(0, element.offsetTop - (listbox?.offsetHeight ?? 1) / 2);
+  };
+
+  useEffect(() => {
+    if (innerOptionRef.current && hasFocus) {
+      scrollToSelectedElement(innerOptionRef.current);
+    }
+  }, [hasFocus, innerOptionRef]);
+
+  return (
+    <SelectOption
+      ref={innerOptionRef}
+      isSelected={hasFocus}
+      disableDefaultSelectedStyle
+      className={additionalClasses.join(" ")}
+      aria-disabled={false}
+      {...rest}
+    />
+  );
 };
 
 export const MultiOption = React.forwardRef(MultiOptionComponent);

package/src/components/Form/Select/MultiSelect/MultiSelect.module.scss

@@ -90,6 +90,7 @@ $listItemHeight: 2.5rem;
       display: flex;
       align-items: center;
       padding: 0.1875rem 0;
+      gap: 0.375rem;
     }
   }
 
@@ -143,9 +144,21 @@ $listItemHeight: 2.5rem;
         opacity: 0.05;
       }
 
-      &:focus {
-        outline: var(--input-border-width-focus) solid var(--color-primary300);
-        outline-offset: -var(--input-border-width-focus);
+      &:focus,
+      &.focus {
+        outline: none;
+
+        &::before {
+          @include mixins.focusVisibleOutline($outlineOffset: 0, $selectors: null);
+          content: "";
+          position: absolute;
+          top: 0;
+          left: 0.125rem;
+          height: 100%;
+          width: calc(100% - 0.25rem);
+          opacity: 1;
+          z-index: calc(variables.$popover-z-index + 1);
+        }
       }
 
       &:hover:after,
@@ -166,20 +179,6 @@ $listItemHeight: 2.5rem;
   }
 }
 
-.selected-option {
-  &:before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
-    border-top-right-radius: 0.125rem;
-    border-bottom-right-radius: 0.125rem;
-    border-left: 0.25rem solid var(--color-primary);
-  }
-  color: var(--color-primary);
-}
-
 .status {
   padding: 0.3125rem;
   display: flex;
@@ -210,11 +209,22 @@ $listItemHeight: 2.5rem;
 }
 
 .select-search {
-  position: relative;
-  width: 100%;
+  flex: 1;
   box-sizing: border-box;
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
+  border: 0;
+  background-color: transparent;
+  color: var(--default);
+  font-family: var(--font-family);
+  line-height: 1.3333;
+  margin: 0;
+  padding: 0;
+
+  &:focus-visible,
+  &:focus {
+    outline: none;
+  }
 }
 
 .disabled {

package/src/components/Form/Select/MultiSelect/MultiSelect.tsx

@@ -17,28 +17,35 @@
 import classes from "./MultiSelect.module.scss";
 
 import React, {
-  createRef,
   ForwardRefRenderFunction,
   Fragment,
   ReactElement,
+  createRef,
   useEffect,
   useRef,
   useState
 } from "react";
-import { Icon, Icons } from "../../../Icon/Icon";
 import { useBodyClick } from "../../../../hooks/useBodyClick";
-import readyclasses from "../../../../readyclasses.module.scss";
-import { filterProps } from "../../../../util/helper";
-import { useArrowNavigation, useSelectPositionList } from "../SelectService";
 import { useDetermineStatusIcon } from "../../../../hooks/useDetermineStatusIcon";
-import { SelectedOptions, Display } from "./SelectedOptions";
-import { SelectButton } from "./SelectButton";
+import readyclasses from "../../../../readyclasses.module.scss";
+import { escapeRegExp, filterProps, generateID } from "../../../../util/helper";
+import { Icon, Icons } from "../../../Icon/Icon";
 import { MultiSelectProps } from "../Select.interfaces";
-import { useSearch } from "../useSearch";
 import { useAddNewBtn } from "../useAddNewBtn";
+import { useSelectPositionList } from "../useSelectPositionList";
+import { SelectButton } from "./SelectButton";
+import { Display, SelectedOptions } from "./SelectedOptions";
+import { useArrowNavigation } from "./useArrowNavigation";
+import { useSearch } from "./useSearch";
+
+const getOptionId = (multiSelectId: string, optionIndex: number) =>
+  `${multiSelectId}_option${optionIndex}`;
+
+const getListboxId = (multiSelectId: string) => `${multiSelectId}_listbox`;
 
 const MultiSelectComponent: ForwardRefRenderFunction<HTMLSelectElement, MultiSelectProps> = (
   {
+    id,
     children,
     name,
     disabled = false,
@@ -56,42 +63,51 @@ const MultiSelectComponent: ForwardRefRenderFunction<HTMLSelectElement, MultiSel
     noResultsLabel = "No results found",
     onChange,
     addNew,
-    search,
+    search = { enabled: true, renderThreshold: 0 },
     ...rest
   }: MultiSelectProps,
   ref
 ) => {
+  const multiSelectId = useRef(id ?? generateID(20));
   const [expanded, setExpanded] = useState(false);
-  const [display, setDisplay] = useState<Record<string, Display>>({});
+  const [display, setDisplay] = useState<Display[]>([]);
   const containerReference = useRef<HTMLDivElement>(null);
   const optionListReference = useRef<HTMLDivElement>(null);
-  const [focusedSelectItem, setFocusedSelectItem] = useState(-1);
+  const [focusedSelectItem, setFocusedSelectItem] = useState(0);
   const [shouldClick, setShouldClick] =
     useState(
       false
     ); /** We need this, because whenever we use the arrow keys to select the select item, and we focus the currently selected item it fires the "click" listener in Option component. Instead, we only want this to fire if we press "enter" or "spacebar" so we set this to true whenever that is the case, and back to false when it has been executed. */
   const [shouldFocusButtonAfterClose, setShouldFocusButtonAfterClose] = useState(false);
-  const optionsVisibleCount = React.Children.count(children) - Object.keys(display).length;
-  const {
-    filter,
-    isSearching,
-    renderSearch,
-    searchInputRef,
-    setIsSearching,
-    searchThreshold,
-    searchVisible
-  } = useSearch({
+  const [optionsVisibleCount, setOptionsVisibleCount] = useState(
+    React.Children.count(children) - display.length
+  );
+  const { filter, renderSearch, searchInputRef, resetSearchState, searchVisible } = useSearch({
+    selectId: multiSelectId.current,
     expanded,
     search,
     searchInputClassName: classes["select-search"],
     optionsCount: optionsVisibleCount,
+    focusedSelectItem,
     setFocusedSelectItem,
     searchInputProps,
-    searchPlaceholder
+    searchPlaceholder,
+    describedBy,
+    getOptionId,
+    getListboxId
   });
   const { addBtnRef, addNewBtnOptionsContainerClassName, renderAddNew } = useAddNewBtn({
+    id: getOptionId(multiSelectId.current, optionsVisibleCount),
     addNew,
-    filter
+    filter,
+    focusedSelectItem,
+    optionsCount: optionsVisibleCount,
+    searchInputRef,
+    shouldClick,
+    onClickCallback: () => {
+      setShouldClick(false);
+      resetSearchState();
+    }
   });
 
   const nativeSelect = (ref as React.RefObject<HTMLSelectElement>) || createRef();
@@ -110,8 +126,8 @@ const MultiSelectComponent: ForwardRefRenderFunction<HTMLSelectElement, MultiSel
       });
       nativeSelect.current.dispatchEvent(new Event("change", { bubbles: true }));
     }
-
     setExpanded(false);
+    resetSearchState();
   };
 
   const onSelectedOptionRemoveHandler = (value: string) => {
@@ -126,33 +142,24 @@ const MultiSelectComponent: ForwardRefRenderFunction<HTMLSelectElement, MultiSel
   const { onArrowNavigation } = useArrowNavigation({
     expanded,
     setExpanded,
-    isSearching,
-    setIsSearching,
     setFocusedSelectItem,
-    onOptionChangeHandler,
     childrenCount: optionsVisibleCount,
     setShouldClick,
-    searchInputRef,
     addBtnRef,
-    renderThreshold: searchThreshold
+    searchInputRef,
+    customSelectButtonRef,
+    onClose: resetSearchState
   });
 
   const { listPosition, opacity, optionsListMaxHeight, setListPosition, setOpacity } =
     useSelectPositionList({ expanded, optionListReference, containerReference, addBtnRef });
 
-  const syncDisplayValue = (vals: string[]) => {
-    const displayArray = React.Children.map(children, child => child).reduce(
-      (prevOption, curOption) => {
-        if (vals.includes(curOption.props.value)) {
-          prevOption[curOption.props.value] = {
-            label: curOption.props.children,
-            fixed: curOption.props.fixed
-          };
-        }
-        return prevOption;
-      },
-      {} as Record<string, Display>
-    );
+  const syncDisplayValue = (values: string[]) => {
+    const options = React.Children.map(children, child => child);
+    const displayArray: Display[] = values.map(value => {
+      const option = options.find(option => option.props.value === value);
+      return { value, label: option?.props.children, fixed: option?.props.fixed };
+    });
     setDisplay(displayArray);
   };
 
@@ -177,31 +184,37 @@ const MultiSelectComponent: ForwardRefRenderFunction<HTMLSelectElement, MultiSel
     type ReactChildrenType = ReturnType<typeof React.Children.toArray>;
 
     const filterOutSelectedChildren = (internalChildren: ReactChildrenType) => {
-      const selectedValues = Object.keys(display);
       return internalChildren.filter(
         child =>
           typeof child === "object" &&
           "props" in child &&
-          !selectedValues.includes(child.props.value as string)
+          !display.find(option => option.value === child.props.value)
       );
     };
 
-    if (isSearching || filter !== "") {
+    let results;
+    if (filter !== "") {
       const filteredChildren = React.Children.toArray(children).filter(
         child =>
-          (child as ReactElement).props.children.toLowerCase().match(filter.toLowerCase()) !== null
+          (child as ReactElement).props.children
+            .toLowerCase()
+            .match(escapeRegExp(filter.toLowerCase())) !== null
       );
 
-      const internalChildren = _internalRenderChildren(filterOutSelectedChildren(filteredChildren));
+      results = _internalRenderChildren(filterOutSelectedChildren(filteredChildren));
+    } else {
+      results = _internalRenderChildren(
+        filterOutSelectedChildren(React.Children.toArray(children))
+      );
+    }
 
-      if (internalChildren.length === 0) {
-        return <li className={classes["no-results"]}>{noResultsLabel}</li>;
-      }
+    optionsVisibleCount !== results.length && setOptionsVisibleCount(results.length);
 
-      return internalChildren;
+    if (results.length === 0) {
+      return <li className={classes["no-results"]}>{noResultsLabel}</li>;
     }
 
-    return _internalRenderChildren(filterOutSelectedChildren(React.Children.toArray(children)));
+    return results;
 
     function _internalRenderChildren(internalChildren: ReactChildrenType) {
       return React.Children.map(internalChildren, (child, index) => {
@@ -211,13 +224,15 @@ const MultiSelectComponent: ForwardRefRenderFunction<HTMLSelectElement, MultiSel
           },
           onOptionSelect: (optionRef: React.RefObject<HTMLLIElement>) => {
             onOptionChangeHandler(optionRef.current);
+            setExpanded(false);
             setShouldClick(false);
           },
-          isSearching: isSearching,
+          isSearching: false,
           selectOpened: expanded,
           childIndex: index,
           hasFocus: focusedSelectItem === index,
-          shouldClick: shouldClick
+          shouldClick: shouldClick,
+          id: getOptionId(multiSelectId.current, index)
         });
       });
     }
@@ -238,16 +253,21 @@ const MultiSelectComponent: ForwardRefRenderFunction<HTMLSelectElement, MultiSel
   };
 
   useEffect(() => {
-    if (expanded) {
-      setFocusedSelectItem(0);
+    if (expanded && searchInputRef.current) {
       setShouldFocusButtonAfterClose(true);
+      searchInputRef.current.focus();
     }
 
     if (!expanded && customSelectButtonRef.current && shouldFocusButtonAfterClose) {
-      customSelectButtonRef.current.focus();
       setShouldFocusButtonAfterClose(false);
+      customSelectButtonRef.current.focus();
     }
-  }, [expanded, customSelectButtonRef.current, shouldFocusButtonAfterClose]);
+  }, [
+    expanded,
+    customSelectButtonRef.current,
+    shouldFocusButtonAfterClose,
+    searchInputRef.current
+  ]);
 
   useEffect(() => {
     syncDisplayValue(value);
@@ -272,7 +292,8 @@ const MultiSelectComponent: ForwardRefRenderFunction<HTMLSelectElement, MultiSel
   success && additionalClasses.push(classes.success);
 
   const onSelectButtonClick = () => {
-    setExpanded(!expanded);
+    setExpanded(expanded => !expanded);
+    setShouldClick(false);
   };
 
   /** The native select is purely for external form libraries. We use it to emit an onChange with native select event object so they know exactly what's happening. */
@@ -295,16 +316,16 @@ const MultiSelectComponent: ForwardRefRenderFunction<HTMLSelectElement, MultiSel
       </select>
       <div
         {...filterProps(rest, /^data-/)}
+        id={multiSelectId.current}
         ref={containerReference}
         onKeyDown={onArrowNavigation}
         className={`custom-select ${classes.select} ${additionalClasses.join(" ")} ${
           className ?? ""
         }`}
       >
-        {searchVisible && renderSearch()}
         <div
           className={`${classes["custom-select"]} ${additionalClasses.join(" ")} `}
-          style={{ display: expanded && searchVisible ? "none" : "flex" }}
+          style={{ display: "flex" }}
         >
           <div className={classes["display-container"]} data-display>
             <SelectButton
@@ -331,10 +352,10 @@ const MultiSelectComponent: ForwardRefRenderFunction<HTMLSelectElement, MultiSel
                 onRemove={onSelectedOptionRemoveHandler}
               />
             )}
+            {searchVisible && renderSearch()}
           </div>
           <div className={classes["status"]}>{icon || renderChevronIcon()}</div>
         </div>
-
         <div
           ref={optionListReference}
           className={`list-wrapper ${classes["list-wrapper"]}`}
@@ -347,8 +368,10 @@ const MultiSelectComponent: ForwardRefRenderFunction<HTMLSelectElement, MultiSel
           }}
         >
           <ul
+            id={getListboxId(multiSelectId.current)}
             className={addNewBtnOptionsContainerClassName}
             role="listbox"
+            aria-multiselectable="true"
             style={{ maxHeight: optionsListMaxHeight.list }}
           >
             {renderOptions()}

package/src/components/Form/Select/MultiSelect/SelectButton.module.scss

@@ -14,7 +14,7 @@
  *    limitations under the License.
  */
 
-.add-btn {
+.btn {
   position: absolute;
   top: 0;
   left: 0;

package/src/components/Form/Select/MultiSelect/SelectButton.tsx

@@ -26,7 +26,7 @@ const SelectButtonComponent: ForwardRefRenderFunction<HTMLButtonElement, Props>
   return (
     <button
       {...rest}
-      className={classes["add-btn"]}
+      className={classes["btn"]}
       onClick={onClick}
       ref={ref}
       type="button"

package/src/components/Form/Select/MultiSelect/SelectedOptions.tsx

@@ -20,12 +20,13 @@ import { Tag } from "../../../Tag/Tag";
 import classes from "./SelectedOptions.module.scss";
 
 export type Display = {
+  value: string;
   label: string;
   fixed?: boolean;
 };
 
 export interface Props extends ComponentPropsWithRef<"div"> {
-  display: Record<string, Display>;
+  display: Display[];
   onRemove: (value: string) => void;
   disabled: boolean;
 }
@@ -36,9 +37,9 @@ const SelectedOptionsComponent: ForwardRefRenderFunction<HTMLDivElement, Props>
 ) => {
   return (
     <div {...rest} className={classes["options"]} ref={ref}>
-      {Object.entries(display).map(([value, item]) => (
+      {display.map(item => (
         <Tag
-          key={value}
+          key={item.value}
           onClick={(e: React.MouseEvent<HTMLDivElement>) => {
             e.stopPropagation();
           }}
@@ -48,7 +49,7 @@ const SelectedOptionsComponent: ForwardRefRenderFunction<HTMLDivElement, Props>
               ? {
                   onRemove: (e: React.MouseEvent<HTMLButtonElement>) => {
                     e.stopPropagation();
-                    onRemove(value);
+                    onRemove(item.value);
                   },
                   className: classes["remove-btn"]
                 }