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

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

@@ -1,25 +1,25 @@
-import _ from 'lodash';
-import { Avatar } from '../../@extended';
+import { Avatar } from '@/components/@extended/Avatar';
+import { useThemeConfig } from '@/components/Layout/ThemeProvider';
+import { useSetActiveItem, useSyncWithLocation } from '@/components/ra-forms/LongForm/Provider';
+import { useChildren, useIsActive, useNavigateForm } from '@/components/ra-forms/LongForm/hooks';
+import { IItem } from '@/components/ra-forms/LongForm/types';
+import { getLevel } from '@/components/ra-forms/LongForm/utils';
+import { ExpandLess, ExpandMore } from '@mui/icons-material';
 import {
+  Badge,
   Card,
   Collapse,
   List,
   ListItem,
-  ListItemProps,
-  ListItemIcon,
-  ListItemText,
-  ListItemButton,
   ListItemAvatar,
-  Badge
+  ListItemButton,
+  ListItemIcon,
+  ListItemProps,
+  ListItemText
 } from '@mui/material';
-import { ExpandLess, ExpandMore } from '@mui/icons-material';
-import { getLevel } from './utils';
-import { IItem } from './types';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useChildren, useIsActive, useNavigateForm } from './hooks';
-import { useSetActiveItem, useSyncWithLocation } from './Provider';
-import { useThemeConfig } from '../../../hooks';
+import _ from 'lodash';
 import { useTranslate } from 'ra-core';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 
 type IBaseNavMenuItemProps = React.PropsWithChildren<{
   id: string;
@@ -53,20 +53,20 @@ function NavMenu() {
 }
 
 function NavMenuItem(props: INavMenuItemProps) {
-  const translate = useTranslate() ?? _.identity,
-    navMenuItemProps = useNavMenuItem(props),
-    { selected, label, icon, onClick: _onClick, badge, items, isGroup, level, errors = 0 } = navMenuItemProps,
-    { spacing } = useThemeConfig(),
-    [open, setOpen] = useState(selected),
-    onClick = useCallback(
-      (e: React.MouseEvent<HTMLDivElement>) => {
-        setOpen(!open);
-        _onClick(e);
-      },
-      [_onClick, open]
-    ),
-    hasIcon = icon !== undefined,
-    listItemProps = _.omit(props, ['label', 'icon', 'selected', 'badge']);
+  const translate = useTranslate() ?? _.identity;
+  const navMenuItemProps = useNavMenuItem(props);
+  const { selected, label, icon, onClick: _onClick, badge, items, isGroup, level, errors = 0 } = navMenuItemProps;
+  const { spacing } = useThemeConfig();
+  const [open, setOpen] = useState(selected);
+  const onClick = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      setOpen(!open);
+      _onClick(e);
+    },
+    [_onClick, open]
+  );
+  const hasIcon = icon !== undefined;
+  const listItemProps = _.omit(props, ['label', 'icon', 'selected', 'badge']);
 
   useEffect(() => {
     if (selected && !open) {
@@ -77,31 +77,37 @@ function NavMenuItem(props: INavMenuItemProps) {
   return (
     <>
       <ListItem {...listItemProps} disablePadding>
-        <ListItemButton selected={selected && !isGroup} onClick={onClick} sx={{ pl: spacing * level }}>
-          {hasIcon && <ListItemIcon>{icon}</ListItemIcon>}
+        {/* @ts-ignore */}
+        <ListItemButton selected={selected ? !isGroup : null} onClick={onClick} sx={{ pl: spacing * level }}>
+          {hasIcon ? <ListItemIcon>{icon}</ListItemIcon> : null}
           <ListItemText
             inset={!hasIcon}
             primary={
               errors === 0 ? (
                 translate(label)
               ) : (
-                <Badge variant="dot" color="error" sx={{ '& > .MuiBadge-badge': { transform: 'scale(1) translate(125%, 0)' } }}>
+                <Badge
+                  variant="dot"
+                  color="error"
+                  sx={{ '& > .MuiBadge-badge': { transform: 'scale(1) translate(125%, 0)' } }}
+                >
                   {translate(label)}
                 </Badge>
               )
             }
           />
-          {badge && (
+          {badge ? (
             <ListItemAvatar>
+              {/* @ts-ignore */}
               <Avatar type="filled" size="xs" color={badge.color ?? 'default'}>
                 {badge.content}
               </Avatar>
             </ListItemAvatar>
-          )}
-          {isGroup && (open ? <ExpandLess /> : <ExpandMore />)}
+          ) : null}
+          {isGroup ? open ? <ExpandLess /> : <ExpandMore /> : null}
         </ListItemButton>
       </ListItem>
-      {isGroup && (
+      {isGroup ? (
         <Collapse in={open} timeout="auto">
           <List>
             {_.map(items, (item: IItem, index: number) => {
@@ -109,47 +115,51 @@ function NavMenuItem(props: INavMenuItemProps) {
             })}
           </List>
         </Collapse>
-      )}
+      ) : null}
     </>
   );
 }
 
-function useNavMenuItem(
-  item: INavMenuItemProps
-): IItem & { selected: boolean; onClick: React.MouseEventHandler<HTMLDivElement>; items: Array<IItem>; isGroup: boolean; level: number } {
-  const { id } = item,
-    isActive = useIsActive(id),
-    level = getLevel(id),
-    navigate = useNavigateForm(),
-    syncWithLocation = useSyncWithLocation(),
-    setActiveItem = useSetActiveItem(),
-    items = useChildren(id),
-    isGroup = !_.isEmpty(items),
-    onClick = useCallback(
-      (e: React.MouseEvent<HTMLDivElement>) => {
-        if (!isGroup) {
-          if (syncWithLocation) {
-            navigate(item.id);
-          } else {
-            setActiveItem(item.id);
-          }
+function useNavMenuItem(item: INavMenuItemProps): IItem & {
+  selected: boolean;
+  onClick: React.MouseEventHandler<HTMLDivElement>;
+  items: Array<IItem>;
+  isGroup: boolean;
+  level: number;
+} {
+  const { id } = item;
+  const isActive = useIsActive(id);
+  const level = getLevel(id);
+  const navigate = useNavigateForm();
+  const syncWithLocation = useSyncWithLocation();
+  const setActiveItem = useSetActiveItem();
+  const items = useChildren(id);
+  const isGroup = !_.isEmpty(items);
+  const onClick = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (!isGroup) {
+        if (syncWithLocation) {
+          navigate(item.id);
+        } else {
+          setActiveItem(item.id);
         }
-        if (_.isFunction(item.onClick)) {
-          item.onClick(e);
-        }
-      },
-      [setActiveItem, navigate, item, syncWithLocation, isGroup]
-    ),
-    navMenuItem = useMemo(() => {
-      return {
-        ...item,
-        selected: isActive,
-        onClick: onClick,
-        items: items,
-        isGroup: isGroup,
-        level: level
-      };
-    }, [item, isActive, onClick, items, isGroup]);
+      }
+      if (_.isFunction(item.onClick)) {
+        item.onClick(e);
+      }
+    },
+    [setActiveItem, navigate, item, syncWithLocation, isGroup]
+  );
+  const navMenuItem = useMemo(() => {
+    return {
+      ...item,
+      selected: isActive,
+      onClick: onClick,
+      items: items,
+      isGroup: isGroup,
+      level: level
+    };
+  }, [item, isActive, onClick, items, isGroup, level]);
 
   return navMenuItem;
 }

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 };