[Typescript] Fix ListContextProvider types

examples/demo/src/orders/OrderList.tsx

@@ -170,7 +170,10 @@ const TabbedDatagrid = () => {
                 <>
                     {filterValues.status === 'ordered' && (
                         <ListContextProvider
-                            value={{ ...listContext, ids: ordered }}
+                            value={{
+                                ...listContext,
+                                data: ordered,
+                            }}
                         >
                             <Datagrid optimized rowClick="edit">
                                 <DateField source="date" showTime />
@@ -198,7 +201,7 @@ const TabbedDatagrid = () => {
                     )}
                     {filterValues.status === 'delivered' && (
                         <ListContextProvider
-                            value={{ ...listContext, ids: delivered }}
+                            value={{ ...listContext, data: delivered }}
                         >
                             <Datagrid rowClick="edit">
                                 <DateField source="date" showTime />
@@ -230,7 +233,10 @@ const TabbedDatagrid = () => {
                     )}
                     {filterValues.status === 'cancelled' && (
                         <ListContextProvider
-                            value={{ ...listContext, ids: cancelled }}
+                            value={{
+                                ...listContext,
+                                data: cancelled,
+                            }}
                         >
                             <Datagrid rowClick="edit">
                                 <DateField source="date" showTime />

packages/ra-core/src/controller/list/ListContextProvider.tsx

@@ -6,6 +6,7 @@ import {
     ListPaginationContext,
     usePickPaginationContext,
 } from './ListPaginationContext';
+import { ListControllerResult } from './useListController';
 
 /**
  * Create a List Context and several thematic List subcontext.
@@ -34,7 +35,13 @@ import {
  * @see ListContext
  * @see ListFilterContext
  */
-export const ListContextProvider = ({ value, children }) => (
+export const ListContextProvider = ({
+    value,
+    children,
+}: {
+    value: ListControllerResult;
+    children: React.ReactNode;
+}) => (
     <ListContext.Provider value={value}>
         <ListFilterContext.Provider value={usePickFilterContext(value)}>
             <ListSortContext.Provider value={usePickSortContext(value)}>

packages/ra-core/src/controller/list/useListController.ts

@@ -219,7 +219,7 @@ export interface ListControllerResult<RecordType extends RaRecord = any> {
     onUnselectItems: () => void;
     page: number;
     perPage: number;
-    refetch: UseGetListHookValue<RecordType>['refetch'];
+    refetch: (() => void) | UseGetListHookValue<RecordType>['refetch'];
     resource: string;
     selectedIds: RecordType['id'][];
     setFilters: (

packages/ra-core/src/form/choices/ChoicesContext.ts

@@ -1,4 +1,5 @@
 import { createContext } from 'react';
+import { UseGetListHookValue } from '../../dataProvider/useGetList';
 import { FilterPayload, RaRecord, SortPayload } from '../../types';
 
 /**
@@ -24,7 +25,7 @@ export type ChoicesContextValue<RecordType extends RaRecord = any> = {
     isLoading: boolean;
     page: number;
     perPage: number;
-    refetch: () => void;
+    refetch: (() => void) | UseGetListHookValue<RecordType>['refetch'];
     resource: string;
     selectedChoices: RecordType[];
     setFilters: (

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

@@ -87,7 +87,8 @@ export const ArrayField: FC<ArrayFieldProps> = memo(props => {
                 sort: { field: null, order: null },
                 displayedFilters: null,
                 filterValues: null,
-                hasCreate: null,
+                hasNextPage: null,
+                hasPreviousPage: null,
                 hideFilter: null,
                 isFetching: false,
                 isLoading: false,
@@ -96,6 +97,7 @@ export const ArrayField: FC<ArrayFieldProps> = memo(props => {
                 onUnselectItems: null,
                 page: null,
                 perPage: null,
+                refetch: null,
                 resource,
                 setFilters: null,
                 setPage: null,

packages/ra-ui-materialui/src/list/filter/FilterListItem.spec.tsx

@@ -2,15 +2,41 @@ import * as React from 'react';
 import expect from 'expect';
 import { render, cleanup } from '@testing-library/react';
 
-import { ListContextProvider } from 'ra-core';
+import { ListContextProvider, ListControllerResult } from 'ra-core';
 import { FilterListItem } from './FilterListItem';
 
+const defaultListContext: ListControllerResult = {
+    data: [],
+    displayedFilters: null,
+    filterValues: null,
+    hasNextPage: false,
+    hasPreviousPage: false,
+    hideFilter: (filterName: string) => {},
+    isFetching: false,
+    isLoading: false,
+    onSelect: (ids: any[]) => {},
+    onToggleItem: (id: any) => {},
+    onUnselectItems: () => {},
+    page: 1,
+    perPage: 10,
+    refetch: () => {},
+    resource: 'posts',
+    selectedIds: [],
+    setFilters: (filters: any) => {},
+    setPage: (page: number) => {},
+    setPerPage: (perPage: number) => {},
+    setSort: (sort: any) => {},
+    showFilter: (filterName: string) => {},
+    sort: { field: '', order: 'ASC' },
+    total: 0,
+};
+
 describe('<FilterListItem/>', () => {
     afterEach(cleanup);
 
     it("should display the item label when it's a string", () => {
         const { queryByText } = render(
-            <ListContextProvider value={{ hideFilter: true }}>
+            <ListContextProvider value={defaultListContext}>
                 <FilterListItem label="Foo" value={{ foo: 'bar' }} />
             </ListContextProvider>
         );
@@ -19,7 +45,7 @@ describe('<FilterListItem/>', () => {
 
     it("should display the item label when it's an element", () => {
         const { queryByTestId } = render(
-            <ListContextProvider value={{ hideFilter: true }}>
+            <ListContextProvider value={defaultListContext}>
                 <FilterListItem
                     label={<span data-testid="123">Foo</span>}
                     value={{ foo: 'bar' }}
@@ -31,40 +57,40 @@ describe('<FilterListItem/>', () => {
 
     it('should not appear selected if filterValues is empty', () => {
         const { getByText } = render(
-            <ListContextProvider value={{ hideFilter: true }}>
+            <ListContextProvider value={defaultListContext}>
                 <FilterListItem label="Foo" value={{ foo: 'bar' }} />
             </ListContextProvider>
         );
-        expect(getByText('Foo').parentElement.dataset.selected).toBe('false');
+        expect(getByText('Foo').parentElement?.dataset.selected).toBe('false');
     });
 
     it('should not appear selected if filterValues does not contain value', () => {
         const { getByText } = render(
             <ListContextProvider
-                value={{ hideFilter: true, filterValues: { bar: 'baz' } }}
+                value={{ ...defaultListContext, filterValues: { bar: 'baz' } }}
             >
                 <FilterListItem label="Foo" value={{ foo: 'bar' }} />
             </ListContextProvider>
         );
-        expect(getByText('Foo').parentElement.dataset.selected).toBe('false');
+        expect(getByText('Foo').parentElement?.dataset.selected).toBe('false');
     });
 
     it('should appear selected if filterValues is equal to value', () => {
         const { getByText } = render(
             <ListContextProvider
-                value={{ hideFilter: true, filterValues: { foo: 'bar' } }}
+                value={{ ...defaultListContext, filterValues: { foo: 'bar' } }}
             >
                 <FilterListItem label="Foo" value={{ foo: 'bar' }} />
             </ListContextProvider>
         );
-        expect(getByText('Foo').parentElement.dataset.selected).toBe('true');
+        expect(getByText('Foo').parentElement?.dataset.selected).toBe('true');
     });
 
     it('should appear selected if filterValues is equal to value for nested filters', () => {
         const { getByText } = render(
             <ListContextProvider
                 value={{
-                    hideFilter: true,
+                    ...defaultListContext,
                     filterValues: {
                         $and: [
                             {
@@ -100,20 +126,20 @@ describe('<FilterListItem/>', () => {
                 />
             </ListContextProvider>
         );
-        expect(getByText('Foo').parentElement.dataset.selected).toBe('true');
+        expect(getByText('Foo').parentElement?.dataset.selected).toBe('true');
     });
 
     it('should appear selected if filterValues contains value', () => {
         const { getByText } = render(
             <ListContextProvider
                 value={{
-                    hideFilter: true,
+                    ...defaultListContext,
                     filterValues: { foo: 'bar', bar: 'baz' },
                 }}
             >
                 <FilterListItem label="Foo" value={{ foo: 'bar' }} />
             </ListContextProvider>
         );
-        expect(getByText('Foo').parentElement.dataset.selected).toBe('true');
+        expect(getByText('Foo').parentElement?.dataset.selected).toBe('true');
     });
 });