@moysklad/uikit 28.1.0 → 31.20.0

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

@@ -0,0 +1,11 @@
+import { type RefObject } from 'react';
+import { type VirtuosoHandle } from 'react-virtuoso';
+import { type MonthProps } from '../Month';
+type PickedMonthProps = Pick<MonthProps, 'onSelectDate' | 'value'>;
+interface MonthListProps extends PickedMonthProps {
+    minDate: Date;
+    maxDate: Date;
+    virtuosoRef?: RefObject<VirtuosoHandle>;
+}
+export declare const MonthList: (props: MonthListProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/DateRange/MonthList/index.js

@@ -0,0 +1,91 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { Virtuoso } from "react-virtuoso";
+import { differenceInMonths, eachMonthOfInterval, getMonth, getYear } from "date-fns";
+import { cn } from "../../../common/css/index.js";
+import { Month } from "../Month/index.js";
+import { MonthHeader } from "../MonthHeader/index.js";
+import { getCorrectInterval, getFirstDayOfMonth, getPeriodValue, getRangeDates, isDayValue, isRangeValue, isValuePeriod, isWeekValue } from "../utils.js";
+import MonthList_module from "./MonthList.module.js";
+const getDateToScroll = (options)=>{
+    if (isValuePeriod(options.value)) {
+        const { startDate, endDate } = getPeriodValue(options.value);
+        if (startDate && endDate) return endDate;
+    }
+    if (isDayValue(options) && options.value) return options.value;
+    return new Date();
+};
+const MonthList = (props)=>{
+    const [hoverDate, setHoverDate] = useState();
+    const [hoveredWeekFirstDay, setHoveredWeekFirstDay] = useState();
+    const monthFirstDays = eachMonthOfInterval({
+        start: props.minDate,
+        end: props.maxDate
+    });
+    const currentDateIndex = useMemo(()=>{
+        const dateToScroll = getDateToScroll(props.value);
+        return differenceInMonths(dateToScroll, monthFirstDays[0]);
+    }, []);
+    useEffect(()=>{
+        if (!isRangeValue(props.value)) return void setHoverDate(void 0);
+        const { startDate, endDate } = getRangeDates(props.value);
+        if (startDate && endDate) setHoverDate(void 0);
+    }, [
+        props.value
+    ]);
+    const selectedInterval = useMemo(()=>{
+        if (!isRangeValue(props.value) && !isWeekValue(props.value)) return null;
+        const { startDate, endDate } = getRangeDates(props.value);
+        if (!startDate && !endDate) return null;
+        const selectedStartDate = startDate ?? hoverDate;
+        const selectedEndDate = endDate ?? hoverDate;
+        if (!selectedStartDate || !selectedEndDate) return {
+            startDateOfInterval: selectedStartDate,
+            endDateOfInterval: selectedEndDate
+        };
+        const [startDateOfInterval, endDateOfInterval] = getCorrectInterval(selectedStartDate, selectedEndDate);
+        return {
+            startDateOfInterval,
+            endDateOfInterval
+        };
+    }, [
+        hoverDate,
+        props.value
+    ]);
+    return /*#__PURE__*/ jsx(Virtuoso, {
+        ref: props.virtuosoRef,
+        className: MonthList_module.scrollContainer,
+        style: {
+            height: '300px'
+        },
+        totalCount: monthFirstDays.length,
+        initialTopMostItemIndex: {
+            index: currentDateIndex,
+            align: 'center'
+        },
+        itemContent: (index)=>{
+            const monthFirstDay = monthFirstDays[index];
+            const month = getMonth(monthFirstDay) + 1;
+            const year = getYear(monthFirstDay);
+            return /*#__PURE__*/ jsxs("div", {
+                className: cn(MonthList_module.month, 0 === index && MonthList_module.first),
+                children: [
+                    /*#__PURE__*/ jsx(MonthHeader, {
+                        date: getFirstDayOfMonth(year, month)
+                    }),
+                    /*#__PURE__*/ jsx(Month, {
+                        selectedInterval: selectedInterval,
+                        value: props.value,
+                        month: month,
+                        year: year,
+                        hoverWeekFirstDay: hoveredWeekFirstDay,
+                        onChangeHoverDate: setHoverDate,
+                        onChangeHoverWeekFirstDay: setHoveredWeekFirstDay,
+                        onSelectDate: props.onSelectDate
+                    })
+                ]
+            });
+        }
+    });
+};
+export { MonthList };

package/dist/components/DateRange/PeriodVariantList/PeriodVariantList.module.js

@@ -0,0 +1,9 @@
+import "./PeriodVariantList_module.css";
+const PeriodVariantList_module = {
+    optionContainer: "optionContainer-Y526xG",
+    option: "option-f1EC38",
+    selectDayButtons: "selectDayButtons-HBKcPU",
+    chip: "chip-ZZhKZB",
+    active: "active-YPxsPe"
+};
+export default PeriodVariantList_module;

package/dist/components/DateRange/PeriodVariantList/PeriodVariantList_module.css

@@ -0,0 +1,18 @@
+.optionContainer-Y526xG {
+  padding: 6px 12px;
+}
+
+.option-f1EC38, .selectDayButtons-HBKcPU {
+  align-items: center;
+  gap: 8px;
+  display: flex;
+}
+
+.chip-ZZhKZB {
+  background-color: var(--elements-chips-normal, #c9d3dd66);
+}
+
+.chip-ZZhKZB.active-YPxsPe {
+  background-color: var(--elements-chips-normal-current, #bfddf7bf);
+}
+

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

@@ -0,0 +1,18 @@
+import { type ISelectOption } from '../../Select/Select';
+import { type DayQuickFilter } from '../types';
+export interface PeriodVariantListProps {
+    variants: ISelectOption[];
+    value?: ISelectOption;
+    quickFilter?: DayQuickFilter[];
+    yesterdaySelected?: boolean;
+    todaySelected?: boolean;
+    tomorrowSelected?: boolean;
+    onSelect?: (variant: ISelectOption) => void;
+    onClickYestardayButton?: () => void;
+    onClickTodayButton?: () => void;
+    onClickTomorrowButton?: () => void;
+}
+export interface PeriodVariantListRef {
+    focusOnFirstItem: () => void;
+}
+export declare const PeriodVariantList: import("react").ForwardRefExoticComponent<PeriodVariantListProps & import("react").RefAttributes<PeriodVariantListRef>>;

package/dist/components/DateRange/PeriodVariantList/index.js

@@ -0,0 +1,83 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle, useRef } from "react";
+import { cn } from "../../../common/css/index.js";
+import { Chip } from "../../Chip/Chip.js";
+import { Radiobutton } from "../../Radiobutton/Radiobutton.js";
+import { CalendarVariant, KEYBOARD_ACTIVATION_KEYS } from "../consts.js";
+import { useLocale } from "../locale/index.js";
+import { DEFAULT_QUICK_FILTER } from "../types.js";
+import PeriodVariantList_module from "./PeriodVariantList.module.js";
+const PeriodVariantList = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const locale = useLocale('DateRange');
+    const quickFilters = props.quickFilter ?? DEFAULT_QUICK_FILTER;
+    const handleOptionKeyDown = (event, variant)=>{
+        if (KEYBOARD_ACTIVATION_KEYS.includes(event.key)) props.onSelect?.(variant);
+    };
+    const firstOptionRef = useRef(null);
+    useImperativeHandle(ref, ()=>({
+            focusOnFirstItem: ()=>firstOptionRef.current?.focus()
+        }));
+    const getQuickFilterChipProps = (filter)=>{
+        const chipPropsByFilter = {
+            yesterday: {
+                isActive: props.yesterdaySelected ?? false,
+                onClick: ()=>props.onClickYestardayButton?.(),
+                label: locale.translate.dayQuickFilters.yesterday
+            },
+            today: {
+                isActive: props.todaySelected ?? false,
+                onClick: ()=>props.onClickTodayButton?.(),
+                label: locale.translate.dayQuickFilters.today
+            },
+            tomorrow: {
+                isActive: props.tomorrowSelected ?? false,
+                onClick: ()=>props.onClickTomorrowButton?.(),
+                label: locale.translate.dayQuickFilters.tomorrow
+            }
+        };
+        return chipPropsByFilter[filter];
+    };
+    return props.variants.map((variant, index)=>/*#__PURE__*/ jsx("li", {
+            onClick: ()=>{
+                props.onSelect?.(variant);
+            },
+            className: PeriodVariantList_module.optionContainer,
+            children: /*#__PURE__*/ jsxs("div", {
+                className: PeriodVariantList_module.option,
+                children: [
+                    /*#__PURE__*/ jsx(Radiobutton, {
+                        ref: 0 === index ? firstOptionRef : void 0,
+                        checked: props.value?.value === variant.value,
+                        onClick: (event)=>{
+                            event.stopPropagation();
+                        },
+                        onKeyDown: (event)=>{
+                            handleOptionKeyDown(event, variant);
+                        },
+                        children: variant.label
+                    }),
+                    variant.value === CalendarVariant.day && quickFilters.length > 0 && /*#__PURE__*/ jsx("div", {
+                        style: {
+                            display: 'flex'
+                        },
+                        className: PeriodVariantList_module.selectDayButtons,
+                        onClick: (event)=>{
+                            event.stopPropagation();
+                        },
+                        children: quickFilters.map((filter)=>{
+                            const chipProps = getQuickFilterChipProps(filter);
+                            return /*#__PURE__*/ jsx(Chip, {
+                                className: cn(PeriodVariantList_module.chip, chipProps.isActive && PeriodVariantList_module.active),
+                                isActive: chipProps.isActive,
+                                onClick: chipProps.onClick,
+                                small: true,
+                                children: chipProps.label
+                            }, filter);
+                        })
+                    })
+                ]
+            })
+        }, variant.value));
+});
+PeriodVariantList.displayName = 'PeriodVariantList';
+export { PeriodVariantList };

package/dist/components/DateRange/SideMenu/SideMenu.module.js

@@ -0,0 +1,6 @@
+import "./SideMenu_module.css";
+const SideMenu_module = {
+    variantsList: "variantsList-AMTuu3",
+    divider: "divider-HQ6F5g"
+};
+export default SideMenu_module;

package/dist/components/DateRange/SideMenu/SideMenu_module.css

@@ -0,0 +1,18 @@
+.variantsList-AMTuu3 {
+  margin: 0;
+  padding: 10px 4px;
+  list-style-type: none;
+}
+
+.divider-HQ6F5g {
+  padding: 8px 12px;
+}
+
+.divider-HQ6F5g:after {
+  background-color: var(--border-normal, #d1d6df);
+  content: "";
+  width: 100%;
+  height: 1px;
+  display: block;
+}
+

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

@@ -0,0 +1,13 @@
+import { type Ref } from 'react';
+import { type PeriodVariantListRef } from '../PeriodVariantList';
+import type { DateRangeFeatureProps, DateRangeValue, DateSelectVariant } from '../types';
+interface SideMenuProps extends DateRangeFeatureProps {
+    value: DateRangeValue;
+    variantsListRef?: Ref<PeriodVariantListRef>;
+    onChangeVariant?: (variant: DateSelectVariant) => void;
+    onClickYestardayButton?: () => void;
+    onClickTodayButton?: () => void;
+    onClickTomorrowButton?: () => void;
+}
+export declare const SideMenu: (props: SideMenuProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/DateRange/SideMenu/index.js

@@ -0,0 +1,73 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { addDays, isSameDay, subDays } from "date-fns";
+import { getAdditionalCalendarVariants, getCalendarVariants } from "../consts.js";
+import { useLocale } from "../locale/index.js";
+import { PeriodVariantList } from "../PeriodVariantList/index.js";
+import { isDayValue } from "../utils.js";
+import SideMenu_module from "./SideMenu.module.js";
+const isYesterdayValue = (options)=>{
+    if (!isDayValue(options) || !options.value) return false;
+    return isSameDay(subDays(new Date(), 1), options.value);
+};
+const isTomorrowValue = (options)=>{
+    if (!isDayValue(options) || !options.value) return false;
+    return isSameDay(addDays(new Date(), 1), options.value);
+};
+const isTodayValue = (options)=>{
+    if (!isDayValue(options) || !options.value) return false;
+    return isSameDay(new Date(), options.value);
+};
+const SideMenu = (props)=>{
+    const locale = useLocale('DateRange');
+    const features = {
+        withPeriod: props.withPeriod,
+        withAnyDate: props.withAnyDate,
+        withNoDate: props.withNoDate
+    };
+    const calendarVariants = getCalendarVariants(locale, features);
+    const additionalCalendarVariants = getAdditionalCalendarVariants(locale, features);
+    const selectedCalendarMode = props.value.type;
+    const selectedVariant = useMemo(()=>[
+            ...calendarVariants,
+            ...additionalCalendarVariants
+        ].find((variant)=>variant.value === selectedCalendarMode), [
+        additionalCalendarVariants,
+        calendarVariants,
+        selectedCalendarMode
+    ]);
+    const handleSelectVariant = (option)=>{
+        props.onChangeVariant?.(option.value);
+    };
+    return /*#__PURE__*/ jsxs("ul", {
+        className: SideMenu_module.variantsList,
+        children: [
+            /*#__PURE__*/ jsx(PeriodVariantList, {
+                ref: props.variantsListRef,
+                value: selectedVariant,
+                variants: calendarVariants,
+                quickFilter: props.quickFilter,
+                onSelect: handleSelectVariant,
+                onClickTodayButton: props.onClickTodayButton,
+                onClickYestardayButton: props.onClickYestardayButton,
+                onClickTomorrowButton: props.onClickTomorrowButton,
+                yesterdaySelected: isYesterdayValue(props.value),
+                todaySelected: isTodayValue(props.value),
+                tomorrowSelected: isTomorrowValue(props.value)
+            }),
+            additionalCalendarVariants.length > 0 && /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        className: SideMenu_module.divider
+                    }),
+                    /*#__PURE__*/ jsx(PeriodVariantList, {
+                        value: selectedVariant,
+                        variants: additionalCalendarVariants,
+                        onSelect: handleSelectVariant
+                    })
+                ]
+            })
+        ]
+    });
+};
+export { SideMenu };

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

@@ -0,0 +1,8 @@
+interface TooltipedTextProps {
+    className?: string;
+    children: string | null;
+    tooltipZIndex?: number;
+    tooltipText?: string;
+}
+export declare const TooltipedText: (props: TooltipedTextProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/DateRange/TooltipedText/index.js

@@ -0,0 +1,30 @@
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Hint } from "../../Hint/Hint.js";
+import { Text, TextColor, TextTag } from "../../Text/Text.js";
+const TooltipedText = (props)=>{
+    const bodyTextRef = useRef(null);
+    const [isShowHint, setIsShowHint] = useState(false);
+    useEffect(()=>{
+        if (!bodyTextRef.current) return void setIsShowHint(false);
+        setIsShowHint(bodyTextRef.current?.clientWidth < bodyTextRef.current?.scrollWidth);
+    }, [
+        props.children
+    ]);
+    return /*#__PURE__*/ jsx(Hint, {
+        zIndex: props.tooltipZIndex ?? 3,
+        trigger: isShowHint ? 'hover' : [],
+        overlay: /*#__PURE__*/ jsx(Text.Body, {
+            colorToken: TextColor.invert,
+            children: props.tooltipText ?? props.children
+        }),
+        placement: "top",
+        children: /*#__PURE__*/ jsx(Text.Body, {
+            ref: bodyTextRef,
+            className: props.className,
+            as: TextTag.span,
+            children: props.children
+        })
+    });
+};
+export { TooltipedText };

package/dist/components/DateRange/Year/Year.module.js

@@ -0,0 +1,11 @@
+import "./Year_module.css";
+const Year_module = {
+    yearWrapper: "yearWrapper-aWYUOF",
+    header: "header-W7bT62",
+    year: "year-QQyr67",
+    month: "month-qcQBFx",
+    current: "current-VqC3bQ",
+    selected: "selected-Y2hnss",
+    monthText: "monthText-BsHwbr"
+};
+export default Year_module;

package/dist/components/DateRange/Year/Year_module.css

@@ -0,0 +1,60 @@
+.yearWrapper-aWYUOF {
+  flex-direction: column;
+  gap: 4px;
+  margin-bottom: 8px;
+  display: flex;
+}
+
+.header-W7bT62 {
+  color: var(--text-primary, #091739);
+  justify-content: center;
+  padding: 6px 4px 6px 16px;
+  display: flex;
+}
+
+.year-QQyr67 {
+  color: var(--text-primary, #091739);
+  grid-template-columns: repeat(3, 1fr);
+  row-gap: 4px;
+  padding-left: 16px;
+  padding-right: 4px;
+  display: grid;
+}
+
+.month-qcQBFx {
+  cursor: pointer;
+  border-radius: 8px;
+  justify-content: center;
+  align-items: center;
+  padding: 6px 0;
+  display: flex;
+  position: relative;
+}
+
+.month-qcQBFx.current-VqC3bQ:after {
+  background-color: var(--elements-accent, #036ce5);
+  content: "";
+  border-radius: 4px;
+  width: 4px;
+  height: 4px;
+  position: absolute;
+  bottom: 4px;
+  left: 35px;
+}
+
+.month-qcQBFx:hover {
+  outline: 1px solid var(--border-accent, #036ce5);
+}
+
+.month-qcQBFx.selected-Y2hnss {
+  background-color: var(--button-primary-normal, #036ce5);
+}
+
+.month-qcQBFx.selected-Y2hnss .monthText-BsHwbr {
+  color: var(--invert-text);
+}
+
+.month-qcQBFx.selected-Y2hnss.current-VqC3bQ:after {
+  background-color: var(--invert-text, #fff);
+}
+

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

@@ -0,0 +1,8 @@
+import type { DateRangeValue } from '../types';
+interface YearProps {
+    year: Date;
+    value: DateRangeValue;
+    onSelectDate?: (date: Date) => void;
+}
+export declare const Year: (props: YearProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/DateRange/Year/index.js

@@ -0,0 +1,47 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { format, isSameMonth, startOfDay } from "date-fns";
+import { cn } from "../../../common/index.js";
+import { Text } from "../../Text/Text.js";
+import { useLocaleContext } from "../../../context/contexts/index.js";
+import { LocaleKey, useLocale } from "../locale/index.js";
+import { capitalizeFirstLetter, getFormatOptions, getRangeDates, isMonthValue, mapYearMonths } from "../utils.js";
+import Year_module from "./Year.module.js";
+const Year = (props)=>{
+    const { locale } = useLocaleContext();
+    const translates = useLocale('DateRange', LocaleKey.Locale);
+    const year = props.year.getFullYear();
+    const isSelectedMonth = (monthStartDate)=>{
+        if (!isMonthValue(props.value)) return false;
+        const { startDate } = getRangeDates(props.value);
+        return startDate && isSameMonth(startDate, monthStartDate);
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        className: Year_module.yearWrapper,
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: Year_module.header,
+                children: /*#__PURE__*/ jsx(Text.Body, {
+                    children: year
+                })
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: Year_module.year,
+                children: mapYearMonths(year, (date)=>{
+                    const isSelected = isSelectedMonth(date);
+                    const isCurrentMonth = isSameMonth(new Date(), date);
+                    return /*#__PURE__*/ jsx("div", {
+                        className: cn(Year_module.month, isCurrentMonth && Year_module.current, isSelected && Year_module.selected),
+                        onClick: ()=>{
+                            props.onSelectDate?.(startOfDay(date));
+                        },
+                        children: /*#__PURE__*/ jsx(Text.Body, {
+                            className: Year_module.monthText,
+                            children: capitalizeFirstLetter(format(date, translates.format.monthCalendarFormat, getFormatOptions(locale)))
+                        })
+                    }, +date);
+                })
+            })
+        ]
+    });
+};
+export { Year };

package/dist/components/DateRange/YearsList/YearsList.module.js

@@ -0,0 +1,5 @@
+import "./YearsList_module.css";
+const YearsList_module = {
+    scrollContainer: "scrollContainer-uO8xiZ"
+};
+export default YearsList_module;

package/dist/components/DateRange/YearsList/YearsList_module.css

@@ -0,0 +1,15 @@
+.scrollContainer-uO8xiZ {
+  width: 252px;
+  margin-right: 4px;
+}
+
+.scrollContainer-uO8xiZ::-webkit-scrollbar {
+  width: 8px;
+  padding: 0 4px;
+}
+
+.scrollContainer-uO8xiZ::-webkit-scrollbar-thumb {
+  background-color: var(--border-normal, #d1d6df);
+  border-radius: 8px;
+}
+

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

@@ -0,0 +1,12 @@
+import type { RefObject } from 'react';
+import { type VirtuosoHandle } from 'react-virtuoso';
+import type { DateRangeValue } from '../types';
+interface YearsListProps {
+    virtuosoRef?: RefObject<VirtuosoHandle>;
+    minDate: Date;
+    maxDate: Date;
+    value: DateRangeValue;
+    onSelectDate?: (date: Date) => void;
+}
+export declare const YearsList: (props: YearsListProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/DateRange/YearsList/index.js

@@ -0,0 +1,47 @@
+import { jsx } from "react/jsx-runtime";
+import { Virtuoso } from "react-virtuoso";
+import { eachYearOfInterval } from "date-fns";
+import { getRangeDates, isMonthValue } from "../utils.js";
+import { Year } from "../Year/index.js";
+import YearsList_module from "./YearsList.module.js";
+const getDateToScroll = (value)=>{
+    if (isMonthValue(value)) {
+        const { startDate } = getRangeDates(value);
+        if (startDate) return startDate;
+    }
+    return new Date();
+};
+const getYearToScrollIndex = (value, minDate)=>{
+    const dateToScroll = getDateToScroll(value);
+    const yearToScroll = dateToScroll.getFullYear();
+    const minYear = minDate.getFullYear();
+    return yearToScroll - minYear;
+};
+const YearsList = (props)=>{
+    const yearFirstDays = eachYearOfInterval({
+        start: props.minDate,
+        end: props.maxDate
+    });
+    const currentYearIndex = getYearToScrollIndex(props.value, props.minDate);
+    return /*#__PURE__*/ jsx(Virtuoso, {
+        ref: props.virtuosoRef,
+        style: {
+            height: '300px'
+        },
+        className: YearsList_module.scrollContainer,
+        totalCount: yearFirstDays.length,
+        initialTopMostItemIndex: {
+            index: currentYearIndex,
+            align: 'center'
+        },
+        itemContent: (index)=>{
+            const yearFirstDate = yearFirstDays[index];
+            return /*#__PURE__*/ jsx(Year, {
+                year: yearFirstDate,
+                value: props.value,
+                onSelectDate: props.onSelectDate
+            });
+        }
+    });
+};
+export { YearsList };

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

@@ -0,0 +1,20 @@
+import type { DateRangeFeatureProps, DateRangeLocale, DateSelectVariant } from './types';
+export declare const CalendarVariant: Record<DateSelectVariant, DateSelectVariant>;
+export declare const DATES_DELIMETER = " \u2014 ";
+export declare const FOCUSED_WIDTH_WITHOUT_TIME = 252;
+export declare const FOCUSED_WIDTH_WITH_TIME = 308;
+export declare const FOCUSED_WIDTH_WITH_TIME_EN = 316;
+export declare const DEFAULT_HINT_Z_INDEX = 3;
+export declare const KEYBOARD_ACTIVATION_KEYS: string[];
+export declare const NAVIGATION_VARIANTS: readonly [DateSelectVariant, DateSelectVariant, DateSelectVariant];
+export declare const INPUT_CONTENT_VARIANTS: readonly [DateSelectVariant, DateSelectVariant, DateSelectVariant, DateSelectVariant, DateSelectVariant];
+export declare const NON_CALENDAR_VARIANTS: readonly [DateSelectVariant, DateSelectVariant];
+export declare const getCalendarVariants: (locale: DateRangeLocale, features?: DateRangeFeatureProps) => {
+    value: DateSelectVariant;
+    label: string;
+}[];
+export declare const getAdditionalCalendarVariants: (locale: DateRangeLocale, features?: DateRangeFeatureProps) => {
+    value: DateSelectVariant;
+    label: string;
+}[];
+export declare const getDefaultVariant: (features?: DateRangeFeatureProps) => DateSelectVariant;