@astral/ui 1.47.0 → 1.47.2

package/DatePicker/DatePicker.d.ts

@@ -1,4 +1,4 @@
-import { FocusEvent, SyntheticEvent } from 'react';
+import { SyntheticEvent } from 'react';
 import { TextFieldProps } from '../TextField';
 import { DateMask } from '../utils/date';
 import { Reason } from '../types';
@@ -14,7 +14,7 @@ export type DatePickerProps = MondayFirst & Partial<MinMaxDate> & {
      * @description Обработчик изменения состояния. Передает только Date object, если дата невалидна, то будет Invalid date
      * */
     onChange?: (date?: Date) => void;
-    onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
+    onBlur?: () => void;
     onOpen?: () => void;
     onClose?: (event?: SyntheticEvent<Element, Event> | Event, reason?: Reason) => void;
     inputProps?: Omit<TextFieldProps, 'ref' | 'value' | 'onChange'>;
@@ -34,7 +34,7 @@ export declare const DatePicker: import("react").ForwardRefExoticComponent<Monda
      * @description Обработчик изменения состояния. Передает только Date object, если дата невалидна, то будет Invalid date
      * */
     onChange?: ((date?: Date) => void) | undefined;
-    onBlur?: ((e: FocusEvent<HTMLInputElement>) => void) | undefined;
+    onBlur?: (() => void) | undefined;
     onOpen?: (() => void) | undefined;
     onClose?: ((event?: SyntheticEvent<Element, Event> | Event, reason?: Reason) => void) | undefined;
     inputProps?: Omit<TextFieldProps, "ref" | "value" | "onChange"> | undefined;

package/DatePicker/DatePicker.js

@@ -24,10 +24,15 @@ const hooks_2 = require("./hooks");
 const DatePickerInner = (0, react_1.forwardRef)(({ onChange, onOpen, onBlur, onClose, mask = 'DD.MM.YYYY', isMondayFirst, inputProps, disabled, value, }, forwardedRef) => {
     const { maxDate, minDate } = (0, react_1.useContext)(MinMaxDateContext_1.MinMaxDateContext);
     const ref = (0, hooks_1.useForwardedRef)(forwardedRef);
-    const [isActive, openPopper, closePopper] = (0, hooks_1.useToggle)({
+    const [isOpenPopper, openPopper, closePopper] = (0, hooks_1.useToggle)({
         onActive: onOpen,
         onInactive: onClose,
     });
+    const handleClosePopper = () => {
+        // для данного компонента onBlur должен срабатывать после закрытия popover, а не во время выбора даты
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+        closePopper(undefined, 'selectOption');
+    };
     const { maskedValue, onChangeMaskedValue, onChangeMaskedDate } = (0, hooks_2.useMaskedValue)({
         currentValue: value,
         mask,
@@ -37,16 +42,12 @@ const DatePickerInner = (0, react_1.forwardRef)(({ onChange, onOpen, onBlur, onC
     const selectedBaseDate = (0, hooks_2.useSelectedBaseDate)(value);
     const handleDayPick = (date) => {
         onChangeMaskedDate(date);
-        closePopper(undefined, 'selectOption');
-    };
-    const handleBlurMaskInput = (e) => {
-        onChangeMaskedValue(e.target.value);
-        onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+        handleClosePopper();
     };
     const handleChangeMaskInput = (e) => {
         onChangeMaskedValue(e.target.value);
     };
-    return ((0, jsx_runtime_1.jsxs)(DatePickerClickAwayListener_1.DatePickerClickAwayListener, Object.assign({ onClickAway: closePopper }, { children: [(0, jsx_runtime_1.jsx)(DatePickerInput_1.DatePickerInput, Object.assign({}, inputProps, { mask: mask, onNativeChange: handleChangeMaskInput, onBlur: handleBlurMaskInput, disabled: disabled, value: maskedValue, ref: ref, onFocus: openPopper })), (0, jsx_runtime_1.jsx)(DatePickerPopper_1.DatePickerPopper, Object.assign({ open: isActive, onClose: closePopper, anchorEl: ref === null || ref === void 0 ? void 0 : ref.current }, { children: (0, jsx_runtime_1.jsx)(YearMonthDayPicker_1.YearMonthDayPicker, { isMondayFirst: isMondayFirst, selectedDate: selectedBaseDate, onChange: handleDayPick, date: selectedBaseDate || baseDate }) }))] })));
+    return ((0, jsx_runtime_1.jsxs)(DatePickerClickAwayListener_1.DatePickerClickAwayListener, Object.assign({ onClickAway: handleClosePopper }, { children: [(0, jsx_runtime_1.jsx)(DatePickerInput_1.DatePickerInput, Object.assign({}, inputProps, { mask: mask, onNativeChange: handleChangeMaskInput, disabled: disabled, value: maskedValue, ref: ref, onFocus: openPopper })), (0, jsx_runtime_1.jsx)(DatePickerPopper_1.DatePickerPopper, Object.assign({ open: isOpenPopper, onClose: handleClosePopper, anchorEl: ref === null || ref === void 0 ? void 0 : ref.current }, { children: (0, jsx_runtime_1.jsx)(YearMonthDayPicker_1.YearMonthDayPicker, { isMondayFirst: isMondayFirst, selectedDate: selectedBaseDate, onChange: handleDayPick, date: selectedBaseDate || baseDate }) }))] })));
 });
 exports.DatePicker = (0, react_1.forwardRef)((_a, forwardedRef) => {
     var { minDate, maxDate } = _a, props = __rest(_a, ["minDate", "maxDate"]);

package/DatePicker/DatePicker.test.js

@@ -74,4 +74,19 @@ describe('DatePicker', () => {
         const selected = tests_1.screen.getAllByText('9')[0].getAttribute('aria-selected');
         expect(selected).toBeTruthy();
     }));
+    it('Props:onBlur: вызывается при закрытии popover', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onBlur = vitest_1.vi.fn();
+        (0, tests_1.renderWithTheme)((0, jsx_runtime_1.jsx)(DatePicker_1.DatePicker, { onBlur: onBlur }));
+        tests_1.fireEvent.focus(tests_1.screen.getByRole('textbox'));
+        // клик вне инпута с поповером
+        yield tests_1.userEvents.click(document.body);
+        expect(onBlur).toBeCalled();
+    }));
+    it('Props:onBlur: не вызывается при потере фокуса на инпуте', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onBlur = vitest_1.vi.fn();
+        (0, tests_1.renderWithTheme)((0, jsx_runtime_1.jsx)(DatePicker_1.DatePicker, { onBlur: onBlur }));
+        tests_1.fireEvent.focus(tests_1.screen.getByRole('textbox'));
+        yield tests_1.userEvents.tab();
+        expect(onBlur).not.toBeCalled();
+    }));
 });

package/DatePicker/hooks/useMaskedValue/useMaskedValue.js

@@ -10,7 +10,13 @@ const useMaskedValue = ({ currentValue, mask, onChangeValue, }) => {
     const [maskedValue, setMaskedValue] = (0, react_1.useState)(() => currentValue ? (0, date_1.formatDate)(currentValue, mask) : '');
     const handleChangeMaskedValue = (value) => {
         setMaskedValue(value);
-        onChangeValue === null || onChangeValue === void 0 ? void 0 : onChangeValue((0, date_1.parseDate)(value, mask));
+        // parseDate вернет Invalid Date при undefined. А нам надо undefined
+        if (!value) {
+            onChangeValue === null || onChangeValue === void 0 ? void 0 : onChangeValue(undefined);
+        }
+        else {
+            onChangeValue === null || onChangeValue === void 0 ? void 0 : onChangeValue((0, date_1.parseDate)(value, mask));
+        }
     };
     const handleChangeMaskedDate = (date) => {
         setMaskedValue((0, date_1.formatDate)(date, mask));

package/esm/DatePicker/DatePicker.d.ts

@@ -1,4 +1,4 @@
-import { FocusEvent, SyntheticEvent } from 'react';
+import { SyntheticEvent } from 'react';
 import { TextFieldProps } from '../TextField';
 import { DateMask } from '../utils/date';
 import { Reason } from '../types';
@@ -14,7 +14,7 @@ export type DatePickerProps = MondayFirst & Partial<MinMaxDate> & {
      * @description Обработчик изменения состояния. Передает только Date object, если дата невалидна, то будет Invalid date
      * */
     onChange?: (date?: Date) => void;
-    onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
+    onBlur?: () => void;
     onOpen?: () => void;
     onClose?: (event?: SyntheticEvent<Element, Event> | Event, reason?: Reason) => void;
     inputProps?: Omit<TextFieldProps, 'ref' | 'value' | 'onChange'>;
@@ -34,7 +34,7 @@ export declare const DatePicker: import("react").ForwardRefExoticComponent<Monda
      * @description Обработчик изменения состояния. Передает только Date object, если дата невалидна, то будет Invalid date
      * */
     onChange?: ((date?: Date) => void) | undefined;
-    onBlur?: ((e: FocusEvent<HTMLInputElement>) => void) | undefined;
+    onBlur?: (() => void) | undefined;
     onOpen?: (() => void) | undefined;
     onClose?: ((event?: SyntheticEvent<Element, Event> | Event, reason?: Reason) => void) | undefined;
     inputProps?: Omit<TextFieldProps, "ref" | "value" | "onChange"> | undefined;

package/esm/DatePicker/DatePicker.js

@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useContext, } from 'react';
+import { forwardRef, useContext } from 'react';
 import { useForwardedRef, useToggle } from '../hooks';
 import { DatePickerClickAwayListener } from './DatePickerClickAwayListener';
 import { DatePickerInput } from './DatePickerInput';
@@ -21,10 +21,15 @@ import { useBaseDateInRange, useMaskedValue, useSelectedBaseDate, } from './hook
 const DatePickerInner = forwardRef(({ onChange, onOpen, onBlur, onClose, mask = 'DD.MM.YYYY', isMondayFirst, inputProps, disabled, value, }, forwardedRef) => {
     const { maxDate, minDate } = useContext(MinMaxDateContext);
     const ref = useForwardedRef(forwardedRef);
-    const [isActive, openPopper, closePopper] = useToggle({
+    const [isOpenPopper, openPopper, closePopper] = useToggle({
         onActive: onOpen,
         onInactive: onClose,
     });
+    const handleClosePopper = () => {
+        // для данного компонента onBlur должен срабатывать после закрытия popover, а не во время выбора даты
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+        closePopper(undefined, 'selectOption');
+    };
     const { maskedValue, onChangeMaskedValue, onChangeMaskedDate } = useMaskedValue({
         currentValue: value,
         mask,
@@ -34,16 +39,12 @@ const DatePickerInner = forwardRef(({ onChange, onOpen, onBlur, onClose, mask =
     const selectedBaseDate = useSelectedBaseDate(value);
     const handleDayPick = (date) => {
         onChangeMaskedDate(date);
-        closePopper(undefined, 'selectOption');
-    };
-    const handleBlurMaskInput = (e) => {
-        onChangeMaskedValue(e.target.value);
-        onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+        handleClosePopper();
     };
     const handleChangeMaskInput = (e) => {
         onChangeMaskedValue(e.target.value);
     };
-    return (_jsxs(DatePickerClickAwayListener, Object.assign({ onClickAway: closePopper }, { children: [_jsx(DatePickerInput, Object.assign({}, inputProps, { mask: mask, onNativeChange: handleChangeMaskInput, onBlur: handleBlurMaskInput, disabled: disabled, value: maskedValue, ref: ref, onFocus: openPopper })), _jsx(DatePickerPopper, Object.assign({ open: isActive, onClose: closePopper, anchorEl: ref === null || ref === void 0 ? void 0 : ref.current }, { children: _jsx(YearMonthDayPicker, { isMondayFirst: isMondayFirst, selectedDate: selectedBaseDate, onChange: handleDayPick, date: selectedBaseDate || baseDate }) }))] })));
+    return (_jsxs(DatePickerClickAwayListener, Object.assign({ onClickAway: handleClosePopper }, { children: [_jsx(DatePickerInput, Object.assign({}, inputProps, { mask: mask, onNativeChange: handleChangeMaskInput, disabled: disabled, value: maskedValue, ref: ref, onFocus: openPopper })), _jsx(DatePickerPopper, Object.assign({ open: isOpenPopper, onClose: handleClosePopper, anchorEl: ref === null || ref === void 0 ? void 0 : ref.current }, { children: _jsx(YearMonthDayPicker, { isMondayFirst: isMondayFirst, selectedDate: selectedBaseDate, onChange: handleDayPick, date: selectedBaseDate || baseDate }) }))] })));
 });
 export const DatePicker = forwardRef((_a, forwardedRef) => {
     var { minDate, maxDate } = _a, props = __rest(_a, ["minDate", "maxDate"]);

package/esm/DatePicker/DatePicker.test.js

@@ -72,4 +72,19 @@ describe('DatePicker', () => {
         const selected = screen.getAllByText('9')[0].getAttribute('aria-selected');
         expect(selected).toBeTruthy();
     }));
+    it('Props:onBlur: вызывается при закрытии popover', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onBlur = vi.fn();
+        renderWithTheme(_jsx(DatePicker, { onBlur: onBlur }));
+        fireEvent.focus(screen.getByRole('textbox'));
+        // клик вне инпута с поповером
+        yield userEvents.click(document.body);
+        expect(onBlur).toBeCalled();
+    }));
+    it('Props:onBlur: не вызывается при потере фокуса на инпуте', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onBlur = vi.fn();
+        renderWithTheme(_jsx(DatePicker, { onBlur: onBlur }));
+        fireEvent.focus(screen.getByRole('textbox'));
+        yield userEvents.tab();
+        expect(onBlur).not.toBeCalled();
+    }));
 });

package/esm/DatePicker/hooks/useMaskedValue/useMaskedValue.js

@@ -7,7 +7,13 @@ export const useMaskedValue = ({ currentValue, mask, onChangeValue, }) => {
     const [maskedValue, setMaskedValue] = useState(() => currentValue ? formatDate(currentValue, mask) : '');
     const handleChangeMaskedValue = (value) => {
         setMaskedValue(value);
-        onChangeValue === null || onChangeValue === void 0 ? void 0 : onChangeValue(parseDate(value, mask));
+        // parseDate вернет Invalid Date при undefined. А нам надо undefined
+        if (!value) {
+            onChangeValue === null || onChangeValue === void 0 ? void 0 : onChangeValue(undefined);
+        }
+        else {
+            onChangeValue === null || onChangeValue === void 0 ? void 0 : onChangeValue(parseDate(value, mask));
+        }
     };
     const handleChangeMaskedDate = (date) => {
         setMaskedValue(formatDate(date, mask));

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@astral/ui",
-  "version": "1.47.0",
+  "version": "1.47.2",
   "browser": "./esm/index.js",
   "main": "./index.js",
   "dependencies": {
-    "@astral/icons": "^1.47.0",
+    "@astral/icons": "^1.47.2",
     "@emotion/cache": "11.7.1",
     "@emotion/react": "11.9.0",
     "@emotion/server": "11.4.0",