@onewelcome/react-lib-components 10.0.2 → 11.0.0

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

@@ -1,3 +1,3 @@
-!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('.DataGridFilter_sr-only_EsL6T{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.DataGridFilter_hidden_EsL6T{display:none}.DataGridFilter_slide-in_EsL6T{animation:DataGridFilter_slide-in_EsL6T .5s forwards}@media (prefers-reduced-motion: reduce){.DataGridFilter_slide-in_EsL6T{animation-duration:.1ms}}.DataGridFilter_slide-out_EsL6T{animation:DataGridFilter_slide-out_EsL6T .5s forwards}@media (prefers-reduced-motion: reduce){.DataGridFilter_slide-out_EsL6T{animation-duration:.1ms}}@keyframes DataGridFilter_slide-in_EsL6T{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes DataGridFilter_slide-out_EsL6T{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_EsL6T{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_EsL6T:hover{background-color:var(--color-blue-grey200)}.DataGridFilter_filter-wrapper_EsL6T:active{background-color:var(--color-primary100)}.DataGridFilter_filter-wrapper_EsL6T .DataGridFilter_filter-button_EsL6T{display:flex;justify-content:flex-start;align-items:center;gap:.375rem;background:none;border:none;padding:0 .25rem;cursor:pointer}.DataGridFilter_filter-wrapper_EsL6T .DataGridFilter_filter-button_EsL6T:only-child{margin-right:-.25rem}.DataGridFilter_filter-wrapper_EsL6T .DataGridFilter_filter-button_EsL6T:focus-visible{outline:calc(.125 * var(--font-size)) solid var(--color-focus);outline-offset:0;border-radius:var(--focus-border-radius)}.DataGridFilter_filter-wrapper_EsL6T .DataGridFilter_remove-button_EsL6T{border-radius:1.25rem}.DataGridFilter_filter-wrapper_EsL6T .DataGridFilter_caption_EsL6T{font-size:var(--font-size-data-grid);line-height:var(--data-grid-line-height);margin:0;font-weight:400}.DataGridFilter_filter-wrapper_EsL6T .DataGridFilter_caption_EsL6T.DataGridFilter_bold_EsL6T{font-weight:600}.DataGridFilter_filter-wrapper_EsL6T .DataGridFilter_remove-icon_EsL6T{font-size:calc(.6 * var(--font-size))}.DataGridFilter_column-select-option_EsL6T{text-transform:capitalize}.DataGridFilter_popover_EsL6T{display:flex;flex-direction:column;align-items:flex-start;gap:1rem;padding:1rem .75rem;min-width:40rem}.DataGridFilter_popover_EsL6T .DataGridFilter_controls_EsL6T{width:100%;display:flex;gap:1rem}.DataGridFilter_popover_EsL6T .DataGridFilter_controls_EsL6T>*:first-child{flex-grow:1.8;flex-shrink:0;margin-top:0}.DataGridFilter_popover_EsL6T .DataGridFilter_controls_EsL6T>*:nth-child(2){flex-grow:1;flex-shrink:0;margin-top:0}.DataGridFilter_popover_EsL6T .DataGridFilter_controls_EsL6T>*:last-child{flex-basis:15rem;flex-grow:1.8;flex-shrink:0;margin-top:0}.DataGridFilter_popover_EsL6T .DataGridFilter_actions_EsL6T{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_EsL6T",e="DataGridFilter_popover_EsL6T",o="DataGridFilter_controls_EsL6T",r="DataGridFilter_actions_EsL6T",i={"filter-wrapper":"DataGridFilter_filter-wrapper_EsL6T","filter-button":"DataGridFilter_filter-button_EsL6T","remove-button":"DataGridFilter_remove-button_EsL6T",caption:t,"column-select-option":"DataGridFilter_column-select-option_EsL6T",popover:e,controls:o,actions:r};exports.actions=r,exports.caption=t,exports.controls=o,exports.default=i,exports.popover=e;
+!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('.DataGridFilter_sr-only_HO9cY{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.DataGridFilter_hidden_HO9cY{display:none}.DataGridFilter_slide-in_HO9cY{animation:DataGridFilter_slide-in_HO9cY .5s forwards}@media (prefers-reduced-motion: reduce){.DataGridFilter_slide-in_HO9cY{animation-duration:.1ms}}.DataGridFilter_slide-out_HO9cY{animation:DataGridFilter_slide-out_HO9cY .5s forwards}@media (prefers-reduced-motion: reduce){.DataGridFilter_slide-out_HO9cY{animation-duration:.1ms}}@keyframes DataGridFilter_slide-in_HO9cY{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes DataGridFilter_slide-out_HO9cY{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_HO9cY{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_HO9cY:hover{background-color:var(--color-blue-grey200)}.DataGridFilter_filter-wrapper_HO9cY:active{background-color:var(--color-primary100)}.DataGridFilter_filter-wrapper_HO9cY .DataGridFilter_filter-button_HO9cY{display:flex;justify-content:flex-start;align-items:center;gap:.375rem;background:none;border:none;padding:0 .25rem;cursor:pointer}.DataGridFilter_filter-wrapper_HO9cY .DataGridFilter_filter-button_HO9cY:only-child{margin-right:-.25rem}.DataGridFilter_filter-wrapper_HO9cY .DataGridFilter_filter-button_HO9cY:focus-visible{outline:calc(.125 * var(--font-size)) solid var(--color-focus);outline-offset:0;border-radius:var(--focus-border-radius)}.DataGridFilter_filter-wrapper_HO9cY .DataGridFilter_remove-button_HO9cY{border-radius:1.25rem}.DataGridFilter_filter-wrapper_HO9cY .DataGridFilter_caption_HO9cY{font-size:var(--font-size-data-grid);line-height:var(--data-grid-line-height);margin:0;font-weight:400}.DataGridFilter_filter-wrapper_HO9cY .DataGridFilter_caption_HO9cY.DataGridFilter_bold_HO9cY{font-weight:600}.DataGridFilter_filter-wrapper_HO9cY .DataGridFilter_remove-icon_HO9cY{font-size:calc(.6 * var(--font-size))}.DataGridFilter_column-select-option_HO9cY{text-transform:capitalize}.DataGridFilter_popover_HO9cY{display:flex;flex-direction:column;align-items:flex-start;gap:1rem;padding:1rem .75rem;min-width:40rem}.DataGridFilter_popover_HO9cY .DataGridFilter_controls_HO9cY{width:100%;display:flex;gap:1rem}.DataGridFilter_popover_HO9cY .DataGridFilter_controls_HO9cY>*:first-child{flex-grow:1.8;flex-shrink:0;margin-top:0}.DataGridFilter_popover_HO9cY .DataGridFilter_controls_HO9cY>*:nth-child(2){flex-grow:1;flex-shrink:0;margin-top:0}.DataGridFilter_popover_HO9cY .DataGridFilter_controls_HO9cY>*:last-child{flex-basis:15rem;flex-grow:1.8;flex-shrink:0;margin-top:0}.DataGridFilter_popover_HO9cY .DataGridFilter_actions_HO9cY{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_HO9cY",e="DataGridFilter_popover_HO9cY",o="DataGridFilter_controls_HO9cY",r="DataGridFilter_actions_HO9cY",i={"filter-wrapper":"DataGridFilter_filter-wrapper_HO9cY","filter-button":"DataGridFilter_filter-button_HO9cY","remove-button":"DataGridFilter_remove-button_HO9cY",caption:t,"column-select-option":"DataGridFilter_column-select-option_HO9cY",popover:e,controls:o,actions:r};exports.actions=r,exports.caption=t,exports.controls=o,exports.default=i,exports.popover=e;
 //# sourceMappingURL=DataGridFilter.module.scss.cjs.js.map

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

@@ -1,14 +1,14 @@
-!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('.DataGridFilter_sr-only_EsL6T{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.DataGridFilter_hidden_EsL6T{display:none}.DataGridFilter_slide-in_EsL6T{animation:DataGridFilter_slide-in_EsL6T .5s forwards}@media (prefers-reduced-motion: reduce){.DataGridFilter_slide-in_EsL6T{animation-duration:.1ms}}.DataGridFilter_slide-out_EsL6T{animation:DataGridFilter_slide-out_EsL6T .5s forwards}@media (prefers-reduced-motion: reduce){.DataGridFilter_slide-out_EsL6T{animation-duration:.1ms}}@keyframes DataGridFilter_slide-in_EsL6T{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes DataGridFilter_slide-out_EsL6T{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_EsL6T{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_EsL6T:hover{background-color:var(--color-blue-grey200)}.DataGridFilter_filter-wrapper_EsL6T:active{background-color:var(--color-primary100)}.DataGridFilter_filter-wrapper_EsL6T .DataGridFilter_filter-button_EsL6T{display:flex;justify-content:flex-start;align-items:center;gap:.375rem;background:none;border:none;padding:0 .25rem;cursor:pointer}.DataGridFilter_filter-wrapper_EsL6T .DataGridFilter_filter-button_EsL6T:only-child{margin-right:-.25rem}.DataGridFilter_filter-wrapper_EsL6T .DataGridFilter_filter-button_EsL6T:focus-visible{outline:calc(.125 * var(--font-size)) solid var(--color-focus);outline-offset:0;border-radius:var(--focus-border-radius)}.DataGridFilter_filter-wrapper_EsL6T .DataGridFilter_remove-button_EsL6T{border-radius:1.25rem}.DataGridFilter_filter-wrapper_EsL6T .DataGridFilter_caption_EsL6T{font-size:var(--font-size-data-grid);line-height:var(--data-grid-line-height);margin:0;font-weight:400}.DataGridFilter_filter-wrapper_EsL6T .DataGridFilter_caption_EsL6T.DataGridFilter_bold_EsL6T{font-weight:600}.DataGridFilter_filter-wrapper_EsL6T .DataGridFilter_remove-icon_EsL6T{font-size:calc(.6 * var(--font-size))}.DataGridFilter_column-select-option_EsL6T{text-transform:capitalize}.DataGridFilter_popover_EsL6T{display:flex;flex-direction:column;align-items:flex-start;gap:1rem;padding:1rem .75rem;min-width:40rem}.DataGridFilter_popover_EsL6T .DataGridFilter_controls_EsL6T{width:100%;display:flex;gap:1rem}.DataGridFilter_popover_EsL6T .DataGridFilter_controls_EsL6T>*:first-child{flex-grow:1.8;flex-shrink:0;margin-top:0}.DataGridFilter_popover_EsL6T .DataGridFilter_controls_EsL6T>*:nth-child(2){flex-grow:1;flex-shrink:0;margin-top:0}.DataGridFilter_popover_EsL6T .DataGridFilter_controls_EsL6T>*:last-child{flex-basis:15rem;flex-grow:1.8;flex-shrink:0;margin-top:0}.DataGridFilter_popover_EsL6T .DataGridFilter_actions_EsL6T{display:flex;gap:1rem}')),document.head.appendChild(e)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}}();
-const caption = "DataGridFilter_caption_EsL6T";
-const popover = "DataGridFilter_popover_EsL6T";
-const controls = "DataGridFilter_controls_EsL6T";
-const actions = "DataGridFilter_actions_EsL6T";
+!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('.DataGridFilter_sr-only_HO9cY{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.DataGridFilter_hidden_HO9cY{display:none}.DataGridFilter_slide-in_HO9cY{animation:DataGridFilter_slide-in_HO9cY .5s forwards}@media (prefers-reduced-motion: reduce){.DataGridFilter_slide-in_HO9cY{animation-duration:.1ms}}.DataGridFilter_slide-out_HO9cY{animation:DataGridFilter_slide-out_HO9cY .5s forwards}@media (prefers-reduced-motion: reduce){.DataGridFilter_slide-out_HO9cY{animation-duration:.1ms}}@keyframes DataGridFilter_slide-in_HO9cY{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes DataGridFilter_slide-out_HO9cY{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_HO9cY{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_HO9cY:hover{background-color:var(--color-blue-grey200)}.DataGridFilter_filter-wrapper_HO9cY:active{background-color:var(--color-primary100)}.DataGridFilter_filter-wrapper_HO9cY .DataGridFilter_filter-button_HO9cY{display:flex;justify-content:flex-start;align-items:center;gap:.375rem;background:none;border:none;padding:0 .25rem;cursor:pointer}.DataGridFilter_filter-wrapper_HO9cY .DataGridFilter_filter-button_HO9cY:only-child{margin-right:-.25rem}.DataGridFilter_filter-wrapper_HO9cY .DataGridFilter_filter-button_HO9cY:focus-visible{outline:calc(.125 * var(--font-size)) solid var(--color-focus);outline-offset:0;border-radius:var(--focus-border-radius)}.DataGridFilter_filter-wrapper_HO9cY .DataGridFilter_remove-button_HO9cY{border-radius:1.25rem}.DataGridFilter_filter-wrapper_HO9cY .DataGridFilter_caption_HO9cY{font-size:var(--font-size-data-grid);line-height:var(--data-grid-line-height);margin:0;font-weight:400}.DataGridFilter_filter-wrapper_HO9cY .DataGridFilter_caption_HO9cY.DataGridFilter_bold_HO9cY{font-weight:600}.DataGridFilter_filter-wrapper_HO9cY .DataGridFilter_remove-icon_HO9cY{font-size:calc(.6 * var(--font-size))}.DataGridFilter_column-select-option_HO9cY{text-transform:capitalize}.DataGridFilter_popover_HO9cY{display:flex;flex-direction:column;align-items:flex-start;gap:1rem;padding:1rem .75rem;min-width:40rem}.DataGridFilter_popover_HO9cY .DataGridFilter_controls_HO9cY{width:100%;display:flex;gap:1rem}.DataGridFilter_popover_HO9cY .DataGridFilter_controls_HO9cY>*:first-child{flex-grow:1.8;flex-shrink:0;margin-top:0}.DataGridFilter_popover_HO9cY .DataGridFilter_controls_HO9cY>*:nth-child(2){flex-grow:1;flex-shrink:0;margin-top:0}.DataGridFilter_popover_HO9cY .DataGridFilter_controls_HO9cY>*:last-child{flex-basis:15rem;flex-grow:1.8;flex-shrink:0;margin-top:0}.DataGridFilter_popover_HO9cY .DataGridFilter_actions_HO9cY{display:flex;gap:1rem}')),document.head.appendChild(e)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}}();
+const caption = "DataGridFilter_caption_HO9cY";
+const popover = "DataGridFilter_popover_HO9cY";
+const controls = "DataGridFilter_controls_HO9cY";
+const actions = "DataGridFilter_actions_HO9cY";
 const classes = {
-  "filter-wrapper": "DataGridFilter_filter-wrapper_EsL6T",
-  "filter-button": "DataGridFilter_filter-button_EsL6T",
-  "remove-button": "DataGridFilter_remove-button_EsL6T",
+  "filter-wrapper": "DataGridFilter_filter-wrapper_HO9cY",
+  "filter-button": "DataGridFilter_filter-button_HO9cY",
+  "remove-button": "DataGridFilter_remove-button_HO9cY",
   caption,
-  "column-select-option": "DataGridFilter_column-select-option_EsL6T",
+  "column-select-option": "DataGridFilter_column-select-option_HO9cY",
   popover,
   controls,
   actions

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"DataGridFilterPopover.es.js","sources":["../../../../src/components/DataGrid/DataGridFilters/DataGridFilterPopover.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React from \"react\";\nimport classes from \"./DataGridFilter.module.scss\";\nimport { Button } from \"../../Button/Button\";\nimport { Option } from \"../../Form/Select/SingleSelect/Option\";\nimport { SelectWrapper } from \"../../Form/Wrapper/SelectWrapper/SelectWrapper\";\nimport { Popover } from \"../../Popover/Popover\";\nimport { DataGridFilterValueSelect } from \"./DataGridFilterValueSelect\";\nimport {\n  DataGridColumnMetadata,\n  DefaultOperators,\n  FilterOperator,\n  PopoverTranslations\n} from \"./DataGridFilters.interfaces\";\nimport { useRepeatFocus } from \"../../../hooks/useRepeatFocus\";\n\nexport type Props = {\n  popoverRef: React.RefObject<HTMLDivElement>;\n  anchorRef?: React.RefObject<HTMLDivElement>;\n  isOpen: boolean;\n  column: string;\n  columnsMetadata: DataGridColumnMetadata[];\n  values: string[];\n  pickedValues: string[];\n  operator: FilterOperator | null;\n  operators: FilterOperator[];\n  onFilterSubmit: () => void;\n  resetFields: () => void;\n  setFilterOpen: (value: React.SetStateAction<boolean>) => void;\n  setColumn: (column: React.SetStateAction<string>) => void;\n  setOperator: (operator: React.SetStateAction<FilterOperator | null>) => void;\n  setOperators: (operators: React.SetStateAction<FilterOperator[]>) => void;\n  setValues: (values: React.SetStateAction<string[]>) => void;\n  setPickedValues: (pickedValues: React.SetStateAction<string[]>) => void;\n  translations?: PopoverTranslations;\n};\n\nexport const DataGridFilterPopover = ({\n  popoverRef,\n  anchorRef,\n  isOpen,\n  column,\n  columnsMetadata,\n  values,\n  pickedValues,\n  operator,\n  operators,\n  onFilterSubmit,\n  resetFields,\n  setFilterOpen,\n  setColumn,\n  setOperator,\n  setOperators,\n  setValues,\n  setPickedValues,\n  translations\n}: Props) => {\n  const {\n    columnSelectLabel = \"Filter by\",\n    operatorSelectLabel = \"Operator\",\n    submitButtonTitle = \"Apply\",\n    cancelButtonTitle = \"Cancel\"\n  } = translations || {};\n  useRepeatFocus(popoverRef);\n\n  const isValueRequired = operator && !operator.allowEmptyValues;\n  const hasValidationError = Boolean(isValueRequired && pickedValues.length === 0);\n\n  return (\n    <Popover\n      tabIndex={-1}\n      anchorEl={anchorRef}\n      ref={popoverRef}\n      show={isOpen}\n      placement={{ horizontal: \"left\", vertical: \"bottom\" }}\n      transformOrigin={{ horizontal: \"left\", vertical: \"top\" }}\n    >\n      {isOpen && (\n        <div className={classes[\"popover\"]}>\n          <div className={classes[\"controls\"]}>\n            <SelectWrapper\n              selectProps={{ selectButtonProps: { autoFocus: true } }}\n              label={columnSelectLabel}\n              value={column}\n              name={\"column\"}\n              onChange={e => {\n                setColumn(e.target.value);\n                const columnMetadata = columnsMetadata.find(({ name }) => name === e.target.value);\n\n                if (columnMetadata?.operators) {\n                  setOperator(columnMetadata.operators[0]);\n                  setOperators(columnMetadata.operators);\n                } else {\n                  setOperator(Object.values(DefaultOperators)[0]);\n                  setOperators(Object.values(DefaultOperators));\n                }\n\n                if (columnMetadata?.defaultValues) {\n                  setPickedValues([]);\n                  setValues(columnMetadata.defaultValues);\n                } else {\n                  setPickedValues([]);\n                  setValues([]);\n                }\n              }}\n            >\n              {columnsMetadata.map(({ name, headline }) => (\n                <Option className={classes[\"column-select-option\"]} key={name} value={name}>\n                  {headline}\n                </Option>\n              ))}\n            </SelectWrapper>\n            <SelectWrapper\n              label={operatorSelectLabel}\n              value={operator?.name || \"\"}\n              name={\"operator\"}\n              onChange={e => {\n                const selectedOperator = operators.find(op => op.name === e.target.value);\n                setOperator(selectedOperator || null);\n              }}\n            >\n              {operators.map(operator => (\n                <Option key={operator.name} value={operator.name}>\n                  {operator.name}\n                </Option>\n              ))}\n            </SelectWrapper>\n            <DataGridFilterValueSelect\n              column={column}\n              columnsMetadata={columnsMetadata}\n              values={values}\n              pickedValues={pickedValues}\n              setValues={setValues}\n              setPickedValues={setPickedValues}\n              translations={translations}\n              operator={operator}\n            />\n          </div>\n          <div className={classes[\"actions\"]}>\n            <Button onClick={onFilterSubmit} disabled={hasValidationError}>\n              {submitButtonTitle}\n            </Button>\n            <Button\n              variant=\"text\"\n              onClick={() => {\n                resetFields();\n                setFilterOpen(false);\n              }}\n            >\n              {cancelButtonTitle}\n            </Button>\n          </div>\n        </div>\n      )}\n    </Popover>\n  );\n};\n"],"names":["operator"],"mappings":"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"}
+{"version":3,"file":"DataGridFilterPopover.es.js","sources":["../../../../src/components/DataGrid/DataGridFilters/DataGridFilterPopover.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React from \"react\";\nimport classes from \"./DataGridFilter.module.scss\";\nimport { Button } from \"../../Button/Button\";\nimport { Option } from \"../../Form/Select/SingleSelect/Option\";\nimport { SelectWrapper } from \"../../Form/Wrapper/SelectWrapper/SelectWrapper\";\nimport { Popover } from \"../../Popover/Popover\";\nimport { DataGridFilterValueSelect } from \"./DataGridFilterValueSelect\";\nimport {\n  DataGridColumnMetadata,\n  DefaultOperators,\n  FilterOperator,\n  PopoverTranslations\n} from \"./DataGridFilters.interfaces\";\nimport { useRepeatFocus } from \"../../../hooks/useRepeatFocus\";\n\nexport type Props = {\n  popoverRef: React.RefObject<HTMLDivElement>;\n  anchorRef?: React.RefObject<HTMLDivElement>;\n  isOpen: boolean;\n  column: string;\n  columnsMetadata: DataGridColumnMetadata[];\n  values: string[];\n  pickedValues: string[];\n  operator: FilterOperator | null;\n  operators: FilterOperator[];\n  onFilterSubmit: () => void;\n  resetFields: () => void;\n  setFilterOpen: (value: React.SetStateAction<boolean>) => void;\n  setColumn: (column: React.SetStateAction<string>) => void;\n  setOperator: (operator: React.SetStateAction<FilterOperator | null>) => void;\n  setOperators: (operators: React.SetStateAction<FilterOperator[]>) => void;\n  setValues: (values: React.SetStateAction<string[]>) => void;\n  setPickedValues: (pickedValues: React.SetStateAction<string[]>) => void;\n  translations?: PopoverTranslations;\n};\n\nexport const DataGridFilterPopover = ({\n  popoverRef,\n  anchorRef,\n  isOpen,\n  column,\n  columnsMetadata,\n  values,\n  pickedValues,\n  operator,\n  operators,\n  onFilterSubmit,\n  resetFields,\n  setFilterOpen,\n  setColumn,\n  setOperator,\n  setOperators,\n  setValues,\n  setPickedValues,\n  translations\n}: Props) => {\n  const {\n    columnSelectLabel = \"Filter by\",\n    operatorSelectLabel = \"Operator\",\n    submitButtonTitle = \"Apply\",\n    cancelButtonTitle = \"Cancel\"\n  } = translations || {};\n  useRepeatFocus(popoverRef);\n\n  const isValueRequired = operator && !operator.allowEmptyValues;\n  const hasValidationError = Boolean(isValueRequired && pickedValues.length === 0);\n\n  return (\n    <Popover\n      tabIndex={-1}\n      anchorEl={anchorRef}\n      ref={popoverRef}\n      show={isOpen}\n      placement={{ horizontal: \"left\", vertical: \"bottom\" }}\n      transformOrigin={{ horizontal: \"left\", vertical: \"top\" }}\n    >\n      <div className={classes[\"popover\"]}>\n        <div className={classes[\"controls\"]}>\n          <SelectWrapper\n            selectProps={{ selectButtonProps: { autoFocus: true } }}\n            label={columnSelectLabel}\n            value={column}\n            name={\"column\"}\n            onChange={e => {\n              setColumn(e.target.value);\n              const columnMetadata = columnsMetadata.find(({ name }) => name === e.target.value);\n\n              if (columnMetadata?.operators) {\n                setOperator(columnMetadata.operators[0]);\n                setOperators(columnMetadata.operators);\n              } else {\n                setOperator(Object.values(DefaultOperators)[0]);\n                setOperators(Object.values(DefaultOperators));\n              }\n\n              if (columnMetadata?.defaultValues) {\n                setPickedValues([]);\n                setValues(columnMetadata.defaultValues);\n              } else {\n                setPickedValues([]);\n                setValues([]);\n              }\n            }}\n          >\n            {columnsMetadata.map(({ name, headline }) => (\n              <Option className={classes[\"column-select-option\"]} key={name} value={name}>\n                {headline}\n              </Option>\n            ))}\n          </SelectWrapper>\n          <SelectWrapper\n            label={operatorSelectLabel}\n            value={operator?.name || \"\"}\n            name={\"operator\"}\n            onChange={e => {\n              const selectedOperator = operators.find(op => op.name === e.target.value);\n              setOperator(selectedOperator || null);\n            }}\n          >\n            {operators.map(operator => (\n              <Option key={operator.name} value={operator.name}>\n                {operator.name}\n              </Option>\n            ))}\n          </SelectWrapper>\n          <DataGridFilterValueSelect\n            column={column}\n            columnsMetadata={columnsMetadata}\n            values={values}\n            pickedValues={pickedValues}\n            setValues={setValues}\n            setPickedValues={setPickedValues}\n            translations={translations}\n            operator={operator}\n          />\n        </div>\n        <div className={classes[\"actions\"]}>\n          <Button onClick={onFilterSubmit} disabled={hasValidationError}>\n            {submitButtonTitle}\n          </Button>\n          <Button\n            variant=\"text\"\n            onClick={() => {\n              resetFields();\n              setFilterOpen(false);\n            }}\n          >\n            {cancelButtonTitle}\n          </Button>\n        </div>\n      </div>\n    </Popover>\n  );\n};\n"],"names":["operator"],"mappings":"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"}

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

@@ -1,3 +1,3 @@
-!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('.DataGridToolbar_sr-only_EsL6T{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.DataGridToolbar_hidden_EsL6T{display:none}.DataGridToolbar_slide-in_EsL6T{animation:DataGridToolbar_slide-in_EsL6T .5s forwards}@media (prefers-reduced-motion: reduce){.DataGridToolbar_slide-in_EsL6T{animation-duration:.1ms}}.DataGridToolbar_slide-out_EsL6T{animation:DataGridToolbar_slide-out_EsL6T .5s forwards}@media (prefers-reduced-motion: reduce){.DataGridToolbar_slide-out_EsL6T{animation-duration:.1ms}}@keyframes DataGridToolbar_slide-in_EsL6T{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes DataGridToolbar_slide-out_EsL6T{0%{transform:translateY(0)}to{transform:translateY(100vh)}}/*!\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the "License");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an "AS IS" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */.DataGridToolbar_wrapper_EsL6T input[type=search]::-webkit-search-cancel-button{cursor:pointer}.DataGridToolbar_wrapper_EsL6T{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem;width:100%;padding-bottom:1rem}.DataGridToolbar_wrapper_EsL6T .DataGridToolbar_filter-section_EsL6T{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:.5rem;width:100%;flex-grow:1}.DataGridToolbar_wrapper_EsL6T .DataGridToolbar_filter-section_EsL6T .DataGridToolbar_searchbar_EsL6T{min-width:7rem;flex-basis:15rem}.DataGridToolbar_wrapper_EsL6T .DataGridToolbar_filter-section_EsL6T .DataGridToolbar_actions-wrapper_EsL6T{display:flex;align-items:center;justify-content:flex-start;gap:.5rem}.DataGridToolbar_wrapper_EsL6T .DataGridToolbar_filter-section_EsL6T .DataGridToolbar_clear-button_EsL6T{background:none;border:none;cursor:pointer}.DataGridToolbar_wrapper_EsL6T .DataGridToolbar_filter-section_EsL6T .DataGridToolbar_clear-button_EsL6T:focus-visible{outline:calc(.125 * var(--font-size)) solid var(--color-focus);outline-offset:0;border-radius:var(--focus-border-radius)}.DataGridToolbar_wrapper_EsL6T .DataGridToolbar_filter-section_EsL6T .DataGridToolbar_clear-button_EsL6T .DataGridToolbar_caption_EsL6T{margin:0;font-size:var(--font-size-data-grid);line-height:var(--data-grid-line-height);text-decoration:underline;color:var(--color-primary500)}.DataGridToolbar_wrapper_EsL6T .DataGridToolbar_button-section_EsL6T{flex-shrink:0;display:flex;justify-content:center;align-items:center;gap:.5rem}')),document.head.appendChild(e)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}}();
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a="DataGridToolbar_wrapper_EsL6T",r="DataGridToolbar_searchbar_EsL6T",t="DataGridToolbar_caption_EsL6T",o={wrapper:a,"filter-section":"DataGridToolbar_filter-section_EsL6T",searchbar:r,"actions-wrapper":"DataGridToolbar_actions-wrapper_EsL6T","clear-button":"DataGridToolbar_clear-button_EsL6T",caption:t,"button-section":"DataGridToolbar_button-section_EsL6T"};exports.caption=t,exports.default=o,exports.searchbar=r,exports.wrapper=a;
+!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('.DataGridToolbar_sr-only_HO9cY{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.DataGridToolbar_hidden_HO9cY{display:none}.DataGridToolbar_slide-in_HO9cY{animation:DataGridToolbar_slide-in_HO9cY .5s forwards}@media (prefers-reduced-motion: reduce){.DataGridToolbar_slide-in_HO9cY{animation-duration:.1ms}}.DataGridToolbar_slide-out_HO9cY{animation:DataGridToolbar_slide-out_HO9cY .5s forwards}@media (prefers-reduced-motion: reduce){.DataGridToolbar_slide-out_HO9cY{animation-duration:.1ms}}@keyframes DataGridToolbar_slide-in_HO9cY{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes DataGridToolbar_slide-out_HO9cY{0%{transform:translateY(0)}to{transform:translateY(100vh)}}/*!\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the "License");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an "AS IS" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */.DataGridToolbar_wrapper_HO9cY input[type=search]::-webkit-search-cancel-button{cursor:pointer}.DataGridToolbar_wrapper_HO9cY{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem;width:100%;padding-bottom:1rem}.DataGridToolbar_wrapper_HO9cY .DataGridToolbar_filter-section_HO9cY{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:.5rem;width:100%;flex-grow:1}.DataGridToolbar_wrapper_HO9cY .DataGridToolbar_filter-section_HO9cY .DataGridToolbar_searchbar_HO9cY{min-width:7rem;flex-basis:15rem}.DataGridToolbar_wrapper_HO9cY .DataGridToolbar_filter-section_HO9cY .DataGridToolbar_actions-wrapper_HO9cY{display:flex;align-items:center;justify-content:flex-start;gap:.5rem}.DataGridToolbar_wrapper_HO9cY .DataGridToolbar_filter-section_HO9cY .DataGridToolbar_clear-button_HO9cY{background:none;border:none;cursor:pointer}.DataGridToolbar_wrapper_HO9cY .DataGridToolbar_filter-section_HO9cY .DataGridToolbar_clear-button_HO9cY:focus-visible{outline:calc(.125 * var(--font-size)) solid var(--color-focus);outline-offset:0;border-radius:var(--focus-border-radius)}.DataGridToolbar_wrapper_HO9cY .DataGridToolbar_filter-section_HO9cY .DataGridToolbar_clear-button_HO9cY .DataGridToolbar_caption_HO9cY{margin:0;font-size:var(--font-size-data-grid);line-height:var(--data-grid-line-height);text-decoration:underline;color:var(--color-primary500)}.DataGridToolbar_wrapper_HO9cY .DataGridToolbar_button-section_HO9cY{flex-shrink:0;display:flex;justify-content:center;align-items:center;gap:.5rem}')),document.head.appendChild(e)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}}();
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a="DataGridToolbar_wrapper_HO9cY",r="DataGridToolbar_searchbar_HO9cY",t="DataGridToolbar_caption_HO9cY",o={wrapper:a,"filter-section":"DataGridToolbar_filter-section_HO9cY",searchbar:r,"actions-wrapper":"DataGridToolbar_actions-wrapper_HO9cY","clear-button":"DataGridToolbar_clear-button_HO9cY",caption:t,"button-section":"DataGridToolbar_button-section_HO9cY"};exports.caption=t,exports.default=o,exports.searchbar=r,exports.wrapper=a;
 //# sourceMappingURL=DataGridToolbar.module.scss.cjs.js.map

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

@@ -1,15 +1,15 @@
-!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('.DataGridToolbar_sr-only_EsL6T{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.DataGridToolbar_hidden_EsL6T{display:none}.DataGridToolbar_slide-in_EsL6T{animation:DataGridToolbar_slide-in_EsL6T .5s forwards}@media (prefers-reduced-motion: reduce){.DataGridToolbar_slide-in_EsL6T{animation-duration:.1ms}}.DataGridToolbar_slide-out_EsL6T{animation:DataGridToolbar_slide-out_EsL6T .5s forwards}@media (prefers-reduced-motion: reduce){.DataGridToolbar_slide-out_EsL6T{animation-duration:.1ms}}@keyframes DataGridToolbar_slide-in_EsL6T{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes DataGridToolbar_slide-out_EsL6T{0%{transform:translateY(0)}to{transform:translateY(100vh)}}/*!\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the "License");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an "AS IS" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */.DataGridToolbar_wrapper_EsL6T input[type=search]::-webkit-search-cancel-button{cursor:pointer}.DataGridToolbar_wrapper_EsL6T{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem;width:100%;padding-bottom:1rem}.DataGridToolbar_wrapper_EsL6T .DataGridToolbar_filter-section_EsL6T{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:.5rem;width:100%;flex-grow:1}.DataGridToolbar_wrapper_EsL6T .DataGridToolbar_filter-section_EsL6T .DataGridToolbar_searchbar_EsL6T{min-width:7rem;flex-basis:15rem}.DataGridToolbar_wrapper_EsL6T .DataGridToolbar_filter-section_EsL6T .DataGridToolbar_actions-wrapper_EsL6T{display:flex;align-items:center;justify-content:flex-start;gap:.5rem}.DataGridToolbar_wrapper_EsL6T .DataGridToolbar_filter-section_EsL6T .DataGridToolbar_clear-button_EsL6T{background:none;border:none;cursor:pointer}.DataGridToolbar_wrapper_EsL6T .DataGridToolbar_filter-section_EsL6T .DataGridToolbar_clear-button_EsL6T:focus-visible{outline:calc(.125 * var(--font-size)) solid var(--color-focus);outline-offset:0;border-radius:var(--focus-border-radius)}.DataGridToolbar_wrapper_EsL6T .DataGridToolbar_filter-section_EsL6T .DataGridToolbar_clear-button_EsL6T .DataGridToolbar_caption_EsL6T{margin:0;font-size:var(--font-size-data-grid);line-height:var(--data-grid-line-height);text-decoration:underline;color:var(--color-primary500)}.DataGridToolbar_wrapper_EsL6T .DataGridToolbar_button-section_EsL6T{flex-shrink:0;display:flex;justify-content:center;align-items:center;gap:.5rem}')),document.head.appendChild(e)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}}();
-const wrapper = "DataGridToolbar_wrapper_EsL6T";
-const searchbar = "DataGridToolbar_searchbar_EsL6T";
-const caption = "DataGridToolbar_caption_EsL6T";
+!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('.DataGridToolbar_sr-only_HO9cY{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.DataGridToolbar_hidden_HO9cY{display:none}.DataGridToolbar_slide-in_HO9cY{animation:DataGridToolbar_slide-in_HO9cY .5s forwards}@media (prefers-reduced-motion: reduce){.DataGridToolbar_slide-in_HO9cY{animation-duration:.1ms}}.DataGridToolbar_slide-out_HO9cY{animation:DataGridToolbar_slide-out_HO9cY .5s forwards}@media (prefers-reduced-motion: reduce){.DataGridToolbar_slide-out_HO9cY{animation-duration:.1ms}}@keyframes DataGridToolbar_slide-in_HO9cY{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes DataGridToolbar_slide-out_HO9cY{0%{transform:translateY(0)}to{transform:translateY(100vh)}}/*!\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the "License");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an "AS IS" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */.DataGridToolbar_wrapper_HO9cY input[type=search]::-webkit-search-cancel-button{cursor:pointer}.DataGridToolbar_wrapper_HO9cY{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem;width:100%;padding-bottom:1rem}.DataGridToolbar_wrapper_HO9cY .DataGridToolbar_filter-section_HO9cY{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:.5rem;width:100%;flex-grow:1}.DataGridToolbar_wrapper_HO9cY .DataGridToolbar_filter-section_HO9cY .DataGridToolbar_searchbar_HO9cY{min-width:7rem;flex-basis:15rem}.DataGridToolbar_wrapper_HO9cY .DataGridToolbar_filter-section_HO9cY .DataGridToolbar_actions-wrapper_HO9cY{display:flex;align-items:center;justify-content:flex-start;gap:.5rem}.DataGridToolbar_wrapper_HO9cY .DataGridToolbar_filter-section_HO9cY .DataGridToolbar_clear-button_HO9cY{background:none;border:none;cursor:pointer}.DataGridToolbar_wrapper_HO9cY .DataGridToolbar_filter-section_HO9cY .DataGridToolbar_clear-button_HO9cY:focus-visible{outline:calc(.125 * var(--font-size)) solid var(--color-focus);outline-offset:0;border-radius:var(--focus-border-radius)}.DataGridToolbar_wrapper_HO9cY .DataGridToolbar_filter-section_HO9cY .DataGridToolbar_clear-button_HO9cY .DataGridToolbar_caption_HO9cY{margin:0;font-size:var(--font-size-data-grid);line-height:var(--data-grid-line-height);text-decoration:underline;color:var(--color-primary500)}.DataGridToolbar_wrapper_HO9cY .DataGridToolbar_button-section_HO9cY{flex-shrink:0;display:flex;justify-content:center;align-items:center;gap:.5rem}')),document.head.appendChild(e)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}}();
+const wrapper = "DataGridToolbar_wrapper_HO9cY";
+const searchbar = "DataGridToolbar_searchbar_HO9cY";
+const caption = "DataGridToolbar_caption_HO9cY";
 const classes = {
   wrapper,
-  "filter-section": "DataGridToolbar_filter-section_EsL6T",
+  "filter-section": "DataGridToolbar_filter-section_HO9cY",
   searchbar,
-  "actions-wrapper": "DataGridToolbar_actions-wrapper_EsL6T",
-  "clear-button": "DataGridToolbar_clear-button_EsL6T",
+  "actions-wrapper": "DataGridToolbar_actions-wrapper_HO9cY",
+  "clear-button": "DataGridToolbar_clear-button_HO9cY",
   caption,
-  "button-section": "DataGridToolbar_button-section_EsL6T"
+  "button-section": "DataGridToolbar_button-section_HO9cY"
 };
 export {
   caption,

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"DateTimePicker.cjs.js","sources":["../../../../../src/components/DataGrid/DataGridFilters/DateTimePicker/DateTimePicker.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, { useEffect, useState } from \"react\";\nimport { Popover } from \"../../../Popover/Popover\";\nimport classes from \"./DateTimePicker.module.scss\";\nimport { Button } from \"../../../Button/Button\";\nimport { DateRange } from \"react-day-picker\";\nimport {\n  CUSTOM_DATE_RANGE,\n  FIVE_MINUTES,\n  ONE_HOUR,\n  ONE_MINUTE,\n  THIRTY_SECONDS,\n  TWENTY_FOUR_HOURS,\n  formatInputDate\n} from \"./DateTimeService\";\nimport { SideMenu } from \"./SideMenu\";\nimport { addSeconds } from \"date-fns\";\nimport { DateTimePickerInputSection } from \"./DateTimePickerInputSection\";\nimport { DateTimePickerCalendarSection } from \"./DateTimePickerCalendarSection\";\nimport { DateTimeFilter, DateTimeFilterType } from \"../DataGridFilters.interfaces\";\nimport { useRepeatFocus } from \"../../../../hooks/useRepeatFocus\";\n\nexport type DateTimePickerTranslations = {\n  errors: {\n    dateFormatError: string;\n  };\n  previousMonth: string;\n  nextMonth: string;\n  from: string;\n  to: string;\n  cancel: string;\n  apply: string;\n  dateInputPlaceholder: string;\n};\n\nexport type Props = {\n  popoverRef: React.RefObject<HTMLDivElement>;\n  anchorRef?: React.RefObject<HTMLDivElement>;\n  isOpen: boolean;\n  onTagCaptionChange: (value: string) => void;\n  setPickerOpen: (open: boolean) => void;\n  translations?: DateTimePickerTranslations;\n  dateFilterValue?: DateTimeFilter;\n  onDateFilterValueChange?: (dateTimeFilter: DateTimeFilter) => void;\n};\n\nexport type SideMenuItem = {\n  id: DateTimeFilterType;\n  name: string;\n  rangeSeconds?: number;\n};\n\nexport const dateFormat = \"yyyy-mm-dd hh:mm:ss\";\n\nconst sideMenuItems: SideMenuItem[] = [\n  { id: THIRTY_SECONDS, name: \"Last 30 seconds\", rangeSeconds: 30 },\n  { id: ONE_MINUTE, name: \"Last 1 minute\", rangeSeconds: 60 },\n  { id: FIVE_MINUTES, name: \"Last 5 minutes\", rangeSeconds: 300 },\n  { id: ONE_HOUR, name: \"Last 1 hour\", rangeSeconds: 3600 },\n  { id: TWENTY_FOUR_HOURS, name: \"Last 24 hours\", rangeSeconds: 86400 },\n  { id: CUSTOM_DATE_RANGE, name: \"Custom\" }\n];\n\nexport const DateTimePicker = ({\n  anchorRef,\n  popoverRef,\n  isOpen,\n  setPickerOpen,\n  onTagCaptionChange,\n  translations = {\n    errors: {\n      dateFormatError: `The format must be ${dateFormat}`\n    },\n    previousMonth: \"Previous month\",\n    nextMonth: \"Next month\",\n    from: \"From\",\n    to: \"To\",\n    cancel: \"Cancel\",\n    apply: \"Apply\",\n    dateInputPlaceholder: dateFormat\n  },\n  dateFilterValue,\n  onDateFilterValueChange\n}: Props) => {\n  const {\n    errors: { dateFormatError },\n    previousMonth,\n    nextMonth,\n    cancel,\n    from,\n    to,\n    apply,\n    dateInputPlaceholder\n  } = translations;\n  const [selectedDate, setSelectedDate] = useState<DateRange>({\n    from: dateFilterValue?.fromDate ? new Date(dateFilterValue?.fromDate) : undefined,\n    to: dateFilterValue?.toDate ? new Date(dateFilterValue?.toDate) : undefined\n  });\n  const [selectedPredefinedRange, setSelectedPredefinedRange] = useState<DateTimeFilterType>(\n    sideMenuItems[0].id\n  );\n  const [fromDateText, setFromDateText] = useState(\"\");\n  const [toDateText, setToDateText] = useState(\"\");\n  const [fromDateError, setFromDateError] = useState(\"\");\n  const [toDateError, setToDateError] = useState(\"\");\n  useRepeatFocus(popoverRef);\n\n  const disableDateRangePickers = selectedPredefinedRange !== CUSTOM_DATE_RANGE;\n\n  useEffect(() => {\n    if (isOpen) {\n      popoverRef.current?.focus();\n    }\n  }, [isOpen]);\n\n  useEffect(() => {\n    if (dateFilterValue) {\n      const foundItem = sideMenuItems.find(item => item.id === dateFilterValue.type);\n\n      foundItem && onTagCaptionChange(foundItem.name);\n\n      setSelectedPredefinedRange(dateFilterValue.type);\n\n      if (foundItem?.rangeSeconds && dateFilterValue.type !== CUSTOM_DATE_RANGE) {\n        const fromDate = addSeconds(new Date(), -foundItem.rangeSeconds);\n        const toDate = new Date();\n\n        setFromDateText(formatInputDate(fromDate));\n        setToDateText(formatInputDate(toDate));\n        setSelectedDate({ from: fromDate, to: toDate });\n\n        return;\n      }\n\n      dateFilterValue.fromDate &&\n        setFromDateText(formatInputDate(new Date(dateFilterValue.fromDate)));\n\n      dateFilterValue.toDate && setToDateText(formatInputDate(new Date(dateFilterValue.toDate)));\n\n      setSelectedDate({\n        from: dateFilterValue?.fromDate ? new Date(dateFilterValue?.fromDate) : undefined,\n        to: dateFilterValue?.toDate ? new Date(dateFilterValue?.toDate) : undefined\n      });\n    }\n  }, [dateFilterValue]);\n\n  useEffect(() => {\n    if (!dateFilterValue) {\n      isOpen && onSideMenuItemSelect(selectedPredefinedRange);\n    }\n  }, [isOpen, dateFilterValue]);\n\n  const onSideMenuItemSelect = (itemId: DateTimeFilterType) => {\n    setSelectedPredefinedRange(itemId);\n    const foundItem = sideMenuItems.find(item => item.id === itemId);\n    foundItem && onTagCaptionChange(foundItem.name);\n\n    if (itemId !== CUSTOM_DATE_RANGE) {\n      if (!foundItem) {\n        return;\n      }\n\n      if (foundItem.rangeSeconds) {\n        const fromDate = addSeconds(new Date(), -foundItem.rangeSeconds);\n        const toDate = new Date();\n\n        setSelectedDate({ from: fromDate, to: toDate });\n        setFromDateText(formatInputDate(fromDate));\n        setToDateText(formatInputDate(toDate));\n      }\n    }\n  };\n\n  const closeDateTimePicker = () => {\n    setPickerOpen(false);\n  };\n\n  const saveDateTimePicker = () => {\n    onDateFilterValueChange &&\n      onDateFilterValueChange({\n        toDate: selectedDate.to?.toISOString() ?? \"\",\n        fromDate: selectedDate.from?.toISOString() ?? \"\",\n        type: selectedPredefinedRange\n      });\n    setPickerOpen(false);\n  };\n\n  return (\n    <Popover\n      tabIndex={-1}\n      anchorEl={anchorRef}\n      ref={popoverRef}\n      show={isOpen}\n      placement={{ horizontal: \"left\", vertical: \"bottom\" }}\n      transformOrigin={{ horizontal: \"left\", vertical: \"top\" }}\n    >\n      {isOpen && (\n        <div className={classes[\"popover\"]}>\n          <div className={classes[\"content-wrapper\"]}>\n            <div className={classes[\"aside\"]}>\n              <SideMenu\n                sideMenuItems={sideMenuItems}\n                selectedItemId={selectedPredefinedRange}\n                onItemSelect={onSideMenuItemSelect}\n              />\n            </div>\n            <div\n              className={`${classes[\"controls\"]} ${toDateError || fromDateError ? classes[\"has-error\"] : \"\"}`}\n            >\n              <div className={classes[\"controls-panel\"]}>\n                <DateTimePickerInputSection\n                  from={from}\n                  to={to}\n                  dateInputPlaceholder={dateInputPlaceholder}\n                  dateFormatError={dateFormatError}\n                  fromDateText={fromDateText}\n                  toDateText={toDateText}\n                  fromDateError={fromDateError}\n                  toDateError={toDateError}\n                  setSelectedDate={setSelectedDate}\n                  setFromDateText={setFromDateText}\n                  setToDateText={setToDateText}\n                  setFromDateError={setFromDateError}\n                  setToDateError={setToDateError}\n                />\n              </div>\n              <div className={`${classes[\"controls-panel\"]} ${classes[\"set-height\"]}`}>\n                <DateTimePickerCalendarSection\n                  previousMonth={previousMonth}\n                  nextMonth={nextMonth}\n                  selectedDate={selectedDate}\n                  disableDateRangePickers={disableDateRangePickers}\n                  setSelectedDate={setSelectedDate}\n                  setFromDateText={setFromDateText}\n                  setFromDateError={setFromDateError}\n                  setToDateText={setToDateText}\n                  setToDateError={setToDateError}\n                />\n              </div>\n            </div>\n          </div>\n          <div className={classes[\"actions\"]}>\n            <Button variant=\"text\" onClick={closeDateTimePicker}>\n              {cancel}\n            </Button>\n            <Button onClick={saveDateTimePicker}>{apply}</Button>\n          </div>\n        </div>\n      )}\n    </Popover>\n  );\n};\n"],"names":["dateFormat","sideMenuItems","id","THIRTY_SECONDS","name","rangeSeconds","ONE_MINUTE","FIVE_MINUTES","ONE_HOUR","TWENTY_FOUR_HOURS","CUSTOM_DATE_RANGE","anchorRef","popoverRef","isOpen","setPickerOpen","onTagCaptionChange","translations","errors","dateFormatError","previousMonth","nextMonth","from","to","cancel","apply","dateInputPlaceholder","dateFilterValue","onDateFilterValueChange","selectedDate","setSelectedDate","useState","fromDate","Date","toDate","selectedPredefinedRange","setSelectedPredefinedRange","fromDateText","setFromDateText","toDateText","setToDateText","fromDateError","setFromDateError","toDateError","setToDateError","useRepeatFocus","disableDateRangePickers","useEffect","_a","current","focus","foundItem","find","item","type","addSeconds","formatInputDate","onSideMenuItemSelect","itemId","React","createElement","Popover","tabIndex","anchorEl","ref","show","placement","horizontal","vertical","transformOrigin","className","classes","SideMenu","selectedItemId","onItemSelect","DateTimePickerInputSection","default","DateTimePickerCalendarSection","Button","variant","onClick","toISOString","_b"],"mappings":"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"}
+{"version":3,"file":"DateTimePicker.cjs.js","sources":["../../../../../src/components/DataGrid/DataGridFilters/DateTimePicker/DateTimePicker.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, { useEffect, useState } from \"react\";\nimport { Popover } from \"../../../Popover/Popover\";\nimport classes from \"./DateTimePicker.module.scss\";\nimport { Button } from \"../../../Button/Button\";\nimport { DateRange } from \"react-day-picker\";\nimport {\n  CUSTOM_DATE_RANGE,\n  FIVE_MINUTES,\n  ONE_HOUR,\n  ONE_MINUTE,\n  THIRTY_SECONDS,\n  TWENTY_FOUR_HOURS,\n  formatInputDate\n} from \"./DateTimeService\";\nimport { SideMenu } from \"./SideMenu\";\nimport { addSeconds } from \"date-fns\";\nimport { DateTimePickerInputSection } from \"./DateTimePickerInputSection\";\nimport { DateTimePickerCalendarSection } from \"./DateTimePickerCalendarSection\";\nimport { DateTimeFilter, DateTimeFilterType } from \"../DataGridFilters.interfaces\";\nimport { useRepeatFocus } from \"../../../../hooks/useRepeatFocus\";\n\nexport type DateTimePickerTranslations = {\n  errors: {\n    dateFormatError: string;\n  };\n  previousMonth: string;\n  nextMonth: string;\n  from: string;\n  to: string;\n  cancel: string;\n  apply: string;\n  dateInputPlaceholder: string;\n};\n\nexport type Props = {\n  popoverRef: React.RefObject<HTMLDivElement>;\n  anchorRef?: React.RefObject<HTMLDivElement>;\n  isOpen: boolean;\n  onTagCaptionChange: (value: string) => void;\n  setPickerOpen: (open: boolean) => void;\n  translations?: DateTimePickerTranslations;\n  dateFilterValue?: DateTimeFilter;\n  onDateFilterValueChange?: (dateTimeFilter: DateTimeFilter) => void;\n};\n\nexport type SideMenuItem = {\n  id: DateTimeFilterType;\n  name: string;\n  rangeSeconds?: number;\n};\n\nexport const dateFormat = \"yyyy-mm-dd hh:mm:ss\";\n\nconst sideMenuItems: SideMenuItem[] = [\n  { id: THIRTY_SECONDS, name: \"Last 30 seconds\", rangeSeconds: 30 },\n  { id: ONE_MINUTE, name: \"Last 1 minute\", rangeSeconds: 60 },\n  { id: FIVE_MINUTES, name: \"Last 5 minutes\", rangeSeconds: 300 },\n  { id: ONE_HOUR, name: \"Last 1 hour\", rangeSeconds: 3600 },\n  { id: TWENTY_FOUR_HOURS, name: \"Last 24 hours\", rangeSeconds: 86400 },\n  { id: CUSTOM_DATE_RANGE, name: \"Custom\" }\n];\n\nexport const DateTimePicker = ({\n  anchorRef,\n  popoverRef,\n  isOpen,\n  setPickerOpen,\n  onTagCaptionChange,\n  translations = {\n    errors: {\n      dateFormatError: `The format must be ${dateFormat}`\n    },\n    previousMonth: \"Previous month\",\n    nextMonth: \"Next month\",\n    from: \"From\",\n    to: \"To\",\n    cancel: \"Cancel\",\n    apply: \"Apply\",\n    dateInputPlaceholder: dateFormat\n  },\n  dateFilterValue,\n  onDateFilterValueChange\n}: Props) => {\n  const {\n    errors: { dateFormatError },\n    previousMonth,\n    nextMonth,\n    cancel,\n    from,\n    to,\n    apply,\n    dateInputPlaceholder\n  } = translations;\n  const [selectedDate, setSelectedDate] = useState<DateRange>({\n    from: dateFilterValue?.fromDate ? new Date(dateFilterValue?.fromDate) : undefined,\n    to: dateFilterValue?.toDate ? new Date(dateFilterValue?.toDate) : undefined\n  });\n  const [selectedPredefinedRange, setSelectedPredefinedRange] = useState<DateTimeFilterType>(\n    sideMenuItems[0].id\n  );\n  const [fromDateText, setFromDateText] = useState(\"\");\n  const [toDateText, setToDateText] = useState(\"\");\n  const [fromDateError, setFromDateError] = useState(\"\");\n  const [toDateError, setToDateError] = useState(\"\");\n  useRepeatFocus(popoverRef);\n\n  const disableDateRangePickers = selectedPredefinedRange !== CUSTOM_DATE_RANGE;\n\n  useEffect(() => {\n    if (isOpen) {\n      popoverRef.current?.focus();\n    }\n  }, [isOpen]);\n\n  useEffect(() => {\n    if (dateFilterValue) {\n      const foundItem = sideMenuItems.find(item => item.id === dateFilterValue.type);\n\n      foundItem && onTagCaptionChange(foundItem.name);\n\n      setSelectedPredefinedRange(dateFilterValue.type);\n\n      if (foundItem?.rangeSeconds && dateFilterValue.type !== CUSTOM_DATE_RANGE) {\n        const fromDate = addSeconds(new Date(), -foundItem.rangeSeconds);\n        const toDate = new Date();\n\n        setFromDateText(formatInputDate(fromDate));\n        setToDateText(formatInputDate(toDate));\n        setSelectedDate({ from: fromDate, to: toDate });\n\n        return;\n      }\n\n      dateFilterValue.fromDate &&\n        setFromDateText(formatInputDate(new Date(dateFilterValue.fromDate)));\n\n      dateFilterValue.toDate && setToDateText(formatInputDate(new Date(dateFilterValue.toDate)));\n\n      setSelectedDate({\n        from: dateFilterValue?.fromDate ? new Date(dateFilterValue?.fromDate) : undefined,\n        to: dateFilterValue?.toDate ? new Date(dateFilterValue?.toDate) : undefined\n      });\n    }\n  }, [dateFilterValue]);\n\n  useEffect(() => {\n    if (!dateFilterValue) {\n      isOpen && onSideMenuItemSelect(selectedPredefinedRange);\n    }\n  }, [isOpen, dateFilterValue]);\n\n  const onSideMenuItemSelect = (itemId: DateTimeFilterType) => {\n    setSelectedPredefinedRange(itemId);\n    const foundItem = sideMenuItems.find(item => item.id === itemId);\n    foundItem && onTagCaptionChange(foundItem.name);\n\n    if (itemId !== CUSTOM_DATE_RANGE) {\n      if (!foundItem) {\n        return;\n      }\n\n      if (foundItem.rangeSeconds) {\n        const fromDate = addSeconds(new Date(), -foundItem.rangeSeconds);\n        const toDate = new Date();\n\n        setSelectedDate({ from: fromDate, to: toDate });\n        setFromDateText(formatInputDate(fromDate));\n        setToDateText(formatInputDate(toDate));\n      }\n    }\n  };\n\n  const closeDateTimePicker = () => {\n    setPickerOpen(false);\n  };\n\n  const saveDateTimePicker = () => {\n    onDateFilterValueChange &&\n      onDateFilterValueChange({\n        toDate: selectedDate.to?.toISOString() ?? \"\",\n        fromDate: selectedDate.from?.toISOString() ?? \"\",\n        type: selectedPredefinedRange\n      });\n    setPickerOpen(false);\n  };\n\n  return (\n    <Popover\n      tabIndex={-1}\n      anchorEl={anchorRef}\n      ref={popoverRef}\n      show={isOpen}\n      placement={{ horizontal: \"left\", vertical: \"bottom\" }}\n      transformOrigin={{ horizontal: \"left\", vertical: \"top\" }}\n    >\n      <div className={classes[\"popover\"]}>\n        <div className={classes[\"content-wrapper\"]}>\n          <div className={classes[\"aside\"]}>\n            <SideMenu\n              sideMenuItems={sideMenuItems}\n              selectedItemId={selectedPredefinedRange}\n              onItemSelect={onSideMenuItemSelect}\n            />\n          </div>\n          <div\n            className={`${classes[\"controls\"]} ${toDateError || fromDateError ? classes[\"has-error\"] : \"\"}`}\n          >\n            <div className={classes[\"controls-panel\"]}>\n              <DateTimePickerInputSection\n                from={from}\n                to={to}\n                dateInputPlaceholder={dateInputPlaceholder}\n                dateFormatError={dateFormatError}\n                fromDateText={fromDateText}\n                toDateText={toDateText}\n                fromDateError={fromDateError}\n                toDateError={toDateError}\n                setSelectedDate={setSelectedDate}\n                setFromDateText={setFromDateText}\n                setToDateText={setToDateText}\n                setFromDateError={setFromDateError}\n                setToDateError={setToDateError}\n              />\n            </div>\n            <div className={`${classes[\"controls-panel\"]} ${classes[\"set-height\"]}`}>\n              <DateTimePickerCalendarSection\n                previousMonth={previousMonth}\n                nextMonth={nextMonth}\n                selectedDate={selectedDate}\n                disableDateRangePickers={disableDateRangePickers}\n                setSelectedDate={setSelectedDate}\n                setFromDateText={setFromDateText}\n                setFromDateError={setFromDateError}\n                setToDateText={setToDateText}\n                setToDateError={setToDateError}\n              />\n            </div>\n          </div>\n        </div>\n        <div className={classes[\"actions\"]}>\n          <Button variant=\"text\" onClick={closeDateTimePicker}>\n            {cancel}\n          </Button>\n          <Button onClick={saveDateTimePicker}>{apply}</Button>\n        </div>\n      </div>\n    </Popover>\n  );\n};\n"],"names":["dateFormat","sideMenuItems","id","THIRTY_SECONDS","name","rangeSeconds","ONE_MINUTE","FIVE_MINUTES","ONE_HOUR","TWENTY_FOUR_HOURS","CUSTOM_DATE_RANGE","anchorRef","popoverRef","isOpen","setPickerOpen","onTagCaptionChange","translations","errors","dateFormatError","previousMonth","nextMonth","from","to","cancel","apply","dateInputPlaceholder","dateFilterValue","onDateFilterValueChange","selectedDate","setSelectedDate","useState","fromDate","Date","toDate","selectedPredefinedRange","setSelectedPredefinedRange","fromDateText","setFromDateText","toDateText","setToDateText","fromDateError","setFromDateError","toDateError","setToDateError","useRepeatFocus","disableDateRangePickers","useEffect","_a","current","focus","foundItem","find","item","type","addSeconds","formatInputDate","onSideMenuItemSelect","itemId","React","createElement","Popover","tabIndex","anchorEl","ref","show","placement","horizontal","vertical","transformOrigin","className","classes","default","SideMenu","selectedItemId","onItemSelect","DateTimePickerInputSection","DateTimePickerCalendarSection","Button","variant","onClick","toISOString","_b"],"mappings":"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"}

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

@@ -132,7 +132,7 @@ const DateTimePicker = ({
       placement: { horizontal: "left", vertical: "bottom" },
       transformOrigin: { horizontal: "left", vertical: "top" }
     },
-    isOpen && /* @__PURE__ */ React.createElement("div", { className: classes["popover"] }, /* @__PURE__ */ React.createElement("div", { className: classes["content-wrapper"] }, /* @__PURE__ */ React.createElement("div", { className: classes["aside"] }, /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement("div", { className: classes["popover"] }, /* @__PURE__ */ React.createElement("div", { className: classes["content-wrapper"] }, /* @__PURE__ */ React.createElement("div", { className: classes["aside"] }, /* @__PURE__ */ React.createElement(
       SideMenu,
       {
         sideMenuItems,

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

@@ -1 +1 @@
-{"version":3,"file":"DateTimePicker.es.js","sources":["../../../../../src/components/DataGrid/DataGridFilters/DateTimePicker/DateTimePicker.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, { useEffect, useState } from \"react\";\nimport { Popover } from \"../../../Popover/Popover\";\nimport classes from \"./DateTimePicker.module.scss\";\nimport { Button } from \"../../../Button/Button\";\nimport { DateRange } from \"react-day-picker\";\nimport {\n  CUSTOM_DATE_RANGE,\n  FIVE_MINUTES,\n  ONE_HOUR,\n  ONE_MINUTE,\n  THIRTY_SECONDS,\n  TWENTY_FOUR_HOURS,\n  formatInputDate\n} from \"./DateTimeService\";\nimport { SideMenu } from \"./SideMenu\";\nimport { addSeconds } from \"date-fns\";\nimport { DateTimePickerInputSection } from \"./DateTimePickerInputSection\";\nimport { DateTimePickerCalendarSection } from \"./DateTimePickerCalendarSection\";\nimport { DateTimeFilter, DateTimeFilterType } from \"../DataGridFilters.interfaces\";\nimport { useRepeatFocus } from \"../../../../hooks/useRepeatFocus\";\n\nexport type DateTimePickerTranslations = {\n  errors: {\n    dateFormatError: string;\n  };\n  previousMonth: string;\n  nextMonth: string;\n  from: string;\n  to: string;\n  cancel: string;\n  apply: string;\n  dateInputPlaceholder: string;\n};\n\nexport type Props = {\n  popoverRef: React.RefObject<HTMLDivElement>;\n  anchorRef?: React.RefObject<HTMLDivElement>;\n  isOpen: boolean;\n  onTagCaptionChange: (value: string) => void;\n  setPickerOpen: (open: boolean) => void;\n  translations?: DateTimePickerTranslations;\n  dateFilterValue?: DateTimeFilter;\n  onDateFilterValueChange?: (dateTimeFilter: DateTimeFilter) => void;\n};\n\nexport type SideMenuItem = {\n  id: DateTimeFilterType;\n  name: string;\n  rangeSeconds?: number;\n};\n\nexport const dateFormat = \"yyyy-mm-dd hh:mm:ss\";\n\nconst sideMenuItems: SideMenuItem[] = [\n  { id: THIRTY_SECONDS, name: \"Last 30 seconds\", rangeSeconds: 30 },\n  { id: ONE_MINUTE, name: \"Last 1 minute\", rangeSeconds: 60 },\n  { id: FIVE_MINUTES, name: \"Last 5 minutes\", rangeSeconds: 300 },\n  { id: ONE_HOUR, name: \"Last 1 hour\", rangeSeconds: 3600 },\n  { id: TWENTY_FOUR_HOURS, name: \"Last 24 hours\", rangeSeconds: 86400 },\n  { id: CUSTOM_DATE_RANGE, name: \"Custom\" }\n];\n\nexport const DateTimePicker = ({\n  anchorRef,\n  popoverRef,\n  isOpen,\n  setPickerOpen,\n  onTagCaptionChange,\n  translations = {\n    errors: {\n      dateFormatError: `The format must be ${dateFormat}`\n    },\n    previousMonth: \"Previous month\",\n    nextMonth: \"Next month\",\n    from: \"From\",\n    to: \"To\",\n    cancel: \"Cancel\",\n    apply: \"Apply\",\n    dateInputPlaceholder: dateFormat\n  },\n  dateFilterValue,\n  onDateFilterValueChange\n}: Props) => {\n  const {\n    errors: { dateFormatError },\n    previousMonth,\n    nextMonth,\n    cancel,\n    from,\n    to,\n    apply,\n    dateInputPlaceholder\n  } = translations;\n  const [selectedDate, setSelectedDate] = useState<DateRange>({\n    from: dateFilterValue?.fromDate ? new Date(dateFilterValue?.fromDate) : undefined,\n    to: dateFilterValue?.toDate ? new Date(dateFilterValue?.toDate) : undefined\n  });\n  const [selectedPredefinedRange, setSelectedPredefinedRange] = useState<DateTimeFilterType>(\n    sideMenuItems[0].id\n  );\n  const [fromDateText, setFromDateText] = useState(\"\");\n  const [toDateText, setToDateText] = useState(\"\");\n  const [fromDateError, setFromDateError] = useState(\"\");\n  const [toDateError, setToDateError] = useState(\"\");\n  useRepeatFocus(popoverRef);\n\n  const disableDateRangePickers = selectedPredefinedRange !== CUSTOM_DATE_RANGE;\n\n  useEffect(() => {\n    if (isOpen) {\n      popoverRef.current?.focus();\n    }\n  }, [isOpen]);\n\n  useEffect(() => {\n    if (dateFilterValue) {\n      const foundItem = sideMenuItems.find(item => item.id === dateFilterValue.type);\n\n      foundItem && onTagCaptionChange(foundItem.name);\n\n      setSelectedPredefinedRange(dateFilterValue.type);\n\n      if (foundItem?.rangeSeconds && dateFilterValue.type !== CUSTOM_DATE_RANGE) {\n        const fromDate = addSeconds(new Date(), -foundItem.rangeSeconds);\n        const toDate = new Date();\n\n        setFromDateText(formatInputDate(fromDate));\n        setToDateText(formatInputDate(toDate));\n        setSelectedDate({ from: fromDate, to: toDate });\n\n        return;\n      }\n\n      dateFilterValue.fromDate &&\n        setFromDateText(formatInputDate(new Date(dateFilterValue.fromDate)));\n\n      dateFilterValue.toDate && setToDateText(formatInputDate(new Date(dateFilterValue.toDate)));\n\n      setSelectedDate({\n        from: dateFilterValue?.fromDate ? new Date(dateFilterValue?.fromDate) : undefined,\n        to: dateFilterValue?.toDate ? new Date(dateFilterValue?.toDate) : undefined\n      });\n    }\n  }, [dateFilterValue]);\n\n  useEffect(() => {\n    if (!dateFilterValue) {\n      isOpen && onSideMenuItemSelect(selectedPredefinedRange);\n    }\n  }, [isOpen, dateFilterValue]);\n\n  const onSideMenuItemSelect = (itemId: DateTimeFilterType) => {\n    setSelectedPredefinedRange(itemId);\n    const foundItem = sideMenuItems.find(item => item.id === itemId);\n    foundItem && onTagCaptionChange(foundItem.name);\n\n    if (itemId !== CUSTOM_DATE_RANGE) {\n      if (!foundItem) {\n        return;\n      }\n\n      if (foundItem.rangeSeconds) {\n        const fromDate = addSeconds(new Date(), -foundItem.rangeSeconds);\n        const toDate = new Date();\n\n        setSelectedDate({ from: fromDate, to: toDate });\n        setFromDateText(formatInputDate(fromDate));\n        setToDateText(formatInputDate(toDate));\n      }\n    }\n  };\n\n  const closeDateTimePicker = () => {\n    setPickerOpen(false);\n  };\n\n  const saveDateTimePicker = () => {\n    onDateFilterValueChange &&\n      onDateFilterValueChange({\n        toDate: selectedDate.to?.toISOString() ?? \"\",\n        fromDate: selectedDate.from?.toISOString() ?? \"\",\n        type: selectedPredefinedRange\n      });\n    setPickerOpen(false);\n  };\n\n  return (\n    <Popover\n      tabIndex={-1}\n      anchorEl={anchorRef}\n      ref={popoverRef}\n      show={isOpen}\n      placement={{ horizontal: \"left\", vertical: \"bottom\" }}\n      transformOrigin={{ horizontal: \"left\", vertical: \"top\" }}\n    >\n      {isOpen && (\n        <div className={classes[\"popover\"]}>\n          <div className={classes[\"content-wrapper\"]}>\n            <div className={classes[\"aside\"]}>\n              <SideMenu\n                sideMenuItems={sideMenuItems}\n                selectedItemId={selectedPredefinedRange}\n                onItemSelect={onSideMenuItemSelect}\n              />\n            </div>\n            <div\n              className={`${classes[\"controls\"]} ${toDateError || fromDateError ? classes[\"has-error\"] : \"\"}`}\n            >\n              <div className={classes[\"controls-panel\"]}>\n                <DateTimePickerInputSection\n                  from={from}\n                  to={to}\n                  dateInputPlaceholder={dateInputPlaceholder}\n                  dateFormatError={dateFormatError}\n                  fromDateText={fromDateText}\n                  toDateText={toDateText}\n                  fromDateError={fromDateError}\n                  toDateError={toDateError}\n                  setSelectedDate={setSelectedDate}\n                  setFromDateText={setFromDateText}\n                  setToDateText={setToDateText}\n                  setFromDateError={setFromDateError}\n                  setToDateError={setToDateError}\n                />\n              </div>\n              <div className={`${classes[\"controls-panel\"]} ${classes[\"set-height\"]}`}>\n                <DateTimePickerCalendarSection\n                  previousMonth={previousMonth}\n                  nextMonth={nextMonth}\n                  selectedDate={selectedDate}\n                  disableDateRangePickers={disableDateRangePickers}\n                  setSelectedDate={setSelectedDate}\n                  setFromDateText={setFromDateText}\n                  setFromDateError={setFromDateError}\n                  setToDateText={setToDateText}\n                  setToDateError={setToDateError}\n                />\n              </div>\n            </div>\n          </div>\n          <div className={classes[\"actions\"]}>\n            <Button variant=\"text\" onClick={closeDateTimePicker}>\n              {cancel}\n            </Button>\n            <Button onClick={saveDateTimePicker}>{apply}</Button>\n          </div>\n        </div>\n      )}\n    </Popover>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"DateTimePicker.es.js","sources":["../../../../../src/components/DataGrid/DataGridFilters/DateTimePicker/DateTimePicker.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, { useEffect, useState } from \"react\";\nimport { Popover } from \"../../../Popover/Popover\";\nimport classes from \"./DateTimePicker.module.scss\";\nimport { Button } from \"../../../Button/Button\";\nimport { DateRange } from \"react-day-picker\";\nimport {\n  CUSTOM_DATE_RANGE,\n  FIVE_MINUTES,\n  ONE_HOUR,\n  ONE_MINUTE,\n  THIRTY_SECONDS,\n  TWENTY_FOUR_HOURS,\n  formatInputDate\n} from \"./DateTimeService\";\nimport { SideMenu } from \"./SideMenu\";\nimport { addSeconds } from \"date-fns\";\nimport { DateTimePickerInputSection } from \"./DateTimePickerInputSection\";\nimport { DateTimePickerCalendarSection } from \"./DateTimePickerCalendarSection\";\nimport { DateTimeFilter, DateTimeFilterType } from \"../DataGridFilters.interfaces\";\nimport { useRepeatFocus } from \"../../../../hooks/useRepeatFocus\";\n\nexport type DateTimePickerTranslations = {\n  errors: {\n    dateFormatError: string;\n  };\n  previousMonth: string;\n  nextMonth: string;\n  from: string;\n  to: string;\n  cancel: string;\n  apply: string;\n  dateInputPlaceholder: string;\n};\n\nexport type Props = {\n  popoverRef: React.RefObject<HTMLDivElement>;\n  anchorRef?: React.RefObject<HTMLDivElement>;\n  isOpen: boolean;\n  onTagCaptionChange: (value: string) => void;\n  setPickerOpen: (open: boolean) => void;\n  translations?: DateTimePickerTranslations;\n  dateFilterValue?: DateTimeFilter;\n  onDateFilterValueChange?: (dateTimeFilter: DateTimeFilter) => void;\n};\n\nexport type SideMenuItem = {\n  id: DateTimeFilterType;\n  name: string;\n  rangeSeconds?: number;\n};\n\nexport const dateFormat = \"yyyy-mm-dd hh:mm:ss\";\n\nconst sideMenuItems: SideMenuItem[] = [\n  { id: THIRTY_SECONDS, name: \"Last 30 seconds\", rangeSeconds: 30 },\n  { id: ONE_MINUTE, name: \"Last 1 minute\", rangeSeconds: 60 },\n  { id: FIVE_MINUTES, name: \"Last 5 minutes\", rangeSeconds: 300 },\n  { id: ONE_HOUR, name: \"Last 1 hour\", rangeSeconds: 3600 },\n  { id: TWENTY_FOUR_HOURS, name: \"Last 24 hours\", rangeSeconds: 86400 },\n  { id: CUSTOM_DATE_RANGE, name: \"Custom\" }\n];\n\nexport const DateTimePicker = ({\n  anchorRef,\n  popoverRef,\n  isOpen,\n  setPickerOpen,\n  onTagCaptionChange,\n  translations = {\n    errors: {\n      dateFormatError: `The format must be ${dateFormat}`\n    },\n    previousMonth: \"Previous month\",\n    nextMonth: \"Next month\",\n    from: \"From\",\n    to: \"To\",\n    cancel: \"Cancel\",\n    apply: \"Apply\",\n    dateInputPlaceholder: dateFormat\n  },\n  dateFilterValue,\n  onDateFilterValueChange\n}: Props) => {\n  const {\n    errors: { dateFormatError },\n    previousMonth,\n    nextMonth,\n    cancel,\n    from,\n    to,\n    apply,\n    dateInputPlaceholder\n  } = translations;\n  const [selectedDate, setSelectedDate] = useState<DateRange>({\n    from: dateFilterValue?.fromDate ? new Date(dateFilterValue?.fromDate) : undefined,\n    to: dateFilterValue?.toDate ? new Date(dateFilterValue?.toDate) : undefined\n  });\n  const [selectedPredefinedRange, setSelectedPredefinedRange] = useState<DateTimeFilterType>(\n    sideMenuItems[0].id\n  );\n  const [fromDateText, setFromDateText] = useState(\"\");\n  const [toDateText, setToDateText] = useState(\"\");\n  const [fromDateError, setFromDateError] = useState(\"\");\n  const [toDateError, setToDateError] = useState(\"\");\n  useRepeatFocus(popoverRef);\n\n  const disableDateRangePickers = selectedPredefinedRange !== CUSTOM_DATE_RANGE;\n\n  useEffect(() => {\n    if (isOpen) {\n      popoverRef.current?.focus();\n    }\n  }, [isOpen]);\n\n  useEffect(() => {\n    if (dateFilterValue) {\n      const foundItem = sideMenuItems.find(item => item.id === dateFilterValue.type);\n\n      foundItem && onTagCaptionChange(foundItem.name);\n\n      setSelectedPredefinedRange(dateFilterValue.type);\n\n      if (foundItem?.rangeSeconds && dateFilterValue.type !== CUSTOM_DATE_RANGE) {\n        const fromDate = addSeconds(new Date(), -foundItem.rangeSeconds);\n        const toDate = new Date();\n\n        setFromDateText(formatInputDate(fromDate));\n        setToDateText(formatInputDate(toDate));\n        setSelectedDate({ from: fromDate, to: toDate });\n\n        return;\n      }\n\n      dateFilterValue.fromDate &&\n        setFromDateText(formatInputDate(new Date(dateFilterValue.fromDate)));\n\n      dateFilterValue.toDate && setToDateText(formatInputDate(new Date(dateFilterValue.toDate)));\n\n      setSelectedDate({\n        from: dateFilterValue?.fromDate ? new Date(dateFilterValue?.fromDate) : undefined,\n        to: dateFilterValue?.toDate ? new Date(dateFilterValue?.toDate) : undefined\n      });\n    }\n  }, [dateFilterValue]);\n\n  useEffect(() => {\n    if (!dateFilterValue) {\n      isOpen && onSideMenuItemSelect(selectedPredefinedRange);\n    }\n  }, [isOpen, dateFilterValue]);\n\n  const onSideMenuItemSelect = (itemId: DateTimeFilterType) => {\n    setSelectedPredefinedRange(itemId);\n    const foundItem = sideMenuItems.find(item => item.id === itemId);\n    foundItem && onTagCaptionChange(foundItem.name);\n\n    if (itemId !== CUSTOM_DATE_RANGE) {\n      if (!foundItem) {\n        return;\n      }\n\n      if (foundItem.rangeSeconds) {\n        const fromDate = addSeconds(new Date(), -foundItem.rangeSeconds);\n        const toDate = new Date();\n\n        setSelectedDate({ from: fromDate, to: toDate });\n        setFromDateText(formatInputDate(fromDate));\n        setToDateText(formatInputDate(toDate));\n      }\n    }\n  };\n\n  const closeDateTimePicker = () => {\n    setPickerOpen(false);\n  };\n\n  const saveDateTimePicker = () => {\n    onDateFilterValueChange &&\n      onDateFilterValueChange({\n        toDate: selectedDate.to?.toISOString() ?? \"\",\n        fromDate: selectedDate.from?.toISOString() ?? \"\",\n        type: selectedPredefinedRange\n      });\n    setPickerOpen(false);\n  };\n\n  return (\n    <Popover\n      tabIndex={-1}\n      anchorEl={anchorRef}\n      ref={popoverRef}\n      show={isOpen}\n      placement={{ horizontal: \"left\", vertical: \"bottom\" }}\n      transformOrigin={{ horizontal: \"left\", vertical: \"top\" }}\n    >\n      <div className={classes[\"popover\"]}>\n        <div className={classes[\"content-wrapper\"]}>\n          <div className={classes[\"aside\"]}>\n            <SideMenu\n              sideMenuItems={sideMenuItems}\n              selectedItemId={selectedPredefinedRange}\n              onItemSelect={onSideMenuItemSelect}\n            />\n          </div>\n          <div\n            className={`${classes[\"controls\"]} ${toDateError || fromDateError ? classes[\"has-error\"] : \"\"}`}\n          >\n            <div className={classes[\"controls-panel\"]}>\n              <DateTimePickerInputSection\n                from={from}\n                to={to}\n                dateInputPlaceholder={dateInputPlaceholder}\n                dateFormatError={dateFormatError}\n                fromDateText={fromDateText}\n                toDateText={toDateText}\n                fromDateError={fromDateError}\n                toDateError={toDateError}\n                setSelectedDate={setSelectedDate}\n                setFromDateText={setFromDateText}\n                setToDateText={setToDateText}\n                setFromDateError={setFromDateError}\n                setToDateError={setToDateError}\n              />\n            </div>\n            <div className={`${classes[\"controls-panel\"]} ${classes[\"set-height\"]}`}>\n              <DateTimePickerCalendarSection\n                previousMonth={previousMonth}\n                nextMonth={nextMonth}\n                selectedDate={selectedDate}\n                disableDateRangePickers={disableDateRangePickers}\n                setSelectedDate={setSelectedDate}\n                setFromDateText={setFromDateText}\n                setFromDateError={setFromDateError}\n                setToDateText={setToDateText}\n                setToDateError={setToDateError}\n              />\n            </div>\n          </div>\n        </div>\n        <div className={classes[\"actions\"]}>\n          <Button variant=\"text\" onClick={closeDateTimePicker}>\n            {cancel}\n          </Button>\n          <Button onClick={saveDateTimePicker}>{apply}</Button>\n        </div>\n      </div>\n    </Popover>\n  );\n};\n"],"names":[],"mappings":"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"}

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

@@ -1,3 +1,3 @@
-!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('/*!\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 */.DateTimePicker_popover_EsL6T{display:flex;flex-direction:column;align-items:flex-start;min-width:40rem}.DateTimePicker_popover_EsL6T .DateTimePicker_content-wrapper_EsL6T{display:flex}.DateTimePicker_popover_EsL6T .DateTimePicker_aside_EsL6T{display:flex;flex-direction:column;width:9.25rem;border-right:1px solid var(--color-blue-grey100)}.DateTimePicker_popover_EsL6T .DateTimePicker_aside-menu_EsL6T{margin:.5rem 0;padding:0;white-space:nowrap;list-style:none}.DateTimePicker_popover_EsL6T .DateTimePicker_aside-menu-item_EsL6T{height:2rem}.DateTimePicker_popover_EsL6T .DateTimePicker_aside-menu-item_EsL6T button{padding:.5rem .75rem;font-size:var(--font-size-sub);line-height:1.33;text-align:start}.DateTimePicker_popover_EsL6T .DateTimePicker_controls_EsL6T{display:flex;flex-direction:column;gap:2rem;flex-grow:1;padding:2rem 2rem 0}.DateTimePicker_popover_EsL6T .DateTimePicker_controls_EsL6T.DateTimePicker_has-error_EsL6T{gap:calc(2rem - 15.5681px)}.DateTimePicker_popover_EsL6T .DateTimePicker_controls-panel_EsL6T{display:flex;gap:2rem}.DateTimePicker_popover_EsL6T .DateTimePicker_controls-panel_EsL6T>*{flex-grow:1}.DateTimePicker_popover_EsL6T .DateTimePicker_controls-panel_EsL6T.DateTimePicker_set-height_EsL6T{min-height:17.5rem}.DateTimePicker_popover_EsL6T .DateTimePicker_actions_EsL6T{display:flex;justify-content:space-between;gap:1rem;flex-grow:1;width:calc(100% - 3rem);border-top:1px solid var(--color-blue-grey100);padding:1rem 1.5rem}.DateTimePicker_popover_EsL6T .DateTimePicker_input_EsL6T{margin-top:0;max-width:14rem}.DateTimePicker_popover_EsL6T .DateTimePicker_input_EsL6T label{font-size:var(--font-size-sub)}.DateTimePicker_popover_EsL6T .DateTimePicker_nav_EsL6T{position:absolute}.DateTimePicker_popover_EsL6T .DateTimePicker_next-button_EsL6T{position:absolute;left:27.3125rem;top:0}.DateTimePicker_popover_EsL6T .DateTimePicker_prev-button_EsL6T{position:absolute;top:0}.DateTimePicker_popover_EsL6T .DateTimePicker_month-caption_EsL6T{width:100%;height:calc(2.5 * var(--font-size));margin:0;padding:.75rem 0;font-size:var(--font-size-sub);font-weight:500;line-height:1.33;text-align:center}.DateTimePicker_error-message_EsL6T{font-size:var(--font-size-small)}')),document.head.appendChild(e)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}}();
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="DateTimePicker_popover_EsL6T",t="DateTimePicker_aside_EsL6T",i="DateTimePicker_controls_EsL6T",r="DateTimePicker_actions_EsL6T",s="DateTimePicker_input_EsL6T",o="DateTimePicker_nav_EsL6T",a={popover:e,"content-wrapper":"DateTimePicker_content-wrapper_EsL6T",aside:t,"aside-menu":"DateTimePicker_aside-menu_EsL6T","aside-menu-item":"DateTimePicker_aside-menu-item_EsL6T",controls:i,"has-error":"DateTimePicker_has-error_EsL6T","controls-panel":"DateTimePicker_controls-panel_EsL6T","set-height":"DateTimePicker_set-height_EsL6T",actions:r,input:s,nav:o,"next-button":"DateTimePicker_next-button_EsL6T","prev-button":"DateTimePicker_prev-button_EsL6T","month-caption":"DateTimePicker_month-caption_EsL6T","error-message":"DateTimePicker_error-message_EsL6T"};exports.actions=r,exports.aside=t,exports.controls=i,exports.default=a,exports.input=s,exports.nav=o,exports.popover=e;
+!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('/*!\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 */.DateTimePicker_popover_HO9cY{display:flex;flex-direction:column;align-items:flex-start;min-width:40rem}.DateTimePicker_popover_HO9cY .DateTimePicker_content-wrapper_HO9cY{display:flex}.DateTimePicker_popover_HO9cY .DateTimePicker_aside_HO9cY{display:flex;flex-direction:column;width:9.25rem;border-right:1px solid var(--color-blue-grey100)}.DateTimePicker_popover_HO9cY .DateTimePicker_aside-menu_HO9cY{margin:.5rem 0;padding:0;white-space:nowrap;list-style:none}.DateTimePicker_popover_HO9cY .DateTimePicker_aside-menu-item_HO9cY{height:2rem}.DateTimePicker_popover_HO9cY .DateTimePicker_aside-menu-item_HO9cY button{padding:.5rem .75rem;font-size:var(--font-size-sub);line-height:1.33;text-align:start}.DateTimePicker_popover_HO9cY .DateTimePicker_controls_HO9cY{display:flex;flex-direction:column;gap:2rem;flex-grow:1;padding:2rem 2rem 0}.DateTimePicker_popover_HO9cY .DateTimePicker_controls_HO9cY.DateTimePicker_has-error_HO9cY{gap:calc(2rem - 15.5681px)}.DateTimePicker_popover_HO9cY .DateTimePicker_controls-panel_HO9cY{display:flex;gap:2rem}.DateTimePicker_popover_HO9cY .DateTimePicker_controls-panel_HO9cY>*{flex-grow:1}.DateTimePicker_popover_HO9cY .DateTimePicker_controls-panel_HO9cY.DateTimePicker_set-height_HO9cY{min-height:17.5rem}.DateTimePicker_popover_HO9cY .DateTimePicker_actions_HO9cY{display:flex;justify-content:space-between;gap:1rem;flex-grow:1;width:calc(100% - 3rem);border-top:1px solid var(--color-blue-grey100);padding:1rem 1.5rem}.DateTimePicker_popover_HO9cY .DateTimePicker_input_HO9cY{margin-top:0;max-width:14rem}.DateTimePicker_popover_HO9cY .DateTimePicker_input_HO9cY label{font-size:var(--font-size-sub)}.DateTimePicker_popover_HO9cY .DateTimePicker_nav_HO9cY{position:absolute}.DateTimePicker_popover_HO9cY .DateTimePicker_next-button_HO9cY{position:absolute;left:27.3125rem;top:0}.DateTimePicker_popover_HO9cY .DateTimePicker_prev-button_HO9cY{position:absolute;top:0}.DateTimePicker_popover_HO9cY .DateTimePicker_month-caption_HO9cY{width:100%;height:calc(2.5 * var(--font-size));margin:0;padding:.75rem 0;font-size:var(--font-size-sub);font-weight:500;line-height:1.33;text-align:center}.DateTimePicker_error-message_HO9cY{font-size:var(--font-size-small)}')),document.head.appendChild(e)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}}();
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="DateTimePicker_popover_HO9cY",t="DateTimePicker_aside_HO9cY",i="DateTimePicker_controls_HO9cY",r="DateTimePicker_actions_HO9cY",c="DateTimePicker_input_HO9cY",o="DateTimePicker_nav_HO9cY",a={popover:e,"content-wrapper":"DateTimePicker_content-wrapper_HO9cY",aside:t,"aside-menu":"DateTimePicker_aside-menu_HO9cY","aside-menu-item":"DateTimePicker_aside-menu-item_HO9cY",controls:i,"has-error":"DateTimePicker_has-error_HO9cY","controls-panel":"DateTimePicker_controls-panel_HO9cY","set-height":"DateTimePicker_set-height_HO9cY",actions:r,input:c,nav:o,"next-button":"DateTimePicker_next-button_HO9cY","prev-button":"DateTimePicker_prev-button_HO9cY","month-caption":"DateTimePicker_month-caption_HO9cY","error-message":"DateTimePicker_error-message_HO9cY"};exports.actions=r,exports.aside=t,exports.controls=i,exports.default=a,exports.input=c,exports.nav=o,exports.popover=e;
 //# sourceMappingURL=DateTimePicker.module.scss.cjs.js.map

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

@@ -1,27 +1,27 @@
-!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('/*!\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 */.DateTimePicker_popover_EsL6T{display:flex;flex-direction:column;align-items:flex-start;min-width:40rem}.DateTimePicker_popover_EsL6T .DateTimePicker_content-wrapper_EsL6T{display:flex}.DateTimePicker_popover_EsL6T .DateTimePicker_aside_EsL6T{display:flex;flex-direction:column;width:9.25rem;border-right:1px solid var(--color-blue-grey100)}.DateTimePicker_popover_EsL6T .DateTimePicker_aside-menu_EsL6T{margin:.5rem 0;padding:0;white-space:nowrap;list-style:none}.DateTimePicker_popover_EsL6T .DateTimePicker_aside-menu-item_EsL6T{height:2rem}.DateTimePicker_popover_EsL6T .DateTimePicker_aside-menu-item_EsL6T button{padding:.5rem .75rem;font-size:var(--font-size-sub);line-height:1.33;text-align:start}.DateTimePicker_popover_EsL6T .DateTimePicker_controls_EsL6T{display:flex;flex-direction:column;gap:2rem;flex-grow:1;padding:2rem 2rem 0}.DateTimePicker_popover_EsL6T .DateTimePicker_controls_EsL6T.DateTimePicker_has-error_EsL6T{gap:calc(2rem - 15.5681px)}.DateTimePicker_popover_EsL6T .DateTimePicker_controls-panel_EsL6T{display:flex;gap:2rem}.DateTimePicker_popover_EsL6T .DateTimePicker_controls-panel_EsL6T>*{flex-grow:1}.DateTimePicker_popover_EsL6T .DateTimePicker_controls-panel_EsL6T.DateTimePicker_set-height_EsL6T{min-height:17.5rem}.DateTimePicker_popover_EsL6T .DateTimePicker_actions_EsL6T{display:flex;justify-content:space-between;gap:1rem;flex-grow:1;width:calc(100% - 3rem);border-top:1px solid var(--color-blue-grey100);padding:1rem 1.5rem}.DateTimePicker_popover_EsL6T .DateTimePicker_input_EsL6T{margin-top:0;max-width:14rem}.DateTimePicker_popover_EsL6T .DateTimePicker_input_EsL6T label{font-size:var(--font-size-sub)}.DateTimePicker_popover_EsL6T .DateTimePicker_nav_EsL6T{position:absolute}.DateTimePicker_popover_EsL6T .DateTimePicker_next-button_EsL6T{position:absolute;left:27.3125rem;top:0}.DateTimePicker_popover_EsL6T .DateTimePicker_prev-button_EsL6T{position:absolute;top:0}.DateTimePicker_popover_EsL6T .DateTimePicker_month-caption_EsL6T{width:100%;height:calc(2.5 * var(--font-size));margin:0;padding:.75rem 0;font-size:var(--font-size-sub);font-weight:500;line-height:1.33;text-align:center}.DateTimePicker_error-message_EsL6T{font-size:var(--font-size-small)}')),document.head.appendChild(e)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}}();
-const popover = "DateTimePicker_popover_EsL6T";
-const aside = "DateTimePicker_aside_EsL6T";
-const controls = "DateTimePicker_controls_EsL6T";
-const actions = "DateTimePicker_actions_EsL6T";
-const input = "DateTimePicker_input_EsL6T";
-const nav = "DateTimePicker_nav_EsL6T";
+!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('/*!\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 */.DateTimePicker_popover_HO9cY{display:flex;flex-direction:column;align-items:flex-start;min-width:40rem}.DateTimePicker_popover_HO9cY .DateTimePicker_content-wrapper_HO9cY{display:flex}.DateTimePicker_popover_HO9cY .DateTimePicker_aside_HO9cY{display:flex;flex-direction:column;width:9.25rem;border-right:1px solid var(--color-blue-grey100)}.DateTimePicker_popover_HO9cY .DateTimePicker_aside-menu_HO9cY{margin:.5rem 0;padding:0;white-space:nowrap;list-style:none}.DateTimePicker_popover_HO9cY .DateTimePicker_aside-menu-item_HO9cY{height:2rem}.DateTimePicker_popover_HO9cY .DateTimePicker_aside-menu-item_HO9cY button{padding:.5rem .75rem;font-size:var(--font-size-sub);line-height:1.33;text-align:start}.DateTimePicker_popover_HO9cY .DateTimePicker_controls_HO9cY{display:flex;flex-direction:column;gap:2rem;flex-grow:1;padding:2rem 2rem 0}.DateTimePicker_popover_HO9cY .DateTimePicker_controls_HO9cY.DateTimePicker_has-error_HO9cY{gap:calc(2rem - 15.5681px)}.DateTimePicker_popover_HO9cY .DateTimePicker_controls-panel_HO9cY{display:flex;gap:2rem}.DateTimePicker_popover_HO9cY .DateTimePicker_controls-panel_HO9cY>*{flex-grow:1}.DateTimePicker_popover_HO9cY .DateTimePicker_controls-panel_HO9cY.DateTimePicker_set-height_HO9cY{min-height:17.5rem}.DateTimePicker_popover_HO9cY .DateTimePicker_actions_HO9cY{display:flex;justify-content:space-between;gap:1rem;flex-grow:1;width:calc(100% - 3rem);border-top:1px solid var(--color-blue-grey100);padding:1rem 1.5rem}.DateTimePicker_popover_HO9cY .DateTimePicker_input_HO9cY{margin-top:0;max-width:14rem}.DateTimePicker_popover_HO9cY .DateTimePicker_input_HO9cY label{font-size:var(--font-size-sub)}.DateTimePicker_popover_HO9cY .DateTimePicker_nav_HO9cY{position:absolute}.DateTimePicker_popover_HO9cY .DateTimePicker_next-button_HO9cY{position:absolute;left:27.3125rem;top:0}.DateTimePicker_popover_HO9cY .DateTimePicker_prev-button_HO9cY{position:absolute;top:0}.DateTimePicker_popover_HO9cY .DateTimePicker_month-caption_HO9cY{width:100%;height:calc(2.5 * var(--font-size));margin:0;padding:.75rem 0;font-size:var(--font-size-sub);font-weight:500;line-height:1.33;text-align:center}.DateTimePicker_error-message_HO9cY{font-size:var(--font-size-small)}')),document.head.appendChild(e)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}}();
+const popover = "DateTimePicker_popover_HO9cY";
+const aside = "DateTimePicker_aside_HO9cY";
+const controls = "DateTimePicker_controls_HO9cY";
+const actions = "DateTimePicker_actions_HO9cY";
+const input = "DateTimePicker_input_HO9cY";
+const nav = "DateTimePicker_nav_HO9cY";
 const classes = {
   popover,
-  "content-wrapper": "DateTimePicker_content-wrapper_EsL6T",
+  "content-wrapper": "DateTimePicker_content-wrapper_HO9cY",
   aside,
-  "aside-menu": "DateTimePicker_aside-menu_EsL6T",
-  "aside-menu-item": "DateTimePicker_aside-menu-item_EsL6T",
+  "aside-menu": "DateTimePicker_aside-menu_HO9cY",
+  "aside-menu-item": "DateTimePicker_aside-menu-item_HO9cY",
   controls,
-  "has-error": "DateTimePicker_has-error_EsL6T",
-  "controls-panel": "DateTimePicker_controls-panel_EsL6T",
-  "set-height": "DateTimePicker_set-height_EsL6T",
+  "has-error": "DateTimePicker_has-error_HO9cY",
+  "controls-panel": "DateTimePicker_controls-panel_HO9cY",
+  "set-height": "DateTimePicker_set-height_HO9cY",
   actions,
   input,
   nav,
-  "next-button": "DateTimePicker_next-button_EsL6T",
-  "prev-button": "DateTimePicker_prev-button_EsL6T",
-  "month-caption": "DateTimePicker_month-caption_EsL6T",
-  "error-message": "DateTimePicker_error-message_EsL6T"
+  "next-button": "DateTimePicker_next-button_HO9cY",
+  "prev-button": "DateTimePicker_prev-button_HO9cY",
+  "month-caption": "DateTimePicker_month-caption_HO9cY",
+  "error-message": "DateTimePicker_error-message_HO9cY"
 };
 export {
   actions,

package/dist/components/DataGrid/DataGridHeader/DataGridHeader.module.scss.cjs.js

@@ -1,3 +1,3 @@
-!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('/*!\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 */.DataGridHeader_row_EsL6T{height:3.25rem;background-color:var(--color-blue-grey25);position:relative;border-top:2px solid var(--light-grey-border)}.DataGridHeader_row_EsL6T:after{content:"";position:absolute;width:100%;left:0;bottom:0;border-bottom:2px solid var(--light-grey-border)}.DataGridHeader_context-menu_EsL6T{width:4.125rem;box-sizing:border-box}')),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}}();
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="DataGridHeader_row_EsL6T",t={row:e,"context-menu":"DataGridHeader_context-menu_EsL6T"};exports.default=t,exports.row=e;
+!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('/*!\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 */.DataGridHeader_row_HO9cY{height:3.25rem;background-color:var(--color-blue-grey25);position:relative;border-top:2px solid var(--light-grey-border)}.DataGridHeader_row_HO9cY:after{content:"";position:absolute;width:100%;left:0;bottom:0;border-bottom:2px solid var(--light-grey-border)}.DataGridHeader_context-menu_HO9cY{width:4.125rem;box-sizing:border-box}')),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}}();
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="DataGridHeader_row_HO9cY",t={row:e,"context-menu":"DataGridHeader_context-menu_HO9cY"};exports.default=t,exports.row=e;
 //# sourceMappingURL=DataGridHeader.module.scss.cjs.js.map

package/dist/components/DataGrid/DataGridHeader/DataGridHeader.module.scss.es.js

@@ -1,8 +1,8 @@
-!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('/*!\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 */.DataGridHeader_row_EsL6T{height:3.25rem;background-color:var(--color-blue-grey25);position:relative;border-top:2px solid var(--light-grey-border)}.DataGridHeader_row_EsL6T:after{content:"";position:absolute;width:100%;left:0;bottom:0;border-bottom:2px solid var(--light-grey-border)}.DataGridHeader_context-menu_EsL6T{width:4.125rem;box-sizing:border-box}')),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}}();
-const row = "DataGridHeader_row_EsL6T";
+!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('/*!\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 */.DataGridHeader_row_HO9cY{height:3.25rem;background-color:var(--color-blue-grey25);position:relative;border-top:2px solid var(--light-grey-border)}.DataGridHeader_row_HO9cY:after{content:"";position:absolute;width:100%;left:0;bottom:0;border-bottom:2px solid var(--light-grey-border)}.DataGridHeader_context-menu_HO9cY{width:4.125rem;box-sizing:border-box}')),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}}();
+const row = "DataGridHeader_row_HO9cY";
 const classes = {
   row,
-  "context-menu": "DataGridHeader_context-menu_EsL6T"
+  "context-menu": "DataGridHeader_context-menu_HO9cY"
 };
 export {
   classes as default,