kui-complex 0.0.19 → 0.0.21
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 +13 -6
- package/dist/index.es.js +64 -57
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +64 -56
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -44,12 +44,15 @@ type ButtonTabProps = {
|
|
|
44
44
|
|
|
45
45
|
declare const ButtonTab: ({ index, onClick, isActive, label }: ButtonTabProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
46
46
|
|
|
47
|
-
type OptionParams =
|
|
47
|
+
type OptionParams<T = string | number> = {
|
|
48
|
+
label: string | number
|
|
49
|
+
value: T
|
|
50
|
+
}
|
|
48
51
|
|
|
49
|
-
interface InputSelectProps
|
|
52
|
+
interface InputSelectProps<T = string | number>
|
|
50
53
|
extends Omit<InputWithAdornmentsProps, "form"> {
|
|
51
|
-
options?: OptionParams[]
|
|
52
|
-
handleChange?: (value:
|
|
54
|
+
options?: OptionParams<T>[]
|
|
55
|
+
handleChange?: (value: T) => void
|
|
53
56
|
isLoading?: boolean
|
|
54
57
|
form?: UseFormReturn<any>
|
|
55
58
|
iconProps?: SVGProps
|
|
@@ -136,7 +139,7 @@ declare const InputPassword: (props: InputWithControllerProps) => JSX.Element;
|
|
|
136
139
|
|
|
137
140
|
/** @jsxImportSource @emotion/react */
|
|
138
141
|
|
|
139
|
-
declare const InputSelect: React.ForwardRefExoticComponent<Pick<InputSelectProps
|
|
142
|
+
declare const InputSelect: React.ForwardRefExoticComponent<Pick<InputSelectProps<string | number>, "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" | "options" | "inputRef" | "cornerLabel" | "isTextArea" | "inputStyles" | "labelStyles" | "messageClassName" | "labelInlineStyles" | "errorMessage" | "inputValue" | "accept" | "autoComplete" | "capture" | "checked" | "enterKeyHint" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "readOnly" | "required" | "handleChange" | "isLoading" | "iconProps"> & React.RefAttributes<HTMLInputElement>>;
|
|
140
143
|
|
|
141
144
|
type InputSelectDropdownProps = {
|
|
142
145
|
options: OptionParams[]
|
|
@@ -290,4 +293,8 @@ declare const Tooltip: React.ForwardRefExoticComponent<{
|
|
|
290
293
|
withArrow?: boolean | undefined;
|
|
291
294
|
} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<unknown>>;
|
|
292
295
|
|
|
293
|
-
|
|
296
|
+
type ButtonSelectProps = InputSelectProps
|
|
297
|
+
|
|
298
|
+
declare const ButtonSelect: React__default.ForwardRefExoticComponent<Pick<ButtonSelectProps, "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" | "options" | "inputRef" | "cornerLabel" | "isTextArea" | "inputStyles" | "labelStyles" | "messageClassName" | "labelInlineStyles" | "errorMessage" | "inputValue" | "accept" | "autoComplete" | "capture" | "checked" | "enterKeyHint" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "readOnly" | "required" | "handleChange" | "isLoading" | "iconProps"> & React__default.RefAttributes<HTMLInputElement>>;
|
|
299
|
+
|
|
300
|
+
export { Avatar, ButtonSelect, ButtonTab, ButtonsPanel, CalendarHeaderWithSelect, CalendarStandardContainer, CalendarStandardHeader, DesktopInputWithMonthPicker, DesktopMenuPanel, InputDropdown, InputForDatepicker, InputPassword, InputPhoneWithForm, InputSelect, InputSelectDropdown, InputTextAreaMobile, InputWithController, InputWithDatePicker, InputWithMask, InputWithMonthPicker, MenuItem, MenuPanel, MobileInputWithMonthPicker, MobileMenuPanel, MonthPickerContainer, MonthPickerHeader, PassportStrengthBar, SelectMonth, SelectYear, Switch, Table, TableCell, TableHeadCell, TableRow, Tooltip, UndefinedAvatar };
|
package/dist/index.es.js
CHANGED
|
@@ -74,14 +74,14 @@ var UndefinedAvatar = function (_a) {
|
|
|
74
74
|
.join("");
|
|
75
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 })) })));
|
|
76
76
|
};
|
|
77
|
-
var Wrapper$8 = styled.div(templateObject_1$
|
|
78
|
-
var templateObject_1$
|
|
77
|
+
var Wrapper$8 = styled.div(templateObject_1$t || (templateObject_1$t = __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$t;
|
|
79
79
|
|
|
80
80
|
var Avatar = function (_a) {
|
|
81
81
|
var size = _a.size, fullName = _a.fullName, imageUrl = _a.imageUrl, avatarRef = _a.avatarRef, otherProps = __rest(_a, ["size", "fullName", "imageUrl", "avatarRef"]);
|
|
82
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 })) })));
|
|
83
83
|
};
|
|
84
|
-
var Wrapper$7 = styled.div(templateObject_1$
|
|
84
|
+
var Wrapper$7 = styled.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n border-radius: 50%;\n overflow: hidden;\n cursor: pointer;\n"], ["\n border-radius: 50%;\n overflow: hidden;\n cursor: pointer;\n"])));
|
|
85
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"])));
|
|
86
86
|
var largeAvatarCSS = function (_a) {
|
|
87
87
|
var avatarSize = _a.avatarSize;
|
|
@@ -94,7 +94,7 @@ var sizeStyles = {
|
|
|
94
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 "]))),
|
|
95
95
|
lg: css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n width: 80px;\n height: 80px;\n "], ["\n width: 80px;\n height: 80px;\n "]))),
|
|
96
96
|
};
|
|
97
|
-
var templateObject_1$
|
|
97
|
+
var templateObject_1$s, templateObject_2$e, templateObject_3$6, templateObject_4$1, templateObject_5$1, templateObject_6;
|
|
98
98
|
|
|
99
99
|
var ButtonTab = function (_a) {
|
|
100
100
|
var index = _a.index, onClick = _a.onClick, isActive = _a.isActive, label = _a.label;
|
|
@@ -103,9 +103,9 @@ var ButtonTab = function (_a) {
|
|
|
103
103
|
};
|
|
104
104
|
return (jsx$1(StyledButton, __assign({ variant: isActive ? "orange" : "white", captionWeight: isActive ? 600 : 400, onClick: handleClick, css: !isActive && inactiveStyles, size: "s" }, { children: label })));
|
|
105
105
|
};
|
|
106
|
-
var StyledButton = styled(Button)(templateObject_1$
|
|
106
|
+
var StyledButton = styled(Button)(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n margin-right: 24px;\n &:last-of-type {\n margin-right: 0;\n }\n"], ["\n margin-right: 24px;\n &:last-of-type {\n margin-right: 0;\n }\n"])));
|
|
107
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$
|
|
108
|
+
var templateObject_1$r, templateObject_2$d;
|
|
109
109
|
|
|
110
110
|
var ButtonsPanel = function (_a) {
|
|
111
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"]);
|
|
@@ -128,13 +128,13 @@ var ButtonsPanel = function (_a) {
|
|
|
128
128
|
ButtonsPanel.defaultProps = {
|
|
129
129
|
isSticky: false,
|
|
130
130
|
};
|
|
131
|
-
var Content = styled.div(templateObject_1$
|
|
131
|
+
var Content = styled.div(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n height: 100%;\n"], ["\n height: 100%;\n"])));
|
|
132
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$
|
|
133
|
+
var templateObject_1$q, templateObject_2$c;
|
|
134
134
|
|
|
135
135
|
var dropdownStyles = function (_a) {
|
|
136
136
|
var isOpen = _a.isOpen;
|
|
137
|
-
return css(templateObject_1$
|
|
137
|
+
return css(templateObject_1$p || (templateObject_1$p = __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);
|
|
138
138
|
};
|
|
139
139
|
var InputDropdown = function (_a) {
|
|
140
140
|
var isOpen = _a.isOpen, handleClose = _a.handleClose, buttonRef = _a.buttonRef, children = _a.children, otherProps = __rest(_a, ["isOpen", "handleClose", "buttonRef", "children"]);
|
|
@@ -158,7 +158,7 @@ var InputDropdown = function (_a) {
|
|
|
158
158
|
}
|
|
159
159
|
return (jsx$1(Grid, __assign({ "data-testid": "input_dropdown", container: true, ref: dropdownRef, css: dropdownStyles({ isOpen: isOpen }) }, otherProps, { children: children })));
|
|
160
160
|
};
|
|
161
|
-
var templateObject_1$
|
|
161
|
+
var templateObject_1$p;
|
|
162
162
|
|
|
163
163
|
var InputSelectDropdown = function (_a) {
|
|
164
164
|
var options = _a.options, inputRef = _a.inputRef, isOpenDropdown = _a.isOpenDropdown, handleCloseDropdown = _a.handleCloseDropdown, handleSelect = _a.handleSelect, selectedValue = _a.selectedValue;
|
|
@@ -174,10 +174,10 @@ var InputSelectDropdown = function (_a) {
|
|
|
174
174
|
padding: "4px",
|
|
175
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)); }) })));
|
|
176
176
|
};
|
|
177
|
-
var OptionWrapper = styled.div(templateObject_1$
|
|
177
|
+
var OptionWrapper = styled.div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n width: 100%;\n padding: 2px 0;\n cursor: pointer;\n"], ["\n width: 100%;\n padding: 2px 0;\n cursor: pointer;\n"])));
|
|
178
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);
|
|
179
179
|
var selectedStyles = css(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), theme.palette.background.light1);
|
|
180
|
-
var templateObject_1$
|
|
180
|
+
var templateObject_1$o, templateObject_2$b, templateObject_3$5;
|
|
181
181
|
|
|
182
182
|
var getFormValue = function (name, form) {
|
|
183
183
|
var names = name === null || name === void 0 ? void 0 : name.split(".");
|
|
@@ -252,10 +252,10 @@ var InputSelect = forwardRef(function (props, ref) {
|
|
|
252
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,
|
|
253
253
|
}, isOpenDropdown: isOpenDropdown, handleCloseDropdown: handleCloseDropdown, handleSelect: handleSelect, selectedValue: other.value || value }))] }));
|
|
254
254
|
});
|
|
255
|
-
var Wrapper$6 = styled.div(templateObject_1$
|
|
255
|
+
var Wrapper$6 = styled.div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n position: relative;\n text-align: left;\n"], ["\n position: relative;\n text-align: left;\n"])));
|
|
256
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"])));
|
|
257
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"])));
|
|
258
|
-
var templateObject_1$
|
|
258
|
+
var templateObject_1$n, templateObject_2$a, templateObject_3$4;
|
|
259
259
|
|
|
260
260
|
var SelectYear = function (_a) {
|
|
261
261
|
var yearOptions = _a.yearOptions; _a.options; var props = __rest(_a, ["yearOptions", "options"]);
|
|
@@ -291,25 +291,25 @@ var CalendarHeaderWithSelect = function (_a) {
|
|
|
291
291
|
var month = date.getMonth() + 1;
|
|
292
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 }) }))] })) }));
|
|
293
293
|
};
|
|
294
|
-
var Wrapper$5 = styled.div(templateObject_1$
|
|
295
|
-
var templateObject_1$
|
|
294
|
+
var Wrapper$5 = styled.div(templateObject_1$m || (templateObject_1$m = __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$m;
|
|
296
296
|
|
|
297
297
|
var CalendarStandardContainer = function (_a) {
|
|
298
298
|
_a.arrowProps; _a.showPopperArrow; var props = __rest(_a, ["arrowProps", "showPopperArrow"]);
|
|
299
299
|
return jsx(DatePickerContainer, __assign({}, props));
|
|
300
300
|
};
|
|
301
|
-
var DatePickerContainer = styled.div(templateObject_1$
|
|
302
|
-
var templateObject_1$
|
|
301
|
+
var DatePickerContainer = styled.div(templateObject_1$l || (templateObject_1$l = __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$l;
|
|
303
303
|
|
|
304
304
|
var CalendarStandardHeader = function (_a) {
|
|
305
305
|
var decreaseMonth = _a.decreaseMonth, increaseMonth = _a.increaseMonth, nextMonthButtonDisabled = _a.nextMonthButtonDisabled, prevMonthButtonDisabled = _a.prevMonthButtonDisabled, date = _a.date;
|
|
306
306
|
var title = _.capitalize(date.toLocaleString("ru", { month: "long", year: "numeric" })).slice(0, -3);
|
|
307
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 }) })) }))] })) }))] })));
|
|
308
308
|
};
|
|
309
|
-
var HeaderWrapper = styled(Grid)(templateObject_1$
|
|
309
|
+
var HeaderWrapper = styled(Grid)(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n padding: 0 6px 34px;\n @media (max-width: 600px) {\n h2 {\n font-size: 16px;\n }\n }\n"], ["\n padding: 0 6px 34px;\n @media (max-width: 600px) {\n h2 {\n font-size: 16px;\n }\n }\n"])));
|
|
310
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"])));
|
|
311
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"])));
|
|
312
|
-
var templateObject_1$
|
|
312
|
+
var templateObject_1$k, templateObject_2$9, templateObject_3$3;
|
|
313
313
|
|
|
314
314
|
var InputForDatepicker = forwardRef(function (_a, ref) {
|
|
315
315
|
var onClick = _a.onClick, onBlur = _a.onBlur, onFocus = _a.onFocus, props = __rest(_a, ["onClick", "onBlur", "onFocus"]);
|
|
@@ -324,23 +324,23 @@ var InputForDatepicker = forwardRef(function (_a, ref) {
|
|
|
324
324
|
};
|
|
325
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 }))); } })));
|
|
326
326
|
});
|
|
327
|
-
var IconWrapper = styled.div(templateObject_1$
|
|
328
|
-
var templateObject_1$
|
|
327
|
+
var IconWrapper = styled.div(templateObject_1$j || (templateObject_1$j = __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$j;
|
|
329
329
|
|
|
330
330
|
var MonthPickerContainer = function (_a) {
|
|
331
331
|
_a.arrowProps; _a.showPopperArrow; var props = __rest(_a, ["arrowProps", "showPopperArrow"]);
|
|
332
332
|
return jsx(StyledContainer, __assign({}, props));
|
|
333
333
|
};
|
|
334
|
-
var StyledContainer = styled.div(templateObject_1$
|
|
335
|
-
var templateObject_1$
|
|
334
|
+
var StyledContainer = styled.div(templateObject_1$i || (templateObject_1$i = __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$i;
|
|
336
336
|
|
|
337
337
|
var MonthPickerHeader = function (_a) {
|
|
338
338
|
var decreaseYear = _a.decreaseYear, increaseYear = _a.increaseYear, nextYearButtonDisabled = _a.nextYearButtonDisabled, prevYearButtonDisabled = _a.prevYearButtonDisabled, date = _a.date;
|
|
339
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 }) })) }))] })));
|
|
340
340
|
};
|
|
341
|
-
var StyledIconButton = styled(IconButton)(templateObject_1$
|
|
341
|
+
var StyledIconButton = styled(IconButton)(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n height: 36px;\n &:disabled {\n opacity: 0;\n }\n"], ["\n height: 36px;\n &:disabled {\n opacity: 0;\n }\n"])));
|
|
342
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$
|
|
343
|
+
var templateObject_1$h, templateObject_2$8;
|
|
344
344
|
|
|
345
345
|
var DesktopInputWithMonthPicker = function (_a) {
|
|
346
346
|
var name = _a.name, form = _a.form, disabled = _a.disabled, datePickerProps = _a.datePickerProps, otherProps = __rest(_a, ["name", "form", "disabled", "datePickerProps"]);
|
|
@@ -350,8 +350,8 @@ var DesktopInputWithMonthPicker = function (_a) {
|
|
|
350
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)));
|
|
351
351
|
} }) }));
|
|
352
352
|
};
|
|
353
|
-
var Wrapper$4 = styled.div(templateObject_1$
|
|
354
|
-
var templateObject_1$
|
|
353
|
+
var Wrapper$4 = styled.div(templateObject_1$g || (templateObject_1$g = __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$g;
|
|
355
355
|
|
|
356
356
|
var MenuItem = function (_a) {
|
|
357
357
|
var tab = _a.tab, active = _a.active, index = _a.index, handleClick = _a.handleClick, offset = _a.offset, isScrolling = _a.isScrolling, setIsScrolling = _a.setIsScrolling;
|
|
@@ -386,16 +386,16 @@ var MenuItem = function (_a) {
|
|
|
386
386
|
}, []);
|
|
387
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 })) }) })));
|
|
388
388
|
};
|
|
389
|
-
var ButtonWrapper$1 = styled.div(templateObject_1$
|
|
389
|
+
var ButtonWrapper$1 = styled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n margin-right: 8px;\n width: max-content;\n max-width: 150px;\n @media (max-width: 900px) {\n max-width: unset;\n }\n"], ["\n margin-right: 8px;\n width: max-content;\n max-width: 150px;\n @media (max-width: 900px) {\n max-width: unset;\n }\n"])));
|
|
390
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$
|
|
391
|
+
var templateObject_1$f, templateObject_2$7;
|
|
392
392
|
|
|
393
393
|
var DesktopMenuPanel = function (_a) {
|
|
394
394
|
var tabs = _a.tabs, variant = _a.variant, other = __rest(_a, ["tabs", "variant"]);
|
|
395
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)); }) })));
|
|
396
396
|
};
|
|
397
|
-
var Wrapper$3 = styled(Grid)(templateObject_1$
|
|
398
|
-
var templateObject_1$
|
|
397
|
+
var Wrapper$3 = styled(Grid)(templateObject_1$e || (templateObject_1$e = __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$e;
|
|
399
399
|
|
|
400
400
|
var InputWithMask = forwardRef(function (_a, ref) {
|
|
401
401
|
var form = _a.form, name = _a.name, error = _a.error, inputProps = __rest(_a, ["form", "name", "error"]);
|
|
@@ -485,7 +485,7 @@ var PassportStrengthBar = function (_a) {
|
|
|
485
485
|
: -1;
|
|
486
486
|
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" }))] })));
|
|
487
487
|
};
|
|
488
|
-
var Wrapper$2 = styled.div(templateObject_1$
|
|
488
|
+
var Wrapper$2 = styled.div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n margin-top: 16px;\n min-height: 86px;\n @media (max-width: 900px) {\n min-height: unset;\n }\n &.hidden {\n opacity: 0;\n @media (max-width: 900px) {\n display: none;\n }\n }\n"], ["\n margin-top: 16px;\n min-height: 86px;\n @media (max-width: 900px) {\n min-height: unset;\n }\n &.hidden {\n opacity: 0;\n @media (max-width: 900px) {\n display: none;\n }\n }\n"])));
|
|
489
489
|
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"])));
|
|
490
490
|
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"])));
|
|
491
491
|
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) {
|
|
@@ -493,7 +493,7 @@ var StyledLinearProgress = styled(LinearProgress)(templateObject_4 || (templateO
|
|
|
493
493
|
return color;
|
|
494
494
|
});
|
|
495
495
|
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"])));
|
|
496
|
-
var templateObject_1$
|
|
496
|
+
var templateObject_1$d, templateObject_2$6, templateObject_3$2, templateObject_4, templateObject_5;
|
|
497
497
|
|
|
498
498
|
var isValidWithMaskExp = /^[^_]+$/;
|
|
499
499
|
var simplePasswordRegExp = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*]).{10,}$/;
|
|
@@ -537,13 +537,13 @@ var InputPassword = function (props) {
|
|
|
537
537
|
}, []);
|
|
538
538
|
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 })] }));
|
|
539
539
|
};
|
|
540
|
-
var EyeIconWrapper = styled.div(templateObject_1$
|
|
541
|
-
var templateObject_1$
|
|
540
|
+
var EyeIconWrapper = styled.div(templateObject_1$c || (templateObject_1$c = __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"])));
|
|
541
|
+
var templateObject_1$c;
|
|
542
542
|
|
|
543
543
|
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)) })] })); };
|
|
544
|
-
var InputWrapper = styled.div(templateObject_1$
|
|
544
|
+
var InputWrapper = styled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n @media (max-width: 900px) {\n display: none;\n }\n"], ["\n @media (max-width: 900px) {\n display: none;\n }\n"])));
|
|
545
545
|
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"])));
|
|
546
|
-
var templateObject_1$
|
|
546
|
+
var templateObject_1$b, templateObject_2$5;
|
|
547
547
|
|
|
548
548
|
var useToggle = function (isModalOpen) {
|
|
549
549
|
if (isModalOpen === void 0) { isModalOpen = false; }
|
|
@@ -561,10 +561,10 @@ var ModalFooter = function (_a) {
|
|
|
561
561
|
var label = _a.label, button = _a.button, otherProps = __rest(_a, ["label", "button"]);
|
|
562
562
|
return (jsxs$1(StyledFooter, { children: [jsx(Divider, {}), jsx(ButtonWrapper, { children: button || (jsx(ButtonStyled, __assign({ fullWidth: true, size: "s", endIcon: jsx(CheckIcon, {}) }, otherProps, { children: label }))) })] }));
|
|
563
563
|
};
|
|
564
|
-
var StyledFooter = styled.div(templateObject_1$
|
|
564
|
+
var StyledFooter = styled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n background: ", ";\n border-radius: 0 0 12px 12px;\n z-index: 10;\n position: sticky;\n bottom: 0;\n left: 0;\n"], ["\n background: ", ";\n border-radius: 0 0 12px 12px;\n z-index: 10;\n position: sticky;\n bottom: 0;\n left: 0;\n"])), theme.palette.grey.zero);
|
|
565
565
|
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"])));
|
|
566
566
|
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"])));
|
|
567
|
-
var templateObject_1$
|
|
567
|
+
var templateObject_1$a, templateObject_2$4, templateObject_3$1;
|
|
568
568
|
|
|
569
569
|
registerLocale("ru", ru);
|
|
570
570
|
var generateYearRange = function (offsetFromCurrent, maxYearCount) {
|
|
@@ -618,10 +618,10 @@ InputWithDatePicker.defaultProps = {
|
|
|
618
618
|
description: "Выберите год, месяц и число вашего рождения",
|
|
619
619
|
yearParams: { min: 18, max: 120 },
|
|
620
620
|
};
|
|
621
|
-
var ContentWrapper$1 = styled.div(templateObject_1$
|
|
621
|
+
var ContentWrapper$1 = styled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n padding: 36px 40px 24px;\n @media (max-width: 600px) {\n padding: 20px 0 0;\n }\n"], ["\n padding: 36px 40px 24px;\n @media (max-width: 600px) {\n padding: 20px 0 0;\n }\n"])));
|
|
622
622
|
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);
|
|
623
623
|
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"])));
|
|
624
|
-
var templateObject_1$
|
|
624
|
+
var templateObject_1$9, templateObject_2$3, templateObject_3;
|
|
625
625
|
|
|
626
626
|
var shortMonths = [
|
|
627
627
|
"ЯНВ",
|
|
@@ -684,9 +684,9 @@ var MobileInputWithMonthPicker = function (_a) {
|
|
|
684
684
|
};
|
|
685
685
|
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" })] }))] }));
|
|
686
686
|
};
|
|
687
|
-
var Wrapper$1 = styled.div(templateObject_1$
|
|
687
|
+
var Wrapper$1 = styled.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n @media (min-width: 601px) {\n display: none;\n }\n"], ["\n @media (min-width: 601px) {\n display: none;\n }\n"])));
|
|
688
688
|
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"])));
|
|
689
|
-
var templateObject_1$
|
|
689
|
+
var templateObject_1$8, templateObject_2$2;
|
|
690
690
|
|
|
691
691
|
var InputWithMonthPicker = function (props) { return (jsxs$1(Fragment$1, { children: [jsx(DesktopInputWithMonthPicker, __assign({}, props)), jsx(MobileInputWithMonthPicker, __assign({}, props))] })); };
|
|
692
692
|
|
|
@@ -702,9 +702,9 @@ var MobileMenuPanel = function (_a) {
|
|
|
702
702
|
};
|
|
703
703
|
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)); }) })) })));
|
|
704
704
|
};
|
|
705
|
-
var Wrapper = styled.div(templateObject_1$
|
|
705
|
+
var Wrapper = styled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n position: sticky;\n top: 49px;\n left: 0;\n z-index: 11;\n background: ", ";\n padding: 16px 0 24px;\n @media (min-width: 766px) {\n display: none;\n }\n"], ["\n position: sticky;\n top: 49px;\n left: 0;\n z-index: 11;\n background: ", ";\n padding: 16px 0 24px;\n @media (min-width: 766px) {\n display: none;\n }\n"])), theme.palette.background.light1);
|
|
706
706
|
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"])));
|
|
707
|
-
var templateObject_1$
|
|
707
|
+
var templateObject_1$7, templateObject_2$1;
|
|
708
708
|
|
|
709
709
|
var useWindowWidth = function (time) {
|
|
710
710
|
if (time === void 0) { time = 10; }
|
|
@@ -753,8 +753,8 @@ var MenuPanel = function (_a) {
|
|
|
753
753
|
MenuPanel.defaultProps = {
|
|
754
754
|
variant: "grey",
|
|
755
755
|
};
|
|
756
|
-
var fullHeightStyles = css(templateObject_1$
|
|
757
|
-
var templateObject_1$
|
|
756
|
+
var fullHeightStyles = css(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n height: calc(100vh - 121px);\n"], ["\n height: calc(100vh - 121px);\n"])));
|
|
757
|
+
var templateObject_1$6;
|
|
758
758
|
|
|
759
759
|
var Switch = function (_a) {
|
|
760
760
|
var form = _a.form, name = _a.name, props = __rest(_a, ["form", "name"]);
|
|
@@ -808,15 +808,15 @@ InputPhoneWithForm.defaultProps = {
|
|
|
808
808
|
};
|
|
809
809
|
|
|
810
810
|
var Table = function (props) { return jsx(StyledTable, __assign({ cellSpacing: "0" }, props)); };
|
|
811
|
-
var StyledTable = styled.table(templateObject_1$
|
|
811
|
+
var StyledTable = styled.table(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n width: 100%;\n border-spacing: 0;\n"], ["\n width: 100%;\n border-spacing: 0;\n"])));
|
|
812
|
+
var templateObject_1$5;
|
|
813
|
+
|
|
814
|
+
var TableHeadCell = styled.th(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n padding: 0;\n text-align: left;\n"], ["\n padding: 0;\n text-align: left;\n"])));
|
|
812
815
|
var templateObject_1$4;
|
|
813
816
|
|
|
814
|
-
var
|
|
817
|
+
var TableCell = styled.td(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n padding: 0;\n"], ["\n padding: 0;\n"])));
|
|
815
818
|
var templateObject_1$3;
|
|
816
819
|
|
|
817
|
-
var TableCell = styled.td(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n padding: 0;\n"], ["\n padding: 0;\n"])));
|
|
818
|
-
var templateObject_1$2;
|
|
819
|
-
|
|
820
820
|
var TableRow = function (_a) {
|
|
821
821
|
var children = _a.children, other = __rest(_a, ["children"]);
|
|
822
822
|
var childrenArr = React.Children.toArray(children);
|
|
@@ -893,13 +893,13 @@ var Popper = forwardRef(function (props, ref) {
|
|
|
893
893
|
// TODO подумать как реализовать правильное расположение подсказки под contentRef в зависимости от placement
|
|
894
894
|
// Автоматом менять положение (верх-низ) в зависимости от того помещается или нет
|
|
895
895
|
// Распожить стрелочку к контенту посередине контента
|
|
896
|
-
return ReactDOM.createPortal(jsxs$1(Fragment$1, { children: [jsx(Global, { styles: css(templateObject_1$
|
|
896
|
+
return ReactDOM.createPortal(jsxs$1(Fragment$1, { children: [jsx(Global, { styles: css(templateObject_1$2 || (templateObject_1$2 = __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);
|
|
897
897
|
});
|
|
898
898
|
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 @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 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 @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) {
|
|
899
899
|
var open = _a.open;
|
|
900
900
|
return (open ? 1 : 0);
|
|
901
901
|
}, theme.breakpoints.xxs);
|
|
902
|
-
var templateObject_1$
|
|
902
|
+
var templateObject_1$2, templateObject_2;
|
|
903
903
|
|
|
904
904
|
var Tooltip = forwardRef(function (props, ref) {
|
|
905
905
|
var content = props.content, onOpen = props.onOpen, onClose = props.onClose, open = props.open, children = props.children, popper = __rest(props, ["content", "onOpen", "onClose", "open", "children"]);
|
|
@@ -923,8 +923,15 @@ var Tooltip = forwardRef(function (props, ref) {
|
|
|
923
923
|
// TODO добавить возможность наведениня на подсказку без ее исчезновение (через таймер?)
|
|
924
924
|
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 }))] }));
|
|
925
925
|
});
|
|
926
|
-
var StyledWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: inline-flex;\n cursor: pointer;\n width: fit-content;\n height: fit-content;\n"], ["\n display: inline-flex;\n cursor: pointer;\n width: fit-content;\n height: fit-content;\n"])));
|
|
926
|
+
var StyledWrapper = styled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n display: inline-flex;\n cursor: pointer;\n width: fit-content;\n height: fit-content;\n"], ["\n display: inline-flex;\n cursor: pointer;\n width: fit-content;\n height: fit-content;\n"])));
|
|
927
|
+
var templateObject_1$1;
|
|
928
|
+
|
|
929
|
+
var ButtonSelect = forwardRef(function (props, ref) {
|
|
930
|
+
var options = props.options, otherProps = __rest(props, ["options"]);
|
|
931
|
+
return (jsx(StyledInputSelect, __assign({ value: options === null || options === void 0 ? void 0 : options[0].value, options: options, iconProps: { width: 9, height: 5 } }, otherProps, { ref: ref })));
|
|
932
|
+
});
|
|
933
|
+
var StyledInputSelect = styled(InputSelect)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n & .MuiFilledInput-root {\n height: 32px;\n border-radius: 66px;\n padding: 0 12px;\n input {\n color: ", ";\n transform: none;\n font-size: 12px;\n line-height: 14px;\n margin: 0 -16px 0 0 !important;\n width: auto !important;\n }\n }\n & + div {\n top: 40px;\n }\n"], ["\n & .MuiFilledInput-root {\n height: 32px;\n border-radius: 66px;\n padding: 0 12px;\n input {\n color: ", ";\n transform: none;\n font-size: 12px;\n line-height: 14px;\n margin: 0 -16px 0 0 !important;\n width: auto !important;\n }\n }\n & + div {\n top: 40px;\n }\n"])), theme.palette.grey.fiftyP);
|
|
927
934
|
var templateObject_1;
|
|
928
935
|
|
|
929
|
-
export { Avatar, ButtonTab, ButtonsPanel, CalendarHeaderWithSelect, CalendarStandardContainer, CalendarStandardHeader, DesktopInputWithMonthPicker, DesktopMenuPanel, InputDropdown, InputForDatepicker, InputPassword, InputPhoneWithForm, InputSelect, InputSelectDropdown, InputTextAreaMobile, InputWithController, InputWithDatePicker, InputWithMask, InputWithMonthPicker, MenuItem, MenuPanel, MobileInputWithMonthPicker, MobileMenuPanel, MonthPickerContainer, MonthPickerHeader, PassportStrengthBar, SelectMonth, SelectYear, Switch, Table, TableCell, TableHeadCell, TableRow, Tooltip, UndefinedAvatar };
|
|
936
|
+
export { Avatar, ButtonSelect, ButtonTab, ButtonsPanel, CalendarHeaderWithSelect, CalendarStandardContainer, CalendarStandardHeader, DesktopInputWithMonthPicker, DesktopMenuPanel, InputDropdown, InputForDatepicker, InputPassword, InputPhoneWithForm, InputSelect, InputSelectDropdown, InputTextAreaMobile, InputWithController, InputWithDatePicker, InputWithMask, InputWithMonthPicker, MenuItem, MenuPanel, MobileInputWithMonthPicker, MobileMenuPanel, MonthPickerContainer, MonthPickerHeader, PassportStrengthBar, SelectMonth, SelectYear, Switch, Table, TableCell, TableHeadCell, TableRow, Tooltip, UndefinedAvatar };
|
|
930
937
|
//# sourceMappingURL=index.es.js.map
|