@typeolymp/ui-components 2.1.0 → 2.1.2

package/build/components/molecules/Steps/Horizontal/styles.d.ts

@@ -1,2 +1,2 @@
 export declare const Container: any;
-export declare const Step: any;
+export declare const Dot: any;

package/build/components/organisms/Table/index.d.ts

@@ -1,7 +1,7 @@
 import { FC, ReactNode } from "react";
 export declare type ColumnType = {
     dataIndex: string;
-    title?: string;
+    title?: string | ReactNode;
     titlePopup?: string | string[];
     render?(value: any, row: any): ReactNode;
     align?: "left" | "right" | "center";

package/build/index.es.js

@@ -17894,10 +17894,10 @@ var templateObject_1$i, templateObject_2$i, templateObject_3$8;
 
 var ProgressBar = function (props) { return (jsxs(Wrapper, { children: [jsx$1(StyledProgressBar, __assign$2({}, props, { children: jsx$1(Indicator$1, __assign$2({}, props)) })), props.showInfo && (jsx$1(Paragraph, __assign$2({ size: "small" }, { children: props.info ? props.info : "".concat(props.percent, "%") })))] })); };
 
-var Container$a = styled.ol(templateObject_1$h || (templateObject_1$h = __makeTemplateObject$1(["\n  display: flex;\n  flex-wrap: wrap;\n  margin: 0;\n  padding: 0;\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  margin: 0;\n  padding: 0;\n"])));
-var Step$2 = styled.li(templateObject_2$h || (templateObject_2$h = __makeTemplateObject$1(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  text-align: center;\n\n  > div:first-child {\n    width: 32px;\n    height: 32px;\n    border-radius: 50%;\n    box-sizing: initial;\n    margin: 0 auto;\n    cursor: ", ";\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    background-color: ", ";\n    border: 10px solid ", ";\n    position: relative;\n    z-index: 1;\n  }\n\n  > div h6 {\n    color: ", ";\n  }\n\n  p {\n    color: ", ";\n  }\n\n  :not(:last-child):after {\n    content: \"\";\n    height: 4px;\n    position: relative;\n    top: ", ";\n    left: 50%;\n    background-color: ", ";\n    order: -1;\n  }\n\n  :last-child {\n    margin-top: 4px;\n  }\n"], ["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  text-align: center;\n\n  > div:first-child {\n    width: 32px;\n    height: 32px;\n    border-radius: 50%;\n    box-sizing: initial;\n    margin: 0 auto;\n    cursor: ", ";\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    background-color: ", ";\n    border: 10px solid ", ";\n    position: relative;\n    z-index: 1;\n  }\n\n  > div h6 {\n    color: ", ";\n  }\n\n  p {\n    color: ", ";\n  }\n\n  :not(:last-child):after {\n    content: \"\";\n    height: 4px;\n    position: relative;\n    top: ", ";\n    left: 50%;\n    background-color: ", ";\n    order: -1;\n  }\n\n  :last-child {\n    margin-top: 4px;\n  }\n"])), function (_a) {
+var Container$a = styled.ol(templateObject_1$h || (templateObject_1$h = __makeTemplateObject$1(["\n  display: flex;\n  justify-content: space-between;\n  gap: 20px;\n  flex-wrap: wrap;\n  margin: 0;\n  padding: 0;\n  list-style-type: none;\n  position: relative;\n\n  :after {\n    content: \"\";\n    height: 4px;\n    width: 100%;\n    background-color: ", ";\n    position: absolute;\n    top: 24px;\n    z-index: -1;\n  }\n"], ["\n  display: flex;\n  justify-content: space-between;\n  gap: 20px;\n  flex-wrap: wrap;\n  margin: 0;\n  padding: 0;\n  list-style-type: none;\n  position: relative;\n\n  :after {\n    content: \"\";\n    height: 4px;\n    width: 100%;\n    background-color: ", ";\n    position: absolute;\n    top: 24px;\n    z-index: -1;\n  }\n"])), theme.colors.lightGray.dark);
+var Dot$2 = styled.div(templateObject_2$h || (templateObject_2$h = __makeTemplateObject$1(["\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  border: 10px solid ", ";\n  cursor: ", ";\n\n  background-color: ", ";\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  :hover {\n    background-color: ", ";\n  }\n\n  > div {\n    pointer-events: none;\n  }\n"], ["\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  border: 10px solid ", ";\n  cursor: ", ";\n\n  background-color: ", ";\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  :hover {\n    background-color: ", ";\n  }\n\n  > div {\n    pointer-events: none;\n  }\n"])), theme.colors.lightGray.light, function (_a) {
     var status = _a.status;
-    return (!!status ? "pointer" : "not-allowed");
+    return status === "passed" ? "pointer" : "not-allowed";
 }, function (_a) {
     var status = _a.status;
     switch (status) {
@@ -17905,18 +17905,20 @@ var Step$2 = styled.li(templateObject_2$h || (templateObject_2$h = __makeTemplat
             return theme.colors.green.base;
         case "active":
             return theme.colors.blue.base;
-        default:
+        case "waiting":
             return theme.colors.lightGray.dark;
     }
-}, theme.colors.lightGray.light, function (_a) {
+}, function (_a) {
     var status = _a.status;
-    return status === "active"
-        ? theme.colors.lightGray.light
-        : theme.colors.darkGray.light;
-}, theme.colors.darkGray.base, function (_a) {
-    var hasTitle = _a.hasTitle;
-    return (hasTitle ? "calc(50% - 12px)" : "50%");
-}, theme.colors.lightGray.dark);
+    switch (status) {
+        case "passed":
+            return theme.colors.green.light;
+        case "active":
+            return theme.colors.blue.light;
+        case "waiting":
+            return theme.colors.lightGray.base;
+    }
+});
 var templateObject_1$h, templateObject_2$h;
 
 var Steps$2 = function (props) { return (jsx$1(Container$a, { children: props.steps.map(function (_a, index) {
@@ -17926,16 +17928,16 @@ var Steps$2 = function (props) { return (jsx$1(Container$a, { children: props.st
             ? "passed"
             : props.current === step
                 ? "active"
-                : "";
+                : "waiting";
         var onClickStep = function () {
             if (onClick && props.current >= step)
                 onClick(step);
         };
-        return (jsxs(Step$2, __assign$2({ status: status, hasTitle: !!title }, { children: [jsx$1("div", __assign$2({ onClick: onClickStep }, { children: status === "passed" ? (jsx$1(Icon, { type: "check", size: "small", color: "white" })) : (jsx$1(Heading, __assign$2({ type: "h6" }, { children: step }))) })), title && jsx$1(Paragraph, { children: title })] }), "".concat(title, "-").concat(step)));
+        return (jsxs("li", { children: [jsx$1(Dot$2, __assign$2({ status: status, onClick: onClickStep }, { children: status === "passed" ? (jsx$1(Icon, { type: "check", size: "small", color: "white" })) : (jsx$1(Heading, __assign$2({ type: "h6", color: status === "active" ? "white" : "gray" }, { children: step }))) })), title && jsx$1(Paragraph, { children: title })] }, "step-".concat(step)));
     }) })); };
 
 var Container$9 = styled.ol(templateObject_1$g || (templateObject_1$g = __makeTemplateObject$1(["\n  display: flex;\n  flex-direction: column;\n  flex-wrap: wrap;\n  margin: 0;\n  padding: 0;\n"], ["\n  display: flex;\n  flex-direction: column;\n  flex-wrap: wrap;\n  margin: 0;\n  padding: 0;\n"])));
-var Step$1 = styled.li(templateObject_2$g || (templateObject_2$g = __makeTemplateObject$1(["\n  display: flex;\n  align-items: center;\n  box-shadow: inset 0px -1px 0px ", ";\n  padding: 20px 0 20px 20px;\n  cursor: ", ";\n\n  > div:first-child {\n    width: 32px;\n    height: 32px;\n    border-radius: 50%;\n    box-sizing: initial;\n    margin-right: 10px;\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    background-color: ", ";\n  }\n\n  > div h6 {\n    color: ", ";\n  }\n\n  p {\n    color: ", ";\n  }\n\n  :hover {\n    background-color: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  box-shadow: inset 0px -1px 0px ", ";\n  padding: 20px 0 20px 20px;\n  cursor: ", ";\n\n  > div:first-child {\n    width: 32px;\n    height: 32px;\n    border-radius: 50%;\n    box-sizing: initial;\n    margin-right: 10px;\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    background-color: ", ";\n  }\n\n  > div h6 {\n    color: ", ";\n  }\n\n  p {\n    color: ", ";\n  }\n\n  :hover {\n    background-color: ", ";\n  }\n"])), theme.colors.lightGray.dark, function (_a) {
+var Step$1 = styled.li(templateObject_2$g || (templateObject_2$g = __makeTemplateObject$1(["\n  display: flex;\n  align-items: center;\n  box-shadow: inset 0px -1px 0px ", ";\n  padding: 20px 0 20px 20px;\n  cursor: ", ";\n\n  > div:first-child {\n    width: 32px;\n    height: 32px;\n    border-radius: 50%;\n    box-sizing: initial;\n    margin-right: 10px;\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    background-color: ", ";\n  }\n\n  p {\n    color: ", ";\n  }\n\n  :hover {\n    background-color: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  box-shadow: inset 0px -1px 0px ", ";\n  padding: 20px 0 20px 20px;\n  cursor: ", ";\n\n  > div:first-child {\n    width: 32px;\n    height: 32px;\n    border-radius: 50%;\n    box-sizing: initial;\n    margin-right: 10px;\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    background-color: ", ";\n  }\n\n  p {\n    color: ", ";\n  }\n\n  :hover {\n    background-color: ", ";\n  }\n"])), theme.colors.lightGray.dark, function (_a) {
     var status = _a.status;
     return (!!status ? "pointer" : "not-allowed");
 }, function (_a) {
@@ -17948,11 +17950,6 @@ var Step$1 = styled.li(templateObject_2$g || (templateObject_2$g = __makeTemplat
         default:
             return theme.colors.lightGray.dark;
     }
-}, function (_a) {
-    var status = _a.status;
-    return status === "active"
-        ? theme.colors.lightGray.light
-        : theme.colors.darkGray.light;
 }, theme.colors.darkGray.base, theme.colors.lightGray.base);
 var templateObject_1$g, templateObject_2$g;
 
@@ -17968,7 +17965,7 @@ var Steps$1 = function (props) { return (jsx$1(Container$9, { children: props.st
             if (onClick && props.current >= step)
                 onClick(step);
         };
-        return (jsxs(Step$1, __assign$2({ status: status, onClick: onClickStep }, { children: [jsx$1("div", { children: status === "passed" ? (jsx$1(Icon, { type: "check", size: "small", color: "white" })) : (jsx$1(Heading, __assign$2({ type: "h6" }, { children: step }))) }), title && jsx$1(Paragraph, { children: title })] }), "".concat(title, "-").concat(step)));
+        return (jsxs(Step$1, __assign$2({ status: status, onClick: onClickStep }, { children: [jsx$1("div", { children: status === "passed" ? (jsx$1(Icon, { type: "check", size: "small", color: "white" })) : (jsx$1(Heading, __assign$2({ type: "h6", color: status === "active" ? "white" : "gray" }, { children: step }))) }), title && jsx$1(Paragraph, { children: title })] }), "".concat(title, "-").concat(step)));
     }) })); };
 
 var Steps = function (props) {
@@ -48433,7 +48430,7 @@ var Form = forwardRef(function (props, ref) {
             }
         });
     }); };
-    return (jsxs(Fragment$1, { children: [props.title && (jsxs(Fragment$1, { children: [jsx$1(Heading, __assign$2({ type: "h4" }, { children: props.title })), jsx$1(Spacer, { vertical: 15 })] })), props.description && (jsx$1(DescriptionWrapper, { children: typeof props.description === "string" ? (jsx$1(Paragraph, __assign$2({ color: "darkGray", weight: "regular" }, { children: htmlReactParser(props.description) }))) : (props.description) })), jsx$1(FormWrapper, { children: props.fields.map(function (field, index) {
+    return (jsxs(Fragment$1, { children: [props.title && (jsxs(Fragment$1, { children: [jsx$1(Heading, __assign$2({ type: "h4" }, { children: props.title })), jsx$1(Spacer, { vertical: 15 })] })), props.description && (jsx$1(DescriptionWrapper, { children: typeof props.description === "string" ? (jsx$1(Paragraph, __assign$2({ color: "darkGray", weight: "regular" }, { children: htmlReactParser(props.description) }))) : (props.description) })), jsx$1(FormWrapper, __assign$2({ onSubmit: function (e) { return e.preventDefault(); } }, { children: props.fields.map(function (field, index) {
                     switch (field.type) {
                         case "text":
                             return (createElement(WithValidation, __assign$2({}, feedback[field.name], { key: "field-".concat(index) }),
@@ -48466,7 +48463,7 @@ var Form = forwardRef(function (props, ref) {
                             return (createElement(WithValidation, __assign$2({}, feedback[field.name], { key: "field-".concat(index) }),
                                 jsx$1(RangeField, __assign$2({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }))));
                     }
-                }) }), props.button && (jsx$1(ButtonWrapper, { children: jsx$1(Button, __assign$2({}, props.button, { onClick: onSubmit, type: "button" })) }))] }));
+                }) })), props.button && (jsx$1(ButtonWrapper, { children: jsx$1(Button, __assign$2({}, props.button, { onClick: onSubmit, type: "button" })) }))] }));
 });
 
 var Container$3 = styled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject$1(["\n  min-width: 720px;\n  width: 100%;\n  border-radius: 10px;\n  padding: 15px;\n  box-sizing: border-box;\n  border: 1px solid ", ";\n  background-color: ", ";\n  box-shadow: 0 4px 0 ", ";\n\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"], ["\n  min-width: 720px;\n  width: 100%;\n  border-radius: 10px;\n  padding: 15px;\n  box-sizing: border-box;\n  border: 1px solid ", ";\n  background-color: ", ";\n  box-shadow: 0 4px 0 ", ";\n\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"])), theme.colors.lightGray.darker, theme.colors.lightGray.base, theme.colors.lightGray.darker);
@@ -48824,7 +48821,8 @@ var Table = function (_a) {
                                 display: "flex",
                                 justifyContent: "center",
                                 marginTop: 10,
-                            } }, { children: jsx$1(Checkbox, { id: "selectAll", name: "selectAll", value: "selectAll", checked: selectedRowKeys.length > 0 && selectedRowKeys.length === data.length, onChange: onSelectAllRows }) }))), columns.map(function (_a, index) {
+                            } }, { children: jsx$1(Checkbox, { id: "selectAll", name: "selectAll", value: "selectAll", checked: selectedRowKeys.length > 0 &&
+                                    selectedRowKeys.length === data.length, onChange: onSelectAllRows }) }))), columns.map(function (_a, index) {
                             var title = _a.title, titlePopup = _a.titlePopup, dataIndex = _a.dataIndex;
                             return (jsx$1(ColumnTitle, { children: jsxs("div", __assign$2({ style: { display: "flex", alignItems: "center", gap: 5 } }, { children: [title && (jsx$1(Heading, __assign$2({ type: "h6", as: "span" }, { children: title }))), titlePopup && (jsx$1(Popup, __assign$2({ content: titlePopup }, { children: jsx$1(Icon, { type: "questionCircle", size: "tiny", color: "lightGray" }) })))] })) }, "".concat(dataIndex, "-").concat(index)));
                         })] }) }), jsx$1(TableBody, { children: data.length === 0 ? (jsx$1(TableRow, { children: jsx$1(EmptyTableCell, __assign$2({ colSpan: rowSelection ? columns.length + 1 : columns.length }, { children: jsx$1(Paragraph, __assign$2({ align: "center", size: "small", weight: "regular" }, { children: emptyText || "No data" })) })) })) : (data.map(function (row, rowIndex) { return (jsxs(TableRow, { children: [rowSelection && (jsx$1(TableCell, { children: jsx$1(Checkbox, { id: rowIndex.toString(), name: rowIndex.toString(), value: row.key, checked: selectedRowKeys.includes(row.key), onChange: onSelectRow }) }, "row-select-".concat(rowIndex))), columns.map(function (_a, colIndex) {