@megafon/ui-core 6.0.0-beta.4 → 6.0.1

package/dist/es/components/Button/Button.d.ts

@@ -1,11 +1,11 @@
-import * as React from 'react';
-import './Button.scss';
+import React, { Ref } from 'react';
+import './Button.less';
 export declare const ButtonTypes: {
     readonly PRIMARY: "primary";
     readonly OUTLINE: "outline";
     readonly TEXT: "text";
 };
-type ButtonTypesType = (typeof ButtonTypes)[keyof typeof ButtonTypes];
+declare type ButtonTypesType = typeof ButtonTypes[keyof typeof ButtonTypes];
 export declare const ButtonThemes: {
     readonly GREEN: "green";
     readonly GREEN_SOFT: "green-soft";
@@ -15,14 +15,14 @@ export declare const ButtonThemes: {
     readonly BLACK: "black";
     readonly DANGER: "danger";
 };
-type ButtonThemesType = (typeof ButtonThemes)[keyof typeof ButtonThemes];
+declare type ButtonThemesType = typeof ButtonThemes[keyof typeof ButtonThemes];
 export declare const ButtonSizes: {
     readonly EXTRA_SMALL: "extra-small";
     readonly SMALL: "small";
     readonly MEDIUM: "medium";
     readonly LARGE: "large";
 };
-type ButtonSizesType = (typeof ButtonSizes)[keyof typeof ButtonSizes];
+declare type ButtonSizesType = typeof ButtonSizes[keyof typeof ButtonSizes];
 export interface IButtonProps {
     /** Дополнительный класс корневого элемента */
     className?: string | string[];
@@ -81,10 +81,9 @@ export interface IButtonProps {
     /** Отключение кнопки */
     disabled?: boolean;
     /** Ссылка на элемент */
-    buttonRef?: React.Ref<HTMLButtonElement | HTMLAnchorElement>;
+    buttonRef?: Ref<HTMLButtonElement | HTMLAnchorElement>;
     /** Обрезать текст при недостаточной ширине и добавлять многоточие */
     ellipsis?: boolean;
-    children?: React.ReactNode;
     /** Обработчик клика по кнопке */
     onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
 }

package/dist/es/components/Button/Button.js

@@ -1,12 +1,15 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
-import "core-js/modules/es.array.concat.js";
 import "core-js/modules/es.array.is-array.js";
-import * as React from 'react';
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.object.values.js";
+import React from 'react';
 import { cnCreate, detectTouch, filterDataAttrs } from '@megafon/ui-helpers';
+import PropTypes from 'prop-types';
 import Preloader, { PreloaderColors } from "../Preloader/Preloader";
 import "./Button.css";
+
 var Arrow = function Arrow(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 40 40"
@@ -14,6 +17,7 @@ var Arrow = function Arrow(props) {
     d: "M16 26l6-6-6-6 2-2 8 8-8 8z"
   }));
 };
+
 export var ButtonTypes = {
   PRIMARY: 'primary',
   OUTLINE: 'outline',
@@ -35,59 +39,65 @@ export var ButtonSizes = {
   LARGE: 'large'
 };
 var Content;
+
 (function (Content) {
   Content["TEXT"] = "text";
   Content["ICON"] = "icon";
   Content["ICON_TEXT"] = "icon-text";
 })(Content || (Content = {}));
+
 var getLoaderSize = function getLoaderSize(size) {
   return size === ButtonSizes.SMALL || size === ButtonSizes.EXTRA_SMALL ? ButtonSizes.SMALL : ButtonSizes.MEDIUM;
 };
+
 var cn = cnCreate('mfui-button');
+
 var Button = function Button(_ref) {
-  var _ref$classes = _ref.classes,
-    _ref$classes2 = _ref$classes === void 0 ? {} : _ref$classes,
-    rootClassName = _ref$classes2.root,
-    contentClassName = _ref$classes2.content,
-    innerClassName = _ref$classes2.inner,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? '' : _ref$className,
-    _ref$theme = _ref.theme,
-    theme = _ref$theme === void 0 ? 'green' : _ref$theme,
-    _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'primary' : _ref$type,
-    href = _ref.href,
-    download = _ref.download,
-    target = _ref.target,
-    rel = _ref.rel,
-    _ref$actionType = _ref.actionType,
-    actionType = _ref$actionType === void 0 ? 'button' : _ref$actionType,
-    _ref$sizeAll = _ref.sizeAll,
-    sizeAll = _ref$sizeAll === void 0 ? 'medium' : _ref$sizeAll,
-    sizeWide = _ref.sizeWide,
-    sizeDesktop = _ref.sizeDesktop,
-    sizeTablet = _ref.sizeTablet,
-    sizeMobile = _ref.sizeMobile,
-    _ref$fullWidth = _ref.fullWidth,
-    fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
-    _ref$fullWidthMobile = _ref.fullWidthMobile,
-    fullWidthMobile = _ref$fullWidthMobile === void 0 ? false : _ref$fullWidthMobile,
-    _ref$showLoader = _ref.showLoader,
-    showLoader = _ref$showLoader === void 0 ? false : _ref$showLoader,
-    _ref$showArrow = _ref.showArrow,
-    showArrow = _ref$showArrow === void 0 ? false : _ref$showArrow,
-    icon = _ref.icon,
-    disabled = _ref.disabled,
-    children = _ref.children,
-    _ref$ellipsis = _ref.ellipsis,
-    ellipsis = _ref$ellipsis === void 0 ? false : _ref$ellipsis,
-    onClick = _ref.onClick,
-    dataAttrs = _ref.dataAttrs,
-    buttonRef = _ref.buttonRef;
+  var _ref$classes = _ref.classes;
+  _ref$classes = _ref$classes === void 0 ? {} : _ref$classes;
+  var rootClassName = _ref$classes.root,
+      contentClassName = _ref$classes.content,
+      innerClassName = _ref$classes.inner,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      _ref$theme = _ref.theme,
+      theme = _ref$theme === void 0 ? 'green' : _ref$theme,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'primary' : _ref$type,
+      href = _ref.href,
+      download = _ref.download,
+      target = _ref.target,
+      rel = _ref.rel,
+      _ref$actionType = _ref.actionType,
+      actionType = _ref$actionType === void 0 ? 'button' : _ref$actionType,
+      _ref$sizeAll = _ref.sizeAll,
+      sizeAll = _ref$sizeAll === void 0 ? 'medium' : _ref$sizeAll,
+      sizeWide = _ref.sizeWide,
+      sizeDesktop = _ref.sizeDesktop,
+      sizeTablet = _ref.sizeTablet,
+      sizeMobile = _ref.sizeMobile,
+      _ref$fullWidth = _ref.fullWidth,
+      fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
+      _ref$fullWidthMobile = _ref.fullWidthMobile,
+      fullWidthMobile = _ref$fullWidthMobile === void 0 ? false : _ref$fullWidthMobile,
+      _ref$showLoader = _ref.showLoader,
+      showLoader = _ref$showLoader === void 0 ? false : _ref$showLoader,
+      _ref$showArrow = _ref.showArrow,
+      showArrow = _ref$showArrow === void 0 ? false : _ref$showArrow,
+      icon = _ref.icon,
+      disabled = _ref.disabled,
+      children = _ref.children,
+      _ref$ellipsis = _ref.ellipsis,
+      ellipsis = _ref$ellipsis === void 0 ? false : _ref$ellipsis,
+      onClick = _ref.onClick,
+      dataAttrs = _ref.dataAttrs,
+      buttonRef = _ref.buttonRef;
+
   var _React$useState = React.useState(false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    isTouch = _React$useState2[0],
-    setTouch = _React$useState2[1];
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isTouch = _React$useState2[0],
+      setTouch = _React$useState2[1];
+
   var ElementType = href ? 'a' : 'button';
   var displayArrow = showArrow && !icon;
   var handleClick = React.useCallback(function (e) {
@@ -95,6 +105,7 @@ var Button = function Button(_ref) {
       e.preventDefault();
       return;
     }
+
     onClick === null || onClick === void 0 ? void 0 : onClick(e);
   }, [disabled, onClick]);
   var currentTheme = React.useMemo(function () {
@@ -107,8 +118,10 @@ var Button = function Button(_ref) {
     switch (true) {
       case loaderWhite:
         return PreloaderColors.WHITE;
+
       case type === ButtonTypes.OUTLINE && theme === ButtonThemes.BLACK:
         return PreloaderColors.BLACK;
+
       default:
         return PreloaderColors.DEFAULT;
     }
@@ -117,6 +130,7 @@ var Button = function Button(_ref) {
     if (!children && !icon) {
       return null;
     }
+
     return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.content), {
       className: cn('content', {
         ellipsis: ellipsis,
@@ -136,8 +150,10 @@ var Button = function Button(_ref) {
     switch (true) {
       case icon && !children:
         return Content.ICON;
+
       case icon && !!children:
         return Content.ICON_TEXT;
+
       default:
         return Content.TEXT;
     }
@@ -157,18 +173,23 @@ var Button = function Button(_ref) {
       sizeMobile: sizeMobile && getLoaderSize(sizeMobile)
     });
   }, [dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.loader, loaderColor, sizeAll, sizeWide, sizeDesktop, sizeTablet, sizeMobile]);
+
   var setRelAttribute = function setRelAttribute() {
     if (ElementType !== 'a') {
       return undefined;
     }
+
     if (rel) {
       return rel;
     }
+
     if (target && target !== '_self') {
       return 'noreferrer noopener';
     }
+
     return undefined;
   };
+
   var classNameValue = Array.isArray(className) ? [].concat(_toConsumableArray(className), [rootClassName]) : [className, rootClassName];
   React.useEffect(function () {
     setTouch(detectTouch());
@@ -202,4 +223,43 @@ var Button = function Button(_ref) {
     className: cn('inner', innerClassName)
   }), renderedContent, showLoader && renderedLoader));
 };
+
+Button.propTypes = {
+  classes: PropTypes.shape({
+    root: PropTypes.string,
+    content: PropTypes.string,
+    inner: PropTypes.string
+  }),
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    content: PropTypes.objectOf(PropTypes.string.isRequired),
+    inner: PropTypes.objectOf(PropTypes.string.isRequired),
+    loader: PropTypes.objectOf(PropTypes.string.isRequired),
+    text: PropTypes.objectOf(PropTypes.string.isRequired),
+    arrow: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
+  theme: PropTypes.oneOf(Object.values(ButtonThemes)),
+  type: PropTypes.oneOf(Object.values(ButtonTypes)),
+  href: PropTypes.string,
+  download: PropTypes.bool,
+  target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
+  rel: PropTypes.string,
+  actionType: PropTypes.oneOf(['button', 'reset', 'submit']),
+  sizeAll: PropTypes.oneOf(Object.values(ButtonSizes)),
+  sizeWide: PropTypes.oneOf(Object.values(ButtonSizes)),
+  sizeDesktop: PropTypes.oneOf(Object.values(ButtonSizes)),
+  sizeTablet: PropTypes.oneOf(Object.values(ButtonSizes)),
+  sizeMobile: PropTypes.oneOf(Object.values(ButtonSizes)),
+  fullWidth: PropTypes.bool,
+  fullWidthMobile: PropTypes.bool,
+  showLoader: PropTypes.bool,
+  showArrow: PropTypes.bool,
+  icon: PropTypes.element,
+  disabled: PropTypes.bool,
+  buttonRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])]),
+  ellipsis: PropTypes.bool,
+  onClick: PropTypes.func
+};
 export default Button;

package/dist/es/components/Calendar/Calendar.css

@@ -1 +1,5 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-calendar{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}
+.mfui-calendar {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}

package/dist/es/components/Calendar/Calendar.d.ts

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import './Calendar.scss';
+import React from 'react';
+import './Calendar.less';
 export interface ICalendarProps {
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {

package/dist/es/components/Calendar/Calendar.js

@@ -1,20 +1,26 @@
 import _typeof from "@babel/runtime/helpers/typeof";
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import "core-js/modules/es.symbol.js";
-import "core-js/modules/es.array.concat.js";
 import "core-js/modules/es.array.index-of.js";
+import "core-js/modules/es.symbol.js";
 import "core-js/modules/es.array.map.js";
 import "core-js/modules/es.date.to-string.js";
+import "core-js/modules/es.array.concat.js";
+
 var __rest = this && this.__rest || function (s, e) {
   var t = {};
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+
+  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;
 };
-import * as React from 'react';
+
+import React, { useState, useEffect, useMemo, useRef } from 'react';
 import { START_DATE, END_DATE, useDatepicker, useMonth } from '@datepicker-react/hooks';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import differenceInDays from 'date-fns/differenceInDays';
@@ -24,21 +30,26 @@ import isBefore from 'date-fns/isBefore';
 import isEqual from 'date-fns/isEqual';
 import isSameMonth from 'date-fns/isSameMonth';
 import ruLocale from 'date-fns/locale/ru';
-import Day from "./components/_Day/Day";
-import Month from "./components/_Month/Month";
+import PropTypes from 'prop-types';
+import Day from "./components/Day/Day";
+import Month from "./components/Month/Month";
 import "./Calendar.css";
+
 var formatDate = function formatDate(date, pattern) {
   var locale = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ruLocale;
   return format(date, pattern, {
     locale: locale
   });
 };
+
 var weekdayLabelFormat = function weekdayLabelFormat(date) {
   return formatDate(date, 'EEEEEE');
 };
+
 var dayLabelFormat = function dayLabelFormat(date) {
   return formatDate(date, 'd');
 };
+
 var monthLabelFormat = function monthLabelFormat(date) {
   return formatDate(date, 'LLLL');
 };
@@ -52,20 +63,23 @@ var monthLabelFormat = function monthLabelFormat(date) {
 - Should correctly highlights period if start date chosen and hover on possible end date
 
 */
+
+
 var cn = cnCreate('mfui-calendar');
+
 var Calendar = function Calendar(_ref) {
   var dataAttrs = _ref.dataAttrs,
-    _ref$isSingleDate = _ref.isSingleDate,
-    isSingleDate = _ref$isSingleDate === void 0 ? false : _ref$isSingleDate,
-    _ref$startDate = _ref.startDate,
-    startDate = _ref$startDate === void 0 ? null : _ref$startDate,
-    _ref$endDate = _ref.endDate,
-    endDate = _ref$endDate === void 0 ? null : _ref$endDate,
-    className = _ref.className,
-    onChange = _ref.onChange,
-    minBookingDate = _ref.minBookingDate,
-    maxBookingDate = _ref.maxBookingDate;
-  var calendarStateFromProps = React.useMemo(function () {
+      _ref$isSingleDate = _ref.isSingleDate,
+      isSingleDate = _ref$isSingleDate === void 0 ? false : _ref$isSingleDate,
+      _ref$startDate = _ref.startDate,
+      startDate = _ref$startDate === void 0 ? null : _ref$startDate,
+      _ref$endDate = _ref.endDate,
+      endDate = _ref$endDate === void 0 ? null : _ref$endDate,
+      className = _ref.className,
+      onChange = _ref.onChange,
+      minBookingDate = _ref.minBookingDate,
+      maxBookingDate = _ref.maxBookingDate;
+  var calendarStateFromProps = useMemo(function () {
     var isInitialDatesEqual = startDate && endDate && isEqual(startDate, endDate);
     var isStartFocus = !startDate || endDate && !isInitialDatesEqual;
     var isStartDateBlocked = startDate && minBookingDate && maxBookingDate && (isAfter(minBookingDate, startDate) || isBefore(maxBookingDate, startDate));
@@ -77,42 +91,47 @@ var Calendar = function Calendar(_ref) {
       focusedInput: isStartFocus ? START_DATE : END_DATE
     };
   }, [startDate, endDate, isSingleDate, minBookingDate, maxBookingDate]);
-  var _React$useState = React.useState(calendarStateFromProps),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    calendarState = _React$useState2[0],
-    setCalendarState = _React$useState2[1];
-  var _React$useState3 = React.useState(undefined),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    hoveredDate = _React$useState4[0],
-    setHoveredDate = _React$useState4[1];
-  var isUserChoice = React.useRef(false);
+
+  var _useState = useState(calendarStateFromProps),
+      _useState2 = _slicedToArray(_useState, 2),
+      calendarState = _useState2[0],
+      setCalendarState = _useState2[1];
+
+  var _useState3 = useState(undefined),
+      _useState4 = _slicedToArray(_useState3, 2),
+      hoveredDate = _useState4[0],
+      setHoveredDate = _useState4[1];
+
+  var isUserChoice = useRef(false);
   var stateStartDate = calendarState.startDate,
-    stateEndDate = calendarState.endDate,
-    stateFocusedInput = calendarState.focusedInput;
+      stateEndDate = calendarState.endDate,
+      stateFocusedInput = calendarState.focusedInput;
+
   var _a = useDatepicker(_extends({
-      onDatesChange: function onDatesChange() {
-        return undefined;
-      },
-      numberOfMonths: 1,
-      minBookingDate: minBookingDate,
-      maxBookingDate: maxBookingDate,
-      initialVisibleMonth: stateStartDate || undefined
-    }, calendarState)),
-    firstDayOfWeek = _a.firstDayOfWeek,
-    activeMonths = _a.activeMonths,
-    goToPreviousMonths = _a.goToPreviousMonths,
-    goToNextMonths = _a.goToNextMonths,
-    goToDate = _a.goToDate,
-    pickerProps = __rest(_a, ["firstDayOfWeek", "activeMonths", "goToPreviousMonths", "goToNextMonths", "goToDate"]);
-  React.useEffect(function () {
+    onDatesChange: function onDatesChange() {
+      return undefined;
+    },
+    numberOfMonths: 1,
+    minBookingDate: minBookingDate,
+    maxBookingDate: maxBookingDate,
+    initialVisibleMonth: stateStartDate || undefined
+  }, calendarState)),
+      firstDayOfWeek = _a.firstDayOfWeek,
+      activeMonths = _a.activeMonths,
+      goToPreviousMonths = _a.goToPreviousMonths,
+      goToNextMonths = _a.goToNextMonths,
+      goToDate = _a.goToDate,
+      pickerProps = __rest(_a, ["firstDayOfWeek", "activeMonths", "goToPreviousMonths", "goToNextMonths", "goToDate"]);
+
+  useEffect(function () {
     isUserChoice.current = false;
   }, [startDate]);
-  React.useEffect(function () {
+  useEffect(function () {
     var propsStartDate = calendarStateFromProps.startDate;
     setCalendarState(calendarStateFromProps);
-    !isUserChoice.current && propsStartDate && goToDate(propsStartDate);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    !isUserChoice.current && propsStartDate && goToDate(propsStartDate); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [calendarStateFromProps]);
+
   var getCalendarState = function getCalendarState(date) {
     var isStartChose = stateFocusedInput === START_DATE;
     var isEndChose = stateFocusedInput === END_DATE;
@@ -124,11 +143,13 @@ var Calendar = function Calendar(_ref) {
     var isClickAfterChosenEndDate = stateEndDate && isStartChose && isAfter(date, stateEndDate || 0);
     var isClickBeforeStartDate = stateStartDate && isEndChose && !isAfter(date, stateStartDate || 0);
     var isStartDateChose = isStartDateClick || isEndDateClick || isClickBeforeChosenEndDate || isClickAfterChosenEndDate || isClickBeforeStartDate;
+
     switch (true) {
       case isSingleDate:
         return _extends(_extends({}, calendarState), {
           startDate: date
         });
+
       case isPeriodNarrow:
         {
           var isCloserToStart = stateStartDate && stateEndDate && differenceInDays(stateStartDate, date) >= differenceInDays(date, stateEndDate);
@@ -138,17 +159,20 @@ var Calendar = function Calendar(_ref) {
             focusedInput: START_DATE
           });
         }
+
       case isStartDateChose:
         return {
           startDate: date,
           endDate: null,
           focusedInput: END_DATE
         };
+
       case isEndDateChose:
         return _extends(_extends({}, calendarState), {
           endDate: date,
           focusedInput: START_DATE
         });
+
       default:
         return _extends(_extends({}, calendarState), {
           startDate: date,
@@ -156,37 +180,45 @@ var Calendar = function Calendar(_ref) {
         });
     }
   };
+
   var isDateHighlighted = function isDateHighlighted(date) {
     if (!stateStartDate || !!stateEndDate || isSingleDate) {
       return false;
     }
+
     return !!stateStartDate && !!hoveredDate && isAfter(hoveredDate, date) && isBefore(stateStartDate, date);
   };
+
   var handleDaySelect = function handleDaySelect(date) {
     var nextState = getCalendarState(date);
     var nextStartDate = nextState.startDate,
-      nextEndDate = nextState.endDate;
+        nextEndDate = nextState.endDate;
     setCalendarState(nextState);
     isUserChoice.current = true;
     onChange === null || onChange === void 0 ? void 0 : onChange(nextStartDate, nextEndDate);
   };
+
   var handleDateHover = function handleDateHover(date) {
-    date && setHoveredDate(date);
+    return setHoveredDate(date);
   };
+
   var handleDateMouseLeave = function handleDateMouseLeave() {
     return setHoveredDate(undefined);
   };
+
   var renderDays = function renderDays(days) {
     var correctionIndex = 0;
     return days.map(function (day, index) {
       if (_typeof(day) === 'object') {
         var date = day.date,
-          dayLabel = day.dayLabel;
+            dayLabel = day.dayLabel;
+
         if (!dayLabel) {
           return /*#__PURE__*/React.createElement("div", {
             key: index + String(date)
           });
         }
+
         return /*#__PURE__*/React.createElement(Day, _extends({
           dataAttrs: {
             root: _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.day, index + 1 - correctionIndex))
@@ -201,28 +233,32 @@ var Calendar = function Calendar(_ref) {
           isBetween: isDateHighlighted(date)
         }));
       }
+
       correctionIndex += 1;
       return /*#__PURE__*/React.createElement("div", {
         key: index + day
       });
     });
   };
+
   var renderMonths = function renderMonths() {
     return activeMonths.map(function (_ref2) {
       var month = _ref2.month,
-        year = _ref2.year;
+          year = _ref2.year;
+
       // eslint-disable-next-line react-hooks/rules-of-hooks
       var _useMonth = useMonth({
-          year: year,
-          month: month,
-          firstDayOfWeek: firstDayOfWeek,
-          dayLabelFormat: dayLabelFormat,
-          weekdayLabelFormat: weekdayLabelFormat,
-          monthLabelFormat: monthLabelFormat
-        }),
-        days = _useMonth.days,
-        weekdayLabels = _useMonth.weekdayLabels,
-        monthLabel = _useMonth.monthLabel;
+        year: year,
+        month: month,
+        firstDayOfWeek: firstDayOfWeek,
+        dayLabelFormat: dayLabelFormat,
+        weekdayLabelFormat: weekdayLabelFormat,
+        monthLabelFormat: monthLabelFormat
+      }),
+          days = _useMonth.days,
+          weekdayLabels = _useMonth.weekdayLabels,
+          monthLabel = _useMonth.monthLabel;
+
       var isPrevMonthDisabled = !!minBookingDate && isSameMonth(new Date(year, month, 1), minBookingDate);
       var isNextMonthDisabled = !!maxBookingDate && isSameMonth(new Date(year, month, 1), maxBookingDate);
       return /*#__PURE__*/React.createElement(Month, {
@@ -242,8 +278,26 @@ var Calendar = function Calendar(_ref) {
       }, renderDays(days));
     });
   };
+
   return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn([className])
   }), renderMonths());
 };
+
+Calendar.propTypes = {
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    day: PropTypes.objectOf(PropTypes.string.isRequired),
+    month: PropTypes.objectOf(PropTypes.string.isRequired),
+    arrowLeft: PropTypes.objectOf(PropTypes.string.isRequired),
+    arrowRight: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
+  isSingleDate: PropTypes.bool,
+  className: PropTypes.string,
+  startDate: PropTypes.instanceOf(Date),
+  endDate: PropTypes.instanceOf(Date),
+  minBookingDate: PropTypes.instanceOf(Date),
+  maxBookingDate: PropTypes.instanceOf(Date),
+  onChange: PropTypes.func
+};
 export default Calendar;