@onewelcome/react-lib-components 8.14.0 → 8.16.0

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

@@ -14,7 +14,7 @@
  *    limitations under the License.
  */
 
-import React, { Fragment } from "react";
+import React, { Fragment, useEffect, useRef } from "react";
 import { DataGridFilter } from "./DataGridFilter";
 import classes from "./DataGridToolbar.module.scss";
 import {
@@ -52,8 +52,21 @@ export const DataGridToolbar = ({
   onFiltersClear,
   customEditTagContent
 }: DataGridToolbarProps) => {
-  const { state, addFilter, editFilter, deleteFilter, clearFilters } =
+  const { state, addFilter, editFilter, deleteFilter, resetFilters, clearFilters } =
     useFiltersReducer(filterValues);
+
+  const isFirstRenderRef = useRef(true);
+
+  useEffect(() => {
+    if (!isFirstRenderRef.current && filterValues) {
+      resetFilters(filterValues);
+    }
+  }, [filterValues]);
+
+  useEffect(() => {
+    isFirstRenderRef.current = false;
+  }, []);
+
   const { clearButtonCaption = "Clear all filters" } = translations?.toolbar || {};
   return (
     <Fragment>
@@ -64,6 +77,7 @@ export const DataGridToolbar = ({
             key={filter.id}
             filter={filter}
             columnsMetadata={columnsMetadata}
+            filterState={state}
             onFilterEdit={filter => {
               editFilter(filter);
               onFilterEdit && onFilterEdit(filter);
@@ -83,6 +97,7 @@ export const DataGridToolbar = ({
             mode="ADD"
             customEditTagContent={customEditTagContent}
             columnsMetadata={columnsMetadata}
+            filterState={state}
             onFilterAdd={filter => {
               addFilter(filter);
               onFilterAdd && onFilterAdd(filter);

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

@@ -39,6 +39,11 @@ export const useFiltersReducer = (filterValues: Filter[] | undefined) => {
           ...state,
           filters: [...state.filters.filter(value => value.id !== action.payload.id)]
         };
+      case "reset":
+        return {
+          ...state,
+          filters: action.payload
+        };
       case "clear":
         return { ...state, filters: [] };
     }
@@ -60,7 +65,9 @@ export const useFiltersReducer = (filterValues: Filter[] | undefined) => {
 
   const deleteFilter = (id: string) => dispatch({ type: "remove", payload: { id } });
 
+  const resetFilters = (filters: Filter[]) => dispatch({ type: "reset", payload: filters });
+
   const clearFilters = () => dispatch({ type: "clear" });
 
-  return { state, addFilter, deleteFilter, editFilter, clearFilters };
+  return { state, addFilter, deleteFilter, editFilter, resetFilters, clearFilters };
 };

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/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}

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

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

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

@@ -38,6 +38,7 @@ const RadioWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
   {
     children,
     error,
+    errorMessageProps,
     name,
     helperText,
     helperProps,
@@ -87,13 +88,15 @@ const RadioWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
         helperText={helperText}
         helperProps={{
           ...helperProps,
-          className: `${classes["radio-wrapper-helper"]} ${
-            error ? classes["radio-wrapper-error"] : ""
-          } ${helperProps?.className ?? ""}`
+          className: `${classes["radio-wrapper-helper"]} ${helperProps?.className ?? ""}`
         }}
         error={error}
         errorId={errorId}
         errorMessageIcon={Icons.Error}
+        errorMessageProps={{
+          ...errorMessageProps,
+          className: `${error ? classes["radio-wrapper-error"] : ""}`
+        }}
       >
         {renderChildren()}
       </Wrapper>

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

@@ -14,12 +14,14 @@
  *    limitations under the License.
  */
 
+import { ComponentPropsWithRef } from "react";
 import { DataAttributeKey } from "../../interfaces";
 
 /** Radios */
 export interface FormSelector extends FormElement {
   helperText?: string;
   errorMessage?: string;
+  errorMessageProps?: ComponentPropsWithRef<"span">;
   parentHelperId?: string;
   parentErrorId?: string;
 }

package/src/components/Notifications/Alert/AlertItem/AlertItem.tsx

@@ -33,8 +33,8 @@ export type Actions = (ButtonHTMLAttributes<HTMLButtonElement> & { label: string
 
 export interface Props {
   id: string;
-  title?: string;
-  content?: string;
+  title?: string | React.ReactNode;
+  content?: string | React.ReactNode;
   duration?: number;
   emphasis?: Emphasis;
   variant?: Variant;

package/src/components/Notifications/Alert/AlertProvider/AlertProvider.tsx

@@ -71,7 +71,7 @@ export const AlertProvider = ({
     return {
       ...arg,
       variant: variant ?? arg.variant,
-      id: generateID(15, arg.content ?? arg.title),
+      id: generateID(),
       duration: arg.duration ?? getDuration(arg),
       closeButtonTitle: closeTitle
     };

package/src/components/Tooltip/Tooltip.tsx

@@ -37,7 +37,7 @@ import { useGetDomRoot } from "../../hooks/useGetDomRoot";
 export interface Props extends ComponentPropsWithRef<"div"> {
   label: ReactNode;
   title?: string;
-  children: string;
+  children: ReactNode;
   domRoot?: HTMLElement;
   location?: "left" | "right" | "top" | "bottom";
   color?: "black" | "blue";
@@ -179,6 +179,9 @@ const TooltipComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
   const renderChildren = () => {
     if (React.isValidElement(label)) {
       return React.cloneElement(label as ReactElement, {
+        ref: relativeElement,
+        onMouseEnter: () => setVisible(true),
+        onMouseLeave: () => setVisible(false),
         onFocus: () => setVisible(true),
         onBlur: () => setVisible(false),
         "aria-describedby": identifier,
@@ -208,14 +211,16 @@ const TooltipComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
     <div {...rest} ref={wrappingDivRef} className={`${classes.wrapper} ${className ?? ""}`}>
       {renderChildren()}
       <div className={`${classes["tooltip-wrapper"]}`}>
-        <Icon
-          ref={relativeElement}
-          tag="div"
-          onMouseEnter={() => setVisible(true)}
-          onMouseLeave={() => setVisible(false)}
-          icon={Icons.InfoCircle}
-          className={classes.icon}
-        />
+        {!React.isValidElement(label) && (
+          <Icon
+            ref={relativeElement}
+            tag="div"
+            onMouseEnter={() => setVisible(true)}
+            onMouseLeave={() => setVisible(false)}
+            icon={Icons.InfoCircle}
+            className={classes.icon}
+          />
+        )}
         {createPortal(
           <div
             ref={elementToBePositioned}