@alfalab/core-components-notification 7.5.9 → 8.0.0-snapshot-f57d3d0

package/Component.d.ts

@@ -1,8 +1,6 @@
-/// <reference types="react" />
-import React from 'react';
-import { MouseEvent } from "react";
-import { ToastPlateDesktopProps } from "@alfalab/core-components-toast-plate/desktop";
-type NotificationProps = ToastPlateDesktopProps & {
+import React, { MouseEvent } from 'react';
+import { ToastPlateDesktopProps } from '@alfalab/core-components-toast-plate/desktop';
+export declare type NotificationProps = ToastPlateDesktopProps & {
     /**
      * Управление видимостью компонента
      */
@@ -44,46 +42,4 @@ type NotificationProps = ToastPlateDesktopProps & {
      */
     onClickOutside?: (event?: MouseEvent<any>) => void;
 };
-declare const Notification: React.ForwardRefExoticComponent<ToastPlateDesktopProps & {
-    /**
-     * Управление видимостью компонента
-     */
-    visible?: boolean | undefined;
-    /**
-     * Отступ от верхнего края
-     */
-    offset?: number | undefined;
-    /**
-     * Время до закрытия компонента
-     */
-    autoCloseDelay?: number | null | undefined;
-    /**
-     * Использовать портал
-     */
-    usePortal?: boolean | undefined;
-    /**
-     * z-index компонента
-     */
-    zIndex?: number | undefined;
-    /**
-     * Позиционирование компонента от верхнего или нижнего края экрана
-     */
-    position?: "bottom" | "top" | undefined;
-    /**
-     * Обработчик события истечения времени до закрытия компонента
-     */
-    onCloseTimeout?: (() => void) | undefined;
-    /**
-     * Обработчик события наведения курсора на компонент
-     */
-    onMouseEnter?: ((event?: MouseEvent<HTMLDivElement>) => void) | undefined;
-    /**
-     * Обработчик события снятия курсора с компонента
-     */
-    onMouseLeave?: ((event?: MouseEvent<HTMLDivElement>) => void) | undefined;
-    /**
-     * Обработчик клика вне компонента
-     */
-    onClickOutside?: ((event?: MouseEvent<any>) => void) | undefined;
-} & React.RefAttributes<HTMLDivElement>>;
-export { NotificationProps, Notification };
+export declare const Notification: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/Component.js

@@ -10,9 +10,10 @@ var cn = require('classnames');
 var elementClosest = require('element-closest');
 var coreComponentsPortal = require('@alfalab/core-components-portal');
 var coreComponentsStack = require('@alfalab/core-components-stack');
+var coreComponentsStackContext = require('@alfalab/core-components-stack-context');
 var desktop = require('@alfalab/core-components-toast-plate/desktop');
-var stackContext = require('@alfalab/stack-context');
-var utils_index = require('./utils/index.js');
+var index = require('./utils/index.js');
+var index_module = require('./index.module.css.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -21,12 +22,9 @@ var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 var elementClosest__default = /*#__PURE__*/_interopDefaultCompat(elementClosest);
 
-var styles = {"notificationComponent":"notification__notificationComponent_df83f","isVisible":"notification__isVisible_df83f","isClosing":"notification__isClosing_df83f","toastContent":"notification__toastContent_df83f","actionSection":"notification__actionSection_df83f"};
-require('./index.css')
-
-var notificationClassNameSelector = ".".concat(styles.notificationComponent);
+var notificationClassNameSelector = ".".concat(index_module.notificationComponent);
 var Notification = React.forwardRef(function (_a, ref) {
-    var className = _a.className, actionSectionClassName = _a.actionSectionClassName, children = _a.children, visible = _a.visible, _b = _a.offset, offset = _b === void 0 ? 108 : _b, _c = _a.hasCloser, hasCloser = _c === void 0 ? true : _c, _d = _a.autoCloseDelay, autoCloseDelay = _d === void 0 ? 5000 : _d, _e = _a.usePortal, usePortal = _e === void 0 ? true : _e, _f = _a.zIndex, zIndex = _f === void 0 ? stackContext.stackingOrder.TOAST : _f, style = _a.style, _g = _a.position, position = _g === void 0 ? 'top' : _g, onClose = _a.onClose, onCloseTimeout = _a.onCloseTimeout, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onClickOutside = _a.onClickOutside, restProps = tslib.__rest(_a, ["className", "actionSectionClassName", "children", "visible", "offset", "hasCloser", "autoCloseDelay", "usePortal", "zIndex", "style", "position", "onClose", "onCloseTimeout", "onMouseEnter", "onMouseLeave", "onClickOutside"]);
+    var className = _a.className, actionSectionClassName = _a.actionSectionClassName, children = _a.children, visible = _a.visible, _b = _a.offset, offset = _b === void 0 ? 108 : _b, _c = _a.hasCloser, hasCloser = _c === void 0 ? true : _c, _d = _a.autoCloseDelay, autoCloseDelay = _d === void 0 ? 5000 : _d, _e = _a.usePortal, usePortal = _e === void 0 ? true : _e, _f = _a.zIndex, zIndex = _f === void 0 ? coreComponentsStackContext.stackingOrder.TOAST : _f, style = _a.style, _g = _a.position, position = _g === void 0 ? 'top' : _g, onClose = _a.onClose, onCloseTimeout = _a.onCloseTimeout, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onClickOutside = _a.onClickOutside, restProps = tslib.__rest(_a, ["className", "actionSectionClassName", "children", "visible", "offset", "hasCloser", "autoCloseDelay", "usePortal", "zIndex", "style", "position", "onClose", "onCloseTimeout", "onMouseEnter", "onMouseLeave", "onClickOutside"]);
     var notificationRef = React.useRef(null);
     var autoCloseTimeoutRef = React.useRef(0);
     var closeTimeoutRef = React.useRef(0);
@@ -80,7 +78,7 @@ var Notification = React.forwardRef(function (_a, ref) {
             onClickOutside(event);
         }
     }, [onClickOutside, visible]);
-    utils_index.useClickOutside(notificationRef, handleOutsideClick);
+    index.useClickOutside(notificationRef, handleOutsideClick);
     var swipeableHandlers = reactSwipeable.useSwipeable({
         onSwiped: function (_a) {
             var dir = _a.dir;
@@ -99,12 +97,13 @@ var Notification = React.forwardRef(function (_a, ref) {
         var _a, _b;
         return (React__default.default.createElement(Wrapper, null,
             React__default.default.createElement("div", tslib.__assign({}, swipeableHandlers),
-                React__default.default.createElement(desktop.ToastPlateDesktop, tslib.__assign({ className: cn__default.default(styles.notificationComponent, (_a = {},
-                        _a[styles.isVisible] = visible,
-                        _a[styles.isClosing] = isClosing,
-                        _a), className), contentClassName: styles.toastContent, actionSectionClassName: cn__default.default(actionSectionClassName, styles.actionSection), style: tslib.__assign((_b = {}, _b[position] = offset, _b.zIndex = computedZIndex, _b), style), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: mergeRefs__default.default([ref, notificationRef]), role: visible ? 'alert' : undefined, hasCloser: hasCloser, onClose: onClose }, restProps), children))));
+                React__default.default.createElement(desktop.ToastPlateDesktop, tslib.__assign({ className: cn__default.default(index_module.notificationComponent, (_a = {},
+                        _a[index_module.isVisible] = visible,
+                        _a[index_module.isClosing] = isClosing,
+                        _a), className), contentClassName: index_module.toastContent, actionSectionClassName: cn__default.default(actionSectionClassName, index_module.actionSection), style: tslib.__assign((_b = {}, _b[position] = offset, _b.zIndex = computedZIndex, _b), style), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: mergeRefs__default.default([ref, notificationRef]), role: visible ? 'alert' : undefined, hasCloser: hasCloser, onClose: onClose }, restProps), children))));
     }));
 });
 Notification.displayName = 'Notification';
 
 exports.Notification = Notification;
+//# sourceMappingURL=Component.js.map

package/Component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Component.js","sources":["src/Component.tsx"],"sourcesContent":["import React, {\n    forwardRef,\n    Fragment,\n    MouseEvent,\n    useCallback,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport { useSwipeable } from 'react-swipeable';\nimport cn from 'classnames';\nimport elementClosest from 'element-closest';\n\nimport { Portal } from '@alfalab/core-components-portal';\nimport { Stack } from '@alfalab/core-components-stack';\nimport { stackingOrder } from '@alfalab/core-components-stack-context';\nimport {\n    ToastPlateDesktop,\n    ToastPlateDesktopProps,\n} from '@alfalab/core-components-toast-plate/desktop';\n\nimport { useClickOutside } from './utils';\n\nimport styles from './index.module.css';\n\nexport type NotificationProps = ToastPlateDesktopProps & {\n    /**\n     * Управление видимостью компонента\n     */\n    visible?: boolean;\n\n    /**\n     * Отступ от верхнего края\n     */\n    offset?: number;\n\n    /**\n     * Время до закрытия компонента\n     */\n    autoCloseDelay?: number | null;\n\n    /**\n     * Использовать портал\n     */\n    usePortal?: boolean;\n\n    /**\n     * z-index компонента\n     */\n    zIndex?: number;\n\n    /**\n     * Позиционирование компонента от верхнего или нижнего края экрана\n     */\n    position?: 'top' | 'bottom';\n\n    /**\n     * Обработчик события истечения времени до закрытия компонента\n     */\n    onCloseTimeout?: () => void;\n\n    /**\n     * Обработчик события наведения курсора на компонент\n     */\n    onMouseEnter?: (event?: MouseEvent<HTMLDivElement>) => void;\n\n    /**\n     * Обработчик события снятия курсора с компонента\n     */\n    onMouseLeave?: (event?: MouseEvent<HTMLDivElement>) => void;\n\n    /**\n     * Обработчик клика вне компонента\n     */\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    onClickOutside?: (event?: MouseEvent<any>) => void;\n};\n\nconst notificationClassNameSelector = `.${styles.notificationComponent}`;\n\nexport const Notification = forwardRef<HTMLDivElement, NotificationProps>(\n    (\n        {\n            className,\n            actionSectionClassName,\n            children,\n            visible,\n            offset = 108,\n            hasCloser = true,\n            autoCloseDelay = 5000,\n            usePortal = true,\n            zIndex = stackingOrder.TOAST,\n            style,\n            position = 'top',\n            onClose,\n            onCloseTimeout,\n            onMouseEnter,\n            onMouseLeave,\n            onClickOutside,\n            ...restProps\n        },\n        ref,\n    ) => {\n        const notificationRef = useRef<HTMLDivElement>(null);\n        const autoCloseTimeoutRef = useRef(0);\n        const closeTimeoutRef = useRef(0);\n\n        const [isClosing, setIsClosing] = useState(false);\n\n        const startAutoCloseTimer = useCallback(() => {\n            if (autoCloseDelay !== null) {\n                autoCloseTimeoutRef.current = window.setTimeout(() => {\n                    if (onCloseTimeout) {\n                        onCloseTimeout();\n                    }\n                }, autoCloseDelay);\n            }\n        }, [autoCloseDelay, onCloseTimeout]);\n\n        const stopAutoCloseTimer = useCallback(() => {\n            clearTimeout(autoCloseTimeoutRef.current);\n        }, []);\n\n        useEffect(\n            () => () => {\n                clearTimeout(closeTimeoutRef.current);\n            },\n            [],\n        );\n\n        useEffect(() => {\n            elementClosest(window);\n        }, []);\n\n        useEffect(() => {\n            if (visible) {\n                startAutoCloseTimer();\n            }\n\n            return () => {\n                stopAutoCloseTimer();\n            };\n        }, [startAutoCloseTimer, stopAutoCloseTimer, visible]);\n\n        const handleMouseEnter = useCallback(\n            (event: React.MouseEvent<HTMLDivElement>) => {\n                stopAutoCloseTimer();\n\n                if (onMouseEnter) {\n                    onMouseEnter(event);\n                }\n            },\n            [onMouseEnter, stopAutoCloseTimer],\n        );\n\n        const handleMouseLeave = useCallback(\n            (event: React.MouseEvent<HTMLDivElement>) => {\n                stopAutoCloseTimer();\n                startAutoCloseTimer();\n\n                if (onMouseLeave) {\n                    onMouseLeave(event);\n                }\n            },\n            [onMouseLeave, startAutoCloseTimer, stopAutoCloseTimer],\n        );\n\n        const handleOutsideClick = useCallback(\n            (event: React.MouseEvent | React.TouchEvent) => {\n                const isTargetNotification = !!(event.target as Element).closest(\n                    notificationClassNameSelector,\n                );\n\n                /*\n                 * проверка isTargetNotification нужна для предотвращения срабатывания handleOutsideClick\n                 * при клике на другие нотификации, если их несколько на странице\n                 */\n                if (onClickOutside && visible && !isTargetNotification) {\n                    onClickOutside(event as React.MouseEvent);\n                }\n            },\n            [onClickOutside, visible],\n        );\n\n        useClickOutside(notificationRef, handleOutsideClick);\n\n        const swipeableHandlers = useSwipeable({\n            onSwiped: ({ dir }) => {\n                if (onClose && ['Left', 'Right', 'Up'].includes(dir)) {\n                    setIsClosing(true);\n\n                    closeTimeoutRef.current = window.setTimeout(() => {\n                        setIsClosing(false);\n                        onClose();\n                    }, 100);\n                }\n            },\n            delta: 100,\n        });\n\n        const Wrapper = usePortal ? Portal : Fragment;\n\n        return (\n            <Stack value={zIndex}>\n                {(computedZIndex) => (\n                    <Wrapper>\n                        <div {...swipeableHandlers}>\n                            <ToastPlateDesktop\n                                className={cn(\n                                    styles.notificationComponent,\n                                    {\n                                        [styles.isVisible]: visible,\n                                        [styles.isClosing]: isClosing,\n                                    },\n                                    className,\n                                )}\n                                contentClassName={styles.toastContent}\n                                actionSectionClassName={cn(\n                                    actionSectionClassName,\n                                    styles.actionSection,\n                                )}\n                                style={{\n                                    [position]: offset,\n                                    zIndex: computedZIndex,\n                                    ...style,\n                                }}\n                                onMouseEnter={handleMouseEnter}\n                                onMouseLeave={handleMouseLeave}\n                                ref={mergeRefs([ref, notificationRef])}\n                                role={visible ? 'alert' : undefined}\n                                hasCloser={hasCloser}\n                                onClose={onClose}\n                                {...restProps}\n                            >\n                                {children}\n                            </ToastPlateDesktop>\n                        </div>\n                    </Wrapper>\n                )}\n            </Stack>\n        );\n    },\n);\n\nNotification.displayName = 'Notification';\n"],"names":["styles","forwardRef","stackingOrder","__rest","useRef","useState","useCallback","useEffect","elementClosest","useClickOutside","useSwipeable","Portal","Fragment","React","Stack","__assign","ToastPlateDesktop","cn","mergeRefs"],"mappings":"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"}

package/cssm/Component.d.ts

@@ -1,8 +1,6 @@
-/// <reference types="react" />
-import React from 'react';
-import { MouseEvent } from "react";
-import { ToastPlateDesktopProps } from "@alfalab/core-components-toast-plate/desktop";
-type NotificationProps = ToastPlateDesktopProps & {
+import React, { MouseEvent } from 'react';
+import { ToastPlateDesktopProps } from '@alfalab/core-components-toast-plate/desktop';
+export declare type NotificationProps = ToastPlateDesktopProps & {
     /**
      * Управление видимостью компонента
      */
@@ -44,46 +42,4 @@ type NotificationProps = ToastPlateDesktopProps & {
      */
     onClickOutside?: (event?: MouseEvent<any>) => void;
 };
-declare const Notification: React.ForwardRefExoticComponent<ToastPlateDesktopProps & {
-    /**
-     * Управление видимостью компонента
-     */
-    visible?: boolean | undefined;
-    /**
-     * Отступ от верхнего края
-     */
-    offset?: number | undefined;
-    /**
-     * Время до закрытия компонента
-     */
-    autoCloseDelay?: number | null | undefined;
-    /**
-     * Использовать портал
-     */
-    usePortal?: boolean | undefined;
-    /**
-     * z-index компонента
-     */
-    zIndex?: number | undefined;
-    /**
-     * Позиционирование компонента от верхнего или нижнего края экрана
-     */
-    position?: "bottom" | "top" | undefined;
-    /**
-     * Обработчик события истечения времени до закрытия компонента
-     */
-    onCloseTimeout?: (() => void) | undefined;
-    /**
-     * Обработчик события наведения курсора на компонент
-     */
-    onMouseEnter?: ((event?: MouseEvent<HTMLDivElement>) => void) | undefined;
-    /**
-     * Обработчик события снятия курсора с компонента
-     */
-    onMouseLeave?: ((event?: MouseEvent<HTMLDivElement>) => void) | undefined;
-    /**
-     * Обработчик клика вне компонента
-     */
-    onClickOutside?: ((event?: MouseEvent<any>) => void) | undefined;
-} & React.RefAttributes<HTMLDivElement>>;
-export { NotificationProps, Notification };
+export declare const Notification: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/cssm/Component.js

@@ -8,11 +8,11 @@ var mergeRefs = require('react-merge-refs');
 var reactSwipeable = require('react-swipeable');
 var cn = require('classnames');
 var elementClosest = require('element-closest');
-var coreComponentsPortal = require('@alfalab/core-components-portal/cssm');
-var coreComponentsStack = require('@alfalab/core-components-stack/cssm');
+var cssm$2 = require('@alfalab/core-components-portal/cssm');
+var cssm$1 = require('@alfalab/core-components-stack/cssm');
+var cssm = require('@alfalab/core-components-stack-context/cssm');
 var desktop = require('@alfalab/core-components-toast-plate/cssm/desktop');
-var stackContext = require('@alfalab/stack-context');
-var utils_index = require('./utils/index.js');
+var index = require('./utils/index.js');
 var styles = require('./index.module.css');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -25,7 +25,7 @@ var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
 var notificationClassNameSelector = ".".concat(styles__default.default.notificationComponent);
 var Notification = React.forwardRef(function (_a, ref) {
-    var className = _a.className, actionSectionClassName = _a.actionSectionClassName, children = _a.children, visible = _a.visible, _b = _a.offset, offset = _b === void 0 ? 108 : _b, _c = _a.hasCloser, hasCloser = _c === void 0 ? true : _c, _d = _a.autoCloseDelay, autoCloseDelay = _d === void 0 ? 5000 : _d, _e = _a.usePortal, usePortal = _e === void 0 ? true : _e, _f = _a.zIndex, zIndex = _f === void 0 ? stackContext.stackingOrder.TOAST : _f, style = _a.style, _g = _a.position, position = _g === void 0 ? 'top' : _g, onClose = _a.onClose, onCloseTimeout = _a.onCloseTimeout, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onClickOutside = _a.onClickOutside, restProps = tslib.__rest(_a, ["className", "actionSectionClassName", "children", "visible", "offset", "hasCloser", "autoCloseDelay", "usePortal", "zIndex", "style", "position", "onClose", "onCloseTimeout", "onMouseEnter", "onMouseLeave", "onClickOutside"]);
+    var className = _a.className, actionSectionClassName = _a.actionSectionClassName, children = _a.children, visible = _a.visible, _b = _a.offset, offset = _b === void 0 ? 108 : _b, _c = _a.hasCloser, hasCloser = _c === void 0 ? true : _c, _d = _a.autoCloseDelay, autoCloseDelay = _d === void 0 ? 5000 : _d, _e = _a.usePortal, usePortal = _e === void 0 ? true : _e, _f = _a.zIndex, zIndex = _f === void 0 ? cssm.stackingOrder.TOAST : _f, style = _a.style, _g = _a.position, position = _g === void 0 ? 'top' : _g, onClose = _a.onClose, onCloseTimeout = _a.onCloseTimeout, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onClickOutside = _a.onClickOutside, restProps = tslib.__rest(_a, ["className", "actionSectionClassName", "children", "visible", "offset", "hasCloser", "autoCloseDelay", "usePortal", "zIndex", "style", "position", "onClose", "onCloseTimeout", "onMouseEnter", "onMouseLeave", "onClickOutside"]);
     var notificationRef = React.useRef(null);
     var autoCloseTimeoutRef = React.useRef(0);
     var closeTimeoutRef = React.useRef(0);
@@ -79,7 +79,7 @@ var Notification = React.forwardRef(function (_a, ref) {
             onClickOutside(event);
         }
     }, [onClickOutside, visible]);
-    utils_index.useClickOutside(notificationRef, handleOutsideClick);
+    index.useClickOutside(notificationRef, handleOutsideClick);
     var swipeableHandlers = reactSwipeable.useSwipeable({
         onSwiped: function (_a) {
             var dir = _a.dir;
@@ -93,8 +93,8 @@ var Notification = React.forwardRef(function (_a, ref) {
         },
         delta: 100,
     });
-    var Wrapper = usePortal ? coreComponentsPortal.Portal : React.Fragment;
-    return (React__default.default.createElement(coreComponentsStack.Stack, { value: zIndex }, function (computedZIndex) {
+    var Wrapper = usePortal ? cssm$2.Portal : React.Fragment;
+    return (React__default.default.createElement(cssm$1.Stack, { value: zIndex }, function (computedZIndex) {
         var _a, _b;
         return (React__default.default.createElement(Wrapper, null,
             React__default.default.createElement("div", tslib.__assign({}, swipeableHandlers),
@@ -107,3 +107,4 @@ var Notification = React.forwardRef(function (_a, ref) {
 Notification.displayName = 'Notification';
 
 exports.Notification = Notification;
+//# sourceMappingURL=Component.js.map

package/cssm/Component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, {\n    forwardRef,\n    Fragment,\n    MouseEvent,\n    useCallback,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport { useSwipeable } from 'react-swipeable';\nimport cn from 'classnames';\nimport elementClosest from 'element-closest';\n\nimport { Portal } from '@alfalab/core-components-portal';\nimport { Stack } from '@alfalab/core-components-stack';\nimport { stackingOrder } from '@alfalab/core-components-stack-context';\nimport {\n    ToastPlateDesktop,\n    ToastPlateDesktopProps,\n} from '@alfalab/core-components-toast-plate/desktop';\n\nimport { useClickOutside } from './utils';\n\nimport styles from './index.module.css';\n\nexport type NotificationProps = ToastPlateDesktopProps & {\n    /**\n     * Управление видимостью компонента\n     */\n    visible?: boolean;\n\n    /**\n     * Отступ от верхнего края\n     */\n    offset?: number;\n\n    /**\n     * Время до закрытия компонента\n     */\n    autoCloseDelay?: number | null;\n\n    /**\n     * Использовать портал\n     */\n    usePortal?: boolean;\n\n    /**\n     * z-index компонента\n     */\n    zIndex?: number;\n\n    /**\n     * Позиционирование компонента от верхнего или нижнего края экрана\n     */\n    position?: 'top' | 'bottom';\n\n    /**\n     * Обработчик события истечения времени до закрытия компонента\n     */\n    onCloseTimeout?: () => void;\n\n    /**\n     * Обработчик события наведения курсора на компонент\n     */\n    onMouseEnter?: (event?: MouseEvent<HTMLDivElement>) => void;\n\n    /**\n     * Обработчик события снятия курсора с компонента\n     */\n    onMouseLeave?: (event?: MouseEvent<HTMLDivElement>) => void;\n\n    /**\n     * Обработчик клика вне компонента\n     */\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    onClickOutside?: (event?: MouseEvent<any>) => void;\n};\n\nconst notificationClassNameSelector = `.${styles.notificationComponent}`;\n\nexport const Notification = forwardRef<HTMLDivElement, NotificationProps>(\n    (\n        {\n            className,\n            actionSectionClassName,\n            children,\n            visible,\n            offset = 108,\n            hasCloser = true,\n            autoCloseDelay = 5000,\n            usePortal = true,\n            zIndex = stackingOrder.TOAST,\n            style,\n            position = 'top',\n            onClose,\n            onCloseTimeout,\n            onMouseEnter,\n            onMouseLeave,\n            onClickOutside,\n            ...restProps\n        },\n        ref,\n    ) => {\n        const notificationRef = useRef<HTMLDivElement>(null);\n        const autoCloseTimeoutRef = useRef(0);\n        const closeTimeoutRef = useRef(0);\n\n        const [isClosing, setIsClosing] = useState(false);\n\n        const startAutoCloseTimer = useCallback(() => {\n            if (autoCloseDelay !== null) {\n                autoCloseTimeoutRef.current = window.setTimeout(() => {\n                    if (onCloseTimeout) {\n                        onCloseTimeout();\n                    }\n                }, autoCloseDelay);\n            }\n        }, [autoCloseDelay, onCloseTimeout]);\n\n        const stopAutoCloseTimer = useCallback(() => {\n            clearTimeout(autoCloseTimeoutRef.current);\n        }, []);\n\n        useEffect(\n            () => () => {\n                clearTimeout(closeTimeoutRef.current);\n            },\n            [],\n        );\n\n        useEffect(() => {\n            elementClosest(window);\n        }, []);\n\n        useEffect(() => {\n            if (visible) {\n                startAutoCloseTimer();\n            }\n\n            return () => {\n                stopAutoCloseTimer();\n            };\n        }, [startAutoCloseTimer, stopAutoCloseTimer, visible]);\n\n        const handleMouseEnter = useCallback(\n            (event: React.MouseEvent<HTMLDivElement>) => {\n                stopAutoCloseTimer();\n\n                if (onMouseEnter) {\n                    onMouseEnter(event);\n                }\n            },\n            [onMouseEnter, stopAutoCloseTimer],\n        );\n\n        const handleMouseLeave = useCallback(\n            (event: React.MouseEvent<HTMLDivElement>) => {\n                stopAutoCloseTimer();\n                startAutoCloseTimer();\n\n                if (onMouseLeave) {\n                    onMouseLeave(event);\n                }\n            },\n            [onMouseLeave, startAutoCloseTimer, stopAutoCloseTimer],\n        );\n\n        const handleOutsideClick = useCallback(\n            (event: React.MouseEvent | React.TouchEvent) => {\n                const isTargetNotification = !!(event.target as Element).closest(\n                    notificationClassNameSelector,\n                );\n\n                /*\n                 * проверка isTargetNotification нужна для предотвращения срабатывания handleOutsideClick\n                 * при клике на другие нотификации, если их несколько на странице\n                 */\n                if (onClickOutside && visible && !isTargetNotification) {\n                    onClickOutside(event as React.MouseEvent);\n                }\n            },\n            [onClickOutside, visible],\n        );\n\n        useClickOutside(notificationRef, handleOutsideClick);\n\n        const swipeableHandlers = useSwipeable({\n            onSwiped: ({ dir }) => {\n                if (onClose && ['Left', 'Right', 'Up'].includes(dir)) {\n                    setIsClosing(true);\n\n                    closeTimeoutRef.current = window.setTimeout(() => {\n                        setIsClosing(false);\n                        onClose();\n                    }, 100);\n                }\n            },\n            delta: 100,\n        });\n\n        const Wrapper = usePortal ? Portal : Fragment;\n\n        return (\n            <Stack value={zIndex}>\n                {(computedZIndex) => (\n                    <Wrapper>\n                        <div {...swipeableHandlers}>\n                            <ToastPlateDesktop\n                                className={cn(\n                                    styles.notificationComponent,\n                                    {\n                                        [styles.isVisible]: visible,\n                                        [styles.isClosing]: isClosing,\n                                    },\n                                    className,\n                                )}\n                                contentClassName={styles.toastContent}\n                                actionSectionClassName={cn(\n                                    actionSectionClassName,\n                                    styles.actionSection,\n                                )}\n                                style={{\n                                    [position]: offset,\n                                    zIndex: computedZIndex,\n                                    ...style,\n                                }}\n                                onMouseEnter={handleMouseEnter}\n                                onMouseLeave={handleMouseLeave}\n                                ref={mergeRefs([ref, notificationRef])}\n                                role={visible ? 'alert' : undefined}\n                                hasCloser={hasCloser}\n                                onClose={onClose}\n                                {...restProps}\n                            >\n                                {children}\n                            </ToastPlateDesktop>\n                        </div>\n                    </Wrapper>\n                )}\n            </Stack>\n        );\n    },\n);\n\nNotification.displayName = 'Notification';\n"],"names":["styles","forwardRef","stackingOrder","__rest","useRef","useState","useCallback","useEffect","elementClosest","useClickOutside","useSwipeable","Portal","Fragment","React","Stack","__assign","ToastPlateDesktop","cn","mergeRefs"],"mappings":"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"}

package/cssm/index.d.ts

@@ -1 +1 @@
-export * from "./Component";
+export * from './Component';

package/cssm/index.js

@@ -7,3 +7,4 @@ var Component = require('./Component.js');
 
 
 exports.Notification = Component.Notification;
+//# sourceMappingURL=index.js.map

package/cssm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/cssm/index.module.css

@@ -1,28 +1,9 @@
-:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
-} /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
-} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
-} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
-} :root {
-
-    /* Hard */
-
-    /* Up */
-
-    /* Hard up */
-} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
-
-    /* новые значения, используйте их */
-} :root { /* deprecated */ /* deprecated */
-    --gap-xs: 8px; /* deprecated */
-    --gap-s: 12px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
-    --gap-xl: 24px; /* deprecated */ /* deprecated */ /* deprecated */
-    --gap-4xl: 48px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
-    --gap-s-neg: -12px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
-
-    /* новые значения, используйте их */
-
-    /* no-unit может приводить к проблемам в calc (#1559) */
-    /* stylelint-disable-next-line length-zero-no-unit */
+:root {
+    --gap-xs: 8px;
+    --gap-s: 12px;
+    --gap-xl: 24px;
+    --gap-4xl: 48px;
+    --gap-s-neg: -12px;
     --gap-0: 0px;
     --gap-8: var(--gap-xs);
     --gap-12: var(--gap-s);
@@ -30,8 +11,6 @@
     --gap-48: var(--gap-4xl);
     --gap-12-neg: var(--gap-s-neg);
 } :root {
-} :root {
-} /* сбрасывает синюю подсветку при нажатии */ :root {
     --notification-desktop-content-width: 278px;
 } .notificationComponent {
     visibility: hidden;
@@ -40,6 +19,7 @@
     width: calc(100% - var(--gap-24));
     max-width: calc(100vw - var(--gap-24));
     -webkit-user-select: none;
+       -moz-user-select: none;
             user-select: none;
     transition: transform 0.4s ease-out
 } @media screen and (min-width: 600px) { .notificationComponent {

package/cssm/shared/index.d.ts

@@ -1 +1 @@
-export { getNotificationTestIds } from "../utils/getNotificationTestIds";
+export { getNotificationTestIds } from '../utils/getNotificationTestIds';

package/cssm/shared/index.js

@@ -2,8 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var utils_getNotificationTestIds = require('../utils/getNotificationTestIds.js');
+var getNotificationTestIds = require('../utils/getNotificationTestIds.js');
 
 
 
-exports.getNotificationTestIds = utils_getNotificationTestIds.getNotificationTestIds;
+exports.getNotificationTestIds = getNotificationTestIds.getNotificationTestIds;
+//# sourceMappingURL=index.js.map

package/cssm/shared/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/cssm/utils/getNotificationTestIds.d.ts

@@ -1,5 +1,4 @@
-declare function getNotificationTestIds(dataTestId: string): {
-    badge: string;
-    component: string;
+export declare function getNotificationTestIds(dataTestId: string): {
+    badge: any;
+    component: any;
 };
-export { getNotificationTestIds };

package/cssm/utils/getNotificationTestIds.js

@@ -2,29 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var detectBrowser = require('detect-browser');
-var React = require('react');
-require('@alfalab/hooks');
-
-function getDataTestId(dataTestId, element) {
-    var elementPart = element ? "-".concat(element.toLowerCase()) : '';
-    return dataTestId ? "".concat(dataTestId).concat(elementPart) : undefined;
-}
-
-detectBrowser.detect();
-
-detectBrowser.detect();
-
-React.createContext(function () { return null; });
-
-/* eslint-disable no-console */
-if (process.env.NODE_ENV === 'development') ;
+var cssm = require('@alfalab/core-components-shared/cssm');
 
 function getNotificationTestIds(dataTestId) {
     return {
-        badge: getDataTestId(dataTestId, 'badge'),
-        component: getDataTestId(dataTestId, 'component'),
+        badge: cssm.getDataTestId(dataTestId, 'badge'),
+        component: cssm.getDataTestId(dataTestId, 'component'),
     };
 }
 
 exports.getNotificationTestIds = getNotificationTestIds;
+//# sourceMappingURL=getNotificationTestIds.js.map

package/cssm/utils/getNotificationTestIds.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getNotificationTestIds.js","sources":["../../src/utils/getNotificationTestIds.ts"],"sourcesContent":["import { getDataTestId } from '@alfalab/core-components-shared';\n\nexport function getNotificationTestIds(dataTestId: string) {\n    return {\n        badge: getDataTestId(dataTestId, 'badge'),\n        component: getDataTestId(dataTestId, 'component'),\n    };\n}\n"],"names":["getDataTestId"],"mappings":";;;;;;AAEM,SAAU,sBAAsB,CAAC,UAAkB,EAAA;IACrD,OAAO;AACH,QAAA,KAAK,EAAEA,kBAAa,CAAC,UAAU,EAAE,OAAO,CAAC;AACzC,QAAA,SAAS,EAAEA,kBAAa,CAAC,UAAU,EAAE,WAAW,CAAC;KACpD;AACL;;;;"}

package/cssm/utils/index.d.ts

@@ -1,4 +1,2 @@
-/// <reference types="react" />
 import React from 'react';
-declare function useClickOutside(ref: React.RefObject<HTMLElement>, cb: (e: React.MouseEvent | React.TouchEvent) => void): void;
-export { useClickOutside };
+export declare function useClickOutside(ref: React.RefObject<HTMLElement>, cb: (e: React.MouseEvent | React.TouchEvent) => void): void;

package/cssm/utils/index.js

@@ -33,3 +33,4 @@ function useClickOutside(ref, cb) {
 }
 
 exports.useClickOutside = useClickOutside;
+//# sourceMappingURL=index.js.map

package/cssm/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/utils/index.ts"],"sourcesContent":["import React from 'react';\n\n/*\n * Дублирую хук из @alfalab/hooks, так как не подходят названия событий\n * https://github.com/core-ds/utils/blob/develop/packages/hooks/src/useClickOutside/hook.ts\n * issue завел, когда изменения будут реализованы, отсюда можно будет удалить\n * https://github.com/core-ds/utils/issues/35\n */\nexport function useClickOutside(\n    ref: React.RefObject<HTMLElement>,\n    cb: (e: React.MouseEvent | React.TouchEvent) => void,\n): void {\n    React.useEffect(() => {\n        // eslint-disable-next-line\n        const handler = (event: any) => {\n            if (!ref.current || ref.current.contains(event.target)) {\n                return;\n            }\n\n            cb(event);\n        };\n\n        document.addEventListener('click', handler);\n        document.addEventListener('touchend', handler);\n\n        return () => {\n            document.removeEventListener('click', handler);\n            document.removeEventListener('touchend', handler);\n        };\n    }, [ref, cb]);\n}\n"],"names":["React"],"mappings":";;;;;;;;;;AAEA;;;;;AAKG;AACa,SAAA,eAAe,CAC3B,GAAiC,EACjC,EAAoD,EAAA;IAEpDA,sBAAK,CAAC,SAAS,CAAC,YAAA;;QAEZ,IAAM,OAAO,GAAG,UAAC,KAAU,EAAA;AACvB,YAAA,IAAI,CAAC,GAAG,CAAC,OAAO,IAAI,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE;gBACpD;AACH;YAED,EAAE,CAAC,KAAK,CAAC;AACb,SAAC;AAED,QAAA,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,OAAO,CAAC;AAC3C,QAAA,QAAQ,CAAC,gBAAgB,CAAC,UAAU,EAAE,OAAO,CAAC;QAE9C,OAAO,YAAA;AACH,YAAA,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,OAAO,CAAC;AAC9C,YAAA,QAAQ,CAAC,mBAAmB,CAAC,UAAU,EAAE,OAAO,CAAC;AACrD,SAAC;AACL,KAAC,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;AACjB;;;;"}

package/esm/Component.d.ts

@@ -1,8 +1,6 @@
-/// <reference types="react" />
-import React from 'react';
-import { MouseEvent } from "react";
-import { ToastPlateDesktopProps } from "@alfalab/core-components-toast-plate/desktop";
-type NotificationProps = ToastPlateDesktopProps & {
+import React, { MouseEvent } from 'react';
+import { ToastPlateDesktopProps } from '@alfalab/core-components-toast-plate/desktop';
+export declare type NotificationProps = ToastPlateDesktopProps & {
     /**
      * Управление видимостью компонента
      */
@@ -44,46 +42,4 @@ type NotificationProps = ToastPlateDesktopProps & {
      */
     onClickOutside?: (event?: MouseEvent<any>) => void;
 };
-declare const Notification: React.ForwardRefExoticComponent<ToastPlateDesktopProps & {
-    /**
-     * Управление видимостью компонента
-     */
-    visible?: boolean | undefined;
-    /**
-     * Отступ от верхнего края
-     */
-    offset?: number | undefined;
-    /**
-     * Время до закрытия компонента
-     */
-    autoCloseDelay?: number | null | undefined;
-    /**
-     * Использовать портал
-     */
-    usePortal?: boolean | undefined;
-    /**
-     * z-index компонента
-     */
-    zIndex?: number | undefined;
-    /**
-     * Позиционирование компонента от верхнего или нижнего края экрана
-     */
-    position?: "bottom" | "top" | undefined;
-    /**
-     * Обработчик события истечения времени до закрытия компонента
-     */
-    onCloseTimeout?: (() => void) | undefined;
-    /**
-     * Обработчик события наведения курсора на компонент
-     */
-    onMouseEnter?: ((event?: MouseEvent<HTMLDivElement>) => void) | undefined;
-    /**
-     * Обработчик события снятия курсора с компонента
-     */
-    onMouseLeave?: ((event?: MouseEvent<HTMLDivElement>) => void) | undefined;
-    /**
-     * Обработчик клика вне компонента
-     */
-    onClickOutside?: ((event?: MouseEvent<any>) => void) | undefined;
-} & React.RefAttributes<HTMLDivElement>>;
-export { NotificationProps, Notification };
+export declare const Notification: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/esm/Component.js

@@ -6,12 +6,10 @@ import cn from 'classnames';
 import elementClosest from 'element-closest';
 import { Portal } from '@alfalab/core-components-portal/esm';
 import { Stack } from '@alfalab/core-components-stack/esm';
+import { stackingOrder } from '@alfalab/core-components-stack-context/esm';
 import { ToastPlateDesktop } from '@alfalab/core-components-toast-plate/esm/desktop';
-import { stackingOrder } from '@alfalab/stack-context';
 import { useClickOutside } from './utils/index.js';
-
-var styles = {"notificationComponent":"notification__notificationComponent_df83f","isVisible":"notification__isVisible_df83f","isClosing":"notification__isClosing_df83f","toastContent":"notification__toastContent_df83f","actionSection":"notification__actionSection_df83f"};
-require('./index.css')
+import styles from './index.module.css.js';
 
 var notificationClassNameSelector = ".".concat(styles.notificationComponent);
 var Notification = forwardRef(function (_a, ref) {
@@ -97,3 +95,4 @@ var Notification = forwardRef(function (_a, ref) {
 Notification.displayName = 'Notification';
 
 export { Notification };
+//# sourceMappingURL=Component.js.map

package/esm/Component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, {\n    forwardRef,\n    Fragment,\n    MouseEvent,\n    useCallback,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport { useSwipeable } from 'react-swipeable';\nimport cn from 'classnames';\nimport elementClosest from 'element-closest';\n\nimport { Portal } from '@alfalab/core-components-portal';\nimport { Stack } from '@alfalab/core-components-stack';\nimport { stackingOrder } from '@alfalab/core-components-stack-context';\nimport {\n    ToastPlateDesktop,\n    ToastPlateDesktopProps,\n} from '@alfalab/core-components-toast-plate/desktop';\n\nimport { useClickOutside } from './utils';\n\nimport styles from './index.module.css';\n\nexport type NotificationProps = ToastPlateDesktopProps & {\n    /**\n     * Управление видимостью компонента\n     */\n    visible?: boolean;\n\n    /**\n     * Отступ от верхнего края\n     */\n    offset?: number;\n\n    /**\n     * Время до закрытия компонента\n     */\n    autoCloseDelay?: number | null;\n\n    /**\n     * Использовать портал\n     */\n    usePortal?: boolean;\n\n    /**\n     * z-index компонента\n     */\n    zIndex?: number;\n\n    /**\n     * Позиционирование компонента от верхнего или нижнего края экрана\n     */\n    position?: 'top' | 'bottom';\n\n    /**\n     * Обработчик события истечения времени до закрытия компонента\n     */\n    onCloseTimeout?: () => void;\n\n    /**\n     * Обработчик события наведения курсора на компонент\n     */\n    onMouseEnter?: (event?: MouseEvent<HTMLDivElement>) => void;\n\n    /**\n     * Обработчик события снятия курсора с компонента\n     */\n    onMouseLeave?: (event?: MouseEvent<HTMLDivElement>) => void;\n\n    /**\n     * Обработчик клика вне компонента\n     */\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    onClickOutside?: (event?: MouseEvent<any>) => void;\n};\n\nconst notificationClassNameSelector = `.${styles.notificationComponent}`;\n\nexport const Notification = forwardRef<HTMLDivElement, NotificationProps>(\n    (\n        {\n            className,\n            actionSectionClassName,\n            children,\n            visible,\n            offset = 108,\n            hasCloser = true,\n            autoCloseDelay = 5000,\n            usePortal = true,\n            zIndex = stackingOrder.TOAST,\n            style,\n            position = 'top',\n            onClose,\n            onCloseTimeout,\n            onMouseEnter,\n            onMouseLeave,\n            onClickOutside,\n            ...restProps\n        },\n        ref,\n    ) => {\n        const notificationRef = useRef<HTMLDivElement>(null);\n        const autoCloseTimeoutRef = useRef(0);\n        const closeTimeoutRef = useRef(0);\n\n        const [isClosing, setIsClosing] = useState(false);\n\n        const startAutoCloseTimer = useCallback(() => {\n            if (autoCloseDelay !== null) {\n                autoCloseTimeoutRef.current = window.setTimeout(() => {\n                    if (onCloseTimeout) {\n                        onCloseTimeout();\n                    }\n                }, autoCloseDelay);\n            }\n        }, [autoCloseDelay, onCloseTimeout]);\n\n        const stopAutoCloseTimer = useCallback(() => {\n            clearTimeout(autoCloseTimeoutRef.current);\n        }, []);\n\n        useEffect(\n            () => () => {\n                clearTimeout(closeTimeoutRef.current);\n            },\n            [],\n        );\n\n        useEffect(() => {\n            elementClosest(window);\n        }, []);\n\n        useEffect(() => {\n            if (visible) {\n                startAutoCloseTimer();\n            }\n\n            return () => {\n                stopAutoCloseTimer();\n            };\n        }, [startAutoCloseTimer, stopAutoCloseTimer, visible]);\n\n        const handleMouseEnter = useCallback(\n            (event: React.MouseEvent<HTMLDivElement>) => {\n                stopAutoCloseTimer();\n\n                if (onMouseEnter) {\n                    onMouseEnter(event);\n                }\n            },\n            [onMouseEnter, stopAutoCloseTimer],\n        );\n\n        const handleMouseLeave = useCallback(\n            (event: React.MouseEvent<HTMLDivElement>) => {\n                stopAutoCloseTimer();\n                startAutoCloseTimer();\n\n                if (onMouseLeave) {\n                    onMouseLeave(event);\n                }\n            },\n            [onMouseLeave, startAutoCloseTimer, stopAutoCloseTimer],\n        );\n\n        const handleOutsideClick = useCallback(\n            (event: React.MouseEvent | React.TouchEvent) => {\n                const isTargetNotification = !!(event.target as Element).closest(\n                    notificationClassNameSelector,\n                );\n\n                /*\n                 * проверка isTargetNotification нужна для предотвращения срабатывания handleOutsideClick\n                 * при клике на другие нотификации, если их несколько на странице\n                 */\n                if (onClickOutside && visible && !isTargetNotification) {\n                    onClickOutside(event as React.MouseEvent);\n                }\n            },\n            [onClickOutside, visible],\n        );\n\n        useClickOutside(notificationRef, handleOutsideClick);\n\n        const swipeableHandlers = useSwipeable({\n            onSwiped: ({ dir }) => {\n                if (onClose && ['Left', 'Right', 'Up'].includes(dir)) {\n                    setIsClosing(true);\n\n                    closeTimeoutRef.current = window.setTimeout(() => {\n                        setIsClosing(false);\n                        onClose();\n                    }, 100);\n                }\n            },\n            delta: 100,\n        });\n\n        const Wrapper = usePortal ? Portal : Fragment;\n\n        return (\n            <Stack value={zIndex}>\n                {(computedZIndex) => (\n                    <Wrapper>\n                        <div {...swipeableHandlers}>\n                            <ToastPlateDesktop\n                                className={cn(\n                                    styles.notificationComponent,\n                                    {\n                                        [styles.isVisible]: visible,\n                                        [styles.isClosing]: isClosing,\n                                    },\n                                    className,\n                                )}\n                                contentClassName={styles.toastContent}\n                                actionSectionClassName={cn(\n                                    actionSectionClassName,\n                                    styles.actionSection,\n                                )}\n                                style={{\n                                    [position]: offset,\n                                    zIndex: computedZIndex,\n                                    ...style,\n                                }}\n                                onMouseEnter={handleMouseEnter}\n                                onMouseLeave={handleMouseLeave}\n                                ref={mergeRefs([ref, notificationRef])}\n                                role={visible ? 'alert' : undefined}\n                                hasCloser={hasCloser}\n                                onClose={onClose}\n                                {...restProps}\n                            >\n                                {children}\n                            </ToastPlateDesktop>\n                        </div>\n                    </Wrapper>\n                )}\n            </Stack>\n        );\n    },\n);\n\nNotification.displayName = 'Notification';\n"],"names":[],"mappings":"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"}