@onewelcome/react-lib-components 1.3.0 → 1.4.0

package/src/Notifications/BaseModal/BaseModal.tsx

@@ -14,7 +14,7 @@
  *    limitations under the License.
  */
 
-import React, { ComponentPropsWithRef, useEffect } from "react";
+import React, { ForwardRefRenderFunction, ComponentPropsWithRef, useEffect } from "react";
 import { createPortal } from "react-dom";
 import classes from "./BaseModal.module.scss";
 import { labelId, descriptionId } from "./BaseModalContext";
@@ -61,82 +61,82 @@ export const useSetBodyScroll = (open: boolean) => {
   }, [open]);
 };
 
-export const BaseModal = React.forwardRef<HTMLDivElement, Props>(
-  (
-    {
-      id,
-      children,
-      open,
-      onClose,
-      className = "",
-      containerProps,
-      backdropProps,
-      labelledby,
-      describedby,
-      disableEscapeKeyDown = false,
-      disableBackdrop = false,
-      forceContainerOpen = false,
-      zIndex,
-      domRoot = document.body,
-      ...rest
-    }: Props,
-    ref
-  ) => {
-    useSetBodyScroll(open);
+const BaseModalComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  {
+    id,
+    children,
+    open,
+    onClose,
+    className = "",
+    containerProps,
+    backdropProps,
+    labelledby,
+    describedby,
+    disableEscapeKeyDown = false,
+    disableBackdrop = false,
+    forceContainerOpen = false,
+    zIndex,
+    domRoot = document.body,
+    ...rest
+  }: Props,
+  ref
+) => {
+  useSetBodyScroll(open);
 
-    const handleEscKeyPress = (event: React.KeyboardEvent<HTMLDivElement>) => {
-      if (!disableEscapeKeyDown && event.key === "Escape") {
-        event.stopPropagation();
-        onClose && onClose();
-      }
-    };
+  const handleEscKeyPress = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (!disableEscapeKeyDown && event.key === "Escape") {
+      event.stopPropagation();
+      onClose && onClose();
+    }
+  };
 
-    const handleBackdropClick = () => !disableBackdrop && onClose && onClose();
+  const handleBackdropClick = () => !disableBackdrop && onClose && onClose();
 
-    return createPortal(
+  return createPortal(
+    <div
+      {...rest}
+      ref={ref}
+      id={id}
+      className={`${classes["modal"]} ${open ? classes["visible"] : ""} ${className}`}
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby={labelledby || labelId(id)}
+      aria-describedby={describedby || descriptionId(id)}
+      aria-hidden={!open}
+      tabIndex={-1}
+      data-hidden={!open}
+      onKeyDown={handleEscKeyPress}
+      style={{ zIndex }}
+    >
       <div
-        {...rest}
-        ref={ref}
-        id={id}
-        className={`${classes["modal"]} ${open ? classes["visible"] : ""} ${className}`}
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby={labelledby || labelId(id)}
-        aria-describedby={describedby || descriptionId(id)}
-        aria-hidden={!open}
-        tabIndex={-1}
-        data-hidden={!open}
-        onKeyDown={handleEscKeyPress}
-        style={{ zIndex }}
-      >
+        {...backdropProps}
+        className={`${classes["backdrop"]} ${backdropProps?.className ?? ""}`}
+        onClick={handleBackdropClick}
+      ></div>
+      {forceContainerOpen ? (
         <div
-          {...backdropProps}
-          className={`${classes["backdrop"]} ${backdropProps?.className ?? ""}`}
-          onClick={handleBackdropClick}
-        ></div>
-        {forceContainerOpen ? (
+          {...containerProps}
+          aria-hidden={!open}
+          hidden={!open}
+          style={{ zIndex: zIndex && zIndex + 1 }}
+          className={`${classes["container"]} ${containerProps?.className ?? ""}`}
+        >
+          {children}
+        </div>
+      ) : (
+        open && (
           <div
             {...containerProps}
-            aria-hidden={!open}
-            hidden={!open}
             style={{ zIndex: zIndex && zIndex + 1 }}
             className={`${classes["container"]} ${containerProps?.className ?? ""}`}
           >
             {children}
           </div>
-        ) : (
-          open && (
-            <div
-              {...containerProps}
-              style={{ zIndex: zIndex && zIndex + 1 }}
-              className={`${classes["container"]} ${containerProps?.className ?? ""}`}
-            >
-              {children}
-            </div>
-          )
-        )}
-      </div>,
-      domRoot
-    );
-  }
-);
+        )
+      )}
+    </div>,
+    domRoot
+  );
+};
+
+export const BaseModal = React.forwardRef(BaseModalComponent);

package/src/Notifications/BaseModal/BaseModalActions/BaseModalActions.tsx

@@ -14,19 +14,22 @@
  *    limitations under the License.
  */
 
-import React, { ComponentPropsWithRef } from "react";
+import React, { ForwardRefRenderFunction, ComponentPropsWithRef } from "react";
 import classes from "./BaseModalActions.module.scss";
 
 export interface Props extends ComponentPropsWithRef<"div"> {
   children?: React.ReactNode;
 }
 
-export const BaseModalActions = React.forwardRef<HTMLDivElement, Props>(
-  ({ children, className = "", ...rest }: Props, ref) => {
-    return (
-      <div {...rest} ref={ref} className={`${classes["actions"]} ${className}`}>
-        {children}
-      </div>
-    );
-  }
-);
+const BaseModalActionsComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  { children, className = "", ...rest }: Props,
+  ref
+) => {
+  return (
+    <div {...rest} ref={ref} className={`${classes["actions"]} ${className}`}>
+      {children}
+    </div>
+  );
+};
+
+export const BaseModalActions = React.forwardRef(BaseModalActionsComponent);

package/src/Notifications/BaseModal/BaseModalContent/BaseModalContent.tsx

@@ -14,7 +14,12 @@
  *    limitations under the License.
  */
 
-import React, { ComponentPropsWithRef, createRef, useEffect } from "react";
+import React, {
+  ForwardRefRenderFunction,
+  ComponentPropsWithRef,
+  createRef,
+  useEffect
+} from "react";
 import classes from "./BaseModalContent.module.scss";
 
 export interface Props extends ComponentPropsWithRef<"div"> {
@@ -24,29 +29,32 @@ export interface Props extends ComponentPropsWithRef<"div"> {
   disableAutoFocus?: boolean;
 }
 
-export const BaseModalContent = React.forwardRef<HTMLDivElement, Props>(
-  ({ id, children, className = "", disableAutoFocus = false, ...rest }: Props, ref) => {
-    const contentRef = createRef<HTMLDivElement>();
+const BaseModalContentComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  { id, children, className = "", disableAutoFocus = false, ...rest }: Props,
+  ref
+) => {
+  const contentRef = createRef<HTMLDivElement>();
 
-    useEffect(() => {
-      if (!disableAutoFocus && ref) {
-        (ref as React.RefObject<HTMLDivElement>).current?.focus();
-      } else if (!disableAutoFocus) {
-        contentRef.current?.focus();
-      }
-    }, []);
+  useEffect(() => {
+    if (!disableAutoFocus && ref) {
+      (ref as React.RefObject<HTMLDivElement>).current?.focus();
+    } else if (!disableAutoFocus) {
+      contentRef.current?.focus();
+    }
+  }, []);
 
-    /**tabIndex is set to be able to do focus on that element which we need for catching keyDown events */
-    return (
-      <div
-        {...rest}
-        ref={ref || contentRef}
-        id={id}
-        className={`${classes["content"]} ${className}`}
-        tabIndex={-1}
-      >
-        {children}
-      </div>
-    );
-  }
-);
+  /**tabIndex is set to be able to do focus on that element which we need for catching keyDown events */
+  return (
+    <div
+      {...rest}
+      ref={ref || contentRef}
+      id={id}
+      className={`${classes["content"]} ${className}`}
+      tabIndex={-1}
+    >
+      {children}
+    </div>
+  );
+};
+
+export const BaseModalContent = React.forwardRef(BaseModalContentComponent);

package/src/Notifications/BaseModal/BaseModalHeader/BaseModalHeader.tsx

@@ -14,7 +14,7 @@
  *    limitations under the License.
  */
 
-import React, { ComponentPropsWithRef } from "react";
+import React, { ForwardRefRenderFunction, ComponentPropsWithRef } from "react";
 import classes from "./BaseModalHeader.module.scss";
 import { IconButton } from "../../../Button/IconButton";
 import { Icon, Icons } from "../../../Icon/Icon";
@@ -27,20 +27,23 @@ export interface Props extends ComponentPropsWithRef<"div"> {
   onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
 }
 
-export const BaseModalHeader = React.forwardRef<HTMLDivElement, Props>(
-  ({ id, title, children, onClose, ...rest }: Props, ref) => {
-    return (
-      <div {...rest} ref={ref} className={classes["header"]}>
-        <div className={classes["headline"]}>
-          <Typography id={id} className={classes["title"]} tag="h1" variant="h4">
-            {title}
-          </Typography>
-          <IconButton onClick={onClose} className={classes["closeBtn"]} title="close modal">
-            <Icon icon={Icons.Times} />
-          </IconButton>
-        </div>
-        {children}
+const BaseModalHeaderComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  { id, title, children, onClose, ...rest }: Props,
+  ref
+) => {
+  return (
+    <div {...rest} ref={ref} className={classes["header"]}>
+      <div className={classes["headline"]}>
+        <Typography id={id} className={classes["title"]} tag="h1" variant="h4">
+          {title}
+        </Typography>
+        <IconButton onClick={onClose} className={classes["closeBtn"]} title="close modal">
+          <Icon icon={Icons.Times} />
+        </IconButton>
       </div>
-    );
-  }
-);
+      {children}
+    </div>
+  );
+};
+
+export const BaseModalHeader = React.forwardRef(BaseModalHeaderComponent);

package/src/Notifications/Dialog/Dialog.tsx

@@ -14,7 +14,7 @@
  *    limitations under the License.
  */
 
-import React, { ComponentPropsWithRef, useState } from "react";
+import React, { ForwardRefRenderFunction, ComponentPropsWithRef, useState } from "react";
 import { BaseModal } from "../BaseModal/BaseModal";
 import { BaseModalContent } from "../BaseModal/BaseModalContent/BaseModalContent";
 import { DialogActions } from "./DialogActions/DialogActions";
@@ -42,88 +42,88 @@ export interface Action extends Omit<ButtonProps, "variant" | "ref"> {
   onClick: (event?: React.MouseEvent<HTMLButtonElement>) => unknown;
 }
 
-export const Dialog = React.forwardRef<HTMLDivElement, Props>(
-  (
-    {
-      id,
-      open,
-      children,
-      alignActions,
-      onClose,
-      title,
-      primaryAction,
-      secondaryAction,
-      zIndex,
-      disableEscapeKeyDown = true,
-      ...rest
-    }: Props,
-    ref
-  ) => {
-    const [dialogId] = useState(id ?? generateID(20));
-    const { label: primaryLabel, ...restOfPrimaryAction } = primaryAction;
-    const PrimaryButton = (
-      <Button key="primary" {...restOfPrimaryAction}>
-        {primaryLabel}
-      </Button>
-    );
-    const TertiaryButton =
-      secondaryAction &&
-      (function () {
-        const { label: secondaryLabel, ...restOfSecondaryAction } = secondaryAction;
-        return (
-          <Button key="tertiary" variant="text" {...restOfSecondaryAction}>
-            {secondaryLabel}
-          </Button>
-        );
-      })();
+const DialogComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  {
+    id,
+    open,
+    children,
+    alignActions,
+    onClose,
+    title,
+    primaryAction,
+    secondaryAction,
+    zIndex,
+    disableEscapeKeyDown = true,
+    ...rest
+  }: Props,
+  ref
+) => {
+  const [dialogId] = useState(id ?? generateID(20));
+  const { label: primaryLabel, ...restOfPrimaryAction } = primaryAction;
+  const PrimaryButton = (
+    <Button key="primary" {...restOfPrimaryAction}>
+      {primaryLabel}
+    </Button>
+  );
+  const TertiaryButton =
+    secondaryAction &&
+    (function () {
+      const { label: secondaryLabel, ...restOfSecondaryAction } = secondaryAction;
+      return (
+        <Button key="tertiary" variant="text" {...restOfSecondaryAction}>
+          {secondaryLabel}
+        </Button>
+      );
+    })();
 
-    const onHiddenInputKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {
-      /** It has to be here because then we will need to check if user doesn't click tab to select action button and want to do another action then primary one? */
-      if (event.key === "Enter") {
-        primaryAction.onClick();
-      }
-    };
+  const onHiddenInputKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    /** It has to be here because then we will need to check if user doesn't click tab to select action button and want to do another action then primary one? */
+    if (event.key === "Enter") {
+      primaryAction.onClick();
+    }
+  };
 
-    return (
-      <BaseModal
-        {...rest}
-        ref={ref}
-        id={dialogId}
-        className={classes["dialog"]}
-        containerProps={{ className: classes["container"] }}
-        open={open}
-        disableBackdrop
-        onClose={onClose}
-        zIndex={zIndex}
-        disableEscapeKeyDown={disableEscapeKeyDown}
+  return (
+    <BaseModal
+      {...rest}
+      ref={ref}
+      id={dialogId}
+      className={classes["dialog"]}
+      containerProps={{ className: classes["container"] }}
+      open={open}
+      disableBackdrop
+      onClose={onClose}
+      zIndex={zIndex}
+      disableEscapeKeyDown={disableEscapeKeyDown}
+    >
+      <DialogTitle id={labelId(dialogId)} title={title} />
+      <BaseModalContent
+        id={descriptionId(dialogId)}
+        className={classes["content"]}
+        disableAutoFocus
       >
-        <DialogTitle id={labelId(dialogId)} title={title} />
-        <BaseModalContent
-          id={descriptionId(dialogId)}
-          className={classes["content"]}
-          disableAutoFocus
-        >
-          {children}
-        </BaseModalContent>
-        <DialogActions align={alignActions}>
-          {alignActions === "left"
-            ? [PrimaryButton, TertiaryButton]
-            : [TertiaryButton, PrimaryButton]}
-        </DialogActions>
-        <input
-          autoFocus
-          aria-hidden={true}
-          style={{
-            position: "absolute",
-            width: 0,
-            height: 0,
-            opacity: 0
-          }}
-          maxLength={0}
-          tabIndex={-1}
-          onKeyPress={onHiddenInputKeyPress}
-        />
-      </BaseModal>
-    );
-  }
-);
+        {children}
+      </BaseModalContent>
+      <DialogActions align={alignActions}>
+        {alignActions === "left"
+          ? [PrimaryButton, TertiaryButton]
+          : [TertiaryButton, PrimaryButton]}
+      </DialogActions>
+      <input
+        autoFocus
+        aria-hidden={true}
+        style={{
+          position: "absolute",
+          width: 0,
+          height: 0,
+          opacity: 0
+        }}
+        maxLength={0}
+        tabIndex={-1}
+        onKeyPress={onHiddenInputKeyPress}
+      />
+    </BaseModal>
+  );
+};
+
+export const Dialog = React.forwardRef(DialogComponent);

package/src/Notifications/Dialog/DialogActions/DialogActions.tsx

@@ -14,7 +14,7 @@
  *    limitations under the License.
  */
 
-import React, { ComponentPropsWithRef } from "react";
+import React, { ForwardRefRenderFunction, ComponentPropsWithRef } from "react";
 import {
   BaseModalActions,
   Props as BaseModalActionsProps
@@ -25,16 +25,19 @@ export interface Props extends ComponentPropsWithRef<any>, BaseModalActionsProps
   align: "left" | "right";
 }
 
-export const DialogActions = React.forwardRef<HTMLDivElement, Props>(
-  ({ children, align, ...rest }: Props, ref) => {
-    return (
-      <BaseModalActions
-        {...rest}
-        ref={ref}
-        className={`${classes["actions"]}${align === "left" ? " " + classes["left"] : ""}`}
-      >
-        {children}
-      </BaseModalActions>
-    );
-  }
-);
+const DialogActionsComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  { children, align, ...rest }: Props,
+  ref
+) => {
+  return (
+    <BaseModalActions
+      {...rest}
+      ref={ref}
+      className={`${classes["actions"]}${align === "left" ? " " + classes["left"] : ""}`}
+    >
+      {children}
+    </BaseModalActions>
+  );
+};
+
+export const DialogActions = React.forwardRef(DialogActionsComponent);

package/src/Notifications/Dialog/DialogTitle/DialogTitle.tsx

@@ -14,7 +14,7 @@
  *    limitations under the License.
  */
 
-import React, { ComponentPropsWithRef } from "react";
+import React, { ForwardRefRenderFunction, ComponentPropsWithRef } from "react";
 import { Typography } from "../../../Typography/Typography";
 import classes from "./DialogTitle.module.scss";
 
@@ -23,14 +23,17 @@ export interface Props extends ComponentPropsWithRef<"div"> {
   title: string;
 }
 
-export const DialogTitle = React.forwardRef<HTMLDivElement, Props>(
-  ({ id, title, ...rest }: Props, ref) => {
-    return (
-      <div {...rest} ref={ref} className={classes["header"]}>
-        <Typography id={id} className={classes["title"]} tag="h1" variant="h4">
-          {title}
-        </Typography>
-      </div>
-    );
-  }
-);
+const DialogTitleComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  { id, title, ...rest }: Props,
+  ref
+) => {
+  return (
+    <div {...rest} ref={ref} className={classes["header"]}>
+      <Typography id={id} className={classes["title"]} tag="h1" variant="h4">
+        {title}
+      </Typography>
+    </div>
+  );
+};
+
+export const DialogTitle = React.forwardRef(DialogTitleComponent);

package/src/Notifications/DiscardChangesModal/DiscardChangesDialog/DiscardChangesDialog.tsx

@@ -14,7 +14,7 @@
  *    limitations under the License.
  */
 
-import React, { ComponentPropsWithRef } from "react";
+import React, { ForwardRefRenderFunction, ComponentPropsWithRef } from "react";
 import { Dialog } from "../../Dialog/Dialog";
 import { Typography } from "../../../Typography/Typography";
 import { DataAttributeKey } from "../../../interfaces";
@@ -30,42 +30,42 @@ export interface Props extends ComponentPropsWithRef<"div"> {
   onDiscardChanges: () => void;
 }
 
-export const DiscardChangesDialog = React.forwardRef<HTMLDivElement, Props>(
-  (
-    {
-      open,
-      onKeepEditing,
-      onDiscardChanges,
-      discardChangesButtonLabel,
-      keepEditingButtonLabel,
-      contentLabel,
-      titleLabel,
-      ...rest
-    }: Props,
-    ref
-  ) => {
-    return (
-      <Dialog
-        {...rest}
-        ref={ref}
-        open={open}
-        alignActions="left"
-        title={titleLabel}
-        onClose={onKeepEditing}
-        primaryAction={{
-          label: discardChangesButtonLabel,
-          onClick: onDiscardChanges
-        }}
-        secondaryAction={{
-          label: keepEditingButtonLabel,
-          onClick: onKeepEditing
-        }}
-        disableEscapeKeyDown={false}
-      >
-        <Typography variant="body" spacing={{ margin: 0 }}>
-          {contentLabel}
-        </Typography>
-      </Dialog>
-    );
-  }
-);
+const DiscardChangesDialogComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  {
+    open,
+    onKeepEditing,
+    onDiscardChanges,
+    discardChangesButtonLabel,
+    keepEditingButtonLabel,
+    contentLabel,
+    titleLabel,
+    ...rest
+  }: Props,
+  ref
+) => {
+  return (
+    <Dialog
+      {...rest}
+      ref={ref}
+      open={open}
+      alignActions="left"
+      title={titleLabel}
+      onClose={onKeepEditing}
+      primaryAction={{
+        label: discardChangesButtonLabel,
+        onClick: onDiscardChanges
+      }}
+      secondaryAction={{
+        label: keepEditingButtonLabel,
+        onClick: onKeepEditing
+      }}
+      disableEscapeKeyDown={false}
+    >
+      <Typography variant="body" spacing={{ margin: 0 }}>
+        {contentLabel}
+      </Typography>
+    </Dialog>
+  );
+};
+
+export const DiscardChangesDialog = React.forwardRef(DiscardChangesDialogComponent);