@astral/ui 0.48.4 → 1.0.0-test.1670405759

package/esm/DatePicker/DateCalendar/DateCalendarHead/index.d.ts

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

package/esm/DatePicker/DateCalendar/DateCalendarHead/index.js

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

package/esm/DatePicker/DateCalendar/DateCalendarHead/styles.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const DateCalendarHeadBtn: import("@emotion/styled").StyledComponent<Pick<import("../DateCalendarBtn").DateCalendarArrowBtnProps, "disabled" | "action" | "color" | "translate" | "href" | "onFocusVisible" | "tabIndex" | "type" | "children" | "form" | "slot" | "title" | "key" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "component" | "size" | "selected" | keyof import("@mui/material/OverridableComponent").CommonProps | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "startIcon" | "loading" | "loadingIndicator" | "loadingPosition"> & import("react").RefAttributes<HTMLButtonElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const DateCalendarHeadText: import("@emotion/styled").StyledComponent<Pick<import("react").PropsWithChildren<import("../../../Typography").TypographyProps>, string | number | symbol> & import("react").RefAttributes<HTMLElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/esm/DatePicker/DateCalendar/DateCalendarHead/styles.js

@@ -0,0 +1,23 @@
+import { styled } from '../../../styles';
+import { DateCalendarBtn } from '../DateCalendarBtn';
+import { CalendarGridPositions } from '../enums/calendarGridPositions';
+import { Typography } from '../../../Typography';
+export const DateCalendarHeadBtn = styled(DateCalendarBtn) `
+  display: block;
+  grid-area: ${CalendarGridPositions.head};
+
+  &::first-letter {
+    text-transform: capitalize;
+  }
+`;
+export const DateCalendarHeadText = styled(Typography) `
+  display: block;
+  grid-area: ${CalendarGridPositions.head};
+  align-self: center;
+
+  text-align: center;
+
+  &::first-letter {
+    text-transform: capitalize;
+  }
+`;

package/esm/DatePicker/DateCalendar/enums/calendarGridPositions.d.ts

@@ -0,0 +1,6 @@
+export declare enum CalendarGridPositions {
+    prev = "p",
+    head = "h",
+    next = "n",
+    body = "b"
+}

package/esm/DatePicker/DateCalendar/enums/calendarGridPositions.js

@@ -0,0 +1,7 @@
+export var CalendarGridPositions;
+(function (CalendarGridPositions) {
+    CalendarGridPositions["prev"] = "p";
+    CalendarGridPositions["head"] = "h";
+    CalendarGridPositions["next"] = "n";
+    CalendarGridPositions["body"] = "b";
+})(CalendarGridPositions || (CalendarGridPositions = {}));

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

@@ -0,0 +1,4 @@
+export * from './DateCalendarBody';
+export * from './DateCalendarHead';
+export * from './DateCalendarGridBtn';
+export * from './styles';

package/esm/DatePicker/DateCalendar/index.js

@@ -0,0 +1,4 @@
+export * from './DateCalendarBody';
+export * from './DateCalendarHead';
+export * from './DateCalendarGridBtn';
+export * from './styles';

package/esm/DatePicker/DateCalendar/styles.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const DateCalendarWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/esm/DatePicker/DateCalendar/styles.js

@@ -0,0 +1,12 @@
+import { styled } from '../../styles';
+import { CalendarGridPositions } from './enums/calendarGridPositions';
+export const DateCalendarWrapper = styled.div `
+  display: grid;
+  grid-gap: ${({ theme }) => theme.spacing(4)};
+  grid-template:
+    '${CalendarGridPositions.prev} ${CalendarGridPositions.head} ${CalendarGridPositions.next}' auto
+    '${CalendarGridPositions.body} ${CalendarGridPositions.body} ${CalendarGridPositions.body}' 1fr
+    / 32px 1fr 32px;
+  width: 288px;
+  height: 256px;
+`;

package/esm/DatePicker/DatePicker.d.ts

@@ -1,12 +1,46 @@
-/// <reference types="react" />
-import { ReactDatePickerProps } from 'react-datepicker';
+import { SyntheticEvent } from 'react';
 import { TextFieldProps } from '../TextField';
-export declare type DatePickerProps = Omit<ReactDatePickerProps, 'renderCustomHeader' | 'locale' | 'renderCustomHeader' | 'renderDayContents' | 'customInput' | 'selected' | 'value' | 'placeholderText'> & {
-    inputProps?: TextFieldProps;
+import { DateMask } from '../utils/date';
+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;
+    /**
+     * @description Обработчик изменения состояния. Передает только Date object, если дата невалидна, то будет Invalid date
+     * */
+    onChange?: (date?: Date) => void;
+    onBlur?: () => 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<Omit<ReactDatePickerProps<never, undefined>, "value" | "selected" | "locale" | "renderCustomHeader" | "renderDayContents" | "customInput" | "placeholderText"> & {
-    inputProps?: TextFieldProps | undefined;
+export declare const DatePicker: import("react").ForwardRefExoticComponent<MondayFirst & Partial<MinMaxDate> & {
+    /**
+     * @description Маска для инпута даты
+     * @default 'DD.MM.YYYY'
+     * */
+    mask?: string | undefined;
+    /**
+     * @description Обработчик изменения состояния. Передает только Date object, если дата невалидна, то будет Invalid date
+     * */
+    onChange?: ((date?: Date) => 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;
+    disabled?: boolean | undefined;
+    /**
+     * @description Принимает только Date object, включая невалидную дату Invalid date
+     * */
     value?: Date | undefined;
 } & import("react").RefAttributes<HTMLInputElement>>;
-export default DatePicker;

package/esm/DatePicker/DatePicker.js

@@ -1,14 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -20,48 +9,44 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useContext } from 'react';
-import ReactDatePicker from 'react-datepicker';
-import { InputAdornment } from '@mui/material';
-import { CalendarOutlineMd } from '@astral/icons';
-import { isValid, parse } from 'date-fns';
-import { MaskField } from '../MaskField';
-import { DatePickerContext } from '../DatePickerProvider';
-import { DatePickerWrapper } from './styled';
-import { DatePickerHeader } from './DatePickerHeader';
-import { DatePickerDay } from './DatePickerDay';
-var MIN_YEAR = 1000;
-export var DatePicker = forwardRef(function (props, ref) {
-    var value = props.value, onChange = props.onChange, _a = props.inputProps, inputProps = _a === void 0 ? {} : _a, _b = props.dateFormat, dateFormat = _b === void 0 ? 'dd.MM.yyyy' : _b, restProps = __rest(props, ["value", "onChange", "inputProps", "dateFormat"]);
-    var placeholder = inputProps.placeholder, restInputProps = __rest(inputProps, ["placeholder"]);
-    var locale = useContext(DatePickerContext).locale;
-    // уберкостыль, react-date-picker забирает значение из event.target.value
-    var handleMaskFieldAccept = function (val, _maskRef, _e, onMaskFieldChange) {
-        onMaskFieldChange === null || onMaskFieldChange === void 0 ? void 0 : onMaskFieldChange({
-            target: {
-                value: val,
-            },
-        });
+import { useForwardedRef, useToggle } from '../hooks';
+import { DatePickerClickAwayListener } from './DatePickerClickAwayListener';
+import { DatePickerInput } from './DatePickerInput';
+import { DatePickerPopper } from './DatePickerPopper';
+import { MinMaxDateContext, MinMaxDateContextProvider, } from './MinMaxDateContext';
+import { YearMonthDayPicker } from './YearMonthDayPicker';
+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 [isOpenPopper, openPopper, closePopper] = useToggle({
+        onActive: onOpen,
+        onInactive: onClose,
+    });
+    const handleClosePopper = () => {
+        // для данного компонента onBlur должен срабатывать после закрытия popover, а не во время выбора даты
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+        closePopper(undefined, 'selectOption');
     };
-    var handleChangeRaw = function (e) {
-        var date = parse(e === null || e === void 0 ? void 0 : e.target.value, dateFormat, new Date());
-        // если инпут пустой - кладем в value null
-        if (!(e === null || e === void 0 ? void 0 : e.target.value)) {
-            onChange(null, e);
-        }
-        if (isValid(date) && date.getFullYear() >= MIN_YEAR) {
-            onChange(date, e);
-        }
+    const { maskedValue, onChangeMaskedValue, onChangeMaskedDate } = useMaskedValue({
+        currentValue: value,
+        mask,
+        onChangeValue: onChange,
+    });
+    const baseDate = useBaseDateInRange({ minDate, maxDate });
+    const selectedBaseDate = useSelectedBaseDate(value);
+    const handleDayPick = (date) => {
+        onChangeMaskedDate(date);
+        handleClosePopper();
+    };
+    const handleChangeMaskInput = (e) => {
+        onChangeMaskedValue(e.target.value);
     };
-    return (_jsx(DatePickerWrapper, { children: _jsx(ReactDatePicker, __assign({}, restProps, { locale: locale, selected: value, openToDate: value !== null && value !== void 0 ? value : undefined, dateFormat: dateFormat, placeholderText: placeholder, onChange: onChange, onChangeRaw: handleChangeRaw, renderCustomHeader: function (renderProps) { return (_jsx(DatePickerHeader, __assign({}, renderProps))); }, renderDayContents: function (dayOfMonth) { return (_jsx(DatePickerDay, { dayOfMonth: dayOfMonth })); }, customInput: _jsx(MaskField, __assign({}, restInputProps, { mask: Date, autofix: "pad", onAccept: handleMaskFieldAccept, InputProps: {
-                    endAdornment: (_jsx(InputAdornment, __assign({ position: "end" }, { children: _jsx(CalendarOutlineMd, {}) }))),
-                }, inputRef: function (el) {
-                    // если передан ref - пишем в ref.current элемент из MaskField (inputRef принимает только функцию)
-                    if (ref) {
-                        ref.current =
-                            el;
-                    }
-                } })) })) }));
+    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"]);
+    return (_jsx(MinMaxDateContextProvider, Object.assign({ minDate: minDate, maxDate: maxDate }, { children: _jsx(DatePickerInner, Object.assign({}, props, { ref: forwardedRef })) })));
 });
-export default DatePicker;

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

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

package/esm/DatePicker/DatePicker.test.js

@@ -0,0 +1,90 @@
+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();
+    }));
+    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/DatePickerClickAwayListener/DatePickerClickAwayListener.d.ts

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from 'react';
+type DatePickerClickAwayListenerProps = {
+    onClickAway: () => void;
+};
+export declare const DatePickerClickAwayListener: ({ onClickAway, children, }: PropsWithChildren<DatePickerClickAwayListenerProps>) => JSX.Element;
+export {};

package/esm/DatePicker/DatePickerClickAwayListener/DatePickerClickAwayListener.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ClickAwayListener } from '@mui/material';
+export const DatePickerClickAwayListener = ({ onClickAway, children, }) => (_jsx(ClickAwayListener, Object.assign({ onClickAway: onClickAway }, { children: _jsx("div", { children: children }) })));

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

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

package/esm/DatePicker/DatePickerClickAwayListener/index.js

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

package/esm/DatePicker/DatePickerInput/DatePickerInput.d.ts

@@ -0,0 +1,8 @@
+import { ChangeEvent } from 'react';
+import { MaskFieldProps } from '../../MaskField';
+type DatePickerInputProps = Omit<MaskFieldProps, 'mask' | 'autofix'> & {
+    onNativeChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    mask: string;
+};
+export declare const DatePickerInput: import("react").ForwardRefExoticComponent<Pick<DatePickerInputProps, "disabled" | "default" | "action" | "color" | "content" | "height" | "translate" | "width" | "margin" | "mask" | "shape" | "error" | "success" | "css" | "href" | "tabIndex" | "type" | "children" | "className" | "cite" | "data" | "form" | "label" | "slot" | "select" | "span" | "style" | "summary" | "title" | "pattern" | "key" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "variant" | "size" | "selected" | "list" | "step" | "classes" | "fullWidth" | "focused" | "required" | "htmlFor" | "autoComplete" | "inputProps" | "inputRef" | "multiline" | "readOnly" | "rows" | "maxRows" | "minRows" | "open" | "start" | "checked" | "alt" | "sizes" | "src" | "srcSet" | "max" | "hiddenLabel" | "wrap" | "cols" | "download" | "hrefLang" | "media" | "rel" | "target" | "min" | "method" | "crossOrigin" | "cellPadding" | "cellSpacing" | "colSpan" | "headers" | "rowSpan" | "scope" | "SelectProps" | "useMap" | "as" | "integrity" | "coords" | "controls" | "loop" | "muted" | "preload" | "dateTime" | "acceptCharset" | "noValidate" | "frameBorder" | "marginHeight" | "marginWidth" | "sandbox" | "scrolling" | "httpEquiv" | "high" | "low" | "optimum" | "reversed" | "async" | "defer" | "multiple" | "kind" | "playsInline" | "poster" | "classID" | "wmode" | "charSet" | "autoPlay" | "mediaGroup" | "encType" | "manifest" | "allowFullScreen" | "allowTransparency" | "seamless" | "srcDoc" | "accept" | "capture" | "maxLength" | "minLength" | "challenge" | "keyType" | "keyParams" | "scoped" | "srcLang" | "InputProps" | "FormHelperTextProps" | "helperText" | "InputLabelProps" | "eager" | "parent" | "prepare" | "validate" | "commit" | "overwrite" | "blocks" | "definitions" | "onAccept" | "onComplete" | "unmask" | "onNativeChange"> & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/esm/DatePicker/DatePickerInput/DatePickerInput.js

@@ -0,0 +1,41 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { IMask } from 'react-imask';
+import { forwardRef, useMemo } from 'react';
+import { InputAdornment } from '@mui/material';
+import { CalendarOutlineMd } from '@astral/icons';
+import { DatePickerInputWrapper } from './styles';
+export const DatePickerInput = forwardRef((_a, ref) => {
+    var { onClick, onChange, onNativeChange, mask } = _a, props = __rest(_a, ["onClick", "onChange", "onNativeChange", "mask"]);
+    const [normalizedMask, maskBlocks] = useMemo(() => {
+        // маска maskField соглашается работать только с разделителями имеющими символ "`" (косая кавычка) перед заменяемым элементом
+        const nMask = mask === null || mask === void 0 ? void 0 : mask.replace('.', '.`');
+        const blocks = {};
+        mask.split('.').forEach((key) => {
+            const to = Number(String.prototype.padStart(key.length, '9'));
+            blocks[key] = {
+                mask: IMask.MaskedRange,
+                from: 0,
+                to,
+                maxLength: key.length,
+            };
+        });
+        return [nMask, blocks];
+    }, [mask]);
+    return (_jsx(DatePickerInputWrapper, Object.assign({}, props, { ref: ref, onClick: onClick, mask: normalizedMask, blocks: maskBlocks, autofix: false, fullWidth: true, InputProps: {
+            onChange: onNativeChange,
+            endAdornment: (_jsx(InputAdornment, Object.assign({ position: "end", disablePointerEvents: true }, { children: _jsx(CalendarOutlineMd, {}) }))),
+        }, inputProps: {
+            ref,
+        } })));
+});

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

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

package/esm/DatePicker/DatePickerInput/index.js

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

package/esm/DatePicker/DatePickerInput/styles.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const DatePickerInputWrapper: import("@emotion/styled").StyledComponent<Pick<import("../../MaskField").MaskFieldProps, "disabled" | "default" | "action" | "color" | "content" | "height" | "translate" | "width" | "margin" | "mask" | "shape" | "error" | "success" | "css" | "href" | "tabIndex" | "type" | "children" | "className" | "cite" | "data" | "form" | "label" | "slot" | "select" | "span" | "style" | "summary" | "title" | "pattern" | "key" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "variant" | "size" | "selected" | "list" | "step" | "classes" | "fullWidth" | "focused" | "required" | "htmlFor" | "autoComplete" | "inputProps" | "inputRef" | "multiline" | "readOnly" | "rows" | "maxRows" | "minRows" | "open" | "start" | "checked" | "alt" | "sizes" | "src" | "srcSet" | "max" | "hiddenLabel" | "wrap" | "cols" | "download" | "hrefLang" | "media" | "rel" | "target" | "min" | "method" | "crossOrigin" | "cellPadding" | "cellSpacing" | "colSpan" | "headers" | "rowSpan" | "scope" | "SelectProps" | "useMap" | "as" | "integrity" | "coords" | "controls" | "loop" | "muted" | "preload" | "dateTime" | "acceptCharset" | "noValidate" | "frameBorder" | "marginHeight" | "marginWidth" | "sandbox" | "scrolling" | "httpEquiv" | "high" | "low" | "optimum" | "reversed" | "async" | "defer" | "multiple" | "kind" | "playsInline" | "poster" | "classID" | "wmode" | "charSet" | "autoPlay" | "mediaGroup" | "encType" | "manifest" | "allowFullScreen" | "allowTransparency" | "seamless" | "srcDoc" | "accept" | "capture" | "maxLength" | "minLength" | "challenge" | "keyType" | "keyParams" | "scoped" | "srcLang" | "InputProps" | "FormHelperTextProps" | "helperText" | "InputLabelProps" | "eager" | "parent" | "prepare" | "validate" | "commit" | "overwrite" | "blocks" | "definitions" | "autofix" | "onAccept" | "onComplete" | "unmask"> & import("react").RefAttributes<HTMLInputElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/esm/DatePicker/DatePickerInput/styles.js

@@ -0,0 +1,7 @@
+import { styled } from '../../styles';
+import { MaskField } from '../../MaskField';
+export const DatePickerInputWrapper = styled(MaskField) `
+  input {
+    appearance: none;
+  }
+`;

package/esm/DatePicker/DatePickerPopper/DatePickerPopper.d.ts

@@ -0,0 +1,7 @@
+import { PropsWithChildren, SyntheticEvent } from 'react';
+import { PopperProps } from '@mui/material';
+import { Reason, WithoutEmotionSpecific } from '../../types';
+export type DatePickerProps = PropsWithChildren<Omit<WithoutEmotionSpecific<PopperProps>, 'children'>> & {
+    onClose?: (_?: SyntheticEvent<Element, Event> | Event, reason?: Reason) => void;
+};
+export declare const DatePickerPopper: ({ children, onClose, ...props }: DatePickerProps) => JSX.Element;

package/esm/DatePicker/DatePickerPopper/DatePickerPopper.js

@@ -0,0 +1,31 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEscapeClickEffect } from '../../hooks/useEscapeClickEffect';
+import { DatePickerPopoverInner, PopperWrapper } from './styles';
+export const DatePickerPopper = (_a) => {
+    var { children, onClose } = _a, props = __rest(_a, ["children", "onClose"]);
+    useEscapeClickEffect({
+        onEscape: onClose,
+        isActive: props.open,
+        preventBubbling: true,
+    });
+    return (_jsx(PopperWrapper, Object.assign({}, props, { placement: "bottom-start", disablePortal: true, modifiers: [
+            {
+                name: 'offset',
+                options: {
+                    // использование отступов для соответствия с дизайном, 0 по горизонтали, 8px по вертикали
+                    offset: [0, 8],
+                },
+            },
+        ] }, { children: _jsx(DatePickerPopoverInner, { children: children }) })));
+};

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

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

package/esm/DatePicker/DatePickerPopper/index.js

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

package/esm/DatePicker/DatePickerPopper/styles.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const DatePickerPopoverInner: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const PopperWrapper: import("@emotion/styled").StyledComponent<Pick<import("@mui/material").PopperProps, "color" | "translate" | "transition" | "components" | "sx" | "tabIndex" | "children" | "className" | "slotProps" | "slots" | "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "component" | "componentsProps" | "container" | "open" | "disablePortal" | "keepMounted" | "anchorEl" | "modifiers" | "placement" | "popperOptions" | "popperRef"> & import("react").RefAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/esm/DatePicker/DatePickerPopper/styles.js

@@ -0,0 +1,12 @@
+import { Popper } from '@mui/material';
+import { styled } from '../../styles';
+export const DatePickerPopoverInner = styled.div `
+  padding: ${({ theme }) => theme.spacing(4)};
+
+  background: ${({ theme }) => theme.palette.common.white};
+  border-radius: ${({ theme }) => theme.shape.small};
+  box-shadow: ${({ theme }) => theme.elevation[200]};
+`;
+export const PopperWrapper = styled(Popper) `
+  z-index: ${({ theme }) => theme.zIndex.tooltip};
+`;

package/esm/DatePicker/DayPicker/DateDayPickerGrid/index.d.ts

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

package/esm/DatePicker/DayPicker/DateDayPickerGrid/index.js

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

package/esm/DatePicker/DayPicker/DateDayPickerGrid/styles.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const DateDayPickerGridBody: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/esm/DatePicker/DayPicker/DateDayPickerGrid/styles.js

@@ -0,0 +1,8 @@
+import { styled } from '../../../styles';
+import { DAYS_IN_WEEK } from '../../constants/counts';
+export const DateDayPickerGridBody = styled.div `
+  display: grid;
+  grid-template-columns: repeat(${DAYS_IN_WEEK}, 1fr);
+
+  margin-top: ${({ theme }) => theme.spacing(2)};
+`;