@true-engineering/true-react-common-ui-kit 3.10.0 → 3.11.0

package/package.json

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

package/src/components/AccountInfo/AccountInfo.styles.ts

@@ -16,7 +16,8 @@ export const useStyles = createThemedStyles('AccountInfo', {
   accountName: {
     margin: [0, 2, 0, 10],
     fontSize: 14,
-    transition: 'color 0.25s ease-in-out',
+    transition: animations.defaultTransition,
+    transitionProperty: 'color',
   },
 
   accountNameOpened: {},
@@ -24,7 +25,7 @@ export const useStyles = createThemedStyles('AccountInfo', {
   accountChevron: {
     width: 16,
     height: 16,
-    transition: 'ease-in-out 0.25s',
+    transition: animations.defaultTransition,
     transitionProperty: 'transform, color',
   },
 

package/src/components/Button/Button.styles.ts

@@ -1,4 +1,4 @@
-import { createThemedStyles, ITweakStyles } from '../../theme';
+import { animations, createThemedStyles, ITweakStyles } from '../../theme';
 import { IThemedPreloaderStyles } from '../ThemedPreloader';
 import { IButtonSize } from './types';
 
@@ -10,7 +10,7 @@ export const useStyles = createThemedStyles('Button', {
     cursor: 'pointer',
     outline: 'none',
     boxSizing: 'border-box',
-    transition: '0.25s ease-in-out',
+    transition: animations.defaultTransition,
     transitionProperty: 'background-color, color, box-shadow, border-color',
     maxWidth: '100%',
     border: [1, 'solid', 'transparent'],

package/src/components/CloseButton/CloseButton.styles.ts

@@ -1,5 +1,5 @@
 import { rgba } from '../../helpers';
-import { colors, createThemedStyles, ITweakStyles } from '../../theme';
+import { animations, colors, createThemedStyles, ITweakStyles } from '../../theme';
 
 export const useStyles = createThemedStyles('CloseButton', {
   root: {
@@ -14,7 +14,8 @@ export const useStyles = createThemedStyles('CloseButton', {
     appearance: 'none',
     backgroundColor: 'transparent',
     cursor: 'pointer',
-    transition: 'background-color 0.25s ease-in-out',
+    transition: animations.defaultTransition,
+    transitionProperty: 'background-color',
 
     '&:hover': {
       backgroundColor: rgba(colors.BORDER_MAIN, 0.5),

package/src/components/FiltersPane/FiltersPane.styles.ts

@@ -1,4 +1,4 @@
-import { colors, ITweakStyles, createThemedStyles } from '../../theme';
+import { colors, ITweakStyles, createThemedStyles, animations } from '../../theme';
 import { IButtonStyles } from '../Button';
 
 export const FILTER_HEIGHT = 36;
@@ -20,7 +20,8 @@ export const useStyles = createThemedStyles('FiltersPane', {
     width: 40,
     height: FILTER_HEIGHT,
     cursor: 'pointer',
-    transition: 'background-color 0.25s ease-in-out',
+    transition: animations.defaultTransition,
+    transitionProperty: 'background-color',
   },
 
   settingsIcon: {

package/src/components/FiltersPane/components/FilterSelect/FilterSelect.styles.ts

@@ -1,5 +1,5 @@
 import cloneDeep from 'lodash-es/cloneDeep';
-import { colors, createThemedStyles, helpers, ITweakStyles } from '../../../../theme';
+import { animations, colors, createThemedStyles, helpers, ITweakStyles } from '../../../../theme';
 import { IButtonStyles } from '../../../Button';
 import { ISearchInputStyles } from '../../../SearchInput';
 import { innerTextButtonStyles } from '../../FiltersPane.styles';
@@ -55,7 +55,8 @@ export const useStyles = createThemedStyles('FilterSelect', {
     cursor: 'pointer',
     fontSize: 14,
     minHeight: ITEM_HEIGHT,
-    transition: 'background-color 0.25s ease-in-out',
+    transition: animations.defaultTransition,
+    transitionProperty: 'background-color',
     boxSizing: 'border-box',
   },
 

package/src/components/FiltersPane/components/FilterWrapper/FilterWrapper.styles.ts

@@ -1,11 +1,11 @@
-import { colors, createThemedStyles, ITweakStyles } from '../../../../theme';
+import { animations, colors, createThemedStyles, ITweakStyles } from '../../../../theme';
 import type { IFilterValueViewStyles } from '../FilterValueView';
 import { FILTER_HEIGHT } from '../../FiltersPane.styles';
 
 export const useStyles = createThemedStyles('FilterWrapper', {
   root: {
     position: 'relative',
-    transition: '0.25s ease-in-out',
+    transition: animations.defaultTransition,
     transitionProperty: 'background-color, border-color',
     border: [1, 'solid', colors.BORDER_MAIN],
     borderRadius: 18,

package/src/components/FiltersPane/components/FiltersPaneSearch/FiltersPaneSearch.styles.ts

@@ -1,5 +1,11 @@
 import { rgba } from '../../../../helpers';
-import { colors, createThemedStyles, dimensions, ITweakStyles } from '../../../../theme';
+import {
+  animations,
+  colors,
+  createThemedStyles,
+  dimensions,
+  ITweakStyles,
+} from '../../../../theme';
 import { ISearchInputStyles } from '../../../SearchInput';
 import { ISelectStyles } from '../../../Select';
 import { FILTER_HEIGHT } from '../../FiltersPane.styles';
@@ -12,7 +18,7 @@ export const useStyles = createThemedStyles('FiltersPaneSearch', {
     border: [1, 'transparent', 'solid'],
     borderRadius: 18,
     paddingRight: 8,
-    transition: '0.25s ease-in-out',
+    transition: animations.defaultTransition,
     transitionProperty: 'background-color, border-color',
   },
 

package/src/components/FlexibleTable/FlexibleTable.styles.ts

@@ -1,5 +1,5 @@
 import { rgba } from '../../helpers';
-import { colors, ITweakStyles, createThemedStyles } from '../../theme';
+import { colors, ITweakStyles, createThemedStyles, animations } from '../../theme';
 import type { IFlexibleTableRowStyles } from './components';
 
 export const STICKY_SHADOW_PADDING = 12;
@@ -72,7 +72,8 @@ export const useStyles = createThemedStyles('FlexibleTable', {
       background: 'transparent',
       pointerEvents: 'none',
       zIndex: 1,
-      transition: ['box-shadow', '0.25s', 'ease-in-out'],
+      transition: animations.defaultTransition,
+      transitionProperty: 'box-shadow',
 
       '[data-scrolled] &': {
         boxShadow: '4px 0 4px rgba(0, 0, 0, 0.05)',

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

@@ -1,4 +1,4 @@
-import { ITweakStyles, createThemedStyles } from '../../theme';
+import { ITweakStyles, animations, createThemedStyles } from '../../theme';
 
 const BUTTON_SIZE_S = 24;
 const BUTTON_SIZE_M = 32;
@@ -12,7 +12,7 @@ export const useStyles = createThemedStyles('IconButton', {
     cursor: 'pointer',
     outline: 'none',
     boxSizing: 'border-box',
-    transition: '0.25s ease-in-out',
+    transition: animations.defaultTransition,
     transitionProperty: 'background-color, color, border-color',
     border: 'none',
     position: 'relative',

package/src/components/IncrementInput/IncrementInput.styles.ts

@@ -1,4 +1,4 @@
-import { colors, dimensions, ITweakStyles, createThemedStyles } from '../../theme';
+import { colors, dimensions, ITweakStyles, createThemedStyles, animations } from '../../theme';
 import { IInputStyles } from '../Input';
 
 export const BUTTONS_WIDTH = 36;
@@ -28,7 +28,8 @@ export const useStyles = createThemedStyles('IncrementInput', {
     border: 'none',
     outline: 'none',
     backgroundColor: colors.GREY_BACKGROUND,
-    transition: 'background-color 0.25s ease-in-out',
+    transition: animations.defaultTransition,
+    transitionProperty: 'background-color',
     color: colors.FONT_MEDIUM,
     cursor: 'pointer',
     display: 'flex',

package/src/components/Input/Input.styles.ts

@@ -1,4 +1,4 @@
-import { dimensions, ITweakStyles, createThemedStyles } from '../../theme';
+import { dimensions, ITweakStyles, createThemedStyles, animations } from '../../theme';
 import { IThemedPreloaderStyles } from '../ThemedPreloader';
 
 const PADDING_X = 12;
@@ -16,7 +16,7 @@ export const useStyles = createThemedStyles('Input', {
     width: '100%',
     height: dimensions.CONTROL_HEIGHT,
     boxSizing: 'border-box',
-    transition: '0.25s ease-in-out',
+    transition: animations.defaultTransition,
     transitionProperty: 'border-color',
     backgroundColor: 'white',
     position: 'relative',
@@ -35,7 +35,7 @@ export const useStyles = createThemedStyles('Input', {
     outline: 'none',
     boxSizing: 'border-box',
     outlineStyle: 'none',
-    transition: '0.25s ease-in-out',
+    transition: animations.defaultTransition,
     transitionProperty: 'background-color',
     border: 'none',
     background: 'none',
@@ -137,7 +137,7 @@ export const useStyles = createThemedStyles('Input', {
     top: '50%',
     transformOrigin: 'top left',
     transform: 'translateY(-50%)',
-    transition: '0.25s ease-in-out',
+    transition: animations.defaultTransition,
     transitionProperty: 'transform, color',
     fontSize: 16,
   },
@@ -241,7 +241,8 @@ export const useStyles = createThemedStyles('Input', {
     alignItems: 'center',
     padding: [0, 4],
     width: 20,
-    transition: 'color 0.25s ease-in-out',
+    transition: animations.defaultTransition,
+    transitionProperty: 'color',
     boxSizing: 'content-box',
 
     '&:last-child': {

package/src/components/List/List.styles.ts

@@ -1,4 +1,4 @@
-import { colors, ITweakStyles, createThemedStyles } from '../../theme';
+import { colors, ITweakStyles, createThemedStyles, animations } from '../../theme';
 
 const ITEM_HORIZONTAL_PADDING = 16;
 const ICON_SIZE = 20;
@@ -21,7 +21,8 @@ export const useStyles = createThemedStyles('List', {
     whiteSpace: 'nowrap',
     minHeight: 40,
     padding: [0, ITEM_HORIZONTAL_PADDING],
-    transition: 'background-color 0.25s ease-in-out',
+    transition: animations.defaultTransition,
+    transitionProperty: 'background-color',
     cursor: 'pointer',
   },
 

package/src/components/List/components/ListItem/ListItem.styles.ts

@@ -1,4 +1,4 @@
-import { colors, createThemedStyles, ITweakStyles } from '../../../../theme';
+import { animations, colors, createThemedStyles, ITweakStyles } from '../../../../theme';
 
 const ITEM_HORIZONTAL_PADDING = 16;
 const ICON_SIZE = 20;
@@ -13,7 +13,8 @@ export const useStyles = createThemedStyles('ListItem', {
     whiteSpace: 'nowrap',
     minHeight: 40,
     padding: [0, ITEM_HORIZONTAL_PADDING],
-    transition: 'background-color 0.25s ease-in-out',
+    transition: animations.defaultTransition,
+    transitionProperty: 'background-color',
     cursor: 'pointer',
   },
 

package/src/components/MoreMenu/MoreMenu.styles.ts

@@ -1,5 +1,5 @@
 import { rgba } from '../../helpers';
-import { colors, ITweakStyles, createThemedStyles } from '../../theme';
+import { colors, ITweakStyles, createThemedStyles, animations } from '../../theme';
 import { IListStyles } from '../List';
 
 export const useStyles = createThemedStyles('MoreMenu', {
@@ -21,7 +21,8 @@ export const useStyles = createThemedStyles('MoreMenu', {
     borderRadius: '50%',
     border: 'none',
     cursor: 'pointer',
-    transition: 'background-color 0.25s ease-in-out',
+    transition: animations.defaultTransition,
+    transitionProperty: 'background-color',
 
     '&$hasCircle': {
       backgroundColor: rgba(colors.GREY_HOVER, 0.5),

package/src/components/NewMoreMenu/NewMoreMenu.styles.ts

@@ -1,4 +1,4 @@
-import { colors, ITweakStyles, createThemedStyles } from '../../theme';
+import { colors, ITweakStyles, createThemedStyles, animations } from '../../theme';
 import { IListStyles } from '../List';
 import { IWithPopupStyles } from '../WithPopup';
 
@@ -17,7 +17,8 @@ export const useStyles = createThemedStyles('NewMoreMenu', {
     borderRadius: '50%',
     border: 'none',
     cursor: 'pointer',
-    transition: 'background-color 0.25s ease-in-out',
+    transition: animations.defaultTransition,
+    transitionProperty: 'background-color',
   },
 
   icon: {

package/src/components/Selector/Selector.styles.ts

@@ -1,6 +1,6 @@
 import { CSSProperties } from 'react';
 import { isNotEmpty } from '@true-engineering/true-react-platform-helpers';
-import { colors, dimensions, ITweakStyles, createThemedStyles } from '../../theme';
+import { colors, dimensions, ITweakStyles, createThemedStyles, animations } from '../../theme';
 
 const SELECTOR_TOTAL_GAP = 4;
 const SELECTOR_BORDER_WIDTH = 1;
@@ -107,7 +107,7 @@ export const useStyles = createThemedStyles('Selector', {
       height: `calc(100% - ${SELECTOR_GAP * 2}px)`,
       backgroundColor: colors.CLASSIC_WHITE,
       borderRadius: dimensions.BORDER_RADIUS_SMALL,
-      transition: '0.25s ease-in-out',
+      transition: animations.defaultTransition,
       transitionProperty: 'transform, width',
     },
 
@@ -122,7 +122,8 @@ export const useStyles = createThemedStyles('Selector', {
       height: '100%',
       color: colors.FONT_MEDIUM,
       fontSize: 16,
-      transition: 'color 0.25s ease-in-out',
+      transition: animations.defaultTransition,
+      transitionProperty: 'color',
       background: 'none',
 
       '&$s': {

package/src/components/Switch/Switch.styles.ts

@@ -1,4 +1,4 @@
-import { ITweakStyles, createThemedStyles } from '../../theme';
+import { ITweakStyles, animations, createThemedStyles } from '../../theme';
 
 export const useStyles = createThemedStyles('Switch', {
   root: {
@@ -33,8 +33,8 @@ export const useStyles = createThemedStyles('Switch', {
     backgroundColor: '#333',
     borderRadius: 10,
     boxSizing: 'border-box',
+    transition: animations.defaultTransition,
     transitionProperty: 'opacity, background-color',
-    transition: '0.25s ease-in-out',
 
     '&::before': {
       content: '""',
@@ -48,8 +48,8 @@ export const useStyles = createThemedStyles('Switch', {
       backgroundColor: '#fff',
       borderRadius: '50%',
       zIndex: 1,
+      transition: animations.defaultTransition,
       transitionProperty: 'left, background-color',
-      transition: '0.25s ease-in-out',
     },
   },
 
@@ -58,8 +58,8 @@ export const useStyles = createThemedStyles('Switch', {
   },
 
   label: {
+    transition: animations.defaultTransition,
     transitionProperty: 'opacity, color',
-    transition: '0.25s ease-in-out',
   },
 
   labelLeft: {

package/src/components/TextArea/TextArea.styles.ts

@@ -1,4 +1,4 @@
-import { ITweakStyles, createThemedStyles } from '../../theme';
+import { ITweakStyles, animations, createThemedStyles } from '../../theme';
 
 const PADDING_X = 12;
 
@@ -16,7 +16,7 @@ export const useStyles = createThemedStyles('TextArea', {
     width: '100%',
     flexGrow: 1,
     boxSizing: 'border-box',
-    transition: '0.25s ease-in-out',
+    transition: animations.defaultTransition,
     transitionProperty: 'border-color',
     backgroundColor: 'white',
     border: ['solid', 1, 'lightgray'],
@@ -31,7 +31,7 @@ export const useStyles = createThemedStyles('TextArea', {
     fontFamily: 'inherit',
     fontSize: 16,
     padding: [14, PADDING_X, 8],
-    transition: '0.25s ease-in-out',
+    transition: animations.defaultTransition,
     transitionProperty: 'background-color',
     border: 'none',
     resize: 'none',
@@ -95,7 +95,7 @@ export const useStyles = createThemedStyles('TextArea', {
     top: PADDING_X * 2,
     transformOrigin: 'top left',
     transform: 'translateY(-50%)',
-    transition: '0.25s ease-in-out',
+    transition: animations.defaultTransition,
     transitionProperty: 'transform, color',
     fontSize: 16,
   },

package/src/components/TextButton/TextButton.styles.ts

@@ -1,4 +1,4 @@
-import { createThemedStyles, ITweakStyles } from '../../theme';
+import { animations, createThemedStyles, ITweakStyles } from '../../theme';
 import { IThemedPreloaderStyles } from '../ThemedPreloader';
 
 export const useStyles = createThemedStyles('TextButton', {
@@ -12,7 +12,8 @@ export const useStyles = createThemedStyles('TextButton', {
     borderRadius: 0,
     cursor: 'pointer',
     outline: 'none',
-    transition: 'color 0.25s ease-in-out',
+    transition: animations.defaultTransition,
+    transitionProperty: 'color',
 
     '&[disabled]': {
       cursor: 'default',
@@ -65,7 +66,7 @@ export const useStyles = createThemedStyles('TextButton', {
     width: 24,
     height: 24,
     borderRadius: '50%',
-    transition: '0.25s ease-in-out',
+    transition: animations.defaultTransition,
     transitionProperty: ['background', 'color'],
   },
 

package/src/theme/common.ts

@@ -118,6 +118,7 @@ const SLIDE_UP_POSITION_START = 15;
 const SLIDE_UP_POSITION_END = 0;
 
 export const animations = {
+  defaultTransition: '0.25s ease-in-out',
   // Если понадобится, сюда можно пробросить параметры через useTheme props
   slideUp: {
     'slide-up-enter': {
@@ -150,6 +151,7 @@ export interface ICommonUiKitTheme extends IUiKitTheme {
   colors: typeof colors;
   dimensions: typeof dimensions;
   helpers: typeof helpers;
+  animations: typeof animations;
 }
 
 export const common: ICommonUiKitTheme = {