@moysklad/uikit 28.1.0

package/dist/components/Datepicker/Datepicker.js

@@ -0,0 +1,562 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react-datepicker/dist/react-datepicker.css";
+import "./Datepicker.css";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import react_datepicker from "react-datepicker";
+import react_input_mask from "react-input-mask";
+import { format } from "date-fns/format";
+import { cn } from "../../common/css/cn.js";
+import { mergeRefs } from "../../common/react/mergeRefs.js";
+import { Toggle } from "../Toggle/Toggle.js";
+import { useId } from "../../hooks/useId/index.js";
+import { Date12Icon } from "../../icon/index.js";
+import { DayContent } from "./components/DatepickerContent/DayContent/DayContent.js";
+import { MonthContent } from "./components/DatepickerContent/MonthContent/MonthContent.js";
+import { YearContent } from "./components/DatepickerContent/YearContent/YearContent.js";
+import { MonthHeader } from "./components/HeaderCurrentDate/MonthHeader/MonthHeader.js";
+import { YearHeader } from "./components/HeaderCurrentDate/YearHeader/YearHeader.js";
+import { HelperText } from "./components/HelperText/HelperText.js";
+import { Label } from "./components/Label/Label.js";
+import { LeftArrow } from "./components/LeftArrow/LeftArrow.js";
+import { PresetsContainer } from "./components/PresetsContainer/PresetsContainer.js";
+import { RightArrow } from "./components/RightArrow/RightArrow.js";
+import { TimeInput } from "./components/TimeInput/TimeInput.js";
+import { PresetsContext } from "./context/PresetsContext.js";
+import { DEFAULT_TIME, ENTER_KEY, ESCAPE_KEY, ONLY_DIGITS_REGEX, PLACEHOLDER_CHAR, SPACE_KEY, START_CALENDAR_FROM_MONDAY, TAB_KEY } from "./Datepicker.constants.js";
+import { EHeaderState } from "./Datepicker.types.js";
+import { dateFormatter, getParsedDateThroughRegex, isTimeFilled, isTimeValid, parseSelectedDate, prepareChangedDate, prevent, setTimeToDate } from "./utils/index.js";
+const DatePicker = react_datepicker["default"] ?? react_datepicker;
+const FocusableElement = {
+    Preset: 'Preset',
+    TimeInput: 'TimeInput',
+    TimeToggle: 'TimeToggle',
+    RightArrow: 'RightArrow'
+};
+const Datepicker = ({ id, localeFormat, lang, dateTimeFormatOptions, testId, selectedDate, setInitialDateIntoInput = false, showIcon = true, inputClassName: inputClassNameProp, popperClassName, portalId, blurAfterChange = true, blurAfterPick = true, showTime = false, isTimeRequired = false, defaultTime = DEFAULT_TIME, disabled, presets = [], presetsLabel, label = '', required = false, helperText = '', error = false, placeholder, icon = /*#__PURE__*/ jsx(Date12Icon, {}), iconPosition = 'start', inputRef: parentInputRef, inline, frameless, blurInputOnEsc = true, blurInputOnEnter = true, lastElementRef, fitInput, showTimeText = 'Указать время', customRender, onBlur, onFocus, onCalendarClose, onDateChanged, onEnterPress, onPick, onTimeToggleChange, onInputKeyUp, onDayClick })=>{
+    const formatter = dateFormatter.getFormatter(localeFormat, dateTimeFormatOptions);
+    const parsedSelectedDate = useMemo(()=>'string' == typeof selectedDate ? parseSelectedDate(selectedDate, formatter) : selectedDate, [
+        selectedDate,
+        formatter
+    ]);
+    const cords = useRef([
+        0,
+        0
+    ]);
+    const [placement, setPlacement] = useState('');
+    const [isValidationError, setIsValidationError] = useState(false);
+    const [withErrorBackground, setWithErrorBackground] = useState(false);
+    const [startDate, setStartDate] = useState(parsedSelectedDate ?? void 0);
+    const [isInputFocused, setIsInputFocused] = useState(false);
+    const refIsFocused = useRef(isInputFocused);
+    refIsFocused.current = isInputFocused;
+    const [headerState, setHeaderState] = useState(EHeaderState.DEFAULT);
+    const [selectTime, setSelectTime] = useState(false);
+    const [time, setTime] = useState('');
+    const timeInputEnabled = selectTime || isTimeRequired;
+    const pickerRef = useRef(null);
+    const inputRef = useRef(null);
+    const inputId = useId(id);
+    const changeInputValue = (value)=>{
+        inputRef.current?.setInputValue(value);
+    };
+    useEffect(()=>{
+        onTimeToggleChange?.(selectTime);
+    }, [
+        selectTime
+    ]);
+    const dateToString = (date, options)=>format(date, showTime && (!options || options.withTime) ? formatter.dateTime.format : formatter.date.format);
+    const getDateInputMask = ()=>{
+        if (!showTime || !isTimeRequired && !selectTime) return formatter.date.mask || '';
+        return formatter.dateTime.mask || '';
+    };
+    if (defaultTime.length && !isTimeValid(defaultTime)) throw new Error('Prop defaultTime must be in hh:mm format');
+    const renderDayContents = (day, date)=>/*#__PURE__*/ jsx(DayContent, {
+            startDate: startDate,
+            setStartDate: (value)=>{
+                const { date: newDate, time: newTime } = setTimeToDate(value, time, defaultTime);
+                handleDatepickerChange(newDate, !!newTime);
+                onDayClick?.(newDate);
+                if (newTime) setTime(format(newDate, formatter.time.format));
+            },
+            date: date,
+            onAlreadySelectedClick: ()=>{
+                if (!blurAfterPick) {
+                    const input = inputRef.current?.getInputDOMNode();
+                    input?.focus();
+                }
+            },
+            testId: testId ? `${testId}-day-${day}` : ''
+        });
+    const renderMonthContent = (month, shortMonth, longMonth, day)=>/*#__PURE__*/ jsx(MonthContent, {
+            day: day,
+            month: month,
+            lang: lang,
+            setHeaderState: setHeaderState,
+            pickerRef: pickerRef,
+            testId: testId ? `${testId}-month-${month}` : ''
+        });
+    const renderYearContent = (year)=>/*#__PURE__*/ jsx(YearContent, {
+            pickerRef: pickerRef,
+            year: year,
+            setHeaderState: setHeaderState,
+            testId: testId ? `${testId}-year-${year}` : ''
+        });
+    const handleDatepickerChange = useCallback((date, withTime)=>{
+        if (date) {
+            date = prepareChangedDate(date);
+            setStartDate(date);
+            const dateOptions = {
+                dateString: dateToString(date, {
+                    withTime
+                }),
+                formatter
+            };
+            onDateChanged(date, dateOptions);
+            onPick?.(date, dateOptions);
+            if (inputRef.current) {
+                pickerRef.current?.setPreSelection(date);
+                changeInputValue(format(date, showTime && withTime ? formatter.dateTime.format : formatter.date.format));
+                if (!blurAfterChange) {
+                    const input = inputRef.current?.getInputDOMNode();
+                    input.focus();
+                }
+                if (getDateInputMask()) inputRef.current?.setCursorToEnd();
+            }
+        }
+    }, [
+        blurAfterChange,
+        showTime,
+        onDateChanged,
+        onPick
+    ]);
+    const updateParsedDate = useCallback((parsed, time)=>{
+        if (!parsed) {
+            onDateChanged(null, {
+                dateString: '',
+                formatter
+            });
+            setStartDate(void 0);
+            setTime('');
+            return null;
+        }
+        let { date: newDate } = setTimeToDate(parsed.date, time);
+        newDate = prepareChangedDate(newDate);
+        setTime(time);
+        setIsValidationError(false);
+        pickerRef.current?.setPreSelection(newDate);
+        onDateChanged(newDate, {
+            dateString: dateToString(newDate),
+            formatter
+        });
+        setStartDate(newDate);
+        return newDate;
+    }, [
+        onDateChanged
+    ]);
+    const handleReset = ()=>{
+        cords.current = [
+            0,
+            0
+        ];
+        setPlacement('');
+        setHeaderState(EHeaderState.DEFAULT);
+    };
+    const handleCalendarClose = useCallback((inlineValue)=>{
+        handleReset();
+        if (!isTimeFilled(time) || !isTimeValid(time)) setSelectTime(false);
+        if (!showTime) return void onCalendarClose?.();
+        const value = inlineValue ?? inputRef.current?.getInputDOMNode().value;
+        const parsed = getParsedDateThroughRegex(value || '', [], showTime, localeFormat, dateTimeFormatOptions);
+        if (!parsed) return void onCalendarClose?.();
+        if (!isTimeFilled(time)) {
+            const newDate = updateParsedDate(parsed, DEFAULT_TIME);
+            changeInputValue(format(newDate, formatter.dateTime.format));
+            if (value === formatter.date.placeholder) pickerRef.current?.setPreSelection(new Date());
+        }
+        onCalendarClose?.();
+    }, [
+        onCalendarClose,
+        time,
+        showTime,
+        updateParsedDate
+    ]);
+    const handleInputChange = useCallback(()=>{
+        const value = inputRef.current?.getInputDOMNode().value;
+        changeInputValue(value ?? '');
+        const parsed = getParsedDateThroughRegex(value || '', [], showTime, localeFormat, dateTimeFormatOptions);
+        const newTime = parsed?.time?.length ? parsed.time : time;
+        updateParsedDate(parsed, getDateInputMask() ? newTime : '');
+        if (value === formatter.date.placeholder) pickerRef.current?.setPreSelection(new Date());
+    }, [
+        time,
+        showTime,
+        updateParsedDate
+    ]);
+    const handleInputPaste = useCallback((e)=>{
+        const DELAY_TO_VALIDATE_MS = 50;
+        const pastedRaw = e.clipboardData.getData('Text');
+        const containsOnlyDigits = null !== pastedRaw.match(ONLY_DIGITS_REGEX);
+        const parsed = getParsedDateThroughRegex(pastedRaw, [], showTime, localeFormat, dateTimeFormatOptions);
+        prevent(e);
+        if (parsed) {
+            const { date: newDate, time: newTime } = setTimeToDate(parsed.date, parsed.time.length ? parsed.time : time, defaultTime);
+            if (parsed.time) setTime(parsed.time);
+            handleDatepickerChange(newDate, !!newTime);
+        } else if (containsOnlyDigits) {
+            setIsValidationError(true);
+            changeInputValue(pastedRaw);
+            const evt = {
+                target: {
+                    value: pastedRaw
+                }
+            };
+            inputRef.current?.onChange(evt);
+            inputRef.current?.setCursorToEnd();
+        } else {
+            setWithErrorBackground(true);
+            setTimeout(()=>{
+                setWithErrorBackground(false);
+            }, DELAY_TO_VALIDATE_MS);
+        }
+    }, [
+        handleDatepickerChange,
+        time,
+        showTime,
+        defaultTime,
+        localeFormat
+    ]);
+    const handleInputBlur = useCallback((e)=>{
+        setIsInputFocused(false);
+        setIsValidationError(false);
+        const value = inputRef.current?.getInputDOMNode().value;
+        const parsed = getParsedDateThroughRegex(value || '', [], showTime, localeFormat, dateTimeFormatOptions);
+        if (!showTime) {
+            onBlur?.(e);
+            if (parsed) changeInputValue(format(parsed.date, formatter.date.format));
+            return;
+        }
+        const [, currentTime] = value.split(' ');
+        if (!parsed) return void onBlur?.(e);
+        let newDate = parsed.date;
+        if (!isTimeFilled(currentTime || '')) {
+            newDate = updateParsedDate(parsed, DEFAULT_TIME);
+            if (value === formatter.date.placeholder) pickerRef.current?.setPreSelection(new Date());
+        }
+        changeInputValue(format(newDate, formatter.dateTime.format));
+        onBlur?.(e);
+    }, [
+        onBlur,
+        showTime,
+        updateParsedDate
+    ]);
+    const handleInputFocus = useCallback((e)=>{
+        setIsInputFocused(true);
+        onFocus?.(e);
+    }, [
+        onFocus
+    ]);
+    const handleInputKeyDown = useCallback((e)=>{
+        const input = inputRef.current?.getInputDOMNode();
+        if (e.key === ESCAPE_KEY && blurInputOnEsc) {
+            input?.blur();
+            setIsInputFocused(false);
+            return;
+        }
+        if (e.key === SPACE_KEY) {
+            if (input?.selectionStart !== null) input?.setSelectionRange(input.selectionStart + 1, input.selectionStart + 1);
+        } else if (e.key === ENTER_KEY || e.key === TAB_KEY) {
+            const value = input?.value || '';
+            const [day, month, year] = value.split(/[.,:/\\\s]/);
+            if (month === formatter.month.placeholder && year === formatter.year.placeholder && day.toString().match(ONLY_DIGITS_REGEX)) {
+                if (day === formatter.day.placeholder) return;
+                const newDate = new Date();
+                const intDay = parseInt(day.split(PLACEHOLDER_CHAR).filter((el)=>'' !== el).join());
+                newDate.setDate(intDay);
+                const inputValue = format(newDate, formatter.date.format);
+                changeInputValue(inputValue);
+                setStartDate(newDate);
+                if (inline) handleCalendarClose(inputValue);
+                else pickerRef.current?.toggleCalendar();
+                if (blurInputOnEnter) {
+                    input?.blur();
+                    setIsInputFocused(false);
+                }
+                prevent(e);
+            } else if (e.key === TAB_KEY) {
+                input?.blur();
+                setIsInputFocused(false);
+            } else if (e.key === ENTER_KEY) {
+                if (blurInputOnEnter) {
+                    input?.blur();
+                    setIsInputFocused(false);
+                }
+                onEnterPress?.();
+                if (pickerRef.current?.isCalendarOpen()) pickerRef.current?.toggleCalendar();
+                else prevent(e);
+            }
+        }
+    }, [
+        onEnterPress,
+        formatter,
+        inline
+    ]);
+    const handleMonthInHeaderClick = useCallback(()=>{
+        setHeaderState(EHeaderState.SELECT_MONTH);
+    }, []);
+    const handleYearInHeaderClick = useCallback(()=>{
+        setHeaderState(EHeaderState.SELECT_YEAR);
+    }, []);
+    useEffect(()=>{
+        if (parsedSelectedDate && setInitialDateIntoInput) {
+            const formattedTime = format(parsedSelectedDate, formatter.time.format);
+            setTime(formattedTime);
+            changeInputValue(dateToString(parsedSelectedDate, {
+                withTime: timeInputEnabled
+            }));
+        }
+        if (!parsedSelectedDate && !setInitialDateIntoInput && !isInputFocused) changeInputValue('');
+    }, [
+        parsedSelectedDate,
+        setInitialDateIntoInput,
+        isInputFocused,
+        formatter
+    ]);
+    useEffect(()=>{
+        if (!pickerRef.current?.state.open) {
+            cords.current[0] = 0;
+            cords.current[1] = 0;
+        }
+    }, [
+        pickerRef
+    ]);
+    const needShowPresets = !!presets.length;
+    const needShowTimeBlock = showTime && headerState === EHeaderState.DEFAULT;
+    const needShowTimeInput = needShowTimeBlock && timeInputEnabled;
+    const needShowTimeToggle = needShowTimeBlock && !isTimeRequired;
+    const getLastFocusableElement = ()=>{
+        if (needShowPresets) return FocusableElement.Preset;
+        if (needShowTimeInput) return FocusableElement.TimeInput;
+        if (needShowTimeToggle) return FocusableElement.TimeToggle;
+        return FocusableElement.RightArrow;
+    };
+    const lastFocusableElement = getLastFocusableElement();
+    const value = useMemo(()=>({
+            label: presetsLabel ?? '',
+            items: presets,
+            headerState,
+            onSelect: (presetsDate)=>{
+                const { date, time: newTime } = setTimeToDate(presetsDate, time, defaultTime);
+                handleDatepickerChange(date, !!newTime);
+            },
+            lastButtonRef: lastFocusableElement === FocusableElement.Preset ? mergeRefs([
+                lastElementRef ?? null
+            ]) : void 0
+        }), [
+        presetsLabel,
+        presets,
+        headerState,
+        lastFocusableElement,
+        lastElementRef,
+        time,
+        defaultTime,
+        handleDatepickerChange
+    ]);
+    useEffect(()=>{
+        if (parsedSelectedDate && !refIsFocused.current) {
+            pickerRef.current?.setPreSelection(parsedSelectedDate);
+            const dateToStringOptions = {
+                withTime: showTime && (isTimeRequired || selectTime)
+            };
+            changeInputValue(dateToString(parsedSelectedDate, dateToStringOptions));
+            const formattedTime = format(parsedSelectedDate, formatter.time.format);
+            setTime(formattedTime);
+        }
+    }, [
+        prepareChangedDate(parsedSelectedDate)?.getTime(),
+        showTime,
+        localeFormat,
+        formatter
+    ]);
+    const { isPositionStart, isPositionEnd } = useMemo(()=>({
+            isPositionStart: 'start' === iconPosition,
+            isPositionEnd: 'end' === iconPosition
+        }), [
+        iconPosition
+    ]);
+    const calendarIcon = showIcon && /*#__PURE__*/ jsx("div", {
+        className: cn('react-datepicker-icon', isInputFocused && 'react-datepicker-icon--hovered', isPositionStart && 'react-datepicker-icon--start', isPositionEnd && 'react-datepicker-icon--end'),
+        children: icon
+    });
+    const inputClassName = cn('react-datepicker-searchInput', isValidationError || error ? 'react-datepicker-error' : void 0, withErrorBackground ? 'react-datepicker--withErrorBackground' : void 0, !showIcon && 'react-datepicker-searchInput--withoutIcon', showIcon && isPositionStart && 'react-datepicker-searchInput--iconStart', showIcon && isPositionEnd && 'react-datepicker-searchInput--iconEnd', fitInput && !(showTime && timeInputEnabled) && 'react-datepicker-searchInput--fitWithoutTime', inputClassNameProp);
+    const defaultValue = parsedSelectedDate && setInitialDateIntoInput ? dateToString(parsedSelectedDate, {
+        withTime: timeInputEnabled
+    }) : '';
+    const customInput = /*#__PURE__*/ jsxs("div", {
+        children: [
+            isPositionStart && calendarIcon,
+            /*#__PURE__*/ jsx(react_input_mask, {
+                ref: (element)=>{
+                    inputRef.current = element;
+                    if (!parentInputRef || !element) return;
+                    if ('function' == typeof parentInputRef) return void parentInputRef(element.getInputDOMNode());
+                    parentInputRef.current = element.getInputDOMNode();
+                },
+                id: inputId,
+                type: "text",
+                onPaste: handleInputPaste,
+                onChange: handleInputChange,
+                onBlur: handleInputBlur,
+                onFocus: handleInputFocus,
+                onKeyDown: handleInputKeyDown,
+                onKeyUp: onInputKeyUp,
+                mask: getDateInputMask(),
+                className: inputClassName,
+                disabled: disabled,
+                placeholder: placeholder,
+                "data-test-id": testId ? `${testId}-input` : '',
+                defaultValue: defaultValue
+            }),
+            isPositionEnd && calendarIcon
+        ]
+    });
+    const calendarContainer = needShowPresets ? PresetsContainer : void 0;
+    const calendar = /*#__PURE__*/ jsx(PresetsContext.Provider, {
+        value: value,
+        children: /*#__PURE__*/ jsxs("div", {
+            "data-test-id": testId ? testId : '',
+            className: "react-datepicker-wrapper",
+            children: [
+                label && !inline && /*#__PURE__*/ jsx(Label, {
+                    label: label,
+                    required: required,
+                    testId: testId,
+                    htmlFor: inputId
+                }),
+                /*#__PURE__*/ jsx(DatePicker, {
+                    yearItemNumber: 'top-start' === placement ? 15 : 12,
+                    popperClassName: cn(popperClassName || '', 'top-start' === placement || 'top-end' === placement ? 'react-datepicker-popper--upper-position' : ''),
+                    showPopperArrow: false,
+                    popperPlacement: "bottom-start",
+                    popperModifiers: [
+                        {
+                            name: 'offset',
+                            fn (state) {
+                                const { x, y, placement } = state;
+                                const offset = placement.includes('bottom') ? -9 : 9;
+                                return {
+                                    x,
+                                    y: y + offset
+                                };
+                            }
+                        },
+                        {
+                            name: 'flip',
+                            fn (state) {
+                                if (0 === cords.current[0] && 0 === cords.current[1]) {
+                                    cords.current[0] = state.x;
+                                    cords.current[1] = state.y;
+                                    setPlacement(state.placement);
+                                }
+                                return {
+                                    ...cords,
+                                    x: cords.current[0],
+                                    y: cords.current[1]
+                                };
+                            }
+                        }
+                    ],
+                    disabledKeyboardNavigation: true,
+                    calendarClassName: cn('react-datepicker-self', frameless && 'react-datepicker-self-framless'),
+                    ref: pickerRef,
+                    selected: startDate,
+                    onCalendarClose: handleCalendarClose,
+                    calendarStartDay: START_CALENDAR_FROM_MONDAY,
+                    dateFormat: formatter.date.format,
+                    renderMonthContent: renderMonthContent,
+                    renderYearContent: renderYearContent,
+                    showMonthYearPicker: headerState === EHeaderState.SELECT_MONTH,
+                    showYearPicker: headerState === EHeaderState.SELECT_YEAR,
+                    renderDayContents: renderDayContents,
+                    yearDropdownItemNumber: 15,
+                    portalId: portalId,
+                    disabled: disabled,
+                    inline: inline,
+                    customInput: customInput,
+                    renderCustomHeader: ({ date, decreaseMonth, decreaseYear, increaseMonth, increaseYear, prevMonthButtonDisabled, nextMonthButtonDisabled })=>{
+                        const onIncrease = headerState === EHeaderState.DEFAULT ? increaseMonth : increaseYear;
+                        const onDecrease = headerState === EHeaderState.DEFAULT ? decreaseMonth : decreaseYear;
+                        const shouldRenderMonthHeader = headerState === EHeaderState.DEFAULT;
+                        return /*#__PURE__*/ jsxs("div", {
+                            className: "react-datepicker-header-wrapper",
+                            children: [
+                                /*#__PURE__*/ jsx(LeftArrow, {
+                                    onDecrease: onDecrease,
+                                    disabled: prevMonthButtonDisabled,
+                                    headerState: headerState,
+                                    testId: testId ? `${testId}-left-arrow` : ''
+                                }),
+                                shouldRenderMonthHeader ? /*#__PURE__*/ jsx(MonthHeader, {
+                                    date: date,
+                                    lang: lang,
+                                    onClick: handleMonthInHeaderClick,
+                                    testId: testId ? `${testId}-month-header` : ''
+                                }) : /*#__PURE__*/ jsx(YearHeader, {
+                                    date: date,
+                                    onClick: handleYearInHeaderClick,
+                                    testId: testId ? `${testId}-year-header` : ''
+                                }),
+                                /*#__PURE__*/ jsx(RightArrow, {
+                                    buttonRef: lastFocusableElement === FocusableElement.RightArrow ? mergeRefs([
+                                        lastElementRef ?? null
+                                    ]) : void 0,
+                                    onIncrease: onIncrease,
+                                    disabled: nextMonthButtonDisabled,
+                                    headerState: headerState,
+                                    testId: testId ? `${testId}-right-arrow` : ''
+                                })
+                            ]
+                        });
+                    },
+                    calendarContainer: calendarContainer,
+                    children: needShowTimeBlock ? /*#__PURE__*/ jsxs("div", {
+                        className: "react-datepicker__input-time-container",
+                        children: [
+                            needShowTimeToggle && /*#__PURE__*/ jsx(Toggle, {
+                                testId: testId ? `${testId}-time-toggle` : '',
+                                ref: lastFocusableElement === FocusableElement.TimeToggle ? mergeRefs([
+                                    lastElementRef ?? null
+                                ]) : void 0,
+                                label: showTimeText,
+                                checked: selectTime,
+                                onChange: ()=>setSelectTime((prev)=>!prev)
+                            }),
+                            needShowTimeInput ? /*#__PURE__*/ jsx(TimeInput, {
+                                inputRef: lastFocusableElement === FocusableElement.TimeInput ? mergeRefs([
+                                    lastElementRef ?? null
+                                ]) : void 0,
+                                value: time,
+                                onChange: setTime,
+                                onDateChange: handleDatepickerChange,
+                                dateValueString: inputRef.current?.getInputDOMNode().value ?? '',
+                                testId: testId ? `${testId}-time-input` : '',
+                                localeFormat: localeFormat,
+                                dateTimeFormatOptions: dateTimeFormatOptions
+                            }) : null
+                        ]
+                    }) : null
+                }),
+                helperText && !inline && /*#__PURE__*/ jsx(HelperText, {
+                    text: helperText,
+                    error: error && !disabled,
+                    testId: testId
+                })
+            ]
+        })
+    });
+    if (customRender) return customRender({
+        input: customInput,
+        calendar
+    });
+    return calendar;
+};
+export { Datepicker, EHeaderState };

package/dist/components/Datepicker/Datepicker.types.d.ts

@@ -0,0 +1,12 @@
+import type { ValueOf } from '../../common/types';
+export declare const EHeaderState: {
+    readonly DEFAULT: "DEFAULT";
+    readonly SELECT_MONTH: "SELECT_MONTH";
+    readonly SELECT_YEAR: "SELECT_YEAR";
+};
+export type HeaderStateValue = ValueOf<typeof EHeaderState>;
+export type TLocaleFormat = string;
+export interface TPickerPreset {
+    value: Date;
+    label: string;
+}

package/dist/components/Datepicker/Datepicker.types.js

@@ -0,0 +1,6 @@
+const EHeaderState = {
+    DEFAULT: 'DEFAULT',
+    SELECT_MONTH: 'SELECT_MONTH',
+    SELECT_YEAR: 'SELECT_YEAR'
+};
+export { EHeaderState };

package/dist/components/Datepicker/components/DatepickerContent/DayContent/DayContent.d.ts

@@ -0,0 +1,9 @@
+import { type IHasTestId } from '../../../../../common/types';
+interface Props extends IHasTestId {
+    date: Date;
+    startDate: Date | undefined;
+    setStartDate: (date: Date) => void;
+    onAlreadySelectedClick: () => void;
+}
+export declare const DayContent: ({ date, setStartDate, startDate, onAlreadySelectedClick, testId, }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Datepicker/components/DatepickerContent/DayContent/DayContent.js

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import { getDate } from "date-fns/getDate";
+import { cn } from "../../../../../common/css/cn.js";
+import { Text } from "../../../../Text/Text.js";
+const DayContent = ({ date, setStartDate, startDate, onAlreadySelectedClick, testId })=>{
+    const isAlreadySelected = date.getMonth() === startDate?.getMonth() && date.getDay() === startDate?.getDay() && date.getFullYear() === startDate?.getFullYear();
+    const handleClick = ()=>{
+        setStartDate(date);
+        if (isAlreadySelected) onAlreadySelectedClick();
+    };
+    return /*#__PURE__*/ jsx(Text.Body, {
+        className: cn(!startDate && 'react-datepicker__ignore-today'),
+        onClick: handleClick,
+        testId: testId,
+        children: getDate(date)
+    });
+};
+export { DayContent };

package/dist/components/Datepicker/components/DatepickerContent/MonthContent/MonthContent.d.ts

@@ -0,0 +1,13 @@
+import { type Dispatch, type MutableRefObject, type SetStateAction } from 'react';
+import { type IHasTestId } from '../../../../../common/types';
+import type { LanguageValue } from '../../../../../context';
+import { type HeaderStateValue } from '../../../Datepicker.types';
+interface Props extends IHasTestId {
+    lang: LanguageValue;
+    month: number;
+    day: Date;
+    pickerRef: MutableRefObject<any>;
+    setHeaderState: Dispatch<SetStateAction<HeaderStateValue>>;
+}
+export declare const MonthContent: ({ lang, month, day, pickerRef, setHeaderState, testId, }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Datepicker/components/DatepickerContent/MonthContent/MonthContent.js

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import { Text } from "../../../../Text/Text.js";
+import { EHeaderState } from "../../../Datepicker.types.js";
+import { getSingleMonthLabelByLocale, prevent } from "../../../utils/index.js";
+const MonthContent = ({ lang, month, day, pickerRef, setHeaderState, testId })=>{
+    const monthLabel = getSingleMonthLabelByLocale(lang)[month];
+    return /*#__PURE__*/ jsx(Text.Body, {
+        className: "react-datepicker__month-menu-item",
+        onClick: (e)=>{
+            prevent(e);
+            const newDate = new Date(day);
+            newDate.setMonth(month);
+            if (pickerRef.current) pickerRef.current.setPreSelection(newDate);
+            setHeaderState(EHeaderState.DEFAULT);
+        },
+        testId: testId,
+        children: monthLabel
+    });
+};
+export { MonthContent };

package/dist/components/Datepicker/components/DatepickerContent/YearContent/YearContent.d.ts

@@ -0,0 +1,10 @@
+import type { Dispatch, MutableRefObject, SetStateAction } from 'react';
+import { type IHasTestId } from '../../../../../common/types';
+import { type HeaderStateValue } from '../../../Datepicker.types';
+interface Props extends IHasTestId {
+    pickerRef: MutableRefObject<any>;
+    setHeaderState: Dispatch<SetStateAction<HeaderStateValue>>;
+    year: number;
+}
+export declare const YearContent: ({ pickerRef, setHeaderState, year, testId, }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};