Merge pull request #347 from nginformatica/chore/hermes-adjusts

fix/adjust textfield character count position;

Author: renanponick

package.json

@@ -1,6 +1,6 @@
 {
     "name": "flipper-ui",
-    "version": "0.31.5",
+    "version": "0.31.6",
     "description": "",
     "main": "dist/index.js",
     "homepage": "https://flipper-ui.ngi.com.br/",

src/core/data-display/data-table/rows.tsx

@@ -205,10 +205,10 @@ export const StatefulRow = <D extends Data>({
 
     return (
         <>
-            {columns.map(column => (
+            {columns.map((column, i) => (
                 <TableCell
                     align={column.align}
-                    key={column.title}
+                    key={`${column.title}-${i}`}
                     style={column.cellStyle}>
                     {getCorrectViewMode(column, mode, isEditable(column))}
                 </TableCell>
@@ -237,11 +237,11 @@ export const NewRow = <D extends Data>({
 
     return (
         <TableRow data-testid='table-row'>
-            {columns.map(column => (
+            {columns.map((column, i) => (
                 <TableCell
                     style={column.cellStyle}
                     align={column.align}
-                    key={column.title}>
+                    key={`${column.title}-${i}`}>
                     {isEditable(column)
                         ? renderEditMode(
                               column,

src/core/inputs/auto-complete/__snapshots__/auto-complete.spec.tsx.snap

@@ -6,7 +6,7 @@ exports[`AutoComplete should match snapshot 1`] = `
     style="position: relative;"
   >
     <div
-      class="sc-dmyCSP kvMDoa"
+      class="sc-dmyCSP jvASYa"
     >
       <div
         class="MuiFormControl-root MuiTextField-root MuiFormControl-fullWidth"

src/core/inputs/date-time/__snapshots__/date-time.spec.tsx.snap

@@ -14,7 +14,7 @@ exports[`DateTime should match snapshot 1`] = `
         class="MuiInputBase-input MuiOutlinedInput-input makeStyles-outlinedInput-49 MuiInputBase-inputAdornedEnd MuiOutlinedInput-inputAdornedEnd"
         role="date-picker"
         type="text"
-        value="03042024"
+        value="03052024"
       />
       <div
         class="MuiInputAdornment-root MuiInputAdornment-positionEnd"

src/core/inputs/mask-field/__snapshots__/mask-field.spec.tsx.snap

@@ -3,7 +3,7 @@
 exports[`MaskField should match snapshot 1`] = `
 <div>
   <div
-    class="sc-dmyCSP kvMDoa"
+    class="sc-dmyCSP jvASYa"
   >
     <div
       class="MuiFormControl-root MuiTextField-root"

src/core/inputs/text-field/__snapshots__/text-field.spec.tsx.snap

@@ -3,7 +3,7 @@
 exports[`TextField should match snapshot 1`] = `
 <div>
   <div
-    class="sc-hLQSwg dhfXCV"
+    class="sc-hLQSwg gdgoxJ"
   >
     <div
       class="MuiFormControl-root MuiTextField-root"

src/core/inputs/text-field/index.tsx

@@ -303,6 +303,12 @@ export const TextField = ({
                                 ? classes.outlinedMultiline
                                 : ''
                     },
+                    endAdornment: characters && (
+                        <CharactersCount>
+                            {otherProps.value?.toString().length}/
+                            {otherProps.inputProps?.maxLength}
+                        </CharactersCount>
+                    ),
                     ...InputProps
                 }}
                 SelectProps={{
@@ -319,12 +325,6 @@ export const TextField = ({
                 {...otherProps}>
                 {options ? renderOptions(options, classes) : children}
             </MuiTextField>
-            {characters && (
-                <CharactersCount>
-                    {otherProps.value?.toString().length}/
-                    {otherProps.inputProps?.maxLength}
-                </CharactersCount>
-            )}
             {onHelperClick && (
                 <HelperBox
                     helperIcon={helperIcon}

src/core/inputs/text-field/styles.ts

@@ -11,9 +11,9 @@ export const Helper = styled.div`
 `
 
 export const TextFieldWrapper = styled.div`
+    width: 100%;
     display: flex;
     flex-direction: rows;
-    width: 100%;
     align-items: center;
     button {
         display: none;
@@ -24,14 +24,13 @@ export const TextFieldWrapper = styled.div`
 `
 
 export const StaticTextFieldWrapper = styled.div`
+    width: 100%;
     display: flex;
     flex-direction: rows;
-    width: 100%;
     align-items: center;
 `
 
 export const CharactersCount = styled.span`
-    margin-left: -35px;
     color: ${grays.g3};
     font-size: 14px;
     font-family:

src/experimental/auto-complete-lab/autocomplete-lab.stories.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
-import { Autocomplete as AutocompleteLab } from '@material-ui/lab'
 import type { Meta } from '@storybook/react'
 import { default as AutoComplete } from '@/core/inputs/auto-complete'
 import { TextField } from '@/core/inputs/text-field'
+import { Autocomplete as AutocompleteLab } from '.'
 
 export default {
     title: 'Experimental/AutoCompleteLab',