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 = {
{allHobbies.sports.map((item) => (
-
+
))}
{allHobbies.other.map((item) => (
-
+
))}
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 (
{
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)}
/>
);
};