Merge branch 'main' into r/bridge

.changeset/lucky-trainers-repair.md

@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': minor
+---
+
+Added support for React 19.

.changeset/yellow-roses-know.md

@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': minor
+---
+
+Bumped the minimum required version of `@tanstack/react-virtual` to `3.12.0`.

apps/react-workshop/package.json

@@ -18,8 +18,8 @@
     "cypress-image-diff-js": "1.30.1",
     "eslint": "*",
     "eslint-config-prettier": "^8.8.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "typescript": "*",
     "vite": "*"
   },

apps/react-workshop/src/Alert.test.ts

@@ -18,6 +18,8 @@ describe('Alert', () => {
     it(testName, () => {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(500); // TODO: Investigate
+
       cy.compareSnapshot(testName);
     });
   });

apps/react-workshop/src/Anchor.test.ts

@@ -10,6 +10,8 @@ describe('Anchor', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(500); // TODO: Investigate
+
       cy.compareSnapshot(testName);
     });
   });

apps/react-workshop/src/Avatar.test.ts

@@ -17,6 +17,7 @@ describe('Avatar', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(500); // TODO: Investigate
 
       // Hide images if present to avoid uncertainties in testing
       if (testName === 'With Image') {

apps/react-workshop/src/AvatarGroup.test.ts

@@ -16,6 +16,7 @@ describe('AvatarGroup', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(500); // TODO: Investigate
 
       if (testName.includes('Tooltip')) {
         cy.get('div').contains('3').trigger('mouseenter');

apps/react-workshop/src/Badge.test.ts

@@ -10,6 +10,8 @@ describe('Badge', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(500); // TODO: Investigate
+
       cy.compareSnapshot(testName);
     });
   });

apps/react-workshop/src/Blockquote.test.ts

@@ -10,6 +10,8 @@ describe('Blockquote', () => {
     it(testName, () => {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(500); // TODO: Investigate
+
       cy.compareSnapshot(testName);
     });
   });

apps/react-workshop/src/Breadcrumbs.test.ts

@@ -18,6 +18,7 @@ describe('Breadcrumbs', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(500); // TODO: Investigate
 
       if (testName.includes('Overflow')) {
         cy.get('small').hide();

apps/react-workshop/src/Button.test.ts

@@ -21,6 +21,8 @@ describe('Button', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(500); // TODO: Investigate
+
       cy.compareSnapshot(testName);
     });
   });

apps/react-workshop/src/ButtonGroup.test.ts

@@ -16,6 +16,7 @@ describe('ButtonGroup', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(500); // TODO: Investigate
 
       if (testName.includes('Overflow')) {
         cy.get('small').hide();

apps/react-workshop/src/Carousel.test.ts

@@ -10,6 +10,7 @@ describe('Carousel', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+
       cy.wait(1000); // wait for dots list to finish scrolling
       cy.compareSnapshot(testName);
     });

apps/react-workshop/src/Checkbox.test.ts

@@ -19,6 +19,8 @@ describe('Checkbox', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(500); // TODO: Investigate
+
       cy.compareSnapshot(testName);
     });
   });

apps/react-workshop/src/Code.test.ts

@@ -10,6 +10,8 @@ describe('Code', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(500); // TODO: Investigate
+
       cy.compareSnapshot(testName);
     });
   });

apps/react-workshop/src/ColorPicker.test.ts

@@ -10,6 +10,7 @@ describe('ColorPicker', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+
       cy.get('#ladle-root').within(() => {
         cy.get('button').first().click();
       });

apps/react-workshop/src/ComboBox.test.ts

@@ -21,6 +21,7 @@ describe('ComboBox', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(500); // TODO: Investigate
 
       if (testName === 'Multiple Select') {
         // Hide the dividers and checkboxs/labels for test image

apps/react-workshop/src/DatePicker.test.ts

@@ -18,6 +18,7 @@ describe('DatePicker', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+
       cy.get('#picker-button').siblings('span').hide();
       cy.get('#picker-button').click();
       cy.wait(30);

apps/react-workshop/src/Dialog.test.ts

@@ -16,6 +16,7 @@ describe('Dialog', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+
       cy.get('#ladle-root').within(() => {
         cy.get('button').first().click();
       });

apps/react-workshop/src/DropdownButton.test.ts

@@ -10,6 +10,8 @@ describe('DropdownButton', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(500); // TODO: Investigate
+
       cy.compareSnapshot(`${testName} (Closed)`);
       cy.get('#ladle-root').within(() => {
         cy.get('button').click();

apps/react-workshop/src/DropdownMenu.test.ts

@@ -18,6 +18,8 @@ describe('DropdownMenu', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(500); // TODO: Investigate
+
       cy.compareSnapshot(`${testName} (Closed)`);
       cy.get('#ladle-root').within(() => {
         cy.get('button').first().click();

apps/react-workshop/src/ExpandableBlock.test.ts

@@ -18,6 +18,8 @@ describe('ExpandableBlock', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(500); // TODO: Investigate
+
       cy.compareSnapshot(`${testName} (Closed)`);
       if (testName !== 'Disabled') {
         cy.get('[type=button]').first().click();

apps/react-workshop/src/Fieldset.test.ts

@@ -10,6 +10,8 @@ describe('Fieldset', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(500); // TODO: Investigate
+
       cy.compareSnapshot(testName);
     });
   });

apps/react-workshop/src/FileUpload.test.ts

@@ -14,6 +14,8 @@ describe('FileUpload', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(500); // TODO: Investigate
+
       cy.compareSnapshot(testName);
       if (
         testName === 'Default File Upload Card' ||

apps/react-workshop/src/Flex.test.ts

@@ -10,6 +10,8 @@ describe('Flex', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(500); // TODO: Investigate
+
       cy.compareSnapshot(testName);
     });
   });

apps/react-workshop/src/Footer.test.ts

@@ -17,6 +17,8 @@ describe('Footer', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(500); // TODO: Investigate
+
       cy.compareSnapshot(testName);
     });
   });

apps/react-workshop/src/Header.test.ts

@@ -10,6 +10,7 @@ describe('Header', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(500); // TODO: Investigate
 
       // Hide images if present to avoid uncertainties in testing
       if (

apps/react-workshop/src/Icon.test.ts

@@ -17,6 +17,8 @@ describe('Icon', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(500); // TODO: Investigate
+
       cy.compareSnapshot(testName);
     });
   });

apps/react-workshop/src/IconButton.test.ts

@@ -15,6 +15,8 @@ describe('IconButton', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(500); // TODO: Investigate
+
       cy.compareSnapshot(testName);
 
       if (index === 0) {

apps/react-workshop/src/IdeasButton.test.ts

@@ -10,6 +10,8 @@ describe('IdeasButton', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(500); // TODO: Investigate
+
       cy.compareSnapshot(testName);
     });
   });

apps/react-workshop/src/InformationPanel.test.ts

@@ -10,6 +10,7 @@ describe('InformationPanel', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+
       cy.get('#ladle-root').within(() => {
         cy.get('button').first().click();
       });

apps/react-workshop/src/Input.test.ts

@@ -10,6 +10,8 @@ describe('Input', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(500); // TODO: Investigate
+
       cy.compareSnapshot(testName);
     });
   });

apps/react-workshop/src/InputGrid.test.ts

@@ -16,6 +16,8 @@ describe('InputGrid', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(500); // TODO: Investigate
+
       cy.compareSnapshot(testName);
     });
   });

apps/react-workshop/src/InputGroup.test.ts

@@ -10,6 +10,8 @@ describe('InputGroup', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(500); // TODO: Investigate
+
       cy.compareSnapshot(testName);
     });
   });

apps/react-workshop/src/InputWithDecoration.test.ts

@@ -10,6 +10,8 @@ describe('InputWithDecorations', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(500); // TODO: Investigate
+
       cy.compareSnapshot(testName);
     });
   });

apps/react-workshop/src/Kbd.test.ts

@@ -11,6 +11,8 @@ describe('Kbd', () => {
 
     it(testName, () => {
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(500); // TODO: Investigate
+
       cy.compareSnapshot(testName);
     });
   });

apps/react-workshop/src/Label.test.ts

@@ -10,6 +10,8 @@ describe('Label', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(500); // TODO: Investigate
+
       cy.compareSnapshot(testName);
     });
   });

apps/react-workshop/src/LabeledInput.test.ts

@@ -24,6 +24,8 @@ describe('LabeledInput', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(500); // TODO: Investigate
+
       cy.compareSnapshot(testName);
     });
   });
@@ -35,6 +37,7 @@ describe('LabeledInput', () => {
     it(newTestName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(500); // TODO: Investigate
 
       // Click the input to show the status outline
       cy.get('input').first().click();

apps/react-workshop/src/LabeledSelect.test.ts

@@ -17,6 +17,8 @@ describe('LabeledSelect', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(500); // TODO: Investigate
+
       cy.compareSnapshot(testName);
     });
   });

apps/react-workshop/src/LabeledTextarea.test.ts

@@ -21,6 +21,8 @@ describe('LabeledTextarea', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(500); // TODO: Investigate
+
       cy.compareSnapshot(testName);
     });
   });
@@ -32,6 +34,7 @@ describe('LabeledTextarea', () => {
     it(newTestName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(500); // TODO: Investigate
 
       // Click the textarea to show the status outline
       cy.get('textarea').first().click();

apps/react-workshop/src/List.test.ts

@@ -11,6 +11,8 @@ describe('NotificationMarker', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(500); // TODO: Investigate
+
       cy.compareSnapshot(testName);
     });
   });

apps/react-workshop/src/Modal.test.ts

@@ -10,6 +10,7 @@ describe('Modal', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+
       cy.get('#ladle-root').within(() => {
         cy.get('button').first().click();
       });

apps/react-workshop/src/NonIdealState.test.ts

@@ -20,6 +20,8 @@ describe('NonIdealState', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(500); // TODO: Investigate
+
       cy.compareSnapshot(testName);
     });
   });

apps/react-workshop/src/NotificationMarker.test.ts

@@ -13,6 +13,8 @@ describe('NotificationMarker', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(500); // TODO: Investigate
+
       cy.compareSnapshot(testName);
     });
   });