@astral/ui 4.51.0 → 4.52.1

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

@@ -5,6 +5,7 @@ const react_1 = require("react");
 const DatePicker_1 = require("../../DatePicker");
 const useForwardedRef_1 = require("../../useForwardedRef");
 const usePopover_1 = require("../../usePopover");
+const date_1 = require("../../utils/date");
 const hooks_1 = require("./hooks");
 const utils_1 = require("./utils");
 const useLogic = ({ value, minDate = DatePicker_1.DEFAULT_MIN_DATE, maxDate = DatePicker_1.DEFAULT_MAX_DATE, mask = DatePicker_1.DEFAULT_DATE_MASK, onChange, onOpen, onClose, onBlur, }, forwardedRef) => {
@@ -45,7 +46,7 @@ const useLogic = ({ value, minDate = DatePicker_1.DEFAULT_MIN_DATE, maxDate = Da
     const handleChangeStartDate = (startDateValue, startMaskString) => {
         const isStartComplete = startDateValue != null &&
             startMaskString != null &&
-            (0, utils_1.isMaskedDateSyntacticallyComplete)(startMaskString, mask);
+            (0, date_1.isMaskedDateSyntacticallyComplete)(startMaskString, mask);
         if (isStartComplete &&
             value?.end &&
             startDateValue &&
@@ -58,7 +59,7 @@ const useLogic = ({ value, minDate = DatePicker_1.DEFAULT_MIN_DATE, maxDate = Da
     const handleChangeEndDate = (endDateValue, endMaskString) => {
         const isEndComplete = endDateValue != null &&
             endMaskString != null &&
-            (0, utils_1.isMaskedDateSyntacticallyComplete)(endMaskString, mask);
+            (0, date_1.isMaskedDateSyntacticallyComplete)(endMaskString, mask);
         if (isEndComplete &&
             value?.start &&
             endDateValue &&
@@ -68,12 +69,12 @@ const useLogic = ({ value, minDate = DatePicker_1.DEFAULT_MIN_DATE, maxDate = Da
         }
         onChange?.({ ...value, end: endDateValue });
     };
-    const { maskedValue: startMaskedValue, onMaskedValueChange: onMaskedStartValueChange, onMaskedDateChange: onMaskedStartDateChange, } = (0, DatePicker_1.useMaskedValue)({
+    const { maskedValue: startMaskedValue, onMaskedValueChange: onMaskedStartValueChange, onMaskedValueBlur: onMaskedStartValueBlur, onMaskedDateChange: onMaskedStartDateChange, } = (0, DatePicker_1.useMaskedValue)({
         currentValue: value?.start,
         mask,
         onChangeValue: handleChangeStartDate,
     });
-    const { maskedValue: endMaskedValue, onMaskedValueChange: onMaskedEndValueChange, onMaskedDateChange: onMaskedEndDateChange, } = (0, DatePicker_1.useMaskedValue)({
+    const { maskedValue: endMaskedValue, onMaskedValueChange: onMaskedEndValueChange, onMaskedValueBlur: onMaskedEndValueBlur, onMaskedDateChange: onMaskedEndDateChange, } = (0, DatePicker_1.useMaskedValue)({
         currentValue: value?.end,
         mask,
         onChangeValue: handleChangeEndDate,
@@ -82,11 +83,32 @@ const useLogic = ({ value, minDate = DatePicker_1.DEFAULT_MIN_DATE, maxDate = Da
         onOpen?.();
         open(event);
     };
+    const flushActiveMaskedValueOnClose = () => {
+        if (activeInput === 'startDate') {
+            onMaskedStartValueBlur();
+        }
+        if (activeInput === 'endDate') {
+            onMaskedEndValueBlur();
+        }
+    };
     const handleClose = () => {
+        flushActiveMaskedValueOnClose();
         onBlur?.();
         onClose?.();
         close();
     };
+    const handleStartInputBlur = () => {
+        if (isOpen) {
+            return;
+        }
+        onMaskedStartValueBlur();
+    };
+    const handleEndInputBlur = () => {
+        if (isOpen) {
+            return;
+        }
+        onMaskedEndValueBlur();
+    };
     const handleClickStartInput = (e) => {
         setActiveInput('startDate');
         startInputRef.current?.focus();
@@ -141,12 +163,14 @@ const useLogic = ({ value, minDate = DatePicker_1.DEFAULT_MIN_DATE, maxDate = Da
             ref: startInputRef,
             value: startMaskedValue,
             onAccept: handleAcceptStart,
+            onBlur: handleStartInputBlur,
             onClick: handleClickStartInput,
         },
         endDatePickerInputProps: {
             ref: endInputRef,
             value: endMaskedValue,
             onAccept: handleAcceptEnd,
+            onBlur: handleEndInputBlur,
             onClick: handleClickEndInput,
         },
         popoverHoveredContextProviderProps: {

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

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

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

@@ -15,4 +15,3 @@ 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/MenuOrganization/OrganizationButton/OrganizationButton.js

@@ -16,7 +16,7 @@ exports.OrganizationButton = (0, react_1.forwardRef)(({ onClick, isOpen, current
     });
     const renderButton = () => ((0, jsx_runtime_1.jsx)(styles_2.StyledButton, { ref: ref, variant: "text", disabled: isDisabled, onClick: onClick, className: constants_1.menuOrganizationClassnames.button, endIcon: (0, jsx_runtime_1.jsx)(styles_2.StyledChevron, { isActive: isOpen, width: 24, height: 24 }), children: renderPreview ? (renderPreview(currentOrganization, {
             className: hidePersonalDataClassname,
-        })) : ((0, jsx_runtime_1.jsxs)(styles_2.Container, { className: hidePersonalDataClassname, children: [(0, jsx_runtime_1.jsx)(OverflowTypography_1.OverflowTypography, { variant: "h6", component: "div", children: name }), (0, jsx_runtime_1.jsxs)(styles_1.OrganizationData, { children: [(0, jsx_runtime_1.jsxs)(styles_2.StyledTypography, { "$isDisabled": isDisabled, variant: "caption", color: "textSecondary", children: ["\u0418\u041D\u041D ", inn] }), kpp && ((0, jsx_runtime_1.jsxs)(styles_2.StyledTypography, { "$isDisabled": isDisabled, variant: "caption", color: "textSecondary", children: ["\u041A\u041F\u041F ", kpp] }))] })] })) }));
+        })) : ((0, jsx_runtime_1.jsxs)(styles_2.Container, { className: hidePersonalDataClassname, children: [(0, jsx_runtime_1.jsx)(OverflowTypography_1.OverflowTypography, { variant: "h6", component: "div", children: name }), (0, jsx_runtime_1.jsxs)(styles_1.OrganizationData, { className: constants_1.menuOrganizationClassnames.organizationData, children: [(0, jsx_runtime_1.jsxs)(styles_2.StyledTypography, { "$isDisabled": isDisabled, variant: "caption", color: "textSecondary", children: ["\u0418\u041D\u041D ", inn] }), kpp && ((0, jsx_runtime_1.jsxs)(styles_2.StyledTypography, { "$isDisabled": isDisabled, variant: "caption", color: "textSecondary", children: ["\u041A\u041F\u041F ", kpp] }))] })] })) }));
     if (isDisabled && disabledReason) {
         return ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { title: disabledReason, withoutContainer: false, placement: "bottom", children: renderButton() }));
     }

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

@@ -5,4 +5,5 @@ export declare const menuOrganizationClassnames: {
     root: string;
     errorPlaceholder: string;
     button: string;
+    organizationData: string;
 };

package/node/components/MenuOrganization/constants.js

@@ -9,4 +9,5 @@ exports.menuOrganizationClassnames = {
     root: (0, createUIKitClassname_1.createUIKitClassname)('menu-organization'),
     errorPlaceholder: (0, createUIKitClassname_1.createUIKitClassname)('menu-organization__error-placeholder'),
     button: (0, createUIKitClassname_1.createUIKitClassname)('menu-organization__button'),
+    organizationData: (0, createUIKitClassname_1.createUIKitClassname)('menu-organization__organization-data'),
 };

package/node/components/Profile/Profile.js

@@ -29,7 +29,7 @@ const Profile = (props) => {
     if (isLoading) {
         return (0, jsx_runtime_1.jsx)(ProfileSkeleton_1.ProfileSkeleton, {});
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ClickAwayListener_1.default, { onClickAway: handleCloseMenu, children: (0, jsx_runtime_1.jsxs)(styles_1.ProfileRoot, { ref: anchorRef, variant: "text", onClick: handleOpenMenu, children: [(0, jsx_runtime_1.jsx)(styles_1.StyledAvatar, { ...avatar }), (0, jsx_runtime_1.jsxs)(styles_1.User, { children: [(0, jsx_runtime_1.jsxs)(styles_1.Credentials, { className: hidePersonalDataClassname, children: [(0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "body1", className: constants_1.profileClassnames.credentials, children: displayName }), (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "caption", color: "textSecondary", className: constants_1.profileClassnames.credentials, children: annotation })] }), (0, jsx_runtime_1.jsx)(styles_1.StyledChevron, { isActive: open })] })] }) }), Menu ? ((0, jsx_runtime_1.jsx)(Menu, { open: open, anchorEl: anchorRef.current, onClose: handleCloseMenu, anchorOrigin: {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ClickAwayListener_1.default, { onClickAway: handleCloseMenu, children: (0, jsx_runtime_1.jsxs)(styles_1.ProfileRoot, { ref: anchorRef, variant: "text", onClick: handleOpenMenu, className: constants_1.profileClassnames.button, children: [(0, jsx_runtime_1.jsx)(styles_1.StyledAvatar, { ...avatar, className: constants_1.profileClassnames.avatar }), (0, jsx_runtime_1.jsxs)(styles_1.User, { className: constants_1.profileClassnames.user, children: [(0, jsx_runtime_1.jsxs)(styles_1.Credentials, { className: hidePersonalDataClassname, children: [(0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "body1", className: constants_1.profileClassnames.credentials, children: displayName }), (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "caption", color: "textSecondary", className: constants_1.profileClassnames.credentials, children: annotation })] }), (0, jsx_runtime_1.jsx)(styles_1.StyledChevron, { isActive: open })] })] }) }), Menu ? ((0, jsx_runtime_1.jsx)(Menu, { open: open, anchorEl: anchorRef.current, onClose: handleCloseMenu, anchorOrigin: {
                     vertical: 'bottom',
                     horizontal: 'right',
                 }, transformOrigin: {

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

@@ -1,3 +1,6 @@
 export declare const profileClassnames: {
     credentials: string;
+    button: string;
+    avatar: string;
+    user: string;
 };

package/node/components/Profile/constants.js

@@ -4,4 +4,7 @@ exports.profileClassnames = void 0;
 const createUIKitClassname_1 = require("../utils/createUIKitClassname");
 exports.profileClassnames = {
     credentials: (0, createUIKitClassname_1.createUIKitClassname)('profile__credentials'),
+    button: (0, createUIKitClassname_1.createUIKitClassname)('profile__button'),
+    avatar: (0, createUIKitClassname_1.createUIKitClassname)('profile__avatar'),
+    user: (0, createUIKitClassname_1.createUIKitClassname)('profile__user'),
 };

package/node/components/utils/date/format/index.d.ts

@@ -1,3 +1,4 @@
 export * from './formatDate';
+export * from './isMaskedDateSyntacticallyComplete';
 export * from './maskDate';
 export * from './parseDate';

package/node/components/utils/date/format/index.js

@@ -15,5 +15,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./formatDate"), exports);
+__exportStar(require("./isMaskedDateSyntacticallyComplete"), exports);
 __exportStar(require("./maskDate"), exports);
 __exportStar(require("./parseDate"), exports);

package/{components/DateRangePicker/useLogic/utils → node/components/utils/date/format}/isMaskedDateSyntacticallyComplete/isMaskedDateSyntacticallyComplete.d.ts

@@ -1,4 +1,4 @@
-import { type DateMask } from '../../../../utils/date/format';
+import { type DateMask } from '../maskDate';
 /**
  * Все ли части строки по маске заполнены цифрами полностью (без промежуточных состояний IMask).
  */

package/node/components/utils/date/format/parseDate/parseDate.d.ts

@@ -1,5 +1,6 @@
 import { type DateMask } from '../maskDate';
 /**
  * утилита конвертации строковой даты созданной по маске обратно в Date
+ * Строгий разбор UTC через `dayjs` + `customParseFormat`; при невалидной строке — Invalid Date
  */
 export declare const parseDate: (date: string, mask: DateMask, separator?: string) => Date;

package/node/components/utils/date/format/parseDate/parseDate.js

@@ -1,25 +1,57 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.parseDate = void 0;
-const buildIsoDate_1 = require("../../buildIsoDate");
+const dayjs_1 = __importDefault(require("dayjs"));
+const customParseFormat_1 = __importDefault(require("dayjs/plugin/customParseFormat"));
+const utc_1 = __importDefault(require("dayjs/plugin/utc"));
 const maskDate_1 = require("../maskDate");
-const orderMap = {
-    [maskDate_1.DateMaskElements.Year]: 'year',
-    [maskDate_1.DateMaskElements.Month]: 'month',
-    [maskDate_1.DateMaskElements.Day]: 'day',
-    [maskDate_1.DateMaskElements.Hour]: 'hour',
-    [maskDate_1.DateMaskElements.Minute]: 'minute',
-    [maskDate_1.DateMaskElements.Second]: 'second',
+dayjs_1.default.extend(customParseFormat_1.default);
+dayjs_1.default.extend(utc_1.default);
+/**
+ * Токен маски UI → литерал формата `dayjs` (strict UTC).
+ * В маске час — `hh`, в дате используются сутки 0–23 как в `formatDate` (UTC), поэтому `HH`.
+ */
+const maskElementToDayjs = {
+    [maskDate_1.DateMaskElements.Day]: 'DD',
+    [maskDate_1.DateMaskElements.Month]: 'MM',
+    [maskDate_1.DateMaskElements.Year]: 'YYYY',
+    [maskDate_1.DateMaskElements.Hour]: 'HH',
+    [maskDate_1.DateMaskElements.Minute]: 'mm',
+    [maskDate_1.DateMaskElements.Second]: 'ss',
+};
+const buildDayjsFormat = (mask, separator) => {
+    const parts = mask.split(separator);
+    const tokens = [];
+    for (const part of parts) {
+        const t = maskElementToDayjs[part];
+        if (t == null) {
+            return null;
+        }
+        tokens.push(t);
+    }
+    return tokens.join(separator);
 };
 /**
  * утилита конвертации строковой даты созданной по маске обратно в Date
+ * Строгий разбор UTC через `dayjs` + `customParseFormat`; при невалидной строке — Invalid Date
  */
 const parseDate = (date, mask, separator = '.') => {
     const dateArr = date.split(separator);
-    const options = { year: 1900 };
-    mask.split('.').forEach((element, index) => {
-        options[orderMap[element]] = parseInt(dateArr[index]);
-    });
-    return (0, buildIsoDate_1.buildIsoDate)(options);
+    const maskSplit = mask.split(separator);
+    if (dateArr.length !== maskSplit.length) {
+        return new Date(Number.NaN);
+    }
+    const format = buildDayjsFormat(mask, separator);
+    if (format == null) {
+        return new Date(Number.NaN);
+    }
+    const parsed = dayjs_1.default.utc(date, format, true);
+    if (!parsed.isValid()) {
+        return new Date(Number.NaN);
+    }
+    return parsed.toDate();
 };
 exports.parseDate = parseDate;

package/package.json

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