[TypeScript] Export many internal ra-core prop types for easier override

packages/ra-core/src/auth/Authenticated.tsx

@@ -2,7 +2,7 @@ import { cloneElement, ReactElement } from 'react';
 
 import useAuthenticated from './useAuthenticated';
 
-interface Props {
+export interface AuthenticatedProps {
     children: ReactElement<any>;
     authParams?: object;
     location?: object; // kept for backwards compatibility, unused
@@ -36,7 +36,7 @@ interface Props {
  *         </Admin>
  *     );
  */
-const Authenticated = (props: Props) => {
+const Authenticated = (props: AuthenticatedProps) => {
     const {
         authParams,
         children,

packages/ra-core/src/auth/WithPermissions.tsx

@@ -13,7 +13,7 @@ type WithPermissionsChildren = (
     params: WithPermissionsChildrenParams
 ) => ReactElement;
 
-interface Props {
+export interface WithPermissionsProps {
     authParams?: object;
     children?: WithPermissionsChildren;
     component?: ComponentType<any>;
@@ -59,7 +59,7 @@ const isEmptyChildren = children => Children.count(children) === 0;
  *         </Admin>
  *     );
  */
-const WithPermissions = (props: Props) => {
+const WithPermissions = (props: WithPermissionsProps) => {
     const {
         authParams,
         children,
@@ -91,4 +91,4 @@ const WithPermissions = (props: Props) => {
     }
 };
 
-export default WithPermissions as ComponentType<Props>;
+export default WithPermissions as ComponentType<WithPermissionsProps>;

packages/ra-core/src/auth/index.ts

@@ -1,11 +1,11 @@
-import Authenticated from './Authenticated';
+import Authenticated, { AuthenticatedProps } from './Authenticated';
 import AuthContext from './AuthContext';
 import useAuthProvider from './useAuthProvider';
 import useAuthState from './useAuthState';
 import usePermissions from './usePermissions';
 import usePermissionsOptimized from './usePermissionsOptimized';
 import useAuthenticated from './useAuthenticated';
-import WithPermissions from './WithPermissions';
+import WithPermissions, { WithPermissionsProps } from './WithPermissions';
 import useLogin from './useLogin';
 import useLogout from './useLogout';
 import useCheckAuth from './useCheckAuth';
@@ -34,5 +34,7 @@ export {
     useLogoutIfAccessDenied,
     // components
     Authenticated,
+    AuthenticatedProps,
     WithPermissions,
+    WithPermissionsProps,
 };

packages/ra-core/src/controller/field/ReferenceArrayFieldController.tsx

@@ -4,7 +4,7 @@ import useReferenceArrayFieldController from './useReferenceArrayFieldController
 import { ListControllerProps } from '../useListController';
 import { Record, SortPayload } from '../../types';
 
-interface Props {
+export interface ReferenceArrayFieldControllerProps {
     basePath?: string;
     filter?: any;
     page?: number;
@@ -22,7 +22,9 @@ interface Props {
  *
  * @see useReferenceArrayFieldController
  */
-const ReferenceArrayFieldController = (props: Props) => {
+const ReferenceArrayFieldController = (
+    props: ReferenceArrayFieldControllerProps
+) => {
     const { children, ...rest } = props;
     const controllerProps = useReferenceArrayFieldController({
         sort: {

packages/ra-core/src/controller/field/ReferenceFieldController.tsx

@@ -10,7 +10,7 @@ interface ChildrenParams extends UseReferenceProps {
     resourceLinkPath: string | false;
 }
 
-interface Props {
+export interface ReferenceFieldControllerProps {
     basePath: string;
     children: (params: ChildrenParams) => ReactNode;
     record?: Record;
@@ -49,16 +49,14 @@ interface Props {
  *     <TextField source="name" />
  * </ReferenceField>
  */
-export const ReferenceFieldController = ({
-    children,
-    record,
-    source,
-    ...props
-}: Props) => {
+export const ReferenceFieldController = (
+    props: ReferenceFieldControllerProps
+) => {
+    const { children, record, source, ...rest } = props;
     const id = get(record, source);
     return children({
-        ...useReference({ ...props, id }),
-        resourceLinkPath: getResourceLinkPath({ ...props, record, source }),
+        ...useReference({ ...rest, id }),
+        resourceLinkPath: getResourceLinkPath({ ...rest, record, source }),
     }) as ReactElement<any>;
 };
 

packages/ra-core/src/controller/field/ReferenceManyFieldController.tsx

@@ -4,7 +4,7 @@ import { Record, SortPayload } from '../../types';
 import useReferenceManyFieldController from './useReferenceManyFieldController';
 import { ListControllerProps } from '../useListController';
 
-interface Props {
+export interface ReferenceManyFieldControllerProps {
     basePath: string;
     children: (params: ListControllerProps) => ReactElement<any>;
     filter?: any;
@@ -24,7 +24,9 @@ interface Props {
  *
  * @see useReferenceManyFieldController
  */
-export const ReferenceManyFieldController = (props: Props) => {
+export const ReferenceManyFieldController = (
+    props: ReferenceManyFieldControllerProps
+) => {
     const { children, page = 1, perPage = 25, ...rest } = props;
     const controllerProps = useReferenceManyFieldController({
         page,

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

@@ -1,6 +1,12 @@
-import ReferenceArrayFieldController from './ReferenceArrayFieldController';
-import ReferenceFieldController from './ReferenceFieldController';
-import ReferenceManyFieldController from './ReferenceManyFieldController';
+import ReferenceArrayFieldController, {
+    ReferenceArrayFieldControllerProps,
+} from './ReferenceArrayFieldController';
+import ReferenceFieldController, {
+    ReferenceFieldControllerProps,
+} from './ReferenceFieldController';
+import ReferenceManyFieldController, {
+    ReferenceManyFieldControllerProps,
+} from './ReferenceManyFieldController';
 import getResourceLinkPath, { LinkToType } from './getResourceLinkPath';
 import useReferenceArrayFieldController from './useReferenceArrayFieldController';
 import useReferenceManyFieldController from './useReferenceManyFieldController';
@@ -16,8 +22,11 @@ export type { LinkToType };
 export {
     useReferenceArrayFieldController,
     ReferenceArrayFieldController,
+    ReferenceArrayFieldControllerProps,
     ReferenceFieldController,
+    ReferenceFieldControllerProps,
     getResourceLinkPath,
     useReferenceManyFieldController,
     ReferenceManyFieldController,
+    ReferenceManyFieldControllerProps,
 };

packages/ra-core/src/controller/input/ReferenceInputController.tsx

@@ -6,7 +6,7 @@ import {
     ReferenceInputValue,
 } from './useReferenceInputController';
 
-interface Props {
+export interface ReferenceInputControllerProps {
     allowEmpty?: boolean;
     basePath: string;
     children: (params: ReferenceInputValue) => ReactNode;
@@ -28,9 +28,13 @@ interface Props {
  *
  * @see useReferenceInputController
  */
-export const ReferenceInputController = (props: Props) => {
+export const ReferenceInputController = (
+    props: ReferenceInputControllerProps
+) => {
     const { children, ...rest } = props;
     return children(useReferenceInputController(rest)) as ReactElement;
 };
 
-export default ReferenceInputController as ComponentType<Props>;
+export default ReferenceInputController as ComponentType<
+    ReferenceInputControllerProps
+>;

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

@@ -1,5 +1,7 @@
 import ReferenceArrayInputController from './ReferenceArrayInputController';
-import ReferenceInputController from './ReferenceInputController';
+import ReferenceInputController, {
+    ReferenceInputControllerProps,
+} from './ReferenceInputController';
 import {
     getStatusForInput,
     getSelectedReferencesStatus,
@@ -18,4 +20,5 @@ export {
     getStatusForArrayInput,
     ReferenceArrayInputController,
     ReferenceInputController,
+    ReferenceInputControllerProps,
 };

packages/ra-core/src/core/RoutesWithLayout.tsx

@@ -10,7 +10,7 @@ import {
     DashboardComponent,
 } from '../types';
 
-interface Props {
+export interface RoutesWithLayoutProps {
     catchAll: CatchAllComponent;
     children: AdminChildren;
     customRoutes?: CustomRoutes;
@@ -20,7 +20,7 @@ interface Props {
 
 const defaultAuthParams = { route: 'dashboard' };
 
-const RoutesWithLayout = (props: Props) => {
+const RoutesWithLayout = (props: RoutesWithLayoutProps) => {
     const { catchAll, children, customRoutes, dashboard, title } = props;
     const childrenAsArray = React.Children.toArray(children);
     const firstChild: React.ReactElement<any> | null =

packages/ra-core/src/core/components.ts

@@ -3,7 +3,7 @@ import CoreAdminContext, { AdminContextProps } from './CoreAdminContext';
 import CoreAdminRouter, { AdminRouterProps } from './CoreAdminRouter';
 import CoreAdminUI, { AdminUIProps } from './CoreAdminUI';
 import createAdminStore from './createAdminStore';
-import RoutesWithLayout from './RoutesWithLayout';
+import RoutesWithLayout, { RoutesWithLayoutProps } from './RoutesWithLayout';
 import Resource from './Resource';
 
 export type { AdminContextProps, AdminRouterProps, AdminUIProps };
@@ -15,5 +15,6 @@ export {
     CoreAdminUI,
     createAdminStore,
     RoutesWithLayout,
+    RoutesWithLayoutProps,
     Resource,
 };

packages/ra-core/src/dataProvider/Query.tsx

@@ -9,7 +9,7 @@ interface ChildrenFuncParams {
     error?: any;
 }
 
-interface Props {
+export interface QueryProps {
     children: (params: ChildrenFuncParams) => JSX.Element;
     type: string;
     resource?: string;
@@ -66,7 +66,7 @@ interface Props {
  *     </Query>
  * );
  */
-const Query: FunctionComponent<Props> = ({
+const Query: FunctionComponent<QueryProps> = ({
     children,
     type,
     resource,

packages/ra-core/src/dataProvider/index.ts

@@ -3,7 +3,7 @@ import DataProviderContext from './DataProviderContext';
 import HttpError from './HttpError';
 import * as fetchUtils from './fetch';
 import Mutation from './Mutation';
-import Query from './Query';
+import Query, { QueryProps } from './Query';
 import cacheDataProviderProxy from './cacheDataProviderProxy';
 import undoableEventEmitter from './undoableEventEmitter';
 import useDataProvider from './useDataProvider';
@@ -36,6 +36,7 @@ export {
     HttpError,
     Mutation,
     Query,
+    QueryProps,
     undoableEventEmitter,
     useDataProvider,
     useMutation,

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

@@ -5,11 +5,11 @@ import {
 } from './validate';
 import { useTranslate } from '../i18n';
 
-interface Props {
+export interface ValidationErrorProps {
     error: ValidationErrorMessage;
 }
 
-const ValidationError = (props: Props) => {
+const ValidationError = (props: ValidationErrorProps) => {
     const { error } = props;
     const translate = useTranslate();
     if ((error as ValidationErrorMessageWithArgs).message) {

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

@@ -12,7 +12,7 @@ import FormWithRedirect, {
     HandleSubmitWithRedirect,
 } from './FormWithRedirect';
 import useInput, { InputProps, UseInputValue } from './useInput';
-import ValidationError from './ValidationError';
+import ValidationError, { ValidationErrorProps } from './ValidationError';
 import useInitializeFormWithRecord from './useInitializeFormWithRecord';
 import sanitizeEmptyValues from './sanitizeEmptyValues';
 import useChoices, {
@@ -54,6 +54,7 @@ export {
     useInitializeFormWithRecord,
     useSuggestions,
     ValidationError,
+    ValidationErrorProps,
     useWarnWhenUnsavedChanges,
     useResetSubmitErrors,
 };

packages/ra-core/src/i18n/TranslationProvider.tsx

@@ -4,7 +4,7 @@ import { useSafeSetState } from '../util/hooks';
 import { TranslationContext } from './TranslationContext';
 import { I18nProvider } from '../types';
 
-interface Props {
+export interface TranslationProviderProps {
     locale?: string;
     i18nProvider: I18nProvider;
     children: ReactNode;
@@ -27,7 +27,7 @@ interface State {
  *         </Provider>
  *     );
  */
-const TranslationProvider = (props: Props) => {
+const TranslationProvider = (props: TranslationProviderProps) => {
     const { i18nProvider, children } = props;
 
     const [state, setState] = useSafeSetState<State>({

packages/ra-core/src/i18n/index.ts

@@ -1,6 +1,8 @@
 import translate from './translate';
 import { TranslationContext } from './TranslationContext';
-import TranslationProvider from './TranslationProvider';
+import TranslationProvider, {
+    TranslationProviderProps,
+} from './TranslationProvider';
 import TestTranslationProvider from './TestTranslationProvider';
 import useLocale from './useLocale';
 import useSetLocale from './useSetLocale';
@@ -14,6 +16,7 @@ export {
     withTranslate, // deprecated
     TranslationContext,
     TranslationProvider,
+    TranslationProviderProps,
     TestTranslationProvider,
     useLocale,
     useSetLocale,

packages/ra-core/src/util/FieldTitle.tsx

@@ -4,14 +4,14 @@ import { ReactElement, memo } from 'react';
 import useTranslate from '../i18n/useTranslate';
 import getFieldLabelTranslationArgs from './getFieldLabelTranslationArgs';
 
-interface Props {
+export interface FieldTitleProps {
     isRequired?: boolean;
     resource?: string;
     source?: string;
     label?: string | ReactElement | false;
 }
 
-export const FieldTitle = (props: Props) => {
+export const FieldTitle = (props: FieldTitleProps) => {
     const { resource, source, label, isRequired } = props;
     const translate = useTranslate();
 

packages/ra-core/src/util/index.ts

@@ -1,5 +1,5 @@
 import escapePath from './escapePath';
-import FieldTitle from './FieldTitle';
+import FieldTitle, { FieldTitleProps } from './FieldTitle';
 import getFetchedAt from './getFetchedAt';
 import getFieldLabelTranslationArgs from './getFieldLabelTranslationArgs';
 import ComponentPropType from './ComponentPropType';
@@ -18,6 +18,7 @@ export * from './mergeRefs';
 export {
     escapePath,
     FieldTitle,
+    FieldTitleProps,
     getFetchedAt,
     getFieldLabelTranslationArgs,
     ComponentPropType,