@astral/ui 4.42.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/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/package.json

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