@onewelcome/react-lib-components 8.0.0 → 8.1.1

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

@@ -18,37 +18,54 @@
 
 .wrapper {
   display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: space-between;
   gap: 0.5rem;
   width: 100%;
   padding-bottom: 1rem;
 
-  .searchbar {
-    min-width: 7rem;
-    flex-basis: 15rem;
-  }
-
-  .actions-wrapper {
+  .filter-section {
     display: flex;
     align-items: center;
     justify-content: flex-start;
+    flex-wrap: wrap;
     gap: 0.5rem;
-  }
+    width: 100%;
+    flex-grow: 1;
 
-  .clear-button {
-    background: none;
-    border: none;
-    cursor: pointer;
-    @include mixins.focusVisibleOutline($outlineOffset: 0);
-
-    .caption {
-      margin: 0;
-      font-size: var(--font-size-data-grid);
-      line-height: var(--data-grid-line-height);
-      text-decoration: underline;
-      color: var(--color-primary500);
+    .searchbar {
+      min-width: 7rem;
+      flex-basis: 15rem;
     }
+
+    .actions-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      gap: 0.5rem;
+    }
+
+    .clear-button {
+      background: none;
+      border: none;
+      cursor: pointer;
+      @include mixins.focusVisibleOutline($outlineOffset: 0);
+
+      .caption {
+        margin: 0;
+        font-size: var(--font-size-data-grid);
+        line-height: var(--data-grid-line-height);
+        text-decoration: underline;
+        color: var(--color-primary500);
+      }
+    }
+  }
+
+  .button-section {
+    flex-shrink: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 0.5rem;
   }
 }

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

@@ -14,20 +14,16 @@
  *    limitations under the License.
  */
 
-import React, { Fragment, useReducer } from "react";
+import React, { Fragment } from "react";
 import { DataGridFilter } from "./DataGridFilter";
 import classes from "./DataGridToolbar.module.scss";
-import {
-  DataGridColumnMetadata,
-  Filter,
-  FiltersAction,
-  FiltersState,
-  FiltersTranslations
-} from "./DataGridFilters.interfaces";
+import { DataGridColumnMetadata, Filter, FiltersTranslations } from "./DataGridFilters.interfaces";
 import { Typography } from "../../Typography/Typography";
+import { useFiltersReducer } from "./useFiltersReducer";
 
 export interface DataGridToolbarProps {
   columnsMetadata: DataGridColumnMetadata[];
+  customEditTagContent?: React.ReactElement;
   filterValues?: Filter[];
   translations?: FiltersTranslations;
   onFilterAdd?: (filter: Filter) => void;
@@ -36,32 +32,6 @@ export interface DataGridToolbarProps {
   onFiltersClear?: () => void;
 }
 
-const filtersReducer = (state: FiltersState, action: FiltersAction): FiltersState => {
-  switch (action.type) {
-    case "add":
-      return { ...state, filters: [...state.filters, { ...action.payload }] };
-    case "edit":
-      return {
-        ...state,
-        filters: [
-          ...state.filters.map(value => {
-            if (value.id === action.payload.id) {
-              return action.payload;
-            }
-            return value;
-          })
-        ]
-      };
-    case "remove":
-      return {
-        ...state,
-        filters: [...state.filters.filter(value => value.id !== action.payload.id)]
-      };
-    case "clear":
-      return { ...state, filters: [] };
-  }
-};
-
 export const DataGridToolbar = ({
   columnsMetadata,
   filterValues,
@@ -69,9 +39,11 @@ export const DataGridToolbar = ({
   onFilterAdd,
   onFilterEdit,
   onFilterDelete,
-  onFiltersClear
+  onFiltersClear,
+  customEditTagContent
 }: DataGridToolbarProps) => {
-  const [state, dispatch] = useReducer(filtersReducer, { filters: filterValues || [] });
+  const { state, addFilter, editFilter, deleteFilter, clearFilters } =
+    useFiltersReducer(filterValues);
   const { clearButtonCaption = "Clear all filters" } = translations?.toolbar || {};
   return (
     <Fragment>
@@ -81,19 +53,28 @@ export const DataGridToolbar = ({
           key={filter.id}
           filter={filter}
           columnsMetadata={columnsMetadata}
-          dispatch={dispatch}
-          onFilterEdit={onFilterEdit}
-          onFilterDelete={onFilterDelete}
+          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}
-          dispatch={dispatch}
-          onFilterAdd={onFilterAdd}
+          onFilterAdd={filter => {
+            addFilter(filter);
+            onFilterAdd && onFilterAdd(filter);
+          }}
           tagTranslations={translations?.tag}
           popoverTranslations={translations?.popover}
         />
@@ -102,7 +83,7 @@ export const DataGridToolbar = ({
             type="button"
             className={classes["clear-button"]}
             onClick={() => {
-              dispatch({ type: "clear" });
+              clearFilters();
               onFiltersClear && onFiltersClear();
             }}
           >

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

@@ -14,18 +14,23 @@
  *    limitations under the License.
  */
 
-import React, { ComponentPropsWithRef, ForwardRefRenderFunction } from "react";
+import React, { ComponentPropsWithRef, ForwardRefRenderFunction, ReactElement } from "react";
 import classes from "./DataGridToolbar.module.scss";
-
-type Props = ComponentPropsWithRef<"div">;
+import { Button } from "../../Button/Button";
+import { ButtonProps } from "../../..";
+interface Props extends ComponentPropsWithRef<"div"> {
+  filters?: React.JSX.Element;
+  buttons?: ReactElement<ButtonProps, typeof Button> | ReactElement<ButtonProps, typeof Button>[];
+}
 
 export const DataGridToolbarWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
-  { children, ...rest },
+  { children, filters, buttons, ...rest },
   ref
 ) => {
   return (
     <div ref={ref} className={classes["wrapper"]} {...rest}>
-      {children}
+      <div className={classes["filter-section"]}>{filters}</div>
+      <div className={classes["button-section"]}>{buttons}</div>
     </div>
   );
 };

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

@@ -0,0 +1,66 @@
+/*
+ * 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 { useReducer } from "react";
+import { Filter, FiltersAction, FiltersState } from "./DataGridFilters.interfaces";
+
+export const useFiltersReducer = (filterValues: Filter[] | undefined) => {
+  const filtersReducer = (state: FiltersState, action: FiltersAction): FiltersState => {
+    switch (action.type) {
+      case "add":
+        return { ...state, filters: [...state.filters, { ...action.payload }] };
+      case "edit":
+        return {
+          ...state,
+          filters: [
+            ...state.filters.map(value => {
+              if (value.id === action.payload.id) {
+                return action.payload;
+              }
+              return value;
+            })
+          ]
+        };
+      case "remove":
+        return {
+          ...state,
+          filters: [...state.filters.filter(value => value.id !== action.payload.id)]
+        };
+      case "clear":
+        return { ...state, filters: [] };
+    }
+  };
+
+  const [state, dispatch] = useReducer(filtersReducer, { filters: filterValues || [] });
+
+  const addFilter = (filter: Filter) =>
+    dispatch({
+      type: "add",
+      payload: filter
+    });
+
+  const editFilter = (filter: Filter) =>
+    dispatch({
+      type: "edit",
+      payload: filter
+    });
+
+  const deleteFilter = (id: string) => dispatch({ type: "remove", payload: { id } });
+
+  const clearFilters = () => dispatch({ type: "clear" });
+
+  return { state, addFilter, deleteFilter, editFilter, clearFilters };
+};

package/src/components/DataGrid/DataGridHeader/DataGridHeaderCell.module.scss

@@ -62,11 +62,18 @@
 
   .indicator {
     color: var(--greyed-out);
+    transition: transform 0.2s ease-in-out;
+    transform: rotate(0deg);
 
-    &.active {
+    &.ascending {
       color: var(--color-primary);
     }
 
+    &.descending {
+      color: var(--color-primary);
+      transform: rotate(180deg);
+    }
+
     &.hidden {
       visibility: hidden;
     }

package/src/components/DataGrid/DataGridHeader/DataGridHeaderCell.tsx

@@ -41,21 +41,16 @@ const DataGridHeaderCellComponent: ForwardRefRenderFunction<HTMLTableCellElement
   };
 
   const sortingIndicator = () => {
-    const getSortingIndicatorClasses = (direction: Direction) => {
+    const getSortingIndicatorClasses = () => {
       const sortingIndicatorClasses = [classes["indicator"]];
       activeSortDirection &&
         sortingIndicatorClasses.push(
-          activeSortDirection === direction ? classes["active"] : classes["hidden"]
+          activeSortDirection === "ASC" ? classes["ascending"] : classes["descending"]
         );
       return sortingIndicatorClasses;
     };
 
-    return (
-      <Fragment>
-        <Icon className={getSortingIndicatorClasses("ASC").join(" ")} icon={Icons.TriangleUp} />
-        <Icon className={getSortingIndicatorClasses("DESC").join(" ")} icon={Icons.TriangleDown} />
-      </Fragment>
-    );
+    return <Icon className={getSortingIndicatorClasses().join(" ")} icon={Icons.ArrowUp} />;
   };
 
   const innerContent = (

package/src/components/DataGrid/testUtils.ts

@@ -16,28 +16,18 @@
 
 import { useEffect, useState } from "react";
 import { Filter } from "./DataGridFilters/DataGridFilters.interfaces";
+import { useFiltersReducer } from "./DataGridFilters/useFiltersReducer";
 
 /**
  * @scope .
  * @scopeException stories/DataGrid/DataGrid.stories.tsx
  */
 export const useMockFilteringLogic = <T>(data: T[], filterValues: Filter[] | undefined) => {
-  const [filters, setFilters] = useState<Filter[]>(filterValues || []);
+  const { state, addFilter, editFilter, deleteFilter, clearFilters } =
+    useFiltersReducer(filterValues);
 
   const [gridData, setGridData] = useState(data);
 
-  const onFilterAdd = (filter: Filter) => {
-    setFilters(prev => [...prev, filter]);
-  };
-
-  const onFilterEdit = (filter: Filter) =>
-    setFilters(prev => prev.map(f => (f.id === filter.id ? filter : f)));
-
-  const onFilterDelete = (id: string) =>
-    setFilters(prev => [...prev.filter(value => value.id !== id)]);
-
-  const onFiltersClear = () => setFilters([]);
-
   const operatorPredicateMap = {
     is: (v1: string, v2: string) => v1 === v2,
     "is not": (v1: string, v2: string) => v1 !== v2
@@ -47,7 +37,7 @@ export const useMockFilteringLogic = <T>(data: T[], filterValues: Filter[] | und
     const filteredData = data
       .map((row: T) => {
         let shouldBeDiscarded: boolean[] = [];
-        filters.forEach(filter => {
+        state.filters.forEach(filter => {
           shouldBeDiscarded = [
             ...shouldBeDiscarded,
             !filter.value.reduce((acc, val) => {
@@ -71,7 +61,15 @@ export const useMockFilteringLogic = <T>(data: T[], filterValues: Filter[] | und
         return val !== undefined;
       }) as T[];
     setGridData(filteredData);
-  }, [filters]);
+  }, [state.filters]);
 
-  return { onFilterAdd, onFilterEdit, onFilterDelete, onFiltersClear, gridData, filters };
+  return {
+    onFilterAdd: addFilter,
+    onFilterEdit: editFilter,
+    onFilterDelete: deleteFilter,
+    onFiltersClear: clearFilters,
+    gridData,
+    setGridData,
+    filters: state.filters
+  };
 };

package/src/components/Icon/Icon.module.scss

@@ -369,3 +369,11 @@
   content: "\e94d";
   @include fontProperties();
 }
+.icon-arrow-up:before {
+  content: "\e94f";
+  @include fontProperties();
+}
+.icon-external-link:before {
+  content: "\e950";
+  @include fontProperties();
+}

package/src/components/Icon/Icon.tsx

@@ -98,7 +98,9 @@ export enum Icons {
   FileAltIcon = "file-alt",
   AddCircle = "add-circle",
   ZoomIn = "zoom-in",
-  ZoomOut = "zoom-out"
+  ZoomOut = "zoom-out",
+  ArrowUp = "arrow-up",
+  ExternalLink = "external-link"
 }
 
 type Tag = "span" | "div" | "i";

package/src/components/Notifications/BaseModal/BaseModal.tsx

@@ -27,7 +27,7 @@ import { createPortal } from "react-dom";
 import { useGetDomRoot } from "../../../hooks/useGetDomRoot";
 import classes from "./BaseModal.module.scss";
 import { labelId, descriptionId } from "./BaseModalContext";
-import { useRepeatFocus } from "./useRepeatFocus";
+import { useRepeatFocus } from "../../../hooks/useRepeatFocus";
 
 const SCROLL_PROPERTY_NAME = "overflow";
 const SCROLL_PROPERTY_VALUE = "hidden";

package/src/font/icomoon.svg

@@ -86,5 +86,7 @@
 <glyph unicode="&#xe94c;" glyph-name="add-circle" d="M512 960c-282.624 0-512-229.376-512-512s229.376-512 512-512c282.624 0 512 229.376 512 512s-229.376 512-512 512zM767.999 396.8h-204.8v-204.8h-102.4v204.8h-204.8v102.4h204.8v204.8h102.4v-204.8h204.8v-102.4z" />
 <glyph unicode="&#xe94d;" glyph-name="ZoomOut" d="M731.85 315.975h-46.258l-16.391 15.808c57.379 66.744 91.917 153.395 91.917 247.657 0 210.187-170.371 380.561-380.557 380.561s-380.561-170.374-380.561-380.561c0-210.187 170.374-380.557 380.561-380.557 94.262 0 180.913 34.538 247.657 91.917l15.808-16.391v-46.258l292.736-292.151 87.239 87.239-292.151 292.736zM380.561 315.975c-145.784 0-263.465 117.681-263.465 263.465s117.681 263.465 263.465 263.465c145.784 0 263.465-117.681 263.465-263.465s-117.681-263.465-263.465-263.465zM234.192 608.713h292.738v-58.548h-292.738v58.548z" />
 <glyph unicode="&#xe94e;" glyph-name="ZoomIn" d="M731.85 315.975h-46.258l-16.391 15.808c57.379 66.744 91.917 153.395 91.917 247.657 0 210.187-170.371 380.561-380.557 380.561s-380.561-170.374-380.561-380.561c0-210.187 170.374-380.557 380.561-380.557 94.262 0 180.913 34.538 247.657 91.917l15.808-16.391v-46.258l292.736-292.151 87.239 87.239-292.151 292.736zM380.561 315.975c-145.784 0-263.465 117.681-263.465 263.465s117.681 263.465 263.465 263.465c145.784 0 263.465-117.681 263.465-263.465s-117.681-263.465-263.465-263.465zM409.835 725.809h-58.548v-117.095h-117.095v-58.548h117.095v-117.095h58.548v117.095h117.095v58.548h-117.095v117.095z" />
+<glyph unicode="&#xe94f;" glyph-name="arrow-up" d="M0.001 448.003l90.24-90.24 357.76 357.117v-778.879h128.002v778.879l357.12-357.762 90.877 90.885-512.002 511.996-511.996-511.996z" />
+<glyph unicode="&#xe950;" glyph-name="external-link" d="M910.225 49.775h-796.448v796.448h398.223v113.777h-398.223c-63.146 0-113.777-51.2-113.777-113.777v-796.448c0-62.575 50.631-113.775 113.777-113.775h796.448c62.575 0 113.775 51.2 113.775 113.775v398.225h-113.775v-398.225zM625.777 960v-113.777h204.232l-559.218-559.218 80.213-80.213 559.221 559.218v-204.232h113.775v398.223h-398.223z" />
 <glyph unicode="&#xe9d1;" glyph-name="eye-blocked" d="M945.942 945.942c-18.746 18.744-49.136 18.744-67.882 0l-202.164-202.164c-51.938 15.754-106.948 24.222-163.896 24.222-223.318 0-416.882-130.042-512-320 41.122-82.124 100.648-153.040 173.022-207.096l-158.962-158.962c-18.746-18.746-18.746-49.136 0-67.882 9.372-9.374 21.656-14.060 33.94-14.060s24.568 4.686 33.942 14.058l864 864c18.744 18.746 18.744 49.138 0 67.884zM416 640c42.24 0 78.082-27.294 90.92-65.196l-121.724-121.724c-37.902 12.838-65.196 48.68-65.196 90.92 0 53.020 42.98 96 96 96zM110.116 448c38.292 60.524 89.274 111.924 149.434 150.296 3.918 2.5 7.876 4.922 11.862 7.3-9.962-27.328-15.412-56.822-15.412-87.596 0-54.89 17.286-105.738 46.7-147.418l-60.924-60.924c-52.446 36.842-97.202 83.882-131.66 138.342zM768 518c0 27.166-4.256 53.334-12.102 77.898l-321.808-321.808c24.568-7.842 50.742-12.090 77.91-12.090 141.382 0 256 114.618 256 256zM830.026 670.026l-69.362-69.362c1.264-0.786 2.53-1.568 3.786-2.368 60.162-38.374 111.142-89.774 149.434-150.296-38.292-60.522-89.274-111.922-149.436-150.296-75.594-48.218-162.89-73.704-252.448-73.704-38.664 0-76.902 4.76-113.962 14.040l-76.894-76.894c59.718-21.462 123.95-33.146 190.856-33.146 223.31 0 416.876 130.042 512 320-45.022 89.916-112.118 166.396-193.974 222.026z" />
 </font></defs></svg>