kui-complex 0.0.82 → 0.0.84

package/cjs/index.js

@@ -16,6 +16,7 @@ var kuiIcon = require('kui-icon');
 var _ = require('lodash');
 var DatePicker = require('react-datepicker');
 var reactHookForm = require('react-hook-form');
+var src = require('kui-basic/src');
 var reactScroll = require('react-scroll');
 var ru = require('date-fns/locale/ru');
 var reactRouterDom = require('react-router-dom');
@@ -470,7 +471,7 @@ var InputForDatepicker = React.forwardRef(function (props, ref) {
         }
     };
     var Icon = function () { return (jsxRuntime.jsx(IconWrapper, __assign({ disabled: disabled, onClick: handleIconClick }, { children: startIcon || jsxRuntime.jsx(kuiIcon.CalendarIcon, { width: 19, height: 21 }) }))); };
-    return (jsxRuntime.jsx(kuiBasic.InputWithMask, __assign({ disabled: disabled, endIcon: !startIcon && jsxRuntime.jsx(Icon, {}), startIcon: startIcon && jsxRuntime.jsx(Icon, {}) }, other, { ref: ref })));
+    return (jsxRuntime.jsx(src.InputWithMask, __assign({ disabled: disabled, endIcon: !startIcon && jsxRuntime.jsx(Icon, {}), startIcon: startIcon && jsxRuntime.jsx(Icon, {}) }, other, { ref: ref })));
 });
 var IconWrapper = styled__default["default"].div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  z-index: 1;\n"], ["\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  z-index: 1;\n"])));
 var templateObject_1$w;
@@ -492,10 +493,15 @@ var templateObject_1$u, templateObject_2$i;
 
 var DesktopInputWithMonthPicker = React.forwardRef(function (_a, ref) {
     var name = _a.name, form = _a.form, disabled = _a.disabled, datePickerProps = _a.datePickerProps, otherProps = __rest(_a, ["name", "form", "disabled", "datePickerProps"]);
+    var _b = React.useState(), changedValue = _b[0], setChangedValue = _b[1];
+    var handleChange = function (e, field) {
+        field.onChange(e);
+        setChangedValue(field.value);
+    };
     return (jsxRuntime.jsx(Wrapper$4, __assign({ ref: ref }, { children: jsxRuntime.jsx(reactHookForm.Controller, { name: name, control: form.control, render: function (_a) {
                 var _b;
                 var field = _a.field, fieldState = _a.fieldState;
-                return (jsxRuntime.jsx(DatePicker__default["default"], __assign({ selected: field.value, onChange: field.onChange, disabled: disabled, customInput: jsxRuntime.jsx(InputForDatepicker, __assign({ mask: "00.0000", name: name, disabled: disabled, message: (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message }, otherProps)), showMonthYearPicker: true, dateFormat: "MM.yyyy", popperPlacement: "bottom-end", calendarContainer: MonthPickerContainer, renderCustomHeader: function (props) { return (jsxRuntime.jsx(MonthPickerHeader, __assign({}, props))); } }, datePickerProps)));
+                return (jsxRuntime.jsx(DatePicker__default["default"], __assign({ selected: field.value, onChange: function (e) { return handleChange(e, field); }, disabled: disabled, customInput: jsxRuntime.jsx(InputForDatepicker, __assign({ mask: "00.0000", name: name, disabled: disabled, message: (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message }, otherProps), changedValue), showMonthYearPicker: true, dateFormat: "MM.yyyy", popperPlacement: "bottom-end", calendarContainer: MonthPickerContainer, renderCustomHeader: function (props) { return (jsxRuntime.jsx(MonthPickerHeader, __assign({}, props))); } }, datePickerProps)));
             } }) })));
 });
 var Wrapper$4 = styled__default["default"].div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n  @media (max-width: 600px) {\n    display: none;\n  }\n"], ["\n  @media (max-width: 600px) {\n    display: none;\n  }\n"])));
@@ -516,7 +522,7 @@ var MenuItem = React.forwardRef(function (_a, ref) {
     };
     React.useEffect(function () {
         if (active === index) {
-            reactScroll.scroller.scrollTo(tab.label, { offset: offset });
+            reactScroll.scroller.scrollTo(tab, { offset: offset });
         }
         reactScroll.Events.scrollEvent.register("begin", function (to, element) {
             startScrolling();
@@ -532,7 +538,7 @@ var MenuItem = React.forwardRef(function (_a, ref) {
             reactScroll.Events.scrollEvent.remove("end");
         };
     }, []);
-    return (jsxRuntime$1.jsx(reactScroll.Link, __assign({ to: tab.label, spy: true, smooth: true, duration: 500, offset: offset, onSetActive: handleSelect }, { children: jsxRuntime$1.jsx(ButtonWrapper$2, __assign({ ref: ref }, { children: jsxRuntime$1.jsx(kuiBasic.Button, __assign({ variant: Number(active) === index ? "orange" : "transparentWithBorder", size: "xs", css: Number(active) !== index && disabledStyles }, { children: tab.label })) })) })));
+    return (jsxRuntime$1.jsx(reactScroll.Link, __assign({ to: tab, spy: true, smooth: true, duration: 500, offset: offset, onSetActive: handleSelect }, { children: jsxRuntime$1.jsx(ButtonWrapper$2, __assign({ ref: ref }, { children: jsxRuntime$1.jsx(kuiBasic.Button, __assign({ variant: Number(active) === index ? "orange" : "transparentWithBorder", size: "xs", css: Number(active) !== index && disabledStyles }, { children: tab })) })) })));
 });
 var ButtonWrapper$2 = styled__default["default"].div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n  margin-right: 8px;\n  width: max-content;\n  max-width: 150px;\n  @media (max-width: 900px) {\n    max-width: unset;\n  }\n"], ["\n  margin-right: 8px;\n  width: max-content;\n  max-width: 150px;\n  @media (max-width: 900px) {\n    max-width: unset;\n  }\n"])));
 var disabledStyles = react.css(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n  p {\n    color: ", ";\n    font-weight: 400;\n  },\n"], ["\n  p {\n    color: ", ";\n    font-weight: 400;\n  },\n"])), kuiBasic.theme.palette.grey.seventy);
@@ -540,7 +546,7 @@ var templateObject_1$s, templateObject_2$h;
 
 var DesktopMenuPanel = React.forwardRef(function (_a, ref) {
     var tabs = _a.tabs, variant = _a.variant, other = __rest(_a, ["tabs", "variant"]);
-    return (jsxRuntime$1.jsx(Wrapper$3, __assign({ container: true, css: variant === "white" && { background: "white" }, ref: ref }, { children: tabs.map(function (tab, index) { return (jsxRuntime$1.jsx(kuiBasic.Grid, __assign({ item: true }, { children: jsxRuntime$1.jsx(MenuItem, __assign({ tab: tab, index: index, offset: -121 }, other), tab.label) }), index)); }) })));
+    return (jsxRuntime$1.jsx(Wrapper$3, __assign({ container: true, css: variant === "white" && { background: "white" }, ref: ref }, { children: tabs.map(function (tab, index) { return (jsxRuntime$1.jsx(kuiBasic.Grid, __assign({ item: true }, { children: jsxRuntime$1.jsx(MenuItem, __assign({ tab: tab, index: index, offset: -121 }, other), tab) }), index)); }) })));
 });
 var Wrapper$3 = styled__default["default"](kuiBasic.Grid)(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n  position: sticky;\n  top: 49px;\n  left: 0;\n  z-index: 11;\n  background-color: ", ";\n  padding: 16px 16px 24px;\n  @media (max-width: 900px) {\n    justify-content: space-between;\n  }\n  @media (max-width: 765px) {\n    display: none;\n  }\n"], ["\n  position: sticky;\n  top: 49px;\n  left: 0;\n  z-index: 11;\n  background-color: ", ";\n  padding: 16px 16px 24px;\n  @media (max-width: 900px) {\n    justify-content: space-between;\n  }\n  @media (max-width: 765px) {\n    display: none;\n  }\n"])), kuiBasic.theme.palette.background.light1);
 var templateObject_1$r;
@@ -895,7 +901,7 @@ var MobileMenuPanel = React.forwardRef(function (_a, ref) {
         }, 16);
         handleClick(index);
     };
-    return (jsxRuntime$1.jsx(Wrapper, __assign({ css: variant === "white" && { background: "white" }, ref: ref }, { children: jsxRuntime$1.jsx(Swiper__default["default"], __assign({ spaceBetween: 8, slidesPerView: "auto", slideToClickedSlide: true, ref: swiperRef }, { children: tabs.map(function (tab, index) { return (jsxRuntime$1.jsx(SlideWrapper, { children: jsxRuntime$1.jsx(MenuItem, __assign({ tab: tab, index: index, handleClick: slideTo, offset: -121 }, other), tab.label) }, index)); }) })) })));
+    return (jsxRuntime$1.jsx(Wrapper, __assign({ css: variant === "white" && { background: "white" }, ref: ref }, { children: jsxRuntime$1.jsx(Swiper__default["default"], __assign({ spaceBetween: 8, slidesPerView: "auto", slideToClickedSlide: true, ref: swiperRef }, { children: tabs.map(function (tab, index) { return (jsxRuntime$1.jsx(SlideWrapper, { children: jsxRuntime$1.jsx(MenuItem, __assign({ tab: tab, index: index, handleClick: slideTo, offset: -121 }, other), tab) }, index)); }) })) })));
 });
 var Wrapper = styled__default["default"].div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n  position: sticky;\n  top: 49px;\n  left: 0;\n  z-index: 11;\n  background: ", ";\n  padding: 16px 0 24px;\n  @media (min-width: 766px) {\n    display: none;\n  }\n"], ["\n  position: sticky;\n  top: 49px;\n  left: 0;\n  z-index: 11;\n  background: ", ";\n  padding: 16px 0 24px;\n  @media (min-width: 766px) {\n    display: none;\n  }\n"])), kuiBasic.theme.palette.background.light1);
 var SlideWrapper = styled__default["default"].div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n  width: max-content !important;\n  &:first-of-type {\n    padding-left: 16px;\n  }\n"], ["\n  width: max-content !important;\n  &:first-of-type {\n    padding-left: 16px;\n  }\n"])));
@@ -944,7 +950,7 @@ var MenuPanel = React.forwardRef(function (_a, ref) {
     if (width === 0) {
         return null;
     }
-    return (jsxRuntime$1.jsxs("div", __assign({ ref: ref }, { children: [width > 765 ? (jsxRuntime$1.jsx(DesktopMenuPanel, { tabs: tabs, active: value, handleClick: handleClick, variant: variant, isScrolling: isScrolling, setIsScrolling: setIsScrolling })) : (jsxRuntime$1.jsx(MobileMenuPanel, { tabs: tabs, active: value, handleClick: handleClick, variant: variant, isScrolling: isScrolling, setIsScrolling: setIsScrolling })), tabPanels.map(function (item, index) { return (jsxRuntime$1.jsx("div", __assign({ css: index === tabPanels.length - 1 && fullHeightStyles }, { children: jsxRuntime$1.jsx(reactScroll.Element, __assign({ name: tabs[index].label, "data-index": index }, { children: item }), index) }), index)); })] })));
+    return (jsxRuntime$1.jsxs("div", __assign({ ref: ref }, { children: [width > 765 ? (jsxRuntime$1.jsx(DesktopMenuPanel, { tabs: tabs, active: value, handleClick: handleClick, variant: variant, isScrolling: isScrolling, setIsScrolling: setIsScrolling })) : (jsxRuntime$1.jsx(MobileMenuPanel, { tabs: tabs, active: value, handleClick: handleClick, variant: variant, isScrolling: isScrolling, setIsScrolling: setIsScrolling })), tabPanels.map(function (item, index) { return (jsxRuntime$1.jsx("div", __assign({ css: index === tabPanels.length - 1 && fullHeightStyles }, { children: jsxRuntime$1.jsx(reactScroll.Element, __assign({ name: tabs[index], "data-index": index }, { children: item }), index) }), index)); })] })));
 });
 MenuPanel.defaultProps = {
     variant: "grey",