intelicoreact 0.0.91 → 0.0.92

package/dist/Atomic/FormElements/Dropdown/Dropdown.js

@@ -50,7 +50,8 @@ var Dropdown = function Dropdown(_ref) {
       className = _ref.className,
       isSearchable = _ref.isSearchable,
       entity = _ref.entity,
-      scrollReactionObj = _ref.scrollReactionObj;
+      scrollReactionObj = _ref.scrollReactionObj,
+      isListTop = _ref.isListTop;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -235,7 +236,7 @@ var Dropdown = function Dropdown(_ref) {
       return setIsOpen(!isOpen);
     }
   }, isOpen ? /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronUp, null) : /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronDown, null))), isOpen && filteredOptions.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(RC, "__list"),
+    className: (0, _classnames.default)("".concat(RC, "__list"), (0, _defineProperty2.default)({}, "".concat(RC, "__list-top"), isListTop)),
     ref: dropdownListRef
   }, depend.options.map(function (filteredOption) {
     var _filteredOption$items2;

package/dist/Atomic/FormElements/Dropdown/Dropdown.scss

@@ -71,6 +71,12 @@
       border-radius: 4px;
     }
 
+    &-top {
+      bottom: calc(100% + 4px);
+      top: auto;
+      box-shadow: 0 -3px 10px rgb(0 0 0 / 15%);
+    }
+
     &-item {
       display: flex;
       align-items: center;

package/dist/Atomic/FormElements/Dropdown/Dropdown.stories.js

@@ -102,6 +102,7 @@ var Template = function Template(args) {
 var DropdownTemplate = Template.bind({});
 exports.DropdownTemplate = DropdownTemplate;
 DropdownTemplate.args = {
+  isListTop: true,
   entity: 'entity',
   value: 'drop6',
   placeholder: 'Placeholder',

package/dist/Atomic/FormElements/Dropdown/components/DropdownLoader.js

@@ -11,7 +11,8 @@ var _react = _interopRequireDefault(require("react"));
 
 require("./Loader.scss");
 
-var DropdownLoader = function DropdownLoader() {
+var DropdownLoader = function DropdownLoader(_ref) {
+  var variant = _ref.variant;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "dropdown-loader-box j5"
   }, /*#__PURE__*/_react.default.createElement("div", {

package/dist/Atomic/FormElements/InputCalendar/InputCalendar.js

@@ -35,7 +35,8 @@ var InputCalendar = function InputCalendar(_ref) {
       _ref$placeholder = _ref.placeholder,
       placeholder = _ref$placeholder === void 0 ? 'mm/dd/yyyy' : _ref$placeholder,
       _ref$mask = _ref.mask,
-      mask = _ref$mask === void 0 ? '99/99/9999' : _ref$mask;
+      mask = _ref$mask === void 0 ? '99/99/9999' : _ref$mask,
+      dontLimitFuture = _ref.dontLimitFuture;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -57,7 +58,7 @@ var InputCalendar = function InputCalendar(_ref) {
 
   var getCalendarValue = function getCalendarValue(value) {
     var date = (0, _moment.default)(value).format('L');
-    if (date !== "Invalid date") return date;
+    if (date !== 'Invalid date') return date;
     return (0, _moment.default)(new Date()).format('L');
   };
 
@@ -83,7 +84,8 @@ var InputCalendar = function InputCalendar(_ref) {
     params: {
       minDate: minDate,
       maxDate: maxDate
-    }
+    },
+    dontLimitFuture: dontLimitFuture
   }) : null);
 };
 

package/dist/Atomic/FormElements/InputCalendar/InputCalendar.stories.js

@@ -51,6 +51,7 @@ var CalendarTemplate = Template.bind({});
 exports.CalendarTemplate = CalendarTemplate;
 CalendarTemplate.args = {
   value: '',
-  minDate: '10/14/2020',
-  maxDate: '10/14/2022'
+  // minDate: '10/14/2020',
+  // maxDate: '10/14/2022',
+  dontLimitFuture: true
 };

package/dist/Atomic/UI/Calendar/Calendar.js

@@ -13,12 +13,14 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
-
 var _react = _interopRequireWildcard(require("react"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _moment = _interopRequireDefault(require("moment"));
 
+var _reactInputMask = _interopRequireDefault(require("react-input-mask"));
+
 var _reactFeather = require("react-feather");
 
 require("./Calendar.scss");
@@ -35,11 +37,11 @@ function _default(props) {
       _props$allowNext = props.allowNext,
       allowNext = _props$allowNext === void 0 ? true : _props$allowNext,
       params = props.params,
-      className = props.className;
-  var _params$minDate = params.minDate,
-      minDate = _params$minDate === void 0 ? '01/01/1900' : _params$minDate,
-      _params$maxDate = params.maxDate,
-      maxDate = _params$maxDate === void 0 ? (0, _moment.default)().format('MM/DD/YYYY') : _params$maxDate;
+      className = props.className,
+      dontLimitFuture = props.dontLimitFuture; // const { minDate = '01/01/1900', maxDate = moment().format('MM/DD/YYYY') } = params;
+
+  var minDate = params.minDate,
+      maxDate = params.maxDate;
 
   var _useState = (0, _react.useState)({}),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -51,11 +53,31 @@ function _default(props) {
       showDate = _useState4[0],
       setShowDate = _useState4[1];
 
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      isChangeYear = _useState6[0],
+      setIsChangeYear = _useState6[1];
+
+  var _useState7 = (0, _react.useState)((0, _moment.default)(showDate).format('YYYY')),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      inputYearValue = _useState8[0],
+      setInputYearValue = _useState8[1];
+
+  var yearInputRef = (0, _react.useRef)(null);
   var selectedDay = (0, _moment.default)(showDate);
-  var isError = 'Invalid date';
-  var title = (0, _react.useMemo)(function () {
-    return selectedDay.format('MMM') === isError ? isError : "".concat(selectedDay.format('MMM'), " ").concat((0, _moment.default)(showDate).format('YYYY'));
+  var isError = 'Invalid date'; // const title = useMemo(
+  //   () => (selectedDay.format('MMM') === isError ? isError : `${selectedDay.format('MMM')} ${moment(showDate).format('YYYY')}`),
+  //   [date, showDate]
+  // );
+
+  var showMonth = (0, _react.useMemo)(function () {
+    return (0, _moment.default)(showDate).format('MMM');
+  }, [date, showDate]);
+  var showYear = (0, _react.useMemo)(function () {
+    return (0, _moment.default)(showDate).format('YYYY');
   }, [date, showDate]);
+  console.log('date - ', date);
+  console.log('showDate - ', showDate);
   (0, _react.useEffect)(function () {
     var result = {};
     var day = selectedDay.startOf('month');
@@ -86,10 +108,12 @@ function _default(props) {
     });
     var isFutureDay = day && maxDate ? (0, _moment.default)(day.date).isAfter((0, _moment.default)(maxDate || ''), 'day') : (0, _moment.default)(day.date).isAfter((0, _moment.default)(), 'day');
     var isBeforeDay = day && (0, _moment.default)(day.date).isBefore((0, _moment.default)(minDate || ''), 'day');
+    console.log('isFutureDay - ', isFutureDay);
+    console.log('isBeforeDay - ', isBeforeDay);
     var classNames = (0, _classnames.default)('calendar__day', {
       'calendar__day--clickable': day
     }, {
-      'calendar__day--disabled': isFutureDay
+      'calendar__day--disabled': !dontLimitFuture && isFutureDay
     }, {
       'calendar__day--disabled': isBeforeDay
     }, {
@@ -98,7 +122,7 @@ function _default(props) {
     return /*#__PURE__*/_react.default.createElement("div", {
       key: "".concat(week, "_").concat(dayOfWeek),
       className: classNames,
-      onClick: day && !isFutureDay ? function () {
+      onClick: day && (dontLimitFuture || !isFutureDay) ? function () {
         return setDate((0, _moment.default)(day.date).format('L'));
       } : null // onMouseOver={day && !isFutureDay ? () => onHover(day.date) : null}
       // onMouseLeave={() => onHover(null)}
@@ -114,8 +138,33 @@ function _default(props) {
     setShowDate((0, _moment.default)(showDate).add(1, 'month').format('L'));
   };
 
+  var closeYearInput = function closeYearInput() {
+    var newDate = function () {
+      var dateArr = showDate.split('/');
+      var oldYear = dateArr[2];
+      dateArr[2] = inputYearValue;
+      return (0, _moment.default)(dateArr.join('/')).format('MM/DD/YYYY') === isError ? showDate : (0, _moment.default)(dateArr.join('/')).format('MM/DD/YYYY');
+    }();
+
+    var resultDate = newDate;
+    if (minDate && (0, _moment.default)(minDate) > (0, _moment.default)(newDate)) resultDate = (0, _moment.default)(showDate).format('MM/DD/YYYY');else if (maxDate && (0, _moment.default)(maxDate) < (0, _moment.default)(newDate)) resultDate = (0, _moment.default)(showDate).format('MM/DD/YYYY');
+    setIsChangeYear(false);
+    setShowDate(resultDate);
+    setInputYearValue(resultDate);
+  };
+
+  (0, _react.useEffect)(function () {
+    if (isChangeYear && yearInputRef.current) {
+      var input = yearInputRef.current.getElementsByTagName('input')[0];
+      setInputYearValue(showYear);
+      setTimeout(function () {
+        input.focus();
+        input.select();
+      }, 0);
+    }
+  }, [isChangeYear]);
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "calendar ".concat(className ? className : "")
+    className: "calendar ".concat(className ? className : '')
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "calendar-header"
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -123,8 +172,33 @@ function _default(props) {
   }, allowPrev && /*#__PURE__*/_react.default.createElement("div", {
     onClick: handlePrev
   }, /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronLeft, null))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "calendar-header__title"
-  }, title), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('calendar-header__title'),
+    ref: yearInputRef
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "calendar-header__title-month"
+  }, "".concat(showMonth, " ")), /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _classnames.default)('calendar-header__title-year', {
+      'calendar-header__title-year_change-mode': isChangeYear
+    }),
+    onClick: function onClick() {
+      return setIsChangeYear(true);
+    }
+  }, isChangeYear ? /*#__PURE__*/_react.default.createElement(_reactInputMask.default, {
+    className: "calendar-header__title-year-change-input",
+    value: inputYearValue,
+    mask: "9999",
+    onBlur: function onBlur(e) {
+      return closeYearInput();
+    },
+    onKeyUp: function onKeyUp(e) {
+      if (e.key === 'Escape') setIsChangeYear(false);
+      if (e.key === 'Enter') closeYearInput();
+    },
+    onChange: function onChange(e) {
+      console.log(e.target.value);
+      setInputYearValue(e.target.value);
+    }
+  }) : "".concat(showYear))), /*#__PURE__*/_react.default.createElement("div", {
     className: "calendar-header__next"
   }, allowNext && /*#__PURE__*/_react.default.createElement("div", {
     onClick: handleNext

package/dist/Atomic/UI/Calendar/Calendar.scss

@@ -431,17 +431,18 @@
   align-items: center;
 
   &__prev,
-  &__next{
+  &__next {
     display: flex;
     height: auto;
+    cursor: pointer;
   }
 }
 .calendar {
   background: #ffffff;
-    border: 1px solid #e2e5ec;
-    box-shadow: 0 5px 20px rgb(0 0 0 / 15%);
-    margin-top: 4px;
-    padding: 5px 0;
+  border: 1px solid #e2e5ec;
+  box-shadow: 0 5px 20px rgb(0 0 0 / 15%);
+  margin-top: 4px;
+  padding: 5px 0;
 
   min-height: 195px;
   width: 260px;
@@ -449,6 +450,52 @@
   flex-direction: column;
   user-select: none;
 
+  &-header {
+    box-sizing: border-box;
+    &__title {
+      &-month {
+        margin-right: 5px;
+      }
+      &-year {
+        box-sizing: border-box;
+        width: 45px;
+        height: 100%;
+        padding: 0 5px;
+        cursor: pointer;
+        display: flex;
+        flex-flow: row nowrap;
+        justify-content: center;
+        align-items: center;
+
+        &:hover:not(.calendar-header__title-year_change-mode) {
+          text-decoration: underline;
+        }
+
+        &.calendar-header__title-year_change-mode {
+          height: 24px;
+          padding: 0 3px;
+          border-style: solid;
+          border-width: 1px;
+          border-color: inherit;
+          border-radius: var(--border-radius);
+        }
+
+        &-change-input {
+          box-sizing: border-box;
+          width: 100%;
+          border: none;
+          outline: none;
+          margin: 0;
+          padding: 0;
+          display: inline;
+          font-size: inherit;
+          line-height: inherit;
+          font-weight: inherit;
+        }
+      }
+    }
+  }
+
   &__week {
     display: flex;
   }

package/dist/Atomic/UI/Calendar/Calendar.stories.js

@@ -2,15 +2,25 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CalendarTemplate = exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
 
 var _Calendar = _interopRequireDefault(require("./Calendar"));
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 global.lng = 'en';
 var _default = {
   title: 'Calendar',
@@ -19,17 +29,24 @@ var _default = {
 exports.default = _default;
 
 var Template = function Template(args) {
+  var _useState = (0, _react.useState)('12/03/2021'),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      date = _useState2[0],
+      setDate = _useState2[1];
+
   return /*#__PURE__*/_react.default.createElement("div", {
     style: {
       width: '320px'
     }
-  }, /*#__PURE__*/_react.default.createElement(_Calendar.default, args));
+  }, /*#__PURE__*/_react.default.createElement(_Calendar.default, (0, _extends2.default)({}, args, {
+    date: date,
+    setDate: setDate
+  })));
 };
 
 var CalendarTemplate = Template.bind({});
 exports.CalendarTemplate = CalendarTemplate;
 CalendarTemplate.args = {
-  date: '12/03/2021',
   params: {},
   setDate: function setDate() {
     return null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intelicoreact",
-  "version": "0.0.91",
+  "version": "0.0.92",
   "description": "fix input-calendar",
   "main": "dist/index.js",
   "scripts": {

package/src/Atomic/FormElements/Dropdown/Dropdown.js

@@ -8,7 +8,7 @@ import './Dropdown.scss';
 
 const RC = 'dropdown';
 
-const Dropdown = ({ options = [], value, error, disabled, onChange, placeholder, className, isSearchable, entity, scrollReactionObj }) => {
+const Dropdown = ({ options = [], value, error, disabled, onChange, placeholder, className, isSearchable, entity, scrollReactionObj, isListTop }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [searchValue, setSearchValue] = useState();
   const dropdownRef = useRef(null);
@@ -157,8 +157,14 @@ const Dropdown = ({ options = [], value, error, disabled, onChange, placeholder,
           {isOpen ? <ChevronUp /> : <ChevronDown />}
         </span>
       </button>
+
       {isOpen && filteredOptions.length > 0 && (
-        <div className={`${RC}__list`} ref={dropdownListRef}>
+        <div
+          className={cn(`${RC}__list`, {
+            [`${RC}__list-top`]: isListTop,
+          })}
+          ref={dropdownListRef}
+        >
           {depend.options.map((filteredOption) =>
             filteredOption.items?.length ? filteredOptionList(filteredOption) : getMarkupForElement(filteredOption)
           )}

package/src/Atomic/FormElements/Dropdown/Dropdown.scss

@@ -71,6 +71,12 @@
       border-radius: 4px;
     }
 
+    &-top {
+      bottom: calc(100% + 4px);
+      top: auto;
+      box-shadow: 0 -3px 10px rgb(0 0 0 / 15%);
+    }
+
     &-item {
       display: flex;
       align-items: center;

package/src/Atomic/FormElements/Dropdown/Dropdown.stories.js

@@ -54,6 +54,7 @@ const Template = (args) => {
 export const DropdownTemplate = Template.bind({});
 
 DropdownTemplate.args = {
+  isListTop: true,
   entity: 'entity',
   value: 'drop6',
   placeholder: 'Placeholder',

package/src/Atomic/FormElements/Dropdown/components/DropdownLoader.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import './Loader.scss';
 
-const DropdownLoader = function () {
+const DropdownLoader = function ({ variant }) {
   return (
     <div className="dropdown-loader-box j5">
       <div className={`lds-ring${variant === 'little' ? ' lds-ring_little' : ''}`}>

package/src/Atomic/FormElements/InputCalendar/InputCalendar.js

@@ -4,27 +4,27 @@ import InputMask from 'react-input-mask';
 import Calendar from '../../UI/Calendar/Calendar';
 import { useClickOutside } from '../../../Functions/useClickOutside';
 
-const InputCalendar = ({ value, minDate, maxDate, onChange, className = '', placeholder = 'mm/dd/yyyy', mask = '99/99/9999' }) => {
+const InputCalendar = ({ value, minDate, maxDate, onChange, className = '', placeholder = 'mm/dd/yyyy', mask = '99/99/9999', dontLimitFuture }) => {
   const [isOpened, setIsOpened] = useState(false);
   const calendarRef = useRef(null);
 
   useClickOutside(calendarRef, () => setIsOpened(false));
 
-  const changeInputValue = val => {
+  const changeInputValue = (val) => {
     if (onChange) onChange(val);
   };
 
-  const changeCalendarDay = val => {
+  const changeCalendarDay = (val) => {
     if (onChange) onChange(val);
   };
 
   const getCalendarValue = (value) => {
     const date = moment(value).format('L');
 
-    if(date !== "Invalid date") return date;
+    if (date !== 'Invalid date') return date;
 
     return moment(new Date()).format('L');
-  }
+  };
 
   return (
     <div className={`input__wrap calendar-container ${className}`} ref={calendarRef}>
@@ -32,11 +32,18 @@ const InputCalendar = ({ value, minDate, maxDate, onChange, className = '', plac
         mask={mask}
         placeholder={placeholder}
         value={value}
-        onChange={e => changeInputValue(e.target.value)}
+        onChange={(e) => changeInputValue(e.target.value)}
         className="calendar-dropdown"
         onFocus={() => setIsOpened(!isOpened)}
       />
-      {isOpened ? <Calendar date={getCalendarValue(value)} setDate={newDate => changeCalendarDay(newDate)} params={{ minDate, maxDate }} /> : null}
+      {isOpened ? (
+        <Calendar
+          date={getCalendarValue(value)}
+          setDate={(newDate) => changeCalendarDay(newDate)}
+          params={{ minDate, maxDate }}
+          dontLimitFuture={dontLimitFuture}
+        />
+      ) : null}
     </div>
   );
 };

package/src/Atomic/FormElements/InputCalendar/InputCalendar.stories.js

@@ -3,28 +3,27 @@ import InputCalendar from './InputCalendar';
 
 global.lng = 'en';
 
-
 export default {
   title: 'Form Elements/Input Calendar',
   component: InputCalendar,
   argTypes: {
     value: {
-      description: 'string (mm.dd.yyyy)'
+      description: 'string (mm.dd.yyyy)',
     },
-  }
+  },
 };
 
-const Template = args => {
+const Template = (args) => {
   const [date, setDate] = useState('');
 
-  return <InputCalendar {...args} value={date} onChange={val => setDate(val)} />;
+  return <InputCalendar {...args} value={date} onChange={(val) => setDate(val)} />;
 };
 
 export const CalendarTemplate = Template.bind({});
 
 CalendarTemplate.args = {
   value: '',
-  minDate: '10/14/2020',
-  maxDate: '10/14/2022',
-
+  // minDate: '10/14/2020',
+  // maxDate: '10/14/2022',
+  dontLimitFuture: true,
 };

package/src/Atomic/UI/Calendar/Calendar.js

@@ -1,22 +1,34 @@
+import React, { useEffect, useMemo, useState, useRef } from 'react';
 import cn from 'classnames';
-import React, { useEffect, useMemo, useState } from 'react';
 import moment from 'moment';
+import InputMask from 'react-input-mask';
 import { ChevronLeft, ChevronRight } from 'react-feather';
 import './Calendar.scss';
 
 export default function (props) {
-  const { date, setDate, allowPrev = true, allowNext = true, params, className } = props;
-  const { minDate = '01/01/1900', maxDate = moment().format('MM/DD/YYYY') } = params;
+  const { date, setDate, allowPrev = true, allowNext = true, params, className, dontLimitFuture } = props;
+  // const { minDate = '01/01/1900', maxDate = moment().format('MM/DD/YYYY') } = params;
+  const { minDate, maxDate } = params;
   const [days, setDays] = useState({});
   const [showDate, setShowDate] = useState(date);
+  const [isChangeYear, setIsChangeYear] = useState(false);
+  const [inputYearValue, setInputYearValue] = useState(moment(showDate).format('YYYY'));
+  const yearInputRef = useRef(null);
 
   const selectedDay = moment(showDate);
   const isError = 'Invalid date';
 
-  const title = useMemo(
-    () => (selectedDay.format('MMM') === isError ? isError : `${selectedDay.format('MMM')} ${moment(showDate).format('YYYY')}`),
-    [date, showDate]
-  );
+  // const title = useMemo(
+  //   () => (selectedDay.format('MMM') === isError ? isError : `${selectedDay.format('MMM')} ${moment(showDate).format('YYYY')}`),
+  //   [date, showDate]
+  // );
+
+  const showMonth = useMemo(() => moment(showDate).format('MMM'), [date, showDate]);
+  const showYear = useMemo(() => moment(showDate).format('YYYY'), [date, showDate]);
+
+  console.log('date - ', date);
+  console.log('showDate - ', showDate);
+
   useEffect(() => {
     const result = {};
     const day = selectedDay.startOf('month');
@@ -40,10 +52,13 @@ export default function (props) {
     const isFutureDay = day && maxDate ? moment(day.date).isAfter(moment(maxDate || ''), 'day') : moment(day.date).isAfter(moment(), 'day');
     const isBeforeDay = day && moment(day.date).isBefore(moment(minDate || ''), 'day');
 
+    console.log('isFutureDay - ', isFutureDay);
+    console.log('isBeforeDay - ', isBeforeDay);
+
     const classNames = cn(
       'calendar__day',
       { 'calendar__day--clickable': day },
-      { 'calendar__day--disabled': isFutureDay },
+      { 'calendar__day--disabled': !dontLimitFuture && isFutureDay },
       { 'calendar__day--disabled': isBeforeDay },
       { 'calendar__day--selected': moment(date).format() === moment(day.date).format() }
     );
@@ -52,7 +67,7 @@ export default function (props) {
       <div
         key={`${week}_${dayOfWeek}`}
         className={classNames}
-        onClick={day && !isFutureDay ? () => setDate(moment(day.date).format('L')) : null}
+        onClick={day && (dontLimitFuture || !isFutureDay) ? () => setDate(moment(day.date).format('L')) : null}
         // onMouseOver={day && !isFutureDay ? () => onHover(day.date) : null}
         // onMouseLeave={() => onHover(null)}
       >
@@ -69,8 +84,35 @@ export default function (props) {
     setShowDate(moment(showDate).add(1, 'month').format('L'));
   };
 
+  const closeYearInput = () => {
+    const newDate = (() => {
+      const dateArr = showDate.split('/');
+      const oldYear = dateArr[2];
+      dateArr[2] = inputYearValue;
+      return moment(dateArr.join('/')).format('MM/DD/YYYY') === isError ? showDate : moment(dateArr.join('/')).format('MM/DD/YYYY');
+    })();
+    let resultDate = newDate;
+    if (minDate && moment(minDate) > moment(newDate)) resultDate = moment(showDate).format('MM/DD/YYYY');
+    else if (maxDate && moment(maxDate) < moment(newDate)) resultDate = moment(showDate).format('MM/DD/YYYY');
+
+    setIsChangeYear(false);
+    setShowDate(resultDate);
+    setInputYearValue(resultDate);
+  };
+
+  useEffect(() => {
+    if (isChangeYear && yearInputRef.current) {
+      const input = yearInputRef.current.getElementsByTagName('input')[0];
+      setInputYearValue(showYear);
+      setTimeout(() => {
+        input.focus();
+        input.select();
+      }, 0);
+    }
+  }, [isChangeYear]);
+
   return (
-    <div className={`calendar ${className ? className : ""}`}>
+    <div className={`calendar ${className ? className : ''}`}>
       <div className="calendar-header">
         <div className="calendar-header__prev">
           {allowPrev && (
@@ -79,7 +121,34 @@ export default function (props) {
             </div>
           )}
         </div>
-        <div className="calendar-header__title">{title}</div>
+        <div className={cn('calendar-header__title')} ref={yearInputRef}>
+          <span className="calendar-header__title-month">{`${showMonth} `}</span>
+          <span
+            className={cn('calendar-header__title-year', {
+              'calendar-header__title-year_change-mode': isChangeYear,
+            })}
+            onClick={() => setIsChangeYear(true)}
+          >
+            {isChangeYear ? (
+              <InputMask
+                className="calendar-header__title-year-change-input"
+                value={inputYearValue}
+                mask="9999"
+                onBlur={(e) => closeYearInput()}
+                onKeyUp={(e) => {
+                  if (e.key === 'Escape') setIsChangeYear(false);
+                  if (e.key === 'Enter') closeYearInput();
+                }}
+                onChange={(e) => {
+                  console.log(e.target.value);
+                  setInputYearValue(e.target.value);
+                }}
+              />
+            ) : (
+              `${showYear}`
+            )}
+          </span>
+        </div>
         <div className="calendar-header__next">
           {allowNext && (
             <div onClick={handleNext}>

package/src/Atomic/UI/Calendar/Calendar.scss

@@ -431,17 +431,18 @@
   align-items: center;
 
   &__prev,
-  &__next{
+  &__next {
     display: flex;
     height: auto;
+    cursor: pointer;
   }
 }
 .calendar {
   background: #ffffff;
-    border: 1px solid #e2e5ec;
-    box-shadow: 0 5px 20px rgb(0 0 0 / 15%);
-    margin-top: 4px;
-    padding: 5px 0;
+  border: 1px solid #e2e5ec;
+  box-shadow: 0 5px 20px rgb(0 0 0 / 15%);
+  margin-top: 4px;
+  padding: 5px 0;
 
   min-height: 195px;
   width: 260px;
@@ -449,6 +450,52 @@
   flex-direction: column;
   user-select: none;
 
+  &-header {
+    box-sizing: border-box;
+    &__title {
+      &-month {
+        margin-right: 5px;
+      }
+      &-year {
+        box-sizing: border-box;
+        width: 45px;
+        height: 100%;
+        padding: 0 5px;
+        cursor: pointer;
+        display: flex;
+        flex-flow: row nowrap;
+        justify-content: center;
+        align-items: center;
+
+        &:hover:not(.calendar-header__title-year_change-mode) {
+          text-decoration: underline;
+        }
+
+        &.calendar-header__title-year_change-mode {
+          height: 24px;
+          padding: 0 3px;
+          border-style: solid;
+          border-width: 1px;
+          border-color: inherit;
+          border-radius: var(--border-radius);
+        }
+
+        &-change-input {
+          box-sizing: border-box;
+          width: 100%;
+          border: none;
+          outline: none;
+          margin: 0;
+          padding: 0;
+          display: inline;
+          font-size: inherit;
+          line-height: inherit;
+          font-weight: inherit;
+        }
+      }
+    }
+  }
+
   &__week {
     display: flex;
   }

package/src/Atomic/UI/Calendar/Calendar.stories.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import Calendar from './Calendar';
 
 global.lng = 'en';
@@ -8,16 +8,18 @@ export default {
   component: Calendar,
 };
 
-const Template = args => (
-  <div style={{ width: '320px' }}>
-    <Calendar {...args} />
-  </div>
-);
+const Template = args => {
+  const [date, setDate] = useState('12/03/2021');
+  return (
+    <div style={{ width: '320px' }}>
+      <Calendar {...args} date={date} setDate={setDate} />
+    </div>
+  );
+};
 
 export const CalendarTemplate = Template.bind({});
 
 CalendarTemplate.args = {
-  date: '12/03/2021',
   params: {},
   setDate: () => null,
   className: ''