@moysklad/uikit 30.4.0 → 31.20.0

package/dist/components/DateRange/hooks/useDateRangeValue.js

@@ -0,0 +1,173 @@
+import { useEffect, useMemo, useState } from "react";
+import { ELanguages } from "../../../context/index.js";
+import { useLocaleContext } from "../../../context/contexts/LocaleContext.js";
+import { CalendarVariant, FOCUSED_WIDTH_WITHOUT_TIME, FOCUSED_WIDTH_WITH_TIME, FOCUSED_WIDTH_WITH_TIME_EN, INPUT_CONTENT_VARIANTS, NAVIGATION_VARIANTS, getDefaultVariant } from "../consts.js";
+import { formatDateRangeValue, getDateRangePeriodName, getDateRangeSliderText } from "../formatDateRangeValue.js";
+import { LocaleKey, useLocale } from "../locale/index.js";
+import { getPeriodValue, isAnyDateValue, isDayValue, isMonthValue, isNoDateValue, isRangeValue, isTimeDefault, isValueNullable, isValuePeriod, isWeekValue, normalizeValue } from "../utils.js";
+import { useCalendar } from "./useCalendar.js";
+import { useMaskInput } from "./useMaskInput.js";
+import { useMonthList } from "./useMonthList.js";
+const useDateRangeValue = ({ value: valueProp, onChange, minDate, maxDate, withPeriod, withAnyDate, withNoDate, withTimeSelection, withClearButton, disabled, quickFilter })=>{
+    const { lang } = useLocaleContext();
+    const dateRangeLocale = useLocale('DateRange');
+    const dateRangeFormatLocale = useLocale('DateRange', LocaleKey.Locale);
+    const features = useMemo(()=>({
+            withPeriod,
+            withAnyDate,
+            withNoDate,
+            withTimeSelection,
+            withClearButton,
+            quickFilter
+        }), [
+        withAnyDate,
+        withClearButton,
+        withNoDate,
+        withPeriod,
+        withTimeSelection,
+        quickFilter
+    ]);
+    const defaultType = getDefaultVariant(features);
+    const rawValue = valueProp ?? {
+        type: defaultType,
+        value: defaultType === CalendarVariant.period ? [
+            void 0,
+            void 0
+        ] : null
+    };
+    const value = normalizeValue(rawValue, features);
+    const [withTime, setWithTime] = useState(false);
+    const handlePickDates = (nextValue)=>{
+        if (!isRangeValue(nextValue) && !isDayValue(nextValue) && !isWeekValue(nextValue) && !isMonthValue(nextValue)) return;
+        onChange?.(nextValue);
+    };
+    const calendar = useCalendar({
+        value,
+        minDate,
+        maxDate,
+        onChangeValue: handlePickDates
+    });
+    const monthList = useMonthList({
+        minDate: calendar.minDate
+    });
+    const inputMaskValue = useMaskInput({
+        withTime,
+        value,
+        onChangeValue: onChange,
+        scrollToMonthHandler: monthList.scrollToMonth
+    });
+    useEffect(()=>{
+        if (!valueProp) return void inputMaskValue.changeValue('');
+        if (valueProp && isRangeValue(valueProp)) {
+            const timeDefault = isTimeDefault(valueProp.value);
+            const showTime = !timeDefault || void 0;
+            inputMaskValue.changeInterval(valueProp, showTime);
+        }
+    }, [
+        valueProp
+    ]);
+    const needMaskInput = false !== features.withPeriod && value.type === CalendarVariant.period;
+    const needInputContent = INPUT_CONTENT_VARIANTS.includes(value.type);
+    const getClearValue = ()=>{
+        if (false !== features.withPeriod) return {
+            type: CalendarVariant.period,
+            value: [
+                null,
+                null
+            ]
+        };
+        return {
+            type: CalendarVariant.day,
+            value: null
+        };
+    };
+    const handleClickOnClearButton = ()=>{
+        onChange?.(getClearValue());
+        inputMaskValue.clear();
+    };
+    const handleClickPrevButton = ()=>{
+        const newValue = monthList.getActionHandler('prev')(value);
+        onChange?.(newValue);
+    };
+    const handleClickNextButton = ()=>{
+        const newValue = monthList.getActionHandler('next')(value);
+        onChange?.(newValue);
+    };
+    const isFilled = ()=>{
+        if (!valueProp) return false;
+        if (isValuePeriod(valueProp.value)) {
+            const { startDate, endDate } = getPeriodValue(valueProp.value);
+            return !(null === startDate && null === endDate);
+        }
+        if (isAnyDateValue(valueProp) || isNoDateValue(valueProp)) return true;
+        return null !== valueProp.value;
+    };
+    const getFocusedWidth = ()=>{
+        if (!withTime) return FOCUSED_WIDTH_WITHOUT_TIME;
+        if (lang === ELanguages.EN) return FOCUSED_WIDTH_WITH_TIME_EN;
+        return FOCUSED_WIDTH_WITH_TIME;
+    };
+    const isInputContentButtonsDisabled = ()=>{
+        if (disabled) return true;
+        return isValueNullable(value);
+    };
+    const handleChangeWithTime = (withTimeArg, options)=>{
+        setWithTime(withTimeArg);
+        if (withTimeArg && !options?.notChangeInputMask) return void inputMaskValue.showTime();
+        if (!options?.notChangeInputMask) inputMaskValue.hideTime();
+    };
+    useEffect(()=>{
+        if (!withTime && valueProp && isValuePeriod(valueProp.value)) {
+            const timeDefault = isTimeDefault(valueProp.value);
+            if (!timeDefault) handleChangeWithTime(true, {
+                notChangeInputMask: true
+            });
+        }
+    }, [
+        valueProp
+    ]);
+    const localeOptions = {
+        translates: dateRangeLocale,
+        lang,
+        formatTranslates: dateRangeFormatLocale
+    };
+    const formattedValue = formatDateRangeValue(value, {
+        ...localeOptions,
+        withTime,
+        periodFormattedValue: needMaskInput ? inputMaskValue.value : void 0,
+        emptyPeriodMaskValue: inputMaskValue.emptyRangeMaskInputValue
+    });
+    const sliderText = getDateRangeSliderText(value, localeOptions);
+    const showNavigationArrows = NAVIGATION_VARIANTS.includes(value.type);
+    return {
+        valueProp,
+        value,
+        withTime,
+        features,
+        needMaskInput,
+        needInputContent,
+        calendar,
+        monthList,
+        inputMaskValue,
+        getClearValue,
+        handleClickOnClearButton,
+        handleClickPrevButton,
+        handleClickNextButton,
+        handleChangeWithTime,
+        isFilled,
+        getFocusedWidth,
+        isInputContentButtonsDisabled,
+        formattedValue,
+        sliderText,
+        periodName: getDateRangePeriodName(value, dateRangeLocale),
+        showNavigationArrows,
+        withPeriod,
+        withAnyDate,
+        withNoDate,
+        withTimeSelection,
+        withClearButton,
+        quickFilter,
+        onChange
+    };
+};
+export { useDateRangeValue };

package/dist/components/DateRange/hooks/useMaskInput.d.ts

@@ -0,0 +1,18 @@
+import type { DateRangeRangeValue, DateRangeValue } from '../types';
+interface UseMaskInputArgs {
+    value: DateRangeValue;
+    withTime: boolean;
+    onChangeValue?: (value: DateRangeRangeValue) => void;
+    scrollToMonthHandler?: (date: Date) => void;
+}
+export declare const useMaskInput: (args: UseMaskInputArgs) => {
+    value: string;
+    inputMask: string;
+    emptyRangeMaskInputValue: string;
+    changeValue: (value: string) => void;
+    showTime: () => void;
+    hideTime: () => void;
+    clear: () => void;
+    changeInterval: (options: DateRangeRangeValue, withTime?: boolean) => void;
+};
+export {};

package/dist/components/DateRange/hooks/useMaskInput.js

@@ -0,0 +1,169 @@
+import { useEffect, useState } from "react";
+import { format, isBefore, isEqual, isValid, parse } from "date-fns";
+import { joinFormattedDateRange, splitFormattedDateRange } from "../formatDateRangeValue.js";
+import { LocaleKey, useLocale } from "../locale/index.js";
+import { getEndOfDay, getPeriodValue, getRangeDates as external_utils_js_getRangeDates, getStartOfDay, isRangeValue } from "../utils.js";
+const getEmptyMask = (withTime, translates)=>withTime ? translates.format.emptyDate.withTime : translates.format.emptyDate.withoutTime;
+const isDateValuesEqual = (value1, value2)=>{
+    if (value1 && value2) return isEqual(value1, value2);
+    return value1 === value2;
+};
+const useMaskInput = (args)=>{
+    const translates = useLocale('DateRange', LocaleKey.Locale);
+    const getDateFormat = (withTime)=>withTime ? translates.format.dateWithTimeFormat : translates.format.dateFormat;
+    const inputMask = args.withTime ? joinFormattedDateRange(translates.format.inputMask.withTime, translates.format.inputMask.withTime) : joinFormattedDateRange(translates.format.inputMask.withoutTime, translates.format.inputMask.withoutTime);
+    const formatDate = (date, withTime)=>{
+        const timeString = format(date, 'HH:mm');
+        return `${format(date, translates.format.dateFormat)}${withTime ? ` ${timeString}` : ''}`;
+    };
+    const getFormatedDate = (date, withTime = false)=>date ? formatDate(date, withTime) : getEmptyMask(withTime, translates);
+    const getRangeDates = (options, withTime)=>{
+        const { startDate, endDate } = getPeriodValue(options.value);
+        const formatedStartDate = getFormatedDate(startDate, withTime);
+        const formatedEndDate = getFormatedDate(endDate, withTime);
+        return {
+            startDate: formatedStartDate,
+            endDate: formatedEndDate
+        };
+    };
+    const [inputMaskValue, setInputMaskValue] = useState(()=>{
+        if (!isRangeValue(args.value)) return '';
+        const { startDate, endDate } = getPeriodValue(args.value.value);
+        if (!startDate && !endDate) return '';
+        const range = getRangeDates(args.value, args.withTime);
+        return joinFormattedDateRange(range.startDate, range.endDate);
+    });
+    const emptyMask = getEmptyMask(args.withTime, translates);
+    const emptyRangeMask = joinFormattedDateRange(emptyMask, emptyMask);
+    const parseDate = (dateString, withTime = args.withTime)=>{
+        if (!dateString) return null;
+        if (dateString.includes('_')) return null;
+        return parse(dateString, getDateFormat(withTime), new Date());
+    };
+    const isInvalidInterval = (startDate, endDate)=>isBefore(endDate, startDate);
+    const getParsedDate = (dateString)=>{
+        const isDateStringDirty = dateString !== emptyMask && dateString.includes('_');
+        const date = isDateStringDirty ? void 0 : parseDate(dateString);
+        const isInvalidDate = !!date && !isValid(date);
+        return {
+            date: isInvalidDate ? null : date,
+            isInvalidDate
+        };
+    };
+    const getStartOfDayIfWithoutTime = (date)=>{
+        if (args.withTime) return date;
+        return getStartOfDay(date);
+    };
+    const getEndOfDayIfWithoutTime = (date)=>{
+        if (args.withTime) return date;
+        return getEndOfDay(date);
+    };
+    const changeDatesHandler = (handlerArgs)=>{
+        if (args.value && isRangeValue(args.value)) {
+            const { startDate, endDate } = external_utils_js_getRangeDates(args.value);
+            if (isDateValuesEqual(startDate, handlerArgs.startDate) && isDateValuesEqual(endDate, handlerArgs.endDate)) return;
+        }
+        args.onChangeValue?.({
+            type: 'period',
+            value: [
+                getStartOfDayIfWithoutTime(handlerArgs.startDate),
+                getEndOfDayIfWithoutTime(handlerArgs.endDate)
+            ]
+        });
+    };
+    const scrollToOnceDate = (period)=>{
+        const dateToScroll = period.endDate ?? period.startDate;
+        if (dateToScroll) args.scrollToMonthHandler?.(dateToScroll);
+    };
+    const changeValueArg = (value)=>{
+        const { startDate: startDateString, endDate: endDateString } = splitFormattedDateRange(value);
+        if (!startDateString || !endDateString) return;
+        const { date: startDate, isInvalidDate: isInvalidStartDate } = getParsedDate(startDateString);
+        const { date: endDate, isInvalidDate: isInvalidEndDate } = getParsedDate(endDateString);
+        if (isInvalidStartDate || isInvalidEndDate) return void args.onChangeValue?.({
+            type: 'period',
+            value: [
+                getStartOfDayIfWithoutTime(startDate),
+                getEndOfDayIfWithoutTime(endDate)
+            ]
+        });
+        if (startDate && endDate && isInvalidInterval(startDate, endDate)) {
+            changeDatesHandler?.({
+                startDate: endDate,
+                endDate: startDate
+            });
+            args.scrollToMonthHandler?.(startDate);
+            return;
+        }
+        const period = {
+            startDate,
+            endDate
+        };
+        if (startDate && endDate) args.scrollToMonthHandler?.(endDate);
+        else scrollToOnceDate(period);
+        changeDatesHandler?.(period);
+    };
+    const changeValue = (value)=>{
+        setInputMaskValue(value);
+        changeValueArg(value);
+    };
+    const showTime = ()=>{
+        if (!isRangeValue(args.value)) return;
+        const { startDate, endDate } = external_utils_js_getRangeDates(args.value);
+        const { startDate: startDateWithoutTimeString, endDate: endDateWithoutTimeString } = splitFormattedDateRange(inputMaskValue || emptyRangeMask);
+        const startTime = startDate && isValid(startDate) ? '00:00' : '__:__';
+        const endTime = endDate && isValid(endDate) ? '23:59' : '__:__';
+        const startDateString = `${startDateWithoutTimeString} ${startTime}`;
+        const endDateString = `${endDateWithoutTimeString} ${endTime}`;
+        setInputMaskValue(joinFormattedDateRange(startDateString, endDateString));
+    };
+    const hideTime = ()=>{
+        if (!isRangeValue(args.value)) return;
+        const { startDate: startDateWithTimeString, endDate: endDateWithTimeString } = splitFormattedDateRange(inputMaskValue);
+        const [startDateString] = startDateWithTimeString.split(' ');
+        const [endDateString] = endDateWithTimeString.split(' ');
+        const parsedStartDate = getStartOfDay(parseDate(startDateString, false));
+        const parsedEndDate = getEndOfDay(parseDate(endDateString, false));
+        const startDateValue = parsedStartDate && isValid(parsedStartDate) ? parsedStartDate : args.value.value[0];
+        const endDateValue = parsedEndDate && isValid(parsedEndDate) ? parsedEndDate : args.value.value[1];
+        args.onChangeValue?.({
+            type: 'period',
+            value: [
+                startDateValue,
+                endDateValue
+            ]
+        });
+        setInputMaskValue(joinFormattedDateRange(startDateString, endDateString));
+    };
+    const clear = ()=>{
+        setInputMaskValue('');
+    };
+    const changeInterval = (options, withTime)=>{
+        const range = getRangeDates(options, withTime ?? args.withTime);
+        setInputMaskValue((inputMaskOldValue)=>{
+            const { startDate: startDateString, endDate: endDateString } = splitFormattedDateRange(inputMaskOldValue);
+            const { startDate, endDate } = getPeriodValue(options.value);
+            if (!startDate && !endDate && !endDateString && !startDateString) return '';
+            if (void 0 === startDate && !startDateString || void 0 === endDate && !endDateString) return '';
+            const formatedStartDate = void 0 === startDate ? startDateString : range.startDate;
+            const formatedEndDate = void 0 === endDate ? endDateString : range.endDate;
+            return joinFormattedDateRange(formatedStartDate, formatedEndDate);
+        });
+    };
+    useEffect(()=>{
+        if (isRangeValue(args.value)) changeInterval(args.value);
+    }, [
+        translates
+    ]);
+    return {
+        value: inputMaskValue,
+        inputMask,
+        emptyRangeMaskInputValue: emptyRangeMask,
+        changeValue,
+        showTime,
+        hideTime,
+        clear,
+        changeInterval
+    };
+};
+export { useMaskInput };

package/dist/components/DateRange/hooks/useMonthList.d.ts

@@ -0,0 +1,12 @@
+import type { VirtuosoHandle } from 'react-virtuoso';
+import type { DateRangeValue } from '../types';
+interface UseMonthListArgs {
+    minDate: Date;
+}
+type Action = 'prev' | 'next';
+export declare const useMonthList: (args: UseMonthListArgs) => {
+    virtuosoRef: import("react").RefObject<VirtuosoHandle>;
+    getActionHandler: (action: Action) => (value: DateRangeValue) => DateRangeValue;
+    scrollToMonth: (date: Date) => void;
+};
+export {};

package/dist/components/DateRange/hooks/useMonthList.js

@@ -0,0 +1,80 @@
+import { useRef } from "react";
+import { addDays, addMonths, addWeeks, differenceInMonths, differenceInYears, endOfMonth, endOfWeek, startOfMonth, startOfWeek, subDays, subMonths, subWeeks } from "date-fns";
+import { getRangeDates, isDayValue, isMonthValue, isWeekValue } from "../utils.js";
+const getNewDateForDayMode = (action, oldDate)=>'next' === action ? addDays(oldDate, 1) : subDays(oldDate, 1);
+const getNewStartDateForWeekMode = (action, oldDate)=>'next' === action ? startOfWeek(addWeeks(oldDate, 1), {
+        weekStartsOn: 1
+    }) : startOfWeek(subWeeks(oldDate, 1), {
+        weekStartsOn: 1
+    });
+const getWeekEndDate = (startDate)=>endOfWeek(startDate, {
+        weekStartsOn: 1
+    });
+const getNewStartDateForMonthMode = (action, oldDate)=>'next' === action ? startOfMonth(addMonths(oldDate, 1)) : startOfMonth(subMonths(oldDate, 1));
+const getMonthEndDate = (startDate)=>endOfMonth(startDate);
+const useMonthList = (args)=>{
+    const virtuosoRef = useRef(null);
+    const scrollToMonth = (date)=>{
+        const monthIndex = differenceInMonths(date, args.minDate);
+        virtuosoRef.current?.scrollToIndex({
+            index: monthIndex,
+            align: 'center'
+        });
+    };
+    const scrollToYear = (date)=>{
+        const yearIndex = differenceInYears(date, args.minDate);
+        virtuosoRef.current?.scrollToIndex({
+            index: yearIndex,
+            align: 'center'
+        });
+    };
+    const getDayActionHandler = (action, options)=>{
+        if (!options.value) return options;
+        const newDate = getNewDateForDayMode(action, options.value);
+        scrollToMonth(newDate);
+        return {
+            ...options,
+            value: newDate
+        };
+    };
+    const getWeekActionHandler = (action, value)=>{
+        const { startDate, endDate } = getRangeDates(value);
+        if (!startDate || !endDate) return value;
+        const newStartDate = getNewStartDateForWeekMode(action, startDate);
+        const newEndDate = getWeekEndDate(newStartDate);
+        scrollToMonth(newEndDate);
+        return {
+            ...value,
+            value: [
+                newStartDate,
+                newEndDate
+            ]
+        };
+    };
+    const getMonthActionHandler = (action, value)=>{
+        const { startDate, endDate } = getRangeDates(value);
+        if (!startDate || !endDate) return value;
+        const newStartDate = getNewStartDateForMonthMode(action, startDate);
+        const newEndDate = getMonthEndDate(newStartDate);
+        scrollToYear(newEndDate);
+        return {
+            ...value,
+            value: [
+                newStartDate,
+                newEndDate
+            ]
+        };
+    };
+    const getActionHandler = (action)=>(value)=>{
+            if (isDayValue(value)) return getDayActionHandler(action, value);
+            if (isWeekValue(value)) return getWeekActionHandler(action, value);
+            if (isMonthValue(value)) return getMonthActionHandler(action, value);
+            return value;
+        };
+    return {
+        virtuosoRef,
+        getActionHandler,
+        scrollToMonth
+    };
+};
+export { useMonthList };

package/dist/components/DateRange/hooks/useSideMenu.d.ts

@@ -0,0 +1,14 @@
+import type { DateRangeValue, DateSelectVariant } from '../types';
+interface UseSideMenuArgs {
+    value: DateRangeValue;
+    requiredDate?: boolean;
+    onChangeValue?: (value: DateRangeValue) => void;
+    handleScrollToMoth?: (date: Date) => void;
+}
+export declare const useSideMenu: (args: UseSideMenuArgs) => {
+    changeVariantHandler: (variant: DateSelectVariant) => void;
+    yesterdayButtonClickHandler: () => void;
+    todayButtonClickHandler: () => void;
+    tomorrowButtonClickHandler: () => void;
+};
+export {};

package/dist/components/DateRange/hooks/useSideMenu.js

@@ -0,0 +1,113 @@
+import { addDays, startOfDay, subDays } from "date-fns";
+import { CalendarVariant } from "../consts.js";
+import { getCorrectInterval, getEndOfDay, getRequiredDateRangeValue, getStartOfDay, isDayValue, isRangeValue, isValuePeriod } from "../utils.js";
+const getCorrentRangeDates = (value)=>{
+    const [startDate, endDate] = value;
+    return startDate && endDate ? getCorrectInterval(startDate, endDate) : [
+        null,
+        null
+    ];
+};
+const useSideMenu = (args)=>{
+    const changeModeOnPeriodWhenValueIsRange = (value)=>{
+        const interval = getCorrentRangeDates(value);
+        args.onChangeValue?.({
+            type: CalendarVariant.period,
+            value: interval
+        });
+    };
+    const changeModeOnPeriod = ()=>{
+        if (isRangeValue(args.value)) return;
+        if (isValuePeriod(args.value.value)) return void changeModeOnPeriodWhenValueIsRange(args.value.value);
+        args.onChangeValue?.({
+            type: CalendarVariant.period,
+            value: [
+                getStartOfDay(args.value.value),
+                getEndOfDay(args.value.value)
+            ]
+        });
+    };
+    const applyRequiredVariantValue = (variant)=>{
+        const emptyValue = 'day' === variant ? {
+            type: variant,
+            value: null
+        } : {
+            type: variant,
+            value: [
+                null,
+                null
+            ]
+        };
+        const requiredValue = getRequiredDateRangeValue(emptyValue);
+        if (!requiredValue) return false;
+        if (isDayValue(requiredValue) && requiredValue.value) args.handleScrollToMoth?.(requiredValue.value);
+        else if (isValuePeriod(requiredValue.value) && requiredValue.value[0]) args.handleScrollToMoth?.(requiredValue.value[0]);
+        args.onChangeValue?.(requiredValue);
+        return true;
+    };
+    const changeVariantHandler = (variant)=>{
+        switch(variant){
+            case 'period':
+                changeModeOnPeriod();
+                break;
+            case 'week':
+            case 'month':
+                if (args.requiredDate && applyRequiredVariantValue(variant)) break;
+                args.onChangeValue?.({
+                    type: variant,
+                    value: [
+                        null,
+                        null
+                    ]
+                });
+                break;
+            case 'day':
+                if (args.requiredDate && applyRequiredVariantValue(variant)) break;
+                args.onChangeValue?.({
+                    type: variant,
+                    value: null
+                });
+                break;
+            case 'anyDate':
+            case 'noDate':
+                args.onChangeValue?.({
+                    type: variant,
+                    value: null
+                });
+                break;
+            default:
+                throw new Error(`неизвестный вариант ${variant}`);
+        }
+    };
+    const yesterdayButtonClickHandler = ()=>{
+        const date = startOfDay(subDays(new Date(), 1));
+        args.handleScrollToMoth?.(date);
+        args.onChangeValue?.({
+            type: CalendarVariant.day,
+            value: date
+        });
+    };
+    const todayButtonClickHandler = ()=>{
+        const date = startOfDay(new Date());
+        args.handleScrollToMoth?.(date);
+        args.onChangeValue?.({
+            type: CalendarVariant.day,
+            value: date
+        });
+    };
+    const tomorrowButtonClickHandler = ()=>{
+        const date = startOfDay(addDays(new Date(), 1));
+        args.handleScrollToMoth?.(date);
+        args.onChangeValue?.({
+            type: CalendarVariant.day,
+            value: date
+        });
+    };
+    return {
+        changeVariantHandler,
+        yesterdayButtonClickHandler,
+        todayButtonClickHandler,
+        tomorrowButtonClickHandler
+    };
+};
+export { useSideMenu };

package/dist/components/DateRange/index.d.ts

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

package/dist/components/DateRange/index.js

@@ -0,0 +1 @@
+export * from "./DateRange.js";

package/dist/components/DateRange/locale/en-US.d.ts

@@ -0,0 +1,2 @@
+import type { Locale } from './types';
+export declare const enLocaleValues: Locale;

package/dist/components/DateRange/locale/en-US.js

@@ -0,0 +1,82 @@
+const enLocaleValues = {
+    DateRange: {
+        translate: {
+            radiobuttons: {
+                period: 'Period',
+                day: 'Day',
+                week: 'Week',
+                month: 'Month',
+                anyDate: 'Any date specified',
+                noDate: 'No date specified'
+            },
+            dayQuickFilters: {
+                yesterday: 'Yesterday',
+                today: 'Today',
+                tomorrow: 'Tomorrow'
+            },
+            footer: {
+                timeSelectionToggle: 'Set time',
+                timeSelectionToggleHint: 'Setting time is available only in period mode',
+                clearFilterButton: 'Clear filter'
+            },
+            slider: {
+                day: {
+                    title: 'Day',
+                    placeholder: 'Select day'
+                },
+                week: {
+                    title: 'Week',
+                    placeholder: 'Select week'
+                },
+                month: {
+                    title: 'Month',
+                    placeholder: 'Select month'
+                }
+            }
+        },
+        format: {
+            slider: {
+                day: {
+                    dateFormat: 'MMMM d, yyyy'
+                },
+                week: {
+                    dateFormat: {
+                        sameMonth: {
+                            firstDate: 'MMMM d',
+                            endDate: 'd, yyyy'
+                        },
+                        differentMonth: {
+                            firstDate: 'MMM d',
+                            endDate: 'MMM d, yyyy'
+                        }
+                    },
+                    tooltipDateFormat: {
+                        sameMonth: {
+                            firstDate: 'MMMM d',
+                            endDate: 'd, yyyy'
+                        },
+                        differentMonth: {
+                            firstDate: 'MMM d',
+                            endDate: 'MMM d, yyyy'
+                        }
+                    }
+                },
+                month: {
+                    dateFormat: 'LLLL yyyy'
+                }
+            },
+            dateFormat: 'MM/dd/yyyy',
+            monthCalendarFormat: 'LLL',
+            dateWithTimeFormat: 'MM/dd/yyyy HH:mm',
+            emptyDate: {
+                withTime: '__/__/____ __:__',
+                withoutTime: '__/__/____'
+            },
+            inputMask: {
+                withTime: '99/99/9999 99:99',
+                withoutTime: '99/99/9999'
+            }
+        }
+    }
+};
+export { enLocaleValues };

package/dist/components/DateRange/locale/index.d.ts

@@ -0,0 +1,4 @@
+export * from './en-US';
+export * from './ru-RU';
+export type { TranslateValues } from './types';
+export * from './useLocale';