@moysklad/uikit 28.1.0 → 31.20.0

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

@@ -0,0 +1,3 @@
+export * from "./en-US.js";
+export * from "./ru-RU.js";
+export * from "./useLocale.js";

package/dist/components/DateRange/locale/ru-RU.d.ts

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

package/dist/components/DateRange/locale/ru-RU.js

@@ -0,0 +1,82 @@
+const ruLocaleValues = {
+    DateRange: {
+        translate: {
+            radiobuttons: {
+                period: 'Период',
+                day: 'День',
+                week: 'Неделя',
+                month: 'Месяц',
+                anyDate: 'Указана любая дата',
+                noDate: 'Дата не указана'
+            },
+            dayQuickFilters: {
+                yesterday: 'Вчера',
+                today: 'Сегодня',
+                tomorrow: 'Завтра'
+            },
+            footer: {
+                timeSelectionToggle: 'Указать время',
+                timeSelectionToggleHint: 'Указать время можно только для\u00A0периода',
+                clearFilterButton: 'Сбросить фильтр'
+            },
+            slider: {
+                day: {
+                    title: 'День',
+                    placeholder: 'Выберите день'
+                },
+                week: {
+                    title: 'Неделя',
+                    placeholder: 'Выберите неделю'
+                },
+                month: {
+                    title: 'Месяц',
+                    placeholder: 'Выберите месяц'
+                }
+            }
+        },
+        format: {
+            slider: {
+                day: {
+                    dateFormat: 'd MMMM yyyy'
+                },
+                week: {
+                    dateFormat: {
+                        sameMonth: {
+                            firstDate: 'd',
+                            endDate: 'd MMMM yyyy'
+                        },
+                        differentMonth: {
+                            firstDate: 'd MMM',
+                            endDate: 'd MMM yyyy'
+                        }
+                    },
+                    tooltipDateFormat: {
+                        sameMonth: {
+                            firstDate: 'd',
+                            endDate: 'd MMMM yyyy'
+                        },
+                        differentMonth: {
+                            firstDate: 'd MMMM',
+                            endDate: 'd MMMM yyyy'
+                        }
+                    }
+                },
+                month: {
+                    dateFormat: 'LLLL yyyy'
+                }
+            },
+            monthCalendarFormat: 'LLLL',
+            dateFormat: 'dd.MM.yyyy',
+            dateWithTimeFormat: 'dd.MM.yyyy HH:mm',
+            emptyDate: {
+                withTime: '__.__.____ __:__',
+                withoutTime: '__.__.____'
+            },
+            inputMask: {
+                withTime: '99.99.9999 99:99',
+                withoutTime: '99.99.9999'
+            }
+        }
+    }
+};
+export { ruLocaleValues };

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

@@ -0,0 +1,9 @@
+import type { DateRangeLocale } from '../types';
+export interface Locale {
+    DateRange: DateRangeLocale;
+}
+export type TranslateValues = {
+    [K in keyof Locale]?: Partial<Locale[K]>;
+};
+export declare const isTranslateValues: (value: unknown) => value is TranslateValues;
+export declare const toTranslateValues: (value: unknown) => TranslateValues | undefined;

package/dist/components/DateRange/locale/types.js

@@ -0,0 +1,7 @@
+const isPlainObject = (value)=>!!value && 'object' == typeof value && !Array.isArray(value);
+const isTranslateValues = (value)=>{
+    if (!isPlainObject(value)) return false;
+    return Object.entries(value).every(([key, componentValue])=>'DateRange' === key && isPlainObject(componentValue));
+};
+const toTranslateValues = (value)=>isTranslateValues(value) ? value : void 0;
+export { isTranslateValues, toTranslateValues };

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

@@ -0,0 +1,8 @@
+import type { ValueOf } from '../../../common';
+import { type Locale } from './types';
+export type LocaleComponentName = keyof Locale;
+export declare const LocaleKey: {
+    readonly Locale: "locale";
+    readonly Lang: "lang";
+};
+export declare function useLocale<T extends LocaleComponentName>(componentName: T, getBy?: ValueOf<typeof LocaleKey>): Locale[T];

package/dist/components/DateRange/locale/useLocale.js

@@ -0,0 +1,31 @@
+import { useContext, useMemo } from "react";
+import { ELanguages, LocaleContext } from "../../../context/index.js";
+import { enLocaleValues } from "./en-US.js";
+import { ruLocaleValues } from "./ru-RU.js";
+import { toTranslateValues } from "./types.js";
+const isEnLocale = (lang)=>lang === ELanguages.EN;
+const LocaleKey = {
+    Locale: 'locale',
+    Lang: 'lang'
+};
+function useLocale(componentName, getBy = LocaleKey.Lang) {
+    const { lang, locale, translateValues: contextTranslations } = useContext(LocaleContext);
+    const languageValue = useMemo(()=>getBy === LocaleKey.Lang ? lang : locale, [
+        getBy,
+        lang,
+        locale
+    ]);
+    return useMemo(()=>{
+        const result = isEnLocale(languageValue) ? enLocaleValues : ruLocaleValues;
+        const componentContextTranslations = toTranslateValues(contextTranslations)?.[componentName] ?? {};
+        return {
+            ...result[componentName],
+            ...componentContextTranslations
+        };
+    }, [
+        componentName,
+        languageValue,
+        contextTranslations
+    ]);
+}
+export { LocaleKey, useLocale };

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

@@ -0,0 +1,39 @@
+import type { AriaAttributes, KeyboardEventHandler } from 'react';
+import type { MutableRefObject, ReactNode, Ref } from 'react';
+import type { IHasTestId } from '../../common/types';
+import type { DateRangeDefaultTriggerProps } from './DateRangeDefaultTrigger/DateRangeDefaultTrigger';
+import type { DateRangeFeatureProps, DateRangeValue } from './types';
+export type DateRangeRenderInputOptions = {
+    triggerRef: MutableRefObject<HTMLElement | null>;
+    triggerAriaProps: Pick<AriaAttributes, 'aria-controls' | 'aria-expanded' | 'aria-haspopup'>;
+    open: boolean;
+    onOpen: () => void;
+    onClose: () => void;
+    onKeyDown: KeyboardEventHandler<HTMLElement>;
+    disabled?: boolean;
+    testId?: string;
+    value: DateRangeValue;
+    formattedValue?: string;
+    displayValue?: string;
+    periodName?: string;
+    onPrev?: () => void;
+    onNext?: () => void;
+    isNavigationDisabled?: boolean;
+};
+type OmitedDefaultTriggerProps = Omit<DateRangeDefaultTriggerProps, 'value' | 'onChange' | 'onMouseDown' | 'focusedWidth' | 'inputContent' | 'renderCustomInput' | 'focusedState'>;
+export interface DateRangeProps extends Omit<OmitedDefaultTriggerProps, 'label'>, DateRangeFeatureProps, IHasTestId {
+    label?: string;
+    minDate?: Date;
+    maxDate?: Date;
+    value?: DateRangeValue;
+    onChange?: (value: DateRangeValue) => void;
+    dropdownZIndex?: number;
+    renderInput?: (options: DateRangeRenderInputOptions) => ReactNode;
+    /**
+     * @default DEFAULT_HINT_Z_INDEX (3)
+     */
+    hintZIndex?: number;
+    requiredDate?: boolean;
+}
+export type DateRangeRef = Ref<HTMLDivElement>;
+export {};

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

@@ -0,0 +1,126 @@
+export type DateSelectVariant = 'period' | 'day' | 'week' | 'month' | 'anyDate' | 'noDate';
+export type DayQuickFilter = 'yesterday' | 'today' | 'tomorrow';
+export declare const DEFAULT_QUICK_FILTER: DayQuickFilter[];
+export type DatesPeriod = [Date | null | undefined, Date | null | undefined];
+export interface DateRangeValue {
+    type: DateSelectVariant;
+    value: Date | DatesPeriod | null;
+}
+export interface DateRangeRangeValue extends DateRangeValue {
+    type: 'period';
+    value: DatesPeriod;
+}
+export interface DateRangeDayValue extends DateRangeValue {
+    type: 'day';
+    value: Date | null;
+}
+export interface DateRangeWeekValue extends DateRangeValue {
+    type: 'week';
+    value: DatesPeriod;
+}
+export interface DateRangeMonthValue extends DateRangeValue {
+    type: 'month';
+    value: DatesPeriod;
+}
+export interface DateRangeAnyDateValue extends DateRangeValue {
+    type: 'anyDate';
+    value: null;
+}
+export interface DateRangeNoDateValue extends DateRangeValue {
+    type: 'noDate';
+    value: null;
+}
+export interface DateRangeLocale {
+    translate: {
+        radiobuttons: {
+            period: string;
+            day: string;
+            week: string;
+            month: string;
+            anyDate: string;
+            noDate: string;
+        };
+        dayQuickFilters: {
+            yesterday: string;
+            today: string;
+            tomorrow: string;
+        };
+        footer: {
+            timeSelectionToggle: string;
+            timeSelectionToggleHint: string;
+            clearFilterButton: string;
+        };
+        slider: {
+            day: {
+                title: string;
+                placeholder: string;
+            };
+            week: {
+                title: string;
+                placeholder: string;
+            };
+            month: {
+                title: string;
+                placeholder: string;
+            };
+        };
+    };
+    format: {
+        slider: {
+            day: {
+                dateFormat: string;
+            };
+            week: {
+                dateFormat: {
+                    sameMonth: {
+                        firstDate: string;
+                        endDate: string;
+                    };
+                    differentMonth: {
+                        firstDate: string;
+                        endDate: string;
+                    };
+                };
+                tooltipDateFormat: {
+                    sameMonth: {
+                        firstDate: string;
+                        endDate: string;
+                    };
+                    differentMonth: {
+                        firstDate: string;
+                        endDate: string;
+                    };
+                };
+            };
+            month: {
+                dateFormat: string;
+            };
+        };
+        inputMask: {
+            withTime: string;
+            withoutTime: string;
+        };
+        emptyDate: {
+            withTime: string;
+            withoutTime: string;
+        };
+        dateFormat: string;
+        dateWithTimeFormat: string;
+        monthCalendarFormat: string;
+    };
+}
+export interface DateRangeFeatureProps {
+    /** @default true */
+    withPeriod?: boolean;
+    /** @default true */
+    withAnyDate?: boolean;
+    /** @default true */
+    withNoDate?: boolean;
+    /** @default true */
+    withTimeSelection?: boolean;
+    /** @default true */
+    withClearButton?: boolean;
+    /** @default ['yesterday', 'today'] */
+    quickFilter?: DayQuickFilter[];
+}
+export declare const DEFAULT_DATE_RANGE_FEATURES: Required<DateRangeFeatureProps>;

package/dist/components/DateRange/types.js

@@ -0,0 +1,13 @@
+const DEFAULT_QUICK_FILTER = [
+    'yesterday',
+    'today'
+];
+const DEFAULT_DATE_RANGE_FEATURES = {
+    withPeriod: true,
+    withAnyDate: true,
+    withNoDate: true,
+    withTimeSelection: true,
+    withClearButton: true,
+    quickFilter: DEFAULT_QUICK_FILTER
+};
+export { DEFAULT_DATE_RANGE_FEATURES, DEFAULT_QUICK_FILTER };

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

@@ -0,0 +1,33 @@
+import { type FormatOptions } from 'date-fns';
+import { type LanguageValue } from '../../context/constants';
+import type { DateRangeAnyDateValue, DateRangeDayValue, DateRangeFeatureProps, DateRangeMonthValue, DateRangeNoDateValue, DateRangeRangeValue, DateRangeValue, DateRangeWeekValue, DatesPeriod } from './types';
+export declare const isTimeDefault: (value: DatesPeriod) => boolean;
+export declare const normalizeValue: (value: DateRangeValue, features: DateRangeFeatureProps) => DateRangeValue;
+export declare const getCorrectInterval: (firstDate: Date, secondDate: Date) => [Date, Date];
+export declare const isValuePeriod: (value: DateRangeValue["value"]) => value is DatesPeriod;
+export declare const getPeriodValue: (value: DatesPeriod) => {
+    startDate: Date | null | undefined;
+    endDate: Date | null | undefined;
+};
+export declare const isRangeValue: (options: DateRangeValue) => options is DateRangeRangeValue;
+export declare const getRangeDates: (options: DateRangeRangeValue | DateRangeWeekValue | DateRangeMonthValue) => {
+    startDate: Date | null | undefined;
+    endDate: Date | null | undefined;
+};
+export declare const isDayValue: (options: DateRangeValue) => options is DateRangeDayValue;
+export declare const isWeekValue: (options: DateRangeValue) => options is DateRangeWeekValue;
+export declare const isMonthValue: (options: DateRangeValue) => options is DateRangeMonthValue;
+export declare const isAnyDateValue: (options: DateRangeValue) => options is DateRangeAnyDateValue;
+export declare const isNoDateValue: (options: DateRangeValue) => options is DateRangeNoDateValue;
+export declare const getFormatOptions: (lang: LanguageValue) => FormatOptions | undefined;
+export declare const capitalizeFirstLetter: (value: string) => string;
+export declare const isValueNullable: (options: DateRangeValue) => boolean;
+export declare const isTimeEqual: (date: Date, timeToCompare: {
+    hours: number;
+    minutes: number;
+}) => boolean;
+export declare const getStartOfDay: (date: Date | null | undefined) => Date | null | undefined;
+export declare const getFirstDayOfMonth: (year: number, month: number) => Date;
+export declare const mapYearMonths: <T>(year: number, renderMonth: (monthStartDate: Date) => T) => T[];
+export declare const getEndOfDay: (date: Date | null | undefined) => Date | null | undefined;
+export declare const getRequiredDateRangeValue: (value: DateRangeValue, referenceDate?: Date) => DateRangeValue | null;

package/dist/components/DateRange/utils.js

@@ -0,0 +1,105 @@
+import { endOfDay, endOfMonth, endOfWeek, getHours, getMinutes, isBefore, startOfDay, startOfMonth, startOfWeek } from "date-fns";
+import { ru } from "date-fns/locale";
+import { ELanguages } from "../../context/constants/index.js";
+import { CalendarVariant, getDefaultVariant } from "./consts.js";
+const isTimeDefault = (value)=>{
+    const { startDate, endDate } = getPeriodValue(value);
+    const isStartTimeDefault = !startDate || isTimeEqual(startDate, {
+        hours: 0,
+        minutes: 0
+    });
+    const isEndTimeDefault = !endDate || isTimeEqual(endDate, {
+        hours: 23,
+        minutes: 59
+    });
+    return isStartTimeDefault && isEndTimeDefault;
+};
+const normalizeValue = (value, features)=>{
+    if (value.type === CalendarVariant.period && false === features.withPeriod) return {
+        type: CalendarVariant.day,
+        value: null
+    };
+    if (value.type === CalendarVariant.anyDate && false === features.withAnyDate) return {
+        type: getDefaultVariant(features),
+        value: null
+    };
+    if (value.type === CalendarVariant.noDate && false === features.withNoDate) return {
+        type: getDefaultVariant(features),
+        value: null
+    };
+    return value;
+};
+const getCorrectInterval = (firstDate, secondDate)=>{
+    if (isBefore(firstDate, secondDate)) return [
+        firstDate,
+        secondDate
+    ];
+    return [
+        secondDate,
+        firstDate
+    ];
+};
+const isValuePeriod = (value)=>Array.isArray(value) && 2 === value.length;
+const getPeriodValue = (value)=>{
+    const [startDate, endDate] = value;
+    return {
+        startDate,
+        endDate
+    };
+};
+const isRangeValue = (options)=>options.type === CalendarVariant.period && isValuePeriod(options.value);
+const getRangeDates = (options)=>getPeriodValue(options.value);
+const isDayValue = (options)=>options.type === CalendarVariant.day && (options.value instanceof Date || !options.value);
+const isWeekValue = (options)=>options.type === CalendarVariant.week && isValuePeriod(options.value);
+const isMonthValue = (options)=>options.type === CalendarVariant.month && isValuePeriod(options.value);
+const isAnyDateValue = (options)=>options.type === CalendarVariant.anyDate && !options.value;
+const isNoDateValue = (options)=>options.type === CalendarVariant.noDate && !options.value;
+const getFormatOptions = (lang)=>lang === ELanguages.EN ? void 0 : {
+        locale: ru
+    };
+const capitalizeFirstLetter = (value)=>`${value.charAt(0).toUpperCase()}${value.slice(1)}`;
+const isValueNullable = (options)=>{
+    if (isValuePeriod(options.value)) {
+        const { startDate, endDate } = getPeriodValue(options.value);
+        return !startDate && !endDate;
+    }
+    return !options.value;
+};
+const isTimeEqual = (date, timeToCompare)=>getHours(date) === timeToCompare.hours && getMinutes(date) === timeToCompare.minutes;
+const getStartOfDay = (date)=>date ? startOfDay(date) : date;
+const getFirstDayOfMonth = (year, month)=>startOfDay(new Date(year, month - 1, 1));
+const MONTHS_IN_YEAR = 12;
+const mapYearMonths = (year, renderMonth)=>Array.from({
+        length: MONTHS_IN_YEAR
+    }, (_, monthIndex)=>renderMonth(getFirstDayOfMonth(year, monthIndex + 1)));
+const getEndOfDay = (date)=>date ? endOfDay(date) : date;
+const getRequiredDateRangeValue = (value, referenceDate = new Date())=>{
+    const today = startOfDay(referenceDate);
+    if (isDayValue(value)) return {
+        type: CalendarVariant.day,
+        value: today
+    };
+    if (isWeekValue(value)) return {
+        type: CalendarVariant.week,
+        value: [
+            startOfWeek(today, {
+                weekStartsOn: 1
+            }),
+            endOfWeek(today, {
+                weekStartsOn: 1
+            })
+        ]
+    };
+    if (isMonthValue(value)) {
+        const startDate = startOfMonth(today);
+        return {
+            type: CalendarVariant.month,
+            value: [
+                startDate,
+                endOfMonth(startDate)
+            ]
+        };
+    }
+    return null;
+};
+export { capitalizeFirstLetter, getCorrectInterval, getEndOfDay, getFirstDayOfMonth, getFormatOptions, getPeriodValue, getRangeDates, getRequiredDateRangeValue, getStartOfDay, isAnyDateValue, isDayValue, isMonthValue, isNoDateValue, isRangeValue, isTimeDefault, isTimeEqual, isValueNullable, isValuePeriod, isWeekValue, mapYearMonths, normalizeValue };

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

@@ -50,6 +50,7 @@ export interface DatepickerProps extends IHasTestId {
     lastElementRef?: Ref<HTMLElement>;
     fitInput?: boolean;
     showTimeText?: string;
+    nullableValueWhenTimeIncomplete?: boolean;
     onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
     onFocus?: (e: FocusEvent<HTMLInputElement>) => void;
     onCalendarClose?: () => void;
@@ -62,6 +63,7 @@ export interface DatepickerProps extends IHasTestId {
     }) => ReactNode;
     onTimeToggleChange?: (selectTime: boolean) => void;
     onInputKeyUp?: KeyboardEventHandler<HTMLInputElement>;
+    onInputKeyDown?: KeyboardEventHandler<HTMLInputElement>;
     onDayClick?: (date: Date) => void;
 }
 export type ReactInputMaskInnerRefProps = {
@@ -72,4 +74,4 @@ export type ReactInputMaskInnerRefProps = {
     setCursorToEnd: () => void;
     onChange: (evt: unknown) => void;
 };
-export declare const Datepicker: ({ id, localeFormat, lang, dateTimeFormatOptions, testId, selectedDate, setInitialDateIntoInput, showIcon, inputClassName: inputClassNameProp, popperClassName, portalId, blurAfterChange, blurAfterPick, showTime, isTimeRequired, defaultTime, disabled, presets, presetsLabel, label, required, helperText, error, placeholder, icon, iconPosition, inputRef: parentInputRef, inline, frameless, blurInputOnEsc, blurInputOnEnter, lastElementRef, fitInput, showTimeText, customRender, onBlur, onFocus, onCalendarClose, onDateChanged, onEnterPress, onPick, onTimeToggleChange, onInputKeyUp, onDayClick, }: DatepickerProps) => string | number | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export declare const Datepicker: ({ id, localeFormat, lang, dateTimeFormatOptions, testId, selectedDate, setInitialDateIntoInput, showIcon, inputClassName: inputClassNameProp, popperClassName, portalId, blurAfterChange, blurAfterPick, showTime, isTimeRequired, defaultTime, disabled, presets, presetsLabel, label, required, helperText, error, placeholder, icon, iconPosition, inputRef: parentInputRef, inline, frameless, blurInputOnEsc, blurInputOnEnter, lastElementRef, fitInput, showTimeText, nullableValueWhenTimeIncomplete, customRender, onBlur, onFocus, onCalendarClose, onDateChanged, onEnterPress, onPick, onTimeToggleChange, onInputKeyUp, onInputKeyDown, onDayClick, }: DatepickerProps) => string | number | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;

package/dist/components/Datepicker/Datepicker.js

@@ -32,7 +32,7 @@ const FocusableElement = {
     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 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 = 'Указать время', nullableValueWhenTimeIncomplete = false, customRender, onBlur, onFocus, onCalendarClose, onDateChanged, onEnterPress, onPick, onTimeToggleChange, onInputKeyUp, onInputKeyDown, onDayClick })=>{
     const formatter = dateFormatter.getFormatter(localeFormat, dateTimeFormatOptions);
     const parsedSelectedDate = useMemo(()=>'string' == typeof selectedDate ? parseSelectedDate(selectedDate, formatter) : selectedDate, [
         selectedDate,
@@ -130,7 +130,8 @@ const Datepicker = ({ id, localeFormat, lang, dateTimeFormatOptions, testId, sel
         onPick
     ]);
     const updateParsedDate = useCallback((parsed, time)=>{
-        if (!parsed) {
+        const isTimeNotFilled = !parsed?.time && timeInputEnabled;
+        if (!parsed || isTimeNotFilled && nullableValueWhenTimeIncomplete) {
             onDateChanged(null, {
                 dateString: '',
                 formatter
@@ -256,6 +257,7 @@ const Datepicker = ({ id, localeFormat, lang, dateTimeFormatOptions, testId, sel
         onFocus
     ]);
     const handleInputKeyDown = useCallback((e)=>{
+        onInputKeyDown?.(e);
         const input = inputRef.current?.getInputDOMNode();
         if (e.key === ESCAPE_KEY && blurInputOnEsc) {
             input?.blur();

package/dist/components/Dropdown/Dropdown.d.ts

@@ -21,5 +21,7 @@ export interface DropdownProps extends IHasTestId, DivProps {
     offsetX?: number;
     isInnerScroll?: boolean;
     anchor?: DropdownAnchor;
+    shouldIgnoreOutsideInteraction?: (target: Node) => boolean;
+    maxHeight?: number;
 }
 export declare const Dropdown: import("react").ForwardRefExoticComponent<DropdownProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Dropdown/Dropdown.js

@@ -12,7 +12,7 @@ const DROPDOWN_CLOSE_REASON = {
     ESCAPE: 'escape',
     MANUAL: 'manual'
 };
-const Dropdown = /*#__PURE__*/ forwardRef(({ id, open = false, onClose, children, triggerRef, zIndex = 2, portalElement = document.body, className, style, offsetY = 0, offsetX = 0, testId, isInnerScroll = false, anchor, ...restProps }, ref)=>{
+const Dropdown = /*#__PURE__*/ forwardRef(({ id, open = false, onClose, children, triggerRef, zIndex = 2, portalElement = document.body, className, style, offsetY = 0, offsetX = 0, testId, isInnerScroll = false, anchor, shouldIgnoreOutsideInteraction, maxHeight, ...restProps }, ref)=>{
     const innerRef = useRef(null);
     usePosition({
         open,
@@ -22,7 +22,8 @@ const Dropdown = /*#__PURE__*/ forwardRef(({ id, open = false, onClose, children
         offsetY,
         offsetX,
         isInnerScroll,
-        anchor
+        anchor,
+        maxHeightValue: maxHeight
     });
     useDismissOnOutsideClick({
         enabled: open,
@@ -30,7 +31,8 @@ const Dropdown = /*#__PURE__*/ forwardRef(({ id, open = false, onClose, children
         onDismiss: ()=>onClose(DROPDOWN_CLOSE_REASON.OUTSIDE_CLICK),
         ignoreRefs: [
             triggerRef
-        ]
+        ],
+        shouldIgnoreTarget: shouldIgnoreOutsideInteraction
     });
     useDismissOnFocusOutside({
         enabled: open,
@@ -38,7 +40,8 @@ const Dropdown = /*#__PURE__*/ forwardRef(({ id, open = false, onClose, children
         onDismiss: ()=>onClose(DROPDOWN_CLOSE_REASON.FOCUS_OUTSIDE),
         ignoreRefs: [
             triggerRef
-        ]
+        ],
+        shouldIgnoreTarget: shouldIgnoreOutsideInteraction
     });
     useDismissOnEscape({
         enabled: open,

package/dist/components/Dropdown/hooks/usePosition.d.ts

@@ -8,5 +8,6 @@ export interface UsePositionOptions {
     offsetX?: number;
     isInnerScroll?: boolean;
     anchor?: 'bottom' | 'top';
+    maxHeightValue?: number;
 }
-export declare const usePosition: ({ open, ref, triggerRef, children, offsetY, offsetX, isInnerScroll, anchor, }: UsePositionOptions) => void;
+export declare const usePosition: ({ open, ref, triggerRef, children, offsetY, offsetX, isInnerScroll, anchor, maxHeightValue, }: UsePositionOptions) => void;

package/dist/components/Dropdown/hooks/usePosition.js

@@ -3,7 +3,7 @@ import { observeMove } from "../utils/observeMove.js";
 import { useFindScrollableParents } from "./useFindScrollableParents.js";
 const MAX_HEIGHT = 440;
 const MIN_HEIGHT = 100;
-const usePosition = ({ open, ref, triggerRef, children, offsetY = 0, offsetX = 0, isInnerScroll, anchor = 'bottom' })=>{
+const usePosition = ({ open, ref, triggerRef, children, offsetY = 0, offsetX = 0, isInnerScroll, anchor = 'bottom', maxHeightValue = MAX_HEIGHT })=>{
     const scrollableParents = useFindScrollableParents({
         open,
         triggerRef
@@ -36,13 +36,13 @@ const usePosition = ({ open, ref, triggerRef, children, offsetY = 0, offsetX = 0
         let isYOverflow = triggerRect.top + refRect.height > containerRect.bottom;
         if (!isYOverflow) {
             const maxHeightFromStyle = parseFloat(getComputedStyle(ref.current).maxHeight);
-            if (!Number.isNaN(maxHeightFromStyle) && maxHeightFromStyle < MAX_HEIGHT || refRect.height > distanceToBottomViewport) isYOverflow = true;
+            if (!Number.isNaN(maxHeightFromStyle) && maxHeightFromStyle < maxHeightValue || refRect.height > distanceToBottomViewport) isYOverflow = true;
         }
         let isCurrentTop = false;
         if (doNotChangePosition) isCurrentTop = refToTop.current;
         const toTop = doNotChangePosition ? isCurrentTop : isYOverflow && distanceToTopViewport > distanceToBottomViewport;
         refToTop.current = toTop;
-        let maxHeight = MAX_HEIGHT;
+        let maxHeight = maxHeightValue;
         if (toTop && distanceToTopViewport < maxHeight) maxHeight = distanceToTopViewport;
         else if (!toTop && distanceToBottomViewport < maxHeight) maxHeight = distanceToBottomViewport;
         if ((maxHeight <= 0 || ref.current.scrollHeight <= maxHeight) && !isInnerScroll) maxHeight = void 0;

package/dist/components/EditableDate/DropdownContent/DropdownContent.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode, type RefObject } from 'react';
+export interface DropdownContentProps {
+    calendar: ReactNode;
+    input: ReactNode;
+    inputRef: RefObject<HTMLInputElement>;
+    lastDropdownElementRef: RefObject<HTMLElement>;
+    testId?: string;
+}
+export declare const DropdownContent: import("react").ForwardRefExoticComponent<DropdownContentProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/EditableDate/DropdownContent/DropdownContent.js

@@ -0,0 +1,36 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { getOptionalTestId } from "../../../common/testId/getTestId.js";
+import { CustomDatepickerDropdownContent } from "../../_shared/CustomDatepickerDropdownContent/CustomDatepickerDropdownContent.js";
+const DropdownContent = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const focusOnInput = ()=>{
+        props.inputRef.current?.focus();
+    };
+    const focusOnLastElement = ()=>{
+        (props.lastDropdownElementRef.current ?? props.inputRef.current)?.focus();
+    };
+    const handleOpen = ()=>{
+        focusOnInput();
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        "data-test-id": getOptionalTestId(props.testId, 'dropdown-content'),
+        ref: ref,
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                tabIndex: 0,
+                onFocus: focusOnLastElement
+            }),
+            /*#__PURE__*/ jsx(CustomDatepickerDropdownContent, {
+                calendar: props.calendar,
+                input: props.input,
+                onOpen: handleOpen
+            }),
+            /*#__PURE__*/ jsx("div", {
+                tabIndex: 0,
+                onFocus: focusOnInput
+            })
+        ]
+    });
+});
+DropdownContent.displayName = 'DropdownContent';
+export { DropdownContent };