@applica-software-guru/react-admin 1.4.226 → 1.5.228

package/src/components/ra-forms/LongForm/Provider.tsx

@@ -1,7 +1,7 @@
+import { IItem } from '@/components/ra-forms/LongForm/types';
+import { getChildren, getItemsIds, getLevel } from '@/components/ra-forms/LongForm/utils';
 import _ from 'lodash';
 import { createContext, useCallback, useContext, useEffect, useMemo, useReducer } from 'react';
-import { getChildren, getItemsIds, getLevel } from './utils';
-import { IItem } from './types';
 import { matchPath, useLocation } from 'react-router';
 
 enum ActionType {
@@ -57,8 +57,8 @@ type IContext = {
 };
 
 function reducer(state: IState, action: IAction): IState {
-  const newState = _.clone(state),
-    { type, payload } = action;
+  const newState = _.clone(state);
+  const { type, payload } = action;
   switch (type) {
     case ActionType.SET_FORM_ROOT_PATH:
       return _.extend(newState, { formRootPath: payload });
@@ -80,11 +80,11 @@ function reducer(state: IState, action: IAction): IState {
       });
     }
     case ActionType.REMOVE_ITEM: {
-      const id = _.isString(payload) ? payload : payload.id,
-        items = _.chain(newState.items)
-          .clone()
-          .reject((item: IItem) => item.id === id)
-          .value();
+      const id = _.isString(payload) ? payload : payload.id;
+      const items = _.chain(newState.items)
+        .clone()
+        .reject((item: IItem) => item.id === id)
+        .value();
       _.extend(newState, { items: items });
       if (newState.activeItem === id) {
         _.extend(newState, { activeItem: _.first(items)?.id ?? undefined });
@@ -107,13 +107,13 @@ const DefaultState: IState = {
 const Context = createContext<IContext | undefined>(undefined);
 
 function Provider(props: IProviderProps) {
-  const syncWithLocation = Boolean(props.syncWithLocation ?? true),
-    errorCount = Boolean(props.errorCount ?? true),
-    { rootMatchString } = props,
-    { pathname } = useLocation(),
-    [state, dispatch] = useReducer(reducer, _.cloneDeep(DefaultState)),
-    { formRootPath, items } = state,
-    value = useMemo(() => ({ state: state, dispatch: dispatch }), [state, dispatch]);
+  const syncWithLocation = Boolean(props.syncWithLocation ?? true);
+  const errorCount = Boolean(props.errorCount ?? true);
+  const { rootMatchString } = props;
+  const { pathname } = useLocation();
+  const [state, dispatch] = useReducer(reducer, _.cloneDeep(DefaultState));
+  const { formRootPath, items } = state;
+  const value = useMemo(() => ({ state: state, dispatch: dispatch }), [state, dispatch]);
 
   useEffect(() => {
     // I possibili match sono ordinati per priorità (è fondamentale).
@@ -129,11 +129,11 @@ function Provider(props: IProviderProps) {
       matchStrings.push(rootMatchString);
     }
     const match = _.chain(matchStrings)
-        .map((s) => matchPath(s, pathname))
-        .reject((m) => m === null)
-        .first()
-        .value(),
-      pathnameBase = match?.pathnameBase;
+      .map((s) => matchPath(s, pathname))
+      .reject((m) => m === null)
+      .first()
+      .value();
+    const pathnameBase = match?.pathnameBase;
 
     if (pathnameBase !== undefined && pathnameBase !== formRootPath) {
       dispatch({
@@ -173,7 +173,7 @@ function Provider(props: IProviderProps) {
         payload: locationItem
       });
     }
-  }, [dispatch, formRootPath, pathname, items]);
+  }, [dispatch, formRootPath, pathname, items, syncWithLocation]);
 
   return <Context.Provider value={value}>{props.children}</Context.Provider>;
 }
@@ -182,7 +182,9 @@ function useFormContext(): IContext {
   const context = useContext(Context);
 
   if (context === undefined) {
-    throw new Error('[LongForm] useFormContext: context undefined. Please provide a valid Context using LongForm.Provider');
+    throw new Error(
+      '[LongForm] useFormContext: context undefined. Please provide a valid Context using LongForm.Provider'
+    );
   }
 
   return context;
@@ -224,59 +226,59 @@ function useErrorCount(): boolean {
 }
 
 function useSetActiveItem(): (activeItem: string) => void {
-  const dispatch = useFormDispatch(),
-    setActiveItem = useCallback(
-      (activeItem: string) => {
-        dispatch({
-          type: ActionType.SET_ACTIVE_ITEM,
-          payload: activeItem
-        });
-      },
-      [dispatch]
-    );
+  const dispatch = useFormDispatch();
+  const setActiveItem = useCallback(
+    (activeItem: string) => {
+      dispatch({
+        type: ActionType.SET_ACTIVE_ITEM,
+        payload: activeItem
+      });
+    },
+    [dispatch]
+  );
 
   return setActiveItem;
 }
 
 function useAddItem(): (item: IItem) => void {
-  const dispatch = useFormDispatch(),
-    addItem = useCallback(
-      (item: IItem) => {
-        dispatch({
-          type: ActionType.ADD_ITEM,
-          payload: item
-        });
-      },
-      [dispatch]
-    );
+  const dispatch = useFormDispatch();
+  const addItem = useCallback(
+    (item: IItem) => {
+      dispatch({
+        type: ActionType.ADD_ITEM,
+        payload: item
+      });
+    },
+    [dispatch]
+  );
 
   return addItem;
 }
 
 function useRemoveItem(): (item: string | IItem) => void {
-  const dispatch = useFormDispatch(),
-    removeItem = useCallback(
-      (item: string | IItem) => {
-        dispatch({
-          type: ActionType.REMOVE_ITEM,
-          payload: item
-        });
-      },
-      [dispatch]
-    );
+  const dispatch = useFormDispatch();
+  const removeItem = useCallback(
+    (item: string | IItem) => {
+      dispatch({
+        type: ActionType.REMOVE_ITEM,
+        payload: item
+      });
+    },
+    [dispatch]
+  );
 
   return removeItem;
 }
 
+export type { IProviderProps };
 export {
   Provider,
-  useItems,
-  useSyncWithLocation,
-  useFormRootPath,
   useActiveItem,
-  useSetActiveItem,
   useAddItem,
+  useErrorCount,
+  useFormRootPath,
+  useItems,
   useRemoveItem,
-  useErrorCount
+  useSetActiveItem,
+  useSyncWithLocation
 };
-export type { IProviderProps };

package/src/components/ra-forms/LongForm/Sidebar.tsx

@@ -1,8 +1,8 @@
-import _ from 'lodash';
+import { Disposition } from '@/components/ra-forms/LongForm/types';
 import { Box, Grid, GridProps, Stack } from '@mui/material';
+import _ from 'lodash';
 import { Children, isValidElement, useMemo } from 'react';
-import { Disposition } from './types';
-import StickyBox from 'react-sticky-box';
+import { default as StickyBox } from 'react-sticky-box';
 
 enum SidebarSectionPosition {
   TOP = 'top',
@@ -19,12 +19,12 @@ type ISidebarSectionProps = React.PropsWithChildren<{
 }>;
 
 function Sidebar(props: ISidebarProps) {
-  const { sticky = true, disposition = { xl: 3, lg: 3, md: 4, sm: 4, xs: 12 }, spacing = 2 } = props,
-    gridProps = _.omit(props, ['sticky', 'disposition', 'spacing']),
-    Wrapper = sticky ? StickyBox : Box,
-    wrapperProps = useMemo(() => {
-      return sticky ? { offsetTop: 74, offsetBottom: (spacing as number) * 2 } : {};
-    }, [sticky, spacing]);
+  const { sticky = true, disposition = { xl: 3, lg: 3, md: 4, sm: 4, xs: 12 }, spacing = 2 } = props;
+  const gridProps = _.omit(props, ['sticky', 'disposition', 'spacing']);
+  const Wrapper = sticky ? StickyBox : Box;
+  const wrapperProps = useMemo(() => {
+    return sticky ? { offsetTop: 74, offsetBottom: (spacing as number) * 2 } : {};
+  }, [sticky, spacing]);
   return (
     <Grid {...gridProps} item {...disposition}>
       <Wrapper {...wrapperProps}>
@@ -44,27 +44,27 @@ type ISidebarChildren = {
 };
 
 function useSidebarChildren(props: React.PropsWithChildren): ISidebarChildren {
-  const { children } = props,
-    result = useMemo<ISidebarChildren>(() => {
-      const result: ISidebarChildren = {
-        top: [],
-        bottom: []
-      };
-      Children.forEach<React.ReactNode>(children, (Child) => {
-        if (isValidElement(Child) && Child?.type === SidebarSection) {
-          const { position } = Child.props;
-          switch (position) {
-            case SidebarSectionPosition.TOP:
-              result.top.push(Child);
-              break;
-            case SidebarSectionPosition.BOTTOM:
-              result.bottom.push(Child);
-              break;
-          }
+  const { children } = props;
+  const result = useMemo<ISidebarChildren>(() => {
+    const result: ISidebarChildren = {
+      top: [],
+      bottom: []
+    };
+    Children.forEach<React.ReactNode>(children, (Child) => {
+      if (isValidElement(Child) && Child?.type === SidebarSection) {
+        const { position } = Child.props;
+        switch (position) {
+          case SidebarSectionPosition.TOP:
+            result.top.push(Child);
+            break;
+          case SidebarSectionPosition.BOTTOM:
+            result.bottom.push(Child);
+            break;
         }
-      });
-      return result;
-    }, [children]);
+      }
+    });
+    return result;
+  }, [children]);
   return result;
 }
 

package/src/components/ra-forms/LongForm/Tab.tsx

@@ -1,20 +1,20 @@
-import _ from 'lodash';
+import { useAddItem, useErrorCount, useRemoveItem } from '@/components/ra-forms/LongForm/Provider';
+import { useIsActive } from '@/components/ra-forms/LongForm/hooks';
+import { IItem } from '@/components/ra-forms/LongForm/types';
+import { getId } from '@/components/ra-forms/LongForm/utils';
+import { Optional } from '@/types';
 import { Box } from '@mui/material';
-import { getId } from './utils';
-import { IItem } from './types';
-import { Optional } from 'src/types';
-import { useAddItem, useRemoveItem, useErrorCount } from './Provider';
-import { useFormState } from 'react-hook-form';
-import { useIsActive } from './hooks';
+import _ from 'lodash';
 import React, { Children, ReactElement, ReactNode, cloneElement, isValidElement, useEffect, useMemo } from 'react';
+import { useFormState } from 'react-hook-form';
 
 type IBaseItemProps = React.PropsWithChildren<Optional<IItem, 'id' | 'index'> & { sources: Array<string> }>;
 type ITabProps = IBaseItemProps;
 type IGroupProps = IBaseItemProps;
 
 function walkChildren(children: ReactNode = [], callback: (el: ReactElement) => void) {
-  const _children = _.isArray(children) ? children : [children],
-    validChildren = _.filter(_children, (child) => isValidElement(child));
+  const _children = _.isArray(children) ? children : [children];
+  const validChildren = _.filter(_children, (child) => isValidElement(child));
   _.each(validChildren, (child) => {
     callback(child);
     walkChildren(child?.props?.children ?? [], callback);
@@ -22,14 +22,14 @@ function walkChildren(children: ReactNode = [], callback: (el: ReactElement) =>
 }
 
 function BaseItem(props: IBaseItemProps) {
-  const { errors } = useFormState(),
-    countErrors = useErrorCount(),
-    { label, icon, badge, index = 0, children } = props,
-    id = getId(props),
-    addItem = useAddItem(),
-    removeItem = useRemoveItem(),
-    visible = useIsActive(id),
-    sources: Array<string> = [];
+  const { errors } = useFormState();
+  const countErrors = useErrorCount();
+  const { label, icon, badge, index = 0, children } = props;
+  const id = getId(props);
+  const addItem = useAddItem();
+  const removeItem = useRemoveItem();
+  const visible = useIsActive(id);
+  const sources: Array<string> = [];
 
   if (countErrors) {
     if (props.sources !== undefined) {
@@ -64,7 +64,7 @@ function BaseItem(props: IBaseItemProps) {
     return () => {
       removeItem(id);
     };
-  }, [id]);
+  }, [id, removeItem]);
 
   /* All tabs are rendered (not only the one in focus), to allow validation
   on tabs not in focus. The tabs receive a `hidden` property, which they'll
@@ -74,8 +74,8 @@ function BaseItem(props: IBaseItemProps) {
 }
 
 function Group(props: IGroupProps) {
-  const filteredChildren = useBaseItemChildren(props),
-    groupId = getId(props);
+  const filteredChildren = useBaseItemChildren(props);
+  const groupId = getId(props);
   return (
     <BaseItem {...props} id={groupId}>
       {Children.map(filteredChildren, (Child) => {
@@ -91,17 +91,17 @@ function Tab(props: ITabProps) {
 }
 
 function useBaseItemChildren(props: React.PropsWithChildren): Array<React.FunctionComponentElement<IBaseItemProps>> {
-  const { children } = props,
-    result = useMemo<Array<React.FunctionComponentElement<IBaseItemProps>>>(
-      () =>
-        //@ts-ignore
-        _.chain(Children.toArray(children))
-          .filter((Child) => isValidElement(Child) && (Child?.type === Tab || Child?.type === Group))
-          .map((Child: React.FunctionComponentElement<IBaseItemProps>, index) => cloneElement(Child, { index: index }))
-          .value(),
-      [children]
-    );
+  const { children } = props;
+  const result = useMemo<Array<React.FunctionComponentElement<IBaseItemProps>>>(
+    () =>
+      //@ts-ignore
+      _.chain(Children.toArray(children))
+        .filter((Child) => isValidElement(Child) && (Child?.type === Tab || Child?.type === Group))
+        .map((Child: React.FunctionComponentElement<IBaseItemProps>, index) => cloneElement(Child, { index: index }))
+        .value(),
+    [children]
+  );
   return result;
 }
 
-export { Tab, Group, useBaseItemChildren };
+export { Group, Tab, useBaseItemChildren };

package/src/components/ra-forms/LongForm/hooks.tsx

@@ -1,6 +1,6 @@
-import { getChildren, isChild } from './utils';
-import { IItem } from './types';
-import { useActiveItem, useFormRootPath, useItems } from './Provider';
+import { useActiveItem, useFormRootPath, useItems } from '@/components/ra-forms/LongForm/Provider';
+import { IItem } from '@/components/ra-forms/LongForm/types';
+import { getChildren, isChild } from '@/components/ra-forms/LongForm/utils';
 import { useCallback, useMemo } from 'react';
 import { useLocation, useNavigate } from 'react-router';
 
@@ -14,22 +14,22 @@ function useIsActive(id: string): boolean {
 }
 
 function useChildren(id?: string): Array<IItem> {
-  const items = useItems(),
-    children = useMemo(() => getChildren(id, items), [items, id]);
+  const items = useItems();
+  const children = useMemo(() => getChildren(id, items), [items, id]);
 
   return children;
 }
 
 function useNavigateForm(): (id: string) => void {
-  const formRootPath = useFormRootPath(),
-    { search } = useLocation(),
-    navigate = useNavigate(),
-    navigateSection = useCallback(
-      (id: string) => {
-        navigate(`${formRootPath}/${id}${search}`);
-      },
-      [formRootPath, navigate]
-    );
+  const formRootPath = useFormRootPath();
+  const { search } = useLocation();
+  const navigate = useNavigate();
+  const navigateSection = useCallback(
+    (id: string) => {
+      navigate(`${formRootPath}/${id}${search}`);
+    },
+    [formRootPath, navigate, search]
+  );
 
   return navigateSection;
 }

package/src/components/ra-forms/LongForm/index.ts

@@ -1,10 +1,25 @@
-import { BaseForm } from './BaseForm';
-import { Content } from './Content';
-import { Form } from './Form';
-import { NavMenu, NavMenuItem, useNavMenuItem } from './NavMenu';
-import { Provider, useActiveItem, useItems, useSyncWithLocation, useErrorCount, useSetActiveItem, useAddItem, useRemoveItem, useFormRootPath } from './Provider';
-import { Sidebar, SidebarSection, SidebarSectionPosition, useSidebarChildren } from './Sidebar';
-import { Tab, Group, useBaseItemChildren } from './Tab';
+import {
+  Provider,
+  useActiveItem,
+  useAddItem,
+  useErrorCount,
+  useFormRootPath,
+  useItems,
+  useRemoveItem,
+  useSetActiveItem,
+  useSyncWithLocation
+} from './Provider';
+import { BaseForm } from '@/components/ra-forms/LongForm/BaseForm';
+import { Content } from '@/components/ra-forms/LongForm/Content';
+import { Form } from '@/components/ra-forms/LongForm/Form';
+import { NavMenu, NavMenuItem, useNavMenuItem } from '@/components/ra-forms/LongForm/NavMenu';
+import {
+  Sidebar,
+  SidebarSection,
+  SidebarSectionPosition,
+  useSidebarChildren
+} from '@/components/ra-forms/LongForm/Sidebar';
+import { Group, Tab, useBaseItemChildren } from '@/components/ra-forms/LongForm/Tab';
 
 type IForm = typeof Form & {
   BaseForm: typeof BaseForm;
@@ -53,4 +68,4 @@ DefaultForm.Tab = Tab;
 DefaultForm.Group = Group;
 DefaultForm.useBaseItemChildren = useBaseItemChildren;
 
-export default DefaultForm;
+export { DefaultForm as LongForm };

package/src/components/ra-forms/LongForm/utils.ts

@@ -1,14 +1,14 @@
-import _ from 'lodash';
 import { IItem } from './types';
-import { Optional } from '../../../types';
+import { Optional } from '@/types';
+import _ from 'lodash';
 
 function getId(data: Optional<Pick<IItem, 'id' | 'label'>, 'id'>): string {
   return data.id ?? data.label;
 }
 
 function isChild(parentId: string, childId: string): boolean {
-  const regExpString = `^${parentId}.`.replaceAll('.', '\\.'),
-    regExp = new RegExp(regExpString, 'g');
+  const regExpString = `^${parentId}.`.replaceAll('.', '\\.');
+  const regExp = new RegExp(regExpString, 'g');
   return childId.match(regExp) !== null;
 }
 
@@ -22,13 +22,13 @@ function getLevel(id: string): number {
 }
 
 function getChildren(id: string | undefined, items: Array<IItem>) {
-  const level = id !== undefined ? getLevel(id) : 0,
-    children = _.chain(items)
-      .filter((item) => (id !== undefined ? isChild(id, item.id) : true))
-      .filter((item) => getLevel(item.id) === level + 1)
-      .value();
+  const level = id !== undefined ? getLevel(id) : 0;
+  const children = _.chain(items)
+    .filter((item) => (id !== undefined ? isChild(id, item.id) : true))
+    .filter((item) => getLevel(item.id) === level + 1)
+    .value();
 
   return children;
 }
 
-export { getId, isChild, getItemsIds, getLevel, getChildren };
+export { getChildren, getId, getItemsIds, getLevel, isChild };

package/src/components/ra-forms/Show.tsx

@@ -1,5 +1,6 @@
-import { Show as RaShow, ShowProps } from 'react-admin';
+/* eslint-disable filenames/match-regex */
 import { styled } from '@mui/material/styles';
+import { Show as RaShow, ShowProps } from 'react-admin';
 
 const StyledShow = styled(RaShow, { slot: 'root' })(({ theme }) => ({
   '&>.MuiToolbar-root:first-of-type': {
@@ -16,8 +17,9 @@ const StyledShow = styled(RaShow, { slot: 'root' })(({ theme }) => ({
   }
 }));
 
-export function Show(props: ShowProps): JSX.Element {
+function Show(props: ShowProps): JSX.Element {
   // @ts-ignore
   return <StyledShow {...props} />;
 }
-export default Show;
+export { Show };
+export type { ShowProps };

package/src/components/ra-forms/SimpleForm.tsx

@@ -1,3 +1,8 @@
+import { ActionsMenu } from '@/components/ActionsMenu';
+import { MainCard } from '@/components/MainCard';
+import { Toolbar } from '@/components/ra-forms/Toolbar';
+import { useResourceTitle } from '@/hooks';
+import { styled, useTheme } from '@mui/system';
 import {
   DeleteWithConfirmButton,
   SimpleForm as RaSimpleForm,
@@ -5,11 +10,6 @@ import {
   SaveButton,
   useRecordContext
 } from 'react-admin';
-import { styled, useTheme } from '@mui/system';
-import { useResourceTitle } from '../../hooks';
-import ActionsMenu from '../ActionsMenu';
-import MainCard from '../MainCard';
-import Toolbar from './Toolbar';
 
 const StyledSimpleForm = styled(RaSimpleForm, { slot: 'Root' })(({ theme }: { theme: any }) => ({
   [theme.breakpoints.down('sm')]: {
@@ -17,15 +17,7 @@ const StyledSimpleForm = styled(RaSimpleForm, { slot: 'Root' })(({ theme }: { th
   }
 }));
 
-export type SimpleFormProps = RaSimpleFormProps & {
-  modal?: boolean;
-  content?: boolean;
-  subheader?: string | React.ReactNode;
-  title?: string | React.ReactNode;
-  secondary?: string | React.ReactNode;
-};
-
-export function SimpleForm({
+function SimpleForm({
   title,
   modal = false,
   // @ts-ignore
@@ -62,7 +54,7 @@ export function SimpleForm({
           paddingRight: theme.spacing(2.5),
           paddingBottom: theme.spacing(2.5),
           paddingTop: modal ? theme.spacing(2.5) : 0,
-          borderTop: modal ? `1px solid ${theme.palette.divider}` : undefined,
+          borderTop: modal ? `1px solid ${theme.palette.divider}` : undefined
         }
       }}
       border={!modal}
@@ -73,3 +65,14 @@ export function SimpleForm({
     </MainCard>
   );
 }
+
+type SimpleFormProps = RaSimpleFormProps & {
+  modal?: boolean;
+  content?: boolean;
+  subheader?: string | React.ReactNode;
+  title?: string | React.ReactNode;
+  secondary?: string | React.ReactNode;
+};
+
+export { SimpleForm };
+export type { SimpleFormProps };

package/src/components/ra-forms/SimpleFormIterator.tsx

@@ -1,5 +1,6 @@
-import { SimpleFormIterator as RaSimpleFormIterator } from 'react-admin';
+/* eslint-disable filenames/match-regex */
 import { styled } from '@mui/material/styles';
+import { SimpleFormIterator as RaSimpleFormIterator, SimpleFormIteratorProps } from 'react-admin';
 
 // @ts-ignore
 const StyledSimpleFormIterator = styled(RaSimpleFormIterator, { root: 'root' })(({ theme }) => ({
@@ -24,7 +25,8 @@ const StyledSimpleFormIterator = styled(RaSimpleFormIterator, { root: 'root' })(
   }
 }));
 
-export function SimpleFormIterator(props: any): JSX.Element {
+function SimpleFormIterator(props: SimpleFormIteratorProps): JSX.Element {
   return <StyledSimpleFormIterator {...props} />;
 }
-export default SimpleFormIterator;
+export { SimpleFormIterator };
+export type { SimpleFormIteratorProps } from 'react-admin';

package/src/components/ra-forms/TabbedForm.tsx

@@ -1,28 +1,19 @@
+import { ActionsMenu } from '@/components/ActionsMenu';
+import { MainCard } from '@/components/MainCard';
+import { Toolbar } from '@/components/ra-forms/Toolbar';
+import { useResourceTitle } from '@/hooks';
 import { Box, useTheme } from '@mui/material';
 import { styled } from '@mui/system';
 import {
+  DeleteWithConfirmButton,
   TabbedForm as RaTabbedForm,
   TabbedFormProps as RaTabbedFormProps,
-  DeleteWithConfirmButton,
   SaveButton,
   TabProps
 } from 'react-admin';
-import { useResourceTitle } from '../../hooks';
-import ActionsMenu from '../ActionsMenu';
-import MainCard from '../MainCard';
-import Toolbar from './Toolbar';
 
-export type TabbedFormProps = RaTabbedFormProps & {
-  modal?: boolean;
-  content?: boolean;
-  subheader?: string | React.ReactNode;
-  title?: string | React.ReactNode | boolean;
-  secondary?: string | React.ReactNode;
-  /**
-   * Indicates if the form should have no padding.
-   * If true, the form will have no padding and you will be **responsible** for adding padding to the form's tabs.
-   */
-  noPadding?: boolean;
+type StackTabProps = TabProps & {
+  children: React.ReactNode;
 };
 
 const StyledTabbedForm = styled(RaTabbedForm, { slot: 'Root' })(({ theme }: { theme: any }) => ({
@@ -41,7 +32,7 @@ function TabbedFormWithNoPadding({ children }: { children: React.ReactNode }): J
   return <>{children}</>;
 }
 
-export function TabbedForm(props: TabbedFormProps): JSX.Element {
+function TabbedForm(props: TabbedFormProps): JSX.Element {
   const {
     title: _title,
     modal,
@@ -98,8 +89,17 @@ export function TabbedForm(props: TabbedFormProps): JSX.Element {
     </MainCard>
   );
 }
-export type StackTabProps = TabProps & {
-  children: React.ReactNode;
+type TabbedFormProps = RaTabbedFormProps & {
+  modal?: boolean;
+  content?: boolean;
+  subheader?: string | React.ReactNode;
+  title?: string | React.ReactNode | boolean;
+  secondary?: string | React.ReactNode;
+  /**
+   * Indicates if the form should have no padding.
+   * If true, the form will have no padding and you will be **responsible** for adding padding to the form's tabs.
+   */
+  noPadding?: boolean;
 };
 
 /**
@@ -117,4 +117,5 @@ function TabStack({ children, ...props }: StackTabProps): JSX.Element {
 TabbedForm.Tab = RaTabbedForm.Tab;
 TabbedForm.TabStack = TabStack;
 
-export default TabbedForm;
+export { TabbedForm };
+export type { TabbedFormProps };