@alfalab/core-components-notification 8.0.1 → 8.0.2

package/Component.d.ts

@@ -1,5 +1,5 @@
-import React, { MouseEvent } from 'react';
-import { ToastPlateDesktopProps } from '@alfalab/core-components-toast-plate/desktop';
+import React, { type MouseEvent } from 'react';
+import { type ToastPlateDesktopProps } from '@alfalab/core-components-toast-plate/desktop';
 export declare type NotificationProps = ToastPlateDesktopProps & {
     /**
      * Управление видимостью компонента

package/Component.js.map

@@ -1 +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":";;;;;;;;;;;;;;;;;;;;;;;;AA+EA,IAAM,6BAA6B,GAAG,GAAA,CAAA,MAAA,CAAIA,YAAM,CAAC,qBAAqB,CAAE;IAE3D,YAAY,GAAGC,gBAAU,CAClC,UACI,EAkBC,EACD,GAAG,EAAA;AAlBC,IAAA,IAAA,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,sBAAsB,GAAA,EAAA,CAAA,sBAAA,EACtB,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,OAAO,aAAA,EACP,EAAA,GAAA,EAAA,CAAA,MAAY,EAAZ,MAAM,mBAAG,GAAG,GAAA,EAAA,EACZ,EAAA,GAAA,EAAA,CAAA,SAAgB,EAAhB,SAAS,GAAA,EAAA,KAAA,MAAA,GAAG,IAAI,GAAA,EAAA,EAChB,EAAqB,GAAA,EAAA,CAAA,cAAA,EAArB,cAAc,GAAA,EAAA,KAAA,MAAA,GAAG,IAAI,GAAA,EAAA,EACrB,EAAgB,GAAA,EAAA,CAAA,SAAA,EAAhB,SAAS,GAAG,EAAA,KAAA,MAAA,GAAA,IAAI,GAAA,EAAA,EAChB,cAA4B,EAA5B,MAAM,GAAG,EAAA,KAAA,MAAA,GAAAC,wCAAa,CAAC,KAAK,GAAA,EAAA,EAC5B,KAAK,WAAA,EACL,EAAA,GAAA,EAAA,CAAA,QAAgB,EAAhB,QAAQ,mBAAG,KAAK,GAAA,EAAA,EAChB,OAAO,aAAA,EACP,cAAc,GAAA,EAAA,CAAA,cAAA,EACd,YAAY,GAAA,EAAA,CAAA,YAAA,EACZ,YAAY,GAAA,EAAA,CAAA,YAAA,EACZ,cAAc,GAAA,EAAA,CAAA,cAAA,EACX,SAAS,GAAAC,YAAA,CAAA,EAAA,EAjBhB,kOAkBC,CADe;AAIhB,IAAA,IAAM,eAAe,GAAGC,YAAM,CAAiB,IAAI,CAAC;AACpD,IAAA,IAAM,mBAAmB,GAAGA,YAAM,CAAC,CAAC,CAAC;AACrC,IAAA,IAAM,eAAe,GAAGA,YAAM,CAAC,CAAC,CAAC;IAE3B,IAAA,EAAA,GAA4BC,cAAQ,CAAC,KAAK,CAAC,EAA1C,SAAS,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,YAAY,GAAA,EAAA,CAAA,CAAA,CAAmB;IAEjD,IAAM,mBAAmB,GAAGC,iBAAW,CAAC,YAAA;QACpC,IAAI,cAAc,KAAK,IAAI,EAAE;AACzB,YAAA,mBAAmB,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,YAAA;AAC5C,gBAAA,IAAI,cAAc,EAAE;AAChB,oBAAA,cAAc,EAAE;AACnB;aACJ,EAAE,cAAc,CAAC;AACrB;AACL,KAAC,EAAE,CAAC,cAAc,EAAE,cAAc,CAAC,CAAC;IAEpC,IAAM,kBAAkB,GAAGA,iBAAW,CAAC,YAAA;AACnC,QAAA,YAAY,CAAC,mBAAmB,CAAC,OAAO,CAAC;KAC5C,EAAE,EAAE,CAAC;IAENC,eAAS,CACL,cAAM,OAAA,YAAA;AACF,QAAA,YAAY,CAAC,eAAe,CAAC,OAAO,CAAC;AACzC,KAAC,CAFK,EAEL,EACD,EAAE,CACL;AAED,IAAAA,eAAS,CAAC,YAAA;QACNC,+BAAc,CAAC,MAAM,CAAC;KACzB,EAAE,EAAE,CAAC;AAEN,IAAAD,eAAS,CAAC,YAAA;AACN,QAAA,IAAI,OAAO,EAAE;AACT,YAAA,mBAAmB,EAAE;AACxB;QAED,OAAO,YAAA;AACH,YAAA,kBAAkB,EAAE;AACxB,SAAC;KACJ,EAAE,CAAC,mBAAmB,EAAE,kBAAkB,EAAE,OAAO,CAAC,CAAC;AAEtD,IAAA,IAAM,gBAAgB,GAAGD,iBAAW,CAChC,UAAC,KAAuC,EAAA;AACpC,QAAA,kBAAkB,EAAE;AAEpB,QAAA,IAAI,YAAY,EAAE;YACd,YAAY,CAAC,KAAK,CAAC;AACtB;AACL,KAAC,EACD,CAAC,YAAY,EAAE,kBAAkB,CAAC,CACrC;AAED,IAAA,IAAM,gBAAgB,GAAGA,iBAAW,CAChC,UAAC,KAAuC,EAAA;AACpC,QAAA,kBAAkB,EAAE;AACpB,QAAA,mBAAmB,EAAE;AAErB,QAAA,IAAI,YAAY,EAAE;YACd,YAAY,CAAC,KAAK,CAAC;AACtB;KACJ,EACD,CAAC,YAAY,EAAE,mBAAmB,EAAE,kBAAkB,CAAC,CAC1D;AAED,IAAA,IAAM,kBAAkB,GAAGA,iBAAW,CAClC,UAAC,KAA0C,EAAA;AACvC,QAAA,IAAM,oBAAoB,GAAG,CAAC,CAAE,KAAK,CAAC,MAAkB,CAAC,OAAO,CAC5D,6BAA6B,CAChC;AAED;;;AAGG;AACH,QAAA,IAAI,cAAc,IAAI,OAAO,IAAI,CAAC,oBAAoB,EAAE;YACpD,cAAc,CAAC,KAAyB,CAAC;AAC5C;AACL,KAAC,EACD,CAAC,cAAc,EAAE,OAAO,CAAC,CAC5B;AAED,IAAAG,qBAAe,CAAC,eAAe,EAAE,kBAAkB,CAAC;IAEpD,IAAM,iBAAiB,GAAGC,2BAAY,CAAC;QACnC,QAAQ,EAAE,UAAC,EAAO,EAAA;AAAL,YAAA,IAAA,GAAG,GAAA,EAAA,CAAA,GAAA;AACZ,YAAA,IAAI,OAAO,IAAI,CAAC,MAAM,EAAE,OAAO,EAAE,IAAI,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;gBAClD,YAAY,CAAC,IAAI,CAAC;AAElB,gBAAA,eAAe,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,YAAA;oBACxC,YAAY,CAAC,KAAK,CAAC;AACnB,oBAAA,OAAO,EAAE;iBACZ,EAAE,GAAG,CAAC;AACV;SACJ;AACD,QAAA,KAAK,EAAE,GAAG;AACb,KAAA,CAAC;IAEF,IAAM,OAAO,GAAG,SAAS,GAAGC,2BAAM,GAAGC,cAAQ;IAE7C,QACIC,qCAACC,yBAAK,EAAA,EAAC,KAAK,EAAE,MAAM,EACf,EAAA,UAAC,cAAc,EAAA;;QAAK,QACjBD,qCAAC,OAAO,EAAA,IAAA;AACJ,YAAAA,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAAE,cAAA,CAAA,EAAA,EAAS,iBAAiB,CAAA;gBACtBF,sBAAC,CAAA,aAAA,CAAAG,yBAAiB,mBACd,SAAS,EAAEC,mBAAE,CACTjB,YAAM,CAAC,qBAAqB,GAAA,EAAA,GAAA,EAAA;AAExB,wBAAA,EAAA,CAACA,YAAM,CAAC,SAAS,CAAA,GAAG,OAAO;AAC3B,wBAAA,EAAA,CAACA,YAAM,CAAC,SAAS,CAAA,GAAG,SAAS;AAEjC,wBAAA,EAAA,GAAA,SAAS,CACZ,EACD,gBAAgB,EAAEA,YAAM,CAAC,YAAY,EACrC,sBAAsB,EAAEiB,mBAAE,CACtB,sBAAsB,EACtBjB,YAAM,CAAC,aAAa,CACvB,EACD,KAAK,8BACA,QAAQ,CAAA,GAAG,MAAM,EAClB,SAAM,GAAE,cAAc,EACnB,EAAA,GAAA,KAAK,GAEZ,YAAY,EAAE,gBAAgB,EAC9B,YAAY,EAAE,gBAAgB,EAC9B,GAAG,EAAEkB,0BAAS,CAAC,CAAC,GAAG,EAAE,eAAe,CAAC,CAAC,EACtC,IAAI,EAAE,OAAO,GAAG,OAAO,GAAG,SAAS,EACnC,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAAA,EACZ,SAAS,CAEZ,EAAA,QAAQ,CACO,CAClB,CACA;KACb,CACG;AAEhB,CAAC;AAGL,YAAY,CAAC,WAAW,GAAG,cAAc;;;;"}
+{"version":3,"file":"Component.js","sources":["src/Component.tsx"],"sourcesContent":["import React, {\n    forwardRef,\n    Fragment,\n    type 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    type 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,5 +1,5 @@
-import React, { MouseEvent } from 'react';
-import { ToastPlateDesktopProps } from '@alfalab/core-components-toast-plate/cssm/desktop';
+import React, { type MouseEvent } from 'react';
+import { type ToastPlateDesktopProps } from '@alfalab/core-components-toast-plate/cssm/desktop';
 export declare type NotificationProps = ToastPlateDesktopProps & {
     /**
      * Управление видимостью компонента

package/cssm/Component.js.map

@@ -1 +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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"}
+{"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, {\n    forwardRef,\n    Fragment,\n    type 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    type 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.module.css

@@ -21,25 +21,25 @@
     -webkit-user-select: none;
        -moz-user-select: none;
             user-select: none;
-    transition: transform 0.4s ease-out
+    transition: transform 0.4s ease-out;
 } @media screen and (min-width: 600px) { .notificationComponent {
         right: var(--gap-48);
         width: auto;
-        transform: translate(calc(100% + var(--gap-48)), 0)
+        transform: translate(calc(100% + var(--gap-48)), 0);
 }
     } .notificationComponent.isVisible {
         visibility: visible;
         transform: translate(0, 0);
     } .notificationComponent.isClosing {
         transition: transform 0.1s ease-out;
-        transform: translate(100vw, 0)
+        transform: translate(100vw, 0);
     } @media screen and (min-width: 600px) { .notificationComponent.isClosing {
-            transform: translate(calc(100% + var(--gap-48)), 0)
+            transform: translate(calc(100% + var(--gap-48)), 0);
     }
         } .notificationComponent.notificationComponent {
     position: fixed;
 } @media screen and (min-width: 600px) { .toastContent {
-        width: var(--notification-desktop-content-width)
+        width: var(--notification-desktop-content-width);
 }
     } .actionSection {
     min-width: 104px;

package/esm/Component.d.ts

@@ -1,5 +1,5 @@
-import React, { MouseEvent } from 'react';
-import { ToastPlateDesktopProps } from '@alfalab/core-components-toast-plate/esm/desktop';
+import React, { type MouseEvent } from 'react';
+import { type ToastPlateDesktopProps } from '@alfalab/core-components-toast-plate/esm/desktop';
 export declare type NotificationProps = ToastPlateDesktopProps & {
     /**
      * Управление видимостью компонента

package/esm/Component.js.map

@@ -1 +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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"}
+{"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, {\n    forwardRef,\n    Fragment,\n    type 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    type 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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"}

package/esm/index.css

@@ -12,7 +12,7 @@
     --gap-12-neg: var(--gap-s-neg);
 } :root {
     --notification-desktop-content-width: 278px;
-} .notification__notificationComponent_1ba8n {
+} .notification__notificationComponent_yewgq {
     visibility: hidden;
     right: var(--gap-12);
     transform: translate(0, -500px);
@@ -21,27 +21,27 @@
     -webkit-user-select: none;
        -moz-user-select: none;
             user-select: none;
-    transition: transform 0.4s ease-out
-} @media screen and (min-width: 600px) { .notification__notificationComponent_1ba8n {
+    transition: transform 0.4s ease-out;
+} @media screen and (min-width: 600px) { .notification__notificationComponent_yewgq {
         right: var(--gap-48);
         width: auto;
-        transform: translate(calc(100% + var(--gap-48)), 0)
+        transform: translate(calc(100% + var(--gap-48)), 0);
 }
-    } .notification__notificationComponent_1ba8n.notification__isVisible_1ba8n {
+    } .notification__notificationComponent_yewgq.notification__isVisible_yewgq {
         visibility: visible;
         transform: translate(0, 0);
-    } .notification__notificationComponent_1ba8n.notification__isClosing_1ba8n {
+    } .notification__notificationComponent_yewgq.notification__isClosing_yewgq {
         transition: transform 0.1s ease-out;
-        transform: translate(100vw, 0)
-    } @media screen and (min-width: 600px) { .notification__notificationComponent_1ba8n.notification__isClosing_1ba8n {
-            transform: translate(calc(100% + var(--gap-48)), 0)
+        transform: translate(100vw, 0);
+    } @media screen and (min-width: 600px) { .notification__notificationComponent_yewgq.notification__isClosing_yewgq {
+            transform: translate(calc(100% + var(--gap-48)), 0);
     }
-        } .notification__notificationComponent_1ba8n.notification__notificationComponent_1ba8n {
+        } .notification__notificationComponent_yewgq.notification__notificationComponent_yewgq {
     position: fixed;
-} @media screen and (min-width: 600px) { .notification__toastContent_1ba8n {
-        width: var(--notification-desktop-content-width)
+} @media screen and (min-width: 600px) { .notification__toastContent_yewgq {
+        width: var(--notification-desktop-content-width);
 }
-    } .notification__actionSection_1ba8n {
+    } .notification__actionSection_yewgq {
     min-width: 104px;
     min-height: 48px;
     padding: var(--gap-0) var(--gap-8);

package/esm/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-var styles = {"notificationComponent":"notification__notificationComponent_1ba8n","isVisible":"notification__isVisible_1ba8n","isClosing":"notification__isClosing_1ba8n","toastContent":"notification__toastContent_1ba8n","actionSection":"notification__actionSection_1ba8n"};
+var styles = {"notificationComponent":"notification__notificationComponent_yewgq","isVisible":"notification__isVisible_yewgq","isClosing":"notification__isClosing_yewgq","toastContent":"notification__toastContent_yewgq","actionSection":"notification__actionSection_yewgq"};
 
 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:root {\n    --notification-desktop-content-width: 278px;\n}\n\n.notificationComponent {\n    visibility: hidden;\n    right: var(--gap-12);\n    transform: translate(0, -500px);\n    width: calc(100% - var(--gap-24));\n    max-width: calc(100vw - var(--gap-24));\n    user-select: none;\n    transition: transform 0.4s ease-out;\n\n    @media screen and (min-width: 600px) {\n        right: var(--gap-48);\n        width: auto;\n        transform: translate(calc(100% + var(--gap-48)), 0);\n    }\n\n    &.isVisible {\n        visibility: visible;\n        transform: translate(0, 0);\n    }\n\n    &.isClosing {\n        transition: transform 0.1s ease-out;\n        transform: translate(100vw, 0);\n\n        @media screen and (min-width: 600px) {\n            transform: translate(calc(100% + var(--gap-48)), 0);\n        }\n    }\n}\n\n.notificationComponent.notificationComponent {\n    position: fixed;\n}\n\n.toastContent {\n    @media screen and (min-width: 600px) {\n        width: var(--notification-desktop-content-width);\n    }\n}\n\n.actionSection {\n    min-width: 104px;\n    min-height: 48px;\n    padding: var(--gap-0) var(--gap-8);\n    margin: var(--gap-12-neg) var(--gap-0);\n}\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,uBAAuB,CAAC,2CAA2C,CAAC,WAAW,CAAC,+BAA+B,CAAC,WAAW,CAAC,+BAA+B,CAAC,cAAc,CAAC,kCAAkC,CAAC,eAAe,CAAC,mCAAmC,CAAC;;;;"}
+{"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-typography-index.css';\n\n:root {\n    --notification-desktop-content-width: 278px;\n}\n\n.notificationComponent {\n    visibility: hidden;\n    right: var(--gap-12);\n    transform: translate(0, -500px);\n    width: calc(100% - var(--gap-24));\n    max-width: calc(100vw - var(--gap-24));\n    user-select: none;\n    transition: transform 0.4s ease-out;\n\n    @media screen and (min-width: 600px) {\n        right: var(--gap-48);\n        width: auto;\n        transform: translate(calc(100% + var(--gap-48)), 0);\n    }\n\n    &.isVisible {\n        visibility: visible;\n        transform: translate(0, 0);\n    }\n\n    &.isClosing {\n        transition: transform 0.1s ease-out;\n        transform: translate(100vw, 0);\n\n        @media screen and (min-width: 600px) {\n            transform: translate(calc(100% + var(--gap-48)), 0);\n        }\n    }\n}\n\n.notificationComponent.notificationComponent {\n    position: fixed;\n}\n\n.toastContent {\n    @media screen and (min-width: 600px) {\n        width: var(--notification-desktop-content-width);\n    }\n}\n\n.actionSection {\n    min-width: 104px;\n    min-height: 48px;\n    padding: var(--gap-0) var(--gap-8);\n    margin: var(--gap-12-neg) var(--gap-0);\n}\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,uBAAuB,CAAC,2CAA2C,CAAC,WAAW,CAAC,+BAA+B,CAAC,WAAW,CAAC,+BAA+B,CAAC,cAAc,CAAC,kCAAkC,CAAC,eAAe,CAAC,mCAAmC,CAAC;;;;"}

package/index.css

@@ -12,7 +12,7 @@
     --gap-12-neg: var(--gap-s-neg);
 } :root {
     --notification-desktop-content-width: 278px;
-} .notification__notificationComponent_1ba8n {
+} .notification__notificationComponent_yewgq {
     visibility: hidden;
     right: var(--gap-12);
     transform: translate(0, -500px);
@@ -21,27 +21,27 @@
     -webkit-user-select: none;
        -moz-user-select: none;
             user-select: none;
-    transition: transform 0.4s ease-out
-} @media screen and (min-width: 600px) { .notification__notificationComponent_1ba8n {
+    transition: transform 0.4s ease-out;
+} @media screen and (min-width: 600px) { .notification__notificationComponent_yewgq {
         right: var(--gap-48);
         width: auto;
-        transform: translate(calc(100% + var(--gap-48)), 0)
+        transform: translate(calc(100% + var(--gap-48)), 0);
 }
-    } .notification__notificationComponent_1ba8n.notification__isVisible_1ba8n {
+    } .notification__notificationComponent_yewgq.notification__isVisible_yewgq {
         visibility: visible;
         transform: translate(0, 0);
-    } .notification__notificationComponent_1ba8n.notification__isClosing_1ba8n {
+    } .notification__notificationComponent_yewgq.notification__isClosing_yewgq {
         transition: transform 0.1s ease-out;
-        transform: translate(100vw, 0)
-    } @media screen and (min-width: 600px) { .notification__notificationComponent_1ba8n.notification__isClosing_1ba8n {
-            transform: translate(calc(100% + var(--gap-48)), 0)
+        transform: translate(100vw, 0);
+    } @media screen and (min-width: 600px) { .notification__notificationComponent_yewgq.notification__isClosing_yewgq {
+            transform: translate(calc(100% + var(--gap-48)), 0);
     }
-        } .notification__notificationComponent_1ba8n.notification__notificationComponent_1ba8n {
+        } .notification__notificationComponent_yewgq.notification__notificationComponent_yewgq {
     position: fixed;
-} @media screen and (min-width: 600px) { .notification__toastContent_1ba8n {
-        width: var(--notification-desktop-content-width)
+} @media screen and (min-width: 600px) { .notification__toastContent_yewgq {
+        width: var(--notification-desktop-content-width);
 }
-    } .notification__actionSection_1ba8n {
+    } .notification__actionSection_yewgq {
     min-width: 104px;
     min-height: 48px;
     padding: var(--gap-0) var(--gap-8);

package/index.module.css.js

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"notificationComponent":"notification__notificationComponent_1ba8n","isVisible":"notification__isVisible_1ba8n","isClosing":"notification__isClosing_1ba8n","toastContent":"notification__toastContent_1ba8n","actionSection":"notification__actionSection_1ba8n"};
+var styles = {"notificationComponent":"notification__notificationComponent_yewgq","isVisible":"notification__isVisible_yewgq","isClosing":"notification__isClosing_yewgq","toastContent":"notification__toastContent_yewgq","actionSection":"notification__actionSection_yewgq"};
 
 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:root {\n    --notification-desktop-content-width: 278px;\n}\n\n.notificationComponent {\n    visibility: hidden;\n    right: var(--gap-12);\n    transform: translate(0, -500px);\n    width: calc(100% - var(--gap-24));\n    max-width: calc(100vw - var(--gap-24));\n    user-select: none;\n    transition: transform 0.4s ease-out;\n\n    @media screen and (min-width: 600px) {\n        right: var(--gap-48);\n        width: auto;\n        transform: translate(calc(100% + var(--gap-48)), 0);\n    }\n\n    &.isVisible {\n        visibility: visible;\n        transform: translate(0, 0);\n    }\n\n    &.isClosing {\n        transition: transform 0.1s ease-out;\n        transform: translate(100vw, 0);\n\n        @media screen and (min-width: 600px) {\n            transform: translate(calc(100% + var(--gap-48)), 0);\n        }\n    }\n}\n\n.notificationComponent.notificationComponent {\n    position: fixed;\n}\n\n.toastContent {\n    @media screen and (min-width: 600px) {\n        width: var(--notification-desktop-content-width);\n    }\n}\n\n.actionSection {\n    min-width: 104px;\n    min-height: 48px;\n    padding: var(--gap-0) var(--gap-8);\n    margin: var(--gap-12-neg) var(--gap-0);\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,uBAAuB,CAAC,2CAA2C,CAAC,WAAW,CAAC,+BAA+B,CAAC,WAAW,CAAC,+BAA+B,CAAC,cAAc,CAAC,kCAAkC,CAAC,eAAe,CAAC,mCAAmC,CAAC;;;;"}
+{"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-typography-index.css';\n\n:root {\n    --notification-desktop-content-width: 278px;\n}\n\n.notificationComponent {\n    visibility: hidden;\n    right: var(--gap-12);\n    transform: translate(0, -500px);\n    width: calc(100% - var(--gap-24));\n    max-width: calc(100vw - var(--gap-24));\n    user-select: none;\n    transition: transform 0.4s ease-out;\n\n    @media screen and (min-width: 600px) {\n        right: var(--gap-48);\n        width: auto;\n        transform: translate(calc(100% + var(--gap-48)), 0);\n    }\n\n    &.isVisible {\n        visibility: visible;\n        transform: translate(0, 0);\n    }\n\n    &.isClosing {\n        transition: transform 0.1s ease-out;\n        transform: translate(100vw, 0);\n\n        @media screen and (min-width: 600px) {\n            transform: translate(calc(100% + var(--gap-48)), 0);\n        }\n    }\n}\n\n.notificationComponent.notificationComponent {\n    position: fixed;\n}\n\n.toastContent {\n    @media screen and (min-width: 600px) {\n        width: var(--notification-desktop-content-width);\n    }\n}\n\n.actionSection {\n    min-width: 104px;\n    min-height: 48px;\n    padding: var(--gap-0) var(--gap-8);\n    margin: var(--gap-12-neg) var(--gap-0);\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,uBAAuB,CAAC,2CAA2C,CAAC,WAAW,CAAC,+BAA+B,CAAC,WAAW,CAAC,+BAA+B,CAAC,cAAc,CAAC,kCAAkC,CAAC,eAAe,CAAC,mCAAmC,CAAC;;;;"}

package/modern/Component.d.ts

@@ -1,5 +1,5 @@
-import React, { MouseEvent } from 'react';
-import { ToastPlateDesktopProps } from '@alfalab/core-components-toast-plate/modern/desktop';
+import React, { type MouseEvent } from 'react';
+import { type ToastPlateDesktopProps } from '@alfalab/core-components-toast-plate/modern/desktop';
 export declare type NotificationProps = ToastPlateDesktopProps & {
     /**
      * Управление видимостью компонента

package/modern/Component.js.map

@@ -1 +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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"}
+{"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, {\n    forwardRef,\n    Fragment,\n    type 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    type 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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"}

package/modern/index.css

@@ -12,7 +12,7 @@
     --gap-12-neg: var(--gap-s-neg);
 } :root {
     --notification-desktop-content-width: 278px;
-} .notification__notificationComponent_1ba8n {
+} .notification__notificationComponent_yewgq {
     visibility: hidden;
     right: var(--gap-12);
     transform: translate(0, -500px);
@@ -21,27 +21,27 @@
     -webkit-user-select: none;
        -moz-user-select: none;
             user-select: none;
-    transition: transform 0.4s ease-out
-} @media screen and (min-width: 600px) { .notification__notificationComponent_1ba8n {
+    transition: transform 0.4s ease-out;
+} @media screen and (min-width: 600px) { .notification__notificationComponent_yewgq {
         right: var(--gap-48);
         width: auto;
-        transform: translate(calc(100% + var(--gap-48)), 0)
+        transform: translate(calc(100% + var(--gap-48)), 0);
 }
-    } .notification__notificationComponent_1ba8n.notification__isVisible_1ba8n {
+    } .notification__notificationComponent_yewgq.notification__isVisible_yewgq {
         visibility: visible;
         transform: translate(0, 0);
-    } .notification__notificationComponent_1ba8n.notification__isClosing_1ba8n {
+    } .notification__notificationComponent_yewgq.notification__isClosing_yewgq {
         transition: transform 0.1s ease-out;
-        transform: translate(100vw, 0)
-    } @media screen and (min-width: 600px) { .notification__notificationComponent_1ba8n.notification__isClosing_1ba8n {
-            transform: translate(calc(100% + var(--gap-48)), 0)
+        transform: translate(100vw, 0);
+    } @media screen and (min-width: 600px) { .notification__notificationComponent_yewgq.notification__isClosing_yewgq {
+            transform: translate(calc(100% + var(--gap-48)), 0);
     }
-        } .notification__notificationComponent_1ba8n.notification__notificationComponent_1ba8n {
+        } .notification__notificationComponent_yewgq.notification__notificationComponent_yewgq {
     position: fixed;
-} @media screen and (min-width: 600px) { .notification__toastContent_1ba8n {
-        width: var(--notification-desktop-content-width)
+} @media screen and (min-width: 600px) { .notification__toastContent_yewgq {
+        width: var(--notification-desktop-content-width);
 }
-    } .notification__actionSection_1ba8n {
+    } .notification__actionSection_yewgq {
     min-width: 104px;
     min-height: 48px;
     padding: var(--gap-0) var(--gap-8);

package/modern/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"notificationComponent":"notification__notificationComponent_1ba8n","isVisible":"notification__isVisible_1ba8n","isClosing":"notification__isClosing_1ba8n","toastContent":"notification__toastContent_1ba8n","actionSection":"notification__actionSection_1ba8n"};
+const styles = {"notificationComponent":"notification__notificationComponent_yewgq","isVisible":"notification__isVisible_yewgq","isClosing":"notification__isClosing_yewgq","toastContent":"notification__toastContent_yewgq","actionSection":"notification__actionSection_yewgq"};
 
 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:root {\n    --notification-desktop-content-width: 278px;\n}\n\n.notificationComponent {\n    visibility: hidden;\n    right: var(--gap-12);\n    transform: translate(0, -500px);\n    width: calc(100% - var(--gap-24));\n    max-width: calc(100vw - var(--gap-24));\n    user-select: none;\n    transition: transform 0.4s ease-out;\n\n    @media screen and (min-width: 600px) {\n        right: var(--gap-48);\n        width: auto;\n        transform: translate(calc(100% + var(--gap-48)), 0);\n    }\n\n    &.isVisible {\n        visibility: visible;\n        transform: translate(0, 0);\n    }\n\n    &.isClosing {\n        transition: transform 0.1s ease-out;\n        transform: translate(100vw, 0);\n\n        @media screen and (min-width: 600px) {\n            transform: translate(calc(100% + var(--gap-48)), 0);\n        }\n    }\n}\n\n.notificationComponent.notificationComponent {\n    position: fixed;\n}\n\n.toastContent {\n    @media screen and (min-width: 600px) {\n        width: var(--notification-desktop-content-width);\n    }\n}\n\n.actionSection {\n    min-width: 104px;\n    min-height: 48px;\n    padding: var(--gap-0) var(--gap-8);\n    margin: var(--gap-12-neg) var(--gap-0);\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,uBAAuB,CAAC,2CAA2C,CAAC,WAAW,CAAC,+BAA+B,CAAC,WAAW,CAAC,+BAA+B,CAAC,cAAc,CAAC,kCAAkC,CAAC,eAAe,CAAC,mCAAmC,CAAC;;;;"}
+{"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-typography-index.css';\n\n:root {\n    --notification-desktop-content-width: 278px;\n}\n\n.notificationComponent {\n    visibility: hidden;\n    right: var(--gap-12);\n    transform: translate(0, -500px);\n    width: calc(100% - var(--gap-24));\n    max-width: calc(100vw - var(--gap-24));\n    user-select: none;\n    transition: transform 0.4s ease-out;\n\n    @media screen and (min-width: 600px) {\n        right: var(--gap-48);\n        width: auto;\n        transform: translate(calc(100% + var(--gap-48)), 0);\n    }\n\n    &.isVisible {\n        visibility: visible;\n        transform: translate(0, 0);\n    }\n\n    &.isClosing {\n        transition: transform 0.1s ease-out;\n        transform: translate(100vw, 0);\n\n        @media screen and (min-width: 600px) {\n            transform: translate(calc(100% + var(--gap-48)), 0);\n        }\n    }\n}\n\n.notificationComponent.notificationComponent {\n    position: fixed;\n}\n\n.toastContent {\n    @media screen and (min-width: 600px) {\n        width: var(--notification-desktop-content-width);\n    }\n}\n\n.actionSection {\n    min-width: 104px;\n    min-height: 48px;\n    padding: var(--gap-0) var(--gap-8);\n    margin: var(--gap-12-neg) var(--gap-0);\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,uBAAuB,CAAC,2CAA2C,CAAC,WAAW,CAAC,+BAA+B,CAAC,WAAW,CAAC,+BAA+B,CAAC,cAAc,CAAC,kCAAkC,CAAC,eAAe,CAAC,mCAAmC,CAAC;;;;"}

package/moderncssm/Component.d.ts

@@ -1,5 +1,5 @@
-import React, { MouseEvent } from 'react';
-import { ToastPlateDesktopProps } from '@alfalab/core-components-toast-plate/moderncssm/desktop';
+import React, { type MouseEvent } from 'react';
+import { type ToastPlateDesktopProps } from '@alfalab/core-components-toast-plate/moderncssm/desktop';
 export declare type NotificationProps = ToastPlateDesktopProps & {
     /**
      * Управление видимостью компонента

package/moderncssm/Component.js.map

@@ -1 +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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"}
+{"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, {\n    forwardRef,\n    Fragment,\n    type 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    type 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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"}

package/moderncssm/index.module.css

@@ -1,3 +1,5 @@
+
+
 :root {
     --notification-desktop-content-width: 278px;
 }
@@ -11,7 +13,7 @@
     -webkit-user-select: none;
        -moz-user-select: none;
             user-select: none;
-    transition: transform 0.4s ease-out
+    transition: transform 0.4s ease-out;
 }
 
 @media screen and (min-width: 600px) {
@@ -19,7 +21,7 @@
 .notificationComponent {
         right: var(--gap-48);
         width: auto;
-        transform: translate(calc(100% + var(--gap-48)), 0)
+        transform: translate(calc(100% + var(--gap-48)), 0);
 }
     }
 
@@ -30,13 +32,13 @@
 
 .notificationComponent.isClosing {
         transition: transform 0.1s ease-out;
-        transform: translate(100vw, 0)
+        transform: translate(100vw, 0);
     }
 
 @media screen and (min-width: 600px) {
 
 .notificationComponent.isClosing {
-            transform: translate(calc(100% + var(--gap-48)), 0)
+            transform: translate(calc(100% + var(--gap-48)), 0);
     }
         }
 
@@ -47,7 +49,7 @@
 @media screen and (min-width: 600px) {
 
 .toastContent {
-        width: var(--notification-desktop-content-width)
+        width: var(--notification-desktop-content-width);
 }
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-notification",
-    "version": "8.0.1",
+    "version": "8.0.2",
     "description": "",
     "keywords": [],
     "license": "MIT",
@@ -10,10 +10,10 @@
     "main": "index.js",
     "module": "./esm/index.js",
     "dependencies": {
-        "@alfalab/core-components-portal": "^4.0.1",
-        "@alfalab/core-components-shared": "^1.1.0",
+        "@alfalab/core-components-portal": "^4.0.2",
+        "@alfalab/core-components-shared": "^1.1.1",
         "@alfalab/core-components-stack": "^6.0.0",
-        "@alfalab/core-components-toast-plate": "^8.0.1",
+        "@alfalab/core-components-toast-plate": "^8.0.2",
         "classnames": "^2.5.1",
         "element-closest": "^3.0.2",
         "react-merge-refs": "^1.1.0",
@@ -29,6 +29,6 @@
         "access": "public",
         "directory": "dist"
     },
-    "themesVersion": "14.1.0",
-    "varsVersion": "10.1.0"
+    "themesVersion": "14.1.3",
+    "varsVersion": "10.2.0"
 }

package/src/Component.tsx

@@ -1,7 +1,7 @@
 import React, {
     forwardRef,
     Fragment,
-    MouseEvent,
+    type MouseEvent,
     useCallback,
     useEffect,
     useRef,
@@ -17,7 +17,7 @@ import { Stack } from '@alfalab/core-components-stack';
 import { stackingOrder } from '@alfalab/core-components-stack-context';
 import {
     ToastPlateDesktop,
-    ToastPlateDesktopProps,
+    type ToastPlateDesktopProps,
 } from '@alfalab/core-components-toast-plate/desktop';
 
 import { useClickOutside } from './utils';

package/src/index.module.css

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-vars/src/index.css';
+@import '@alfalab/core-components-vars/src/no-typography-index.css';
 
 :root {
     --notification-desktop-content-width: 278px;