@alfalab/core-components-notification-manager 7.0.4-alfasans → 7.0.5

package/component.d.ts

@@ -1,7 +1,7 @@
 import React, { type HTMLAttributes } from 'react';
 import { type PortalProps } from '@alfalab/core-components-portal';
 import { type NotificationElement } from './components';
-export type NotificationManagerProps = HTMLAttributes<HTMLDivElement> & {
+export interface NotificationManagerProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Массив нотификаций.
      * В нотификации обязательно передавайте id.
@@ -33,37 +33,5 @@ export type NotificationManagerProps = HTMLAttributes<HTMLDivElement> & {
      * Контейнер к которому будут добавляться порталы
      */
     container?: PortalProps['getPortalContainer'];
-};
-export declare const NotificationManager: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
-    /**
-     * Массив нотификаций.
-     * В нотификации обязательно передавайте id.
-     */
-    notifications: NotificationElement[];
-    /**
-     * Дополнительный класс (native prop)
-     */
-    className?: string;
-    /**
-     * Идентификатор для систем автоматизированного тестирования
-     */
-    dataTestId?: string;
-    /**
-     * z-index компонента
-     */
-    zIndex?: number;
-    /**
-     * Отступ от верхнего края
-     */
-    offset?: number;
-    /**
-     * Удаление нотификации
-     */
-    onRemoveNotification: (id: string) => void;
-    /**
-     * Нода, компонент или функция возвращающая их
-     *
-     * Контейнер к которому будут добавляться порталы
-     */
-    container?: PortalProps["getPortalContainer"];
-} & React.RefAttributes<HTMLDivElement>>;
+}
+export declare const NotificationManager: React.ForwardRefExoticComponent<NotificationManagerProps & React.RefAttributes<HTMLDivElement>>;

package/component.js

@@ -17,25 +17,15 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var CSS_TRANSITION_CLASS_NAMES = {
-    enter: index_module.enter,
-    enterActive: index_module.enterActive,
-};
-var TIMEOUT = {
-    exit: 0,
-    enter: 400,
-};
 var NotificationManager = React.forwardRef(function (_a, ref) {
     var notifications = _a.notifications, className = _a.className, dataTestId = _a.dataTestId, _b = _a.zIndex, zIndex = _b === void 0 ? coreComponentsStackContext.stackingOrder.TOAST : _b, _c = _a.style, style = _c === void 0 ? {} : _c, offset = _a.offset, onRemoveNotification = _a.onRemoveNotification, container = _a.container, restProps = tslib.__rest(_a, ["notifications", "className", "dataTestId", "zIndex", "style", "offset", "onRemoveNotification", "container"]);
-    var nodeRef = React.useRef(null);
     return (React__default.default.createElement(coreComponentsStack.Stack, { value: zIndex }, function (computedZIndex) { return (React__default.default.createElement(coreComponentsPortal.Portal, { getPortalContainer: container },
         React__default.default.createElement("div", tslib.__assign({ className: cn__default.default(index_module.component, className), ref: ref, "data-test-id": dataTestId, style: tslib.__assign({ zIndex: computedZIndex, top: offset }, style) }, restProps),
             React__default.default.createElement(reactTransitionGroup.TransitionGroup, null, notifications.map(function (element, index) {
                 var _a;
-                return (React__default.default.createElement(reactTransitionGroup.CSSTransition, { key: element.props.id, timeout: TIMEOUT, classNames: CSS_TRANSITION_CLASS_NAMES, unmountOnExit: true, nodeRef: nodeRef },
-                    React__default.default.createElement(component.Notification, { containerRef: nodeRef, element: element, className: cn__default.default(index_module.notification, (_a = {},
-                            _a[index_module.withoutMargin] = offset && index === 0,
-                            _a)), onRemoveNotification: onRemoveNotification })));
+                return (React__default.default.createElement(component.Notification, { key: element.props.id, element: element, onRemoveNotification: onRemoveNotification, className: cn__default.default(index_module.notification, (_a = {},
+                        _a[index_module.withoutMargin] = offset && index === 0,
+                        _a)) }));
             }))))); }));
 });
 NotificationManager.displayName = 'NotificationManager';

package/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["src/component.tsx"],"sourcesContent":["import React, { forwardRef, type HTMLAttributes, useRef } from 'react';\nimport { CSSTransition, TransitionGroup } from 'react-transition-group';\nimport cn from 'classnames';\n\nimport { Portal, type PortalProps } from '@alfalab/core-components-portal';\nimport { Stack } from '@alfalab/core-components-stack';\nimport { stackingOrder } from '@alfalab/core-components-stack-context';\n\nimport { Notification, type NotificationElement } from './components';\n\nimport styles from './index.module.css';\n\nexport type NotificationManagerProps = HTMLAttributes<HTMLDivElement> & {\n    /**\n     * Массив нотификаций.\n     * В нотификации обязательно передавайте id.\n     */\n    notifications: NotificationElement[];\n\n    /**\n     * Дополнительный класс (native prop)\n     */\n    className?: string;\n\n    /**\n     * Идентификатор для систем автоматизированного тестирования\n     */\n    dataTestId?: string;\n\n    /**\n     * z-index компонента\n     */\n    zIndex?: number;\n\n    /**\n     * Отступ от верхнего края\n     */\n    offset?: number;\n\n    /**\n     * Удаление нотификации\n     */\n    onRemoveNotification: (id: string) => void;\n\n    /**\n     * Нода, компонент или функция возвращающая их\n     *\n     * Контейнер к которому будут добавляться порталы\n     */\n    container?: PortalProps['getPortalContainer'];\n};\n\nconst CSS_TRANSITION_CLASS_NAMES = {\n    enter: styles.enter,\n    enterActive: styles.enterActive,\n};\n\nconst TIMEOUT = {\n    exit: 0,\n    enter: 400,\n};\n\nexport const NotificationManager = forwardRef<HTMLDivElement, NotificationManagerProps>(\n    (\n        {\n            notifications,\n            className,\n            dataTestId,\n            zIndex = stackingOrder.TOAST,\n            style = {},\n            offset,\n            onRemoveNotification,\n            container,\n            ...restProps\n        },\n        ref,\n    ) => {\n        const nodeRef = useRef<HTMLDivElement>(null);\n\n        return (\n            <Stack value={zIndex}>\n                {(computedZIndex) => (\n                    <Portal getPortalContainer={container}>\n                        <div\n                            className={cn(styles.component, className)}\n                            ref={ref}\n                            data-test-id={dataTestId}\n                            style={{\n                                zIndex: computedZIndex,\n                                top: offset,\n                                ...style,\n                            }}\n                            {...restProps}\n                        >\n                            <TransitionGroup>\n                                {notifications.map((element, index) => (\n                                    <CSSTransition\n                                        key={element.props.id}\n                                        timeout={TIMEOUT}\n                                        classNames={CSS_TRANSITION_CLASS_NAMES}\n                                        unmountOnExit={true}\n                                        nodeRef={nodeRef}\n                                    >\n                                        <Notification\n                                            containerRef={nodeRef}\n                                            element={element}\n                                            className={cn(styles.notification, {\n                                                [styles.withoutMargin]: offset && index === 0,\n                                            })}\n                                            onRemoveNotification={onRemoveNotification}\n                                        />\n                                    </CSSTransition>\n                                ))}\n                            </TransitionGroup>\n                        </div>\n                    </Portal>\n                )}\n            </Stack>\n        );\n    },\n);\n\nNotificationManager.displayName = 'NotificationManager';\n"],"names":["styles","forwardRef","stackingOrder","__rest","useRef","React","Stack","Portal","__assign","cn","TransitionGroup","CSSTransition","Notification"],"mappings":";;;;;;;;;;;;;;;;;;;AAoDA,IAAM,0BAA0B,GAAG;IAC/B,KAAK,EAAEA,YAAM,CAAC,KAAK;IACnB,WAAW,EAAEA,YAAM,CAAC,WAAW;CAClC;AAED,IAAM,OAAO,GAAG;AACZ,IAAA,IAAI,EAAE,CAAC;AACP,IAAA,KAAK,EAAE,GAAG;CACb;IAEY,mBAAmB,GAAGC,gBAAU,CACzC,UACI,EAUC,EACD,GAAG,EAAA;AAVC,IAAA,IAAA,aAAa,GAAA,EAAA,CAAA,aAAA,EACb,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,EAAA,GAAA,EAAA,CAAA,MAA4B,EAA5B,MAAM,GAAA,EAAA,KAAA,MAAA,GAAGC,wCAAa,CAAC,KAAK,GAAA,EAAA,EAC5B,EAAU,GAAA,EAAA,CAAA,KAAA,EAAV,KAAK,GAAG,EAAA,KAAA,MAAA,GAAA,EAAE,GAAA,EAAA,EACV,MAAM,GAAA,EAAA,CAAA,MAAA,EACN,oBAAoB,GAAA,EAAA,CAAA,oBAAA,EACpB,SAAS,GAAA,EAAA,CAAA,SAAA,EACN,SAAS,GAAAC,YAAA,CAAA,EAAA,EAThB,8GAUC,CADe;AAIhB,IAAA,IAAM,OAAO,GAAGC,YAAM,CAAiB,IAAI,CAAC;AAE5C,IAAA,QACIC,sBAAC,CAAA,aAAA,CAAAC,yBAAK,IAAC,KAAK,EAAE,MAAM,EACf,EAAA,UAAC,cAAc,EAAA,EAAK,QACjBD,sBAAA,CAAA,aAAA,CAACE,2BAAM,EAAC,EAAA,kBAAkB,EAAE,SAAS,EAAA;AACjC,QAAAF,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAAG,cAAA,CAAA,EACI,SAAS,EAAEC,mBAAE,CAACT,YAAM,CAAC,SAAS,EAAE,SAAS,CAAC,EAC1C,GAAG,EAAE,GAAG,EACM,cAAA,EAAA,UAAU,EACxB,KAAK,EACDQ,cAAA,CAAA,EAAA,MAAM,EAAE,cAAc,EACtB,GAAG,EAAE,MAAM,EACR,EAAA,KAAK,KAER,SAAS,CAAA;YAEbH,sBAAC,CAAA,aAAA,CAAAK,oCAAe,QACX,aAAa,CAAC,GAAG,CAAC,UAAC,OAAO,EAAE,KAAK,EAAA;;gBAAK,QACnCL,sBAAC,CAAA,aAAA,CAAAM,kCAAa,EACV,EAAA,GAAG,EAAE,OAAO,CAAC,KAAK,CAAC,EAAE,EACrB,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,0BAA0B,EACtC,aAAa,EAAE,IAAI,EACnB,OAAO,EAAE,OAAO,EAAA;AAEhB,oBAAAN,sBAAA,CAAA,aAAA,CAACO,sBAAY,EACT,EAAA,YAAY,EAAE,OAAO,EACrB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAEH,mBAAE,CAACT,YAAM,CAAC,YAAY,GAAA,EAAA,GAAA,EAAA;4BAC7B,EAAC,CAAAA,YAAM,CAAC,aAAa,CAAA,GAAG,MAAM,IAAI,KAAK,KAAK,CAAC;AAC/C,4BAAA,EAAA,EAAA,EACF,oBAAoB,EAAE,oBAAoB,EAAA,CAC5C,CACU;aACnB,CAAC,CACY,CAChB,CACD,EAlCQ,EAmCpB,CACG;AAEhB,CAAC;AAGL,mBAAmB,CAAC,WAAW,GAAG,qBAAqB;;;;"}
+{"version":3,"file":"component.js","sources":["src/component.tsx"],"sourcesContent":["import React, { forwardRef, type HTMLAttributes } from 'react';\nimport { TransitionGroup } from 'react-transition-group';\nimport cn from 'classnames';\n\nimport { Portal, type PortalProps } from '@alfalab/core-components-portal';\nimport { Stack } from '@alfalab/core-components-stack';\nimport { stackingOrder } from '@alfalab/core-components-stack-context';\n\nimport { Notification, type NotificationElement } from './components';\n\nimport styles from './index.module.css';\n\nexport interface NotificationManagerProps extends HTMLAttributes<HTMLDivElement> {\n    /**\n     * Массив нотификаций.\n     * В нотификации обязательно передавайте id.\n     */\n    notifications: NotificationElement[];\n\n    /**\n     * Дополнительный класс (native prop)\n     */\n    className?: string;\n\n    /**\n     * Идентификатор для систем автоматизированного тестирования\n     */\n    dataTestId?: string;\n\n    /**\n     * z-index компонента\n     */\n    zIndex?: number;\n\n    /**\n     * Отступ от верхнего края\n     */\n    offset?: number;\n\n    /**\n     * Удаление нотификации\n     */\n    onRemoveNotification: (id: string) => void;\n\n    /**\n     * Нода, компонент или функция возвращающая их\n     *\n     * Контейнер к которому будут добавляться порталы\n     */\n    container?: PortalProps['getPortalContainer'];\n}\n\nexport const NotificationManager = forwardRef<HTMLDivElement, NotificationManagerProps>(\n    (\n        {\n            notifications,\n            className,\n            dataTestId,\n            zIndex = stackingOrder.TOAST,\n            style = {},\n            offset,\n            onRemoveNotification,\n            container,\n            ...restProps\n        },\n        ref,\n    ) => (\n        <Stack value={zIndex}>\n            {(computedZIndex) => (\n                <Portal getPortalContainer={container}>\n                    <div\n                        className={cn(styles.component, className)}\n                        ref={ref}\n                        data-test-id={dataTestId}\n                        style={{\n                            zIndex: computedZIndex,\n                            top: offset,\n                            ...style,\n                        }}\n                        {...restProps}\n                    >\n                        <TransitionGroup>\n                            {notifications.map((element, index) => (\n                                <Notification\n                                    key={element.props.id}\n                                    element={element}\n                                    onRemoveNotification={onRemoveNotification}\n                                    className={cn(styles.notification, {\n                                        [styles.withoutMargin]: offset && index === 0,\n                                    })}\n                                />\n                            ))}\n                        </TransitionGroup>\n                    </div>\n                </Portal>\n            )}\n        </Stack>\n    ),\n);\n\nNotificationManager.displayName = 'NotificationManager';\n"],"names":["forwardRef","stackingOrder","__rest","React","Stack","Portal","__assign","cn","styles","TransitionGroup","Notification"],"mappings":";;;;;;;;;;;;;;;;;;;IAoDa,mBAAmB,GAAGA,gBAAU,CACzC,UACI,EAUC,EACD,GAAG,EAAA;AAVC,IAAA,IAAA,aAAa,GAAA,EAAA,CAAA,aAAA,EACb,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,EAAA,GAAA,EAAA,CAAA,MAA4B,EAA5B,MAAM,GAAA,EAAA,KAAA,MAAA,GAAGC,wCAAa,CAAC,KAAK,GAAA,EAAA,EAC5B,EAAU,GAAA,EAAA,CAAA,KAAA,EAAV,KAAK,GAAG,EAAA,KAAA,MAAA,GAAA,EAAE,GAAA,EAAA,EACV,MAAM,GAAA,EAAA,CAAA,MAAA,EACN,oBAAoB,GAAA,EAAA,CAAA,oBAAA,EACpB,SAAS,GAAA,EAAA,CAAA,SAAA,EACN,SAAS,GAAAC,YAAA,CAAA,EAAA,EAThB,8GAUC,CADe;AAGf,IAAA,QACDC,sBAAC,CAAA,aAAA,CAAAC,yBAAK,IAAC,KAAK,EAAE,MAAM,EACf,EAAA,UAAC,cAAc,EAAA,EAAK,QACjBD,sBAAA,CAAA,aAAA,CAACE,2BAAM,EAAC,EAAA,kBAAkB,EAAE,SAAS,EAAA;AACjC,QAAAF,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAAG,cAAA,CAAA,EACI,SAAS,EAAEC,mBAAE,CAACC,YAAM,CAAC,SAAS,EAAE,SAAS,CAAC,EAC1C,GAAG,EAAE,GAAG,EACM,cAAA,EAAA,UAAU,EACxB,KAAK,EACDF,cAAA,CAAA,EAAA,MAAM,EAAE,cAAc,EACtB,GAAG,EAAE,MAAM,EACR,EAAA,KAAK,KAER,SAAS,CAAA;YAEbH,sBAAC,CAAA,aAAA,CAAAM,oCAAe,QACX,aAAa,CAAC,GAAG,CAAC,UAAC,OAAO,EAAE,KAAK,EAAA;;gBAAK,QACnCN,sBAAC,CAAA,aAAA,CAAAO,sBAAY,EACT,EAAA,GAAG,EAAE,OAAO,CAAC,KAAK,CAAC,EAAE,EACrB,OAAO,EAAE,OAAO,EAChB,oBAAoB,EAAE,oBAAoB,EAC1C,SAAS,EAAEH,mBAAE,CAACC,YAAM,CAAC,YAAY,GAAA,EAAA,GAAA,EAAA;wBAC7B,EAAC,CAAAA,YAAM,CAAC,aAAa,CAAA,GAAG,MAAM,IAAI,KAAK,KAAK,CAAC;AAC/C,wBAAA,EAAA,EAAA,EAAA,CACJ;aACL,CAAC,CACY,CAChB,CACD,EA1BQ,EA2BpB,CACG;AACX,CAAA;AAGL,mBAAmB,CAAC,WAAW,GAAG,qBAAqB;;;;"}

package/components/notification/component.d.ts

@@ -1,13 +1,14 @@
-import { type FC, type ReactElement, type RefObject } from 'react';
+import { type FC, type ReactElement } from 'react';
+import { type CSSTransitionProps } from 'react-transition-group/CSSTransition';
 import { type NotificationProps as CoreNotificationProps } from '@alfalab/core-components-notification';
 export type NotificationElement = ReactElement<CoreNotificationProps & {
     id: string;
 }>;
-type NotificationProps = {
+type NotificationTransitionProps = Partial<Pick<CSSTransitionProps<HTMLDivElement>, 'in' | 'onExited' | 'appear' | 'enter' | 'exit'>>;
+interface NotificationProps extends NotificationTransitionProps {
     element: NotificationElement;
     className: string;
     onRemoveNotification: (id: string) => void;
-    containerRef: RefObject<HTMLDivElement>;
-};
+}
 export declare const Notification: FC<NotificationProps>;
 export {};

package/components/notification/component.js

@@ -4,14 +4,26 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var React = require('react');
+var reactTransitionGroup = require('react-transition-group');
 var cn = require('classnames');
+var index_module = require('./index.module.css.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
+var TIMEOUT = {
+    exit: 0,
+    enter: 400,
+};
+var CSS_TRANSITION_CLASS_NAMES = {
+    enter: index_module.enter,
+    enterActive: index_module.enterActive,
+};
 var Notification = function (_a) {
-    var element = _a.element, className = _a.className, onRemoveNotification = _a.onRemoveNotification, containerRef = _a.containerRef;
+    var inProp = _a.in, onExited = _a.onExited, appear = _a.appear, enter = _a.enter, exit = _a.exit, element = _a.element, className = _a.className, onRemoveNotification = _a.onRemoveNotification;
+    var nodeRef = React.useRef(null);
     var _b = element.props, onClose = _b.onClose, onCloseTimeout = _b.onCloseTimeout;
     var handleClose = React.useCallback(function () {
         if (onClose) {
@@ -25,10 +37,10 @@ var Notification = function (_a) {
         }
         onRemoveNotification(element.props.id);
     }, [element.props.id, onCloseTimeout, onRemoveNotification]);
-    var notificationProps = React.useMemo(function () { return (tslib.__assign(tslib.__assign({}, element.props), { visible: true, className: cn__default.default(className, element.props.className), usePortal: false, offset: 0, onClose: handleClose, onCloseTimeout: handleCloseTimeout, containerRef: containerRef })); }, 
+    var notificationProps = React.useMemo(function () { return (tslib.__assign(tslib.__assign({}, element.props), { visible: true, className: cn__default.default(className, element.props.className), usePortal: false, offset: 0, onClose: handleClose, onCloseTimeout: handleCloseTimeout, containerRef: nodeRef })); }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [element, handleClose, handleCloseTimeout, containerRef]);
-    return React.cloneElement(element, notificationProps);
+    [element, handleClose, handleCloseTimeout, className]);
+    return (React__default.default.createElement(reactTransitionGroup.CSSTransition, { in: inProp, onExited: onExited, appear: appear, enter: enter, exit: exit, timeout: TIMEOUT, classNames: CSS_TRANSITION_CLASS_NAMES, unmountOnExit: true, nodeRef: nodeRef }, React.cloneElement(element, notificationProps)));
 };
 
 exports.Notification = Notification;

package/components/notification/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../src/components/notification/component.ts"],"sourcesContent":["import {\n    cloneElement,\n    type FC,\n    type ReactElement,\n    type RefObject,\n    useCallback,\n    useMemo,\n} from 'react';\nimport cn from 'classnames';\n\nimport { type NotificationProps as CoreNotificationProps } from '@alfalab/core-components-notification';\n\nexport type NotificationElement = ReactElement<CoreNotificationProps & { id: string }>;\n\ntype NotificationProps = {\n    element: NotificationElement;\n    className: string;\n    onRemoveNotification: (id: string) => void;\n    containerRef: RefObject<HTMLDivElement>;\n};\n\nexport const Notification: FC<NotificationProps> = ({\n    element,\n    className,\n    onRemoveNotification,\n    containerRef,\n}) => {\n    const { onClose, onCloseTimeout } = element.props;\n\n    const handleClose = useCallback(() => {\n        if (onClose) {\n            onClose();\n        }\n\n        onRemoveNotification(element.props.id);\n    }, [onClose, onRemoveNotification, element.props.id]);\n\n    const handleCloseTimeout = useCallback(() => {\n        if (onCloseTimeout) {\n            onCloseTimeout();\n        }\n\n        onRemoveNotification(element.props.id);\n    }, [element.props.id, onCloseTimeout, onRemoveNotification]);\n\n    const notificationProps = useMemo<CoreNotificationProps>(\n        () => ({\n            ...element.props,\n            visible: true,\n            className: cn(className, element.props.className),\n            usePortal: false,\n            offset: 0,\n            onClose: handleClose,\n            onCloseTimeout: handleCloseTimeout,\n            containerRef,\n        }),\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        [element, handleClose, handleCloseTimeout, containerRef],\n    );\n\n    return cloneElement(element, notificationProps);\n};\n"],"names":["useCallback","useMemo","__assign","cn","cloneElement"],"mappings":";;;;;;;;;;;;AAqBO,IAAM,YAAY,GAA0B,UAAC,EAKnD,EAAA;QAJG,OAAO,GAAA,EAAA,CAAA,OAAA,EACP,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,oBAAoB,GAAA,EAAA,CAAA,oBAAA,EACpB,YAAY,GAAA,EAAA,CAAA,YAAA;IAEN,IAAA,EAAA,GAA8B,OAAO,CAAC,KAAK,EAAzC,OAAO,GAAA,EAAA,CAAA,OAAA,EAAE,cAAc,GAAA,EAAA,CAAA,cAAkB;IAEjD,IAAM,WAAW,GAAGA,iBAAW,CAAC,YAAA;QAC5B,IAAI,OAAO,EAAE;AACT,YAAA,OAAO,EAAE;;AAGb,QAAA,oBAAoB,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;AAC1C,KAAC,EAAE,CAAC,OAAO,EAAE,oBAAoB,EAAE,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IAErD,IAAM,kBAAkB,GAAGA,iBAAW,CAAC,YAAA;QACnC,IAAI,cAAc,EAAE;AAChB,YAAA,cAAc,EAAE;;AAGpB,QAAA,oBAAoB,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;AAC1C,KAAC,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,EAAE,cAAc,EAAE,oBAAoB,CAAC,CAAC;IAE5D,IAAM,iBAAiB,GAAGC,aAAO,CAC7B,cAAM,QAAAC,cAAA,CAAAA,cAAA,CAAA,EAAA,EACC,OAAO,CAAC,KAAK,CAAA,EAAA,EAChB,OAAO,EAAE,IAAI,EACb,SAAS,EAAEC,mBAAE,CAAC,SAAS,EAAE,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,EACjD,SAAS,EAAE,KAAK,EAChB,MAAM,EAAE,CAAC,EACT,OAAO,EAAE,WAAW,EACpB,cAAc,EAAE,kBAAkB,EAClC,YAAY,EAAA,YAAA,EACd,CAAA,EAAA,EAAA;;IAEF,CAAC,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,YAAY,CAAC,CAC3D;AAED,IAAA,OAAOC,kBAAY,CAAC,OAAO,EAAE,iBAAiB,CAAC;AACnD;;;;"}
+{"version":3,"file":"component.js","sources":["../../src/components/notification/component.tsx"],"sourcesContent":["import React, {\n    cloneElement,\n    type FC,\n    type ReactElement,\n    useCallback,\n    useMemo,\n    useRef,\n} from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport { type CSSTransitionProps } from 'react-transition-group/CSSTransition';\nimport cn from 'classnames';\n\nimport { type NotificationProps as CoreNotificationProps } from '@alfalab/core-components-notification';\n\nimport styles from './index.module.css';\n\nexport type NotificationElement = ReactElement<CoreNotificationProps & { id: string }>;\n\nconst TIMEOUT = {\n    exit: 0,\n    enter: 400,\n};\n\nconst CSS_TRANSITION_CLASS_NAMES = {\n    enter: styles.enter,\n    enterActive: styles.enterActive,\n};\n\ntype NotificationTransitionProps = Partial<\n    Pick<CSSTransitionProps<HTMLDivElement>, 'in' | 'onExited' | 'appear' | 'enter' | 'exit'>\n>;\n\ninterface NotificationProps extends NotificationTransitionProps {\n    element: NotificationElement;\n    className: string;\n    onRemoveNotification: (id: string) => void;\n}\n\nexport const Notification: FC<NotificationProps> = ({\n    in: inProp,\n    onExited,\n    appear,\n    enter,\n    exit,\n    element,\n    className,\n    onRemoveNotification,\n}) => {\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const { onClose, onCloseTimeout } = element.props;\n\n    const handleClose = useCallback(() => {\n        if (onClose) {\n            onClose();\n        }\n\n        onRemoveNotification(element.props.id);\n    }, [onClose, onRemoveNotification, element.props.id]);\n\n    const handleCloseTimeout = useCallback(() => {\n        if (onCloseTimeout) {\n            onCloseTimeout();\n        }\n\n        onRemoveNotification(element.props.id);\n    }, [element.props.id, onCloseTimeout, onRemoveNotification]);\n\n    const notificationProps = useMemo<CoreNotificationProps>(\n        () => ({\n            ...element.props,\n            visible: true,\n            className: cn(className, element.props.className),\n            usePortal: false,\n            offset: 0,\n            onClose: handleClose,\n            onCloseTimeout: handleCloseTimeout,\n            containerRef: nodeRef,\n        }),\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        [element, handleClose, handleCloseTimeout, className],\n    );\n\n    return (\n        <CSSTransition<HTMLDivElement>\n            in={inProp}\n            onExited={onExited}\n            appear={appear}\n            enter={enter}\n            exit={exit}\n            timeout={TIMEOUT}\n            classNames={CSS_TRANSITION_CLASS_NAMES}\n            unmountOnExit={true}\n            nodeRef={nodeRef}\n        >\n            {cloneElement(element, notificationProps)}\n        </CSSTransition>\n    );\n};\n"],"names":["styles","useRef","useCallback","useMemo","__assign","cn","React","CSSTransition","cloneElement"],"mappings":";;;;;;;;;;;;;;;AAkBA,IAAM,OAAO,GAAG;AACZ,IAAA,IAAI,EAAE,CAAC;AACP,IAAA,KAAK,EAAE,GAAG;CACb;AAED,IAAM,0BAA0B,GAAG;IAC/B,KAAK,EAAEA,YAAM,CAAC,KAAK;IACnB,WAAW,EAAEA,YAAM,CAAC,WAAW;CAClC;AAYM,IAAM,YAAY,GAA0B,UAAC,EASnD,EAAA;QARO,MAAM,GAAA,EAAA,CAAA,EAAA,EACV,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,MAAM,GAAA,EAAA,CAAA,MAAA,EACN,KAAK,GAAA,EAAA,CAAA,KAAA,EACL,IAAI,GAAA,EAAA,CAAA,IAAA,EACJ,OAAO,GAAA,EAAA,CAAA,OAAA,EACP,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,oBAAoB,GAAA,EAAA,CAAA,oBAAA;AAEpB,IAAA,IAAM,OAAO,GAAGC,YAAM,CAAiB,IAAI,CAAC;IACtC,IAAA,EAAA,GAA8B,OAAO,CAAC,KAAK,EAAzC,OAAO,GAAA,EAAA,CAAA,OAAA,EAAE,cAAc,GAAA,EAAA,CAAA,cAAkB;IAEjD,IAAM,WAAW,GAAGC,iBAAW,CAAC,YAAA;QAC5B,IAAI,OAAO,EAAE;AACT,YAAA,OAAO,EAAE;;AAGb,QAAA,oBAAoB,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;AAC1C,KAAC,EAAE,CAAC,OAAO,EAAE,oBAAoB,EAAE,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IAErD,IAAM,kBAAkB,GAAGA,iBAAW,CAAC,YAAA;QACnC,IAAI,cAAc,EAAE;AAChB,YAAA,cAAc,EAAE;;AAGpB,QAAA,oBAAoB,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;AAC1C,KAAC,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,EAAE,cAAc,EAAE,oBAAoB,CAAC,CAAC;IAE5D,IAAM,iBAAiB,GAAGC,aAAO,CAC7B,cAAM,QAAAC,cAAA,CAAAA,cAAA,CAAA,EAAA,EACC,OAAO,CAAC,KAAK,CAAA,EAAA,EAChB,OAAO,EAAE,IAAI,EACb,SAAS,EAAEC,mBAAE,CAAC,SAAS,EAAE,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,EACjD,SAAS,EAAE,KAAK,EAChB,MAAM,EAAE,CAAC,EACT,OAAO,EAAE,WAAW,EACpB,cAAc,EAAE,kBAAkB,EAClC,YAAY,EAAE,OAAO,EACvB,CAAA,EAAA,EAAA;;IAEF,CAAC,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,SAAS,CAAC,CACxD;IAED,QACIC,qCAACC,kCAAa,EAAA,EACV,EAAE,EAAE,MAAM,EACV,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,0BAA0B,EACtC,aAAa,EAAE,IAAI,EACnB,OAAO,EAAE,OAAO,EAAA,EAEfC,kBAAY,CAAC,OAAO,EAAE,iBAAiB,CAAC,CAC7B;AAExB;;;;"}

package/components/notification/index.css

@@ -0,0 +1,18 @@
+.notification-manager__enter_4ws0s {
+    visibility: hidden;
+    transform: translate(0, -500px);
+}
+.notification-manager__enterActive_4ws0s {
+    visibility: visible;
+    transform: translate(0);
+    transition: transform 0.4s ease-out;
+}
+@media (min-width: 600px) {
+    .notification-manager__enter_4ws0s {
+        transform: translate(100%, 0);
+    }
+
+    .notification-manager__enterActive_4ws0s {
+        transform: translate(0);
+    }
+}

package/components/notification/index.module.css.js

@@ -0,0 +1,8 @@
+'use strict';
+
+require('./index.css');
+
+var styles = {"enter":"notification-manager__enter_4ws0s","enterActive":"notification-manager__enterActive_4ws0s"};
+
+module.exports = styles;
+//# sourceMappingURL=index.module.css.js.map

package/components/notification/index.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.module.css.js","sources":["../../src/components/notification/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.enter {\n    visibility: hidden;\n    transform: translate(0, -500px);\n}\n\n.enterActive {\n    visibility: visible;\n    transform: translate(0);\n    transition: transform 0.4s ease-out;\n}\n\n@media (--tablet-s) {\n    .enter {\n        transform: translate(100%, 0);\n    }\n\n    .enterActive {\n        transform: translate(0);\n    }\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,OAAO,CAAC,mCAAmC,CAAC,aAAa,CAAC,yCAAyC,CAAC;;;;"}

package/cssm/component.d.ts

@@ -1,7 +1,7 @@
 import React, { type HTMLAttributes } from 'react';
 import { type PortalProps } from '@alfalab/core-components-portal/cssm';
 import { type NotificationElement } from './components';
-export type NotificationManagerProps = HTMLAttributes<HTMLDivElement> & {
+export interface NotificationManagerProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Массив нотификаций.
      * В нотификации обязательно передавайте id.
@@ -33,37 +33,5 @@ export type NotificationManagerProps = HTMLAttributes<HTMLDivElement> & {
      * Контейнер к которому будут добавляться порталы
      */
     container?: PortalProps['getPortalContainer'];
-};
-export declare const NotificationManager: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
-    /**
-     * Массив нотификаций.
-     * В нотификации обязательно передавайте id.
-     */
-    notifications: NotificationElement[];
-    /**
-     * Дополнительный класс (native prop)
-     */
-    className?: string;
-    /**
-     * Идентификатор для систем автоматизированного тестирования
-     */
-    dataTestId?: string;
-    /**
-     * z-index компонента
-     */
-    zIndex?: number;
-    /**
-     * Отступ от верхнего края
-     */
-    offset?: number;
-    /**
-     * Удаление нотификации
-     */
-    onRemoveNotification: (id: string) => void;
-    /**
-     * Нода, компонент или функция возвращающая их
-     *
-     * Контейнер к которому будут добавляться порталы
-     */
-    container?: PortalProps["getPortalContainer"];
-} & React.RefAttributes<HTMLDivElement>>;
+}
+export declare const NotificationManager: React.ForwardRefExoticComponent<NotificationManagerProps & React.RefAttributes<HTMLDivElement>>;

package/cssm/component.js

@@ -18,25 +18,15 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
-var CSS_TRANSITION_CLASS_NAMES = {
-    enter: styles__default.default.enter,
-    enterActive: styles__default.default.enterActive,
-};
-var TIMEOUT = {
-    exit: 0,
-    enter: 400,
-};
 var NotificationManager = React.forwardRef(function (_a, ref) {
     var notifications = _a.notifications, className = _a.className, dataTestId = _a.dataTestId, _b = _a.zIndex, zIndex = _b === void 0 ? cssm.stackingOrder.TOAST : _b, _c = _a.style, style = _c === void 0 ? {} : _c, offset = _a.offset, onRemoveNotification = _a.onRemoveNotification, container = _a.container, restProps = tslib.__rest(_a, ["notifications", "className", "dataTestId", "zIndex", "style", "offset", "onRemoveNotification", "container"]);
-    var nodeRef = React.useRef(null);
     return (React__default.default.createElement(cssm$1.Stack, { value: zIndex }, function (computedZIndex) { return (React__default.default.createElement(cssm$2.Portal, { getPortalContainer: container },
         React__default.default.createElement("div", tslib.__assign({ className: cn__default.default(styles__default.default.component, className), ref: ref, "data-test-id": dataTestId, style: tslib.__assign({ zIndex: computedZIndex, top: offset }, style) }, restProps),
             React__default.default.createElement(reactTransitionGroup.TransitionGroup, null, notifications.map(function (element, index) {
                 var _a;
-                return (React__default.default.createElement(reactTransitionGroup.CSSTransition, { key: element.props.id, timeout: TIMEOUT, classNames: CSS_TRANSITION_CLASS_NAMES, unmountOnExit: true, nodeRef: nodeRef },
-                    React__default.default.createElement(component.Notification, { containerRef: nodeRef, element: element, className: cn__default.default(styles__default.default.notification, (_a = {},
-                            _a[styles__default.default.withoutMargin] = offset && index === 0,
-                            _a)), onRemoveNotification: onRemoveNotification })));
+                return (React__default.default.createElement(component.Notification, { key: element.props.id, element: element, onRemoveNotification: onRemoveNotification, className: cn__default.default(styles__default.default.notification, (_a = {},
+                        _a[styles__default.default.withoutMargin] = offset && index === 0,
+                        _a)) }));
             }))))); }));
 });
 NotificationManager.displayName = 'NotificationManager';

package/cssm/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../src/component.tsx"],"sourcesContent":["import React, { forwardRef, type HTMLAttributes, useRef } from 'react';\nimport { CSSTransition, TransitionGroup } from 'react-transition-group';\nimport cn from 'classnames';\n\nimport { Portal, type PortalProps } from '@alfalab/core-components-portal';\nimport { Stack } from '@alfalab/core-components-stack';\nimport { stackingOrder } from '@alfalab/core-components-stack-context';\n\nimport { Notification, type NotificationElement } from './components';\n\nimport styles from './index.module.css';\n\nexport type NotificationManagerProps = HTMLAttributes<HTMLDivElement> & {\n    /**\n     * Массив нотификаций.\n     * В нотификации обязательно передавайте id.\n     */\n    notifications: NotificationElement[];\n\n    /**\n     * Дополнительный класс (native prop)\n     */\n    className?: string;\n\n    /**\n     * Идентификатор для систем автоматизированного тестирования\n     */\n    dataTestId?: string;\n\n    /**\n     * z-index компонента\n     */\n    zIndex?: number;\n\n    /**\n     * Отступ от верхнего края\n     */\n    offset?: number;\n\n    /**\n     * Удаление нотификации\n     */\n    onRemoveNotification: (id: string) => void;\n\n    /**\n     * Нода, компонент или функция возвращающая их\n     *\n     * Контейнер к которому будут добавляться порталы\n     */\n    container?: PortalProps['getPortalContainer'];\n};\n\nconst CSS_TRANSITION_CLASS_NAMES = {\n    enter: styles.enter,\n    enterActive: styles.enterActive,\n};\n\nconst TIMEOUT = {\n    exit: 0,\n    enter: 400,\n};\n\nexport const NotificationManager = forwardRef<HTMLDivElement, NotificationManagerProps>(\n    (\n        {\n            notifications,\n            className,\n            dataTestId,\n            zIndex = stackingOrder.TOAST,\n            style = {},\n            offset,\n            onRemoveNotification,\n            container,\n            ...restProps\n        },\n        ref,\n    ) => {\n        const nodeRef = useRef<HTMLDivElement>(null);\n\n        return (\n            <Stack value={zIndex}>\n                {(computedZIndex) => (\n                    <Portal getPortalContainer={container}>\n                        <div\n                            className={cn(styles.component, className)}\n                            ref={ref}\n                            data-test-id={dataTestId}\n                            style={{\n                                zIndex: computedZIndex,\n                                top: offset,\n                                ...style,\n                            }}\n                            {...restProps}\n                        >\n                            <TransitionGroup>\n                                {notifications.map((element, index) => (\n                                    <CSSTransition\n                                        key={element.props.id}\n                                        timeout={TIMEOUT}\n                                        classNames={CSS_TRANSITION_CLASS_NAMES}\n                                        unmountOnExit={true}\n                                        nodeRef={nodeRef}\n                                    >\n                                        <Notification\n                                            containerRef={nodeRef}\n                                            element={element}\n                                            className={cn(styles.notification, {\n                                                [styles.withoutMargin]: offset && index === 0,\n                                            })}\n                                            onRemoveNotification={onRemoveNotification}\n                                        />\n                                    </CSSTransition>\n                                ))}\n                            </TransitionGroup>\n                        </div>\n                    </Portal>\n                )}\n            </Stack>\n        );\n    },\n);\n\nNotificationManager.displayName = 'NotificationManager';\n"],"names":["styles","forwardRef","stackingOrder","__rest","useRef","React","Stack","Portal","__assign","cn","TransitionGroup","CSSTransition","Notification"],"mappings":";;;;;;;;;;;;;;;;;;;;AAoDA,IAAM,0BAA0B,GAAG;IAC/B,KAAK,EAAEA,uBAAM,CAAC,KAAK;IACnB,WAAW,EAAEA,uBAAM,CAAC,WAAW;CAClC;AAED,IAAM,OAAO,GAAG;AACZ,IAAA,IAAI,EAAE,CAAC;AACP,IAAA,KAAK,EAAE,GAAG;CACb;IAEY,mBAAmB,GAAGC,gBAAU,CACzC,UACI,EAUC,EACD,GAAG,EAAA;AAVC,IAAA,IAAA,aAAa,GAAA,EAAA,CAAA,aAAA,EACb,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,EAAA,GAAA,EAAA,CAAA,MAA4B,EAA5B,MAAM,GAAA,EAAA,KAAA,MAAA,GAAGC,kBAAa,CAAC,KAAK,GAAA,EAAA,EAC5B,EAAU,GAAA,EAAA,CAAA,KAAA,EAAV,KAAK,GAAG,EAAA,KAAA,MAAA,GAAA,EAAE,GAAA,EAAA,EACV,MAAM,GAAA,EAAA,CAAA,MAAA,EACN,oBAAoB,GAAA,EAAA,CAAA,oBAAA,EACpB,SAAS,GAAA,EAAA,CAAA,SAAA,EACN,SAAS,GAAAC,YAAA,CAAA,EAAA,EAThB,8GAUC,CADe;AAIhB,IAAA,IAAM,OAAO,GAAGC,YAAM,CAAiB,IAAI,CAAC;AAE5C,IAAA,QACIC,sBAAC,CAAA,aAAA,CAAAC,YAAK,IAAC,KAAK,EAAE,MAAM,EACf,EAAA,UAAC,cAAc,EAAA,EAAK,QACjBD,sBAAA,CAAA,aAAA,CAACE,aAAM,EAAC,EAAA,kBAAkB,EAAE,SAAS,EAAA;AACjC,QAAAF,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAAG,cAAA,CAAA,EACI,SAAS,EAAEC,mBAAE,CAACT,uBAAM,CAAC,SAAS,EAAE,SAAS,CAAC,EAC1C,GAAG,EAAE,GAAG,EACM,cAAA,EAAA,UAAU,EACxB,KAAK,EACDQ,cAAA,CAAA,EAAA,MAAM,EAAE,cAAc,EACtB,GAAG,EAAE,MAAM,EACR,EAAA,KAAK,KAER,SAAS,CAAA;YAEbH,sBAAC,CAAA,aAAA,CAAAK,oCAAe,QACX,aAAa,CAAC,GAAG,CAAC,UAAC,OAAO,EAAE,KAAK,EAAA;;gBAAK,QACnCL,sBAAC,CAAA,aAAA,CAAAM,kCAAa,EACV,EAAA,GAAG,EAAE,OAAO,CAAC,KAAK,CAAC,EAAE,EACrB,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,0BAA0B,EACtC,aAAa,EAAE,IAAI,EACnB,OAAO,EAAE,OAAO,EAAA;AAEhB,oBAAAN,sBAAA,CAAA,aAAA,CAACO,sBAAY,EACT,EAAA,YAAY,EAAE,OAAO,EACrB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAEH,mBAAE,CAACT,uBAAM,CAAC,YAAY,GAAA,EAAA,GAAA,EAAA;4BAC7B,EAAC,CAAAA,uBAAM,CAAC,aAAa,CAAA,GAAG,MAAM,IAAI,KAAK,KAAK,CAAC;AAC/C,4BAAA,EAAA,EAAA,EACF,oBAAoB,EAAE,oBAAoB,EAAA,CAC5C,CACU;aACnB,CAAC,CACY,CAChB,CACD,EAlCQ,EAmCpB,CACG;AAEhB,CAAC;AAGL,mBAAmB,CAAC,WAAW,GAAG,qBAAqB;;;;"}
+{"version":3,"file":"component.js","sources":["../src/component.tsx"],"sourcesContent":["import React, { forwardRef, type HTMLAttributes } from 'react';\nimport { TransitionGroup } from 'react-transition-group';\nimport cn from 'classnames';\n\nimport { Portal, type PortalProps } from '@alfalab/core-components-portal';\nimport { Stack } from '@alfalab/core-components-stack';\nimport { stackingOrder } from '@alfalab/core-components-stack-context';\n\nimport { Notification, type NotificationElement } from './components';\n\nimport styles from './index.module.css';\n\nexport interface NotificationManagerProps extends HTMLAttributes<HTMLDivElement> {\n    /**\n     * Массив нотификаций.\n     * В нотификации обязательно передавайте id.\n     */\n    notifications: NotificationElement[];\n\n    /**\n     * Дополнительный класс (native prop)\n     */\n    className?: string;\n\n    /**\n     * Идентификатор для систем автоматизированного тестирования\n     */\n    dataTestId?: string;\n\n    /**\n     * z-index компонента\n     */\n    zIndex?: number;\n\n    /**\n     * Отступ от верхнего края\n     */\n    offset?: number;\n\n    /**\n     * Удаление нотификации\n     */\n    onRemoveNotification: (id: string) => void;\n\n    /**\n     * Нода, компонент или функция возвращающая их\n     *\n     * Контейнер к которому будут добавляться порталы\n     */\n    container?: PortalProps['getPortalContainer'];\n}\n\nexport const NotificationManager = forwardRef<HTMLDivElement, NotificationManagerProps>(\n    (\n        {\n            notifications,\n            className,\n            dataTestId,\n            zIndex = stackingOrder.TOAST,\n            style = {},\n            offset,\n            onRemoveNotification,\n            container,\n            ...restProps\n        },\n        ref,\n    ) => (\n        <Stack value={zIndex}>\n            {(computedZIndex) => (\n                <Portal getPortalContainer={container}>\n                    <div\n                        className={cn(styles.component, className)}\n                        ref={ref}\n                        data-test-id={dataTestId}\n                        style={{\n                            zIndex: computedZIndex,\n                            top: offset,\n                            ...style,\n                        }}\n                        {...restProps}\n                    >\n                        <TransitionGroup>\n                            {notifications.map((element, index) => (\n                                <Notification\n                                    key={element.props.id}\n                                    element={element}\n                                    onRemoveNotification={onRemoveNotification}\n                                    className={cn(styles.notification, {\n                                        [styles.withoutMargin]: offset && index === 0,\n                                    })}\n                                />\n                            ))}\n                        </TransitionGroup>\n                    </div>\n                </Portal>\n            )}\n        </Stack>\n    ),\n);\n\nNotificationManager.displayName = 'NotificationManager';\n"],"names":["forwardRef","stackingOrder","__rest","React","Stack","Portal","__assign","cn","styles","TransitionGroup","Notification"],"mappings":";;;;;;;;;;;;;;;;;;;;IAoDa,mBAAmB,GAAGA,gBAAU,CACzC,UACI,EAUC,EACD,GAAG,EAAA;AAVC,IAAA,IAAA,aAAa,GAAA,EAAA,CAAA,aAAA,EACb,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,EAAA,GAAA,EAAA,CAAA,MAA4B,EAA5B,MAAM,GAAA,EAAA,KAAA,MAAA,GAAGC,kBAAa,CAAC,KAAK,GAAA,EAAA,EAC5B,EAAU,GAAA,EAAA,CAAA,KAAA,EAAV,KAAK,GAAG,EAAA,KAAA,MAAA,GAAA,EAAE,GAAA,EAAA,EACV,MAAM,GAAA,EAAA,CAAA,MAAA,EACN,oBAAoB,GAAA,EAAA,CAAA,oBAAA,EACpB,SAAS,GAAA,EAAA,CAAA,SAAA,EACN,SAAS,GAAAC,YAAA,CAAA,EAAA,EAThB,8GAUC,CADe;AAGf,IAAA,QACDC,sBAAC,CAAA,aAAA,CAAAC,YAAK,IAAC,KAAK,EAAE,MAAM,EACf,EAAA,UAAC,cAAc,EAAA,EAAK,QACjBD,sBAAA,CAAA,aAAA,CAACE,aAAM,EAAC,EAAA,kBAAkB,EAAE,SAAS,EAAA;AACjC,QAAAF,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAAG,cAAA,CAAA,EACI,SAAS,EAAEC,mBAAE,CAACC,uBAAM,CAAC,SAAS,EAAE,SAAS,CAAC,EAC1C,GAAG,EAAE,GAAG,EACM,cAAA,EAAA,UAAU,EACxB,KAAK,EACDF,cAAA,CAAA,EAAA,MAAM,EAAE,cAAc,EACtB,GAAG,EAAE,MAAM,EACR,EAAA,KAAK,KAER,SAAS,CAAA;YAEbH,sBAAC,CAAA,aAAA,CAAAM,oCAAe,QACX,aAAa,CAAC,GAAG,CAAC,UAAC,OAAO,EAAE,KAAK,EAAA;;gBAAK,QACnCN,sBAAC,CAAA,aAAA,CAAAO,sBAAY,EACT,EAAA,GAAG,EAAE,OAAO,CAAC,KAAK,CAAC,EAAE,EACrB,OAAO,EAAE,OAAO,EAChB,oBAAoB,EAAE,oBAAoB,EAC1C,SAAS,EAAEH,mBAAE,CAACC,uBAAM,CAAC,YAAY,GAAA,EAAA,GAAA,EAAA;wBAC7B,EAAC,CAAAA,uBAAM,CAAC,aAAa,CAAA,GAAG,MAAM,IAAI,KAAK,KAAK,CAAC;AAC/C,wBAAA,EAAA,EAAA,EAAA,CACJ;aACL,CAAC,CACY,CAChB,CACD,EA1BQ,EA2BpB,CACG;AACX,CAAA;AAGL,mBAAmB,CAAC,WAAW,GAAG,qBAAqB;;;;"}

package/cssm/components/notification/component.d.ts

@@ -1,13 +1,14 @@
-import { type FC, type ReactElement, type RefObject } from 'react';
+import { type FC, type ReactElement } from 'react';
+import { type CSSTransitionProps } from 'react-transition-group/CSSTransition';
 import { type NotificationProps as CoreNotificationProps } from '@alfalab/core-components-notification/cssm';
 export type NotificationElement = ReactElement<CoreNotificationProps & {
     id: string;
 }>;
-type NotificationProps = {
+type NotificationTransitionProps = Partial<Pick<CSSTransitionProps<HTMLDivElement>, 'in' | 'onExited' | 'appear' | 'enter' | 'exit'>>;
+interface NotificationProps extends NotificationTransitionProps {
     element: NotificationElement;
     className: string;
     onRemoveNotification: (id: string) => void;
-    containerRef: RefObject<HTMLDivElement>;
-};
+}
 export declare const Notification: FC<NotificationProps>;
 export {};

package/cssm/components/notification/component.js

@@ -4,14 +4,27 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var React = require('react');
+var reactTransitionGroup = require('react-transition-group');
 var cn = require('classnames');
+var styles = require('./index.module.css');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
+var TIMEOUT = {
+    exit: 0,
+    enter: 400,
+};
+var CSS_TRANSITION_CLASS_NAMES = {
+    enter: styles__default.default.enter,
+    enterActive: styles__default.default.enterActive,
+};
 var Notification = function (_a) {
-    var element = _a.element, className = _a.className, onRemoveNotification = _a.onRemoveNotification, containerRef = _a.containerRef;
+    var inProp = _a.in, onExited = _a.onExited, appear = _a.appear, enter = _a.enter, exit = _a.exit, element = _a.element, className = _a.className, onRemoveNotification = _a.onRemoveNotification;
+    var nodeRef = React.useRef(null);
     var _b = element.props, onClose = _b.onClose, onCloseTimeout = _b.onCloseTimeout;
     var handleClose = React.useCallback(function () {
         if (onClose) {
@@ -25,10 +38,10 @@ var Notification = function (_a) {
         }
         onRemoveNotification(element.props.id);
     }, [element.props.id, onCloseTimeout, onRemoveNotification]);
-    var notificationProps = React.useMemo(function () { return (tslib.__assign(tslib.__assign({}, element.props), { visible: true, className: cn__default.default(className, element.props.className), usePortal: false, offset: 0, onClose: handleClose, onCloseTimeout: handleCloseTimeout, containerRef: containerRef })); }, 
+    var notificationProps = React.useMemo(function () { return (tslib.__assign(tslib.__assign({}, element.props), { visible: true, className: cn__default.default(className, element.props.className), usePortal: false, offset: 0, onClose: handleClose, onCloseTimeout: handleCloseTimeout, containerRef: nodeRef })); }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [element, handleClose, handleCloseTimeout, containerRef]);
-    return React.cloneElement(element, notificationProps);
+    [element, handleClose, handleCloseTimeout, className]);
+    return (React__default.default.createElement(reactTransitionGroup.CSSTransition, { in: inProp, onExited: onExited, appear: appear, enter: enter, exit: exit, timeout: TIMEOUT, classNames: CSS_TRANSITION_CLASS_NAMES, unmountOnExit: true, nodeRef: nodeRef }, React.cloneElement(element, notificationProps)));
 };
 
 exports.Notification = Notification;

package/cssm/components/notification/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../src/components/notification/component.ts"],"sourcesContent":["import {\n    cloneElement,\n    type FC,\n    type ReactElement,\n    type RefObject,\n    useCallback,\n    useMemo,\n} from 'react';\nimport cn from 'classnames';\n\nimport { type NotificationProps as CoreNotificationProps } from '@alfalab/core-components-notification';\n\nexport type NotificationElement = ReactElement<CoreNotificationProps & { id: string }>;\n\ntype NotificationProps = {\n    element: NotificationElement;\n    className: string;\n    onRemoveNotification: (id: string) => void;\n    containerRef: RefObject<HTMLDivElement>;\n};\n\nexport const Notification: FC<NotificationProps> = ({\n    element,\n    className,\n    onRemoveNotification,\n    containerRef,\n}) => {\n    const { onClose, onCloseTimeout } = element.props;\n\n    const handleClose = useCallback(() => {\n        if (onClose) {\n            onClose();\n        }\n\n        onRemoveNotification(element.props.id);\n    }, [onClose, onRemoveNotification, element.props.id]);\n\n    const handleCloseTimeout = useCallback(() => {\n        if (onCloseTimeout) {\n            onCloseTimeout();\n        }\n\n        onRemoveNotification(element.props.id);\n    }, [element.props.id, onCloseTimeout, onRemoveNotification]);\n\n    const notificationProps = useMemo<CoreNotificationProps>(\n        () => ({\n            ...element.props,\n            visible: true,\n            className: cn(className, element.props.className),\n            usePortal: false,\n            offset: 0,\n            onClose: handleClose,\n            onCloseTimeout: handleCloseTimeout,\n            containerRef,\n        }),\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        [element, handleClose, handleCloseTimeout, containerRef],\n    );\n\n    return cloneElement(element, notificationProps);\n};\n"],"names":["useCallback","useMemo","__assign","cn","cloneElement"],"mappings":";;;;;;;;;;;;AAqBO,IAAM,YAAY,GAA0B,UAAC,EAKnD,EAAA;QAJG,OAAO,GAAA,EAAA,CAAA,OAAA,EACP,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,oBAAoB,GAAA,EAAA,CAAA,oBAAA,EACpB,YAAY,GAAA,EAAA,CAAA,YAAA;IAEN,IAAA,EAAA,GAA8B,OAAO,CAAC,KAAK,EAAzC,OAAO,GAAA,EAAA,CAAA,OAAA,EAAE,cAAc,GAAA,EAAA,CAAA,cAAkB;IAEjD,IAAM,WAAW,GAAGA,iBAAW,CAAC,YAAA;QAC5B,IAAI,OAAO,EAAE;AACT,YAAA,OAAO,EAAE;;AAGb,QAAA,oBAAoB,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;AAC1C,KAAC,EAAE,CAAC,OAAO,EAAE,oBAAoB,EAAE,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IAErD,IAAM,kBAAkB,GAAGA,iBAAW,CAAC,YAAA;QACnC,IAAI,cAAc,EAAE;AAChB,YAAA,cAAc,EAAE;;AAGpB,QAAA,oBAAoB,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;AAC1C,KAAC,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,EAAE,cAAc,EAAE,oBAAoB,CAAC,CAAC;IAE5D,IAAM,iBAAiB,GAAGC,aAAO,CAC7B,cAAM,QAAAC,cAAA,CAAAA,cAAA,CAAA,EAAA,EACC,OAAO,CAAC,KAAK,CAAA,EAAA,EAChB,OAAO,EAAE,IAAI,EACb,SAAS,EAAEC,mBAAE,CAAC,SAAS,EAAE,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,EACjD,SAAS,EAAE,KAAK,EAChB,MAAM,EAAE,CAAC,EACT,OAAO,EAAE,WAAW,EACpB,cAAc,EAAE,kBAAkB,EAClC,YAAY,EAAA,YAAA,EACd,CAAA,EAAA,EAAA;;IAEF,CAAC,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,YAAY,CAAC,CAC3D;AAED,IAAA,OAAOC,kBAAY,CAAC,OAAO,EAAE,iBAAiB,CAAC;AACnD;;;;"}
+{"version":3,"file":"component.js","sources":["../../../src/components/notification/component.tsx"],"sourcesContent":["import React, {\n    cloneElement,\n    type FC,\n    type ReactElement,\n    useCallback,\n    useMemo,\n    useRef,\n} from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport { type CSSTransitionProps } from 'react-transition-group/CSSTransition';\nimport cn from 'classnames';\n\nimport { type NotificationProps as CoreNotificationProps } from '@alfalab/core-components-notification';\n\nimport styles from './index.module.css';\n\nexport type NotificationElement = ReactElement<CoreNotificationProps & { id: string }>;\n\nconst TIMEOUT = {\n    exit: 0,\n    enter: 400,\n};\n\nconst CSS_TRANSITION_CLASS_NAMES = {\n    enter: styles.enter,\n    enterActive: styles.enterActive,\n};\n\ntype NotificationTransitionProps = Partial<\n    Pick<CSSTransitionProps<HTMLDivElement>, 'in' | 'onExited' | 'appear' | 'enter' | 'exit'>\n>;\n\ninterface NotificationProps extends NotificationTransitionProps {\n    element: NotificationElement;\n    className: string;\n    onRemoveNotification: (id: string) => void;\n}\n\nexport const Notification: FC<NotificationProps> = ({\n    in: inProp,\n    onExited,\n    appear,\n    enter,\n    exit,\n    element,\n    className,\n    onRemoveNotification,\n}) => {\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const { onClose, onCloseTimeout } = element.props;\n\n    const handleClose = useCallback(() => {\n        if (onClose) {\n            onClose();\n        }\n\n        onRemoveNotification(element.props.id);\n    }, [onClose, onRemoveNotification, element.props.id]);\n\n    const handleCloseTimeout = useCallback(() => {\n        if (onCloseTimeout) {\n            onCloseTimeout();\n        }\n\n        onRemoveNotification(element.props.id);\n    }, [element.props.id, onCloseTimeout, onRemoveNotification]);\n\n    const notificationProps = useMemo<CoreNotificationProps>(\n        () => ({\n            ...element.props,\n            visible: true,\n            className: cn(className, element.props.className),\n            usePortal: false,\n            offset: 0,\n            onClose: handleClose,\n            onCloseTimeout: handleCloseTimeout,\n            containerRef: nodeRef,\n        }),\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        [element, handleClose, handleCloseTimeout, className],\n    );\n\n    return (\n        <CSSTransition<HTMLDivElement>\n            in={inProp}\n            onExited={onExited}\n            appear={appear}\n            enter={enter}\n            exit={exit}\n            timeout={TIMEOUT}\n            classNames={CSS_TRANSITION_CLASS_NAMES}\n            unmountOnExit={true}\n            nodeRef={nodeRef}\n        >\n            {cloneElement(element, notificationProps)}\n        </CSSTransition>\n    );\n};\n"],"names":["styles","useRef","useCallback","useMemo","__assign","cn","React","CSSTransition","cloneElement"],"mappings":";;;;;;;;;;;;;;;;AAkBA,IAAM,OAAO,GAAG;AACZ,IAAA,IAAI,EAAE,CAAC;AACP,IAAA,KAAK,EAAE,GAAG;CACb;AAED,IAAM,0BAA0B,GAAG;IAC/B,KAAK,EAAEA,uBAAM,CAAC,KAAK;IACnB,WAAW,EAAEA,uBAAM,CAAC,WAAW;CAClC;AAYM,IAAM,YAAY,GAA0B,UAAC,EASnD,EAAA;QARO,MAAM,GAAA,EAAA,CAAA,EAAA,EACV,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,MAAM,GAAA,EAAA,CAAA,MAAA,EACN,KAAK,GAAA,EAAA,CAAA,KAAA,EACL,IAAI,GAAA,EAAA,CAAA,IAAA,EACJ,OAAO,GAAA,EAAA,CAAA,OAAA,EACP,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,oBAAoB,GAAA,EAAA,CAAA,oBAAA;AAEpB,IAAA,IAAM,OAAO,GAAGC,YAAM,CAAiB,IAAI,CAAC;IACtC,IAAA,EAAA,GAA8B,OAAO,CAAC,KAAK,EAAzC,OAAO,GAAA,EAAA,CAAA,OAAA,EAAE,cAAc,GAAA,EAAA,CAAA,cAAkB;IAEjD,IAAM,WAAW,GAAGC,iBAAW,CAAC,YAAA;QAC5B,IAAI,OAAO,EAAE;AACT,YAAA,OAAO,EAAE;;AAGb,QAAA,oBAAoB,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;AAC1C,KAAC,EAAE,CAAC,OAAO,EAAE,oBAAoB,EAAE,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IAErD,IAAM,kBAAkB,GAAGA,iBAAW,CAAC,YAAA;QACnC,IAAI,cAAc,EAAE;AAChB,YAAA,cAAc,EAAE;;AAGpB,QAAA,oBAAoB,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;AAC1C,KAAC,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,EAAE,cAAc,EAAE,oBAAoB,CAAC,CAAC;IAE5D,IAAM,iBAAiB,GAAGC,aAAO,CAC7B,cAAM,QAAAC,cAAA,CAAAA,cAAA,CAAA,EAAA,EACC,OAAO,CAAC,KAAK,CAAA,EAAA,EAChB,OAAO,EAAE,IAAI,EACb,SAAS,EAAEC,mBAAE,CAAC,SAAS,EAAE,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,EACjD,SAAS,EAAE,KAAK,EAChB,MAAM,EAAE,CAAC,EACT,OAAO,EAAE,WAAW,EACpB,cAAc,EAAE,kBAAkB,EAClC,YAAY,EAAE,OAAO,EACvB,CAAA,EAAA,EAAA;;IAEF,CAAC,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,SAAS,CAAC,CACxD;IAED,QACIC,qCAACC,kCAAa,EAAA,EACV,EAAE,EAAE,MAAM,EACV,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,0BAA0B,EACtC,aAAa,EAAE,IAAI,EACnB,OAAO,EAAE,OAAO,EAAA,EAEfC,kBAAY,CAAC,OAAO,EAAE,iBAAiB,CAAC,CAC7B;AAExB;;;;"}

package/cssm/components/notification/index.module.css

@@ -0,0 +1,18 @@
+.enter {
+    visibility: hidden;
+    transform: translate(0, -500px);
+}
+.enterActive {
+    visibility: visible;
+    transform: translate(0);
+    transition: transform 0.4s ease-out;
+}
+@media (min-width: 600px) {
+    .enter {
+        transform: translate(100%, 0);
+    }
+
+    .enterActive {
+        transform: translate(0);
+    }
+}

package/cssm/index.module.css

@@ -25,15 +25,6 @@
 .component .notification.notification {
     position: static;
 }
-.enter {
-    visibility: hidden;
-    transform: translate(0, -500px);
-}
-.enterActive {
-    visibility: visible;
-    transform: translate(0);
-    transition: transform 0.4s ease-out;
-}
 @media (min-width: 600px) {
     .component {
         right: var(--gap-48);
@@ -42,12 +33,4 @@
     .component .notification {
         width: auto;
     }
-
-    .enter {
-        transform: translate(100%, 0);
-    }
-
-    .enterActive {
-        transform: translate(0);
-    }
 }

package/esm/component.d.ts

@@ -1,7 +1,7 @@
 import React, { type HTMLAttributes } from 'react';
 import { type PortalProps } from '@alfalab/core-components-portal/esm';
 import { type NotificationElement } from './components';
-export type NotificationManagerProps = HTMLAttributes<HTMLDivElement> & {
+export interface NotificationManagerProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Массив нотификаций.
      * В нотификации обязательно передавайте id.
@@ -33,37 +33,5 @@ export type NotificationManagerProps = HTMLAttributes<HTMLDivElement> & {
      * Контейнер к которому будут добавляться порталы
      */
     container?: PortalProps['getPortalContainer'];
-};
-export declare const NotificationManager: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
-    /**
-     * Массив нотификаций.
-     * В нотификации обязательно передавайте id.
-     */
-    notifications: NotificationElement[];
-    /**
-     * Дополнительный класс (native prop)
-     */
-    className?: string;
-    /**
-     * Идентификатор для систем автоматизированного тестирования
-     */
-    dataTestId?: string;
-    /**
-     * z-index компонента
-     */
-    zIndex?: number;
-    /**
-     * Отступ от верхнего края
-     */
-    offset?: number;
-    /**
-     * Удаление нотификации
-     */
-    onRemoveNotification: (id: string) => void;
-    /**
-     * Нода, компонент или функция возвращающая их
-     *
-     * Контейнер к которому будут добавляться порталы
-     */
-    container?: PortalProps["getPortalContainer"];
-} & React.RefAttributes<HTMLDivElement>>;
+}
+export declare const NotificationManager: React.ForwardRefExoticComponent<NotificationManagerProps & React.RefAttributes<HTMLDivElement>>;

package/esm/component.js

@@ -1,6 +1,6 @@
 import { __rest, __assign } from 'tslib';
-import React, { forwardRef, useRef } from 'react';
-import { TransitionGroup, CSSTransition } from 'react-transition-group';
+import React, { forwardRef } from 'react';
+import { TransitionGroup } from 'react-transition-group';
 import cn from 'classnames';
 import { Portal } from '@alfalab/core-components-portal/esm';
 import { Stack } from '@alfalab/core-components-stack/esm';
@@ -8,25 +8,15 @@ import { stackingOrder } from '@alfalab/core-components-stack-context/esm';
 import { Notification } from './components/notification/component.js';
 import styles from './index.module.css.js';
 
-var CSS_TRANSITION_CLASS_NAMES = {
-    enter: styles.enter,
-    enterActive: styles.enterActive,
-};
-var TIMEOUT = {
-    exit: 0,
-    enter: 400,
-};
 var NotificationManager = forwardRef(function (_a, ref) {
     var notifications = _a.notifications, className = _a.className, dataTestId = _a.dataTestId, _b = _a.zIndex, zIndex = _b === void 0 ? stackingOrder.TOAST : _b, _c = _a.style, style = _c === void 0 ? {} : _c, offset = _a.offset, onRemoveNotification = _a.onRemoveNotification, container = _a.container, restProps = __rest(_a, ["notifications", "className", "dataTestId", "zIndex", "style", "offset", "onRemoveNotification", "container"]);
-    var nodeRef = useRef(null);
     return (React.createElement(Stack, { value: zIndex }, function (computedZIndex) { return (React.createElement(Portal, { getPortalContainer: container },
         React.createElement("div", __assign({ className: cn(styles.component, className), ref: ref, "data-test-id": dataTestId, style: __assign({ zIndex: computedZIndex, top: offset }, style) }, restProps),
             React.createElement(TransitionGroup, null, notifications.map(function (element, index) {
                 var _a;
-                return (React.createElement(CSSTransition, { key: element.props.id, timeout: TIMEOUT, classNames: CSS_TRANSITION_CLASS_NAMES, unmountOnExit: true, nodeRef: nodeRef },
-                    React.createElement(Notification, { containerRef: nodeRef, element: element, className: cn(styles.notification, (_a = {},
-                            _a[styles.withoutMargin] = offset && index === 0,
-                            _a)), onRemoveNotification: onRemoveNotification })));
+                return (React.createElement(Notification, { key: element.props.id, element: element, onRemoveNotification: onRemoveNotification, className: cn(styles.notification, (_a = {},
+                        _a[styles.withoutMargin] = offset && index === 0,
+                        _a)) }));
             }))))); }));
 });
 NotificationManager.displayName = 'NotificationManager';

package/esm/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../src/component.tsx"],"sourcesContent":["import React, { forwardRef, type HTMLAttributes, useRef } from 'react';\nimport { CSSTransition, TransitionGroup } from 'react-transition-group';\nimport cn from 'classnames';\n\nimport { Portal, type PortalProps } from '@alfalab/core-components-portal';\nimport { Stack } from '@alfalab/core-components-stack';\nimport { stackingOrder } from '@alfalab/core-components-stack-context';\n\nimport { Notification, type NotificationElement } from './components';\n\nimport styles from './index.module.css';\n\nexport type NotificationManagerProps = HTMLAttributes<HTMLDivElement> & {\n    /**\n     * Массив нотификаций.\n     * В нотификации обязательно передавайте id.\n     */\n    notifications: NotificationElement[];\n\n    /**\n     * Дополнительный класс (native prop)\n     */\n    className?: string;\n\n    /**\n     * Идентификатор для систем автоматизированного тестирования\n     */\n    dataTestId?: string;\n\n    /**\n     * z-index компонента\n     */\n    zIndex?: number;\n\n    /**\n     * Отступ от верхнего края\n     */\n    offset?: number;\n\n    /**\n     * Удаление нотификации\n     */\n    onRemoveNotification: (id: string) => void;\n\n    /**\n     * Нода, компонент или функция возвращающая их\n     *\n     * Контейнер к которому будут добавляться порталы\n     */\n    container?: PortalProps['getPortalContainer'];\n};\n\nconst CSS_TRANSITION_CLASS_NAMES = {\n    enter: styles.enter,\n    enterActive: styles.enterActive,\n};\n\nconst TIMEOUT = {\n    exit: 0,\n    enter: 400,\n};\n\nexport const NotificationManager = forwardRef<HTMLDivElement, NotificationManagerProps>(\n    (\n        {\n            notifications,\n            className,\n            dataTestId,\n            zIndex = stackingOrder.TOAST,\n            style = {},\n            offset,\n            onRemoveNotification,\n            container,\n            ...restProps\n        },\n        ref,\n    ) => {\n        const nodeRef = useRef<HTMLDivElement>(null);\n\n        return (\n            <Stack value={zIndex}>\n                {(computedZIndex) => (\n                    <Portal getPortalContainer={container}>\n                        <div\n                            className={cn(styles.component, className)}\n                            ref={ref}\n                            data-test-id={dataTestId}\n                            style={{\n                                zIndex: computedZIndex,\n                                top: offset,\n                                ...style,\n                            }}\n                            {...restProps}\n                        >\n                            <TransitionGroup>\n                                {notifications.map((element, index) => (\n                                    <CSSTransition\n                                        key={element.props.id}\n                                        timeout={TIMEOUT}\n                                        classNames={CSS_TRANSITION_CLASS_NAMES}\n                                        unmountOnExit={true}\n                                        nodeRef={nodeRef}\n                                    >\n                                        <Notification\n                                            containerRef={nodeRef}\n                                            element={element}\n                                            className={cn(styles.notification, {\n                                                [styles.withoutMargin]: offset && index === 0,\n                                            })}\n                                            onRemoveNotification={onRemoveNotification}\n                                        />\n                                    </CSSTransition>\n                                ))}\n                            </TransitionGroup>\n                        </div>\n                    </Portal>\n                )}\n            </Stack>\n        );\n    },\n);\n\nNotificationManager.displayName = 'NotificationManager';\n"],"names":[],"mappings":";;;;;;;;;;AAoDA,IAAM,0BAA0B,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC,KAAK;IACnB,WAAW,EAAE,MAAM,CAAC,WAAW;CAClC;AAED,IAAM,OAAO,GAAG;AACZ,IAAA,IAAI,EAAE,CAAC;AACP,IAAA,KAAK,EAAE,GAAG;CACb;IAEY,mBAAmB,GAAG,UAAU,CACzC,UACI,EAUC,EACD,GAAG,EAAA;AAVC,IAAA,IAAA,aAAa,GAAA,EAAA,CAAA,aAAA,EACb,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,EAAA,GAAA,EAAA,CAAA,MAA4B,EAA5B,MAAM,GAAA,EAAA,KAAA,MAAA,GAAG,aAAa,CAAC,KAAK,GAAA,EAAA,EAC5B,EAAU,GAAA,EAAA,CAAA,KAAA,EAAV,KAAK,GAAG,EAAA,KAAA,MAAA,GAAA,EAAE,GAAA,EAAA,EACV,MAAM,GAAA,EAAA,CAAA,MAAA,EACN,oBAAoB,GAAA,EAAA,CAAA,oBAAA,EACpB,SAAS,GAAA,EAAA,CAAA,SAAA,EACN,SAAS,GAAA,MAAA,CAAA,EAAA,EAThB,8GAUC,CADe;AAIhB,IAAA,IAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC;AAE5C,IAAA,QACI,KAAC,CAAA,aAAA,CAAA,KAAK,IAAC,KAAK,EAAE,MAAM,EACf,EAAA,UAAC,cAAc,EAAA,EAAK,QACjB,KAAA,CAAA,aAAA,CAAC,MAAM,EAAC,EAAA,kBAAkB,EAAE,SAAS,EAAA;AACjC,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,QAAA,CAAA,EACI,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC,EAC1C,GAAG,EAAE,GAAG,EACM,cAAA,EAAA,UAAU,EACxB,KAAK,EACD,QAAA,CAAA,EAAA,MAAM,EAAE,cAAc,EACtB,GAAG,EAAE,MAAM,EACR,EAAA,KAAK,KAER,SAAS,CAAA;YAEb,KAAC,CAAA,aAAA,CAAA,eAAe,QACX,aAAa,CAAC,GAAG,CAAC,UAAC,OAAO,EAAE,KAAK,EAAA;;gBAAK,QACnC,KAAC,CAAA,aAAA,CAAA,aAAa,EACV,EAAA,GAAG,EAAE,OAAO,CAAC,KAAK,CAAC,EAAE,EACrB,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,0BAA0B,EACtC,aAAa,EAAE,IAAI,EACnB,OAAO,EAAE,OAAO,EAAA;AAEhB,oBAAA,KAAA,CAAA,aAAA,CAAC,YAAY,EACT,EAAA,YAAY,EAAE,OAAO,EACrB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,YAAY,GAAA,EAAA,GAAA,EAAA;4BAC7B,EAAC,CAAA,MAAM,CAAC,aAAa,CAAA,GAAG,MAAM,IAAI,KAAK,KAAK,CAAC;AAC/C,4BAAA,EAAA,EAAA,EACF,oBAAoB,EAAE,oBAAoB,EAAA,CAC5C,CACU;aACnB,CAAC,CACY,CAChB,CACD,EAlCQ,EAmCpB,CACG;AAEhB,CAAC;AAGL,mBAAmB,CAAC,WAAW,GAAG,qBAAqB;;;;"}
+{"version":3,"file":"component.js","sources":["../src/component.tsx"],"sourcesContent":["import React, { forwardRef, type HTMLAttributes } from 'react';\nimport { TransitionGroup } from 'react-transition-group';\nimport cn from 'classnames';\n\nimport { Portal, type PortalProps } from '@alfalab/core-components-portal';\nimport { Stack } from '@alfalab/core-components-stack';\nimport { stackingOrder } from '@alfalab/core-components-stack-context';\n\nimport { Notification, type NotificationElement } from './components';\n\nimport styles from './index.module.css';\n\nexport interface NotificationManagerProps extends HTMLAttributes<HTMLDivElement> {\n    /**\n     * Массив нотификаций.\n     * В нотификации обязательно передавайте id.\n     */\n    notifications: NotificationElement[];\n\n    /**\n     * Дополнительный класс (native prop)\n     */\n    className?: string;\n\n    /**\n     * Идентификатор для систем автоматизированного тестирования\n     */\n    dataTestId?: string;\n\n    /**\n     * z-index компонента\n     */\n    zIndex?: number;\n\n    /**\n     * Отступ от верхнего края\n     */\n    offset?: number;\n\n    /**\n     * Удаление нотификации\n     */\n    onRemoveNotification: (id: string) => void;\n\n    /**\n     * Нода, компонент или функция возвращающая их\n     *\n     * Контейнер к которому будут добавляться порталы\n     */\n    container?: PortalProps['getPortalContainer'];\n}\n\nexport const NotificationManager = forwardRef<HTMLDivElement, NotificationManagerProps>(\n    (\n        {\n            notifications,\n            className,\n            dataTestId,\n            zIndex = stackingOrder.TOAST,\n            style = {},\n            offset,\n            onRemoveNotification,\n            container,\n            ...restProps\n        },\n        ref,\n    ) => (\n        <Stack value={zIndex}>\n            {(computedZIndex) => (\n                <Portal getPortalContainer={container}>\n                    <div\n                        className={cn(styles.component, className)}\n                        ref={ref}\n                        data-test-id={dataTestId}\n                        style={{\n                            zIndex: computedZIndex,\n                            top: offset,\n                            ...style,\n                        }}\n                        {...restProps}\n                    >\n                        <TransitionGroup>\n                            {notifications.map((element, index) => (\n                                <Notification\n                                    key={element.props.id}\n                                    element={element}\n                                    onRemoveNotification={onRemoveNotification}\n                                    className={cn(styles.notification, {\n                                        [styles.withoutMargin]: offset && index === 0,\n                                    })}\n                                />\n                            ))}\n                        </TransitionGroup>\n                    </div>\n                </Portal>\n            )}\n        </Stack>\n    ),\n);\n\nNotificationManager.displayName = 'NotificationManager';\n"],"names":[],"mappings":";;;;;;;;;;IAoDa,mBAAmB,GAAG,UAAU,CACzC,UACI,EAUC,EACD,GAAG,EAAA;AAVC,IAAA,IAAA,aAAa,GAAA,EAAA,CAAA,aAAA,EACb,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,EAAA,GAAA,EAAA,CAAA,MAA4B,EAA5B,MAAM,GAAA,EAAA,KAAA,MAAA,GAAG,aAAa,CAAC,KAAK,GAAA,EAAA,EAC5B,EAAU,GAAA,EAAA,CAAA,KAAA,EAAV,KAAK,GAAG,EAAA,KAAA,MAAA,GAAA,EAAE,GAAA,EAAA,EACV,MAAM,GAAA,EAAA,CAAA,MAAA,EACN,oBAAoB,GAAA,EAAA,CAAA,oBAAA,EACpB,SAAS,GAAA,EAAA,CAAA,SAAA,EACN,SAAS,GAAA,MAAA,CAAA,EAAA,EAThB,8GAUC,CADe;AAGf,IAAA,QACD,KAAC,CAAA,aAAA,CAAA,KAAK,IAAC,KAAK,EAAE,MAAM,EACf,EAAA,UAAC,cAAc,EAAA,EAAK,QACjB,KAAA,CAAA,aAAA,CAAC,MAAM,EAAC,EAAA,kBAAkB,EAAE,SAAS,EAAA;AACjC,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,QAAA,CAAA,EACI,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC,EAC1C,GAAG,EAAE,GAAG,EACM,cAAA,EAAA,UAAU,EACxB,KAAK,EACD,QAAA,CAAA,EAAA,MAAM,EAAE,cAAc,EACtB,GAAG,EAAE,MAAM,EACR,EAAA,KAAK,KAER,SAAS,CAAA;YAEb,KAAC,CAAA,aAAA,CAAA,eAAe,QACX,aAAa,CAAC,GAAG,CAAC,UAAC,OAAO,EAAE,KAAK,EAAA;;gBAAK,QACnC,KAAC,CAAA,aAAA,CAAA,YAAY,EACT,EAAA,GAAG,EAAE,OAAO,CAAC,KAAK,CAAC,EAAE,EACrB,OAAO,EAAE,OAAO,EAChB,oBAAoB,EAAE,oBAAoB,EAC1C,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,YAAY,GAAA,EAAA,GAAA,EAAA;wBAC7B,EAAC,CAAA,MAAM,CAAC,aAAa,CAAA,GAAG,MAAM,IAAI,KAAK,KAAK,CAAC;AAC/C,wBAAA,EAAA,EAAA,EAAA,CACJ;aACL,CAAC,CACY,CAChB,CACD,EA1BQ,EA2BpB,CACG;AACX,CAAA;AAGL,mBAAmB,CAAC,WAAW,GAAG,qBAAqB;;;;"}