fix(AnalyticalTable - TypeScript): use better type for tableHooks (#5300)

Author: Lukas742

packages/main/src/components/AnalyticalTable/hooks/useA11y.ts

@@ -1,5 +1,6 @@
 import type { KeyboardEventHandler } from 'react';
 import { AnalyticalTableSelectionBehavior, AnalyticalTableSelectionMode } from '../../../enums/index.js';
+import type { ReactTableHooks } from '../types/index.js';
 
 interface UpdatedCellProptypes {
   onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
@@ -95,7 +96,7 @@ const setHeaderProps = (headerProps, { column, instance }) => {
   return [headerProps, { isFiltered, ...updatedProps }];
 };
 
-export const useA11y = (hooks) => {
+export const useA11y = (hooks: ReactTableHooks) => {
   hooks.getCellProps.push(setCellProps);
   hooks.getHeaderProps.push(setHeaderProps);
 };

packages/main/src/components/AnalyticalTable/hooks/useDragAndDrop.ts

@@ -1,4 +1,5 @@
 import { enrichEventWithDetails } from '@ui5/webcomponents-react-base';
+import type { ReactTableHooks } from '../types/index.js';
 
 const getColumnId = (column) => {
   return typeof column.accessor === 'string' ? column.accessor : column.id;
@@ -72,6 +73,6 @@ function getHeaderProps(
   ];
 }
 
-export function useColumnDragAndDrop(hooks) {
+export function useColumnDragAndDrop(hooks: ReactTableHooks) {
   hooks.getHeaderProps.push(getHeaderProps);
 }

packages/main/src/components/AnalyticalTable/hooks/useDynamicColumnWidths.ts

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import { AnalyticalTableScaleWidthMode } from '../../../enums/index.js';
 import { DEFAULT_COLUMN_WIDTH } from '../defaults/Column/index.js';
-import type { AnalyticalTableColumnDefinition } from '../types/index.js';
+import type { AnalyticalTableColumnDefinition, ReactTableHooks } from '../types/index.js';
 
 const ROW_SAMPLE_SIZE = 20;
 const MAX_WIDTH = 700;
@@ -416,7 +416,7 @@ const columns = (columns: AnalyticalTableColumnDefinition[], { instance }) => {
   });
 };
 
-export const useDynamicColumnWidths = (hooks) => {
+export const useDynamicColumnWidths = (hooks: ReactTableHooks) => {
   hooks.columns.push(columns);
   hooks.columnsDeps.push(columnsDeps);
 };

packages/main/src/components/AnalyticalTable/hooks/useKeyboardNavigation.ts

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useRef } from 'react';
 import { actions } from 'react-table';
+import type { ReactTableHooks } from '../types/index.js';
 import { getLeafHeaders } from '../util/index.js';
 
 const CELL_DATA_ATTRIBUTES = ['visibleColumnIndex', 'columnIndex', 'rowIndex', 'visibleRowIndex'];
@@ -359,7 +360,7 @@ const setHeaderProps = (headerProps, { instance: { dispatch }, column }) => {
   return [headerProps, { onKeyDown: handleKeyDown }];
 };
 
-export const useKeyboardNavigation = (hooks) => {
+export const useKeyboardNavigation = (hooks: ReactTableHooks) => {
   hooks.getTableProps.push(useGetTableProps);
   hooks.getHeaderProps.push(setHeaderProps);
 };

packages/main/src/components/AnalyticalTable/hooks/usePopIn.ts

@@ -1,3 +1,5 @@
+import type { ReactTableHooks } from '../types/index.js';
+
 const popInVisibleColumnsDeps = (deps, { instance: { state } }) => [...deps, state.tableClientWidth];
 
 const popInVisibleColumns = (cols, { instance }) => {
@@ -22,7 +24,7 @@ const popInVisibleColumns = (cols, { instance }) => {
   );
 };
 
-export const usePopIn = (hooks) => {
+export const usePopIn = (hooks: ReactTableHooks) => {
   hooks.visibleColumns.push(popInVisibleColumns);
   hooks.visibleColumnsDeps.push(popInVisibleColumnsDeps);
 };

packages/main/src/components/AnalyticalTable/hooks/useResizeColumnsConfig.ts

@@ -1,3 +1,5 @@
+import type { ReactTableHooks } from '../types/index.js';
+
 const useGetResizerProps = (props) => {
   return {
     ...props,
@@ -8,7 +10,7 @@ const useGetResizerProps = (props) => {
   };
 };
 
-export const useResizeColumnsConfig = (hooks) => {
+export const useResizeColumnsConfig = (hooks: ReactTableHooks) => {
   hooks.getResizerProps.push(useGetResizerProps);
 };
 

packages/main/src/components/AnalyticalTable/hooks/useRowHighlight.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { ValueState } from '../../../enums/index.js';
+import type { ReactTableHooks } from '../types/index.js';
 
 const baseStyles = {
   width: '100%',
@@ -67,7 +68,7 @@ const columns = (currentColumns, { instance }) => {
   ];
 };
 
-export const useRowHighlight = (hooks) => {
+export const useRowHighlight = (hooks: ReactTableHooks) => {
   hooks.columns.push(columns);
   hooks.columnsDeps.push(columnsDeps);
   hooks.visibleColumnsDeps.push(visibleColumnsDeps);

packages/main/src/components/AnalyticalTable/hooks/useRowNavigationIndicator.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { ReactTableHooks } from '../types/index.js';
 
 const baseStyles = {
   width: '100%',
@@ -67,7 +68,7 @@ const columns = (currentColumns, { instance }) => {
   ];
 };
 
-export const useRowNavigationIndicators = (hooks) => {
+export const useRowNavigationIndicators = (hooks: ReactTableHooks) => {
   hooks.columns.push(columns);
   hooks.columnsDeps.push(columnsDeps);
   hooks.visibleColumnsDeps.push(visibleColumnsDeps);

packages/main/src/components/AnalyticalTable/hooks/useRowSelectionColumn.tsx

@@ -3,6 +3,7 @@ import type { CSSProperties } from 'react';
 import React from 'react';
 import { AnalyticalTableSelectionBehavior, AnalyticalTableSelectionMode } from '../../../enums/index.js';
 import { CheckBox } from '../../../webComponents/CheckBox/index.js';
+import type { ReactTableHooks } from '../types/index.js';
 
 const customCheckBoxStyling = {
   verticalAlign: 'middle',
@@ -181,7 +182,7 @@ const setToggleRowSelectedProps = (props, { instance: { webComponentsReactProper
   return [props, { className: classes.checkBox, title: undefined }];
 };
 
-export const useRowSelectionColumn = (hooks) => {
+export const useRowSelectionColumn = (hooks: ReactTableHooks) => {
   hooks.getCellProps.push(getCellProps);
   hooks.getHeaderProps.push(headerProps);
   hooks.getToggleRowSelectedProps.push(setToggleRowSelectedProps);

packages/main/src/components/AnalyticalTable/hooks/useSelectionChangeCallback.ts

@@ -1,8 +1,9 @@
 import { enrichEventWithDetails } from '@ui5/webcomponents-react-base';
 import { useEffect } from 'react';
 import { AnalyticalTableSelectionMode } from '../../../enums/index.js';
+import type { ReactTableHooks } from '../types/index.js';
 
-export const useSelectionChangeCallback = (hooks) => {
+export const useSelectionChangeCallback = (hooks: ReactTableHooks) => {
   hooks.useControlledState.push((state, { instance }) => {
     const { selectedRowPayload, selectedRowIds, filters, globalFilter } = state;
     const { rowsById, preFilteredRowsById, webComponentsReactProperties, dispatch } = instance;

packages/main/src/components/AnalyticalTable/hooks/useSingleRowStateSelection.ts

@@ -1,5 +1,6 @@
 import { enrichEventWithDetails } from '@ui5/webcomponents-react-base';
 import { AnalyticalTableSelectionBehavior, AnalyticalTableSelectionMode } from '../../../enums/index.js';
+import type { ReactTableHooks } from '../types/index.js';
 
 const getRowProps = (rowProps, { row, instance }) => {
   const { webComponentsReactProperties, toggleRowSelected, selectedFlatRows, dispatch } = instance;
@@ -69,7 +70,7 @@ const getRowProps = (rowProps, { row, instance }) => {
   ];
 };
 
-export const useSingleRowStateSelection = (hooks) => {
+export const useSingleRowStateSelection = (hooks: ReactTableHooks) => {
   hooks.getRowProps.push(getRowProps);
 };
 useSingleRowStateSelection.pluginName = 'useSingleRowStateSelection';

packages/main/src/components/AnalyticalTable/hooks/useStyling.ts

@@ -1,5 +1,6 @@
 import type { CSSProperties } from 'react';
 import { AnalyticalTableSelectionBehavior, AnalyticalTableSelectionMode } from '../../../enums/index.js';
+import type { ReactTableHooks } from '../types/index.js';
 import { getSubRowsByString, resolveCellAlignment } from '../util/index.js';
 
 const getHeaderGroupProps = (headerGroupProps, { instance }) => {
@@ -106,7 +107,7 @@ const getCellProps = (cellProps, { cell: { column }, instance }) => {
   ];
 };
 
-export const useStyling = (hooks) => {
+export const useStyling = (hooks: ReactTableHooks) => {
   hooks.getHeaderGroupProps.push(getHeaderGroupProps);
   hooks.getHeaderProps.push(getHeaderProps);
   hooks.getRowProps.push(getRowProps);

packages/main/src/components/AnalyticalTable/hooks/useToggleRowExpand.ts

@@ -1,4 +1,5 @@
 import { enrichEventWithDetails } from '@ui5/webcomponents-react-base';
+import type { ReactTableHooks } from '../types/index.js';
 
 const getToggleRowExpandedProps = (rowProps, { row, instance, userProps }) => {
   const { dispatch, manualGroupBy } = instance;
@@ -56,7 +57,7 @@ const getToggleRowExpandedProps = (rowProps, { row, instance, userProps }) => {
   ];
 };
 
-export const useToggleRowExpand = (hooks) => {
+export const useToggleRowExpand = (hooks: ReactTableHooks) => {
   hooks.getToggleRowExpandedProps.push(getToggleRowExpandedProps);
 };
 useToggleRowExpand.pluginName = 'useToggleRowExpand';

packages/main/src/components/AnalyticalTable/hooks/useVisibleColumnsWidth.ts

@@ -1,9 +1,11 @@
+import type { ReactTableHooks } from '../types/index.js';
+
 const getVisibleColumnsWidth = (instance) => {
   const visibleColumnsWidth = instance.visibleColumns.map((item) => item.totalWidth);
   Object.assign(instance, { visibleColumnsWidth });
 };
 
-export const useVisibleColumnsWidth = (hooks) => {
+export const useVisibleColumnsWidth = (hooks: ReactTableHooks) => {
   hooks.useInstance.push(getVisibleColumnsWidth);
 };
 useVisibleColumnsWidth.pluginName = 'useVisibleColumnsWidth';

packages/main/src/components/AnalyticalTable/pluginHooks/useIndeterminateRowSelection.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect } from 'react';
 import { AnalyticalTableSelectionBehavior, AnalyticalTableSelectionMode } from '../../../enums/index.js';
+import type { ReactTableHooks } from '../types/index.js';
 
 type onIndeterminateChange = (e: {
   indeterminateRowsById: Record<string | number, boolean>;
@@ -146,7 +147,7 @@ export const useIndeterminateRowSelection = (onIndeterminateChange?: onIndetermi
     }, [indeterminateRows]);
   };
 
-  const useIndeterminate = (hooks) => {
+  const useIndeterminate = (hooks: ReactTableHooks) => {
     hooks.getToggleRowSelectedProps.push(toggleRowProps);
     hooks.stateReducers.push(stateReducer);
     hooks.useInstanceAfterData.push(useInstanceAfterData);

packages/main/src/components/AnalyticalTable/pluginHooks/useManualRowSelect.ts

@@ -1,6 +1,7 @@
 'use client';
 
 import { useEffect } from 'react';
+import type { ReactTableHooks } from '../types/index.js';
 
 /**
  * A plugin hook for manual row selection.
@@ -19,7 +20,7 @@ export const useManualRowSelect = (manualRowSelectedKey = 'isSelected') => {
     }, [flatRows, manualRowSelectedKey]);
   };
 
-  const manualRowSelect = (hooks) => {
+  const manualRowSelect = (hooks: ReactTableHooks) => {
     hooks.useInstanceAfterData.push(instanceAfterData);
   };
 

packages/main/src/components/AnalyticalTable/pluginHooks/useOnColumnResize.ts

@@ -2,6 +2,7 @@
 
 import { debounce } from '@ui5/webcomponents-react-base';
 import { useEffect, useRef } from 'react';
+import type { ReactTableHooks } from '../types/index.js';
 
 interface useOnColumnResizeOptions {
   /**
@@ -67,7 +68,7 @@ export const useOnColumnResize = (callback: useOnColumnResizeFunc, options?: use
     }, [columnResizing, options?.liveUpdate, columns]);
   };
 
-  const useOnColumnResizeHooks = (hooks) => {
+  const useOnColumnResizeHooks = (hooks: ReactTableHooks) => {
     hooks.useFinalInstance.push(useInstance);
   };
 

packages/main/src/components/AnalyticalTable/pluginHooks/useOrderedMultiSort.ts

@@ -5,8 +5,10 @@
  *
  * @param {string[]} orderedIds - Array of column IDs, defining the sorting priority.
  */
+import type { ReactTableHooks } from '../types/index.js';
+
 export const useOrderedMultiSort = (orderedIds: string[]) => {
-  const useOrderedMultiSortPlugin = (hooks) => {
+  const useOrderedMultiSortPlugin = (hooks: ReactTableHooks) => {
     hooks.stateReducers.push((newState, action) => {
       if (action.type === 'toggleSortBy') {
         if (newState.sortBy.length <= 1) {

packages/main/src/components/AnalyticalTable/pluginHooks/useRowDisableSelection.tsx

@@ -2,6 +2,7 @@ import { enrichEventWithDetails } from '@ui5/webcomponents-react-base';
 import React from 'react';
 import { AnalyticalTableSelectionBehavior, AnalyticalTableSelectionMode } from '../../../enums/index.js';
 import { CheckBox } from '../../../webComponents/CheckBox/index.js';
+import type { ReactTableHooks } from '../types/index.js';
 import { getBy } from '../util/index.js';
 
 type DisableRowSelectionType = string | ((row: Record<any, any>) => boolean);
@@ -130,7 +131,7 @@ export const useRowDisableSelection = (disableRowSelection: DisableRowSelectionT
     return rowProps;
   };
 
-  const useDisableSelectionRow = (hooks) => {
+  const useDisableSelectionRow = (hooks: ReactTableHooks) => {
     hooks.getHeaderProps.push(headerProps);
     hooks.getRowProps.push(getRowProps);
     hooks.columns.push(columns);

packages/main/src/components/AnalyticalTable/types/index.ts

@@ -1,5 +1,4 @@
 import type { ComponentType, ReactNode, Ref } from 'react';
-import type { PluginHook } from 'react-table';
 import type {
   AnalyticalTableScaleWidthMode,
   AnalyticalTableScrollMode,
@@ -17,6 +16,46 @@ import type {
 } from '../../../enums/index.js';
 import type { CommonProps } from '../../../interfaces/index.js';
 
+export interface ReactTableHooks {
+  useOptions: any[];
+  stateReducers: any[];
+  useControlledState: any[];
+  columns: any[];
+  columnsDeps: any[];
+  allColumns: any[];
+  allColumnsDeps: any[];
+  accessValue: any[];
+  materializedColumns: any[];
+  materializedColumnsDeps: any[];
+  useInstanceAfterData: any[];
+  visibleColumns: any[];
+  visibleColumnsDeps: any[];
+  headerGroups: any[];
+  headerGroupsDeps: any[];
+  useInstanceBeforeDimensions: any[];
+  useInstance: any[];
+  prepareRow: any[];
+  getTableProps: any[];
+  getTableBodyProps: any[];
+  getHeaderGroupProps: any[];
+  getFooterGroupProps: any[];
+  getHeaderProps: any[];
+  getFooterProps: any[];
+  getRowProps: any[];
+  getCellProps: any[];
+  useFinalInstance: any[];
+  getToggleHiddenProps: any[];
+  getToggleHideAllColumnsProps: any[];
+  getGroupByToggleProps: any[];
+  getSortByToggleProps: any[];
+  getToggleAllRowsExpandedProps: any[];
+  getToggleRowExpandedProps: any[];
+  getToggleRowSelectedProps: any[];
+  getToggleAllRowsSelectedProps: any[];
+  getToggleAllPageRowsSelectedProps: any[];
+  getResizerProps: any[];
+}
+
 export interface AnalyticalTableState {
   columnOrder: string[];
   columnResizing: Record<string, any>;
@@ -463,7 +502,7 @@ export interface AnalyticalTablePropTypes extends Omit<CommonProps, 'title'> {
   /**
    * You can use this prob to add custom hooks to the table.
    */
-  tableHooks?: PluginHook<any>[];
+  tableHooks?: ((hooks?: ReactTableHooks) => void)[];
   /**
    * Defines the key for nested rows.
    *