@alfalab/core-components 41.11.0-beta.0 → 41.11.0-beta.1

package/calendar/Component.responsive.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 require('tslib');
 require('react');
 require('@alfalab/hooks');
-var components_calendarMobile_Component = require('./Component.responsive-4745bdd7.js');
+var components_calendarMobile_Component = require('./Component.responsive-ffa1e05d.js');
 require('./Component.desktop.js');
 require('react-virtuoso');
 require('@juggle/resize-observer');

package/calendar/components/calendar-mobile/Component.js

@@ -12,7 +12,7 @@ require('date-fns/startOfMonth');
 require('../../../button');
 require('../../../modal/mobile');
 require('../../Component.desktop.js');
-var components_calendarMobile_Component = require('../../Component.responsive-4745bdd7.js');
+var components_calendarMobile_Component = require('../../Component.responsive-ffa1e05d.js');
 require('date-fns/differenceInDays');
 require('@alfalab/hooks');
 require('../../useCalendar.js');

package/calendar/components/calendar-mobile/index.d.ts

@@ -1,2 +1,2 @@
-export * from "../../Component.responsive-4745bdd7";
+export * from "../../Component.responsive-ffa1e05d";
 export {};

package/calendar/components/calendar-mobile/index.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var components_calendarMobile_Component = require('../../Component.responsive-4745bdd7.js');
+var components_calendarMobile_Component = require('../../Component.responsive-ffa1e05d.js');
 require('tslib');
 require('react');
 require('@alfalab/hooks');

package/calendar/esm/Component.responsive.js

@@ -1,7 +1,7 @@
 import 'tslib';
 import 'react';
 import '@alfalab/hooks';
-export { C as CalendarResponsive } from './Component.responsive-92363d82.js';
+export { C as CalendarResponsive } from './Component.responsive-273157f9.js';
 import './Component.desktop.js';
 import 'react-virtuoso';
 import '@juggle/resize-observer';

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

@@ -10,7 +10,7 @@ import 'date-fns/startOfMonth';
 import '../../../../button/esm';
 import '../../../../modal/esm/mobile';
 import '../../Component.desktop.js';
-export { a as CalendarMobile } from '../../Component.responsive-92363d82.js';
+export { a as CalendarMobile } from '../../Component.responsive-273157f9.js';
 import 'date-fns/differenceInDays';
 import '@alfalab/hooks';
 import 'react-merge-refs';

package/calendar/esm/components/calendar-mobile/index.d.ts

@@ -1,2 +1,2 @@
-export * from "../../Component.responsive-92363d82";
+export * from "../../Component.responsive-273157f9";
 export {};

package/calendar/esm/components/calendar-mobile/index.js

@@ -1,4 +1,4 @@
-export { a as CalendarMobile } from '../../Component.responsive-92363d82.js';
+export { a as CalendarMobile } from '../../Component.responsive-273157f9.js';
 import 'tslib';
 import 'react';
 import '@alfalab/hooks';

package/calendar/esm/index.js

@@ -1,5 +1,5 @@
 export { CalendarDesktop as Calendar } from './Component.desktop.js';
-export { a as CalendarMobile, C as CalendarResponsive } from './Component.responsive-92363d82.js';
+export { a as CalendarMobile, C as CalendarResponsive } from './Component.responsive-273157f9.js';
 export { usePeriod, usePeriodWithReset } from './usePeriod.js';
 export { useCalendar } from './useCalendar.js';
 export { PeriodSlider } from './components/period-slider/Component.js';

package/calendar/esm/mobile.js

@@ -1,4 +1,4 @@
-export { a as CalendarMobile } from './Component.responsive-92363d82.js';
+export { a as CalendarMobile } from './Component.responsive-273157f9.js';
 import 'tslib';
 import 'react';
 import '@alfalab/hooks';

package/calendar/esm/responsive.d.ts

@@ -1,2 +1,2 @@
-export * from "./Component.responsive-92363d82";
+export * from "./Component.responsive-273157f9";
 export {};

package/calendar/esm/responsive.js

@@ -1,4 +1,4 @@
-export { C as CalendarResponsive } from './Component.responsive-92363d82.js';
+export { C as CalendarResponsive } from './Component.responsive-273157f9.js';
 import 'tslib';
 import 'react';
 import '@alfalab/hooks';

package/calendar/index.js

@@ -1,7 +1,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var Component_desktop = require('./Component.desktop.js');
-var components_calendarMobile_Component = require('./Component.responsive-4745bdd7.js');
+var components_calendarMobile_Component = require('./Component.responsive-ffa1e05d.js');
 var usePeriod = require('./usePeriod.js');
 var useCalendar = require('./useCalendar.js');
 var components_periodSlider_Component = require('./components/period-slider/Component.js');

package/calendar/mobile.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var components_calendarMobile_Component = require('./Component.responsive-4745bdd7.js');
+var components_calendarMobile_Component = require('./Component.responsive-ffa1e05d.js');
 require('tslib');
 require('react');
 require('@alfalab/hooks');

package/calendar/modern/Component.responsive.js

@@ -1,6 +1,6 @@
 import 'react';
 import '@alfalab/hooks';
-export { C as CalendarResponsive } from './Component.responsive-d78de02c.js';
+export { C as CalendarResponsive } from './Component.responsive-ee7e8c4a.js';
 import './Component.desktop.js';
 import 'react-virtuoso';
 import '@juggle/resize-observer';

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

@@ -9,7 +9,7 @@ import 'date-fns/startOfMonth';
 import '../../../../button/modern';
 import '../../../../modal/modern/mobile';
 import '../../Component.desktop.js';
-export { a as CalendarMobile } from '../../Component.responsive-d78de02c.js';
+export { a as CalendarMobile } from '../../Component.responsive-ee7e8c4a.js';
 import 'date-fns/differenceInDays';
 import '@alfalab/hooks';
 import 'react-merge-refs';

package/calendar/modern/components/calendar-mobile/index.d.ts

@@ -1,2 +1,2 @@
-export * from "../../Component.responsive-d78de02c";
+export * from "../../Component.responsive-ee7e8c4a";
 export {};

package/calendar/modern/components/calendar-mobile/index.js

@@ -1,4 +1,4 @@
-export { a as CalendarMobile } from '../../Component.responsive-d78de02c.js';
+export { a as CalendarMobile } from '../../Component.responsive-ee7e8c4a.js';
 import 'react';
 import '@alfalab/hooks';
 import 'react-virtuoso';

package/calendar/modern/index.js

@@ -1,5 +1,5 @@
 export { CalendarDesktop as Calendar } from './Component.desktop.js';
-export { a as CalendarMobile, C as CalendarResponsive } from './Component.responsive-d78de02c.js';
+export { a as CalendarMobile, C as CalendarResponsive } from './Component.responsive-ee7e8c4a.js';
 export { usePeriod, usePeriodWithReset } from './usePeriod.js';
 export { useCalendar } from './useCalendar.js';
 export { PeriodSlider } from './components/period-slider/Component.js';

package/calendar/modern/mobile.js

@@ -1,4 +1,4 @@
-export { a as CalendarMobile } from './Component.responsive-d78de02c.js';
+export { a as CalendarMobile } from './Component.responsive-ee7e8c4a.js';
 import 'react';
 import '@alfalab/hooks';
 import 'react-virtuoso';

package/calendar/modern/responsive.d.ts

@@ -1,2 +1,2 @@
-export * from "./Component.responsive-d78de02c";
+export * from "./Component.responsive-ee7e8c4a";
 export {};

package/calendar/modern/responsive.js

@@ -1,4 +1,4 @@
-export { C as CalendarResponsive } from './Component.responsive-d78de02c.js';
+export { C as CalendarResponsive } from './Component.responsive-ee7e8c4a.js';
 import 'react';
 import '@alfalab/hooks';
 import 'react-virtuoso';

package/calendar/responsive.d.ts

@@ -1,2 +1,2 @@
-export * from "./Component.responsive-4745bdd7";
+export * from "./Component.responsive-ffa1e05d";
 export {};

package/calendar/responsive.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var components_calendarMobile_Component = require('./Component.responsive-4745bdd7.js');
+var components_calendarMobile_Component = require('./Component.responsive-ffa1e05d.js');
 require('tslib');
 require('react');
 require('@alfalab/hooks');

package/day-of-month-picker/Component.desktop.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import React from 'react';
+import { ReactNode } from "react";
 type DayOfMontPickerDesktopProps = {
     /**
      * Дополнительный класс
@@ -18,9 +19,13 @@ type DayOfMontPickerDesktopProps = {
      */
     dataTestId?: string;
     /**
-     * Должен ли календарь подстраиваться под ширину родителя.
+     * Отображение ошибки
      */
-    responsive?: boolean;
+    error?: ReactNode | boolean;
+    /**
+     * Текст подсказки снизу
+     */
+    hint?: ReactNode;
 };
 declare const DayOfMonthPickerDesktop: React.ForwardRefExoticComponent<DayOfMontPickerDesktopProps & React.RefAttributes<HTMLDivElement>>;
 export { DayOfMontPickerDesktopProps, DayOfMonthPickerDesktop };

package/day-of-month-picker/Component.desktop.js

@@ -1,65 +1,61 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib = require('tslib');
 var React = require('react');
-var cn = require('classnames');
-var coreComponentsIconButton = require('../icon-button');
-var coreComponentsInput = require('../input');
 var coreComponentsPopover = require('../popover');
-var coreComponentsTypography = require('../typography');
-var CalendarMIcon = require('@alfalab/icons-glyph/CalendarMIcon');
+var components_dayInputField_DayInputField = require('./components/day-input-field/DayInputField.js');
 var components_daysTable_Component = require('./components/days-table/Component.js');
-var useCalendar = require('./useCalendar.js');
-require('react-transition-group');
+require('../icon-button');
+require('../input');
+require('@alfalab/icons-glyph/CalendarMIcon');
+require('classnames');
 require('../button');
-require('react-merge-refs');
+require('../typography');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"component":"day-of-month-picker__component_189mh","responsive":"day-of-month-picker__responsive_189mh","container":"day-of-month-picker__container_189mh","calendarContainer":"day-of-month-picker__calendarContainer_189mh","calendarResponsive":"day-of-month-picker__calendarResponsive_189mh","lastDay":"day-of-month-picker__lastDay_189mh","lastDaySelected":"day-of-month-picker__lastDaySelected_189mh"};
+var styles = {"component":"day-of-month-picker__component_189mh","container":"day-of-month-picker__container_189mh","calendarContainer":"day-of-month-picker__calendarContainer_189mh"};
 require('./desktop.css');
 
 var DayOfMonthPickerDesktop = React.forwardRef(function (_a, ref) {
-    var _b, _c, _d;
-    var className = _a.className, value = _a.value, onChange = _a.onChange, dataTestId = _a.dataTestId, responsive = _a.responsive;
-    var selected = React.useMemo(function () { return value !== null && value !== void 0 ? value : undefined; }, [value]);
-    var _e = useCalendar.useCalendar({
-        selected: selected,
-        onChange: onChange,
-    }), getDayProps = _e.getDayProps, getRootProps = _e.getRootProps, highlighted = _e.highlighted;
-    var _f = React.useState(false), show = _f[0], setShow = _f[1];
+    var className = _a.className, value = _a.value, onChange = _a.onChange, dataTestId = _a.dataTestId, error = _a.error, hint = _a.hint;
+    var _b = React.useState(false), show = _b[0], setShow = _b[1];
     var inputWrapperRef = React.useRef(null);
     var popoverRef = React.useRef(null);
-    var handleToggle = function () {
-        setShow(function (prev) { return !prev; });
+    var handleOpenCalendar = function () {
+        setShow(true);
     };
     React.useEffect(function () {
         setShow(false);
     }, [value]);
     var handleBlur = React.useCallback(function (event) {
         var _a;
-        var target = (event.relatedTarget || document.activeElement);
-        if (((_a = popoverRef.current) === null || _a === void 0 ? void 0 : _a.contains(target)) === false) {
+        var target = event.relatedTarget || document.activeElement;
+        if (!((_a = popoverRef.current) === null || _a === void 0 ? void 0 : _a.contains(target))) {
             setShow(false);
         }
     }, []);
-    return (React__default.default.createElement("div", { onBlur: handleBlur },
-        React__default.default.createElement(coreComponentsInput.Input, { wrapperRef: inputWrapperRef, value: "".concat(value === 31 ? 'В последний день месяца' : value), block: true, readOnly: true, onClick: handleToggle, label: '\u041A\u0430\u043A\u043E\u0433\u043E \u0447\u0438\u0441\u043B\u0430', size: 'm', rightAddons: React__default.default.createElement(coreComponentsIconButton.IconButton, { view: 'primary', icon: CalendarMIcon.CalendarMIcon, size: 's', dataTestId: 'icon' }) }),
-        React__default.default.createElement(coreComponentsPopover.Popover, { ref: popoverRef, open: show, anchorElement: inputWrapperRef.current, popperClassName: cn__default.default(styles.calendarContainer, (_b = {},
-                _b[styles.calendarResponsive] = responsive,
-                _b)), offset: [0, 4], withTransition: false, zIndex: 1, position: 'bottom-end' },
-            React__default.default.createElement("div", tslib.__assign({}, getRootProps({ ref: ref }), { className: cn__default.default('cc-calendar', styles.component, className, (_c = {},
-                    _c[styles.responsive] = responsive,
-                    _c)), "data-test-id": dataTestId }),
-                React__default.default.createElement("div", { className: cn__default.default(styles.container) },
-                    React__default.default.createElement(components_daysTable_Component.DaysTable, { highlighted: highlighted, getDayProps: getDayProps, responsive: responsive }),
-                    React__default.default.createElement("div", { className: cn__default.default(styles.lastDay, (_d = {},
-                            _d[styles.lastDaySelected] = value === 31,
-                            _d)) },
-                        React__default.default.createElement(coreComponentsTypography.Typography.Text, { color: "".concat(value === 31 ? 'primary-inverted' : 'primary'), onClick: function () { return onChange(31); } }, "\u0412 \u043F\u043E\u0441\u043B\u0435\u0434\u043D\u0438\u0439 \u0434\u0435\u043D\u044C \u043C\u0435\u0441\u044F\u0446\u0430")))))));
+    var handleFocus = React.useCallback(function (event) {
+        setShow(true);
+        if (!show && event.target.tagName !== 'INPUT' && popoverRef.current) {
+            popoverRef.current.focus();
+        }
+    }, [show]);
+    var handleKeyDown = React.useCallback(function (event) {
+        if (event.target.tagName === 'INPUT' && event.key === 'Enter') {
+            setShow(!show);
+        }
+        if (event.key === 'Escape') {
+            setShow(false);
+        }
+    }, [show]);
+    return (React__default.default.createElement("div", { ref: ref, className: className, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, role: 'button', tabIndex: 0 },
+        React__default.default.createElement(components_dayInputField_DayInputField.DayInputField, { inputWrapperRef: inputWrapperRef, value: value !== null && value !== void 0 ? value : '', handleToggle: handleOpenCalendar, error: error, hint: hint }),
+        React__default.default.createElement(coreComponentsPopover.Popover, { dataTestId: 'day-of-month-popover', ref: popoverRef, open: show, anchorElement: inputWrapperRef.current, popperClassName: styles.calendarContainer, offset: [0, 4], withTransition: false, zIndex: 1, position: 'bottom-end' },
+            React__default.default.createElement("div", { className: styles.component, "data-test-id": dataTestId },
+                React__default.default.createElement("div", { className: styles.container },
+                    React__default.default.createElement(components_daysTable_Component.DaysTable, { onClick: onChange, selectedDay: value }))))));
 });
 
 exports.DayOfMonthPickerDesktop = DayOfMonthPickerDesktop;

package/day-of-month-picker/Component.responsive.d.ts

@@ -1,23 +1,19 @@
 /// <reference types="react" />
 import React from 'react';
-import { DayOfMonthPickerMobileProps } from "./components/day-of-month-picker-mobile/index";
 import { DayOfMontPickerDesktopProps } from "./Component.desktop";
-type ResponsiveDayOfMonthPickerProps = DayOfMontPickerDesktopProps & DayOfMonthPickerMobileProps & {
+type ResponsiveDayOfMonthPickerProps = DayOfMontPickerDesktopProps & {
     /**
      * Контрольная точка, с нее начинается desktop версия
      * @default 1024
      */
     breakpoint?: number;
 };
-type CalendarMedia = 'desktop' | 'mobile';
+type DayOfMontPickerMedia = 'desktop' | 'mobile';
 declare const DayOfMonthPickerResponsive: React.ForwardRefExoticComponent<DayOfMontPickerDesktopProps & {
-    open: boolean;
-    onClose?: (() => void) | undefined;
-} & {
     /**
      * Контрольная точка, с нее начинается desktop версия
      * @default 1024
      */
     breakpoint?: number | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
-export { ResponsiveDayOfMonthPickerProps, CalendarMedia, DayOfMonthPickerResponsive };
+export { ResponsiveDayOfMonthPickerProps, DayOfMontPickerMedia, DayOfMonthPickerResponsive };

package/day-of-month-picker/Component.responsive.js

@@ -5,18 +5,16 @@ var React = require('react');
 var hooks = require('@alfalab/hooks');
 var components_dayOfMonthPickerMobile_Component = require('./components/day-of-month-picker-mobile/Component.js');
 var Component_desktop = require('./Component.desktop.js');
-require('classnames');
-require('../modal/mobile');
+require('../bottom-sheet');
+require('./components/day-input-field/DayInputField.js');
 require('../icon-button');
 require('../input');
-require('../popover');
-require('../typography');
 require('@alfalab/icons-glyph/CalendarMIcon');
 require('./components/days-table/Component.js');
-require('react-transition-group');
+require('classnames');
 require('../button');
-require('./useCalendar.js');
-require('react-merge-refs');
+require('../typography');
+require('../popover');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

package/day-of-month-picker/components/day-input-field/DayInputField.d.ts

@@ -0,0 +1,10 @@
+import { FC, ReactNode, Ref } from 'react';
+type DayInputFieldProps = {
+    inputWrapperRef: Ref<HTMLDivElement> | undefined;
+    value: number | string;
+    handleToggle: () => void;
+    error?: ReactNode;
+    hint?: ReactNode;
+};
+declare const DayInputField: FC<DayInputFieldProps>;
+export { DayInputField };

package/day-of-month-picker/components/day-input-field/DayInputField.js

@@ -0,0 +1,17 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var coreComponentsIconButton = require('../../../icon-button');
+var coreComponentsInput = require('../../../input');
+var CalendarMIcon = require('@alfalab/icons-glyph/CalendarMIcon');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+var DayInputField = function (_a) {
+    var inputWrapperRef = _a.inputWrapperRef, value = _a.value, handleToggle = _a.handleToggle, error = _a.error, hint = _a.hint;
+    return (React__default.default.createElement(coreComponentsInput.Input, { dataTestId: 'day-input-field', wrapperRef: inputWrapperRef, value: "".concat(value === 31 ? 'В последний день месяца' : value), block: true, readOnly: true, onClick: handleToggle, label: '\u041A\u0430\u043A\u043E\u0433\u043E \u0447\u0438\u0441\u043B\u0430', size: 'm', error: error, rightAddons: React__default.default.createElement(coreComponentsIconButton.IconButton, { view: 'primary', icon: CalendarMIcon.CalendarMIcon, size: 's', dataTestId: 'icon' }), hint: hint }));
+};
+
+exports.DayInputField = DayInputField;

package/day-of-month-picker/components/day-of-month-picker-mobile/Component.d.ts

@@ -1,24 +1,5 @@
 /// <reference types="react" />
 import React from 'react';
 import { DayOfMontPickerDesktopProps } from "../../Component.desktop";
-type DayOfMonthPickerMobileProps = DayOfMontPickerDesktopProps & {
-    /**
-     * Управление видимостью модалки
-     */
-    open: boolean;
-    /**
-     * Обработчик закрытия модалки
-     */
-    onClose?: () => void;
-};
-declare const DayOfMonthPickerMobile: React.ForwardRefExoticComponent<DayOfMontPickerDesktopProps & {
-    /**
-     * Управление видимостью модалки
-     */
-    open: boolean;
-    /**
-     * Обработчик закрытия модалки
-     */
-    onClose?: (() => void) | undefined;
-} & React.RefAttributes<HTMLDivElement>>;
-export { DayOfMonthPickerMobileProps, DayOfMonthPickerMobile };
+declare const DayOfMonthPickerMobile: React.ForwardRefExoticComponent<DayOfMontPickerDesktopProps & React.RefAttributes<HTMLDivElement>>;
+export { DayOfMonthPickerMobile };

package/day-of-month-picker/components/day-of-month-picker-mobile/Component.js

@@ -1,38 +1,35 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var cn = require('classnames');
-var mobile = require('../../../modal/mobile');
-var Component_desktop = require('../../Component.desktop.js');
-require('tslib');
+var coreComponentsBottomSheet = require('../../../bottom-sheet');
+var components_dayInputField_DayInputField = require('../day-input-field/DayInputField.js');
+var components_daysTable_Component = require('../days-table/Component.js');
 require('../../../icon-button');
 require('../../../input');
-require('../../../popover');
-require('../../../typography');
 require('@alfalab/icons-glyph/CalendarMIcon');
-require('../days-table/Component.js');
-require('react-transition-group');
+require('classnames');
 require('../../../button');
-require('../../useCalendar.js');
-require('react-merge-refs');
+require('../../../typography');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
-
-var styles = {"wrapper":"day-of-month-picker__wrapper_hvseu","withZIndex":"day-of-month-picker__withZIndex_hvseu","calendar":"day-of-month-picker__calendar_hvseu"};
-require('./index.css');
 
 var DayOfMonthPickerMobile = React.forwardRef(function (_a, ref) {
-    var _b;
-    var className = _a.className, value = _a.value, onChange = _a.onChange, dataTestId = _a.dataTestId, open = _a.open, onClose = _a.onClose;
-    var modalRef = React.useRef(null);
-    return (React__default.default.createElement("div", { className: cn__default.default(className, styles.component), ref: ref, "data-test-id": dataTestId },
-        React__default.default.createElement(mobile.ModalMobile, { open: open, onClose: onClose, ref: modalRef, className: styles.modal, wrapperClassName: styles.wrapper },
-            React__default.default.createElement(mobile.ModalMobile.Header, { hasCloser: true, title: '\u041A\u0430\u043A\u043E\u0433\u043E \u0447\u0438\u0441\u043B\u0430', sticky: true, className: cn__default.default((_b = {}, _b[styles.withZIndex] = true, _b)) }),
-            React__default.default.createElement(mobile.ModalMobile.Content, { flex: true },
-                React__default.default.createElement(Component_desktop.DayOfMonthPickerDesktop, { responsive: true, className: styles.calendar, value: value, onChange: onChange })))));
+    var className = _a.className, value = _a.value, onChange = _a.onChange, dataTestId = _a.dataTestId, error = _a.error, hint = _a.hint;
+    var _b = React.useState(false), show = _b[0], setShow = _b[1];
+    var inputWrapperRef = React.useRef(null);
+    var handleToggle = function () {
+        setShow(function (prev) { return !prev; });
+    };
+    var handleChangeDay = function (day) {
+        onChange(day);
+        setShow(false);
+    };
+    return (React__default.default.createElement(React__default.default.Fragment, null,
+        React__default.default.createElement(components_dayInputField_DayInputField.DayInputField, { inputWrapperRef: inputWrapperRef, value: value !== null && value !== void 0 ? value : '', handleToggle: handleToggle, error: error, hint: hint }),
+        React__default.default.createElement(coreComponentsBottomSheet.BottomSheet, { open: show, onClose: function () { return setShow(false); }, className: className, title: '\u041A\u0430\u043A\u043E\u0433\u043E \u0447\u0438\u0441\u043B\u0430', stickyHeader: true, hasCloser: true, ref: ref, dataTestId: dataTestId },
+            React__default.default.createElement(components_daysTable_Component.DaysTable, { selectedDay: value, onClick: handleChangeDay }))));
 });
 
 exports.DayOfMonthPickerMobile = DayOfMonthPickerMobile;

package/day-of-month-picker/components/day-of-month-picker-mobile/index.js

@@ -2,20 +2,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var components_dayOfMonthPickerMobile_Component = require('./Component.js');
 require('react');
-require('classnames');
-require('../../../modal/mobile');
-require('../../Component.desktop.js');
-require('tslib');
+require('../../../bottom-sheet');
+require('../day-input-field/DayInputField.js');
 require('../../../icon-button');
 require('../../../input');
-require('../../../popover');
-require('../../../typography');
 require('@alfalab/icons-glyph/CalendarMIcon');
 require('../days-table/Component.js');
-require('react-transition-group');
+require('classnames');
 require('../../../button');
-require('../../useCalendar.js');
-require('react-merge-refs');
+require('../../../typography');
 
 
 

package/day-of-month-picker/components/days-table/Component.d.ts

@@ -1,21 +1,7 @@
-import { FC, RefCallback } from 'react';
+import { FC } from 'react';
 type DaysTableProps = {
-    /**
-     * Доп. пропсы для переданного дня
-     */
-    getDayProps: (day: number) => Record<string, unknown> & {
-        ref: RefCallback<HTMLTableCellElement>;
-        onClick: (e: number) => void;
-        selected: boolean;
-    };
-    /**
-     * Должен ли календарь подстраиваться под ширину родителя.
-     */
-    responsive?: boolean;
-    /**
-     * Подсвеченный день (ховер)
-     */
-    highlighted?: number;
+    onClick: (day: number) => void;
+    selectedDay?: number;
 };
 declare const DaysTable: FC<DaysTableProps>;
 export { DaysTableProps, DaysTable };