@true-engineering/true-react-common-ui-kit 3.0.2 → 3.0.4

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

@@ -1,6 +1,6 @@
 import React, { createContext, useRef, useEffect, useCallback, useState, useMemo, useContext, createElement, Fragment as Fragment$1, forwardRef, createRef, PureComponent, useLayoutEffect, memo } from "react";
 import { createUseStyles } from "react-jss";
-import { mergeStyles, isNotEmpty, isArrayNotEmpty, isEmpty, isString, isStringNotEmpty, mergeRefs, addDataTestId, isReactNodeNotEmpty, addClickHandler, getSelectKeyHandler, getTestId, createFilter, getTransition, indexMap, isNumberInteger } from "@true-engineering/true-react-platform-helpers";
+import { mergeStyles, isNotEmpty, isArrayNotEmpty, isEmpty, isString, isStringNotEmpty, mergeRefs, addDataTestId, isReactNodeNotEmpty, addClickHandler, getTestId, getSelectKeyHandler, createFilter, getTransition, indexMap, isNumberInteger } from "@true-engineering/true-react-platform-helpers";
 import { CSSTransition } from "react-transition-group";
 import clsx from "clsx";
 import hexToRgba from "hex-to-rgba";
@@ -1041,31 +1041,40 @@ var helpers = {
     };
   },
   withScrollBar: {
-    overflow: "auto",
     boxSizing: "border-box",
-    scrollbarWidth: "thin",
-    scrollbarColor: "#d0d6e1 transparent",
-    "&::-webkit-scrollbar": {
-      height: 10,
-      width: 10
-    },
-    "&::-webkit-scrollbar-thumb": {
-      backgroundClip: "padding-box",
-      backgroundColor: colors.BORDER_MAIN,
-      border: [
-        2,
-        "solid",
-        "transparent"
-      ],
-      borderRadius: 5,
-      minHeight: 30,
-      width: 6,
-      "&:hover": {
-        backgroundColor: colors.GREY_ACTIVE
+    overflow: "auto",
+    // Chromium
+    "@supports selector(::-webkit-scrollbar)": {
+      "&::-webkit-scrollbar": {
+        height: 10,
+        width: 10,
+        "&-thumb": {
+          width: 6,
+          minHeight: 30,
+          border: [
+            2,
+            "solid",
+            "transparent"
+          ],
+          borderRadius: 5,
+          backgroundColor: colors.BORDER_MAIN,
+          backgroundClip: "padding-box",
+          "&:hover": {
+            backgroundColor: colors.GREY_ACTIVE
+          }
+        },
+        "&-track-piece": {
+          backgroundColor: "transparent"
+        },
+        "&-corner": {
+          backgroundColor: "transparent"
+        }
       }
     },
-    "&::-webkit-scrollbar-track-piece": {
-      backgroundColor: "transparent"
+    // Firefox
+    "@supports not selector(::-webkit-scrollbar)": {
+      scrollbarWidth: "thin",
+      scrollbarColor: "".concat(colors.BORDER_MAIN, " transparent")
     }
   }
 };
@@ -6718,63 +6727,63 @@ var useMergedRefs = function(refs) {
     return 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
@@ -8084,7 +8093,9 @@ var List = function(param) {
     className: classes.root
   }, addDataTestId(testId), addDataAttributes(data)), {
     children: items.map(function(item, i) {
-      return /* @__PURE__ */ jsx(ListItem, _object_spread_props$E(_object_spread$N({}, item), {
+      return /* @__PURE__ */ jsx(ListItem, _object_spread_props$E(_object_spread$N({
+        testId: getTestId(testId, "item-".concat(i))
+      }, item), {
         onClick: function(event) {
           return handleItemClick(event, item);
         }