@onewelcome/react-lib-components 9.8.0 → 10.0.0

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

@@ -0,0 +1,17 @@
+const DefaultOperators = {
+  is: { name: "is", allowEmptyValues: false },
+  isNot: { name: "is not", allowEmptyValues: false },
+  contains: { name: "contains", allowEmptyValues: false },
+  doesNotContain: { name: "does not contain", allowEmptyValues: false },
+  isEmpty: { name: "is empty", allowEmptyValues: true }
+};
+var ValueSelectType = /* @__PURE__ */ ((ValueSelectType2) => {
+  ValueSelectType2["single"] = "single";
+  ValueSelectType2["multi"] = "multi";
+  return ValueSelectType2;
+})(ValueSelectType || {});
+export {
+  DefaultOperators,
+  ValueSelectType
+};
+//# sourceMappingURL=DataGridFilters.interfaces.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataGridFilters.interfaces.es.js","sources":["../../../../src/components/DataGrid/DataGridFilters/DataGridFilters.interfaces.ts"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nexport interface FilterOperator {\n  name: string;\n  allowEmptyValues: boolean;\n}\n\nexport interface Filter {\n  id: string;\n  column: string;\n  operator: FilterOperator | null;\n  value: string[];\n}\n\nexport type FiltersAction =\n  | {\n      type: \"add\";\n      payload: Filter;\n    }\n  | {\n      type: \"edit\";\n      payload: Filter;\n    }\n  | {\n      type: \"remove\";\n      payload: { id: string };\n    }\n  | {\n      type: \"reset\";\n      payload: Filter[];\n    }\n  | {\n      type: \"clear\";\n    };\n\nexport type FiltersState = {\n  filters: Filter[];\n};\n\nexport type FilterEditorMode = \"ADD\" | \"EDIT\" | \"ADD_DATE\";\n\nexport const DefaultOperators: Record<string, FilterOperator> = {\n  is: { name: \"is\", allowEmptyValues: false },\n  isNot: { name: \"is not\", allowEmptyValues: false },\n  contains: { name: \"contains\", allowEmptyValues: false },\n  doesNotContain: { name: \"does not contain\", allowEmptyValues: false },\n  isEmpty: { name: \"is empty\", allowEmptyValues: true }\n};\n\nexport interface DataGridColumnMetadata {\n  name: string;\n  headline: string;\n  operators?: FilterOperator[];\n  defaultValues?: string[];\n  disableAddNew?: boolean;\n  allowSingleFilterOnly?: boolean;\n  valueSelectType?: ValueSelectType;\n}\n\nexport interface PopoverTranslations {\n  columnSelectLabel?: string;\n  operatorSelectLabel?: string;\n  valueSelectLabel?: string;\n  addNewValueLabel?: string;\n  addNewValueButtonTitle?: string;\n  submitButtonTitle?: string;\n  cancelButtonTitle?: string;\n}\n\nexport interface TagTranslations {\n  addButtonCaption?: string;\n  or?: string;\n  other?: string;\n  dateIs?: string;\n}\n\nexport interface ToolbarTranslations {\n  clearButtonCaption?: string;\n}\n\nexport interface FiltersTranslations {\n  toolbar?: ToolbarTranslations;\n  tag?: TagTranslations;\n  popover?: PopoverTranslations;\n}\n\nexport interface KeyValuePair<TKey = string, TValue = string> {\n  key: TKey;\n  value: TValue;\n}\n\nexport type DateTimeFilterType =\n  | \"THIRTY_SECONDS\"\n  | \"ONE_MINUTE\"\n  | \"FIVE_MINUTES\"\n  | \"ONE_HOUR\"\n  | \"TWENTY_FOUR_HOURS\"\n  | \"CUSTOM\";\n\nexport interface DateTimeFilter {\n  fromDate: string;\n  toDate: string;\n  type: DateTimeFilterType;\n}\n\nexport enum ValueSelectType {\n  single = \"single\",\n  multi = \"multi\"\n}\n"],"names":["ValueSelectType"],"mappings":"AAuDO,MAAM,mBAAmD;AAAA,EAC9D,IAAI,EAAE,MAAM,MAAM,kBAAkB,MAAM;AAAA,EAC1C,OAAO,EAAE,MAAM,UAAU,kBAAkB,MAAM;AAAA,EACjD,UAAU,EAAE,MAAM,YAAY,kBAAkB,MAAM;AAAA,EACtD,gBAAgB,EAAE,MAAM,oBAAoB,kBAAkB,MAAM;AAAA,EACpE,SAAS,EAAE,MAAM,YAAY,kBAAkB,KAAK;AACtD;AA0DY,IAAA,oCAAAA,qBAAL;AACLA,mBAAA,QAAS,IAAA;AACTA,mBAAA,OAAQ,IAAA;AAFEA,SAAAA;AAAA,GAAA,mBAAA,CAAA,CAAA;"}

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),r=require("../../Form/Wrapper/InputWrapper/InputWrapper.cjs.js"),a=require("../../Icon/Icon.cjs.js"),c=require("./DataGridToolbar.module.scss.cjs.js"),t=require("../../../hooks/useDebouncedCallback.cjs.js");exports.DataGridSearchbar=({onSearch:l,initialSearchValue:s,debounceTime:o,inputWrapperProps:u,placeholder:n})=>{const[p,i]=e.useState(s??""),d=t.useDebouncedCallback(l,o??500),b=o?d:l;return e.useEffect((()=>{s&&i(s)}),[s]),e.createElement(r.InputWrapper,{...u,className:`${c.default.searchbar} ${(null==u?void 0:u.className)??""}`,label:(null==u?void 0:u.label)??"",onChange:e=>{b(e.target.value),i(e.target.value)},type:"search",name:(null==u?void 0:u.name)??"searchbar",value:p,inputProps:{...null==u?void 0:u.inputProps,type:"search",prefix:e.createElement(a.Icon,{icon:a.Icons.Search}),placeholder:n??"Search items"}})};
+//# sourceMappingURL=DataGridSearchbar.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataGridSearchbar.cjs.js","sources":["../../../../src/components/DataGrid/DataGridFilters/DataGridSearchbar.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, { useState, useEffect } from \"react\";\nimport {\n  InputWrapper,\n  Props as InputWrapperProps\n} from \"../../Form/Wrapper/InputWrapper/InputWrapper\";\nimport { Icon, Icons } from \"../../Icon/Icon\";\nimport classes from \"./DataGridToolbar.module.scss\";\nimport { useDebouncedCallback } from \"../../../hooks/useDebouncedCallback\";\n\nexport interface DataGridSearchbarProps {\n  onSearch: (value: string) => void;\n  initialSearchValue?: string;\n  debounceTime?: number;\n  placeholder?: string;\n  inputWrapperProps?: InputWrapperProps;\n}\n\nexport const DataGridSearchbar = ({\n  onSearch,\n  initialSearchValue,\n  debounceTime,\n  inputWrapperProps,\n  placeholder\n}: DataGridSearchbarProps) => {\n  const [search, setSearch] = useState(initialSearchValue ?? \"\");\n  const debouncedCallback = useDebouncedCallback(onSearch, debounceTime ?? 500);\n  const onSearchCallback = debounceTime ? debouncedCallback : onSearch;\n\n  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    onSearchCallback(event.target.value);\n    setSearch(event.target.value);\n  };\n\n  useEffect(() => {\n    initialSearchValue && setSearch(initialSearchValue);\n  }, [initialSearchValue]);\n\n  return (\n    <InputWrapper\n      {...inputWrapperProps}\n      className={`${classes[\"searchbar\"]} ${inputWrapperProps?.className ?? \"\"}`}\n      label={inputWrapperProps?.label ?? \"\"}\n      onChange={onChange}\n      type=\"search\"\n      name={inputWrapperProps?.name ?? \"searchbar\"}\n      value={search}\n      inputProps={{\n        ...inputWrapperProps?.inputProps,\n        type: \"search\",\n        prefix: <Icon icon={Icons.Search} />,\n        placeholder: placeholder ?? \"Search items\"\n      }}\n    ></InputWrapper>\n  );\n};\n"],"names":["onSearch","initialSearchValue","debounceTime","inputWrapperProps","placeholder","search","setSearch","useState","debouncedCallback","useDebouncedCallback","onSearchCallback","useEffect","React","createElement","InputWrapper","className","classes","label","onChange","event","target","value","type","name","inputProps","prefix","Icon","icon","Icons","Search"],"mappings":"kVAiCiC,EAC/BA,WACAC,qBACAC,eACAC,oBACAC,kBAEA,MAAOC,EAAQC,GAAaC,EAAAA,SAASN,GAAsB,IACrDO,EAAoBC,EAAAA,qBAAqBT,EAAUE,GAAgB,KACnEQ,EAAmBR,EAAeM,EAAoBR,EAY1D,OALFW,EAAAA,WAAU,KACRV,GAAsBK,EAAUL,EAAkB,GACjD,CAACA,IAGFW,EAAAC,cAACC,EAAAA,aAAA,IACKX,EACJY,UAAW,GAAGC,EAAAA,QAAmB,cAAwB,MAAnBb,OAAmB,EAAAA,EAAAY,YAAa,KACtEE,aAAOd,WAAmBc,QAAS,GACnCC,SAdcC,IACCT,EAAAS,EAAMC,OAAOC,OACpBf,EAAAa,EAAMC,OAAOC,MAAK,EAa1BC,KAAK,SACLC,YAAMpB,WAAmBoB,OAAQ,YACjCF,MAAOhB,EACPmB,WAAY,IACY,MAAnBrB,OAAmB,EAAAA,EAAAqB,WACtBF,KAAM,SACNG,OAAQb,EAAAC,cAACa,EAAAA,KAAK,CAAAC,KAAMC,EAAAA,MAAMC,SAC1BzB,YAAaA,GAAe,iBAE/B"}

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

@@ -0,0 +1,45 @@
+import React, { useState, useEffect } from "react";
+import { InputWrapper } from "../../Form/Wrapper/InputWrapper/InputWrapper.es.js";
+import { Icon, Icons } from "../../Icon/Icon.es.js";
+import classes from "./DataGridToolbar.module.scss.es.js";
+import { useDebouncedCallback } from "../../../hooks/useDebouncedCallback.es.js";
+const DataGridSearchbar = ({
+  onSearch,
+  initialSearchValue,
+  debounceTime,
+  inputWrapperProps,
+  placeholder
+}) => {
+  const [search, setSearch] = useState(initialSearchValue ?? "");
+  const debouncedCallback = useDebouncedCallback(onSearch, debounceTime ?? 500);
+  const onSearchCallback = debounceTime ? debouncedCallback : onSearch;
+  const onChange = (event) => {
+    onSearchCallback(event.target.value);
+    setSearch(event.target.value);
+  };
+  useEffect(() => {
+    initialSearchValue && setSearch(initialSearchValue);
+  }, [initialSearchValue]);
+  return /* @__PURE__ */ React.createElement(
+    InputWrapper,
+    {
+      ...inputWrapperProps,
+      className: `${classes["searchbar"]} ${(inputWrapperProps == null ? void 0 : inputWrapperProps.className) ?? ""}`,
+      label: (inputWrapperProps == null ? void 0 : inputWrapperProps.label) ?? "",
+      onChange,
+      type: "search",
+      name: (inputWrapperProps == null ? void 0 : inputWrapperProps.name) ?? "searchbar",
+      value: search,
+      inputProps: {
+        ...inputWrapperProps == null ? void 0 : inputWrapperProps.inputProps,
+        type: "search",
+        prefix: /* @__PURE__ */ React.createElement(Icon, { icon: Icons.Search }),
+        placeholder: placeholder ?? "Search items"
+      }
+    }
+  );
+};
+export {
+  DataGridSearchbar
+};
+//# sourceMappingURL=DataGridSearchbar.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataGridSearchbar.es.js","sources":["../../../../src/components/DataGrid/DataGridFilters/DataGridSearchbar.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, { useState, useEffect } from \"react\";\nimport {\n  InputWrapper,\n  Props as InputWrapperProps\n} from \"../../Form/Wrapper/InputWrapper/InputWrapper\";\nimport { Icon, Icons } from \"../../Icon/Icon\";\nimport classes from \"./DataGridToolbar.module.scss\";\nimport { useDebouncedCallback } from \"../../../hooks/useDebouncedCallback\";\n\nexport interface DataGridSearchbarProps {\n  onSearch: (value: string) => void;\n  initialSearchValue?: string;\n  debounceTime?: number;\n  placeholder?: string;\n  inputWrapperProps?: InputWrapperProps;\n}\n\nexport const DataGridSearchbar = ({\n  onSearch,\n  initialSearchValue,\n  debounceTime,\n  inputWrapperProps,\n  placeholder\n}: DataGridSearchbarProps) => {\n  const [search, setSearch] = useState(initialSearchValue ?? \"\");\n  const debouncedCallback = useDebouncedCallback(onSearch, debounceTime ?? 500);\n  const onSearchCallback = debounceTime ? debouncedCallback : onSearch;\n\n  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    onSearchCallback(event.target.value);\n    setSearch(event.target.value);\n  };\n\n  useEffect(() => {\n    initialSearchValue && setSearch(initialSearchValue);\n  }, [initialSearchValue]);\n\n  return (\n    <InputWrapper\n      {...inputWrapperProps}\n      className={`${classes[\"searchbar\"]} ${inputWrapperProps?.className ?? \"\"}`}\n      label={inputWrapperProps?.label ?? \"\"}\n      onChange={onChange}\n      type=\"search\"\n      name={inputWrapperProps?.name ?? \"searchbar\"}\n      value={search}\n      inputProps={{\n        ...inputWrapperProps?.inputProps,\n        type: \"search\",\n        prefix: <Icon icon={Icons.Search} />,\n        placeholder: placeholder ?? \"Search items\"\n      }}\n    ></InputWrapper>\n  );\n};\n"],"names":[],"mappings":";;;;;AAiCO,MAAM,oBAAoB,CAAC;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA8B;AAC5B,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,sBAAsB,EAAE;AAC7D,QAAM,oBAAoB,qBAAqB,UAAU,gBAAgB,GAAG;AACtE,QAAA,mBAAmB,eAAe,oBAAoB;AAEtD,QAAA,WAAW,CAAC,UAA+C;AAC9C,qBAAA,MAAM,OAAO,KAAK;AACzB,cAAA,MAAM,OAAO,KAAK;AAAA,EAC9B;AAEA,YAAU,MAAM;AACd,0BAAsB,UAAU,kBAAkB;AAAA,EAAA,GACjD,CAAC,kBAAkB,CAAC;AAGrB,SAAA,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,QAAQ,WAAW,CAAC,KAAI,uDAAmB,cAAa,EAAE;AAAA,MACxE,QAAO,uDAAmB,UAAS;AAAA,MACnC;AAAA,MACA,MAAK;AAAA,MACL,OAAM,uDAAmB,SAAQ;AAAA,MACjC,OAAO;AAAA,MACP,YAAY;AAAA,QACV,GAAG,uDAAmB;AAAA,QACtB,MAAM;AAAA,QACN,QAAQ,sBAAA,cAAC,MAAK,EAAA,MAAM,MAAM,QAAQ;AAAA,QAClC,aAAa,eAAe;AAAA,MAAA;AAAA,IAC9B;AAAA,EACD;AAEL;"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataGridToolbar.cjs.js","sources":["../../../../src/components/DataGrid/DataGridFilters/DataGridToolbar.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, { Fragment, useEffect, useRef } from \"react\";\nimport { DataGridFilter } from \"./DataGridFilter\";\nimport classes from \"./DataGridToolbar.module.scss\";\nimport {\n  DataGridColumnMetadata,\n  DateTimeFilter,\n  Filter,\n  FiltersTranslations\n} from \"./DataGridFilters.interfaces\";\nimport { Typography } from \"../../Typography/Typography\";\nimport { useFiltersReducer } from \"./useFiltersReducer\";\nimport { DataGridDateFilter } from \"./DataGridDateFilter\";\n\nexport interface DataGridToolbarProps {\n  columnsMetadata?: DataGridColumnMetadata[];\n  customEditTagContent?: React.ReactElement;\n  dateFilterValue?: DateTimeFilter;\n  onDateFilterValueChange?: (dateTimeFilter: DateTimeFilter) => void;\n  filterValues?: Filter[];\n  translations?: FiltersTranslations;\n  onFilterAdd?: (filter: Filter) => void;\n  onFilterEdit?: (filter: Filter) => void;\n  onFilterDelete?: (id: string) => void;\n  onFiltersClear?: () => void;\n}\n\nexport const DataGridToolbar = ({\n  columnsMetadata,\n  filterValues,\n  translations,\n  onFilterAdd,\n  onFilterEdit,\n  onFilterDelete,\n  dateFilterValue,\n  onDateFilterValueChange,\n  onFiltersClear,\n  customEditTagContent\n}: DataGridToolbarProps) => {\n  const { state, addFilter, editFilter, deleteFilter, resetFilters, clearFilters } =\n    useFiltersReducer(filterValues);\n\n  const isFirstRenderRef = useRef(true);\n\n  useEffect(() => {\n    if (!isFirstRenderRef.current && filterValues) {\n      resetFilters(filterValues);\n    }\n  }, [filterValues]);\n\n  useEffect(() => {\n    isFirstRenderRef.current = false;\n  }, []);\n\n  const { clearButtonCaption = \"Clear all filters\" } = translations?.toolbar || {};\n  return (\n    <Fragment>\n      {dateFilterValue && (\n        <DataGridDateFilter\n          dateFilterValue={dateFilterValue}\n          onDateFilterValueChange={onDateFilterValueChange}\n        />\n      )}\n      {columnsMetadata &&\n        state.filters.map(filter => (\n          <DataGridFilter\n            mode=\"EDIT\"\n            key={filter.id}\n            filter={filter}\n            columnsMetadata={columnsMetadata}\n            filterState={state}\n            onFilterEdit={filter => {\n              editFilter(filter);\n              onFilterEdit && onFilterEdit(filter);\n            }}\n            onFilterDelete={id => {\n              deleteFilter(id);\n              onFilterDelete && onFilterDelete(id);\n            }}\n            tagTranslations={translations?.tag}\n            popoverTranslations={translations?.popover}\n            customEditTagContent={customEditTagContent}\n          />\n        ))}\n      <div className={classes[\"actions-wrapper\"]}>\n        {columnsMetadata && (\n          <DataGridFilter\n            mode=\"ADD\"\n            customEditTagContent={customEditTagContent}\n            columnsMetadata={columnsMetadata}\n            filterState={state}\n            onFilterAdd={filter => {\n              addFilter(filter);\n              onFilterAdd && onFilterAdd(filter);\n            }}\n            tagTranslations={translations?.tag}\n            popoverTranslations={translations?.popover}\n          />\n        )}\n        {columnsMetadata && state.filters.length >= 1 && (\n          <button\n            type=\"button\"\n            className={classes[\"clear-button\"]}\n            onClick={() => {\n              clearFilters();\n              onFiltersClear && onFiltersClear();\n            }}\n          >\n            <Typography variant=\"body\" className={classes[\"caption\"]}>\n              {clearButtonCaption}\n            </Typography>\n          </button>\n        )}\n      </div>\n    </Fragment>\n  );\n};\n"],"names":["columnsMetadata","filterValues","translations","onFilterAdd","onFilterEdit","onFilterDelete","dateFilterValue","onDateFilterValueChange","onFiltersClear","customEditTagContent","state","addFilter","editFilter","deleteFilter","resetFilters","clearFilters","useFiltersReducer","isFirstRenderRef","useRef","useEffect","current","clearButtonCaption","toolbar","createElement","Fragment","React","DataGridDateFilter","filters","map","filter","DataGridFilter","mode","key","id","filterState","tagTranslations","tag","popoverTranslations","popover","className","classes","default","length","type","onClick","Typography","variant"],"mappings":"yVA0C+B,EAC7BA,kBACAC,eACAC,eACAC,cACAC,eACAC,iBACAC,kBACAC,0BACAC,iBACAC,2BAEM,MAAAC,MAAEA,EAAOC,UAAAA,EAAAC,WAAWA,EAAYC,aAAAA,EAAAC,aAAcA,eAAcC,GAChEC,EAAAA,kBAAkBf,GAEdgB,EAAmBC,UAAO,GAEhCC,EAAAA,WAAU,MACHF,EAAiBG,SAAWnB,GAC/Ba,EAAab,EAAY,GAE1B,CAACA,IAEJkB,EAAAA,WAAU,KACRF,EAAiBG,SAAU,CAAA,GAC1B,IAEH,MAAMC,mBAAEA,EAAqB,sBAAwB,MAAAnB,OAAA,EAAAA,EAAcoB,UAAW,CAAC,EAE7E,SAAAC,cAACC,EAAAA,cACElB,GACCmB,EAAAF,cAACG,EAAAA,mBAAA,CACCpB,kBACAC,4BAGHP,GACCU,EAAMiB,QAAQC,KACZC,GAAAJ,EAAAF,cAACO,EAAAA,eAAA,CACCC,KAAK,OACLC,IAAKH,EAAOI,GACZJ,SACA7B,kBACAkC,YAAaxB,EACbN,aAAcyB,IACZjB,EAAWiB,GACXzB,GAAgBA,EAAayB,EAAM,EAErCxB,eAAsB4B,IACpBpB,EAAaoB,GACb5B,GAAkBA,EAAe4B,EAAE,EAErCE,gBAA+B,MAAdjC,OAAc,EAAAA,EAAAkC,IAC/BC,oBAAmC,MAAdnC,OAAc,EAAAA,EAAAoC,QACnC7B,2BAGLgB,EAAAF,cAAA,MAAA,CAAIgB,UAAWC,EAAQC,QAAA,oBACrBzC,GACCyB,EAAAF,cAACO,EAAAA,eAAA,CACCC,KAAK,MACLtB,uBACAT,kBACAkC,YAAaxB,EACbP,YAAuB0B,IACrBlB,EAAUkB,GACV1B,GAAeA,EAAY0B,EAAM,EAEnCM,gBAA+B,MAAdjC,OAAc,EAAAA,EAAAkC,IAC/BC,oBAAmC,MAAdnC,OAAc,EAAAA,EAAAoC,UAGtCtC,GAAmBU,EAAMiB,QAAQe,QAAU,GAC1CjB,EAAAF,cAAC,SAAA,CACCoB,KAAK,SACLJ,UAAWC,UAAQ,gBACnBI,QAAS,KACM7B,IACbP,GAAkBA,GAAe,GAGnCiB,EAAAF,cAACsB,cAAWC,QAAQ,OAAOP,UAAWC,EAAQC,QAAS,SACpDpB,KAKX"}

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

@@ -0,0 +1,86 @@
+import React, { useRef, useEffect, Fragment } from "react";
+import { DataGridFilter } from "./DataGridFilter.es.js";
+import classes from "./DataGridToolbar.module.scss.es.js";
+import { Typography } from "../../Typography/Typography.es.js";
+import { useFiltersReducer } from "./useFiltersReducer.es.js";
+import { DataGridDateFilter } from "./DataGridDateFilter.es.js";
+const DataGridToolbar = ({
+  columnsMetadata,
+  filterValues,
+  translations,
+  onFilterAdd,
+  onFilterEdit,
+  onFilterDelete,
+  dateFilterValue,
+  onDateFilterValueChange,
+  onFiltersClear,
+  customEditTagContent
+}) => {
+  const { state, addFilter, editFilter, deleteFilter, resetFilters, clearFilters } = useFiltersReducer(filterValues);
+  const isFirstRenderRef = useRef(true);
+  useEffect(() => {
+    if (!isFirstRenderRef.current && filterValues) {
+      resetFilters(filterValues);
+    }
+  }, [filterValues]);
+  useEffect(() => {
+    isFirstRenderRef.current = false;
+  }, []);
+  const { clearButtonCaption = "Clear all filters" } = (translations == null ? void 0 : translations.toolbar) || {};
+  return /* @__PURE__ */ React.createElement(Fragment, null, dateFilterValue && /* @__PURE__ */ React.createElement(
+    DataGridDateFilter,
+    {
+      dateFilterValue,
+      onDateFilterValueChange
+    }
+  ), columnsMetadata && state.filters.map((filter) => /* @__PURE__ */ React.createElement(
+    DataGridFilter,
+    {
+      mode: "EDIT",
+      key: filter.id,
+      filter,
+      columnsMetadata,
+      filterState: state,
+      onFilterEdit: (filter2) => {
+        editFilter(filter2);
+        onFilterEdit && onFilterEdit(filter2);
+      },
+      onFilterDelete: (id) => {
+        deleteFilter(id);
+        onFilterDelete && onFilterDelete(id);
+      },
+      tagTranslations: translations == null ? void 0 : translations.tag,
+      popoverTranslations: translations == null ? void 0 : translations.popover,
+      customEditTagContent
+    }
+  )), /* @__PURE__ */ React.createElement("div", { className: classes["actions-wrapper"] }, columnsMetadata && /* @__PURE__ */ React.createElement(
+    DataGridFilter,
+    {
+      mode: "ADD",
+      customEditTagContent,
+      columnsMetadata,
+      filterState: state,
+      onFilterAdd: (filter) => {
+        addFilter(filter);
+        onFilterAdd && onFilterAdd(filter);
+      },
+      tagTranslations: translations == null ? void 0 : translations.tag,
+      popoverTranslations: translations == null ? void 0 : translations.popover
+    }
+  ), columnsMetadata && state.filters.length >= 1 && /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      className: classes["clear-button"],
+      onClick: () => {
+        clearFilters();
+        onFiltersClear && onFiltersClear();
+      }
+    },
+    /* @__PURE__ */ React.createElement(Typography, { variant: "body", className: classes["caption"] }, clearButtonCaption)
+  )));
+};
+export {
+  DataGridToolbar
+};
+//# sourceMappingURL=DataGridToolbar.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataGridToolbar.es.js","sources":["../../../../src/components/DataGrid/DataGridFilters/DataGridToolbar.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, { Fragment, useEffect, useRef } from \"react\";\nimport { DataGridFilter } from \"./DataGridFilter\";\nimport classes from \"./DataGridToolbar.module.scss\";\nimport {\n  DataGridColumnMetadata,\n  DateTimeFilter,\n  Filter,\n  FiltersTranslations\n} from \"./DataGridFilters.interfaces\";\nimport { Typography } from \"../../Typography/Typography\";\nimport { useFiltersReducer } from \"./useFiltersReducer\";\nimport { DataGridDateFilter } from \"./DataGridDateFilter\";\n\nexport interface DataGridToolbarProps {\n  columnsMetadata?: DataGridColumnMetadata[];\n  customEditTagContent?: React.ReactElement;\n  dateFilterValue?: DateTimeFilter;\n  onDateFilterValueChange?: (dateTimeFilter: DateTimeFilter) => void;\n  filterValues?: Filter[];\n  translations?: FiltersTranslations;\n  onFilterAdd?: (filter: Filter) => void;\n  onFilterEdit?: (filter: Filter) => void;\n  onFilterDelete?: (id: string) => void;\n  onFiltersClear?: () => void;\n}\n\nexport const DataGridToolbar = ({\n  columnsMetadata,\n  filterValues,\n  translations,\n  onFilterAdd,\n  onFilterEdit,\n  onFilterDelete,\n  dateFilterValue,\n  onDateFilterValueChange,\n  onFiltersClear,\n  customEditTagContent\n}: DataGridToolbarProps) => {\n  const { state, addFilter, editFilter, deleteFilter, resetFilters, clearFilters } =\n    useFiltersReducer(filterValues);\n\n  const isFirstRenderRef = useRef(true);\n\n  useEffect(() => {\n    if (!isFirstRenderRef.current && filterValues) {\n      resetFilters(filterValues);\n    }\n  }, [filterValues]);\n\n  useEffect(() => {\n    isFirstRenderRef.current = false;\n  }, []);\n\n  const { clearButtonCaption = \"Clear all filters\" } = translations?.toolbar || {};\n  return (\n    <Fragment>\n      {dateFilterValue && (\n        <DataGridDateFilter\n          dateFilterValue={dateFilterValue}\n          onDateFilterValueChange={onDateFilterValueChange}\n        />\n      )}\n      {columnsMetadata &&\n        state.filters.map(filter => (\n          <DataGridFilter\n            mode=\"EDIT\"\n            key={filter.id}\n            filter={filter}\n            columnsMetadata={columnsMetadata}\n            filterState={state}\n            onFilterEdit={filter => {\n              editFilter(filter);\n              onFilterEdit && onFilterEdit(filter);\n            }}\n            onFilterDelete={id => {\n              deleteFilter(id);\n              onFilterDelete && onFilterDelete(id);\n            }}\n            tagTranslations={translations?.tag}\n            popoverTranslations={translations?.popover}\n            customEditTagContent={customEditTagContent}\n          />\n        ))}\n      <div className={classes[\"actions-wrapper\"]}>\n        {columnsMetadata && (\n          <DataGridFilter\n            mode=\"ADD\"\n            customEditTagContent={customEditTagContent}\n            columnsMetadata={columnsMetadata}\n            filterState={state}\n            onFilterAdd={filter => {\n              addFilter(filter);\n              onFilterAdd && onFilterAdd(filter);\n            }}\n            tagTranslations={translations?.tag}\n            popoverTranslations={translations?.popover}\n          />\n        )}\n        {columnsMetadata && state.filters.length >= 1 && (\n          <button\n            type=\"button\"\n            className={classes[\"clear-button\"]}\n            onClick={() => {\n              clearFilters();\n              onFiltersClear && onFiltersClear();\n            }}\n          >\n            <Typography variant=\"body\" className={classes[\"caption\"]}>\n              {clearButtonCaption}\n            </Typography>\n          </button>\n        )}\n      </div>\n    </Fragment>\n  );\n};\n"],"names":["filter"],"mappings":";;;;;;AA0CO,MAAM,kBAAkB,CAAC;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA4B;AACpB,QAAA,EAAE,OAAO,WAAW,YAAY,cAAc,cAAc,aAAA,IAChE,kBAAkB,YAAY;AAE1B,QAAA,mBAAmB,OAAO,IAAI;AAEpC,YAAU,MAAM;AACV,QAAA,CAAC,iBAAiB,WAAW,cAAc;AAC7C,mBAAa,YAAY;AAAA,IAAA;AAAA,EAC3B,GACC,CAAC,YAAY,CAAC;AAEjB,YAAU,MAAM;AACd,qBAAiB,UAAU;AAAA,EAC7B,GAAG,EAAE;AAEL,QAAM,EAAE,qBAAqB,oBAAwB,KAAA,6CAAc,YAAW,CAAC;AAE7E,SAAA,sBAAA,cAAC,gBACE,mBACC,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,IAAA;AAAA,EAAA,GAGH,mBACC,MAAM,QAAQ,IAAI,CAChB,WAAA,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,KAAK,OAAO;AAAA,MACZ;AAAA,MACA;AAAA,MACA,aAAa;AAAA,MACb,cAAc,CAAAA,YAAU;AACtB,mBAAWA,OAAM;AACjB,wBAAgB,aAAaA,OAAM;AAAA,MACrC;AAAA,MACA,gBAAgB,CAAM,OAAA;AACpB,qBAAa,EAAE;AACf,0BAAkB,eAAe,EAAE;AAAA,MACrC;AAAA,MACA,iBAAiB,6CAAc;AAAA,MAC/B,qBAAqB,6CAAc;AAAA,MACnC;AAAA,IAAA;AAAA,EAEH,CAAA,GACF,sBAAA,cAAA,OAAA,EAAI,WAAW,QAAQ,iBAAiB,KACtC,mBACC,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,aAAa;AAAA,MACb,aAAa,CAAU,WAAA;AACrB,kBAAU,MAAM;AAChB,uBAAe,YAAY,MAAM;AAAA,MACnC;AAAA,MACA,iBAAiB,6CAAc;AAAA,MAC/B,qBAAqB,6CAAc;AAAA,IAAA;AAAA,EAAA,GAGtC,mBAAmB,MAAM,QAAQ,UAAU,KAC1C,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW,QAAQ,cAAc;AAAA,MACjC,SAAS,MAAM;AACA,qBAAA;AACb,0BAAkB,eAAe;AAAA,MAAA;AAAA,IACnC;AAAA,IAEA,sBAAA,cAAC,cAAW,SAAQ,QAAO,WAAW,QAAQ,SAAS,KACpD,kBACH;AAAA,EAAA,CAGN,CACF;AAEJ;"}

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

@@ -0,0 +1,3 @@
+!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('.DataGridToolbar_sr-only_E7GBT{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.DataGridToolbar_hidden_E7GBT{display:none}.DataGridToolbar_slide-in_E7GBT{animation:DataGridToolbar_slide-in_E7GBT .5s forwards}@media (prefers-reduced-motion: reduce){.DataGridToolbar_slide-in_E7GBT{animation-duration:.1ms}}.DataGridToolbar_slide-out_E7GBT{animation:DataGridToolbar_slide-out_E7GBT .5s forwards}@media (prefers-reduced-motion: reduce){.DataGridToolbar_slide-out_E7GBT{animation-duration:.1ms}}@keyframes DataGridToolbar_slide-in_E7GBT{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes DataGridToolbar_slide-out_E7GBT{0%{transform:translateY(0)}to{transform:translateY(100vh)}}/*!\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the "License");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an "AS IS" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */.DataGridToolbar_wrapper_E7GBT input[type=search]::-webkit-search-cancel-button{cursor:pointer}.DataGridToolbar_wrapper_E7GBT{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem;width:100%;padding-bottom:1rem}.DataGridToolbar_wrapper_E7GBT .DataGridToolbar_filter-section_E7GBT{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:.5rem;width:100%;flex-grow:1}.DataGridToolbar_wrapper_E7GBT .DataGridToolbar_filter-section_E7GBT .DataGridToolbar_searchbar_E7GBT{min-width:7rem;flex-basis:15rem}.DataGridToolbar_wrapper_E7GBT .DataGridToolbar_filter-section_E7GBT .DataGridToolbar_actions-wrapper_E7GBT{display:flex;align-items:center;justify-content:flex-start;gap:.5rem}.DataGridToolbar_wrapper_E7GBT .DataGridToolbar_filter-section_E7GBT .DataGridToolbar_clear-button_E7GBT{background:none;border:none;cursor:pointer}.DataGridToolbar_wrapper_E7GBT .DataGridToolbar_filter-section_E7GBT .DataGridToolbar_clear-button_E7GBT:focus-visible{outline:calc(.125 * var(--font-size)) solid var(--color-focus);outline-offset:0;border-radius:var(--focus-border-radius)}.DataGridToolbar_wrapper_E7GBT .DataGridToolbar_filter-section_E7GBT .DataGridToolbar_clear-button_E7GBT .DataGridToolbar_caption_E7GBT{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_E7GBT .DataGridToolbar_button-section_E7GBT{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_E7GBT",r="DataGridToolbar_searchbar_E7GBT",t="DataGridToolbar_caption_E7GBT",o={wrapper:a,"filter-section":"DataGridToolbar_filter-section_E7GBT",searchbar:r,"actions-wrapper":"DataGridToolbar_actions-wrapper_E7GBT","clear-button":"DataGridToolbar_clear-button_E7GBT",caption:t,"button-section":"DataGridToolbar_button-section_E7GBT"};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

@@ -0,0 +1,20 @@
+!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('.DataGridToolbar_sr-only_E7GBT{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.DataGridToolbar_hidden_E7GBT{display:none}.DataGridToolbar_slide-in_E7GBT{animation:DataGridToolbar_slide-in_E7GBT .5s forwards}@media (prefers-reduced-motion: reduce){.DataGridToolbar_slide-in_E7GBT{animation-duration:.1ms}}.DataGridToolbar_slide-out_E7GBT{animation:DataGridToolbar_slide-out_E7GBT .5s forwards}@media (prefers-reduced-motion: reduce){.DataGridToolbar_slide-out_E7GBT{animation-duration:.1ms}}@keyframes DataGridToolbar_slide-in_E7GBT{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes DataGridToolbar_slide-out_E7GBT{0%{transform:translateY(0)}to{transform:translateY(100vh)}}/*!\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the "License");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an "AS IS" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */.DataGridToolbar_wrapper_E7GBT input[type=search]::-webkit-search-cancel-button{cursor:pointer}.DataGridToolbar_wrapper_E7GBT{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem;width:100%;padding-bottom:1rem}.DataGridToolbar_wrapper_E7GBT .DataGridToolbar_filter-section_E7GBT{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:.5rem;width:100%;flex-grow:1}.DataGridToolbar_wrapper_E7GBT .DataGridToolbar_filter-section_E7GBT .DataGridToolbar_searchbar_E7GBT{min-width:7rem;flex-basis:15rem}.DataGridToolbar_wrapper_E7GBT .DataGridToolbar_filter-section_E7GBT .DataGridToolbar_actions-wrapper_E7GBT{display:flex;align-items:center;justify-content:flex-start;gap:.5rem}.DataGridToolbar_wrapper_E7GBT .DataGridToolbar_filter-section_E7GBT .DataGridToolbar_clear-button_E7GBT{background:none;border:none;cursor:pointer}.DataGridToolbar_wrapper_E7GBT .DataGridToolbar_filter-section_E7GBT .DataGridToolbar_clear-button_E7GBT:focus-visible{outline:calc(.125 * var(--font-size)) solid var(--color-focus);outline-offset:0;border-radius:var(--focus-border-radius)}.DataGridToolbar_wrapper_E7GBT .DataGridToolbar_filter-section_E7GBT .DataGridToolbar_clear-button_E7GBT .DataGridToolbar_caption_E7GBT{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_E7GBT .DataGridToolbar_button-section_E7GBT{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_E7GBT";
+const searchbar = "DataGridToolbar_searchbar_E7GBT";
+const caption = "DataGridToolbar_caption_E7GBT";
+const classes = {
+  wrapper,
+  "filter-section": "DataGridToolbar_filter-section_E7GBT",
+  searchbar,
+  "actions-wrapper": "DataGridToolbar_actions-wrapper_E7GBT",
+  "clear-button": "DataGridToolbar_clear-button_E7GBT",
+  caption,
+  "button-section": "DataGridToolbar_button-section_E7GBT"
+};
+export {
+  caption,
+  classes as default,
+  searchbar,
+  wrapper
+};
+//# sourceMappingURL=DataGridToolbar.module.scss.es.js.map

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

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

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),r=require("./DataGridToolbar.module.scss.cjs.js"),t=({children:t,filters:a,buttons:o,...s},l)=>e.createElement("div",{ref:l,className:r.default.wrapper,...s},e.createElement("div",{className:r.default["filter-section"]},a),e.createElement("div",{className:r.default["button-section"]},o)),a=e.forwardRef(t);exports.DataGridToolbarWrapper=a,exports.DataGridToolbarWrapperComponent=t;
+//# sourceMappingURL=DataGridToolbarWrapper.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataGridToolbarWrapper.cjs.js","sources":["../../../../src/components/DataGrid/DataGridFilters/DataGridToolbarWrapper.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, { ComponentPropsWithRef, ForwardRefRenderFunction, ReactElement } from \"react\";\nimport classes from \"./DataGridToolbar.module.scss\";\nimport { Button } from \"../../Button/Button\";\nimport { ButtonProps } from \"../../..\";\ninterface Props extends ComponentPropsWithRef<\"div\"> {\n  filters?: React.JSX.Element;\n  buttons?: ReactElement<ButtonProps, typeof Button> | ReactElement<ButtonProps, typeof Button>[];\n}\n\nexport const DataGridToolbarWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (\n  { children, filters, buttons, ...rest },\n  ref\n) => {\n  return (\n    <div ref={ref} className={classes[\"wrapper\"]} {...rest}>\n      <div className={classes[\"filter-section\"]}>{filters}</div>\n      <div className={classes[\"button-section\"]}>{buttons}</div>\n    </div>\n  );\n};\n\nexport const DataGridToolbarWrapper = React.forwardRef(DataGridToolbarWrapperComponent);\n"],"names":["DataGridToolbarWrapperComponent","children","filters","buttons","rest","ref","createElement","className","classes","React","default","DataGridToolbarWrapper","forwardRef"],"mappings":"2JAyBaA,EAAmF,EAC5FC,WAAUC,UAASC,aAAYC,GACjCC,MAGEC,cAAC,MAAI,CAAAD,MAAUE,UAAWC,EAAAA,QAAiB,WAAOJ,GAChDK,EAAAH,cAAC,MAAI,CAAAC,UAAWC,EAAAA,QAAQ,mBAAoBN,KAC3CI,cAAA,MAAA,CAAIC,UAAWC,EAAQE,QAAA,mBAAoBP,IAKrCQ,EAAyBF,EAAMG,WAAWZ"}

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

@@ -0,0 +1,11 @@
+import React from "react";
+import classes from "./DataGridToolbar.module.scss.es.js";
+const DataGridToolbarWrapperComponent = ({ children, filters, buttons, ...rest }, ref) => {
+  return /* @__PURE__ */ React.createElement("div", { ref, className: classes["wrapper"], ...rest }, /* @__PURE__ */ React.createElement("div", { className: classes["filter-section"] }, filters), /* @__PURE__ */ React.createElement("div", { className: classes["button-section"] }, buttons));
+};
+const DataGridToolbarWrapper = React.forwardRef(DataGridToolbarWrapperComponent);
+export {
+  DataGridToolbarWrapper,
+  DataGridToolbarWrapperComponent
+};
+//# sourceMappingURL=DataGridToolbarWrapper.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataGridToolbarWrapper.es.js","sources":["../../../../src/components/DataGrid/DataGridFilters/DataGridToolbarWrapper.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, { ComponentPropsWithRef, ForwardRefRenderFunction, ReactElement } from \"react\";\nimport classes from \"./DataGridToolbar.module.scss\";\nimport { Button } from \"../../Button/Button\";\nimport { ButtonProps } from \"../../..\";\ninterface Props extends ComponentPropsWithRef<\"div\"> {\n  filters?: React.JSX.Element;\n  buttons?: ReactElement<ButtonProps, typeof Button> | ReactElement<ButtonProps, typeof Button>[];\n}\n\nexport const DataGridToolbarWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (\n  { children, filters, buttons, ...rest },\n  ref\n) => {\n  return (\n    <div ref={ref} className={classes[\"wrapper\"]} {...rest}>\n      <div className={classes[\"filter-section\"]}>{filters}</div>\n      <div className={classes[\"button-section\"]}>{buttons}</div>\n    </div>\n  );\n};\n\nexport const DataGridToolbarWrapper = React.forwardRef(DataGridToolbarWrapperComponent);\n"],"names":[],"mappings":";;AAyBa,MAAA,kCAAmF,CAC9F,EAAE,UAAU,SAAS,SAAS,GAAG,KAAK,GACtC,QACG;AAED,SAAA,sBAAA,cAAC,OAAI,EAAA,KAAU,WAAW,QAAQ,SAAS,GAAI,GAAG,KAChD,GAAA,sBAAA,cAAC,OAAI,EAAA,WAAW,QAAQ,gBAAgB,EAAA,GAAI,OAAQ,GACnD,sBAAA,cAAA,OAAA,EAAI,WAAW,QAAQ,gBAAgB,EAAI,GAAA,OAAQ,CACtD;AAEJ;AAEa,MAAA,yBAAyB,MAAM,WAAW,+BAA+B;"}

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

@@ -0,0 +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;
+//# sourceMappingURL=DateTimePicker.cjs.js.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,186 @@
+import React, { useState, useEffect } from "react";
+import { Popover } from "../../../Popover/Popover.es.js";
+import classes from "./DateTimePicker.module.scss.es.js";
+import { Button } from "../../../Button/Button.es.js";
+import { THIRTY_SECONDS, ONE_MINUTE, FIVE_MINUTES, ONE_HOUR, TWENTY_FOUR_HOURS, CUSTOM_DATE_RANGE, formatInputDate } from "./DateTimeService.es.js";
+import { SideMenu } from "./SideMenu.es.js";
+import { addSeconds } from "date-fns";
+import { DateTimePickerInputSection } from "./DateTimePickerInputSection.es.js";
+import { DateTimePickerCalendarSection } from "./DateTimePickerCalendarSection.es.js";
+import { useRepeatFocus } from "../../../../hooks/useRepeatFocus.es.js";
+const dateFormat = "yyyy-mm-dd hh:mm:ss";
+const sideMenuItems = [
+  { id: THIRTY_SECONDS, name: "Last 30 seconds", rangeSeconds: 30 },
+  { id: ONE_MINUTE, name: "Last 1 minute", rangeSeconds: 60 },
+  { id: FIVE_MINUTES, name: "Last 5 minutes", rangeSeconds: 300 },
+  { id: ONE_HOUR, name: "Last 1 hour", rangeSeconds: 3600 },
+  { id: TWENTY_FOUR_HOURS, name: "Last 24 hours", rangeSeconds: 86400 },
+  { id: CUSTOM_DATE_RANGE, name: "Custom" }
+];
+const DateTimePicker = ({
+  anchorRef,
+  popoverRef,
+  isOpen,
+  setPickerOpen,
+  onTagCaptionChange,
+  translations = {
+    errors: {
+      dateFormatError: `The format must be ${dateFormat}`
+    },
+    previousMonth: "Previous month",
+    nextMonth: "Next month",
+    from: "From",
+    to: "To",
+    cancel: "Cancel",
+    apply: "Apply",
+    dateInputPlaceholder: dateFormat
+  },
+  dateFilterValue,
+  onDateFilterValueChange
+}) => {
+  const {
+    errors: { dateFormatError },
+    previousMonth,
+    nextMonth,
+    cancel,
+    from,
+    to,
+    apply,
+    dateInputPlaceholder
+  } = translations;
+  const [selectedDate, setSelectedDate] = useState({
+    from: (dateFilterValue == null ? void 0 : dateFilterValue.fromDate) ? new Date(dateFilterValue == null ? void 0 : dateFilterValue.fromDate) : void 0,
+    to: (dateFilterValue == null ? void 0 : dateFilterValue.toDate) ? new Date(dateFilterValue == null ? void 0 : dateFilterValue.toDate) : void 0
+  });
+  const [selectedPredefinedRange, setSelectedPredefinedRange] = useState(
+    sideMenuItems[0].id
+  );
+  const [fromDateText, setFromDateText] = useState("");
+  const [toDateText, setToDateText] = useState("");
+  const [fromDateError, setFromDateError] = useState("");
+  const [toDateError, setToDateError] = useState("");
+  useRepeatFocus(popoverRef);
+  const disableDateRangePickers = selectedPredefinedRange !== CUSTOM_DATE_RANGE;
+  useEffect(() => {
+    var _a;
+    if (isOpen) {
+      (_a = popoverRef.current) == null ? void 0 : _a.focus();
+    }
+  }, [isOpen]);
+  useEffect(() => {
+    if (dateFilterValue) {
+      const foundItem = sideMenuItems.find((item) => item.id === dateFilterValue.type);
+      foundItem && onTagCaptionChange(foundItem.name);
+      setSelectedPredefinedRange(dateFilterValue.type);
+      if ((foundItem == null ? void 0 : foundItem.rangeSeconds) && dateFilterValue.type !== CUSTOM_DATE_RANGE) {
+        const fromDate = addSeconds(/* @__PURE__ */ new Date(), -foundItem.rangeSeconds);
+        const toDate = /* @__PURE__ */ new Date();
+        setFromDateText(formatInputDate(fromDate));
+        setToDateText(formatInputDate(toDate));
+        setSelectedDate({ from: fromDate, to: toDate });
+        return;
+      }
+      dateFilterValue.fromDate && setFromDateText(formatInputDate(new Date(dateFilterValue.fromDate)));
+      dateFilterValue.toDate && setToDateText(formatInputDate(new Date(dateFilterValue.toDate)));
+      setSelectedDate({
+        from: (dateFilterValue == null ? void 0 : dateFilterValue.fromDate) ? new Date(dateFilterValue == null ? void 0 : dateFilterValue.fromDate) : void 0,
+        to: (dateFilterValue == null ? void 0 : dateFilterValue.toDate) ? new Date(dateFilterValue == null ? void 0 : dateFilterValue.toDate) : void 0
+      });
+    }
+  }, [dateFilterValue]);
+  useEffect(() => {
+    if (!dateFilterValue) {
+      isOpen && onSideMenuItemSelect(selectedPredefinedRange);
+    }
+  }, [isOpen, dateFilterValue]);
+  const onSideMenuItemSelect = (itemId) => {
+    setSelectedPredefinedRange(itemId);
+    const foundItem = sideMenuItems.find((item) => item.id === itemId);
+    foundItem && onTagCaptionChange(foundItem.name);
+    if (itemId !== CUSTOM_DATE_RANGE) {
+      if (!foundItem) {
+        return;
+      }
+      if (foundItem.rangeSeconds) {
+        const fromDate = addSeconds(/* @__PURE__ */ new Date(), -foundItem.rangeSeconds);
+        const toDate = /* @__PURE__ */ new Date();
+        setSelectedDate({ from: fromDate, to: toDate });
+        setFromDateText(formatInputDate(fromDate));
+        setToDateText(formatInputDate(toDate));
+      }
+    }
+  };
+  const closeDateTimePicker = () => {
+    setPickerOpen(false);
+  };
+  const saveDateTimePicker = () => {
+    var _a, _b;
+    onDateFilterValueChange && onDateFilterValueChange({
+      toDate: ((_a = selectedDate.to) == null ? void 0 : _a.toISOString()) ?? "",
+      fromDate: ((_b = selectedDate.from) == null ? void 0 : _b.toISOString()) ?? "",
+      type: selectedPredefinedRange
+    });
+    setPickerOpen(false);
+  };
+  return /* @__PURE__ */ React.createElement(
+    Popover,
+    {
+      tabIndex: -1,
+      anchorEl: anchorRef,
+      ref: popoverRef,
+      show: isOpen,
+      placement: { horizontal: "left", vertical: "bottom" },
+      transformOrigin: { horizontal: "left", vertical: "top" }
+    },
+    isOpen && /* @__PURE__ */ React.createElement("div", { className: classes["popover"] }, /* @__PURE__ */ React.createElement("div", { className: classes["content-wrapper"] }, /* @__PURE__ */ React.createElement("div", { className: classes["aside"] }, /* @__PURE__ */ React.createElement(
+      SideMenu,
+      {
+        sideMenuItems,
+        selectedItemId: selectedPredefinedRange,
+        onItemSelect: onSideMenuItemSelect
+      }
+    )), /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: `${classes["controls"]} ${toDateError || fromDateError ? classes["has-error"] : ""}`
+      },
+      /* @__PURE__ */ React.createElement("div", { className: classes["controls-panel"] }, /* @__PURE__ */ React.createElement(
+        DateTimePickerInputSection,
+        {
+          from,
+          to,
+          dateInputPlaceholder,
+          dateFormatError,
+          fromDateText,
+          toDateText,
+          fromDateError,
+          toDateError,
+          setSelectedDate,
+          setFromDateText,
+          setToDateText,
+          setFromDateError,
+          setToDateError
+        }
+      )),
+      /* @__PURE__ */ React.createElement("div", { className: `${classes["controls-panel"]} ${classes["set-height"]}` }, /* @__PURE__ */ React.createElement(
+        DateTimePickerCalendarSection,
+        {
+          previousMonth,
+          nextMonth,
+          selectedDate,
+          disableDateRangePickers,
+          setSelectedDate,
+          setFromDateText,
+          setFromDateError,
+          setToDateText,
+          setToDateError
+        }
+      ))
+    )), /* @__PURE__ */ React.createElement("div", { className: classes["actions"] }, /* @__PURE__ */ React.createElement(Button, { variant: "text", onClick: closeDateTimePicker }, cancel), /* @__PURE__ */ React.createElement(Button, { onClick: saveDateTimePicker }, apply)))
+  );
+};
+export {
+  DateTimePicker,
+  dateFormat
+};
+//# sourceMappingURL=DateTimePicker.es.js.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,3 @@
+!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('/*!\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_E7GBT{display:flex;flex-direction:column;align-items:flex-start;min-width:40rem}.DateTimePicker_popover_E7GBT .DateTimePicker_content-wrapper_E7GBT{display:flex}.DateTimePicker_popover_E7GBT .DateTimePicker_aside_E7GBT{display:flex;flex-direction:column;width:9.25rem;border-right:1px solid var(--color-blue-grey100)}.DateTimePicker_popover_E7GBT .DateTimePicker_aside-menu_E7GBT{margin:.5rem 0;padding:0;white-space:nowrap;list-style:none}.DateTimePicker_popover_E7GBT .DateTimePicker_aside-menu-item_E7GBT{height:2rem}.DateTimePicker_popover_E7GBT .DateTimePicker_aside-menu-item_E7GBT button{padding:.5rem .75rem;font-size:var(--font-size-sub);line-height:1.33;text-align:start}.DateTimePicker_popover_E7GBT .DateTimePicker_controls_E7GBT{display:flex;flex-direction:column;gap:2rem;flex-grow:1;padding:2rem 2rem 0}.DateTimePicker_popover_E7GBT .DateTimePicker_controls_E7GBT.DateTimePicker_has-error_E7GBT{gap:calc(2rem - 15.5681px)}.DateTimePicker_popover_E7GBT .DateTimePicker_controls-panel_E7GBT{display:flex;gap:2rem}.DateTimePicker_popover_E7GBT .DateTimePicker_controls-panel_E7GBT>*{flex-grow:1}.DateTimePicker_popover_E7GBT .DateTimePicker_controls-panel_E7GBT.DateTimePicker_set-height_E7GBT{min-height:17.5rem}.DateTimePicker_popover_E7GBT .DateTimePicker_actions_E7GBT{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_E7GBT .DateTimePicker_input_E7GBT{margin-top:0;max-width:14rem}.DateTimePicker_popover_E7GBT .DateTimePicker_input_E7GBT label{font-size:var(--font-size-sub)}.DateTimePicker_popover_E7GBT .DateTimePicker_nav_E7GBT{position:absolute}.DateTimePicker_popover_E7GBT .DateTimePicker_next-button_E7GBT{position:absolute;left:27.3125rem;top:0}.DateTimePicker_popover_E7GBT .DateTimePicker_prev-button_E7GBT{position:absolute;top:0}.DateTimePicker_popover_E7GBT .DateTimePicker_month-caption_E7GBT{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_E7GBT{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_E7GBT",t="DateTimePicker_aside_E7GBT",i="DateTimePicker_controls_E7GBT",r="DateTimePicker_actions_E7GBT",o="DateTimePicker_input_E7GBT",a="DateTimePicker_nav_E7GBT",n={popover:e,"content-wrapper":"DateTimePicker_content-wrapper_E7GBT",aside:t,"aside-menu":"DateTimePicker_aside-menu_E7GBT","aside-menu-item":"DateTimePicker_aside-menu-item_E7GBT",controls:i,"has-error":"DateTimePicker_has-error_E7GBT","controls-panel":"DateTimePicker_controls-panel_E7GBT","set-height":"DateTimePicker_set-height_E7GBT",actions:r,input:o,nav:a,"next-button":"DateTimePicker_next-button_E7GBT","prev-button":"DateTimePicker_prev-button_E7GBT","month-caption":"DateTimePicker_month-caption_E7GBT","error-message":"DateTimePicker_error-message_E7GBT"};exports.actions=r,exports.aside=t,exports.controls=i,exports.default=n,exports.input=o,exports.nav=a,exports.popover=e;
+//# sourceMappingURL=DateTimePicker.module.scss.cjs.js.map