intelicoreact 1.5.41 → 1.6.0

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

@@ -0,0 +1,81 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    TemplateAdvancedStatus: function() {
+        return TemplateAdvancedStatus;
+    },
+    default: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = require("react");
+const _AdvancedStatus = /*#__PURE__*/ _interop_require_default(require("./AdvancedStatus"));
+require("../../../../../scss/main.scss");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const _default = {
+    title: 'Form Elements/AdvancedStatus',
+    component: _AdvancedStatus.default,
+    argTypes: {
+        value: {
+            description: 'boolean. optional'
+        },
+        className: {
+            description: 'string. optional'
+        },
+        testId: {
+            description: 'string. optional'
+        }
+    }
+};
+function Template(args) {
+    const [value, setValue] = (0, _react.useState)(null);
+    const buttonStyles = {
+        border: '1px solid black',
+        padding: '10px',
+        marginTop: '10px'
+    };
+    (0, _react.useEffect)(()=>{
+        if (value === null) setTimeout(()=>setValue(args.value), 1500);
+    }, [
+        value
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_AdvancedStatus.default, {
+                ...args,
+                value: value,
+                onChange: setValue
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("button", {
+                style: buttonStyles,
+                disabled: value === null,
+                onClick: ()=>setValue(null),
+                children: "Reload"
+            })
+        ]
+    });
+}
+const TemplateAdvancedStatus = Template.bind({});
+TemplateAdvancedStatus.args = {
+    value: false,
+    className: 'test-class',
+    testId: 'test-id',
+    activeText: 'Approved',
+    inactiveText: 'Review',
+    disabled: false,
+    isPrimary: true,
+    primaryStatusText: 'Primary'
+};

package/dist/Atomic/FormElements/AdvancedStatus/AdvancedStatus.test.js

@@ -0,0 +1,104 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _react1 = require("@testing-library/react");
+require("@testing-library/jest-dom");
+const _AdvancedStatus = /*#__PURE__*/ _interop_require_default(require("./AdvancedStatus"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+// Мокаем компонент Status, если он не нужен для тестов
+jest.mock('../../UI/Status/Status', ()=>({ children })=>/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+            children: children
+        }));
+describe('advancedStatus Component', ()=>{
+    it('renders without crashing', ()=>{
+        (0, _react1.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_AdvancedStatus.default, {
+            onChange: ()=>{},
+            inactiveText: "Inactive",
+            activeText: "Active",
+            value: true
+        }));
+        expect(_react1.screen.getByTestId('advanced-status')).toBeInTheDocument();
+    });
+    it('renders with correct text based on value', ()=>{
+        (0, _react1.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_AdvancedStatus.default, {
+            onChange: ()=>{},
+            inactiveText: "Inactive",
+            activeText: "Active",
+            value: true
+        }));
+        // Проверяем, что отображается "Active"
+        expect(_react1.screen.getByText('Active')).toBeInTheDocument();
+        (0, _react1.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_AdvancedStatus.default, {
+            onChange: ()=>{},
+            inactiveText: "Inactive",
+            activeText: "Active",
+            value: false
+        }));
+        // Проверяем, что отображается "Inactive"
+        const inactiveElements = _react1.screen.getAllByText('Inactive');
+        expect(inactiveElements.length).toBeGreaterThan(0); // Проверяем, что хотя бы один элемент присутствует
+        inactiveElements.forEach((element)=>{
+            expect(element).toBeInTheDocument();
+        });
+    });
+    it('should call onChange when clicked', ()=>{
+        const onChangeMock = jest.fn();
+        (0, _react1.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_AdvancedStatus.default, {
+            onChange: onChangeMock,
+            inactiveText: "Inactive",
+            activeText: "Active",
+            value: false
+        }));
+        _react1.fireEvent.click(_react1.screen.getByText('Inactive'));
+        expect(onChangeMock).toHaveBeenCalledTimes(1);
+    });
+    it('applies correct class names based on props', ()=>{
+        const { container } = (0, _react1.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_AdvancedStatus.default, {
+            onChange: ()=>{},
+            inactiveText: "Inactive",
+            activeText: "Active",
+            value: true,
+            disabled: true,
+            className: "custom-class"
+        }));
+        expect(container.firstChild).toHaveClass('advanced-status_disabled');
+        expect(container.firstChild).toHaveClass('custom-class');
+    });
+    it('does not render Status component when isPrimary is false', ()=>{
+        (0, _react1.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_AdvancedStatus.default, {
+            onChange: ()=>{},
+            inactiveText: "Inactive",
+            activeText: "Active",
+            value: true,
+            isPrimary: false
+        }));
+        expect(_react1.screen.queryByText('warning')).not.toBeInTheDocument();
+    });
+    it('renders Status component when isPrimary is true', ()=>{
+        (0, _react1.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_AdvancedStatus.default, {
+            onChange: ()=>{},
+            inactiveText: "Inactive",
+            activeText: "Active",
+            value: true,
+            isPrimary: true,
+            primaryStatusText: "Primary Status"
+        }));
+        expect(_react1.screen.getByText('Primary Status')).toBeInTheDocument();
+    });
+    it('applies undefined styles if value is undefined or null', ()=>{
+        const { container } = (0, _react1.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_AdvancedStatus.default, {
+            onChange: ()=>{},
+            inactiveText: "Inactive",
+            activeText: "Active",
+            value: null
+        }));
+        expect(container.firstChild).toHaveClass('advanced-status_undefined');
+    });
+});

package/dist/Atomic/FormElements/AdvancedStatus/index.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+const _AdvancedStatus = /*#__PURE__*/ _interop_require_default(require("./AdvancedStatus"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const _default = _AdvancedStatus.default;

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

@@ -1,170 +1,249 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
-exports.default = _default;
-var _react = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _moment = _interopRequireDefault(require("moment"));
-var _reactFeather = require("react-feather");
-var _reactInputMask = _interopRequireDefault(require("react-input-mask"));
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+const _moment = /*#__PURE__*/ _interop_require_default(require("moment"));
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _reactfeather = require("react-feather");
+const _reactinputmask = /*#__PURE__*/ _interop_require_default(require("react-input-mask"));
 require("./Calendar.scss");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _default(props) {
-  const {
-    date,
-    setDate,
-    setIsOpened,
-    allowPrev = true,
-    allowNext = true,
-    params,
-    className,
-    isListTop,
-    testId = "calendar"
-  } = props;
-  // const { minDate = '01/01/1900', maxDate = moment().format('MM/DD/YYYY') } = params;
-  const {
-    format,
-    minDate,
-    maxDate,
-    momentMinDate,
-    momentMaxDate,
-    isDontLimitFuture
-  } = params;
-  const [days, setDays] = (0, _react.useState)({});
-  const [showDate, setShowDate] = (0, _react.useState)(date);
-  const [isChangeYear, setIsChangeYear] = (0, _react.useState)(false);
-  const [inputYearValue, setInputYearValue] = (0, _react.useState)((0, _moment.default)(showDate).format("YYYY"));
-  const yearInputRef = (0, _react.useRef)(null);
-  const selectedDay = (0, _moment.default)(showDate);
-  const isError = "Invalid date";
-  const showMonth = (0, _react.useMemo)(() => (0, _moment.default)(showDate).format("MMM"), [date, showDate]);
-  const showYear = (0, _react.useMemo)(() => (0, _moment.default)(showDate).format("YYYY"), [date, showDate]);
-  const isShovPrevArrow = allowPrev && !(minDate && (0, _moment.default)(showDate).startOf("month").isSameOrBefore(momentMinDate, "months"));
-  const isShovNextArrow = allowNext && (isDontLimitFuture || !(0, _moment.default)(showDate).startOf("month").isSameOrAfter(maxDate ? momentMaxDate : (0, _moment.default)().add(1, "day").startOf("day"), "months"));
-  (0, _react.useEffect)(() => {
-    const result = {};
-    const day = selectedDay.startOf("month");
-    const daysInMonth = day.daysInMonth();
-    for (let d = 0; d < daysInMonth; d += 1) {
-      let week = day.week();
-      if (day.month() === 11 && week === 1) week = 53;
-      if (day.month() === 0 && week === 53) week = 0;
-      if (!Object.prototype.hasOwnProperty.call(result, week)) {
-        result[week] = {};
-      }
-      result[week][day.weekday()] = {
-        date: day.toDate()
-      };
-      day.add(1, "d");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
     }
-    setDays(result);
-  }, [showDate]);
-  const renderDay = (week, dayOfWeek) => {
-    const day = days[week][dayOfWeek];
-    if (!day) return /*#__PURE__*/_react.default.createElement("div", {
-      className: "calendar__day"
-    });
-    const isFutureDay = day && !isDontLimitFuture && maxDate ? (0, _moment.default)(day.date).isAfter(momentMaxDate || (0, _moment.default)().add(1, "days"), "day") : (0, _moment.default)(day.date).isAfter((0, _moment.default)(), "day");
-    const isBeforeDay = day && (0, _moment.default)(day.date).isBefore(momentMinDate || "", "day");
-    const classNames = (0, _classnames.default)("calendar__day", {
-      "calendar__day--clickable": day
-    }, {
-      "calendar__day--disabled": !isDontLimitFuture && isFutureDay
-    }, {
-      "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: `${week}_${dayOfWeek}`,
-      className: classNames,
-      onClick: day && (isDontLimitFuture || !isFutureDay) ? () => {
-        setDate((0, _moment.default)(day.date).format("L"));
-        setIsOpened(false);
-      } : null
-    }, day && day.date.getDate());
-  };
-  const handlePrev = () => {
-    setShowDate((0, _moment.default)(showDate).subtract(1, "month").format("L"));
-  };
-  const handleNext = () => {
-    setShowDate((0, _moment.default)(showDate).add(1, "month").format("L"));
-  };
-  const closeYearInput = () => {
-    const newDate = (() => {
-      const dateArr = showDate.split("/");
-      const 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");
-    })();
-    let 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)(() => {
-    if (isChangeYear && yearInputRef.current) {
-      const input = yearInputRef.current.getElementsByTagName("input")[0];
-      setInputYearValue(showYear);
-      setTimeout(() => {
-        input.focus();
-        input.select();
-      }, 0);
+    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);
     }
-  }, [isChangeYear]);
-  return /*#__PURE__*/_react.default.createElement("div", {
-    "data-testid": testId,
-    className: (0, _classnames.default)("calendar", className, {
-      "calendar_list-top": isListTop
-    })
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "calendar-header"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "calendar-header__prev",
-    "data-testid": `${testId}-prev-arrow`
-  }, isShovPrevArrow && /*#__PURE__*/_react.default.createElement("div", {
-    onClick: handlePrev
-  }, /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronLeft, null))), /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)("calendar-header__title"),
-    ref: yearInputRef
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "calendar-header__title-month"
-  }, `${showMonth} `), /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)("calendar-header__title-year", {
-      "calendar-header__title-year_change-mode": isChangeYear
-    }),
-    onClick: () => setIsChangeYear(true)
-  }, isChangeYear ? /*#__PURE__*/_react.default.createElement(_reactInputMask.default, {
-    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}`)), /*#__PURE__*/_react.default.createElement("div", {
-    "data-testid": `${testId}-next-arrow`,
-    className: "calendar-header__next"
-  }, isShovNextArrow && /*#__PURE__*/_react.default.createElement("div", {
-    onClick: handleNext
-  }, /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronRight, null)))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "calendar__week"
-  }, [...Array(7).keys()].map(dayOfWeek => {
-    return /*#__PURE__*/_react.default.createElement("div", {
-      key: `day-of-week_${dayOfWeek}`,
-      className: "calendar__day calendar__day--title"
-    }, (0, _moment.default)().weekday(dayOfWeek).format("dd"));
-  })), Object.keys(days).map((week, index) => /*#__PURE__*/_react.default.createElement("div", {
-    key: `week_${index}`,
-    className: "calendar__week"
-  }, [...Array(7).keys()].map(dayOfWeek => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
-    key: `calendar-day--${dayOfWeek}`
-  }, renderDay(week, dayOfWeek))))));
-}
+    var newObj = {
+        __proto__: null
+    };
+    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;
+}
+const CN = 'calendar';
+const paramsDefault = {};
+const dateDefault = (0, _moment.default)().format('L');
+const Calendar = ({ date = dateDefault, setDate, setIsOpened, className, isListTop, allowPrev = true, allowNext = true, params = paramsDefault, testId = CN })=>{
+    if (!setDate || !setIsOpened) {
+        throw new Error('Required props setDate and setIsOpened must be provided to Calendar component');
+    }
+    const { minDate, maxDate, momentMinDate, momentMaxDate, isDontLimitFuture } = params;
+    const [days, setDays] = (0, _react.useState)({});
+    const [showDate, setShowDate] = (0, _react.useState)(date);
+    const [isChangeYear, setIsChangeYear] = (0, _react.useState)(false);
+    const [inputYearValue, setInputYearValue] = (0, _react.useState)((0, _moment.default)(showDate).format('YYYY'));
+    const yearInputRef = (0, _react.useRef)(null);
+    const selectedDay = (0, _moment.default)(showDate);
+    const isError = 'Invalid date';
+    const showMonth = (0, _react.useMemo)(()=>(0, _moment.default)(showDate).format('MMM'), [
+        showDate
+    ]);
+    const showYear = (0, _react.useMemo)(()=>(0, _moment.default)(showDate).format('YYYY'), [
+        showDate
+    ]);
+    const isShovPrevArrow = allowPrev && !(minDate && (0, _moment.default)(showDate).startOf('month').isSameOrBefore(momentMinDate, 'months'));
+    const isShovNextArrow = allowNext && (isDontLimitFuture || !(0, _moment.default)(showDate).startOf('month').isSameOrAfter(maxDate ? momentMaxDate : (0, _moment.default)().add(1, 'day').startOf('day'), 'months'));
+    (0, _react.useEffect)(()=>{
+        const result = {};
+        const day = selectedDay.startOf('month');
+        const daysInMonth = day.daysInMonth();
+        for(let d = 0; d < daysInMonth; d += 1){
+            let week = day.week();
+            if (day.month() === 11 && week === 1) week = 53;
+            if (day.month() === 0 && week === 53) week = 0;
+            if (!Object.prototype.hasOwnProperty.call(result, week)) {
+                result[week] = {};
+            }
+            result[week][day.weekday()] = {
+                date: day.toDate()
+            };
+            day.add(1, 'd');
+        }
+        setDays(result);
+    }, [
+        showDate
+    ]);
+    const renderDay = (week, dayOfWeek)=>{
+        var _days_week;
+        const day = (_days_week = days[week]) === null || _days_week === void 0 ? void 0 : _days_week[dayOfWeek];
+        if (!day) return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+            className: "calendar__day"
+        });
+        const isFutureDay = day && !isDontLimitFuture && maxDate ? (0, _moment.default)(day.date).isAfter(momentMaxDate || (0, _moment.default)().add(1, 'days'), 'day') : (0, _moment.default)(day.date).isAfter((0, _moment.default)(), 'day');
+        const isBeforeDay = day && (0, _moment.default)(day.date).isBefore(momentMinDate || '', 'day');
+        const classNames = (0, _classnames.default)('calendar__day', {
+            'calendar__day--clickable': day
+        }, {
+            'calendar__day--disabled': !isDontLimitFuture && isFutureDay
+        }, {
+            'calendar__day--disabled': isBeforeDay
+        }, {
+            'calendar__day--selected': (0, _moment.default)(date).format() === (0, _moment.default)(day.date).format()
+        });
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+            className: classNames,
+            onClick: day && (isDontLimitFuture || !isFutureDay) ? ()=>{
+                setDate((0, _moment.default)(day.date).format('L'));
+                setIsOpened(false);
+            } : undefined,
+            children: day && day.date.getDate()
+        }, `${week}_${dayOfWeek}`);
+    };
+    const handlePrev = ()=>{
+        setShowDate((0, _moment.default)(showDate).subtract(1, 'month').format('L'));
+    };
+    const handleNext = ()=>{
+        setShowDate((0, _moment.default)(showDate).add(1, 'month').format('L'));
+    };
+    const closeYearInput = ()=>{
+        const newDate = (()=>{
+            const dateArr = showDate.split('/');
+            dateArr[2] = inputYearValue;
+            return (0, _moment.default)(dateArr.join('/')).format('MM/DD/YYYY') === isError ? showDate : (0, _moment.default)(dateArr.join('/')).format('MM/DD/YYYY');
+        })();
+        let 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)(()=>{
+        let timeoutId;
+        if (isChangeYear && yearInputRef.current) {
+            const input = yearInputRef.current.querySelector('input');
+            if (input) {
+                setInputYearValue(showYear);
+                timeoutId = setTimeout(()=>{
+                    input.focus();
+                    input.select();
+                }, 0);
+            }
+        }
+        return ()=>{
+            clearTimeout(timeoutId);
+        };
+    }, [
+        isChangeYear,
+        showYear
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        "data-testid": testId,
+        className: (0, _classnames.default)(CN, className, {
+            'calendar_list-top': isListTop
+        }),
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                className: "calendar-header",
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        className: "calendar-header__prev",
+                        "data-testid": `${testId}-prev-arrow`,
+                        children: isShovPrevArrow && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                            onClick: handlePrev,
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.ChevronLeft, {})
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                        className: (0, _classnames.default)('calendar-header__title'),
+                        ref: yearInputRef,
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                                className: "calendar-header__title-month",
+                                children: `${showMonth} `
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                                className: (0, _classnames.default)('calendar-header__title-year', {
+                                    'calendar-header__title-year_change-mode': isChangeYear
+                                }),
+                                onClick: ()=>setIsChangeYear(true),
+                                children: isChangeYear ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactinputmask.default, {
+                                    className: "calendar-header__title-year-change-input",
+                                    value: inputYearValue,
+                                    mask: "9999",
+                                    onBlur: closeYearInput,
+                                    onKeyUp: (e)=>{
+                                        if (e.key === 'Escape') setIsChangeYear(false);
+                                        if (e.key === 'Enter') closeYearInput();
+                                    },
+                                    onChange: (e)=>setInputYearValue(e.target.value)
+                                }) : showYear
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        "data-testid": `${testId}-next-arrow`,
+                        className: "calendar-header__next",
+                        children: isShovNextArrow && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                            onClick: handleNext,
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.ChevronRight, {})
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: "calendar__week",
+                children: [
+                    ...Array.from({
+                        length: 7
+                    }).keys()
+                ].map((dayOfWeek)=>/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        className: "calendar__day calendar__day--title",
+                        children: (0, _moment.default)().weekday(dayOfWeek).format('dd')
+                    }, `day-of-week_${dayOfWeek}`))
+            }),
+            Object.keys(days).map((week, index)=>/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                    className: "calendar__week",
+                    children: [
+                        ...Array.from({
+                            length: 7
+                        }).keys()
+                    ].map((dayOfWeek)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_react.default.Fragment, {
+                            children: renderDay(Number(week), dayOfWeek)
+                        }, `calendar-day--${dayOfWeek}`))
+                }, `week_${index}`))
+        ]
+    });
+};
+const _default = Calendar;

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

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

@@ -461,6 +461,7 @@
     box-sizing: border-box;
 
     &__title {
+      display: flex;
       &-month {
         margin-right: 5px;
       }