@alfalab/core-components-calendar-input 10.2.26 → 10.3.0

package/components/calendar-input/Component.js

@@ -18,7 +18,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"component":"calendar-input__component_1dy3w","block":"calendar-input__block_1dy3w","calendarContainer":"calendar-input__calendarContainer_1dy3w","calendarResponsive":"calendar-input__calendarResponsive_1dy3w","calendarIcon":"calendar-input__calendarIcon_1dy3w","nativeInput":"calendar-input__nativeInput_1dy3w"};
+var styles = {"component":"calendar-input__component_psfsj","block":"calendar-input__block_psfsj","calendarContainer":"calendar-input__calendarContainer_psfsj","calendarResponsive":"calendar-input__calendarResponsive_psfsj","calendarIcon":"calendar-input__calendarIcon_psfsj","nativeInput":"calendar-input__nativeInput_psfsj"};
 require('./index.css')
 
 var CalendarInput = React.forwardRef(function (_a, ref) {

package/components/calendar-input/index.css

@@ -1,4 +1,4 @@
-/* hash: 15wka */
+/* hash: 1vpiz */
 :root { /* 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 */ /* 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 */ :root {
     --color-light-neutral-300: #e7e8eb;
@@ -48,31 +48,31 @@
 } :root {
     --calendar-input-icon-color: var(--color-light-neutral-translucent-700);
     --calendar-input-popover-border-radius: var(--border-radius-m);
-} .calendar-input__component_1dy3w {
+} .calendar-input__component_psfsj {
     display: inline-block;
     outline: none;
     position: relative;
-} .calendar-input__block_1dy3w {
+} .calendar-input__block_psfsj {
     width: 100%;
-} .calendar-input__calendarContainer_1dy3w {
+} .calendar-input__calendarContainer_psfsj {
     display: inline-block;
     box-sizing: border-box;
     border-radius: var(--calendar-input-popover-border-radius);
     border: 1px solid var(--color-light-neutral-300)
-} @media (max-width: 374px) { .calendar-input__calendarContainer_1dy3w {
+} @media (max-width: 374px) { .calendar-input__calendarContainer_psfsj {
         width: 100%;
         min-width: 288px
 }
-    } .calendar-input__calendarResponsive_1dy3w {
+    } .calendar-input__calendarResponsive_psfsj {
     width: var(--calendar-width);
-} .calendar-input__calendarIcon_1dy3w {
+} .calendar-input__calendarIcon_psfsj {
     width: 24px;
     height: 24px;
     display: block;
     color: var(--calendar-input-icon-color)
-} .calendar-input__calendarIcon_1dy3w:not(:only-child) {
+} .calendar-input__calendarIcon_psfsj:not(:only-child) {
         margin-right: var(--gap-4);
-    } .calendar-input__nativeInput_1dy3w {
+    } .calendar-input__nativeInput_psfsj {
     opacity: 0;
     position: absolute;
     top: 0;
@@ -81,8 +81,8 @@
     height: 100%;
     appearance: none;
     z-index: 1
-} .calendar-input__nativeInput_1dy3w::-webkit-calendar-picker-indicator {
+} .calendar-input__nativeInput_psfsj::-webkit-calendar-picker-indicator {
         display: none;
-    } .calendar-input__nativeInput_1dy3w::-webkit-inner-spin-button {
+    } .calendar-input__nativeInput_psfsj::-webkit-inner-spin-button {
         display: none;
     }

package/esm/components/calendar-input/Component.js

@@ -8,7 +8,7 @@ import { Popover } from '@alfalab/core-components-popover/esm';
 import { CalendarMIcon } from '@alfalab/icons-glyph/CalendarMIcon';
 import { SUPPORTS_INPUT_TYPE_DATE } from '../../utils.js';
 
-var styles = {"component":"calendar-input__component_1dy3w","block":"calendar-input__block_1dy3w","calendarContainer":"calendar-input__calendarContainer_1dy3w","calendarResponsive":"calendar-input__calendarResponsive_1dy3w","calendarIcon":"calendar-input__calendarIcon_1dy3w","nativeInput":"calendar-input__nativeInput_1dy3w"};
+var styles = {"component":"calendar-input__component_psfsj","block":"calendar-input__block_psfsj","calendarContainer":"calendar-input__calendarContainer_psfsj","calendarResponsive":"calendar-input__calendarResponsive_psfsj","calendarIcon":"calendar-input__calendarIcon_psfsj","nativeInput":"calendar-input__nativeInput_psfsj"};
 require('./index.css')
 
 var CalendarInput = forwardRef(function (_a, ref) {

package/esm/components/calendar-input/index.css

@@ -1,4 +1,4 @@
-/* hash: 15wka */
+/* hash: 1vpiz */
 :root { /* 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 */ /* 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 */ :root {
     --color-light-neutral-300: #e7e8eb;
@@ -48,31 +48,31 @@
 } :root {
     --calendar-input-icon-color: var(--color-light-neutral-translucent-700);
     --calendar-input-popover-border-radius: var(--border-radius-m);
-} .calendar-input__component_1dy3w {
+} .calendar-input__component_psfsj {
     display: inline-block;
     outline: none;
     position: relative;
-} .calendar-input__block_1dy3w {
+} .calendar-input__block_psfsj {
     width: 100%;
-} .calendar-input__calendarContainer_1dy3w {
+} .calendar-input__calendarContainer_psfsj {
     display: inline-block;
     box-sizing: border-box;
     border-radius: var(--calendar-input-popover-border-radius);
     border: 1px solid var(--color-light-neutral-300)
-} @media (max-width: 374px) { .calendar-input__calendarContainer_1dy3w {
+} @media (max-width: 374px) { .calendar-input__calendarContainer_psfsj {
         width: 100%;
         min-width: 288px
 }
-    } .calendar-input__calendarResponsive_1dy3w {
+    } .calendar-input__calendarResponsive_psfsj {
     width: var(--calendar-width);
-} .calendar-input__calendarIcon_1dy3w {
+} .calendar-input__calendarIcon_psfsj {
     width: 24px;
     height: 24px;
     display: block;
     color: var(--calendar-input-icon-color)
-} .calendar-input__calendarIcon_1dy3w:not(:only-child) {
+} .calendar-input__calendarIcon_psfsj:not(:only-child) {
         margin-right: var(--gap-4);
-    } .calendar-input__nativeInput_1dy3w {
+    } .calendar-input__nativeInput_psfsj {
     opacity: 0;
     position: absolute;
     top: 0;
@@ -81,8 +81,8 @@
     height: 100%;
     appearance: none;
     z-index: 1
-} .calendar-input__nativeInput_1dy3w::-webkit-calendar-picker-indicator {
+} .calendar-input__nativeInput_psfsj::-webkit-calendar-picker-indicator {
         display: none;
-    } .calendar-input__nativeInput_1dy3w::-webkit-inner-spin-button {
+    } .calendar-input__nativeInput_psfsj::-webkit-inner-spin-button {
         display: none;
     }

package/modern/components/calendar-input/Component.js

@@ -7,7 +7,7 @@ import { Popover } from '@alfalab/core-components-popover/modern';
 import { CalendarMIcon } from '@alfalab/icons-glyph/CalendarMIcon';
 import { SUPPORTS_INPUT_TYPE_DATE } from '../../utils.js';
 
-const styles = {"component":"calendar-input__component_1dy3w","block":"calendar-input__block_1dy3w","calendarContainer":"calendar-input__calendarContainer_1dy3w","calendarResponsive":"calendar-input__calendarResponsive_1dy3w","calendarIcon":"calendar-input__calendarIcon_1dy3w","nativeInput":"calendar-input__nativeInput_1dy3w"};
+const styles = {"component":"calendar-input__component_psfsj","block":"calendar-input__block_psfsj","calendarContainer":"calendar-input__calendarContainer_psfsj","calendarResponsive":"calendar-input__calendarResponsive_psfsj","calendarIcon":"calendar-input__calendarIcon_psfsj","nativeInput":"calendar-input__nativeInput_psfsj"};
 require('./index.css')
 
 const CalendarInput = forwardRef(({ block = false, className, inputClassName, popoverClassName, defaultOpen = false, defaultMonth, defaultValue = '', calendarPosition = 'popover', value, dataTestId, calendarProps = {}, minDate = calendarProps.minDate, maxDate = calendarProps.maxDate, offDays = calendarProps.offDays || [], events = calendarProps.events || [], preventFlip, mobileMode = 'popover', wrapperRef = null, disabled, onChange = () => null, onInputChange, onCalendarChange, onCalendarOpen, onCalendarClose, onKeyDown, readOnly, disableUserInput = false, Calendar, popoverPosition = 'bottom-start', zIndexPopover, useAnchorWidth, rightAddons, error, view = 'desktop', ...restProps }, ref) => {

package/modern/components/calendar-input/index.css

@@ -1,4 +1,4 @@
-/* hash: 15wka */
+/* hash: 1vpiz */
 :root { /* 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 */ /* 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 */ :root {
     --color-light-neutral-300: #e7e8eb;
@@ -48,31 +48,31 @@
 } :root {
     --calendar-input-icon-color: var(--color-light-neutral-translucent-700);
     --calendar-input-popover-border-radius: var(--border-radius-m);
-} .calendar-input__component_1dy3w {
+} .calendar-input__component_psfsj {
     display: inline-block;
     outline: none;
     position: relative;
-} .calendar-input__block_1dy3w {
+} .calendar-input__block_psfsj {
     width: 100%;
-} .calendar-input__calendarContainer_1dy3w {
+} .calendar-input__calendarContainer_psfsj {
     display: inline-block;
     box-sizing: border-box;
     border-radius: var(--calendar-input-popover-border-radius);
     border: 1px solid var(--color-light-neutral-300)
-} @media (max-width: 374px) { .calendar-input__calendarContainer_1dy3w {
+} @media (max-width: 374px) { .calendar-input__calendarContainer_psfsj {
         width: 100%;
         min-width: 288px
 }
-    } .calendar-input__calendarResponsive_1dy3w {
+    } .calendar-input__calendarResponsive_psfsj {
     width: var(--calendar-width);
-} .calendar-input__calendarIcon_1dy3w {
+} .calendar-input__calendarIcon_psfsj {
     width: 24px;
     height: 24px;
     display: block;
     color: var(--calendar-input-icon-color)
-} .calendar-input__calendarIcon_1dy3w:not(:only-child) {
+} .calendar-input__calendarIcon_psfsj:not(:only-child) {
         margin-right: var(--gap-4);
-    } .calendar-input__nativeInput_1dy3w {
+    } .calendar-input__nativeInput_psfsj {
     opacity: 0;
     position: absolute;
     top: 0;
@@ -81,8 +81,8 @@
     height: 100%;
     appearance: none;
     z-index: 1
-} .calendar-input__nativeInput_1dy3w::-webkit-calendar-picker-indicator {
+} .calendar-input__nativeInput_psfsj::-webkit-calendar-picker-indicator {
         display: none;
-    } .calendar-input__nativeInput_1dy3w::-webkit-inner-spin-button {
+    } .calendar-input__nativeInput_psfsj::-webkit-inner-spin-button {
         display: none;
     }

package/moderncssm/Component.responsive.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import React from 'react';
+import { CalendarInputProps } from "./components/calendar-input/Component";
+type CalendarInputResponsiveProps = Omit<CalendarInputProps, 'view'> & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+};
+type CalendarInputMedia = 'desktop' | 'mobile';
+/**
+ * @deprecated
+ * use UniversalDateInput instead
+ */
+declare const CalendarInputResponsive: React.ForwardRefExoticComponent<Omit<CalendarInputProps, "view"> & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
+export { CalendarInputResponsiveProps, CalendarInputMedia, CalendarInputResponsive };

package/moderncssm/Component.responsive.js

@@ -0,0 +1,18 @@
+import React, { forwardRef } from 'react';
+import { useMedia } from '@alfalab/hooks';
+import { CalendarInputDesktop } from './desktop/Component.desktop.js';
+import { CalendarInputMobile } from './mobile/Component.mobile.js';
+
+/**
+ * @deprecated
+ * use UniversalDateInput instead
+ */
+const CalendarInputResponsive = forwardRef(({ breakpoint = 1024, ...restProps }, ref) => {
+    const [view] = useMedia([
+        ['mobile', `(max-width: ${breakpoint - 1}px)`],
+        ['desktop', `(min-width: ${breakpoint}px)`],
+    ], 'desktop');
+    return view === 'desktop' ? (React.createElement(CalendarInputDesktop, { ...restProps, ref: ref })) : (React.createElement(CalendarInputMobile, { ...restProps, ref: ref }));
+});
+
+export { CalendarInputResponsive };

package/moderncssm/components/calendar-input/Component.d.ts

@@ -0,0 +1,246 @@
+/// <reference types="react" />
+import React from 'react';
+import { ChangeEvent, ElementType, MouseEvent } from "react";
+import { CalendarDesktopProps } from "@alfalab/core-components-calendar/desktop";
+import { CalendarMobileProps } from "@alfalab/core-components-calendar/mobile";
+import { DateInputProps } from "@alfalab/core-components-date-input";
+import { PopoverProps } from "@alfalab/core-components-popover";
+type CalendarInputProps = Omit<DateInputProps, 'onChange' | 'mobileMode'> & {
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс для инпута
+     */
+    inputClassName?: string;
+    /**
+     * Дополнительный класс для поповера
+     */
+    popoverClassName?: string;
+    /**
+     * Доп. пропсы для календаря
+     */
+    calendarProps?: (CalendarDesktopProps & Record<string, unknown>) | (CalendarMobileProps & Record<string, unknown>);
+    /**
+     * Значение инпута (используется и для календаря)
+     */
+    value?: string;
+    /**
+     * Начальное значение инпута
+     */
+    defaultValue?: string;
+    /**
+     * Состояние открытия по умолчанию
+     */
+    defaultOpen?: boolean;
+    /**
+     * Месяц в календаре по умолчанию (timestamp)
+     */
+    defaultMonth?: number;
+    /**
+     * Минимальная дата, доступная для выбора (timestamp)
+     */
+    minDate?: number;
+    /**
+     * Максимальная дата, доступная для выбора (timestamp)
+     */
+    maxDate?: number;
+    /**
+     * Список событий
+     */
+    events?: Array<Date | number>;
+    /**
+     * Список выходных
+     */
+    offDays?: Array<Date | number>;
+    /**
+     * Определяет, как рендерить календарь — в поповере или снизу инпута
+     */
+    calendarPosition?: 'static' | 'popover';
+    /**
+     * Запрещает поповеру менять свою позицию.
+     * Например, если места снизу недостаточно,то он все равно будет показан снизу
+     */
+    preventFlip?: boolean;
+    /**
+     * Управление нативным режимом на мобильных устройствах
+     */
+    mobileMode?: 'native' | 'popover' | 'input';
+    /**
+     * Компонент календаря
+     */
+    Calendar?: ElementType;
+    /**
+     * Обработчик изменения значения
+     */
+    onChange?: (event: ChangeEvent<HTMLInputElement> | MouseEvent<HTMLButtonElement> | null, payload: {
+        date: Date;
+        value: string;
+    }) => void;
+    /**
+     * Обработчик ввода в инпут
+     */
+    onInputChange?: (event: ChangeEvent<HTMLInputElement>, payload: {
+        value: string;
+        date: Date;
+    }) => void;
+    /**
+     * Обработчик изменения календаря
+     */
+    onCalendarChange?: CalendarDesktopProps['onChange'];
+    /**
+     *  Обработчик открытия календаря
+     */
+    onCalendarOpen?: () => void;
+    /**
+     *  Обработчик закрытия календаря
+     */
+    onCalendarClose?: () => void;
+    /**
+     * Позиционирование поповера с календарем
+     */
+    popoverPosition?: PopoverProps['position'];
+    /**
+     * z-index Popover
+     */
+    zIndexPopover?: PopoverProps['zIndex'];
+    /**
+     * Календарь будет принимать ширину инпута
+     */
+    useAnchorWidth?: boolean;
+    /**
+     * Отображение компонента в мобильном или десктопном виде
+     */
+    view?: 'desktop' | 'mobile';
+    /**
+     * Запретить ввод с клавиатуры
+     */
+    disableUserInput?: boolean;
+};
+declare const CalendarInput: React.ForwardRefExoticComponent<Omit<DateInputProps, "onChange" | "mobileMode"> & {
+    /**
+     * Дополнительный класс
+     */
+    className?: string | undefined;
+    /**
+     * Дополнительный класс для инпута
+     */
+    inputClassName?: string | undefined;
+    /**
+     * Дополнительный класс для поповера
+     */
+    popoverClassName?: string | undefined;
+    /**
+     * Доп. пропсы для календаря
+     */
+    calendarProps?: (CalendarDesktopProps & Record<string, unknown>) | ({
+        title?: string | undefined;
+        open: boolean;
+        onClose?: (() => void) | undefined;
+        allowSelectionFromEmptyRange?: boolean | undefined;
+        hasHeader?: boolean | undefined;
+        onApply?: (() => void) | undefined;
+        clickableMonth?: boolean | undefined;
+    } & {
+        onMonthTitleClick?: ((event: React.MouseEvent<HTMLSpanElement, globalThis.MouseEvent>) => void) | undefined;
+        yearsAmount?: number | undefined;
+        scrollableContainer?: HTMLElement | undefined;
+    } & Omit<CalendarDesktopProps, ("className" | "dataTestId" | "hasHeader" | "onMonthChange" | "defaultView" | "selectorView" | "rangeComplete" | "onYearClick" | "onPeriodClick" | "responsive" | "showCurrentYearSelector") | ("contentClassName" | "headerClassName")> & Pick<CalendarDesktopProps, "className" | "dataTestId" | "hasHeader" | "onMonthChange" | "defaultView" | "selectorView" | "rangeComplete" | "onYearClick" | "onPeriodClick" | "responsive" | "showCurrentYearSelector"> & Record<string, unknown>) | undefined;
+    /**
+     * Значение инпута (используется и для календаря)
+     */
+    value?: string | undefined;
+    /**
+     * Начальное значение инпута
+     */
+    defaultValue?: string | undefined;
+    /**
+     * Состояние открытия по умолчанию
+     */
+    defaultOpen?: boolean | undefined;
+    /**
+     * Месяц в календаре по умолчанию (timestamp)
+     */
+    defaultMonth?: number | undefined;
+    /**
+     * Минимальная дата, доступная для выбора (timestamp)
+     */
+    minDate?: number | undefined;
+    /**
+     * Максимальная дата, доступная для выбора (timestamp)
+     */
+    maxDate?: number | undefined;
+    /**
+     * Список событий
+     */
+    events?: (number | Date)[] | undefined;
+    /**
+     * Список выходных
+     */
+    offDays?: (number | Date)[] | undefined;
+    /**
+     * Определяет, как рендерить календарь — в поповере или снизу инпута
+     */
+    calendarPosition?: "static" | "popover" | undefined;
+    /**
+     * Запрещает поповеру менять свою позицию.
+     * Например, если места снизу недостаточно,то он все равно будет показан снизу
+     */
+    preventFlip?: boolean | undefined;
+    /**
+     * Управление нативным режимом на мобильных устройствах
+     */
+    mobileMode?: "input" | "native" | "popover" | undefined;
+    /**
+     * Компонент календаря
+     */
+    Calendar?: React.ElementType<any> | undefined;
+    /**
+     * Обработчик изменения значения
+     */
+    onChange?: ((event: ChangeEvent<HTMLInputElement> | MouseEvent<HTMLButtonElement> | null, payload: {
+        date: Date;
+        value: string;
+    }) => void) | undefined;
+    /**
+     * Обработчик ввода в инпут
+     */
+    onInputChange?: ((event: ChangeEvent<HTMLInputElement>, payload: {
+        value: string;
+        date: Date;
+    }) => void) | undefined;
+    /**
+     * Обработчик изменения календаря
+     */
+    onCalendarChange?: CalendarDesktopProps['onChange'];
+    /**
+     *  Обработчик открытия календаря
+     */
+    onCalendarOpen?: (() => void) | undefined;
+    /**
+     *  Обработчик закрытия календаря
+     */
+    onCalendarClose?: (() => void) | undefined;
+    /**
+     * Позиционирование поповера с календарем
+     */
+    popoverPosition?: PopoverProps['position'];
+    /**
+     * z-index Popover
+     */
+    zIndexPopover?: PopoverProps['zIndex'];
+    /**
+     * Календарь будет принимать ширину инпута
+     */
+    useAnchorWidth?: boolean | undefined;
+    /**
+     * Отображение компонента в мобильном или десктопном виде
+     */
+    view?: "desktop" | "mobile" | undefined;
+    /**
+     * Запретить ввод с клавиатуры
+     */
+    disableUserInput?: boolean | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
+export { CalendarInputProps, CalendarInput };

package/moderncssm/components/calendar-input/Component.js

@@ -0,0 +1,149 @@
+import React, { forwardRef, useState, useRef, useEffect } from 'react';
+import mergeRefs from 'react-merge-refs';
+import cn from 'classnames';
+import { dateInLimits } from '@alfalab/core-components-calendar/moderncssm/shared';
+import { parseDateString, DateInput, isCompleteDateInput, formatDate } from '@alfalab/core-components-date-input/moderncssm';
+import { Popover } from '@alfalab/core-components-popover/moderncssm';
+import { CalendarMIcon } from '@alfalab/icons-glyph/CalendarMIcon';
+import { SUPPORTS_INPUT_TYPE_DATE } from '../../utils.js';
+import styles from './index.module.css';
+
+const CalendarInput = forwardRef(({ block = false, className, inputClassName, popoverClassName, defaultOpen = false, defaultMonth, defaultValue = '', calendarPosition = 'popover', value, dataTestId, calendarProps = {}, minDate = calendarProps.minDate, maxDate = calendarProps.maxDate, offDays = calendarProps.offDays || [], events = calendarProps.events || [], preventFlip, mobileMode = 'popover', wrapperRef = null, disabled, onChange = () => null, onInputChange, onCalendarChange, onCalendarOpen, onCalendarClose, onKeyDown, readOnly, disableUserInput = false, Calendar, popoverPosition = 'bottom-start', zIndexPopover, useAnchorWidth, rightAddons, error, view = 'desktop', ...restProps }, ref) => {
+    const calendarResponsive = calendarProps?.responsive ?? true;
+    const shouldRenderNative = SUPPORTS_INPUT_TYPE_DATE && mobileMode === 'native';
+    const shouldRenderOnlyInput = mobileMode === 'input';
+    const shouldRenderStatic = calendarPosition === 'static' && !shouldRenderOnlyInput;
+    const shouldRenderPopover = calendarPosition === 'popover' && !shouldRenderNative && !shouldRenderOnlyInput;
+    const [open, setOpen] = useState(false);
+    const [inputValue, setInputValue] = useState(value || defaultValue);
+    const calendarValue = inputValue ? parseDateString(inputValue).getTime() : undefined;
+    const checkInputValueIsValid = (newInputValue) => {
+        if (!newInputValue)
+            return false;
+        const dateValue = parseDateString(newInputValue).getTime();
+        return !!(dateValue &&
+            isCompleteDateInput(newInputValue) &&
+            dateInLimits(dateValue, minDate, maxDate) &&
+            !offDays.includes(dateValue));
+    };
+    const inputDisabled = disabled || readOnly;
+    const inputRef = useRef(null);
+    const inputWrapperRef = useRef(null);
+    const calendarRef = useRef(null);
+    const openCalendar = () => {
+        setOpen((prev) => {
+            if (!prev)
+                onCalendarOpen?.();
+            return true;
+        });
+    };
+    const closeCalendar = () => {
+        setOpen((prev) => {
+            if (prev)
+                onCalendarClose?.();
+            return false;
+        });
+    };
+    const handleKeyDown = (event) => {
+        if (event.target.tagName === 'INPUT' && event.key === 'Enter') {
+            if (open) {
+                closeCalendar();
+            }
+            else {
+                openCalendar();
+            }
+        }
+        if (event.key === 'Escape') {
+            closeCalendar();
+        }
+    };
+    const handleClick = (event) => {
+        if (!inputWrapperRef.current?.contains(event.target))
+            return;
+        if (!open)
+            openCalendar();
+        if (view === 'desktop' && inputRef.current) {
+            inputRef.current.focus();
+        }
+    };
+    const handleFocus = (event) => {
+        if (view === 'desktop') {
+            if (!inputWrapperRef.current?.contains(event.target))
+                return;
+            openCalendar();
+            if (!open && event.target.tagName !== 'INPUT' && calendarRef.current) {
+                calendarRef.current.focus();
+            }
+        }
+    };
+    const handleBlur = (event) => {
+        if (view === 'desktop') {
+            const target = (event.relatedTarget || document.activeElement);
+            if (inputRef.current !== target &&
+                calendarRef.current?.contains(target) === false) {
+                closeCalendar();
+            }
+        }
+    };
+    const handleInputKeyDown = (event) => {
+        if (['ArrowDown', 'ArrowUp'].includes(event.key) && calendarRef.current) {
+            event.preventDefault();
+            calendarRef.current.focus();
+        }
+        if (onKeyDown)
+            onKeyDown(event);
+    };
+    const changeHandler = (event, newValue, newDate, initiator = 'input', shouldChange = true) => {
+        if (initiator === 'input' && event && onInputChange) {
+            onInputChange(event, { value: newValue, date: newDate });
+        }
+        if (initiator === 'calendar' && onCalendarChange) {
+            onCalendarChange(newDate.getTime());
+        }
+        setInputValue(newValue);
+        if (shouldChange) {
+            onChange(event, { date: newDate, value: newValue });
+        }
+    };
+    const handleInputChange = (event, payload) => {
+        changeHandler(event, payload.value, payload.date, 'input', !payload.value || checkInputValueIsValid(payload.value));
+    };
+    const handleCalendarChange = (date) => {
+        if (date) {
+            changeHandler(null, formatDate(date), new Date(date), 'calendar');
+        }
+        if (view === 'desktop') {
+            closeCalendar();
+        }
+    };
+    const handleCalendarWrapperMouseDown = (event) => {
+        // Не дает инпуту терять фокус при выборе даты
+        event.preventDefault();
+    };
+    useEffect(() => {
+        setOpen(defaultOpen);
+    }, [defaultOpen]);
+    useEffect(() => {
+        if (typeof value !== 'undefined') {
+            setInputValue(value);
+        }
+    }, [value]);
+    const renderCalendar = () => (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    React.createElement("div", { onMouseDown: handleCalendarWrapperMouseDown }, Calendar ? (React.createElement(Calendar, { ...calendarProps, responsive: calendarResponsive, open: open, onClose: closeCalendar, ref: calendarRef, defaultMonth: defaultMonth, value: checkInputValueIsValid(inputValue) ? calendarValue : undefined, onChange: handleCalendarChange, minDate: minDate, maxDate: maxDate, offDays: offDays, events: events })) : null));
+    return (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    React.createElement("div", { className: cn(styles.component, className, {
+            [styles.block]: block,
+        }), tabIndex: -1, onKeyDown: inputDisabled ? undefined : handleKeyDown, onClick: inputDisabled ? undefined : handleClick, onFocus: inputDisabled ? undefined : handleFocus, onBlur: handleBlur, "data-test-id": dataTestId },
+        React.createElement(DateInput, { autoComplete: 'off', ...restProps, ref: mergeRefs([inputRef, ref]), wrapperRef: mergeRefs([wrapperRef, inputWrapperRef]), value: inputValue, defaultValue: defaultValue, disabled: disabled, inputClassName: inputClassName, readOnly: readOnly, mobileMode: mobileMode === 'native' ? 'native' : 'input', error: error, disableUserInput: disableUserInput, rightAddons: React.createElement(React.Fragment, null,
+                rightAddons,
+                shouldRenderPopover && (React.createElement(CalendarMIcon, { className: styles.calendarIcon }))), rightAddonsProps: { onMouseDown: (e) => e.preventDefault() }, onKeyDown: handleInputKeyDown, onChange: handleInputChange, block: true }),
+        shouldRenderStatic && renderCalendar(),
+        shouldRenderPopover &&
+            (view === 'desktop' ? (React.createElement(Popover, { open: open, useAnchorWidth: useAnchorWidth, anchorElement: inputWrapperRef.current, popperClassName: cn(styles.calendarContainer, {
+                    [styles.calendarResponsive]: calendarResponsive,
+                }), className: popoverClassName, position: popoverPosition, offset: [0, 4], withTransition: false, preventFlip: preventFlip, zIndex: zIndexPopover }, renderCalendar())) : (renderCalendar()))));
+});
+
+export { CalendarInput };

package/moderncssm/components/calendar-input/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/moderncssm/components/calendar-input/index.js

@@ -0,0 +1 @@
+export { CalendarInput } from './Component.js';

package/moderncssm/components/calendar-input/index.module.css

@@ -0,0 +1,76 @@
+/* */
+:root {
+    --calendar-width: 344px;
+
+    /* Кнопки выбора месяцев и годов */
+
+    /* Шапка */
+
+    /* День */
+
+    /* today */
+
+    /* highlighted */
+
+    /* holidays */
+
+    /* range */
+
+    /* selected */
+
+    /* disabled */
+
+    /* marker */
+}
+:root {
+    --calendar-input-icon-color: var(--color-light-neutral-translucent-700);
+    --calendar-input-popover-border-radius: var(--border-radius-m);
+}
+.component {
+    display: inline-block;
+    outline: none;
+    position: relative;
+}
+.block {
+    width: 100%;
+}
+.calendarContainer {
+    display: inline-block;
+    box-sizing: border-box;
+    border-radius: var(--calendar-input-popover-border-radius);
+    border: 1px solid var(--color-light-neutral-300)
+}
+@media (max-width: 374px) {
+.calendarContainer {
+        width: 100%;
+        min-width: 288px
+}
+    }
+.calendarResponsive {
+    width: var(--calendar-width);
+}
+.calendarIcon {
+    width: 24px;
+    height: 24px;
+    display: block;
+    color: var(--calendar-input-icon-color)
+}
+.calendarIcon:not(:only-child) {
+        margin-right: var(--gap-4);
+    }
+.nativeInput {
+    opacity: 0;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    appearance: none;
+    z-index: 1
+}
+.nativeInput::-webkit-calendar-picker-indicator {
+        display: none;
+    }
+.nativeInput::-webkit-inner-spin-button {
+        display: none;
+    }

package/moderncssm/desktop/Component.desktop.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import React from 'react';
+import { CalendarInputProps } from "../components/calendar-input/Component";
+type CalendarInputDesktopProps = Omit<CalendarInputProps, 'view'>;
+/**
+ * @deprecated
+ * use UniversalDateInput instead
+ */
+declare const CalendarInputDesktop: React.ForwardRefExoticComponent<CalendarInputDesktopProps & React.RefAttributes<HTMLInputElement>>;
+export { CalendarInputDesktopProps, CalendarInputDesktop };

package/moderncssm/desktop/Component.desktop.js

@@ -0,0 +1,11 @@
+import React, { forwardRef } from 'react';
+import { CalendarDesktop } from '@alfalab/core-components-calendar/moderncssm/desktop';
+import { CalendarInput } from '../components/calendar-input/Component.js';
+
+/**
+ * @deprecated
+ * use UniversalDateInput instead
+ */
+const CalendarInputDesktop = forwardRef((props, ref) => React.createElement(CalendarInput, { Calendar: CalendarDesktop, ...props, ref: ref }));
+
+export { CalendarInputDesktop };

package/moderncssm/desktop/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component.desktop";
+export {};

package/moderncssm/desktop/index.js

@@ -0,0 +1 @@
+export { CalendarInputDesktop } from './Component.desktop.js';

package/moderncssm/index.d.ts

@@ -0,0 +1,3 @@
+export { CalendarInputResponsive as CalendarInput } from "./Component.responsive";
+export type { CalendarInputResponsiveProps as CalendarInputProps } from "./Component.responsive";
+export {};

package/moderncssm/index.js

@@ -0,0 +1 @@
+export { CalendarInputResponsive as CalendarInput } from './Component.responsive.js';

package/moderncssm/mobile/Component.mobile.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import React from 'react';
+import { CalendarInputProps } from "../components/calendar-input/Component";
+type CalendarInputMobileProps = Omit<CalendarInputProps, 'view'>;
+/**
+ * @deprecated
+ * use UniversalDateInput instead
+ */
+declare const CalendarInputMobile: React.ForwardRefExoticComponent<CalendarInputMobileProps & React.RefAttributes<HTMLInputElement>>;
+export { CalendarInputMobileProps, CalendarInputMobile };

package/moderncssm/mobile/Component.mobile.js

@@ -0,0 +1,11 @@
+import React, { forwardRef } from 'react';
+import { CalendarMobile } from '@alfalab/core-components-calendar/moderncssm/mobile';
+import { CalendarInput } from '../components/calendar-input/Component.js';
+
+/**
+ * @deprecated
+ * use UniversalDateInput instead
+ */
+const CalendarInputMobile = forwardRef((props, ref) => React.createElement(CalendarInput, { Calendar: CalendarMobile, view: 'mobile', ...props, ref: ref }));
+
+export { CalendarInputMobile };

package/moderncssm/mobile/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component.mobile";
+export {};

package/moderncssm/mobile/index.js

@@ -0,0 +1 @@
+export { CalendarInputMobile } from './Component.mobile.js';

package/moderncssm/shared/index.d.ts

@@ -0,0 +1 @@
+export * from "../utils";

package/moderncssm/shared/index.js

@@ -0,0 +1 @@
+export { DATE_FORMAT, DATE_MASK, IS_BROWSER, NATIVE_DATE_FORMAT, SUPPORTS_INPUT_TYPE_DATE, formatDate, isInputDateSupported, isValidInputValue, parseDateString } from '../utils.js';

package/moderncssm/utils.d.ts

@@ -0,0 +1,13 @@
+declare const DATE_FORMAT = "dd.MM.yyyy";
+declare const NATIVE_DATE_FORMAT = "yyyy-MM-dd";
+declare const DATE_MASK: (string | RegExp)[];
+declare const IS_BROWSER: boolean;
+declare const SUPPORTS_INPUT_TYPE_DATE: boolean;
+declare const formatDate: (date: Date | number, dateFormat?: string) => string;
+declare const parseDateString: (value: string, dateFormat?: string) => Date;
+/**
+ * Возвращает `true`, если поддерживается `input[type="date"]`
+ */
+declare function isInputDateSupported(): boolean;
+declare const isValidInputValue: (newInputValue: string | undefined, minDate: number | undefined, maxDate: number | undefined, offDays?: Array<number | Date>) => boolean;
+export { DATE_FORMAT, NATIVE_DATE_FORMAT, DATE_MASK, IS_BROWSER, SUPPORTS_INPUT_TYPE_DATE, formatDate, parseDateString, isInputDateSupported, isValidInputValue };

package/moderncssm/utils.js

@@ -0,0 +1,34 @@
+import format from 'date-fns/format';
+import isSameDay from 'date-fns/isSameDay';
+import parse from 'date-fns/parse';
+import { dateInLimits } from '@alfalab/core-components-calendar/moderncssm/shared';
+import { isCompleteDateInput } from '@alfalab/core-components-date-input/moderncssm';
+
+const DATE_FORMAT = 'dd.MM.yyyy';
+const NATIVE_DATE_FORMAT = 'yyyy-MM-dd';
+const DATE_MASK = [/\d/, /\d/, '.', /\d/, /\d/, '.', /\d/, /\d/, /\d/, /\d/];
+const IS_BROWSER = typeof window !== 'undefined';
+const SUPPORTS_INPUT_TYPE_DATE = IS_BROWSER && isInputDateSupported();
+const formatDate = (date, dateFormat = DATE_FORMAT) => format(date, dateFormat);
+const parseDateString = (value, dateFormat = DATE_FORMAT) => parse(value, dateFormat, new Date());
+/**
+ * Возвращает `true`, если поддерживается `input[type="date"]`
+ */
+function isInputDateSupported() {
+    const input = document.createElement('input');
+    const value = 'a';
+    input.setAttribute('type', 'date');
+    input.setAttribute('value', value);
+    return input.value !== value;
+}
+const isValidInputValue = (newInputValue, minDate, maxDate, offDays = []) => {
+    if (!newInputValue)
+        return false;
+    const dateValue = parseDateString(newInputValue).getTime();
+    return Boolean(dateValue &&
+        isCompleteDateInput(newInputValue) &&
+        dateInLimits(dateValue, minDate, maxDate) &&
+        !offDays.some((offDay) => isSameDay(offDay, dateValue)));
+};
+
+export { DATE_FORMAT, DATE_MASK, IS_BROWSER, NATIVE_DATE_FORMAT, SUPPORTS_INPUT_TYPE_DATE, formatDate, isInputDateSupported, isValidInputValue, parseDateString };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-calendar-input",
-    "version": "10.2.26",
+    "version": "10.3.0",
     "description": "Calendar input component",
     "keywords": [],
     "license": "MIT",
@@ -15,9 +15,9 @@
         "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
     "dependencies": {
-        "@alfalab/core-components-calendar": "^7.10.1",
-        "@alfalab/core-components-date-input": "^4.3.37",
-        "@alfalab/core-components-popover": "^6.2.5",
+        "@alfalab/core-components-calendar": "^7.11.0",
+        "@alfalab/core-components-date-input": "^4.4.0",
+        "@alfalab/core-components-popover": "^6.3.0",
         "@alfalab/hooks": "^1.13.0",
         "@alfalab/icons-glyph": "^2.139.0",
         "classnames": "^2.3.1",
@@ -25,6 +25,6 @@
         "react-merge-refs": "^1.1.0",
         "tslib": "^2.4.0"
     },
-    "themesVersion": "13.0.2",
-    "varsVersion": "9.11.1"
+    "themesVersion": "13.1.0",
+    "varsVersion": "9.12.0"
 }

package/src/components/calendar-input/index.module.css

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-themes/src/default.css';
+@import '@alfalab/core-components-vars/src/index.css';
 @import '@alfalab/core-components-calendar/src/vars.css';
 
 :root {