@alfalab/core-components 27.11.0 → 27.13.1

package/calendar-input/Component.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import { ChangeEvent, MouseEvent, ElementType } from "react";
 import { PopoverProps } from "../popover";
 import { DateInputProps } from "../date-input";
-import { CalendarProps } from "../calendar";
+import { CalendarProps, CalendarMobileProps } from "../calendar";
 type CalendarInputProps = Omit<DateInputProps, 'onChange' | 'mobileMode'> & {
     /**
      * Дополнительный класс
@@ -20,7 +20,7 @@ type CalendarInputProps = Omit<DateInputProps, 'onChange' | 'mobileMode'> & {
     /**
      * Доп. пропсы для календаря
      */
-    calendarProps?: CalendarProps & Record<string, unknown>;
+    calendarProps?: (CalendarProps & Record<string, unknown>) | (CalendarMobileProps & Record<string, unknown>);
     /**
      * Значение инпута (используется и для календаря)
      */
@@ -101,7 +101,7 @@ type CalendarInputProps = Omit<DateInputProps, 'onChange' | 'mobileMode'> & {
      */
     useAnchorWidth?: boolean;
 };
-declare const CalendarInput: React.ForwardRefExoticComponent<Pick<DateInputProps, "children" | "form" | "label" | "slot" | "style" | "title" | "pattern" | "className" | "dataTestId" | "leftAddons" | "rightAddons" | "size" | "block" | "colors" | "type" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "step" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "value" | "height" | "max" | "min" | "width" | "crossOrigin" | "fieldClassName" | "labelClassName" | "addonsClassName" | "error" | "hint" | "bottomAddons" | "accept" | "alt" | "autoComplete" | "capture" | "checked" | "maxLength" | "minLength" | "multiple" | "readOnly" | "required" | "src" | "clear" | "success" | "inputClassName" | "focusedClassName" | "filledClassName" | "onClear" | "wrapperRef" | "onComplete"> & {
+declare const CalendarInput: React.ForwardRefExoticComponent<Pick<DateInputProps, "children" | "value" | "form" | "label" | "slot" | "style" | "title" | "pattern" | "dir" | "className" | "dataTestId" | "height" | "name" | "width" | "hidden" | "color" | "size" | "block" | "clear" | "multiple" | "disabled" | "leftAddons" | "rightAddons" | "colors" | "type" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "step" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "fieldClassName" | "labelClassName" | "addonsClassName" | "error" | "hint" | "bottomAddons" | "accept" | "alt" | "autoComplete" | "capture" | "checked" | "crossOrigin" | "max" | "maxLength" | "min" | "minLength" | "readOnly" | "required" | "src" | "success" | "inputClassName" | "focusedClassName" | "filledClassName" | "onClear" | "wrapperRef" | "onComplete"> & {
     /**
      * Дополнительный класс
      */
@@ -117,7 +117,17 @@ declare const CalendarInput: React.ForwardRefExoticComponent<Pick<DateInputProps
     /**
      * Доп. пропсы для календаря
      */
-    calendarProps?: (CalendarProps & Record<string, unknown>) | undefined;
+    calendarProps?: (CalendarProps & Record<string, unknown>) | (CalendarProps & {
+        open: boolean;
+        title?: string | undefined;
+        onClose?: (() => void) | undefined;
+        yearsAmount?: number | undefined;
+        /**
+         * Дополнительный класс для инпута
+         */
+        hasHeader?: boolean | undefined;
+        allowSelectionFromEmptyRange?: boolean | undefined;
+    } & Record<string, unknown>) | undefined;
     /**
      * Значение инпута (используется и для календаря)
      */
@@ -170,7 +180,7 @@ declare const CalendarInput: React.ForwardRefExoticComponent<Pick<DateInputProps
     /**
      * Обработчик изменения значения
      */
-    onChange?: ((event: React.MouseEvent<HTMLButtonElement, globalThis.MouseEvent> | React.ChangeEvent<HTMLInputElement> | null, payload: {
+    onChange?: ((event: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement, globalThis.MouseEvent> | null, payload: {
         date: Date;
         value: string;
     }) => void) | undefined;
@@ -184,11 +194,11 @@ declare const CalendarInput: React.ForwardRefExoticComponent<Pick<DateInputProps
     /**
      * Обработчик изменения календаря
      */
-    onCalendarChange?: ((date: number) => void) | undefined;
+    onCalendarChange?: ((date?: number | undefined) => void) | undefined;
     /**
      * Позиционирование поповера с календарем
      */
-    popoverPosition?: "right" | "left" | "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end" | undefined;
+    popoverPosition?: "top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end" | undefined;
     /**
      * z-index Popover
      */

package/calendar-input/Component.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var cn = require('classnames');
 var mergeRefs = require('react-merge-refs');
+var hooks = require('@alfalab/hooks');
 var coreComponentsPopover = require('../popover');
 var CalendarMIcon = require('@alfalab/icons-glyph/CalendarMIcon');
 var coreComponentsDateInput = require('../date-input');
@@ -57,18 +58,25 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"component":"calendar-input__component_1ga77","block":"calendar-input__block_1ga77","calendarContainer":"calendar-input__calendarContainer_1ga77","calendarIcon":"calendar-input__calendarIcon_1ga77","nativeInput":"calendar-input__nativeInput_1ga77"};
+var styles = {"component":"calendar-input__component_tulgc","block":"calendar-input__block_tulgc","calendarContainer":"calendar-input__calendarContainer_tulgc","calendarResponsive":"calendar-input__calendarResponsive_tulgc","calendarIcon":"calendar-input__calendarIcon_tulgc","nativeInput":"calendar-input__nativeInput_tulgc"};
 require('./index.css');
 
 var CalendarInput = React.forwardRef(function (_a, ref) {
-    var _b;
-    var _c = _a.block, block = _c === void 0 ? false : _c, className = _a.className, inputClassName = _a.inputClassName, popoverClassName = _a.popoverClassName, _d = _a.defaultOpen, defaultOpen = _d === void 0 ? false : _d, defaultMonth = _a.defaultMonth, _e = _a.defaultValue, defaultValue = _e === void 0 ? '' : _e, _f = _a.calendarPosition, calendarPosition = _f === void 0 ? 'popover' : _f, value = _a.value, dataTestId = _a.dataTestId, _g = _a.calendarProps, calendarProps = _g === void 0 ? {} : _g, _h = _a.minDate, minDate = _h === void 0 ? calendarProps.minDate : _h, _j = _a.maxDate, maxDate = _j === void 0 ? calendarProps.maxDate : _j, _k = _a.offDays, offDays = _k === void 0 ? calendarProps.offDays || [] : _k, _l = _a.events, events = _l === void 0 ? calendarProps.events || [] : _l, preventFlip = _a.preventFlip, _m = _a.mobileMode, mobileMode = _m === void 0 ? 'popover' : _m, _o = _a.wrapperRef, wrapperRef = _o === void 0 ? null : _o, disabled = _a.disabled, _p = _a.onChange, onChange = _p === void 0 ? function () { return null; } : _p, onInputChange = _a.onInputChange, onCalendarChange = _a.onCalendarChange, onKeyDown = _a.onKeyDown, readOnly = _a.readOnly, _q = _a.Calendar, Calendar = _q === void 0 ? coreComponentsCalendar.Calendar : _q, _r = _a.popoverPosition, popoverPosition = _r === void 0 ? 'bottom-start' : _r, zIndexPopover = _a.zIndexPopover, useAnchorWidth = _a.useAnchorWidth, rightAddons = _a.rightAddons, error = _a.error, restProps = __rest(_a, ["block", "className", "inputClassName", "popoverClassName", "defaultOpen", "defaultMonth", "defaultValue", "calendarPosition", "value", "dataTestId", "calendarProps", "minDate", "maxDate", "offDays", "events", "preventFlip", "mobileMode", "wrapperRef", "disabled", "onChange", "onInputChange", "onCalendarChange", "onKeyDown", "readOnly", "Calendar", "popoverPosition", "zIndexPopover", "useAnchorWidth", "rightAddons", "error"]);
+    var _b, _c;
+    var _d;
+    var _e = _a.block, block = _e === void 0 ? false : _e, className = _a.className, inputClassName = _a.inputClassName, popoverClassName = _a.popoverClassName, _f = _a.defaultOpen, defaultOpen = _f === void 0 ? false : _f, defaultMonth = _a.defaultMonth, _g = _a.defaultValue, defaultValue = _g === void 0 ? '' : _g, _h = _a.calendarPosition, calendarPosition = _h === void 0 ? 'popover' : _h, value = _a.value, dataTestId = _a.dataTestId, _j = _a.calendarProps, calendarProps = _j === void 0 ? {} : _j, _k = _a.minDate, minDate = _k === void 0 ? calendarProps.minDate : _k, _l = _a.maxDate, maxDate = _l === void 0 ? calendarProps.maxDate : _l, _m = _a.offDays, offDays = _m === void 0 ? calendarProps.offDays || [] : _m, _o = _a.events, events = _o === void 0 ? calendarProps.events || [] : _o, preventFlip = _a.preventFlip, _p = _a.mobileMode, mobileMode = _p === void 0 ? 'popover' : _p, _q = _a.wrapperRef, wrapperRef = _q === void 0 ? null : _q, disabled = _a.disabled, _r = _a.onChange, onChange = _r === void 0 ? function () { return null; } : _r, onInputChange = _a.onInputChange, onCalendarChange = _a.onCalendarChange, onKeyDown = _a.onKeyDown, readOnly = _a.readOnly, _s = _a.Calendar, Calendar = _s === void 0 ? coreComponentsCalendar.Calendar : _s, _t = _a.popoverPosition, popoverPosition = _t === void 0 ? 'bottom-start' : _t, zIndexPopover = _a.zIndexPopover, useAnchorWidth = _a.useAnchorWidth, rightAddons = _a.rightAddons, error = _a.error, restProps = __rest(_a, ["block", "className", "inputClassName", "popoverClassName", "defaultOpen", "defaultMonth", "defaultValue", "calendarPosition", "value", "dataTestId", "calendarProps", "minDate", "maxDate", "offDays", "events", "preventFlip", "mobileMode", "wrapperRef", "disabled", "onChange", "onInputChange", "onCalendarChange", "onKeyDown", "readOnly", "Calendar", "popoverPosition", "zIndexPopover", "useAnchorWidth", "rightAddons", "error"]);
+    var view = hooks.useMedia([
+        ['mobile', '(max-width: 1023px)'],
+        ['desktop', '(min-width: 1024px)'],
+    ], 'desktop')[0];
+    var CalendarComponent = view === 'desktop' ? Calendar : coreComponentsCalendar.CalendarMobile;
+    var calendarResponsive = (_d = calendarProps === null || calendarProps === void 0 ? void 0 : calendarProps.responsive) !== null && _d !== void 0 ? _d : true;
     var shouldRenderNative = utils.SUPPORTS_INPUT_TYPE_DATE && mobileMode === 'native';
     var shouldRenderOnlyInput = mobileMode === 'input';
     var shouldRenderStatic = calendarPosition === 'static' && !shouldRenderOnlyInput;
     var shouldRenderPopover = calendarPosition === 'popover' && !shouldRenderNative && !shouldRenderOnlyInput;
-    var _s = React.useState(false), open = _s[0], setOpen = _s[1];
-    var _t = React.useState(value || defaultValue), inputValue = _t[0], setInputValue = _t[1];
+    var _u = React.useState(false), open = _u[0], setOpen = _u[1];
+    var _v = React.useState(value || defaultValue), inputValue = _v[0], setInputValue = _v[1];
     var calendarValue = inputValue ? coreComponentsDateInput.parseDateString(inputValue).getTime() : undefined;
     var checkInputValueIsValid = React.useCallback(function (newInputValue) {
         if (!newInputValue || error)
@@ -95,17 +103,21 @@ var CalendarInput = React.forwardRef(function (_a, ref) {
             setOpen(true);
     }, [open]);
     var handleFocus = React.useCallback(function (event) {
-        setOpen(true);
-        if (!open && event.target.tagName !== 'INPUT' && calendarRef.current) {
-            calendarRef.current.focus();
+        if (view === 'desktop') {
+            setOpen(true);
+            if (!open && event.target.tagName !== 'INPUT' && calendarRef.current) {
+                calendarRef.current.focus();
+            }
         }
-    }, [open]);
+    }, [open, view]);
     var handleBlur = React.useCallback(function (event) {
-        var target = (event.relatedTarget || document.activeElement);
-        if (calendarRef.current && calendarRef.current.contains(target) === false) {
-            setOpen(false);
+        if (view === 'desktop') {
+            var target = (event.relatedTarget || document.activeElement);
+            if (calendarRef.current && calendarRef.current.contains(target) === false) {
+                setOpen(false);
+            }
         }
-    }, []);
+    }, [view]);
     var handleInputKeyDown = React.useCallback(function (event) {
         if (['ArrowDown', 'ArrowUp'].includes(event.key) && calendarRef.current) {
             event.preventDefault();
@@ -132,13 +144,20 @@ var CalendarInput = React.forwardRef(function (_a, ref) {
         changeHandler(event, payload.value, payload.date, 'input', !payload.value || checkInputValueIsValid(payload.value));
     }, [changeHandler, checkInputValueIsValid]);
     var handleCalendarChange = React.useCallback(function (date) {
-        changeHandler(null, coreComponentsDateInput.formatDate(date), new Date(date), 'calendar');
-        setOpen(false);
-    }, [changeHandler]);
+        if (date) {
+            changeHandler(null, coreComponentsDateInput.formatDate(date), new Date(date), 'calendar');
+        }
+        if (view === 'desktop') {
+            setOpen(false);
+        }
+    }, [changeHandler, view]);
     var handleCalendarWrapperMouseDown = React.useCallback(function (event) {
         // Не дает инпуту терять фокус при выборе даты
         event.preventDefault();
     }, []);
+    var handleCalendarClose = React.useCallback(function () {
+        setOpen(false);
+    }, []);
     React.useEffect(function () {
         setOpen(defaultOpen);
     }, [defaultOpen]);
@@ -147,22 +166,10 @@ var CalendarInput = React.forwardRef(function (_a, ref) {
             setInputValue(value);
         }
     }, [value]);
-    var renderCalendar = React.useCallback(function () { return (
+    var renderCalendar = function () { return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     React__default['default'].createElement("div", { onMouseDown: handleCalendarWrapperMouseDown },
-        React__default['default'].createElement(Calendar, __assign({}, calendarProps, { ref: calendarRef, defaultMonth: defaultMonth, value: checkInputValueIsValid(inputValue) ? calendarValue : undefined, onChange: handleCalendarChange, minDate: minDate, maxDate: maxDate, offDays: offDays, events: events })))); }, [
-        calendarProps,
-        calendarValue,
-        checkInputValueIsValid,
-        defaultMonth,
-        events,
-        handleCalendarChange,
-        handleCalendarWrapperMouseDown,
-        inputValue,
-        maxDate,
-        minDate,
-        offDays,
-    ]);
+        React__default['default'].createElement(CalendarComponent, __assign({}, calendarProps, { responsive: calendarResponsive, open: open, onClose: handleCalendarClose, ref: calendarRef, defaultMonth: defaultMonth, value: checkInputValueIsValid(inputValue) ? calendarValue : undefined, onChange: handleCalendarChange, minDate: minDate, maxDate: maxDate, offDays: offDays, events: events })))); };
     return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     React__default['default'].createElement("div", { className: cn__default['default'](styles.component, className, (_b = {},
@@ -172,7 +179,9 @@ var CalendarInput = React.forwardRef(function (_a, ref) {
                 rightAddons,
                 shouldRenderPopover && (React__default['default'].createElement(CalendarMIcon.CalendarMIcon, { className: styles.calendarIcon }))), onKeyDown: handleInputKeyDown, onChange: handleInputChange, block: true })),
         shouldRenderStatic && renderCalendar(),
-        shouldRenderPopover && (React__default['default'].createElement(coreComponentsPopover.Popover, { open: open, useAnchorWidth: useAnchorWidth, anchorElement: inputWrapperRef.current, popperClassName: styles.calendarContainer, className: popoverClassName, position: popoverPosition, offset: [0, 8], withTransition: false, preventFlip: preventFlip, zIndex: zIndexPopover }, renderCalendar()))));
+        shouldRenderPopover && (React__default['default'].createElement(coreComponentsPopover.Popover, { open: open, useAnchorWidth: useAnchorWidth, anchorElement: inputWrapperRef.current, popperClassName: cn__default['default'](styles.calendarContainer, (_c = {},
+                _c[styles.calendarResponsive] = calendarResponsive,
+                _c)), className: popoverClassName, position: popoverPosition, offset: [0, 8], withTransition: false, preventFlip: preventFlip, zIndex: zIndexPopover }, renderCalendar()))));
 });
 
 exports.CalendarInput = CalendarInput;

package/calendar-input/cssm/Component.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import { ChangeEvent, MouseEvent, ElementType } from "react";
 import { PopoverProps } from "../../popover";
 import { DateInputProps } from "../../date-input";
-import { CalendarProps } from "../../calendar";
+import { CalendarProps, CalendarMobileProps } from "../../calendar";
 type CalendarInputProps = Omit<DateInputProps, 'onChange' | 'mobileMode'> & {
     /**
      * Дополнительный класс
@@ -20,7 +20,7 @@ type CalendarInputProps = Omit<DateInputProps, 'onChange' | 'mobileMode'> & {
     /**
      * Доп. пропсы для календаря
      */
-    calendarProps?: CalendarProps & Record<string, unknown>;
+    calendarProps?: (CalendarProps & Record<string, unknown>) | (CalendarMobileProps & Record<string, unknown>);
     /**
      * Значение инпута (используется и для календаря)
      */
@@ -117,7 +117,17 @@ declare const CalendarInput: React.ForwardRefExoticComponent<Pick<DateInputProps
     /**
      * Доп. пропсы для календаря
      */
-    calendarProps?: (CalendarProps & Record<string, unknown>) | undefined;
+    calendarProps?: (CalendarProps & Record<string, unknown>) | (CalendarProps & {
+        open: boolean;
+        title?: string | undefined;
+        onClose?: (() => void) | undefined;
+        yearsAmount?: number | undefined;
+        /**
+         * Дополнительный класс для инпута
+         */
+        hasHeader?: boolean | undefined;
+        allowSelectionFromEmptyRange?: boolean | undefined;
+    } & Record<string, unknown>) | undefined;
     /**
      * Значение инпута (используется и для календаря)
      */
@@ -184,7 +194,7 @@ declare const CalendarInput: React.ForwardRefExoticComponent<Pick<DateInputProps
     /**
      * Обработчик изменения календаря
      */
-    onCalendarChange?: ((date: number) => void) | undefined;
+    onCalendarChange?: ((date?: number | undefined) => void) | undefined;
     /**
      * Позиционирование поповера с календарем
      */

package/calendar-input/cssm/Component.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var cn = require('classnames');
 var mergeRefs = require('react-merge-refs');
+var hooks = require('@alfalab/hooks');
 var coreComponentsPopover = require('../../popover/cssm');
 var CalendarMIcon = require('@alfalab/icons-glyph/CalendarMIcon');
 var coreComponentsDateInput = require('../../date-input/cssm');
@@ -60,14 +61,21 @@ function __rest(s, e) {
 }
 
 var CalendarInput = React.forwardRef(function (_a, ref) {
-    var _b;
-    var _c = _a.block, block = _c === void 0 ? false : _c, className = _a.className, inputClassName = _a.inputClassName, popoverClassName = _a.popoverClassName, _d = _a.defaultOpen, defaultOpen = _d === void 0 ? false : _d, defaultMonth = _a.defaultMonth, _e = _a.defaultValue, defaultValue = _e === void 0 ? '' : _e, _f = _a.calendarPosition, calendarPosition = _f === void 0 ? 'popover' : _f, value = _a.value, dataTestId = _a.dataTestId, _g = _a.calendarProps, calendarProps = _g === void 0 ? {} : _g, _h = _a.minDate, minDate = _h === void 0 ? calendarProps.minDate : _h, _j = _a.maxDate, maxDate = _j === void 0 ? calendarProps.maxDate : _j, _k = _a.offDays, offDays = _k === void 0 ? calendarProps.offDays || [] : _k, _l = _a.events, events = _l === void 0 ? calendarProps.events || [] : _l, preventFlip = _a.preventFlip, _m = _a.mobileMode, mobileMode = _m === void 0 ? 'popover' : _m, _o = _a.wrapperRef, wrapperRef = _o === void 0 ? null : _o, disabled = _a.disabled, _p = _a.onChange, onChange = _p === void 0 ? function () { return null; } : _p, onInputChange = _a.onInputChange, onCalendarChange = _a.onCalendarChange, onKeyDown = _a.onKeyDown, readOnly = _a.readOnly, _q = _a.Calendar, Calendar = _q === void 0 ? coreComponentsCalendar.Calendar : _q, _r = _a.popoverPosition, popoverPosition = _r === void 0 ? 'bottom-start' : _r, zIndexPopover = _a.zIndexPopover, useAnchorWidth = _a.useAnchorWidth, rightAddons = _a.rightAddons, error = _a.error, restProps = __rest(_a, ["block", "className", "inputClassName", "popoverClassName", "defaultOpen", "defaultMonth", "defaultValue", "calendarPosition", "value", "dataTestId", "calendarProps", "minDate", "maxDate", "offDays", "events", "preventFlip", "mobileMode", "wrapperRef", "disabled", "onChange", "onInputChange", "onCalendarChange", "onKeyDown", "readOnly", "Calendar", "popoverPosition", "zIndexPopover", "useAnchorWidth", "rightAddons", "error"]);
+    var _b, _c;
+    var _d;
+    var _e = _a.block, block = _e === void 0 ? false : _e, className = _a.className, inputClassName = _a.inputClassName, popoverClassName = _a.popoverClassName, _f = _a.defaultOpen, defaultOpen = _f === void 0 ? false : _f, defaultMonth = _a.defaultMonth, _g = _a.defaultValue, defaultValue = _g === void 0 ? '' : _g, _h = _a.calendarPosition, calendarPosition = _h === void 0 ? 'popover' : _h, value = _a.value, dataTestId = _a.dataTestId, _j = _a.calendarProps, calendarProps = _j === void 0 ? {} : _j, _k = _a.minDate, minDate = _k === void 0 ? calendarProps.minDate : _k, _l = _a.maxDate, maxDate = _l === void 0 ? calendarProps.maxDate : _l, _m = _a.offDays, offDays = _m === void 0 ? calendarProps.offDays || [] : _m, _o = _a.events, events = _o === void 0 ? calendarProps.events || [] : _o, preventFlip = _a.preventFlip, _p = _a.mobileMode, mobileMode = _p === void 0 ? 'popover' : _p, _q = _a.wrapperRef, wrapperRef = _q === void 0 ? null : _q, disabled = _a.disabled, _r = _a.onChange, onChange = _r === void 0 ? function () { return null; } : _r, onInputChange = _a.onInputChange, onCalendarChange = _a.onCalendarChange, onKeyDown = _a.onKeyDown, readOnly = _a.readOnly, _s = _a.Calendar, Calendar = _s === void 0 ? coreComponentsCalendar.Calendar : _s, _t = _a.popoverPosition, popoverPosition = _t === void 0 ? 'bottom-start' : _t, zIndexPopover = _a.zIndexPopover, useAnchorWidth = _a.useAnchorWidth, rightAddons = _a.rightAddons, error = _a.error, restProps = __rest(_a, ["block", "className", "inputClassName", "popoverClassName", "defaultOpen", "defaultMonth", "defaultValue", "calendarPosition", "value", "dataTestId", "calendarProps", "minDate", "maxDate", "offDays", "events", "preventFlip", "mobileMode", "wrapperRef", "disabled", "onChange", "onInputChange", "onCalendarChange", "onKeyDown", "readOnly", "Calendar", "popoverPosition", "zIndexPopover", "useAnchorWidth", "rightAddons", "error"]);
+    var view = hooks.useMedia([
+        ['mobile', '(max-width: 1023px)'],
+        ['desktop', '(min-width: 1024px)'],
+    ], 'desktop')[0];
+    var CalendarComponent = view === 'desktop' ? Calendar : coreComponentsCalendar.CalendarMobile;
+    var calendarResponsive = (_d = calendarProps === null || calendarProps === void 0 ? void 0 : calendarProps.responsive) !== null && _d !== void 0 ? _d : true;
     var shouldRenderNative = utils.SUPPORTS_INPUT_TYPE_DATE && mobileMode === 'native';
     var shouldRenderOnlyInput = mobileMode === 'input';
     var shouldRenderStatic = calendarPosition === 'static' && !shouldRenderOnlyInput;
     var shouldRenderPopover = calendarPosition === 'popover' && !shouldRenderNative && !shouldRenderOnlyInput;
-    var _s = React.useState(false), open = _s[0], setOpen = _s[1];
-    var _t = React.useState(value || defaultValue), inputValue = _t[0], setInputValue = _t[1];
+    var _u = React.useState(false), open = _u[0], setOpen = _u[1];
+    var _v = React.useState(value || defaultValue), inputValue = _v[0], setInputValue = _v[1];
     var calendarValue = inputValue ? coreComponentsDateInput.parseDateString(inputValue).getTime() : undefined;
     var checkInputValueIsValid = React.useCallback(function (newInputValue) {
         if (!newInputValue || error)
@@ -94,17 +102,21 @@ var CalendarInput = React.forwardRef(function (_a, ref) {
             setOpen(true);
     }, [open]);
     var handleFocus = React.useCallback(function (event) {
-        setOpen(true);
-        if (!open && event.target.tagName !== 'INPUT' && calendarRef.current) {
-            calendarRef.current.focus();
+        if (view === 'desktop') {
+            setOpen(true);
+            if (!open && event.target.tagName !== 'INPUT' && calendarRef.current) {
+                calendarRef.current.focus();
+            }
         }
-    }, [open]);
+    }, [open, view]);
     var handleBlur = React.useCallback(function (event) {
-        var target = (event.relatedTarget || document.activeElement);
-        if (calendarRef.current && calendarRef.current.contains(target) === false) {
-            setOpen(false);
+        if (view === 'desktop') {
+            var target = (event.relatedTarget || document.activeElement);
+            if (calendarRef.current && calendarRef.current.contains(target) === false) {
+                setOpen(false);
+            }
         }
-    }, []);
+    }, [view]);
     var handleInputKeyDown = React.useCallback(function (event) {
         if (['ArrowDown', 'ArrowUp'].includes(event.key) && calendarRef.current) {
             event.preventDefault();
@@ -131,13 +143,20 @@ var CalendarInput = React.forwardRef(function (_a, ref) {
         changeHandler(event, payload.value, payload.date, 'input', !payload.value || checkInputValueIsValid(payload.value));
     }, [changeHandler, checkInputValueIsValid]);
     var handleCalendarChange = React.useCallback(function (date) {
-        changeHandler(null, coreComponentsDateInput.formatDate(date), new Date(date), 'calendar');
-        setOpen(false);
-    }, [changeHandler]);
+        if (date) {
+            changeHandler(null, coreComponentsDateInput.formatDate(date), new Date(date), 'calendar');
+        }
+        if (view === 'desktop') {
+            setOpen(false);
+        }
+    }, [changeHandler, view]);
     var handleCalendarWrapperMouseDown = React.useCallback(function (event) {
         // Не дает инпуту терять фокус при выборе даты
         event.preventDefault();
     }, []);
+    var handleCalendarClose = React.useCallback(function () {
+        setOpen(false);
+    }, []);
     React.useEffect(function () {
         setOpen(defaultOpen);
     }, [defaultOpen]);
@@ -146,22 +165,10 @@ var CalendarInput = React.forwardRef(function (_a, ref) {
             setInputValue(value);
         }
     }, [value]);
-    var renderCalendar = React.useCallback(function () { return (
+    var renderCalendar = function () { return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     React__default['default'].createElement("div", { onMouseDown: handleCalendarWrapperMouseDown },
-        React__default['default'].createElement(Calendar, __assign({}, calendarProps, { ref: calendarRef, defaultMonth: defaultMonth, value: checkInputValueIsValid(inputValue) ? calendarValue : undefined, onChange: handleCalendarChange, minDate: minDate, maxDate: maxDate, offDays: offDays, events: events })))); }, [
-        calendarProps,
-        calendarValue,
-        checkInputValueIsValid,
-        defaultMonth,
-        events,
-        handleCalendarChange,
-        handleCalendarWrapperMouseDown,
-        inputValue,
-        maxDate,
-        minDate,
-        offDays,
-    ]);
+        React__default['default'].createElement(CalendarComponent, __assign({}, calendarProps, { responsive: calendarResponsive, open: open, onClose: handleCalendarClose, ref: calendarRef, defaultMonth: defaultMonth, value: checkInputValueIsValid(inputValue) ? calendarValue : undefined, onChange: handleCalendarChange, minDate: minDate, maxDate: maxDate, offDays: offDays, events: events })))); };
     return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].component, className, (_b = {},
@@ -171,7 +178,9 @@ var CalendarInput = React.forwardRef(function (_a, ref) {
                 rightAddons,
                 shouldRenderPopover && (React__default['default'].createElement(CalendarMIcon.CalendarMIcon, { className: styles__default['default'].calendarIcon }))), onKeyDown: handleInputKeyDown, onChange: handleInputChange, block: true })),
         shouldRenderStatic && renderCalendar(),
-        shouldRenderPopover && (React__default['default'].createElement(coreComponentsPopover.Popover, { open: open, useAnchorWidth: useAnchorWidth, anchorElement: inputWrapperRef.current, popperClassName: styles__default['default'].calendarContainer, className: popoverClassName, position: popoverPosition, offset: [0, 8], withTransition: false, preventFlip: preventFlip, zIndex: zIndexPopover }, renderCalendar()))));
+        shouldRenderPopover && (React__default['default'].createElement(coreComponentsPopover.Popover, { open: open, useAnchorWidth: useAnchorWidth, anchorElement: inputWrapperRef.current, popperClassName: cn__default['default'](styles__default['default'].calendarContainer, (_c = {},
+                _c[styles__default['default'].calendarResponsive] = calendarResponsive,
+                _c)), className: popoverClassName, position: popoverPosition, offset: [0, 8], withTransition: false, preventFlip: preventFlip, zIndex: zIndexPopover }, renderCalendar()))));
 });
 
 exports.CalendarInput = CalendarInput;

package/calendar-input/cssm/index.js

@@ -4,6 +4,7 @@ var Component = require('./Component.js');
 require('react');
 require('classnames');
 require('react-merge-refs');
+require('@alfalab/hooks');
 require('../../popover/cssm');
 require('@alfalab/icons-glyph/CalendarMIcon');
 require('../../date-input/cssm');

package/calendar-input/cssm/index.module.css

@@ -726,8 +726,18 @@
     --calendar-width: 344px;
     --calendar-inner-width: 280px;
     --calendar-mobile-inner-width: 256px;
+    --calendar-inner-third-part-width: calc(var(--calendar-inner-width) / 3);
+    --calendar-mobile-inner-half-width: calc(var(--calendar-mobile-inner-width) / 2);
 
     /* Кнопки выбора месяцев и годов */
+    --calendar-select-button-gap: calc(var(--gap-xs) / 3);
+    --calendar-mobile-select-button-gap: calc(var(--gap-2xs) / 2);
+    --calendar-mobile-select-button-width: calc(
+        var(--calendar-mobile-inner-half-width) - var(--calendar-mobile-select-button-gap)
+    );
+    --calendar-select-button-width: calc(
+        var(--calendar-inner-third-part-width) - var(--calendar-select-button-gap)
+    );
     --calendar-select-button-today-border-color: var(--color-light-border-key);
     --calendar-select-button-selected-background: var(--color-light-bg-primary-inverted);
 
@@ -747,6 +757,9 @@
     --calendar-highlighted-color: var(--color-light-text-primary);
     --calendar-highlighted-background: var(--color-light-graphic-quaternary);
 
+    /* holidays */
+    --calendar-holiday-color: var(--color-light-text-accent);
+
     /* range */
     --calendar-range-color: var(--color-light-text-primary);
     --calendar-range-background: var(--color-light-specialbg-component);
@@ -788,6 +801,10 @@
         min-width: 288px
 }
     }
+.calendarResponsive {
+    width: var(--calendar-width);
+    padding: 0 var(--gap-m);
+}
 .calendarIcon {
     width: 24px;
     height: 24px;

package/calendar-input/cssm/stories.module.css

@@ -726,8 +726,18 @@
     --calendar-width: 344px;
     --calendar-inner-width: 280px;
     --calendar-mobile-inner-width: 256px;
+    --calendar-inner-third-part-width: calc(var(--calendar-inner-width) / 3);
+    --calendar-mobile-inner-half-width: calc(var(--calendar-mobile-inner-width) / 2);
 
     /* Кнопки выбора месяцев и годов */
+    --calendar-select-button-gap: calc(var(--gap-xs) / 3);
+    --calendar-mobile-select-button-gap: calc(var(--gap-2xs) / 2);
+    --calendar-mobile-select-button-width: calc(
+        var(--calendar-mobile-inner-half-width) - var(--calendar-mobile-select-button-gap)
+    );
+    --calendar-select-button-width: calc(
+        var(--calendar-inner-third-part-width) - var(--calendar-select-button-gap)
+    );
     --calendar-select-button-today-border-color: var(--color-light-border-key);
     --calendar-select-button-selected-background: var(--color-light-bg-primary-inverted);
 
@@ -747,6 +757,9 @@
     --calendar-highlighted-color: var(--color-light-text-primary);
     --calendar-highlighted-background: var(--color-light-graphic-quaternary);
 
+    /* holidays */
+    --calendar-holiday-color: var(--color-light-text-accent);
+
     /* range */
     --calendar-range-color: var(--color-light-text-primary);
     --calendar-range-background: var(--color-light-specialbg-component);

package/calendar-input/esm/Component.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import { ChangeEvent, MouseEvent, ElementType } from "react";
 import { PopoverProps } from "../../popover";
 import { DateInputProps } from "../../date-input";
-import { CalendarProps } from "../../calendar";
+import { CalendarProps, CalendarMobileProps } from "../../calendar";
 type CalendarInputProps = Omit<DateInputProps, 'onChange' | 'mobileMode'> & {
     /**
      * Дополнительный класс
@@ -20,7 +20,7 @@ type CalendarInputProps = Omit<DateInputProps, 'onChange' | 'mobileMode'> & {
     /**
      * Доп. пропсы для календаря
      */
-    calendarProps?: CalendarProps & Record<string, unknown>;
+    calendarProps?: (CalendarProps & Record<string, unknown>) | (CalendarMobileProps & Record<string, unknown>);
     /**
      * Значение инпута (используется и для календаря)
      */
@@ -117,7 +117,17 @@ declare const CalendarInput: React.ForwardRefExoticComponent<Pick<DateInputProps
     /**
      * Доп. пропсы для календаря
      */
-    calendarProps?: (CalendarProps & Record<string, unknown>) | undefined;
+    calendarProps?: (CalendarProps & Record<string, unknown>) | (CalendarProps & {
+        open: boolean;
+        title?: string | undefined;
+        onClose?: (() => void) | undefined;
+        yearsAmount?: number | undefined;
+        /**
+         * Дополнительный класс для инпута
+         */
+        hasHeader?: boolean | undefined;
+        allowSelectionFromEmptyRange?: boolean | undefined;
+    } & Record<string, unknown>) | undefined;
     /**
      * Значение инпута (используется и для календаря)
      */
@@ -184,7 +194,7 @@ declare const CalendarInput: React.ForwardRefExoticComponent<Pick<DateInputProps
     /**
      * Обработчик изменения календаря
      */
-    onCalendarChange?: ((date: number) => void) | undefined;
+    onCalendarChange?: ((date?: number | undefined) => void) | undefined;
     /**
      * Позиционирование поповера с календарем
      */