@onewelcome/react-lib-components 10.0.1 → 10.1.0

package/dist/components/DataGrid/DataGridFilters/DataGridFilter.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=require("react-dom"),r=require("../../../hooks/useGetDomRoot.cjs.js"),o=require("../../../util/helper.cjs.js"),a=require("./DataGridFilterTag.cjs.js"),l=require("./DataGridFilterPopover.cjs.js"),s=require("./DataGridFilterService.cjs.js");exports.DataGridFilter=({mode:i,filter:n,domRoot:u,columnsMetadata:c,onFilterAdd:d,onFilterEdit:m,onFilterDelete:p,tagTranslations:F,popoverTranslations:D,customEditTagContent:f,filterState:g})=>{const j=e.useRef(null),v=e.useRef(null),R=e.useRef(null),[G,O]=e.useState(!1),{root:E}=r.useGetDomRoot(u,j),{resetFields:T,operator:q,setOperator:S,operators:V,setOperators:P,column:k,setColumn:C,values:M,setValues:b,pickedValues:h,setPickedValues:y,initialiseFilterValues:A,allowedColumnsMetaData:w}=s.useDataGridFilter(i,c,g);return"ADD"!==i||c.some((e=>!e.allowSingleFilterOnly||!g.filters.some((t=>t.column===e.name))))?e.createElement(e.Fragment,null,e.createElement(a.DataGridFilterTag,{mode:i,onFilterOpen:()=>{O(!G),G||A(n)},onFilterRemove:()=>{if(!n)return;const{id:e}=n;p&&p(e),T(),O(!1)},triggerRef:v,ref:j,filter:n,translations:F,customEditTagContent:f,columnsMetadata:c}),t.createPortal(e.createElement(l.DataGridFilterPopover,{popoverRef:R,anchorRef:j,isOpen:G,translations:D,column:k,columnsMetadata:w,values:M,pickedValues:h,operator:q,operators:V,onFilterSubmit:()=>{if("ADD"===i){const e=o.generateID();d&&d({id:e,column:k,operator:q,value:h})}else if("EDIT"===i&&n){const{id:e}=n;m&&m({id:e,column:k,operator:q,value:h})}T(),O(!1)},resetFields:T,setFilterOpen:O,setColumn:C,setOperator:S,setOperators:P,setValues:b,setPickedValues:y}),E)):e.createElement(e.Fragment,null)};
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=require("react-dom"),r=require("../../../hooks/useGetDomRoot.cjs.js"),o=require("../../../util/helper.cjs.js"),a=require("./DataGridFilterTag.cjs.js"),s=require("./DataGridFilterPopover.cjs.js"),l=require("./DataGridFilterService.cjs.js");exports.DataGridFilter=({mode:i,filter:n,domRoot:u,columnsMetadata:c,onFilterAdd:d,onFilterEdit:m,onFilterDelete:p,tagTranslations:F,popoverTranslations:D,customEditTagContent:f,filterState:g})=>{const j=e.useRef(null),v=e.useRef(null),R=e.useRef(null),[G,O]=e.useState(!1),{root:T}=r.useGetDomRoot(u,j),{resetFields:q,operator:E,setOperator:V,operators:P,setOperators:S,column:k,setColumn:C,values:M,setValues:b,pickedValues:h,setPickedValues:x,initialiseFilterValues:y,allowedColumnsMetaData:A}=l.useDataGridFilter(i,c,g);return e.createElement(e.Fragment,null,e.createElement(a.DataGridFilterTag,{mode:i,onFilterOpen:()=>{O(!G),G||y(n)},onFilterRemove:()=>{if(!n)return;const{id:e}=n;p&&p(e),q(),O(!1)},triggerRef:v,ref:j,filter:n,translations:F,customEditTagContent:f,columnsMetadata:c}),t.createPortal(e.createElement(s.DataGridFilterPopover,{popoverRef:R,anchorRef:j,isOpen:G,translations:D,column:k,columnsMetadata:A,values:M,pickedValues:h,operator:E,operators:P,onFilterSubmit:()=>{if("ADD"===i){const e=o.generateID();d&&d({id:e,column:k,operator:E,value:h})}else if("EDIT"===i&&n){const{id:e}=n;m&&m({id:e,column:k,operator:E,value:h})}q(),O(!1)},resetFields:q,setFilterOpen:O,setColumn:C,setOperator:V,setOperators:S,setValues:b,setPickedValues:x}),T))};
 //# sourceMappingURL=DataGridFilter.cjs.js.map

package/dist/components/DataGrid/DataGridFilters/DataGridFilter.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataGridFilter.cjs.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  FiltersState,\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  filterState: FiltersState;\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  filterState\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    allowedColumnsMetaData\n  } = useDataGridFilter(mode, columnsMetadata, filterState);\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  if (mode === \"ADD\") {\n    const hasAvailableFilters = columnsMetadata.some(\n      value =>\n        !value.allowSingleFilterOnly || !filterState.filters.some(f => f.column === value.name)\n    );\n    if (!hasAvailableFilters) {\n      return <></>;\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        columnsMetadata={columnsMetadata}\n      />\n      {createPortal(\n        <DataGridFilterPopover\n          popoverRef={popoverRef}\n          anchorRef={wrappingDivRef}\n          isOpen={filterOpen}\n          translations={popoverTranslations}\n          column={column}\n          columnsMetadata={allowedColumnsMetaData}\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":["mode","filter","domRoot","columnsMetadata","onFilterAdd","onFilterEdit","onFilterDelete","tagTranslations","popoverTranslations","customEditTagContent","filterState","wrappingDivRef","useRef","triggerRef","popoverRef","filterOpen","setFilterOpen","useState","root","useGetDomRoot","resetFields","operator","setOperator","operators","setOperators","column","setColumn","values","setValues","pickedValues","setPickedValues","initialiseFilterValues","allowedColumnsMetaData","useDataGridFilter","some","value","allowSingleFilterOnly","filters","f","name","Fragment","React","createElement","DataGridFilterTag","onFilterOpen","onFilterRemove","id","ref","translations","createPortal","DataGridFilterPopover","anchorRef","isOpen","onFilterSubmit","generateID"],"mappings":"iXA8C8B,EAC5BA,OACAC,SACAC,UACAC,kBACAC,cACAC,eACAC,iBACAC,kBACAC,sBACAC,uBACAC,kBAEM,MAAAC,EAAiBC,SAAuB,MACxCC,EAAaD,SAA0B,MACvCE,EAAaF,SAAuB,OAEnCG,EAAYC,GAAiBC,EAAAA,UAAS,IACvCC,KAAEA,GAASC,gBAAcjB,EAASS,IAClCS,YACJA,EAAAC,SACAA,EAAAC,YACAA,EAAAC,UACAA,EAAAC,aACAA,EAAAC,OACAA,EAAAC,UACAA,EAAAC,OACAA,EAAAC,UACAA,EAAAC,aACAA,EAAAC,gBACAA,EAAAC,uBACAA,EAAAC,uBACAA,GACEC,oBAAkBjC,EAAMG,EAAiBO,GAiC7C,MAAa,QAATV,GAC0BG,EAAgB+B,MAExCC,IAACA,EAAMC,wBAA0B1B,EAAY2B,QAAQH,MAAUI,GAAAA,EAAEb,SAAWU,EAAMI,yBAQrFC,EACCA,SAAA,KAAAC,EAAAC,cAACC,EAAAA,kBAAA,CACC3C,OACA4C,aArBe,KACnB5B,GAAeD,GACVA,GACHgB,EAAuB9B,EAAM,EAmB3B4C,eAjCiB,KACrB,IAAK5C,EACH,OAGI,MAAA6C,GAAEA,GAAO7C,EACfK,GAAkBA,EAAewC,GAErB1B,IACZJ,GAAc,EAAK,EAyBfH,aACAkC,IAAKpC,EACLV,SACA+C,aAAczC,EACdE,uBACAN,oBAED8C,EAAAA,aACCR,EAAAC,cAACQ,EAAAA,sBAAA,CACCpC,aACAqC,UAAWxC,EACXyC,OAAQrC,EACRiC,aAAcxC,EACdiB,SACAtB,gBAAiB6B,EACjBL,SACAE,eACAR,WACAE,YACA8B,eAlEe,KACrB,GAAa,QAATrD,EAAgB,CACZ,MAAA8C,EAAKQ,EAAAA,aACXlD,GAAeA,EAAY,CAAE0C,KAAIrB,SAAQJ,WAAUc,MAAON,GAAc,MAAA,GACtD,SAAT7B,GAAmBC,EAAQ,CAC9B,MAAA6C,GAAEA,GAAO7C,EACfI,GAAgBA,EAAa,CAAEyC,KAAIrB,SAAQJ,WAAUc,MAAON,GAAc,CAGhET,IACZJ,GAAc,EAAK,EAyDbI,cACAJ,gBACAU,YACAJ,cACAE,eACAI,YACAE,oBAEFZ,IAtCOuB,EAAAC,cAAAD,EAAAD,SAAA,KAwCX"}
+{"version":3,"file":"DataGridFilter.cjs.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  FiltersState,\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  filterState: FiltersState;\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  filterState\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    allowedColumnsMetaData\n  } = useDataGridFilter(mode, columnsMetadata, filterState);\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        columnsMetadata={columnsMetadata}\n      />\n      {createPortal(\n        <DataGridFilterPopover\n          popoverRef={popoverRef}\n          anchorRef={wrappingDivRef}\n          isOpen={filterOpen}\n          translations={popoverTranslations}\n          column={column}\n          columnsMetadata={allowedColumnsMetaData}\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":["mode","filter","domRoot","columnsMetadata","onFilterAdd","onFilterEdit","onFilterDelete","tagTranslations","popoverTranslations","customEditTagContent","filterState","wrappingDivRef","useRef","triggerRef","popoverRef","filterOpen","setFilterOpen","useState","root","useGetDomRoot","resetFields","operator","setOperator","operators","setOperators","column","setColumn","values","setValues","pickedValues","setPickedValues","initialiseFilterValues","allowedColumnsMetaData","useDataGridFilter","Fragment","React","createElement","DataGridFilterTag","onFilterOpen","onFilterRemove","id","ref","translations","createPortal","DataGridFilterPopover","anchorRef","isOpen","onFilterSubmit","generateID","value"],"mappings":"iXA8C8B,EAC5BA,OACAC,SACAC,UACAC,kBACAC,cACAC,eACAC,iBACAC,kBACAC,sBACAC,uBACAC,kBAEM,MAAAC,EAAiBC,SAAuB,MACxCC,EAAaD,SAA0B,MACvCE,EAAaF,SAAuB,OAEnCG,EAAYC,GAAiBC,EAAAA,UAAS,IACvCC,KAAEA,GAASC,gBAAcjB,EAASS,IAClCS,YACJA,EAAAC,SACAA,EAAAC,YACAA,EAAAC,UACAA,EAAAC,aACAA,EAAAC,OACAA,EAAAC,UACAA,EAAAC,OACAA,EAAAC,UACAA,EAAAC,aACAA,EAAAC,gBACAA,EAAAC,uBACAA,EAAAC,uBACAA,GACEC,oBAAkBjC,EAAMG,EAAiBO,GAiC7C,uBACGwB,EACCA,SAAA,KAAAC,EAAAC,cAACC,EAAAA,kBAAA,CACCrC,OACAsC,aAXe,KACnBtB,GAAeD,GACVA,GACHgB,EAAuB9B,EAAM,EAS3BsC,eAvBiB,KACrB,IAAKtC,EACH,OAGI,MAAAuC,GAAEA,GAAOvC,EACfK,GAAkBA,EAAekC,GAErBpB,IACZJ,GAAc,EAAK,EAefH,aACA4B,IAAK9B,EACLV,SACAyC,aAAcnC,EACdE,uBACAN,oBAEDwC,EAAAA,aACCR,EAAAC,cAACQ,EAAAA,sBAAA,CACC9B,aACA+B,UAAWlC,EACXmC,OAAQ/B,EACR2B,aAAclC,EACdiB,SACAtB,gBAAiB6B,EACjBL,SACAE,eACAR,WACAE,YACAwB,eAxDe,KACrB,GAAa,QAAT/C,EAAgB,CACZ,MAAAwC,EAAKQ,EAAAA,aACX5C,GAAeA,EAAY,CAAEoC,KAAIf,SAAQJ,WAAU4B,MAAOpB,GAAc,MAAA,GACtD,SAAT7B,GAAmBC,EAAQ,CAC9B,MAAAuC,GAAEA,GAAOvC,EACfI,GAAgBA,EAAa,CAAEmC,KAAIf,SAAQJ,WAAU4B,MAAOpB,GAAc,CAGhET,IACZJ,GAAc,EAAK,EA+CbI,cACAJ,gBACAU,YACAJ,cACAE,eACAI,YACAE,oBAEFZ,GAEJ"}

package/dist/components/DataGrid/DataGridFilters/DataGridFilter.es.js

@@ -64,14 +64,6 @@ const DataGridFilter = ({
       initialiseFilterValues(filter);
     }
   };
-  if (mode === "ADD") {
-    const hasAvailableFilters = columnsMetadata.some(
-      (value) => !value.allowSingleFilterOnly || !filterState.filters.some((f) => f.column === value.name)
-    );
-    if (!hasAvailableFilters) {
-      return /* @__PURE__ */ React.createElement(React.Fragment, null);
-    }
-  }
   return /* @__PURE__ */ React.createElement(Fragment, null, /* @__PURE__ */ React.createElement(
     DataGridFilterTag,
     {

package/dist/components/DataGrid/DataGridFilters/DataGridFilter.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataGridFilter.es.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  FiltersState,\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  filterState: FiltersState;\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  filterState\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    allowedColumnsMetaData\n  } = useDataGridFilter(mode, columnsMetadata, filterState);\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  if (mode === \"ADD\") {\n    const hasAvailableFilters = columnsMetadata.some(\n      value =>\n        !value.allowSingleFilterOnly || !filterState.filters.some(f => f.column === value.name)\n    );\n    if (!hasAvailableFilters) {\n      return <></>;\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        columnsMetadata={columnsMetadata}\n      />\n      {createPortal(\n        <DataGridFilterPopover\n          popoverRef={popoverRef}\n          anchorRef={wrappingDivRef}\n          isOpen={filterOpen}\n          translations={popoverTranslations}\n          column={column}\n          columnsMetadata={allowedColumnsMetaData}\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":";;;;;;;AA8CO,MAAM,iBAAiB,CAAC;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAa;AACL,QAAA,iBAAiB,OAAuB,IAAI;AAC5C,QAAA,aAAa,OAA0B,IAAI;AAC3C,QAAA,aAAa,OAAuB,IAAI;AAE9C,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAClD,QAAM,EAAE,KAAS,IAAA,cAAc,SAAS,cAAc;AAChD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACE,IAAA,kBAAkB,MAAM,iBAAiB,WAAW;AAExD,QAAM,iBAAiB,MAAM;AAC3B,QAAI,SAAS,OAAO;AAClB,YAAM,KAAK,WAAW;AACtB,qBAAe,YAAY,EAAE,IAAI,QAAQ,UAAU,OAAO,cAAc;AAAA,IAAA,WAC/D,SAAS,UAAU,QAAQ;AAC9B,YAAA,EAAE,OAAO;AACf,sBAAgB,aAAa,EAAE,IAAI,QAAQ,UAAU,OAAO,cAAc;AAAA,IAAA;AAGhE,gBAAA;AACZ,kBAAc,KAAK;AAAA,EACrB;AAEA,QAAM,iBAAiB,MAAM;AAC3B,QAAI,CAAC,QAAQ;AACX;AAAA,IAAA;AAGI,UAAA,EAAE,OAAO;AACf,sBAAkB,eAAe,EAAE;AAEvB,gBAAA;AACZ,kBAAc,KAAK;AAAA,EACrB;AACA,QAAM,eAAe,MAAM;AACzB,kBAAc,CAAC,UAAU;AACzB,QAAI,CAAC,YAAY;AACf,6BAAuB,MAAM;AAAA,IAAA;AAAA,EAEjC;AAEA,MAAI,SAAS,OAAO;AAClB,UAAM,sBAAsB,gBAAgB;AAAA,MAC1C,CACE,UAAA,CAAC,MAAM,yBAAyB,CAAC,YAAY,QAAQ,KAAK,CAAK,MAAA,EAAE,WAAW,MAAM,IAAI;AAAA,IAC1F;AACA,QAAI,CAAC,qBAAqB;AACxB,aAAS,sBAAA,cAAA,MAAA,UAAA,IAAA;AAAA,IAAA;AAAA,EACX;AAGF,6CACG,UACC,MAAA,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA,cAAc;AAAA,MACd;AAAA,MACA;AAAA,IAAA;AAAA,EAAA,GAED;AAAA,IACC,sBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,QACX,QAAQ;AAAA,QACR,cAAc;AAAA,QACd;AAAA,QACA,iBAAiB;AAAA,QACjB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IACF;AAAA,IACA;AAAA,EAAA,CAEJ;AAEJ;"}
+{"version":3,"file":"DataGridFilter.es.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  FiltersState,\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  filterState: FiltersState;\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  filterState\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    allowedColumnsMetaData\n  } = useDataGridFilter(mode, columnsMetadata, filterState);\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        columnsMetadata={columnsMetadata}\n      />\n      {createPortal(\n        <DataGridFilterPopover\n          popoverRef={popoverRef}\n          anchorRef={wrappingDivRef}\n          isOpen={filterOpen}\n          translations={popoverTranslations}\n          column={column}\n          columnsMetadata={allowedColumnsMetaData}\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":";;;;;;;AA8CO,MAAM,iBAAiB,CAAC;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAa;AACL,QAAA,iBAAiB,OAAuB,IAAI;AAC5C,QAAA,aAAa,OAA0B,IAAI;AAC3C,QAAA,aAAa,OAAuB,IAAI;AAE9C,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAClD,QAAM,EAAE,KAAS,IAAA,cAAc,SAAS,cAAc;AAChD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACE,IAAA,kBAAkB,MAAM,iBAAiB,WAAW;AAExD,QAAM,iBAAiB,MAAM;AAC3B,QAAI,SAAS,OAAO;AAClB,YAAM,KAAK,WAAW;AACtB,qBAAe,YAAY,EAAE,IAAI,QAAQ,UAAU,OAAO,cAAc;AAAA,IAAA,WAC/D,SAAS,UAAU,QAAQ;AAC9B,YAAA,EAAE,OAAO;AACf,sBAAgB,aAAa,EAAE,IAAI,QAAQ,UAAU,OAAO,cAAc;AAAA,IAAA;AAGhE,gBAAA;AACZ,kBAAc,KAAK;AAAA,EACrB;AAEA,QAAM,iBAAiB,MAAM;AAC3B,QAAI,CAAC,QAAQ;AACX;AAAA,IAAA;AAGI,UAAA,EAAE,OAAO;AACf,sBAAkB,eAAe,EAAE;AAEvB,gBAAA;AACZ,kBAAc,KAAK;AAAA,EACrB;AACA,QAAM,eAAe,MAAM;AACzB,kBAAc,CAAC,UAAU;AACzB,QAAI,CAAC,YAAY;AACf,6BAAuB,MAAM;AAAA,IAAA;AAAA,EAEjC;AAEA,6CACG,UACC,MAAA,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA,cAAc;AAAA,MACd;AAAA,MACA;AAAA,IAAA;AAAA,EAAA,GAED;AAAA,IACC,sBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,QACX,QAAQ;AAAA,QACR,cAAc;AAAA,QACd;AAAA,QACA,iBAAiB;AAAA,QACjB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IACF;AAAA,IACA;AAAA,EAAA,CAEJ;AAEJ;"}

package/dist/components/DataGrid/DataGridFilters/DataGridFilter.module.scss.cjs.js

@@ -1,3 +1,3 @@
-!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('.DataGridFilter_sr-only_k4xuc{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.DataGridFilter_hidden_k4xuc{display:none}.DataGridFilter_slide-in_k4xuc{animation:DataGridFilter_slide-in_k4xuc .5s forwards}@media (prefers-reduced-motion: reduce){.DataGridFilter_slide-in_k4xuc{animation-duration:.1ms}}.DataGridFilter_slide-out_k4xuc{animation:DataGridFilter_slide-out_k4xuc .5s forwards}@media (prefers-reduced-motion: reduce){.DataGridFilter_slide-out_k4xuc{animation-duration:.1ms}}@keyframes DataGridFilter_slide-in_k4xuc{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes DataGridFilter_slide-out_k4xuc{0%{transform:translateY(0)}to{transform:translateY(100vh)}}/*!\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_filter-wrapper_k4xuc{display:flex;justify-content:center;align-items:center;gap:.375rem;min-height:1.5rem;padding:.25rem .75rem .25rem .5rem;border-radius:3.125rem;background-color:var(--color-blue-grey100)}.DataGridFilter_filter-wrapper_k4xuc:hover{background-color:var(--color-blue-grey200)}.DataGridFilter_filter-wrapper_k4xuc:active{background-color:var(--color-primary100)}.DataGridFilter_filter-wrapper_k4xuc .DataGridFilter_filter-button_k4xuc{display:flex;justify-content:flex-start;align-items:center;gap:.375rem;background:none;border:none;padding:0 .25rem;cursor:pointer}.DataGridFilter_filter-wrapper_k4xuc .DataGridFilter_filter-button_k4xuc:only-child{margin-right:-.25rem}.DataGridFilter_filter-wrapper_k4xuc .DataGridFilter_filter-button_k4xuc:focus-visible{outline:calc(.125 * var(--font-size)) solid var(--color-focus);outline-offset:0;border-radius:var(--focus-border-radius)}.DataGridFilter_filter-wrapper_k4xuc .DataGridFilter_remove-button_k4xuc{border-radius:1.25rem}.DataGridFilter_filter-wrapper_k4xuc .DataGridFilter_caption_k4xuc{font-size:var(--font-size-data-grid);line-height:var(--data-grid-line-height);margin:0;font-weight:400}.DataGridFilter_filter-wrapper_k4xuc .DataGridFilter_caption_k4xuc.DataGridFilter_bold_k4xuc{font-weight:600}.DataGridFilter_filter-wrapper_k4xuc .DataGridFilter_remove-icon_k4xuc{font-size:calc(.6 * var(--font-size))}.DataGridFilter_column-select-option_k4xuc{text-transform:capitalize}.DataGridFilter_popover_k4xuc{display:flex;flex-direction:column;align-items:flex-start;gap:1rem;padding:1rem .75rem;min-width:40rem}.DataGridFilter_popover_k4xuc .DataGridFilter_controls_k4xuc{width:100%;display:flex;gap:1rem}.DataGridFilter_popover_k4xuc .DataGridFilter_controls_k4xuc>*:first-child{flex-grow:1.8;flex-shrink:0;margin-top:0}.DataGridFilter_popover_k4xuc .DataGridFilter_controls_k4xuc>*:nth-child(2){flex-grow:1;flex-shrink:0;margin-top:0}.DataGridFilter_popover_k4xuc .DataGridFilter_controls_k4xuc>*:last-child{flex-basis:15rem;flex-grow:1.8;flex-shrink:0;margin-top:0}.DataGridFilter_popover_k4xuc .DataGridFilter_actions_k4xuc{display:flex;gap:1rem}')),document.head.appendChild(e)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}}();
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t="DataGridFilter_caption_k4xuc",e="DataGridFilter_popover_k4xuc",o="DataGridFilter_controls_k4xuc",r="DataGridFilter_actions_k4xuc",i={"filter-wrapper":"DataGridFilter_filter-wrapper_k4xuc","filter-button":"DataGridFilter_filter-button_k4xuc","remove-button":"DataGridFilter_remove-button_k4xuc",caption:t,"column-select-option":"DataGridFilter_column-select-option_k4xuc",popover:e,controls:o,actions:r};exports.actions=r,exports.caption=t,exports.controls=o,exports.default=i,exports.popover=e;
+!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('.DataGridFilter_sr-only_uJyTX{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.DataGridFilter_hidden_uJyTX{display:none}.DataGridFilter_slide-in_uJyTX{animation:DataGridFilter_slide-in_uJyTX .5s forwards}@media (prefers-reduced-motion: reduce){.DataGridFilter_slide-in_uJyTX{animation-duration:.1ms}}.DataGridFilter_slide-out_uJyTX{animation:DataGridFilter_slide-out_uJyTX .5s forwards}@media (prefers-reduced-motion: reduce){.DataGridFilter_slide-out_uJyTX{animation-duration:.1ms}}@keyframes DataGridFilter_slide-in_uJyTX{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes DataGridFilter_slide-out_uJyTX{0%{transform:translateY(0)}to{transform:translateY(100vh)}}/*!\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_filter-wrapper_uJyTX{display:flex;justify-content:center;align-items:center;gap:.375rem;min-height:1.5rem;padding:.25rem .75rem .25rem .5rem;border-radius:3.125rem;background-color:var(--color-blue-grey100)}.DataGridFilter_filter-wrapper_uJyTX:hover{background-color:var(--color-blue-grey200)}.DataGridFilter_filter-wrapper_uJyTX:active{background-color:var(--color-primary100)}.DataGridFilter_filter-wrapper_uJyTX .DataGridFilter_filter-button_uJyTX{display:flex;justify-content:flex-start;align-items:center;gap:.375rem;background:none;border:none;padding:0 .25rem;cursor:pointer}.DataGridFilter_filter-wrapper_uJyTX .DataGridFilter_filter-button_uJyTX:only-child{margin-right:-.25rem}.DataGridFilter_filter-wrapper_uJyTX .DataGridFilter_filter-button_uJyTX:focus-visible{outline:calc(.125 * var(--font-size)) solid var(--color-focus);outline-offset:0;border-radius:var(--focus-border-radius)}.DataGridFilter_filter-wrapper_uJyTX .DataGridFilter_remove-button_uJyTX{border-radius:1.25rem}.DataGridFilter_filter-wrapper_uJyTX .DataGridFilter_caption_uJyTX{font-size:var(--font-size-data-grid);line-height:var(--data-grid-line-height);margin:0;font-weight:400}.DataGridFilter_filter-wrapper_uJyTX .DataGridFilter_caption_uJyTX.DataGridFilter_bold_uJyTX{font-weight:600}.DataGridFilter_filter-wrapper_uJyTX .DataGridFilter_remove-icon_uJyTX{font-size:calc(.6 * var(--font-size))}.DataGridFilter_column-select-option_uJyTX{text-transform:capitalize}.DataGridFilter_popover_uJyTX{display:flex;flex-direction:column;align-items:flex-start;gap:1rem;padding:1rem .75rem;min-width:40rem}.DataGridFilter_popover_uJyTX .DataGridFilter_controls_uJyTX{width:100%;display:flex;gap:1rem}.DataGridFilter_popover_uJyTX .DataGridFilter_controls_uJyTX>*:first-child{flex-grow:1.8;flex-shrink:0;margin-top:0}.DataGridFilter_popover_uJyTX .DataGridFilter_controls_uJyTX>*:nth-child(2){flex-grow:1;flex-shrink:0;margin-top:0}.DataGridFilter_popover_uJyTX .DataGridFilter_controls_uJyTX>*:last-child{flex-basis:15rem;flex-grow:1.8;flex-shrink:0;margin-top:0}.DataGridFilter_popover_uJyTX .DataGridFilter_actions_uJyTX{display:flex;gap:1rem}')),document.head.appendChild(e)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}}();
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t="DataGridFilter_caption_uJyTX",e="DataGridFilter_popover_uJyTX",o="DataGridFilter_controls_uJyTX",r="DataGridFilter_actions_uJyTX",i={"filter-wrapper":"DataGridFilter_filter-wrapper_uJyTX","filter-button":"DataGridFilter_filter-button_uJyTX","remove-button":"DataGridFilter_remove-button_uJyTX",caption:t,"column-select-option":"DataGridFilter_column-select-option_uJyTX",popover:e,controls:o,actions:r};exports.actions=r,exports.caption=t,exports.controls=o,exports.default=i,exports.popover=e;
 //# sourceMappingURL=DataGridFilter.module.scss.cjs.js.map

package/dist/components/DataGrid/DataGridFilters/DataGridFilter.module.scss.es.js

@@ -1,14 +1,14 @@
-!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('.DataGridFilter_sr-only_k4xuc{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.DataGridFilter_hidden_k4xuc{display:none}.DataGridFilter_slide-in_k4xuc{animation:DataGridFilter_slide-in_k4xuc .5s forwards}@media (prefers-reduced-motion: reduce){.DataGridFilter_slide-in_k4xuc{animation-duration:.1ms}}.DataGridFilter_slide-out_k4xuc{animation:DataGridFilter_slide-out_k4xuc .5s forwards}@media (prefers-reduced-motion: reduce){.DataGridFilter_slide-out_k4xuc{animation-duration:.1ms}}@keyframes DataGridFilter_slide-in_k4xuc{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes DataGridFilter_slide-out_k4xuc{0%{transform:translateY(0)}to{transform:translateY(100vh)}}/*!\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_filter-wrapper_k4xuc{display:flex;justify-content:center;align-items:center;gap:.375rem;min-height:1.5rem;padding:.25rem .75rem .25rem .5rem;border-radius:3.125rem;background-color:var(--color-blue-grey100)}.DataGridFilter_filter-wrapper_k4xuc:hover{background-color:var(--color-blue-grey200)}.DataGridFilter_filter-wrapper_k4xuc:active{background-color:var(--color-primary100)}.DataGridFilter_filter-wrapper_k4xuc .DataGridFilter_filter-button_k4xuc{display:flex;justify-content:flex-start;align-items:center;gap:.375rem;background:none;border:none;padding:0 .25rem;cursor:pointer}.DataGridFilter_filter-wrapper_k4xuc .DataGridFilter_filter-button_k4xuc:only-child{margin-right:-.25rem}.DataGridFilter_filter-wrapper_k4xuc .DataGridFilter_filter-button_k4xuc:focus-visible{outline:calc(.125 * var(--font-size)) solid var(--color-focus);outline-offset:0;border-radius:var(--focus-border-radius)}.DataGridFilter_filter-wrapper_k4xuc .DataGridFilter_remove-button_k4xuc{border-radius:1.25rem}.DataGridFilter_filter-wrapper_k4xuc .DataGridFilter_caption_k4xuc{font-size:var(--font-size-data-grid);line-height:var(--data-grid-line-height);margin:0;font-weight:400}.DataGridFilter_filter-wrapper_k4xuc .DataGridFilter_caption_k4xuc.DataGridFilter_bold_k4xuc{font-weight:600}.DataGridFilter_filter-wrapper_k4xuc .DataGridFilter_remove-icon_k4xuc{font-size:calc(.6 * var(--font-size))}.DataGridFilter_column-select-option_k4xuc{text-transform:capitalize}.DataGridFilter_popover_k4xuc{display:flex;flex-direction:column;align-items:flex-start;gap:1rem;padding:1rem .75rem;min-width:40rem}.DataGridFilter_popover_k4xuc .DataGridFilter_controls_k4xuc{width:100%;display:flex;gap:1rem}.DataGridFilter_popover_k4xuc .DataGridFilter_controls_k4xuc>*:first-child{flex-grow:1.8;flex-shrink:0;margin-top:0}.DataGridFilter_popover_k4xuc .DataGridFilter_controls_k4xuc>*:nth-child(2){flex-grow:1;flex-shrink:0;margin-top:0}.DataGridFilter_popover_k4xuc .DataGridFilter_controls_k4xuc>*:last-child{flex-basis:15rem;flex-grow:1.8;flex-shrink:0;margin-top:0}.DataGridFilter_popover_k4xuc .DataGridFilter_actions_k4xuc{display:flex;gap:1rem}')),document.head.appendChild(e)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}}();
-const caption = "DataGridFilter_caption_k4xuc";
-const popover = "DataGridFilter_popover_k4xuc";
-const controls = "DataGridFilter_controls_k4xuc";
-const actions = "DataGridFilter_actions_k4xuc";
+!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('.DataGridFilter_sr-only_uJyTX{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.DataGridFilter_hidden_uJyTX{display:none}.DataGridFilter_slide-in_uJyTX{animation:DataGridFilter_slide-in_uJyTX .5s forwards}@media (prefers-reduced-motion: reduce){.DataGridFilter_slide-in_uJyTX{animation-duration:.1ms}}.DataGridFilter_slide-out_uJyTX{animation:DataGridFilter_slide-out_uJyTX .5s forwards}@media (prefers-reduced-motion: reduce){.DataGridFilter_slide-out_uJyTX{animation-duration:.1ms}}@keyframes DataGridFilter_slide-in_uJyTX{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes DataGridFilter_slide-out_uJyTX{0%{transform:translateY(0)}to{transform:translateY(100vh)}}/*!\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_filter-wrapper_uJyTX{display:flex;justify-content:center;align-items:center;gap:.375rem;min-height:1.5rem;padding:.25rem .75rem .25rem .5rem;border-radius:3.125rem;background-color:var(--color-blue-grey100)}.DataGridFilter_filter-wrapper_uJyTX:hover{background-color:var(--color-blue-grey200)}.DataGridFilter_filter-wrapper_uJyTX:active{background-color:var(--color-primary100)}.DataGridFilter_filter-wrapper_uJyTX .DataGridFilter_filter-button_uJyTX{display:flex;justify-content:flex-start;align-items:center;gap:.375rem;background:none;border:none;padding:0 .25rem;cursor:pointer}.DataGridFilter_filter-wrapper_uJyTX .DataGridFilter_filter-button_uJyTX:only-child{margin-right:-.25rem}.DataGridFilter_filter-wrapper_uJyTX .DataGridFilter_filter-button_uJyTX:focus-visible{outline:calc(.125 * var(--font-size)) solid var(--color-focus);outline-offset:0;border-radius:var(--focus-border-radius)}.DataGridFilter_filter-wrapper_uJyTX .DataGridFilter_remove-button_uJyTX{border-radius:1.25rem}.DataGridFilter_filter-wrapper_uJyTX .DataGridFilter_caption_uJyTX{font-size:var(--font-size-data-grid);line-height:var(--data-grid-line-height);margin:0;font-weight:400}.DataGridFilter_filter-wrapper_uJyTX .DataGridFilter_caption_uJyTX.DataGridFilter_bold_uJyTX{font-weight:600}.DataGridFilter_filter-wrapper_uJyTX .DataGridFilter_remove-icon_uJyTX{font-size:calc(.6 * var(--font-size))}.DataGridFilter_column-select-option_uJyTX{text-transform:capitalize}.DataGridFilter_popover_uJyTX{display:flex;flex-direction:column;align-items:flex-start;gap:1rem;padding:1rem .75rem;min-width:40rem}.DataGridFilter_popover_uJyTX .DataGridFilter_controls_uJyTX{width:100%;display:flex;gap:1rem}.DataGridFilter_popover_uJyTX .DataGridFilter_controls_uJyTX>*:first-child{flex-grow:1.8;flex-shrink:0;margin-top:0}.DataGridFilter_popover_uJyTX .DataGridFilter_controls_uJyTX>*:nth-child(2){flex-grow:1;flex-shrink:0;margin-top:0}.DataGridFilter_popover_uJyTX .DataGridFilter_controls_uJyTX>*:last-child{flex-basis:15rem;flex-grow:1.8;flex-shrink:0;margin-top:0}.DataGridFilter_popover_uJyTX .DataGridFilter_actions_uJyTX{display:flex;gap:1rem}')),document.head.appendChild(e)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}}();
+const caption = "DataGridFilter_caption_uJyTX";
+const popover = "DataGridFilter_popover_uJyTX";
+const controls = "DataGridFilter_controls_uJyTX";
+const actions = "DataGridFilter_actions_uJyTX";
 const classes = {
-  "filter-wrapper": "DataGridFilter_filter-wrapper_k4xuc",
-  "filter-button": "DataGridFilter_filter-button_k4xuc",
-  "remove-button": "DataGridFilter_remove-button_k4xuc",
+  "filter-wrapper": "DataGridFilter_filter-wrapper_uJyTX",
+  "filter-button": "DataGridFilter_filter-button_uJyTX",
+  "remove-button": "DataGridFilter_remove-button_uJyTX",
   caption,
-  "column-select-option": "DataGridFilter_column-select-option_k4xuc",
+  "column-select-option": "DataGridFilter_column-select-option_uJyTX",
   popover,
   controls,
   actions

package/dist/components/DataGrid/DataGridFilters/DataGridFilterPopover.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=require("./DataGridFilter.module.scss.cjs.js"),a=require("../../Button/Button.cjs.js"),l=require("../../Form/Select/SingleSelect/Option.cjs.js"),r=require("../../Form/Wrapper/SelectWrapper/SelectWrapper.cjs.js"),o=require("../../Popover/Popover.cjs.js"),s=require("./DataGridFilterValueSelect.cjs.js"),n=require("./DataGridFilters.interfaces.cjs.js"),c=require("../../../hooks/useRepeatFocus.cjs.js");exports.DataGridFilterPopover=({popoverRef:u,anchorRef:i,isOpen:p,column:m,columnsMetadata:d,values:v,pickedValues:j,operator:f,operators:b,onFilterSubmit:F,resetFields:O,setFilterOpen:S,setColumn:E,setOperator:V,setOperators:g,setValues:h,setPickedValues:k,translations:q})=>{const{columnSelectLabel:P="Filter by",operatorSelectLabel:B="Operator",submitButtonTitle:y="Apply",cancelButtonTitle:D="Cancel"}=q||{};c.useRepeatFocus(u);const C=f&&!f.allowEmptyValues,G=Boolean(C&&0===j.length);return e.createElement(o.Popover,{tabIndex:-1,anchorEl:i,ref:u,show:p,placement:{horizontal:"left",vertical:"bottom"},transformOrigin:{horizontal:"left",vertical:"top"}},p&&e.createElement("div",{className:t.default.popover},e.createElement("div",{className:t.default.controls},e.createElement(r.SelectWrapper,{selectProps:{selectButtonProps:{autoFocus:!0}},label:P,value:m,name:"column",onChange:e=>{E(e.target.value);const t=d.find((({name:t})=>t===e.target.value));(null==t?void 0:t.operators)?(V(t.operators[0]),g(t.operators)):(V(Object.values(n.DefaultOperators)[0]),g(Object.values(n.DefaultOperators))),(null==t?void 0:t.defaultValues)?(k([]),h(t.defaultValues)):(k([]),h([]))}},d.map((({name:a,headline:r})=>e.createElement(l.Option,{className:t.default["column-select-option"],key:a,value:a},r)))),e.createElement(r.SelectWrapper,{label:B,value:(null==f?void 0:f.name)||"",name:"operator",onChange:e=>{const t=b.find((t=>t.name===e.target.value));V(t||null)}},b.map((t=>e.createElement(l.Option,{key:t.name,value:t.name},t.name)))),e.createElement(s.DataGridFilterValueSelect,{column:m,columnsMetadata:d,values:v,pickedValues:j,setValues:h,setPickedValues:k,translations:q,operator:f})),e.createElement("div",{className:t.default.actions},e.createElement(a.Button,{onClick:F,disabled:G},y),e.createElement(a.Button,{variant:"text",onClick:()=>{O(),S(!1)}},D))))};
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=require("./DataGridFilter.module.scss.cjs.js"),a=require("../../Button/Button.cjs.js"),l=require("../../Form/Select/SingleSelect/Option.cjs.js"),r=require("../../Form/Wrapper/SelectWrapper/SelectWrapper.cjs.js"),o=require("../../Popover/Popover.cjs.js"),s=require("./DataGridFilterValueSelect.cjs.js"),n=require("./DataGridFilters.interfaces.cjs.js"),c=require("../../../hooks/useRepeatFocus.cjs.js");exports.DataGridFilterPopover=({popoverRef:u,anchorRef:i,isOpen:p,column:m,columnsMetadata:d,values:v,pickedValues:j,operator:f,operators:b,onFilterSubmit:F,resetFields:O,setFilterOpen:S,setColumn:E,setOperator:V,setOperators:g,setValues:h,setPickedValues:k,translations:q})=>{const{columnSelectLabel:P="Filter by",operatorSelectLabel:B="Operator",submitButtonTitle:y="Apply",cancelButtonTitle:D="Cancel"}=q||{};c.useRepeatFocus(u);const C=f&&!f.allowEmptyValues,G=Boolean(C&&0===j.length);return e.createElement(o.Popover,{tabIndex:-1,anchorEl:i,ref:u,show:p,placement:{horizontal:"left",vertical:"bottom"},transformOrigin:{horizontal:"left",vertical:"top"}},e.createElement("div",{className:t.default.popover},e.createElement("div",{className:t.default.controls},e.createElement(r.SelectWrapper,{selectProps:{selectButtonProps:{autoFocus:!0}},label:P,value:m,name:"column",onChange:e=>{E(e.target.value);const t=d.find((({name:t})=>t===e.target.value));(null==t?void 0:t.operators)?(V(t.operators[0]),g(t.operators)):(V(Object.values(n.DefaultOperators)[0]),g(Object.values(n.DefaultOperators))),(null==t?void 0:t.defaultValues)?(k([]),h(t.defaultValues)):(k([]),h([]))}},d.map((({name:a,headline:r})=>e.createElement(l.Option,{className:t.default["column-select-option"],key:a,value:a},r)))),e.createElement(r.SelectWrapper,{label:B,value:(null==f?void 0:f.name)||"",name:"operator",onChange:e=>{const t=b.find((t=>t.name===e.target.value));V(t||null)}},b.map((t=>e.createElement(l.Option,{key:t.name,value:t.name},t.name)))),e.createElement(s.DataGridFilterValueSelect,{column:m,columnsMetadata:d,values:v,pickedValues:j,setValues:h,setPickedValues:k,translations:q,operator:f})),e.createElement("div",{className:t.default.actions},e.createElement(a.Button,{onClick:F,disabled:G},y),e.createElement(a.Button,{variant:"text",onClick:()=>{O(),S(!1)}},D))))};
 //# sourceMappingURL=DataGridFilterPopover.cjs.js.map

package/dist/components/DataGrid/DataGridFilters/DataGridFilterPopover.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataGridFilterPopover.cjs.js","sources":["../../../../src/components/DataGrid/DataGridFilters/DataGridFilterPopover.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 from \"react\";\nimport classes from \"./DataGridFilter.module.scss\";\nimport { Button } from \"../../Button/Button\";\nimport { Option } from \"../../Form/Select/SingleSelect/Option\";\nimport { SelectWrapper } from \"../../Form/Wrapper/SelectWrapper/SelectWrapper\";\nimport { Popover } from \"../../Popover/Popover\";\nimport { DataGridFilterValueSelect } from \"./DataGridFilterValueSelect\";\nimport {\n  DataGridColumnMetadata,\n  DefaultOperators,\n  FilterOperator,\n  PopoverTranslations\n} from \"./DataGridFilters.interfaces\";\nimport { useRepeatFocus } from \"../../../hooks/useRepeatFocus\";\n\nexport type Props = {\n  popoverRef: React.RefObject<HTMLDivElement>;\n  anchorRef?: React.RefObject<HTMLDivElement>;\n  isOpen: boolean;\n  column: string;\n  columnsMetadata: DataGridColumnMetadata[];\n  values: string[];\n  pickedValues: string[];\n  operator: FilterOperator | null;\n  operators: FilterOperator[];\n  onFilterSubmit: () => void;\n  resetFields: () => void;\n  setFilterOpen: (value: React.SetStateAction<boolean>) => void;\n  setColumn: (column: React.SetStateAction<string>) => void;\n  setOperator: (operator: React.SetStateAction<FilterOperator | null>) => void;\n  setOperators: (operators: React.SetStateAction<FilterOperator[]>) => void;\n  setValues: (values: React.SetStateAction<string[]>) => void;\n  setPickedValues: (pickedValues: React.SetStateAction<string[]>) => void;\n  translations?: PopoverTranslations;\n};\n\nexport const DataGridFilterPopover = ({\n  popoverRef,\n  anchorRef,\n  isOpen,\n  column,\n  columnsMetadata,\n  values,\n  pickedValues,\n  operator,\n  operators,\n  onFilterSubmit,\n  resetFields,\n  setFilterOpen,\n  setColumn,\n  setOperator,\n  setOperators,\n  setValues,\n  setPickedValues,\n  translations\n}: Props) => {\n  const {\n    columnSelectLabel = \"Filter by\",\n    operatorSelectLabel = \"Operator\",\n    submitButtonTitle = \"Apply\",\n    cancelButtonTitle = \"Cancel\"\n  } = translations || {};\n  useRepeatFocus(popoverRef);\n\n  const isValueRequired = operator && !operator.allowEmptyValues;\n  const hasValidationError = Boolean(isValueRequired && pickedValues.length === 0);\n\n  return (\n    <Popover\n      tabIndex={-1}\n      anchorEl={anchorRef}\n      ref={popoverRef}\n      show={isOpen}\n      placement={{ horizontal: \"left\", vertical: \"bottom\" }}\n      transformOrigin={{ horizontal: \"left\", vertical: \"top\" }}\n    >\n      {isOpen && (\n        <div className={classes[\"popover\"]}>\n          <div className={classes[\"controls\"]}>\n            <SelectWrapper\n              selectProps={{ selectButtonProps: { autoFocus: true } }}\n              label={columnSelectLabel}\n              value={column}\n              name={\"column\"}\n              onChange={e => {\n                setColumn(e.target.value);\n                const columnMetadata = columnsMetadata.find(({ name }) => name === e.target.value);\n\n                if (columnMetadata?.operators) {\n                  setOperator(columnMetadata.operators[0]);\n                  setOperators(columnMetadata.operators);\n                } else {\n                  setOperator(Object.values(DefaultOperators)[0]);\n                  setOperators(Object.values(DefaultOperators));\n                }\n\n                if (columnMetadata?.defaultValues) {\n                  setPickedValues([]);\n                  setValues(columnMetadata.defaultValues);\n                } else {\n                  setPickedValues([]);\n                  setValues([]);\n                }\n              }}\n            >\n              {columnsMetadata.map(({ name, headline }) => (\n                <Option className={classes[\"column-select-option\"]} key={name} value={name}>\n                  {headline}\n                </Option>\n              ))}\n            </SelectWrapper>\n            <SelectWrapper\n              label={operatorSelectLabel}\n              value={operator?.name || \"\"}\n              name={\"operator\"}\n              onChange={e => {\n                const selectedOperator = operators.find(op => op.name === e.target.value);\n                setOperator(selectedOperator || null);\n              }}\n            >\n              {operators.map(operator => (\n                <Option key={operator.name} value={operator.name}>\n                  {operator.name}\n                </Option>\n              ))}\n            </SelectWrapper>\n            <DataGridFilterValueSelect\n              column={column}\n              columnsMetadata={columnsMetadata}\n              values={values}\n              pickedValues={pickedValues}\n              setValues={setValues}\n              setPickedValues={setPickedValues}\n              translations={translations}\n              operator={operator}\n            />\n          </div>\n          <div className={classes[\"actions\"]}>\n            <Button onClick={onFilterSubmit} disabled={hasValidationError}>\n              {submitButtonTitle}\n            </Button>\n            <Button\n              variant=\"text\"\n              onClick={() => {\n                resetFields();\n                setFilterOpen(false);\n              }}\n            >\n              {cancelButtonTitle}\n            </Button>\n          </div>\n        </div>\n      )}\n    </Popover>\n  );\n};\n"],"names":["popoverRef","anchorRef","isOpen","column","columnsMetadata","values","pickedValues","operator","operators","onFilterSubmit","resetFields","setFilterOpen","setColumn","setOperator","setOperators","setValues","setPickedValues","translations","columnSelectLabel","operatorSelectLabel","submitButtonTitle","cancelButtonTitle","useRepeatFocus","isValueRequired","allowEmptyValues","hasValidationError","Boolean","length","React","createElement","Popover","tabIndex","anchorEl","ref","show","placement","horizontal","vertical","transformOrigin","className","classes","default","SelectWrapper","selectProps","selectButtonProps","autoFocus","label","value","name","onChange","e","target","columnMetadata","find","Object","DefaultOperators","defaultValues","map","headline","Option","key","selectedOperator","op","DataGridFilterValueSelect","Button","onClick","disabled","variant"],"mappings":"0hBAoDqC,EACnCA,aACAC,YACAC,SACAC,SACAC,kBACAC,SACAC,eACAC,WACAC,YACAC,iBACAC,cACAC,gBACAC,YACAC,cACAC,eACAC,YACAC,kBACAC,mBAEM,MAAAC,kBACJA,EAAoB,YAAAC,oBACpBA,EAAsB,WAAAC,kBACtBA,EAAoB,QAAAC,kBACpBA,EAAoB,UAClBJ,GAAgB,CAAC,EACrBK,EAAAA,eAAetB,GAET,MAAAuB,EAAkBhB,IAAaA,EAASiB,iBACxCC,EAAqBC,QAAQH,GAA2C,IAAxBjB,EAAaqB,QAGjE,OAAAC,EAAAC,cAACC,EAAAA,QAAA,CACCC,UAAU,EACVC,SAAU/B,EACVgC,IAAKjC,EACLkC,KAAMhC,EACNiC,UAAW,CAAEC,WAAY,OAAQC,SAAU,UAC3CC,gBAAiB,CAAEF,WAAY,OAAQC,SAAU,QAEhDnC,KACC2B,cAAC,MAAI,CAAAU,UAAWC,EAAAA,QAAiB,SAC/BZ,EAAAC,cAAC,MAAI,CAAAU,UAAWC,EAAQC,QAAU,UAChCb,EAAAC,cAACa,EAAAA,cAAA,CACCC,YAAa,CAAEC,kBAAmB,CAAEC,WAAW,IAC/CC,MAAO5B,EACP6B,MAAO5C,EACP6C,KAAM,SACNC,SAAeC,IACHtC,EAAAsC,EAAEC,OAAOJ,OACb,MAAAK,EAAiBhD,EAAgBiD,MAAK,EAAGL,UAAWA,IAASE,EAAEC,OAAOJ,eAExEK,WAAgB5C,YACNK,EAAAuC,EAAe5C,UAAU,IACrCM,EAAasC,EAAe5C,aAE5BK,EAAYyC,OAAOjD,OAAOkD,EAAAA,kBAAkB,IAC/BzC,EAAAwC,OAAOjD,OAAOkD,EAAAA,2BAGzBH,WAAgBI,gBAClBxC,EAAgB,IAChBD,EAAUqC,EAAeI,iBAEzBxC,EAAgB,IAChBD,EAAU,IAAE,GAIfX,EAAgBqD,KAAI,EAAGT,OAAMU,cAC3B9B,EAAAC,cAAA8B,EAAAA,OAAA,CAAOpB,UAAWC,EAAAC,QAAQ,wBAAyBmB,IAAKZ,EAAMD,MAAOC,GACnEU,MAIP9B,EAAAC,cAACa,EAAAA,cAAA,CACCI,MAAO3B,EACP4B,aAAOxC,WAAUyC,OAAQ,GACzBA,KAAM,WACNC,SAAeC,IACP,MAAAW,EAAmBrD,EAAU6C,MAAKS,GAAMA,EAAGd,OAASE,EAAEC,OAAOJ,QACnElC,EAAYgD,GAAoB,KAAI,GAGrCrD,EAAUiD,KAAIlD,mBACZoD,EAAAA,OAAO,CAAAC,IAAKrD,EAASyC,KAAMD,MAAOxC,EAASyC,MACzCzC,EAASyC,SAIhBpB,EAAAC,cAACkC,EAAAA,0BAAA,CACC5D,SACAC,kBACAC,SACAC,eACAS,YACAC,kBACAC,eACAV,cAGHqB,EAAAC,cAAA,MAAA,CAAIU,UAAWC,EAAQC,QAAS,WAC/BZ,cAACmC,UAAOC,QAASxD,EAAgByD,SAAUzC,GACxCL,GAEHQ,EAAAC,cAACmC,EAAAA,OAAA,CACCG,QAAQ,OACRF,QAAS,KACKvD,IACZC,GAAc,EAAK,GAGpBU,KAKX"}
+{"version":3,"file":"DataGridFilterPopover.cjs.js","sources":["../../../../src/components/DataGrid/DataGridFilters/DataGridFilterPopover.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 from \"react\";\nimport classes from \"./DataGridFilter.module.scss\";\nimport { Button } from \"../../Button/Button\";\nimport { Option } from \"../../Form/Select/SingleSelect/Option\";\nimport { SelectWrapper } from \"../../Form/Wrapper/SelectWrapper/SelectWrapper\";\nimport { Popover } from \"../../Popover/Popover\";\nimport { DataGridFilterValueSelect } from \"./DataGridFilterValueSelect\";\nimport {\n  DataGridColumnMetadata,\n  DefaultOperators,\n  FilterOperator,\n  PopoverTranslations\n} from \"./DataGridFilters.interfaces\";\nimport { useRepeatFocus } from \"../../../hooks/useRepeatFocus\";\n\nexport type Props = {\n  popoverRef: React.RefObject<HTMLDivElement>;\n  anchorRef?: React.RefObject<HTMLDivElement>;\n  isOpen: boolean;\n  column: string;\n  columnsMetadata: DataGridColumnMetadata[];\n  values: string[];\n  pickedValues: string[];\n  operator: FilterOperator | null;\n  operators: FilterOperator[];\n  onFilterSubmit: () => void;\n  resetFields: () => void;\n  setFilterOpen: (value: React.SetStateAction<boolean>) => void;\n  setColumn: (column: React.SetStateAction<string>) => void;\n  setOperator: (operator: React.SetStateAction<FilterOperator | null>) => void;\n  setOperators: (operators: React.SetStateAction<FilterOperator[]>) => void;\n  setValues: (values: React.SetStateAction<string[]>) => void;\n  setPickedValues: (pickedValues: React.SetStateAction<string[]>) => void;\n  translations?: PopoverTranslations;\n};\n\nexport const DataGridFilterPopover = ({\n  popoverRef,\n  anchorRef,\n  isOpen,\n  column,\n  columnsMetadata,\n  values,\n  pickedValues,\n  operator,\n  operators,\n  onFilterSubmit,\n  resetFields,\n  setFilterOpen,\n  setColumn,\n  setOperator,\n  setOperators,\n  setValues,\n  setPickedValues,\n  translations\n}: Props) => {\n  const {\n    columnSelectLabel = \"Filter by\",\n    operatorSelectLabel = \"Operator\",\n    submitButtonTitle = \"Apply\",\n    cancelButtonTitle = \"Cancel\"\n  } = translations || {};\n  useRepeatFocus(popoverRef);\n\n  const isValueRequired = operator && !operator.allowEmptyValues;\n  const hasValidationError = Boolean(isValueRequired && pickedValues.length === 0);\n\n  return (\n    <Popover\n      tabIndex={-1}\n      anchorEl={anchorRef}\n      ref={popoverRef}\n      show={isOpen}\n      placement={{ horizontal: \"left\", vertical: \"bottom\" }}\n      transformOrigin={{ horizontal: \"left\", vertical: \"top\" }}\n    >\n      <div className={classes[\"popover\"]}>\n        <div className={classes[\"controls\"]}>\n          <SelectWrapper\n            selectProps={{ selectButtonProps: { autoFocus: true } }}\n            label={columnSelectLabel}\n            value={column}\n            name={\"column\"}\n            onChange={e => {\n              setColumn(e.target.value);\n              const columnMetadata = columnsMetadata.find(({ name }) => name === e.target.value);\n\n              if (columnMetadata?.operators) {\n                setOperator(columnMetadata.operators[0]);\n                setOperators(columnMetadata.operators);\n              } else {\n                setOperator(Object.values(DefaultOperators)[0]);\n                setOperators(Object.values(DefaultOperators));\n              }\n\n              if (columnMetadata?.defaultValues) {\n                setPickedValues([]);\n                setValues(columnMetadata.defaultValues);\n              } else {\n                setPickedValues([]);\n                setValues([]);\n              }\n            }}\n          >\n            {columnsMetadata.map(({ name, headline }) => (\n              <Option className={classes[\"column-select-option\"]} key={name} value={name}>\n                {headline}\n              </Option>\n            ))}\n          </SelectWrapper>\n          <SelectWrapper\n            label={operatorSelectLabel}\n            value={operator?.name || \"\"}\n            name={\"operator\"}\n            onChange={e => {\n              const selectedOperator = operators.find(op => op.name === e.target.value);\n              setOperator(selectedOperator || null);\n            }}\n          >\n            {operators.map(operator => (\n              <Option key={operator.name} value={operator.name}>\n                {operator.name}\n              </Option>\n            ))}\n          </SelectWrapper>\n          <DataGridFilterValueSelect\n            column={column}\n            columnsMetadata={columnsMetadata}\n            values={values}\n            pickedValues={pickedValues}\n            setValues={setValues}\n            setPickedValues={setPickedValues}\n            translations={translations}\n            operator={operator}\n          />\n        </div>\n        <div className={classes[\"actions\"]}>\n          <Button onClick={onFilterSubmit} disabled={hasValidationError}>\n            {submitButtonTitle}\n          </Button>\n          <Button\n            variant=\"text\"\n            onClick={() => {\n              resetFields();\n              setFilterOpen(false);\n            }}\n          >\n            {cancelButtonTitle}\n          </Button>\n        </div>\n      </div>\n    </Popover>\n  );\n};\n"],"names":["popoverRef","anchorRef","isOpen","column","columnsMetadata","values","pickedValues","operator","operators","onFilterSubmit","resetFields","setFilterOpen","setColumn","setOperator","setOperators","setValues","setPickedValues","translations","columnSelectLabel","operatorSelectLabel","submitButtonTitle","cancelButtonTitle","useRepeatFocus","isValueRequired","allowEmptyValues","hasValidationError","Boolean","length","React","createElement","Popover","tabIndex","anchorEl","ref","show","placement","horizontal","vertical","transformOrigin","className","classes","default","SelectWrapper","selectProps","selectButtonProps","autoFocus","label","value","name","onChange","e","target","columnMetadata","find","Object","DefaultOperators","defaultValues","map","headline","Option","key","selectedOperator","op","DataGridFilterValueSelect","Button","onClick","disabled","variant"],"mappings":"0hBAoDqC,EACnCA,aACAC,YACAC,SACAC,SACAC,kBACAC,SACAC,eACAC,WACAC,YACAC,iBACAC,cACAC,gBACAC,YACAC,cACAC,eACAC,YACAC,kBACAC,mBAEM,MAAAC,kBACJA,EAAoB,YAAAC,oBACpBA,EAAsB,WAAAC,kBACtBA,EAAoB,QAAAC,kBACpBA,EAAoB,UAClBJ,GAAgB,CAAC,EACrBK,EAAAA,eAAetB,GAET,MAAAuB,EAAkBhB,IAAaA,EAASiB,iBACxCC,EAAqBC,QAAQH,GAA2C,IAAxBjB,EAAaqB,QAGjE,OAAAC,EAAAC,cAACC,EAAAA,QAAA,CACCC,UAAU,EACVC,SAAU/B,EACVgC,IAAKjC,EACLkC,KAAMhC,EACNiC,UAAW,CAAEC,WAAY,OAAQC,SAAU,UAC3CC,gBAAiB,CAAEF,WAAY,OAAQC,SAAU,QAEjDT,EAAAC,cAAC,MAAI,CAAAU,UAAWC,EAAQC,QAAS,WAC/BZ,cAAC,MAAI,CAAAU,UAAWC,EAAAA,QAAkB,UAChCZ,EAAAC,cAACa,EAAAA,cAAA,CACCC,YAAa,CAAEC,kBAAmB,CAAEC,WAAW,IAC/CC,MAAO5B,EACP6B,MAAO5C,EACP6C,KAAM,SACNC,SAAeC,IACHtC,EAAAsC,EAAEC,OAAOJ,OACb,MAAAK,EAAiBhD,EAAgBiD,MAAK,EAAGL,UAAWA,IAASE,EAAEC,OAAOJ,eAExEK,WAAgB5C,YACNK,EAAAuC,EAAe5C,UAAU,IACrCM,EAAasC,EAAe5C,aAE5BK,EAAYyC,OAAOjD,OAAOkD,EAAAA,kBAAkB,IAC/BzC,EAAAwC,OAAOjD,OAAOkD,EAAAA,2BAGzBH,WAAgBI,gBAClBxC,EAAgB,IAChBD,EAAUqC,EAAeI,iBAEzBxC,EAAgB,IAChBD,EAAU,IAAE,GAIfX,EAAgBqD,KAAI,EAAGT,OAAMU,cAC3B9B,EAAAC,cAAA8B,EAAAA,OAAA,CAAOpB,UAAWC,EAAAC,QAAQ,wBAAyBmB,IAAKZ,EAAMD,MAAOC,GACnEU,MAIP9B,EAAAC,cAACa,EAAAA,cAAA,CACCI,MAAO3B,EACP4B,aAAOxC,WAAUyC,OAAQ,GACzBA,KAAM,WACNC,SAAeC,IACP,MAAAW,EAAmBrD,EAAU6C,MAAKS,GAAMA,EAAGd,OAASE,EAAEC,OAAOJ,QACnElC,EAAYgD,GAAoB,KAAI,GAGrCrD,EAAUiD,KAAIlD,mBACZoD,EAAAA,OAAO,CAAAC,IAAKrD,EAASyC,KAAMD,MAAOxC,EAASyC,MACzCzC,EAASyC,SAIhBpB,EAAAC,cAACkC,EAAAA,0BAAA,CACC5D,SACAC,kBACAC,SACAC,eACAS,YACAC,kBACAC,eACAV,cAGHqB,EAAAC,cAAA,MAAA,CAAIU,UAAWC,EAAQC,QAAS,WAC/BZ,cAACmC,UAAOC,QAASxD,EAAgByD,SAAUzC,GACxCL,GAEHQ,EAAAC,cAACmC,EAAAA,OAAA,CACCG,QAAQ,OACRF,QAAS,KACKvD,IACZC,GAAc,EAAK,GAGpBU,KAIT"}

package/dist/components/DataGrid/DataGridFilters/DataGridFilterPopover.es.js

@@ -46,7 +46,7 @@ const DataGridFilterPopover = ({
       placement: { horizontal: "left", vertical: "bottom" },
       transformOrigin: { horizontal: "left", vertical: "top" }
     },
-    isOpen && /* @__PURE__ */ React.createElement("div", { className: classes["popover"] }, /* @__PURE__ */ React.createElement("div", { className: classes["controls"] }, /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement("div", { className: classes["popover"] }, /* @__PURE__ */ React.createElement("div", { className: classes["controls"] }, /* @__PURE__ */ React.createElement(
       SelectWrapper,
       {
         selectProps: { selectButtonProps: { autoFocus: true } },

package/dist/components/DataGrid/DataGridFilters/DataGridFilterPopover.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataGridFilterPopover.es.js","sources":["../../../../src/components/DataGrid/DataGridFilters/DataGridFilterPopover.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 from \"react\";\nimport classes from \"./DataGridFilter.module.scss\";\nimport { Button } from \"../../Button/Button\";\nimport { Option } from \"../../Form/Select/SingleSelect/Option\";\nimport { SelectWrapper } from \"../../Form/Wrapper/SelectWrapper/SelectWrapper\";\nimport { Popover } from \"../../Popover/Popover\";\nimport { DataGridFilterValueSelect } from \"./DataGridFilterValueSelect\";\nimport {\n  DataGridColumnMetadata,\n  DefaultOperators,\n  FilterOperator,\n  PopoverTranslations\n} from \"./DataGridFilters.interfaces\";\nimport { useRepeatFocus } from \"../../../hooks/useRepeatFocus\";\n\nexport type Props = {\n  popoverRef: React.RefObject<HTMLDivElement>;\n  anchorRef?: React.RefObject<HTMLDivElement>;\n  isOpen: boolean;\n  column: string;\n  columnsMetadata: DataGridColumnMetadata[];\n  values: string[];\n  pickedValues: string[];\n  operator: FilterOperator | null;\n  operators: FilterOperator[];\n  onFilterSubmit: () => void;\n  resetFields: () => void;\n  setFilterOpen: (value: React.SetStateAction<boolean>) => void;\n  setColumn: (column: React.SetStateAction<string>) => void;\n  setOperator: (operator: React.SetStateAction<FilterOperator | null>) => void;\n  setOperators: (operators: React.SetStateAction<FilterOperator[]>) => void;\n  setValues: (values: React.SetStateAction<string[]>) => void;\n  setPickedValues: (pickedValues: React.SetStateAction<string[]>) => void;\n  translations?: PopoverTranslations;\n};\n\nexport const DataGridFilterPopover = ({\n  popoverRef,\n  anchorRef,\n  isOpen,\n  column,\n  columnsMetadata,\n  values,\n  pickedValues,\n  operator,\n  operators,\n  onFilterSubmit,\n  resetFields,\n  setFilterOpen,\n  setColumn,\n  setOperator,\n  setOperators,\n  setValues,\n  setPickedValues,\n  translations\n}: Props) => {\n  const {\n    columnSelectLabel = \"Filter by\",\n    operatorSelectLabel = \"Operator\",\n    submitButtonTitle = \"Apply\",\n    cancelButtonTitle = \"Cancel\"\n  } = translations || {};\n  useRepeatFocus(popoverRef);\n\n  const isValueRequired = operator && !operator.allowEmptyValues;\n  const hasValidationError = Boolean(isValueRequired && pickedValues.length === 0);\n\n  return (\n    <Popover\n      tabIndex={-1}\n      anchorEl={anchorRef}\n      ref={popoverRef}\n      show={isOpen}\n      placement={{ horizontal: \"left\", vertical: \"bottom\" }}\n      transformOrigin={{ horizontal: \"left\", vertical: \"top\" }}\n    >\n      {isOpen && (\n        <div className={classes[\"popover\"]}>\n          <div className={classes[\"controls\"]}>\n            <SelectWrapper\n              selectProps={{ selectButtonProps: { autoFocus: true } }}\n              label={columnSelectLabel}\n              value={column}\n              name={\"column\"}\n              onChange={e => {\n                setColumn(e.target.value);\n                const columnMetadata = columnsMetadata.find(({ name }) => name === e.target.value);\n\n                if (columnMetadata?.operators) {\n                  setOperator(columnMetadata.operators[0]);\n                  setOperators(columnMetadata.operators);\n                } else {\n                  setOperator(Object.values(DefaultOperators)[0]);\n                  setOperators(Object.values(DefaultOperators));\n                }\n\n                if (columnMetadata?.defaultValues) {\n                  setPickedValues([]);\n                  setValues(columnMetadata.defaultValues);\n                } else {\n                  setPickedValues([]);\n                  setValues([]);\n                }\n              }}\n            >\n              {columnsMetadata.map(({ name, headline }) => (\n                <Option className={classes[\"column-select-option\"]} key={name} value={name}>\n                  {headline}\n                </Option>\n              ))}\n            </SelectWrapper>\n            <SelectWrapper\n              label={operatorSelectLabel}\n              value={operator?.name || \"\"}\n              name={\"operator\"}\n              onChange={e => {\n                const selectedOperator = operators.find(op => op.name === e.target.value);\n                setOperator(selectedOperator || null);\n              }}\n            >\n              {operators.map(operator => (\n                <Option key={operator.name} value={operator.name}>\n                  {operator.name}\n                </Option>\n              ))}\n            </SelectWrapper>\n            <DataGridFilterValueSelect\n              column={column}\n              columnsMetadata={columnsMetadata}\n              values={values}\n              pickedValues={pickedValues}\n              setValues={setValues}\n              setPickedValues={setPickedValues}\n              translations={translations}\n              operator={operator}\n            />\n          </div>\n          <div className={classes[\"actions\"]}>\n            <Button onClick={onFilterSubmit} disabled={hasValidationError}>\n              {submitButtonTitle}\n            </Button>\n            <Button\n              variant=\"text\"\n              onClick={() => {\n                resetFields();\n                setFilterOpen(false);\n              }}\n            >\n              {cancelButtonTitle}\n            </Button>\n          </div>\n        </div>\n      )}\n    </Popover>\n  );\n};\n"],"names":["operator"],"mappings":"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"}
+{"version":3,"file":"DataGridFilterPopover.es.js","sources":["../../../../src/components/DataGrid/DataGridFilters/DataGridFilterPopover.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 from \"react\";\nimport classes from \"./DataGridFilter.module.scss\";\nimport { Button } from \"../../Button/Button\";\nimport { Option } from \"../../Form/Select/SingleSelect/Option\";\nimport { SelectWrapper } from \"../../Form/Wrapper/SelectWrapper/SelectWrapper\";\nimport { Popover } from \"../../Popover/Popover\";\nimport { DataGridFilterValueSelect } from \"./DataGridFilterValueSelect\";\nimport {\n  DataGridColumnMetadata,\n  DefaultOperators,\n  FilterOperator,\n  PopoverTranslations\n} from \"./DataGridFilters.interfaces\";\nimport { useRepeatFocus } from \"../../../hooks/useRepeatFocus\";\n\nexport type Props = {\n  popoverRef: React.RefObject<HTMLDivElement>;\n  anchorRef?: React.RefObject<HTMLDivElement>;\n  isOpen: boolean;\n  column: string;\n  columnsMetadata: DataGridColumnMetadata[];\n  values: string[];\n  pickedValues: string[];\n  operator: FilterOperator | null;\n  operators: FilterOperator[];\n  onFilterSubmit: () => void;\n  resetFields: () => void;\n  setFilterOpen: (value: React.SetStateAction<boolean>) => void;\n  setColumn: (column: React.SetStateAction<string>) => void;\n  setOperator: (operator: React.SetStateAction<FilterOperator | null>) => void;\n  setOperators: (operators: React.SetStateAction<FilterOperator[]>) => void;\n  setValues: (values: React.SetStateAction<string[]>) => void;\n  setPickedValues: (pickedValues: React.SetStateAction<string[]>) => void;\n  translations?: PopoverTranslations;\n};\n\nexport const DataGridFilterPopover = ({\n  popoverRef,\n  anchorRef,\n  isOpen,\n  column,\n  columnsMetadata,\n  values,\n  pickedValues,\n  operator,\n  operators,\n  onFilterSubmit,\n  resetFields,\n  setFilterOpen,\n  setColumn,\n  setOperator,\n  setOperators,\n  setValues,\n  setPickedValues,\n  translations\n}: Props) => {\n  const {\n    columnSelectLabel = \"Filter by\",\n    operatorSelectLabel = \"Operator\",\n    submitButtonTitle = \"Apply\",\n    cancelButtonTitle = \"Cancel\"\n  } = translations || {};\n  useRepeatFocus(popoverRef);\n\n  const isValueRequired = operator && !operator.allowEmptyValues;\n  const hasValidationError = Boolean(isValueRequired && pickedValues.length === 0);\n\n  return (\n    <Popover\n      tabIndex={-1}\n      anchorEl={anchorRef}\n      ref={popoverRef}\n      show={isOpen}\n      placement={{ horizontal: \"left\", vertical: \"bottom\" }}\n      transformOrigin={{ horizontal: \"left\", vertical: \"top\" }}\n    >\n      <div className={classes[\"popover\"]}>\n        <div className={classes[\"controls\"]}>\n          <SelectWrapper\n            selectProps={{ selectButtonProps: { autoFocus: true } }}\n            label={columnSelectLabel}\n            value={column}\n            name={\"column\"}\n            onChange={e => {\n              setColumn(e.target.value);\n              const columnMetadata = columnsMetadata.find(({ name }) => name === e.target.value);\n\n              if (columnMetadata?.operators) {\n                setOperator(columnMetadata.operators[0]);\n                setOperators(columnMetadata.operators);\n              } else {\n                setOperator(Object.values(DefaultOperators)[0]);\n                setOperators(Object.values(DefaultOperators));\n              }\n\n              if (columnMetadata?.defaultValues) {\n                setPickedValues([]);\n                setValues(columnMetadata.defaultValues);\n              } else {\n                setPickedValues([]);\n                setValues([]);\n              }\n            }}\n          >\n            {columnsMetadata.map(({ name, headline }) => (\n              <Option className={classes[\"column-select-option\"]} key={name} value={name}>\n                {headline}\n              </Option>\n            ))}\n          </SelectWrapper>\n          <SelectWrapper\n            label={operatorSelectLabel}\n            value={operator?.name || \"\"}\n            name={\"operator\"}\n            onChange={e => {\n              const selectedOperator = operators.find(op => op.name === e.target.value);\n              setOperator(selectedOperator || null);\n            }}\n          >\n            {operators.map(operator => (\n              <Option key={operator.name} value={operator.name}>\n                {operator.name}\n              </Option>\n            ))}\n          </SelectWrapper>\n          <DataGridFilterValueSelect\n            column={column}\n            columnsMetadata={columnsMetadata}\n            values={values}\n            pickedValues={pickedValues}\n            setValues={setValues}\n            setPickedValues={setPickedValues}\n            translations={translations}\n            operator={operator}\n          />\n        </div>\n        <div className={classes[\"actions\"]}>\n          <Button onClick={onFilterSubmit} disabled={hasValidationError}>\n            {submitButtonTitle}\n          </Button>\n          <Button\n            variant=\"text\"\n            onClick={() => {\n              resetFields();\n              setFilterOpen(false);\n            }}\n          >\n            {cancelButtonTitle}\n          </Button>\n        </div>\n      </div>\n    </Popover>\n  );\n};\n"],"names":["operator"],"mappings":"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"}

package/dist/components/DataGrid/DataGridFilters/DataGridToolbar.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=require("./DataGridFilter.cjs.js"),a=require("./DataGridToolbar.module.scss.cjs.js"),r=require("../../Typography/Typography.cjs.js"),l=require("./useFiltersReducer.cjs.js"),i=require("./DataGridDateFilter.cjs.js");exports.DataGridToolbar=({columnsMetadata:o,filterValues:n,translations:s,onFilterAdd:u,onFilterEdit:d,onFilterDelete:c,dateFilterValue:F,onDateFilterValueChange:p,onFiltersClear:m,customEditTagContent:f})=>{const{state:g,addFilter:D,editFilter:E,deleteFilter:T,resetFilters:v,clearFilters:j}=l.useFiltersReducer(n),y=e.useRef(!0);e.useEffect((()=>{!y.current&&n&&v(n)}),[n]),e.useEffect((()=>{y.current=!1}),[]);const{clearButtonCaption:b="Clear all filters"}=(null==s?void 0:s.toolbar)||{};return e.createElement(e.Fragment,null,F&&e.createElement(i.DataGridDateFilter,{dateFilterValue:F,onDateFilterValueChange:p}),o&&g.filters.map((a=>e.createElement(t.DataGridFilter,{mode:"EDIT",key:a.id,filter:a,columnsMetadata:o,filterState:g,onFilterEdit:e=>{E(e),d&&d(e)},onFilterDelete:e=>{T(e),c&&c(e)},tagTranslations:null==s?void 0:s.tag,popoverTranslations:null==s?void 0:s.popover,customEditTagContent:f}))),e.createElement("div",{className:a.default["actions-wrapper"]},o&&e.createElement(t.DataGridFilter,{mode:"ADD",customEditTagContent:f,columnsMetadata:o,filterState:g,onFilterAdd:e=>{D(e),u&&u(e)},tagTranslations:null==s?void 0:s.tag,popoverTranslations:null==s?void 0:s.popover}),o&&g.filters.length>=1&&e.createElement("button",{type:"button",className:a.default["clear-button"],onClick:()=>{j(),m&&m()}},e.createElement(r.Typography,{variant:"body",className:a.default.caption},b))))};
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=require("./DataGridFilter.cjs.js"),a=require("./DataGridToolbar.module.scss.cjs.js"),r=require("../../Typography/Typography.cjs.js"),l=require("./useFiltersReducer.cjs.js"),i=require("./DataGridDateFilter.cjs.js");exports.DataGridToolbar=({columnsMetadata:o,filterValues:n,translations:s,onFilterAdd:u,onFilterEdit:d,onFilterDelete:c,dateFilterValue:m,onDateFilterValueChange:F,onFiltersClear:p,customEditTagContent:f})=>{const{state:g,addFilter:D,editFilter:E,deleteFilter:T,resetFilters:v,clearFilters:y}=l.useFiltersReducer(n),j=e.useRef(!0);e.useEffect((()=>{!j.current&&n&&v(n)}),[n]),e.useEffect((()=>{j.current=!1}),[]);const{clearButtonCaption:b="Clear all filters"}=(null==s?void 0:s.toolbar)||{},C=!!o&&o.some((e=>!e.allowSingleFilterOnly||!g.filters.some((t=>t.column===e.name))));return e.createElement(e.Fragment,null,m&&e.createElement(i.DataGridDateFilter,{dateFilterValue:m,onDateFilterValueChange:F}),o&&g.filters.map((a=>e.createElement(t.DataGridFilter,{mode:"EDIT",key:a.id,filter:a,columnsMetadata:o,filterState:g,onFilterEdit:e=>{E(e),d&&d(e)},onFilterDelete:e=>{T(e),c&&c(e)},tagTranslations:null==s?void 0:s.tag,popoverTranslations:null==s?void 0:s.popover,customEditTagContent:f}))),e.createElement("div",{className:a.default["actions-wrapper"]},o&&C&&e.createElement(t.DataGridFilter,{mode:"ADD",customEditTagContent:f,columnsMetadata:o,filterState:g,onFilterAdd:e=>{D(e),u&&u(e)},tagTranslations:null==s?void 0:s.tag,popoverTranslations:null==s?void 0:s.popover}),o&&g.filters.length>=1&&e.createElement("button",{type:"button",className:a.default["clear-button"],onClick:()=>{y(),p&&p()}},e.createElement(r.Typography,{variant:"body",className:a.default.caption},b))))};
 //# sourceMappingURL=DataGridToolbar.cjs.js.map

package/dist/components/DataGrid/DataGridFilters/DataGridToolbar.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataGridToolbar.cjs.js","sources":["../../../../src/components/DataGrid/DataGridFilters/DataGridToolbar.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, useEffect, useRef } from \"react\";\nimport { DataGridFilter } from \"./DataGridFilter\";\nimport classes from \"./DataGridToolbar.module.scss\";\nimport {\n  DataGridColumnMetadata,\n  DateTimeFilter,\n  Filter,\n  FiltersTranslations\n} from \"./DataGridFilters.interfaces\";\nimport { Typography } from \"../../Typography/Typography\";\nimport { useFiltersReducer } from \"./useFiltersReducer\";\nimport { DataGridDateFilter } from \"./DataGridDateFilter\";\n\nexport interface DataGridToolbarProps {\n  columnsMetadata?: DataGridColumnMetadata[];\n  customEditTagContent?: React.ReactElement;\n  dateFilterValue?: DateTimeFilter;\n  onDateFilterValueChange?: (dateTimeFilter: DateTimeFilter) => void;\n  filterValues?: Filter[];\n  translations?: FiltersTranslations;\n  onFilterAdd?: (filter: Filter) => void;\n  onFilterEdit?: (filter: Filter) => void;\n  onFilterDelete?: (id: string) => void;\n  onFiltersClear?: () => void;\n}\n\nexport const DataGridToolbar = ({\n  columnsMetadata,\n  filterValues,\n  translations,\n  onFilterAdd,\n  onFilterEdit,\n  onFilterDelete,\n  dateFilterValue,\n  onDateFilterValueChange,\n  onFiltersClear,\n  customEditTagContent\n}: DataGridToolbarProps) => {\n  const { state, addFilter, editFilter, deleteFilter, resetFilters, clearFilters } =\n    useFiltersReducer(filterValues);\n\n  const isFirstRenderRef = useRef(true);\n\n  useEffect(() => {\n    if (!isFirstRenderRef.current && filterValues) {\n      resetFilters(filterValues);\n    }\n  }, [filterValues]);\n\n  useEffect(() => {\n    isFirstRenderRef.current = false;\n  }, []);\n\n  const { clearButtonCaption = \"Clear all filters\" } = translations?.toolbar || {};\n  return (\n    <Fragment>\n      {dateFilterValue && (\n        <DataGridDateFilter\n          dateFilterValue={dateFilterValue}\n          onDateFilterValueChange={onDateFilterValueChange}\n        />\n      )}\n      {columnsMetadata &&\n        state.filters.map(filter => (\n          <DataGridFilter\n            mode=\"EDIT\"\n            key={filter.id}\n            filter={filter}\n            columnsMetadata={columnsMetadata}\n            filterState={state}\n            onFilterEdit={filter => {\n              editFilter(filter);\n              onFilterEdit && onFilterEdit(filter);\n            }}\n            onFilterDelete={id => {\n              deleteFilter(id);\n              onFilterDelete && onFilterDelete(id);\n            }}\n            tagTranslations={translations?.tag}\n            popoverTranslations={translations?.popover}\n            customEditTagContent={customEditTagContent}\n          />\n        ))}\n      <div className={classes[\"actions-wrapper\"]}>\n        {columnsMetadata && (\n          <DataGridFilter\n            mode=\"ADD\"\n            customEditTagContent={customEditTagContent}\n            columnsMetadata={columnsMetadata}\n            filterState={state}\n            onFilterAdd={filter => {\n              addFilter(filter);\n              onFilterAdd && onFilterAdd(filter);\n            }}\n            tagTranslations={translations?.tag}\n            popoverTranslations={translations?.popover}\n          />\n        )}\n        {columnsMetadata && state.filters.length >= 1 && (\n          <button\n            type=\"button\"\n            className={classes[\"clear-button\"]}\n            onClick={() => {\n              clearFilters();\n              onFiltersClear && onFiltersClear();\n            }}\n          >\n            <Typography variant=\"body\" className={classes[\"caption\"]}>\n              {clearButtonCaption}\n            </Typography>\n          </button>\n        )}\n      </div>\n    </Fragment>\n  );\n};\n"],"names":["columnsMetadata","filterValues","translations","onFilterAdd","onFilterEdit","onFilterDelete","dateFilterValue","onDateFilterValueChange","onFiltersClear","customEditTagContent","state","addFilter","editFilter","deleteFilter","resetFilters","clearFilters","useFiltersReducer","isFirstRenderRef","useRef","useEffect","current","clearButtonCaption","toolbar","createElement","Fragment","React","DataGridDateFilter","filters","map","filter","DataGridFilter","mode","key","id","filterState","tagTranslations","tag","popoverTranslations","popover","className","classes","default","length","type","onClick","Typography","variant"],"mappings":"yVA0C+B,EAC7BA,kBACAC,eACAC,eACAC,cACAC,eACAC,iBACAC,kBACAC,0BACAC,iBACAC,2BAEM,MAAAC,MAAEA,EAAOC,UAAAA,EAAAC,WAAWA,EAAYC,aAAAA,EAAAC,aAAcA,eAAcC,GAChEC,EAAAA,kBAAkBf,GAEdgB,EAAmBC,UAAO,GAEhCC,EAAAA,WAAU,MACHF,EAAiBG,SAAWnB,GAC/Ba,EAAab,EAAY,GAE1B,CAACA,IAEJkB,EAAAA,WAAU,KACRF,EAAiBG,SAAU,CAAA,GAC1B,IAEH,MAAMC,mBAAEA,EAAqB,sBAAwB,MAAAnB,OAAA,EAAAA,EAAcoB,UAAW,CAAC,EAE7E,SAAAC,cAACC,EAAAA,cACElB,GACCmB,EAAAF,cAACG,EAAAA,mBAAA,CACCpB,kBACAC,4BAGHP,GACCU,EAAMiB,QAAQC,KACZC,GAAAJ,EAAAF,cAACO,EAAAA,eAAA,CACCC,KAAK,OACLC,IAAKH,EAAOI,GACZJ,SACA7B,kBACAkC,YAAaxB,EACbN,aAAcyB,IACZjB,EAAWiB,GACXzB,GAAgBA,EAAayB,EAAM,EAErCxB,eAAsB4B,IACpBpB,EAAaoB,GACb5B,GAAkBA,EAAe4B,EAAE,EAErCE,gBAA+B,MAAdjC,OAAc,EAAAA,EAAAkC,IAC/BC,oBAAmC,MAAdnC,OAAc,EAAAA,EAAAoC,QACnC7B,2BAGLgB,EAAAF,cAAA,MAAA,CAAIgB,UAAWC,EAAQC,QAAA,oBACrBzC,GACCyB,EAAAF,cAACO,EAAAA,eAAA,CACCC,KAAK,MACLtB,uBACAT,kBACAkC,YAAaxB,EACbP,YAAuB0B,IACrBlB,EAAUkB,GACV1B,GAAeA,EAAY0B,EAAM,EAEnCM,gBAA+B,MAAdjC,OAAc,EAAAA,EAAAkC,IAC/BC,oBAAmC,MAAdnC,OAAc,EAAAA,EAAAoC,UAGtCtC,GAAmBU,EAAMiB,QAAQe,QAAU,GAC1CjB,EAAAF,cAAC,SAAA,CACCoB,KAAK,SACLJ,UAAWC,UAAQ,gBACnBI,QAAS,KACM7B,IACbP,GAAkBA,GAAe,GAGnCiB,EAAAF,cAACsB,cAAWC,QAAQ,OAAOP,UAAWC,EAAQC,QAAS,SACpDpB,KAKX"}
+{"version":3,"file":"DataGridToolbar.cjs.js","sources":["../../../../src/components/DataGrid/DataGridFilters/DataGridToolbar.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, useEffect, useRef } from \"react\";\nimport { DataGridFilter } from \"./DataGridFilter\";\nimport classes from \"./DataGridToolbar.module.scss\";\nimport {\n  DataGridColumnMetadata,\n  DateTimeFilter,\n  Filter,\n  FiltersTranslations\n} from \"./DataGridFilters.interfaces\";\nimport { Typography } from \"../../Typography/Typography\";\nimport { useFiltersReducer } from \"./useFiltersReducer\";\nimport { DataGridDateFilter } from \"./DataGridDateFilter\";\n\nexport interface DataGridToolbarProps {\n  columnsMetadata?: DataGridColumnMetadata[];\n  customEditTagContent?: React.ReactElement;\n  dateFilterValue?: DateTimeFilter;\n  onDateFilterValueChange?: (dateTimeFilter: DateTimeFilter) => void;\n  filterValues?: Filter[];\n  translations?: FiltersTranslations;\n  onFilterAdd?: (filter: Filter) => void;\n  onFilterEdit?: (filter: Filter) => void;\n  onFilterDelete?: (id: string) => void;\n  onFiltersClear?: () => void;\n}\n\nexport const DataGridToolbar = ({\n  columnsMetadata,\n  filterValues,\n  translations,\n  onFilterAdd,\n  onFilterEdit,\n  onFilterDelete,\n  dateFilterValue,\n  onDateFilterValueChange,\n  onFiltersClear,\n  customEditTagContent\n}: DataGridToolbarProps) => {\n  const { state, addFilter, editFilter, deleteFilter, resetFilters, clearFilters } =\n    useFiltersReducer(filterValues);\n\n  const isFirstRenderRef = useRef(true);\n\n  useEffect(() => {\n    if (!isFirstRenderRef.current && filterValues) {\n      resetFilters(filterValues);\n    }\n  }, [filterValues]);\n\n  useEffect(() => {\n    isFirstRenderRef.current = false;\n  }, []);\n\n  const { clearButtonCaption = \"Clear all filters\" } = translations?.toolbar || {};\n\n  const hasAvailableFilters = columnsMetadata\n    ? columnsMetadata.some(\n        value => !value.allowSingleFilterOnly || !state.filters.some(f => f.column === value.name)\n      )\n    : false;\n\n  return (\n    <Fragment>\n      {dateFilterValue && (\n        <DataGridDateFilter\n          dateFilterValue={dateFilterValue}\n          onDateFilterValueChange={onDateFilterValueChange}\n        />\n      )}\n      {columnsMetadata &&\n        state.filters.map(filter => (\n          <DataGridFilter\n            mode=\"EDIT\"\n            key={filter.id}\n            filter={filter}\n            columnsMetadata={columnsMetadata}\n            filterState={state}\n            onFilterEdit={filter => {\n              editFilter(filter);\n              onFilterEdit && onFilterEdit(filter);\n            }}\n            onFilterDelete={id => {\n              deleteFilter(id);\n              onFilterDelete && onFilterDelete(id);\n            }}\n            tagTranslations={translations?.tag}\n            popoverTranslations={translations?.popover}\n            customEditTagContent={customEditTagContent}\n          />\n        ))}\n      <div className={classes[\"actions-wrapper\"]}>\n        {columnsMetadata && hasAvailableFilters && (\n          <DataGridFilter\n            mode=\"ADD\"\n            customEditTagContent={customEditTagContent}\n            columnsMetadata={columnsMetadata}\n            filterState={state}\n            onFilterAdd={filter => {\n              addFilter(filter);\n              onFilterAdd && onFilterAdd(filter);\n            }}\n            tagTranslations={translations?.tag}\n            popoverTranslations={translations?.popover}\n          />\n        )}\n        {columnsMetadata && state.filters.length >= 1 && (\n          <button\n            type=\"button\"\n            className={classes[\"clear-button\"]}\n            onClick={() => {\n              clearFilters();\n              onFiltersClear && onFiltersClear();\n            }}\n          >\n            <Typography variant=\"body\" className={classes[\"caption\"]}>\n              {clearButtonCaption}\n            </Typography>\n          </button>\n        )}\n      </div>\n    </Fragment>\n  );\n};\n"],"names":["columnsMetadata","filterValues","translations","onFilterAdd","onFilterEdit","onFilterDelete","dateFilterValue","onDateFilterValueChange","onFiltersClear","customEditTagContent","state","addFilter","editFilter","deleteFilter","resetFilters","clearFilters","useFiltersReducer","isFirstRenderRef","useRef","useEffect","current","clearButtonCaption","toolbar","hasAvailableFilters","some","value","allowSingleFilterOnly","filters","f","column","name","createElement","Fragment","React","DataGridDateFilter","map","filter","DataGridFilter","mode","key","id","filterState","tagTranslations","tag","popoverTranslations","popover","className","classes","length","type","onClick","Typography","variant","default"],"mappings":"yVA0C+B,EAC7BA,kBACAC,eACAC,eACAC,cACAC,eACAC,iBACAC,kBACAC,0BACAC,iBACAC,2BAEM,MAAAC,MAAEA,EAAOC,UAAAA,EAAAC,WAAWA,EAAYC,aAAAA,EAAAC,aAAcA,eAAcC,GAChEC,EAAAA,kBAAkBf,GAEdgB,EAAmBC,UAAO,GAEhCC,EAAAA,WAAU,MACHF,EAAiBG,SAAWnB,GAC/Ba,EAAab,EAAY,GAE1B,CAACA,IAEJkB,EAAAA,WAAU,KACRF,EAAiBG,SAAU,CAAA,GAC1B,IAEH,MAAMC,mBAAEA,EAAqB,sBAAwB,MAAAnB,OAAA,EAAAA,EAAcoB,UAAW,CAAC,EAEzEC,IAAsBvB,GACxBA,EAAgBwB,MACLC,IAACA,EAAMC,wBAA0BhB,EAAMiB,QAAQH,MAAUI,GAAAA,EAAEC,SAAWJ,EAAMK,SAKzF,SAAAC,cAACC,EAAAA,cACE1B,GACC2B,EAAAF,cAACG,EAAAA,mBAAA,CACC5B,kBACAC,4BAGHP,GACCU,EAAMiB,QAAQQ,KACZC,GAAAH,EAAAF,cAACM,EAAAA,eAAA,CACCC,KAAK,OACLC,IAAKH,EAAOI,GACZJ,SACApC,kBACAyC,YAAa/B,EACbN,aAAcgC,IACZxB,EAAWwB,GACXhC,GAAgBA,EAAagC,EAAM,EAErC/B,eAAsBmC,IACpB3B,EAAa2B,GACbnC,GAAkBA,EAAemC,EAAE,EAErCE,gBAA+B,MAAdxC,OAAc,EAAAA,EAAAyC,IAC/BC,oBAAmC,MAAd1C,OAAc,EAAAA,EAAA2C,QACnCpC,2BAGLwB,EAAAF,cAAA,MAAA,CAAIe,UAAWC,UAAQ,oBACrB/C,GAAmBuB,GAClBU,EAAAF,cAACM,EAAAA,eAAA,CACCC,KAAK,MACL7B,uBACAT,kBACAyC,YAAa/B,EACbP,YAAuBiC,IACrBzB,EAAUyB,GACVjC,GAAeA,EAAYiC,EAAM,EAEnCM,gBAA+B,MAAdxC,OAAc,EAAAA,EAAAyC,IAC/BC,oBAAmC,MAAd1C,OAAc,EAAAA,EAAA2C,UAGtC7C,GAAmBU,EAAMiB,QAAQqB,QAAU,GAC1Cf,EAAAF,cAAC,SAAA,CACCkB,KAAK,SACLH,UAAWC,UAAQ,gBACnBG,QAAS,KACMnC,IACbP,GAAkBA,GAAe,GAGnCyB,EAAAF,cAACoB,cAAWC,QAAQ,OAAON,UAAWC,EAAQM,QAAS,SACpDhC,KAKX"}

package/dist/components/DataGrid/DataGridFilters/DataGridToolbar.es.js

@@ -27,6 +27,9 @@ const DataGridToolbar = ({
     isFirstRenderRef.current = false;
   }, []);
   const { clearButtonCaption = "Clear all filters" } = (translations == null ? void 0 : translations.toolbar) || {};
+  const hasAvailableFilters = columnsMetadata ? columnsMetadata.some(
+    (value) => !value.allowSingleFilterOnly || !state.filters.some((f) => f.column === value.name)
+  ) : false;
   return /* @__PURE__ */ React.createElement(Fragment, null, dateFilterValue && /* @__PURE__ */ React.createElement(
     DataGridDateFilter,
     {
@@ -53,7 +56,7 @@ const DataGridToolbar = ({
       popoverTranslations: translations == null ? void 0 : translations.popover,
       customEditTagContent
     }
-  )), /* @__PURE__ */ React.createElement("div", { className: classes["actions-wrapper"] }, columnsMetadata && /* @__PURE__ */ React.createElement(
+  )), /* @__PURE__ */ React.createElement("div", { className: classes["actions-wrapper"] }, columnsMetadata && hasAvailableFilters && /* @__PURE__ */ React.createElement(
     DataGridFilter,
     {
       mode: "ADD",

package/dist/components/DataGrid/DataGridFilters/DataGridToolbar.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataGridToolbar.es.js","sources":["../../../../src/components/DataGrid/DataGridFilters/DataGridToolbar.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, useEffect, useRef } from \"react\";\nimport { DataGridFilter } from \"./DataGridFilter\";\nimport classes from \"./DataGridToolbar.module.scss\";\nimport {\n  DataGridColumnMetadata,\n  DateTimeFilter,\n  Filter,\n  FiltersTranslations\n} from \"./DataGridFilters.interfaces\";\nimport { Typography } from \"../../Typography/Typography\";\nimport { useFiltersReducer } from \"./useFiltersReducer\";\nimport { DataGridDateFilter } from \"./DataGridDateFilter\";\n\nexport interface DataGridToolbarProps {\n  columnsMetadata?: DataGridColumnMetadata[];\n  customEditTagContent?: React.ReactElement;\n  dateFilterValue?: DateTimeFilter;\n  onDateFilterValueChange?: (dateTimeFilter: DateTimeFilter) => void;\n  filterValues?: Filter[];\n  translations?: FiltersTranslations;\n  onFilterAdd?: (filter: Filter) => void;\n  onFilterEdit?: (filter: Filter) => void;\n  onFilterDelete?: (id: string) => void;\n  onFiltersClear?: () => void;\n}\n\nexport const DataGridToolbar = ({\n  columnsMetadata,\n  filterValues,\n  translations,\n  onFilterAdd,\n  onFilterEdit,\n  onFilterDelete,\n  dateFilterValue,\n  onDateFilterValueChange,\n  onFiltersClear,\n  customEditTagContent\n}: DataGridToolbarProps) => {\n  const { state, addFilter, editFilter, deleteFilter, resetFilters, clearFilters } =\n    useFiltersReducer(filterValues);\n\n  const isFirstRenderRef = useRef(true);\n\n  useEffect(() => {\n    if (!isFirstRenderRef.current && filterValues) {\n      resetFilters(filterValues);\n    }\n  }, [filterValues]);\n\n  useEffect(() => {\n    isFirstRenderRef.current = false;\n  }, []);\n\n  const { clearButtonCaption = \"Clear all filters\" } = translations?.toolbar || {};\n  return (\n    <Fragment>\n      {dateFilterValue && (\n        <DataGridDateFilter\n          dateFilterValue={dateFilterValue}\n          onDateFilterValueChange={onDateFilterValueChange}\n        />\n      )}\n      {columnsMetadata &&\n        state.filters.map(filter => (\n          <DataGridFilter\n            mode=\"EDIT\"\n            key={filter.id}\n            filter={filter}\n            columnsMetadata={columnsMetadata}\n            filterState={state}\n            onFilterEdit={filter => {\n              editFilter(filter);\n              onFilterEdit && onFilterEdit(filter);\n            }}\n            onFilterDelete={id => {\n              deleteFilter(id);\n              onFilterDelete && onFilterDelete(id);\n            }}\n            tagTranslations={translations?.tag}\n            popoverTranslations={translations?.popover}\n            customEditTagContent={customEditTagContent}\n          />\n        ))}\n      <div className={classes[\"actions-wrapper\"]}>\n        {columnsMetadata && (\n          <DataGridFilter\n            mode=\"ADD\"\n            customEditTagContent={customEditTagContent}\n            columnsMetadata={columnsMetadata}\n            filterState={state}\n            onFilterAdd={filter => {\n              addFilter(filter);\n              onFilterAdd && onFilterAdd(filter);\n            }}\n            tagTranslations={translations?.tag}\n            popoverTranslations={translations?.popover}\n          />\n        )}\n        {columnsMetadata && state.filters.length >= 1 && (\n          <button\n            type=\"button\"\n            className={classes[\"clear-button\"]}\n            onClick={() => {\n              clearFilters();\n              onFiltersClear && onFiltersClear();\n            }}\n          >\n            <Typography variant=\"body\" className={classes[\"caption\"]}>\n              {clearButtonCaption}\n            </Typography>\n          </button>\n        )}\n      </div>\n    </Fragment>\n  );\n};\n"],"names":["filter"],"mappings":";;;;;;AA0CO,MAAM,kBAAkB,CAAC;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA4B;AACpB,QAAA,EAAE,OAAO,WAAW,YAAY,cAAc,cAAc,aAAA,IAChE,kBAAkB,YAAY;AAE1B,QAAA,mBAAmB,OAAO,IAAI;AAEpC,YAAU,MAAM;AACV,QAAA,CAAC,iBAAiB,WAAW,cAAc;AAC7C,mBAAa,YAAY;AAAA,IAAA;AAAA,EAC3B,GACC,CAAC,YAAY,CAAC;AAEjB,YAAU,MAAM;AACd,qBAAiB,UAAU;AAAA,EAC7B,GAAG,EAAE;AAEL,QAAM,EAAE,qBAAqB,oBAAwB,KAAA,6CAAc,YAAW,CAAC;AAE7E,SAAA,sBAAA,cAAC,gBACE,mBACC,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,IAAA;AAAA,EAAA,GAGH,mBACC,MAAM,QAAQ,IAAI,CAChB,WAAA,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,KAAK,OAAO;AAAA,MACZ;AAAA,MACA;AAAA,MACA,aAAa;AAAA,MACb,cAAc,CAAAA,YAAU;AACtB,mBAAWA,OAAM;AACjB,wBAAgB,aAAaA,OAAM;AAAA,MACrC;AAAA,MACA,gBAAgB,CAAM,OAAA;AACpB,qBAAa,EAAE;AACf,0BAAkB,eAAe,EAAE;AAAA,MACrC;AAAA,MACA,iBAAiB,6CAAc;AAAA,MAC/B,qBAAqB,6CAAc;AAAA,MACnC;AAAA,IAAA;AAAA,EAEH,CAAA,GACF,sBAAA,cAAA,OAAA,EAAI,WAAW,QAAQ,iBAAiB,KACtC,mBACC,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,aAAa;AAAA,MACb,aAAa,CAAU,WAAA;AACrB,kBAAU,MAAM;AAChB,uBAAe,YAAY,MAAM;AAAA,MACnC;AAAA,MACA,iBAAiB,6CAAc;AAAA,MAC/B,qBAAqB,6CAAc;AAAA,IAAA;AAAA,EAAA,GAGtC,mBAAmB,MAAM,QAAQ,UAAU,KAC1C,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW,QAAQ,cAAc;AAAA,MACjC,SAAS,MAAM;AACA,qBAAA;AACb,0BAAkB,eAAe;AAAA,MAAA;AAAA,IACnC;AAAA,IAEA,sBAAA,cAAC,cAAW,SAAQ,QAAO,WAAW,QAAQ,SAAS,KACpD,kBACH;AAAA,EAAA,CAGN,CACF;AAEJ;"}
+{"version":3,"file":"DataGridToolbar.es.js","sources":["../../../../src/components/DataGrid/DataGridFilters/DataGridToolbar.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, useEffect, useRef } from \"react\";\nimport { DataGridFilter } from \"./DataGridFilter\";\nimport classes from \"./DataGridToolbar.module.scss\";\nimport {\n  DataGridColumnMetadata,\n  DateTimeFilter,\n  Filter,\n  FiltersTranslations\n} from \"./DataGridFilters.interfaces\";\nimport { Typography } from \"../../Typography/Typography\";\nimport { useFiltersReducer } from \"./useFiltersReducer\";\nimport { DataGridDateFilter } from \"./DataGridDateFilter\";\n\nexport interface DataGridToolbarProps {\n  columnsMetadata?: DataGridColumnMetadata[];\n  customEditTagContent?: React.ReactElement;\n  dateFilterValue?: DateTimeFilter;\n  onDateFilterValueChange?: (dateTimeFilter: DateTimeFilter) => void;\n  filterValues?: Filter[];\n  translations?: FiltersTranslations;\n  onFilterAdd?: (filter: Filter) => void;\n  onFilterEdit?: (filter: Filter) => void;\n  onFilterDelete?: (id: string) => void;\n  onFiltersClear?: () => void;\n}\n\nexport const DataGridToolbar = ({\n  columnsMetadata,\n  filterValues,\n  translations,\n  onFilterAdd,\n  onFilterEdit,\n  onFilterDelete,\n  dateFilterValue,\n  onDateFilterValueChange,\n  onFiltersClear,\n  customEditTagContent\n}: DataGridToolbarProps) => {\n  const { state, addFilter, editFilter, deleteFilter, resetFilters, clearFilters } =\n    useFiltersReducer(filterValues);\n\n  const isFirstRenderRef = useRef(true);\n\n  useEffect(() => {\n    if (!isFirstRenderRef.current && filterValues) {\n      resetFilters(filterValues);\n    }\n  }, [filterValues]);\n\n  useEffect(() => {\n    isFirstRenderRef.current = false;\n  }, []);\n\n  const { clearButtonCaption = \"Clear all filters\" } = translations?.toolbar || {};\n\n  const hasAvailableFilters = columnsMetadata\n    ? columnsMetadata.some(\n        value => !value.allowSingleFilterOnly || !state.filters.some(f => f.column === value.name)\n      )\n    : false;\n\n  return (\n    <Fragment>\n      {dateFilterValue && (\n        <DataGridDateFilter\n          dateFilterValue={dateFilterValue}\n          onDateFilterValueChange={onDateFilterValueChange}\n        />\n      )}\n      {columnsMetadata &&\n        state.filters.map(filter => (\n          <DataGridFilter\n            mode=\"EDIT\"\n            key={filter.id}\n            filter={filter}\n            columnsMetadata={columnsMetadata}\n            filterState={state}\n            onFilterEdit={filter => {\n              editFilter(filter);\n              onFilterEdit && onFilterEdit(filter);\n            }}\n            onFilterDelete={id => {\n              deleteFilter(id);\n              onFilterDelete && onFilterDelete(id);\n            }}\n            tagTranslations={translations?.tag}\n            popoverTranslations={translations?.popover}\n            customEditTagContent={customEditTagContent}\n          />\n        ))}\n      <div className={classes[\"actions-wrapper\"]}>\n        {columnsMetadata && hasAvailableFilters && (\n          <DataGridFilter\n            mode=\"ADD\"\n            customEditTagContent={customEditTagContent}\n            columnsMetadata={columnsMetadata}\n            filterState={state}\n            onFilterAdd={filter => {\n              addFilter(filter);\n              onFilterAdd && onFilterAdd(filter);\n            }}\n            tagTranslations={translations?.tag}\n            popoverTranslations={translations?.popover}\n          />\n        )}\n        {columnsMetadata && state.filters.length >= 1 && (\n          <button\n            type=\"button\"\n            className={classes[\"clear-button\"]}\n            onClick={() => {\n              clearFilters();\n              onFiltersClear && onFiltersClear();\n            }}\n          >\n            <Typography variant=\"body\" className={classes[\"caption\"]}>\n              {clearButtonCaption}\n            </Typography>\n          </button>\n        )}\n      </div>\n    </Fragment>\n  );\n};\n"],"names":["filter"],"mappings":";;;;;;AA0CO,MAAM,kBAAkB,CAAC;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA4B;AACpB,QAAA,EAAE,OAAO,WAAW,YAAY,cAAc,cAAc,aAAA,IAChE,kBAAkB,YAAY;AAE1B,QAAA,mBAAmB,OAAO,IAAI;AAEpC,YAAU,MAAM;AACV,QAAA,CAAC,iBAAiB,WAAW,cAAc;AAC7C,mBAAa,YAAY;AAAA,IAAA;AAAA,EAC3B,GACC,CAAC,YAAY,CAAC;AAEjB,YAAU,MAAM;AACd,qBAAiB,UAAU;AAAA,EAC7B,GAAG,EAAE;AAEL,QAAM,EAAE,qBAAqB,oBAAwB,KAAA,6CAAc,YAAW,CAAC;AAEzE,QAAA,sBAAsB,kBACxB,gBAAgB;AAAA,IACd,CAAS,UAAA,CAAC,MAAM,yBAAyB,CAAC,MAAM,QAAQ,KAAK,CAAK,MAAA,EAAE,WAAW,MAAM,IAAI;AAAA,EAAA,IAE3F;AAGF,SAAA,sBAAA,cAAC,gBACE,mBACC,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,IAAA;AAAA,EAAA,GAGH,mBACC,MAAM,QAAQ,IAAI,CAChB,WAAA,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,KAAK,OAAO;AAAA,MACZ;AAAA,MACA;AAAA,MACA,aAAa;AAAA,MACb,cAAc,CAAAA,YAAU;AACtB,mBAAWA,OAAM;AACjB,wBAAgB,aAAaA,OAAM;AAAA,MACrC;AAAA,MACA,gBAAgB,CAAM,OAAA;AACpB,qBAAa,EAAE;AACf,0BAAkB,eAAe,EAAE;AAAA,MACrC;AAAA,MACA,iBAAiB,6CAAc;AAAA,MAC/B,qBAAqB,6CAAc;AAAA,MACnC;AAAA,IAAA;AAAA,EAEH,CAAA,GACF,sBAAA,cAAA,OAAA,EAAI,WAAW,QAAQ,iBAAiB,EACtC,GAAA,mBAAmB,uBAClB,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,aAAa;AAAA,MACb,aAAa,CAAU,WAAA;AACrB,kBAAU,MAAM;AAChB,uBAAe,YAAY,MAAM;AAAA,MACnC;AAAA,MACA,iBAAiB,6CAAc;AAAA,MAC/B,qBAAqB,6CAAc;AAAA,IAAA;AAAA,EAAA,GAGtC,mBAAmB,MAAM,QAAQ,UAAU,KAC1C,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW,QAAQ,cAAc;AAAA,MACjC,SAAS,MAAM;AACA,qBAAA;AACb,0BAAkB,eAAe;AAAA,MAAA;AAAA,IACnC;AAAA,IAEA,sBAAA,cAAC,cAAW,SAAQ,QAAO,WAAW,QAAQ,SAAS,KACpD,kBACH;AAAA,EAAA,CAGN,CACF;AAEJ;"}

package/dist/components/DataGrid/DataGridFilters/DataGridToolbar.module.scss.cjs.js

@@ -1,3 +1,3 @@
-!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('.DataGridToolbar_sr-only_k4xuc{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.DataGridToolbar_hidden_k4xuc{display:none}.DataGridToolbar_slide-in_k4xuc{animation:DataGridToolbar_slide-in_k4xuc .5s forwards}@media (prefers-reduced-motion: reduce){.DataGridToolbar_slide-in_k4xuc{animation-duration:.1ms}}.DataGridToolbar_slide-out_k4xuc{animation:DataGridToolbar_slide-out_k4xuc .5s forwards}@media (prefers-reduced-motion: reduce){.DataGridToolbar_slide-out_k4xuc{animation-duration:.1ms}}@keyframes DataGridToolbar_slide-in_k4xuc{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes DataGridToolbar_slide-out_k4xuc{0%{transform:translateY(0)}to{transform:translateY(100vh)}}/*!\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 */.DataGridToolbar_wrapper_k4xuc input[type=search]::-webkit-search-cancel-button{cursor:pointer}.DataGridToolbar_wrapper_k4xuc{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem;width:100%;padding-bottom:1rem}.DataGridToolbar_wrapper_k4xuc .DataGridToolbar_filter-section_k4xuc{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:.5rem;width:100%;flex-grow:1}.DataGridToolbar_wrapper_k4xuc .DataGridToolbar_filter-section_k4xuc .DataGridToolbar_searchbar_k4xuc{min-width:7rem;flex-basis:15rem}.DataGridToolbar_wrapper_k4xuc .DataGridToolbar_filter-section_k4xuc .DataGridToolbar_actions-wrapper_k4xuc{display:flex;align-items:center;justify-content:flex-start;gap:.5rem}.DataGridToolbar_wrapper_k4xuc .DataGridToolbar_filter-section_k4xuc .DataGridToolbar_clear-button_k4xuc{background:none;border:none;cursor:pointer}.DataGridToolbar_wrapper_k4xuc .DataGridToolbar_filter-section_k4xuc .DataGridToolbar_clear-button_k4xuc:focus-visible{outline:calc(.125 * var(--font-size)) solid var(--color-focus);outline-offset:0;border-radius:var(--focus-border-radius)}.DataGridToolbar_wrapper_k4xuc .DataGridToolbar_filter-section_k4xuc .DataGridToolbar_clear-button_k4xuc .DataGridToolbar_caption_k4xuc{margin:0;font-size:var(--font-size-data-grid);line-height:var(--data-grid-line-height);text-decoration:underline;color:var(--color-primary500)}.DataGridToolbar_wrapper_k4xuc .DataGridToolbar_button-section_k4xuc{flex-shrink:0;display:flex;justify-content:center;align-items:center;gap:.5rem}')),document.head.appendChild(e)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}}();
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a="DataGridToolbar_wrapper_k4xuc",r="DataGridToolbar_searchbar_k4xuc",t="DataGridToolbar_caption_k4xuc",o={wrapper:a,"filter-section":"DataGridToolbar_filter-section_k4xuc",searchbar:r,"actions-wrapper":"DataGridToolbar_actions-wrapper_k4xuc","clear-button":"DataGridToolbar_clear-button_k4xuc",caption:t,"button-section":"DataGridToolbar_button-section_k4xuc"};exports.caption=t,exports.default=o,exports.searchbar=r,exports.wrapper=a;
+!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('.DataGridToolbar_sr-only_uJyTX{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.DataGridToolbar_hidden_uJyTX{display:none}.DataGridToolbar_slide-in_uJyTX{animation:DataGridToolbar_slide-in_uJyTX .5s forwards}@media (prefers-reduced-motion: reduce){.DataGridToolbar_slide-in_uJyTX{animation-duration:.1ms}}.DataGridToolbar_slide-out_uJyTX{animation:DataGridToolbar_slide-out_uJyTX .5s forwards}@media (prefers-reduced-motion: reduce){.DataGridToolbar_slide-out_uJyTX{animation-duration:.1ms}}@keyframes DataGridToolbar_slide-in_uJyTX{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes DataGridToolbar_slide-out_uJyTX{0%{transform:translateY(0)}to{transform:translateY(100vh)}}/*!\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 */.DataGridToolbar_wrapper_uJyTX input[type=search]::-webkit-search-cancel-button{cursor:pointer}.DataGridToolbar_wrapper_uJyTX{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem;width:100%;padding-bottom:1rem}.DataGridToolbar_wrapper_uJyTX .DataGridToolbar_filter-section_uJyTX{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:.5rem;width:100%;flex-grow:1}.DataGridToolbar_wrapper_uJyTX .DataGridToolbar_filter-section_uJyTX .DataGridToolbar_searchbar_uJyTX{min-width:7rem;flex-basis:15rem}.DataGridToolbar_wrapper_uJyTX .DataGridToolbar_filter-section_uJyTX .DataGridToolbar_actions-wrapper_uJyTX{display:flex;align-items:center;justify-content:flex-start;gap:.5rem}.DataGridToolbar_wrapper_uJyTX .DataGridToolbar_filter-section_uJyTX .DataGridToolbar_clear-button_uJyTX{background:none;border:none;cursor:pointer}.DataGridToolbar_wrapper_uJyTX .DataGridToolbar_filter-section_uJyTX .DataGridToolbar_clear-button_uJyTX:focus-visible{outline:calc(.125 * var(--font-size)) solid var(--color-focus);outline-offset:0;border-radius:var(--focus-border-radius)}.DataGridToolbar_wrapper_uJyTX .DataGridToolbar_filter-section_uJyTX .DataGridToolbar_clear-button_uJyTX .DataGridToolbar_caption_uJyTX{margin:0;font-size:var(--font-size-data-grid);line-height:var(--data-grid-line-height);text-decoration:underline;color:var(--color-primary500)}.DataGridToolbar_wrapper_uJyTX .DataGridToolbar_button-section_uJyTX{flex-shrink:0;display:flex;justify-content:center;align-items:center;gap:.5rem}')),document.head.appendChild(e)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}}();
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a="DataGridToolbar_wrapper_uJyTX",r="DataGridToolbar_searchbar_uJyTX",t="DataGridToolbar_caption_uJyTX",o={wrapper:a,"filter-section":"DataGridToolbar_filter-section_uJyTX",searchbar:r,"actions-wrapper":"DataGridToolbar_actions-wrapper_uJyTX","clear-button":"DataGridToolbar_clear-button_uJyTX",caption:t,"button-section":"DataGridToolbar_button-section_uJyTX"};exports.caption=t,exports.default=o,exports.searchbar=r,exports.wrapper=a;
 //# sourceMappingURL=DataGridToolbar.module.scss.cjs.js.map

package/dist/components/DataGrid/DataGridFilters/DataGridToolbar.module.scss.es.js

@@ -1,15 +1,15 @@
-!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('.DataGridToolbar_sr-only_k4xuc{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.DataGridToolbar_hidden_k4xuc{display:none}.DataGridToolbar_slide-in_k4xuc{animation:DataGridToolbar_slide-in_k4xuc .5s forwards}@media (prefers-reduced-motion: reduce){.DataGridToolbar_slide-in_k4xuc{animation-duration:.1ms}}.DataGridToolbar_slide-out_k4xuc{animation:DataGridToolbar_slide-out_k4xuc .5s forwards}@media (prefers-reduced-motion: reduce){.DataGridToolbar_slide-out_k4xuc{animation-duration:.1ms}}@keyframes DataGridToolbar_slide-in_k4xuc{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes DataGridToolbar_slide-out_k4xuc{0%{transform:translateY(0)}to{transform:translateY(100vh)}}/*!\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 */.DataGridToolbar_wrapper_k4xuc input[type=search]::-webkit-search-cancel-button{cursor:pointer}.DataGridToolbar_wrapper_k4xuc{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem;width:100%;padding-bottom:1rem}.DataGridToolbar_wrapper_k4xuc .DataGridToolbar_filter-section_k4xuc{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:.5rem;width:100%;flex-grow:1}.DataGridToolbar_wrapper_k4xuc .DataGridToolbar_filter-section_k4xuc .DataGridToolbar_searchbar_k4xuc{min-width:7rem;flex-basis:15rem}.DataGridToolbar_wrapper_k4xuc .DataGridToolbar_filter-section_k4xuc .DataGridToolbar_actions-wrapper_k4xuc{display:flex;align-items:center;justify-content:flex-start;gap:.5rem}.DataGridToolbar_wrapper_k4xuc .DataGridToolbar_filter-section_k4xuc .DataGridToolbar_clear-button_k4xuc{background:none;border:none;cursor:pointer}.DataGridToolbar_wrapper_k4xuc .DataGridToolbar_filter-section_k4xuc .DataGridToolbar_clear-button_k4xuc:focus-visible{outline:calc(.125 * var(--font-size)) solid var(--color-focus);outline-offset:0;border-radius:var(--focus-border-radius)}.DataGridToolbar_wrapper_k4xuc .DataGridToolbar_filter-section_k4xuc .DataGridToolbar_clear-button_k4xuc .DataGridToolbar_caption_k4xuc{margin:0;font-size:var(--font-size-data-grid);line-height:var(--data-grid-line-height);text-decoration:underline;color:var(--color-primary500)}.DataGridToolbar_wrapper_k4xuc .DataGridToolbar_button-section_k4xuc{flex-shrink:0;display:flex;justify-content:center;align-items:center;gap:.5rem}')),document.head.appendChild(e)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}}();
-const wrapper = "DataGridToolbar_wrapper_k4xuc";
-const searchbar = "DataGridToolbar_searchbar_k4xuc";
-const caption = "DataGridToolbar_caption_k4xuc";
+!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('.DataGridToolbar_sr-only_uJyTX{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.DataGridToolbar_hidden_uJyTX{display:none}.DataGridToolbar_slide-in_uJyTX{animation:DataGridToolbar_slide-in_uJyTX .5s forwards}@media (prefers-reduced-motion: reduce){.DataGridToolbar_slide-in_uJyTX{animation-duration:.1ms}}.DataGridToolbar_slide-out_uJyTX{animation:DataGridToolbar_slide-out_uJyTX .5s forwards}@media (prefers-reduced-motion: reduce){.DataGridToolbar_slide-out_uJyTX{animation-duration:.1ms}}@keyframes DataGridToolbar_slide-in_uJyTX{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes DataGridToolbar_slide-out_uJyTX{0%{transform:translateY(0)}to{transform:translateY(100vh)}}/*!\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 */.DataGridToolbar_wrapper_uJyTX input[type=search]::-webkit-search-cancel-button{cursor:pointer}.DataGridToolbar_wrapper_uJyTX{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem;width:100%;padding-bottom:1rem}.DataGridToolbar_wrapper_uJyTX .DataGridToolbar_filter-section_uJyTX{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:.5rem;width:100%;flex-grow:1}.DataGridToolbar_wrapper_uJyTX .DataGridToolbar_filter-section_uJyTX .DataGridToolbar_searchbar_uJyTX{min-width:7rem;flex-basis:15rem}.DataGridToolbar_wrapper_uJyTX .DataGridToolbar_filter-section_uJyTX .DataGridToolbar_actions-wrapper_uJyTX{display:flex;align-items:center;justify-content:flex-start;gap:.5rem}.DataGridToolbar_wrapper_uJyTX .DataGridToolbar_filter-section_uJyTX .DataGridToolbar_clear-button_uJyTX{background:none;border:none;cursor:pointer}.DataGridToolbar_wrapper_uJyTX .DataGridToolbar_filter-section_uJyTX .DataGridToolbar_clear-button_uJyTX:focus-visible{outline:calc(.125 * var(--font-size)) solid var(--color-focus);outline-offset:0;border-radius:var(--focus-border-radius)}.DataGridToolbar_wrapper_uJyTX .DataGridToolbar_filter-section_uJyTX .DataGridToolbar_clear-button_uJyTX .DataGridToolbar_caption_uJyTX{margin:0;font-size:var(--font-size-data-grid);line-height:var(--data-grid-line-height);text-decoration:underline;color:var(--color-primary500)}.DataGridToolbar_wrapper_uJyTX .DataGridToolbar_button-section_uJyTX{flex-shrink:0;display:flex;justify-content:center;align-items:center;gap:.5rem}')),document.head.appendChild(e)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}}();
+const wrapper = "DataGridToolbar_wrapper_uJyTX";
+const searchbar = "DataGridToolbar_searchbar_uJyTX";
+const caption = "DataGridToolbar_caption_uJyTX";
 const classes = {
   wrapper,
-  "filter-section": "DataGridToolbar_filter-section_k4xuc",
+  "filter-section": "DataGridToolbar_filter-section_uJyTX",
   searchbar,
-  "actions-wrapper": "DataGridToolbar_actions-wrapper_k4xuc",
-  "clear-button": "DataGridToolbar_clear-button_k4xuc",
+  "actions-wrapper": "DataGridToolbar_actions-wrapper_uJyTX",
+  "clear-button": "DataGridToolbar_clear-button_uJyTX",
   caption,
-  "button-section": "DataGridToolbar_button-section_k4xuc"
+  "button-section": "DataGridToolbar_button-section_uJyTX"
 };
 export {
   caption,

package/dist/components/DataGrid/DataGridFilters/DateTimePicker/DateTimePicker.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=require("../../../Popover/Popover.cjs.js"),a=require("./DateTimePicker.module.scss.cjs.js"),o=require("../../../Button/Button.cjs.js"),r=require("./DateTimeService.cjs.js"),n=require("./SideMenu.cjs.js"),s=require("date-fns"),i=require("./DateTimePickerInputSection.cjs.js"),c=require("./DateTimePickerCalendarSection.cjs.js"),l=require("../../../../hooks/useRepeatFocus.cjs.js"),d="yyyy-mm-dd hh:mm:ss",m=[{id:r.THIRTY_SECONDS,name:"Last 30 seconds",rangeSeconds:30},{id:r.ONE_MINUTE,name:"Last 1 minute",rangeSeconds:60},{id:r.FIVE_MINUTES,name:"Last 5 minutes",rangeSeconds:300},{id:r.ONE_HOUR,name:"Last 1 hour",rangeSeconds:3600},{id:r.TWENTY_FOUR_HOURS,name:"Last 24 hours",rangeSeconds:86400},{id:r.CUSTOM_DATE_RANGE,name:"Custom"}];exports.DateTimePicker=({anchorRef:u,popoverRef:D,isOpen:f,setPickerOpen:p,onTagCaptionChange:E,translations:S={errors:{dateFormatError:`The format must be ${d}`},previousMonth:"Previous month",nextMonth:"Next month",from:"From",to:"To",cancel:"Cancel",apply:"Apply",dateInputPlaceholder:d},dateFilterValue:v,onDateFilterValueChange:T})=>{const{errors:{dateFormatError:h},previousMonth:I,nextMonth:g,cancel:N,from:j,to:M,apply:O,dateInputPlaceholder:P}=S,[x,F]=e.useState({from:(null==v?void 0:v.fromDate)?new Date(null==v?void 0:v.fromDate):void 0,to:(null==v?void 0:v.toDate)?new Date(null==v?void 0:v.toDate):void 0}),[C,_]=e.useState(m[0].id),[y,R]=e.useState(""),[w,k]=e.useState(""),[q,A]=e.useState(""),[U,b]=e.useState("");l.useRepeatFocus(D);const L=C!==r.CUSTOM_DATE_RANGE;e.useEffect((()=>{var e;f&&(null==(e=D.current)||e.focus())}),[f]),e.useEffect((()=>{if(v){const e=m.find((e=>e.id===v.type));if(e&&E(e.name),_(v.type),(null==e?void 0:e.rangeSeconds)&&v.type!==r.CUSTOM_DATE_RANGE){const t=s.addSeconds(new Date,-e.rangeSeconds),a=new Date;return R(r.formatInputDate(t)),k(r.formatInputDate(a)),void F({from:t,to:a})}v.fromDate&&R(r.formatInputDate(new Date(v.fromDate))),v.toDate&&k(r.formatInputDate(new Date(v.toDate))),F({from:(null==v?void 0:v.fromDate)?new Date(null==v?void 0:v.fromDate):void 0,to:(null==v?void 0:v.toDate)?new Date(null==v?void 0:v.toDate):void 0})}}),[v]),e.useEffect((()=>{v||f&&$(C)}),[f,v]);const $=e=>{_(e);const t=m.find((t=>t.id===e));if(t&&E(t.name),e!==r.CUSTOM_DATE_RANGE){if(!t)return;if(t.rangeSeconds){const e=s.addSeconds(new Date,-t.rangeSeconds),a=new Date;F({from:e,to:a}),R(r.formatInputDate(e)),k(r.formatInputDate(a))}}};return e.createElement(t.Popover,{tabIndex:-1,anchorEl:u,ref:D,show:f,placement:{horizontal:"left",vertical:"bottom"},transformOrigin:{horizontal:"left",vertical:"top"}},f&&e.createElement("div",{className:a.default.popover},e.createElement("div",{className:a.default["content-wrapper"]},e.createElement("div",{className:a.default.aside},e.createElement(n.SideMenu,{sideMenuItems:m,selectedItemId:C,onItemSelect:$})),e.createElement("div",{className:`${a.default.controls} ${U||q?a.default["has-error"]:""}`},e.createElement("div",{className:a.default["controls-panel"]},e.createElement(i.DateTimePickerInputSection,{from:j,to:M,dateInputPlaceholder:P,dateFormatError:h,fromDateText:y,toDateText:w,fromDateError:q,toDateError:U,setSelectedDate:F,setFromDateText:R,setToDateText:k,setFromDateError:A,setToDateError:b})),e.createElement("div",{className:`${a.default["controls-panel"]} ${a.default["set-height"]}`},e.createElement(c.DateTimePickerCalendarSection,{previousMonth:I,nextMonth:g,selectedDate:x,disableDateRangePickers:L,setSelectedDate:F,setFromDateText:R,setFromDateError:A,setToDateText:k,setToDateError:b})))),e.createElement("div",{className:a.default.actions},e.createElement(o.Button,{variant:"text",onClick:()=>{p(!1)}},N),e.createElement(o.Button,{onClick:()=>{var e,t;T&&T({toDate:(null==(e=x.to)?void 0:e.toISOString())??"",fromDate:(null==(t=x.from)?void 0:t.toISOString())??"",type:C}),p(!1)}},O))))},exports.dateFormat=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=require("../../../Popover/Popover.cjs.js"),a=require("./DateTimePicker.module.scss.cjs.js"),o=require("../../../Button/Button.cjs.js"),r=require("./DateTimeService.cjs.js"),n=require("./SideMenu.cjs.js"),s=require("date-fns"),i=require("./DateTimePickerInputSection.cjs.js"),c=require("./DateTimePickerCalendarSection.cjs.js"),l=require("../../../../hooks/useRepeatFocus.cjs.js"),d="yyyy-mm-dd hh:mm:ss",m=[{id:r.THIRTY_SECONDS,name:"Last 30 seconds",rangeSeconds:30},{id:r.ONE_MINUTE,name:"Last 1 minute",rangeSeconds:60},{id:r.FIVE_MINUTES,name:"Last 5 minutes",rangeSeconds:300},{id:r.ONE_HOUR,name:"Last 1 hour",rangeSeconds:3600},{id:r.TWENTY_FOUR_HOURS,name:"Last 24 hours",rangeSeconds:86400},{id:r.CUSTOM_DATE_RANGE,name:"Custom"}];exports.DateTimePicker=({anchorRef:u,popoverRef:D,isOpen:f,setPickerOpen:p,onTagCaptionChange:E,translations:S={errors:{dateFormatError:`The format must be ${d}`},previousMonth:"Previous month",nextMonth:"Next month",from:"From",to:"To",cancel:"Cancel",apply:"Apply",dateInputPlaceholder:d},dateFilterValue:v,onDateFilterValueChange:T})=>{const{errors:{dateFormatError:h},previousMonth:I,nextMonth:g,cancel:N,from:j,to:M,apply:O,dateInputPlaceholder:P}=S,[x,F]=e.useState({from:(null==v?void 0:v.fromDate)?new Date(null==v?void 0:v.fromDate):void 0,to:(null==v?void 0:v.toDate)?new Date(null==v?void 0:v.toDate):void 0}),[C,_]=e.useState(m[0].id),[y,R]=e.useState(""),[w,k]=e.useState(""),[q,A]=e.useState(""),[U,b]=e.useState("");l.useRepeatFocus(D);const L=C!==r.CUSTOM_DATE_RANGE;e.useEffect((()=>{var e;f&&(null==(e=D.current)||e.focus())}),[f]),e.useEffect((()=>{if(v){const e=m.find((e=>e.id===v.type));if(e&&E(e.name),_(v.type),(null==e?void 0:e.rangeSeconds)&&v.type!==r.CUSTOM_DATE_RANGE){const t=s.addSeconds(new Date,-e.rangeSeconds),a=new Date;return R(r.formatInputDate(t)),k(r.formatInputDate(a)),void F({from:t,to:a})}v.fromDate&&R(r.formatInputDate(new Date(v.fromDate))),v.toDate&&k(r.formatInputDate(new Date(v.toDate))),F({from:(null==v?void 0:v.fromDate)?new Date(null==v?void 0:v.fromDate):void 0,to:(null==v?void 0:v.toDate)?new Date(null==v?void 0:v.toDate):void 0})}}),[v]),e.useEffect((()=>{v||f&&$(C)}),[f,v]);const $=e=>{_(e);const t=m.find((t=>t.id===e));if(t&&E(t.name),e!==r.CUSTOM_DATE_RANGE){if(!t)return;if(t.rangeSeconds){const e=s.addSeconds(new Date,-t.rangeSeconds),a=new Date;F({from:e,to:a}),R(r.formatInputDate(e)),k(r.formatInputDate(a))}}};return e.createElement(t.Popover,{tabIndex:-1,anchorEl:u,ref:D,show:f,placement:{horizontal:"left",vertical:"bottom"},transformOrigin:{horizontal:"left",vertical:"top"}},e.createElement("div",{className:a.default.popover},e.createElement("div",{className:a.default["content-wrapper"]},e.createElement("div",{className:a.default.aside},e.createElement(n.SideMenu,{sideMenuItems:m,selectedItemId:C,onItemSelect:$})),e.createElement("div",{className:`${a.default.controls} ${U||q?a.default["has-error"]:""}`},e.createElement("div",{className:a.default["controls-panel"]},e.createElement(i.DateTimePickerInputSection,{from:j,to:M,dateInputPlaceholder:P,dateFormatError:h,fromDateText:y,toDateText:w,fromDateError:q,toDateError:U,setSelectedDate:F,setFromDateText:R,setToDateText:k,setFromDateError:A,setToDateError:b})),e.createElement("div",{className:`${a.default["controls-panel"]} ${a.default["set-height"]}`},e.createElement(c.DateTimePickerCalendarSection,{previousMonth:I,nextMonth:g,selectedDate:x,disableDateRangePickers:L,setSelectedDate:F,setFromDateText:R,setFromDateError:A,setToDateText:k,setToDateError:b})))),e.createElement("div",{className:a.default.actions},e.createElement(o.Button,{variant:"text",onClick:()=>{p(!1)}},N),e.createElement(o.Button,{onClick:()=>{var e,t;T&&T({toDate:(null==(e=x.to)?void 0:e.toISOString())??"",fromDate:(null==(t=x.from)?void 0:t.toISOString())??"",type:C}),p(!1)}},O))))},exports.dateFormat=d;
 //# sourceMappingURL=DateTimePicker.cjs.js.map

package/dist/components/DataGrid/DataGridFilters/DateTimePicker/DateTimePicker.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimePicker.cjs.js","sources":["../../../../../src/components/DataGrid/DataGridFilters/DateTimePicker/DateTimePicker.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, { useEffect, useState } from \"react\";\nimport { Popover } from \"../../../Popover/Popover\";\nimport classes from \"./DateTimePicker.module.scss\";\nimport { Button } from \"../../../Button/Button\";\nimport { DateRange } from \"react-day-picker\";\nimport {\n  CUSTOM_DATE_RANGE,\n  FIVE_MINUTES,\n  ONE_HOUR,\n  ONE_MINUTE,\n  THIRTY_SECONDS,\n  TWENTY_FOUR_HOURS,\n  formatInputDate\n} from \"./DateTimeService\";\nimport { SideMenu } from \"./SideMenu\";\nimport { addSeconds } from \"date-fns\";\nimport { DateTimePickerInputSection } from \"./DateTimePickerInputSection\";\nimport { DateTimePickerCalendarSection } from \"./DateTimePickerCalendarSection\";\nimport { DateTimeFilter, DateTimeFilterType } from \"../DataGridFilters.interfaces\";\nimport { useRepeatFocus } from \"../../../../hooks/useRepeatFocus\";\n\nexport type DateTimePickerTranslations = {\n  errors: {\n    dateFormatError: string;\n  };\n  previousMonth: string;\n  nextMonth: string;\n  from: string;\n  to: string;\n  cancel: string;\n  apply: string;\n  dateInputPlaceholder: string;\n};\n\nexport type Props = {\n  popoverRef: React.RefObject<HTMLDivElement>;\n  anchorRef?: React.RefObject<HTMLDivElement>;\n  isOpen: boolean;\n  onTagCaptionChange: (value: string) => void;\n  setPickerOpen: (open: boolean) => void;\n  translations?: DateTimePickerTranslations;\n  dateFilterValue?: DateTimeFilter;\n  onDateFilterValueChange?: (dateTimeFilter: DateTimeFilter) => void;\n};\n\nexport type SideMenuItem = {\n  id: DateTimeFilterType;\n  name: string;\n  rangeSeconds?: number;\n};\n\nexport const dateFormat = \"yyyy-mm-dd hh:mm:ss\";\n\nconst sideMenuItems: SideMenuItem[] = [\n  { id: THIRTY_SECONDS, name: \"Last 30 seconds\", rangeSeconds: 30 },\n  { id: ONE_MINUTE, name: \"Last 1 minute\", rangeSeconds: 60 },\n  { id: FIVE_MINUTES, name: \"Last 5 minutes\", rangeSeconds: 300 },\n  { id: ONE_HOUR, name: \"Last 1 hour\", rangeSeconds: 3600 },\n  { id: TWENTY_FOUR_HOURS, name: \"Last 24 hours\", rangeSeconds: 86400 },\n  { id: CUSTOM_DATE_RANGE, name: \"Custom\" }\n];\n\nexport const DateTimePicker = ({\n  anchorRef,\n  popoverRef,\n  isOpen,\n  setPickerOpen,\n  onTagCaptionChange,\n  translations = {\n    errors: {\n      dateFormatError: `The format must be ${dateFormat}`\n    },\n    previousMonth: \"Previous month\",\n    nextMonth: \"Next month\",\n    from: \"From\",\n    to: \"To\",\n    cancel: \"Cancel\",\n    apply: \"Apply\",\n    dateInputPlaceholder: dateFormat\n  },\n  dateFilterValue,\n  onDateFilterValueChange\n}: Props) => {\n  const {\n    errors: { dateFormatError },\n    previousMonth,\n    nextMonth,\n    cancel,\n    from,\n    to,\n    apply,\n    dateInputPlaceholder\n  } = translations;\n  const [selectedDate, setSelectedDate] = useState<DateRange>({\n    from: dateFilterValue?.fromDate ? new Date(dateFilterValue?.fromDate) : undefined,\n    to: dateFilterValue?.toDate ? new Date(dateFilterValue?.toDate) : undefined\n  });\n  const [selectedPredefinedRange, setSelectedPredefinedRange] = useState<DateTimeFilterType>(\n    sideMenuItems[0].id\n  );\n  const [fromDateText, setFromDateText] = useState(\"\");\n  const [toDateText, setToDateText] = useState(\"\");\n  const [fromDateError, setFromDateError] = useState(\"\");\n  const [toDateError, setToDateError] = useState(\"\");\n  useRepeatFocus(popoverRef);\n\n  const disableDateRangePickers = selectedPredefinedRange !== CUSTOM_DATE_RANGE;\n\n  useEffect(() => {\n    if (isOpen) {\n      popoverRef.current?.focus();\n    }\n  }, [isOpen]);\n\n  useEffect(() => {\n    if (dateFilterValue) {\n      const foundItem = sideMenuItems.find(item => item.id === dateFilterValue.type);\n\n      foundItem && onTagCaptionChange(foundItem.name);\n\n      setSelectedPredefinedRange(dateFilterValue.type);\n\n      if (foundItem?.rangeSeconds && dateFilterValue.type !== CUSTOM_DATE_RANGE) {\n        const fromDate = addSeconds(new Date(), -foundItem.rangeSeconds);\n        const toDate = new Date();\n\n        setFromDateText(formatInputDate(fromDate));\n        setToDateText(formatInputDate(toDate));\n        setSelectedDate({ from: fromDate, to: toDate });\n\n        return;\n      }\n\n      dateFilterValue.fromDate &&\n        setFromDateText(formatInputDate(new Date(dateFilterValue.fromDate)));\n\n      dateFilterValue.toDate && setToDateText(formatInputDate(new Date(dateFilterValue.toDate)));\n\n      setSelectedDate({\n        from: dateFilterValue?.fromDate ? new Date(dateFilterValue?.fromDate) : undefined,\n        to: dateFilterValue?.toDate ? new Date(dateFilterValue?.toDate) : undefined\n      });\n    }\n  }, [dateFilterValue]);\n\n  useEffect(() => {\n    if (!dateFilterValue) {\n      isOpen && onSideMenuItemSelect(selectedPredefinedRange);\n    }\n  }, [isOpen, dateFilterValue]);\n\n  const onSideMenuItemSelect = (itemId: DateTimeFilterType) => {\n    setSelectedPredefinedRange(itemId);\n    const foundItem = sideMenuItems.find(item => item.id === itemId);\n    foundItem && onTagCaptionChange(foundItem.name);\n\n    if (itemId !== CUSTOM_DATE_RANGE) {\n      if (!foundItem) {\n        return;\n      }\n\n      if (foundItem.rangeSeconds) {\n        const fromDate = addSeconds(new Date(), -foundItem.rangeSeconds);\n        const toDate = new Date();\n\n        setSelectedDate({ from: fromDate, to: toDate });\n        setFromDateText(formatInputDate(fromDate));\n        setToDateText(formatInputDate(toDate));\n      }\n    }\n  };\n\n  const closeDateTimePicker = () => {\n    setPickerOpen(false);\n  };\n\n  const saveDateTimePicker = () => {\n    onDateFilterValueChange &&\n      onDateFilterValueChange({\n        toDate: selectedDate.to?.toISOString() ?? \"\",\n        fromDate: selectedDate.from?.toISOString() ?? \"\",\n        type: selectedPredefinedRange\n      });\n    setPickerOpen(false);\n  };\n\n  return (\n    <Popover\n      tabIndex={-1}\n      anchorEl={anchorRef}\n      ref={popoverRef}\n      show={isOpen}\n      placement={{ horizontal: \"left\", vertical: \"bottom\" }}\n      transformOrigin={{ horizontal: \"left\", vertical: \"top\" }}\n    >\n      {isOpen && (\n        <div className={classes[\"popover\"]}>\n          <div className={classes[\"content-wrapper\"]}>\n            <div className={classes[\"aside\"]}>\n              <SideMenu\n                sideMenuItems={sideMenuItems}\n                selectedItemId={selectedPredefinedRange}\n                onItemSelect={onSideMenuItemSelect}\n              />\n            </div>\n            <div\n              className={`${classes[\"controls\"]} ${toDateError || fromDateError ? classes[\"has-error\"] : \"\"}`}\n            >\n              <div className={classes[\"controls-panel\"]}>\n                <DateTimePickerInputSection\n                  from={from}\n                  to={to}\n                  dateInputPlaceholder={dateInputPlaceholder}\n                  dateFormatError={dateFormatError}\n                  fromDateText={fromDateText}\n                  toDateText={toDateText}\n                  fromDateError={fromDateError}\n                  toDateError={toDateError}\n                  setSelectedDate={setSelectedDate}\n                  setFromDateText={setFromDateText}\n                  setToDateText={setToDateText}\n                  setFromDateError={setFromDateError}\n                  setToDateError={setToDateError}\n                />\n              </div>\n              <div className={`${classes[\"controls-panel\"]} ${classes[\"set-height\"]}`}>\n                <DateTimePickerCalendarSection\n                  previousMonth={previousMonth}\n                  nextMonth={nextMonth}\n                  selectedDate={selectedDate}\n                  disableDateRangePickers={disableDateRangePickers}\n                  setSelectedDate={setSelectedDate}\n                  setFromDateText={setFromDateText}\n                  setFromDateError={setFromDateError}\n                  setToDateText={setToDateText}\n                  setToDateError={setToDateError}\n                />\n              </div>\n            </div>\n          </div>\n          <div className={classes[\"actions\"]}>\n            <Button variant=\"text\" onClick={closeDateTimePicker}>\n              {cancel}\n            </Button>\n            <Button onClick={saveDateTimePicker}>{apply}</Button>\n          </div>\n        </div>\n      )}\n    </Popover>\n  );\n};\n"],"names":["dateFormat","sideMenuItems","id","THIRTY_SECONDS","name","rangeSeconds","ONE_MINUTE","FIVE_MINUTES","ONE_HOUR","TWENTY_FOUR_HOURS","CUSTOM_DATE_RANGE","anchorRef","popoverRef","isOpen","setPickerOpen","onTagCaptionChange","translations","errors","dateFormatError","previousMonth","nextMonth","from","to","cancel","apply","dateInputPlaceholder","dateFilterValue","onDateFilterValueChange","selectedDate","setSelectedDate","useState","fromDate","Date","toDate","selectedPredefinedRange","setSelectedPredefinedRange","fromDateText","setFromDateText","toDateText","setToDateText","fromDateError","setFromDateError","toDateError","setToDateError","useRepeatFocus","disableDateRangePickers","useEffect","_a","current","focus","foundItem","find","item","type","addSeconds","formatInputDate","onSideMenuItemSelect","itemId","React","createElement","Popover","tabIndex","anchorEl","ref","show","placement","horizontal","vertical","transformOrigin","className","classes","SideMenu","selectedItemId","onItemSelect","DateTimePickerInputSection","default","DateTimePickerCalendarSection","Button","variant","onClick","toISOString","_b"],"mappings":"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"}
+{"version":3,"file":"DateTimePicker.cjs.js","sources":["../../../../../src/components/DataGrid/DataGridFilters/DateTimePicker/DateTimePicker.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, { useEffect, useState } from \"react\";\nimport { Popover } from \"../../../Popover/Popover\";\nimport classes from \"./DateTimePicker.module.scss\";\nimport { Button } from \"../../../Button/Button\";\nimport { DateRange } from \"react-day-picker\";\nimport {\n  CUSTOM_DATE_RANGE,\n  FIVE_MINUTES,\n  ONE_HOUR,\n  ONE_MINUTE,\n  THIRTY_SECONDS,\n  TWENTY_FOUR_HOURS,\n  formatInputDate\n} from \"./DateTimeService\";\nimport { SideMenu } from \"./SideMenu\";\nimport { addSeconds } from \"date-fns\";\nimport { DateTimePickerInputSection } from \"./DateTimePickerInputSection\";\nimport { DateTimePickerCalendarSection } from \"./DateTimePickerCalendarSection\";\nimport { DateTimeFilter, DateTimeFilterType } from \"../DataGridFilters.interfaces\";\nimport { useRepeatFocus } from \"../../../../hooks/useRepeatFocus\";\n\nexport type DateTimePickerTranslations = {\n  errors: {\n    dateFormatError: string;\n  };\n  previousMonth: string;\n  nextMonth: string;\n  from: string;\n  to: string;\n  cancel: string;\n  apply: string;\n  dateInputPlaceholder: string;\n};\n\nexport type Props = {\n  popoverRef: React.RefObject<HTMLDivElement>;\n  anchorRef?: React.RefObject<HTMLDivElement>;\n  isOpen: boolean;\n  onTagCaptionChange: (value: string) => void;\n  setPickerOpen: (open: boolean) => void;\n  translations?: DateTimePickerTranslations;\n  dateFilterValue?: DateTimeFilter;\n  onDateFilterValueChange?: (dateTimeFilter: DateTimeFilter) => void;\n};\n\nexport type SideMenuItem = {\n  id: DateTimeFilterType;\n  name: string;\n  rangeSeconds?: number;\n};\n\nexport const dateFormat = \"yyyy-mm-dd hh:mm:ss\";\n\nconst sideMenuItems: SideMenuItem[] = [\n  { id: THIRTY_SECONDS, name: \"Last 30 seconds\", rangeSeconds: 30 },\n  { id: ONE_MINUTE, name: \"Last 1 minute\", rangeSeconds: 60 },\n  { id: FIVE_MINUTES, name: \"Last 5 minutes\", rangeSeconds: 300 },\n  { id: ONE_HOUR, name: \"Last 1 hour\", rangeSeconds: 3600 },\n  { id: TWENTY_FOUR_HOURS, name: \"Last 24 hours\", rangeSeconds: 86400 },\n  { id: CUSTOM_DATE_RANGE, name: \"Custom\" }\n];\n\nexport const DateTimePicker = ({\n  anchorRef,\n  popoverRef,\n  isOpen,\n  setPickerOpen,\n  onTagCaptionChange,\n  translations = {\n    errors: {\n      dateFormatError: `The format must be ${dateFormat}`\n    },\n    previousMonth: \"Previous month\",\n    nextMonth: \"Next month\",\n    from: \"From\",\n    to: \"To\",\n    cancel: \"Cancel\",\n    apply: \"Apply\",\n    dateInputPlaceholder: dateFormat\n  },\n  dateFilterValue,\n  onDateFilterValueChange\n}: Props) => {\n  const {\n    errors: { dateFormatError },\n    previousMonth,\n    nextMonth,\n    cancel,\n    from,\n    to,\n    apply,\n    dateInputPlaceholder\n  } = translations;\n  const [selectedDate, setSelectedDate] = useState<DateRange>({\n    from: dateFilterValue?.fromDate ? new Date(dateFilterValue?.fromDate) : undefined,\n    to: dateFilterValue?.toDate ? new Date(dateFilterValue?.toDate) : undefined\n  });\n  const [selectedPredefinedRange, setSelectedPredefinedRange] = useState<DateTimeFilterType>(\n    sideMenuItems[0].id\n  );\n  const [fromDateText, setFromDateText] = useState(\"\");\n  const [toDateText, setToDateText] = useState(\"\");\n  const [fromDateError, setFromDateError] = useState(\"\");\n  const [toDateError, setToDateError] = useState(\"\");\n  useRepeatFocus(popoverRef);\n\n  const disableDateRangePickers = selectedPredefinedRange !== CUSTOM_DATE_RANGE;\n\n  useEffect(() => {\n    if (isOpen) {\n      popoverRef.current?.focus();\n    }\n  }, [isOpen]);\n\n  useEffect(() => {\n    if (dateFilterValue) {\n      const foundItem = sideMenuItems.find(item => item.id === dateFilterValue.type);\n\n      foundItem && onTagCaptionChange(foundItem.name);\n\n      setSelectedPredefinedRange(dateFilterValue.type);\n\n      if (foundItem?.rangeSeconds && dateFilterValue.type !== CUSTOM_DATE_RANGE) {\n        const fromDate = addSeconds(new Date(), -foundItem.rangeSeconds);\n        const toDate = new Date();\n\n        setFromDateText(formatInputDate(fromDate));\n        setToDateText(formatInputDate(toDate));\n        setSelectedDate({ from: fromDate, to: toDate });\n\n        return;\n      }\n\n      dateFilterValue.fromDate &&\n        setFromDateText(formatInputDate(new Date(dateFilterValue.fromDate)));\n\n      dateFilterValue.toDate && setToDateText(formatInputDate(new Date(dateFilterValue.toDate)));\n\n      setSelectedDate({\n        from: dateFilterValue?.fromDate ? new Date(dateFilterValue?.fromDate) : undefined,\n        to: dateFilterValue?.toDate ? new Date(dateFilterValue?.toDate) : undefined\n      });\n    }\n  }, [dateFilterValue]);\n\n  useEffect(() => {\n    if (!dateFilterValue) {\n      isOpen && onSideMenuItemSelect(selectedPredefinedRange);\n    }\n  }, [isOpen, dateFilterValue]);\n\n  const onSideMenuItemSelect = (itemId: DateTimeFilterType) => {\n    setSelectedPredefinedRange(itemId);\n    const foundItem = sideMenuItems.find(item => item.id === itemId);\n    foundItem && onTagCaptionChange(foundItem.name);\n\n    if (itemId !== CUSTOM_DATE_RANGE) {\n      if (!foundItem) {\n        return;\n      }\n\n      if (foundItem.rangeSeconds) {\n        const fromDate = addSeconds(new Date(), -foundItem.rangeSeconds);\n        const toDate = new Date();\n\n        setSelectedDate({ from: fromDate, to: toDate });\n        setFromDateText(formatInputDate(fromDate));\n        setToDateText(formatInputDate(toDate));\n      }\n    }\n  };\n\n  const closeDateTimePicker = () => {\n    setPickerOpen(false);\n  };\n\n  const saveDateTimePicker = () => {\n    onDateFilterValueChange &&\n      onDateFilterValueChange({\n        toDate: selectedDate.to?.toISOString() ?? \"\",\n        fromDate: selectedDate.from?.toISOString() ?? \"\",\n        type: selectedPredefinedRange\n      });\n    setPickerOpen(false);\n  };\n\n  return (\n    <Popover\n      tabIndex={-1}\n      anchorEl={anchorRef}\n      ref={popoverRef}\n      show={isOpen}\n      placement={{ horizontal: \"left\", vertical: \"bottom\" }}\n      transformOrigin={{ horizontal: \"left\", vertical: \"top\" }}\n    >\n      <div className={classes[\"popover\"]}>\n        <div className={classes[\"content-wrapper\"]}>\n          <div className={classes[\"aside\"]}>\n            <SideMenu\n              sideMenuItems={sideMenuItems}\n              selectedItemId={selectedPredefinedRange}\n              onItemSelect={onSideMenuItemSelect}\n            />\n          </div>\n          <div\n            className={`${classes[\"controls\"]} ${toDateError || fromDateError ? classes[\"has-error\"] : \"\"}`}\n          >\n            <div className={classes[\"controls-panel\"]}>\n              <DateTimePickerInputSection\n                from={from}\n                to={to}\n                dateInputPlaceholder={dateInputPlaceholder}\n                dateFormatError={dateFormatError}\n                fromDateText={fromDateText}\n                toDateText={toDateText}\n                fromDateError={fromDateError}\n                toDateError={toDateError}\n                setSelectedDate={setSelectedDate}\n                setFromDateText={setFromDateText}\n                setToDateText={setToDateText}\n                setFromDateError={setFromDateError}\n                setToDateError={setToDateError}\n              />\n            </div>\n            <div className={`${classes[\"controls-panel\"]} ${classes[\"set-height\"]}`}>\n              <DateTimePickerCalendarSection\n                previousMonth={previousMonth}\n                nextMonth={nextMonth}\n                selectedDate={selectedDate}\n                disableDateRangePickers={disableDateRangePickers}\n                setSelectedDate={setSelectedDate}\n                setFromDateText={setFromDateText}\n                setFromDateError={setFromDateError}\n                setToDateText={setToDateText}\n                setToDateError={setToDateError}\n              />\n            </div>\n          </div>\n        </div>\n        <div className={classes[\"actions\"]}>\n          <Button variant=\"text\" onClick={closeDateTimePicker}>\n            {cancel}\n          </Button>\n          <Button onClick={saveDateTimePicker}>{apply}</Button>\n        </div>\n      </div>\n    </Popover>\n  );\n};\n"],"names":["dateFormat","sideMenuItems","id","THIRTY_SECONDS","name","rangeSeconds","ONE_MINUTE","FIVE_MINUTES","ONE_HOUR","TWENTY_FOUR_HOURS","CUSTOM_DATE_RANGE","anchorRef","popoverRef","isOpen","setPickerOpen","onTagCaptionChange","translations","errors","dateFormatError","previousMonth","nextMonth","from","to","cancel","apply","dateInputPlaceholder","dateFilterValue","onDateFilterValueChange","selectedDate","setSelectedDate","useState","fromDate","Date","toDate","selectedPredefinedRange","setSelectedPredefinedRange","fromDateText","setFromDateText","toDateText","setToDateText","fromDateError","setFromDateError","toDateError","setToDateError","useRepeatFocus","disableDateRangePickers","useEffect","_a","current","focus","foundItem","find","item","type","addSeconds","formatInputDate","onSideMenuItemSelect","itemId","React","createElement","Popover","tabIndex","anchorEl","ref","show","placement","horizontal","vertical","transformOrigin","className","classes","default","SideMenu","selectedItemId","onItemSelect","DateTimePickerInputSection","DateTimePickerCalendarSection","Button","variant","onClick","toISOString","_b"],"mappings":"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"}