kui-complex 0.0.50 → 0.0.51

package/TestForm/index.js

@@ -2,8 +2,9 @@ import { jsx, jsxs as jsxs$1, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { Controller, useController, useForm } from 'react-hook-form';
 import * as yup from 'yup';
 import { yupResolver } from '@hookform/resolvers/yup';
+import * as React from 'react';
 import { forwardRef, useRef, useEffect, useState } from 'react';
-import { InputWithAdornments, Grid, theme, Caption, Divider, Button, Modal, IconButton, InputWithCountryDropdown, Switch as Switch$1, LinearProgress, InputWithMask as InputWithMask$1 } from 'kui-basic';
+import { InputWithAdornments, Grid, theme, Caption, InputWithMask as InputWithMask$1, Divider, Button, Modal, IconButton, InputWithCountryDropdown, Switch as Switch$1, LinearProgress } from 'kui-basic';
 import { jsx as jsx$1, jsxs, Fragment } from '@emotion/react/jsx-runtime';
 import styled from '@emotion/styled';
 import { HalfArrowIcon, CalendarIcon, CheckIcon, ArrowBackIcon, ArrowNextIcon, ClosedEyeIcon, OpenEyeIcon } from 'kui-icon';
@@ -11,7 +12,6 @@ import { css } from '@emotion/react';
 import DatePicker from 'react-datepicker';
 import { DateTime } from 'luxon';
 import _ from 'lodash';
-import InputMask from 'react-input-mask';
 import ru from 'date-fns/locale/ru';
 
 /******************************************************************************
@@ -225,19 +225,18 @@ var Wrapper$4 = styled.div(templateObject_1$b || (templateObject_1$b = __makeTem
 var StyledInput = styled(InputWithAdornments)(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n  cursor: pointer;\n  input,\n  label {\n    cursor: pointer !important;\n  }\n"], ["\n  cursor: pointer;\n  input,\n  label {\n    cursor: pointer !important;\n  }\n"])));
 var templateObject_1$b, templateObject_2$5;
 
-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$a || (templateObject_1$a = __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$a;
@@ -317,6 +316,31 @@ var CalendarStandardContainer = forwardRef(function (_a, ref) {
 var DatePickerContainer = styled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n  padding: 0;\n  border: none !important;\n  border-radius: 0 !important;\n  background: transparent !important;\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n  .react-datepicker__header {\n    background-color: transparent !important;\n  }\n  .react-datepicker__month-container {\n    width: 100%;\n    height: 100%;\n  }\n  .react-datepicker__day-names {\n    display: flex;\n    justify-content: space-between;\n    .react-datepicker__day-name {\n      font-family: \"Inter\", sans-serif;\n      font-weight: 600;\n      font-size: 14px;\n      color: ", ";\n      text-transform: uppercase;\n      margin: 0;\n      width: 33px;\n      line-height: normal;\n    }\n  }\n  .react-datepicker__month {\n    padding: 0;\n    margin: 20px 0 0 !important;\n    border: none;\n    width: 100%;\n    height: calc(100% - 85px);\n    .react-datepicker__week {\n      display: flex;\n      justify-content: space-between;\n    }\n  }\n  .react-datepicker__week {\n    margin-bottom: 10px;\n    &:last-of-type {\n      margin-bottom: 0;\n    }\n  }\n  .react-datepicker__day {\n    width: 33px;\n    height: 33px;\n    user-select: none;\n    border-radius: 50% !important;\n    transition: background ease-out 0.3s;\n    border: 1px solid transparent;\n    margin: 0;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    font-weight: 500;\n    font-size: 16px;\n    &:hover {\n      background: ", ";\n    }\n    &:active {\n      background: ", ";\n    }\n  }\n  .react-datepicker__day--outside-month,\n  .react-datepicker__day--disabled {\n    color: #a6aebc;\n    p {\n      color: #a6aebc;\n    }\n  }\n  .react-datepicker__day--keyboard-selected {\n    background: transparent;\n    color: inherit;\n  }\n  .react-datepicker__day--selected {\n    background: white;\n    border: 1px solid #e1e4e8;\n    color: ", ";\n    p {\n      color: ", ";\n    }\n  }\n  .react-datepicker__day--selected.warning_day {\n    border-color: ", ";\n    background-color: ", ";\n    color: ", ";\n  }\n  @media (max-width: 600px) {\n    .react-datepicker__day {\n      max-width: 48px;\n      max-height: 48px;\n      width: calc((100vw - (18px * 7)) / 7);\n      height: calc((100vw - (18px * 7)) / 7);\n    }\n    .react-datepicker__day-names {\n      .react-datepicker__day-name {\n        max-width: 48px;\n        width: calc((100vw - (18px * 7)) / 7);\n      }\n    }\n  }\n  @media (max-width: 350px) {\n    .react-datepicker__day {\n      width: calc((100vw - (6px * 7)) / 7);\n      height: calc((100vw - (6px * 7)) / 7);\n    }\n    .react-datepicker__day-names {\n      .react-datepicker__day-name {\n        width: calc((100vw - (6px * 7)) / 7);\n      }\n    }\n  }\n"], ["\n  padding: 0;\n  border: none !important;\n  border-radius: 0 !important;\n  background: transparent !important;\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n  .react-datepicker__header {\n    background-color: transparent !important;\n  }\n  .react-datepicker__month-container {\n    width: 100%;\n    height: 100%;\n  }\n  .react-datepicker__day-names {\n    display: flex;\n    justify-content: space-between;\n    .react-datepicker__day-name {\n      font-family: \"Inter\", sans-serif;\n      font-weight: 600;\n      font-size: 14px;\n      color: ", ";\n      text-transform: uppercase;\n      margin: 0;\n      width: 33px;\n      line-height: normal;\n    }\n  }\n  .react-datepicker__month {\n    padding: 0;\n    margin: 20px 0 0 !important;\n    border: none;\n    width: 100%;\n    height: calc(100% - 85px);\n    .react-datepicker__week {\n      display: flex;\n      justify-content: space-between;\n    }\n  }\n  .react-datepicker__week {\n    margin-bottom: 10px;\n    &:last-of-type {\n      margin-bottom: 0;\n    }\n  }\n  .react-datepicker__day {\n    width: 33px;\n    height: 33px;\n    user-select: none;\n    border-radius: 50% !important;\n    transition: background ease-out 0.3s;\n    border: 1px solid transparent;\n    margin: 0;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    font-weight: 500;\n    font-size: 16px;\n    &:hover {\n      background: ", ";\n    }\n    &:active {\n      background: ", ";\n    }\n  }\n  .react-datepicker__day--outside-month,\n  .react-datepicker__day--disabled {\n    color: #a6aebc;\n    p {\n      color: #a6aebc;\n    }\n  }\n  .react-datepicker__day--keyboard-selected {\n    background: transparent;\n    color: inherit;\n  }\n  .react-datepicker__day--selected {\n    background: white;\n    border: 1px solid #e1e4e8;\n    color: ", ";\n    p {\n      color: ", ";\n    }\n  }\n  .react-datepicker__day--selected.warning_day {\n    border-color: ", ";\n    background-color: ", ";\n    color: ", ";\n  }\n  @media (max-width: 600px) {\n    .react-datepicker__day {\n      max-width: 48px;\n      max-height: 48px;\n      width: calc((100vw - (18px * 7)) / 7);\n      height: calc((100vw - (18px * 7)) / 7);\n    }\n    .react-datepicker__day-names {\n      .react-datepicker__day-name {\n        max-width: 48px;\n        width: calc((100vw - (18px * 7)) / 7);\n      }\n    }\n  }\n  @media (max-width: 350px) {\n    .react-datepicker__day {\n      width: calc((100vw - (6px * 7)) / 7);\n      height: calc((100vw - (6px * 7)) / 7);\n    }\n    .react-datepicker__day-names {\n      .react-datepicker__day-name {\n        width: calc((100vw - (6px * 7)) / 7);\n      }\n    }\n  }\n"])), theme.palette.grey.fiftyP, theme.palette.background.light3, theme.palette.background.light3, theme.palette.brand.main, theme.palette.brand.main, theme.palette.grey.fifteenB, theme.palette.red.seventy, theme.palette.grey.zero);
 var templateObject_1$7;
 
+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 [];
@@ -384,15 +408,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: "Дата рождения",
@@ -526,29 +543,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",
@@ -648,14 +656,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
@@ -666,7 +666,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 })));
         } }));
 });