fix(TypeScript): tablieList => item is always ExtendedNode<TableNode> instead of TableNode

Author: rwieruch

.storybook/stories/Types/data.story.mdx

@@ -13,8 +13,11 @@ export type TableNode = {
   [prop: string]: any,
 };
 
-export type ExtendedTableNode = TableNode & {
-  ancestors: TableNode[],
+export type ExtendedNode<T extends TableNode> = T & {
+  treeXLevel?: number;
+  treeYLevel?: number;
+  parentNode?: ExtendedNode<T> | Nullish;
+  ancestors?: ExtendedNode<T>[];
 };
 
 export type Data = {

src/common/util/modifiers.ts

@@ -1,9 +1,9 @@
-import { TableNode, Features } from '@table-library/react-table-library/types/table';
+import { TableNode, Features, ExtendedNode } from '@table-library/react-table-library/types/table';
 
 export const applyModifiers =
   ({ sort, pagination, tree }: Features) =>
   (nodes: TableNode[]) => {
-    let modifiedNodes = [...nodes];
+    let modifiedNodes: ExtendedNode<TableNode>[] = [...nodes];
 
     modifiedNodes = sort ? sort.modifier(modifiedNodes) : modifiedNodes;
 

src/common/util/tree/fromTreeToList.ts

@@ -1,15 +1,8 @@
 import { Nullish } from '@table-library/react-table-library/types/common';
-import { Data, TableNode } from '@table-library/react-table-library/types/table';
+import { Data, TableNode, ExtendedNode } from '@table-library/react-table-library/types/table';
 
 import { hasLeaves } from './hasLeaves';
 
-type ExtendedNode = {
-  treeXLevel: number;
-  treeYLevel: number;
-  parentNode: TableNode;
-  ancestors: TableNode[];
-};
-
 export const fromTreeToList = <T extends TableNode>(nodes: T[] | Nullish): T[] =>
   (nodes || []).reduce((acc: T[], value: T) => {
     acc = acc.concat(value); // eslint-disable-line no-param-reassign
@@ -27,9 +20,9 @@ export const fromTreeToListExtended = (
   treeIds: string[],
   treeXLevel = 0,
   treeYLevel = 0,
-  parentNode: (TableNode & ExtendedNode) | Nullish,
-): (TableNode & ExtendedNode)[] =>
-  (nodes || []).reduce((acc: (TableNode & ExtendedNode)[], value: TableNode) => {
+  parentNode: ExtendedNode<TableNode> | Nullish,
+): ExtendedNode<TableNode>[] =>
+  (nodes || []).reduce((acc: ExtendedNode<TableNode>[], value: TableNode) => {
     let listNode;
 
     if (value.nodes) {
@@ -41,14 +34,17 @@ export const fromTreeToListExtended = (
     const extendedNode = {
       treeXLevel,
       treeYLevel,
-      parentNode: parentNode || data,
-      ancestors: parentNode ? [parentNode, ...parentNode.ancestors] : [parentNode || data],
-    } as ExtendedNode;
+      // TODO: data needs to be explicitly typed here for this edge case of root
+      parentNode: (parentNode || data) as ExtendedNode<TableNode>,
+      ancestors: (parentNode
+        ? [parentNode, ...(parentNode?.ancestors ?? [])]
+        : [parentNode || data]) as ExtendedNode<TableNode>[],
+    };
 
     listNode = {
       ...listNode,
       ...extendedNode,
-    } as TableNode & ExtendedNode;
+    } as ExtendedNode<TableNode>;
 
     acc = acc.concat(listNode); // eslint-disable-line no-param-reassign
 

src/pagination/usePagination.ts

@@ -5,7 +5,7 @@ import { useSyncControlledState } from '@table-library/react-table-library/commo
 import { useSyncRefState } from '@table-library/react-table-library/common/util/useSyncRefState';
 
 import { Action, State, StateAndChange } from '@table-library/react-table-library/types/common';
-import { Data, TableNode } from '@table-library/react-table-library/types/table';
+import { Data, ExtendedNode, TableNode } from '@table-library/react-table-library/types/table';
 import {
   Pages,
   Pagination,
@@ -139,7 +139,7 @@ const usePagination = (
     getPageBoundaries,
   };
 
-  const modifier = (nodes: TableNode[]): TableNode[] => {
+  const modifier = (nodes: TableNode[]): ExtendedNode<TableNode>[] => {
     if (mergedOptions.isServer) {
       return nodes;
     }

src/sort/useSort.tsx

@@ -8,7 +8,7 @@ import IconChevronSingleUp from '@table-library/react-table-library/common/icons
 import IconChevronSingleUpDown from '@table-library/react-table-library/common/icons/IconChevronSingleUpDown';
 
 import { Action, State, StateAndChange } from '@table-library/react-table-library/types/common';
-import { Data, TableNode } from '@table-library/react-table-library/types/table';
+import { Data, ExtendedNode, TableNode } from '@table-library/react-table-library/types/table';
 import {
   Sort,
   SortOptions,
@@ -163,7 +163,7 @@ const useSort = (
 
   const stateAndGetters = { ...state, sortFn };
 
-  const modifier = (nodes: TableNode[]): TableNode[] => {
+  const modifier = (nodes: TableNode[]): ExtendedNode<TableNode>[] => {
     if (mergedOptions.isServer) {
       return nodes;
     }

src/tree/useTree.tsx

@@ -17,6 +17,7 @@ import {
   Features,
   FeatureProps,
   RowProps,
+  ExtendedNode,
 } from '@table-library/react-table-library/types/table';
 import {
   Tree,
@@ -120,7 +121,7 @@ const useTree = (
     },
   };
 
-  const modifier = (nodes: TableNode[]): TableNode[] => {
+  const modifier = (nodes: TableNode[]): ExtendedNode<TableNode>[] => {
     if (mergedOptions.isServer) {
       return nodes;
     }

src/types/common.ts

@@ -1,3 +1,5 @@
+import { ExtendedNode, TableNode } from './table';
+
 export type Nullish = null | undefined;
 
 export type Action = {
@@ -21,7 +23,7 @@ export type StateAndChange = {
   onChange?: MiddlewareFunction;
 };
 
-export type Modifier = (nodes: any[]) => any[];
+export type Modifier = (nodes: TableNode[]) => TableNode[] | ExtendedNode<TableNode>[];
 
 type IdReducerFunctionsOptions = {
   isCarryForward?: boolean;

src/types/table.ts

@@ -85,6 +85,13 @@ export type TableNode = {
   [prop: string]: any;
 };
 
+export type ExtendedNode<T extends TableNode> = T & {
+  treeXLevel?: number;
+  treeYLevel?: number;
+  parentNode?: ExtendedNode<T> | Nullish;
+  ancestors?: ExtendedNode<T>[];
+};
+
 export type Data = {
   pageInfo?: any;
   nodes: TableNode[];