@kiwicom/orbit-components/es/Toast/ToastRoot.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

"use client";

import * as React from "react";
import cx from "clsx";
import { useToaster, toast as notify } from "react-hot-toast";
import ToastMessage from "./ToastMessage";
const ToastRoot = ({
  dataTest,
  id: wrapperId,
  topOffset = 8,
  leftOffset = 8,
  rightOffset = 8,
  bottomOffset = 8,
  gutter = 8,
  dismissTimeout = 5000,
  placement = "top-center"
}) => {
  const {
    toasts,
    handlers
  } = useToaster({
    duration: dismissTimeout
  });
  const {
    startPause,
    endPause,
    calculateOffset
  } = handlers;
  return /*#__PURE__*/React.createElement("div", {
    "data-test": dataTest,
    id: wrapperId,
    className: cx("z-onTop pointer-events-none fixed", "bottom-[var(--toast-root-bottom)] end-[var(--toast-root-end)] start-[var(--toast-root-start)] top-[var(--toast-root-top)]"),
    style: {
      "--toast-root-top": `${topOffset}px`,
      "--toast-root-bottom": `${bottomOffset}px`,
      "--toast-root-start": `${leftOffset}px`,
      "--toast-root-end": `${rightOffset}px`
    }
  }, toasts.map(toast => {
    const {
      id,
      message,
      ariaProps,
      visible,
      icon
    } = toast;
    const offset = calculateOffset(toast, {
      gutter
    });
    return /*#__PURE__*/React.createElement(ToastMessage, {
      key: id,
      id: id,
      dismissTimeout: dismissTimeout,
      visible: visible,
      icon: icon,
      offset: offset,
      onMouseEnter: startPause,
      onMouseLeave: endPause,
      placement: placement,
      onDismiss: notify.dismiss,
      ariaLive: ariaProps["aria-live"]
    }, message);
  }));
};
export default ToastRoot;