Merge pull request #10872 from marmelab/raoss-next-10871

feat: Support label configuration in <SelectArrayInput>

Author: fzaninotto

docs/SelectArrayInput.md

@@ -61,17 +61,18 @@ The form value for the source must be an array of the selected values, e.g.
 
 ## Props
 
-| Prop              | Required | Type                       | Default            | Description                                                                                                                            |
-|-------------------|----------|----------------------------|--------------------|----------------------------------------------------------------------------------------------------------------------------------------|
-| `choices`         | Optional | `Object[]`                 | -                  | List of items to show as options. Required unless inside a ReferenceArray Input.                                                                                                       |
-| `create`          | Optional | `Element`                  | -                  | A React Element to render when users want to create a new choice                                                                       |
-| `createLabel`     | Optional | `string`                   | `ra.action. create` | The label for the menu item allowing users to create a new choice. Used when the filter is empty                                       |
-| `disableValue`    | Optional | `string`                   | 'disabled'         | The custom field name used in `choices` to disable some choices                                                                        |
-| `onCreate`        | Optional | `Function`                 | -                  | A function called with the current filter value when users choose to create a new choice.                                              |
-| `options`         | Optional | `Object`                   | -                  | Props to pass to the underlying `<SelectInput>` element                                                                                |
-| `optionText`      | Optional | `string` &#124; `Function` | `name`             | Field name of record to display in the suggestion item or function which accepts the current record as argument (`record => {string}`) |
-| `optionValue`     | Optional | `string`                   | `id`               | Field name of record containing the value to use as input value                                                                        |
-| `translateChoice` | Optional | `boolean`                  | `true`             | Whether the choices should be translated                                                                                               |
+| Prop              | Required | Type                       | Default               | Description                                                                                                                            |
+|-------------------|----------|----------------------------|---------------   -----|----------------------------------------------------------------------------------------------------------------------------------------|
+| `choices`         | Optional | `Object[]`                 | -                     | List of items to show as options. Required unless inside a ReferenceArray Input.                                                       |
+| `create`          | Optional | `Element`                  | -                     | A React Element to render when users want to create a new choice                                                                       |
+| `createLabel`     | Optional | `string`                   | `ra.action. create`   | The label for the menu item allowing users to create a new choice. Used when the filter is empty                                       |
+| `disableValue`    | Optional | `string`                   | 'disabled'            | The custom field name used in `choices` to disable some choices                                                                        |
+| `InputLabelProps` | Optional | `Object`                   | -                     | Props to pass to the underlying `<InputLabel>` element                                                                                 |
+| `onCreate`        | Optional | `Function`                 | -                     | A function called with the current filter value when users choose to create a new choice.                                              |
+| `options`         | Optional | `Object`                   | -                     | Props to pass to the underlying `<SelectInput>` element                                                                                |
+| `optionText`      | Optional | `string` &#124; `Function` | `name`                | Field name of record to display in the suggestion item or function which accepts the current record as argument (`record => {string}`) |
+| `optionValue`     | Optional | `string`                   | `id`                  | Field name of record containing the value to use as input value                                                                        |
+| `translateChoice` | Optional | `boolean`                  | `true`                | Whether the choices should be translated                                                                                               |
 
 `<SelectArrayInput>` also accepts the [common input props](./Inputs.md#common-input-props).
 
@@ -265,6 +266,16 @@ const choices = [
 <SelectArrayInput source="roles" choices={choices} disableValue="not_available" />
 ```
 
+## `InputLabelProps`
+
+Use the `options` attribute if you want to override Material UI's `<InputLabel>` attributes:
+
+{% raw %}
+```jsx
+<SelectArrayInput source="category_ids" choices={choices} InputLabelProps={{ shrink: true }} />
+```
+{% endraw %}
+
 ## `onCreate`
 
 Use the `onCreate` prop to allow users to create new options on-the-fly. Its value must be a function. This lets you render a `prompt` to ask users about the new value. You can return either the new choice directly or a Promise resolving to the new choice.

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

@@ -181,6 +181,24 @@ export const DisabledChoice = () => (
     </Wrapper>
 );
 
+export const InputLabelProps = () => (
+    <Wrapper>
+        <SelectArrayInput
+            source="roles"
+            choices={[
+                { id: 'admin', name: 'Admin' },
+                { id: 'u001', name: 'Editor' },
+                { id: 'u002', name: 'Moderator' },
+                { id: 'u003', name: 'Reviewer' },
+            ]}
+            InputLabelProps={{
+                shrink: true,
+                required: true,
+            }}
+        />
+    </Wrapper>
+);
+
 export const ReadOnly = () => (
     <AdminContext i18nProvider={i18nProvider}>
         <Create

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

@@ -16,6 +16,7 @@ import {
     type FormControlProps,
     Chip,
     OutlinedInput,
+    InputLabelProps,
 } from '@mui/material';
 import {
     type ChoicesProps,
@@ -106,6 +107,7 @@ export const SelectArrayInput = (inProps: SelectArrayInputProps) => {
         format,
         helperText,
         label,
+        InputLabelProps,
         isFetching: isFetchingProp,
         isLoading: isLoadingProp,
         isPending: isPendingProp,
@@ -308,6 +310,7 @@ export const SelectArrayInput = (inProps: SelectArrayInputProps) => {
                     ref={inputLabel}
                     id={`${id}-outlined-label`}
                     htmlFor={id}
+                    {...InputLabelProps}
                 >
                     <FieldTitle
                         label={label}
@@ -380,6 +383,7 @@ export type SelectArrayInputProps = ChoicesProps &
     Omit<CommonInputProps, 'source'> &
     Omit<FormControlProps, 'defaultValue' | 'onBlur' | 'onChange'> & {
         options?: SelectProps;
+        InputLabelProps?: Omit<InputLabelProps, 'htmlFor' | 'id' | 'ref'>;
         source?: string;
         onChange?: (event: ChangeEvent<HTMLInputElement> | RaRecord) => void;
     };