feat(AnalyticalTable): remove react-table v7 dependency & vendor its code (#8558)

Due to the complexity of the `AnalyticalTable` it's not feasible
switching to `react-table` (`@tanstack/react-table`) v8 as this would
entail a complete rebuild. The v7 implementation doesn't include React
19 in its peer dependencies which leads to warnings or errors when
installing `@ui5/webcomponents-react`. Therefore we decided to copy the
`react-table` implementations we use into this project.

Additional changes/comments:
- Only hooks used by the `AnalyticalTable` were copied.
- TypeScript types were added in a best-effort approach.
- Now duplicate `react-table` implementations were consolidated

Fixes #6767

Author: Lukas742

REUSE.toml

@@ -39,14 +39,20 @@ precedence = "aggregate"
 SPDX-FileCopyrightText = "2022 Adobe Inc."
 SPDX-License-Identifier = "Apache-2.0"
 
+[[annotations]]
+path = "packages/main/src/components/AnalyticalTable/react-table/**"
+precedence = "aggregate"
+SPDX-FileCopyrightText = "2016 Tanner Linsley"
+SPDX-License-Identifier = "MIT"
+
 [[annotations]]
 path = "packages/main/src/components/AnalyticalTable/hooks/useRowSelect.ts"
 precedence = "aggregate"
-SPDX-FileCopyrightText = "2019-2021 Tanner Linsley"
+SPDX-FileCopyrightText = "2016 Tanner Linsley"
 SPDX-License-Identifier = "MIT"
 
 [[annotations]]
 path = "packages/main/src/components/AnalyticalTable/hooks/useColumnResizing.ts"
 precedence = "aggregate"
-SPDX-FileCopyrightText = "2019-2021 Tanner Linsley"
+SPDX-FileCopyrightText = "2016 Tanner Linsley"
 SPDX-License-Identifier = "MIT"

packages/main/package.json

@@ -814,8 +814,7 @@
   "dependencies": {
     "@tanstack/react-virtual": "3.13.24",
     "@ui5/webcomponents-react-base": "workspace:~",
-    "clsx": "2.1.1",
-    "react-table": "7.8.0"
+    "clsx": "2.1.1"
   },
   "peerDependencies": {
     "@types/react": "*",

packages/main/src/components/AnalyticalTable/defaults/Column/PopIn.tsx

@@ -1,9 +1,9 @@
-import { makeRenderer } from 'react-table';
 import { AnalyticalTablePopinDisplay } from '../../../../enums/AnalyticalTablePopinDisplay.js';
 import { FlexBoxAlignItems } from '../../../../enums/FlexBoxAlignItems.js';
 import { FlexBoxDirection } from '../../../../enums/FlexBoxDirection.js';
 import { FlexBoxWrap } from '../../../../enums/FlexBoxWrap.js';
 import { FlexBox } from '../../../FlexBox/index.js';
+import { makeRenderer } from '../../react-table/index.js';
 import type { CellInstance } from '../../types/index.js';
 import { RenderColumnTypes } from '../../types/index.js';
 

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

@@ -1,6 +1,13 @@
 import type { MouseEvent, TouchEvent } from 'react';
 import { useCallback } from 'react';
-import { actions, defaultColumn, makePropGetter, useGetLatest, useMountedLayoutEffect } from 'react-table';
+import {
+  actions,
+  defaultColumn,
+  getFirstDefined,
+  makePropGetter,
+  useGetLatest,
+  useMountedLayoutEffect,
+} from '../react-table/index.js';
 import type { ColumnType, ReactTableHooks, TableInstance } from '../types/index.js';
 
 // Default Column
@@ -242,15 +249,6 @@ const reducer: TableInstance['stateReducer'] = (state, action) => {
   }
 };
 
-// Replaces react-table's internal `getFirstDefined` from `utils.js` (not publicly exported)
-function getFirstDefined<T>(...args: (T | undefined)[]): T | undefined {
-  for (let i = 0; i < args.length; i += 1) {
-    if (typeof args[i] !== 'undefined') {
-      return args[i];
-    }
-  }
-}
-
 const useInstanceBeforeDimensions = (instance: TableInstance) => {
   const {
     flatHeaders,

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

@@ -1,5 +1,5 @@
-import { ensurePluginOrder } from 'react-table';
 import { AnalyticalTableScaleWidthMode } from '../../../enums/AnalyticalTableScaleWidthMode.js';
+import { ensurePluginOrder } from '../react-table/index.js';
 import type {
   AnalyticalTableColumnDefinition,
   ColumnType,

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

@@ -1,6 +1,6 @@
 import type { FocusEventHandler, KeyboardEvent, KeyboardEventHandler, MutableRefObject } from 'react';
 import { useCallback, useEffect, useRef } from 'react';
-import { actions } from 'react-table';
+import { actions } from '../react-table/index.js';
 import type { ColumnType, ReactTableHooks, TableInstance } from '../types/index.js';
 import { getLeafHeaders, NAVIGATION_KEYS } from '../util/index.js';
 

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

@@ -1,6 +1,12 @@
 import { useCallback, useMemo } from 'react';
-import { actions, makePropGetter, ensurePluginOrder, useGetLatest, useMountedLayoutEffect } from 'react-table';
 import { AnalyticalTableSelectionMode } from '../../../enums/AnalyticalTableSelectionMode.js';
+import {
+  actions,
+  makePropGetter,
+  ensurePluginOrder,
+  useGetLatest,
+  useMountedLayoutEffect,
+} from '../react-table/index.js';
 import type { ReactTableHooks, RowType, TableInstance } from '../types/index.js';
 
 const pluginName = 'useRowSelect';

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

@@ -1,7 +1,7 @@
 import { enrichEventWithDetails } from '@ui5/webcomponents-react-base/internal/utils';
 import { useEffect, useRef } from 'react';
-import { ensurePluginOrder } from 'react-table';
 import { AnalyticalTableSelectionMode } from '../../../enums/AnalyticalTableSelectionMode.js';
+import { ensurePluginOrder } from '../react-table/index.js';
 import type { AnalyticalTablePropTypes, ReactTableHooks, TableInstance } from '../types/index.js';
 
 type OnRowSelectEvent = Parameters<NonNullable<AnalyticalTablePropTypes['onRowSelect']>>[0];

packages/main/src/components/AnalyticalTable/index.tsx

@@ -14,7 +14,6 @@ import {
 import { clsx } from 'clsx';
 import type { CSSProperties } from 'react';
 import { forwardRef, useCallback, useEffect, useId, useMemo, useRef } from 'react';
-import { useColumnOrder, useExpanded, useFilters, useGlobalFilter, useGroupBy, useSortBy, useTable } from 'react-table';
 import { AnalyticalTableNoDataReason } from '../../enums/AnalyticalTableNoDataReason.js';
 import { AnalyticalTablePopinDisplay } from '../../enums/AnalyticalTablePopinDisplay.js';
 import { AnalyticalTableScaleWidthMode } from '../../enums/AnalyticalTableScaleWidthMode.js';
@@ -74,6 +73,15 @@ import { useStyling } from './hooks/useStyling.js';
 import { useSyncScroll } from './hooks/useSyncScroll.js';
 import { useToggleRowExpand } from './hooks/useToggleRowExpand.js';
 import { useVisibleColumnsWidth } from './hooks/useVisibleColumnsWidth.js';
+import {
+  useColumnOrder,
+  useExpanded,
+  useFilters,
+  useGlobalFilter,
+  useGroupBy,
+  useSortBy,
+  useTable,
+} from './react-table/index.js';
 import { VerticalScrollbar } from './scrollbars/VerticalScrollbar.js';
 import { VirtualTableBody } from './TableBody/VirtualTableBody.js';
 import { VirtualTableBodyContainer } from './TableBody/VirtualTableBodyContainer.js';

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

@@ -2,8 +2,8 @@ import { enrichEventWithDetails } from '@ui5/webcomponents-react-base';
 import { AnalyticalTableSelectionBehavior } from '../../../enums/AnalyticalTableSelectionBehavior.js';
 import { AnalyticalTableSelectionMode } from '../../../enums/AnalyticalTableSelectionMode.js';
 import { CheckBox } from '../../../webComponents/CheckBox/index.js';
+import { getBy } from '../react-table/index.js';
 import type { ReactTableHooks, RowType, TableInstance } from '../types/index.js';
-import { getBy } from '../util/index.js';
 
 type DisableRowSelectionType = string | ((row: RowType) => boolean);