feat(AnalyticalTable - TypeScript): improve instance & prop types (#6256)

BREAKING CHANGE: The internal table instance types were updated, leading
to stricter types, so depending on your implementation, you might
encounter ts-errors.

Author: Lukas742

docs/MigrationGuide.mdx

@@ -531,10 +531,14 @@ function MyComponent() {
 
 ### AnalyticalTable
 
+**TypeScript Changes:**
+
+The internal table instance types were updated, leading to stricter types, so depending on your implementation, you might encounter ts-errors.
+
 **Renamed or Changed Props:**
 
 - `alwaysShowSubComponent` has been removed, please use `subComponentsBehavior` with `AnalyticalTableSubComponentsBehavior.Visibe` instead.
-- The default value of `sortable` (`true`) has been removed. To allow sorting in your table please set `sorting` to `true` yourself.
+- The default value of `sortable` (`true`) has been removed. To allow sorting in your table please set `sortable` to `true` yourself.
 
 **Removed Props:**
 
@@ -547,13 +551,13 @@ function MyComponent() {
 ```js
 const handleOnRowSelect = (event) => {
   const { selectedRowIds, rowsById } = event.detail;
-  const selectedRowIdsArrayMapped = Object.keys(selectedRowIds).reduce((acc, key) => {
+  const selectedFlatRows = Object.keys(selectedRowIds).reduce((acc, key) => {
     if (selectedRowIds[key]) {
       acc.push(rowsById[key]);
     }
     return acc;
   }, []);
-  console.log(selectedRowIdsArrayMapped);
+  console.log(selectedFlatRows);
 };
 ```
 

packages/main/src/components/AnalyticalTable/TableBody/VirtualTableBody.tsx

@@ -1,12 +1,13 @@
 import type { Virtualizer } from '@tanstack/react-virtual';
 import { clsx } from 'clsx';
-import type { MutableRefObject, ReactNode } from 'react';
+import type { MutableRefObject } from 'react';
 import { useEffect, useMemo, useRef } from 'react';
 import { AnalyticalTableSubComponentsBehavior } from '../../../enums/index.js';
 import type {
   AnalyticalTablePropTypes,
   DivWithCustomScrollProp,
   ScrollToRefType,
+  TableInstance,
   TriggerScrollState
 } from '../types/index.js';
 import { getSubRowsByString } from '../util/index.js';
@@ -16,12 +17,12 @@ import { RowSubComponent as SubComponent } from './RowSubComponent.js';
 interface VirtualTableBodyProps {
   classes: Record<string, string>;
   prepareRow: (row: unknown) => void;
-  rows: Record<string, any>[];
+  rows: TableInstance['rows'];
   isTreeTable?: AnalyticalTablePropTypes['isTreeTable'];
   internalRowHeight: number;
   alternateRowColor?: AnalyticalTablePropTypes['alternateRowColor'];
   visibleColumns: Record<string, unknown>[];
-  renderRowSubComponent: (row?: Record<string, unknown>) => ReactNode;
+  renderRowSubComponent: AnalyticalTablePropTypes['renderRowSubComponent'];
   popInRowHeight: number;
   isRtl: boolean;
   markNavigatedRow?: AnalyticalTablePropTypes['markNavigatedRow'];

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

@@ -1,6 +1,6 @@
 import type { KeyboardEventHandler } from 'react';
 import { AnalyticalTableSelectionBehavior, AnalyticalTableSelectionMode } from '../../../enums/index.js';
-import type { ReactTableHooks } from '../types/index.js';
+import type { ReactTableHooks, TableInstance } from '../types/index.js';
 
 interface UpdatedCellProptypes {
   onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
@@ -10,7 +10,7 @@ interface UpdatedCellProptypes {
   role?: string;
 }
 
-const setCellProps = (cellProps, { cell, instance }) => {
+const setCellProps = (cellProps, { cell, instance }: { cell: TableInstance['cell']; instance: TableInstance }) => {
   const { column, row, value } = cell;
   const columnIndex = instance.visibleColumns.findIndex(({ id }) => id === column.id);
   const { alwaysShowSubComponent, renderRowSubComponent, translatableTexts, selectionMode, selectionBehavior } =
@@ -69,7 +69,10 @@ const setCellProps = (cellProps, { cell, instance }) => {
   return [cellProps, updatedCellProps];
 };
 
-const setHeaderProps = (headerProps, { column, instance }) => {
+const setHeaderProps = (
+  headerProps,
+  { column, instance }: { column: TableInstance['column']; instance: TableInstance }
+) => {
   const { translatableTexts } = instance.webComponentsReactProperties;
 
   if (!column) {

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

@@ -1,9 +1,9 @@
 import { enrichEventWithDetails } from '@ui5/webcomponents-react-base';
 import { DEFAULT_COLUMN_WIDTH } from '../defaults/Column/index.js';
-import type { ReactTableHooks } from '../types/index.js';
+import type { ReactTableHooks, TableInstance } from '../types/index.js';
 import { CELL_PADDING_PX } from './useDynamicColumnWidths.js';
 
-function setResizerProps(props, { instance, header }) {
+function setResizerProps(props, { instance, header }: { instance: TableInstance; header: TableInstance['header'] }) {
   const { dispatch, virtualRowsRange, rows, webComponentsReactProperties } = instance;
   const { onAutoResize, tableRef, isTreeTable } = webComponentsReactProperties;
   const { autoResizable, id: accessor } = header;
@@ -109,7 +109,7 @@ const setCellProps = (
     cell: {
       column: { id }
     }
-  }
+  }: { cell: TableInstance['cell'] }
 ) => {
   return [props, { ['data-column-id-cell']: id }];
 };

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

@@ -1,13 +1,13 @@
 import { enrichEventWithDetails } from '@ui5/webcomponents-react-base';
-import type { ReactTableHooks } from '../types/index.js';
+import type { ReactTableHooks, TableInstance } from '../types/index.js';
 
 const getColumnId = (column) => {
   return typeof column.accessor === 'string' ? column.accessor : column.id;
 };
 
 function getHeaderProps(
   props: Record<string, unknown>,
-  { instance: { dispatch, state, columns, setColumnOrder, webComponentsReactProperties } }
+  { instance: { dispatch, state, columns, setColumnOrder, webComponentsReactProperties } }: { instance: TableInstance }
 ) {
   const { columnOrder, columnResizing, isRtl, dndColumn } = state;
   const { onColumnsReorder } = webComponentsReactProperties;

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, ReactTableHooks } from '../types/index.js';
+import type { AnalyticalTableColumnDefinition, ReactTableHooks, TableInstance } from '../types/index.js';
 
 const ROW_SAMPLE_SIZE = 20;
 const MAX_WIDTH = 700;
@@ -206,7 +206,7 @@ const smartColumns = (columns: AnalyticalTableColumnDefinition[], instance, hidd
   });
 };
 
-const columns = (columns: AnalyticalTableColumnDefinition[], { instance }) => {
+const columns = (columns: TableInstance['columns'], { instance }: { instance: TableInstance }) => {
   if (!instance.state || !instance.rows) {
     return columns;
   }
@@ -231,7 +231,7 @@ const columns = (columns: AnalyticalTableColumnDefinition[], { instance }) => {
       }
       return column ?? false;
     })
-    .filter(Boolean);
+    .filter(Boolean) as TableInstance['columns'];
   if (scaleWidthMode === AnalyticalTableScaleWidthMode.Smart) {
     return smartColumns(columns, instance, hiddenColumns);
   }
@@ -296,7 +296,7 @@ const columns = (columns: AnalyticalTableColumnDefinition[], { instance }) => {
         }
         return false;
       })
-      .filter(Boolean);
+      .filter(Boolean) as number[];
 
     const fixedWidth = columnsWithFixedWidth.reduce((acc, val) => acc + val, 0);
     // check if columns are visible and table has width

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

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef } from 'react';
 import { actions } from 'react-table';
-import type { ReactTableHooks } from '../types/index.js';
+import type { ColumnType, ReactTableHooks, TableInstance } from '../types/index.js';
 import { getLeafHeaders } from '../util/index.js';
 
 const CELL_DATA_ATTRIBUTES = ['visibleColumnIndex', 'columnIndex', 'rowIndex', 'visibleRowIndex'];
@@ -62,7 +62,10 @@ const navigateFromActiveSubCompItem = (currentlyFocusedCell, e) => {
   setFocus(currentlyFocusedCell, recursiveSubComponentElementSearch(e.target));
 };
 
-const useGetTableProps = (tableProps, { instance: { webComponentsReactProperties, data, columns, state } }) => {
+const useGetTableProps = (
+  tableProps,
+  { instance: { webComponentsReactProperties, data, columns, state } }: { instance: TableInstance }
+) => {
   const { showOverlay, tableRef } = webComponentsReactProperties;
   const currentlyFocusedCell = useRef<HTMLDivElement>(null);
   const noData = data.length === 0;
@@ -171,7 +174,7 @@ const useGetTableProps = (tableProps, { instance: { webComponentsReactProperties
         switch (e.key) {
           case 'End': {
             e.preventDefault();
-            const visibleColumns: HTMLDivElement[] = tableRef.current.querySelector(
+            const visibleColumns = tableRef.current.querySelector(
               `div[data-component-name="AnalyticalTableHeaderRow"]`
             ).children;
 
@@ -346,7 +349,10 @@ function getPayload(e, column) {
   return { clientX, columnId, columnWidth, headerIdWidths };
 }
 
-const setHeaderProps = (headerProps, { instance: { dispatch }, column }) => {
+const setHeaderProps = (
+  headerProps,
+  { instance: { dispatch }, column }: { instance: TableInstance; column: ColumnType }
+) => {
   // resize col with keyboard
   const handleKeyDown = (e) => {
     if (typeof headerProps.onKeyDown === 'function') {

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

@@ -1,8 +1,11 @@
-import type { ReactTableHooks } from '../types/index.js';
+import type { ReactTableHooks, TableInstance } from '../types/index.js';
 
-const popInVisibleColumnsDeps = (deps, { instance: { state } }) => [...deps, state.tableClientWidth];
+const popInVisibleColumnsDeps = (deps, { instance: { state } }: { instance: TableInstance }) => [
+  ...deps,
+  state.tableClientWidth
+];
 
-const popInVisibleColumns = (cols, { instance }) => {
+const popInVisibleColumns = (cols, { instance }: { instance: TableInstance }) => {
   const { state, dispatch } = instance;
 
   const tableClientWidth = state.isScrollable

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

@@ -1,6 +1,6 @@
 import ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js';
 import { IndicationColor } from '../../../enums/index.js';
-import type { ReactTableHooks } from '../types/index.js';
+import type { ReactTableHooks, TableInstance } from '../types/index.js';
 
 const baseStyles = {
   width: '100%',
@@ -18,7 +18,7 @@ const HighlightColors = {
  */
 const Header = () => <div style={{ width: '6px' }} />;
 
-const Cell = (instance) => {
+const Cell = (instance: TableInstance) => {
   const { cell, webComponentsReactProperties } = instance;
   const styleClass = HighlightColors[cell?.value]
     ? webComponentsReactProperties.classes[HighlightColors[cell.value].toLowerCase()]
@@ -29,11 +29,17 @@ const Cell = (instance) => {
 /*
  * TABLE HOOKS
  */
-const columnsDeps = (deps, { instance: { webComponentsReactProperties } }) => {
+const columnsDeps = (deps, { instance: { webComponentsReactProperties } }: { instance: TableInstance }) => {
   return [...deps, webComponentsReactProperties.withRowHighlight, webComponentsReactProperties.highlightField];
 };
-const visibleColumnsDeps = (deps, { instance }) => [...deps, instance.webComponentsReactProperties.withRowHighlight];
-const visibleColumns = (currentVisibleColumns, { instance: { webComponentsReactProperties } }) => {
+const visibleColumnsDeps = (deps, { instance }: { instance: TableInstance }) => [
+  ...deps,
+  instance.webComponentsReactProperties.withRowHighlight
+];
+const visibleColumns = (
+  currentVisibleColumns,
+  { instance: { webComponentsReactProperties } }: { instance: TableInstance }
+) => {
   if (!webComponentsReactProperties.withRowHighlight) {
     return currentVisibleColumns.filter(({ id }) => id !== '__ui5wcr__internal_highlight_column');
   }
@@ -42,7 +48,7 @@ const visibleColumns = (currentVisibleColumns, { instance: { webComponentsReactP
   return [highlightColumn, ...currentVisibleColumns.filter(({ id }) => id !== '__ui5wcr__internal_highlight_column')];
 };
 
-const columns = (currentColumns, { instance }) => {
+const columns = (currentColumns, { instance }: { instance: TableInstance }) => {
   const { withRowHighlight, highlightField } = instance.webComponentsReactProperties;
 
   if (!withRowHighlight) {

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

@@ -1,4 +1,4 @@
-import type { ReactTableHooks } from '../types/index.js';
+import type { ReactTableHooks, TableInstance } from '../types/index.js';
 
 const baseStyles = {
   width: '100%',
@@ -27,14 +27,17 @@ const Cell = (instance) => {
 /*
  * TABLE HOOKS
  */
-const columnsDeps = (deps, { instance: { webComponentsReactProperties } }) => {
+const columnsDeps = (deps, { instance: { webComponentsReactProperties } }: { instance: TableInstance }) => {
   return [...deps, webComponentsReactProperties.withNavigationHighlight];
 };
-const visibleColumnsDeps = (deps, { instance }) => [
+const visibleColumnsDeps = (deps, { instance }: { instance: TableInstance }) => [
   ...deps,
   instance.webComponentsReactProperties.withNavigationHighlight
 ];
-const visibleColumns = (currentVisibleColumns, { instance: { webComponentsReactProperties } }) => {
+const visibleColumns = (
+  currentVisibleColumns,
+  { instance: { webComponentsReactProperties } }: { instance: TableInstance }
+) => {
   if (!webComponentsReactProperties.withNavigationHighlight) {
     return currentVisibleColumns.filter(({ id }) => id !== '__ui5wcr__internal_navigation_column');
   }
@@ -43,7 +46,7 @@ const visibleColumns = (currentVisibleColumns, { instance: { webComponentsReactP
   return [...currentVisibleColumns.filter(({ id }) => id !== '__ui5wcr__internal_navigation_column'), highlightColumn];
 };
 
-const columns = (currentColumns, { instance }) => {
+const columns = (currentColumns, { instance }: { instance: TableInstance }) => {
   const { withNavigationHighlight } = instance.webComponentsReactProperties;
 
   if (!withNavigationHighlight) {

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

@@ -2,7 +2,7 @@ import { CssSizeVariablesNames, enrichEventWithDetails } from '@ui5/webcomponent
 import type { CSSProperties } from 'react';
 import { AnalyticalTableSelectionBehavior, AnalyticalTableSelectionMode } from '../../../enums/index.js';
 import { CheckBox } from '../../../webComponents/CheckBox/index.js';
-import type { ReactTableHooks } from '../types/index.js';
+import type { ReactTableHooks, TableInstance } from '../types/index.js';
 
 const customCheckBoxStyling = {
   verticalAlign: 'middle',
@@ -14,7 +14,7 @@ const customCheckBoxStyling = {
  * COMPONENTS
  */
 
-const Header = (instance) => {
+const Header = (instance: TableInstance) => {
   const {
     getToggleAllRowsSelectedProps,
     webComponentsReactProperties: { selectionMode }
@@ -59,7 +59,7 @@ function getNextSelectedRowIds(rowsById) {
   }, {});
 }
 
-const headerProps = (props, { instance }) => {
+const headerProps = (props, { instance }: { instance: TableInstance }) => {
   const {
     webComponentsReactProperties: {
       onRowSelect,
@@ -128,17 +128,20 @@ const headerProps = (props, { instance }) => {
   return props;
 };
 
-const columnDeps = (deps, { instance: { webComponentsReactProperties } }) => {
+const columnDeps = (deps, { instance: { webComponentsReactProperties } }: { instance: TableInstance }) => {
   return [...deps, webComponentsReactProperties.selectionMode, webComponentsReactProperties.selectionBehavior];
 };
 
-const visibleColumnsDeps = (deps, { instance }) => [
+const visibleColumnsDeps = (deps, { instance }: { instance: TableInstance }) => [
   ...deps,
   instance.webComponentsReactProperties.selectionMode,
   instance.webComponentsReactProperties.selectionBehavior
 ];
 
-const visibleColumns = (currentVisibleColumns, { instance: { webComponentsReactProperties } }) => {
+const visibleColumns = (
+  currentVisibleColumns,
+  { instance: { webComponentsReactProperties } }: { instance: TableInstance }
+) => {
   if (
     webComponentsReactProperties.selectionMode === AnalyticalTableSelectionMode.None ||
     webComponentsReactProperties.selectionBehavior === AnalyticalTableSelectionBehavior.RowOnly
@@ -149,7 +152,7 @@ const visibleColumns = (currentVisibleColumns, { instance: { webComponentsReactP
   const selectionColumn = currentVisibleColumns.find(({ id }) => id === '__ui5wcr__internal_selection_column');
   return [selectionColumn, ...currentVisibleColumns.filter(({ id }) => id !== '__ui5wcr__internal_selection_column')];
 };
-const columns = (currentColumns, { instance }) => {
+const columns = (currentColumns, { instance }: { instance: TableInstance }) => {
   const { webComponentsReactProperties } = instance;
   const { selectionMode, selectionBehavior, tableRef } = webComponentsReactProperties;
 
@@ -187,15 +190,18 @@ const columns = (currentColumns, { instance }) => {
   ];
 };
 
-const getCellProps = (props, { cell }) => {
+const getCellProps = (props, { cell }: { cell: TableInstance['cell'] }) => {
   if (cell.column.id === '__ui5wcr__internal_selection_column') {
     const style = { ...props.style, cursor: 'pointer', justifyContent: 'center' };
     return [props, { style }];
   }
   return props;
 };
 
-const setToggleAllRowsSelectedProps = (props, { instance: { webComponentsReactProperties } }) => {
+const setToggleAllRowsSelectedProps = (
+  props,
+  { instance: { webComponentsReactProperties } }: { instance: TableInstance }
+) => {
   const { classes } = webComponentsReactProperties;
   return [props, { className: classes.checkBox, title: undefined }];
 };

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

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