@itcase/ui 1.8.109 → 1.8.110
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_Bm8nwWKa.js → DatePicker_cjs_C9rI2uTl.js} +1 -1
- package/dist/{DatePicker_es_DAV92A4A.js → DatePicker_es_Bi6lgbTb.js} +1 -1
- package/dist/{Input_cjs_CFy0tfAO.js → Input_cjs_TC7DOpvh.js} +13 -13
- package/dist/{Input_es_l3ry6luZ.js → Input_es_RtN2gtZq.js} +13 -13
- package/dist/cjs/components/Choice.js +4 -4
- package/dist/cjs/components/Dadata.js +1 -1
- package/dist/cjs/components/DatePeriod.js +2 -2
- package/dist/cjs/components/DatePicker.js +2 -2
- package/dist/cjs/components/Input.js +1 -1
- package/dist/cjs/hoc/urlWithAssetPrefix.js +17 -0
- package/dist/cjs/hooks/useStyles/useStyles.js +0 -1
- package/dist/components/Choice.js +4 -4
- package/dist/components/Dadata.js +1 -1
- package/dist/components/DatePeriod.js +2 -2
- package/dist/components/DatePicker.js +2 -2
- package/dist/components/Input.js +1 -1
- package/dist/css/components/Choice/Choice.css +22 -22
- package/dist/css/components/Choice/css/__item/choice__item_size.css +3 -3
- package/dist/css/components/Input/Input.css +12 -13
- package/dist/css/components/Select/Select.css +8 -5
- package/dist/css/styles/bundle.css +2 -1
- package/dist/css/styles/text-weight/text-weight.css +2 -1
- package/dist/hoc/urlWithAssetPrefix.js +17 -0
- package/dist/hooks/useStyles/useStyles.js +0 -1
- package/dist/types/components/Image/Image.d.ts +1 -2
- package/dist/types/components/Input/appearance/inputDefault.d.ts +2 -2
- package/dist/types/components/Input/appearance/inputShape.d.ts +4 -4
- package/dist/types/components/Logo/Logo.d.ts +2 -2
- package/dist/types/components/Response/Response.d.ts +2 -2
- package/dist/types/components/SVGContent/SVGContent.d.ts +1 -2
- package/dist/types/hoc/urlWithAssetPrefix.d.ts +27 -8
- package/dist/types/types/utils.d.ts +34 -0
- package/package.json +3 -3
|
@@ -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_mau_55Fl.js');
|
|
13
13
|
var Icon = require('./Icon_cjs_ZerVip3X.js');
|
|
14
|
-
var Input = require('./
|
|
14
|
+
var Input = require('./Input_cjs_TC7DOpvh.js');
|
|
15
15
|
var Label = require('./Label_cjs_CaTh_laL.js');
|
|
16
16
|
var Text = require('./Text_cjs_DpRclhwc.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_D_IlkeBp.js';
|
|
11
11
|
import { I as Icon } from './Icon_es_C76te22j.js';
|
|
12
|
-
import { I as Input } from './
|
|
12
|
+
import { I as Input } from './Input_es_RtN2gtZq.js';
|
|
13
13
|
import { L as Label } from './Label_es_CoIII7Ty.js';
|
|
14
14
|
import { T as Text } from './Text_es_CtCwsa3V.js';
|
|
15
15
|
import { icons14 } from '@itcase/icons/default';
|
|
@@ -10,10 +10,10 @@ var tslib_es6 = require('./tslib.es6_cjs_CCZ3TN_7.js');
|
|
|
10
10
|
var inputAppearanceDefault = {
|
|
11
11
|
defaultPrimary: {
|
|
12
12
|
fill: 'surfaceSecondary',
|
|
13
|
+
textColorDisabled: 'surfaceTextDisabled',
|
|
13
14
|
borderColor: 'surfaceBorderTertiary',
|
|
14
15
|
borderColorHover: 'surfaceBorderQuaternary',
|
|
15
16
|
textColor: 'surfaceTextPrimary',
|
|
16
|
-
textColorDisabled: 'surfaceTextDisabled',
|
|
17
17
|
caret: 'accentItemSecondary',
|
|
18
18
|
iconBeforeFill: 'surfaceItemQuaternary',
|
|
19
19
|
iconClearFill: 'surfaceItemPrimary',
|
|
@@ -21,10 +21,10 @@ var inputAppearanceDefault = {
|
|
|
21
21
|
},
|
|
22
22
|
defaultSecondary: {
|
|
23
23
|
fill: 'surfacePrimary',
|
|
24
|
+
textColorDisabled: 'surfaceTextDisabled',
|
|
24
25
|
borderColor: 'surfaceBorderTertiary',
|
|
25
26
|
borderColorHover: 'surfaceBorderQuaternary',
|
|
26
27
|
textColor: 'surfaceTextPrimary',
|
|
27
|
-
textColorDisabled: 'surfaceTextDisabled',
|
|
28
28
|
caret: 'accentItemSecondary',
|
|
29
29
|
iconBeforeFill: 'surfaceItemQuaternary',
|
|
30
30
|
iconClearFill: 'surfaceItemPrimary',
|
|
@@ -103,21 +103,21 @@ var inputAppearanceShape = {
|
|
|
103
103
|
rounded: {
|
|
104
104
|
shape: 'rounded',
|
|
105
105
|
},
|
|
106
|
-
|
|
107
|
-
shape: 'rounded',
|
|
108
|
-
shapeStrength: '0_5m',
|
|
109
|
-
},
|
|
110
|
-
roundedM: {
|
|
106
|
+
roundedXL: {
|
|
111
107
|
shape: 'rounded',
|
|
112
|
-
shapeStrength: '
|
|
108
|
+
shapeStrength: '2m',
|
|
113
109
|
},
|
|
114
110
|
roundedL: {
|
|
115
111
|
shape: 'rounded',
|
|
116
112
|
shapeStrength: '1_5m',
|
|
117
113
|
},
|
|
118
|
-
|
|
114
|
+
roundedM: {
|
|
119
115
|
shape: 'rounded',
|
|
120
|
-
shapeStrength: '
|
|
116
|
+
shapeStrength: '1m',
|
|
117
|
+
},
|
|
118
|
+
roundedS: {
|
|
119
|
+
shape: 'rounded',
|
|
120
|
+
shapeStrength: '0_5m',
|
|
121
121
|
},
|
|
122
122
|
};
|
|
123
123
|
|
|
@@ -201,11 +201,11 @@ var inputConfig = {
|
|
|
201
201
|
},
|
|
202
202
|
};
|
|
203
203
|
var Input = React.forwardRef(function Input(props, ref) {
|
|
204
|
-
var id = props.id, className = props.className, _a = props.type, type = _a === void 0 ? 'text' : _a, name = props.name, appearance = props.appearance, isDisabled = props.isDisabled, autocomplete = props.autocomplete,
|
|
204
|
+
var id = props.id, dataTestId = props.dataTestId, className = props.className, _a = props.type, type = _a === void 0 ? 'text' : _a, name = props.name, appearance = props.appearance, isDisabled = props.isDisabled, autocomplete = props.autocomplete, index = props.index, placeholder = props.placeholder, value = props.value, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus, onKeyDown = props.onKeyDown;
|
|
205
205
|
var appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, inputConfig);
|
|
206
206
|
// const stateConfig = state && inputConfig.state && inputConfig.state[state]
|
|
207
207
|
var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
|
|
208
|
-
var fillClass = propsGenerator.fillClass, fillDisabledClass = propsGenerator.fillDisabledClass, fillHoverClass = propsGenerator.fillHoverClass,
|
|
208
|
+
var fillClass = propsGenerator.fillClass, fillDisabledClass = propsGenerator.fillDisabledClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorDisabledClass = propsGenerator.borderColorDisabledClass, borderWidthDisabledClass = propsGenerator.borderWidthDisabledClass, placeholderTextColorDisabledClass = propsGenerator.placeholderTextColorDisabledClass, textColorDisabledClass = propsGenerator.textColorDisabledClass, borderColorClass = propsGenerator.borderColorClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, 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;
|
|
209
209
|
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
|
|
210
210
|
? fillClass && "fill_".concat(fillClass)
|
|
211
211
|
: fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), !isDisabled
|
|
@@ -222,7 +222,7 @@ var Input = React.forwardRef(function Input(props, ref) {
|
|
|
222
222
|
: placeholderTextColorDisabledClass &&
|
|
223
223
|
"placeholder-text-color_disabled_".concat(placeholderTextColorDisabledClass), !isDisabled
|
|
224
224
|
? textColorClass && "text-color_".concat(textColorClass)
|
|
225
|
-
: textColorDisabledClass && "text-color_".concat(textColorDisabledClass)), type: type, disabled: isDisabled, autocomplete: autocomplete, "data-test-id": dataTestId || (name ? "".concat(name, "Input") : 'input'), index: index, placeholder: placeholder,
|
|
225
|
+
: textColorDisabledClass && "text-color_".concat(textColorDisabledClass)), type: type, ref: ref, disabled: isDisabled, autocomplete: autocomplete, "data-test-id": dataTestId || (name ? "".concat(name, "Input") : 'input'), index: index, placeholder: placeholder, value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown }));
|
|
226
226
|
});
|
|
227
227
|
|
|
228
228
|
exports.Input = Input;
|
|
@@ -8,10 +8,10 @@ import { _ as __assign } from './tslib.es6_es_Bwu1Cn-t.js';
|
|
|
8
8
|
var inputAppearanceDefault = {
|
|
9
9
|
defaultPrimary: {
|
|
10
10
|
fill: 'surfaceSecondary',
|
|
11
|
+
textColorDisabled: 'surfaceTextDisabled',
|
|
11
12
|
borderColor: 'surfaceBorderTertiary',
|
|
12
13
|
borderColorHover: 'surfaceBorderQuaternary',
|
|
13
14
|
textColor: 'surfaceTextPrimary',
|
|
14
|
-
textColorDisabled: 'surfaceTextDisabled',
|
|
15
15
|
caret: 'accentItemSecondary',
|
|
16
16
|
iconBeforeFill: 'surfaceItemQuaternary',
|
|
17
17
|
iconClearFill: 'surfaceItemPrimary',
|
|
@@ -19,10 +19,10 @@ var inputAppearanceDefault = {
|
|
|
19
19
|
},
|
|
20
20
|
defaultSecondary: {
|
|
21
21
|
fill: 'surfacePrimary',
|
|
22
|
+
textColorDisabled: 'surfaceTextDisabled',
|
|
22
23
|
borderColor: 'surfaceBorderTertiary',
|
|
23
24
|
borderColorHover: 'surfaceBorderQuaternary',
|
|
24
25
|
textColor: 'surfaceTextPrimary',
|
|
25
|
-
textColorDisabled: 'surfaceTextDisabled',
|
|
26
26
|
caret: 'accentItemSecondary',
|
|
27
27
|
iconBeforeFill: 'surfaceItemQuaternary',
|
|
28
28
|
iconClearFill: 'surfaceItemPrimary',
|
|
@@ -101,21 +101,21 @@ var inputAppearanceShape = {
|
|
|
101
101
|
rounded: {
|
|
102
102
|
shape: 'rounded',
|
|
103
103
|
},
|
|
104
|
-
|
|
105
|
-
shape: 'rounded',
|
|
106
|
-
shapeStrength: '0_5m',
|
|
107
|
-
},
|
|
108
|
-
roundedM: {
|
|
104
|
+
roundedXL: {
|
|
109
105
|
shape: 'rounded',
|
|
110
|
-
shapeStrength: '
|
|
106
|
+
shapeStrength: '2m',
|
|
111
107
|
},
|
|
112
108
|
roundedL: {
|
|
113
109
|
shape: 'rounded',
|
|
114
110
|
shapeStrength: '1_5m',
|
|
115
111
|
},
|
|
116
|
-
|
|
112
|
+
roundedM: {
|
|
117
113
|
shape: 'rounded',
|
|
118
|
-
shapeStrength: '
|
|
114
|
+
shapeStrength: '1m',
|
|
115
|
+
},
|
|
116
|
+
roundedS: {
|
|
117
|
+
shape: 'rounded',
|
|
118
|
+
shapeStrength: '0_5m',
|
|
119
119
|
},
|
|
120
120
|
};
|
|
121
121
|
|
|
@@ -199,11 +199,11 @@ var inputConfig = {
|
|
|
199
199
|
},
|
|
200
200
|
};
|
|
201
201
|
var Input = React.forwardRef(function Input(props, ref) {
|
|
202
|
-
var id = props.id, className = props.className, _a = props.type, type = _a === void 0 ? 'text' : _a, name = props.name, appearance = props.appearance, isDisabled = props.isDisabled, autocomplete = props.autocomplete,
|
|
202
|
+
var id = props.id, dataTestId = props.dataTestId, className = props.className, _a = props.type, type = _a === void 0 ? 'text' : _a, name = props.name, appearance = props.appearance, isDisabled = props.isDisabled, autocomplete = props.autocomplete, index = props.index, placeholder = props.placeholder, value = props.value, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus, onKeyDown = props.onKeyDown;
|
|
203
203
|
var appearanceConfig = useAppearanceConfig(appearance, inputConfig);
|
|
204
204
|
// const stateConfig = state && inputConfig.state && inputConfig.state[state]
|
|
205
205
|
var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
206
|
-
var fillClass = propsGenerator.fillClass, fillDisabledClass = propsGenerator.fillDisabledClass, fillHoverClass = propsGenerator.fillHoverClass,
|
|
206
|
+
var fillClass = propsGenerator.fillClass, fillDisabledClass = propsGenerator.fillDisabledClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorDisabledClass = propsGenerator.borderColorDisabledClass, borderWidthDisabledClass = propsGenerator.borderWidthDisabledClass, placeholderTextColorDisabledClass = propsGenerator.placeholderTextColorDisabledClass, textColorDisabledClass = propsGenerator.textColorDisabledClass, borderColorClass = propsGenerator.borderColorClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, 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;
|
|
207
207
|
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
|
|
208
208
|
? fillClass && "fill_".concat(fillClass)
|
|
209
209
|
: fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), !isDisabled
|
|
@@ -220,7 +220,7 @@ var Input = React.forwardRef(function Input(props, ref) {
|
|
|
220
220
|
: placeholderTextColorDisabledClass &&
|
|
221
221
|
"placeholder-text-color_disabled_".concat(placeholderTextColorDisabledClass), !isDisabled
|
|
222
222
|
? textColorClass && "text-color_".concat(textColorClass)
|
|
223
|
-
: textColorDisabledClass && "text-color_".concat(textColorDisabledClass)), type: type, disabled: isDisabled, autocomplete: autocomplete, "data-test-id": dataTestId || (name ? "".concat(name, "Input") : 'input'), index: index, placeholder: placeholder,
|
|
223
|
+
: textColorDisabledClass && "text-color_".concat(textColorDisabledClass)), type: type, ref: ref, disabled: isDisabled, autocomplete: autocomplete, "data-test-id": dataTestId || (name ? "".concat(name, "Input") : 'input'), index: index, placeholder: placeholder, value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown }));
|
|
224
224
|
});
|
|
225
225
|
|
|
226
226
|
export { Input as I, inputAppearance as a, inputConfig as i };
|
|
@@ -187,7 +187,7 @@ var choiceConfig = {
|
|
|
187
187
|
},
|
|
188
188
|
};
|
|
189
189
|
function Choice(props) {
|
|
190
|
-
var id = props.id, className = props.className, name = props.name, appearance = props.appearance, _a = props.isDisabled, isDisabled = _a === void 0 ? false : _a, _b = props.active, active = _b === void 0 ? { value: undefined } : _b,
|
|
190
|
+
var id = props.id, dataTestId = props.dataTestId, dataTour = props.dataTour, className = props.className, name = props.name, appearance = props.appearance, _a = props.isDisabled, isDisabled = _a === void 0 ? false : _a, _b = props.active, active = _b === void 0 ? { value: undefined } : _b, itemAfter = props.itemAfter, itemBefore = props.itemBefore, _c = props.options, options = _c === void 0 ? [] : _c, setActiveSegment = props.setActiveSegment, before = props.before, after = props.after, _d = props.isCheckbox, isCheckbox = _d === void 0 ? false : _d, _e = props.isLoading, isLoading = _e === void 0 ? false : _e, isSkeleton = props.isSkeleton;
|
|
191
191
|
var controlRef = React.useRef(null);
|
|
192
192
|
var optionsRefs = React.useMemo(function () {
|
|
193
193
|
return new Map(options.map(function (item) { return [item.value, React.createRef()]; }));
|
|
@@ -198,9 +198,9 @@ function Choice(props) {
|
|
|
198
198
|
}, [isCheckbox, setActiveSegment]);
|
|
199
199
|
var appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, choiceConfig);
|
|
200
200
|
var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
|
|
201
|
-
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,
|
|
201
|
+
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, iconAfterFillDisabled = propsGenerator.iconAfterFillDisabled, iconBeforeFillDisabled = propsGenerator.iconBeforeFillDisabled, iconFillDisabled = propsGenerator.iconFillDisabled, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, 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;
|
|
202
202
|
var styles = useStyles.useStyles(props).styles;
|
|
203
|
-
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"),
|
|
203
|
+
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"), ref: controlRef, "data-test-id": dataTestId && "".concat(dataTestId, "Choice"), "data-tour": dataTour, 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) {
|
|
204
204
|
var isActive = typeof active === 'object'
|
|
205
205
|
? String(item.value) === String(active.value)
|
|
206
206
|
: String(item.value) === String(active);
|
|
@@ -220,7 +220,7 @@ function Choice(props) {
|
|
|
220
220
|
: !isDisabled
|
|
221
221
|
? fillItemClass && "fill_".concat(fillItemClass)
|
|
222
222
|
: fillItemDisabledClass &&
|
|
223
|
-
"fill_disabled_".concat(fillItemDisabledClass), !isActive && isDisabled && 'choice__item_state_disabled', isActive &&
|
|
223
|
+
"fill_disabled_".concat(fillItemDisabledClass), !isActive && isDisabled && 'choice__item_state_disabled', (item.icon || item.iconActive) && 'asdasdasdasd', isActive &&
|
|
224
224
|
isDisabled &&
|
|
225
225
|
'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
|
|
226
226
|
? item.iconBeforeActive || item.iconBefore
|
|
@@ -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_TC7DOpvh.js');
|
|
9
9
|
require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
|
|
10
10
|
require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
11
11
|
require('lodash/camelCase');
|
|
@@ -4,7 +4,7 @@ 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_C9rI2uTl.js');
|
|
8
8
|
var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
|
|
9
9
|
var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
10
10
|
var ChipsGroup = require('../../ChipsGroup_cjs_D454M1-p.js');
|
|
@@ -31,7 +31,7 @@ require('../context/UrlAssetPrefix.js');
|
|
|
31
31
|
require('../../Link_cjs_BqT6eVl6.js');
|
|
32
32
|
require('../../Text_cjs_DpRclhwc.js');
|
|
33
33
|
require('../../Loader_cjs_c6yF7akz.js');
|
|
34
|
-
require('../../
|
|
34
|
+
require('../../Input_cjs_TC7DOpvh.js');
|
|
35
35
|
require('../../Label_cjs_CaTh_laL.js');
|
|
36
36
|
require('@itcase/icons/default');
|
|
37
37
|
require('lodash/castArray');
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var DatePicker = require('../../
|
|
3
|
+
var DatePicker = require('../../DatePicker_cjs_C9rI2uTl.js');
|
|
4
4
|
require('../../tslib.es6_cjs_CCZ3TN_7.js');
|
|
5
5
|
require('react/jsx-runtime');
|
|
6
6
|
require('react');
|
|
@@ -31,7 +31,7 @@ require('../context/UrlAssetPrefix.js');
|
|
|
31
31
|
require('../../Link_cjs_BqT6eVl6.js');
|
|
32
32
|
require('../../Text_cjs_DpRclhwc.js');
|
|
33
33
|
require('../../Loader_cjs_c6yF7akz.js');
|
|
34
|
-
require('../../
|
|
34
|
+
require('../../Input_cjs_TC7DOpvh.js');
|
|
35
35
|
require('../../Label_cjs_CaTh_laL.js');
|
|
36
36
|
require('@itcase/icons/default');
|
|
37
37
|
|
|
@@ -7,6 +7,23 @@ var common = require('@itcase/common');
|
|
|
7
7
|
var UrlAssetPrefix = require('../context/UrlAssetPrefix.js');
|
|
8
8
|
|
|
9
9
|
var urlPropsList = ['src', 'imageSrc', 'svgSrc', 'placeholderUrl'];
|
|
10
|
+
/**
|
|
11
|
+
* HOC, который добавляет assetPrefix к URL-пропсам.
|
|
12
|
+
*
|
|
13
|
+
* @template P - Тип пропсов оборачиваемого компонента.
|
|
14
|
+
* @template T - Тип ref (если используется forwardRef).
|
|
15
|
+
* @template Check - Проверка на наличие хотя бы одного URL-пропа.
|
|
16
|
+
*
|
|
17
|
+
* @param WrappedComponent - Компонент, который оборачиваем.
|
|
18
|
+
* @param _error - Проверка: если ни одного URL-пропа нет, будет ошибка компиляции.
|
|
19
|
+
*
|
|
20
|
+
* @example
|
|
21
|
+
* const A = (props: { src?: string }) => <div />;
|
|
22
|
+
* urlWithAssetPrefix(A); // ✅ OK
|
|
23
|
+
*
|
|
24
|
+
* const B = (props: { id: string }) => <div />;
|
|
25
|
+
* urlWithAssetPrefix(B); // ❌ TS ошибка (нет url-пропов)
|
|
26
|
+
*/
|
|
10
27
|
var urlWithAssetPrefix = function (WrappedComponent) {
|
|
11
28
|
var HOC = React.forwardRef(function HOC(props, ref) {
|
|
12
29
|
var _a = React.useContext(UrlAssetPrefix.UrlAssetPrefixContext), assetPrefix = _a.assetPrefix, ignorePathsList = _a.ignorePathsList;
|
|
@@ -140,7 +140,6 @@ function useStyles(props) {
|
|
|
140
140
|
return resultStylesGroups;
|
|
141
141
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
142
142
|
}, [deviceCurrentMainType, deviceCurrentType, ...Object.values(propsStyleAttributes)]);
|
|
143
|
-
console.error('collectedStyles', collectedStyles);
|
|
144
143
|
return collectedStyles;
|
|
145
144
|
}
|
|
146
145
|
const removeDeviceType = (originalKey, deviceTypesList) => {
|
|
@@ -185,7 +185,7 @@ var choiceConfig = {
|
|
|
185
185
|
},
|
|
186
186
|
};
|
|
187
187
|
function Choice(props) {
|
|
188
|
-
var id = props.id, className = props.className, name = props.name, appearance = props.appearance, _a = props.isDisabled, isDisabled = _a === void 0 ? false : _a, _b = props.active, active = _b === void 0 ? { value: undefined } : _b,
|
|
188
|
+
var id = props.id, dataTestId = props.dataTestId, dataTour = props.dataTour, className = props.className, name = props.name, appearance = props.appearance, _a = props.isDisabled, isDisabled = _a === void 0 ? false : _a, _b = props.active, active = _b === void 0 ? { value: undefined } : _b, itemAfter = props.itemAfter, itemBefore = props.itemBefore, _c = props.options, options = _c === void 0 ? [] : _c, setActiveSegment = props.setActiveSegment, before = props.before, after = props.after, _d = props.isCheckbox, isCheckbox = _d === void 0 ? false : _d, _e = props.isLoading, isLoading = _e === void 0 ? false : _e, isSkeleton = props.isSkeleton;
|
|
189
189
|
var controlRef = useRef(null);
|
|
190
190
|
var optionsRefs = useMemo(function () {
|
|
191
191
|
return new Map(options.map(function (item) { return [item.value, createRef()]; }));
|
|
@@ -196,9 +196,9 @@ function Choice(props) {
|
|
|
196
196
|
}, [isCheckbox, setActiveSegment]);
|
|
197
197
|
var appearanceConfig = useAppearanceConfig(appearance, choiceConfig);
|
|
198
198
|
var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
199
|
-
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,
|
|
199
|
+
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, iconAfterFillDisabled = propsGenerator.iconAfterFillDisabled, iconBeforeFillDisabled = propsGenerator.iconBeforeFillDisabled, iconFillDisabled = propsGenerator.iconFillDisabled, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, 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;
|
|
200
200
|
var styles = useStyles(props).styles;
|
|
201
|
-
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"),
|
|
201
|
+
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"), ref: controlRef, "data-test-id": dataTestId && "".concat(dataTestId, "Choice"), "data-tour": dataTour, 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) {
|
|
202
202
|
var isActive = typeof active === 'object'
|
|
203
203
|
? String(item.value) === String(active.value)
|
|
204
204
|
: String(item.value) === String(active);
|
|
@@ -218,7 +218,7 @@ function Choice(props) {
|
|
|
218
218
|
: !isDisabled
|
|
219
219
|
? fillItemClass && "fill_".concat(fillItemClass)
|
|
220
220
|
: fillItemDisabledClass &&
|
|
221
|
-
"fill_disabled_".concat(fillItemDisabledClass), !isActive && isDisabled && 'choice__item_state_disabled', isActive &&
|
|
221
|
+
"fill_disabled_".concat(fillItemDisabledClass), !isActive && isDisabled && 'choice__item_state_disabled', (item.icon || item.iconActive) && 'asdasdasdasd', isActive &&
|
|
222
222
|
isDisabled &&
|
|
223
223
|
'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
|
|
224
224
|
? item.iconBeforeActive || item.iconBefore
|
|
@@ -3,7 +3,7 @@ import { jsx } from 'react/jsx-runtime';
|
|
|
3
3
|
import { useMemo } from 'react';
|
|
4
4
|
import clsx from 'clsx';
|
|
5
5
|
import { PartySuggestions } from 'react-dadata';
|
|
6
|
-
import { I as Input } from '../
|
|
6
|
+
import { I as Input } from '../Input_es_RtN2gtZq.js';
|
|
7
7
|
import '../hooks/useAppearanceConfig/useAppearanceConfig.js';
|
|
8
8
|
import '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
|
|
9
9
|
import 'lodash/camelCase';
|
|
@@ -2,7 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
|
|
|
2
2
|
import { useCallback } from 'react';
|
|
3
3
|
import clsx from 'clsx';
|
|
4
4
|
import { DATE_PERIOD_INTERVALS } from '@itcase/common';
|
|
5
|
-
import { D as DatePickerInput } from '../
|
|
5
|
+
import { D as DatePickerInput } from '../DatePicker_es_Bi6lgbTb.js';
|
|
6
6
|
import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
|
|
7
7
|
import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
|
|
8
8
|
import { b as ChipsGroup, C as Chips } from '../ChipsGroup_es_BKG5mK5N.js';
|
|
@@ -29,7 +29,7 @@ import '../context/UrlAssetPrefix.js';
|
|
|
29
29
|
import '../Link_es_BnUIX0QT.js';
|
|
30
30
|
import '../Text_es_CtCwsa3V.js';
|
|
31
31
|
import '../Loader_es_C8ETXkiZ.js';
|
|
32
|
-
import '../
|
|
32
|
+
import '../Input_es_RtN2gtZq.js';
|
|
33
33
|
import '../Label_es_CoIII7Ty.js';
|
|
34
34
|
import '@itcase/icons/default';
|
|
35
35
|
import 'lodash/castArray';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { D as DatePickerInput, a as datePickerAppearance, d as datePickerConfig } from '../
|
|
1
|
+
export { D as DatePickerInput, a as datePickerAppearance, d as datePickerConfig } from '../DatePicker_es_Bi6lgbTb.js';
|
|
2
2
|
import '../tslib.es6_es_Bwu1Cn-t.js';
|
|
3
3
|
import 'react/jsx-runtime';
|
|
4
4
|
import 'react';
|
|
@@ -29,6 +29,6 @@ import '../context/UrlAssetPrefix.js';
|
|
|
29
29
|
import '../Link_es_BnUIX0QT.js';
|
|
30
30
|
import '../Text_es_CtCwsa3V.js';
|
|
31
31
|
import '../Loader_es_C8ETXkiZ.js';
|
|
32
|
-
import '../
|
|
32
|
+
import '../Input_es_RtN2gtZq.js';
|
|
33
33
|
import '../Label_es_CoIII7Ty.js';
|
|
34
34
|
import '@itcase/icons/default';
|
package/dist/components/Input.js
CHANGED
|
@@ -45,10 +45,10 @@
|
|
|
45
45
|
&_size {
|
|
46
46
|
@each $size in xxl, xl, l, m, s, xs, xxs {
|
|
47
47
|
&_$(size) {
|
|
48
|
-
min-height: var(--choice-item
|
|
49
|
-
padding: var(--choice-item
|
|
48
|
+
min-height: var(--choice-item-$(size)-min-height);
|
|
49
|
+
padding: var(--choice-item-$(size)-padding);
|
|
50
50
|
^^&-label {
|
|
51
|
-
gap: var(--choice-item
|
|
51
|
+
gap: var(--choice-item-$(size)-gap);
|
|
52
52
|
}
|
|
53
53
|
}
|
|
54
54
|
}
|
|
@@ -138,30 +138,30 @@
|
|
|
138
138
|
}
|
|
139
139
|
}
|
|
140
140
|
:root {
|
|
141
|
-
--choice-size-
|
|
142
|
-
--choice-size-
|
|
143
|
-
--choice-size-
|
|
144
|
-
--choice-size-
|
|
141
|
+
--choice-size-l-height: 48px;
|
|
142
|
+
--choice-size-l-min-height: 48px;
|
|
143
|
+
--choice-size-l-row-gap: 12px;
|
|
144
|
+
--choice-size-l-column-gap: 12px;
|
|
145
145
|
|
|
146
146
|
--choice-size-m-row-gap: 12px;
|
|
147
147
|
--choice-size-m-column-gap: 12px;
|
|
148
|
-
--choice-size-m-height:
|
|
149
|
-
--choice-size-m-min-height:
|
|
148
|
+
--choice-size-m-height: 40px;
|
|
149
|
+
--choice-size-m-min-height: 40px;
|
|
150
150
|
|
|
151
|
-
--choice-size-
|
|
152
|
-
--choice-size-
|
|
153
|
-
--choice-size-
|
|
154
|
-
--choice-size-
|
|
151
|
+
--choice-size-s-height: 28px;
|
|
152
|
+
--choice-size-s-min-height: 28px;
|
|
153
|
+
--choice-size-s-row-gap: 12px;
|
|
154
|
+
--choice-size-s-column-gap: 12px;
|
|
155
155
|
|
|
156
|
-
--choice-item-
|
|
157
|
-
--choice-item-
|
|
158
|
-
--choice-item-
|
|
156
|
+
--choice-item-l-padding: 0px 12px;
|
|
157
|
+
--choice-item-l-min-height: 44px;
|
|
158
|
+
--choice-item-l-gap: 8px;
|
|
159
159
|
|
|
160
|
-
--choice-item-
|
|
161
|
-
--choice-item-
|
|
162
|
-
--choice-item-
|
|
160
|
+
--choice-item-m-padding: 0px 12px;
|
|
161
|
+
--choice-item-m-min-height: 36px;
|
|
162
|
+
--choice-item-m-gap: 8px;
|
|
163
163
|
|
|
164
|
-
--choice-item-
|
|
165
|
-
--choice-item-
|
|
166
|
-
--choice-item-
|
|
164
|
+
--choice-item-s-padding: 0px 6px;
|
|
165
|
+
--choice-item-s-min-height: 24px;
|
|
166
|
+
--choice-item-s-gap: 8px;
|
|
167
167
|
}
|
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
&_size {
|
|
3
3
|
@each $size in xxl, xl, l, m, s, xs, xxs {
|
|
4
4
|
&_$(size) {
|
|
5
|
-
min-height: var(--choice-item
|
|
6
|
-
padding: var(--choice-item
|
|
5
|
+
min-height: var(--choice-item-$(size)-min-height);
|
|
6
|
+
padding: var(--choice-item-$(size)-padding);
|
|
7
7
|
^^&-label {
|
|
8
|
-
gap: var(--choice-item
|
|
8
|
+
gap: var(--choice-item-$(size)-gap);
|
|
9
9
|
}
|
|
10
10
|
}
|
|
11
11
|
}
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
padding: 0;
|
|
4
4
|
margin: 0;
|
|
5
5
|
border: none;
|
|
6
|
+
border: solid 2px red;
|
|
6
7
|
position: relative;
|
|
7
8
|
box-shadow: none;
|
|
8
9
|
appearance: none;
|
|
@@ -32,10 +33,10 @@
|
|
|
32
33
|
}
|
|
33
34
|
.input {
|
|
34
35
|
&&_size {
|
|
35
|
-
@each $size in
|
|
36
|
+
@each $size in xl, l, m, s {
|
|
36
37
|
&_$(size) {
|
|
37
|
-
min-height: var(--input
|
|
38
|
-
padding: var(--input
|
|
38
|
+
min-height: var(--input-$(size)-min-height);
|
|
39
|
+
padding: var(--input-$(size)-padding);
|
|
39
40
|
}
|
|
40
41
|
}
|
|
41
42
|
}
|
|
@@ -70,16 +71,14 @@
|
|
|
70
71
|
--input-shape-rounded: 8px;
|
|
71
72
|
|
|
72
73
|
/* Size */
|
|
73
|
-
--input-
|
|
74
|
-
--input-
|
|
75
|
-
--input-
|
|
76
|
-
--input-
|
|
77
|
-
--input-
|
|
78
|
-
--input-
|
|
79
|
-
--input-
|
|
80
|
-
--input-
|
|
81
|
-
--input-size-xl-min-height: 48px;
|
|
82
|
-
--input-size-xxl-min-height: 56px;
|
|
74
|
+
--input-xl-min-height: 56px;
|
|
75
|
+
--input-xl-padding: 12px 16px;
|
|
76
|
+
--input-l-min-height: 48px;
|
|
77
|
+
--input-l-padding: 12px 12px;
|
|
78
|
+
--input-m-min-height: 40px;
|
|
79
|
+
--input-m-padding: 8px 12px;
|
|
80
|
+
--input-s-min-height: 28px;
|
|
81
|
+
--input-s-padding: 2px 6px;
|
|
83
82
|
|
|
84
83
|
--input-caret-color: var(--color-accent-fill-primary);
|
|
85
84
|
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
|
|
33
33
|
.select {
|
|
34
34
|
&&_size {
|
|
35
|
-
@each $size in
|
|
35
|
+
@each $size in xl, l, m, s {
|
|
36
36
|
&_$(size) {
|
|
37
37
|
^^&__control {
|
|
38
38
|
padding: var(--select-$(size)-padding);
|
|
@@ -300,11 +300,14 @@
|
|
|
300
300
|
}
|
|
301
301
|
|
|
302
302
|
:root {
|
|
303
|
-
--select-
|
|
304
|
-
--select-xl-padding: 12px
|
|
303
|
+
--select-xl-min-height: 56px;
|
|
304
|
+
--select-xl-padding: 12px 16px;
|
|
305
|
+
--select-l-min-height: 48px;
|
|
306
|
+
--select-l-padding: 12px 12px;
|
|
307
|
+
--select-m-min-height: 40px;
|
|
305
308
|
--select-m-padding: 8px 12px;
|
|
306
|
-
--select-s-
|
|
307
|
-
--select-
|
|
309
|
+
--select-s-min-height: 28px;
|
|
310
|
+
--select-s-padding: 2px 6px;
|
|
308
311
|
|
|
309
312
|
--select-multi-item-xxl-padding: 5px;
|
|
310
313
|
--select-multi-item-xl-padding: 5px;
|
|
@@ -5,6 +5,23 @@ import { formatURL } from '@itcase/common';
|
|
|
5
5
|
import { UrlAssetPrefixContext } from '../context/UrlAssetPrefix.js';
|
|
6
6
|
|
|
7
7
|
var urlPropsList = ['src', 'imageSrc', 'svgSrc', 'placeholderUrl'];
|
|
8
|
+
/**
|
|
9
|
+
* HOC, который добавляет assetPrefix к URL-пропсам.
|
|
10
|
+
*
|
|
11
|
+
* @template P - Тип пропсов оборачиваемого компонента.
|
|
12
|
+
* @template T - Тип ref (если используется forwardRef).
|
|
13
|
+
* @template Check - Проверка на наличие хотя бы одного URL-пропа.
|
|
14
|
+
*
|
|
15
|
+
* @param WrappedComponent - Компонент, который оборачиваем.
|
|
16
|
+
* @param _error - Проверка: если ни одного URL-пропа нет, будет ошибка компиляции.
|
|
17
|
+
*
|
|
18
|
+
* @example
|
|
19
|
+
* const A = (props: { src?: string }) => <div />;
|
|
20
|
+
* urlWithAssetPrefix(A); // ✅ OK
|
|
21
|
+
*
|
|
22
|
+
* const B = (props: { id: string }) => <div />;
|
|
23
|
+
* urlWithAssetPrefix(B); // ❌ TS ошибка (нет url-пропов)
|
|
24
|
+
*/
|
|
8
25
|
var urlWithAssetPrefix = function (WrappedComponent) {
|
|
9
26
|
var HOC = React.forwardRef(function HOC(props, ref) {
|
|
10
27
|
var _a = useContext(UrlAssetPrefixContext), assetPrefix = _a.assetPrefix, ignorePathsList = _a.ignorePathsList;
|
|
@@ -138,7 +138,6 @@ function useStyles(props) {
|
|
|
138
138
|
return resultStylesGroups;
|
|
139
139
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
140
140
|
}, [deviceCurrentMainType, deviceCurrentType, ...Object.values(propsStyleAttributes)]);
|
|
141
|
-
console.error('collectedStyles', collectedStyles);
|
|
142
141
|
return collectedStyles;
|
|
143
142
|
}
|
|
144
143
|
const removeDeviceType = (originalKey, deviceTypesList) => {
|
|
@@ -1,3 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
declare const Image: import("react").ForwardRefExoticComponent<Omit<ImageProps, "ref"> & import("react").RefAttributes<unknown>>;
|
|
1
|
+
declare const Image: import("react").ForwardRefExoticComponent<Omit<Record<string, any>, "ref"> & import("react").RefAttributes<unknown>>;
|
|
3
2
|
export { Image };
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
declare const inputAppearanceDefault: {
|
|
2
2
|
defaultPrimary: {
|
|
3
3
|
fill: string;
|
|
4
|
+
textColorDisabled: string;
|
|
4
5
|
borderColor: string;
|
|
5
6
|
borderColorHover: string;
|
|
6
7
|
textColor: string;
|
|
7
|
-
textColorDisabled: string;
|
|
8
8
|
caret: string;
|
|
9
9
|
iconBeforeFill: string;
|
|
10
10
|
iconClearFill: string;
|
|
@@ -12,10 +12,10 @@ declare const inputAppearanceDefault: {
|
|
|
12
12
|
};
|
|
13
13
|
defaultSecondary: {
|
|
14
14
|
fill: string;
|
|
15
|
+
textColorDisabled: string;
|
|
15
16
|
borderColor: string;
|
|
16
17
|
borderColorHover: string;
|
|
17
18
|
textColor: string;
|
|
18
|
-
textColorDisabled: string;
|
|
19
19
|
caret: string;
|
|
20
20
|
iconBeforeFill: string;
|
|
21
21
|
iconClearFill: string;
|
|
@@ -5,19 +5,19 @@ declare const inputAppearanceShape: {
|
|
|
5
5
|
rounded: {
|
|
6
6
|
shape: string;
|
|
7
7
|
};
|
|
8
|
-
|
|
8
|
+
roundedXL: {
|
|
9
9
|
shape: string;
|
|
10
10
|
shapeStrength: string;
|
|
11
11
|
};
|
|
12
|
-
|
|
12
|
+
roundedL: {
|
|
13
13
|
shape: string;
|
|
14
14
|
shapeStrength: string;
|
|
15
15
|
};
|
|
16
|
-
|
|
16
|
+
roundedM: {
|
|
17
17
|
shape: string;
|
|
18
18
|
shapeStrength: string;
|
|
19
19
|
};
|
|
20
|
-
|
|
20
|
+
roundedS: {
|
|
21
21
|
shape: string;
|
|
22
22
|
shapeStrength: string;
|
|
23
23
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { LogoConfig
|
|
1
|
+
import type { LogoConfig } from './Logo.interface';
|
|
2
2
|
declare const logoConfig: LogoConfig;
|
|
3
|
-
declare const Logo: import("react").ForwardRefExoticComponent<Omit<
|
|
3
|
+
declare const Logo: import("react").ForwardRefExoticComponent<Omit<Record<string, any>, "ref"> & import("react").RefAttributes<unknown>>;
|
|
4
4
|
export { Logo, logoConfig };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { ResponseConfig
|
|
1
|
+
import type { ResponseConfig } from './Response.interface';
|
|
2
2
|
declare const responseConfig: ResponseConfig;
|
|
3
|
-
declare const Response: import("react").ForwardRefExoticComponent<Omit<
|
|
3
|
+
declare const Response: import("react").ForwardRefExoticComponent<Omit<Record<string, any>, "ref"> & import("react").RefAttributes<unknown>>;
|
|
4
4
|
export { Response, responseConfig };
|
|
@@ -1,3 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
declare const SVGContent: import("react").ForwardRefExoticComponent<Omit<SVGContentProps, "ref"> & import("react").RefAttributes<unknown>>;
|
|
1
|
+
declare const SVGContent: import("react").ForwardRefExoticComponent<Omit<Record<string, any>, "ref"> & import("react").RefAttributes<unknown>>;
|
|
3
2
|
export { SVGContent };
|
|
@@ -1,9 +1,28 @@
|
|
|
1
|
-
import React
|
|
2
|
-
type
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { ComponentType, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from 'react';
|
|
3
|
+
import { RequireAtLeastOneProp, RequireAtLeastOnePropError } from 'src/types';
|
|
4
|
+
type UrlPropKeys = (typeof urlPropsList)[number];
|
|
5
|
+
type OnePropCheckError = [
|
|
6
|
+
'urlWithAssetPrefix: компонент должен содержать хотя бы один из пропсов',
|
|
7
|
+
UrlPropKeys
|
|
8
|
+
];
|
|
9
|
+
declare const urlPropsList: readonly ["src", "imageSrc", "svgSrc", "placeholderUrl"];
|
|
10
|
+
/**
|
|
11
|
+
* HOC, который добавляет assetPrefix к URL-пропсам.
|
|
12
|
+
*
|
|
13
|
+
* @template P - Тип пропсов оборачиваемого компонента.
|
|
14
|
+
* @template T - Тип ref (если используется forwardRef).
|
|
15
|
+
* @template Check - Проверка на наличие хотя бы одного URL-пропа.
|
|
16
|
+
*
|
|
17
|
+
* @param WrappedComponent - Компонент, который оборачиваем.
|
|
18
|
+
* @param _error - Проверка: если ни одного URL-пропа нет, будет ошибка компиляции.
|
|
19
|
+
*
|
|
20
|
+
* @example
|
|
21
|
+
* const A = (props: { src?: string }) => <div />;
|
|
22
|
+
* urlWithAssetPrefix(A); // ✅ OK
|
|
23
|
+
*
|
|
24
|
+
* const B = (props: { id: string }) => <div />;
|
|
25
|
+
* urlWithAssetPrefix(B); // ❌ TS ошибка (нет url-пропов)
|
|
26
|
+
*/
|
|
27
|
+
declare const urlWithAssetPrefix: <P extends Record<string, any>, T = unknown, OnePropCheck extends RequireAtLeastOneProp<P, UrlPropKeys> = RequireAtLeastOneProp<P, UrlPropKeys>>(WrappedComponent: ComponentType<P> | ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>, ..._error: RequireAtLeastOnePropError<OnePropCheck, OnePropCheckError>) => React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<T>>;
|
|
9
28
|
export { urlWithAssetPrefix };
|
|
@@ -7,3 +7,37 @@ export type WithClassKeys<T> = T & {
|
|
|
7
7
|
[K in keyof T & string as `${K}Class`]: NonNullable<T[K]> extends string ? KebabCase<T[K]> | undefined : string | undefined;
|
|
8
8
|
};
|
|
9
9
|
export type KebabCase<S> = S extends string ? S extends `${infer F}${infer R}` ? R extends Uncapitalize<R> ? `${Lowercase<F>}${KebabCase<R>}` : `${Lowercase<F>}-${KebabCase<Uncapitalize<R>>}` : Lowercase<S> : never;
|
|
10
|
+
/**
|
|
11
|
+
* Проверяет, что у типа `P` есть хотя бы один ключ из списка `Keys`.
|
|
12
|
+
*
|
|
13
|
+
* @template P - Объект, который проверяем (обычно тип пропсов компонента).
|
|
14
|
+
* @template Keys - Набор ключей, хотя бы один из которых должен присутствовать.
|
|
15
|
+
*
|
|
16
|
+
* @example
|
|
17
|
+
* type Props = { id: string; placeholderUrl?: string };
|
|
18
|
+
*
|
|
19
|
+
* type Check1 = RequireAtLeastOneProp<Props, 'src' | 'placeholderUrl'>;
|
|
20
|
+
* // ✅ "placeholderUrl" (совпадение есть)
|
|
21
|
+
*
|
|
22
|
+
* type Check2 = RequireAtLeastOneProp<Props, 'src' | 'imageSrc'>;
|
|
23
|
+
* // ❌ never (совпадений нет)
|
|
24
|
+
*/
|
|
25
|
+
export type RequireAtLeastOneProp<P, Keys> = Extract<keyof P, Keys>;
|
|
26
|
+
/**
|
|
27
|
+
* Выводит типовую ошибку, если в `Check` нет ни одного ключа (равен `never`).
|
|
28
|
+
*
|
|
29
|
+
* @template Check - Результат проверки из `RequireAtLeastOneProp`.
|
|
30
|
+
* @template Error - Текст ошибки, который будет показан в TS.
|
|
31
|
+
*
|
|
32
|
+
* @example
|
|
33
|
+
* type Props = { id: string };
|
|
34
|
+
*
|
|
35
|
+
* type Check = RequireAtLeastOneProp<Props, 'src' | 'imageSrc'>;
|
|
36
|
+
*
|
|
37
|
+
* type ErrorCheck = RequireAtLeastOnePropError<
|
|
38
|
+
* Check,
|
|
39
|
+
* ['Компонент должен содержать хотя бы один из пропсов', 'src' | 'imageSrc']
|
|
40
|
+
* >;
|
|
41
|
+
* // ❌ TS ошибка: ["Компонент должен содержать хотя бы один из пропсов", "src" | "imageSrc"]
|
|
42
|
+
*/
|
|
43
|
+
export type RequireAtLeastOnePropError<Check, Error> = [Check] extends [never] ? Error : [];
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@itcase/ui",
|
|
3
|
-
"version": "1.8.
|
|
3
|
+
"version": "1.8.110",
|
|
4
4
|
"description": "UI components (Modal, Loader, Popup, etc)",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"Modal",
|
|
@@ -166,12 +166,12 @@
|
|
|
166
166
|
"babel-plugin-react-docgen": "^4.2.1",
|
|
167
167
|
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
|
|
168
168
|
"conventional-changelog-conventionalcommits": "^9.1.0",
|
|
169
|
-
"eslint": "9.
|
|
169
|
+
"eslint": "9.34.0",
|
|
170
170
|
"husky": "^9.1.7",
|
|
171
171
|
"lint-staged": "^16.1.5",
|
|
172
172
|
"prettier": "^3.6.2",
|
|
173
173
|
"react-docgen-typescript": "^2.4.0",
|
|
174
|
-
"rollup": "^4.
|
|
174
|
+
"rollup": "^4.48.1",
|
|
175
175
|
"rollup-plugin-copy": "^3.5.0",
|
|
176
176
|
"rollup-plugin-dts": "^6.2.3",
|
|
177
177
|
"rollup-plugin-peer-deps-external": "^2.2.4",
|