intelicoreact 0.0.84 → 0.0.87

package/dist/Atomic/FormElements/Input/Input.js

@@ -195,6 +195,7 @@ var Input = function Input(_ref) {
   }, [isAttemptToChange]);
   (0, _react.useEffect)(function () {
     if (inputRef !== null && inputRef !== void 0 && inputRef.current && typeof isFocusDefault === 'boolean') setIsFocused(isFocusDefault);
+    setEditing(isFocusDefault);
   }, [inputRef, isFocusDefault]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)("input__wrap", (0, _defineProperty2.default)({}, "input__wrap_focus", isFocused), (0, _defineProperty2.default)({}, "input__wrap_error", error || isToHighlightError), (0, _defineProperty2.default)({}, "input__wrap_disabled", disabled))

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

@@ -29,22 +29,18 @@ var InputCalendar = function InputCalendar(_ref) {
   var value = _ref.value,
       minDate = _ref.minDate,
       maxDate = _ref.maxDate,
-      onChange = _ref.onChange;
-
-  var _useState = (0, _react.useState)(value),
+      onChange = _ref.onChange,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      _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;
+
+  var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      date = _useState2[0],
-      setDate = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(date),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      inputValue = _useState4[0],
-      setInputValue = _useState4[1];
-
-  var _useState5 = (0, _react.useState)(false),
-      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      isOpened = _useState6[0],
-      setIsOpened = _useState6[1];
+      isOpened = _useState2[0],
+      setIsOpened = _useState2[1];
 
   var calendarRef = (0, _react.useRef)(null);
   (0, _useClickOutside.useClickOutside)(calendarRef, function () {
@@ -52,28 +48,26 @@ var InputCalendar = function InputCalendar(_ref) {
   });
 
   var changeInputValue = function changeInputValue(val) {
-    if (!val.includes('_') && val) {
-      setDate((0, _moment.default)(val).format('L'));
-      setInputValue((0, _moment.default)(val).format('L'));
-    } else {
-      setInputValue(val);
-    }
-
-    if (onChange) onChange();
+    if (onChange) onChange(val);
   };
 
   var changeCalendarDay = function changeCalendarDay(val) {
-    setDate(val);
-    setInputValue(val);
     if (onChange) onChange(val);
   };
 
+  var getCalendarValue = function getCalendarValue(value) {
+    var date = (0, _moment.default)(value).format('L');
+    if (date !== "Invalid date") return date;
+    return (0, _moment.default)(new Date()).format('L');
+  };
+
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "calendar-container",
+    className: "input__wrap calendar-container ".concat(className),
     ref: calendarRef
   }, /*#__PURE__*/_react.default.createElement(_reactInputMask.default, {
-    mask: "99/99/9999",
-    value: inputValue,
+    mask: mask,
+    placeholder: placeholder,
+    value: value,
     onChange: function onChange(e) {
       return changeInputValue(e.target.value);
     },
@@ -82,7 +76,7 @@ var InputCalendar = function InputCalendar(_ref) {
       return setIsOpened(!isOpened);
     }
   }), isOpened ? /*#__PURE__*/_react.default.createElement(_Calendar.default, {
-    date: date,
+    date: getCalendarValue(value),
     setDate: function setDate(newDate) {
       return changeCalendarDay(newDate);
     },

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

@@ -7,11 +7,13 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Calendar = exports.default = void 0;
+exports.CalendarTemplate = exports.default = void 0;
 
-var _react = _interopRequireWildcard(require("react"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _yup = require("yup");
+var _react = _interopRequireWildcard(require("react"));
 
 var _InputCalendar = _interopRequireDefault(require("./InputCalendar"));
 
@@ -21,19 +23,34 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 global.lng = 'en';
 var _default = {
-  title: 'Form Elements/InputCalendar',
-  component: _InputCalendar.default
+  title: 'Form Elements/Input Calendar',
+  component: _InputCalendar.default,
+  argTypes: {
+    value: {
+      description: 'string (mm.dd.yyyy)'
+    }
+  }
 };
 exports.default = _default;
 
 var Template = function Template(args) {
-  return /*#__PURE__*/_react.default.createElement(_InputCalendar.default, args);
+  var _useState = (0, _react.useState)(''),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      date = _useState2[0],
+      setDate = _useState2[1];
+
+  return /*#__PURE__*/_react.default.createElement(_InputCalendar.default, (0, _extends2.default)({}, args, {
+    value: date,
+    onChange: function onChange(val) {
+      return setDate(val);
+    }
+  }));
 };
 
-var Calendar = Template.bind({});
-exports.Calendar = Calendar;
-Calendar.args = {
-  value: '10/14/2021',
+var CalendarTemplate = Template.bind({});
+exports.CalendarTemplate = CalendarTemplate;
+CalendarTemplate.args = {
+  value: '',
   minDate: '10/14/2020',
-  maxDate: '10/14/2023'
+  maxDate: '10/14/2022'
 };

package/dist/Atomic/FormElements/InputDateRange/InputDateRange.js

@@ -55,7 +55,11 @@ var InputDateRange = function InputDateRange(props) {
       _props$hideArrows = props.hideArrows,
       hideArrows = _props$hideArrows === void 0 ? false : _props$hideArrows,
       isOptionsRight = props.isOptionsRight,
-      isUseAbs = props.isUseAbs;
+      isUseAbs = props.isUseAbs,
+      _props$minDate = props.minDate,
+      minDate = _props$minDate === void 0 ? null : _props$minDate,
+      _props$maxDate = props.maxDate,
+      maxDate = _props$maxDate === void 0 ? null : _props$maxDate;
   var actualValues = (0, _dependencies.getActualDateRange)(value);
 
   var _useToggle = (0, _dependencies.useToggle)(false),
@@ -223,7 +227,9 @@ var InputDateRange = function InputDateRange(props) {
     isCompare: isCompare,
     setIsCompare: setIsCompare,
     toggleOff: toggleOff,
-    onChange: handleChange
+    onChange: handleChange,
+    minDate: minDate ? (0, _momentTimezone.default)(minDate) : null,
+    maxDate: maxDate ? (0, _momentTimezone.default)(maxDate) : null
   })))), error && /*#__PURE__*/_react.default.createElement("span", {
     className: "date-range-input__error-block"
   }, error));

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

@@ -77,6 +77,8 @@ InputDateRangeTemplate.args = {
   error: false,
   disabled: false,
   isHoverable: false,
+  minDate: "",
+  maxDate: "",
   // short: true,
   isCompact: false,
   // isFocused: true,

package/dist/Atomic/FormElements/InputDateRange/components/Datepicker.js

@@ -67,7 +67,11 @@ var Datepicker = function Datepicker(props) {
       limitRange = props.limitRange,
       handleItemClick = props.handleItemClick,
       setActiveInterval = props.setActiveInterval,
-      isShortWeekNames = props.isShortWeekNames;
+      isShortWeekNames = props.isShortWeekNames,
+      _props$minDate = props.minDate,
+      minDate = _props$minDate === void 0 ? null : _props$minDate,
+      _props$maxDate = props.maxDate,
+      maxDate = _props$maxDate === void 0 ? null : _props$maxDate;
   var _values$start = values.start,
       start = _values$start === void 0 ? null : _values$start,
       _values$end = values.end,
@@ -275,20 +279,20 @@ var Datepicker = function Datepicker(props) {
 
   var handleChangeStartHour = function handleChangeStartHour(val) {
     setStartHour(+val);
-    setStartDate((0, _momentTimezone.default)(startDate).set('hour', +val).toDate());
+    setStartDate((0, _momentTimezone.default)(startDate || (0, _momentTimezone.default)()).set('hour', +val).toDate());
   };
 
   var handleChangeEndHour = function handleChangeEndHour(val) {
     var newHour = +val;
     setEndHour(newHour);
-    var newEndDate;
+    var newEndDate = (0, _momentTimezone.default)();
 
-    if (prevEndHour.current === 0 && newHour !== 0) {
-      newEndDate = (0, _momentTimezone.default)(endDate).subtract(1, 'days');
-    } else if (prevEndHour.current !== 0 && newHour === 0) {
-      newEndDate = (0, _momentTimezone.default)(endDate).add(1, 'days');
-    } else {
-      newEndDate = endDate;
+    if (endDate) {
+      if (prevEndHour.current === 0 && newHour !== 0) {
+        newEndDate = (0, _momentTimezone.default)(endDate).subtract(1, 'days');
+      } else if (prevEndHour.current !== 0 && newHour === 0) {
+        newEndDate = (0, _momentTimezone.default)(endDate).add(1, 'days');
+      }
     }
 
     prevEndHour.current = newHour;
@@ -343,14 +347,20 @@ var Datepicker = function Datepicker(props) {
   var handleStartDateBlur = function handleStartDateBlur(e) {
     var newDate;
 
-    if ((0, _momentTimezone.default)(startDateInput).isValid()) {
-      newDate = (0, _momentTimezone.default)(startDateInput).set('hour', parseInt(startHour, 10)).toDate();
-      setStartDate(newDate);
-    } else {
+    if (!(0, _momentTimezone.default)(startDateInput).isValid()) {
       newDate = startDate;
-      setStartDateInput(newDate);
+    } else {
+      if (minDate && !(0, _momentTimezone.default)(startDateInput).isSameOrAfter(minDate)) {
+        newDate = minDate;
+      } else if (maxDate && !(0, _momentTimezone.default)(startDateInput).isSameOrBefore(maxDate)) {
+        newDate = maxDate;
+      } else {
+        newDate = (0, _momentTimezone.default)(startDateInput);
+      }
     }
 
+    setStartDateInput(newDate);
+    setStartDate(newDate.set('hour', parseInt(startHour, 10)).toDate());
     doBlur('start', e);
     setDate1((0, _momentTimezone.default)(newDate).isSameOrAfter((0, _momentTimezone.default)(date2), 'month') ? (0, _momentTimezone.default)(date2).subtract(1, 'month') : (0, _momentTimezone.default)(newDate));
   };
@@ -366,17 +376,22 @@ var Datepicker = function Datepicker(props) {
   var handleEndDateBlur = function handleEndDateBlur(e) {
     var newDate;
 
-    if ((0, _momentTimezone.default)(endDateInput).isValid()) {
-      newDate = (0, _momentTimezone.default)(endDateInput).set('hour', parseInt(endHour, 10)).toDate();
-      setEndDate(addDay(newDate));
-    } else {
+    if (!(0, _momentTimezone.default)(endDateInput).isValid()) {
       newDate = endDate;
-      setEndDateInput(newDate);
+    } else {
+      if (minDate && !(0, _momentTimezone.default)(endDateInput).isSameOrAfter(minDate)) {
+        newDate = minDate;
+      } else if (maxDate && !(0, _momentTimezone.default)(endDateInput).isSameOrBefore(maxDate)) {
+        newDate = maxDate;
+      } else {
+        newDate = (0, _momentTimezone.default)(endDateInput);
+      }
     }
 
+    setEndDate(addDay(newDate.set('hour', parseInt(endHour, 10)).toDate()));
+    setEndDateInput(newDate);
     doBlur('end', e);
     setDate2(newDate);
-    setEndDateInput();
   };
 
   var handleKeyPressed = function handleKeyPressed(code, e, type) {

package/dist/Atomic/FormElements/InputDateRange/components/OpenedPart.js

@@ -56,7 +56,11 @@ var OpenedPart = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       isCompare = props.isCompare,
       setIsCompare = props.setIsCompare,
       toggleOff = props.toggleOff,
-      isShortWeekNames = props.isShortWeekNames;
+      isShortWeekNames = props.isShortWeekNames,
+      _props$minDate = props.minDate,
+      minDate = _props$minDate === void 0 ? null : _props$minDate,
+      _props$maxDate = props.maxDate,
+      maxDate = _props$maxDate === void 0 ? null : _props$maxDate;
 
   var items = isCompact ? (0, _toConsumableArray2.default)(Object.keys(_dependencies.INTERVALS)) : [].concat((0, _toConsumableArray2.default)(Object.keys(_dependencies.INTERVALS)), [_dependencies.CUSTOM_INTERVAL_KEY]);
 
@@ -148,7 +152,9 @@ var OpenedPart = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     isCompareHidden: isCompareHidden,
     limitRange: limitRange,
     setActiveInterval: setActiveInterval,
-    isShortWeekNames: isShortWeekNames
+    isShortWeekNames: isShortWeekNames,
+    minDate: minDate,
+    maxDate: maxDate
   })));
 });
 

package/dist/Atomic/FormElements/InputDateRange/dependencies.js

@@ -154,7 +154,7 @@ var INTERVALS = {
     }
   },
   last6Months: {
-    label: 'Last 6 Months',
+    label: '6 Months',
     start: function start() {
       return (0, _momentTimezone.default)().subtract(6, 'month').startOf('month');
     },

package/dist/Atomic/FormElements/NumericInput/NumericInput.js

@@ -225,6 +225,7 @@ var NumericInput = function NumericInput(_ref) {
   }, [isFocused]);
   (0, _react.useEffect)(function () {
     if (inputRef !== null && inputRef !== void 0 && inputRef.current && typeof isFocusDefault === 'boolean') setIsFocused(isFocusDefault);
+    setEditing(isFocusDefault);
   }, [inputRef, isFocusDefault]);
 
   function renderInput() {

package/dist/Atomic/FormElements/RangeCalendar/RangeCalendar.scss

@@ -1,4 +1,4 @@
-.range-calendar {
+.range-calendar, .calendar {
   width: 195px;
   min-height: 195px;
   display: flex;
@@ -12,7 +12,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-  
+
     &__title {
       line-height: 20px;
       font-weight: 500;
@@ -27,7 +27,7 @@
     &__next, &__prev {
       width: 16px;
       height: 16px;
-      background-color: #E2E6F8;
+      //background-color: #E2E6F8;
       border-radius: 5px;
       color: #171D33;
     }
@@ -98,4 +98,4 @@
       }
     }
   }
-}
+}

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

@@ -115,7 +115,7 @@ function _default(props) {
   };
 
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "calendar ".concat(className)
+    className: "calendar ".concat(className ? className : "")
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "calendar-header"
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -134,7 +134,7 @@ function _default(props) {
     return /*#__PURE__*/_react.default.createElement("div", {
       key: "day-of-week_".concat(dayOfWeek),
       className: "calendar__day calendar__day--title"
-    }, (0, _moment.default)().weekday(dayOfWeek).format('dd').charAt(0));
+    }, (0, _moment.default)().weekday(dayOfWeek).format('dd'));
   })), Object.keys(days).map(function (week, index) {
     return /*#__PURE__*/_react.default.createElement("div", {
       key: "week_".concat(index),

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

@@ -429,6 +429,12 @@
   display: flex;
   justify-content: center;
   align-items: center;
+
+  &__prev,
+  &__next{
+    display: flex;
+    height: auto;
+  }
 }
 .calendar {
   background: #ffffff;
@@ -511,15 +517,21 @@
   }
 
   &-container {
-    width: 200px;
+    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;
     cursor: pointer;
-    color: gray;
-
     width: 100%;
     height: 28px;
 

package/package.json

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

package/src/Atomic/FormElements/Input/Input.js

@@ -147,6 +147,7 @@ const Input = ({
   useEffect(() => {
     if (inputRef?.current && typeof isFocusDefault === 'boolean')
       setIsFocused(isFocusDefault);
+      setEditing(isFocusDefault);
   }, [inputRef, isFocusDefault]);
 
   return (

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

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

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

@@ -1,22 +1,30 @@
-import React, { useRef, useState } from 'react';
-import { ref } from 'yup';
+import React, { useState } from 'react';
 import InputCalendar from './InputCalendar';
 
 global.lng = 'en';
 
+
 export default {
-  title: 'Form Elements/InputCalendar',
+  title: 'Form Elements/Input Calendar',
   component: InputCalendar,
+  argTypes: {
+    value: {
+      description: 'string (mm.dd.yyyy)'
+    },
+  }
 };
 
 const Template = args => {
-  return <InputCalendar {...args} />;
+  const [date, setDate] = useState('');
+
+  return <InputCalendar {...args} value={date} onChange={val => setDate(val)} />;
 };
 
-export const Calendar = Template.bind({});
+export const CalendarTemplate = Template.bind({});
 
-Calendar.args = {
-  value: '10/14/2021',
+CalendarTemplate.args = {
+  value: '',
   minDate: '10/14/2020',
-  maxDate: '10/14/2023',
+  maxDate: '10/14/2022',
+
 };

package/src/Atomic/FormElements/InputDateRange/InputDateRange.js

@@ -24,6 +24,8 @@ const InputDateRange = props => {
     hideArrows = false,
     isOptionsRight,
     isUseAbs,
+    minDate = null,
+    maxDate = null,
   } = props;
 
   const actualValues = getActualDateRange(value);
@@ -35,6 +37,7 @@ const InputDateRange = props => {
   const internalContainerRef = useRef(null);
 
   const handleChange = input => {
+
     const newValue = getActualDateRange(input);
     const formatedValue = {
       intervalKey: newValue.intervalKey,
@@ -202,6 +205,8 @@ const InputDateRange = props => {
               setIsCompare={setIsCompare}
               toggleOff={toggleOff}
               onChange={handleChange}
+              minDate={minDate ? moment(minDate) : null}
+              maxDate={maxDate ? moment(maxDate) : null}
             />
           )}
         </div>

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

@@ -47,6 +47,8 @@ InputDateRangeTemplate.args = {
   error: false,
   disabled: false,
   isHoverable: false,
+  minDate: "",
+  maxDate: "",
   // short: true,
   isCompact: false,
   // isFocused: true,

package/src/Atomic/FormElements/InputDateRange/components/Datepicker.js

@@ -41,7 +41,9 @@ const Datepicker = props => {
         limitRange,
         handleItemClick,
         setActiveInterval,
-        isShortWeekNames
+        isShortWeekNames,
+        minDate = null,
+        maxDate = null
     } = props;
     const { start = null, end = null, compare = false } = values;
     const startDateInputRef = useRef(null);
@@ -191,7 +193,7 @@ const Datepicker = props => {
     const handleChangeStartHour = val => {
         setStartHour(+val);
         setStartDate(
-            moment(startDate)
+            moment(startDate || moment())
                 .set('hour', +val)
                 .toDate(),
         );
@@ -200,14 +202,16 @@ const Datepicker = props => {
     const handleChangeEndHour = val => {
         const newHour = +val;
         setEndHour(newHour);
-        let newEndDate;
-        if (prevEndHour.current === 0 && newHour !== 0) {
-            newEndDate = moment(endDate).subtract(1, 'days');
-        } else if (prevEndHour.current !== 0 && newHour === 0) {
-            newEndDate = moment(endDate).add(1, 'days');
-        } else {
-            newEndDate = endDate;
+        let newEndDate = moment();
+
+        if(endDate){
+          if (prevEndHour.current === 0 && newHour !== 0) {
+              newEndDate = moment(endDate).subtract(1, 'days');
+          } else if (prevEndHour.current !== 0 && newHour === 0) {
+              newEndDate = moment(endDate).add(1, 'days');
+          }
         }
+
         prevEndHour.current = newHour;
         setEndDate(moment(newEndDate).set('hour', newHour).toDate());
     };
@@ -256,13 +260,22 @@ const Datepicker = props => {
 
     const handleStartDateBlur = e => {
         let newDate;
-        if (moment(startDateInput).isValid()) {
-            newDate = moment(startDateInput).set('hour', parseInt(startHour, 10)).toDate();
-            setStartDate(newDate);
+
+        if(!moment(startDateInput).isValid()){
+          newDate = startDate;
         } else {
-            newDate = startDate;
-            setStartDateInput(newDate);
+          if(minDate && !moment(startDateInput).isSameOrAfter(minDate)){
+            newDate = minDate;
+          } else if(maxDate && !moment(startDateInput).isSameOrBefore(maxDate)){
+            newDate = maxDate;
+          } else {
+            newDate = moment(startDateInput);
+          }
         }
+
+        setStartDateInput(newDate);
+        setStartDate(newDate.set('hour', parseInt(startHour, 10)).toDate());
+
         doBlur('start', e);
         setDate1(
             moment(newDate).isSameOrAfter(moment(date2), 'month') ? moment(date2).subtract(1, 'month') : moment(newDate),
@@ -277,16 +290,24 @@ const Datepicker = props => {
 
     const handleEndDateBlur = e => {
         let newDate;
-        if (moment(endDateInput).isValid()) {
-            newDate = moment(endDateInput).set('hour', parseInt(endHour, 10)).toDate();
-            setEndDate(addDay(newDate));
+
+        if(!moment(endDateInput).isValid()){
+          newDate = endDate;
         } else {
-            newDate = endDate;
-            setEndDateInput(newDate);
+          if(minDate && !moment(endDateInput).isSameOrAfter(minDate)){
+            newDate = minDate;
+          } else if(maxDate && !moment(endDateInput).isSameOrBefore(maxDate)){
+            newDate = maxDate;
+          } else {
+            newDate = moment(endDateInput);
+          }
         }
+
+        setEndDate(addDay(newDate.set('hour', parseInt(endHour, 10)).toDate()));
+        setEndDateInput(newDate);
+
         doBlur('end', e);
         setDate2(newDate);
-        setEndDateInput();
     };
 
     const handleKeyPressed = (code, e, type) => {

package/src/Atomic/FormElements/InputDateRange/components/OpenedPart.js

@@ -25,7 +25,9 @@ const OpenedPart = React.forwardRef((props, ref) => {
         isCompare,
         setIsCompare,
         toggleOff,
-        isShortWeekNames
+        isShortWeekNames,
+        minDate = null,
+        maxDate = null
     } = props;
 
     const items = isCompact ? [...Object.keys(intervals)] : [...Object.keys(intervals), customKey];
@@ -105,6 +107,8 @@ const OpenedPart = React.forwardRef((props, ref) => {
                         limitRange={limitRange}
                         setActiveInterval={setActiveInterval}
                         isShortWeekNames={isShortWeekNames}
+                        minDate={minDate}
+                        maxDate={maxDate}
                     />
                 )}
             </div>

package/src/Atomic/FormElements/InputDateRange/dependencies.js

@@ -89,7 +89,7 @@ export const INTERVALS = {
         end: () => moment().startOf('month'),
     },
     last6Months: {
-        label: 'Last 6 Months',
+        label: '6 Months',
         start: () => moment().subtract(6, 'month').startOf('month'),
         end: () => moment().startOf('month'),
     },

package/src/Atomic/FormElements/NumericInput/NumericInput.js

@@ -192,6 +192,7 @@ const NumericInput = ({
   useEffect(() => {
     if (inputRef?.current && typeof isFocusDefault === 'boolean')
       setIsFocused(isFocusDefault);
+      setEditing(isFocusDefault)
   }, [inputRef, isFocusDefault]);
 
   function renderInput() {

package/src/Atomic/FormElements/RangeCalendar/RangeCalendar.scss

@@ -1,4 +1,4 @@
-.range-calendar {
+.range-calendar, .calendar {
   width: 195px;
   min-height: 195px;
   display: flex;
@@ -12,7 +12,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-  
+
     &__title {
       line-height: 20px;
       font-weight: 500;
@@ -27,7 +27,7 @@
     &__next, &__prev {
       width: 16px;
       height: 16px;
-      background-color: #E2E6F8;
+      //background-color: #E2E6F8;
       border-radius: 5px;
       color: #171D33;
     }
@@ -98,4 +98,4 @@
       }
     }
   }
-}
+}

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

@@ -70,7 +70,7 @@ export default function (props) {
   };
 
   return (
-    <div className={`calendar ${className}`}>
+    <div className={`calendar ${className ? className : ""}`}>
       <div className="calendar-header">
         <div className="calendar-header__prev">
           {allowPrev && (
@@ -92,7 +92,7 @@ export default function (props) {
         {[...Array(7).keys()].map((dayOfWeek) => {
           return (
             <div key={`day-of-week_${dayOfWeek}`} className="calendar__day calendar__day--title">
-              {moment().weekday(dayOfWeek).format('dd').charAt(0)}
+              {moment().weekday(dayOfWeek).format('dd')}
             </div>
           );
         })}

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

@@ -429,6 +429,12 @@
   display: flex;
   justify-content: center;
   align-items: center;
+
+  &__prev,
+  &__next{
+    display: flex;
+    height: auto;
+  }
 }
 .calendar {
   background: #ffffff;
@@ -511,15 +517,21 @@
   }
 
   &-container {
-    width: 200px;
+    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;
     cursor: pointer;
-    color: gray;
-
     width: 100%;
     height: 28px;