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

package/dist/true-react-common-ui-kit.umd.cjs

@@ -1068,6 +1068,7 @@
       }
     }
   };
+  var SLIDE_UP_ANIMATION_DURATION = 150;
   var SLIDE_UP_POSITION_START = 15;
   var SLIDE_UP_POSITION_END = 0;
   var animations = {
@@ -1081,7 +1082,7 @@
       "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": {
@@ -1091,7 +1092,7 @@
       "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"
       }
     }
@@ -6580,63 +6581,63 @@
       return trueReactPlatformHelpers.mergeRefs(refs);
     }, refs);
   };
-  const avatarGreen = `  <svg\r
-    width="100%"\r
-    height="100%"\r
-    viewBox="0 0 32 32"\r
-    fill="none"\r
-    xmlns="http://www.w3.org/2000/svg"\r
-  >\r
-    <circle opacity="0.5" cx="16" cy="16" r="16" fill="#DDE3ED" />\r
-    <mask\r
-      id="mask0_0_12744"\r
-      style="mask-type: 'alpha';"\r
-      maskUnits="userSpaceOnUse"\r
-      x="0"\r
-      y="0"\r
-      width="32"\r
-      height="32"\r
-    >\r
-      <circle cx="16" cy="16" r="16" fill="white" />\r
-    </mask>\r
-    <g mask="url(#mask0_0_12744)">\r
-      <circle cx="16" cy="29" r="13" fill="url(#paint0_linear_0_12744)" />\r
-      <mask\r
-        id="mask1_0_12744"\r
-        style="mask-type: 'alpha';"\r
-        maskUnits="userSpaceOnUse"\r
-        x="3"\r
-        y="16"\r
-        width="26"\r
-        height="26"\r
-      >\r
-        <circle cx="16" cy="29" r="13" fill="white" />\r
-      </mask>\r
-      <g mask="url(#mask1_0_12744)">\r
-        <ellipse\r
-          cx="16"\r
-          cy="17.5"\r
-          rx="6"\r
-          ry="7.5"\r
-          fill="#505F79"\r
-          fill-opacity="0.204983"\r
-        />\r
-      </g>\r
-    </g>\r
-    <ellipse cx="16" cy="13" rx="6" ry="7" fill="white" />\r
-    <defs>\r
-      <linearGradient\r
-        id="paint0_linear_0_12744"\r
-        x1="13.347"\r
-        y1="46.279"\r
-        x2="33.5318"\r
-        y2="30.8088"\r
-        gradientUnits="userSpaceOnUse"\r
-      >\r
-        <stop stop-color="#ABD229" />\r
-        <stop offset="1" stop-color="#9CD03F" />\r
-      </linearGradient>\r
-    </defs>\r
+  const avatarGreen = `  <svg
+    width="100%"
+    height="100%"
+    viewBox="0 0 32 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle opacity="0.5" cx="16" cy="16" r="16" fill="#DDE3ED" />
+    <mask
+      id="mask0_0_12744"
+      style="mask-type: 'alpha';"
+      maskUnits="userSpaceOnUse"
+      x="0"
+      y="0"
+      width="32"
+      height="32"
+    >
+      <circle cx="16" cy="16" r="16" fill="white" />
+    </mask>
+    <g mask="url(#mask0_0_12744)">
+      <circle cx="16" cy="29" r="13" fill="url(#paint0_linear_0_12744)" />
+      <mask
+        id="mask1_0_12744"
+        style="mask-type: 'alpha';"
+        maskUnits="userSpaceOnUse"
+        x="3"
+        y="16"
+        width="26"
+        height="26"
+      >
+        <circle cx="16" cy="29" r="13" fill="white" />
+      </mask>
+      <g mask="url(#mask1_0_12744)">
+        <ellipse
+          cx="16"
+          cy="17.5"
+          rx="6"
+          ry="7.5"
+          fill="#505F79"
+          fill-opacity="0.204983"
+        />
+      </g>
+    </g>
+    <ellipse cx="16" cy="13" rx="6" ry="7" fill="white" />
+    <defs>
+      <linearGradient
+        id="paint0_linear_0_12744"
+        x1="13.347"
+        y1="46.279"
+        x2="33.5318"
+        y2="30.8088"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#ABD229" />
+        <stop offset="1" stop-color="#9CD03F" />
+      </linearGradient>
+    </defs>
   </svg>`;
   var complexIcons = {
     avatar: avatarGreen
@@ -11459,7 +11460,9 @@
       optionsMode
     ]);
     var debounceHandleOnType = React.useMemo(function() {
-      return tsDebounce.debounce(handleOnType, debounceTime);
+      return tsDebounce.debounce(handleOnType, debounceTime, {
+        isImmediate: debounceTime === 0
+      });
     }, [
       handleOnType,
       debounceTime
@@ -17634,6 +17637,21 @@
     },
     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) {
@@ -17789,7 +17807,10 @@
     }), refs = _useFloating.refs, floatingStyles = _useFloating.floatingStyles, context = _useFloating.context;
     var hover = react.useHover(context, {
       enabled: eventType === "hover",
-      delay: hoverDelay
+      delay: typeof hoverDelay === "number" ? {
+        open: hoverDelay,
+        close: 0
+      } : hoverDelay
     });
     var click = react.useClick(context, {
       enabled: eventType === "click",
@@ -17804,7 +17825,11 @@
       click,
       dismiss
     ]).getFloatingProps;
-    var _useTransitionStatus = react.useTransitionStatus(context), isMounted = _useTransitionStatus.isMounted, status = _useTransitionStatus.status;
+    var _useTransitionStatus = react.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))
@@ -17827,10 +17852,12 @@
             className: classes.popup,
             ref: refs.setFloating
           }, getFloatingProps()), {
-            children: trueReactPlatformHelpers.isFunction(children) ? children({
-              status,
-              onClose: handleClose
-            }) : children
+            children: /* @__PURE__ */ jsx("div", {
+              className: classes["dropdown-".concat(status)],
+              children: trueReactPlatformHelpers.isFunction(children) ? children({
+                onClose: handleClose
+              }) : children
+            })
           }))
         })
       ]
@@ -17937,20 +17964,6 @@
       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) {
@@ -18010,6 +18023,11 @@
     var classes = useStyles$p({
       theme: tweakStyles
     });
+    var tweakWithPopupStyles = useTweakStyles({
+      tweakStyles,
+      className: "tweakWithPopup",
+      currentComponentName: "FilterWrapper"
+    });
     var tweakFilterValueViewStyles = useTweakStyles({
       tweakStyles,
       className: "tweakValueView",
@@ -18036,6 +18054,7 @@
       placement: "bottom-start",
       canBeFlipped: true,
       isDisabled: isBoolean || isDisabled,
+      tweakStyles: tweakWithPopupStyles,
       trigger: function(param2) {
         var isActive = param2.isActive;
         var _obj;
@@ -18072,18 +18091,15 @@
         }));
       },
       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
         });
       }
     });
@@ -25219,7 +25235,7 @@
                 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,
@@ -25227,13 +25243,16 @@
                     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: trueReactPlatformHelpers.isNotEmpty(onHeadClick) ? function() {
+                    return onHeadClick(key);
+                  } : void 0
+                }, addDataAttributes({
+                  id: (itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.shouldRenderDataId) ? key : void 0
+                })), {
                   children: trueReactPlatformHelpers.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);
               })
             })
           }),
@@ -30377,6 +30396,7 @@
   exports2.NumberInput = NumberInput;
   exports2.PhoneInput = PhoneInput;
   exports2.RadioButton = RadioButton;
+  exports2.SLIDE_UP_ANIMATION_DURATION = SLIDE_UP_ANIMATION_DURATION;
   exports2.ScrollIntoViewIfNeeded = ScrollIntoViewIfNeeded;
   exports2.SearchInput = SearchInput;
   exports2.Select = Select;