kui-complex 0.0.27 → 0.0.29
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.d.ts +2 -1
- package/dist/index.es.js +49 -44
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +49 -44
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -114,10 +114,10 @@ var Avatar = function (_a) {
|
|
|
114
114
|
return (jsxRuntime$1.jsx(Wrapper$7, __assign({ css: sizeStyles[size], ref: avatarRef }, otherProps, { children: imageUrl ? (jsxRuntime$1.jsx(StyledImage, { "data-testid": "avatar_image", src: imageUrl, alt: "avatar" })) : (jsxRuntime$1.jsx(StyledUndefinedAvatar, { label: fullName, avatarSize: size })) })));
|
|
115
115
|
};
|
|
116
116
|
var Wrapper$7 = styled__default["default"].div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n border-radius: 50%;\n overflow: hidden;\n cursor: pointer;\n"], ["\n border-radius: 50%;\n overflow: hidden;\n cursor: pointer;\n"])));
|
|
117
|
-
var StyledImage = styled__default["default"].img(templateObject_2$
|
|
117
|
+
var StyledImage = styled__default["default"].img(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n object-fit: cover;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n object-fit: cover;\n"])));
|
|
118
118
|
var largeAvatarCSS = function (_a) {
|
|
119
119
|
var avatarSize = _a.avatarSize;
|
|
120
|
-
return avatarSize === "lg" && react.css(templateObject_3$
|
|
120
|
+
return avatarSize === "lg" && react.css(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n font-size: 32px;\n "], ["\n font-size: 32px;\n "])));
|
|
121
121
|
};
|
|
122
122
|
var StyledUndefinedAvatar = styled__default["default"](UndefinedAvatar, {
|
|
123
123
|
shouldForwardProp: function (prop) { return prop !== "size"; },
|
|
@@ -126,7 +126,7 @@ var sizeStyles = {
|
|
|
126
126
|
s: react.css(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n width: 40px;\n height: 40px;\n @media (max-width: 600px) {\n width: 32px;\n height: 32px;\n }\n "], ["\n width: 40px;\n height: 40px;\n @media (max-width: 600px) {\n width: 32px;\n height: 32px;\n }\n "]))),
|
|
127
127
|
lg: react.css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n width: 80px;\n height: 80px;\n "], ["\n width: 80px;\n height: 80px;\n "]))),
|
|
128
128
|
};
|
|
129
|
-
var templateObject_1$s, templateObject_2$
|
|
129
|
+
var templateObject_1$s, templateObject_2$f, templateObject_3$8, templateObject_4$1, templateObject_5$1, templateObject_6;
|
|
130
130
|
|
|
131
131
|
var ButtonTab = function (_a) {
|
|
132
132
|
var index = _a.index, onClick = _a.onClick, isActive = _a.isActive, label = _a.label;
|
|
@@ -136,8 +136,8 @@ var ButtonTab = function (_a) {
|
|
|
136
136
|
return (jsxRuntime$1.jsx(StyledButton, __assign({ variant: isActive ? "orange" : "white", captionWeight: isActive ? 600 : 400, onClick: handleClick, css: !isActive && inactiveStyles, size: "s" }, { children: label })));
|
|
137
137
|
};
|
|
138
138
|
var StyledButton = styled__default["default"](kuiBasic.Button)(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n margin-right: 24px;\n &:last-of-type {\n margin-right: 0;\n }\n"], ["\n margin-right: 24px;\n &:last-of-type {\n margin-right: 0;\n }\n"])));
|
|
139
|
-
var inactiveStyles = react.css(templateObject_2$
|
|
140
|
-
var templateObject_1$r, templateObject_2$
|
|
139
|
+
var inactiveStyles = react.css(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n p {\n color: ", ";\n }\n"], ["\n p {\n color: ", ";\n }\n"])), kuiBasic.theme.palette.grey.seventy);
|
|
140
|
+
var templateObject_1$r, templateObject_2$e;
|
|
141
141
|
|
|
142
142
|
var ButtonsPanel = function (_a) {
|
|
143
143
|
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"]);
|
|
@@ -161,8 +161,8 @@ ButtonsPanel.defaultProps = {
|
|
|
161
161
|
isSticky: false,
|
|
162
162
|
};
|
|
163
163
|
var Content = styled__default["default"].div(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n height: 100%;\n"], ["\n height: 100%;\n"])));
|
|
164
|
-
var StyledContainer$1 = styled__default["default"].div(templateObject_2$
|
|
165
|
-
var templateObject_1$q, templateObject_2$
|
|
164
|
+
var StyledContainer$1 = styled__default["default"].div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n background: ", ";\n top: 80px;\n z-index: 4;\n padding-top: 16px;\n padding-bottom: 24px;\n @media (max-width: 1200px) {\n padding-bottom: 18px;\n }\n @media (max-width: 600px) {\n top: 48px;\n }\n"], ["\n background: ", ";\n top: 80px;\n z-index: 4;\n padding-top: 16px;\n padding-bottom: 24px;\n @media (max-width: 1200px) {\n padding-bottom: 18px;\n }\n @media (max-width: 600px) {\n top: 48px;\n }\n"])), kuiBasic.theme.palette.grey.zero);
|
|
165
|
+
var templateObject_1$q, templateObject_2$d;
|
|
166
166
|
|
|
167
167
|
var dropdownStyles = function (_a) {
|
|
168
168
|
var isOpen = _a.isOpen;
|
|
@@ -222,9 +222,9 @@ var InputSelectDropdown = function (_a) {
|
|
|
222
222
|
} }, { children: options.map(function (option, key) { return (jsxRuntime$1.jsx(OptionWrapper, __assign({ onClick: function () { return handleSelect(option); }, "data-value": "autocomplete_option_".concat(option.value), "data-testid": "autocomplete_option_".concat(key) }, { children: jsxRuntime$1.jsx(StyledOption, __assign({ css: selectedValue === option.value && selectedStyles }, { children: jsxRuntime$1.jsx(kuiBasic.Caption, __assign({ size: "sm", weight: 500 }, { children: option.label })) })) }), option.label)); }) })));
|
|
223
223
|
};
|
|
224
224
|
var OptionWrapper = styled__default["default"].div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n width: 100%;\n padding: 2px 0;\n cursor: pointer;\n"], ["\n width: 100%;\n padding: 2px 0;\n cursor: pointer;\n"])));
|
|
225
|
-
var StyledOption = styled__default["default"].div(templateObject_2$
|
|
226
|
-
var selectedStyles = react.css(templateObject_3$
|
|
227
|
-
var templateObject_1$o, templateObject_2$
|
|
225
|
+
var StyledOption = styled__default["default"].div(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n padding: 8px;\n transition: all ease-out 0.3s;\n border-radius: 4px;\n &:hover {\n background-color: ", ";\n }\n"], ["\n padding: 8px;\n transition: all ease-out 0.3s;\n border-radius: 4px;\n &:hover {\n background-color: ", ";\n }\n"])), kuiBasic.theme.palette.background.light1);
|
|
226
|
+
var selectedStyles = react.css(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), kuiBasic.theme.palette.background.light1);
|
|
227
|
+
var templateObject_1$o, templateObject_2$c, templateObject_3$7;
|
|
228
228
|
|
|
229
229
|
var getFormValue = function (name, form) {
|
|
230
230
|
var names = name === null || name === void 0 ? void 0 : name.split(".");
|
|
@@ -298,9 +298,9 @@ var InputSelect = React.forwardRef(function (props, ref) {
|
|
|
298
298
|
}, isOpenDropdown: isOpenDropdown, handleCloseDropdown: handleCloseDropdown, handleSelect: handleSelect, selectedValue: value }))] }));
|
|
299
299
|
});
|
|
300
300
|
var Wrapper$6 = styled__default["default"].div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n position: relative;\n text-align: left;\n width: fit-content;\n"], ["\n position: relative;\n text-align: left;\n width: fit-content;\n"])));
|
|
301
|
-
var StyledInput = styled__default["default"](kuiBasic.InputWithAdornments)(templateObject_2$
|
|
302
|
-
var StyledIconWrapper = styled__default["default"].div(templateObject_3$
|
|
303
|
-
var templateObject_1$n, templateObject_2$
|
|
301
|
+
var StyledInput = styled__default["default"](kuiBasic.InputWithAdornments)(templateObject_2$b || (templateObject_2$b = __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"])));
|
|
302
|
+
var StyledIconWrapper = styled__default["default"].div(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n padding-right: 8px;\n padding-bottom: 4px;\n"], ["\n padding-right: 8px;\n padding-bottom: 4px;\n"])));
|
|
303
|
+
var templateObject_1$n, templateObject_2$b, templateObject_3$6;
|
|
304
304
|
|
|
305
305
|
var SelectYear = function (_a) {
|
|
306
306
|
var yearOptions = _a.yearOptions; _a.options; var props = __rest(_a, ["yearOptions", "options"]);
|
|
@@ -352,9 +352,9 @@ var CalendarStandardHeader = function (_a) {
|
|
|
352
352
|
return (jsxRuntime.jsxs(HeaderWrapper, __assign({ container: true, alignItems: "center", justify: "space-between" }, { children: [jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true }, { children: jsxRuntime.jsx(StyledHeading, __assign({ size: "h4" }, { children: title })) })), jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true }, { children: jsxRuntime.jsxs(kuiBasic.Grid, __assign({ container: true, spacing: 2 }, { children: [jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true }, { children: jsxRuntime.jsx(CircleButtonStyled, __assign({ isCircle: true, size: "xs", "data-testid": "prev_month_button", variant: "white", disabled: prevMonthButtonDisabled, onClick: decreaseMonth }, { children: jsxRuntime.jsx(kuiIcon.PrevArrowIcon, { width: 10, height: 10 }) })) })), jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true }, { children: jsxRuntime.jsx(CircleButtonStyled, __assign({ isCircle: true, size: "xs", variant: "white", disabled: nextMonthButtonDisabled, onClick: increaseMonth }, { children: jsxRuntime.jsx(kuiIcon.NextArrowIcon, { width: 10, height: 10 }) })) }))] })) }))] })));
|
|
353
353
|
};
|
|
354
354
|
var HeaderWrapper = styled__default["default"](kuiBasic.Grid)(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n padding: 0 6px 34px;\n @media (max-width: 600px) {\n h2 {\n font-size: 16px;\n }\n }\n"], ["\n padding: 0 6px 34px;\n @media (max-width: 600px) {\n h2 {\n font-size: 16px;\n }\n }\n"])));
|
|
355
|
-
var StyledHeading = styled__default["default"](kuiBasic.Heading)(templateObject_2$
|
|
356
|
-
var CircleButtonStyled = styled__default["default"](kuiBasic.Button)(templateObject_3$
|
|
357
|
-
var templateObject_1$k, templateObject_2$
|
|
355
|
+
var StyledHeading = styled__default["default"](kuiBasic.Heading)(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n @media (max-width: 600px) {\n font-weight: 700;\n }\n"], ["\n @media (max-width: 600px) {\n font-weight: 700;\n }\n"])));
|
|
356
|
+
var CircleButtonStyled = styled__default["default"](kuiBasic.Button)(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n border-color: transparent !important;\n &:disabled {\n background-color: white !important;\n }\n"], ["\n border-color: transparent !important;\n &:disabled {\n background-color: white !important;\n }\n"])));
|
|
357
|
+
var templateObject_1$k, templateObject_2$a, templateObject_3$5;
|
|
358
358
|
|
|
359
359
|
var InputForDatepicker = React.forwardRef(function (_a, ref) {
|
|
360
360
|
var onClick = _a.onClick, onBlur = _a.onBlur, onFocus = _a.onFocus, props = __rest(_a, ["onClick", "onBlur", "onFocus"]);
|
|
@@ -384,8 +384,8 @@ var MonthPickerHeader = function (_a) {
|
|
|
384
384
|
return (jsxRuntime.jsxs(StyledHeader, __assign({ container: true, alignItems: "center", justify: "space-between" }, { children: [jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true }, { children: jsxRuntime.jsx(StyledIconButton, __assign({ disabled: prevYearButtonDisabled, onClick: decreaseYear }, { children: jsxRuntime.jsx(kuiIcon.ArrowBackIcon, { width: 14, height: 12 }) })) })), jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true }, { children: jsxRuntime.jsx(kuiBasic.Caption, __assign({ size: "sm", weight: 600 }, { children: date.getFullYear() })) })), jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true }, { children: jsxRuntime.jsx(StyledIconButton, __assign({ disabled: nextYearButtonDisabled, onClick: increaseYear }, { children: jsxRuntime.jsx(kuiIcon.ArrowNextIcon, { width: 14, height: 12 }) })) }))] })));
|
|
385
385
|
};
|
|
386
386
|
var StyledIconButton = styled__default["default"](kuiBasic.IconButton)(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n height: 36px;\n &:disabled {\n opacity: 0;\n }\n"], ["\n height: 36px;\n &:disabled {\n opacity: 0;\n }\n"])));
|
|
387
|
-
var StyledHeader = styled__default["default"](kuiBasic.Grid)(templateObject_2$
|
|
388
|
-
var templateObject_1$h, templateObject_2$
|
|
387
|
+
var StyledHeader = styled__default["default"](kuiBasic.Grid)(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n background: #fff;\n padding: 4px 16px;\n border-radius: 12px 12px 0 0;\n"], ["\n background: #fff;\n padding: 4px 16px;\n border-radius: 12px 12px 0 0;\n"])));
|
|
388
|
+
var templateObject_1$h, templateObject_2$9;
|
|
389
389
|
|
|
390
390
|
var DesktopInputWithMonthPicker = function (_a) {
|
|
391
391
|
var name = _a.name, form = _a.form, disabled = _a.disabled, datePickerProps = _a.datePickerProps, otherProps = __rest(_a, ["name", "form", "disabled", "datePickerProps"]);
|
|
@@ -432,8 +432,8 @@ var MenuItem = function (_a) {
|
|
|
432
432
|
return (jsxRuntime$1.jsx(reactScroll.Link, __assign({ to: tab.label, spy: true, smooth: true, duration: 500, offset: offset, onSetActive: handleSelect }, { children: jsxRuntime$1.jsx(ButtonWrapper$1, { children: jsxRuntime$1.jsx(kuiBasic.Button, __assign({ variant: Number(active) === index ? "orange" : "transparentWithBorder", size: "xs", css: Number(active) !== index && disabledStyles }, { children: tab.label })) }) })));
|
|
433
433
|
};
|
|
434
434
|
var ButtonWrapper$1 = styled__default["default"].div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n margin-right: 8px;\n width: max-content;\n max-width: 150px;\n @media (max-width: 900px) {\n max-width: unset;\n }\n"], ["\n margin-right: 8px;\n width: max-content;\n max-width: 150px;\n @media (max-width: 900px) {\n max-width: unset;\n }\n"])));
|
|
435
|
-
var disabledStyles = react.css(templateObject_2$
|
|
436
|
-
var templateObject_1$f, templateObject_2$
|
|
435
|
+
var disabledStyles = react.css(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n p {\n color: ", ";\n font-weight: 400;\n },\n"], ["\n p {\n color: ", ";\n font-weight: 400;\n },\n"])), kuiBasic.theme.palette.grey.seventy);
|
|
436
|
+
var templateObject_1$f, templateObject_2$8;
|
|
437
437
|
|
|
438
438
|
var DesktopMenuPanel = function (_a) {
|
|
439
439
|
var tabs = _a.tabs, variant = _a.variant, other = __rest(_a, ["tabs", "variant"]);
|
|
@@ -531,14 +531,14 @@ var PassportStrengthBar = function (_a) {
|
|
|
531
531
|
return (jsxRuntime$1.jsxs(Wrapper$2, __assign({ "data-testid": "strength_bar", className: String(!strength && "hidden") }, { children: [jsxRuntime$1.jsx(ReliabilityLevelWrapper, { children: Object.keys(strengthCoefficients).map(function (item, key) { return (jsxRuntime$1.jsx(ReliabilityLevel, { children: jsxRuntime$1.jsx(StyledLinearProgress, { "data-testid": "progress_item_".concat(item), value: strengthKey >= key ? 100 : 0, color: color }) }, item)); }) }), jsxRuntime$1.jsx(kuiBasic.Caption, __assign({ "data-testid": "strength_bar_explanation", size: "s", css: { color: color } }, { children: strength && strengthTexts[strength] })), jsxRuntime$1.jsx(Description, __assign({ size: "s", color: "fiftyP" }, { children: "\u041F\u0430\u0440\u043E\u043B\u044C \u0434\u043E\u043B\u0436\u0435\u043D \u0441\u043E\u0441\u0442\u043E\u044F\u0442\u044C \u0438\u0437 10 \u0441\u0438\u043C\u0432\u043E\u043B\u043E\u0432, \u0441\u043E\u0434\u0435\u0440\u0436\u0430\u0442\u044C \u0446\u0438\u0444\u0440\u044B, \u0431\u043E\u043B\u044C\u0448\u0438\u0435 \u0438 \u0441\u0442\u0440\u043E\u0447\u043D\u044B\u0435 \u043B\u0430\u0442\u0438\u043D\u0441\u043A\u0438\u0435 \u0431\u0443\u0432\u044B" }))] })));
|
|
532
532
|
};
|
|
533
533
|
var Wrapper$2 = styled__default["default"].div(templateObject_1$d || (templateObject_1$d = __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"])));
|
|
534
|
-
var ReliabilityLevelWrapper = styled__default["default"].div(templateObject_2$
|
|
535
|
-
var ReliabilityLevel = styled__default["default"].div(templateObject_3$
|
|
534
|
+
var ReliabilityLevelWrapper = styled__default["default"].div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n display: flex;\n margin-bottom: 8px;\n"], ["\n display: flex;\n margin-bottom: 8px;\n"])));
|
|
535
|
+
var ReliabilityLevel = styled__default["default"].div(templateObject_3$4 || (templateObject_3$4 = __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"])));
|
|
536
536
|
var StyledLinearProgress = styled__default["default"](kuiBasic.LinearProgress)(templateObject_4 || (templateObject_4 = __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) {
|
|
537
537
|
var color = _a.color;
|
|
538
538
|
return color;
|
|
539
539
|
});
|
|
540
540
|
var Description = styled__default["default"](kuiBasic.Caption)(templateObject_5 || (templateObject_5 = __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"])));
|
|
541
|
-
var templateObject_1$d, templateObject_2$
|
|
541
|
+
var templateObject_1$d, templateObject_2$7, templateObject_3$4, templateObject_4, templateObject_5;
|
|
542
542
|
|
|
543
543
|
var isValidWithMaskExp = /^[^_]+$/;
|
|
544
544
|
var simplePasswordRegExp = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*]).{10,}$/;
|
|
@@ -587,8 +587,8 @@ var templateObject_1$c;
|
|
|
587
587
|
|
|
588
588
|
var InputTextAreaMobile = function (props) { return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InputWrapper, { children: jsxRuntime.jsx(InputWithController, __assign({}, props)) }), jsxRuntime.jsx(TextAreaWrapper, { children: jsxRuntime.jsx(InputWithController, __assign({ isTextArea: true }, props)) })] })); };
|
|
589
589
|
var InputWrapper = styled__default["default"].div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n @media (max-width: 900px) {\n display: none;\n }\n"], ["\n @media (max-width: 900px) {\n display: none;\n }\n"])));
|
|
590
|
-
var TextAreaWrapper = styled__default["default"].div(templateObject_2$
|
|
591
|
-
var templateObject_1$b, templateObject_2$
|
|
590
|
+
var TextAreaWrapper = styled__default["default"].div(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n @media (min-width: 901px) {\n display: none;\n }\n"], ["\n @media (min-width: 901px) {\n display: none;\n }\n"])));
|
|
591
|
+
var templateObject_1$b, templateObject_2$6;
|
|
592
592
|
|
|
593
593
|
var useToggle = function (isModalOpen) {
|
|
594
594
|
if (isModalOpen === void 0) { isModalOpen = false; }
|
|
@@ -607,9 +607,9 @@ var ModalFooter = function (_a) {
|
|
|
607
607
|
return (jsxRuntime.jsxs(StyledFooter, { children: [jsxRuntime.jsx(kuiBasic.Divider, {}), jsxRuntime.jsx(ButtonWrapper, { children: button || (jsxRuntime.jsx(ButtonStyled, __assign({ fullWidth: true, size: "s", endIcon: jsxRuntime.jsx(kuiIcon.CheckIcon, {}) }, otherProps, { children: label }))) })] }));
|
|
608
608
|
};
|
|
609
609
|
var StyledFooter = styled__default["default"].div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n background: ", ";\n border-radius: 0 0 12px 12px;\n z-index: 10;\n position: sticky;\n bottom: 0;\n left: 0;\n"], ["\n background: ", ";\n border-radius: 0 0 12px 12px;\n z-index: 10;\n position: sticky;\n bottom: 0;\n left: 0;\n"])), kuiBasic.theme.palette.grey.zero);
|
|
610
|
-
var ButtonWrapper = styled__default["default"].div(templateObject_2$
|
|
611
|
-
var ButtonStyled = styled__default["default"](kuiBasic.Button)(templateObject_3$
|
|
612
|
-
var templateObject_1$a, templateObject_2$
|
|
610
|
+
var ButtonWrapper = styled__default["default"].div(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n display: flex;\n justify-content: flex-end;\n padding: 24px 40px;\n @media (max-width: 600px) {\n padding: 24px 16px;\n }\n"], ["\n display: flex;\n justify-content: flex-end;\n padding: 24px 40px;\n @media (max-width: 600px) {\n padding: 24px 16px;\n }\n"])));
|
|
611
|
+
var ButtonStyled = styled__default["default"](kuiBasic.Button)(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n @media (max-width: 600px) {\n width: 100%;\n }\n"], ["\n @media (max-width: 600px) {\n width: 100%;\n }\n"])));
|
|
612
|
+
var templateObject_1$a, templateObject_2$5, templateObject_3$3;
|
|
613
613
|
|
|
614
614
|
DatePicker.registerLocale("ru", ru__default["default"]);
|
|
615
615
|
var generateYearRange = function (offsetFromCurrent, maxYearCount) {
|
|
@@ -664,9 +664,9 @@ InputWithDatePicker.defaultProps = {
|
|
|
664
664
|
yearParams: { min: 18, max: 120 },
|
|
665
665
|
};
|
|
666
666
|
var ContentWrapper$1 = styled__default["default"].div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n padding: 36px 40px 24px;\n @media (max-width: 600px) {\n padding: 20px 0 0;\n }\n"], ["\n padding: 36px 40px 24px;\n @media (max-width: 600px) {\n padding: 20px 0 0;\n }\n"])));
|
|
667
|
-
var StyledCalendarStandardContainer = styled__default["default"](CalendarStandardContainer)(templateObject_2$
|
|
668
|
-
var DayContent = styled__default["default"].span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n padding-top: 1px;\n @media (max-width: 600px) {\n font-weight: 400;\n }\n"], ["\n padding-top: 1px;\n @media (max-width: 600px) {\n font-weight: 400;\n }\n"])));
|
|
669
|
-
var templateObject_1$9, templateObject_2$
|
|
667
|
+
var StyledCalendarStandardContainer = styled__default["default"](CalendarStandardContainer)(templateObject_2$4 || (templateObject_2$4 = __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);
|
|
668
|
+
var DayContent = styled__default["default"].span(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n padding-top: 1px;\n @media (max-width: 600px) {\n font-weight: 400;\n }\n"], ["\n padding-top: 1px;\n @media (max-width: 600px) {\n font-weight: 400;\n }\n"])));
|
|
669
|
+
var templateObject_1$9, templateObject_2$4, templateObject_3$2;
|
|
670
670
|
|
|
671
671
|
var shortMonths = [
|
|
672
672
|
"ЯНВ",
|
|
@@ -730,8 +730,8 @@ var MobileInputWithMonthPicker = function (_a) {
|
|
|
730
730
|
return (jsxRuntime.jsxs(Wrapper$1, { children: [jsxRuntime.jsx(InputForDatepicker, __assign({ mask: "99.9999", name: name, handleCLick: handleModalOpen, value: value, onChange: handleChange, disabled: disabled, errorMessage: error, isLabelShrink: Boolean(field.value) }, props)), jsxRuntime.jsxs(kuiBasic.Modal, __assign({ title: title, isOpen: isModalOpen, handleClose: handleModalClose }, { children: [jsxRuntime.jsx(ContentWrapper, { children: jsxRuntime.jsx(DatePicker__default["default"], __assign({ inline: true, showMonthYearPicker: true, dateFormat: "MM.yyyy", selected: date, onChange: function (newDate) { return setDate(newDate); }, locale: ruCustom, calendarContainer: MonthPickerContainer, renderCustomHeader: function (headProps) { return (jsxRuntime.jsx(MonthPickerHeader, __assign({}, headProps))); } }, datePickerProps)) }), jsxRuntime.jsx(ModalFooter, { fullWidth: true, disabled: !date, onClick: acceptWithDateSelected, label: "\u041F\u043E\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044C" })] }))] }));
|
|
731
731
|
};
|
|
732
732
|
var Wrapper$1 = styled__default["default"].div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n @media (min-width: 601px) {\n display: none;\n }\n"], ["\n @media (min-width: 601px) {\n display: none;\n }\n"])));
|
|
733
|
-
var ContentWrapper = styled__default["default"].div(templateObject_2$
|
|
734
|
-
var templateObject_1$8, templateObject_2$
|
|
733
|
+
var ContentWrapper = styled__default["default"].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"])));
|
|
734
|
+
var templateObject_1$8, templateObject_2$3;
|
|
735
735
|
|
|
736
736
|
var InputWithMonthPicker = function (props) { return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(DesktopInputWithMonthPicker, __assign({}, props)), jsxRuntime.jsx(MobileInputWithMonthPicker, __assign({}, props))] })); };
|
|
737
737
|
|
|
@@ -748,8 +748,8 @@ var MobileMenuPanel = function (_a) {
|
|
|
748
748
|
return (jsxRuntime$1.jsx(Wrapper, __assign({ css: variant === "white" && { background: "white" } }, { children: jsxRuntime$1.jsx(Swiper__default["default"], __assign({ spaceBetween: 8, slidesPerView: "auto", slideToClickedSlide: true, ref: swiperRef }, { children: tabs.map(function (tab, index) { return (jsxRuntime$1.jsx(SlideWrapper, { children: jsxRuntime$1.jsx(MenuItem, __assign({ tab: tab, index: index, handleClick: slideTo, offset: -121 }, other), tab.label) }, index)); }) })) })));
|
|
749
749
|
};
|
|
750
750
|
var Wrapper = styled__default["default"].div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n position: sticky;\n top: 49px;\n left: 0;\n z-index: 11;\n background: ", ";\n padding: 16px 0 24px;\n @media (min-width: 766px) {\n display: none;\n }\n"], ["\n position: sticky;\n top: 49px;\n left: 0;\n z-index: 11;\n background: ", ";\n padding: 16px 0 24px;\n @media (min-width: 766px) {\n display: none;\n }\n"])), kuiBasic.theme.palette.background.light1);
|
|
751
|
-
var SlideWrapper = styled__default["default"].div(templateObject_2$
|
|
752
|
-
var templateObject_1$7, templateObject_2$
|
|
751
|
+
var SlideWrapper = styled__default["default"].div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n width: max-content !important;\n &:first-of-type {\n padding-left: 16px;\n }\n"], ["\n width: max-content !important;\n &:first-of-type {\n padding-left: 16px;\n }\n"])));
|
|
752
|
+
var templateObject_1$7, templateObject_2$2;
|
|
753
753
|
|
|
754
754
|
var useWindowWidth = function (time) {
|
|
755
755
|
if (time === void 0) { time = 10; }
|
|
@@ -938,16 +938,17 @@ var Popper = React.forwardRef(function (props, ref) {
|
|
|
938
938
|
// TODO подумать как реализовать правильное расположение подсказки под contentRef в зависимости от placement
|
|
939
939
|
// Автоматом менять положение (верх-низ) в зависимости от того помещается или нет
|
|
940
940
|
// Распожить стрелочку к контенту посередине контента
|
|
941
|
-
return ReactDOM__namespace.createPortal(jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(react.Global, { styles: react.css(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n body {\n position: relative;\n }\n "], ["\n body {\n position: relative;\n }\n "]))) }), jsxRuntime.jsx(
|
|
941
|
+
return ReactDOM__namespace.createPortal(jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(react.Global, { styles: react.css(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n body {\n position: relative;\n }\n "], ["\n body {\n position: relative;\n }\n "]))) }), jsxRuntime.jsx(StyledPopperWrapper, __assign({ ref: forwardedRef, style: position, className: "KUI-Popper" }, { children: jsxRuntime.jsx(StyledPopper, __assign({ open: !!open }, other, { children: children })) }))] }), document.body);
|
|
942
942
|
});
|
|
943
|
-
var
|
|
943
|
+
var StyledPopperWrapper = styled__default["default"].div(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n position: absolute;\n max-width: 215px;\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 @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"])), kuiBasic.theme.breakpoints.xxs);
|
|
944
|
+
var StyledPopper = styled__default["default"].div(templateObject_3$1 || (templateObject_3$1 = __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) {
|
|
944
945
|
var open = _a.open;
|
|
945
946
|
return (open ? 1 : 0);
|
|
946
|
-
}
|
|
947
|
-
var templateObject_1$2, templateObject_2;
|
|
947
|
+
});
|
|
948
|
+
var templateObject_1$2, templateObject_2$1, templateObject_3$1;
|
|
948
949
|
|
|
949
950
|
var Tooltip = React.forwardRef(function (props, ref) {
|
|
950
|
-
var content = props.content, onOpen = props.onOpen, onClose = props.onClose, open = props.open, children = props.children, popper = __rest(props, ["content", "onOpen", "onClose", "open", "children"]);
|
|
951
|
+
var content = props.content, onOpen = props.onOpen, onClose = props.onClose, open = props.open, children = props.children, cursor = props.cursor, popper = __rest(props, ["content", "onOpen", "onClose", "open", "children", "cursor"]);
|
|
951
952
|
var _a = React.useState(open), isOpen = _a[0], setOpen = _a[1];
|
|
952
953
|
var elemRef = React.useRef(null);
|
|
953
954
|
var handleOpen = function () {
|
|
@@ -965,11 +966,15 @@ var Tooltip = React.forwardRef(function (props, ref) {
|
|
|
965
966
|
React.useEffect(function () {
|
|
966
967
|
setOpen(open);
|
|
967
968
|
}, [open]);
|
|
968
|
-
|
|
969
|
-
|
|
969
|
+
return (jsxRuntime.jsxs(StyledWrapper, __assign({ onMouseLeave: handleClose, ref: ref }, { children: [jsxRuntime.jsx(StyledContentWrapper, __assign({ onMouseEnter: handleOpen, onTouchEnd: handleOpen, ref: elemRef, cursor: cursor }, { children: jsxRuntime.jsx(StyledContent, { children: children }) })), jsxRuntime.jsx(Popper, __assign({ open: isOpen }, popper, { contentRef: elemRef }, { children: content }))] })));
|
|
970
|
+
});
|
|
971
|
+
var StyledWrapper = styled__default["default"].div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n display: inline-flex;\n width: fit-content;\n height: fit-content;\n"], ["\n display: inline-flex;\n width: fit-content;\n height: fit-content;\n"])));
|
|
972
|
+
var StyledContentWrapper = styled__default["default"](StyledWrapper)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n cursor: ", ";\n"], ["\n cursor: ", ";\n"])), function (_a) {
|
|
973
|
+
var cursor = _a.cursor;
|
|
974
|
+
return cursor;
|
|
970
975
|
});
|
|
971
|
-
var
|
|
972
|
-
var templateObject_1$1;
|
|
976
|
+
var StyledContent = styled__default["default"](StyledWrapper)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n z-index: -1;\n"], ["\n z-index: -1;\n"])));
|
|
977
|
+
var templateObject_1$1, templateObject_2, templateObject_3;
|
|
973
978
|
|
|
974
979
|
var ButtonSelect = React.forwardRef(function (props, ref) {
|
|
975
980
|
var _a;
|