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

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

@@ -23,7 +23,7 @@ var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 var dateFnsIsValid__default = /*#__PURE__*/_interopDefaultCompat(dateFnsIsValid);
 
-var 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"};
+var 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')
 
 var DateRangeInput = React__default.default.forwardRef(function (_a, ref) {
@@ -116,12 +116,6 @@ var DateRangeInput = React__default.default.forwardRef(function (_a, ref) {
             }
         }
     };
-    var handleInputKeyDown = function (event) {
-        var isCopy = (event.metaKey || event.ctrlKey) && event.key === 'c';
-        if (disableUserInput && !isCopy && event.key !== 'Tab') {
-            event.preventDefault();
-        }
-    };
     var handleBlur = function (event) {
         var _a, _b, _c;
         if (view === 'desktop') {
@@ -220,7 +214,7 @@ var DateRangeInput = React__default.default.forwardRef(function (_a, ref) {
     return (React__default.default.createElement("div", { className: cn__default.default(styles.component, className, (_b = {},
             _b[styles.block] = block,
             _b)), onFocus: inputDisabled ? undefined : handleInputWrapperFocus, onBlur: handleBlur },
-        InputComponent ? (React__default.default.createElement(InputComponent, tslib.__assign({}, restProps, { block: block, ref: mergeRefs__default.default([ref, inputRef]), value: value, onChange: handleChange, disabled: disabled, readOnly: readOnly, className: inputClassName, onClear: handleClear, onKeyDown: handleInputKeyDown, rightAddons: React__default.default.createElement(React__default.default.Fragment, null,
+        InputComponent ? (React__default.default.createElement(InputComponent, tslib.__assign({}, restProps, { block: block, ref: mergeRefs__default.default([ref, inputRef]), value: value, onChange: handleChange, disabled: disabled, readOnly: readOnly, className: inputClassName, onClear: handleClear, disableUserInput: disableUserInput, rightAddons: React__default.default.createElement(React__default.default.Fragment, null,
                 rightAddons,
                 picker && (React__default.default.createElement(coreComponentsIconButton.IconButton, { className: styles.calendarIcon, ref: iconRef, onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon.CalendarMIcon, size: 's' }))) }))) : null,
         picker && (React__default.default.createElement(coreComponentsPopover.Popover, { open: open, useAnchorWidth: useAnchorWidth, anchorElement: inputRef.current, popperClassName: cn__default.default(styles.calendarContainer, (_c = {},

package/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/cssm/components/date-range-input/Component.js

@@ -115,12 +115,6 @@ var DateRangeInput = React__default.default.forwardRef(function (_a, ref) {
             }
         }
     };
-    var handleInputKeyDown = function (event) {
-        var isCopy = (event.metaKey || event.ctrlKey) && event.key === 'c';
-        if (disableUserInput && !isCopy && event.key !== 'Tab') {
-            event.preventDefault();
-        }
-    };
     var handleBlur = function (event) {
         var _a, _b, _c;
         if (view === 'desktop') {
@@ -219,7 +213,7 @@ var DateRangeInput = React__default.default.forwardRef(function (_a, ref) {
     return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component, className, (_b = {},
             _b[styles__default.default.block] = block,
             _b)), onFocus: inputDisabled ? undefined : handleInputWrapperFocus, onBlur: handleBlur },
-        InputComponent ? (React__default.default.createElement(InputComponent, tslib.__assign({}, restProps, { block: block, ref: mergeRefs__default.default([ref, inputRef]), value: value, onChange: handleChange, disabled: disabled, readOnly: readOnly, className: inputClassName, onClear: handleClear, onKeyDown: handleInputKeyDown, rightAddons: React__default.default.createElement(React__default.default.Fragment, null,
+        InputComponent ? (React__default.default.createElement(InputComponent, tslib.__assign({}, restProps, { block: block, ref: mergeRefs__default.default([ref, inputRef]), value: value, onChange: handleChange, disabled: disabled, readOnly: readOnly, className: inputClassName, onClear: handleClear, disableUserInput: disableUserInput, rightAddons: React__default.default.createElement(React__default.default.Fragment, null,
                 rightAddons,
                 picker && (React__default.default.createElement(coreComponentsIconButton.IconButton, { className: styles__default.default.calendarIcon, ref: iconRef, onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon.CalendarMIcon, size: 's' }))) }))) : null,
         picker && (React__default.default.createElement(coreComponentsPopover.Popover, { open: open, useAnchorWidth: useAnchorWidth, anchorElement: inputRef.current, popperClassName: cn__default.default(styles__default.default.calendarContainer, (_c = {},

package/cssm/{index-50136800.d.ts → 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/esm/components/date-range-input/Component.js

@@ -12,7 +12,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';
 
-var 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"};
+var 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')
 
 var DateRangeInput = React.forwardRef(function (_a, ref) {
@@ -105,12 +105,6 @@ var DateRangeInput = React.forwardRef(function (_a, ref) {
             }
         }
     };
-    var handleInputKeyDown = function (event) {
-        var isCopy = (event.metaKey || event.ctrlKey) && event.key === 'c';
-        if (disableUserInput && !isCopy && event.key !== 'Tab') {
-            event.preventDefault();
-        }
-    };
     var handleBlur = function (event) {
         var _a, _b, _c;
         if (view === 'desktop') {
@@ -209,7 +203,7 @@ var DateRangeInput = React.forwardRef(function (_a, ref) {
     return (React.createElement("div", { className: cn(styles.component, className, (_b = {},
             _b[styles.block] = block,
             _b)), onFocus: inputDisabled ? undefined : handleInputWrapperFocus, onBlur: handleBlur },
-        InputComponent ? (React.createElement(InputComponent, __assign({}, 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, __assign({}, 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, (_c = {},

package/esm/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/{modern/index-50136800.d.ts → esm/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/{esm/index-50136800.d.ts → 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/index-9211a437.d.ts

@@ -1,2 +1,2 @@
-export { Button } from "./Component.responsive-755fbaa3";
+export { Button } from "./Component.responsive-2e2b2125";
 export type { ButtonProps } from "./typings-9211a437";

package/index-ebda875c.d.ts

@@ -1,135 +1,35 @@
 /// <reference types="react" />
 import React from "react";
-import { HTMLAttributes, ReactNode } from "react";
-type StyleColors = {
-    default: {
-        [key: string]: string;
-    };
-    inverted: {
-        [key: string]: string;
-    };
-};
-type BaseFormControlProps = HTMLAttributes<HTMLDivElement> & {
+import { ButtonHTMLAttributes, ElementType, FC } from "react";
+interface CloserProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     /**
-     * Растягивает компонент на ширину контейнера
+     * Вид компонента
      */
-    block?: boolean;
-    /**
-     * Размер компонента
-     */
-    size?: "s" | "m" | "l" | "xl";
-    /**
-     * Набор цветов для компонента
-     */
-    colors?: "default" | "inverted";
-    /**
-     * Заблокированное состояние
-     */
-    disabled?: boolean;
-    /**
-     * Cостояние только для чтения
-     */
-    readOnly?: boolean;
-    /**
-     * Заполненное состояние
-     */
-    filled?: boolean;
-    /**
-     * Выбранное (фокус) состояние
-     */
-    focused?: boolean;
-    /**
-     * Отображение ошибки
-     */
-    error?: ReactNode | boolean;
-    /**
-     * Текст подсказки
-     */
-    hint?: ReactNode;
-    /**
-     * Лейбл компонента
-     */
-    label?: ReactNode;
-    /**
-     * Вид лейбла внутри / снаружи
-     */
-    labelView?: "inner" | "outer";
-    /**
-     * Слот слева
-     */
-    leftAddons?: ReactNode;
-    /**
-     * Слот справа
-     */
-    rightAddons?: ReactNode;
-    /**
-     * Слот под полем
-     */
-    bottomAddons?: ReactNode;
+    view: "desktop" | "mobile";
     /**
      * Дополнительный класс
      */
     className?: string;
     /**
-     * Дополнительный класс для поля
-     */
-    fieldClassName?: string;
-    /**
-     * Дополнительный класс для поля
+     * Позиция крестика
      */
-    inputWrapperClassName?: string;
+    align?: "left" | "right";
     /**
-     * Дополнительный класс для лейбла
+     * Фиксирует крестик
      */
-    labelClassName?: string;
+    sticky?: boolean;
     /**
-     * Дополнительный класс для аддонов
+     * Иконка
      */
-    addonsClassName?: string;
+    icon?: ElementType;
     /**
      * Идентификатор для систем автоматизированного тестирования
      */
     dataTestId?: string;
     /**
-     * Компонент поля (инпут, textarea и пр.)
-     */
-    children?: ReactNode;
-    /**
-     * Основные стили компонента.
-     */
-    styles: {
-        [key: string]: string;
-    };
-    /**
-     * Стили компонента для default и inverted режима.
+     * Коллбэк закрытия.
      */
-    colorStyles?: StyleColors;
-};
-declare const BaseFormControl: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
-    block?: boolean | undefined;
-    size?: "s" | "m" | "l" | "xl" | undefined;
-    colors?: "default" | "inverted" | undefined;
-    disabled?: boolean | undefined;
-    readOnly?: boolean | undefined;
-    filled?: boolean | undefined;
-    focused?: boolean | undefined;
-    error?: ReactNode | boolean;
-    hint?: ReactNode;
-    label?: ReactNode;
-    labelView?: "inner" | "outer" | undefined;
-    leftAddons?: ReactNode;
-    rightAddons?: ReactNode;
-    bottomAddons?: ReactNode;
-    className?: string | undefined;
-    fieldClassName?: string | undefined;
-    inputWrapperClassName?: string | undefined;
-    labelClassName?: string | undefined;
-    addonsClassName?: string | undefined;
-    dataTestId?: string | undefined;
-    children?: ReactNode;
-    styles: {
-        [key: string]: string;
-    };
-    colorStyles?: StyleColors | undefined;
-} & React.RefAttributes<HTMLDivElement>>;
-export { StyleColors, BaseFormControlProps, BaseFormControl };
+    onClose?: (event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, reason?: "backdropClick" | "escapeKeyDown" | "closerClick") => void;
+}
+declare const Closer: FC<CloserProps>;
+export { CloserProps, Closer };

package/index-f034f741.d.ts

@@ -1,2 +1,80 @@
-export * from "./Component-e2b6c730";
-export { shiftValues } from "./utils-e0a54580";
+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";