update Creating New Choices doc and pluralize ressource

Author: Cimanel

docs/AutocompleteInput.md

@@ -202,7 +202,7 @@ const CreateAuthor = () => {
             <DialogContent sx={{ p: 0 }}>
                 <CreateBase
                     redirect={false}
-                    resource="author"
+                    resource="authors"
                     mutationOptions={{
                         onSuccess: author => {
                             onAuthorCreate(author);
@@ -874,21 +874,22 @@ Use the `create` prop when you want a more polished or complex UI. For example a
 import {
     AutocompleteInput,
     Create,
+    CreateBase,
     ReferenceInput,
     SimpleForm,
     TextInput,
     useCreate,
-    useCreateSuggestionContext
+    useCreateSuggestionContext,
 } from 'react-admin';
 
+import CloseIcon from '@mui/icons-material/Close';
 import {
     Box,
     BoxProps,
     Button,
     Dialog,
-    DialogActions,
     DialogContent,
-    TextField,
+    IconButton,
 } from '@mui/material';
 
 const PostCreate = () => {
@@ -906,43 +907,42 @@ const PostCreate = () => {
 
 const CreateCategory = () => {
     const { filter, onCancel, onCreate } = useCreateSuggestionContext();
-    const [value, setValue] = React.useState(filter || '');
-    const [create] = useCreate();
-
-    const handleSubmit = event => {
-        event.preventDefault();
-        create(
-            'categories',
-            {
-                data: {
-                    title: value,
-                },
-            },
-            {
-                onSuccess: (data) => {
-                    setValue('');
-                    onCreate(data);
-                },
-            }
-        );
+   
+    const onCategoryCreate = category => {
+        onCreate(category);
     };
 
+
     return (
         <Dialog open onClose={onCancel}>
-            <form onSubmit={handleSubmit}>
-                <DialogContent>
-                    <TextField
-                        label="New category name"
-                        value={value}
-                        onChange={event => setValue(event.target.value)}
-                        autoFocus
-                    />
-                </DialogContent>
-                <DialogActions>
-                    <Button type="submit">Save</Button>
-                    <Button onClick={onCancel}>Cancel</Button>
-                </DialogActions>
-            </form>
+             <DialogTitle sx={{ m: 0, p: 2 }}>Create Category</DialogTitle>
+             <IconButton
+                aria-label="close"
+                onClick={onCancel}
+                sx={theme => ({
+                    position: 'absolute',
+                    right: 8,
+                    top: 8,
+                    color: theme.palette.grey[500],
+                })}
+            >
+                <CloseIcon />
+                </IconButton>>
+            <DialogContent sx={{ p: 0 }}>
+                <CreateBase
+                    redirect={false}
+                    resource="categories"
+                    mutationOptions={{
+                        onSuccess: category => {
+                            onCategoryCreate(category);
+                        },
+                    }}
+                >
+                    <SimpleForm defaultValues={{ title: filter }}>
+                        <TextInput source="name" helperText={false} autoFocus/>
+                    </SimpleForm>
+                </CreateBase>
+             </DialogContent>
         </Dialog>
     );
 };

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

@@ -853,7 +853,7 @@ const CreateAuthor = () => {
             <DialogContent sx={{ p: 0 }}>
                 <CreateBase
                     redirect={false}
-                    resource="author"
+                    resource="authors"
                     mutationOptions={{
                         onSuccess: author => {
                             onAuthorCreate(author);