intelicoreact 0.0.48 → 0.0.53

package/dist/Atomic/FormElements/Calendar/Calendar.js

@@ -33,18 +33,26 @@ function _default(props) {
       _props$allowPrev = props.allowPrev,
       allowPrev = _props$allowPrev === void 0 ? true : _props$allowPrev,
       _props$allowNext = props.allowNext,
-      allowNext = _props$allowNext === void 0 ? true : _props$allowNext;
+      allowNext = _props$allowNext === void 0 ? true : _props$allowNext,
+      params = props.params;
+  var minDate = params.minDate,
+      maxDate = params.maxDate;
 
   var _useState = (0, _react.useState)({}),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       days = _useState2[0],
       setDays = _useState2[1];
 
-  var selectedDay = (0, _moment.default)(date);
+  var _useState3 = (0, _react.useState)(date),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      showDate = _useState4[0],
+      setShowDate = _useState4[1];
+
+  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)(date).format('YYYY'));
-  }, [date]);
+    return selectedDay.format('MMM') === isError ? isError : "".concat(selectedDay.format('MMM'), " ").concat((0, _moment.default)(showDate).format('YYYY'));
+  }, [date, showDate]);
   (0, _react.useEffect)(function () {
     var result = {};
     var day = selectedDay.startOf('month');
@@ -66,20 +74,23 @@ function _default(props) {
     }
 
     setDays(result);
-  }, [date]);
+  }, [showDate]);
 
   var renderDay = function renderDay(week, dayOfWeek) {
     var day = days[week][dayOfWeek];
     if (!day) return /*#__PURE__*/_react.default.createElement("div", {
       className: "calendar__day"
     });
-    var isFutureDay = day && (0, _moment.default)(day.date).isAfter((0, _moment.default)(), 'day');
+    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');
     var classNames = (0, _classnames.default)('calendar__day', {
       'calendar__day--clickable': day
     }, {
       'calendar__day--disabled': isFutureDay
     }, {
-      'calendar__day--selected': selectedDay.format() === (0, _moment.default)(day.date).format()
+      'calendar__day--disabled': isBeforeDay
+    }, {
+      'calendar__day--selected': (0, _moment.default)(date).format() === (0, _moment.default)(day.date).format()
     });
     return /*#__PURE__*/_react.default.createElement("div", {
       key: "".concat(week, "_").concat(dayOfWeek),
@@ -93,11 +104,11 @@ function _default(props) {
   };
 
   var handlePrev = function handlePrev() {
-    setDate((0, _moment.default)(date).subtract(1, 'month').format('L'));
+    setShowDate((0, _moment.default)(showDate).subtract(1, 'month').format('L'));
   };
 
   var handleNext = function handleNext() {
-    setDate((0, _moment.default)(date).add(1, 'month').format('L'));
+    setShowDate((0, _moment.default)(showDate).add(1, 'month').format('L'));
   };
 
   return /*#__PURE__*/_react.default.createElement("div", {

package/dist/Atomic/FormElements/Calendar/Calendar.scss

@@ -381,10 +381,10 @@ select.form-input {
   }
 }
 
-
 .calendar-header {
   display: flex;
   height: 24px;
+  margin: 0 6px;
 
   &__title {
     line-height: 20px;

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

@@ -2,74 +2,32 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CalendarSimple = exports.default = void 0;
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _react = _interopRequireWildcard(require("react"));
+exports.CalendarTemplate = exports.default = void 0;
 
-var _yup = require("yup");
-
-var _useClickOutside = require("../../../Functions/useClickOutside");
+var _react = _interopRequireDefault(require("react"));
 
 var _Calendar = _interopRequireDefault(require("./Calendar"));
 
-var _reactInputMask = _interopRequireDefault(require("react-input-mask"));
-
-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: 'Form Elements/Calendar',
+  title: 'UI/Calendar',
   component: _Calendar.default
 };
 exports.default = _default;
 
 var Template = function Template(args) {
-  var _useState = (0, _react.useState)(args.date),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      date = _useState2[0],
-      _setDate = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(false),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      isOpened = _useState4[0],
-      setIsOpened = _useState4[1];
-
-  var calendarRef = (0, _react.useRef)(null);
-  (0, _useClickOutside.useClickOutside)(calendarRef, function () {
-    return setIsOpened(false);
-  });
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "calendar-container",
-    ref: calendarRef
-  }, /*#__PURE__*/_react.default.createElement(_reactInputMask.default, {
-    mask: "99/99/9999",
-    value: date,
-    onChange: function onChange(e) {
-      return _setDate(e.target.value);
-    },
-    className: "calendar-dropdown",
-    onFocus: function onFocus() {
-      return setIsOpened(!isOpened);
-    }
-  }), isOpened ? /*#__PURE__*/_react.default.createElement(_Calendar.default, {
-    date: date,
-    setDate: function setDate(newDate) {
-      return _setDate(newDate);
-    }
-  }) : null);
+  return /*#__PURE__*/_react.default.createElement(_Calendar.default, args);
 };
 
-var CalendarSimple = Template.bind({});
-exports.CalendarSimple = CalendarSimple;
-CalendarSimple.args = {
-  date: '10/11/2021'
+var CalendarTemplate = Template.bind({});
+exports.CalendarTemplate = CalendarTemplate;
+CalendarTemplate.args = {
+  date: '12/03/2021',
+  params: {},
+  setDate: function setDate() {
+    return null;
+  }
 };

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

@@ -86,8 +86,6 @@ var Dropdown = function Dropdown(_ref) {
   var filteredOptions = [].concat((0, _toConsumableArray2.default)(filteredItems), (0, _toConsumableArray2.default)(filteredGroups));
 
   var handleClickOutside = function handleClickOutside(event) {
-    console.log(dropdownRef.current.contains(event.target));
-
     if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
       setIsOpen(false);
       setSearchValue(null);
@@ -160,7 +158,10 @@ var Dropdown = function Dropdown(_ref) {
     className: (0, _classnames.default)(RC, className),
     ref: dropdownRef
   }, /*#__PURE__*/_react.default.createElement("button", {
-    className: "".concat(RC, "__trigger input__wrap ").concat(!value ? 'placeholder' : '', " ").concat(error ? 'error' : '')
+    className: "".concat(RC, "__trigger input__wrap ").concat(!value ? 'placeholder' : '', " ").concat(error ? 'error' : ''),
+    onClick: function onClick() {
+      return !isSearchable ? setIsOpen(!isOpen) : null;
+    }
   }, isSearchable ? /*#__PURE__*/_react.default.createElement("input", {
     className: "".concat(RC, "__input"),
     value: searchValue !== null && searchValue !== void 0 ? searchValue : selectedLabel,
@@ -172,10 +173,7 @@ var Dropdown = function Dropdown(_ref) {
       return setIsOpen(true);
     }
   }) : /*#__PURE__*/_react.default.createElement("span", {
-    className: "text",
-    onClick: function onClick() {
-      return setIsOpen(!isOpen);
-    }
+    className: "text"
   }, selectedLabel || placeholder), /*#__PURE__*/_react.default.createElement("span", {
     className: (0, _classnames.default)("".concat(RC, "__arrow"), (0, _defineProperty2.default)({}, "".concat(RC, "__arrow_active"), isOpen)),
     onClick: function onClick() {

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

@@ -49,7 +49,8 @@ var Input = function Input(_ref) {
       onKeyUp = _ref.onKeyUp,
       mask = _ref.mask,
       error = _ref.error,
-      icon = _ref.icon;
+      icon = _ref.icon,
+      symbolsLimit = _ref.symbolsLimit;
 
   // STATES
   var _useState = (0, _react.useState)(false),
@@ -65,8 +66,8 @@ var Input = function Input(_ref) {
   var inputRef = (0, _react.useRef)(null); // HANDLES
 
   var handle = {
-    change: function change(event) {
-      var inputValue = event.target.value;
+    change: function change(e) {
+      var inputValue = e.target ? e.target.value : e;
 
       if (isNumeric || type === 'number' && inputValue !== '') {
         inputValue = parseFloat(inputValue) || '';
@@ -74,7 +75,7 @@ var Input = function Input(_ref) {
         if (min && +min > inputValue) {
           inputValue = min;
         } else if (max && +max < inputValue) inputValue = max;
-      }
+      } else if (symbolsLimit && inputValue.length > +symbolsLimit) inputValue = inputValue.substring(0, +symbolsLimit);
 
       onChange(inputValue.toString());
     },

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

@@ -71,6 +71,9 @@ var _default = {
     mask: {
       description: 'string: force input to masked https://www.npmjs.com/package/react-input-mask'
     },
+    symbolsLimit: {
+      description: 'Set limit of symbols in input, overhead will be ignored'
+    },
     onBlur: {
       description: 'custom callback on blur'
     },
@@ -109,5 +112,6 @@ InputTemplate.args = {
   max: '5',
   placeholder: 'Placeholder',
   mask: '',
-  icon: /*#__PURE__*/_react.default.createElement(_reactFeather.User, null)
+  icon: /*#__PURE__*/_react.default.createElement(_reactFeather.User, null),
+  symbolsLimit: 225
 };

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

@@ -0,0 +1,89 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _useClickOutside = require("../../../Functions/useClickOutside");
+
+var _Calendar = _interopRequireDefault(require("../Calendar/Calendar"));
+
+var _reactInputMask = _interopRequireDefault(require("react-input-mask"));
+
+var _moment = _interopRequireDefault(require("moment"));
+
+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; }
+
+var InputCalendar = function InputCalendar(_ref) {
+  var data = _ref.data,
+      params = _ref.params;
+
+  var _useState = (0, _react.useState)(data),
+      _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];
+
+  var calendarRef = (0, _react.useRef)(null);
+  (0, _useClickOutside.useClickOutside)(calendarRef, function () {
+    return setIsOpened(false);
+  });
+
+  var changeInputValue = function changeInputValue(value) {
+    if (!value.includes('_') && value) {
+      setDate((0, _moment.default)(value).format('L'));
+      setInputValue((0, _moment.default)(value).format('L'));
+    } else {
+      setInputValue(value);
+    }
+  };
+
+  var changeCalendarDay = function changeCalendarDay(value) {
+    setDate(value);
+    setInputValue(value);
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "calendar-container",
+    ref: calendarRef
+  }, /*#__PURE__*/_react.default.createElement(_reactInputMask.default, {
+    mask: "99/99/9999",
+    value: inputValue,
+    onChange: function onChange(e) {
+      return changeInputValue(e.target.value);
+    },
+    className: "calendar-dropdown",
+    onFocus: function onFocus() {
+      return setIsOpened(!isOpened);
+    }
+  }), isOpened ? /*#__PURE__*/_react.default.createElement(_Calendar.default, {
+    date: date,
+    setDate: function setDate(newDate) {
+      return changeCalendarDay(newDate);
+    },
+    params: params
+  }) : null);
+};
+
+var _default = InputCalendar;
+exports.default = _default;

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

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Calendar = exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _yup = require("yup");
+
+var _InputCalendar = _interopRequireDefault(require("./InputCalendar"));
+
+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: 'Form Elements/InputCalendar',
+  component: _InputCalendar.default
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  var params = {
+    minDate: args === null || args === void 0 ? void 0 : args.minDate,
+    maxDate: args === null || args === void 0 ? void 0 : args.maxDate
+  };
+  return /*#__PURE__*/_react.default.createElement(_InputCalendar.default, {
+    data: args.date,
+    params: params
+  });
+};
+
+var Calendar = Template.bind({});
+exports.Calendar = Calendar;
+Calendar.args = {
+  date: '10/14/2021',
+  minDate: '10/11/2021',
+  maxDate: '10/25/2021'
+};

package/dist/Atomic/UI/Price/Price.js

@@ -15,6 +15,7 @@ var Price = function Price(_ref) {
       unit = _ref$unit === void 0 ? '$' : _ref$unit,
       unitAfter = _ref.unitAfter,
       className = _ref.className;
+  if (value === undefined || value === null) return null;
   var formatted;
 
   if (value.length <= 3) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "intelicoreact",
-  "version": "0.0.48",
-  "description": "",
+  "version": "0.0.53",
+  "description": "Fix Calendar",
   "main": "dist/index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

package/src/Atomic/FormElements/Calendar/Calendar.js

@@ -5,16 +5,17 @@ import { ChevronLeft, ChevronRight } from 'react-feather';
 import './Calendar.scss';
 
 export default function (props) {
-  const { date, setDate, allowPrev = true, allowNext = true } = props;
-
+  const { date, setDate, allowPrev = true, allowNext = true, params } = props;
+  const { minDate, maxDate } = params;
   const [days, setDays] = useState({});
+  const [showDate, setShowDate] = useState(date);
 
-  const selectedDay = moment(date);
+  const selectedDay = moment(showDate);
   const isError = 'Invalid date';
 
   const title = useMemo(
-    () => (selectedDay.format('MMM') === isError ? isError : `${selectedDay.format('MMM')} ${moment(date).format('YYYY')}`),
-    [date]
+    () => (selectedDay.format('MMM') === isError ? isError : `${selectedDay.format('MMM')} ${moment(showDate).format('YYYY')}`),
+    [date, showDate]
   );
   useEffect(() => {
     const result = {};
@@ -31,18 +32,20 @@ export default function (props) {
       day.add(1, 'd');
     }
     setDays(result);
-  }, [date]);
+  }, [showDate]);
 
   const renderDay = (week, dayOfWeek) => {
     const day = days[week][dayOfWeek];
     if (!day) return <div className="calendar__day" />;
-    const isFutureDay = day && moment(day.date).isAfter(moment(), 'day');
+    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');
 
     const classNames = cn(
       'calendar__day',
       { 'calendar__day--clickable': day },
       { 'calendar__day--disabled': isFutureDay },
-      { 'calendar__day--selected': selectedDay.format() === moment(day.date).format() }
+      { 'calendar__day--disabled': isBeforeDay },
+      { 'calendar__day--selected': moment(date).format() === moment(day.date).format() }
     );
 
     return (
@@ -59,11 +62,11 @@ export default function (props) {
   };
 
   const handlePrev = () => {
-    setDate(moment(date).subtract(1, 'month').format('L'));
+    setShowDate(moment(showDate).subtract(1, 'month').format('L'));
   };
 
   const handleNext = () => {
-    setDate(moment(date).add(1, 'month').format('L'));
+    setShowDate(moment(showDate).add(1, 'month').format('L'));
   };
 
   return (

package/src/Atomic/FormElements/Calendar/Calendar.scss

@@ -381,10 +381,10 @@ select.form-input {
   }
 }
 
-
 .calendar-header {
   display: flex;
   height: 24px;
+  margin: 0 6px;
 
   &__title {
     line-height: 20px;

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

@@ -1,38 +1,19 @@
-import React, { useRef, useState } from 'react';
-import { ref } from 'yup';
-import { useClickOutside } from '../../../Functions/useClickOutside';
+import React from 'react';
 import Calendar from './Calendar';
-import InputMask from 'react-input-mask';
 
 global.lng = 'en';
 
 export default {
-  title: 'Form Elements/Calendar',
+  title: 'UI/Calendar',
   component: Calendar,
 };
 
-const Template = (args) => {
-  const [date, setDate] = useState(args.date);
-  const [isOpened, setIsOpened] = useState(false);
-  const calendarRef = useRef(null);
-  useClickOutside(calendarRef, () => setIsOpened(false));
+const Template = args => <Calendar {...args} />;
 
-  return (
-    <div className="calendar-container" ref={calendarRef}>
-      <InputMask
-        mask="99/99/9999"
-        value={date}
-        onChange={(e) => setDate(e.target.value)}
-        className="calendar-dropdown"
-        onFocus={() => setIsOpened(!isOpened)}
-      />
-      {isOpened ? <Calendar date={date} setDate={(newDate) => setDate(newDate)} /> : null}
-    </div>
-  );
-};
-
-export const CalendarSimple = Template.bind({});
+export const CalendarTemplate = Template.bind({});
 
-CalendarSimple.args = {
-  date: '10/11/2021',
+CalendarTemplate.args = {
+  date: '12/03/2021',
+  params: {},
+  setDate: () => null,
 };

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

@@ -24,7 +24,6 @@ const Dropdown = ({ options, value, error, onChange, placeholder, className, isS
   const filteredOptions = [...filteredItems, ...filteredGroups];
 
   const handleClickOutside = event => {
-    console.log(dropdownRef.current.contains(event.target));
     if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
       setIsOpen(false);
       setSearchValue(null);
@@ -76,7 +75,7 @@ const Dropdown = ({ options, value, error, onChange, placeholder, className, isS
 
   return (
     <div className={cn(RC, className)} ref={dropdownRef}>
-      <button className={`${RC}__trigger input__wrap ${!value ? 'placeholder' : ''} ${error ? 'error' : ''}`} >
+      <button className={`${RC}__trigger input__wrap ${!value ? 'placeholder' : ''} ${error ? 'error' : ''}`} onClick={() => !isSearchable ? setIsOpen(!isOpen) : null}>
         {isSearchable ? (
           <input
             className={`${RC}__input`}
@@ -86,7 +85,7 @@ const Dropdown = ({ options, value, error, onChange, placeholder, className, isS
             onFocus={() => setIsOpen(true)}
           />
         ) : (
-          <span className="text" onClick={() => setIsOpen(!isOpen)}>
+          <span className="text">
             {selectedLabel || placeholder}
           </span>
         )}

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

@@ -23,6 +23,7 @@ const Input = ({
   mask,
   error,
   icon,
+  symbolsLimit,
 }) => {
   // STATES
   const [isFocused, setIsFocused] = useState(false);
@@ -30,14 +31,14 @@ const Input = ({
   const inputRef = useRef(null);
   // HANDLES
   const handle = {
-    change: event => {
-      let inputValue = event.target.value;
+    change: e => {
+      let inputValue = e.target ? e.target.value : e;
       if (isNumeric || (type === 'number' && inputValue !== '')) {
         inputValue = parseFloat(inputValue) || '';
         if (min && +min > inputValue) {
           inputValue = min;
         } else if (max && +max < inputValue) inputValue = max;
-      }
+      } else if (symbolsLimit && inputValue.length > +symbolsLimit) inputValue = inputValue.substring(0, +symbolsLimit);
       onChange(inputValue.toString());
     },
     toggleEdit: () => {
@@ -70,7 +71,7 @@ const Input = ({
     onBlur: handle.blur,
     onKeyUp: handle.keyUp,
     min,
-    max
+    max,
   };
 
   function renderInput() {

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

@@ -43,6 +43,7 @@ export default {
     value: { description: '(* - required prop)' },
     className: { description: 'string' },
     mask: { description: 'string: force input to masked https://www.npmjs.com/package/react-input-mask' },
+    symbolsLimit: { description: 'Set limit of symbols in input, overhead will be ignored' },
     onBlur: { description: 'custom callback on blur' },
     onFocus: { description: 'custom callback on focus' },
     onKeyUp: { description: 'custom callback on keyup, returns event keyCode' }
@@ -67,5 +68,6 @@ InputTemplate.args = {
   max: '5',
   placeholder: 'Placeholder',
   mask: '',
-  icon: <User />
+  icon: <User />,
+  symbolsLimit: 225
 };

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

@@ -0,0 +1,43 @@
+import React, { useState, useRef } from 'react';
+import { useClickOutside } from '../../../Functions/useClickOutside';
+import Calendar from '../Calendar/Calendar';
+import InputMask from 'react-input-mask';
+import moment from 'moment';
+
+const InputCalendar = ({ data, params }) => {
+  const [date, setDate] = useState(data);
+  const [inputValue, setInputValue] = useState(date);
+  const [isOpened, setIsOpened] = useState(false);
+  const calendarRef = useRef(null);
+
+  useClickOutside(calendarRef, () => setIsOpened(false));
+
+  const changeInputValue = (value) => {
+    if (!value.includes('_') && value) {
+      setDate(moment(value).format('L'));
+      setInputValue(moment(value).format('L'));
+    } else {
+      setInputValue(value);
+    }
+  };
+
+  const changeCalendarDay = (value) => {
+    setDate(value);
+    setInputValue(value);
+  };
+
+  return (
+    <div className="calendar-container" ref={calendarRef}>
+      <InputMask
+        mask="99/99/9999"
+        value={inputValue}
+        onChange={(e) => changeInputValue(e.target.value)}
+        className="calendar-dropdown"
+        onFocus={() => setIsOpened(!isOpened)}
+      />
+      {isOpened ? <Calendar date={date} setDate={(newDate) => changeCalendarDay(newDate)} params={params} /> : null}
+    </div>
+  );
+};
+
+export default InputCalendar;

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

@@ -0,0 +1,27 @@
+import React, { useRef, useState } from 'react';
+import { ref } from 'yup';
+import InputCalendar from './InputCalendar';
+
+global.lng = 'en';
+
+export default {
+  title: 'Form Elements/InputCalendar',
+  component: InputCalendar,
+};
+
+const Template = (args) => {
+  const params = {
+    minDate: args?.minDate,
+    maxDate: args?.maxDate,
+  };
+
+  return <InputCalendar data={args.date} params={params} />;
+};
+
+export const Calendar = Template.bind({});
+
+Calendar.args = {
+  date: '10/14/2021',
+  minDate: '10/11/2021',
+  maxDate: '10/25/2021',
+};

package/src/Atomic/UI/Price/Price.js

@@ -1,5 +1,6 @@
 import React from 'react';
 const Price = ({ value, unit = '$', unitAfter, className }) => {
+  if (value === undefined || value === null) return null;
   let formatted;
   if (value.length <= 3) {
     formatted = parseFloat(value).toFixed(2);