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

package/README.md

@@ -10,6 +10,12 @@
 
 # Release Notes
 
+## v3.11.0
+
+### Changes
+
+- Добавляет **animations.defaultTransition**
+
 ## v3.10.0
 
 ### Changes

package/dist/theme/common.d.ts

@@ -67,6 +67,7 @@ export declare const helpers: {
     };
 };
 export declare const animations: {
+    defaultTransition: string;
     slideUp: {
         'slide-up-enter': {
             opacity: number;
@@ -94,5 +95,6 @@ export interface ICommonUiKitTheme extends IUiKitTheme {
     colors: typeof colors;
     dimensions: typeof dimensions;
     helpers: typeof helpers;
+    animations: typeof animations;
 }
 export declare const common: ICommonUiKitTheme;

package/dist/true-react-common-ui-kit.js

@@ -1082,6 +1082,7 @@ var helpers = {
 var SLIDE_UP_POSITION_START = 15;
 var SLIDE_UP_POSITION_END = 0;
 var animations = {
+  defaultTransition: "0.25s ease-in-out",
   // Если понадобится, сюда можно пробросить параметры через useTheme props
   slideUp: {
     "slide-up-enter": {
@@ -7738,7 +7739,8 @@ var useStyles$S = createThemedStyles("ListItem", {
       0,
       ITEM_HORIZONTAL_PADDING$1
     ],
-    transition: "background-color 0.25s ease-in-out",
+    transition: animations.defaultTransition,
+    transitionProperty: "background-color",
     cursor: "pointer"
   },
   default: {},
@@ -7871,7 +7873,8 @@ var useStyles$R = createThemedStyles("List", {
       0,
       ITEM_HORIZONTAL_PADDING
     ],
-    transition: "background-color 0.25s ease-in-out",
+    transition: animations.defaultTransition,
+    transitionProperty: "background-color",
     cursor: "pointer"
   },
   disabledItem: {
@@ -8014,13 +8017,14 @@ var useStyles$Q = createThemedStyles("AccountInfo", _object_spread$T({
       10
     ],
     fontSize: 14,
-    transition: "color 0.25s ease-in-out"
+    transition: animations.defaultTransition,
+    transitionProperty: "color"
   },
   accountNameOpened: {},
   accountChevron: {
     width: 16,
     height: 16,
-    transition: "ease-in-out 0.25s",
+    transition: animations.defaultTransition,
     transitionProperty: "transform, color"
   },
   accountChevronOpened: {
@@ -8554,7 +8558,7 @@ var useStyles$L = 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: [
@@ -9026,7 +9030,8 @@ var useStyles$J = 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)
     },
@@ -9288,7 +9293,7 @@ var useStyles$G = 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"
@@ -9308,7 +9313,7 @@ var useStyles$G = 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",
@@ -9394,7 +9399,7 @@ var useStyles$G = createThemedStyles("Input", {
     top: "50%",
     transformOrigin: "top left",
     transform: "translateY(-50%)",
-    transition: "0.25s ease-in-out",
+    transition: animations.defaultTransition,
     transitionProperty: "transform, color",
     fontSize: 16
   },
@@ -9503,7 +9508,8 @@ var useStyles$G = createThemedStyles("Input", {
       4
     ],
     width: 20,
-    transition: "color 0.25s ease-in-out",
+    transition: animations.defaultTransition,
+    transitionProperty: "color",
     boxSizing: "content-box",
     "&:last-child": {
       paddingRight: 8
@@ -13333,7 +13339,8 @@ var useStyles$y = createThemedStyles("FiltersPane", {
     width: 40,
     height: FILTER_HEIGHT,
     cursor: "pointer",
-    transition: "background-color 0.25s ease-in-out"
+    transition: animations.defaultTransition,
+    transitionProperty: "background-color"
   },
   settingsIcon: {
     width: 16,
@@ -14619,7 +14626,8 @@ var useStyles$v = 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"
   },
   option: {
@@ -17314,7 +17322,7 @@ var useStyles$s = createThemedStyles("FiltersPaneSearch", {
     ],
     borderRadius: 18,
     paddingRight: 8,
-    transition: "0.25s ease-in-out",
+    transition: animations.defaultTransition,
     transitionProperty: "background-color, border-color"
   },
   focused: {
@@ -17797,7 +17805,7 @@ function FilterValueView(param) {
 var useStyles$q = createThemedStyles("FilterWrapper", {
   root: {
     position: "relative",
-    transition: "0.25s ease-in-out",
+    transition: animations.defaultTransition,
     transitionProperty: "background-color, border-color",
     border: [
       1,
@@ -24556,11 +24564,8 @@ var useStyles$n = 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)"
       }
@@ -25333,7 +25338,7 @@ var useStyles$k = 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",
@@ -25536,7 +25541,8 @@ var useStyles$j = 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",
@@ -26314,7 +26320,8 @@ var useStyles$h = 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)
     },
@@ -27854,7 +27861,7 @@ var useStyles$a = createThemedStyles("Selector", {
       height: "calc(100% - ".concat(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"
     },
     "&$invalid": {
@@ -27867,7 +27874,8 @@ var useStyles$a = 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": {
         padding: [
@@ -28659,8 +28667,8 @@ var useStyles$8 = createThemedStyles("Switch", {
     backgroundColor: "#333",
     borderRadius: 10,
     boxSizing: "border-box",
+    transition: animations.defaultTransition,
     transitionProperty: "opacity, background-color",
-    transition: "0.25s ease-in-out",
     "&::before": {
       content: '""',
       position: "absolute",
@@ -28673,16 +28681,16 @@ var useStyles$8 = createThemedStyles("Switch", {
       backgroundColor: "#fff",
       borderRadius: "50%",
       zIndex: 1,
-      transitionProperty: "left, background-color",
-      transition: "0.25s ease-in-out"
+      transition: animations.defaultTransition,
+      transitionProperty: "left, background-color"
     }
   },
   input: {
     display: "none"
   },
   label: {
-    transitionProperty: "opacity, color",
-    transition: "0.25s ease-in-out"
+    transition: animations.defaultTransition,
+    transitionProperty: "opacity, color"
   },
   labelLeft: {
     order: -1,
@@ -28792,7 +28800,7 @@ var useStyles$7 = createThemedStyles("TextArea", {
     width: "100%",
     flexGrow: 1,
     boxSizing: "border-box",
-    transition: "0.25s ease-in-out",
+    transition: animations.defaultTransition,
     transitionProperty: "border-color",
     backgroundColor: "white",
     border: [
@@ -28814,7 +28822,7 @@ var useStyles$7 = createThemedStyles("TextArea", {
       PADDING_X,
       8
     ],
-    transition: "0.25s ease-in-out",
+    transition: animations.defaultTransition,
     transitionProperty: "background-color",
     border: "none",
     resize: "none",
@@ -28866,7 +28874,7 @@ var useStyles$7 = 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
   },
@@ -29136,7 +29144,8 @@ var useStyles$6 = createThemedStyles("TextButton", {
     borderRadius: 0,
     cursor: "pointer",
     outline: "none",
-    transition: "color 0.25s ease-in-out",
+    transition: animations.defaultTransition,
+    transitionProperty: "color",
     "&[disabled]": {
       cursor: "default",
       pointerEvents: "none"
@@ -29175,7 +29184,7 @@ var useStyles$6 = createThemedStyles("TextButton", {
     width: 24,
     height: 24,
     borderRadius: "50%",
-    transition: "0.25s ease-in-out",
+    transition: animations.defaultTransition,
     transitionProperty: [
       "background",
       "color"
@@ -30386,7 +30395,8 @@ var useStyles = createThemedStyles("NewMoreMenu", {
     borderRadius: "50%",
     border: "none",
     cursor: "pointer",
-    transition: "background-color 0.25s ease-in-out"
+    transition: animations.defaultTransition,
+    transitionProperty: "background-color"
   },
   icon: {
     width: 30,