From 2ace265fd8f6ce425b1ff81beafd2f834afe5c87 Mon Sep 17 00:00:00 2001
From: glenkurniawan-adslot <glen.kurniawan@adslot.com>
Date: Tue, 27 Feb 2024 14:52:43 +1100
Subject: [PATCH] fix: fix checkbox group all selection

---
 .../CheckboxGroup/CheckboxGroup.stories.tsx   |  4 ++--
 .../CheckboxGroup/CheckboxGroupContext.jsx    | 22 ++++++++++++++++++-
 src/components/CheckboxGroup/index.jsx        |  9 +++++---
 3 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/src/components/CheckboxGroup/CheckboxGroup.stories.tsx b/src/components/CheckboxGroup/CheckboxGroup.stories.tsx
index e22781566..0d52282bf 100644
--- a/src/components/CheckboxGroup/CheckboxGroup.stories.tsx
+++ b/src/components/CheckboxGroup/CheckboxGroup.stories.tsx
@@ -103,13 +103,13 @@ export const NestedCheckboxes: Story = {
       <CheckboxGroup indent>
         <CheckboxGroup.All label="Sports" values={allHobbies.sports} />
         {allHobbies.sports.map((item) => (
-          <CheckboxGroup.Item key={item} value={item} label={_.capitalize(item)} />
+          <CheckboxGroup.Item key={item} value={item} label={_.capitalize(item)} disabled={item === 'swimming' }/>
         ))}
       </CheckboxGroup>
       <CheckboxGroup indent>
         <CheckboxGroup.All label="Other" values={allHobbies.other} />
         {allHobbies.other.map((item) => (
-          <CheckboxGroup.Item key={item} value={item} label={_.capitalize(item)} />
+          <CheckboxGroup.Item key={item} value={item} label={_.capitalize(item)} disabled/>
         ))}
       </CheckboxGroup>
     </CheckboxGroup>
diff --git a/src/components/CheckboxGroup/CheckboxGroupContext.jsx b/src/components/CheckboxGroup/CheckboxGroupContext.jsx
index 8c0bbecd9..eea007b0e 100644
--- a/src/components/CheckboxGroup/CheckboxGroupContext.jsx
+++ b/src/components/CheckboxGroup/CheckboxGroupContext.jsx
@@ -21,6 +21,25 @@ const CheckboxGroupProvider = ({
   const value = parentCtx.value || valueProp;
 
   const context = React.useMemo(() => {
+    const disabledComponents = [];
+    const findDisabledComponents = (c) => {
+      if (c.props?.children) {
+        findDisabledComponents(c.props.children);
+      } else if (Array.isArray(c)) {
+        _.forEach(c, (child) => {
+          findDisabledComponents(child);
+        });
+      } else {
+        if (c.props?.disabled) {
+          disabledComponents.push(c);
+        }
+      }
+    };
+
+    findDisabledComponents(children);
+
+    const disabledValues = _.map(disabledComponents, (dc) => dc.props?.value);
+
     const getIsItemChecked = (checkboxValue) => {
       if (getIsChecked) return getIsChecked(checkboxValue, value);
 
@@ -28,11 +47,11 @@ const CheckboxGroupProvider = ({
     };
 
     const getIsAllChecked = (values) => {
+      if (_.isEmpty(values)) return false;
       const result = _(values)
         .map((item) => getIsItemChecked(item))
         .uniq()
         .value();
-
       return result.length === 1 ? result[0] : 'partial';
     };
 
@@ -64,6 +83,7 @@ const CheckboxGroupProvider = ({
       getIsAllChecked,
       onItemChange,
       onAllChange,
+      disabledValues,
     };
   }, [getIsChecked, value, name, onChange, variant]);
 
diff --git a/src/components/CheckboxGroup/index.jsx b/src/components/CheckboxGroup/index.jsx
index a2fd33df3..9eddfbc60 100644
--- a/src/components/CheckboxGroup/index.jsx
+++ b/src/components/CheckboxGroup/index.jsx
@@ -36,7 +36,9 @@ const CheckboxGroupAll = ({ className, label = 'All', values, ...rest }) => {
   const groupCtx = useCheckboxGroup();
   invariant(!_.isEmpty(groupCtx), 'CheckboxGroup.All: must be used as children of CheckboxGroup');
 
-  const { onAllChange, getIsAllChecked, name, variant } = groupCtx;
+  const { onAllChange, getIsAllChecked, name, variant, disabledValues } = groupCtx;
+
+  const enabledValues = _.filter(values, (value) => !disabledValues.includes(value));
 
   return (
     <Checkbox
@@ -44,9 +46,10 @@ const CheckboxGroupAll = ({ className, label = 'All', values, ...rest }) => {
       className={classnames(className, 'is-all')}
       name={name}
       label={label}
-      checked={getIsAllChecked(values)}
-      onChange={onAllChange(values)}
+      checked={getIsAllChecked(enabledValues)}
+      onChange={onAllChange(enabledValues)}
       variant={variant}
+      disabled={_.isEqual(values, disabledValues)}
     />
   );
 };