kui-complex 0.0.102 → 0.0.104

package/index.d.ts

@@ -288,14 +288,14 @@ declare const TableCell: _emotion_styled.StyledComponent<{
 
 declare const TableRow: React.ForwardRefExoticComponent<Pick<React.ClassAttributes<HTMLTableRowElement> & React.HTMLAttributes<HTMLTableRowElement>, "key" | keyof React.HTMLAttributes<HTMLTableRowElement>> & React.RefAttributes<HTMLTableRowElement>>;
 
-type PopperPlacements =
-  | "right"
-  | "left"
-  | "topStart"
-  | "topMiddle"
-  | "topEnd"
-  | "bottomStart"
-  | "bottomMiddle"
+type PopperPlacements =
+  | "right"
+  | "left"
+  | "topStart"
+  | "topMiddle"
+  | "topEnd"
+  | "bottomStart"
+  | "bottomMiddle"
   | "bottomEnd"
 
 interface TooltipProps
@@ -476,7 +476,7 @@ declare type VisibilitySettings = {
     landlord: boolean;
 };
 declare type DocumentVisibilityVariants = "everybody" | "tenant" | "landlord" | "nobody";
-declare const getVisibility: ({ landlord, tenant }: VisibilitySettings) => "everybody" | "tenant" | "landlord" | "nobody";
+declare const getVisibility: ({ landlord, tenant }: VisibilitySettings) => "everybody" | "nobody" | "tenant" | "landlord";
 declare const getVisibilitySettings: (visibility?: DocumentVisibilityVariants | undefined) => {
     tenant: boolean;
     landlord: boolean;

package/index.js

@@ -139,14 +139,14 @@ var largeAvatarCSS = function (_a) {
 };
 var StyledUndefinedAvatar = styled(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: 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: 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: 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: 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 = forwardRef(function (_a, ref) {
     var index = _a.index, onClick = _a.onClick, isActive = _a.isActive, label = _a.label;
@@ -553,12 +553,12 @@ var PassportStrengthBar = forwardRef(function (_a, ref) {
 var Wrapper$2 = styled.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.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.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(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"])), theme.palette.grey.fifteenB, function (_a) {
+var StyledLinearProgress = styled(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"])), theme.palette.grey.fifteenB, function (_a) {
     var color = _a.color;
     return color;
 });
 var Description = styled(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(".");
@@ -716,11 +716,11 @@ InputWithDatePicker.defaultProps = {
 var ContentWrapper$2 = styled.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(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"])), theme.palette.background.light1, theme.palette.background.light1);
 var DayContent = styled.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(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(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 = [
     "ЯНВ",
@@ -938,11 +938,14 @@ var placementsPositions = {
 
 var PopperBase = forwardRef(function (props, ref) {
     props.placement; var open = props.open, children = props.children, spacing = props.spacing, className = props.className, style = props.style, other = __rest(props, ["placement", "open", "children", "spacing", "className", "style"]);
-    return (jsx(StyledPopperWrapper, __assign({ ref: ref, className: classNames("KUI-Popper", className), spacing: spacing, style: style }, { children: jsx(StyledPopper, __assign({ open: !!open }, other, { children: children })) })));
+    return (jsx(StyledPopperWrapper, __assign({ ref: ref, className: classNames("KUI-Popper", className), spacing: spacing, style: style, open: !!open }, { children: jsx(StyledPopper, __assign({ open: !!open }, other, { children: children })) })));
 });
-var StyledPopperWrapper = styled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n  position: absolute;\n  max-width: 215px;\n  width: max-content;\n  padding: ", ";\n  z-index: 10;\n  @media (max-width: ", "px) {\n    position: fixed;\n    bottom: 24px;\n    top: auto !important;\n    left: 16px !important;\n    width: calc(100vw - 32px);\n    max-width: unset;\n  }\n"], ["\n  position: absolute;\n  max-width: 215px;\n  width: max-content;\n  padding: ", ";\n  z-index: 10;\n  @media (max-width: ", "px) {\n    position: fixed;\n    bottom: 24px;\n    top: auto !important;\n    left: 16px !important;\n    width: calc(100vw - 32px);\n    max-width: unset;\n  }\n"])), function (_a) {
+var StyledPopperWrapper = styled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n  position: absolute;\n  max-width: 215px;\n  width: max-content;\n  padding: ", ";\n  z-index: ", ";\n  @media (max-width: ", "px) {\n    position: fixed;\n    bottom: 24px;\n    top: auto !important;\n    left: 16px !important;\n    width: calc(100vw - 32px);\n    max-width: unset;\n  }\n"], ["\n  position: absolute;\n  max-width: 215px;\n  width: max-content;\n  padding: ", ";\n  z-index: ", ";\n  @media (max-width: ", "px) {\n    position: fixed;\n    bottom: 24px;\n    top: auto !important;\n    left: 16px !important;\n    width: calc(100vw - 32px);\n    max-width: unset;\n  }\n"])), function (_a) {
     var spacing = _a.spacing;
     return spacing || 0;
+}, function (_a) {
+    var open = _a.open;
+    return (open ? 10 : -1);
 }, theme.breakpoints.xxs);
 var StyledPopper = styled.div(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n  padding: 16px;\n  border-radius: 12px;\n  background: white;\n  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);\n  transition: opacity 0.3s ease-out;\n  opacity: ", ";\n"], ["\n  padding: 16px;\n  border-radius: 12px;\n  background: white;\n  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);\n  transition: opacity 0.3s ease-out;\n  opacity: ", ";\n"])), function (_a) {
     var open = _a.open;
@@ -1084,8 +1087,8 @@ var StyledContentWrapper = styled.div(templateObject_3$5 || (templateObject_3$5
     var cursor = _a.cursor;
     return cursor;
 });
-var StyledContent$1 = styled.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.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 = forwardRef(function (props, ref) {
     var _a;
@@ -1249,7 +1252,7 @@ var rowDirectionCSS = function (_a) {
 };
 var StyledWrapper$6 = styled(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 ? theme.palette.red.fiftyP : theme.palette.grey.fifteenB;
 }, function (_a) {
@@ -1262,7 +1265,7 @@ var StyledTitle = styled(Caption)(templateObject_5$2 || (templateObject_5$2 = __
     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 = forwardRef(function (_a) {
     var height = _a.height, className = _a.className, otherProps = __rest(_a, ["height", "className"]);
@@ -1288,7 +1291,7 @@ function CreatingEntityFromDropdown(_a) {
     }
     var handleModalWrapperClick = function (e) { return e.stopPropagation(); };
     return (jsxs$1(Fragment$1, { children: [jsxs$1(StyledWrapper$4, __assign({ container: true, onClick: handleModalOpen, alignItems: "center" }, { children: [jsx(StyledPlusIcon, { width: 12, height: 12 }), jsx(Caption, __assign({ color: "fiftyP", size: "xs", weight: 500 }, { children: creatingLabel }))] })), jsx(StyledModalWrapper, __assign({ onClick: handleModalWrapperClick }, { children: renderCreatingModal({
-                    isOpen: isModalOpen,
+                    open: isModalOpen,
                     handleClose: handleModalClose,
                 }) }))] }));
 }
@@ -1337,6 +1340,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);
@@ -1349,21 +1355,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 = useForkRef(inputRef, inputRefProps);
-    return (jsxs(StyledWrapper$3, { children: [isLabelLoading && (jsx$1(StyledLoadingWrapper, { children: jsx$1(Loading, { height: "100%" }) })), jsx$1(StyledInput$2, __assign({ form: form, onInput: handleSearch, onFocus: handleOpenDropdown, name: name, disabled: disabled, ref: forwardRef, isDropdownOpen: isOpenDropdown }, inputProps, { endIcon: !disabled && (jsxs(Grid, __assign({ container: true, alignItems: "center" }, { children: [jsx$1(Box, __assign({ mr: 2 }, { children: endComponent })), inputProps.endIcon ||
-                            (!disabled && (jsx$1(HalfArrowIcon, { width: 12, height: 13, css: [
-                                    { transition: "all linear .2s" },
-                                    isOpenDropdown && { transform: "rotate(180deg)" },
-                                ] })))] }))) })), jsx$1(AutocompleteDropdown, { renderOption: renderOption, options: options, inputRef: {
+    return (jsxs(StyledWrapper$3, { children: [isLabelLoading && (jsx$1(StyledLoadingWrapper, { children: jsx$1(Loading, { height: "100%" }) })), jsx$1(StyledInput$2, __assign({ form: form, onInput: handleSearch, onFocus: handleOpenDropdown, name: name, disabled: disabled, ref: forwardRef, isDropdownOpen: isOpenDropdown }, inputProps, { endIcon: !disabled && (jsxs(Grid, __assign({ container: true, alignItems: "center", onClick: handleDropdownToggle }, { children: [jsx$1(Box, __assign({ mr: 2 }, { children: endComponent })), inputProps.endIcon ||
+                            (!disabled && (jsx$1(StyledIcon, { width: 12, height: 13, css: [isOpenDropdown && { transform: "rotate(180deg)" }] })))] }))) })), jsx$1(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 })] }));
 }
@@ -1373,7 +1378,8 @@ var StyledInput$2 = styled(InputWithController)(templateObject_3$2 || (templateO
     var isDropdownOpen = _a.isDropdownOpen;
     return (isDropdownOpen ? 0 : 1);
 });
-var templateObject_1$5, templateObject_2$3, templateObject_3$2;
+var StyledIcon = styled(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;