@applica-software-guru/react-admin 1.2.120 → 1.2.121

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applica-software-guru/react-admin",
-  "version": "1.2.120",
+  "version": "1.2.121",
   "private": false,
   "repository": {
     "type": "git",

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

@@ -62,8 +62,12 @@ function reducer(state: IState, action: IAction): IState {
       return _.includes(getItemsIds(state.items), payload) ? _.extend(newState, { activeItem: payload }) : newState;
     case ActionType.ADD_ITEM: {
       const id = payload.id,
-        items = _.reject(newState.items, (item: IItem) => item.id === id);
-      items.push(payload);
+        items = _.chain(newState.items)
+          .clone()
+          .reject((item: IItem) => item.id === id)
+          .concat([payload])
+          .orderBy((item) => item.index)
+          .value();
       _.extend(newState, { items: items });
       if (newState.activeItem === undefined) {
         _.extend(newState, { activeItem: payload.id });
@@ -72,7 +76,10 @@ function reducer(state: IState, action: IAction): IState {
     }
     case ActionType.REMOVE_ITEM: {
       const id = _.isString(payload) ? payload : payload.id,
-        items = _.reject(newState.items, (item: IItem) => item.id === id);
+        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 });

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

@@ -7,12 +7,12 @@ import { IItem } from './types';
 import { useIsActive } from './hooks';
 import { getId } from './utils';
 
-type IBaseItemProps = React.PropsWithChildren<Optional<IItem, 'id'>>;
+type IBaseItemProps = React.PropsWithChildren<Optional<IItem, 'id' | 'index'>>;
 type ITabProps = IBaseItemProps;
 type IGroupProps = IBaseItemProps;
 
 function BaseItem(props: IBaseItemProps) {
-  const { label, icon, badge } = props,
+  const { label, icon, badge, index = 0 } = props,
     id = getId(props),
     addItem = useAddItem(),
     removeItem = useRemoveItem(),
@@ -21,6 +21,7 @@ function BaseItem(props: IBaseItemProps) {
   useEffect(() => {
     addItem({
       id: id,
+      index: index,
       label: label,
       icon: icon,
       badge: badge
@@ -28,7 +29,7 @@ function BaseItem(props: IBaseItemProps) {
     return () => {
       removeItem(id);
     };
-  }, [addItem, removeItem, label, icon, id, badge]);
+  }, [addItem, removeItem, label, icon, id, badge, index]);
 
   /* 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
@@ -57,8 +58,12 @@ function Tab(props: ITabProps) {
 function useBaseItemChildren(props: React.PropsWithChildren): Array<React.FunctionComponentElement<IBaseItemProps>> {
   const { children } = props,
     result = useMemo<Array<React.FunctionComponentElement<IBaseItemProps>>>(
-      //@ts-ignore
-      () => _.filter(Children.toArray(children), (Child) => isValidElement(Child) && (Child?.type === Tab || Child?.type === Group)),
+      () =>
+        //@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;

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

@@ -8,6 +8,7 @@ type Disposition = {
 
 type IItem = {
   id: string;
+  index: number;
   label: string;
   icon?: React.ReactNode;
   badge?: {