@itcase/ui 1.8.158 → 1.8.159

package/dist/{DatePicker_cjs_CccRZSjc.js → DatePicker_cjs_BtYlDJ7u.js}

@@ -10,7 +10,7 @@ var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDe
 var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
 var Button = require('./Button_cjs_CGIzPuXo.js');
 var Icon = require('./Icon_cjs_B5o0K55R.js');
-var Input = require('./Input_cjs_DDi5JVAV.js');
+var Input = require('./Input_cjs_IhuIPBIq.js');
 var Label = require('./Label_cjs_DRIwteHh.js');
 var Text = require('./Text_cjs_DaH5tVvz.js');
 var _default = require('@itcase/icons/default');
@@ -92,6 +92,7 @@ const datePickerConfig = {
         datePickerConfig.appearance = appearanceConfig;
     },
 };
+const INPUT_CLASSNAME = 'datepicker__input';
 function DatePickerInput(props) {
     const { className, datePickerProps = {}, endValue, inputProps = {}, value, onChange, } = props;
     const { appearance, customTimeInput, disablePastDays, monthsShown, selectsRange, showWeekPicker, } = datePickerProps;
@@ -160,7 +161,7 @@ function DatePickerInput(props) {
         yearTextWeight,
     ]);
     const { styles: datePickerStyles } = useStyles.useStyles(props);
-    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, 
+    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, 
             // Important for use custom clear button
             isClearable: false }) }));
 }
@@ -173,7 +174,7 @@ const DatePickerCustomInput = React.forwardRef((props, ref) => {
         }
         return '';
     }, [value]);
-    return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(Input.Input, { ...props, ...inputProps, className: clsx(inputProps.className, 'datepicker__input'), ref: ref, autocomplete: "off", value: multipleValue }), inputIcon && jsxRuntime.jsx(DatePickerInputIcon, { ...inputProps }), isClearable && jsxRuntime.jsx(DatePickerClearButton, { ...inputProps })] }));
+    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 })] }));
 });
 function DatePickerClearButton(props) {
     const { clearIcon, clearIconFill, clearIconFillHover, clearIconFillSize, clearIconItemFill, clearIconItemFillHover, clearIconShape, clearIconSize, clearIconSrc, clearLabel, clearLabelTextColor, clearLabelTextColorHover, clearLabelTextSize, datepickerRef, } = props;

package/dist/{DatePicker_es_54jl8guQ.js → DatePicker_es_D3lQ83Q6.js}

@@ -8,7 +8,7 @@ import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevi
 import { useStyles } from './hooks/useStyles/useStyles.js';
 import { B as Button } from './Button_es_CtAnUzZA.js';
 import { I as Icon } from './Icon_es_BEhzKfrD.js';
-import { I as Input } from './Input_es_BnCXATnh.js';
+import { I as Input } from './Input_es_CifTvE3z.js';
 import { L as Label } from './Label_es_DYd2RwDK.js';
 import { T as Text } from './Text_es_RDU9GLCV.js';
 import { icons14 } from '@itcase/icons/default';
@@ -90,6 +90,7 @@ const datePickerConfig = {
         datePickerConfig.appearance = appearanceConfig;
     },
 };
+const INPUT_CLASSNAME = 'datepicker__input';
 function DatePickerInput(props) {
     const { className, datePickerProps = {}, endValue, inputProps = {}, value, onChange, } = props;
     const { appearance, customTimeInput, disablePastDays, monthsShown, selectsRange, showWeekPicker, } = datePickerProps;
@@ -158,7 +159,7 @@ function DatePickerInput(props) {
         yearTextWeight,
     ]);
     const { styles: datePickerStyles } = useStyles(props);
-    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, 
+    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, 
             // Important for use custom clear button
             isClearable: false }) }));
 }
@@ -171,7 +172,7 @@ const DatePickerCustomInput = React.forwardRef((props, ref) => {
         }
         return '';
     }, [value]);
-    return (jsxs(React.Fragment, { children: [jsx(Input, { ...props, ...inputProps, className: clsx(inputProps.className, 'datepicker__input'), ref: ref, autocomplete: "off", value: multipleValue }), inputIcon && jsx(DatePickerInputIcon, { ...inputProps }), isClearable && jsx(DatePickerClearButton, { ...inputProps })] }));
+    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 })] }));
 });
 function DatePickerClearButton(props) {
     const { clearIcon, clearIconFill, clearIconFillHover, clearIconFillSize, clearIconItemFill, clearIconItemFillHover, clearIconShape, clearIconSize, clearIconSrc, clearLabel, clearLabelTextColor, clearLabelTextColorHover, clearLabelTextSize, datepickerRef, } = props;

package/dist/{Input_cjs_DDi5JVAV.js → Input_cjs_IhuIPBIq.js}

@@ -209,12 +209,12 @@ const inputConfig = {
     },
 };
 const Input = React.forwardRef(function Input(props, ref) {
-    const { id, appearance, className, dataTestId, type = 'text', name, autocomplete, index, placeholder, value, isDisabled, onBlur, onChange, onFocus, onKeyDown, } = props;
+    const { id, appearance, className, dataTestId, type = 'text', name, autocomplete, index, placeholder, value, isDisabled, isReadOnly, onClick, onBlur, onChange, onFocus, onKeyDown, } = props;
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, inputConfig, isDisabled);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
     const { fillClass, fillHoverClass, borderColorClass, borderColorHoverClass, borderWidthClass, textColorClass, textSizeClass, textWeightClass, caretClass, placeholderTextColorClass, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
     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 &&
-            `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, disabled: isDisabled, autoComplete: autocomplete, "data-test-id": dataTestId || (name ? `${name}Input` : 'input'), index: index, placeholder: placeholder, value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown }));
+            `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 }));
 });
 
 exports.Input = Input;

package/dist/{Input_es_BnCXATnh.js → Input_es_CifTvE3z.js}

@@ -207,12 +207,12 @@ const inputConfig = {
     },
 };
 const Input = React.forwardRef(function Input(props, ref) {
-    const { id, appearance, className, dataTestId, type = 'text', name, autocomplete, index, placeholder, value, isDisabled, onBlur, onChange, onFocus, onKeyDown, } = props;
+    const { id, appearance, className, dataTestId, type = 'text', name, autocomplete, index, placeholder, value, isDisabled, isReadOnly, onClick, onBlur, onChange, onFocus, onKeyDown, } = props;
     const appearanceConfig = useAppearanceConfig(appearance, inputConfig, isDisabled);
     const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
     const { fillClass, fillHoverClass, borderColorClass, borderColorHoverClass, borderWidthClass, textColorClass, textSizeClass, textWeightClass, caretClass, placeholderTextColorClass, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
     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 &&
-            `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, disabled: isDisabled, autoComplete: autocomplete, "data-test-id": dataTestId || (name ? `${name}Input` : 'input'), index: index, placeholder: placeholder, value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown }));
+            `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 }));
 });
 
 export { Input as I, inputAppearance as a, inputConfig as i };

package/dist/cjs/components/Dadata.js

@@ -4,7 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
 var reactDadata = require('react-dadata');
-var Input = require('../../Input_cjs_DDi5JVAV.js');
+var Input = require('../../Input_cjs_IhuIPBIq.js');
 require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 require('lodash/camelCase');

package/dist/cjs/components/DatePeriod.js

@@ -5,7 +5,7 @@ var React = require('react');
 var clsx = require('clsx');
 var luxon = require('luxon');
 var common = require('@itcase/common');
-var DatePicker = require('../../DatePicker_cjs_CccRZSjc.js');
+var DatePicker = require('../../DatePicker_cjs_BtYlDJ7u.js');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var ChipsGroup = require('../../ChipsGroup_cjs_DVizkQ4v.js');
@@ -31,7 +31,7 @@ require('../context/UrlAssetPrefix.js');
 require('../../Link_cjs_qKXVfU8e.js');
 require('../../Text_cjs_DaH5tVvz.js');
 require('../../Loader_cjs_CRiUlTC3.js');
-require('../../Input_cjs_DDi5JVAV.js');
+require('../../Input_cjs_IhuIPBIq.js');
 require('../../Label_cjs_DRIwteHh.js');
 require('@itcase/icons/default');
 require('lodash/castArray');

package/dist/cjs/components/DatePicker.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var DatePicker = require('../../DatePicker_cjs_CccRZSjc.js');
+var DatePicker = require('../../DatePicker_cjs_BtYlDJ7u.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
@@ -30,7 +30,7 @@ require('../context/UrlAssetPrefix.js');
 require('../../Link_cjs_qKXVfU8e.js');
 require('../../Text_cjs_DaH5tVvz.js');
 require('../../Loader_cjs_CRiUlTC3.js');
-require('../../Input_cjs_DDi5JVAV.js');
+require('../../Input_cjs_IhuIPBIq.js');
 require('../../Label_cjs_DRIwteHh.js');
 require('@itcase/icons/default');
 

package/dist/cjs/components/Input.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Input = require('../../Input_cjs_DDi5JVAV.js');
+var Input = require('../../Input_cjs_IhuIPBIq.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');

package/dist/components/Dadata.js

@@ -2,7 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import clsx from 'clsx';
 import { PartySuggestions } from 'react-dadata';
-import { I as Input } from '../Input_es_BnCXATnh.js';
+import { I as Input } from '../Input_es_CifTvE3z.js';
 import '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import 'lodash/camelCase';

package/dist/components/DatePeriod.js

@@ -3,7 +3,7 @@ import { useCallback } from 'react';
 import clsx from 'clsx';
 import { DateTime } from 'luxon';
 import { DATE_PERIOD_INTERVALS } from '@itcase/common';
-import { D as DatePickerInput } from '../DatePicker_es_54jl8guQ.js';
+import { D as DatePickerInput } from '../DatePicker_es_D3lQ83Q6.js';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { b as ChipsGroup, C as Chips } from '../ChipsGroup_es_D3eiXGyK.js';
@@ -29,7 +29,7 @@ import '../context/UrlAssetPrefix.js';
 import '../Link_es_P2b6ya7P.js';
 import '../Text_es_RDU9GLCV.js';
 import '../Loader_es_Dq2-7sn2.js';
-import '../Input_es_BnCXATnh.js';
+import '../Input_es_CifTvE3z.js';
 import '../Label_es_DYd2RwDK.js';
 import '@itcase/icons/default';
 import 'lodash/castArray';

package/dist/components/DatePicker.js

@@ -1,4 +1,4 @@
-export { D as DatePickerInput, a as datePickerAppearance, d as datePickerConfig } from '../DatePicker_es_54jl8guQ.js';
+export { D as DatePickerInput, a as datePickerAppearance, d as datePickerConfig } from '../DatePicker_es_D3lQ83Q6.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
@@ -28,6 +28,6 @@ import '../context/UrlAssetPrefix.js';
 import '../Link_es_P2b6ya7P.js';
 import '../Text_es_RDU9GLCV.js';
 import '../Loader_es_Dq2-7sn2.js';
-import '../Input_es_BnCXATnh.js';
+import '../Input_es_CifTvE3z.js';
 import '../Label_es_DYd2RwDK.js';
 import '@itcase/icons/default';

package/dist/components/Input.js

@@ -1,4 +1,4 @@
-export { I as Input, a as inputAppearance, i as inputConfig } from '../Input_es_BnCXATnh.js';
+export { I as Input, a as inputAppearance, i as inputConfig } from '../Input_es_CifTvE3z.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';

package/dist/types/components/DatePicker/DatePicker.interface.d.ts

@@ -97,6 +97,7 @@ export interface DatePickerCustomInput {
     labelTextSize?: TextSizeProps;
     value?: string;
     isClearable?: boolean;
+    onClick?: VoidFunction;
 }
 export interface DatePickerInputIcon {
     inputIcon?: any;

package/dist/types/components/Input/Input.interface.d.ts

@@ -44,9 +44,11 @@ interface InputProps extends InputThemeColor, StyleAttributes {
     type?: string;
     value?: number | string;
     isDisabled?: boolean;
+    isReadOnly?: boolean;
     onBlur?: (event?: React.FocusEvent<HTMLInputElement>) => void;
     onChange?: (event?: React.ChangeEvent<HTMLInputElement>) => void;
+    onClick?: (event?: React.MouseEvent<HTMLInputElement>) => void;
     onFocus?: (event?: React.FocusEvent<HTMLInputElement>) => void;
     onKeyDown?: (event?: React.KeyboardEvent<HTMLInputElement>) => void;
 }
-export type { InputThemeColor, InputAppearance, InputConfig, InputProps };
+export type { InputAppearance, InputConfig, InputProps, InputThemeColor };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.8.158",
+  "version": "1.8.159",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",