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

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

@@ -1031,31 +1031,40 @@
       };
     },
     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")
       }
     }
   };
@@ -6708,63 +6717,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
@@ -8074,7 +8083,9 @@
       className: classes.root
     }, trueReactPlatformHelpers.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: trueReactPlatformHelpers.getTestId(testId, "item-".concat(i))
+        }, item), {
           onClick: function(event) {
             return handleItemClick(event, item);
           }