@onewelcome/react-lib-components 8.15.0 → 9.0.0

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/Checkbox/Checkbox.module.scss

@@ -104,6 +104,12 @@
   }
 }
 
+.error-message {
+  margin-top: 0.25rem;
+  margin-left: relativeToBaseFontSize(1.75);
+  font-size: var(--font-size-sub);
+}
+
 .input {
   font-size: var(--font-size-big);
   width: var(--font-size-big);

package/src/components/Form/Checkbox/Checkbox.tsx

@@ -35,7 +35,7 @@ import { withReadOnly } from "../../withReadOnly";
 const isToggle = (children: ReactNode) => !!(children as ReactElement)?.props?.["data-toggle"];
 
 export interface Props extends ComponentPropsWithRef<"input">, Omit<FormSelector, "success"> {
-  label?: string | React.ReactElement;
+  label?: string | React.ReactNode;
   indeterminate?: boolean;
   helperProps?: FormHelperTextProps;
   formSelectorWrapperProps?: FormSelectorWrapperProps;
@@ -51,6 +51,7 @@ const CheckboxComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
     indeterminate,
     parentErrorId,
     errorMessage,
+    errorMessageProps,
     disabled,
     label,
     parentHelperId,
@@ -140,6 +141,10 @@ const CheckboxComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
       parentErrorId={parentErrorId}
       errorId={errorId}
       errorMessage={errorMessage}
+      errorMessageProps={{
+        ...errorMessageProps,
+        className: `${errorMessageProps?.className} ${classes["error-message"]}`
+      }}
       error={error}
       disabled={disabled}
       identifier={identifier}

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

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

@@ -0,0 +1,35 @@
+/*
+ * 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.
+ */
+
+.error-message {
+  color: var(--error);
+  display: flex;
+  align-items: flex-end;
+  line-height: 1rem;
+}
+
+.error-icon {
+  margin-right: 0.5rem;
+  font-size: var(--font-size-big);
+
+  &-before {
+    margin-right: 0.5rem;
+  }
+
+  &-after {
+    margin-left: 0.5rem;
+  }
+}

package/src/components/Form/FormErrorText/FormErrorText.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 from "react";
+import { Icon, Icons } from "../../Icon/Icon";
+import classes from "./FormErrorText.module.scss";
+import { KeyValuePair } from "../../../interfaces";
+
+export interface FormErrorTextProps {
+  error?: boolean;
+  errorMessage?: string;
+  errorMessageProps?: React.ComponentPropsWithRef<"span"> & KeyValuePair;
+  errorMessageIcon?: Icons;
+  errorMessageIconPosition?: "before" | "after";
+  errorId?: string;
+}
+
+export const FormErrorText = ({
+  error,
+  errorMessage,
+  errorMessageProps,
+  errorMessageIcon,
+  errorMessageIconPosition = "before",
+  errorId
+}: FormErrorTextProps) => {
+  if (!error) {
+    return null;
+  }
+
+  return (
+    <span
+      {...errorMessageProps}
+      className={`${classes["error-message"]} ${errorMessageProps?.className ?? ""}`}
+    >
+      <span id={errorId} className={classes["message"]}>
+        {errorMessageIcon && errorMessageIconPosition === "before" && (
+          <Icon
+            className={`${classes["error-icon"]} ${classes["error-icon-before"]}`}
+            icon={errorMessageIcon}
+          />
+        )}
+        {errorMessageProps?.children || errorMessage}
+        {errorMessageIcon && errorMessageIconPosition === "after" && (
+          <Icon
+            className={`${classes["error-icon"]} ${classes["error-icon-after"]}`}
+            icon={errorMessageIcon}
+          />
+        )}
+      </span>
+    </span>
+  );
+};

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

@@ -18,25 +18,6 @@
   position: relative;
 }
 
-.error-message {
-  color: var(--error);
-  display: flex;
-  align-items: flex-end;
-}
-
-.error-icon {
-  margin-right: 0.5rem;
-  font-size: var(--font-size-big);
-
-  &-before {
-    margin-right: 0.5rem;
-  }
-
-  &-after {
-    margin-left: 0.5rem;
-  }
-}
-
 .default-helper {
   font-size: var(--font-size-sub);
   line-height: 1.33333333;

package/src/components/Form/FormGroup/FormGroup.tsx

@@ -19,7 +19,8 @@
 import React, { ForwardRefRenderFunction, ComponentPropsWithRef, ReactElement } from "react";
 import classes from "./FormGroup.module.scss";
 import { FormHelperText, Props as HelperProps } from "../FormHelperText/FormHelperText";
-import { Icon, Icons } from "../../Icon/Icon";
+import { Icons } from "../../Icon/Icon";
+import { FormErrorText } from "../FormErrorText/FormErrorText";
 
 export interface Props extends ComponentPropsWithRef<"div"> {
   children: ReactElement[] | ReactElement | string | number[] | number;
@@ -53,19 +54,19 @@ const FormGroupComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
   }: Props,
   ref
 ) => {
-  const disableHelperText = helperProps?.disabled !== undefined ? helperProps?.disabled : disabled;
+  const disableHelperText = helperProps?.disabled ?? disabled;
+  const hasHelperText = helperText ?? helperProps?.children;
+  const showHelperText = hasHelperText && (!error || (error && !errorMessage));
+  const showErrorMessage = error && errorMessage && !errorMessageProps?.children;
+  const hasHelperContent = showHelperText || errorMessageProps?.children || showErrorMessage;
 
   return (
     <div {...rest} ref={ref} className={`${classes["form-group"]} ${className ?? ""}`}>
       {children}
 
-      {(helperText || (errorMessage && error)) && (
-        <div
-          className={`${classes["default-helper"]} ${
-            helperProps?.className ? helperProps.className : ""
-          }`}
-        >
-          {((helperText && !error) || (helperText && error && !errorMessage)) && (
+      {hasHelperContent && (
+        <div className={`${classes["default-helper"]} ${helperProps?.className ?? ""}`}>
+          {showHelperText && (
             <FormHelperText
               {...helperProps}
               className={""}
@@ -75,27 +76,16 @@ const FormGroupComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
               {helperProps?.children || helperText}
             </FormHelperText>
           )}
-          {error && errorMessage && (
-            <span
-              {...errorMessageProps}
-              className={`${classes["error-message"]} ${errorMessageProps?.className ? errorMessageProps.className : ""}`}
-            >
-              <span id={errorId} className={classes.message}>
-                {errorMessageIcon && errorMessageIconPosition === "before" && (
-                  <Icon
-                    className={`${classes["error-icon"]} ${classes["error-icon-before"]}`}
-                    icon={errorMessageIcon}
-                  />
-                )}
-                {errorMessage}
-                {errorMessageIcon && errorMessageIconPosition === "after" && (
-                  <Icon
-                    className={`${classes["error-icon"]} ${classes["error-icon-after"]}`}
-                    icon={errorMessageIcon}
-                  />
-                )}
-              </span>
-            </span>
+
+          {error && (
+            <FormErrorText
+              error={error}
+              errorMessage={errorMessage}
+              errorMessageProps={errorMessageProps}
+              errorId={errorId}
+              errorMessageIcon={errorMessageIcon}
+              errorMessageIconPosition={errorMessageIconPosition}
+            />
           )}
         </div>
       )}

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

@@ -28,10 +28,6 @@
   margin-left: relativeToBaseFontSize(1.75);
 }
 
-.error-message {
-  color: var(--error);
-}
-
 .disabled {
   input {
     color: var(--disabled);

package/src/components/Form/FormSelectorWrapper/FormSelectorWrapper.tsx

@@ -24,6 +24,7 @@ import { KeyValuePair } from "../../../interfaces";
 import { FormSelector } from "../form.interfaces";
 import { FormHelperText, Props as FormHelperTextProps } from "../FormHelperText/FormHelperText";
 import classes from "./FormSelectorWrapper.module.scss";
+import { FormErrorText } from "../FormErrorText/FormErrorText";
 
 export interface Props extends ComponentPropsWithRef<"div">, FormSelector {
   children?: ReactNode;
@@ -46,6 +47,7 @@ const FormSelectorWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Pro
     disabled,
     helperText,
     errorMessage,
+    errorMessageProps,
     parentErrorId,
     errorId,
     identifier,
@@ -55,6 +57,10 @@ const FormSelectorWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Pro
 ) => {
   const helperRef = helperProps?.ref ?? createRef();
 
+  const hasHelperText = helperText ?? helperProps?.children;
+  const showHelperText = !error && hasHelperText;
+  const showErrorText = error && (errorMessage || errorMessageProps?.children);
+
   return (
     <div
       {...rest}
@@ -64,24 +70,24 @@ const FormSelectorWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Pro
       }`}
     >
       <div {...containerProps}>{children}</div>
-      {(errorMessage || helperText || helperProps?.children) && (
-        <FormHelperText
-          {...helperProps}
-          ref={helperRef}
-          id={`${identifier}`}
-          className={`${classes["helper-text"]} ${helperProps?.className ?? ""} ${
-            error ? classes["error"] : ""
-          }`}
-        >
-          {error && errorMessage ? (
-            <span className={classes["error-message"]} id={errorId}>
-              {errorMessage}
-            </span>
-          ) : (
-            helperProps?.children || helperText
-          )}
-        </FormHelperText>
-      )}
+      {(showHelperText || showErrorText) &&
+        (showErrorText ? (
+          <FormErrorText
+            error={error}
+            errorMessage={errorMessage}
+            errorMessageProps={errorMessageProps}
+            errorId={errorId}
+          />
+        ) : (
+          <FormHelperText
+            {...helperProps}
+            ref={helperRef}
+            id={identifier}
+            className={`${classes["helper-text"]} ${helperProps?.className ?? ""}`}
+          >
+            {helperProps?.children || helperText}
+          </FormHelperText>
+        ))}
       {nestedChildren}
     </div>
   );

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

@@ -28,14 +28,15 @@
   color: var(--error);
 }
 
-.helper-text {
+.error-message {
   margin-top: 0.25rem;
-  margin-left: 1.75rem;
+  margin-left: relativeToBaseFontSize(1.75);
+  font-size: var(--font-size-sub);
 }
 
-.error-message {
-  margin-top: 1.25rem;
-  display: flex;
+.helper-text {
+  margin-top: 0.25rem;
+  margin-left: 1.75rem;
 }
 
 .error-icon {
@@ -49,11 +50,14 @@
   label {
     display: inline-block;
     margin-left: relativeToBaseFontSize(0.5);
-    user-select: none;
     font-size: var(--font-size-form-label);
     font-family: var(--font-family);
     margin-top: 0.15rem;
 
+    &.no-margin-top {
+      margin-top: 0;
+    }
+
     .disabled & {
       cursor: not-allowed;
     }

package/src/components/Form/Radio/Radio.tsx

@@ -27,7 +27,7 @@ import {
 import { withReadOnly } from "../../withReadOnly";
 
 export interface Props extends ComponentPropsWithRef<"input">, Omit<FormSelector, "success"> {
-  children: string;
+  children: string | React.ReactNode;
   value: string;
   formSelectorWrapperProps?: FormSelectorWrapperProps;
   helperProps?: HelperProps;
@@ -45,6 +45,7 @@ const RadioComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
     parentHelperId,
     error,
     errorMessage,
+    errorMessageProps,
     checked = false,
     formSelectorWrapperProps,
     helperProps,
@@ -81,6 +82,8 @@ const RadioComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
     onChange?.(clonedEvent);
   };
 
+  const customLabel = typeof children !== "string";
+
   const nativeInputClasses = [classes["native-input"]];
   const checkedRadioClasses = [classes["input"], classes["radio"]];
   const uncheckedRadioClasses = [classes["input"], classes["circle"]];
@@ -88,7 +91,6 @@ const RadioComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
   disabled &&
     checkedRadioClasses.push(classes["disabled"]) &&
     uncheckedRadioClasses.push(classes["disabled"]);
-
   return (
     <FormSelectorWrapper
       {...formSelectorWrapperProps}
@@ -99,6 +101,10 @@ const RadioComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
       parentErrorId={parentErrorId}
       errorId={errorId}
       errorMessage={errorMessage}
+      errorMessageProps={{
+        ...errorMessageProps,
+        className: `${errorMessageProps?.className} ${classes["error-message"]}`
+      }}
       error={error}
       disabled={disabled}
       identifier={identifier}
@@ -119,10 +125,14 @@ const RadioComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
         type="radio"
       />
 
-      {checked && <Icon className={checkedRadioClasses.join(" ")} icon={Icons.Radio} />}
-      {!checked && <Icon className={uncheckedRadioClasses.join(" ")} icon={Icons.Circle} />}
+      {checked ? <Icon className={checkedRadioClasses.join(" ")} icon={Icons.Radio} /> : <></>}
+      {!checked ? <Icon className={uncheckedRadioClasses.join(" ")} icon={Icons.Circle} /> : <></>}
 
-      <label onClick={onChangeHandler} htmlFor={`${identifier}-radio`}>
+      <label
+        className={customLabel ? classes["no-margin-top"] : ""}
+        onClick={onChangeHandler}
+        htmlFor={`${identifier}-radio`}
+      >
         {children}
       </label>
     </FormSelectorWrapper>

package/src/components/Form/Wrapper/CheckboxWrapper/CheckboxWrapper.module.scss

@@ -20,8 +20,10 @@
   margin-top: 1.25rem;
 }
 
-.checkbox-wrapper-error span {
+.checkbox-wrapper-error {
   font-size: 1rem;
+  margin-left: 0;
+  line-height: unset;
 }
 
 .checkbox-wrapper-error [data-icon] {

package/src/components/Form/Wrapper/CheckboxWrapper/CheckboxWrapper.tsx

@@ -34,7 +34,15 @@ export interface Props extends ComponentPropsWithRef<"div">, Omit<WrapperProps,
 }
 
 const CheckboxWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
-  { children, error = false, helperText, helperProps, fieldsetProps, ...rest }: Props,
+  {
+    children,
+    error = false,
+    helperText,
+    helperProps,
+    errorMessageProps,
+    fieldsetProps,
+    ...rest
+  }: Props,
   ref
 ) => {
   const { errorId, helperId } = useWrapper();
@@ -67,9 +75,11 @@ const CheckboxWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props>
         helperText={helperText}
         helperProps={{
           ...helperProps,
-          className: `${classes["checkbox-wrapper-helper"]} ${
-            error ? classes["checkbox-wrapper-error"] : ""
-          } ${helperProps?.className ?? ""}`
+          className: `${classes["checkbox-wrapper-helper"]}  ${helperProps?.className ?? ""}`
+        }}
+        errorMessageProps={{
+          ...errorMessageProps,
+          className: `${error ? classes["checkbox-wrapper-error"] : ""}`
         }}
         error={error}
         errorMessageIcon={Icons.Error}