@onewelcome/react-lib-components 6.7.0 → 7.0.0

package/src/components/{Notifications/Snackbar/SnackbarContainer/SnackbarContainer.module.scss → DataGrid/DataGridFilters/DataGridToolbar.module.scss}

@@ -1,4 +1,4 @@
-/*!
+/*
  * Copyright 2022 OneWelcome B.V.
  *
  *    Licensed under the Apache License, Version 2.0 (the "License");
@@ -13,44 +13,37 @@
  *    See the License for the specific language governing permissions and
  *    limitations under the License.
  */
-@use "../../../../mixins.module.scss";
-@use "../../../../variables.scss";
 
-.snackbars {
-  position: fixed;
-  z-index: variables.$snackbar-z-index;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  @include mixins.transition(height, 0.2s, ease-in-out);
-
-  &.bottom {
-    bottom: 3.5rem;
-  }
+@use "../../../mixins.module.scss";
 
-  &.top {
-    top: 3.5rem;
-  }
-
-  &.start {
-    left: 0;
-  }
-
-  &.center {
-    left: 0;
-  }
+.toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  width: 100%;
+  padding-bottom: 1rem;
 
-  &.end {
-    right: 0;
+  .actions-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 0.5rem;
   }
-}
-
-@media only screen and (min-width: 37.5em) {
-  .snackbars {
-    width: initial;
 
-    &.center {
-      left: calc(50% - 18.75rem);
+  .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);
     }
   }
 }

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

@@ -0,0 +1,126 @@
+/*
+ * 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, useReducer } from "react";
+import { DataGridFilter } from "./DataGridFilter";
+import classes from "./DataGridToolbar.module.scss";
+import {
+  DataGridColumnMetadata,
+  Filter,
+  FiltersAction,
+  FiltersState,
+  FiltersTranslations
+} from "./DataGridFilters.interfaces";
+import { Typography } from "../../Typography/Typography";
+
+export interface DataGridToolbarProps extends ComponentPropsWithRef<"div"> {
+  columnsMetadata: DataGridColumnMetadata[];
+  filterValues?: Filter[];
+  translations?: FiltersTranslations;
+  onFilterAdd?: (filter: Filter) => void;
+  onFilterEdit?: (filter: Filter) => void;
+  onFilterDelete?: (id: string) => void;
+  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 || [] });
+  const { clearButtonCaption = "Clear all filters" } = translations?.toolbar || {};
+  return (
+    <div {...rest} ref={ref} className={classes["toolbar"]}>
+      {state.filters.map(filter => (
+        <DataGridFilter
+          mode="EDIT"
+          key={filter.id}
+          filter={filter}
+          columnsMetadata={columnsMetadata}
+          dispatch={dispatch}
+          onFilterEdit={onFilterEdit}
+          onFilterDelete={onFilterDelete}
+          tagTranslations={translations?.tag}
+          popoverTranslations={translations?.popover}
+        />
+      ))}
+      <div className={classes["actions-wrapper"]}>
+        <DataGridFilter
+          mode="ADD"
+          columnsMetadata={columnsMetadata}
+          dispatch={dispatch}
+          onFilterAdd={onFilterAdd}
+          tagTranslations={translations?.tag}
+          popoverTranslations={translations?.popover}
+        />
+        {state.filters.length >= 1 && (
+          <button
+            type="button"
+            className={classes["clear-button"]}
+            onClick={() => {
+              dispatch({ type: "clear" });
+              onFiltersClear && onFiltersClear();
+            }}
+          >
+            <Typography variant="body" className={classes["caption"]}>
+              {clearButtonCaption}
+            </Typography>
+          </button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export const DataGridToolbar = React.forwardRef(DataGridToolbarComponent);

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

@@ -23,6 +23,7 @@ export interface Props extends ComponentPropsWithRef<"thead"> {
   headers: HeaderCell[];
   initialSort?: Sort;
   onSort?: OnSortFunction;
+  enableExpandableRow?: boolean;
   disableContextMenuColumn?: boolean;
   enableMultiSorting?: boolean;
   spacing?: React.CSSProperties;
@@ -36,6 +37,7 @@ const DataGridHeaderComponent: ForwardRefRenderFunction<HTMLTableSectionElement,
     onSort,
     headers,
     disableContextMenuColumn,
+    enableExpandableRow,
     enableMultiSorting,
     spacing,
     ...rest
@@ -54,7 +56,7 @@ const DataGridHeaderComponent: ForwardRefRenderFunction<HTMLTableSectionElement,
   };
 
   /**
-   * The sortList contains sorting columns objects. The order of those objects determinates priorities of sorting.
+   * The sortList contains sorting columns objects. The order of those objects determines priorities of sorting.
    * Last modified sorting column has the highest priority.
    */
   const updateSortList = (name: string): Sort => {
@@ -105,6 +107,9 @@ const DataGridHeaderComponent: ForwardRefRenderFunction<HTMLTableSectionElement,
   return (
     <thead {...rest} ref={ref}>
       <tr className={classes["row"]}>
+        {enableExpandableRow && (
+          <td style={{ paddingRight: spacing?.paddingRight }} aria-label="expandable row"></td>
+        )}
         {headerCells}
         {!disableContextMenuColumn && (
           <td

package/src/components/DataGrid/testUtils.ts

@@ -0,0 +1,77 @@
+/*
+ * 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 { useEffect, useState } from "react";
+import { Filter } from "./DataGridFilters/DataGridFilters.interfaces";
+
+/**
+ * @scope .
+ * @scopeException stories/DataGrid/DataGrid.stories.tsx
+ */
+export const useMockFilteringLogic = <T>(data: T[], filterValues: Filter[] | undefined) => {
+  const [filters, setFilters] = useState<Filter[]>(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
+  };
+
+  useEffect(() => {
+    const filteredData = data
+      .map((row: T) => {
+        let shouldBeDiscarded: boolean[] = [];
+        filters.forEach(filter => {
+          shouldBeDiscarded = [
+            ...shouldBeDiscarded,
+            !filter.value.reduce((acc, val) => {
+              return (
+                // eslint-disable-next-line  @typescript-eslint/no-explicit-any
+                (operatorPredicateMap[filter.operator as keyof typeof operatorPredicateMap] as any)(
+                  row[filter.column as keyof typeof row],
+                  val
+                ) && acc
+              );
+            }, true)
+          ];
+        });
+
+        return shouldBeDiscarded.length > 0 &&
+          shouldBeDiscarded.reduce((acc, val) => acc || val, false)
+          ? undefined
+          : row;
+      })
+      .filter(val => {
+        return val !== undefined;
+      }) as T[];
+    setGridData(filteredData);
+  }, [filters]);
+
+  return { onFilterAdd, onFilterEdit, onFilterDelete, onFiltersClear, gridData, filters };
+};

package/src/components/Form/FileUpload/FileItem/FileItem.tsx

@@ -14,7 +14,7 @@
  *    limitations under the License.
  */
 
-import React, { ComponentPropsWithRef, ForwardRefRenderFunction } from "react";
+import React, { ComponentPropsWithRef, ForwardRefRenderFunction, Fragment } from "react";
 import classes from "./FileItem.module.scss";
 import { Typography } from "../../../Typography/Typography";
 import { Icon, Icons } from "../../../Icon/Icon";
@@ -140,12 +140,9 @@ const FileItemComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
     ></Icon>
   );
 
-  const renderActionIcons = (
-    actionIcons: { type: Icons; action: FILE_ACTION }[],
-    status: UploadProgress = ACTION_STATUS.UPLOADING
-  ) => {
+  const renderActionIcons = (actionIcons: { type: Icons; action: FILE_ACTION }[]) => {
     return actionIcons.map(icon => (
-      <>
+      <Fragment key={icon.action}>
         {icon.action !== FILE_ACTION.DOWNLOAD && (
           <Button
             color="primary"
@@ -180,7 +177,7 @@ const FileItemComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
             {icon.action}
           </Link>
         )}
-      </>
+      </Fragment>
     ));
   };
 
@@ -225,7 +222,7 @@ const FileItemComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
           {status === ACTION_STATUS.UPLOADING && getProgressBar()}
 
           <div className={classes["action-button-wrapper"]}>
-            {icons.actionIcons && renderActionIcons(icons.actionIcons, status)}
+            {icons.actionIcons && renderActionIcons(icons.actionIcons)}
           </div>
         </div>
       </div>

package/src/components/Form/FileUpload/FileUpload.module.scss

@@ -51,10 +51,14 @@
     }
   }
 
-  &.disabled {
-    pointer-events: none;
-    background-color: var(--disabled);
-    color: var(--greyed-out);
+  .upload-button-wrapper {
+    &.disabled {
+      pointer-events: none;
+
+      p {
+        color: var(--color-blue-grey400);
+      }
+    }
   }
 
   span[data-icon-status] {
@@ -116,6 +120,7 @@
   padding: 0 1.25rem;
   &.error {
     color: var(--error);
+    display: block;
   }
 }
 

package/src/components/Form/FileUpload/FileUpload.tsx

@@ -39,7 +39,7 @@ export interface Props extends FileUploadType {
   multiple: boolean;
   fileList: FileType[];
   exceedingMaxSizeErrorText?: string;
-  maxFileSize?: number;
+  maxFileSizeInBytes?: number;
   selectButtonText?: string;
   dragAndDropText?: string;
   subText?: string;
@@ -52,6 +52,7 @@ export interface Props extends FileUploadType {
   downloadFileLink?: string;
   isRequired?: boolean;
   invalidDropErrorMessage?: string;
+  noMultipleFileDropErrorMessage?: string;
 }
 
 const FileUploadComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
@@ -60,7 +61,7 @@ const FileUploadComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
     accept,
     error,
     success,
-    maxFileSize,
+    maxFileSizeInBytes,
     multiple,
     id,
     title,
@@ -80,6 +81,7 @@ const FileUploadComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
     downloadFileLink,
     isRequired = true,
     invalidDropErrorMessage = "Invalid file format. Supported formats are: $accept.",
+    noMultipleFileDropErrorMessage = "You can upload only a single file.",
     ...rest
   }: Props,
   ref
@@ -101,7 +103,7 @@ const FileUploadComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
     subTextClass.push(errorClass);
     errorTextClass.push(errorClass);
   }
-  disabled && dropzoneClassNames.push(classes["disabled"]);
+  disabled && dropzoneContainerClassNames.push(classes["disabled"]);
   success && !error && dropzoneClassNames.push(classes["success"]);
 
   const getFileList = (files: FileList | null): FileType[] => {
@@ -132,7 +134,11 @@ const FileUploadComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
     e.preventDefault();
     e.stopPropagation();
     let files = getFileList(e.target.files);
-    files.length && verifyExtensionValidity(files[files.length - 1]) && onChange?.(files);
+    const isFileValid = files.length && verifyExtensionValidity(files[files.length - 1]);
+    if (isFileValid) {
+      setErrorMsg("");
+    }
+    isFileValid && onChange?.(files);
   };
 
   const verifyExtensionValidity = (file: FileType) => {
@@ -148,14 +154,24 @@ const FileUploadComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
     };
 
     let err = false;
-    if (maxFileSize && file.size && file.size >= maxFileSize) {
-      const mb = (maxFileSize / (1024 * 1024)).toFixed(2);
+
+    if (maxFileSizeInBytes && file.size && file.size >= maxFileSizeInBytes) {
+      let sizeMessage: string;
+      const isAtLeastOneMb = maxFileSizeInBytes >= 1024 * 1024;
+
+      if (isAtLeastOneMb) {
+        sizeMessage = `${(maxFileSizeInBytes / (1024 * 1024)).toFixed(2)}MB`;
+      } else {
+        sizeMessage = `${(maxFileSizeInBytes / 1024).toFixed(2)}KB`;
+      }
+
       result.error =
         exceedingMaxSizeErrorText ??
-        `The maximum allowed file size is ${mb}MB. Upload a smaller file.`;
+        `The maximum allowed file size is ${sizeMessage}. Upload a smaller file.`;
       result.status = "error";
       err = true;
     }
+
     setInputError(err);
     return result;
   };
@@ -180,7 +196,7 @@ const FileUploadComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
     e.preventDefault();
     e.stopPropagation();
     const target = e.target as HTMLElement;
-    if (target?.classList.contains(classes["file-dropzone"])) {
+    if (target?.offsetParent?.classList.contains(classes["file-dropzone"])) {
       setDragActive(false);
     }
     onDragLeave?.(e);
@@ -195,11 +211,15 @@ const FileUploadComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
         setErrorMsg(invalidDropErrorMessage.replace("$accept", accept));
         setDragActive(false);
         return;
+      } else if (!multiple && e.dataTransfer.files.length > 1) {
+        setErrorMsg(noMultipleFileDropErrorMessage);
+        setDragActive(false);
+        return;
       } else {
         setErrorMsg("");
       }
       const validatedFiles = getFileList(e.dataTransfer.files);
-      onDrop?.(validatedFiles);
+      onDrop ? onDrop?.(validatedFiles) : onChange?.(validatedFiles);
     }
     setDragActive(false);
   };
@@ -265,17 +285,16 @@ const FileUploadComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
             </div>
           </div>
         </div>
-        {subText && (
-          <Typography variant={"sub-text"} className={subTextClass.join(" ")}>
-            {subText}
-          </Typography>
-        )}
-
         {errorMsg && (
           <Typography variant={"sub-text"} className={errorTextClass.join(" ")}>
             {errorMsg}
           </Typography>
         )}
+        {subText && (
+          <Typography variant={"sub-text"} className={subTextClass.join(" ")}>
+            {subText}
+          </Typography>
+        )}
       </div>
     </div>
   );

package/src/components/Form/Select/MultiSelect/MultiOption.tsx

@@ -37,10 +37,12 @@ const MultiOptionComponent: ForwardRefRenderFunction<HTMLLIElement, Props> = (
     const listbox = element.parentElement;
     const listboxWrapper = element.parentElement?.parentElement;
     const isListboxWrapperScrollable = !!listboxWrapper?.style.maxHeight;
+
     if (isListboxWrapperScrollable) {
-      listboxWrapper?.scrollTo(0, element.offsetTop - (listboxWrapper?.offsetHeight ?? 1) / 2);
+      listboxWrapper?.scrollTo &&
+        listboxWrapper?.scrollTo(0, element.offsetTop - (listboxWrapper?.offsetHeight ?? 1) / 2);
     }
-    listbox?.scrollTo(0, element.offsetTop - (listbox?.offsetHeight ?? 1) / 2);
+    listbox?.scrollTo && listbox?.scrollTo(0, element.offsetTop - (listbox?.offsetHeight ?? 1) / 2);
   };
 
   useEffect(() => {

package/src/components/Form/Select/MultiSelect/MultiSelect.tsx

@@ -52,8 +52,6 @@ const MultiSelectComponent: ForwardRefRenderFunction<HTMLSelectElement, MultiSel
     labeledBy,
     placeholder,
     describedBy,
-    searchPlaceholder = "Search item",
-    searchInputProps,
     selectButtonProps = {},
     className,
     error = false,
@@ -63,7 +61,7 @@ const MultiSelectComponent: ForwardRefRenderFunction<HTMLSelectElement, MultiSel
     noResultsLabel = "No results found",
     onChange,
     addNew,
-    search = { enabled: true, renderThreshold: 0 },
+    search = { enabled: true, renderThreshold: 0, searchPlaceholder: "Search item" },
     ...rest
   }: MultiSelectProps,
   ref
@@ -90,8 +88,6 @@ const MultiSelectComponent: ForwardRefRenderFunction<HTMLSelectElement, MultiSel
     optionsCount: optionsVisibleCount,
     focusedSelectItem,
     setFocusedSelectItem,
-    searchInputProps,
-    searchPlaceholder,
     describedBy,
     getOptionId,
     getListboxId

package/src/components/Form/Select/MultiSelect/useSearch.tsx

@@ -15,20 +15,12 @@
  */
 
 import React, { useEffect, useRef, useState } from "react";
-import { PartialInputProps, SearchProps } from "../Select.interfaces";
+import { SearchProps } from "../Select.interfaces";
 
 interface Props {
   selectId: string;
   search?: SearchProps;
   optionsCount: number;
-  /**
-   * @deprecated
-   */
-  searchPlaceholder?: string;
-  /**
-   * @deprecated
-   */
-  searchInputProps?: PartialInputProps & { reset?: boolean };
   searchInputClassName: string;
   expanded: boolean;
   setFocusedSelectItem: (idx: number) => void;
@@ -43,8 +35,6 @@ export const useSearch = ({
   selectId,
   search,
   optionsCount,
-  searchPlaceholder,
-  searchInputProps,
   searchInputClassName,
   expanded,
   setFocusedSelectItem,
@@ -77,17 +67,17 @@ export const useSearch = ({
   const renderSearch = () => {
     return (
       <input
-        {...((search?.searchInputProps as any) ?? searchInputProps ?? {})}
+        {...((search?.searchInputProps as any) ?? {})}
         ref={searchInputRef}
         value={filter}
         onChange={event => setFilter(event.currentTarget.value)}
-        className={[searchInputClassName, searchInputProps?.className].join(" ")}
+        className={[searchInputClassName, search?.searchInputProps?.className].join(" ")}
         style={{
           display: expanded ? "block" : "none"
         }}
         type="text"
         name="search-option"
-        placeholder={search?.searchPlaceholder ?? searchPlaceholder}
+        placeholder={search?.searchPlaceholder}
         role="combobox"
         autoComplete="off"
         autoCorrect="off"
@@ -110,10 +100,10 @@ export const useSearch = ({
   const visible = shouldRenderSearch();
 
   useEffect(() => {
-    if (search?.searchInputProps?.reset || searchInputProps?.reset) {
+    if (search?.searchInputProps?.reset) {
       resetSearchState();
     }
-  }, [searchInputProps?.reset, search?.searchInputProps?.reset]);
+  }, [search?.searchInputProps?.reset]);
 
   return {
     renderSearch,

package/src/components/Form/Select/Select.interfaces.ts

@@ -42,15 +42,7 @@ export interface SelectProps<V extends string | readonly string[] | undefined>
   labeledBy?: string;
   describedBy?: string;
   placeholder?: string;
-  /**
-   * @deprecated
-   */
-  searchPlaceholder?: string;
-  /**
-   * @deprecated
-   */
-  searchInputProps?: PartialInputProps & { reset?: boolean };
-  selectButtonProps?: ComponentPropsWithRef<"button">;
+  selectButtonProps?: ComponentPropsWithRef<"button"> & FormElement;
   search?: SearchProps;
   className?: string;
   value: V;

package/src/components/Form/Select/SingleSelect/Select.tsx

@@ -44,8 +44,6 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, SingleSelectP
     labeledBy,
     placeholder,
     describedBy,
-    searchPlaceholder = "Search item",
-    searchInputProps,
     selectButtonProps,
     className,
     error = false,
@@ -82,9 +80,7 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, SingleSelectP
     search,
     searchInputClassName: classes["select-search"],
     optionsCount,
-    setFocusedSelectItem,
-    searchInputProps,
-    searchPlaceholder
+    setFocusedSelectItem
   });
   const { addBtnRef, addNewBtnOptionsContainerClassName, renderAddNew } = useAddNewBtn({
     addNew,