@itcase/ui 1.9.29 → 1.9.30
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/{Button_cjs_VVROhnrj.js → Button_cjs_DiaYeIs8.js} +1 -1
- package/dist/{Button_es_D74OMP6r.js → Button_es_y6hlih24.js} +1 -1
- package/dist/{DatePicker_cjs_CnXoxGZ_.js → DatePicker_cjs_CaD9pYTQ.js} +2 -2
- package/dist/{DatePicker_es_DyAZeFi2.js → DatePicker_es_DqHRlhti.js} +2 -2
- package/dist/{Input_cjs_CV0nr-f4.js → Input_cjs_DnjehCpi.js} +1 -1
- package/dist/{Input_es_B2dHRF47.js → Input_es_DCaVqQH5.js} +1 -1
- package/dist/cjs/components/Button.js +1 -1
- package/dist/cjs/components/CookiesWarning.js +1 -1
- package/dist/cjs/components/Dadata.js +1 -1
- package/dist/cjs/components/DatePeriod.js +3 -3
- package/dist/cjs/components/DatePicker.js +3 -3
- package/dist/cjs/components/Input.js +1 -1
- package/dist/cjs/components/InputNumber.js +3 -3
- package/dist/cjs/components/InputPassword.js +2 -2
- package/dist/cjs/components/Notification.js +1 -1
- package/dist/cjs/components/Response.js +1 -1
- package/dist/cjs/components/Textarea.js +2 -2
- package/dist/components/Button.js +1 -1
- package/dist/components/CookiesWarning.js +1 -1
- package/dist/components/Dadata.js +1 -1
- package/dist/components/DatePeriod.js +3 -3
- package/dist/components/DatePicker.js +3 -3
- package/dist/components/Input.js +1 -1
- package/dist/components/InputNumber.js +3 -3
- package/dist/components/InputPassword.js +2 -2
- package/dist/components/Notification.js +1 -1
- package/dist/components/Response.js +1 -1
- package/dist/components/Textarea.js +2 -2
- package/package.json +1 -1
|
@@ -466,7 +466,7 @@ const Button = React.forwardRef(function Button(props, ref) {
|
|
|
466
466
|
? 'button_type_label'
|
|
467
467
|
: buttonTypeClass
|
|
468
468
|
? 'button_type_icon'
|
|
469
|
-
: '', borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && !isDisabled && `fill_hover_${fillHoverClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, sizeClass && `button_size_${sizeClass}`, widthClass && `button_width_${widthClass}`, elevationClass && `elevation_${elevationClass}`, onClick && 'cursor_type_pointer', isDisabled && 'button_state_disabled cursor_type_default', Badge && 'button_type_badge', zeroPadding && 'button_reset-padding', zeroGap && 'button_reset-gap', isLoading && 'button_state_loading', isSkeleton && `button_skeleton`), type: htmlType, "data-testid": dataTestId && `${dataTestId}
|
|
469
|
+
: '', borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && !isDisabled && `fill_hover_${fillHoverClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, sizeClass && `button_size_${sizeClass}`, widthClass && `button_width_${widthClass}`, elevationClass && `elevation_${elevationClass}`, onClick && 'cursor_type_pointer', isDisabled && 'button_state_disabled cursor_type_default', Badge && 'button_type_badge', zeroPadding && 'button_reset-padding', zeroGap && 'button_reset-gap', isLoading && 'button_state_loading', isSkeleton && `button_skeleton`), type: htmlType, "data-testid": dataTestId && `${dataTestId}-button`, "data-tour": dataTour, disabled: isDisabled, href: link || href, LinkComponent: "button", rel: rel, style: buttonStyles, target: target, onClick: onClick, onMouseDown: onMouseDown, children: jsxRuntime.jsxs("div", { className: "button__wrapper", ref: ref, children: [isLoading && (jsxRuntime.jsx(Loader.Loader, { appearance: `${loaderAppearance} ${loaderAppearanceSize}`, className: clsx(className, 'button__loader'), type: loaderType, size: loaderSize, fill: loaderFill, itemFill: loaderItemFill })), before, (iconBefore || iconBeforeSrc) && (jsxRuntime.jsx(Icon.Icon, { appearance: iconBeforeAppearance, className: "button__icon_before", fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), (icon || iconSrc) && (jsxRuntime.jsx(Icon.Icon, { appearance: iconAppearance, className: "button__icon", fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon })), (children || label) && (jsxRuntime.jsx(Text.Text, { className: "button__label", width: labelTextWidth, size: labelTextSize, textColor: labelTextColor, textColorHover: labelTextColorHover, textTruncate: labelTextTruncate, textWeight: labelTextWeight, textWrap: labelTextWrap, style: labelStyles, children: children || label })), (iconAfter || iconAfterSrc) && (jsxRuntime.jsx(Icon.Icon, { appearance: iconAfterAppearance, className: "button__icon_after", fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter })), Badge, after] }) }));
|
|
470
470
|
});
|
|
471
471
|
|
|
472
472
|
exports.Button = Button;
|
|
@@ -464,7 +464,7 @@ const Button = React.forwardRef(function Button(props, ref) {
|
|
|
464
464
|
? 'button_type_label'
|
|
465
465
|
: buttonTypeClass
|
|
466
466
|
? 'button_type_icon'
|
|
467
|
-
: '', borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && !isDisabled && `fill_hover_${fillHoverClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, sizeClass && `button_size_${sizeClass}`, widthClass && `button_width_${widthClass}`, elevationClass && `elevation_${elevationClass}`, onClick && 'cursor_type_pointer', isDisabled && 'button_state_disabled cursor_type_default', Badge && 'button_type_badge', zeroPadding && 'button_reset-padding', zeroGap && 'button_reset-gap', isLoading && 'button_state_loading', isSkeleton && `button_skeleton`), type: htmlType, "data-testid": dataTestId && `${dataTestId}
|
|
467
|
+
: '', borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && !isDisabled && `fill_hover_${fillHoverClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, sizeClass && `button_size_${sizeClass}`, widthClass && `button_width_${widthClass}`, elevationClass && `elevation_${elevationClass}`, onClick && 'cursor_type_pointer', isDisabled && 'button_state_disabled cursor_type_default', Badge && 'button_type_badge', zeroPadding && 'button_reset-padding', zeroGap && 'button_reset-gap', isLoading && 'button_state_loading', isSkeleton && `button_skeleton`), type: htmlType, "data-testid": dataTestId && `${dataTestId}-button`, "data-tour": dataTour, disabled: isDisabled, href: link || href, LinkComponent: "button", rel: rel, style: buttonStyles, target: target, onClick: onClick, onMouseDown: onMouseDown, children: jsxs("div", { className: "button__wrapper", ref: ref, children: [isLoading && (jsx(Loader, { appearance: `${loaderAppearance} ${loaderAppearanceSize}`, className: clsx(className, 'button__loader'), type: loaderType, size: loaderSize, fill: loaderFill, itemFill: loaderItemFill })), before, (iconBefore || iconBeforeSrc) && (jsx(Icon, { appearance: iconBeforeAppearance, className: "button__icon_before", fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), (icon || iconSrc) && (jsx(Icon, { appearance: iconAppearance, className: "button__icon", fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon })), (children || label) && (jsx(Text, { className: "button__label", width: labelTextWidth, size: labelTextSize, textColor: labelTextColor, textColorHover: labelTextColorHover, textTruncate: labelTextTruncate, textWeight: labelTextWeight, textWrap: labelTextWrap, style: labelStyles, children: children || label })), (iconAfter || iconAfterSrc) && (jsx(Icon, { appearance: iconAfterAppearance, className: "button__icon_after", fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter })), Badge, after] }) }));
|
|
468
468
|
});
|
|
469
469
|
|
|
470
470
|
export { Button as B, buttonAppearance as a, buttonConfig as b };
|
|
@@ -8,9 +8,9 @@ var DatePicker = require('react-datepicker');
|
|
|
8
8
|
var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearanceConfig.js');
|
|
9
9
|
var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
10
10
|
var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
|
|
11
|
-
var Button = require('./
|
|
11
|
+
var Button = require('./Button_cjs_DiaYeIs8.js');
|
|
12
12
|
var Icon = require('./Icon_cjs_D-jQrwjV.js');
|
|
13
|
-
var Input = require('./
|
|
13
|
+
var Input = require('./Input_cjs_DnjehCpi.js');
|
|
14
14
|
var Label = require('./Label_cjs_CyPU9hqO.js');
|
|
15
15
|
var Text = require('./Text_cjs_Co2XdYF-.js');
|
|
16
16
|
var _default = require('@itcase/icons/default');
|
|
@@ -6,9 +6,9 @@ import DatePicker from 'react-datepicker';
|
|
|
6
6
|
import { useAppearanceConfig } from './hooks/useAppearanceConfig/useAppearanceConfig.js';
|
|
7
7
|
import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
|
|
8
8
|
import { useStyles } from './hooks/useStyles/useStyles.js';
|
|
9
|
-
import { B as Button } from './
|
|
9
|
+
import { B as Button } from './Button_es_y6hlih24.js';
|
|
10
10
|
import { I as Icon } from './Icon_es_BstDGBF3.js';
|
|
11
|
-
import { I as Input } from './
|
|
11
|
+
import { I as Input } from './Input_es_DCaVqQH5.js';
|
|
12
12
|
import { L as Label } from './Label_es_qnCgQX52.js';
|
|
13
13
|
import { T as Text } from './Text_es_DaYcLe4H.js';
|
|
14
14
|
import { icons14 } from '@itcase/icons/default';
|
|
@@ -215,7 +215,7 @@ const Input = React.forwardRef(function Input(props, ref) {
|
|
|
215
215
|
const { fillClass, fillHoverClass, borderColorClass, borderColorHoverClass, borderWidthClass, textColorClass, textSizeClass, textWeightClass, caretClass, placeholderTextColorClass, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
|
|
216
216
|
const fallbackId = React.useId();
|
|
217
217
|
return (jsxRuntime.jsx("input", { id: String(id ?? fallbackId), className: clsx(className, 'input', type === 'number' && 'input_type_number', isDisabled && 'input_state_disabled', (textSizeClass || textColorClass || textWeightClass) && 'text', borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, caretClass && `caret-color_${caretClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, placeholderTextColorClass &&
|
|
218
|
-
`placeholder-text-color_${placeholderTextColorClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, sizeClass && `input_size_${sizeClass}`, textColorClass && `text-color_${textColorClass}`, textColorClass && `text-color_${textColorClass}`, textSizeClass && `text_size_${textSizeClass}`, textWeightClass && `text-weight_${textWeightClass}`, widthClass && `width_${widthClass}`), type: type, ref: ref, autoComplete: autocomplete, "data-testid": dataTestId || (name ? `${name}
|
|
218
|
+
`placeholder-text-color_${placeholderTextColorClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, sizeClass && `input_size_${sizeClass}`, textColorClass && `text-color_${textColorClass}`, textColorClass && `text-color_${textColorClass}`, textSizeClass && `text_size_${textSizeClass}`, textWeightClass && `text-weight_${textWeightClass}`, widthClass && `width_${widthClass}`), type: type, ref: ref, autoComplete: autocomplete, "data-testid": dataTestId || (name ? `${name}-input` : 'input'), disabled: isDisabled, index: index, placeholder: placeholder, readOnly: isReadOnly, value: value, onClick: onClick, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown }));
|
|
219
219
|
});
|
|
220
220
|
|
|
221
221
|
exports.Input = Input;
|
|
@@ -213,7 +213,7 @@ const Input = React.forwardRef(function Input(props, ref) {
|
|
|
213
213
|
const { fillClass, fillHoverClass, borderColorClass, borderColorHoverClass, borderWidthClass, textColorClass, textSizeClass, textWeightClass, caretClass, placeholderTextColorClass, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
|
|
214
214
|
const fallbackId = useId();
|
|
215
215
|
return (jsx("input", { id: String(id ?? fallbackId), className: clsx(className, 'input', type === 'number' && 'input_type_number', isDisabled && 'input_state_disabled', (textSizeClass || textColorClass || textWeightClass) && 'text', borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, caretClass && `caret-color_${caretClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, placeholderTextColorClass &&
|
|
216
|
-
`placeholder-text-color_${placeholderTextColorClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, sizeClass && `input_size_${sizeClass}`, textColorClass && `text-color_${textColorClass}`, textColorClass && `text-color_${textColorClass}`, textSizeClass && `text_size_${textSizeClass}`, textWeightClass && `text-weight_${textWeightClass}`, widthClass && `width_${widthClass}`), type: type, ref: ref, autoComplete: autocomplete, "data-testid": dataTestId || (name ? `${name}
|
|
216
|
+
`placeholder-text-color_${placeholderTextColorClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, sizeClass && `input_size_${sizeClass}`, textColorClass && `text-color_${textColorClass}`, textColorClass && `text-color_${textColorClass}`, textSizeClass && `text_size_${textSizeClass}`, textWeightClass && `text-weight_${textWeightClass}`, widthClass && `width_${widthClass}`), type: type, ref: ref, autoComplete: autocomplete, "data-testid": dataTestId || (name ? `${name}-input` : 'input'), disabled: isDisabled, index: index, placeholder: placeholder, readOnly: isReadOnly, value: value, onClick: onClick, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown }));
|
|
217
217
|
});
|
|
218
218
|
|
|
219
219
|
export { Input as I, inputAppearance as a, inputConfig as i };
|
|
@@ -6,7 +6,7 @@ var clsx = require('clsx');
|
|
|
6
6
|
var Cookies = require('js-cookie');
|
|
7
7
|
var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
|
|
8
8
|
var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
9
|
-
var Button = require('../../
|
|
9
|
+
var Button = require('../../Button_cjs_DiaYeIs8.js');
|
|
10
10
|
var Text = require('../../Text_cjs_Co2XdYF-.js');
|
|
11
11
|
require('lodash/camelCase');
|
|
12
12
|
require('lodash/castArray');
|
|
@@ -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 reactDadata = require('react-dadata');
|
|
7
|
-
var Input = require('../../
|
|
7
|
+
var Input = require('../../Input_cjs_DnjehCpi.js');
|
|
8
8
|
require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
|
|
9
9
|
require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
10
10
|
require('lodash/camelCase');
|
|
@@ -8,7 +8,7 @@ var common = require('@itcase/common');
|
|
|
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_P0UlUnid.js');
|
|
11
|
-
var DatePicker = require('../../
|
|
11
|
+
var DatePicker = require('../../DatePicker_cjs_CaD9pYTQ.js');
|
|
12
12
|
require('react-select');
|
|
13
13
|
require('../../Icon_cjs_D-jQrwjV.js');
|
|
14
14
|
var SelectContainer = require('../../SelectContainer_cjs_CnhODaJP.js');
|
|
@@ -29,10 +29,10 @@ require('../hooks/useStyles/useStyles.js');
|
|
|
29
29
|
require('../../Text_cjs_Co2XdYF-.js');
|
|
30
30
|
require('date-fns/locale');
|
|
31
31
|
require('react-datepicker');
|
|
32
|
-
require('../../
|
|
32
|
+
require('../../Button_cjs_DiaYeIs8.js');
|
|
33
33
|
require('../../Link_cjs_qKXVfU8e.js');
|
|
34
34
|
require('../../Loader_cjs_B3j9ATrq.js');
|
|
35
|
-
require('../../
|
|
35
|
+
require('../../Input_cjs_DnjehCpi.js');
|
|
36
36
|
require('../../Label_cjs_CyPU9hqO.js');
|
|
37
37
|
require('@itcase/icons/default');
|
|
38
38
|
require('react-inlinesvg');
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var DatePicker = require('../../
|
|
3
|
+
var DatePicker = require('../../DatePicker_cjs_CaD9pYTQ.js');
|
|
4
4
|
require('react/jsx-runtime');
|
|
5
5
|
require('react');
|
|
6
6
|
require('clsx');
|
|
@@ -22,7 +22,7 @@ require('../hooks.js');
|
|
|
22
22
|
require('../hooks/useStyles/styleAttributes.js');
|
|
23
23
|
require('../hooks/useStyles/useStyles.js');
|
|
24
24
|
require('lodash/maxBy');
|
|
25
|
-
require('../../
|
|
25
|
+
require('../../Button_cjs_DiaYeIs8.js');
|
|
26
26
|
require('../../Icon_cjs_D-jQrwjV.js');
|
|
27
27
|
require('react-inlinesvg');
|
|
28
28
|
require('../hoc/urlWithAssetPrefix.js');
|
|
@@ -30,7 +30,7 @@ require('../context/UrlAssetPrefix.js');
|
|
|
30
30
|
require('../../Link_cjs_qKXVfU8e.js');
|
|
31
31
|
require('../../Text_cjs_Co2XdYF-.js');
|
|
32
32
|
require('../../Loader_cjs_B3j9ATrq.js');
|
|
33
|
-
require('../../
|
|
33
|
+
require('../../Input_cjs_DnjehCpi.js');
|
|
34
34
|
require('../../Label_cjs_CyPU9hqO.js');
|
|
35
35
|
require('@itcase/icons/default');
|
|
36
36
|
|
|
@@ -5,7 +5,7 @@ var React = require('react');
|
|
|
5
5
|
var clsx = require('clsx');
|
|
6
6
|
var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
|
|
7
7
|
var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
8
|
-
var Button = require('../../
|
|
8
|
+
var Button = require('../../Button_cjs_DiaYeIs8.js');
|
|
9
9
|
var _default = require('@itcase/icons/default');
|
|
10
10
|
require('lodash/camelCase');
|
|
11
11
|
require('lodash/castArray');
|
|
@@ -144,7 +144,7 @@ const inputNumberAppearance = {
|
|
|
144
144
|
const inputNumberConfig = {
|
|
145
145
|
appearance: inputNumberAppearance};
|
|
146
146
|
const InputNumber = (props) => {
|
|
147
|
-
const { id, appearance, className, type = 'custom', min = 0, max = Infinity, step = 1, value = 0, onChange, } = props;
|
|
147
|
+
const { id, appearance, className, dataTestId, type = 'custom', name, min = 0, max = Infinity, step = 1, value = 0, onChange, } = props;
|
|
148
148
|
const [number, setNumber] = React.useState(value);
|
|
149
149
|
React.useEffect(() => {
|
|
150
150
|
setNumber(value);
|
|
@@ -174,7 +174,7 @@ const InputNumber = (props) => {
|
|
|
174
174
|
}
|
|
175
175
|
return (jsxRuntime.jsxs("div", { id: String(id), className: clsx(className, 'input-number', 'input-number__custom', borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, sizeClass && `input-number_size_${sizeClass}`, widthClass && `width_${widthClass}`), children: [jsxRuntime.jsx(Button.Button, { className: "input-number__icon", icon: iconMinus, iconFill: iconFill, iconFillHover: iconFillHover, iconFillIcon: iconFillIcon, iconShape: iconShape, iconSize: iconSize, onClick: () => handleChangeValue('minus') }), jsxRuntime.jsx("input", { className: clsx(inputNumberTextColorClass &&
|
|
176
176
|
`text-color_${inputNumberTextColorClass}`, inputNumberTextSizeClass && `text_size_${inputNumberTextSizeClass}`, inputNumberTextWeightClass &&
|
|
177
|
-
`text-weight_${inputNumberTextWeightClass}`), type: "number", min: min, max: max, step: step, value: number, onChange: (event) => handleInputValue(event) }), jsxRuntime.jsx(Button.Button, { className: "input-number__icon", icon: iconPlus, iconFill: iconFill, iconFillHover: iconFillHover, iconFillIcon: iconFillIcon, iconShape: iconShape, iconSize: iconSize, onClick: () => handleChangeValue('plus') })] }));
|
|
177
|
+
`text-weight_${inputNumberTextWeightClass}`), type: "number", min: min, max: max, "data-testid": dataTestId || (name ? `${name}-input-number` : 'input-number'), step: step, value: number, onChange: (event) => handleInputValue(event) }), jsxRuntime.jsx(Button.Button, { className: "input-number__icon", icon: iconPlus, iconFill: iconFill, iconFillHover: iconFillHover, iconFillIcon: iconFillIcon, iconShape: iconShape, iconSize: iconSize, onClick: () => handleChangeValue('plus') })] }));
|
|
178
178
|
};
|
|
179
179
|
|
|
180
180
|
exports.InputNumber = InputNumber;
|
|
@@ -246,7 +246,7 @@ const inputPasswordConfig = {
|
|
|
246
246
|
},
|
|
247
247
|
};
|
|
248
248
|
function InputPassword(props) {
|
|
249
|
-
const { id, appearance, className, placeholder, value, isDisabled, onBlur, onChange, onFocus, onKeyDown, } = props;
|
|
249
|
+
const { id, appearance, className, dataTestId, name, placeholder, value, isDisabled, onBlur, onChange, onFocus, onKeyDown, } = props;
|
|
250
250
|
const [isRevealed, setIsRevealed] = React.useState(false);
|
|
251
251
|
const inputType = React.useMemo(() => {
|
|
252
252
|
return isRevealed ? 'text' : 'password';
|
|
@@ -260,7 +260,7 @@ function InputPassword(props) {
|
|
|
260
260
|
const { fillClass, fillHoverClass, borderColorClass, borderColorHoverClass, borderWidthClass, textColorClass, textSizeClass, textWeightClass, caretClass, iconFill, iconFillHover, iconRevealableHide, iconRevealableShow, iconShape, iconSize, imageRevealableHide, imageRevealableShow, placeholderTextColorClass, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
|
|
261
261
|
return (jsxRuntime.jsxs("div", { className: "input-password", children: [jsxRuntime.jsx("input", { id: String(id), className: clsx(className, 'input-password__input', (textSizeClass || textColorClass || textWeightClass) && 'text', borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass &&
|
|
262
262
|
`border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, caretClass && `caret-color_${caretClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, placeholderTextColorClass &&
|
|
263
|
-
`placeholder-text-color_${placeholderTextColorClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, sizeClass && `input-password__input_size_${sizeClass}`, textColorClass && `text-color_${textColorClass}`, textColorClass && `text-color_${textColorClass}`, textSizeClass && `text_size_${textSizeClass}`, textWeightClass && `text-weight_${textWeightClass}`, widthClass && `width_${widthClass}`), type: inputType, disabled: isDisabled, placeholder: placeholder, value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown }), jsxRuntime.jsx(Icon.Icon, { className: "input-password__icon", size: iconSize, iconFill: iconFill, iconFillHover: iconFillHover, imageSrc: isRevealed ? imageRevealableHide : imageRevealableShow, shape: iconShape, SvgImage: isRevealed ? iconRevealableHide : iconRevealableShow, onClick: onClickIconReveal })] }));
|
|
263
|
+
`placeholder-text-color_${placeholderTextColorClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, sizeClass && `input-password__input_size_${sizeClass}`, textColorClass && `text-color_${textColorClass}`, textColorClass && `text-color_${textColorClass}`, textSizeClass && `text_size_${textSizeClass}`, textWeightClass && `text-weight_${textWeightClass}`, widthClass && `width_${widthClass}`), type: inputType, "data-testid": dataTestId || (name ? `${name}-input-password` : 'input-password'), disabled: isDisabled, placeholder: placeholder, value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown }), jsxRuntime.jsx(Icon.Icon, { className: "input-password__icon", size: iconSize, iconFill: iconFill, iconFillHover: iconFillHover, imageSrc: isRevealed ? imageRevealableHide : imageRevealableShow, shape: iconShape, SvgImage: isRevealed ? iconRevealableHide : iconRevealableShow, onClick: onClickIconReveal })] }));
|
|
264
264
|
}
|
|
265
265
|
|
|
266
266
|
exports.InputPassword = InputPassword;
|
|
@@ -6,7 +6,7 @@ var Loader = require('../../Loader_cjs_B3j9ATrq.js');
|
|
|
6
6
|
var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
|
|
7
7
|
var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
8
8
|
var useStyles = require('../hooks/useStyles/useStyles.js');
|
|
9
|
-
var Button = require('../../
|
|
9
|
+
var Button = require('../../Button_cjs_DiaYeIs8.js');
|
|
10
10
|
var Icon = require('../../Icon_cjs_D-jQrwjV.js');
|
|
11
11
|
var Text = require('../../Text_cjs_Co2XdYF-.js');
|
|
12
12
|
var _default = require('@itcase/icons/default');
|
|
@@ -8,7 +8,7 @@ var urlWithAssetPrefix = require('../hoc/urlWithAssetPrefix.js');
|
|
|
8
8
|
var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
|
|
9
9
|
var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
10
10
|
var useStyles = require('../hooks/useStyles/useStyles.js');
|
|
11
|
-
var Button = require('../../
|
|
11
|
+
var Button = require('../../Button_cjs_DiaYeIs8.js');
|
|
12
12
|
var Group = require('../../Group_cjs_C1YVff0N.js');
|
|
13
13
|
var Text = require('../../Text_cjs_Co2XdYF-.js');
|
|
14
14
|
require('@itcase/common');
|
|
@@ -214,12 +214,12 @@ const textareaConfig = {
|
|
|
214
214
|
},
|
|
215
215
|
};
|
|
216
216
|
function Textarea(props) {
|
|
217
|
-
const { id, appearance, className, placeholder, value, isDisabled, onBlur, onChange, onFocus, onKeyDown, } = props;
|
|
217
|
+
const { id, appearance, className, dataTestId, name, placeholder, value, isDisabled, onBlur, onChange, onFocus, onKeyDown, } = props;
|
|
218
218
|
const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, textareaConfig, isDisabled);
|
|
219
219
|
const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
|
|
220
220
|
const { fillClass, fillHoverClass, borderColorClass, borderHoverClass, borderWidthClass, textColorClass, textSizeClass, textWeightClass, caretClass, placeholderTextColorClass, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
|
|
221
221
|
return (jsxRuntime.jsx("div", { className: clsx('textarea', className, sizeClass && `textarea_size_${sizeClass}`), children: jsxRuntime.jsx("textarea", { id: id, className: clsx('textarea__input', (textSizeClass || textColorClass || textWeightClass) && 'text', caretClass && `caret-color_${caretClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderHoverClass && `border-color_hover_${borderHoverClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, placeholderTextColorClass &&
|
|
222
|
-
`placeholder-text-color_${placeholderTextColorClass}`, textSizeClass && `text_size_${textSizeClass}`, textColorClass && `text-color_${textColorClass}`, textWeightClass && `text-weight_${textWeightClass}`, widthClass && `width_${widthClass}`), disabled: isDisabled, placeholder: placeholder, value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown }) }));
|
|
222
|
+
`placeholder-text-color_${placeholderTextColorClass}`, textSizeClass && `text_size_${textSizeClass}`, textColorClass && `text-color_${textColorClass}`, textWeightClass && `text-weight_${textWeightClass}`, widthClass && `width_${widthClass}`), "data-testid": dataTestId || (name ? `${name}-textarea` : 'textarea'), disabled: isDisabled, placeholder: placeholder, value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown }) }));
|
|
223
223
|
}
|
|
224
224
|
|
|
225
225
|
exports.Textarea = Textarea;
|
|
@@ -4,7 +4,7 @@ import clsx from 'clsx';
|
|
|
4
4
|
import Cookies from 'js-cookie';
|
|
5
5
|
import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
|
|
6
6
|
import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
|
|
7
|
-
import { B as Button } from '../
|
|
7
|
+
import { B as Button } from '../Button_es_y6hlih24.js';
|
|
8
8
|
import { T as Text } from '../Text_es_DaYcLe4H.js';
|
|
9
9
|
import 'lodash/camelCase';
|
|
10
10
|
import 'lodash/castArray';
|
|
@@ -2,7 +2,7 @@ import { jsx } from 'react/jsx-runtime';
|
|
|
2
2
|
import { useMemo } from 'react';
|
|
3
3
|
import clsx from 'clsx';
|
|
4
4
|
import { PartySuggestions } from 'react-dadata';
|
|
5
|
-
import { I as Input } from '../
|
|
5
|
+
import { I as Input } from '../Input_es_DCaVqQH5.js';
|
|
6
6
|
import '../hooks/useAppearanceConfig/useAppearanceConfig.js';
|
|
7
7
|
import '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
|
|
8
8
|
import 'lodash/camelCase';
|
|
@@ -6,7 +6,7 @@ import { DATE_PERIOD_INTERVALS } from '@itcase/common';
|
|
|
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_BgECuDPT.js';
|
|
9
|
-
import { D as DatePickerInput } from '../
|
|
9
|
+
import { D as DatePickerInput } from '../DatePicker_es_DqHRlhti.js';
|
|
10
10
|
import 'react-select';
|
|
11
11
|
import '../Icon_es_BstDGBF3.js';
|
|
12
12
|
import { a as SelectContainer } from '../SelectContainer_es_CcYDHcBP.js';
|
|
@@ -27,10 +27,10 @@ import '../hooks/useStyles/useStyles.js';
|
|
|
27
27
|
import '../Text_es_DaYcLe4H.js';
|
|
28
28
|
import 'date-fns/locale';
|
|
29
29
|
import 'react-datepicker';
|
|
30
|
-
import '../
|
|
30
|
+
import '../Button_es_y6hlih24.js';
|
|
31
31
|
import '../Link_es_P2b6ya7P.js';
|
|
32
32
|
import '../Loader_es_wjTqawH6.js';
|
|
33
|
-
import '../
|
|
33
|
+
import '../Input_es_DCaVqQH5.js';
|
|
34
34
|
import '../Label_es_qnCgQX52.js';
|
|
35
35
|
import '@itcase/icons/default';
|
|
36
36
|
import 'react-inlinesvg';
|
|
@@ -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_DqHRlhti.js';
|
|
2
2
|
import 'react/jsx-runtime';
|
|
3
3
|
import 'react';
|
|
4
4
|
import 'clsx';
|
|
@@ -20,7 +20,7 @@ import '../hooks.js';
|
|
|
20
20
|
import '../hooks/useStyles/styleAttributes.js';
|
|
21
21
|
import '../hooks/useStyles/useStyles.js';
|
|
22
22
|
import 'lodash/maxBy';
|
|
23
|
-
import '../
|
|
23
|
+
import '../Button_es_y6hlih24.js';
|
|
24
24
|
import '../Icon_es_BstDGBF3.js';
|
|
25
25
|
import 'react-inlinesvg';
|
|
26
26
|
import '../hoc/urlWithAssetPrefix.js';
|
|
@@ -28,6 +28,6 @@ import '../context/UrlAssetPrefix.js';
|
|
|
28
28
|
import '../Link_es_P2b6ya7P.js';
|
|
29
29
|
import '../Text_es_DaYcLe4H.js';
|
|
30
30
|
import '../Loader_es_wjTqawH6.js';
|
|
31
|
-
import '../
|
|
31
|
+
import '../Input_es_DCaVqQH5.js';
|
|
32
32
|
import '../Label_es_qnCgQX52.js';
|
|
33
33
|
import '@itcase/icons/default';
|
package/dist/components/Input.js
CHANGED
|
@@ -3,7 +3,7 @@ import { useState, useEffect, useCallback } from 'react';
|
|
|
3
3
|
import clsx from 'clsx';
|
|
4
4
|
import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
|
|
5
5
|
import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
|
|
6
|
-
import { B as Button } from '../
|
|
6
|
+
import { B as Button } from '../Button_es_y6hlih24.js';
|
|
7
7
|
import { icons24 } from '@itcase/icons/default';
|
|
8
8
|
import 'lodash/camelCase';
|
|
9
9
|
import 'lodash/castArray';
|
|
@@ -142,7 +142,7 @@ const inputNumberAppearance = {
|
|
|
142
142
|
const inputNumberConfig = {
|
|
143
143
|
appearance: inputNumberAppearance};
|
|
144
144
|
const InputNumber = (props) => {
|
|
145
|
-
const { id, appearance, className, type = 'custom', min = 0, max = Infinity, step = 1, value = 0, onChange, } = props;
|
|
145
|
+
const { id, appearance, className, dataTestId, type = 'custom', name, min = 0, max = Infinity, step = 1, value = 0, onChange, } = props;
|
|
146
146
|
const [number, setNumber] = useState(value);
|
|
147
147
|
useEffect(() => {
|
|
148
148
|
setNumber(value);
|
|
@@ -172,7 +172,7 @@ const InputNumber = (props) => {
|
|
|
172
172
|
}
|
|
173
173
|
return (jsxs("div", { id: String(id), className: clsx(className, 'input-number', 'input-number__custom', borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, sizeClass && `input-number_size_${sizeClass}`, widthClass && `width_${widthClass}`), children: [jsx(Button, { className: "input-number__icon", icon: iconMinus, iconFill: iconFill, iconFillHover: iconFillHover, iconFillIcon: iconFillIcon, iconShape: iconShape, iconSize: iconSize, onClick: () => handleChangeValue('minus') }), jsx("input", { className: clsx(inputNumberTextColorClass &&
|
|
174
174
|
`text-color_${inputNumberTextColorClass}`, inputNumberTextSizeClass && `text_size_${inputNumberTextSizeClass}`, inputNumberTextWeightClass &&
|
|
175
|
-
`text-weight_${inputNumberTextWeightClass}`), type: "number", min: min, max: max, step: step, value: number, onChange: (event) => handleInputValue(event) }), jsx(Button, { className: "input-number__icon", icon: iconPlus, iconFill: iconFill, iconFillHover: iconFillHover, iconFillIcon: iconFillIcon, iconShape: iconShape, iconSize: iconSize, onClick: () => handleChangeValue('plus') })] }));
|
|
175
|
+
`text-weight_${inputNumberTextWeightClass}`), type: "number", min: min, max: max, "data-testid": dataTestId || (name ? `${name}-input-number` : 'input-number'), step: step, value: number, onChange: (event) => handleInputValue(event) }), jsx(Button, { className: "input-number__icon", icon: iconPlus, iconFill: iconFill, iconFillHover: iconFillHover, iconFillIcon: iconFillIcon, iconShape: iconShape, iconSize: iconSize, onClick: () => handleChangeValue('plus') })] }));
|
|
176
176
|
};
|
|
177
177
|
|
|
178
178
|
export { InputNumber, inputNumberAppearance };
|
|
@@ -244,7 +244,7 @@ const inputPasswordConfig = {
|
|
|
244
244
|
},
|
|
245
245
|
};
|
|
246
246
|
function InputPassword(props) {
|
|
247
|
-
const { id, appearance, className, placeholder, value, isDisabled, onBlur, onChange, onFocus, onKeyDown, } = props;
|
|
247
|
+
const { id, appearance, className, dataTestId, name, placeholder, value, isDisabled, onBlur, onChange, onFocus, onKeyDown, } = props;
|
|
248
248
|
const [isRevealed, setIsRevealed] = useState(false);
|
|
249
249
|
const inputType = useMemo(() => {
|
|
250
250
|
return isRevealed ? 'text' : 'password';
|
|
@@ -258,7 +258,7 @@ function InputPassword(props) {
|
|
|
258
258
|
const { fillClass, fillHoverClass, borderColorClass, borderColorHoverClass, borderWidthClass, textColorClass, textSizeClass, textWeightClass, caretClass, iconFill, iconFillHover, iconRevealableHide, iconRevealableShow, iconShape, iconSize, imageRevealableHide, imageRevealableShow, placeholderTextColorClass, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
|
|
259
259
|
return (jsxs("div", { className: "input-password", children: [jsx("input", { id: String(id), className: clsx(className, 'input-password__input', (textSizeClass || textColorClass || textWeightClass) && 'text', borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass &&
|
|
260
260
|
`border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, caretClass && `caret-color_${caretClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, placeholderTextColorClass &&
|
|
261
|
-
`placeholder-text-color_${placeholderTextColorClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, sizeClass && `input-password__input_size_${sizeClass}`, textColorClass && `text-color_${textColorClass}`, textColorClass && `text-color_${textColorClass}`, textSizeClass && `text_size_${textSizeClass}`, textWeightClass && `text-weight_${textWeightClass}`, widthClass && `width_${widthClass}`), type: inputType, disabled: isDisabled, placeholder: placeholder, value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown }), jsx(Icon, { className: "input-password__icon", size: iconSize, iconFill: iconFill, iconFillHover: iconFillHover, imageSrc: isRevealed ? imageRevealableHide : imageRevealableShow, shape: iconShape, SvgImage: isRevealed ? iconRevealableHide : iconRevealableShow, onClick: onClickIconReveal })] }));
|
|
261
|
+
`placeholder-text-color_${placeholderTextColorClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, sizeClass && `input-password__input_size_${sizeClass}`, textColorClass && `text-color_${textColorClass}`, textColorClass && `text-color_${textColorClass}`, textSizeClass && `text_size_${textSizeClass}`, textWeightClass && `text-weight_${textWeightClass}`, widthClass && `width_${widthClass}`), type: inputType, "data-testid": dataTestId || (name ? `${name}-input-password` : 'input-password'), disabled: isDisabled, placeholder: placeholder, value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown }), jsx(Icon, { className: "input-password__icon", size: iconSize, iconFill: iconFill, iconFillHover: iconFillHover, imageSrc: isRevealed ? imageRevealableHide : imageRevealableShow, shape: iconShape, SvgImage: isRevealed ? iconRevealableHide : iconRevealableShow, onClick: onClickIconReveal })] }));
|
|
262
262
|
}
|
|
263
263
|
|
|
264
264
|
export { InputPassword, inputPasswordAppearance, inputPasswordConfig };
|
|
@@ -4,7 +4,7 @@ import { L as Loader } from '../Loader_es_wjTqawH6.js';
|
|
|
4
4
|
import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
|
|
5
5
|
import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
|
|
6
6
|
import { useStyles } from '../hooks/useStyles/useStyles.js';
|
|
7
|
-
import { B as Button } from '../
|
|
7
|
+
import { B as Button } from '../Button_es_y6hlih24.js';
|
|
8
8
|
import { I as Icon } from '../Icon_es_BstDGBF3.js';
|
|
9
9
|
import { T as Text } from '../Text_es_DaYcLe4H.js';
|
|
10
10
|
import { icons24 } from '@itcase/icons/default';
|
|
@@ -6,7 +6,7 @@ import { urlWithAssetPrefix } from '../hoc/urlWithAssetPrefix.js';
|
|
|
6
6
|
import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
|
|
7
7
|
import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
|
|
8
8
|
import { useStyles } from '../hooks/useStyles/useStyles.js';
|
|
9
|
-
import { B as Button } from '../
|
|
9
|
+
import { B as Button } from '../Button_es_y6hlih24.js';
|
|
10
10
|
import { G as Group } from '../Group_es_C69f2Dom.js';
|
|
11
11
|
import { T as Text } from '../Text_es_DaYcLe4H.js';
|
|
12
12
|
import '@itcase/common';
|
|
@@ -212,12 +212,12 @@ const textareaConfig = {
|
|
|
212
212
|
},
|
|
213
213
|
};
|
|
214
214
|
function Textarea(props) {
|
|
215
|
-
const { id, appearance, className, placeholder, value, isDisabled, onBlur, onChange, onFocus, onKeyDown, } = props;
|
|
215
|
+
const { id, appearance, className, dataTestId, name, placeholder, value, isDisabled, onBlur, onChange, onFocus, onKeyDown, } = props;
|
|
216
216
|
const appearanceConfig = useAppearanceConfig(appearance, textareaConfig, isDisabled);
|
|
217
217
|
const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
218
218
|
const { fillClass, fillHoverClass, borderColorClass, borderHoverClass, borderWidthClass, textColorClass, textSizeClass, textWeightClass, caretClass, placeholderTextColorClass, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
|
|
219
219
|
return (jsx("div", { className: clsx('textarea', className, sizeClass && `textarea_size_${sizeClass}`), children: jsx("textarea", { id: id, className: clsx('textarea__input', (textSizeClass || textColorClass || textWeightClass) && 'text', caretClass && `caret-color_${caretClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderHoverClass && `border-color_hover_${borderHoverClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, placeholderTextColorClass &&
|
|
220
|
-
`placeholder-text-color_${placeholderTextColorClass}`, textSizeClass && `text_size_${textSizeClass}`, textColorClass && `text-color_${textColorClass}`, textWeightClass && `text-weight_${textWeightClass}`, widthClass && `width_${widthClass}`), disabled: isDisabled, placeholder: placeholder, value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown }) }));
|
|
220
|
+
`placeholder-text-color_${placeholderTextColorClass}`, textSizeClass && `text_size_${textSizeClass}`, textColorClass && `text-color_${textColorClass}`, textWeightClass && `text-weight_${textWeightClass}`, widthClass && `width_${widthClass}`), "data-testid": dataTestId || (name ? `${name}-textarea` : 'textarea'), disabled: isDisabled, placeholder: placeholder, value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown }) }));
|
|
221
221
|
}
|
|
222
222
|
|
|
223
223
|
export { Textarea, textareaAppearance, textareaConfig };
|