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

package/moderncssm/component.js

@@ -1,5 +1,5 @@
-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/moderncssm';
 import { Stack } from '@alfalab/core-components-stack/moderncssm';
@@ -7,27 +7,15 @@ import { stackingOrder } from '@alfalab/core-components-stack-context/moderncssm
 import { Notification } from './components/notification/component.js';
 import styles from './index.module.css';
 
-const CSS_TRANSITION_CLASS_NAMES = {
-    enter: styles.enter,
-    enterActive: styles.enterActive,
-};
-const TIMEOUT = {
-    exit: 0,
-    enter: 400,
-};
-const NotificationManager = forwardRef(({ notifications, className, dataTestId, zIndex = stackingOrder.TOAST, style = {}, offset, onRemoveNotification, container, ...restProps }, ref) => {
-    const nodeRef = useRef(null);
-    return (React.createElement(Stack, { value: zIndex }, (computedZIndex) => (React.createElement(Portal, { getPortalContainer: container },
-        React.createElement("div", { className: cn(styles.component, className), ref: ref, "data-test-id": dataTestId, style: {
-                zIndex: computedZIndex,
-                top: offset,
-                ...style,
-            }, ...restProps },
-            React.createElement(TransitionGroup, null, notifications.map((element, index) => (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, {
-                        [styles.withoutMargin]: offset && index === 0,
-                    }), onRemoveNotification: onRemoveNotification }))))))))));
-});
+const NotificationManager = forwardRef(({ notifications, className, dataTestId, zIndex = stackingOrder.TOAST, style = {}, offset, onRemoveNotification, container, ...restProps }, ref) => (React.createElement(Stack, { value: zIndex }, (computedZIndex) => (React.createElement(Portal, { getPortalContainer: container },
+    React.createElement("div", { className: cn(styles.component, className), ref: ref, "data-test-id": dataTestId, style: {
+            zIndex: computedZIndex,
+            top: offset,
+            ...style,
+        }, ...restProps },
+        React.createElement(TransitionGroup, null, notifications.map((element, index) => (React.createElement(Notification, { key: element.props.id, element: element, onRemoveNotification: onRemoveNotification, className: cn(styles.notification, {
+                [styles.withoutMargin]: offset && index === 0,
+            }) }))))))))));
 NotificationManager.displayName = 'NotificationManager';
 
 export { NotificationManager };

package/moderncssm/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,MAAM,0BAA0B,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC,KAAK;IACnB,WAAW,EAAE,MAAM,CAAC,WAAW;CAClC;AAED,MAAM,OAAO,GAAG;AACZ,IAAA,IAAI,EAAE,CAAC;AACP,IAAA,KAAK,EAAE,GAAG;CACb;AAEY,MAAA,mBAAmB,GAAG,UAAU,CACzC,CACI,EACI,aAAa,EACb,SAAS,EACT,UAAU,EACV,MAAM,GAAG,aAAa,CAAC,KAAK,EAC5B,KAAK,GAAG,EAAE,EACV,MAAM,EACN,oBAAoB,EACpB,SAAS,EACT,GAAG,SAAS,EACf,EACD,GAAG,KACH;AACA,IAAA,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC;AAE5C,IAAA,QACI,KAAC,CAAA,aAAA,CAAA,KAAK,IAAC,KAAK,EAAE,MAAM,EACf,EAAA,CAAC,cAAc,MACZ,KAAA,CAAA,aAAA,CAAC,MAAM,EAAC,EAAA,kBAAkB,EAAE,SAAS,EAAA;AACjC,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC,EAC1C,GAAG,EAAE,GAAG,kBACM,UAAU,EACxB,KAAK,EAAE;AACH,gBAAA,MAAM,EAAE,cAAc;AACtB,gBAAA,GAAG,EAAE,MAAM;AACX,gBAAA,GAAG,KAAK;AACX,aAAA,EAAA,GACG,SAAS,EAAA;AAEb,YAAA,KAAA,CAAA,aAAA,CAAC,eAAe,EACX,IAAA,EAAA,aAAa,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,MAC9B,KAAC,CAAA,aAAA,CAAA,aAAa,IACV,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,gBAAA,KAAA,CAAA,aAAA,CAAC,YAAY,EACT,EAAA,YAAY,EAAE,OAAO,EACrB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,YAAY,EAAE;wBAC/B,CAAC,MAAM,CAAC,aAAa,GAAG,MAAM,IAAI,KAAK,KAAK,CAAC;AAChD,qBAAA,CAAC,EACF,oBAAoB,EAAE,oBAAoB,GAC5C,CACU,CACnB,CAAC,CACY,CAChB,CACD,CACZ,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":";;;;;;;;;AAoDa,MAAA,mBAAmB,GAAG,UAAU,CACzC,CACI,EACI,aAAa,EACb,SAAS,EACT,UAAU,EACV,MAAM,GAAG,aAAa,CAAC,KAAK,EAC5B,KAAK,GAAG,EAAE,EACV,MAAM,EACN,oBAAoB,EACpB,SAAS,EACT,GAAG,SAAS,EACf,EACD,GAAG,MAEH,KAAC,CAAA,aAAA,CAAA,KAAK,EAAC,EAAA,KAAK,EAAE,MAAM,EACf,EAAA,CAAC,cAAc,MACZ,KAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,kBAAkB,EAAE,SAAS,EAAA;AACjC,IAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC,EAC1C,GAAG,EAAE,GAAG,kBACM,UAAU,EACxB,KAAK,EAAE;AACH,YAAA,MAAM,EAAE,cAAc;AACtB,YAAA,GAAG,EAAE,MAAM;AACX,YAAA,GAAG,KAAK;AACX,SAAA,EAAA,GACG,SAAS,EAAA;AAEb,QAAA,KAAA,CAAA,aAAA,CAAC,eAAe,EACX,IAAA,EAAA,aAAa,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,MAC9B,oBAAC,YAAY,EAAA,EACT,GAAG,EAAE,OAAO,CAAC,KAAK,CAAC,EAAE,EACrB,OAAO,EAAE,OAAO,EAChB,oBAAoB,EAAE,oBAAoB,EAC1C,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,YAAY,EAAE;gBAC/B,CAAC,MAAM,CAAC,aAAa,GAAG,MAAM,IAAI,KAAK,KAAK,CAAC;aAChD,CAAC,EAAA,CACJ,CACL,CAAC,CACY,CAChB,CACD,CACZ,CACG,CACX;AAGL,mBAAmB,CAAC,WAAW,GAAG,qBAAqB;;;;"}

package/moderncssm/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/moderncssm';
 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/moderncssm/components/notification/component.js

@@ -1,7 +1,18 @@
-import { useCallback, useMemo, cloneElement } from 'react';
+import React, { useRef, useCallback, useMemo, cloneElement } from 'react';
+import { CSSTransition } from 'react-transition-group';
 import cn from 'classnames';
+import styles from './index.module.css';
 
-const Notification = ({ element, className, onRemoveNotification, containerRef, }) => {
+const TIMEOUT = {
+    exit: 0,
+    enter: 400,
+};
+const CSS_TRANSITION_CLASS_NAMES = {
+    enter: styles.enter,
+    enterActive: styles.enterActive,
+};
+const Notification = ({ in: inProp, onExited, appear, enter, exit, element, className, onRemoveNotification, }) => {
+    const nodeRef = useRef(null);
     const { onClose, onCloseTimeout } = element.props;
     const handleClose = useCallback(() => {
         if (onClose) {
@@ -23,11 +34,11 @@ const Notification = ({ element, className, onRemoveNotification, containerRef,
         offset: 0,
         onClose: handleClose,
         onCloseTimeout: handleCloseTimeout,
-        containerRef,
+        containerRef: nodeRef,
     }), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [element, handleClose, handleCloseTimeout, containerRef]);
-    return cloneElement(element, notificationProps);
+    [element, handleClose, handleCloseTimeout, className]);
+    return (React.createElement(CSSTransition, { in: inProp, onExited: onExited, appear: appear, enter: enter, exit: exit, timeout: TIMEOUT, classNames: CSS_TRANSITION_CLASS_NAMES, unmountOnExit: true, nodeRef: nodeRef }, cloneElement(element, notificationProps)));
 };
 
 export { Notification };

package/moderncssm/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":[],"mappings":";;;AAqBO,MAAM,YAAY,GAA0B,CAAC,EAChD,OAAO,EACP,SAAS,EACT,oBAAoB,EACpB,YAAY,GACf,KAAI;IACD,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,GAAG,OAAO,CAAC,KAAK;AAEjD,IAAA,MAAM,WAAW,GAAG,WAAW,CAAC,MAAK;QACjC,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;AAErD,IAAA,MAAM,kBAAkB,GAAG,WAAW,CAAC,MAAK;QACxC,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;AAE5D,IAAA,MAAM,iBAAiB,GAAG,OAAO,CAC7B,OAAO;QACH,GAAG,OAAO,CAAC,KAAK;AAChB,QAAA,OAAO,EAAE,IAAI;QACb,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC;AACjD,QAAA,SAAS,EAAE,KAAK;AAChB,QAAA,MAAM,EAAE,CAAC;AACT,QAAA,OAAO,EAAE,WAAW;AACpB,QAAA,cAAc,EAAE,kBAAkB;QAClC,YAAY;KACf,CAAC;;IAEF,CAAC,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,YAAY,CAAC,CAC3D;AAED,IAAA,OAAO,YAAY,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":[],"mappings":";;;;;AAkBA,MAAM,OAAO,GAAG;AACZ,IAAA,IAAI,EAAE,CAAC;AACP,IAAA,KAAK,EAAE,GAAG;CACb;AAED,MAAM,0BAA0B,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC,KAAK;IACnB,WAAW,EAAE,MAAM,CAAC,WAAW;CAClC;AAYY,MAAA,YAAY,GAA0B,CAAC,EAChD,EAAE,EAAE,MAAM,EACV,QAAQ,EACR,MAAM,EACN,KAAK,EACL,IAAI,EACJ,OAAO,EACP,SAAS,EACT,oBAAoB,GACvB,KAAI;AACD,IAAA,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC;IAC5C,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,GAAG,OAAO,CAAC,KAAK;AAEjD,IAAA,MAAM,WAAW,GAAG,WAAW,CAAC,MAAK;QACjC,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;AAErD,IAAA,MAAM,kBAAkB,GAAG,WAAW,CAAC,MAAK;QACxC,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;AAE5D,IAAA,MAAM,iBAAiB,GAAG,OAAO,CAC7B,OAAO;QACH,GAAG,OAAO,CAAC,KAAK;AAChB,QAAA,OAAO,EAAE,IAAI;QACb,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC;AACjD,QAAA,SAAS,EAAE,KAAK;AAChB,QAAA,MAAM,EAAE,CAAC;AACT,QAAA,OAAO,EAAE,WAAW;AACpB,QAAA,cAAc,EAAE,kBAAkB;AAClC,QAAA,YAAY,EAAE,OAAO;KACxB,CAAC;;IAEF,CAAC,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,SAAS,CAAC,CACxD;IAED,QACI,oBAAC,aAAa,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,EAEf,YAAY,CAAC,OAAO,EAAE,iBAAiB,CAAC,CAC7B;AAExB;;;;"}

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

@@ -0,0 +1,22 @@
+
+
+.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/moderncssm/index.module.css

@@ -22,17 +22,6 @@
     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);
@@ -41,12 +30,4 @@
     .component .notification {
         width: auto;
     }
-
-    .enter {
-        transform: translate(100%, 0);
-    }
-
-    .enterActive {
-        transform: translate(0);
-    }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-notification-manager",
-    "version": "7.0.4",
+    "version": "7.0.5",
     "description": "Notification manager",
     "keywords": [],
     "license": "MIT",
@@ -10,7 +10,7 @@
     "main": "index.js",
     "module": "./esm/index.js",
     "dependencies": {
-        "@alfalab/core-components-notification": "^9.0.4",
+        "@alfalab/core-components-notification": "^9.0.5",
         "@alfalab/core-components-portal": "^5.0.1",
         "@alfalab/core-components-stack": "^7.0.1",
         "classnames": "^2.5.1",

package/src/component.tsx

@@ -1,5 +1,5 @@
-import React, { forwardRef, type HTMLAttributes, useRef } from 'react';
-import { CSSTransition, TransitionGroup } from 'react-transition-group';
+import React, { forwardRef, type HTMLAttributes } from 'react';
+import { TransitionGroup } from 'react-transition-group';
 import cn from 'classnames';
 
 import { Portal, type PortalProps } from '@alfalab/core-components-portal';
@@ -10,7 +10,7 @@ import { Notification, type NotificationElement } from './components';
 
 import styles from './index.module.css';
 
-export type NotificationManagerProps = HTMLAttributes<HTMLDivElement> & {
+export interface NotificationManagerProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Массив нотификаций.
      * В нотификации обязательно передавайте id.
@@ -48,17 +48,7 @@ export type NotificationManagerProps = HTMLAttributes<HTMLDivElement> & {
      * Контейнер к которому будут добавляться порталы
      */
     container?: PortalProps['getPortalContainer'];
-};
-
-const CSS_TRANSITION_CLASS_NAMES = {
-    enter: styles.enter,
-    enterActive: styles.enterActive,
-};
-
-const TIMEOUT = {
-    exit: 0,
-    enter: 400,
-};
+}
 
 export const NotificationManager = forwardRef<HTMLDivElement, NotificationManagerProps>(
     (
@@ -74,50 +64,38 @@ export const NotificationManager = forwardRef<HTMLDivElement, NotificationManage
             ...restProps
         },
         ref,
-    ) => {
-        const nodeRef = useRef<HTMLDivElement>(null);
-
-        return (
-            <Stack value={zIndex}>
-                {(computedZIndex) => (
-                    <Portal getPortalContainer={container}>
-                        <div
-                            className={cn(styles.component, className)}
-                            ref={ref}
-                            data-test-id={dataTestId}
-                            style={{
-                                zIndex: computedZIndex,
-                                top: offset,
-                                ...style,
-                            }}
-                            {...restProps}
-                        >
-                            <TransitionGroup>
-                                {notifications.map((element, index) => (
-                                    <CSSTransition
-                                        key={element.props.id}
-                                        timeout={TIMEOUT}
-                                        classNames={CSS_TRANSITION_CLASS_NAMES}
-                                        unmountOnExit={true}
-                                        nodeRef={nodeRef}
-                                    >
-                                        <Notification
-                                            containerRef={nodeRef}
-                                            element={element}
-                                            className={cn(styles.notification, {
-                                                [styles.withoutMargin]: offset && index === 0,
-                                            })}
-                                            onRemoveNotification={onRemoveNotification}
-                                        />
-                                    </CSSTransition>
-                                ))}
-                            </TransitionGroup>
-                        </div>
-                    </Portal>
-                )}
-            </Stack>
-        );
-    },
+    ) => (
+        <Stack value={zIndex}>
+            {(computedZIndex) => (
+                <Portal getPortalContainer={container}>
+                    <div
+                        className={cn(styles.component, className)}
+                        ref={ref}
+                        data-test-id={dataTestId}
+                        style={{
+                            zIndex: computedZIndex,
+                            top: offset,
+                            ...style,
+                        }}
+                        {...restProps}
+                    >
+                        <TransitionGroup>
+                            {notifications.map((element, index) => (
+                                <Notification
+                                    key={element.props.id}
+                                    element={element}
+                                    onRemoveNotification={onRemoveNotification}
+                                    className={cn(styles.notification, {
+                                        [styles.withoutMargin]: offset && index === 0,
+                                    })}
+                                />
+                            ))}
+                        </TransitionGroup>
+                    </div>
+                </Portal>
+            )}
+        </Stack>
+    ),
 );
 
 NotificationManager.displayName = 'NotificationManager';

package/src/components/notification/{component.ts → component.tsx}

@@ -1,30 +1,52 @@
-import {
+import React, {
     cloneElement,
     type FC,
     type ReactElement,
-    type RefObject,
     useCallback,
     useMemo,
+    useRef,
 } from 'react';
+import { CSSTransition } from 'react-transition-group';
+import { type CSSTransitionProps } from 'react-transition-group/CSSTransition';
 import cn from 'classnames';
 
 import { type NotificationProps as CoreNotificationProps } from '@alfalab/core-components-notification';
 
+import styles from './index.module.css';
+
 export type NotificationElement = ReactElement<CoreNotificationProps & { id: string }>;
 
-type NotificationProps = {
+const TIMEOUT = {
+    exit: 0,
+    enter: 400,
+};
+
+const CSS_TRANSITION_CLASS_NAMES = {
+    enter: styles.enter,
+    enterActive: styles.enterActive,
+};
+
+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 const Notification: FC<NotificationProps> = ({
+    in: inProp,
+    onExited,
+    appear,
+    enter,
+    exit,
     element,
     className,
     onRemoveNotification,
-    containerRef,
 }) => {
+    const nodeRef = useRef<HTMLDivElement>(null);
     const { onClose, onCloseTimeout } = element.props;
 
     const handleClose = useCallback(() => {
@@ -52,11 +74,25 @@ export const Notification: FC<NotificationProps> = ({
             offset: 0,
             onClose: handleClose,
             onCloseTimeout: handleCloseTimeout,
-            containerRef,
+            containerRef: nodeRef,
         }),
         // eslint-disable-next-line react-hooks/exhaustive-deps
-        [element, handleClose, handleCloseTimeout, containerRef],
+        [element, handleClose, handleCloseTimeout, className],
     );
 
-    return cloneElement(element, notificationProps);
+    return (
+        <CSSTransition<HTMLDivElement>
+            in={inProp}
+            onExited={onExited}
+            appear={appear}
+            enter={enter}
+            exit={exit}
+            timeout={TIMEOUT}
+            classNames={CSS_TRANSITION_CLASS_NAMES}
+            unmountOnExit={true}
+            nodeRef={nodeRef}
+        >
+            {cloneElement(element, notificationProps)}
+        </CSSTransition>
+    );
 };

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

@@ -0,0 +1,22 @@
+@import '@alfalab/core-components-vars/src/index.css';
+
+.enter {
+    visibility: hidden;
+    transform: translate(0, -500px);
+}
+
+.enterActive {
+    visibility: visible;
+    transform: translate(0);
+    transition: transform 0.4s ease-out;
+}
+
+@media (--tablet-s) {
+    .enter {
+        transform: translate(100%, 0);
+    }
+
+    .enterActive {
+        transform: translate(0);
+    }
+}

package/src/index.module.css

@@ -22,17 +22,6 @@
     position: static;
 }
 
-.enter {
-    visibility: hidden;
-    transform: translate(0, -500px);
-}
-
-.enterActive {
-    visibility: visible;
-    transform: translate(0);
-    transition: transform 0.4s ease-out;
-}
-
 @media (--tablet-s) {
     .component {
         right: var(--gap-48);
@@ -41,12 +30,4 @@
     .component .notification {
         width: auto;
     }
-
-    .enter {
-        transform: translate(100%, 0);
-    }
-
-    .enterActive {
-        transform: translate(0);
-    }
 }