@cube-dev/ui-kit 0.0.0-canary-0d92c07 → 0.0.0-canary-4d9db65

package/dist/components/overlays/NewNotifications/NotificationView/NotificationView.js

@@ -0,0 +1,114 @@
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4d9db65 | Cube Dev Team */
+import { tasty } from "../../../../tasty/tasty.js";
+import { useId as useId$2 } from "../../../../utils/react/useId.js";
+import { mergeProps as mergeProps$1 } from "../../../../utils/react/mergeProps.js";
+import { ClearSlots } from "../../../../utils/react/Slots.js";
+import { useEvent } from "../../../../_internal/hooks/use-event.js";
+import { useTimer } from "../../../../_internal/hooks/use-timer/use-timer.js";
+import { useNotificationsDialogContext } from "../Dialog/NotificationsDialogContext.js";
+import { NotificationCloseButton } from "./NotificationCloseButton.js";
+import { NotificationDescription } from "./NotificationDescription.js";
+import { NotificationFooter } from "./NotificationFooter.js";
+import { NotificationHeader } from "./NotificationHeader.js";
+import { NotificationIcon } from "./NotificationIcon.js";
+import { NotificationProvider } from "./NotificationProvider.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useFocusRing, useHover } from "react-aria";
+
+//#region src/components/overlays/NewNotifications/NotificationView/NotificationView.tsx
+const NotificationContainer = tasty({ styles: {
+	boxSizing: "border-box",
+	position: "relative",
+	display: "grid",
+	width: "100%",
+	padding: "0.5x 0.5x 1.5x 1.5x",
+	gridAreas: `
+      ".    . .           .      close"
+      "icon . header      .      close"
+      "icon . description .      close"
+      ".    . footer      footer footer"
+    `,
+	gridColumns: "min-content 1x minmax(0, auto) 1x minmax(0, min-content)",
+	gridRows: "1x minmax(0, auto) minmax(0, auto) minmax(0, auto)",
+	fill: "#white",
+	radius: "1cr",
+	boxShadow: {
+		"": "0 0 0 4bw #purple-04.0 inset",
+		focused: "0 0 0 4bw #purple-04 inset"
+	},
+	outline: 0,
+	border: {
+		"": "#border",
+		"type=success": "#success.4",
+		"type=danger": "#danger.4",
+		"type=attention": "#border",
+		"inside-dialog": false
+	}
+} });
+/**
+* @internal This component is unstable and is a subject to change.
+*/
+const NotificationView = forwardRef(function NotificationView(props, ref) {
+	const { onClose, actions, header, icon, description, id, styles, type = "attention", isDismissible = true, duration = null, attributes = {}, qa = "notification", timer: propsTimer, onDismiss } = props;
+	const labelID = useId$2();
+	const descriptionID = useId$2();
+	const insideNotificationsDialog = useNotificationsDialogContext();
+	const onCloseEvent = useEvent(() => {
+		onClose?.();
+	});
+	const onDismissEvent = useEvent(() => {
+		if (isDismissible) onDismiss?.();
+	});
+	const { hoverProps, isHovered } = useHover({});
+	const { isFocusVisible, focusProps } = useFocusRing({ within: true });
+	useTimer({
+		timer: propsTimer,
+		delay: duration,
+		callback: onDismissEvent,
+		isDisabled: isFocusVisible || isHovered || !isDismissible
+	});
+	return /* @__PURE__ */ jsx(ClearSlots, { children: /* @__PURE__ */ jsx(NotificationProvider, {
+		onClose,
+		children: /* @__PURE__ */ jsxs(NotificationContainer, {
+			...mergeProps$1(attributes, hoverProps, focusProps),
+			ref,
+			styles,
+			"data-id": id,
+			"data-qa": qa,
+			"data-type": type,
+			"aria-labelledby": labelID,
+			"aria-describedby": descriptionID,
+			mods: {
+				focused: isFocusVisible,
+				"is-dismissible": isDismissible,
+				"inside-dialog": insideNotificationsDialog
+			},
+			children: [
+				/* @__PURE__ */ jsx(NotificationIcon, {
+					icon,
+					type
+				}),
+				/* @__PURE__ */ jsx(NotificationHeader, {
+					header,
+					id: labelID
+				}),
+				description && /* @__PURE__ */ jsx(NotificationDescription, {
+					description,
+					id: descriptionID
+				}),
+				/* @__PURE__ */ jsx(NotificationFooter, {
+					hasDescription: !!description,
+					actions,
+					onClose: onCloseEvent,
+					onDismiss: onDismissEvent
+				}),
+				isDismissible && /* @__PURE__ */ jsx(NotificationCloseButton, { onPress: onDismissEvent })
+			]
+		})
+	}) });
+});
+
+//#endregion
+export { NotificationView };
+//# sourceMappingURL=NotificationView.js.map

package/dist/components/overlays/NewNotifications/NotificationView/NotificationView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationView.js","names":["useId","mergeProps"],"sources":["../../../../../src/components/overlays/NewNotifications/NotificationView/NotificationView.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef } from 'react';\nimport { useFocusRing, useHover } from 'react-aria';\n\nimport { useEvent, useTimer } from '../../../../_internal';\nimport { tasty } from '../../../../tasty';\nimport { ClearSlots, mergeProps } from '../../../../utils/react';\nimport { useId } from '../../../../utils/react/useId';\nimport { useNotificationsDialogContext } from '../Dialog/NotificationsDialogContext';\n\nimport { NotificationCloseButton } from './NotificationCloseButton';\nimport { NotificationDescription } from './NotificationDescription';\nimport { NotificationFooter } from './NotificationFooter';\nimport { NotificationHeader } from './NotificationHeader';\nimport { NotificationIcon } from './NotificationIcon';\nimport { NotificationProvider } from './NotificationProvider';\n\nimport type { NotificationProps } from './types';\n\nconst NotificationContainer = tasty({\n  styles: {\n    boxSizing: 'border-box',\n    position: 'relative',\n    display: 'grid',\n    width: '100%',\n    padding: '0.5x 0.5x 1.5x 1.5x',\n    gridAreas: `\n      \".    . .           .      close\"\n      \"icon . header      .      close\"\n      \"icon . description .      close\"\n      \".    . footer      footer footer\"\n    `,\n    gridColumns: 'min-content 1x minmax(0, auto) 1x minmax(0, min-content)',\n    gridRows: '1x minmax(0, auto) minmax(0, auto) minmax(0, auto)',\n    fill: '#white',\n    radius: '1cr',\n    boxShadow: {\n      '': '0 0 0 4bw #purple-04.0 inset',\n      focused: '0 0 0 4bw #purple-04 inset',\n    },\n    outline: 0,\n    border: {\n      '': '#border',\n      'type=success': '#success.4',\n      'type=danger': '#danger.4',\n      'type=attention': '#border',\n      // Clear border when inside dialog\n      'inside-dialog': false,\n    },\n  },\n});\n\n/**\n * @internal This component is unstable and is a subject to change.\n */\nexport const NotificationView = forwardRef(function NotificationView(\n  props: NotificationProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    onClose,\n    actions,\n    header,\n    icon,\n    description,\n    id,\n    styles,\n    type = 'attention',\n    isDismissible = true,\n    duration = null,\n    attributes = {},\n    qa = 'notification',\n    timer: propsTimer,\n    onDismiss,\n  } = props;\n\n  const labelID = useId();\n  const descriptionID = useId();\n\n  // Detect if we're inside a NotificationsDialog specifically\n  const insideNotificationsDialog = useNotificationsDialogContext();\n\n  const onCloseEvent = useEvent(() => {\n    onClose?.();\n  });\n\n  const onDismissEvent = useEvent(() => {\n    if (isDismissible) {\n      onDismiss?.();\n    }\n  });\n\n  const { hoverProps, isHovered } = useHover({});\n  const { isFocusVisible, focusProps } = useFocusRing({ within: true });\n\n  useTimer({\n    timer: propsTimer,\n    delay: duration,\n    callback: onDismissEvent,\n    isDisabled: isFocusVisible || isHovered || !isDismissible,\n  });\n\n  return (\n    <ClearSlots>\n      <NotificationProvider onClose={onClose}>\n        <NotificationContainer\n          {...mergeProps(attributes, hoverProps, focusProps)}\n          ref={ref}\n          styles={styles}\n          data-id={id}\n          data-qa={qa}\n          data-type={type}\n          aria-labelledby={labelID}\n          aria-describedby={descriptionID}\n          mods={{\n            focused: isFocusVisible,\n            'is-dismissible': isDismissible,\n            'inside-dialog': insideNotificationsDialog,\n          }}\n        >\n          <NotificationIcon icon={icon} type={type} />\n\n          <NotificationHeader header={header} id={labelID} />\n\n          {description && (\n            <NotificationDescription\n              description={description}\n              id={descriptionID}\n            />\n          )}\n\n          <NotificationFooter\n            hasDescription={!!description}\n            actions={actions}\n            onClose={onCloseEvent}\n            onDismiss={onDismissEvent}\n          />\n\n          {isDismissible && (\n            <NotificationCloseButton onPress={onDismissEvent} />\n          )}\n        </NotificationContainer>\n      </NotificationProvider>\n    </ClearSlots>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAkBA,MAAM,wBAAwB,MAAM,EAClC,QAAQ;CACN,WAAW;CACX,UAAU;CACV,SAAS;CACT,OAAO;CACP,SAAS;CACT,WAAW;;;;;;CAMX,aAAa;CACb,UAAU;CACV,MAAM;CACN,QAAQ;CACR,WAAW;EACT,IAAI;EACJ,SAAS;EACV;CACD,SAAS;CACT,QAAQ;EACN,IAAI;EACJ,gBAAgB;EAChB,eAAe;EACf,kBAAkB;EAElB,iBAAiB;EAClB;CACF,EACF,CAAC;;;;AAKF,MAAa,mBAAmB,WAAW,SAAS,iBAClD,OACA,KACA;CACA,MAAM,EACJ,SACA,SACA,QACA,MACA,aACA,IACA,QACA,OAAO,aACP,gBAAgB,MAChB,WAAW,MACX,aAAa,EAAE,EACf,KAAK,gBACL,OAAO,YACP,cACE;CAEJ,MAAM,UAAUA,SAAO;CACvB,MAAM,gBAAgBA,SAAO;CAG7B,MAAM,4BAA4B,+BAA+B;CAEjE,MAAM,eAAe,eAAe;AAClC,aAAW;GACX;CAEF,MAAM,iBAAiB,eAAe;AACpC,MAAI,cACF,cAAa;GAEf;CAEF,MAAM,EAAE,YAAY,cAAc,SAAS,EAAE,CAAC;CAC9C,MAAM,EAAE,gBAAgB,eAAe,aAAa,EAAE,QAAQ,MAAM,CAAC;AAErE,UAAS;EACP,OAAO;EACP,OAAO;EACP,UAAU;EACV,YAAY,kBAAkB,aAAa,CAAC;EAC7C,CAAC;AAEF,QACE,oBAAC,wBACC,oBAAC;EAA8B;YAC7B,qBAAC;GACC,GAAIC,aAAW,YAAY,YAAY,WAAW;GAC7C;GACG;GACR,WAAS;GACT,WAAS;GACT,aAAW;GACX,mBAAiB;GACjB,oBAAkB;GAClB,MAAM;IACJ,SAAS;IACT,kBAAkB;IAClB,iBAAiB;IAClB;;IAED,oBAAC;KAAuB;KAAY;MAAQ;IAE5C,oBAAC;KAA2B;KAAQ,IAAI;MAAW;IAElD,eACC,oBAAC;KACc;KACb,IAAI;MACJ;IAGJ,oBAAC;KACC,gBAAgB,CAAC,CAAC;KACT;KACT,SAAS;KACT,WAAW;MACX;IAED,iBACC,oBAAC,2BAAwB,SAAS,iBAAkB;;IAEhC;GACH,GACZ;EAEf"}

package/dist/components/overlays/NewNotifications/NotificationView/index.d.ts

@@ -0,0 +1,3 @@
+
+import "./NotificationView.js";
+import { NotificationAction, NotificationActionProps } from "./NotificationAction.js";

package/dist/components/overlays/NewNotifications/NotificationsContext/NotificationsContext.d.ts

@@ -0,0 +1,12 @@
+
+import { CubeNotificationsApi, CubeNotifyApiPropsWithID } from "../types.js";
+import * as react from "react";
+
+//#region src/components/overlays/NewNotifications/NotificationsContext/NotificationsContext.d.ts
+declare const NotificationsContext: react.Context<{
+  api: CubeNotificationsApi;
+  addOnDismissListener: (listener: (notification: CubeNotifyApiPropsWithID) => void) => () => void;
+} | null>;
+//#endregion
+export { NotificationsContext };
+//# sourceMappingURL=NotificationsContext.d.ts.map

package/dist/components/overlays/NewNotifications/NotificationsContext/NotificationsContext.js

@@ -0,0 +1,9 @@
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4d9db65 | Cube Dev Team */
+import { createContext } from "react";
+
+//#region src/components/overlays/NewNotifications/NotificationsContext/NotificationsContext.ts
+const NotificationsContext = createContext(null);
+
+//#endregion
+export { NotificationsContext };
+//# sourceMappingURL=NotificationsContext.js.map

package/dist/components/overlays/NewNotifications/NotificationsContext/NotificationsContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationsContext.js","names":[],"sources":["../../../../../src/components/overlays/NewNotifications/NotificationsContext/NotificationsContext.ts"],"sourcesContent":["import { createContext } from 'react';\n\nimport { CubeNotificationsApi, CubeNotifyApiPropsWithID } from '../types';\n\nexport const NotificationsContext = createContext<{\n  api: CubeNotificationsApi;\n  addOnDismissListener: (\n    listener: (notification: CubeNotifyApiPropsWithID) => void,\n  ) => () => void;\n} | null>(null);\n"],"mappings":";;;;AAIA,MAAa,uBAAuB,cAK1B,KAAK"}

package/dist/components/overlays/NewNotifications/NotificationsContext/NotificationsProvider.d.ts

@@ -0,0 +1,11 @@
+
+import { PropsWithChildren, RefObject } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/overlays/NewNotifications/NotificationsContext/NotificationsProvider.d.ts
+declare function NotificationsProvider(props: PropsWithChildren<{
+  rootRef: RefObject<HTMLElement | null> | null;
+}>): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { NotificationsProvider };
+//# sourceMappingURL=NotificationsProvider.d.ts.map

package/dist/components/overlays/NewNotifications/NotificationsContext/NotificationsProvider.js

@@ -0,0 +1,30 @@
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4d9db65 | Cube Dev Team */
+import { Portal } from "../../../portal/Portal.js";
+import { NotificationsContext } from "./NotificationsContext.js";
+import { NotificationsBar } from "../Bar/NotificationsBar.js";
+import { useNotifications } from "./use-notifications.js";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/overlays/NewNotifications/NotificationsContext/NotificationsProvider.tsx
+function NotificationsProvider(props) {
+	const { children, rootRef } = props;
+	const { notifications, api, addOnDismissListener, onDismissNotification } = useNotifications(rootRef);
+	const providerValue = useMemo(() => ({
+		api,
+		addOnDismissListener
+	}), []);
+	return /* @__PURE__ */ jsxs(NotificationsContext.Provider, {
+		value: providerValue,
+		children: [/* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(NotificationsBar, {
+			items: notifications,
+			onRemoveNotification: api.remove,
+			onDismissNotification,
+			children: (notification) => /* @__PURE__ */ jsx(NotificationsBar.Item, { ...notification }, notification.id)
+		}) }), children]
+	});
+}
+
+//#endregion
+export { NotificationsProvider };
+//# sourceMappingURL=NotificationsProvider.js.map

package/dist/components/overlays/NewNotifications/NotificationsContext/NotificationsProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationsProvider.js","names":[],"sources":["../../../../../src/components/overlays/NewNotifications/NotificationsContext/NotificationsProvider.tsx"],"sourcesContent":["import { PropsWithChildren, RefObject, useMemo } from 'react';\n\nimport { Portal } from '../../../portal';\nimport { NotificationsBar } from '../Bar';\n\nimport { NotificationsContext } from './NotificationsContext';\nimport { useNotifications } from './use-notifications';\n\nexport function NotificationsProvider(\n  props: PropsWithChildren<{ rootRef: RefObject<HTMLElement | null> | null }>,\n) {\n  const { children, rootRef } = props;\n\n  const { notifications, api, addOnDismissListener, onDismissNotification } =\n    useNotifications(rootRef);\n\n  const providerValue = useMemo(() => ({ api, addOnDismissListener }), []);\n\n  return (\n    <NotificationsContext.Provider value={providerValue}>\n      <Portal>\n        <NotificationsBar\n          items={notifications}\n          onRemoveNotification={api.remove}\n          onDismissNotification={onDismissNotification}\n        >\n          {(notification) => (\n            <NotificationsBar.Item key={notification.id} {...notification} />\n          )}\n        </NotificationsBar>\n      </Portal>\n\n      {children}\n    </NotificationsContext.Provider>\n  );\n}\n"],"mappings":";;;;;;;;;AAQA,SAAgB,sBACd,OACA;CACA,MAAM,EAAE,UAAU,YAAY;CAE9B,MAAM,EAAE,eAAe,KAAK,sBAAsB,0BAChD,iBAAiB,QAAQ;CAE3B,MAAM,gBAAgB,eAAe;EAAE;EAAK;EAAsB,GAAG,EAAE,CAAC;AAExE,QACE,qBAAC,qBAAqB;EAAS,OAAO;aACpC,oBAAC,oBACC,oBAAC;GACC,OAAO;GACP,sBAAsB,IAAI;GACH;cAErB,iBACA,oBAAC,iBAAiB,QAA2B,GAAI,gBAArB,aAAa,GAAwB;IAElD,GACZ,EAER;GAC6B"}

package/dist/components/overlays/NewNotifications/NotificationsContext/index.d.ts

@@ -0,0 +1,3 @@
+
+import { NotificationsProvider } from "./NotificationsProvider.js";
+import { NotificationsContext } from "./NotificationsContext.js";

package/dist/components/overlays/NewNotifications/NotificationsContext/use-notifications.js

@@ -0,0 +1,95 @@
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4d9db65 | Cube Dev Team */
+import { useEvent } from "../../../../_internal/hooks/use-event.js";
+import { useEffect, useMemo, useRef, useState } from "react";
+
+//#region src/components/overlays/NewNotifications/NotificationsContext/use-notifications.ts
+const DISMISS_EVENT_NAME = "cube:notification:dismiss";
+function useNotifications(rootRef) {
+	const idPrefix = useMemo(() => (/* @__PURE__ */ new Date()).getTime(), []);
+	const idRef = useRef(0);
+	const listeners = useRef([]);
+	const [notifications, setNotifications] = useState(/* @__PURE__ */ new Map());
+	const addToast = Object.assign(useEvent((props) => {
+		const nextID = idRef.current++;
+		const { id = `${idPrefix}_${nextID}`, duration, isDismissible = true, ...rest } = props;
+		setNotifications((toasts) => {
+			const newToasts = new Map(toasts);
+			newToasts.set(id, {
+				id,
+				isDismissible,
+				duration: duration ?? (isDismissible ? 5e3 : null),
+				...rest
+			});
+			return newToasts;
+		});
+		return {
+			id,
+			remove: () => removeToast(id),
+			update: (props) => updateToast(id, props)
+		};
+	}), {
+		success: (props) => addToast({
+			type: "success",
+			...props
+		}),
+		danger: (props) => addToast({
+			type: "danger",
+			...props
+		}),
+		attention: (props) => addToast({
+			type: "attention",
+			...props
+		})
+	});
+	const updateToast = useEvent((id, props) => {
+		setNotifications((toasts) => {
+			const currentToast = toasts.get(id);
+			if (currentToast) {
+				const newToasts = new Map(toasts);
+				newToasts.set(id, {
+					...currentToast,
+					...props
+				});
+				return newToasts;
+			}
+			return toasts;
+		});
+	});
+	const removeToast = useEvent((id) => {
+		setNotifications((toasts) => {
+			if (toasts.has(id)) {
+				const newToasts = new Map(toasts);
+				newToasts.delete(id);
+				return newToasts;
+			}
+			return toasts;
+		});
+	});
+	const onDismissNotification = useEvent((id) => {
+		const toast = notifications.get(id);
+		if (toast == null) return;
+		if (toast?.putNotificationInDropdownOnDismiss !== false) rootRef?.current?.dispatchEvent(new CustomEvent(DISMISS_EVENT_NAME, { detail: toast }));
+	});
+	const addOnDismissListener = useEvent((listener) => {
+		const callback = (e) => listener(e.detail);
+		const unsub = () => rootRef?.current?.removeEventListener(DISMISS_EVENT_NAME, callback);
+		listeners.current.push(unsub);
+		rootRef?.current?.addEventListener(DISMISS_EVENT_NAME, callback);
+		return unsub;
+	});
+	useEffect(() => () => listeners.current.forEach((cb) => cb()), []);
+	return {
+		api: useMemo(() => ({
+			notify: addToast,
+			update: updateToast,
+			remove: removeToast
+		}), []),
+		notifications: useMemo(() => [...notifications.values()], [notifications]),
+		onDismissNotification,
+		addOnDismissListener
+	};
+}
+
+//#endregion
+export { useNotifications };
+//# sourceMappingURL=use-notifications.js.map

package/dist/components/overlays/NewNotifications/NotificationsContext/use-notifications.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-notifications.js","names":[],"sources":["../../../../../src/components/overlays/NewNotifications/NotificationsContext/use-notifications.ts"],"sourcesContent":["import { Key, RefObject, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { useEvent } from '../../../../_internal';\nimport {\n  CubeNotificationsApi,\n  CubeNotificationsApiNotifyCallback,\n  CubeNotifyApiProps,\n  CubeNotifyApiPropsWithID,\n} from '../types';\n\nconst DISMISS_EVENT_NAME = 'cube:notification:dismiss';\ntype DismissEvent = CustomEvent<CubeNotifyApiPropsWithID>;\n\nexport function useNotifications(\n  rootRef: RefObject<HTMLElement | null> | null,\n) {\n  const idPrefix = useMemo(() => new Date().getTime(), []);\n  const idRef = useRef(0);\n  const listeners = useRef<(() => void)[]>([]);\n  const [notifications, setNotifications] = useState<\n    Map<Key, CubeNotifyApiPropsWithID>\n  >(new Map());\n\n  const addToast: CubeNotificationsApi['notify'] = Object.assign(\n    useEvent<CubeNotificationsApiNotifyCallback>((props) => {\n      const nextID = idRef.current++;\n      const {\n        id = `${idPrefix}_${nextID}`,\n        duration,\n        isDismissible = true,\n        ...rest\n      } = props;\n\n      setNotifications((toasts) => {\n        const newToasts = new Map(toasts);\n        newToasts.set(id, {\n          id,\n          isDismissible,\n          duration: duration ?? (isDismissible ? 5_000 : null),\n          ...rest,\n        } as CubeNotifyApiPropsWithID);\n\n        return newToasts;\n      });\n\n      return {\n        id,\n        remove: () => removeToast(id),\n        update: (props) => updateToast(id, props),\n      };\n    }),\n    {\n      success: (props: CubeNotifyApiProps) =>\n        addToast({ type: 'success', ...props }),\n      danger: (props: CubeNotifyApiProps) =>\n        addToast({ type: 'danger', ...props }),\n      attention: (props: CubeNotifyApiProps) =>\n        addToast({ type: 'attention', ...props }),\n    },\n  );\n\n  const updateToast = useEvent<CubeNotificationsApi['update']>((id, props) => {\n    setNotifications((toasts) => {\n      const currentToast = toasts.get(id);\n\n      if (currentToast) {\n        const newToasts = new Map(toasts);\n        newToasts.set(id, {\n          ...currentToast,\n          ...props,\n        } as CubeNotifyApiPropsWithID);\n\n        return newToasts;\n      }\n\n      return toasts;\n    });\n  });\n\n  const removeToast = useEvent<CubeNotificationsApi['remove']>((id) => {\n    setNotifications((toasts) => {\n      if (toasts.has(id)) {\n        const newToasts = new Map(toasts);\n        newToasts.delete(id);\n\n        return newToasts;\n      }\n\n      return toasts;\n    });\n  });\n\n  const onDismissNotification = useEvent((id: Key) => {\n    const toast = notifications.get(id);\n\n    if (toast == null) {\n      return;\n    }\n\n    if (toast?.putNotificationInDropdownOnDismiss !== false) {\n      rootRef?.current?.dispatchEvent(\n        new CustomEvent(DISMISS_EVENT_NAME, { detail: toast }),\n      );\n    }\n  });\n\n  const addOnDismissListener = useEvent(\n    (listener: (notification: CubeNotifyApiPropsWithID) => void) => {\n      const callback = (e) => listener((e as DismissEvent).detail);\n\n      const unsub = () =>\n        rootRef?.current?.removeEventListener(DISMISS_EVENT_NAME, callback);\n\n      listeners.current.push(unsub);\n      rootRef?.current?.addEventListener(DISMISS_EVENT_NAME, callback);\n\n      return unsub;\n    },\n  );\n\n  useEffect(() => () => listeners.current.forEach((cb) => cb()), []);\n\n  const api = useMemo<CubeNotificationsApi>(\n    () => ({ notify: addToast, update: updateToast, remove: removeToast }),\n    // All deps are stable since we use `useEvent` hook\n\n    [],\n  );\n\n  return {\n    api,\n    notifications: useMemo(() => [...notifications.values()], [notifications]),\n    onDismissNotification,\n    addOnDismissListener,\n  } as const;\n}\n"],"mappings":";;;;;AAUA,MAAM,qBAAqB;AAG3B,SAAgB,iBACd,SACA;CACA,MAAM,WAAW,+BAAc,IAAI,MAAM,EAAC,SAAS,EAAE,EAAE,CAAC;CACxD,MAAM,QAAQ,OAAO,EAAE;CACvB,MAAM,YAAY,OAAuB,EAAE,CAAC;CAC5C,MAAM,CAAC,eAAe,oBAAoB,yBAExC,IAAI,KAAK,CAAC;CAEZ,MAAM,WAA2C,OAAO,OACtD,UAA8C,UAAU;EACtD,MAAM,SAAS,MAAM;EACrB,MAAM,EACJ,KAAK,GAAG,SAAS,GAAG,UACpB,UACA,gBAAgB,MAChB,GAAG,SACD;AAEJ,oBAAkB,WAAW;GAC3B,MAAM,YAAY,IAAI,IAAI,OAAO;AACjC,aAAU,IAAI,IAAI;IAChB;IACA;IACA,UAAU,aAAa,gBAAgB,MAAQ;IAC/C,GAAG;IACJ,CAA6B;AAE9B,UAAO;IACP;AAEF,SAAO;GACL;GACA,cAAc,YAAY,GAAG;GAC7B,SAAS,UAAU,YAAY,IAAI,MAAM;GAC1C;GACD,EACF;EACE,UAAU,UACR,SAAS;GAAE,MAAM;GAAW,GAAG;GAAO,CAAC;EACzC,SAAS,UACP,SAAS;GAAE,MAAM;GAAU,GAAG;GAAO,CAAC;EACxC,YAAY,UACV,SAAS;GAAE,MAAM;GAAa,GAAG;GAAO,CAAC;EAC5C,CACF;CAED,MAAM,cAAc,UAA0C,IAAI,UAAU;AAC1E,oBAAkB,WAAW;GAC3B,MAAM,eAAe,OAAO,IAAI,GAAG;AAEnC,OAAI,cAAc;IAChB,MAAM,YAAY,IAAI,IAAI,OAAO;AACjC,cAAU,IAAI,IAAI;KAChB,GAAG;KACH,GAAG;KACJ,CAA6B;AAE9B,WAAO;;AAGT,UAAO;IACP;GACF;CAEF,MAAM,cAAc,UAA0C,OAAO;AACnE,oBAAkB,WAAW;AAC3B,OAAI,OAAO,IAAI,GAAG,EAAE;IAClB,MAAM,YAAY,IAAI,IAAI,OAAO;AACjC,cAAU,OAAO,GAAG;AAEpB,WAAO;;AAGT,UAAO;IACP;GACF;CAEF,MAAM,wBAAwB,UAAU,OAAY;EAClD,MAAM,QAAQ,cAAc,IAAI,GAAG;AAEnC,MAAI,SAAS,KACX;AAGF,MAAI,OAAO,uCAAuC,MAChD,UAAS,SAAS,cAChB,IAAI,YAAY,oBAAoB,EAAE,QAAQ,OAAO,CAAC,CACvD;GAEH;CAEF,MAAM,uBAAuB,UAC1B,aAA+D;EAC9D,MAAM,YAAY,MAAM,SAAU,EAAmB,OAAO;EAE5D,MAAM,cACJ,SAAS,SAAS,oBAAoB,oBAAoB,SAAS;AAErE,YAAU,QAAQ,KAAK,MAAM;AAC7B,WAAS,SAAS,iBAAiB,oBAAoB,SAAS;AAEhE,SAAO;GAEV;AAED,uBAAsB,UAAU,QAAQ,SAAS,OAAO,IAAI,CAAC,EAAE,EAAE,CAAC;AASlE,QAAO;EACL,KARU,eACH;GAAE,QAAQ;GAAU,QAAQ;GAAa,QAAQ;GAAa,GAGrE,EAAE,CACH;EAIC,eAAe,cAAc,CAAC,GAAG,cAAc,QAAQ,CAAC,EAAE,CAAC,cAAc,CAAC;EAC1E;EACA;EACD"}

package/dist/components/overlays/NewNotifications/NotificationsList/NotificationsList.d.ts

@@ -0,0 +1,28 @@
+
+import { CubeNotificationProps } from "../types.js";
+import { NotificationsListProps } from "./types.js";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/overlays/NewNotifications/NotificationsList/NotificationsList.d.ts
+/**
+ * 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>
+ */
+declare function NotificationsList<T extends object>(props: NotificationsListProps<T>): react_jsx_runtime0.JSX.Element;
+declare namespace NotificationsList {
+  var Item: (props: Omit<CubeNotificationProps, "onDismiss">) => null;
+}
+//#endregion
+export { NotificationsList };
+//# sourceMappingURL=NotificationsList.d.ts.map

package/dist/components/overlays/NewNotifications/NotificationsList/NotificationsList.js

@@ -0,0 +1,54 @@
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4d9db65 | 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

package/dist/components/overlays/NewNotifications/NotificationsList/NotificationsList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationsList.js","names":[],"sources":["../../../../../src/components/overlays/NewNotifications/NotificationsList/NotificationsList.tsx"],"sourcesContent":["import { useRef } from 'react';\nimport { Item } from 'react-stately';\n\nimport { tasty } from '../../../../tasty';\nimport { useNotificationsList } from '../hooks';\n\nimport { NotificationListItem } from './NotificationsListItem';\n\nimport type { CubeNotificationProps } from '../types';\nimport type { NotificationsListProps } from './types';\n\nconst NotificationListContainer = tasty({\n  qa: 'NotificationsList',\n  styles: { boxSizing: 'border-box', width: '100%' },\n});\n\n/**\n * Provides ability to show notifications as a list.\n *\n * @example\n *   <NotificationsList>\n *     <NotificationsList.Item key=\"id_1\" type=\"success\" description=\"Edit and test your schema without affecting the production.\" />\n *     <NotificationsList.Item key=\"id_2\" type=\"attention\" description=\"Edit and test your schema without affecting the production.\" />\n *     <NotificationsList.Item key=\"id_3\" type=\"danger\" description=\"Edit and test your schema without affecting the production.\" />\n *   </NotificationsList>\n *\n * @example Removing a notification\n *   <NotificationsList onDismiss={(id) => removeNotification(id)}>\n *     <NotificationsList.Item key=\"id_1\" type=\"success\" description=\"Edit and test your schema without affecting the production.\" />\n *   </NotificationsList>\n */\nexport function NotificationsList<T extends object>(\n  props: NotificationsListProps<T>,\n) {\n  const { items, children, onDismiss } = props;\n\n  const ref = useRef<HTMLDivElement | null>(null);\n\n  const { state, listProps } = useNotificationsList({\n    items,\n    children,\n    ref,\n  });\n\n  return (\n    <NotificationListContainer ref={ref} {...listProps}>\n      {[...state.collection].map((item) => (\n        <NotificationListItem\n          key={item.key}\n          item={item}\n          state={state}\n          onDismiss={onDismiss}\n        />\n      ))}\n    </NotificationListContainer>\n  );\n}\n\nNotificationsList.Item = Item as unknown as (\n  props: Omit<CubeNotificationProps, 'onDismiss'>,\n) => null;\n"],"mappings":";;;;;;;;;AAWA,MAAM,4BAA4B,MAAM;CACtC,IAAI;CACJ,QAAQ;EAAE,WAAW;EAAc,OAAO;EAAQ;CACnD,CAAC;;;;;;;;;;;;;;;;AAiBF,SAAgB,kBACd,OACA;CACA,MAAM,EAAE,OAAO,UAAU,cAAc;CAEvC,MAAM,MAAM,OAA8B,KAAK;CAE/C,MAAM,EAAE,OAAO,cAAc,qBAAqB;EAChD;EACA;EACA;EACD,CAAC;AAEF,QACE,oBAAC;EAA+B;EAAK,GAAI;YACtC,CAAC,GAAG,MAAM,WAAW,CAAC,KAAK,SAC1B,oBAAC;GAEO;GACC;GACI;KAHN,KAAK,IAIV,CACF;GACwB;;AAIhC,kBAAkB,OAAO"}

package/dist/components/overlays/NewNotifications/NotificationsList/NotificationsListItem.js

@@ -0,0 +1,38 @@
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4d9db65 | Cube Dev Team */
+import { tasty } from "../../../../tasty/tasty.js";
+import { useEvent } from "../../../../_internal/hooks/use-event.js";
+import { useNotificationListItem } from "../hooks/use-notification-list-item.js";
+import { NotificationView } from "../NotificationView/NotificationView.js";
+import { useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/overlays/NewNotifications/NotificationsList/NotificationsListItem.tsx
+const NotificationListItemWrap = tasty({ styles: { borderBottom: {
+	"": "1bw solid #border",
+	":last-child": "none"
+} } });
+/**
+* @internal This component is not intended to be used
+*/
+function NotificationListItem(props) {
+	const { item, state, onDismiss } = props;
+	const { key, props: notificationProps } = item;
+	const ref = useRef(null);
+	const onDismissEvent = useEvent(() => onDismiss?.(key));
+	const { itemProps } = useNotificationListItem({
+		ref,
+		key,
+		state
+	});
+	return /* @__PURE__ */ jsx(NotificationListItemWrap, { children: /* @__PURE__ */ jsx(NotificationView, {
+		ref,
+		attributes: itemProps,
+		...notificationProps,
+		isDismissible: !!onDismiss,
+		onDismiss: onDismissEvent
+	}) });
+}
+
+//#endregion
+export { NotificationListItem };
+//# sourceMappingURL=NotificationsListItem.js.map

package/dist/components/overlays/NewNotifications/NotificationsList/NotificationsListItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationsListItem.js","names":[],"sources":["../../../../../src/components/overlays/NewNotifications/NotificationsList/NotificationsListItem.tsx"],"sourcesContent":["import { useRef } from 'react';\n\nimport { useEvent } from '../../../../_internal';\nimport { tasty } from '../../../../tasty';\nimport { useNotificationListItem } from '../hooks';\nimport { NotificationView } from '../NotificationView';\n\nimport { NotificationListItemProps } from './types';\n\nconst NotificationListItemWrap = tasty({\n  styles: { borderBottom: { '': '1bw solid #border', ':last-child': 'none' } },\n});\n\n/**\n * @internal This component is not intended to be used\n */\nexport function NotificationListItem(props: NotificationListItemProps) {\n  const { item, state, onDismiss } = props;\n  const { key, props: notificationProps } = item;\n\n  const ref = useRef<HTMLDivElement>(null);\n\n  const onDismissEvent = useEvent(() => onDismiss?.(key));\n\n  const { itemProps } = useNotificationListItem({ ref, key, state });\n\n  return (\n    <NotificationListItemWrap>\n      <NotificationView\n        ref={ref}\n        attributes={itemProps}\n        {...notificationProps}\n        isDismissible={!!onDismiss}\n        onDismiss={onDismissEvent}\n      />\n    </NotificationListItemWrap>\n  );\n}\n"],"mappings":";;;;;;;;;AASA,MAAM,2BAA2B,MAAM,EACrC,QAAQ,EAAE,cAAc;CAAE,IAAI;CAAqB,eAAe;CAAQ,EAAE,EAC7E,CAAC;;;;AAKF,SAAgB,qBAAqB,OAAkC;CACrE,MAAM,EAAE,MAAM,OAAO,cAAc;CACnC,MAAM,EAAE,KAAK,OAAO,sBAAsB;CAE1C,MAAM,MAAM,OAAuB,KAAK;CAExC,MAAM,iBAAiB,eAAe,YAAY,IAAI,CAAC;CAEvD,MAAM,EAAE,cAAc,wBAAwB;EAAE;EAAK;EAAK;EAAO,CAAC;AAElE,QACE,oBAAC,sCACC,oBAAC;EACM;EACL,YAAY;EACZ,GAAI;EACJ,eAAe,CAAC,CAAC;EACjB,WAAW;GACX,GACuB"}

package/dist/components/overlays/NewNotifications/NotificationsList/index.d.ts

@@ -0,0 +1,3 @@
+
+import { NotificationsListProps } from "./types.js";
+import { NotificationsList } from "./NotificationsList.js";

package/dist/components/overlays/NewNotifications/NotificationsList/types.d.ts

@@ -0,0 +1,24 @@
+
+import { CubeNotificationProps } from "../types.js";
+import { CollectionChildren } from "../hooks/types.js";
+import "../hooks/index.js";
+import { Key } from "react";
+import { CollectionElement } from "@react-types/shared";
+
+//#region src/components/overlays/NewNotifications/NotificationsList/types.d.ts
+type NotificationsListProps<T> = {
+  onDismiss?: (id: Key) => void;
+  items?: T[] | readonly T[];
+  children: CollectionChildren<T>;
+} & (NotificationsListFactory<T> | NotificationsListStatic);
+type NotificationsListFactory<T> = {
+  items: T[] | readonly T[];
+  children: (item: T) => CollectionElement<CubeNotificationProps>;
+};
+type NotificationsListStatic = {
+  items?: 'You must either use factory or static children';
+  children: CollectionElement<CubeNotificationProps> | CollectionElement<CubeNotificationProps>[];
+};
+//#endregion
+export { NotificationsListProps };
+//# sourceMappingURL=types.d.ts.map

package/dist/components/overlays/NewNotifications/hooks/index.d.ts

@@ -0,0 +1,6 @@
+
+import { CollectionChildren, NotificationItemNode, NotificationsListState } from "./types.js";
+import { UseNotificationsListPropsType, UseNotificationsListReturnType, useNotificationsList } from "./use-notifications-list.js";
+import { UseNotificationListItemPropsType, useNotificationListItem } from "./use-notification-list-item.js";
+import { useNotificationsApi } from "./use-notifications-api.js";
+import { useNotificationsObserver } from "./use-notifications-observer.js";

package/dist/components/overlays/NewNotifications/hooks/types.d.ts

@@ -0,0 +1,16 @@
+
+import { CubeNotificationProps } from "../types.js";
+import { ListState } from "react-stately";
+import { Collection, CollectionElement, Node } from "@react-types/shared";
+
+//#region src/components/overlays/NewNotifications/hooks/types.d.ts
+type CollectionChildren<T, R = T> = CollectionElement<R> | CollectionElement<R>[] | ((item: T) => CollectionElement<R>);
+type NotificationItemNode<T> = Omit<Node<CubeNotificationProps>, 'props'> & {
+  props: T;
+};
+type NotificationsListState<T> = Omit<ListState<T>, 'collection'> & {
+  collection: Collection<NotificationItemNode<T>>;
+};
+//#endregion
+export { CollectionChildren, NotificationItemNode, NotificationsListState };
+//# sourceMappingURL=types.d.ts.map

package/dist/components/overlays/NewNotifications/hooks/use-notification-list-item.d.ts

@@ -0,0 +1,15 @@
+
+import { Key, MutableRefObject } from "react";
+import { ListState } from "react-stately";
+import { SelectableItemAria } from "@react-aria/selection";
+
+//#region src/components/overlays/NewNotifications/hooks/use-notification-list-item.d.ts
+type UseNotificationListItemPropsType<T extends object> = {
+  key: Key;
+  ref: MutableRefObject<HTMLElement | null>;
+  state: ListState<T>;
+};
+declare function useNotificationListItem<T extends object>(props: UseNotificationListItemPropsType<T>): SelectableItemAria;
+//#endregion
+export { UseNotificationListItemPropsType, useNotificationListItem };
+//# sourceMappingURL=use-notification-list-item.d.ts.map

package/dist/components/overlays/NewNotifications/hooks/use-notification-list-item.js

@@ -0,0 +1,16 @@
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4d9db65 | Cube Dev Team */
+import { useSelectableItem } from "@react-aria/selection";
+
+//#region src/components/overlays/NewNotifications/hooks/use-notification-list-item.ts
+function useNotificationListItem(props) {
+	const { ref, key, state: { selectionManager } } = props;
+	return useSelectableItem({
+		ref,
+		key,
+		selectionManager
+	});
+}
+
+//#endregion
+export { useNotificationListItem };
+//# sourceMappingURL=use-notification-list-item.js.map

package/dist/components/overlays/NewNotifications/hooks/use-notification-list-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-notification-list-item.js","names":[],"sources":["../../../../../src/components/overlays/NewNotifications/hooks/use-notification-list-item.ts"],"sourcesContent":["import { SelectableItemAria, useSelectableItem } from '@react-aria/selection';\n\nimport type { Key, MutableRefObject } from 'react';\nimport type { ListState } from 'react-stately';\n\nexport type UseNotificationListItemPropsType<T extends object> = {\n  key: Key;\n  ref: MutableRefObject<HTMLElement | null>;\n  state: ListState<T>;\n};\n\nexport function useNotificationListItem<T extends object>(\n  props: UseNotificationListItemPropsType<T>,\n): SelectableItemAria {\n  const {\n    ref,\n    key,\n    state: { selectionManager },\n  } = props;\n\n  // @ts-ignore\n  return useSelectableItem({ ref, key, selectionManager });\n}\n"],"mappings":";;;;AAWA,SAAgB,wBACd,OACoB;CACpB,MAAM,EACJ,KACA,KACA,OAAO,EAAE,uBACP;AAGJ,QAAO,kBAAkB;EAAE;EAAK;EAAK;EAAkB,CAAC"}

package/dist/components/overlays/NewNotifications/hooks/use-notifications-api.d.ts

@@ -0,0 +1,9 @@
+
+import { CubeNotificationsApi } from "../types.js";
+import "../index.js";
+
+//#region src/components/overlays/NewNotifications/hooks/use-notifications-api.d.ts
+declare function useNotificationsApi(): CubeNotificationsApi;
+//#endregion
+export { useNotificationsApi };
+//# sourceMappingURL=use-notifications-api.d.ts.map

package/dist/components/overlays/NewNotifications/hooks/use-notifications-api.js

@@ -0,0 +1,15 @@
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4d9db65 | Cube Dev Team */
+import { NotificationsContext } from "../NotificationsContext/NotificationsContext.js";
+import { useContext } from "react";
+import invariant from "tiny-invariant";
+
+//#region src/components/overlays/NewNotifications/hooks/use-notifications-api.ts
+function useNotificationsApi() {
+	const context = useContext(NotificationsContext);
+	invariant(context !== null, "You can't use Notifications outside of the <Root /> component. Please, check if your component is descendant of <Root/> component");
+	return context.api;
+}
+
+//#endregion
+export { useNotificationsApi };
+//# sourceMappingURL=use-notifications-api.js.map

package/dist/components/overlays/NewNotifications/hooks/use-notifications-api.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-notifications-api.js","names":[],"sources":["../../../../../src/components/overlays/NewNotifications/hooks/use-notifications-api.ts"],"sourcesContent":["import { useContext } from 'react';\nimport invariant from 'tiny-invariant';\n\nimport { NotificationsContext } from '../NotificationsContext';\n\nexport function useNotificationsApi() {\n  const context = useContext(NotificationsContext);\n\n  invariant(\n    context !== null,\n    \"You can't use Notifications outside of the <Root /> component. Please, check if your component is descendant of <Root/> component\",\n  );\n\n  return context.api;\n}\n"],"mappings":";;;;;;AAKA,SAAgB,sBAAsB;CACpC,MAAM,UAAU,WAAW,qBAAqB;AAEhD,WACE,YAAY,MACZ,oIACD;AAED,QAAO,QAAQ"}

package/dist/components/overlays/NewNotifications/hooks/use-notifications-list.d.ts

@@ -0,0 +1,18 @@
+
+import { CollectionChildren, NotificationsListState } from "./types.js";
+import { HTMLAttributes, MutableRefObject } from "react";
+
+//#region src/components/overlays/NewNotifications/hooks/use-notifications-list.d.ts
+type UseNotificationsListPropsType<T, R> = {
+  items?: Iterable<T>;
+  children: CollectionChildren<T, R>;
+  ref: MutableRefObject<HTMLElement | null>;
+};
+type UseNotificationsListReturnType<R> = {
+  listProps: HTMLAttributes<HTMLElement>;
+  state: NotificationsListState<R>;
+};
+declare function useNotificationsList<T extends object, R>(props: UseNotificationsListPropsType<T, R>): UseNotificationsListReturnType<R>;
+//#endregion
+export { UseNotificationsListPropsType, UseNotificationsListReturnType, useNotificationsList };
+//# sourceMappingURL=use-notifications-list.d.ts.map