mui-alert-provider/dist/Alert.js

Make your alerts float! A lightweight provider for Material UI’s Alert that fits seamlessly into any web UI.

import { jsx as _jsx } from "react/jsx-runtime";
import { useCallback, useEffect, useState } from "react";
import { Alert as MuiAlert, Stack } from "@mui/material";
const Alert = ({ alerts, removeAlert, duration, muiAlertProps, muiStackProps, }) => {
    const [applyGap, setApplyGap] = useState(true); // Track whether the gap is applied to the last alert
    const durationInSeconds = duration * 0.001; // Convert milliseconds to seconds
    // Remove the gap from the last alert after duration
    useEffect(() => {
        if (alerts.length > 0) {
            setApplyGap(true); // Apply the gap initially
            const timer = setTimeout(() => {
                setApplyGap(false); // Remove the gap after duration
            }, duration);
            return () => {
                // Cleanup timeout on unmount
                return clearTimeout(timer);
            };
        }
    }, [alerts, duration]);
    const handleClose = useCallback((index) => {
        removeAlert(index);
    }, [removeAlert]);
    return (_jsx(Stack, Object.assign({ spacing: 1, id: "mui-alerts-provider-stack" }, muiStackProps, { children: alerts.map((alert, index) => {
            const { isNewAlert } = alert;
            let transform;
            if (isNewAlert && applyGap) {
                transform = "translateY(16px)"; // Add a gap for the last alert
            }
            else {
                transform = "translateY(0)"; // Default transform
            }
            return (_jsx(MuiAlert, Object.assign({ id: `mui-alerts-provider-alert-${index}`, severity: alert.severity, onClose: () => {
                    return handleClose(index);
                }, sx: {
                    transform,
                    transition: isNewAlert && applyGap
                        ? `transform ${durationInSeconds}s ease-in-out`
                        : `opacity ${durationInSeconds}s ease-in-out, transform ${durationInSeconds}s ease-in-out`,
                } }, muiAlertProps, { children: alert.message }), index));
        }) })));
};
export default Alert;