Merge pull request #10821 from WiXSL/disable-radiobuttongroupitem-next

Add disable support for `RadioButtonGroupInput` and `CheckboxGroupInput` choices

Author: djhi

docs/CheckboxGroupInput.md

@@ -66,6 +66,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).
 
@@ -93,6 +94,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
@@ -256,6 +268,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:

docs/RadioButtonGroupInput.md

@@ -63,6 +63,7 @@ The form value for the source must be the selected value, e.g.
 | `optionValue`     | Optional | `string`                   | `id`    | Field name of record containing the value to use as input value                                                                        |
 | `row`             | Optional | `boolean`                  | `true`  | Display options 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                                                                     |
 
 `<RadioButtonGroupInput>` also accepts the [common input props](./Inputs.md#common-input-props).
 
@@ -95,6 +96,17 @@ const choices = [
 />
 ```
 
+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
@@ -283,6 +295,30 @@ However, in some cases, you may not want the choice to be translated. In that ca
 
 Note that `translateChoice` is set to `false` when `<RadioButtonGroupInput>` is a child of `<ReferenceInput>`.
 
+## `disableValue`
+
+By default, `<RadioButtonGroupInput>` 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 },
+];
+<RadioButtonGroupInput 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 },
+];
+<RadioButtonGroupInput source="category" choices={choices} disableValue="not_available" />
+```
+
 ## Fetching Choices
 
 You can use [`useGetList`](./useGetList.md) to fetch choices. For example, to fetch a list of countries for a user profile:
@@ -391,4 +427,4 @@ const CompanyInput = () => (
 
 This is the recommended approach for using `<RadioButtonGroupInput>` to select a foreign key. This not only signifies that the input is a `<RadioButtonGroupInput>` but also highlights its function in fetching choices from another resource, ultimately enhancing the code's readability.
 
-**Tip**: `<ReferenceInput>` is much more powerful than the initial snippet. It optimizes and caches API calls, enables refetching of both API calls with a single command, and stores supplementary data in the `<ChoicesContext>`. `<ReferenceInput>` can provide choices to `<RadioButtonGroupInput>`, but also to [`<AutocompleteInput>`](./AutocompleteInput.md) and [`<SelectInput>`](./SelectInput.md). For further information, refer to [the `<ReferenceInput>` documentation](./ReferenceInput.md).
+**Tip**: `<ReferenceInput>` is much more powerful than the initial snippet. It optimizes and caches API calls, enables refetching of both API calls with a single command, and stores supplementary data in the `<ChoicesContext>`. `<ReferenceInput>` can provide choices to `<RadioButtonGroupInput>`, but also to [`<AutocompleteInput>`](./AutocompleteInput.md) and [`<SelectInput>`](./SelectInput.md). For further information, refer to [the `<ReferenceInput>` documentation](./ReferenceInput.md).

packages/ra-core/src/form/choices/useChoices.tsx

@@ -20,6 +20,7 @@ export interface ChoicesProps {
     optionValue?: string;
     optionText?: OptionText;
     translateChoice?: boolean;
+    disableValue?: string;
 }
 
 export interface UseChoicesOptions {

packages/ra-ui-materialui/src/field/SelectField.tsx

@@ -138,7 +138,7 @@ export const SelectField = genericMemo(SelectFieldImpl);
 
 export interface SelectFieldProps<
     RecordType extends Record<string, any> = Record<string, any>,
-> extends ChoicesProps,
+> extends Omit<ChoicesProps, 'disableValue'>,
         FieldProps<RecordType>,
         Omit<TypographyProps, 'textAlign'> {}
 

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

@@ -780,7 +780,7 @@ export interface AutocompleteInputProps<
     DisableClearable extends boolean | undefined = false,
     SupportCreate extends boolean | undefined = false,
 > extends Omit<CommonInputProps, 'source' | 'onChange'>,
-        ChoicesProps,
+        Omit<ChoicesProps, 'disableValue'>,
         UseSuggestionsOptions,
         Omit<SupportCreateSuggestionOptions, 'handleChange' | 'optionText'>,
         Omit<

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
@@ -62,6 +65,7 @@ export const CheckboxGroupInputItem = (
                             : false
                     }
                     value={String(getChoiceValue(choice))}
+                    disabled={disabled}
                     {...options}
                 />
             }
@@ -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;

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

@@ -177,7 +177,7 @@ export type DatagridInputProps = Omit<
     CommonInputProps,
     'source' | 'readOnly' | 'disabled'
 > &
-    ChoicesProps &
+    Omit<ChoicesProps, 'disableValue'> &
     Omit<SupportCreateSuggestionOptions, 'handleChange'> &
     DatagridProps & {
         children?: ReactNode;