@true-engineering/true-react-common-ui-kit 1.5.3 → 1.6.0

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

@@ -1099,6 +1099,79 @@
   const Fragment = jsxRuntime.exports.Fragment;
   const jsx = jsxRuntime.exports.jsx;
   const jsxs = jsxRuntime.exports.jsxs;
+  var rgba = hexToRgba;
+  function _array_like_to_array$q(arr, len) {
+    if (len == null || len > arr.length)
+      len = arr.length;
+    for (var i = 0, arr2 = new Array(len); i < len; i++)
+      arr2[i] = arr[i];
+    return arr2;
+  }
+  function _array_with_holes$o(arr) {
+    if (Array.isArray(arr))
+      return arr;
+  }
+  function _array_without_holes$6(arr) {
+    if (Array.isArray(arr))
+      return _array_like_to_array$q(arr);
+  }
+  function _iterable_to_array$6(iter) {
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null)
+      return Array.from(iter);
+  }
+  function _iterable_to_array_limit$o(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null)
+      return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+      for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
+        _arr.push(_s.value);
+        if (i && _arr.length === i)
+          break;
+      }
+    } catch (err) {
+      _d = true;
+      _e = err;
+    } finally {
+      try {
+        if (!_n && _i["return"] != null)
+          _i["return"]();
+      } finally {
+        if (_d)
+          throw _e;
+      }
+    }
+    return _arr;
+  }
+  function _non_iterable_rest$o() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+  }
+  function _non_iterable_spread$6() {
+    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 _sliced_to_array$o(arr, i) {
+    return _array_with_holes$o(arr) || _iterable_to_array_limit$o(arr, i) || _unsupported_iterable_to_array$q(arr, i) || _non_iterable_rest$o();
+  }
+  function _to_consumable_array$6(arr) {
+    return _array_without_holes$6(arr) || _iterable_to_array$6(arr) || _unsupported_iterable_to_array$q(arr) || _non_iterable_spread$6();
+  }
+  function _unsupported_iterable_to_array$q(o, minLen) {
+    if (!o)
+      return;
+    if (typeof o === "string")
+      return _array_like_to_array$q(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor)
+      n = o.constructor.name;
+    if (n === "Map" || n === "Set")
+      return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))
+      return _array_like_to_array$q(o, minLen);
+  }
   var transformToKebab = function(string) {
     var result = "";
     string.split("").forEach(function(char) {
@@ -1222,84 +1295,6 @@
   var trimStringToMaxLength = function(val, maxLength) {
     return val.length > maxLength ? val.slice(0, maxLength) : val;
   };
-  var getTestId = function(testId, postfix) {
-    if (!isNotEmpty(testId)) {
-      return void 0;
-    }
-    return isNotEmpty(postfix) ? "".concat(testId, "-").concat(postfix) : testId;
-  };
-  function _array_like_to_array$q(arr, len) {
-    if (len == null || len > arr.length)
-      len = arr.length;
-    for (var i = 0, arr2 = new Array(len); i < len; i++)
-      arr2[i] = arr[i];
-    return arr2;
-  }
-  function _array_with_holes$o(arr) {
-    if (Array.isArray(arr))
-      return arr;
-  }
-  function _array_without_holes$6(arr) {
-    if (Array.isArray(arr))
-      return _array_like_to_array$q(arr);
-  }
-  function _iterable_to_array$6(iter) {
-    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null)
-      return Array.from(iter);
-  }
-  function _iterable_to_array_limit$o(arr, i) {
-    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-    if (_i == null)
-      return;
-    var _arr = [];
-    var _n = true;
-    var _d = false;
-    var _s, _e;
-    try {
-      for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
-        _arr.push(_s.value);
-        if (i && _arr.length === i)
-          break;
-      }
-    } catch (err) {
-      _d = true;
-      _e = err;
-    } finally {
-      try {
-        if (!_n && _i["return"] != null)
-          _i["return"]();
-      } finally {
-        if (_d)
-          throw _e;
-      }
-    }
-    return _arr;
-  }
-  function _non_iterable_rest$o() {
-    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-  }
-  function _non_iterable_spread$6() {
-    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 _sliced_to_array$o(arr, i) {
-    return _array_with_holes$o(arr) || _iterable_to_array_limit$o(arr, i) || _unsupported_iterable_to_array$q(arr, i) || _non_iterable_rest$o();
-  }
-  function _to_consumable_array$6(arr) {
-    return _array_without_holes$6(arr) || _iterable_to_array$6(arr) || _unsupported_iterable_to_array$q(arr) || _non_iterable_spread$6();
-  }
-  function _unsupported_iterable_to_array$q(o, minLen) {
-    if (!o)
-      return;
-    if (typeof o === "string")
-      return _array_like_to_array$q(o, minLen);
-    var n = Object.prototype.toString.call(o).slice(8, -1);
-    if (n === "Object" && o.constructor)
-      n = o.constructor.name;
-    if (n === "Map" || n === "Set")
-      return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))
-      return _array_like_to_array$q(o, minLen);
-  }
   var addDataAttributes = function() {
     var data = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     return Object.fromEntries(Object.entries(data).map(function(param) {
@@ -1319,7 +1314,29 @@
       "data-testid": testId
     } : void 0;
   };
-  var rgba = hexToRgba;
+  var getTestId = function(testId, postfix) {
+    if (!isNotEmpty(testId)) {
+      return void 0;
+    }
+    return isNotEmpty(postfix) ? "".concat(testId, "-").concat(postfix) : testId;
+  };
+  var getSelectKeyHandler = function(cb) {
+    return function(e) {
+      if (e.code === "Enter" || e.code === "NumpadEnter") {
+        cb(e);
+      }
+    };
+  };
+  var addClickHandler = function(cb) {
+    var hasAction = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : true;
+    return hasAction && isNotEmpty(cb) ? {
+      tabIndex: 0,
+      onClick: cb,
+      onKeyDown: getSelectKeyHandler(cb)
+    } : {
+      tabIndex: -1
+    };
+  };
   var minWidthModifier = {
     name: "minWidth",
     enabled: true,
@@ -4183,63 +4200,63 @@
       ]
     });
   };
-  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
@@ -5383,7 +5400,10 @@
       pointerEvents: "none"
     },
     input: {
-      display: "none"
+      width: 1,
+      height: 1,
+      position: "absolute",
+      opacity: 0
     },
     children: {
       maxWidth: "calc(100% - 32px)",
@@ -5533,19 +5553,21 @@
       return _array_like_to_array$m(o, minLen);
   }
   function Checkbox(param) {
-    var children = param.children, isDisabled = param.isDisabled, _param_isChecked = param.isChecked, isChecked = _param_isChecked === void 0 ? false : _param_isChecked, value = param.value, _param_size = param.size, size = _param_size === void 0 ? 18 : _param_size, _param_alignItems = param.alignItems, alignItems = _param_alignItems === void 0 ? "center" : _param_alignItems, textMargin = param.textMargin, data = param.data, testId = param.testId, isSemiChecked = param.isSemiChecked, _param_labelPosition = param.labelPosition, labelPosition = _param_labelPosition === void 0 ? "right" : _param_labelPosition, tweakStyles = param.tweakStyles, onSelect = param.onSelect;
+    var children = param.children, isDisabled = param.isDisabled, isReadonly = param.isReadonly, _param_isChecked = param.isChecked, isChecked = _param_isChecked === void 0 ? false : _param_isChecked, value = param.value, _param_size = param.size, size = _param_size === void 0 ? 18 : _param_size, _param_alignItems = param.alignItems, alignItems = _param_alignItems === void 0 ? "center" : _param_alignItems, textMargin = param.textMargin, data = param.data, testId = param.testId, isSemiChecked = param.isSemiChecked, _param_labelPosition = param.labelPosition, labelPosition = _param_labelPosition === void 0 ? "right" : _param_labelPosition, tweakStyles = param.tweakStyles, onSelect = param.onSelect;
     var classes = useTheme("Checkbox", styles$C, tweakStyles, {
       size,
       alignItems,
       textMargin
     }).classes;
     var _useState = _sliced_to_array$m(React.useState(false), 2), isSelected = _useState[0], setIsSelected = _useState[1];
-    var onChange = function(isBeingSelected) {
+    var hasAction = !isDisabled && !isReadonly;
+    var onToggle = function() {
+      var newValue = !isSelected;
       onSelect({
         value,
-        isSelected: isBeingSelected
+        isSelected: newValue
       });
-      setIsSelected(isBeingSelected);
+      setIsSelected(newValue);
     };
     React.useEffect(function() {
       setIsSelected(isChecked);
@@ -5557,15 +5579,16 @@
       className: clsx(classes.root, (_obj = {}, _define_property$E(_obj, classes.disabled, isDisabled), _define_property$E(_obj, classes.labelPositionLeft, labelPosition === "left"), _obj))
     }, addDataTestId(testId), addDataAttributes(data)), {
       children: [
-        /* @__PURE__ */ jsx("input", {
+        /* @__PURE__ */ jsx("input", _object_spread$D({
+          type: "checkbox",
           className: classes.input,
           checked: isSelected,
-          onChange: isDisabled ? void 0 : function() {
-            return onChange(!isSelected);
-          },
           disabled: isDisabled,
-          type: "checkbox"
-        }),
+          readOnly: isReadonly
+        }, hasAction && {
+          onChange: onToggle,
+          onKeyDown: getSelectKeyHandler(onToggle)
+        })),
         /* @__PURE__ */ jsx("div", {
           className: clsx(classes.check, isSelected && classes.checked),
           children: /* @__PURE__ */ jsx(Icon, {
@@ -7662,7 +7685,7 @@
       if (optionsMode !== "search") {
         return options;
       }
-      if (optionsFilter) {
+      if (isNotEmpty(optionsFilter)) {
         return optionsFilter(options, searchValue);
       }
       var lowerCaseValue = searchValue === null || searchValue === void 0 ? void 0 : searchValue.toLowerCase();
@@ -7684,12 +7707,14 @@
       value,
       convertValueToString
     ]);
-    var handleListClose = function(event) {
+    var handleListClose = React.useCallback(function(event) {
       setIsListOpen(false);
       setSearchValue("");
       setShouldShowDefaultOption(true);
       onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
-    };
+    }, [
+      onBlur
+    ]);
     var handleListOpen = function() {
       if (!isListOpen) {
         setIsListOpen(true);
@@ -7707,11 +7732,11 @@
         handleListClose(event);
         return;
       }
-      if (!isNotEmpty(event.relatedTarget) || !isNotEmpty(list.current)) {
+      if (!isNotEmpty(event.relatedTarget) || !isNotEmpty(list.current) || !isNotEmpty(inputWrapper.current)) {
         return;
       }
-      var isActionInsideList = hasExactParent(event.relatedTarget, list.current);
-      if (!isActionInsideList) {
+      var isActionInsideSelect = hasExactParent(event.relatedTarget, list.current) || hasExactParent(event.relatedTarget, inputWrapper.current);
+      if (!isActionInsideSelect) {
         handleListClose(event);
       }
     };
@@ -7723,6 +7748,7 @@
       onChange(newValue);
     }, [
       value,
+      compareValuesOnChange,
       onChange
     ]);
     var handleOptionSelect = React.useCallback(function(index, event) {
@@ -7732,6 +7758,7 @@
       (_input_current = input.current) === null || _input_current === void 0 ? void 0 : _input_current.blur();
     }, [
       handleOnChange,
+      handleListClose,
       filteredOptions
     ]);
     var handleOnType = React.useCallback(function() {
@@ -27116,6 +27143,7 @@
   exports2.ThemedPreloader = ThemedPreloader;
   exports2.Toaster = Toaster;
   exports2.Tooltip = Tooltip;
+  exports2.addClickHandler = addClickHandler;
   exports2.addDataAttributes = addDataAttributes;
   exports2.addDataTestId = addDataTestId;
   exports2.checkElementParentsClassNames = checkElementParentsClassNames;
@@ -27136,6 +27164,7 @@
   exports2.getPhoneMask = getPhoneMask;
   exports2.getPhoneObjFromString = getPhoneObjFromString;
   exports2.getScrollParent = getScrollParent$1;
+  exports2.getSelectKeyHandler = getSelectKeyHandler;
   exports2.getStyleComputedProperty = getStyleComputedProperty;
   exports2.getTestId = getTestId;
   exports2.hasExactParent = hasExactParent;