@onewelcome/react-lib-components 8.16.0 → 9.0.0

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

@@ -24,6 +24,7 @@ import { DataGridFilterValueSelect } from "./DataGridFilterValueSelect";
 import {
   DataGridColumnMetadata,
   DefaultOperators,
+  FilterOperator,
   PopoverTranslations
 } from "./DataGridFilters.interfaces";
 import { useRepeatFocus } from "../../../hooks/useRepeatFocus";
@@ -36,14 +37,14 @@ export type Props = {
   columnsMetadata: DataGridColumnMetadata[];
   values: string[];
   pickedValues: string[];
-  operator: string;
-  operators: string[];
+  operator: FilterOperator | null;
+  operators: FilterOperator[];
   onFilterSubmit: () => void;
   resetFields: () => void;
   setFilterOpen: (value: React.SetStateAction<boolean>) => void;
   setColumn: (column: React.SetStateAction<string>) => void;
-  setOperator: (operator: React.SetStateAction<string>) => void;
-  setOperators: (operators: React.SetStateAction<string[]>) => void;
+  setOperator: (operator: React.SetStateAction<FilterOperator | null>) => void;
+  setOperators: (operators: React.SetStateAction<FilterOperator[]>) => void;
   setValues: (values: React.SetStateAction<string[]>) => void;
   setPickedValues: (pickedValues: React.SetStateAction<string[]>) => void;
   translations?: PopoverTranslations;
@@ -77,6 +78,9 @@ export const DataGridFilterPopover = ({
   } = translations || {};
   useRepeatFocus(popoverRef);
 
+  const isValueRequired = operator && !operator.allowEmptyValues;
+  const hasValidationError = Boolean(isValueRequired && pickedValues.length === 0);
+
   useEffect(() => {
     if (isOpen) {
       popoverRef.current?.focus();
@@ -92,74 +96,82 @@ export const DataGridFilterPopover = ({
       placement={{ horizontal: "left", vertical: "bottom" }}
       transformOrigin={{ horizontal: "left", vertical: "top" }}
     >
-      <div className={classes["popover"]}>
-        <div className={classes["controls"]}>
-          <SelectWrapper
-            label={columnSelectLabel}
-            value={column}
-            name={"column"}
-            onChange={e => {
-              setColumn(e.target.value);
-              const columnMetadata = columnsMetadata.find(({ name }) => name === e.target.value);
+      {isOpen && (
+        <div className={classes["popover"]}>
+          <div className={classes["controls"]}>
+            <SelectWrapper
+              label={columnSelectLabel}
+              value={column}
+              name={"column"}
+              onChange={e => {
+                setColumn(e.target.value);
+                const columnMetadata = columnsMetadata.find(({ name }) => name === e.target.value);
 
-              if (columnMetadata?.operators) {
-                setOperator(columnMetadata.operators[0]);
-                setOperators(columnMetadata.operators);
-              } else {
-                setOperator(Object.values(DefaultOperators)[0]);
-                setOperators(Object.values(DefaultOperators));
-              }
+                if (columnMetadata?.operators) {
+                  setOperator(columnMetadata.operators[0]);
+                  setOperators(columnMetadata.operators);
+                } else {
+                  setOperator(Object.values(DefaultOperators)[0]);
+                  setOperators(Object.values(DefaultOperators));
+                }
 
-              if (columnMetadata?.defaultValues) {
-                setPickedValues([]);
-                setValues(columnMetadata.defaultValues);
-              } else {
-                setPickedValues([]);
-                setValues([]);
-              }
-            }}
-          >
-            {columnsMetadata.map(({ name, headline }) => (
-              <Option className={classes["column-select-option"]} key={name} value={name}>
-                {headline}
-              </Option>
-            ))}
-          </SelectWrapper>
-          <SelectWrapper
-            label={operatorSelectLabel}
-            value={operator}
-            name={"operator"}
-            onChange={e => setOperator(e.target.value)}
-          >
-            {operators.map(operator => (
-              <Option key={operator} value={operator}>
-                {operator}
-              </Option>
-            ))}
-          </SelectWrapper>
-          <DataGridFilterValueSelect
-            column={column}
-            columnsMetadata={columnsMetadata}
-            values={values}
-            pickedValues={pickedValues}
-            setValues={setValues}
-            setPickedValues={setPickedValues}
-            translations={translations}
-          />
-        </div>
-        <div className={classes["actions"]}>
-          <Button onClick={onFilterSubmit}>{submitButtonTitle}</Button>
-          <Button
-            variant="text"
-            onClick={() => {
-              resetFields();
-              setFilterOpen(false);
-            }}
-          >
-            {cancelButtonTitle}
-          </Button>
+                if (columnMetadata?.defaultValues) {
+                  setPickedValues([]);
+                  setValues(columnMetadata.defaultValues);
+                } else {
+                  setPickedValues([]);
+                  setValues([]);
+                }
+              }}
+            >
+              {columnsMetadata.map(({ name, headline }) => (
+                <Option className={classes["column-select-option"]} key={name} value={name}>
+                  {headline}
+                </Option>
+              ))}
+            </SelectWrapper>
+            <SelectWrapper
+              label={operatorSelectLabel}
+              value={operator?.name || ""}
+              name={"operator"}
+              onChange={e => {
+                const selectedOperator = operators.find(op => op.name === e.target.value);
+                setOperator(selectedOperator || null);
+              }}
+            >
+              {operators.map(operator => (
+                <Option key={operator.name} value={operator.name}>
+                  {operator.name}
+                </Option>
+              ))}
+            </SelectWrapper>
+            <DataGridFilterValueSelect
+              column={column}
+              columnsMetadata={columnsMetadata}
+              values={values}
+              pickedValues={pickedValues}
+              setValues={setValues}
+              setPickedValues={setPickedValues}
+              translations={translations}
+              operator={operator}
+            />
+          </div>
+          <div className={classes["actions"]}>
+            <Button onClick={onFilterSubmit} disabled={hasValidationError}>
+              {submitButtonTitle}
+            </Button>
+            <Button
+              variant="text"
+              onClick={() => {
+                resetFields();
+                setFilterOpen(false);
+              }}
+            >
+              {cancelButtonTitle}
+            </Button>
+          </div>
         </div>
-      </div>
+      )}
     </Popover>
   );
 };

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

@@ -20,6 +20,7 @@ import {
   DefaultOperators,
   Filter,
   FilterEditorMode,
+  FilterOperator,
   FiltersState
 } from "./DataGridFilters.interfaces";
 
@@ -29,8 +30,8 @@ export const useDataGridFilter = (
   filterState: FiltersState
 ) => {
   const [column, setColumn] = useState("");
-  const [operator, setOperator] = useState("");
-  const [operators, setOperators] = useState<string[]>(Object.values(DefaultOperators));
+  const [operator, setOperator] = useState<FilterOperator | null>(null);
+  const [operators, setOperators] = useState<FilterOperator[]>(Object.values(DefaultOperators));
   const [values, setValues] = useState<string[]>([]);
   const [pickedValues, setPickedValues] = useState<string[]>([]);
   const [allowedColumnsMetaData, setAllowedColumnsMetaData] = useState<DataGridColumnMetadata[]>(
@@ -44,7 +45,7 @@ export const useDataGridFilter = (
 
   const resetFields = () => {
     setColumn("");
-    setOperator("");
+    setOperator(null);
     setValues([]);
     setPickedValues([]);
   };

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

@@ -19,7 +19,12 @@ import { Icon, Icons } from "../../Icon/Icon";
 import { RemoveButton } from "../../Tag/RemoveButton";
 import { Typography } from "../../Typography/Typography";
 import classes from "./DataGridFilter.module.scss";
-import { Filter, FilterEditorMode, TagTranslations } from "./DataGridFilters.interfaces";
+import {
+  Filter,
+  FilterEditorMode,
+  TagTranslations,
+  DataGridColumnMetadata
+} from "./DataGridFilters.interfaces";
 
 export interface DataGridFilterTagProps extends ComponentPropsWithRef<"div"> {
   customEditTagContent?: React.ReactElement;
@@ -30,14 +35,27 @@ export interface DataGridFilterTagProps extends ComponentPropsWithRef<"div"> {
   onFilterOpen: () => void;
   translations?: TagTranslations;
   dateTagCaption?: string;
+  columnsMetadata?: DataGridColumnMetadata[];
 }
 
-const EditTagContent = ({ filter, or, other }: { filter: Filter; or: string; other: string }) => {
+const EditTagContent = ({
+  filter,
+  or,
+  other,
+  columnsMetadata
+}: {
+  filter: Filter;
+  or: string;
+  other: string;
+  columnsMetadata?: DataGridColumnMetadata[];
+}) => {
   const { column, operator, value } = filter;
+  const columnHeadlineWithFallback =
+    columnsMetadata?.find(meta => meta.name === column)?.headline || column;
 
   return (
     <Fragment>
-      {column} {operator} {value.length > 0 && <b>{value[0]}</b>}
+      {columnHeadlineWithFallback} {operator?.name} {value.length > 0 && <b>{value[0]}</b>}
       {value.length >= 2 && (
         <>
           {" "}
@@ -64,6 +82,7 @@ export const DataGridFilterTagComponent: ForwardRefRenderFunction<
     translations,
     dateTagCaption,
     customEditTagContent,
+    columnsMetadata,
     ...rest
   }: DataGridFilterTagProps,
   ref
@@ -99,7 +118,12 @@ export const DataGridFilterTagComponent: ForwardRefRenderFunction<
             {customEditTagContent ? (
               React.cloneElement(customEditTagContent, { filter })
             ) : (
-              <EditTagContent filter={filter} or={or} other={other} />
+              <EditTagContent
+                filter={filter}
+                or={or}
+                other={other}
+                columnsMetadata={columnsMetadata}
+              />
             )}
           </Typography>
         )}

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

@@ -14,7 +14,7 @@
  *    limitations under the License.
  */
 
-import React from "react";
+import React, { useCallback, useState } from "react";
 import { Option } from "../../Form/Select/SingleSelect/Option";
 import { MultiOption } from "../../Form/Select/MultiSelect/MultiOption";
 import { MultiSelectWrapper } from "../../Form/Wrapper/MultiSelectWrapper/MultiSelectWrapper";
@@ -33,6 +33,7 @@ export type Props = {
   setValues: (values: React.SetStateAction<string[]>) => void;
   setPickedValues: (pickedValues: React.SetStateAction<string[]>) => void;
   translations?: PopoverTranslations;
+  operator?: { allowEmptyValues: boolean } | null;
 };
 
 export const DataGridFilterValueSelect = ({
@@ -42,8 +43,11 @@ export const DataGridFilterValueSelect = ({
   pickedValues,
   setValues,
   setPickedValues,
-  translations
+  translations,
+  operator
 }: Props) => {
+  const [touched, setTouched] = useState(false);
+
   const {
     valueSelectLabel = "Value",
     addNewValueLabel = "Create new",
@@ -54,18 +58,30 @@ export const DataGridFilterValueSelect = ({
   const disableAddNew = columnMetadata?.disableAddNew;
   const valueSelectType = columnMetadata?.valueSelectType;
 
+  const isValueRequired = operator && !operator.allowEmptyValues;
+  const hasValidationError = Boolean(isValueRequired && pickedValues.length === 0 && touched);
+
   const addNewBtnProps: React.ButtonHTMLAttributes<HTMLButtonElement> = {
     title: addNewValueButtonTitle,
     type: "button"
   };
 
-  const onChangeHandler = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    setPickedValues(
-      [...Array.from(e.target.options)]
-        .filter(option => option.selected)
-        .map(option => option.value)
-    );
-  };
+  const onChangeHandler = useCallback(
+    (e: React.ChangeEvent<HTMLSelectElement>) => {
+      const { selectedOptions, value } = e.target;
+
+      let newValues: string[];
+
+      if (valueSelectType === ValueSelectType.single) {
+        newValues = value ? [value] : [];
+      } else {
+        newValues = Array.from(selectedOptions, option => option.value);
+      }
+      setPickedValues(newValues);
+      setTouched(true);
+    },
+    [valueSelectType]
+  );
 
   const selectProps = {
     addNew: disableAddNew
@@ -93,6 +109,7 @@ export const DataGridFilterValueSelect = ({
       value={pickedValues[0]}
       onChange={onChangeHandler}
       selectProps={selectProps}
+      error={hasValidationError}
     >
       {values.map(value => (
         <Option key={value} value={value}>
@@ -107,6 +124,7 @@ export const DataGridFilterValueSelect = ({
       value={pickedValues}
       onChange={onChangeHandler}
       selectProps={selectProps}
+      error={hasValidationError}
     >
       {values.map(value => (
         <MultiOption key={value} value={value}>

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

@@ -14,10 +14,15 @@
  *    limitations under the License.
  */
 
+export interface FilterOperator {
+  name: string;
+  allowEmptyValues: boolean;
+}
+
 export interface Filter {
   id: string;
   column: string;
-  operator: string;
+  operator: FilterOperator | null;
   value: string[];
 }
 
@@ -48,18 +53,18 @@ export type FiltersState = {
 
 export type FilterEditorMode = "ADD" | "EDIT" | "ADD_DATE";
 
-export enum DefaultOperators {
-  is = "is",
-  isNot = "is not",
-  contains = "contains",
-  doesNotContain = "does not contain",
-  isEmpty = "is empty"
-}
+export const DefaultOperators: Record<string, FilterOperator> = {
+  is: { name: "is", allowEmptyValues: false },
+  isNot: { name: "is not", allowEmptyValues: false },
+  contains: { name: "contains", allowEmptyValues: false },
+  doesNotContain: { name: "does not contain", allowEmptyValues: false },
+  isEmpty: { name: "is empty", allowEmptyValues: true }
+};
 
 export interface DataGridColumnMetadata {
   name: string;
   headline: string;
-  operators?: string[];
+  operators?: FilterOperator[];
   defaultValues?: string[];
   disableAddNew?: boolean;
   allowSingleFilterOnly?: boolean;

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

@@ -70,6 +70,12 @@ export const DataGridToolbar = ({
   const { clearButtonCaption = "Clear all filters" } = translations?.toolbar || {};
   return (
     <Fragment>
+      {dateFilterValue && (
+        <DataGridDateFilter
+          dateFilterValue={dateFilterValue}
+          onDateFilterValueChange={onDateFilterValueChange}
+        />
+      )}
       {columnsMetadata &&
         state.filters.map(filter => (
           <DataGridFilter
@@ -120,13 +126,6 @@ export const DataGridToolbar = ({
             </Typography>
           </button>
         )}
-
-        {dateFilterValue && (
-          <DataGridDateFilter
-            dateFilterValue={dateFilterValue}
-            onDateFilterValueChange={onDateFilterValueChange}
-          />
-        )}
       </div>
     </Fragment>
   );

package/src/components/DataGrid/testUtils.ts

@@ -51,8 +51,8 @@ export const useMockFilteringLogic = <T extends { [k: string]: string }>(
   const filterRow = (row: T) => {
     let shouldBeDiscarded: boolean[] = [];
     state.filters.forEach(filter => {
-      const reduce = filter.operator == "is" ? reduceDisjunction : reduceConjunction;
-      const operatorPredicate = operatorPredicateMap[filter.operator];
+      const reduce = filter.operator?.name == "is" ? reduceDisjunction : reduceConjunction;
+      const operatorPredicate = operatorPredicateMap[filter.operator?.name || ""];
       shouldBeDiscarded = [
         ...shouldBeDiscarded,
         !reduce(filter.value, val => operatorPredicate(row[filter.column], val))

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

@@ -45,10 +45,6 @@ export interface Props extends FileUploadType {
   maxFileSizeInBytes?: number;
   selectButtonText?: string;
   dragAndDropText?: string;
-  /**
-   * @deprecated use the `helperText` prop instead
-   */
-  subText?: string;
   onDragOver?: DragEventHandler;
   onDragEnter?: DragEventHandler;
   onDragLeave?: DragEventHandler;
@@ -84,7 +80,6 @@ const FileUploadComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
     onDragLeave,
     wrapperProps,
     onDrop,
-    subText, // @deprecated
     onRequestedFileAction,
     exceedingMaxSizeErrorText,
     fileList,
@@ -93,7 +88,7 @@ const FileUploadComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
     isRequired = true,
     invalidDropErrorMessage = "Invalid file format. Supported formats are: $accept.",
     noMultipleFileDropErrorMessage = "You can upload only a single file.",
-    helperText = subText,
+    helperText,
     ...rest
   }: Props,
   ref