@itcase/ui 1.8.157 → 1.8.159
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_CccRZSjc.js → DatePicker_cjs_BtYlDJ7u.js} +4 -3
- package/dist/{DatePicker_es_54jl8guQ.js → DatePicker_es_D3lQ83Q6.js} +4 -3
- package/dist/{Input_cjs_DDi5JVAV.js → Input_cjs_IhuIPBIq.js} +2 -2
- package/dist/{Input_es_BnCXATnh.js → Input_es_CifTvE3z.js} +2 -2
- 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/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/styles/bundle.css +9711 -0
- package/dist/types/components/DatePicker/DatePicker.interface.d.ts +1 -0
- package/dist/types/components/Input/Input.interface.d.ts +3 -1
- package/package.json +1 -1
|
@@ -10,7 +10,7 @@ var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDe
|
|
|
10
10
|
var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
|
|
11
11
|
var Button = require('./Button_cjs_CGIzPuXo.js');
|
|
12
12
|
var Icon = require('./Icon_cjs_B5o0K55R.js');
|
|
13
|
-
var Input = require('./
|
|
13
|
+
var Input = require('./Input_cjs_IhuIPBIq.js');
|
|
14
14
|
var Label = require('./Label_cjs_DRIwteHh.js');
|
|
15
15
|
var Text = require('./Text_cjs_DaH5tVvz.js');
|
|
16
16
|
var _default = require('@itcase/icons/default');
|
|
@@ -92,6 +92,7 @@ const datePickerConfig = {
|
|
|
92
92
|
datePickerConfig.appearance = appearanceConfig;
|
|
93
93
|
},
|
|
94
94
|
};
|
|
95
|
+
const INPUT_CLASSNAME = 'datepicker__input';
|
|
95
96
|
function DatePickerInput(props) {
|
|
96
97
|
const { className, datePickerProps = {}, endValue, inputProps = {}, value, onChange, } = props;
|
|
97
98
|
const { appearance, customTimeInput, disablePastDays, monthsShown, selectsRange, showWeekPicker, } = datePickerProps;
|
|
@@ -160,7 +161,7 @@ function DatePickerInput(props) {
|
|
|
160
161
|
yearTextWeight,
|
|
161
162
|
]);
|
|
162
163
|
const { styles: datePickerStyles } = useStyles.useStyles(props);
|
|
163
|
-
return (jsxRuntime.jsx("div", { className: clsx(className, 'datepicker', monthsShown && 'datepicker_multiple-months', customTimeInput && 'datepicker_button', sizeClass && `datepicker_size_${sizeClass}`, widthClass && `datepicker_width_${widthClass}`), style: datePickerStyles, children: jsxRuntime.jsx(DatePicker, { ref: datepickerRef, minDate: disablePastDays ? new Date() : undefined, customInput: jsxRuntime.jsx(DatePickerCustomInput, { datepickerRef: datepickerRef, inputProps: inputProps, isClearable: isClearable }), endDate: selectsRange ? dateEnd : undefined, locale: locale.ru, popperClassName: popper && `react-datepicker-popper-${popper}`, popperPlacement: popperPlacement, renderCustomHeader: renderCustomHeader, renderDayContents: renderDayContents, selected: dateStart, startDate: dateStart, onChange: handleChange, ...datePickerProps,
|
|
164
|
+
return (jsxRuntime.jsx("div", { className: clsx(className, 'datepicker', monthsShown && 'datepicker_multiple-months', customTimeInput && 'datepicker_button', sizeClass && `datepicker_size_${sizeClass}`, widthClass && `datepicker_width_${widthClass}`), style: datePickerStyles, children: jsxRuntime.jsx(DatePicker, { ref: datepickerRef, minDate: disablePastDays ? new Date() : undefined, customInput: jsxRuntime.jsx(DatePickerCustomInput, { datepickerRef: datepickerRef, inputProps: inputProps, isClearable: isClearable }), endDate: selectsRange ? dateEnd : undefined, locale: locale.ru, outsideClickIgnoreClass: INPUT_CLASSNAME, popperClassName: popper && `react-datepicker-popper-${popper}`, popperPlacement: popperPlacement, preventOpenOnFocus: true, renderCustomHeader: renderCustomHeader, renderDayContents: renderDayContents, selected: dateStart, startDate: dateStart, onChange: handleChange, ...datePickerProps,
|
|
164
165
|
// Important for use custom clear button
|
|
165
166
|
isClearable: false }) }));
|
|
166
167
|
}
|
|
@@ -173,7 +174,7 @@ const DatePickerCustomInput = React.forwardRef((props, ref) => {
|
|
|
173
174
|
}
|
|
174
175
|
return '';
|
|
175
176
|
}, [value]);
|
|
176
|
-
return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(Input.Input, { ...props, ...inputProps, className: clsx(inputProps.className,
|
|
177
|
+
return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(Input.Input, { ...props, ...inputProps, className: clsx(inputProps.className, INPUT_CLASSNAME), ref: ref, autocomplete: "off", value: multipleValue, isReadOnly: true }), inputIcon && jsxRuntime.jsx(DatePickerInputIcon, { ...inputProps }), isClearable && jsxRuntime.jsx(DatePickerClearButton, { ...inputProps })] }));
|
|
177
178
|
});
|
|
178
179
|
function DatePickerClearButton(props) {
|
|
179
180
|
const { clearIcon, clearIconFill, clearIconFillHover, clearIconFillSize, clearIconItemFill, clearIconItemFillHover, clearIconShape, clearIconSize, clearIconSrc, clearLabel, clearLabelTextColor, clearLabelTextColorHover, clearLabelTextSize, datepickerRef, } = props;
|
|
@@ -8,7 +8,7 @@ import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevi
|
|
|
8
8
|
import { useStyles } from './hooks/useStyles/useStyles.js';
|
|
9
9
|
import { B as Button } from './Button_es_CtAnUzZA.js';
|
|
10
10
|
import { I as Icon } from './Icon_es_BEhzKfrD.js';
|
|
11
|
-
import { I as Input } from './
|
|
11
|
+
import { I as Input } from './Input_es_CifTvE3z.js';
|
|
12
12
|
import { L as Label } from './Label_es_DYd2RwDK.js';
|
|
13
13
|
import { T as Text } from './Text_es_RDU9GLCV.js';
|
|
14
14
|
import { icons14 } from '@itcase/icons/default';
|
|
@@ -90,6 +90,7 @@ const datePickerConfig = {
|
|
|
90
90
|
datePickerConfig.appearance = appearanceConfig;
|
|
91
91
|
},
|
|
92
92
|
};
|
|
93
|
+
const INPUT_CLASSNAME = 'datepicker__input';
|
|
93
94
|
function DatePickerInput(props) {
|
|
94
95
|
const { className, datePickerProps = {}, endValue, inputProps = {}, value, onChange, } = props;
|
|
95
96
|
const { appearance, customTimeInput, disablePastDays, monthsShown, selectsRange, showWeekPicker, } = datePickerProps;
|
|
@@ -158,7 +159,7 @@ function DatePickerInput(props) {
|
|
|
158
159
|
yearTextWeight,
|
|
159
160
|
]);
|
|
160
161
|
const { styles: datePickerStyles } = useStyles(props);
|
|
161
|
-
return (jsx("div", { className: clsx(className, 'datepicker', monthsShown && 'datepicker_multiple-months', customTimeInput && 'datepicker_button', sizeClass && `datepicker_size_${sizeClass}`, widthClass && `datepicker_width_${widthClass}`), style: datePickerStyles, children: jsx(DatePicker, { ref: datepickerRef, minDate: disablePastDays ? new Date() : undefined, customInput: jsx(DatePickerCustomInput, { datepickerRef: datepickerRef, inputProps: inputProps, isClearable: isClearable }), endDate: selectsRange ? dateEnd : undefined, locale: ru, popperClassName: popper && `react-datepicker-popper-${popper}`, popperPlacement: popperPlacement, renderCustomHeader: renderCustomHeader, renderDayContents: renderDayContents, selected: dateStart, startDate: dateStart, onChange: handleChange, ...datePickerProps,
|
|
162
|
+
return (jsx("div", { className: clsx(className, 'datepicker', monthsShown && 'datepicker_multiple-months', customTimeInput && 'datepicker_button', sizeClass && `datepicker_size_${sizeClass}`, widthClass && `datepicker_width_${widthClass}`), style: datePickerStyles, children: jsx(DatePicker, { ref: datepickerRef, minDate: disablePastDays ? new Date() : undefined, customInput: jsx(DatePickerCustomInput, { datepickerRef: datepickerRef, inputProps: inputProps, isClearable: isClearable }), endDate: selectsRange ? dateEnd : undefined, locale: ru, outsideClickIgnoreClass: INPUT_CLASSNAME, popperClassName: popper && `react-datepicker-popper-${popper}`, popperPlacement: popperPlacement, preventOpenOnFocus: true, renderCustomHeader: renderCustomHeader, renderDayContents: renderDayContents, selected: dateStart, startDate: dateStart, onChange: handleChange, ...datePickerProps,
|
|
162
163
|
// Important for use custom clear button
|
|
163
164
|
isClearable: false }) }));
|
|
164
165
|
}
|
|
@@ -171,7 +172,7 @@ const DatePickerCustomInput = React.forwardRef((props, ref) => {
|
|
|
171
172
|
}
|
|
172
173
|
return '';
|
|
173
174
|
}, [value]);
|
|
174
|
-
return (jsxs(React.Fragment, { children: [jsx(Input, { ...props, ...inputProps, className: clsx(inputProps.className,
|
|
175
|
+
return (jsxs(React.Fragment, { children: [jsx(Input, { ...props, ...inputProps, className: clsx(inputProps.className, INPUT_CLASSNAME), ref: ref, autocomplete: "off", value: multipleValue, isReadOnly: true }), inputIcon && jsx(DatePickerInputIcon, { ...inputProps }), isClearable && jsx(DatePickerClearButton, { ...inputProps })] }));
|
|
175
176
|
});
|
|
176
177
|
function DatePickerClearButton(props) {
|
|
177
178
|
const { clearIcon, clearIconFill, clearIconFillHover, clearIconFillSize, clearIconItemFill, clearIconItemFillHover, clearIconShape, clearIconSize, clearIconSrc, clearLabel, clearLabelTextColor, clearLabelTextColorHover, clearLabelTextSize, datepickerRef, } = props;
|
|
@@ -209,12 +209,12 @@ const inputConfig = {
|
|
|
209
209
|
},
|
|
210
210
|
};
|
|
211
211
|
const Input = React.forwardRef(function Input(props, ref) {
|
|
212
|
-
const { id, appearance, className, dataTestId, type = 'text', name, autocomplete, index, placeholder, value, isDisabled, onBlur, onChange, onFocus, onKeyDown, } = props;
|
|
212
|
+
const { id, appearance, className, dataTestId, type = 'text', name, autocomplete, index, placeholder, value, isDisabled, isReadOnly, onClick, onBlur, onChange, onFocus, onKeyDown, } = props;
|
|
213
213
|
const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, inputConfig, isDisabled);
|
|
214
214
|
const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
|
|
215
215
|
const { fillClass, fillHoverClass, borderColorClass, borderColorHoverClass, borderWidthClass, textColorClass, textSizeClass, textWeightClass, caretClass, placeholderTextColorClass, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
|
|
216
216
|
return (jsxRuntime.jsx("input", { id: String(id), 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 &&
|
|
217
|
-
`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,
|
|
217
|
+
`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-test-id": 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 }));
|
|
218
218
|
});
|
|
219
219
|
|
|
220
220
|
exports.Input = Input;
|
|
@@ -207,12 +207,12 @@ const inputConfig = {
|
|
|
207
207
|
},
|
|
208
208
|
};
|
|
209
209
|
const Input = React.forwardRef(function Input(props, ref) {
|
|
210
|
-
const { id, appearance, className, dataTestId, type = 'text', name, autocomplete, index, placeholder, value, isDisabled, onBlur, onChange, onFocus, onKeyDown, } = props;
|
|
210
|
+
const { id, appearance, className, dataTestId, type = 'text', name, autocomplete, index, placeholder, value, isDisabled, isReadOnly, onClick, onBlur, onChange, onFocus, onKeyDown, } = props;
|
|
211
211
|
const appearanceConfig = useAppearanceConfig(appearance, inputConfig, isDisabled);
|
|
212
212
|
const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
213
213
|
const { fillClass, fillHoverClass, borderColorClass, borderColorHoverClass, borderWidthClass, textColorClass, textSizeClass, textWeightClass, caretClass, placeholderTextColorClass, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
|
|
214
214
|
return (jsx("input", { id: String(id), 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 &&
|
|
215
|
-
`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,
|
|
215
|
+
`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-test-id": 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 }));
|
|
216
216
|
});
|
|
217
217
|
|
|
218
218
|
export { Input as I, inputAppearance as a, inputConfig as i };
|
|
@@ -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_IhuIPBIq.js');
|
|
8
8
|
require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
|
|
9
9
|
require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
10
10
|
require('lodash/camelCase');
|
|
@@ -5,7 +5,7 @@ var React = require('react');
|
|
|
5
5
|
var clsx = require('clsx');
|
|
6
6
|
var luxon = require('luxon');
|
|
7
7
|
var common = require('@itcase/common');
|
|
8
|
-
var DatePicker = require('../../
|
|
8
|
+
var DatePicker = require('../../DatePicker_cjs_BtYlDJ7u.js');
|
|
9
9
|
var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
|
|
10
10
|
var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
11
11
|
var ChipsGroup = require('../../ChipsGroup_cjs_DVizkQ4v.js');
|
|
@@ -31,7 +31,7 @@ require('../context/UrlAssetPrefix.js');
|
|
|
31
31
|
require('../../Link_cjs_qKXVfU8e.js');
|
|
32
32
|
require('../../Text_cjs_DaH5tVvz.js');
|
|
33
33
|
require('../../Loader_cjs_CRiUlTC3.js');
|
|
34
|
-
require('../../
|
|
34
|
+
require('../../Input_cjs_IhuIPBIq.js');
|
|
35
35
|
require('../../Label_cjs_DRIwteHh.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_BtYlDJ7u.js');
|
|
4
4
|
require('react/jsx-runtime');
|
|
5
5
|
require('react');
|
|
6
6
|
require('clsx');
|
|
@@ -30,7 +30,7 @@ require('../context/UrlAssetPrefix.js');
|
|
|
30
30
|
require('../../Link_cjs_qKXVfU8e.js');
|
|
31
31
|
require('../../Text_cjs_DaH5tVvz.js');
|
|
32
32
|
require('../../Loader_cjs_CRiUlTC3.js');
|
|
33
|
-
require('../../
|
|
33
|
+
require('../../Input_cjs_IhuIPBIq.js');
|
|
34
34
|
require('../../Label_cjs_DRIwteHh.js');
|
|
35
35
|
require('@itcase/icons/default');
|
|
36
36
|
|
|
@@ -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_CifTvE3z.js';
|
|
6
6
|
import '../hooks/useAppearanceConfig/useAppearanceConfig.js';
|
|
7
7
|
import '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
|
|
8
8
|
import 'lodash/camelCase';
|
|
@@ -3,7 +3,7 @@ import { useCallback } from 'react';
|
|
|
3
3
|
import clsx from 'clsx';
|
|
4
4
|
import { DateTime } from 'luxon';
|
|
5
5
|
import { DATE_PERIOD_INTERVALS } from '@itcase/common';
|
|
6
|
-
import { D as DatePickerInput } from '../
|
|
6
|
+
import { D as DatePickerInput } from '../DatePicker_es_D3lQ83Q6.js';
|
|
7
7
|
import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
|
|
8
8
|
import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
|
|
9
9
|
import { b as ChipsGroup, C as Chips } from '../ChipsGroup_es_D3eiXGyK.js';
|
|
@@ -29,7 +29,7 @@ import '../context/UrlAssetPrefix.js';
|
|
|
29
29
|
import '../Link_es_P2b6ya7P.js';
|
|
30
30
|
import '../Text_es_RDU9GLCV.js';
|
|
31
31
|
import '../Loader_es_Dq2-7sn2.js';
|
|
32
|
-
import '../
|
|
32
|
+
import '../Input_es_CifTvE3z.js';
|
|
33
33
|
import '../Label_es_DYd2RwDK.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_D3lQ83Q6.js';
|
|
2
2
|
import 'react/jsx-runtime';
|
|
3
3
|
import 'react';
|
|
4
4
|
import 'clsx';
|
|
@@ -28,6 +28,6 @@ import '../context/UrlAssetPrefix.js';
|
|
|
28
28
|
import '../Link_es_P2b6ya7P.js';
|
|
29
29
|
import '../Text_es_RDU9GLCV.js';
|
|
30
30
|
import '../Loader_es_Dq2-7sn2.js';
|
|
31
|
-
import '../
|
|
31
|
+
import '../Input_es_CifTvE3z.js';
|
|
32
32
|
import '../Label_es_DYd2RwDK.js';
|
|
33
33
|
import '@itcase/icons/default';
|
package/dist/components/Input.js
CHANGED