npm - @alfalab/core-components-notification - Versions diffs - 9.0.3 → 9.0.4 - Mend

@alfalab/core-components-notification 9.0.3 → 9.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (26) hide show

package/Component.d.ts +12 -12
package/Component.js.map +1 -1
package/cssm/Component.d.ts +12 -12
package/cssm/Component.js.map +1 -1
package/cssm/utils/index.js.map +1 -1
package/esm/Component.d.ts +12 -12
package/esm/Component.js.map +1 -1
package/esm/index.css +8 -8
package/esm/index.module.css.js +1 -1
package/esm/index.module.css.js.map +1 -1
package/esm/utils/index.js.map +1 -1
package/index.css +8 -8
package/index.module.css.js +1 -1
package/index.module.css.js.map +1 -1
package/modern/Component.d.ts +12 -12
package/modern/Component.js.map +1 -1
package/modern/index.css +8 -8
package/modern/index.module.css.js +1 -1
package/modern/index.module.css.js.map +1 -1
package/modern/utils/index.js.map +1 -1
package/moderncssm/Component.d.ts +12 -12
package/moderncssm/Component.js.map +1 -1
package/moderncssm/utils/index.js.map +1 -1
package/package.json +4 -4
package/src/index.module.css +1 -1
package/utils/index.js.map +1 -1

package/Component.d.ts CHANGED Viewed

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

package/Component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Component.js","sources":["src/Component.tsx"],"sourcesContent":["import React, {\n forwardRef,\n Fragment,\n type MouseEvent,\n type RefObject,\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 /\n Ссылка на контейнер компонента, к которому применяется анимация\n /\n containerRef?: RefObject<HTMLDivElement>;\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 containerRef,\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} ref={containerRef}>\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":";;;;;;;;;;;;;;;;;;;;;;;;AAqFA,IAAM,6BAA6B,GAAG,GAAA,CAAA,MAAA,CAAIA,YAAM,CAAC,qBAAqB,CAAE;IAE3D,YAAY,GAAGC,gBAAU,CAClC,UACI,EAmBC,EACD,GAAG,EAAA;AAnBC,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,GAAA,EAAA,KAAA,MAAA,GAAG,GAAG,GAAA,EAAA,EACZ,EAAgB,GAAA,EAAA,CAAA,SAAA,EAAhB,SAAS,GAAG,EAAA,KAAA,MAAA,GAAA,IAAI,GAAA,EAAA,EAChB,sBAAqB,EAArB,cAAc,GAAG,EAAA,KAAA,MAAA,GAAA,IAAI,KAAA,EACrB,EAAA,GAAA,EAAA,CAAA,SAAgB,EAAhB,SAAS,GAAA,EAAA,KAAA,MAAA,GAAG,IAAI,GAAA,EAAA,EAChB,EAA4B,GAAA,EAAA,CAAA,MAAA,EAA5B,MAAM,GAAG,EAAA,KAAA,MAAA,GAAAC,wCAAa,CAAC,KAAK,KAAA,EAC5B,KAAK,GAAA,EAAA,CAAA,KAAA,EACL,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,GAAA,EAAA,EAChB,OAAO,GAAA,EAAA,CAAA,OAAA,EACP,cAAc,oBAAA,EACd,YAAY,GAAA,EAAA,CAAA,YAAA,EACZ,YAAY,GAAA,EAAA,CAAA,YAAA,EACZ,cAAc,GAAA,EAAA,CAAA,cAAA,EACd,YAAY,GAAA,EAAA,CAAA,YAAA,EACT,SAAS,GAAAC,YAAA,CAAA,EAAA,EAlBhB,kPAmBC,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,EAAA,EAAE,GAAG,EAAE,YAAY,EAAA,CAAA;gBACzCF,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;;;;"}
1	+ {"version":3,"file":"Component.js","sources":["src/Component.tsx"],"sourcesContent":["import React, {\n forwardRef,\n Fragment,\n type MouseEvent,\n type RefObject,\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 /\n Ссылка на контейнер компонента, к которому применяется анимация\n /\n containerRef?: RefObject<HTMLDivElement>;\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 containerRef,\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} ref={containerRef}>\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 CHANGED Viewed

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

package/cssm/Component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, {\n forwardRef,\n Fragment,\n type MouseEvent,\n type RefObject,\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 /\n Ссылка на контейнер компонента, к которому применяется анимация\n /\n containerRef?: RefObject<HTMLDivElement>;\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 containerRef,\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} ref={containerRef}>\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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"}
1	+ {"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, {\n forwardRef,\n Fragment,\n type MouseEvent,\n type RefObject,\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 /\n Ссылка на контейнер компонента, к которому применяется анимация\n /\n containerRef?: RefObject<HTMLDivElement>;\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 containerRef,\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} ref={containerRef}>\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/utils/index.js.map CHANGED Viewed

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

package/esm/Component.d.ts CHANGED Viewed

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

package/esm/Component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, {\n forwardRef,\n Fragment,\n type MouseEvent,\n type RefObject,\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 /\n Ссылка на контейнер компонента, к которому применяется анимация\n /\n containerRef?: RefObject<HTMLDivElement>;\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 containerRef,\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} ref={containerRef}>\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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"}
1	+ {"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, {\n forwardRef,\n Fragment,\n type MouseEvent,\n type RefObject,\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 /\n Ссылка на контейнер компонента, к которому применяется анимация\n /\n containerRef?: RefObject<HTMLDivElement>;\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 containerRef,\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} ref={containerRef}>\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":";;;;;;;;;;;;;AAqFA,IAAM,6BAA6B,GAAG,GAAA,CAAA,MAAA,CAAI,MAAM,CAAC,qBAAqB,CAAE;IAE3D,YAAY,GAAG,UAAU,CAClC,UACI,EAmBC,EACD,GAAG,EAAA;AAnBC,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,GAAA,EAAA,KAAA,MAAA,GAAG,GAAG,GAAA,EAAA,EACZ,EAAgB,GAAA,EAAA,CAAA,SAAA,EAAhB,SAAS,GAAG,EAAA,KAAA,MAAA,GAAA,IAAI,GAAA,EAAA,EAChB,sBAAqB,EAArB,cAAc,GAAG,EAAA,KAAA,MAAA,GAAA,IAAI,KAAA,EACrB,EAAA,GAAA,EAAA,CAAA,SAAgB,EAAhB,SAAS,GAAA,EAAA,KAAA,MAAA,GAAG,IAAI,GAAA,EAAA,EAChB,EAA4B,GAAA,EAAA,CAAA,MAAA,EAA5B,MAAM,GAAG,EAAA,KAAA,MAAA,GAAA,aAAa,CAAC,KAAK,KAAA,EAC5B,KAAK,GAAA,EAAA,CAAA,KAAA,EACL,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,GAAA,EAAA,EAChB,OAAO,GAAA,EAAA,CAAA,OAAA,EACP,cAAc,oBAAA,EACd,YAAY,GAAA,EAAA,CAAA,YAAA,EACZ,YAAY,GAAA,EAAA,CAAA,YAAA,EACZ,cAAc,GAAA,EAAA,CAAA,cAAA,EACd,YAAY,GAAA,EAAA,CAAA,YAAA,EACT,SAAS,GAAA,MAAA,CAAA,EAAA,EAlBhB,kPAmBC,CADe;AAIhB,IAAA,IAAM,eAAe,GAAG,MAAM,CAAiB,IAAI,CAAC;AACpD,IAAA,IAAM,mBAAmB,GAAG,MAAM,CAAC,CAAC,CAAC;AACrC,IAAA,IAAM,eAAe,GAAG,MAAM,CAAC,CAAC,CAAC;IAE3B,IAAA,EAAA,GAA4B,QAAQ,CAAC,KAAK,CAAC,EAA1C,SAAS,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,YAAY,GAAA,EAAA,CAAA,CAAA,CAAmB;IAEjD,IAAM,mBAAmB,GAAG,WAAW,CAAC,YAAA;AACpC,QAAA,IAAI,cAAc,KAAK,IAAI,EAAE;AACzB,YAAA,mBAAmB,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,YAAA;gBAC5C,IAAI,cAAc,EAAE;AAChB,oBAAA,cAAc,EAAE;;aAEvB,EAAE,cAAc,CAAC;;AAE1B,KAAC,EAAE,CAAC,cAAc,EAAE,cAAc,CAAC,CAAC;IAEpC,IAAM,kBAAkB,GAAG,WAAW,CAAC,YAAA;AACnC,QAAA,YAAY,CAAC,mBAAmB,CAAC,OAAO,CAAC;KAC5C,EAAE,EAAE,CAAC;IAEN,SAAS,CACL,cAAM,OAAA,YAAA;AACF,QAAA,YAAY,CAAC,eAAe,CAAC,OAAO,CAAC;AACzC,KAAC,CAFK,EAEL,EACD,EAAE,CACL;AAED,IAAA,SAAS,CAAC,YAAA;QACN,cAAc,CAAC,MAAM,CAAC;KACzB,EAAE,EAAE,CAAC;AAEN,IAAA,SAAS,CAAC,YAAA;QACN,IAAI,OAAO,EAAE;AACT,YAAA,mBAAmB,EAAE;;QAGzB,OAAO,YAAA;AACH,YAAA,kBAAkB,EAAE;AACxB,SAAC;KACJ,EAAE,CAAC,mBAAmB,EAAE,kBAAkB,EAAE,OAAO,CAAC,CAAC;AAEtD,IAAA,IAAM,gBAAgB,GAAG,WAAW,CAChC,UAAC,KAAuC,EAAA;AACpC,QAAA,kBAAkB,EAAE;QAEpB,IAAI,YAAY,EAAE;YACd,YAAY,CAAC,KAAK,CAAC;;AAE3B,KAAC,EACD,CAAC,YAAY,EAAE,kBAAkB,CAAC,CACrC;AAED,IAAA,IAAM,gBAAgB,GAAG,WAAW,CAChC,UAAC,KAAuC,EAAA;AACpC,QAAA,kBAAkB,EAAE;AACpB,QAAA,mBAAmB,EAAE;QAErB,IAAI,YAAY,EAAE;YACd,YAAY,CAAC,KAAK,CAAC;;KAE1B,EACD,CAAC,YAAY,EAAE,mBAAmB,EAAE,kBAAkB,CAAC,CAC1D;AAED,IAAA,IAAM,kBAAkB,GAAG,WAAW,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;;AAEjD,KAAC,EACD,CAAC,cAAc,EAAE,OAAO,CAAC,CAC5B;AAED,IAAA,eAAe,CAAC,eAAe,EAAE,kBAAkB,CAAC;IAEpD,IAAM,iBAAiB,GAAG,YAAY,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;;SAEd;AACD,QAAA,KAAK,EAAE,GAAG;AACb,KAAA,CAAC;IAEF,IAAM,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,QAAQ;IAE7C,QACI,oBAAC,KAAK,EAAA,EAAC,KAAK,EAAE,MAAM,EACf,EAAA,UAAC,cAAc,EAAA;;QAAK,QACjB,oBAAC,OAAO,EAAA,IAAA;AACJ,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,QAAA,CAAA,EAAA,EAAS,iBAAiB,EAAA,EAAE,GAAG,EAAE,YAAY,EAAA,CAAA;gBACzC,KAAC,CAAA,aAAA,CAAA,iBAAiB,aACd,SAAS,EAAE,EAAE,CACT,MAAM,CAAC,qBAAqB,GAAA,EAAA,GAAA,EAAA;AAExB,wBAAA,EAAA,CAAC,MAAM,CAAC,SAAS,CAAA,GAAG,OAAO;AAC3B,wBAAA,EAAA,CAAC,MAAM,CAAC,SAAS,CAAA,GAAG,SAAS;AAEjC,wBAAA,EAAA,GAAA,SAAS,CACZ,EACD,gBAAgB,EAAE,MAAM,CAAC,YAAY,EACrC,sBAAsB,EAAE,EAAE,CACtB,sBAAsB,EACtB,MAAM,CAAC,aAAa,CACvB,EACD,KAAK,wBACA,QAAQ,CAAA,GAAG,MAAM,EAClB,SAAM,GAAE,cAAc,EACnB,EAAA,GAAA,KAAK,GAEZ,YAAY,EAAE,gBAAgB,EAC9B,YAAY,EAAE,gBAAgB,EAC9B,GAAG,EAAE,SAAS,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;;;;"}

package/esm/index.css CHANGED Viewed

@@ -14,7 +14,7 @@
 :root {
     --notification-desktop-content-width: 278px;
 }
-.notification__notificationComponent_dk5db {
+.notification__notificationComponent_1gypu {
     visibility: hidden;
     right: var(--gap-12);
     transform: translate(0, -500px);
@@ -26,34 +26,34 @@
     transition: transform 0.4s ease-out;
 }
 @media screen and (min-width: 600px) {
-.notification__notificationComponent_dk5db {
+.notification__notificationComponent_1gypu {
         right: var(--gap-48);
         width: auto;
         transform: translate(calc(100% + var(--gap-48)), 0);
 }
     }
-.notification__notificationComponent_dk5db.notification__isVisible_dk5db {
+.notification__notificationComponent_1gypu.notification__isVisible_1gypu {
         visibility: visible;
         transform: translate(0, 0);
     }
-.notification__notificationComponent_dk5db.notification__isClosing_dk5db {
+.notification__notificationComponent_1gypu.notification__isClosing_1gypu {
         transition: transform 0.1s ease-out;
         transform: translate(100vw, 0);
     }
 @media screen and (min-width: 600px) {
-.notification__notificationComponent_dk5db.notification__isClosing_dk5db {
+.notification__notificationComponent_1gypu.notification__isClosing_1gypu {
             transform: translate(calc(100% + var(--gap-48)), 0);
     }
         }
-.notification__notificationComponent_dk5db.notification__notificationComponent_dk5db {
+.notification__notificationComponent_1gypu.notification__notificationComponent_1gypu {
     position: fixed;
 }
 @media screen and (min-width: 600px) {
-.notification__toastContent_dk5db {
+.notification__toastContent_1gypu {
         width: var(--notification-desktop-content-width);
 }
     }
-.notification__actionSection_dk5db {
+.notification__actionSection_1gypu {
     min-width: 104px;
     min-height: 48px;
     padding: var(--gap-0) var(--gap-8);

package/esm/index.module.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import './index.css';
-var styles = {"notificationComponent":"notification__notificationComponent_dk5db","isVisible":"notification__isVisible_dk5db","isClosing":"notification__isClosing_dk5db","toastContent":"notification__toastContent_dk5db","actionSection":"notification__actionSection_dk5db"};
+var styles = {"notificationComponent":"notification__notificationComponent_1gypu","isVisible":"notification__isVisible_1gypu","isClosing":"notification__isClosing_1gypu","toastContent":"notification__toastContent_1gypu","actionSection":"notification__actionSection_1gypu"};
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

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

	@@ -1 +1 @@
1	- {"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;;;;"}
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;;;;"}

package/esm/utils/index.js.map CHANGED Viewed

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

package/index.css CHANGED Viewed

@@ -14,7 +14,7 @@
 :root {
     --notification-desktop-content-width: 278px;
 }
-.notification__notificationComponent_dk5db {
+.notification__notificationComponent_1gypu {
     visibility: hidden;
     right: var(--gap-12);
     transform: translate(0, -500px);
@@ -26,34 +26,34 @@
     transition: transform 0.4s ease-out;
 }
 @media screen and (min-width: 600px) {
-.notification__notificationComponent_dk5db {
+.notification__notificationComponent_1gypu {
         right: var(--gap-48);
         width: auto;
         transform: translate(calc(100% + var(--gap-48)), 0);
 }
     }
-.notification__notificationComponent_dk5db.notification__isVisible_dk5db {
+.notification__notificationComponent_1gypu.notification__isVisible_1gypu {
         visibility: visible;
         transform: translate(0, 0);
     }
-.notification__notificationComponent_dk5db.notification__isClosing_dk5db {
+.notification__notificationComponent_1gypu.notification__isClosing_1gypu {
         transition: transform 0.1s ease-out;
         transform: translate(100vw, 0);
     }
 @media screen and (min-width: 600px) {
-.notification__notificationComponent_dk5db.notification__isClosing_dk5db {
+.notification__notificationComponent_1gypu.notification__isClosing_1gypu {
             transform: translate(calc(100% + var(--gap-48)), 0);
     }
         }
-.notification__notificationComponent_dk5db.notification__notificationComponent_dk5db {
+.notification__notificationComponent_1gypu.notification__notificationComponent_1gypu {
     position: fixed;
 }
 @media screen and (min-width: 600px) {
-.notification__toastContent_dk5db {
+.notification__toastContent_1gypu {
         width: var(--notification-desktop-content-width);
 }
     }
-.notification__actionSection_dk5db {
+.notification__actionSection_1gypu {
     min-width: 104px;
     min-height: 48px;
     padding: var(--gap-0) var(--gap-8);

package/index.module.css.js CHANGED Viewed

@@ -2,7 +2,7 @@
 require('./index.css');
-var styles = {"notificationComponent":"notification__notificationComponent_dk5db","isVisible":"notification__isVisible_dk5db","isClosing":"notification__isClosing_dk5db","toastContent":"notification__toastContent_dk5db","actionSection":"notification__actionSection_dk5db"};
+var styles = {"notificationComponent":"notification__notificationComponent_1gypu","isVisible":"notification__isVisible_1gypu","isClosing":"notification__isClosing_1gypu","toastContent":"notification__toastContent_1gypu","actionSection":"notification__actionSection_1gypu"};
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/index.module.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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;;;;"}
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;;;;"}

package/modern/Component.d.ts CHANGED Viewed

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

package/modern/Component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, {\n forwardRef,\n Fragment,\n type MouseEvent,\n type RefObject,\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 /\n Ссылка на контейнер компонента, к которому применяется анимация\n /\n containerRef?: RefObject<HTMLDivElement>;\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 containerRef,\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} ref={containerRef}>\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":";;;;;;;;;;;;AAqFA,MAAM,6BAA6B,GAAG,CAAA,CAAA,EAAI,MAAM,CAAC,qBAAqB,EAAE;AAEjE,MAAM,YAAY,GAAG,UAAU,CAClC,CACI,EACI,SAAS,EACT,sBAAsB,EACtB,QAAQ,EACR,OAAO,EACP,MAAM,GAAG,GAAG,EACZ,SAAS,GAAG,IAAI,EAChB,cAAc,GAAG,IAAI,EACrB,SAAS,GAAG,IAAI,EAChB,MAAM,GAAG,aAAa,CAAC,KAAK,EAC5B,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,OAAO,EACP,cAAc,EACd,YAAY,EACZ,YAAY,EACZ,cAAc,EACd,YAAY,EACZ,GAAG,SAAS,EACf,EACD,GAAG,KACH;AACA,IAAA,MAAM,eAAe,GAAG,MAAM,CAAiB,IAAI,CAAC;AACpD,IAAA,MAAM,mBAAmB,GAAG,MAAM,CAAC,CAAC,CAAC;AACrC,IAAA,MAAM,eAAe,GAAG,MAAM,CAAC,CAAC,CAAC;IAEjC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AAEjD,IAAA,MAAM,mBAAmB,GAAG,WAAW,CAAC,MAAK;QACzC,IAAI,cAAc,KAAK,IAAI,EAAE;YACzB,mBAAmB,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,MAAK;AACjD,gBAAA,IAAI,cAAc,EAAE;AAChB,oBAAA,cAAc,EAAE;AACnB;aACJ,EAAE,cAAc,CAAC;AACrB;AACL,KAAC,EAAE,CAAC,cAAc,EAAE,cAAc,CAAC,CAAC;AAEpC,IAAA,MAAM,kBAAkB,GAAG,WAAW,CAAC,MAAK;AACxC,QAAA,YAAY,CAAC,mBAAmB,CAAC,OAAO,CAAC;KAC5C,EAAE,EAAE,CAAC;AAEN,IAAA,SAAS,CACL,MAAM,MAAK;AACP,QAAA,YAAY,CAAC,eAAe,CAAC,OAAO,CAAC;KACxC,EACD,EAAE,CACL;IAED,SAAS,CAAC,MAAK;QACX,cAAc,CAAC,MAAM,CAAC;KACzB,EAAE,EAAE,CAAC;IAEN,SAAS,CAAC,MAAK;AACX,QAAA,IAAI,OAAO,EAAE;AACT,YAAA,mBAAmB,EAAE;AACxB;AAED,QAAA,OAAO,MAAK;AACR,YAAA,kBAAkB,EAAE;AACxB,SAAC;KACJ,EAAE,CAAC,mBAAmB,EAAE,kBAAkB,EAAE,OAAO,CAAC,CAAC;AAEtD,IAAA,MAAM,gBAAgB,GAAG,WAAW,CAChC,CAAC,KAAuC,KAAI;AACxC,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,MAAM,gBAAgB,GAAG,WAAW,CAChC,CAAC,KAAuC,KAAI;AACxC,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,MAAM,kBAAkB,GAAG,WAAW,CAClC,CAAC,KAA0C,KAAI;AAC3C,QAAA,MAAM,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,IAAA,eAAe,CAAC,eAAe,EAAE,kBAAkB,CAAC;IAEpD,MAAM,iBAAiB,GAAG,YAAY,CAAC;AACnC,QAAA,QAAQ,EAAE,CAAC,EAAE,GAAG,EAAE,KAAI;AAClB,YAAA,IAAI,OAAO,IAAI,CAAC,MAAM,EAAE,OAAO,EAAE,IAAI,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;gBAClD,YAAY,CAAC,IAAI,CAAC;gBAElB,eAAe,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,MAAK;oBAC7C,YAAY,CAAC,KAAK,CAAC;AACnB,oBAAA,OAAO,EAAE;iBACZ,EAAE,GAAG,CAAC;AACV;SACJ;AACD,QAAA,KAAK,EAAE,GAAG;AACb,KAAA,CAAC;IAEF,MAAM,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,QAAQ;AAE7C,IAAA,QACI,KAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,KAAK,EAAE,MAAM,EACf,EAAA,CAAC,cAAc,MACZ,oBAAC,OAAO,EAAA,IAAA;AACJ,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAS,iBAAiB,EAAE,GAAG,EAAE,YAAY,EAAA;YACzC,KAAC,CAAA,aAAA,CAAA,iBAAiB,IACd,SAAS,EAAE,EAAE,CACT,MAAM,CAAC,qBAAqB,EAC5B;AACI,oBAAA,CAAC,MAAM,CAAC,SAAS,GAAG,OAAO;AAC3B,oBAAA,CAAC,MAAM,CAAC,SAAS,GAAG,SAAS;iBAChC,EACD,SAAS,CACZ,EACD,gBAAgB,EAAE,MAAM,CAAC,YAAY,EACrC,sBAAsB,EAAE,EAAE,CACtB,sBAAsB,EACtB,MAAM,CAAC,aAAa,CACvB,EACD,KAAK,EAAE;oBACH,CAAC,QAAQ,GAAG,MAAM;AAClB,oBAAA,MAAM,EAAE,cAAc;AACtB,oBAAA,GAAG,KAAK;iBACX,EACD,YAAY,EAAE,gBAAgB,EAC9B,YAAY,EAAE,gBAAgB,EAC9B,GAAG,EAAE,SAAS,CAAC,CAAC,GAAG,EAAE,eAAe,CAAC,CAAC,EACtC,IAAI,EAAE,OAAO,GAAG,OAAO,GAAG,SAAS,EACnC,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EACZ,GAAA,SAAS,IAEZ,QAAQ,CACO,CAClB,CACA,CACb,CACG;AAEhB,CAAC;AAGL,YAAY,CAAC,WAAW,GAAG,cAAc;;;;"}
1	+ {"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, {\n forwardRef,\n Fragment,\n type MouseEvent,\n type RefObject,\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 /\n Ссылка на контейнер компонента, к которому применяется анимация\n /\n containerRef?: RefObject<HTMLDivElement>;\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 containerRef,\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} ref={containerRef}>\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":";;;;;;;;;;;;AAqFA,MAAM,6BAA6B,GAAG,CAAA,CAAA,EAAI,MAAM,CAAC,qBAAqB,EAAE;AAEjE,MAAM,YAAY,GAAG,UAAU,CAClC,CACI,EACI,SAAS,EACT,sBAAsB,EACtB,QAAQ,EACR,OAAO,EACP,MAAM,GAAG,GAAG,EACZ,SAAS,GAAG,IAAI,EAChB,cAAc,GAAG,IAAI,EACrB,SAAS,GAAG,IAAI,EAChB,MAAM,GAAG,aAAa,CAAC,KAAK,EAC5B,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,OAAO,EACP,cAAc,EACd,YAAY,EACZ,YAAY,EACZ,cAAc,EACd,YAAY,EACZ,GAAG,SAAS,EACf,EACD,GAAG,KACH;AACA,IAAA,MAAM,eAAe,GAAG,MAAM,CAAiB,IAAI,CAAC;AACpD,IAAA,MAAM,mBAAmB,GAAG,MAAM,CAAC,CAAC,CAAC;AACrC,IAAA,MAAM,eAAe,GAAG,MAAM,CAAC,CAAC,CAAC;IAEjC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AAEjD,IAAA,MAAM,mBAAmB,GAAG,WAAW,CAAC,MAAK;AACzC,QAAA,IAAI,cAAc,KAAK,IAAI,EAAE;YACzB,mBAAmB,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,MAAK;gBACjD,IAAI,cAAc,EAAE;AAChB,oBAAA,cAAc,EAAE;;aAEvB,EAAE,cAAc,CAAC;;AAE1B,KAAC,EAAE,CAAC,cAAc,EAAE,cAAc,CAAC,CAAC;AAEpC,IAAA,MAAM,kBAAkB,GAAG,WAAW,CAAC,MAAK;AACxC,QAAA,YAAY,CAAC,mBAAmB,CAAC,OAAO,CAAC;KAC5C,EAAE,EAAE,CAAC;AAEN,IAAA,SAAS,CACL,MAAM,MAAK;AACP,QAAA,YAAY,CAAC,eAAe,CAAC,OAAO,CAAC;KACxC,EACD,EAAE,CACL;IAED,SAAS,CAAC,MAAK;QACX,cAAc,CAAC,MAAM,CAAC;KACzB,EAAE,EAAE,CAAC;IAEN,SAAS,CAAC,MAAK;QACX,IAAI,OAAO,EAAE;AACT,YAAA,mBAAmB,EAAE;;AAGzB,QAAA,OAAO,MAAK;AACR,YAAA,kBAAkB,EAAE;AACxB,SAAC;KACJ,EAAE,CAAC,mBAAmB,EAAE,kBAAkB,EAAE,OAAO,CAAC,CAAC;AAEtD,IAAA,MAAM,gBAAgB,GAAG,WAAW,CAChC,CAAC,KAAuC,KAAI;AACxC,QAAA,kBAAkB,EAAE;QAEpB,IAAI,YAAY,EAAE;YACd,YAAY,CAAC,KAAK,CAAC;;AAE3B,KAAC,EACD,CAAC,YAAY,EAAE,kBAAkB,CAAC,CACrC;AAED,IAAA,MAAM,gBAAgB,GAAG,WAAW,CAChC,CAAC,KAAuC,KAAI;AACxC,QAAA,kBAAkB,EAAE;AACpB,QAAA,mBAAmB,EAAE;QAErB,IAAI,YAAY,EAAE;YACd,YAAY,CAAC,KAAK,CAAC;;KAE1B,EACD,CAAC,YAAY,EAAE,mBAAmB,EAAE,kBAAkB,CAAC,CAC1D;AAED,IAAA,MAAM,kBAAkB,GAAG,WAAW,CAClC,CAAC,KAA0C,KAAI;AAC3C,QAAA,MAAM,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;;AAEjD,KAAC,EACD,CAAC,cAAc,EAAE,OAAO,CAAC,CAC5B;AAED,IAAA,eAAe,CAAC,eAAe,EAAE,kBAAkB,CAAC;IAEpD,MAAM,iBAAiB,GAAG,YAAY,CAAC;AACnC,QAAA,QAAQ,EAAE,CAAC,EAAE,GAAG,EAAE,KAAI;AAClB,YAAA,IAAI,OAAO,IAAI,CAAC,MAAM,EAAE,OAAO,EAAE,IAAI,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;gBAClD,YAAY,CAAC,IAAI,CAAC;gBAElB,eAAe,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,MAAK;oBAC7C,YAAY,CAAC,KAAK,CAAC;AACnB,oBAAA,OAAO,EAAE;iBACZ,EAAE,GAAG,CAAC;;SAEd;AACD,QAAA,KAAK,EAAE,GAAG;AACb,KAAA,CAAC;IAEF,MAAM,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,QAAQ;AAE7C,IAAA,QACI,KAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,KAAK,EAAE,MAAM,EACf,EAAA,CAAC,cAAc,MACZ,oBAAC,OAAO,EAAA,IAAA;AACJ,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAS,iBAAiB,EAAE,GAAG,EAAE,YAAY,EAAA;YACzC,KAAC,CAAA,aAAA,CAAA,iBAAiB,IACd,SAAS,EAAE,EAAE,CACT,MAAM,CAAC,qBAAqB,EAC5B;AACI,oBAAA,CAAC,MAAM,CAAC,SAAS,GAAG,OAAO;AAC3B,oBAAA,CAAC,MAAM,CAAC,SAAS,GAAG,SAAS;iBAChC,EACD,SAAS,CACZ,EACD,gBAAgB,EAAE,MAAM,CAAC,YAAY,EACrC,sBAAsB,EAAE,EAAE,CACtB,sBAAsB,EACtB,MAAM,CAAC,aAAa,CACvB,EACD,KAAK,EAAE;oBACH,CAAC,QAAQ,GAAG,MAAM;AAClB,oBAAA,MAAM,EAAE,cAAc;AACtB,oBAAA,GAAG,KAAK;iBACX,EACD,YAAY,EAAE,gBAAgB,EAC9B,YAAY,EAAE,gBAAgB,EAC9B,GAAG,EAAE,SAAS,CAAC,CAAC,GAAG,EAAE,eAAe,CAAC,CAAC,EACtC,IAAI,EAAE,OAAO,GAAG,OAAO,GAAG,SAAS,EACnC,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EACZ,GAAA,SAAS,IAEZ,QAAQ,CACO,CAClB,CACA,CACb,CACG;AAEhB,CAAC;AAGL,YAAY,CAAC,WAAW,GAAG,cAAc;;;;"}

package/modern/index.css CHANGED Viewed

@@ -14,7 +14,7 @@
 :root {
     --notification-desktop-content-width: 278px;
 }
-.notification__notificationComponent_dk5db {
+.notification__notificationComponent_1gypu {
     visibility: hidden;
     right: var(--gap-12);
     transform: translate(0, -500px);
@@ -26,34 +26,34 @@
     transition: transform 0.4s ease-out;
 }
 @media screen and (min-width: 600px) {
-.notification__notificationComponent_dk5db {
+.notification__notificationComponent_1gypu {
         right: var(--gap-48);
         width: auto;
         transform: translate(calc(100% + var(--gap-48)), 0);
 }
     }
-.notification__notificationComponent_dk5db.notification__isVisible_dk5db {
+.notification__notificationComponent_1gypu.notification__isVisible_1gypu {
         visibility: visible;
         transform: translate(0, 0);
     }
-.notification__notificationComponent_dk5db.notification__isClosing_dk5db {
+.notification__notificationComponent_1gypu.notification__isClosing_1gypu {
         transition: transform 0.1s ease-out;
         transform: translate(100vw, 0);
     }
 @media screen and (min-width: 600px) {
-.notification__notificationComponent_dk5db.notification__isClosing_dk5db {
+.notification__notificationComponent_1gypu.notification__isClosing_1gypu {
             transform: translate(calc(100% + var(--gap-48)), 0);
     }
         }
-.notification__notificationComponent_dk5db.notification__notificationComponent_dk5db {
+.notification__notificationComponent_1gypu.notification__notificationComponent_1gypu {
     position: fixed;
 }
 @media screen and (min-width: 600px) {
-.notification__toastContent_dk5db {
+.notification__toastContent_1gypu {
         width: var(--notification-desktop-content-width);
 }
     }
-.notification__actionSection_dk5db {
+.notification__actionSection_1gypu {
     min-width: 104px;
     min-height: 48px;
     padding: var(--gap-0) var(--gap-8);

package/modern/index.module.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import './index.css';
-const styles = {"notificationComponent":"notification__notificationComponent_dk5db","isVisible":"notification__isVisible_dk5db","isClosing":"notification__isClosing_dk5db","toastContent":"notification__toastContent_dk5db","actionSection":"notification__actionSection_dk5db"};
+const styles = {"notificationComponent":"notification__notificationComponent_1gypu","isVisible":"notification__isVisible_1gypu","isClosing":"notification__isClosing_1gypu","toastContent":"notification__toastContent_1gypu","actionSection":"notification__actionSection_1gypu"};
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

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

	@@ -1 +1 @@
1	- {"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;;;;"}
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;;;;"}

package/modern/utils/index.js.map CHANGED Viewed

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

package/moderncssm/Component.d.ts CHANGED Viewed

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

package/moderncssm/Component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, {\n forwardRef,\n Fragment,\n type MouseEvent,\n type RefObject,\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 /\n Ссылка на контейнер компонента, к которому применяется анимация\n /\n containerRef?: RefObject<HTMLDivElement>;\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 containerRef,\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} ref={containerRef}>\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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"}
1	+ {"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, {\n forwardRef,\n Fragment,\n type MouseEvent,\n type RefObject,\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 /\n Ссылка на контейнер компонента, к которому применяется анимация\n /\n containerRef?: RefObject<HTMLDivElement>;\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 containerRef,\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} ref={containerRef}>\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":";;;;;;;;;;;;AAqFA,MAAM,6BAA6B,GAAG,CAAA,CAAA,EAAI,MAAM,CAAC,qBAAqB,EAAE;AAEjE,MAAM,YAAY,GAAG,UAAU,CAClC,CACI,EACI,SAAS,EACT,sBAAsB,EACtB,QAAQ,EACR,OAAO,EACP,MAAM,GAAG,GAAG,EACZ,SAAS,GAAG,IAAI,EAChB,cAAc,GAAG,IAAI,EACrB,SAAS,GAAG,IAAI,EAChB,MAAM,GAAG,aAAa,CAAC,KAAK,EAC5B,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,OAAO,EACP,cAAc,EACd,YAAY,EACZ,YAAY,EACZ,cAAc,EACd,YAAY,EACZ,GAAG,SAAS,EACf,EACD,GAAG,KACH;AACA,IAAA,MAAM,eAAe,GAAG,MAAM,CAAiB,IAAI,CAAC;AACpD,IAAA,MAAM,mBAAmB,GAAG,MAAM,CAAC,CAAC,CAAC;AACrC,IAAA,MAAM,eAAe,GAAG,MAAM,CAAC,CAAC,CAAC;IAEjC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AAEjD,IAAA,MAAM,mBAAmB,GAAG,WAAW,CAAC,MAAK;AACzC,QAAA,IAAI,cAAc,KAAK,IAAI,EAAE;YACzB,mBAAmB,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,MAAK;gBACjD,IAAI,cAAc,EAAE;AAChB,oBAAA,cAAc,EAAE;;aAEvB,EAAE,cAAc,CAAC;;AAE1B,KAAC,EAAE,CAAC,cAAc,EAAE,cAAc,CAAC,CAAC;AAEpC,IAAA,MAAM,kBAAkB,GAAG,WAAW,CAAC,MAAK;AACxC,QAAA,YAAY,CAAC,mBAAmB,CAAC,OAAO,CAAC;KAC5C,EAAE,EAAE,CAAC;AAEN,IAAA,SAAS,CACL,MAAM,MAAK;AACP,QAAA,YAAY,CAAC,eAAe,CAAC,OAAO,CAAC;KACxC,EACD,EAAE,CACL;IAED,SAAS,CAAC,MAAK;QACX,cAAc,CAAC,MAAM,CAAC;KACzB,EAAE,EAAE,CAAC;IAEN,SAAS,CAAC,MAAK;QACX,IAAI,OAAO,EAAE;AACT,YAAA,mBAAmB,EAAE;;AAGzB,QAAA,OAAO,MAAK;AACR,YAAA,kBAAkB,EAAE;AACxB,SAAC;KACJ,EAAE,CAAC,mBAAmB,EAAE,kBAAkB,EAAE,OAAO,CAAC,CAAC;AAEtD,IAAA,MAAM,gBAAgB,GAAG,WAAW,CAChC,CAAC,KAAuC,KAAI;AACxC,QAAA,kBAAkB,EAAE;QAEpB,IAAI,YAAY,EAAE;YACd,YAAY,CAAC,KAAK,CAAC;;AAE3B,KAAC,EACD,CAAC,YAAY,EAAE,kBAAkB,CAAC,CACrC;AAED,IAAA,MAAM,gBAAgB,GAAG,WAAW,CAChC,CAAC,KAAuC,KAAI;AACxC,QAAA,kBAAkB,EAAE;AACpB,QAAA,mBAAmB,EAAE;QAErB,IAAI,YAAY,EAAE;YACd,YAAY,CAAC,KAAK,CAAC;;KAE1B,EACD,CAAC,YAAY,EAAE,mBAAmB,EAAE,kBAAkB,CAAC,CAC1D;AAED,IAAA,MAAM,kBAAkB,GAAG,WAAW,CAClC,CAAC,KAA0C,KAAI;AAC3C,QAAA,MAAM,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;;AAEjD,KAAC,EACD,CAAC,cAAc,EAAE,OAAO,CAAC,CAC5B;AAED,IAAA,eAAe,CAAC,eAAe,EAAE,kBAAkB,CAAC;IAEpD,MAAM,iBAAiB,GAAG,YAAY,CAAC;AACnC,QAAA,QAAQ,EAAE,CAAC,EAAE,GAAG,EAAE,KAAI;AAClB,YAAA,IAAI,OAAO,IAAI,CAAC,MAAM,EAAE,OAAO,EAAE,IAAI,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;gBAClD,YAAY,CAAC,IAAI,CAAC;gBAElB,eAAe,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,MAAK;oBAC7C,YAAY,CAAC,KAAK,CAAC;AACnB,oBAAA,OAAO,EAAE;iBACZ,EAAE,GAAG,CAAC;;SAEd;AACD,QAAA,KAAK,EAAE,GAAG;AACb,KAAA,CAAC;IAEF,MAAM,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,QAAQ;AAE7C,IAAA,QACI,KAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,KAAK,EAAE,MAAM,EACf,EAAA,CAAC,cAAc,MACZ,oBAAC,OAAO,EAAA,IAAA;AACJ,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAS,iBAAiB,EAAE,GAAG,EAAE,YAAY,EAAA;YACzC,KAAC,CAAA,aAAA,CAAA,iBAAiB,IACd,SAAS,EAAE,EAAE,CACT,MAAM,CAAC,qBAAqB,EAC5B;AACI,oBAAA,CAAC,MAAM,CAAC,SAAS,GAAG,OAAO;AAC3B,oBAAA,CAAC,MAAM,CAAC,SAAS,GAAG,SAAS;iBAChC,EACD,SAAS,CACZ,EACD,gBAAgB,EAAE,MAAM,CAAC,YAAY,EACrC,sBAAsB,EAAE,EAAE,CACtB,sBAAsB,EACtB,MAAM,CAAC,aAAa,CACvB,EACD,KAAK,EAAE;oBACH,CAAC,QAAQ,GAAG,MAAM;AAClB,oBAAA,MAAM,EAAE,cAAc;AACtB,oBAAA,GAAG,KAAK;iBACX,EACD,YAAY,EAAE,gBAAgB,EAC9B,YAAY,EAAE,gBAAgB,EAC9B,GAAG,EAAE,SAAS,CAAC,CAAC,GAAG,EAAE,eAAe,CAAC,CAAC,EACtC,IAAI,EAAE,OAAO,GAAG,OAAO,GAAG,SAAS,EACnC,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EACZ,GAAA,SAAS,IAEZ,QAAQ,CACO,CAClB,CACA,CACb,CACG;AAEhB,CAAC;AAGL,YAAY,CAAC,WAAW,GAAG,cAAc;;;;"}

package/moderncssm/utils/index.js.map CHANGED Viewed

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

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-notification",
-    "version": "9.0.3",
+    "version": "9.0.4",
     "description": "",
     "keywords": [],
     "license": "MIT",
@@ -11,9 +11,9 @@
     "module": "./esm/index.js",
     "dependencies": {
         "@alfalab/core-components-portal": "^5.0.1",
-        "@alfalab/core-components-shared": "^2.1.0",
+        "@alfalab/core-components-shared": "^2.1.1",
         "@alfalab/core-components-stack": "^7.0.1",
-        "@alfalab/core-components-toast-plate": "^9.0.3",
+        "@alfalab/core-components-toast-plate": "^9.0.4",
         "classnames": "^2.5.1",
         "element-closest": "^3.0.2",
         "react-merge-refs": "^1.1.0",
@@ -30,5 +30,5 @@
         "directory": "dist"
     },
     "themesVersion": "15.0.2",
-    "varsVersion": "11.0.1"
+    "varsVersion": "11.0.2"
 }

package/src/index.module.css CHANGED Viewed

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

package/utils/index.js.map CHANGED Viewed

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