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

package/dist/components/ControlWrapper/ControlWrapper.d.ts

@@ -1,12 +1,13 @@
 import { FC, ReactNode } from 'react';
+import { IMaybeArray } from '../../theme';
 import { IClickHandlerEvent, ICommonProps } from '../../types';
 import { IIcon } from '../Icon';
-import { IControlWrapperSize } from './types';
+import { IControlWrapperIcon, IControlWrapperSize } from './types';
 import { IControlWrapperStyles } from './ControlWrapper.styles';
 export interface IControlWrapperProps extends ICommonProps<IControlWrapperStyles> {
     children: ReactNode;
     label?: ReactNode;
-    icon?: IIcon;
+    icon?: IMaybeArray<IIcon | IControlWrapperIcon>;
     size?: IControlWrapperSize;
     groupPlacement?: 'left' | 'right' | 'middle' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
     /** @default false */
@@ -23,7 +24,6 @@ export interface IControlWrapperProps extends ICommonProps<IControlWrapperStyles
     isLoading?: boolean;
     /** @default false */
     isDisabled?: boolean;
-    onIconClick?: (event: IClickHandlerEvent) => void;
     onClear?: (event: IClickHandlerEvent) => void;
 }
 export declare const ControlWrapper: FC<IControlWrapperProps>;

package/dist/components/ControlWrapper/helpers.d.ts

@@ -0,0 +1,4 @@
+import { IIcon } from '../Icon';
+import { IControlWrapperIcon } from './types';
+export declare const isControlWrapperIcon: (iconItem: IIcon | IControlWrapperIcon) => iconItem is IControlWrapperIcon;
+export declare const convertToControlWrapperIcon: (iconItem: IIcon | IControlWrapperIcon) => IControlWrapperIcon;

package/dist/components/ControlWrapper/index.d.ts

@@ -1,3 +1,4 @@
 export * from './ControlWrapper';
+export * from './helpers';
 export * from './types';
 export type { IControlWrapperStyles } from './ControlWrapper.styles';

package/dist/components/ControlWrapper/types.d.ts

@@ -1,3 +1,12 @@
+import { type Key } from 'react';
+import { IClickHandlerEvent } from '../../types';
+import { IIcon } from '../Icon';
 export interface IControlWrapperSizes {
 }
 export type IControlWrapperSize = keyof IControlWrapperSizes;
+export interface IControlWrapperIcon {
+    key?: Key;
+    iconComponent: IIcon;
+    onClick?: (event: IClickHandlerEvent) => void;
+    shouldResetSize?: boolean;
+}

package/dist/components/Input/InputBase.d.ts

@@ -4,7 +4,7 @@ import { ICommonProps } from '../../types';
 import { IControlWrapperProps } from '../ControlWrapper';
 import { IChangeInputEvent } from './types';
 import { IInputStyles } from './Input.styles';
-export interface IInputBaseProps extends ICommonProps<IInputStyles>, Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size'>, Pick<IControlWrapperProps, 'label' | 'icon' | 'size' | 'groupPlacement' | 'isInvalid' | 'isRequired' | 'isLoading' | 'isDisabled' | 'onIconClick'>, Pick<Partial<ReactInputMaskBaseProps>, 'mask' | 'maskPlaceholder' | 'alwaysShowMask' | 'beforeMaskedStateChange'> {
+export interface IInputBaseProps extends ICommonProps<IInputStyles>, Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size'>, Pick<IControlWrapperProps, 'label' | 'icon' | 'size' | 'groupPlacement' | 'isInvalid' | 'isRequired' | 'isLoading' | 'isDisabled'>, Pick<Partial<ReactInputMaskBaseProps>, 'mask' | 'maskPlaceholder' | 'alwaysShowMask' | 'beforeMaskedStateChange'> {
     value?: string;
     units?: ReactNode;
     /** @default false */

package/dist/components/Select/Select.styles.d.ts

@@ -3,7 +3,7 @@ import { type IInputStyles } from '../Input';
 import { type ISearchInputStyles } from '../SearchInput';
 import { IWithMessagesStyles } from '../WithMessages';
 import { type ISelectListStyles } from './components';
-export declare const useStyles: import("../../theme").IUseStyles<"root" | "icon" | "disabled" | "inputWrapper" | "arrow" | "listWrapper" | "withoutPopper" | "listWrapperInBody" | "activeArrow" | "counter" | "iconWrapper", unknown>;
+export declare const useStyles: import("../../theme").IUseStyles<"root" | "disabled" | "inputWrapper" | "arrow" | "listWrapper" | "withoutPopper" | "listWrapperInBody" | "activeArrow" | "counter", unknown>;
 export declare const readonlyInputStyles: Partial<import("jss").Styles<"input" | "withValue" | "inputContent" | "autoSizeWrapper" | "autoSized" | "withUnits" | "withLabel" | "fakeValue" | "units" | "focusedInput" | "disabledInput" | "invalidInput", unknown, undefined>> & Partial<{
     tweakControlWrapper: Partial<import("jss").Styles<"invalid" | "icon" | "disabled" | "loader" | "loading" | "label" | "requiredLabel" | "withValue" | "clearIcon" | "focused" | "wrapper" | "controlWrapper" | "minContent" | "activeLabel" | "disabledLabel" | "controls" | "iconInner" | "customIcon" | "endIcon" | "activeIcon" | "placement-top" | "placement-bottom" | "placement-top-left" | "placement-top-right" | "placement-bottom-left" | "placement-bottom-right" | "placement-left" | "placement-right" | "placement-middle", unknown, undefined>> & Partial<{
         tweakPreloader: Partial<import("jss").Styles<"root" | "default" | "currentColor" | "dots" | "logo", unknown, undefined>> & Partial<{

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

@@ -1,7 +1,7 @@
 import React, { createContext, useMemo, useContext, useInsertionEffect, useRef, useEffect, useCallback, useState, createElement, Fragment as Fragment$1, forwardRef, createRef, PureComponent, memo } from "react";
 import { jss, JssContext as JssContext$1, createUseStyles } from "react-jss";
-import { isNotEmpty, isArrayNotEmpty, mergeStyles, joinStrings, isObject as isObject$1, isStringEmpty, isString, isStringNotEmpty, mergeRefs, addDataTestId, applyAction, addDataAttributes as addDataAttributes$1, stopPropagation, isReactNodeNotEmpty, addClickHandler, getTestId, getSelectKeyHandler, isArrayLikeNotEmpty, getArray, createFilter, isEmpty, isFunction as isFunction$1, getTransition, indexMap, isNumberInteger, hasDuplicates, isArrayEmpty } from "@true-engineering/true-react-platform-helpers";
-import { merge as merge$2 } from "lodash-es";
+import { isNotEmpty, isArrayNotEmpty, mergeStyles, joinStrings, isObject as isObject$1, isStringEmpty, isString, isStringNotEmpty, mergeRefs, addDataTestId, applyAction, addDataAttributes as addDataAttributes$1, stopPropagation, isReactNodeNotEmpty, addClickHandler, getTestId, getSelectKeyHandler, getArray, isArrayLikeNotEmpty, createFilter, isEmpty, isFunction as isFunction$1, getTransition, indexMap, isNumberInteger, hasDuplicates, isArrayEmpty } from "@true-engineering/true-react-platform-helpers";
+import { merge as merge$2, isObject as isObject$2 } from "lodash-es";
 import { CSSTransition } from "react-transition-group";
 import clsx from "clsx";
 import hexToRgba from "hex-to-rgba";
@@ -9972,15 +9972,23 @@ var WithMessages = /* @__PURE__ */ forwardRef(function(param, ref) {
     ]
   }));
 });
-var CONTROL$1 = dimensions.CONTROL, Z_INDEX$1 = dimensions.Z_INDEX;
+var isControlWrapperIcon = function(iconItem) {
+  return isObject$2(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",
@@ -10177,20 +10185,21 @@ function _object_spread_props$I(target, source) {
   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, size2 = 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, size2 = 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 && isReactNodeNotEmpty(icon);
+  var icons = getArray(icon).map(convertToControlWrapperIcon);
+  var hasIcons = !isLoading && isArrayNotEmpty(icons);
   var hasClearButton = !isDisabled && !isLoading && hasValue && 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, isNotEmpty(groupPlacement) && classes["placement-".concat(groupPlacement)], isNotEmpty(size2) && classes[size2], (_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))
   }, addDataAttributes$1(data, testId)), {
@@ -10216,14 +10225,18 @@ var ControlWrapper = function(param) {
                   })
                 })
               })),
-              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 && isNotEmpty(onIconClick)), _define_property$U(_obj22, classes.customIcon, !isString(icon)), _obj22))
-              }, addClickHandler(onIconClick, !isDisabled), 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 && isNotEmpty(onClick)), _define_property$U(_obj3, classes.customIcon, shouldResetSize), _obj3))
+                }, addClickHandler(onClick, !isDisabled), 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)
               }, addDataTestId(testId, "loading")), {
@@ -10565,7 +10578,7 @@ function _ts_generator$5(thisArg, body) {
   }
 }
 var InputBase = /* @__PURE__ */ 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, size2 = _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, size2 = _param.size, children = _param.children, inputProps = _object_without_properties$i(_param, [
     "value",
     "placeholder",
     "label",
@@ -10601,7 +10614,6 @@ var InputBase = /* @__PURE__ */ forwardRef(function(_param, ref) {
     "isLoading",
     "isRequired",
     "size",
-    "onIconClick",
     "children"
   ]);
   var classes = useStyles$G({
@@ -10731,7 +10743,6 @@ var InputBase = /* @__PURE__ */ forwardRef(function(_param, ref) {
     icon,
     isLoading,
     isRequired,
-    onIconClick,
     size: size2,
     children: [
       hasUnits || isAutoSized ? /* @__PURE__ */ jsx("div", {
@@ -11675,7 +11686,7 @@ var getDefaultConvertToIdFunction = function(convertValueToString) {
     return 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%",
@@ -11684,8 +11695,7 @@ var useStyles$D = createThemedStyles("Select", {
   },
   inputWrapper: {
     width: "100%",
-    cursor: "text",
-    position: "relative"
+    cursor: "text"
   },
   listWrapper: {
     left: -1,
@@ -11704,57 +11714,28 @@ var useStyles$D = createThemedStyles("Select", {
     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 = {
@@ -12501,23 +12482,6 @@ function Select(props) {
       onToggleCheckbox: handleToggleOptionCheckbox
     })
   }));
-  var multiSelectCounterWithIcon = shouldShowMultiSelectCounter || isNotEmpty(icon) ? /* @__PURE__ */ jsxs("div", {
-    className: classes.iconWrapper,
-    children: [
-      shouldShowMultiSelectCounter && /* @__PURE__ */ jsxs("div", {
-        className: classes.counter,
-        children: [
-          "(+",
-          value.length - 1,
-          ")"
-        ]
-      }),
-      isNotEmpty(icon) && /* @__PURE__ */ jsx("div", {
-        className: classes.icon,
-        children: renderIcon(icon)
-      })
-    ]
-  }) : void 0;
   return /* @__PURE__ */ jsx(WithMessages, {
     errorMessage,
     infoMessage,
@@ -12528,34 +12492,43 @@ function Select(props) {
       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(getArray(icon)), [
+              /* @__PURE__ */ jsx("div", {
+                className: clsx(classes.arrow, isOpen && classes.activeArrow),
+                onClick: onArrowClick,
+                children: renderIcon(dropdownIcon)
+              }, "arrow")
+            ]).filter(isNotEmpty)
+          }, inputProps))
         }),
         shouldUsePopper ? /* @__PURE__ */ jsx(Portal, {
           container: shouldRenderInBody ? document.body : inputWrapper.current,
@@ -32675,6 +32648,7 @@ export {
   cleanStyles,
   colors,
   common,
+  convertToControlWrapperIcon,
   createThemedStyles,
   dimensions,
   findCountryByCode,
@@ -32699,6 +32673,7 @@ export {
   hasExactParent,
   helpers,
   iconsList,
+  isControlWrapperIcon,
   isElementOffScreen,
   isElementOneOfParents,
   isSpaceChar,