@alfalab/core-components 42.3.1 → 42.4.0

package/date-range-input/index-f034f741.d.ts

@@ -1,80 +1,2 @@
-import { FC, MouseEvent } from "react";
-type PeriodType = "range" | "day" | "week" | "month" | "quarter" | "year";
-type PeriodSliderProps = {
-    /**
-     * Активная дата или период
-     */
-    value?: Date | [
-        Date,
-        Date
-    ];
-    /**
-     * Тип периода
-     */
-    periodType?: PeriodType;
-    /**
-     * Дополнительный класс
-     */
-    className?: string;
-    /**
-     * Отключает кнопку назад
-     */
-    prevArrowDisabled?: boolean;
-    /**
-     * Отключает кнопку вперед
-     */
-    nextArrowDisabled?: boolean;
-    /**
-     * Скрывает заблокированные кнопки
-     */
-    hideDisabledArrows?: boolean;
-    /**
-     * Возможность выбора месяца и года, если periodType 'month'
-     */
-    isMonthAndYearSelectable?: boolean;
-    /**
-     * Отображать ли текущий год, если isMonthAndYearSelectable true
-     */
-    showCurrentYearSelector?: boolean;
-    /**
-     * Функция для форматирование выбранного периода
-     */
-    periodFormatter?: (valueFrom: Date, valueTo: Date, periodType: PeriodType) => string;
-    /**
-     * Обработчик нажатия кнопки переключения на назад
-     */
-    onPrevArrowClick?: (event: MouseEvent<HTMLButtonElement>, payload: {
-        value: Date;
-        valueFrom: Date;
-        valueTo: Date;
-        periodType: PeriodType;
-    }) => void;
-    /**
-     * Обработчик нажатия кнопки переключения на вперед
-     */
-    onNextArrowClick?: (event: MouseEvent<HTMLButtonElement>, payload: {
-        value: Date;
-        valueFrom: Date;
-        valueTo: Date;
-        periodType: PeriodType;
-    }) => void;
-    /**
-     * Обработчик нажатия на селектор месяца
-     */
-    onMonthClick?: (event: MouseEvent<HTMLButtonElement>) => void;
-    /**
-     * Обработчик нажатия на селектор года
-     */
-    onYearClick?: (event: MouseEvent<HTMLButtonElement>) => void;
-    /**
-     * Обработчик нажатия на период
-     */
-    onPeriodClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
-    /**
-     * Идентификатор для систем автоматизированного тестирования
-     */
-    dataTestId?: string;
-};
-declare const PeriodSlider: FC<PeriodSliderProps>;
-export { PeriodType, PeriodSliderProps, PeriodSlider };
-export { shiftValues } from "./Component.desktop-8b5756fe";
+export * from "./Component-e2b6c730";
+export { shiftValues } from "./utils-e0a54580";

package/date-range-input/mobile-c219f8ca.d.ts

@@ -1 +1,367 @@
-export * from "./Component-8b5756fe";
+/// <reference types="react" />
+/// <reference types="react-transition-group" />
+import React from "react";
+import { ReactNode, FC, KeyboardEvent, MouseEvent, MutableRefObject, Ref, RefObject } from "react";
+import { CalendarDesktopProps } from "./Component.desktop-8b5756fe";
+import { TransitionProps } from "react-transition-group/Transition";
+import { CSSTransitionClassNames } from "react-transition-group/CSSTransition";
+import { NavigationBarProps } from "./types-83e2bd9e";
+type CalendarMobileProps = CalendarDesktopProps & {
+    /**
+     * Управление видимостью модалки
+     */
+    open: boolean;
+    /**
+     * Заголовок календаря
+     */
+    title?: string;
+    /**
+     * Обработчик закрытия модалки
+     */
+    onClose?: () => void;
+    /**
+     * Обработчик клика на название месяца в мобильном календаре
+     */
+    onMonthTitleClick?: (event: React.MouseEvent<HTMLSpanElement>) => void;
+    /**
+     * Количество лет для генерации в обе стороны от текущего года
+     */
+    yearsAmount?: number;
+    /**
+     * Нужно ли рендерить шапку
+     */
+    hasHeader?: boolean;
+    /**
+     * Разрешить выбор из недозаполненного диапазона дат.
+     */
+    allowSelectionFromEmptyRange?: boolean;
+};
+declare const CalendarMobile: React.ForwardRefExoticComponent<CalendarDesktopProps & {
+    open: boolean;
+    title?: string | undefined;
+    onClose?: (() => void) | undefined;
+    onMonthTitleClick?: ((event: React.MouseEvent<HTMLSpanElement>) => void) | undefined;
+    yearsAmount?: number | undefined;
+    hasHeader?: boolean | undefined;
+    allowSelectionFromEmptyRange?: boolean | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+type BackdropProps = Partial<TransitionProps> & {
+    /**
+     * Прозрачный бэкдроп
+     */
+    invisible?: boolean;
+    /**
+     * Управляет видимостью компонента
+     */
+    open: boolean;
+    /**
+     * Обработчик клика по бэкдропу
+     */
+    onClose?: (event: MouseEvent<HTMLElement>) => void;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Классы анимации
+     *
+     * http://reactcommunity.org/react-transition-group/css-transition#CSSTransition-prop-classNames
+     */
+    transitionClassNames?: string | CSSTransitionClassNames;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Дочерние элементы.
+     */
+    children?: ReactNode;
+};
+type PortalProps = {
+    /** Контент */
+    children?: ReactNode;
+    /**
+     * Функция, возвращающая контейнер, в который будут рендериться дочерние элементы
+     */
+    getPortalContainer?: () => Element;
+    /**
+     * Немедленно отрендерить дочерние элементы (false - контент будет отрендерен на след. рендер).
+     */
+    immediateMount?: boolean;
+};
+type BaseModalProps = {
+    /**
+     * Контент
+     */
+    children?: ReactNode;
+    /**
+     * Компонент бэкдропа
+     */
+    Backdrop?: FC<BackdropProps>;
+    /**
+     * Свойства для Бэкдропа
+     */
+    backdropProps?: Partial<BackdropProps> & Record<string, unknown>;
+    /**
+     * Нода, компонент или функция возвращающая их
+     *
+     * Контейнер к которому будут добавляться порталы
+     */
+    container?: PortalProps["getPortalContainer"];
+    /**
+     * Отключает автоматический перевод фокуса на модалку при открытии
+     * @default false
+     */
+    disableAutoFocus?: boolean;
+    /**
+     * Отключает ловушку фокуса
+     * @default false
+     */
+    disableFocusLock?: boolean;
+    /**
+     * Отключает восстановление фокуса на предыдущем элементе после закрытия модалки
+     * @default false
+     */
+    disableRestoreFocus?: boolean;
+    /**
+     * Отключает вызов `callback` при нажатии Escape
+     * @default false
+     */
+    disableEscapeKeyDown?: boolean;
+    /**
+     * Отключает вызов `callback` при клике на бэкдроп
+     * @default false
+     */
+    disableBackdropClick?: boolean;
+    /**
+     * Отключает блокировку скролла при открытии модального окна
+     * @default false
+     */
+    disableBlockingScroll?: boolean;
+    /**
+     * Содержимое модалки всегда в DOM
+     * @default false
+     */
+    keepMounted?: boolean;
+    /**
+     * Управление видимостью модалки
+     */
+    open: boolean;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс
+     */
+    contentClassName?: string;
+    /**
+     * Дополнительные пропсы на обертку контента
+     */
+    contentProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+    /**
+     * Дополнительные пропсы на компонентную обертку контента
+     */
+    componentDivProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+    /**
+     * Дополнительный класс для обертки (Modal)
+     */
+    wrapperClassName?: string;
+    /**
+     * Обработчик скролла контента
+     */
+    scrollHandler?: "wrapper" | "content" | MutableRefObject<HTMLDivElement | null>;
+    /**
+     * Пропсы для анимации (CSSTransition)
+     */
+    transitionProps?: Partial<TransitionProps>;
+    /**
+     * Рендерить ли в контейнер через портал.
+     * @default true
+     */
+    usePortal?: boolean;
+    /**
+     * Обработчик события нажатия на бэкдроп
+     */
+    onBackdropClick?: (event: MouseEvent) => void;
+    /**
+     * Обработчик события нажатия на Escape
+     *
+     * Если `disableEscapeKeyDown` - false и модальное окно в фокусе
+     */
+    onEscapeKeyDown?: (event: KeyboardEvent) => void;
+    /**
+     * Обработчик закрытия
+     */
+    onClose?: (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>, reason?: "backdropClick" | "escapeKeyDown" | "closerClick") => void;
+    /**
+     * Обработчик события onEntered компонента Transition
+     */
+    onMount?: () => void;
+    /**
+     * Обработчик события onExited компонента Transition
+     */
+    onUnmount?: () => void;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * z-index компонента
+     */
+    zIndex?: number;
+    /**
+     * Реф, который должен быть установлен компонентной области
+     */
+    componentRef?: MutableRefObject<HTMLDivElement | null>;
+};
+type BaseModalContext = {
+    parentRef: React.RefObject<HTMLDivElement>;
+    componentRef: React.RefObject<HTMLDivElement>;
+    hasFooter?: boolean;
+    hasHeader?: boolean;
+    hasScroll?: boolean;
+    headerHighlighted?: boolean;
+    footerHighlighted?: boolean;
+    headerOffset?: number;
+    setHeaderOffset: (offset: number) => void;
+    contentRef: Ref<HTMLElement>;
+    setHasHeader: (exists: boolean) => void;
+    setHasFooter: (exists: boolean) => void;
+    onClose: Required<BaseModalProps>["onClose"];
+};
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+declare const BaseModalContext: React.Context<BaseModalContext>;
+type ModalDesktopProps = BaseModalProps & {
+    /**
+     * Ширина модального окна
+     * @default "m"
+     */
+    size?: "s" | "m" | "l" | "xl" | "fullscreen";
+    /**
+     * Растягивает модальное окно на весь экран
+     * @deprecated Используйте размер fullscreen
+     */
+    fullscreen?: boolean;
+    /**
+     * Фиксирует позицию модального окна после открытия,
+     * предотвращая скачки, если контент внутри будет меняться
+     */
+    fixedPosition?: boolean;
+    /**
+     * Управление наличием закрывающего крестика
+     * @default false
+     */
+    hasCloser?: boolean;
+};
+type ModalMobileProps = Omit<ModalDesktopProps, "size" | "fixedPosition" | "fullscreen">;
+type View = "desktop" | "mobile";
+type TResponsiveModalContext = {
+    view: View;
+    size: NonNullable<ModalDesktopProps["size"]>;
+};
+type ContentProps = {
+    /**
+     * Контент
+     */
+    children?: ReactNode;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Растягивает контент на всю высоту
+     */
+    flex?: boolean;
+};
+type HeaderProps = Omit<NavigationBarProps, "size" | "view" | "parentRef">;
+type FooterProps = {
+    /**
+     * Контент футера
+     */
+    children?: ReactNode;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Фиксирует футер
+     */
+    sticky?: boolean;
+    /**
+     * Выравнивание элементов футера
+     */
+    layout?: "start" | "center" | "space-between" | "column";
+    /**
+     * Отступы между элементами футера
+     */
+    gap?: 16 | 24 | 32;
+};
+declare const ModalMobile: React.ForwardRefExoticComponent<ModalMobileProps & React.RefAttributes<HTMLDivElement>> & {
+    Content: React.FC<ContentProps>;
+    Header: React.FC<HeaderProps>;
+    Footer: React.FC<FooterProps>;
+};
+declare const Content: FC<ContentProps>;
+declare const ResponsiveContext: React.Context<TResponsiveModalContext>;
+declare const Modal: React.ForwardRefExoticComponent<BaseModalProps & {
+    size?: "s" | "m" | "l" | "xl" | "fullscreen" | undefined;
+    fullscreen?: boolean | undefined;
+    fixedPosition?: boolean | undefined;
+    hasCloser?: boolean | undefined;
+} & {
+    view: View;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const ModalContext: import("react").Context<BaseModalContext>;
+/**
+ * Набор констант для z-index соответствующих классов компонентов.
+ * Значения выбраны по приоритету.
+ */
+declare const stackingOrder: {
+    FOCUSED: number;
+    DEFAULT: number;
+    POPOVER: number;
+    MODAL: number;
+    TOAST: number;
+};
+declare const StackingContext: import("react").Context<number>;
+type StackProps = {
+    /**
+     * Render prop, в который передается функция.
+     * Функция принимает аргумент со значением z-index из текущего контекста.
+     */
+    children: (value: number) => ReactNode;
+    /**
+     * Исходное значение для z-index.
+     * @default 5
+     */
+    value?: number;
+};
+declare const Stack: FC<StackProps>;
+declare const PORTAL_CONTAINER_ATTRIBUTE = "alfa-portal-container";
+declare const getDefaultPortalContainer: () => Element;
+declare function setRef<T>(ref: RefObject<T> | ((instance: T | null) => void) | null | undefined, value: T | null): void;
+type SavedStyle = {
+    value: string;
+    key: string;
+    el: HTMLElement;
+};
+type RestoreStyle = {
+    container: HTMLElement;
+    modals: number;
+    styles: SavedStyle[];
+};
+declare class ModalStore {
+    private readonly restoreStyles;
+    constructor();
+    getRestoreStyles: () => RestoreStyle[];
+}
+declare const getModalStore: () => ModalStore;
+declare class GlobalStore {
+    private readonly modalStore;
+    constructor();
+    getModalStore: () => ModalStore;
+}
+export { CalendarMobileProps, CalendarMobile, ModalMobile, ModalMobileProps, Content, ResponsiveContext, Modal, ModalContext, stackingOrder, StackingContext, StackProps, Stack, PORTAL_CONTAINER_ATTRIBUTE, getDefaultPortalContainer, setRef, getModalStore, GlobalStore };
+export * from "./Component.mobile-755fbaa3";
+export type { SavedStyle };

package/date-range-input/modern/components/date-range-input/Component.js

@@ -11,7 +11,7 @@ import { CalendarMIcon } from '@alfalab/icons-glyph/CalendarMIcon';
 import { parseTimestampToDate, DATE_FORMAT, format, parseDateString, DATE_MASK, isCompleteDateInput, isValid } from '../../utils/format.js';
 import 'date-fns/parse';
 
-const styles = {"component":"date-range-input__component_1hlg2","calendarContainer":"date-range-input__calendarContainer_1hlg2","calendarResponsive":"date-range-input__calendarResponsive_1hlg2","block":"date-range-input__block_1hlg2","calendarIcon":"date-range-input__calendarIcon_1hlg2"};
+const styles = {"component":"date-range-input__component_r7x48","calendarContainer":"date-range-input__calendarContainer_r7x48","calendarResponsive":"date-range-input__calendarResponsive_r7x48","block":"date-range-input__block_r7x48","calendarIcon":"date-range-input__calendarIcon_r7x48"};
 require('./index.css');
 
 /* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */
@@ -103,7 +103,7 @@ const DateRangeInput = React.forwardRef(({ className, inputClassName, popoverCla
     };
     const handleInputKeyDown = (event) => {
         const isCopy = (event.metaKey || event.ctrlKey) && event.key === 'c';
-        if (disableUserInput && !isCopy) {
+        if (disableUserInput && !isCopy && event.key !== 'Tab') {
             event.preventDefault();
         }
     };

package/date-range-input/modern/components/date-range-input/index.css

@@ -41,24 +41,24 @@
     /* marker */
 } :root {
     --calendar-popover-border-radius: var(--border-radius-m);
-} .date-range-input__component_1hlg2 {
+} .date-range-input__component_r7x48 {
     display: inline-block;
     outline: none;
     position: relative;
-} .date-range-input__calendarContainer_1hlg2 {
+} .date-range-input__calendarContainer_r7x48 {
     display: inline-block;
     box-sizing: border-box;
     border-radius: var(--calendar-popover-border-radius);
     border: 1px solid var(--color-light-border-secondary)
-} @media (max-width: 374px) { .date-range-input__calendarContainer_1hlg2 {
+} @media (max-width: 374px) { .date-range-input__calendarContainer_r7x48 {
         width: 100%;
         min-width: 288px
 }
-    } .date-range-input__calendarResponsive_1hlg2 {
+    } .date-range-input__calendarResponsive_r7x48 {
     width: var(--calendar-width);
-} .date-range-input__block_1hlg2 {
+} .date-range-input__block_r7x48 {
     width: 100%;
-} .date-range-input__calendarIcon_1hlg2 {
+} .date-range-input__calendarIcon_r7x48 {
     margin-right: var(--gap-s-neg);
     height: 100%;
 }

package/date-range-input/utils-e0a54580.d.ts

@@ -0,0 +1,8 @@
+import { PeriodType } from "./index-f034f741";
+declare const formatPeriod: (valueFrom: Date, valueTo: Date, periodType: PeriodType, showCurrentYear?: boolean) => string;
+declare const getYearSelectorValue: (valueFrom: Date | undefined, showCurrentYear: boolean) => number | "";
+declare const shiftValues: (valueFrom: Date, valueTo: Date, periodType: PeriodType, direction: 'prev' | 'next') => {
+    valueFrom: Date;
+    valueTo: Date;
+};
+export { formatPeriod, getYearSelectorValue, shiftValues };

package/date-time-input/components/date-time-input/Component.js

@@ -19,7 +19,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"component":"date-time-input__component_lpiiq","calendarContainer":"date-time-input__calendarContainer_lpiiq","calendarResponsive":"date-time-input__calendarResponsive_lpiiq","block":"date-time-input__block_lpiiq","calendarIcon":"date-time-input__calendarIcon_lpiiq"};
+var styles = {"component":"date-time-input__component_adunq","calendarContainer":"date-time-input__calendarContainer_adunq","calendarResponsive":"date-time-input__calendarResponsive_adunq","block":"date-time-input__block_adunq","calendarIcon":"date-time-input__calendarIcon_adunq"};
 require('./index.css');
 
 /* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */
@@ -120,7 +120,7 @@ var DateTimeInput = React__default.default.forwardRef(function (_a, ref) {
     };
     var handleInputKeyDown = function (event) {
         var isCopy = (event.metaKey || event.ctrlKey) && event.key === 'c';
-        if (disableUserInput && !isCopy) {
+        if (disableUserInput && !isCopy && event.key !== 'Tab') {
             event.preventDefault();
         }
     };

package/date-time-input/components/date-time-input/index.css

@@ -41,24 +41,24 @@
     /* marker */
 } :root {
     --calendar-popover-border-radius: var(--border-radius-m);
-} .date-time-input__component_lpiiq {
+} .date-time-input__component_adunq {
     display: inline-block;
     outline: none;
     position: relative;
-} .date-time-input__calendarContainer_lpiiq {
+} .date-time-input__calendarContainer_adunq {
     display: inline-block;
     box-sizing: border-box;
     border-radius: var(--calendar-popover-border-radius);
     border: 1px solid var(--color-light-border-secondary)
-} @media (max-width: 374px) { .date-time-input__calendarContainer_lpiiq {
+} @media (max-width: 374px) { .date-time-input__calendarContainer_adunq {
         width: 100%;
         min-width: 288px
 }
-    } .date-time-input__calendarResponsive_lpiiq {
+    } .date-time-input__calendarResponsive_adunq {
     width: var(--calendar-width);
-} .date-time-input__block_lpiiq {
+} .date-time-input__block_adunq {
     width: 100%;
-} .date-time-input__calendarIcon_lpiiq {
+} .date-time-input__calendarIcon_adunq {
     margin-right: var(--gap-s-neg);
     height: 100%;
 }

package/date-time-input/cssm/components/date-time-input/Component.js

@@ -119,7 +119,7 @@ var DateTimeInput = React__default.default.forwardRef(function (_a, ref) {
     };
     var handleInputKeyDown = function (event) {
         var isCopy = (event.metaKey || event.ctrlKey) && event.key === 'c';
-        if (disableUserInput && !isCopy) {
+        if (disableUserInput && !isCopy && event.key !== 'Tab') {
             event.preventDefault();
         }
     };

package/date-time-input/esm/components/date-time-input/Component.js

@@ -11,7 +11,7 @@ import { getDateWithoutTime, DATE_WITH_TIME_LENGTH, format, getFullDateTime, isC
 import 'date-fns/isValid';
 import 'date-fns/parse';
 
-var styles = {"component":"date-time-input__component_lpiiq","calendarContainer":"date-time-input__calendarContainer_lpiiq","calendarResponsive":"date-time-input__calendarResponsive_lpiiq","block":"date-time-input__block_lpiiq","calendarIcon":"date-time-input__calendarIcon_lpiiq"};
+var styles = {"component":"date-time-input__component_adunq","calendarContainer":"date-time-input__calendarContainer_adunq","calendarResponsive":"date-time-input__calendarResponsive_adunq","block":"date-time-input__block_adunq","calendarIcon":"date-time-input__calendarIcon_adunq"};
 require('./index.css');
 
 /* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */
@@ -112,7 +112,7 @@ var DateTimeInput = React.forwardRef(function (_a, ref) {
     };
     var handleInputKeyDown = function (event) {
         var isCopy = (event.metaKey || event.ctrlKey) && event.key === 'c';
-        if (disableUserInput && !isCopy) {
+        if (disableUserInput && !isCopy && event.key !== 'Tab') {
             event.preventDefault();
         }
     };

package/date-time-input/esm/components/date-time-input/index.css

@@ -41,24 +41,24 @@
     /* marker */
 } :root {
     --calendar-popover-border-radius: var(--border-radius-m);
-} .date-time-input__component_lpiiq {
+} .date-time-input__component_adunq {
     display: inline-block;
     outline: none;
     position: relative;
-} .date-time-input__calendarContainer_lpiiq {
+} .date-time-input__calendarContainer_adunq {
     display: inline-block;
     box-sizing: border-box;
     border-radius: var(--calendar-popover-border-radius);
     border: 1px solid var(--color-light-border-secondary)
-} @media (max-width: 374px) { .date-time-input__calendarContainer_lpiiq {
+} @media (max-width: 374px) { .date-time-input__calendarContainer_adunq {
         width: 100%;
         min-width: 288px
 }
-    } .date-time-input__calendarResponsive_lpiiq {
+    } .date-time-input__calendarResponsive_adunq {
     width: var(--calendar-width);
-} .date-time-input__block_lpiiq {
+} .date-time-input__block_adunq {
     width: 100%;
-} .date-time-input__calendarIcon_lpiiq {
+} .date-time-input__calendarIcon_adunq {
     margin-right: var(--gap-s-neg);
     height: 100%;
 }

package/date-time-input/modern/components/date-time-input/Component.js

@@ -10,7 +10,7 @@ import { getDateWithoutTime, DATE_WITH_TIME_LENGTH, format, getFullDateTime, isC
 import 'date-fns/isValid';
 import 'date-fns/parse';
 
-const styles = {"component":"date-time-input__component_lpiiq","calendarContainer":"date-time-input__calendarContainer_lpiiq","calendarResponsive":"date-time-input__calendarResponsive_lpiiq","block":"date-time-input__block_lpiiq","calendarIcon":"date-time-input__calendarIcon_lpiiq"};
+const styles = {"component":"date-time-input__component_adunq","calendarContainer":"date-time-input__calendarContainer_adunq","calendarResponsive":"date-time-input__calendarResponsive_adunq","block":"date-time-input__block_adunq","calendarIcon":"date-time-input__calendarIcon_adunq"};
 require('./index.css');
 
 /* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */
@@ -108,7 +108,7 @@ const DateTimeInput = React.forwardRef(({ className, inputClassName, popoverClas
     };
     const handleInputKeyDown = (event) => {
         const isCopy = (event.metaKey || event.ctrlKey) && event.key === 'c';
-        if (disableUserInput && !isCopy) {
+        if (disableUserInput && !isCopy && event.key !== 'Tab') {
             event.preventDefault();
         }
     };

package/date-time-input/modern/components/date-time-input/index.css

@@ -41,24 +41,24 @@
     /* marker */
 } :root {
     --calendar-popover-border-radius: var(--border-radius-m);
-} .date-time-input__component_lpiiq {
+} .date-time-input__component_adunq {
     display: inline-block;
     outline: none;
     position: relative;
-} .date-time-input__calendarContainer_lpiiq {
+} .date-time-input__calendarContainer_adunq {
     display: inline-block;
     box-sizing: border-box;
     border-radius: var(--calendar-popover-border-radius);
     border: 1px solid var(--color-light-border-secondary)
-} @media (max-width: 374px) { .date-time-input__calendarContainer_lpiiq {
+} @media (max-width: 374px) { .date-time-input__calendarContainer_adunq {
         width: 100%;
         min-width: 288px
 }
-    } .date-time-input__calendarResponsive_lpiiq {
+    } .date-time-input__calendarResponsive_adunq {
     width: var(--calendar-width);
-} .date-time-input__block_lpiiq {
+} .date-time-input__block_adunq {
     width: 100%;
-} .date-time-input__calendarIcon_lpiiq {
+} .date-time-input__calendarIcon_adunq {
     margin-right: var(--gap-s-neg);
     height: 100%;
 }