Move FilterContext to ra-core and introduce useFilterContext

Author: djhi

…ui-materialui/src/list/FilterContext.tsx …re/src/controller/list/FilterContext.tsxpackages/ra-ui-materialui/src/list/FilterContext.tsx renamed to packages/ra-core/src/controller/list/FilterContext.tsx packages/ra-ui-materialui/src/list/FilterContext.tsx renamed to packages/ra-core/src/controller/list/FilterContext.tsx

@@ -1,3 +1,4 @@
+export * from './FilterContext';
 export * from './InfiniteListBase';
 export * from './InfinitePaginationContext';
 export * from './ListBase';
@@ -10,6 +11,7 @@ export * from './ListPaginationContext';
 export * from './ListSortContext';
 export * from './queryReducer';
 export * from './useExpanded';
+export * from './useFilterContext';
 export * from './useInfiniteListController';
 export * from './useInfinitePaginationContext';
 export * from './useList';

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

@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+import { FilterContext, type FilterContextType } from './FilterContext';
+
+export const useFilterContext = (): FilterContextType => {
+    return useContext(FilterContext);
+};

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

@@ -3,6 +3,7 @@ import { cloneElement, ReactElement, ReactNode, useCallback } from 'react';
 import clsx from 'clsx';
 import {
     ChoicesProps,
+    FilterContext,
     Identifier,
     ListContextProvider,
     useChoicesContext,
@@ -17,13 +18,7 @@ import {
 import { CommonInputProps } from './CommonInputProps';
 import { InputHelperText } from './InputHelperText';
 import { SupportCreateSuggestionOptions } from './useSupportCreateSuggestion';
-import {
-    Datagrid,
-    DatagridProps,
-    FilterButton,
-    FilterForm,
-    FilterContext,
-} from '../list';
+import { Datagrid, DatagridProps, FilterButton, FilterForm } from '../list';
 import { Pagination as DefaultPagination } from '../list/pagination';
 import { sanitizeInputRestProps } from './sanitizeInputRestProps';
 

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

@@ -1,17 +1,17 @@
 import * as React from 'react';
-import { cloneElement, useMemo, useContext, ReactElement } from 'react';
+import { cloneElement, useMemo, ReactElement } from 'react';
 import {
     sanitizeListRestProps,
     Exporter,
     useListContext,
     useResourceContext,
     useResourceDefinition,
+    useFilterContext,
 } from 'ra-core';
 import { ToolbarProps } from '@mui/material';
 
 import TopToolbar from '../layout/TopToolbar';
 import { CreateButton, ExportButton } from '../button';
-import { FilterContext } from './FilterContext';
 import { FilterButton } from './filter';
 
 /**
@@ -49,7 +49,7 @@ export const ListActions = (props: ListActionsProps) => {
         useListContext();
     const resource = useResourceContext(props);
     const { hasCreate } = useResourceDefinition(props);
-    const filters = useContext(FilterContext) || filtersProp;
+    const filters = useFilterContext() || filtersProp;
     return useMemo(
         () => (
             <TopToolbar className={className} {...sanitizeListRestProps(rest)}>

packages/ra-ui-materialui/src/list/ListActions.tsx

@@ -6,10 +6,9 @@ import {
     useThemeProps,
 } from '@mui/material/styles';
 import type { ToolbarProps } from '@mui/material';
-import type { Exporter } from 'ra-core';
+import { type Exporter, FilterContext } from 'ra-core';
 
 import { FilterForm } from './filter';
-import { FilterContext } from './FilterContext';
 
 export const ListToolbar: FC<ListToolbarProps> = memo(inProps => {
     const props = useThemeProps({

packages/ra-ui-materialui/src/list/ListToolbar.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { Children, ReactNode } from 'react';
+import { FilterContext } from 'ra-core';
 
 import { FilterForm } from './FilterForm';
 import { FilterButton } from './FilterButton';
-import { FilterContext } from '../FilterContext';
 
 /**
  * Filter button/form combo

packages/ra-ui-materialui/src/list/filter/Filter.tsx

@@ -5,7 +5,6 @@ import {
     useRef,
     type ReactNode,
     type HtmlHTMLAttributes,
-    useContext,
 } from 'react';
 import {
     Menu,
@@ -24,13 +23,17 @@ import BookmarkRemoveIcon from '@mui/icons-material/BookmarkRemove';
 import BookmarkBorderIcon from '@mui/icons-material/BookmarkBorder';
 import ContentFilter from '@mui/icons-material/FilterList';
 import isEqual from 'lodash/isEqual';
-import { useListContext, useResourceContext, useTranslate } from 'ra-core';
+import {
+    useFilterContext,
+    useListContext,
+    useResourceContext,
+    useTranslate,
+} from 'ra-core';
 import { stringify } from 'query-string';
 import { useNavigate } from 'react-router';
 
 import { FilterButtonMenuItem } from './FilterButtonMenuItem';
 import { Button } from '../../button';
-import { FilterContext } from '../FilterContext';
 import { extractValidSavedQueries, useSavedQueries } from './useSavedQueries';
 import { AddSavedQueryDialog } from './AddSavedQueryDialog';
 import { RemoveSavedQueryDialog } from './RemoveSavedQueryDialog';
@@ -48,7 +51,7 @@ export const FilterButton = (inProps: FilterButtonProps) => {
         variant,
         ...rest
     } = props;
-    const filters = useContext(FilterContext) || filtersProp;
+    const filters = useFilterContext() || filtersProp;
     const resource = useResourceContext(props);
     const translate = useTranslate();
     if (!resource && !disableSaveQuery) {

packages/ra-ui-materialui/src/list/filter/FilterButton.tsx

@@ -4,17 +4,20 @@ import {
     useThemeProps,
 } from '@mui/material/styles';
 import get from 'lodash/get';
-import { FilterLiveForm, useListContext, useResourceContext } from 'ra-core';
+import {
+    FilterLiveForm,
+    useFilterContext,
+    useListContext,
+    useResourceContext,
+} from 'ra-core';
 import * as React from 'react';
 import {
     type HtmlHTMLAttributes,
     type ReactNode,
     useCallback,
-    useContext,
     useEffect,
 } from 'react';
 
-import { FilterContext } from '../FilterContext';
 import { FilterFormInput } from './FilterFormInput';
 
 export const FilterForm = (inProps: FilterFormProps) => {
@@ -23,7 +26,7 @@ export const FilterForm = (inProps: FilterFormProps) => {
         name: PREFIX,
     });
     const { filters: filtersProps, ...rest } = props;
-    const filters = useContext(FilterContext) || filtersProps;
+    const filters = useFilterContext() || filtersProps;
 
     return (
         <FilterLiveForm formComponent={StyledForm} {...sanitizeRestProps(rest)}>

packages/ra-ui-materialui/src/list/filter/FilterForm.tsx

@@ -5,7 +5,6 @@ export * from './datatable';
 export * from './Empty';
 export * from './InfiniteList';
 export * from './filter';
-export * from './FilterContext';
 export * from './List';
 export * from './ListActions';
 export * from './listFieldTypes';