@onewelcome/react-lib-components 1.4.0 → 1.6.0

package/src/hooks/usePosition.test.tsx

@@ -15,7 +15,7 @@
  */
 
 import React, { Fragment, useRef } from "react";
-import { render } from "@testing-library/react";
+import { render, waitFor } from "@testing-library/react";
 import { ConfigObject, usePosition } from "./usePosition";
 import userEvent from "@testing-library/user-event";
 
@@ -100,411 +100,411 @@ const createUsePositionComponent = (
 };
 
 describe("returns proper values for default transformOrigin", () => {
-  it("returns the correct values for left top placement", () => {
+  it("returns the correct values for left top placement", async () => {
     const { popover } = createUsePositionComponent();
 
-    expect(popover).toHaveStyle({ top: "250px", left: "250px" });
+    await waitFor(() => expect(popover).toHaveStyle({ top: "250px", left: "250px" }));
   });
 
-  it("returns the correct values for left bottom placement", () => {
+  it("returns the correct values for left bottom placement", async () => {
     const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       placement: { horizontal: "left", vertical: "bottom" }
     }));
 
-    expect(popover).toHaveStyle({ top: "750px", left: "250px" });
+    await waitFor(() => expect(popover).toHaveStyle({ top: "750px", left: "250px" }));
   });
 
-  it("returns the correct values for left center placement", () => {
+  it("returns the correct values for left center placement", async () => {
     const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       placement: { horizontal: "left", vertical: "center" }
     }));
 
-    expect(popover).toHaveStyle({ top: "500px", left: "250px" });
+    await waitFor(() => expect(popover).toHaveStyle({ top: "500px", left: "250px" }));
   });
 
-  it("returns the correct values for center top placement", () => {
+  it("returns the correct values for center top placement", async () => {
     const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       placement: { horizontal: "center", vertical: "top" }
     }));
 
-    expect(popover).toHaveStyle({ top: "250px", left: "500px" });
+    await waitFor(() => expect(popover).toHaveStyle({ top: "250px", left: "500px" }));
   });
 
-  it("returns the correct values for center center placement", () => {
+  it("returns the correct values for center center placement", async () => {
     const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       placement: { horizontal: "center", vertical: "center" }
     }));
 
-    expect(popover).toHaveStyle({ top: "500px", left: "500px" });
+    await waitFor(() => expect(popover).toHaveStyle({ top: "500px", left: "500px" }));
   });
 
-  it("returns the correct values for center bottom placement", () => {
+  it("returns the correct values for center bottom placement", async () => {
     const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       placement: { horizontal: "center", vertical: "bottom" }
     }));
 
-    expect(popover).toHaveStyle({ top: "750px", left: "500px" });
+    await waitFor(() => expect(popover).toHaveStyle({ top: "750px", left: "500px" }));
   });
 
-  it("returns the correct values for right top placement", () => {
+  it("returns the correct values for right top placement", async () => {
     const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       placement: { horizontal: "right", vertical: "top" }
     }));
 
-    expect(popover).toHaveStyle({ top: "250px", left: "750px" });
+    await waitFor(() => expect(popover).toHaveStyle({ top: "250px", left: "750px" }));
   });
 
-  it("returns the correct values for right center placement", () => {
+  it("returns the correct values for right center placement", async () => {
     const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       placement: { horizontal: "right", vertical: "center" }
     }));
 
-    expect(popover).toHaveStyle({ top: "500px", left: "750px" });
+    await waitFor(() => expect(popover).toHaveStyle({ top: "500px", left: "750px" }));
   });
 
-  it("returns the correct values for right bottom placement", () => {
+  it("returns the correct values for right bottom placement", async () => {
     const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       placement: { horizontal: "right", vertical: "bottom" }
     }));
 
-    expect(popover).toHaveStyle({ top: "750px", left: "750px" });
+    await waitFor(() => expect(popover).toHaveStyle({ top: "750px", left: "750px" }));
   });
 });
 
 describe("it returns proper values for centered transformOrigin", () => {
-  it("returns the correct values for left top placement", () => {
+  it("returns the correct values for left top placement", async () => {
     const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       transformOrigin: { horizontal: "center", vertical: "center" }
     }));
 
-    expect(popover).toHaveStyle({ top: "200px", left: "200px" });
+    await waitFor(() => expect(popover).toHaveStyle({ top: "200px", left: "200px" }));
   });
 
-  it("returns the correct values for left bottom placement", () => {
+  it("returns the correct values for left bottom placement", async () => {
     const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       placement: { horizontal: "left", vertical: "bottom" },
       transformOrigin: { horizontal: "center", vertical: "center" }
     }));
 
-    expect(popover).toHaveStyle({ top: "700px", left: "200px" });
+    await waitFor(() => expect(popover).toHaveStyle({ top: "700px", left: "200px" }));
   });
 
-  it("returns the correct values for left center placement", () => {
+  it("returns the correct values for left center placement", async () => {
     const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       placement: { horizontal: "left", vertical: "center" },
       transformOrigin: { horizontal: "center", vertical: "center" }
     }));
 
-    expect(popover).toHaveStyle({ top: "450px", left: "200px" });
+    await waitFor(() => expect(popover).toHaveStyle({ top: "450px", left: "200px" }));
   });
 
-  it("returns the correct values for center top placement", () => {
+  it("returns the correct values for center top placement", async () => {
     const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       placement: { horizontal: "center", vertical: "top" },
       transformOrigin: { horizontal: "center", vertical: "center" }
     }));
 
-    expect(popover).toHaveStyle({ top: "200px", left: "450px" });
+    await waitFor(() => expect(popover).toHaveStyle({ top: "200px", left: "450px" }));
   });
 
-  it("returns the correct values for center center placement", () => {
+  it("returns the correct values for center center placement", async () => {
     const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       placement: { horizontal: "center", vertical: "center" },
       transformOrigin: { horizontal: "center", vertical: "center" }
     }));
 
-    expect(popover).toHaveStyle({ top: "450px", left: "450px" });
+    await waitFor(() => expect(popover).toHaveStyle({ top: "450px", left: "450px" }));
   });
 
-  it("returns the correct values for center bottom placement", () => {
+  it("returns the correct values for center bottom placement", async () => {
     const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       placement: { horizontal: "center", vertical: "bottom" },
       transformOrigin: { horizontal: "center", vertical: "center" }
     }));
 
-    expect(popover).toHaveStyle({ top: "700px", left: "450px" });
+    await waitFor(() => expect(popover).toHaveStyle({ top: "700px", left: "450px" }));
   });
 
-  it("returns the correct values for right top placement", () => {
+  it("returns the correct values for right top placement", async () => {
     const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       placement: { horizontal: "right", vertical: "top" },
       transformOrigin: { horizontal: "center", vertical: "center" }
     }));
 
-    expect(popover).toHaveStyle({ top: "200px", left: "700px" });
+    await waitFor(() => expect(popover).toHaveStyle({ top: "200px", left: "700px" }));
   });
 
-  it("returns the correct values for right center placement", () => {
+  it("returns the correct values for right center placement", async () => {
     const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       placement: { horizontal: "right", vertical: "center" },
       transformOrigin: { horizontal: "center", vertical: "center" }
     }));
 
-    expect(popover).toHaveStyle({ top: "450px", left: "700px" });
+    await waitFor(() => expect(popover).toHaveStyle({ top: "450px", left: "700px" }));
   });
 
-  it("returns the correct values for right bottom placement", () => {
+  it("returns the correct values for right bottom placement", async () => {
     const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       placement: { horizontal: "right", vertical: "bottom" },
       transformOrigin: { horizontal: "center", vertical: "center" }
     }));
 
-    expect(popover).toHaveStyle({ top: "700px", left: "700px" });
+    await waitFor(() => expect(popover).toHaveStyle({ top: "700px", left: "700px" }));
   });
 });
 
 describe("it returns proper values for right top transformOrigin", () => {
-  it("returns the correct values for left top placement", () => {
+  it("returns the correct values for left top placement", async () => {
     const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       transformOrigin: { horizontal: "right", vertical: "top" }
     }));
 
-    expect(popover).toHaveStyle({ top: "250px", right: "750px" });
+    await waitFor(() => expect(popover).toHaveStyle({ top: "250px", right: "750px" }));
   });
 
-  it("returns the correct values for left bottom placement", () => {
+  it("returns the correct values for left bottom placement", async () => {
     const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       placement: { horizontal: "left", vertical: "bottom" },
       transformOrigin: { horizontal: "right", vertical: "top" }
     }));
 
-    expect(popover).toHaveStyle({ top: "750px", right: "750px" });
+    await waitFor(() => expect(popover).toHaveStyle({ top: "750px", right: "750px" }));
   });
 
-  it("returns the correct values for left center placement", () => {
+  it("returns the correct values for left center placement", async () => {
     const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       placement: { horizontal: "left", vertical: "center" },
       transformOrigin: { horizontal: "right", vertical: "top" }
     }));
 
-    expect(popover).toHaveStyle({ top: "500px", right: "750px" });
+    await waitFor(() => expect(popover).toHaveStyle({ top: "500px", right: "750px" }));
   });
 
-  it("returns the correct values for center top placement", () => {
+  it("returns the correct values for center top placement", async () => {
     const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       placement: { horizontal: "center", vertical: "top" },
       transformOrigin: { horizontal: "right", vertical: "top" }
     }));
 
-    expect(popover).toHaveStyle({ top: "250px", right: "500px" });
+    await waitFor(() => expect(popover).toHaveStyle({ top: "250px", right: "500px" }));
   });
 
-  it("returns the correct values for center center placement", () => {
+  it("returns the correct values for center center placement", async () => {
     const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       placement: { horizontal: "center", vertical: "center" },
       transformOrigin: { horizontal: "right", vertical: "top" }
     }));
 
-    expect(popover).toHaveStyle({ top: "500px", right: "500px" });
+    await waitFor(() => expect(popover).toHaveStyle({ top: "500px", right: "500px" }));
   });
 
-  it("returns the correct values for center bottom placement", () => {
+  it("returns the correct values for center bottom placement", async () => {
     const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       placement: { horizontal: "center", vertical: "bottom" },
       transformOrigin: { horizontal: "right", vertical: "top" }
     }));
 
-    expect(popover).toHaveStyle({ top: "750px", right: "500px" });
+    await waitFor(() => expect(popover).toHaveStyle({ top: "750px", right: "500px" }));
   });
 
-  it("returns the correct values for right top placement", () => {
+  it("returns the correct values for right top placement", async () => {
     const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       placement: { horizontal: "right", vertical: "top" },
       transformOrigin: { horizontal: "right", vertical: "top" }
     }));
 
-    expect(popover).toHaveStyle({ top: "250px", right: "250px" });
+    await waitFor(() => expect(popover).toHaveStyle({ top: "250px", right: "250px" }));
   });
 
-  it("returns the correct values for right center placement", () => {
+  it("returns the correct values for right center placement", async () => {
     const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       placement: { horizontal: "right", vertical: "center" },
       transformOrigin: { horizontal: "right", vertical: "top" }
     }));
 
-    expect(popover).toHaveStyle({ top: "500px", right: "250px" });
+    await waitFor(() => expect(popover).toHaveStyle({ top: "500px", right: "250px" }));
   });
 
-  it("returns the correct values for right bottom placement", () => {
+  it("returns the correct values for right bottom placement", async () => {
     const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       placement: { horizontal: "right", vertical: "bottom" },
       transformOrigin: { horizontal: "right", vertical: "top" }
     }));
 
-    expect(popover).toHaveStyle({ top: "750px", right: "250px" });
+    await waitFor(() => expect(popover).toHaveStyle({ top: "750px", right: "250px" }));
   });
 });
 
 describe("it returns proper values for left bottom transformOrigin", () => {
-  it("returns the correct values for left top placement", () => {
+  it("returns the correct values for left top placement", async () => {
     const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       transformOrigin: { horizontal: "left", vertical: "bottom" }
     }));
 
-    expect(popover).toHaveStyle({ bottom: "750px", left: "250px" });
+    await waitFor(() => expect(popover).toHaveStyle({ bottom: "750px", left: "250px" }));
   });
 
-  it("returns the correct values for left bottom placement", () => {
+  it("returns the correct values for left bottom placement", async () => {
     const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       placement: { horizontal: "left", vertical: "bottom" },
       transformOrigin: { horizontal: "left", vertical: "bottom" }
     }));
 
-    expect(popover).toHaveStyle({ bottom: "250px", left: "250px" });
+    await waitFor(() => expect(popover).toHaveStyle({ bottom: "250px", left: "250px" }));
   });
 
-  it("returns the correct values for left center placement", () => {
+  it("returns the correct values for left center placement", async () => {
     const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       placement: { horizontal: "left", vertical: "center" },
       transformOrigin: { horizontal: "left", vertical: "bottom" }
     }));
 
-    expect(popover).toHaveStyle({ bottom: "500px", left: "250px" });
+    await waitFor(() => expect(popover).toHaveStyle({ bottom: "500px", left: "250px" }));
   });
 
-  it("returns the correct values for center top placement", () => {
+  it("returns the correct values for center top placement", async () => {
     const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       placement: { horizontal: "center", vertical: "top" },
       transformOrigin: { horizontal: "left", vertical: "bottom" }
     }));
 
-    expect(popover).toHaveStyle({ bottom: "750px", left: "500px" });
+    await waitFor(() => expect(popover).toHaveStyle({ bottom: "750px", left: "500px" }));
   });
 
-  it("returns the correct values for center center placement", () => {
+  it("returns the correct values for center center placement", async () => {
     const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       placement: { horizontal: "center", vertical: "center" },
       transformOrigin: { horizontal: "left", vertical: "bottom" }
     }));
 
-    expect(popover).toHaveStyle({ bottom: "500px", left: "500px" });
+    await waitFor(() => expect(popover).toHaveStyle({ bottom: "500px", left: "500px" }));
   });
 
-  it("returns the correct values for center bottom placement", () => {
+  it("returns the correct values for center bottom placement", async () => {
     const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       placement: { horizontal: "center", vertical: "bottom" },
       transformOrigin: { horizontal: "left", vertical: "bottom" }
     }));
 
-    expect(popover).toHaveStyle({ bottom: "250px", left: "500px" });
+    await waitFor(() => expect(popover).toHaveStyle({ bottom: "250px", left: "500px" }));
   });
 
-  it("returns the correct values for right top placement", () => {
+  it("returns the correct values for right top placement", async () => {
     const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       placement: { horizontal: "right", vertical: "top" },
       transformOrigin: { horizontal: "left", vertical: "bottom" }
     }));
 
-    expect(popover).toHaveStyle({ bottom: "750px", left: "750px" });
+    await waitFor(() => expect(popover).toHaveStyle({ bottom: "750px", left: "750px" }));
   });
 
-  it("returns the correct values for right center placement", () => {
+  it("returns the correct values for right center placement", async () => {
     const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       placement: { horizontal: "right", vertical: "center" },
       transformOrigin: { horizontal: "left", vertical: "bottom" }
     }));
 
-    expect(popover).toHaveStyle({ bottom: "500px", left: "750px" });
+    await waitFor(() => expect(popover).toHaveStyle({ bottom: "500px", left: "750px" }));
   });
 
-  it("returns the correct values for right bottom placement", () => {
+  it("returns the correct values for right bottom placement", async () => {
     const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       placement: { horizontal: "right", vertical: "bottom" },
       transformOrigin: { horizontal: "left", vertical: "bottom" }
     }));
 
-    expect(popover).toHaveStyle({ bottom: "250px", left: "750px" });
+    await waitFor(() => expect(popover).toHaveStyle({ bottom: "250px", left: "750px" }));
   });
 });
 
 describe("setting offsets work in different direction", () => {
-  it("has proper top offset", () => {
+  it("has proper top offset", async () => {
     const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       offset: { top: 50, right: 0, bottom: 0, left: 0 }
     }));
 
-    expect(popover).toHaveStyle({ left: "250px", top: "300px" });
+    await waitFor(() => expect(popover).toHaveStyle({ left: "250px", top: "300px" }));
   });
 
-  it("has proper right offset", () => {
+  it("has proper right offset", async () => {
     const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       offset: { top: 0, right: 50, bottom: 0, left: 0 }
     }));
 
-    expect(popover).toHaveStyle({ left: "200px", top: "250px" });
+    await waitFor(() => expect(popover).toHaveStyle({ left: "200px", top: "250px" }));
   });
 
-  it("has proper bottom offset", () => {
+  it("has proper bottom offset", async () => {
     const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       offset: { top: 0, right: 0, bottom: 50, left: 0 }
     }));
 
-    expect(popover).toHaveStyle({ left: "250px", top: "200px" });
+    await waitFor(() => expect(popover).toHaveStyle({ left: "250px", top: "200px" }));
   });
 
-  it("has proper left offset", () => {
+  it("has proper left offset", async () => {
     const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       offset: { top: 0, right: 0, bottom: 0, left: 50 }
     }));
 
-    expect(popover).toHaveStyle({ left: "300px", top: "250px" });
+    await waitFor(() => expect(popover).toHaveStyle({ left: "300px", top: "250px" }));
   });
 
-  it("can handle multiple values", () => {
+  it("can handle multiple values", async () => {
     const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       offset: { top: 50, right: 25, bottom: 25, left: 50 }
     }));
 
-    expect(popover).toHaveStyle({ left: "275px", top: "275px" });
+    await waitFor(() => expect(popover).toHaveStyle({ left: "275px", top: "275px" }));
   });
 
-  it("works with transformOrigin from bottom right as well", () => {
+  it("works with transformOrigin from bottom right as well", async () => {
     const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       transformOrigin: { horizontal: "right", vertical: "bottom" },
       offset: { top: 50, right: 25, bottom: 25, left: 50 }
     }));
 
-    expect(popover).toHaveStyle({ right: "725px", bottom: "725px" });
+    await waitFor(() => expect(popover).toHaveStyle({ right: "725px", bottom: "725px" }));
   });
 });

package/src/hooks/usePosition.ts

@@ -15,6 +15,7 @@
  */
 
 import React, { useState } from "react";
+import { useDebouncedCallback } from "./useDebouncedCallback";
 
 export interface ConfigObject {
   relativeElement: RefElement;
@@ -22,6 +23,7 @@ export interface ConfigObject {
   transformOrigin?: Placement;
   placement?: Placement;
   offset?: Offset;
+  debounceAmount?: number;
 }
 
 export type HorizontalPlacement = "left" | "center" | "centerh" | "right";
@@ -86,7 +88,8 @@ const defaultConfigObject: ConfigObject = {
     right: 0,
     bottom: 0,
     left: 0
-  }
+  },
+  debounceAmount: 20
 };
 
 /* eslint-disable @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain*/
@@ -326,7 +329,7 @@ export const usePosition = (providedConfigObject: ConfigObject = defaultConfigOb
     }));
   };
 
-  const calculatePosition = () => {
+  const calculatePosition = useDebouncedCallback(() => {
     if (!configObject.relativeElement?.current) return;
     const relativeElRect = (configObject.relativeElement!
       .current as HTMLElement)!.getBoundingClientRect();
@@ -352,7 +355,7 @@ export const usePosition = (providedConfigObject: ConfigObject = defaultConfigOb
 
     _calculatePlacement(clonedRelEl, elementToBePositionedDimensions, "horizontal");
     _calculatePlacement(clonedRelEl, elementToBePositionedDimensions, "vertical");
-  };
+  }, configObject.debounceAmount || 20);
 
   return {
     top: position.top,

package/src/index.ts

@@ -123,3 +123,4 @@ export { HeaderCell } from "./DataGrid/datagrid.interfaces";
 export { DataGrid, Props as DataGridProps } from "./DataGrid/DataGrid";
 export { DataGridRow, Props as DataGridRowProps } from "./DataGrid/DataGridBody/DataGridRow";
 export { DataGridCell, Props as DataGridCellProps } from "./DataGrid/DataGridBody/DataGridCell";
+export { Banner, Props as BannerProps } from "./Notifications/Banner/Banner";

package/src/mixins.module.scss

@@ -208,7 +208,7 @@
 @mixin skeletonLoading() {
   position: relative;
   overflow: hidden;
-  background-color: var(--disabled);
+  background-color: var(--skeleton-background-color);
 
   &::after {
     position: absolute;
@@ -219,10 +219,10 @@
     transform: translateX(-100%);
     background-image: linear-gradient(
       90deg,
-      rgba(#fff, 0) 0,
-      rgba(#fff, 0.2) 20%,
-      rgba(#fff, 0.5) 60%,
-      rgba(#fff, 0)
+      rgba(var(--skeleton-animation-color-rgb), 0) 0,
+      rgba(var(--skeleton-animation-color-rgb), 0.2) 20%,
+      rgba(var(--skeleton-animation-color-rgb), 0.5) 60%,
+      rgba(var(--skeleton-animation-color-rgb), 0)
     );
     content: "";