@itcase/ui 1.8.73 → 1.8.75
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/{DatePicker_cjs_C5Scs-GL.js → DatePicker_cjs_DPe3TnXs.js} +1 -1
- package/dist/{DatePicker_es_Cn7l4eD0.js → DatePicker_es_DIFs7Wgs.js} +1 -1
- package/dist/{Input_cjs_BGLd0EQu.js → Input_cjs_DSpBwtPv.js} +28 -3
- package/dist/{Input_es_D2mNCqiH.js → Input_es_3C_YhQFo.js} +28 -3
- package/dist/cjs/components/Chips.js +1 -1
- package/dist/cjs/components/Choice.js +30 -5
- package/dist/cjs/components/Code.js +28 -3
- package/dist/cjs/components/Dadata.js +1 -1
- package/dist/cjs/components/DatePeriod.js +3 -3
- package/dist/cjs/components/DatePicker.js +2 -2
- package/dist/cjs/components/Drawer/stories/__mock__.js +10 -0
- package/dist/cjs/components/Drawer.js +2 -2
- package/dist/cjs/components/Input.js +1 -1
- package/dist/cjs/components/Radio.js +33 -8
- package/dist/cjs/components/Textarea.js +28 -3
- package/dist/components/Chips.js +1 -1
- package/dist/components/Choice.js +30 -5
- package/dist/components/Code.js +28 -3
- package/dist/components/Dadata.js +1 -1
- package/dist/components/DatePeriod.js +3 -3
- package/dist/components/DatePicker.js +2 -2
- package/dist/components/Drawer/stories/__mock__.js +8 -0
- package/dist/components/Drawer.js +2 -2
- package/dist/components/Input.js +1 -1
- package/dist/components/Radio.js +33 -8
- package/dist/components/Textarea.js +28 -3
- package/dist/css/components/Code/Code.css +13 -21
- package/dist/css/components/Input/Input.css +0 -4
- package/dist/css/components/Textarea/Textarea.css +0 -4
- package/dist/types/components/Chips/appearance/chipsShape.d.ts +2 -2
- package/dist/types/components/Choice/appearance/choiceShape.d.ts +25 -0
- package/dist/types/components/Code/appearance/codeShape.d.ts +25 -0
- package/dist/types/components/Input/appearance/inputShape.d.ts +25 -0
- package/dist/types/components/Radio/Radio.appearance.d.ts +22 -0
- package/dist/types/components/Radio/appearance/radioShape.d.ts +25 -0
- package/dist/types/components/Textarea/appearance/textareaShape.d.ts +25 -0
- package/package.json +4 -4
- package/dist/{ChipsGroup_cjs_p5BbbozF.js → ChipsGroup_cjs_BLUYSr4v.js} +4 -4
- package/dist/{ChipsGroup_es_CSRBUuRU.js → ChipsGroup_es_DSwPxBuZ.js} +4 -4
|
@@ -11,7 +11,7 @@ var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDe
|
|
|
11
11
|
var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
|
|
12
12
|
var Button = require('./Button_cjs_CF3wei05.js');
|
|
13
13
|
var Icon = require('./Icon_cjs_BdX_3y6P.js');
|
|
14
|
-
var Input = require('./
|
|
14
|
+
var Input = require('./Input_cjs_DSpBwtPv.js');
|
|
15
15
|
var Label = require('./Label_cjs_DSSetg_A.js');
|
|
16
16
|
var Text = require('./Text_cjs_B8nNXWBA.js');
|
|
17
17
|
var _default = require('@itcase/icons/default');
|
|
@@ -9,7 +9,7 @@ import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevi
|
|
|
9
9
|
import { useStyles } from './hooks/useStyles/useStyles.js';
|
|
10
10
|
import { B as Button } from './Button_es_3cCwdJcQ.js';
|
|
11
11
|
import { I as Icon } from './Icon_es_Xh3eVHNS.js';
|
|
12
|
-
import { I as Input } from './
|
|
12
|
+
import { I as Input } from './Input_es_3C_YhQFo.js';
|
|
13
13
|
import { L as Label } from './Label_es_DnTcY7ih.js';
|
|
14
14
|
import { T as Text } from './Text_es_BvmOR4nv.js';
|
|
15
15
|
import { icons14 } from '@itcase/icons/default';
|
|
@@ -92,6 +92,31 @@ var inputAppearanceRequire = {
|
|
|
92
92
|
},
|
|
93
93
|
};
|
|
94
94
|
|
|
95
|
+
var inputAppearanceShape = {
|
|
96
|
+
circular: {
|
|
97
|
+
shape: 'circular',
|
|
98
|
+
},
|
|
99
|
+
rounded: {
|
|
100
|
+
shape: 'rounded',
|
|
101
|
+
},
|
|
102
|
+
roundedS: {
|
|
103
|
+
shape: 'rounded',
|
|
104
|
+
shapeStrength: '0_5m',
|
|
105
|
+
},
|
|
106
|
+
roundedM: {
|
|
107
|
+
shape: 'rounded',
|
|
108
|
+
shapeStrength: '1m',
|
|
109
|
+
},
|
|
110
|
+
roundedL: {
|
|
111
|
+
shape: 'rounded',
|
|
112
|
+
shapeStrength: '1_5m',
|
|
113
|
+
},
|
|
114
|
+
roundedXL: {
|
|
115
|
+
shape: 'rounded',
|
|
116
|
+
shapeStrength: '2m',
|
|
117
|
+
},
|
|
118
|
+
};
|
|
119
|
+
|
|
95
120
|
var inputAppearanceSize = {
|
|
96
121
|
sizeXXL: {
|
|
97
122
|
size: 'xxl',
|
|
@@ -158,7 +183,7 @@ var inputAppearanceSuccess = {
|
|
|
158
183
|
},
|
|
159
184
|
};
|
|
160
185
|
|
|
161
|
-
var inputAppearance = tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign({}, inputAppearanceDefault), inputAppearanceError), inputAppearanceSuccess), inputAppearanceRequire), inputAppearanceDisabled), inputAppearanceSize), inputAppearanceStyle);
|
|
186
|
+
var inputAppearance = tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign({}, inputAppearanceDefault), inputAppearanceError), inputAppearanceShape), inputAppearanceSuccess), inputAppearanceRequire), inputAppearanceDisabled), inputAppearanceSize), inputAppearanceStyle);
|
|
162
187
|
|
|
163
188
|
var inputConfig = {
|
|
164
189
|
appearance: inputAppearance,
|
|
@@ -174,8 +199,8 @@ var Input = React.forwardRef(function Input(props, ref) {
|
|
|
174
199
|
var appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, inputConfig);
|
|
175
200
|
// const stateConfig = state && inputConfig.state && inputConfig.state[state]
|
|
176
201
|
var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
|
|
177
|
-
var fillClass = propsGenerator.fillClass, fillDisabledClass = propsGenerator.fillDisabledClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorClass = propsGenerator.borderColorClass, borderColorDisabledClass = propsGenerator.borderColorDisabledClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, borderWidthClass = propsGenerator.borderWidthClass, borderWidthDisabledClass = propsGenerator.borderWidthDisabledClass, textColorClass = propsGenerator.textColorClass, textColorDisabledClass = propsGenerator.textColorDisabledClass, textSizeClass = propsGenerator.textSizeClass, textWeightClass = propsGenerator.textWeightClass, placeholderTextColorDisabledClass = propsGenerator.placeholderTextColorDisabledClass, caretClass = propsGenerator.caretClass, placeholderTextColorClass = propsGenerator.placeholderTextColorClass, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
|
|
178
|
-
return (jsxRuntime.jsx("input", { id: String(id), className: clsx(className, 'input', type === 'number' && 'input_type_number', (textSizeClass || textColorClass || textWeightClass) && 'text', caretClass && "caret-color_".concat(caretClass), shapeClass && "
|
|
202
|
+
var fillClass = propsGenerator.fillClass, fillDisabledClass = propsGenerator.fillDisabledClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorClass = propsGenerator.borderColorClass, borderColorDisabledClass = propsGenerator.borderColorDisabledClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, borderWidthClass = propsGenerator.borderWidthClass, borderWidthDisabledClass = propsGenerator.borderWidthDisabledClass, textColorClass = propsGenerator.textColorClass, textColorDisabledClass = propsGenerator.textColorDisabledClass, textSizeClass = propsGenerator.textSizeClass, textWeightClass = propsGenerator.textWeightClass, placeholderTextColorDisabledClass = propsGenerator.placeholderTextColorDisabledClass, caretClass = propsGenerator.caretClass, placeholderTextColorClass = propsGenerator.placeholderTextColorClass, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
|
|
203
|
+
return (jsxRuntime.jsx("input", { id: String(id), className: clsx(className, 'input', type === 'number' && 'input_type_number', (textSizeClass || textColorClass || textWeightClass) && 'text', caretClass && "caret-color_".concat(caretClass), shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), textColorClass && "text-color_".concat(textColorClass), textSizeClass && "text_size_".concat(textSizeClass), textWeightClass && "text-weight_".concat(textWeightClass), widthClass && "width_".concat(widthClass), sizeClass && "input_size_".concat(sizeClass), !isDisabled
|
|
179
204
|
? fillClass && "fill_".concat(fillClass)
|
|
180
205
|
: fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), !isDisabled
|
|
181
206
|
? borderWidthClass && "border-width_".concat(borderWidthClass)
|
|
@@ -90,6 +90,31 @@ var inputAppearanceRequire = {
|
|
|
90
90
|
},
|
|
91
91
|
};
|
|
92
92
|
|
|
93
|
+
var inputAppearanceShape = {
|
|
94
|
+
circular: {
|
|
95
|
+
shape: 'circular',
|
|
96
|
+
},
|
|
97
|
+
rounded: {
|
|
98
|
+
shape: 'rounded',
|
|
99
|
+
},
|
|
100
|
+
roundedS: {
|
|
101
|
+
shape: 'rounded',
|
|
102
|
+
shapeStrength: '0_5m',
|
|
103
|
+
},
|
|
104
|
+
roundedM: {
|
|
105
|
+
shape: 'rounded',
|
|
106
|
+
shapeStrength: '1m',
|
|
107
|
+
},
|
|
108
|
+
roundedL: {
|
|
109
|
+
shape: 'rounded',
|
|
110
|
+
shapeStrength: '1_5m',
|
|
111
|
+
},
|
|
112
|
+
roundedXL: {
|
|
113
|
+
shape: 'rounded',
|
|
114
|
+
shapeStrength: '2m',
|
|
115
|
+
},
|
|
116
|
+
};
|
|
117
|
+
|
|
93
118
|
var inputAppearanceSize = {
|
|
94
119
|
sizeXXL: {
|
|
95
120
|
size: 'xxl',
|
|
@@ -156,7 +181,7 @@ var inputAppearanceSuccess = {
|
|
|
156
181
|
},
|
|
157
182
|
};
|
|
158
183
|
|
|
159
|
-
var inputAppearance = __assign(__assign(__assign(__assign(__assign(__assign(__assign({}, inputAppearanceDefault), inputAppearanceError), inputAppearanceSuccess), inputAppearanceRequire), inputAppearanceDisabled), inputAppearanceSize), inputAppearanceStyle);
|
|
184
|
+
var inputAppearance = __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, inputAppearanceDefault), inputAppearanceError), inputAppearanceShape), inputAppearanceSuccess), inputAppearanceRequire), inputAppearanceDisabled), inputAppearanceSize), inputAppearanceStyle);
|
|
160
185
|
|
|
161
186
|
var inputConfig = {
|
|
162
187
|
appearance: inputAppearance,
|
|
@@ -172,8 +197,8 @@ var Input = React.forwardRef(function Input(props, ref) {
|
|
|
172
197
|
var appearanceConfig = useAppearanceConfig(appearance, inputConfig);
|
|
173
198
|
// const stateConfig = state && inputConfig.state && inputConfig.state[state]
|
|
174
199
|
var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
175
|
-
var fillClass = propsGenerator.fillClass, fillDisabledClass = propsGenerator.fillDisabledClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorClass = propsGenerator.borderColorClass, borderColorDisabledClass = propsGenerator.borderColorDisabledClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, borderWidthClass = propsGenerator.borderWidthClass, borderWidthDisabledClass = propsGenerator.borderWidthDisabledClass, textColorClass = propsGenerator.textColorClass, textColorDisabledClass = propsGenerator.textColorDisabledClass, textSizeClass = propsGenerator.textSizeClass, textWeightClass = propsGenerator.textWeightClass, placeholderTextColorDisabledClass = propsGenerator.placeholderTextColorDisabledClass, caretClass = propsGenerator.caretClass, placeholderTextColorClass = propsGenerator.placeholderTextColorClass, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
|
|
176
|
-
return (jsx("input", { id: String(id), className: clsx(className, 'input', type === 'number' && 'input_type_number', (textSizeClass || textColorClass || textWeightClass) && 'text', caretClass && "caret-color_".concat(caretClass), shapeClass && "
|
|
200
|
+
var fillClass = propsGenerator.fillClass, fillDisabledClass = propsGenerator.fillDisabledClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorClass = propsGenerator.borderColorClass, borderColorDisabledClass = propsGenerator.borderColorDisabledClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, borderWidthClass = propsGenerator.borderWidthClass, borderWidthDisabledClass = propsGenerator.borderWidthDisabledClass, textColorClass = propsGenerator.textColorClass, textColorDisabledClass = propsGenerator.textColorDisabledClass, textSizeClass = propsGenerator.textSizeClass, textWeightClass = propsGenerator.textWeightClass, placeholderTextColorDisabledClass = propsGenerator.placeholderTextColorDisabledClass, caretClass = propsGenerator.caretClass, placeholderTextColorClass = propsGenerator.placeholderTextColorClass, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
|
|
201
|
+
return (jsx("input", { id: String(id), className: clsx(className, 'input', type === 'number' && 'input_type_number', (textSizeClass || textColorClass || textWeightClass) && 'text', caretClass && "caret-color_".concat(caretClass), shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), textColorClass && "text-color_".concat(textColorClass), textSizeClass && "text_size_".concat(textSizeClass), textWeightClass && "text-weight_".concat(textWeightClass), widthClass && "width_".concat(widthClass), sizeClass && "input_size_".concat(sizeClass), !isDisabled
|
|
177
202
|
? fillClass && "fill_".concat(fillClass)
|
|
178
203
|
: fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), !isDisabled
|
|
179
204
|
? borderWidthClass && "border-width_".concat(borderWidthClass)
|
|
@@ -98,6 +98,31 @@ var choiceAppearanceRequire = {
|
|
|
98
98
|
},
|
|
99
99
|
};
|
|
100
100
|
|
|
101
|
+
var choiceAppearanceShape = {
|
|
102
|
+
circular: {
|
|
103
|
+
shape: 'circular',
|
|
104
|
+
},
|
|
105
|
+
rounded: {
|
|
106
|
+
shape: 'rounded',
|
|
107
|
+
},
|
|
108
|
+
roundedS: {
|
|
109
|
+
shape: 'rounded',
|
|
110
|
+
shapeStrength: '0_5m',
|
|
111
|
+
},
|
|
112
|
+
roundedM: {
|
|
113
|
+
shape: 'rounded',
|
|
114
|
+
shapeStrength: '1m',
|
|
115
|
+
},
|
|
116
|
+
roundedL: {
|
|
117
|
+
shape: 'rounded',
|
|
118
|
+
shapeStrength: '1_5m',
|
|
119
|
+
},
|
|
120
|
+
roundedXL: {
|
|
121
|
+
shape: 'rounded',
|
|
122
|
+
shapeStrength: '2m',
|
|
123
|
+
},
|
|
124
|
+
};
|
|
125
|
+
|
|
101
126
|
var choiceAppearanceSize = {
|
|
102
127
|
sizeL: {
|
|
103
128
|
size: 'l',
|
|
@@ -152,7 +177,7 @@ var choiceAppearanceSuccess = {
|
|
|
152
177
|
},
|
|
153
178
|
};
|
|
154
179
|
|
|
155
|
-
var choiceAppearance = tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign({}, choiceAppearanceError), choiceAppearanceDisabled), choiceAppearanceDefault), choiceAppearanceSuccess), choiceAppearanceRequire), choiceAppearanceStyle), choiceAppearanceSize);
|
|
180
|
+
var choiceAppearance = tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign({}, choiceAppearanceError), choiceAppearanceDisabled), choiceAppearanceDefault), choiceAppearanceSuccess), choiceAppearanceRequire), choiceAppearanceStyle), choiceAppearanceShape), choiceAppearanceSize);
|
|
156
181
|
|
|
157
182
|
var choiceConfig = {
|
|
158
183
|
appearance: choiceAppearance,
|
|
@@ -172,13 +197,13 @@ function Choice(props) {
|
|
|
172
197
|
}, [isCheckbox, setActiveSegment]);
|
|
173
198
|
var appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, choiceConfig);
|
|
174
199
|
var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
|
|
175
|
-
var size = propsGenerator.size, fillClass = propsGenerator.fillClass, fillItemActiveClass = propsGenerator.fillItemActiveClass, fillItemActiveDisabledClass = propsGenerator.fillItemActiveDisabledClass, fillItemActiveHoverClass = propsGenerator.fillItemActiveHoverClass, fillItemClass = propsGenerator.fillItemClass, fillItemDisabledClass = propsGenerator.fillItemDisabledClass, fillItemHoverClass = propsGenerator.fillItemHoverClass, labelTextActiveColor = propsGenerator.labelTextActiveColor, labelTextColor = propsGenerator.labelTextColor, labelTextSize = propsGenerator.labelTextSize, labelTextWeight = propsGenerator.labelTextWeight, labelTextWrap = propsGenerator.labelTextWrap, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, iconAfterFillDisabled = propsGenerator.iconAfterFillDisabled, iconBeforeFillDisabled = propsGenerator.iconBeforeFillDisabled, iconFillDisabled = propsGenerator.iconFillDisabled, iconAfterFill = propsGenerator.iconAfterFill, iconAfterFillActive = propsGenerator.iconAfterFillActive, iconAfterSize = propsGenerator.iconAfterSize, iconBeforeFill = propsGenerator.iconBeforeFill, iconBeforeFillActive = propsGenerator.iconBeforeFillActive, iconBeforeSize = propsGenerator.iconBeforeSize, iconFill = propsGenerator.iconFill, iconFillActive = propsGenerator.iconFillActive, iconSize = propsGenerator.iconSize, shapeClass = propsGenerator.shapeClass,
|
|
200
|
+
var size = propsGenerator.size, fillClass = propsGenerator.fillClass, fillItemActiveClass = propsGenerator.fillItemActiveClass, fillItemActiveDisabledClass = propsGenerator.fillItemActiveDisabledClass, fillItemActiveHoverClass = propsGenerator.fillItemActiveHoverClass, fillItemClass = propsGenerator.fillItemClass, fillItemDisabledClass = propsGenerator.fillItemDisabledClass, fillItemHoverClass = propsGenerator.fillItemHoverClass, labelTextActiveColor = propsGenerator.labelTextActiveColor, labelTextColor = propsGenerator.labelTextColor, labelTextSize = propsGenerator.labelTextSize, labelTextWeight = propsGenerator.labelTextWeight, labelTextWrap = propsGenerator.labelTextWrap, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, iconAfterFillDisabled = propsGenerator.iconAfterFillDisabled, iconBeforeFillDisabled = propsGenerator.iconBeforeFillDisabled, iconFillDisabled = propsGenerator.iconFillDisabled, iconAfterFill = propsGenerator.iconAfterFill, iconAfterFillActive = propsGenerator.iconAfterFillActive, iconAfterSize = propsGenerator.iconAfterSize, iconBeforeFill = propsGenerator.iconBeforeFill, iconBeforeFillActive = propsGenerator.iconBeforeFillActive, iconBeforeSize = propsGenerator.iconBeforeSize, iconFill = propsGenerator.iconFill, iconFillActive = propsGenerator.iconFillActive, iconSize = propsGenerator.iconSize, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, wrapClass = propsGenerator.wrapClass;
|
|
176
201
|
var styles = useStyles.useStyles(props).styles;
|
|
177
|
-
return (jsxRuntime.jsxs("div", { id: id, className: clsx(className, 'choice', size && "choice_size_".concat(size), fillClass && "fill_".concat(fillClass), wrapClass && "choice_wrap_".concat(wrapClass), isSkeleton && "choice_skeleton"), dataTestId: dataTestId && "".concat(dataTestId, "Choice"), dataTour: dataTour, ref: controlRef, style: styles, children: [before && jsxRuntime.jsx("div", { className: "choice__before", children: before }), isLoading ? (jsxRuntime.jsx(Loader.Loader, { width: "fill", height: "fill", fill: "surfacePrimary", itemFill: "surfaceItemAccent" })) : (jsxRuntime.jsx(React.Fragment, { children: options.map(function (item) {
|
|
202
|
+
return (jsxRuntime.jsxs("div", { id: id, className: clsx(className, 'choice', size && "choice_size_".concat(size), fillClass && "fill_".concat(fillClass), wrapClass && "choice_wrap_".concat(wrapClass), shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), isSkeleton && "choice_skeleton"), dataTestId: dataTestId && "".concat(dataTestId, "Choice"), dataTour: dataTour, ref: controlRef, style: styles, children: [before && jsxRuntime.jsx("div", { className: "choice__before", children: before }), isLoading ? (jsxRuntime.jsx(Loader.Loader, { width: "fill", height: "fill", fill: "surfacePrimary", itemFill: "surfaceItemAccent" })) : (jsxRuntime.jsx(React.Fragment, { children: options.map(function (item) {
|
|
178
203
|
var isActive = typeof active === 'object'
|
|
179
204
|
? String(item.value) === String(active.value)
|
|
180
205
|
: String(item.value) === String(active);
|
|
181
|
-
return (jsxRuntime.jsxs("div", { className: clsx('choice__item', size && "choice__item_size_".concat(size), shapeClass && "
|
|
206
|
+
return (jsxRuntime.jsxs("div", { className: clsx('choice__item', size && "choice__item_size_".concat(size), shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), borderColorClass && "border-color_".concat(borderColorClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), !isDisabled
|
|
182
207
|
? fillItemClass && "fill_".concat(fillItemClass)
|
|
183
208
|
: fillItemDisabledClass &&
|
|
184
209
|
"fill_disabled_".concat(fillItemDisabledClass), !isDisabled &&
|
|
@@ -196,7 +221,7 @@ function Choice(props) {
|
|
|
196
221
|
: fillItemDisabledClass &&
|
|
197
222
|
"fill_disabled_".concat(fillItemDisabledClass), !isActive && isDisabled && 'choice__item_state_disabled', isActive &&
|
|
198
223
|
isDisabled &&
|
|
199
|
-
'choice__item_active_state_disabled', isActive && 'choice__item_active'
|
|
224
|
+
'choice__item_active_state_disabled', isActive && 'choice__item_active'), ref: optionsRefs.get(item.value), children: [jsxRuntime.jsx("input", { id: "".concat(name, "-").concat(item.value), className: "choice__item-radio", type: isCheckbox ? 'checkbox' : 'radio', name: name, disabled: isDisabled, checked: isActive, value: item.value, onChange: function (event) { return onChange(event, item); } }), jsxRuntime.jsxs("label", { className: clsx('choice__item-label', isDisabled && 'choice__item-label_state_disabled'), htmlFor: "".concat(name, "-").concat(item.value), children: [itemBefore, (item.iconBefore || item.iconBeforeActive) && (jsxRuntime.jsx(Icon.Icon, { className: "choice__item-icon", iconFillDisabled: iconBeforeFillDisabled, isDisabled: isDisabled, iconFill: iconBeforeFill, iconFillActive: iconBeforeFillActive, iconSize: iconBeforeSize, SvgImage: isActive
|
|
200
225
|
? item.iconBeforeActive || item.iconBefore
|
|
201
226
|
: item.iconBefore, isActive: isActive })), item.label && (jsxRuntime.jsx(Text.Text, { size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextActiveColor, textWeight: labelTextWeight, textWrap: labelTextWrap, isActive: isActive, children: item.label })), (item.icon || item.iconActive) && (jsxRuntime.jsx(Icon.Icon, { className: "choice__item-icon", iconFillDisabled: iconFillDisabled, iconFill: iconFill, iconFillActive: iconFillActive, iconSize: iconSize, SvgImage: isActive ? item.iconActive || item.icon : item.icon, isActive: isActive })), (item.iconAfter || item.iconAfterActive) && (jsxRuntime.jsx(Icon.Icon, { className: "choice__item-icon", iconFillDisabled: iconAfterFillDisabled, iconFill: iconAfterFill, iconFillActive: iconAfterFillActive, iconSize: iconAfterSize, SvgImage: isActive
|
|
202
227
|
? item.iconAfterActive || item.iconAfter
|
|
@@ -65,6 +65,31 @@ var codeAppearanceRequire = {
|
|
|
65
65
|
},
|
|
66
66
|
};
|
|
67
67
|
|
|
68
|
+
var codeAppearanceShape = {
|
|
69
|
+
circular: {
|
|
70
|
+
shape: 'circular',
|
|
71
|
+
},
|
|
72
|
+
rounded: {
|
|
73
|
+
shape: 'rounded',
|
|
74
|
+
},
|
|
75
|
+
roundedS: {
|
|
76
|
+
shape: 'rounded',
|
|
77
|
+
shapeStrength: '0_5m',
|
|
78
|
+
},
|
|
79
|
+
roundedM: {
|
|
80
|
+
shape: 'rounded',
|
|
81
|
+
shapeStrength: '1m',
|
|
82
|
+
},
|
|
83
|
+
roundedL: {
|
|
84
|
+
shape: 'rounded',
|
|
85
|
+
shapeStrength: '1_5m',
|
|
86
|
+
},
|
|
87
|
+
roundedXL: {
|
|
88
|
+
shape: 'rounded',
|
|
89
|
+
shapeStrength: '2m',
|
|
90
|
+
},
|
|
91
|
+
};
|
|
92
|
+
|
|
68
93
|
var codeAppearanceSize = {
|
|
69
94
|
sizeL: {
|
|
70
95
|
size: 'l',
|
|
@@ -106,7 +131,7 @@ var codeAppearanceSuccess = {
|
|
|
106
131
|
},
|
|
107
132
|
};
|
|
108
133
|
|
|
109
|
-
var codeAppearance = tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign({}, codeAppearanceDisabled), codeAppearanceRequire), codeAppearanceSize), codeAppearanceDefault), codeAppearanceStyle), codeAppearanceError), codeAppearanceSuccess);
|
|
134
|
+
var codeAppearance = tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign({}, codeAppearanceDisabled), codeAppearanceShape), codeAppearanceRequire), codeAppearanceSize), codeAppearanceDefault), codeAppearanceStyle), codeAppearanceError), codeAppearanceSuccess);
|
|
110
135
|
|
|
111
136
|
var codeConfig = {
|
|
112
137
|
appearance: codeAppearance,
|
|
@@ -119,11 +144,11 @@ function Code(props) {
|
|
|
119
144
|
var _c = React.useState(''), otp = _c[0], setOtp = _c[1];
|
|
120
145
|
var appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, codeConfig);
|
|
121
146
|
var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
|
|
122
|
-
var inputBorderColorClass = propsGenerator.inputBorderColorClass, inputBorderColorHoverClass = propsGenerator.inputBorderColorHoverClass, inputBorderFocusColorClass = propsGenerator.inputBorderFocusColorClass, inputBorderWidthClass = propsGenerator.inputBorderWidthClass, inputCaretColorClass = propsGenerator.inputCaretColorClass, inputFillClass = propsGenerator.inputFillClass, inputFillHoverClass = propsGenerator.inputFillHoverClass, inputPlaceholderTextColorClass = propsGenerator.inputPlaceholderTextColorClass,
|
|
147
|
+
var inputBorderColorClass = propsGenerator.inputBorderColorClass, inputBorderColorHoverClass = propsGenerator.inputBorderColorHoverClass, inputBorderFocusColorClass = propsGenerator.inputBorderFocusColorClass, inputBorderWidthClass = propsGenerator.inputBorderWidthClass, inputCaretColorClass = propsGenerator.inputCaretColorClass, inputFillClass = propsGenerator.inputFillClass, inputFillHoverClass = propsGenerator.inputFillHoverClass, inputPlaceholderTextColorClass = propsGenerator.inputPlaceholderTextColorClass, inputSizeClass = propsGenerator.inputSizeClass, inputTextColorClass = propsGenerator.inputTextColorClass, inputTextSizeClass = propsGenerator.inputTextSizeClass, inputTextWeightClass = propsGenerator.inputTextWeightClass, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
|
|
123
148
|
// NOTE: too many dependencies for "useCallback" and possible too many checks
|
|
124
149
|
var renderInput = function (otpInputProps, index) {
|
|
125
150
|
return (jsxRuntime.jsx("input", tslib_es6.__assign({}, otpInputProps, { className: clsx('code__input', inputCaretColorClass && "caret-color_".concat(inputCaretColorClass), inputFillClass && "fill_".concat(inputFillClass), inputFillHoverClass && "fill_hover_".concat(inputFillHoverClass), inputPlaceholderTextColorClass &&
|
|
126
|
-
"placeholder-text-color_".concat(inputPlaceholderTextColorClass),
|
|
151
|
+
"placeholder-text-color_".concat(inputPlaceholderTextColorClass), shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), inputTextSizeClass && "text_size_".concat(inputTextSizeClass), inputTextColorClass && "text-color_".concat(inputTextColorClass), inputTextWeightClass && "text-weight_".concat(inputTextWeightClass), inputBorderWidthClass && "border-width_".concat(inputBorderWidthClass), inputBorderColorClass && "border-color_".concat(inputBorderColorClass), inputBorderColorHoverClass &&
|
|
127
152
|
"border-color_hover_".concat(inputBorderColorHoverClass), inputBorderFocusColorClass &&
|
|
128
153
|
"border-color_focus_".concat(inputBorderFocusColorClass), inputSizeClass && "code__input_size_".concat(inputSizeClass), widthClass && "width_".concat(widthClass), isSkeleton && "code__input_skeleton"), name: "code-".concat(index), autoComplete: "one-time-code", placeholder: inputPlaceholder, onBlur: function (event) {
|
|
129
154
|
onBlur && onBlur(event);
|
|
@@ -5,7 +5,7 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
5
5
|
var React = require('react');
|
|
6
6
|
var clsx = require('clsx');
|
|
7
7
|
var reactDadata = require('react-dadata');
|
|
8
|
-
var Input = require('../../
|
|
8
|
+
var Input = require('../../Input_cjs_DSpBwtPv.js');
|
|
9
9
|
require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
|
|
10
10
|
require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
11
11
|
require('lodash/camelCase');
|
|
@@ -4,10 +4,10 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var clsx = require('clsx');
|
|
6
6
|
var common = require('@itcase/common');
|
|
7
|
-
var DatePicker = require('../../
|
|
7
|
+
var DatePicker = require('../../DatePicker_cjs_DPe3TnXs.js');
|
|
8
8
|
var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
|
|
9
9
|
var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
10
|
-
var ChipsGroup = require('../../
|
|
10
|
+
var ChipsGroup = require('../../ChipsGroup_cjs_BLUYSr4v.js');
|
|
11
11
|
var tslib_es6 = require('../../tslib.es6_cjs_CCZ3TN_7.js');
|
|
12
12
|
require('date-fns/locale');
|
|
13
13
|
require('react-datepicker');
|
|
@@ -30,7 +30,7 @@ require('../context/UrlAssetPrefix.js');
|
|
|
30
30
|
require('../../Link_cjs_BqT6eVl6.js');
|
|
31
31
|
require('../../Text_cjs_B8nNXWBA.js');
|
|
32
32
|
require('../../Loader_cjs_DlnM5Vzb.js');
|
|
33
|
-
require('../../
|
|
33
|
+
require('../../Input_cjs_DSpBwtPv.js');
|
|
34
34
|
require('../../Label_cjs_DSSetg_A.js');
|
|
35
35
|
require('@itcase/icons/default');
|
|
36
36
|
require('lodash/castArray');
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var DatePicker = require('../../
|
|
3
|
+
var DatePicker = require('../../DatePicker_cjs_DPe3TnXs.js');
|
|
4
4
|
require('../../tslib.es6_cjs_CCZ3TN_7.js');
|
|
5
5
|
require('react/jsx-runtime');
|
|
6
6
|
require('react');
|
|
@@ -30,7 +30,7 @@ require('../context/UrlAssetPrefix.js');
|
|
|
30
30
|
require('../../Link_cjs_BqT6eVl6.js');
|
|
31
31
|
require('../../Text_cjs_B8nNXWBA.js');
|
|
32
32
|
require('../../Loader_cjs_DlnM5Vzb.js');
|
|
33
|
-
require('../../
|
|
33
|
+
require('../../Input_cjs_DSpBwtPv.js');
|
|
34
34
|
require('../../Label_cjs_DSSetg_A.js');
|
|
35
35
|
require('@itcase/icons/default');
|
|
36
36
|
|
|
@@ -72,7 +72,7 @@ function Drawer(props) {
|
|
|
72
72
|
var prevIsOpenModalRef = React.useRef(null);
|
|
73
73
|
var appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, drawerConfig);
|
|
74
74
|
var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
|
|
75
|
-
var direction = propsGenerator.direction, size = propsGenerator.size, titleTextColor = propsGenerator.titleTextColor, titleTextSize = propsGenerator.titleTextSize, descTextColor = propsGenerator.descTextColor, descTextSize = propsGenerator.descTextSize, zeroPadding = propsGenerator.zeroPadding, closeIcon = propsGenerator.closeIcon, closeIconFill = propsGenerator.closeIconFill, closeIconFillIcon = propsGenerator.closeIconFillIcon, closeIconFillSize = propsGenerator.closeIconFillSize, closeIconShape = propsGenerator.closeIconShape, closeIconSize = propsGenerator.closeIconSize, closeIconSrc = propsGenerator.closeIconSrc;
|
|
75
|
+
var direction = propsGenerator.direction, size = propsGenerator.size, titleTextColor = propsGenerator.titleTextColor, titleTextSize = propsGenerator.titleTextSize, descTextColor = propsGenerator.descTextColor, descTextSize = propsGenerator.descTextSize, divider = propsGenerator.divider, zeroPadding = propsGenerator.zeroPadding, closeIcon = propsGenerator.closeIcon, closeIconFill = propsGenerator.closeIconFill, closeIconFillIcon = propsGenerator.closeIconFillIcon, closeIconFillSize = propsGenerator.closeIconFillSize, closeIconShape = propsGenerator.closeIconShape, closeIconSize = propsGenerator.closeIconSize, closeIconSrc = propsGenerator.closeIconSrc;
|
|
76
76
|
React.useEffect(function () {
|
|
77
77
|
if (onClose && prevIsOpenModalRef.current === true && !isOpenModal) {
|
|
78
78
|
onClose();
|
|
@@ -81,7 +81,7 @@ function Drawer(props) {
|
|
|
81
81
|
}, [isOpenModal, onClose]);
|
|
82
82
|
return (jsxRuntime.jsxs(ReactDrawer, { className: clsx('drawer', type && "drawer_type_".concat(type), className, dataTour && "dataTour-".concat(dataTour), stickyButton && 'drawer_sticky-button', zeroPadding && 'drawer_reset-padding'), direction: direction || 'right', size: size || 600,
|
|
83
83
|
// Drawer set prefix "EZDrawer" for any id
|
|
84
|
-
customIdSuffix: dataTestId ? "_".concat(dataTestId) : undefined, dataTour: dataTour, enableOverlay: enableOverlay, lockBackgroundScroll: false, overlayClassName: "drawer__overlay", open: isOpenModal, onClose: onClickClose, children: [before && jsxRuntime.jsx("div", { className: "drawer__before", children: before }), !close && (closeIcon || closeIconSrc) && (jsxRuntime.jsx("div", { className: "drawer__close", children: jsxRuntime.jsx(Icon.Icon, { className: "cursor_type_pointer", fill: closeIconFill, fillSize: closeIconFillSize, iconFill: closeIconFillIcon, iconSize: closeIconSize, imageSrc: closeIconSrc, shape: closeIconShape, SvgImage: closeIcon }) })), (title || desc) && (jsxRuntime.jsxs("div", { className: "drawer__header", children: [jsxRuntime.jsx(Icon.Title, { className: "drawer__header-title", size: titleTextSize, textColor: titleTextColor, children: title }), jsxRuntime.jsx(Text.Text, { className: "drawer__header-desc", size: descTextSize, textColor: descTextColor, children: desc })] })), children && jsxRuntime.jsx("div", { className: "drawer__wrapper", children: children }), after && jsxRuntime.jsx("div", { className: "drawer__after", children: after })] }));
|
|
84
|
+
customIdSuffix: dataTestId ? "_".concat(dataTestId) : undefined, dataTour: dataTour, enableOverlay: enableOverlay, lockBackgroundScroll: false, overlayClassName: "drawer__overlay", open: isOpenModal, onClose: onClickClose, children: [before && jsxRuntime.jsx("div", { className: "drawer__before", children: before }), !close && (closeIcon || closeIconSrc) && (jsxRuntime.jsx("div", { className: "drawer__close", children: jsxRuntime.jsx(Icon.Icon, { className: "cursor_type_pointer", fill: closeIconFill, fillSize: closeIconFillSize, iconFill: closeIconFillIcon, iconSize: closeIconSize, imageSrc: closeIconSrc, shape: closeIconShape, SvgImage: closeIcon }) })), (title || desc) && (jsxRuntime.jsxs("div", { className: "drawer__header", children: [jsxRuntime.jsx(Icon.Title, { className: "drawer__header-title", size: titleTextSize, textColor: titleTextColor, children: title }), jsxRuntime.jsx(Text.Text, { className: "drawer__header-desc", size: descTextSize, textColor: descTextColor, children: desc })] })), divider && jsxRuntime.jsx(Divider, { width: "fill", fill: "surfaceTertiary" }), children && jsxRuntime.jsx("div", { className: "drawer__wrapper", children: children }), after && jsxRuntime.jsx("div", { className: "drawer__after", children: after })] }));
|
|
85
85
|
}
|
|
86
86
|
|
|
87
87
|
exports.Drawer = Drawer;
|
|
@@ -69,6 +69,31 @@ var radioAppearanceRequire = {
|
|
|
69
69
|
},
|
|
70
70
|
};
|
|
71
71
|
|
|
72
|
+
var radioAppearanceShape = {
|
|
73
|
+
circular: {
|
|
74
|
+
shape: 'circular',
|
|
75
|
+
},
|
|
76
|
+
rounded: {
|
|
77
|
+
shape: 'rounded',
|
|
78
|
+
},
|
|
79
|
+
roundedS: {
|
|
80
|
+
shape: 'rounded',
|
|
81
|
+
shapeStrength: '0_5m',
|
|
82
|
+
},
|
|
83
|
+
roundedM: {
|
|
84
|
+
shape: 'rounded',
|
|
85
|
+
shapeStrength: '1m',
|
|
86
|
+
},
|
|
87
|
+
roundedL: {
|
|
88
|
+
shape: 'rounded',
|
|
89
|
+
shapeStrength: '1_5m',
|
|
90
|
+
},
|
|
91
|
+
roundedXL: {
|
|
92
|
+
shape: 'rounded',
|
|
93
|
+
shapeStrength: '2m',
|
|
94
|
+
},
|
|
95
|
+
};
|
|
96
|
+
|
|
72
97
|
var radioAppearanceSize = {
|
|
73
98
|
sizeM: {
|
|
74
99
|
size: 'm',
|
|
@@ -113,7 +138,7 @@ var radioAppearanceSuccess = {
|
|
|
113
138
|
},
|
|
114
139
|
};
|
|
115
140
|
|
|
116
|
-
var radioAppearance = tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign({}, radioAppearanceDefault), radioAppearanceError), radioAppearanceSuccess), radioAppearanceRequire), radioAppearanceDisabled), radioAppearanceSize), radioAppearanceStyle);
|
|
141
|
+
var radioAppearance = tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign({}, radioAppearanceDefault), radioAppearanceError), radioAppearanceSuccess), radioAppearanceRequire), radioAppearanceDisabled), radioAppearanceSize), radioAppearanceShape), radioAppearanceStyle);
|
|
117
142
|
|
|
118
143
|
var radioConfig = {
|
|
119
144
|
appearance: radioAppearance,
|
|
@@ -122,23 +147,23 @@ var radioConfig = {
|
|
|
122
147
|
},
|
|
123
148
|
};
|
|
124
149
|
function Radio(props) {
|
|
125
|
-
var id = props.id, className = props.className, appearance = props.appearance, label = props.label, desc = props.desc, isDisabled = props.isDisabled, checked = props.checked, _a = props.tag, Tag = _a === void 0 ? 'label' : _a, isSkeleton = props.isSkeleton, onChange = props.onChange;
|
|
150
|
+
var id = props.id, className = props.className, appearance = props.appearance, label = props.label, desc = props.desc, isDisabled = props.isDisabled, checked = props.checked, _a = props.tag, Tag = _a === void 0 ? 'label' : _a, isActive = props.isActive, isSkeleton = props.isSkeleton, onChange = props.onChange;
|
|
126
151
|
var appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, radioConfig);
|
|
127
152
|
var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
|
|
128
|
-
var fillCheckmarkClass = propsGenerator.fillCheckmarkClass, fillClass = propsGenerator.fillClass, fillRadioActiveClass = propsGenerator.fillRadioActiveClass, fillRadioActiveHoverClass = propsGenerator.fillRadioActiveHoverClass, fillRadioClass = propsGenerator.fillRadioClass, fillRadioHoverClass = propsGenerator.fillRadioHoverClass, labelTextColor = propsGenerator.labelTextColor, labelTextSize = propsGenerator.labelTextSize, labelTextWeight = propsGenerator.labelTextWeight, descTextColor = propsGenerator.descTextColor, descTextSize = propsGenerator.descTextSize, descTextWeight = propsGenerator.descTextWeight, borderColorClass = propsGenerator.borderColorClass, borderColorRadioActiveClass = propsGenerator.borderColorRadioActiveClass, borderColorRadioActiveHoverClass = propsGenerator.borderColorRadioActiveHoverClass, borderColorRadioClass = propsGenerator.borderColorRadioClass, borderColorRadioHoverClass = propsGenerator.borderColorRadioHoverClass,
|
|
129
|
-
return (jsxRuntime.jsxs(Tag, { className: clsx(className, 'radio', fillClass && "fill_".concat(fillClass), borderColorClass && "border-color_".concat(borderColorClass), isSkeleton && 'radio_skeleton', sizeClass && "radio_size_".concat(sizeClass)), htmlFor: id, children: [jsxRuntime.jsxs("div", { className: "radio__item", children: [jsxRuntime.jsx("input", { id: id, className: "radio__input", type: "radio", disabled: isDisabled && 'disabled', checked: checked, onChange: onChange }), jsxRuntime.jsx("div", { className: clsx('radio__state', !checked
|
|
153
|
+
var fillCheckmarkClass = propsGenerator.fillCheckmarkClass, fillClass = propsGenerator.fillClass, fillRadioActiveClass = propsGenerator.fillRadioActiveClass, fillRadioActiveHoverClass = propsGenerator.fillRadioActiveHoverClass, fillRadioClass = propsGenerator.fillRadioClass, fillRadioHoverClass = propsGenerator.fillRadioHoverClass, labelTextColor = propsGenerator.labelTextColor, labelTextSize = propsGenerator.labelTextSize, labelTextWeight = propsGenerator.labelTextWeight, descTextColor = propsGenerator.descTextColor, descTextSize = propsGenerator.descTextSize, descTextWeight = propsGenerator.descTextWeight, borderColorClass = propsGenerator.borderColorClass, borderColorRadioActiveClass = propsGenerator.borderColorRadioActiveClass, borderColorRadioActiveHoverClass = propsGenerator.borderColorRadioActiveHoverClass, borderColorRadioClass = propsGenerator.borderColorRadioClass, borderColorRadioHoverClass = propsGenerator.borderColorRadioHoverClass, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, sizeClass = propsGenerator.sizeClass;
|
|
154
|
+
return (jsxRuntime.jsxs(Tag, { className: clsx(className, 'radio', fillClass && "fill_".concat(fillClass), borderColorClass && "border-color_".concat(borderColorClass), isSkeleton && 'radio_skeleton', sizeClass && "radio_size_".concat(sizeClass)), htmlFor: id, children: [jsxRuntime.jsxs("div", { className: "radio__item", children: [jsxRuntime.jsx("input", { id: id, className: "radio__input", type: "radio", disabled: isDisabled && 'disabled', checked: checked, onChange: onChange }), jsxRuntime.jsx("div", { className: clsx('radio__state', !checked || !isActive
|
|
130
155
|
? fillRadioClass && "fill_".concat(fillRadioClass)
|
|
131
|
-
: fillRadioActiveClass && "fill_active_".concat(fillRadioActiveClass), !checked
|
|
156
|
+
: fillRadioActiveClass && "fill_active_".concat(fillRadioActiveClass), !checked || !isActive
|
|
132
157
|
? fillRadioHoverClass && "fill_hover_".concat(fillRadioHoverClass)
|
|
133
158
|
: fillRadioActiveHoverClass &&
|
|
134
|
-
"fill_active_hover_".concat(fillRadioActiveHoverClass), !checked
|
|
159
|
+
"fill_active_hover_".concat(fillRadioActiveHoverClass), !checked || !isActive
|
|
135
160
|
? borderColorRadioClass && "border-color_".concat(borderColorRadioClass)
|
|
136
161
|
: borderColorRadioActiveClass &&
|
|
137
|
-
"border-color_active_".concat(borderColorRadioActiveClass), !checked
|
|
162
|
+
"border-color_active_".concat(borderColorRadioActiveClass), !checked || !isActive
|
|
138
163
|
? borderColorRadioHoverClass &&
|
|
139
164
|
"border-color_hover_".concat(borderColorRadioHoverClass)
|
|
140
165
|
: borderColorRadioActiveHoverClass &&
|
|
141
|
-
"border-color_active_hover_".concat(borderColorRadioActiveHoverClass), shapeClass && "shape_".concat(shapeClass)), children: "\u00A0" }), jsxRuntime.jsx("div", { className: clsx('radio__state-checkmark', checked && fillCheckmarkClass && "fill_".concat(fillCheckmarkClass)), children: "\u00A0" })] }), label && (jsxRuntime.jsx(Text.Text, { className: "radio__label", size: labelTextSize, textColor: labelTextColor, textWeight: labelTextWeight, children: label })), desc && (jsxRuntime.jsx(Text.Text, { className: "radio__desc", size: descTextSize, textColor: descTextColor, textWeight: descTextWeight, children: desc }))] }));
|
|
166
|
+
"border-color_active_hover_".concat(borderColorRadioActiveHoverClass), shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass)), children: "\u00A0" }), jsxRuntime.jsx("div", { className: clsx('radio__state-checkmark', checked && fillCheckmarkClass && "fill_".concat(fillCheckmarkClass)), children: "\u00A0" })] }), label && (jsxRuntime.jsx(Text.Text, { className: "radio__label", size: labelTextSize, textColor: labelTextColor, textWeight: labelTextWeight, children: label })), desc && (jsxRuntime.jsx(Text.Text, { className: "radio__desc", size: descTextSize, textColor: descTextColor, textWeight: descTextWeight, children: desc }))] }));
|
|
142
167
|
}
|
|
143
168
|
|
|
144
169
|
exports.Radio = Radio;
|
|
@@ -112,6 +112,31 @@ var textareaAppearanceRequire = {
|
|
|
112
112
|
},
|
|
113
113
|
};
|
|
114
114
|
|
|
115
|
+
var textareaAppearanceShape = {
|
|
116
|
+
circular: {
|
|
117
|
+
shape: 'circular',
|
|
118
|
+
},
|
|
119
|
+
rounded: {
|
|
120
|
+
shape: 'rounded',
|
|
121
|
+
},
|
|
122
|
+
roundedS: {
|
|
123
|
+
shape: 'rounded',
|
|
124
|
+
shapeStrength: '0_5m',
|
|
125
|
+
},
|
|
126
|
+
roundedM: {
|
|
127
|
+
shape: 'rounded',
|
|
128
|
+
shapeStrength: '1m',
|
|
129
|
+
},
|
|
130
|
+
roundedL: {
|
|
131
|
+
shape: 'rounded',
|
|
132
|
+
shapeStrength: '1_5m',
|
|
133
|
+
},
|
|
134
|
+
roundedXL: {
|
|
135
|
+
shape: 'rounded',
|
|
136
|
+
shapeStrength: '2m',
|
|
137
|
+
},
|
|
138
|
+
};
|
|
139
|
+
|
|
115
140
|
var textareaAppearanceSize = {
|
|
116
141
|
sizeXXL: {
|
|
117
142
|
size: 'xxl',
|
|
@@ -177,7 +202,7 @@ var textareaAppearanceSuccess = {
|
|
|
177
202
|
},
|
|
178
203
|
};
|
|
179
204
|
|
|
180
|
-
var textareaAppearance = tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign({}, textareaAppearanceDefault), textareaAppearanceError), textareaAppearanceSuccess), textareaAppearanceRequire), textareaAppearanceDisabled), textareaAppearanceSize), textareaAppearanceStyle);
|
|
205
|
+
var textareaAppearance = tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign({}, textareaAppearanceDefault), textareaAppearanceShape), textareaAppearanceError), textareaAppearanceSuccess), textareaAppearanceRequire), textareaAppearanceDisabled), textareaAppearanceSize), textareaAppearanceStyle);
|
|
181
206
|
|
|
182
207
|
var textareaConfig = {
|
|
183
208
|
appearance: textareaAppearance,
|
|
@@ -189,8 +214,8 @@ function Textarea(props) {
|
|
|
189
214
|
var id = props.id, className = props.className, appearance = props.appearance, isDisabled = props.isDisabled, placeholder = props.placeholder, value = props.value, onBlur = props.onBlur, onChange = props.onChange, onKeyDown = props.onKeyDown;
|
|
190
215
|
var appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, textareaConfig);
|
|
191
216
|
var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
|
|
192
|
-
var fillClass = propsGenerator.fillClass, borderColorClass = propsGenerator.borderColorClass, borderHoverClass = propsGenerator.borderHoverClass, borderWidthClass = propsGenerator.borderWidthClass, textColorClass = propsGenerator.textColorClass, textSizeClass = propsGenerator.textSizeClass, textWeightClass = propsGenerator.textWeightClass, caretClass = propsGenerator.caretClass, placeholderTextColorClass = propsGenerator.placeholderTextColorClass, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
|
|
193
|
-
return (jsxRuntime.jsx("div", { className: clsx('textarea', className, sizeClass && "textarea_size_".concat(sizeClass)
|
|
217
|
+
var fillClass = propsGenerator.fillClass, borderColorClass = propsGenerator.borderColorClass, borderHoverClass = propsGenerator.borderHoverClass, borderWidthClass = propsGenerator.borderWidthClass, textColorClass = propsGenerator.textColorClass, textSizeClass = propsGenerator.textSizeClass, textWeightClass = propsGenerator.textWeightClass, caretClass = propsGenerator.caretClass, placeholderTextColorClass = propsGenerator.placeholderTextColorClass, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
|
|
218
|
+
return (jsxRuntime.jsx("div", { className: clsx('textarea', className, sizeClass && "textarea_size_".concat(sizeClass)), children: jsxRuntime.jsx("textarea", { id: id, className: clsx('textarea__input', (textSizeClass || textColorClass || textWeightClass) && 'text', caretClass && "caret-color_".concat(caretClass), fillClass && "fill_".concat(fillClass), borderColorClass && "border-color_".concat(borderColorClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderHoverClass && "border-color_hover_".concat(borderHoverClass), shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), placeholderTextColorClass &&
|
|
194
219
|
"placeholder-text-color_".concat(placeholderTextColorClass), textSizeClass && "text_size_".concat(textSizeClass), textColorClass && "text-color_".concat(textColorClass), textWeightClass && "text-weight_".concat(textWeightClass), widthClass && "width_".concat(widthClass)), disabled: isDisabled && 'disabled', placeholder: placeholder, value: value, onBlur: onBlur, onChange: onChange, onKeyDown: onKeyDown }) }));
|
|
195
220
|
}
|
|
196
221
|
|
package/dist/components/Chips.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { C as Chips, b as ChipsGroup, a as chipsAppearance, c as chipsConfig } from '../
|
|
1
|
+
export { C as Chips, b as ChipsGroup, a as chipsAppearance, c as chipsConfig } from '../ChipsGroup_es_DSwPxBuZ.js';
|
|
2
2
|
import 'react/jsx-runtime';
|
|
3
3
|
import 'clsx';
|
|
4
4
|
import '../hooks/useAppearanceConfig/useAppearanceConfig.js';
|
|
@@ -96,6 +96,31 @@ var choiceAppearanceRequire = {
|
|
|
96
96
|
},
|
|
97
97
|
};
|
|
98
98
|
|
|
99
|
+
var choiceAppearanceShape = {
|
|
100
|
+
circular: {
|
|
101
|
+
shape: 'circular',
|
|
102
|
+
},
|
|
103
|
+
rounded: {
|
|
104
|
+
shape: 'rounded',
|
|
105
|
+
},
|
|
106
|
+
roundedS: {
|
|
107
|
+
shape: 'rounded',
|
|
108
|
+
shapeStrength: '0_5m',
|
|
109
|
+
},
|
|
110
|
+
roundedM: {
|
|
111
|
+
shape: 'rounded',
|
|
112
|
+
shapeStrength: '1m',
|
|
113
|
+
},
|
|
114
|
+
roundedL: {
|
|
115
|
+
shape: 'rounded',
|
|
116
|
+
shapeStrength: '1_5m',
|
|
117
|
+
},
|
|
118
|
+
roundedXL: {
|
|
119
|
+
shape: 'rounded',
|
|
120
|
+
shapeStrength: '2m',
|
|
121
|
+
},
|
|
122
|
+
};
|
|
123
|
+
|
|
99
124
|
var choiceAppearanceSize = {
|
|
100
125
|
sizeL: {
|
|
101
126
|
size: 'l',
|
|
@@ -150,7 +175,7 @@ var choiceAppearanceSuccess = {
|
|
|
150
175
|
},
|
|
151
176
|
};
|
|
152
177
|
|
|
153
|
-
var choiceAppearance = __assign(__assign(__assign(__assign(__assign(__assign(__assign({}, choiceAppearanceError), choiceAppearanceDisabled), choiceAppearanceDefault), choiceAppearanceSuccess), choiceAppearanceRequire), choiceAppearanceStyle), choiceAppearanceSize);
|
|
178
|
+
var choiceAppearance = __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, choiceAppearanceError), choiceAppearanceDisabled), choiceAppearanceDefault), choiceAppearanceSuccess), choiceAppearanceRequire), choiceAppearanceStyle), choiceAppearanceShape), choiceAppearanceSize);
|
|
154
179
|
|
|
155
180
|
var choiceConfig = {
|
|
156
181
|
appearance: choiceAppearance,
|
|
@@ -170,13 +195,13 @@ function Choice(props) {
|
|
|
170
195
|
}, [isCheckbox, setActiveSegment]);
|
|
171
196
|
var appearanceConfig = useAppearanceConfig(appearance, choiceConfig);
|
|
172
197
|
var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
173
|
-
var size = propsGenerator.size, fillClass = propsGenerator.fillClass, fillItemActiveClass = propsGenerator.fillItemActiveClass, fillItemActiveDisabledClass = propsGenerator.fillItemActiveDisabledClass, fillItemActiveHoverClass = propsGenerator.fillItemActiveHoverClass, fillItemClass = propsGenerator.fillItemClass, fillItemDisabledClass = propsGenerator.fillItemDisabledClass, fillItemHoverClass = propsGenerator.fillItemHoverClass, labelTextActiveColor = propsGenerator.labelTextActiveColor, labelTextColor = propsGenerator.labelTextColor, labelTextSize = propsGenerator.labelTextSize, labelTextWeight = propsGenerator.labelTextWeight, labelTextWrap = propsGenerator.labelTextWrap, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, iconAfterFillDisabled = propsGenerator.iconAfterFillDisabled, iconBeforeFillDisabled = propsGenerator.iconBeforeFillDisabled, iconFillDisabled = propsGenerator.iconFillDisabled, iconAfterFill = propsGenerator.iconAfterFill, iconAfterFillActive = propsGenerator.iconAfterFillActive, iconAfterSize = propsGenerator.iconAfterSize, iconBeforeFill = propsGenerator.iconBeforeFill, iconBeforeFillActive = propsGenerator.iconBeforeFillActive, iconBeforeSize = propsGenerator.iconBeforeSize, iconFill = propsGenerator.iconFill, iconFillActive = propsGenerator.iconFillActive, iconSize = propsGenerator.iconSize, shapeClass = propsGenerator.shapeClass,
|
|
198
|
+
var size = propsGenerator.size, fillClass = propsGenerator.fillClass, fillItemActiveClass = propsGenerator.fillItemActiveClass, fillItemActiveDisabledClass = propsGenerator.fillItemActiveDisabledClass, fillItemActiveHoverClass = propsGenerator.fillItemActiveHoverClass, fillItemClass = propsGenerator.fillItemClass, fillItemDisabledClass = propsGenerator.fillItemDisabledClass, fillItemHoverClass = propsGenerator.fillItemHoverClass, labelTextActiveColor = propsGenerator.labelTextActiveColor, labelTextColor = propsGenerator.labelTextColor, labelTextSize = propsGenerator.labelTextSize, labelTextWeight = propsGenerator.labelTextWeight, labelTextWrap = propsGenerator.labelTextWrap, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, iconAfterFillDisabled = propsGenerator.iconAfterFillDisabled, iconBeforeFillDisabled = propsGenerator.iconBeforeFillDisabled, iconFillDisabled = propsGenerator.iconFillDisabled, iconAfterFill = propsGenerator.iconAfterFill, iconAfterFillActive = propsGenerator.iconAfterFillActive, iconAfterSize = propsGenerator.iconAfterSize, iconBeforeFill = propsGenerator.iconBeforeFill, iconBeforeFillActive = propsGenerator.iconBeforeFillActive, iconBeforeSize = propsGenerator.iconBeforeSize, iconFill = propsGenerator.iconFill, iconFillActive = propsGenerator.iconFillActive, iconSize = propsGenerator.iconSize, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, wrapClass = propsGenerator.wrapClass;
|
|
174
199
|
var styles = useStyles(props).styles;
|
|
175
|
-
return (jsxs("div", { id: id, className: clsx(className, 'choice', size && "choice_size_".concat(size), fillClass && "fill_".concat(fillClass), wrapClass && "choice_wrap_".concat(wrapClass), isSkeleton && "choice_skeleton"), dataTestId: dataTestId && "".concat(dataTestId, "Choice"), dataTour: dataTour, ref: controlRef, style: styles, children: [before && jsx("div", { className: "choice__before", children: before }), isLoading ? (jsx(Loader, { width: "fill", height: "fill", fill: "surfacePrimary", itemFill: "surfaceItemAccent" })) : (jsx(React.Fragment, { children: options.map(function (item) {
|
|
200
|
+
return (jsxs("div", { id: id, className: clsx(className, 'choice', size && "choice_size_".concat(size), fillClass && "fill_".concat(fillClass), wrapClass && "choice_wrap_".concat(wrapClass), shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), isSkeleton && "choice_skeleton"), dataTestId: dataTestId && "".concat(dataTestId, "Choice"), dataTour: dataTour, ref: controlRef, style: styles, children: [before && jsx("div", { className: "choice__before", children: before }), isLoading ? (jsx(Loader, { width: "fill", height: "fill", fill: "surfacePrimary", itemFill: "surfaceItemAccent" })) : (jsx(React.Fragment, { children: options.map(function (item) {
|
|
176
201
|
var isActive = typeof active === 'object'
|
|
177
202
|
? String(item.value) === String(active.value)
|
|
178
203
|
: String(item.value) === String(active);
|
|
179
|
-
return (jsxs("div", { className: clsx('choice__item', size && "choice__item_size_".concat(size), shapeClass && "
|
|
204
|
+
return (jsxs("div", { className: clsx('choice__item', size && "choice__item_size_".concat(size), shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), borderColorClass && "border-color_".concat(borderColorClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), !isDisabled
|
|
180
205
|
? fillItemClass && "fill_".concat(fillItemClass)
|
|
181
206
|
: fillItemDisabledClass &&
|
|
182
207
|
"fill_disabled_".concat(fillItemDisabledClass), !isDisabled &&
|
|
@@ -194,7 +219,7 @@ function Choice(props) {
|
|
|
194
219
|
: fillItemDisabledClass &&
|
|
195
220
|
"fill_disabled_".concat(fillItemDisabledClass), !isActive && isDisabled && 'choice__item_state_disabled', isActive &&
|
|
196
221
|
isDisabled &&
|
|
197
|
-
'choice__item_active_state_disabled', isActive && 'choice__item_active'
|
|
222
|
+
'choice__item_active_state_disabled', isActive && 'choice__item_active'), ref: optionsRefs.get(item.value), children: [jsx("input", { id: "".concat(name, "-").concat(item.value), className: "choice__item-radio", type: isCheckbox ? 'checkbox' : 'radio', name: name, disabled: isDisabled, checked: isActive, value: item.value, onChange: function (event) { return onChange(event, item); } }), jsxs("label", { className: clsx('choice__item-label', isDisabled && 'choice__item-label_state_disabled'), htmlFor: "".concat(name, "-").concat(item.value), children: [itemBefore, (item.iconBefore || item.iconBeforeActive) && (jsx(Icon, { className: "choice__item-icon", iconFillDisabled: iconBeforeFillDisabled, isDisabled: isDisabled, iconFill: iconBeforeFill, iconFillActive: iconBeforeFillActive, iconSize: iconBeforeSize, SvgImage: isActive
|
|
198
223
|
? item.iconBeforeActive || item.iconBefore
|
|
199
224
|
: item.iconBefore, isActive: isActive })), item.label && (jsx(Text, { size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextActiveColor, textWeight: labelTextWeight, textWrap: labelTextWrap, isActive: isActive, children: item.label })), (item.icon || item.iconActive) && (jsx(Icon, { className: "choice__item-icon", iconFillDisabled: iconFillDisabled, iconFill: iconFill, iconFillActive: iconFillActive, iconSize: iconSize, SvgImage: isActive ? item.iconActive || item.icon : item.icon, isActive: isActive })), (item.iconAfter || item.iconAfterActive) && (jsx(Icon, { className: "choice__item-icon", iconFillDisabled: iconAfterFillDisabled, iconFill: iconAfterFill, iconFillActive: iconAfterFillActive, iconSize: iconAfterSize, SvgImage: isActive
|
|
200
225
|
? item.iconAfterActive || item.iconAfter
|