@onewelcome/react-lib-components 12.0.0 → 12.0.1

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

@@ -0,0 +1,118 @@
+import React, { useRef, useState, useEffect, Fragment } from "react";
+import { createPortal } from "react-dom";
+import { useGetDomRoot } from "../../../hooks/useGetDomRoot.es.js";
+import { generateID } from "../../../util/helper.es.js";
+import { DataGridFilterTag } from "./DataGridFilterTag.es.js";
+import { DataGridFilterPopover } from "./DataGridFilterPopover.es.js";
+import { useDataGridFilter } from "./DataGridFilterService.es.js";
+const DataGridFilter = ({
+  mode,
+  filter,
+  domRoot,
+  columnsMetadata,
+  onFilterAdd,
+  onFilterEdit,
+  onFilterDelete,
+  tagTranslations,
+  popoverTranslations,
+  customEditTagContent,
+  filterState
+}) => {
+  const wrappingDivRef = useRef(null);
+  const triggerRef = useRef(null);
+  const popoverRef = useRef(null);
+  const [filterOpen, setFilterOpen] = useState(false);
+  const wasOpenRef = useRef(false);
+  useEffect(() => {
+    var _a;
+    if (!filterOpen && wasOpenRef.current) {
+      (_a = triggerRef.current) == null ? void 0 : _a.focus();
+    }
+    wasOpenRef.current = filterOpen;
+  }, [filterOpen]);
+  const { root } = useGetDomRoot(domRoot, wrappingDivRef);
+  const {
+    resetFields,
+    operator,
+    setOperator,
+    operators,
+    setOperators,
+    column,
+    setColumn,
+    values,
+    setValues,
+    pickedValues,
+    setPickedValues,
+    initialiseFilterValues,
+    allowedColumnsMetaData
+  } = useDataGridFilter(mode, columnsMetadata, filterState);
+  const onFilterSubmit = () => {
+    if (mode === "ADD") {
+      const id = generateID();
+      onFilterAdd && onFilterAdd({ id, column, operator, value: pickedValues });
+    } else if (mode === "EDIT" && filter) {
+      const { id } = filter;
+      onFilterEdit && onFilterEdit({ id, column, operator, value: pickedValues });
+    }
+    resetFields();
+    setFilterOpen(false);
+  };
+  const onFilterRemove = () => {
+    if (!filter) {
+      return;
+    }
+    const { id } = filter;
+    onFilterDelete && onFilterDelete(id);
+    resetFields();
+    setFilterOpen(false);
+  };
+  const onFilterOpen = () => {
+    setFilterOpen(!filterOpen);
+    if (!filterOpen) {
+      initialiseFilterValues(filter);
+    }
+  };
+  return /* @__PURE__ */ React.createElement(Fragment, null, /* @__PURE__ */ React.createElement(
+    DataGridFilterTag,
+    {
+      mode,
+      onFilterOpen,
+      onFilterRemove,
+      triggerRef,
+      ref: wrappingDivRef,
+      filter,
+      translations: tagTranslations,
+      customEditTagContent,
+      columnsMetadata
+    }
+  ), createPortal(
+    /* @__PURE__ */ React.createElement(
+      DataGridFilterPopover,
+      {
+        popoverRef,
+        anchorRef: wrappingDivRef,
+        isOpen: filterOpen,
+        translations: popoverTranslations,
+        column,
+        columnsMetadata: allowedColumnsMetaData,
+        values,
+        pickedValues,
+        operator,
+        operators,
+        onFilterSubmit,
+        resetFields,
+        setFilterOpen,
+        setColumn,
+        setOperator,
+        setOperators,
+        setValues,
+        setPickedValues
+      }
+    ),
+    root
+  ));
+};
+export {
+  DataGridFilter
+};
+//# sourceMappingURL=DataGridFilter.es.js.map

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

@@ -0,0 +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, useEffect } 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 wasOpenRef = useRef(false);\n\n  useEffect(() => {\n    if (!filterOpen && wasOpenRef.current) {\n      triggerRef.current?.focus();\n    }\n    wasOpenRef.current = filterOpen;\n  }, [filterOpen]);\n\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;AAC5C,QAAA,aAAa,OAAO,KAAK;AAE/B,YAAU,MAAM;;AACV,QAAA,CAAC,cAAc,WAAW,SAAS;AACrC,uBAAW,YAAX,mBAAoB;AAAA,IAAM;AAE5B,eAAW,UAAU;AAAA,EAAA,GACpB,CAAC,UAAU,CAAC;AAEf,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

@@ -0,0 +1,3 @@
+!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('.DataGridFilter_sr-only_gFXfX{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.DataGridFilter_hidden_gFXfX{display:none}.DataGridFilter_slide-in_gFXfX{animation:DataGridFilter_slide-in_gFXfX .5s forwards}@media (prefers-reduced-motion: reduce){.DataGridFilter_slide-in_gFXfX{animation-duration:.1ms}}.DataGridFilter_slide-out_gFXfX{animation:DataGridFilter_slide-out_gFXfX .5s forwards}@media (prefers-reduced-motion: reduce){.DataGridFilter_slide-out_gFXfX{animation-duration:.1ms}}@keyframes DataGridFilter_slide-in_gFXfX{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes DataGridFilter_slide-out_gFXfX{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_gFXfX{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_gFXfX:hover{background-color:var(--color-blue-grey200)}.DataGridFilter_filter-wrapper_gFXfX:active{background-color:var(--color-primary100)}.DataGridFilter_filter-wrapper_gFXfX .DataGridFilter_filter-button_gFXfX{display:flex;justify-content:flex-start;align-items:center;gap:.375rem;background:none;border:none;padding:0 .25rem;cursor:pointer}.DataGridFilter_filter-wrapper_gFXfX .DataGridFilter_filter-button_gFXfX:only-child{margin-right:-.25rem}.DataGridFilter_filter-wrapper_gFXfX .DataGridFilter_filter-button_gFXfX:focus-visible{outline:calc(.125 * var(--font-size)) solid var(--color-focus);outline-offset:0;border-radius:var(--focus-border-radius)}.DataGridFilter_filter-wrapper_gFXfX .DataGridFilter_remove-button_gFXfX{border-radius:1.25rem}.DataGridFilter_filter-wrapper_gFXfX .DataGridFilter_caption_gFXfX{font-size:var(--font-size-data-grid);line-height:var(--data-grid-line-height);margin:0;font-weight:400}.DataGridFilter_filter-wrapper_gFXfX .DataGridFilter_caption_gFXfX.DataGridFilter_bold_gFXfX{font-weight:600}.DataGridFilter_filter-wrapper_gFXfX .DataGridFilter_remove-icon_gFXfX{font-size:calc(.6 * var(--font-size))}.DataGridFilter_column-select-option_gFXfX{text-transform:capitalize}.DataGridFilter_popover_gFXfX{display:flex;flex-direction:column;align-items:flex-start;gap:1rem;padding:1rem .75rem;min-width:40rem}.DataGridFilter_popover_gFXfX .DataGridFilter_controls_gFXfX{width:100%;display:flex;gap:1rem}.DataGridFilter_popover_gFXfX .DataGridFilter_controls_gFXfX>*:first-child{flex-grow:1.8;flex-shrink:0;margin-top:0}.DataGridFilter_popover_gFXfX .DataGridFilter_controls_gFXfX>*:nth-child(2){flex-grow:1;flex-shrink:0;margin-top:0}.DataGridFilter_popover_gFXfX .DataGridFilter_controls_gFXfX>*:last-child{flex-basis:15rem;flex-grow:1.8;flex-shrink:0;margin-top:0}.DataGridFilter_popover_gFXfX .DataGridFilter_actions_gFXfX{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_gFXfX",e="DataGridFilter_popover_gFXfX",o="DataGridFilter_controls_gFXfX",r="DataGridFilter_actions_gFXfX",i={"filter-wrapper":"DataGridFilter_filter-wrapper_gFXfX","filter-button":"DataGridFilter_filter-button_gFXfX","remove-button":"DataGridFilter_remove-button_gFXfX",caption:t,"column-select-option":"DataGridFilter_column-select-option_gFXfX",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.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataGridFilter.module.scss.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

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

@@ -0,0 +1,23 @@
+!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('.DataGridFilter_sr-only_gFXfX{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.DataGridFilter_hidden_gFXfX{display:none}.DataGridFilter_slide-in_gFXfX{animation:DataGridFilter_slide-in_gFXfX .5s forwards}@media (prefers-reduced-motion: reduce){.DataGridFilter_slide-in_gFXfX{animation-duration:.1ms}}.DataGridFilter_slide-out_gFXfX{animation:DataGridFilter_slide-out_gFXfX .5s forwards}@media (prefers-reduced-motion: reduce){.DataGridFilter_slide-out_gFXfX{animation-duration:.1ms}}@keyframes DataGridFilter_slide-in_gFXfX{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes DataGridFilter_slide-out_gFXfX{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_gFXfX{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_gFXfX:hover{background-color:var(--color-blue-grey200)}.DataGridFilter_filter-wrapper_gFXfX:active{background-color:var(--color-primary100)}.DataGridFilter_filter-wrapper_gFXfX .DataGridFilter_filter-button_gFXfX{display:flex;justify-content:flex-start;align-items:center;gap:.375rem;background:none;border:none;padding:0 .25rem;cursor:pointer}.DataGridFilter_filter-wrapper_gFXfX .DataGridFilter_filter-button_gFXfX:only-child{margin-right:-.25rem}.DataGridFilter_filter-wrapper_gFXfX .DataGridFilter_filter-button_gFXfX:focus-visible{outline:calc(.125 * var(--font-size)) solid var(--color-focus);outline-offset:0;border-radius:var(--focus-border-radius)}.DataGridFilter_filter-wrapper_gFXfX .DataGridFilter_remove-button_gFXfX{border-radius:1.25rem}.DataGridFilter_filter-wrapper_gFXfX .DataGridFilter_caption_gFXfX{font-size:var(--font-size-data-grid);line-height:var(--data-grid-line-height);margin:0;font-weight:400}.DataGridFilter_filter-wrapper_gFXfX .DataGridFilter_caption_gFXfX.DataGridFilter_bold_gFXfX{font-weight:600}.DataGridFilter_filter-wrapper_gFXfX .DataGridFilter_remove-icon_gFXfX{font-size:calc(.6 * var(--font-size))}.DataGridFilter_column-select-option_gFXfX{text-transform:capitalize}.DataGridFilter_popover_gFXfX{display:flex;flex-direction:column;align-items:flex-start;gap:1rem;padding:1rem .75rem;min-width:40rem}.DataGridFilter_popover_gFXfX .DataGridFilter_controls_gFXfX{width:100%;display:flex;gap:1rem}.DataGridFilter_popover_gFXfX .DataGridFilter_controls_gFXfX>*:first-child{flex-grow:1.8;flex-shrink:0;margin-top:0}.DataGridFilter_popover_gFXfX .DataGridFilter_controls_gFXfX>*:nth-child(2){flex-grow:1;flex-shrink:0;margin-top:0}.DataGridFilter_popover_gFXfX .DataGridFilter_controls_gFXfX>*:last-child{flex-basis:15rem;flex-grow:1.8;flex-shrink:0;margin-top:0}.DataGridFilter_popover_gFXfX .DataGridFilter_actions_gFXfX{display:flex;gap:1rem}')),document.head.appendChild(e)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}}();
+const caption = "DataGridFilter_caption_gFXfX";
+const popover = "DataGridFilter_popover_gFXfX";
+const controls = "DataGridFilter_controls_gFXfX";
+const actions = "DataGridFilter_actions_gFXfX";
+const classes = {
+  "filter-wrapper": "DataGridFilter_filter-wrapper_gFXfX",
+  "filter-button": "DataGridFilter_filter-button_gFXfX",
+  "remove-button": "DataGridFilter_remove-button_gFXfX",
+  caption,
+  "column-select-option": "DataGridFilter_column-select-option_gFXfX",
+  popover,
+  controls,
+  actions
+};
+export {
+  actions,
+  caption,
+  controls,
+  classes as default,
+  popover
+};
+//# sourceMappingURL=DataGridFilter.module.scss.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataGridFilter.module.scss.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}

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

@@ -0,0 +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:f,operator:j,operators:E,onFilterSubmit:b,resetFields:F,setFilterOpen:O,setColumn:S,setOperator:g,setOperators:h,setValues:k,setPickedValues:V,translations:y})=>{const{columnSelectLabel:q="Filter by",operatorSelectLabel:P="Operator",submitButtonTitle:B="Apply",cancelButtonTitle:D="Cancel"}=y||{};c.useRepeatFocus(u);const C=()=>{F(),O(!1)};e.useEffect((()=>{const e=e=>{p&&"Escape"===e.key&&C()};return globalThis.addEventListener("keydown",e),()=>{globalThis.removeEventListener("keydown",e)}}),[p,F,O]);const G=j&&!j.allowEmptyValues,T=Boolean(G&&0===f.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:q,value:m,name:"column",onChange:e=>{S(e.target.value);const t=d.find((({name:t})=>t===e.target.value));(null==t?void 0:t.operators)?(g(t.operators[0]),h(t.operators)):(g(Object.values(n.DefaultOperators)[0]),h(Object.values(n.DefaultOperators))),(null==t?void 0:t.defaultValues)?(V([]),k(t.defaultValues)):(V([]),k([]))}},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:P,value:(null==j?void 0:j.name)||"",name:"operator",onChange:e=>{const t=E.find((t=>t.name===e.target.value));g(t||null)}},E.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:f,setValues:k,setPickedValues:V,translations:y,operator:j})),e.createElement("div",{className:t.default.actions},e.createElement(a.Button,{onClick:b,disabled:T},B),e.createElement(a.Button,{variant:"text",onClick:C},D))))};
+//# sourceMappingURL=DataGridFilterPopover.cjs.js.map

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

@@ -0,0 +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, { useEffect } 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 handleClose = () => {\n    resetFields();\n    setFilterOpen(false);\n  };\n\n  useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (isOpen && event.key === \"Escape\") {\n        handleClose();\n      }\n    };\n\n    globalThis.addEventListener(\"keydown\", handleKeyDown);\n    return () => {\n      globalThis.removeEventListener(\"keydown\", handleKeyDown);\n    };\n  }, [isOpen, resetFields, setFilterOpen]);\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 variant=\"text\" onClick={handleClose}>\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","handleClose","useEffect","handleKeyDown","event","key","globalThis","addEventListener","removeEventListener","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","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,GAEf,MAAMuB,EAAc,KACNb,IACZC,GAAc,EAAK,EAGrBa,EAAAA,WAAU,KACF,MAAAC,EAAiBC,IACjBxB,GAAwB,WAAdwB,EAAMC,KACNJ,GAAA,EAKhB,OADWK,WAAAC,iBAAiB,UAAWJ,GAChC,KACMG,WAAAE,oBAAoB,UAAWL,EAAa,CACzD,GACC,CAACvB,EAAQQ,EAAaC,IAEnB,MAAAoB,EAAkBxB,IAAaA,EAASyB,iBACxCC,EAAqBC,QAAQH,GAA2C,IAAxBzB,EAAa6B,QAGjE,OAAAC,EAAAC,cAACC,EAAAA,QAAA,CACCC,UAAU,EACVC,SAAUvC,EACVwC,IAAKzC,EACL0C,KAAMxC,EACNyC,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,MAAOpC,EACPqC,MAAOpD,EACPqD,KAAM,SACNC,SAAeC,IACH9C,EAAA8C,EAAEC,OAAOJ,OACb,MAAAK,EAAiBxD,EAAgByD,MAAK,EAAGL,UAAWA,IAASE,EAAEC,OAAOJ,eAExEK,WAAgBpD,YACNK,EAAA+C,EAAepD,UAAU,IACrCM,EAAa8C,EAAepD,aAE5BK,EAAYiD,OAAOzD,OAAO0D,EAAAA,kBAAkB,IAC/BjD,EAAAgD,OAAOzD,OAAO0D,EAAAA,2BAGzBH,WAAgBI,gBAClBhD,EAAgB,IAChBD,EAAU6C,EAAeI,iBAEzBhD,EAAgB,IAChBD,EAAU,IAAE,GAIfX,EAAgB6D,KAAI,EAAGT,OAAMU,cAC3B9B,EAAAC,cAAA8B,EAAAA,OAAA,CAAOpB,UAAWC,EAAAC,QAAQ,wBAAyBtB,IAAK6B,EAAMD,MAAOC,GACnEU,MAIP9B,EAAAC,cAACa,EAAAA,cAAA,CACCI,MAAOnC,EACPoC,aAAOhD,WAAUiD,OAAQ,GACzBA,KAAM,WACNC,SAAeC,IACP,MAAAU,EAAmB5D,EAAUqD,MAAKQ,GAAMA,EAAGb,OAASE,EAAEC,OAAOJ,QACnE1C,EAAYuD,GAAoB,KAAI,GAGrC5D,EAAUyD,KAAI1D,mBACZ4D,EAAAA,OAAO,CAAAxC,IAAKpB,EAASiD,KAAMD,MAAOhD,EAASiD,MACzCjD,EAASiD,SAIhBpB,EAAAC,cAACiC,EAAAA,0BAAA,CACCnE,SACAC,kBACAC,SACAC,eACAS,YACAC,kBACAC,eACAV,cAGJ6B,EAAAC,cAAC,MAAI,CAAAU,UAAWC,EAAAA,QAAiB,SAC9BZ,EAAAC,cAAAkC,EAAAA,OAAA,CAAOC,QAAS/D,EAAgBgE,SAAUxC,GACxCb,GAEHgB,EAAAC,cAACkC,EAAAA,OAAO,CAAAG,QAAQ,OAAOF,QAASjD,GAC7BF,KAIT"}

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

@@ -0,0 +1,121 @@
+import React, { useEffect } from "react";
+import classes from "./DataGridFilter.module.scss.es.js";
+import { Button } from "../../Button/Button.es.js";
+import { Option } from "../../Form/Select/SingleSelect/Option.es.js";
+import { SelectWrapper } from "../../Form/Wrapper/SelectWrapper/SelectWrapper.es.js";
+import { Popover } from "../../Popover/Popover.es.js";
+import { DataGridFilterValueSelect } from "./DataGridFilterValueSelect.es.js";
+import { DefaultOperators } from "./DataGridFilters.interfaces.es.js";
+import { useRepeatFocus } from "../../../hooks/useRepeatFocus.es.js";
+const DataGridFilterPopover = ({
+  popoverRef,
+  anchorRef,
+  isOpen,
+  column,
+  columnsMetadata,
+  values,
+  pickedValues,
+  operator,
+  operators,
+  onFilterSubmit,
+  resetFields,
+  setFilterOpen,
+  setColumn,
+  setOperator,
+  setOperators,
+  setValues,
+  setPickedValues,
+  translations
+}) => {
+  const {
+    columnSelectLabel = "Filter by",
+    operatorSelectLabel = "Operator",
+    submitButtonTitle = "Apply",
+    cancelButtonTitle = "Cancel"
+  } = translations || {};
+  useRepeatFocus(popoverRef);
+  const handleClose = () => {
+    resetFields();
+    setFilterOpen(false);
+  };
+  useEffect(() => {
+    const handleKeyDown = (event) => {
+      if (isOpen && event.key === "Escape") {
+        handleClose();
+      }
+    };
+    globalThis.addEventListener("keydown", handleKeyDown);
+    return () => {
+      globalThis.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isOpen, resetFields, setFilterOpen]);
+  const isValueRequired = operator && !operator.allowEmptyValues;
+  const hasValidationError = Boolean(isValueRequired && pickedValues.length === 0);
+  return /* @__PURE__ */ React.createElement(
+    Popover,
+    {
+      tabIndex: -1,
+      anchorEl: anchorRef,
+      ref: popoverRef,
+      show: isOpen,
+      placement: { horizontal: "left", vertical: "bottom" },
+      transformOrigin: { horizontal: "left", vertical: "top" }
+    },
+    /* @__PURE__ */ React.createElement("div", { className: classes["popover"] }, /* @__PURE__ */ React.createElement("div", { className: classes["controls"] }, /* @__PURE__ */ React.createElement(
+      SelectWrapper,
+      {
+        selectProps: { selectButtonProps: { autoFocus: true } },
+        label: columnSelectLabel,
+        value: column,
+        name: "column",
+        onChange: (e) => {
+          setColumn(e.target.value);
+          const columnMetadata = columnsMetadata.find(({ name }) => name === e.target.value);
+          if (columnMetadata == null ? void 0 : columnMetadata.operators) {
+            setOperator(columnMetadata.operators[0]);
+            setOperators(columnMetadata.operators);
+          } else {
+            setOperator(Object.values(DefaultOperators)[0]);
+            setOperators(Object.values(DefaultOperators));
+          }
+          if (columnMetadata == null ? void 0 : columnMetadata.defaultValues) {
+            setPickedValues([]);
+            setValues(columnMetadata.defaultValues);
+          } else {
+            setPickedValues([]);
+            setValues([]);
+          }
+        }
+      },
+      columnsMetadata.map(({ name, headline }) => /* @__PURE__ */ React.createElement(Option, { className: classes["column-select-option"], key: name, value: name }, headline))
+    ), /* @__PURE__ */ React.createElement(
+      SelectWrapper,
+      {
+        label: operatorSelectLabel,
+        value: (operator == null ? void 0 : operator.name) || "",
+        name: "operator",
+        onChange: (e) => {
+          const selectedOperator = operators.find((op) => op.name === e.target.value);
+          setOperator(selectedOperator || null);
+        }
+      },
+      operators.map((operator2) => /* @__PURE__ */ React.createElement(Option, { key: operator2.name, value: operator2.name }, operator2.name))
+    ), /* @__PURE__ */ React.createElement(
+      DataGridFilterValueSelect,
+      {
+        column,
+        columnsMetadata,
+        values,
+        pickedValues,
+        setValues,
+        setPickedValues,
+        translations,
+        operator
+      }
+    )), /* @__PURE__ */ React.createElement("div", { className: classes["actions"] }, /* @__PURE__ */ React.createElement(Button, { onClick: onFilterSubmit, disabled: hasValidationError }, submitButtonTitle), /* @__PURE__ */ React.createElement(Button, { variant: "text", onClick: handleClose }, cancelButtonTitle)))
+  );
+};
+export {
+  DataGridFilterPopover
+};
+//# sourceMappingURL=DataGridFilterPopover.es.js.map

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

@@ -0,0 +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, { useEffect } 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 handleClose = () => {\n    resetFields();\n    setFilterOpen(false);\n  };\n\n  useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (isOpen && event.key === \"Escape\") {\n        handleClose();\n      }\n    };\n\n    globalThis.addEventListener(\"keydown\", handleKeyDown);\n    return () => {\n      globalThis.removeEventListener(\"keydown\", handleKeyDown);\n    };\n  }, [isOpen, resetFields, setFilterOpen]);\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 variant=\"text\" onClick={handleClose}>\n            {cancelButtonTitle}\n          </Button>\n        </div>\n      </div>\n    </Popover>\n  );\n};\n"],"names":["operator"],"mappings":";;;;;;;;;AAoDO,MAAM,wBAAwB,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAa;AACL,QAAA;AAAA,IACJ,oBAAoB;AAAA,IACpB,sBAAsB;AAAA,IACtB,oBAAoB;AAAA,IACpB,oBAAoB;AAAA,EACtB,IAAI,gBAAgB,CAAC;AACrB,iBAAe,UAAU;AAEzB,QAAM,cAAc,MAAM;AACZ,gBAAA;AACZ,kBAAc,KAAK;AAAA,EACrB;AAEA,YAAU,MAAM;AACR,UAAA,gBAAgB,CAAC,UAAyB;AAC1C,UAAA,UAAU,MAAM,QAAQ,UAAU;AACxB,oBAAA;AAAA,MAAA;AAAA,IAEhB;AAEW,eAAA,iBAAiB,WAAW,aAAa;AACpD,WAAO,MAAM;AACA,iBAAA,oBAAoB,WAAW,aAAa;AAAA,IACzD;AAAA,EACC,GAAA,CAAC,QAAQ,aAAa,aAAa,CAAC;AAEjC,QAAA,kBAAkB,YAAY,CAAC,SAAS;AAC9C,QAAM,qBAAqB,QAAQ,mBAAmB,aAAa,WAAW,CAAC;AAG7E,SAAA,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,UAAU;AAAA,MACV,KAAK;AAAA,MACL,MAAM;AAAA,MACN,WAAW,EAAE,YAAY,QAAQ,UAAU,SAAS;AAAA,MACpD,iBAAiB,EAAE,YAAY,QAAQ,UAAU,MAAM;AAAA,IAAA;AAAA,IAEvD,sBAAA,cAAC,OAAI,EAAA,WAAW,QAAQ,SAAS,KAC/B,sBAAA,cAAC,OAAI,EAAA,WAAW,QAAQ,UAAU,EAChC,GAAA,sBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,aAAa,EAAE,mBAAmB,EAAE,WAAW,OAAO;AAAA,QACtD,OAAO;AAAA,QACP,OAAO;AAAA,QACP,MAAM;AAAA,QACN,UAAU,CAAK,MAAA;AACH,oBAAA,EAAE,OAAO,KAAK;AAClB,gBAAA,iBAAiB,gBAAgB,KAAK,CAAC,EAAE,KAAW,MAAA,SAAS,EAAE,OAAO,KAAK;AAEjF,cAAI,iDAAgB,WAAW;AACjB,wBAAA,eAAe,UAAU,CAAC,CAAC;AACvC,yBAAa,eAAe,SAAS;AAAA,UAAA,OAChC;AACL,wBAAY,OAAO,OAAO,gBAAgB,EAAE,CAAC,CAAC;AACjC,yBAAA,OAAO,OAAO,gBAAgB,CAAC;AAAA,UAAA;AAG9C,cAAI,iDAAgB,eAAe;AACjC,4BAAgB,CAAA,CAAE;AAClB,sBAAU,eAAe,aAAa;AAAA,UAAA,OACjC;AACL,4BAAgB,CAAA,CAAE;AAClB,sBAAU,CAAA,CAAE;AAAA,UAAA;AAAA,QACd;AAAA,MACF;AAAA,MAEC,gBAAgB,IAAI,CAAC,EAAE,MAAM,eAC3B,sBAAA,cAAA,QAAA,EAAO,WAAW,QAAQ,sBAAsB,GAAG,KAAK,MAAM,OAAO,KAAA,GACnE,QACH,CACD;AAAA,IAEH,GAAA,sBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,QACP,QAAO,qCAAU,SAAQ;AAAA,QACzB,MAAM;AAAA,QACN,UAAU,CAAK,MAAA;AACP,gBAAA,mBAAmB,UAAU,KAAK,CAAA,OAAM,GAAG,SAAS,EAAE,OAAO,KAAK;AACxE,sBAAY,oBAAoB,IAAI;AAAA,QAAA;AAAA,MACtC;AAAA,MAEC,UAAU,IAAI,CAAAA,kDACZ,QAAO,EAAA,KAAKA,UAAS,MAAM,OAAOA,UAAS,KACzCA,GAAAA,UAAS,IACZ,CACD;AAAA,IAEH,GAAA,sBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IAEJ,CAAA,GACA,sBAAA,cAAC,OAAI,EAAA,WAAW,QAAQ,SAAS,EAAA,GAC9B,sBAAA,cAAA,QAAA,EAAO,SAAS,gBAAgB,UAAU,mBACxC,GAAA,iBACH,GACA,sBAAA,cAAC,QAAO,EAAA,SAAQ,QAAO,SAAS,YAAA,GAC7B,iBACH,CACF,CACF;AAAA,EACF;AAEJ;"}

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=require("./DataGridFilters.interfaces.cjs.js");exports.useDataGridFilter=(r,a,s)=>{const[l,o]=e.useState(""),[u,n]=e.useState(null),[i,c]=e.useState(Object.values(t.DefaultOperators)),[f,p]=e.useState([]),[d,m]=e.useState([]),[D,S]=e.useState([]),v=()=>{o(""),n(null),p([]),m([])};return{resetFields:v,initialiseFilterValues:e=>{const l=(e=>a.filter((t=>!t.allowSingleFilterOnly||!s.filters.find((a=>"ADD"===r?a.column==t.name:a.column==t.name&&a.column!=(null==e?void 0:e.column))))))(e);if("ADD"===r){const e=l[0];if(!e)return v(),void S([]);o(e.name),n(e.operators?e.operators[0]:Object.values(t.DefaultOperators)[0]),e.operators&&c(e.operators),e.defaultValues&&p(e.defaultValues)}if("EDIT"===r&&e){const{column:t,operator:r,value:s}=e,l=a.find((({name:e})=>e===t));if(!l)return;const{defaultValues:f,operators:d}=l;o(t),n(r),d&&c(d),m(s),p((u=f||[],i=s,Array.from(new Set([...u,...i]))))}var u,i;S(l)},operator:u,setOperator:n,operators:i,setOperators:c,column:l,setColumn:o,values:f,setValues:p,pickedValues:d,setPickedValues:m,allowedColumnsMetaData:D}};
+//# sourceMappingURL=DataGridFilterService.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataGridFilterService.cjs.js","sources":["../../../../src/components/DataGrid/DataGridFilters/DataGridFilterService.ts"],"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 { useState } from \"react\";\nimport {\n  DataGridColumnMetadata,\n  DefaultOperators,\n  Filter,\n  FilterEditorMode,\n  FilterOperator,\n  FiltersState\n} from \"./DataGridFilters.interfaces\";\n\nexport const useDataGridFilter = (\n  mode: FilterEditorMode,\n  columnsMetadata: DataGridColumnMetadata[],\n  filterState: FiltersState\n) => {\n  const [column, setColumn] = useState(\"\");\n  const [operator, setOperator] = useState<FilterOperator | null>(null);\n  const [operators, setOperators] = useState<FilterOperator[]>(Object.values(DefaultOperators));\n  const [values, setValues] = useState<string[]>([]);\n  const [pickedValues, setPickedValues] = useState<string[]>([]);\n  const [allowedColumnsMetaData, setAllowedColumnsMetaData] = useState<DataGridColumnMetadata[]>(\n    []\n  );\n\n  //user can extend the list of picked values with custom ones. We need to make sure that the default list includes the user created values.\n  const mergeCustomValuesWithPredefined = (values: string[], pickedValues: string[]) => {\n    return Array.from(new Set([...values, ...pickedValues]));\n  };\n\n  const resetFields = () => {\n    setColumn(\"\");\n    setOperator(null);\n    setValues([]);\n    setPickedValues([]);\n  };\n\n  const initialiseFilterValues = (filter?: Filter) => {\n    const allowedColumnMetaData = getAllowedColumnsMetadata(filter);\n\n    if (mode === \"ADD\") {\n      const firstColumnMetadata = allowedColumnMetaData[0];\n\n      if (!firstColumnMetadata) {\n        resetFields();\n        setAllowedColumnsMetaData([]);\n        return;\n      }\n\n      setColumn(firstColumnMetadata.name);\n      setOperator(\n        firstColumnMetadata.operators\n          ? firstColumnMetadata.operators[0]\n          : Object.values(DefaultOperators)[0]\n      );\n      firstColumnMetadata.operators && setOperators(firstColumnMetadata.operators);\n      firstColumnMetadata.defaultValues && setValues(firstColumnMetadata.defaultValues);\n    }\n\n    if (mode === \"EDIT\" && filter) {\n      const { column, operator, value } = filter;\n      const columnMetadata = columnsMetadata.find(({ name }) => name === column);\n\n      if (!columnMetadata) {\n        return;\n      }\n\n      const { defaultValues, operators } = columnMetadata;\n\n      setColumn(column);\n      setOperator(operator);\n      operators && setOperators(operators);\n      setPickedValues(value);\n      setValues(mergeCustomValuesWithPredefined(defaultValues || [], value));\n    }\n\n    setAllowedColumnsMetaData(allowedColumnMetaData);\n  };\n\n  const getAllowedColumnsMetadata = (filter?: Filter) => {\n    return columnsMetadata.filter(value => {\n      if (!value.allowSingleFilterOnly) {\n        return true;\n      }\n\n      return !filterState.filters.find(v => {\n        return mode === \"ADD\"\n          ? v.column == value.name\n          : v.column == value.name && v.column != filter?.column;\n      });\n    });\n  };\n\n  return {\n    resetFields,\n    initialiseFilterValues,\n    operator,\n    setOperator,\n    operators,\n    setOperators,\n    column,\n    setColumn,\n    values,\n    setValues,\n    pickedValues,\n    setPickedValues,\n    allowedColumnsMetaData\n  };\n};\n"],"names":["mode","columnsMetadata","filterState","column","setColumn","useState","operator","setOperator","operators","setOperators","Object","values","DefaultOperators","setValues","pickedValues","setPickedValues","allowedColumnsMetaData","setAllowedColumnsMetaData","resetFields","initialiseFilterValues","filter","allowedColumnMetaData","value","allowSingleFilterOnly","filters","find","v","name","getAllowedColumnsMetadata","firstColumnMetadata","defaultValues","columnMetadata","Array","from","Set"],"mappings":"oLA0BiC,CAC/BA,EACAC,EACAC,KAEA,MAAOC,EAAQC,GAAaC,EAAAA,SAAS,KAC9BC,EAAUC,GAAeF,EAAAA,SAAgC,OACzDG,EAAWC,GAAgBJ,WAA2BK,OAAOC,OAAOC,EAAAA,oBACpED,EAAQE,GAAaR,EAAAA,SAAmB,KACxCS,EAAcC,GAAmBV,EAAAA,SAAmB,KACpDW,EAAwBC,GAA6BZ,EAAAA,SAC1D,IAQIa,EAAc,KAClBd,EAAU,IACVG,EAAY,MACZM,EAAU,IACVE,EAAgB,GAAE,EA2Db,MAAA,CACLG,cACAC,uBA1D8BC,IACxB,MAAAC,EAyC0B,CAACD,GAC1BnB,EAAgBmB,QAAgBE,IAChCA,EAAMC,wBAIHrB,EAAYsB,QAAQC,MAAUC,GACpB,QAAT1B,EACH0B,EAAEvB,QAAUmB,EAAMK,KAClBD,EAAEvB,QAAUmB,EAAMK,MAAQD,EAAEvB,SAAkB,MAARiB,OAAQ,EAAAA,EAAAjB,YAlDxByB,CAA0BR,GAExD,GAAa,QAATpB,EAAgB,CACZ,MAAA6B,EAAsBR,EAAsB,GAElD,IAAKQ,EAGH,OAFYX,SACZD,EAA0B,IAI5Bb,EAAUyB,EAAoBF,MAC9BpB,EACEsB,EAAoBrB,UAChBqB,EAAoBrB,UAAU,GAC9BE,OAAOC,OAAOC,EAAgBA,kBAAE,IAElBiB,EAAArB,WAAaC,EAAaoB,EAAoBrB,WAC9CqB,EAAAC,eAAiBjB,EAAUgB,EAAoBC,cAAa,CAG9E,GAAS,SAAT9B,GAAmBoB,EAAQ,CAC7B,MAAQjB,OAAAA,EAAQG,SAAAA,EAAAA,MAAUgB,GAAUF,EAC9BW,EAAiB9B,EAAgBwB,MAAK,EAAGE,UAAWA,IAASxB,IAEnE,IAAK4B,EACH,OAGF,MAAMD,cAAEA,EAAetB,UAAAA,GAAcuB,EAErC3B,EAAUD,GACVI,EAAYD,GACZE,GAAaC,EAAaD,GAC1BO,EAAgBO,GAChBT,GA/CqCF,EA+CKmB,GAAiB,GA/CJhB,EA+CQQ,EA9C1DU,MAAMC,KAAK,IAAIC,IAAI,IAAIvB,KAAWG,MA8C8B,CA/CjC,IAACH,EAAkBG,EAkDzDG,EAA0BI,EAAqB,EAoB/Cf,WACAC,cACAC,YACAC,eACAN,SACAC,YACAO,SACAE,YACAC,eACAC,kBACAC,yBACF"}

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

@@ -0,0 +1,81 @@
+import { useState } from "react";
+import { DefaultOperators } from "./DataGridFilters.interfaces.es.js";
+const useDataGridFilter = (mode, columnsMetadata, filterState) => {
+  const [column, setColumn] = useState("");
+  const [operator, setOperator] = useState(null);
+  const [operators, setOperators] = useState(Object.values(DefaultOperators));
+  const [values, setValues] = useState([]);
+  const [pickedValues, setPickedValues] = useState([]);
+  const [allowedColumnsMetaData, setAllowedColumnsMetaData] = useState(
+    []
+  );
+  const mergeCustomValuesWithPredefined = (values2, pickedValues2) => {
+    return Array.from(/* @__PURE__ */ new Set([...values2, ...pickedValues2]));
+  };
+  const resetFields = () => {
+    setColumn("");
+    setOperator(null);
+    setValues([]);
+    setPickedValues([]);
+  };
+  const initialiseFilterValues = (filter) => {
+    const allowedColumnMetaData = getAllowedColumnsMetadata(filter);
+    if (mode === "ADD") {
+      const firstColumnMetadata = allowedColumnMetaData[0];
+      if (!firstColumnMetadata) {
+        resetFields();
+        setAllowedColumnsMetaData([]);
+        return;
+      }
+      setColumn(firstColumnMetadata.name);
+      setOperator(
+        firstColumnMetadata.operators ? firstColumnMetadata.operators[0] : Object.values(DefaultOperators)[0]
+      );
+      firstColumnMetadata.operators && setOperators(firstColumnMetadata.operators);
+      firstColumnMetadata.defaultValues && setValues(firstColumnMetadata.defaultValues);
+    }
+    if (mode === "EDIT" && filter) {
+      const { column: column2, operator: operator2, value } = filter;
+      const columnMetadata = columnsMetadata.find(({ name }) => name === column2);
+      if (!columnMetadata) {
+        return;
+      }
+      const { defaultValues, operators: operators2 } = columnMetadata;
+      setColumn(column2);
+      setOperator(operator2);
+      operators2 && setOperators(operators2);
+      setPickedValues(value);
+      setValues(mergeCustomValuesWithPredefined(defaultValues || [], value));
+    }
+    setAllowedColumnsMetaData(allowedColumnMetaData);
+  };
+  const getAllowedColumnsMetadata = (filter) => {
+    return columnsMetadata.filter((value) => {
+      if (!value.allowSingleFilterOnly) {
+        return true;
+      }
+      return !filterState.filters.find((v) => {
+        return mode === "ADD" ? v.column == value.name : v.column == value.name && v.column != (filter == null ? void 0 : filter.column);
+      });
+    });
+  };
+  return {
+    resetFields,
+    initialiseFilterValues,
+    operator,
+    setOperator,
+    operators,
+    setOperators,
+    column,
+    setColumn,
+    values,
+    setValues,
+    pickedValues,
+    setPickedValues,
+    allowedColumnsMetaData
+  };
+};
+export {
+  useDataGridFilter
+};
+//# sourceMappingURL=DataGridFilterService.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataGridFilterService.es.js","sources":["../../../../src/components/DataGrid/DataGridFilters/DataGridFilterService.ts"],"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 { useState } from \"react\";\nimport {\n  DataGridColumnMetadata,\n  DefaultOperators,\n  Filter,\n  FilterEditorMode,\n  FilterOperator,\n  FiltersState\n} from \"./DataGridFilters.interfaces\";\n\nexport const useDataGridFilter = (\n  mode: FilterEditorMode,\n  columnsMetadata: DataGridColumnMetadata[],\n  filterState: FiltersState\n) => {\n  const [column, setColumn] = useState(\"\");\n  const [operator, setOperator] = useState<FilterOperator | null>(null);\n  const [operators, setOperators] = useState<FilterOperator[]>(Object.values(DefaultOperators));\n  const [values, setValues] = useState<string[]>([]);\n  const [pickedValues, setPickedValues] = useState<string[]>([]);\n  const [allowedColumnsMetaData, setAllowedColumnsMetaData] = useState<DataGridColumnMetadata[]>(\n    []\n  );\n\n  //user can extend the list of picked values with custom ones. We need to make sure that the default list includes the user created values.\n  const mergeCustomValuesWithPredefined = (values: string[], pickedValues: string[]) => {\n    return Array.from(new Set([...values, ...pickedValues]));\n  };\n\n  const resetFields = () => {\n    setColumn(\"\");\n    setOperator(null);\n    setValues([]);\n    setPickedValues([]);\n  };\n\n  const initialiseFilterValues = (filter?: Filter) => {\n    const allowedColumnMetaData = getAllowedColumnsMetadata(filter);\n\n    if (mode === \"ADD\") {\n      const firstColumnMetadata = allowedColumnMetaData[0];\n\n      if (!firstColumnMetadata) {\n        resetFields();\n        setAllowedColumnsMetaData([]);\n        return;\n      }\n\n      setColumn(firstColumnMetadata.name);\n      setOperator(\n        firstColumnMetadata.operators\n          ? firstColumnMetadata.operators[0]\n          : Object.values(DefaultOperators)[0]\n      );\n      firstColumnMetadata.operators && setOperators(firstColumnMetadata.operators);\n      firstColumnMetadata.defaultValues && setValues(firstColumnMetadata.defaultValues);\n    }\n\n    if (mode === \"EDIT\" && filter) {\n      const { column, operator, value } = filter;\n      const columnMetadata = columnsMetadata.find(({ name }) => name === column);\n\n      if (!columnMetadata) {\n        return;\n      }\n\n      const { defaultValues, operators } = columnMetadata;\n\n      setColumn(column);\n      setOperator(operator);\n      operators && setOperators(operators);\n      setPickedValues(value);\n      setValues(mergeCustomValuesWithPredefined(defaultValues || [], value));\n    }\n\n    setAllowedColumnsMetaData(allowedColumnMetaData);\n  };\n\n  const getAllowedColumnsMetadata = (filter?: Filter) => {\n    return columnsMetadata.filter(value => {\n      if (!value.allowSingleFilterOnly) {\n        return true;\n      }\n\n      return !filterState.filters.find(v => {\n        return mode === \"ADD\"\n          ? v.column == value.name\n          : v.column == value.name && v.column != filter?.column;\n      });\n    });\n  };\n\n  return {\n    resetFields,\n    initialiseFilterValues,\n    operator,\n    setOperator,\n    operators,\n    setOperators,\n    column,\n    setColumn,\n    values,\n    setValues,\n    pickedValues,\n    setPickedValues,\n    allowedColumnsMetaData\n  };\n};\n"],"names":["values","pickedValues","column","operator","operators"],"mappings":";;AA0BO,MAAM,oBAAoB,CAC/B,MACA,iBACA,gBACG;AACH,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,EAAE;AACvC,QAAM,CAAC,UAAU,WAAW,IAAI,SAAgC,IAAI;AAC9D,QAAA,CAAC,WAAW,YAAY,IAAI,SAA2B,OAAO,OAAO,gBAAgB,CAAC;AAC5F,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAmB,CAAA,CAAE;AACjD,QAAM,CAAC,cAAc,eAAe,IAAI,SAAmB,CAAA,CAAE;AACvD,QAAA,CAAC,wBAAwB,yBAAyB,IAAI;AAAA,IAC1D,CAAA;AAAA,EACF;AAGM,QAAA,kCAAkC,CAACA,SAAkBC,kBAA2B;AAC7E,WAAA,MAAM,KAAK,oBAAI,IAAI,CAAC,GAAGD,SAAQ,GAAGC,aAAY,CAAC,CAAC;AAAA,EACzD;AAEA,QAAM,cAAc,MAAM;AACxB,cAAU,EAAE;AACZ,gBAAY,IAAI;AAChB,cAAU,CAAA,CAAE;AACZ,oBAAgB,CAAA,CAAE;AAAA,EACpB;AAEM,QAAA,yBAAyB,CAAC,WAAoB;AAC5C,UAAA,wBAAwB,0BAA0B,MAAM;AAE9D,QAAI,SAAS,OAAO;AACZ,YAAA,sBAAsB,sBAAsB,CAAC;AAEnD,UAAI,CAAC,qBAAqB;AACZ,oBAAA;AACZ,kCAA0B,CAAA,CAAE;AAC5B;AAAA,MAAA;AAGF,gBAAU,oBAAoB,IAAI;AAClC;AAAA,QACE,oBAAoB,YAChB,oBAAoB,UAAU,CAAC,IAC/B,OAAO,OAAO,gBAAgB,EAAE,CAAC;AAAA,MACvC;AACoB,0BAAA,aAAa,aAAa,oBAAoB,SAAS;AACvD,0BAAA,iBAAiB,UAAU,oBAAoB,aAAa;AAAA,IAAA;AAG9E,QAAA,SAAS,UAAU,QAAQ;AAC7B,YAAM,EAAE,QAAAC,SAAQ,UAAAC,WAAU,UAAU;AAC9B,YAAA,iBAAiB,gBAAgB,KAAK,CAAC,EAAE,KAAK,MAAM,SAASD,OAAM;AAEzE,UAAI,CAAC,gBAAgB;AACnB;AAAA,MAAA;AAGF,YAAM,EAAE,eAAe,WAAAE,WAAc,IAAA;AAErC,gBAAUF,OAAM;AAChB,kBAAYC,SAAQ;AACpBC,oBAAa,aAAaA,UAAS;AACnC,sBAAgB,KAAK;AACrB,gBAAU,gCAAgC,iBAAiB,CAAC,GAAG,KAAK,CAAC;AAAA,IAAA;AAGvE,8BAA0B,qBAAqB;AAAA,EACjD;AAEM,QAAA,4BAA4B,CAAC,WAAoB;AAC9C,WAAA,gBAAgB,OAAO,CAAS,UAAA;AACjC,UAAA,CAAC,MAAM,uBAAuB;AACzB,eAAA;AAAA,MAAA;AAGT,aAAO,CAAC,YAAY,QAAQ,KAAK,CAAK,MAAA;AACpC,eAAO,SAAS,QACZ,EAAE,UAAU,MAAM,OAClB,EAAE,UAAU,MAAM,QAAQ,EAAE,WAAU,iCAAQ;AAAA,MAAA,CACnD;AAAA,IAAA,CACF;AAAA,EACH;AAEO,SAAA;AAAA,IACL;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,EACF;AACF;"}

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=require("../../Icon/Icon.cjs.js"),a=require("../../Tag/RemoveButton.cjs.js"),r=require("../../Typography/Typography.cjs.js"),n=require("./DataGridFilter.module.scss.cjs.js"),l=({filter:t,or:a,other:r,columnsMetadata:n})=>{var l;const{column:o,operator:c,value:i}=t,m=(null==(l=null==n?void 0:n.find((e=>e.name===o)))?void 0:l.headline)||o;return e.createElement(e.Fragment,null,m," ",null==c?void 0:c.name," ",i.length>0&&e.createElement("b",null,i[0]),i.length>=2&&e.createElement(e.Fragment,null," ",a," ",e.createElement("b",null,i.length-1," ",r)))},o=({triggerRef:o,filter:c,mode:i,onFilterRemove:m,onFilterOpen:s,translations:u,dateTagCaption:d,customEditTagContent:p,columnsMetadata:f,...g},E)=>{const{addButtonCaption:v="Add filter",or:y="or",other:h="other",dateIs:T="Date is"}=u||{},b="ADD"===i,D="EDIT"===i&&c,j="ADD_DATE"===i;return e.createElement("div",{...g,ref:E,className:n.default["filter-wrapper"]},e.createElement("button",{ref:o,type:"button",className:n.default["filter-button"],onClick:e=>{e.preventDefault(),s()}},b&&e.createElement(e.Fragment,null,e.createElement(t.Icon,{icon:t.Icons.AddCircle}),e.createElement(r.Typography,{variant:"body",className:n.default.caption},v)),D&&e.createElement(r.Typography,{variant:"body",className:n.default.caption},p?e.cloneElement(p,{filter:c}):e.createElement(l,{filter:c,or:y,other:h,columnsMetadata:f})),j&&e.createElement(e.Fragment,null,e.createElement(t.Icon,{icon:t.Icons.Calendar}),e.createElement(r.Typography,{variant:"body",className:n.default.caption},T," ",e.createElement("b",null,d)))),D&&e.createElement(a.RemoveButton,{className:n.default["remove-button"],onRemove:m}))},c=e.forwardRef(o);exports.DataGridFilterTag=c,exports.DataGridFilterTagComponent=o;
+//# sourceMappingURL=DataGridFilterTag.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataGridFilterTag.cjs.js","sources":["../../../../src/components/DataGrid/DataGridFilters/DataGridFilterTag.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, { ComponentPropsWithRef, ForwardRefRenderFunction, Fragment } from \"react\";\nimport { Icon, Icons } from \"../../Icon/Icon\";\nimport { RemoveButton } from \"../../Tag/RemoveButton\";\nimport { Typography } from \"../../Typography/Typography\";\nimport classes from \"./DataGridFilter.module.scss\";\nimport {\n  Filter,\n  FilterEditorMode,\n  TagTranslations,\n  DataGridColumnMetadata\n} from \"./DataGridFilters.interfaces\";\n\nexport interface DataGridFilterTagProps extends ComponentPropsWithRef<\"div\"> {\n  customEditTagContent?: React.ReactElement;\n  triggerRef: React.Ref<HTMLButtonElement>;\n  filter?: Filter;\n  mode: FilterEditorMode;\n  onFilterRemove?: () => void;\n  onFilterOpen: () => void;\n  translations?: TagTranslations;\n  dateTagCaption?: string;\n  columnsMetadata?: DataGridColumnMetadata[];\n}\n\nconst EditTagContent = ({\n  filter,\n  or,\n  other,\n  columnsMetadata\n}: {\n  filter: Filter;\n  or: string;\n  other: string;\n  columnsMetadata?: DataGridColumnMetadata[];\n}) => {\n  const { column, operator, value } = filter;\n  const columnHeadlineWithFallback =\n    columnsMetadata?.find(meta => meta.name === column)?.headline || column;\n\n  return (\n    <Fragment>\n      {columnHeadlineWithFallback} {operator?.name} {value.length > 0 && <b>{value[0]}</b>}\n      {value.length >= 2 && (\n        <>\n          {\" \"}\n          {or}{\" \"}\n          <b>\n            {value.length - 1} {other}\n          </b>\n        </>\n      )}\n    </Fragment>\n  );\n};\n\nexport const DataGridFilterTagComponent: ForwardRefRenderFunction<\n  HTMLDivElement,\n  DataGridFilterTagProps\n> = (\n  {\n    triggerRef,\n    filter,\n    mode,\n    onFilterRemove,\n    onFilterOpen,\n    translations,\n    dateTagCaption,\n    customEditTagContent,\n    columnsMetadata,\n    ...rest\n  }: DataGridFilterTagProps,\n  ref\n) => {\n  const {\n    addButtonCaption = \"Add filter\",\n    or = \"or\",\n    other = \"other\",\n    dateIs = \"Date is\"\n  } = translations || {};\n  const shouldRenderAddTag = mode === \"ADD\";\n  const shouldRenderEditTag = mode === \"EDIT\" && filter;\n  const shouldRenderAddDateTag = mode === \"ADD_DATE\";\n\n  return (\n    <div {...rest} ref={ref} className={classes[\"filter-wrapper\"]}>\n      <button\n        ref={triggerRef}\n        type=\"button\"\n        className={classes[\"filter-button\"]}\n        onClick={e => {\n          e.preventDefault();\n          onFilterOpen();\n        }}\n      >\n        {shouldRenderAddTag && (\n          <Fragment>\n            <Icon icon={Icons.AddCircle} />\n            <Typography variant=\"body\" className={classes[\"caption\"]}>\n              {addButtonCaption}\n            </Typography>\n          </Fragment>\n        )}\n        {shouldRenderEditTag && (\n          <Typography variant=\"body\" className={classes[\"caption\"]}>\n            {customEditTagContent ? (\n              React.cloneElement(customEditTagContent, { filter })\n            ) : (\n              <EditTagContent\n                filter={filter}\n                or={or}\n                other={other}\n                columnsMetadata={columnsMetadata}\n              />\n            )}\n          </Typography>\n        )}\n        {shouldRenderAddDateTag && (\n          <Fragment>\n            <Icon icon={Icons.Calendar} />\n            <Typography variant=\"body\" className={classes[\"caption\"]}>\n              {dateIs} <b>{dateTagCaption}</b>\n            </Typography>\n          </Fragment>\n        )}\n      </button>\n      {shouldRenderEditTag && (\n        <RemoveButton className={classes[\"remove-button\"]} onRemove={onFilterRemove} />\n      )}\n    </div>\n  );\n};\n\nexport const DataGridFilterTag = React.forwardRef(DataGridFilterTagComponent);\n"],"names":["EditTagContent","filter","or","other","columnsMetadata","column","operator","value","columnHeadlineWithFallback","_a","find","meta","name","headline","createElement","Fragment","length","React","DataGridFilterTagComponent","triggerRef","mode","onFilterRemove","onFilterOpen","translations","dateTagCaption","customEditTagContent","rest","ref","addButtonCaption","dateIs","shouldRenderAddTag","shouldRenderEditTag","shouldRenderAddDateTag","className","classes","type","onClick","e","preventDefault","Icon","icon","Icons","AddCircle","Typography","variant","cloneElement","Calendar","default","RemoveButton","onRemove","DataGridFilterTag","forwardRef"],"mappings":"yRAwCMA,EAAiB,EACrBC,SACAC,KACAC,QACAC,4BAOA,MAAMC,OAAEA,EAAAC,SAAQA,EAAUC,MAAAA,GAAUN,EAC9BO,GACJ,OAAAC,mBAAiBC,MAAKC,GAAQA,EAAKC,OAASP,UAA5C,EAAAI,EAAqDI,WAAYR,EAEnE,SACGS,cAAAC,WAAA,KACEP,EAA2B,IAAY,MAAVF,OAAU,EAAAA,EAAAM,KAAK,IAAEL,EAAMS,OAAS,GAAMC,EAAAH,cAAA,IAAA,KAAGP,EAAM,IAC5EA,EAAMS,QAAU,GAEZC,EAAAH,cAAAG,EAAAF,SAAA,KAAA,IACAb,EAAI,MACLY,cAAC,IACE,KAAAP,EAAMS,OAAS,EAAE,IAAEb,IAI5B,EAISe,EAGT,EAEAC,aACAlB,SACAmB,OACAC,iBACAC,eACAC,eACAC,iBACAC,uBACArB,qBACGsB,GAELC,KAEM,MAAAC,iBACJA,EAAmB,aAAA1B,GACnBA,EAAK,KAAAC,MACLA,EAAQ,QAAA0B,OACRA,EAAS,WACPN,GAAgB,CAAC,EACfO,EAA8B,QAATV,EACrBW,EAA+B,SAATX,GAAmBnB,EACzC+B,EAAkC,aAATZ,EAG7B,OAAAH,EAAAH,cAAC,UAAQY,EAAMC,MAAUM,UAAWC,EAAAA,QAAQ,mBAC1CjB,EAAAH,cAAC,SAAA,CACCa,IAAKR,EACLgB,KAAK,SACLF,UAAWC,UAAQ,iBACnBE,QAAcC,IACZA,EAAEC,iBACWhB,GAAA,GAGdQ,GACEb,EAAAH,cAAAC,EAAAA,SAAA,qBACEwB,EAAKA,KAAA,CAAAC,KAAMC,QAAMC,YACjBzB,EAAAH,cAAA6B,aAAA,CAAWC,QAAQ,OAAOX,UAAWC,UAAiB,SACpDN,IAING,KACEjB,cAAA6B,EAAAA,WAAA,CAAWC,QAAQ,OAAOX,UAAWC,UAAiB,SACpDT,EACCR,EAAM4B,aAAapB,EAAsB,CAAExB,WAE3CgB,EAAAH,cAACd,EAAA,CACCC,SACAC,KACAC,QACAC,qBAKP4B,mBACEjB,EAAAA,SACC,KAAAE,EAAAH,cAACyB,EAAAA,MAAKC,KAAMC,EAAAA,MAAMK,WACjB7B,EAAAH,cAAA6B,aAAA,CAAWC,QAAQ,OAAOX,UAAWC,EAAQa,QAAS,SACpDlB,EAAO,IAAEZ,EAAAH,cAAA,IAAA,KAAGU,MAKpBO,GACCd,EAAAH,cAACkC,EAAaA,aAAA,CAAAf,UAAWC,UAAQ,iBAAkBe,SAAU5B,IAEjE,EAIS6B,EAAoBjC,EAAMkC,WAAWjC"}

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

@@ -0,0 +1,67 @@
+import React, { Fragment } from "react";
+import { Icon, Icons } from "../../Icon/Icon.es.js";
+import { RemoveButton } from "../../Tag/RemoveButton.es.js";
+import { Typography } from "../../Typography/Typography.es.js";
+import classes from "./DataGridFilter.module.scss.es.js";
+const EditTagContent = ({
+  filter,
+  or,
+  other,
+  columnsMetadata
+}) => {
+  var _a;
+  const { column, operator, value } = filter;
+  const columnHeadlineWithFallback = ((_a = columnsMetadata == null ? void 0 : columnsMetadata.find((meta) => meta.name === column)) == null ? void 0 : _a.headline) || column;
+  return /* @__PURE__ */ React.createElement(Fragment, null, columnHeadlineWithFallback, " ", operator == null ? void 0 : operator.name, " ", value.length > 0 && /* @__PURE__ */ React.createElement("b", null, value[0]), value.length >= 2 && /* @__PURE__ */ React.createElement(React.Fragment, null, " ", or, " ", /* @__PURE__ */ React.createElement("b", null, value.length - 1, " ", other)));
+};
+const DataGridFilterTagComponent = ({
+  triggerRef,
+  filter,
+  mode,
+  onFilterRemove,
+  onFilterOpen,
+  translations,
+  dateTagCaption,
+  customEditTagContent,
+  columnsMetadata,
+  ...rest
+}, ref) => {
+  const {
+    addButtonCaption = "Add filter",
+    or = "or",
+    other = "other",
+    dateIs = "Date is"
+  } = translations || {};
+  const shouldRenderAddTag = mode === "ADD";
+  const shouldRenderEditTag = mode === "EDIT" && filter;
+  const shouldRenderAddDateTag = mode === "ADD_DATE";
+  return /* @__PURE__ */ React.createElement("div", { ...rest, ref, className: classes["filter-wrapper"] }, /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      ref: triggerRef,
+      type: "button",
+      className: classes["filter-button"],
+      onClick: (e) => {
+        e.preventDefault();
+        onFilterOpen();
+      }
+    },
+    shouldRenderAddTag && /* @__PURE__ */ React.createElement(Fragment, null, /* @__PURE__ */ React.createElement(Icon, { icon: Icons.AddCircle }), /* @__PURE__ */ React.createElement(Typography, { variant: "body", className: classes["caption"] }, addButtonCaption)),
+    shouldRenderEditTag && /* @__PURE__ */ React.createElement(Typography, { variant: "body", className: classes["caption"] }, customEditTagContent ? React.cloneElement(customEditTagContent, { filter }) : /* @__PURE__ */ React.createElement(
+      EditTagContent,
+      {
+        filter,
+        or,
+        other,
+        columnsMetadata
+      }
+    )),
+    shouldRenderAddDateTag && /* @__PURE__ */ React.createElement(Fragment, null, /* @__PURE__ */ React.createElement(Icon, { icon: Icons.Calendar }), /* @__PURE__ */ React.createElement(Typography, { variant: "body", className: classes["caption"] }, dateIs, " ", /* @__PURE__ */ React.createElement("b", null, dateTagCaption)))
+  ), shouldRenderEditTag && /* @__PURE__ */ React.createElement(RemoveButton, { className: classes["remove-button"], onRemove: onFilterRemove }));
+};
+const DataGridFilterTag = React.forwardRef(DataGridFilterTagComponent);
+export {
+  DataGridFilterTag,
+  DataGridFilterTagComponent
+};
+//# sourceMappingURL=DataGridFilterTag.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataGridFilterTag.es.js","sources":["../../../../src/components/DataGrid/DataGridFilters/DataGridFilterTag.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, { ComponentPropsWithRef, ForwardRefRenderFunction, Fragment } from \"react\";\nimport { Icon, Icons } from \"../../Icon/Icon\";\nimport { RemoveButton } from \"../../Tag/RemoveButton\";\nimport { Typography } from \"../../Typography/Typography\";\nimport classes from \"./DataGridFilter.module.scss\";\nimport {\n  Filter,\n  FilterEditorMode,\n  TagTranslations,\n  DataGridColumnMetadata\n} from \"./DataGridFilters.interfaces\";\n\nexport interface DataGridFilterTagProps extends ComponentPropsWithRef<\"div\"> {\n  customEditTagContent?: React.ReactElement;\n  triggerRef: React.Ref<HTMLButtonElement>;\n  filter?: Filter;\n  mode: FilterEditorMode;\n  onFilterRemove?: () => void;\n  onFilterOpen: () => void;\n  translations?: TagTranslations;\n  dateTagCaption?: string;\n  columnsMetadata?: DataGridColumnMetadata[];\n}\n\nconst EditTagContent = ({\n  filter,\n  or,\n  other,\n  columnsMetadata\n}: {\n  filter: Filter;\n  or: string;\n  other: string;\n  columnsMetadata?: DataGridColumnMetadata[];\n}) => {\n  const { column, operator, value } = filter;\n  const columnHeadlineWithFallback =\n    columnsMetadata?.find(meta => meta.name === column)?.headline || column;\n\n  return (\n    <Fragment>\n      {columnHeadlineWithFallback} {operator?.name} {value.length > 0 && <b>{value[0]}</b>}\n      {value.length >= 2 && (\n        <>\n          {\" \"}\n          {or}{\" \"}\n          <b>\n            {value.length - 1} {other}\n          </b>\n        </>\n      )}\n    </Fragment>\n  );\n};\n\nexport const DataGridFilterTagComponent: ForwardRefRenderFunction<\n  HTMLDivElement,\n  DataGridFilterTagProps\n> = (\n  {\n    triggerRef,\n    filter,\n    mode,\n    onFilterRemove,\n    onFilterOpen,\n    translations,\n    dateTagCaption,\n    customEditTagContent,\n    columnsMetadata,\n    ...rest\n  }: DataGridFilterTagProps,\n  ref\n) => {\n  const {\n    addButtonCaption = \"Add filter\",\n    or = \"or\",\n    other = \"other\",\n    dateIs = \"Date is\"\n  } = translations || {};\n  const shouldRenderAddTag = mode === \"ADD\";\n  const shouldRenderEditTag = mode === \"EDIT\" && filter;\n  const shouldRenderAddDateTag = mode === \"ADD_DATE\";\n\n  return (\n    <div {...rest} ref={ref} className={classes[\"filter-wrapper\"]}>\n      <button\n        ref={triggerRef}\n        type=\"button\"\n        className={classes[\"filter-button\"]}\n        onClick={e => {\n          e.preventDefault();\n          onFilterOpen();\n        }}\n      >\n        {shouldRenderAddTag && (\n          <Fragment>\n            <Icon icon={Icons.AddCircle} />\n            <Typography variant=\"body\" className={classes[\"caption\"]}>\n              {addButtonCaption}\n            </Typography>\n          </Fragment>\n        )}\n        {shouldRenderEditTag && (\n          <Typography variant=\"body\" className={classes[\"caption\"]}>\n            {customEditTagContent ? (\n              React.cloneElement(customEditTagContent, { filter })\n            ) : (\n              <EditTagContent\n                filter={filter}\n                or={or}\n                other={other}\n                columnsMetadata={columnsMetadata}\n              />\n            )}\n          </Typography>\n        )}\n        {shouldRenderAddDateTag && (\n          <Fragment>\n            <Icon icon={Icons.Calendar} />\n            <Typography variant=\"body\" className={classes[\"caption\"]}>\n              {dateIs} <b>{dateTagCaption}</b>\n            </Typography>\n          </Fragment>\n        )}\n      </button>\n      {shouldRenderEditTag && (\n        <RemoveButton className={classes[\"remove-button\"]} onRemove={onFilterRemove} />\n      )}\n    </div>\n  );\n};\n\nexport const DataGridFilterTag = React.forwardRef(DataGridFilterTagComponent);\n"],"names":[],"mappings":";;;;;AAwCA,MAAM,iBAAiB,CAAC;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAKM;;AACJ,QAAM,EAAE,QAAQ,UAAU,MAAU,IAAA;AAC9B,QAAA,+BACJ,wDAAiB,KAAK,CAAA,SAAQ,KAAK,SAAS,YAA5C,mBAAqD,aAAY;AAEnE,SACG,sBAAA,cAAA,UAAA,MACE,4BAA2B,KAAE,qCAAU,MAAK,KAAE,MAAM,SAAS,KAAM,sBAAA,cAAA,KAAA,MAAG,MAAM,CAAC,CAAE,GAC/E,MAAM,UAAU,KAEZ,sBAAA,cAAA,MAAA,UAAA,MAAA,KACA,IAAI,KACL,sBAAA,cAAC,KACE,MAAA,MAAM,SAAS,GAAE,KAAE,KACtB,CACF,CAEJ;AAEJ;AAEO,MAAM,6BAGT,CACF;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GACA,QACG;AACG,QAAA;AAAA,IACJ,mBAAmB;AAAA,IACnB,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,SAAS;AAAA,EACX,IAAI,gBAAgB,CAAC;AACrB,QAAM,qBAAqB,SAAS;AAC9B,QAAA,sBAAsB,SAAS,UAAU;AAC/C,QAAM,yBAAyB,SAAS;AAGtC,SAAA,sBAAA,cAAC,SAAK,GAAG,MAAM,KAAU,WAAW,QAAQ,gBAAgB,EAC1D,GAAA,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,MAAK;AAAA,MACL,WAAW,QAAQ,eAAe;AAAA,MAClC,SAAS,CAAK,MAAA;AACZ,UAAE,eAAe;AACJ,qBAAA;AAAA,MAAA;AAAA,IACf;AAAA,IAEC,sBACE,sBAAA,cAAA,UAAA,0CACE,MAAK,EAAA,MAAM,MAAM,UAAW,CAAA,GAC5B,sBAAA,cAAA,YAAA,EAAW,SAAQ,QAAO,WAAW,QAAQ,SAAS,EAAA,GACpD,gBACH,CACF;AAAA,IAED,uBACE,sBAAA,cAAA,YAAA,EAAW,SAAQ,QAAO,WAAW,QAAQ,SAAS,EACpD,GAAA,uBACC,MAAM,aAAa,sBAAsB,EAAE,OAAQ,CAAA,IAEnD,sBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IAAA,CAGN;AAAA,IAED,8DACE,UACC,MAAA,sBAAA,cAAC,QAAK,MAAM,MAAM,SAAU,CAAA,GAC3B,sBAAA,cAAA,YAAA,EAAW,SAAQ,QAAO,WAAW,QAAQ,SAAS,EACpD,GAAA,QAAO,KAAE,sBAAA,cAAA,KAAA,MAAG,cAAe,CAC9B,CACF;AAAA,EAEJ,GACC,uBACC,sBAAA,cAAC,cAAa,EAAA,WAAW,QAAQ,eAAe,GAAG,UAAU,eAAgB,CAAA,CAEjF;AAEJ;AAEa,MAAA,oBAAoB,MAAM,WAAW,0BAA0B;"}

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),l=require("../../Form/Select/SingleSelect/Option.cjs.js"),t=require("../../Form/Select/MultiSelect/MultiOption.cjs.js"),a=require("../../Form/Wrapper/MultiSelectWrapper/MultiSelectWrapper.cjs.js"),r=require("../../Form/Wrapper/SelectWrapper/SelectWrapper.cjs.js"),u=require("./DataGridFilters.interfaces.cjs.js");exports.DataGridFilterValueSelect=({column:s,columnsMetadata:n,values:c,pickedValues:o,setValues:i,setPickedValues:p,translations:d,operator:S})=>{const[m,v]=e.useState(!1),{valueSelectLabel:b="Value",addNewValueLabel:j="Create new",addNewValueButtonTitle:y="Add new select value"}=d||{},V=n.find((({name:e})=>e===s)),g=null==V?void 0:V.disableAddNew,w=null==V?void 0:V.valueSelectType,M=S&&!S.allowEmptyValues,W=Boolean(M&&0===o.length&&m),h={title:y,type:"button"},q=e.useCallback((e=>{const{selectedOptions:l,value:t}=e.target;let a;a=w===u.ValueSelectType.single?t?[t]:[]:Array.from(l,(e=>e.value)),p(a),v(!0)}),[w]),F={addNew:g?void 0:{label:j,onAddNew:e=>{e&&(i((l=>[...l,e])),p((l=>[...l,e])))},btnProps:h},search:{enabled:!0,renderThreshold:0}};return u.ValueSelectType.single===w?e.createElement(r.SelectWrapper,{label:b,name:"value",value:o[0],onChange:q,selectProps:F,error:W},c.map((t=>e.createElement(l.Option,{key:t,value:t},t)))):e.createElement(a.MultiSelectWrapper,{label:b,name:"value",value:o,onChange:q,selectProps:F,error:W},c.map((l=>e.createElement(t.MultiOption,{key:l,value:l},l))))};
+//# sourceMappingURL=DataGridFilterValueSelect.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataGridFilterValueSelect.cjs.js","sources":["../../../../src/components/DataGrid/DataGridFilters/DataGridFilterValueSelect.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, { useCallback, useState } from \"react\";\nimport { Option } from \"../../Form/Select/SingleSelect/Option\";\nimport { MultiOption } from \"../../Form/Select/MultiSelect/MultiOption\";\nimport { MultiSelectWrapper } from \"../../Form/Wrapper/MultiSelectWrapper/MultiSelectWrapper\";\nimport { SelectWrapper } from \"../../Form/Wrapper/SelectWrapper/SelectWrapper\";\nimport {\n  DataGridColumnMetadata,\n  PopoverTranslations,\n  ValueSelectType\n} from \"./DataGridFilters.interfaces\";\n\nexport type Props = {\n  column: string;\n  columnsMetadata: DataGridColumnMetadata[];\n  values: string[];\n  pickedValues: string[];\n  setValues: (values: React.SetStateAction<string[]>) => void;\n  setPickedValues: (pickedValues: React.SetStateAction<string[]>) => void;\n  translations?: PopoverTranslations;\n  operator?: { allowEmptyValues: boolean } | null;\n};\n\nexport const DataGridFilterValueSelect = ({\n  column,\n  columnsMetadata,\n  values,\n  pickedValues,\n  setValues,\n  setPickedValues,\n  translations,\n  operator\n}: Props) => {\n  const [touched, setTouched] = useState(false);\n\n  const {\n    valueSelectLabel = \"Value\",\n    addNewValueLabel = \"Create new\",\n    addNewValueButtonTitle = \"Add new select value\"\n  } = translations || {};\n\n  const columnMetadata = columnsMetadata.find(({ name }) => name === column);\n  const disableAddNew = columnMetadata?.disableAddNew;\n  const valueSelectType = columnMetadata?.valueSelectType;\n\n  const isValueRequired = operator && !operator.allowEmptyValues;\n  const hasValidationError = Boolean(isValueRequired && pickedValues.length === 0 && touched);\n\n  const addNewBtnProps: React.ButtonHTMLAttributes<HTMLButtonElement> = {\n    title: addNewValueButtonTitle,\n    type: \"button\"\n  };\n\n  const onChangeHandler = useCallback(\n    (e: React.ChangeEvent<HTMLSelectElement>) => {\n      const { selectedOptions, value } = e.target;\n\n      let newValues: string[];\n\n      if (valueSelectType === ValueSelectType.single) {\n        newValues = value ? [value] : [];\n      } else {\n        newValues = Array.from(selectedOptions, option => option.value);\n      }\n      setPickedValues(newValues);\n      setTouched(true);\n    },\n    [valueSelectType]\n  );\n\n  const selectProps = {\n    addNew: disableAddNew\n      ? undefined\n      : {\n          label: addNewValueLabel,\n          onAddNew: (value: string) => {\n            if (value) {\n              setValues(prev => [...prev, value]);\n              setPickedValues(prev => [...prev, value]);\n            }\n          },\n          btnProps: addNewBtnProps\n        },\n    search: {\n      enabled: true,\n      renderThreshold: 0\n    }\n  };\n\n  return ValueSelectType.single === valueSelectType ? (\n    <SelectWrapper\n      label={valueSelectLabel}\n      name={\"value\"}\n      value={pickedValues[0]}\n      onChange={onChangeHandler}\n      selectProps={selectProps}\n      error={hasValidationError}\n    >\n      {values.map(value => (\n        <Option key={value} value={value}>\n          {value}\n        </Option>\n      ))}\n    </SelectWrapper>\n  ) : (\n    <MultiSelectWrapper\n      label={valueSelectLabel}\n      name={\"value\"}\n      value={pickedValues}\n      onChange={onChangeHandler}\n      selectProps={selectProps}\n      error={hasValidationError}\n    >\n      {values.map(value => (\n        <MultiOption key={value} value={value}>\n          {value}\n        </MultiOption>\n      ))}\n    </MultiSelectWrapper>\n  );\n};\n"],"names":["column","columnsMetadata","values","pickedValues","setValues","setPickedValues","translations","operator","touched","setTouched","useState","valueSelectLabel","addNewValueLabel","addNewValueButtonTitle","columnMetadata","find","name","disableAddNew","valueSelectType","isValueRequired","allowEmptyValues","hasValidationError","Boolean","length","addNewBtnProps","title","type","onChangeHandler","useCallback","e","selectedOptions","value","target","newValues","ValueSelectType","single","Array","from","option","selectProps","addNew","label","onAddNew","prev","btnProps","search","enabled","renderThreshold","React","createElement","SelectWrapper","onChange","error","map","Option","key","MultiSelectWrapper","MultiOption"],"mappings":"ocAsCyC,EACvCA,SACAC,kBACAC,SACAC,eACAC,YACAC,kBACAC,eACAC,eAEA,MAAOC,EAASC,GAAcC,EAAAA,UAAS,IAEjCC,iBACJA,EAAmB,QAAAC,iBACnBA,EAAmB,aAAAC,uBACnBA,EAAyB,wBACvBP,GAAgB,CAAC,EAEfQ,EAAiBb,EAAgBc,MAAK,EAAGC,UAAWA,IAAShB,IAC7DiB,EAAgC,MAAhBH,OAAgB,EAAAA,EAAAG,cAChCC,EAAkC,MAAhBJ,OAAgB,EAAAA,EAAAI,gBAElCC,EAAkBZ,IAAaA,EAASa,iBACxCC,EAAqBC,QAAQH,GAA2C,IAAxBhB,EAAaoB,QAAgBf,GAE7EgB,EAAgE,CACpEC,MAAOZ,EACPa,KAAM,UAGFC,EAAkBC,EAAAA,aACrBC,IACC,MAAMC,gBAAEA,EAAAC,MAAiBA,GAAUF,EAAEG,OAEjC,IAAAC,EAGFA,EADEf,IAAoBgB,kBAAgBC,OAC1BJ,EAAQ,CAACA,GAAS,GAElBK,MAAMC,KAAKP,GAAiBQ,GAAUA,EAAOP,QAE3D1B,EAAgB4B,GAChBxB,GAAW,EAAI,GAEjB,CAACS,IAGGqB,EAAc,CAClBC,OAAQvB,OACJ,EACA,CACEwB,MAAO7B,EACP8B,SAAWX,IACLA,IACF3B,GAAkBuC,GAAA,IAAIA,EAAMZ,KAC5B1B,GAAwBsC,GAAA,IAAIA,EAAMZ,KAAM,EAG5Ca,SAAUpB,GAEhBqB,OAAQ,CACNC,SAAS,EACTC,gBAAiB,IAId,OAAAb,kBAAgBC,SAAWjB,EAChC8B,EAAAC,cAACC,EAAAA,cAAA,CACCT,MAAO9B,EACPK,KAAM,QACNe,MAAO5B,EAAa,GACpBgD,SAAUxB,EACVY,cACAa,MAAO/B,GAENnB,EAAOmD,KACNtB,KAAAkB,cAACK,UAAOC,IAAKxB,EAAOA,SACjBA,MAKPiB,EAAAC,cAACO,EAAAA,mBAAA,CACCf,MAAO9B,EACPK,KAAM,QACNe,MAAO5B,EACPgD,SAAUxB,EACVY,cACAa,MAAO/B,GAENnB,EAAOmD,KACNtB,KAAAkB,cAACQ,eAAYF,IAAKxB,EAAOA,SACtBA,KAGP"}