@itcase/ui 1.2.2 → 1.2.3
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/{Input-C7gBdx1m.js → Input-BSpFMsrf.js} +5 -5
- package/dist/{Input-BQ6Plt1n.js → Input-UkM-ag48.js} +5 -5
- package/dist/cjs/components/Choice.js +5 -5
- package/dist/cjs/components/DadataHintField.js +1 -1
- package/dist/cjs/components/DatePicker.js +8 -8
- package/dist/cjs/components/Input.js +1 -1
- package/dist/components/Choice.js +5 -5
- package/dist/components/DadataHintField.js +1 -1
- package/dist/components/DatePicker.js +8 -8
- package/dist/components/Input.js +1 -1
- package/dist/types/components/DatePicker/DatePicker.interface.d.ts +8 -7
- package/dist/types/components/Input/Input.interface.d.ts +1 -0
- package/package.json +1 -1
|
@@ -17,7 +17,7 @@ var inputConfig = {
|
|
|
17
17
|
},
|
|
18
18
|
};
|
|
19
19
|
var Input = React.forwardRef(function Input(props, ref) {
|
|
20
|
-
var id = props.id, isDisabled = props.isDisabled, appearance = props.appearance, className = props.className, dataTestId = props.dataTestId, index = props.index, name = props.name, placeholder = props.placeholder, state = props.state, type = props.type, value = props.value, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus, onKeyDown = props.onKeyDown;
|
|
20
|
+
var id = props.id, isDisabled = props.isDisabled, appearance = props.appearance, autocomplete = props.autocomplete, className = props.className, dataTestId = props.dataTestId, index = props.index, name = props.name, placeholder = props.placeholder, state = props.state, type = props.type, value = props.value, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus, onKeyDown = props.onKeyDown;
|
|
21
21
|
var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
|
|
22
22
|
prefix: 'fill_',
|
|
23
23
|
propsKey: 'fill',
|
|
@@ -85,9 +85,7 @@ var Input = React.forwardRef(function Input(props, ref) {
|
|
|
85
85
|
// prettier-ignore
|
|
86
86
|
var appearanceConfig = (appearance && inputConfig.appearance && inputConfig.appearance[appearance]);
|
|
87
87
|
var stateConfig = state && inputConfig.state && inputConfig.state[state];
|
|
88
|
-
return (jsxRuntime.jsx("input", {
|
|
89
|
-
// @ts-ignore
|
|
90
|
-
index: index, placeholder: placeholder, ref: ref, type: type, value: value, className: clsx(className, 'input', type === 'number' && 'input_type_number', (textSizeClass || textColorClass || weightClass) && 'text', caretClass, !isDisabled ? fillClass : fillDisabledClass, shapeClass ||
|
|
88
|
+
return (jsxRuntime.jsx("input", { className: clsx(className, 'input', type === 'number' && 'input_type_number', (textSizeClass || textColorClass || weightClass) && 'text', caretClass, !isDisabled ? fillClass : fillDisabledClass, shapeClass ||
|
|
91
89
|
((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.shape) &&
|
|
92
90
|
"input_shape_".concat(appearanceConfig.shape).replace(/([A-Z])/g, '-$1').toLowerCase()), textSizeClass ||
|
|
93
91
|
((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textSize) &&
|
|
@@ -127,7 +125,9 @@ var Input = React.forwardRef(function Input(props, ref) {
|
|
|
127
125
|
"text-color_".concat(stateConfig.textColor).replace(/([A-Z])/g, '-$1').toLowerCase())
|
|
128
126
|
: textColorDisabledClass ||
|
|
129
127
|
((stateConfig === null || stateConfig === void 0 ? void 0 : stateConfig.textColor) &&
|
|
130
|
-
"text-color_".concat(stateConfig.textColor).replace(/([A-Z])/g, '-$1').toLowerCase())),
|
|
128
|
+
"text-color_".concat(stateConfig.textColor).replace(/([A-Z])/g, '-$1').toLowerCase())), ref: ref, autocomplete: autocomplete, "data-test-id": dataTestId || (name ? "".concat(name, "Input") : 'input'), disabled: isDisabled, id: String(id),
|
|
129
|
+
// @ts-ignore
|
|
130
|
+
index: index, placeholder: placeholder, type: type, value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown }));
|
|
131
131
|
});
|
|
132
132
|
Input.defaultProps = {
|
|
133
133
|
size: 'm',
|
|
@@ -15,7 +15,7 @@ var inputConfig = {
|
|
|
15
15
|
},
|
|
16
16
|
};
|
|
17
17
|
var Input = React.forwardRef(function Input(props, ref) {
|
|
18
|
-
var id = props.id, isDisabled = props.isDisabled, appearance = props.appearance, className = props.className, dataTestId = props.dataTestId, index = props.index, name = props.name, placeholder = props.placeholder, state = props.state, type = props.type, value = props.value, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus, onKeyDown = props.onKeyDown;
|
|
18
|
+
var id = props.id, isDisabled = props.isDisabled, appearance = props.appearance, autocomplete = props.autocomplete, className = props.className, dataTestId = props.dataTestId, index = props.index, name = props.name, placeholder = props.placeholder, state = props.state, type = props.type, value = props.value, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus, onKeyDown = props.onKeyDown;
|
|
19
19
|
var fillClass = useDeviceTargetClass(props, {
|
|
20
20
|
prefix: 'fill_',
|
|
21
21
|
propsKey: 'fill',
|
|
@@ -83,9 +83,7 @@ var Input = React.forwardRef(function Input(props, ref) {
|
|
|
83
83
|
// prettier-ignore
|
|
84
84
|
var appearanceConfig = (appearance && inputConfig.appearance && inputConfig.appearance[appearance]);
|
|
85
85
|
var stateConfig = state && inputConfig.state && inputConfig.state[state];
|
|
86
|
-
return (jsx("input", {
|
|
87
|
-
// @ts-ignore
|
|
88
|
-
index: index, placeholder: placeholder, ref: ref, type: type, value: value, className: clsx(className, 'input', type === 'number' && 'input_type_number', (textSizeClass || textColorClass || weightClass) && 'text', caretClass, !isDisabled ? fillClass : fillDisabledClass, shapeClass ||
|
|
86
|
+
return (jsx("input", { className: clsx(className, 'input', type === 'number' && 'input_type_number', (textSizeClass || textColorClass || weightClass) && 'text', caretClass, !isDisabled ? fillClass : fillDisabledClass, shapeClass ||
|
|
89
87
|
((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.shape) &&
|
|
90
88
|
"input_shape_".concat(appearanceConfig.shape).replace(/([A-Z])/g, '-$1').toLowerCase()), textSizeClass ||
|
|
91
89
|
((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textSize) &&
|
|
@@ -125,7 +123,9 @@ var Input = React.forwardRef(function Input(props, ref) {
|
|
|
125
123
|
"text-color_".concat(stateConfig.textColor).replace(/([A-Z])/g, '-$1').toLowerCase())
|
|
126
124
|
: textColorDisabledClass ||
|
|
127
125
|
((stateConfig === null || stateConfig === void 0 ? void 0 : stateConfig.textColor) &&
|
|
128
|
-
"text-color_".concat(stateConfig.textColor).replace(/([A-Z])/g, '-$1').toLowerCase())),
|
|
126
|
+
"text-color_".concat(stateConfig.textColor).replace(/([A-Z])/g, '-$1').toLowerCase())), ref: ref, autocomplete: autocomplete, "data-test-id": dataTestId || (name ? "".concat(name, "Input") : 'input'), disabled: isDisabled, id: String(id),
|
|
127
|
+
// @ts-ignore
|
|
128
|
+
index: index, placeholder: placeholder, type: type, value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown }));
|
|
129
129
|
});
|
|
130
130
|
Input.defaultProps = {
|
|
131
131
|
size: 'm',
|
|
@@ -75,7 +75,7 @@ var Choice = React.forwardRef(function Choice(props, ref) {
|
|
|
75
75
|
});
|
|
76
76
|
// prettier-ignore
|
|
77
77
|
var appearanceConfig = (appearance && choiceConfig.appearance && choiceConfig.appearance[appearance]);
|
|
78
|
-
return (jsxRuntime.jsx("div", {
|
|
78
|
+
return (jsxRuntime.jsx("div", { className: clsx(className, 'choice', shapeClass ||
|
|
79
79
|
((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.shape) &&
|
|
80
80
|
"choice_shape_".concat(appearanceConfig.shape).replace(/([A-Z])/g, '-$1').toLowerCase()), !isDisabled
|
|
81
81
|
? fillClass ||
|
|
@@ -85,12 +85,12 @@ var Choice = React.forwardRef(function Choice(props, ref) {
|
|
|
85
85
|
((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.borderColor) &&
|
|
86
86
|
"border-color_".concat(appearanceConfig.borderColor)
|
|
87
87
|
.replace(/([A-Z])/g, '-$1')
|
|
88
|
-
.toLowerCase()), borderWidthClass, borderTypeClass, set && "choice_set_".concat(set), size && "choice_size_".concat(size), type && "choice_type_".concat(type)), children: isLoading ? (jsxRuntime.jsx(Loader.Loader, { width: "fill", height: "fill", fill: "surfacePrimary", itemFill: "surfaceItemAccent", set: "simple" })) : (jsxRuntime.jsx("div", { className: "choice__wrapper", children: options.map(function (item) { return (jsxRuntime.jsxs("div", {
|
|
88
|
+
.toLowerCase()), borderWidthClass, borderTypeClass, set && "choice_set_".concat(set), size && "choice_size_".concat(size), type && "choice_type_".concat(type)), ref: controlRef, children: isLoading ? (jsxRuntime.jsx(Loader.Loader, { width: "fill", height: "fill", fill: "surfacePrimary", itemFill: "surfaceItemAccent", set: "simple" })) : (jsxRuntime.jsx("div", { className: "choice__wrapper", children: options.map(function (item) { return (jsxRuntime.jsxs("div", { className: clsx('choice__item', !isDisabled &&
|
|
89
89
|
(fillHoverClass ||
|
|
90
90
|
((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fillHover) &&
|
|
91
91
|
"fill_active_".concat(appearanceConfig.fillHover)
|
|
92
92
|
.replace(/([A-Z])/g, '-$1')
|
|
93
|
-
.toLowerCase())), item.value !== active.value && isDisabled && 'choice__item_state_disabled', item.value === active.value
|
|
93
|
+
.toLowerCase())), item.value !== (active === null || active === void 0 ? void 0 : active.value) && isDisabled && 'choice__item_state_disabled', item.value === (active === null || active === void 0 ? void 0 : active.value)
|
|
94
94
|
? !isDisabled
|
|
95
95
|
? fillActiveClass ||
|
|
96
96
|
((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fillActive) &&
|
|
@@ -100,13 +100,13 @@ var Choice = React.forwardRef(function Choice(props, ref) {
|
|
|
100
100
|
: fillActiveDisabledClass
|
|
101
101
|
: !isDisabled
|
|
102
102
|
? fillClass
|
|
103
|
-
: fillDisabledClass, item.value === active.value && isDisabled && 'choice__item_active_state_disabled', item.value === active.value && 'choice__item_active'), children: [jsxRuntime.jsx("input", { checked: item.value === active
|
|
103
|
+
: fillDisabledClass, item.value === (active === null || active === void 0 ? void 0 : active.value) && isDisabled && 'choice__item_active_state_disabled', item.value === (active === null || active === void 0 ? void 0 : active.value) && 'choice__item_active'), ref: optionsRefs.get(item.value), children: [jsxRuntime.jsx("input", { className: "choice__item-radio", name: name, checked: item.value === (active === null || active === void 0 ? void 0 : active.value), disabled: isDisabled, id: "".concat(name, "-").concat(item.value), type: isCheckbox ? 'checkbox' : 'radio', 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: [before, item.label && (jsxRuntime.jsx(Text.Text, { size: labelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextSize), textWeight: labelTextWeight, textColor: item.value === (active === null || active === void 0 ? void 0 : active.value)
|
|
104
104
|
? !isDisabled
|
|
105
105
|
? labelTextActiveColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextActiveColor)
|
|
106
106
|
: labelTextActiveColorDisabled
|
|
107
107
|
: !isDisabled
|
|
108
108
|
? labelTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextColor)
|
|
109
|
-
: labelTextColorDisabled, children: item.label })), (icon || activeIcon) && (jsxRuntime.jsx(Icon.Icon, {
|
|
109
|
+
: labelTextColorDisabled, children: item.label })), (icon || activeIcon) && (jsxRuntime.jsx(Icon.Icon, { className: "choice__item-icon", iconFillDisabled: isDisabled ? iconFillDisabled : undefined, iconSize: iconSize, SvgImage: item.value === (active === null || active === void 0 ? void 0 : active.value) ? activeIcon : icon, iconFill: item.value === (active === null || active === void 0 ? void 0 : active.value)
|
|
110
110
|
? activeIconItemFill || item.activeIconItemFill
|
|
111
111
|
: iconItemFill || item.iconItemFill })), after] })] }, item.value)); }) })) }));
|
|
112
112
|
});
|
|
@@ -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('../../Input-
|
|
8
|
+
var Input = require('../../Input-BSpFMsrf.js');
|
|
9
9
|
require('../hooks/useDeviceTargetClass.js');
|
|
10
10
|
require('lodash/castArray');
|
|
11
11
|
require('lodash/camelCase');
|
|
@@ -8,7 +8,7 @@ var DatePicker = require('react-datepicker');
|
|
|
8
8
|
var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
|
|
9
9
|
var Button = require('../../Button-D4y0v6YL.js');
|
|
10
10
|
var Icon = require('../../Icon-Cq4hPF2D.js');
|
|
11
|
-
var Input = require('../../Input-
|
|
11
|
+
var Input = require('../../Input-BSpFMsrf.js');
|
|
12
12
|
var Label = require('../../Label-CpSzGRtr.js');
|
|
13
13
|
var Text = require('../../Text-_YhyTsQ1.js');
|
|
14
14
|
require('lodash/castArray');
|
|
@@ -1071,7 +1071,7 @@ const ru = {
|
|
|
1071
1071
|
};
|
|
1072
1072
|
|
|
1073
1073
|
function DatePickerInput(props) {
|
|
1074
|
-
var className = props.className,
|
|
1074
|
+
var className = props.className, clearIcon = props.clearIcon, clearIconFill = props.clearIconFill, clearIconFillHover = props.clearIconFillHover, clearIconFillSize = props.clearIconFillSize, clearIconItemFill = props.clearIconItemFill, clearIconItemFillHover = props.clearIconItemFillHover, clearIconShape = props.clearIconShape, clearIconSize = props.clearIconSize, clearIconSrc = props.clearIconSrc, clearLabel = props.clearLabel, clearLabelTextColor = props.clearLabelTextColor, clearLabelTextColorHover = props.clearLabelTextColorHover, clearLabelTextSize = props.clearLabelTextSize, datePickerProps = props.datePickerProps, endValue = props.endValue, inputProps = props.inputProps, labelTextSize = props.labelTextSize, value = props.value, onChange = props.onChange;
|
|
1075
1075
|
var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
|
|
1076
1076
|
prefix: 'width_',
|
|
1077
1077
|
propsKey: 'width',
|
|
@@ -1139,7 +1139,7 @@ function DatePickerInput(props) {
|
|
|
1139
1139
|
React.useEffect(function () {
|
|
1140
1140
|
setEndDate(end);
|
|
1141
1141
|
}, [end]);
|
|
1142
|
-
return (jsxRuntime.jsx("div", { className: clsx(className, 'datepicker', (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.monthsShown) && 'datepicker_type_multiple-months', (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.customTimeInput) && 'datepicker_type_button', widthClass), children: jsxRuntime.jsx(DatePicker, tslib_es6.__assign({ ref: datepickerRef, endDate: (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.selectsRange) ? endDate : undefined, locale: ru, minDate: (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.disablePastDays) ? new Date() : undefined, renderCustomHeader: renderCustomHeader, renderDayContents: renderDayContents, selected: startDate, startDate: startDate, customInput: jsxRuntime.jsx(DatePickerCustomInput, { labelTextSize: labelTextSize, clearIcon: clearIcon, clearIconFill: clearIconFill, clearIconFillHover: clearIconFillHover, clearIconFillSize: clearIconFillSize, clearIconItemFill: clearIconItemFill, clearIconItemFillHover: clearIconItemFillHover, clearIconShape: clearIconShape, clearIconSize: clearIconSize, clearIconSrc: clearIconSrc, clearLabel: clearLabel, clearLabelTextColor: clearLabelTextColor, clearLabelTextColorHover: clearLabelTextColorHover, clearLabelTextSize: clearLabelTextSize, datepickerRef: datepickerRef, inputIcon: datePickerProps.inputIcon, inputIconFill: datePickerProps.inputIconFill, inputIconFillHover: datePickerProps.inputIconFillHover, inputIconFillSize: datePickerProps.inputIconFillSize, inputIconItemFill: datePickerProps.inputIconItemFill, inputIconShape: datePickerProps.inputIconShape, inputIconSize: datePickerProps.inputIconSize, inputIconSrc: datePickerProps.inputIconSrc, inputProps: inputProps, isClearable: datePickerProps.isClearable }), onChange: (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.selectsRange) ? handleChange : onChange }, datePickerProps, {
|
|
1142
|
+
return (jsxRuntime.jsx("div", { className: clsx(className, 'datepicker', (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.monthsShown) && 'datepicker_type_multiple-months', (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.customTimeInput) && 'datepicker_type_button', widthClass), children: jsxRuntime.jsx(DatePicker, tslib_es6.__assign({ ref: datepickerRef, endDate: (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.selectsRange) ? endDate : undefined, locale: ru, minDate: (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.disablePastDays) ? new Date() : undefined, renderCustomHeader: renderCustomHeader, renderDayContents: renderDayContents, selected: startDate, startDate: startDate, customInput: jsxRuntime.jsx(DatePickerCustomInput, { labelTextSize: labelTextSize, clearIcon: clearIcon, clearIconFill: clearIconFill, clearIconFillHover: clearIconFillHover, clearIconFillSize: clearIconFillSize, clearIconItemFill: clearIconItemFill, clearIconItemFillHover: clearIconItemFillHover, clearIconShape: clearIconShape, clearIconSize: clearIconSize, clearIconSrc: clearIconSrc, clearLabel: clearLabel, clearLabelTextColor: clearLabelTextColor, clearLabelTextColorHover: clearLabelTextColorHover, clearLabelTextSize: clearLabelTextSize, datepickerRef: datepickerRef, inputIcon: datePickerProps.inputIcon, inputIconFill: datePickerProps.inputIconFill, inputIconFillHover: datePickerProps.inputIconFillHover, inputIconFillSize: datePickerProps.inputIconFillSize, inputIconItemFill: datePickerProps.inputIconItemFill, inputIconShape: datePickerProps.inputIconShape, inputIconSize: datePickerProps.inputIconSize, inputIconSrc: datePickerProps.inputIconSrc, inputProps: inputProps, isClearable: datePickerProps.isClearable }), popperClassName: (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.popper) && "react-datepicker-popper-".concat(datePickerProps.popper), onChange: (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.selectsRange) ? handleChange : onChange }, datePickerProps, {
|
|
1143
1143
|
// Important for use custom clear button
|
|
1144
1144
|
isClearable: false })) }));
|
|
1145
1145
|
}
|
|
@@ -1152,22 +1152,22 @@ var DatePickerCustomInput = React.forwardRef(function (props, ref) {
|
|
|
1152
1152
|
}
|
|
1153
1153
|
return '';
|
|
1154
1154
|
}, [value]);
|
|
1155
|
-
return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(Input.Input, tslib_es6.__assign({}, props, inputProps, { ref: ref, value: multipleValue })), inputIcon && jsxRuntime.jsx(DatePickerInputIcon, tslib_es6.__assign({}, props)), isClearable && jsxRuntime.jsx(DatePickerClearButton, tslib_es6.__assign({}, props))] }));
|
|
1155
|
+
return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(Input.Input, tslib_es6.__assign({}, props, inputProps, { ref: ref, autocomplete: "off", value: multipleValue })), inputIcon && jsxRuntime.jsx(DatePickerInputIcon, tslib_es6.__assign({}, props)), isClearable && jsxRuntime.jsx(DatePickerClearButton, tslib_es6.__assign({}, props))] }));
|
|
1156
1156
|
});
|
|
1157
1157
|
DatePickerCustomInput.displayName = 'DatePickerCustomInput';
|
|
1158
1158
|
function DatePickerClearButton(props) {
|
|
1159
|
-
var
|
|
1159
|
+
var clearIcon = props.clearIcon, clearIconFill = props.clearIconFill, clearIconFillHover = props.clearIconFillHover, clearIconFillSize = props.clearIconFillSize, clearIconItemFill = props.clearIconItemFill, clearIconItemFillHover = props.clearIconItemFillHover, clearIconShape = props.clearIconShape, clearIconSize = props.clearIconSize, clearIconSrc = props.clearIconSrc, clearLabel = props.clearLabel, clearLabelTextColor = props.clearLabelTextColor, clearLabelTextColorHover = props.clearLabelTextColorHover, clearLabelTextSize = props.clearLabelTextSize, datepickerRef = props.datepickerRef;
|
|
1160
1160
|
var onClick = React.useCallback(function (event) {
|
|
1161
1161
|
var _a, _b;
|
|
1162
1162
|
(_a = datepickerRef === null || datepickerRef === void 0 ? void 0 : datepickerRef.current) === null || _a === void 0 ? void 0 : _a.onClearClick(event);
|
|
1163
1163
|
(_b = datepickerRef === null || datepickerRef === void 0 ? void 0 : datepickerRef.current) === null || _b === void 0 ? void 0 : _b.handleFocus(event);
|
|
1164
1164
|
}, []);
|
|
1165
|
-
return (jsxRuntime.jsxs(React.Fragment, { children: [clearLabel && (jsxRuntime.jsx(Label.Label, { className: clsx('react-datepicker__clear-label', 'cursor_type_pointer'), label: clearLabel, labelTextColor: clearLabelTextColor,
|
|
1165
|
+
return (jsxRuntime.jsxs(React.Fragment, { children: [clearLabel && (jsxRuntime.jsx(Label.Label, { className: clsx('react-datepicker__clear-label', 'cursor_type_pointer'), label: clearLabel, labelTextColor: clearLabelTextColor, labelTextSize: clearLabelTextSize, labelTextColorHover: clearLabelTextColorHover, onClick: onClick })), (clearIcon || clearIconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: clsx('react-datepicker__clear-icon', 'cursor_type_pointer'), fill: clearIconFill, fillHover: clearIconFillHover, fillSize: clearIconFillSize, iconFill: clearIconItemFill, iconFillHover: clearIconItemFillHover, imageSrc: clearIconSrc, shape: clearIconShape, size: clearIconSize, SvgImage: clearIcon, onClick: onClick }))] }));
|
|
1166
1166
|
}
|
|
1167
1167
|
DatePickerClearButton.displayName = 'DatePickerClearButton';
|
|
1168
1168
|
function DatePickerInputIcon(props) {
|
|
1169
|
-
var inputIconFill = props.inputIconFill, inputIconFillHover = props.inputIconFillHover, inputIconFillSize = props.inputIconFillSize,
|
|
1170
|
-
return (jsxRuntime.jsx(Icon.Icon, { className: clsx('react-datepicker__input-icon', 'cursor_type_pointer'), fill: inputIconFill, fillHover: inputIconFillHover, fillSize: inputIconFillSize, iconFill: inputIconItemFill, imageSrc: inputIconSrc, shape: inputIconShape, size: inputIconSize, onClick: function () { return onClick && onClick(); }
|
|
1169
|
+
var inputIcon = props.inputIcon, inputIconFill = props.inputIconFill, inputIconFillHover = props.inputIconFillHover, inputIconFillSize = props.inputIconFillSize, inputIconItemFill = props.inputIconItemFill, inputIconShape = props.inputIconShape, inputIconSize = props.inputIconSize, inputIconSrc = props.inputIconSrc, onClick = props.onClick;
|
|
1170
|
+
return (jsxRuntime.jsx(Icon.Icon, { className: clsx('react-datepicker__input-icon', 'cursor_type_pointer'), fill: inputIconFill, fillHover: inputIconFillHover, fillSize: inputIconFillSize, iconFill: inputIconItemFill, imageSrc: inputIconSrc, shape: inputIconShape, size: inputIconSize, SvgImage: inputIcon, onClick: function () { return onClick && onClick(); } }));
|
|
1171
1171
|
}
|
|
1172
1172
|
DatePickerInputIcon.displayName = 'DatePickerInputIcon';
|
|
1173
1173
|
|
|
@@ -73,7 +73,7 @@ var Choice = React.forwardRef(function Choice(props, ref) {
|
|
|
73
73
|
});
|
|
74
74
|
// prettier-ignore
|
|
75
75
|
var appearanceConfig = (appearance && choiceConfig.appearance && choiceConfig.appearance[appearance]);
|
|
76
|
-
return (jsx("div", {
|
|
76
|
+
return (jsx("div", { className: clsx(className, 'choice', shapeClass ||
|
|
77
77
|
((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.shape) &&
|
|
78
78
|
"choice_shape_".concat(appearanceConfig.shape).replace(/([A-Z])/g, '-$1').toLowerCase()), !isDisabled
|
|
79
79
|
? fillClass ||
|
|
@@ -83,12 +83,12 @@ var Choice = React.forwardRef(function Choice(props, ref) {
|
|
|
83
83
|
((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.borderColor) &&
|
|
84
84
|
"border-color_".concat(appearanceConfig.borderColor)
|
|
85
85
|
.replace(/([A-Z])/g, '-$1')
|
|
86
|
-
.toLowerCase()), borderWidthClass, borderTypeClass, set && "choice_set_".concat(set), size && "choice_size_".concat(size), type && "choice_type_".concat(type)), children: isLoading ? (jsx(Loader, { width: "fill", height: "fill", fill: "surfacePrimary", itemFill: "surfaceItemAccent", set: "simple" })) : (jsx("div", { className: "choice__wrapper", children: options.map(function (item) { return (jsxs("div", {
|
|
86
|
+
.toLowerCase()), borderWidthClass, borderTypeClass, set && "choice_set_".concat(set), size && "choice_size_".concat(size), type && "choice_type_".concat(type)), ref: controlRef, children: isLoading ? (jsx(Loader, { width: "fill", height: "fill", fill: "surfacePrimary", itemFill: "surfaceItemAccent", set: "simple" })) : (jsx("div", { className: "choice__wrapper", children: options.map(function (item) { return (jsxs("div", { className: clsx('choice__item', !isDisabled &&
|
|
87
87
|
(fillHoverClass ||
|
|
88
88
|
((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fillHover) &&
|
|
89
89
|
"fill_active_".concat(appearanceConfig.fillHover)
|
|
90
90
|
.replace(/([A-Z])/g, '-$1')
|
|
91
|
-
.toLowerCase())), item.value !== active.value && isDisabled && 'choice__item_state_disabled', item.value === active.value
|
|
91
|
+
.toLowerCase())), item.value !== (active === null || active === void 0 ? void 0 : active.value) && isDisabled && 'choice__item_state_disabled', item.value === (active === null || active === void 0 ? void 0 : active.value)
|
|
92
92
|
? !isDisabled
|
|
93
93
|
? fillActiveClass ||
|
|
94
94
|
((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fillActive) &&
|
|
@@ -98,13 +98,13 @@ var Choice = React.forwardRef(function Choice(props, ref) {
|
|
|
98
98
|
: fillActiveDisabledClass
|
|
99
99
|
: !isDisabled
|
|
100
100
|
? fillClass
|
|
101
|
-
: fillDisabledClass, item.value === active.value && isDisabled && 'choice__item_active_state_disabled', item.value === active.value && 'choice__item_active'), children: [jsx("input", { checked: item.value === active
|
|
101
|
+
: fillDisabledClass, item.value === (active === null || active === void 0 ? void 0 : active.value) && isDisabled && 'choice__item_active_state_disabled', item.value === (active === null || active === void 0 ? void 0 : active.value) && 'choice__item_active'), ref: optionsRefs.get(item.value), children: [jsx("input", { className: "choice__item-radio", name: name, checked: item.value === (active === null || active === void 0 ? void 0 : active.value), disabled: isDisabled, id: "".concat(name, "-").concat(item.value), type: isCheckbox ? 'checkbox' : 'radio', 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: [before, item.label && (jsx(Text, { size: labelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextSize), textWeight: labelTextWeight, textColor: item.value === (active === null || active === void 0 ? void 0 : active.value)
|
|
102
102
|
? !isDisabled
|
|
103
103
|
? labelTextActiveColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextActiveColor)
|
|
104
104
|
: labelTextActiveColorDisabled
|
|
105
105
|
: !isDisabled
|
|
106
106
|
? labelTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextColor)
|
|
107
|
-
: labelTextColorDisabled, children: item.label })), (icon || activeIcon) && (jsx(Icon, {
|
|
107
|
+
: labelTextColorDisabled, children: item.label })), (icon || activeIcon) && (jsx(Icon, { className: "choice__item-icon", iconFillDisabled: isDisabled ? iconFillDisabled : undefined, iconSize: iconSize, SvgImage: item.value === (active === null || active === void 0 ? void 0 : active.value) ? activeIcon : icon, iconFill: item.value === (active === null || active === void 0 ? void 0 : active.value)
|
|
108
108
|
? activeIconItemFill || item.activeIconItemFill
|
|
109
109
|
: iconItemFill || item.iconItemFill })), after] })] }, item.value)); }) })) }));
|
|
110
110
|
});
|
|
@@ -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 '../Input-
|
|
6
|
+
import { I as Input } from '../Input-UkM-ag48.js';
|
|
7
7
|
import '../hooks/useDeviceTargetClass.js';
|
|
8
8
|
import 'lodash/castArray';
|
|
9
9
|
import 'lodash/camelCase';
|
|
@@ -6,7 +6,7 @@ import DatePicker from 'react-datepicker';
|
|
|
6
6
|
import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
|
|
7
7
|
import { B as Button } from '../Button-BJWuO5uR.js';
|
|
8
8
|
import { I as Icon } from '../Icon-fTLfvlsK.js';
|
|
9
|
-
import { I as Input } from '../Input-
|
|
9
|
+
import { I as Input } from '../Input-UkM-ag48.js';
|
|
10
10
|
import { L as Label } from '../Label-BA_CnRBq.js';
|
|
11
11
|
import { T as Text } from '../Text-CG3xPG27.js';
|
|
12
12
|
import 'lodash/castArray';
|
|
@@ -1069,7 +1069,7 @@ const ru = {
|
|
|
1069
1069
|
};
|
|
1070
1070
|
|
|
1071
1071
|
function DatePickerInput(props) {
|
|
1072
|
-
var className = props.className,
|
|
1072
|
+
var className = props.className, clearIcon = props.clearIcon, clearIconFill = props.clearIconFill, clearIconFillHover = props.clearIconFillHover, clearIconFillSize = props.clearIconFillSize, clearIconItemFill = props.clearIconItemFill, clearIconItemFillHover = props.clearIconItemFillHover, clearIconShape = props.clearIconShape, clearIconSize = props.clearIconSize, clearIconSrc = props.clearIconSrc, clearLabel = props.clearLabel, clearLabelTextColor = props.clearLabelTextColor, clearLabelTextColorHover = props.clearLabelTextColorHover, clearLabelTextSize = props.clearLabelTextSize, datePickerProps = props.datePickerProps, endValue = props.endValue, inputProps = props.inputProps, labelTextSize = props.labelTextSize, value = props.value, onChange = props.onChange;
|
|
1073
1073
|
var widthClass = useDeviceTargetClass(props, {
|
|
1074
1074
|
prefix: 'width_',
|
|
1075
1075
|
propsKey: 'width',
|
|
@@ -1137,7 +1137,7 @@ function DatePickerInput(props) {
|
|
|
1137
1137
|
useEffect(function () {
|
|
1138
1138
|
setEndDate(end);
|
|
1139
1139
|
}, [end]);
|
|
1140
|
-
return (jsx("div", { className: clsx(className, 'datepicker', (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.monthsShown) && 'datepicker_type_multiple-months', (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.customTimeInput) && 'datepicker_type_button', widthClass), children: jsx(DatePicker, __assign({ ref: datepickerRef, endDate: (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.selectsRange) ? endDate : undefined, locale: ru, minDate: (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.disablePastDays) ? new Date() : undefined, renderCustomHeader: renderCustomHeader, renderDayContents: renderDayContents, selected: startDate, startDate: startDate, customInput: jsx(DatePickerCustomInput, { labelTextSize: labelTextSize, clearIcon: clearIcon, clearIconFill: clearIconFill, clearIconFillHover: clearIconFillHover, clearIconFillSize: clearIconFillSize, clearIconItemFill: clearIconItemFill, clearIconItemFillHover: clearIconItemFillHover, clearIconShape: clearIconShape, clearIconSize: clearIconSize, clearIconSrc: clearIconSrc, clearLabel: clearLabel, clearLabelTextColor: clearLabelTextColor, clearLabelTextColorHover: clearLabelTextColorHover, clearLabelTextSize: clearLabelTextSize, datepickerRef: datepickerRef, inputIcon: datePickerProps.inputIcon, inputIconFill: datePickerProps.inputIconFill, inputIconFillHover: datePickerProps.inputIconFillHover, inputIconFillSize: datePickerProps.inputIconFillSize, inputIconItemFill: datePickerProps.inputIconItemFill, inputIconShape: datePickerProps.inputIconShape, inputIconSize: datePickerProps.inputIconSize, inputIconSrc: datePickerProps.inputIconSrc, inputProps: inputProps, isClearable: datePickerProps.isClearable }), onChange: (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.selectsRange) ? handleChange : onChange }, datePickerProps, {
|
|
1140
|
+
return (jsx("div", { className: clsx(className, 'datepicker', (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.monthsShown) && 'datepicker_type_multiple-months', (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.customTimeInput) && 'datepicker_type_button', widthClass), children: jsx(DatePicker, __assign({ ref: datepickerRef, endDate: (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.selectsRange) ? endDate : undefined, locale: ru, minDate: (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.disablePastDays) ? new Date() : undefined, renderCustomHeader: renderCustomHeader, renderDayContents: renderDayContents, selected: startDate, startDate: startDate, customInput: jsx(DatePickerCustomInput, { labelTextSize: labelTextSize, clearIcon: clearIcon, clearIconFill: clearIconFill, clearIconFillHover: clearIconFillHover, clearIconFillSize: clearIconFillSize, clearIconItemFill: clearIconItemFill, clearIconItemFillHover: clearIconItemFillHover, clearIconShape: clearIconShape, clearIconSize: clearIconSize, clearIconSrc: clearIconSrc, clearLabel: clearLabel, clearLabelTextColor: clearLabelTextColor, clearLabelTextColorHover: clearLabelTextColorHover, clearLabelTextSize: clearLabelTextSize, datepickerRef: datepickerRef, inputIcon: datePickerProps.inputIcon, inputIconFill: datePickerProps.inputIconFill, inputIconFillHover: datePickerProps.inputIconFillHover, inputIconFillSize: datePickerProps.inputIconFillSize, inputIconItemFill: datePickerProps.inputIconItemFill, inputIconShape: datePickerProps.inputIconShape, inputIconSize: datePickerProps.inputIconSize, inputIconSrc: datePickerProps.inputIconSrc, inputProps: inputProps, isClearable: datePickerProps.isClearable }), popperClassName: (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.popper) && "react-datepicker-popper-".concat(datePickerProps.popper), onChange: (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.selectsRange) ? handleChange : onChange }, datePickerProps, {
|
|
1141
1141
|
// Important for use custom clear button
|
|
1142
1142
|
isClearable: false })) }));
|
|
1143
1143
|
}
|
|
@@ -1150,22 +1150,22 @@ var DatePickerCustomInput = React.forwardRef(function (props, ref) {
|
|
|
1150
1150
|
}
|
|
1151
1151
|
return '';
|
|
1152
1152
|
}, [value]);
|
|
1153
|
-
return (jsxs(React.Fragment, { children: [jsx(Input, __assign({}, props, inputProps, { ref: ref, value: multipleValue })), inputIcon && jsx(DatePickerInputIcon, __assign({}, props)), isClearable && jsx(DatePickerClearButton, __assign({}, props))] }));
|
|
1153
|
+
return (jsxs(React.Fragment, { children: [jsx(Input, __assign({}, props, inputProps, { ref: ref, autocomplete: "off", value: multipleValue })), inputIcon && jsx(DatePickerInputIcon, __assign({}, props)), isClearable && jsx(DatePickerClearButton, __assign({}, props))] }));
|
|
1154
1154
|
});
|
|
1155
1155
|
DatePickerCustomInput.displayName = 'DatePickerCustomInput';
|
|
1156
1156
|
function DatePickerClearButton(props) {
|
|
1157
|
-
var
|
|
1157
|
+
var clearIcon = props.clearIcon, clearIconFill = props.clearIconFill, clearIconFillHover = props.clearIconFillHover, clearIconFillSize = props.clearIconFillSize, clearIconItemFill = props.clearIconItemFill, clearIconItemFillHover = props.clearIconItemFillHover, clearIconShape = props.clearIconShape, clearIconSize = props.clearIconSize, clearIconSrc = props.clearIconSrc, clearLabel = props.clearLabel, clearLabelTextColor = props.clearLabelTextColor, clearLabelTextColorHover = props.clearLabelTextColorHover, clearLabelTextSize = props.clearLabelTextSize, datepickerRef = props.datepickerRef;
|
|
1158
1158
|
var onClick = useCallback(function (event) {
|
|
1159
1159
|
var _a, _b;
|
|
1160
1160
|
(_a = datepickerRef === null || datepickerRef === void 0 ? void 0 : datepickerRef.current) === null || _a === void 0 ? void 0 : _a.onClearClick(event);
|
|
1161
1161
|
(_b = datepickerRef === null || datepickerRef === void 0 ? void 0 : datepickerRef.current) === null || _b === void 0 ? void 0 : _b.handleFocus(event);
|
|
1162
1162
|
}, []);
|
|
1163
|
-
return (jsxs(React.Fragment, { children: [clearLabel && (jsx(Label, { className: clsx('react-datepicker__clear-label', 'cursor_type_pointer'), label: clearLabel, labelTextColor: clearLabelTextColor,
|
|
1163
|
+
return (jsxs(React.Fragment, { children: [clearLabel && (jsx(Label, { className: clsx('react-datepicker__clear-label', 'cursor_type_pointer'), label: clearLabel, labelTextColor: clearLabelTextColor, labelTextSize: clearLabelTextSize, labelTextColorHover: clearLabelTextColorHover, onClick: onClick })), (clearIcon || clearIconSrc) && (jsx(Icon, { className: clsx('react-datepicker__clear-icon', 'cursor_type_pointer'), fill: clearIconFill, fillHover: clearIconFillHover, fillSize: clearIconFillSize, iconFill: clearIconItemFill, iconFillHover: clearIconItemFillHover, imageSrc: clearIconSrc, shape: clearIconShape, size: clearIconSize, SvgImage: clearIcon, onClick: onClick }))] }));
|
|
1164
1164
|
}
|
|
1165
1165
|
DatePickerClearButton.displayName = 'DatePickerClearButton';
|
|
1166
1166
|
function DatePickerInputIcon(props) {
|
|
1167
|
-
var inputIconFill = props.inputIconFill, inputIconFillHover = props.inputIconFillHover, inputIconFillSize = props.inputIconFillSize,
|
|
1168
|
-
return (jsx(Icon, { className: clsx('react-datepicker__input-icon', 'cursor_type_pointer'), fill: inputIconFill, fillHover: inputIconFillHover, fillSize: inputIconFillSize, iconFill: inputIconItemFill, imageSrc: inputIconSrc, shape: inputIconShape, size: inputIconSize, onClick: function () { return onClick && onClick(); }
|
|
1167
|
+
var inputIcon = props.inputIcon, inputIconFill = props.inputIconFill, inputIconFillHover = props.inputIconFillHover, inputIconFillSize = props.inputIconFillSize, inputIconItemFill = props.inputIconItemFill, inputIconShape = props.inputIconShape, inputIconSize = props.inputIconSize, inputIconSrc = props.inputIconSrc, onClick = props.onClick;
|
|
1168
|
+
return (jsx(Icon, { className: clsx('react-datepicker__input-icon', 'cursor_type_pointer'), fill: inputIconFill, fillHover: inputIconFillHover, fillSize: inputIconFillSize, iconFill: inputIconItemFill, imageSrc: inputIconSrc, shape: inputIconShape, size: inputIconSize, SvgImage: inputIcon, onClick: function () { return onClick && onClick(); } }));
|
|
1169
1169
|
}
|
|
1170
1170
|
DatePickerInputIcon.displayName = 'DatePickerInputIcon';
|
|
1171
1171
|
|
package/dist/components/Input.js
CHANGED
|
@@ -1,13 +1,10 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
2
|
import { DatePickerProps } from 'react-datepicker';
|
|
3
|
-
import {
|
|
3
|
+
import { iconFillSizePropsType, iconSizePropsType, tFillHoverProps, tFillProps, tItemColorProps, tShapeProps, tSizeProps, tTextColorHoverProps, tTextColorProps, tTextSizeProps, tTextWeightProps } from '../../types';
|
|
4
4
|
import { iInputProps } from '../Input/Input.interface';
|
|
5
5
|
interface IDatePickerProps extends DatePickerProps {
|
|
6
|
-
daySize?: tSizeProps;
|
|
7
|
-
monthsShown?: boolean;
|
|
8
|
-
isClearable?: boolean;
|
|
9
|
-
selectsRange?: boolean;
|
|
10
6
|
customTimeInput?: ReactNode;
|
|
7
|
+
daySize?: tSizeProps;
|
|
11
8
|
dayTextColor?: tTextColorProps;
|
|
12
9
|
dayTextShape?: tShapeProps;
|
|
13
10
|
dayTextSize?: tTextSizeProps;
|
|
@@ -28,13 +25,17 @@ interface IDatePickerProps extends DatePickerProps {
|
|
|
28
25
|
inputIconShape?: tShapeProps;
|
|
29
26
|
inputIconSize?: iconSizePropsType;
|
|
30
27
|
inputIconSrc?: string;
|
|
31
|
-
|
|
28
|
+
monthsShown?: boolean;
|
|
32
29
|
monthTextColor?: tTextColorProps;
|
|
33
30
|
monthTextSize?: tTextSizeProps;
|
|
34
31
|
monthTextWeight?: tTextWeightProps;
|
|
32
|
+
popper?: string;
|
|
33
|
+
selectsRange?: boolean;
|
|
35
34
|
yearTextColor?: tTextColorProps;
|
|
36
35
|
yearTextSize?: tTextSizeProps;
|
|
37
36
|
yearTextWeight?: tTextWeightProps;
|
|
37
|
+
isClearable?: boolean;
|
|
38
|
+
isStartDefaultNull?: boolean;
|
|
38
39
|
}
|
|
39
40
|
export interface IDatePickerInputProps {
|
|
40
41
|
className?: string;
|
|
@@ -82,9 +83,9 @@ export interface IDatePickerCustomInput {
|
|
|
82
83
|
inputIconSize?: iconSizePropsType;
|
|
83
84
|
inputIconSrc?: string;
|
|
84
85
|
inputProps?: iInputProps;
|
|
85
|
-
isClearable?: boolean;
|
|
86
86
|
labelTextSize?: tTextSizeProps;
|
|
87
87
|
value?: string;
|
|
88
|
+
isClearable?: boolean;
|
|
88
89
|
}
|
|
89
90
|
export interface IDatePickerInputIcon {
|
|
90
91
|
inputIcon?: any;
|