@onewelcome/react-lib-components 0.3.0 → 1.0.0

package/src/Notifications/Dialog/Dialog.tsx

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 import React, { ComponentPropsWithRef, useState } from "react";
 import { BaseModal } from "../BaseModal/BaseModal";
 import { BaseModalContent } from "../BaseModal/BaseModalContent/BaseModalContent";

package/src/Notifications/Dialog/DialogActions/DialogActions.module.scss

@@ -1,3 +1,19 @@
+/*!
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 .actions {
   margin: 1.5rem 1.25rem 1.25rem;
 

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

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 import React, { useEffect, useRef } from "react";
 import { DialogActions, Props } from "./DialogActions";
 import { render } from "@testing-library/react";

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

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 import React, { ComponentPropsWithRef } from "react";
 import {
   BaseModalActions,
@@ -9,7 +25,7 @@ export interface Props extends ComponentPropsWithRef<any>, BaseModalActionsProps
   align: "left" | "right";
 }
 
-export const DialogActions = React.forwardRef<HTMLElement, Props>(
+export const DialogActions = React.forwardRef<HTMLDivElement, Props>(
   ({ children, align, ...rest }: Props, ref) => {
     return (
       <BaseModalActions

package/src/Notifications/Dialog/DialogTitle/DialogTitle.module.scss

@@ -1,3 +1,19 @@
+/*!
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 .header {
   margin: 1.5rem 1.25rem 1.25rem;
 }

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

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 import React, { useEffect, useRef } from "react";
 import { DialogTitle, Props } from "./DialogTitle";
 import { render, getByText } from "@testing-library/react";

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

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 import React, { ComponentPropsWithRef } from "react";
 import { Typography } from "../../../Typography/Typography";
 import classes from "./DialogTitle.module.scss";

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

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 import React, { useEffect, useRef } from "react";
 import { DiscardChangesDialog, Props } from "./DiscardChangesDialog";
 import { render } from "@testing-library/react";

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

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 import React, { ComponentPropsWithRef } from "react";
 import { Dialog } from "../../Dialog/Dialog";
 import { Typography } from "../../../Typography/Typography";

package/src/Notifications/DiscardChangesModal/DiscardChangesModal.test.tsx

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 import React, { useEffect, useRef } from "react";
 import { DiscardChangesModal, Props } from "./DiscardChangesModal";
 import { findByTestId, getAllByRole, render, waitFor } from "@testing-library/react";

package/src/Notifications/DiscardChangesModal/DiscardChangesModal.tsx

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 import React, { Fragment, useState } from "react";
 import { Modal, Props as ModalProps } from "../Modal/Modal";
 import { ModalHeader, Props as ModalHeaderProps } from "../Modal/ModalHeader/ModalHeader";

package/src/Notifications/Modal/Modal.tsx

@@ -1 +1,17 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 export { BaseModal as Modal, Props } from "../BaseModal/BaseModal";

package/src/Notifications/Modal/ModalActions/ModalActions.tsx

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 export {
   BaseModalActions as ModalActions,
   Props

package/src/Notifications/Modal/ModalContent/ModalContent.tsx

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 export {
   BaseModalContent as ModalContent,
   Props

package/src/Notifications/Modal/ModalHeader/ModalHeader.tsx

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 export {
   BaseModalHeader as ModalHeader,
   Props

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

@@ -1,3 +1,19 @@
+/*!
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 .slide-in-modal {
   justify-content: flex-end;
 

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

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 import React, { useEffect, useRef } from "react";
 import { SlideInModal } from "./SlideInModal";
 import { Props } from "../Modal/Modal";

package/src/Notifications/SlideInModal/SlideInModal.tsx

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 import React, { TransitionEventHandler, useState, useRef } from "react";
 import { Props as ModalProps, Modal } from "../Modal/Modal";
 import classes from "./SlideInModal.module.scss";

package/src/Notifications/Snackbar/SnackbarContainer/SnackbarContainer.module.scss

@@ -1,7 +1,26 @@
+/*!
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 .snackbars {
   position: fixed;
   z-index: 20;
   width: 100%;
+  transition: height 0.2s ease-in-out;
+  display: flex;
+  flex-direction: column;
 
   &.bottom {
     bottom: 3.5rem;

package/src/Notifications/Snackbar/SnackbarContainer/SnackbarContainer.test.tsx

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 import React from "react";
 import { SnackbarContainer, Props } from "./SnackbarContainer";
 import { render } from "@testing-library/react";

package/src/Notifications/Snackbar/SnackbarContainer/SnackbarContainer.tsx

@@ -1,5 +1,22 @@
-import React from "react";
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+import React, { useContext, useEffect, useState } from "react";
 import classes from "./SnackbarContainer.module.scss";
+import { SnackbarContext } from "../SnackbarProvider/SnackbarStateProvider";
 
 export interface Placement {
   vertical: "top" | "bottom";
@@ -13,11 +30,49 @@ export interface Props {
   className?: string;
 }
 
+const useSnackbarContainerHeightAnimation = () => {
+  const { snackbars } = useContext(SnackbarContext);
+  const [height, setHeight] = useState(0);
+  const [justifyContent, setJustifyContent] = useState<"flex-start" | "flex-end">("flex-start");
+  const spaceBetweenSnackbars = 8;
+  const exceedsMaximumVisibleSnackbars = snackbars.length >= 3;
+
+  useEffect(() => {
+    const allHeights = snackbars.map(snackbar => snackbar.height);
+
+    let totalHeight = allHeights.reduce((prev, curr) => prev + curr, 0);
+
+    totalHeight += (Math.min(snackbars.length, 3) - 1) * spaceBetweenSnackbars;
+
+    /**
+     * Once we reach the maximum amount of snackbars, they will start to disappear. We have to wait with reversing the justify-content until the last snackbar
+     * has completed their animationIn. This is around 500ms. Then we want to reverse it, because otherwise whenever a snackbar disappears they shift up
+     * and then down again, which looks really bad.
+     * */
+    if (exceedsMaximumVisibleSnackbars)
+      setTimeout(() => {
+        setJustifyContent("flex-end");
+      }, 500);
+
+    if (height > totalHeight && justifyContent !== "flex-end") {
+      setJustifyContent("flex-end");
+    } else if (height < totalHeight && justifyContent !== "flex-start") {
+      setJustifyContent("flex-start");
+    }
+
+    setHeight(totalHeight);
+  }, [snackbars]);
+
+  return { height, justifyContent };
+};
+
 export const SnackbarContainer = ({ placement, children, zIndex, className, ...rest }: Props) => {
+  const { height, justifyContent } = useSnackbarContainerHeightAnimation();
+
   return (
     <div
       {...rest}
-      style={{ zIndex }}
+      style={{ zIndex, height, justifyContent }}
       className={`${classes["snackbars"]} ${classes[placement.horizontal]} ${
         classes[placement.vertical]
       } ${className ?? ""}`}

package/src/Notifications/Snackbar/SnackbarItem/SnackbarItem.module.scss

@@ -1,3 +1,19 @@
+/*!
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 @import "../../../readyclasses.module.scss";
 
 .snackbar {
@@ -6,6 +22,8 @@
   display: flex;
   width: 100%;
   box-sizing: border-box;
+  transition: height 0.2s ease-in-out;
+  flex-grow: 0;
 
   &.info {
     background-color: var(--snackbar-info-background-color);

package/src/Notifications/Snackbar/SnackbarItem/SnackbarItem.test.tsx

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 import React from "react";
 import { render, getByRole, waitFor } from "@testing-library/react";
 import { SnackbarItem, Props } from "./SnackbarItem";

package/src/Notifications/Snackbar/SnackbarItem/SnackbarItem.tsx

@@ -1,4 +1,20 @@
-import React, { useEffect, useRef } from "react";
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+import React, { useContext, useEffect, useRef } from "react";
 import { IconButton } from "../../../Button/IconButton";
 import { Icon, Icons } from "../../../Icon/Icon";
 import { Variant, Actions } from "../interfaces";
@@ -6,6 +22,7 @@ import classes from "./SnackbarItem.module.scss";
 import readyclasses from "../../../readyclasses.module.scss";
 import { useAnimation } from "../../../hooks/useAnimation";
 import { Typography } from "../../../Typography/Typography";
+import { SnackbarContext } from "../SnackbarProvider/SnackbarStateProvider";
 
 const textColor = "var(--snackbar-text-color)";
 
@@ -20,6 +37,19 @@ export interface Props {
   actions?: Actions;
 }
 
+const useRegisterSnackbarHeight = (
+  singleSnackbarRef: React.RefObject<HTMLDivElement>,
+  snackbarId: string
+) => {
+  const ctx = useContext(SnackbarContext);
+
+  useEffect(() => {
+    if (singleSnackbarRef.current) {
+      ctx.setSnackbarHeight(snackbarId, singleSnackbarRef.current.getBoundingClientRect().height);
+    }
+  }, [singleSnackbarRef.current]);
+};
+
 export const SnackbarItem = ({
   id,
   title,
@@ -34,6 +64,8 @@ export const SnackbarItem = ({
   const onAnimationEnd = () => onClose(id);
   const { ref, animationStarted, startAnimation } = useAnimation<HTMLDivElement>(onAnimationEnd);
 
+  useRegisterSnackbarHeight(ref, id);
+
   useEffect(() => {
     timerHandler.current = setTimeout(() => startAnimation(), duration);
     return () => {
@@ -72,6 +104,7 @@ export const SnackbarItem = ({
   return (
     <div
       ref={ref}
+      aria-live="polite"
       className={`${classes["snackbar"]} ${classes[variant]} ${
         animationStarted ? readyclasses["slide-out"] : readyclasses["slide-in"]
       }`}

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

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 import React, { useEffect, useState } from "react";
 import {
   render,
@@ -164,8 +180,8 @@ describe("handlers", () => {
     const parentErrorSnackbar = errorSnackbar.closest(".snackbar")!;
     const parentSuccessSnackbar = successSnackbar.closest(".snackbar")!;
 
-    await fireEvent.animationEnd(parentErrorSnackbar);
-    await fireEvent.animationEnd(parentSuccessSnackbar);
+    fireEvent.animationEnd(parentErrorSnackbar);
+    fireEvent.animationEnd(parentSuccessSnackbar);
 
     await waitFor(() => expect(onCloseHandler).toHaveBeenCalledTimes(2));
   });