@onewelcome/react-lib-components 8.6.0 → 8.7.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>
   );

package/src/components/DataGrid/DataGridFilters/DateTimePicker/DateTimePicker.module.scss

@@ -0,0 +1,134 @@
+/*
+ * 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.
+ */
+
+.popover {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+
+  min-width: 40rem;
+
+  .content-wrapper {
+    display: flex;
+  }
+
+  .aside {
+    display: flex;
+    flex-direction: column;
+
+    width: 9.25rem;
+    border-right: 1px solid var(--color-blue-grey100);
+  }
+
+  .aside-menu {
+    margin: 0.5rem 0;
+    padding: 0;
+
+    white-space: nowrap;
+
+    list-style: none;
+  }
+
+  .aside-menu-item {
+    height: 2rem;
+
+    button {
+      padding: 0.5rem 0.75rem;
+
+      font-size: 0.75rem;
+      line-height: 1rem;
+      text-align: start;
+    }
+  }
+
+  .controls {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    flex-grow: 1;
+
+    padding: 2rem 2rem 0 2rem;
+
+    &.has-error {
+      //left it in px - height + margin of the error text span in the input wrapper
+      gap: calc(2rem - 15.5681px);
+    }
+  }
+
+  .controls-panel {
+    display: flex;
+    gap: 2rem;
+
+    & > * {
+      flex-grow: 1;
+    }
+
+    &.set-height {
+      min-height: 17.5rem;
+    }
+  }
+
+  .actions {
+    display: flex;
+    justify-content: space-between;
+    gap: 1rem;
+    flex-grow: 1;
+
+    width: calc(100% - 3rem);
+    border-top: 1px solid var(--color-blue-grey100);
+    padding: 1rem 1.5rem;
+  }
+
+  .input {
+    margin-top: 0;
+    max-width: 14rem;
+
+    label {
+      font-size: 0.75rem;
+    }
+  }
+
+  .nav {
+    position: absolute;
+  }
+
+  .next-button {
+    position: absolute;
+    left: 27.3125rem;
+    top: 0;
+  }
+
+  .prev-button {
+    position: absolute;
+    top: 0;
+  }
+
+  .month-caption {
+    width: 100%;
+    height: 2.5rem;
+    margin: 0;
+    padding: 0.75rem 0;
+
+    font-size: 0.75rem;
+    font-weight: 500;
+    line-height: 1rem;
+    text-align: center;
+  }
+}
+
+.error-message {
+  font-size: 0.625rem;
+}