@onewelcome/react-lib-components 8.6.0 → 8.7.0

package/dist/esm/DataGrid/DataGridFilters/DataGridDateFilter.esm.js

@@ -0,0 +1,35 @@
+import React, { useRef, useState, Fragment } from 'react';
+import { DataGridFilterTag } from './DataGridFilterTag.esm.js';
+import { createPortal } from 'react-dom';
+import { DateTimePicker } from './DateTimePicker/DateTimePicker.esm.js';
+import { useGetDomRoot } from '../../src/hooks/useGetDomRoot.esm.js';
+
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+const DataGridDateFilter = ({ domRoot, dateFilterValue, onDateFilterValueChange }) => {
+    const triggerRef = useRef(null);
+    const popoverRef = useRef(null);
+    const wrappingDivRef = useRef(null);
+    const { root } = useGetDomRoot(domRoot, wrappingDivRef);
+    const [isOpen, setIsOpen] = useState(false);
+    const [tagCaption, setTagCaption] = useState("Last 30 seconds");
+    return (React.createElement(Fragment, null,
+        React.createElement(DataGridFilterTag, { triggerRef: triggerRef, ref: wrappingDivRef, dateTagCaption: tagCaption, mode: "ADD_DATE", onFilterOpen: () => setIsOpen(true) }),
+        createPortal(React.createElement(DateTimePicker, { popoverRef: popoverRef, onTagCaptionChange: setTagCaption, anchorRef: wrappingDivRef, isOpen: isOpen, setPickerOpen: setIsOpen, dateFilterValue: dateFilterValue, onDateFilterValueChange: onDateFilterValueChange }), root)));
+};
+
+export { DataGridDateFilter };
+//# sourceMappingURL=DataGridDateFilter.esm.js.map

package/dist/esm/DataGrid/DataGridFilters/DataGridDateFilter.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataGridDateFilter.esm.js","sources":["../../../../../../src/components/DataGrid/DataGridFilters/DataGridDateFilter.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, { Fragment, useRef, useState } from \"react\";\nimport { DataGridFilterTag } from \"./DataGridFilterTag\";\nimport { createPortal } from \"react-dom\";\nimport { DateTimePicker } from \"./DateTimePicker/DateTimePicker\";\nimport { useGetDomRoot } from \"../../../hooks/useGetDomRoot\";\nimport { DateTimeFilter } from \"./DataGridFilters.interfaces\";\n\ntype Props = {\n  domRoot?: HTMLElement;\n  dateFilterValue?: DateTimeFilter;\n  onDateFilterValueChange?: (dateTimeFilter: DateTimeFilter) => void;\n};\n\nexport const DataGridDateFilter = ({\n  domRoot,\n  dateFilterValue,\n  onDateFilterValueChange\n}: Props) => {\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const popoverRef = useRef<HTMLDivElement>(null);\n  const wrappingDivRef = useRef<HTMLDivElement>(null);\n  const { root } = useGetDomRoot(domRoot, wrappingDivRef);\n  const [isOpen, setIsOpen] = useState(false);\n  const [tagCaption, setTagCaption] = useState(\"Last 30 seconds\");\n\n  return (\n    <Fragment>\n      <DataGridFilterTag\n        triggerRef={triggerRef}\n        ref={wrappingDivRef}\n        dateTagCaption={tagCaption}\n        mode={\"ADD_DATE\"}\n        onFilterOpen={() => setIsOpen(true)}\n      />\n      {createPortal(\n        <DateTimePicker\n          popoverRef={popoverRef}\n          onTagCaptionChange={setTagCaption}\n          anchorRef={wrappingDivRef}\n          isOpen={isOpen}\n          setPickerOpen={setIsOpen}\n          dateFilterValue={dateFilterValue}\n          onDateFilterValueChange={onDateFilterValueChange}\n        />,\n        root\n      )}\n    </Fragment>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;;;;;;AAcG;AAeI,MAAM,kBAAkB,GAAG,CAAC,EACjC,OAAO,EACP,eAAe,EACf,uBAAuB,EACjB,KAAI;AACV,IAAA,MAAM,UAAU,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;AACnD,IAAA,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;AAChD,IAAA,MAAM,cAAc,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACpD,MAAM,EAAE,IAAI,EAAE,GAAG,aAAa,CAAC,OAAO,EAAE,cAAc,CAAC,CAAC;IACxD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,iBAAiB,CAAC,CAAC;IAEhE,QACE,oBAAC,QAAQ,EAAA,IAAA;QACP,KAAC,CAAA,aAAA,CAAA,iBAAiB,EAChB,EAAA,UAAU,EAAE,UAAU,EACtB,GAAG,EAAE,cAAc,EACnB,cAAc,EAAE,UAAU,EAC1B,IAAI,EAAE,UAAU,EAChB,YAAY,EAAE,MAAM,SAAS,CAAC,IAAI,CAAC,EACnC,CAAA;AACD,QAAA,YAAY,CACX,KAAC,CAAA,aAAA,CAAA,cAAc,EACb,EAAA,UAAU,EAAE,UAAU,EACtB,kBAAkB,EAAE,aAAa,EACjC,SAAS,EAAE,cAAc,EACzB,MAAM,EAAE,MAAM,EACd,aAAa,EAAE,SAAS,EACxB,eAAe,EAAE,eAAe,EAChC,uBAAuB,EAAE,uBAAuB,EAChD,CAAA,EACF,IAAI,CACL,CACQ,EACX;AACJ;;;;"}

package/dist/esm/DataGrid/DataGridFilters/DataGridFilterTag.esm.js

@@ -19,7 +19,7 @@ import classes from './DataGridFilter.module.scss.esm.js';
  *    See the License for the specific language governing permissions and
  *    limitations under the License.
  */
-const EditTagContent = ({ filter }) => {
+const EditTagContent = ({ filter, or, other }) => {
     const { column, operator, value } = filter;
     return (React.createElement(Fragment, null,
         column,
@@ -28,22 +28,31 @@ const EditTagContent = ({ filter }) => {
         " ",
         value.length > 0 && React.createElement("b", null, value[0]),
         value.length >= 2 && (React.createElement(React.Fragment, null,
-            "or ",
+            " ",
+            or,
+            " ",
             React.createElement("b", null,
-                " ",
                 value.length - 1,
-                " other")))));
+                " ",
+                other)))));
 };
-const DataGridFilterTagComponent = ({ triggerRef, filter, mode, onFilterRemove, onFilterOpen, translations, customEditTagContent, ...rest }, ref) => {
-    const { addButtonCaption = "Add filter" } = translations || {};
+const DataGridFilterTagComponent = ({ triggerRef, filter, mode, onFilterRemove, onFilterOpen, translations, dateTagCaption, customEditTagContent, ...rest }, ref) => {
+    const { addButtonCaption = "Add filter", or = "or", other = "other", dateIs = "Date is" } = translations || {};
     const shouldRenderAddTag = mode === "ADD";
     const shouldRenderEditTag = mode === "EDIT" && filter;
+    const shouldRenderAddDateTag = mode === "ADD_DATE";
     return (React.createElement("div", { ...rest, ref: ref, className: classes["filter-wrapper"] },
         React.createElement("button", { ref: triggerRef, type: "button", className: classes["filter-button"], onClick: onFilterOpen },
             shouldRenderAddTag && (React.createElement(Fragment, null,
                 React.createElement(Icon, { icon: Icons.AddCircle }),
                 React.createElement(Typography, { variant: "body", className: classes["caption"] }, addButtonCaption))),
-            shouldRenderEditTag && (React.createElement(Typography, { variant: "body", className: classes["caption"] }, customEditTagContent ? (React.cloneElement(customEditTagContent, { filter })) : (React.createElement(EditTagContent, { filter: filter }))))),
+            shouldRenderEditTag && (React.createElement(Typography, { variant: "body", className: classes["caption"] }, customEditTagContent ? (React.cloneElement(customEditTagContent, { filter })) : (React.createElement(EditTagContent, { filter: filter, or: or, other: other })))),
+            shouldRenderAddDateTag && (React.createElement(Fragment, null,
+                React.createElement(Icon, { icon: Icons.Calendar }),
+                React.createElement(Typography, { variant: "body", className: classes["caption"] },
+                    dateIs,
+                    " ",
+                    React.createElement("b", null, dateTagCaption))))),
         shouldRenderEditTag && (React.createElement(RemoveButton, { className: classes["remove-button"], onRemove: onFilterRemove }))));
 };
 const DataGridFilterTag = React.forwardRef(DataGridFilterTagComponent);

package/dist/esm/DataGrid/DataGridFilters/DataGridFilterTag.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataGridFilterTag.esm.js","sources":["../../../../../../src/components/DataGrid/DataGridFilters/DataGridFilterTag.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, { ComponentPropsWithRef, ForwardRefRenderFunction, Fragment } from \"react\";\nimport { Icon, Icons } from \"../../Icon/Icon\";\nimport { RemoveButton } from \"../../Tag/RemoveButton\";\nimport { Typography } from \"../../Typography/Typography\";\nimport classes from \"./DataGridFilter.module.scss\";\nimport { Filter, FilterEditorMode, TagTranslations } from \"./DataGridFilters.interfaces\";\n\nexport interface DataGridFilterTagProps extends ComponentPropsWithRef<\"div\"> {\n  customEditTagContent?: React.ReactElement;\n  triggerRef: React.Ref<HTMLButtonElement>;\n  filter?: Filter;\n  mode: FilterEditorMode;\n  onFilterRemove: () => void;\n  onFilterOpen: () => void;\n  translations?: TagTranslations;\n}\n\nconst EditTagContent = ({ filter }: { filter: Filter }) => {\n  const { column, operator, value } = filter;\n\n  return (\n    <Fragment>\n      {column} {operator} {value.length > 0 && <b>{value[0]}</b>}\n      {value.length >= 2 && (\n        <>\n          or <b> {value.length - 1} other</b>\n        </>\n      )}\n    </Fragment>\n  );\n};\n\nexport const DataGridFilterTagComponent: ForwardRefRenderFunction<\n  HTMLDivElement,\n  DataGridFilterTagProps\n> = (\n  {\n    triggerRef,\n    filter,\n    mode,\n    onFilterRemove,\n    onFilterOpen,\n    translations,\n    customEditTagContent,\n    ...rest\n  }: DataGridFilterTagProps,\n  ref\n) => {\n  const { addButtonCaption = \"Add filter\" } = translations || {};\n  const shouldRenderAddTag = mode === \"ADD\";\n  const shouldRenderEditTag = mode === \"EDIT\" && filter;\n\n  return (\n    <div {...rest} ref={ref} className={classes[\"filter-wrapper\"]}>\n      <button\n        ref={triggerRef}\n        type=\"button\"\n        className={classes[\"filter-button\"]}\n        onClick={onFilterOpen}\n      >\n        {shouldRenderAddTag && (\n          <Fragment>\n            <Icon icon={Icons.AddCircle} />\n            <Typography variant=\"body\" className={classes[\"caption\"]}>\n              {addButtonCaption}\n            </Typography>\n          </Fragment>\n        )}\n        {shouldRenderEditTag && (\n          <Typography variant=\"body\" className={classes[\"caption\"]}>\n            {customEditTagContent ? (\n              React.cloneElement(customEditTagContent, { filter })\n            ) : (\n              <EditTagContent filter={filter} />\n            )}\n          </Typography>\n        )}\n      </button>\n      {shouldRenderEditTag && (\n        <RemoveButton className={classes[\"remove-button\"]} onRemove={onFilterRemove} />\n      )}\n    </div>\n  );\n};\n\nexport const DataGridFilterTag = React.forwardRef(DataGridFilterTagComponent);\n"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;;;;;;AAcG;AAmBH,MAAM,cAAc,GAAG,CAAC,EAAE,MAAM,EAAsB,KAAI;IACxD,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,MAAM,CAAC;IAE3C,QACE,oBAAC,QAAQ,EAAA,IAAA;QACN,MAAM;;QAAG,QAAQ;;QAAG,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,+BAAI,KAAK,CAAC,CAAC,CAAC,CAAK;AACzD,QAAA,KAAK,CAAC,MAAM,IAAI,CAAC,KAChB,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA;;AACK,YAAA,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,IAAA;;gBAAK,KAAK,CAAC,MAAM,GAAG,CAAC;yBAAW,CAClC,CACJ,CACQ,EACX;AACJ,CAAC,CAAC;AAEW,MAAA,0BAA0B,GAGnC,CACF,EACE,UAAU,EACV,MAAM,EACN,IAAI,EACJ,cAAc,EACd,YAAY,EACZ,YAAY,EACZ,oBAAoB,EACpB,GAAG,IAAI,EACgB,EACzB,GAAG,KACD;IACF,MAAM,EAAE,gBAAgB,GAAG,YAAY,EAAE,GAAG,YAAY,IAAI,EAAE,CAAC;AAC/D,IAAA,MAAM,kBAAkB,GAAG,IAAI,KAAK,KAAK,CAAC;AAC1C,IAAA,MAAM,mBAAmB,GAAG,IAAI,KAAK,MAAM,IAAI,MAAM,CAAC;AAEtD,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAS,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,CAAC,gBAAgB,CAAC,EAAA;AAC3D,QAAA,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EACE,GAAG,EAAE,UAAU,EACf,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,OAAO,CAAC,eAAe,CAAC,EACnC,OAAO,EAAE,YAAY,EAAA;YAEpB,kBAAkB,KACjB,KAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,IAAA;AACP,gBAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,IAAI,EAAE,KAAK,CAAC,SAAS,EAAI,CAAA;AAC/B,gBAAA,KAAA,CAAA,aAAA,CAAC,UAAU,EAAC,EAAA,OAAO,EAAC,MAAM,EAAC,SAAS,EAAE,OAAO,CAAC,SAAS,CAAC,EAAA,EACrD,gBAAgB,CACN,CACJ,CACZ;YACA,mBAAmB,KAClB,KAAC,CAAA,aAAA,CAAA,UAAU,IAAC,OAAO,EAAC,MAAM,EAAC,SAAS,EAAE,OAAO,CAAC,SAAS,CAAC,EAAA,EACrD,oBAAoB,IACnB,KAAK,CAAC,YAAY,CAAC,oBAAoB,EAAE,EAAE,MAAM,EAAE,CAAC,KAEpD,KAAC,CAAA,aAAA,CAAA,cAAc,IAAC,MAAM,EAAE,MAAM,EAAI,CAAA,CACnC,CACU,CACd,CACM;AACR,QAAA,mBAAmB,KAClB,KAAA,CAAA,aAAA,CAAC,YAAY,EAAC,EAAA,SAAS,EAAE,OAAO,CAAC,eAAe,CAAC,EAAE,QAAQ,EAAE,cAAc,GAAI,CAChF,CACG,EACN;AACJ,EAAE;AAEW,MAAA,iBAAiB,GAAG,KAAK,CAAC,UAAU,CAAC,0BAA0B;;;;"}
+{"version":3,"file":"DataGridFilterTag.esm.js","sources":["../../../../../../src/components/DataGrid/DataGridFilters/DataGridFilterTag.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, { ComponentPropsWithRef, ForwardRefRenderFunction, Fragment } from \"react\";\nimport { Icon, Icons } from \"../../Icon/Icon\";\nimport { RemoveButton } from \"../../Tag/RemoveButton\";\nimport { Typography } from \"../../Typography/Typography\";\nimport classes from \"./DataGridFilter.module.scss\";\nimport { Filter, FilterEditorMode, TagTranslations } from \"./DataGridFilters.interfaces\";\n\nexport interface DataGridFilterTagProps extends ComponentPropsWithRef<\"div\"> {\n  customEditTagContent?: React.ReactElement;\n  triggerRef: React.Ref<HTMLButtonElement>;\n  filter?: Filter;\n  mode: FilterEditorMode;\n  onFilterRemove?: () => void;\n  onFilterOpen: () => void;\n  translations?: TagTranslations;\n  dateTagCaption?: string;\n}\n\nconst EditTagContent = ({ filter, or, other }: { filter: Filter; or: string; other: string }) => {\n  const { column, operator, value } = filter;\n\n  return (\n    <Fragment>\n      {column} {operator} {value.length > 0 && <b>{value[0]}</b>}\n      {value.length >= 2 && (\n        <>\n          {\" \"}\n          {or}{\" \"}\n          <b>\n            {value.length - 1} {other}\n          </b>\n        </>\n      )}\n    </Fragment>\n  );\n};\n\nexport const DataGridFilterTagComponent: ForwardRefRenderFunction<\n  HTMLDivElement,\n  DataGridFilterTagProps\n> = (\n  {\n    triggerRef,\n    filter,\n    mode,\n    onFilterRemove,\n    onFilterOpen,\n    translations,\n    dateTagCaption,\n    customEditTagContent,\n    ...rest\n  }: DataGridFilterTagProps,\n  ref\n) => {\n  const {\n    addButtonCaption = \"Add filter\",\n    or = \"or\",\n    other = \"other\",\n    dateIs = \"Date is\"\n  } = translations || {};\n  const shouldRenderAddTag = mode === \"ADD\";\n  const shouldRenderEditTag = mode === \"EDIT\" && filter;\n  const shouldRenderAddDateTag = mode === \"ADD_DATE\";\n\n  return (\n    <div {...rest} ref={ref} className={classes[\"filter-wrapper\"]}>\n      <button\n        ref={triggerRef}\n        type=\"button\"\n        className={classes[\"filter-button\"]}\n        onClick={onFilterOpen}\n      >\n        {shouldRenderAddTag && (\n          <Fragment>\n            <Icon icon={Icons.AddCircle} />\n            <Typography variant=\"body\" className={classes[\"caption\"]}>\n              {addButtonCaption}\n            </Typography>\n          </Fragment>\n        )}\n        {shouldRenderEditTag && (\n          <Typography variant=\"body\" className={classes[\"caption\"]}>\n            {customEditTagContent ? (\n              React.cloneElement(customEditTagContent, { filter })\n            ) : (\n              <EditTagContent filter={filter} or={or} other={other} />\n            )}\n          </Typography>\n        )}\n        {shouldRenderAddDateTag && (\n          <Fragment>\n            <Icon icon={Icons.Calendar} />\n            <Typography variant=\"body\" className={classes[\"caption\"]}>\n              {dateIs} <b>{dateTagCaption}</b>\n            </Typography>\n          </Fragment>\n        )}\n      </button>\n      {shouldRenderEditTag && (\n        <RemoveButton className={classes[\"remove-button\"]} onRemove={onFilterRemove} />\n      )}\n    </div>\n  );\n};\n\nexport const DataGridFilterTag = React.forwardRef(DataGridFilterTagComponent);\n"],"names":[],"mappings":"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"}

package/dist/esm/DataGrid/DataGridFilters/DataGridFilters.interfaces.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataGridFilters.interfaces.esm.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 Filter {\n  id: string;\n  column: string;\n  operator: string;\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: \"clear\";\n    };\n\nexport type FiltersState = {\n  filters: Filter[];\n};\n\nexport type FilterEditorMode = \"ADD\" | \"EDIT\";\n\nexport enum DefaultOperators {\n  is = \"is\",\n  isNot = \"is not\",\n  contains = \"contains\",\n  doesNotContain = \"does not contain\",\n  isEmpty = \"is empty\"\n}\n\nexport interface DataGridColumnMetadata {\n  name: string;\n  headline: string;\n  operators?: string[];\n  defaultValues?: string[];\n  disableAddNew?: boolean;\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}\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"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;AAcG;IAgCS,iBAMX;AAND,CAAA,UAAY,gBAAgB,EAAA;AAC1B,IAAA,gBAAA,CAAA,IAAA,CAAA,GAAA,IAAS,CAAA;AACT,IAAA,gBAAA,CAAA,OAAA,CAAA,GAAA,QAAgB,CAAA;AAChB,IAAA,gBAAA,CAAA,UAAA,CAAA,GAAA,UAAqB,CAAA;AACrB,IAAA,gBAAA,CAAA,gBAAA,CAAA,GAAA,kBAAmC,CAAA;AACnC,IAAA,gBAAA,CAAA,SAAA,CAAA,GAAA,UAAoB,CAAA;AACtB,CAAC,EANW,gBAAgB,KAAhB,gBAAgB,GAM3B,EAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"DataGridFilters.interfaces.esm.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 Filter {\n  id: string;\n  column: string;\n  operator: string;\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: \"clear\";\n    };\n\nexport type FiltersState = {\n  filters: Filter[];\n};\n\nexport type FilterEditorMode = \"ADD\" | \"EDIT\" | \"ADD_DATE\";\n\nexport enum DefaultOperators {\n  is = \"is\",\n  isNot = \"is not\",\n  contains = \"contains\",\n  doesNotContain = \"does not contain\",\n  isEmpty = \"is empty\"\n}\n\nexport interface DataGridColumnMetadata {\n  name: string;\n  headline: string;\n  operators?: string[];\n  defaultValues?: string[];\n  disableAddNew?: boolean;\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"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;AAcG;IAgCS,iBAMX;AAND,CAAA,UAAY,gBAAgB,EAAA;AAC1B,IAAA,gBAAA,CAAA,IAAA,CAAA,GAAA,IAAS,CAAA;AACT,IAAA,gBAAA,CAAA,OAAA,CAAA,GAAA,QAAgB,CAAA;AAChB,IAAA,gBAAA,CAAA,UAAA,CAAA,GAAA,UAAqB,CAAA;AACrB,IAAA,gBAAA,CAAA,gBAAA,CAAA,GAAA,kBAAmC,CAAA;AACnC,IAAA,gBAAA,CAAA,SAAA,CAAA,GAAA,UAAoB,CAAA;AACtB,CAAC,EANW,gBAAgB,KAAhB,gBAAgB,GAM3B,EAAA,CAAA,CAAA;;;;"}

package/dist/esm/DataGrid/DataGridFilters/DataGridToolbar.esm.js

@@ -3,6 +3,7 @@ import { DataGridFilter } from './DataGridFilter.esm.js';
 import classes from './DataGridToolbar.module.scss.esm.js';
 import { Typography } from '../../Typography/Typography.esm.js';
 import { useFiltersReducer } from './useFiltersReducer.esm.js';
+import { DataGridDateFilter } from './DataGridDateFilter.esm.js';
 
 /*
  * Copyright 2022 OneWelcome B.V.
@@ -19,27 +20,29 @@ import { useFiltersReducer } from './useFiltersReducer.esm.js';
  *    See the License for the specific language governing permissions and
  *    limitations under the License.
  */
-const DataGridToolbar = ({ columnsMetadata, filterValues, translations, onFilterAdd, onFilterEdit, onFilterDelete, onFiltersClear, customEditTagContent }) => {
+const DataGridToolbar = ({ columnsMetadata, filterValues, translations, onFilterAdd, onFilterEdit, onFilterDelete, dateFilterValue, onDateFilterValueChange, onFiltersClear, customEditTagContent }) => {
     const { state, addFilter, editFilter, deleteFilter, clearFilters } = useFiltersReducer(filterValues);
     const { clearButtonCaption = "Clear all filters" } = (translations === null || translations === void 0 ? void 0 : translations.toolbar) || {};
     return (React.createElement(Fragment, null,
-        state.filters.map(filter => (React.createElement(DataGridFilter, { mode: "EDIT", key: filter.id, filter: filter, columnsMetadata: columnsMetadata, onFilterEdit: filter => {
-                editFilter(filter);
-                onFilterEdit && onFilterEdit(filter);
-            }, onFilterDelete: id => {
-                deleteFilter(id);
-                onFilterDelete && onFilterDelete(id);
-            }, tagTranslations: translations === null || translations === void 0 ? void 0 : translations.tag, popoverTranslations: translations === null || translations === void 0 ? void 0 : translations.popover, customEditTagContent: customEditTagContent }))),
+        columnsMetadata &&
+            state.filters.map(filter => (React.createElement(DataGridFilter, { mode: "EDIT", key: filter.id, filter: filter, columnsMetadata: columnsMetadata, onFilterEdit: filter => {
+                    editFilter(filter);
+                    onFilterEdit && onFilterEdit(filter);
+                }, onFilterDelete: id => {
+                    deleteFilter(id);
+                    onFilterDelete && onFilterDelete(id);
+                }, tagTranslations: translations === null || translations === void 0 ? void 0 : translations.tag, popoverTranslations: translations === null || translations === void 0 ? void 0 : translations.popover, customEditTagContent: customEditTagContent }))),
         React.createElement("div", { className: classes["actions-wrapper"] },
-            React.createElement(DataGridFilter, { mode: "ADD", customEditTagContent: customEditTagContent, columnsMetadata: columnsMetadata, onFilterAdd: filter => {
+            columnsMetadata && (React.createElement(DataGridFilter, { mode: "ADD", customEditTagContent: customEditTagContent, columnsMetadata: columnsMetadata, onFilterAdd: filter => {
                     addFilter(filter);
                     onFilterAdd && onFilterAdd(filter);
-                }, tagTranslations: translations === null || translations === void 0 ? void 0 : translations.tag, popoverTranslations: translations === null || translations === void 0 ? void 0 : translations.popover }),
-            state.filters.length >= 1 && (React.createElement("button", { type: "button", className: classes["clear-button"], onClick: () => {
+                }, tagTranslations: translations === null || translations === void 0 ? void 0 : translations.tag, popoverTranslations: translations === null || translations === void 0 ? void 0 : translations.popover })),
+            columnsMetadata && state.filters.length >= 1 && (React.createElement("button", { type: "button", className: classes["clear-button"], onClick: () => {
                     clearFilters();
                     onFiltersClear && onFiltersClear();
                 } },
-                React.createElement(Typography, { variant: "body", className: classes["caption"] }, clearButtonCaption))))));
+                React.createElement(Typography, { variant: "body", className: classes["caption"] }, clearButtonCaption))),
+            dateFilterValue && (React.createElement(DataGridDateFilter, { dateFilterValue: dateFilterValue, onDateFilterValueChange: onDateFilterValueChange })))));
 };
 
 export { DataGridToolbar };

package/dist/esm/DataGrid/DataGridFilters/DataGridToolbar.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataGridToolbar.esm.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 } from \"react\";\nimport { DataGridFilter } from \"./DataGridFilter\";\nimport classes from \"./DataGridToolbar.module.scss\";\nimport { DataGridColumnMetadata, Filter, FiltersTranslations } from \"./DataGridFilters.interfaces\";\nimport { Typography } from \"../../Typography/Typography\";\nimport { useFiltersReducer } from \"./useFiltersReducer\";\n\nexport interface DataGridToolbarProps {\n  columnsMetadata: DataGridColumnMetadata[];\n  customEditTagContent?: React.ReactElement;\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  onFiltersClear,\n  customEditTagContent\n}: DataGridToolbarProps) => {\n  const { state, addFilter, editFilter, deleteFilter, clearFilters } =\n    useFiltersReducer(filterValues);\n  const { clearButtonCaption = \"Clear all filters\" } = translations?.toolbar || {};\n  return (\n    <Fragment>\n      {state.filters.map(filter => (\n        <DataGridFilter\n          mode=\"EDIT\"\n          key={filter.id}\n          filter={filter}\n          columnsMetadata={columnsMetadata}\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        <DataGridFilter\n          mode=\"ADD\"\n          customEditTagContent={customEditTagContent}\n          columnsMetadata={columnsMetadata}\n          onFilterAdd={filter => {\n            addFilter(filter);\n            onFilterAdd && onFilterAdd(filter);\n          }}\n          tagTranslations={translations?.tag}\n          popoverTranslations={translations?.popover}\n        />\n        {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":[],"mappings":";;;;;;AAAA;;;;;;;;;;;;;;AAcG;MAoBU,eAAe,GAAG,CAAC,EAC9B,eAAe,EACf,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,cAAc,EACd,cAAc,EACd,oBAAoB,EACC,KAAI;AACzB,IAAA,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,YAAY,EAAE,YAAY,EAAE,GAChE,iBAAiB,CAAC,YAAY,CAAC,CAAC;AAClC,IAAA,MAAM,EAAE,kBAAkB,GAAG,mBAAmB,EAAE,GAAG,CAAA,YAAY,KAAZ,IAAA,IAAA,YAAY,uBAAZ,YAAY,CAAE,OAAO,KAAI,EAAE,CAAC;IACjF,QACE,oBAAC,QAAQ,EAAA,IAAA;AACN,QAAA,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,KACvB,KAAC,CAAA,aAAA,CAAA,cAAc,EACb,EAAA,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,MAAM,CAAC,EAAE,EACd,MAAM,EAAE,MAAM,EACd,eAAe,EAAE,eAAe,EAChC,YAAY,EAAE,MAAM,IAAG;gBACrB,UAAU,CAAC,MAAM,CAAC,CAAC;AACnB,gBAAA,YAAY,IAAI,YAAY,CAAC,MAAM,CAAC,CAAC;AACvC,aAAC,EACD,cAAc,EAAE,EAAE,IAAG;gBACnB,YAAY,CAAC,EAAE,CAAC,CAAC;AACjB,gBAAA,cAAc,IAAI,cAAc,CAAC,EAAE,CAAC,CAAC;aACtC,EACD,eAAe,EAAE,YAAY,KAAA,IAAA,IAAZ,YAAY,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAZ,YAAY,CAAE,GAAG,EAClC,mBAAmB,EAAE,YAAY,KAAZ,IAAA,IAAA,YAAY,KAAZ,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,YAAY,CAAE,OAAO,EAC1C,oBAAoB,EAAE,oBAAoB,EAC1C,CAAA,CACH,CAAC;AACF,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,OAAO,CAAC,iBAAiB,CAAC,EAAA;AACxC,YAAA,KAAA,CAAA,aAAA,CAAC,cAAc,EACb,EAAA,IAAI,EAAC,KAAK,EACV,oBAAoB,EAAE,oBAAoB,EAC1C,eAAe,EAAE,eAAe,EAChC,WAAW,EAAE,MAAM,IAAG;oBACpB,SAAS,CAAC,MAAM,CAAC,CAAC;AAClB,oBAAA,WAAW,IAAI,WAAW,CAAC,MAAM,CAAC,CAAC;iBACpC,EACD,eAAe,EAAE,YAAY,aAAZ,YAAY,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAZ,YAAY,CAAE,GAAG,EAClC,mBAAmB,EAAE,YAAY,KAAZ,IAAA,IAAA,YAAY,uBAAZ,YAAY,CAAE,OAAO,EAC1C,CAAA;YACD,KAAK,CAAC,OAAO,CAAC,MAAM,IAAI,CAAC,KACxB,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,OAAO,CAAC,cAAc,CAAC,EAClC,OAAO,EAAE,MAAK;AACZ,oBAAA,YAAY,EAAE,CAAC;oBACf,cAAc,IAAI,cAAc,EAAE,CAAC;iBACpC,EAAA;gBAED,KAAC,CAAA,aAAA,CAAA,UAAU,IAAC,OAAO,EAAC,MAAM,EAAC,SAAS,EAAE,OAAO,CAAC,SAAS,CAAC,EAAA,EACrD,kBAAkB,CACR,CACN,CACV,CACG,CACG,EACX;AACJ;;;;"}
+{"version":3,"file":"DataGridToolbar.esm.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 } 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, clearFilters } =\n    useFiltersReducer(filterValues);\n  const { clearButtonCaption = \"Clear all filters\" } = translations?.toolbar || {};\n  return (\n    <Fragment>\n      {columnsMetadata &&\n        state.filters.map(filter => (\n          <DataGridFilter\n            mode=\"EDIT\"\n            key={filter.id}\n            filter={filter}\n            columnsMetadata={columnsMetadata}\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            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\n        {dateFilterValue && (\n          <DataGridDateFilter\n            dateFilterValue={dateFilterValue}\n            onDateFilterValueChange={onDateFilterValueChange}\n          />\n        )}\n      </div>\n    </Fragment>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/DataGrid/DataGridFilters/DateTimePicker/DateTimePicker.esm.js

@@ -0,0 +1,138 @@
+import React, { useState, useEffect } from 'react';
+import { Popover } from '../../../Popover/Popover.esm.js';
+import classes from './DateTimePicker.module.scss.esm.js';
+import { Button } from '../../../Button/Button.esm.js';
+import { CUSTOM_DATE_RANGE, formatInputDate, THIRTY_SECONDS, ONE_MINUTE, FIVE_MINUTES, ONE_HOUR, TWENTY_FOUR_HOURS } from './DateTimeService.esm.js';
+import { SideMenu } from './SideMenu.esm.js';
+import { addSeconds } from 'date-fns';
+import { DateTimePickerInputSection } from './DateTimePickerInputSection.esm.js';
+import { DateTimePickerCalendarSection } from './DateTimePickerCalendarSection.esm.js';
+import { useRepeatFocus } from '../../../src/hooks/useRepeatFocus.esm.js';
+
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+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 || dateFilterValue === void 0 ? void 0 : dateFilterValue.fromDate) ? new Date(dateFilterValue === null || dateFilterValue === void 0 ? void 0 : dateFilterValue.fromDate) : undefined,
+        to: (dateFilterValue === null || dateFilterValue === void 0 ? void 0 : dateFilterValue.toDate) ? new Date(dateFilterValue === null || dateFilterValue === void 0 ? void 0 : dateFilterValue.toDate) : undefined
+    });
+    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 || _a === void 0 ? 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 || foundItem === void 0 ? void 0 : foundItem.rangeSeconds) && dateFilterValue.type !== CUSTOM_DATE_RANGE) {
+                const fromDate = addSeconds(new Date(), -foundItem.rangeSeconds);
+                const toDate = 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 || dateFilterValue === void 0 ? void 0 : dateFilterValue.fromDate) ? new Date(dateFilterValue === null || dateFilterValue === void 0 ? void 0 : dateFilterValue.fromDate) : undefined,
+                to: (dateFilterValue === null || dateFilterValue === void 0 ? void 0 : dateFilterValue.toDate) ? new Date(dateFilterValue === null || dateFilterValue === void 0 ? void 0 : dateFilterValue.toDate) : undefined
+            });
+        }
+    }, [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(new Date(), -foundItem.rangeSeconds);
+                const toDate = new Date();
+                setSelectedDate({ from: fromDate, to: toDate });
+                setFromDateText(formatInputDate(fromDate));
+                setToDateText(formatInputDate(toDate));
+            }
+        }
+    };
+    const closeDateTimePicker = () => {
+        setPickerOpen(false);
+    };
+    const saveDateTimePicker = () => {
+        var _a, _b, _c, _d;
+        onDateFilterValueChange &&
+            onDateFilterValueChange({
+                toDate: (_b = (_a = selectedDate.to) === null || _a === void 0 ? void 0 : _a.toISOString()) !== null && _b !== void 0 ? _b : "",
+                fromDate: (_d = (_c = selectedDate.from) === null || _c === void 0 ? void 0 : _c.toISOString()) !== null && _d !== void 0 ? _d : "",
+                type: selectedPredefinedRange
+            });
+        setPickerOpen(false);
+    };
+    return (React.createElement(Popover, { tabIndex: -1, anchorEl: anchorRef, ref: popoverRef, show: isOpen, placement: { horizontal: "left", vertical: "bottom" }, transformOrigin: { horizontal: "left", vertical: "top" } }, isOpen && (React.createElement("div", { className: classes["popover"] },
+        React.createElement("div", { className: classes["content-wrapper"] },
+            React.createElement("div", { className: classes["aside"] },
+                React.createElement(SideMenu, { sideMenuItems: sideMenuItems, selectedItemId: selectedPredefinedRange, onItemSelect: onSideMenuItemSelect })),
+            React.createElement("div", { className: `${classes["controls"]} ${toDateError || fromDateError ? classes["has-error"] : ""}` },
+                React.createElement("div", { className: classes["controls-panel"] },
+                    React.createElement(DateTimePickerInputSection, { from: from, to: to, dateInputPlaceholder: dateInputPlaceholder, dateFormatError: dateFormatError, fromDateText: fromDateText, toDateText: toDateText, fromDateError: fromDateError, toDateError: toDateError, setSelectedDate: setSelectedDate, setFromDateText: setFromDateText, setToDateText: setToDateText, setFromDateError: setFromDateError, setToDateError: setToDateError })),
+                React.createElement("div", { className: `${classes["controls-panel"]} ${classes["set-height"]}` },
+                    React.createElement(DateTimePickerCalendarSection, { previousMonth: previousMonth, nextMonth: nextMonth, selectedDate: selectedDate, disableDateRangePickers: disableDateRangePickers, setSelectedDate: setSelectedDate, setFromDateText: setFromDateText, setFromDateError: setFromDateError, setToDateText: setToDateText, setToDateError: setToDateError })))),
+        React.createElement("div", { className: classes["actions"] },
+            React.createElement(Button, { variant: "text", onClick: closeDateTimePicker }, cancel),
+            React.createElement(Button, { onClick: saveDateTimePicker }, apply))))));
+};
+
+export { DateTimePicker, dateFormat };
+//# sourceMappingURL=DateTimePicker.esm.js.map

package/dist/esm/DataGrid/DataGridFilters/DateTimePicker/DateTimePicker.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimePicker.esm.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/esm/DataGrid/DataGridFilters/DateTimePicker/DateTimePicker.module.scss.esm.js

@@ -0,0 +1,8 @@
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.esm.js';
+
+var css_248z = ".DateTimePicker-module_popover__2CRRN{align-items:flex-start;display:flex;flex-direction:column;min-width:40rem}.DateTimePicker-module_popover__2CRRN .DateTimePicker-module_content-wrapper__yOk2t{display:flex}.DateTimePicker-module_popover__2CRRN .DateTimePicker-module_aside__0STn4{border-right:1px solid var(--color-blue-grey100);display:flex;flex-direction:column;width:9.25rem}.DateTimePicker-module_popover__2CRRN .DateTimePicker-module_aside-menu__RVU3-{list-style:none;margin:.5rem 0;padding:0;white-space:nowrap}.DateTimePicker-module_popover__2CRRN .DateTimePicker-module_aside-menu-item__sf9Y-{height:2rem}.DateTimePicker-module_popover__2CRRN .DateTimePicker-module_aside-menu-item__sf9Y- button{font-size:.75rem;line-height:1rem;padding:.5rem .75rem;text-align:start}.DateTimePicker-module_popover__2CRRN .DateTimePicker-module_controls__mnsPX{display:flex;flex-direction:column;flex-grow:1;gap:2rem;padding:2rem 2rem 0}.DateTimePicker-module_popover__2CRRN .DateTimePicker-module_controls__mnsPX.DateTimePicker-module_has-error__l5Ioq{gap:calc(2rem - 15.5681px)}.DateTimePicker-module_popover__2CRRN .DateTimePicker-module_controls-panel__XZHbs{display:flex;gap:2rem}.DateTimePicker-module_popover__2CRRN .DateTimePicker-module_controls-panel__XZHbs>*{flex-grow:1}.DateTimePicker-module_popover__2CRRN .DateTimePicker-module_controls-panel__XZHbs.DateTimePicker-module_set-height__3vtzW{min-height:17.5rem}.DateTimePicker-module_popover__2CRRN .DateTimePicker-module_actions__oxWZF{border-top:1px solid var(--color-blue-grey100);display:flex;flex-grow:1;gap:1rem;justify-content:space-between;padding:1rem 1.5rem;width:calc(100% - 3rem)}.DateTimePicker-module_popover__2CRRN .DateTimePicker-module_input__Dkca1{margin-top:0;max-width:14rem}.DateTimePicker-module_popover__2CRRN .DateTimePicker-module_input__Dkca1 label{font-size:.75rem}.DateTimePicker-module_popover__2CRRN .DateTimePicker-module_nav__-gi49{position:absolute}.DateTimePicker-module_popover__2CRRN .DateTimePicker-module_next-button__3-CLV{left:27.3125rem;position:absolute;top:0}.DateTimePicker-module_popover__2CRRN .DateTimePicker-module_prev-button__653ui{position:absolute;top:0}.DateTimePicker-module_popover__2CRRN .DateTimePicker-module_month-caption__1a8KN{font-size:.75rem;font-weight:500;height:2.5rem;line-height:1rem;margin:0;padding:.75rem 0;text-align:center;width:100%}.DateTimePicker-module_error-message__N-e9F{font-size:.625rem}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkRhdGVUaW1lUGlja2VyLm1vZHVsZS5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWVBLHNDQUdFLHNCQUF1QixDQUZ2QixZQUFhLENBQ2IscUJBQXNCLENBRXRCLGVBQ0YsQ0FDQSxvRkFDRSxZQUNGLENBQ0EsMEVBSUUsZ0RBQWlELENBSGpELFlBQWEsQ0FDYixxQkFBc0IsQ0FDdEIsYUFFRixDQUNBLCtFQUlFLGVBQWdCLENBSGhCLGNBQWdCLENBQ2hCLFNBQVUsQ0FDVixrQkFFRixDQUNBLG9GQUNFLFdBQ0YsQ0FDQSwyRkFFRSxnQkFBa0IsQ0FDbEIsZ0JBQWlCLENBRmpCLG9CQUF1QixDQUd2QixnQkFDRixDQUNBLDZFQUNFLFlBQWEsQ0FDYixxQkFBc0IsQ0FFdEIsV0FBWSxDQURaLFFBQVMsQ0FFVCxtQkFDRixDQUNBLG9IQUNFLDBCQUNGLENBQ0EsbUZBQ0UsWUFBYSxDQUNiLFFBQ0YsQ0FDQSxxRkFDRSxXQUNGLENBQ0EsMkhBQ0Usa0JBQ0YsQ0FDQSw0RUFNRSw4Q0FBK0MsQ0FML0MsWUFBYSxDQUdiLFdBQVksQ0FEWixRQUFTLENBRFQsNkJBQThCLENBSzlCLG1CQUFvQixDQUZwQix1QkFHRixDQUNBLDBFQUNFLFlBQWEsQ0FDYixlQUNGLENBQ0EsZ0ZBQ0UsZ0JBQ0YsQ0FDQSx3RUFDRSxpQkFDRixDQUNBLGdGQUVFLGVBQWdCLENBRGhCLGlCQUFrQixDQUVsQixLQUNGLENBQ0EsZ0ZBQ0UsaUJBQWtCLENBQ2xCLEtBQ0YsQ0FDQSxrRkFLRSxnQkFBa0IsQ0FDbEIsZUFBZ0IsQ0FKaEIsYUFBYyxDQUtkLGdCQUFpQixDQUpqQixRQUFTLENBQ1QsZ0JBQWtCLENBSWxCLGlCQUFrQixDQVBsQixVQVFGLENBRUEsNENBQ0UsaUJBQ0YiLCJmaWxlIjoiRGF0ZVRpbWVQaWNrZXIubW9kdWxlLnNjc3MiLCJzb3VyY2VzQ29udGVudCI6WyIvKlxuICogQ29weXJpZ2h0IDIwMjIgT25lV2VsY29tZSBCLlYuXG4gKlxuICogICAgTGljZW5zZWQgdW5kZXIgdGhlIEFwYWNoZSBMaWNlbnNlLCBWZXJzaW9uIDIuMCAodGhlIFwiTGljZW5zZVwiKTtcbiAqICAgIHlvdSBtYXkgbm90IHVzZSB0aGlzIGZpbGUgZXhjZXB0IGluIGNvbXBsaWFuY2Ugd2l0aCB0aGUgTGljZW5zZS5cbiAqICAgIFlvdSBtYXkgb2J0YWluIGEgY29weSBvZiB0aGUgTGljZW5zZSBhdFxuICpcbiAqICAgICAgICBodHRwOi8vd3d3LmFwYWNoZS5vcmcvbGljZW5zZXMvTElDRU5TRS0yLjBcbiAqXG4gKiAgICBVbmxlc3MgcmVxdWlyZWQgYnkgYXBwbGljYWJsZSBsYXcgb3IgYWdyZWVkIHRvIGluIHdyaXRpbmcsIHNvZnR3YXJlXG4gKiAgICBkaXN0cmlidXRlZCB1bmRlciB0aGUgTGljZW5zZSBpcyBkaXN0cmlidXRlZCBvbiBhbiBcIkFTIElTXCIgQkFTSVMsXG4gKiAgICBXSVRIT1VUIFdBUlJBTlRJRVMgT1IgQ09ORElUSU9OUyBPRiBBTlkgS0lORCwgZWl0aGVyIGV4cHJlc3Mgb3IgaW1wbGllZC5cbiAqICAgIFNlZSB0aGUgTGljZW5zZSBmb3IgdGhlIHNwZWNpZmljIGxhbmd1YWdlIGdvdmVybmluZyBwZXJtaXNzaW9ucyBhbmRcbiAqICAgIGxpbWl0YXRpb25zIHVuZGVyIHRoZSBMaWNlbnNlLlxuICovXG4ucG9wb3ZlciB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIGFsaWduLWl0ZW1zOiBmbGV4LXN0YXJ0O1xuICBtaW4td2lkdGg6IDQwcmVtO1xufVxuLnBvcG92ZXIgLmNvbnRlbnQtd3JhcHBlciB7XG4gIGRpc3BsYXk6IGZsZXg7XG59XG4ucG9wb3ZlciAuYXNpZGUge1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICB3aWR0aDogOS4yNXJlbTtcbiAgYm9yZGVyLXJpZ2h0OiAxcHggc29saWQgdmFyKC0tY29sb3ItYmx1ZS1ncmV5MTAwKTtcbn1cbi5wb3BvdmVyIC5hc2lkZS1tZW51IHtcbiAgbWFyZ2luOiAwLjVyZW0gMDtcbiAgcGFkZGluZzogMDtcbiAgd2hpdGUtc3BhY2U6IG5vd3JhcDtcbiAgbGlzdC1zdHlsZTogbm9uZTtcbn1cbi5wb3BvdmVyIC5hc2lkZS1tZW51LWl0ZW0ge1xuICBoZWlnaHQ6IDJyZW07XG59XG4ucG9wb3ZlciAuYXNpZGUtbWVudS1pdGVtIGJ1dHRvbiB7XG4gIHBhZGRpbmc6IDAuNXJlbSAwLjc1cmVtO1xuICBmb250LXNpemU6IDAuNzVyZW07XG4gIGxpbmUtaGVpZ2h0OiAxcmVtO1xuICB0ZXh0LWFsaWduOiBzdGFydDtcbn1cbi5wb3BvdmVyIC5jb250cm9scyB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIGdhcDogMnJlbTtcbiAgZmxleC1ncm93OiAxO1xuICBwYWRkaW5nOiAycmVtIDJyZW0gMCAycmVtO1xufVxuLnBvcG92ZXIgLmNvbnRyb2xzLmhhcy1lcnJvciB7XG4gIGdhcDogY2FsYygycmVtIC0gMTUuNTY4MXB4KTtcbn1cbi5wb3BvdmVyIC5jb250cm9scy1wYW5lbCB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGdhcDogMnJlbTtcbn1cbi5wb3BvdmVyIC5jb250cm9scy1wYW5lbCA+ICoge1xuICBmbGV4LWdyb3c6IDE7XG59XG4ucG9wb3ZlciAuY29udHJvbHMtcGFuZWwuc2V0LWhlaWdodCB7XG4gIG1pbi1oZWlnaHQ6IDE3LjVyZW07XG59XG4ucG9wb3ZlciAuYWN0aW9ucyB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjtcbiAgZ2FwOiAxcmVtO1xuICBmbGV4LWdyb3c6IDE7XG4gIHdpZHRoOiBjYWxjKDEwMCUgLSAzcmVtKTtcbiAgYm9yZGVyLXRvcDogMXB4IHNvbGlkIHZhcigtLWNvbG9yLWJsdWUtZ3JleTEwMCk7XG4gIHBhZGRpbmc6IDFyZW0gMS41cmVtO1xufVxuLnBvcG92ZXIgLmlucHV0IHtcbiAgbWFyZ2luLXRvcDogMDtcbiAgbWF4LXdpZHRoOiAxNHJlbTtcbn1cbi5wb3BvdmVyIC5pbnB1dCBsYWJlbCB7XG4gIGZvbnQtc2l6ZTogMC43NXJlbTtcbn1cbi5wb3BvdmVyIC5uYXYge1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG59XG4ucG9wb3ZlciAubmV4dC1idXR0b24ge1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIGxlZnQ6IDI3LjMxMjVyZW07XG4gIHRvcDogMDtcbn1cbi5wb3BvdmVyIC5wcmV2LWJ1dHRvbiB7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgdG9wOiAwO1xufVxuLnBvcG92ZXIgLm1vbnRoLWNhcHRpb24ge1xuICB3aWR0aDogMTAwJTtcbiAgaGVpZ2h0OiAyLjVyZW07XG4gIG1hcmdpbjogMDtcbiAgcGFkZGluZzogMC43NXJlbSAwO1xuICBmb250LXNpemU6IDAuNzVyZW07XG4gIGZvbnQtd2VpZ2h0OiA1MDA7XG4gIGxpbmUtaGVpZ2h0OiAxcmVtO1xuICB0ZXh0LWFsaWduOiBjZW50ZXI7XG59XG5cbi5lcnJvci1tZXNzYWdlIHtcbiAgZm9udC1zaXplOiAwLjYyNXJlbTtcbn0iXX0= */";
+var classes = {"popover":"DateTimePicker-module_popover__2CRRN","content-wrapper":"DateTimePicker-module_content-wrapper__yOk2t","aside":"DateTimePicker-module_aside__0STn4","aside-menu":"DateTimePicker-module_aside-menu__RVU3-","aside-menu-item":"DateTimePicker-module_aside-menu-item__sf9Y-","controls":"DateTimePicker-module_controls__mnsPX","has-error":"DateTimePicker-module_has-error__l5Ioq","controls-panel":"DateTimePicker-module_controls-panel__XZHbs","set-height":"DateTimePicker-module_set-height__3vtzW","actions":"DateTimePicker-module_actions__oxWZF","input":"DateTimePicker-module_input__Dkca1","nav":"DateTimePicker-module_nav__-gi49","next-button":"DateTimePicker-module_next-button__3-CLV","prev-button":"DateTimePicker-module_prev-button__653ui","month-caption":"DateTimePicker-module_month-caption__1a8KN","error-message":"DateTimePicker-module_error-message__N-e9F"};
+styleInject(css_248z);
+
+export { classes as default };
+//# sourceMappingURL=DateTimePicker.module.scss.esm.js.map

package/dist/esm/DataGrid/DataGridFilters/DateTimePicker/DateTimePicker.module.scss.esm.js.map

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

package/dist/esm/DataGrid/DataGridFilters/DateTimePicker/DateTimePickerCalendarSection.esm.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import classes from './DateTimePicker.module.scss.esm.js';
+import { DatePicker } from '../../../DatePicker/DatePicker.esm.js';
+import { IconButton } from '../../../Button/IconButton.esm.js';
+import { getMonthName, getYearFromDate, formatInputDate } from './DateTimeService.esm.js';
+import { Icon, Icons } from '../../../Icon/Icon.esm.js';
+import { Typography } from '../../../Typography/Typography.esm.js';
+
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+const DateTimePickerCalendarSection = ({ previousMonth, nextMonth, selectedDate, disableDateRangePickers, setSelectedDate, setFromDateText, setFromDateError, setToDateError, setToDateText }) => {
+    const onDatePickerSelect = (date) => {
+        if (date) {
+            setSelectedDate(date);
+            const fromDate = date.from;
+            const toDate = date.to;
+            if (fromDate) {
+                setFromDateText(formatInputDate(fromDate));
+                setFromDateError("");
+            }
+            if (toDate) {
+                setToDateText(formatInputDate(toDate));
+                setToDateError("");
+            }
+        }
+    };
+    return (React.createElement(DatePicker, { onSelect: onDatePickerSelect, value: selectedDate, disabled: disableDateRangePickers, mode: "range", components: {
+            Nav: ({ onNextClick, onPreviousClick }) => (React.createElement("div", { className: classes["nav"] },
+                React.createElement(IconButton, { title: previousMonth, onClick: onPreviousClick, className: classes["prev-button"], disabled: disableDateRangePickers },
+                    React.createElement(Icon, { size: "0.75rem", icon: Icons.ChevronLeft })),
+                React.createElement(IconButton, { title: nextMonth, onClick: onNextClick, className: classes["next-button"], disabled: disableDateRangePickers },
+                    React.createElement(Icon, { size: "0.75rem", icon: Icons.ChevronRight })))),
+            MonthCaption: ({ calendarMonth }) => (React.createElement(Typography, { className: classes["month-caption"], variant: "body" },
+                getMonthName(calendarMonth.date),
+                " ",
+                getYearFromDate(calendarMonth.date)))
+        }, numberOfMonths: 2 }));
+};
+
+export { DateTimePickerCalendarSection };
+//# sourceMappingURL=DateTimePickerCalendarSection.esm.js.map

package/dist/esm/DataGrid/DataGridFilters/DateTimePicker/DateTimePickerCalendarSection.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimePickerCalendarSection.esm.js","sources":["../../../../../../../src/components/DataGrid/DataGridFilters/DateTimePicker/DateTimePickerCalendarSection.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 \"./DateTimePicker.module.scss\";\nimport { DatePicker } from \"../../../DatePicker/DatePicker\";\nimport { IconButton } from \"../../../Button/IconButton\";\nimport { DateRange } from \"react-day-picker\";\nimport { formatInputDate, getMonthName, getYearFromDate } from \"./DateTimeService\";\nimport { Icon, Icons } from \"../../../Icon/Icon\";\nimport { Typography } from \"../../../Typography/Typography\";\n\ntype Props = {\n  previousMonth: string;\n  nextMonth: string;\n  selectedDate: DateRange | undefined;\n  disableDateRangePickers: boolean;\n  setSelectedDate: React.Dispatch<React.SetStateAction<DateRange>>;\n  setFromDateText: React.Dispatch<React.SetStateAction<string>>;\n  setToDateText: React.Dispatch<React.SetStateAction<string>>;\n  setFromDateError: React.Dispatch<React.SetStateAction<string>>;\n  setToDateError: React.Dispatch<React.SetStateAction<string>>;\n};\n\nexport const DateTimePickerCalendarSection = ({\n  previousMonth,\n  nextMonth,\n  selectedDate,\n  disableDateRangePickers,\n  setSelectedDate,\n  setFromDateText,\n  setFromDateError,\n  setToDateError,\n  setToDateText\n}: Props) => {\n  const onDatePickerSelect = (date: Date | DateRange | undefined): void => {\n    if (date) {\n      setSelectedDate(date as DateRange);\n\n      const fromDate = (date as DateRange).from;\n      const toDate = (date as DateRange).to;\n\n      if (fromDate) {\n        setFromDateText(formatInputDate(fromDate));\n        setFromDateError(\"\");\n      }\n\n      if (toDate) {\n        setToDateText(formatInputDate(toDate));\n        setToDateError(\"\");\n      }\n    }\n  };\n  return (\n    <DatePicker\n      onSelect={onDatePickerSelect}\n      value={selectedDate}\n      disabled={disableDateRangePickers}\n      mode={\"range\"}\n      components={{\n        Nav: ({ onNextClick, onPreviousClick }) => (\n          <div className={classes[\"nav\"]}>\n            <IconButton\n              title={previousMonth}\n              onClick={onPreviousClick}\n              className={classes[\"prev-button\"]}\n              disabled={disableDateRangePickers}\n            >\n              <Icon size=\"0.75rem\" icon={Icons.ChevronLeft} />\n            </IconButton>\n            <IconButton\n              title={nextMonth}\n              onClick={onNextClick}\n              className={classes[\"next-button\"]}\n              disabled={disableDateRangePickers}\n            >\n              <Icon size=\"0.75rem\" icon={Icons.ChevronRight} />\n            </IconButton>\n          </div>\n        ),\n        MonthCaption: ({ calendarMonth }) => (\n          <Typography className={classes[\"month-caption\"]} variant=\"body\">\n            {getMonthName(calendarMonth.date)} {getYearFromDate(calendarMonth.date)}\n          </Typography>\n        )\n      }}\n      numberOfMonths={2}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAAA;;;;;;;;;;;;;;AAcG;AAuBU,MAAA,6BAA6B,GAAG,CAAC,EAC5C,aAAa,EACb,SAAS,EACT,YAAY,EACZ,uBAAuB,EACvB,eAAe,EACf,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,aAAa,EACP,KAAI;AACV,IAAA,MAAM,kBAAkB,GAAG,CAAC,IAAkC,KAAU;QACtE,IAAI,IAAI,EAAE;YACR,eAAe,CAAC,IAAiB,CAAC,CAAC;AAEnC,YAAA,MAAM,QAAQ,GAAI,IAAkB,CAAC,IAAI,CAAC;AAC1C,YAAA,MAAM,MAAM,GAAI,IAAkB,CAAC,EAAE,CAAC;YAEtC,IAAI,QAAQ,EAAE;AACZ,gBAAA,eAAe,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC,CAAC;gBAC3C,gBAAgB,CAAC,EAAE,CAAC,CAAC;aACtB;YAED,IAAI,MAAM,EAAE;AACV,gBAAA,aAAa,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,CAAC;gBACvC,cAAc,CAAC,EAAE,CAAC,CAAC;aACpB;SACF;AACH,KAAC,CAAC;IACF,QACE,oBAAC,UAAU,EAAA,EACT,QAAQ,EAAE,kBAAkB,EAC5B,KAAK,EAAE,YAAY,EACnB,QAAQ,EAAE,uBAAuB,EACjC,IAAI,EAAE,OAAO,EACb,UAAU,EAAE;AACV,YAAA,GAAG,EAAE,CAAC,EAAE,WAAW,EAAE,eAAe,EAAE,MACpC,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,OAAO,CAAC,KAAK,CAAC,EAAA;AAC5B,gBAAA,KAAA,CAAA,aAAA,CAAC,UAAU,EACT,EAAA,KAAK,EAAE,aAAa,EACpB,OAAO,EAAE,eAAe,EACxB,SAAS,EAAE,OAAO,CAAC,aAAa,CAAC,EACjC,QAAQ,EAAE,uBAAuB,EAAA;AAEjC,oBAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,SAAS,EAAC,IAAI,EAAE,KAAK,CAAC,WAAW,EAAA,CAAI,CACrC;AACb,gBAAA,KAAA,CAAA,aAAA,CAAC,UAAU,EACT,EAAA,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,OAAO,CAAC,aAAa,CAAC,EACjC,QAAQ,EAAE,uBAAuB,EAAA;AAEjC,oBAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,SAAS,EAAC,IAAI,EAAE,KAAK,CAAC,YAAY,EAAI,CAAA,CACtC,CACT,CACP;YACD,YAAY,EAAE,CAAC,EAAE,aAAa,EAAE,MAC9B,KAAA,CAAA,aAAA,CAAC,UAAU,EAAC,EAAA,SAAS,EAAE,OAAO,CAAC,eAAe,CAAC,EAAE,OAAO,EAAC,MAAM,EAAA;AAC5D,gBAAA,YAAY,CAAC,aAAa,CAAC,IAAI,CAAC;;AAAG,gBAAA,eAAe,CAAC,aAAa,CAAC,IAAI,CAAC,CAC5D,CACd;AACF,SAAA,EACD,cAAc,EAAE,CAAC,EAAA,CACjB,EACF;AACJ;;;;"}

package/dist/esm/DataGrid/DataGridFilters/DateTimePicker/DateTimePickerInputSection.esm.js

@@ -0,0 +1,51 @@
+import React, { Fragment } from 'react';
+import { InputWrapper } from '../../../Form/Wrapper/InputWrapper/InputWrapper.esm.js';
+import classes from './DateTimePicker.module.scss.esm.js';
+import { parse } from 'date-fns';
+
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+const DateTimePickerInputSection = ({ from, to, dateInputPlaceholder, dateFormatError, toDateText, fromDateText, fromDateError, toDateError, setSelectedDate, setFromDateText, setToDateText, setFromDateError, setToDateError }) => {
+    const dateParseTemplate = "yyyy-MM-dd HH:mm:ss";
+    const parseDate = (date) => {
+        const dateText = parse(date, dateParseTemplate, new Date());
+        return dateText;
+    };
+    const validationRegex = /^(\d{4})-(0[1-9]|1[012])-(0[1-9]|[12]\d|3[01]) ([0-1]\d|2[0-3]):([0-5]\d):([0-5]\d)$/;
+    const validateInput = (text) => validationRegex.test(text);
+    const onInputBlur = (setError, setDate) => (e) => {
+        if (!validateInput(e.target.value)) {
+            setError(dateFormatError);
+            return;
+        }
+        setDate(e.target.value);
+        setError("");
+    };
+    const setFromDate = (value) => setSelectedDate(prev => ({ ...prev, from: parseDate(value) }));
+    const setToDate = (value) => setSelectedDate(prev => ({ from: prev === null || prev === void 0 ? void 0 : prev.from, to: parseDate(value) }));
+    const onFromInputBlur = onInputBlur(setFromDateError, setFromDate);
+    const onToInputBlur = onInputBlur(setToDateError, setToDate);
+    return (React.createElement(Fragment, null,
+        React.createElement(InputWrapper, { label: from, name: "fromDate", error: !!fromDateError, errorMessage: fromDateError, errorMessageProps: { className: classes["error-message"] }, helperProps: {
+                style: { fontSize: "0.625rem" }
+            }, type: "text", value: fromDateText, onBlur: onFromInputBlur, onChange: e => setFromDateText(e.target.value), inputProps: { style: { height: "2rem" }, placeholder: dateInputPlaceholder }, className: classes["input"] }),
+        React.createElement(InputWrapper, { className: classes["input"], inputProps: { style: { height: "2rem" }, placeholder: dateInputPlaceholder }, label: to, value: toDateText, error: !!toDateError, errorMessage: toDateError, errorMessageProps: { className: classes["error-message"] }, helperProps: {
+                style: { fontSize: "0.625rem" }
+            }, onChange: e => setToDateText(e.target.value), onBlur: onToInputBlur, name: "toDate", type: "text" })));
+};
+
+export { DateTimePickerInputSection };
+//# sourceMappingURL=DateTimePickerInputSection.esm.js.map

package/dist/esm/DataGrid/DataGridFilters/DateTimePicker/DateTimePickerInputSection.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimePickerInputSection.esm.js","sources":["../../../../../../../src/components/DataGrid/DataGridFilters/DateTimePicker/DateTimePickerInputSection.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 } from \"react\";\nimport { InputWrapper } from \"../../../Form/Wrapper/InputWrapper/InputWrapper\";\nimport classes from \"./DateTimePicker.module.scss\";\nimport { parse } from \"date-fns\";\nimport { DateRange } from \"react-day-picker\";\n\nexport type Props = {\n  from: string;\n  to: string;\n  dateInputPlaceholder: string;\n  dateFormatError: string;\n  fromDateText: string;\n  toDateText: string;\n  fromDateError: string;\n  toDateError: string;\n  setSelectedDate: React.Dispatch<React.SetStateAction<DateRange>>;\n  setFromDateText: React.Dispatch<React.SetStateAction<string>>;\n  setToDateText: React.Dispatch<React.SetStateAction<string>>;\n  setFromDateError: React.Dispatch<React.SetStateAction<string>>;\n  setToDateError: React.Dispatch<React.SetStateAction<string>>;\n};\n\nexport const DateTimePickerInputSection = ({\n  from,\n  to,\n  dateInputPlaceholder,\n  dateFormatError,\n  toDateText,\n  fromDateText,\n  fromDateError,\n  toDateError,\n  setSelectedDate,\n  setFromDateText,\n  setToDateText,\n  setFromDateError,\n  setToDateError\n}: Props) => {\n  const dateParseTemplate = \"yyyy-MM-dd HH:mm:ss\";\n  const parseDate = (date: string) => {\n    const dateText = parse(date, dateParseTemplate, new Date());\n    return dateText;\n  };\n\n  const validationRegex =\n    /^(\\d{4})-(0[1-9]|1[012])-(0[1-9]|[12]\\d|3[01]) ([0-1]\\d|2[0-3]):([0-5]\\d):([0-5]\\d)$/;\n  const validateInput = (text: string) => validationRegex.test(text);\n\n  const onInputBlur =\n    (setError: (value: React.SetStateAction<string>) => void, setDate: (value: string) => void) =>\n    (e: React.FocusEvent<HTMLInputElement, Element>) => {\n      if (!validateInput(e.target.value)) {\n        setError(dateFormatError);\n        return;\n      }\n\n      setDate(e.target.value);\n      setError(\"\");\n    };\n\n  const setFromDate = (value: string) =>\n    setSelectedDate(prev => ({ ...prev, from: parseDate(value) }));\n\n  const setToDate = (value: string) =>\n    setSelectedDate(prev => ({ from: prev?.from, to: parseDate(value) }));\n\n  const onFromInputBlur = onInputBlur(setFromDateError, setFromDate);\n  const onToInputBlur = onInputBlur(setToDateError, setToDate);\n\n  return (\n    <Fragment>\n      <InputWrapper\n        label={from}\n        name=\"fromDate\"\n        error={!!fromDateError}\n        errorMessage={fromDateError}\n        errorMessageProps={{ className: classes[\"error-message\"] }}\n        helperProps={{\n          style: { fontSize: \"0.625rem\" }\n        }}\n        type=\"text\"\n        value={fromDateText}\n        onBlur={onFromInputBlur}\n        onChange={e => setFromDateText(e.target.value)}\n        inputProps={{ style: { height: \"2rem\" }, placeholder: dateInputPlaceholder }}\n        className={classes[\"input\"]}\n      />\n      <InputWrapper\n        className={classes[\"input\"]}\n        inputProps={{ style: { height: \"2rem\" }, placeholder: dateInputPlaceholder }}\n        label={to}\n        value={toDateText}\n        error={!!toDateError}\n        errorMessage={toDateError}\n        errorMessageProps={{ className: classes[\"error-message\"] }}\n        helperProps={{\n          style: { fontSize: \"0.625rem\" }\n        }}\n        onChange={e => setToDateText(e.target.value)}\n        onBlur={onToInputBlur}\n        name=\"toDate\"\n        type=\"text\"\n      />\n    </Fragment>\n  );\n};\n"],"names":[],"mappings":";;;;;AAAA;;;;;;;;;;;;;;AAcG;AAwBI,MAAM,0BAA0B,GAAG,CAAC,EACzC,IAAI,EACJ,EAAE,EACF,oBAAoB,EACpB,eAAe,EACf,UAAU,EACV,YAAY,EACZ,aAAa,EACb,WAAW,EACX,eAAe,EACf,eAAe,EACf,aAAa,EACb,gBAAgB,EAChB,cAAc,EACR,KAAI;IACV,MAAM,iBAAiB,GAAG,qBAAqB,CAAC;AAChD,IAAA,MAAM,SAAS,GAAG,CAAC,IAAY,KAAI;AACjC,QAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,EAAE,iBAAiB,EAAE,IAAI,IAAI,EAAE,CAAC,CAAC;AAC5D,QAAA,OAAO,QAAQ,CAAC;AAClB,KAAC,CAAC;IAEF,MAAM,eAAe,GACnB,sFAAsF,CAAC;AACzF,IAAA,MAAM,aAAa,GAAG,CAAC,IAAY,KAAK,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEnE,IAAA,MAAM,WAAW,GACf,CAAC,QAAuD,EAAE,OAAgC,KAC1F,CAAC,CAA8C,KAAI;QACjD,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE;YAClC,QAAQ,CAAC,eAAe,CAAC,CAAC;YAC1B,OAAO;SACR;AAED,QAAA,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACxB,QAAQ,CAAC,EAAE,CAAC,CAAC;AACf,KAAC,CAAC;IAEJ,MAAM,WAAW,GAAG,CAAC,KAAa,KAChC,eAAe,CAAC,IAAI,KAAK,EAAE,GAAG,IAAI,EAAE,IAAI,EAAE,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC;AAEjE,IAAA,MAAM,SAAS,GAAG,CAAC,KAAa,KAC9B,eAAe,CAAC,IAAI,KAAK,EAAE,IAAI,EAAE,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAJ,IAAI,CAAE,IAAI,EAAE,EAAE,EAAE,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC;IAExE,MAAM,eAAe,GAAG,WAAW,CAAC,gBAAgB,EAAE,WAAW,CAAC,CAAC;IACnE,MAAM,aAAa,GAAG,WAAW,CAAC,cAAc,EAAE,SAAS,CAAC,CAAC;IAE7D,QACE,oBAAC,QAAQ,EAAA,IAAA;AACP,QAAA,KAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EACX,KAAK,EAAE,IAAI,EACX,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,CAAC,CAAC,aAAa,EACtB,YAAY,EAAE,aAAa,EAC3B,iBAAiB,EAAE,EAAE,SAAS,EAAE,OAAO,CAAC,eAAe,CAAC,EAAE,EAC1D,WAAW,EAAE;AACX,gBAAA,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE;aAChC,EACD,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,YAAY,EACnB,MAAM,EAAE,eAAe,EACvB,QAAQ,EAAE,CAAC,IAAI,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC9C,UAAU,EAAE,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,WAAW,EAAE,oBAAoB,EAAE,EAC5E,SAAS,EAAE,OAAO,CAAC,OAAO,CAAC,EAC3B,CAAA;QACF,KAAC,CAAA,aAAA,CAAA,YAAY,EACX,EAAA,SAAS,EAAE,OAAO,CAAC,OAAO,CAAC,EAC3B,UAAU,EAAE,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,WAAW,EAAE,oBAAoB,EAAE,EAC5E,KAAK,EAAE,EAAE,EACT,KAAK,EAAE,UAAU,EACjB,KAAK,EAAE,CAAC,CAAC,WAAW,EACpB,YAAY,EAAE,WAAW,EACzB,iBAAiB,EAAE,EAAE,SAAS,EAAE,OAAO,CAAC,eAAe,CAAC,EAAE,EAC1D,WAAW,EAAE;AACX,gBAAA,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE;AAChC,aAAA,EACD,QAAQ,EAAE,CAAC,IAAI,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC5C,MAAM,EAAE,aAAa,EACrB,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,MAAM,EACX,CAAA,CACO,EACX;AACJ;;;;"}