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

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

@@ -1,9 +1,20 @@
 import { __assign } from 'tslib';
-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.js';
 
+var TIMEOUT = {
+    exit: 0,
+    enter: 400,
+};
+var CSS_TRANSITION_CLASS_NAMES = {
+    enter: styles.enter,
+    enterActive: styles.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 = useRef(null);
     var _b = element.props, onClose = _b.onClose, onCloseTimeout = _b.onCloseTimeout;
     var handleClose = useCallback(function () {
         if (onClose) {
@@ -17,10 +28,10 @@ var Notification = function (_a) {
         }
         onRemoveNotification(element.props.id);
     }, [element.props.id, onCloseTimeout, onRemoveNotification]);
-    var notificationProps = useMemo(function () { return (__assign(__assign({}, element.props), { visible: true, className: cn(className, element.props.className), usePortal: false, offset: 0, onClose: handleClose, onCloseTimeout: handleCloseTimeout, containerRef: containerRef })); }, 
+    var notificationProps = useMemo(function () { return (__assign(__assign({}, element.props), { visible: true, className: cn(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 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/esm/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,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,GAAG,WAAW,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,GAAG,WAAW,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,GAAG,OAAO,CAC7B,cAAM,QAAA,QAAA,CAAA,QAAA,CAAA,EAAA,EACC,OAAO,CAAC,KAAK,CAAA,EAAA,EAChB,OAAO,EAAE,IAAI,EACb,SAAS,EAAE,EAAE,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,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,IAAM,OAAO,GAAG;AACZ,IAAA,IAAI,EAAE,CAAC;AACP,IAAA,KAAK,EAAE,GAAG;CACb;AAED,IAAM,0BAA0B,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC,KAAK;IACnB,WAAW,EAAE,MAAM,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,GAAG,MAAM,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,GAAG,WAAW,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,GAAG,WAAW,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,GAAG,OAAO,CAC7B,cAAM,QAAA,QAAA,CAAA,QAAA,CAAA,EAAA,EACC,OAAO,CAAC,KAAK,CAAA,EAAA,EAChB,OAAO,EAAE,IAAI,EACb,SAAS,EAAE,EAAE,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,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/esm/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/esm/components/notification/index.module.css.js

@@ -0,0 +1,6 @@
+import './index.css';
+
+var styles = {"enter":"notification-manager__enter_4ws0s","enterActive":"notification-manager__enterActive_4ws0s"};
+
+export { styles as default };
+//# sourceMappingURL=index.module.css.js.map

package/esm/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/esm/index.css

@@ -7,47 +7,30 @@
     --gap-24: var(--gap-xl);
     --gap-48: var(--gap-4xl);
 }
-.notification-manager__component_1an0j {
+.notification-manager__component_8dpq7 {
     position: fixed;
     top: var(--gap-0);
     right: var(--gap-12);
     display: flex;
     flex-direction: column;
 }
-.notification-manager__component_1an0j .notification-manager__notification_1an0j {
+.notification-manager__component_8dpq7 .notification-manager__notification_8dpq7 {
     width: calc(100vw - var(--gap-24));
     margin-top: var(--gap-12);
     will-change: transform;
 }
-.notification-manager__component_1an0j .notification-manager__notification_1an0j.notification-manager__withoutMargin_1an0j {
+.notification-manager__component_8dpq7 .notification-manager__notification_8dpq7.notification-manager__withoutMargin_8dpq7 {
         margin-top: var(--gap-0);
     }
-.notification-manager__component_1an0j .notification-manager__notification_1an0j.notification-manager__notification_1an0j {
+.notification-manager__component_8dpq7 .notification-manager__notification_8dpq7.notification-manager__notification_8dpq7 {
     position: static;
 }
-.notification-manager__enter_1an0j {
-    visibility: hidden;
-    transform: translate(0, -500px);
-}
-.notification-manager__enterActive_1an0j {
-    visibility: visible;
-    transform: translate(0);
-    transition: transform 0.4s ease-out;
-}
 @media (min-width: 600px) {
-    .notification-manager__component_1an0j {
+    .notification-manager__component_8dpq7 {
         right: var(--gap-48);
     }
 
-    .notification-manager__component_1an0j .notification-manager__notification_1an0j {
+    .notification-manager__component_8dpq7 .notification-manager__notification_8dpq7 {
         width: auto;
     }
-
-    .notification-manager__enter_1an0j {
-        transform: translate(100%, 0);
-    }
-
-    .notification-manager__enterActive_1an0j {
-        transform: translate(0);
-    }
 }

package/esm/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-var styles = {"component":"notification-manager__component_1an0j","notification":"notification-manager__notification_1an0j","withoutMargin":"notification-manager__withoutMargin_1an0j","enter":"notification-manager__enter_1an0j","enterActive":"notification-manager__enterActive_1an0j"};
+var styles = {"component":"notification-manager__component_8dpq7","notification":"notification-manager__notification_8dpq7","withoutMargin":"notification-manager__withoutMargin_8dpq7"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/esm/index.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.component {\n    position: fixed;\n    top: var(--gap-0);\n    right: var(--gap-12);\n    display: flex;\n    flex-direction: column;\n}\n\n.component .notification {\n    width: calc(100vw - var(--gap-24));\n    margin-top: var(--gap-12);\n    will-change: transform;\n\n    &.withoutMargin {\n        margin-top: var(--gap-0);\n    }\n}\n\n.component .notification.notification {\n    position: static;\n}\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    .component {\n        right: var(--gap-48);\n    }\n\n    .component .notification {\n        width: auto;\n    }\n\n    .enter {\n        transform: translate(100%, 0);\n    }\n\n    .enterActive {\n        transform: translate(0);\n    }\n}\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,WAAW,CAAC,uCAAuC,CAAC,cAAc,CAAC,0CAA0C,CAAC,eAAe,CAAC,2CAA2C,CAAC,OAAO,CAAC,mCAAmC,CAAC,aAAa,CAAC,yCAAyC,CAAC;;;;"}
+{"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.component {\n    position: fixed;\n    top: var(--gap-0);\n    right: var(--gap-12);\n    display: flex;\n    flex-direction: column;\n}\n\n.component .notification {\n    width: calc(100vw - var(--gap-24));\n    margin-top: var(--gap-12);\n    will-change: transform;\n\n    &.withoutMargin {\n        margin-top: var(--gap-0);\n    }\n}\n\n.component .notification.notification {\n    position: static;\n}\n\n@media (--tablet-s) {\n    .component {\n        right: var(--gap-48);\n    }\n\n    .component .notification {\n        width: auto;\n    }\n}\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,WAAW,CAAC,uCAAuC,CAAC,cAAc,CAAC,0CAA0C,CAAC,eAAe,CAAC,2CAA2C,CAAC;;;;"}

package/index.css

@@ -7,47 +7,30 @@
     --gap-24: var(--gap-xl);
     --gap-48: var(--gap-4xl);
 }
-.notification-manager__component_1an0j {
+.notification-manager__component_8dpq7 {
     position: fixed;
     top: var(--gap-0);
     right: var(--gap-12);
     display: flex;
     flex-direction: column;
 }
-.notification-manager__component_1an0j .notification-manager__notification_1an0j {
+.notification-manager__component_8dpq7 .notification-manager__notification_8dpq7 {
     width: calc(100vw - var(--gap-24));
     margin-top: var(--gap-12);
     will-change: transform;
 }
-.notification-manager__component_1an0j .notification-manager__notification_1an0j.notification-manager__withoutMargin_1an0j {
+.notification-manager__component_8dpq7 .notification-manager__notification_8dpq7.notification-manager__withoutMargin_8dpq7 {
         margin-top: var(--gap-0);
     }
-.notification-manager__component_1an0j .notification-manager__notification_1an0j.notification-manager__notification_1an0j {
+.notification-manager__component_8dpq7 .notification-manager__notification_8dpq7.notification-manager__notification_8dpq7 {
     position: static;
 }
-.notification-manager__enter_1an0j {
-    visibility: hidden;
-    transform: translate(0, -500px);
-}
-.notification-manager__enterActive_1an0j {
-    visibility: visible;
-    transform: translate(0);
-    transition: transform 0.4s ease-out;
-}
 @media (min-width: 600px) {
-    .notification-manager__component_1an0j {
+    .notification-manager__component_8dpq7 {
         right: var(--gap-48);
     }
 
-    .notification-manager__component_1an0j .notification-manager__notification_1an0j {
+    .notification-manager__component_8dpq7 .notification-manager__notification_8dpq7 {
         width: auto;
     }
-
-    .notification-manager__enter_1an0j {
-        transform: translate(100%, 0);
-    }
-
-    .notification-manager__enterActive_1an0j {
-        transform: translate(0);
-    }
 }

package/index.module.css.js

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"component":"notification-manager__component_1an0j","notification":"notification-manager__notification_1an0j","withoutMargin":"notification-manager__withoutMargin_1an0j","enter":"notification-manager__enter_1an0j","enterActive":"notification-manager__enterActive_1an0j"};
+var styles = {"component":"notification-manager__component_8dpq7","notification":"notification-manager__notification_8dpq7","withoutMargin":"notification-manager__withoutMargin_8dpq7"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/index.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.component {\n    position: fixed;\n    top: var(--gap-0);\n    right: var(--gap-12);\n    display: flex;\n    flex-direction: column;\n}\n\n.component .notification {\n    width: calc(100vw - var(--gap-24));\n    margin-top: var(--gap-12);\n    will-change: transform;\n\n    &.withoutMargin {\n        margin-top: var(--gap-0);\n    }\n}\n\n.component .notification.notification {\n    position: static;\n}\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    .component {\n        right: var(--gap-48);\n    }\n\n    .component .notification {\n        width: auto;\n    }\n\n    .enter {\n        transform: translate(100%, 0);\n    }\n\n    .enterActive {\n        transform: translate(0);\n    }\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,WAAW,CAAC,uCAAuC,CAAC,cAAc,CAAC,0CAA0C,CAAC,eAAe,CAAC,2CAA2C,CAAC,OAAO,CAAC,mCAAmC,CAAC,aAAa,CAAC,yCAAyC,CAAC;;;;"}
+{"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.component {\n    position: fixed;\n    top: var(--gap-0);\n    right: var(--gap-12);\n    display: flex;\n    flex-direction: column;\n}\n\n.component .notification {\n    width: calc(100vw - var(--gap-24));\n    margin-top: var(--gap-12);\n    will-change: transform;\n\n    &.withoutMargin {\n        margin-top: var(--gap-0);\n    }\n}\n\n.component .notification.notification {\n    position: static;\n}\n\n@media (--tablet-s) {\n    .component {\n        right: var(--gap-48);\n    }\n\n    .component .notification {\n        width: auto;\n    }\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,WAAW,CAAC,uCAAuC,CAAC,cAAc,CAAC,0CAA0C,CAAC,eAAe,CAAC,2CAA2C,CAAC;;;;"}

package/modern/component.d.ts

@@ -1,7 +1,7 @@
 import React, { type HTMLAttributes } from 'react';
 import { type PortalProps } from '@alfalab/core-components-portal/modern';
 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/modern/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/modern';
 import { Stack } from '@alfalab/core-components-stack/modern';
@@ -7,27 +7,15 @@ import { stackingOrder } from '@alfalab/core-components-stack-context/modern';
 import { Notification } from './components/notification/component.js';
 import styles from './index.module.css.js';
 
-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/modern/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/modern/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/modern';
 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/modern/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.js';
 
-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/modern/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/modern/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/modern/components/notification/index.module.css.js

@@ -0,0 +1,6 @@
+import './index.css';
+
+const styles = {"enter":"notification-manager__enter_4ws0s","enterActive":"notification-manager__enterActive_4ws0s"};
+
+export { styles as default };
+//# sourceMappingURL=index.module.css.js.map

package/modern/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,eAAe,CAAC,OAAO,CAAC,mCAAmC,CAAC,aAAa,CAAC,yCAAyC,CAAC;;;;"}

package/modern/index.css

@@ -7,47 +7,30 @@
     --gap-24: var(--gap-xl);
     --gap-48: var(--gap-4xl);
 }
-.notification-manager__component_1an0j {
+.notification-manager__component_8dpq7 {
     position: fixed;
     top: var(--gap-0);
     right: var(--gap-12);
     display: flex;
     flex-direction: column;
 }
-.notification-manager__component_1an0j .notification-manager__notification_1an0j {
+.notification-manager__component_8dpq7 .notification-manager__notification_8dpq7 {
     width: calc(100vw - var(--gap-24));
     margin-top: var(--gap-12);
     will-change: transform;
 }
-.notification-manager__component_1an0j .notification-manager__notification_1an0j.notification-manager__withoutMargin_1an0j {
+.notification-manager__component_8dpq7 .notification-manager__notification_8dpq7.notification-manager__withoutMargin_8dpq7 {
         margin-top: var(--gap-0);
     }
-.notification-manager__component_1an0j .notification-manager__notification_1an0j.notification-manager__notification_1an0j {
+.notification-manager__component_8dpq7 .notification-manager__notification_8dpq7.notification-manager__notification_8dpq7 {
     position: static;
 }
-.notification-manager__enter_1an0j {
-    visibility: hidden;
-    transform: translate(0, -500px);
-}
-.notification-manager__enterActive_1an0j {
-    visibility: visible;
-    transform: translate(0);
-    transition: transform 0.4s ease-out;
-}
 @media (min-width: 600px) {
-    .notification-manager__component_1an0j {
+    .notification-manager__component_8dpq7 {
         right: var(--gap-48);
     }
 
-    .notification-manager__component_1an0j .notification-manager__notification_1an0j {
+    .notification-manager__component_8dpq7 .notification-manager__notification_8dpq7 {
         width: auto;
     }
-
-    .notification-manager__enter_1an0j {
-        transform: translate(100%, 0);
-    }
-
-    .notification-manager__enterActive_1an0j {
-        transform: translate(0);
-    }
 }

package/modern/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"component":"notification-manager__component_1an0j","notification":"notification-manager__notification_1an0j","withoutMargin":"notification-manager__withoutMargin_1an0j","enter":"notification-manager__enter_1an0j","enterActive":"notification-manager__enterActive_1an0j"};
+const styles = {"component":"notification-manager__component_8dpq7","notification":"notification-manager__notification_8dpq7","withoutMargin":"notification-manager__withoutMargin_8dpq7"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/index.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.component {\n    position: fixed;\n    top: var(--gap-0);\n    right: var(--gap-12);\n    display: flex;\n    flex-direction: column;\n}\n\n.component .notification {\n    width: calc(100vw - var(--gap-24));\n    margin-top: var(--gap-12);\n    will-change: transform;\n\n    &.withoutMargin {\n        margin-top: var(--gap-0);\n    }\n}\n\n.component .notification.notification {\n    position: static;\n}\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    .component {\n        right: var(--gap-48);\n    }\n\n    .component .notification {\n        width: auto;\n    }\n\n    .enter {\n        transform: translate(100%, 0);\n    }\n\n    .enterActive {\n        transform: translate(0);\n    }\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,WAAW,CAAC,uCAAuC,CAAC,cAAc,CAAC,0CAA0C,CAAC,eAAe,CAAC,2CAA2C,CAAC,OAAO,CAAC,mCAAmC,CAAC,aAAa,CAAC,yCAAyC,CAAC;;;;"}
+{"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.component {\n    position: fixed;\n    top: var(--gap-0);\n    right: var(--gap-12);\n    display: flex;\n    flex-direction: column;\n}\n\n.component .notification {\n    width: calc(100vw - var(--gap-24));\n    margin-top: var(--gap-12);\n    will-change: transform;\n\n    &.withoutMargin {\n        margin-top: var(--gap-0);\n    }\n}\n\n.component .notification.notification {\n    position: static;\n}\n\n@media (--tablet-s) {\n    .component {\n        right: var(--gap-48);\n    }\n\n    .component .notification {\n        width: auto;\n    }\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,WAAW,CAAC,uCAAuC,CAAC,cAAc,CAAC,0CAA0C,CAAC,eAAe,CAAC,2CAA2C,CAAC;;;;"}

package/moderncssm/component.d.ts

@@ -1,7 +1,7 @@
 import React, { type HTMLAttributes } from 'react';
 import { type PortalProps } from '@alfalab/core-components-portal/moderncssm';
 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>>;