AT: cleanup & fix more lint errors

Author: Lukas742

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

@@ -254,7 +254,8 @@ export const InfiniteScrolling: Story = {
     const [data, setData] = useState(args.data.slice(0, 50));
     const [loading, setLoading] = useState(false);
     const offset = useRef(50);
-    const onLoadMore = () => {
+    const onLoadMore = (e) => {
+      args.onLoadMore(e);
       setLoading(true);
     };
     useEffect(() => {

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

@@ -6,7 +6,6 @@ import type {
   AnalyticalTablePropTypes,
   ClassNames,
   DivWithCustomScrollProp,
-  ReactVirtualScrollToMethods,
   TableInstance,
   TriggerScrollState,
 } from '../types/index.js';
@@ -104,6 +103,8 @@ export const VirtualTableBody = (props: VirtualTableBodyProps) => {
         width: `${columnVirtualizer.getTotalSize()}px`,
       }}
     >
+      {/* Safe to update: lastNonEmptyRow ref holds non-render data only.*/}
+      {/* eslint-disable-next-line react-hooks/refs */}
       {rowVirtualizer.getVirtualItems().map((virtualRow, visibleRowIndex) => {
         const row = rows[virtualRow.index];
         const rowIndexWithHeader = virtualRow.index + 1;

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

@@ -48,9 +48,11 @@ export const VirtualTableBodyContainer = (props: VirtualTableBodyContainerProps)
 
   useEffect(() => {
     if (parentRef.current) {
+      // Trigger one-time re-render after first render -> safe to set state here
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       setIsMounted(true);
     }
-  }, [parentRef.current]);
+  }, [parentRef]);
 
   const dataLength = rows.length;
 
@@ -102,16 +104,16 @@ export const VirtualTableBodyContainer = (props: VirtualTableBodyContainerProps)
       }
     },
     [
+      handleExternalScroll,
       infiniteScroll,
       infiniteScrollThreshold,
-      onLoadMore,
-      rows,
       internalRowHeight,
-      firedInfiniteLoadEvents,
-      lastScrollTop,
-      handleExternalScroll,
+      isGrouped,
+      onLoadMore,
       popInRowHeight,
+      rows,
       tableBodyHeight,
+      visibleRows,
     ],
   );
 

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

@@ -9,7 +9,6 @@ interface VerticalResizerProps {
   analyticalTableRef: MutableRefObject<any>;
   dispatch: (e: { type: string; payload?: any }) => void;
   extensionsHeight: number;
-  internalRowHeight: number;
   hasPopInColumns: boolean;
   popInRowHeight: number;
   rowsLength: number;
@@ -30,7 +29,6 @@ export const VerticalResizer = (props: VerticalResizerProps) => {
     analyticalTableRef,
     dispatch,
     extensionsHeight,
-    internalRowHeight,
     hasPopInColumns,
     popInRowHeight,
     rowsLength,
@@ -47,16 +45,13 @@ export const VerticalResizer = (props: VerticalResizerProps) => {
 
   const i18nBundle = useI18nBundle('@ui5/webcomponents-react');
 
-  const handleResizeStart = useCallback(
-    (e) => {
-      e.preventDefault();
-      const touchEvent = isTouchEvent(e, 'touchstart');
-      startY.current = touchEvent ? Math.round(e.touches[0].pageY) : e.pageY;
-      setMountTouchEvents(touchEvent);
-      setIsDragging(true);
-    },
-    [startY.current, setIsDragging],
-  );
+  const handleResizeStart = useCallback((e) => {
+    e.preventDefault();
+    const touchEvent = isTouchEvent(e, 'touchstart');
+    startY.current = touchEvent ? Math.round(e.touches[0].pageY) : e.pageY;
+    setMountTouchEvents(touchEvent);
+    setIsDragging(true);
+  }, []);
 
   const handleMove = useCallback(
     (e) => {
@@ -67,27 +62,27 @@ export const VerticalResizer = (props: VerticalResizerProps) => {
     },
     [setResizerPosition],
   );
-  const handleResizeEnd = useCallback(
-    (e) => {
-      setIsDragging(false);
-      const rowCount = Math.floor(
-        (analyticalTableRef.current.clientHeight +
-          (isTouchEvent(e, 'touchend') ? Math.round(e.changedTouches[0].pageY) : e.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.current?.clientHeight, startY.current, extensionsHeight, internalRowHeight, dispatch],
-  );
+  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 },
+    });
+  };
+
   useEffect(() => {
     const removeEventListeners = () => {
       if (mountTouchEvents) {
@@ -119,15 +114,11 @@ export const VerticalResizer = (props: VerticalResizerProps) => {
     const resizerPosLeft = verticalResizerRef.current?.getBoundingClientRect()?.left + window.scrollX;
     const resizerPosWidth = verticalResizerRef.current?.getBoundingClientRect()?.width;
     if (!isDragging && resizerPosTop > 0) {
-      setResizerPosition({ left: resizerPosLeft, top: resizerPosTop, width: resizerPosWidth });
+      requestAnimationFrame(() => {
+        setResizerPosition({ left: resizerPosLeft, top: resizerPosTop, width: resizerPosWidth });
+      });
     }
-  }, [verticalResizerRef.current?.getBoundingClientRect()?.top, isDragging]);
-
-  useEffect(() => {
-    return () => {
-      dispatch({ type: 'WITH_POPIN', payload: false });
-    };
-  }, []);
+  }, [isDragging]);
 
   const isInitial = useRef(true);
   useEffect(() => {

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

@@ -5,12 +5,13 @@ import { Input } from '../../../../webComponents/Input/index.js';
 import type { FilterProps } from '../../types/index.js';
 
 export const DefaultFilterComponent = ({ column, accessibleNameRef }: FilterProps) => {
+  const { setFilter } = column;
   const handleInput: InputPropTypes['onInput'] = useCallback(
     (e) => {
       // Setting the filter to `undefined` removes it
-      column.setFilter(e.target.value || undefined);
+      setFilter(e.target.value || undefined);
     },
-    [column.setFilter],
+    [setFilter],
   );
 
   const handleKeyDown: InputPropTypes['onKeyDown'] = (e) => {

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

@@ -9,6 +9,8 @@ export function useIsFirefox() {
   const [isFirefox, setIsFirefox] = useState(false);
 
   useEffect(() => {
+    // safe here because we only update state after mount for SSR hydration
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     setIsFirefox(isFirefoxFn());
   }, []);
 

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

@@ -68,6 +68,7 @@ const useGetTableProps = (
   { instance: { webComponentsReactProperties, data, columns, state } }: { instance: TableInstance },
 ) => {
   const { showOverlay, tableRef } = webComponentsReactProperties;
+  const { isRtl } = state;
   const currentlyFocusedCell = useRef<HTMLElement>(null);
   const noData = data.length === 0;
 
@@ -153,12 +154,11 @@ const useGetTableProps = (
         }
       }
     },
-    [currentlyFocusedCell.current, tableRef.current, noData],
+    [noData, tableRef],
   );
 
   const onKeyboardNavigation = useCallback(
     (e) => {
-      const { isRtl } = state;
       const isActiveItemInSubComponent = Object.prototype.hasOwnProperty.call(
         e.target.dataset,
         'subcomponentActiveElement',
@@ -284,6 +284,8 @@ const useGetTableProps = (
             );
             if (hasSubcomponent && !currentlyFocusedCell.current?.dataset?.subcomponent) {
               currentlyFocusedCell.current.tabIndex = -1;
+              // Happens outside of React's scope
+              // eslint-disable-next-line react-hooks/immutability
               firstChildOfParent.tabIndex = 0;
               firstChildOfParent.dataset.rowIndexSub = `${rowIndex}`;
               firstChildOfParent.dataset.columnIndexSub = `${columnIndex}`;
@@ -325,7 +327,7 @@ const useGetTableProps = (
         }
       }
     },
-    [currentlyFocusedCell.current, tableRef.current, state?.isRtl],
+    [isRtl, tableRef],
   );
   if (showOverlay) {
     return tableProps;

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

@@ -541,12 +541,6 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
     }
   }, [selectedRowIds]);
 
-  useEffect(() => {
-    if (tableState?.interactiveRowsHavePopIn && (!tableState?.popInColumns || tableState?.popInColumns?.length === 0)) {
-      dispatch({ type: 'WITH_POPIN', payload: false });
-    }
-  }, [tableState?.interactiveRowsHavePopIn, tableState?.popInColumns?.length]);
-
   const tableBodyHeight = useMemo(() => {
     if (typeof tableState.bodyHeight === 'number') {
       return tableState.bodyHeight;
@@ -895,7 +889,6 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
           analyticalTableRef={analyticalTableRef}
           dispatch={dispatch}
           extensionsHeight={extensionsHeight}
-          internalRowHeight={internalRowHeight}
           rowsLength={rows.length}
           visibleRows={internalVisibleRowCount}
           handleOnLoadMore={handleOnLoadMore}

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

@@ -294,13 +294,6 @@ export interface TriggerScrollState {
   args: [number, Omit<ScrollToOptions, 'behavior'>?];
 }
 
-export interface ReactVirtualScrollToMethods {
-  scrollToOffset?: (offset: number, options?: ScrollToOptions) => void;
-  scrollToIndex?: (index: number, options?: ScrollToOptions) => void;
-  horizontalScrollToOffset?: (offset: number, options?: ScrollToOptions) => void;
-  horizontalScrollToIndex?: (index: number, options?: ScrollToOptions) => void;
-}
-
 interface PopInColumnsState {
   id: string;
   column: ColumnType;