@astral/ui 4.51.0 → 4.52.1

package/node/components/DashboardLayout/Header/styles.js

@@ -1,14 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MenuOrganizationWrapper = exports.HeaderContent = exports.ExitButton = exports.ProfileWrapper = exports.ProductSwitcherWrapper = exports.HeaderContentSection = exports.HeaderSection = exports.MobileSidebarTogglerWrapper = exports.HeaderRoot = void 0;
+exports.PriorityFeatureWrapper = exports.HeaderContent = exports.ExitButton = exports.ProfileWrapper = exports.ProductSwitcherWrapper = exports.HeaderContentSection = exports.HeaderSection = exports.MobileSidebarTogglerWrapper = exports.HeaderRoot = void 0;
 const Button_1 = require("@mui/material/Button");
 const constants_1 = require("../../DashboardSidebar/constants");
 const IconButton_1 = require("../../IconButton");
 const constants_2 = require("../../MenuOrganization/constants");
 const constants_3 = require("../../MenuOrganization/OrganizationButton/constants");
+const constants_4 = require("../../Profile/constants");
 const styled_1 = require("../../styled");
-const constants_4 = require("../constants");
-const constants_5 = require("./constants");
+const constants_5 = require("../constants");
+const constants_6 = require("./constants");
 exports.HeaderRoot = (0, styled_1.styled)('header', {
     shouldForwardProp: (prop) => !['$isFocusedMode'].includes(prop),
 }) `
@@ -21,8 +22,8 @@ exports.HeaderRoot = (0, styled_1.styled)('header', {
   justify-content: space-between;
 
   width: 100%;
-  height: ${constants_4.HEADER_HEIGHT_DESKTOP};
-  margin-top: ${({ $isFocusedMode }) => $isFocusedMode ? `-${constants_4.HEADER_HEIGHT_DESKTOP}` : 0};
+  height: ${constants_5.HEADER_HEIGHT_DESKTOP};
+  margin-top: ${({ $isFocusedMode }) => $isFocusedMode ? `-${constants_5.HEADER_HEIGHT_DESKTOP}` : 0};
   margin-bottom: ${({ theme }) => theme.spacing(4)};
 
   transition: ${({ theme }) => {
@@ -32,14 +33,14 @@ exports.HeaderRoot = (0, styled_1.styled)('header', {
 }};
 
   ${({ theme }) => theme.breakpoints.down('laptop')} {
-    height: ${constants_4.HEADER_HEIGHT_LAPTOP};
+    height: ${constants_5.HEADER_HEIGHT_LAPTOP};
   }
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
     grid-row: 2;
     justify-content: flex-start;
 
-    height: ${constants_4.HEADER_HEIGHT_MOBILE};
+    height: ${constants_5.HEADER_HEIGHT_MOBILE};
     margin-bottom: 0;
     padding: ${({ theme }) => theme.spacing(0, 2, 0, 1)};
 
@@ -60,7 +61,7 @@ exports.MobileSidebarTogglerWrapper = styled_1.styled.div `
   
   /* Причина игнора: Не критично для отображения */
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
-  .${constants_4.dashboardLayoutClassnames.root}:not(:has(.${constants_1.dashboardSidebarClassnames.root}))
+  .${constants_5.dashboardLayoutClassnames.root}:not(:has(.${constants_1.dashboardSidebarClassnames.root}))
     & {
     display: none;
   }
@@ -80,6 +81,15 @@ exports.HeaderContentSection = (0, styled_1.styled)(exports.HeaderSection) `
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
     gap: ${({ theme }) => theme.spacing(2)};
+
+    &.${constants_6.dashboardLayoutHeaderClassnames.priorityFeatureMenuOrg} {
+      & .${constants_2.menuOrganizationClassnames.organizationData} {
+        display: none;
+      }
+      & .${constants_2.menuOrganizationClassnames.button} {
+        border-radius: ${({ theme }) => theme.shape.medium};
+      }
+    }
   }
 `;
 exports.ProductSwitcherWrapper = styled_1.styled.div `
@@ -114,45 +124,77 @@ exports.HeaderContent = styled_1.styled.div `
     padding: 0;
   }
 `;
-exports.MenuOrganizationWrapper = styled_1.styled.div `
+/**
+ * Обертка для элементов которые должны быть в мобильном хедере или помещены в sidebar.
+ */
+exports.PriorityFeatureWrapper = styled_1.styled.div `
   ${({ theme }) => theme.breakpoints.down('sm')} {
-    position: absolute;
-    z-index: ${({ theme }) => theme.zIndex.appBar - 1};
-    top: ${({ $alertHeight }) => `calc(${$alertHeight}px + ${constants_4.HEADER_HEIGHT_MOBILE}) `};
-    left: 0;
-    
-    /* Необходимо для анимации компонента вместе с sidebar */
-    transform: translateX(-100vw);
 
-    display: flex;
-    flex-direction: column;
+    &.${constants_6.dashboardLayoutHeaderClassnames.featureInSidebar} {
+      position: absolute;
+      z-index: ${({ theme }) => theme.zIndex.appBar - 1};
+      top: calc(var(--alert-height, 0px) + ${constants_5.HEADER_HEIGHT_MOBILE});
+      left: 0;
+      
+      /* Необходимо для анимации компонента вместе с sidebar */
+      transform: translateX(-100vw);
 
-    width: 100vw;
+      display: flex;
+      flex-direction: column;
 
-    background-color: ${({ theme }) => theme.palette.background.default};
+      width: 100vw;
 
-    transition: ${({ theme }) => {
+      background-color: ${({ theme }) => theme.palette.background.default};
+
+      transition: ${({ theme }) => {
     return theme.transitions.create(['transform'], {
         duration: theme.transitions.duration.standard,
     });
 }};
 
-    &.${constants_5.dashboardLayoutHeaderClassnames.mobileMenuOrganizationVisible} {
-      transform: translateX(0);
-    }
-
-    & .${constants_2.menuOrganizationClassnames.button} {
-      height: ${constants_3.MOBILE_BUTTON_HEIGHT};
-      padding: ${({ theme }) => theme.spacing(3, 4)};
+      &.${constants_6.dashboardLayoutHeaderClassnames.mobileSidebarPriorityFeatureVisible} {
+        transform: translateX(0);
+      }
 
-      border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+      & .${constants_2.menuOrganizationClassnames.button}, & .${constants_4.profileClassnames.button} {
+        height: ${constants_3.MOBILE_BUTTON_HEIGHT};
+        padding: ${({ theme }) => theme.spacing(3, 4)};
 
-      &:hover {
         border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+
+        &:hover {
+          border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+        }
+
+        &:active {
+          border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+        }
       }
 
-      &:active {
-        border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+      &.${constants_6.dashboardLayoutHeaderClassnames.priorityFeatureMenuOrg} {
+        & .${constants_6.dashboardLayoutHeaderClassnames.profile} {
+          display: block;
+        }
+
+
+        & .${constants_4.profileClassnames.button} {
+          width: 100%;
+          max-width: unset;
+
+          border-radius: 0;
+        }
+
+        & .${constants_4.profileClassnames.avatar} {
+          display: none;
+        }
+
+        & .${constants_4.profileClassnames.user} {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+
+          width: 100%;
+        }
       }
     }
   }

package/node/components/DashboardLayout/Header/useLogic/useLogic.d.ts

@@ -1,12 +1,15 @@
+import { type CSSProperties } from 'react';
 import { type HeaderProps } from '../types';
 export declare const useLogic: ({ profile, menuOrganization }: HeaderProps) => {
     isShowExitButton: boolean;
     isShowProfile: boolean;
     isMobile: boolean;
     isFocusedMode: boolean;
+    mobileHeaderPriorityFeature: "profile" | "menuOrg";
     isLoading: boolean;
     collapsedIn: boolean;
     onToggleSidebar: (newValue?: boolean | undefined) => void;
     alertHeight: number;
-    menuOrganizationClassnames: string;
+    isPinned: boolean;
+    headerStyle: CSSProperties;
 };

package/node/components/DashboardLayout/Header/useLogic/useLogic.js

@@ -5,31 +5,36 @@ const react_1 = require("react");
 const DashboardContext_1 = require("../../../DashboardContext");
 const DashboardSidebarProvider_1 = require("../../../DashboardSidebarProvider");
 const useViewportType_1 = require("../../../useViewportType");
-const classNames_1 = require("../../../utils/classNames");
-const constants_1 = require("../constants");
 const useLogic = ({ profile, menuOrganization }) => {
-    const { isFocusedMode, isLoading, hasMenuOrganizationRef, alertHeight } = (0, react_1.useContext)(DashboardContext_1.DashboardContext);
+    const { isFocusedMode, isLoading, hasMenuOrganizationRef, hasProfileRef, alertHeight, mobileHeaderPriorityFeature, } = (0, react_1.useContext)(DashboardContext_1.DashboardContext);
     const { collapsedIn, onToggleSidebar, isPinned } = (0, react_1.useContext)(DashboardSidebarProvider_1.DashboardSidebarContext);
     (0, react_1.useEffect)(() => {
         hasMenuOrganizationRef.current = Boolean(menuOrganization);
-    }, [menuOrganization]);
+        hasProfileRef.current = Boolean(profile);
+    }, [menuOrganization, profile]);
     const { isMobile } = (0, useViewportType_1.useViewportType)();
     const hasMenu = Boolean(profile?.menu || profile?.menuList);
-    const isShowProfile = (Boolean(profile) && !isMobile) || (hasMenu && isMobile);
-    const isShowExitButton = isMobile && !hasMenu && Boolean(profile?.exitButton);
-    const menuOrganizationClassnames = (0, react_1.useMemo)(() => (0, classNames_1.classNames)({
-        [constants_1.dashboardLayoutHeaderClassnames.mobileMenuOrganizationVisible]: isPinned,
-    }), [isPinned]);
+    const isShowProfile = (Boolean(profile) && !isMobile) ||
+        (hasMenu && isMobile && mobileHeaderPriorityFeature === 'profile');
+    const isShowExitButton = isMobile &&
+        !hasMenu &&
+        Boolean(profile?.exitButton) &&
+        mobileHeaderPriorityFeature === 'profile';
+    const headerStyle = {
+        '--alert-height': `${alertHeight}px`,
+    };
     return {
         isShowExitButton,
         isShowProfile,
         isMobile,
         isFocusedMode,
+        mobileHeaderPriorityFeature,
         isLoading,
         collapsedIn,
         onToggleSidebar,
         alertHeight,
-        menuOrganizationClassnames,
+        isPinned,
+        headerStyle,
     };
 };
 exports.useLogic = useLogic;

package/node/components/DashboardLayout/types.d.ts

@@ -10,4 +10,9 @@ export type DashboardLayoutProps = {
      * Если true, отображается состояние загрузки
      */
     isLoading?: boolean;
+    /**
+     * Элемент, отображаемый в мобильном хедере.
+     * Второстепенный будет помещен в sidebar.
+     */
+    mobileHeaderPriorityFeature?: 'profile' | 'menuOrg';
 };

package/node/components/DashboardSidebar/DashboardSidebar.js

@@ -6,17 +6,32 @@ const react_1 = require("react");
 const DashboardSidebarSkeleton_1 = require("../DashboardSidebarSkeleton");
 const NavMenu_1 = require("../NavMenu");
 const PinButton_1 = require("../PinButton");
+const cva_1 = require("../utils/cva");
 const getInertProps_1 = require("../utils/getInertProps");
+const constants_1 = require("./constants");
 const SidebarNav_1 = require("./SidebarNav");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
+const sidebar = (0, cva_1.cva)('', {
+    variants: {
+        hasProfile: {
+            true: constants_1.dashboardSidebarClassnames.hasProfile,
+        },
+        hasMenuOrganization: {
+            true: constants_1.dashboardSidebarClassnames.hasMenuOrganization,
+        },
+    },
+});
 /**
  * Основной sidebar приложения
  */
 exports.DashboardSidebar = (0, react_1.forwardRef)((props, ref) => {
-    const { isPinned, isMobile, collapsedIn, onTogglePin, onMouseEnter, onMouseLeave, alertHeight, classnames, wrapperClassnames, menu, header, isLoading, } = (0, useLogic_1.useLogic)(props);
+    const { isPinned, isMobile, collapsedIn, onTogglePin, onMouseEnter, onMouseLeave, alertHeight, classnames, menu, header, isLoading, hasMenuOrganization, hasProfile, } = (0, useLogic_1.useLogic)(props);
     if (isLoading) {
         return (0, jsx_runtime_1.jsx)(DashboardSidebarSkeleton_1.DashboardSidebarSkeleton, {});
     }
-    return ((0, jsx_runtime_1.jsx)(styles_1.Wrapper, { "$isPinned": isPinned, "$alertHeight": alertHeight, className: wrapperClassnames, children: (0, jsx_runtime_1.jsx)(styles_1.SidebarRoot, { ref: ref, "$isPinned": isPinned, "$collapsedIn": collapsedIn, className: classnames, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ...(0, getInertProps_1.getInertProps)(isMobile && !isPinned), children: (0, jsx_runtime_1.jsxs)(styles_1.StyledPaper, { variant: "outlined", children: [(0, jsx_runtime_1.jsxs)(styles_1.SidebarContent, { "$collapsedIn": collapsedIn, "$isPinned": isPinned, "$hasHeader": Boolean(header), children: [header && (0, jsx_runtime_1.jsx)(styles_1.SidebarHeader, { children: header }), (0, jsx_runtime_1.jsx)(SidebarNav_1.SidebarNav, { menu: (0, jsx_runtime_1.jsx)(NavMenu_1.NavMenu, { collapsedIn: collapsedIn, items: menu.items }) })] }), (0, jsx_runtime_1.jsx)(styles_1.Footer, { children: (0, jsx_runtime_1.jsx)(PinButton_1.PinButton, { isPinned: isPinned, collapsedIn: collapsedIn, onClick: onTogglePin }) })] }) }) }));
+    return ((0, jsx_runtime_1.jsx)(styles_1.Wrapper, { "$isPinned": isPinned, "$alertHeight": alertHeight, className: sidebar({
+            hasProfile,
+            hasMenuOrganization,
+        }), children: (0, jsx_runtime_1.jsx)(styles_1.SidebarRoot, { ref: ref, "$isPinned": isPinned, "$collapsedIn": collapsedIn, className: classnames, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ...(0, getInertProps_1.getInertProps)(isMobile && !isPinned), children: (0, jsx_runtime_1.jsxs)(styles_1.StyledPaper, { variant: "outlined", children: [(0, jsx_runtime_1.jsxs)(styles_1.SidebarContent, { "$collapsedIn": collapsedIn, "$isPinned": isPinned, "$hasHeader": Boolean(header), children: [header && (0, jsx_runtime_1.jsx)(styles_1.SidebarHeader, { children: header }), (0, jsx_runtime_1.jsx)(SidebarNav_1.SidebarNav, { menu: (0, jsx_runtime_1.jsx)(NavMenu_1.NavMenu, { collapsedIn: collapsedIn, items: menu.items }) })] }), (0, jsx_runtime_1.jsx)(styles_1.Footer, { children: (0, jsx_runtime_1.jsx)(PinButton_1.PinButton, { isPinned: isPinned, collapsedIn: collapsedIn, onClick: onTogglePin }) })] }) }) }));
 });

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

@@ -1,5 +1,6 @@
 export declare const dashboardSidebarClassnames: {
     root: string;
+    hasProfile: string;
     hasMenuOrganization: string;
 };
 export declare const LABEL_WIDTH: {

package/node/components/DashboardSidebar/constants.js

@@ -4,6 +4,7 @@ exports.LABEL_WIDTH = exports.dashboardSidebarClassnames = void 0;
 const createUIKitClassname_1 = require("../utils/createUIKitClassname");
 exports.dashboardSidebarClassnames = {
     root: (0, createUIKitClassname_1.createUIKitClassname)('dashboard-layout-sidebar'),
+    hasProfile: (0, createUIKitClassname_1.createUIKitClassname)('dashboard-layout-sidebar_has-profile'),
     hasMenuOrganization: (0, createUIKitClassname_1.createUIKitClassname)('dashboard-layout-sidebar_has-menu-organization'),
 };
 exports.LABEL_WIDTH = {

package/node/components/DashboardSidebar/styles.js

@@ -38,7 +38,7 @@ exports.Wrapper = (0, styled_1.styled)('div', {
     });
 }};
 
-    &.${constants_4.dashboardSidebarClassnames.hasMenuOrganization} {
+    &.${constants_4.dashboardSidebarClassnames.hasMenuOrganization}, &.${constants_4.dashboardSidebarClassnames.hasProfile} {
       top: ${({ $alertHeight }) => `calc(${$alertHeight}px + ${constants_2.HEADER_HEIGHT_MOBILE} + ${OrganizationButton_1.MOBILE_BUTTON_HEIGHT}) `};
     }
   }

package/node/components/DashboardSidebar/useLogic/useLogic.d.ts

@@ -28,5 +28,6 @@ export declare const useLogic: (props: DashboardSidebarProps) => {
     header: import("react").ReactNode;
     isLoading: boolean;
     classnames: string;
-    wrapperClassnames: string;
+    hasMenuOrganization: boolean | null;
+    hasProfile: boolean | null;
 };

package/node/components/DashboardSidebar/useLogic/useLogic.js

@@ -13,7 +13,7 @@ const constants_1 = require("../constants");
 const useLogic = (props) => {
     const { className, menu, header, isLoading } = props;
     const { onToggleSidebar, isPinned, onTogglePin, collapsedIn, setIsPopupOpen, } = (0, react_1.useContext)(DashboardSidebarProvider_1.DashboardSidebarContext);
-    const { alertHeight, isLoading: isDashboardLoading, hasMenuOrganizationRef, } = (0, react_1.useContext)(DashboardContext_1.DashboardContext);
+    const { alertHeight, isLoading: isDashboardLoading, hasMenuOrganizationRef, hasProfileRef, mobileHeaderPriorityFeature, } = (0, react_1.useContext)(DashboardContext_1.DashboardContext);
     const { isMobile } = (0, useViewportType_1.useViewportType)();
     const hoverTimerRef = (0, react_1.useRef)(null);
     const theme = (0, useTheme_1.useTheme)();
@@ -83,9 +83,6 @@ const useLogic = (props) => {
             }
         };
     }, [collapsedIn, isPinned]);
-    const wrapperClassnames = (0, react_1.useMemo)(() => (0, classNames_1.classNames)({
-        [constants_1.dashboardSidebarClassnames.hasMenuOrganization]: hasMenuOrganizationRef.current,
-    }), [hasMenuOrganizationRef.current]);
     const classnames = (0, classNames_1.classNames)(className, constants_1.dashboardSidebarClassnames.root);
     return {
         isPinned,
@@ -99,7 +96,9 @@ const useLogic = (props) => {
         header,
         isLoading: isLoading || isDashboardLoading,
         classnames,
-        wrapperClassnames,
+        hasMenuOrganization: hasMenuOrganizationRef.current &&
+            mobileHeaderPriorityFeature === 'profile',
+        hasProfile: hasProfileRef.current && mobileHeaderPriorityFeature === 'menuOrg',
     };
 };
 exports.useLogic = useLogic;

package/node/components/DatePicker/hooks/useDatePickerOptions/useDatePickerOptions.d.ts

@@ -30,6 +30,8 @@ type UseMaskedValueAndSelectedBaseDateReturn = {
          */
         value: string;
     };
+    /** При blur неполной даты - в onChange уходит Invalid Date (тот же стейт, что у маски). */
+    onMaskedValueBlur: () => void;
 };
 /**
  * хук объединяющий повторяющуюся логику в работе DatePicker и RangeDatePicker:

package/node/components/DatePicker/hooks/useDatePickerOptions/useDatePickerOptions.js

@@ -15,7 +15,7 @@ const useSelectedBaseDate_1 = require("../useSelectedBaseDate");
  */
 const useDatePickerOptions = ({ onChange, mask, currentValue, minDate, maxDate, monthOffset, onDatePick, }) => {
     const baseDate = (0, useBaseDateInRange_1.useBaseDateInRange)({ minDate, maxDate, monthOffset });
-    const { maskedValue, onMaskedValueChange, onMaskedDateChange } = (0, useMaskedValue_1.useMaskedValue)({
+    const { maskedValue, onMaskedValueChange, onMaskedValueBlur, onMaskedDateChange, } = (0, useMaskedValue_1.useMaskedValue)({
         currentValue,
         mask,
         onChangeValue: onChange,
@@ -42,6 +42,7 @@ const useDatePickerOptions = ({ onChange, mask, currentValue, minDate, maxDate,
             onChange: handleDatePick,
             date: selectedBaseDate || baseDate,
         },
+        onMaskedValueBlur,
     };
 };
 exports.useDatePickerOptions = useDatePickerOptions;

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

@@ -19,6 +19,10 @@ type Returned = {
      * Изменение maskedValue
      * */
     onMaskedValueChange: (value: string) => void;
+    /**
+     * Реакция на blur maskedValue
+     * */
+    onMaskedValueBlur: () => void;
 };
 /**
  * Хук для управления значением для MaskField

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

@@ -9,19 +9,43 @@ const date_1 = require("../../../utils/date");
  */
 const useMaskedValue = ({ currentValue, mask, onChangeValue, }) => {
     const [maskedValue, setMaskedValue] = (0, react_1.useState)(() => currentValue ? (0, date_1.formatDate)(currentValue, mask) : '');
+    const maskedValueRef = (0, react_1.useRef)(maskedValue);
+    /**
+     * Ввод в маску: синхронизируем локальное значение и ref (ref нужен на blur и после выбора даты из календаря,
+     * чтобы не читать устаревший state).
+     * `onChangeValue` вызываем только при пустой строке (`null`) или когда маска синтаксически полная —
+     * иначе partial не уходит наружу до завершения ввода или до blur (см. `handleMaskedValueBlur`).
+     */
     const handleMaskedValueChange = (value) => {
         setMaskedValue(value);
-        // При отсутствии value указываем null, так как если задать undefined, то отобразится defaultValue при наличии
+        maskedValueRef.current = value;
         if (!value) {
             onChangeValue?.(null, value);
+            return;
+        }
+        if (!(0, date_1.isMaskedDateSyntacticallyComplete)(value, mask)) {
+            return;
         }
-        else {
-            onChangeValue?.((0, date_1.parseDate)(value, mask), value);
+        onChangeValue?.((0, date_1.parseDate)(value, mask), value);
+    };
+    /**
+     * Blur поля: если осталась непустая неполная маска — один раз отдаём `Invalid Date` в `onChangeValue`,
+     * чтобы формы могли показать ошибку. Пустая строка и полная маска не дублируют уже отправленный `onChange`.
+     */
+    const handleMaskedValueBlur = () => {
+        const currentMaskedValue = maskedValueRef.current;
+        if (!currentMaskedValue) {
+            return;
+        }
+        if ((0, date_1.isMaskedDateSyntacticallyComplete)(currentMaskedValue, mask)) {
+            return;
         }
+        onChangeValue?.(new Date(Number.NaN), currentMaskedValue);
     };
     const handleChangeMaskedDate = (date) => {
         const formatted = (0, date_1.formatDate)(date, mask);
         setMaskedValue(formatted);
+        maskedValueRef.current = formatted;
         onChangeValue?.(date, formatted);
     };
     // здесь происходит реакция на изменение value из вне (управляемый компонент)
@@ -29,6 +53,7 @@ const useMaskedValue = ({ currentValue, mask, onChangeValue, }) => {
         // если новое значение пустое, то сбрасываем значение MaskField
         if (!currentValue) {
             setMaskedValue('');
+            maskedValueRef.current = '';
             return;
         }
         // здесь обрабатывается сценарий, когда в инпут вводится невалидная дата и при этом currentValue становится Invalid Date
@@ -36,16 +61,20 @@ const useMaskedValue = ({ currentValue, mask, onChangeValue, }) => {
         if (!(0, isDate_1.isDate)(currentValue) && maskedValue) {
             return;
         }
-        // проверяем равны ли даты
-        const isEqualValueAndMaskedDate = currentValue.getTime() === (0, date_1.parseDate)(maskedValue, mask).getTime();
+        // сравнение только при полной маске, иначе getTime() от parseDate может быть NaN
+        const isEqualValueAndMaskedDate = (0, date_1.isMaskedDateSyntacticallyComplete)(maskedValue, mask) &&
+            currentValue.getTime() === (0, date_1.parseDate)(maskedValue, mask).getTime();
         // если даты не равны, то значит изменился currentValue из вне и надо синхронизировать maskedValue
         if (!isEqualValueAndMaskedDate) {
-            setMaskedValue((0, date_1.formatDate)(currentValue, mask));
+            const formatted = (0, date_1.formatDate)(currentValue, mask);
+            setMaskedValue(formatted);
+            maskedValueRef.current = formatted;
         }
     }, [currentValue]);
     return {
         maskedValue,
         onMaskedValueChange: handleMaskedValueChange,
+        onMaskedValueBlur: handleMaskedValueBlur,
         onMaskedDateChange: handleChangeMaskedDate,
     };
 };

package/node/components/DatePicker/useLogic/useLogic.d.ts

@@ -13,6 +13,7 @@ export declare const useLogic: ({ label, value, maxDate, minDate, mask, onOpen,
     };
     DatePickerInputProps: {
         value: string;
+        onBlur: () => void;
     };
     onAccept: ((value: string, maskRef: import("imask").default.InputMask<import("imask").default.AnyMaskedOptions>, e?: InputEvent | undefined, onChange?: ((changeValue: string) => void) | undefined) => void) | undefined;
     pickerProps: import("../types").PickerProps;

package/node/components/DatePicker/useLogic/useLogic.js

@@ -7,7 +7,6 @@ const usePopover_1 = require("../../usePopover");
 const useViewportType_1 = require("../../useViewportType");
 const constants_1 = require("../constants");
 const useDatePickerOptions_1 = require("../hooks/useDatePickerOptions");
-const useMaskedValue_1 = require("../hooks/useMaskedValue");
 const MinMaxDateContext_1 = require("../MinMaxDateContext");
 const useLogic = ({ label, value, maxDate = MinMaxDateContext_1.DEFAULT_MAX_DATE, minDate = MinMaxDateContext_1.DEFAULT_MIN_DATE, mask = constants_1.DEFAULT_DATE_MASK, onOpen, onClose, onBlur, onChange, forwardedRef, }) => {
     const ref = (0, useForwardedRef_1.useForwardedRef)(forwardedRef);
@@ -15,21 +14,11 @@ const useLogic = ({ label, value, maxDate = MinMaxDateContext_1.DEFAULT_MAX_DATE
     const { isOpen, actions } = (0, usePopover_1.usePopover)();
     const { open, close } = actions;
     const { isMobile } = (0, useViewportType_1.useViewportType)();
-    const { maskedValue } = (0, useMaskedValue_1.useMaskedValue)({
-        currentValue: value,
-        mask,
-        onChangeValue: onChange,
-    });
     const isTitleShow = isMobile && typeof label === 'string';
     const handleOpen = (event) => {
         onOpen?.();
         open(event);
     };
-    const handleClose = () => {
-        onBlur?.();
-        onClose?.();
-        close();
-    };
     const handleDayPick = (date) => {
         if (isMobile) {
             setSelectedDate(date);
@@ -42,7 +31,7 @@ const useLogic = ({ label, value, maxDate = MinMaxDateContext_1.DEFAULT_MAX_DATE
             onChange?.(date);
         }
     };
-    const { onAccept, inputProps: calculatedInputProps, pickerProps, } = (0, useDatePickerOptions_1.useDatePickerOptions)({
+    const { onAccept, inputProps: calculatedInputProps, pickerProps, onMaskedValueBlur, } = (0, useDatePickerOptions_1.useDatePickerOptions)({
         currentValue: value,
         maxDate,
         minDate,
@@ -50,6 +39,22 @@ const useLogic = ({ label, value, maxDate = MinMaxDateContext_1.DEFAULT_MAX_DATE
         onDatePick: handleDayPick,
         onChange: handleChange,
     });
+    /** Blur: неполный ввод -Invalid Date в onChange (при isMobile onChange не шлём), потом внешний onBlur. */
+    const flushMaskedValueAndCallOnBlur = () => {
+        onMaskedValueBlur();
+        onBlur?.();
+    };
+    function handleClose() {
+        flushMaskedValueAndCallOnBlur();
+        onClose?.();
+        close();
+    }
+    const handleInputBlur = () => {
+        if (isOpen) {
+            return;
+        }
+        flushMaskedValueAndCallOnBlur();
+    };
     const handleConfirm = () => {
         onChange?.(selectedDate);
         handleClose();
@@ -61,7 +66,8 @@ const useLogic = ({ label, value, maxDate = MinMaxDateContext_1.DEFAULT_MAX_DATE
         title: isTitleShow ? label : undefined,
     };
     const DatePickerInputProps = {
-        value: isMobile ? maskedValue : calculatedInputProps.value,
+        value: calculatedInputProps.value,
+        onBlur: handleInputBlur,
     };
     const confirmButtonProps = {
         onClick: handleConfirm,

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

@@ -7,12 +7,14 @@ export declare const useLogic: ({ value, minDate, maxDate, mask, onChange, onOpe
         ref: import("react").RefObject<HTMLInputElement | null>;
         value: string;
         onAccept: (_: string, maskRef: IMask.InputMask<IMask.AnyMaskedOptions>) => void;
+        onBlur: () => void;
         onClick: (e: SyntheticEvent) => void;
     };
     endDatePickerInputProps: {
         ref: import("react").RefObject<HTMLInputElement | null>;
         value: string;
         onAccept: (_: string, maskRef: IMask.InputMask<IMask.AnyMaskedOptions>) => void;
+        onBlur: () => void;
         onClick: (e: SyntheticEvent) => void;
     };
     popoverHoveredContextProviderProps: {