kui-complex 0.0.67 → 0.0.69
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/AutocompleteOption/cjs/index.js +53 -0
- package/AutocompleteOption/cjs/index.js.map +1 -0
- package/AutocompleteOption/cjs/package.json +9 -0
- package/AutocompleteOption/index.d.ts +17 -0
- package/AutocompleteOption/index.js +47 -0
- package/AutocompleteOption/index.js.map +1 -0
- package/AutocompleteOption/package.json +9 -0
- package/InputWithAutocomplete/cjs/index.js +310 -0
- package/InputWithAutocomplete/cjs/index.js.map +1 -0
- package/InputWithAutocomplete/cjs/package.json +10 -0
- package/InputWithAutocomplete/index.d.ts +27 -0
- package/InputWithAutocomplete/index.js +286 -0
- package/InputWithAutocomplete/index.js.map +1 -0
- package/InputWithAutocomplete/package.json +10 -0
- package/Loading/cjs/index.js +72 -0
- package/Loading/cjs/index.js.map +1 -0
- package/Loading/cjs/package.json +9 -0
- package/Loading/index.d.ts +7 -0
- package/Loading/index.js +66 -0
- package/Loading/index.js.map +1 -0
- package/Loading/package.json +9 -0
- package/RadioGroupWithLabel/cjs/index.js +1 -1
- package/RadioGroupWithLabel/cjs/index.js.map +1 -1
- package/RadioGroupWithLabel/index.js +1 -1
- package/RadioGroupWithLabel/index.js.map +1 -1
- package/cjs/index.js +214 -101
- package/cjs/index.js.map +1 -1
- package/index.d.ts +43 -11
- package/index.js +215 -104
- package/index.js.map +1 -1
- package/package.json +1 -1
package/cjs/index.js
CHANGED
|
@@ -117,18 +117,18 @@ var UndefinedAvatar = React.forwardRef(function (_a, ref) {
|
|
|
117
117
|
.join("");
|
|
118
118
|
return (jsxRuntime.jsx(Wrapper$8, __assign({ "data-testid": "undefined_avatar", ref: ref }, { children: jsxRuntime.jsx(kuiBasic.Caption, __assign({ size: "xs", weight: 600, colorGroup: "brand", color: "main" }, otherProps, { children: formattedLabel })) })));
|
|
119
119
|
});
|
|
120
|
-
var Wrapper$8 = styled__default["default"].div(templateObject_1$
|
|
121
|
-
var templateObject_1$
|
|
120
|
+
var Wrapper$8 = styled__default["default"].div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background-color: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n &,\n p {\n transition: all ease-out 0.3s;\n }\n @media (min-width: 900px) {\n &:hover {\n background-color: ", ";\n p {\n color: white;\n }\n }\n }\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background-color: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n &,\n p {\n transition: all ease-out 0.3s;\n }\n @media (min-width: 900px) {\n &:hover {\n background-color: ", ";\n p {\n color: white;\n }\n }\n }\n"])), kuiBasic.theme.palette.brand.light, kuiBasic.theme.palette.brand.main);
|
|
121
|
+
var templateObject_1$C;
|
|
122
122
|
|
|
123
123
|
var Avatar = React.forwardRef(function (props, ref) {
|
|
124
124
|
var size = props.size, fullName = props.fullName, imageUrl = props.imageUrl, otherProps = __rest(props, ["size", "fullName", "imageUrl"]);
|
|
125
125
|
return (jsxRuntime$1.jsx(Wrapper$7, __assign({ css: sizeStyles[size], ref: ref }, otherProps, { children: imageUrl ? (jsxRuntime$1.jsx(StyledImage, { "data-testid": "avatar_image", src: imageUrl, alt: "avatar" })) : (jsxRuntime$1.jsx(StyledUndefinedAvatar, { label: fullName, avatarSize: size })) })));
|
|
126
126
|
});
|
|
127
|
-
var Wrapper$7 = styled__default["default"].div(templateObject_1$
|
|
128
|
-
var StyledImage = styled__default["default"].img(templateObject_2$
|
|
127
|
+
var Wrapper$7 = styled__default["default"].div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n border-radius: 50%;\n overflow: hidden;\n cursor: pointer;\n"], ["\n border-radius: 50%;\n overflow: hidden;\n cursor: pointer;\n"])));
|
|
128
|
+
var StyledImage = styled__default["default"].img(templateObject_2$m || (templateObject_2$m = __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"])));
|
|
129
129
|
var largeAvatarCSS = function (_a) {
|
|
130
130
|
var avatarSize = _a.avatarSize;
|
|
131
|
-
return avatarSize === "lg" && react.css(templateObject_3$
|
|
131
|
+
return avatarSize === "lg" && react.css(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n font-size: 32px;\n "], ["\n font-size: 32px;\n "])));
|
|
132
132
|
};
|
|
133
133
|
var StyledUndefinedAvatar = styled__default["default"](UndefinedAvatar, {
|
|
134
134
|
shouldForwardProp: function (prop) { return prop !== "size"; },
|
|
@@ -137,7 +137,7 @@ var sizeStyles = {
|
|
|
137
137
|
s: react.css(templateObject_5$2 || (templateObject_5$2 = __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 "]))),
|
|
138
138
|
lg: react.css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n width: 80px;\n height: 80px;\n "], ["\n width: 80px;\n height: 80px;\n "]))),
|
|
139
139
|
};
|
|
140
|
-
var templateObject_1$
|
|
140
|
+
var templateObject_1$B, templateObject_2$m, templateObject_3$9, templateObject_4$4, templateObject_5$2, templateObject_6;
|
|
141
141
|
|
|
142
142
|
var ButtonTab = React.forwardRef(function (_a, ref) {
|
|
143
143
|
var index = _a.index, onClick = _a.onClick, isActive = _a.isActive, label = _a.label;
|
|
@@ -146,9 +146,9 @@ var ButtonTab = React.forwardRef(function (_a, ref) {
|
|
|
146
146
|
};
|
|
147
147
|
return (jsxRuntime$1.jsx(StyledButton, __assign({ variant: isActive ? "orange" : "white", captionWeight: isActive ? 600 : 400, onClick: handleClick, css: !isActive && inactiveStyles, size: "s", ref: ref }, { children: label })));
|
|
148
148
|
});
|
|
149
|
-
var StyledButton = styled__default["default"](kuiBasic.Button)(templateObject_1$
|
|
150
|
-
var inactiveStyles = react.css(templateObject_2$
|
|
151
|
-
var templateObject_1$
|
|
149
|
+
var StyledButton = styled__default["default"](kuiBasic.Button)(templateObject_1$A || (templateObject_1$A = __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"])));
|
|
150
|
+
var inactiveStyles = react.css(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n p {\n color: ", ";\n }\n"], ["\n p {\n color: ", ";\n }\n"])), kuiBasic.theme.palette.grey.seventy);
|
|
151
|
+
var templateObject_1$A, templateObject_2$l;
|
|
152
152
|
|
|
153
153
|
var ButtonsPanel = React.forwardRef(function (_a, ref) {
|
|
154
154
|
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"]);
|
|
@@ -171,9 +171,9 @@ var ButtonsPanel = React.forwardRef(function (_a, ref) {
|
|
|
171
171
|
ButtonsPanel.defaultProps = {
|
|
172
172
|
isSticky: false,
|
|
173
173
|
};
|
|
174
|
-
var Content = styled__default["default"].div(templateObject_1$
|
|
175
|
-
var StyledContainer$2 = styled__default["default"].div(templateObject_2$
|
|
176
|
-
var templateObject_1$
|
|
174
|
+
var Content = styled__default["default"].div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n height: 100%;\n"], ["\n height: 100%;\n"])));
|
|
175
|
+
var StyledContainer$2 = styled__default["default"].div(templateObject_2$k || (templateObject_2$k = __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);
|
|
176
|
+
var templateObject_1$z, templateObject_2$k;
|
|
177
177
|
|
|
178
178
|
var InputDropdown = React.forwardRef(function (props, ref) {
|
|
179
179
|
var isOpen = props.isOpen, handleClose = props.handleClose, buttonRef = props.buttonRef, children = props.children, endComponent = props.endComponent, otherProps = __rest(props, ["isOpen", "handleClose", "buttonRef", "children", "endComponent"]);
|
|
@@ -219,21 +219,21 @@ var InputDropdown = React.forwardRef(function (props, ref) {
|
|
|
219
219
|
ref.current = elem;
|
|
220
220
|
dropdownRef.current = elem;
|
|
221
221
|
};
|
|
222
|
-
return (jsxRuntime.jsxs(StyledDropdown$
|
|
222
|
+
return (jsxRuntime.jsxs(StyledDropdown$2, __assign({ "data-testid": "input_dropdown", container: true, ref: forwardedRef, isOpen: isOpen }, otherProps, { children: [jsxRuntime.jsx(StyledWrapper$5, __assign({ isScrollable: isScrollable }, { children: jsxRuntime.jsx(ScrollingContainer, __assign({ isScrollable: isScrollable, className: "KUI-InputDropdown_scroll" }, { children: children })) })), endComponent] })));
|
|
223
223
|
});
|
|
224
|
-
var StyledDropdown$
|
|
224
|
+
var StyledDropdown$2 = styled__default["default"](kuiBasic.Grid)(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n width: 100%;\n display: ", ";\n position: absolute;\n background: ", ";\n z-index: 3;\n top: 50px;\n box-shadow: 0px 26px 34px 0px #0000001a;\n border-radius: 0 0 8px 8px;\n user-select: none;\n"], ["\n width: 100%;\n display: ", ";\n position: absolute;\n background: ", ";\n z-index: 3;\n top: 50px;\n box-shadow: 0px 26px 34px 0px #0000001a;\n border-radius: 0 0 8px 8px;\n user-select: none;\n"])), function (_a) {
|
|
225
225
|
var isOpen = _a.isOpen;
|
|
226
226
|
return (isOpen ? "flex" : "none");
|
|
227
227
|
}, kuiBasic.theme.palette.grey.zero);
|
|
228
|
-
var StyledWrapper$
|
|
228
|
+
var StyledWrapper$5 = styled__default["default"].div(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n width: 100%;\n box-sizing: border-box;\n padding: ", ";\n"], ["\n width: 100%;\n box-sizing: border-box;\n padding: ", ";\n"])), function (_a) {
|
|
229
229
|
var isScrollable = _a.isScrollable;
|
|
230
230
|
return isScrollable ? "14px 8px 8px 0" : "14px 0px 8px 0";
|
|
231
231
|
});
|
|
232
|
-
var ScrollingContainer = styled__default["default"].div(templateObject_3$
|
|
232
|
+
var ScrollingContainer = styled__default["default"].div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n width: 100%;\n max-height: 389px;\n box-sizing: border-box;\n z-index: 3;\n overflow: auto;\n -ms-overflow-style: none;\n overflow-y: scroll;\n overflow-x: hidden;\n user-select: none;\n ::-webkit-scrollbar {\n width: ", ";\n position: absolute;\n right: 8px;\n }\n ::-webkit-scrollbar-track,\n ::-webkit-scrollbar-thumb {\n border-radius: 4px;\n transition: all ease-out 0.3s;\n }\n\n ::-webkit-resizer,\n ::-webkit-scrollbar-button,\n ::-webkit-scrollbar-corner {\n display: none;\n }\n ::-webkit-scrollbar-track {\n background: ", ";\n }\n\n ::-webkit-scrollbar-thumb {\n background: ", ";\n }\n"], ["\n width: 100%;\n max-height: 389px;\n box-sizing: border-box;\n z-index: 3;\n overflow: auto;\n -ms-overflow-style: none;\n overflow-y: scroll;\n overflow-x: hidden;\n user-select: none;\n ::-webkit-scrollbar {\n width: ", ";\n position: absolute;\n right: 8px;\n }\n ::-webkit-scrollbar-track,\n ::-webkit-scrollbar-thumb {\n border-radius: 4px;\n transition: all ease-out 0.3s;\n }\n\n ::-webkit-resizer,\n ::-webkit-scrollbar-button,\n ::-webkit-scrollbar-corner {\n display: none;\n }\n ::-webkit-scrollbar-track {\n background: ", ";\n }\n\n ::-webkit-scrollbar-thumb {\n background: ", ";\n }\n"])), function (_a) {
|
|
233
233
|
var isScrollable = _a.isScrollable;
|
|
234
234
|
return (isScrollable ? "4px" : "0px");
|
|
235
235
|
}, kuiBasic.theme.palette.grey.fifteenB, kuiBasic.theme.palette.grey.thirty);
|
|
236
|
-
var templateObject_1$
|
|
236
|
+
var templateObject_1$y, templateObject_2$j, templateObject_3$8;
|
|
237
237
|
|
|
238
238
|
var InputSelectDropdown = React.forwardRef(function (_a, ref) {
|
|
239
239
|
var options = _a.options, inputRef = _a.inputRef, isOpenDropdown = _a.isOpenDropdown, handleCloseDropdown = _a.handleCloseDropdown, handleSelect = _a.handleSelect, selectedValue = _a.selectedValue, renderOption = _a.renderOption;
|
|
@@ -242,17 +242,17 @@ var InputSelectDropdown = React.forwardRef(function (_a, ref) {
|
|
|
242
242
|
handleSelect(option);
|
|
243
243
|
}
|
|
244
244
|
};
|
|
245
|
-
return (jsxRuntime.jsx(StyledDropdown, __assign({ buttonRef: inputRef, isOpen: isOpenDropdown, handleClose: handleCloseDropdown, ref: ref }, { children: options.map(function (option, key) { return (jsxRuntime.jsx(OptionWrapper, __assign({ disabled: option.disabled, onClick: function () { return handleClick(option); }, "data-value": "autocomplete_option_".concat(option.value), "data-testid": "autocomplete_option_".concat(key) }, { children: renderOption(option, selectedValue) }), option.label)); }) })));
|
|
245
|
+
return (jsxRuntime.jsx(StyledDropdown$1, __assign({ buttonRef: inputRef, isOpen: isOpenDropdown, handleClose: handleCloseDropdown, ref: ref }, { children: options.map(function (option, key) { return (jsxRuntime.jsx(OptionWrapper, __assign({ disabled: option.disabled, onClick: function () { return handleClick(option); }, "data-value": "autocomplete_option_".concat(option.value), "data-testid": "autocomplete_option_".concat(key) }, { children: renderOption(option, selectedValue) }), option.label)); }) })));
|
|
246
246
|
});
|
|
247
|
-
var OptionWrapper = styled__default["default"].div(templateObject_1$
|
|
247
|
+
var OptionWrapper = styled__default["default"].div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n width: 100%;\n padding: 2px 0;\n cursor: ", ";\n p {\n color: ", ";\n }\n"], ["\n width: 100%;\n padding: 2px 0;\n cursor: ", ";\n p {\n color: ", ";\n }\n"])), function (_a) {
|
|
248
248
|
var disabled = _a.disabled;
|
|
249
249
|
return (disabled ? "auto" : "pointer");
|
|
250
250
|
}, function (_a) {
|
|
251
251
|
var disabled = _a.disabled;
|
|
252
252
|
return disabled ? kuiBasic.theme.palette.grey.fiftyP : kuiBasic.theme.palette.grey.seventy;
|
|
253
253
|
});
|
|
254
|
-
var StyledDropdown = styled__default["default"](InputDropdown)(templateObject_2$
|
|
255
|
-
var templateObject_1$
|
|
254
|
+
var StyledDropdown$1 = styled__default["default"](InputDropdown)(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n .KUI-InputDropdown_scroll {\n max-height: 142px;\n padding: 0 4px;\n }\n"], ["\n .KUI-InputDropdown_scroll {\n max-height: 142px;\n padding: 0 4px;\n }\n"])));
|
|
255
|
+
var templateObject_1$x, templateObject_2$i;
|
|
256
256
|
|
|
257
257
|
function InputSelectBase(_a) {
|
|
258
258
|
var _b;
|
|
@@ -274,29 +274,29 @@ function InputSelectBase(_a) {
|
|
|
274
274
|
handleChange(option);
|
|
275
275
|
handleCloseDropdown();
|
|
276
276
|
};
|
|
277
|
-
return (jsxRuntime$1.jsxs(Wrapper$6, { children: [jsxRuntime$1.jsx("input", { name: name, autoComplete: "off", hidden: true }), jsxRuntime$1.jsx(StyledInput, __assign({ onClick: handleOpenDropdown, ref: inputRef, disabled: disabled, readOnly: true, value: selectedLabel, message: error, isDropdownOpen: isDropdownOpen, isLabelShrink: Boolean(selectedValue) || selectedValue === 0 }, inputProps, { endIcon: !disabled && (jsxRuntime$1.jsx(kuiIcon.HalfArrowIcon, __assign({ width: 12, height: 13, css: [
|
|
277
|
+
return (jsxRuntime$1.jsxs(Wrapper$6, { children: [jsxRuntime$1.jsx("input", { name: name, autoComplete: "off", hidden: true }), jsxRuntime$1.jsx(StyledInput$1, __assign({ onClick: handleOpenDropdown, ref: inputRef, disabled: disabled, readOnly: true, value: selectedLabel, message: error, isDropdownOpen: isDropdownOpen, isLabelShrink: Boolean(selectedValue) || selectedValue === 0 }, inputProps, { endIcon: !disabled && (jsxRuntime$1.jsx(kuiIcon.HalfArrowIcon, __assign({ width: 12, height: 13, css: [
|
|
278
278
|
{ transition: "all linear .2s" },
|
|
279
279
|
isDropdownOpen && { transform: "rotate(180deg)" },
|
|
280
280
|
] }, iconProps))) })), options.length > 0 && !disabled && (jsxRuntime$1.jsx(InputSelectDropdown, { options: options, inputRef: {
|
|
281
281
|
current: (_b = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _b === void 0 ? void 0 : _b.parentElement,
|
|
282
282
|
}, isOpenDropdown: isDropdownOpen, handleCloseDropdown: handleCloseDropdown, handleSelect: handleSelect, selectedValue: selectedValue, renderOption: renderOption }))] }));
|
|
283
283
|
}
|
|
284
|
-
var Wrapper$6 = styled__default["default"].div(templateObject_1$
|
|
285
|
-
var StyledInput = styled__default["default"](kuiBasic.InputWithAdornments)(templateObject_2$
|
|
284
|
+
var Wrapper$6 = styled__default["default"].div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n position: relative;\n text-align: left;\n"], ["\n position: relative;\n text-align: left;\n"])));
|
|
285
|
+
var StyledInput$1 = styled__default["default"](kuiBasic.InputWithAdornments)(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n cursor: pointer;\n input,\n label {\n cursor: pointer !important;\n }\n .KUI-InputMessage {\n opacity: ", ";\n }\n"], ["\n cursor: pointer;\n input,\n label {\n cursor: pointer !important;\n }\n .KUI-InputMessage {\n opacity: ", ";\n }\n"])), function (_a) {
|
|
286
286
|
var isDropdownOpen = _a.isDropdownOpen;
|
|
287
287
|
return (isDropdownOpen ? 0 : 1);
|
|
288
288
|
});
|
|
289
|
-
var templateObject_1$
|
|
289
|
+
var templateObject_1$w, templateObject_2$h;
|
|
290
290
|
|
|
291
291
|
function InputSelectOption(props) {
|
|
292
292
|
var option = props.option, selectedValue = props.selectedValue;
|
|
293
293
|
return (jsxRuntime.jsx(StyledOption$1, __assign({ selected: selectedValue === option.value }, { children: jsxRuntime.jsx(kuiBasic.Caption, __assign({ size: "sm", weight: 500 }, { children: option.label })) })));
|
|
294
294
|
}
|
|
295
|
-
var StyledOption$1 = styled__default["default"].div(templateObject_1$
|
|
295
|
+
var StyledOption$1 = styled__default["default"].div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n padding: 8px;\n transition: all ease-out 0.3s;\n border-radius: 4px;\n background-color: ", ";\n &:hover {\n background-color: ", ";\n }\n"], ["\n padding: 8px;\n transition: all ease-out 0.3s;\n border-radius: 4px;\n background-color: ", ";\n &:hover {\n background-color: ", ";\n }\n"])), function (_a) {
|
|
296
296
|
var selected = _a.selected;
|
|
297
297
|
return selected ? kuiBasic.theme.palette.background.light1 : kuiBasic.theme.palette.grey.zero;
|
|
298
298
|
}, kuiBasic.theme.palette.background.light1);
|
|
299
|
-
var templateObject_1$
|
|
299
|
+
var templateObject_1$v;
|
|
300
300
|
|
|
301
301
|
function InputSelect(_a) {
|
|
302
302
|
var _b;
|
|
@@ -355,25 +355,25 @@ var CalendarHeaderWithSelect = React.forwardRef(function (_a, ref) {
|
|
|
355
355
|
var maxMonth = (max === null || max === void 0 ? void 0 : max.year) === currentYear ? max === null || max === void 0 ? void 0 : max.month : 11;
|
|
356
356
|
return (jsxRuntime.jsx(Wrapper$5, __assign({ ref: ref }, { children: jsxRuntime.jsxs(kuiBasic.Grid, __assign({ container: true, spacing: 2 }, { children: [jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true, xs: 6 }, { children: jsxRuntime.jsx(SelectYear, { min: min === null || min === void 0 ? void 0 : min.year, max: max === null || max === void 0 ? void 0 : max.year, yearOptions: yearOptions, value: year, handleChange: changeYear }) })), jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true, xs: 6 }, { children: jsxRuntime.jsx(SelectMonth, { min: (Number(min === null || min === void 0 ? void 0 : min.year) >= currentYear && minMonth), max: (Number(max === null || max === void 0 ? void 0 : max.year) <= currentYear && maxMonth), value: month, handleChange: changeMonth }) }))] })) })));
|
|
357
357
|
});
|
|
358
|
-
var Wrapper$5 = styled__default["default"].div(templateObject_1$
|
|
359
|
-
var templateObject_1$
|
|
358
|
+
var Wrapper$5 = styled__default["default"].div(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n margin-bottom: 24px;\n @media (max-width: 900px) {\n padding: 0 18px;\n margin-bottom: 20px;\n }\n"], ["\n margin-bottom: 24px;\n @media (max-width: 900px) {\n padding: 0 18px;\n margin-bottom: 20px;\n }\n"])));
|
|
359
|
+
var templateObject_1$u;
|
|
360
360
|
|
|
361
361
|
var CalendarStandardContainer = React.forwardRef(function (_a, ref) {
|
|
362
362
|
_a.arrowProps; _a.showPopperArrow; var props = __rest(_a, ["arrowProps", "showPopperArrow"]);
|
|
363
363
|
return jsxRuntime.jsx(DatePickerContainer, __assign({ ref: ref }, props));
|
|
364
364
|
});
|
|
365
|
-
var DatePickerContainer = styled__default["default"].div(templateObject_1$
|
|
366
|
-
var templateObject_1$
|
|
365
|
+
var DatePickerContainer = styled__default["default"].div(templateObject_1$t || (templateObject_1$t = __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--today {\n color: ", ";\n background-color: ", ";\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--today {\n color: ", ";\n background-color: ", ";\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"])), kuiBasic.theme.palette.grey.fiftyP, kuiBasic.theme.palette.background.light3, kuiBasic.theme.palette.background.light3, kuiBasic.theme.palette.brand.main, kuiBasic.theme.palette.brand.light, kuiBasic.theme.palette.brand.main, kuiBasic.theme.palette.brand.main, kuiBasic.theme.palette.grey.fifteenB, kuiBasic.theme.palette.red.seventy, kuiBasic.theme.palette.grey.zero);
|
|
366
|
+
var templateObject_1$t;
|
|
367
367
|
|
|
368
368
|
var CalendarStandardHeader = React.forwardRef(function (_a, ref) {
|
|
369
369
|
var decreaseMonth = _a.decreaseMonth, increaseMonth = _a.increaseMonth, nextMonthButtonDisabled = _a.nextMonthButtonDisabled, prevMonthButtonDisabled = _a.prevMonthButtonDisabled, date = _a.date;
|
|
370
370
|
var title = ___default["default"].capitalize(date.toLocaleString("ru", { month: "long", year: "numeric" })).slice(0, -3);
|
|
371
371
|
return (jsxRuntime.jsxs(HeaderWrapper, __assign({ container: true, alignItems: "center", justify: "space-between", ref: ref }, { 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 }) })) }))] })) }))] })));
|
|
372
372
|
});
|
|
373
|
-
var HeaderWrapper = styled__default["default"](kuiBasic.Grid)(templateObject_1$
|
|
374
|
-
var StyledHeading = styled__default["default"](kuiBasic.Heading)(templateObject_2$
|
|
375
|
-
var CircleButtonStyled = styled__default["default"](kuiBasic.Button)(templateObject_3$
|
|
376
|
-
var templateObject_1$
|
|
373
|
+
var HeaderWrapper = styled__default["default"](kuiBasic.Grid)(templateObject_1$s || (templateObject_1$s = __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"])));
|
|
374
|
+
var StyledHeading = styled__default["default"](kuiBasic.Heading)(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n @media (max-width: 600px) {\n font-weight: 700;\n }\n"], ["\n @media (max-width: 600px) {\n font-weight: 700;\n }\n"])));
|
|
375
|
+
var CircleButtonStyled = styled__default["default"](kuiBasic.Button)(templateObject_3$7 || (templateObject_3$7 = __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"])));
|
|
376
|
+
var templateObject_1$s, templateObject_2$g, templateObject_3$7;
|
|
377
377
|
|
|
378
378
|
var InputForDatepicker = React.forwardRef(function (props, ref) {
|
|
379
379
|
var onClick = props.onClick, disabled = props.disabled, handleClick = props.handleClick, startIcon = props.startIcon, other = __rest(props, ["onClick", "disabled", "handleClick", "startIcon"]);
|
|
@@ -388,23 +388,23 @@ var InputForDatepicker = React.forwardRef(function (props, ref) {
|
|
|
388
388
|
var Icon = function () { return (jsxRuntime.jsx(IconWrapper, __assign({ disabled: disabled, onClick: handleIconClick }, { children: startIcon || jsxRuntime.jsx(kuiIcon.CalendarIcon, { width: 19, height: 21 }) }))); };
|
|
389
389
|
return (jsxRuntime.jsx(kuiBasic.InputWithMask, __assign({ disabled: disabled, endIcon: !startIcon && jsxRuntime.jsx(Icon, {}), startIcon: startIcon && jsxRuntime.jsx(Icon, {}) }, other, { ref: ref })));
|
|
390
390
|
});
|
|
391
|
-
var IconWrapper = styled__default["default"].div(templateObject_1$
|
|
392
|
-
var templateObject_1$
|
|
391
|
+
var IconWrapper = styled__default["default"].div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n display: flex;\n align-items: center;\n cursor: pointer;\n z-index: 1;\n"], ["\n display: flex;\n align-items: center;\n cursor: pointer;\n z-index: 1;\n"])));
|
|
392
|
+
var templateObject_1$r;
|
|
393
393
|
|
|
394
394
|
var MonthPickerContainer = React.forwardRef(function (_a, ref) {
|
|
395
395
|
_a.arrowProps; _a.showPopperArrow; var props = __rest(_a, ["arrowProps", "showPopperArrow"]);
|
|
396
396
|
return jsxRuntime.jsx(StyledContainer$1, __assign({ ref: ref }, props));
|
|
397
397
|
});
|
|
398
|
-
var StyledContainer$1 = styled__default["default"].div(templateObject_1$
|
|
399
|
-
var templateObject_1$
|
|
398
|
+
var StyledContainer$1 = styled__default["default"].div(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n box-shadow: 0px 26px 34px rgba(0, 0, 0, 0.1);\n border-radius: 12px !important;\n border: 1px solid ", " !important;\n background: #fff;\n overflow: hidden;\n z-index: 5;\n .react-datepicker-wrapper,\n .react-datepicker__input-container {\n display: block;\n width: 100%;\n }\n .react-datepicker__header,\n .react-datepicker__header:not(.react-datepicker__header--has-time-select) {\n padding: 0;\n border: none;\n background-color: #fff;\n }\n .react-datepicker__month {\n margin: 0px 8px 8px !important;\n border-radius: 12px;\n border: 1px solid ", ";\n width: 238px;\n height: 169px;\n display: flex;\n flex-direction: column;\n }\n .react-datepicker__month-text {\n margin: 4px !important;\n /*width: auto !important;*/\n width: calc(100% / 3) !important;\n position: relative;\n display: flex !important;\n justify-content: center;\n align-items: center;\n }\n\n .react-datepicker__month-wrapper {\n height: calc(100% / 4);\n display: flex;\n }\n\n .react-datepicker__month-text:after {\n content: \"\";\n display: block;\n height: calc(100% + 8px);\n width: 1px;\n position: absolute;\n top: -4px;\n right: -4px;\n background: ", ";\n }\n\n .react-datepicker__month-text:nth-child(3n):after {\n content: none;\n }\n\n .react-datepicker__month--selected,\n .react-datepicker__month-text--keyboard-selected {\n background-color: ", " !important;\n border-radius: 8px !important;\n color: white !important;\n }\n .react-datepicker__month-wrapper {\n border-bottom: 1px solid ", ";\n }\n\n .react-datepicker__month-wrapper:last-child {\n border-bottom: none;\n }\n\n @media (max-width: 600px) {\n .react-datepicker__month-container {\n width: 100%;\n height: 100%;\n }\n .react-datepicker__month {\n margin: 0px 16px 16px !important;\n height: calc(100% - 58px);\n text-align: center;\n width: auto;\n }\n .react-datepicker__month-text {\n margin: 8px !important;\n }\n .react-datepicker__month-text:after {\n height: calc(100% + 16px);\n top: -8px;\n right: -8px;\n }\n .react-datepicker__month-text:nth-child(3n):after {\n content: none;\n }\n }\n @media (max-width: 600px) {\n width: 100%;\n height: 262px;\n box-shadow: 0px 5px 16px rgba(0, 0, 0, 0.1);\n }\n"], ["\n box-shadow: 0px 26px 34px rgba(0, 0, 0, 0.1);\n border-radius: 12px !important;\n border: 1px solid ", " !important;\n background: #fff;\n overflow: hidden;\n z-index: 5;\n .react-datepicker-wrapper,\n .react-datepicker__input-container {\n display: block;\n width: 100%;\n }\n .react-datepicker__header,\n .react-datepicker__header:not(.react-datepicker__header--has-time-select) {\n padding: 0;\n border: none;\n background-color: #fff;\n }\n .react-datepicker__month {\n margin: 0px 8px 8px !important;\n border-radius: 12px;\n border: 1px solid ", ";\n width: 238px;\n height: 169px;\n display: flex;\n flex-direction: column;\n }\n .react-datepicker__month-text {\n margin: 4px !important;\n /*width: auto !important;*/\n width: calc(100% / 3) !important;\n position: relative;\n display: flex !important;\n justify-content: center;\n align-items: center;\n }\n\n .react-datepicker__month-wrapper {\n height: calc(100% / 4);\n display: flex;\n }\n\n .react-datepicker__month-text:after {\n content: \"\";\n display: block;\n height: calc(100% + 8px);\n width: 1px;\n position: absolute;\n top: -4px;\n right: -4px;\n background: ", ";\n }\n\n .react-datepicker__month-text:nth-child(3n):after {\n content: none;\n }\n\n .react-datepicker__month--selected,\n .react-datepicker__month-text--keyboard-selected {\n background-color: ", " !important;\n border-radius: 8px !important;\n color: white !important;\n }\n .react-datepicker__month-wrapper {\n border-bottom: 1px solid ", ";\n }\n\n .react-datepicker__month-wrapper:last-child {\n border-bottom: none;\n }\n\n @media (max-width: 600px) {\n .react-datepicker__month-container {\n width: 100%;\n height: 100%;\n }\n .react-datepicker__month {\n margin: 0px 16px 16px !important;\n height: calc(100% - 58px);\n text-align: center;\n width: auto;\n }\n .react-datepicker__month-text {\n margin: 8px !important;\n }\n .react-datepicker__month-text:after {\n height: calc(100% + 16px);\n top: -8px;\n right: -8px;\n }\n .react-datepicker__month-text:nth-child(3n):after {\n content: none;\n }\n }\n @media (max-width: 600px) {\n width: 100%;\n height: 262px;\n box-shadow: 0px 5px 16px rgba(0, 0, 0, 0.1);\n }\n"])), kuiBasic.theme.palette.background.light1, kuiBasic.theme.palette.grey.fifteenB, kuiBasic.theme.palette.grey.fifteenB, kuiBasic.theme.palette.brand.main, kuiBasic.theme.palette.grey.fifteenB);
|
|
399
|
+
var templateObject_1$q;
|
|
400
400
|
|
|
401
401
|
var MonthPickerHeader = React.forwardRef(function (_a, ref) {
|
|
402
402
|
var decreaseYear = _a.decreaseYear, increaseYear = _a.increaseYear, nextYearButtonDisabled = _a.nextYearButtonDisabled, prevYearButtonDisabled = _a.prevYearButtonDisabled, date = _a.date;
|
|
403
403
|
return (jsxRuntime.jsxs(StyledHeader, __assign({ container: true, alignItems: "center", justify: "space-between", ref: ref }, { 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 }) })) }))] })));
|
|
404
404
|
});
|
|
405
|
-
var StyledIconButton = styled__default["default"](kuiBasic.IconButton)(templateObject_1$
|
|
406
|
-
var StyledHeader = styled__default["default"](kuiBasic.Grid)(templateObject_2$
|
|
407
|
-
var templateObject_1$
|
|
405
|
+
var StyledIconButton = styled__default["default"](kuiBasic.IconButton)(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n height: 36px;\n &:disabled {\n opacity: 0;\n }\n"], ["\n height: 36px;\n &:disabled {\n opacity: 0;\n }\n"])));
|
|
406
|
+
var StyledHeader = styled__default["default"](kuiBasic.Grid)(templateObject_2$f || (templateObject_2$f = __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"])));
|
|
407
|
+
var templateObject_1$p, templateObject_2$f;
|
|
408
408
|
|
|
409
409
|
var DesktopInputWithMonthPicker = React.forwardRef(function (_a, ref) {
|
|
410
410
|
var name = _a.name, form = _a.form, disabled = _a.disabled, datePickerProps = _a.datePickerProps, otherProps = __rest(_a, ["name", "form", "disabled", "datePickerProps"]);
|
|
@@ -414,8 +414,8 @@ var DesktopInputWithMonthPicker = React.forwardRef(function (_a, ref) {
|
|
|
414
414
|
return (jsxRuntime.jsx(DatePicker__default["default"], __assign({ selected: field.value, onChange: field.onChange, disabled: disabled, customInput: jsxRuntime.jsx(InputForDatepicker, __assign({ mask: "00.0000", 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 (jsxRuntime.jsx(MonthPickerHeader, __assign({}, props))); } }, datePickerProps)));
|
|
415
415
|
} }) })));
|
|
416
416
|
});
|
|
417
|
-
var Wrapper$4 = styled__default["default"].div(templateObject_1$
|
|
418
|
-
var templateObject_1$
|
|
417
|
+
var Wrapper$4 = styled__default["default"].div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n @media (max-width: 600px) {\n display: none;\n }\n"], ["\n @media (max-width: 600px) {\n display: none;\n }\n"])));
|
|
418
|
+
var templateObject_1$o;
|
|
419
419
|
|
|
420
420
|
var MenuItem = React.forwardRef(function (_a, ref) {
|
|
421
421
|
var tab = _a.tab, active = _a.active, index = _a.index, handleClick = _a.handleClick, offset = _a.offset, isScrolling = _a.isScrolling, setIsScrolling = _a.setIsScrolling;
|
|
@@ -450,16 +450,16 @@ var MenuItem = React.forwardRef(function (_a, ref) {
|
|
|
450
450
|
}, []);
|
|
451
451
|
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, __assign({ ref: ref }, { children: jsxRuntime$1.jsx(kuiBasic.Button, __assign({ variant: Number(active) === index ? "orange" : "transparentWithBorder", size: "xs", css: Number(active) !== index && disabledStyles }, { children: tab.label })) })) })));
|
|
452
452
|
});
|
|
453
|
-
var ButtonWrapper$1 = styled__default["default"].div(templateObject_1$
|
|
454
|
-
var disabledStyles = react.css(templateObject_2$
|
|
455
|
-
var templateObject_1$
|
|
453
|
+
var ButtonWrapper$1 = styled__default["default"].div(templateObject_1$n || (templateObject_1$n = __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"])));
|
|
454
|
+
var disabledStyles = react.css(templateObject_2$e || (templateObject_2$e = __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);
|
|
455
|
+
var templateObject_1$n, templateObject_2$e;
|
|
456
456
|
|
|
457
457
|
var DesktopMenuPanel = React.forwardRef(function (_a, ref) {
|
|
458
458
|
var tabs = _a.tabs, variant = _a.variant, other = __rest(_a, ["tabs", "variant"]);
|
|
459
459
|
return (jsxRuntime$1.jsx(Wrapper$3, __assign({ container: true, css: variant === "white" && { background: "white" }, ref: ref }, { children: tabs.map(function (tab, index) { return (jsxRuntime$1.jsx(kuiBasic.Grid, __assign({ item: true }, { children: jsxRuntime$1.jsx(MenuItem, __assign({ tab: tab, index: index, offset: -121 }, other), tab.label) }), index)); }) })));
|
|
460
460
|
});
|
|
461
|
-
var Wrapper$3 = styled__default["default"](kuiBasic.Grid)(templateObject_1$
|
|
462
|
-
var templateObject_1$
|
|
461
|
+
var Wrapper$3 = styled__default["default"](kuiBasic.Grid)(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n position: sticky;\n top: 49px;\n left: 0;\n z-index: 11;\n background-color: ", ";\n padding: 16px 16px 24px;\n @media (max-width: 900px) {\n justify-content: space-between;\n }\n @media (max-width: 765px) {\n display: none;\n }\n"], ["\n position: sticky;\n top: 49px;\n left: 0;\n z-index: 11;\n background-color: ", ";\n padding: 16px 16px 24px;\n @media (max-width: 900px) {\n justify-content: space-between;\n }\n @media (max-width: 765px) {\n display: none;\n }\n"])), kuiBasic.theme.palette.background.light1);
|
|
462
|
+
var templateObject_1$m;
|
|
463
463
|
|
|
464
464
|
var InputWithMask = React.forwardRef(function (_a, ref) {
|
|
465
465
|
var form = _a.form, name = _a.name, error = _a.error, inputProps = __rest(_a, ["form", "name", "error"]);
|
|
@@ -535,15 +535,15 @@ var PassportStrengthBar = React.forwardRef(function (_a, ref) {
|
|
|
535
535
|
: -1;
|
|
536
536
|
return (jsxRuntime$1.jsxs(Wrapper$2, __assign({ "data-testid": "strength_bar", className: String(!strength && "hidden"), ref: ref }, { 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" }))] })));
|
|
537
537
|
});
|
|
538
|
-
var Wrapper$2 = styled__default["default"].div(templateObject_1$
|
|
539
|
-
var ReliabilityLevelWrapper = styled__default["default"].div(templateObject_2$
|
|
540
|
-
var ReliabilityLevel = styled__default["default"].div(templateObject_3$
|
|
538
|
+
var Wrapper$2 = styled__default["default"].div(templateObject_1$l || (templateObject_1$l = __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"])));
|
|
539
|
+
var ReliabilityLevelWrapper = styled__default["default"].div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n display: flex;\n margin-bottom: 8px;\n"], ["\n display: flex;\n margin-bottom: 8px;\n"])));
|
|
540
|
+
var ReliabilityLevel = styled__default["default"].div(templateObject_3$6 || (templateObject_3$6 = __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"])));
|
|
541
541
|
var StyledLinearProgress = styled__default["default"](kuiBasic.LinearProgress)(templateObject_4$3 || (templateObject_4$3 = __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) {
|
|
542
542
|
var color = _a.color;
|
|
543
543
|
return color;
|
|
544
544
|
});
|
|
545
545
|
var Description = styled__default["default"](kuiBasic.Caption)(templateObject_5$1 || (templateObject_5$1 = __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"])));
|
|
546
|
-
var templateObject_1$
|
|
546
|
+
var templateObject_1$l, templateObject_2$d, templateObject_3$6, templateObject_4$3, templateObject_5$1;
|
|
547
547
|
|
|
548
548
|
var getFormValue = function (name, form) {
|
|
549
549
|
var names = name === null || name === void 0 ? void 0 : name.split(".");
|
|
@@ -598,13 +598,13 @@ var InputPassword = React.forwardRef(function (props, ref) {
|
|
|
598
598
|
}, []);
|
|
599
599
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InputWithController, __assign({ type: showPassword ? "text" : "password", autoComplete: "new_password", onChange: handleChange, "data-testid": "input_password", ref: ref, endIcon: jsxRuntime.jsx(EyeIconWrapper, __assign({ "data-testid": "show_value_btn", onClick: handleShowChange }, { children: showPassword ? jsxRuntime.jsx(kuiIcon.ClosedEyeIcon, {}) : jsxRuntime.jsx(kuiIcon.OpenEyeIcon, {}) })) }, props)), jsxRuntime.jsx(PassportStrengthBar, { strength: strength })] }));
|
|
600
600
|
});
|
|
601
|
-
var EyeIconWrapper = styled__default["default"].div(templateObject_1$
|
|
602
|
-
var templateObject_1$
|
|
601
|
+
var EyeIconWrapper = styled__default["default"].div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n height: 18px;\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n height: 18px;\n display: flex;\n align-items: center;\n cursor: pointer;\n"])));
|
|
602
|
+
var templateObject_1$k;
|
|
603
603
|
|
|
604
604
|
var InputTextAreaMobile = React.forwardRef(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)) })] })); });
|
|
605
|
-
var InputWrapper = styled__default["default"].div(templateObject_1$
|
|
606
|
-
var TextAreaWrapper = styled__default["default"].div(templateObject_2$
|
|
607
|
-
var templateObject_1$
|
|
605
|
+
var InputWrapper = styled__default["default"].div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n @media (max-width: 900px) {\n display: none;\n }\n"], ["\n @media (max-width: 900px) {\n display: none;\n }\n"])));
|
|
606
|
+
var TextAreaWrapper = styled__default["default"].div(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n @media (min-width: 901px) {\n display: none;\n }\n"], ["\n @media (min-width: 901px) {\n display: none;\n }\n"])));
|
|
607
|
+
var templateObject_1$j, templateObject_2$c;
|
|
608
608
|
|
|
609
609
|
var useToggle = function (isModalOpen) {
|
|
610
610
|
if (isModalOpen === void 0) { isModalOpen = false; }
|
|
@@ -622,10 +622,10 @@ var ModalFooter = React.forwardRef(function (_a, ref) {
|
|
|
622
622
|
var label = _a.label, button = _a.button, otherProps = __rest(_a, ["label", "button"]);
|
|
623
623
|
return (jsxRuntime.jsxs(StyledFooter, __assign({ ref: ref }, { 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 }))) })] })));
|
|
624
624
|
});
|
|
625
|
-
var StyledFooter = styled__default["default"].div(templateObject_1$
|
|
626
|
-
var ButtonWrapper = styled__default["default"].div(templateObject_2$
|
|
627
|
-
var ButtonStyled = styled__default["default"](kuiBasic.Button)(templateObject_3$
|
|
628
|
-
var templateObject_1$
|
|
625
|
+
var StyledFooter = styled__default["default"].div(templateObject_1$i || (templateObject_1$i = __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);
|
|
626
|
+
var ButtonWrapper = styled__default["default"].div(templateObject_2$b || (templateObject_2$b = __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"])));
|
|
627
|
+
var ButtonStyled = styled__default["default"](kuiBasic.Button)(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n @media (max-width: 600px) {\n width: 100%;\n }\n"], ["\n @media (max-width: 600px) {\n width: 100%;\n }\n"])));
|
|
628
|
+
var templateObject_1$i, templateObject_2$b, templateObject_3$5;
|
|
629
629
|
|
|
630
630
|
function setRef(ref, value) {
|
|
631
631
|
if (typeof ref === "function") {
|
|
@@ -729,14 +729,14 @@ InputWithDatePicker.defaultProps = {
|
|
|
729
729
|
footerLabel: "Подтвердить",
|
|
730
730
|
alignTitle: "center",
|
|
731
731
|
};
|
|
732
|
-
var ContentWrapper$1 = styled__default["default"].div(templateObject_1$
|
|
733
|
-
var StyledCalendarStandardContainer = styled__default["default"](CalendarStandardContainer)(templateObject_2$
|
|
734
|
-
var DayContent = styled__default["default"].span(templateObject_3$
|
|
732
|
+
var ContentWrapper$1 = styled__default["default"].div(templateObject_1$h || (templateObject_1$h = __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"])));
|
|
733
|
+
var StyledCalendarStandardContainer = styled__default["default"](CalendarStandardContainer)(templateObject_2$a || (templateObject_2$a = __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);
|
|
734
|
+
var DayContent = styled__default["default"].span(templateObject_3$4 || (templateObject_3$4 = __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"])));
|
|
735
735
|
var StyledModal = styled__default["default"](kuiBasic.Modal)(templateObject_4$2 || (templateObject_4$2 = __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) {
|
|
736
736
|
var alignTitle = _a.alignTitle;
|
|
737
737
|
return alignTitle || "center";
|
|
738
738
|
});
|
|
739
|
-
var templateObject_1$
|
|
739
|
+
var templateObject_1$h, templateObject_2$a, templateObject_3$4, templateObject_4$2;
|
|
740
740
|
|
|
741
741
|
var shortMonths = [
|
|
742
742
|
"ЯНВ",
|
|
@@ -799,9 +799,9 @@ var MobileInputWithMonthPicker = React.forwardRef(function (_a, ref) {
|
|
|
799
799
|
};
|
|
800
800
|
return (jsxRuntime.jsxs(Wrapper$1, __assign({ ref: ref }, { children: [jsxRuntime.jsx(InputForDatepicker, __assign({ mask: "00.0000", name: name, handleCLick: handleModalOpen, value: value, onChange: handleChange, disabled: disabled, message: 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" })] }))] })));
|
|
801
801
|
});
|
|
802
|
-
var Wrapper$1 = styled__default["default"].div(templateObject_1$
|
|
803
|
-
var ContentWrapper = styled__default["default"].div(templateObject_2$
|
|
804
|
-
var templateObject_1$
|
|
802
|
+
var Wrapper$1 = styled__default["default"].div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n @media (min-width: 601px) {\n display: none;\n }\n"], ["\n @media (min-width: 601px) {\n display: none;\n }\n"])));
|
|
803
|
+
var ContentWrapper = styled__default["default"].div(templateObject_2$9 || (templateObject_2$9 = __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"])));
|
|
804
|
+
var templateObject_1$g, templateObject_2$9;
|
|
805
805
|
|
|
806
806
|
var InputWithMonthPicker = function (props) { return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(DesktopInputWithMonthPicker, __assign({}, props)), jsxRuntime.jsx(MobileInputWithMonthPicker, __assign({}, props))] })); };
|
|
807
807
|
|
|
@@ -817,9 +817,9 @@ var MobileMenuPanel = React.forwardRef(function (_a, ref) {
|
|
|
817
817
|
};
|
|
818
818
|
return (jsxRuntime$1.jsx(Wrapper, __assign({ css: variant === "white" && { background: "white" }, ref: ref }, { 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)); }) })) })));
|
|
819
819
|
});
|
|
820
|
-
var Wrapper = styled__default["default"].div(templateObject_1$
|
|
821
|
-
var SlideWrapper = styled__default["default"].div(templateObject_2$
|
|
822
|
-
var templateObject_1$
|
|
820
|
+
var Wrapper = styled__default["default"].div(templateObject_1$f || (templateObject_1$f = __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);
|
|
821
|
+
var SlideWrapper = styled__default["default"].div(templateObject_2$8 || (templateObject_2$8 = __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"])));
|
|
822
|
+
var templateObject_1$f, templateObject_2$8;
|
|
823
823
|
|
|
824
824
|
var useWindowWidth = function (time) {
|
|
825
825
|
if (time === void 0) { time = 10; }
|
|
@@ -869,8 +869,8 @@ var MenuPanel = React.forwardRef(function (_a, ref) {
|
|
|
869
869
|
MenuPanel.defaultProps = {
|
|
870
870
|
variant: "grey",
|
|
871
871
|
};
|
|
872
|
-
var fullHeightStyles = react.css(templateObject_1$
|
|
873
|
-
var templateObject_1$
|
|
872
|
+
var fullHeightStyles = react.css(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n height: calc(100vh - 121px);\n"], ["\n height: calc(100vh - 121px);\n"])));
|
|
873
|
+
var templateObject_1$e;
|
|
874
874
|
|
|
875
875
|
var Switch = React.forwardRef(function (_a, ref) {
|
|
876
876
|
var form = _a.form, name = _a.name, props = __rest(_a, ["form", "name"]);
|
|
@@ -923,14 +923,14 @@ InputPhoneWithForm.defaultProps = {
|
|
|
923
923
|
};
|
|
924
924
|
|
|
925
925
|
var Table = React.forwardRef(function (props, ref) { return jsxRuntime.jsx(StyledTable, __assign({ cellSpacing: "0", ref: ref }, props)); });
|
|
926
|
-
var StyledTable = styled__default["default"].table(templateObject_1$
|
|
927
|
-
var templateObject_1$
|
|
926
|
+
var StyledTable = styled__default["default"].table(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n width: 100%;\n border-spacing: 0;\n"], ["\n width: 100%;\n border-spacing: 0;\n"])));
|
|
927
|
+
var templateObject_1$d;
|
|
928
928
|
|
|
929
|
-
var TableHeadCell = styled__default["default"].th(templateObject_1$
|
|
930
|
-
var templateObject_1$
|
|
929
|
+
var TableHeadCell = styled__default["default"].th(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n padding: 0;\n text-align: left;\n"], ["\n padding: 0;\n text-align: left;\n"])));
|
|
930
|
+
var templateObject_1$c;
|
|
931
931
|
|
|
932
|
-
var TableCell = styled__default["default"].td(templateObject_1$
|
|
933
|
-
var templateObject_1$
|
|
932
|
+
var TableCell = styled__default["default"].td(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n padding: 0;\n"], ["\n padding: 0;\n"])));
|
|
933
|
+
var templateObject_1$b;
|
|
934
934
|
|
|
935
935
|
var TableRow = React.forwardRef(function (_a, ref) {
|
|
936
936
|
var children = _a.children, other = __rest(_a, ["children"]);
|
|
@@ -969,15 +969,15 @@ var PopperBase = React.forwardRef(function (props, ref) {
|
|
|
969
969
|
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"]);
|
|
970
970
|
return (jsxRuntime.jsx(StyledPopperWrapper, __assign({ ref: ref, className: classNames__default["default"]("KUI-Popper", className), spacing: spacing, style: style }, { children: jsxRuntime.jsx(StyledPopper, __assign({ open: !!open }, other, { children: children })) })));
|
|
971
971
|
});
|
|
972
|
-
var StyledPopperWrapper = styled__default["default"].div(templateObject_1$
|
|
972
|
+
var StyledPopperWrapper = styled__default["default"].div(templateObject_1$a || (templateObject_1$a = __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) {
|
|
973
973
|
var spacing = _a.spacing;
|
|
974
974
|
return spacing || 0;
|
|
975
975
|
}, kuiBasic.theme.breakpoints.xxs);
|
|
976
|
-
var StyledPopper = styled__default["default"].div(templateObject_2$
|
|
976
|
+
var StyledPopper = styled__default["default"].div(templateObject_2$7 || (templateObject_2$7 = __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) {
|
|
977
977
|
var open = _a.open;
|
|
978
978
|
return (open ? 1 : 0);
|
|
979
979
|
});
|
|
980
|
-
var templateObject_1$
|
|
980
|
+
var templateObject_1$a, templateObject_2$7;
|
|
981
981
|
|
|
982
982
|
var PopperWithPortal = React.forwardRef(function (props, ref) {
|
|
983
983
|
var placement = props.placement, contentRef = props.contentRef, other = __rest(props, ["placement", "contentRef"]);
|
|
@@ -1021,9 +1021,9 @@ var PopperWithPortal = React.forwardRef(function (props, ref) {
|
|
|
1021
1021
|
// TODO подумать как реализовать правильное расположение подсказки под contentRef в зависимости от placement
|
|
1022
1022
|
// Автоматом менять положение (верх-низ) в зависимости от того помещается или нет
|
|
1023
1023
|
// Распожить стрелочку к контенту посередине контента
|
|
1024
|
-
return ReactDOM__namespace.createPortal(jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(react.Global, { styles: react.css(templateObject_1$
|
|
1024
|
+
return ReactDOM__namespace.createPortal(jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(react.Global, { styles: react.css(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n body {\n position: relative;\n }\n "], ["\n body {\n position: relative;\n }\n "]))) }), jsxRuntime.jsx(PopperBase, __assign({ ref: forwardedRef, style: position }, other))] }), document.body);
|
|
1025
1025
|
});
|
|
1026
|
-
var templateObject_1$
|
|
1026
|
+
var templateObject_1$9;
|
|
1027
1027
|
|
|
1028
1028
|
var StaticPopper = React.forwardRef(function (props, ref) {
|
|
1029
1029
|
var placement = props.placement, contentRef = props.contentRef, other = __rest(props, ["placement", "contentRef"]);
|
|
@@ -1105,24 +1105,24 @@ var Tooltip = React.forwardRef(function (props, ref) {
|
|
|
1105
1105
|
React.useEffect(function () {
|
|
1106
1106
|
setOpen(open);
|
|
1107
1107
|
}, [open]);
|
|
1108
|
-
return (jsxRuntime.jsxs(StyledWrapper$
|
|
1108
|
+
return (jsxRuntime.jsxs(StyledWrapper$4, __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 }))] })));
|
|
1109
1109
|
});
|
|
1110
|
-
var containerCSS = react.css(templateObject_1$
|
|
1111
|
-
var StyledWrapper$
|
|
1112
|
-
var StyledContentWrapper = styled__default["default"].div(templateObject_3$
|
|
1110
|
+
var containerCSS = react.css(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n display: inline-flex;\n width: 100%;\n height: fit-content;\n"], ["\n display: inline-flex;\n width: 100%;\n height: fit-content;\n"])));
|
|
1111
|
+
var StyledWrapper$4 = styled__default["default"].div(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n ", ";\n position: relative;\n"], ["\n ", ";\n position: relative;\n"])), containerCSS);
|
|
1112
|
+
var StyledContentWrapper = styled__default["default"].div(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n ", ";\n cursor: ", ";\n"], ["\n ", ";\n cursor: ", ";\n"])), containerCSS, function (_a) {
|
|
1113
1113
|
var cursor = _a.cursor;
|
|
1114
1114
|
return cursor;
|
|
1115
1115
|
});
|
|
1116
1116
|
var StyledContent = styled__default["default"].div(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n ", ";\n z-index: -1;\n"], ["\n ", ";\n z-index: -1;\n"])), containerCSS);
|
|
1117
|
-
var templateObject_1$
|
|
1117
|
+
var templateObject_1$8, templateObject_2$6, templateObject_3$3, templateObject_4$1;
|
|
1118
1118
|
|
|
1119
1119
|
var ButtonSelect = React.forwardRef(function (props, ref) {
|
|
1120
1120
|
var _a;
|
|
1121
1121
|
var options = props.options, otherProps = __rest(props, ["options"]);
|
|
1122
1122
|
return (jsxRuntime.jsx(StyledInputSelect, __assign({ value: (_a = options === null || options === void 0 ? void 0 : options[0]) === null || _a === void 0 ? void 0 : _a.value, options: options, iconProps: { width: 9, height: 5 } }, otherProps, { ref: ref })));
|
|
1123
1123
|
});
|
|
1124
|
-
var StyledInputSelect = styled__default["default"](InputSelect)(templateObject_1$
|
|
1125
|
-
var templateObject_1$
|
|
1124
|
+
var StyledInputSelect = styled__default["default"](InputSelect)(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n &.KUI-Input_container {\n height: 40px;\n width: fit-content;\n input {\n height: 40px;\n border-radius: 66px;\n padding: 0 12px;\n transform: none;\n font-size: 12px;\n line-height: 14px;\n margin: 0 !important;\n width: auto !important;\n }\n\n @media (max-width: ", "px) {\n height: 32px;\n input {\n height: 32px;\n }\n }\n }\n & + div {\n top: 22px;\n padding-top: 22px;\n }\n"], ["\n &.KUI-Input_container {\n height: 40px;\n width: fit-content;\n input {\n height: 40px;\n border-radius: 66px;\n padding: 0 12px;\n transform: none;\n font-size: 12px;\n line-height: 14px;\n margin: 0 !important;\n width: auto !important;\n }\n\n @media (max-width: ", "px) {\n height: 32px;\n input {\n height: 32px;\n }\n }\n }\n & + div {\n top: 22px;\n padding-top: 22px;\n }\n"])), kuiBasic.theme.breakpoints.xs);
|
|
1125
|
+
var templateObject_1$7;
|
|
1126
1126
|
|
|
1127
1127
|
function InputSelectWithController(_a) {
|
|
1128
1128
|
var _b, _c;
|
|
@@ -1152,17 +1152,17 @@ function InputMultiSelectOption(props) {
|
|
|
1152
1152
|
var selected = selectedValue.includes(option.value);
|
|
1153
1153
|
return (jsxRuntime.jsx(StyledOption, __assign({ container: true, selected: selected }, { children: jsxRuntime.jsx(kuiBasic.Checkbox, { checked: selected, label: jsxRuntime.jsx(StyledCaption, __assign({ selected: selected, size: "sm", weight: 500 }, { children: option.label })) }) })));
|
|
1154
1154
|
}
|
|
1155
|
-
var StyledOption = styled__default["default"](kuiBasic.Grid)(templateObject_1$
|
|
1155
|
+
var StyledOption = styled__default["default"](kuiBasic.Grid)(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n padding: 8px;\n transition: all ease-out 0.3s;\n border-radius: 4px;\n background-color: ", ";\n &:hover {\n background-color: ", ";\n p {\n color: ", " !important;\n }\n }\n"], ["\n padding: 8px;\n transition: all ease-out 0.3s;\n border-radius: 4px;\n background-color: ", ";\n &:hover {\n background-color: ", ";\n p {\n color: ", " !important;\n }\n }\n"])), function (_a) {
|
|
1156
1156
|
var selected = _a.selected;
|
|
1157
1157
|
return selected ? kuiBasic.theme.palette.background.light1 : kuiBasic.theme.palette.grey.zero;
|
|
1158
1158
|
}, kuiBasic.theme.palette.background.light1, kuiBasic.theme.palette.grey.seventy);
|
|
1159
|
-
var StyledCaption = styled__default["default"](kuiBasic.Caption)(templateObject_2$
|
|
1159
|
+
var StyledCaption = styled__default["default"](kuiBasic.Caption)(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n color: ", " !important;\n"], ["\n color: ", " !important;\n"])), function (_a) {
|
|
1160
1160
|
var selected = _a.selected;
|
|
1161
1161
|
return selected
|
|
1162
1162
|
? kuiBasic.theme.palette.grey.seventy
|
|
1163
1163
|
: kuiBasic.theme.palette.grey.fiftyP;
|
|
1164
1164
|
});
|
|
1165
|
-
var templateObject_1$
|
|
1165
|
+
var templateObject_1$6, templateObject_2$5;
|
|
1166
1166
|
|
|
1167
1167
|
function InputMultiSelect(_a) {
|
|
1168
1168
|
var _b, _c;
|
|
@@ -1265,18 +1265,18 @@ function RadioGroupWithLabel(props) {
|
|
|
1265
1265
|
name: name,
|
|
1266
1266
|
}).fieldState;
|
|
1267
1267
|
var errorMessage = (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message;
|
|
1268
|
-
return (jsxRuntime.jsxs(StyledContainer, { children: [jsxRuntime.jsxs(StyledWrapper, __assign({ container: true, alignItems: direction === "vertical" ? "flex-start" : "center", justify: "space-between", direction: direction === "vertical" ? "column" : "row", hasError: !!errorMessage, className: className, withTitle: !!title }, { children: [title && (jsxRuntime.jsx(StyledTitle, __assign({ direction: direction, size: "xs", weight: 600 }, { children: title.toUpperCase() }))), jsxRuntime.jsx(RadioButtonsWithController, __assign({ form: form, name: name }, otherProps))] })), errorMessage && jsxRuntime.jsx(kuiBasic.InputMessage, { variant: "error", msg: errorMessage })] }));
|
|
1268
|
+
return (jsxRuntime.jsxs(StyledContainer, { children: [jsxRuntime.jsxs(StyledWrapper$3, __assign({ container: true, alignItems: direction === "vertical" ? "flex-start" : "center", justify: "space-between", direction: direction === "vertical" ? "column" : "row", hasError: !!errorMessage, className: className, withTitle: !!title }, { children: [title && (jsxRuntime.jsx(StyledTitle, __assign({ direction: direction, size: "xs", weight: 600 }, { children: title.toUpperCase() }))), jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true, xs: direction === "vertical" ? 12 : "auto" }, { children: jsxRuntime.jsx(RadioButtonsWithController, __assign({ form: form, name: name }, otherProps)) }))] })), errorMessage && jsxRuntime.jsx(kuiBasic.InputMessage, { variant: "error", msg: errorMessage })] }));
|
|
1269
1269
|
}
|
|
1270
|
-
var StyledContainer = styled__default["default"].div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
1270
|
+
var StyledContainer = styled__default["default"].div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
1271
1271
|
var columnDirectionCSS = function (_a) {
|
|
1272
1272
|
var hasError = _a.hasError;
|
|
1273
|
-
return react.css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n padding: 12px 15px 15px;\n border-radius: ", ";\n"], ["\n padding: 12px 15px 15px;\n border-radius: ", ";\n"])), hasError ? "8px 8px 0 0" : "8px");
|
|
1273
|
+
return react.css(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n padding: 12px 15px 15px;\n border-radius: ", ";\n"], ["\n padding: 12px 15px 15px;\n border-radius: ", ";\n"])), hasError ? "8px 8px 0 0" : "8px");
|
|
1274
1274
|
};
|
|
1275
1275
|
var rowDirectionCSS = function (_a) {
|
|
1276
1276
|
var hasError = _a.hasError, withTitle = _a.withTitle;
|
|
1277
|
-
return react.css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n padding: ", ";\n border-radius: ", ";\n"], ["\n padding: ", ";\n border-radius: ", ";\n"])), withTitle ? "3px 4px 3px 16px" : "3px", hasError ? "66px 66px 0 0" : "66px");
|
|
1277
|
+
return react.css(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n padding: ", ";\n border-radius: ", ";\n"], ["\n padding: ", ";\n border-radius: ", ";\n"])), withTitle ? "3px 4px 3px 16px" : "3px", hasError ? "66px 66px 0 0" : "66px");
|
|
1278
1278
|
};
|
|
1279
|
-
var StyledWrapper = styled__default["default"](kuiBasic.Grid, {
|
|
1279
|
+
var StyledWrapper$3 = styled__default["default"](kuiBasic.Grid, {
|
|
1280
1280
|
shouldForwardProp: function (prop) { return prop !== "hasError" && prop !== "withTitle"; },
|
|
1281
1281
|
})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n border: 1px solid\n ", ";\n ", ";\n"], ["\n border: 1px solid\n ", ";\n ", ";\n"])), function (_a) {
|
|
1282
1282
|
var hasError = _a.hasError;
|
|
@@ -1291,8 +1291,120 @@ var StyledTitle = styled__default["default"](kuiBasic.Caption)(templateObject_5
|
|
|
1291
1291
|
var direction = _a.direction;
|
|
1292
1292
|
return (direction === "vertical" ? 8 : 0);
|
|
1293
1293
|
});
|
|
1294
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
1294
|
+
var templateObject_1$5, templateObject_2$4, templateObject_3$2, templateObject_4, templateObject_5;
|
|
1295
|
+
|
|
1296
|
+
var Loading = React.forwardRef(function (_a) {
|
|
1297
|
+
var height = _a.height, className = _a.className, otherProps = __rest(_a, ["height", "className"]);
|
|
1298
|
+
return (jsxRuntime.jsx(StyledWrapper$2, __assign({ container: true, alignItems: "center", justify: "center", className: className, height: height }, { children: jsxRuntime.jsx(StyledCircularProgress, __assign({}, otherProps)) })));
|
|
1299
|
+
});
|
|
1300
|
+
Loading.defaultProps = {
|
|
1301
|
+
height: "adaptive",
|
|
1302
|
+
};
|
|
1303
|
+
var StyledCircularProgress = styled__default["default"](kuiBasic.CircularProgress)(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), kuiBasic.theme.palette.brand.main);
|
|
1304
|
+
var StyledWrapper$2 = styled__default["default"](kuiBasic.Grid, {
|
|
1305
|
+
shouldForwardProp: function (prop) { return prop !== "height"; },
|
|
1306
|
+
})(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n height: ", ";\n"], ["\n height: ", ";\n"])), function (_a) {
|
|
1307
|
+
var height = _a.height;
|
|
1308
|
+
return height;
|
|
1309
|
+
});
|
|
1310
|
+
var templateObject_1$4, templateObject_2$3;
|
|
1311
|
+
|
|
1312
|
+
function CreatingEntityFromDropdown(_a) {
|
|
1313
|
+
var creatingLabel = _a.creatingLabel, renderCreatingModal = _a.renderCreatingModal;
|
|
1314
|
+
var _b = useToggle(), isModalOpen = _b[0], handleModalOpen = _b[1], handleModalClose = _b[2];
|
|
1315
|
+
if (!creatingLabel || !renderCreatingModal) {
|
|
1316
|
+
return null;
|
|
1317
|
+
}
|
|
1318
|
+
var handleModalWrapperClick = function (e) { return e.stopPropagation(); };
|
|
1319
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(StyledWrapper$1, __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({
|
|
1320
|
+
isOpen: isModalOpen,
|
|
1321
|
+
handleClose: handleModalClose,
|
|
1322
|
+
}) }))] }));
|
|
1323
|
+
}
|
|
1324
|
+
var StyledWrapper$1 = styled__default["default"](kuiBasic.Grid)(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n width: 100%;\n position: sticky;\n bottom: 0;\n left: 0;\n border-radius: 0 0 12px 12px;\n border-top: 1px solid ", ";\n padding: 8px 19px;\n cursor: pointer;\n background: white;\n"], ["\n width: 100%;\n position: sticky;\n bottom: 0;\n left: 0;\n border-radius: 0 0 12px 12px;\n border-top: 1px solid ", ";\n padding: 8px 19px;\n cursor: pointer;\n background: white;\n"])), kuiBasic.theme.palette.grey.fifteenB);
|
|
1325
|
+
var StyledPlusIcon = styled__default["default"](kuiIcon.PlusIcon)(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n margin-right: 14px;\n path {\n fill: ", ";\n }\n"], ["\n margin-right: 14px;\n path {\n fill: ", ";\n }\n"])), kuiBasic.theme.palette.grey.fiftyP);
|
|
1326
|
+
var StyledModalWrapper = styled__default["default"].div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject([""], [""])));
|
|
1327
|
+
var templateObject_1$3, templateObject_2$2, templateObject_3$1;
|
|
1328
|
+
|
|
1329
|
+
var AutocompleteOption = function (props) {
|
|
1330
|
+
var option = props.option, renderOption = props.renderOption, handleSelect = props.handleSelect, index = props.index;
|
|
1331
|
+
var handleClick = function () {
|
|
1332
|
+
handleSelect(option);
|
|
1333
|
+
};
|
|
1334
|
+
return (jsxRuntime.jsx(StyledOptionWrapper, __assign({ item: true, xs: 12, onClick: handleClick, "data-testid": "autocomplete_option_".concat(index) }, { children: renderOption(option) })));
|
|
1335
|
+
};
|
|
1336
|
+
var StyledOptionWrapper = styled__default["default"](kuiBasic.Grid)(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n cursor: pointer;\n"], ["\n cursor: pointer;\n"])));
|
|
1337
|
+
var templateObject_1$2;
|
|
1338
|
+
|
|
1339
|
+
function AutocompleteDropdown(props) {
|
|
1340
|
+
var options = props.options, renderOption = props.renderOption, creatingLabel = props.creatingLabel, renderCreatingModal = props.renderCreatingModal;
|
|
1341
|
+
var inputRef = props.inputRef, isOpenDropdown = props.isOpenDropdown, isLoading = props.isLoading;
|
|
1342
|
+
var handleCloseDropdown = props.handleCloseDropdown, handleSelect = props.handleSelect, handleScrollEnd = props.handleScrollEnd;
|
|
1343
|
+
var handleScroll = function (e) {
|
|
1344
|
+
if (e.target.scrollHeight - (e.target.scrollTop + e.target.offsetHeight) <
|
|
1345
|
+
100) {
|
|
1346
|
+
if (handleScrollEnd)
|
|
1347
|
+
handleScrollEnd();
|
|
1348
|
+
}
|
|
1349
|
+
};
|
|
1350
|
+
return (jsxRuntime.jsxs(StyledDropdown, __assign({ buttonRef: inputRef, isOpen: isOpenDropdown, handleClose: handleCloseDropdown, onScroll: handleScroll, endComponent: jsxRuntime.jsx(CreatingEntityFromDropdown, { creatingLabel: creatingLabel, renderCreatingModal: renderCreatingModal }) }, { children: [options.map(function (option, key) { return (jsxRuntime.jsx(AutocompleteOption, { option: option, renderOption: renderOption, handleSelect: handleSelect, index: key }, key)); }), isLoading && jsxRuntime.jsx(StyledLoading, { height: "auto" })] })));
|
|
1351
|
+
}
|
|
1352
|
+
var StyledDropdown = styled__default["default"](InputDropdown)(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n .KUI-InputDropdown_scroll {\n max-height: 142px;\n padding: 0 4px;\n }\n"], ["\n .KUI-InputDropdown_scroll {\n max-height: 142px;\n padding: 0 4px;\n }\n"])));
|
|
1353
|
+
var StyledLoading = styled__default["default"](Loading)(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n position: sticky;\n bottom: 30px;\n"], ["\n position: sticky;\n bottom: 30px;\n"])));
|
|
1354
|
+
var templateObject_1$1, templateObject_2$1;
|
|
1355
|
+
|
|
1356
|
+
function InputWithAutocomplete(_a) {
|
|
1357
|
+
var _b;
|
|
1358
|
+
var renderOption = _a.renderOption, options = _a.options, name = _a.name, hideName = _a.hideName, form = _a.form, isLoading = _a.isLoading, onSelectItem = _a.onSelectItem, handleScrollEnd = _a.handleScrollEnd, onSearchItem = _a.onSearchItem, isLabelLoading = _a.isLabelLoading, disabled = _a.disabled, creatingLabel = _a.creatingLabel, renderCreatingModal = _a.renderCreatingModal, endComponent = _a.endComponent, inputRefProps = _a.inputRef, inputProps = __rest(_a, ["renderOption", "options", "name", "hideName", "form", "isLoading", "onSelectItem", "handleScrollEnd", "onSearchItem", "isLabelLoading", "disabled", "creatingLabel", "renderCreatingModal", "endComponent", "inputRef"]);
|
|
1359
|
+
var _c = React.useState(false), isOpenDropdown = _c[0], setIsOpenDropDown = _c[1];
|
|
1360
|
+
var inputRef = React.useRef(null);
|
|
1361
|
+
if (hideName)
|
|
1362
|
+
form.register(hideName);
|
|
1363
|
+
var handleOpenDropdown = function () {
|
|
1364
|
+
setIsOpenDropDown(true);
|
|
1365
|
+
};
|
|
1366
|
+
var handleCloseDropdown = function () {
|
|
1367
|
+
setIsOpenDropDown(false);
|
|
1368
|
+
};
|
|
1369
|
+
var handleSelect = function (option) {
|
|
1370
|
+
var _a;
|
|
1371
|
+
onSelectItem(option);
|
|
1372
|
+
handleCloseDropdown();
|
|
1373
|
+
var error = (_a = form.getFieldState(name).error) === null || _a === void 0 ? void 0 : _a.message;
|
|
1374
|
+
if (error) {
|
|
1375
|
+
form.clearErrors(name);
|
|
1376
|
+
}
|
|
1377
|
+
};
|
|
1378
|
+
var handleSearch = function (e) {
|
|
1379
|
+
if (onSearchItem) {
|
|
1380
|
+
onSearchItem(e.target.value);
|
|
1381
|
+
form.setValue(hideName, null);
|
|
1382
|
+
}
|
|
1383
|
+
if (!e.target.value && hideName) {
|
|
1384
|
+
form.setValue(hideName, null);
|
|
1385
|
+
form.setValue(name, null);
|
|
1386
|
+
onSelectItem(null);
|
|
1387
|
+
}
|
|
1388
|
+
handleOpenDropdown();
|
|
1389
|
+
};
|
|
1390
|
+
var forwardRef = useForkRef(inputRef, inputRefProps);
|
|
1391
|
+
return (jsxRuntime$1.jsxs(StyledWrapper, { children: [isLabelLoading && (jsxRuntime$1.jsx(StyledLoadingWrapper, { children: jsxRuntime$1.jsx(Loading, { height: "100%" }) })), jsxRuntime$1.jsx(StyledInput, __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 ||
|
|
1392
|
+
(!disabled && (jsxRuntime$1.jsx(kuiIcon.HalfArrowIcon, { width: 12, height: 13, css: [
|
|
1393
|
+
{ transition: "all linear .2s" },
|
|
1394
|
+
isOpenDropdown && { transform: "rotate(180deg)" },
|
|
1395
|
+
] })))] }))) })), jsxRuntime$1.jsx(AutocompleteDropdown, { renderOption: renderOption, options: options, inputRef: {
|
|
1396
|
+
current: (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.parentElement,
|
|
1397
|
+
}, isOpenDropdown: isOpenDropdown, handleCloseDropdown: handleCloseDropdown, handleSelect: handleSelect, isLoading: isLoading, handleScrollEnd: handleScrollEnd, creatingLabel: creatingLabel, renderCreatingModal: renderCreatingModal })] }));
|
|
1398
|
+
}
|
|
1399
|
+
var StyledLoadingWrapper = styled__default["default"].div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n z-index: 1;\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n z-index: 1;\n"])));
|
|
1400
|
+
var StyledWrapper = styled__default["default"].div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
1401
|
+
var StyledInput = styled__default["default"](InputWithController)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n .KUI-InputMessage {\n opacity: ", ";\n }\n"], ["\n .KUI-InputMessage {\n opacity: ", ";\n }\n"])), function (_a) {
|
|
1402
|
+
var isDropdownOpen = _a.isDropdownOpen;
|
|
1403
|
+
return (isDropdownOpen ? 0 : 1);
|
|
1404
|
+
});
|
|
1405
|
+
var templateObject_1, templateObject_2, templateObject_3;
|
|
1295
1406
|
|
|
1407
|
+
exports.AutocompleteOption = AutocompleteOption;
|
|
1296
1408
|
exports.Avatar = Avatar;
|
|
1297
1409
|
exports.ButtonSelect = ButtonSelect;
|
|
1298
1410
|
exports.ButtonTab = ButtonTab;
|
|
@@ -1311,6 +1423,7 @@ exports.InputSelect = InputSelect;
|
|
|
1311
1423
|
exports.InputSelectDropdown = InputSelectDropdown;
|
|
1312
1424
|
exports.InputSelectWithController = InputSelectWithController;
|
|
1313
1425
|
exports.InputTextAreaMobile = InputTextAreaMobile;
|
|
1426
|
+
exports.InputWithAutocomplete = InputWithAutocomplete;
|
|
1314
1427
|
exports.InputWithController = InputWithController;
|
|
1315
1428
|
exports.InputWithDatePicker = InputWithDatePicker;
|
|
1316
1429
|
exports.InputWithMask = InputWithMask;
|