@alfalab/core-components 27.8.1 → 27.9.0-beta.0

package/calendar/modern/index.d.ts

@@ -2,4 +2,5 @@ export * from "./Component";
 export { usePeriod, usePeriodWithReset } from "./usePeriod";
 export { useCalendar } from "./useCalendar";
 export * from "./components/period-slider/index";
+export * from "./components/calendar-mobile/index";
 export { russianWeekDay, dateInLimits, limitDate, monthName, DAYS_IN_WEEK, MONTHS, MONTHS_IN_YEAR, SUNDAY_INDEX, WEEKDAYS, DATE_FORMAT } from "./utils";

package/calendar/modern/index.js

@@ -47,6 +47,7 @@ import 'date-fns/subYears';
 import 'react-merge-refs';
 import '@alfalab/icons-glyph/ChevronDownCompactSIcon';
 import 'date-fns/differenceInDays';
+import 'react-virtuoso';
 import './components/header/Component.js';
 import '../../button/modern';
 export { DATE_FORMAT, DAYS_IN_WEEK, MONTHS, MONTHS_IN_YEAR, SUNDAY_INDEX, WEEKDAYS, dateInLimits, limitDate, monthName, russianWeekDay } from './utils.js';
@@ -61,3 +62,5 @@ export { useCalendar } from './useCalendar.js';
 import './components/month-year-header/Component.js';
 export { Calendar } from './Component.js';
 export { usePeriod, usePeriodWithReset } from './usePeriod.js';
+import '../../modal/modern/mobile';
+export { CalendarMobile } from './components/calendar-mobile/Component.js';

package/calendar/modern/useCalendar.d.ts

@@ -57,11 +57,11 @@ declare function useCalendar({ defaultMonth, month, minDate, view, maxDate, sele
     getDayProps: (day: Day) => {
         'data-date': number;
         'aria-selected': boolean | undefined;
-        ref: (node: HTMLButtonElement) => void;
+        ref: (node: HTMLTableDataCellElement) => void;
         tabIndex: number;
-        onMouseEnter: (event: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>) => void;
+        onMouseEnter: (event: MouseEvent<HTMLTableDataCellElement, globalThis.MouseEvent>) => void;
         onMouseLeave: () => void;
-        onClick: (event: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>) => void;
+        onClick: (event: MouseEvent<HTMLTableDataCellElement, globalThis.MouseEvent>) => void;
     };
     getMonthProps: (month: Month) => {
         'data-date': number;

package/calendar/modern/useCalendar.js

@@ -179,7 +179,8 @@ function useCalendar({ defaultMonth, month, minDate, view = 'days', maxDate, sel
         if (date && onChange) {
             onChange(+date);
         }
-    }, [onChange]);
+        handleDayMouseLeave();
+    }, [onChange, handleDayMouseLeave]);
     const daysControls = useMemo(() => ({
         ArrowLeft: () => focusDay('prev'),
         ArrowRight: () => focusDay('next'),

package/calendar/tslib.es6-b32742c1.js

@@ -0,0 +1,49 @@
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+exports.__assign = function () {
+    exports.__assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s)
+                if (Object.prototype.hasOwnProperty.call(s, p))
+                    t[p] = s[p];
+        }
+        return t;
+    };
+    return exports.__assign.apply(this, arguments);
+};
+function __rest(s, e) {
+    var t = {};
+    for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+function __spreadArrays() {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++)
+        s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+}
+
+exports.__rest = __rest;
+exports.__spreadArrays = __spreadArrays;

package/calendar/useCalendar.d.ts

@@ -57,11 +57,11 @@ declare function useCalendar({ defaultMonth, month, minDate, view, maxDate, sele
     getDayProps: (day: Day) => {
         'data-date': number;
         'aria-selected': boolean | undefined;
-        ref: (node: HTMLButtonElement) => void;
+        ref: (node: HTMLTableDataCellElement) => void;
         tabIndex: number;
-        onMouseEnter: (event: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>) => void;
+        onMouseEnter: (event: MouseEvent<HTMLTableDataCellElement, globalThis.MouseEvent>) => void;
         onMouseLeave: () => void;
-        onClick: (event: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>) => void;
+        onClick: (event: MouseEvent<HTMLTableDataCellElement, globalThis.MouseEvent>) => void;
     };
     getMonthProps: (month: Month) => {
         'data-date': number;

package/calendar/useCalendar.js

@@ -196,7 +196,8 @@ function useCalendar(_a) {
         if (date && onChange) {
             onChange(+date);
         }
-    }, [onChange]);
+        handleDayMouseLeave();
+    }, [onChange, handleDayMouseLeave]);
     var daysControls = React.useMemo(function () { return ({
         ArrowLeft: function () { return focusDay('prev'); },
         ArrowRight: function () { return focusDay('next'); },

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>);
     /**
      * Значение инпута (используется и для календаря)
      */
@@ -117,7 +117,12 @@ 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;
+    } & Record<string, unknown>) | undefined;
     /**
      * Значение инпута (используется и для календаря)
      */
@@ -184,7 +189,7 @@ declare const CalendarInput: React.ForwardRefExoticComponent<Pick<DateInputProps
     /**
      * Обработчик изменения календаря
      */
-    onCalendarChange?: ((date: number) => void) | undefined;
+    onCalendarChange?: ((date?: number | undefined) => void) | undefined;
     /**
      * Позиционирование поповера с календарем
      */

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,12 +58,17 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"component":"calendar-input__component_n9pu9","block":"calendar-input__block_n9pu9","calendarContainer":"calendar-input__calendarContainer_n9pu9","calendarIcon":"calendar-input__calendarIcon_n9pu9","nativeInput":"calendar-input__nativeInput_n9pu9"};
+var styles = {"component":"calendar-input__component_15x5q","block":"calendar-input__block_15x5q","calendarContainer":"calendar-input__calendarContainer_15x5q","calendarIcon":"calendar-input__calendarIcon_15x5q","nativeInput":"calendar-input__nativeInput_15x5q"};
 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 view = hooks.useMedia([
+        ['mobile', '(max-width: 1023px)'],
+        ['desktop', '(min-width: 1024px)'],
+    ], 'desktop')[0];
+    var CalendarComponent = view === 'desktop' ? Calendar : coreComponentsCalendar.CalendarMobile;
     var shouldRenderNative = utils.SUPPORTS_INPUT_TYPE_DATE && mobileMode === 'native';
     var shouldRenderOnlyInput = mobileMode === 'input';
     var shouldRenderStatic = calendarPosition === 'static' && !shouldRenderOnlyInput;
@@ -95,17 +101,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 +142,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]);
@@ -150,12 +167,14 @@ var CalendarInput = React.forwardRef(function (_a, ref) {
     var renderCalendar = React.useCallback(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 })))); }, [
+        React__default['default'].createElement(CalendarComponent, __assign({}, calendarProps, { open: open, onClose: handleCalendarClose, ref: calendarRef, defaultMonth: defaultMonth, value: checkInputValueIsValid(inputValue) ? calendarValue : undefined, onChange: handleCalendarChange, minDate: minDate, maxDate: maxDate, offDays: offDays, events: events })))); }, [
         calendarProps,
         calendarValue,
         checkInputValueIsValid,
         defaultMonth,
         events,
+        open,
+        handleCalendarClose,
         handleCalendarChange,
         handleCalendarWrapperMouseDown,
         inputValue,

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,12 @@ 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;
+    } & Record<string, unknown>) | undefined;
     /**
      * Значение инпута (используется и для календаря)
      */
@@ -184,7 +189,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');
@@ -62,6 +63,11 @@ 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 view = hooks.useMedia([
+        ['mobile', '(max-width: 1023px)'],
+        ['desktop', '(min-width: 1024px)'],
+    ], 'desktop')[0];
+    var CalendarComponent = view === 'desktop' ? Calendar : coreComponentsCalendar.CalendarMobile;
     var shouldRenderNative = utils.SUPPORTS_INPUT_TYPE_DATE && mobileMode === 'native';
     var shouldRenderOnlyInput = mobileMode === 'input';
     var shouldRenderStatic = calendarPosition === 'static' && !shouldRenderOnlyInput;
@@ -94,17 +100,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 +141,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]);
@@ -149,12 +166,14 @@ var CalendarInput = React.forwardRef(function (_a, ref) {
     var renderCalendar = React.useCallback(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 })))); }, [
+        React__default['default'].createElement(CalendarComponent, __assign({}, calendarProps, { open: open, onClose: handleCalendarClose, ref: calendarRef, defaultMonth: defaultMonth, value: checkInputValueIsValid(inputValue) ? calendarValue : undefined, onChange: handleCalendarChange, minDate: minDate, maxDate: maxDate, offDays: offDays, events: events })))); }, [
         calendarProps,
         calendarValue,
         checkInputValueIsValid,
         defaultMonth,
         events,
+        open,
+        handleCalendarClose,
         handleCalendarChange,
         handleCalendarWrapperMouseDown,
         inputValue,

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');