AT: fix lint errors

Author: Lukas742

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

@@ -1,5 +1,6 @@
 import ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js';
 import paperPlaneIcon from '@ui5/webcomponents-icons/paper-plane.js';
+import { isIOS, isMac } from '@ui5/webcomponents-react-base/Device';
 import { ThemingParameters } from '@ui5/webcomponents-react-base/ThemingParameters';
 import { useCallback, useEffect, useMemo, useRef, useState, version as reactVersion } from 'react';
 import type {
@@ -80,7 +81,6 @@ import { useRowDisableSelection } from './pluginHooks/useRowDisableSelection';
 import { cssVarToRgb, cypressPassThroughTestsFactory } from '@/cypress/support/utils';
 import type { RowType } from '@/packages/main/src/components/AnalyticalTable/types/index.js';
 import { getUi5TagWithSuffix } from '@/packages/main/src/internal/utils.js';
-import { isIOS, isMac } from '@ui5/webcomponents-react-base/Device';
 
 const canUseVoiceOver = isIOS() || isMac();
 

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

@@ -17,6 +17,12 @@ interface VerticalResizerProps {
   classNames: ClassNames;
 }
 
+interface VerticalResizerPosition {
+  left: number;
+  top: number;
+  width: number;
+}
+
 const isTouchEvent = (e, touchEvent) => {
   if (e.type === touchEvent) {
     return !(e.touches && e.touches.length > 1);
@@ -39,7 +45,7 @@ export const VerticalResizer = (props: VerticalResizerProps) => {
 
   const startY = useRef(null);
   const verticalResizerRef = useRef(null);
-  const [resizerPosition, setResizerPosition] = useState(undefined);
+  const [resizerPosition, setResizerPosition] = useState<undefined | VerticalResizerPosition>(undefined);
   const [isDragging, setIsDragging] = useState(false);
   const [mountTouchEvents, setMountTouchEvents] = useState(false);
 
@@ -54,34 +60,37 @@ export const VerticalResizer = (props: VerticalResizerProps) => {
   }, []);
 
   const handleMove = useCallback(
-    (e) => {
+    (e: TouchEvent | MouseEvent) => {
       setResizerPosition((prev) => ({
         ...prev,
-        top: isTouchEvent(e, 'touchmove') ? Math.round(e.touches[0].pageY) : e.pageY,
+        top: isTouchEvent(e, 'touchmove') ? Math.round((e as TouchEvent).touches[0].pageY) : (e as MouseEvent).pageY,
       }));
     },
     [setResizerPosition],
   );
-  const handleResizeEnd = (e: TouchEvent | MouseEvent) => {
-    setIsDragging(false);
-    const rowCount = Math.floor(
-      (analyticalTableRef.current.clientHeight +
-        (isTouchEvent(e, 'touchend')
-          ? Math.round((e as TouchEvent).changedTouches[0].pageY)
-          : (e as MouseEvent).pageY) -
-        startY.current -
-        extensionsHeight -
-        5) /*resizer height*/ /
-        popInRowHeight,
-    );
-    if (hasPopInColumns) {
-      dispatch({ type: 'INTERACTIVE_ROWS_HAVE_POPIN', payload: true });
-    }
-    dispatch({
-      type: 'VISIBLE_ROWS',
-      payload: { visibleRows: rowCount },
-    });
-  };
+  const handleResizeEnd = useCallback(
+    (e: TouchEvent | MouseEvent) => {
+      setIsDragging(false);
+      const rowCount = Math.floor(
+        (analyticalTableRef.current.clientHeight +
+          (isTouchEvent(e, 'touchend')
+            ? Math.round((e as TouchEvent).changedTouches[0].pageY)
+            : (e as MouseEvent).pageY) -
+          startY.current -
+          extensionsHeight -
+          5) /*resizer height*/ /
+          popInRowHeight,
+      );
+      if (hasPopInColumns) {
+        dispatch({ type: 'INTERACTIVE_ROWS_HAVE_POPIN', payload: true });
+      }
+      dispatch({
+        type: 'VISIBLE_ROWS',
+        payload: { visibleRows: rowCount },
+      });
+    },
+    [analyticalTableRef, dispatch, extensionsHeight, hasPopInColumns, popInRowHeight],
+  );
 
   useEffect(() => {
     const removeEventListeners = () => {
@@ -107,7 +116,7 @@ export const VerticalResizer = (props: VerticalResizerProps) => {
     return () => {
       removeEventListeners();
     };
-  }, [isDragging]);
+  }, [handleMove, handleResizeEnd, isDragging, mountTouchEvents]);
 
   useEffect(() => {
     const resizerPosTop = verticalResizerRef.current?.getBoundingClientRect()?.top + window.scrollY;
@@ -126,15 +135,7 @@ export const VerticalResizer = (props: VerticalResizerProps) => {
       handleOnLoadMore({ type: 'tableGrow' } as Event);
     }
     isInitial.current = false;
-  }, [rowsLength, visibleRows]);
-
-  const [allowed, setAllowed] = useState(false);
-  useEffect(() => {
-    setAllowed(true);
-  }, []);
-  if (!allowed) {
-    return null;
-  }
+  }, [handleOnLoadMore, rowsLength, visibleRows]);
 
   return (
     <div

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

@@ -8,7 +8,7 @@ import type { FocusEvent } from 'react';
 import type { ButtonDomRef } from '../../../../webComponents/Button/index.js';
 import { Button } from '../../../../webComponents/Button/index.js';
 import { Icon } from '../../../../webComponents/Icon/index.js';
-import type { ColumnType, RowType, WCRPropertiesType } from '../../types/index.js';
+import type { CellInstance } from '../../types/index.js';
 import { RenderColumnTypes } from '../../types/index.js';
 
 const getPadding = (level) => {
@@ -26,15 +26,7 @@ const getPadding = (level) => {
   }
 };
 
-interface ExpandableProps {
-  cell: Record<string, any>;
-  row: RowType;
-  column: ColumnType;
-  visibleColumns: ColumnType[];
-  webComponentsReactProperties: WCRPropertiesType;
-}
-
-export const Expandable = (props: ExpandableProps) => {
+export const Expandable = (props: CellInstance) => {
   const { cell, row, column, visibleColumns: columns, webComponentsReactProperties } = props;
   const {
     renderRowSubComponent,
@@ -92,7 +84,7 @@ export const Expandable = (props: ExpandableProps) => {
                   onClick={rowProps.onClick}
                   mode={IconMode.Interactive}
                   name={row.isExpanded ? iconNavDownArrow : iconNavRightArrow}
-                  aria-expanded={`${row.isExpanded}`}
+                  aria-expanded={`${row.isExpanded}` as 'true' | 'false'}
                   data-component-name="AnalyticalTableExpandIcon"
                   className={classNames.expandableIcon}
                   accessibleName={

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

@@ -4,9 +4,10 @@ import { clsx } from 'clsx';
 import type { CSSProperties } from 'react';
 import { TextAlign } from '../../../../enums/TextAlign.js';
 import { Icon } from '../../../../webComponents/Icon/index.js';
+import type { CellInstance } from '../../types/index.js';
 import { RenderColumnTypes } from '../../types/index.js';
 
-export const Grouped = (props) => {
+export const Grouped = (props: CellInstance) => {
   const { cell, row, webComponentsReactProperties } = props;
   const { translatableTexts, classes } = webComponentsReactProperties;
 

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

@@ -5,10 +5,10 @@ import { FlexBoxDirection } from '../../../../enums/FlexBoxDirection.js';
 import { FlexBoxWrap } from '../../../../enums/FlexBoxWrap.js';
 import { Text } from '../../../../webComponents/Text/index.js';
 import { FlexBox } from '../../../FlexBox/index.js';
-import type { TableInstance } from '../../types/index.js';
+import type { CellInstance } from '../../types/index.js';
 import { RenderColumnTypes } from '../../types/index.js';
 
-export const PopIn = (instance: TableInstance) => {
+export const PopIn = (instance: CellInstance) => {
   const {
     state,
     contentToRender,

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

@@ -8,6 +8,8 @@ export function useCanUseVoiceOver() {
   const [canUseVoiceOver, setCanUseVoiceOver] = useState(false);
 
   useEffect(() => {
+    // Needs another rendering cycle to prevent hydration errors
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     setCanUseVoiceOver(isIOS() || isMac());
   }, []);
 

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

@@ -98,7 +98,7 @@ const useGetTableProps = (
       currentlyFocusedCell.current = null;
       tableRef.current.tabIndex = 0;
     }
-  }, [data, columns, showOverlay]);
+  }, [data, columns, showOverlay, tableRef]);
 
   const onTableFocus = useCallback(
     (e) => {

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

@@ -23,6 +23,8 @@ export function useSyncScroll(
       return;
     }
 
+    // Is a React ref
+    // eslint-disable-next-line react-hooks/immutability
     scrollbar.scrollTop = content.scrollTop;
 
     const sync = (source: 'content' | 'scrollbar') => {

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

@@ -12,7 +12,7 @@ import {
   useSyncRef,
 } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
-import type { CSSProperties, MutableRefObject } from 'react';
+import type { CSSProperties } from 'react';
 import { forwardRef, useCallback, useEffect, useId, useMemo, useRef } from 'react';
 import {
   useColumnOrder,
@@ -406,7 +406,7 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
     !!Object.keys(tableState.subComponentsHeight);
 
   if (tableInstance && {}.hasOwnProperty.call(tableInstance, 'current')) {
-    (tableInstance as MutableRefObject<Record<string, any>>).current = tableInstanceRef.current;
+    (tableInstance as { current: TableInstance }).current = tableInstanceRef.current;
   }
   if (typeof tableInstance === 'function') {
     tableInstance(tableInstanceRef.current);
@@ -496,15 +496,7 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
         });
       }
     }
-  }, [
-    analyticalTableRef.current?.parentElement?.getBoundingClientRect().height,
-    analyticalTableRef.current?.getBoundingClientRect().y,
-    extensionsHeight,
-    popInRowHeight,
-    visibleRowCountMode,
-    includeSubCompRowHeight,
-    tableState.subComponentsHeight,
-  ]);
+  }, [extensionsHeight, popInRowHeight, visibleRowCountMode, includeSubCompRowHeight, tableState.subComponentsHeight]);
 
   useEffect(() => {
     setGlobalFilter(globalFilterValue);
@@ -526,7 +518,7 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
       tableWidthObserver.disconnect();
       parentHeightObserver.disconnect();
     };
-  }, [updateTableClientWidth, updateRowsCount]);
+  }, [updateTableClientWidth, updateRowsCount, analyticalTableRef]);
 
   useIsomorphicLayoutEffect(() => {
     dispatch({ type: 'IS_RTL', payload: { isRtl } });
@@ -547,7 +539,7 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
         payload: { visibleRows: undefined },
       });
     }
-  }, [visibleRowCountMode, tableState.visibleRows]);
+  }, [visibleRowCountMode, tableState.visibleRows, dispatch]);
 
   useEffect(() => {
     if (groupBy) {
@@ -559,13 +551,13 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
     if (selectedRowIds) {
       dispatch({ type: 'SET_SELECTED_ROW_IDS', payload: { selectedRowIds } });
     }
-  }, [selectedRowIds]);
+  }, [dispatch, selectedRowIds]);
 
   const tableBodyHeight = useMemo(() => {
     if (typeof tableState.bodyHeight === 'number') {
       return tableState.bodyHeight;
     }
-    let rowNum;
+    let rowNum: number;
     if (visibleRowCountMode === AnalyticalTableVisibleRowCountMode.AutoWithEmptyRows) {
       rowNum = internalVisibleRowCount;
     } else {

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

@@ -213,7 +213,8 @@ function findFirstFocusableInside(element: HTMLElement) {
  * Init `cellContentTabIndex` if the plugin hook is used.
  */
 function useInstanceBeforeDimensions(instance: TableInstance) {
+  const { dispatch } = instance;
   useEffect(() => {
-    instance.dispatch({ type: 'CELL_CONTENT_TAB_INDEX', payload: -1 });
-  }, [instance.dispatch]);
+    dispatch({ type: 'CELL_CONTENT_TAB_INDEX', payload: -1 });
+  }, [dispatch]);
 }