@alfalab/core-components-date-range-input 3.0.4 → 3.0.6

package/mobile-c219f8ca.d.ts

@@ -1,367 +1 @@
-/// <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 };
+export * from "./Component-8b5756fe";

package/modern/Component-2abb571d.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from 'react';
+import { NavigationBarProps } from "./types-83e2bd9e";
+declare const NavigationBar: React.ForwardRefExoticComponent<NavigationBarProps & React.RefAttributes<HTMLDivElement>>;
+export * from "./Component-63dec22f";
+export { NavigationBar };

package/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_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"};
+const styles = {"component":"date-range-input__component_1v70p","calendarContainer":"date-range-input__calendarContainer_1v70p","calendarResponsive":"date-range-input__calendarResponsive_1v70p","block":"date-range-input__block_1v70p","calendarIcon":"date-range-input__calendarIcon_1v70p"};
 require('./index.css')
 
 /* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */
@@ -101,12 +101,6 @@ const DateRangeInput = React.forwardRef(({ className, inputClassName, popoverCla
             }
         }
     };
-    const handleInputKeyDown = (event) => {
-        const isCopy = (event.metaKey || event.ctrlKey) && event.key === 'c';
-        if (disableUserInput && !isCopy && event.key !== 'Tab') {
-            event.preventDefault();
-        }
-    };
     const handleBlur = (event) => {
         if (view === 'desktop') {
             const target = (event.relatedTarget || document.activeElement);
@@ -203,7 +197,7 @@ const DateRangeInput = React.forwardRef(({ className, inputClassName, popoverCla
     return (React.createElement("div", { className: cn(styles.component, className, {
             [styles.block]: block,
         }), onFocus: inputDisabled ? undefined : handleInputWrapperFocus, onBlur: handleBlur },
-        InputComponent ? (React.createElement(InputComponent, { ...restProps, block: block, ref: mergeRefs([ref, inputRef]), value: value, onChange: handleChange, disabled: disabled, readOnly: readOnly, className: inputClassName, onClear: handleClear, onKeyDown: handleInputKeyDown, rightAddons: React.createElement(React.Fragment, null,
+        InputComponent ? (React.createElement(InputComponent, { ...restProps, block: block, ref: mergeRefs([ref, inputRef]), value: value, onChange: handleChange, disabled: disabled, readOnly: readOnly, className: inputClassName, onClear: handleClear, disableUserInput: disableUserInput, rightAddons: React.createElement(React.Fragment, null,
                 rightAddons,
                 picker && (React.createElement(IconButton, { className: styles.calendarIcon, ref: iconRef, onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon, size: 's' }))) })) : null,
         picker && (React.createElement(Popover, { open: open, useAnchorWidth: useAnchorWidth, anchorElement: inputRef.current, popperClassName: cn(styles.calendarContainer, {

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

@@ -1,4 +1,4 @@
-/* hash: 19mkh */
+/* hash: 113ul */
 :root {
 } /* deprecated */ :root {
     --color-light-border-secondary: #e9e9eb; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -41,24 +41,24 @@
     /* marker */
 } :root {
     --calendar-popover-border-radius: var(--border-radius-m);
-} .date-range-input__component_r7x48 {
+} .date-range-input__component_1v70p {
     display: inline-block;
     outline: none;
     position: relative;
-} .date-range-input__calendarContainer_r7x48 {
+} .date-range-input__calendarContainer_1v70p {
     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_r7x48 {
+} @media (max-width: 374px) { .date-range-input__calendarContainer_1v70p {
         width: 100%;
         min-width: 288px
 }
-    } .date-range-input__calendarResponsive_r7x48 {
+    } .date-range-input__calendarResponsive_1v70p {
     width: var(--calendar-width);
-} .date-range-input__block_r7x48 {
+} .date-range-input__block_1v70p {
     width: 100%;
-} .date-range-input__calendarIcon_r7x48 {
+} .date-range-input__calendarIcon_1v70p {
     margin-right: var(--gap-s-neg);
     height: 100%;
 }

package/{index-50136800.d.ts → modern/index-2abb571d.d.ts}

@@ -8,4 +8,8 @@ declare function easeInOutQuad(x: number): number;
 declare const easingFns: {
     easeInOutQuad: typeof easeInOutQuad;
 };
-export { isClient, getDataTestId, createPaddingStyle, easingFns };
+declare function disableUserInput<T>(disabled: boolean | undefined, event: React.KeyboardEvent<T>): void;
+declare const inputUtils: {
+    disableUserInput: typeof disableUserInput;
+};
+export { isClient, getDataTestId, createPaddingStyle, easingFns, inputUtils };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-date-range-input",
-    "version": "3.0.4",
+    "version": "3.0.6",
     "description": "",
     "keywords": [],
     "license": "MIT",
@@ -35,9 +35,9 @@
         "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
     "dependencies": {
-        "@alfalab/core-components-input": "^12.0.2",
-        "@alfalab/core-components-icon-button": "^6.2.2",
-        "@alfalab/core-components-calendar": "^7.0.3",
+        "@alfalab/core-components-input": "^12.1.1",
+        "@alfalab/core-components-icon-button": "^6.2.3",
+        "@alfalab/core-components-calendar": "^7.0.4",
         "@alfalab/core-components-popover": "^6.1.0",
         "@alfalab/hooks": "^1.13.0",
         "@alfalab/icons-glyph": "^2.108.0",

package/src/components/date-range-input/Component.tsx

@@ -3,7 +3,6 @@ import React, {
     ChangeEvent,
     ElementType,
     FocusEvent,
-    KeyboardEvent,
     MouseEvent,
     useEffect,
     useRef,
@@ -316,14 +315,6 @@ export const DateRangeInput = React.forwardRef<HTMLInputElement, DateRangeInputP
             }
         };
 
-        const handleInputKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
-            const isCopy = (event.metaKey || event.ctrlKey) && event.key === 'c';
-
-            if (disableUserInput && !isCopy && event.key !== 'Tab') {
-                event.preventDefault();
-            }
-        };
-
         const handleBlur = (event: FocusEvent<HTMLDivElement>) => {
             if (view === 'desktop') {
                 const target = (event.relatedTarget || document.activeElement) as HTMLElement;
@@ -476,7 +467,7 @@ export const DateRangeInput = React.forwardRef<HTMLInputElement, DateRangeInputP
                         readOnly={readOnly}
                         className={inputClassName}
                         onClear={handleClear}
-                        onKeyDown={handleInputKeyDown}
+                        disableUserInput={disableUserInput}
                         rightAddons={
                             <React.Fragment>
                                 {rightAddons}