@onewelcome/react-lib-components 9.8.1 → 10.0.0

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 } 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;"}

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_E7GBT{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.DataGridFilter_hidden_E7GBT{display:none}.DataGridFilter_slide-in_E7GBT{animation:DataGridFilter_slide-in_E7GBT .5s forwards}@media (prefers-reduced-motion: reduce){.DataGridFilter_slide-in_E7GBT{animation-duration:.1ms}}.DataGridFilter_slide-out_E7GBT{animation:DataGridFilter_slide-out_E7GBT .5s forwards}@media (prefers-reduced-motion: reduce){.DataGridFilter_slide-out_E7GBT{animation-duration:.1ms}}@keyframes DataGridFilter_slide-in_E7GBT{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes DataGridFilter_slide-out_E7GBT{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_E7GBT{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_E7GBT:hover{background-color:var(--color-blue-grey200)}.DataGridFilter_filter-wrapper_E7GBT:active{background-color:var(--color-primary100)}.DataGridFilter_filter-wrapper_E7GBT .DataGridFilter_filter-button_E7GBT{display:flex;justify-content:flex-start;align-items:center;gap:.375rem;background:none;border:none;padding:0 .25rem;cursor:pointer}.DataGridFilter_filter-wrapper_E7GBT .DataGridFilter_filter-button_E7GBT:only-child{margin-right:-.25rem}.DataGridFilter_filter-wrapper_E7GBT .DataGridFilter_filter-button_E7GBT:focus-visible{outline:calc(.125 * var(--font-size)) solid var(--color-focus);outline-offset:0;border-radius:var(--focus-border-radius)}.DataGridFilter_filter-wrapper_E7GBT .DataGridFilter_remove-button_E7GBT{border-radius:1.25rem}.DataGridFilter_filter-wrapper_E7GBT .DataGridFilter_caption_E7GBT{font-size:var(--font-size-data-grid);line-height:var(--data-grid-line-height);margin:0;font-weight:400}.DataGridFilter_filter-wrapper_E7GBT .DataGridFilter_caption_E7GBT.DataGridFilter_bold_E7GBT{font-weight:600}.DataGridFilter_filter-wrapper_E7GBT .DataGridFilter_remove-icon_E7GBT{font-size:calc(.6 * var(--font-size))}.DataGridFilter_column-select-option_E7GBT{text-transform:capitalize}.DataGridFilter_popover_E7GBT{display:flex;flex-direction:column;align-items:flex-start;gap:1rem;padding:1rem .75rem;min-width:40rem}.DataGridFilter_popover_E7GBT .DataGridFilter_controls_E7GBT{width:100%;display:flex;gap:1rem}.DataGridFilter_popover_E7GBT .DataGridFilter_controls_E7GBT>*:first-child{flex-grow:1.8;flex-shrink:0;margin-top:0}.DataGridFilter_popover_E7GBT .DataGridFilter_controls_E7GBT>*:nth-child(2){flex-grow:1;flex-shrink:0;margin-top:0}.DataGridFilter_popover_E7GBT .DataGridFilter_controls_E7GBT>*:last-child{flex-basis:15rem;flex-grow:1.8;flex-shrink:0;margin-top:0}.DataGridFilter_popover_E7GBT .DataGridFilter_actions_E7GBT{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_E7GBT",e="DataGridFilter_popover_E7GBT",o="DataGridFilter_controls_E7GBT",r="DataGridFilter_actions_E7GBT",i={"filter-wrapper":"DataGridFilter_filter-wrapper_E7GBT","filter-button":"DataGridFilter_filter-button_E7GBT","remove-button":"DataGridFilter_remove-button_E7GBT",caption:t,"column-select-option":"DataGridFilter_column-select-option_E7GBT",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

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

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

@@ -0,0 +1,116 @@
+import React 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 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" }
+    },
+    isOpen && /* @__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: () => {
+          resetFields();
+          setFilterOpen(false);
+        }
+      },
+      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 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":";;;;;;;;;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;AAEnB,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,IAEtD,UACC,sBAAA,cAAC,OAAI,EAAA,WAAW,QAAQ,SAAS,EAC/B,GAAA,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,IAAA,CAEJ,GACC,sBAAA,cAAA,OAAA,EAAI,WAAW,QAAQ,SAAS,EAC/B,GAAA,sBAAA,cAAC,UAAO,SAAS,gBAAgB,UAAU,sBACxC,iBACH,GACA,sBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,SAAS,MAAM;AACD,sBAAA;AACZ,wBAAc,KAAK;AAAA,QAAA;AAAA,MACrB;AAAA,MAEC;AAAA,IAAA,CAEL,CACF;AAAA,EAEJ;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:g,...f},E)=>{const{addButtonCaption:y="Add filter",or:v="or",other:h="other",dateIs:T="Date is"}=u||{},b="ADD"===i,D="EDIT"===i&&c,j="ADD_DATE"===i;return e.createElement("div",{...f,ref:E,className:n.default["filter-wrapper"]},e.createElement("button",{ref:o,type:"button",className:n.default["filter-button"],onClick: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},y)),D&&e.createElement(r.Typography,{variant:"body",className:n.default.caption},p?e.cloneElement(p,{filter:c}):e.createElement(l,{filter:c,or:v,other:h,columnsMetadata:g})),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={onFilterOpen}\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","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,QAASd,GAERQ,GACEb,EAAAH,cAAAC,EAAAA,SAAA,qBACEsB,EAAKA,KAAA,CAAAC,KAAMC,QAAMC,YACjBvB,EAAAH,cAAA2B,aAAA,CAAWC,QAAQ,OAAOT,UAAWC,UAAiB,SACpDN,IAING,KACEjB,cAAA2B,EAAAA,WAAA,CAAWC,QAAQ,OAAOT,UAAWC,UAAiB,SACpDT,EACCR,EAAM0B,aAAalB,EAAsB,CAAExB,WAE3CgB,EAAAH,cAACd,EAAA,CACCC,SACAC,KACAC,QACAC,qBAKP4B,mBACEjB,EAAAA,SACC,KAAAE,EAAAH,cAACuB,EAAAA,MAAKC,KAAMC,EAAAA,MAAMK,WACjB3B,EAAAH,cAAA2B,aAAA,CAAWC,QAAQ,OAAOT,UAAWC,EAAQW,QAAS,SACpDhB,EAAO,IAAEZ,EAAAH,cAAA,IAAA,KAAGU,MAKpBO,GACCd,EAAAH,cAACgC,EAAaA,aAAA,CAAAb,UAAWC,UAAQ,iBAAkBa,SAAU1B,IAEjE,EAIS2B,EAAoB/B,EAAMgC,WAAW/B"}

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

@@ -0,0 +1,64 @@
+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: 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={onFilterOpen}\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;AAAA,IAAA;AAAA,IAER,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"}

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

@@ -0,0 +1,89 @@
+import React, { useState, useCallback } from "react";
+import { Option } from "../../Form/Select/SingleSelect/Option.es.js";
+import { MultiOption } from "../../Form/Select/MultiSelect/MultiOption.es.js";
+import { MultiSelectWrapper } from "../../Form/Wrapper/MultiSelectWrapper/MultiSelectWrapper.es.js";
+import { SelectWrapper } from "../../Form/Wrapper/SelectWrapper/SelectWrapper.es.js";
+import { ValueSelectType } from "./DataGridFilters.interfaces.es.js";
+const DataGridFilterValueSelect = ({
+  column,
+  columnsMetadata,
+  values,
+  pickedValues,
+  setValues,
+  setPickedValues,
+  translations,
+  operator
+}) => {
+  const [touched, setTouched] = useState(false);
+  const {
+    valueSelectLabel = "Value",
+    addNewValueLabel = "Create new",
+    addNewValueButtonTitle = "Add new select value"
+  } = translations || {};
+  const columnMetadata = columnsMetadata.find(({ name }) => name === column);
+  const disableAddNew = columnMetadata == null ? void 0 : columnMetadata.disableAddNew;
+  const valueSelectType = columnMetadata == null ? void 0 : columnMetadata.valueSelectType;
+  const isValueRequired = operator && !operator.allowEmptyValues;
+  const hasValidationError = Boolean(isValueRequired && pickedValues.length === 0 && touched);
+  const addNewBtnProps = {
+    title: addNewValueButtonTitle,
+    type: "button"
+  };
+  const onChangeHandler = useCallback(
+    (e) => {
+      const { selectedOptions, value } = e.target;
+      let newValues;
+      if (valueSelectType === ValueSelectType.single) {
+        newValues = value ? [value] : [];
+      } else {
+        newValues = Array.from(selectedOptions, (option) => option.value);
+      }
+      setPickedValues(newValues);
+      setTouched(true);
+    },
+    [valueSelectType]
+  );
+  const selectProps = {
+    addNew: disableAddNew ? void 0 : {
+      label: addNewValueLabel,
+      onAddNew: (value) => {
+        if (value) {
+          setValues((prev) => [...prev, value]);
+          setPickedValues((prev) => [...prev, value]);
+        }
+      },
+      btnProps: addNewBtnProps
+    },
+    search: {
+      enabled: true,
+      renderThreshold: 0
+    }
+  };
+  return ValueSelectType.single === valueSelectType ? /* @__PURE__ */ React.createElement(
+    SelectWrapper,
+    {
+      label: valueSelectLabel,
+      name: "value",
+      value: pickedValues[0],
+      onChange: onChangeHandler,
+      selectProps,
+      error: hasValidationError
+    },
+    values.map((value) => /* @__PURE__ */ React.createElement(Option, { key: value, value }, value))
+  ) : /* @__PURE__ */ React.createElement(
+    MultiSelectWrapper,
+    {
+      label: valueSelectLabel,
+      name: "value",
+      value: pickedValues,
+      onChange: onChangeHandler,
+      selectProps,
+      error: hasValidationError
+    },
+    values.map((value) => /* @__PURE__ */ React.createElement(MultiOption, { key: value, value }, value))
+  );
+};
+export {
+  DataGridFilterValueSelect
+};
+//# sourceMappingURL=DataGridFilterValueSelect.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataGridFilterValueSelect.es.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":[],"mappings":";;;;;;AAsCO,MAAM,4BAA4B,CAAC;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAa;AACX,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAEtC,QAAA;AAAA,IACJ,mBAAmB;AAAA,IACnB,mBAAmB;AAAA,IACnB,yBAAyB;AAAA,EAC3B,IAAI,gBAAgB,CAAC;AAEf,QAAA,iBAAiB,gBAAgB,KAAK,CAAC,EAAE,KAAK,MAAM,SAAS,MAAM;AACzE,QAAM,gBAAgB,iDAAgB;AACtC,QAAM,kBAAkB,iDAAgB;AAElC,QAAA,kBAAkB,YAAY,CAAC,SAAS;AAC9C,QAAM,qBAAqB,QAAQ,mBAAmB,aAAa,WAAW,KAAK,OAAO;AAE1F,QAAM,iBAAgE;AAAA,IACpE,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAEA,QAAM,kBAAkB;AAAA,IACtB,CAAC,MAA4C;AAC3C,YAAM,EAAE,iBAAiB,MAAM,IAAI,EAAE;AAEjC,UAAA;AAEA,UAAA,oBAAoB,gBAAgB,QAAQ;AAC9C,oBAAY,QAAQ,CAAC,KAAK,IAAI,CAAC;AAAA,MAAA,OAC1B;AACL,oBAAY,MAAM,KAAK,iBAAiB,CAAA,WAAU,OAAO,KAAK;AAAA,MAAA;AAEhE,sBAAgB,SAAS;AACzB,iBAAW,IAAI;AAAA,IACjB;AAAA,IACA,CAAC,eAAe;AAAA,EAClB;AAEA,QAAM,cAAc;AAAA,IAClB,QAAQ,gBACJ,SACA;AAAA,MACE,OAAO;AAAA,MACP,UAAU,CAAC,UAAkB;AAC3B,YAAI,OAAO;AACT,oBAAU,CAAQ,SAAA,CAAC,GAAG,MAAM,KAAK,CAAC;AAClC,0BAAgB,CAAQ,SAAA,CAAC,GAAG,MAAM,KAAK,CAAC;AAAA,QAAA;AAAA,MAE5C;AAAA,MACA,UAAU;AAAA,IACZ;AAAA,IACJ,QAAQ;AAAA,MACN,SAAS;AAAA,MACT,iBAAiB;AAAA,IAAA;AAAA,EAErB;AAEO,SAAA,gBAAgB,WAAW,kBAChC,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,MACP,MAAM;AAAA,MACN,OAAO,aAAa,CAAC;AAAA,MACrB,UAAU;AAAA,MACV;AAAA,MACA,OAAO;AAAA,IAAA;AAAA,IAEN,OAAO,IAAI,CACV,UAAA,sBAAA,cAAC,UAAO,KAAK,OAAO,MACjB,GAAA,KACH,CACD;AAAA,EAGH,IAAA,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,MACP,MAAM;AAAA,MACN,OAAO;AAAA,MACP,UAAU;AAAA,MACV;AAAA,MACA,OAAO;AAAA,IAAA;AAAA,IAEN,OAAO,IAAI,CACV,UAAA,sBAAA,cAAC,eAAY,KAAK,OAAO,MACtB,GAAA,KACH,CACD;AAAA,EACH;AAEJ;"}

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var e=(e=>(e.single="single",e.multi="multi",e))(e||{});exports.DefaultOperators={is:{name:"is",allowEmptyValues:!1},isNot:{name:"is not",allowEmptyValues:!1},contains:{name:"contains",allowEmptyValues:!1},doesNotContain:{name:"does not contain",allowEmptyValues:!1},isEmpty:{name:"is empty",allowEmptyValues:!0}},exports.ValueSelectType=e;
+//# sourceMappingURL=DataGridFilters.interfaces.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataGridFilters.interfaces.cjs.js","sources":["../../../../src/components/DataGrid/DataGridFilters/DataGridFilters.interfaces.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\nexport interface FilterOperator {\n  name: string;\n  allowEmptyValues: boolean;\n}\n\nexport interface Filter {\n  id: string;\n  column: string;\n  operator: FilterOperator | null;\n  value: string[];\n}\n\nexport type FiltersAction =\n  | {\n      type: \"add\";\n      payload: Filter;\n    }\n  | {\n      type: \"edit\";\n      payload: Filter;\n    }\n  | {\n      type: \"remove\";\n      payload: { id: string };\n    }\n  | {\n      type: \"reset\";\n      payload: Filter[];\n    }\n  | {\n      type: \"clear\";\n    };\n\nexport type FiltersState = {\n  filters: Filter[];\n};\n\nexport type FilterEditorMode = \"ADD\" | \"EDIT\" | \"ADD_DATE\";\n\nexport const DefaultOperators: Record<string, FilterOperator> = {\n  is: { name: \"is\", allowEmptyValues: false },\n  isNot: { name: \"is not\", allowEmptyValues: false },\n  contains: { name: \"contains\", allowEmptyValues: false },\n  doesNotContain: { name: \"does not contain\", allowEmptyValues: false },\n  isEmpty: { name: \"is empty\", allowEmptyValues: true }\n};\n\nexport interface DataGridColumnMetadata {\n  name: string;\n  headline: string;\n  operators?: FilterOperator[];\n  defaultValues?: string[];\n  disableAddNew?: boolean;\n  allowSingleFilterOnly?: boolean;\n  valueSelectType?: ValueSelectType;\n}\n\nexport interface PopoverTranslations {\n  columnSelectLabel?: string;\n  operatorSelectLabel?: string;\n  valueSelectLabel?: string;\n  addNewValueLabel?: string;\n  addNewValueButtonTitle?: string;\n  submitButtonTitle?: string;\n  cancelButtonTitle?: string;\n}\n\nexport interface TagTranslations {\n  addButtonCaption?: string;\n  or?: string;\n  other?: string;\n  dateIs?: string;\n}\n\nexport interface ToolbarTranslations {\n  clearButtonCaption?: string;\n}\n\nexport interface FiltersTranslations {\n  toolbar?: ToolbarTranslations;\n  tag?: TagTranslations;\n  popover?: PopoverTranslations;\n}\n\nexport interface KeyValuePair<TKey = string, TValue = string> {\n  key: TKey;\n  value: TValue;\n}\n\nexport type DateTimeFilterType =\n  | \"THIRTY_SECONDS\"\n  | \"ONE_MINUTE\"\n  | \"FIVE_MINUTES\"\n  | \"ONE_HOUR\"\n  | \"TWENTY_FOUR_HOURS\"\n  | \"CUSTOM\";\n\nexport interface DateTimeFilter {\n  fromDate: string;\n  toDate: string;\n  type: DateTimeFilterType;\n}\n\nexport enum ValueSelectType {\n  single = \"single\",\n  multi = \"multi\"\n}\n"],"names":["ValueSelectType","is","name","allowEmptyValues","isNot","contains","doesNotContain","isEmpty"],"mappings":"gFAuHY,IAAAA,GAAAA,IACVA,EAAS,OAAA,SACTA,EAAQ,MAAA,QAFEA,IAAAA,GAAA,CAAA,4BAhEoD,CAC9DC,GAAI,CAAEC,KAAM,KAAMC,kBAAkB,GACpCC,MAAO,CAAEF,KAAM,SAAUC,kBAAkB,GAC3CE,SAAU,CAAEH,KAAM,WAAYC,kBAAkB,GAChDG,eAAgB,CAAEJ,KAAM,mBAAoBC,kBAAkB,GAC9DI,QAAS,CAAEL,KAAM,WAAYC,kBAAkB"}