@onewelcome/react-lib-components 2.2.0 → 3.0.0

package/src/components/Notifications/Snackbar/SnackbarProvider/SnackbarProvider.tsx

@@ -41,8 +41,9 @@ export interface Props {
 
 export interface Item {
   id: string;
-  title: string;
+  title?: string;
   duration: number;
+  className?: string;
   height: number;
   variant: Variant;
   content?: string;
@@ -91,7 +92,7 @@ export const SnackbarProvider = (
   };
 
   const enqueueSnackbar = (
-    title: string,
+    title?: string,
     content?: string,
     options: SnackbarOptionsProps = {}
   ): void => {
@@ -105,6 +106,7 @@ export const SnackbarProvider = (
       title,
       content,
       variant,
+      className: options.className,
       actions,
       duration,
       height: 0,
@@ -115,7 +117,7 @@ export const SnackbarProvider = (
   };
 
   const enqueueSuccessSnackbar = (
-    title: string,
+    title?: string,
     content?: string,
     options?: SnackbarOptionsProps
   ): void => {
@@ -123,13 +125,21 @@ export const SnackbarProvider = (
   };
 
   const enqueueErrorSnackbar = (
-    title: string,
+    title?: string,
     content?: string,
     options?: SnackbarOptionsProps
   ): void => {
     enqueueSnackbar(title, content, { ...options, variant: "error" });
   };
 
+  const enqueueWarningSnackbar = (
+    title?: string,
+    content?: string,
+    options?: SnackbarOptionsProps
+  ): void => {
+    enqueueSnackbar(title, content, { ...options, variant: "warning" });
+  };
+
   const onItemClosed = (id: string) => {
     setSnackbars(items => [...items].filter(item => item.id !== id));
   };
@@ -139,6 +149,7 @@ export const SnackbarProvider = (
       <SnackbarItem
         {...item}
         key={item.id}
+        className={item.className}
         onClose={() => {
           onItemClosed(item.id);
           item.onClose?.();
@@ -161,6 +172,7 @@ export const SnackbarProvider = (
         enqueueSnackbar,
         enqueueSuccessSnackbar,
         enqueueErrorSnackbar,
+        enqueueWarningSnackbar,
         setSnackbarHeight,
         snackbars
       }}

package/src/components/Notifications/Snackbar/SnackbarProvider/SnackbarStateProvider.tsx

@@ -19,9 +19,18 @@ import { SnackbarOptionsProps } from "../interfaces";
 import { Item } from "./SnackbarProvider";
 
 interface SnackbarContextProps {
-  enqueueSnackbar: (title: string, content?: string, options?: SnackbarOptionsProps) => void;
-  enqueueSuccessSnackbar: (title: string, content?: string, options?: SnackbarOptionsProps) => void;
-  enqueueErrorSnackbar: (title: string, content?: string, options?: SnackbarOptionsProps) => void;
+  enqueueSnackbar: (title?: string, content?: string, options?: SnackbarOptionsProps) => void;
+  enqueueSuccessSnackbar: (
+    title?: string,
+    content?: string,
+    options?: SnackbarOptionsProps
+  ) => void;
+  enqueueWarningSnackbar: (
+    title?: string,
+    content?: string,
+    options?: SnackbarOptionsProps
+  ) => void;
+  enqueueErrorSnackbar: (title?: string, content?: string, options?: SnackbarOptionsProps) => void;
   setSnackbarHeight: (id: string, height: number) => void;
   snackbars: Item[];
 }
@@ -30,6 +39,7 @@ const SnackbarContext = createContext<SnackbarContextProps>({
   enqueueSnackbar: () => null,
   enqueueSuccessSnackbar: () => null,
   enqueueErrorSnackbar: () => null,
+  enqueueWarningSnackbar: () => null,
   setSnackbarHeight: () => null,
   snackbars: []
 });

package/src/components/Notifications/Snackbar/interfaces.ts

@@ -16,12 +16,13 @@
 
 import { ButtonHTMLAttributes } from "react";
 
-export type Variant = "info" | "success" | "error";
+export type Variant = "info" | "success" | "error" | "warning";
 
 export type Actions = (ButtonHTMLAttributes<HTMLButtonElement> & { label: string })[];
 
 export interface SnackbarOptionsProps {
   actions?: Actions;
+  className?: string;
   variant?: Variant;
   duration?: number;
   onClose?: () => void;

package/src/components/Notifications/Snackbar/useSnackbar.ts

@@ -21,6 +21,7 @@ export const useSnackbar = () => {
   const ctx = useContext(SnackbarContext);
 
   return {
+    enqueueWarningSnackbar: ctx.enqueueWarningSnackbar,
     enqueueErrorSnackbar: ctx.enqueueErrorSnackbar,
     enqueueSuccessSnackbar: ctx.enqueueSuccessSnackbar,
     enqueueSnackbar: ctx.enqueueSnackbar

package/src/components/Pagination/Pagination.module.scss

@@ -21,6 +21,11 @@
   color: var(--greyed-out);
   display: flex;
   flex-direction: column;
+  justify-content: space-between;
+
+  .left {
+    display: flex;
+  }
 
   label {
     margin-bottom: 0;
@@ -40,11 +45,8 @@
     align-items: center;
     justify-content: center;
 
-    span > span {
-      font-weight: 700;
-      font-family: var(--font-family);
-      font-size: var(--font-size);
-      margin-left: 0.25rem;
+    span {
+      color: var(--color-blue-grey500);
     }
   }
 
@@ -60,10 +62,6 @@
       display: flex;
       align-items: center;
 
-      button {
-        margin: 0.25rem;
-      }
-
       button span:before {
         font-size: 0.75rem;
       }
@@ -73,20 +71,43 @@
   .per-page {
     display: none;
     align-items: center;
+
+    label {
+      font-weight: 500;
+      color: var(--color-blue-grey900);
+    }
+
+    + .total {
+      padding-left: 0.9375rem;
+      border-left: 1px solid var(--color-blue-grey100);
+    }
   }
 
   .page {
     display: flex;
     align-items: center;
     flex-basis: min-content;
+    padding-right: 1rem;
+
+    &-total {
+      display: inline-block;
+      margin-left: 0.5rem;
+      white-space: nowrap;
+      font-weight: 500;
+      color: var(--color-blue-grey900);
+    }
+
+    + .previous {
+      padding-left: 0.9375rem;
+      border-left: 1px solid var(--color-blue-grey100);
+    }
   }
 
   .page-size-select {
-    border-color: var(--light);
     margin: 0 0.25rem;
 
     button {
-      min-width: 3.4375rem;
+      min-width: 3.75rem;
       padding: 0;
 
       div[data-display] {
@@ -98,17 +119,19 @@
       }
     }
   }
+}
 
-  .current-value-input {
-    margin: 0 0.25rem 0 0;
+.current-page-select {
+  button {
+    min-width: 3.75rem;
     padding: 0;
-    height: auto;
 
-    input {
-      border-radius: var(--input-border-radius);
-      padding: 0 1rem;
-      width: auto;
-      text-align: center;
+    div[data-display] {
+      left: 0.5rem;
+    }
+
+    div:not([data-display]) {
+      right: 0.5rem;
     }
   }
 }
@@ -124,13 +147,6 @@
     .pagination {
       margin-top: 0;
       justify-content: flex-end;
-
-      .previous,
-      .next {
-        button {
-          margin: 0 0.5rem;
-        }
-      }
     }
   }
 }
@@ -138,6 +154,6 @@
 @media screen and (min-width: 48em) {
   .pagination-wrapper .per-page {
     display: flex;
-    margin-right: 0.5rem;
+    margin-right: 1rem;
   }
 }

package/src/components/Pagination/Pagination.test.tsx

@@ -91,14 +91,6 @@ describe("Pagination events", () => {
     await userEvent.click(option25);
 
     await waitFor(() => expect(onPageSizeChange).toHaveBeenCalledWith(25));
-
-    await act(() => {
-      (currentPageInput as HTMLInputElement).focus();
-    });
-
-    await userEvent.keyboard("{backspace}{backspace}30{enter}");
-
-    await waitFor(() => expect(onPageChange).toHaveBeenCalledWith(30));
   });
 });
 
@@ -106,20 +98,17 @@ describe("different current pages and their effect on what renders", () => {
   it("is on the first page and does not render previous and first", () => {
     const { pagination } = createPagination();
 
-    expect(pagination.querySelector(".next")).toBeTruthy();
-    expect(pagination.querySelector(".previous")).toBeFalsy();
+    expect(pagination.querySelector('[data-paginate="next"]')).toBeTruthy();
+    expect(pagination.querySelector('[data-paginate="previous"]')).toHaveAttribute("disabled");
   });
 
-  it("is on the second page and does not render first", () => {
+  it("is on the second page and does not render first", async () => {
     const { pagination } = createPagination(defaultParams => ({
       ...defaultParams,
       currentPage: 2
     }));
 
-    expect(pagination.querySelector('[data-paginate="first"]')).toBeFalsy();
-    expect((pagination.querySelector(".current-value-input input") as HTMLInputElement).value).toBe(
-      "2"
-    );
+    expect(pagination.querySelector('[data-paginate="first"]')).toHaveAttribute("disabled");
   });
 
   it("is on the second to last page and does not render last", () => {
@@ -128,7 +117,7 @@ describe("different current pages and their effect on what renders", () => {
       currentPage: 499
     }));
 
-    expect(pagination.querySelector('[data-paginate="last"]')).toBeFalsy();
+    expect(pagination.querySelector('[data-paginate="last"]')).toHaveAttribute("disabled");
   });
 
   it("is on the last page and does not render next & last", () => {
@@ -137,8 +126,8 @@ describe("different current pages and their effect on what renders", () => {
       currentPage: 500
     }));
 
-    expect(pagination.querySelector('[data-paginate="last"]')).toBeFalsy();
-    expect(pagination.querySelector('[data-paginate="next"]')).toBeFalsy();
+    expect(pagination.querySelector('[data-paginate="last"]')).toHaveAttribute("disabled");
+    expect(pagination.querySelector('[data-paginate="next"]')).toHaveAttribute("disabled");
   });
 });
 
@@ -150,8 +139,8 @@ describe("omitted attributes still renders correctly", () => {
     }));
 
     expect(pagination.querySelector(".page")).toBeFalsy();
-    expect(pagination.querySelector(".next")).toBeTruthy();
-    expect(pagination.querySelector(".previous")).toBeFalsy();
+    expect(pagination.querySelector('[data-paginate="next"]')).toBeTruthy();
+    expect(pagination.querySelector('[data-paginate="previous"]')).toHaveAttribute("disabled");
   });
 
   it("still renders next if totalItems prop isn't given and we're on the first page", () => {
@@ -162,8 +151,8 @@ describe("omitted attributes still renders correctly", () => {
     }));
 
     expect(pagination.querySelector(".page")).toBeFalsy();
-    expect(pagination.querySelector(".next")).toBeTruthy();
-    expect(pagination.querySelector(".previous")).toBeTruthy();
+    expect(pagination.querySelector('[data-paginate="next"]')).toBeTruthy();
+    expect(pagination.querySelector('[data-paginate="previous"]')).toBeTruthy();
   });
 });
 

package/src/components/Pagination/Pagination.tsx

@@ -14,18 +14,11 @@
  *    limitations under the License.
  */
 
-import React, {
-  ForwardRefRenderFunction,
-  ComponentPropsWithRef,
-  Fragment,
-  useState,
-  useEffect
-} from "react";
+import React, { ForwardRefRenderFunction, ComponentPropsWithRef, Fragment } from "react";
 import classes from "./Pagination.module.scss";
 import readyclasses from "../../readyclasses.module.scss";
 import { IconButton } from "../Button/IconButton";
 import { Icons, Icon } from "../Icon/Icon";
-import { Input } from "../Form/Input/Input";
 import { Select } from "../Form/Select/Select";
 import { Option } from "../Form/Select/Option";
 import { Label } from "../Form/Label/Label";
@@ -41,9 +34,9 @@ export type PaginationTranslations = {
 export type PageChangeLabels = "next" | "previous" | "first" | "last";
 
 enum DefaultTranslations {
-  totalItems = "Total items",
+  totalItems = "items in total",
   itemsPerPage = "Items per page",
-  currentPage = "Page %1 of %2",
+  currentPage = "of %1 pages",
   itemsPerPageLabel = "Select how many items per page you want to see.",
   currentPageLabel = "What page you are currently on."
 }
@@ -51,7 +44,7 @@ enum DefaultTranslations {
 export type PageSize = 10 | 25 | 50;
 
 export interface Props extends Omit<ComponentPropsWithRef<"div">, "translate"> {
-  currentPage?: number;
+  currentPage: number;
   totalElements?: number;
   pageSize?: PageSize;
   translate?: PaginationTranslations;
@@ -72,8 +65,6 @@ const PaginationComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
   }: 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;
 
@@ -84,71 +75,6 @@ const PaginationComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
     return Math.ceil(totalElements / pageSize);
   };
 
-  useEffect(() => {
-    setInternalCurrentPage(currentPage?.toString() ?? "1");
-  }, [currentPage]);
-
-  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);
@@ -159,19 +85,8 @@ const PaginationComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
   };
 
   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"]}>
+    <div {...rest} ref={ref} className={`${classes["pagination-wrapper"]} ${className ?? ""}`}>
+      <div className={classes["left"]}>
         {pageSize && (
           <div className={classes["per-page"]}>
             <Label id="page-size-select-label">{translate.itemsPerPage}</Label>
@@ -187,38 +102,79 @@ const PaginationComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
             </Select>
           </div>
         )}
+        {totalElements && (
+          <div className={classes["total"]}>
+            <span tabIndex={0}>
+              {totalElements}&nbsp;{translate.totalItems}
+            </span>
+          </div>
+        )}
+      </div>
+      <div className={classes["pagination"]}>
         <Fragment>
-          {!!((currentPage && currentPage > 2) || (currentPage && currentPage > 1)) && (
+          {totalElements && !!calculateAmountOfPages() && (
+            <div className={classes["page"]}>
+              <Label
+                id="current-value-input-label"
+                htmlFor="current-value-input"
+                className={`${readyclasses["sr-only"]} ${classes["current-value-select-label"]}`}
+              >
+                {translate.currentPageLabel}
+              </Label>
+              <Select
+                aria-labelledby="current-value-input-label"
+                key="input"
+                id="current-value-input"
+                size={currentPage?.toString().length}
+                onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
+                  onPageChangeHandler(Number(e.target.value))
+                }
+                name="current-value-input"
+                value={currentPage.toString()}
+                className={`${classes["form-element"]} ${classes["current-page-select"]}`}
+              >
+                {Array.from(Array(calculateAmountOfPages()!).keys()).map(page => (
+                  <Option key={page} value={(page + 1).toString()}>
+                    {(page + 1).toString()}
+                  </Option>
+                ))}
+              </Select>
+              <span className={classes["page-total"]}>
+                {translate.currentPage.replace(
+                  "%1",
+                  Math.ceil(totalElements / pageSize).toString()
+                )}
+              </span>
+            </div>
+          )}
+          {!!currentPage && (
             <div className={classes["previous"]}>
-              {currentPage > 2 && (
+              {
                 <IconButton
+                  disabled={currentPage <= 2}
                   title="first"
                   onClick={() => onPageChangeHandler(0)}
                   data-paginate="first"
                 >
                   <Icon icon={Icons.NavigationFirst} />
                 </IconButton>
-              )}
-              {currentPage > 1 && (
+              }
+              {
                 <IconButton
+                  disabled={currentPage <= 1}
                   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)
-            ) && (
+            {!!(currentPage !== undefined || (currentPage !== undefined && !totalElements)) && (
               <IconButton
+                disabled={currentPage >= calculateAmountOfPages()!}
                 title="next"
                 onClick={() => onPageChangeHandler(currentPage + 1)}
                 data-paginate="next"
@@ -226,10 +182,11 @@ const PaginationComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
                 <Icon icon={Icons.ChevronRight} />
               </IconButton>
             )}
-            {!!(currentPage && totalElements && currentPage < calculateAmountOfPages()! - 1) && (
+            {!!(currentPage && totalElements) && (
               <IconButton
+                disabled={currentPage >= calculateAmountOfPages()! - 1}
                 title="last"
-                onClick={() => onPageChangeHandler(totalElements / pageSize)}
+                onClick={() => onPageChangeHandler(Math.ceil(totalElements / pageSize))}
                 data-paginate="last"
               >
                 <Icon icon={Icons.NavigationLast} />

package/src/components/Popover/Popover.module.scss

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

package/src/components/Popover/Popover.tsx

@@ -20,7 +20,8 @@ import React, {
   ReactNode,
   RefObject,
   useEffect,
-  useRef
+  useRef,
+  useState
 } from "react";
 import { Offset, Placement, usePosition } from "../../hooks/usePosition";
 import classes from "./Popover.module.scss";
@@ -51,9 +52,9 @@ const PopoverComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
   },
   ref
 ) => {
+  const [showPopover, setShowPopover] = useState(false);
   const elToBePositioned = useRef<HTMLDivElement>(null);
-
-  const { top, left, right, bottom, calculatePosition } = usePosition({
+  const { top, left, right, bottom, calculatePosition, initialCalculationDone } = usePosition({
     elementToBePositioned: elToBePositioned,
     relativeElement: anchorEl,
     offset: offset,
@@ -63,7 +64,13 @@ const PopoverComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
   });
 
   useEffect(() => {
-    if (!show) {
+    if (initialCalculationDone) {
+      setShowPopover(!!show);
+    }
+  }, [show, initialCalculationDone]);
+
+  useEffect(() => {
+    if (!showPopover) {
       return;
     }
 
@@ -74,23 +81,31 @@ const PopoverComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
       window.removeEventListener("resize", calculatePosition);
       window.removeEventListener("scroll", calculatePosition);
     };
-  }, [show]);
+  }, [showPopover]);
 
   useEffect(() => {
     calculatePosition();
-  }, [show]);
+  }, [showPopover]);
 
   useEffect(() => {
-    const isAnchorOffscreen =
-      show &&
-      (top === 0 ||
-        left === 0 ||
-        right === 0 ||
-        bottom === 0 ||
-        window.innerHeight - (elToBePositioned.current as HTMLElement).offsetHeight === top);
+    const anchor = anchorEl?.current as HTMLElement;
+
+    if (anchor) {
+      const anchorTop = anchor.getBoundingClientRect().top;
+      const anchorBottom = anchor.getBoundingClientRect().bottom;
+
+      const isAnchorOffscreen =
+        showPopover &&
+        (Number(top) < 0 ||
+          Number(left) < 0 ||
+          Number(right) < 0 ||
+          Number(bottom) < 0 ||
+          anchorTop < 0 ||
+          anchorBottom > window.innerHeight);
 
-    if (isAnchorOffscreen) {
-      onAnchorOutOfView?.();
+      if (isAnchorOffscreen) {
+        onAnchorOutOfView?.();
+      }
     }
   }, [top, left, right, bottom]);
 
@@ -98,7 +113,7 @@ const PopoverComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
     <div ref={ref} {...rest}>
       <div
         ref={elToBePositioned}
-        className={`${classes.popover} ${className ?? ""} ${show ? classes.show : ""}`}
+        className={`${classes.popover} ${className ?? ""} ${showPopover ? classes.show : ""}`}
         style={{ top: top, left: left, right: right, bottom: bottom }}
       >
         {children}