chore(lint): migrate repo to oxlint and stabilize validation (#4075)

* chore(lint): replace eslint with oxlint tooling and config

Swap ESLint for oxlint across the monorepo. This includes deleting all
per-package eslint.config.js files, adding oxlint.config.ts where needed,
updating package.json scripts/dependencies, renaming eslint-config-rules
to lint-config-rules, fixing depcheck dynamic dependency injection, and
updating dependency profiles and align-deps presets.

No behavioral code changes — only tooling and configuration.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* refactor(lint): apply mechanical oxlint auto-fixes

Automated and trivial fixes flagged by oxlint rules:
- @ts-ignore → @ts-expect-error
- export * → explicit named exports
- forEach → for-of loops
- Array<T> → T[] syntax
- Missing React key props
- Unused parameter underscoring
- Removed stale eslint-disable/ts-ignore comments
- Minor code simplifications (spread removal, type assertion fix)

No behavioral changes — all transformations are semantically equivalent.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix(lint): suppress exhaustive-deps for intentional mount-only hooks

Add eslint-disable-next-line react-hooks/exhaustive-deps comments to hooks
that intentionally use empty or partial dependency arrays by design (e.g.,
mount-only effects, stable ref callbacks). These suppressions preserve the
existing intended behavior while satisfying oxlint's stricter linting.

No code logic changes — only lint suppression comments added/reworded.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix(hooks): restructure hook dependencies and fix stale closures

Correctness fixes for React hook dependency arrays flagged by oxlint's
exhaustive-deps rule. Key changes:

- RadioGroup: destructure context, use functional state updaters (fixes
  state mutation bug where .push() didn't trigger re-render)
- ContextualMenu/Submenu: destructure callbacks, add missing deps
- Menu: fix comma expression bug in MenuPopover, fix self-referential
  useMemo in useMenu.android, destructure context
- Shimmer/Spinner/ActivityIndicator: useRef for Animated.Value (prevents
  recreation on re-render), correct animation effect deps
- Drawer: add isFirstOpen dep, destructure callbacks
- useAsPressable/useAsToggle: add missing callback deps (stale closures)
- TabListAnimatedIndicator: useMemo → useRef for stable animation values
- TabList: refactor disabled tab search loop
- useSlot/useMergeRefs: correct dependency arrays
- Chip/Checkbox/OverflowItem: narrow or correct dep arrays

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* docs(changeset): Migrate from ESLint to oxlint

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix(hooks): address reviewer feedback on useMergeRefs, useSlot, and bundle script

- useMergeRefs: restore [...refs] spread so React compares individual ref
  values rather than the always-new rest parameter array instance
- useSlot: re-add `component` to useMemo deps to ensure memo invalidates
  when the component prop changes
- fluent-tester: revert bundle script to original `rnx-cli bundle --dev false`
  which is more flexible than explicit per-platform chaining

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix(ContextualMenu): restore onDismiss in Callout slot props

Destructuring onDismiss from userProps removed it from the ...rest spread
that gets passed to the Callout root slot. The Callout needs onDismiss to
function correctly — without it, the MenuButton SPACE key test consistently
failed because the menu couldn't dismiss/toggle properly.

Fix: destructure onDismiss AND explicitly pass it back in the root slot props.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: Saadnajmi

.changeset/strict-sides-hang.md

@@ -0,0 +1,78 @@
+---
+"@uifabricshared/foundation-composable": patch
+"@fluentui-react-native/experimental-appearance-additions": patch
+"@uifabricshared/theming-react-native": patch
+"@uifabricshared/foundation-settings": patch
+"@fluentui-react-native/experimental-activity-indicator": patch
+"@fluentui-react-native/experimental-native-font-metrics": patch
+"@uifabricshared/foundation-compose": patch
+"@fluentui-react-native/experimental-native-date-picker": patch
+"@uifabricshared/foundation-tokens": patch
+"@fluentui-react-native/themed-stylesheet": patch
+"@uifabricshared/themed-settings": patch
+"@fluentui-react-native/contextual-menu": patch
+"@fluentui-react-native/lint-config-rules": patch
+"@uifabricshared/theme-registry": patch
+"@fluentui-react-native/vibrancy-view": patch
+"@fluentui-react-native/focus-trap-zone": patch
+"@fluentui-react-native/notification": patch
+"@uifabricshared/theming-ramp": patch
+"@fluentui-react-native/experimental-menu-button": patch
+"@fluentui-react-native/interactive-hooks": patch
+"@fluentui-react-native/persona-coin": patch
+"@fluentui-react-native/menu-button": patch
+"@fluentui-react-native/radio-group": patch
+"@fluentui-react-native/experimental-checkbox": patch
+"@fluentui-react-native/dropdown": patch
+"@fluentui-react-native/experimental-expander": patch
+"@fluentui-react-native/overflow": patch
+"@fluentui-react-native/composition": patch
+"@fluentui-react-native/use-styling": patch
+"@fluentui-react-native/android-theme": patch
+"@fluentui-react-native/default-theme": patch
+"@fluentui-react-native/theming-utils": patch
+"@fluentui-react-native/focus-zone": patch
+"@fluentui-react-native/pressable": patch
+"@fluentui-react-native/separator": patch
+"@fluentui-react-native/popover": patch
+"@fluentui-react-native/experimental-shimmer": patch
+"@fluentui-react-native/spinner": patch
+"@fluentui-react-native/tooltip": patch
+"@fluentui-react-native/use-tokens": patch
+"@fluentui-react-native/theme-tokens": patch
+"@fluentui-react-native/checkbox": patch
+"@fluentui-react-native/experimental-avatar": patch
+"@fluentui-react-native/drawer": patch
+"@fluentui-react-native/experimental-shadow": patch
+"@fluentui-react-native/framework": patch
+"@fluentui-react-native/use-slots": patch
+"@fluentui-react-native/apple-theme": patch
+"@fluentui-react-native/theme-types": patch
+"@fluentui-react-native/win32-theme": patch
+"@fluentui-react-native/callout": patch
+"@fluentui-react-native/divider": patch
+"@fluentui-react-native/persona": patch
+"@fluentui-react-native/tablist": patch
+"@fluentui-react-native/use-slot": patch
+"@fluentui-react-native/avatar": patch
+"@fluentui-react-native/button": patch
+"@fluentui-react-native/switch": patch
+"@fluentui-react-native/badge": patch
+"@fluentui-react-native/input": patch
+"@fluentui-react-native/stack": patch
+"@fluentui-react-native/chip": patch
+"@fluentui-react-native/icon": patch
+"@fluentui-react-native/link": patch
+"@fluentui-react-native/menu": patch
+"@fluentui-react-native/text": patch
+"@fluentui-react-native/theme": patch
+"@fluentui-react-native/framework-base": patch
+"@fluentui/react-native": patch
+"@fluentui-react-native/adapters": patch
+"@fluentui-react-native/styling-utils": patch
+"@fluentui-react-native/tokens": patch
+"@fluentui-react-native/tester": patch
+"@fluentui-react-native/codemods": patch
+---
+
+Migrate from ESLint to oxlint

.vscode/settings.json

@@ -4,9 +4,6 @@
   "editor.trimAutoWhitespace": true,
   "editor.insertSpaces": true,
   "editor.tabSize": 2,
-  "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": "explicit"
-  },
   // Use the OXC formatter as the default formatter which matches what yarn format will do
   "editor.defaultFormatter": "oxc.oxc-vscode",
 
@@ -16,9 +13,6 @@
   "prettier.printWidth": 140,
   "prettier.trailingComma": "all",
 
-  "eslint.enable": true,
-  "eslint.workingDirectories": [{ "pattern": "./packages/framework/eslint-config-rules" }], // use the common eslint config file
-
   "explorer.fileNesting.enabled": true,
   "explorer.fileNesting.patterns": {
     "*.js": "${capture}.js.map, ${capture}.d.ts, ${capture}.d.ts.map",

CLAUDE.md

@@ -56,9 +56,10 @@ The project uses **Yarn 4** (Berry) in **pnpm mode** with **Lage** as the task r
 ```bash
 yarn build      # TypeScript build for all packages (outputs to lib/ and lib-commonjs/)
 yarn test       # Build, lint, and run tests across all packages
-yarn lint       # ESLint across all packages
-yarn bundle     # Bundle all packages
-yarn buildci    # Full CI pipeline: build + test + lint + bundle + depcheck + check-publishing
+yarn lint       # Lint across all packages
+yarn lage bundle # Bundle all packages
+yarn bundle:repo # Convenience wrapper for the repo bundle graph
+yarn lage buildci # Configured CI graph alias from lage.config.mjs
 yarn clean      # Clean build artifacts
 ```
 

README.md

@@ -102,8 +102,9 @@ For running tasks the repo has switched to using [Lage](https://github.com/micro
 
 - `yarn build` - does the typescript build for all packages in the repository
 - `yarn test` - will build, lint, and run any applicable tests on all packages in the repo
-- `yarn bundle` - will bundle all packages in the repo
-- `yarn buildci` - will build, lint, run tests, and bundle everything in the repo
+- `yarn lage bundle` - will bundle all packages in the repo
+- `yarn bundle:repo` - convenience wrapper for `yarn lage bundle`
+- `yarn lage buildci` - will build, lint, run tests, and run the configured repo checks
 
 Note that Lage uses caching to avoid redundant steps and has very minimal output. To avoid caching add `--no-cache` as a command line argument. Similarly adding `--verbose` will give more detailed output.
 

apps/E2E/eslint.config.js

@@ -0,0 +1,12 @@
+import baseConfig from '@fluentui-react-native/lint-config-rules';
+import { defineConfig } from 'oxlint';
+
+export default defineConfig({
+  extends: [baseConfig],
+  rules: {
+    '@rnx-kit/no-export-all': 'off',
+    'typescript/class-literal-property-style': 'off',
+    'typescript/no-duplicate-enum-values': 'off',
+    'typescript/no-invalid-void-type': 'off',
+  },
+});

apps/E2E/oxlint.config.ts

@@ -38,7 +38,7 @@
     "e2etest:macos": "cross-env APPIUM_HOME=.appium wdio run wdio.conf.macos.js",
     "e2etest:win32": "cross-env APPIUM_HOME=.appium wdio run wdio.conf.win32.js",
     "e2etest:windows": "rimraf errorShots reports && cross-env APPIUM_HOME=.appium wdio run wdio.conf.windows.js",
-    "lint": "fluentui-scripts eslint",
+    "lint": "fluentui-scripts lint",
     "lint-package": "fluentui-scripts lint-package"
   },
   "dependencies": {
@@ -47,9 +47,9 @@
   "devDependencies": {
     "@babel/core": "catalog:",
     "@babel/runtime": "catalog:",
-    "@fluentui-react-native/eslint-config-rules": "workspace:*",
     "@fluentui-react-native/focus-zone": "workspace:*",
     "@fluentui-react-native/kit-config": "workspace:*",
+    "@fluentui-react-native/lint-config-rules": "workspace:*",
     "@fluentui-react-native/scripts": "workspace:*",
     "@office-iss/react-native-win32": "^0.81.0",
     "@react-native/metro-babel-transformer": "^0.81.0",

apps/E2E/package.json

@@ -34,7 +34,6 @@ exports.config = {
   bail: 1, // If you only want to run your tests until a specific amount of tests have failed use bail (default is 0 - don't bail, run all tests).
   waitforTimeout: defaultWaitForTimeout, // Default timeout for all waitForXXX commands.
   connectionRetryTimeout: defaultConnectionRetryTimeout, // Timeout for any WebDriver request to a driver or grid.
-  connectionRetryCount: 2, // Maximum count of request retries to the Selenium server.
   specFileRetries: 2, // The number of times to retry the entire spec file when it fails as a whole.
 
   port: 4723, // default appium port
@@ -141,7 +140,7 @@ exports.config = {
   /**
    * Function to be executed after a test (in Mocha/Jasmine).
    */
-  afterTest: (test, context, results) => {
+  afterTest: (test, _context, results) => {
     const resultString = results.passed ? 'Passed' : 'Failed';
     console.log('\n Test Case: ' + test.description + '.    Result: ' + resultString + '\n');
 

apps/E2E/wdio.conf.android.js

@@ -32,7 +32,6 @@ exports.config = {
   bail: 1, // If you only want to run your tests until a specific amount of tests have failed use bail (default is 0 - don't bail, run all tests).
   waitforTimeout: defaultWaitForTimeout, // Default timeout for all waitForXXX commands.
   connectionRetryTimeout: defaultConnectionRetryTimeout, // Timeout for any WebDriver request to a driver or grid.
-  connectionRetryCount: 2, // Maximum count of request retries to the Selenium server.
   specFileRetries: 2, // The number of times to retry the entire spec file when it fails as a whole.
 
   port: 4723, // default appium port
@@ -139,7 +138,7 @@ exports.config = {
   /**
    * Function to be executed after a test (in Mocha/Jasmine).
    */
-  afterTest: (test, context, results) => {
+  afterTest: (test, _context, results) => {
     const resultString = results.passed ? 'Passed' : 'Failed';
     console.log(`\nTest Case: "${test.description}".\nResult: "${resultString}".\nDuration: "${(results.duration / 600).toFixed(2)}s". \n`);
 

apps/E2E/wdio.conf.ios.js

@@ -31,7 +31,6 @@ exports.config = {
   bail: 1, // If you only want to run your tests until a specific amount of tests have failed use bail (default is 0 - don't bail, run all tests).
   waitforTimeout: defaultWaitForTimeout, // Default timeout for all waitForXXX commands.
   connectionRetryTimeout: defaultConnectionRetryTimeout, // Timeout for any WebDriver request to a driver or grid.
-  connectionRetryCount: 2, // Maximum count of request retries to the Selenium server.
   specFileRetries: 1, // The number of times to retry the entire spec file when it fails as a whole.
 
   port: 4723, // default appium port
@@ -154,7 +153,7 @@ exports.config = {
   /**
    * Function to be executed after a test (in Mocha/Jasmine).
    */
-  afterTest: (test, context, results) => {
+  afterTest: (test, _context, results) => {
     const resultString = results.passed ? 'Passed' : 'Failed';
     console.log(`\nTest Case: "${test.description}".\nResult: "${resultString}".\nDuration: "${(results.duration / 600).toFixed(2)}s". \n`);