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

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

@@ -1,9 +1,7 @@
 import { ITweakStyles } from '../../theme';
 import { IInputStyles } from '../Input';
-export declare const BUTTONS_WIDTH = 36;
-export declare const BUTTONS_GAP = 2;
-export declare const useStyles: import("../../theme").IUseStyles<"root" | "button" | "buttons" | "disabledButton" | "errorButton", unknown>;
 export declare const inputStyles: IInputStyles;
+export declare const useStyles: import("../../theme").IUseStyles<"button" | "icon" | "buttons" | "disabledButton" | "errorButton", unknown>;
 export type IIncrementInputStyles = ITweakStyles<typeof useStyles, {
     tweakInput: IInputStyles;
 }>;

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' | 'groupPlacement' | 'isInvalid' | 'isRequired' | 'isLoading' | 'isDisabled' | 'onIconClick' | 'size'>, 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' | 'onIconClick'>, Pick<Partial<ReactInputMaskBaseProps>, 'mask' | 'maskPlaceholder' | 'alwaysShowMask' | 'beforeMaskedStateChange'> {
     value?: string;
     units?: ReactNode;
     /** @default false */

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

@@ -10485,7 +10485,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, 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, onIconClick = _param.onIconClick, children = _param.children, inputProps = _object_without_properties$i(_param, [
     "value",
     "placeholder",
     "label",
@@ -10521,7 +10521,8 @@ var InputBase = /* @__PURE__ */ forwardRef(function(_param, ref) {
     "isLoading",
     "isRequired",
     "size",
-    "onIconClick"
+    "onIconClick",
+    "children"
   ]);
   var classes = useStyles$G({
     theme: tweakStyles
@@ -10636,7 +10637,7 @@ var InputBase = /* @__PURE__ */ forwardRef(function(_param, ref) {
       })
     ]
   });
-  return /* @__PURE__ */ jsx(ControlWrapper, {
+  return /* @__PURE__ */ jsxs(ControlWrapper, {
     label,
     isDisabled,
     isFocused: hasFocus,
@@ -10652,10 +10653,13 @@ var InputBase = /* @__PURE__ */ forwardRef(function(_param, ref) {
     isRequired,
     onIconClick,
     size: size2,
-    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) {
@@ -27892,71 +27896,62 @@ function FlexibleTable(_param) {
     }))
   });
 }
-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, {
@@ -28042,15 +28037,13 @@ function _object_without_properties_loose$7(source, excluded) {
   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",
@@ -28065,8 +28058,9 @@ var IncrementInput = function(_param) {
   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 || isNotEmpty(intPartPrecision) && getNumberLength((value !== null && value !== void 0 ? value : 0) + step) > intPartPrecision || isNotEmpty(max2) && isNotEmpty(value) && value >= max2;
+  var isDecreaseDisabled = isEditDisabled || isNotEmpty(min2) && isNotEmpty(value) && value <= min2;
   var increment = function() {
     onChange(getNumberInRange((value !== null && value !== void 0 ? value : 0) + step, min2, max2));
   };
@@ -28081,45 +28075,45 @@ var IncrementInput = function(_param) {
     step
   ]);
   var _obj2, _obj1;
-  return /* @__PURE__ */ jsxs("div", _object_spread_props$i(_object_spread$j({
-    className: classes.root
-  }, 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;