@itcase/ui 1.8.123 → 1.8.124
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/Avatar_cjs_mojzcWRL.js +161 -0
- package/dist/Avatar_es_BFom0nAS.js +157 -0
- package/dist/{Button_cjs_Ce97psFT.js → Button_cjs_CZz8OjWi.js} +39 -27
- package/dist/{Button_es_CZss7cXh.js → Button_es_Cn3wtv3M.js} +39 -27
- package/dist/ChipsGroup_cjs_Dgskkc1e.js +344 -0
- package/dist/{ChipsGroup_es_ayPPUwQ7.js → ChipsGroup_es_BVQ7_n0k.js} +48 -35
- package/dist/DatePicker_cjs_Lzrr9Amf.js +182 -0
- package/dist/DatePicker_es_D1LvY5RT.js +178 -0
- package/dist/Divider_cjs_DrmV2ezS.js +105 -0
- package/dist/Divider_es_BiYozVBS.js +101 -0
- package/dist/DropdownItem_cjs_rKLdFxSj.js +211 -0
- package/dist/DropdownItem_es_B-1qtEa7.js +206 -0
- package/dist/Group_cjs_DmfeUcFI.js +59 -0
- package/dist/Group_es_BU5k8f5S.js +55 -0
- package/dist/{Icon_cjs_Cz6IyOkb.js → Icon_cjs_DpFxIFv5.js} +170 -121
- package/dist/{Icon_es_BrwLifge.js → Icon_es_D5eiycFI.js} +170 -121
- package/dist/Image_cjs_CBDMUzv_.js +29 -0
- package/dist/Image_es_BHec4iVN.js +27 -0
- package/dist/{Input_cjs_DRPK_RHK.js → Input_cjs_DDi5JVAV.js} +27 -19
- package/dist/{Input_es_Cv5nEb_n.js → Input_es_BnCXATnh.js} +27 -19
- package/dist/{Label_cjs_DMoaOoHi.js → Label_cjs_C-x9blCL.js} +45 -33
- package/dist/{Label_es_SULlg9bL.js → Label_es_DCqpSw_F.js} +45 -33
- package/dist/{Link_cjs_C5UsZUiF.js → Link_cjs_qKXVfU8e.js} +43 -30
- package/dist/{Link_es_XiqbdwLp.js → Link_es_P2b6ya7P.js} +43 -30
- package/dist/Loader_cjs_DIDsIq3J.js +143 -0
- package/dist/Loader_es_CmSggwbR.js +139 -0
- package/dist/Overlay_cjs_tGA2fU43.js +42 -0
- package/dist/Overlay_es_BS7OTFoy.js +38 -0
- package/dist/{Scrollbar_cjs_DcKOfcNp.js → Scrollbar_cjs_Cp-7v2Mt.js} +1 -1
- package/dist/{Scrollbar_es_CThJeCLF.js → Scrollbar_es_CcMgNvGi.js} +1 -1
- package/dist/Text_cjs_BDTjOTVB.js +69 -0
- package/dist/Text_es_CnymlElo.js +65 -0
- package/dist/cjs/components/Accordion.js +37 -34
- package/dist/cjs/components/Avatar.js +5 -6
- package/dist/cjs/components/AvatarStack/stories/__mock__.js +1 -1
- package/dist/cjs/components/AvatarStack.js +17 -16
- package/dist/cjs/components/Badge.js +3 -4
- package/dist/cjs/components/Breadcrumbs/stories/__mock__.js +1 -1
- package/dist/cjs/components/Breadcrumbs.js +27 -23
- package/dist/cjs/components/Button.js +5 -6
- package/dist/cjs/components/Cell/stories/__mock__.js +1 -1
- package/dist/cjs/components/Cell.js +28 -25
- package/dist/cjs/components/Checkbox.js +33 -26
- package/dist/cjs/components/Checkmark.js +28 -23
- package/dist/cjs/components/Chips/stories/__mock__.js +1 -1
- package/dist/cjs/components/Chips.js +4 -5
- package/dist/cjs/components/Choice/stories/__mock__.js +2 -2
- package/dist/cjs/components/Choice.js +46 -40
- package/dist/cjs/components/Code.js +34 -26
- package/dist/cjs/components/CookiesWarning.js +23 -23
- package/dist/cjs/components/Dadata.js +14 -9
- package/dist/cjs/components/DatePeriod.js +32 -30
- package/dist/cjs/components/DatePicker.js +8 -9
- package/dist/cjs/components/Divider.js +1 -2
- package/dist/cjs/components/Dot.js +5 -6
- package/dist/cjs/components/Drawer.js +23 -21
- package/dist/cjs/components/Dropdown/stories/__mock__.js +6 -6
- package/dist/cjs/components/Dropdown.js +5 -6
- package/dist/cjs/components/Flex.js +11 -12
- package/dist/cjs/components/Grid.js +15 -16
- package/dist/cjs/components/Group.js +1 -2
- package/dist/cjs/components/HTMLContent.js +5 -6
- package/dist/cjs/components/HeroTitle.js +17 -16
- package/dist/cjs/components/Icon.js +3 -4
- package/dist/cjs/components/Image.js +1 -2
- package/dist/cjs/components/Input.js +1 -2
- package/dist/cjs/components/InputPassword.js +34 -26
- package/dist/cjs/components/Label.js +4 -5
- package/dist/cjs/components/Link.js +1 -2
- package/dist/cjs/components/List.js +39 -28
- package/dist/cjs/components/Loader.js +2 -3
- package/dist/cjs/components/Logo.js +10 -11
- package/dist/cjs/components/MenuItem.js +36 -33
- package/dist/cjs/components/Modal.js +40 -38
- package/dist/cjs/components/ModalSheetBottom.js +17 -18
- package/dist/cjs/components/Notification/stories/__mock__.js +1 -1
- package/dist/cjs/components/Notification.js +31 -24
- package/dist/cjs/components/Overlay.js +1 -2
- package/dist/cjs/components/Pagination.js +43 -41
- package/dist/cjs/components/Radio.js +34 -26
- package/dist/cjs/components/RangeSlider.js +8 -9
- package/dist/cjs/components/Response/img.js +1 -1
- package/dist/cjs/components/Response.js +45 -34
- package/dist/cjs/components/SVGContent.js +6 -7
- package/dist/cjs/components/ScrollOnDrag/stories/__mock__.js +2 -2
- package/dist/cjs/components/ScrollOnDrag.js +7 -8
- package/dist/cjs/components/ScrollToView.js +8 -9
- package/dist/cjs/components/Scrollbar/stories/__mock__.js +1 -1
- package/dist/cjs/components/Scrollbar.js +1 -1
- package/dist/cjs/components/Search.js +39 -31
- package/dist/cjs/components/Segmented/stories/__mock__.js +23 -10
- package/dist/cjs/components/Segmented.js +46 -41
- package/dist/cjs/components/Select.js +118 -113
- package/dist/cjs/components/Swiper/stories/__mock__.js +3 -3
- package/dist/cjs/components/Swiper.js +27 -29
- package/dist/cjs/components/Switch.js +33 -26
- package/dist/cjs/components/Tab/stories/__mock__.js +1 -1
- package/dist/cjs/components/Tab.js +33 -27
- package/dist/cjs/components/Text.js +1 -2
- package/dist/cjs/components/Textarea.js +26 -18
- package/dist/cjs/components/Tile.js +21 -17
- package/dist/cjs/components/Title.js +3 -4
- package/dist/cjs/components/Tooltip.js +3 -4
- package/dist/cjs/components/Video/stories/__mocks__.js +1 -1
- package/dist/cjs/components/Video.js +3 -4
- package/dist/cjs/components/Warning.js +26 -20
- package/dist/cjs/context/Notifications.js +38 -42
- package/dist/cjs/context/UIContext.js +19 -17
- package/dist/cjs/context/UrlAssetPrefix.js +3 -3
- package/dist/cjs/hoc/urlWithAssetPrefix.js +13 -16
- package/dist/cjs/hooks/useActiveClasses/useActiveClasses.helpers.js +13 -40
- package/dist/cjs/hooks/useActiveClasses/useActiveClasses.interface.js +1 -1
- package/dist/cjs/hooks/useActiveClasses/useActiveClasses.js +25 -29
- package/dist/cjs/hooks/useAppearanceConfig/useAppearanceConfig.js +13 -15
- package/dist/cjs/hooks/useAppearanceConfig.js +0 -1
- package/dist/cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js +21 -28
- package/dist/cjs/hooks/useDevicePropsGenerator.js +0 -1
- package/dist/cjs/hooks/useDeviceTargetClass.js +0 -1
- package/dist/cjs/hooks/useStyles/styleAttributes.js +1 -1
- package/dist/cjs/hooks/useStyles/useStyles.js +0 -1
- package/dist/cjs/hooks/useStyles.js +0 -1
- package/dist/cjs/hooks/useViewportFix.js +5 -5
- package/dist/cjs/hooks.js +1 -1
- package/dist/cjs/utils/setViewportProperty.js +3 -3
- package/dist/components/Accordion.js +37 -34
- package/dist/components/Avatar.js +5 -6
- package/dist/components/AvatarStack/stories/__mock__.js +1 -1
- package/dist/components/AvatarStack.js +17 -16
- package/dist/components/Badge.js +3 -4
- package/dist/components/Breadcrumbs/stories/__mock__.js +1 -1
- package/dist/components/Breadcrumbs.js +27 -23
- package/dist/components/Button.js +5 -6
- package/dist/components/Cell/stories/__mock__.js +1 -1
- package/dist/components/Cell.js +28 -25
- package/dist/components/Checkbox.js +33 -26
- package/dist/components/Checkmark.js +28 -23
- package/dist/components/Chips/stories/__mock__.js +1 -1
- package/dist/components/Chips.js +4 -5
- package/dist/components/Choice/stories/__mock__.js +2 -2
- package/dist/components/Choice.js +46 -40
- package/dist/components/Code.js +34 -26
- package/dist/components/CookiesWarning.js +23 -23
- package/dist/components/Dadata.js +14 -9
- package/dist/components/DatePeriod.js +32 -30
- package/dist/components/DatePicker.js +8 -9
- package/dist/components/Divider.js +1 -2
- package/dist/components/Dot.js +5 -6
- package/dist/components/Drawer.js +23 -21
- package/dist/components/Dropdown/stories/__mock__.js +6 -6
- package/dist/components/Dropdown.js +5 -6
- package/dist/components/Flex.js +11 -12
- package/dist/components/Grid.js +15 -16
- package/dist/components/Group.js +1 -2
- package/dist/components/HTMLContent.js +5 -6
- package/dist/components/HeroTitle.js +17 -16
- package/dist/components/Icon.js +3 -4
- package/dist/components/Image.js +1 -2
- package/dist/components/Input.js +1 -2
- package/dist/components/InputPassword.js +34 -26
- package/dist/components/Label.js +4 -5
- package/dist/components/Link.js +1 -2
- package/dist/components/List.js +39 -28
- package/dist/components/Loader.js +2 -3
- package/dist/components/Logo.js +10 -11
- package/dist/components/MenuItem.js +36 -33
- package/dist/components/Modal.js +40 -38
- package/dist/components/ModalSheetBottom.js +17 -18
- package/dist/components/Notification/stories/__mock__.js +1 -1
- package/dist/components/Notification.js +31 -24
- package/dist/components/Overlay.js +1 -2
- package/dist/components/Pagination.js +43 -41
- package/dist/components/Radio.js +34 -26
- package/dist/components/RangeSlider.js +8 -9
- package/dist/components/Response/img.js +1 -1
- package/dist/components/Response.js +45 -34
- package/dist/components/SVGContent.js +6 -7
- package/dist/components/ScrollOnDrag/stories/__mock__.js +2 -2
- package/dist/components/ScrollOnDrag.js +7 -8
- package/dist/components/ScrollToView.js +8 -9
- package/dist/components/Scrollbar/stories/__mock__.js +1 -1
- package/dist/components/Scrollbar.js +1 -1
- package/dist/components/Search.js +39 -31
- package/dist/components/Segmented/stories/__mock__.js +23 -10
- package/dist/components/Segmented.js +46 -41
- package/dist/components/Select.js +118 -113
- package/dist/components/Swiper/stories/__mock__.js +3 -3
- package/dist/components/Swiper.js +27 -29
- package/dist/components/Switch.js +33 -26
- package/dist/components/Tab/stories/__mock__.js +1 -1
- package/dist/components/Tab.js +33 -27
- package/dist/components/Text.js +1 -2
- package/dist/components/Textarea.js +26 -18
- package/dist/components/Tile.js +21 -17
- package/dist/components/Title.js +3 -4
- package/dist/components/Tooltip.js +3 -4
- package/dist/components/Video/stories/__mocks__.js +1 -1
- package/dist/components/Video.js +3 -4
- package/dist/components/Warning.js +26 -20
- package/dist/context/Notifications.js +38 -42
- package/dist/context/UIContext.js +19 -17
- package/dist/context/UrlAssetPrefix.js +3 -3
- package/dist/css/components/Tile/Tile.css +3 -3
- package/dist/hoc/urlWithAssetPrefix.js +13 -16
- package/dist/hooks/useActiveClasses/useActiveClasses.helpers.js +13 -40
- package/dist/hooks/useActiveClasses/useActiveClasses.interface.js +1 -1
- package/dist/hooks/useActiveClasses/useActiveClasses.js +25 -29
- package/dist/hooks/useAppearanceConfig/useAppearanceConfig.js +13 -15
- package/dist/hooks/useAppearanceConfig.js +0 -1
- package/dist/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js +21 -28
- package/dist/hooks/useDevicePropsGenerator.js +0 -1
- package/dist/hooks/useDeviceTargetClass.js +0 -1
- package/dist/hooks/useStyles/styleAttributes.js +1 -1
- package/dist/hooks/useStyles/useStyles.js +0 -1
- package/dist/hooks/useStyles.js +0 -1
- package/dist/hooks/useViewportFix.js +5 -5
- package/dist/hooks.js +1 -1
- package/dist/types/components/Select/SelectContainer.d.ts +1 -1
- package/dist/utils/setViewportProperty.js +3 -3
- package/package.json +3 -3
- package/dist/Avatar_cjs_CLJnKU39.js +0 -157
- package/dist/Avatar_es_BgN-fbOj.js +0 -153
- package/dist/ChipsGroup_cjs_C8L3ZeD_.js +0 -331
- package/dist/DatePicker_cjs_BzEtDAb8.js +0 -183
- package/dist/DatePicker_es_DRyCMO0I.js +0 -179
- package/dist/Divider_cjs_DUYtmwn2.js +0 -97
- package/dist/Divider_es_CCLBFIx6.js +0 -93
- package/dist/DropdownItem_cjs_Bhss6lyM.js +0 -207
- package/dist/DropdownItem_es_BXl6lPJx.js +0 -202
- package/dist/Group_cjs_CsJ6ICKK.js +0 -59
- package/dist/Group_es_DRqIIM9m.js +0 -55
- package/dist/Image_cjs_DRhhc66R.js +0 -29
- package/dist/Image_es_BpMidmve.js +0 -27
- package/dist/Loader_cjs_D3lnxPlI.js +0 -132
- package/dist/Loader_es_BUSqFrCd.js +0 -128
- package/dist/Overlay_cjs_CcfJYN5o.js +0 -41
- package/dist/Overlay_es_DF3DAdxS.js +0 -37
- package/dist/Text_cjs_0EINiUq4.js +0 -68
- package/dist/Text_es_CwV9rjFD.js +0 -64
- package/dist/tslib.es6_cjs_CCZ3TN_7.js +0 -59
- package/dist/tslib.es6_es_Bwu1Cn-t.js +0 -56
|
@@ -5,7 +5,6 @@ var clsx = require('clsx');
|
|
|
5
5
|
var Slider = require('rc-slider');
|
|
6
6
|
var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
7
7
|
var useStyles = require('../hooks/useStyles/useStyles.js');
|
|
8
|
-
require('../../tslib.es6_cjs_CCZ3TN_7.js');
|
|
9
8
|
require('react');
|
|
10
9
|
require('lodash/camelCase');
|
|
11
10
|
require('lodash/castArray');
|
|
@@ -22,15 +21,15 @@ require('../hooks/useStyles/styleAttributes.js');
|
|
|
22
21
|
require('lodash/maxBy');
|
|
23
22
|
|
|
24
23
|
function RangeSlider(props) {
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
24
|
+
const { className, min, max, disabled, pushable, range, value, vertical, before, after, set, onChangeSlider, children, } = props;
|
|
25
|
+
const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
|
|
26
|
+
const { fillClass, fillHandleClass, fillHandleDraggingClass, fillHandleDraggingHoverClass, fillHandleHoverClass, fillRailClass, fillTrackClass, shapeClass, widthClass, } = propsGenerator;
|
|
28
27
|
// @ts-expect-error
|
|
29
|
-
|
|
30
|
-
return (jsxRuntime.jsxs("div", { className: clsx(className, 'range-slider', set &&
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
28
|
+
const { styles: rangeSliderStyles } = useStyles.useStyles(props);
|
|
29
|
+
return (jsxRuntime.jsxs("div", { className: clsx(className, 'range-slider', set && `range-slider_set_${set}`, fillClass && `fill_${fillClass}`, fillTrackClass && `range-slider-track-fill_${fillTrackClass}`, fillRailClass && `range-slider-rail-fill_${fillRailClass}`, fillHandleClass && `range-slider-handle-fill_${fillHandleClass}`, fillHandleHoverClass &&
|
|
30
|
+
`range-slider-handle-fill-hover_${fillHandleHoverClass}`, fillHandleDraggingClass &&
|
|
31
|
+
`range-slider-handle-dragging-fill_${fillHandleDraggingClass}`, fillHandleDraggingHoverClass &&
|
|
32
|
+
`range-slider-handle-dragging-fill-hover_${fillHandleDraggingHoverClass}`, shapeClass && `range-slider_shape_${shapeClass}`, widthClass && `width_${widthClass}`), style: rangeSliderStyles, children: [before && jsxRuntime.jsx("div", { className: "range-slider__before", children: before }), jsxRuntime.jsx(Slider, { className: "range-slider__wrapper", min: min, max: max, disabled: disabled, pushable: pushable, range: range, value: value, vertical: vertical, onChange: onChangeSlider }), children, after && jsxRuntime.jsx("div", { className: "range-slider__after", children: after })] }));
|
|
34
33
|
}
|
|
35
34
|
|
|
36
35
|
exports.RangeSlider = RangeSlider;
|
|
@@ -22,7 +22,7 @@ var img$1 = "data:image/svg+xml,%3csvg width='180' height='180' viewBox='0 0 180
|
|
|
22
22
|
|
|
23
23
|
var img = "data:image/svg+xml,%3csvg width='180' height='180' viewBox='0 0 180 180' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='180' height='180' rx='90' fill='%23DE8806'/%3e%3cpath d='M90.5029 123.721C93.8166 123.721 96.5029 126.407 96.5029 129.721V134.749C96.5027 138.063 93.8165 140.749 90.5029 140.749C87.1894 140.749 84.5031 138.063 84.5029 134.749V129.721C84.5029 126.407 87.1892 123.721 90.5029 123.721ZM90.5029 39.251C93.8166 39.251 96.5029 41.9383 96.5029 45.252V104.582C96.5024 107.895 93.8163 110.582 90.5029 110.582C87.1895 110.582 84.5034 107.895 84.5029 104.582V45.252C84.5029 41.9382 87.1892 39.251 90.5029 39.251Z' fill='white'/%3e%3c/svg%3e";
|
|
24
24
|
|
|
25
|
-
|
|
25
|
+
const responseIcon = {
|
|
26
26
|
Error: img$7,
|
|
27
27
|
Warning: img,
|
|
28
28
|
Success: img$2,
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var index = require('./Response/img.js');
|
|
4
|
-
var tslib_es6 = require('../../tslib.es6_cjs_CCZ3TN_7.js');
|
|
5
4
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
5
|
var React = require('react');
|
|
7
6
|
var clsx = require('clsx');
|
|
@@ -9,9 +8,9 @@ var urlWithAssetPrefix = require('../hoc/urlWithAssetPrefix.js');
|
|
|
9
8
|
var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
|
|
10
9
|
var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
11
10
|
var useStyles = require('../hooks/useStyles/useStyles.js');
|
|
12
|
-
var Button = require('../../
|
|
13
|
-
var Group = require('../../
|
|
14
|
-
var Text = require('../../
|
|
11
|
+
var Button = require('../../Button_cjs_CZz8OjWi.js');
|
|
12
|
+
var Group = require('../../Group_cjs_DmfeUcFI.js');
|
|
13
|
+
var Text = require('../../Text_cjs_BDTjOTVB.js');
|
|
15
14
|
require('@itcase/common');
|
|
16
15
|
require('../context/UrlAssetPrefix.js');
|
|
17
16
|
require('lodash/camelCase');
|
|
@@ -26,12 +25,12 @@ require('../utils/setViewportProperty.js');
|
|
|
26
25
|
require('../hooks.js');
|
|
27
26
|
require('../hooks/useStyles/styleAttributes.js');
|
|
28
27
|
require('lodash/maxBy');
|
|
29
|
-
require('../../
|
|
28
|
+
require('../../Icon_cjs_DpFxIFv5.js');
|
|
30
29
|
require('react-inlinesvg');
|
|
31
|
-
require('../../
|
|
32
|
-
require('../../
|
|
30
|
+
require('../../Link_cjs_qKXVfU8e.js');
|
|
31
|
+
require('../../Loader_cjs_DIDsIq3J.js');
|
|
33
32
|
|
|
34
|
-
|
|
33
|
+
const responseAppearanceConfirm = {
|
|
35
34
|
confirm: {
|
|
36
35
|
fill: 'surfacePrimary',
|
|
37
36
|
titleTextColor: 'surfaceTextPrimary',
|
|
@@ -46,7 +45,7 @@ var responseAppearanceConfirm = {
|
|
|
46
45
|
},
|
|
47
46
|
};
|
|
48
47
|
|
|
49
|
-
|
|
48
|
+
const responseAppearanceDanger = {
|
|
50
49
|
danger: {
|
|
51
50
|
fill: 'surfacePrimary',
|
|
52
51
|
titleTextColor: 'surfaceTextPrimary',
|
|
@@ -61,7 +60,7 @@ var responseAppearanceDanger = {
|
|
|
61
60
|
},
|
|
62
61
|
};
|
|
63
62
|
|
|
64
|
-
|
|
63
|
+
const responseAppearanceEmpty = {
|
|
65
64
|
empty: {
|
|
66
65
|
fill: 'surfacePrimary',
|
|
67
66
|
titleTextColor: 'surfaceTextPrimary',
|
|
@@ -76,7 +75,7 @@ var responseAppearanceEmpty = {
|
|
|
76
75
|
},
|
|
77
76
|
};
|
|
78
77
|
|
|
79
|
-
|
|
78
|
+
const responseAppearanceError = {
|
|
80
79
|
error: {
|
|
81
80
|
fill: 'surfacePrimary',
|
|
82
81
|
titleTextColor: 'surfaceTextPrimary',
|
|
@@ -91,7 +90,7 @@ var responseAppearanceError = {
|
|
|
91
90
|
},
|
|
92
91
|
};
|
|
93
92
|
|
|
94
|
-
|
|
93
|
+
const responseAppearanceFail = {
|
|
95
94
|
fail: {
|
|
96
95
|
fill: 'surfacePrimary',
|
|
97
96
|
titleTextColor: 'surfaceTextPrimary',
|
|
@@ -106,7 +105,7 @@ var responseAppearanceFail = {
|
|
|
106
105
|
},
|
|
107
106
|
};
|
|
108
107
|
|
|
109
|
-
|
|
108
|
+
const responseAppearanceNothingFound = {
|
|
110
109
|
nothingFound: {
|
|
111
110
|
fill: 'surfacePrimary',
|
|
112
111
|
titleTextColor: 'surfaceTextPrimary',
|
|
@@ -121,7 +120,7 @@ var responseAppearanceNothingFound = {
|
|
|
121
120
|
},
|
|
122
121
|
};
|
|
123
122
|
|
|
124
|
-
|
|
123
|
+
const responseAppearanceRefresh = {
|
|
125
124
|
refresh: {
|
|
126
125
|
fill: 'surfacePrimary',
|
|
127
126
|
titleTextColor: 'surfaceTextPrimary',
|
|
@@ -136,7 +135,7 @@ var responseAppearanceRefresh = {
|
|
|
136
135
|
},
|
|
137
136
|
};
|
|
138
137
|
|
|
139
|
-
|
|
138
|
+
const responseAppearanceStyle = {
|
|
140
139
|
solid: {
|
|
141
140
|
borderColor: 'none',
|
|
142
141
|
},
|
|
@@ -150,7 +149,7 @@ var responseAppearanceStyle = {
|
|
|
150
149
|
},
|
|
151
150
|
};
|
|
152
151
|
|
|
153
|
-
|
|
152
|
+
const responseAppearanceSuccess = {
|
|
154
153
|
success: {
|
|
155
154
|
fill: 'surfacePrimary',
|
|
156
155
|
titleTextColor: 'surfaceTextPrimary',
|
|
@@ -165,7 +164,7 @@ var responseAppearanceSuccess = {
|
|
|
165
164
|
},
|
|
166
165
|
};
|
|
167
166
|
|
|
168
|
-
|
|
167
|
+
const responseAppearanceUnableLoadData = {
|
|
169
168
|
unableLoadData: {
|
|
170
169
|
fill: 'surfacePrimary',
|
|
171
170
|
titleTextColor: 'surfaceTextPrimary',
|
|
@@ -180,7 +179,7 @@ var responseAppearanceUnableLoadData = {
|
|
|
180
179
|
},
|
|
181
180
|
};
|
|
182
181
|
|
|
183
|
-
|
|
182
|
+
const responseAppearanceWarning = {
|
|
184
183
|
warning: {
|
|
185
184
|
fill: 'surfacePrimary',
|
|
186
185
|
titleTextColor: 'surfaceTextPrimary',
|
|
@@ -195,32 +194,44 @@ var responseAppearanceWarning = {
|
|
|
195
194
|
},
|
|
196
195
|
};
|
|
197
196
|
|
|
198
|
-
|
|
197
|
+
const responseAppearance = {
|
|
198
|
+
...responseAppearanceConfirm,
|
|
199
|
+
...responseAppearanceEmpty,
|
|
200
|
+
...responseAppearanceDanger,
|
|
201
|
+
...responseAppearanceRefresh,
|
|
202
|
+
...responseAppearanceUnableLoadData,
|
|
203
|
+
...responseAppearanceNothingFound,
|
|
204
|
+
...responseAppearanceFail,
|
|
205
|
+
...responseAppearanceError,
|
|
206
|
+
...responseAppearanceSuccess,
|
|
207
|
+
...responseAppearanceWarning,
|
|
208
|
+
...responseAppearanceStyle,
|
|
209
|
+
};
|
|
199
210
|
|
|
200
|
-
|
|
211
|
+
const responseConfig = {
|
|
201
212
|
appearance: responseAppearance,
|
|
202
|
-
setAppearance:
|
|
213
|
+
setAppearance: (appearanceConfig) => {
|
|
203
214
|
responseConfig.appearance = appearanceConfig;
|
|
204
215
|
},
|
|
205
216
|
};
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
217
|
+
const Response = urlWithAssetPrefix.urlWithAssetPrefix(function Response(props) {
|
|
218
|
+
const { appearance, className, width, height, title, desc, secondaryButton, primaryButton, before, after, isSkeleton, onClickSecondaryButton, } = props;
|
|
219
|
+
const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, responseConfig);
|
|
220
|
+
const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
|
|
221
|
+
const { dataTestId, dataTour, fillClass, fillHoverClass, titleTextColor, titleTextSize, titleTextWeight, descTextColor, descTextSize, descTextWeight, borderColorClass, borderColorHoverClass, borderTypeClass, borderWidthClass, onClickPrimaryButton, secondaryButtonAfter, secondaryButtonAppearance, secondaryButtonBefore, secondaryButtonFill, secondaryButtonFillHover, secondaryButtonLabel, secondaryButtonLabelTextColor, secondaryButtonLabelTextSize, secondaryButtonShape, secondaryButtonSize, secondaryButtonWidth, imageSrc, primaryButtonAfter, primaryButtonAppearance, primaryButtonBefore, primaryButtonFill, primaryButtonFillHover, primaryButtonLabel, primaryButtonLabelTextColor, primaryButtonLabelTextSize, primaryButtonShape, primaryButtonSize, primaryButtonWidth, shapeClass, shapeStrengthClass, svgFillClass, SvgImage, svgPathFillClass, svgSrc, widthClass, } = propsGenerator;
|
|
211
222
|
// TODO: use Icon instead?
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
223
|
+
const ImageComponent = React.useMemo(() => {
|
|
224
|
+
const src = imageSrc || svgSrc;
|
|
225
|
+
const Image = SvgImage;
|
|
215
226
|
if (Image) {
|
|
216
|
-
|
|
227
|
+
const sizes = {};
|
|
217
228
|
if (width) {
|
|
218
229
|
sizes.width = width;
|
|
219
230
|
}
|
|
220
231
|
if (height) {
|
|
221
232
|
sizes.height = height;
|
|
222
233
|
}
|
|
223
|
-
return jsxRuntime.jsx(Image,
|
|
234
|
+
return jsxRuntime.jsx(Image, { ...sizes });
|
|
224
235
|
}
|
|
225
236
|
if (src) {
|
|
226
237
|
// if (src.endsWith('.svg') || src.startsWith('data:image/svg')) {
|
|
@@ -235,15 +246,15 @@ var Response = urlWithAssetPrefix.urlWithAssetPrefix(function Response(props) {
|
|
|
235
246
|
return null;
|
|
236
247
|
}, [imageSrc, svgSrc, SvgImage, width, height, svgFillClass]);
|
|
237
248
|
// @ts-expect-error
|
|
238
|
-
|
|
239
|
-
return (jsxRuntime.jsxs("div", { className: clsx(className, 'response', fillClass &&
|
|
249
|
+
const { styles: responseStyles, wrapper: wrapperStyles } = useStyles.useStyles(props);
|
|
250
|
+
return (jsxRuntime.jsxs("div", { className: clsx(className, 'response', fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, widthClass && `width_${widthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, isSkeleton && `response_skeleton`), "data-test-id": dataTestId, "data-tour": dataTour, style: responseStyles, children: [before, jsxRuntime.jsxs("div", { className: "response__wrapper", style: wrapperStyles, children: [ImageComponent && (jsxRuntime.jsx("div", { className: clsx('response__image', svgFillClass && `svg_fill_${svgFillClass}`, svgPathFillClass && `svg_path_fill_${svgPathFillClass}`), children: ImageComponent })), jsxRuntime.jsxs("div", { className: "response__wrapper-inner", children: [title && (jsxRuntime.jsx(Text.Text, { className: "response__title", size: titleTextSize, textColor: titleTextColor, textWeight: titleTextWeight, children: title })), desc && (jsxRuntime.jsx(Text.Text, { className: "response__desc", size: descTextSize, textColor: descTextColor, textWeight: descTextWeight, children: desc }))] })] }), (primaryButtonLabel ||
|
|
240
251
|
primaryButton ||
|
|
241
252
|
secondaryButtonLabel ||
|
|
242
253
|
secondaryButton ||
|
|
243
254
|
appearanceConfig) && (jsxRuntime.jsxs(Group.Group, { className: "response__button", width: "fill", children: [primaryButtonLabel ? (jsxRuntime.jsx(Button.Button, { className: "response__button-item", appearance: primaryButtonAppearance, width: primaryButtonWidth || 'fill', size: primaryButtonSize, fill: primaryButtonFill, fillHover: primaryButtonFillHover, label: primaryButtonLabel, labelTextColor: primaryButtonLabelTextColor, labelTextSize: primaryButtonLabelTextSize, shape: primaryButtonShape, before: primaryButtonBefore, after: primaryButtonAfter, onClick: onClickPrimaryButton })) : (primaryButton), secondaryButtonLabel ? (jsxRuntime.jsx(Button.Button, { className: "response__button-item", appearance: secondaryButtonAppearance, width: secondaryButtonWidth || 'fill', size: secondaryButtonSize, fill: secondaryButtonFill, fillHover: secondaryButtonFillHover, label: secondaryButtonLabel, labelTextColor: secondaryButtonLabelTextColor, labelTextSize: secondaryButtonLabelTextSize, shape: secondaryButtonShape, before: secondaryButtonBefore, after: secondaryButtonAfter, onClick: onClickSecondaryButton })) : (secondaryButton)] })), after] }));
|
|
244
255
|
});
|
|
245
256
|
|
|
246
|
-
|
|
257
|
+
const RESPONSE_MESSAGES = {
|
|
247
258
|
empty: {
|
|
248
259
|
appearance: 'refresh ghost',
|
|
249
260
|
title: ' Список пуст',
|
|
@@ -6,7 +6,6 @@ var SVG = require('react-inlinesvg');
|
|
|
6
6
|
var urlWithAssetPrefix = require('../hoc/urlWithAssetPrefix.js');
|
|
7
7
|
var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
8
8
|
var useStyles = require('../hooks/useStyles/useStyles.js');
|
|
9
|
-
require('../../tslib.es6_cjs_CCZ3TN_7.js');
|
|
10
9
|
require('react');
|
|
11
10
|
require('@itcase/common');
|
|
12
11
|
require('../context/UrlAssetPrefix.js');
|
|
@@ -23,13 +22,13 @@ require('../hooks.js');
|
|
|
23
22
|
require('../hooks/useStyles/styleAttributes.js');
|
|
24
23
|
require('lodash/maxBy');
|
|
25
24
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
25
|
+
const SVGContent = urlWithAssetPrefix.urlWithAssetPrefix(function SVGContent(props) {
|
|
26
|
+
const { className, src, SvgImage } = props;
|
|
27
|
+
const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
|
|
28
|
+
const { svgFillClass, svgFillHoverClass } = propsGenerator;
|
|
30
29
|
// @ts-expect-error
|
|
31
|
-
|
|
32
|
-
return (jsxRuntime.jsxs("div", { className: clsx(className, 'svg-content', svgFillClass &&
|
|
30
|
+
const { styles: svgContentStyles } = useStyles.useStyles(props);
|
|
31
|
+
return (jsxRuntime.jsxs("div", { className: clsx(className, 'svg-content', svgFillClass && `svg_fill_${svgFillClass}`, svgFillHoverClass && `svg_fill_hover_${svgFillHoverClass}`), style: svgContentStyles, children: [src && jsxRuntime.jsx(SVG, { src: src }), SvgImage && jsxRuntime.jsx(SvgImage, {})] }));
|
|
33
32
|
});
|
|
34
33
|
|
|
35
34
|
exports.SVGContent = SVGContent;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
const scrollOnDragMock = (jsxRuntime.jsx("div", { style: { display: 'flex' }, children: Array.from({ length: 20 }, (_, index) => (jsxRuntime.jsx("div", { style: {
|
|
6
6
|
height: 65,
|
|
7
7
|
justifyContent: 'center',
|
|
8
8
|
alignItems: 'center',
|
|
@@ -10,6 +10,6 @@ var scrollOnDragMock = (jsxRuntime.jsx("div", { style: { display: 'flex' }, chil
|
|
|
10
10
|
padding: '50px',
|
|
11
11
|
border: '1px solid black',
|
|
12
12
|
display: 'flex',
|
|
13
|
-
}, children: index }, index))
|
|
13
|
+
}, children: index }, index))) }));
|
|
14
14
|
|
|
15
15
|
exports.scrollOnDragMock = scrollOnDragMock;
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var tslib_es6 = require('../../tslib.es6_cjs_CCZ3TN_7.js');
|
|
4
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
5
4
|
var React = require('react');
|
|
6
5
|
var clsx = require('clsx');
|
|
@@ -23,14 +22,14 @@ require('../hooks/useStyles/styleAttributes.js');
|
|
|
23
22
|
require('lodash/maxBy');
|
|
24
23
|
|
|
25
24
|
function ScrollOnDrag(props) {
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
25
|
+
const { className, scrollContainerProps, children, isScrollbar } = props;
|
|
26
|
+
const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
|
|
27
|
+
const { ref } = ScrollContainer.useScrollContainer();
|
|
28
|
+
const { fillClass, fillHoverClass, borderColorClass, borderTypeClass, borderWidthClass, elevationClass, heightClass, widthClass = 'fill', } = propsGenerator;
|
|
30
29
|
// @ts-expect-error
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
return (jsxRuntime.jsx(ScrollOnDragWrapper, { scrollableNodeProps: { ref
|
|
30
|
+
const { scrollContainer: scrollContainerStyles, styles: styles } = useStyles.useStyles(props);
|
|
31
|
+
const ScrollOnDragWrapper = isScrollbar ? SimpleBar : React.Fragment;
|
|
32
|
+
return (jsxRuntime.jsx(ScrollOnDragWrapper, { scrollableNodeProps: { ref }, children: jsxRuntime.jsx("div", { className: clsx('scroll-on-drag', className, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, borderWidthClass && `border-width_${borderWidthClass}`, elevationClass && `elevation_${elevationClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, heightClass && `height_${heightClass}`, widthClass && `width_${widthClass}`), style: styles, children: jsxRuntime.jsx(ScrollContainer, { className: clsx(!isScrollbar && 'scroll-on-drag__wrapper'), ref: ref, ...scrollContainerProps, style: scrollContainerStyles, children: children }) }) }));
|
|
34
33
|
}
|
|
35
34
|
|
|
36
35
|
exports.ScrollOnDrag = ScrollOnDrag;
|
|
@@ -5,7 +5,6 @@ var clsx = require('clsx');
|
|
|
5
5
|
var reactScroll = require('react-scroll');
|
|
6
6
|
var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
7
7
|
var useStyles = require('../hooks/useStyles/useStyles.js');
|
|
8
|
-
require('../../tslib.es6_cjs_CCZ3TN_7.js');
|
|
9
8
|
require('react');
|
|
10
9
|
require('lodash/camelCase');
|
|
11
10
|
require('lodash/castArray');
|
|
@@ -21,14 +20,14 @@ require('../hooks.js');
|
|
|
21
20
|
require('../hooks/useStyles/styleAttributes.js');
|
|
22
21
|
require('lodash/maxBy');
|
|
23
22
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
return (jsxRuntime.jsx(Tag, { id: id, className: clsx(className, 'scroll-to-view', alignItemsClass &&
|
|
30
|
-
|
|
31
|
-
|
|
23
|
+
const ScrollToView = reactScroll.ScrollLink(function ScrollToView(props) {
|
|
24
|
+
const { id, className, tag: Tag = 'div', children } = props;
|
|
25
|
+
const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
|
|
26
|
+
const { directionClass, justifyContentClass, alignClass, alignDirectionClass, alignItemsClass, alignSelfClass, textColorActiveClass, textColorClass, textColorHoverClass, heightClass, widthClass, } = propsGenerator;
|
|
27
|
+
const { styles: scrollToViewStyles } = useStyles.useStyles(props);
|
|
28
|
+
return (jsxRuntime.jsx(Tag, { id: id, className: clsx(className, 'scroll-to-view', alignItemsClass && `align-items_${alignItemsClass}`, widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, alignDirectionClass && `align_${alignDirectionClass}`, alignClass && `align_${alignClass}`, textColorClass && `scroll-to-view_text-color_${textColorClass}`, textColorActiveClass &&
|
|
29
|
+
`scroll-to-view_text-color_active_${textColorActiveClass}`, textColorHoverClass &&
|
|
30
|
+
`scroll-to-view_text-color_hover_${textColorHoverClass}`, justifyContentClass && `justify-content_${justifyContentClass}`, directionClass && `direction_${directionClass}`, alignSelfClass && `align-self_${alignSelfClass}`), style: Object.assign({}, scrollToViewStyles, props.style), onClick: props.onClick, children: children }));
|
|
32
31
|
});
|
|
33
32
|
|
|
34
33
|
exports.ScrollToView = ScrollToView;
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
const scrollbarMock = Array.from({ length: 30 }, (_, index) => (jsxRuntime.jsx("div", { children: index })));
|
|
6
6
|
|
|
7
7
|
exports.scrollbarMock = scrollbarMock;
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var tslib_es6 = require('../../tslib.es6_cjs_CCZ3TN_7.js');
|
|
4
3
|
var _default = require('@itcase/icons/default');
|
|
5
4
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
5
|
var React = require('react');
|
|
@@ -8,9 +7,9 @@ var clsx = require('clsx');
|
|
|
8
7
|
var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
|
|
9
8
|
var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
10
9
|
var useStyles = require('../hooks/useStyles/useStyles.js');
|
|
11
|
-
var Icon = require('../../
|
|
12
|
-
var Text = require('../../
|
|
13
|
-
var Scrollbar = require('../../
|
|
10
|
+
var Icon = require('../../Icon_cjs_DpFxIFv5.js');
|
|
11
|
+
var Text = require('../../Text_cjs_BDTjOTVB.js');
|
|
12
|
+
var Scrollbar = require('../../Scrollbar_cjs_Cp-7v2Mt.js');
|
|
14
13
|
require('lodash/camelCase');
|
|
15
14
|
require('lodash/castArray');
|
|
16
15
|
require('lodash/upperFirst');
|
|
@@ -27,10 +26,10 @@ require('lodash/maxBy');
|
|
|
27
26
|
require('react-inlinesvg');
|
|
28
27
|
require('../hoc/urlWithAssetPrefix.js');
|
|
29
28
|
require('../context/UrlAssetPrefix.js');
|
|
30
|
-
require('../../
|
|
29
|
+
require('../../Link_cjs_qKXVfU8e.js');
|
|
31
30
|
require('react-scrollbars-custom');
|
|
32
31
|
|
|
33
|
-
|
|
32
|
+
const searchAppearanceDefault = {
|
|
34
33
|
defaultPrimary: {
|
|
35
34
|
fill: 'surfaceSecondary',
|
|
36
35
|
borderColor: 'surfaceBorderQuaternary',
|
|
@@ -53,7 +52,7 @@ var searchAppearanceDefault = {
|
|
|
53
52
|
},
|
|
54
53
|
};
|
|
55
54
|
|
|
56
|
-
|
|
55
|
+
const searchAppearanceDisabled = {
|
|
57
56
|
disabledPrimary: {
|
|
58
57
|
fill: 'surfaceDisabled',
|
|
59
58
|
borderColor: 'surfaceBorderDisabled',
|
|
@@ -66,7 +65,7 @@ var searchAppearanceDisabled = {
|
|
|
66
65
|
},
|
|
67
66
|
};
|
|
68
67
|
|
|
69
|
-
|
|
68
|
+
const searchAppearanceError = {
|
|
70
69
|
errorPrimary: {
|
|
71
70
|
fill: 'errorTertiary',
|
|
72
71
|
borderColor: 'errorBorderQuaternary',
|
|
@@ -79,7 +78,7 @@ var searchAppearanceError = {
|
|
|
79
78
|
},
|
|
80
79
|
};
|
|
81
80
|
|
|
82
|
-
|
|
81
|
+
const searchAppearanceRequire = {
|
|
83
82
|
requirePrimary: {
|
|
84
83
|
fill: 'warningTertiary',
|
|
85
84
|
borderColor: 'warningBorderSecondary',
|
|
@@ -92,7 +91,7 @@ var searchAppearanceRequire = {
|
|
|
92
91
|
},
|
|
93
92
|
};
|
|
94
93
|
|
|
95
|
-
|
|
94
|
+
const searchAppearanceShape = {
|
|
96
95
|
circular: {
|
|
97
96
|
shape: 'circular',
|
|
98
97
|
},
|
|
@@ -117,7 +116,7 @@ var searchAppearanceShape = {
|
|
|
117
116
|
},
|
|
118
117
|
};
|
|
119
118
|
|
|
120
|
-
|
|
119
|
+
const searchAppearanceSize = {
|
|
121
120
|
sizeXXL: {
|
|
122
121
|
size: 'xxl',
|
|
123
122
|
iconBefore: _default.icons24.Security.Search,
|
|
@@ -162,7 +161,7 @@ var searchAppearanceSize = {
|
|
|
162
161
|
},
|
|
163
162
|
};
|
|
164
163
|
|
|
165
|
-
|
|
164
|
+
const searchAppearanceStyle = {
|
|
166
165
|
solid: {
|
|
167
166
|
borderColor: 'none',
|
|
168
167
|
borderColorHover: 'none',
|
|
@@ -179,7 +178,7 @@ var searchAppearanceStyle = {
|
|
|
179
178
|
},
|
|
180
179
|
};
|
|
181
180
|
|
|
182
|
-
|
|
181
|
+
const searchAppearanceSuccess = {
|
|
183
182
|
successPrimary: {
|
|
184
183
|
fill: 'successTertiary',
|
|
185
184
|
borderColor: 'accentBorderQuaternary',
|
|
@@ -192,46 +191,55 @@ var searchAppearanceSuccess = {
|
|
|
192
191
|
},
|
|
193
192
|
};
|
|
194
193
|
|
|
195
|
-
|
|
194
|
+
const searchAppearance = {
|
|
195
|
+
...searchAppearanceSize,
|
|
196
|
+
...searchAppearanceStyle,
|
|
197
|
+
...searchAppearanceDefault,
|
|
198
|
+
...searchAppearanceError,
|
|
199
|
+
...searchAppearanceSuccess,
|
|
200
|
+
...searchAppearanceRequire,
|
|
201
|
+
...searchAppearanceDisabled,
|
|
202
|
+
...searchAppearanceShape,
|
|
203
|
+
};
|
|
196
204
|
|
|
197
|
-
|
|
205
|
+
const searchInputConfig = {
|
|
198
206
|
appearance: searchAppearance,
|
|
199
|
-
setAppearance:
|
|
207
|
+
setAppearance: (appearanceConfig) => {
|
|
200
208
|
searchInputConfig.appearance = appearanceConfig;
|
|
201
209
|
},
|
|
202
210
|
};
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
211
|
+
const SearchInput = React.forwardRef(function SearchInput(props, ref) {
|
|
212
|
+
const { dataTour, className, appearance, placeholder, value, before, after, isActive, isSkeleton, isDisabled, onChange, onClickClean, onFocus, onKeyDown, } = props;
|
|
213
|
+
const onChangeSearchInput = React.useCallback((event) => {
|
|
206
214
|
onChange && onChange(event.target.value);
|
|
207
215
|
}, [onChange]);
|
|
208
|
-
|
|
216
|
+
const onClickClearIcon = React.useCallback((event) => {
|
|
209
217
|
event.stopPropagation();
|
|
210
218
|
onChange && onChange('');
|
|
211
219
|
if (onClickClean) {
|
|
212
220
|
onClickClean();
|
|
213
221
|
}
|
|
214
222
|
}, [onChange, onClickClean]);
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
return (jsxRuntime.jsxs("label", { dataTour: dataTour, className: clsx(className, 'search-input', shapeClass &&
|
|
223
|
+
const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, searchInputConfig, isDisabled);
|
|
224
|
+
const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
|
|
225
|
+
const { size, fillClass, borderColorClass, borderColorHoverClass, borderTypeClass, borderWidthClass, iconAfter, iconAfterFill, iconAfterSize, iconAfterSrc, iconBefore, iconBeforeFill, iconBeforeSize, iconBeforeSrc, iconClear, iconClearFill, iconClearSize, iconClearSrc, inputFillClass, inputTextColorClass, inputTextSizeClass, inputTextStyleClass, inputTextWeightClass, placeholderTextColor, placeholderTextSize, placeholderTextStyle, placeholderTextWeight, shapeClass, shapeStrengthClass, widthClass, } = propsGenerator;
|
|
226
|
+
const { styles: searchInputStyles } = useStyles.useStyles(props);
|
|
227
|
+
return (jsxRuntime.jsxs("label", { dataTour: dataTour, className: clsx(className, 'search-input', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, fillClass && `fill_${fillClass}`, widthClass && `width_${widthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, size && `search-input_size_${size}`, isSkeleton && `search-input_skeleton`), style: searchInputStyles, children: [before, (iconBefore || iconBeforeSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "search-input__icon-before", size: iconBeforeSize, iconFill: iconBeforeFill, imageSrc: iconBeforeSrc, SvgImage: iconBefore })), jsxRuntime.jsxs("div", { className: clsx('search-input__wrapper', inputFillClass && `fill_${inputFillClass}`), children: [jsxRuntime.jsx("input", { className: clsx('search-input__value', (inputTextSizeClass ||
|
|
220
228
|
inputTextWeightClass ||
|
|
221
229
|
inputTextColorClass ||
|
|
222
230
|
inputTextStyleClass) &&
|
|
223
|
-
'text', inputTextSizeClass &&
|
|
231
|
+
'text', inputTextSizeClass && `text_size_${inputTextSizeClass}`, inputTextWeightClass && `text-weight_${inputTextWeightClass}`, inputTextColorClass && `text-color_${inputTextColorClass}`, inputTextStyleClass && `text-style_${inputTextStyleClass}`), type: "text", ref: ref, required: true, value: value || '', onChange: onChangeSearchInput, onFocus: onFocus, onKeyDown: onKeyDown }), jsxRuntime.jsx("div", { className: "search-input__placeholder", children: jsxRuntime.jsx(Text.Text, { className: clsx('search-input__placeholder-value'), size: placeholderTextSize, textColor: placeholderTextColor, textStyle: placeholderTextStyle, textWeight: placeholderTextWeight, children: placeholder }) }), value && (jsxRuntime.jsx(Icon.Icon, { className: clsx('search-input__clear', 'cursor_type_pointer', isActive && `fill_${iconClearFill}`), size: iconClearSize, iconFill: iconClearFill, imageSrc: iconClearSrc, SvgImage: iconClear, onClick: onClickClearIcon }))] }), (iconAfter || iconAfterSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "search-input__icon-after", size: iconAfterSize, iconFill: iconAfterFill, imageSrc: iconAfterSrc, SvgImage: iconAfter })), after] }));
|
|
224
232
|
});
|
|
225
233
|
// @ts-expect-error
|
|
226
234
|
SearchInput.DEFAULT_REF_STATE = {
|
|
227
235
|
input: null,
|
|
228
236
|
};
|
|
229
237
|
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
return (jsxRuntime.jsx("div", { className: clsx(className, 'search-result', shapeClass &&
|
|
238
|
+
const SearchResult = React.forwardRef(function SearchResult(props) {
|
|
239
|
+
const { className, scrollHeight, before, after, children } = props;
|
|
240
|
+
const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
|
|
241
|
+
const { fillClass, shapeClass, shapeStrengthClass } = propsGenerator;
|
|
242
|
+
return (jsxRuntime.jsx("div", { className: clsx(className, 'search-result', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, fillClass && `fill_${fillClass}`), children: jsxRuntime.jsxs("div", { className: "search-result__wrapper", children: [before, React.Children.toArray(children).filter(Boolean).length && (jsxRuntime.jsx(Scrollbar.Scrollbar, { scrollHeight: scrollHeight ? `${scrollHeight}px` : '300px', children: children })), after] }) }));
|
|
235
243
|
});
|
|
236
244
|
|
|
237
245
|
exports.SearchInput = SearchInput;
|