kui-complex 0.0.50 → 0.0.51

package/index.js

@@ -6,14 +6,13 @@ import { css, Global } from '@emotion/react';
 import * as React from 'react';
 import { forwardRef, useEffect, useRef, useState } from 'react';
 import { jsx, jsxs as jsxs$1, Fragment as Fragment$1 } from 'react/jsx-runtime';
-import { Caption, theme, Button, Container, Grid, InputWithAdornments, Heading, IconButton, InputWithMask as InputWithMask$1, LinearProgress, Divider, Modal, Switch as Switch$1, InputWithCountryDropdown } from 'kui-basic';
+import { Caption, theme, Button, Container, Grid, InputWithAdornments, Heading, InputWithMask as InputWithMask$1, IconButton, LinearProgress, Divider, Modal, Switch as Switch$1, InputWithCountryDropdown } from 'kui-basic';
 import { useNavigate } from 'react-router-dom';
 import { DateTime } from 'luxon';
 import { HalfArrowIcon, PrevArrowIcon, NextArrowIcon, CalendarIcon, ArrowBackIcon, ArrowNextIcon, ClosedEyeIcon, OpenEyeIcon, CheckIcon } from 'kui-icon';
 import _ from 'lodash';
 import DatePicker from 'react-datepicker';
 import { Controller, useController } from 'react-hook-form';
-import InputMask from 'react-input-mask';
 import { scroller, Events, Link, animateScroll, Element } from 'react-scroll';
 import ru from 'date-fns/locale/ru';
 import { useLocation } from 'react-router';
@@ -339,19 +338,18 @@ var StyledHeading = styled(Heading)(templateObject_2$a || (templateObject_2$a =
 var CircleButtonStyled = styled(Button)(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n  border-color: transparent !important;\n  &:disabled {\n    background-color: white !important;\n  }\n"], ["\n  border-color: transparent !important;\n  &:disabled {\n    background-color: white !important;\n  }\n"])));
 var templateObject_1$l, templateObject_2$a, templateObject_3$4;
 
-var InputForDatepicker = forwardRef(function (_a, ref) {
-    var onClick = _a.onClick, onBlur = _a.onBlur, onFocus = _a.onFocus, props = __rest(_a, ["onClick", "onBlur", "onFocus"]);
-    var onChange = props.onChange, readOnly = props.readOnly, disabled = props.disabled, mask = props.mask, handleCLick = props.handleCLick, startIcon = props.startIcon, other = __rest(props, ["onChange", "readOnly", "disabled", "mask", "handleCLick", "startIcon"]);
+var InputForDatepicker = forwardRef(function (props, ref) {
+    var onClick = props.onClick, disabled = props.disabled, handleClick = props.handleClick, startIcon = props.startIcon, other = __rest(props, ["onClick", "disabled", "handleClick", "startIcon"]);
     var handleIconClick = function () {
-        if (handleCLick) {
-            handleCLick();
+        if (handleClick) {
+            handleClick();
         }
         else {
             onClick();
         }
     };
     var Icon = function () { return (jsx(IconWrapper, __assign({ disabled: disabled, onClick: handleIconClick }, { children: startIcon || jsx(CalendarIcon, { width: 19, height: 21 }) }))); };
-    return (jsx(InputMask, __assign({ mask: mask, onChange: onChange, value: props.value, maskPlaceholder: null, alwaysShowMask: false, disabled: disabled, readOnly: readOnly, onFocus: onFocus, onBlur: onBlur }, { children: function () { return (jsx(InputWithAdornments, __assign({ onChange: onChange, disabled: disabled, value: props.value, endIcon: !startIcon && jsx(Icon, {}), startIcon: startIcon && jsx(Icon, {}) }, other, { ref: ref }))); } })));
+    return (jsx(InputWithMask$1, __assign({ disabled: disabled, endIcon: !startIcon && jsx(Icon, {}), startIcon: startIcon && jsx(Icon, {}) }, other, { ref: ref })));
 });
 var IconWrapper = styled.div(templateObject_1$k || (templateObject_1$k = __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$k;
@@ -434,14 +432,6 @@ var InputWithMask = forwardRef(function (_a, ref) {
             inputProps.onChange(e);
         }
     };
-    var forwardedRef = function (elem, field) {
-        if (ref) {
-            // eslint-disable-next-line no-param-reassign
-            // @ts-ignore
-            ref.current = elem;
-        }
-        field.ref(elem);
-    };
     var getError = function (fieldState) {
         var _a;
         return typeof error !== "undefined" && String(error).length > 0
@@ -452,7 +442,7 @@ var InputWithMask = forwardRef(function (_a, ref) {
             var field = _a.field, fieldState = _a.fieldState;
             return (jsx(InputWithMask$1, __assign({ message: getError(fieldState) }, field, inputProps, { onChange: function (e) {
                     return handleChange(e, field);
-                }, value: field.value || "", ref: function (e) { return forwardedRef(e, field); } })));
+                }, inputRef: ref })));
         } }));
 });
 
@@ -587,6 +577,31 @@ var ButtonWrapper = styled.div(templateObject_2$5 || (templateObject_2$5 = __mak
 var ButtonStyled = styled(Button)(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n  @media (max-width: 600px) {\n    width: 100%;\n  }\n"], ["\n  @media (max-width: 600px) {\n    width: 100%;\n  }\n"])));
 var templateObject_1$b, templateObject_2$5, templateObject_3$2;
 
+function setRef(ref, value) {
+    if (typeof ref === "function") {
+        ref(value);
+    }
+    else if (ref) {
+        ref.current = value;
+    }
+}
+function useForkRef() {
+    var refs = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        refs[_i] = arguments[_i];
+    }
+    return React.useMemo(function () {
+        if (refs.every(function (ref) { return ref == null; })) {
+            return null;
+        }
+        return function (instance) {
+            refs.forEach(function (ref) {
+                setRef(ref, instance);
+            });
+        };
+    }, refs);
+}
+
 var generateYearRange = function (offsetFromCurrent, maxYearCount) {
     if (!offsetFromCurrent || !maxYearCount)
         return [];
@@ -654,15 +669,8 @@ var InputWithDatePicker = forwardRef(function (_a, ref) {
     var handleDateChange = function (newDate) {
         setDate(newDate);
     };
-    var forwardedRef = function (elem) {
-        if (ref) {
-            // eslint-disable-next-line no-param-reassign
-            // @ts-ignore
-            ref.current = elem;
-        }
-        field.ref(elem);
-    };
-    return (jsxs(Fragment, { children: [jsx$1(InputForDatepicker, __assign({ mask: "99.99.9999", name: name, handleCLick: handleModalOpen, value: formattedValue || value, onChange: handleChange, disabled: disabled, message: error, ref: forwardedRef }, props)), jsxs(StyledModal, __assign({ title: title, description: description, isOpen: isModalOpen, handleClose: handleModalClose, alignTitle: alignTitle }, { children: [jsx$1(ContentWrapper$1, { children: jsx$1(DatePicker, __assign({ inline: true, selected: date || formattedDate, onChange: handleDateChange, calendarContainer: StyledCalendarStandardContainer, renderCustomHeader: function (headProps) { return (jsx$1(CalendarHeaderWithSelect, __assign({ yearOptions: yearList, max: max, min: min }, headProps))); }, renderDayContents: function (day) { return (jsx$1(DayContent, { children: day })); }, maxDate: max === null || max === void 0 ? void 0 : max.toJSDate(), minDate: min === null || min === void 0 ? void 0 : min.toJSDate() }, datePickerProps)) }), jsx$1(ModalFooter, { fullWidth: true, disabled: !formattedDate && !date, onClick: acceptWithDateSelected, label: footerLabel })] }))] }));
+    var forwardedRef = useForkRef(ref, field.ref);
+    return (jsxs(Fragment, { children: [jsx$1(InputForDatepicker, __assign({ mask: "00.00.0000", name: name, handleClick: handleModalOpen, value: formattedValue || value, onChange: handleChange, disabled: disabled, message: error, ref: forwardedRef }, props)), jsxs(StyledModal, __assign({ title: title, description: description, isOpen: isModalOpen, handleClose: handleModalClose, alignTitle: alignTitle }, { children: [jsx$1(ContentWrapper$1, { children: jsx$1(DatePicker, __assign({ inline: true, selected: date || formattedDate, onChange: handleDateChange, calendarContainer: StyledCalendarStandardContainer, renderCustomHeader: function (headProps) { return (jsx$1(CalendarHeaderWithSelect, __assign({ yearOptions: yearList, max: max, min: min }, headProps))); }, renderDayContents: function (day) { return (jsx$1(DayContent, { children: day })); }, maxDate: max === null || max === void 0 ? void 0 : max.toJSDate(), minDate: min === null || min === void 0 ? void 0 : min.toJSDate() }, datePickerProps)) }), jsx$1(ModalFooter, { fullWidth: true, disabled: !formattedDate && !date, onClick: acceptWithDateSelected, label: footerLabel })] }))] }));
 });
 InputWithDatePicker.defaultProps = {
     title: "Дата рождения",
@@ -845,29 +853,20 @@ var InputPhoneWithForm = forwardRef(function (props, ref) {
     };
     var handleChange = function (e) {
         phoneRegister.field.onChange(e);
-        if (other.onChange) {
-            other.onChange(e);
-        }
-    };
-    var forwardedRef = function (elem) {
-        if (ref) {
-            // eslint-disable-next-line no-param-reassign
-            // @ts-ignore
-            ref.current = elem;
-        }
-        phoneRegister.field.ref(elem);
-    };
-    useEffect(function () {
         if (!codeRegister.field.value) {
             codeRegister.field.onChange({
                 target: { value: "7", name: "".concat(name, ".phoneCode") },
                 type: "change",
             });
         }
-    }, []);
+        if (other.onChange) {
+            other.onChange(e);
+        }
+    };
+    var forwardedRef = useForkRef(ref, phoneRegister.field.ref);
     return (jsx(InputWithCountryDropdown, __assign({ message: errorMessage, 
         // @ts-ignore
-        hiddenInputProps: __assign(__assign(__assign({}, codeRegister.field), hiddenInputProps), { value: codeRegister.field.value || "7" }), onSelectCountry: handleCountryChange }, phoneRegister.field, other, { onChange: handleChange, ref: forwardedRef, autoComplete: "false" })));
+        hiddenInputProps: __assign(__assign({}, codeRegister.field), hiddenInputProps), onSelectCountry: handleCountryChange }, phoneRegister.field, other, { onChange: handleChange, ref: forwardedRef, autoComplete: "false" })));
 });
 InputPhoneWithForm.defaultProps = {
     name: "phone",