Add disableValue prop to CheckboxGroupInput

Author: WiXSL

docs/CheckboxGroupInput.md

@@ -65,6 +65,7 @@ The form value for the source must be an array of the selected values, e.g.
 | `optionValue`     | Optional | `string`                   | `id`    | Field name of record containing the value to use as input value   |
 | `row`             | Optional | `boolean`                  | `true`  | Display group of elements in a compact row.                       |
 | `translateChoice` | Optional | `boolean`                  | `true`  | Whether the choices should be translated                          |
+| `disableValue`    | Optional | `string`                   | `disabled` | The custom field name used in `choices` to disable some choices                                                                     |
 
 `<CheckboxGroupInput>` also accepts the [common input props](./Inputs.md#common-input-props).
 
@@ -92,6 +93,17 @@ You can also use an array of objects with different properties for the label and
 ]} optionValue="_id" optionText="label" />
 ```
 
+You can render some options as disabled by setting the `disabled` field in some choices:
+
+```jsx
+const choices = [
+    { id: 'tech', name: 'Tech' },
+    { id: 'lifestyle', name: 'Lifestyle' },
+    { id: 'people', name: 'People', disabled: true },
+];
+<RadioButtonGroupInput source="category" choices={choices} />
+```
+
 The choices are translated by default, so you can use translation identifiers as choices:
 
 ```jsx
@@ -255,6 +267,30 @@ However, in some cases (e.g. inside a `<ReferenceArrayInput>`), you may not want
 <CheckboxGroupInput source="roles" choices={choices} translateChoice={false}/>
 ```
 
+## `disableValue`
+
+By default, `<CheckboxGroupInput>` renders the choices with the field `disabled: true` as disabled.
+
+```jsx
+const choices = [
+    { id: 'tech', name: 'Tech' },
+    { id: 'lifestyle', name: 'Lifestyle' },
+    { id: 'people', name: 'People', disabled: true },
+];
+<CheckboxGroupInput source="category" choices={choices} />
+```
+
+If you want to use another field to denote disabled options, set the `disableValue` prop.
+
+```jsx
+const choices = [
+    { id: 'tech', name: 'Tech' },
+    { id: 'lifestyle', name: 'Lifestyle' },
+    { id: 'people', name: 'People', not_available: true },
+];
+<CheckboxGroupInput source="category" choices={choices} disableValue="not_available" />
+```
+
 ## Fetching Choices
 
 If you want to populate the `choices` attribute with a list of related records, you should decorate `<CheckboxGroupInput>` with [`<ReferenceArrayInput>`](./ReferenceArrayInput.md), and leave the `choices` empty:

packages/ra-ui-materialui/src/input/CheckboxGroupInput.spec.tsx

@@ -426,4 +426,65 @@ describe('<CheckboxGroupInput />', () => {
             await screen.findByText('Option 1 (This is option 1)');
         });
     });
+
+    it('should render disabled choices marked as so', () => {
+        const choices = [
+            { id: 'ang', name: 'Angular' },
+            { id: 'rct', name: 'React', disabled: true },
+        ];
+        render(
+            <AdminContext dataProvider={testDataProvider()}>
+                <ResourceContextProvider value="posts">
+                    <SimpleForm onSubmit={jest.fn()}>
+                        <CheckboxGroupInput
+                            {...defaultProps}
+                            choices={choices}
+                        />
+                    </SimpleForm>
+                </ResourceContextProvider>
+            </AdminContext>
+        );
+        fireEvent.mouseDown(screen.getByLabelText('React'));
+
+        const enabledInput = screen.getByLabelText(
+            'Angular'
+        ) as HTMLInputElement;
+        expect(enabledInput.disabled).toBe(false);
+
+        const disabledInput = screen.getByLabelText(
+            'React'
+        ) as HTMLInputElement;
+        expect(disabledInput.disabled).toBe(true);
+    });
+
+    it('should render disabled choices marked as so by disableValue prop', () => {
+        const choices = [
+            { id: 'ang', name: 'Angular' },
+            { id: 'rct', name: 'React', not_available: true },
+        ];
+        render(
+            <AdminContext dataProvider={testDataProvider()}>
+                <ResourceContextProvider value="posts">
+                    <SimpleForm onSubmit={jest.fn()}>
+                        <CheckboxGroupInput
+                            {...defaultProps}
+                            choices={choices}
+                            disableValue="not_available"
+                        />
+                    </SimpleForm>
+                </ResourceContextProvider>
+            </AdminContext>
+        );
+        fireEvent.mouseDown(screen.getByLabelText('React'));
+
+        const enabledInput = screen.getByLabelText(
+            'Angular'
+        ) as HTMLInputElement;
+        expect(enabledInput.disabled).toBe(false);
+
+        const disabledInput = screen.getByLabelText(
+            'React'
+        ) as HTMLInputElement;
+        expect(disabledInput.disabled).toBe(true);
+    });
 });

packages/ra-ui-materialui/src/input/CheckboxGroupInput.stories.tsx

@@ -322,3 +322,17 @@ export const SetFocus = () => (
         <SetFocusButton source="roles" />
     </Wrapper>
 );
+
+export const DisabledChoice = () => (
+    <Wrapper>
+        <CheckboxGroupInput
+            source="roles"
+            choices={[
+                { id: 'admin', name: 'Admin' },
+                { id: 'u001', name: 'Editor' },
+                { id: 'u002', name: 'Moderator' },
+                { id: 'u003', name: 'Reviewer', disabled: true },
+            ]}
+        />
+    </Wrapper>
+);

packages/ra-ui-materialui/src/input/CheckboxGroupInput.tsx

@@ -95,6 +95,23 @@ import { LinearProgress } from '../layout';
  * <CheckboxGroupInput source="tags" choices={choices} translateChoice={false}/>
  *
  * The object passed as `options` props is passed to the Material UI <Checkbox> components
+ *
+ * You can disable some choices by providing a `disableValue` field which name is `disabled` by default
+ * @example
+ * const choices = [
+ *    { id: 'programming', name: 'myroot.category.programming' },
+ *    { id: 'lifestyle', name: 'myroot.category.lifestyle' },
+ *    { id: 'photography', name: 'myroot.category.photography', disabled: true },
+ * ];
+ *
+ *  @example
+ * const choices = [
+ *    { id: 'programming', name: 'myroot.category.programming' },
+ *    { id: 'lifestyle', name: 'myroot.category.lifestyle' },
+ *    { id: 'photography', name: 'myroot.category.photography', not_available: true },
+ * ];
+ * <CheckboxGroupInput source="tags" choices={choices} disableValue="not_available" />
+ *
  */
 export const CheckboxGroupInput = (inProps: CheckboxGroupInputProps) => {
     const props = useThemeProps({
@@ -124,6 +141,7 @@ export const CheckboxGroupInput = (inProps: CheckboxGroupInputProps) => {
         source: sourceProp,
         translateChoice,
         validate,
+        disableValue = 'disabled',
         disabled,
         readOnly,
         ...rest
@@ -262,6 +280,7 @@ export const CheckboxGroupInput = (inProps: CheckboxGroupInputProps) => {
                         value={value}
                         labelPlacement={labelPlacement}
                         inputRef={index === 0 ? ref : undefined}
+                        disableValue={disableValue}
                         disabled={disabled || readOnly}
                         readOnly={readOnly}
                         {...sanitizeRestProps(rest)}

packages/ra-ui-materialui/src/input/CheckboxGroupInputItem.tsx

@@ -32,16 +32,19 @@ export const CheckboxGroupInputItem = (
         value,
         labelPlacement,
         inputRef,
+        disableValue = 'disabled',
         ...rest
     } = props;
 
-    const { getChoiceText, getChoiceValue } = useChoices({
+    const { getChoiceText, getChoiceValue, getDisableValue } = useChoices({
         optionText,
         optionValue,
         translateChoice,
+        disableValue,
     });
 
     const choiceName = getChoiceText(choice);
+    const disabled = getDisableValue(choice);
 
     return (
         <StyledFormControlLabel
@@ -50,6 +53,7 @@ export const CheckboxGroupInputItem = (
             onChange={onChange}
             className={className}
             inputRef={inputRef}
+            disabled={disabled}
             control={
                 <Checkbox
                     id={`${id}_${getChoiceValue(choice)}`}
@@ -74,7 +78,10 @@ export const CheckboxGroupInputItem = (
 
 export interface CheckboxGroupInputItemProps
     extends Omit<FormControlLabelProps, 'control' | 'label'>,
-        Pick<ChoicesProps, 'optionValue' | 'optionText' | 'translateChoice'> {
+        Pick<
+            ChoicesProps,
+            'optionValue' | 'optionText' | 'translateChoice' | 'disableValue'
+        > {
     choice: any;
     value: any;
     fullWidth?: boolean;