index.jsx

/*
 * Copyright (c) 2025, salesforce.com, inc.
 * All rights reserved.
 * SPDX-License-Identifier: BSD-3-Clause
 * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
 */
import React from 'react'
import PropTypes from 'prop-types'
import {Toaster as ChakraToaster, Stack, Toast, createToaster} from '@chakra-ui/react'
import SafePortal from '../safe-portal'

// A toaster is a shared global instance that can be used to create and manage toasts.
export const toaster = createToaster({
    placement: 'top-end'
})

export default function Toaster({toaster}) {
    return (
        <SafePortal>
            <ChakraToaster toaster={toaster} insetInline={{mdDown: '4'}}>
                {(toast) => (
                    <Toast.Root width={{md: 'sm'}}>
                        <Toast.Indicator />
                        <Stack gap="1" flex="1" maxWidth="100%">
                            {toast.title && <Toast.Title>{toast.title}</Toast.Title>}
                            {toast.description && (
                                <Toast.Description>{toast.description}</Toast.Description>
                            )}
                        </Stack>
                        {toast.action && (
                            <Toast.ActionTrigger asChild>{toast.action}</Toast.ActionTrigger>
                        )}
                        {toast.closable && <Toast.CloseTrigger />}
                    </Toast.Root>
                )}
            </ChakraToaster>
        </SafePortal>
    )
}

Toaster.propTypes = {
    toaster: PropTypes.object.isRequired
}