intelicoreact 0.0.91 → 0.0.94

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

@@ -9,9 +9,10 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-require("./Loader.scss");
+require("./DropdownLoader.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

@@ -17,10 +17,14 @@ var _moment = _interopRequireDefault(require("moment"));
 
 var _reactInputMask = _interopRequireDefault(require("react-input-mask"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _Calendar = _interopRequireDefault(require("../../UI/Calendar/Calendar"));
 
 var _useClickOutside = require("../../../Functions/useClickOutside");
 
+require("./InputCalendar.scss");
+
 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; }
@@ -35,7 +39,10 @@ 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,
+      isDontLimitFuture = _ref.isDontLimitFuture,
+      isListTop = _ref.isListTop,
+      disabled = _ref.disabled;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -57,12 +64,14 @@ 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');
   };
 
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "input__wrap calendar-container ".concat(className),
+    className: (0, _classnames.default)('input__wrap calendar-container', className, {
+      'calendar-container_disabled': disabled
+    }),
     ref: calendarRef
   }, /*#__PURE__*/_react.default.createElement(_reactInputMask.default, {
     mask: mask,
@@ -73,7 +82,7 @@ var InputCalendar = function InputCalendar(_ref) {
     },
     className: "calendar-dropdown",
     onFocus: function onFocus() {
-      return setIsOpened(!isOpened);
+      return setIsOpened(true);
     }
   }), isOpened ? /*#__PURE__*/_react.default.createElement(_Calendar.default, {
     date: getCalendarValue(value),
@@ -83,7 +92,10 @@ var InputCalendar = function InputCalendar(_ref) {
     params: {
       minDate: minDate,
       maxDate: maxDate
-    }
+    },
+    isDontLimitFuture: isDontLimitFuture,
+    isListTop: isListTop,
+    setIsOpened: setIsOpened
   }) : null);
 };
 

package/dist/Atomic/FormElements/InputCalendar/InputCalendar.scss

@@ -0,0 +1,23 @@
+.calendar-container {
+  min-width: 200px;
+  position: relative;
+
+  &_disabled {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+
+  .calendar {
+    position: absolute;
+    z-index: 9;
+    top: 100%;
+    padding: 10px 16px;
+    border: 1px solid var(--border-color);
+
+    &_list-top {
+      bottom: calc(100% + 4px);
+      top: auto;
+      box-shadow: 0 -3px 15px rgb(0 0 0 / 15%);
+    }
+  }
+}

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

@@ -39,18 +39,41 @@ var Template = function Template(args) {
       date = _useState2[0],
       setDate = _useState2[1];
 
-  return /*#__PURE__*/_react.default.createElement(_InputCalendar.default, (0, _extends2.default)({}, args, {
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      disabled = _useState4[0],
+      setDisabled = _useState4[1];
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_InputCalendar.default, (0, _extends2.default)({}, args, {
     value: date,
     onChange: function onChange(val) {
       return setDate(val);
+    },
+    disabled: disabled
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'flex',
+      flexFlow: 'row nowrap',
+      justifyContent: 'flex-end',
+      marginTop: '10px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    style: {
+      border: 'solid 1px black',
+      padding: '10px',
+      width: '80px'
+    },
+    onClick: function onClick() {
+      return setDisabled(!disabled);
     }
-  }));
+  }, disabled ? 'Enable' : 'Disable')));
 };
 
 var CalendarTemplate = Template.bind({});
 exports.CalendarTemplate = CalendarTemplate;
 CalendarTemplate.args = {
-  value: '',
-  minDate: '10/14/2020',
-  maxDate: '10/14/2022'
+  minDate: '01/01/1900',
+  maxDate: '01/01/2100',
+  isDontLimitFuture: true // isListTop: 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");
@@ -30,16 +32,18 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function _default(props) {
   var date = props.date,
       setDate = props.setDate,
+      setIsOpened = props.setIsOpened,
       _props$allowPrev = props.allowPrev,
       allowPrev = _props$allowPrev === void 0 ? true : _props$allowPrev,
       _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,
+      isDontLimitFuture = props.isDontLimitFuture,
+      isListTop = props.isListTop; // 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,10 +55,28 @@ 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]);
   (0, _react.useEffect)(function () {
     var result = {};
@@ -89,7 +111,7 @@ function _default(props) {
     var classNames = (0, _classnames.default)('calendar__day', {
       'calendar__day--clickable': day
     }, {
-      'calendar__day--disabled': isFutureDay
+      'calendar__day--disabled': !isDontLimitFuture && isFutureDay
     }, {
       'calendar__day--disabled': isBeforeDay
     }, {
@@ -98,8 +120,9 @@ function _default(props) {
     return /*#__PURE__*/_react.default.createElement("div", {
       key: "".concat(week, "_").concat(dayOfWeek),
       className: classNames,
-      onClick: day && !isFutureDay ? function () {
-        return setDate((0, _moment.default)(day.date).format('L'));
+      onClick: day && (isDontLimitFuture || !isFutureDay) ? function () {
+        setDate((0, _moment.default)(day.date).format('L'));
+        setIsOpened(false);
       } : null // onMouseOver={day && !isFutureDay ? () => onHover(day.date) : null}
       // onMouseLeave={() => onHover(null)}
 
@@ -114,8 +137,35 @@ 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: (0, _classnames.default)('calendar', className, {
+      'calendar_list-top': isListTop
+    })
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "calendar-header"
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -123,8 +173,32 @@ 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) {
+      return 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

@@ -425,23 +425,25 @@
 //     box-shadow: 0 0 3px 0 rgb(0 123 255 / 50%);
 //   }
 // }
-.calendar-header {
-  display: flex;
-  justify-content: center;
-  align-items: center;
+// .calendar-header {
+//   display: flex;
+//   justify-content: center;
+//   align-items: center;
+
+//   &__prev,
+//   &__next {
+//     display: flex;
+//     height: auto;
+//     cursor: pointer;
+//   }
+// }
 
-  &__prev,
-  &__next{
-    display: flex;
-    height: auto;
-  }
-}
 .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 +451,63 @@
   flex-direction: column;
   user-select: none;
 
+  &-header {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    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;
+        }
+      }
+    }
+
+    &__prev,
+    &__next {
+      display: flex;
+      height: auto;
+      cursor: pointer;
+    }
+  }
+
   &__week {
     display: flex;
   }
@@ -516,18 +575,6 @@
     }
   }
 
-  &-container {
-    min-width: 200px;
-    position: relative;
-    .calendar {
-      position: absolute;
-      z-index: 9;
-      top: 100%;
-      padding: 10px 16px;
-      border: 1px solid var(--border-color);
-    }
-  }
-
   &-dropdown {
     appearance: none;
     background-color: white;

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.94",
   "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';
+import './DropdownLoader.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

@@ -1,42 +1,71 @@
 import React, { useState, useRef } from 'react';
 import moment from 'moment';
 import InputMask from 'react-input-mask';
+import cn from 'classnames';
+
 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' }) => {
+import './InputCalendar.scss';
+
+const InputCalendar = ({
+  value,
+  minDate,
+  maxDate,
+  onChange,
+  className = '',
+  placeholder = 'mm/dd/yyyy',
+  mask = '99/99/9999',
+  isDontLimitFuture,
+  isListTop,
+  disabled,
+}) => {
   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}>
+    <div
+      className={cn('input__wrap calendar-container', className, {
+        'calendar-container_disabled': disabled,
+      })}
+      ref={calendarRef}
+    >
       <InputMask
         mask={mask}
         placeholder={placeholder}
         value={value}
-        onChange={e => changeInputValue(e.target.value)}
+        onChange={(e) => changeInputValue(e.target.value)}
         className="calendar-dropdown"
-        onFocus={() => setIsOpened(!isOpened)}
+        onFocus={() => setIsOpened(true)}
       />
-      {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 }}
+          isDontLimitFuture={isDontLimitFuture}
+          isListTop={isListTop}
+          setIsOpened={setIsOpened}
+        />
+      ) : null}
     </div>
   );
 };

package/src/Atomic/FormElements/InputCalendar/InputCalendar.scss

@@ -0,0 +1,23 @@
+.calendar-container {
+  min-width: 200px;
+  position: relative;
+
+  &_disabled {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+
+  .calendar {
+    position: absolute;
+    z-index: 9;
+    top: 100%;
+    padding: 10px 16px;
+    border: 1px solid var(--border-color);
+
+    &_list-top {
+      bottom: calc(100% + 4px);
+      top: auto;
+      box-shadow: 0 -3px 15px rgb(0 0 0 / 15%);
+    }
+  }
+}

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

@@ -3,28 +3,37 @@ 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)} />;
+  const [disabled, setDisabled] = useState(false);
+
+  return (
+    <>
+      <InputCalendar {...args} value={date} onChange={(val) => setDate(val)} disabled={disabled} />
+      <div style={{ display: 'flex', flexFlow: 'row nowrap', justifyContent: 'flex-end', marginTop: '10px' }}>
+        <button style={{ border: 'solid 1px black', padding: '10px', width: '80px' }} onClick={() => setDisabled(!disabled)}>
+          {disabled ? 'Enable' : 'Disable'}
+        </button>
+      </div>
+    </>
+  );
 };
 
 export const CalendarTemplate = Template.bind({});
 
 CalendarTemplate.args = {
-  value: '',
-  minDate: '10/14/2020',
-  maxDate: '10/14/2022',
-
+  minDate: '01/01/1900',
+  maxDate: '01/01/2100',
+  isDontLimitFuture: true,
+  // isListTop: true,
 };

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

@@ -1,22 +1,31 @@
+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, setIsOpened, allowPrev = true, allowNext = true, params, className, isDontLimitFuture, isListTop } = 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]);
+
   useEffect(() => {
     const result = {};
     const day = selectedDay.startOf('month');
@@ -43,7 +52,7 @@ export default function (props) {
     const classNames = cn(
       'calendar__day',
       { 'calendar__day--clickable': day },
-      { 'calendar__day--disabled': isFutureDay },
+      { 'calendar__day--disabled': !isDontLimitFuture && isFutureDay },
       { 'calendar__day--disabled': isBeforeDay },
       { 'calendar__day--selected': moment(date).format() === moment(day.date).format() }
     );
@@ -52,7 +61,14 @@ export default function (props) {
       <div
         key={`${week}_${dayOfWeek}`}
         className={classNames}
-        onClick={day && !isFutureDay ? () => setDate(moment(day.date).format('L')) : null}
+        onClick={
+          day && (isDontLimitFuture || !isFutureDay)
+            ? () => {
+                setDate(moment(day.date).format('L'));
+                setIsOpened(false);
+              }
+            : null
+        }
         // onMouseOver={day && !isFutureDay ? () => onHover(day.date) : null}
         // onMouseLeave={() => onHover(null)}
       >
@@ -69,8 +85,39 @@ 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={cn('calendar', className, {
+        'calendar_list-top': isListTop,
+      })}
+    >
       <div className="calendar-header">
         <div className="calendar-header__prev">
           {allowPrev && (
@@ -79,7 +126,31 @@ 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) => setInputYearValue(e.target.value)}
+              />
+            ) : (
+              `${showYear}`
+            )}
+          </span>
+        </div>
         <div className="calendar-header__next">
           {allowNext && (
             <div onClick={handleNext}>

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

@@ -425,23 +425,25 @@
 //     box-shadow: 0 0 3px 0 rgb(0 123 255 / 50%);
 //   }
 // }
-.calendar-header {
-  display: flex;
-  justify-content: center;
-  align-items: center;
+// .calendar-header {
+//   display: flex;
+//   justify-content: center;
+//   align-items: center;
+
+//   &__prev,
+//   &__next {
+//     display: flex;
+//     height: auto;
+//     cursor: pointer;
+//   }
+// }
 
-  &__prev,
-  &__next{
-    display: flex;
-    height: auto;
-  }
-}
 .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 +451,63 @@
   flex-direction: column;
   user-select: none;
 
+  &-header {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    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;
+        }
+      }
+    }
+
+    &__prev,
+    &__next {
+      display: flex;
+      height: auto;
+      cursor: pointer;
+    }
+  }
+
   &__week {
     display: flex;
   }
@@ -516,18 +575,6 @@
     }
   }
 
-  &-container {
-    min-width: 200px;
-    position: relative;
-    .calendar {
-      position: absolute;
-      z-index: 9;
-      top: 100%;
-      padding: 10px 16px;
-      border: 1px solid var(--border-color);
-    }
-  }
-
   &-dropdown {
     appearance: none;
     background-color: white;

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: ''