Merge branch 'master' into next

Author: React-Admin CI

docs/DateRangeInput.md

@@ -56,7 +56,7 @@ export const EventEdit = () => (
 | `sx`          | -        | `SxProps`        | -       | The style to apply to the component.                                                                                                                                                         |
 | `validate`    | -        | `function|Array` | -       | Validation rules for the input. See the [Validation Documentation](./Validation.md#per-input-validation-built-in-field-validators) for details.             |
 
-`<DateRangeInput>` also accept the same props as [MUI X's `<DateRangePicker>`](https://mui.com/x/api/date-pickers/date-range-picker/), except for the `format` prop (renamed `mask`), 
+`<DateRangeInput>` also accept the same props as [MUI X's `<DateRangePicker>`](https://mui.com/x/api/date-pickers/date-range-picker/), except for the `format` prop (renamed `mask`),
 
 **Tip:** Since `<DateRangeInput>` stores its value as a date array, [react-admin's validators](./Validation.md#per-input-validation-built-in-field-validators) like `minValue` or `maxValue` won't work out of the box.
 
@@ -142,6 +142,44 @@ const EventEdit = () => {
 };
 ```
 
+## Using `<DateRangeInput>` as a Filter
+
+`<DateRangeInput>` can also be used to filter a `<List>`.
+
+However, by default, `<DateRangeInput>` returns `Date` objects with their time set to 00:00:00, which makes the upper bound *exclusive*. Usually, users will expect the upper bound to be *inclusive*.
+
+This can be achieved by providing a `parse` function that sets the time of the upper bound to 23:59:59.
+
+Here is an example:
+
+```tsx
+import { DateRangeInput } from '@react-admin/ra-form-layout/DateRangeInput';
+import { List, Datagrid, NumberField, TextField, DateField } from 'react-admin';
+import { endOfDay } from 'date-fns';
+
+const dateRangeFilterParse = (dates: (Date | null)[]) => {
+    return [dates[0], dates[1] ? endOfDay(dates[1]) : dates[1]];
+};
+
+const eventsFilters = [
+    <DateRangeInput
+        source="date_between"
+        key="date_filter"
+        parse={dateRangeFilterParse}
+    />,
+];
+
+export const EventsList = () => (
+    <List filters={eventsFilters}>
+        <Datagrid>
+            <NumberField source="id" />
+            <TextField source="name" />
+            <DateField source="date" />
+        </Datagrid>
+    </List>
+);
+```
+
 ## Providing your own `LocalizationProvider`
 
 MUI X Pickers need to be wrapped in a [LocalizationProvider](https://mui.com/components/pickers/#localization) to work properly. `<DateRangeInput>` already includes a default `<LocalizationProvider>` using the `date-fns` adapter and the `enUS` locale.
@@ -171,4 +209,4 @@ export const App = () => (
 
 **Note:** React-admin only supports the `date-fns` adapter for now.
 
-**Tip**: React-admin already depends on `date-fns` v3 but your package manager may require you to add it to your dependencies.
+**Tip**: React-admin already depends on `date-fns` v3 but your package manager may require you to add it to your dependencies.

examples/demo/src/products/ProductEdit.tsx

@@ -13,6 +13,10 @@ import {
     TextInput,
     useRecordContext,
 } from 'react-admin';
+import PhotoCameraIcon from '@mui/icons-material/PhotoCamera';
+import AspectRatioIcon from '@mui/icons-material/AspectRatio';
+import EditNoteIcon from '@mui/icons-material/EditNote';
+import ReviewIcon from '@mui/icons-material/Comment';
 
 import { ProductEditDetails } from './ProductEditDetails';
 import CustomerReferenceField from '../visitors/CustomerReferenceField';
@@ -37,7 +41,9 @@ const ProductEdit = () => (
         <TabbedForm>
             <TabbedForm.Tab
                 label="resources.products.tabs.image"
-                sx={{ maxWidth: '40em' }}
+                sx={{ maxWidth: '40em', minHeight: 48 }}
+                iconPosition="start"
+                icon={<PhotoCameraIcon />}
             >
                 <Poster />
                 <TextInput source="image" validate={req} />
@@ -46,14 +52,18 @@ const ProductEdit = () => (
             <TabbedForm.Tab
                 label="resources.products.tabs.details"
                 path="details"
-                sx={{ maxWidth: '40em' }}
+                sx={{ maxWidth: '40em', minHeight: 48 }}
+                iconPosition="start"
+                icon={<AspectRatioIcon />}
             >
                 <ProductEditDetails />
             </TabbedForm.Tab>
             <TabbedForm.Tab
                 label="resources.products.tabs.description"
                 path="description"
-                sx={{ maxWidth: '40em' }}
+                sx={{ maxWidth: '40em', minHeight: 48 }}
+                iconPosition="start"
+                icon={<EditNoteIcon />}
             >
                 <RichTextInput source="description" label="" validate={req} />
             </TabbedForm.Tab>
@@ -67,6 +77,9 @@ const ProductEdit = () => (
                     />
                 }
                 path="reviews"
+                sx={{ minHeight: 48 }}
+                iconPosition="start"
+                icon={<ReviewIcon />}
             >
                 <ReferenceManyField
                     reference="reviews"

examples/demo/src/visitors/FullNameField.tsx

@@ -30,6 +30,8 @@ const FullNameField = (props: Props) => {
                     mr: 1,
                     mt: -0.5,
                     mb: -0.5,
+                    textDecoration: 'underline',
+                    textDecorationColor: '#bdbdbd',
                 }}
             />
             {record.first_name} {record.last_name}

packages/ra-core/src/form/Form.spec.tsx

@@ -11,7 +11,7 @@ import { CoreAdminContext } from '../core';
 import { Form } from './Form';
 import { useNotificationContext } from '../notification';
 import { useInput } from './useInput';
-import { required } from './validate';
+import { required } from './validation/validate';
 import {
     FormLevelValidation,
     InputLevelValidation,

packages/ra-core/src/form/Form.stories.tsx

@@ -13,8 +13,7 @@ import { Route, Routes, useNavigate, Link, HashRouter } from 'react-router-dom';
 import { CoreAdminContext } from '../core';
 import { Form } from './Form';
 import { useInput } from './useInput';
-import { required } from './validate';
-import ValidationError from './ValidationError';
+import { required, ValidationError } from './validation';
 import { mergeTranslations } from '../i18n';
 import { I18nProvider } from '../types';
 import { SaveContextProvider, useNotificationContext } from '..';

packages/ra-core/src/form/Form.tsx

@@ -11,7 +11,7 @@ import {
     UNSAFE_DataRouterStateContext,
 } from 'react-router';
 
-import { FormGroupsProvider } from './FormGroupsProvider';
+import { FormGroupsProvider } from './groups/FormGroupsProvider';
 import { RaRecord } from '../types';
 import {
     useRecordContext,
@@ -23,7 +23,7 @@ import {
     SourceContextValue,
     useResourceContext,
 } from '../core';
-import { ValidateForm } from './getSimpleValidationResolver';
+import { ValidateForm } from './validation/getSimpleValidationResolver';
 import { WarnWhenUnsavedChanges } from './WarnWhenUnsavedChanges';
 import { useAugmentedForm } from './useAugmentedForm';
 

packages/ra-core/src/form/FormDataConsumer.spec.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { render, waitFor, screen, fireEvent } from '@testing-library/react';
 
-import FormDataConsumer, { FormDataConsumerView } from './FormDataConsumer';
+import { FormDataConsumer, FormDataConsumerView } from './FormDataConsumer';
 import { testDataProvider } from '../dataProvider';
 import {
     AdminContext,

packages/ra-core/src/form/FormDataConsumer.tsx

@@ -42,7 +42,9 @@ import { useWrappedSource } from '../core';
  *     </Edit>
  * );
  */
-const FormDataConsumer = <TFieldValues extends FieldValues = FieldValues>(
+export const FormDataConsumer = <
+    TFieldValues extends FieldValues = FieldValues,
+>(
     props: ConnectedProps<TFieldValues>
 ) => {
     const form = useFormContext<TFieldValues>();
@@ -83,8 +85,6 @@ export const FormDataConsumerView = <
     return ret === undefined ? null : ret;
 };
 
-export default FormDataConsumer;
-
 const ArraySourceRegex = new RegExp(/.+\.\d+$/);
 
 export interface FormDataConsumerRenderParams<

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

@@ -1,3 +1,4 @@
 export * from './ChoicesContext';
 export * from './ChoicesContextProvider';
 export * from './useChoicesContext';
+export * from './useChoices';

…ges/ra-core/src/form/useChoices.spec.tsx …ore/src/form/choices/useChoices.spec.tsxpackages/ra-core/src/form/useChoices.spec.tsx renamed to packages/ra-core/src/form/choices/useChoices.spec.tsx packages/ra-core/src/form/useChoices.spec.tsx renamed to packages/ra-core/src/form/choices/useChoices.spec.tsx

@@ -3,8 +3,8 @@ import expect from 'expect';
 import { render, screen } from '@testing-library/react';
 
 import { useChoices } from './useChoices';
-import { TestTranslationProvider } from '../i18n';
-import { useRecordContext } from '../controller';
+import { TestTranslationProvider } from '../../i18n';
+import { useRecordContext } from '../../controller';
 
 describe('useChoices hook', () => {
     const defaultProps = {