@onewelcome/react-lib-components 1.3.0 → 1.5.0

package/src/Notifications/SlideInModal/SlideInModal.module.scss

@@ -14,17 +14,17 @@
  *    limitations under the License.
  */
 
-@import "../../mixins.module.scss";
+@use "../../mixins.module.scss";
 
 .slide-in-modal {
   justify-content: flex-end;
 
   visibility: visible;
 
-  @include transition(transform, 0.5s, ease-in-out);
+  @include mixins.transition(transform, 0.5s, ease-in-out);
   transform: translate(120%);
 
-  &.hidden {
+  &.hide {
     visibility: hidden;
   }
 
@@ -32,13 +32,13 @@
     visibility: visible;
     transform: translate(0%);
 
-    .backdrop-slide {
+    #backdrop-slide {
       background-color: transparent;
     }
   }
 }
 
-.backdrop-slide {
+#backdrop-slide {
   background-color: transparent;
 }
 

package/src/Notifications/SlideInModal/SlideInModal.test.tsx

@@ -49,12 +49,17 @@ describe("SlideInModal should render", () => {
   it("makes modal content's container visible after opening transition ends", () => {
     const { slideInModal, rerender } = createSlideInModal();
 
-    expect(slideInModal).toHaveClass("hidden");
+    expect(slideInModal).toHaveClass("hide");
 
     rerender(<SlideInModal {...defaultParams} open />);
     fireEvent.transitionEnd(slideInModal);
 
-    expect(slideInModal).not.toHaveClass("hidden");
+    expect(slideInModal).not.toHaveClass("hide");
+
+    rerender(<SlideInModal {...defaultParams} open={false} />);
+    fireEvent.transitionEnd(slideInModal);
+
+    expect(slideInModal).toHaveClass("hide");
   });
 });
 

package/src/Notifications/SlideInModal/SlideInModal.tsx

@@ -14,39 +14,59 @@
  *    limitations under the License.
  */
 
-import React, { TransitionEventHandler, useState, useRef } from "react";
+import React, {
+  ForwardRefRenderFunction,
+  TransitionEventHandler,
+  useState,
+  useRef,
+  useCallback,
+  useEffect
+} from "react";
 import { Props as ModalProps, Modal } from "../Modal/Modal";
 import classes from "./SlideInModal.module.scss";
 
-export const SlideInModal = React.forwardRef<HTMLDivElement, ModalProps>(
-  ({ children, id, open, ...rest }: ModalProps, ref) => {
-    const [classHideOnTransition, setClassHideOnTransition] = useState<string>("hidden");
-    const containerRef = useRef(null);
+const SlideInModalComponent: ForwardRefRenderFunction<HTMLDivElement, ModalProps> = (
+  { children, id, open, ...rest }: ModalProps,
+  ref
+) => {
+  const [classHideOnTransition, setClassHideOnTransition] = useState<string>("hide");
+  const [controlledOpen, setControlledOpen] = useState(false);
+  const containerRef = useRef(null);
 
-    const onTransitionEnd: TransitionEventHandler<HTMLDivElement> = e => {
+  const onTransitionEnd: TransitionEventHandler<HTMLDivElement> = useCallback(
+    e => {
       if (e.target === containerRef.current) {
-        setClassHideOnTransition(prev => (prev ? "" : "hidden"));
+        setClassHideOnTransition(prev => (prev ? "" : "hide"));
+        if (!open && controlledOpen) {
+          setControlledOpen(false);
+        }
       }
-    };
+    },
+    [open]
+  );
 
-    return (
-      <Modal
-        {...rest}
-        id={id}
-        open={open}
-        className={`${classes["slide-in-modal"]} ${open ? classes["visible"] : ""} ${
-          !open ? classes[classHideOnTransition] : ""
-        }`}
-        containerProps={{ className: classes["container"] }}
-        backdropProps={{ className: classes["backdrop-slide"] }}
-        forceContainerOpen
-        onTransitionEnd={onTransitionEnd}
-        ref={ref || containerRef}
-      >
-        {children}
-      </Modal>
-    );
-  }
-);
+  useEffect(() => {
+    open && setControlledOpen(open);
+  }, [open]);
+
+  return (
+    <Modal
+      {...rest}
+      id={id}
+      open={controlledOpen}
+      className={`${classes["slide-in-modal"]} ${open ? classes["visible"] : ""} ${
+        !open ? classes[classHideOnTransition] : ""
+      }`}
+      containerProps={{ className: classes["container"] }}
+      backdropProps={{ id: classes["backdrop-slide"] }}
+      onTransitionEnd={onTransitionEnd}
+      ref={ref || containerRef}
+    >
+      {children}
+    </Modal>
+  );
+};
 
 export { Props } from "../Modal/Modal";
+
+export const SlideInModal = React.forwardRef(SlideInModalComponent);

package/src/Pagination/Pagination.tsx

@@ -14,7 +14,7 @@
  *    limitations under the License.
  */
 
-import React, { ComponentPropsWithRef, Fragment, useState } from "react";
+import React, { ForwardRefRenderFunction, ComponentPropsWithRef, Fragment, useState } from "react";
 import classes from "./Pagination.module.scss";
 import readyclasses from "../readyclasses.module.scss";
 import { IconButton } from "../Button/IconButton";
@@ -53,183 +53,183 @@ export interface Props extends Omit<ComponentPropsWithRef<"div">, "translate"> {
   onPageSizeChange: (pageSize: PageSize) => void;
 }
 
-export const Pagination = React.forwardRef<HTMLDivElement, Props>(
-  (
-    {
-      totalElements,
-      pageSize = 10,
-      translate = DefaultTranslations,
-      currentPage,
-      className,
-      onPageChange,
-      onPageSizeChange,
-      ...rest
-    }: Props,
-    ref
-  ) => {
-    /** We use an internal state variable, because we don't want to fire onCurrentPageChange whenever onChange fires on the input. Rather, only when the Enter key is pressed. */
-    const [internalCurrentPage, setInternalCurrentPage] = useState(currentPage?.toString() || "1");
-    const calculateAmountOfPages = () => {
-      if (!totalElements) return 1;
-
-      if (Math.ceil(totalElements / pageSize) < 1) {
-        return 1;
-      }
-
-      return Math.ceil(totalElements / pageSize);
-    };
-
-    const onEnterListener = (event: React.KeyboardEvent<HTMLInputElement>) => {
-      if (event.code === "Enter") {
-        onPageChange(Number(internalCurrentPage));
-      }
-    };
-
-    const renderCurrentPageTranslation = () => {
-      const amountOfPages = calculateAmountOfPages();
-
-      if (amountOfPages) {
-        const splitCurrentPageTranslation = translate.currentPage.split(" ");
-
-        return splitCurrentPageTranslation.map(string => {
-          if (string.includes("%1")) {
-            return (
-              <Fragment key={string}>
-                <Label
-                  id="current-value-input-label"
-                  htmlFor="current-value-input"
-                  className={`${readyclasses["sr-only"]} ${classes["current-value-input-label"]}`}
-                >
-                  {translate.currentPageLabel}
-                </Label>
-                <Input
-                  aria-labelledby="current-value-input-label"
-                  key="input"
-                  id="current-value-input"
-                  type="text"
-                  size={currentPage?.toString().length}
-                  max={calculateAmountOfPages()}
-                  wrapperProps={{ className: classes["current-value-input"] }}
-                  onKeyUp={onEnterListener}
-                  onBlur={(event: React.ChangeEvent<HTMLInputElement>) =>
-                    onPageChange(Number(event.target.value))
-                  }
-                  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                    setInternalCurrentPage(e.target.value)
-                  }
-                  name="current-value-input"
-                  value={internalCurrentPage}
-                  className={`${classes["form-element"]} ${classes["current-page-input"]}`}
-                />
-              </Fragment>
-            );
-          }
-
-          if (string.includes("%2")) {
-            return (
-              <div key={string}>
-                <strong>{string.replace("%2", amountOfPages.toString())}</strong>&nbsp;
-              </div>
-            );
-          }
-
-          return <div key={string}>{string}&nbsp;</div>;
-        });
-      }
-
-      return null;
-    };
-
-    const onPageSizeChangeHandler = (event: React.ChangeEvent<HTMLSelectElement>) => {
-      const pageSizeNumber = Number(event.target.value) as PageSize;
-      onPageSizeChange(pageSizeNumber);
-    };
-
-    const onPageChangeHandler = (pageToGoTo: number) => {
-      onPageChange(pageToGoTo);
-    };
-
-    return (
-      <div
-        {...rest}
-        ref={ref}
-        className={`${classes["pagination-wrapper"]} ${className ? className : ""}`}
-      >
-        {totalElements && (
-          <div className={classes["total"]}>
-            <span tabIndex={0}>
-              {translate.totalItems}: <span>{totalElements}</span>
-            </span>
-          </div>
-        )}
-        <div className={classes["pagination"]}>
-          {pageSize && (
-            <div className={classes["per-page"]}>
-              <Label id="page-size-select-label">{translate.itemsPerPage}</Label>
-              <Select
-                labeledBy="page-size-select-label"
-                className={`${classes["form-element"]} ${classes["page-size-select"]}`}
-                value={pageSize.toString()}
-                onChange={onPageSizeChangeHandler}
+const PaginationComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  {
+    totalElements,
+    pageSize = 10,
+    translate = DefaultTranslations,
+    currentPage,
+    className,
+    onPageChange,
+    onPageSizeChange,
+    ...rest
+  }: Props,
+  ref
+) => {
+  /** We use an internal state variable, because we don't want to fire onCurrentPageChange whenever onChange fires on the input. Rather, only when the Enter key is pressed. */
+  const [internalCurrentPage, setInternalCurrentPage] = useState(currentPage?.toString() || "1");
+  const calculateAmountOfPages = () => {
+    if (!totalElements) return 1;
+
+    if (Math.ceil(totalElements / pageSize) < 1) {
+      return 1;
+    }
+
+    return Math.ceil(totalElements / pageSize);
+  };
+
+  const onEnterListener = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.code === "Enter") {
+      onPageChange(Number(internalCurrentPage));
+    }
+  };
+
+  const renderCurrentPageTranslation = () => {
+    const amountOfPages = calculateAmountOfPages();
+
+    if (amountOfPages) {
+      const splitCurrentPageTranslation = translate.currentPage.split(" ");
+
+      return splitCurrentPageTranslation.map(string => {
+        if (string.includes("%1")) {
+          return (
+            <Fragment key={string}>
+              <Label
+                id="current-value-input-label"
+                htmlFor="current-value-input"
+                className={`${readyclasses["sr-only"]} ${classes["current-value-input-label"]}`}
               >
-                <Option value="10">10</Option>
-                <Option value="25">25</Option>
-                <Option value="50">50</Option>
-              </Select>
+                {translate.currentPageLabel}
+              </Label>
+              <Input
+                aria-labelledby="current-value-input-label"
+                key="input"
+                id="current-value-input"
+                type="text"
+                size={currentPage?.toString().length}
+                max={calculateAmountOfPages()}
+                wrapperProps={{ className: classes["current-value-input"] }}
+                onKeyUp={onEnterListener}
+                onBlur={(event: React.ChangeEvent<HTMLInputElement>) =>
+                  onPageChange(Number(event.target.value))
+                }
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                  setInternalCurrentPage(e.target.value)
+                }
+                name="current-value-input"
+                value={internalCurrentPage}
+                className={`${classes["form-element"]} ${classes["current-page-input"]}`}
+              />
+            </Fragment>
+          );
+        }
+
+        if (string.includes("%2")) {
+          return (
+            <div key={string}>
+              <strong>{string.replace("%2", amountOfPages.toString())}</strong>&nbsp;
             </div>
-          )}
-          <Fragment>
-            {!!((currentPage && currentPage > 2) || (currentPage && currentPage > 1)) && (
-              <div className={classes["previous"]}>
-                {currentPage > 2 && (
-                  <IconButton
-                    title="first"
-                    onClick={() => onPageChangeHandler(0)}
-                    data-paginate="first"
-                  >
-                    <Icon icon={Icons.NavigationFirst} />
-                  </IconButton>
-                )}
-                {currentPage > 1 && (
-                  <IconButton
-                    title="previous"
-                    onClick={() => onPageChangeHandler(currentPage - 1)}
-                    data-paginate="previous"
-                  >
-                    <Icon icon={Icons.ChevronLeft} />
-                  </IconButton>
-                )}
-              </div>
-            )}
-            {totalElements && !!calculateAmountOfPages() && (
-              <div className={classes["page"]}>{renderCurrentPageTranslation()}</div>
-            )}
-            <div className={classes["next"]}>
-              {!!(
-                (currentPage !== undefined && currentPage < calculateAmountOfPages()!) ||
-                (currentPage !== undefined && !totalElements)
-              ) && (
+          );
+        }
+
+        return <div key={string}>{string}&nbsp;</div>;
+      });
+    }
+
+    return null;
+  };
+
+  const onPageSizeChangeHandler = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const pageSizeNumber = Number(event.target.value) as PageSize;
+    onPageSizeChange(pageSizeNumber);
+  };
+
+  const onPageChangeHandler = (pageToGoTo: number) => {
+    onPageChange(pageToGoTo);
+  };
+
+  return (
+    <div
+      {...rest}
+      ref={ref}
+      className={`${classes["pagination-wrapper"]} ${className ? className : ""}`}
+    >
+      {totalElements && (
+        <div className={classes["total"]}>
+          <span tabIndex={0}>
+            {translate.totalItems}: <span>{totalElements}</span>
+          </span>
+        </div>
+      )}
+      <div className={classes["pagination"]}>
+        {pageSize && (
+          <div className={classes["per-page"]}>
+            <Label id="page-size-select-label">{translate.itemsPerPage}</Label>
+            <Select
+              labeledBy="page-size-select-label"
+              className={`${classes["form-element"]} ${classes["page-size-select"]}`}
+              value={pageSize.toString()}
+              onChange={onPageSizeChangeHandler}
+            >
+              <Option value="10">10</Option>
+              <Option value="25">25</Option>
+              <Option value="50">50</Option>
+            </Select>
+          </div>
+        )}
+        <Fragment>
+          {!!((currentPage && currentPage > 2) || (currentPage && currentPage > 1)) && (
+            <div className={classes["previous"]}>
+              {currentPage > 2 && (
                 <IconButton
-                  title="next"
-                  onClick={() => onPageChangeHandler(currentPage + 1)}
-                  data-paginate="next"
+                  title="first"
+                  onClick={() => onPageChangeHandler(0)}
+                  data-paginate="first"
                 >
-                  <Icon icon={Icons.ChevronRight} />
+                  <Icon icon={Icons.NavigationFirst} />
                 </IconButton>
               )}
-              {!!(currentPage && totalElements && currentPage < calculateAmountOfPages()! - 1) && (
+              {currentPage > 1 && (
                 <IconButton
-                  title="last"
-                  onClick={() => onPageChangeHandler(totalElements / pageSize)}
-                  data-paginate="last"
+                  title="previous"
+                  onClick={() => onPageChangeHandler(currentPage - 1)}
+                  data-paginate="previous"
                 >
-                  <Icon icon={Icons.NavigationLast} />
+                  <Icon icon={Icons.ChevronLeft} />
                 </IconButton>
               )}
             </div>
-          </Fragment>
-        </div>
+          )}
+          {totalElements && !!calculateAmountOfPages() && (
+            <div className={classes["page"]}>{renderCurrentPageTranslation()}</div>
+          )}
+          <div className={classes["next"]}>
+            {!!(
+              (currentPage !== undefined && currentPage < calculateAmountOfPages()!) ||
+              (currentPage !== undefined && !totalElements)
+            ) && (
+              <IconButton
+                title="next"
+                onClick={() => onPageChangeHandler(currentPage + 1)}
+                data-paginate="next"
+              >
+                <Icon icon={Icons.ChevronRight} />
+              </IconButton>
+            )}
+            {!!(currentPage && totalElements && currentPage < calculateAmountOfPages()! - 1) && (
+              <IconButton
+                title="last"
+                onClick={() => onPageChangeHandler(totalElements / pageSize)}
+                data-paginate="last"
+              >
+                <Icon icon={Icons.NavigationLast} />
+              </IconButton>
+            )}
+          </div>
+        </Fragment>
       </div>
-    );
-  }
-);
+    </div>
+  );
+};
+
+export const Pagination = React.forwardRef(PaginationComponent);

package/src/Popover/Popover.module.scss

@@ -20,6 +20,7 @@
   $transition-property: transform, opacity;
 
   position: fixed;
+  z-index: 1;
   pointer-events: none;
   background-color: var(--light);
   border-radius: 8px;

package/src/Popover/Popover.test.tsx

@@ -32,7 +32,7 @@ const createPopover = (params?: (defaultParams: Props) => Props) => {
           <li>Test</li>
         </ul>
       ),
-      show: false,
+      show: true,
       placement: { vertical: "top", horizontal: "left" }
     };
     let parameters: Props = defaultParams;
@@ -95,6 +95,9 @@ describe("Popover should render", () => {
   it("renders without crashing and has default left and top attributes", () => {
     const { popover } = createPopover();
 
+    window.dispatchEvent(new Event("resize"));
+    window.dispatchEvent(new Event("scroll"));
+
     expect(popover).toBeTruthy();
   });
 });

package/src/Popover/Popover.tsx

@@ -14,7 +14,14 @@
  *    limitations under the License.
  */
 
-import React, { ComponentPropsWithRef, ReactNode, RefObject, useEffect, useRef } from "react";
+import React, {
+  ForwardRefRenderFunction,
+  ComponentPropsWithRef,
+  ReactNode,
+  RefObject,
+  useEffect,
+  useRef
+} from "react";
 import { Offset, Placement, usePosition } from "../hooks/usePosition";
 import classes from "./Popover.module.scss";
 
@@ -24,45 +31,80 @@ export interface Props extends ComponentPropsWithRef<"div"> {
   anchorEl?: RefObject<HTMLOrSVGElement>; //eslint-disable-line no-undef
   placement?: Placement;
   offset?: Offset;
+  debounceAmount?: number;
   transformOrigin?: Placement;
+  onAnchorOutOfView?: () => void;
 }
 
-export const Popover = React.forwardRef<HTMLDivElement, Props>(
-  ({ children, className, show, placement, offset, transformOrigin, anchorEl, ...rest }, ref) => {
-    const elToBePositioned = useRef<HTMLDivElement>(null);
+const PopoverComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  {
+    children,
+    className,
+    show,
+    placement,
+    offset,
+    debounceAmount,
+    transformOrigin,
+    anchorEl,
+    onAnchorOutOfView,
+    ...rest
+  },
+  ref
+) => {
+  const elToBePositioned = useRef<HTMLDivElement>(null);
 
-    if (show === undefined) {
-      throw new Error('Please make sure to define the "show" property on your Popover component');
+  const { top, left, right, bottom, calculatePosition } = usePosition({
+    elementToBePositioned: elToBePositioned,
+    relativeElement: anchorEl,
+    offset: offset,
+    placement: placement,
+    transformOrigin: transformOrigin,
+    debounceAmount: debounceAmount || undefined
+  });
+
+  useEffect(() => {
+    if (!show) {
+      return;
     }
 
-    const { top, left, right, bottom, calculatePosition } = usePosition({
-      elementToBePositioned: elToBePositioned,
-      relativeElement: anchorEl,
-      offset: offset,
-      placement: placement,
-      transformOrigin: transformOrigin
-    });
+    window.addEventListener("resize", calculatePosition);
+    window.addEventListener("scroll", calculatePosition);
+
+    return () => {
+      window.removeEventListener("resize", calculatePosition);
+      window.removeEventListener("scroll", calculatePosition);
+    };
+  }, [show]);
 
-    useEffect(() => {
-      window.addEventListener("resize", calculatePosition);
+  useEffect(() => {
+    calculatePosition();
+  }, [show]);
 
-      return () => window.removeEventListener("resize", calculatePosition);
-    }, []);
+  useEffect(() => {
+    const isAnchorOffscreen =
+      show &&
+      (top === 0 ||
+        left === 0 ||
+        right === 0 ||
+        bottom === 0 ||
+        window.innerHeight - (elToBePositioned.current as HTMLElement).offsetHeight === top);
 
-    useEffect(() => {
-      calculatePosition();
-    }, [show]);
+    if (isAnchorOffscreen) {
+      onAnchorOutOfView && onAnchorOutOfView();
+    }
+  }, [top, left, right, bottom]);
 
-    return (
-      <div ref={ref} {...rest}>
-        <div
-          ref={elToBePositioned}
-          className={`${classes.popover} ${className ?? ""} ${show ? classes.show : ""}`}
-          style={{ top: top, left: left, right: right, bottom: bottom }}
-        >
-          {children}
-        </div>
+  return (
+    <div ref={ref} {...rest}>
+      <div
+        ref={elToBePositioned}
+        className={`${classes.popover} ${className ?? ""} ${show ? classes.show : ""}`}
+        style={{ top: top, left: left, right: right, bottom: bottom }}
+      >
+        {children}
       </div>
-    );
-  }
-);
+    </div>
+  );
+};
+
+export const Popover = React.forwardRef(PopoverComponent);