@true-engineering/true-react-common-ui-kit 3.45.1 → 4.0.0-alpha0

package/README.md

@@ -11,46 +11,6 @@
 
 # Release Notes
 
-## 3.45.1
-
-### Changes
-
-- **SearchInput**: Добавлен класс `iconClickable`
-
-## 3.45.0
-
-### Changes
-
-- **Input**: Добавлена стандартная пропса `inputMode`
-- **SearchInput**: Добавлена пропса `onSearchIconClick`
-
-## 3.44.1
-
-### Changes
-
-- **WithPopup**: Явный рендер попапа в `document.body`
-
-## 3.44.0
-
-### Changes
-
-- **WithPopup**:
-
-  1. Реализована возможность отрисовки стрелочки
-  2. Добавлены пропсы `arrow` и `arrowProps`
-  3. Добавлена пропса `isMinWidthSameAsTrigger`, которая выставляет минимальную ширину попапа равной ширине триггера
-  4. Добавлена пропса `popupData`, которая позволяет прокинуть data-атрибуты в попап
-  5. В `children` добавлена пропса `floatingContext`, возвращаемый хуком `useFloating`
-  6. Дефолтное значение пропсы `shouldStopPropagation` изменено с `true` на `eventType === 'click`
-
-- **WithTooltip**: `zIndex` тултипа как в `TextWithTooltip` (9999)
-
-## 3.43.0
-
-### Changes
-
-- **withScrollBar**: Переносит константы размеров скролла в CSS-переменные: `--webkit-scrollbar-width` и `--webkit-scrollbar-height`
-
 ## 3.42.0
 
 ### Changes

package/dist/components/CloseButton/CloseButton.d.ts

@@ -3,7 +3,7 @@ import { ICommonProps } from '../../types';
 import { ICloseButtonStyles } from './CloseButton.styles';
 export interface ICloseButtonProps extends ICommonProps<ICloseButtonStyles> {
     /** @default 'close' */
-    iconType?: 'close' | 'close-large' | 'close-window';
+    icon?: 'close' | 'close-large' | 'close-window';
     onClose?: () => void;
 }
 /** @deprecated */

package/dist/components/ControlGroup/ControlGroup.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { ICommonProps } from '../../types';
+import { IControlGroupStyles } from './ControlGroup.styles';
+export interface IControlGroupProps extends ICommonProps<IControlGroupStyles> {
+    children: ReactNode;
+    infoMessage?: ReactNode;
+    errorMessage?: ReactNode;
+    direction?: 'horizontal' | 'vertical';
+}
+export declare const ControlGroup: import("react").ForwardRefExoticComponent<IControlGroupProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/ControlGroup/ControlGroup.stories.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<import("./ControlGroup").IControlGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+};
+export default _default;
+export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, import("./ControlGroup").IControlGroupProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/ControlGroup/ControlGroup.styles.d.ts

@@ -0,0 +1,3 @@
+import { ITweakStyles } from '../../theme';
+export declare const useStyles: import("../../theme").IUseStyles<"error" | "root" | "horizontal" | "vertical" | "children" | "info" | "message", unknown>;
+export type IControlGroupStyles = ITweakStyles<typeof useStyles>;

package/dist/components/ControlGroup/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ControlGroup';
+export type { IControlGroupStyles } from './ControlGroup.styles';

package/dist/components/ControlWrapper/ControlWrapper.d.ts

@@ -0,0 +1,27 @@
+import { FC, ReactNode } from 'react';
+import { IClickHandlerEvent, ICommonProps } from '../../types';
+import { IIcon } from '../Icon';
+import { IControlWrapperStyles } from './ControlWrapper.styles';
+export interface IControlWrapperProps extends ICommonProps<IControlWrapperStyles> {
+    children: ReactNode;
+    label?: ReactNode;
+    icon?: IIcon;
+    groupPlacement?: 'left' | 'right' | 'middle' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    /** @default false */
+    isInvalid?: boolean;
+    /** @default false */
+    isFocused?: boolean;
+    /** @default false */
+    hasValue?: boolean;
+    /** @default false */
+    isRequired?: boolean;
+    /** @default false */
+    isFullWidth?: boolean;
+    /** @default false */
+    isLoading?: boolean;
+    /** @default false */
+    isDisabled?: boolean;
+    onIconClick?: (event: IClickHandlerEvent) => void;
+    onClear?: (event: IClickHandlerEvent) => void;
+}
+export declare const ControlWrapper: FC<IControlWrapperProps>;

package/dist/components/ControlWrapper/ControlWrapper.stories.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    title: string;
+    component: import("react").FC<import("./ControlWrapper").IControlWrapperProps>;
+};
+export default _default;
+export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, import("./ControlWrapper").IControlWrapperProps>;

package/dist/components/ControlWrapper/ControlWrapper.styles.d.ts

@@ -0,0 +1,6 @@
+import { ITweakStyles } from '../../theme';
+import { IThemedPreloaderStyles } from '../ThemedPreloader';
+export declare const useStyles: import("../../theme").IUseStyles<"invalid" | "root" | "icon" | "disabled" | "loader" | "loading" | "label" | "requiredLabel" | "withValue" | "clearIcon" | "focused" | "minContent" | "activeLabel" | "disabledLabel" | "wrapper" | "controls" | "iconInner" | "customIcon" | "endIcon" | "activeIcon" | "placement-top" | "placement-bottom" | "placement-top-left" | "placement-top-right" | "placement-bottom-left" | "placement-bottom-right" | "placement-left" | "placement-right" | "placement-middle", unknown>;
+export type IControlWrapperStyles = ITweakStyles<typeof useStyles, {
+    tweakPreloader: IThemedPreloaderStyles;
+}>;

package/dist/components/ControlWrapper/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ControlWrapper';
+export type { IControlWrapperStyles } from './ControlWrapper.styles';

package/dist/components/DateInput/DateInput.d.ts

@@ -1,6 +1,6 @@
-import { FormEvent, MouseEvent } from 'react';
+import { MouseEvent } from 'react';
 import { ICommonProps } from '../../types';
-import { IInputProps } from '../Input';
+import { IChangeInputEvent, IInputProps } from '../Input';
 import { IDateInputStyles } from './DateInput.styles';
 export interface IDateInputProps extends Omit<IInputProps, 'value' | 'beforeMaskedStateChange' | 'onChange' | 'tweakStyles'>, ICommonProps<IDateInputStyles> {
     date?: string;
@@ -12,6 +12,6 @@ export interface IDateInputProps extends Omit<IInputProps, 'value' | 'beforeMask
     /** @default false */
     isRange?: boolean;
     onClick?: (event: MouseEvent<HTMLDivElement>) => void;
-    onChange?: (event: FormEvent<HTMLInputElement>, value: string) => void;
+    onChange?: (event: IChangeInputEvent, value: string) => void;
 }
 export declare const DateInput: import("react").ForwardRefExoticComponent<IDateInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/DatePicker/components/DatePickerHeader/DatePickerHeader.styles.d.ts

@@ -1,6 +1,6 @@
 import { ITweakStyles } from '../../../../theme';
 import { ISelectStyles } from '../../../Select';
-export declare const useStyles: import("../../../../theme").IUseStyles<"select" | "btn" | "selectValue" | "selectControl" | "header" | "buttons", unknown>;
+export declare const useStyles: import("../../../../theme").IUseStyles<"btn" | "header" | "buttons", unknown>;
 export declare const selectStyles: ISelectStyles;
 export type IDatePickerHeaderStyles = ITweakStyles<typeof useStyles, {
     tweakSelect: ISelectStyles;

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

@@ -1,4 +1,4 @@
 import { ReactDatePickerProps } from 'react-datepicker';
 import { IDateInputProps } from '../DateInput';
 export type IRange = [Date | null, Date | null] | null;
-export type IDatePickerBaseProps = Pick<ReactDatePickerProps, 'startDate' | 'endDate' | 'minDate' | 'maxDate' | 'allowSameDay' | 'disabledKeyboardNavigation' | 'monthsShown' | 'popperModifiers' | 'popperPlacement' | 'filterDate' | 'dayClassName' | 'calendarContainer' | 'onCalendarOpen' | 'onCalendarClose' | 'onYearChange' | 'onMonthChange' | 'focusSelectedMonth' | 'shouldCloseOnSelect' | 'showPreviousMonths' | 'todayButton' | 'renderCustomHeader' | 'customInputRef' | 'preventOpenOnFocus' | 'strictParsing' | 'highlightDates' | 'fixedHeight' | 'excludeScrollbar'> & Omit<IDateInputProps, 'date' | 'startDate' | 'endDate' | 'isRange' | 'isActive' | 'iconType' | 'maxLength' | 'onChange' | 'onClick' | 'tweakStyles'>;
+export type IDatePickerBaseProps = Pick<ReactDatePickerProps, 'startDate' | 'endDate' | 'minDate' | 'maxDate' | 'allowSameDay' | 'disabledKeyboardNavigation' | 'monthsShown' | 'popperModifiers' | 'popperPlacement' | 'filterDate' | 'dayClassName' | 'calendarContainer' | 'onCalendarOpen' | 'onCalendarClose' | 'onYearChange' | 'onMonthChange' | 'focusSelectedMonth' | 'shouldCloseOnSelect' | 'showPreviousMonths' | 'todayButton' | 'renderCustomHeader' | 'customInputRef' | 'preventOpenOnFocus' | 'strictParsing' | 'highlightDates' | 'fixedHeight' | 'excludeScrollbar'> & Omit<IDateInputProps, 'date' | 'startDate' | 'endDate' | 'isRange' | 'isActive' | 'icon' | 'maxLength' | 'onChange' | 'onClick' | 'tweakStyles'>;

package/dist/components/FiltersPane/FiltersPane.stories.d.ts

@@ -2,14 +2,13 @@ import { IFiltersPaneProps } from './FiltersPane';
 interface IFiltersPaneWithCustomProps<Values, Content> extends IFiltersPaneProps<Values, Content> {
     containerWidth: number;
     isSearchDisabled: boolean;
-    isSearchAutosizeable: boolean;
     shouldShowSettingsButton: boolean;
     withFieldNameInLabel: boolean;
     isGroupingEnabled: boolean;
     checkboxPosition: 'left' | 'right';
     isClearableFields: boolean;
 }
-declare function FiltersPaneWithCustomProps<Values, Content>({ containerWidth, isSearchDisabled, isSearchAutosizeable, shouldShowSettingsButton, withFieldNameInLabel, isGroupingEnabled, checkboxPosition, isClearableFields, ...args }: IFiltersPaneWithCustomProps<Values, Content>): import("react/jsx-runtime").JSX.Element;
+declare function FiltersPaneWithCustomProps<Values, Content>({ containerWidth, isSearchDisabled, shouldShowSettingsButton, withFieldNameInLabel, isGroupingEnabled, checkboxPosition, isClearableFields, ...args }: IFiltersPaneWithCustomProps<Values, Content>): import("react/jsx-runtime").JSX.Element;
 declare const _default: {
     title: string;
     component: typeof FiltersPaneWithCustomProps;

package/dist/components/FiltersPane/components/FilterWithDates/FilterWithDates.d.ts

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { ICommonProps } from '../../../../types';
-import { IFilterWithDateDatePickerProps, IFilterLocaleKey, IFilterWithDatesValue, IPartialFilterLocale } from '../../types';
+import { IFilterLocaleKey, IFilterWithDateDatePickerProps, IFilterWithDatesValue, IPartialFilterLocale } from '../../types';
 import { IFilterWithDatesStyles } from './FilterWithDates.styles';
 export interface IFilterWithDatesProps extends ICommonProps<IFilterWithDatesStyles> {
     value?: IFilterWithDatesValue;

package/dist/components/FiltersPane/components/FiltersPaneSearch/FiltersPaneSearch.d.ts

@@ -16,6 +16,5 @@ export interface IFiltersPaneSearchProps<Value> extends ICommonProps<IFiltersPan
     hasClearSelectButton?: boolean;
     isDisabled?: boolean;
     isSelectSearchEnabled?: boolean;
-    isAutoSizeable?: boolean;
 }
-export declare function FiltersPaneSearch<Value>({ value, fields, field, onChange, localeKey, locale, getValueId, getValueView, getValueString, hasClearSelectButton, isDisabled, isSelectSearchEnabled, isAutoSizeable, maxLength, data, tweakStyles, testId, }: IFiltersPaneSearchProps<Value>): JSX.Element;
+export declare function FiltersPaneSearch<Value>({ value, fields, field, onChange, localeKey, locale, getValueId, getValueView, getValueString, hasClearSelectButton, isDisabled, isSelectSearchEnabled, maxLength, data, tweakStyles, testId, }: IFiltersPaneSearchProps<Value>): JSX.Element;

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

@@ -1,52 +1,5 @@
-import { FormEvent, ReactNode } from 'react';
-import { ICommonProps } from '../../types';
-import { IIcon } from '../Icon';
-import { IInputHTMLBaseProps, IReactInputMaskProps } from './types';
-import { IInputStyles } from './Input.styles';
-export interface IInputProps extends ICommonProps<IInputStyles>, IReactInputMaskProps, IInputHTMLBaseProps {
-    value?: string;
-    label?: ReactNode;
-    /** @default false */
-    isDisabled?: boolean;
-    /** @default true */
-    hasFloatingLabel?: boolean;
-    /** @default false */
-    isReadonly?: boolean;
-    /** @default false */
-    isInvalid?: boolean;
-    /** @default false */
-    isActive?: boolean;
-    /** @default false */
-    isClearable?: boolean;
-    infoMessage?: string;
-    errorMessage?: string;
-    /** @default 'bottom' */
-    errorPosition?: 'top' | 'bottom';
-    inlineStyle?: 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'left' | 'right' | 'middle';
-    border?: 'top' | 'bottom' | 'left' | 'right';
-    /** @default false */
-    isRequired?: boolean;
-    /** @default false */
-    isLoading?: boolean;
-    /**
-     * Должна ли ширина input'а подстраиваться под ширину контента
-     * @default false
-     */
-    isAutoSizeable?: boolean;
-    /**
-     * Ширина input'а по умолчанию. Используется только вместе с `isAutoSizeable` равному `true`
-     * @default 6
-     */
-    defaultSize?: number;
-    iconType?: IIcon;
-    units?: string;
-    /** @default false */
-    hasRequiredLabel?: boolean;
-    /** @default false */
-    shouldFocusOnMount?: boolean;
-    /** @default false */
-    shouldAlwaysShowPlaceholder?: boolean;
-    onChange: (value: string, event: FormEvent<HTMLInputElement>) => void;
-    onIconClick?: () => void;
-}
-export declare const Input: import("react").ForwardRefExoticComponent<IInputProps & import("react").RefAttributes<HTMLInputElement>>;
+/// <reference types="react" />
+import { IControlGroupProps } from '../ControlGroup';
+import { IInputBaseProps } from './InputBase';
+export type IInputProps = IInputBaseProps & Pick<IControlGroupProps, 'infoMessage' | 'errorMessage'>;
+export declare const Input: import("react").ForwardRefExoticComponent<IInputBaseProps & Pick<IControlGroupProps, "infoMessage" | "errorMessage"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/Input/Input.stories.d.ts

@@ -1,34 +1,25 @@
 /// <reference types="react" />
-import { IInputProps } from './Input';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<IInputProps & import("react").RefAttributes<HTMLInputElement>>;
+    component: import("react").ForwardRefExoticComponent<import("./InputBase").IInputBaseProps & Pick<import("..").IControlGroupProps, "infoMessage" | "errorMessage"> & import("react").RefAttributes<HTMLInputElement>>;
     argTypes: {
         type: {
             control: string;
             options: (import("react").HTMLInputTypeAttribute | undefined)[];
         };
-        border: {
+        icon: {
             control: string;
             options: (string | undefined)[];
         };
-        iconType: {
-            control: string;
-            options: (string | undefined)[];
-        };
-        errorPosition: {
-            control: string;
-            options: string[];
-        };
         mask: {
             control: string;
             options: (string | undefined)[];
         };
-        inlineStyles: {
+        groupPositions: {
             control: string;
             options: (string | undefined)[];
         };
     };
 };
 export default _default;
-export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, IInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, import("./InputBase").IInputBaseProps & Pick<import("..").IControlGroupProps, "infoMessage" | "errorMessage"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/Input/Input.styles.d.ts

@@ -1,7 +1,8 @@
 import { ITweakStyles } from '../../theme';
-import { IThemedPreloaderStyles } from '../ThemedPreloader';
-export declare const AUTOSIZE_MAX_WIDTH = 480;
-export declare const useStyles: import("../../theme").IUseStyles<"bottom" | "left" | "right" | "top" | "error" | "input" | "invalid" | "root" | "middle" | "icon" | "disabled" | "loading" | "label" | "requiredLabel" | "inputWrapper" | "info" | "autosize" | "clearIcon" | "focused" | "inputContent" | "unitsWrapper" | "fakeValue" | "units" | "withFloatingLabel" | "floatingLabelWithoutPadding" | "floating" | "activeLabel" | "required" | "floatingWithoutPadding" | "activeIcon" | "border-top" | "border-bottom" | "border-left" | "border-right" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "controls" | "inputIcon" | "withIcons" | "withControls" | "invalidLabel" | "error-top" | "error-bottom" | "withUnits", unknown>;
+import { IControlGroupStyles } from '../ControlGroup';
+import { IControlWrapperStyles } from '../ControlWrapper';
+export declare const useStyles: import("../../theme").IUseStyles<"input" | "inputContent" | "autoSizeWrapper" | "autoSized" | "withUnits" | "withLabel" | "fakeValue" | "units" | "focusedInput" | "disabledInput" | "invalidInput", unknown>;
 export type IInputStyles = ITweakStyles<typeof useStyles, {
-    tweakPreloader: IThemedPreloaderStyles;
+    tweakControlWrapper: IControlWrapperStyles;
+    tweakControlGroup: IControlGroupStyles;
 }>;

package/dist/components/Input/InputBase.d.ts

@@ -0,0 +1,24 @@
+import { InputHTMLAttributes, ReactNode } from 'react';
+import { Props as ReactInputMaskBaseProps } from 'react-input-mask';
+import { ICommonProps } from '../../types';
+import { IControlWrapperProps } from '../ControlWrapper';
+import { IChangeInputEvent } from './types';
+import { IInputStyles } from './Input.styles';
+export interface IInputBaseProps extends ICommonProps<IInputStyles>, Pick<IControlWrapperProps, 'label' | 'icon' | 'groupPlacement' | 'isInvalid' | 'isRequired' | 'isLoading' | 'isDisabled' | 'onIconClick'>, Pick<InputHTMLAttributes<HTMLInputElement>, 'type' | 'inputMode' | 'autoComplete' | 'name' | 'maxLength' | 'tabIndex' | 'placeholder' | 'onFocus' | 'onBlur' | 'onPaste' | 'onKeyDown'>, Pick<Partial<ReactInputMaskBaseProps>, 'mask' | 'maskPlaceholder' | 'alwaysShowMask' | 'beforeMaskedStateChange'> {
+    value?: string;
+    units?: ReactNode;
+    /** @default false */
+    isReadonly?: boolean;
+    /** @default false */
+    isActive?: boolean;
+    /** @default false */
+    isClearable?: boolean;
+    /** @default false */
+    shouldFocusOnMount?: boolean;
+    /** @default false */
+    isAutoSized?: boolean;
+    /** @default false */
+    shouldAlwaysShowPlaceholder?: boolean;
+    onChange(value: string, event: IChangeInputEvent): void;
+}
+export declare const InputBase: import("react").ForwardRefExoticComponent<IInputBaseProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/Input/index.d.ts

@@ -1,3 +1,4 @@
 export * from './Input';
+export * from './InputBase';
 export * from './types';
 export type { IInputStyles } from './Input.styles';

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

@@ -1,4 +1,3 @@
-import { InputHTMLAttributes } from 'react';
-import { Props as ReactInputMaskBaseProps } from 'react-input-mask';
-export type IReactInputMaskProps = Pick<Partial<ReactInputMaskBaseProps>, 'mask' | 'maskPlaceholder' | 'alwaysShowMask' | 'beforeMaskedStateChange'>;
-export type IInputHTMLBaseProps = Pick<InputHTMLAttributes<HTMLInputElement>, 'maxLength' | 'name' | 'tabIndex' | 'placeholder' | 'type' | 'inputMode' | 'onBlur' | 'onFocus' | 'onInput' | 'onKeyDown' | 'onPaste'>;
+import { ChangeEvent } from 'react';
+import { IClickHandlerEvent } from '../../types';
+export type IChangeInputEvent = ChangeEvent<HTMLInputElement> | IClickHandlerEvent;

package/dist/components/NumberInput/NumberInput.d.ts

@@ -1,5 +1,5 @@
-import { FormEvent } from 'react';
-import { IInputProps } from '../Input';
+/// <reference types="react" />
+import { IChangeInputEvent, IInputProps } from '../Input';
 export interface INumberInputProps extends Omit<IInputProps, 'value' | 'onChange' | 'type'> {
     value?: number;
     /** @default 3 */
@@ -13,6 +13,6 @@ export interface INumberInputProps extends Omit<IInputProps, 'value' | 'onChange
     canBeNegative?: boolean;
     min?: number;
     max?: number;
-    onChange: (value: number | undefined, event?: FormEvent<HTMLInputElement>) => void;
+    onChange: (value: number | undefined, event?: IChangeInputEvent) => void;
 }
 export declare const NumberInput: import("react").ForwardRefExoticComponent<INumberInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/PhoneInput/PhoneInput.d.ts

@@ -1,7 +1,7 @@
-import { FC, MouseEvent, FormEvent } from 'react';
+import { FC } from 'react';
 import { ICommonProps } from '../../types';
 import { IInputProps } from '../Input';
-import { IPhoneValue } from './types';
+import { IChangePhoneInputEvent, IPhoneValue } from './types';
 import { IPhoneInputStyles } from './PhoneInput.styles';
 export interface IPhoneInputProps extends Omit<IInputProps, 'value' | 'onChange' | 'type' | 'mask' | 'units' | 'placeholder' | 'tweakStyles'>, ICommonProps<IPhoneInputStyles> {
     /** @default 'ru' */
@@ -12,6 +12,6 @@ export interface IPhoneInputProps extends Omit<IInputProps, 'value' | 'onChange'
     noMatchesLabel?: string;
     /** @default { phoneNumber: '', dialCode: '' } */
     value?: IPhoneValue;
-    onChange: (phone: IPhoneValue, event: MouseEvent | KeyboardEvent | FormEvent<HTMLInputElement>) => void;
+    onChange: (phone: IPhoneValue, event: IChangePhoneInputEvent) => void;
 }
 export declare const PhoneInput: FC<IPhoneInputProps>;

package/dist/components/PhoneInput/PhoneInput.stories.d.ts

@@ -2,7 +2,7 @@ declare const _default: {
     title: string;
     component: import("react").FC<import("./PhoneInput").IPhoneInputProps>;
     argTypes: {
-        iconType: {
+        icon: {
             control: string;
             options: (string | undefined)[];
         };
@@ -14,7 +14,7 @@ declare const _default: {
             control: string;
             options: (string | undefined)[];
         };
-        inlineStyle: {
+        groupPlacement: {
             control: string;
             options: (string | undefined)[];
         };

package/dist/components/PhoneInput/components/PhoneInputCountryList/PhoneInputCountryList.d.ts

@@ -1,5 +1,6 @@
-import { FC, MouseEvent } from 'react';
+import { FC } from 'react';
 import { ICommonProps } from '../../../../types';
+import { IChangeInputEvent } from '../../../Input';
 import { IPhoneInfo } from '../../types';
 import { IPhoneInputCountryListStyles } from './PhoneInputCountryList.styles';
 export interface IPhoneInputCountryListProps extends Pick<ICommonProps<IPhoneInputCountryListStyles>, 'tweakStyles'> {
@@ -8,6 +9,6 @@ export interface IPhoneInputCountryListProps extends Pick<ICommonProps<IPhoneInp
     placeholder: string;
     noMatchesLabel: string;
     closeList: () => void;
-    onChange: (country: IPhoneInfo, event: MouseEvent | KeyboardEvent) => void;
+    onChange: (country: IPhoneInfo, event: IChangeInputEvent | KeyboardEvent) => void;
 }
 export declare const PhoneInputCountryList: FC<IPhoneInputCountryListProps>;

package/dist/components/PhoneInput/types.d.ts

@@ -1,3 +1,4 @@
+import { IChangeInputEvent } from '../Input';
 export interface IPhoneInfo {
     countryEn: string;
     countryRu: string;
@@ -13,3 +14,4 @@ export interface IPhoneValue {
     dialCode?: string;
     countryCode?: string;
 }
+export type IChangePhoneInputEvent = IChangeInputEvent | KeyboardEvent;

package/dist/components/SearchInput/SearchInput.d.ts

@@ -2,7 +2,5 @@ import { FC } from 'react';
 import { ICommonProps } from '../../types';
 import { IInputProps } from '../Input';
 import { ISearchInputStyles } from './SearchInput.styles';
-export interface ISearchInputProps extends ICommonProps<ISearchInputStyles>, Omit<IInputProps, 'type' | 'isInvalid' | 'errorMessage' | 'label' | 'isActive' | 'errorPosition' | 'hasFloatingLabel' | 'border' | 'tweakStyles'> {
-    onSearchIconClick?: () => void;
-}
+export type ISearchInputProps = Omit<IInputProps, 'type' | 'label' | 'isInvalid' | 'errorMessage' | 'isActive' | 'tweakStyles'> & ICommonProps<ISearchInputStyles>;
 export declare const SearchInput: FC<ISearchInputProps>;

package/dist/components/SearchInput/SearchInput.stories.d.ts

@@ -3,4 +3,14 @@ declare const _default: {
     component: import("react").FC<import("./SearchInput").ISearchInputProps>;
 };
 export default _default;
-export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, import("./SearchInput").ISearchInputProps>;
+export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, Omit<import("..").IInputProps, "tweakStyles" | "label" | "isInvalid" | "type" | "isActive" | "errorMessage"> & import("../..").IDataAttributesProps & import("../..").ITweakStylesProps<Partial<import("jss").Styles<"root" | "icon", unknown, undefined>> & Partial<{
+    tweakInput: Partial<import("jss").Styles<"input" | "inputContent" | "autoSizeWrapper" | "autoSized" | "withUnits" | "withLabel" | "fakeValue" | "units" | "focusedInput" | "disabledInput" | "invalidInput", unknown, undefined>> & Partial<{
+        tweakControlWrapper: Partial<import("jss").Styles<"invalid" | "root" | "icon" | "disabled" | "loader" | "loading" | "label" | "requiredLabel" | "withValue" | "clearIcon" | "focused" | "minContent" | "activeLabel" | "disabledLabel" | "wrapper" | "controls" | "iconInner" | "customIcon" | "endIcon" | "activeIcon" | "placement-top" | "placement-bottom" | "placement-top-left" | "placement-top-right" | "placement-bottom-left" | "placement-bottom-right" | "placement-left" | "placement-right" | "placement-middle", unknown, undefined>> & Partial<{
+            tweakPreloader: Partial<import("jss").Styles<"root" | "default" | "currentColor" | "dots" | "logo", unknown, undefined>> & Partial<{
+                tweakDotsPreloader: Partial<import("jss").Styles<"root" | "dot" | "fadedDot" | "@keyframes FadedDots", unknown, undefined>> & Partial<unknown>;
+                tweakSvgPreloader: Partial<import("jss").Styles<"root", unknown, undefined>> & Partial<unknown>;
+            }>;
+        }>;
+        tweakControlGroup: Partial<import("jss").Styles<"error" | "root" | "horizontal" | "vertical" | "children" | "info" | "message", unknown, undefined>> & Partial<unknown>;
+    }>;
+}>>>;

package/dist/components/SearchInput/SearchInput.styles.d.ts

@@ -1,6 +1,6 @@
 import { ITweakStyles } from '../../theme';
 import { IInputStyles } from '../Input';
-export declare const useStyles: import("../../theme").IUseStyles<"root" | "icon" | "iconClickable", unknown>;
+export declare const useStyles: import("../../theme").IUseStyles<"root" | "icon", unknown>;
 export declare const inputStyles: IInputStyles;
 export type ISearchInputStyles = ITweakStyles<typeof useStyles, {
     tweakInput: IInputStyles;

package/dist/components/Select/Select.d.ts

@@ -1,9 +1,9 @@
-import { ChangeEvent, FormEvent, KeyboardEvent, MouseEvent, ReactNode, SyntheticEvent } from 'react';
-import { IDropdownWithPopperOptions, ICommonProps } from '../../types';
+import { ReactNode, SyntheticEvent } from 'react';
+import { ICommonProps, IDropdownWithPopperOptions } from '../../types';
 import { IIcon } from '../Icon';
 import { IInputProps } from '../Input';
 import { ISearchInputProps } from '../SearchInput';
-import { IMultipleSelectValue } from './types';
+import { IChangeSelectEvent, IMultipleSelectValue } from './types';
 import { ISelectStyles } from './Select.styles';
 export interface ISelectProps<Value> extends Omit<IInputProps, 'value' | 'onChange' | 'onBlur' | 'type' | 'tweakStyles'>, ICommonProps<ISelectStyles> {
     header?: ReactNode;
@@ -30,7 +30,7 @@ export interface ISelectProps<Value> extends Omit<IInputProps, 'value' | 'onChan
         shouldRenderInList: true;
     } & Pick<ISearchInputProps, 'placeholder'>;
     isOptionDisabled?: (option: Value) => boolean;
-    onChange: (value: Value | undefined, event: MouseEvent<HTMLElement> | KeyboardEvent | ChangeEvent<HTMLElement> | FormEvent<HTMLElement>) => void;
+    onChange: (value: Value | undefined, event: IChangeSelectEvent) => void;
     onBlur?: (event: Event | SyntheticEvent) => void;
     onType?: (value: string) => Promise<void>;
     optionsFilter?: (options: Value[], query: string) => Value[];
@@ -46,7 +46,7 @@ export interface ISelectProps<Value> extends Omit<IInputProps, 'value' | 'onChan
 export interface IMultipleSelectProps<Value> extends Omit<ISelectProps<Value>, 'value' | 'onChange' | 'compareValuesOnChange' | 'isMultiSelect'> {
     isMultiSelect: true;
     value: IMultipleSelectValue<Value> | undefined;
-    onChange: (value: IMultipleSelectValue<Value> | undefined, event: MouseEvent<HTMLElement> | KeyboardEvent | ChangeEvent<HTMLElement> | FormEvent<HTMLElement>) => void;
+    onChange: (value: IMultipleSelectValue<Value> | undefined, event: IChangeSelectEvent) => void;
     compareValuesOnChange?: (v1?: IMultipleSelectValue<Value>, v2?: IMultipleSelectValue<Value>) => boolean;
 }
 export declare function Select<Value>(props: ISelectProps<Value> | IMultipleSelectProps<Value>): JSX.Element;

package/dist/components/Select/Select.styles.d.ts

@@ -1,32 +1,33 @@
 import { type ITweakStyles } from '../../theme';
+import { IControlGroupStyles } from '../ControlGroup';
 import { type IInputStyles } from '../Input';
 import { type ISearchInputStyles } from '../SearchInput';
 import { type ISelectListStyles } from './components';
-export declare const useStyles: import("../../theme").IUseStyles<"root" | "icon" | "disabled" | "inputWrapper" | "arrow" | "listWrapper" | "withoutPopper" | "listWrapperInBody" | "activeArrow" | "counter", unknown>;
-export declare const readonlyInputStyles: Partial<import("jss").Styles<"bottom" | "left" | "right" | "top" | "error" | "input" | "invalid" | "root" | "middle" | "icon" | "disabled" | "loading" | "label" | "requiredLabel" | "inputWrapper" | "info" | "autosize" | "clearIcon" | "focused" | "inputContent" | "unitsWrapper" | "fakeValue" | "units" | "withFloatingLabel" | "floatingLabelWithoutPadding" | "floating" | "activeLabel" | "required" | "floatingWithoutPadding" | "activeIcon" | "border-top" | "border-bottom" | "border-left" | "border-right" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "controls" | "inputIcon" | "withIcons" | "withControls" | "invalidLabel" | "error-top" | "error-bottom" | "withUnits", unknown, undefined>> & Partial<{
-    tweakPreloader: Partial<import("jss").Styles<"root" | "default" | "currentColor" | "dots" | "logo", unknown, undefined>> & Partial<{
-        tweakDotsPreloader: Partial<import("jss").Styles<"root" | "dot" | "fadedDot" | "@keyframes FadedDots", unknown, undefined>> & Partial<unknown>;
-        tweakSvgPreloader: Partial<import("jss").Styles<"root", unknown, undefined>> & Partial<unknown>;
+export declare const useStyles: import("../../theme").IUseStyles<"root" | "icon" | "disabled" | "inputWrapper" | "arrow" | "listWrapper" | "withoutPopper" | "listWrapperInBody" | "activeArrow" | "counter" | "iconWrapper", unknown>;
+export declare const readonlyInputStyles: Partial<import("jss").Styles<"input" | "inputContent" | "autoSizeWrapper" | "autoSized" | "withUnits" | "withLabel" | "fakeValue" | "units" | "focusedInput" | "disabledInput" | "invalidInput", unknown, undefined>> & Partial<{
+    tweakControlWrapper: Partial<import("jss").Styles<"invalid" | "root" | "icon" | "disabled" | "loader" | "loading" | "label" | "requiredLabel" | "withValue" | "clearIcon" | "focused" | "minContent" | "activeLabel" | "disabledLabel" | "wrapper" | "controls" | "iconInner" | "customIcon" | "endIcon" | "activeIcon" | "placement-top" | "placement-bottom" | "placement-top-left" | "placement-top-right" | "placement-bottom-left" | "placement-bottom-right" | "placement-left" | "placement-right" | "placement-middle", unknown, undefined>> & Partial<{
+        tweakPreloader: Partial<import("jss").Styles<"root" | "default" | "currentColor" | "dots" | "logo", unknown, undefined>> & Partial<{
+            tweakDotsPreloader: Partial<import("jss").Styles<"root" | "dot" | "fadedDot" | "@keyframes FadedDots", unknown, undefined>> & Partial<unknown>;
+            tweakSvgPreloader: Partial<import("jss").Styles<"root", unknown, undefined>> & Partial<unknown>;
+        }>;
     }>;
+    tweakControlGroup: Partial<import("jss").Styles<"error" | "root" | "horizontal" | "vertical" | "children" | "info" | "message", unknown, undefined>> & Partial<unknown>;
 }>;
-export declare const multiSelectInputStyles: Partial<import("jss").Styles<"bottom" | "left" | "right" | "top" | "error" | "input" | "invalid" | "root" | "middle" | "icon" | "disabled" | "loading" | "label" | "requiredLabel" | "inputWrapper" | "info" | "autosize" | "clearIcon" | "focused" | "inputContent" | "unitsWrapper" | "fakeValue" | "units" | "withFloatingLabel" | "floatingLabelWithoutPadding" | "floating" | "activeLabel" | "required" | "floatingWithoutPadding" | "activeIcon" | "border-top" | "border-bottom" | "border-left" | "border-right" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "controls" | "inputIcon" | "withIcons" | "withControls" | "invalidLabel" | "error-top" | "error-bottom" | "withUnits", unknown, undefined>> & Partial<{
-    tweakPreloader: Partial<import("jss").Styles<"root" | "default" | "currentColor" | "dots" | "logo", unknown, undefined>> & Partial<{
-        tweakDotsPreloader: Partial<import("jss").Styles<"root" | "dot" | "fadedDot" | "@keyframes FadedDots", unknown, undefined>> & Partial<unknown>;
-        tweakSvgPreloader: Partial<import("jss").Styles<"root", unknown, undefined>> & Partial<unknown>;
-    }>;
-}>;
-export declare const readonlyMultiSelectStyles: Partial<import("jss").Styles<"bottom" | "left" | "right" | "top" | "error" | "input" | "invalid" | "root" | "middle" | "icon" | "disabled" | "loading" | "label" | "requiredLabel" | "inputWrapper" | "info" | "autosize" | "clearIcon" | "focused" | "inputContent" | "unitsWrapper" | "fakeValue" | "units" | "withFloatingLabel" | "floatingLabelWithoutPadding" | "floating" | "activeLabel" | "required" | "floatingWithoutPadding" | "activeIcon" | "border-top" | "border-bottom" | "border-left" | "border-right" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "controls" | "inputIcon" | "withIcons" | "withControls" | "invalidLabel" | "error-top" | "error-bottom" | "withUnits", unknown, undefined>> & Partial<{
-    tweakPreloader: Partial<import("jss").Styles<"root" | "default" | "currentColor" | "dots" | "logo", unknown, undefined>> & Partial<{
-        tweakDotsPreloader: Partial<import("jss").Styles<"root" | "dot" | "fadedDot" | "@keyframes FadedDots", unknown, undefined>> & Partial<unknown>;
-        tweakSvgPreloader: Partial<import("jss").Styles<"root", unknown, undefined>> & Partial<unknown>;
+export declare const readonlyMultiSelectStyles: Partial<import("jss").Styles<"input" | "inputContent" | "autoSizeWrapper" | "autoSized" | "withUnits" | "withLabel" | "fakeValue" | "units" | "focusedInput" | "disabledInput" | "invalidInput", unknown, undefined>> & Partial<{
+    tweakControlWrapper: Partial<import("jss").Styles<"invalid" | "root" | "icon" | "disabled" | "loader" | "loading" | "label" | "requiredLabel" | "withValue" | "clearIcon" | "focused" | "minContent" | "activeLabel" | "disabledLabel" | "wrapper" | "controls" | "iconInner" | "customIcon" | "endIcon" | "activeIcon" | "placement-top" | "placement-bottom" | "placement-top-left" | "placement-top-right" | "placement-bottom-left" | "placement-bottom-right" | "placement-left" | "placement-right" | "placement-middle", unknown, undefined>> & Partial<{
+        tweakPreloader: Partial<import("jss").Styles<"root" | "default" | "currentColor" | "dots" | "logo", unknown, undefined>> & Partial<{
+            tweakDotsPreloader: Partial<import("jss").Styles<"root" | "dot" | "fadedDot" | "@keyframes FadedDots", unknown, undefined>> & Partial<unknown>;
+            tweakSvgPreloader: Partial<import("jss").Styles<"root", unknown, undefined>> & Partial<unknown>;
+        }>;
     }>;
+    tweakControlGroup: Partial<import("jss").Styles<"error" | "root" | "horizontal" | "vertical" | "children" | "info" | "message", unknown, undefined>> & Partial<unknown>;
 }>;
 export declare const getInputStyles: ({ hasReadonlyInput, isMultiSelect, }: {
     hasReadonlyInput: boolean;
     isMultiSelect?: boolean | undefined;
 }) => IInputStyles;
-export declare const searchInputStyles: ISearchInputStyles;
 export type ISelectStyles = ITweakStyles<typeof useStyles, {
+    tweakControlGroup: IControlGroupStyles;
     tweakInput: IInputStyles;
     tweakSelectList: ISelectListStyles;
     tweakSearchInput: ISearchInputStyles;

package/dist/components/Select/types.d.ts

@@ -1 +1,4 @@
+import { ChangeEvent, KeyboardEvent } from 'react';
+import { IChangeInputEvent } from '../Input';
 export type IMultipleSelectValue<Value> = Array<NonNullable<Value>>;
+export type IChangeSelectEvent = IChangeInputEvent | ChangeEvent<HTMLElement> | KeyboardEvent;

package/dist/components/SmartInput/SmartInput.d.ts

@@ -1,5 +1,5 @@
-import { ClipboardEvent, FormEvent } from 'react';
-import { IInputProps } from '../Input';
+import { ClipboardEvent } from 'react';
+import { IChangeInputEvent, IInputProps } from '../Input';
 import { IInputRawValue, ISmartType } from './types';
 export interface ISmartInputProps extends Omit<IInputProps, 'onChange'> {
     /** @default 'default' */
@@ -9,6 +9,6 @@ export interface ISmartInputProps extends Omit<IInputProps, 'onChange'> {
     isUpperCase?: boolean;
     /** @default true */
     isTransliterationEnabled?: boolean;
-    onChange: (value: string, rawValue: IInputRawValue, event?: FormEvent<HTMLInputElement> | ClipboardEvent<HTMLInputElement>) => void;
+    onChange: (value: string, rawValue: IInputRawValue, event?: IChangeInputEvent | ClipboardEvent<HTMLInputElement>) => void;
 }
 export declare const SmartInput: import("react").ForwardRefExoticComponent<ISmartInputProps & import("react").RefAttributes<HTMLInputElement>>;