@onewelcome/react-lib-components 1.2.0 → 1.4.0

package/src/Form/Input/Input.tsx

@@ -14,7 +14,14 @@
  *    limitations under the License.
  */
 
-import React, { ComponentPropsWithRef, Ref, useEffect, useRef, useState } from "react";
+import React, {
+  ForwardRefRenderFunction,
+  ComponentPropsWithRef,
+  Ref,
+  useEffect,
+  useRef,
+  useState
+} from "react";
 import classes from "./Input.module.scss";
 import readyclasses from "../../readyclasses.module.scss";
 import { Icon, Icons } from "../../Icon/Icon";
@@ -42,95 +49,91 @@ export interface Props extends ComponentPropsWithRef<"input">, FormElement {
   prefix?: string;
 }
 
-export const Input = React.forwardRef(
-  (
-    {
-      error = false,
-      className,
-      name,
-      style,
-      wrapperProps,
-      type,
-      labeledBy,
-      prefix,
-      suffix,
-      disabled,
-      onFocus,
-      onBlur,
-      ...rest
-    }: Props,
-    ref: Ref<HTMLInputElement>
-  ) => {
-    const [focus, setFocus] = useState(false);
-    const inputWrapperRef = useRef<HTMLDivElement>(null);
-    const errorIconRef = useRef<HTMLDivElement>(null);
-    const suffixRef = useRef<HTMLDivElement>(null);
+const InputComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
+  {
+    error = false,
+    className,
+    name,
+    style,
+    wrapperProps,
+    type,
+    labeledBy,
+    prefix,
+    suffix,
+    disabled,
+    onFocus,
+    onBlur,
+    ...rest
+  }: Props,
+  ref: Ref<HTMLInputElement>
+) => {
+  const [focus, setFocus] = useState(false);
+  const inputWrapperRef = useRef<HTMLDivElement>(null);
+  const errorIconRef = useRef<HTMLDivElement>(null);
+  const suffixRef = useRef<HTMLDivElement>(null);
 
-    useEffect(() => {
-      if (name === undefined) {
-        throw new Error("Please give your <Input /> component a 'name' attribute");
-      }
-    }, []);
+  useEffect(() => {
+    if (name === undefined) {
+      throw new Error("Please give your <Input /> component a 'name' attribute");
+    }
+  }, []);
 
-    const inputClassNames = [classes["input"]];
+  const inputClassNames = [classes["input"]];
 
-    (dateTypes as ReadonlyArray<string>).includes(type) &&
-      inputClassNames.push(classes["shrink-width-for-date-icon"]);
-    className && inputClassNames.push(className);
+  (dateTypes as ReadonlyArray<string>).includes(type) &&
+    inputClassNames.push(classes["shrink-width-for-date-icon"]);
+  className && inputClassNames.push(className);
 
-    const iconClassNames = [classes["warning"]];
-    const wrapperClasses = [classes["input-wrapper"]];
-    const outlineClasses = [classes["outline"]];
+  const iconClassNames = [classes["warning"]];
+  const wrapperClasses = [classes["input-wrapper"]];
+  const outlineClasses = [classes["outline"]];
 
-    wrapperProps?.className && wrapperClasses.push(wrapperProps.className);
-    type === "hidden" && wrapperClasses.push(readyclasses["hidden"]);
-    prefix && wrapperClasses.push(classes["prefix"]);
-    suffix && wrapperClasses.push(classes["suffix"]);
-    disabled &&
-      wrapperClasses.push(classes["disabled"]) &&
-      outlineClasses.push(classes["disabled"]);
-    error && wrapperClasses.push(classes["error"]) && outlineClasses.push(classes["error"]);
-    focus && wrapperClasses.push(classes["focus"]) && outlineClasses.push(classes["focus"]);
+  wrapperProps?.className && wrapperClasses.push(wrapperProps.className);
+  type === "hidden" && wrapperClasses.push(readyclasses["hidden"]);
+  prefix && wrapperClasses.push(classes["prefix"]);
+  suffix && wrapperClasses.push(classes["suffix"]);
+  disabled && wrapperClasses.push(classes["disabled"]) && outlineClasses.push(classes["disabled"]);
+  error && wrapperClasses.push(classes["error"]) && outlineClasses.push(classes["error"]);
+  focus && wrapperClasses.push(classes["focus"]) && outlineClasses.push(classes["focus"]);
 
-    return (
-      <div
-        ref={inputWrapperRef}
-        {...wrapperProps}
-        style={{ ...style }}
-        className={`${classes["input-wrapper"]} ${wrapperClasses.join(" ")}`}
-      >
-        {prefix && (
-          <div data-prefix className={classes["prefix"]}>
-            <span>{prefix}</span>
-          </div>
-        )}
-        <input
-          {...rest}
-          ref={ref}
-          onFocus={event => {
-            setFocus(true);
-            onFocus && onFocus(event);
-          }}
-          onBlur={event => {
-            setFocus(false);
-            onBlur && onBlur(event);
-          }}
-          aria-labelledby={labeledBy}
-          type={type}
-          name={name}
-          disabled={disabled}
-          className={inputClassNames.join(" ")}
-        />
-        {suffix && (
-          <div ref={suffixRef} data-suffix className={classes["suffix"]}>
-            <span>{suffix}</span>
-          </div>
-        )}
-        {error && (
-          <Icon ref={errorIconRef} className={iconClassNames.join(" ")} icon={Icons.Error} />
-        )}
-        <span className={outlineClasses.join(" ")}></span>
-      </div>
-    );
-  }
-);
+  return (
+    <div
+      ref={inputWrapperRef}
+      {...wrapperProps}
+      style={{ ...style }}
+      className={`${classes["input-wrapper"]} ${wrapperClasses.join(" ")}`}
+    >
+      {prefix && (
+        <div data-prefix className={classes["prefix"]}>
+          <span>{prefix}</span>
+        </div>
+      )}
+      <input
+        {...rest}
+        ref={ref}
+        onFocus={event => {
+          setFocus(true);
+          onFocus && onFocus(event);
+        }}
+        onBlur={event => {
+          setFocus(false);
+          onBlur && onBlur(event);
+        }}
+        aria-labelledby={labeledBy}
+        type={type}
+        name={name}
+        disabled={disabled}
+        className={inputClassNames.join(" ")}
+      />
+      {suffix && (
+        <div ref={suffixRef} data-suffix className={classes["suffix"]}>
+          <span>{suffix}</span>
+        </div>
+      )}
+      {error && <Icon ref={errorIconRef} className={iconClassNames.join(" ")} icon={Icons.Error} />}
+      <span className={outlineClasses.join(" ")}></span>
+    </div>
+  );
+};
+
+export const Input = React.forwardRef(InputComponent);

package/src/Form/Label/Label.tsx

@@ -14,7 +14,7 @@
  *    limitations under the License.
  */
 
-import React, { ComponentPropsWithRef, ReactNode } from "react";
+import React, { ForwardRefRenderFunction, ComponentPropsWithRef, ReactNode } from "react";
 import classes from "./Label.module.scss";
 import readyclasses from "../../readyclasses.module.scss";
 
@@ -22,18 +22,19 @@ export interface Props extends ComponentPropsWithRef<"label"> {
   children?: ReactNode;
 }
 
-export const Label = React.forwardRef<HTMLLabelElement, Props>(
-  ({ children, className, hidden = false, ...rest }: Props, ref) => {
-    return (
-      <label
-        {...rest}
-        ref={ref}
-        className={`${hidden ? readyclasses["sr-only"] : ""} ${classes["label"]} ${
-          className ?? ""
-        }`}
-      >
-        {children}
-      </label>
-    );
-  }
-);
+const LabelComponent: ForwardRefRenderFunction<HTMLLabelElement, Props> = (
+  { children, className, hidden = false, ...rest }: Props,
+  ref
+) => {
+  return (
+    <label
+      {...rest}
+      ref={ref}
+      className={`${hidden ? readyclasses["sr-only"] : ""} ${classes["label"]} ${className ?? ""}`}
+    >
+      {children}
+    </label>
+  );
+};
+
+export const Label = React.forwardRef(LabelComponent);

package/src/Form/Radio/Radio.tsx

@@ -14,7 +14,7 @@
  *    limitations under the License.
  */
 
-import React, { ComponentPropsWithRef } from "react";
+import React, { ForwardRefRenderFunction, ComponentPropsWithRef } from "react";
 import { Icon, Icons } from "../../Icon/Icon";
 import { Props as HelperProps } from "../FormHelperText/FormHelperText";
 import classes from "./Radio.module.scss";
@@ -32,101 +32,101 @@ export interface Props extends ComponentPropsWithRef<"input">, FormSelector {
   helperProps?: HelperProps;
 }
 
-export const Radio = React.forwardRef<HTMLInputElement, Props>(
-  (
-    {
-      children,
-      disabled,
-      className,
-      value,
-      name,
-      helperText,
-      parentErrorId,
-      parentHelperId,
-      error,
-      errorMessage,
-      checked = false,
-      formSelectorWrapperProps,
-      helperProps,
-      onChange,
-      ...rest
-    }: Props,
-    ref
-  ) => {
-    const { errorId, identifier, describedBy } = useFormSelector({
-      name,
-      helperText,
-      parentErrorId,
-      errorMessage,
-      error,
-      parentHelperId
-    });
+const RadioComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
+  {
+    children,
+    disabled,
+    className,
+    value,
+    name,
+    helperText,
+    parentErrorId,
+    parentHelperId,
+    error,
+    errorMessage,
+    checked = false,
+    formSelectorWrapperProps,
+    helperProps,
+    onChange,
+    ...rest
+  }: Props,
+  ref
+) => {
+  const { errorId, identifier, describedBy } = useFormSelector({
+    name,
+    helperText,
+    parentErrorId,
+    errorMessage,
+    error,
+    parentHelperId
+  });
 
-    const onChangeHandler = (event: React.ChangeEvent<HTMLInputElement> | React.MouseEvent) => {
-      if (disabled) {
-        return;
-      }
-      /** We have to clone the native event we got here and change the "target" property to the value. Otherwise, this regular event has "on" as it's event.target.value, which is useless. */
-      const nativeEvent: any = event.nativeEvent || event;
-      const clonedEvent = new nativeEvent.constructor(nativeEvent.type, nativeEvent);
+  const onChangeHandler = (event: React.ChangeEvent<HTMLInputElement> | React.MouseEvent) => {
+    if (disabled) {
+      return;
+    }
+    /** We have to clone the native event we got here and change the "target" property to the value. Otherwise, this regular event has "on" as it's event.target.value, which is useless. */
+    const nativeEvent: any = event.nativeEvent || event;
+    const clonedEvent = new nativeEvent.constructor(nativeEvent.type, nativeEvent);
 
-      Object.defineProperty(clonedEvent, "target", {
-        writable: true,
-        value: { value: value }
-      });
+    Object.defineProperty(clonedEvent, "target", {
+      writable: true,
+      value: { value: value }
+    });
 
-      onChange && onChange(clonedEvent);
-    };
+    onChange && onChange(clonedEvent);
+  };
 
-    /** Default return value is the default radio */
-    return (
-      <FormSelectorWrapper
-        {...formSelectorWrapperProps}
-        className={`${classes["radio-wrapper"]} ${className ?? ""}`}
-        containerProps={{ className: classes["radio-container"] }}
-        helperText={helperText}
-        helperProps={helperProps}
-        parentErrorId={parentErrorId}
-        errorId={errorId}
-        errorMessage={errorMessage}
-        error={error}
+  /** Default return value is the default radio */
+  return (
+    <FormSelectorWrapper
+      {...formSelectorWrapperProps}
+      className={`${classes["radio-wrapper"]} ${className ?? ""}`}
+      containerProps={{ className: classes["radio-container"] }}
+      helperText={helperText}
+      helperProps={helperProps}
+      parentErrorId={parentErrorId}
+      errorId={errorId}
+      errorMessage={errorMessage}
+      error={error}
+      disabled={disabled}
+      identifier={identifier}
+    >
+      <input
+        {...rest}
+        ref={ref}
         disabled={disabled}
-        identifier={identifier}
-      >
-        <input
-          {...rest}
-          ref={ref}
-          disabled={disabled}
-          tabIndex={0}
-          className={`${classes["native-input"]} ${error ? classes["error"] : ""}`}
-          onChange={onChangeHandler}
-          checked={checked}
-          aria-invalid={error ? true : false}
-          aria-checked={checked}
-          aria-describedby={describedBy}
-          name={name}
-          value={value}
-          id={`${identifier}-radio`}
-          type="radio"
+        tabIndex={0}
+        className={`${classes["native-input"]} ${error ? classes["error"] : ""}`}
+        onChange={onChangeHandler}
+        checked={checked}
+        aria-invalid={error ? true : false}
+        aria-checked={checked}
+        aria-describedby={describedBy}
+        name={name}
+        value={value}
+        id={`${identifier}-radio`}
+        type="radio"
+      />
+
+      {checked && (
+        <Icon
+          className={`${classes["input"]} ${disabled ? classes["disabled"] : ""}`}
+          icon={Icons.Radio}
+        />
+      )}
+      {!checked && (
+        <Icon
+          className={`${classes["input"]} ${disabled ? classes["disabled"] : ""}`}
+          icon={Icons.Circle}
         />
+      )}
 
-        {checked && (
-          <Icon
-            className={`${classes["input"]} ${disabled ? classes["disabled"] : ""}`}
-            icon={Icons.Radio}
-          />
-        )}
-        {!checked && (
-          <Icon
-            className={`${classes["input"]} ${disabled ? classes["disabled"] : ""}`}
-            icon={Icons.Circle}
-          />
-        )}
+      <label onClick={onChangeHandler} htmlFor={`${identifier}-radio`}>
+        {children}
+      </label>
+    </FormSelectorWrapper>
+  );
+};
 
-        <label onClick={onChangeHandler} htmlFor={`${identifier}-radio`}>
-          {children}
-        </label>
-      </FormSelectorWrapper>
-    );
-  }
-);
+export const Radio = React.forwardRef(RadioComponent);

package/src/Form/Select/Option.tsx

@@ -14,7 +14,13 @@
  *    limitations under the License.
  */
 
-import React, { ComponentPropsWithRef, createRef, RefObject, useEffect } from "react";
+import React, {
+  ForwardRefRenderFunction,
+  ComponentPropsWithRef,
+  createRef,
+  RefObject,
+  useEffect
+} from "react";
 import classes from "./Select.module.scss";
 
 export interface Props extends ComponentPropsWithRef<"li"> {
@@ -32,67 +38,67 @@ export interface Props extends ComponentPropsWithRef<"li"> {
   onFocusChange?: (childIndex: number) => void;
 }
 
-export const Option = React.forwardRef<HTMLLIElement, Props>(
-  (
-    {
-      children,
-      className,
-      isSelected = false,
-      shouldClick,
-      hasFocus,
-      selectOpened,
-      isSearching,
-      childIndex,
-      onOptionSelect,
-      onFocusChange,
-      disabled,
-      value,
-      ...rest
-    }: Props,
-    ref
-  ) => {
-    let innerOptionRef = (ref as RefObject<HTMLLIElement>) || createRef<HTMLLIElement>();
+const OptionComponent: ForwardRefRenderFunction<HTMLLIElement, Props> = (
+  {
+    children,
+    className,
+    isSelected = false,
+    shouldClick,
+    hasFocus,
+    selectOpened,
+    isSearching,
+    childIndex,
+    onOptionSelect,
+    onFocusChange,
+    disabled,
+    value,
+    ...rest
+  }: Props,
+  ref
+) => {
+  let innerOptionRef = (ref as RefObject<HTMLLIElement>) || createRef<HTMLLIElement>();
 
-    useEffect(() => {
-      if (isSelected && innerOptionRef.current && shouldClick) {
-        innerOptionRef.current.click();
-      }
-    }, [isSelected, shouldClick]);
+  useEffect(() => {
+    if (isSelected && innerOptionRef.current && shouldClick) {
+      innerOptionRef.current.click();
+    }
+  }, [isSelected, shouldClick]);
 
-    useEffect(() => {
-      if (innerOptionRef.current && hasFocus && selectOpened && !isSearching) {
-        onFocusChange && childIndex && onFocusChange(childIndex);
-        innerOptionRef.current.focus();
-      }
-    }, [hasFocus, innerOptionRef, selectOpened, isSearching]);
+  useEffect(() => {
+    if (innerOptionRef.current && hasFocus && selectOpened && !isSearching) {
+      onFocusChange && childIndex && onFocusChange(childIndex);
+      innerOptionRef.current.focus();
+    }
+  }, [hasFocus, innerOptionRef, selectOpened, isSearching]);
 
-    const onSelectHandler = () => {
-      if (onOptionSelect) onOptionSelect(innerOptionRef);
-    };
+  const onSelectHandler = () => {
+    if (onOptionSelect) onOptionSelect(innerOptionRef);
+  };
 
-    return (
-      <li
-        {...rest}
-        ref={innerOptionRef}
-        data-value={value}
-        className={`${isSelected ? classes["selected-option"] : ""} ${
-          disabled ? classes.disabled : ""
-        } ${className ?? ""}`}
-        onClick={onSelectHandler}
-        onKeyDownCapture={event => {
-          if (event.code === "Enter") {
-            event.stopPropagation();
-            event.preventDefault();
+  return (
+    <li
+      {...rest}
+      ref={innerOptionRef}
+      data-value={value}
+      className={`${isSelected ? classes["selected-option"] : ""} ${
+        disabled ? classes.disabled : ""
+      } ${className ?? ""}`}
+      onClick={onSelectHandler}
+      onKeyDownCapture={event => {
+        if (event.code === "Enter") {
+          event.stopPropagation();
+          event.preventDefault();
 
-            onSelectHandler();
-          }
-        }}
-        aria-selected={isSelected}
-        role="option"
-        tabIndex={disabled ? -1 : 0}
-      >
-        {children}
-      </li>
-    );
-  }
-);
+          onSelectHandler();
+        }
+      }}
+      aria-selected={isSelected}
+      role="option"
+      tabIndex={disabled ? -1 : 0}
+    >
+      {children}
+    </li>
+  );
+};
+
+export const Option = React.forwardRef(OptionComponent);