From e70983b882999a85156caed31eb1c6d78ec16bbc Mon Sep 17 00:00:00 2001
From: Karine Brandelli <karinebrandelli@live.com>
Date: Wed, 3 Apr 2024 13:37:28 -0300
Subject: [PATCH 1/3] feat: remove emoji from textfield

---
 package.json                         |  2 +-
 src/core/inputs/text-field/index.tsx | 27 ++++++++++++++++++++++++---
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 388e6eae..6ec8c08d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "flipper-ui",
-    "version": "0.31.4",
+    "version": "0.31.5",
     "description": "",
     "main": "dist/index.js",
     "homepage": "https://flipper-ui.ngi.com.br/",
diff --git a/src/core/inputs/text-field/index.tsx b/src/core/inputs/text-field/index.tsx
index a56be50a..f38f3e52 100644
--- a/src/core/inputs/text-field/index.tsx
+++ b/src/core/inputs/text-field/index.tsx
@@ -221,6 +221,7 @@ export const TextField = ({
     fullWidth,
     hasClear,
     onClear,
+    onChange,
     characters,
     children,
     ...otherProps
@@ -233,6 +234,9 @@ export const TextField = ({
         }
     })
 
+    const classes = useStyles()
+    const clearClass = clearStyle()
+
     const hasValue = !!otherProps.value
 
     const endAdornment =
@@ -240,9 +244,6 @@ export const TextField = ({
             ? { endAdornment: renderEndAdornment(onClear) }
             : {}
 
-    const classes = useStyles()
-    const clearClass = clearStyle()
-
     const handleClick = () => {
         if (onHelperClick) {
             onHelperClick()
@@ -251,6 +252,25 @@ export const TextField = ({
 
     const Wrapper = hasClear ? StaticTextFieldWrapper : TextFieldWrapper
 
+    const emojiRegex =
+        /(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])/g
+
+    const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
+        if (onChange) {
+            const inputValue = event.target.value
+
+            if (emojiRegex.test(inputValue)) {
+                const newValue = inputValue.replace(emojiRegex, '')
+
+                event.target.value = newValue
+
+                return onChange(event)
+            }
+
+            return onChange(event)
+        }
+    }
+
     return (
         <Wrapper>
             <MuiTextField
@@ -295,6 +315,7 @@ export const TextField = ({
                     ...SelectProps
                 }}
                 characters={characters?.toString()}
+                onChange={handleInputChange}
                 {...otherProps}>
                 {options ? renderOptions(options, classes) : children}
             </MuiTextField>

From 59ca8bf19ee671eddb7eb1991ddf693c72153434 Mon Sep 17 00:00:00 2001
From: Karine Brandelli <karinebrandelli@live.com>
Date: Wed, 3 Apr 2024 13:43:41 -0300
Subject: [PATCH 2/3] test: update snapshot

---
 src/core/inputs/date-time/__snapshots__/date-time.spec.tsx.snap | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/core/inputs/date-time/__snapshots__/date-time.spec.tsx.snap b/src/core/inputs/date-time/__snapshots__/date-time.spec.tsx.snap
index 6e3613ef..c14492cd 100644
--- a/src/core/inputs/date-time/__snapshots__/date-time.spec.tsx.snap
+++ b/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="15032024"
+        value="03042024"
       />
       <div
         class="MuiInputAdornment-root MuiInputAdornment-positionEnd"

From 1e73f7d78bc7721622d63647b83f96e5427d4bfa Mon Sep 17 00:00:00 2001
From: Karine Brandelli <karinebrandelli@live.com>
Date: Wed, 3 Apr 2024 14:23:02 -0300
Subject: [PATCH 3/3] test: add test to new handleChange function

---
 .../__snapshots__/text-field.spec.tsx.snap           |  8 ++++----
 src/core/inputs/text-field/text-field.spec.tsx       | 12 ++++++++++++
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/core/inputs/text-field/__snapshots__/text-field.spec.tsx.snap b/src/core/inputs/text-field/__snapshots__/text-field.spec.tsx.snap
index 7dd1577a..90a5d1e5 100644
--- a/src/core/inputs/text-field/__snapshots__/text-field.spec.tsx.snap
+++ b/src/core/inputs/text-field/__snapshots__/text-field.spec.tsx.snap
@@ -15,7 +15,7 @@ exports[`TextField should match snapshot 1`] = `
       >
         <div
           aria-haspopup="listbox"
-          class="MuiSelect-root MuiSelect-select MuiSelect-selectMenu MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input makeStyles-outlinedInput-100 MuiInputBase-inputAdornedEnd MuiOutlinedInput-inputAdornedEnd"
+          class="MuiSelect-root MuiSelect-select MuiSelect-selectMenu MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input makeStyles-outlinedInput-112 MuiInputBase-inputAdornedEnd MuiOutlinedInput-inputAdornedEnd"
           role="button"
           tabindex="0"
         >
@@ -31,7 +31,7 @@ exports[`TextField should match snapshot 1`] = `
         />
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSelect-icon MuiSelect-iconOutlined makeStyles-iconOutlined-104"
+          class="MuiSvgIcon-root MuiSelect-icon MuiSelect-iconOutlined makeStyles-iconOutlined-116"
           focusable="false"
           viewBox="0 0 24 24"
         >
@@ -71,11 +71,11 @@ exports[`TextField should match snapshot 1`] = `
         </div>
         <fieldset
           aria-hidden="true"
-          class="PrivateNotchedOutline-root-105 MuiOutlinedInput-notchedOutline"
+          class="PrivateNotchedOutline-root-117 MuiOutlinedInput-notchedOutline"
           style="padding-left: 8px;"
         >
           <legend
-            class="PrivateNotchedOutline-legend-106"
+            class="PrivateNotchedOutline-legend-118"
             style="width: 0.01px;"
           >
             <span>
diff --git a/src/core/inputs/text-field/text-field.spec.tsx b/src/core/inputs/text-field/text-field.spec.tsx
index 6ffb4352..3b9dae7e 100644
--- a/src/core/inputs/text-field/text-field.spec.tsx
+++ b/src/core/inputs/text-field/text-field.spec.tsx
@@ -153,6 +153,18 @@ describe('TextField', () => {
         })
     })
 
+    it('should remove emojis if typed', () => {
+        render(<TextField inputProps={{ placeholder: 'Description' }} />)
+
+        const inputElement = screen.getByPlaceholderText(
+            'Description'
+        ) as HTMLInputElement
+
+        fireEvent.change(inputElement, { target: { value: 'Hello World😀' } })
+
+        expect(inputElement.value).toBe('Hello World')
+    })
+
     it('should match snapshot', () => {
         const { container } = render(
             <TextField