@onewelcome/react-lib-components 8.5.0 → 8.7.0

package/dist/esm/src/hooks/useClickOutside.esm.js

@@ -0,0 +1,38 @@
+import { useEffect } from 'react';
+
+/*
+ * 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 useClickOutside = (myElementRef, onClickOutside, dependencies) => {
+    function eventListener(event) {
+        const myElement = myElementRef === null || myElementRef === void 0 ? void 0 : myElementRef.current;
+        if (!myElement) {
+            return;
+        }
+        const clickedInsideMyElement = myElement.contains(event.target);
+        if (!clickedInsideMyElement) {
+            onClickOutside(event);
+        }
+    }
+    useEffect(() => {
+        setTimeout(() => window.addEventListener("click", eventListener));
+        return () => {
+            setTimeout(() => window.removeEventListener("click", eventListener));
+        };
+    }, dependencies);
+};
+
+export { useClickOutside };
+//# sourceMappingURL=useClickOutside.esm.js.map

package/dist/esm/src/hooks/useClickOutside.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useClickOutside.esm.js","sources":["../../../../../../src/hooks/useClickOutside.ts"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport { DependencyList, useEffect } from \"react\";\n\nexport const useClickOutside = (\n  myElementRef: React.RefObject<HTMLElement>,\n  onClickOutside: (event: MouseEvent) => void,\n  dependencies?: DependencyList\n) => {\n  function eventListener(event: MouseEvent) {\n    const myElement = myElementRef?.current;\n    if (!myElement) {\n      return;\n    }\n    const clickedInsideMyElement = myElement.contains(event.target as Node);\n\n    if (!clickedInsideMyElement) {\n      onClickOutside(event);\n    }\n  }\n  useEffect(() => {\n    setTimeout(() => window.addEventListener(\"click\", eventListener));\n\n    return () => {\n      setTimeout(() => window.removeEventListener(\"click\", eventListener));\n    };\n  }, dependencies);\n};\n"],"names":[],"mappings":";;AAAA;;;;;;;;;;;;;;AAcG;AAIU,MAAA,eAAe,GAAG,CAC7B,YAA0C,EAC1C,cAA2C,EAC3C,YAA6B,KAC3B;IACF,SAAS,aAAa,CAAC,KAAiB,EAAA;QACtC,MAAM,SAAS,GAAG,YAAY,KAAA,IAAA,IAAZ,YAAY,KAAZ,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,YAAY,CAAE,OAAO,CAAC;QACxC,IAAI,CAAC,SAAS,EAAE;YACd,OAAO;SACR;QACD,MAAM,sBAAsB,GAAG,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,CAAC;QAExE,IAAI,CAAC,sBAAsB,EAAE;YAC3B,cAAc,CAAC,KAAK,CAAC,CAAC;SACvB;KACF;IACD,SAAS,CAAC,MAAK;AACb,QAAA,UAAU,CAAC,MAAM,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC,CAAC;AAElE,QAAA,OAAO,MAAK;AACV,YAAA,UAAU,CAAC,MAAM,MAAM,CAAC,mBAAmB,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC,CAAC;AACvE,SAAC,CAAC;KACH,EAAE,YAAY,CAAC,CAAC;AACnB;;;;"}

package/dist/esm/src/hooks/useClickOutside.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/src/index.d.ts

@@ -42,6 +42,7 @@ export type { Props as StepProps } from "./components/Stepper/Step";
 export { Pagination } from "./components/Pagination/Pagination";
 export type { Props as PaginationProps, PageChangeLabels, PaginationTranslations, PageSize } from "./components/Pagination/Pagination";
 export { useRepeater } from "./hooks/useRepeater";
+export { useClickOutside } from "./hooks/useClickOutside";
 export { useFullHeightCollapse } from "./hooks/useFullHeightCollapse";
 export { usePosition } from "./hooks/usePosition";
 export type { Placement } from "./hooks/usePosition";
@@ -124,6 +125,7 @@ export type { Props as FileUploadProps, FileType } from "./components/Form/FileU
 export { FILE_ACTION, ACTION_STATUS } from "./components/Form/FileUpload/FileItem/FileItem";
 export { MultiSelectWrapper } from "./components/Form/Wrapper/MultiSelectWrapper/MultiSelectWrapper";
 export type { Props as MultiSelectWrapperProps } from "./components/Form/Wrapper/MultiSelectWrapper/MultiSelectWrapper";
+export { useMultiSelect } from "./components/Form/Select/MultiSelect/useMultiSelect";
 export { ContentHeader } from "./components/Layout/ContentHeader/ContentHeader";
 export type { Props as ContentHeaderProps } from "./components/Layout/ContentHeader/ContentHeader";
 export { FormStepper } from "./components/Layout/FormPage/FormWithStepper/FormStepper/FormStepper";

package/dist/esm/src/index.esm.js

@@ -20,6 +20,7 @@ export { Spinner } from '../Spinner/Spinner.esm.js';
 export { Stepper } from '../Stepper/Stepper.esm.js';
 export { Pagination } from '../Pagination/Pagination.esm.js';
 export { useRepeater } from './hooks/useRepeater.esm.js';
+export { useClickOutside } from './hooks/useClickOutside.esm.js';
 export { useFullHeightCollapse } from './hooks/useFullHeightCollapse.esm.js';
 export { usePosition } from './hooks/usePosition.esm.js';
 export { useDebouncedCallback } from './hooks/useDebouncedCallback.esm.js';
@@ -62,6 +63,7 @@ export { SelectWrapper } from '../Form/Wrapper/SelectWrapper/SelectWrapper.esm.j
 export { FileUpload } from '../Form/FileUpload/FileUpload.esm.js';
 export { ACTION_STATUS, FILE_ACTION } from '../Form/FileUpload/FileItem/FileItem.esm.js';
 export { MultiSelectWrapper } from '../Form/Wrapper/MultiSelectWrapper/MultiSelectWrapper.esm.js';
+export { useMultiSelect } from '../Form/Select/MultiSelect/useMultiSelect.esm.js';
 export { ContentHeader } from '../Layout/ContentHeader/ContentHeader.esm.js';
 export { FormStepper } from '../Layout/FormPage/FormWithStepper/FormStepper/FormStepper.esm.js';
 export { FormSection } from '../Layout/FormPage/FormWithStepper/FormSection/FormSection.esm.js';

package/dist/esm/src/index.esm.js.map

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

package/dist/esm/src/util/unitTestUtils.d.ts

@@ -0,0 +1,12 @@
+export declare class MockDOMRect implements DOMRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+    constructor(x?: number, y?: number, width?: number, height?: number, top?: number, right?: number, bottom?: number, left?: number);
+    toJSON(): this;
+}

package/dist/esm/withReadOnly.esm.js

@@ -0,0 +1,70 @@
+import React from 'react';
+
+/*
+ * 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 componentsWithKeyEventsToPrevent = ["CheckboxWrapper"];
+const getDisplayName = (WrappedComponent) => {
+    var _a, _b;
+    return (_b = (_a = WrappedComponent.displayName) !== null && _a !== void 0 ? _a : WrappedComponent.name) !== null && _b !== void 0 ? _b : "Component";
+};
+const getConditionalProps = (readOnlyView, type, helperText) => {
+    const props = {};
+    if (readOnlyView) {
+        props.style = { pointerEvents: "none", userSelect: "text" };
+        if (helperText) {
+            props.helperText = "";
+        }
+    }
+    else {
+        props.helperText = helperText;
+    }
+    if (type) {
+        props.type = type;
+    }
+    return props;
+};
+const withReadOnly = (WrappedComponent) => {
+    const preventKeyUpAndKeyDownHandlerForSpecificComponents = (readOnlyView) => {
+        const preventSubmissionKeys = (e) => {
+            const isEnterOrSpace = (e) => e.key === "Enter" || e.key === " ";
+            if (isEnterOrSpace(e)) {
+                e.stopPropagation();
+                e.preventDefault();
+            }
+        };
+        if (readOnlyView &&
+            componentsWithKeyEventsToPrevent.includes(WrappedComponent.displayName || WrappedComponent.name)) {
+            const props = {};
+            props.onKeyUp = (e) => {
+                preventSubmissionKeys(e);
+            };
+            props.onKeyDown = (e) => {
+                preventSubmissionKeys(e);
+            };
+            return props;
+        }
+        return {};
+    };
+    const WithReadOnlyComponent = React.forwardRef((props, ref) => {
+        const { readOnlyView = false, required, children, helperText, type = "", ...restProps } = props;
+        return (React.createElement(WrappedComponent, { ref: ref, ...restProps, "data-readonlyview": readOnlyView, "aria-readonly": readOnlyView, required: readOnlyView ? false : required, ...getConditionalProps(readOnlyView, type, helperText), ...preventKeyUpAndKeyDownHandlerForSpecificComponents(readOnlyView) }, children));
+    });
+    WithReadOnlyComponent.displayName = `withReadOnly_${getDisplayName(WrappedComponent)}`;
+    return WithReadOnlyComponent;
+};
+
+export { withReadOnly };
+//# sourceMappingURL=withReadOnly.esm.js.map

package/dist/esm/withReadOnly.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"withReadOnly.esm.js","sources":["../../../../src/components/withReadOnly.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, { ComponentType, ForwardedRef, PropsWithChildren } from \"react\";\n\nexport interface WithReadOnlyProps {\n  readOnlyView?: boolean;\n  required?: boolean;\n  helperText?: string;\n  type?: string;\n}\n\nconst componentsWithKeyEventsToPrevent: string[] = [\"CheckboxWrapper\"];\n\nconst getDisplayName = <P,>(WrappedComponent: ComponentType<P>) => {\n  return WrappedComponent.displayName ?? WrappedComponent.name ?? \"Component\";\n};\n\nconst getConditionalProps = (readOnlyView: boolean, type: string, helperText?: string) => {\n  const props: Record<string, any> = {};\n\n  if (readOnlyView) {\n    props.style = { pointerEvents: \"none\", userSelect: \"text\" };\n    if (helperText) {\n      props.helperText = \"\";\n    }\n  } else {\n    props.helperText = helperText;\n  }\n\n  if (type) {\n    props.type = type;\n  }\n\n  return props;\n};\n\nexport const withReadOnly = <P extends object>(WrappedComponent: ComponentType<P>) => {\n  const preventKeyUpAndKeyDownHandlerForSpecificComponents = (readOnlyView: boolean) => {\n    const preventSubmissionKeys = (e: KeyboardEvent) => {\n      const isEnterOrSpace = (e: KeyboardEvent) => e.key === \"Enter\" || e.key === \" \";\n      if (isEnterOrSpace(e)) {\n        e.stopPropagation();\n        e.preventDefault();\n      }\n    };\n\n    if (\n      readOnlyView &&\n      componentsWithKeyEventsToPrevent.includes(\n        WrappedComponent.displayName || WrappedComponent.name\n      )\n    ) {\n      const props: Record<string, any> = {};\n\n      props.onKeyUp = (e: KeyboardEvent) => {\n        preventSubmissionKeys(e);\n      };\n\n      props.onKeyDown = (e: KeyboardEvent) => {\n        preventSubmissionKeys(e);\n      };\n\n      return props;\n    }\n\n    return {};\n  };\n\n  const WithReadOnlyComponent = React.forwardRef(\n    (props: PropsWithChildren<P & WithReadOnlyProps>, ref: ForwardedRef<any>) => {\n      const {\n        readOnlyView = false,\n        required,\n        children,\n        helperText,\n        type = \"\",\n        ...restProps\n      } = props;\n\n      return (\n        <WrappedComponent\n          ref={ref}\n          {...(restProps as P)}\n          data-readonlyview={readOnlyView}\n          aria-readonly={readOnlyView}\n          required={readOnlyView ? false : required}\n          {...getConditionalProps(readOnlyView, type, helperText)}\n          {...preventKeyUpAndKeyDownHandlerForSpecificComponents(readOnlyView)}\n        >\n          {children}\n        </WrappedComponent>\n      );\n    }\n  );\n\n  WithReadOnlyComponent.displayName = `withReadOnly_${getDisplayName(WrappedComponent)}`;\n  return WithReadOnlyComponent;\n};\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "homepage": "http://onewelcome.github.io/react-lib-components",
   "name": "@onewelcome/react-lib-components",
-  "version": "8.5.0",
+  "version": "8.7.0",
   "license": "Apache-2.0",
   "author": "OneWelcome B.V.",
   "main": "dist/cjs/src/index.cjs.js",
@@ -45,9 +45,13 @@
     "storybook": "storybook dev -p 6006"
   },
   "peerDependencies": {
+    "date-fns": "^4.1.0",
     "react": ">=16",
-    "react-dom": ">=16",
-    "react-day-picker": "^9.1.3"
+    "react-day-picker": "^9.4.1",
+    "react-dom": ">=16"
+  },
+  "overrides": {
+    "cross-spawn": ">=7.0.5"
   },
   "engines": {
     "node": ">=16"
@@ -65,19 +69,19 @@
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.6",
-    "@storybook/addon-a11y": "^8.1.11",
-    "@storybook/addon-actions": "^8.1.11",
-    "@storybook/addon-docs": "^8.1.11",
-    "@storybook/addon-essentials": "^8.1.11",
-    "@storybook/addon-interactions": "^8.1.11",
-    "@storybook/addon-links": "^8.1.11",
-    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-    "@storybook/blocks": "^8.1.11",
-    "@storybook/components": "^8.1.11",
-    "@storybook/manager-api": "^8.1.11",
-    "@storybook/react": "^8.1.11",
-    "@storybook/react-webpack5": "^8.1.11",
-    "@storybook/theming": "^8.1.11",
+    "@storybook/addon-a11y": "~8.1.11",
+    "@storybook/addon-actions": "~8.1.11",
+    "@storybook/addon-docs": "~8.1.11",
+    "@storybook/addon-essentials": "~8.1.11",
+    "@storybook/addon-interactions": "~8.1.11",
+    "@storybook/addon-links": "~8.1.11",
+    "@storybook/addon-webpack5-compiler-babel": "~3.0.3",
+    "@storybook/blocks": "~8.1.11",
+    "@storybook/components": "~8.1.11",
+    "@storybook/manager-api": "~8.1.11",
+    "@storybook/react": "~8.1.11",
+    "@storybook/react-webpack5": "~8.1.11",
+    "@storybook/theming": "~8.1.11",
     "@testing-library/dom": "^10.3.0",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
@@ -127,7 +131,7 @@
     "sass": "1.77.6",
     "sass-loader": "^14.2.1",
     "size-limit": "^11.1.4",
-    "storybook": "^8.1.11",
+    "storybook": "~8.1.11",
     "storybook-addon-mock": "^5.0.0",
     "storybook-addon-pseudo-states": "^3.1.1",
     "style-loader": "^4.0.0",

package/src/components/Button/BaseButton.tsx

@@ -26,7 +26,7 @@ export interface Props extends ComponentPropsWithRef<"button"> {
 }
 
 const BaseButtonComponent: ForwardRefRenderFunction<HTMLButtonElement, Props> = (
-  { children, type = "button", className, loading, disabled, ...rest },
+  { children, type = "button", className, loading, disabled, hidden, ...rest },
   ref
 ) => {
   const validTypes = ["submit", "button", "reset"];
@@ -36,15 +36,18 @@ const BaseButtonComponent: ForwardRefRenderFunction<HTMLButtonElement, Props> =
       `You have entered an invalid button type. Expected 'submit', 'button' or 'reset' got ${type}`
     );
 
+  const buttonClasses = [classes.button];
+  loading && buttonClasses.push(classes.loading);
+  className && buttonClasses.push(className);
+
   return (
     <button
       {...rest}
       disabled={isDisabled}
       ref={ref}
       type={type}
-      className={`${classes.button} ${loading ? classes.loading : ""} ${
-        className ? className : ""
-      }`}
+      hidden={hidden}
+      className={hidden ? "" : buttonClasses.join(" ")}
     >
       {loading ? (
         <Fragment>

package/src/components/ContextMenu/ContextMenu.tsx

@@ -31,7 +31,7 @@ import { Props as IconButtonProps } from "../Button/IconButton";
 import { Popover, Props as PopoverProps } from "../Popover/Popover";
 import { Placement, Offset } from "../../hooks/usePosition";
 import classes from "./ContextMenu.module.scss";
-import { useBodyClick } from "../../hooks/useBodyClick";
+import { useClickOutside } from "../../hooks/useClickOutside";
 import { Props as ContextMenuItemProps } from "./ContextMenuItem";
 import { createPortal } from "react-dom";
 import { useGetDomRoot } from "../../hooks/useGetDomRoot";
@@ -110,19 +110,11 @@ const ContextMenuComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
     setShouldClick
   });
 
-  useBodyClick(
-    event => {
-      return (
-        showContextMenu &&
-        anchorEl.current !== event.target &&
-        anchorEl.current !== (event.target as HTMLElement).parentElement
-      );
-    },
-    () => {
+  useClickOutside(anchorEl, () => {
+    if (showContextMenu) {
       setShowContextMenu(false);
-    },
-    showContextMenu
-  );
+    }
+  }, [showContextMenu]);
 
   useFocusAnchorElement(
     anchorEl,

package/src/components/DataGrid/DataGridBody/__snapshots__/DataGridBody.test.tsx.snap

@@ -45,7 +45,7 @@ exports[`DataGridBody should render renders without crashing 1`] = `
             aria-controls="consent_menu_Paweł-menu"
             aria-expanded="false"
             aria-haspopup="true"
-            class="button  icon-button text default button-m"
+            class="button icon-button text default button-m"
             id="consent_menu_Paweł"
             tabindex="0"
             title="Actions for Paweł"
@@ -109,7 +109,7 @@ exports[`DataGridBody should render renders without crashing 1`] = `
             aria-controls="consent_menu_Michał-menu"
             aria-expanded="false"
             aria-haspopup="true"
-            class="button  icon-button text default button-m"
+            class="button icon-button text default button-m"
             id="consent_menu_Michał"
             tabindex="0"
             title="Actions for Michał"
@@ -173,7 +173,7 @@ exports[`DataGridBody should render renders without crashing 1`] = `
             aria-controls="consent_menu_Daniel-menu"
             aria-expanded="false"
             aria-haspopup="true"
-            class="button  icon-button text default button-m"
+            class="button icon-button text default button-m"
             id="consent_menu_Daniel"
             tabindex="0"
             title="Actions for Daniel"
@@ -237,7 +237,7 @@ exports[`DataGridBody should render renders without crashing 1`] = `
             aria-controls="consent_menu_Jasha-menu"
             aria-expanded="false"
             aria-haspopup="true"
-            class="button  icon-button text default button-m"
+            class="button icon-button text default button-m"
             id="consent_menu_Jasha"
             tabindex="0"
             title="Actions for Jasha"

package/src/components/DataGrid/DataGridFilters/DataGridDateFilter.tsx

@@ -0,0 +1,65 @@
+/*
+ * 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.
+ */
+
+import React, { Fragment, useRef, useState } from "react";
+import { DataGridFilterTag } from "./DataGridFilterTag";
+import { createPortal } from "react-dom";
+import { DateTimePicker } from "./DateTimePicker/DateTimePicker";
+import { useGetDomRoot } from "../../../hooks/useGetDomRoot";
+import { DateTimeFilter } from "./DataGridFilters.interfaces";
+
+type Props = {
+  domRoot?: HTMLElement;
+  dateFilterValue?: DateTimeFilter;
+  onDateFilterValueChange?: (dateTimeFilter: DateTimeFilter) => void;
+};
+
+export const DataGridDateFilter = ({
+  domRoot,
+  dateFilterValue,
+  onDateFilterValueChange
+}: Props) => {
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const popoverRef = useRef<HTMLDivElement>(null);
+  const wrappingDivRef = useRef<HTMLDivElement>(null);
+  const { root } = useGetDomRoot(domRoot, wrappingDivRef);
+  const [isOpen, setIsOpen] = useState(false);
+  const [tagCaption, setTagCaption] = useState("Last 30 seconds");
+
+  return (
+    <Fragment>
+      <DataGridFilterTag
+        triggerRef={triggerRef}
+        ref={wrappingDivRef}
+        dateTagCaption={tagCaption}
+        mode={"ADD_DATE"}
+        onFilterOpen={() => setIsOpen(true)}
+      />
+      {createPortal(
+        <DateTimePicker
+          popoverRef={popoverRef}
+          onTagCaptionChange={setTagCaption}
+          anchorRef={wrappingDivRef}
+          isOpen={isOpen}
+          setPickerOpen={setIsOpen}
+          dateFilterValue={dateFilterValue}
+          onDateFilterValueChange={onDateFilterValueChange}
+        />,
+        root
+      )}
+    </Fragment>
+  );
+};

package/src/components/DataGrid/DataGridFilters/DataGridFilterTag.tsx

@@ -26,12 +26,13 @@ export interface DataGridFilterTagProps extends ComponentPropsWithRef<"div"> {
   triggerRef: React.Ref<HTMLButtonElement>;
   filter?: Filter;
   mode: FilterEditorMode;
-  onFilterRemove: () => void;
+  onFilterRemove?: () => void;
   onFilterOpen: () => void;
   translations?: TagTranslations;
+  dateTagCaption?: string;
 }
 
-const EditTagContent = ({ filter }: { filter: Filter }) => {
+const EditTagContent = ({ filter, or, other }: { filter: Filter; or: string; other: string }) => {
   const { column, operator, value } = filter;
 
   return (
@@ -39,7 +40,11 @@ const EditTagContent = ({ filter }: { filter: Filter }) => {
       {column} {operator} {value.length > 0 && <b>{value[0]}</b>}
       {value.length >= 2 && (
         <>
-          or <b> {value.length - 1} other</b>
+          {" "}
+          {or}{" "}
+          <b>
+            {value.length - 1} {other}
+          </b>
         </>
       )}
     </Fragment>
@@ -57,14 +62,21 @@ export const DataGridFilterTagComponent: ForwardRefRenderFunction<
     onFilterRemove,
     onFilterOpen,
     translations,
+    dateTagCaption,
     customEditTagContent,
     ...rest
   }: DataGridFilterTagProps,
   ref
 ) => {
-  const { addButtonCaption = "Add filter" } = translations || {};
+  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 (
     <div {...rest} ref={ref} className={classes["filter-wrapper"]}>
@@ -87,10 +99,18 @@ export const DataGridFilterTagComponent: ForwardRefRenderFunction<
             {customEditTagContent ? (
               React.cloneElement(customEditTagContent, { filter })
             ) : (
-              <EditTagContent filter={filter} />
+              <EditTagContent filter={filter} or={or} other={other} />
             )}
           </Typography>
         )}
+        {shouldRenderAddDateTag && (
+          <Fragment>
+            <Icon icon={Icons.Calendar} />
+            <Typography variant="body" className={classes["caption"]}>
+              {dateIs} <b>{dateTagCaption}</b>
+            </Typography>
+          </Fragment>
+        )}
       </button>
       {shouldRenderEditTag && (
         <RemoveButton className={classes["remove-button"]} onRemove={onFilterRemove} />

package/src/components/DataGrid/DataGridFilters/DataGridFilters.interfaces.ts

@@ -42,7 +42,7 @@ export type FiltersState = {
   filters: Filter[];
 };
 
-export type FilterEditorMode = "ADD" | "EDIT";
+export type FilterEditorMode = "ADD" | "EDIT" | "ADD_DATE";
 
 export enum DefaultOperators {
   is = "is",
@@ -72,6 +72,9 @@ export interface PopoverTranslations {
 
 export interface TagTranslations {
   addButtonCaption?: string;
+  or?: string;
+  other?: string;
+  dateIs?: string;
 }
 
 export interface ToolbarTranslations {
@@ -88,3 +91,17 @@ export interface KeyValuePair<TKey = string, TValue = string> {
   key: TKey;
   value: TValue;
 }
+
+export type DateTimeFilterType =
+  | "THIRTY_SECONDS"
+  | "ONE_MINUTE"
+  | "FIVE_MINUTES"
+  | "ONE_HOUR"
+  | "TWENTY_FOUR_HOURS"
+  | "CUSTOM";
+
+export interface DateTimeFilter {
+  fromDate: string;
+  toDate: string;
+  type: DateTimeFilterType;
+}

package/src/components/DataGrid/DataGridFilters/DataGridToolbar.tsx

@@ -17,13 +17,21 @@
 import React, { Fragment } from "react";
 import { DataGridFilter } from "./DataGridFilter";
 import classes from "./DataGridToolbar.module.scss";
-import { DataGridColumnMetadata, Filter, FiltersTranslations } from "./DataGridFilters.interfaces";
+import {
+  DataGridColumnMetadata,
+  DateTimeFilter,
+  Filter,
+  FiltersTranslations
+} from "./DataGridFilters.interfaces";
 import { Typography } from "../../Typography/Typography";
 import { useFiltersReducer } from "./useFiltersReducer";
+import { DataGridDateFilter } from "./DataGridDateFilter";
 
 export interface DataGridToolbarProps {
-  columnsMetadata: DataGridColumnMetadata[];
+  columnsMetadata?: DataGridColumnMetadata[];
   customEditTagContent?: React.ReactElement;
+  dateFilterValue?: DateTimeFilter;
+  onDateFilterValueChange?: (dateTimeFilter: DateTimeFilter) => void;
   filterValues?: Filter[];
   translations?: FiltersTranslations;
   onFilterAdd?: (filter: Filter) => void;
@@ -39,6 +47,8 @@ export const DataGridToolbar = ({
   onFilterAdd,
   onFilterEdit,
   onFilterDelete,
+  dateFilterValue,
+  onDateFilterValueChange,
   onFiltersClear,
   customEditTagContent
 }: DataGridToolbarProps) => {
@@ -47,38 +57,41 @@ export const DataGridToolbar = ({
   const { clearButtonCaption = "Clear all filters" } = translations?.toolbar || {};
   return (
     <Fragment>
-      {state.filters.map(filter => (
-        <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?.tag}
-          popoverTranslations={translations?.popover}
-          customEditTagContent={customEditTagContent}
-        />
-      ))}
+      {columnsMetadata &&
+        state.filters.map(filter => (
+          <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?.tag}
+            popoverTranslations={translations?.popover}
+            customEditTagContent={customEditTagContent}
+          />
+        ))}
       <div className={classes["actions-wrapper"]}>
-        <DataGridFilter
-          mode="ADD"
-          customEditTagContent={customEditTagContent}
-          columnsMetadata={columnsMetadata}
-          onFilterAdd={filter => {
-            addFilter(filter);
-            onFilterAdd && onFilterAdd(filter);
-          }}
-          tagTranslations={translations?.tag}
-          popoverTranslations={translations?.popover}
-        />
-        {state.filters.length >= 1 && (
+        {columnsMetadata && (
+          <DataGridFilter
+            mode="ADD"
+            customEditTagContent={customEditTagContent}
+            columnsMetadata={columnsMetadata}
+            onFilterAdd={filter => {
+              addFilter(filter);
+              onFilterAdd && onFilterAdd(filter);
+            }}
+            tagTranslations={translations?.tag}
+            popoverTranslations={translations?.popover}
+          />
+        )}
+        {columnsMetadata && state.filters.length >= 1 && (
           <button
             type="button"
             className={classes["clear-button"]}
@@ -92,6 +105,13 @@ export const DataGridToolbar = ({
             </Typography>
           </button>
         )}
+
+        {dateFilterValue && (
+          <DataGridDateFilter
+            dateFilterValue={dateFilterValue}
+            onDateFilterValueChange={onDateFilterValueChange}
+          />
+        )}
       </div>
     </Fragment>
   );