diff --git a/apps/react-17-tests-v9/just.config.ts b/apps/react-17-tests-v9/just.config.ts index 5ef338beca338..409e9448d07de 100644 --- a/apps/react-17-tests-v9/just.config.ts +++ b/apps/react-17-tests-v9/just.config.ts @@ -17,6 +17,7 @@ task('type-check', () => typeRoots: [join(usedNodeModulesPath, './@types')], paths: { react: [join(usedNodeModulesPath, './@types/react/index.d.ts')], + 'react/jsx-runtime': [join(usedNodeModulesPath, './@types/react/jsx-runtime.d.ts')], 'react-dom': [join(usedNodeModulesPath, './@types/react-dom/index.d.ts')], }, }, diff --git a/apps/react-18-tests-v8/just.config.ts b/apps/react-18-tests-v8/just.config.ts index 5ef338beca338..409e9448d07de 100644 --- a/apps/react-18-tests-v8/just.config.ts +++ b/apps/react-18-tests-v8/just.config.ts @@ -17,6 +17,7 @@ task('type-check', () => typeRoots: [join(usedNodeModulesPath, './@types')], paths: { react: [join(usedNodeModulesPath, './@types/react/index.d.ts')], + 'react/jsx-runtime': [join(usedNodeModulesPath, './@types/react/jsx-runtime.d.ts')], 'react-dom': [join(usedNodeModulesPath, './@types/react-dom/index.d.ts')], }, }, diff --git a/apps/react-18-tests-v9/just.config.ts b/apps/react-18-tests-v9/just.config.ts index 5ef338beca338..409e9448d07de 100644 --- a/apps/react-18-tests-v9/just.config.ts +++ b/apps/react-18-tests-v9/just.config.ts @@ -17,6 +17,7 @@ task('type-check', () => typeRoots: [join(usedNodeModulesPath, './@types')], paths: { react: [join(usedNodeModulesPath, './@types/react/index.d.ts')], + 'react/jsx-runtime': [join(usedNodeModulesPath, './@types/react/jsx-runtime.d.ts')], 'react-dom': [join(usedNodeModulesPath, './@types/react-dom/index.d.ts')], }, }, diff --git a/apps/react-19-tests-v9/package.json b/apps/react-19-tests-v9/package.json index 9033e8bbb4089..55786dd19fb19 100644 --- a/apps/react-19-tests-v9/package.json +++ b/apps/react-19-tests-v9/package.json @@ -5,7 +5,9 @@ "private": true, "scripts": { "type-check": "just-scripts type-check", - "type-check:integration": "tsc -p tsconfig.react-19.json --noEmit", + "type-check:integration": "yarn type-check:integration:stories && yarn type-check:integration:source", + "type-check:integration:stories": "tsc -p tsconfig.react-19.json --noEmit", + "type-check:integration:source": "tsc -p tsconfig.react-19-source.json --noEmit", "lint": "ESLINT_USE_FLAT_CONFIG=false eslint --ext .js,.ts,.tsx ./src", "test": "jest --passWithNoTests", "test:integration": "jest --passWithNoTests -u -c jest-react-19.config.js", diff --git a/apps/react-19-tests-v9/tsconfig.react-19-source.json b/apps/react-19-tests-v9/tsconfig.react-19-source.json new file mode 100644 index 0000000000000..2ab2db832ad89 --- /dev/null +++ b/apps/react-19-tests-v9/tsconfig.react-19-source.json @@ -0,0 +1,44 @@ +{ + "compilerOptions": { + "target": "ES2019", + "module": "esnext", + "moduleResolution": "node", + "lib": ["ES2019", "ES2020.Intl", "dom"], + "sourceMap": true, + "strict": true, + "pretty": true, + "noEmit": true, + "isolatedModules": true, + "importHelpers": true, + "jsx": "react", + "noUnusedLocals": true, + "preserveConstEnums": true, + "skipLibCheck": true, + "typeRoots": ["./node_modules/@types"], + "types": [], + "baseUrl": ".", + "paths": { + "react/jsx-runtime": ["./node_modules/@types/react/jsx-runtime.d.ts"], + "react": ["./node_modules/@types/react/index.d.ts"], + "react-dom": ["./node_modules/@types/react-dom/index.d.ts"] + } + }, + "exclude": [ + "../../packages/react-components/react-migration-v0-v9/**", + "../../packages/react-components/react-migration-v8-v9/**", + "../../packages/react-components/react-conformance-griffel/**", + "../../packages/react-components/**/*.stories.tsx", + "../../packages/react-components/**/*.stories.ts", + "../../packages/react-components/**/*.test.tsx", + "../../packages/react-components/**/*.test.ts", + "../../packages/react-components/**/*.spec.tsx", + "../../packages/react-components/**/*.spec.ts", + "../../packages/react-components/**/*.cy.tsx", + "../../packages/react-components/**/*.cy.ts" + ], + "include": [ + "../../packages/react-components/react-*/library/src/*.tsx", + "../../packages/react-components/react-*/library/src/*.ts" + ], + "files": ["../../typings/static-assets/index.d.ts", "../../typings/environment/index.d.ts"] +} diff --git a/change/@fluentui-react-accordion-b4762b7e-e0f7-46f4-b2bd-d0005bbb4f42.json b/change/@fluentui-react-accordion-b4762b7e-e0f7-46f4-b2bd-d0005bbb4f42.json new file mode 100644 index 0000000000000..b19ca6d59c133 --- /dev/null +++ b/change/@fluentui-react-accordion-b4762b7e-e0f7-46f4-b2bd-d0005bbb4f42.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: react 19 type issues", + "packageName": "@fluentui/react-accordion", + "email": "dmytrokirpa@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-aria-0b497e69-88af-47b5-8094-27e8ad7bed02.json b/change/@fluentui-react-aria-0b497e69-88af-47b5-8094-27e8ad7bed02.json new file mode 100644 index 0000000000000..2f3d20a82c066 --- /dev/null +++ b/change/@fluentui-react-aria-0b497e69-88af-47b5-8094-27e8ad7bed02.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: react 19 type issues", + "packageName": "@fluentui/react-aria", + "email": "dmytrokirpa@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-avatar-94165b82-be71-4d8b-ae88-59d4e05d5b0d.json b/change/@fluentui-react-avatar-94165b82-be71-4d8b-ae88-59d4e05d5b0d.json new file mode 100644 index 0000000000000..ffffea0cf3a92 --- /dev/null +++ b/change/@fluentui-react-avatar-94165b82-be71-4d8b-ae88-59d4e05d5b0d.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: react 19 type issues", + "packageName": "@fluentui/react-avatar", + "email": "dmytrokirpa@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-badge-3d08407f-1865-4d22-8645-8b5ef76fb35a.json b/change/@fluentui-react-badge-3d08407f-1865-4d22-8645-8b5ef76fb35a.json new file mode 100644 index 0000000000000..cfea5f67c7431 --- /dev/null +++ b/change/@fluentui-react-badge-3d08407f-1865-4d22-8645-8b5ef76fb35a.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: react 19 type issues", + "packageName": "@fluentui/react-badge", + "email": "dmytrokirpa@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-breadcrumb-87c053f3-dd9c-4b29-a021-41d25ad918d0.json b/change/@fluentui-react-breadcrumb-87c053f3-dd9c-4b29-a021-41d25ad918d0.json new file mode 100644 index 0000000000000..a68156abc6b6b --- /dev/null +++ b/change/@fluentui-react-breadcrumb-87c053f3-dd9c-4b29-a021-41d25ad918d0.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: react 19 type issues", + "packageName": "@fluentui/react-breadcrumb", + "email": "dmytrokirpa@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-button-eccfdfe3-15eb-4ff2-8949-998ed82619d4.json b/change/@fluentui-react-button-eccfdfe3-15eb-4ff2-8949-998ed82619d4.json new file mode 100644 index 0000000000000..8cb95b06d9bc7 --- /dev/null +++ b/change/@fluentui-react-button-eccfdfe3-15eb-4ff2-8949-998ed82619d4.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: react 19 type issues", + "packageName": "@fluentui/react-button", + "email": "dmytrokirpa@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-calendar-compat-9800e5f6-b671-49be-87ba-e65269f820a0.json b/change/@fluentui-react-calendar-compat-9800e5f6-b671-49be-87ba-e65269f820a0.json new file mode 100644 index 0000000000000..a2dfebd58754f --- /dev/null +++ b/change/@fluentui-react-calendar-compat-9800e5f6-b671-49be-87ba-e65269f820a0.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: react 19 type issues", + "packageName": "@fluentui/react-calendar-compat", + "email": "dmytrokirpa@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-card-867916c4-b245-4f5d-9e11-0792d6d813ef.json b/change/@fluentui-react-card-867916c4-b245-4f5d-9e11-0792d6d813ef.json new file mode 100644 index 0000000000000..8f3abd74aefd3 --- /dev/null +++ b/change/@fluentui-react-card-867916c4-b245-4f5d-9e11-0792d6d813ef.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: react 19 type issues", + "packageName": "@fluentui/react-card", + "email": "dmytrokirpa@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-carousel-846b5b4a-ac5f-4867-bddc-fbe0e612d7cc.json b/change/@fluentui-react-carousel-846b5b4a-ac5f-4867-bddc-fbe0e612d7cc.json new file mode 100644 index 0000000000000..5f834c17b064f --- /dev/null +++ b/change/@fluentui-react-carousel-846b5b4a-ac5f-4867-bddc-fbe0e612d7cc.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: react 19 type issues", + "packageName": "@fluentui/react-carousel", + "email": "dmytrokirpa@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-checkbox-e138c7c5-4cde-48ef-86fe-73b293bcd800.json b/change/@fluentui-react-checkbox-e138c7c5-4cde-48ef-86fe-73b293bcd800.json new file mode 100644 index 0000000000000..109a6d2a0aeff --- /dev/null +++ b/change/@fluentui-react-checkbox-e138c7c5-4cde-48ef-86fe-73b293bcd800.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: react 19 type issues", + "packageName": "@fluentui/react-checkbox", + "email": "dmytrokirpa@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-color-picker-2056e82c-eaab-463d-a7b8-c715a5100527.json b/change/@fluentui-react-color-picker-2056e82c-eaab-463d-a7b8-c715a5100527.json new file mode 100644 index 0000000000000..fb4d356494b6e --- /dev/null +++ b/change/@fluentui-react-color-picker-2056e82c-eaab-463d-a7b8-c715a5100527.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: react 19 type issues", + "packageName": "@fluentui/react-color-picker", + "email": "dmytrokirpa@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-combobox-180cafc1-73da-45dd-a8f6-fa7ad6ef216d.json b/change/@fluentui-react-combobox-180cafc1-73da-45dd-a8f6-fa7ad6ef216d.json new file mode 100644 index 0000000000000..ea083bc5137a9 --- /dev/null +++ b/change/@fluentui-react-combobox-180cafc1-73da-45dd-a8f6-fa7ad6ef216d.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: react 19 type issues", + "packageName": "@fluentui/react-combobox", + "email": "dmytrokirpa@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-datepicker-compat-9b17298b-c85d-4d07-bcbb-af4158ff7235.json b/change/@fluentui-react-datepicker-compat-9b17298b-c85d-4d07-bcbb-af4158ff7235.json new file mode 100644 index 0000000000000..73a5f8d0bc81b --- /dev/null +++ b/change/@fluentui-react-datepicker-compat-9b17298b-c85d-4d07-bcbb-af4158ff7235.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: react 19 type issues", + "packageName": "@fluentui/react-datepicker-compat", + "email": "dmytrokirpa@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-dialog-ad876792-49bd-4d16-87e1-fde97245292e.json b/change/@fluentui-react-dialog-ad876792-49bd-4d16-87e1-fde97245292e.json new file mode 100644 index 0000000000000..38eafd1269057 --- /dev/null +++ b/change/@fluentui-react-dialog-ad876792-49bd-4d16-87e1-fde97245292e.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: react 19 type issues", + "packageName": "@fluentui/react-dialog", + "email": "dmytrokirpa@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-divider-66aa0faa-d4e0-4209-8e97-57233e133e05.json b/change/@fluentui-react-divider-66aa0faa-d4e0-4209-8e97-57233e133e05.json new file mode 100644 index 0000000000000..e8ac9bf1a344f --- /dev/null +++ b/change/@fluentui-react-divider-66aa0faa-d4e0-4209-8e97-57233e133e05.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: react 19 type issues", + "packageName": "@fluentui/react-divider", + "email": "dmytrokirpa@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-drawer-7339b77f-ba7f-4be8-ae1d-5e811f029bf6.json b/change/@fluentui-react-drawer-7339b77f-ba7f-4be8-ae1d-5e811f029bf6.json new file mode 100644 index 0000000000000..15d711cfe23bc --- /dev/null +++ b/change/@fluentui-react-drawer-7339b77f-ba7f-4be8-ae1d-5e811f029bf6.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: react 19 type issues", + "packageName": "@fluentui/react-drawer", + "email": "dmytrokirpa@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-field-bff542d4-30b9-497d-9c82-4dbd86357e35.json b/change/@fluentui-react-field-bff542d4-30b9-497d-9c82-4dbd86357e35.json new file mode 100644 index 0000000000000..869be789349f1 --- /dev/null +++ b/change/@fluentui-react-field-bff542d4-30b9-497d-9c82-4dbd86357e35.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: react 19 type issues", + "packageName": "@fluentui/react-field", + "email": "dmytrokirpa@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-image-5e72a3f8-8a33-4b32-b84b-3d3ce7af9c4a.json b/change/@fluentui-react-image-5e72a3f8-8a33-4b32-b84b-3d3ce7af9c4a.json new file mode 100644 index 0000000000000..ab5904fe3b3ad --- /dev/null +++ b/change/@fluentui-react-image-5e72a3f8-8a33-4b32-b84b-3d3ce7af9c4a.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: react 19 type issues", + "packageName": "@fluentui/react-image", + "email": "dmytrokirpa@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-infolabel-04005780-87ae-479e-8eaf-c5031e92acab.json b/change/@fluentui-react-infolabel-04005780-87ae-479e-8eaf-c5031e92acab.json new file mode 100644 index 0000000000000..ce06d7fb11465 --- /dev/null +++ b/change/@fluentui-react-infolabel-04005780-87ae-479e-8eaf-c5031e92acab.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: react 19 type issues", + "packageName": "@fluentui/react-infolabel", + "email": "dmytrokirpa@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-input-eca9d35c-5fc0-4a3c-bbc2-7707fdf78bce.json b/change/@fluentui-react-input-eca9d35c-5fc0-4a3c-bbc2-7707fdf78bce.json new file mode 100644 index 0000000000000..a5355065fa72b --- /dev/null +++ b/change/@fluentui-react-input-eca9d35c-5fc0-4a3c-bbc2-7707fdf78bce.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: react 19 type issues", + "packageName": "@fluentui/react-input", + "email": "dmytrokirpa@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-jsx-runtime-72e60c77-8b83-4c4e-b14d-182022879b42.json b/change/@fluentui-react-jsx-runtime-72e60c77-8b83-4c4e-b14d-182022879b42.json new file mode 100644 index 0000000000000..593862db9892e --- /dev/null +++ b/change/@fluentui-react-jsx-runtime-72e60c77-8b83-4c4e-b14d-182022879b42.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: react 19 type issues", + "packageName": "@fluentui/react-jsx-runtime", + "email": "dmytrokirpa@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-label-8cb75aed-51b2-4303-9628-a92c4b6a7413.json b/change/@fluentui-react-label-8cb75aed-51b2-4303-9628-a92c4b6a7413.json new file mode 100644 index 0000000000000..3b1bd740e9a2c --- /dev/null +++ b/change/@fluentui-react-label-8cb75aed-51b2-4303-9628-a92c4b6a7413.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: react 19 type issues", + "packageName": "@fluentui/react-label", + "email": "dmytrokirpa@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-link-f846c2af-8ecc-47be-8226-104465e2ecfe.json b/change/@fluentui-react-link-f846c2af-8ecc-47be-8226-104465e2ecfe.json new file mode 100644 index 0000000000000..1f86a122727b0 --- /dev/null +++ b/change/@fluentui-react-link-f846c2af-8ecc-47be-8226-104465e2ecfe.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: react 19 type issues", + "packageName": "@fluentui/react-link", + "email": "dmytrokirpa@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-list-f558caff-8479-4707-a7ce-c496bddc84c2.json b/change/@fluentui-react-list-f558caff-8479-4707-a7ce-c496bddc84c2.json new file mode 100644 index 0000000000000..1cc06ba690768 --- /dev/null +++ b/change/@fluentui-react-list-f558caff-8479-4707-a7ce-c496bddc84c2.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: react 19 type issues", + "packageName": "@fluentui/react-list", + "email": "dmytrokirpa@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-menu-138d8aba-da73-4627-a086-107a0a8b97fd.json b/change/@fluentui-react-menu-138d8aba-da73-4627-a086-107a0a8b97fd.json new file mode 100644 index 0000000000000..df9df894edb50 --- /dev/null +++ b/change/@fluentui-react-menu-138d8aba-da73-4627-a086-107a0a8b97fd.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: react 19 type issues", + "packageName": "@fluentui/react-menu", + "email": "dmytrokirpa@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-message-bar-68f7673c-a16a-48ca-992a-8874b97f1013.json b/change/@fluentui-react-message-bar-68f7673c-a16a-48ca-992a-8874b97f1013.json new file mode 100644 index 0000000000000..041eecd607d44 --- /dev/null +++ b/change/@fluentui-react-message-bar-68f7673c-a16a-48ca-992a-8874b97f1013.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: react 19 type issues", + "packageName": "@fluentui/react-message-bar", + "email": "dmytrokirpa@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-migration-v0-v9-91a76473-8676-41de-a06f-83f4043cb55e.json b/change/@fluentui-react-migration-v0-v9-91a76473-8676-41de-a06f-83f4043cb55e.json new file mode 100644 index 0000000000000..33f752e98447e --- /dev/null +++ b/change/@fluentui-react-migration-v0-v9-91a76473-8676-41de-a06f-83f4043cb55e.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: react 19 type issues", + "packageName": "@fluentui/react-migration-v0-v9", + "email": "dmytrokirpa@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-motion-bb08b0d2-be63-4956-bc82-462b7e7969b0.json b/change/@fluentui-react-motion-bb08b0d2-be63-4956-bc82-462b7e7969b0.json new file mode 100644 index 0000000000000..b1c8bd0d0c3f6 --- /dev/null +++ b/change/@fluentui-react-motion-bb08b0d2-be63-4956-bc82-462b7e7969b0.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: react 19 type issues", + "packageName": "@fluentui/react-motion", + "email": "dmytrokirpa@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-nav-a12e8cd0-5eee-40b3-9522-099d176738a3.json b/change/@fluentui-react-nav-a12e8cd0-5eee-40b3-9522-099d176738a3.json new file mode 100644 index 0000000000000..580d46843abc9 --- /dev/null +++ b/change/@fluentui-react-nav-a12e8cd0-5eee-40b3-9522-099d176738a3.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: react 19 type issues", + "packageName": "@fluentui/react-nav", + "email": "dmytrokirpa@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-overflow-f098089d-d873-44d3-8295-466497d15ceb.json b/change/@fluentui-react-overflow-f098089d-d873-44d3-8295-466497d15ceb.json new file mode 100644 index 0000000000000..e25aab78222e6 --- /dev/null +++ b/change/@fluentui-react-overflow-f098089d-d873-44d3-8295-466497d15ceb.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: react 19 type issues", + "packageName": "@fluentui/react-overflow", + "email": "dmytrokirpa@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-persona-bb46b040-8e59-4ef9-a3c9-efa456d53697.json b/change/@fluentui-react-persona-bb46b040-8e59-4ef9-a3c9-efa456d53697.json new file mode 100644 index 0000000000000..d346aeaa429b1 --- /dev/null +++ b/change/@fluentui-react-persona-bb46b040-8e59-4ef9-a3c9-efa456d53697.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: react 19 type issues", + "packageName": "@fluentui/react-persona", + "email": "dmytrokirpa@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-popover-94791d37-ba10-471c-a1f2-884eb1a8a209.json b/change/@fluentui-react-popover-94791d37-ba10-471c-a1f2-884eb1a8a209.json new file mode 100644 index 0000000000000..98846473cbd5c --- /dev/null +++ b/change/@fluentui-react-popover-94791d37-ba10-471c-a1f2-884eb1a8a209.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: react 19 type issues", + "packageName": "@fluentui/react-popover", + "email": "dmytrokirpa@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-progress-8ce2e1b3-e52a-4ac5-bef6-e6c52bd0dd4f.json b/change/@fluentui-react-progress-8ce2e1b3-e52a-4ac5-bef6-e6c52bd0dd4f.json new file mode 100644 index 0000000000000..07a9cec626a8e --- /dev/null +++ b/change/@fluentui-react-progress-8ce2e1b3-e52a-4ac5-bef6-e6c52bd0dd4f.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: react 19 type issues", + "packageName": "@fluentui/react-progress", + "email": "dmytrokirpa@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-provider-07eb0fe2-9dff-4bca-94a0-a4ad974ae498.json b/change/@fluentui-react-provider-07eb0fe2-9dff-4bca-94a0-a4ad974ae498.json new file mode 100644 index 0000000000000..5118da60b5fc2 --- /dev/null +++ b/change/@fluentui-react-provider-07eb0fe2-9dff-4bca-94a0-a4ad974ae498.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: react 19 type issues", + "packageName": "@fluentui/react-provider", + "email": "dmytrokirpa@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-radio-0428367e-4f63-4f3b-be8c-d158564e6a2e.json b/change/@fluentui-react-radio-0428367e-4f63-4f3b-be8c-d158564e6a2e.json new file mode 100644 index 0000000000000..9db89f092d8de --- /dev/null +++ b/change/@fluentui-react-radio-0428367e-4f63-4f3b-be8c-d158564e6a2e.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: react 19 type issues", + "packageName": "@fluentui/react-radio", + "email": "dmytrokirpa@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-rating-ea152f7b-c6de-45e3-b586-a5610f6f725a.json b/change/@fluentui-react-rating-ea152f7b-c6de-45e3-b586-a5610f6f725a.json new file mode 100644 index 0000000000000..b577600d6ca78 --- /dev/null +++ b/change/@fluentui-react-rating-ea152f7b-c6de-45e3-b586-a5610f6f725a.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: react 19 type issues", + "packageName": "@fluentui/react-rating", + "email": "dmytrokirpa@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-search-7ead6833-2064-4e48-bd4b-c302c0954923.json b/change/@fluentui-react-search-7ead6833-2064-4e48-bd4b-c302c0954923.json new file mode 100644 index 0000000000000..aa97e3a711bd9 --- /dev/null +++ b/change/@fluentui-react-search-7ead6833-2064-4e48-bd4b-c302c0954923.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: react 19 type issues", + "packageName": "@fluentui/react-search", + "email": "dmytrokirpa@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-select-4d3398ab-7663-4a86-a1b1-59959e128acd.json b/change/@fluentui-react-select-4d3398ab-7663-4a86-a1b1-59959e128acd.json new file mode 100644 index 0000000000000..0620a61ff4f5d --- /dev/null +++ b/change/@fluentui-react-select-4d3398ab-7663-4a86-a1b1-59959e128acd.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: react 19 type issues", + "packageName": "@fluentui/react-select", + "email": "dmytrokirpa@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-skeleton-259f2f86-d07d-4deb-a233-0f3e0074fe81.json b/change/@fluentui-react-skeleton-259f2f86-d07d-4deb-a233-0f3e0074fe81.json new file mode 100644 index 0000000000000..c58706f59f1a0 --- /dev/null +++ b/change/@fluentui-react-skeleton-259f2f86-d07d-4deb-a233-0f3e0074fe81.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: react 19 type issues", + "packageName": "@fluentui/react-skeleton", + "email": "dmytrokirpa@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-slider-414ff2fa-7725-4384-9b1b-9521ba11902e.json b/change/@fluentui-react-slider-414ff2fa-7725-4384-9b1b-9521ba11902e.json new file mode 100644 index 0000000000000..8ec015fa481b9 --- /dev/null +++ b/change/@fluentui-react-slider-414ff2fa-7725-4384-9b1b-9521ba11902e.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: react 19 type issues", + "packageName": "@fluentui/react-slider", + "email": "dmytrokirpa@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-spinbutton-1652c981-e84d-4b0f-94d5-02622ac6c289.json b/change/@fluentui-react-spinbutton-1652c981-e84d-4b0f-94d5-02622ac6c289.json new file mode 100644 index 0000000000000..bd2dd2f6f9e7d --- /dev/null +++ b/change/@fluentui-react-spinbutton-1652c981-e84d-4b0f-94d5-02622ac6c289.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: react 19 type issues", + "packageName": "@fluentui/react-spinbutton", + "email": "dmytrokirpa@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-spinner-78890103-fbe1-4c3c-ac5c-355f5d08d2ed.json b/change/@fluentui-react-spinner-78890103-fbe1-4c3c-ac5c-355f5d08d2ed.json new file mode 100644 index 0000000000000..92aaa515b39f0 --- /dev/null +++ b/change/@fluentui-react-spinner-78890103-fbe1-4c3c-ac5c-355f5d08d2ed.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: react 19 type issues", + "packageName": "@fluentui/react-spinner", + "email": "dmytrokirpa@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-swatch-picker-3d93d56a-6eca-418a-aeb8-f1b30e3e33b7.json b/change/@fluentui-react-swatch-picker-3d93d56a-6eca-418a-aeb8-f1b30e3e33b7.json new file mode 100644 index 0000000000000..46599eb16126c --- /dev/null +++ b/change/@fluentui-react-swatch-picker-3d93d56a-6eca-418a-aeb8-f1b30e3e33b7.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: react 19 type issues", + "packageName": "@fluentui/react-swatch-picker", + "email": "dmytrokirpa@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-switch-03a95e48-a0f4-4889-9a92-4f9c36c08117.json b/change/@fluentui-react-switch-03a95e48-a0f4-4889-9a92-4f9c36c08117.json new file mode 100644 index 0000000000000..05558e0b4b599 --- /dev/null +++ b/change/@fluentui-react-switch-03a95e48-a0f4-4889-9a92-4f9c36c08117.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: react 19 type issues", + "packageName": "@fluentui/react-switch", + "email": "dmytrokirpa@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-table-705eded9-a4d1-45e9-8078-2f5eb6c113dc.json b/change/@fluentui-react-table-705eded9-a4d1-45e9-8078-2f5eb6c113dc.json new file mode 100644 index 0000000000000..56a55a1335ec1 --- /dev/null +++ b/change/@fluentui-react-table-705eded9-a4d1-45e9-8078-2f5eb6c113dc.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: react 19 type issues", + "packageName": "@fluentui/react-table", + "email": "dmytrokirpa@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-tabs-29681834-5240-4315-b633-8ead08ef07a4.json b/change/@fluentui-react-tabs-29681834-5240-4315-b633-8ead08ef07a4.json new file mode 100644 index 0000000000000..90ddd1975d702 --- /dev/null +++ b/change/@fluentui-react-tabs-29681834-5240-4315-b633-8ead08ef07a4.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: react 19 type issues", + "packageName": "@fluentui/react-tabs", + "email": "dmytrokirpa@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-tabster-2c51be12-648f-4eed-8a38-e7721fcf4aff.json b/change/@fluentui-react-tabster-2c51be12-648f-4eed-8a38-e7721fcf4aff.json new file mode 100644 index 0000000000000..58411ff35aa65 --- /dev/null +++ b/change/@fluentui-react-tabster-2c51be12-648f-4eed-8a38-e7721fcf4aff.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: react 19 type issues", + "packageName": "@fluentui/react-tabster", + "email": "dmytrokirpa@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-tag-picker-040f1675-0e79-47ee-aca0-6efb8a74c066.json b/change/@fluentui-react-tag-picker-040f1675-0e79-47ee-aca0-6efb8a74c066.json new file mode 100644 index 0000000000000..94b8d0ab2decc --- /dev/null +++ b/change/@fluentui-react-tag-picker-040f1675-0e79-47ee-aca0-6efb8a74c066.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: react 19 type issues", + "packageName": "@fluentui/react-tag-picker", + "email": "dmytrokirpa@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-tags-1079b59a-83b4-440f-b85e-80c1b663d1dc.json b/change/@fluentui-react-tags-1079b59a-83b4-440f-b85e-80c1b663d1dc.json new file mode 100644 index 0000000000000..e6fd0dd9f7c90 --- /dev/null +++ b/change/@fluentui-react-tags-1079b59a-83b4-440f-b85e-80c1b663d1dc.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: react 19 type issues", + "packageName": "@fluentui/react-tags", + "email": "dmytrokirpa@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-teaching-popover-ac442ea8-3981-4078-8d4d-6354c33b7f54.json b/change/@fluentui-react-teaching-popover-ac442ea8-3981-4078-8d4d-6354c33b7f54.json new file mode 100644 index 0000000000000..cc40b7cb51e56 --- /dev/null +++ b/change/@fluentui-react-teaching-popover-ac442ea8-3981-4078-8d4d-6354c33b7f54.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: react 19 type issues", + "packageName": "@fluentui/react-teaching-popover", + "email": "dmytrokirpa@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-text-b90e149e-0e67-4e0d-a1a2-6f9b8ea30c90.json b/change/@fluentui-react-text-b90e149e-0e67-4e0d-a1a2-6f9b8ea30c90.json new file mode 100644 index 0000000000000..b904b9a8d77ba --- /dev/null +++ b/change/@fluentui-react-text-b90e149e-0e67-4e0d-a1a2-6f9b8ea30c90.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: react 19 type issues", + "packageName": "@fluentui/react-text", + "email": "dmytrokirpa@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-textarea-83a0ee46-4de7-495a-8773-aae0c8aabd69.json b/change/@fluentui-react-textarea-83a0ee46-4de7-495a-8773-aae0c8aabd69.json new file mode 100644 index 0000000000000..b19f0a113dad2 --- /dev/null +++ b/change/@fluentui-react-textarea-83a0ee46-4de7-495a-8773-aae0c8aabd69.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: react 19 type issues", + "packageName": "@fluentui/react-textarea", + "email": "dmytrokirpa@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-toast-b3594856-b46c-4935-8b48-8d73b8f75ee2.json b/change/@fluentui-react-toast-b3594856-b46c-4935-8b48-8d73b8f75ee2.json new file mode 100644 index 0000000000000..efa313c1e28c8 --- /dev/null +++ b/change/@fluentui-react-toast-b3594856-b46c-4935-8b48-8d73b8f75ee2.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: react 19 type issues", + "packageName": "@fluentui/react-toast", + "email": "dmytrokirpa@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-toolbar-0bb77c84-8f7b-42c9-b725-50fea735a25e.json b/change/@fluentui-react-toolbar-0bb77c84-8f7b-42c9-b725-50fea735a25e.json new file mode 100644 index 0000000000000..c1b532a4ed9cd --- /dev/null +++ b/change/@fluentui-react-toolbar-0bb77c84-8f7b-42c9-b725-50fea735a25e.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: react 19 type issues", + "packageName": "@fluentui/react-toolbar", + "email": "dmytrokirpa@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-tooltip-867e4f3e-c179-4c36-8adb-f312a239866b.json b/change/@fluentui-react-tooltip-867e4f3e-c179-4c36-8adb-f312a239866b.json new file mode 100644 index 0000000000000..ef89c6569a585 --- /dev/null +++ b/change/@fluentui-react-tooltip-867e4f3e-c179-4c36-8adb-f312a239866b.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: react 19 type issues", + "packageName": "@fluentui/react-tooltip", + "email": "dmytrokirpa@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-tree-7386da76-fc43-4cfb-98ab-981d2f42071d.json b/change/@fluentui-react-tree-7386da76-fc43-4cfb-98ab-981d2f42071d.json new file mode 100644 index 0000000000000..3dd50333a6c47 --- /dev/null +++ b/change/@fluentui-react-tree-7386da76-fc43-4cfb-98ab-981d2f42071d.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: react 19 type issues", + "packageName": "@fluentui/react-tree", + "email": "dmytrokirpa@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-utilities-fa22016a-f0e0-4845-a779-07ab1d6a2633.json b/change/@fluentui-react-utilities-fa22016a-f0e0-4845-a779-07ab1d6a2633.json new file mode 100644 index 0000000000000..3267768075efd --- /dev/null +++ b/change/@fluentui-react-utilities-fa22016a-f0e0-4845-a779-07ab1d6a2633.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: react 19 type issues", + "packageName": "@fluentui/react-utilities", + "email": "dmytrokirpa@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-accordion/library/src/components/Accordion/useAccordion.ts b/packages/react-components/react-accordion/library/src/components/Accordion/useAccordion.ts index 38ee613568d58..10ea70a2575f0 100644 --- a/packages/react-components/react-accordion/library/src/components/Accordion/useAccordion.ts +++ b/packages/react-components/react-accordion/library/src/components/Accordion/useAccordion.ts @@ -22,6 +22,7 @@ export const useAccordion_unstable = ( onToggle, // eslint-disable-next-line @typescript-eslint/no-deprecated navigation, + ...rest } = props; const [openItems, setOpenItems] = useControllableState({ state: React.useMemo(() => normalizeValues(controlledOpenItems), [controlledOpenItems]), @@ -52,7 +53,7 @@ export const useAccordion_unstable = ( }, root: slot.always( getIntrinsicElementProps('div', { - ...props, + ...rest, ...(navigation ? arrowNavigationProps : undefined), // FIXME: diff --git a/packages/react-components/react-aria/library/etc/react-aria.api.md b/packages/react-components/react-aria/library/etc/react-aria.api.md index fccb1e3328ea9..3bde8fdd4aa21 100644 --- a/packages/react-components/react-aria/library/etc/react-aria.api.md +++ b/packages/react-components/react-aria/library/etc/react-aria.api.md @@ -61,7 +61,7 @@ export interface ActiveDescendantImperativeRef { // @public (undocumented) export interface ActiveDescendantOptions { - imperativeRef?: React_2.RefObject; + imperativeRef?: React_2.RefObject; // (undocumented) matchOption: (el: HTMLElement) => boolean; } diff --git a/packages/react-components/react-aria/library/src/activedescendant/types.ts b/packages/react-components/react-aria/library/src/activedescendant/types.ts index 95cdcdb286bff..0bee17371d2a9 100644 --- a/packages/react-components/react-aria/library/src/activedescendant/types.ts +++ b/packages/react-components/react-aria/library/src/activedescendant/types.ts @@ -32,7 +32,7 @@ export interface ActiveDescendantOptions { /** * Forward imperative refs when exposing functionality from a React component */ - imperativeRef?: React.RefObject; + imperativeRef?: React.RefObject; } export interface FindOptions { diff --git a/packages/react-components/react-aria/library/src/activedescendant/useActivedescendant.test.tsx b/packages/react-components/react-aria/library/src/activedescendant/useActivedescendant.test.tsx index b8f8fe07cc831..6beedc562ef1b 100644 --- a/packages/react-components/react-aria/library/src/activedescendant/useActivedescendant.test.tsx +++ b/packages/react-components/react-aria/library/src/activedescendant/useActivedescendant.test.tsx @@ -61,7 +61,9 @@ expect.extend({ }); describe('useActivedescendant', () => { - const Test: React.FC<{ imperativeRef: React.RefObject }> = ({ imperativeRef }) => { + const Test: React.FC<{ imperativeRef: React.RefObject }> = ({ + imperativeRef, + }) => { const { listboxRef, activeParentRef } = useActiveDescendant({ matchOption: el => el.getAttribute('role') === 'option', imperativeRef, diff --git a/packages/react-components/react-calendar-compat/library/etc/react-calendar-compat.api.md b/packages/react-components/react-calendar-compat/library/etc/react-calendar-compat.api.md index 308d366cafc34..91964847c7df0 100644 --- a/packages/react-components/react-calendar-compat/library/etc/react-calendar-compat.api.md +++ b/packages/react-components/react-calendar-compat/library/etc/react-calendar-compat.api.md @@ -51,7 +51,7 @@ export interface CalendarDayGridProps extends DayGridOptions { allFocusable?: boolean; animationDirection?: AnimationDirection; className?: string; - componentRef?: React_2.RefObject; + componentRef?: React_2.RefObject; customDayCellRef?: (element: HTMLElement, date: Date, classNames: CalendarDayGridStyles) => void; dateRangeType: DateRangeType; dateTimeFormatter: DateFormatting; @@ -114,7 +114,7 @@ export interface CalendarDayGridStyles { export interface CalendarDayProps extends CalendarDayGridProps { allFocusable?: boolean; className?: string; - componentRef?: React_2.RefObject; + componentRef?: React_2.RefObject; dateTimeFormatter: DateFormatting; maxDate?: Date; minDate?: Date; @@ -155,7 +155,7 @@ export interface CalendarMonthProps { allFocusable?: boolean; animationDirection?: AnimationDirection; className?: string; - componentRef?: React_2.RefObject; + componentRef?: React_2.RefObject; dateTimeFormatter?: DateFormatting; highlightCurrentMonth?: boolean; highlightSelectedMonth?: boolean; @@ -224,7 +224,7 @@ export interface CalendarProps extends React_2.RefAttributes { calendarDayProps?: Partial; calendarMonthProps?: Partial; className?: string; - componentRef?: React_2.RefObject; + componentRef?: React_2.RefObject; dateRangeType?: DateRangeType; dateTimeFormatter?: DateFormatting; firstDayOfWeek?: DayOfWeek; @@ -309,7 +309,7 @@ export interface CalendarYearHeaderProps extends CalendarYearProps, CalendarYear export interface CalendarYearProps { animationDirection?: AnimationDirection; className?: string; - componentRef?: React_2.RefObject; + componentRef?: React_2.RefObject; highlightCurrentYear?: boolean; highlightSelectedYear?: boolean; maxYear?: number; diff --git a/packages/react-components/react-calendar-compat/library/src/components/Calendar/Calendar.types.ts b/packages/react-components/react-calendar-compat/library/src/components/Calendar/Calendar.types.ts index a090d74c14a91..5a4b96dba3a19 100644 --- a/packages/react-components/react-calendar-compat/library/src/components/Calendar/Calendar.types.ts +++ b/packages/react-components/react-calendar-compat/library/src/components/Calendar/Calendar.types.ts @@ -14,7 +14,7 @@ export interface CalendarProps extends React.RefAttributes { * Optional callback to access the ICalendar interface. Use this instead of ref for accessing * the public methods and properties of the component. */ - componentRef?: React.RefObject; + componentRef?: React.RefObject; /** * Customized props for the calendar day diff --git a/packages/react-components/react-calendar-compat/library/src/components/CalendarDay/CalendarDay.types.ts b/packages/react-components/react-calendar-compat/library/src/components/CalendarDay/CalendarDay.types.ts index a6cde139e9491..04047be5e5a31 100644 --- a/packages/react-components/react-calendar-compat/library/src/components/CalendarDay/CalendarDay.types.ts +++ b/packages/react-components/react-calendar-compat/library/src/components/CalendarDay/CalendarDay.types.ts @@ -13,7 +13,7 @@ export interface CalendarDayProps extends CalendarDayGridProps { * Optional callback to access the ICalendarDay interface. Use this instead of ref for accessing * the public methods and properties of the component. */ - componentRef?: React.RefObject; + componentRef?: React.RefObject; /** * Additional CSS class(es) to apply to the CalendarDay. diff --git a/packages/react-components/react-calendar-compat/library/src/components/CalendarDayGrid/CalendarDayGrid.tsx b/packages/react-components/react-calendar-compat/library/src/components/CalendarDayGrid/CalendarDayGrid.tsx index 1a76cf4be916b..da3fc60a78373 100644 --- a/packages/react-components/react-calendar-compat/library/src/components/CalendarDayGrid/CalendarDayGrid.tsx +++ b/packages/react-components/react-calendar-compat/library/src/components/CalendarDayGrid/CalendarDayGrid.tsx @@ -31,7 +31,7 @@ function useDayRefs() { } function useAnimateBackwards(weeks: DayInfo[][]): boolean | undefined { - const previousNavigatedDateRef = React.useRef(); + const previousNavigatedDateRef = React.useRef(undefined); React.useEffect(() => { previousNavigatedDateRef.current = weeks[0][0].originalDate; }); @@ -47,7 +47,9 @@ function useAnimateBackwards(weeks: DayInfo[][]): boolean | undefined { } export const CalendarDayGrid: React.FunctionComponent = props => { - const navigatedDayRef = React.useRef(null) as React.MutableRefObject; + const navigatedDayRef = React.useRef( + null, + ) as React.MutableRefObject; const activeDescendantId = useId(); diff --git a/packages/react-components/react-calendar-compat/library/src/components/CalendarDayGrid/CalendarDayGrid.types.ts b/packages/react-components/react-calendar-compat/library/src/components/CalendarDayGrid/CalendarDayGrid.types.ts index d5009e25765cf..1ed85dea3c039 100644 --- a/packages/react-components/react-calendar-compat/library/src/components/CalendarDayGrid/CalendarDayGrid.types.ts +++ b/packages/react-components/react-calendar-compat/library/src/components/CalendarDayGrid/CalendarDayGrid.types.ts @@ -19,7 +19,7 @@ export interface CalendarDayGridProps extends DayGridOptions { * Optional callback to access the ICalendarDayGrid interface. Use this instead of ref for accessing * the public methods and properties of the component. */ - componentRef?: React.RefObject; + componentRef?: React.RefObject; /** * Additional CSS class(es) to apply to the CalendarDayGrid. diff --git a/packages/react-components/react-calendar-compat/library/src/components/CalendarDayGrid/CalendarGridRow.tsx b/packages/react-components/react-calendar-compat/library/src/components/CalendarDayGrid/CalendarGridRow.tsx index e804821812343..9ccdea6f28f2e 100644 --- a/packages/react-components/react-calendar-compat/library/src/components/CalendarDayGrid/CalendarGridRow.tsx +++ b/packages/react-components/react-calendar-compat/library/src/components/CalendarDayGrid/CalendarGridRow.tsx @@ -17,7 +17,7 @@ export interface CalendarGridRowProps extends CalendarDayGridProps { ariaHidden?: boolean; rowClassName?: string; ariaRole?: string; - navigatedDayRef: React.MutableRefObject; + navigatedDayRef: React.MutableRefObject; activeDescendantId: string; calculateRoundedStyles(above: boolean, below: boolean, left: boolean, right: boolean): string; getDayInfosInRangeOfDay(dayToCompare: DayInfo): DayInfo[]; diff --git a/packages/react-components/react-calendar-compat/library/src/components/CalendarMonth/CalendarMonth.tsx b/packages/react-components/react-calendar-compat/library/src/components/CalendarMonth/CalendarMonth.tsx index 035b99e5cdcf5..59e9d04f5f64b 100644 --- a/packages/react-components/react-calendar-compat/library/src/components/CalendarMonth/CalendarMonth.tsx +++ b/packages/react-components/react-calendar-compat/library/src/components/CalendarMonth/CalendarMonth.tsx @@ -22,7 +22,7 @@ const MONTHS_PER_ROW = 4; function useAnimateBackwards({ navigatedDate }: { navigatedDate: CalendarMonthProps['navigatedDate'] }) { const currentYear = navigatedDate.getFullYear(); - const previousYearRef = React.useRef(); + const previousYearRef = React.useRef(undefined); React.useEffect(() => { previousYearRef.current = currentYear; }); diff --git a/packages/react-components/react-calendar-compat/library/src/components/CalendarMonth/CalendarMonth.types.ts b/packages/react-components/react-calendar-compat/library/src/components/CalendarMonth/CalendarMonth.types.ts index 0194ac7767fff..65f2c77428704 100644 --- a/packages/react-components/react-calendar-compat/library/src/components/CalendarMonth/CalendarMonth.types.ts +++ b/packages/react-components/react-calendar-compat/library/src/components/CalendarMonth/CalendarMonth.types.ts @@ -14,7 +14,7 @@ export interface CalendarMonthProps { * Optional callback to access the ICalendarMonth interface. Use this instead of ref for accessing * the public methods and properties of the component. */ - componentRef?: React.RefObject; + componentRef?: React.RefObject; /** * Localized strings to use in the Calendar diff --git a/packages/react-components/react-calendar-compat/library/src/components/CalendarYear/CalendarYear.tsx b/packages/react-components/react-calendar-compat/library/src/components/CalendarYear/CalendarYear.tsx index 5e6f7be20d1f5..6ab61d17eb74e 100644 --- a/packages/react-components/react-calendar-compat/library/src/components/CalendarYear/CalendarYear.tsx +++ b/packages/react-components/react-calendar-compat/library/src/components/CalendarYear/CalendarYear.tsx @@ -35,7 +35,7 @@ interface CalendarYearGridCellProps extends CalendarYearProps { interface CalendarYearGridProps extends CalendarYearProps, CalendarYearRange { selectedYear?: number; animateBackwards?: boolean; - componentRef?: React.RefObject; + componentRef?: React.RefObject; } interface CalendarYearGridCell { diff --git a/packages/react-components/react-calendar-compat/library/src/components/CalendarYear/CalendarYear.types.ts b/packages/react-components/react-calendar-compat/library/src/components/CalendarYear/CalendarYear.types.ts index f54993339cedc..af286fbf5f7ff 100644 --- a/packages/react-components/react-calendar-compat/library/src/components/CalendarYear/CalendarYear.types.ts +++ b/packages/react-components/react-calendar-compat/library/src/components/CalendarYear/CalendarYear.types.ts @@ -44,7 +44,7 @@ export interface CalendarYearProps { * Optional callback to access the ICalendarYear interface. Use this instead of ref for accessing * the public methods and properties of the component. */ - componentRef?: React.RefObject; + componentRef?: React.RefObject; /** * Localized strings to use in the Calendar diff --git a/packages/react-components/react-card/library/src/components/Card/useCardSelectable.ts b/packages/react-components/react-card/library/src/components/Card/useCardSelectable.ts index d30f6e65bcab6..5654b2f6ef326 100644 --- a/packages/react-components/react-card/library/src/components/Card/useCardSelectable.ts +++ b/packages/react-components/react-card/library/src/components/Card/useCardSelectable.ts @@ -22,7 +22,7 @@ type SelectableA11yProps = Pick, + cardRef: React.RefObject, ): { selected: boolean; selectable: boolean; diff --git a/packages/react-components/react-card/library/src/components/CardHeader/useCardHeader.ts b/packages/react-components/react-card/library/src/components/CardHeader/useCardHeader.ts index 5c66669788573..f21af7c5d8138 100644 --- a/packages/react-components/react-card/library/src/components/CardHeader/useCardHeader.ts +++ b/packages/react-components/react-card/library/src/components/CardHeader/useCardHeader.ts @@ -10,8 +10,8 @@ import { cardHeaderClassNames } from './useCardHeaderStyles.styles'; * @param header - the header prop of CardHeader */ function getChildWithId(header: React.ReactNode) { - function isReactElementWithIdProp(element: React.ReactNode): element is React.ReactElement { - return React.isValidElement(element) && Boolean(element.props.id); + function isReactElementWithIdProp(element: React.ReactNode): element is React.ReactElement<{ id: string }> { + return React.isValidElement<{ id?: string }>(element) && Boolean(element.props.id); } return React.Children.toArray(header).find(isReactElementWithIdProp); @@ -28,7 +28,7 @@ function getChildWithId(header: React.ReactNode) { */ function getReferenceId( headerId: string | undefined, - childWithId: React.ReactElement | undefined, + childWithId: React.ReactElement<{ id?: string }> | undefined, generatedId: string, ): string { if (headerId) { diff --git a/packages/react-components/react-carousel/library/etc/react-carousel.api.md b/packages/react-components/react-carousel/library/etc/react-carousel.api.md index 8563ea56aa44c..4c94d94c8ea78 100644 --- a/packages/react-components/react-carousel/library/etc/react-carousel.api.md +++ b/packages/react-components/react-carousel/library/etc/react-carousel.api.md @@ -105,8 +105,8 @@ export type CarouselContextValue = { subscribeForValues: (listener: (data: CarouselUpdateData) => void) => () => void; enableAutoplay: (autoplay: boolean, temporary?: boolean) => void; resetAutoplay: () => void; - containerRef?: React_2.RefObject; - viewportRef?: React_2.RefObject; + containerRef?: React_2.RefObject; + viewportRef?: React_2.RefObject; }; // @public diff --git a/packages/react-components/react-carousel/library/src/components/CarouselButton/useCarouselButton.tsx b/packages/react-components/react-carousel/library/src/components/CarouselButton/useCarouselButton.tsx index 9e8beea2d0c84..9a81e108c1d4d 100644 --- a/packages/react-components/react-carousel/library/src/components/CarouselButton/useCarouselButton.tsx +++ b/packages/react-components/react-carousel/library/src/components/CarouselButton/useCarouselButton.tsx @@ -35,7 +35,7 @@ export const useCarouselButton_unstable = ( const [totalSlides, setTotalSlides] = React.useState(0); const { dir } = useFluent(); - const buttonRef = React.useRef(); + const buttonRef = React.useRef(undefined); const circular = useCarouselContext(ctx => ctx.circular); const [canLoop, setCanLoop] = React.useState(circular); const containerRef = useCarouselContext(ctx => ctx.containerRef); diff --git a/packages/react-components/react-carousel/library/src/components/CarouselContext.types.ts b/packages/react-components/react-carousel/library/src/components/CarouselContext.types.ts index 51fae7eeb29c1..8a47326628b72 100644 --- a/packages/react-components/react-carousel/library/src/components/CarouselContext.types.ts +++ b/packages/react-components/react-carousel/library/src/components/CarouselContext.types.ts @@ -32,9 +32,9 @@ export type CarouselContextValue = { enableAutoplay: (autoplay: boolean, temporary?: boolean) => void; resetAutoplay: () => void; // Container with controls passed to carousel engine - containerRef?: React.RefObject; + containerRef?: React.RefObject; // Viewport without controls used for interactive functionality (draggable, pause autoplay etc.) - viewportRef?: React.RefObject; + viewportRef?: React.RefObject; }; /** diff --git a/packages/react-components/react-carousel/library/src/components/CarouselNavButton/useCarouselNavButton.ts b/packages/react-components/react-carousel/library/src/components/CarouselNavButton/useCarouselNavButton.ts index ca3ba392b7cfd..97e8a99be609c 100644 --- a/packages/react-components/react-carousel/library/src/components/CarouselNavButton/useCarouselNavButton.ts +++ b/packages/react-components/react-carousel/library/src/components/CarouselNavButton/useCarouselNavButton.ts @@ -53,7 +53,7 @@ export const useCarouselNavButton_unstable = ( focusable: { isDefault: selected }, }); - const buttonRef = React.useRef(); + const buttonRef = React.useRef(undefined); const _carouselButton = slot.always( getIntrinsicElementProps(as, useARIAButtonProps(props.as, props)), { diff --git a/packages/react-components/react-carousel/library/src/components/CarouselNavImageButton/useCarouselNavImageButton.ts b/packages/react-components/react-carousel/library/src/components/CarouselNavImageButton/useCarouselNavImageButton.ts index aea0ba17f55e1..60558519938d5 100644 --- a/packages/react-components/react-carousel/library/src/components/CarouselNavImageButton/useCarouselNavImageButton.ts +++ b/packages/react-components/react-carousel/library/src/components/CarouselNavImageButton/useCarouselNavImageButton.ts @@ -46,7 +46,7 @@ export const useCarouselNavImageButton_unstable = ( focusable: { isDefault: selected }, }); - const buttonRef = React.useRef(); + const buttonRef = React.useRef(undefined); const _carouselButton = slot.always( getIntrinsicElementProps(as, useARIAButtonProps(props.as, props)), { diff --git a/packages/react-components/react-carousel/library/src/components/useEmblaCarousel.ts b/packages/react-components/react-carousel/library/src/components/useEmblaCarousel.ts index 70b2d78b0f7b9..9e8dd9cbcc88f 100644 --- a/packages/react-components/react-carousel/library/src/components/useEmblaCarousel.ts +++ b/packages/react-components/react-carousel/library/src/components/useEmblaCarousel.ts @@ -55,8 +55,8 @@ export function useEmblaCarousel( scrollToIndex: (index: number, jump?: boolean) => void; scrollInDirection: (dir: 'prev' | 'next') => number; }; - viewportRef: React.RefObject; - containerRef: React.RefObject; + viewportRef: React.RefObject; + containerRef: React.RefObject; subscribeForValues: (listener: (data: CarouselUpdateData) => void) => () => void; enableAutoplay: (autoplay: boolean, temporary?: boolean) => void; resetAutoplay: () => void; @@ -210,8 +210,8 @@ export function useEmblaCarousel( } }); - const viewportRef: React.RefObject = React.useRef(null); - const containerRef: React.RefObject = React.useMemo(() => { + const viewportRef: React.RefObject = React.useRef(null); + const containerRef: React.RefObject = React.useMemo(() => { const handleVisibilityChange = () => { const cardElements = emblaApi.current?.slideNodes(); const visibleIndexes = emblaApi.current?.slidesInView() ?? []; diff --git a/packages/react-components/react-combobox/library/etc/react-combobox.api.md b/packages/react-components/react-combobox/library/etc/react-combobox.api.md index 6941dd03597be..899169a94b80b 100644 --- a/packages/react-components/react-combobox/library/etc/react-combobox.api.md +++ b/packages/react-components/react-combobox/library/etc/react-combobox.api.md @@ -48,7 +48,7 @@ export type ComboboxBaseProps = SelectionProps & HighlightedOptionProps & Pick

> & Pick & OptionCollectionState & SelectionState & { activeOption?: OptionValue; focusVisible: boolean; - ignoreNextBlur: React_2.MutableRefObject; + ignoreNextBlur: React_2.MutableRefObject; setActiveOption: React_2.Dispatch>; setFocusVisible(focusVisible: boolean): void; hasFocus: boolean; diff --git a/packages/react-components/react-combobox/library/src/utils/ComboboxBase.types.ts b/packages/react-components/react-combobox/library/src/utils/ComboboxBase.types.ts index ad7650a5688fd..8d87b6db7b998 100644 --- a/packages/react-components/react-combobox/library/src/utils/ComboboxBase.types.ts +++ b/packages/react-components/react-combobox/library/src/utils/ComboboxBase.types.ts @@ -112,7 +112,7 @@ export type ComboboxBaseState = Required< * @deprecated - no longer used internally * Whether the next blur event should be ignored, and the combobox/dropdown will not close. */ - ignoreNextBlur: React.MutableRefObject; + ignoreNextBlur: React.MutableRefObject; /** * @deprecated - no longer used internally diff --git a/packages/react-components/react-combobox/library/src/utils/useListboxSlot.ts b/packages/react-components/react-combobox/library/src/utils/useListboxSlot.ts index 45eaf52aa9191..e2429a16897f5 100644 --- a/packages/react-components/react-combobox/library/src/utils/useListboxSlot.ts +++ b/packages/react-components/react-combobox/library/src/utils/useListboxSlot.ts @@ -18,9 +18,9 @@ export type UseListboxSlotState = Pick; type UseListboxSlotOptions = { state: UseListboxSlotState; triggerRef: - | React.RefObject - | React.RefObject - | React.RefObject; + | React.RefObject + | React.RefObject + | React.RefObject; defaultProps?: Partial; }; diff --git a/packages/react-components/react-datepicker-compat/library/src/components/DatePicker/useDatePicker.tsx b/packages/react-components/react-datepicker-compat/library/src/components/DatePicker/useDatePicker.tsx index 64902ebb9c245..f7ea3b013138b 100644 --- a/packages/react-components/react-datepicker-compat/library/src/components/DatePicker/useDatePicker.tsx +++ b/packages/react-components/react-datepicker-compat/library/src/components/DatePicker/useDatePicker.tsx @@ -141,7 +141,7 @@ export const useDatePicker_unstable = (props: DatePickerProps, ref: React.Ref initialPickerDateProp ?? new Date(), [initialPickerDateProp]); - const calendar = React.useRef(null); + const calendar = React.useRef(null); const [focus, rootRef, preventFocusOpeningPicker, preventNextFocusOpeningPicker] = useFocusLogic(); const [selectedDate, formattedDate, setSelectedDate, setFormattedDate] = useSelectedDate({ formatDate, diff --git a/packages/react-components/react-datepicker-compat/library/src/utils/usePopupPositioning.ts b/packages/react-components/react-datepicker-compat/library/src/utils/usePopupPositioning.ts index 31c99e279420a..9e9b8b1d33c8c 100644 --- a/packages/react-components/react-datepicker-compat/library/src/utils/usePopupPositioning.ts +++ b/packages/react-components/react-datepicker-compat/library/src/utils/usePopupPositioning.ts @@ -11,7 +11,7 @@ import type { DatePickerProps } from '../DatePicker'; */ export function usePopupPositioning( props: DatePickerProps, -): [triggerRef: React.MutableRefObject, popupRef: React.MutableRefObject] { +): [triggerRef: React.MutableRefObject, popupRef: React.MutableRefObject] { const { positioning } = props; const popupOptions = { diff --git a/packages/react-components/react-dialog/library/etc/react-dialog.api.md b/packages/react-components/react-dialog/library/etc/react-dialog.api.md index 138f6237b9e12..66e115ec18d61 100644 --- a/packages/react-components/react-dialog/library/etc/react-dialog.api.md +++ b/packages/react-components/react-dialog/library/etc/react-dialog.api.md @@ -94,7 +94,7 @@ export type DialogContextValue = { inertTrapFocus: boolean; dialogTitleId?: string; isNestedDialog: boolean; - dialogRef: React_2.Ref; + dialogRef: React_2.Ref; modalType: DialogModalType; requestOpenChange: (data: DialogOpenChangeData) => void; } & Partial>; diff --git a/packages/react-components/react-dialog/library/src/contexts/dialogContext.ts b/packages/react-components/react-dialog/library/src/contexts/dialogContext.ts index c186f2f0b5ddf..695968ad01dd1 100644 --- a/packages/react-components/react-dialog/library/src/contexts/dialogContext.ts +++ b/packages/react-components/react-dialog/library/src/contexts/dialogContext.ts @@ -10,7 +10,7 @@ export type DialogContextValue = { inertTrapFocus: boolean; dialogTitleId?: string; isNestedDialog: boolean; - dialogRef: React.Ref; + dialogRef: React.Ref; modalType: DialogModalType; /** * Requests dialog main component to update it's internal open state diff --git a/packages/react-components/react-dialog/library/src/utils/useFocusFirstElement.ts b/packages/react-components/react-dialog/library/src/utils/useFocusFirstElement.ts index 67d22060afae8..7d78c01e46ec1 100644 --- a/packages/react-components/react-dialog/library/src/utils/useFocusFirstElement.ts +++ b/packages/react-components/react-dialog/library/src/utils/useFocusFirstElement.ts @@ -7,10 +7,13 @@ import type { DialogModalType } from '../Dialog'; /** * Focus first element on content when dialog is opened, */ -export function useFocusFirstElement(open: boolean, modalType: DialogModalType): React.RefObject { +export function useFocusFirstElement( + open: boolean, + modalType: DialogModalType, +): React.RefObject { const { findFirstFocusable } = useFocusFinders(); const { targetDocument } = useFluent_unstable(); - const dialogRef = React.useRef(null); + const dialogRef = React.useRef(null); React.useEffect(() => { if (!open) { diff --git a/packages/react-components/react-infolabel/library/etc/react-infolabel.api.md b/packages/react-components/react-infolabel/library/etc/react-infolabel.api.md index a0adf80e8571a..892c39dd94a2f 100644 --- a/packages/react-components/react-infolabel/library/etc/react-infolabel.api.md +++ b/packages/react-components/react-infolabel/library/etc/react-infolabel.api.md @@ -22,9 +22,10 @@ export const InfoButton: ForwardRefComponent; export const infoButtonClassNames: SlotClassNames; // @public -export type InfoButtonProps = Omit>, 'disabled'> & { +export type InfoButtonProps = Omit>, 'disabled' | 'popover'> & { size?: 'small' | 'medium' | 'large'; inline?: boolean; + popover?: InfoButtonSlots['popover']; }; // @public (undocumented) diff --git a/packages/react-components/react-infolabel/library/src/components/InfoButton/InfoButton.types.ts b/packages/react-components/react-infolabel/library/src/components/InfoButton/InfoButton.types.ts index d6327f0f00f95..74cd16ba383fd 100644 --- a/packages/react-components/react-infolabel/library/src/components/InfoButton/InfoButton.types.ts +++ b/packages/react-components/react-infolabel/library/src/components/InfoButton/InfoButton.types.ts @@ -18,7 +18,7 @@ export type InfoButtonSlots = { /** * InfoButton Props */ -export type InfoButtonProps = Omit>, 'disabled'> & { +export type InfoButtonProps = Omit>, 'disabled' | 'popover'> & { /** * Size of the InfoButton. * @@ -32,6 +32,11 @@ export type InfoButtonProps = Omit>, 'di * @default true */ inline?: boolean; + + /** + * The Popover element that wraps the info and root slots. Use this slot to pass props to the Popover. + */ + popover?: InfoButtonSlots['popover']; }; /** diff --git a/packages/react-components/react-infolabel/library/src/components/InfoButton/useInfoButton.tsx b/packages/react-components/react-infolabel/library/src/components/InfoButton/useInfoButton.tsx index 0128fb1262525..53c3f5812c09c 100644 --- a/packages/react-components/react-infolabel/library/src/components/InfoButton/useInfoButton.tsx +++ b/packages/react-components/react-infolabel/library/src/components/InfoButton/useInfoButton.tsx @@ -35,7 +35,7 @@ const popoverSizeMap = { * @param ref - reference to root HTMLButtonElement of InfoButton */ export const useInfoButton_unstable = (props: InfoButtonProps, ref: React.Ref): InfoButtonState => { - const { size = 'medium', inline = true } = props; + const { size = 'medium', inline = true, popover, info, ...rest } = props; const rootRef = useMergedRefs(ref); @@ -54,12 +54,12 @@ export const useInfoButton_unstable = (props: InfoButtonProps, ref: React.Ref>>, }), - info: slot.always(props.info, { + info: slot.always(info, { defaultProps: { role: 'note', tabIndex: -1, diff --git a/packages/react-components/react-infolabel/library/src/components/InfoLabel/useInfoLabel.ts b/packages/react-components/react-infolabel/library/src/components/InfoLabel/useInfoLabel.ts index 358aab614aa91..c396ad038ae93 100644 --- a/packages/react-components/react-infolabel/library/src/components/InfoLabel/useInfoLabel.ts +++ b/packages/react-components/react-infolabel/library/src/components/InfoLabel/useInfoLabel.ts @@ -1,7 +1,7 @@ import * as React from 'react'; import { Label } from '@fluentui/react-label'; -import { mergeCallbacks, useEventCallback, useId, slot } from '@fluentui/react-utilities'; +import { mergeCallbacks, useId, slot, useEventCallback } from '@fluentui/react-utilities'; import { InfoButton } from '../InfoButton/InfoButton'; import type { InfoLabelProps, InfoLabelState } from './InfoLabel.types'; @@ -60,7 +60,7 @@ export const useInfoLabel_unstable = (props: InfoLabelProps, ref: React.Ref { + mergeCallbacks(infoButtonPopover.onOpenChange, (_, data) => { setOpen(data.open); }), ); diff --git a/packages/react-components/react-menu/library/etc/react-menu.api.md b/packages/react-components/react-menu/library/etc/react-menu.api.md index fa8e086d13546..48a21261edb06 100644 --- a/packages/react-components/react-menu/library/etc/react-menu.api.md +++ b/packages/react-components/react-menu/library/etc/react-menu.api.md @@ -379,14 +379,14 @@ export type MenuState = ComponentState & Required; + menuPopoverRef: React_2.MutableRefObject; menuTrigger: React_2.ReactNode; setContextTarget: SetVirtualMouseTarget; setOpen: (e: MenuOpenEvent, data: MenuOpenChangeData & { ignoreHoverDelay?: boolean; }) => void; triggerId: string; - triggerRef: React_2.MutableRefObject; + triggerRef: React_2.MutableRefObject; onOpenChange?: (e: MenuOpenEvent, data: MenuOpenChangeData) => void; defaultCheckedValues?: Record; safeZone?: React_2.ReactElement | null; diff --git a/packages/react-components/react-menu/library/src/components/Menu/Menu.types.ts b/packages/react-components/react-menu/library/src/components/Menu/Menu.types.ts index 61a984df78d03..7d392253b47f3 100644 --- a/packages/react-components/react-menu/library/src/components/Menu/Menu.types.ts +++ b/packages/react-components/react-menu/library/src/components/Menu/Menu.types.ts @@ -127,7 +127,7 @@ export type MenuState = ComponentState & /** * The ref for the popup */ - menuPopoverRef: React.MutableRefObject; + menuPopoverRef: React.MutableRefObject; /** * Internal react node that just simplifies handling children @@ -152,7 +152,7 @@ export type MenuState = ComponentState & /** * The ref for the MenuTrigger, used for popup positioning */ - triggerRef: React.MutableRefObject; + triggerRef: React.MutableRefObject; /** * Call back when the component requests to change value diff --git a/packages/react-components/react-menu/library/src/components/Menu/useMenu.tsx b/packages/react-components/react-menu/library/src/components/Menu/useMenu.tsx index 730440f4f6896..d27f72c4e7ce3 100644 --- a/packages/react-components/react-menu/library/src/components/Menu/useMenu.tsx +++ b/packages/react-components/react-menu/library/src/components/Menu/useMenu.tsx @@ -288,7 +288,7 @@ const useMenuOpenState = ( element: targetDocument, refs: [state.menuPopoverRef, !state.openOnContext && state.triggerRef].filter( Boolean, - ) as React.MutableRefObject[], + ) as React.MutableRefObject[], callback: event => setOpen(event, { open: false, type: 'clickOutside', event }), }); @@ -300,7 +300,7 @@ const useMenuOpenState = ( callback: event => setOpen(event, { open: false, type: 'scrollOutside', event }), refs: [state.menuPopoverRef, !state.openOnContext && state.triggerRef].filter( Boolean, - ) as React.MutableRefObject[], + ) as React.MutableRefObject[], disabled: !open || !closeOnScroll, }); diff --git a/packages/react-components/react-menu/library/src/components/MenuItem/useCharacterSearch.ts b/packages/react-components/react-menu/library/src/components/MenuItem/useCharacterSearch.ts index f58ca4f769a6c..cad5180897c41 100644 --- a/packages/react-components/react-menu/library/src/components/MenuItem/useCharacterSearch.ts +++ b/packages/react-components/react-menu/library/src/components/MenuItem/useCharacterSearch.ts @@ -3,7 +3,7 @@ import { useMenuListContext_unstable } from '../../contexts/menuListContext'; import type { MenuItemState } from '../../components/index'; import type { ARIAButtonElementIntersection } from '@fluentui/react-aria'; -export const useCharacterSearch = (state: MenuItemState, ref: React.RefObject): MenuItemState => { +export const useCharacterSearch = (state: MenuItemState, ref: React.RefObject): MenuItemState => { 'use no memo'; const setFocusByFirstCharacter = useMenuListContext_unstable(context => context.setFocusByFirstCharacter); diff --git a/packages/react-components/react-menu/library/src/components/MenuSplitGroup/useMenuSplitGroup.ts b/packages/react-components/react-menu/library/src/components/MenuSplitGroup/useMenuSplitGroup.ts index cace8e456a8d7..33e7f755d6b6e 100644 --- a/packages/react-components/react-menu/library/src/components/MenuSplitGroup/useMenuSplitGroup.ts +++ b/packages/react-components/react-menu/library/src/components/MenuSplitGroup/useMenuSplitGroup.ts @@ -19,7 +19,7 @@ export const useMenuSplitGroup_unstable = ( props: MenuSplitGroupProps, ref: React.Ref, ): MenuSplitGroupState => { - const innerRef = React.useRef(); + const innerRef = React.useRef(undefined); const { dir, targetDocument } = useFluent(); const nextArrowKey = getRTLSafeKey(ArrowRight, dir); diff --git a/packages/react-components/react-menu/library/src/contexts/menuContext.ts b/packages/react-components/react-menu/library/src/contexts/menuContext.ts index 7c6f3f50e630f..9e52d632437ed 100644 --- a/packages/react-components/react-menu/library/src/contexts/menuContext.ts +++ b/packages/react-components/react-menu/library/src/contexts/menuContext.ts @@ -13,8 +13,8 @@ const menuContextDefaultValue: MenuContextValue = { checkedValues: {}, onCheckedValueChange: () => null, isSubmenu: false, - triggerRef: { current: null } as unknown as React.MutableRefObject, - menuPopoverRef: { current: null } as unknown as React.MutableRefObject, + triggerRef: { current: null } as unknown as React.MutableRefObject, + menuPopoverRef: { current: null } as unknown as React.MutableRefObject, mountNode: null, triggerId: '', openOnContext: false, diff --git a/packages/react-components/react-menu/library/src/testing/mockUseMenuContext.ts b/packages/react-components/react-menu/library/src/testing/mockUseMenuContext.ts index 06f792b377984..947042e47216d 100644 --- a/packages/react-components/react-menu/library/src/testing/mockUseMenuContext.ts +++ b/packages/react-components/react-menu/library/src/testing/mockUseMenuContext.ts @@ -11,8 +11,8 @@ export const mockUseMenuContext = (options: Partial = {}): voi const mockContext: MenuContextValue = { open: false, setOpen: () => null, - triggerRef: { current: null } as unknown as React.MutableRefObject, - menuPopoverRef: { current: null } as unknown as React.MutableRefObject, + triggerRef: { current: null } as unknown as React.MutableRefObject, + menuPopoverRef: { current: null } as unknown as React.MutableRefObject, mountNode: null, openOnContext: false, openOnHover: false, diff --git a/packages/react-components/react-motion/library/etc/react-motion.api.md b/packages/react-components/react-motion/library/etc/react-motion.api.md index d9d34466f1f4c..de408ca56ce62 100644 --- a/packages/react-components/react-motion/library/etc/react-motion.api.md +++ b/packages/react-components/react-motion/library/etc/react-motion.api.md @@ -5,10 +5,10 @@ ```ts import type { JSXElement } from '@fluentui/react-utilities'; -import { JSXIntrinsicElementKeys } from '@fluentui/react-utilities'; +import type { JSXIntrinsicElementKeys } from '@fluentui/react-utilities'; import * as React_2 from 'react'; -import { SlotComponentType } from '@fluentui/react-utilities'; -import { SlotRenderFunction } from '@fluentui/react-utilities'; +import type { SlotComponentType } from '@fluentui/react-utilities'; +import type { SlotRenderFunction } from '@fluentui/react-utilities'; // @public (undocumented) export type AtomMotion = AtomCore & { @@ -59,7 +59,7 @@ export const MotionBehaviourProvider: React_2.Provider; onMotionFinish?: (ev: null) => void; onMotionCancel?: (ev: null) => void; @@ -97,8 +97,8 @@ export const motionTokens: { }; // @public (undocumented) -export type PresenceComponent = {}> = { - (props: PresenceComponentProps & MotionParams): React_2.ReactElement | null; +export type PresenceComponent = {}> = React_2.FC & { + (props: PresenceComponentProps & MotionParams): JSXElement | null; [MOTION_DEFINITION]: PresenceMotionFn; In: React_2.FC; Out: React_2.FC; @@ -107,7 +107,7 @@ export type PresenceComponent = // @public (undocumented) export type PresenceComponentProps = { appear?: boolean; - children: React_2.ReactElement; + children: JSXElement; imperativeRef?: React_2.Ref; onMotionFinish?: (ev: null, data: { direction: PresenceDirection; @@ -167,7 +167,7 @@ export function presenceMotionSlot = {}> = Pick & { as?: JSXIntrinsicElementKeys; children?: SlotRenderFunction; }; diff --git a/packages/react-components/react-motion/library/src/components/PresenceGroup.tsx b/packages/react-components/react-motion/library/src/components/PresenceGroup.tsx index f344610221492..3b4a36c021715 100644 --- a/packages/react-components/react-motion/library/src/components/PresenceGroup.tsx +++ b/packages/react-components/react-motion/library/src/components/PresenceGroup.tsx @@ -34,8 +34,9 @@ export class PresenceGroup extends React.Component & { - children: React.ReactElement; + children: JSXElement; childKey: string; // That's an internal callback, so we don't need to enforce the type here // eslint-disable-next-line @nx/workspace-consistent-callback-type diff --git a/packages/react-components/react-motion/library/src/factories/createMotionComponent.ts b/packages/react-components/react-motion/library/src/factories/createMotionComponent.ts index 30ab019579981..9d4497c99c313 100644 --- a/packages/react-components/react-motion/library/src/factories/createMotionComponent.ts +++ b/packages/react-components/react-motion/library/src/factories/createMotionComponent.ts @@ -1,3 +1,4 @@ +import type { JSXElement } from '@fluentui/react-utilities'; import { useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities'; import * as React from 'react'; @@ -9,7 +10,7 @@ import type { AtomMotion, AtomMotionFn, MotionParam, MotionImperativeRef } from import { useMotionBehaviourContext } from '../contexts/MotionBehaviourContext'; export type MotionComponentProps = { - children: React.ReactElement; + children: JSXElement; /** Provides imperative controls for the animation. */ imperativeRef?: React.Ref; diff --git a/packages/react-components/react-motion/library/src/factories/createPresenceComponent.ts b/packages/react-components/react-motion/library/src/factories/createPresenceComponent.ts index 324c7c52f2afb..15bfb0dfc7e1e 100644 --- a/packages/react-components/react-motion/library/src/factories/createPresenceComponent.ts +++ b/packages/react-components/react-motion/library/src/factories/createPresenceComponent.ts @@ -1,4 +1,5 @@ import { useEventCallback, useFirstMount, useIsomorphicLayoutEffect } from '@fluentui/react-utilities'; +import type { JSXElement } from '@fluentui/react-utilities'; import * as React from 'react'; import { PresenceGroupChildContext } from '../contexts/PresenceGroupChildContext'; @@ -31,7 +32,7 @@ export type PresenceComponentProps = { appear?: boolean; /** A React element that will be cloned and will have motion effects applied to it. */ - children: React.ReactElement; + children: JSXElement; /** Provides imperative controls for the animation. */ imperativeRef?: React.Ref; @@ -75,8 +76,10 @@ export type PresenceComponentProps = { unmountOnExit?: boolean; }; -export type PresenceComponent = {}> = { - (props: PresenceComponentProps & MotionParams): React.ReactElement | null; +export type PresenceComponent = {}> = React.FC< + PresenceComponentProps & MotionParams +> & { + (props: PresenceComponentProps & MotionParams): JSXElement | null; [MOTION_DEFINITION]: PresenceMotionFn; In: React.FC; Out: React.FC; diff --git a/packages/react-components/react-motion/library/src/hooks/useAnimateAtoms.ts b/packages/react-components/react-motion/library/src/hooks/useAnimateAtoms.ts index 72d67d22e65c7..a59a09c11013f 100644 --- a/packages/react-components/react-motion/library/src/hooks/useAnimateAtoms.ts +++ b/packages/react-components/react-motion/library/src/hooks/useAnimateAtoms.ts @@ -140,7 +140,7 @@ function useAnimateAtomsInSupportedEnvironment() { */ function useAnimateAtomsInTestEnvironment() { const [count, setCount] = React.useState(0); - const callbackRef = React.useRef<() => void>(); + const callbackRef = React.useRef<() => void>(undefined); const realAnimateAtoms = useAnimateAtomsInSupportedEnvironment(); diff --git a/packages/react-components/react-motion/library/src/hooks/useMotionImperativeRef.ts b/packages/react-components/react-motion/library/src/hooks/useMotionImperativeRef.ts index 887042b6b0c88..0073b6ee43044 100644 --- a/packages/react-components/react-motion/library/src/hooks/useMotionImperativeRef.ts +++ b/packages/react-components/react-motion/library/src/hooks/useMotionImperativeRef.ts @@ -4,7 +4,7 @@ import type { AnimationHandle, MotionImperativeRef } from '../types'; export function useMotionImperativeRef( imperativeRef: React.Ref | undefined, ): React.MutableRefObject { - const animationRef = React.useRef(); + const animationRef = React.useRef(undefined); React.useImperativeHandle(imperativeRef, () => ({ setPlayState: state => { diff --git a/packages/react-components/react-motion/library/src/slots/presenceMotionSlot.tsx b/packages/react-components/react-motion/library/src/slots/presenceMotionSlot.tsx index 716ae15d7d055..ece1b5c57f193 100644 --- a/packages/react-components/react-motion/library/src/slots/presenceMotionSlot.tsx +++ b/packages/react-components/react-motion/library/src/slots/presenceMotionSlot.tsx @@ -1,12 +1,11 @@ -import { - SLOT_ELEMENT_TYPE_SYMBOL, - SLOT_RENDER_FUNCTION_SYMBOL, - type SlotComponentType, - type SlotRenderFunction, - type JSXIntrinsicElementKeys, -} from '@fluentui/react-utilities'; - import * as React from 'react'; +import { SLOT_ELEMENT_TYPE_SYMBOL, SLOT_RENDER_FUNCTION_SYMBOL } from '@fluentui/react-utilities'; +import type { + JSXElement, + JSXIntrinsicElementKeys, + SlotComponentType, + SlotRenderFunction, +} from '@fluentui/react-utilities'; import type { PresenceComponentProps } from '../factories/createPresenceComponent'; import type { MotionParam } from '../types'; @@ -34,7 +33,7 @@ export type PresenceMotionSlotProps; + children?: SlotRenderFunction; }; export function presenceMotionSlot = {}>( @@ -57,9 +56,10 @@ export function presenceMotionSlot = (_, props) => (isUnmounted ? null : <>{props.children}); + const renderFn: SlotRenderFunction = ( + _, + props, + ) => (isUnmounted ? null : <>{props.children}); /** * Casting is required here as SlotComponentType is a function, not an object. diff --git a/packages/react-components/react-motion/library/src/utils/groups/types.ts b/packages/react-components/react-motion/library/src/utils/groups/types.ts index 017582146e6d1..28a6dfa18a183 100644 --- a/packages/react-components/react-motion/library/src/utils/groups/types.ts +++ b/packages/react-components/react-motion/library/src/utils/groups/types.ts @@ -1,7 +1,7 @@ -import * as React from 'react'; +import type { JSXElement } from '@fluentui/react-utilities'; export type PresenceGroupChild = { - element: React.ReactElement; + element: JSXElement; appear: boolean; visible: boolean; diff --git a/packages/react-components/react-motion/library/src/utils/useChildElement.ts b/packages/react-components/react-motion/library/src/utils/useChildElement.ts index 591e68f98d1ca..b47cc7be8eedc 100644 --- a/packages/react-components/react-motion/library/src/utils/useChildElement.ts +++ b/packages/react-components/react-motion/library/src/utils/useChildElement.ts @@ -1,5 +1,6 @@ import * as React from 'react'; import { getReactElementRef, useMergedRefs } from '@fluentui/react-utilities'; +import type { JSXElement } from '@fluentui/react-utilities'; const CHILD_ERROR_MESSAGE = [ '@fluentui/react-motion: Invalid child element.', @@ -15,9 +16,9 @@ const CHILD_ERROR_MESSAGE = [ * Logs a warning in development mode if the ref is not set as the component remains functional. */ export function useChildElement( - children: React.ReactElement, + children: JSXElement, mounted: boolean = true, -): [React.ReactElement, React.RefObject] { +): [JSXElement, React.RefObject] { const childRef = React.useRef(null); React.useEffect(() => { diff --git a/packages/react-components/react-nav/library/etc/react-nav.api.md b/packages/react-components/react-nav/library/etc/react-nav.api.md index 46af928255b50..ff62e7b75a73e 100644 --- a/packages/react-components/react-nav/library/etc/react-nav.api.md +++ b/packages/react-components/react-nav/library/etc/react-nav.api.md @@ -264,7 +264,7 @@ export type NavItemProps = ComponentProps & { // @public (undocumented) export type NavItemRegisterData = { value: NavItemValue; - ref: React_2.RefObject; + ref: React_2.RefObject; }; // @public (undocumented) diff --git a/packages/react-components/react-nav/library/src/components/NavContext.types.ts b/packages/react-components/react-nav/library/src/components/NavContext.types.ts index 659424009eae7..6ac3bbfbcb036 100644 --- a/packages/react-components/react-nav/library/src/components/NavContext.types.ts +++ b/packages/react-components/react-nav/library/src/components/NavContext.types.ts @@ -67,7 +67,7 @@ export type NavItemRegisterData = { /** * The reference to the navItem HTML element. */ - ref: React.RefObject; + ref: React.RefObject; }; export type RegisterNavItemEventHandler = (data: NavItemRegisterData) => void; diff --git a/packages/react-components/react-overflow/library/etc/react-overflow.api.md b/packages/react-components/react-overflow/library/etc/react-overflow.api.md index fb10f725e22b1..c276adb2137c2 100644 --- a/packages/react-components/react-overflow/library/etc/react-overflow.api.md +++ b/packages/react-components/react-overflow/library/etc/react-overflow.api.md @@ -65,7 +65,7 @@ export const useOverflowContainer: (update: OnUpda // @internal (undocumented) export interface UseOverflowContainerReturn extends Pick { - containerRef: React_2.RefObject; + containerRef: React_2.RefObject; } // @internal (undocumented) @@ -75,14 +75,14 @@ export const useOverflowContext: (selector: ContextSelector number; // @internal -export function useOverflowDivider(groupId?: string): React_2.RefObject; +export function useOverflowDivider(groupId?: string): React_2.RefObject; // @internal -export function useOverflowItem(id: string, priority?: number, groupId?: string): React_2.RefObject; +export function useOverflowItem(id: string, priority?: number, groupId?: string): React_2.RefObject; // @public (undocumented) export function useOverflowMenu(id?: string): { - ref: React_2.RefObject; + ref: React_2.MutableRefObject; overflowCount: number; isOverflowing: boolean; }; diff --git a/packages/react-components/react-overflow/library/src/components/Overflow.tsx b/packages/react-components/react-overflow/library/src/components/Overflow.tsx index 39b3e34b406c6..ede0ea98a1780 100644 --- a/packages/react-components/react-overflow/library/src/components/Overflow.tsx +++ b/packages/react-components/react-overflow/library/src/components/Overflow.tsx @@ -77,10 +77,10 @@ export const Overflow = React.forwardRef((props: OverflowProps, ref) => { }, ); - const child = getTriggerChild(children); + const child = getTriggerChild(children); const clonedChild = applyTriggerPropsToChildren(children, { ref: useMergedRefs(containerRef, ref, getReactElementRef(child)), - className: mergeClasses('fui-Overflow', styles.overflowMenu, styles.overflowingItems, children.props.className), + className: mergeClasses('fui-Overflow', styles.overflowMenu, styles.overflowingItems, child?.props.className), }); return ( diff --git a/packages/react-components/react-overflow/library/src/types.ts b/packages/react-components/react-overflow/library/src/types.ts index 4bf971e67fb3c..df45f3b406bdb 100644 --- a/packages/react-components/react-overflow/library/src/types.ts +++ b/packages/react-components/react-overflow/library/src/types.ts @@ -9,5 +9,5 @@ export interface UseOverflowContainerReturn /** * Ref to apply to the container that will overflow */ - containerRef: React.RefObject; + containerRef: React.RefObject; } diff --git a/packages/react-components/react-overflow/library/src/useOverflowDivider.ts b/packages/react-components/react-overflow/library/src/useOverflowDivider.ts index 645e043dcfb1d..f3cc463b4ca76 100644 --- a/packages/react-components/react-overflow/library/src/useOverflowDivider.ts +++ b/packages/react-components/react-overflow/library/src/useOverflowDivider.ts @@ -8,8 +8,8 @@ import { useOverflowContext } from './overflowContext'; * @param groupId - assigns the item to a group, group visibility can be watched * @returns ref to assign to an intrinsic HTML element */ -export function useOverflowDivider(groupId?: string): React.RefObject { - const ref = React.useRef(null); +export function useOverflowDivider(groupId?: string): React.RefObject { + const ref = React.useRef(null); const registerDivider = useOverflowContext(v => v.registerDivider); useIsomorphicLayoutEffect(() => { diff --git a/packages/react-components/react-overflow/library/src/useOverflowItem.ts b/packages/react-components/react-overflow/library/src/useOverflowItem.ts index e2c0acc6b53b9..9c158f5bca589 100644 --- a/packages/react-components/react-overflow/library/src/useOverflowItem.ts +++ b/packages/react-components/react-overflow/library/src/useOverflowItem.ts @@ -14,8 +14,8 @@ export function useOverflowItem( id: string, priority?: number, groupId?: string, -): React.RefObject { - const ref = React.useRef(null); +): React.RefObject { + const ref = React.useRef(null); const registerItem = useOverflowContext(v => v.registerItem); useIsomorphicLayoutEffect(() => { diff --git a/packages/react-components/react-overflow/library/src/useOverflowMenu.ts b/packages/react-components/react-overflow/library/src/useOverflowMenu.ts index 9e498db7ce4ee..fbfcce664a78f 100644 --- a/packages/react-components/react-overflow/library/src/useOverflowMenu.ts +++ b/packages/react-components/react-overflow/library/src/useOverflowMenu.ts @@ -5,12 +5,12 @@ import { useOverflowCount } from './useOverflowCount'; export function useOverflowMenu( id?: string, -): { ref: React.RefObject; overflowCount: number; isOverflowing: boolean } { +): { ref: React.MutableRefObject; overflowCount: number; isOverflowing: boolean } { const elementId = useId('overflow-menu', id); const overflowCount = useOverflowCount(); const registerOverflowMenu = useOverflowContext(v => v.registerOverflowMenu); const updateOverflow = useOverflowContext(v => v.updateOverflow); - const ref = React.useRef(null); + const ref = React.useRef(null); const isOverflowing = overflowCount > 0; useIsomorphicLayoutEffect(() => { diff --git a/packages/react-components/react-provider/library/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts b/packages/react-components/react-provider/library/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts index afa7a39d222ec..61b9c77268388 100644 --- a/packages/react-components/react-provider/library/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts +++ b/packages/react-components/react-provider/library/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts @@ -53,7 +53,7 @@ export const useFluentProviderThemeStyleTag = ( const { targetDocument, theme, rendererAttributes } = options; - const styleTag = React.useRef(); + const styleTag = React.useRef(undefined); const styleTagId = useId(fluentProviderClassNames.root); const styleElementAttributes = rendererAttributes; diff --git a/packages/react-components/react-table/library/src/hooks/useKeyboardResizing.ts b/packages/react-components/react-table/library/src/hooks/useKeyboardResizing.ts index 9c5a799429a60..96bbfe98ec362 100644 --- a/packages/react-components/react-table/library/src/hooks/useKeyboardResizing.ts +++ b/packages/react-components/react-table/library/src/hooks/useKeyboardResizing.ts @@ -26,7 +26,7 @@ export function useKeyboardResizing(columnResizeState: ColumnResizeState): { }; } { const [columnId, setColumnId] = React.useState(); - const onChangeRef = React.useRef(); + const onChangeRef = React.useRef(undefined); const { findPrevFocusable } = useFocusFinders(); const columnResizeStateRef = React.useRef(columnResizeState); @@ -34,7 +34,7 @@ export function useKeyboardResizing(columnResizeState: ColumnResizeState): { columnResizeStateRef.current = columnResizeState; }, [columnResizeState]); - const [resizeHandleRefs] = React.useState(() => new Map>()); + const [resizeHandleRefs] = React.useState(() => new Map>()); const keyboardHandler = useEventCallback((event: React.KeyboardEvent) => { if (!columnId) { @@ -146,7 +146,7 @@ export function useKeyboardResizing(columnResizeState: ColumnResizeState): { (colId: TableColumnId, currentWidth: number) => ({ onKeyDown: keyboardHandler, onBlur: disableInteractiveMode, - ref: getKeyboardResizingRef(colId), + ref: getKeyboardResizingRef(colId) as React.RefObject, role: 'separator', 'aria-label': 'Resize column', 'aria-valuetext': `${currentWidth} pixels`, diff --git a/packages/react-components/react-tabs/library/etc/react-tabs.api.md b/packages/react-components/react-tabs/library/etc/react-tabs.api.md index 69c9484475d22..a8b7de895e2c1 100644 --- a/packages/react-components/react-tabs/library/etc/react-tabs.api.md +++ b/packages/react-components/react-tabs/library/etc/react-tabs.api.md @@ -98,7 +98,7 @@ export type TabProps = Omit>, 'content' | 'valu // @public (undocumented) export type TabRegisterData = { value: TabValue; - ref: React_2.RefObject; + ref: React_2.RefObject; }; // @public (undocumented) diff --git a/packages/react-components/react-tabs/library/src/components/TabList/TabList.types.ts b/packages/react-components/react-tabs/library/src/components/TabList/TabList.types.ts index 79c84b8ce5d58..ad564f805588b 100644 --- a/packages/react-components/react-tabs/library/src/components/TabList/TabList.types.ts +++ b/packages/react-components/react-tabs/library/src/components/TabList/TabList.types.ts @@ -11,7 +11,7 @@ export type TabRegisterData = { /** * The reference to the tab HTML element. */ - ref: React.RefObject; + ref: React.RefObject; }; export type RegisterTabEventHandler = (data: TabRegisterData) => void; diff --git a/packages/react-components/react-tabster/etc/react-tabster.api.md b/packages/react-components/react-tabster/etc/react-tabster.api.md index dc79bd12943f8..7aeed4e5ac0cb 100644 --- a/packages/react-components/react-tabster/etc/react-tabster.api.md +++ b/packages/react-components/react-tabster/etc/react-tabster.api.md @@ -1473,13 +1473,13 @@ export function useFocusedElementChange(callback: Types.SubscribableCallback { - findAllFocusable: (container: HTMLElement, acceptCondition?: (el: HTMLElement) => boolean) => HTMLElement[]; - findFirstFocusable: (container: HTMLElement) => HTMLElement | null | undefined; - findLastFocusable: (container: HTMLElement) => HTMLElement | null | undefined; - findNextFocusable: (currentElement: HTMLElement, options?: { + findAllFocusable: (container: HTMLElement | null, acceptCondition?: (el: HTMLElement) => boolean) => HTMLElement[]; + findFirstFocusable: (container: HTMLElement | null) => HTMLElement | null | undefined; + findLastFocusable: (container: HTMLElement | null) => HTMLElement | null | undefined; + findNextFocusable: (currentElement: HTMLElement | null, options?: { container?: HTMLElement; }) => HTMLElement | null | undefined; - findPrevFocusable: (currentElement: HTMLElement, options?: { + findPrevFocusable: (currentElement: HTMLElement | null, options?: { container?: HTMLElement; }) => HTMLElement | null | undefined; }; diff --git a/packages/react-components/react-tabster/src/hooks/useFocusFinders.ts b/packages/react-components/react-tabster/src/hooks/useFocusFinders.ts index f5e83d94a3e1b..597c7b92e9609 100644 --- a/packages/react-components/react-tabster/src/hooks/useFocusFinders.ts +++ b/packages/react-components/react-tabster/src/hooks/useFocusFinders.ts @@ -7,15 +7,15 @@ import { useTabster } from './useTabster'; * Returns a set of helper functions that will traverse focusable elements in the context of a root DOM element */ export const useFocusFinders = (): { - findAllFocusable: (container: HTMLElement, acceptCondition?: (el: HTMLElement) => boolean) => HTMLElement[]; - findFirstFocusable: (container: HTMLElement) => HTMLElement | null | undefined; - findLastFocusable: (container: HTMLElement) => HTMLElement | null | undefined; + findAllFocusable: (container: HTMLElement | null, acceptCondition?: (el: HTMLElement) => boolean) => HTMLElement[]; + findFirstFocusable: (container: HTMLElement | null) => HTMLElement | null | undefined; + findLastFocusable: (container: HTMLElement | null) => HTMLElement | null | undefined; findNextFocusable: ( - currentElement: HTMLElement, + currentElement: HTMLElement | null, options?: { container?: HTMLElement }, ) => HTMLElement | null | undefined; findPrevFocusable: ( - currentElement: HTMLElement, + currentElement: HTMLElement | null, options?: { container?: HTMLElement }, ) => HTMLElement | null | undefined; } => { @@ -24,24 +24,24 @@ export const useFocusFinders = (): { // Narrow props for now and let need dictate additional props in the future const findAllFocusable = React.useCallback( - (container: HTMLElement, acceptCondition?: (el: HTMLElement) => boolean) => - tabsterRef.current?.focusable.findAll({ container, acceptCondition }) || [], + (container: HTMLElement | null, acceptCondition?: (el: HTMLElement) => boolean) => + (container && tabsterRef.current?.focusable.findAll({ container, acceptCondition })) || [], [tabsterRef], ); const findFirstFocusable = React.useCallback( - (container: HTMLElement) => tabsterRef.current?.focusable.findFirst({ container }), + (container: HTMLElement | null) => container && tabsterRef.current?.focusable.findFirst({ container }), [tabsterRef], ); const findLastFocusable = React.useCallback( - (container: HTMLElement) => tabsterRef.current?.focusable.findLast({ container }), + (container: HTMLElement | null) => container && tabsterRef.current?.focusable.findLast({ container }), [tabsterRef], ); const findNextFocusable = React.useCallback( - (currentElement: HTMLElement, options: Pick, 'container'> = {}) => { - if (!tabsterRef.current || !targetDocument) { + (currentElement: HTMLElement | null, options: Pick, 'container'> = {}) => { + if (!tabsterRef.current || !targetDocument || !currentElement) { return null; } @@ -53,8 +53,8 @@ export const useFocusFinders = (): { ); const findPrevFocusable = React.useCallback( - (currentElement: HTMLElement, options: Pick, 'container'> = {}) => { - if (!tabsterRef.current || !targetDocument) { + (currentElement: HTMLElement | null, options: Pick, 'container'> = {}) => { + if (!tabsterRef.current || !targetDocument || !currentElement) { return null; } diff --git a/packages/react-components/react-tag-picker/library/etc/react-tag-picker.api.md b/packages/react-components/react-tag-picker/library/etc/react-tag-picker.api.md index 3951926e08b27..8854cdc9731b4 100644 --- a/packages/react-components/react-tag-picker/library/etc/react-tag-picker.api.md +++ b/packages/react-components/react-tag-picker/library/etc/react-tag-picker.api.md @@ -87,17 +87,17 @@ export interface TagPickerContextValue extends Pick; + popoverRef: React_2.RefObject; // (undocumented) - secondaryActionRef: React_2.RefObject; + secondaryActionRef: React_2.RefObject; // (undocumented) size: TagPickerSize; // (undocumented) - tagPickerGroupRef: React_2.RefObject; + tagPickerGroupRef: React_2.RefObject; // (undocumented) - targetRef: React_2.RefObject; + targetRef: React_2.RefObject; // (undocumented) - triggerRef: React_2.RefObject; + triggerRef: React_2.RefObject; } // @public (undocumented) diff --git a/packages/react-components/react-tag-picker/library/src/contexts/TagPickerContext.ts b/packages/react-components/react-tag-picker/library/src/contexts/TagPickerContext.ts index 865832a5bd943..9a158ae11738f 100644 --- a/packages/react-components/react-tag-picker/library/src/contexts/TagPickerContext.ts +++ b/packages/react-components/react-tag-picker/library/src/contexts/TagPickerContext.ts @@ -18,12 +18,12 @@ export interface TagPickerContextValue | 'appearance' | 'disabled' > { - triggerRef: React.RefObject; - popoverRef: React.RefObject; + triggerRef: React.RefObject; + popoverRef: React.RefObject; popoverId: string; - targetRef: React.RefObject; - secondaryActionRef: React.RefObject; - tagPickerGroupRef: React.RefObject; + targetRef: React.RefObject; + secondaryActionRef: React.RefObject; + tagPickerGroupRef: React.RefObject; size: TagPickerSize; noPopover?: boolean; } diff --git a/packages/react-components/react-tag-picker/library/src/utils/useExpandLabel.ts b/packages/react-components/react-tag-picker/library/src/utils/useExpandLabel.ts index b321308a0e5ac..8f5e0af22cac2 100644 --- a/packages/react-components/react-tag-picker/library/src/utils/useExpandLabel.ts +++ b/packages/react-components/react-tag-picker/library/src/utils/useExpandLabel.ts @@ -6,11 +6,11 @@ import { TagPickerControlState } from '../TagPickerControl'; export function useExpandLabel(options: { tagPickerId: string; state: Pick; -}): React.RefObject { +}): React.RefObject { const { tagPickerId, state } = options; const { targetDocument } = useFluent(); const triggerRef = useTagPickerContext_unstable(ctx => ctx.triggerRef); - const expandIconRef = React.useRef(null); + const expandIconRef = React.useRef(null); const hasExpandIcon = !!state.expandIcon; const { diff --git a/packages/react-components/react-tags/library/src/components/TagGroup/useTagGroup.ts b/packages/react-components/react-tags/library/src/components/TagGroup/useTagGroup.ts index a1bd18a871e43..b34305a30b58c 100644 --- a/packages/react-components/react-tags/library/src/components/TagGroup/useTagGroup.ts +++ b/packages/react-components/react-tags/library/src/components/TagGroup/useTagGroup.ts @@ -36,7 +36,7 @@ export const useTagGroup_unstable = (props: TagGroupProps, ref: React.Ref(); + const innerRef = React.useRef(undefined); const { targetDocument } = useFluent(); const { findNextFocusable, findPrevFocusable } = useFocusFinders(); diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarousel/Carousel/Carousel.tsx b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarousel/Carousel/Carousel.tsx index 0c02884993584..b8ba5f64c592b 100644 --- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarousel/Carousel/Carousel.tsx +++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarousel/Carousel/Carousel.tsx @@ -11,7 +11,7 @@ import { CarouselContextValue } from './CarouselContext'; // TODO: Migrate this into an external @fluentui/carousel component // For now, we won't export this publicly, is only for internal TeachingPopover use until stabilized. export function useCarousel_unstable(options: UseCarouselOptions): { - carouselRef: React.RefObject; + carouselRef: React.RefObject; carousel: { store: CarouselStore; value: string | null; diff --git a/packages/react-components/react-toast/library/src/state/types.ts b/packages/react-components/react-toast/library/src/state/types.ts index 277f08ada331b..68b2ce6089194 100644 --- a/packages/react-components/react-toast/library/src/state/types.ts +++ b/packages/react-components/react-toast/library/src/state/types.ts @@ -112,7 +112,7 @@ export interface Toast extends ToastOptions { */ order: number; - imperativeRef: React.RefObject; + imperativeRef: React.RefObject; } export interface CommonToastDetail { diff --git a/packages/react-components/react-tooltip/library/etc/react-tooltip.api.md b/packages/react-components/react-tooltip/library/etc/react-tooltip.api.md index 789e8326d7452..e1ae79660b1f3 100644 --- a/packages/react-components/react-tooltip/library/etc/react-tooltip.api.md +++ b/packages/react-components/react-tooltip/library/etc/react-tooltip.api.md @@ -48,7 +48,7 @@ export type TooltipSlots = { // @public export type TooltipState = ComponentState & Pick & Required> & { - children?: React_2.ReactElement | null; + children?: JSXElement | null; shouldRenderTooltip?: boolean; arrowRef?: React_2.Ref; arrowClassName?: string; diff --git a/packages/react-components/react-tooltip/library/src/components/Tooltip/Tooltip.types.ts b/packages/react-components/react-tooltip/library/src/components/Tooltip/Tooltip.types.ts index a206d213748ae..8ef326605a86f 100644 --- a/packages/react-components/react-tooltip/library/src/components/Tooltip/Tooltip.types.ts +++ b/packages/react-components/react-tooltip/library/src/components/Tooltip/Tooltip.types.ts @@ -1,6 +1,6 @@ import * as React from 'react'; import type { PositioningShorthand } from '@fluentui/react-positioning'; -import type { ComponentProps, ComponentState, Slot, TriggerProps } from '@fluentui/react-utilities'; +import type { ComponentProps, ComponentState, JSXElement, Slot, TriggerProps } from '@fluentui/react-utilities'; import type { PortalProps } from '@fluentui/react-portal'; /** @@ -128,7 +128,7 @@ export type TooltipProps = ComponentProps & export type TooltipState = ComponentState & Pick & Required> & { - children?: React.ReactElement | null; + children?: JSXElement | null; /** * Whether the tooltip should be rendered to the DOM. diff --git a/packages/react-components/react-tree/library/etc/react-tree.api.md b/packages/react-components/react-tree/library/etc/react-tree.api.md index e3216bcb01276..f6fb799985834 100644 --- a/packages/react-components/react-tree/library/etc/react-tree.api.md +++ b/packages/react-components/react-tree/library/etc/react-tree.api.md @@ -183,7 +183,7 @@ export type TreeItemContextValue = { expandIconRef: React_2.Ref; layoutRef: React_2.Ref; subtreeRef: React_2.Ref; - treeItemRef?: React_2.RefObject; + treeItemRef?: React_2.RefObject; itemType: TreeItemType; value: TreeItemValue; open: boolean; diff --git a/packages/react-components/react-tree/library/src/contexts/treeItemContext.ts b/packages/react-components/react-tree/library/src/contexts/treeItemContext.ts index 2237719fffd7a..179d84d1ee454 100644 --- a/packages/react-components/react-tree/library/src/contexts/treeItemContext.ts +++ b/packages/react-components/react-tree/library/src/contexts/treeItemContext.ts @@ -22,7 +22,7 @@ export type TreeItemContextValue = { subtreeRef: React.Ref; // FIXME: this is only marked as optional to avoid breaking changes // it should always be provided internally - treeItemRef?: React.RefObject; + treeItemRef?: React.RefObject; itemType: TreeItemType; value: TreeItemValue; open: boolean; diff --git a/packages/react-components/react-tree/library/src/hooks/useHTMLElementWalkerRef.ts b/packages/react-components/react-tree/library/src/hooks/useHTMLElementWalkerRef.ts index c9e2d2ebce437..1d9367f282bb3 100644 --- a/packages/react-components/react-tree/library/src/hooks/useHTMLElementWalkerRef.ts +++ b/packages/react-components/react-tree/library/src/hooks/useHTMLElementWalkerRef.ts @@ -9,7 +9,7 @@ export function useHTMLElementWalkerRef(): { } { const { targetDocument } = useFluent_unstable(); - const walkerRef = React.useRef(); + const walkerRef = React.useRef(undefined); const rootRef: React.Ref = React.useCallback( (root: HTMLElement) => { diff --git a/packages/react-components/react-utilities/etc/react-utilities.api.md b/packages/react-components/react-utilities/etc/react-utilities.api.md index 9d4177eacea2b..e588384a264b6 100644 --- a/packages/react-components/react-utilities/etc/react-utilities.api.md +++ b/packages/react-components/react-utilities/etc/react-utilities.api.md @@ -209,7 +209,7 @@ export interface RefAttributes extends React_2.Attributes { } // @public -export type RefObjectFunction = React_2.RefObject & ((value: T | null) => void); +export type RefObjectFunction = React_2.RefObject & ((value: T | null) => void); // @public export function resetIdsForTests(): void; diff --git a/packages/react-components/react-utilities/src/hooks/useMergedRefs.ts b/packages/react-components/react-utilities/src/hooks/useMergedRefs.ts index 91a6358d8fb67..5656b79e3f967 100644 --- a/packages/react-components/react-utilities/src/hooks/useMergedRefs.ts +++ b/packages/react-components/react-utilities/src/hooks/useMergedRefs.ts @@ -4,7 +4,7 @@ import * as React from 'react'; * A Ref function which can be treated like a ref object in that it has an attached * current property, which will be updated as the ref is evaluated. */ -export type RefObjectFunction = React.RefObject & ((value: T | null) => void); +export type RefObjectFunction = React.RefObject & ((value: T | null) => void); /** @internal */ type MutableRefObjectFunction = React.MutableRefObject & ((value: T | null) => void);