diff --git a/change/@fluentui-react-migration-v8-v9-3333df90-3dd2-4b97-b71f-8f963b8c8e4f.json b/change/@fluentui-react-migration-v8-v9-3333df90-3dd2-4b97-b71f-8f963b8c8e4f.json new file mode 100644 index 00000000000000..773d460ef1bc51 --- /dev/null +++ b/change/@fluentui-react-migration-v8-v9-3333df90-3dd2-4b97-b71f-8f963b8c8e4f.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: use custom RefAttributes instead of React.RefAttributes", + "packageName": "@fluentui/react-migration-v8-v9", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-nav-preview-3f6df7d6-3a1d-4532-8d6f-7afd9037c820.json b/change/@fluentui-react-nav-preview-3f6df7d6-3a1d-4532-8d6f-7afd9037c820.json new file mode 100644 index 00000000000000..f8fcf7d3b6afe9 --- /dev/null +++ b/change/@fluentui-react-nav-preview-3f6df7d6-3a1d-4532-8d6f-7afd9037c820.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "chore: use custom RefAttributes instead of React.RefAttributes", + "packageName": "@fluentui/react-nav-preview", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-utilities-633b80c9-df90-42c4-a7a5-29672093aab1.json b/change/@fluentui-react-utilities-633b80c9-df90-42c4-a7a5-29672093aab1.json new file mode 100644 index 00000000000000..a5fc772a96aa12 --- /dev/null +++ b/change/@fluentui-react-utilities-633b80c9-df90-42c4-a7a5-29672093aab1.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "chore: disable lint error on React.RefAttibute within getIntrinsicElementProps", + "packageName": "@fluentui/react-utilities", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/packages/eslint-plugin/src/configs/react.js b/packages/eslint-plugin/src/configs/react.js index 2d58c4295cb6c1..8c7cb3f6bf159d 100644 --- a/packages/eslint-plugin/src/configs/react.js +++ b/packages/eslint-plugin/src/configs/react.js @@ -37,6 +37,18 @@ module.exports = { }, ], 'react-compiler/react-compiler': ['error'], + '@typescript-eslint/no-restricted-types': [ + 'error', + { + types: { + 'React.RefAttributes': { + message: + '`React.RefAttributes` is leaking string starting @types/react@18.2.61 creating invalid type contracts. Use `RefAttributes` from @fluentui/react-utilities instead', + fixWith: 'RefAttributes', + }, + }, + }, + ], }, overrides: [ // Enable rules requiring type info only for appropriate files/circumstances diff --git a/packages/react-components/react-migration-v8-v9/library/etc/react-migration-v8-v9.api.md b/packages/react-components/react-migration-v8-v9/library/etc/react-migration-v8-v9.api.md index 017cb6c9a017a6..51b9b559b527dd 100644 --- a/packages/react-components/react-migration-v8-v9/library/etc/react-migration-v8-v9.api.md +++ b/packages/react-components/react-migration-v8-v9/library/etc/react-migration-v8-v9.api.md @@ -42,7 +42,7 @@ export const brandWeb: BrandVariants; export const ButtonShim: React_2.ForwardRefExoticComponent>; // @public (undocumented) -export const CheckboxShim: React_2.ForwardRefExoticComponent & React_2.RefAttributes>; +export const CheckboxShim: React_2.ForwardRefExoticComponent>; // @public export type ColorVariants = { diff --git a/packages/react-components/react-migration-v8-v9/library/src/components/Button/ActionButtonShim.tsx b/packages/react-components/react-migration-v8-v9/library/src/components/Button/ActionButtonShim.tsx index c2c8d3e73589f7..67705e36c05162 100644 --- a/packages/react-components/react-migration-v8-v9/library/src/components/Button/ActionButtonShim.tsx +++ b/packages/react-components/react-migration-v8-v9/library/src/components/Button/ActionButtonShim.tsx @@ -3,20 +3,24 @@ import * as React from 'react'; import type { IButtonProps } from '@fluentui/react'; import { Button } from '@fluentui/react-components'; +import type { RefAttributes } from '@fluentui/react-utilities'; import { shimButtonProps } from './shimButtonProps'; /** * Shims a v8 ActionButton to render a v9 Button */ -export const ActionButtonShim: React.ForwardRefExoticComponent> = - React.forwardRef((props, _ref) => { - const variantProps = { - ...props, - variantClassName: 'ms-Button--action ms-Button--command', - }; +export const ActionButtonShim: React.ForwardRefExoticComponent< + IButtonProps & + // eslint-disable-next-line @typescript-eslint/no-restricted-types -- this is expected in order to be compatible with v8, as every v8 interface contains `React.RefAttributes` to accept ref as string + React.RefAttributes +> = React.forwardRef((props, _ref) => { + const variantProps = { + ...props, + variantClassName: 'ms-Button--action ms-Button--command', + }; - const shimProps = shimButtonProps(variantProps); + const shimProps = shimButtonProps(variantProps); - return