@astral/ui 4.41.0 → 4.42.1

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

@@ -0,0 +1,54 @@
+import { useEffect, useState } from 'react';
+import { notifyClassnames } from '../../../../constants';
+const isInteractiveTarget = (element) => Boolean(element.closest('button, a[href], [role="button"], input, textarea, select'));
+/**
+ * Определяет, является ли стек уведомлений раскрытым на мобильном устройстве.
+ */
+export const useTouchStackExpand = ({ stackContainerElement, enabled, hasOpenNotify, }) => {
+    const [isTouchExpanded, setTouchExpanded] = useState(false);
+    useEffect(() => {
+        if (!enabled || !hasOpenNotify) {
+            setTouchExpanded(false);
+        }
+    }, [enabled, hasOpenNotify]);
+    useEffect(() => {
+        if (!enabled || !hasOpenNotify || !stackContainerElement) {
+            return undefined;
+        }
+        const toggleStack = (event) => {
+            const { target } = event;
+            if (!(target instanceof Element) || isInteractiveTarget(target)) {
+                return;
+            }
+            setTouchExpanded((prev) => !prev);
+        };
+        stackContainerElement.addEventListener('pointerdown', toggleStack);
+        return () => {
+            stackContainerElement.removeEventListener('pointerdown', toggleStack);
+        };
+    }, [enabled, hasOpenNotify, stackContainerElement]);
+    useEffect(() => {
+        const collapseIfOutside = (event) => {
+            const { target } = event;
+            if (!(target instanceof Node) || !stackContainerElement) {
+                return;
+            }
+            const stackHost = stackContainerElement.closest(`.${notifyClassnames.stackHost}`);
+            const insideUi = stackHost?.parentElement ?? stackContainerElement;
+            if (!insideUi.contains(target)) {
+                setTouchExpanded(false);
+            }
+        };
+        document.addEventListener('pointerdown', collapseIfOutside, true);
+        if (!enabled ||
+            !hasOpenNotify ||
+            !isTouchExpanded ||
+            !stackContainerElement) {
+            document.removeEventListener('pointerdown', collapseIfOutside, true);
+        }
+        return () => {
+            document.removeEventListener('pointerdown', collapseIfOutside, true);
+        };
+    }, [enabled, hasOpenNotify, isTouchExpanded, stackContainerElement]);
+    return isTouchExpanded;
+};

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

@@ -4,7 +4,7 @@ type UseLogicParams = {
 };
 export declare const useLogic: ({ containerId: externalContainerId, }: UseLogicParams) => {
     isVisibleCloseButton: boolean;
-    isHoveredContainer: boolean;
+    isStackExpanded: boolean;
     isStartedClosingNotify: boolean;
     closeAll: () => void;
 };

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

@@ -1,9 +1,11 @@
 import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify-next';
+import { useViewportType } from '../../../useViewportType';
 import { NOTIFY_NO_TRANSITION_ATTR, notifyClassnames } from '../../constants';
 import { sleep } from '../../utils/sleep';
-import { useHover } from './hooks';
+import { useHover, useTouchStackExpand } from './hooks';
 export const useLogic = ({ containerId: externalContainerId, }) => {
+    const { isMobile } = useViewportType();
     const [toasts, setToasts] = useState([]);
     const [container, setContainer] = useState();
     const [isStartedClosingNotify, setStartedClosingNotify] = useState(false);
@@ -29,7 +31,16 @@ export const useLogic = ({ containerId: externalContainerId, }) => {
             setStartedClosingNotify(false);
         }
     }, [toasts]);
-    const { isHovered: isHoveredContainer } = useHover(container);
+    const hasOpenNotify = Boolean(toasts.length);
+    const { isHovered } = useHover(container, {
+        enabled: !isMobile,
+    });
+    const isTouchExpanded = 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]);
@@ -58,29 +69,28 @@ export const useLogic = ({ containerId: externalContainerId, }) => {
         return unsubscribe;
     }, []);
     useEffect(() => {
-        if (!isHoveredContainer || !container) {
+        if (!isStackExpanded || !container) {
             return;
         }
         (async () => {
             // Ожидаем пока отработает анимация и стек с уведомлениями раскроется
             await 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);
         toast.dismiss({ containerId: externalContainerId });
     };
-    const hasOpenNotify = Boolean(toasts.length);
     return {
-        isVisibleCloseButton: hasOpenNotify,
-        isHoveredContainer: isHoveredContainer && hasOpenNotify,
+        isVisibleCloseButton: hasOpenNotify && (isMobile ? isStackExpanded : true),
+        isStackExpanded,
         isStartedClosingNotify,
         closeAll,
     };

package/components/Notification/NotificationTemplate/styles.js

@@ -1,4 +1,6 @@
+import { buttonClassnames } from '../../Button/constants';
 import { IconButton } from '../../IconButton';
+import { svgIconClassnames } from '../../SvgIcon/constants';
 import { styled } from '../../styled';
 import { Typography } from '../../Typography';
 import { getActionsDirection } from './utils';
@@ -15,6 +17,10 @@ export const Wrapper = 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)};
+  }
 `;
 export const Header = styled.header `
   display: flex;
@@ -22,6 +28,13 @@ export const Header = styled.header `
 
   width: 100%;
   min-height: 24px;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    .${buttonClassnames.root} {
+      width: 24px;
+      height: 24px;
+    }
+  }
 `;
 export const Content = styled(Typography) `
   margin-top: ${({ theme }) => theme.spacing(2)};
@@ -38,6 +51,13 @@ export const IconWrapper = styled.div `
   display: flex;
 
   margin-right: ${({ theme }) => theme.spacing(2)};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    .${svgIconClassnames.root} {
+      width: 24px;
+      height: 24px;
+    }
+  }
 `;
 export const CloseButton = styled(IconButton) `
   align-self: center;

package/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/components/Notification/constants.js

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

package/node/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/node/components/DatePicker/hooks/useMaskedValue/useMaskedValue.js

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

package/node/components/DateRangePicker/useLogic/useLogic.js

@@ -42,15 +42,27 @@ const useLogic = ({ value, minDate = DatePicker_1.DEFAULT_MIN_DATE, maxDate = Da
         selectedStartDate: selectedStartBaseDate,
         selectedEndDate: selectedEndBaseDate,
     });
-    const handleChangeStartDate = (startDateValue) => {
-        if (startDateValue && value?.end && startDateValue > value?.end) {
+    const handleChangeStartDate = (startDateValue, startMaskString) => {
+        const isStartComplete = startDateValue != null &&
+            startMaskString != null &&
+            (0, utils_1.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 &&
+            (0, utils_1.isMaskedDateSyntacticallyComplete)(endMaskString, mask);
+        if (isEndComplete &&
+            value?.start &&
+            endDateValue &&
+            endDateValue < value.start) {
             onChange?.({ start: undefined, end: endDateValue });
             return;
         }

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

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

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

@@ -15,3 +15,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./getBoundaryDate"), exports);
+__exportStar(require("./isMaskedDateSyntacticallyComplete"), exports);

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

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

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

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./isMaskedDateSyntacticallyComplete"), exports);

package/node/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/node/components/DateRangePicker/useLogic/utils/isMaskedDateSyntacticallyComplete/isMaskedDateSyntacticallyComplete.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isMaskedDateSyntacticallyComplete = void 0;
+/**
+ * Все ли части строки по маске заполнены цифрами полностью (без промежуточных состояний IMask).
+ */
+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));
+    });
+};
+exports.isMaskedDateSyntacticallyComplete = isMaskedDateSyntacticallyComplete;

package/node/components/Notification/Notification.js

@@ -8,6 +8,7 @@ const utils_1 = require("./utils");
 const leave = (0, react_toastify_next_1.cssTransition)({
     enter: constants_1.notifyClassnames.animationIn,
     exit: constants_1.notifyClassnames.animationOut,
+    collapse: false,
 });
 exports.notify = {
     success: (title, { icon, ...options } = {}) => (0, react_toastify_next_1.toast)(({ toastProps }) => constants_2.NOTIFICATION_VARIANT.success({ ...options, icon, title }, toastProps), {

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

@@ -49,23 +49,28 @@ exports.Wrapper = (0, styled_1.styled)('div', {
       `}
   }
 
+  .Toastify__toast-container {
+    ${({ theme }) => theme.breakpoints.down('sm')} {
+      padding: ${({ theme }) => theme.spacing(4)};
+    }
+  }
+
   .${constants_1.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;
     }
   }
 
   .${constants_1.notifyClassnames.animationOut} {
-    animation: ${leaveOut} ease-in-out 0.34s;
+    animation: ${leaveOut} ease-in-out ${({ theme }) => theme.transitions.duration.standard}ms;
     animation-fill-mode: both;
   }
 
   .${constants_1.notifyClassnames.root} {
-    min-height: ${constants_1.NOTIFY_HEIGHT};
     margin-bottom: ${({ theme }) => theme.spacing(1)};
     padding: 0;
 
@@ -84,6 +89,12 @@ exports.Wrapper = (0, styled_1.styled)('div', {
       width: 100%;
       height: 3px;
     }
+      ${({ theme }) => theme.breakpoints.up('sm')} {
+      min-height: ${constants_1.NOTIFY_HEIGHT};
+    }
+    ${({ theme }) => theme.breakpoints.down('sm')} {
+      min-height: ${constants_1.NOTIFY_HEIGHT_MOBILE};
+    }
 
     ${({ theme }) => theme.breakpoints.down('sm')} {
       margin-bottom: ${({ theme }) => theme.spacing(3)};

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

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