kui-complex 0.0.102 → 0.0.103

package/cjs/index.js

@@ -171,14 +171,14 @@ var largeAvatarCSS = function (_a) {
 };
 var StyledUndefinedAvatar = styled__default["default"](UndefinedAvatar, {
     shouldForwardProp: function (prop) { return prop !== "size"; },
-})(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), largeAvatarCSS);
+})(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), largeAvatarCSS);
 var sizeStyles = {
     xs: react.css(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n    min-width: 24px;\n    width: 24px;\n    height: 24px;\n    p {\n      font-size: 10px;\n    }\n  "], ["\n    min-width: 24px;\n    width: 24px;\n    height: 24px;\n    p {\n      font-size: 10px;\n    }\n  "]))),
     s: react.css(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n    min-width: 32px;\n    width: 32px;\n    height: 32px;\n  "], ["\n    min-width: 32px;\n    width: 32px;\n    height: 32px;\n  "]))),
     md: react.css(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n    min-width: 40px;\n    width: 40px;\n    height: 40px;\n    @media (max-width: 600px) {\n      min-width: 32px;\n      width: 32px;\n      height: 32px;\n    }\n  "], ["\n    min-width: 40px;\n    width: 40px;\n    height: 40px;\n    @media (max-width: 600px) {\n      min-width: 32px;\n      width: 32px;\n      height: 32px;\n    }\n  "]))),
     lg: react.css(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n    min-width: 80px;\n    width: 80px;\n    height: 80px;\n  "], ["\n    min-width: 80px;\n    width: 80px;\n    height: 80px;\n  "]))),
 };
-var templateObject_1$G, templateObject_2$q, templateObject_3$c, templateObject_4$6, templateObject_5$4, templateObject_6$1, templateObject_7$1, templateObject_8$1;
+var templateObject_1$G, templateObject_2$q, templateObject_3$c, templateObject_4$7, templateObject_5$4, templateObject_6$1, templateObject_7$1, templateObject_8$1;
 
 var ButtonTab = React.forwardRef(function (_a, ref) {
     var index = _a.index, onClick = _a.onClick, isActive = _a.isActive, label = _a.label;
@@ -585,12 +585,12 @@ var PassportStrengthBar = React.forwardRef(function (_a, ref) {
 var Wrapper$2 = styled__default["default"].div(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n  margin-top: 16px;\n  min-height: 86px;\n  @media (max-width: 900px) {\n    min-height: unset;\n  }\n  &.hidden {\n    opacity: 0;\n    @media (max-width: 900px) {\n      display: none;\n    }\n  }\n"], ["\n  margin-top: 16px;\n  min-height: 86px;\n  @media (max-width: 900px) {\n    min-height: unset;\n  }\n  &.hidden {\n    opacity: 0;\n    @media (max-width: 900px) {\n      display: none;\n    }\n  }\n"])));
 var ReliabilityLevelWrapper = styled__default["default"].div(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n  display: flex;\n  margin-bottom: 8px;\n"], ["\n  display: flex;\n  margin-bottom: 8px;\n"])));
 var ReliabilityLevel = styled__default["default"].div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n  width: calc(100% / 4);\n  margin-right: 16px;\n  &:last-of-type {\n    margin-right: 0;\n  }\n"], ["\n  width: calc(100% / 4);\n  margin-right: 16px;\n  &:last-of-type {\n    margin-right: 0;\n  }\n"])));
-var StyledLinearProgress = styled__default["default"](kuiBasic.LinearProgress)(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n  height: 8px;\n  border-radius: 8px;\n  background-color: ", ";\n  & .KUI-LinearProgress_bar {\n    background-color: ", ";\n    width: 102%;\n  }\n"], ["\n  height: 8px;\n  border-radius: 8px;\n  background-color: ", ";\n  & .KUI-LinearProgress_bar {\n    background-color: ", ";\n    width: 102%;\n  }\n"])), kuiBasic.theme.palette.grey.fifteenB, function (_a) {
+var StyledLinearProgress = styled__default["default"](kuiBasic.LinearProgress)(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n  height: 8px;\n  border-radius: 8px;\n  background-color: ", ";\n  & .KUI-LinearProgress_bar {\n    background-color: ", ";\n    width: 102%;\n  }\n"], ["\n  height: 8px;\n  border-radius: 8px;\n  background-color: ", ";\n  & .KUI-LinearProgress_bar {\n    background-color: ", ";\n    width: 102%;\n  }\n"])), kuiBasic.theme.palette.grey.fifteenB, function (_a) {
     var color = _a.color;
     return color;
 });
 var Description = styled__default["default"](kuiBasic.Caption)(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n  margin-top: 16px;\n  @media (max-width: 900px) {\n    margin-top: 8px;\n    font-size: 12px;\n  }\n"], ["\n  margin-top: 16px;\n  @media (max-width: 900px) {\n    margin-top: 8px;\n    font-size: 12px;\n  }\n"])));
-var templateObject_1$q, templateObject_2$h, templateObject_3$8, templateObject_4$5, templateObject_5$3;
+var templateObject_1$q, templateObject_2$h, templateObject_3$8, templateObject_4$6, templateObject_5$3;
 
 var getFormValue = function (name, form) {
     var names = name === null || name === void 0 ? void 0 : name.split(".");
@@ -748,11 +748,11 @@ InputWithDatePicker.defaultProps = {
 var ContentWrapper$2 = styled__default["default"].div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n  padding: 0px 40px 24px;\n  @media (max-width: 600px) {\n    padding: 20px 0 0;\n  }\n"], ["\n  padding: 0px 40px 24px;\n  @media (max-width: 600px) {\n    padding: 20px 0 0;\n  }\n"])));
 var StyledCalendarStandardContainer = styled__default["default"](CalendarStandardContainer)(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n  height: 410px;\n  .react-datepicker__header {\n    padding: 0 !important;\n  }\n  .react-datepicker__day-names {\n    padding: 35px 22px 0;\n    background-color: ", ";\n    border-radius: 16px 16px 0 0;\n    @media (max-width: 900px) {\n      padding: 24px 16px 0;\n    }\n  }\n  .react-datepicker__month {\n    justify-content: space-between;\n    height: calc(100% - 124px);\n    background-color: ", ";\n    border-radius: 0 0 16px 16px;\n    padding: 20px 22px 24px;\n    margin: 0 !important;\n    box-sizing: border-box;\n    @media (max-width: 900px) {\n      padding: 20px 16px 24px;\n    }\n  }\n  @media (max-width: 600px) {\n    height: auto;\n    margin-bottom: -4px;\n  }\n"], ["\n  height: 410px;\n  .react-datepicker__header {\n    padding: 0 !important;\n  }\n  .react-datepicker__day-names {\n    padding: 35px 22px 0;\n    background-color: ", ";\n    border-radius: 16px 16px 0 0;\n    @media (max-width: 900px) {\n      padding: 24px 16px 0;\n    }\n  }\n  .react-datepicker__month {\n    justify-content: space-between;\n    height: calc(100% - 124px);\n    background-color: ", ";\n    border-radius: 0 0 16px 16px;\n    padding: 20px 22px 24px;\n    margin: 0 !important;\n    box-sizing: border-box;\n    @media (max-width: 900px) {\n      padding: 20px 16px 24px;\n    }\n  }\n  @media (max-width: 600px) {\n    height: auto;\n    margin-bottom: -4px;\n  }\n"])), kuiBasic.theme.palette.background.light1, kuiBasic.theme.palette.background.light1);
 var DayContent = styled__default["default"].span(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n  padding-top: 1px;\n  font-family: Inter, sans-serif;\n  @media (max-width: 600px) {\n    font-weight: 400;\n  }\n"], ["\n  padding-top: 1px;\n  font-family: Inter, sans-serif;\n  @media (max-width: 600px) {\n    font-weight: 400;\n  }\n"])));
-var StyledModal = styled__default["default"](kuiBasic.Modal)(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n  .KUI-Modal_title {\n    font-size: 24px;\n    line-height: 32px;\n    text-align: ", ";\n  }\n  .KUI-Modal_description {\n    margin-bottom: 36px;\n  }\n"], ["\n  .KUI-Modal_title {\n    font-size: 24px;\n    line-height: 32px;\n    text-align: ", ";\n  }\n  .KUI-Modal_description {\n    margin-bottom: 36px;\n  }\n"])), function (_a) {
+var StyledModal = styled__default["default"](kuiBasic.Modal)(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n  .KUI-Modal_title {\n    font-size: 24px;\n    line-height: 32px;\n    text-align: ", ";\n  }\n  .KUI-Modal_description {\n    margin-bottom: 36px;\n  }\n"], ["\n  .KUI-Modal_title {\n    font-size: 24px;\n    line-height: 32px;\n    text-align: ", ";\n  }\n  .KUI-Modal_description {\n    margin-bottom: 36px;\n  }\n"])), function (_a) {
     var alignTitle = _a.alignTitle;
     return alignTitle || "center";
 });
-var templateObject_1$m, templateObject_2$e, templateObject_3$6, templateObject_4$4;
+var templateObject_1$m, templateObject_2$e, templateObject_3$6, templateObject_4$5;
 
 var shortMonths = [
     "ЯНВ",
@@ -1116,8 +1116,8 @@ var StyledContentWrapper = styled__default["default"].div(templateObject_3$5 ||
     var cursor = _a.cursor;
     return cursor;
 });
-var StyledContent$1 = styled__default["default"].div(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n  ", ";\n  z-index: -1;\n"], ["\n  ", ";\n  z-index: -1;\n"])), containerCSS);
-var templateObject_1$d, templateObject_2$9, templateObject_3$5, templateObject_4$3;
+var StyledContent$1 = styled__default["default"].div(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n  ", ";\n  z-index: -1;\n"], ["\n  ", ";\n  z-index: -1;\n"])), containerCSS);
+var templateObject_1$d, templateObject_2$9, templateObject_3$5, templateObject_4$4;
 
 var ButtonSelect = React.forwardRef(function (props, ref) {
     var _a;
@@ -1281,7 +1281,7 @@ var rowDirectionCSS = function (_a) {
 };
 var StyledWrapper$6 = styled__default["default"](kuiBasic.Grid, {
     shouldForwardProp: function (prop) { return prop !== "hasError" && prop !== "withTitle"; },
-})(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n  border: 1px solid\n    ", ";\n  ", ";\n"], ["\n  border: 1px solid\n    ", ";\n  ", ";\n"])), function (_a) {
+})(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n  border: 1px solid\n    ", ";\n  ", ";\n"], ["\n  border: 1px solid\n    ", ";\n  ", ";\n"])), function (_a) {
     var hasError = _a.hasError;
     return hasError ? kuiBasic.theme.palette.red.fiftyP : kuiBasic.theme.palette.grey.fifteenB;
 }, function (_a) {
@@ -1294,7 +1294,7 @@ var StyledTitle = styled__default["default"](kuiBasic.Caption)(templateObject_5$
     var direction = _a.direction;
     return (direction === "vertical" ? 8 : 0);
 });
-var templateObject_1$a, templateObject_2$7, templateObject_3$4, templateObject_4$2, templateObject_5$2;
+var templateObject_1$a, templateObject_2$7, templateObject_3$4, templateObject_4$3, templateObject_5$2;
 
 var Loading = React.forwardRef(function (_a) {
     var height = _a.height, className = _a.className, otherProps = __rest(_a, ["height", "className"]);
@@ -1320,7 +1320,7 @@ function CreatingEntityFromDropdown(_a) {
     }
     var handleModalWrapperClick = function (e) { return e.stopPropagation(); };
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(StyledWrapper$4, __assign({ container: true, onClick: handleModalOpen, alignItems: "center" }, { children: [jsxRuntime.jsx(StyledPlusIcon, { width: 12, height: 12 }), jsxRuntime.jsx(kuiBasic.Caption, __assign({ color: "fiftyP", size: "xs", weight: 500 }, { children: creatingLabel }))] })), jsxRuntime.jsx(StyledModalWrapper, __assign({ onClick: handleModalWrapperClick }, { children: renderCreatingModal({
-                    isOpen: isModalOpen,
+                    open: isModalOpen,
                     handleClose: handleModalClose,
                 }) }))] }));
 }
@@ -1369,6 +1369,9 @@ function InputWithAutocomplete(_a) {
     var handleCloseDropdown = function () {
         setIsOpenDropDown(false);
     };
+    var handleDropdownToggle = function () {
+        setIsOpenDropDown(function (prev) { return !prev; });
+    };
     var handleSelect = function (option) {
         var _a;
         onSelectItem(option);
@@ -1381,21 +1384,20 @@ function InputWithAutocomplete(_a) {
     var handleSearch = function (e) {
         if (onSearchItem) {
             onSearchItem(e.target.value);
-            form.setValue(hideName, null);
+            if (hideName)
+                form.setValue(hideName, null);
         }
         if (!e.target.value && hideName) {
-            form.setValue(hideName, null);
+            if (hideName)
+                form.setValue(hideName, null);
             form.setValue(name, null);
             onSelectItem(null);
         }
         handleOpenDropdown();
     };
     var forwardRef = kuiUtils.useForkRef(inputRef, inputRefProps);
-    return (jsxRuntime$1.jsxs(StyledWrapper$3, { children: [isLabelLoading && (jsxRuntime$1.jsx(StyledLoadingWrapper, { children: jsxRuntime$1.jsx(Loading, { height: "100%" }) })), jsxRuntime$1.jsx(StyledInput$2, __assign({ form: form, onInput: handleSearch, onFocus: handleOpenDropdown, name: name, disabled: disabled, ref: forwardRef, isDropdownOpen: isOpenDropdown }, inputProps, { endIcon: !disabled && (jsxRuntime$1.jsxs(kuiBasic.Grid, __assign({ container: true, alignItems: "center" }, { children: [jsxRuntime$1.jsx(kuiBasic.Box, __assign({ mr: 2 }, { children: endComponent })), inputProps.endIcon ||
-                            (!disabled && (jsxRuntime$1.jsx(kuiIcon.HalfArrowIcon, { width: 12, height: 13, css: [
-                                    { transition: "all linear .2s" },
-                                    isOpenDropdown && { transform: "rotate(180deg)" },
-                                ] })))] }))) })), jsxRuntime$1.jsx(AutocompleteDropdown, { renderOption: renderOption, options: options, inputRef: {
+    return (jsxRuntime$1.jsxs(StyledWrapper$3, { children: [isLabelLoading && (jsxRuntime$1.jsx(StyledLoadingWrapper, { children: jsxRuntime$1.jsx(Loading, { height: "100%" }) })), jsxRuntime$1.jsx(StyledInput$2, __assign({ form: form, onInput: handleSearch, onFocus: handleOpenDropdown, name: name, disabled: disabled, ref: forwardRef, isDropdownOpen: isOpenDropdown }, inputProps, { endIcon: !disabled && (jsxRuntime$1.jsxs(kuiBasic.Grid, __assign({ container: true, alignItems: "center", onClick: handleDropdownToggle }, { children: [jsxRuntime$1.jsx(kuiBasic.Box, __assign({ mr: 2 }, { children: endComponent })), inputProps.endIcon ||
+                            (!disabled && (jsxRuntime$1.jsx(StyledIcon, { width: 12, height: 13, css: [isOpenDropdown && { transform: "rotate(180deg)" }] })))] }))) })), jsxRuntime$1.jsx(AutocompleteDropdown, { renderOption: renderOption, options: options, inputRef: {
                     current: (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.parentElement,
                 }, isOpenDropdown: isOpenDropdown, handleCloseDropdown: handleCloseDropdown, handleSelect: handleSelect, isLoading: isLoading, handleScrollEnd: handleScrollEnd, creatingLabel: creatingLabel, renderCreatingModal: renderCreatingModal })] }));
 }
@@ -1405,7 +1407,8 @@ var StyledInput$2 = styled__default["default"](InputWithController)(templateObje
     var isDropdownOpen = _a.isDropdownOpen;
     return (isDropdownOpen ? 0 : 1);
 });
-var templateObject_1$5, templateObject_2$3, templateObject_3$2;
+var StyledIcon = styled__default["default"](kuiIcon.HalfArrowIcon)(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n  transition: all ease-out 0.3s;\n  cursor: pointer;\n"], ["\n  transition: all ease-out 0.3s;\n  cursor: pointer;\n"])));
+var templateObject_1$5, templateObject_2$3, templateObject_3$2, templateObject_4$2;
 
 function AutocompleteOption(_a) {
     var label = _a.label;