From a02e5bc4f19e4b22f2eb422521cfe47a02f26b1b Mon Sep 17 00:00:00 2001
From: Oriol Puig <oriol.puig90@gmail.com>
Date: Fri, 6 Sep 2024 12:32:10 +0200
Subject: [PATCH 1/3] feat(components/atom/input): Enable full input features
 on Mask input type

---
 components/atom/input/demo/index.js     | 19 +++++++++++++++++++
 components/atom/input/src/Mask/iMask.js |  2 +-
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/components/atom/input/demo/index.js b/components/atom/input/demo/index.js
index e843b50e7..d3da40eac 100644
--- a/components/atom/input/demo/index.js
+++ b/components/atom/input/demo/index.js
@@ -151,6 +151,25 @@ const TypeDemo = () => {
               )
             }
           ],
+          [
+            'MASK WITH RIGHT ICON',
+            {
+              type: inputTypes.MASK,
+              mask: {mask: 'ES00 0000 0000 00 0000000000'},
+              placeholder: 'ES00 0000 0000 00 0000000000',
+              charsSize: 31,
+              value: 'ES1234567890123456789012',
+              rightIcon: '€'
+            },
+            {
+              description: (
+                <>
+                  Let the user define its own mask for custom purposes. More info at{' '}
+                  <Anchor href="http://shorturl.at/foBF1">http://shorturl.at/foBF1</Anchor>
+                </>
+              )
+            }
+          ],
           [
             'NUMBER',
             {
diff --git a/components/atom/input/src/Mask/iMask.js b/components/atom/input/src/Mask/iMask.js
index 03a3efd58..e25003319 100644
--- a/components/atom/input/src/Mask/iMask.js
+++ b/components/atom/input/src/Mask/iMask.js
@@ -1,6 +1,6 @@
 import {IMaskMixin} from 'react-imask'
 
-import Input from '../Input/Component/index.js'
+import Input from '../Input/index.js'
 
 const IMask = IMaskMixin(({inputRef, value, size, ...props}) => {
   return <Input type="text" ref={inputRef} size={size} value={value} {...props} />

From c8a15a950f92aa63ceec91d9c7b3133fc0bdd815 Mon Sep 17 00:00:00 2001
From: Oriol Puig <oriol.puig90@gmail.com>
Date: Fri, 6 Sep 2024 12:39:26 +0200
Subject: [PATCH 2/3] docs(components/atom/input): Update mask number with
 addons demo

---
 components/atom/input/demo/index.js | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/components/atom/input/demo/index.js b/components/atom/input/demo/index.js
index d3da40eac..faba06d87 100644
--- a/components/atom/input/demo/index.js
+++ b/components/atom/input/demo/index.js
@@ -155,11 +155,14 @@ const TypeDemo = () => {
             'MASK WITH RIGHT ICON',
             {
               type: inputTypes.MASK,
-              mask: {mask: 'ES00 0000 0000 00 0000000000'},
+              mask: {mask: Number},
               placeholder: 'ES00 0000 0000 00 0000000000',
               charsSize: 31,
-              value: 'ES1234567890123456789012',
-              rightIcon: '€'
+              value: '100000',
+              rightIcon: '€',
+              radix: ',',
+              thousandsSeparator: '.',
+              mapToRadix: ['.']
             },
             {
               description: (

From 5d4373b6e407d5c93b7d41c442dd3ac54262d2c4 Mon Sep 17 00:00:00 2001
From: Oriol Puig <oriol.puig90@gmail.com>
Date: Fri, 6 Sep 2024 13:00:21 +0200
Subject: [PATCH 3/3] test(components/atom/input): Ensure addons are able to be
 used on type=mask inputs

---
 components/atom/input/test/index.test.js | 26 ++++++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/components/atom/input/test/index.test.js b/components/atom/input/test/index.test.js
index 9931cd7f2..800b297f8 100644
--- a/components/atom/input/test/index.test.js
+++ b/components/atom/input/test/index.test.js
@@ -387,6 +387,32 @@ describe(json.name, () => {
       expect(findClassName(container.innerHTML)).to.be.null
       expect(value).to.equal('')
     })
+
+    it('should be able to display addons', () => {
+      const props = {
+        className: 'extended-classNames',
+        type: pkg.inputTypes.MASK,
+        mask: {mask: Number},
+        placeholder: 'Ex: 100.000,00',
+        charsSize: 31,
+        value: '100000',
+        rightIcon: '€',
+        radix: ',',
+        thousandsSeparator: '.',
+        mapToRadix: ['.'],
+        leftAddon: 'leftAddon',
+        rightAddon: 'rightAddon'
+      }
+
+      // When
+      const {getByRole, getByText} = setup(props)
+      const input = getByRole('textbox')
+
+      // Then
+      expect(input).to.have.value('100.000')
+      expect(getByText('leftAddon')).to.exist
+      expect(getByText('rightAddon')).to.exist
+    })
   })
 
   describe(`${Component.displayName} ${pkg.inputTypes.SUI_PASSWORD}`, () => {