@true-engineering/true-react-common-ui-kit 4.0.0-alpha20 → 4.0.0-alpha21

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

@@ -10472,7 +10472,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, 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, onIconClick = _param.onIconClick, children = _param.children, inputProps = _object_without_properties$i(_param, [
       "value",
       "placeholder",
       "label",
@@ -10508,7 +10508,8 @@
       "isLoading",
       "isRequired",
       "size",
-      "onIconClick"
+      "onIconClick",
+      "children"
     ]);
     var classes = useStyles$G({
       theme: tweakStyles
@@ -10623,7 +10624,7 @@
         })
       ]
     });
-    return /* @__PURE__ */ jsx(ControlWrapper, {
+    return /* @__PURE__ */ jsxs(ControlWrapper, {
       label,
       isDisabled,
       isFocused: hasFocus,
@@ -10639,10 +10640,13 @@
       isRequired,
       onIconClick,
       size,
-      children: hasUnits || isAutoSized ? /* @__PURE__ */ jsx("div", {
-        className: classes.autoSizeWrapper,
-        children: inputContent
-      }) : inputContent
+      children: [
+        hasUnits || isAutoSized ? /* @__PURE__ */ jsx("div", {
+          className: classes.autoSizeWrapper,
+          children: inputContent
+        }) : inputContent,
+        children
+      ]
     });
   });
   function _define_property$S(obj, key, value) {
@@ -27879,71 +27883,62 @@
       }))
     });
   }
-  var BUTTONS_WIDTH = 36;
-  var BUTTONS_GAP = 2;
+  var inputStyles$2 = {
+    tweakControlWrapper: {
+      controlWrapper: {
+        "--increment-buttons-width": "36px",
+        "--increment-buttons-gap": "1px",
+        "--increment-buttons-margin": "1px",
+        "--increment-button-icon-size": "16px"
+      }
+    }
+  };
   var useStyles$g = createThemedStyles("IncrementInput", {
-    root: {
-      display: "flex",
-      alignItems: "center",
-      position: "relative"
-    },
     buttons: {
       display: "flex",
       flexDirection: "column",
-      width: BUTTONS_WIDTH,
-      position: "absolute",
-      right: BUTTONS_GAP,
-      top: BUTTONS_GAP,
-      bottom: BUTTONS_GAP,
+      height: "calc(100% - var(--increment-buttons-margin) * 2)",
+      margin: "var(--increment-buttons-margin)",
+      gap: "var(--increment-buttons-gap)",
+      flexShrink: 0,
+      order: 1e3,
+      // сдвигаем кнопки на самый конец
       zIndex: dimensions.Z_INDEX.CONTROL_FOCUS + 1
     },
     button: {
-      width: "100%",
-      height: (dimensions.CONTROL.HEIGHT - 5) / 2,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "var(--increment-buttons-width)",
+      flexGrow: 1,
+      cursor: "pointer",
       border: "none",
       outline: "none",
+      color: colors.FONT_MEDIUM,
       backgroundColor: colors.GREY_BACKGROUND,
       transition: animations.defaultTransition,
-      transitionProperty: "background-color",
-      color: colors.FONT_MEDIUM,
-      cursor: "pointer",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      padding: [
-        0,
-        10
-      ],
+      transitionProperty: "background-color, color",
       "&:hover, &:focus": {
         backgroundColor: colors.GREY_HOVER
       },
       "&:active": {
         backgroundColor: colors.GREY_ACTIVE
-      },
-      "&:first-child": {
-        marginBottom: 1
       }
     },
     disabledButton: {
-      backgroundColor: colors.CLASSIC_WHITE,
-      color: colors.FONT_DISABLED,
       cursor: "default",
+      color: colors.FONT_DISABLED,
+      backgroundColor: colors.CLASSIC_WHITE,
       "&:hover": {
         backgroundColor: colors.CLASSIC_WHITE
       }
     },
-    errorButton: {}
-  });
-  var inputStyles$2 = {
-    input: {
-      paddingRight: BUTTONS_WIDTH + BUTTONS_GAP
-    },
-    tweakControlWrapper: {
-      controls: {
-        paddingRight: BUTTONS_WIDTH + BUTTONS_GAP
-      }
+    errorButton: {},
+    icon: {
+      width: "var(--increment-button-icon-size)",
+      height: "var(--increment-button-icon-size)"
     }
-  };
+  });
   function _define_property$k(obj, key, value) {
     if (key in obj) {
       Object.defineProperty(obj, key, {
@@ -28029,15 +28024,13 @@
     return target;
   }
   var IncrementInput = function(_param) {
-    var value = _param.value, onChange = _param.onChange, min2 = _param.min, max2 = _param.max, _param_step = _param.step, step = _param_step === void 0 ? 1 : _param_step, intPartPrecision = _param.intPartPrecision, data = _param.data, testId = _param.testId, tweakStyles = _param.tweakStyles, isDisabled = _param.isDisabled, isReadonly = _param.isReadonly, isInvalid = _param.isInvalid, props = _object_without_properties$7(_param, [
+    var value = _param.value, onChange = _param.onChange, min2 = _param.min, max2 = _param.max, _param_step = _param.step, step = _param_step === void 0 ? 1 : _param_step, intPartPrecision = _param.intPartPrecision, tweakStyles = _param.tweakStyles, isDisabled = _param.isDisabled, isReadonly = _param.isReadonly, isInvalid = _param.isInvalid, props = _object_without_properties$7(_param, [
       "value",
       "onChange",
       "min",
       "max",
       "step",
       "intPartPrecision",
-      "data",
-      "testId",
       "tweakStyles",
       "isDisabled",
       "isReadonly",
@@ -28052,8 +28045,9 @@
     var classes = useStyles$g({
       theme: tweakStyles
     });
-    var isIncreaseDisabled = isDisabled || isReadonly || intPartPrecision !== void 0 && getNumberLength((value !== null && value !== void 0 ? value : 0) + step) > intPartPrecision || max2 !== void 0 && value !== void 0 && value >= max2;
-    var isDecreaseDisabled = isDisabled || isReadonly || (min2 !== void 0 && value !== void 0 ? value <= min2 : false);
+    var isEditDisabled = isDisabled || isReadonly;
+    var isIncreaseDisabled = isEditDisabled || trueReactPlatformHelpers.isNotEmpty(intPartPrecision) && getNumberLength((value !== null && value !== void 0 ? value : 0) + step) > intPartPrecision || trueReactPlatformHelpers.isNotEmpty(max2) && trueReactPlatformHelpers.isNotEmpty(value) && value >= max2;
+    var isDecreaseDisabled = isEditDisabled || trueReactPlatformHelpers.isNotEmpty(min2) && trueReactPlatformHelpers.isNotEmpty(value) && value <= min2;
     var increment = function() {
       onChange(getNumberInRange((value !== null && value !== void 0 ? value : 0) + step, min2, max2));
     };
@@ -28068,45 +28062,45 @@
       step
     ]);
     var _obj2, _obj1;
-    return /* @__PURE__ */ jsxs("div", _object_spread_props$i(_object_spread$j({
-      className: classes.root
-    }, trueReactPlatformHelpers.addDataTestId(testId), addDataAttributes(data)), {
-      children: [
-        /* @__PURE__ */ jsx(NumberInput, _object_spread_props$i(_object_spread$j({}, props), {
-          isInvalid,
-          isDisabled,
-          isReadonly,
-          min: min2,
-          max: max2,
-          intPartPrecision,
-          onChange,
-          value,
-          tweakStyles: tweakInputStyles
-        })),
-        /* @__PURE__ */ jsxs("div", {
-          className: classes.buttons,
-          children: [
-            /* @__PURE__ */ jsx("button", {
-              className: clsx(classes.button, (_obj2 = {}, _define_property$k(_obj2, classes.disabledButton, isIncreaseDisabled), _define_property$k(_obj2, classes.errorButton, isInvalid), _obj2)),
-              type: "button",
-              disabled: isIncreaseDisabled,
-              onClick: increment,
+    return /* @__PURE__ */ jsx(NumberInput, _object_spread_props$i(_object_spread$j({}, props), {
+      isInvalid,
+      isDisabled,
+      isReadonly,
+      min: min2,
+      max: max2,
+      intPartPrecision,
+      onChange,
+      value,
+      tweakStyles: tweakInputStyles,
+      children: /* @__PURE__ */ jsxs("div", {
+        className: classes.buttons,
+        children: [
+          /* @__PURE__ */ jsx("button", {
+            className: clsx(classes.button, (_obj2 = {}, _define_property$k(_obj2, classes.disabledButton, isIncreaseDisabled), _define_property$k(_obj2, classes.errorButton, isInvalid), _obj2)),
+            type: "button",
+            disabled: isIncreaseDisabled,
+            onClick: increment,
+            children: /* @__PURE__ */ jsx("div", {
+              className: classes.icon,
               children: /* @__PURE__ */ jsx(Icon, {
                 type: "plus"
               })
-            }),
-            /* @__PURE__ */ jsx("button", {
-              className: clsx(classes.button, (_obj1 = {}, _define_property$k(_obj1, classes.disabledButton, isDecreaseDisabled), _define_property$k(_obj1, classes.errorButton, isInvalid), _obj1)),
-              type: "button",
-              disabled: isDecreaseDisabled,
-              onClick: decrement,
+            })
+          }),
+          /* @__PURE__ */ jsx("button", {
+            className: clsx(classes.button, (_obj1 = {}, _define_property$k(_obj1, classes.disabledButton, isDecreaseDisabled), _define_property$k(_obj1, classes.errorButton, isInvalid), _obj1)),
+            type: "button",
+            disabled: isDecreaseDisabled,
+            onClick: decrement,
+            children: /* @__PURE__ */ jsx("div", {
+              className: classes.icon,
               children: /* @__PURE__ */ jsx(Icon, {
                 type: "minus"
               })
             })
-          ]
-        })
-      ]
+          })
+        ]
+      })
     }));
   };
   var VERTICAL_OVERLAY_PADDING = 50;