fix lint errors

Author: Lukas742

packages/base/src/internal/hooks/useSyncRef.ts

@@ -35,6 +35,8 @@ export function useSyncRef<RefType = never>(
           ref(node);
         }
         if ({}.hasOwnProperty.call(ref, 'current')) {
+          // React Refs are mutable
+          // eslint-disable-next-line react-hooks/immutability
           (ref as MutableRefObject<RefType>).current = node;
         }
       }

packages/base/src/internal/wrapper/withWebComponent.cy.tsx

@@ -202,6 +202,7 @@ describe('withWebComponent', () => {
           </Button>
           <Popover
             open={open}
+            // eslint-disable-next-line react-hooks/refs
             opener={btnRef.current}
             onClose={() => {
               setOpen(false);

packages/charts/src/components/LineChart/index.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { enrichEventWithDetails, ThemingParameters, useIsRTL, useSyncRef } from '@ui5/webcomponents-react-base';
-import { forwardRef, useCallback, useRef } from 'react';
+import { forwardRef, useRef } from 'react';
 import type { LineProps, YAxisProps } from 'recharts';
 import {
   Brush,
@@ -182,32 +182,29 @@ const LineChart = forwardRef<HTMLDivElement, LineChartProps>((props, ref) => {
 
   const onItemLegendClick = useLegendItemClick(onLegendClick);
   const preventOnClickCall = useRef(0);
-  const onDataPointClickInternal = useCallback(
-    (payload, eventOrIndex) => {
-      if (eventOrIndex.dataKey && typeof onDataPointClick === 'function') {
-        preventOnClickCall.current = 2;
-        onDataPointClick(
-          enrichEventWithDetails({} as any, {
-            value: eventOrIndex.value,
-            dataKey: eventOrIndex.dataKey,
-            dataIndex: eventOrIndex.index,
-            payload: eventOrIndex.payload,
-          }),
-        );
-      } else if (typeof onClick === 'function' && preventOnClickCall.current === 0) {
-        onClick(
-          enrichEventWithDetails(eventOrIndex, {
-            payload: payload?.activePayload?.[0]?.payload,
-            activePayloads: payload?.activePayload,
-          }),
-        );
-      }
-      if (preventOnClickCall.current > 0) {
-        preventOnClickCall.current -= 1;
-      }
-    },
-    [onDataPointClick, preventOnClickCall.current],
-  );
+  const onDataPointClickInternal = (payload, eventOrIndex) => {
+    if (eventOrIndex.dataKey && typeof onDataPointClick === 'function') {
+      preventOnClickCall.current = 2;
+      onDataPointClick(
+        enrichEventWithDetails({} as any, {
+          value: eventOrIndex.value,
+          dataKey: eventOrIndex.dataKey,
+          dataIndex: eventOrIndex.index,
+          payload: eventOrIndex.payload,
+        }),
+      );
+    } else if (typeof onClick === 'function' && preventOnClickCall.current === 0) {
+      onClick(
+        enrichEventWithDetails(eventOrIndex, {
+          payload: payload?.activePayload?.[0]?.payload,
+          activePayloads: payload?.activePayload,
+        }),
+      );
+    }
+    if (preventOnClickCall.current > 0) {
+      preventOnClickCall.current -= 1;
+    }
+  };
 
   const isBigDataSet = dataset?.length > 30;
   const primaryDimensionAccessor = primaryDimension?.accessor;

packages/charts/src/components/PieChart/index.tsx

@@ -159,10 +159,9 @@ const PieChart = forwardRef<HTMLDivElement, PieChartProps>((props, ref) => {
     );
   };
 
-  const tooltipValueFormatter = useCallback(
-    (value, name) => [measure.formatter(value), dimension.formatter(name)],
-    [measure.formatter, dimension.formatter],
-  );
+  const tooltipValueFormatter = (value, name) => {
+    return [measure.formatter(value), dimension.formatter(name)];
+  };
 
   const onItemLegendClick = useLegendItemClick(onLegendClick, () => measure.accessor);
   const onClickInternal = useOnClickInternal(onClick);
@@ -248,7 +247,7 @@ const PieChart = forwardRef<HTMLDivElement, PieChartProps>((props, ref) => {
         </g>
       );
     },
-    [showActiveSegmentDataLabel, chartConfig.activeSegment, isDonutChart],
+    [showActiveSegmentDataLabel, chartConfig.activeSegment, isDonutChart, chartRef, measure],
   );
 
   const renderLabelLine = useCallback(
@@ -258,7 +257,7 @@ const PieChart = forwardRef<HTMLDivElement, PieChartProps>((props, ref) => {
       if (hideDataLabel || chartConfig.activeSegment === props.index) return null;
       return Pie.renderLabelLineItem({}, props, undefined);
     },
-    [chartConfig.activeSegment, measure.hideDataLabel],
+    [chartConfig.activeSegment, measure],
   );
 
   const legendWrapperStyle = useMemo(() => {

packages/charts/src/components/TimelineChart/TimelineChartHeaders.tsx

@@ -75,6 +75,7 @@ const TimelineChartColumnLabel = ({
       const newLabelArray = columnLabels
         ? columnLabels
         : Array.from(Array(totalDuration).keys()).map((num) => `${num + start}`);
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       setLabelArray(newLabelArray);
     }
   }, [isDiscrete, columnLabels, start, totalDuration]);
@@ -95,7 +96,7 @@ const TimelineChartColumnLabel = ({
           height: `${halfHeaderHeight}px`,
           lineHeight: `${halfHeaderHeight}px`,
         }}
-      ></div>
+      />
       {isDiscrete ? (
         <div
           className={classNames.columnLabelItems}

packages/charts/src/components/TimelineChart/chartbody/TimelineChartBody.tsx

@@ -55,6 +55,25 @@ const TimelineChartBody = ({
   const scaleExpRef = useRef(0);
   const [displayArrows, setDisplayArrows] = useState(false);
 
+  const onMouseWheelEvent = (evt: WheelEvent) => {
+    evt.preventDefault();
+    if (evt.deltaY < 0) {
+      // Only scale up if scaled width will not exceed MAX_BODY_WIDTH
+      const msrWidth = bodyRef.current.getBoundingClientRect().width;
+      if (msrWidth * SCALE_FACTOR < MAX_BODY_WIDTH) {
+        scaleExpRef.current++;
+      }
+    } else {
+      // Only scale down if scaled width will not be less than original
+      // width
+      if (scaleExpRef.current > 0) {
+        resetScroll();
+        scaleExpRef.current--;
+      }
+    }
+    onScale(Math.pow(SCALE_FACTOR, scaleExpRef.current));
+  };
+
   useEffect(() => {
     const bodyElement = bodyRef.current;
     bodyElement?.addEventListener('wheel', onMouseWheelEvent);
@@ -81,25 +100,6 @@ const TimelineChartBody = ({
   };
   const hideTooltip = () => tooltipRef.current?.onLeaveItem();
 
-  const onMouseWheelEvent = (evt: WheelEvent) => {
-    evt.preventDefault();
-    if (evt.deltaY < 0) {
-      // Only scale up if scaled width will not exceed MAX_BODY_WIDTH
-      const msrWidth = bodyRef.current.getBoundingClientRect().width;
-      if (msrWidth * SCALE_FACTOR < MAX_BODY_WIDTH) {
-        scaleExpRef.current++;
-      }
-    } else {
-      // Only scale down if scaled width will not be less than original
-      // width
-      if (scaleExpRef.current > 0) {
-        resetScroll();
-        scaleExpRef.current--;
-      }
-    }
-    onScale(Math.pow(SCALE_FACTOR, scaleExpRef.current));
-  };
-
   const showArrows = () => setDisplayArrows(true);
 
   return (
@@ -121,6 +121,8 @@ const TimelineChartBody = ({
             dataSet={dataset}
             width={width}
             rowHeight={rowHeight}
+            // todo: check side-effect
+            // eslint-disable-next-line react-hooks/refs
             bodyRect={bodyRef.current?.getBoundingClientRect()}
           />
         </TimelineChartLayer>

packages/charts/src/components/TimelineChart/chartbody/TimelineChartRow.tsx

@@ -27,6 +27,8 @@ const TimelineChartRow = ({
   showTooltip,
   hideTooltip,
 }: TimelineChartRowProps) => {
+  // todo: fix mutation
+  // eslint-disable-next-line react-hooks/immutability
   rowData.color = rowData.color ?? `var(--sapChart_OrderedColor_${(rowIndex % 12) + 1})`;
 
   return (

packages/compat/src/components/Toolbar/OverflowPopover.tsx

@@ -164,6 +164,7 @@ export const OverflowPopover: FC<OverflowPopoverProps> = (props: OverflowPopover
   return (
     <OverflowPopoverContextProvider value={{ inPopover: true }}>
       {overflowButton ? (
+        // eslint-disable-next-line react-hooks/refs
         cloneElement(overflowButton, { onClick: clonedOverflowButtonClick })
       ) : (
         <ToggleButton

packages/compat/src/components/Toolbar/index.tsx

@@ -190,9 +190,11 @@ const Toolbar = forwardRef<HTMLDivElement, ToolbarPropTypes>((props, ref) => {
   }, [children]);
 
   const childrenWithRef = useMemo(() => {
+    // eslint-disable-next-line react-hooks/refs
     controlMetaData.current = [];
 
     let hasOnlySpacersOrSeparators = true;
+    // eslint-disable-next-line react-hooks/refs
     const enrichedChildren = flatChildren.map((item, index) => {
       const itemRef: RefObject<HTMLDivElement> = createRef();
       // @ts-expect-error: if type is not defined, it's not a spacer

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

@@ -3724,6 +3724,7 @@ describe('AnalyticalTable', () => {
       // transform data to the pattern which is accepted by the tree table
       // NOTES: this algorithm is less likely related to the bug, because in our reality project there is a different algorithm to generate the tree table and the bug still occurs.
       const data = useMemo(() => {
+        // eslint-disable-next-line react-hooks/refs
         raw.forEach((item) => {
           const newItem = { ...item };
           rowById.current[newItem.nodeId] = {
@@ -3747,7 +3748,7 @@ describe('AnalyticalTable', () => {
             rowById.current[newItem.parentId].subRows.push(rowById.current[newItem.nodeId]);
           }
         });
-
+        // eslint-disable-next-line react-hooks/refs
         return Object.values(rowById.current).filter((row) => !row.parentId);
       }, [raw]);