@true-engineering/true-react-common-ui-kit 4.0.0-alpha29 → 4.0.0-alpha30

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

@@ -9959,15 +9959,23 @@
       ]
     }));
   });
-  var CONTROL$1 = dimensions.CONTROL, Z_INDEX$1 = dimensions.Z_INDEX;
+  var isControlWrapperIcon = function(iconItem) {
+    return lodashEs.isObject(iconItem) && "iconComponent" in iconItem;
+  };
+  var convertToControlWrapperIcon = function(iconItem) {
+    return isControlWrapperIcon(iconItem) ? iconItem : {
+      iconComponent: iconItem
+    };
+  };
+  var CONTROL = dimensions.CONTROL, Z_INDEX$1 = dimensions.Z_INDEX;
   var useStyles$H = createThemedStyles("ControlWrapper", {
     controlWrapper: {
-      "--control-height": "".concat(CONTROL$1.HEIGHT - 2, "px"),
+      "--control-height": "".concat(CONTROL.HEIGHT - 2, "px"),
       // borders
-      "--control-padding": "".concat(CONTROL$1.PADDING, "px"),
-      "--icon-size": "".concat(CONTROL$1.ICON_SIZE, "px"),
-      "--icon-inner-size": "".concat(CONTROL$1.ICON_INNER_SIZE, "px"),
-      "--icon-gap": "".concat(CONTROL$1.ICON_GAP, "px"),
+      "--control-padding": "".concat(CONTROL.PADDING, "px"),
+      "--icon-size": "".concat(CONTROL.ICON_SIZE, "px"),
+      "--icon-inner-size": "".concat(CONTROL.ICON_INNER_SIZE, "px"),
+      "--icon-gap": "".concat(CONTROL.ICON_GAP, "px"),
       display: "flex",
       width: "100%",
       backgroundColor: "white",
@@ -10164,20 +10172,21 @@
     return target;
   }
   var ControlWrapper = function(param) {
-    var label = param.label, icon = param.icon, groupPlacement = param.groupPlacement, isInvalid = param.isInvalid, isFocused = param.isFocused, isRequired = param.isRequired, isLoading = param.isLoading, isFullWidth = param.isFullWidth, isDisabled = param.isDisabled, hasValue = param.hasValue, size = param.size, testId = param.testId, children = param.children, tweakStyles = param.tweakStyles, data = param.data, onIconClick = param.onIconClick, onClear = param.onClear;
+    var label = param.label, icon = param.icon, groupPlacement = param.groupPlacement, isInvalid = param.isInvalid, isFocused = param.isFocused, isRequired = param.isRequired, isLoading = param.isLoading, isFullWidth = param.isFullWidth, isDisabled = param.isDisabled, hasValue = param.hasValue, size = param.size, testId = param.testId, children = param.children, tweakStyles = param.tweakStyles, data = param.data, onClear = param.onClear;
     var classes = useStyles$H({
       theme: tweakStyles
     });
-    var hasEndIcon = !isLoading && trueReactPlatformHelpers.isReactNodeNotEmpty(icon);
+    var icons = trueReactPlatformHelpers.getArray(icon).map(convertToControlWrapperIcon);
+    var hasIcons = !isLoading && trueReactPlatformHelpers.isArrayNotEmpty(icons);
     var hasClearButton = !isDisabled && !isLoading && hasValue && trueReactPlatformHelpers.isNotEmpty(onClear);
-    var hasControls = hasEndIcon || hasClearButton || isLoading;
+    var hasControls = hasIcons || hasClearButton || isLoading;
     var isActive = isFocused || hasValue;
     var tweakPreloaderStyles = useTweakStyles({
       tweakStyles,
       className: "tweakPreloader",
       currentComponentName: "ControlWrapper"
     });
-    var _obj2, _obj1, _obj22;
+    var _obj2, _obj1;
     return /* @__PURE__ */ jsxs("div", _object_spread_props$I(_object_spread$S({
       className: clsx(classes.controlWrapper, trueReactPlatformHelpers.isNotEmpty(groupPlacement) && classes["placement-".concat(groupPlacement)], trueReactPlatformHelpers.isNotEmpty(size) && classes[size], (_obj2 = {}, _define_property$U(_obj2, classes.invalid, isInvalid), _define_property$U(_obj2, classes.focused, isFocused), _define_property$U(_obj2, classes.withValue, hasValue), _define_property$U(_obj2, classes.disabled, isDisabled), _define_property$U(_obj2, classes.loading, isLoading), _define_property$U(_obj2, classes.minContent, !isFullWidth), _obj2))
     }, trueReactPlatformHelpers.addDataAttributes(data, testId)), {
@@ -10203,14 +10212,18 @@
                     })
                   })
                 })),
-                hasEndIcon && /* @__PURE__ */ jsx("div", _object_spread_props$I(_object_spread$S({
-                  className: clsx(classes.icon, classes.endIcon, (_obj22 = {}, _define_property$U(_obj22, classes.activeIcon, !isDisabled && trueReactPlatformHelpers.isNotEmpty(onIconClick)), _define_property$U(_obj22, classes.customIcon, !trueReactPlatformHelpers.isString(icon)), _obj22))
-                }, trueReactPlatformHelpers.addClickHandler(onIconClick, !isDisabled), trueReactPlatformHelpers.addDataTestId(testId, "icon")), {
-                  children: /* @__PURE__ */ jsx("div", {
-                    className: classes.iconInner,
-                    children: renderIcon(icon)
-                  })
-                })),
+                hasIcons && icons.map(function(param2, index) {
+                  var key = param2.key, iconComponent = param2.iconComponent, onClick = param2.onClick, _param_shouldResetSize = param2.shouldResetSize, shouldResetSize = _param_shouldResetSize === void 0 ? false : _param_shouldResetSize;
+                  var _obj3;
+                  return /* @__PURE__ */ jsx("div", _object_spread_props$I(_object_spread$S({
+                    className: clsx(classes.icon, classes.endIcon, (_obj3 = {}, _define_property$U(_obj3, classes.activeIcon, !isDisabled && trueReactPlatformHelpers.isNotEmpty(onClick)), _define_property$U(_obj3, classes.customIcon, shouldResetSize), _obj3))
+                  }, trueReactPlatformHelpers.addClickHandler(onClick, !isDisabled), trueReactPlatformHelpers.addDataTestId(testId, "icon")), {
+                    children: /* @__PURE__ */ jsx("div", {
+                      className: classes.iconInner,
+                      children: renderIcon(iconComponent)
+                    })
+                  }), key !== null && key !== void 0 ? key : index);
+                }),
                 isLoading && /* @__PURE__ */ jsx("div", _object_spread_props$I(_object_spread$S({
                   className: clsx(classes.icon, classes.loader)
                 }, trueReactPlatformHelpers.addDataTestId(testId, "loading")), {
@@ -10552,7 +10565,7 @@
     }
   }
   var InputBase = /* @__PURE__ */ React.forwardRef(function(_param, ref) {
-    var _param_value = _param.value, value = _param_value === void 0 ? "" : _param_value, placeholder = _param.placeholder, label = _param.label, _param_type = _param.type, type = _param_type === void 0 ? "text" : _param_type, isDisabled = _param.isDisabled, autoComplete = _param.autoComplete, initialInputMode = _param.inputMode, isReadonly = _param.isReadonly, isInvalid = _param.isInvalid, isActive = _param.isActive, isClearable = _param.isClearable, isAutoSized = _param.isAutoSized, name = _param.name, tweakStyles = _param.tweakStyles, maxLength = _param.maxLength, shouldFocusOnMount = _param.shouldFocusOnMount, units = _param.units, testId = _param.testId, tabIndex = _param.tabIndex, shouldAlwaysShowPlaceholder = _param.shouldAlwaysShowPlaceholder, onChange = _param.onChange, onPaste = _param.onPaste, onFocus = _param.onFocus, onBlur = _param.onBlur, onKeyDown = _param.onKeyDown, mask = _param.mask, maskPlaceholder = _param.maskPlaceholder, alwaysShowMask = _param.alwaysShowMask, beforeMaskedStateChange = _param.beforeMaskedStateChange, data = _param.data, groupPlacement = _param.groupPlacement, icon = _param.icon, isLoading = _param.isLoading, isRequired = _param.isRequired, size = _param.size, onIconClick = _param.onIconClick, children = _param.children, inputProps = _object_without_properties$i(_param, [
+    var _param_value = _param.value, value = _param_value === void 0 ? "" : _param_value, placeholder = _param.placeholder, label = _param.label, _param_type = _param.type, type = _param_type === void 0 ? "text" : _param_type, isDisabled = _param.isDisabled, autoComplete = _param.autoComplete, initialInputMode = _param.inputMode, isReadonly = _param.isReadonly, isInvalid = _param.isInvalid, isActive = _param.isActive, isClearable = _param.isClearable, isAutoSized = _param.isAutoSized, name = _param.name, tweakStyles = _param.tweakStyles, maxLength = _param.maxLength, shouldFocusOnMount = _param.shouldFocusOnMount, units = _param.units, testId = _param.testId, tabIndex = _param.tabIndex, shouldAlwaysShowPlaceholder = _param.shouldAlwaysShowPlaceholder, onChange = _param.onChange, onPaste = _param.onPaste, onFocus = _param.onFocus, onBlur = _param.onBlur, onKeyDown = _param.onKeyDown, mask = _param.mask, maskPlaceholder = _param.maskPlaceholder, alwaysShowMask = _param.alwaysShowMask, beforeMaskedStateChange = _param.beforeMaskedStateChange, data = _param.data, groupPlacement = _param.groupPlacement, icon = _param.icon, isLoading = _param.isLoading, isRequired = _param.isRequired, size = _param.size, children = _param.children, inputProps = _object_without_properties$i(_param, [
       "value",
       "placeholder",
       "label",
@@ -10588,7 +10601,6 @@
       "isLoading",
       "isRequired",
       "size",
-      "onIconClick",
       "children"
     ]);
     var classes = useStyles$G({
@@ -10718,7 +10730,6 @@
       icon,
       isLoading,
       isRequired,
-      onIconClick,
       size,
       children: [
         hasUnits || isAutoSized ? /* @__PURE__ */ jsx("div", {
@@ -11662,7 +11673,7 @@
       return trueReactPlatformHelpers.isNotEmpty(value === null || value === void 0 ? void 0 : value.id) ? String(value.id) : convertValueToString(value);
     };
   };
-  var CONTROL = dimensions.CONTROL, Z_INDEX = dimensions.Z_INDEX;
+  var Z_INDEX = dimensions.Z_INDEX;
   var useStyles$D = createThemedStyles("Select", {
     root: {
       width: "100%",
@@ -11671,8 +11682,7 @@
     },
     inputWrapper: {
       width: "100%",
-      cursor: "text",
-      position: "relative"
+      cursor: "text"
     },
     listWrapper: {
       left: -1,
@@ -11691,57 +11701,28 @@
       maxWidth: "min-content"
     },
     arrow: {
-      position: "absolute",
-      right: 12,
-      top: "50%",
-      width: 20,
-      height: 20,
+      width: "var(--icon-inner-size, 20px)",
+      height: "var(--icon-inner-size, 20px)",
       cursor: "pointer",
-      transform: "translateY(-50%)",
       transition: animations.defaultTransition,
       transitionProperty: "transform",
       zIndex: Z_INDEX.CONTROL_FOCUS + 1
     },
     activeArrow: {
-      transform: "translateY(-50%) rotate(180deg)"
+      transform: "rotate(180deg)"
     },
     disabled: {
       "& $arrow": {
         cursor: "default"
       }
     },
-    counter: {
-      "&:not(:last-child)": {
-        paddingRight: 8
-      }
-    },
-    icon: {
-      width: CONTROL.ICON_INNER_SIZE,
-      height: CONTROL.ICON_INNER_SIZE
-    },
-    iconWrapper: {
-      display: "flex",
-      alignItems: "center"
-    }
+    counter: {}
   });
   var baseInputStyles = {
-    inputContent: {
-      paddingRight: 32
-    },
     input: {
       "&[readonly]": {
         cursor: "pointer"
       }
-    },
-    tweakControlWrapper: {
-      controls: {
-        paddingRight: 40
-      },
-      icon: {
-        "&:last-child": {
-          paddingRight: 0
-        }
-      }
     }
   };
   var readonlyInputBaseStyles = {
@@ -12488,23 +12469,6 @@
         onToggleCheckbox: handleToggleOptionCheckbox
       })
     }));
-    var multiSelectCounterWithIcon = shouldShowMultiSelectCounter || trueReactPlatformHelpers.isNotEmpty(icon) ? /* @__PURE__ */ jsxs("div", {
-      className: classes.iconWrapper,
-      children: [
-        shouldShowMultiSelectCounter && /* @__PURE__ */ jsxs("div", {
-          className: classes.counter,
-          children: [
-            "(+",
-            value.length - 1,
-            ")"
-          ]
-        }),
-        trueReactPlatformHelpers.isNotEmpty(icon) && /* @__PURE__ */ jsx("div", {
-          className: classes.icon,
-          children: renderIcon(icon)
-        })
-      ]
-    }) : void 0;
     return /* @__PURE__ */ jsx(WithMessages, {
       errorMessage,
       infoMessage,
@@ -12515,34 +12479,43 @@
         onKeyDown: handleKeyDown,
         ref: root2,
         children: [
-          /* @__PURE__ */ jsxs("div", {
+          /* @__PURE__ */ jsx("div", {
             className: clsx(classes.inputWrapper, isDisabled && classes.disabled),
             onClick: isDisabled || isReadonly ? void 0 : handleOnClick,
             ref: inputWrapper,
-            children: [
-              /* @__PURE__ */ jsx(InputBase, _object_spread$J({
-                value: searchValue !== "" && !shouldRenderSearchInputInList ? searchValue : showedStringValue,
-                onChange: handleInputChange,
-                isActive: isListOpen || isActive,
-                isReadonly: hasReadonlyInput,
-                onFocus: handleFocus,
-                onBlur: handleBlur,
-                isDisabled,
-                ref: input,
-                isLoading: areOptionsLoading,
-                tweakStyles: tweakInputStyles,
-                testId,
-                icon: isMultiSelect ? multiSelectCounterWithIcon : icon
-              }, inputProps)),
-              /* @__PURE__ */ jsx("div", {
-                onMouseDown: function(event) {
-                  event.preventDefault();
-                },
-                onClick: onArrowClick,
-                className: clsx(classes.arrow, isOpen && classes.activeArrow),
-                children: renderIcon(dropdownIcon)
-              })
-            ]
+            children: /* @__PURE__ */ jsx(InputBase, _object_spread$J({
+              value: searchValue !== "" && !shouldRenderSearchInputInList ? searchValue : showedStringValue,
+              onChange: handleInputChange,
+              isActive: isListOpen || isActive,
+              isReadonly: hasReadonlyInput,
+              onFocus: handleFocus,
+              onBlur: handleBlur,
+              isDisabled,
+              ref: input,
+              isLoading: areOptionsLoading,
+              tweakStyles: tweakInputStyles,
+              testId,
+              icon: [
+                isMultiSelect && shouldShowMultiSelectCounter ? {
+                  key: "counter",
+                  iconComponent: /* @__PURE__ */ jsxs("div", {
+                    className: classes.counter,
+                    children: [
+                      "(+",
+                      value.length - 1,
+                      ")"
+                    ]
+                  }, "counter"),
+                  shouldResetSize: true
+                } : void 0
+              ].concat(_to_consumable_array$7(trueReactPlatformHelpers.getArray(icon)), [
+                /* @__PURE__ */ jsx("div", {
+                  className: clsx(classes.arrow, isOpen && classes.activeArrow),
+                  onClick: onArrowClick,
+                  children: renderIcon(dropdownIcon)
+                }, "arrow")
+              ]).filter(trueReactPlatformHelpers.isNotEmpty)
+            }, inputProps))
           }),
           shouldUsePopper ? /* @__PURE__ */ jsx(reactOverlays.Portal, {
             container: shouldRenderInBody ? document.body : inputWrapper.current,
@@ -32661,6 +32634,7 @@
   exports2.cleanStyles = cleanStyles;
   exports2.colors = colors;
   exports2.common = common;
+  exports2.convertToControlWrapperIcon = convertToControlWrapperIcon;
   exports2.createThemedStyles = createThemedStyles;
   exports2.dimensions = dimensions;
   exports2.findCountryByCode = findCountryByCode;
@@ -32685,6 +32659,7 @@
   exports2.hasExactParent = hasExactParent;
   exports2.helpers = helpers;
   exports2.iconsList = iconsList;
+  exports2.isControlWrapperIcon = isControlWrapperIcon;
   exports2.isElementOffScreen = isElementOffScreen;
   exports2.isElementOneOfParents = isElementOneOfParents;
   exports2.isSpaceChar = isSpaceChar;