@onewelcome/react-lib-components 1.2.0 → 1.4.0

package/src/DataGrid/DataGridHeader/DataGridHeader.tsx

@@ -14,7 +14,7 @@
  *    limitations under the License.
  */
 
-import React, { ComponentPropsWithRef, useEffect, useState } from "react";
+import React, { ForwardRefRenderFunction, ComponentPropsWithRef, useEffect, useState } from "react";
 import { ColumnName, Direction, HeaderCell, OnSortFunction, Sort } from "../datagrid.interfaces";
 import { DataGridHeaderCell } from "./DataGridHeaderCell";
 import classes from "./DataGridHeader.module.scss";
@@ -30,90 +30,90 @@ export interface Props extends ComponentPropsWithRef<"thead"> {
 
 const sortingStates = [undefined, "ASC", "DESC"] as (Direction | undefined)[];
 
-export const DataGridHeader = React.forwardRef<HTMLTableSectionElement, Props>(
-  (
-    {
-      initialSort,
-      onSort,
-      headers,
-      disableContextMenuColumn,
-      enableMultiSorting,
-      spacing,
-      ...rest
-    }: Props,
-    ref
-  ) => {
-    const [sortList, setSortList] = useState(initialSort || []);
+const DataGridHeaderComponent: ForwardRefRenderFunction<HTMLTableSectionElement, Props> = (
+  {
+    initialSort,
+    onSort,
+    headers,
+    disableContextMenuColumn,
+    enableMultiSorting,
+    spacing,
+    ...rest
+  }: Props,
+  ref
+) => {
+  const [sortList, setSortList] = useState(initialSort || []);
 
-    useEffect(() => {
-      setSortList(initialSort || []);
-    }, [initialSort]);
+  useEffect(() => {
+    setSortList(initialSort || []);
+  }, [initialSort]);
 
-    const calculateNextSortState = (direction?: Direction) => {
-      const currentDirectionIdx = sortingStates.findIndex(item => item === direction);
-      return sortingStates[currentDirectionIdx + (1 % sortingStates.length)];
-    };
+  const calculateNextSortState = (direction?: Direction) => {
+    const currentDirectionIdx = sortingStates.findIndex(item => item === direction);
+    return sortingStates[currentDirectionIdx + (1 % sortingStates.length)];
+  };
 
-    /**
-     * The sortList contains sorting columns objects. The order of those objects determinates priorities of sorting.
-     * Last modified sorting column has the highest priority.
-     */
-    const updateSortList = (name: ColumnName): Sort => {
-      const current = sortList.find(item => item.name === name);
-      const restSortList = enableMultiSorting ? sortList.filter(item => item.name !== name) : [];
-      const newSortDirection = calculateNextSortState(current?.direction);
-      return newSortDirection
-        ? [{ name, direction: newSortDirection }, ...restSortList]
-        : restSortList;
-    };
+  /**
+   * The sortList contains sorting columns objects. The order of those objects determinates priorities of sorting.
+   * Last modified sorting column has the highest priority.
+   */
+  const updateSortList = (name: ColumnName): Sort => {
+    const current = sortList.find(item => item.name === name);
+    const restSortList = enableMultiSorting ? sortList.filter(item => item.name !== name) : [];
+    const newSortDirection = calculateNextSortState(current?.direction);
+    return newSortDirection
+      ? [{ name, direction: newSortDirection }, ...restSortList]
+      : restSortList;
+  };
 
-    const wrapOnSort = (name: ColumnName) => {
-      const newSort = updateSortList(name);
-      onSort && onSort(newSort);
-      setSortList(newSort);
-    };
+  const wrapOnSort = (name: ColumnName) => {
+    const newSort = updateSortList(name);
+    onSort && onSort(newSort);
+    setSortList(newSort);
+  };
 
-    const headerCells = headers.map((header, index) => {
-      if (header.hidden) {
-        return null;
-      }
+  const headerCells = headers.map((header, index) => {
+    if (header.hidden) {
+      return null;
+    }
 
-      let headerStyle: React.CSSProperties = {};
+    let headerStyle: React.CSSProperties = {};
 
-      if (index === 0) {
-        headerStyle.paddingLeft = spacing?.paddingLeft;
-      }
-      if (index === headers.length - 1 && disableContextMenuColumn) {
-        headerStyle.paddingRight = spacing?.paddingRight;
-      }
-
-      const sort = sortList.find(item => item.name === header.name);
-      return (
-        <DataGridHeaderCell
-          key={header.name}
-          name={header.name}
-          headline={header.headline}
-          disableSorting={header.disableSorting || !onSort}
-          onSort={wrapOnSort}
-          activeSortDirection={sort?.direction}
-          style={headerStyle}
-        />
-      );
-    });
+    if (index === 0) {
+      headerStyle.paddingLeft = spacing?.paddingLeft;
+    }
+    if (index === headers.length - 1 && disableContextMenuColumn) {
+      headerStyle.paddingRight = spacing?.paddingRight;
+    }
 
+    const sort = sortList.find(item => item.name === header.name);
     return (
-      <thead {...rest} ref={ref} className={classes["thead"]}>
-        <tr className={classes["row"]}>
-          {headerCells}
-          {!disableContextMenuColumn && (
-            <td
-              style={{ paddingRight: spacing?.paddingRight }}
-              aria-label="context menu"
-              className={classes["context-menu"]}
-            ></td>
-          )}
-        </tr>
-      </thead>
+      <DataGridHeaderCell
+        key={header.name}
+        name={header.name}
+        headline={header.headline}
+        disableSorting={header.disableSorting || !onSort}
+        onSort={wrapOnSort}
+        activeSortDirection={sort?.direction}
+        style={headerStyle}
+      />
     );
-  }
-);
+  });
+
+  return (
+    <thead {...rest} ref={ref} className={classes["thead"]}>
+      <tr className={classes["row"]}>
+        {headerCells}
+        {!disableContextMenuColumn && (
+          <td
+            style={{ paddingRight: spacing?.paddingRight }}
+            aria-label="context menu"
+            className={classes["context-menu"]}
+          ></td>
+        )}
+      </tr>
+    </thead>
+  );
+};
+
+export const DataGridHeader = React.forwardRef(DataGridHeaderComponent);

package/src/DataGrid/DataGridHeader/DataGridHeaderCell.tsx

@@ -14,7 +14,7 @@
  *    limitations under the License.
  */
 
-import React, { ComponentPropsWithRef, Fragment } from "react";
+import React, { ForwardRefRenderFunction, ComponentPropsWithRef, Fragment } from "react";
 import { Icon, Icons } from "../../Icon/Icon";
 import { ColumnName, Direction } from "../datagrid.interfaces";
 import classes from "./DataGridHeaderCell.module.scss";
@@ -32,57 +32,57 @@ const ariaSortMapping = {
   DESC: "descending"
 } as const;
 
-export const DataGridHeaderCell = React.forwardRef<HTMLTableCellElement, Props>(
-  ({ headline, name, disableSorting, activeSortDirection, onSort, ...rest }: Props, ref) => {
-    const onCellClick = () => {
-      onSort && onSort(name);
-    };
-
-    const sortingIndicator = () => {
-      const getSortingIndicatorClasses = (direction: Direction) => {
-        const sortingIndicatorClasses = [classes["indicator"]];
-        activeSortDirection &&
-          sortingIndicatorClasses.push(
-            activeSortDirection === direction ? classes["active"] : classes["hidden"]
-          );
-        return sortingIndicatorClasses;
-      };
+const DataGridHeaderCellComponent: ForwardRefRenderFunction<HTMLTableCellElement, Props> = (
+  { headline, name, disableSorting, activeSortDirection, onSort, ...rest }: Props,
+  ref
+) => {
+  const onCellClick = () => {
+    onSort && onSort(name);
+  };
 
-      return (
-        <Fragment>
-          <Icon className={getSortingIndicatorClasses("ASC").join(" ")} icon={Icons.TriangleUp} />
-          <Icon
-            className={getSortingIndicatorClasses("DESC").join(" ")}
-            icon={Icons.TriangleDown}
-          />
-        </Fragment>
-      );
+  const sortingIndicator = () => {
+    const getSortingIndicatorClasses = (direction: Direction) => {
+      const sortingIndicatorClasses = [classes["indicator"]];
+      activeSortDirection &&
+        sortingIndicatorClasses.push(
+          activeSortDirection === direction ? classes["active"] : classes["hidden"]
+        );
+      return sortingIndicatorClasses;
     };
 
-    const innerContent = (
+    return (
       <Fragment>
-        <span className={classes["headline"]}>{headline}</span>
-        {!disableSorting && (
-          <div className={classes["sorting-indicator-container"]}>{sortingIndicator()}</div>
-        )}
+        <Icon className={getSortingIndicatorClasses("ASC").join(" ")} icon={Icons.TriangleUp} />
+        <Icon className={getSortingIndicatorClasses("DESC").join(" ")} icon={Icons.TriangleDown} />
       </Fragment>
     );
+  };
 
-    return (
-      <th
-        {...rest}
-        ref={ref}
-        className={classes["header-cell"]}
-        aria-sort={activeSortDirection && ariaSortMapping[activeSortDirection]}
-      >
-        {disableSorting ? (
-          <div key={name}>{innerContent}</div>
-        ) : (
-          <button key={name} onClick={onCellClick}>
-            {innerContent}
-          </button>
-        )}
-      </th>
-    );
-  }
-);
+  const innerContent = (
+    <Fragment>
+      <span className={classes["headline"]}>{headline}</span>
+      {!disableSorting && (
+        <div className={classes["sorting-indicator-container"]}>{sortingIndicator()}</div>
+      )}
+    </Fragment>
+  );
+
+  return (
+    <th
+      {...rest}
+      ref={ref}
+      className={classes["header-cell"]}
+      aria-sort={activeSortDirection && ariaSortMapping[activeSortDirection]}
+    >
+      {disableSorting ? (
+        <div key={name}>{innerContent}</div>
+      ) : (
+        <button key={name} onClick={onCellClick}>
+          {innerContent}
+        </button>
+      )}
+    </th>
+  );
+};
+
+export const DataGridHeaderCell = React.forwardRef(DataGridHeaderCellComponent);

package/src/Form/Checkbox/Checkbox.tsx

@@ -14,7 +14,13 @@
  *    limitations under the License.
  */
 
-import React, { ComponentPropsWithRef, ReactElement, ReactNode, useEffect } from "react";
+import React, {
+  ForwardRefRenderFunction,
+  ComponentPropsWithRef,
+  ReactElement,
+  ReactNode,
+  useEffect
+} from "react";
 import { Icon, Icons } from "../../Icon/Icon";
 import { Props as FormHelperTextProps } from "../FormHelperText/FormHelperText";
 import classes from "./Checkbox.module.scss";
@@ -36,141 +42,139 @@ export interface Props extends ComponentPropsWithRef<"input">, FormSelector {
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
-export const Checkbox = React.forwardRef<HTMLInputElement, Props>(
-  (
-    {
-      children,
-      name,
-      helperText,
-      helperProps,
-      indeterminate,
-      parentErrorId,
-      errorMessage,
-      disabled,
-      label,
-      parentHelperId,
-      className,
-      error,
-      checked = false,
-      formSelectorWrapperProps,
-      onChange,
-      ...rest
-    }: Props,
-    ref
-  ) => {
-    const { errorId, identifier, describedBy } = useFormSelector({
-      name,
-      helperText,
-      parentErrorId,
-      errorMessage,
-      error,
-      parentHelperId
-    });
-
-    useEffect(() => {
-      if (!name) {
-        throw new Error("Please pass a 'name' prop to your <Checkbox> component.");
-      }
+const CheckboxComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
+  {
+    children,
+    name,
+    helperText,
+    helperProps,
+    indeterminate,
+    parentErrorId,
+    errorMessage,
+    disabled,
+    label,
+    parentHelperId,
+    className,
+    error,
+    checked = false,
+    formSelectorWrapperProps,
+    onChange,
+    ...rest
+  }: Props,
+  ref
+) => {
+  const { errorId, identifier, describedBy } = useFormSelector({
+    name,
+    helperText,
+    parentErrorId,
+    errorMessage,
+    error,
+    parentHelperId
+  });
 
-      if (typeof children === "object" && !isToggle(children) && indeterminate === undefined) {
-        throw new Error(
-          "If you have nested checkboxes you have to manage the indeterminate state by passing a boolean to the `indeterminate` prop."
-        );
-      }
-    }, []);
-
-    const determineLabel = () => {
-      if (label) {
-        return label;
-      } else if (children === undefined) {
-        throw new Error(
-          "Please make sure to pass either a string or more Checkbox components as a child of your Checkbox component."
-        );
-      }
+  useEffect(() => {
+    if (!name) {
+      throw new Error("Please pass a 'name' prop to your <Checkbox> component.");
+    }
 
-      if (typeof children === "string") {
-        return children;
-      }
+    if (typeof children === "object" && !isToggle(children) && indeterminate === undefined) {
+      throw new Error(
+        "If you have nested checkboxes you have to manage the indeterminate state by passing a boolean to the `indeterminate` prop."
+      );
+    }
+  }, []);
 
+  const determineLabel = () => {
+    if (label) {
+      return label;
+    } else if (children === undefined) {
       throw new Error(
-        "If you pass Checkboxes as a child component (to create nested checkbox tree) you need to pass a label to the parent checkbox."
+        "Please make sure to pass either a string or more Checkbox components as a child of your Checkbox component."
       );
-    };
-
-    const renderNestedCheckboxes = () => (
-      <ul className={classes["checkbox-list"]}>
-        {React.Children.map(children as ReactElement[], child => {
-          return (
-            <li>
-              <Checkbox
-                {...child.props}
-                parentHelperId={parentHelperId}
-                parentErrorId={parentErrorId}
-                error={error}
-                disabled={child.props.disabled ? child.props.disabled : disabled}
-              >
-                {child.props.children}
-              </Checkbox>
-            </li>
-          );
-        })}
-      </ul>
+    }
+
+    if (typeof children === "string") {
+      return children;
+    }
+
+    throw new Error(
+      "If you pass Checkboxes as a child component (to create nested checkbox tree) you need to pass a label to the parent checkbox."
     );
+  };
+
+  const renderNestedCheckboxes = () => (
+    <ul className={classes["checkbox-list"]}>
+      {React.Children.map(children as ReactElement[], child => {
+        return (
+          <li>
+            <Checkbox
+              {...child.props}
+              parentHelperId={parentHelperId}
+              parentErrorId={parentErrorId}
+              error={error}
+              disabled={child.props.disabled ? child.props.disabled : disabled}
+            >
+              {child.props.children}
+            </Checkbox>
+          </li>
+        );
+      })}
+    </ul>
+  );
+
+  const onChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (disabled) {
+      return;
+    }
+    onChange && onChange(event);
+  };
+
+  const renderToggle = () => React.Children.toArray(children).filter(isToggle);
 
-    const onChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
-      if (disabled) {
-        return;
+  const iconClasses = [classes["input"], disabled ? classes["disabled"] : ""];
+
+  /** Default return value is the default checkbox */
+  return (
+    <FormSelectorWrapper
+      {...formSelectorWrapperProps}
+      className={`${classes["checkbox-wrapper"]} ${className ? className : ""}`}
+      containerProps={{ className: classes["checkbox-container"] }}
+      helperText={helperText}
+      helperProps={helperProps}
+      parentErrorId={parentErrorId}
+      errorId={errorId}
+      errorMessage={errorMessage}
+      error={error}
+      disabled={disabled}
+      identifier={identifier}
+      nestedChildren={
+        typeof children === "object" && !isToggle(children) && renderNestedCheckboxes()
       }
-      onChange && onChange(event);
-    };
-
-    const renderToggle = () => React.Children.toArray(children).filter(isToggle);
-
-    const iconClasses = [classes["input"], disabled ? classes["disabled"] : ""];
-
-    /** Default return value is the default checkbox */
-    return (
-      <FormSelectorWrapper
-        {...formSelectorWrapperProps}
-        className={`${classes["checkbox-wrapper"]} ${className ? className : ""}`}
-        containerProps={{ className: classes["checkbox-container"] }}
-        helperText={helperText}
-        helperProps={helperProps}
-        parentErrorId={parentErrorId}
-        errorId={errorId}
-        errorMessage={errorMessage}
-        error={error}
+    >
+      <input
+        {...rest}
+        ref={ref}
         disabled={disabled}
-        identifier={identifier}
-        nestedChildren={
-          typeof children === "object" && !isToggle(children) && renderNestedCheckboxes()
-        }
-      >
-        <input
-          {...rest}
-          ref={ref}
-          disabled={disabled}
-          className={`${classes["native-input"]} ${error ? classes["error"] : ""}`}
-          checked={checked}
-          onChange={onChangeHandler}
-          aria-invalid={error as boolean}
-          aria-checked={indeterminate ? "mixed" : checked}
-          aria-describedby={describedBy}
-          id={`${identifier}-checkbox`}
-          name={name}
-          type="checkbox"
-        />
-        {renderToggle()}
-
-        {indeterminate && <Icon className={iconClasses.join(" ")} icon={Icons.MinusSquare} />}
-        {checked && !indeterminate && (
-          <Icon className={iconClasses.join(" ")} icon={Icons.CheckmarkSquare} />
-        )}
-        {!checked && !indeterminate && (
-          <Icon className={iconClasses.join(" ")} icon={Icons.Square} />
-        )}
-        <label htmlFor={`${identifier}-checkbox`}>{determineLabel()}</label>
-      </FormSelectorWrapper>
-    );
-  }
-);
+        className={`${classes["native-input"]} ${error ? classes["error"] : ""}`}
+        checked={checked}
+        onChange={onChangeHandler}
+        aria-invalid={error as boolean}
+        aria-checked={indeterminate ? "mixed" : checked}
+        aria-describedby={describedBy}
+        id={`${identifier}-checkbox`}
+        name={name}
+        type="checkbox"
+      />
+      {renderToggle()}
+
+      {indeterminate && <Icon className={iconClasses.join(" ")} icon={Icons.MinusSquare} />}
+      {checked && !indeterminate && (
+        <Icon className={iconClasses.join(" ")} icon={Icons.CheckmarkSquare} />
+      )}
+      {!checked && !indeterminate && <Icon className={iconClasses.join(" ")} icon={Icons.Square} />}
+      <label htmlFor={`${identifier}-checkbox`}>{determineLabel()}</label>
+    </FormSelectorWrapper>
+  );
+};
+
+export const Checkbox = React.forwardRef(CheckboxComponent);