kui-complex 0.0.14 → 0.0.15
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 +38 -1
- package/dist/index.es.js +184 -64
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +188 -62
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -5,6 +5,8 @@ import * as kui_basic from 'kui-basic';
|
|
|
5
5
|
import { InputWithAdornmentsProps, GridProps, SwitchProps, CaptionProps, InputWithCountryDropdownProps } from 'kui-basic';
|
|
6
6
|
import { UseFormReturn, FieldValues } from 'react-hook-form';
|
|
7
7
|
import * as react_datepicker from 'react-datepicker';
|
|
8
|
+
import * as _emotion_styled from '@emotion/styled';
|
|
9
|
+
import * as _emotion_react from '@emotion/react';
|
|
8
10
|
|
|
9
11
|
type AvatarSizes = "s" | "lg"
|
|
10
12
|
|
|
@@ -246,4 +248,39 @@ interface InputPhoneWithFormProps
|
|
|
246
248
|
|
|
247
249
|
declare const InputPhoneWithForm: React__default.ForwardRefExoticComponent<Pick<InputPhoneWithFormProps, "label" | "size" | "color" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "form" | "pattern" | "height" | "width" | "list" | "step" | "alt" | "crossOrigin" | "src" | "type" | "endIcon" | "startIcon" | "disabled" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "value" | "error" | "inputRef" | "cornerLabel" | "isTextArea" | "inputStyles" | "labelStyles" | "messageClassName" | "labelInlineStyles" | "errorMessage" | "inputValue" | "accept" | "autoComplete" | "capture" | "checked" | "enterKeyHint" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "readOnly" | "required" | "onSelectCountry" | "hiddenInputProps"> & React__default.RefAttributes<HTMLInputElement>>;
|
|
248
250
|
|
|
249
|
-
|
|
251
|
+
declare const Table: (props: React.DetailedHTMLProps<React.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>) => JSX.Element;
|
|
252
|
+
|
|
253
|
+
declare const TableHeadCell: _emotion_styled.StyledComponent<{
|
|
254
|
+
theme?: _emotion_react.Theme | undefined;
|
|
255
|
+
as?: React.ElementType<any> | undefined;
|
|
256
|
+
}, React.DetailedHTMLProps<React.ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, {}>;
|
|
257
|
+
|
|
258
|
+
declare const TableCell: _emotion_styled.StyledComponent<{
|
|
259
|
+
theme?: _emotion_react.Theme | undefined;
|
|
260
|
+
as?: React.ElementType<any> | undefined;
|
|
261
|
+
}, React.DetailedHTMLProps<React.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, {}>;
|
|
262
|
+
|
|
263
|
+
declare const TableRow: ({ children, ...other }: React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>) => JSX.Element;
|
|
264
|
+
|
|
265
|
+
type PopperPlacements =
|
|
266
|
+
| "right"
|
|
267
|
+
| "left"
|
|
268
|
+
| "topStart"
|
|
269
|
+
| "topMiddle"
|
|
270
|
+
| "topEnd"
|
|
271
|
+
| "bottomStart"
|
|
272
|
+
| "bottomMiddle"
|
|
273
|
+
| "bottomEnd"
|
|
274
|
+
|
|
275
|
+
declare const Tooltip: React.ForwardRefExoticComponent<{
|
|
276
|
+
onOpen?: (() => void) | undefined;
|
|
277
|
+
onClose?: (() => void) | undefined;
|
|
278
|
+
content: React.ReactNode;
|
|
279
|
+
} & {
|
|
280
|
+
open?: boolean | undefined;
|
|
281
|
+
placement?: PopperPlacements | undefined;
|
|
282
|
+
withArrow?: boolean | undefined;
|
|
283
|
+
contentRef: React.RefObject<HTMLDivElement>;
|
|
284
|
+
} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<unknown>>;
|
|
285
|
+
|
|
286
|
+
export { Avatar, ButtonTab, ButtonsPanel, CalendarHeaderWithSelect, CalendarStandardContainer, CalendarStandardHeader, DesktopInputWithMonthPicker, DesktopMenuPanel, InputDropdown, InputForDatepicker, InputPassword, InputPhoneWithForm, InputSelect, InputSelectDropdown, InputTextAreaMobile, InputWithController, InputWithDatePicker, InputWithMonthPicker, MenuItem, MenuPanel, MobileInputWithMonthPicker, MobileMenuPanel, MonthPickerContainer, MonthPickerHeader, PassportStrengthBar, SelectMonth, SelectYear, Switch, Table, TableCell, TableHeadCell, TableRow, Tooltip, UndefinedAvatar };
|
package/dist/index.es.js
CHANGED
|
@@ -2,7 +2,7 @@ import 'react-datepicker/dist/react-datepicker.css';
|
|
|
2
2
|
import 'swiper/swiper-bundle.css';
|
|
3
3
|
import { jsx as jsx$1, jsxs, Fragment } from '@emotion/react/jsx-runtime';
|
|
4
4
|
import styled from '@emotion/styled';
|
|
5
|
-
import { css } from '@emotion/react';
|
|
5
|
+
import { css, Global } from '@emotion/react';
|
|
6
6
|
import { jsx, jsxs as jsxs$1, Fragment as Fragment$1 } from 'react/jsx-runtime';
|
|
7
7
|
import { theme, Caption, Button, Container, Grid, InputWithAdornments, Heading, IconButton, LinearProgress, Divider, Modal, Switch as Switch$1, InputWithCountryDropdown } from 'kui-basic';
|
|
8
8
|
import * as React from 'react';
|
|
@@ -17,6 +17,7 @@ import { scroller, Events, Link, animateScroll, Element } from 'react-scroll';
|
|
|
17
17
|
import ru from 'date-fns/locale/ru';
|
|
18
18
|
import { DateTime } from 'luxon';
|
|
19
19
|
import Swiper from 'react-id-swiper';
|
|
20
|
+
import * as ReactDOM from 'react-dom';
|
|
20
21
|
|
|
21
22
|
/******************************************************************************
|
|
22
23
|
Copyright (c) Microsoft Corporation.
|
|
@@ -73,15 +74,15 @@ var UndefinedAvatar = function (_a) {
|
|
|
73
74
|
.join("");
|
|
74
75
|
return (jsx(Wrapper$8, __assign({ "data-testid": "undefined_avatar" }, { children: jsx(Caption, __assign({ size: "xs", weight: 600, colorGroup: "brand", color: "main" }, otherProps, { children: formattedLabel })) })));
|
|
75
76
|
};
|
|
76
|
-
var Wrapper$8 = styled.div(templateObject_1$
|
|
77
|
-
var templateObject_1$
|
|
77
|
+
var Wrapper$8 = styled.div(templateObject_1$s || (templateObject_1$s = __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"])), theme.palette.brand.light, theme.palette.brand.main);
|
|
78
|
+
var templateObject_1$s;
|
|
78
79
|
|
|
79
80
|
var Avatar = function (_a) {
|
|
80
81
|
var size = _a.size, fullName = _a.fullName, imageUrl = _a.imageUrl, avatarRef = _a.avatarRef, otherProps = __rest(_a, ["size", "fullName", "imageUrl", "avatarRef"]);
|
|
81
82
|
return (jsx$1(Wrapper$7, __assign({ css: sizeStyles[size], ref: avatarRef }, otherProps, { children: imageUrl ? (jsx$1(StyledImage, { "data-testid": "avatar_image", src: imageUrl, alt: "avatar" })) : (jsx$1(StyledUndefinedAvatar, { label: fullName, avatarSize: size })) })));
|
|
82
83
|
};
|
|
83
|
-
var Wrapper$7 = styled.div(templateObject_1$
|
|
84
|
-
var StyledImage = styled.img(templateObject_2$
|
|
84
|
+
var Wrapper$7 = styled.div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n border-radius: 50%;\n overflow: hidden;\n cursor: pointer;\n"], ["\n border-radius: 50%;\n overflow: hidden;\n cursor: pointer;\n"])));
|
|
85
|
+
var StyledImage = styled.img(templateObject_2$e || (templateObject_2$e = __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"])));
|
|
85
86
|
var largeAvatarCSS = function (_a) {
|
|
86
87
|
var avatarSize = _a.avatarSize;
|
|
87
88
|
return avatarSize === "lg" && css(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n font-size: 32px;\n "], ["\n font-size: 32px;\n "])));
|
|
@@ -93,7 +94,7 @@ var sizeStyles = {
|
|
|
93
94
|
s: 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 "]))),
|
|
94
95
|
lg: css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n width: 80px;\n height: 80px;\n "], ["\n width: 80px;\n height: 80px;\n "]))),
|
|
95
96
|
};
|
|
96
|
-
var templateObject_1$
|
|
97
|
+
var templateObject_1$r, templateObject_2$e, templateObject_3$6, templateObject_4$1, templateObject_5$1, templateObject_6;
|
|
97
98
|
|
|
98
99
|
var ButtonTab = function (_a) {
|
|
99
100
|
var index = _a.index, onClick = _a.onClick, isActive = _a.isActive, label = _a.label;
|
|
@@ -102,9 +103,9 @@ var ButtonTab = function (_a) {
|
|
|
102
103
|
};
|
|
103
104
|
return (jsx$1(StyledButton, __assign({ variant: isActive ? "orange" : "white", captionWeight: isActive ? 600 : 400, onClick: handleClick, css: !isActive && inactiveStyles, size: "s" }, { children: label })));
|
|
104
105
|
};
|
|
105
|
-
var StyledButton = styled(Button)(templateObject_1$
|
|
106
|
-
var inactiveStyles = css(templateObject_2$
|
|
107
|
-
var templateObject_1$
|
|
106
|
+
var StyledButton = styled(Button)(templateObject_1$q || (templateObject_1$q = __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"])));
|
|
107
|
+
var inactiveStyles = css(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n p {\n color: ", ";\n }\n"], ["\n p {\n color: ", ";\n }\n"])), theme.palette.grey.seventy);
|
|
108
|
+
var templateObject_1$q, templateObject_2$d;
|
|
108
109
|
|
|
109
110
|
var ButtonsPanel = function (_a) {
|
|
110
111
|
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"]);
|
|
@@ -127,13 +128,13 @@ var ButtonsPanel = function (_a) {
|
|
|
127
128
|
ButtonsPanel.defaultProps = {
|
|
128
129
|
isSticky: false,
|
|
129
130
|
};
|
|
130
|
-
var Content = styled.div(templateObject_1$
|
|
131
|
-
var StyledContainer$1 = styled.div(templateObject_2$
|
|
132
|
-
var templateObject_1$
|
|
131
|
+
var Content = styled.div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n height: 100%;\n"], ["\n height: 100%;\n"])));
|
|
132
|
+
var StyledContainer$1 = styled.div(templateObject_2$c || (templateObject_2$c = __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"])), theme.palette.grey.zero);
|
|
133
|
+
var templateObject_1$p, templateObject_2$c;
|
|
133
134
|
|
|
134
135
|
var dropdownStyles = function (_a) {
|
|
135
136
|
var isOpen = _a.isOpen;
|
|
136
|
-
return css(templateObject_1$
|
|
137
|
+
return css(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n width: 100%;\n max-height: 389px;\n display: ", ";\n position: absolute;\n background: ", ";\n z-index: 3;\n border: 1px solid ", ";\n top: 64px;\n box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);\n border-radius: 8px;\n overflow: auto;\n -ms-overflow-style: none;\n scrollbar-width: none;\n overflow-y: scroll;\n user-select: none;\n &::-webkit-scrollbar {\n width: 0px;\n },\n"], ["\n width: 100%;\n max-height: 389px;\n display: ", ";\n position: absolute;\n background: ", ";\n z-index: 3;\n border: 1px solid ", ";\n top: 64px;\n box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);\n border-radius: 8px;\n overflow: auto;\n -ms-overflow-style: none;\n scrollbar-width: none;\n overflow-y: scroll;\n user-select: none;\n &::-webkit-scrollbar {\n width: 0px;\n },\n"])), isOpen ? "flex" : "none", theme.palette.grey.zero, theme.palette.grey.fifteenB);
|
|
137
138
|
};
|
|
138
139
|
var InputDropdown = function (_a) {
|
|
139
140
|
var isOpen = _a.isOpen, handleClose = _a.handleClose, buttonRef = _a.buttonRef, children = _a.children, otherProps = __rest(_a, ["isOpen", "handleClose", "buttonRef", "children"]);
|
|
@@ -157,7 +158,7 @@ var InputDropdown = function (_a) {
|
|
|
157
158
|
}
|
|
158
159
|
return (jsx$1(Grid, __assign({ "data-testid": "input_dropdown", container: true, ref: dropdownRef, css: dropdownStyles({ isOpen: isOpen }) }, otherProps, { children: children })));
|
|
159
160
|
};
|
|
160
|
-
var templateObject_1$
|
|
161
|
+
var templateObject_1$o;
|
|
161
162
|
|
|
162
163
|
var InputSelectDropdown = function (_a) {
|
|
163
164
|
var options = _a.options, inputRef = _a.inputRef, isOpenDropdown = _a.isOpenDropdown, handleCloseDropdown = _a.handleCloseDropdown, handleSelect = _a.handleSelect, selectedValue = _a.selectedValue;
|
|
@@ -173,10 +174,10 @@ var InputSelectDropdown = function (_a) {
|
|
|
173
174
|
padding: "4px",
|
|
174
175
|
} }, { children: options.map(function (option, key) { return (jsx$1(OptionWrapper, __assign({ onClick: function () { return handleSelect(option); }, "data-value": "autocomplete_option_".concat(option.value), "data-testid": "autocomplete_option_".concat(key) }, { children: jsx$1(StyledOption, __assign({ css: selectedValue === option.value && selectedStyles }, { children: jsx$1(Caption, __assign({ size: "sm", weight: 500 }, { children: option.label })) })) }), option.label)); }) })));
|
|
175
176
|
};
|
|
176
|
-
var OptionWrapper = styled.div(templateObject_1$
|
|
177
|
-
var StyledOption = styled.div(templateObject_2$
|
|
177
|
+
var OptionWrapper = styled.div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n width: 100%;\n padding: 2px 0;\n cursor: pointer;\n"], ["\n width: 100%;\n padding: 2px 0;\n cursor: pointer;\n"])));
|
|
178
|
+
var StyledOption = styled.div(templateObject_2$b || (templateObject_2$b = __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"])), theme.palette.background.light1);
|
|
178
179
|
var selectedStyles = css(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), theme.palette.background.light1);
|
|
179
|
-
var templateObject_1$
|
|
180
|
+
var templateObject_1$n, templateObject_2$b, templateObject_3$5;
|
|
180
181
|
|
|
181
182
|
var getFormValue = function (name, form) {
|
|
182
183
|
var names = name === null || name === void 0 ? void 0 : name.split(".");
|
|
@@ -251,10 +252,10 @@ var InputSelect = forwardRef(function (props, ref) {
|
|
|
251
252
|
current: (_c = (_b = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _b === void 0 ? void 0 : _b.parentElement) === null || _c === void 0 ? void 0 : _c.parentElement,
|
|
252
253
|
}, isOpenDropdown: isOpenDropdown, handleCloseDropdown: handleCloseDropdown, handleSelect: handleSelect, selectedValue: other.value || value }))] }));
|
|
253
254
|
});
|
|
254
|
-
var Wrapper$6 = styled.div(templateObject_1$
|
|
255
|
-
var StyledInput = styled(InputWithAdornments)(templateObject_2$
|
|
255
|
+
var Wrapper$6 = styled.div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n position: relative;\n text-align: left;\n"], ["\n position: relative;\n text-align: left;\n"])));
|
|
256
|
+
var StyledInput = styled(InputWithAdornments)(templateObject_2$a || (templateObject_2$a = __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"])));
|
|
256
257
|
var StyledIconWrapper = styled.div(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n padding-right: 8px;\n height: 13px;\n"], ["\n padding-right: 8px;\n height: 13px;\n"])));
|
|
257
|
-
var templateObject_1$
|
|
258
|
+
var templateObject_1$m, templateObject_2$a, templateObject_3$4;
|
|
258
259
|
|
|
259
260
|
var SelectYear = function (_a) {
|
|
260
261
|
var yearOptions = _a.yearOptions; _a.options; var props = __rest(_a, ["yearOptions", "options"]);
|
|
@@ -290,25 +291,25 @@ var CalendarHeaderWithSelect = function (_a) {
|
|
|
290
291
|
var month = date.getMonth() + 1;
|
|
291
292
|
return (jsx(Wrapper$5, { children: jsxs$1(Grid, __assign({ container: true, spacing: 2 }, { children: [jsx(Grid, __assign({ item: true, xs: 6 }, { children: jsx(SelectYear, { yearOptions: yearOptions, value: year, handleChange: changeYear }) })), jsx(Grid, __assign({ item: true, xs: 6 }, { children: jsx(SelectMonth, { value: month, handleChange: changeMonth }) }))] })) }));
|
|
292
293
|
};
|
|
293
|
-
var Wrapper$5 = styled.div(templateObject_1$
|
|
294
|
-
var templateObject_1$
|
|
294
|
+
var Wrapper$5 = styled.div(templateObject_1$l || (templateObject_1$l = __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"])));
|
|
295
|
+
var templateObject_1$l;
|
|
295
296
|
|
|
296
297
|
var CalendarStandardContainer = function (_a) {
|
|
297
298
|
_a.arrowProps; _a.showPopperArrow; var props = __rest(_a, ["arrowProps", "showPopperArrow"]);
|
|
298
299
|
return jsx(DatePickerContainer, __assign({}, props));
|
|
299
300
|
};
|
|
300
|
-
var DatePickerContainer = styled.div(templateObject_1$
|
|
301
|
-
var templateObject_1$
|
|
301
|
+
var DatePickerContainer = styled.div(templateObject_1$k || (templateObject_1$k = __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--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--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"])), theme.palette.grey.fiftyP, theme.palette.background.light3, theme.palette.background.light3, theme.palette.brand.main, theme.palette.brand.main, theme.palette.grey.fifteenB, theme.palette.red.fiftyP, theme.palette.grey.zero);
|
|
302
|
+
var templateObject_1$k;
|
|
302
303
|
|
|
303
304
|
var CalendarStandardHeader = function (_a) {
|
|
304
305
|
var decreaseMonth = _a.decreaseMonth, increaseMonth = _a.increaseMonth, nextMonthButtonDisabled = _a.nextMonthButtonDisabled, prevMonthButtonDisabled = _a.prevMonthButtonDisabled, date = _a.date;
|
|
305
306
|
var title = _.capitalize(date.toLocaleString("ru", { month: "long", year: "numeric" })).slice(0, -3);
|
|
306
307
|
return (jsxs$1(HeaderWrapper, __assign({ container: true, alignItems: "center", justify: "space-between" }, { children: [jsx(Grid, __assign({ item: true }, { children: jsx(StyledHeading, __assign({ size: "h4" }, { children: title })) })), jsx(Grid, __assign({ item: true }, { children: jsxs$1(Grid, __assign({ container: true, spacing: 2 }, { children: [jsx(Grid, __assign({ item: true }, { children: jsx(CircleButtonStyled, __assign({ isCircle: true, size: "xs", "data-testid": "prev_month_button", variant: "white", disabled: prevMonthButtonDisabled, onClick: decreaseMonth }, { children: jsx(PrevArrowIcon, { width: 10, height: 10 }) })) })), jsx(Grid, __assign({ item: true }, { children: jsx(CircleButtonStyled, __assign({ isCircle: true, size: "xs", variant: "white", disabled: nextMonthButtonDisabled, onClick: increaseMonth }, { children: jsx(NextArrowIcon, { width: 10, height: 10 }) })) }))] })) }))] })));
|
|
307
308
|
};
|
|
308
|
-
var HeaderWrapper = styled(Grid)(templateObject_1$
|
|
309
|
-
var StyledHeading = styled(Heading)(templateObject_2$
|
|
309
|
+
var HeaderWrapper = styled(Grid)(templateObject_1$j || (templateObject_1$j = __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"])));
|
|
310
|
+
var StyledHeading = styled(Heading)(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n @media (max-width: 600px) {\n font-weight: 700;\n }\n"], ["\n @media (max-width: 600px) {\n font-weight: 700;\n }\n"])));
|
|
310
311
|
var CircleButtonStyled = styled(Button)(templateObject_3$3 || (templateObject_3$3 = __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"])));
|
|
311
|
-
var templateObject_1$
|
|
312
|
+
var templateObject_1$j, templateObject_2$9, templateObject_3$3;
|
|
312
313
|
|
|
313
314
|
var InputForDatepicker = forwardRef(function (_a, ref) {
|
|
314
315
|
var onClick = _a.onClick, onBlur = _a.onBlur, onFocus = _a.onFocus, props = __rest(_a, ["onClick", "onBlur", "onFocus"]);
|
|
@@ -323,23 +324,23 @@ var InputForDatepicker = forwardRef(function (_a, ref) {
|
|
|
323
324
|
};
|
|
324
325
|
return (jsx(InputMask, __assign({ mask: mask, onChange: onChange, value: props.value, maskPlaceholder: null, alwaysShowMask: false, disabled: disabled, readOnly: readOnly, onFocus: onFocus, onBlur: onBlur }, { children: function () { return (jsx(InputWithAdornments, __assign({ onChange: onChange, disabled: disabled, value: props.value, endIcon: jsx(IconWrapper, __assign({ onClick: handleIconClick }, { children: jsx(CalendarIcon, { width: 19, height: 21 }) })) }, other, { ref: ref }))); } })));
|
|
325
326
|
});
|
|
326
|
-
var IconWrapper = styled.div(templateObject_1$
|
|
327
|
-
var templateObject_1$
|
|
327
|
+
var IconWrapper = styled.div(templateObject_1$i || (templateObject_1$i = __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"])));
|
|
328
|
+
var templateObject_1$i;
|
|
328
329
|
|
|
329
330
|
var MonthPickerContainer = function (_a) {
|
|
330
331
|
_a.arrowProps; _a.showPopperArrow; var props = __rest(_a, ["arrowProps", "showPopperArrow"]);
|
|
331
332
|
return jsx(StyledContainer, __assign({}, props));
|
|
332
333
|
};
|
|
333
|
-
var StyledContainer = styled.div(templateObject_1$
|
|
334
|
-
var templateObject_1$
|
|
334
|
+
var StyledContainer = styled.div(templateObject_1$h || (templateObject_1$h = __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 }\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 }\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"])), theme.palette.background.light1, theme.palette.grey.fifteenB, theme.palette.grey.fifteenB, theme.palette.brand.main, theme.palette.grey.fifteenB);
|
|
335
|
+
var templateObject_1$h;
|
|
335
336
|
|
|
336
337
|
var MonthPickerHeader = function (_a) {
|
|
337
338
|
var decreaseYear = _a.decreaseYear, increaseYear = _a.increaseYear, nextYearButtonDisabled = _a.nextYearButtonDisabled, prevYearButtonDisabled = _a.prevYearButtonDisabled, date = _a.date;
|
|
338
339
|
return (jsxs$1(StyledHeader, __assign({ container: true, alignItems: "center", justify: "space-between" }, { children: [jsx(Grid, __assign({ item: true }, { children: jsx(StyledIconButton, __assign({ disabled: prevYearButtonDisabled, onClick: decreaseYear }, { children: jsx(ArrowBackIcon, { width: 14, height: 12 }) })) })), jsx(Grid, __assign({ item: true }, { children: jsx(Caption, __assign({ size: "sm", weight: 600 }, { children: date.getFullYear() })) })), jsx(Grid, __assign({ item: true }, { children: jsx(StyledIconButton, __assign({ disabled: nextYearButtonDisabled, onClick: increaseYear }, { children: jsx(ArrowNextIcon, { width: 14, height: 12 }) })) }))] })));
|
|
339
340
|
};
|
|
340
|
-
var StyledIconButton = styled(IconButton)(templateObject_1$
|
|
341
|
-
var StyledHeader = styled(Grid)(templateObject_2$
|
|
342
|
-
var templateObject_1$
|
|
341
|
+
var StyledIconButton = styled(IconButton)(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n height: 36px;\n &:disabled {\n opacity: 0;\n }\n"], ["\n height: 36px;\n &:disabled {\n opacity: 0;\n }\n"])));
|
|
342
|
+
var StyledHeader = styled(Grid)(templateObject_2$8 || (templateObject_2$8 = __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"])));
|
|
343
|
+
var templateObject_1$g, templateObject_2$8;
|
|
343
344
|
|
|
344
345
|
var DesktopInputWithMonthPicker = function (_a) {
|
|
345
346
|
var name = _a.name, form = _a.form, disabled = _a.disabled, datePickerProps = _a.datePickerProps, otherProps = __rest(_a, ["name", "form", "disabled", "datePickerProps"]);
|
|
@@ -349,8 +350,8 @@ var DesktopInputWithMonthPicker = function (_a) {
|
|
|
349
350
|
return (jsx(DatePicker, __assign({ selected: field.value, onChange: field.onChange, disabled: disabled, customInput: jsx(InputForDatepicker, __assign({ mask: "99.9999", name: name, disabled: disabled, errorMessage: (_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 (jsx(MonthPickerHeader, __assign({}, props))); } }, datePickerProps)));
|
|
350
351
|
} }) }));
|
|
351
352
|
};
|
|
352
|
-
var Wrapper$4 = styled.div(templateObject_1$
|
|
353
|
-
var templateObject_1$
|
|
353
|
+
var Wrapper$4 = styled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n @media (max-width: 600px) {\n display: none;\n }\n"], ["\n @media (max-width: 600px) {\n display: none;\n }\n"])));
|
|
354
|
+
var templateObject_1$f;
|
|
354
355
|
|
|
355
356
|
var MenuItem = function (_a) {
|
|
356
357
|
var tab = _a.tab, active = _a.active, index = _a.index, handleClick = _a.handleClick, offset = _a.offset, isScrolling = _a.isScrolling, setIsScrolling = _a.setIsScrolling;
|
|
@@ -385,16 +386,16 @@ var MenuItem = function (_a) {
|
|
|
385
386
|
}, []);
|
|
386
387
|
return (jsx$1(Link, __assign({ to: tab.label, spy: true, smooth: true, duration: 500, offset: offset, onSetActive: handleSelect }, { children: jsx$1(ButtonWrapper$1, { children: jsx$1(Button, __assign({ variant: Number(active) === index ? "orange" : "transparentWithBorder", size: "xs", css: Number(active) !== index && disabledStyles }, { children: tab.label })) }) })));
|
|
387
388
|
};
|
|
388
|
-
var ButtonWrapper$1 = styled.div(templateObject_1$
|
|
389
|
-
var disabledStyles = css(templateObject_2$
|
|
390
|
-
var templateObject_1$
|
|
389
|
+
var ButtonWrapper$1 = styled.div(templateObject_1$e || (templateObject_1$e = __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"])));
|
|
390
|
+
var disabledStyles = css(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n p {\n color: ", ";\n font-weight: 400;\n },\n"], ["\n p {\n color: ", ";\n font-weight: 400;\n },\n"])), theme.palette.grey.seventy);
|
|
391
|
+
var templateObject_1$e, templateObject_2$7;
|
|
391
392
|
|
|
392
393
|
var DesktopMenuPanel = function (_a) {
|
|
393
394
|
var tabs = _a.tabs, variant = _a.variant, other = __rest(_a, ["tabs", "variant"]);
|
|
394
395
|
return (jsx$1(Wrapper$3, __assign({ container: true, css: variant === "white" && { background: "white" } }, { children: tabs.map(function (tab, index) { return (jsx$1(Grid, __assign({ item: true }, { children: jsx$1(MenuItem, __assign({ tab: tab, index: index, offset: -121 }, other), tab.label) }), index)); }) })));
|
|
395
396
|
};
|
|
396
|
-
var Wrapper$3 = styled(Grid)(templateObject_1$
|
|
397
|
-
var templateObject_1$
|
|
397
|
+
var Wrapper$3 = styled(Grid)(templateObject_1$d || (templateObject_1$d = __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"])), theme.palette.background.light1);
|
|
398
|
+
var templateObject_1$d;
|
|
398
399
|
|
|
399
400
|
var InputWithController = forwardRef(function (_a, ref) {
|
|
400
401
|
var form = _a.form, name = _a.name, error = _a.error, inputProps = __rest(_a, ["form", "name", "error"]);
|
|
@@ -454,15 +455,15 @@ var PassportStrengthBar = function (_a) {
|
|
|
454
455
|
: -1;
|
|
455
456
|
return (jsxs(Wrapper$2, __assign({ "data-testid": "strength_bar", className: String(!strength && "hidden") }, { children: [jsx$1(ReliabilityLevelWrapper, { children: Object.keys(strengthCoefficients).map(function (item, key) { return (jsx$1(ReliabilityLevel, { children: jsx$1(StyledLinearProgress, { "data-testid": "progress_item_".concat(item), value: strengthKey >= key ? 100 : 0, color: color }) }, item)); }) }), jsx$1(Caption, __assign({ "data-testid": "strength_bar_explanation", size: "s", css: { color: color } }, { children: strength && strengthTexts[strength] })), jsx$1(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" }))] })));
|
|
456
457
|
};
|
|
457
|
-
var Wrapper$2 = styled.div(templateObject_1$
|
|
458
|
-
var ReliabilityLevelWrapper = styled.div(templateObject_2$
|
|
458
|
+
var Wrapper$2 = styled.div(templateObject_1$c || (templateObject_1$c = __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"])));
|
|
459
|
+
var ReliabilityLevelWrapper = styled.div(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n display: flex;\n margin-bottom: 8px;\n"], ["\n display: flex;\n margin-bottom: 8px;\n"])));
|
|
459
460
|
var ReliabilityLevel = styled.div(templateObject_3$2 || (templateObject_3$2 = __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"])));
|
|
460
461
|
var StyledLinearProgress = styled(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"])), theme.palette.grey.fifteenB, function (_a) {
|
|
461
462
|
var color = _a.color;
|
|
462
463
|
return color;
|
|
463
464
|
});
|
|
464
465
|
var Description = styled(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"])));
|
|
465
|
-
var templateObject_1$
|
|
466
|
+
var templateObject_1$c, templateObject_2$6, templateObject_3$2, templateObject_4, templateObject_5;
|
|
466
467
|
|
|
467
468
|
var isValidWithMaskExp = /^[^_]+$/;
|
|
468
469
|
var simplePasswordRegExp = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*]).{10,}$/;
|
|
@@ -506,13 +507,13 @@ var InputPassword = function (props) {
|
|
|
506
507
|
}, []);
|
|
507
508
|
return (jsxs$1(Fragment$1, { children: [jsx(InputWithController, __assign({ type: showPassword ? "text" : "password", autoComplete: "new_password", onChange: handleChange, "data-testid": "input_password", endIcon: jsx(EyeIconWrapper, __assign({ "data-testid": "show_value_btn", onClick: handleShowChange }, { children: showPassword ? jsx(ClosedEyeIcon, {}) : jsx(OpenEyeIcon, {}) })) }, props)), jsx(PassportStrengthBar, { strength: strength })] }));
|
|
508
509
|
};
|
|
509
|
-
var EyeIconWrapper = styled.div(templateObject_1$
|
|
510
|
-
var templateObject_1$
|
|
510
|
+
var EyeIconWrapper = styled.div(templateObject_1$b || (templateObject_1$b = __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"])));
|
|
511
|
+
var templateObject_1$b;
|
|
511
512
|
|
|
512
513
|
var InputTextAreaMobile = function (props) { return (jsxs$1(Fragment$1, { children: [jsx(InputWrapper, { children: jsx(InputWithController, __assign({}, props)) }), jsx(TextAreaWrapper, { children: jsx(InputWithController, __assign({ isTextArea: true }, props)) })] })); };
|
|
513
|
-
var InputWrapper = styled.div(templateObject_1$
|
|
514
|
-
var TextAreaWrapper = styled.div(templateObject_2$
|
|
515
|
-
var templateObject_1$
|
|
514
|
+
var InputWrapper = styled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n @media (max-width: 900px) {\n display: none;\n }\n"], ["\n @media (max-width: 900px) {\n display: none;\n }\n"])));
|
|
515
|
+
var TextAreaWrapper = styled.div(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n @media (min-width: 901px) {\n display: none;\n }\n"], ["\n @media (min-width: 901px) {\n display: none;\n }\n"])));
|
|
516
|
+
var templateObject_1$a, templateObject_2$5;
|
|
516
517
|
|
|
517
518
|
var useToggle = function (isModalOpen) {
|
|
518
519
|
if (isModalOpen === void 0) { isModalOpen = false; }
|
|
@@ -530,10 +531,10 @@ var ModalFooter = function (_a) {
|
|
|
530
531
|
var label = _a.label, button = _a.button, otherProps = __rest(_a, ["label", "button"]);
|
|
531
532
|
return (jsxs$1(StyledFooter, { children: [jsx(Divider, {}), jsx(ButtonWrapper, { children: button || (jsx(ButtonStyled, __assign({ fullWidth: true, size: "s", endIcon: jsx(CheckIcon, {}) }, otherProps, { children: label }))) })] }));
|
|
532
533
|
};
|
|
533
|
-
var StyledFooter = styled.div(templateObject_1$
|
|
534
|
-
var ButtonWrapper = styled.div(templateObject_2$
|
|
534
|
+
var StyledFooter = styled.div(templateObject_1$9 || (templateObject_1$9 = __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"])), theme.palette.grey.zero);
|
|
535
|
+
var ButtonWrapper = styled.div(templateObject_2$4 || (templateObject_2$4 = __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"])));
|
|
535
536
|
var ButtonStyled = styled(Button)(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n @media (max-width: 600px) {\n width: 100%;\n }\n"], ["\n @media (max-width: 600px) {\n width: 100%;\n }\n"])));
|
|
536
|
-
var templateObject_1$
|
|
537
|
+
var templateObject_1$9, templateObject_2$4, templateObject_3$1;
|
|
537
538
|
|
|
538
539
|
registerLocale("ru", ru);
|
|
539
540
|
var generateYearRange = function (offsetFromCurrent, maxYearCount) {
|
|
@@ -587,10 +588,10 @@ InputWithDatePicker.defaultProps = {
|
|
|
587
588
|
description: "Выберите год, месяц и число вашего рождения",
|
|
588
589
|
yearParams: { min: 18, max: 120 },
|
|
589
590
|
};
|
|
590
|
-
var ContentWrapper$1 = styled.div(templateObject_1$
|
|
591
|
-
var StyledCalendarStandardContainer = styled(CalendarStandardContainer)(templateObject_2$
|
|
591
|
+
var ContentWrapper$1 = styled.div(templateObject_1$8 || (templateObject_1$8 = __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"])));
|
|
592
|
+
var StyledCalendarStandardContainer = styled(CalendarStandardContainer)(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n height: 410px;\n .react-datepicker__header {\n padding: 0 !important;\n }\n .react-datepicker__day-names {\n padding: 35px 22px 0;\n background-color: ", ";\n border-radius: 16px 16px 0 0;\n @media (max-width: 900px) {\n padding: 24px 16px 0;\n }\n }\n .react-datepicker__month {\n justify-content: space-between;\n height: calc(100% - 124px);\n background-color: ", ";\n border-radius: 0 0 16px 16px;\n padding: 20px 22px 24px;\n margin: 0 !important;\n box-sizing: border-box;\n @media (max-width: 900px) {\n padding: 20px 16px 24px;\n }\n }\n @media (max-width: 600px) {\n height: auto;\n margin-bottom: -4px;\n }\n"], ["\n height: 410px;\n .react-datepicker__header {\n padding: 0 !important;\n }\n .react-datepicker__day-names {\n padding: 35px 22px 0;\n background-color: ", ";\n border-radius: 16px 16px 0 0;\n @media (max-width: 900px) {\n padding: 24px 16px 0;\n }\n }\n .react-datepicker__month {\n justify-content: space-between;\n height: calc(100% - 124px);\n background-color: ", ";\n border-radius: 0 0 16px 16px;\n padding: 20px 22px 24px;\n margin: 0 !important;\n box-sizing: border-box;\n @media (max-width: 900px) {\n padding: 20px 16px 24px;\n }\n }\n @media (max-width: 600px) {\n height: auto;\n margin-bottom: -4px;\n }\n"])), theme.palette.background.light1, theme.palette.background.light1);
|
|
592
593
|
var DayContent = styled.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"])));
|
|
593
|
-
var templateObject_1$
|
|
594
|
+
var templateObject_1$8, templateObject_2$3, templateObject_3;
|
|
594
595
|
|
|
595
596
|
var shortMonths = [
|
|
596
597
|
"ЯНВ",
|
|
@@ -653,9 +654,9 @@ var MobileInputWithMonthPicker = function (_a) {
|
|
|
653
654
|
};
|
|
654
655
|
return (jsxs$1(Wrapper$1, { children: [jsx(InputForDatepicker, __assign({ mask: "99.9999", name: name, handleCLick: handleModalOpen, value: value, onChange: handleChange, disabled: disabled, errorMessage: error, isLabelShrink: Boolean(field.value) }, props)), jsxs$1(Modal, __assign({ title: title, isOpen: isModalOpen, handleClose: handleModalClose }, { children: [jsx(ContentWrapper, { children: jsx(DatePicker, __assign({ inline: true, showMonthYearPicker: true, dateFormat: "MM.yyyy", selected: date, onChange: function (newDate) { return setDate(newDate); }, locale: ruCustom, calendarContainer: MonthPickerContainer, renderCustomHeader: function (headProps) { return (jsx(MonthPickerHeader, __assign({}, headProps))); } }, datePickerProps)) }), jsx(ModalFooter, { fullWidth: true, disabled: !date, onClick: acceptWithDateSelected, label: "\u041F\u043E\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044C" })] }))] }));
|
|
655
656
|
};
|
|
656
|
-
var Wrapper$1 = styled.div(templateObject_1$
|
|
657
|
-
var ContentWrapper = styled.div(templateObject_2$
|
|
658
|
-
var templateObject_1$
|
|
657
|
+
var Wrapper$1 = styled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n @media (min-width: 601px) {\n display: none;\n }\n"], ["\n @media (min-width: 601px) {\n display: none;\n }\n"])));
|
|
658
|
+
var ContentWrapper = styled.div(templateObject_2$2 || (templateObject_2$2 = __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"])));
|
|
659
|
+
var templateObject_1$7, templateObject_2$2;
|
|
659
660
|
|
|
660
661
|
var InputWithMonthPicker = function (props) { return (jsxs$1(Fragment$1, { children: [jsx(DesktopInputWithMonthPicker, __assign({}, props)), jsx(MobileInputWithMonthPicker, __assign({}, props))] })); };
|
|
661
662
|
|
|
@@ -671,9 +672,9 @@ var MobileMenuPanel = function (_a) {
|
|
|
671
672
|
};
|
|
672
673
|
return (jsx$1(Wrapper, __assign({ css: variant === "white" && { background: "white" } }, { children: jsx$1(Swiper, __assign({ spaceBetween: 8, slidesPerView: "auto", slideToClickedSlide: true, ref: swiperRef }, { children: tabs.map(function (tab, index) { return (jsx$1(SlideWrapper, { children: jsx$1(MenuItem, __assign({ tab: tab, index: index, handleClick: slideTo, offset: -121 }, other), tab.label) }, index)); }) })) })));
|
|
673
674
|
};
|
|
674
|
-
var Wrapper = styled.div(templateObject_1$
|
|
675
|
-
var SlideWrapper = styled.div(templateObject_2 || (templateObject_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"])));
|
|
676
|
-
var templateObject_1$
|
|
675
|
+
var Wrapper = styled.div(templateObject_1$6 || (templateObject_1$6 = __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"])), theme.palette.background.light1);
|
|
676
|
+
var SlideWrapper = styled.div(templateObject_2$1 || (templateObject_2$1 = __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"])));
|
|
677
|
+
var templateObject_1$6, templateObject_2$1;
|
|
677
678
|
|
|
678
679
|
var useWindowWidth = function (time) {
|
|
679
680
|
if (time === void 0) { time = 10; }
|
|
@@ -722,8 +723,8 @@ var MenuPanel = function (_a) {
|
|
|
722
723
|
MenuPanel.defaultProps = {
|
|
723
724
|
variant: "grey",
|
|
724
725
|
};
|
|
725
|
-
var fullHeightStyles = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: calc(100vh - 121px);\n"], ["\n height: calc(100vh - 121px);\n"])));
|
|
726
|
-
var templateObject_1;
|
|
726
|
+
var fullHeightStyles = css(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n height: calc(100vh - 121px);\n"], ["\n height: calc(100vh - 121px);\n"])));
|
|
727
|
+
var templateObject_1$5;
|
|
727
728
|
|
|
728
729
|
var Switch = function (_a) {
|
|
729
730
|
var form = _a.form, name = _a.name, props = __rest(_a, ["form", "name"]);
|
|
@@ -776,5 +777,124 @@ InputPhoneWithForm.defaultProps = {
|
|
|
776
777
|
name: "phone",
|
|
777
778
|
};
|
|
778
779
|
|
|
779
|
-
|
|
780
|
+
var Table = function (props) { return jsx(StyledTable, __assign({ cellSpacing: "0" }, props)); };
|
|
781
|
+
var StyledTable = styled.table(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n width: 100%;\n border-spacing: 0;\n"], ["\n width: 100%;\n border-spacing: 0;\n"])));
|
|
782
|
+
var templateObject_1$4;
|
|
783
|
+
|
|
784
|
+
var TableHeadCell = styled.th(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n padding: 0;\n text-align: left;\n"], ["\n padding: 0;\n text-align: left;\n"])));
|
|
785
|
+
var templateObject_1$3;
|
|
786
|
+
|
|
787
|
+
var TableCell = styled.td(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n padding: 0;\n"], ["\n padding: 0;\n"])));
|
|
788
|
+
var templateObject_1$2;
|
|
789
|
+
|
|
790
|
+
var TableRow = function (_a) {
|
|
791
|
+
var children = _a.children, other = __rest(_a, ["children"]);
|
|
792
|
+
var childrenArr = React.Children.toArray(children);
|
|
793
|
+
// @ts-ignore
|
|
794
|
+
return jsx("tr", { children: childrenArr.map(function (child) { return React.cloneElement(child, other); }) });
|
|
795
|
+
};
|
|
796
|
+
|
|
797
|
+
var placementsPositions = {
|
|
798
|
+
bottomStart: {
|
|
799
|
+
bottom: 1,
|
|
800
|
+
offset: 0,
|
|
801
|
+
},
|
|
802
|
+
bottomMiddle: {
|
|
803
|
+
bottom: 1,
|
|
804
|
+
offset: 0.5,
|
|
805
|
+
},
|
|
806
|
+
bottomEnd: {
|
|
807
|
+
bottom: 1,
|
|
808
|
+
offset: 1,
|
|
809
|
+
},
|
|
810
|
+
topStart: {
|
|
811
|
+
top: 1,
|
|
812
|
+
offset: 0,
|
|
813
|
+
},
|
|
814
|
+
topMiddle: {
|
|
815
|
+
top: 1,
|
|
816
|
+
offset: 0.5,
|
|
817
|
+
},
|
|
818
|
+
topEnd: {
|
|
819
|
+
top: 1,
|
|
820
|
+
offset: 1,
|
|
821
|
+
},
|
|
822
|
+
};
|
|
823
|
+
|
|
824
|
+
var Popper = forwardRef(function (props, ref) {
|
|
825
|
+
var placement = props.placement; props.withArrow; var open = props.open, children = props.children, contentRef = props.contentRef, other = __rest(props, ["placement", "withArrow", "open", "children", "contentRef"]);
|
|
826
|
+
var popperRef = useRef(null);
|
|
827
|
+
var _a = useState(null), coords = _a[0], setCoords = _a[1];
|
|
828
|
+
var _b = useState(null), size = _b[0], setSize = _b[1];
|
|
829
|
+
useEffect(function () {
|
|
830
|
+
if (contentRef.current && popperRef.current) {
|
|
831
|
+
var popper = popperRef.current;
|
|
832
|
+
var elemCoords = contentRef.current.getBoundingClientRect();
|
|
833
|
+
var popperSize = {
|
|
834
|
+
width: popper.clientWidth,
|
|
835
|
+
height: popper.clientHeight,
|
|
836
|
+
};
|
|
837
|
+
setCoords(elemCoords);
|
|
838
|
+
setSize(popperSize);
|
|
839
|
+
}
|
|
840
|
+
}, []);
|
|
841
|
+
var position = {};
|
|
842
|
+
if (coords && size) {
|
|
843
|
+
var placementPositions =
|
|
844
|
+
// @ts-ignore
|
|
845
|
+
placementsPositions[placement !== null && placement !== void 0 ? placement : "bottomMiddle"];
|
|
846
|
+
position = {
|
|
847
|
+
top: Math.max(placementPositions.top
|
|
848
|
+
? coords.top - size.height
|
|
849
|
+
: coords.top + coords.height, 0),
|
|
850
|
+
left: Math.max(coords.left +
|
|
851
|
+
coords.width * placementPositions.offset -
|
|
852
|
+
size.width * placementPositions.offset, 0),
|
|
853
|
+
};
|
|
854
|
+
}
|
|
855
|
+
var forwardedRef = function (elem) {
|
|
856
|
+
if (ref) {
|
|
857
|
+
// @ts-ignore
|
|
858
|
+
ref.current = elem;
|
|
859
|
+
}
|
|
860
|
+
// @ts-ignore
|
|
861
|
+
popperRef.current = elem;
|
|
862
|
+
};
|
|
863
|
+
// TODO подумать как реализовать правильное расположение подсказки под contentRef в зависимости от placement
|
|
864
|
+
// Автоматом менять положение (верх-низ) в зависимости от того помещается или нет
|
|
865
|
+
// Распожить стрелочку к контенту посередине контента
|
|
866
|
+
return ReactDOM.createPortal(jsxs$1(Fragment$1, { children: [jsx(Global, { styles: css(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n body {\n position: relative;\n }\n "], ["\n body {\n position: relative;\n }\n "]))) }), jsx(StyledPopper, __assign({ ref: forwardedRef, style: position, open: !!open }, other, { children: children }))] }), document.body);
|
|
867
|
+
});
|
|
868
|
+
var StyledPopper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n padding: 16px;\n border-radius: 12px;\n background: white;\n box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);\n max-width: 215px;\n position: absolute;\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 max-width: 215px;\n position: absolute;\n transition: opacity 0.3s ease-out;\n opacity: ", ";\n"])), function (_a) {
|
|
869
|
+
var open = _a.open;
|
|
870
|
+
return (open ? 1 : 0);
|
|
871
|
+
});
|
|
872
|
+
var templateObject_1$1, templateObject_2;
|
|
873
|
+
|
|
874
|
+
var Tooltip = forwardRef(function (props, ref) {
|
|
875
|
+
var content = props.content, onOpen = props.onOpen, onClose = props.onClose, open = props.open, children = props.children, popper = __rest(props, ["content", "onOpen", "onClose", "open", "children"]);
|
|
876
|
+
var _a = useState(open), isOpen = _a[0], setOpen = _a[1];
|
|
877
|
+
var elemRef = useRef(null);
|
|
878
|
+
var handleOpen = function () {
|
|
879
|
+
setOpen(true);
|
|
880
|
+
if (onOpen) {
|
|
881
|
+
onOpen();
|
|
882
|
+
}
|
|
883
|
+
};
|
|
884
|
+
var handleClose = function () {
|
|
885
|
+
setOpen(false);
|
|
886
|
+
if (onClose) {
|
|
887
|
+
onClose();
|
|
888
|
+
}
|
|
889
|
+
};
|
|
890
|
+
useEffect(function () {
|
|
891
|
+
setOpen(open);
|
|
892
|
+
}, [open]);
|
|
893
|
+
// TODO добавить возможность наведениня на подсказку без ее исчезновение (через таймер?)
|
|
894
|
+
return (jsxs$1(Fragment$1, { children: [jsx(StyledWrapper, __assign({ onMouseEnter: handleOpen, onMouseLeave: handleClose, onTouchEnd: handleOpen, ref: elemRef }, { children: children })), jsx(Popper, __assign({ open: isOpen }, popper, { contentRef: elemRef }, { children: content }))] }));
|
|
895
|
+
});
|
|
896
|
+
var StyledWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: inline-block;\n cursor: pointer;\n"], ["\n display: inline-block;\n cursor: pointer;\n"])));
|
|
897
|
+
var templateObject_1;
|
|
898
|
+
|
|
899
|
+
export { Avatar, ButtonTab, ButtonsPanel, CalendarHeaderWithSelect, CalendarStandardContainer, CalendarStandardHeader, DesktopInputWithMonthPicker, DesktopMenuPanel, InputDropdown, InputForDatepicker, InputPassword, InputPhoneWithForm, InputSelect, InputSelectDropdown, InputTextAreaMobile, InputWithController, InputWithDatePicker, InputWithMonthPicker, MenuItem, MenuPanel, MobileInputWithMonthPicker, MobileMenuPanel, MonthPickerContainer, MonthPickerHeader, PassportStrengthBar, SelectMonth, SelectYear, Switch, Table, TableCell, TableHeadCell, TableRow, Tooltip, UndefinedAvatar };
|
|
780
900
|
//# sourceMappingURL=index.es.js.map
|