@astral/ui 1.45.0 → 1.47.0

package/DatePicker/DateCalendar/DateCalendarBtn/DateCalendarBtn.js

@@ -18,5 +18,5 @@ const Tooltip_1 = require("../../../Tooltip");
 const styles_1 = require("./styles");
 exports.DateCalendarBtn = (0, react_1.forwardRef)((_a, ref) => {
     var { title = '', disabled, selected } = _a, props = __rest(_a, ["title", "disabled", "selected"]);
-    return disabled ? ((0, jsx_runtime_1.jsx)(styles_1.DateCalendarBtnWrapper, Object.assign({ ref: ref, variant: selected ? 'contained' : 'text', disabled: true }, props))) : ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, Object.assign({ title: title, disableInteractive: true }, { children: (0, jsx_runtime_1.jsx)(styles_1.DateCalendarBtnWrapper, Object.assign({ ref: ref, variant: selected ? 'contained' : 'text' }, props)) })));
+    return disabled ? ((0, jsx_runtime_1.jsx)(styles_1.DateCalendarBtnWrapper, Object.assign({ ref: ref, variant: selected ? 'contained' : 'text', "aria-selected": selected, disabled: true }, props))) : ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, Object.assign({ title: title, disableInteractive: true }, { children: (0, jsx_runtime_1.jsx)(styles_1.DateCalendarBtnWrapper, Object.assign({ ref: ref, variant: selected ? 'contained' : 'text', "aria-selected": selected }, props)) })));
 });

package/DatePicker/DatePicker.d.ts

@@ -5,22 +5,42 @@ import { Reason } from '../types';
 import { MinMaxDate } from './types';
 import { MondayFirst } from './DayPicker';
 export type DatePickerProps = MondayFirst & Partial<MinMaxDate> & {
+    /**
+     * @description Маска для инпута даты
+     * @default 'DD.MM.YYYY'
+     * */
     mask?: DateMask;
-    onChange?: (date: Date | string | null | undefined) => void;
+    /**
+     * @description Обработчик изменения состояния. Передает только Date object, если дата невалидна, то будет Invalid date
+     * */
+    onChange?: (date?: Date) => void;
     onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
     onOpen?: () => void;
     onClose?: (event?: SyntheticEvent<Element, Event> | Event, reason?: Reason) => void;
     inputProps?: Omit<TextFieldProps, 'ref' | 'value' | 'onChange'>;
     disabled?: boolean;
+    /**
+     * @description Принимает только Date object, включая невалидную дату Invalid date
+     * */
     value?: Date;
 };
 export declare const DatePicker: import("react").ForwardRefExoticComponent<MondayFirst & Partial<MinMaxDate> & {
+    /**
+     * @description Маска для инпута даты
+     * @default 'DD.MM.YYYY'
+     * */
     mask?: string | undefined;
-    onChange?: ((date: Date | string | null | undefined) => void) | undefined;
+    /**
+     * @description Обработчик изменения состояния. Передает только Date object, если дата невалидна, то будет Invalid date
+     * */
+    onChange?: ((date?: Date) => void) | undefined;
     onBlur?: ((e: FocusEvent<HTMLInputElement>) => void) | undefined;
     onOpen?: (() => void) | undefined;
     onClose?: ((event?: SyntheticEvent<Element, Event> | Event, reason?: Reason) => void) | undefined;
     inputProps?: Omit<TextFieldProps, "ref" | "value" | "onChange"> | undefined;
     disabled?: boolean | undefined;
+    /**
+     * @description Принимает только Date object, включая невалидную дату Invalid date
+     * */
     value?: Date | undefined;
 } & import("react").RefAttributes<HTMLInputElement>>;

package/DatePicker/DatePicker.js

@@ -15,53 +15,38 @@ exports.DatePicker = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const hooks_1 = require("../hooks");
-const date_1 = require("../utils/date");
 const DatePickerClickAwayListener_1 = require("./DatePickerClickAwayListener");
 const DatePickerInput_1 = require("./DatePickerInput");
 const DatePickerPopper_1 = require("./DatePickerPopper");
 const MinMaxDateContext_1 = require("./MinMaxDateContext");
 const YearMonthDayPicker_1 = require("./YearMonthDayPicker");
-const useBaseDateInRange_1 = require("./hooks/useBaseDateInRange");
-const useSelectedBaseDate_1 = require("./hooks/useSelectedBaseDate");
-const DatePickerInner = (0, react_1.forwardRef)(({ onChange, onOpen, onBlur, onClose, mask = 'DD.MM.YYYY', isMondayFirst, inputProps, disabled, value: parentValue, }, forwardedRef) => {
+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)({
         onActive: onOpen,
         onInactive: onClose,
     });
-    const [selectedDate, setSelectedDate] = (0, react_1.useState)(parentValue);
-    const [maskedDate, setMaskedDate] = (0, react_1.useState)('');
-    const baseDate = (0, useBaseDateInRange_1.useBaseDateInRange)({ minDate, maxDate });
-    const selectedBaseDate = (0, useSelectedBaseDate_1.useSelectedBaseDate)(selectedDate);
-    const checkValue = (0, react_1.useCallback)((value) => {
-        const isString = typeof value === 'string';
-        setMaskedDate(isString ? value : (0, date_1.formatDate)(value, mask));
-        const date = isString ? (0, date_1.parseDate)(value, mask) : value;
-        if (value === '' || !(0, date_1.isDate)(date)) {
-            setSelectedDate(null);
-        }
-        else if (!(0, date_1.areDatesSame)(date, selectedDate)) {
-            setSelectedDate(date);
-        }
-    }, [mask, selectedDate]);
+    const { maskedValue, onChangeMaskedValue, onChangeMaskedDate } = (0, hooks_2.useMaskedValue)({
+        currentValue: value,
+        mask,
+        onChangeValue: onChange,
+    });
+    const baseDate = (0, hooks_2.useBaseDateInRange)({ minDate, maxDate });
+    const selectedBaseDate = (0, hooks_2.useSelectedBaseDate)(value);
     const handleDayPick = (date) => {
-        setMaskedDate((0, date_1.formatDate)(date, mask));
-        setSelectedDate(date);
+        onChangeMaskedDate(date);
         closePopper(undefined, 'selectOption');
     };
-    (0, react_1.useEffect)(() => {
-        onChange === null || onChange === void 0 ? void 0 : onChange(selectedDate || maskedDate);
-    }, [selectedDate, maskedDate]);
-    (0, react_1.useEffect)(() => {
-        checkValue(parentValue || '');
-    }, [parentValue]);
-    const blurHandler = (e) => {
-        checkValue(e.target.value);
+    const handleBlurMaskInput = (e) => {
+        onChangeMaskedValue(e.target.value);
         onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
     };
-    const handleNativeChange = (e) => checkValue(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: handleNativeChange, onBlur: blurHandler, disabled: disabled, value: maskedDate, 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 }) }))] })));
+    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 }) }))] })));
 });
 exports.DatePicker = (0, react_1.forwardRef)((_a, forwardedRef) => {
     var { minDate, maxDate } = _a, props = __rest(_a, ["minDate", "maxDate"]);

package/DatePicker/DatePicker.test.d.ts

@@ -0,0 +1 @@
+export {};

package/DatePicker/DatePicker.test.js

@@ -0,0 +1,77 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const tests_1 = require("@astral/tests");
+const vitest_1 = require("vitest");
+const react_1 = require("react");
+const DatePicker_1 = require("./DatePicker");
+// Протестировать любые кейсы, связанные с MaskFiled невозможно из-за того, что MaskField использует методы, не эмулируемые в rtl
+describe('DatePicker', () => {
+    beforeAll(() => {
+        vitest_1.vi.useFakeTimers({ toFake: ['Date'] });
+        vitest_1.vi.setSystemTime(new Date('2022-02-10'));
+    });
+    afterAll(() => {
+        vitest_1.vi.useRealTimers();
+    });
+    it('Props:onChange: при выборе даты в пикере в onChange передается объект Date', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onChange = vitest_1.vi.fn();
+        (0, tests_1.renderWithTheme)((0, jsx_runtime_1.jsx)(DatePicker_1.DatePicker, { onChange: onChange }));
+        tests_1.fireEvent.focus(tests_1.screen.getByRole('textbox'));
+        const dateBtn = tests_1.screen.getAllByText('10')[0];
+        yield tests_1.userEvents.click(dateBtn);
+        expect(onChange.mock.calls[0][0] instanceof Date).toBeTruthy();
+        expect(onChange.mock.calls[0][0].toISOString()).toBe('2022-02-10T00:00:00.000Z');
+    }));
+    it('Props:minDate: в пикере нельзя выбрать дату меньше minDate', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onChange = vitest_1.vi.fn();
+        (0, tests_1.renderWithTheme)((0, jsx_runtime_1.jsx)(DatePicker_1.DatePicker, { onChange: onChange, minDate: new Date('2022-02-09') }));
+        tests_1.fireEvent.focus(tests_1.screen.getByRole('textbox'));
+        const btn = tests_1.screen.getAllByText('8')[0];
+        expect(btn).toBeDisabled();
+    }));
+    it('Props:minDate: в пикере можно выбрать дату равной minDate', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, tests_1.renderWithTheme)((0, jsx_runtime_1.jsx)(DatePicker_1.DatePicker, { minDate: new Date('2022-02-09') }));
+        tests_1.fireEvent.focus(tests_1.screen.getByRole('textbox'));
+        const btn = tests_1.screen.getAllByText('9')[0];
+        expect(btn).not.toBeDisabled();
+    }));
+    it('Props:maxDate: в пикере нельзя выбрать дату больше maxDate', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, tests_1.renderWithTheme)((0, jsx_runtime_1.jsx)(DatePicker_1.DatePicker, { maxDate: new Date('2022-02-09') }));
+        tests_1.fireEvent.focus(tests_1.screen.getByRole('textbox'));
+        const btn = tests_1.screen.getAllByText('10')[0];
+        expect(btn).toBeDisabled();
+    }));
+    it('Props:maxDate: в пикере можно выбрать дату равной maxDate', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, tests_1.renderWithTheme)((0, jsx_runtime_1.jsx)(DatePicker_1.DatePicker, { maxDate: new Date('2022-02-09') }));
+        tests_1.fireEvent.focus(tests_1.screen.getByRole('textbox'));
+        const btn = tests_1.screen.getAllByText('9')[0];
+        expect(btn).not.toBeDisabled();
+    }));
+    it('Props:value: при изменении меняется выбранная дата в календаре', () => __awaiter(void 0, void 0, void 0, function* () {
+        const callbacks = {
+            setValue: () => undefined,
+        };
+        const TestComponent = () => {
+            const [value, setValue] = (0, react_1.useState)();
+            callbacks.setValue = setValue;
+            return (0, jsx_runtime_1.jsx)(DatePicker_1.DatePicker, { value: value, onChange: setValue });
+        };
+        (0, tests_1.renderWithTheme)((0, jsx_runtime_1.jsx)(TestComponent, {}));
+        yield (0, tests_1.act)(() => {
+            callbacks.setValue(new Date('2022-03-09'));
+        });
+        tests_1.fireEvent.focus(tests_1.screen.getByRole('textbox'));
+        const selected = tests_1.screen.getAllByText('9')[0].getAttribute('aria-selected');
+        expect(selected).toBeTruthy();
+    }));
+});

package/DatePicker/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export * from './useMaskedValue';
+export * from './useSelectedBaseDate';
+export * from './useBaseDateInRange';

package/DatePicker/hooks/index.js

@@ -0,0 +1,19 @@
+"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("./useMaskedValue"), exports);
+__exportStar(require("./useSelectedBaseDate"), exports);
+__exportStar(require("./useBaseDateInRange"), exports);

package/DatePicker/hooks/useMaskedValue/index.d.ts

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

package/DatePicker/hooks/useMaskedValue/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("./useMaskedValue"), exports);

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

@@ -0,0 +1,27 @@
+type Params = {
+    currentValue?: Date;
+    mask: string;
+    /**
+     * @description Изменение value для DatePicker
+     * */
+    onChangeValue?: (date?: Date) => void;
+};
+type Returned = {
+    /**
+     * @description Value для MaskField
+     * */
+    maskedValue: string;
+    /**
+     * @description Изменение maskedValue по Date
+     * */
+    onChangeMaskedDate: (date: Date) => void;
+    /**
+     * @description Изменение maskedValue
+     * */
+    onChangeMaskedValue: (value: string) => void;
+};
+/**
+ * @description Хук для управления значением для MaskField
+ */
+export declare const useMaskedValue: ({ currentValue, mask, onChangeValue, }: Params) => Returned;
+export {};

package/DatePicker/hooks/useMaskedValue/useMaskedValue.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMaskedValue = void 0;
+const react_1 = require("react");
+const date_1 = require("../../../utils/date");
+/**
+ * @description Хук для управления значением для MaskField
+ */
+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));
+    };
+    const handleChangeMaskedDate = (date) => {
+        setMaskedValue((0, date_1.formatDate)(date, mask));
+        onChangeValue === null || onChangeValue === void 0 ? void 0 : onChangeValue(date);
+    };
+    // здесь происходит реакция на изменение value из вне (управляемый компонент)
+    (0, react_1.useEffect)(() => {
+        // если новое значение пустое, то сбрасываем значение MaskField
+        if (!currentValue) {
+            setMaskedValue('');
+            return;
+        }
+        // здесь обрабатывается сценарий, когда в инпут вводится невалидная дата и при этом currentValue становится Invalid Date
+        // в таком случае сравнить даты напрямую не получится
+        if (!(0, date_1.isDate)(currentValue) && maskedValue) {
+            return;
+        }
+        // проверяем равны ли даты
+        const isEqualValueAndMaskedDate = currentValue.getTime() === (0, date_1.parseDate)(maskedValue, mask).getTime();
+        // если даты не равны, то значит изменился currentValue из вне и надо синхронизировать maskedValue
+        if (!isEqualValueAndMaskedDate) {
+            setMaskedValue((0, date_1.formatDate)(currentValue, mask));
+        }
+    }, [currentValue]);
+    return {
+        maskedValue,
+        onChangeMaskedValue: handleChangeMaskedValue,
+        onChangeMaskedDate: handleChangeMaskedDate,
+    };
+};
+exports.useMaskedValue = useMaskedValue;

package/DatePicker/hooks/useSelectedBaseDate/useSelectedBaseDate.d.ts

@@ -1 +1 @@
-export declare const useSelectedBaseDate: (selectedDate?: Date | null) => Date | null | undefined;
+export declare const useSelectedBaseDate: (selectedDate?: Date) => Date | undefined;

package/DatePicker/hooks/useSelectedBaseDate/useSelectedBaseDate.js

@@ -8,6 +8,10 @@ const useSelectedBaseDate = (selectedDate) => {
     const { minDate, maxDate } = (0, react_1.useContext)(MinMaxDateContext_1.MinMaxDateContext);
     const [baseDate, setBaseDate] = (0, react_1.useState)(selectedDate);
     (0, react_1.useEffect)(() => {
+        if (!(0, date_1.isDate)(selectedDate)) {
+            setBaseDate(undefined);
+            return;
+        }
         if ((0, date_1.areDatesSame)(baseDate, selectedDate)) {
             return;
         }
@@ -18,7 +22,7 @@ const useSelectedBaseDate = (selectedDate) => {
                 maxDate,
                 deep: date_1.DateCompareDeep.day,
             })) {
-            setBaseDate(null);
+            setBaseDate(undefined);
         }
         else {
             setBaseDate(selectedDate);

package/DropdownButton/DropdownButton.test.d.ts

@@ -0,0 +1 @@
+export {};

package/DropdownButton/DropdownButton.test.js

@@ -0,0 +1,37 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const tests_1 = require("@astral/tests");
+const vitest_1 = require("vitest");
+const MenuItem_1 = require("../MenuItem");
+const DropdownButton_1 = require("./DropdownButton");
+describe('DropdownButton', () => {
+    it('Props:disabled: нельзя нажать кнопку', () => {
+        (0, tests_1.renderWithTheme)((0, jsx_runtime_1.jsx)(DropdownButton_1.DropdownButton, Object.assign({ disabled: true, name: "btn" }, { children: (0, jsx_runtime_1.jsx)(MenuItem_1.MenuItem, { children: "Item" }) })));
+        const button = tests_1.screen.getByRole('button', { name: 'btn' });
+        expect(button).toBeDisabled();
+    });
+    it('При клике на option закрывается popover', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, tests_1.renderWithTheme)((0, jsx_runtime_1.jsx)(DropdownButton_1.DropdownButton, Object.assign({ name: "btn" }, { children: (0, jsx_runtime_1.jsx)(MenuItem_1.MenuItem, { children: "Item" }) })));
+        yield tests_1.userEvents.click(tests_1.screen.getByRole('button'));
+        yield tests_1.userEvents.click(tests_1.screen.getByText('Item'));
+        const menuItem = tests_1.screen.queryByRole('menuitem');
+        expect(menuItem).not.toBeInTheDocument();
+    }));
+    it('При клике на option вызывается onClick', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onClick = vitest_1.vi.fn();
+        (0, tests_1.renderWithTheme)((0, jsx_runtime_1.jsx)(DropdownButton_1.DropdownButton, Object.assign({ name: "btn" }, { children: (0, jsx_runtime_1.jsx)(MenuItem_1.MenuItem, Object.assign({ onClick: onClick }, { children: "Item" })) })));
+        yield tests_1.userEvents.click(tests_1.screen.getByRole('button'));
+        yield tests_1.userEvents.click(tests_1.screen.getByRole('menuitem'));
+        expect(onClick).toBeCalled();
+    }));
+});

package/esm/DatePicker/DateCalendar/DateCalendarBtn/DateCalendarBtn.js

@@ -15,5 +15,5 @@ import { Tooltip } from '../../../Tooltip';
 import { DateCalendarBtnWrapper } from './styles';
 export const DateCalendarBtn = forwardRef((_a, ref) => {
     var { title = '', disabled, selected } = _a, props = __rest(_a, ["title", "disabled", "selected"]);
-    return disabled ? (_jsx(DateCalendarBtnWrapper, Object.assign({ ref: ref, variant: selected ? 'contained' : 'text', disabled: true }, props))) : (_jsx(Tooltip, Object.assign({ title: title, disableInteractive: true }, { children: _jsx(DateCalendarBtnWrapper, Object.assign({ ref: ref, variant: selected ? 'contained' : 'text' }, props)) })));
+    return disabled ? (_jsx(DateCalendarBtnWrapper, Object.assign({ ref: ref, variant: selected ? 'contained' : 'text', "aria-selected": selected, disabled: true }, props))) : (_jsx(Tooltip, Object.assign({ title: title, disableInteractive: true }, { children: _jsx(DateCalendarBtnWrapper, Object.assign({ ref: ref, variant: selected ? 'contained' : 'text', "aria-selected": selected }, props)) })));
 });

package/esm/DatePicker/DatePicker.d.ts

@@ -5,22 +5,42 @@ import { Reason } from '../types';
 import { MinMaxDate } from './types';
 import { MondayFirst } from './DayPicker';
 export type DatePickerProps = MondayFirst & Partial<MinMaxDate> & {
+    /**
+     * @description Маска для инпута даты
+     * @default 'DD.MM.YYYY'
+     * */
     mask?: DateMask;
-    onChange?: (date: Date | string | null | undefined) => void;
+    /**
+     * @description Обработчик изменения состояния. Передает только Date object, если дата невалидна, то будет Invalid date
+     * */
+    onChange?: (date?: Date) => void;
     onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
     onOpen?: () => void;
     onClose?: (event?: SyntheticEvent<Element, Event> | Event, reason?: Reason) => void;
     inputProps?: Omit<TextFieldProps, 'ref' | 'value' | 'onChange'>;
     disabled?: boolean;
+    /**
+     * @description Принимает только Date object, включая невалидную дату Invalid date
+     * */
     value?: Date;
 };
 export declare const DatePicker: import("react").ForwardRefExoticComponent<MondayFirst & Partial<MinMaxDate> & {
+    /**
+     * @description Маска для инпута даты
+     * @default 'DD.MM.YYYY'
+     * */
     mask?: string | undefined;
-    onChange?: ((date: Date | string | null | undefined) => void) | undefined;
+    /**
+     * @description Обработчик изменения состояния. Передает только Date object, если дата невалидна, то будет Invalid date
+     * */
+    onChange?: ((date?: Date) => void) | undefined;
     onBlur?: ((e: FocusEvent<HTMLInputElement>) => void) | undefined;
     onOpen?: (() => void) | undefined;
     onClose?: ((event?: SyntheticEvent<Element, Event> | Event, reason?: Reason) => void) | undefined;
     inputProps?: Omit<TextFieldProps, "ref" | "value" | "onChange"> | undefined;
     disabled?: boolean | undefined;
+    /**
+     * @description Принимает только Date object, включая невалидную дату Invalid date
+     * */
     value?: Date | undefined;
 } & import("react").RefAttributes<HTMLInputElement>>;

package/esm/DatePicker/DatePicker.js

@@ -10,55 +10,40 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useCallback, useContext, useEffect, useState, } from 'react';
+import { forwardRef, useContext, } from 'react';
 import { useForwardedRef, useToggle } from '../hooks';
-import { areDatesSame, formatDate, isDate, parseDate, } from '../utils/date';
 import { DatePickerClickAwayListener } from './DatePickerClickAwayListener';
 import { DatePickerInput } from './DatePickerInput';
 import { DatePickerPopper } from './DatePickerPopper';
 import { MinMaxDateContext, MinMaxDateContextProvider, } from './MinMaxDateContext';
 import { YearMonthDayPicker } from './YearMonthDayPicker';
-import { useBaseDateInRange } from './hooks/useBaseDateInRange';
-import { useSelectedBaseDate } from './hooks/useSelectedBaseDate';
-const DatePickerInner = forwardRef(({ onChange, onOpen, onBlur, onClose, mask = 'DD.MM.YYYY', isMondayFirst, inputProps, disabled, value: parentValue, }, forwardedRef) => {
+import { useBaseDateInRange, useMaskedValue, useSelectedBaseDate, } from './hooks';
+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({
         onActive: onOpen,
         onInactive: onClose,
     });
-    const [selectedDate, setSelectedDate] = useState(parentValue);
-    const [maskedDate, setMaskedDate] = useState('');
+    const { maskedValue, onChangeMaskedValue, onChangeMaskedDate } = useMaskedValue({
+        currentValue: value,
+        mask,
+        onChangeValue: onChange,
+    });
     const baseDate = useBaseDateInRange({ minDate, maxDate });
-    const selectedBaseDate = useSelectedBaseDate(selectedDate);
-    const checkValue = useCallback((value) => {
-        const isString = typeof value === 'string';
-        setMaskedDate(isString ? value : formatDate(value, mask));
-        const date = isString ? parseDate(value, mask) : value;
-        if (value === '' || !isDate(date)) {
-            setSelectedDate(null);
-        }
-        else if (!areDatesSame(date, selectedDate)) {
-            setSelectedDate(date);
-        }
-    }, [mask, selectedDate]);
+    const selectedBaseDate = useSelectedBaseDate(value);
     const handleDayPick = (date) => {
-        setMaskedDate(formatDate(date, mask));
-        setSelectedDate(date);
+        onChangeMaskedDate(date);
         closePopper(undefined, 'selectOption');
     };
-    useEffect(() => {
-        onChange === null || onChange === void 0 ? void 0 : onChange(selectedDate || maskedDate);
-    }, [selectedDate, maskedDate]);
-    useEffect(() => {
-        checkValue(parentValue || '');
-    }, [parentValue]);
-    const blurHandler = (e) => {
-        checkValue(e.target.value);
+    const handleBlurMaskInput = (e) => {
+        onChangeMaskedValue(e.target.value);
         onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
     };
-    const handleNativeChange = (e) => checkValue(e.target.value);
-    return (_jsxs(DatePickerClickAwayListener, Object.assign({ onClickAway: closePopper }, { children: [_jsx(DatePickerInput, Object.assign({}, inputProps, { mask: mask, onNativeChange: handleNativeChange, onBlur: blurHandler, disabled: disabled, value: maskedDate, 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 }) }))] })));
+    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 }) }))] })));
 });
 export const DatePicker = forwardRef((_a, forwardedRef) => {
     var { minDate, maxDate } = _a, props = __rest(_a, ["minDate", "maxDate"]);

package/esm/DatePicker/DatePicker.test.d.ts

@@ -0,0 +1 @@
+export {};

package/esm/DatePicker/DatePicker.test.js

@@ -0,0 +1,75 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { act, fireEvent, renderWithTheme, screen, userEvents, } from '@astral/tests';
+import { vi } from 'vitest';
+import { useState } from 'react';
+import { DatePicker } from './DatePicker';
+// Протестировать любые кейсы, связанные с MaskFiled невозможно из-за того, что MaskField использует методы, не эмулируемые в rtl
+describe('DatePicker', () => {
+    beforeAll(() => {
+        vi.useFakeTimers({ toFake: ['Date'] });
+        vi.setSystemTime(new Date('2022-02-10'));
+    });
+    afterAll(() => {
+        vi.useRealTimers();
+    });
+    it('Props:onChange: при выборе даты в пикере в onChange передается объект Date', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onChange = vi.fn();
+        renderWithTheme(_jsx(DatePicker, { onChange: onChange }));
+        fireEvent.focus(screen.getByRole('textbox'));
+        const dateBtn = screen.getAllByText('10')[0];
+        yield userEvents.click(dateBtn);
+        expect(onChange.mock.calls[0][0] instanceof Date).toBeTruthy();
+        expect(onChange.mock.calls[0][0].toISOString()).toBe('2022-02-10T00:00:00.000Z');
+    }));
+    it('Props:minDate: в пикере нельзя выбрать дату меньше minDate', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onChange = vi.fn();
+        renderWithTheme(_jsx(DatePicker, { onChange: onChange, minDate: new Date('2022-02-09') }));
+        fireEvent.focus(screen.getByRole('textbox'));
+        const btn = screen.getAllByText('8')[0];
+        expect(btn).toBeDisabled();
+    }));
+    it('Props:minDate: в пикере можно выбрать дату равной minDate', () => __awaiter(void 0, void 0, void 0, function* () {
+        renderWithTheme(_jsx(DatePicker, { minDate: new Date('2022-02-09') }));
+        fireEvent.focus(screen.getByRole('textbox'));
+        const btn = screen.getAllByText('9')[0];
+        expect(btn).not.toBeDisabled();
+    }));
+    it('Props:maxDate: в пикере нельзя выбрать дату больше maxDate', () => __awaiter(void 0, void 0, void 0, function* () {
+        renderWithTheme(_jsx(DatePicker, { maxDate: new Date('2022-02-09') }));
+        fireEvent.focus(screen.getByRole('textbox'));
+        const btn = screen.getAllByText('10')[0];
+        expect(btn).toBeDisabled();
+    }));
+    it('Props:maxDate: в пикере можно выбрать дату равной maxDate', () => __awaiter(void 0, void 0, void 0, function* () {
+        renderWithTheme(_jsx(DatePicker, { maxDate: new Date('2022-02-09') }));
+        fireEvent.focus(screen.getByRole('textbox'));
+        const btn = screen.getAllByText('9')[0];
+        expect(btn).not.toBeDisabled();
+    }));
+    it('Props:value: при изменении меняется выбранная дата в календаре', () => __awaiter(void 0, void 0, void 0, function* () {
+        const callbacks = {
+            setValue: () => undefined,
+        };
+        const TestComponent = () => {
+            const [value, setValue] = useState();
+            callbacks.setValue = setValue;
+            return _jsx(DatePicker, { value: value, onChange: setValue });
+        };
+        renderWithTheme(_jsx(TestComponent, {}));
+        yield act(() => {
+            callbacks.setValue(new Date('2022-03-09'));
+        });
+        fireEvent.focus(screen.getByRole('textbox'));
+        const selected = screen.getAllByText('9')[0].getAttribute('aria-selected');
+        expect(selected).toBeTruthy();
+    }));
+});

package/esm/DatePicker/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export * from './useMaskedValue';
+export * from './useSelectedBaseDate';
+export * from './useBaseDateInRange';

package/esm/DatePicker/hooks/index.js

@@ -0,0 +1,3 @@
+export * from './useMaskedValue';
+export * from './useSelectedBaseDate';
+export * from './useBaseDateInRange';

package/esm/DatePicker/hooks/useMaskedValue/index.d.ts

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

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

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

package/esm/DatePicker/hooks/useMaskedValue/useMaskedValue.d.ts

@@ -0,0 +1,27 @@
+type Params = {
+    currentValue?: Date;
+    mask: string;
+    /**
+     * @description Изменение value для DatePicker
+     * */
+    onChangeValue?: (date?: Date) => void;
+};
+type Returned = {
+    /**
+     * @description Value для MaskField
+     * */
+    maskedValue: string;
+    /**
+     * @description Изменение maskedValue по Date
+     * */
+    onChangeMaskedDate: (date: Date) => void;
+    /**
+     * @description Изменение maskedValue
+     * */
+    onChangeMaskedValue: (value: string) => void;
+};
+/**
+ * @description Хук для управления значением для MaskField
+ */
+export declare const useMaskedValue: ({ currentValue, mask, onChangeValue, }: Params) => Returned;
+export {};

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

@@ -0,0 +1,40 @@
+import { useEffect, useState } from 'react';
+import { formatDate, isDate, parseDate } from '../../../utils/date';
+/**
+ * @description Хук для управления значением для MaskField
+ */
+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));
+    };
+    const handleChangeMaskedDate = (date) => {
+        setMaskedValue(formatDate(date, mask));
+        onChangeValue === null || onChangeValue === void 0 ? void 0 : onChangeValue(date);
+    };
+    // здесь происходит реакция на изменение value из вне (управляемый компонент)
+    useEffect(() => {
+        // если новое значение пустое, то сбрасываем значение MaskField
+        if (!currentValue) {
+            setMaskedValue('');
+            return;
+        }
+        // здесь обрабатывается сценарий, когда в инпут вводится невалидная дата и при этом currentValue становится Invalid Date
+        // в таком случае сравнить даты напрямую не получится
+        if (!isDate(currentValue) && maskedValue) {
+            return;
+        }
+        // проверяем равны ли даты
+        const isEqualValueAndMaskedDate = currentValue.getTime() === parseDate(maskedValue, mask).getTime();
+        // если даты не равны, то значит изменился currentValue из вне и надо синхронизировать maskedValue
+        if (!isEqualValueAndMaskedDate) {
+            setMaskedValue(formatDate(currentValue, mask));
+        }
+    }, [currentValue]);
+    return {
+        maskedValue,
+        onChangeMaskedValue: handleChangeMaskedValue,
+        onChangeMaskedDate: handleChangeMaskedDate,
+    };
+};

package/esm/DatePicker/hooks/useSelectedBaseDate/useSelectedBaseDate.d.ts

@@ -1 +1 @@
-export declare const useSelectedBaseDate: (selectedDate?: Date | null) => Date | null | undefined;
+export declare const useSelectedBaseDate: (selectedDate?: Date) => Date | undefined;

package/esm/DatePicker/hooks/useSelectedBaseDate/useSelectedBaseDate.js

@@ -1,10 +1,14 @@
 import { useContext, useEffect, useState } from 'react';
 import { MinMaxDateContext } from '../../MinMaxDateContext';
-import { DateCompareDeep, areDatesSame, isDateOutOfRange, } from '../../../utils/date';
+import { DateCompareDeep, areDatesSame, isDate, isDateOutOfRange, } from '../../../utils/date';
 export const useSelectedBaseDate = (selectedDate) => {
     const { minDate, maxDate } = useContext(MinMaxDateContext);
     const [baseDate, setBaseDate] = useState(selectedDate);
     useEffect(() => {
+        if (!isDate(selectedDate)) {
+            setBaseDate(undefined);
+            return;
+        }
         if (areDatesSame(baseDate, selectedDate)) {
             return;
         }
@@ -15,7 +19,7 @@ export const useSelectedBaseDate = (selectedDate) => {
                 maxDate,
                 deep: DateCompareDeep.day,
             })) {
-            setBaseDate(null);
+            setBaseDate(undefined);
         }
         else {
             setBaseDate(selectedDate);

package/esm/DropdownButton/DropdownButton.test.d.ts

@@ -0,0 +1 @@
+export {};

package/esm/DropdownButton/DropdownButton.test.js

@@ -0,0 +1,35 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { renderWithTheme, screen, userEvents } from '@astral/tests';
+import { vi } from 'vitest';
+import { MenuItem } from '../MenuItem';
+import { DropdownButton } from './DropdownButton';
+describe('DropdownButton', () => {
+    it('Props:disabled: нельзя нажать кнопку', () => {
+        renderWithTheme(_jsx(DropdownButton, Object.assign({ disabled: true, name: "btn" }, { children: _jsx(MenuItem, { children: "Item" }) })));
+        const button = screen.getByRole('button', { name: 'btn' });
+        expect(button).toBeDisabled();
+    });
+    it('При клике на option закрывается popover', () => __awaiter(void 0, void 0, void 0, function* () {
+        renderWithTheme(_jsx(DropdownButton, Object.assign({ name: "btn" }, { children: _jsx(MenuItem, { children: "Item" }) })));
+        yield userEvents.click(screen.getByRole('button'));
+        yield userEvents.click(screen.getByText('Item'));
+        const menuItem = screen.queryByRole('menuitem');
+        expect(menuItem).not.toBeInTheDocument();
+    }));
+    it('При клике на option вызывается onClick', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onClick = vi.fn();
+        renderWithTheme(_jsx(DropdownButton, Object.assign({ name: "btn" }, { children: _jsx(MenuItem, Object.assign({ onClick: onClick }, { children: "Item" })) })));
+        yield userEvents.click(screen.getByRole('button'));
+        yield userEvents.click(screen.getByRole('menuitem'));
+        expect(onClick).toBeCalled();
+    }));
+});

package/package.json

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