kui-complex 0.0.34 → 0.0.36

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.es.js CHANGED
@@ -7,7 +7,7 @@ import { jsx, jsxs as jsxs$1, Fragment as Fragment$1 } from 'react/jsx-runtime';
7
7
  import { theme, Caption, Button, Container, Grid, InputWithAdornments, Heading, IconButton, InputWithMask as InputWithMask$1, LinearProgress, Divider, Modal, Switch as Switch$1, InputWithCountryDropdown } from 'kui-basic';
8
8
  import * as React from 'react';
9
9
  import { useEffect, forwardRef, useRef, useState } from 'react';
10
- import { useHistory } from 'react-router-dom';
10
+ import { useNavigate } from 'react-router-dom';
11
11
  import { HalfArrowIcon, PrevArrowIcon, NextArrowIcon, CalendarIcon, ArrowBackIcon, ArrowNextIcon, ClosedEyeIcon, OpenEyeIcon, CheckIcon } from 'kui-icon';
12
12
  import _ from 'lodash';
13
13
  import DatePicker, { registerLocale } from 'react-datepicker';
@@ -17,6 +17,7 @@ import { scroller, Events, Link, animateScroll, Element } from 'react-scroll';
17
17
  import ru from 'date-fns/locale/ru';
18
18
  import { DateTime } from 'luxon';
19
19
  import Swiper from 'react-id-swiper';
20
+ import { useLocation } from 'react-router';
20
21
  import * as ReactDOM from 'react-dom';
21
22
  import classNames from 'classnames';
22
23
 
@@ -111,11 +112,11 @@ var templateObject_1$s, templateObject_2$e;
111
112
  var ButtonsPanel = function (_a) {
112
113
  var tabs = _a.tabs, tabPanels = _a.tabPanels, paths = _a.paths, activeTab = _a.activeTab, isSticky = _a.isSticky, onChange = _a.onChange, otherProps = __rest(_a, ["tabs", "tabPanels", "paths", "activeTab", "isSticky", "onChange"]);
113
114
  var _b = React.useState(Number(activeTab)), value = _b[0], setValue = _b[1];
114
- var history = useHistory();
115
+ var navigate = useNavigate();
115
116
  var handleChange = function (newValue) {
116
117
  setValue(newValue);
117
118
  if (paths && paths.length > 0) {
118
- history.push(paths[newValue]);
119
+ navigate(paths[newValue]);
119
120
  }
120
121
  if (onChange) {
121
122
  onChange();
@@ -259,7 +260,7 @@ var InputSelect = forwardRef(function (props, ref) {
259
260
  inputRef.current = e;
260
261
  register === null || register === void 0 ? void 0 : register.ref(e);
261
262
  };
262
- return (jsxs(Wrapper$6, { children: [jsx$1("input", { name: name, autoComplete: "off", hidden: true }), jsx$1(StyledInput, __assign({ onClick: handleOpenDropdown, readOnly: true, value: selectedLabel, errorMessage: error }, other, { endIcon: !props.disabled && (jsx$1(StyledIconWrapper, { children: jsx$1(HalfArrowIcon, __assign({ width: 12, height: 13, css: [
263
+ return (jsxs(Wrapper$6, { children: [jsx$1("input", { name: name, autoComplete: "off", hidden: true }), jsx$1(StyledInput, __assign({ onClick: handleOpenDropdown, readOnly: true, value: selectedLabel, message: error }, other, { endIcon: !props.disabled && (jsx$1(StyledIconWrapper, { children: jsx$1(HalfArrowIcon, __assign({ width: 12, height: 13, css: [
263
264
  { transition: "all linear .2s" },
264
265
  isOpenDropdown && { transform: "rotate(180deg)" },
265
266
  ] }, iconProps)) })) }, register, { ref: forwardedRef })), options && options.length > 0 && !props.disabled && (jsx$1(InputSelectDropdown, { options: options, inputRef: {
@@ -312,7 +313,7 @@ var CalendarStandardContainer = function (_a) {
312
313
  _a.arrowProps; _a.showPopperArrow; var props = __rest(_a, ["arrowProps", "showPopperArrow"]);
313
314
  return jsx(DatePickerContainer, __assign({}, props));
314
315
  };
315
- var DatePickerContainer = styled.div(templateObject_1$m || (templateObject_1$m = __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.fiftyP, theme.palette.grey.zero);
316
+ var DatePickerContainer = styled.div(templateObject_1$m || (templateObject_1$m = __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);
316
317
  var templateObject_1$m;
317
318
 
318
319
  var CalendarStandardHeader = function (_a) {
@@ -361,7 +362,7 @@ var DesktopInputWithMonthPicker = function (_a) {
361
362
  return (jsx(Wrapper$4, { children: jsx(Controller, { name: name, control: form.control, render: function (_a) {
362
363
  var _b;
363
364
  var field = _a.field, fieldState = _a.fieldState;
364
- return (jsx(DatePicker, __assign({ selected: field.value, onChange: field.onChange, disabled: disabled, customInput: jsx(InputForDatepicker, __assign({ mask: "99.9999", name: name, disabled: disabled, errorMessage: (_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 (jsx(MonthPickerHeader, __assign({}, props))); } }, datePickerProps)));
365
+ return (jsx(DatePicker, __assign({ selected: field.value, onChange: field.onChange, disabled: disabled, customInput: jsx(InputForDatepicker, __assign({ mask: "99.9999", 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 (jsx(MonthPickerHeader, __assign({}, props))); } }, datePickerProps)));
365
366
  } }) }));
366
367
  };
367
368
  var Wrapper$4 = styled.div(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n @media (max-width: 600px) {\n display: none;\n }\n"], ["\n @media (max-width: 600px) {\n display: none;\n }\n"])));
@@ -435,7 +436,7 @@ var InputWithMask = forwardRef(function (_a, ref) {
435
436
  };
436
437
  return (jsx(Controller, { control: form === null || form === void 0 ? void 0 : form.control, name: name, render: function (_a) {
437
438
  var field = _a.field, fieldState = _a.fieldState;
438
- return (jsx(InputWithMask$1, __assign({ errorMessage: getError(fieldState) }, field, inputProps, { onChange: function (e) {
439
+ return (jsx(InputWithMask$1, __assign({ message: getError(fieldState) }, field, inputProps, { onChange: function (e) {
439
440
  return handleChange(e, field);
440
441
  }, value: field.value || "", ref: function (e) { return forwardedRef(e, field); } })));
441
442
  } }));
@@ -465,7 +466,7 @@ var InputWithController = forwardRef(function (_a, ref) {
465
466
  };
466
467
  return (jsx(Controller, { control: form === null || form === void 0 ? void 0 : form.control, name: name, render: function (_a) {
467
468
  var field = _a.field, fieldState = _a.fieldState;
468
- return (jsx(InputWithAdornments, __assign({ errorMessage: getError(fieldState) }, field, inputProps, { onChange: function (e) {
469
+ return (jsx(InputWithAdornments, __assign({ message: getError(fieldState) }, field, inputProps, { onChange: function (e) {
469
470
  return handleChange(e, field);
470
471
  }, value: field.value || "", ref: function (e) { return forwardedRef(e, field); } })));
471
472
  } }));
@@ -625,7 +626,7 @@ var InputWithDatePicker = forwardRef(function (_a, ref) {
625
626
  handleModalClose();
626
627
  }
627
628
  };
628
- return (jsxs(Fragment, { children: [jsx$1(InputForDatepicker, __assign({ mask: "99.99.9999", name: name, handleCLick: handleModalOpen, value: value, onChange: handleChange, disabled: disabled, errorMessage: error, ref: ref }, props)), jsxs(Modal, __assign({ title: title, description: description, isOpen: isModalOpen, handleClose: handleModalClose }, { children: [jsx$1(ContentWrapper$1, { children: jsx$1(DatePicker, { inline: true, selected: date, onChange: function (newDate) { return setDate(newDate); }, locale: "ru", calendarContainer: StyledCalendarStandardContainer, renderCustomHeader: function (headProps) { return (jsx$1(CalendarHeaderWithSelect, __assign({ yearOptions: yearList }, headProps))); }, renderDayContents: function (day) { return (jsx$1(DayContent, { children: day })); } }) }), jsx$1(ModalFooter, { fullWidth: true, disabled: !date, onClick: acceptWithDateSelected, label: "\u041F\u043E\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044C" })] }))] }));
629
+ return (jsxs(Fragment, { children: [jsx$1(InputForDatepicker, __assign({ mask: "99.99.9999", name: name, handleCLick: handleModalOpen, value: value, onChange: handleChange, disabled: disabled, message: error, ref: ref }, props)), jsxs(Modal, __assign({ title: title, description: description, isOpen: isModalOpen, handleClose: handleModalClose }, { children: [jsx$1(ContentWrapper$1, { children: jsx$1(DatePicker, { inline: true, selected: date, onChange: function (newDate) { return setDate(newDate); }, locale: "ru", calendarContainer: StyledCalendarStandardContainer, renderCustomHeader: function (headProps) { return (jsx$1(CalendarHeaderWithSelect, __assign({ yearOptions: yearList }, headProps))); }, renderDayContents: function (day) { return (jsx$1(DayContent, { children: day })); } }) }), jsx$1(ModalFooter, { fullWidth: true, disabled: !date, onClick: acceptWithDateSelected, label: "\u041F\u043E\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044C" })] }))] }));
629
630
  });
630
631
  InputWithDatePicker.defaultProps = {
631
632
  title: "Дата рождения",
@@ -696,7 +697,7 @@ var MobileInputWithMonthPicker = function (_a) {
696
697
  field === null || field === void 0 ? void 0 : field.onChange({ target: { value: date, name: name }, type: "change" });
697
698
  handleModalClose();
698
699
  };
699
- return (jsxs$1(Wrapper$1, { children: [jsx(InputForDatepicker, __assign({ mask: "99.9999", name: name, handleCLick: handleModalOpen, value: value, onChange: handleChange, disabled: disabled, errorMessage: error, isLabelShrink: Boolean(field.value) }, props)), jsxs$1(Modal, __assign({ title: title, isOpen: isModalOpen, handleClose: handleModalClose }, { children: [jsx(ContentWrapper, { children: jsx(DatePicker, __assign({ inline: true, showMonthYearPicker: true, dateFormat: "MM.yyyy", selected: date, onChange: function (newDate) { return setDate(newDate); }, locale: ruCustom, calendarContainer: MonthPickerContainer, renderCustomHeader: function (headProps) { return (jsx(MonthPickerHeader, __assign({}, headProps))); } }, datePickerProps)) }), jsx(ModalFooter, { fullWidth: true, disabled: !date, onClick: acceptWithDateSelected, label: "\u041F\u043E\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044C" })] }))] }));
700
+ return (jsxs$1(Wrapper$1, { children: [jsx(InputForDatepicker, __assign({ mask: "99.9999", name: name, handleCLick: handleModalOpen, value: value, onChange: handleChange, disabled: disabled, message: error, isLabelShrink: Boolean(field.value) }, props)), jsxs$1(Modal, __assign({ title: title, isOpen: isModalOpen, handleClose: handleModalClose }, { children: [jsx(ContentWrapper, { children: jsx(DatePicker, __assign({ inline: true, showMonthYearPicker: true, dateFormat: "MM.yyyy", selected: date, onChange: function (newDate) { return setDate(newDate); }, locale: ruCustom, calendarContainer: MonthPickerContainer, renderCustomHeader: function (headProps) { return (jsx(MonthPickerHeader, __assign({}, headProps))); } }, datePickerProps)) }), jsx(ModalFooter, { fullWidth: true, disabled: !date, onClick: acceptWithDateSelected, label: "\u041F\u043E\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044C" })] }))] }));
700
701
  };
701
702
  var Wrapper$1 = styled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n @media (min-width: 601px) {\n display: none;\n }\n"], ["\n @media (min-width: 601px) {\n display: none;\n }\n"])));
702
703
  var ContentWrapper = styled.div(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n @media (max-width: 600px) {\n padding: 16px 16px 8px;\n }\n"], ["\n @media (max-width: 600px) {\n padding: 16px 16px 8px;\n }\n"])));
@@ -739,15 +740,16 @@ var MenuPanel = function (_a) {
739
740
  var width = useWindowWidth();
740
741
  var _b = React.useState(activeTab), value = _b[0], setValue = _b[1];
741
742
  var _c = React.useState(false), isScrolling = _c[0], setIsScrolling = _c[1];
742
- var history = useHistory();
743
+ var navigate = useNavigate();
744
+ var location = useLocation();
743
745
  var handleClick = function (index) {
744
746
  if (paths[index]) {
745
747
  setValue(index);
746
- var pathName = history.location.pathname;
747
- var currentLocation = "".concat(pathName).concat(history.location.search);
748
+ var pathName = location.pathname;
749
+ var currentLocation = "".concat(pathName).concat(location.search);
748
750
  var newLocation = "".concat(pathName).concat(paths[index]);
749
751
  if (currentLocation !== newLocation) {
750
- history.replace(newLocation);
752
+ navigate(newLocation, { replace: true });
751
753
  }
752
754
  }
753
755
  };
@@ -813,7 +815,7 @@ var InputPhoneWithForm = forwardRef(function (props, ref) {
813
815
  }
814
816
  phoneRegister.field.ref(elem);
815
817
  };
816
- return (jsx(InputWithCountryDropdown, __assign({ errorMessage: errorMessage,
818
+ return (jsx(InputWithCountryDropdown, __assign({ message: errorMessage,
817
819
  // @ts-ignore
818
820
  hiddenInputProps: __assign(__assign({}, codeRegister.field), hiddenInputProps), onSelectCountry: handleCountryChange }, phoneRegister.field, other, { onChange: handleChange, ref: forwardedRef, autoComplete: "false" })));
819
821
  });