@onewelcome/react-lib-components 8.0.0 → 8.1.1

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,5 +1,5 @@
 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";
@@ -14,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;
@@ -29,6 +32,7 @@ export interface Props<T> extends Omit<ComponentPropsWithRef<"div">, "children">
     enableExpandableRow?: boolean;
     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/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/DataGridToolbar.d.ts

@@ -2,6 +2,7 @@ import React from "react";
 import { DataGridColumnMetadata, Filter, FiltersTranslations } from "./DataGridFilters.interfaces";
 export interface DataGridToolbarProps {
     columnsMetadata: DataGridColumnMetadata[];
+    customEditTagContent?: React.ReactElement;
     filterValues?: Filter[];
     translations?: FiltersTranslations;
     onFilterAdd?: (filter: Filter) => void;
@@ -9,4 +10,4 @@ export interface DataGridToolbarProps {
     onFilterDelete?: (id: string) => void;
     onFiltersClear?: () => void;
 }
-export declare const DataGridToolbar: ({ columnsMetadata, filterValues, translations, onFilterAdd, onFilterEdit, onFilterDelete, onFiltersClear }: DataGridToolbarProps) => React.JSX.Element;
+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

@@ -1,7 +1,10 @@
-import React, { ComponentPropsWithRef, ForwardRefRenderFunction } from "react";
-type Props = ComponentPropsWithRef<"div">;
+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<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
-}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+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,9 @@ export declare enum Icons {
     FileAltIcon = "file-alt",
     AddCircle = "add-circle",
     ZoomIn = "zoom-in",
-    ZoomOut = "zoom-out"
+    ZoomOut = "zoom-out",
+    ArrowUp = "arrow-up",
+    ExternalLink = "external-link"
 }
 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';
@@ -24,7 +24,7 @@ import { DataGridSearchbar } from './DataGridFilters/DataGridSearchbar.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, search, 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");
@@ -66,9 +66,9 @@ 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 || search ? (React.createElement(DataGridToolbarWrapper, null,
-            search && React.createElement(DataGridSearchbar, { ...search }),
-            filters && React.createElement(DataGridToolbar, { ...filters }))) : (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 })),

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\";\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  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  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    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 ? (\n        <DataGridToolbarWrapper>\n          {search && <DataGridSearchbar {...search} />}\n          {filters && <DataGridToolbar {...filters} />}\n        </DataGridToolbarWrapper>\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":";;;;;;;;;;;AAAA;;;;;;;;;;;;;;AAcG;AAyCH,MAAM,aAAa,GAAG,CACpB,EACE,QAAQ,EACR,IAAI,EACJ,WAAW,EACX,MAAM,EACN,OAAO,EACP,OAAO,GAAG,EAAE,EACZ,eAAe,EACf,wBAAwB,EACxB,mBAAmB,EACnB,OAAO,EACP,MAAM,EACN,SAAS,EACT,kBAAkB,EAClB,UAAU,EACV,OAAO,EACP,KAAK,EACL,GAAG,IAAI,EACE,EACX,GAAwB,KACtB;;IACF,IAAI,CAAC,OAAO,EAAE;AACZ,QAAA,MAAM,IAAI,KAAK,CAAC,uCAAuC,CAAC,CAAC;KAC1D;IACD,IAAI,CAAC,QAAQ,EAAE;AACb,QAAA,MAAM,IAAI,KAAK,CAAC,oEAAoE,CAAC,CAAC;KACvF;IAED,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC;IAChE,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;AAEpD,IAAA,SAAS,CAAC,MAAM,kBAAkB,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;AAExD,IAAA,MAAM,eAAe,GAAG,CAAC,OAAe,KAAI;AAC1C,QAAA,kBAAkB,CAChB,eAAe,CAAC,GAAG,CAAC,IAAI,IACtB,IAAI,CAAC,IAAI,KAAK,OAAO,GAAG,IAAI,GAAG,EAAE,GAAG,IAAI,EAAE,MAAM,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,CACjE,CACF,CAAC;AACJ,KAAC,CAAC;IAEF,IAAI,gBAAgB,aAAhB,gBAAgB,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAhB,gBAAgB,CAAE,OAAO,EAAE;AAC7B,QAAA,MAAM,aAAa,GAAG,gBAAgB,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAErE,IAAI,gBAAgB,GAAW,CAAC,CAAC;AAEjC,QAAA,IAAI,aAAa,CAAC,MAAM,IAAI,CAAC,EAAE;YAC7B,gBAAgB,GAAG,CAAC,CAAC;SACtB;AACD,QAAA,IAAI,aAAa,CAAC,MAAM,KAAK,CAAC,EAAE;YAC9B,gBAAgB,GAAG,CAAC,CAAC;SACtB;AAED,QAAA,MAAM,CAAC,gBAAgB,CAAC,gBAAgB,EAAE;AACxC,YAAA,UAAU,EAAE;AACV,gBAAA,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC;AACxB,aAAA;AACD,YAAA,YAAY,EAAE;AACZ,gBAAA,KAAK,EAAE,aAAa,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAC3D,aAAA;AACD,YAAA,aAAa,EAAE;AACb,gBAAA,KAAK,EAAE,aAAa,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAC5D,aAAA;AACD,YAAA,WAAW,EAAE;AACX,gBAAA,KAAK,EAAE,aAAa,CAAC,gBAAgB,CAAC;AACvC,aAAA;AACF,SAAA,CAAC,CAAC;KACJ;AAED,IAAA,QACE,KACM,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAA,IAAI,EACR,SAAS,EAAE,OAAO,CAAC,cAAc,CAAC,EAClC,GAAG,EAAE,GAAG,EACR,KAAK,EAAE;AACL,YAAA,UAAU,EAAE,gBAAgB,KAAA,IAAA,IAAhB,gBAAgB,KAAhB,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,gBAAgB,CAAE,UAAU;AACxC,YAAA,aAAa,EAAE,gBAAgB,KAAA,IAAA,IAAhB,gBAAgB,KAAhB,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,gBAAgB,CAAE,aAAa;AAC/C,SAAA,EAAA;AAEA,QAAA,OAAO,IAAI,MAAM,IAChB,oBAAC,sBAAsB,EAAA,IAAA;AACpB,YAAA,MAAM,IAAI,KAAA,CAAA,aAAA,CAAC,iBAAiB,EAAA,EAAA,GAAK,MAAM,EAAI,CAAA;AAC3C,YAAA,OAAO,IAAI,KAAC,CAAA,aAAA,CAAA,eAAe,OAAK,OAAO,EAAA,CAAI,CACrB,KAEzB,KAAC,CAAA,aAAA,CAAA,eAAe,OACV,OAAO,EACX,KAAK,EAAE;AACL,gBAAA,WAAW,EAAE,gBAAgB,KAAA,IAAA,IAAhB,gBAAgB,KAAhB,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,gBAAgB,CAAE,WAAW;AAC1C,gBAAA,YAAY,EAAE,gBAAgB,KAAA,IAAA,IAAhB,gBAAgB,KAAhB,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,gBAAgB,CAAE,YAAY;aAC7C,EACD,OAAO,EAAE,eAAe,EACxB,eAAe,EAAE,eAAe,GAChC,CACH;AAED,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,OAAO,CAAC,eAAe,CAAC,EAAA;AACtC,YAAA,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,SAAS,EAAE,OAAO,CAAC,OAAO,CAAC,EAAA;AAChC,gBAAA,KAAA,CAAA,aAAA,CAAC,cAAc,EAAA,EACb,OAAO,EAAE,eAAe,EACxB,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE,MAAM,EACd,wBAAwB,EAAE,wBAAwB,EAClD,mBAAmB,EAAE,mBAAmB,EACxC,kBAAkB,EAAE,kBAAkB,EACtC,OAAO,EAAE,gBAAgB,EACzB,CAAA;AACF,gBAAA,KAAA,CAAA,aAAA,CAAC,YAAY,EACX,EAAA,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,eAAe,EACxB,SAAS,EAAE,SAAS,EACpB,wBAAwB,EAAE,wBAAwB,EAClD,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,gBAAgB,EACzB,WAAW,EAAE,MAAM,KAAA,IAAA,IAAN,MAAM,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAN,MAAM,CAAE,kBAAkB,IAEtC,QAAQ,CACI,CACT,CACJ;QACL,eAAe,IAAI,CAAC,SAAS,KAC5B,KAAC,CAAA,aAAA,CAAA,UAAU,EACL,EAAA,GAAA,eAAe,EACnB,KAAK,EAAE;gBACL,GAAG,eAAe,CAAC,KAAK;AACxB,gBAAA,WAAW,EAAE,gBAAgB,KAAA,IAAA,IAAhB,gBAAgB,KAAhB,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,gBAAgB,CAAE,WAAW;AAC1C,gBAAA,YAAY,EAAE,gBAAgB,KAAA,IAAA,IAAhB,gBAAgB,KAAhB,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,gBAAgB,CAAE,YAAY;AAC7C,aAAA,EACD,SAAS,EAAE,CAAA,EAAG,OAAO,CAAC,YAAY,CAAC,CAAI,CAAA,EAAA,CAAA,EAAA,GAAA,eAAe,CAAC,SAAS,mCAAI,EAAE,CAAA,CAAE,GACxE,CACH,CACG,EACN;AACJ,CAAC,CAAC;AAEW,MAAA,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,aAAa;;;;"}
+{"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/DataGridFilters/DataGridFilter.esm.js

@@ -1,4 +1,4 @@
-import React, { createRef, useState, Fragment } from 'react';
+import React, { useRef, useState, Fragment } from 'react';
 import { createPortal } from 'react-dom';
 import { useGetDomRoot } from '../../src/hooks/useGetDomRoot.esm.js';
 import { generateID } from '../../src/util/helper.esm.js';
@@ -21,26 +21,20 @@ import { useDataGridFilter } from './DataGridFilterService.esm.js';
  *    See the License for the specific language governing permissions and
  *    limitations under the License.
  */
-const DataGridFilter = ({ mode, filter, domRoot, columnsMetadata, dispatch, onFilterAdd, onFilterEdit, onFilterDelete, tagTranslations, popoverTranslations }) => {
-    const wrappingDivRef = createRef();
+const DataGridFilter = ({ mode, filter, domRoot, columnsMetadata, onFilterAdd, onFilterEdit, onFilterDelete, tagTranslations, popoverTranslations, customEditTagContent }) => {
+    const wrappingDivRef = useRef(null);
+    const triggerRef = useRef(null);
+    const popoverRef = useRef(null);
     const [filterOpen, setFilterOpen] = useState(false);
     const { root } = useGetDomRoot(domRoot, wrappingDivRef);
     const { resetFields, operator, setOperator, operators, setOperators, column, setColumn, values, setValues, pickedValues, setPickedValues, initialiseFilterValues } = useDataGridFilter(mode, columnsMetadata);
     const onFilterSubmit = () => {
         if (mode === "ADD") {
             const id = generateID();
-            dispatch({
-                type: "add",
-                payload: { id, column, operator, value: pickedValues }
-            });
             onFilterAdd && onFilterAdd({ id, column, operator, value: pickedValues });
         }
         else if (mode === "EDIT" && filter) {
             const { id } = filter;
-            dispatch({
-                type: "edit",
-                payload: { id, column, operator, value: pickedValues }
-            });
             onFilterEdit && onFilterEdit({ id, column, operator, value: pickedValues });
         }
         resetFields();
@@ -51,7 +45,6 @@ const DataGridFilter = ({ mode, filter, domRoot, columnsMetadata, dispatch, onFi
             return;
         }
         const { id } = filter;
-        dispatch({ type: "remove", payload: { id } });
         onFilterDelete && onFilterDelete(id);
         resetFields();
         setFilterOpen(false);
@@ -63,8 +56,8 @@ const DataGridFilter = ({ mode, filter, domRoot, columnsMetadata, dispatch, onFi
         }
     };
     return (React.createElement(Fragment, null,
-        React.createElement(DataGridFilterTag, { mode: mode, onFilterOpen: onFilterOpen, onFilterRemove: onFilterRemove, triggerRef: wrappingDivRef, filter: filter }),
-        createPortal(React.createElement(DataGridFilterPopover, { anchorRef: wrappingDivRef, isOpen: filterOpen, column: column, columnsMetadata: columnsMetadata, values: values, pickedValues: pickedValues, operator: operator, operators: operators, onFilterSubmit: onFilterSubmit, resetFields: resetFields, setFilterOpen: setFilterOpen, setColumn: setColumn, setOperator: setOperator, setOperators: setOperators, setValues: setValues, setPickedValues: setPickedValues }), root)));
+        React.createElement(DataGridFilterTag, { mode: mode, onFilterOpen: onFilterOpen, onFilterRemove: onFilterRemove, triggerRef: triggerRef, ref: wrappingDivRef, filter: filter, translations: tagTranslations, customEditTagContent: customEditTagContent }),
+        createPortal(React.createElement(DataGridFilterPopover, { popoverRef: popoverRef, anchorRef: wrappingDivRef, isOpen: filterOpen, translations: popoverTranslations, column: column, columnsMetadata: columnsMetadata, values: values, pickedValues: pickedValues, operator: operator, operators: operators, onFilterSubmit: onFilterSubmit, resetFields: resetFields, setFilterOpen: setFilterOpen, setColumn: setColumn, setOperator: setOperator, setOperators: setOperators, setValues: setValues, setPickedValues: setPickedValues }), root)));
 };
 
 export { DataGridFilter };

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

@@ -1 +1 @@
-{"version":3,"file":"DataGridFilter.esm.js","sources":["../../../../../../src/components/DataGrid/DataGridFilters/DataGridFilter.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, { Fragment, createRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useGetDomRoot } from \"../../../hooks/useGetDomRoot\";\nimport {\n  DataGridColumnMetadata,\n  Filter,\n  FilterEditorMode,\n  FiltersAction,\n  PopoverTranslations,\n  TagTranslations\n} from \"./DataGridFilters.interfaces\";\nimport { generateID } from \"../../../util/helper\";\nimport { DataGridFilterTag } from \"./DataGridFilterTag\";\nimport { DataGridFilterPopover } from \"./DataGridFilterPopover\";\nimport { useDataGridFilter } from \"./DataGridFilterService\";\n\nexport type Props = {\n  mode: FilterEditorMode;\n  domRoot?: HTMLElement;\n  filter?: Filter;\n  columnsMetadata: DataGridColumnMetadata[];\n  dispatch: React.Dispatch<FiltersAction>;\n  onFilterAdd?: (filter: Filter) => void;\n  onFilterEdit?: (filter: Filter) => void;\n  onFilterDelete?: (id: string) => void;\n  tagTranslations?: TagTranslations;\n  popoverTranslations?: PopoverTranslations;\n};\n\nexport const DataGridFilter = ({\n  mode,\n  filter,\n  domRoot,\n  columnsMetadata,\n  dispatch,\n  onFilterAdd,\n  onFilterEdit,\n  onFilterDelete,\n  tagTranslations,\n  popoverTranslations\n}: Props) => {\n  const wrappingDivRef = createRef<HTMLDivElement>();\n  const [filterOpen, setFilterOpen] = useState(false);\n  const { root } = useGetDomRoot(domRoot, wrappingDivRef);\n  const {\n    resetFields,\n    operator,\n    setOperator,\n    operators,\n    setOperators,\n    column,\n    setColumn,\n    values,\n    setValues,\n    pickedValues,\n    setPickedValues,\n    initialiseFilterValues\n  } = useDataGridFilter(mode, columnsMetadata);\n\n  const onFilterSubmit = () => {\n    if (mode === \"ADD\") {\n      const id = generateID();\n\n      dispatch({\n        type: \"add\",\n        payload: { id, column, operator, value: pickedValues }\n      });\n      onFilterAdd && onFilterAdd({ id, column, operator, value: pickedValues });\n    } else if (mode === \"EDIT\" && filter) {\n      const { id } = filter;\n\n      dispatch({\n        type: \"edit\",\n        payload: { id, column, operator, value: pickedValues }\n      });\n      onFilterEdit && onFilterEdit({ id, column, operator, value: pickedValues });\n    }\n\n    resetFields();\n    setFilterOpen(false);\n  };\n\n  const onFilterRemove = () => {\n    if (!filter) {\n      return;\n    }\n    const { id } = filter;\n\n    dispatch({ type: \"remove\", payload: { id } });\n    onFilterDelete && onFilterDelete(id);\n\n    resetFields();\n    setFilterOpen(false);\n  };\n  const onFilterOpen = () => {\n    setFilterOpen(!filterOpen);\n    if (!filterOpen) {\n      initialiseFilterValues(filter);\n    }\n  };\n\n  return (\n    <Fragment>\n      <DataGridFilterTag\n        mode={mode}\n        onFilterOpen={onFilterOpen}\n        onFilterRemove={onFilterRemove}\n        triggerRef={wrappingDivRef}\n        filter={filter}\n      />\n      {createPortal(\n        <DataGridFilterPopover\n          anchorRef={wrappingDivRef}\n          isOpen={filterOpen}\n          column={column}\n          columnsMetadata={columnsMetadata}\n          values={values}\n          pickedValues={pickedValues}\n          operator={operator}\n          operators={operators}\n          onFilterSubmit={onFilterSubmit}\n          resetFields={resetFields}\n          setFilterOpen={setFilterOpen}\n          setColumn={setColumn}\n          setOperator={setOperator}\n          setOperators={setOperators}\n          setValues={setValues}\n          setPickedValues={setPickedValues}\n        />,\n        root\n      )}\n    </Fragment>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAAA;;;;;;;;;;;;;;AAcG;AA+BU,MAAA,cAAc,GAAG,CAAC,EAC7B,IAAI,EACJ,MAAM,EACN,OAAO,EACP,eAAe,EACf,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,cAAc,EACd,eAAe,EACf,mBAAmB,EACb,KAAI;AACV,IAAA,MAAM,cAAc,GAAG,SAAS,EAAkB,CAAC;IACnD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpD,MAAM,EAAE,IAAI,EAAE,GAAG,aAAa,CAAC,OAAO,EAAE,cAAc,CAAC,CAAC;AACxD,IAAA,MAAM,EACJ,WAAW,EACX,QAAQ,EACR,WAAW,EACX,SAAS,EACT,YAAY,EACZ,MAAM,EACN,SAAS,EACT,MAAM,EACN,SAAS,EACT,YAAY,EACZ,eAAe,EACf,sBAAsB,EACvB,GAAG,iBAAiB,CAAC,IAAI,EAAE,eAAe,CAAC,CAAC;IAE7C,MAAM,cAAc,GAAG,MAAK;AAC1B,QAAA,IAAI,IAAI,KAAK,KAAK,EAAE;AAClB,YAAA,MAAM,EAAE,GAAG,UAAU,EAAE,CAAC;AAExB,YAAA,QAAQ,CAAC;AACP,gBAAA,IAAI,EAAE,KAAK;gBACX,OAAO,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,YAAY,EAAE;AACvD,aAAA,CAAC,CAAC;AACH,YAAA,WAAW,IAAI,WAAW,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC,CAAC;SAC3E;AAAM,aAAA,IAAI,IAAI,KAAK,MAAM,IAAI,MAAM,EAAE;AACpC,YAAA,MAAM,EAAE,EAAE,EAAE,GAAG,MAAM,CAAC;AAEtB,YAAA,QAAQ,CAAC;AACP,gBAAA,IAAI,EAAE,MAAM;gBACZ,OAAO,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,YAAY,EAAE;AACvD,aAAA,CAAC,CAAC;AACH,YAAA,YAAY,IAAI,YAAY,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC,CAAC;SAC7E;AAED,QAAA,WAAW,EAAE,CAAC;QACd,aAAa,CAAC,KAAK,CAAC,CAAC;AACvB,KAAC,CAAC;IAEF,MAAM,cAAc,GAAG,MAAK;QAC1B,IAAI,CAAC,MAAM,EAAE;YACX,OAAO;SACR;AACD,QAAA,MAAM,EAAE,EAAE,EAAE,GAAG,MAAM,CAAC;AAEtB,QAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;AAC9C,QAAA,cAAc,IAAI,cAAc,CAAC,EAAE,CAAC,CAAC;AAErC,QAAA,WAAW,EAAE,CAAC;QACd,aAAa,CAAC,KAAK,CAAC,CAAC;AACvB,KAAC,CAAC;IACF,MAAM,YAAY,GAAG,MAAK;AACxB,QAAA,aAAa,CAAC,CAAC,UAAU,CAAC,CAAC;QAC3B,IAAI,CAAC,UAAU,EAAE;YACf,sBAAsB,CAAC,MAAM,CAAC,CAAC;SAChC;AACH,KAAC,CAAC;IAEF,QACE,oBAAC,QAAQ,EAAA,IAAA;QACP,KAAC,CAAA,aAAA,CAAA,iBAAiB,IAChB,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,YAAY,EAC1B,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,cAAc,EAC1B,MAAM,EAAE,MAAM,EACd,CAAA;AACD,QAAA,YAAY,CACX,KAAA,CAAA,aAAA,CAAC,qBAAqB,EAAA,EACpB,SAAS,EAAE,cAAc,EACzB,MAAM,EAAE,UAAU,EAClB,MAAM,EAAE,MAAM,EACd,eAAe,EAAE,eAAe,EAChC,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,cAAc,EAC9B,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,aAAa,EAC5B,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS,EACpB,eAAe,EAAE,eAAe,GAChC,EACF,IAAI,CACL,CACQ,EACX;AACJ;;;;"}
+{"version":3,"file":"DataGridFilter.esm.js","sources":["../../../../../../src/components/DataGrid/DataGridFilters/DataGridFilter.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, { Fragment, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useGetDomRoot } from \"../../../hooks/useGetDomRoot\";\nimport {\n  DataGridColumnMetadata,\n  Filter,\n  FilterEditorMode,\n  PopoverTranslations,\n  TagTranslations\n} from \"./DataGridFilters.interfaces\";\nimport { generateID } from \"../../../util/helper\";\nimport { DataGridFilterTag } from \"./DataGridFilterTag\";\nimport { DataGridFilterPopover } from \"./DataGridFilterPopover\";\nimport { useDataGridFilter } from \"./DataGridFilterService\";\n\nexport type Props = {\n  mode: FilterEditorMode;\n  domRoot?: HTMLElement;\n  filter?: Filter;\n  columnsMetadata: DataGridColumnMetadata[];\n  onFilterAdd?: (filter: Filter) => void;\n  onFilterEdit?: (filter: Filter) => void;\n  onFilterDelete?: (id: string) => void;\n  tagTranslations?: TagTranslations;\n  popoverTranslations?: PopoverTranslations;\n  customEditTagContent?: React.ReactElement;\n};\n\nexport const DataGridFilter = ({\n  mode,\n  filter,\n  domRoot,\n  columnsMetadata,\n  onFilterAdd,\n  onFilterEdit,\n  onFilterDelete,\n  tagTranslations,\n  popoverTranslations,\n  customEditTagContent\n}: Props) => {\n  const wrappingDivRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const popoverRef = useRef<HTMLDivElement>(null);\n\n  const [filterOpen, setFilterOpen] = useState(false);\n  const { root } = useGetDomRoot(domRoot, wrappingDivRef);\n  const {\n    resetFields,\n    operator,\n    setOperator,\n    operators,\n    setOperators,\n    column,\n    setColumn,\n    values,\n    setValues,\n    pickedValues,\n    setPickedValues,\n    initialiseFilterValues\n  } = useDataGridFilter(mode, columnsMetadata);\n\n  const onFilterSubmit = () => {\n    if (mode === \"ADD\") {\n      const id = generateID();\n      onFilterAdd && onFilterAdd({ id, column, operator, value: pickedValues });\n    } else if (mode === \"EDIT\" && filter) {\n      const { id } = filter;\n      onFilterEdit && onFilterEdit({ id, column, operator, value: pickedValues });\n    }\n\n    resetFields();\n    setFilterOpen(false);\n  };\n\n  const onFilterRemove = () => {\n    if (!filter) {\n      return;\n    }\n\n    const { id } = filter;\n    onFilterDelete && onFilterDelete(id);\n\n    resetFields();\n    setFilterOpen(false);\n  };\n  const onFilterOpen = () => {\n    setFilterOpen(!filterOpen);\n    if (!filterOpen) {\n      initialiseFilterValues(filter);\n    }\n  };\n\n  return (\n    <Fragment>\n      <DataGridFilterTag\n        mode={mode}\n        onFilterOpen={onFilterOpen}\n        onFilterRemove={onFilterRemove}\n        triggerRef={triggerRef}\n        ref={wrappingDivRef}\n        filter={filter}\n        translations={tagTranslations}\n        customEditTagContent={customEditTagContent}\n      />\n      {createPortal(\n        <DataGridFilterPopover\n          popoverRef={popoverRef}\n          anchorRef={wrappingDivRef}\n          isOpen={filterOpen}\n          translations={popoverTranslations}\n          column={column}\n          columnsMetadata={columnsMetadata}\n          values={values}\n          pickedValues={pickedValues}\n          operator={operator}\n          operators={operators}\n          onFilterSubmit={onFilterSubmit}\n          resetFields={resetFields}\n          setFilterOpen={setFilterOpen}\n          setColumn={setColumn}\n          setOperator={setOperator}\n          setOperators={setOperators}\n          setValues={setValues}\n          setPickedValues={setPickedValues}\n        />,\n        root\n      )}\n    </Fragment>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/DataGrid/DataGridFilters/DataGridFilter.module.scss.esm.js

@@ -1,7 +1,7 @@
 import styleInject from '../../node_modules/style-inject/dist/style-inject.es.esm.js';
 
-var css_248z = "/*!\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/*!\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 */.DataGridFilter-module_sr-only__42Whj{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.DataGridFilter-module_hidden__-lmLz{display:none}.DataGridFilter-module_slide-in__Ab0c2{animation:DataGridFilter-module_slide-in__Ab0c2 .5s forwards}@media (prefers-reduced-motion:reduce){.DataGridFilter-module_slide-in__Ab0c2{animation-duration:.1ms}}.DataGridFilter-module_slide-out__znEjC{animation:DataGridFilter-module_slide-out__znEjC .5s forwards}@media (prefers-reduced-motion:reduce){.DataGridFilter-module_slide-out__znEjC{animation-duration:.1ms}}@keyframes DataGridFilter-module_slide-in__Ab0c2{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes DataGridFilter-module_slide-out__znEjC{0%{transform:translateY(0)}to{transform:translateY(100vh)}}.DataGridFilter-module_filter-wrapper__qd5Al{align-items:center;background-color:var(--color-blue-grey100);border-radius:3.125rem;display:flex;gap:.375rem;justify-content:center;padding:.25rem .75rem .25rem .5rem}.DataGridFilter-module_filter-wrapper__qd5Al .DataGridFilter-module_filter-button__tBzMf{align-items:center;background:none;border:none;cursor:pointer;display:flex;gap:.375rem;justify-content:flex-start;padding:0 .25rem}.DataGridFilter-module_filter-wrapper__qd5Al .DataGridFilter-module_filter-button__tBzMf:only-child{margin-right:-.25rem}.DataGridFilter-module_filter-wrapper__qd5Al .DataGridFilter-module_filter-button__tBzMf:hover{background-color:var(--color-black10);border-radius:.125rem}.DataGridFilter-module_filter-wrapper__qd5Al .DataGridFilter-module_filter-button__tBzMf:active{background-color:var(--color-blue-grey400)}.DataGridFilter-module_filter-wrapper__qd5Al .DataGridFilter-module_filter-button__tBzMf:focus-visible{border-radius:var(--focus-border-radius);outline:.125rem solid var(--color-focus);outline-offset:0}.DataGridFilter-module_filter-wrapper__qd5Al .DataGridFilter-module_caption__vSlvk{font-size:var(--font-size-data-grid);font-weight:400;line-height:var(--data-grid-line-height);margin:0}.DataGridFilter-module_filter-wrapper__qd5Al .DataGridFilter-module_caption__vSlvk.DataGridFilter-module_bold__oaBQm{font-weight:600}.DataGridFilter-module_filter-wrapper__qd5Al .DataGridFilter-module_remove-icon__T5Kuo{font-size:.6rem}.DataGridFilter-module_column-select-option__epEFk{text-transform:capitalize}.DataGridFilter-module_popover__LXEBl{align-items:flex-start;display:flex;flex-direction:column;gap:1rem;min-width:40rem;padding:1rem .75rem}.DataGridFilter-module_popover__LXEBl .DataGridFilter-module_controls__TrlV2{display:flex;gap:1rem;width:100%}.DataGridFilter-module_popover__LXEBl .DataGridFilter-module_controls__TrlV2 :first-child,.DataGridFilter-module_popover__LXEBl .DataGridFilter-module_controls__TrlV2>:last-child{flex-grow:1.8;flex-shrink:0;margin-top:0}.DataGridFilter-module_popover__LXEBl .DataGridFilter-module_controls__TrlV2>:nth-child(2){flex-grow:1;flex-shrink:0;margin-top:0}.DataGridFilter-module_popover__LXEBl .DataGridFilter-module_actions__Mr5CH{display:flex;gap:1rem}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkRhdGFHcmlkRmlsdGVyLm1vZHVsZS5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWVBOzs7Ozs7Ozs7Ozs7OztFQWNFO0FBQ0Y7Ozs7Ozs7Ozs7Ozs7O0VBY0UsQ0FDRixzQ0FPRSxrQkFBc0IsQ0FDdEIsUUFBUyxDQUxULFVBQVcsQ0FFWCxXQUFZLENBQ1osZUFBZ0IsQ0FGaEIsU0FBVSxDQUhWLGlCQUFrQixDQUNsQixTQU9GLENBRUEscUNBQ0UsWUFDRixDQUVBLHVDQUNFLDREQUNGLENBQ0EsdUNBQ0UsdUNBQ0UsdUJBQ0YsQ0FDRixDQUVBLHdDQUNFLDZEQUNGLENBQ0EsdUNBQ0Usd0NBQ0UsdUJBQ0YsQ0FDRixDQUVBLGlEQUNFLEdBQ0UsMkJBQ0YsQ0FDQSxHQUNFLHVCQUNGLENBQ0YsQ0FDQSxrREFDRSxHQUNFLHVCQUNGLENBQ0EsR0FDRSwyQkFDRixDQUNGLENBQ0EsNkNBR0Usa0JBQW1CLENBSW5CLDBDQUEyQyxDQUQzQyxzQkFBdUIsQ0FMdkIsWUFBYSxDQUdiLFdBQWEsQ0FGYixzQkFBdUIsQ0FHdkIsa0NBR0YsQ0FDQSx5RkFHRSxrQkFBbUIsQ0FFbkIsZUFBZ0IsQ0FDaEIsV0FBWSxDQUVaLGNBQWUsQ0FQZixZQUFhLENBR2IsV0FBYSxDQUZiLDBCQUEyQixDQUszQixnQkFFRixDQUNBLG9HQUNFLG9CQUNGLENBQ0EsK0ZBRUUscUNBQXNDLENBRHRDLHFCQUVGLENBQ0EsZ0dBQ0UsMENBQ0YsQ0FDQSx1R0FHRSx3Q0FBeUMsQ0FGekMsd0NBQTBDLENBQzFDLGdCQUVGLENBQ0EsbUZBQ0Usb0NBQXFDLENBR3JDLGVBQWdCLENBRmhCLHdDQUF5QyxDQUN6QyxRQUVGLENBQ0EscUhBQ0UsZUFDRixDQUNBLHVGQUNFLGVBQ0YsQ0FFQSxtREFDRSx5QkFDRixDQUVBLHNDQUdFLHNCQUF1QixDQUZ2QixZQUFhLENBQ2IscUJBQXNCLENBRXRCLFFBQVMsQ0FFVCxlQUFnQixDQURoQixtQkFFRixDQUNBLDZFQUVFLFlBQWEsQ0FDYixRQUFTLENBRlQsVUFHRixDQUNBLG1MQUVFLGFBQWMsQ0FDZCxhQUFjLENBQ2QsWUFDRixDQUNBLDJGQUNFLFdBQVksQ0FDWixhQUFjLENBQ2QsWUFDRixDQUNBLDRFQUNFLFlBQWEsQ0FDYixRQUNGIiwiZmlsZSI6IkRhdGFHcmlkRmlsdGVyLm1vZHVsZS5zY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIENvcHlyaWdodCAyMDIyIE9uZVdlbGNvbWUgQi5WLlxuICpcbiAqICAgIExpY2Vuc2VkIHVuZGVyIHRoZSBBcGFjaGUgTGljZW5zZSwgVmVyc2lvbiAyLjAgKHRoZSBcIkxpY2Vuc2VcIik7XG4gKiAgICB5b3UgbWF5IG5vdCB1c2UgdGhpcyBmaWxlIGV4Y2VwdCBpbiBjb21wbGlhbmNlIHdpdGggdGhlIExpY2Vuc2UuXG4gKiAgICBZb3UgbWF5IG9idGFpbiBhIGNvcHkgb2YgdGhlIExpY2Vuc2UgYXRcbiAqXG4gKiAgICAgICAgaHR0cDovL3d3dy5hcGFjaGUub3JnL2xpY2Vuc2VzL0xJQ0VOU0UtMi4wXG4gKlxuICogICAgVW5sZXNzIHJlcXVpcmVkIGJ5IGFwcGxpY2FibGUgbGF3IG9yIGFncmVlZCB0byBpbiB3cml0aW5nLCBzb2Z0d2FyZVxuICogICAgZGlzdHJpYnV0ZWQgdW5kZXIgdGhlIExpY2Vuc2UgaXMgZGlzdHJpYnV0ZWQgb24gYW4gXCJBUyBJU1wiIEJBU0lTLFxuICogICAgV0lUSE9VVCBXQVJSQU5USUVTIE9SIENPTkRJVElPTlMgT0YgQU5ZIEtJTkQsIGVpdGhlciBleHByZXNzIG9yIGltcGxpZWQuXG4gKiAgICBTZWUgdGhlIExpY2Vuc2UgZm9yIHRoZSBzcGVjaWZpYyBsYW5ndWFnZSBnb3Zlcm5pbmcgcGVybWlzc2lvbnMgYW5kXG4gKiAgICBsaW1pdGF0aW9ucyB1bmRlciB0aGUgTGljZW5zZS5cbiAqL1xuLyohXG4gKiBDb3B5cmlnaHQgMjAyMiBPbmVXZWxjb21lIEIuVi5cbiAqXG4gKiAgICBMaWNlbnNlZCB1bmRlciB0aGUgQXBhY2hlIExpY2Vuc2UsIFZlcnNpb24gMi4wICh0aGUgXCJMaWNlbnNlXCIpO1xuICogICAgeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHQgaW4gY29tcGxpYW5jZSB3aXRoIHRoZSBMaWNlbnNlLlxuICogICAgWW91IG1heSBvYnRhaW4gYSBjb3B5IG9mIHRoZSBMaWNlbnNlIGF0XG4gKlxuICogICAgICAgIGh0dHA6Ly93d3cuYXBhY2hlLm9yZy9saWNlbnNlcy9MSUNFTlNFLTIuMFxuICpcbiAqICAgIFVubGVzcyByZXF1aXJlZCBieSBhcHBsaWNhYmxlIGxhdyBvciBhZ3JlZWQgdG8gaW4gd3JpdGluZywgc29mdHdhcmVcbiAqICAgIGRpc3RyaWJ1dGVkIHVuZGVyIHRoZSBMaWNlbnNlIGlzIGRpc3RyaWJ1dGVkIG9uIGFuIFwiQVMgSVNcIiBCQVNJUyxcbiAqICAgIFdJVEhPVVQgV0FSUkFOVElFUyBPUiBDT05ESVRJT05TIE9GIEFOWSBLSU5ELCBlaXRoZXIgZXhwcmVzcyBvciBpbXBsaWVkLlxuICogICAgU2VlIHRoZSBMaWNlbnNlIGZvciB0aGUgc3BlY2lmaWMgbGFuZ3VhZ2UgZ292ZXJuaW5nIHBlcm1pc3Npb25zIGFuZFxuICogICAgbGltaXRhdGlvbnMgdW5kZXIgdGhlIExpY2Vuc2UuXG4gKi9cbi8qIVxuICogQ29weXJpZ2h0IDIwMjIgT25lV2VsY29tZSBCLlYuXG4gKlxuICogICAgTGljZW5zZWQgdW5kZXIgdGhlIEFwYWNoZSBMaWNlbnNlLCBWZXJzaW9uIDIuMCAodGhlIFwiTGljZW5zZVwiKTtcbiAqICAgIHlvdSBtYXkgbm90IHVzZSB0aGlzIGZpbGUgZXhjZXB0IGluIGNvbXBsaWFuY2Ugd2l0aCB0aGUgTGljZW5zZS5cbiAqICAgIFlvdSBtYXkgb2J0YWluIGEgY29weSBvZiB0aGUgTGljZW5zZSBhdFxuICpcbiAqICAgICAgICBodHRwOi8vd3d3LmFwYWNoZS5vcmcvbGljZW5zZXMvTElDRU5TRS0yLjBcbiAqXG4gKiAgICBVbmxlc3MgcmVxdWlyZWQgYnkgYXBwbGljYWJsZSBsYXcgb3IgYWdyZWVkIHRvIGluIHdyaXRpbmcsIHNvZnR3YXJlXG4gKiAgICBkaXN0cmlidXRlZCB1bmRlciB0aGUgTGljZW5zZSBpcyBkaXN0cmlidXRlZCBvbiBhbiBcIkFTIElTXCIgQkFTSVMsXG4gKiAgICBXSVRIT1VUIFdBUlJBTlRJRVMgT1IgQ09ORElUSU9OUyBPRiBBTlkgS0lORCwgZWl0aGVyIGV4cHJlc3Mgb3IgaW1wbGllZC5cbiAqICAgIFNlZSB0aGUgTGljZW5zZSBmb3IgdGhlIHNwZWNpZmljIGxhbmd1YWdlIGdvdmVybmluZyBwZXJtaXNzaW9ucyBhbmRcbiAqICAgIGxpbWl0YXRpb25zIHVuZGVyIHRoZSBMaWNlbnNlLlxuICovXG4uc3Itb25seSB7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgd2lkdGg6IDFweDtcbiAgaGVpZ2h0OiAxcHg7XG4gIHBhZGRpbmc6IDA7XG4gIG1hcmdpbjogLTFweDtcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgY2xpcDogcmVjdCgwLCAwLCAwLCAwKTtcbiAgYm9yZGVyOiAwO1xufVxuXG4uaGlkZGVuIHtcbiAgZGlzcGxheTogbm9uZTtcbn1cblxuLnNsaWRlLWluIHtcbiAgYW5pbWF0aW9uOiBzbGlkZS1pbiAwLjVzIGZvcndhcmRzO1xufVxuQG1lZGlhIChwcmVmZXJzLXJlZHVjZWQtbW90aW9uOiByZWR1Y2UpIHtcbiAgLnNsaWRlLWluIHtcbiAgICBhbmltYXRpb24tZHVyYXRpb246IDAuMW1zO1xuICB9XG59XG5cbi5zbGlkZS1vdXQge1xuICBhbmltYXRpb246IHNsaWRlLW91dCAwLjVzIGZvcndhcmRzO1xufVxuQG1lZGlhIChwcmVmZXJzLXJlZHVjZWQtbW90aW9uOiByZWR1Y2UpIHtcbiAgLnNsaWRlLW91dCB7XG4gICAgYW5pbWF0aW9uLWR1cmF0aW9uOiAwLjFtcztcbiAgfVxufVxuXG5Aa2V5ZnJhbWVzIHNsaWRlLWluIHtcbiAgMCUge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWSgxMDB2aCk7XG4gIH1cbiAgMTAwJSB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDAlKTtcbiAgfVxufVxuQGtleWZyYW1lcyBzbGlkZS1vdXQge1xuICAwJSB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDAlKTtcbiAgfVxuICAxMDAlIHtcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMTAwdmgpO1xuICB9XG59XG4uZmlsdGVyLXdyYXBwZXIge1xuICBkaXNwbGF5OiBmbGV4O1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgZ2FwOiAwLjM3NXJlbTtcbiAgcGFkZGluZzogMC4yNXJlbSAwLjc1cmVtIDAuMjVyZW0gMC41cmVtO1xuICBib3JkZXItcmFkaXVzOiAzLjEyNXJlbTtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tY29sb3ItYmx1ZS1ncmV5MTAwKTtcbn1cbi5maWx0ZXItd3JhcHBlciAuZmlsdGVyLWJ1dHRvbiB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGp1c3RpZnktY29udGVudDogZmxleC1zdGFydDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgZ2FwOiAwLjM3NXJlbTtcbiAgYmFja2dyb3VuZDogbm9uZTtcbiAgYm9yZGVyOiBub25lO1xuICBwYWRkaW5nOiAwIDAuMjVyZW07XG4gIGN1cnNvcjogcG9pbnRlcjtcbn1cbi5maWx0ZXItd3JhcHBlciAuZmlsdGVyLWJ1dHRvbjpvbmx5LWNoaWxkIHtcbiAgbWFyZ2luLXJpZ2h0OiAtMC4yNXJlbTtcbn1cbi5maWx0ZXItd3JhcHBlciAuZmlsdGVyLWJ1dHRvbjpob3ZlciB7XG4gIGJvcmRlci1yYWRpdXM6IDAuMTI1cmVtO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1jb2xvci1ibGFjazEwKTtcbn1cbi5maWx0ZXItd3JhcHBlciAuZmlsdGVyLWJ1dHRvbjphY3RpdmUge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1jb2xvci1ibHVlLWdyZXk0MDApO1xufVxuLmZpbHRlci13cmFwcGVyIC5maWx0ZXItYnV0dG9uOmZvY3VzLXZpc2libGUge1xuICBvdXRsaW5lOiAwLjEyNXJlbSBzb2xpZCB2YXIoLS1jb2xvci1mb2N1cyk7XG4gIG91dGxpbmUtb2Zmc2V0OiAwO1xuICBib3JkZXItcmFkaXVzOiB2YXIoLS1mb2N1cy1ib3JkZXItcmFkaXVzKTtcbn1cbi5maWx0ZXItd3JhcHBlciAuY2FwdGlvbiB7XG4gIGZvbnQtc2l6ZTogdmFyKC0tZm9udC1zaXplLWRhdGEtZ3JpZCk7XG4gIGxpbmUtaGVpZ2h0OiB2YXIoLS1kYXRhLWdyaWQtbGluZS1oZWlnaHQpO1xuICBtYXJnaW46IDA7XG4gIGZvbnQtd2VpZ2h0OiA0MDA7XG59XG4uZmlsdGVyLXdyYXBwZXIgLmNhcHRpb24uYm9sZCB7XG4gIGZvbnQtd2VpZ2h0OiA2MDA7XG59XG4uZmlsdGVyLXdyYXBwZXIgLnJlbW92ZS1pY29uIHtcbiAgZm9udC1zaXplOiAwLjZyZW07XG59XG5cbi5jb2x1bW4tc2VsZWN0LW9wdGlvbiB7XG4gIHRleHQtdHJhbnNmb3JtOiBjYXBpdGFsaXplO1xufVxuXG4ucG9wb3ZlciB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIGFsaWduLWl0ZW1zOiBmbGV4LXN0YXJ0O1xuICBnYXA6IDFyZW07XG4gIHBhZGRpbmc6IDFyZW0gMC43NXJlbTtcbiAgbWluLXdpZHRoOiA0MHJlbTtcbn1cbi5wb3BvdmVyIC5jb250cm9scyB7XG4gIHdpZHRoOiAxMDAlO1xuICBkaXNwbGF5OiBmbGV4O1xuICBnYXA6IDFyZW07XG59XG4ucG9wb3ZlciAuY29udHJvbHMgPiAqOmxhc3QtY2hpbGQsXG4ucG9wb3ZlciAuY29udHJvbHMgKjpmaXJzdC1jaGlsZCB7XG4gIGZsZXgtZ3JvdzogMS44O1xuICBmbGV4LXNocmluazogMDtcbiAgbWFyZ2luLXRvcDogMDtcbn1cbi5wb3BvdmVyIC5jb250cm9scyA+ICo6bnRoLWNoaWxkKDIpIHtcbiAgZmxleC1ncm93OiAxO1xuICBmbGV4LXNocmluazogMDtcbiAgbWFyZ2luLXRvcDogMDtcbn1cbi5wb3BvdmVyIC5hY3Rpb25zIHtcbiAgZGlzcGxheTogZmxleDtcbiAgZ2FwOiAxcmVtO1xufSJdfQ== */";
-var classes = {"sr-only":"DataGridFilter-module_sr-only__42Whj","hidden":"DataGridFilter-module_hidden__-lmLz","slide-in":"DataGridFilter-module_slide-in__Ab0c2","slide-out":"DataGridFilter-module_slide-out__znEjC","filter-wrapper":"DataGridFilter-module_filter-wrapper__qd5Al","filter-button":"DataGridFilter-module_filter-button__tBzMf","caption":"DataGridFilter-module_caption__vSlvk","bold":"DataGridFilter-module_bold__oaBQm","remove-icon":"DataGridFilter-module_remove-icon__T5Kuo","column-select-option":"DataGridFilter-module_column-select-option__epEFk","popover":"DataGridFilter-module_popover__LXEBl","controls":"DataGridFilter-module_controls__TrlV2","actions":"DataGridFilter-module_actions__Mr5CH"};
+var css_248z = "/*!\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/*!\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 */.DataGridFilter-module_sr-only__42Whj{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.DataGridFilter-module_hidden__-lmLz{display:none}.DataGridFilter-module_slide-in__Ab0c2{animation:DataGridFilter-module_slide-in__Ab0c2 .5s forwards}@media (prefers-reduced-motion:reduce){.DataGridFilter-module_slide-in__Ab0c2{animation-duration:.1ms}}.DataGridFilter-module_slide-out__znEjC{animation:DataGridFilter-module_slide-out__znEjC .5s forwards}@media (prefers-reduced-motion:reduce){.DataGridFilter-module_slide-out__znEjC{animation-duration:.1ms}}@keyframes DataGridFilter-module_slide-in__Ab0c2{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes DataGridFilter-module_slide-out__znEjC{0%{transform:translateY(0)}to{transform:translateY(100vh)}}.DataGridFilter-module_filter-wrapper__qd5Al{align-items:center;background-color:var(--color-blue-grey100);border-radius:3.125rem;display:flex;gap:.375rem;justify-content:center;min-height:1.5rem;padding:.25rem .75rem .25rem .5rem}.DataGridFilter-module_filter-wrapper__qd5Al:hover{background-color:var(--color-blue-grey200)}.DataGridFilter-module_filter-wrapper__qd5Al:active{background-color:var(--color-primary100)}.DataGridFilter-module_filter-wrapper__qd5Al .DataGridFilter-module_filter-button__tBzMf{align-items:center;background:none;border:none;cursor:pointer;display:flex;gap:.375rem;justify-content:flex-start;padding:0 .25rem}.DataGridFilter-module_filter-wrapper__qd5Al .DataGridFilter-module_filter-button__tBzMf:only-child{margin-right:-.25rem}.DataGridFilter-module_filter-wrapper__qd5Al .DataGridFilter-module_filter-button__tBzMf:focus-visible{border-radius:var(--focus-border-radius);outline:.125rem solid var(--color-focus);outline-offset:0}.DataGridFilter-module_filter-wrapper__qd5Al .DataGridFilter-module_remove-button__dh0WC{border-radius:1.25rem}.DataGridFilter-module_filter-wrapper__qd5Al .DataGridFilter-module_caption__vSlvk{font-size:var(--font-size-data-grid);font-weight:400;line-height:var(--data-grid-line-height);margin:0}.DataGridFilter-module_filter-wrapper__qd5Al .DataGridFilter-module_caption__vSlvk.DataGridFilter-module_bold__oaBQm{font-weight:600}.DataGridFilter-module_filter-wrapper__qd5Al .DataGridFilter-module_remove-icon__T5Kuo{font-size:.6rem}.DataGridFilter-module_column-select-option__epEFk{text-transform:capitalize}.DataGridFilter-module_popover__LXEBl{align-items:flex-start;display:flex;flex-direction:column;gap:1rem;min-width:40rem;padding:1rem .75rem}.DataGridFilter-module_popover__LXEBl .DataGridFilter-module_controls__TrlV2{display:flex;gap:1rem;width:100%}.DataGridFilter-module_popover__LXEBl .DataGridFilter-module_controls__TrlV2>:first-child{flex-grow:1.8;flex-shrink:0;margin-top:0}.DataGridFilter-module_popover__LXEBl .DataGridFilter-module_controls__TrlV2>:nth-child(2){flex-grow:1;flex-shrink:0;margin-top:0}.DataGridFilter-module_popover__LXEBl .DataGridFilter-module_controls__TrlV2>:last-child{flex-basis:15rem;flex-grow:1.8;flex-shrink:0;margin-top:0}.DataGridFilter-module_popover__LXEBl .DataGridFilter-module_actions__Mr5CH{display:flex;gap:1rem}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkRhdGFHcmlkRmlsdGVyLm1vZHVsZS5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWVBOzs7Ozs7Ozs7Ozs7OztFQWNFO0FBQ0Y7Ozs7Ozs7Ozs7Ozs7O0VBY0UsQ0FDRixzQ0FPRSxrQkFBc0IsQ0FDdEIsUUFBUyxDQUxULFVBQVcsQ0FFWCxXQUFZLENBQ1osZUFBZ0IsQ0FGaEIsU0FBVSxDQUhWLGlCQUFrQixDQUNsQixTQU9GLENBRUEscUNBQ0UsWUFDRixDQUVBLHVDQUNFLDREQUNGLENBQ0EsdUNBQ0UsdUNBQ0UsdUJBQ0YsQ0FDRixDQUVBLHdDQUNFLDZEQUNGLENBQ0EsdUNBQ0Usd0NBQ0UsdUJBQ0YsQ0FDRixDQUVBLGlEQUNFLEdBQ0UsMkJBQ0YsQ0FDQSxHQUNFLHVCQUNGLENBQ0YsQ0FDQSxrREFDRSxHQUNFLHVCQUNGLENBQ0EsR0FDRSwyQkFDRixDQUNGLENBQ0EsNkNBR0Usa0JBQW1CLENBS25CLDBDQUEyQyxDQUQzQyxzQkFBdUIsQ0FOdkIsWUFBYSxDQUdiLFdBQWEsQ0FGYixzQkFBdUIsQ0FHdkIsaUJBQWtCLENBQ2xCLGtDQUdGLENBQ0EsbURBQ0UsMENBQ0YsQ0FDQSxvREFDRSx3Q0FDRixDQUNBLHlGQUdFLGtCQUFtQixDQUVuQixlQUFnQixDQUNoQixXQUFZLENBRVosY0FBZSxDQVBmLFlBQWEsQ0FHYixXQUFhLENBRmIsMEJBQTJCLENBSzNCLGdCQUVGLENBQ0Esb0dBQ0Usb0JBQ0YsQ0FDQSx1R0FHRSx3Q0FBeUMsQ0FGekMsd0NBQTBDLENBQzFDLGdCQUVGLENBQ0EseUZBQ0UscUJBQ0YsQ0FDQSxtRkFDRSxvQ0FBcUMsQ0FHckMsZUFBZ0IsQ0FGaEIsd0NBQXlDLENBQ3pDLFFBRUYsQ0FDQSxxSEFDRSxlQUNGLENBQ0EsdUZBQ0UsZUFDRixDQUVBLG1EQUNFLHlCQUNGLENBRUEsc0NBR0Usc0JBQXVCLENBRnZCLFlBQWEsQ0FDYixxQkFBc0IsQ0FFdEIsUUFBUyxDQUVULGVBQWdCLENBRGhCLG1CQUVGLENBQ0EsNkVBRUUsWUFBYSxDQUNiLFFBQVMsQ0FGVCxVQUdGLENBQ0EsMEZBQ0UsYUFBYyxDQUNkLGFBQWMsQ0FDZCxZQUNGLENBQ0EsMkZBQ0UsV0FBWSxDQUNaLGFBQWMsQ0FDZCxZQUNGLENBQ0EseUZBQ0UsZ0JBQWlCLENBQ2pCLGFBQWMsQ0FDZCxhQUFjLENBQ2QsWUFDRixDQUNBLDRFQUNFLFlBQWEsQ0FDYixRQUNGIiwiZmlsZSI6IkRhdGFHcmlkRmlsdGVyLm1vZHVsZS5zY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIENvcHlyaWdodCAyMDIyIE9uZVdlbGNvbWUgQi5WLlxuICpcbiAqICAgIExpY2Vuc2VkIHVuZGVyIHRoZSBBcGFjaGUgTGljZW5zZSwgVmVyc2lvbiAyLjAgKHRoZSBcIkxpY2Vuc2VcIik7XG4gKiAgICB5b3UgbWF5IG5vdCB1c2UgdGhpcyBmaWxlIGV4Y2VwdCBpbiBjb21wbGlhbmNlIHdpdGggdGhlIExpY2Vuc2UuXG4gKiAgICBZb3UgbWF5IG9idGFpbiBhIGNvcHkgb2YgdGhlIExpY2Vuc2UgYXRcbiAqXG4gKiAgICAgICAgaHR0cDovL3d3dy5hcGFjaGUub3JnL2xpY2Vuc2VzL0xJQ0VOU0UtMi4wXG4gKlxuICogICAgVW5sZXNzIHJlcXVpcmVkIGJ5IGFwcGxpY2FibGUgbGF3IG9yIGFncmVlZCB0byBpbiB3cml0aW5nLCBzb2Z0d2FyZVxuICogICAgZGlzdHJpYnV0ZWQgdW5kZXIgdGhlIExpY2Vuc2UgaXMgZGlzdHJpYnV0ZWQgb24gYW4gXCJBUyBJU1wiIEJBU0lTLFxuICogICAgV0lUSE9VVCBXQVJSQU5USUVTIE9SIENPTkRJVElPTlMgT0YgQU5ZIEtJTkQsIGVpdGhlciBleHByZXNzIG9yIGltcGxpZWQuXG4gKiAgICBTZWUgdGhlIExpY2Vuc2UgZm9yIHRoZSBzcGVjaWZpYyBsYW5ndWFnZSBnb3Zlcm5pbmcgcGVybWlzc2lvbnMgYW5kXG4gKiAgICBsaW1pdGF0aW9ucyB1bmRlciB0aGUgTGljZW5zZS5cbiAqL1xuLyohXG4gKiBDb3B5cmlnaHQgMjAyMiBPbmVXZWxjb21lIEIuVi5cbiAqXG4gKiAgICBMaWNlbnNlZCB1bmRlciB0aGUgQXBhY2hlIExpY2Vuc2UsIFZlcnNpb24gMi4wICh0aGUgXCJMaWNlbnNlXCIpO1xuICogICAgeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHQgaW4gY29tcGxpYW5jZSB3aXRoIHRoZSBMaWNlbnNlLlxuICogICAgWW91IG1heSBvYnRhaW4gYSBjb3B5IG9mIHRoZSBMaWNlbnNlIGF0XG4gKlxuICogICAgICAgIGh0dHA6Ly93d3cuYXBhY2hlLm9yZy9saWNlbnNlcy9MSUNFTlNFLTIuMFxuICpcbiAqICAgIFVubGVzcyByZXF1aXJlZCBieSBhcHBsaWNhYmxlIGxhdyBvciBhZ3JlZWQgdG8gaW4gd3JpdGluZywgc29mdHdhcmVcbiAqICAgIGRpc3RyaWJ1dGVkIHVuZGVyIHRoZSBMaWNlbnNlIGlzIGRpc3RyaWJ1dGVkIG9uIGFuIFwiQVMgSVNcIiBCQVNJUyxcbiAqICAgIFdJVEhPVVQgV0FSUkFOVElFUyBPUiBDT05ESVRJT05TIE9GIEFOWSBLSU5ELCBlaXRoZXIgZXhwcmVzcyBvciBpbXBsaWVkLlxuICogICAgU2VlIHRoZSBMaWNlbnNlIGZvciB0aGUgc3BlY2lmaWMgbGFuZ3VhZ2UgZ292ZXJuaW5nIHBlcm1pc3Npb25zIGFuZFxuICogICAgbGltaXRhdGlvbnMgdW5kZXIgdGhlIExpY2Vuc2UuXG4gKi9cbi8qIVxuICogQ29weXJpZ2h0IDIwMjIgT25lV2VsY29tZSBCLlYuXG4gKlxuICogICAgTGljZW5zZWQgdW5kZXIgdGhlIEFwYWNoZSBMaWNlbnNlLCBWZXJzaW9uIDIuMCAodGhlIFwiTGljZW5zZVwiKTtcbiAqICAgIHlvdSBtYXkgbm90IHVzZSB0aGlzIGZpbGUgZXhjZXB0IGluIGNvbXBsaWFuY2Ugd2l0aCB0aGUgTGljZW5zZS5cbiAqICAgIFlvdSBtYXkgb2J0YWluIGEgY29weSBvZiB0aGUgTGljZW5zZSBhdFxuICpcbiAqICAgICAgICBodHRwOi8vd3d3LmFwYWNoZS5vcmcvbGljZW5zZXMvTElDRU5TRS0yLjBcbiAqXG4gKiAgICBVbmxlc3MgcmVxdWlyZWQgYnkgYXBwbGljYWJsZSBsYXcgb3IgYWdyZWVkIHRvIGluIHdyaXRpbmcsIHNvZnR3YXJlXG4gKiAgICBkaXN0cmlidXRlZCB1bmRlciB0aGUgTGljZW5zZSBpcyBkaXN0cmlidXRlZCBvbiBhbiBcIkFTIElTXCIgQkFTSVMsXG4gKiAgICBXSVRIT1VUIFdBUlJBTlRJRVMgT1IgQ09ORElUSU9OUyBPRiBBTlkgS0lORCwgZWl0aGVyIGV4cHJlc3Mgb3IgaW1wbGllZC5cbiAqICAgIFNlZSB0aGUgTGljZW5zZSBmb3IgdGhlIHNwZWNpZmljIGxhbmd1YWdlIGdvdmVybmluZyBwZXJtaXNzaW9ucyBhbmRcbiAqICAgIGxpbWl0YXRpb25zIHVuZGVyIHRoZSBMaWNlbnNlLlxuICovXG4uc3Itb25seSB7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgd2lkdGg6IDFweDtcbiAgaGVpZ2h0OiAxcHg7XG4gIHBhZGRpbmc6IDA7XG4gIG1hcmdpbjogLTFweDtcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgY2xpcDogcmVjdCgwLCAwLCAwLCAwKTtcbiAgYm9yZGVyOiAwO1xufVxuXG4uaGlkZGVuIHtcbiAgZGlzcGxheTogbm9uZTtcbn1cblxuLnNsaWRlLWluIHtcbiAgYW5pbWF0aW9uOiBzbGlkZS1pbiAwLjVzIGZvcndhcmRzO1xufVxuQG1lZGlhIChwcmVmZXJzLXJlZHVjZWQtbW90aW9uOiByZWR1Y2UpIHtcbiAgLnNsaWRlLWluIHtcbiAgICBhbmltYXRpb24tZHVyYXRpb246IDAuMW1zO1xuICB9XG59XG5cbi5zbGlkZS1vdXQge1xuICBhbmltYXRpb246IHNsaWRlLW91dCAwLjVzIGZvcndhcmRzO1xufVxuQG1lZGlhIChwcmVmZXJzLXJlZHVjZWQtbW90aW9uOiByZWR1Y2UpIHtcbiAgLnNsaWRlLW91dCB7XG4gICAgYW5pbWF0aW9uLWR1cmF0aW9uOiAwLjFtcztcbiAgfVxufVxuXG5Aa2V5ZnJhbWVzIHNsaWRlLWluIHtcbiAgMCUge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWSgxMDB2aCk7XG4gIH1cbiAgMTAwJSB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDAlKTtcbiAgfVxufVxuQGtleWZyYW1lcyBzbGlkZS1vdXQge1xuICAwJSB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDAlKTtcbiAgfVxuICAxMDAlIHtcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMTAwdmgpO1xuICB9XG59XG4uZmlsdGVyLXdyYXBwZXIge1xuICBkaXNwbGF5OiBmbGV4O1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgZ2FwOiAwLjM3NXJlbTtcbiAgbWluLWhlaWdodDogMS41cmVtO1xuICBwYWRkaW5nOiAwLjI1cmVtIDAuNzVyZW0gMC4yNXJlbSAwLjVyZW07XG4gIGJvcmRlci1yYWRpdXM6IDMuMTI1cmVtO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1jb2xvci1ibHVlLWdyZXkxMDApO1xufVxuLmZpbHRlci13cmFwcGVyOmhvdmVyIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tY29sb3ItYmx1ZS1ncmV5MjAwKTtcbn1cbi5maWx0ZXItd3JhcHBlcjphY3RpdmUge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1jb2xvci1wcmltYXJ5MTAwKTtcbn1cbi5maWx0ZXItd3JhcHBlciAuZmlsdGVyLWJ1dHRvbiB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGp1c3RpZnktY29udGVudDogZmxleC1zdGFydDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgZ2FwOiAwLjM3NXJlbTtcbiAgYmFja2dyb3VuZDogbm9uZTtcbiAgYm9yZGVyOiBub25lO1xuICBwYWRkaW5nOiAwIDAuMjVyZW07XG4gIGN1cnNvcjogcG9pbnRlcjtcbn1cbi5maWx0ZXItd3JhcHBlciAuZmlsdGVyLWJ1dHRvbjpvbmx5LWNoaWxkIHtcbiAgbWFyZ2luLXJpZ2h0OiAtMC4yNXJlbTtcbn1cbi5maWx0ZXItd3JhcHBlciAuZmlsdGVyLWJ1dHRvbjpmb2N1cy12aXNpYmxlIHtcbiAgb3V0bGluZTogMC4xMjVyZW0gc29saWQgdmFyKC0tY29sb3ItZm9jdXMpO1xuICBvdXRsaW5lLW9mZnNldDogMDtcbiAgYm9yZGVyLXJhZGl1czogdmFyKC0tZm9jdXMtYm9yZGVyLXJhZGl1cyk7XG59XG4uZmlsdGVyLXdyYXBwZXIgLnJlbW92ZS1idXR0b24ge1xuICBib3JkZXItcmFkaXVzOiAxLjI1cmVtO1xufVxuLmZpbHRlci13cmFwcGVyIC5jYXB0aW9uIHtcbiAgZm9udC1zaXplOiB2YXIoLS1mb250LXNpemUtZGF0YS1ncmlkKTtcbiAgbGluZS1oZWlnaHQ6IHZhcigtLWRhdGEtZ3JpZC1saW5lLWhlaWdodCk7XG4gIG1hcmdpbjogMDtcbiAgZm9udC13ZWlnaHQ6IDQwMDtcbn1cbi5maWx0ZXItd3JhcHBlciAuY2FwdGlvbi5ib2xkIHtcbiAgZm9udC13ZWlnaHQ6IDYwMDtcbn1cbi5maWx0ZXItd3JhcHBlciAucmVtb3ZlLWljb24ge1xuICBmb250LXNpemU6IDAuNnJlbTtcbn1cblxuLmNvbHVtbi1zZWxlY3Qtb3B0aW9uIHtcbiAgdGV4dC10cmFuc2Zvcm06IGNhcGl0YWxpemU7XG59XG5cbi5wb3BvdmVyIHtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgYWxpZ24taXRlbXM6IGZsZXgtc3RhcnQ7XG4gIGdhcDogMXJlbTtcbiAgcGFkZGluZzogMXJlbSAwLjc1cmVtO1xuICBtaW4td2lkdGg6IDQwcmVtO1xufVxuLnBvcG92ZXIgLmNvbnRyb2xzIHtcbiAgd2lkdGg6IDEwMCU7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGdhcDogMXJlbTtcbn1cbi5wb3BvdmVyIC5jb250cm9scyA+ICo6Zmlyc3QtY2hpbGQge1xuICBmbGV4LWdyb3c6IDEuODtcbiAgZmxleC1zaHJpbms6IDA7XG4gIG1hcmdpbi10b3A6IDA7XG59XG4ucG9wb3ZlciAuY29udHJvbHMgPiAqOm50aC1jaGlsZCgyKSB7XG4gIGZsZXgtZ3JvdzogMTtcbiAgZmxleC1zaHJpbms6IDA7XG4gIG1hcmdpbi10b3A6IDA7XG59XG4ucG9wb3ZlciAuY29udHJvbHMgPiAqOmxhc3QtY2hpbGQge1xuICBmbGV4LWJhc2lzOiAxNXJlbTtcbiAgZmxleC1ncm93OiAxLjg7XG4gIGZsZXgtc2hyaW5rOiAwO1xuICBtYXJnaW4tdG9wOiAwO1xufVxuLnBvcG92ZXIgLmFjdGlvbnMge1xuICBkaXNwbGF5OiBmbGV4O1xuICBnYXA6IDFyZW07XG59Il19 */";
+var classes = {"sr-only":"DataGridFilter-module_sr-only__42Whj","hidden":"DataGridFilter-module_hidden__-lmLz","slide-in":"DataGridFilter-module_slide-in__Ab0c2","slide-out":"DataGridFilter-module_slide-out__znEjC","filter-wrapper":"DataGridFilter-module_filter-wrapper__qd5Al","filter-button":"DataGridFilter-module_filter-button__tBzMf","remove-button":"DataGridFilter-module_remove-button__dh0WC","caption":"DataGridFilter-module_caption__vSlvk","bold":"DataGridFilter-module_bold__oaBQm","remove-icon":"DataGridFilter-module_remove-icon__T5Kuo","column-select-option":"DataGridFilter-module_column-select-option__epEFk","popover":"DataGridFilter-module_popover__LXEBl","controls":"DataGridFilter-module_controls__TrlV2","actions":"DataGridFilter-module_actions__Mr5CH"};
 styleInject(css_248z);
 
 export { classes as default };

package/dist/esm/DataGrid/DataGridFilters/DataGridFilterPopover.esm.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import classes from './DataGridFilter.module.scss.esm.js';
 import { Button } from '../../Button/Button.esm.js';
 import { Option } from '../../Form/Select/SingleSelect/Option.esm.js';
@@ -7,6 +7,7 @@ import { MultiSelectWrapper } from '../../Form/Wrapper/MultiSelectWrapper/MultiS
 import { SelectWrapper } from '../../Form/Wrapper/SelectWrapper/SelectWrapper.esm.js';
 import { Popover } from '../../Popover/Popover.esm.js';
 import { DefaultOperators } from './DataGridFilters.interfaces.esm.js';
+import { useRepeatFocus } from '../../src/hooks/useRepeatFocus.esm.js';
 
 /*
  * Copyright 2022 OneWelcome B.V.
@@ -23,9 +24,16 @@ import { DefaultOperators } from './DataGridFilters.interfaces.esm.js';
  *    See the License for the specific language governing permissions and
  *    limitations under the License.
  */
-const DataGridFilterPopover = ({ anchorRef, isOpen, column, columnsMetadata, values, pickedValues, operator, operators, onFilterSubmit, resetFields, setFilterOpen, setColumn, setOperator, setOperators, setValues, setPickedValues, translations }) => {
+const DataGridFilterPopover = ({ popoverRef, anchorRef, isOpen, column, columnsMetadata, values, pickedValues, operator, operators, onFilterSubmit, resetFields, setFilterOpen, setColumn, setOperator, setOperators, setValues, setPickedValues, translations }) => {
     const { columnSelectLabel = "Filter by", operatorSelectLabel = "Operator", valueSelectLabel = "Value", addNewValueLabel = "Create new", addNewValueButtonTitle = "Add new select value", submitButtonTitle = "Apply", cancelButtonTitle = "Cancel" } = translations || {};
-    return (React.createElement(Popover, { anchorEl: anchorRef, show: isOpen, placement: { horizontal: "left", vertical: "bottom" }, transformOrigin: { horizontal: "left", vertical: "top" } },
+    useRepeatFocus(popoverRef);
+    useEffect(() => {
+        var _a;
+        if (isOpen) {
+            (_a = popoverRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [isOpen]);
+    return (React.createElement(Popover, { tabIndex: -1, anchorEl: anchorRef, ref: popoverRef, show: isOpen, placement: { horizontal: "left", vertical: "bottom" }, transformOrigin: { horizontal: "left", vertical: "top" } },
         React.createElement("div", { className: classes["popover"] },
             React.createElement("div", { className: classes["controls"] },
                 React.createElement(SelectWrapper, { label: columnSelectLabel, value: column, name: "column", onChange: e => {