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

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

@@ -1109,6 +1109,79 @@ function requireReactJsxRuntime_development() {
 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) {
@@ -1232,84 +1305,6 @@ var isNotEmpty = function(val) {
 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) {
@@ -1329,7 +1324,29 @@ var addDataTestId = function() {
     "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,
@@ -4193,63 +4210,63 @@ var IconBoilerplate = function(param) {
     ]
   });
 };
-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
@@ -5393,7 +5410,10 @@ var styles$C = {
     pointerEvents: "none"
   },
   input: {
-    display: "none"
+    width: 1,
+    height: 1,
+    position: "absolute",
+    opacity: 0
   },
   children: {
     maxWidth: "calc(100% - 32px)",
@@ -5543,19 +5563,21 @@ function _unsupported_iterable_to_array$m(o, minLen) {
     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(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);
   };
   useEffect(function() {
     setIsSelected(isChecked);
@@ -5567,15 +5589,16 @@ function Checkbox(param) {
     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, {
@@ -6370,7 +6393,7 @@ var __generator$5 = globalThis && globalThis.__generator || function(thisArg, bo
 };
 var DEFAULT_SIZE = 6;
 var Input = /* @__PURE__ */ forwardRef(function(param, ref) {
-  var _param_value = param.value, value = _param_value === void 0 ? "" : _param_value, label = param.label, placeholder = param.placeholder, _param_type = param.type, type = _param_type === void 0 ? "text" : _param_type, isDisabled = param.isDisabled, isReadonly = param.isReadonly, _param_hasFloatingLabel = param.hasFloatingLabel, hasFloatingLabel = _param_hasFloatingLabel === void 0 ? true : _param_hasFloatingLabel, _param_isInvalid = param.isInvalid, isInvalid = _param_isInvalid === void 0 ? false : _param_isInvalid, _param_isActive = param.isActive, isActive = _param_isActive === void 0 ? false : _param_isActive, _param_isClearable = param.isClearable, isClearable = _param_isClearable === void 0 ? false : _param_isClearable, infoMessage = param.infoMessage, errorMessage = param.errorMessage, _param_errorPosition = param.errorPosition, errorPosition = _param_errorPosition === void 0 ? "bottom" : _param_errorPosition, inlineStyle = param.inlineStyle, border = param.border, isRequired = param.isRequired, isLoading = param.isLoading, isAutoSizeable = param.isAutoSizeable, _param_defaultSize = param.defaultSize, defaultSize = _param_defaultSize === void 0 ? DEFAULT_SIZE : _param_defaultSize, iconType = param.iconType, name = param.name, hasRequiredLabel = param.hasRequiredLabel, data = param.data, tweakStyles = param.tweakStyles, maxLength = param.maxLength, shouldFocusOnMount = param.shouldFocusOnMount, units = param.units, testId = param.testId, tabIndex = param.tabIndex, onChange = param.onChange, onPaste = param.onPaste, onFocus = param.onFocus, onBlur = param.onBlur, onIconClick = param.onIconClick, onKeyDown = param.onKeyDown, mask = param.mask, maskChar = param.maskChar, maskPlaceholder = param.maskPlaceholder, alwaysShowMask = param.alwaysShowMask, beforeMaskedStateChange = param.beforeMaskedStateChange;
+  var _param_value = param.value, value = _param_value === void 0 ? "" : _param_value, label = param.label, placeholder = param.placeholder, _param_type = param.type, type = _param_type === void 0 ? "text" : _param_type, isDisabled = param.isDisabled, isReadonly = param.isReadonly, _param_hasFloatingLabel = param.hasFloatingLabel, hasFloatingLabel = _param_hasFloatingLabel === void 0 ? true : _param_hasFloatingLabel, _param_isInvalid = param.isInvalid, isInvalid = _param_isInvalid === void 0 ? false : _param_isInvalid, _param_isActive = param.isActive, isActive = _param_isActive === void 0 ? false : _param_isActive, _param_isClearable = param.isClearable, isClearable = _param_isClearable === void 0 ? false : _param_isClearable, infoMessage = param.infoMessage, errorMessage = param.errorMessage, _param_errorPosition = param.errorPosition, errorPosition = _param_errorPosition === void 0 ? "bottom" : _param_errorPosition, inlineStyle = param.inlineStyle, border = param.border, isRequired = param.isRequired, isLoading = param.isLoading, isAutoSizeable = param.isAutoSizeable, _param_defaultSize = param.defaultSize, defaultSize = _param_defaultSize === void 0 ? DEFAULT_SIZE : _param_defaultSize, iconType = param.iconType, name = param.name, hasRequiredLabel = param.hasRequiredLabel, data = param.data, tweakStyles = param.tweakStyles, maxLength = param.maxLength, shouldFocusOnMount = param.shouldFocusOnMount, units = param.units, testId = param.testId, tabIndex = param.tabIndex, onChange = param.onChange, onPaste = param.onPaste, onFocus = param.onFocus, onBlur = param.onBlur, onIconClick = param.onIconClick, onKeyDown = param.onKeyDown, mask = param.mask, maskPlaceholder = param.maskPlaceholder, alwaysShowMask = param.alwaysShowMask, beforeMaskedStateChange = param.beforeMaskedStateChange;
   var _useTheme = useTheme("Input", styles$y, tweakStyles), classes = _useTheme.classes, componentStyles = _useTheme.componentStyles;
   var _useState = _sliced_to_array$k(useState(false), 2), isFocused = _useState[0], setFocused = _useState[1];
   var inputRef = useRef(null);
@@ -6450,7 +6473,6 @@ var Input = /* @__PURE__ */ forwardRef(function(param, ref) {
           }, props)) : /* @__PURE__ */ jsx(InputMask, _object_spread$A({
             ref: ref !== null && ref !== void 0 ? ref : inputRef,
             mask,
-            maskChar,
             maskPlaceholder,
             alwaysShowMask,
             beforeMaskedStateChange
@@ -7673,7 +7695,7 @@ function Select(_param) {
     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();
@@ -7695,12 +7717,14 @@ function Select(_param) {
     value,
     convertValueToString
   ]);
-  var handleListClose = function(event) {
+  var handleListClose = 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);
@@ -7718,11 +7742,11 @@ function Select(_param) {
       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);
     }
   };
@@ -7734,6 +7758,7 @@ function Select(_param) {
     onChange(newValue);
   }, [
     value,
+    compareValuesOnChange,
     onChange
   ]);
   var handleOptionSelect = useCallback(function(index, event) {
@@ -7743,6 +7768,7 @@ function Select(_param) {
     (_input_current = input.current) === null || _input_current === void 0 ? void 0 : _input_current.blur();
   }, [
     handleOnChange,
+    handleListClose,
     filteredOptions
   ]);
   var handleOnType = useCallback(function() {
@@ -27128,6 +27154,7 @@ export {
   ThemedPreloader,
   Toaster,
   Tooltip,
+  addClickHandler,
   addDataAttributes,
   addDataTestId,
   checkElementParentsClassNames,
@@ -27148,6 +27175,7 @@ export {
   getPhoneMask,
   getPhoneObjFromString,
   getScrollParent$1 as getScrollParent,
+  getSelectKeyHandler,
   getStyleComputedProperty,
   getTestId,
   hasExactParent,