From 6d106f01935ad318fab3cf80999f57664a3c8c0d Mon Sep 17 00:00:00 2001
From: Gregory <117281520+gca-axelor@users.noreply.github.com>
Date: Fri, 6 Dec 2024 17:07:45 +0100
Subject: [PATCH 1/5] feat: add clear all on ChipSelect

---
 .../organisms/ChipSelect/ChipSelect.tsx       | 38 +++++++++++++++++--
 1 file changed, 35 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/components/organisms/ChipSelect/ChipSelect.tsx b/packages/ui/src/components/organisms/ChipSelect/ChipSelect.tsx
index 6e4ae29bf..3675ec684 100644
--- a/packages/ui/src/components/organisms/ChipSelect/ChipSelect.tsx
+++ b/packages/ui/src/components/organisms/ChipSelect/ChipSelect.tsx
@@ -18,8 +18,8 @@
 
 import React, {useEffect, useMemo, useState} from 'react';
 import {Dimensions, StyleSheet, View, ScrollView} from 'react-native';
-import {Color} from '../../../theme/themes';
-import {Chip} from '../../molecules';
+import {Button, Chip} from '../../molecules';
+import {useThemeColor, Color} from '../../../theme';
 
 const CHIP_CONTAINER_MARGIN = 16;
 const CHIP_MARGIN = 2;
@@ -46,6 +46,7 @@ interface ChipSelectProps {
   readonly?: boolean;
   chipNumberOfLines?: number;
   onChangeValue?: (value: any) => void;
+  showClearButton?: boolean;
 }
 
 const ChipSelect = ({
@@ -58,7 +59,10 @@ const ChipSelect = ({
   readonly = false,
   chipNumberOfLines,
   onChangeValue = () => {},
+  showClearButton = false,
 }: ChipSelectProps) => {
+  const Colors = useThemeColor();
+
   const [selectedChip, setSelectedChip] = useState<Item[]>(
     selectionItems.filter(item => item.isActive === true),
   );
@@ -127,6 +131,11 @@ const ChipSelect = ({
     );
   };
 
+  const clearAllChips = () => {
+    setSelectedChip([]);
+    onChangeValue([]);
+  };
+
   if (
     selectionItems.length < 2 ||
     (mode !== MODES.multi && mode !== MODES.switch)
@@ -136,7 +145,24 @@ const ChipSelect = ({
 
   return (
     <View style={[styles.chipContainer, style]}>
-      <ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
+      <ScrollView
+        horizontal={true}
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={styles.scrollContainer}>
+        {showClearButton && (
+          <Button
+            iconName="trash"
+            color={
+              selectedChip.length > 0
+                ? Colors.primaryColor
+                : Colors.secondaryColor
+            }
+            onPress={clearAllChips}
+            disabled={selectedChip.length === 0}
+            width={'15%'}
+            style={styles.clarButton}
+          />
+        )}
         {selectionItems?.map((item, index) => (
           <Chip
             key={index}
@@ -163,6 +189,12 @@ const styles = StyleSheet.create({
     marginHorizontal: CHIP_CONTAINER_MARGIN,
     marginVertical: 2,
   },
+  scrollContainer: {
+    alignItems: 'center',
+  },
+  clarButton: {
+    marginRight: 5,
+  },
 });
 
 export default ChipSelect;

From 05a404346142606084e8f93e107e4b235d1561ec Mon Sep 17 00:00:00 2001
From: Gregory <117281520+gca-axelor@users.noreply.github.com>
Date: Mon, 9 Dec 2024 11:00:36 +0100
Subject: [PATCH 2/5] feat: add stories and test

---
 .../components/organisms/ChipSelect.test.js    | 18 +++++++++++++++++-
 .../organisms/ChipSelect/ChipSelect.tsx        |  8 +++++---
 .../stories/organisms/ChipSelect.stories.tsx   |  3 ++-
 3 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/packages/ui/__tests__/components/organisms/ChipSelect.test.js b/packages/ui/__tests__/components/organisms/ChipSelect.test.js
index db80e6229..af3ae4c4e 100644
--- a/packages/ui/__tests__/components/organisms/ChipSelect.test.js
+++ b/packages/ui/__tests__/components/organisms/ChipSelect.test.js
@@ -19,7 +19,7 @@
 import React from 'react';
 import {View} from 'react-native';
 import {shallow} from 'enzyme';
-import {Chip, ChipSelect} from '@axelor/aos-mobile-ui';
+import {Button, Chip, ChipSelect} from '@axelor/aos-mobile-ui';
 import {getGlobalStyles, getDefaultThemeColors} from '../../tools';
 
 describe('ChipSelect Component', () => {
@@ -218,4 +218,20 @@ describe('ChipSelect Component', () => {
       );
     }
   });
+
+  it('should clear all selected chips when Clear All button is pressed', () => {
+    const onChangeValue = jest.fn();
+
+    const wrapper = shallow(
+      <ChipSelect
+        {...props}
+        onChangeValue={onChangeValue}
+        showClearButton={true}
+      />,
+    );
+
+    wrapper.find(Button).simulate('press');
+
+    expect(onChangeValue).toHaveBeenCalledWith([]);
+  });
 });
diff --git a/packages/ui/src/components/organisms/ChipSelect/ChipSelect.tsx b/packages/ui/src/components/organisms/ChipSelect/ChipSelect.tsx
index 3675ec684..37688ec3e 100644
--- a/packages/ui/src/components/organisms/ChipSelect/ChipSelect.tsx
+++ b/packages/ui/src/components/organisms/ChipSelect/ChipSelect.tsx
@@ -159,8 +159,9 @@ const ChipSelect = ({
             }
             onPress={clearAllChips}
             disabled={selectedChip.length === 0}
-            width={'15%'}
-            style={styles.clarButton}
+            iconSize={16}
+            width={40}
+            style={styles.clearButton}
           />
         )}
         {selectionItems?.map((item, index) => (
@@ -192,8 +193,9 @@ const styles = StyleSheet.create({
   scrollContainer: {
     alignItems: 'center',
   },
-  clarButton: {
+  clearButton: {
     marginRight: 5,
+    height: 40,
   },
 });
 
diff --git a/packages/ui/stories/organisms/ChipSelect.stories.tsx b/packages/ui/stories/organisms/ChipSelect.stories.tsx
index 495e2828a..451876e39 100644
--- a/packages/ui/stories/organisms/ChipSelect.stories.tsx
+++ b/packages/ui/stories/organisms/ChipSelect.stories.tsx
@@ -52,6 +52,7 @@ export const ChipSelect: Story<typeof Component> = {
     selectionItems: disabledControl,
     isRefresh: disabledControl,
     onChangeValue: disabledControl,
+    showClearButton: {control: 'boolean'},
   },
   render: args => (
     <Component
@@ -76,5 +77,5 @@ export const ChipSelect: Story<typeof Component> = {
       onChangeValue={() => {}}
       {...args}
     />
-  )
+  ),
 };

From 412516cfa6457d9d43efe0be16e8a61ab608813c Mon Sep 17 00:00:00 2001
From: vhu-axelor <146069039+vhu-axelor@users.noreply.github.com>
Date: Mon, 9 Dec 2024 11:14:14 +0100
Subject: [PATCH 3/5] refactor: change iconSize

---
 packages/ui/src/components/organisms/ChipSelect/ChipSelect.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/components/organisms/ChipSelect/ChipSelect.tsx b/packages/ui/src/components/organisms/ChipSelect/ChipSelect.tsx
index 37688ec3e..38c1b2a54 100644
--- a/packages/ui/src/components/organisms/ChipSelect/ChipSelect.tsx
+++ b/packages/ui/src/components/organisms/ChipSelect/ChipSelect.tsx
@@ -159,7 +159,7 @@ const ChipSelect = ({
             }
             onPress={clearAllChips}
             disabled={selectedChip.length === 0}
-            iconSize={16}
+            iconSize={18}
             width={40}
             style={styles.clearButton}
           />

From f471126770a142a07b61121c3405b338b1050973 Mon Sep 17 00:00:00 2001
From: Gregory <117281520+gca-axelor@users.noreply.github.com>
Date: Mon, 9 Dec 2024 16:45:36 +0100
Subject: [PATCH 4/5] feat: add changelog

---
 changelogs/unreleased/87396.json | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 changelogs/unreleased/87396.json

diff --git a/changelogs/unreleased/87396.json b/changelogs/unreleased/87396.json
new file mode 100644
index 000000000..10f8d4399
--- /dev/null
+++ b/changelogs/unreleased/87396.json
@@ -0,0 +1,5 @@
+{
+  "title": "ChipSelect: add showClearButton prop to clear all selected chips",
+  "type": "feat",
+  "packages": "ui"
+}

From 1ccb39a45dfa41fe4e38a2826408b34530deb43a Mon Sep 17 00:00:00 2001
From: lme-axelor <102581501+lme-axelor@users.noreply.github.com>
Date: Mon, 9 Dec 2024 17:26:12 +0100
Subject: [PATCH 5/5] chore: avoid imports reverse & remove control of story

---
 packages/ui/src/components/organisms/ChipSelect/ChipSelect.tsx | 2 +-
 packages/ui/stories/organisms/ChipSelect.stories.tsx           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/components/organisms/ChipSelect/ChipSelect.tsx b/packages/ui/src/components/organisms/ChipSelect/ChipSelect.tsx
index 38c1b2a54..b7cb94d52 100644
--- a/packages/ui/src/components/organisms/ChipSelect/ChipSelect.tsx
+++ b/packages/ui/src/components/organisms/ChipSelect/ChipSelect.tsx
@@ -18,8 +18,8 @@
 
 import React, {useEffect, useMemo, useState} from 'react';
 import {Dimensions, StyleSheet, View, ScrollView} from 'react-native';
-import {Button, Chip} from '../../molecules';
 import {useThemeColor, Color} from '../../../theme';
+import {Button, Chip} from '../../molecules';
 
 const CHIP_CONTAINER_MARGIN = 16;
 const CHIP_MARGIN = 2;
diff --git a/packages/ui/stories/organisms/ChipSelect.stories.tsx b/packages/ui/stories/organisms/ChipSelect.stories.tsx
index 451876e39..83a9fc0af 100644
--- a/packages/ui/stories/organisms/ChipSelect.stories.tsx
+++ b/packages/ui/stories/organisms/ChipSelect.stories.tsx
@@ -44,6 +44,7 @@ export const ChipSelect: Story<typeof Component> = {
     option2_color: 'plannedColor',
     option3_title: 'Option 3',
     option3_color: 'infoColor',
+    showClearButton: false,
   },
   argTypes: {
     option1_color: colorPicker,
@@ -52,7 +53,6 @@ export const ChipSelect: Story<typeof Component> = {
     selectionItems: disabledControl,
     isRefresh: disabledControl,
     onChangeValue: disabledControl,
-    showClearButton: {control: 'boolean'},
   },
   render: args => (
     <Component