@true-engineering/true-react-common-ui-kit 3.1.1 → 3.2.0

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

@@ -6727,63 +6727,63 @@ var useMergedRefs = function(refs) {
     return mergeRefs(refs);
   }, refs);
 };
-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>
+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
   </svg>`;
 var complexIcons = {
   avatar: avatarGreen
@@ -24571,6 +24571,10 @@ var useStyles$k = createThemedStyles("FlexibleTable", {
     */
     maxHeight: "100%"
   },
+  head: {},
+  body: {},
+  loaderRow: {},
+  loaderCell: {},
   loader: {
     position: "sticky",
     left: 0,
@@ -24638,6 +24642,9 @@ var useStyles$k = createThemedStyles("FlexibleTable", {
   headerSecond: {
     paddingLeft: STICKY_SHADOW_PADDING
   },
+  nothingFoundRow: {},
+  nothingFound: {},
+  skeletonRow: {},
   skeleton: {
     height: 21,
     padding: [
@@ -24740,15 +24747,16 @@ function _define_property$l(obj, key, value) {
   return obj;
 }
 function FlexibleTableCell(param) {
-  var item = param.item, columnName = param.columnName, config = param.config, isFocusedRow = param.isFocusedRow, isSecond = param.isSecond, isSticky = param.isSticky, isNestedComponentExpanded = param.isNestedComponentExpanded, isRowNestedComponentExpanded = param.isRowNestedComponentExpanded, tweakStyles = param.tweakStyles, onSetNestedComponent = param.onSetNestedComponent;
+  var item = param.item, columnName = param.columnName, config = param.config, renderMode = param.renderMode, isFocusedRow = param.isFocusedRow, isSecond = param.isSecond, isSticky = param.isSticky, isNestedComponentExpanded = param.isNestedComponentExpanded, isRowNestedComponentExpanded = param.isRowNestedComponentExpanded, tweakStyles = param.tweakStyles, onSetNestedComponent = param.onSetNestedComponent;
   var classes = useStyles$j({
     theme: tweakStyles
   });
   var _config_columnName;
   var _ref = (_config_columnName = config[columnName]) !== null && _config_columnName !== void 0 ? _config_columnName : {}, component = _ref.component, cellAlign = _ref.cellAlign, position = _ref.position, right2 = _ref.right, left2 = _ref.left, cellVerticalAlign = _ref.cellVerticalAlign;
   var value = item[columnName];
+  var TableCell = renderMode === "divs" ? "div" : "td";
   var _obj;
-  return /* @__PURE__ */ jsx("td", {
+  return /* @__PURE__ */ jsx(TableCell, {
     className: clsx(classes.root, (_obj = {}, _define_property$l(_obj, classes.sticky, isSticky), _define_property$l(_obj, classes.second, isSecond), _obj)),
     style: {
       textAlign: cellAlign,
@@ -24779,7 +24787,8 @@ var useStyles$i = createThemedStyles("FlexibleTableRow", {
   },
   clickable: {
     cursor: "pointer"
-  }
+  },
+  nestedComponent: {}
 });
 function _array_like_to_array$9(arr, len) {
   if (len == null || len > arr.length)
@@ -24892,7 +24901,7 @@ function _unsupported_iterable_to_array$9(o, minLen) {
     return _array_like_to_array$9(o, minLen);
 }
 function FlexibleTableRowInner(param) {
-  var item = param.item, uniqueField = param.uniqueField, isFirstColumnSticky = param.isFirstColumnSticky, isActive = param.isActive, config = param.config, enabledColumns = param.enabledColumns, rowAttributes = param.rowAttributes, tweakStyles = param.tweakStyles, expandableRowComponent = param.expandableRowComponent, onRowHover = param.onRowHover, onRowClick = param.onRowClick;
+  var item = param.item, uniqueField = param.uniqueField, isFirstColumnSticky = param.isFirstColumnSticky, isActive = param.isActive, config = param.config, enabledColumns = param.enabledColumns, rowAttributes = param.rowAttributes, renderMode = param.renderMode, tweakStyles = param.tweakStyles, expandableRowComponent = param.expandableRowComponent, onRowHover = param.onRowHover, onRowClick = param.onRowClick;
   var classes = useStyles$i({
     theme: tweakStyles
   });
@@ -24950,10 +24959,12 @@ function FlexibleTableRowInner(param) {
   };
   var items = enabledColumns !== null && enabledColumns !== void 0 ? enabledColumns : Object.keys(config);
   var isEditable = isNotEmpty(onRowClick) || isNotEmpty(onRowHover);
+  var TableRow = renderMode === "divs" ? "div" : "tr";
+  var TableCell = renderMode === "divs" ? "div" : "td";
   var _obj;
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [
-      /* @__PURE__ */ jsx("tr", _object_spread_props$i(_object_spread$j({
+      /* @__PURE__ */ jsx(TableRow, _object_spread_props$i(_object_spread$j({
         className: clsx(classes.root, (_obj = {}, _define_property$k(_obj, classes.active, isActive), _define_property$k(_obj, classes.editable, isEditable), _define_property$k(_obj, classes.clickable, isNotEmpty(onRowClick) || isNotEmpty(expandableRowComponent)), _obj)),
         onMouseEnter: function(e) {
           if (uniqueField !== void 0 && onRowHover !== void 0) {
@@ -24977,6 +24988,7 @@ function FlexibleTableRowInner(param) {
             item,
             config,
             tweakStyles: tweakTableCellStyles,
+            renderMode,
             isFocusedRow: isFocused,
             isNestedComponentExpanded: nestedComponent.isOpen && nestedComponent.cellKey === key,
             isRowNestedComponentExpanded: nestedComponent.isOpen && nestedComponent.cellKey === void 0,
@@ -24986,9 +24998,10 @@ function FlexibleTableRowInner(param) {
           }, key);
         })
       })),
-      nestedComponent.isOpen && /* @__PURE__ */ jsx("tr", {
+      nestedComponent.isOpen && /* @__PURE__ */ jsx(TableRow, {
         className: classes.root,
-        children: /* @__PURE__ */ jsx("td", {
+        children: /* @__PURE__ */ jsx(TableCell, {
+          className: classes.nestedComponent,
           colSpan: items.length,
           children: nestedComponent.component
         })
@@ -25050,7 +25063,7 @@ function _object_spread_props$h(target, source) {
   return target;
 }
 function FlexibleTable(param) {
-  var data = param.data, tweakStyles = param.tweakStyles, content = param.content, headerContent = param.headerContent, config = param.config, activeRows = param.activeRows, enabledColumns = param.enabledColumns, isHorizontallyScrollable = param.isHorizontallyScrollable, isFirstColumnSticky = param.isFirstColumnSticky, infinityScrollConfig = param.infinityScrollConfig, uniqueField = param.uniqueField, isLoading = param.isLoading, onHeadClick = param.onHeadClick, onRowHover = param.onRowHover, onRowClick = param.onRowClick, refForScroll = param.refForScroll, rowAttributes = param.rowAttributes, nothingFoundContent = param.nothingFoundContent, testId = param.testId, expandableRowComponent = param.expandableRowComponent;
+  var data = param.data, tweakStyles = param.tweakStyles, content = param.content, headerContent = param.headerContent, config = param.config, activeRows = param.activeRows, enabledColumns = param.enabledColumns, isHorizontallyScrollable = param.isHorizontallyScrollable, isFirstColumnSticky = param.isFirstColumnSticky, infinityScrollConfig = param.infinityScrollConfig, uniqueField = param.uniqueField, isLoading = param.isLoading, renderMode = param.renderMode, onHeadClick = param.onHeadClick, onRowHover = param.onRowHover, onRowClick = param.onRowClick, refForScroll = param.refForScroll, rowAttributes = param.rowAttributes, nothingFoundContent = param.nothingFoundContent, testId = param.testId, expandableRowComponent = param.expandableRowComponent;
   var classes = useStyles$k({
     theme: tweakStyles
   });
@@ -25086,6 +25099,7 @@ function FlexibleTable(param) {
   }), [
     getDataScrollAttributeSetter
   ]);
+  var shouldShowNothingFound = !isArrayNotEmpty(content) && nothingFoundContent !== void 0 && !(infinityScrollConfig === null || infinityScrollConfig === void 0 ? void 0 : infinityScrollConfig.isLoading) && ((infinityScrollConfig === null || infinityScrollConfig === void 0 ? void 0 : infinityScrollConfig.isLastPage) === void 0 || infinityScrollConfig.isLastPage);
   var ref = useMergedRefs([
     refForScroll,
     scrollRef,
@@ -25136,16 +25150,25 @@ function FlexibleTable(param) {
     setIsScrolledAttribute,
     setHasScrollBarAttribute
   ]);
+  var Table = renderMode === "divs" ? "div" : "table";
+  var TableHead = renderMode === "divs" ? "div" : "thead";
+  var TableBody = renderMode === "divs" ? "div" : "tbody";
+  var TableRow = renderMode === "divs" ? "div" : "tr";
+  var TableHeader = renderMode === "divs" ? "div" : "th";
+  var TableCell = renderMode === "divs" ? "div" : "td";
   var _activeRows_includes;
   return /* @__PURE__ */ jsx("div", {
     ref,
     className: clsx(_define_property$j({}, classes.scroll, isHorizontallyScrollable)),
-    children: /* @__PURE__ */ jsxs("table", _object_spread_props$h(_object_spread$i({
+    children: /* @__PURE__ */ jsxs(Table, _object_spread_props$h(_object_spread$i({
       className: classes.root
-    }, addDataTestId(testId), addDataAttributes(data)), {
+    }, addDataTestId(testId), addDataAttributes(_object_spread_props$h(_object_spread$i({}, data), {
+      isLoading
+    }))), {
       children: [
-        /* @__PURE__ */ jsx("thead", {
-          children: /* @__PURE__ */ jsx("tr", {
+        /* @__PURE__ */ jsx(TableHead, {
+          className: classes.head,
+          children: /* @__PURE__ */ jsx(TableRow, {
             className: classes.headerRow,
             children: showedColumns.map(function(key, i) {
               var itemConfig = config === null || config === void 0 ? void 0 : config[key];
@@ -25159,7 +25182,7 @@ function FlexibleTable(param) {
               }
               var _itemConfig_titleAlign;
               var _obj;
-              return /* @__PURE__ */ jsx("th", {
+              return /* @__PURE__ */ jsx(TableHeader, {
                 className: clsx(classes.header, (_obj = {}, _define_property$j(_obj, classes.headerSticky, isFirstColumnSticky && i === 0), _define_property$j(_obj, classes.headerSecond, isFirstColumnSticky && i === 1), _obj)),
                 style: {
                   minWidth: itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.minWidth,
@@ -25175,11 +25198,13 @@ function FlexibleTable(param) {
             })
           })
         }),
-        /* @__PURE__ */ jsx("tbody", {
+        /* @__PURE__ */ jsx(TableBody, {
+          className: classes.body,
           children: isLoading ? indexMap(6, function(i) {
-            return /* @__PURE__ */ jsx("tr", {
+            return /* @__PURE__ */ jsx(TableRow, {
+              className: classes.skeletonRow,
               children: showedColumns.map(function(_, j) {
-                return /* @__PURE__ */ jsx("td", {
+                return /* @__PURE__ */ jsx(TableCell, {
                   className: classes.skeleton,
                   children: /* @__PURE__ */ jsx(Skeleton, {})
                 }, j);
@@ -25187,8 +25212,10 @@ function FlexibleTable(param) {
             }, i);
           }) : /* @__PURE__ */ jsxs(Fragment, {
             children: [
-              !isArrayNotEmpty(content) && nothingFoundContent !== void 0 && !(infinityScrollConfig === null || infinityScrollConfig === void 0 ? void 0 : infinityScrollConfig.isLoading) && ((infinityScrollConfig === null || infinityScrollConfig === void 0 ? void 0 : infinityScrollConfig.isLastPage) === void 0 || infinityScrollConfig.isLastPage) && /* @__PURE__ */ jsx("tr", {
-                children: /* @__PURE__ */ jsx("td", {
+              shouldShowNothingFound && /* @__PURE__ */ jsx(TableRow, {
+                className: classes.nothingFoundRow,
+                children: /* @__PURE__ */ jsx(TableCell, {
+                  className: classes.nothingFound,
                   colSpan: showedColumns.length,
                   children: nothingFoundContent
                 })
@@ -25204,12 +25231,15 @@ function FlexibleTable(param) {
                   enabledColumns,
                   config,
                   rowAttributes,
+                  renderMode,
                   tweakStyles: tweakTableRowStyles,
                   expandableRowComponent
                 }, isNotEmpty(uniqueField) ? item[uniqueField] : i);
               }),
-              infinityScrollConfig !== void 0 && !infinityScrollConfig.isLastPage && /* @__PURE__ */ jsx("tr", {
-                children: /* @__PURE__ */ jsx("td", {
+              infinityScrollConfig !== void 0 && !infinityScrollConfig.isLastPage && /* @__PURE__ */ jsx(TableRow, {
+                className: classes.loaderRow,
+                children: /* @__PURE__ */ jsx(TableCell, {
+                  className: classes.loaderCell,
                   colSpan: showedColumns.length,
                   children: /* @__PURE__ */ jsx("div", {
                     ref: initIntersectionObserver,