Revert "Fix Datagrid requires too many props when used standalone"

This reverts commit 7108205.

docs/List.md

@@ -2819,13 +2819,15 @@ export const UserList = ({ permissions, ...props }) => {
 
 ### Rendering `<Datagrid>` With A Custom Query
 
-You can use the `<Datagrid>` component with [custom queries](./Actions.md#usequery-hook):
+You can use the `<Datagrid>` component with [custom queries](./Actions.md#usequery-hook), provided you pass the result to a `<ListContextProvider>`:
 
 {% raw %}
 ```jsx
 import keyBy from 'lodash/keyBy'
 import {
     useQuery,
+    ResourceContextProvider,
+    ListContextProvider,
     Datagrid,
     TextField,
     Pagination,
@@ -2834,14 +2836,13 @@ import {
 
 const CustomList = () => {
     const [page, setPage] = useState(1);
-    const [perPage, setPerPage] = useState(25);
-    const [sort, setSort] = useState({ field: 'id', order: 'ASC' })
+    const perPage = 50;
     const { data, total, loading, error } = useQuery({
         type: 'getList',
         resource: 'posts',
         payload: {
             pagination: { page, perPage },
-            sort,
+            sort: { field: 'id', order: 'ASC' },
             filter: {},
         }
     });
@@ -2853,29 +2854,33 @@ const CustomList = () => {
         return <p>ERROR: {error}</p>
     }
     return (
-        <Datagrid 
-            data={keyBy(data, 'id')}
-            ids={data.map(({ id }) => id)}
-            currentSort={sort}
-            setSort={(field, order) => setSort({ field, order })}
-        >
-            <TextField source="id" />
-            <TextField source="title" />
-        </Datagrid>
-        <Pagination
-            page={page}
-            setPage={setPage}
-            perPage={perPage}
-            setPerPage={setPerPage}
-            total={total}
-        />
+        <ResourceContextProvider value="posts">
+            <ListContextProvider
+                value={{
+                    basePath: '/posts',
+                    data: keyBy(data, 'id'),
+                    ids: data.map(({ id }) => id),
+                    currentSort: { field: 'id', order: 'ASC' },
+                    selectedIds: [],
+                }}
+            >
+                <Datagrid rowClick="edit">
+                    <TextField source="id" />
+                    <TextField source="title" />
+                </Datagrid>
+                <Pagination
+                    page={page}
+                    perPage={perPage}
+                    setPage={setPage}
+                    total={total}
+                />
+            </ListContextProvider>
+        </ResourceContextProvider>
     );
 }
 ```
 {% endraw %}
 
-**Tip**: If you use the `<Datagrid rowClick>` prop in this case, you must also set the `basePath` prop to let the `<Datagrid>` compute the link to the record pages. 
-
 ## Third-Party Components
 
 You can find components for react-admin in third-party repositories.

examples/simple/src/customRouteLayout.tsx

@@ -26,13 +26,13 @@ const CustomRouteLayout = () => {
                 Found <span className="total">{total}</span> posts !
             </p>
             <Datagrid
-                basePath="/posts"
+                basePath=""
                 currentSort={currentSort}
                 data={data}
                 ids={ids}
+                selectedIds={[]}
                 loaded={loaded}
                 total={total}
-                rowClick="edit"
             >
                 <TextField source="id" sortable={false} />
                 <TextField source="title" sortable={false} />

packages/ra-ui-materialui/src/list/datagrid/Datagrid.tsx

@@ -147,7 +147,7 @@ const Datagrid: FC<DatagridProps> = React.forwardRef((props, ref) => {
         isRowExpandable,
     ]);
 
-    const updateSortCallback = useCallback(
+    const updateSort = useCallback(
         event => {
             event.stopPropagation();
             const newField = event.currentTarget.dataset.field;
@@ -163,8 +163,6 @@ const Datagrid: FC<DatagridProps> = React.forwardRef((props, ref) => {
         [currentSort.field, currentSort.order, setSort]
     );
 
-    const updateSort = setSort ? updateSortCallback : null;
-
     const handleSelectAll = useCallback(
         event => {
             if (event.target.checked) {
@@ -186,10 +184,10 @@ const Datagrid: FC<DatagridProps> = React.forwardRef((props, ref) => {
     const lastSelected = useRef(null);
 
     useEffect(() => {
-        if (!selectedIds || selectedIds.length === 0) {
+        if (selectedIds.length === 0) {
             lastSelected.current = null;
         }
-    }, [JSON.stringify(selectedIds)]); // eslint-disable-line react-hooks/exhaustive-deps
+    }, [selectedIds.length]);
 
     const handleToggleItem = useCallback(
         (id, event) => {
@@ -278,7 +276,7 @@ const Datagrid: FC<DatagridProps> = React.forwardRef((props, ref) => {
                                 )}
                             />
                         )}
-                        {hasBulkActions && selectedIds && (
+                        {hasBulkActions && (
                             <TableCell
                                 padding="checkbox"
                                 className={classes.headerCell}
@@ -348,9 +346,9 @@ Datagrid.propTypes = {
     children: PropTypes.node.isRequired,
     classes: PropTypes.object,
     className: PropTypes.string,
-    currentSort: PropTypes.exact({
-        field: PropTypes.string.isRequired,
-        order: PropTypes.string.isRequired,
+    currentSort: PropTypes.shape({
+        field: PropTypes.string,
+        order: PropTypes.string,
     }),
     data: PropTypes.any,
     // @ts-ignore
@@ -395,7 +393,7 @@ export interface DatagridProps<RecordType extends Record = Record>
     size?: 'medium' | 'small';
     // can be injected when using the component without context
     basePath?: string;
-    currentSort?: SortPayload;
+    currentsort?: SortPayload;
     data?: RecordMap<RecordType>;
     ids?: Identifier[];
     loaded?: boolean;

packages/ra-ui-materialui/src/list/datagrid/DatagridBody.tsx

@@ -49,7 +49,7 @@ const DatagridBody: FC<DatagridBodyProps> = React.forwardRef(
                             [classes.clickableRow]: rowClick,
                         }),
                         expand,
-                        hasBulkActions: hasBulkActions && selectedIds,
+                        hasBulkActions,
                         hover,
                         id,
                         key: id,

packages/ra-ui-materialui/src/list/datagrid/DatagridHeaderCell.tsx

@@ -52,8 +52,7 @@ export const DatagridHeaderCell = (
             variant="head"
             {...rest}
         >
-            {updateSort &&
-            field.props.sortable !== false &&
+            {field.props.sortable !== false &&
             (field.props.sortBy || field.props.source) ? (
                 <Tooltip
                     title={translate('ra.action.sort')}
@@ -104,7 +103,7 @@ DatagridHeaderCell.propTypes = {
     }).isRequired,
     isSorting: PropTypes.bool,
     resource: PropTypes.string,
-    updateSort: PropTypes.func,
+    updateSort: PropTypes.func.isRequired,
 };
 
 export interface DatagridHeaderCellProps
@@ -115,7 +114,7 @@ export interface DatagridHeaderCellProps
     isSorting?: boolean;
     resource: string;
     currentSort: SortPayload;
-    updateSort?: (event: any) => void;
+    updateSort: (event: any) => void;
 }
 
 export default memo(

packages/ra-ui-materialui/src/list/datagrid/DatagridRow.tsx

@@ -110,16 +110,14 @@ const DatagridRow: FC<DatagridRowProps> = React.forwardRef((props, ref) => {
 
             const effect =
                 typeof rowClick === 'function'
-                    ? await rowClick(id, basePath || `/${resource}`, record)
+                    ? await rowClick(id, basePath, record)
                     : rowClick;
             switch (effect) {
                 case 'edit':
-                    history.push(linkToRecord(basePath || `/${resource}`, id));
+                    history.push(linkToRecord(basePath, id));
                     return;
                 case 'show':
-                    history.push(
-                        linkToRecord(basePath || `/${resource}`, id, 'show')
-                    );
+                    history.push(linkToRecord(basePath, id, 'show'));
                     return;
                 case 'expand':
                     handleToggleExpand(event);
@@ -139,7 +137,6 @@ const DatagridRow: FC<DatagridRowProps> = React.forwardRef((props, ref) => {
             handleToggleSelection,
             id,
             record,
-            resource,
             rowClick,
         ]
     );