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

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

@@ -1,6 +1,6 @@
 (function(global2, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react"), require("react-transition-group"), require("clsx"), require("@true-engineering/true-react-platform-helpers"), require("react-jss"), require("react-input-mask"), require("hex-to-rgba"), require("date-fns"), require("react-overlays"), require("ts-debounce"), require("react-datepicker"), require("country-flag-icons"), require("react-remove-scroll"), require("scroll-into-view-if-needed")) : typeof define === "function" && define.amd ? define(["exports", "react", "react-transition-group", "clsx", "@true-engineering/true-react-platform-helpers", "react-jss", "react-input-mask", "hex-to-rgba", "date-fns", "react-overlays", "ts-debounce", "react-datepicker", "country-flag-icons", "react-remove-scroll", "scroll-into-view-if-needed"], factory) : (global2 = typeof globalThis !== "undefined" ? globalThis : global2 || self, factory(global2.TrueReactKitUiKit = {}, global2.React, global2.reactTransitionGroup, global2.clsx, global2.trueReactPlatformHelpers, global2.reactJss, global2.InputMask, global2.hexToRgba, global2.dateFns, global2.reactOverlays, global2.tsDebounce, global2.ReactDatePicker, global2.countryFlagIcons, global2.reactRemoveScroll, global2.scrollIntoViewIfNeeded));
-})(this, function(exports2, React, reactTransitionGroup, clsx, trueReactPlatformHelpers, reactJss, InputMask, hexToRgba, dateFns, reactOverlays, tsDebounce, ReactDatePicker, countryFlagIcons, reactRemoveScroll, scrollIntoViewIfNeeded) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react"), require("react-transition-group"), require("clsx"), require("@true-engineering/true-react-platform-helpers"), require("react-jss"), require("react-input-mask"), require("date-fns"), require("react-overlays"), require("ts-debounce"), require("react-datepicker"), require("country-flag-icons"), require("react-remove-scroll"), require("scroll-into-view-if-needed"), require("hex-to-rgba")) : typeof define === "function" && define.amd ? define(["exports", "react", "react-transition-group", "clsx", "@true-engineering/true-react-platform-helpers", "react-jss", "react-input-mask", "date-fns", "react-overlays", "ts-debounce", "react-datepicker", "country-flag-icons", "react-remove-scroll", "scroll-into-view-if-needed", "hex-to-rgba"], factory) : (global2 = typeof globalThis !== "undefined" ? globalThis : global2 || self, factory(global2.TrueReactKitUiKit = {}, global2.React, global2.reactTransitionGroup, global2.clsx, global2.trueReactPlatformHelpers, global2.reactJss, global2.InputMask, global2.dateFns, global2.reactOverlays, global2.tsDebounce, global2.ReactDatePicker, global2.countryFlagIcons, global2.reactRemoveScroll, global2.scrollIntoViewIfNeeded, global2.hexToRgba));
+})(this, function(exports2, React, reactTransitionGroup, clsx, trueReactPlatformHelpers, reactJss, InputMask, dateFns, reactOverlays, tsDebounce, ReactDatePicker, countryFlagIcons, reactRemoveScroll, scrollIntoViewIfNeeded, hexToRgba) {
   "use strict";
   var colors = {
     FONT_MAIN: "#222a37",
@@ -1427,6 +1427,11 @@
   var isNotEmpty = function(val) {
     return trueReactPlatformHelpers.isString(val) && trueReactPlatformHelpers.isStringNotEmpty(val) || trueReactPlatformHelpers.isNotEmpty(val);
   };
+  var renderIcon = function(icon) {
+    return typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, {
+      type: icon
+    }) : icon;
+  };
   var useIsMounted = function() {
     var isMounted = React.useRef(false);
     React.useEffect(function() {
@@ -3855,7 +3860,7 @@
     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,
@@ -3875,7 +3880,7 @@
   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);
@@ -3885,7 +3890,7 @@
         }));
       }
       ownKeys2.forEach(function(key) {
-        _define_property$Q(target, key, source[key]);
+        _define_property$R(target, key, source[key]);
       });
     }
     return target;
@@ -3941,7 +3946,7 @@
           },
           {
             name: "flip",
-            options: _object_spread$N({
+            options: _object_spread$O({
               fallbackPlacements: canBeFlipped ? [
                 "bottom-start",
                 "top-start"
@@ -4045,7 +4050,7 @@
   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,
@@ -4058,7 +4063,7 @@
     }
     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);
@@ -4068,7 +4073,7 @@
         }));
       }
       ownKeys2.forEach(function(key) {
-        _define_property$P(target, key, source[key]);
+        _define_property$Q(target, key, source[key]);
       });
     }
     return target;
@@ -4077,7 +4082,7 @@
     var type = param.type;
     var theme = React.useContext(ThemeContext).theme;
     var icons = React.useMemo(function() {
-      return _object_spread$M({}, complexIcons, theme.complexIcons);
+      return _object_spread$N({}, complexIcons, theme.complexIcons);
     }, []);
     var ComplexIcon = icons[type];
     return /* @__PURE__ */ jsx("div", {
@@ -4462,6 +4467,26 @@
         }
       ]
     },
+    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: [
@@ -4587,6 +4612,20 @@
         }
       ]
     },
+    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: [
         {
@@ -4915,7 +4954,7 @@
       ]
     }
   });
-  function _define_property$O(obj, key, value) {
+  function _define_property$P(obj, key, value) {
     if (key in obj) {
       Object.defineProperty(obj, key, {
         value,
@@ -4928,7 +4967,7 @@
     }
     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);
@@ -4938,12 +4977,12 @@
         }));
       }
       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);
@@ -4956,12 +4995,12 @@
     }
     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));
       });
     }
@@ -4972,7 +5011,7 @@
     var _icon_paths, _icon_rects, _icon_circles;
     var theme = React.useContext(ThemeContext).theme;
     var icons = React.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;
@@ -4984,7 +5023,7 @@
       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",
@@ -4992,25 +5031,25 @@
           }, path), index);
         }),
         (_icon_rects = icon.rects) === null || _icon_rects === void 0 ? void 0 : _icon_rects.map(function(rect, index) {
-          return /* @__PURE__ */ React.createElement("rect", _object_spread_props$C(_object_spread$L({}, rect), {
+          return /* @__PURE__ */ React.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__ */ React.createElement("circle", _object_spread_props$C(_object_spread$L({}, circle), {
+          return /* @__PURE__ */ React.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,
@@ -5023,7 +5062,7 @@
     }
     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);
@@ -5033,12 +5072,12 @@
         }));
       }
       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);
@@ -5051,12 +5090,12 @@
     }
     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));
       });
     }
@@ -5064,8 +5103,8 @@
   }
   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, {
@@ -5075,25 +5114,10 @@
       })
     }));
   };
-  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",
@@ -5108,6 +5132,9 @@
       transition: "background-color 0.25s ease-in-out",
       cursor: "pointer"
     },
+    default: {},
+    destructive: {},
+    custom: {},
     disabledItem: {
       cursor: "default"
     },
@@ -5126,6 +5153,102 @@
     },
     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(React.Fragment, {
+      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
+        }, trueReactPlatformHelpers.addDataTestId(testId), disabled && addDataAttributes({
+          disabled
+        })), {
+          children: [
+            trueReactPlatformHelpers.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, {
@@ -5190,36 +5313,12 @@
       className: classes.root
     }, trueReactPlatformHelpers.addDataTestId(testId), addDataAttributes(data)), {
       children: items.map(function(item, idx) {
-        var _obj;
-        return /* @__PURE__ */ jsxs(React.Fragment, {
-          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);
-              }
-            }, trueReactPlatformHelpers.addDataTestId((_item_testId = item.testId) !== null && _item_testId !== void 0 ? _item_testId : trueReactPlatformHelpers.getTestId(testId, "item-".concat(idx))), item.disabled && addDataAttributes({
-              disabled: item.disabled
-            })), {
-              children: [
-                trueReactPlatformHelpers.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 : trueReactPlatformHelpers.getTestId(testId, "item-".concat(idx)),
+          onClick: function() {
+            return handleItemClick(item);
+          }
+        }), idx);
       })
     }));
   };
@@ -7115,7 +7214,7 @@
     var hasControls = hasClearIcon || iconType !== void 0 || isLoading;
     var hasValue = value !== void 0 && value !== "";
     var hasUnits = units !== void 0 && units !== "";
-    var hasLabel = trueReactPlatformHelpers.isStringNotEmpty(label);
+    var hasLabel = trueReactPlatformHelpers.isReactNodeNotEmpty(label);
     var hasPlaceholder = (!hasLabel || hasFocus && !isReadonly || shouldAlwaysShowPlaceholder) && trueReactPlatformHelpers.isStringNotEmpty(placeholder);
     var shouldShowUnits = (hasValue || isFocused && !hasPlaceholder) && hasUnits;
     var _obj;
@@ -28068,6 +28167,7 @@
   exports2.IncrementInput = IncrementInput;
   exports2.Input = Input;
   exports2.List = List;
+  exports2.ListItem = ListItem;
   exports2.Modal = Modal;
   exports2.MoreMenu = MoreMenu;
   exports2.MultiSelect = MultiSelect;