@true-engineering/true-react-common-ui-kit 2.6.0 → 2.7.0

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

@@ -4,7 +4,6 @@ import clsx from "clsx";
 import { isNotEmpty as isNotEmpty$1, isEmpty as isEmpty$1, isString, isStringNotEmpty as isStringNotEmpty$1, isNumberInteger, addClickHandler as addClickHandler$1, addDataTestId as addDataTestId$1, createFilter as createFilter$1, getSelectKeyHandler as getSelectKeyHandler$1, getTestId as getTestId$1, isReactNodeNotEmpty } from "@true-engineering/true-react-platform-helpers";
 import { createUseStyles } from "react-jss";
 import InputMask from "react-input-mask";
-import hexToRgba from "hex-to-rgba";
 import { getYear, getMonth, format as format$1, parse, isSameDay, isValid, isAfter, isBefore, startOfMonth, endOfMonth, sub, startOfYear, endOfYear } from "date-fns";
 import { Portal } from "react-overlays";
 import { debounce as debounce$1 } from "ts-debounce";
@@ -12,6 +11,7 @@ import ReactDatePicker from "react-datepicker";
 import { hasFlag } from "country-flag-icons";
 import { RemoveScroll } from "react-remove-scroll";
 import scrollIntoViewIfNeeded from "scroll-into-view-if-needed";
+import hexToRgba from "hex-to-rgba";
 var colors = {
   FONT_MAIN: "#222a37",
   FONT_MEDIUM: "#505f79",
@@ -1437,6 +1437,11 @@ var isEmpty = isEmpty$1;
 var isNotEmpty = function(val) {
   return isString(val) && isStringNotEmpty$1(val) || isNotEmpty$1(val);
 };
+var renderIcon = function(icon) {
+  return typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, {
+    type: icon
+  }) : icon;
+};
 var useIsMounted = function() {
   var isMounted = useRef(false);
   useEffect(function() {
@@ -3865,7 +3870,7 @@ function _array_without_holes$5(arr) {
   if (Array.isArray(arr))
     return _array_like_to_array$p(arr);
 }
-function _define_property$Q(obj, key, value) {
+function _define_property$R(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value,
@@ -3885,7 +3890,7 @@ function _iterable_to_array$5(iter) {
 function _non_iterable_spread$5() {
   throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _object_spread$N(target) {
+function _object_spread$O(target) {
   for (var i = 1; i < arguments.length; i++) {
     var source = arguments[i] != null ? arguments[i] : {};
     var ownKeys2 = Object.keys(source);
@@ -3895,7 +3900,7 @@ function _object_spread$N(target) {
       }));
     }
     ownKeys2.forEach(function(key) {
-      _define_property$Q(target, key, source[key]);
+      _define_property$R(target, key, source[key]);
     });
   }
   return target;
@@ -3951,7 +3956,7 @@ var useDropdown = function(param) {
         },
         {
           name: "flip",
-          options: _object_spread$N({
+          options: _object_spread$O({
             fallbackPlacements: canBeFlipped ? [
               "bottom-start",
               "top-start"
@@ -3994,68 +3999,68 @@ var useDidMountEffect = function(effect3, dependencies) {
     };
   }, dependencies);
 };
-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
 };
-function _define_property$P(obj, key, value) {
+function _define_property$Q(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value,
@@ -4068,7 +4073,7 @@ function _define_property$P(obj, key, value) {
   }
   return obj;
 }
-function _object_spread$M(target) {
+function _object_spread$N(target) {
   for (var i = 1; i < arguments.length; i++) {
     var source = arguments[i] != null ? arguments[i] : {};
     var ownKeys2 = Object.keys(source);
@@ -4078,7 +4083,7 @@ function _object_spread$M(target) {
       }));
     }
     ownKeys2.forEach(function(key) {
-      _define_property$P(target, key, source[key]);
+      _define_property$Q(target, key, source[key]);
     });
   }
   return target;
@@ -4087,7 +4092,7 @@ var ComplexIconBoilerplate = function(param) {
   var type = param.type;
   var theme = useContext(ThemeContext).theme;
   var icons = useMemo(function() {
-    return _object_spread$M({}, complexIcons, theme.complexIcons);
+    return _object_spread$N({}, complexIcons, theme.complexIcons);
   }, []);
   var ComplexIcon = icons[type];
   return /* @__PURE__ */ jsx("div", {
@@ -4472,6 +4477,26 @@ var iconsList = checkIcons({
       }
     ]
   },
+  folder: {
+    viewBox: "0 0 20 20",
+    paths: [
+      {
+        d: "M16.9 5H10.009L8.716 3.795C8.25211 3.34264 7.714 3 7.069 3H3.1C1.942 3 1 3.942 1 5.1V15.9C1 17.058 1.942 18 3.1 18H16.9C18.058 18 19 17.058 19 15.9V7.1C19 5.942 18.058 5 16.9 5Z"
+      }
+    ]
+  },
+  "folder-add": {
+    viewBox: "0 0 20 20",
+    paths: [
+      {
+        d: "M16.9 5H10.009C10.009 5 9.19158 4.23037 8.716 3.795C8.24042 3.35963 7.714 3 7.069 3H3.1C1.942 3 1 3.942 1 5.1V15.9C1 17.058 1.942 18 3.1 18H16.9C18.058 18 19 17.058 19 15.9V7.1C19 5.942 18.058 5 16.9 5Z"
+      },
+      {
+        d: "M13 13H11V15C11 15.5523 10.5523 16 10 16C9.44772 16 9 15.5523 9 15V13H7C6.44772 13 6 12.5523 6 12C6 11.4477 6.44772 11 7 11H9V9C9 8.44772 9.44772 8 10 8C10.5523 8 11 8.44772 11 9V11H13C13.5523 11 14 11.4477 14 12C14 12.5523 13.5523 13 13 13Z",
+        fill: "white"
+      }
+    ]
+  },
   food: {
     viewBox: "0 0 28 28",
     paths: [
@@ -4597,6 +4622,20 @@ var iconsList = checkIcons({
       }
     ]
   },
+  presentation: {
+    viewBox: "0 0 20 20",
+    paths: [
+      {
+        d: "M8 10H12V11H8V10Z"
+      },
+      {
+        d: "M14 8H6V9H14V8Z"
+      },
+      {
+        d: "M4 2C2.89543 2 2 2.89543 2 4V13C2 14.1046 2.89543 15 4 15H7.6906L5.76795 18.3301L7.5 19.3301L10 15L12.5004 19.3301L14.2324 18.3301L12.3098 15H16C17.1046 15 18 14.1046 18 13V4C18 2.89543 17.1046 2 16 2H4ZM16 6H4V13H16V6Z"
+      }
+    ]
+  },
   print: {
     paths: [
       {
@@ -4925,7 +4964,7 @@ var iconsList = checkIcons({
     ]
   }
 });
-function _define_property$O(obj, key, value) {
+function _define_property$P(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value,
@@ -4938,7 +4977,7 @@ function _define_property$O(obj, key, value) {
   }
   return obj;
 }
-function _object_spread$L(target) {
+function _object_spread$M(target) {
   for (var i = 1; i < arguments.length; i++) {
     var source = arguments[i] != null ? arguments[i] : {};
     var ownKeys2 = Object.keys(source);
@@ -4948,12 +4987,12 @@ function _object_spread$L(target) {
       }));
     }
     ownKeys2.forEach(function(key) {
-      _define_property$O(target, key, source[key]);
+      _define_property$P(target, key, source[key]);
     });
   }
   return target;
 }
-function ownKeys$C(object, enumerableOnly) {
+function ownKeys$D(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
     var symbols = Object.getOwnPropertySymbols(object);
@@ -4966,12 +5005,12 @@ function ownKeys$C(object, enumerableOnly) {
   }
   return keys;
 }
-function _object_spread_props$C(target, source) {
+function _object_spread_props$D(target, source) {
   source = source != null ? source : {};
   if (Object.getOwnPropertyDescriptors) {
     Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
   } else {
-    ownKeys$C(Object(source)).forEach(function(key) {
+    ownKeys$D(Object(source)).forEach(function(key) {
       Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
     });
   }
@@ -4982,7 +5021,7 @@ var IconBoilerplate = function(param) {
   var _icon_paths, _icon_rects, _icon_circles;
   var theme = useContext(ThemeContext).theme;
   var icons = useMemo(function() {
-    return _object_spread$L({}, iconsList, theme.icons);
+    return _object_spread$M({}, iconsList, theme.icons);
   }, []);
   var icon = icons[type];
   var _icon_viewBox, _path_fill, _path_stroke;
@@ -4994,7 +5033,7 @@ var IconBoilerplate = function(param) {
     xmlns: "http://www.w3.org/2000/svg",
     children: [
       (_icon_paths = icon.paths) === null || _icon_paths === void 0 ? void 0 : _icon_paths.map(function(path, index) {
-        return /* @__PURE__ */ jsx("path", _object_spread$L({
+        return /* @__PURE__ */ jsx("path", _object_spread$M({
           fillRule: "evenodd",
           clipRule: "evenodd",
           fill: (_path_fill = path.fill) !== null && _path_fill !== void 0 ? _path_fill : "currentColor",
@@ -5002,25 +5041,25 @@ var IconBoilerplate = function(param) {
         }, path), index);
       }),
       (_icon_rects = icon.rects) === null || _icon_rects === void 0 ? void 0 : _icon_rects.map(function(rect, index) {
-        return /* @__PURE__ */ createElement("rect", _object_spread_props$C(_object_spread$L({}, rect), {
+        return /* @__PURE__ */ createElement("rect", _object_spread_props$D(_object_spread$M({}, rect), {
           key: index
         }));
       }),
       (_icon_circles = icon.circles) === null || _icon_circles === void 0 ? void 0 : _icon_circles.map(function(circle, index) {
-        return /* @__PURE__ */ createElement("circle", _object_spread_props$C(_object_spread$L({}, circle), {
+        return /* @__PURE__ */ createElement("circle", _object_spread_props$D(_object_spread$M({}, circle), {
           key: index
         }));
       })
     ]
   });
 };
-var styles$J = {
+var styles$K = {
   root: {
     display: "flex",
     alignItems: "center"
   }
 };
-function _define_property$N(obj, key, value) {
+function _define_property$O(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value,
@@ -5033,7 +5072,7 @@ function _define_property$N(obj, key, value) {
   }
   return obj;
 }
-function _object_spread$K(target) {
+function _object_spread$L(target) {
   for (var i = 1; i < arguments.length; i++) {
     var source = arguments[i] != null ? arguments[i] : {};
     var ownKeys2 = Object.keys(source);
@@ -5043,12 +5082,12 @@ function _object_spread$K(target) {
       }));
     }
     ownKeys2.forEach(function(key) {
-      _define_property$N(target, key, source[key]);
+      _define_property$O(target, key, source[key]);
     });
   }
   return target;
 }
-function ownKeys$B(object, enumerableOnly) {
+function ownKeys$C(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
     var symbols = Object.getOwnPropertySymbols(object);
@@ -5061,12 +5100,12 @@ function ownKeys$B(object, enumerableOnly) {
   }
   return keys;
 }
-function _object_spread_props$B(target, source) {
+function _object_spread_props$C(target, source) {
   source = source != null ? source : {};
   if (Object.getOwnPropertyDescriptors) {
     Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
   } else {
-    ownKeys$B(Object(source)).forEach(function(key) {
+    ownKeys$C(Object(source)).forEach(function(key) {
       Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
     });
   }
@@ -5074,8 +5113,8 @@ function _object_spread_props$B(target, source) {
 }
 var Icon = function(param) {
   var type = param.type, data = param.data, tweakStyles = param.tweakStyles;
-  var classes = useTheme("Icon", styles$J, tweakStyles).classes;
-  return /* @__PURE__ */ jsx("div", _object_spread_props$B(_object_spread$K({
+  var classes = useTheme("Icon", styles$K, tweakStyles).classes;
+  return /* @__PURE__ */ jsx("div", _object_spread_props$C(_object_spread$L({
     className: classes.root
   }, addDataAttributes(data)), {
     children: isComplexIcon(type) ? /* @__PURE__ */ jsx(ComplexIconBoilerplate, {
@@ -5085,25 +5124,10 @@ var Icon = function(param) {
     })
   }));
 };
-var renderIcon = function(icon) {
-  return typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, {
-    type: icon
-  }) : icon;
-};
 var ITEM_HORIZONTAL_PADDING = 16;
 var ICON_SIZE = 20;
 var ICON_GAP = 12;
-var styles$I = {
-  root: {
-    minWidth: 180,
-    backgroundColor: colors.CLASSIC_WHITE,
-    padding: [
-      8,
-      0
-    ],
-    listStyle: "none",
-    margin: 0
-  },
+var styles$J = {
   item: {
     display: "flex",
     alignItems: "center",
@@ -5118,6 +5142,9 @@ var styles$I = {
     transition: "background-color 0.25s ease-in-out",
     cursor: "pointer"
   },
+  default: {},
+  destructive: {},
+  custom: {},
   disabledItem: {
     cursor: "default"
   },
@@ -5136,6 +5163,102 @@ var styles$I = {
   },
   content: {}
 };
+function _define_property$N(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+function _object_spread$K(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
+    var ownKeys2 = Object.keys(source);
+    if (typeof Object.getOwnPropertySymbols === "function") {
+      ownKeys2 = ownKeys2.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+        return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+      }));
+    }
+    ownKeys2.forEach(function(key) {
+      _define_property$N(target, key, source[key]);
+    });
+  }
+  return target;
+}
+function ownKeys$B(object, enumerableOnly) {
+  var keys = Object.keys(object);
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    if (enumerableOnly) {
+      symbols = symbols.filter(function(sym) {
+        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+      });
+    }
+    keys.push.apply(keys, symbols);
+  }
+  return keys;
+}
+function _object_spread_props$B(target, source) {
+  source = source != null ? source : {};
+  if (Object.getOwnPropertyDescriptors) {
+    Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+  } else {
+    ownKeys$B(Object(source)).forEach(function(key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+  }
+  return target;
+}
+var ListItem = function(param) {
+  var disabled = param.disabled, icon = param.icon, item = param.item, shouldDrawSpacerAbove = param.shouldDrawSpacerAbove, shouldDrawSpacerBelow = param.shouldDrawSpacerBelow, testId = param.testId, tweakStyles = param.tweakStyles, _param_view = param.view, view = _param_view === void 0 ? "default" : _param_view, withIconGap = param.withIconGap, onClick = param.onClick;
+  var classes = useTheme("ListItem", styles$J, tweakStyles).classes;
+  var _obj;
+  return /* @__PURE__ */ jsxs(Fragment$1, {
+    children: [
+      shouldDrawSpacerAbove && /* @__PURE__ */ jsx("div", {
+        className: classes.spacer
+      }),
+      /* @__PURE__ */ jsxs("div", _object_spread_props$B(_object_spread$K({
+        className: clsx(classes.item, classes[view], (_obj = {}, _define_property$N(_obj, classes.disabledItem, disabled), _define_property$N(_obj, classes.withIconGap, withIconGap), _obj)),
+        onClick: disabled ? void 0 : onClick
+      }, addDataTestId$1(testId), disabled && addDataAttributes({
+        disabled
+      })), {
+        children: [
+          isReactNodeNotEmpty(icon) && /* @__PURE__ */ jsx("span", {
+            className: classes.icon,
+            children: renderIcon(icon)
+          }),
+          /* @__PURE__ */ jsx("span", {
+            className: classes.content,
+            children: item
+          })
+        ]
+      })),
+      shouldDrawSpacerBelow && /* @__PURE__ */ jsx("div", {
+        className: classes.spacer
+      })
+    ]
+  });
+};
+var styles$I = {
+  root: {
+    minWidth: 180,
+    backgroundColor: colors.CLASSIC_WHITE,
+    padding: [
+      8,
+      0
+    ],
+    listStyle: "none",
+    margin: 0
+  }
+};
 function _define_property$M(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
@@ -5200,36 +5323,12 @@ var List = function(param) {
     className: classes.root
   }, addDataTestId$1(testId), addDataAttributes(data)), {
     children: items.map(function(item, idx) {
-      var _obj;
-      return /* @__PURE__ */ jsxs(Fragment$1, {
-        children: [
-          item.shouldDrawSpacerAbove && /* @__PURE__ */ jsx("div", {
-            className: classes.spacer
-          }),
-          /* @__PURE__ */ jsxs("div", _object_spread_props$A(_object_spread$J({
-            className: clsx(classes.item, (_obj = {}, _define_property$M(_obj, classes.disabledItem, item.disabled), _define_property$M(_obj, classes.withIconGap, item.withIconGap), _obj)),
-            onClick: item.disabled ? void 0 : function() {
-              return handleItemClick(item);
-            }
-          }, addDataTestId$1((_item_testId = item.testId) !== null && _item_testId !== void 0 ? _item_testId : getTestId$1(testId, "item-".concat(idx))), item.disabled && addDataAttributes({
-            disabled: item.disabled
-          })), {
-            children: [
-              isReactNodeNotEmpty(item.icon) && /* @__PURE__ */ jsx("span", {
-                className: classes.icon,
-                children: renderIcon(item.icon)
-              }),
-              /* @__PURE__ */ jsx("span", {
-                className: classes.content,
-                children: item.item
-              })
-            ]
-          })),
-          item.shouldDrawSpacerBelow && /* @__PURE__ */ jsx("div", {
-            className: classes.spacer
-          })
-        ]
-      }, idx);
+      return /* @__PURE__ */ jsx(ListItem, _object_spread_props$A(_object_spread$J({}, item), {
+        testId: (_item_testId = item.testId) !== null && _item_testId !== void 0 ? _item_testId : getTestId$1(testId, "item-".concat(idx)),
+        onClick: function() {
+          return handleItemClick(item);
+        }
+      }), idx);
     })
   }));
 };
@@ -28079,6 +28178,7 @@ export {
   IncrementInput,
   Input,
   List,
+  ListItem,
   Modal,
   MoreMenu,
   MultiSelect,