fix/suppress eslint errors

Lukas742 · Lukas742 · commit f64f17d182cd · 2026-04-20T12:09:54.000+02:00
diff --git a/.storybook/utils.ts b/.storybook/utils.ts
@@ -97,10 +97,6 @@ export function useFakeStream(initialValue = '', typingDelay = 10, startingDelay
   const [isTyping, setIsTyping] = useState(false); // actively typing characters
   const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
   const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const isProcessingRef = useRef(isProcessing);
-  const isTypingRef = useRef(isTyping);
-  isProcessingRef.current = isProcessing;
-  isTypingRef.current = isTyping;
 
   const startStream = ({ text, onComplete, onProcessingComplete }: StartStreamOptions) => {
     // Stop previous stream and timeout
diff --git a/packages/base/src/internal/hooks/useSyncRef.ts b/packages/base/src/internal/hooks/useSyncRef.ts
@@ -29,6 +29,8 @@ export function useSyncRef<RefType = never>(
   const localRef = useRef<RefType | null>(null);
 
   const componentRef = useCallback(
+    // callback ref forwards to external ref
+    // eslint-disable-next-line react-hooks/immutability
     (node) => {
       if (ref) {
         if (typeof ref === 'function') {
diff --git a/packages/base/src/internal/wrapper/withWebComponent.cy.tsx b/packages/base/src/internal/wrapper/withWebComponent.cy.tsx
@@ -198,7 +198,6 @@ describe('withWebComponent', () => {
           </Button>
           <Popover
             open={open}
-            // eslint-disable-next-line react-hooks/refs
             opener={btnRef.current}
             onClose={() => {
               setOpen(false);
diff --git a/packages/charts/src/components/BarChart/BarChart.cy.tsx b/packages/charts/src/components/BarChart/BarChart.cy.tsx
@@ -1,11 +1,11 @@
-import { complexDataSet } from '../../resources/DemoProps.js';
-import { BarChart } from './index.js';
 import {
   cypressPassThroughTestsFactory,
   testChartLegendConfig,
   testChartZoomingTool,
   testStackAggregateTotals,
 } from '../../../../../cypress/support/utils';
+import { complexDataSet } from '../../resources/DemoProps.js';
+import { BarChart } from './index.js';
 
 const dimensions = [
   {
diff --git a/packages/charts/src/components/BulletChart/BulletChart.cy.tsx b/packages/charts/src/components/BulletChart/BulletChart.cy.tsx
@@ -1,10 +1,10 @@
-import { complexDataSet } from '../../resources/DemoProps.js';
-import { BulletChart } from './index.js';
 import {
   cypressPassThroughTestsFactory,
   testChartLegendConfig,
   testChartZoomingTool,
 } from '../../../../../cypress/support/utils';
+import { complexDataSet } from '../../resources/DemoProps.js';
+import { BulletChart } from './index.js';
 
 const dimensions = [
   {
diff --git a/packages/charts/src/components/ColumnChart/ColumnChart.cy.tsx b/packages/charts/src/components/ColumnChart/ColumnChart.cy.tsx
@@ -1,11 +1,11 @@
-import { complexDataSet } from '../../resources/DemoProps.js';
-import { ColumnChart } from './index.js';
 import {
   cypressPassThroughTestsFactory,
   testChartLegendConfig,
   testChartZoomingTool,
   testStackAggregateTotals,
 } from '../../../../../cypress/support/utils';
+import { complexDataSet } from '../../resources/DemoProps.js';
+import { ColumnChart } from './index.js';
 
 const dimensions = [
   {
diff --git a/packages/charts/src/components/ColumnChartWithTrend/ColumnChartWithTrend.cy.tsx b/packages/charts/src/components/ColumnChartWithTrend/ColumnChartWithTrend.cy.tsx
@@ -1,10 +1,10 @@
-import { complexDataSet } from '../../resources/DemoProps.js';
-import { ColumnChartWithTrend } from './index.js';
 import {
   cypressPassThroughTestsFactory,
   testChartLegendConfig,
   testChartZoomingTool,
 } from '../../../../../cypress/support/utils';
+import { complexDataSet } from '../../resources/DemoProps.js';
+import { ColumnChartWithTrend } from './index.js';
 
 const dimensions = [
   {
diff --git a/packages/charts/src/components/ComposedChart/ComposedChart.cy.tsx b/packages/charts/src/components/ComposedChart/ComposedChart.cy.tsx
@@ -1,11 +1,11 @@
-import { complexDataSet } from '../../resources/DemoProps.js';
-import { ComposedChart } from './index.js';
 import {
   cypressPassThroughTestsFactory,
   testChartLegendConfig,
   testChartZoomingTool,
   testStackAggregateTotals,
 } from '../../../../../cypress/support/utils';
+import { complexDataSet } from '../../resources/DemoProps.js';
+import { ComposedChart } from './index.js';
 
 const dimensions = [
   {
diff --git a/packages/charts/src/components/DonutChart/DonutChart.cy.tsx b/packages/charts/src/components/DonutChart/DonutChart.cy.tsx
@@ -1,6 +1,6 @@
+import { cypressPassThroughTestsFactory, testChartLegendConfig } from '../../../../../cypress/support/utils';
 import { complexDataSet, simpleDataSet } from '../../resources/DemoProps.js';
 import { DonutChart } from './index.js';
-import { cypressPassThroughTestsFactory, testChartLegendConfig } from '../../../../../cypress/support/utils';
 
 const dimension = {
   accessor: 'name',
diff --git a/packages/charts/src/components/LineChart/LineChart.cy.tsx b/packages/charts/src/components/LineChart/LineChart.cy.tsx
@@ -1,10 +1,10 @@
-import { complexDataSet } from '../../resources/DemoProps.js';
-import { LineChart } from './index.js';
 import {
   cypressPassThroughTestsFactory,
   testChartLegendConfig,
   testChartZoomingTool,
 } from '../../../../../cypress/support/utils';
+import { complexDataSet } from '../../resources/DemoProps.js';
+import { LineChart } from './index.js';
 
 const dimensions = [
   {
diff --git a/packages/charts/src/components/PieChart/PieChart.cy.tsx b/packages/charts/src/components/PieChart/PieChart.cy.tsx
@@ -1,7 +1,7 @@
 import { Text as RechartsText } from 'recharts';
+import { cypressPassThroughTestsFactory, testChartLegendConfig } from '../../../../../cypress/support/utils';
 import { complexDataSet, simpleDataSet } from '../../resources/DemoProps.js';
 import { PieChart } from './index.js';
-import { cypressPassThroughTestsFactory, testChartLegendConfig } from '../../../../../cypress/support/utils';
 
 const dimension = {
   accessor: 'name',
diff --git a/packages/charts/src/components/RadarChart/RadarChart.cy.tsx b/packages/charts/src/components/RadarChart/RadarChart.cy.tsx
@@ -1,6 +1,6 @@
+import { cypressPassThroughTestsFactory, testChartLegendConfig } from '../../../../../cypress/support/utils';
 import { complexDataSet } from '../../resources/DemoProps.js';
 import { RadarChart } from './index.js';
-import { cypressPassThroughTestsFactory, testChartLegendConfig } from '../../../../../cypress/support/utils';
 
 const dimensions = [
   {
diff --git a/packages/charts/src/components/RadialChart/RadialChart.cy.tsx b/packages/charts/src/components/RadialChart/RadialChart.cy.tsx
@@ -1,5 +1,5 @@
-import { RadialChart } from './index.js';
 import { cypressPassThroughTestsFactory } from '../../../../../cypress/support/utils';
+import { RadialChart } from './index.js';
 
 describe('RadialChart', () => {
   it('Basic', () => {
diff --git a/packages/charts/src/components/ScatterChart/ScatterChart.cy.tsx b/packages/charts/src/components/ScatterChart/ScatterChart.cy.tsx
@@ -1,6 +1,6 @@
+import { cypressPassThroughTestsFactory, testChartLegendConfig } from '../../../../../cypress/support/utils';
 import { complexDataSet, scatterComplexDataSet } from '../../resources/DemoProps.js';
 import { ScatterChart } from './index.js';
-import { cypressPassThroughTestsFactory, testChartLegendConfig } from '../../../../../cypress/support/utils';
 
 const measures = [
   {
diff --git a/packages/compat/src/components/Toolbar/OverflowPopover.tsx b/packages/compat/src/components/Toolbar/OverflowPopover.tsx
@@ -110,6 +110,8 @@ export const OverflowPopover: FC<OverflowPopoverProps> = (props: OverflowPopover
 
   const [canRenderPortal, setCanRenderPortal] = useState(false);
   useEffect(() => {
+    // SSR guard
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     setCanRenderPortal(true);
   }, []);
 
@@ -164,7 +166,6 @@ 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
diff --git a/packages/compat/src/components/Toolbar/index.tsx b/packages/compat/src/components/Toolbar/index.tsx
@@ -192,11 +192,10 @@ 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
diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx b/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx
@@ -4129,7 +4129,6 @@ 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] = {
@@ -4153,7 +4152,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]);
 
diff --git a/packages/main/src/components/AnalyticalTable/TableBody/VirtualTableBodyContainer.tsx b/packages/main/src/components/AnalyticalTable/TableBody/VirtualTableBodyContainer.tsx
@@ -49,7 +49,7 @@ export const VirtualTableBodyContainer = (props: VirtualTableBodyContainerProps)
   useIsomorphicLayoutEffect(() => {
     if (parentRef.current) {
       // Run before paint so rows appear with the body container (avoids empty-body flash).
-      // eslint-disable-next-line react-hooks/set-state-in-effect
+
       setIsMounted(true);
     }
   }, [parentRef]);
diff --git a/packages/main/src/components/AnalyticalTable/hooks/useSelectionChangeCallback.ts b/packages/main/src/components/AnalyticalTable/hooks/useSelectionChangeCallback.ts
@@ -13,6 +13,8 @@ const useInstance = (instance: TableInstance) => {
 
   const prevSelectedRowIdsRef = useRef(selectedRowIds);
 
+  // react-table instance is intentionally mutable
+  // eslint-disable-next-line react-hooks/immutability
   useEffect(() => {
     const pendingEvent = instance.pendingSelectEvent;
 
diff --git a/packages/main/src/components/AnalyticalTable/hooks/useSyncScroll.ts b/packages/main/src/components/AnalyticalTable/hooks/useSyncScroll.ts
@@ -10,6 +10,8 @@ export function useSyncScroll(
   const isProgrammatic = useRef(false);
   const [isMounted, setIsMounted] = useState(false);
 
+  // DOM scrollTop manipulation, not React state
+  // eslint-disable-next-line react-hooks/immutability
   useEffect(() => {
     if (disabled || !isScrollable) {
       return;
@@ -19,6 +21,8 @@ export function useSyncScroll(
     const scrollbar = refScrollbar.current;
 
     if (!content || !scrollbar || !isMounted) {
+      // Forces a second effect run so refs are populated
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       setIsMounted(true);
       return;
     }
diff --git a/packages/main/src/components/FilterBar/FilterDialog.tsx b/packages/main/src/components/FilterBar/FilterDialog.tsx
@@ -208,11 +208,14 @@ export const FilterDialog = (props: FilterDialogPropTypes) => {
     [children],
   );
 
+  // orderedChildren syncs from children but also has independent mutations (reorder, restore)
+  /* eslint-disable react-hooks/set-state-in-effect */
   useEffect(() => {
     if (children.length) {
       setOrderedChildren(visibleChildren());
     }
   }, [children, visibleChildren]);
+  /* eslint-enable react-hooks/set-state-in-effect */
 
   const renderChildren = () => {
     const searchStringLower = searchString.toLowerCase();
@@ -299,6 +302,8 @@ export const FilterDialog = (props: FilterDialogPropTypes) => {
     }
   }, [orderedChildren, onReorder]);
 
+  // Reorder triggers setOrderedChildren; currentReorderedItem also provides context value
+  /* eslint-disable react-hooks/set-state-in-effect */
   useEffect(() => {
     if (currentReorderedItem?.index != null) {
       const { index, direction } = currentReorderedItem;
@@ -342,6 +347,7 @@ export const FilterDialog = (props: FilterDialogPropTypes) => {
       void currentReorderedItem.target.focus();
     }
   }, [currentReorderedItem]);
+  /* eslint-enable react-hooks/set-state-in-effect */
 
   useEffect(() => {
     if (updatedIndex != null) {
@@ -396,6 +402,8 @@ export const FilterDialog = (props: FilterDialogPropTypes) => {
     }
   };
 
+  // Two-phase pattern: handler sets forceRequired, effect processes it after render and clears it
+  /* eslint-disable react-hooks/set-state-in-effect */
   useEffect(() => {
     if (forceRequired && forceRequired.target) {
       const { prevSelected, selectedKeys, selected: _selected, required, target } = forceRequired;
@@ -414,6 +422,7 @@ export const FilterDialog = (props: FilterDialogPropTypes) => {
     // `forceRequired` triggers async DOM update; no extra deps needed
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [forceRequired]);
+  /* eslint-enable react-hooks/set-state-in-effect */
 
   const renderGroups = () => {
     const groups = {};
@@ -455,6 +464,8 @@ export const FilterDialog = (props: FilterDialogPropTypes) => {
       });
   };
 
+  // One-time lazy init, idempotent under Strict Mode
+  // eslint-disable-next-line react-hooks/refs
   if (initialSelected.current === undefined && selected.length) {
     initialSelected.current = selectedFilters;
   }
diff --git a/packages/main/src/components/FilterBar/index.tsx b/packages/main/src/components/FilterBar/index.tsx
@@ -122,7 +122,7 @@ const FilterBar = forwardRef<HTMLDivElement, FilterBarPropTypes>((props, ref) =>
   useEffect(() => {
     if (filterBarCollapsed !== undefined) {
       // syncing controlled prop to state
-      // eslint-disable-next-line react-hooks/set-state-in-effect
+
       setShowFilters(!hideToolbar ? !filterBarCollapsed : true);
     }
   }, [hideToolbar, filterBarCollapsed]);
diff --git a/packages/main/src/components/VariantManagement/ManageViewsDialog.tsx b/packages/main/src/components/VariantManagement/ManageViewsDialog.tsx
@@ -135,6 +135,8 @@ export const ManageViewsDialog = (props: ManageViewsDialogPropTypes) => {
     }),
   );
 
+  // childrenProps syncs from children but also has independent mutations (delete)
+  /* eslint-disable react-hooks/set-state-in-effect */
   useEffect(() => {
     let _hasApplyAutomaticallyText = false;
     setChildrenProps(
@@ -150,11 +152,15 @@ export const ManageViewsDialog = (props: ManageViewsDialogPropTypes) => {
     );
     setHasApplyAutomaticallyText(_hasApplyAutomaticallyText);
   }, [children]);
+  /* eslint-enable react-hooks/set-state-in-effect */
 
   const [filteredProps, setFilteredProps] = useState(childrenProps);
+  // Resets search filter when source data changes
+  /* eslint-disable react-hooks/set-state-in-effect */
   useEffect(() => {
     setFilteredProps(childrenProps);
   }, [childrenProps]);
+  /* eslint-enable react-hooks/set-state-in-effect */
 
   const [defaultView, setDefaultView] = useState<string>();
 
diff --git a/packages/main/src/internal/useObserveHeights.ts b/packages/main/src/internal/useObserveHeights.ts
@@ -27,7 +27,7 @@ export const useObserveHeights = (
   const prevScrollTop = useRef(0);
   const onScroll = useCallback(
     // ToDo: Check how to properly memoize this callback so it supports React Compiler
-    // eslint-disable-next-line react-hooks/preserve-manual-memoization
+
     (e) => {
       const scrollDown = prevScrollTop.current <= e.target.scrollTop;
       prevScrollTop.current = e.target.scrollTop;
