@onewelcome/react-lib-components 7.1.0 → 8.1.0

package/dist/cjs/Notifications/BaseModal/BaseModal.cjs.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react"),l=require("react-dom"),a=require("../../src/hooks/useGetDomRoot.cjs.js"),o=require("./BaseModal.module.scss.cjs.js"),d=require("./BaseModalContext.cjs.js"),r=require("./useRepeatFocus.cjs.js");const s="overflow",t=l=>{e.useEffect((()=>{l?document.body.style[s]="hidden":0===document.querySelectorAll("[role=dialog][data-hidden=false]").length&&document.body.style.removeProperty(s)}),[l])},n=e.forwardRef((({id:s,children:n,open:i,onClose:c,className:u="",containerProps:m,backdropProps:p,labelledby:v,describedby:f,disableEscapeKeyDown:b=!1,disableBackdrop:y=!1,forceContainerOpen:h=!1,zIndex:E,domRoot:$,...j},x)=>{var N,R,q;t(i);const C=e.useRef(null),I=x||e.createRef(),{root:g}=a.useGetDomRoot($,C);r.useRepeatFocus(I),e.useEffect((()=>{var e;i&&(null===(e=I.current)||void 0===e||e.focus())}),[i]);const k=()=>e.Children.map(n,(l=>{var a;return e.isValidElement(l)?e.cloneElement(l,{onClose:null!==(a=l.props.onClose)&&void 0!==a?a:c}):l}));return e.createElement("div",{ref:C},l.createPortal(e.createElement("div",{...j,ref:I,id:s,className:`${o.default.modal} ${i?o.default.visible:""} ${u}`,role:"dialog","aria-modal":"true","aria-labelledby":null!=v?v:d.labelId(s),"aria-describedby":null!=f?f:d.descriptionId(s),"aria-hidden":!i,tabIndex:-1,"data-hidden":!i,onKeyDown:e=>{b||"Escape"!==e.key||(e.stopPropagation(),null==c||c())},style:{zIndex:E}},e.createElement("div",{...p,"aria-hidden":!0,className:`${o.default.backdrop} ${null!==(N=null==p?void 0:p.className)&&void 0!==N?N:""}`,onClick:()=>!y&&c&&c()}),h?e.createElement("div",{...m,"aria-hidden":!i,"data-element":"dialog",hidden:!i,style:{zIndex:E&&E+1},className:`${o.default.container} ${null!==(R=null==m?void 0:m.className)&&void 0!==R?R:""}`},k()):i&&e.createElement("div",{...m,"data-element":"dialog",style:{zIndex:E&&E+1},className:`${o.default.container} ${null!==(q=null==m?void 0:m.className)&&void 0!==q?q:""}`},k())),g))}));exports.BaseModal=n,exports.useSetBodyScroll=t;
+"use strict";var e=require("react"),l=require("react-dom"),a=require("../../src/hooks/useGetDomRoot.cjs.js"),o=require("./BaseModal.module.scss.cjs.js"),d=require("./BaseModalContext.cjs.js"),r=require("../../src/hooks/useRepeatFocus.cjs.js");const s="overflow",t=l=>{e.useEffect((()=>{l?document.body.style[s]="hidden":0===document.querySelectorAll("[role=dialog][data-hidden=false]").length&&document.body.style.removeProperty(s)}),[l])},n=e.forwardRef((({id:s,children:n,open:i,onClose:c,className:u="",containerProps:m,backdropProps:p,labelledby:v,describedby:f,disableEscapeKeyDown:b=!1,disableBackdrop:y=!1,forceContainerOpen:h=!1,zIndex:E,domRoot:$,...j},x)=>{var N,R,k;t(i);const q=e.useRef(null),C=x||e.createRef(),{root:I}=a.useGetDomRoot($,q);r.useRepeatFocus(C),e.useEffect((()=>{var e;i&&(null===(e=C.current)||void 0===e||e.focus())}),[i]);const g=()=>e.Children.map(n,(l=>{var a;return e.isValidElement(l)?e.cloneElement(l,{onClose:null!==(a=l.props.onClose)&&void 0!==a?a:c}):l}));return e.createElement("div",{ref:q},l.createPortal(e.createElement("div",{...j,ref:C,id:s,className:`${o.default.modal} ${i?o.default.visible:""} ${u}`,role:"dialog","aria-modal":"true","aria-labelledby":null!=v?v:d.labelId(s),"aria-describedby":null!=f?f:d.descriptionId(s),"aria-hidden":!i,tabIndex:-1,"data-hidden":!i,onKeyDown:e=>{b||"Escape"!==e.key||(e.stopPropagation(),null==c||c())},style:{zIndex:E}},e.createElement("div",{...p,"aria-hidden":!0,className:`${o.default.backdrop} ${null!==(N=null==p?void 0:p.className)&&void 0!==N?N:""}`,onClick:()=>!y&&c&&c()}),h?e.createElement("div",{...m,"aria-hidden":!i,"data-element":"dialog",hidden:!i,style:{zIndex:E&&E+1},className:`${o.default.container} ${null!==(R=null==m?void 0:m.className)&&void 0!==R?R:""}`},g()):i&&e.createElement("div",{...m,"data-element":"dialog",style:{zIndex:E&&E+1},className:`${o.default.container} ${null!==(k=null==m?void 0:m.className)&&void 0!==k?k:""}`},g())),I))}));exports.BaseModal=n,exports.useSetBodyScroll=t;
 //# sourceMappingURL=BaseModal.cjs.js.map

package/dist/cjs/Notifications/BaseModal/BaseModal.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseModal.cjs.js","sources":["../../../../../../src/components/Notifications/BaseModal/BaseModal.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 React, {\n  ForwardRefRenderFunction,\n  ComponentPropsWithRef,\n  useEffect,\n  useRef,\n  ReactElement,\n  RefObject,\n  createRef\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useGetDomRoot } from \"../../../hooks/useGetDomRoot\";\nimport classes from \"./BaseModal.module.scss\";\nimport { labelId, descriptionId } from \"./BaseModalContext\";\nimport { useRepeatFocus } from \"./useRepeatFocus\";\n\nconst SCROLL_PROPERTY_NAME = \"overflow\";\nconst SCROLL_PROPERTY_VALUE = \"hidden\";\n\nexport interface Props extends ComponentPropsWithRef<\"div\"> {\n  id: string;\n  children: React.ReactNode;\n  open: boolean;\n  onClose?: (event?: React.MouseEvent<HTMLElement>) => unknown;\n  className?: string;\n  containerProps?: ComponentPropsWithRef<\"div\">;\n  backdropProps?: ComponentPropsWithRef<\"div\">;\n  labelledby?: string;\n  describedby?: string;\n  disableEscapeKeyDown?: boolean;\n  disableBackdrop?: boolean;\n  forceContainerOpen?: boolean;\n  zIndex?: number;\n  domRoot?: HTMLElement;\n}\n\nexport const useSetBodyScroll = (open: boolean) => {\n  const hideBodyScroll = () => {\n    document.body.style[SCROLL_PROPERTY_NAME] = SCROLL_PROPERTY_VALUE;\n  };\n\n  const showBodyScroll = () => {\n    const allModalsClosed =\n      document.querySelectorAll(\"[role=dialog][data-hidden=false]\").length === 0;\n    if (allModalsClosed) {\n      document.body.style.removeProperty(SCROLL_PROPERTY_NAME);\n    }\n  };\n\n  useEffect(() => {\n    if (open) {\n      hideBodyScroll();\n    } else {\n      showBodyScroll();\n    }\n  }, [open]);\n};\n\nconst BaseModalComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (\n  {\n    id,\n    children,\n    open,\n    onClose,\n    className = \"\",\n    containerProps,\n    backdropProps,\n    labelledby,\n    describedby,\n    disableEscapeKeyDown = false,\n    disableBackdrop = false,\n    forceContainerOpen = false,\n    zIndex,\n    domRoot,\n    ...rest\n  }: Props,\n  ref\n) => {\n  useSetBodyScroll(open);\n  const wrappingDivRef = useRef<HTMLDivElement>(null);\n  const modalRef = (ref as RefObject<HTMLDivElement>) || createRef<HTMLDivElement>();\n  const { root } = useGetDomRoot(domRoot, wrappingDivRef);\n\n  const handleEscKeyPress = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (!disableEscapeKeyDown && event.key === \"Escape\") {\n      event.stopPropagation();\n      onClose?.();\n    }\n  };\n\n  useRepeatFocus(modalRef);\n\n  useEffect(() => {\n    if (open) {\n      modalRef.current?.focus();\n    }\n  }, [open]);\n\n  const handleBackdropClick = () => !disableBackdrop && onClose && onClose();\n\n  const renderChildren = () =>\n    React.Children.map(children, child => {\n      if (React.isValidElement(child)) {\n        return React.cloneElement(child as ReactElement, {\n          onClose: child.props.onClose ?? onClose\n        });\n      }\n      return child;\n    });\n\n  return (\n    <div ref={wrappingDivRef}>\n      {createPortal(\n        <div\n          {...rest}\n          ref={modalRef}\n          id={id}\n          className={`${classes[\"modal\"]} ${open ? classes[\"visible\"] : \"\"} ${className}`}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-labelledby={labelledby ?? labelId(id)}\n          aria-describedby={describedby ?? descriptionId(id)}\n          aria-hidden={!open}\n          tabIndex={-1}\n          data-hidden={!open}\n          onKeyDown={handleEscKeyPress}\n          style={{ zIndex }}\n        >\n          <div\n            {...backdropProps}\n            aria-hidden={true}\n            className={`${classes[\"backdrop\"]} ${backdropProps?.className ?? \"\"}`}\n            onClick={handleBackdropClick}\n          ></div>\n          {forceContainerOpen ? (\n            <div\n              {...containerProps}\n              aria-hidden={!open}\n              data-element=\"dialog\"\n              hidden={!open}\n              style={{ zIndex: zIndex && zIndex + 1 }}\n              className={`${classes[\"container\"]} ${containerProps?.className ?? \"\"}`}\n            >\n              {renderChildren()}\n            </div>\n          ) : (\n            open && (\n              <div\n                {...containerProps}\n                data-element=\"dialog\"\n                style={{ zIndex: zIndex && zIndex + 1 }}\n                className={`${classes[\"container\"]} ${containerProps?.className ?? \"\"}`}\n              >\n                {renderChildren()}\n              </div>\n            )\n          )}\n        </div>,\n        root\n      )}\n    </div>\n  );\n};\n\nexport const BaseModal = React.forwardRef(BaseModalComponent);\n"],"names":["SCROLL_PROPERTY_NAME","useSetBodyScroll","open","useEffect","document","body","style","querySelectorAll","length","removeProperty","BaseModal","React","forwardRef","id","children","onClose","className","containerProps","backdropProps","labelledby","describedby","disableEscapeKeyDown","disableBackdrop","forceContainerOpen","zIndex","domRoot","rest","ref","wrappingDivRef","useRef","modalRef","createRef","root","useGetDomRoot","useRepeatFocus","_a","current","focus","renderChildren","Children","map","child","isValidElement","cloneElement","props","createElement","createPortal","classes","default","role","labelId","descriptionId","tabIndex","onKeyDown","event","key","stopPropagation","onClick","hidden","_b","_c"],"mappings":"qOA+BA,MAAMA,EAAuB,WAoBhBC,EAAoBC,IAa/BC,EAAAA,WAAU,KACJD,EAZJE,SAASC,KAAKC,MAAMN,GArBM,SA0BiD,IAAzEI,SAASG,iBAAiB,oCAAoCC,QAE9DJ,SAASC,KAAKC,MAAMG,eAAeT,EASpC,GACA,CAACE,GAAM,EA6GCQ,EAAYC,EAAMC,YA1G6C,EAExEC,KACAC,WACAZ,OACAa,UACAC,YAAY,GACZC,iBACAC,gBACAC,aACAC,cACAC,wBAAuB,EACvBC,mBAAkB,EAClBC,sBAAqB,EACrBC,SACAC,aACGC,GAELC,eAEA1B,EAAiBC,GACjB,MAAM0B,EAAiBC,SAAuB,MACxCC,EAAYH,GAAqCI,EAAAA,aACjDC,KAAEA,GAASC,EAAaA,cAACR,EAASG,GASxCM,EAAcA,eAACJ,GAEf3B,EAAAA,WAAU,WACJD,IACgB,QAAlBiC,EAAAL,EAASM,eAAS,IAAAD,GAAAA,EAAAE,QACnB,GACA,CAACnC,IAEJ,MAEMoC,EAAiB,IACrB3B,EAAM4B,SAASC,IAAI1B,GAAU2B,UAC3B,OAAI9B,EAAM+B,eAAeD,GAChB9B,EAAMgC,aAAaF,EAAuB,CAC/C1B,kBAAS0B,EAAMG,MAAM7B,uBAAWA,IAG7B0B,CAAK,IAGhB,OACE9B,EAAKkC,cAAA,MAAA,CAAAlB,IAAKC,GACPkB,EAAAA,aACCnC,EAAAkC,cAAA,MAAA,IACMnB,EACJC,IAAKG,EACLjB,GAAIA,EACJG,UAAW,GAAG+B,EAAAA,QAAe,SAAK7C,EAAO6C,EAAOC,QAAU,QAAI,MAAMhC,IACpEiC,KAAK,SAAQ,aACF,OACM,kBAAA9B,QAAAA,EAAc+B,EAAAA,QAAQrC,sBACrBO,QAAAA,EAAe+B,EAAaA,cAACtC,GAAG,eACpCX,EACdkD,UAAW,EACE,eAAClD,EACdmD,UA1CmBC,IACpBjC,GAAsC,WAAdiC,EAAMC,MACjCD,EAAME,kBACNzC,SAAAA,IACD,EAuCKT,MAAO,CAAEkB,WAETb,EACMkC,cAAA,MAAA,IAAA3B,EACS,eAAA,EACbF,UAAW,GAAG+B,EAAOC,QAAW,YAA6B,QAAxBb,EAAAjB,aAAa,EAAbA,EAAeF,iBAAS,IAAAmB,EAAAA,EAAI,KACjEsB,QAlCkB,KAAOnC,GAAmBP,GAAWA,MAoCxDQ,EACCZ,EAAAkC,cAAA,MAAA,IACM5B,EACS,eAACf,EAAI,eACL,SACbwD,QAASxD,EACTI,MAAO,CAAEkB,OAAQA,GAAUA,EAAS,GACpCR,UAAW,GAAG+B,EAAAA,QAAmB,aAAkC,QAA7BY,EAAA1C,aAAA,EAAAA,EAAgBD,iBAAa,IAAA2C,EAAAA,EAAA,MAElErB,KAGHpC,GACES,EAAAkC,cAAA,MAAA,IACM5B,EACS,eAAA,SACbX,MAAO,CAAEkB,OAAQA,GAAUA,EAAS,GACpCR,UAAW,GAAG+B,UAAmB,aAA8B,QAAzBa,EAAA3C,eAAAA,EAAgBD,iBAAS,IAAA4C,EAAAA,EAAI,MAElEtB,MAKTN,GAGJ"}
+{"version":3,"file":"BaseModal.cjs.js","sources":["../../../../../../src/components/Notifications/BaseModal/BaseModal.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 React, {\n  ForwardRefRenderFunction,\n  ComponentPropsWithRef,\n  useEffect,\n  useRef,\n  ReactElement,\n  RefObject,\n  createRef\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useGetDomRoot } from \"../../../hooks/useGetDomRoot\";\nimport classes from \"./BaseModal.module.scss\";\nimport { labelId, descriptionId } from \"./BaseModalContext\";\nimport { useRepeatFocus } from \"../../../hooks/useRepeatFocus\";\n\nconst SCROLL_PROPERTY_NAME = \"overflow\";\nconst SCROLL_PROPERTY_VALUE = \"hidden\";\n\nexport interface Props extends ComponentPropsWithRef<\"div\"> {\n  id: string;\n  children: React.ReactNode;\n  open: boolean;\n  onClose?: (event?: React.MouseEvent<HTMLElement>) => unknown;\n  className?: string;\n  containerProps?: ComponentPropsWithRef<\"div\">;\n  backdropProps?: ComponentPropsWithRef<\"div\">;\n  labelledby?: string;\n  describedby?: string;\n  disableEscapeKeyDown?: boolean;\n  disableBackdrop?: boolean;\n  forceContainerOpen?: boolean;\n  zIndex?: number;\n  domRoot?: HTMLElement;\n}\n\nexport const useSetBodyScroll = (open: boolean) => {\n  const hideBodyScroll = () => {\n    document.body.style[SCROLL_PROPERTY_NAME] = SCROLL_PROPERTY_VALUE;\n  };\n\n  const showBodyScroll = () => {\n    const allModalsClosed =\n      document.querySelectorAll(\"[role=dialog][data-hidden=false]\").length === 0;\n    if (allModalsClosed) {\n      document.body.style.removeProperty(SCROLL_PROPERTY_NAME);\n    }\n  };\n\n  useEffect(() => {\n    if (open) {\n      hideBodyScroll();\n    } else {\n      showBodyScroll();\n    }\n  }, [open]);\n};\n\nconst BaseModalComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (\n  {\n    id,\n    children,\n    open,\n    onClose,\n    className = \"\",\n    containerProps,\n    backdropProps,\n    labelledby,\n    describedby,\n    disableEscapeKeyDown = false,\n    disableBackdrop = false,\n    forceContainerOpen = false,\n    zIndex,\n    domRoot,\n    ...rest\n  }: Props,\n  ref\n) => {\n  useSetBodyScroll(open);\n  const wrappingDivRef = useRef<HTMLDivElement>(null);\n  const modalRef = (ref as RefObject<HTMLDivElement>) || createRef<HTMLDivElement>();\n  const { root } = useGetDomRoot(domRoot, wrappingDivRef);\n\n  const handleEscKeyPress = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (!disableEscapeKeyDown && event.key === \"Escape\") {\n      event.stopPropagation();\n      onClose?.();\n    }\n  };\n\n  useRepeatFocus(modalRef);\n\n  useEffect(() => {\n    if (open) {\n      modalRef.current?.focus();\n    }\n  }, [open]);\n\n  const handleBackdropClick = () => !disableBackdrop && onClose && onClose();\n\n  const renderChildren = () =>\n    React.Children.map(children, child => {\n      if (React.isValidElement(child)) {\n        return React.cloneElement(child as ReactElement, {\n          onClose: child.props.onClose ?? onClose\n        });\n      }\n      return child;\n    });\n\n  return (\n    <div ref={wrappingDivRef}>\n      {createPortal(\n        <div\n          {...rest}\n          ref={modalRef}\n          id={id}\n          className={`${classes[\"modal\"]} ${open ? classes[\"visible\"] : \"\"} ${className}`}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-labelledby={labelledby ?? labelId(id)}\n          aria-describedby={describedby ?? descriptionId(id)}\n          aria-hidden={!open}\n          tabIndex={-1}\n          data-hidden={!open}\n          onKeyDown={handleEscKeyPress}\n          style={{ zIndex }}\n        >\n          <div\n            {...backdropProps}\n            aria-hidden={true}\n            className={`${classes[\"backdrop\"]} ${backdropProps?.className ?? \"\"}`}\n            onClick={handleBackdropClick}\n          ></div>\n          {forceContainerOpen ? (\n            <div\n              {...containerProps}\n              aria-hidden={!open}\n              data-element=\"dialog\"\n              hidden={!open}\n              style={{ zIndex: zIndex && zIndex + 1 }}\n              className={`${classes[\"container\"]} ${containerProps?.className ?? \"\"}`}\n            >\n              {renderChildren()}\n            </div>\n          ) : (\n            open && (\n              <div\n                {...containerProps}\n                data-element=\"dialog\"\n                style={{ zIndex: zIndex && zIndex + 1 }}\n                className={`${classes[\"container\"]} ${containerProps?.className ?? \"\"}`}\n              >\n                {renderChildren()}\n              </div>\n            )\n          )}\n        </div>,\n        root\n      )}\n    </div>\n  );\n};\n\nexport const BaseModal = React.forwardRef(BaseModalComponent);\n"],"names":["SCROLL_PROPERTY_NAME","useSetBodyScroll","open","useEffect","document","body","style","querySelectorAll","length","removeProperty","BaseModal","React","forwardRef","id","children","onClose","className","containerProps","backdropProps","labelledby","describedby","disableEscapeKeyDown","disableBackdrop","forceContainerOpen","zIndex","domRoot","rest","ref","wrappingDivRef","useRef","modalRef","createRef","root","useGetDomRoot","useRepeatFocus","_a","current","focus","renderChildren","Children","map","child","isValidElement","cloneElement","props","createElement","createPortal","classes","default","role","labelId","descriptionId","tabIndex","onKeyDown","event","key","stopPropagation","onClick","hidden","_b","_c"],"mappings":"mPA+BA,MAAMA,EAAuB,WAoBhBC,EAAoBC,IAa/BC,EAAAA,WAAU,KACJD,EAZJE,SAASC,KAAKC,MAAMN,GArBM,SA0BiD,IAAzEI,SAASG,iBAAiB,oCAAoCC,QAE9DJ,SAASC,KAAKC,MAAMG,eAAeT,EASpC,GACA,CAACE,GAAM,EA6GCQ,EAAYC,EAAMC,YA1G6C,EAExEC,KACAC,WACAZ,OACAa,UACAC,YAAY,GACZC,iBACAC,gBACAC,aACAC,cACAC,wBAAuB,EACvBC,mBAAkB,EAClBC,sBAAqB,EACrBC,SACAC,aACGC,GAELC,eAEA1B,EAAiBC,GACjB,MAAM0B,EAAiBC,SAAuB,MACxCC,EAAYH,GAAqCI,EAAAA,aACjDC,KAAEA,GAASC,EAAaA,cAACR,EAASG,GASxCM,EAAcA,eAACJ,GAEf3B,EAAAA,WAAU,WACJD,IACgB,QAAlBiC,EAAAL,EAASM,eAAS,IAAAD,GAAAA,EAAAE,QACnB,GACA,CAACnC,IAEJ,MAEMoC,EAAiB,IACrB3B,EAAM4B,SAASC,IAAI1B,GAAU2B,UAC3B,OAAI9B,EAAM+B,eAAeD,GAChB9B,EAAMgC,aAAaF,EAAuB,CAC/C1B,kBAAS0B,EAAMG,MAAM7B,uBAAWA,IAG7B0B,CAAK,IAGhB,OACE9B,EAAKkC,cAAA,MAAA,CAAAlB,IAAKC,GACPkB,EAAAA,aACCnC,EAAAkC,cAAA,MAAA,IACMnB,EACJC,IAAKG,EACLjB,GAAIA,EACJG,UAAW,GAAG+B,EAAAA,QAAe,SAAK7C,EAAO6C,EAAOC,QAAU,QAAI,MAAMhC,IACpEiC,KAAK,SAAQ,aACF,OACM,kBAAA9B,QAAAA,EAAc+B,EAAAA,QAAQrC,sBACrBO,QAAAA,EAAe+B,EAAaA,cAACtC,GAAG,eACpCX,EACdkD,UAAW,EACE,eAAClD,EACdmD,UA1CmBC,IACpBjC,GAAsC,WAAdiC,EAAMC,MACjCD,EAAME,kBACNzC,SAAAA,IACD,EAuCKT,MAAO,CAAEkB,WAETb,EACMkC,cAAA,MAAA,IAAA3B,EACS,eAAA,EACbF,UAAW,GAAG+B,EAAOC,QAAW,YAA6B,QAAxBb,EAAAjB,aAAa,EAAbA,EAAeF,iBAAS,IAAAmB,EAAAA,EAAI,KACjEsB,QAlCkB,KAAOnC,GAAmBP,GAAWA,MAoCxDQ,EACCZ,EAAAkC,cAAA,MAAA,IACM5B,EACS,eAACf,EAAI,eACL,SACbwD,QAASxD,EACTI,MAAO,CAAEkB,OAAQA,GAAUA,EAAS,GACpCR,UAAW,GAAG+B,EAAAA,QAAmB,aAAkC,QAA7BY,EAAA1C,aAAA,EAAAA,EAAgBD,iBAAa,IAAA2C,EAAAA,EAAA,MAElErB,KAGHpC,GACES,EAAAkC,cAAA,MAAA,IACM5B,EACS,eAAA,SACbX,MAAO,CAAEkB,OAAQA,GAAUA,EAAS,GACpCR,UAAW,GAAG+B,UAAmB,aAA8B,QAAzBa,EAAA3C,eAAAA,EAAgBD,iBAAS,IAAA4C,EAAAA,EAAI,MAElEtB,MAKTN,GAGJ"}

package/dist/cjs/src/components/DataGrid/DataGrid.d.ts

@@ -1,9 +1,10 @@
 import { ComponentPropsWithRef, ReactElement, Ref } from "react";
-import { Props as ButtonProps } from "../Button/Button";
+import { Button, Props as ButtonProps } from "../Button/Button";
 import { HeaderCell, OnSortFunction, Sort } from "./datagrid.interfaces";
 import { Props as PaginationProps } from "../Pagination/Pagination";
 import { Spacing } from "../../hooks/useSpacing";
 import { DataGridToolbarProps } from "./DataGridFilters/DataGridToolbar";
+import { DataGridSearchbarProps } from "./DataGridFilters/DataGridSearchbar";
 export interface Props<T> extends Omit<ComponentPropsWithRef<"div">, "children"> {
     children: ({ item, index }: {
         item: T;
@@ -13,6 +14,9 @@ export interface Props<T> extends Omit<ComponentPropsWithRef<"div">, "children">
     initialSort?: Sort;
     onSort?: OnSortFunction;
     headers: HeaderCell[];
+    /**
+     * @deprecated use the `toolbarButtons` prop instead
+     */
     actions?: {
         enableAddBtn?: boolean;
         enableColumnsBtn?: boolean;
@@ -26,10 +30,9 @@ export interface Props<T> extends Omit<ComponentPropsWithRef<"div">, "children">
     paginationProps?: PaginationProps;
     disableContextMenuColumn?: boolean;
     enableExpandableRow?: boolean;
-    filters?: {
-        enable: boolean;
-        filtersProps: DataGridToolbarProps;
-    };
+    filters?: DataGridToolbarProps;
+    search?: DataGridSearchbarProps;
+    toolbarButtons?: ReactElement<ButtonProps, typeof Button> | ReactElement<ButtonProps, typeof Button>[];
     isLoading?: boolean;
     enableMultiSorting?: boolean;
     spacing?: Spacing;

package/dist/cjs/src/components/DataGrid/DataGridBody/DataGridBody.d.ts

@@ -9,6 +9,7 @@ export interface Props<T> extends Omit<ComponentPropsWithRef<"tbody">, "children
     headers: HeaderCell[];
     isLoading?: boolean;
     disableContextMenuColumn?: boolean;
+    searchValue?: string;
     emptyLabel?: string;
     spacing?: React.CSSProperties;
 }

package/dist/cjs/src/components/DataGrid/DataGridBody/DataGridCell/DataGridCell.d.ts

@@ -3,6 +3,7 @@ export interface Props extends ComponentPropsWithRef<"td"> {
     children?: ReactElement | string | number;
     isLoading?: boolean;
     spacing?: React.CSSProperties;
+    searchValue?: string;
     cellIndex?: number;
     columnLength?: number;
     disableContextMenuColumn?: boolean;

package/dist/cjs/src/components/DataGrid/DataGridBody/DataGridRow/DataGridRow.d.ts

@@ -4,6 +4,7 @@ export interface Props extends ComponentPropsWithRef<"tr"> {
     headers?: HeaderCell[];
     isLoading?: boolean;
     spacing?: React.CSSProperties;
+    searchValue?: string;
     disableContextMenuColumn?: boolean;
     expandableRowProps?: {
         enableExpandableRow: boolean;

package/dist/cjs/src/components/DataGrid/DataGridFilters/DataGridFilter.d.ts

@@ -1,15 +1,15 @@
 import React from "react";
-import { DataGridColumnMetadata, Filter, FilterEditorMode, FiltersAction, PopoverTranslations, TagTranslations } from "./DataGridFilters.interfaces";
+import { DataGridColumnMetadata, Filter, FilterEditorMode, PopoverTranslations, TagTranslations } from "./DataGridFilters.interfaces";
 export type Props = {
     mode: FilterEditorMode;
     domRoot?: HTMLElement;
     filter?: Filter;
     columnsMetadata: DataGridColumnMetadata[];
-    dispatch: React.Dispatch<FiltersAction>;
     onFilterAdd?: (filter: Filter) => void;
     onFilterEdit?: (filter: Filter) => void;
     onFilterDelete?: (id: string) => void;
     tagTranslations?: TagTranslations;
     popoverTranslations?: PopoverTranslations;
+    customEditTagContent?: React.ReactElement;
 };
-export declare const DataGridFilter: ({ mode, filter, domRoot, columnsMetadata, dispatch, onFilterAdd, onFilterEdit, onFilterDelete, tagTranslations, popoverTranslations }: Props) => React.JSX.Element;
+export declare const DataGridFilter: ({ mode, filter, domRoot, columnsMetadata, onFilterAdd, onFilterEdit, onFilterDelete, tagTranslations, popoverTranslations, customEditTagContent }: Props) => React.JSX.Element;

package/dist/cjs/src/components/DataGrid/DataGridFilters/DataGridFilterPopover.d.ts

@@ -1,7 +1,8 @@
 import React from "react";
 import { DataGridColumnMetadata, PopoverTranslations } from "./DataGridFilters.interfaces";
 export type Props = {
-    anchorRef?: React.RefObject<HTMLOrSVGElement>;
+    popoverRef: React.RefObject<HTMLDivElement>;
+    anchorRef?: React.RefObject<HTMLDivElement>;
     isOpen: boolean;
     column: string;
     columnsMetadata: DataGridColumnMetadata[];
@@ -19,4 +20,4 @@ export type Props = {
     setPickedValues: (pickedValues: React.SetStateAction<string[]>) => void;
     translations?: PopoverTranslations;
 };
-export declare const DataGridFilterPopover: ({ anchorRef, isOpen, column, columnsMetadata, values, pickedValues, operator, operators, onFilterSubmit, resetFields, setFilterOpen, setColumn, setOperator, setOperators, setValues, setPickedValues, translations }: Props) => React.JSX.Element;
+export declare const DataGridFilterPopover: ({ popoverRef, anchorRef, isOpen, column, columnsMetadata, values, pickedValues, operator, operators, onFilterSubmit, resetFields, setFilterOpen, setColumn, setOperator, setOperators, setValues, setPickedValues, translations }: Props) => React.JSX.Element;

package/dist/cjs/src/components/DataGrid/DataGridFilters/DataGridFilterTag.d.ts

@@ -1,7 +1,8 @@
 import React, { ComponentPropsWithRef, ForwardRefRenderFunction } from "react";
 import { Filter, FilterEditorMode, TagTranslations } from "./DataGridFilters.interfaces";
 export interface DataGridFilterTagProps extends ComponentPropsWithRef<"div"> {
-    triggerRef: React.Ref<HTMLDivElement>;
+    customEditTagContent?: React.ReactElement;
+    triggerRef: React.Ref<HTMLButtonElement>;
     filter?: Filter;
     mode: FilterEditorMode;
     onFilterRemove: () => void;

package/dist/cjs/src/components/DataGrid/DataGridFilters/DataGridSearchbar.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { InputWrapperProps } from "../../..";
+export interface DataGridSearchbarProps {
+    onSearch: (value: string) => void;
+    initialSearchValue?: string;
+    debounceTime?: number;
+    placeholder?: string;
+    inputWrapperProps?: InputWrapperProps;
+}
+export declare const DataGridSearchbar: ({ onSearch, initialSearchValue, debounceTime, inputWrapperProps, placeholder }: DataGridSearchbarProps) => React.JSX.Element;

package/dist/cjs/src/components/DataGrid/DataGridFilters/DataGridToolbar.d.ts

@@ -1,7 +1,8 @@
-import React, { ComponentPropsWithRef, ForwardRefRenderFunction } from "react";
+import React from "react";
 import { DataGridColumnMetadata, Filter, FiltersTranslations } from "./DataGridFilters.interfaces";
-export interface DataGridToolbarProps extends ComponentPropsWithRef<"div"> {
+export interface DataGridToolbarProps {
     columnsMetadata: DataGridColumnMetadata[];
+    customEditTagContent?: React.ReactElement;
     filterValues?: Filter[];
     translations?: FiltersTranslations;
     onFilterAdd?: (filter: Filter) => void;
@@ -9,5 +10,4 @@ export interface DataGridToolbarProps extends ComponentPropsWithRef<"div"> {
     onFilterDelete?: (id: string) => void;
     onFiltersClear?: () => void;
 }
-export declare const DataGridToolbarComponent: ForwardRefRenderFunction<HTMLDivElement, DataGridToolbarProps>;
-export declare const DataGridToolbar: React.ForwardRefExoticComponent<Omit<DataGridToolbarProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const DataGridToolbar: ({ columnsMetadata, filterValues, translations, onFilterAdd, onFilterEdit, onFilterDelete, onFiltersClear, customEditTagContent }: DataGridToolbarProps) => React.JSX.Element;

package/dist/cjs/src/components/DataGrid/DataGridFilters/DataGridToolbarWrapper.d.ts

@@ -0,0 +1,10 @@
+import React, { ComponentPropsWithRef, ForwardRefRenderFunction, ReactElement } from "react";
+import { Button } from "../../Button/Button";
+import { ButtonProps } from "../../..";
+interface Props extends ComponentPropsWithRef<"div"> {
+    filters?: React.JSX.Element;
+    buttons?: ReactElement<ButtonProps, typeof Button> | ReactElement<ButtonProps, typeof Button>[];
+}
+export declare const DataGridToolbarWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props>;
+export declare const DataGridToolbarWrapper: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/cjs/src/components/DataGrid/DataGridFilters/useFiltersReducer.d.ts

@@ -0,0 +1,8 @@
+import { Filter, FiltersState } from "./DataGridFilters.interfaces";
+export declare const useFiltersReducer: (filterValues: Filter[] | undefined) => {
+    state: FiltersState;
+    addFilter: (filter: Filter) => void;
+    deleteFilter: (id: string) => void;
+    editFilter: (filter: Filter) => void;
+    clearFilters: () => void;
+};

package/dist/cjs/src/components/DataGrid/DataGridFilters/useFiltersReducer.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/src/components/DataGrid/testUtils.d.ts

@@ -9,5 +9,6 @@ export declare const useMockFilteringLogic: <T>(data: T[], filterValues: Filter[
     onFilterDelete: (id: string) => void;
     onFiltersClear: () => void;
     gridData: T[];
+    setGridData: import("react").Dispatch<import("react").SetStateAction<T[]>>;
     filters: Filter[];
 };

package/dist/cjs/src/components/Icon/Icon.d.ts

@@ -80,7 +80,8 @@ export declare enum Icons {
     FileAltIcon = "file-alt",
     AddCircle = "add-circle",
     ZoomIn = "zoom-in",
-    ZoomOut = "zoom-out"
+    ZoomOut = "zoom-out",
+    ArrowUp = "arrow-up"
 }
 type Tag = "span" | "div" | "i";
 export interface Props extends ComponentPropsWithRef<"div"> {

package/dist/cjs/src/hooks/useRepeatFocus.cjs.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react");exports.useRepeatFocus=t=>{const n=(e,t)=>{const n=["button","[href]","input","select","textarea","[tabindex]","[contenteditable]"].map((e=>`${e}:not([tabindex="-1"])`)).join(", "),r=e.querySelectorAll(n);return"first"===t?r[0]||null:"last"===t&&r[r.length-1]||null};e.useEffect((()=>{if(!t.current||!open)return;const e=n(t.current,"last"),r=n(t.current,"first");if(!e||!r)return;const u=t=>{"Tab"===t.key&&(t.shiftKey?document.activeElement===r&&(t.preventDefault(),null==e||e.focus()):document.activeElement===e&&(t.preventDefault(),null==r||r.focus()))};return e.addEventListener("keydown",u),r.addEventListener("keydown",u),()=>{e.removeEventListener("keydown",u),r.removeEventListener("keydown",u)}}),[t,open])};
+//# sourceMappingURL=useRepeatFocus.cjs.js.map

package/dist/cjs/src/hooks/useRepeatFocus.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRepeatFocus.cjs.js","sources":["../../../../../../src/hooks/useRepeatFocus.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 { RefObject, useEffect } from \"react\";\n\n/**\n * @description This is a hook that will make sure that when a modal is open and the user tabs through the it,\n * the focus will be repeated and the user will not lose their entire focusable element to an element in the background\n * that is being blocked by the modal.\n */\n\nexport const useRepeatFocus = (ref: RefObject<HTMLDivElement>) => {\n  const getFocusableElement = (\n    element: HTMLElement,\n    position: \"first\" | \"last\"\n  ): HTMLElement | null => {\n    const baseSelectors = [\n      \"button\",\n      \"[href]\",\n      \"input\",\n      \"select\",\n      \"textarea\",\n      \"[tabindex]\",\n      \"[contenteditable]\"\n    ];\n    const focusableSelectors = baseSelectors\n      .map(selector => `${selector}:not([tabindex=\"-1\"])`)\n      .join(\", \");\n    const focusableElements = element.querySelectorAll<HTMLElement>(focusableSelectors);\n\n    if (position === \"first\") {\n      return focusableElements[0] || null;\n    } else if (position === \"last\") {\n      return focusableElements[focusableElements.length - 1] || null;\n    }\n\n    return null;\n  };\n\n  useEffect(() => {\n    if (!ref.current || !open) return;\n\n    const lastFocusableElement = getFocusableElement(ref.current, \"last\");\n    const firstFocusableElement = getFocusableElement(ref.current, \"first\");\n\n    if (!lastFocusableElement || !firstFocusableElement) return;\n\n    const handleTabKeyPress = (event: KeyboardEvent) => {\n      if (event.key !== \"Tab\") return;\n\n      if (event.shiftKey) {\n        if (document.activeElement === firstFocusableElement) {\n          event.preventDefault();\n          lastFocusableElement?.focus();\n        }\n      } else if (document.activeElement === lastFocusableElement) {\n        event.preventDefault();\n        firstFocusableElement?.focus();\n      }\n    };\n\n    lastFocusableElement.addEventListener(\"keydown\", handleTabKeyPress);\n    firstFocusableElement.addEventListener(\"keydown\", handleTabKeyPress);\n\n    return () => {\n      lastFocusableElement.removeEventListener(\"keydown\", handleTabKeyPress);\n      firstFocusableElement.removeEventListener(\"keydown\", handleTabKeyPress);\n    };\n  }, [ref, open]);\n};\n"],"names":["ref","getFocusableElement","element","position","focusableSelectors","map","selector","join","focusableElements","querySelectorAll","length","useEffect","current","open","lastFocusableElement","firstFocusableElement","handleTabKeyPress","event","key","shiftKey","document","activeElement","preventDefault","focus","addEventListener","removeEventListener"],"mappings":"2DAwB+BA,IAC7B,MAAMC,EAAsB,CAC1BC,EACAC,KAEA,MASMC,EATgB,CACpB,SACA,SACA,QACA,SACA,WACA,aACA,qBAGCC,KAAIC,GAAY,GAAGA,2BACnBC,KAAK,MACFC,EAAoBN,EAAQO,iBAA8BL,GAEhE,MAAiB,UAAbD,EACKK,EAAkB,IAAM,KACT,SAAbL,GACFK,EAAkBA,EAAkBE,OAAS,IAG/C,IAAI,EAGbC,EAAAA,WAAU,KACR,IAAKX,EAAIY,UAAYC,KAAM,OAE3B,MAAMC,EAAuBb,EAAoBD,EAAIY,QAAS,QACxDG,EAAwBd,EAAoBD,EAAIY,QAAS,SAE/D,IAAKE,IAAyBC,EAAuB,OAErD,MAAMC,EAAqBC,IACP,QAAdA,EAAMC,MAEND,EAAME,SACJC,SAASC,gBAAkBN,IAC7BE,EAAMK,iBACNR,SAAAA,EAAsBS,SAEfH,SAASC,gBAAkBP,IACpCG,EAAMK,iBACNP,SAAAA,EAAuBQ,SACxB,EAMH,OAHAT,EAAqBU,iBAAiB,UAAWR,GACjDD,EAAsBS,iBAAiB,UAAWR,GAE3C,KACLF,EAAqBW,oBAAoB,UAAWT,GACpDD,EAAsBU,oBAAoB,UAAWT,EAAkB,CACxE,GACA,CAAChB,EAAKa,MAAM"}

package/dist/cjs/src/index.cjs.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_BaseStyling_/BaseStyling.cjs.js"),r=require("../Button/Button.cjs.js"),t=require("../Breadcrumbs/Breadcrumbs.cjs.js"),o=require("../ContextMenu/ContextMenu.cjs.js"),s=require("../ContextMenu/ContextMenuItem.cjs.js"),i=require("../Link/Link.cjs.js"),a=require("../Icon/Icon.cjs.js"),p=require("../Button/IconButton.cjs.js"),l=require("../Tabs/Tab.cjs.js"),n=require("../Tabs/Tabs.cjs.js"),c=require("../Tag/Tag.cjs.js"),u=require("../TextEllipsis/TextEllipsis.cjs.js"),j=require("../Tiles/Tile.cjs.js"),x=require("../Tiles/Tiles.cjs.js"),d=require("../Tooltip/Tooltip.cjs.js"),m=require("../Typography/Typography.cjs.js"),q=require("../ProgressBar/ProgressBar.cjs.js"),F=require("../Skeleton/Skeleton.cjs.js"),S=require("../Stepper/Stepper.cjs.js"),M=require("../Pagination/Pagination.cjs.js"),C=require("./hooks/useRepeater.cjs.js"),T=require("./hooks/useFullHeightCollapse.cjs.js"),g=require("./hooks/usePosition.cjs.js"),B=require("./hooks/useDebouncedCallback.cjs.js"),D=require("./util/helper.cjs.js"),W=require("../Notifications/BaseModal/BaseModal.cjs.js"),b=require("../Notifications/Alert/useAlert.cjs.js"),I=require("../Notifications/Alert/AlertProvider/AlertProvider.cjs.js"),h=require("../Notifications/Alert/AlertItem/AlertItem.cjs.js"),G=require("../Notifications/Dialog/Dialog.cjs.js"),f=require("../Notifications/DiscardChangesModal/DiscardChangesModal.cjs.js"),k=require("../Notifications/BaseModal/BaseModalActions/BaseModalActions.cjs.js"),P=require("../Notifications/BaseModal/BaseModalContent/BaseModalContent.cjs.js"),y=require("../Notifications/BaseModal/BaseModalHeader/BaseModalHeader.cjs.js"),A=require("../Notifications/NotificationProvider/NotificationContext.cjs.js"),N=require("../Notifications/SlideInModal/SlideInModal.cjs.js"),H=require("../Form/Checkbox/Checkbox.cjs.js"),R=require("../Form/Fieldset/Fieldset.cjs.js"),L=require("../Form/Form.cjs.js"),v=require("../Form/FormControl/FormControl.cjs.js"),w=require("../Form/FormGroup/FormGroup.cjs.js"),O=require("../Form/FormHelperText/FormHelperText.cjs.js"),E=require("../Form/Input/Input.cjs.js"),U=require("../Form/Wrapper/InputWrapper/InputWrapper.cjs.js"),_=require("../Form/Label/Label.cjs.js"),z=require("../Form/Radio/Radio.cjs.js"),J=require("../Form/Wrapper/RadioWrapper/RadioWrapper.cjs.js"),K=require("../Form/Select/SingleSelect/Select.cjs.js"),Q=require("../Form/Select/MultiSelect/MultiSelect.cjs.js"),V=require("../Form/Select/SingleSelect/Option.cjs.js"),X=require("../Form/Select/MultiSelect/MultiOption.cjs.js"),Y=require("../Form/Textarea/Textarea.cjs.js"),Z=require("../Form/Toggle/Toggle.cjs.js"),$=require("../Form/Wrapper/CheckboxWrapper/CheckboxWrapper.cjs.js"),ee=require("../Form/Wrapper/TextareaWrapper/TextareaWrapper.cjs.js"),re=require("../Form/Wrapper/SelectWrapper/SelectWrapper.cjs.js"),te=require("../Form/FileUpload/FileUpload.cjs.js"),oe=require("../Form/Wrapper/MultiSelectWrapper/MultiSelectWrapper.cjs.js"),se=require("../Layout/ContentHeader/ContentHeader.cjs.js"),ie=require("../Layout/FormPage/FormWithStepper/FormStepper/FormStepper.cjs.js"),ae=require("../Layout/FormPage/FormWithStepper/FormSection/FormSection.cjs.js"),pe=require("../Layout/FormPage/FormWithStepper/FormWithStepper.cjs.js"),le=require("../DataGrid/DataGrid.cjs.js"),ne=require("../DataGrid/DataGridBody/DataGridRow/DataGridRow.cjs.js"),ce=require("../DataGrid/DataGridBody/DataGridDrawer/DataGridDrawerItem.cjs.js"),ue=require("../DataGrid/DataGridBody/DataGridCell/DataGridCell.cjs.js"),je=require("../Notifications/Banner/Banner.cjs.js"),xe=require("../admin/layout/MicrofrontendContainer/MicrofrontendContainer.cjs.js");exports.BaseStyling=e.BaseStyling,exports.Button=r.Button,exports.Breadcrumbs=t.Breadcrumbs,exports.ContextMenu=o.ContextMenu,exports.ContextMenuItem=s.ContextMenuItem,exports.Link=i.Link,exports.Icon=a.Icon,Object.defineProperty(exports,"Icons",{enumerable:!0,get:function(){return a.Icons}}),exports.IconButton=p.IconButton,exports.Tab=l.Tab,exports.Tabs=n.Tabs,exports.Tag=c.Tag,exports.TextEllipsis=u.TextEllipsis,exports.Tile=j.Tile,exports.Tiles=x.Tiles,exports.Tooltip=d.Tooltip,exports.Typography=m.Typography,exports.ProgressBar=q.ProgressBar,exports.Skeleton=F.Skeleton,exports.Stepper=S.Stepper,exports.Pagination=M.Pagination,exports.useRepeater=C.useRepeater,exports.useFullHeightCollapse=T.useFullHeightCollapse,exports.usePosition=g.usePosition,exports.useDebouncedCallback=B.useDebouncedCallback,exports.debounce=D.debounce,exports.generateID=D.generateID,exports.throttle=D.throttle,exports.Modal=W.BaseModal,exports.useAlert=b.useAlert,exports.AlertProvider=I.AlertProvider,exports.AlertItem=h.AlertItem,exports.Dialog=G.Dialog,exports.DiscardChangesModal=f.DiscardChangesModal,exports.ModalActions=k.BaseModalActions,exports.ModalContent=P.BaseModalContent,exports.ModalHeader=y.BaseModalHeader,exports.NotificationProvider=A.NotificationProvider,exports.useNotificationContext=A.useNotificationContext,exports.SlideInModal=N.SlideInModal,exports.Checkbox=H.Checkbox,exports.Fieldset=R.Fieldset,exports.Form=L.Form,exports.FormControl=v.FormControl,exports.FormGroup=w.FormGroup,exports.FormHelperText=O.FormHelperText,exports.Input=E.Input,exports.InputWrapper=U.InputWrapper,exports.Label=_.Label,exports.Radio=z.Radio,exports.RadioWrapper=J.RadioWrapper,exports.Select=K.Select,exports.MultiSelect=Q.MultiSelect,exports.Option=V.Option,exports.MultiOption=X.MultiOption,exports.Textarea=Y.Textarea,exports.Toggle=Z.Toggle,exports.CheckboxWrapper=$.CheckboxWrapper,exports.TextareaWrapper=ee.TextareaWrapper,exports.SelectWrapper=re.SelectWrapper,exports.FileUpload=te.FileUpload,exports.MultiSelectWrapper=oe.MultiSelectWrapper,exports.ContentHeader=se.ContentHeader,exports.FormStepper=ie.FormStepper,exports.FormSection=ae.FormSection,exports.FormWithStepper=pe.FormWithStepper,exports.DataGrid=le.DataGrid,exports.DataGridRow=ne.DataGridRow,exports.DataGridDrawerItem=ce.DataGridDrawerItem,exports.DataGridCell=ue.DataGridCell,exports.Banner=je.Banner,exports.MicrofrontendContainer=xe.MicrofrontendContainer;
+"use strict";var e=require("../_BaseStyling_/BaseStyling.cjs.js"),r=require("../Button/Button.cjs.js"),t=require("../Breadcrumbs/Breadcrumbs.cjs.js"),o=require("../ContextMenu/ContextMenu.cjs.js"),s=require("../ContextMenu/ContextMenuItem.cjs.js"),i=require("../Link/Link.cjs.js"),a=require("../Icon/Icon.cjs.js"),p=require("../Button/IconButton.cjs.js"),l=require("../Tabs/Tab.cjs.js"),n=require("../Tabs/Tabs.cjs.js"),c=require("../Tag/Tag.cjs.js"),u=require("../TextEllipsis/TextEllipsis.cjs.js"),j=require("../Tiles/Tile.cjs.js"),d=require("../Tiles/Tiles.cjs.js"),x=require("../Tooltip/Tooltip.cjs.js"),m=require("../Typography/Typography.cjs.js"),q=require("../ProgressBar/ProgressBar.cjs.js"),F=require("../Skeleton/Skeleton.cjs.js"),S=require("../Stepper/Stepper.cjs.js"),M=require("../Pagination/Pagination.cjs.js"),C=require("./hooks/useRepeater.cjs.js"),T=require("./hooks/useFullHeightCollapse.cjs.js"),g=require("./hooks/usePosition.cjs.js"),B=require("./hooks/useDebouncedCallback.cjs.js"),D=require("./util/helper.cjs.js"),W=require("../Notifications/BaseModal/BaseModal.cjs.js"),b=require("../Notifications/Alert/useAlert.cjs.js"),I=require("../Notifications/Alert/AlertProvider/AlertProvider.cjs.js"),h=require("../Notifications/Alert/AlertItem/AlertItem.cjs.js"),G=require("../Notifications/Dialog/Dialog.cjs.js"),f=require("../Notifications/DiscardChangesModal/DiscardChangesModal.cjs.js"),k=require("../Notifications/BaseModal/BaseModalActions/BaseModalActions.cjs.js"),P=require("../Notifications/BaseModal/BaseModalContent/BaseModalContent.cjs.js"),y=require("../Notifications/BaseModal/BaseModalHeader/BaseModalHeader.cjs.js"),A=require("../Notifications/NotificationProvider/NotificationContext.cjs.js"),N=require("../Notifications/SlideInModal/SlideInModal.cjs.js"),R=require("../Form/Checkbox/Checkbox.cjs.js"),H=require("../Form/Fieldset/Fieldset.cjs.js"),L=require("../Form/Form.cjs.js"),v=require("../Form/FormControl/FormControl.cjs.js"),w=require("../Form/FormGroup/FormGroup.cjs.js"),O=require("../Form/FormHelperText/FormHelperText.cjs.js"),E=require("../Form/Input/Input.cjs.js"),U=require("../Form/Wrapper/InputWrapper/InputWrapper.cjs.js"),_=require("../Form/Label/Label.cjs.js"),z=require("../Form/Radio/Radio.cjs.js"),J=require("../Form/Wrapper/RadioWrapper/RadioWrapper.cjs.js"),K=require("../Form/Select/SingleSelect/Select.cjs.js"),Q=require("../Form/Select/MultiSelect/MultiSelect.cjs.js"),V=require("../Form/Select/SingleSelect/Option.cjs.js"),X=require("../Form/Select/MultiSelect/MultiOption.cjs.js"),Y=require("../Form/Textarea/Textarea.cjs.js"),Z=require("../Form/Toggle/Toggle.cjs.js"),$=require("../Form/Wrapper/CheckboxWrapper/CheckboxWrapper.cjs.js"),ee=require("../Form/Wrapper/TextareaWrapper/TextareaWrapper.cjs.js"),re=require("../Form/Wrapper/SelectWrapper/SelectWrapper.cjs.js"),te=require("../Form/FileUpload/FileUpload.cjs.js"),oe=require("../Form/Wrapper/MultiSelectWrapper/MultiSelectWrapper.cjs.js"),se=require("../Layout/ContentHeader/ContentHeader.cjs.js"),ie=require("../Layout/FormPage/FormWithStepper/FormStepper/FormStepper.cjs.js"),ae=require("../Layout/FormPage/FormWithStepper/FormSection/FormSection.cjs.js"),pe=require("../Layout/FormPage/FormWithStepper/FormWithStepper.cjs.js"),le=require("../DataGrid/DataGrid.cjs.js"),ne=require("../DataGrid/DataGridBody/DataGridRow/DataGridRow.cjs.js"),ce=require("../DataGrid/DataGridBody/DataGridDrawer/DataGridDrawerItem.cjs.js"),ue=require("../DataGrid/DataGridBody/DataGridCell/DataGridCell.cjs.js"),je=require("../DataGrid/DataGridFilters/useFiltersReducer.cjs.js"),de=require("../Notifications/Banner/Banner.cjs.js"),xe=require("../admin/layout/MicrofrontendContainer/MicrofrontendContainer.cjs.js");exports.BaseStyling=e.BaseStyling,exports.Button=r.Button,exports.Breadcrumbs=t.Breadcrumbs,exports.ContextMenu=o.ContextMenu,exports.ContextMenuItem=s.ContextMenuItem,exports.Link=i.Link,exports.Icon=a.Icon,Object.defineProperty(exports,"Icons",{enumerable:!0,get:function(){return a.Icons}}),exports.IconButton=p.IconButton,exports.Tab=l.Tab,exports.Tabs=n.Tabs,exports.Tag=c.Tag,exports.TextEllipsis=u.TextEllipsis,exports.Tile=j.Tile,exports.Tiles=d.Tiles,exports.Tooltip=x.Tooltip,exports.Typography=m.Typography,exports.ProgressBar=q.ProgressBar,exports.Skeleton=F.Skeleton,exports.Stepper=S.Stepper,exports.Pagination=M.Pagination,exports.useRepeater=C.useRepeater,exports.useFullHeightCollapse=T.useFullHeightCollapse,exports.usePosition=g.usePosition,exports.useDebouncedCallback=B.useDebouncedCallback,exports.debounce=D.debounce,exports.generateID=D.generateID,exports.throttle=D.throttle,exports.Modal=W.BaseModal,exports.useAlert=b.useAlert,exports.AlertProvider=I.AlertProvider,exports.AlertItem=h.AlertItem,exports.Dialog=G.Dialog,exports.DiscardChangesModal=f.DiscardChangesModal,exports.ModalActions=k.BaseModalActions,exports.ModalContent=P.BaseModalContent,exports.ModalHeader=y.BaseModalHeader,exports.NotificationProvider=A.NotificationProvider,exports.useNotificationContext=A.useNotificationContext,exports.SlideInModal=N.SlideInModal,exports.Checkbox=R.Checkbox,exports.Fieldset=H.Fieldset,exports.Form=L.Form,exports.FormControl=v.FormControl,exports.FormGroup=w.FormGroup,exports.FormHelperText=O.FormHelperText,exports.Input=E.Input,exports.InputWrapper=U.InputWrapper,exports.Label=_.Label,exports.Radio=z.Radio,exports.RadioWrapper=J.RadioWrapper,exports.Select=K.Select,exports.MultiSelect=Q.MultiSelect,exports.Option=V.Option,exports.MultiOption=X.MultiOption,exports.Textarea=Y.Textarea,exports.Toggle=Z.Toggle,exports.CheckboxWrapper=$.CheckboxWrapper,exports.TextareaWrapper=ee.TextareaWrapper,exports.SelectWrapper=re.SelectWrapper,exports.FileUpload=te.FileUpload,exports.MultiSelectWrapper=oe.MultiSelectWrapper,exports.ContentHeader=se.ContentHeader,exports.FormStepper=ie.FormStepper,exports.FormSection=ae.FormSection,exports.FormWithStepper=pe.FormWithStepper,exports.DataGrid=le.DataGrid,exports.DataGridRow=ne.DataGridRow,exports.DataGridDrawerItem=ce.DataGridDrawerItem,exports.DataGridCell=ue.DataGridCell,exports.useFiltersReducer=je.useFiltersReducer,exports.Banner=de.Banner,exports.MicrofrontendContainer=xe.MicrofrontendContainer;
 //# sourceMappingURL=index.cjs.js.map

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

@@ -126,6 +126,7 @@ 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 { useFiltersReducer } from "./components/DataGrid/DataGridFilters/useFiltersReducer";
 export { Banner } from "./components/Notifications/Banner/Banner";
 export type { Props as BannerProps } from "./components/Notifications/Banner/Banner";
 /** Admin */

package/dist/esm/DataGrid/DataGrid.esm.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, Fragment } from 'react';
 import classes from './DataGrid.module.scss.esm.js';
 import { DataGridHeader } from './DataGridHeader/DataGridHeader.esm.js';
 import { DataGridActions } from './DataGridActions/DataGridActions.esm.js';
@@ -6,6 +6,8 @@ import { DataGridBody } from './DataGridBody/DataGridBody.esm.js';
 import { Pagination } from '../Pagination/Pagination.esm.js';
 import { useSpacing } from '../src/hooks/useSpacing.esm.js';
 import { DataGridToolbar } from './DataGridFilters/DataGridToolbar.esm.js';
+import { DataGridToolbarWrapper } from './DataGridFilters/DataGridToolbarWrapper.esm.js';
+import { DataGridSearchbar } from './DataGridFilters/DataGridSearchbar.esm.js';
 
 /*
  * Copyright 2022 OneWelcome B.V.
@@ -22,7 +24,7 @@ import { DataGridToolbar } from './DataGridFilters/DataGridToolbar.esm.js';
  *    See the License for the specific language governing permissions and
  *    limitations under the License.
  */
-const DataGridInner = ({ children, data, initialSort, onSort, headers, actions = {}, paginationProps, disableContextMenuColumn, enableExpandableRow, filters, isLoading, enableMultiSorting, emptyLabel, spacing, style, ...rest }, ref) => {
+const DataGridInner = ({ children, data, initialSort, onSort, headers, actions = {}, paginationProps, disableContextMenuColumn, enableExpandableRow, filters, search, toolbarButtons, isLoading, enableMultiSorting, emptyLabel, spacing, style, ...rest }, ref) => {
     var _a;
     if (!headers) {
         throw new Error("Headers definition has to be provided");
@@ -64,14 +66,16 @@ const DataGridInner = ({ children, data, initialSort, onSort, headers, actions =
             paddingTop: styleWithSpacing === null || styleWithSpacing === void 0 ? void 0 : styleWithSpacing.paddingTop,
             paddingBottom: styleWithSpacing === null || styleWithSpacing === void 0 ? void 0 : styleWithSpacing.paddingBottom
         } },
-        (filters === null || filters === void 0 ? void 0 : filters.enable) ? (React.createElement(DataGridToolbar, { ...filters.filtersProps })) : (React.createElement(DataGridActions, { ...actions, style: {
+        filters || search || toolbarButtons ? (React.createElement(DataGridToolbarWrapper, { filters: React.createElement(Fragment, null,
+                search && React.createElement(DataGridSearchbar, { ...search }),
+                filters && React.createElement(DataGridToolbar, { ...filters })), buttons: toolbarButtons })) : (React.createElement(DataGridActions, { ...actions, style: {
                 paddingLeft: styleWithSpacing === null || styleWithSpacing === void 0 ? void 0 : styleWithSpacing.paddingLeft,
                 paddingRight: styleWithSpacing === null || styleWithSpacing === void 0 ? void 0 : styleWithSpacing.paddingRight
             }, headers: internalHeaders, onColumnToggled: onColumnToggled })),
         React.createElement("div", { className: classes["table-wrapper"] },
             React.createElement("table", { className: classes["table"] },
                 React.createElement(DataGridHeader, { headers: internalHeaders, initialSort: initialSort, onSort: onSort, disableContextMenuColumn: disableContextMenuColumn, enableExpandableRow: enableExpandableRow, enableMultiSorting: enableMultiSorting, spacing: styleWithSpacing }),
-                React.createElement(DataGridBody, { data: data, headers: internalHeaders, isLoading: isLoading, disableContextMenuColumn: disableContextMenuColumn, emptyLabel: emptyLabel, spacing: styleWithSpacing }, children))),
+                React.createElement(DataGridBody, { data: data, headers: internalHeaders, isLoading: isLoading, disableContextMenuColumn: disableContextMenuColumn, emptyLabel: emptyLabel, spacing: styleWithSpacing, searchValue: search === null || search === void 0 ? void 0 : search.initialSearchValue }, children))),
         paginationProps && !isLoading && (React.createElement(Pagination, { ...paginationProps, style: {
                 ...paginationProps.style,
                 paddingLeft: styleWithSpacing === null || styleWithSpacing === void 0 ? void 0 : styleWithSpacing.paddingLeft,

package/dist/esm/DataGrid/DataGrid.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataGrid.esm.js","sources":["../../../../../src/components/DataGrid/DataGrid.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 React, { ComponentPropsWithRef, ReactElement, Ref, useEffect, useState } from \"react\";\nimport { Props as ButtonProps } from \"../Button/Button\";\nimport classes from \"./DataGrid.module.scss\";\nimport { DataGridHeader } from \"./DataGridHeader/DataGridHeader\";\nimport { DataGridActions } from \"./DataGridActions/DataGridActions\";\nimport { DataGridBody } from \"./DataGridBody/DataGridBody\";\nimport { HeaderCell, OnSortFunction, Sort } from \"./datagrid.interfaces\";\nimport { Pagination, Props as PaginationProps } from \"../Pagination/Pagination\";\nimport { Spacing, useSpacing } from \"../../hooks/useSpacing\";\nimport { DataGridToolbar, DataGridToolbarProps } from \"./DataGridFilters/DataGridToolbar\";\n\nexport interface Props<T> extends Omit<ComponentPropsWithRef<\"div\">, \"children\"> {\n  children: ({ item, index }: { item: T; index: number }) => ReactElement;\n  data?: T[];\n  initialSort?: Sort;\n  onSort?: OnSortFunction;\n  headers: HeaderCell[];\n  actions?: {\n    enableAddBtn?: boolean;\n    enableColumnsBtn?: boolean;\n    enableSearchBtn?: boolean;\n    addBtnProps?: ButtonProps;\n    columnsBtnProps?: ButtonProps;\n    searchBtnProps?: ButtonProps;\n    searchIconBtnProps?: ButtonProps;\n  };\n  emptyLabel?: string;\n  paginationProps?: PaginationProps;\n  disableContextMenuColumn?: boolean;\n  enableExpandableRow?: boolean;\n  filters?: {\n    enable: boolean;\n    filtersProps: DataGridToolbarProps;\n  };\n  isLoading?: boolean;\n  enableMultiSorting?: boolean;\n  spacing?: Spacing;\n}\n\nconst DataGridInner = <T extends {}>(\n  {\n    children,\n    data,\n    initialSort,\n    onSort,\n    headers,\n    actions = {},\n    paginationProps,\n    disableContextMenuColumn,\n    enableExpandableRow,\n    filters,\n    isLoading,\n    enableMultiSorting,\n    emptyLabel,\n    spacing,\n    style,\n    ...rest\n  }: Props<T>,\n  ref: Ref<HTMLDivElement>\n) => {\n  if (!headers) {\n    throw new Error(\"Headers definition has to be provided\");\n  }\n  if (!children) {\n    throw new Error(\"DataGridBody should be provided with a template how to render rows\");\n  }\n\n  const [internalHeaders, setInternalHeaders] = useState(headers);\n  const styleWithSpacing = useSpacing(spacing, style);\n\n  useEffect(() => setInternalHeaders(headers), [headers]);\n\n  const onColumnToggled = (colName: string) => {\n    setInternalHeaders(\n      internalHeaders.map(item =>\n        item.name !== colName ? item : { ...item, hidden: !item.hidden }\n      )\n    );\n  };\n\n  if (styleWithSpacing?.padding) {\n    const splitPaddings = styleWithSpacing.padding.toString().split(\" \");\n\n    let paddingLeftIndex: number = 0;\n\n    if (splitPaddings.length >= 2) {\n      paddingLeftIndex = 1;\n    }\n    if (splitPaddings.length === 4) {\n      paddingLeftIndex = 3;\n    }\n\n    Object.defineProperties(styleWithSpacing, {\n      paddingTop: {\n        value: splitPaddings[0]\n      },\n      paddingRight: {\n        value: splitPaddings[splitPaddings.length - 1 > 0 ? 1 : 0]\n      },\n      paddingBottom: {\n        value: splitPaddings[splitPaddings.length / 3 >= 1 ? 2 : 0]\n      },\n      paddingLeft: {\n        value: splitPaddings[paddingLeftIndex]\n      }\n    });\n  }\n\n  return (\n    <div\n      {...rest}\n      className={classes[\"grid-wrapper\"]}\n      ref={ref}\n      style={{\n        paddingTop: styleWithSpacing?.paddingTop,\n        paddingBottom: styleWithSpacing?.paddingBottom\n      }}\n    >\n      {filters?.enable ? (\n        <DataGridToolbar {...filters.filtersProps} />\n      ) : (\n        <DataGridActions\n          {...actions}\n          style={{\n            paddingLeft: styleWithSpacing?.paddingLeft,\n            paddingRight: styleWithSpacing?.paddingRight\n          }}\n          headers={internalHeaders}\n          onColumnToggled={onColumnToggled}\n        />\n      )}\n\n      <div className={classes[\"table-wrapper\"]}>\n        <table className={classes[\"table\"]}>\n          <DataGridHeader\n            headers={internalHeaders}\n            initialSort={initialSort}\n            onSort={onSort}\n            disableContextMenuColumn={disableContextMenuColumn}\n            enableExpandableRow={enableExpandableRow}\n            enableMultiSorting={enableMultiSorting}\n            spacing={styleWithSpacing}\n          />\n          <DataGridBody\n            data={data}\n            headers={internalHeaders}\n            isLoading={isLoading}\n            disableContextMenuColumn={disableContextMenuColumn}\n            emptyLabel={emptyLabel}\n            spacing={styleWithSpacing}\n          >\n            {children}\n          </DataGridBody>\n        </table>\n      </div>\n      {paginationProps && !isLoading && (\n        <Pagination\n          {...paginationProps}\n          style={{\n            ...paginationProps.style,\n            paddingLeft: styleWithSpacing?.paddingLeft,\n            paddingRight: styleWithSpacing?.paddingRight\n          }}\n          className={`${classes[\"pagination\"]} ${paginationProps.className ?? \"\"}`}\n        />\n      )}\n    </div>\n  );\n};\n\nexport const DataGrid = React.forwardRef(DataGridInner) as <T extends {}>(\n  p: Props<T> & { ref?: Ref<HTMLDivElement> }\n) => ReactElement;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"DataGrid.esm.js","sources":["../../../../../src/components/DataGrid/DataGrid.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 React, {\n  ComponentPropsWithRef,\n  Fragment,\n  ReactElement,\n  Ref,\n  useEffect,\n  useState\n} from \"react\";\nimport { Button, Props as ButtonProps } from \"../Button/Button\";\nimport classes from \"./DataGrid.module.scss\";\nimport { DataGridHeader } from \"./DataGridHeader/DataGridHeader\";\nimport { DataGridActions } from \"./DataGridActions/DataGridActions\";\nimport { DataGridBody } from \"./DataGridBody/DataGridBody\";\nimport { HeaderCell, OnSortFunction, Sort } from \"./datagrid.interfaces\";\nimport { Pagination, Props as PaginationProps } from \"../Pagination/Pagination\";\nimport { Spacing, useSpacing } from \"../../hooks/useSpacing\";\nimport { DataGridToolbar, DataGridToolbarProps } from \"./DataGridFilters/DataGridToolbar\";\nimport { DataGridToolbarWrapper } from \"./DataGridFilters/DataGridToolbarWrapper\";\nimport { DataGridSearchbar, DataGridSearchbarProps } from \"./DataGridFilters/DataGridSearchbar\";\n\nexport interface Props<T> extends Omit<ComponentPropsWithRef<\"div\">, \"children\"> {\n  children: ({ item, index }: { item: T; index: number }) => ReactElement;\n  data?: T[];\n  initialSort?: Sort;\n  onSort?: OnSortFunction;\n  headers: HeaderCell[];\n  /**\n   * @deprecated use the `toolbarButtons` prop instead\n   */\n  actions?: {\n    enableAddBtn?: boolean;\n    enableColumnsBtn?: boolean;\n    enableSearchBtn?: boolean;\n    addBtnProps?: ButtonProps;\n    columnsBtnProps?: ButtonProps;\n    searchBtnProps?: ButtonProps;\n    searchIconBtnProps?: ButtonProps;\n  };\n  emptyLabel?: string;\n  paginationProps?: PaginationProps;\n  disableContextMenuColumn?: boolean;\n  enableExpandableRow?: boolean;\n  filters?: DataGridToolbarProps;\n  search?: DataGridSearchbarProps;\n  toolbarButtons?:\n    | ReactElement<ButtonProps, typeof Button>\n    | ReactElement<ButtonProps, typeof Button>[];\n  isLoading?: boolean;\n  enableMultiSorting?: boolean;\n  spacing?: Spacing;\n}\n\nconst DataGridInner = <T extends {}>(\n  {\n    children,\n    data,\n    initialSort,\n    onSort,\n    headers,\n    actions = {},\n    paginationProps,\n    disableContextMenuColumn,\n    enableExpandableRow,\n    filters,\n    search,\n    toolbarButtons,\n    isLoading,\n    enableMultiSorting,\n    emptyLabel,\n    spacing,\n    style,\n    ...rest\n  }: Props<T>,\n  ref: Ref<HTMLDivElement>\n) => {\n  if (!headers) {\n    throw new Error(\"Headers definition has to be provided\");\n  }\n  if (!children) {\n    throw new Error(\"DataGridBody should be provided with a template how to render rows\");\n  }\n\n  const [internalHeaders, setInternalHeaders] = useState(headers);\n  const styleWithSpacing = useSpacing(spacing, style);\n\n  useEffect(() => setInternalHeaders(headers), [headers]);\n\n  const onColumnToggled = (colName: string) => {\n    setInternalHeaders(\n      internalHeaders.map(item =>\n        item.name !== colName ? item : { ...item, hidden: !item.hidden }\n      )\n    );\n  };\n\n  if (styleWithSpacing?.padding) {\n    const splitPaddings = styleWithSpacing.padding.toString().split(\" \");\n\n    let paddingLeftIndex: number = 0;\n\n    if (splitPaddings.length >= 2) {\n      paddingLeftIndex = 1;\n    }\n    if (splitPaddings.length === 4) {\n      paddingLeftIndex = 3;\n    }\n\n    Object.defineProperties(styleWithSpacing, {\n      paddingTop: {\n        value: splitPaddings[0]\n      },\n      paddingRight: {\n        value: splitPaddings[splitPaddings.length - 1 > 0 ? 1 : 0]\n      },\n      paddingBottom: {\n        value: splitPaddings[splitPaddings.length / 3 >= 1 ? 2 : 0]\n      },\n      paddingLeft: {\n        value: splitPaddings[paddingLeftIndex]\n      }\n    });\n  }\n\n  return (\n    <div\n      {...rest}\n      className={classes[\"grid-wrapper\"]}\n      ref={ref}\n      style={{\n        paddingTop: styleWithSpacing?.paddingTop,\n        paddingBottom: styleWithSpacing?.paddingBottom\n      }}\n    >\n      {filters || search || toolbarButtons ? (\n        <DataGridToolbarWrapper\n          filters={\n            <Fragment>\n              {search && <DataGridSearchbar {...search} />}\n              {filters && <DataGridToolbar {...filters} />}\n            </Fragment>\n          }\n          buttons={toolbarButtons}\n        />\n      ) : (\n        <DataGridActions\n          {...actions}\n          style={{\n            paddingLeft: styleWithSpacing?.paddingLeft,\n            paddingRight: styleWithSpacing?.paddingRight\n          }}\n          headers={internalHeaders}\n          onColumnToggled={onColumnToggled}\n        />\n      )}\n\n      <div className={classes[\"table-wrapper\"]}>\n        <table className={classes[\"table\"]}>\n          <DataGridHeader\n            headers={internalHeaders}\n            initialSort={initialSort}\n            onSort={onSort}\n            disableContextMenuColumn={disableContextMenuColumn}\n            enableExpandableRow={enableExpandableRow}\n            enableMultiSorting={enableMultiSorting}\n            spacing={styleWithSpacing}\n          />\n          <DataGridBody\n            data={data}\n            headers={internalHeaders}\n            isLoading={isLoading}\n            disableContextMenuColumn={disableContextMenuColumn}\n            emptyLabel={emptyLabel}\n            spacing={styleWithSpacing}\n            searchValue={search?.initialSearchValue}\n          >\n            {children}\n          </DataGridBody>\n        </table>\n      </div>\n      {paginationProps && !isLoading && (\n        <Pagination\n          {...paginationProps}\n          style={{\n            ...paginationProps.style,\n            paddingLeft: styleWithSpacing?.paddingLeft,\n            paddingRight: styleWithSpacing?.paddingRight\n          }}\n          className={`${classes[\"pagination\"]} ${paginationProps.className ?? \"\"}`}\n        />\n      )}\n    </div>\n  );\n};\n\nexport const DataGrid = React.forwardRef(DataGridInner) as <T extends {}>(\n  p: Props<T> & { ref?: Ref<HTMLDivElement> }\n) => ReactElement;\n"],"names":[],"mappings":"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"}

package/dist/esm/DataGrid/DataGridBody/DataGridBody.esm.js

@@ -20,7 +20,7 @@ import { Typography } from '../../Typography/Typography.esm.js';
  *    limitations under the License.
  */
 const skeletonLoadingRows = 9;
-const DataGridBodyInner = ({ children, data, headers, isLoading, disableContextMenuColumn, emptyLabel, spacing, ...rest }, ref) => {
+const DataGridBodyInner = ({ children, data, headers, isLoading, disableContextMenuColumn, emptyLabel, spacing, searchValue, ...rest }, ref) => {
     const renderContent = () => {
         const visibleColumns = headers.filter(header => !header.hidden).length;
         if (isLoading) {
@@ -36,6 +36,7 @@ const DataGridBodyInner = ({ children, data, headers, isLoading, disableContextM
         }
         return data === null || data === void 0 ? void 0 : data.map((item, index) => {
             return React.cloneElement(children({ item, index }), {
+                searchValue: searchValue,
                 headers,
                 spacing,
                 disableContextMenuColumn

package/dist/esm/DataGrid/DataGridBody/DataGridBody.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataGridBody.esm.js","sources":["../../../../../../src/components/DataGrid/DataGridBody/DataGridBody.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 React, { ComponentPropsWithRef, ReactElement, Ref } from \"react\";\nimport { HeaderCell } from \"../datagrid.interfaces\";\nimport { DataGridCell } from \"./DataGridCell/DataGridCell\";\nimport { DataGridRow } from \"./DataGridRow/DataGridRow\";\nimport classes from \"./DataGridBody.module.scss\";\nimport { Typography } from \"../../Typography/Typography\";\n\nexport interface Props<T> extends Omit<ComponentPropsWithRef<\"tbody\">, \"children\"> {\n  children: ({ item, index }: { item: T; index: number }) => ReactElement;\n  data?: T[];\n  headers: HeaderCell[];\n  isLoading?: boolean;\n  disableContextMenuColumn?: boolean;\n  emptyLabel?: string;\n  spacing?: React.CSSProperties;\n}\n\nconst skeletonLoadingRows = 9;\n\nconst DataGridBodyInner = <T extends {}>(\n  {\n    children,\n    data,\n    headers,\n    isLoading,\n    disableContextMenuColumn,\n    emptyLabel,\n    spacing,\n    ...rest\n  }: Props<T>,\n  ref: Ref<HTMLTableSectionElement>\n) => {\n  const renderContent = () => {\n    const visibleColumns = headers.filter(header => !header.hidden).length;\n    if (isLoading) {\n      return Array.from(Array(skeletonLoadingRows)).map((_, rowIdx) => (\n        <DataGridRow key={rowIdx} isLoading>\n          {Array.from(Array(visibleColumns)).map((__, colIdx) => (\n            <DataGridCell key={colIdx} isLoading></DataGridCell>\n          ))}\n          {!disableContextMenuColumn && <DataGridCell></DataGridCell>}\n        </DataGridRow>\n      ));\n    }\n\n    const emptyData = !data || data.length === 0;\n    if (emptyData) {\n      return (\n        <tr>\n          <td\n            className={classes[\"empty\"]}\n            colSpan={visibleColumns + (disableContextMenuColumn ? 0 : 1)}\n          >\n            <Typography variant=\"body\" spacing={{ margin: 0 }}>\n              {emptyLabel}\n            </Typography>\n          </td>\n        </tr>\n      );\n    }\n\n    return data?.map((item, index) => {\n      return React.cloneElement(children({ item, index }), {\n        headers,\n        spacing,\n        disableContextMenuColumn\n      });\n    });\n  };\n\n  return (\n    <tbody {...rest} ref={ref}>\n      {renderContent()}\n    </tbody>\n  );\n};\n\nexport const DataGridBody = React.forwardRef(DataGridBodyInner) as <T extends {}>(\n  p: Props<T> & { ref?: Ref<HTMLTableSectionElement> }\n) => ReactElement;\n"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;;;;;;AAcG;AAmBH,MAAM,mBAAmB,GAAG,CAAC,CAAC;AAE9B,MAAM,iBAAiB,GAAG,CACxB,EACE,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,SAAS,EACT,wBAAwB,EACxB,UAAU,EACV,OAAO,EACP,GAAG,IAAI,EACE,EACX,GAAiC,KAC/B;IACF,MAAM,aAAa,GAAG,MAAK;AACzB,QAAA,MAAM,cAAc,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC;QACvE,IAAI,SAAS,EAAE;YACb,OAAO,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,MAAM,MAC1D,KAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EAAC,GAAG,EAAE,MAAM,EAAE,SAAS,EAAA,IAAA,EAAA;AAChC,gBAAA,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,MAAM,MAChD,KAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EAAC,GAAG,EAAE,MAAM,EAAE,SAAS,EAAA,IAAA,EAAA,CAAgB,CACrD,CAAC;gBACD,CAAC,wBAAwB,IAAI,KAAC,CAAA,aAAA,CAAA,YAAY,OAAgB,CAC/C,CACf,CAAC,CAAC;SACJ;QAED,MAAM,SAAS,GAAG,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,CAAC;QAC7C,IAAI,SAAS,EAAE;AACb,YAAA,QACE,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA;gBACE,KACE,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,SAAS,EAAE,OAAO,CAAC,OAAO,CAAC,EAC3B,OAAO,EAAE,cAAc,IAAI,wBAAwB,GAAG,CAAC,GAAG,CAAC,CAAC,EAAA;AAE5D,oBAAA,KAAA,CAAA,aAAA,CAAC,UAAU,EAAC,EAAA,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,EAC9C,EAAA,UAAU,CACA,CACV,CACF,EACL;SACH;AAED,QAAA,OAAO,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAJ,IAAI,CAAE,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,KAAI;AAC/B,YAAA,OAAO,KAAK,CAAC,YAAY,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE;gBACnD,OAAO;gBACP,OAAO;gBACP,wBAAwB;AACzB,aAAA,CAAC,CAAC;AACL,SAAC,CAAC,CAAC;AACL,KAAC,CAAC;AAEF,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,GAAW,IAAI,EAAE,GAAG,EAAE,GAAG,EAAA,EACtB,aAAa,EAAE,CACV,EACR;AACJ,CAAC,CAAC;AAEW,MAAA,YAAY,GAAG,KAAK,CAAC,UAAU,CAAC,iBAAiB;;;;"}
+{"version":3,"file":"DataGridBody.esm.js","sources":["../../../../../../src/components/DataGrid/DataGridBody/DataGridBody.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 React, { ComponentPropsWithRef, ReactElement, Ref } from \"react\";\nimport { HeaderCell } from \"../datagrid.interfaces\";\nimport { DataGridCell } from \"./DataGridCell/DataGridCell\";\nimport { DataGridRow } from \"./DataGridRow/DataGridRow\";\nimport classes from \"./DataGridBody.module.scss\";\nimport { Typography } from \"../../Typography/Typography\";\n\nexport interface Props<T> extends Omit<ComponentPropsWithRef<\"tbody\">, \"children\"> {\n  children: ({ item, index }: { item: T; index: number }) => ReactElement;\n  data?: T[];\n  headers: HeaderCell[];\n  isLoading?: boolean;\n  disableContextMenuColumn?: boolean;\n  searchValue?: string;\n  emptyLabel?: string;\n  spacing?: React.CSSProperties;\n}\n\nconst skeletonLoadingRows = 9;\n\nconst DataGridBodyInner = <T extends {}>(\n  {\n    children,\n    data,\n    headers,\n    isLoading,\n    disableContextMenuColumn,\n    emptyLabel,\n    spacing,\n    searchValue,\n    ...rest\n  }: Props<T>,\n  ref: Ref<HTMLTableSectionElement>\n) => {\n  const renderContent = () => {\n    const visibleColumns = headers.filter(header => !header.hidden).length;\n    if (isLoading) {\n      return Array.from(Array(skeletonLoadingRows)).map((_, rowIdx) => (\n        <DataGridRow key={rowIdx} isLoading>\n          {Array.from(Array(visibleColumns)).map((__, colIdx) => (\n            <DataGridCell key={colIdx} isLoading></DataGridCell>\n          ))}\n          {!disableContextMenuColumn && <DataGridCell></DataGridCell>}\n        </DataGridRow>\n      ));\n    }\n\n    const emptyData = !data || data.length === 0;\n    if (emptyData) {\n      return (\n        <tr>\n          <td\n            className={classes[\"empty\"]}\n            colSpan={visibleColumns + (disableContextMenuColumn ? 0 : 1)}\n          >\n            <Typography variant=\"body\" spacing={{ margin: 0 }}>\n              {emptyLabel}\n            </Typography>\n          </td>\n        </tr>\n      );\n    }\n\n    return data?.map((item, index) => {\n      return React.cloneElement(children({ item, index }), {\n        searchValue: searchValue,\n        headers,\n        spacing,\n        disableContextMenuColumn\n      });\n    });\n  };\n\n  return (\n    <tbody {...rest} ref={ref}>\n      {renderContent()}\n    </tbody>\n  );\n};\n\nexport const DataGridBody = React.forwardRef(DataGridBodyInner) as <T extends {}>(\n  p: Props<T> & { ref?: Ref<HTMLTableSectionElement> }\n) => ReactElement;\n"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;;;;;;AAcG;AAoBH,MAAM,mBAAmB,GAAG,CAAC,CAAC;AAE9B,MAAM,iBAAiB,GAAG,CACxB,EACE,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,SAAS,EACT,wBAAwB,EACxB,UAAU,EACV,OAAO,EACP,WAAW,EACX,GAAG,IAAI,EACE,EACX,GAAiC,KAC/B;IACF,MAAM,aAAa,GAAG,MAAK;AACzB,QAAA,MAAM,cAAc,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC;QACvE,IAAI,SAAS,EAAE;YACb,OAAO,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,MAAM,MAC1D,KAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EAAC,GAAG,EAAE,MAAM,EAAE,SAAS,EAAA,IAAA,EAAA;AAChC,gBAAA,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,MAAM,MAChD,KAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EAAC,GAAG,EAAE,MAAM,EAAE,SAAS,EAAA,IAAA,EAAA,CAAgB,CACrD,CAAC;gBACD,CAAC,wBAAwB,IAAI,KAAC,CAAA,aAAA,CAAA,YAAY,OAAgB,CAC/C,CACf,CAAC,CAAC;SACJ;QAED,MAAM,SAAS,GAAG,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,CAAC;QAC7C,IAAI,SAAS,EAAE;AACb,YAAA,QACE,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA;gBACE,KACE,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,SAAS,EAAE,OAAO,CAAC,OAAO,CAAC,EAC3B,OAAO,EAAE,cAAc,IAAI,wBAAwB,GAAG,CAAC,GAAG,CAAC,CAAC,EAAA;AAE5D,oBAAA,KAAA,CAAA,aAAA,CAAC,UAAU,EAAC,EAAA,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,EAC9C,EAAA,UAAU,CACA,CACV,CACF,EACL;SACH;AAED,QAAA,OAAO,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAJ,IAAI,CAAE,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,KAAI;AAC/B,YAAA,OAAO,KAAK,CAAC,YAAY,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE;AACnD,gBAAA,WAAW,EAAE,WAAW;gBACxB,OAAO;gBACP,OAAO;gBACP,wBAAwB;AACzB,aAAA,CAAC,CAAC;AACL,SAAC,CAAC,CAAC;AACL,KAAC,CAAC;AAEF,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,GAAW,IAAI,EAAE,GAAG,EAAE,GAAG,EAAA,EACtB,aAAa,EAAE,CACV,EACR;AACJ,CAAC,CAAC;AAEW,MAAA,YAAY,GAAG,KAAK,CAAC,UAAU,CAAC,iBAAiB;;;;"}

package/dist/esm/DataGrid/DataGridBody/DataGridCell/DataGridCell.esm.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import { Typography } from '../../../Typography/Typography.esm.js';
 import classes from './DataGridCell.module.scss.esm.js';
 
@@ -17,7 +17,7 @@ import classes from './DataGridCell.module.scss.esm.js';
  *    See the License for the specific language governing permissions and
  *    limitations under the License.
  */
-const DataGridCellComponent = ({ children, className, isLoading, spacing, cellIndex, columnLength, disableContextMenuColumn, ...rest }, ref) => {
+const DataGridCellComponent = ({ children, className, isLoading, spacing, searchValue, cellIndex, columnLength, disableContextMenuColumn, ...rest }, ref) => {
     let cellStyle = {};
     if (cellIndex === 0) {
         cellStyle.paddingLeft = spacing === null || spacing === void 0 ? void 0 : spacing.paddingLeft;
@@ -26,9 +26,28 @@ const DataGridCellComponent = ({ children, className, isLoading, spacing, cellIn
         (columnLength && cellIndex === columnLength - 1 && disableContextMenuColumn)) {
         cellStyle.paddingRight = spacing === null || spacing === void 0 ? void 0 : spacing.paddingRight;
     }
+    //NOTE: we might want to migrate to Highlight API once it's supported by Firefox
+    const renderContent = () => {
+        var _a;
+        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((_a = matchingSequence === null || matchingSequence === void 0 ? void 0 : matchingSequence[0]) !== null && _a !== void 0 ? _a : "");
+            return parts.map((part, i) => {
+                if (i === parts.length - 1)
+                    return React.createElement(Fragment, { key: `${part}-${i}` }, part);
+                return (React.createElement(Fragment, { key: `${part}-${i}` },
+                    part,
+                    React.createElement("mark", { "data-testid": `${matchingSequence}-mark` }, matchingSequence)));
+            });
+        }
+        return children;
+    };
     return (React.createElement("td", { ...rest, ref: ref, style: { ...rest.style, ...cellStyle }, className: `${classes["cell"]} ${className !== null && className !== void 0 ? className : ""}` },
         isLoading && React.createElement("div", { className: classes["loading"], "aria-busy": "true", "aria-live": "polite" }),
-        !isLoading && (React.createElement(Typography, { className: classes["text"], variant: "body", tag: "span" }, children))));
+        !isLoading && (React.createElement(Typography, { className: classes["text"], variant: "body", tag: "span" }, renderContent()))));
 };
 const DataGridCell = React.forwardRef(DataGridCellComponent);
 

package/dist/esm/DataGrid/DataGridBody/DataGridCell/DataGridCell.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataGridCell.esm.js","sources":["../../../../../../../src/components/DataGrid/DataGridBody/DataGridCell/DataGridCell.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 React, { ForwardRefRenderFunction, ComponentPropsWithRef, ReactElement } from \"react\";\nimport { Typography } from \"../../../Typography/Typography\";\nimport classes from \"./DataGridCell.module.scss\";\n\nexport interface Props extends ComponentPropsWithRef<\"td\"> {\n  children?: ReactElement | string | number;\n  isLoading?: boolean;\n  spacing?: React.CSSProperties;\n  cellIndex?: number;\n  columnLength?: number;\n  disableContextMenuColumn?: boolean;\n}\n\nconst DataGridCellComponent: ForwardRefRenderFunction<HTMLTableCellElement, Props> = (\n  {\n    children,\n    className,\n    isLoading,\n    spacing,\n    cellIndex,\n    columnLength,\n    disableContextMenuColumn,\n    ...rest\n  }: Props,\n  ref\n) => {\n  let cellStyle: React.CSSProperties = {};\n\n  if (cellIndex === 0) {\n    cellStyle.paddingLeft = spacing?.paddingLeft;\n  }\n  if (\n    (cellIndex === columnLength && !disableContextMenuColumn) ||\n    (columnLength && cellIndex === columnLength - 1 && disableContextMenuColumn)\n  ) {\n    cellStyle.paddingRight = spacing?.paddingRight;\n  }\n\n  return (\n    <td\n      {...rest}\n      ref={ref}\n      style={{ ...rest.style, ...cellStyle }}\n      className={`${classes[\"cell\"]} ${className ?? \"\"}`}\n    >\n      {isLoading && <div className={classes[\"loading\"]} aria-busy=\"true\" aria-live=\"polite\"></div>}\n      {!isLoading && (\n        <Typography className={classes[\"text\"]} variant=\"body\" tag=\"span\">\n          {children}\n        </Typography>\n      )}\n    </td>\n  );\n};\n\nexport const DataGridCell = React.forwardRef(DataGridCellComponent);\n"],"names":[],"mappings":";;;;AAAA;;;;;;;;;;;;;;AAcG;AAeH,MAAM,qBAAqB,GAA0D,CACnF,EACE,QAAQ,EACR,SAAS,EACT,SAAS,EACT,OAAO,EACP,SAAS,EACT,YAAY,EACZ,wBAAwB,EACxB,GAAG,IAAI,EACD,EACR,GAAG,KACD;IACF,IAAI,SAAS,GAAwB,EAAE,CAAC;AAExC,IAAA,IAAI,SAAS,KAAK,CAAC,EAAE;QACnB,SAAS,CAAC,WAAW,GAAG,OAAO,KAAA,IAAA,IAAP,OAAO,KAAP,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,OAAO,CAAE,WAAW,CAAC;KAC9C;AACD,IAAA,IACE,CAAC,SAAS,KAAK,YAAY,IAAI,CAAC,wBAAwB;SACvD,YAAY,IAAI,SAAS,KAAK,YAAY,GAAG,CAAC,IAAI,wBAAwB,CAAC,EAC5E;QACA,SAAS,CAAC,YAAY,GAAG,OAAO,KAAA,IAAA,IAAP,OAAO,KAAP,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,OAAO,CAAE,YAAY,CAAC;KAChD;AAED,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,GACM,IAAI,EACR,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE,GAAG,SAAS,EAAE,EACtC,SAAS,EAAE,CAAG,EAAA,OAAO,CAAC,MAAM,CAAC,CAAI,CAAA,EAAA,SAAS,aAAT,SAAS,KAAA,KAAA,CAAA,GAAT,SAAS,GAAI,EAAE,CAAE,CAAA,EAAA;AAEjD,QAAA,SAAS,IAAI,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,OAAO,CAAC,SAAS,CAAC,EAAY,WAAA,EAAA,MAAM,EAAW,WAAA,EAAA,QAAQ,EAAO,CAAA;QAC3F,CAAC,SAAS,KACT,KAAC,CAAA,aAAA,CAAA,UAAU,EAAC,EAAA,SAAS,EAAE,OAAO,CAAC,MAAM,CAAC,EAAE,OAAO,EAAC,MAAM,EAAC,GAAG,EAAC,MAAM,EAC9D,EAAA,QAAQ,CACE,CACd,CACE,EACL;AACJ,CAAC,CAAC;AAEW,MAAA,YAAY,GAAG,KAAK,CAAC,UAAU,CAAC,qBAAqB;;;;"}
+{"version":3,"file":"DataGridCell.esm.js","sources":["../../../../../../../src/components/DataGrid/DataGridBody/DataGridCell/DataGridCell.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 React, {\n  ForwardRefRenderFunction,\n  ComponentPropsWithRef,\n  ReactElement,\n  Fragment\n} from \"react\";\nimport { Typography } from \"../../../Typography/Typography\";\nimport classes from \"./DataGridCell.module.scss\";\n\nexport interface Props extends ComponentPropsWithRef<\"td\"> {\n  children?: ReactElement | string | number;\n  isLoading?: boolean;\n  spacing?: React.CSSProperties;\n  searchValue?: string;\n  cellIndex?: number;\n  columnLength?: number;\n  disableContextMenuColumn?: boolean;\n}\n\nconst DataGridCellComponent: ForwardRefRenderFunction<HTMLTableCellElement, Props> = (\n  {\n    children,\n    className,\n    isLoading,\n    spacing,\n    searchValue,\n    cellIndex,\n    columnLength,\n    disableContextMenuColumn,\n    ...rest\n  }: Props,\n  ref\n) => {\n  let cellStyle: React.CSSProperties = {};\n\n  if (cellIndex === 0) {\n    cellStyle.paddingLeft = spacing?.paddingLeft;\n  }\n  if (\n    (cellIndex === columnLength && !disableContextMenuColumn) ||\n    (columnLength && cellIndex === columnLength - 1 && disableContextMenuColumn)\n  ) {\n    cellStyle.paddingRight = spacing?.paddingRight;\n  }\n\n  //NOTE: we might want to migrate to Highlight API once it's supported by Firefox\n  const renderContent = () => {\n    if (typeof children === \"string\" && searchValue) {\n      if (!children.toLowerCase().includes(searchValue.toLowerCase())) {\n        return children;\n      }\n\n      const matchingSequence = new RegExp(searchValue, \"i\").exec(children);\n\n      const parts = children.split(matchingSequence?.[0] ?? \"\");\n      return parts.map((part, i) => {\n        if (i === parts.length - 1) return <Fragment key={`${part}-${i}`}>{part}</Fragment>;\n\n        return (\n          <Fragment key={`${part}-${i}`}>\n            {part}\n            <mark data-testid={`${matchingSequence}-mark`}>{matchingSequence}</mark>\n          </Fragment>\n        );\n      });\n    }\n\n    return children;\n  };\n\n  return (\n    <td\n      {...rest}\n      ref={ref}\n      style={{ ...rest.style, ...cellStyle }}\n      className={`${classes[\"cell\"]} ${className ?? \"\"}`}\n    >\n      {isLoading && <div className={classes[\"loading\"]} aria-busy=\"true\" aria-live=\"polite\"></div>}\n      {!isLoading && (\n        <Typography className={classes[\"text\"]} variant=\"body\" tag=\"span\">\n          {renderContent()}\n        </Typography>\n      )}\n    </td>\n  );\n};\n\nexport const DataGridCell = React.forwardRef(DataGridCellComponent);\n"],"names":[],"mappings":"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"}

package/dist/esm/DataGrid/DataGridBody/DataGridRow/DataGridRow.esm.js

@@ -21,12 +21,13 @@ import { generateID } from '../../../src/util/helper.esm.js';
  *    See the License for the specific language governing permissions and
  *    limitations under the License.
  */
-const DataGridRowComponent = ({ children, className, headers, isLoading, spacing, expandableRowProps, disableContextMenuColumn, ...rest }, ref) => {
+const DataGridRowComponent = ({ children, className, headers, searchValue, isLoading, spacing, expandableRowProps, disableContextMenuColumn, ...rest }, ref) => {
     const { enableExpandableRow = false, expandButtonId = `ID-${generateID()}`, expandButtonTitle = "Expand row", drawerId = `ID-${generateID()}`, expandableRowContent } = expandableRowProps || {};
     const [isRowExpanded, setIsRowExpanded] = useState(false);
     const visibleCells = React.Children.map(children, (child, index) => {
         if (child) {
             const cellWithSpacing = React.cloneElement(child, {
+                searchValue,
                 spacing: spacing,
                 cellIndex: index,
                 columnLength: headers === null || headers === void 0 ? void 0 : headers.length,

package/dist/esm/DataGrid/DataGridBody/DataGridRow/DataGridRow.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataGridRow.esm.js","sources":["../../../../../../../src/components/DataGrid/DataGridBody/DataGridRow/DataGridRow.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 React, { ComponentPropsWithRef, useState, Fragment, ForwardRefRenderFunction } from \"react\";\nimport { HeaderCell } from \"../../datagrid.interfaces\";\nimport classes from \"./DataGridRow.module.scss\";\nimport { IconButton } from \"../../../Button/IconButton\";\nimport { Icon, Icons } from \"../../../Icon/Icon\";\nimport { DataGridCell } from \"../DataGridCell/DataGridCell\";\nimport { DataGridDrawer } from \"../DataGridDrawer/DataGridDrawer\";\nimport { generateID } from \"../../../../util/helper\";\n\nexport interface Props extends ComponentPropsWithRef<\"tr\"> {\n  headers?: HeaderCell[];\n  isLoading?: boolean;\n  spacing?: React.CSSProperties;\n  disableContextMenuColumn?: boolean;\n  expandableRowProps?: {\n    enableExpandableRow: boolean;\n    expandableRowContent: React.ReactNode;\n    expandButtonTitle?: string;\n    expandButtonId?: string;\n    drawerId?: string;\n  };\n}\n\nconst DataGridRowComponent: ForwardRefRenderFunction<HTMLTableRowElement, Props> = (\n  {\n    children,\n    className,\n    headers,\n    isLoading,\n    spacing,\n    expandableRowProps,\n    disableContextMenuColumn,\n    ...rest\n  },\n  ref\n) => {\n  const {\n    enableExpandableRow = false,\n    expandButtonId = `ID-${generateID()}`,\n    expandButtonTitle = \"Expand row\",\n    drawerId = `ID-${generateID()}`,\n    expandableRowContent\n  } = expandableRowProps || {};\n  const [isRowExpanded, setIsRowExpanded] = useState(false);\n  const visibleCells = React.Children.map(children as React.ReactElement[], (child, index) => {\n    if (child) {\n      const cellWithSpacing = React.cloneElement(child, {\n        spacing: spacing,\n        cellIndex: index,\n        columnLength: headers?.length,\n        disableContextMenuColumn\n      });\n\n      const visible = headers && headers.length > index ? !headers[index].hidden : true;\n      return visible && cellWithSpacing;\n    }\n    return null;\n  });\n\n  const classNames = [classes[\"row\"]];\n  className && classNames.push(className);\n  enableExpandableRow\n    ? !isRowExpanded && classNames.push(classes[\"border-drawer\"])\n    : classNames.push(classes[\"border\"]);\n  isLoading && classNames.push(classes[\"loading\"]);\n\n  return (\n    <Fragment>\n      <tr {...rest} ref={ref} className={classNames.join(\" \")}>\n        {enableExpandableRow && (\n          <DataGridCell\n            className={classes[\"expand-button-cell\"]}\n            onClick={() => setIsRowExpanded(!isRowExpanded)}\n            style={{ width: \"1px\" }}\n          >\n            <IconButton\n              id={expandButtonId}\n              title={expandButtonTitle}\n              aria-expanded={isRowExpanded}\n              aria-controls={drawerId}\n            >\n              <Icon size=\"0.75rem\" icon={isRowExpanded ? Icons.ChevronUp : Icons.ChevronDown} />\n            </IconButton>\n          </DataGridCell>\n        )}\n        {visibleCells}\n      </tr>\n      {enableExpandableRow && (\n        <tr className={`${classes[\"row\"]} ${isRowExpanded ? classes[\"border-drawer\"] : \"\"}`}>\n          <td colSpan={visibleCells.length + 1}>\n            <DataGridDrawer\n              id={drawerId}\n              role=\"region\"\n              aria-labelledby={expandButtonId}\n              isExpanded={isRowExpanded}\n            >\n              {expandableRowContent}\n            </DataGridDrawer>\n          </td>\n        </tr>\n      )}\n    </Fragment>\n  );\n};\n\nexport const DataGridRow = React.forwardRef(DataGridRowComponent);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"DataGridRow.esm.js","sources":["../../../../../../../src/components/DataGrid/DataGridBody/DataGridRow/DataGridRow.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 React, { ComponentPropsWithRef, useState, Fragment, ForwardRefRenderFunction } from \"react\";\nimport { HeaderCell } from \"../../datagrid.interfaces\";\nimport classes from \"./DataGridRow.module.scss\";\nimport { IconButton } from \"../../../Button/IconButton\";\nimport { Icon, Icons } from \"../../../Icon/Icon\";\nimport { DataGridCell } from \"../DataGridCell/DataGridCell\";\nimport { DataGridDrawer } from \"../DataGridDrawer/DataGridDrawer\";\nimport { generateID } from \"../../../../util/helper\";\n\nexport interface Props extends ComponentPropsWithRef<\"tr\"> {\n  headers?: HeaderCell[];\n  isLoading?: boolean;\n  spacing?: React.CSSProperties;\n  searchValue?: string;\n  disableContextMenuColumn?: boolean;\n  expandableRowProps?: {\n    enableExpandableRow: boolean;\n    expandableRowContent: React.ReactNode;\n    expandButtonTitle?: string;\n    expandButtonId?: string;\n    drawerId?: string;\n  };\n}\n\nconst DataGridRowComponent: ForwardRefRenderFunction<HTMLTableRowElement, Props> = (\n  {\n    children,\n    className,\n    headers,\n    searchValue,\n    isLoading,\n    spacing,\n    expandableRowProps,\n    disableContextMenuColumn,\n    ...rest\n  },\n  ref\n) => {\n  const {\n    enableExpandableRow = false,\n    expandButtonId = `ID-${generateID()}`,\n    expandButtonTitle = \"Expand row\",\n    drawerId = `ID-${generateID()}`,\n    expandableRowContent\n  } = expandableRowProps || {};\n  const [isRowExpanded, setIsRowExpanded] = useState(false);\n  const visibleCells = React.Children.map(children as React.ReactElement[], (child, index) => {\n    if (child) {\n      const cellWithSpacing = React.cloneElement(child, {\n        searchValue,\n        spacing: spacing,\n        cellIndex: index,\n        columnLength: headers?.length,\n        disableContextMenuColumn\n      });\n\n      const visible = headers && headers.length > index ? !headers[index].hidden : true;\n      return visible && cellWithSpacing;\n    }\n    return null;\n  });\n\n  const classNames = [classes[\"row\"]];\n  className && classNames.push(className);\n  enableExpandableRow\n    ? !isRowExpanded && classNames.push(classes[\"border-drawer\"])\n    : classNames.push(classes[\"border\"]);\n  isLoading && classNames.push(classes[\"loading\"]);\n\n  return (\n    <Fragment>\n      <tr {...rest} ref={ref} className={classNames.join(\" \")}>\n        {enableExpandableRow && (\n          <DataGridCell\n            className={classes[\"expand-button-cell\"]}\n            onClick={() => setIsRowExpanded(!isRowExpanded)}\n            style={{ width: \"1px\" }}\n          >\n            <IconButton\n              id={expandButtonId}\n              title={expandButtonTitle}\n              aria-expanded={isRowExpanded}\n              aria-controls={drawerId}\n            >\n              <Icon size=\"0.75rem\" icon={isRowExpanded ? Icons.ChevronUp : Icons.ChevronDown} />\n            </IconButton>\n          </DataGridCell>\n        )}\n        {visibleCells}\n      </tr>\n      {enableExpandableRow && (\n        <tr className={`${classes[\"row\"]} ${isRowExpanded ? classes[\"border-drawer\"] : \"\"}`}>\n          <td colSpan={visibleCells.length + 1}>\n            <DataGridDrawer\n              id={drawerId}\n              role=\"region\"\n              aria-labelledby={expandButtonId}\n              isExpanded={isRowExpanded}\n            >\n              {expandableRowContent}\n            </DataGridDrawer>\n          </td>\n        </tr>\n      )}\n    </Fragment>\n  );\n};\n\nexport const DataGridRow = React.forwardRef(DataGridRowComponent);\n"],"names":[],"mappings":"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"}