/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-af8d194 | Cube Dev Team */
import { tasty } from "../../../../tasty/tasty.js";
import { useNotificationsList } from "../hooks/use-notifications-list.js";
import { NotificationListItem } from "./NotificationsListItem.js";
import { useRef } from "react";
import { jsx } from "react/jsx-runtime";
import { Item } from "react-stately";

//#region src/components/overlays/NewNotifications/NotificationsList/NotificationsList.tsx
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>
*/
function NotificationsList(props) {
	const { items, children, onDismiss } = props;
	const ref = useRef(null);
	const { state, listProps } = useNotificationsList({
		items,
		children,
		ref
	});
	return /* @__PURE__ */ jsx(NotificationListContainer, {
		ref,
		...listProps,
		children: [...state.collection].map((item) => /* @__PURE__ */ jsx(NotificationListItem, {
			item,
			state,
			onDismiss
		}, item.key))
	});
}
NotificationsList.Item = Item;

//#endregion
export { NotificationsList };
//# sourceMappingURL=NotificationsList.js.map