@true-engineering/true-react-common-ui-kit 4.0.0-alpha49 → 4.0.0-alpha50

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "4.0.0-alpha49",
+  "version": "4.0.0-alpha50",
   "description": "True Engineering React UI Kit with theming support",
   "author": "True Engineering (https://trueengineering.ru)",
   "keywords": [

package/src/components/Input/Input.styles.ts

@@ -43,6 +43,10 @@ export const useStyles = createThemedStyles('Input', {
       },
   },
 
+  defaultWrapper: {
+    display: 'contents',
+  },
+
   autoSizeWrapper: {
     position: 'relative',
     display: 'flex',

package/src/components/Input/InputBase.tsx

@@ -200,30 +200,6 @@ export const InputBase = forwardRef<HTMLInputElement, IInputBaseProps>(
       }
     }, []);
 
-    const inputContent = (
-      <>
-        {isNotEmpty(mask) ? (
-          <InputMask
-            ref={mergedRef as unknown as MutableRefObject<InputMask>}
-            mask={mask}
-            maskPlaceholder={maskPlaceholder}
-            alwaysShowMask={alwaysShowMask}
-            beforeMaskedStateChange={beforeMaskedStateChange}
-            {...props}
-          />
-        ) : (
-          <input ref={mergedRef} {...props} />
-        )}
-
-        {(hasUnits || isAutoSized) && <div className={classes.fakeValue}>{value}</div>}
-        {hasUnits && hasValue && (
-          <div className={classes.units} ref={unitsRef}>
-            {units}
-          </div>
-        )}
-      </>
-    );
-
     return (
       <ControlWrapper
         label={label}
@@ -242,11 +218,31 @@ export const InputBase = forwardRef<HTMLInputElement, IInputBaseProps>(
         isRequired={isRequired}
         size={size}
       >
-        {hasUnits || isAutoSized ? (
-          <div className={classes.autoSizeWrapper}>{inputContent}</div>
-        ) : (
-          inputContent
-        )}
+        <div
+          className={clsx(classes.defaultWrapper, {
+            [classes.autoSizeWrapper]: hasUnits || isAutoSized,
+          })}
+        >
+          {isNotEmpty(mask) ? (
+            <InputMask
+              ref={mergedRef as unknown as MutableRefObject<InputMask>}
+              mask={mask}
+              maskPlaceholder={maskPlaceholder}
+              alwaysShowMask={alwaysShowMask}
+              beforeMaskedStateChange={beforeMaskedStateChange}
+              {...props}
+            />
+          ) : (
+            <input ref={mergedRef} {...props} />
+          )}
+
+          {(hasUnits || isAutoSized) && <div className={classes.fakeValue}>{value}</div>}
+          {hasUnits && hasValue && (
+            <div className={classes.units} ref={unitsRef}>
+              {units}
+            </div>
+          )}
+        </div>
         {children}
       </ControlWrapper>
     );