chore(deps): update all non-major dependencies (minor)

.github/workflows/test.yml

@@ -116,6 +116,10 @@ jobs:
           name: build-${{ matrix.react }}
           path: packages
 
+      # TODO: remove once Cypress properly installs the binary via postinstall
+      - name: Install Cypress binary
+        run: npx cypress install
+
       - name: Cypress run
         uses: cypress-io/github-action@783cb3f07983868532cabaedaa1e6c00ff4786a8 # v7.1.9
         with:

.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

.yarnrc.yml

@@ -1,3 +1,3 @@
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.13.0.cjs
+yarnPath: .yarn/releases/yarn-4.14.1.cjs

cypress.config.ts

@@ -1,16 +1,6 @@
 import codeCoverageTask from '@cypress/code-coverage/task';
 import { defineConfig } from 'cypress';
 
-//todo: remove once officially supported by Cypress: https://github.com/cypress-io/cypress/issues/33078
-const stripLegacyCypressOptimizeDepsPlugin = () => ({
-  name: 'cypress-vite8-compat',
-  config(config) {
-    if (config?.optimizeDeps?.esbuildOptions) {
-      delete config.optimizeDeps.esbuildOptions;
-    }
-  },
-});
-
 export default defineConfig({
   env: {
     codeCoverage: {
@@ -37,12 +27,6 @@ export default defineConfig({
     devServer: {
       framework: 'react',
       bundler: 'vite',
-      viteConfig: {
-        // passing `viteConfig` as an object makes Cypress set `configFile: false` internally
-        configFile: 'vite.config.ts',
-        // plugins from both configs are merged by Vite's `mergeConfig`
-        plugins: [stripLegacyCypressOptimizeDepsPlugin()],
-      },
     },
     experimentalRunAllSpecs: true,
     excludeSpecPattern: ['**/e2e/**', ...(process.env.CI ? ['**/SelectDialog/**'] : [])],

examples/vite-ts/cypress.config.ts

@@ -1,15 +1,5 @@
 import { defineConfig } from 'cypress';
 
-//todo: remove once officially supported by Cypress: https://github.com/cypress-io/cypress/issues/33078
-const stripLegacyCypressOptimizeDepsPlugin = () => ({
-  name: 'cypress-vite8-compat',
-  config(config) {
-    if (config?.optimizeDeps?.esbuildOptions) {
-      delete config.optimizeDeps.esbuildOptions;
-    }
-  },
-});
-
 export default defineConfig({
   includeShadowDom: true,
   viewportWidth: 1920,
@@ -18,12 +8,6 @@ export default defineConfig({
     devServer: {
       framework: 'react',
       bundler: 'vite',
-      viteConfig: {
-        // passing `viteConfig` as an object makes Cypress set `configFile: false` internally
-        configFile: 'vite.config.ts',
-        // plugins from both configs are merged by Vite's `mergeConfig`
-        plugins: [stripLegacyCypressOptimizeDepsPlugin()],
-      },
     },
   },
 

package.json

@@ -76,9 +76,9 @@
     "@types/react-dom": "19.2.3",
     "@ui5/webcomponents-tools": "2.21.1",
     "@vitejs/plugin-react": "6.0.1",
-    "chromatic": "16.2.0",
+    "chromatic": "16.3.0",
     "cssnano": "7.1.5",
-    "cypress": "15.13.1",
+    "cypress": "15.14.0",
     "cypress-real-events": "1.15.0",
     "dedent": "1.7.2",
     "documentation": "14.0.3",
@@ -89,10 +89,10 @@
     "eslint-plugin-no-only-tests": "3.3.0",
     "eslint-plugin-prettier": "5.5.5",
     "eslint-plugin-react": "7.37.5",
-    "eslint-plugin-react-hooks": "7.0.1",
+    "eslint-plugin-react-hooks": "7.1.0",
     "eslint-plugin-storybook": "10.3.5",
     "glob": "13.0.6",
-    "globals": "17.4.0",
+    "globals": "17.5.0",
     "husky": "9.1.7",
     "lerna": "9.0.7",
     "lint-staged": "16.4.0",
@@ -132,5 +132,5 @@
       "lcov"
     ]
   },
-  "packageManager": "yarn@4.13.0"
+  "packageManager": "yarn@4.14.1"
 }

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') {

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);

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 = [
   {

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 = [
   {

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 = [
   {

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 = [
   {

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 = [
   {

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',

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 = [
   {

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',

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 = [
   {

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', () => {

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 = [
   {

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

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

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]);
 

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]);

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;
 

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;
     }

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;
   }