@astral/ui 4.41.0 → 4.42.1

package/components/DatePicker/hooks/useMaskedValue/useMaskedValue.d.ts

@@ -4,7 +4,7 @@ type Params = {
     /**
      * Изменение value для DatePicker
      * */
-    onChangeValue?: (date?: Date | null) => void;
+    onChangeValue?: (date?: Date | null, maskedValue?: string) => void;
 };
 type Returned = {
     /**

package/components/DatePicker/hooks/useMaskedValue/useMaskedValue.js

@@ -10,15 +10,16 @@ export const useMaskedValue = ({ currentValue, mask, onChangeValue, }) => {
         setMaskedValue(value);
         // При отсутствии value указываем null, так как если задать undefined, то отобразится defaultValue при наличии
         if (!value) {
-            onChangeValue?.(null);
+            onChangeValue?.(null, value);
         }
         else {
-            onChangeValue?.(parseDate(value, mask));
+            onChangeValue?.(parseDate(value, mask), value);
         }
     };
     const handleChangeMaskedDate = (date) => {
-        setMaskedValue(formatDate(date, mask));
-        onChangeValue?.(date);
+        const formatted = formatDate(date, mask);
+        setMaskedValue(formatted);
+        onChangeValue?.(date, formatted);
     };
     // здесь происходит реакция на изменение value из вне (управляемый компонент)
     useEffect(() => {

package/components/DateRangePicker/useLogic/useLogic.js

@@ -3,7 +3,7 @@ import { DEFAULT_DATE_MASK, DEFAULT_MAX_DATE, DEFAULT_MIN_DATE, useMaskedValue,
 import { useForwardedRef } from '../../useForwardedRef';
 import { usePopover } from '../../usePopover';
 import { useBaseRangeDates } from './hooks';
-import { getBoundaryDate } from './utils';
+import { getBoundaryDate, isMaskedDateSyntacticallyComplete } from './utils';
 export const useLogic = ({ value, minDate = DEFAULT_MIN_DATE, maxDate = DEFAULT_MAX_DATE, mask = DEFAULT_DATE_MASK, onChange, onOpen, onClose, onBlur, }, forwardedRef) => {
     const ref = useForwardedRef(forwardedRef);
     const startInputRef = useRef(null);
@@ -39,15 +39,27 @@ export const useLogic = ({ value, minDate = DEFAULT_MIN_DATE, maxDate = DEFAULT_
         selectedStartDate: selectedStartBaseDate,
         selectedEndDate: selectedEndBaseDate,
     });
-    const handleChangeStartDate = (startDateValue) => {
-        if (startDateValue && value?.end && startDateValue > value?.end) {
+    const handleChangeStartDate = (startDateValue, startMaskString) => {
+        const isStartComplete = startDateValue != null &&
+            startMaskString != null &&
+            isMaskedDateSyntacticallyComplete(startMaskString, mask);
+        if (isStartComplete &&
+            value?.end &&
+            startDateValue &&
+            startDateValue > value.end) {
             onChange?.({ start: startDateValue, end: undefined });
             return;
         }
         onChange?.({ ...value, start: startDateValue });
     };
-    const handleChangeEndDate = (endDateValue) => {
-        if (endDateValue && value?.start && endDateValue < value?.start) {
+    const handleChangeEndDate = (endDateValue, endMaskString) => {
+        const isEndComplete = endDateValue != null &&
+            endMaskString != null &&
+            isMaskedDateSyntacticallyComplete(endMaskString, mask);
+        if (isEndComplete &&
+            value?.start &&
+            endDateValue &&
+            endDateValue < value.start) {
             onChange?.({ start: undefined, end: endDateValue });
             return;
         }

package/components/DateRangePicker/useLogic/utils/index.d.ts

@@ -1 +1,2 @@
 export * from './getBoundaryDate';
+export * from './isMaskedDateSyntacticallyComplete';

package/components/DateRangePicker/useLogic/utils/index.js

@@ -1 +1,2 @@
 export * from './getBoundaryDate';
+export * from './isMaskedDateSyntacticallyComplete';

package/components/DateRangePicker/useLogic/utils/isMaskedDateSyntacticallyComplete/index.d.ts

@@ -0,0 +1 @@
+export * from './isMaskedDateSyntacticallyComplete';

package/components/DateRangePicker/useLogic/utils/isMaskedDateSyntacticallyComplete/index.js

@@ -0,0 +1 @@
+export * from './isMaskedDateSyntacticallyComplete';

package/components/DateRangePicker/useLogic/utils/isMaskedDateSyntacticallyComplete/isMaskedDateSyntacticallyComplete.d.ts

@@ -0,0 +1,5 @@
+import { type DateMask } from '../../../../utils/date/format';
+/**
+ * Все ли части строки по маске заполнены цифрами полностью (без промежуточных состояний IMask).
+ */
+export declare const isMaskedDateSyntacticallyComplete: (value: string, mask: DateMask, separator?: string) => boolean;

package/components/DateRangePicker/useLogic/utils/isMaskedDateSyntacticallyComplete/isMaskedDateSyntacticallyComplete.js

@@ -0,0 +1,17 @@
+/**
+ * Все ли части строки по маске заполнены цифрами полностью (без промежуточных состояний IMask).
+ */
+export const isMaskedDateSyntacticallyComplete = (value, mask, separator = '.') => {
+    if (!value) {
+        return false;
+    }
+    const maskParts = mask.split(separator);
+    const valueParts = value.split(separator);
+    if (maskParts.length !== valueParts.length) {
+        return false;
+    }
+    return maskParts.every((maskPart, index) => {
+        const part = valueParts[index];
+        return (part.length === maskPart.length && part.length > 0 && /^\d+$/.test(part));
+    });
+};

package/components/Notification/Notification.js

@@ -5,6 +5,7 @@ import { getClassNameModifierByVariant, getNotifyOptions } from './utils';
 const leave = cssTransition({
     enter: notifyClassnames.animationIn,
     exit: notifyClassnames.animationOut,
+    collapse: false,
 });
 export const notify = {
     success: (title, { icon, ...options } = {}) => toast(({ toastProps }) => NOTIFICATION_VARIANT.success({ ...options, icon, title }, toastProps), {

package/components/Notification/NotificationContainer/styles.js

@@ -1,6 +1,6 @@
 import { ToastContainer } from 'react-toastify-next';
 import { keyframes, styled } from '../../styled';
-import { NOTIFY_HEIGHT, NotificationVariantTypes, notifyClassnames, } from '../constants';
+import { NOTIFY_HEIGHT, NOTIFY_HEIGHT_MOBILE, NotificationVariantTypes, notifyClassnames, } from '../constants';
 const leaveIn = keyframes `
   from {
     transform: translateX(100%);
@@ -46,23 +46,28 @@ export const Wrapper = styled('div', {
       `}
   }
 
+  .Toastify__toast-container {
+    ${({ theme }) => theme.breakpoints.down('sm')} {
+      padding: ${({ theme }) => theme.spacing(4)};
+    }
+  }
+
   .${notifyClassnames.animationIn} {
-    animation: ${leaveIn} ease-in-out 0.34s;
+    animation: ${leaveIn} ease-in-out ${({ theme }) => theme.transitions.duration.standard}ms;
     animation-fill-mode: both;
 
     ${({ theme }) => theme.breakpoints.down('sm')} {
-      animation: ${leaveInMobile} ease-in-out 0.34s;
+      animation: ${leaveInMobile} ease-in-out ${({ theme }) => theme.transitions.duration.standard}ms;
       animation-fill-mode: both;
     }
   }
 
   .${notifyClassnames.animationOut} {
-    animation: ${leaveOut} ease-in-out 0.34s;
+    animation: ${leaveOut} ease-in-out ${({ theme }) => theme.transitions.duration.standard}ms;
     animation-fill-mode: both;
   }
 
   .${notifyClassnames.root} {
-    min-height: ${NOTIFY_HEIGHT};
     margin-bottom: ${({ theme }) => theme.spacing(1)};
     padding: 0;
 
@@ -81,6 +86,12 @@ export const Wrapper = styled('div', {
       width: 100%;
       height: 3px;
     }
+      ${({ theme }) => theme.breakpoints.up('sm')} {
+      min-height: ${NOTIFY_HEIGHT};
+    }
+    ${({ theme }) => theme.breakpoints.down('sm')} {
+      min-height: ${NOTIFY_HEIGHT_MOBILE};
+    }
 
     ${({ theme }) => theme.breakpoints.down('sm')} {
       margin-bottom: ${({ theme }) => theme.spacing(3)};

package/components/Notification/NotificationStackContainer/NotificationStackContainer.js

@@ -8,12 +8,12 @@ if (typeof window !== 'undefined') {
     injectStyle();
 }
 export const NotificationStackContainer = ({ containerId = NOTIFY_CONTAINER_ID, staticContainerId = NOTIFY_STATIC_CONTAINER_ID, bannerContainer, closeButton, ...props }) => {
-    const { isVisibleCloseButton, isHoveredContainer, isStartedClosingNotify, closeAll, } = useLogic({
+    const { isVisibleCloseButton, isStackExpanded, isStartedClosingNotify, closeAll, } = useLogic({
         containerId,
     });
     return (_jsxs(Wrapper, { className: classNames({
-            [notifyClassnames.container]: isHoveredContainer,
-        }), children: [_jsx(Inner, { ...props, ...{ stacked: true }, containerId: containerId, pauseOnFocusLoss: true, position: NOTIFY_POSITIONS.BOTTOM_RIGHT, newestOnTop: false, closeOnClick: false, draggable: false, rtl: false, closeButton: false, bodyClassName: `${notifyClassnames.body}`, toastClassName: notifyClassnames.root, progressClassName: `${notifyClassnames.progress}` }), isVisibleCloseButton && (_jsx(CloseButton, { size: "small", variant: "light", color: "grey", className: classNames({
+            [notifyClassnames.container]: isStackExpanded,
+        }), children: [_jsx("div", { className: notifyClassnames.stackHost, children: _jsx(Inner, { ...props, className: classNames(notifyClassnames.stack, props.className), ...{ stacked: true }, containerId: containerId, pauseOnFocusLoss: true, position: NOTIFY_POSITIONS.BOTTOM_RIGHT, newestOnTop: false, closeOnClick: false, draggable: false, rtl: false, closeButton: false, bodyClassName: `${notifyClassnames.body}`, toastClassName: notifyClassnames.root, progressClassName: `${notifyClassnames.progress}` }) }), isVisibleCloseButton && (_jsx(CloseButton, { size: "small", variant: "light", color: "grey", className: classNames({
                     [notifyClassnames.closeButtonAnimationOut]: isStartedClosingNotify,
                 }), onClick: closeAll, children: "\u0421\u043A\u0440\u044B\u0442\u044C \u0432\u0441\u0435" })), _jsx(StaticInner, { containerId: staticContainerId, position: NOTIFY_POSITIONS.BOTTOM_RIGHT, newestOnTop: false, closeOnClick: false, draggable: false, rtl: false, closeButton: false, bodyClassName: `${notifyClassnames.body}`, toastClassName: notifyClassnames.root, progressClassName: `${notifyClassnames.progress}` }), bannerContainer] }));
 };

package/components/Notification/NotificationStackContainer/styles.js

@@ -1,7 +1,7 @@
 import { ToastContainer } from 'react-toastify-next';
 import { Button } from '../../Button';
 import { keyframes, styled } from '../../styled';
-import { NOTIFY_HEIGHT, NOTIFY_NO_TRANSITION_ATTR, NotificationVariantTypes, notifyClassnames, } from '../constants';
+import { NOTIFY_HEIGHT, NOTIFY_HEIGHT_MOBILE, NOTIFY_NO_TRANSITION_ATTR, NotificationVariantTypes, notifyClassnames, } from '../constants';
 const fade = keyframes `
   from {
     opacity: 0;
@@ -30,6 +30,16 @@ const leaveOut = keyframes `
     visibility: hidden;
   }
 `;
+/** Сохраняем scale stacked (--s), иначе при старте exit transform из keyframes затирает scale и карточка визуально «прыгает» вправо */
+const leaveOutMobileStacked = keyframes `
+  from {
+    transform: translateX(0) scale(var(--s, 1));
+  }
+  to {
+    transform: translateX(100%) scale(var(--s, 1));
+    visibility: hidden;
+  }
+`;
 // используем дополнительный враппер,
 // потому что styled для ToastContainer не умеет работать с theme внутри
 // использовать бэм классы для стилизации пришлось,
@@ -45,7 +55,15 @@ export const Wrapper = styled.div `
   width: 432px;
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
-    right: -20px;
+    inset: 0 0 auto;
+
+    width: 100%;
+    max-width: 100vw;
+    padding: ${({ theme }) => theme.spacing(2, 2, 2, 2)};
+    padding-top: max(
+      ${({ theme }) => theme.spacing(2)},
+      env(safe-area-inset-top, 0px)
+    );
   }
 
   &.${notifyClassnames.container} {
@@ -62,18 +80,86 @@ export const Wrapper = styled.div `
     }
     /* stylelint-enable plugin/no-unsupported-browser-features */
 
-    .Toastify:not(:last-child) {
-      overflow: hidden;
+    ${({ theme }) => theme.breakpoints.up('sm')} {
+      .${notifyClassnames.stackHost} .Toastify {
+        overflow: hidden;
+      }
+    }
+
+    ${({ theme }) => theme.breakpoints.down('sm')} {
+      justify-content: flex-start;
+
+      height: auto;
+
+      .${notifyClassnames.stackHost} .Toastify {
+        overflow: visible;
+      }
+
+      .${notifyClassnames.stack} {
+        overflow: hidden auto;
+        display: flex;
+        flex-direction: column;
+        gap: ${({ theme }) => theme.spacing(2)};
+        align-items: stretch;
+
+        width: 100%;
+        max-width: 100%;
+        padding-top: ${({ theme }) => theme.microSpacing(1)};
+        padding-bottom: 8px !important;
+        padding-bottom: ${({ theme }) => theme.spacing(1)};
+        -webkit-overflow-scrolling: touch;
+      }
+
+      .${notifyClassnames.stack} .${notifyClassnames.root} {
+        pointer-events: auto !important;
+
+        position: relative !important;
+        transform: none !important;
+
+        flex-shrink: 0;
+
+        width: 100% !important;
+        max-width: 100%;
+        height: auto !important;
+        min-height: ${NOTIFY_HEIGHT_MOBILE};
+        max-height: fit-content !important;
+        margin-top: 0 !important;
+        margin-right: 0 !important;
+        margin-bottom: 0 !important;
+
+        opacity: 1 !important;
+      }
+
+      /*
+        На мобильных контейнер не получает mouseEnter — toastify оставляет data-collapsed=true
+        и скрывает direct children не‑последних тостов (.Toastify__toast--stacked[data-collapsed=true]:not(:last-child)>*{opacity:0})
+      */
+      .${notifyClassnames.stack} .Toastify__toast--stacked > * {
+        opacity: 1 !important;
+      }
+
+      .${notifyClassnames.stack} .${notifyClassnames.root}__content {
+        max-height: 400px;
+        margin: ${({ theme }) => theme.spacing(2, 0, 0, 8)};
+      }
+
+      .${notifyClassnames.stack} .${notifyClassnames.root}__footer {
+        margin-bottom: 0;
+      }
+
+      .${notifyClassnames.stack} .Toastify__toast--stacked::before {
+        display: none;
+      }
     }
   }
 
   .${notifyClassnames.animationIn} {
-    animation: ${leaveIn} ease-in-out 0.34s;
+    animation: ${leaveIn} ease-in-out ${({ theme }) => theme.transitions.duration.standard}ms;
     animation-fill-mode: both;
   }
 
   .${notifyClassnames.animationOut} {
-    animation: ${leaveOut} ease-in-out 0.34s;
+    animation: ${leaveOut} ease-in-out;
     animation-fill-mode: both;
   }
 
@@ -82,7 +168,6 @@ export const Wrapper = styled.div `
 
     width: 400px;
     height: ${NOTIFY_HEIGHT};
-    min-height: ${NOTIFY_HEIGHT};
     padding: 0;
 
     box-shadow: ${({ theme }) => theme.elevation[300]};
@@ -104,6 +189,12 @@ export const Wrapper = styled.div `
       width: 100%;
       height: 3px;
     }
+    ${({ theme }) => theme.breakpoints.up('sm')} {
+      min-height: ${NOTIFY_HEIGHT};
+    }
+    ${({ theme }) => theme.breakpoints.down('sm')} {
+      min-height: ${NOTIFY_HEIGHT_MOBILE};
+    }
 
     .Toastify__progress-bar--wrp {
       top: 0;
@@ -151,8 +242,8 @@ export const Wrapper = styled.div `
   }
 
   /* Стили для уведомлений в стеке */
-  .Toastify:not(:last-child) {
-    .${notifyClassnames.root} {
+  ${({ theme }) => theme.breakpoints.up('sm')} { 
+    .${notifyClassnames.stack} .${notifyClassnames.root} {
       position: relative;
       transform: scale(var(--s));
 
@@ -185,6 +276,119 @@ export const Wrapper = styled.div `
       }
     }
   }
+
+  /* Мобильный стек в свёрнутом виде: последний в DOM (самый новый) — сверху; остальные без участия в раскладке */
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    &:not(.${notifyClassnames.container}) {
+      .${notifyClassnames.stack} {
+        position: relative;
+
+        overflow: visible;
+        display: flex;
+        flex-direction: column-reverse;
+        gap: 0;
+        align-items: stretch;
+        justify-content: flex-end;
+
+        max-height: none;
+        margin-bottom: ${({ theme }) => theme.spacing(2)};
+        -webkit-overflow-scrolling: auto;
+
+        /* Два фейковых слоя — только пока в стеке ≥2 активных тоста (без анимации закрытия) */
+
+        /* Причина игнора: Не критично для отображения */
+        /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+        &:has(.${notifyClassnames.root}:not(.${notifyClassnames.animationOut}) ~ .${notifyClassnames.root}:not(.${notifyClassnames.animationOut})) {
+          padding-top: ${({ theme }) => theme.spacing(4)};
+
+          &::before,
+          &::after {
+            pointer-events: none;
+            content: '';
+
+            position: absolute;
+            z-index: 0;
+            right: ${({ theme }) => theme.spacing(2)};
+            left: ${({ theme }) => theme.spacing(2)};
+
+            height: ${NOTIFY_HEIGHT_MOBILE};
+
+            background: ${({ theme }) => theme.palette.background.paper};
+            border-radius: ${({ theme }) => theme.shape.medium};
+            box-shadow: ${({ theme }) => theme.elevation[200]};
+          }
+
+          &::before {
+            top: 0;
+            transform: scaleX(0.92);
+          }
+
+          &::after {
+            top: ${({ theme }) => theme.spacing(2)};
+            transform: scaleX(0.96);
+          }
+        }
+      }
+
+      .${notifyClassnames.stack} .${notifyClassnames.root}:not(:last-of-type) {
+        pointer-events: none;
+
+        position: absolute;
+
+        overflow: hidden;
+
+        width: 1px;
+        height: 1px;
+        margin: -1px;
+        padding: 0;
+
+        white-space: nowrap;
+
+        opacity: 0;
+        clip: rect(0, 0, 0, 0);
+        clip-path: inset(50%);
+        border: 0;
+
+        .${notifyClassnames.root}__content {
+          max-height: 0 !important;
+          margin: 0 !important;
+        }
+      }
+
+      .${notifyClassnames.stack} .${notifyClassnames.root}:last-of-type {
+        position: relative;
+        z-index: 1;
+        transform: scale(var(--s, 1));
+
+        flex: 0 0 auto;
+        align-self: stretch;
+
+        width: 100% !important;
+        min-width: 0 !important;
+        max-width: 100% !important;
+        min-height: ${NOTIFY_HEIGHT_MOBILE};
+        margin-bottom: 0 !important;
+
+        opacity: 1;
+        border-radius: ${({ theme }) => theme.shape.medium};
+
+        .${notifyClassnames.root}__content {
+          max-height: 400px;
+          margin: ${({ theme }) => theme.spacing(2, 0, 0, 8)};
+        }
+      }
+
+      .${notifyClassnames.stackHost} .Toastify,
+      .${notifyClassnames.stackHost} .${notifyClassnames.stack} {
+        overflow: visible !important;
+      }
+
+      .${notifyClassnames.animationOut} {
+        animation: ${leaveOutMobileStacked} ease-in-out ${({ theme }) => theme.transitions.duration.standard}ms;
+        animation-fill-mode: both;
+      }
+    }
+  }
 `;
 export const Inner = styled(ToastContainer) `
   position: relative !important;
@@ -205,20 +409,53 @@ export const Inner = styled(ToastContainer) `
     }
   }
 
-  &:hover {
-    overflow: hidden auto;
+  /* Только устройства с реальным hover и ≥sm — иначе на touch :hover залипает и ломает мобильный стек */
+  ${({ theme }) => theme.breakpoints.up('sm')} {
+    @media (hover: hover) and (pointer: fine) {
+      &:hover {
+        overflow: hidden auto;
 
-    height: 100%;
+        height: 100%;
 
-    .${notifyClassnames.root} {
-      position: relative;
-      transform: unset;
+        .${notifyClassnames.root} {
+          position: relative;
+          transform: unset;
 
-      height: auto;
-      min-height: ${NOTIFY_HEIGHT};
-      margin-bottom: ${({ theme }) => theme.spacing(1)} !important;
+          height: auto;
+          min-height: ${NOTIFY_HEIGHT};
+          margin-bottom: ${({ theme }) => theme.spacing(1)} !important;
 
-      opacity: 1 !important;
+          opacity: 1 !important;
+        }
+
+        .${notifyClassnames.root}__content {
+          max-height: 400px;
+          margin: ${({ theme }) => theme.spacing(2, 0, 0, 8)};
+        }
+
+        .${notifyClassnames.root}__footer {
+          margin-bottom: 0;
+        }
+
+        .Toastify__toast--stacked::before {
+          display: none;
+        }
+      }
+    }
+  }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    min-width: unset;
+    max-width: 100%;
+    padding-right: ${({ theme }) => theme.spacing(2)} !important;
+    padding-left: ${({ theme }) => theme.spacing(2)} !important;
+
+    .${notifyClassnames.root} {
+      width: 100% !important;
+      max-width: 100%;
+      height: auto !important;
+      min-height: ${NOTIFY_HEIGHT_MOBILE};
+      margin-bottom: ${({ theme }) => theme.spacing(2)} !important;
     }
 
     .${notifyClassnames.root}__content {
@@ -229,10 +466,6 @@ export const Inner = styled(ToastContainer) `
     .${notifyClassnames.root}__footer {
       margin-bottom: 0;
     }
-
-    .Toastify__toast--stacked::before {
-      display: none;
-    }
   }
 `;
 export const StaticInner = styled(Inner) `
@@ -259,4 +492,9 @@ export const CloseButton = styled(Button) `
   &.${notifyClassnames.closeButtonAnimationOut} {
     opacity: 0;
   }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    width: calc(100% - ${({ theme }) => theme.spacing(4)});
+    margin: ${({ theme }) => theme.spacing(0, 5, 2, 5)};
+  }
 `;

package/components/Notification/NotificationStackContainer/useLogic/hooks/index.d.ts

@@ -1 +1,2 @@
 export * from './useHover';
+export * from './useTouchStackExpand';

package/components/Notification/NotificationStackContainer/useLogic/hooks/index.js

@@ -1 +1,2 @@
 export * from './useHover';
+export * from './useTouchStackExpand';

package/components/Notification/NotificationStackContainer/useLogic/hooks/useHover/useHover.d.ts

@@ -1,3 +1,7 @@
-export declare const useHover: (element?: Element) => {
+type UseHoverParams = {
+    enabled?: boolean;
+};
+export declare const useHover: (element: Element | undefined, { enabled }?: UseHoverParams) => {
     isHovered: boolean;
 };
+export {};

package/components/Notification/NotificationStackContainer/useLogic/hooks/useHover/useHover.js

@@ -1,9 +1,13 @@
 import { useEffect, useState } from 'react';
-export const useHover = (element) => {
+export const useHover = (element, { enabled = true } = {}) => {
     const [isHovered, setHover] = useState(false);
     const handleMouseEnter = () => setHover(true);
     const handleMouseLeave = () => setHover(false);
     useEffect(() => {
+        if (!enabled) {
+            setHover(false);
+            return undefined;
+        }
         if (!element) {
             return undefined;
         }
@@ -13,6 +17,6 @@ export const useHover = (element) => {
             element.removeEventListener('mouseenter', handleMouseEnter);
             element.removeEventListener('mouseleave', handleMouseLeave);
         };
-    }, [element]);
+    }, [element, enabled]);
     return { isHovered };
 };

package/components/Notification/NotificationStackContainer/useLogic/hooks/useTouchStackExpand/index.d.ts

@@ -0,0 +1 @@
+export * from './useTouchStackExpand';

package/components/Notification/NotificationStackContainer/useLogic/hooks/useTouchStackExpand/index.js

@@ -0,0 +1 @@
+export * from './useTouchStackExpand';

package/components/Notification/NotificationStackContainer/useLogic/hooks/useTouchStackExpand/useTouchStackExpand.d.ts

@@ -0,0 +1,10 @@
+type UseTouchStackExpandParams = {
+    stackContainerElement: Element | null;
+    enabled: boolean;
+    hasOpenNotify: boolean;
+};
+/**
+ * Определяет, является ли стек уведомлений раскрытым на мобильном устройстве.
+ */
+export declare const useTouchStackExpand: ({ stackContainerElement, enabled, hasOpenNotify, }: UseTouchStackExpandParams) => boolean;
+export {};