@onewelcome/react-lib-components 1.2.0 → 1.4.0

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

@@ -14,7 +14,12 @@
  *    limitations under the License.
  */
 
-import React, { ComponentPropsWithRef, ReactElement, useEffect } from "react";
+import React, {
+  ForwardRefRenderFunction,
+  ComponentPropsWithRef,
+  ReactElement,
+  useEffect
+} from "react";
 import classes from "./CheckboxWrapper.module.scss";
 import { useWrapper } from "../../../hooks/useWrapper";
 import { Wrapper, WrapperProps } from "../Wrapper/Wrapper";
@@ -27,49 +32,52 @@ export interface Props extends ComponentPropsWithRef<"div">, WrapperProps {
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
-export const CheckboxWrapper = React.forwardRef<HTMLDivElement, Props>(
-  ({ children, error = false, helperText, helperProps, fieldsetProps, ...rest }: Props, ref) => {
-    const { errorId, helperId } = useWrapper();
+const CheckboxWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  { children, error = false, helperText, helperProps, fieldsetProps, ...rest }: Props,
+  ref
+) => {
+  const { errorId, helperId } = useWrapper();
 
-    useEffect(() => {
-      if (fieldsetProps.legend === undefined) {
-        console.error(
-          `You should give your Fieldset component a legend prop so a legend element is rendered. This error was thrown in CheckboxWrapper. You can add this legend prop through the fieldsetProps prop by passing an object (fieldsetProps={{ legend: "legend here" }})`
-        );
-      }
-    }, []);
-
-    const renderChildren = () =>
-      React.Children.map(children, child =>
-        React.cloneElement(child, {
-          parentErrorId: errorId,
-          error: error,
-          parentHelperId: helperText ? helperId : false,
-          disabled: rest.disabled
-        })
+  useEffect(() => {
+    if (fieldsetProps.legend === undefined) {
+      console.error(
+        `You should give your Fieldset component a legend prop so a legend element is rendered. This error was thrown in CheckboxWrapper. You can add this legend prop through the fieldsetProps prop by passing an object (fieldsetProps={{ legend: "legend here" }})`
       );
+    }
+  }, []);
 
-    return (
-      <Fieldset {...fieldsetProps} error={error} required={rest.required}>
-        <Wrapper
-          {...rest}
-          ref={ref}
-          label=""
-          helperId={helperId}
-          helperText={helperText}
-          helperProps={{
-            ...helperProps,
-            className: `${classes["checkbox-wrapper-helper"]} ${
-              error ? classes["checkbox-wrapper-error"] : ""
-            } ${helperProps?.className ?? ""}`
-          }}
-          error={error}
-          errorMessageIcon={Icons.Error}
-          errorId={errorId}
-        >
-          {renderChildren()}
-        </Wrapper>
-      </Fieldset>
+  const renderChildren = () =>
+    React.Children.map(children, child =>
+      React.cloneElement(child, {
+        parentErrorId: errorId,
+        error: error,
+        parentHelperId: helperText ? helperId : false,
+        disabled: rest.disabled
+      })
     );
-  }
-);
+
+  return (
+    <Fieldset {...fieldsetProps} error={error} required={rest.required}>
+      <Wrapper
+        {...rest}
+        ref={ref}
+        label=""
+        helperId={helperId}
+        helperText={helperText}
+        helperProps={{
+          ...helperProps,
+          className: `${classes["checkbox-wrapper-helper"]} ${
+            error ? classes["checkbox-wrapper-error"] : ""
+          } ${helperProps?.className ?? ""}`
+        }}
+        error={error}
+        errorMessageIcon={Icons.Error}
+        errorId={errorId}
+      >
+        {renderChildren()}
+      </Wrapper>
+    </Fieldset>
+  );
+};
+
+export const CheckboxWrapper = React.forwardRef(CheckboxWrapperComponent);

package/src/Form/Wrapper/InputWrapper/InputWrapper.tsx

@@ -14,7 +14,13 @@
  *    limitations under the License.
  */
 
-import React, { ComponentPropsWithRef, useEffect, useRef, useState } from "react";
+import React, {
+  ForwardRefRenderFunction,
+  ComponentPropsWithRef,
+  useEffect,
+  useRef,
+  useState
+} from "react";
 import { Input, Type, Props as InputProps } from "../../Input/Input";
 import classes from "./InputWrapper.module.scss";
 import { Wrapper, WrapperProps } from "../Wrapper/Wrapper";
@@ -58,113 +64,113 @@ const useLabelOffset = (
   return { labelOffset };
 };
 
-export const InputWrapper = React.forwardRef<HTMLDivElement, Props>(
-  (
-    {
-      type,
-      name,
-      inputProps,
-      helperText,
-      helperProps,
-      value,
-      className,
-      error,
-      onChange,
-      onBlur,
-      onFocus,
-      disabled,
-      ...rest
-    }: Props,
-    ref
-  ) => {
-    const {
-      errorId,
-      floatingLabelActive,
-      setFloatingLabelActive,
-      hasFocus,
-      setHasFocus,
-      helperId,
-      labelId
-    } = useWrapper(value, inputProps?.placeholder, type);
-    const { prefix, suffix } = inputProps || {};
-    const input = useRef<HTMLInputElement>(null);
-    const hasValueOrActiveFloatingLabel = !!value || floatingLabelActive;
-    const { labelOffset } = useLabelOffset(
-      (inputProps && (inputProps.ref as React.RefObject<HTMLInputElement>)) || input,
-      floatingLabelActive,
-      prefix
-    );
+const InputWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  {
+    type,
+    name,
+    inputProps,
+    helperText,
+    helperProps,
+    value,
+    className,
+    error,
+    onChange,
+    onBlur,
+    onFocus,
+    disabled,
+    ...rest
+  }: Props,
+  ref
+) => {
+  const {
+    errorId,
+    floatingLabelActive,
+    setFloatingLabelActive,
+    hasFocus,
+    setHasFocus,
+    helperId,
+    labelId
+  } = useWrapper(value, inputProps?.placeholder, type);
+  const { prefix, suffix } = inputProps || {};
+  const input = useRef<HTMLInputElement>(null);
+  const hasValueOrActiveFloatingLabel = !!value || floatingLabelActive;
+  const { labelOffset } = useLabelOffset(
+    (inputProps && (inputProps.ref as React.RefObject<HTMLInputElement>)) || input,
+    floatingLabelActive,
+    prefix
+  );
 
-    const labelClasses = [classes["input-label"]];
-    hasFocus && labelClasses.push(classes["focus"]);
+  const labelClasses = [classes["input-label"]];
+  hasFocus && labelClasses.push(classes["focus"]);
 
-    const inputWrapperClasses = [];
-    floatingLabelActive && inputWrapperClasses.push(classes["floating-label-active"]);
-    inputProps?.wrapperProps?.className &&
-      inputWrapperClasses.push(inputProps?.wrapperProps?.className);
-    disabled && inputWrapperClasses.push(classes["disabled"]);
+  const inputWrapperClasses = [];
+  floatingLabelActive && inputWrapperClasses.push(classes["floating-label-active"]);
+  inputProps?.wrapperProps?.className &&
+    inputWrapperClasses.push(inputProps?.wrapperProps?.className);
+  disabled && inputWrapperClasses.push(classes["disabled"]);
 
-    return (
-      <Wrapper
-        {...rest}
-        ref={ref}
-        name={name}
-        className={`${classes["input-wrapper"]} ${className ?? ""}`}
-        labelProps={{
-          id: labelId,
-          className: labelClasses.join(" "),
-          style: { ...labelOffset }
+  return (
+    <Wrapper
+      {...rest}
+      ref={ref}
+      name={name}
+      className={`${classes["input-wrapper"]} ${className ?? ""}`}
+      labelProps={{
+        id: labelId,
+        className: labelClasses.join(" "),
+        style: { ...labelOffset }
+      }}
+      floatingLabelActive={floatingLabelActive}
+      errorId={errorId}
+      error={error}
+      helperId={helperId}
+      helperText={helperText}
+      helperProps={{
+        ...helperProps,
+        className: `${classes["input-wrapper-helper"]} ${helperProps?.className ?? ""} `
+      }}
+      helperIndent={20}
+      disabled={disabled}
+    >
+      <Input
+        {...inputProps}
+        prefix={hasValueOrActiveFloatingLabel ? prefix : ""}
+        suffix={hasValueOrActiveFloatingLabel ? suffix : ""}
+        wrapperProps={{
+          className: inputWrapperClasses.join(" ")
         }}
-        floatingLabelActive={floatingLabelActive}
-        errorId={errorId}
-        error={error}
-        helperId={helperId}
-        helperText={helperText}
-        helperProps={{
-          ...helperProps,
-          className: `${classes["input-wrapper-helper"]} ${helperProps?.className ?? ""} `
+        ref={(inputProps && inputProps.ref) || input}
+        aria-labelledby={labelId}
+        aria-describedby={error ? errorId : helperId}
+        onChange={onChange}
+        onFocus={e => {
+          onFocus && onFocus(e);
+          setHasFocus(true);
+          setFloatingLabelActive(true);
+        }}
+        onBlur={e => {
+          onBlur && onBlur(e);
+          setHasFocus(false);
+          e.target.value ||
+          e.target.placeholder ||
+          inputProps?.placeholder?.length ||
+          type === "datetime-local" ||
+          type === "time" ||
+          type === "date"
+            ? setFloatingLabelActive(true)
+            : setFloatingLabelActive(false);
         }}
-        helperIndent={20}
-        disabled={disabled}
-      >
-        <Input
-          {...inputProps}
-          prefix={hasValueOrActiveFloatingLabel ? prefix : ""}
-          suffix={hasValueOrActiveFloatingLabel ? suffix : ""}
-          wrapperProps={{
-            className: inputWrapperClasses.join(" ")
-          }}
-          ref={(inputProps && inputProps.ref) || input}
-          aria-labelledby={labelId}
-          aria-describedby={error ? errorId : helperId}
-          onChange={onChange}
-          onFocus={e => {
-            onFocus && onFocus(e);
-            setHasFocus(true);
-            setFloatingLabelActive(true);
-          }}
-          onBlur={e => {
-            onBlur && onBlur(e);
-            setHasFocus(false);
-            e.target.value ||
-            e.target.placeholder ||
-            inputProps?.placeholder?.length ||
-            type === "datetime-local" ||
-            type === "time" ||
-            type === "date"
-              ? setFloatingLabelActive(true)
-              : setFloatingLabelActive(false);
-          }}
-          className={`${floatingLabelActive ? classes["floating-label"] : ""} ${
-            inputProps?.className ?? ""
-          }`}
-          name={name}
-          error={error}
-          id={name}
-          value={value}
-          type={type}
-        />
-      </Wrapper>
-    );
-  }
-);
+        className={`${floatingLabelActive ? classes["floating-label"] : ""} ${
+          inputProps?.className ?? ""
+        }`}
+        name={name}
+        error={error}
+        id={name}
+        value={value}
+        type={type}
+      />
+    </Wrapper>
+  );
+};
+
+export const InputWrapper = React.forwardRef(InputWrapperComponent);

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

@@ -14,7 +14,12 @@
  *    limitations under the License.
  */
 
-import React, { ComponentPropsWithRef, ReactElement, useEffect } from "react";
+import React, {
+  ForwardRefRenderFunction,
+  ComponentPropsWithRef,
+  ReactElement,
+  useEffect
+} from "react";
 import classes from "./RadioWrapper.module.scss";
 import { Wrapper, WrapperProps } from "../Wrapper/Wrapper";
 import { useWrapper } from "../../../hooks/useWrapper";
@@ -28,68 +33,68 @@ export interface Props extends ComponentPropsWithRef<"div">, WrapperProps {
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
-export const RadioWrapper = React.forwardRef<HTMLDivElement, Props>(
-  (
-    {
-      children,
-      error,
-      name,
-      helperText,
-      helperProps,
-      fieldsetProps,
-      value,
-      onChange,
-      disabled,
-      ...rest
-    }: Props,
-    ref
-  ) => {
-    const { errorId, helperId } = useWrapper(value);
+const RadioWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  {
+    children,
+    error,
+    name,
+    helperText,
+    helperProps,
+    fieldsetProps,
+    value,
+    onChange,
+    disabled,
+    ...rest
+  }: Props,
+  ref
+) => {
+  const { errorId, helperId } = useWrapper(value);
 
-    useEffect(() => {
-      if (fieldsetProps.legend === undefined) {
-        console.error(
-          `You should give your Fieldset component a legend prop so a legend element is rendered. This error was thrown in RadioWrapper. You can add this legend prop through the fieldsetProps prop by passing an object (fieldsetProps={{ legend: "legend here" }})`
-        );
-      }
-    }, []);
-
-    const renderChildren = () =>
-      React.Children.map(children, child =>
-        React.cloneElement(child, {
-          parentErrorId: errorId,
-          error: error,
-          checked: child.props.value === value,
-          name: name,
-          parentHelperId: helperText ? helperId : false,
-          onChange: onChange,
-          disabled: child.props.disabled !== undefined ? child.props.disabled : disabled
-        })
+  useEffect(() => {
+    if (fieldsetProps.legend === undefined) {
+      console.error(
+        `You should give your Fieldset component a legend prop so a legend element is rendered. This error was thrown in RadioWrapper. You can add this legend prop through the fieldsetProps prop by passing an object (fieldsetProps={{ legend: "legend here" }})`
       );
+    }
+  }, []);
 
-    return (
-      <Fieldset {...fieldsetProps} error={error} disabled={disabled}>
-        <Wrapper
-          {...rest}
-          ref={ref}
-          disabled={disabled}
-          name={name}
-          helperId={helperId}
-          helperText={helperText}
-          helperProps={{
-            ...helperProps,
-            className: `${classes["radio-wrapper-helper"]} ${
-              error ? classes["radio-wrapper-error"] : ""
-            } ${helperProps?.className ?? ""}`
-          }}
-          error={error}
-          errorId={errorId}
-          errorMessageIcon={Icons.Error}
-          floatingLabel={false}
-        >
-          {renderChildren()}
-        </Wrapper>
-      </Fieldset>
+  const renderChildren = () =>
+    React.Children.map(children, child =>
+      React.cloneElement(child, {
+        parentErrorId: errorId,
+        error: error,
+        checked: child.props.value === value,
+        name: name,
+        parentHelperId: helperText ? helperId : false,
+        onChange: onChange,
+        disabled: child.props.disabled !== undefined ? child.props.disabled : disabled
+      })
     );
-  }
-);
+
+  return (
+    <Fieldset {...fieldsetProps} error={error} disabled={disabled}>
+      <Wrapper
+        {...rest}
+        ref={ref}
+        disabled={disabled}
+        name={name}
+        helperId={helperId}
+        helperText={helperText}
+        helperProps={{
+          ...helperProps,
+          className: `${classes["radio-wrapper-helper"]} ${
+            error ? classes["radio-wrapper-error"] : ""
+          } ${helperProps?.className ?? ""}`
+        }}
+        error={error}
+        errorId={errorId}
+        errorMessageIcon={Icons.Error}
+        floatingLabel={false}
+      >
+        {renderChildren()}
+      </Wrapper>
+    </Fieldset>
+  );
+};
+
+export const RadioWrapper = React.forwardRef(RadioWrapperComponent);

package/src/Form/Wrapper/SelectWrapper/SelectWrapper.tsx

@@ -14,7 +14,12 @@
  *    limitations under the License.
  */
 
-import React, { ComponentPropsWithRef, ReactChild, ReactElement } from "react";
+import React, {
+  ForwardRefRenderFunction,
+  ComponentPropsWithRef,
+  ReactChild,
+  ReactElement
+} from "react";
 import classes from "./SelectWrapper.module.scss";
 import { Wrapper, WrapperProps } from "../Wrapper/Wrapper";
 import { Select, Props as SelectProps } from "../../Select/Select";
@@ -33,42 +38,42 @@ export interface Props
   onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void;
 }
 
-export const SelectWrapper = React.forwardRef<HTMLDivElement, Props>(
-  (
-    { children, error, value, placeholder, selectProps, helperProps, onChange, ...rest }: Props,
-    ref
-  ) => {
-    const { errorId, floatingLabelActive, helperId, labelId } = useWrapper(value, placeholder);
+const SelectWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  { children, error, value, placeholder, selectProps, helperProps, onChange, ...rest }: Props,
+  ref
+) => {
+  const { errorId, floatingLabelActive, helperId, labelId } = useWrapper(value, placeholder);
 
-    return (
-      <Wrapper
-        {...rest}
-        ref={ref}
-        floatingLabelActive={floatingLabelActive}
-        errorId={errorId}
-        helperId={helperId}
-        labelProps={{ id: labelId, className: classes["select-label"] }}
-        helperProps={{
-          ...helperProps,
-          className: `${classes["select-helper-text"]} ${helperProps?.className ?? ""}`
-        }}
+  return (
+    <Wrapper
+      {...rest}
+      ref={ref}
+      floatingLabelActive={floatingLabelActive}
+      errorId={errorId}
+      helperId={helperId}
+      labelProps={{ id: labelId, className: classes["select-label"] }}
+      helperProps={{
+        ...helperProps,
+        className: `${classes["select-helper-text"]} ${helperProps?.className ?? ""}`
+      }}
+      error={error}
+    >
+      <Select
+        {...selectProps}
+        value={value}
+        labeledBy={labelId}
         error={error}
+        describedBy={error ? errorId : helperId}
+        onChange={onChange}
+        placeholder={placeholder}
+        className={`${floatingLabelActive ? classes["floating-label-active"] : ""} ${
+          selectProps?.className ?? ""
+        }`}
       >
-        <Select
-          {...selectProps}
-          value={value}
-          labeledBy={labelId}
-          error={error}
-          describedBy={error ? errorId : helperId}
-          onChange={onChange}
-          placeholder={placeholder}
-          className={`${floatingLabelActive ? classes["floating-label-active"] : ""} ${
-            selectProps?.className ?? ""
-          }`}
-        >
-          {children as ReactElement[]}
-        </Select>
-      </Wrapper>
-    );
-  }
-);
+        {children as ReactElement[]}
+      </Select>
+    </Wrapper>
+  );
+};
+
+export const SelectWrapper = React.forwardRef(SelectWrapperComponent);