From 3c4f9a1c7a09fc80a24104b87e1207daaeeaff9f Mon Sep 17 00:00:00 2001
From: Shaurya Sharma <shaurya064@gmail.com>
Date: Tue, 4 Mar 2025 16:32:19 +0530
Subject: [PATCH] Button group csa added

---
 .../WidgetManager/widgets/buttonGroup.js      |  7 +++++
 .../src/Editor/Components/ButtonGroup.jsx     | 29 +++++++++++++++++++
 .../services/widget-config/buttonGroup.js     |  8 +++++
 3 files changed, 44 insertions(+)

diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/buttonGroup.js b/frontend/src/AppBuilder/WidgetManager/widgets/buttonGroup.js
index c0fa889dd5..ab3eb40c2c 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/buttonGroup.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/buttonGroup.js
@@ -127,6 +127,13 @@ export const buttonGroupConfig = {
   exposedVariables: {
     selected: [1],
   },
+  actions: [
+    {
+      handle: 'setSelected',
+      displayName: 'Select option',
+      params: [{ handle: 'selected', displayName: 'Value' }],
+    },
+  ],
   definition: {
     others: {
       showOnDesktop: { value: '{{true}}' },
diff --git a/frontend/src/Editor/Components/ButtonGroup.jsx b/frontend/src/Editor/Components/ButtonGroup.jsx
index 7364348271..a9526576ff 100644
--- a/frontend/src/Editor/Components/ButtonGroup.jsx
+++ b/frontend/src/Editor/Components/ButtonGroup.jsx
@@ -66,6 +66,35 @@ export const ButtonGroup = function Button({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [multiSelection]);
 
+  const setSelected = (selected) => {
+    if (multiSelection) {
+      if (Array.isArray(selected)) {
+        const filteredItems = selected.filter((item) => values.includes(item));
+        setDefaultActive(filteredItems);
+        setExposedVariable('selected', filteredItems.join(','));
+      } else if ((typeof selected === 'string' || typeof selected === 'number') && values.includes(selected)) {
+        setDefaultActive([selected]);
+        setExposedVariable('selected', String(selected));
+      }
+    } else {
+      if (Array.isArray(selected)) {
+        const filteredItems = selected.filter((item) => values.includes(item));
+        console.log('filterdItems', filteredItems);
+        if (filteredItems?.length >= 1) {
+          setDefaultActive([filteredItems[0]]);
+          setExposedVariable('selected', String(filteredItems[0]));
+        }
+      } else if ((typeof selected === 'string' || typeof selected === 'number') && values.includes(selected)) {
+        setDefaultActive([selected]);
+        setExposedVariable('selected', String(selected));
+      }
+    }
+  };
+
+  useEffect(() => {
+    setExposedVariable('setSelected', setSelected);
+  }, [multiSelection]);
+
   const buttonClick = (index) => {
     if (defaultActive?.includes(values[index]) && multiSelection) {
       const copyDefaultActive = [...defaultActive];
diff --git a/server/src/modules/apps/services/widget-config/buttonGroup.js b/server/src/modules/apps/services/widget-config/buttonGroup.js
index c0fa889dd5..4523a98bb7 100644
--- a/server/src/modules/apps/services/widget-config/buttonGroup.js
+++ b/server/src/modules/apps/services/widget-config/buttonGroup.js
@@ -127,6 +127,14 @@ export const buttonGroupConfig = {
   exposedVariables: {
     selected: [1],
   },
+  actions: [
+    {
+      handle: 'setSelected',
+      displayName: 'Select option',
+      params: [{ handle: 'selected', displayName: 'Value' }],
+    },
+  ],
+
   definition: {
     others: {
       showOnDesktop: { value: '{{true}}' },