@axinom/mosaic-ui 0.35.0-rc.7 → 0.35.0-rc.9

package/src/components/DynamicDataList/DynamicDataList.tsx

@@ -1,15 +1,18 @@
 import clsx from 'clsx';
-import React, { PropsWithChildren, useEffect, useRef, useState } from 'react';
-import { CSSTransition, TransitionGroup } from 'react-transition-group';
+import React, { PropsWithChildren, useCallback } from 'react';
+import {
+  DragDropContext,
+  Draggable,
+  DraggableProvided,
+  DropResult,
+  Droppable,
+} from 'react-beautiful-dnd';
 import { OptionalObjectSchema } from 'yup/lib/object';
 import { noop } from '../../helpers/utils';
 import { Data } from '../../types/data';
 import { ActionData } from '../Actions';
 import { ObjectSchemaDefinition } from '../FormStation';
-import {
-  DynamicListColumn,
-  DynamicListElevationOptions,
-} from './DynamicDataList.model';
+import { DynamicListColumn } from './DynamicDataList.model';
 import classes from './DynamicDataList.scss';
 import {
   DynamicListDataEntry,
@@ -17,6 +20,10 @@ import {
 } from './DynamicListDataEntry/DynamicListDataEntry';
 import { DynamicListHeader } from './DynamicListHeader/DynamicListHeader';
 import { DynamicListRow } from './DynamicListRow/DynamicListRow';
+import { uuid } from './helpers/generateId';
+import { useColumnDefs } from './helpers/useColumnDefs';
+import { useDataHandler } from './helpers/useDataHandler';
+import { useRowAnimation } from './helpers/useRowAnimation';
 
 export interface DynamicDataListProps<T extends Data> {
   /**
@@ -34,7 +41,7 @@ export interface DynamicDataListProps<T extends Data> {
   minimumWidth?: string;
   /** Header row height */
   headerRowHeight?: string;
-  /** List row height */
+  /** List row height (minimum height is 50px) */
   listRowHeight?: string;
   /** List row action button and checkbox size (default: '50px') */
   listRowActionSize?: string;
@@ -44,15 +51,13 @@ export interface DynamicDataListProps<T extends Data> {
   horizontalTextAlign?: 'left' | 'right' | 'center';
   /** Vertical alignment of text */
   verticalTextAlign?: 'start' | 'center' | 'end';
-  /** If set, indicates the component has an error and will display this prop as the error message (not implemented yet) */
-  error?: string | undefined;
   /** Property that contains the value used in reordering the list (default: undefined) */
   positionPropertyName?: keyof T;
   /** If sets, sets the label for the position column (default: 'Position') */
   positionLabel?: string;
   /** Whether or not rows can be repositioned (default: true) */
   allowReordering?: boolean;
-  /** Determines if the Add and Delete action buttons are rendered (default: true) */
+  /** @deprecated Determines if the Add and Delete action buttons are rendered (default: true) */
   allowAddAndRemove?: boolean;
   /** Determines if data rows can be dragged for repositioning (default: true) */
   allowRowDragging?: boolean;
@@ -80,6 +85,7 @@ export interface DynamicDataListProps<T extends Data> {
   rowClassNameProvider?: (data: T) => string;
   /** Raised when the list has changed */
   onChange?: (list: T[]) => void;
+  /** Provide inline actions which are available through '...' context menu */
   inlineMenuActions?: (data: T) => ActionData[];
 }
 
@@ -95,7 +101,6 @@ export interface DynamicDataListProps<T extends Data> {
 export const DynamicDataList = <T extends Data>({
   columns = [],
   value = [],
-  error,
   showHeader = true,
   minimumWidth = '500px',
   columnGap,
@@ -108,7 +113,6 @@ export const DynamicDataList = <T extends Data>({
   positionPropertyName,
   positionLabel,
   allowReordering = true,
-  allowAddAndRemove = true,
   allowRowDragging = true,
   allowNewData = false,
   customDataEntry: CustomDataEntry,
@@ -123,184 +127,130 @@ export const DynamicDataList = <T extends Data>({
   rowClassNameProvider,
   inlineMenuActions,
 }: PropsWithChildren<DynamicDataListProps<T>>): JSX.Element => {
-  const positionKey = useRef<keyof T | undefined>(positionPropertyName);
-
-  const { columnSizes } = useColumnDefs<T>(
-    columns,
-    allowReordering,
-    allowAddAndRemove,
-    allowRowDragging,
-    positionKey.current,
-    !!inlineMenuActions,
-  );
-
-  // TODO: Error handling
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const errorMsg: string | undefined = error;
-
-  const [list, setList] = useState<T[]>(value);
-  useEffect(() => {
-    if (positionPropertyName) {
-      value.sort(
-        (a, b) =>
-          Number(a[positionPropertyName]) - Number(b[positionPropertyName]),
-      );
-    }
-    setList([...value]); // Set list to new value. Mainly used by 'undo' to reset the list
-  }, [positionPropertyName, value]);
-
-  const [isDragging, setIsDragging] = useState<boolean>(false);
-
-  const [currentRowPosition, setCurrentRowPosition] = useState<number>(); // position of the row being dragged
-
-  const [shouldAnimate, setShouldAnimate] = useState<boolean>(false);
-
-  // Position for new data entry. defaults to 1 if list is empty
-  const { newDataPosition } = usePositions<T>(
-    list,
-    allowNewData,
-    positionKey.current,
-  );
+  const { columnSizes, showActionColumn, showPositionColumn } =
+    useColumnDefs<T>(
+      columns,
+      allowReordering,
+      allowNewData,
+      allowRowDragging,
+      positionPropertyName,
+      !!inlineMenuActions,
+    );
 
-  const { canAddItems } = useCanAddItems(
-    allowNewData,
-    allowAddAndRemove,
-    list.length,
-    maxItemLimit,
-  );
+  const { addItem, removeItem, canAddItems, items, nextPosition } =
+    useDataHandler(
+      value,
+      positionPropertyName,
+      maxItemLimit,
+      allowNewData,
+      onChange,
+      onAddTransformData,
+    );
 
   const customStyles = {
     gridRowGap: rowGap,
     minWidth: minimumWidth,
   } as React.CSSProperties;
 
-  /** Resources used for dragging:
-   * https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API
-   * https://www.youtube.com/watch?v=jfYWwQrtzzY
-   * https://www.youtube.com/watch?v=Q1PYQPK9TaM
-   */
-
-  const onDragStartHandler = (
-    event: React.DragEvent<HTMLDivElement>,
-    position: number,
-  ): void => {
-    setIsDragging(true);
-    if (positionKey.current !== undefined) {
-      setCurrentRowPosition(position);
-    }
-  };
-
-  const onDropHandler = (
-    event: React.DragEvent<HTMLDivElement>,
-    newPosition: number,
-    elevation: DynamicListElevationOptions,
-  ): void => {
-    // Exit if currentRowPosition is not set or if currentRowPosition is newPosition
-    if (
-      currentRowPosition !== undefined &&
-      currentRowPosition !== newPosition
-    ) {
-      onRepositionHandler(currentRowPosition, newPosition, 'drag', elevation);
-    }
-  };
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const onDragEndHandler = (event: React.DragEvent<HTMLDivElement>): void => {
-    // clean up dragging flow
-    setIsDragging(false);
-    setCurrentRowPosition(undefined); // reset position
-  };
-
-  // TODO: rows should expand in height with data... discuss this with team lead
-
-  const onRepositionHandler = (
-    currentRowPosition: number,
-    newPosition: number,
-    eventType: 'drag' | 'input',
-    elevation?: DynamicListElevationOptions,
-  ): void => {
-    if (positionKey.current === undefined) {
-      return;
-    }
-
-    const posKey = positionKey.current;
-
-    setList(() => {
-      const newList = calculateNewList(
-        list,
-        posKey,
-        currentRowPosition,
-        newPosition,
-        eventType,
-        elevation,
-      );
+  const onPositionInputChangedHandler = useCallback(
+    (currentPosition: number, newPosition: number) => {
+      if (currentPosition !== newPosition && positionPropertyName) {
+        const oldItem = items.find(
+          (item) => item[positionPropertyName] === currentPosition,
+        );
 
-      onChange(newList);
-      return newList;
-    });
-  };
+        if (oldItem) {
+          removeItem(oldItem);
+          addItem({ ...oldItem, [positionPropertyName]: newPosition });
+        }
+      }
+    },
+    [addItem, items, positionPropertyName, removeItem],
+  );
 
-  /**
-   * Removes an item from the list array using the item's index
-   * @param data Row Data
-   * @param idx index in list array
-   */
-  const onDeleteItemHandler = (data: T, idx: number): void => {
-    setList((prevState) => {
-      // if positioning is active
-      if (
-        positionKey.current !== undefined &&
-        (allowReordering || allowRowDragging)
-      ) {
-        const newList = removeItemFromList(prevState, positionKey.current, idx);
+  const onDragEndHandler = useCallback(
+    (result: DropResult) => {
+      if (result.destination && positionPropertyName) {
+        const oldItem = items[result.source.index];
 
-        onChange(newList);
-        return newList;
+        const nextPosition = items[result.destination.index].position;
 
-        // if there is no positioning, just return the list with the item removed
-      } else {
-        const newList = prevState.filter(
-          (item: T, index: number) => index !== idx,
-        );
+        const newItem = {
+          ...oldItem,
+          [positionPropertyName]: nextPosition,
+        };
 
-        onChange(newList);
-        return newList;
+        removeItem(oldItem);
+        addItem(newItem);
       }
-    });
-  };
+    },
+    [addItem, items, positionPropertyName, removeItem],
+  );
 
-  /**
-   * Adds an item to the list array. All new entries are placed at the end.
-   * @param data Row Data
-   */
-  const onAddItemHandler = (data: T): void => {
-    setShouldAnimate(true);
-    setList((prevState) => {
-      const newList = [...prevState, onAddTransformData(data)];
+  const { AnimatedRow, setLastAddedItem, setShouldAnimate } =
+    useRowAnimation<T>();
 
-      onChange(newList);
-      return newList;
-    });
-  };
+  const onAddItemHandler = useCallback(
+    (data: T) => {
+      addItem(data);
+      setLastAddedItem(data);
+      setShouldAnimate(true);
+    },
+    [addItem, setLastAddedItem, setShouldAnimate],
+  );
+
+  const getRow = (
+    data: T,
+    idx: number,
+    provided?: DraggableProvided,
+    isDragging = false,
+  ): JSX.Element => (
+    <AnimatedRow data={data} key={idx}>
+      <DynamicListRow<T>
+        key={idx}
+        columns={columns}
+        data={data}
+        columnSizes={columnSizes}
+        columnGap={columnGap}
+        rowHeight={listRowHeight}
+        actionSize={listRowActionSize}
+        horizontalTextAlign={horizontalTextAlign}
+        verticalTextAlign={verticalTextAlign}
+        allowRemove={allowNewData}
+        positionKey={positionPropertyName}
+        allowDragging={allowRowDragging}
+        onActionClicked={(data) => removeItem(data)}
+        onPositionInputChanged={onPositionInputChangedHandler}
+        inlineMenuActions={inlineMenuActions}
+        rowClassNameProvider={rowClassNameProvider}
+        disabled={disabled}
+        provided={provided}
+        dragging={isDragging}
+        showActionColumn={showActionColumn}
+        showPositionColumn={showPositionColumn}
+      />
+    </AnimatedRow>
+  );
 
   const DynamicListDataEntryProps: DynamicListDataEntryProps<T> = {
     columns,
     columnSizes,
     columnGap,
-    positionKey: positionKey.current,
+    positionKey: positionPropertyName,
     rowHeight: listRowHeight,
     actionSize: listRowActionSize,
     horizontalTextAlign,
     verticalTextAlign,
-    allowAdd: allowAddAndRemove,
+    allowAdd: allowNewData,
     allowReordering,
     allowDragging: allowRowDragging,
-    newDataPosition,
+    newDataPosition: nextPosition,
     rowValidationSchema,
     defaultValuesForNewData,
     sticky: stickyHeader,
     showHeader,
     disabled,
+    showPositionColumn,
     onActionClicked: onAddItemHandler,
   };
 
@@ -323,12 +273,12 @@ export const DynamicDataList = <T extends Data>({
           rowHeight={headerRowHeight}
           horizontalTextAlign={horizontalTextAlign}
           verticalTextAlign={verticalTextAlign}
-          allowReordering={Boolean(
-            allowReordering && positionKey.current !== undefined,
-          )}
-          positionKey={positionKey.current}
+          allowReordering={allowReordering}
+          positionKey={positionPropertyName}
           positionLabel={positionLabel}
           sticky={stickyHeader}
+          allowDragging={allowRowDragging}
+          showPositionColumn={showPositionColumn}
         />
       )}
       {canAddItems &&
@@ -337,443 +287,26 @@ export const DynamicDataList = <T extends Data>({
         ) : (
           <DynamicListDataEntry<T> {...DynamicListDataEntryProps} />
         ))}
-      <TransitionGroup component={null}>
-        {list.map((item: T, idx: number) => (
-          <CSSTransition
-            key={idx}
-            timeout={{ enter: 1000, exit: 10 }}
-            classNames={{
-              enter: clsx(shouldAnimate && classes.rowEnter),
-              enterActive: clsx(shouldAnimate && classes.rowEnterActive),
-              exit: classes.rowExit,
-              exitActive: classes.rowExitActive,
-            }}
-            onEnter={(node: HTMLElement, _isAppearing: boolean) => {
-              shouldAnimate &&
-                node.scrollIntoView({ behavior: 'smooth', block: 'start' });
-            }}
-            onEntered={() => {
-              setShouldAnimate(false);
-            }}
-          >
-            <DynamicListRow<T>
-              key={idx}
-              columns={columns}
-              data={item}
-              columnSizes={columnSizes}
-              columnGap={columnGap}
-              rowHeight={listRowHeight}
-              actionSize={listRowActionSize}
-              horizontalTextAlign={horizontalTextAlign}
-              verticalTextAlign={verticalTextAlign}
-              allowRemove={allowAddAndRemove}
-              allowReordering={allowReordering}
-              positionKey={positionKey.current}
-              allowDragging={allowRowDragging}
-              dragging={isDragging}
-              onDragStart={onDragStartHandler}
-              onDrop={onDropHandler}
-              onDragEnd={onDragEndHandler}
-              onActionClicked={(data) => onDeleteItemHandler(data, idx)}
-              onPositionInputChanged={(currentPosition, newPosition) =>
-                onRepositionHandler(currentPosition, newPosition, 'input')
-              }
-              inlineMenuActions={inlineMenuActions}
-              rowClassNameProvider={rowClassNameProvider}
-              disabled={disabled}
-            />
-          </CSSTransition>
-        ))}
-      </TransitionGroup>
+      {allowReordering ? (
+        <DragDropContext onDragEnd={onDragEndHandler}>
+          <Droppable droppableId={uuid()}>
+            {(provided) => (
+              <div ref={provided.innerRef} {...provided.droppableProps}>
+                {items.map((item: T, idx: number) => (
+                  <Draggable draggableId={String(idx)} index={idx} key={idx}>
+                    {(provided, snapshot) =>
+                      getRow(item, idx, provided, snapshot.isDragging)
+                    }
+                  </Draggable>
+                ))}
+                {provided.placeholder}
+              </div>
+            )}
+          </Droppable>
+        </DragDropContext>
+      ) : (
+        items.map((item: T, idx: number) => getRow(item, idx))
+      )}
     </div>
   );
 };
-
-/**
- * Generates a combined string of all columns.columnSize values, to be used as CSS value
- * Also produces property key which is used for positioning
- * @param columns The list of columns that should be used
- * @returns a string that consists of defined column sizes and a position key that maps to a data property
- */
-const useColumnDefs = function <T extends Data>(
-  columns: DynamicListColumn<T>[],
-  allowReordering: boolean,
-  allowAddAndRemove: boolean,
-  allowRowDragging: boolean,
-  positionKey?: keyof T,
-  showInlineMenu?: boolean,
-): {
-  readonly columnSizes: string;
-} {
-  let positionColumn = '';
-  let actionColumn = '';
-  const columnDefinition = columns
-    .filter((columns) => columns.propertyName !== positionKey) // do not allow a column to be created for 'position'
-    .reduce((prev, current) => `${prev} ${current.size ?? '1fr'}`, '')
-    .trim();
-
-  if (allowReordering) {
-    if (allowRowDragging === true) {
-      positionColumn = '100px ';
-    } else {
-      positionColumn = '60px ';
-    }
-  }
-
-  if (allowAddAndRemove) {
-    actionColumn = ' 50px';
-  }
-
-  if (showInlineMenu) {
-    actionColumn = ' 50px';
-  }
-
-  const columnSizes = `${positionColumn}${columnDefinition}${actionColumn}`;
-
-  return {
-    columnSizes,
-  } as const;
-};
-
-/**
- * Determines whether the the Data Entry row is shown
- * @param allowNewData is new data is allowed
- * @param allowAddAndRemove is the action button shown
- * @param currentItemAmt current amout of items in the list
- * @param maxItemAmtLimit maximum amount of items that be added
- */
-const useCanAddItems = (
-  allowNewData: boolean,
-  allowAddAndRemove: boolean,
-  currentItemAmt: number,
-  maxItemAmtLimit?: number,
-): {
-  readonly canAddItems: boolean;
-} => {
-  const [canAddItems, setCanAddItems] = useState<boolean>(
-    allowNewData === true &&
-      allowAddAndRemove === true &&
-      maxItemAmtLimit === undefined
-      ? true
-      : maxItemAmtLimit !== undefined && currentItemAmt < maxItemAmtLimit
-      ? true
-      : false,
-  );
-
-  useEffect(() => {
-    if (
-      allowNewData === true &&
-      allowAddAndRemove === true &&
-      maxItemAmtLimit === undefined
-    ) {
-      setCanAddItems(true);
-    } else if (
-      maxItemAmtLimit !== undefined &&
-      currentItemAmt < maxItemAmtLimit
-    ) {
-      setCanAddItems(true);
-    } else {
-      setCanAddItems(false);
-    }
-  }, [allowNewData, allowAddAndRemove, currentItemAmt, maxItemAmtLimit]);
-
-  return {
-    canAddItems,
-  } as const;
-};
-
-/**
- * Returns position info from the list array
- * @param list data array
- * @param allowNewData whether or not new data can be entered
- * @param positionKey key from data object that holds the position value
- */
-const usePositions = function <T extends Data>(
-  list: T[],
-  allowNewData: boolean,
-  positionKey: keyof T | undefined,
-): {
-  readonly firstPosition: number;
-  readonly lastPosition: number;
-  readonly newDataPosition: number;
-} {
-  const [firstPosition, setFirstPosition] = useState<number>(
-    // find the first position in the list array or fall back to 1
-    allowNewData && list.length > 0 && positionKey !== undefined
-      ? list[0][positionKey]
-      : 1,
-  );
-  const [lastPosition, setLastPostion] = useState<number>(
-    // find the last position in the list array or fall back to 1
-    allowNewData && list.length > 0 && positionKey !== undefined
-      ? list.slice(-1)[0][positionKey]
-      : 1,
-  );
-
-  const [newDataPosition, setNewDataPosition] = useState<number>(
-    // set initial position to last item position + 1 or fall back to 1
-    allowNewData && list.length > 0 && positionKey !== undefined
-      ? list.slice(-1)[0][positionKey] + 1
-      : 1,
-  );
-
-  useEffect(() => {
-    if (allowNewData && positionKey !== undefined) {
-      // if the list is empty, set all positions to 1
-      if (list.length === 0) {
-        setFirstPosition(1);
-        setLastPostion(1);
-        setNewDataPosition(1);
-
-        // list is not empty, find and set positions
-      } else {
-        const firstDataRow: T = list[0];
-        setFirstPosition(firstDataRow[positionKey]);
-
-        const lastDataRow: T = list.slice(-1)[0];
-        setLastPostion(lastDataRow[positionKey]);
-
-        setNewDataPosition(lastDataRow[positionKey] + 1);
-      }
-    }
-  }, [allowNewData, list, positionKey]);
-
-  return {
-    firstPosition,
-    lastPosition,
-    newDataPosition,
-  } as const;
-};
-
-export const calculateNewList = <T,>(
-  list: T[],
-  posKey: keyof T,
-  currentRowPosition: number,
-  newPosition: number,
-  eventType: 'drag' | 'input',
-  elevation?: DynamicListElevationOptions,
-): T[] => {
-  let calculatedPos: number;
-  const allPositions: number[] = list.map((data) => Number(data[posKey]));
-
-  function findDragPosition(
-    newPos: number,
-    currentPos: number,
-    elevation?: DynamicListElevationOptions,
-  ): number {
-    let moveDir: 'up' | 'down';
-
-    if (newPos < currentPos) {
-      moveDir = 'up';
-    } else {
-      moveDir = 'down';
-    }
-    const newPosIndex = allPositions.indexOf(newPos);
-    const prevPos = allPositions[newPosIndex - 1];
-    const nextPos = allPositions[newPosIndex + 1];
-
-    if (moveDir === 'up') {
-      // below the first row
-      if (prevPos === undefined && elevation === 'below') {
-        return allPositions[0] + 1;
-      }
-
-      // top of the list
-      if (prevPos === undefined) {
-        return 1;
-      }
-
-      // place it below the previous position
-      if (elevation === 'above') {
-        return prevPos + 1;
-      }
-
-      // place it below the new pos
-      if (elevation === 'below') {
-        // same position
-        if (currentPos === nextPos) {
-          return currentPos;
-        } else {
-          // move underneath new position
-          return allPositions[newPosIndex] + 1;
-        }
-      }
-    } else {
-      // item placed in same position
-      if (prevPos === currentPos && elevation === 'above') {
-        return currentPos;
-      }
-
-      // place row in new position
-      if (elevation === 'above') {
-        return prevPos;
-      }
-
-      // place row in new position
-      if (elevation === 'below') {
-        return newPos;
-      }
-    }
-
-    // Fallback to the bottom of the list. This fallback is never meant to be reached.
-    return allPositions[allPositions.length - 1] ?? 1;
-  }
-
-  // item was moved via input
-  if (eventType === 'input') {
-    if (newPosition <= 0) {
-      calculatedPos = 1;
-    } else {
-      calculatedPos = newPosition;
-    }
-    // item was moved via drag
-  } else {
-    calculatedPos = findDragPosition(
-      newPosition,
-      currentRowPosition,
-      elevation,
-    );
-  }
-
-  // exit if the calculatedPos is also the current position
-  if (calculatedPos === currentRowPosition) {
-    return list;
-  }
-
-  const tempItems: T[] = [];
-
-  // item was moved up
-  if (calculatedPos < currentRowPosition) {
-    let isAfterNewPosGap = false;
-    for (const item of list) {
-      // all items before the new row position
-      if (Number(item[posKey]) < calculatedPos) {
-        tempItems.push(item);
-      }
-
-      // increment the existing row in the new row position
-      else if (Number(item[posKey]) === calculatedPos) {
-        tempItems.push({ ...item, [posKey]: Number(item[posKey]) + 1 });
-
-        // all items between new position and current position
-      } else if (
-        Number(item[posKey]) > calculatedPos &&
-        Number(item[posKey]) < currentRowPosition
-      ) {
-        // if the previous position is empty, don't increment anymore rows
-        if (!allPositions.includes(Number(item[posKey]) - 1)) {
-          isAfterNewPosGap = true;
-        }
-        if (!isAfterNewPosGap) {
-          tempItems.push({ ...item, [posKey]: Number(item[posKey]) + 1 });
-        } else {
-          tempItems.push(item);
-        }
-
-        // update current row being moved
-      } else if (Number(item[posKey]) === currentRowPosition) {
-        tempItems.push({ ...item, [posKey]: calculatedPos });
-      }
-
-      // all items after currentRowPosition
-      else {
-        tempItems.push(item);
-      }
-    }
-
-    // item was moved down
-  } else {
-    let isGapBeforeNewPos = false;
-    const reverseList = list.slice().reverse();
-
-    // loop through the reversed list
-    for (const item of reverseList) {
-      // push all items after new position without mutations
-      if (Number(item[posKey]) > calculatedPos) {
-        tempItems.push(item);
-      }
-
-      // all items between current position and new position
-      else if (
-        Number(item[posKey]) <= calculatedPos &&
-        Number(item[posKey]) > currentRowPosition
-      ) {
-        // if no gap is dectected, decrement item
-        if (!isGapBeforeNewPos) {
-          tempItems.push({ ...item, [posKey]: Number(item[posKey]) - 1 });
-
-          // if a gap was dectected, push the item without mutating
-        } else {
-          tempItems.push(item);
-        }
-
-        // check if the previous position is open
-        if (!allPositions.includes(Number(item[posKey]) - 1)) {
-          isGapBeforeNewPos = true;
-        }
-      }
-
-      // update current row being moved
-      else if (Number(item[posKey]) === currentRowPosition) {
-        tempItems.push({ ...item, [posKey]: calculatedPos });
-      }
-
-      // push all items before current row without mutations
-      else {
-        tempItems.push(item);
-      }
-    }
-  }
-
-  // IMPORTANT always sort the array by position key. All other logic expects the list to be sorted by position key if reordering is allowed.
-  return tempItems.sort((a, b) => Number(a[posKey]) - Number(b[posKey]));
-};
-
-/**
- * Responsible for removing an item from the list and updating all subsequent item's positions
- * @param list list array
- * @param posKey position
- * @param idx index of the item being removed
- */
-export const removeItemFromList = <T,>(
-  list: T[],
-  posKey: keyof T,
-  idx: number,
-): T[] => {
-  const allPositions: number[] = list.map((data) => Number(data[posKey]));
-
-  // position of the item removed
-  const removedPos = Number(list[idx][posKey]);
-
-  const listWithoutRemovedItem = list
-    .filter((item: T, index: number) => index !== idx)
-    .map((item) => item);
-
-  const tempItems: T[] = [];
-
-  let isGapReached = false;
-  for (const item of listWithoutRemovedItem) {
-    // push all items before the deleted row
-    if (Number(item[posKey]) < removedPos) {
-      tempItems.push(item);
-
-      // items after the deleted row
-    } else {
-      // if the position before is empty, a gap was reached
-      if (!allPositions.includes(Number(item[posKey]) - 1)) {
-        isGapReached = true;
-      }
-
-      // only continue decrementing subsequent items as long as no gap was reached
-      if (!isGapReached) {
-        tempItems.push({ ...item, [posKey]: Number(item[posKey]) - 1 });
-        // if a gap was reached, just push the rest of the items
-      } else {
-        tempItems.push(item);
-      }
-    }
-  }
-
-  // IMPORTANT always sort the array by position key. All other logic expects the list to be sorted by position key if reordering is allowed.
-  return tempItems.sort((a, b) => Number(a[posKey]) - Number(b[posKey]));
-};