/**
 * @license MIT
 * author: Cube Dev Team
 * @cube-dev/ui-kit v0.0.0-canary-2305ece
 * Released under the MIT license.
 */

import { jsx as _jsx } from "react/jsx-runtime";
import { useRef } from 'react';
import { Item } from 'react-stately';
import { tasty } from '../../../../tasty/index.js';
import { useNotificationsList } from '../hooks/index.js';
import { NotificationListItem } from './NotificationsListItem.js';
const NotificationListContainer = tasty({
    qa: 'NotificationsList',
    styles: { boxSizing: 'border-box', width: '100%' },
});
/**
 * Provides ability to show notifications as a list.
 *
 * @example
 *   <NotificationsList>
 *     <NotificationsList.Item key="id_1" type="success" description="Edit and test your schema without affecting the production." />
 *     <NotificationsList.Item key="id_2" type="attention" description="Edit and test your schema without affecting the production." />
 *     <NotificationsList.Item key="id_3" type="danger" description="Edit and test your schema without affecting the production." />
 *   </NotificationsList>
 *
 * @example Removing a notification
 *   <NotificationsList onDismiss={(id) => removeNotification(id)}>
 *     <NotificationsList.Item key="id_1" type="success" description="Edit and test your schema without affecting the production." />
 *   </NotificationsList>
 */
export function NotificationsList(props) {
    const { items, children, onDismiss } = props;
    const ref = useRef(null);
    const { state, listProps } = useNotificationsList({
        items,
        children,
        ref,
    });
    return (_jsx(NotificationListContainer, { ref: ref, ...listProps, children: [...state.collection].map((item) => (_jsx(NotificationListItem, { item: item, state: state, onDismiss: onDismiss }, item.key))) }));
}
NotificationsList.Item = Item;

        