@true-engineering/true-react-common-ui-kit 3.57.0 → 3.59.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "3.57.0",
+  "version": "3.59.0",
   "description": "True Engineering React UI Kit with theming support",
   "author": "True Engineering (https://trueengineering.ru)",
   "keywords": [

package/src/components/IconButton/IconButton.styles.ts

@@ -1,9 +1,5 @@
 import { ITweakStyles, animations, createThemedStyles } from '../../theme';
 
-const BUTTON_SIZE_S = 24;
-const BUTTON_SIZE_M = 32;
-const ICON_SIZE = 20;
-
 export const useStyles = createThemedStyles('IconButton', {
   root: {
     display: 'flex',
@@ -13,7 +9,7 @@ export const useStyles = createThemedStyles('IconButton', {
     outline: 'none',
     boxSizing: 'border-box',
     transition: animations.defaultTransition,
-    transitionProperty: 'background-color, color, border-color',
+    transitionProperty: 'background-color, color, border-color, opacity, visibility',
     border: 'none',
     position: 'relative',
     boxShadow: 'none',
@@ -29,6 +25,10 @@ export const useStyles = createThemedStyles('IconButton', {
     '&:active': {
       extend: 'active',
     },
+
+    width: 'var(--icon-button-size)',
+    height: 'var(--icon-button-size)',
+    '--icon-button-icon-size': '20px',
   },
 
   'cancel-light': {},
@@ -55,8 +55,8 @@ export const useStyles = createThemedStyles('IconButton', {
   icon: {
     display: 'flex',
     alignItems: 'center',
-    width: ICON_SIZE,
-    height: ICON_SIZE,
+    width: 'var(--icon-button-icon-size)',
+    height: 'var(--icon-button-icon-size)',
   },
 
   loader: {
@@ -66,18 +66,20 @@ export const useStyles = createThemedStyles('IconButton', {
     top: '50%',
     transform: 'translate(-50%, -50%)',
 
-    width: ICON_SIZE,
-    height: ICON_SIZE,
+    width: 'var(--icon-button-icon-size)',
+    height: 'var(--icon-button-icon-size)',
   },
 
   s: {
-    width: BUTTON_SIZE_S,
-    height: BUTTON_SIZE_S,
+    '--icon-button-size': '24px',
   },
 
   m: {
-    width: BUTTON_SIZE_M,
-    height: BUTTON_SIZE_M,
+    '--icon-button-size': '32px',
+  },
+
+  l: {
+    '--icon-button-size': '40px',
   },
 });
 

package/src/components/IconButton/constants.ts

@@ -1,3 +1,3 @@
-export const ICON_BUTTON_SIZES = ['s', 'm'] as const;
+export const ICON_BUTTON_SIZES = ['s', 'm', 'l'] as const;
 
 export const ICON_BUTTON_VIEWS = ['cancel', 'cancel-light', 'main', 'custom'] as const;

package/src/components/Input/Input.tsx

@@ -80,7 +80,11 @@ export interface IInputProps
   shouldFocusOnMount?: boolean;
   /** @default false */
   shouldAlwaysShowPlaceholder?: boolean;
-  onChange: (value: string, event: FormEvent<HTMLInputElement>) => void;
+  onChange: (
+    value: string,
+    event: FormEvent<HTMLInputElement>,
+    eventType: 'change' | 'clear',
+  ) => void;
   onIconClick?: () => void;
 }
 
@@ -139,7 +143,7 @@ export const Input = forwardRef<HTMLInputElement, IInputProps>(
     const inputRef = useRef<HTMLInputElement>(null);
 
     const handleChange = (event: FormEvent<HTMLInputElement>) => {
-      onChange(event.currentTarget.value, event);
+      onChange(event.currentTarget.value, event, 'change');
     };
 
     const handleFocus = (event: FocusEvent<HTMLInputElement>) => {
@@ -155,7 +159,7 @@ export const Input = forwardRef<HTMLInputElement, IInputProps>(
     // для SmartInput нужен event, иначе onChange не вызовется
     const handleOnInputClear = async (event: MouseEvent<HTMLDivElement>) => {
       // await не убирать (важно для порядка выполнения (сначала onChange, затем focus)
-      await onChange('', event as any);
+      await onChange('', event as any, 'clear');
       const input = (ref as MutableRefObject<HTMLInputElement>) ?? inputRef;
       input.current?.focus();
     };