@astral/ui 4.41.0 → 4.42.0

package/node/components/Notification/NotificationStackContainer/useLogic/useLogic.js

@@ -3,10 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogic = void 0;
 const react_1 = require("react");
 const react_toastify_next_1 = require("react-toastify-next");
+const useViewportType_1 = require("../../../useViewportType");
 const constants_1 = require("../../constants");
 const sleep_1 = require("../../utils/sleep");
 const hooks_1 = require("./hooks");
 const useLogic = ({ containerId: externalContainerId, }) => {
+    const { isMobile } = (0, useViewportType_1.useViewportType)();
     const [toasts, setToasts] = (0, react_1.useState)([]);
     const [container, setContainer] = (0, react_1.useState)();
     const [isStartedClosingNotify, setStartedClosingNotify] = (0, react_1.useState)(false);
@@ -32,7 +34,16 @@ const useLogic = ({ containerId: externalContainerId, }) => {
             setStartedClosingNotify(false);
         }
     }, [toasts]);
-    const { isHovered: isHoveredContainer } = (0, hooks_1.useHover)(container);
+    const hasOpenNotify = Boolean(toasts.length);
+    const { isHovered } = (0, hooks_1.useHover)(container, {
+        enabled: !isMobile,
+    });
+    const isTouchExpanded = (0, hooks_1.useTouchStackExpand)({
+        stackContainerElement: container ?? null,
+        enabled: isMobile,
+        hasOpenNotify,
+    });
+    const isStackExpanded = isMobile ? isTouchExpanded : isHovered;
     const handleAddToast = ({ id, containerId }) => {
         if (Object.is(containerId, externalContainerId)) {
             setToasts((currentToasts) => [...currentToasts, id]);
@@ -61,29 +72,28 @@ const useLogic = ({ containerId: externalContainerId, }) => {
         return unsubscribe;
     }, []);
     (0, react_1.useEffect)(() => {
-        if (!isHoveredContainer || !container) {
+        if (!isStackExpanded || !container) {
             return;
         }
         (async () => {
             // Ожидаем пока отработает анимация и стек с уведомлениями раскроется
             await (0, sleep_1.sleep)(300);
-            const hasScroll = container?.scrollHeight > container?.clientHeight;
-            if (hasScroll) {
+            const hasVerticalScroll = container.scrollHeight > container.clientHeight;
+            if (hasVerticalScroll) {
                 container.scrollTo({
                     top: container.scrollHeight,
                     behavior: 'smooth',
                 });
             }
         })();
-    }, [container, isHoveredContainer]);
+    }, [container, isStackExpanded]);
     const closeAll = () => {
         setStartedClosingNotify(true);
         react_toastify_next_1.toast.dismiss({ containerId: externalContainerId });
     };
-    const hasOpenNotify = Boolean(toasts.length);
     return {
-        isVisibleCloseButton: hasOpenNotify,
-        isHoveredContainer: isHoveredContainer && hasOpenNotify,
+        isVisibleCloseButton: hasOpenNotify && (isMobile ? isStackExpanded : true),
+        isStackExpanded,
         isStartedClosingNotify,
         closeAll,
     };

package/node/components/Notification/NotificationTemplate/styles.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Title = exports.CloseButton = exports.IconWrapper = exports.Footer = exports.Content = exports.Header = exports.Wrapper = void 0;
+const constants_1 = require("../../Button/constants");
 const IconButton_1 = require("../../IconButton");
+const constants_2 = require("../../SvgIcon/constants");
 const styled_1 = require("../../styled");
 const Typography_1 = require("../../Typography");
 const utils_1 = require("./utils");
@@ -18,6 +20,10 @@ exports.Wrapper = styled_1.styled.article `
   color: ${({ theme }) => theme.palette.grey[900]};
 
   background: ${({ theme }) => theme.palette.background.default};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    padding: ${({ theme }) => theme.spacing(2, 3)};
+  }
 `;
 exports.Header = styled_1.styled.header `
   display: flex;
@@ -25,6 +31,13 @@ exports.Header = styled_1.styled.header `
 
   width: 100%;
   min-height: 24px;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    .${constants_1.buttonClassnames.root} {
+      width: 24px;
+      height: 24px;
+    }
+  }
 `;
 exports.Content = (0, styled_1.styled)(Typography_1.Typography) `
   margin-top: ${({ theme }) => theme.spacing(2)};
@@ -41,6 +54,13 @@ exports.IconWrapper = styled_1.styled.div `
   display: flex;
 
   margin-right: ${({ theme }) => theme.spacing(2)};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    .${constants_2.svgIconClassnames.root} {
+      width: 24px;
+      height: 24px;
+    }
+  }
 `;
 exports.CloseButton = (0, styled_1.styled)(IconButton_1.IconButton) `
   align-self: center;

package/node/components/Notification/constants.d.ts

@@ -18,9 +18,13 @@ export declare const NOTIFY_STATIC_CONTAINER_ID = "static-notify-container";
 export declare const BANNER_CONTAINER_ID = "banner-container-id";
 export declare const NOTIFY_NO_TRANSITION_ATTR = "data-no-transition";
 export declare const NOTIFY_HEIGHT = "56px";
+export declare const NOTIFY_HEIGHT_MOBILE = "40px";
 export declare const notifyClassnames: {
     root: string;
     body: string;
+    stack: string;
+    /** Обёртка только над stacked ToastContainer — без :has() отделяем внешний .Toastify от статичного */
+    stackHost: string;
     container: string;
     animationIn: string;
     animationOut: string;

package/node/components/Notification/constants.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.notifyClassnames = exports.NOTIFY_HEIGHT = exports.NOTIFY_NO_TRANSITION_ATTR = exports.BANNER_CONTAINER_ID = exports.NOTIFY_STATIC_CONTAINER_ID = exports.NOTIFY_CONTAINER_ID = exports.NOTIFY_POSITIONS = exports.NotificationVariantTypes = void 0;
+exports.notifyClassnames = exports.NOTIFY_HEIGHT_MOBILE = exports.NOTIFY_HEIGHT = exports.NOTIFY_NO_TRANSITION_ATTR = exports.BANNER_CONTAINER_ID = exports.NOTIFY_STATIC_CONTAINER_ID = exports.NOTIFY_CONTAINER_ID = exports.NOTIFY_POSITIONS = exports.NotificationVariantTypes = void 0;
 const createUIKitClassname_1 = require("../utils/createUIKitClassname");
 var NotificationVariantTypes;
 (function (NotificationVariantTypes) {
@@ -23,9 +23,13 @@ exports.NOTIFY_STATIC_CONTAINER_ID = 'static-notify-container';
 exports.BANNER_CONTAINER_ID = 'banner-container-id';
 exports.NOTIFY_NO_TRANSITION_ATTR = 'data-no-transition';
 exports.NOTIFY_HEIGHT = '56px';
+exports.NOTIFY_HEIGHT_MOBILE = '40px';
 exports.notifyClassnames = {
     root: (0, createUIKitClassname_1.createUIKitClassname)('notify'),
     body: (0, createUIKitClassname_1.createUIKitClassname)('notify__body'),
+    stack: (0, createUIKitClassname_1.createUIKitClassname)('notify__stack'),
+    /** Обёртка только над stacked ToastContainer — без :has() отделяем внешний .Toastify от статичного */
+    stackHost: (0, createUIKitClassname_1.createUIKitClassname)('notify__stack-host'),
     container: (0, createUIKitClassname_1.createUIKitClassname)('notify__container'),
     animationIn: (0, createUIKitClassname_1.createUIKitClassname)('notify_animation-in'),
     animationOut: (0, createUIKitClassname_1.createUIKitClassname)('notify_animation-out'),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astral/ui",
-  "version": "4.41.0",
+  "version": "4.42.0",
   "browser": "./index.js",
   "main": "./node/index.js",
   "dependencies": {