Merge branch 'main' into update-router-example

.github/renovate.json5

@@ -13,7 +13,7 @@
     'npm:unpublishSafe',
 
     // https://docs.renovatebot.com/presets-schedule/#scheduledaily
-    'schedule:weekday',
+    'schedule:every weekday',
   ],
   vulnerabilityAlerts: {
     enabled: true,

.github/workflows/add-to-project.yml

@@ -21,7 +21,7 @@ jobs:
     name: Add issue with enhancement label to the Proposals project
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/add-to-project@9bfe908f2eaa7ba10340b31e314148fcfe6a2458 # v1.0.1
+      - uses: actions/add-to-project@244f685bbc3b7adfa8466e08b698b5577571133e # v1.0.2
         with:
           labeled: ${{ env.LABEL_ENHANCEMENT }}
           project-url: ${{ env.PROPOSALS_PROJECT_URL }}
@@ -31,7 +31,7 @@ jobs:
     name: Add issue with typescript label to the TypeScript Adoption project
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/add-to-project@9bfe908f2eaa7ba10340b31e314148fcfe6a2458 # v1.0.1
+      - uses: actions/add-to-project@244f685bbc3b7adfa8466e08b698b5577571133e # v1.0.2
         with:
           labeled: ${{ env.LABEL_TYPESCRIPT }}
           project-url: ${{ env.TYPESCRIPT_PROJECT_URL }}
@@ -41,7 +41,7 @@ jobs:
     name: Add issue with AI4UX label to the AI4UX project
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/add-to-project@9bfe908f2eaa7ba10340b31e314148fcfe6a2458 # v1.0.1
+      - uses: actions/add-to-project@244f685bbc3b7adfa8466e08b698b5577571133e # v1.0.2
         with:
           labeled: ${{ env.LABEL_AI4UX }}
           project-url: ${{ env.AI4UX_PROJECT_URL }}
@@ -51,7 +51,7 @@ jobs:
     name: Add issue to the Design System project
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/add-to-project@9bfe908f2eaa7ba10340b31e314148fcfe6a2458 # v1.0.1
+      - uses: actions/add-to-project@244f685bbc3b7adfa8466e08b698b5577571133e # v1.0.2
         with:
           labeled: ${{ env.LABEL_ENHANCEMENT }}, ${{ env.LABEL_TYPESCRIPT }}
           label-operator: NOT

.github/workflows/codeql-analysis.yml

@@ -24,9 +24,9 @@ jobs:
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@23acc5c183826b7a8a97bce3cecc52db901f8251 # v3.25.10
+        uses: github/codeql-action/init@b611370bb5703a7efb587f9d136a52ea24c5c38c # v3.25.11
         with:
           languages: javascript
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@23acc5c183826b7a8a97bce3cecc52db901f8251 # v3.25.10
+        uses: github/codeql-action/analyze@b611370bb5703a7efb587f9d136a52ea24c5c38c # v3.25.11

.github/workflows/deploy-packages.yml

@@ -39,7 +39,7 @@ jobs:
           app_id: ${{ secrets.APP_ID }}
           private_key: ${{ secrets.APP_PRIVATE_KEY }}
       - name: Create Pull Request
-        uses: peter-evans/create-pull-request@6d6857d36972b65feb161a90e484f2984215f83e # v6.0.5
+        uses: peter-evans/create-pull-request@c5a7806660adbe173f04e3e038b0ccdcd758773c # v6.1.0
         with:
           branch: 'release/update-carbon-deps'
           commit-message: 'chore(release): update carbon deps'
@@ -82,7 +82,7 @@ jobs:
           app_id: ${{ secrets.APP_ID }}
           private_key: ${{ secrets.APP_PRIVATE_KEY }}
       - name: Create Pull Request
-        uses: peter-evans/create-pull-request@6d6857d36972b65feb161a90e484f2984215f83e # v6.0.5
+        uses: peter-evans/create-pull-request@c5a7806660adbe173f04e3e038b0ccdcd758773c # v6.1.0
         with:
           branch: 'release/update-carbon-deps'
           commit-message: 'chore(release): update carbon deps'

.github/workflows/version.yml

@@ -64,7 +64,7 @@ jobs:
           app_id: ${{ secrets.APP_ID }}
           private_key: ${{ secrets.APP_PRIVATE_KEY }}
       - name: Create Pull Request
-        uses: peter-evans/create-pull-request@6d6857d36972b65feb161a90e484f2984215f83e # v6.0.5
+        uses: peter-evans/create-pull-request@c5a7806660adbe173f04e3e038b0ccdcd758773c # v6.1.0
         with:
           branch: 'release/${{ github.event.inputs.tag }}'
           commit-message: 'chore(release): ${{ github.event.inputs.tag }}'

.whitesource

@@ -1,4 +1,6 @@
 {
   "settingsInheritedFrom": "ibm-mend-config/mend-config@main",
-  "minSeverityLevel": "NONE"
+  "issueSettings": {
+    "minSeverityLevel": "NONE"
+  }
 }

config/eslint-config-carbon/package.json

@@ -1,7 +1,7 @@
 {
   "name": "eslint-config-carbon",
   "description": "ESLint configuration for Carbon",
-  "version": "3.12.0",
+  "version": "3.13.0-rc.0",
   "license": "Apache-2.0",
   "main": "index.js",
   "repository": {

e2e/components/DatePicker/DatePicker-test.avt.e2e.js

@@ -87,7 +87,7 @@ test.describe('@avt DatePicker', () => {
       },
     });
 
-    // for some reason the firs tab is not working to focus the first tabstop, so focusing manually
+    // for some reason the first tab is not working to focus the first tabstop, so focusing manually
     await page.getByRole('textbox', { name: 'Date Picker label' }).focus();
     await expect(
       page.getByRole('textbox', { name: 'Date Picker label' })
@@ -96,9 +96,6 @@ test.describe('@avt DatePicker', () => {
     await page.keyboard.press('ArrowDown');
     await expect(page.locator('span.today')).toBeFocused();
     await page.keyboard.press('Escape');
-    await expect(
-      page.getByRole('textbox', { name: 'Date Picker label' })
-    ).toBeFocused();
     await expect(page.locator('div.flatpickr-calendar')).not.toHaveClass(
       /open/
     );
@@ -126,18 +123,7 @@ test.describe('@avt DatePicker', () => {
     await expect(page.locator('div.flatpickr-calendar')).toHaveClass(/open/);
     await page.keyboard.press('ArrowDown');
     await page.keyboard.press('Enter');
-    await expect(
-      page.locator('input#date-picker-input-id-start')
-    ).toBeFocused();
-    await expect(page.locator('div.flatpickr-calendar')).not.toHaveClass(
-      /open/
-    );
-    await page.keyboard.press('Tab');
-    await expect(
-      page.locator('input#date-picker-input-id-finish')
-    ).toBeFocused();
-    await expect(page.locator('div.flatpickr-calendar')).toHaveClass(/open/);
-    await page.keyboard.press('Escape');
+    await page.keyboard.press('Enter');
     await expect(
       page.locator('input#date-picker-input-id-finish')
     ).toBeFocused();

e2e/components/FluidDatePicker/FluidDatePicker-test.avt.e2e.js

@@ -70,7 +70,6 @@ test.describe('@avt FluidDatePicker', () => {
     await page.keyboard.press('ArrowDown');
     await expect(page.locator('span.today')).toBeFocused();
     await page.keyboard.press('Escape');
-    await expect(page.getByRole('textbox', { name: 'Label' })).toBeFocused();
     await expect(page.locator('div.flatpickr-calendar')).not.toHaveClass(
       /open/
     );
@@ -98,18 +97,6 @@ test.describe('@avt FluidDatePicker', () => {
     await expect(page.locator('div.flatpickr-calendar')).toHaveClass(/open/);
     await page.keyboard.press('ArrowDown');
     await page.keyboard.press('Enter');
-    await expect(
-      page.locator('input#date-picker-input-id-start')
-    ).toBeFocused();
-    await expect(page.locator('div.flatpickr-calendar')).not.toHaveClass(
-      /open/
-    );
-    await page.keyboard.press('Tab');
-    await expect(
-      page.locator('input#date-picker-input-id-finish')
-    ).toBeFocused();
-    await expect(page.locator('div.flatpickr-calendar')).toHaveClass(/open/);
-    await page.keyboard.press('Escape');
     await expect(
       page.locator('input#date-picker-input-id-finish')
     ).toBeFocused();

e2e/components/Tabs/Tabs-test.avt.e2e.js

@@ -33,6 +33,17 @@ test.describe('@avt Tabs', () => {
     await expect(page).toHaveNoACViolations('Tabs-contained');
   });
 
+  test('@avt-advanced-states tabs vertical', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Tabs',
+      id: 'components-tabs--vertical',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('Tabs-vertical');
+  });
+
   test('@avt-advanced-states tabs contained with icons', async ({ page }) => {
     await visitStory(page, {
       component: 'Tabs',
@@ -150,6 +161,53 @@ test.describe('@avt Tabs', () => {
     await expect(page.getByRole('tab', { name: 'Tab label 4' })).toBeFocused();
   });
 
+  test.slow('@avt-keyboard-nav', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Tabs',
+      id: 'components-tabs--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+
+    // Focus on the first tab via keyboard navigation
+    await page.keyboard.press('Tab');
+    await expect(page.getByRole('tab', { name: 'Tab label 1' })).toBeVisible();
+
+    // Focus should be on content within the first Tab
+    await page.keyboard.press('Tab');
+    await expect(
+      page.getByRole('tabpanel', { name: 'Tab Panel 1' })
+    ).toBeFocused();
+
+    // Moving back one tab stop we should back on Tab label 1
+    await page.keyboard.press('Shift+Tab');
+    await expect(page.getByRole('tab', { name: 'Tab label 1' })).toBeFocused();
+
+    // Nav through the default tab panel via keyboard navigation
+    await page.keyboard.press('ArrowDown');
+    await expect(page.getByRole('tab', { name: 'Tab label 2' })).toBeVisible();
+
+    // Move through the actions in the second tab
+    await page.keyboard.press('Tab');
+    await expect(page.getByRole('checkbox')).toBeVisible();
+
+    await page.keyboard.press('Tab');
+    await expect(page.getByRole('button', { name: 'Submit' })).toBeVisible();
+
+    await page.keyboard.press('Tab');
+    await expect(page.getByRole('textbox')).toBeVisible();
+
+    await page.keyboard.press('Shift+Tab');
+    await page.keyboard.press('Shift+Tab');
+    await page.keyboard.press('Shift+Tab');
+    await expect(page.getByRole('tab', { name: 'Tab label 2' })).toBeFocused();
+
+    // Continue to nav through the default tab panel via keyboard navigation
+    await page.keyboard.press('ArrowDown');
+    await expect(page.getByRole('tab', { name: 'Tab label 4' })).toBeFocused();
+  });
+
   test.slow('@avt-keyboard-nav - dismissable state', async ({ page }) => {
     await visitStory(page, {
       component: 'Tabs',

e2e/components/Tabs/Tabs-test.e2e.js

@@ -111,6 +111,14 @@ test.describe('Tabs', () => {
           theme,
         });
       });
+
+      test('vertical @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'Tabs',
+          id: 'components-tabs--vertical',
+          theme,
+        });
+      });
     });
   });
 });

examples/class-prefix/package.json

@@ -1,15 +1,15 @@
 {
   "name": "class-prefix",
   "private": true,
-  "version": "0.57.0",
+  "version": "0.58.0-rc.1",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@carbon/react": "^1.60.0",
+    "@carbon/react": "^1.61.0-rc.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

examples/codesandbox-styles/package.json

@@ -1,7 +1,7 @@
 {
   "name": "codesandbox-styles",
   "private": true,
-  "version": "0.63.0",
+  "version": "0.64.0-rc.0",
   "type": "module",
   "scripts": {
     "dev": "vite"
@@ -11,6 +11,6 @@
     "vite": "^4.3.8"
   },
   "dependencies": {
-    "@carbon/styles": "^1.60.0"
+    "@carbon/styles": "^1.61.0-rc.0"
   }
 }

examples/custom-theme/package.json

@@ -1,15 +1,15 @@
 {
   "name": "custom-theme",
   "private": true,
-  "version": "0.58.0",
+  "version": "0.59.0-rc.1",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@carbon/react": "^1.60.0",
+    "@carbon/react": "^1.61.0-rc.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

examples/id-prefix/package.json

@@ -1,15 +1,15 @@
 {
   "name": "id-prefix",
   "private": true,
-  "version": "0.57.0",
+  "version": "0.58.0-rc.1",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@carbon/react": "^1.60.0",
+    "@carbon/react": "^1.61.0-rc.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

examples/light-dark-mode/package.json

@@ -1,15 +1,15 @@
 {
   "name": "examples-light-dark",
   "private": true,
-  "version": "0.58.0",
+  "version": "0.59.0-rc.1",
   "scripts": {
     "build": "next build",
     "dev": "next dev",
     "lint": "next lint",
     "start": "next start"
   },
   "dependencies": {
-    "@carbon/react": "^1.60.0",
+    "@carbon/react": "^1.61.0-rc.1",
     "next": "14.1.1",
     "react": "18.2.0",
     "react-dom": "18.2.0"

examples/nextjs/package.json

@@ -1,15 +1,15 @@
 {
   "name": "examples-nextjs",
   "private": true,
-  "version": "0.60.0",
+  "version": "0.61.0-rc.1",
   "scripts": {
     "build": "next build",
     "dev": "next dev",
     "lint": "next lint",
     "start": "next start"
   },
   "dependencies": {
-    "@carbon/react": "^1.60.0",
+    "@carbon/react": "^1.61.0-rc.1",
     "next": "14.1.1",
     "react": "18.2.0",
     "react-dom": "18.2.0"

examples/v10-token-compat-in-v11/package.json

@@ -1,15 +1,15 @@
 {
   "name": "v10-token-compat-in-v11",
   "private": true,
-  "version": "0.58.0",
+  "version": "0.59.0-rc.1",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@carbon/react": "^1.60.0",
+    "@carbon/react": "^1.61.0-rc.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

examples/vite/package.json

@@ -1,15 +1,15 @@
 {
   "name": "vite",
   "private": true,
-  "version": "0.58.0",
+  "version": "0.59.0-rc.1",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@carbon/react": "^1.60.0",
+    "@carbon/react": "^1.61.0-rc.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },