Feat/add right icon multiselection autosuggest

components/molecule/autosuggest/README.md

@@ -81,6 +81,47 @@ const suggestions = ['John','Johnny']
 </MoleculeAutosuggest>
 ```
 
+#### With Right Icon
+You can add a right icon to the multiselection input:
+```js
+<MoleculeAutosuggest
+  value={'Jo'}
+  placeholder="Select some options..."
+  iconCloseTag={<IconCloseTag />}
+  iconClear={<IconClear />}
+  rightIcon={<IconInfo />}
+  multiselection
+>
+  {suggestions.map((suggestion, i) => (
+    <MoleculeAutosuggestOption key={i} value={suggestion}>
+      {option}
+    </MoleculeAutosuggestOption>
+  ))}
+</MoleculeAutosuggest>
+```
+
+#### With Right Icon and Click Handler
+The right icon can be interactive with an `onClickRightIcon` callback:
+```js
+<MoleculeAutosuggest
+  value={'Jo'}
+  placeholder="Select some options..."
+  iconCloseTag={<IconCloseTag />}
+  iconClear={<IconClear />}
+  rightIcon={<IconSearch />}
+  onClickRightIcon={(ev, {value}) => {
+    console.log('Right icon clicked with value:', value)
+  }}
+  multiselection
+>
+  {suggestions.map((suggestion, i) => (
+    <MoleculeAutosuggestOption key={i} value={suggestion}>
+      {option}
+    </MoleculeAutosuggestOption>
+  ))}
+</MoleculeAutosuggest>
+```
+
 ### Managing State
 
 #### Custom component from `MoleculeAutosuggest` that handle State
@@ -208,4 +249,4 @@ so then, the `MoleculeAutosuggestWithState` can used in this way...
 
 
 
-> **Find full description and more examples in the [demo page](https://sui-components.now.sh/workbench/molecule/autosuggest/demo).**
+> **Find full description and more examples in the [demo page](https://sui-components.now.sh/workbench/molecule/autosuggest/demo).**

components/molecule/autosuggest/demo/ArticleMultipleSelection/index.js

@@ -2,7 +2,7 @@
 import {Article, Code, H2, H3, Paragraph} from '@s-ui/documentation-library'
 
 import {MoleculeAutosuggestWithStateTags} from '../config.js'
-import {iconClose} from '../Icons/index.js'
+import {iconClose, iconSearch} from '../Icons/index.js'
 
 const ArticleMultipleSelection = () => {
   return (
@@ -40,6 +40,17 @@ const ArticleMultipleSelection = () => {
         multiselection
         disabled
       />
+      <H3>With Right Icon and onClick handler</H3>
+      <MoleculeAutosuggestWithStateTags
+        placeholder="Type a Country name..."
+        onChangeTags={(_, {tags, ...args}) => console.log('onChangeTags', {tags, ...args})}
+        iconCloseTag={iconClose}
+        rightIcon={iconSearch}
+        onClickRightIcon={(ev, args) => {
+          console.log('Right icon clicked!', args)
+        }}
+        multiselection
+      />
     </Article>
   )
 }

components/molecule/autosuggest/src/components/MultipleSelection/index.js

@@ -27,12 +27,14 @@ const MoleculeAutosuggestFieldMultiSelection = ({
   onChange,
   onChangeTags,
   onClear,
+  onClickRightIcon,
   onInputKeyDown,
   onSelect,
   onKeyDown,
   onToggle,
   placeholder,
   required,
+  rightIcon,
   shape,
   size,
   tabIndex,
@@ -94,6 +96,10 @@ const MoleculeAutosuggestFieldMultiSelection = ({
     }
   }
 
+  const handleRightClick = (ev, args = {}) => {
+    typeof onClickRightIcon === 'function' && onClickRightIcon(ev, {...args, value})
+  }
+
   return (
     <>
       <InputWithClearUI
@@ -114,9 +120,11 @@ const MoleculeAutosuggestFieldMultiSelection = ({
         onChangeTags={handleChangeTags}
         onClick={onToggle}
         onClickClear={handleClear}
+        onClickRightIcon={handleRightClick}
         onKeyDown={onInputKeyDown}
         placeholder={!tags.length ? placeholder : ''}
         required={required}
+        rightIcon={rightIcon}
         shape={shape}
         tabIndex={tabIndex}
         tags={tags}

components/molecule/autosuggest/test/index.test.js

@@ -383,6 +383,42 @@ describe(json.name, () => {
           await waitFor(() => expect(sinon.assert.called(onBlurSpy)))
         })
       })
+
+      describe('rightIcon', () => {
+        it('should render rightIcon when provided in multiselection mode', () => {
+          // Given
+          const testID = 'right-icon-test'
+          const props = {
+            multiselection: true,
+            rightIcon: <svg data-testid={testID} />
+          }
+
+          // When
+          const {getByTestId} = setup(props)
+
+          // Then
+          expect(() => getByTestId(testID)).to.not.throw()
+        })
+
+        it('should call onClickRightIcon handler when rightIcon is clicked in multiselection mode', () => {
+          // Given
+          const onClickRightIconSpy = sinon.spy()
+          const testID = 'right-icon-test'
+          const props = {
+            multiselection: true,
+            rightIcon: <svg data-testid={testID} />,
+            onClickRightIcon: onClickRightIconSpy
+          }
+
+          // When
+          const {getByTestId} = setup(props)
+          const rightIconElement = getByTestId(testID)
+          fireEvent.click(rightIconElement)
+
+          // Then
+          sinon.assert.calledOnce(onClickRightIconSpy)
+        })
+      })
     })
   })