@onewelcome/react-lib-components 7.1.0 → 8.1.0

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

@@ -14,14 +14,13 @@
  *    limitations under the License.
  */
 
-import React, { Fragment, createRef, useState } from "react";
+import React, { Fragment, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { useGetDomRoot } from "../../../hooks/useGetDomRoot";
 import {
   DataGridColumnMetadata,
   Filter,
   FilterEditorMode,
-  FiltersAction,
   PopoverTranslations,
   TagTranslations
 } from "./DataGridFilters.interfaces";
@@ -35,12 +34,12 @@ export type Props = {
   domRoot?: HTMLElement;
   filter?: Filter;
   columnsMetadata: DataGridColumnMetadata[];
-  dispatch: React.Dispatch<FiltersAction>;
   onFilterAdd?: (filter: Filter) => void;
   onFilterEdit?: (filter: Filter) => void;
   onFilterDelete?: (id: string) => void;
   tagTranslations?: TagTranslations;
   popoverTranslations?: PopoverTranslations;
+  customEditTagContent?: React.ReactElement;
 };
 
 export const DataGridFilter = ({
@@ -48,14 +47,17 @@ export const DataGridFilter = ({
   filter,
   domRoot,
   columnsMetadata,
-  dispatch,
   onFilterAdd,
   onFilterEdit,
   onFilterDelete,
   tagTranslations,
-  popoverTranslations
+  popoverTranslations,
+  customEditTagContent
 }: Props) => {
-  const wrappingDivRef = createRef<HTMLDivElement>();
+  const wrappingDivRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const popoverRef = useRef<HTMLDivElement>(null);
+
   const [filterOpen, setFilterOpen] = useState(false);
   const { root } = useGetDomRoot(domRoot, wrappingDivRef);
   const {
@@ -76,19 +78,9 @@ export const DataGridFilter = ({
   const onFilterSubmit = () => {
     if (mode === "ADD") {
       const id = generateID();
-
-      dispatch({
-        type: "add",
-        payload: { id, column, operator, value: pickedValues }
-      });
       onFilterAdd && onFilterAdd({ id, column, operator, value: pickedValues });
     } else if (mode === "EDIT" && filter) {
       const { id } = filter;
-
-      dispatch({
-        type: "edit",
-        payload: { id, column, operator, value: pickedValues }
-      });
       onFilterEdit && onFilterEdit({ id, column, operator, value: pickedValues });
     }
 
@@ -100,9 +92,8 @@ export const DataGridFilter = ({
     if (!filter) {
       return;
     }
-    const { id } = filter;
 
-    dispatch({ type: "remove", payload: { id } });
+    const { id } = filter;
     onFilterDelete && onFilterDelete(id);
 
     resetFields();
@@ -121,13 +112,18 @@ export const DataGridFilter = ({
         mode={mode}
         onFilterOpen={onFilterOpen}
         onFilterRemove={onFilterRemove}
-        triggerRef={wrappingDivRef}
+        triggerRef={triggerRef}
+        ref={wrappingDivRef}
         filter={filter}
+        translations={tagTranslations}
+        customEditTagContent={customEditTagContent}
       />
       {createPortal(
         <DataGridFilterPopover
+          popoverRef={popoverRef}
           anchorRef={wrappingDivRef}
           isOpen={filterOpen}
+          translations={popoverTranslations}
           column={column}
           columnsMetadata={columnsMetadata}
           values={values}

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

@@ -14,7 +14,7 @@
  *    limitations under the License.
  */
 
-import React from "react";
+import React, { useEffect } from "react";
 import classes from "./DataGridFilter.module.scss";
 import { Button } from "../../Button/Button";
 import { Option } from "../../Form/Select/SingleSelect/Option";
@@ -27,9 +27,11 @@ import {
   DefaultOperators,
   PopoverTranslations
 } from "./DataGridFilters.interfaces";
+import { useRepeatFocus } from "../../../hooks/useRepeatFocus";
 
 export type Props = {
-  anchorRef?: React.RefObject<HTMLOrSVGElement>;
+  popoverRef: React.RefObject<HTMLDivElement>;
+  anchorRef?: React.RefObject<HTMLDivElement>;
   isOpen: boolean;
   column: string;
   columnsMetadata: DataGridColumnMetadata[];
@@ -49,6 +51,7 @@ export type Props = {
 };
 
 export const DataGridFilterPopover = ({
+  popoverRef,
   anchorRef,
   isOpen,
   column,
@@ -76,9 +79,19 @@ export const DataGridFilterPopover = ({
     submitButtonTitle = "Apply",
     cancelButtonTitle = "Cancel"
   } = translations || {};
+  useRepeatFocus(popoverRef);
+
+  useEffect(() => {
+    if (isOpen) {
+      popoverRef.current?.focus();
+    }
+  }, [isOpen]);
+
   return (
     <Popover
+      tabIndex={-1}
       anchorEl={anchorRef}
+      ref={popoverRef}
       show={isOpen}
       placement={{ horizontal: "left", vertical: "bottom" }}
       transformOrigin={{ horizontal: "left", vertical: "top" }}

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

@@ -22,7 +22,8 @@ import classes from "./DataGridFilter.module.scss";
 import { Filter, FilterEditorMode, TagTranslations } from "./DataGridFilters.interfaces";
 
 export interface DataGridFilterTagProps extends ComponentPropsWithRef<"div"> {
-  triggerRef: React.Ref<HTMLDivElement>;
+  customEditTagContent?: React.ReactElement;
+  triggerRef: React.Ref<HTMLButtonElement>;
   filter?: Filter;
   mode: FilterEditorMode;
   onFilterRemove: () => void;
@@ -38,7 +39,6 @@ const EditTagContent = ({ filter }: { filter: Filter }) => {
       {column} {operator} {value.length > 0 && <b>{value[0]}</b>}
       {value.length >= 2 && (
         <>
-          {" "}
           or <b> {value.length - 1} other</b>
         </>
       )}
@@ -57,7 +57,7 @@ export const DataGridFilterTagComponent: ForwardRefRenderFunction<
     onFilterRemove,
     onFilterOpen,
     translations,
-
+    customEditTagContent,
     ...rest
   }: DataGridFilterTagProps,
   ref
@@ -67,8 +67,13 @@ export const DataGridFilterTagComponent: ForwardRefRenderFunction<
   const shouldRenderEditTag = mode === "EDIT" && filter;
 
   return (
-    <div {...rest} ref={triggerRef} className={classes["filter-wrapper"]}>
-      <button type="button" className={classes["filter-button"]} onClick={onFilterOpen}>
+    <div {...rest} ref={ref} className={classes["filter-wrapper"]}>
+      <button
+        ref={triggerRef}
+        type="button"
+        className={classes["filter-button"]}
+        onClick={onFilterOpen}
+      >
         {shouldRenderAddTag && (
           <Fragment>
             <Icon icon={Icons.AddCircle} />
@@ -79,11 +84,17 @@ export const DataGridFilterTagComponent: ForwardRefRenderFunction<
         )}
         {shouldRenderEditTag && (
           <Typography variant="body" className={classes["caption"]}>
-            <EditTagContent filter={filter} />
+            {customEditTagContent ? (
+              React.cloneElement(customEditTagContent, { filter })
+            ) : (
+              <EditTagContent filter={filter} />
+            )}
           </Typography>
         )}
       </button>
-      {shouldRenderEditTag && <RemoveButton onRemove={onFilterRemove} />}
+      {shouldRenderEditTag && (
+        <RemoveButton className={classes["remove-button"]} onRemove={onFilterRemove} />
+      )}
     </div>
   );
 };

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

@@ -0,0 +1,68 @@
+/*
+ * 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, { useState, useEffect } from "react";
+import { InputWrapper } from "../../Form/Wrapper/InputWrapper/InputWrapper";
+import { Icon, Icons } from "../../Icon/Icon";
+import classes from "./DataGridToolbar.module.scss";
+import { InputWrapperProps, useDebouncedCallback } from "../../..";
+
+export interface DataGridSearchbarProps {
+  onSearch: (value: string) => void;
+  initialSearchValue?: string;
+  debounceTime?: number;
+  placeholder?: string;
+  inputWrapperProps?: InputWrapperProps;
+}
+
+export const DataGridSearchbar = ({
+  onSearch,
+  initialSearchValue,
+  debounceTime,
+  inputWrapperProps,
+  placeholder
+}: DataGridSearchbarProps) => {
+  const [search, setSearch] = useState(initialSearchValue ?? "");
+  const debouncedCallback = useDebouncedCallback(onSearch, debounceTime ?? 500);
+  const onSearchCallback = debounceTime ? debouncedCallback : onSearch;
+
+  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    onSearchCallback(event.target.value);
+    setSearch(event.target.value);
+  };
+
+  useEffect(() => {
+    initialSearchValue && setSearch(initialSearchValue);
+  }, [initialSearchValue]);
+
+  return (
+    <InputWrapper
+      {...inputWrapperProps}
+      className={`${classes["searchbar"]} ${inputWrapperProps?.className ?? ""}`}
+      label={inputWrapperProps?.label ?? ""}
+      onChange={onChange}
+      type="search"
+      name={inputWrapperProps?.name ?? "searchbar"}
+      value={search}
+      inputProps={{
+        ...inputWrapperProps?.inputProps,
+        type: "search",
+        prefix: <Icon icon={Icons.Search} />,
+        placeholder: placeholder ?? "Search items"
+      }}
+    ></InputWrapper>
+  );
+};

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

@@ -16,34 +16,56 @@
 
 @use "../../../mixins.module.scss";
 
-.toolbar {
+.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;
 
-  .actions-wrapper {
+  .filter-section {
     display: flex;
     align-items: center;
     justify-content: flex-start;
+    flex-wrap: wrap;
     gap: 0.5rem;
-  }
+    width: 100%;
+    flex-grow: 1;
+
+    .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);
 
-  .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);
+      .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, { ComponentPropsWithRef, ForwardRefRenderFunction, 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 extends ComponentPropsWithRef<"div"> {
+export interface DataGridToolbarProps {
   columnsMetadata: DataGridColumnMetadata[];
+  customEditTagContent?: React.ReactElement;
   filterValues?: Filter[];
   translations?: FiltersTranslations;
   onFilterAdd?: (filter: Filter) => void;
@@ -36,71 +32,49 @@ export interface DataGridToolbarProps extends ComponentPropsWithRef<"div"> {
   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 DataGridToolbarComponent: ForwardRefRenderFunction<
-  HTMLDivElement,
-  DataGridToolbarProps
-> = (
-  {
-    columnsMetadata,
-    filterValues,
-    translations,
-    onFilterAdd,
-    onFilterEdit,
-    onFilterDelete,
-    onFiltersClear,
-    ...rest
-  },
-  ref
-) => {
-  const [state, dispatch] = useReducer(filtersReducer, { filters: filterValues || [] });
+export const DataGridToolbar = ({
+  columnsMetadata,
+  filterValues,
+  translations,
+  onFilterAdd,
+  onFilterEdit,
+  onFilterDelete,
+  onFiltersClear,
+  customEditTagContent
+}: DataGridToolbarProps) => {
+  const { state, addFilter, editFilter, deleteFilter, clearFilters } =
+    useFiltersReducer(filterValues);
   const { clearButtonCaption = "Clear all filters" } = translations?.toolbar || {};
   return (
-    <div {...rest} ref={ref} className={classes["toolbar"]}>
+    <Fragment>
       {state.filters.map(filter => (
         <DataGridFilter
           mode="EDIT"
           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}
         />
@@ -109,7 +83,7 @@ export const DataGridToolbarComponent: ForwardRefRenderFunction<
             type="button"
             className={classes["clear-button"]}
             onClick={() => {
-              dispatch({ type: "clear" });
+              clearFilters();
               onFiltersClear && onFiltersClear();
             }}
           >
@@ -119,8 +93,6 @@ export const DataGridToolbarComponent: ForwardRefRenderFunction<
           </button>
         )}
       </div>
-    </div>
+    </Fragment>
   );
 };
-
-export const DataGridToolbar = React.forwardRef(DataGridToolbarComponent);

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

@@ -0,0 +1,38 @@
+/*
+ * 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, { ComponentPropsWithRef, ForwardRefRenderFunction, ReactElement } from "react";
+import classes from "./DataGridToolbar.module.scss";
+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, filters, buttons, ...rest },
+  ref
+) => {
+  return (
+    <div ref={ref} className={classes["wrapper"]} {...rest}>
+      <div className={classes["filter-section"]}>{filters}</div>
+      <div className={classes["button-section"]}>{buttons}</div>
+    </div>
+  );
+};
+
+export const DataGridToolbarWrapper = React.forwardRef(DataGridToolbarWrapperComponent);

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 = (