@true-engineering/true-react-common-ui-kit 3.17.0 → 3.18.0

package/README.md

@@ -11,6 +11,13 @@
 
 # Release Notes
 
+## v3.18.0
+
+### Changes
+
+- **WithPopup**: добавлены классы для анимации
+- **FilterWrapper**: анимация вынесена в темы
+
 ## v3.17.0
 
 ### Changes

package/dist/components/FiltersPane/components/FilterWrapper/FilterWrapper.styles.d.ts

@@ -1,6 +1,8 @@
 import { ITweakStyles } from '../../../../theme';
+import { IWithPopupStyles } from '../../../WithPopup';
 import type { IFilterValueViewStyles } from '../FilterValueView';
-export declare const useStyles: import("../../../../theme").IUseStyles<"boolean" | "name" | "left" | "right" | "item" | "value" | "root" | "open" | "disabled" | "booleanItem" | "noValue" | "openNoValue" | "openWithValue" | "withValue" | "iconContainer" | "dropdown" | "animationEnd" | "animationStart" | "dropdown-initial" | "dropdown-open" | "dropdown-close" | "dropdown-unmounted", unknown>;
+export declare const useStyles: import("../../../../theme").IUseStyles<"boolean" | "name" | "left" | "right" | "item" | "value" | "root" | "open" | "disabled" | "booleanItem" | "noValue" | "openNoValue" | "openWithValue" | "withValue" | "iconContainer" | "dropdown", unknown>;
 export type IFilterWrapperStyles = ITweakStyles<typeof useStyles, {
+    tweakWithPopup: IWithPopupStyles;
     tweakValueView: IFilterValueViewStyles;
 }>;

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

@@ -1,6 +1,6 @@
 import { ITweakStyles } from '../../theme';
 import { IIconButtonStyles } from '../IconButton';
-export declare const useStyles: import("../../theme").IUseStyles<"content" | "close" | "overlay" | "root" | "s" | "m" | "l" | "footer" | "animationEnd" | "animationStart" | "fixedPosition" | "innerOverlay" | "sideBar" | "position-static" | "position-left" | "position-right" | "position-center" | "modal" | "title" | "titleWithCloseButton" | "stickyFooterWrapper" | "stickyFooter" | "buttons-left" | "buttons-center" | "buttons-right" | "withoutFooter" | "withStickyFooter" | "footerWrapper" | "modalWrapper" | "modal-enter" | "modal-enter-active" | "modal-exit" | "modal-exit-active", unknown>;
+export declare const useStyles: import("../../theme").IUseStyles<"content" | "close" | "overlay" | "root" | "s" | "m" | "l" | "footer" | "fixedPosition" | "innerOverlay" | "sideBar" | "position-static" | "position-left" | "position-right" | "position-center" | "modal" | "title" | "titleWithCloseButton" | "stickyFooterWrapper" | "stickyFooter" | "buttons-left" | "buttons-center" | "buttons-right" | "withoutFooter" | "withStickyFooter" | "footerWrapper" | "modalWrapper" | "animationEnd" | "animationStart" | "modal-enter" | "modal-enter-active" | "modal-exit" | "modal-exit-active", unknown>;
 export declare const closeButtonStyles: IIconButtonStyles;
 export type IModalStyles = ITweakStyles<typeof useStyles, {
     tweakCloseButton: IIconButtonStyles;

package/dist/components/WithPopup/WithPopup.d.ts

@@ -1,14 +1,13 @@
 import { FC, ReactNode } from 'react';
 import { Placement, Middleware, OffsetOptions, UseHoverProps } from '@floating-ui/react';
 import { ICommonProps } from '../../types';
-import { IPopupEventType, ITransitionStatus } from './types';
+import { IPopupEventType } from './types';
 import { IWithPopupStyles } from './WithPopup.styles';
 export interface IWithPopupProps extends ICommonProps<IWithPopupStyles> {
     trigger: ReactNode | FC<{
         isActive: boolean;
     }>;
     children: ReactNode | FC<{
-        status: ITransitionStatus;
         onClose: () => void;
     }>;
     middlewares?: Middleware[];

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

@@ -1,3 +1,3 @@
 import { ITweakStyles } from '../../theme';
-export declare const useStyles: import("../../theme").IUseStyles<"root" | "disabled" | "trigger" | "popup", unknown>;
+export declare const useStyles: import("../../theme").IUseStyles<"root" | "disabled" | "animationEnd" | "animationStart" | "trigger" | "popup" | "dropdown-initial" | "dropdown-open" | "dropdown-close" | "dropdown-unmounted", unknown>;
 export type IWithPopupStyles = ITweakStyles<typeof useStyles>;

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

@@ -1,4 +1,2 @@
-import type { useTransitionStatus } from '@floating-ui/react';
 import type { POPUP_EVENT_TYPES } from './constants';
 export type IPopupEventType = (typeof POPUP_EVENT_TYPES)[number];
-export type ITransitionStatus = ReturnType<typeof useTransitionStatus>['status'];

package/dist/theme/common.d.ts

@@ -66,6 +66,7 @@ export declare const helpers: {
         };
     };
 };
+export declare const SLIDE_UP_ANIMATION_DURATION = 150;
 export declare const animations: {
     defaultTransition: string;
     slideUp: {

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

@@ -1079,6 +1079,7 @@ var helpers = {
     }
   }
 };
+var SLIDE_UP_ANIMATION_DURATION = 150;
 var SLIDE_UP_POSITION_START = 15;
 var SLIDE_UP_POSITION_END = 0;
 var animations = {
@@ -1092,7 +1093,7 @@ var animations = {
     "slide-up-enter-active": {
       opacity: 1,
       transform: "translateY(".concat(SLIDE_UP_POSITION_END, "px)"),
-      transition: "150ms ease-in-out",
+      transition: "".concat(SLIDE_UP_ANIMATION_DURATION, "ms ease-in-out"),
       transitionProperty: "opacity, transform"
     },
     "slide-up-exit-active": {
@@ -1102,7 +1103,7 @@ var animations = {
     "slide-up-exit": {
       opacity: 0,
       transform: "translateY(".concat(SLIDE_UP_POSITION_START, "px)"),
-      transition: "150ms ease-in-out",
+      transition: "".concat(SLIDE_UP_ANIMATION_DURATION, "ms ease-in-out"),
       transitionProperty: "opacity, transform"
     }
   }
@@ -17645,6 +17646,21 @@ var useStyles$q = createThemedStyles("WithPopup", {
   },
   popup: {
     zIndex: 5
+  },
+  animationEnd: {},
+  animationStart: {},
+  "dropdown-initial": {
+    extend: "animationEnd"
+  },
+  "dropdown-open": {
+    extend: "animationStart"
+  },
+  "dropdown-close": {
+    visibility: "hidden",
+    extend: "animationEnd"
+  },
+  "dropdown-unmounted": {
+    extend: "animationEnd"
   }
 });
 function _array_like_to_array$a(arr, len) {
@@ -17800,7 +17816,10 @@ var WithPopup = function(param) {
   }), refs = _useFloating.refs, floatingStyles = _useFloating.floatingStyles, context = _useFloating.context;
   var hover = useHover(context, {
     enabled: eventType === "hover",
-    delay: hoverDelay
+    delay: typeof hoverDelay === "number" ? {
+      open: hoverDelay,
+      close: 0
+    } : hoverDelay
   });
   var click = useClick(context, {
     enabled: eventType === "click",
@@ -17815,7 +17834,11 @@ var WithPopup = function(param) {
     click,
     dismiss
   ]).getFloatingProps;
-  var _useTransitionStatus = useTransitionStatus(context), isMounted = _useTransitionStatus.isMounted, status = _useTransitionStatus.status;
+  var _useTransitionStatus = useTransitionStatus(context, {
+    duration: {
+      close: 500
+    }
+  }), isMounted = _useTransitionStatus.isMounted, status = _useTransitionStatus.status;
   return /* @__PURE__ */ jsxs("div", _object_spread_props$q(_object_spread$r({
     ref: refs.setReference,
     className: clsx(classes.root, _define_property$s({}, classes.disabled, isDisabled))
@@ -17838,10 +17861,12 @@ var WithPopup = function(param) {
           className: classes.popup,
           ref: refs.setFloating
         }, getFloatingProps()), {
-          children: isFunction$1(children) ? children({
-            status,
-            onClose: handleClose
-          }) : children
+          children: /* @__PURE__ */ jsx("div", {
+            className: classes["dropdown-".concat(status)],
+            children: isFunction$1(children) ? children({
+              onClose: handleClose
+            }) : children
+          })
         }))
       })
     ]
@@ -17948,20 +17973,6 @@ var useStyles$p = createThemedStyles("FilterWrapper", {
     fontWeight: "bold",
     display: "flex",
     minWidth: 0
-  },
-  animationEnd: animations.slideUp["slide-up-exit"],
-  animationStart: animations.slideUp["slide-up-enter-active"],
-  "dropdown-initial": {
-    extend: "animationEnd"
-  },
-  "dropdown-open": {
-    extend: "animationStart"
-  },
-  "dropdown-close": {
-    extend: "animationEnd"
-  },
-  "dropdown-unmounted": {
-    extend: "animationEnd"
   }
 });
 function _define_property$r(obj, key, value) {
@@ -18021,6 +18032,11 @@ function FilterWrapper(param) {
   var classes = useStyles$p({
     theme: tweakStyles
   });
+  var tweakWithPopupStyles = useTweakStyles({
+    tweakStyles,
+    className: "tweakWithPopup",
+    currentComponentName: "FilterWrapper"
+  });
   var tweakFilterValueViewStyles = useTweakStyles({
     tweakStyles,
     className: "tweakValueView",
@@ -18047,6 +18063,7 @@ function FilterWrapper(param) {
     placement: "bottom-start",
     canBeFlipped: true,
     isDisabled: isBoolean || isDisabled,
+    tweakStyles: tweakWithPopupStyles,
     trigger: function(param2) {
       var isActive = param2.isActive;
       var _obj;
@@ -18083,18 +18100,15 @@ function FilterWrapper(param) {
       }));
     },
     children: function(param2) {
-      var onClose = param2.onClose, status = param2.status;
-      return /* @__PURE__ */ jsx("div", {
-        className: classes["dropdown-".concat(status)],
-        children: /* @__PURE__ */ jsx(Filter, {
-          value,
-          filter,
-          localeKey,
-          locale: locale2,
-          onClose,
-          onChange,
-          testId
-        })
+      var onClose = param2.onClose;
+      return /* @__PURE__ */ jsx(Filter, {
+        value,
+        filter,
+        localeKey,
+        locale: locale2,
+        onClose,
+        onChange,
+        testId
       });
     }
   });
@@ -25230,7 +25244,7 @@ function FlexibleTable(_param) {
               var TitleComponent = itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.titleComponent;
               var _itemConfig_titleAlign, _itemConfig_title;
               var _obj;
-              return /* @__PURE__ */ jsx(TableHeader, {
+              return /* @__PURE__ */ jsx(TableHeader, _object_spread_props$k(_object_spread$l({
                 className: clsx(classes.header, (_obj = {}, _define_property$m(_obj, classes.headerSticky, isFirstColumnSticky && i === 0), _define_property$m(_obj, classes.headerSecond, isFirstColumnSticky && i === 1), _obj)),
                 style: {
                   minWidth: itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.minWidth,
@@ -25238,13 +25252,16 @@ function FlexibleTable(_param) {
                   maxWidth: itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.maxWidth,
                   textAlign: (_itemConfig_titleAlign = itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.titleAlign) !== null && _itemConfig_titleAlign !== void 0 ? _itemConfig_titleAlign : "left"
                 },
-                onClick: function() {
-                  return onHeadClick === null || onHeadClick === void 0 ? void 0 : onHeadClick(key);
-                },
+                onClick: isNotEmpty(onHeadClick) ? function() {
+                  return onHeadClick(key);
+                } : void 0
+              }, addDataAttributes({
+                id: (itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.shouldRenderDataId) ? key : void 0
+              })), {
                 children: isNotEmpty(TitleComponent) ? /* @__PURE__ */ jsx(TitleComponent, {
                   value: headerContent === null || headerContent === void 0 ? void 0 : headerContent[key]
                 }) : (_itemConfig_title = itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.title) !== null && _itemConfig_title !== void 0 ? _itemConfig_title : ""
-              }, key);
+              }), key);
             })
           })
         }),
@@ -30389,6 +30406,7 @@ export {
   NumberInput,
   PhoneInput,
   RadioButton,
+  SLIDE_UP_ANIMATION_DURATION,
   ScrollIntoViewIfNeeded,
   SearchInput,
   Select,