feat(eslint-rules): add consistent-callback-type rule for event callback typing for react-components and enable it in all v9 packages

change/@fluentui-eslint-plugin-2d20c89f-0a2b-4e89-a47c-e6314bd42a2e.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: add internal lint rule, no change to public behavior/api.",
+  "packageName": "@fluentui/eslint-plugin",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-accordion-74970004-bc83-461d-a43c-3758c0c429b5.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: disable consistent-callback-type lint rule for existing callbacks",
+  "packageName": "@fluentui/react-accordion",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-card-26618c50-93dc-4116-8d0a-90c4f1566875.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: disable consistent-callback-type lint rule for existing callbacks",
+  "packageName": "@fluentui/react-card",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-checkbox-61435c59-fe06-4b4a-a1b1-f0a318fd8c87.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: disable consistent-callback-type lint rule for existing callbacks",
+  "packageName": "@fluentui/react-checkbox",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-combobox-536f8d48-97f5-47a6-8328-e9359bc62c1e.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: disable consistent-callback-type lint rule for existing callbacks",
+  "packageName": "@fluentui/react-combobox",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-datepicker-compat-583ce0d7-9840-431b-8056-91f5991ef562.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: disable consistent-callback-type lint rule for existing callbacks",
+  "packageName": "@fluentui/react-datepicker-compat",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-dialog-285527f9-bb4d-41d5-b6f4-1b57ab4f8ced.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: disable consistent-callback-type lint rule for existing callbacks",
+  "packageName": "@fluentui/react-dialog",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-input-b337e912-5bde-4162-9a26-201fcc5347ee.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: disable consistent-callback-type lint rule for existing callbacks",
+  "packageName": "@fluentui/react-input",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-menu-ba500681-bcdd-4437-aaa3-002bf617b009.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: disable consistent-callback-type lint rule for existing callbacks",
+  "packageName": "@fluentui/react-menu",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-migration-v0-v9-2af1c3a5-5f09-4ead-80b6-c7370457d6c9.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: disable consistent-callback-type lint rule for existing callbacks",
+  "packageName": "@fluentui/react-migration-v0-v9",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-popover-6de680db-0afe-4131-a96c-9ef10d14c997.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: disable consistent-callback-type lint rule for existing callbacks",
+  "packageName": "@fluentui/react-popover",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-radio-6a06b070-1df9-4416-92fd-8f4de71b1759.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: disable consistent-callback-type lint rule for existing callbacks",
+  "packageName": "@fluentui/react-radio",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-rating-preview-be1073d4-f244-4c68-8db6-12d4e897bc68.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: disable consistent-callback-type lint rule for existing callbacks",
+  "packageName": "@fluentui/react-rating-preview",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-select-6c0bfff0-b7e4-46a6-a4d3-ca79eada2d17.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: disable consistent-callback-type lint rule for existing callbacks",
+  "packageName": "@fluentui/react-select",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-slider-a79b527f-6529-4b9e-92ef-fca325b162db.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: disable consistent-callback-type lint rule for existing callbacks",
+  "packageName": "@fluentui/react-slider",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-spinbutton-2becfac8-c8ca-4ecb-b961-dfad3e44f878.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: disable consistent-callback-type lint rule for existing callbacks",
+  "packageName": "@fluentui/react-spinbutton",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-switch-a4f6ce47-4fdb-421d-8229-ec4e30dd9d6b.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: disable consistent-callback-type lint rule for existing callbacks",
+  "packageName": "@fluentui/react-switch",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-table-ea92aa04-54e5-4f63-936e-e37fe9a4f2f7.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: disable consistent-callback-type lint rule for existing callbacks",
+  "packageName": "@fluentui/react-table",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-tabs-e928b3f8-e533-4e3c-960d-b62cd1b6661b.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: disable consistent-callback-type lint rule for existing callbacks",
+  "packageName": "@fluentui/react-tabs",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-tags-b38fc107-b805-4f7b-bc94-18852cee65c8.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: disable consistent-callback-type lint rule for existing callbacks",
+  "packageName": "@fluentui/react-tags",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-teaching-popover-preview-d2a6cc93-7e92-4bce-bbf4-44aa4fc67376.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: disable consistent-callback-type lint rule for existing callbacks",
+  "packageName": "@fluentui/react-teaching-popover-preview",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-textarea-a9dcf4be-9061-4e14-aeac-2299e8f2a02e.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: disable consistent-callback-type lint rule for existing callbacks",
+  "packageName": "@fluentui/react-textarea",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-timepicker-compat-459ec9f4-1fb6-43f4-ae67-ab03757ed9c1.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: disable consistent-callback-type lint rule for existing callbacks",
+  "packageName": "@fluentui/react-timepicker-compat",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-toast-32f33ebb-12ce-4009-9088-06208e6bc563.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: disable consistent-callback-type lint rule for existing callbacks",
+  "packageName": "@fluentui/react-toast",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-toolbar-8707f19b-076b-41da-ad95-246744dc3cce.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: disable consistent-callback-type lint rule for existing callbacks",
+  "packageName": "@fluentui/react-toolbar",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-tooltip-486e2f8e-d4ef-49e6-865a-128e020396f8.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: disable consistent-callback-type lint rule for existing callbacks",
+  "packageName": "@fluentui/react-tooltip",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-tree-6f3593c4-9155-4a86-8cdf-653b8992e6a1.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: disable consistent-callback-type lint rule for existing callbacks",
+  "packageName": "@fluentui/react-tree",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-virtualizer-7344c6de-f2e4-4795-bd41-06f3bba0406c.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: disable consistent-callback-type lint rule for existing callbacks",
+  "packageName": "@fluentui/react-virtualizer",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

packages/eslint-plugin/src/configs/react.js

@@ -2,6 +2,7 @@
 
 const path = require('path');
 const configHelpers = require('../utils/configHelpers');
+const { __internal } = require('../internal');
 
 /** @type {import("eslint").Linter.RulesRecord} */
 const typeAwareRules = {
@@ -58,5 +59,12 @@ module.exports = {
         'react/jsx-no-bind': 'off',
       },
     },
-  ],
+    {
+      files: ['**/src/**/*.{ts,tsx}'],
+      rules: {
+        '@nx/workspace-consistent-callback-type': 'error',
+      },
+    },
+    __internal.overrides.react,
+  ].filter(Boolean),
 };

packages/eslint-plugin/src/internal.js

@@ -21,6 +21,17 @@ const __internal = {
    * `@nx/eslint-plugin` is necessary in order to register custom lint rules that live within tools/eslint-rules
    */
   plugins: shouldRegister ? ['@nx'] : [],
+  // extend this object with your rule overrides
+  overrides: {
+    react: shouldRegister
+      ? {
+          files: ['**/src/**/*.{ts,tsx}'],
+          rules: {
+            '@nx/workspace-consistent-callback-type': 'error',
+          },
+        }
+      : null,
+  },
 };
 
 exports.__internal = __internal;

packages/react-components/react-accordion/src/components/Accordion/Accordion.types.ts

@@ -49,6 +49,7 @@ export type AccordionProps<Value = AccordionItemValue> = ComponentProps<Accordio
   /**
    * Callback to be called when the opened items change.
    */
+  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback
   onToggle?: AccordionToggleEventHandler<Value>;
 
   /**

packages/react-components/react-card/src/components/Card/Card.types.ts

@@ -124,6 +124,7 @@ export type CardProps = ComponentProps<CardSlots> & {
   /**
    * Callback to be called when the selected state value changes.
    */
+  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback
   onSelectionChange?: (event: CardOnSelectionChangeEvent, data: CardOnSelectData) => void;
 };
 

packages/react-components/react-checkbox/src/components/Checkbox/Checkbox.types.ts

@@ -64,6 +64,7 @@ export type CheckboxProps = Omit<
   /**
    * Callback to be called when the checked state value changes.
    */
+  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback
   onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: CheckboxOnChangeData) => void;
 
   /**

packages/react-components/react-combobox/src/utils/ComboboxBase.types.ts

@@ -41,6 +41,7 @@ export type ComboboxBaseProps = SelectionProps &
     /**
      * Callback when the open/closed state of the dropdown changes
      */
+    // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback
     onOpenChange?: (e: ComboboxBaseOpenEvents, data: ComboboxBaseOpenChangeData) => void;
 
     /**

packages/react-components/react-combobox/src/utils/Selection.types.ts

@@ -17,6 +17,7 @@ export type SelectionProps = {
   multiselect?: boolean;
 
   /* Callback when an option is selected */
+  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback
   onOptionSelect?: (event: SelectionEvents, data: OptionOnSelectData) => void;
 
   /**

packages/react-components/react-datepicker-compat/src/components/DatePicker/DatePicker.types.ts

@@ -16,6 +16,7 @@ export type DatePickerProps = Omit<ComponentProps<Partial<DatePickerSlots>>, 'de
     /**
      * Callback issued when a date is selected
      */
+    // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback
     onSelectDate?: (date: Date | null | undefined) => void;
 
     /**
@@ -84,11 +85,13 @@ export type DatePickerProps = Omit<ComponentProps<Partial<DatePickerSlots>>, 'de
     /**
      * Callback to run when the DatePicker's open state changes
      */
+    // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback
     onOpenChange?: (open: boolean) => void;
 
     /**
      * Callback to run after the DatePicker's input has been validated
      */
+    // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback
     onValidationResult?: (data: DatePickerValidationResultData) => void;
 
     /**

packages/react-components/react-dialog/src/components/Dialog/Dialog.types.ts

@@ -81,6 +81,7 @@ export type DialogProps = ComponentProps<Partial<DialogSlots>> & {
    * @param data - A data object with relevant information,
    * such as open value and type of interaction that created the event
    */
+  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback
   onOpenChange?: DialogOpenChangeEventHandler;
   /**
    * Can contain two children including {@link DialogTrigger} and {@link DialogSurface}.

packages/react-components/react-input/src/components/Input/Input.types.ts

@@ -77,6 +77,7 @@ export type InputProps = Omit<
   /**
    * Called when the user changes the input's value.
    */
+  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback
   onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: InputOnChangeData) => void;
 
   /**

packages/react-components/react-menu/src/components/Menu/Menu.types.ts

@@ -40,6 +40,7 @@ export type MenuProps = ComponentProps<MenuSlots> &
      * Call back when the component requests to change value
      * The `open` value is used as a hint when directly controlling the component
      */
+    // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback
     onOpenChange?: (e: MenuOpenEvent, data: MenuOpenChangeData) => void;
 
     /**

packages/react-components/react-menu/src/components/MenuList/MenuList.types.ts

@@ -43,6 +43,7 @@ export type MenuListProps = ComponentProps<MenuListSlots> & {
    * @param event - React's original SyntheticEvent
    * @param data - A data object with relevant information
    */
+  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback
   onCheckedValueChange?: (e: MenuCheckedValueChangeEvent, data: MenuCheckedValueChangeData) => void;
 };
 

packages/react-components/react-menu/src/components/MenuTrigger/MenuTrigger.types.ts

@@ -20,10 +20,12 @@ export type MenuTriggerChildProps<Type extends ARIAButtonType = ARIAButtonType,
     'aria-expanded'?: boolean;
     id: string;
     ref: React.Ref<never>;
+    /* eslint-disable @nx/workspace-consistent-callback-type -- can't change type of existing callback */
     onMouseEnter: React.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;
     onMouseLeave: React.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;
     onMouseMove: React.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;
     onContextMenu: React.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;
+    /* eslint-enable @nx/workspace-consistent-callback-type */
   }
 >;
 

packages/react-components/react-migration-v0-v9/src/components/List/List/List.types.ts

@@ -53,6 +53,7 @@ export type ListProps = ComponentProps<ListSlots> & {
   /**
    * Callback for selection change events, used for both controlled and uncontrolled (as notification)
    */
+  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback
   onSelectionChange?: (event: React.SyntheticEvent, data: { selectedItems: SelectionItemId[] }) => void;
 
   /**

packages/react-components/react-popover/src/components/Popover/Popover.types.ts

@@ -64,6 +64,7 @@ export type PopoverProps = Pick<PortalProps, 'mountNode'> & {
    * Call back when the component requests to change value
    * The `open` value is used as a hint when directly controlling the component
    */
+  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback
   onOpenChange?: (e: OpenPopoverEvents, data: OnOpenChangeData) => void;
 
   /**

packages/react-components/react-popover/src/components/PopoverTrigger/PopoverTrigger.types.ts

@@ -28,8 +28,10 @@ export type PopoverTriggerChildProps<Type extends ARIAButtonType = ARIAButtonTyp
   Props & {
     'aria-expanded'?: 'true' | 'false';
     ref: React.Ref<unknown>;
+    /* eslint-disable @nx/workspace-consistent-callback-type -- can't change type of existing callback */
     onMouseEnter: React.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;
     onMouseLeave: React.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;
     onContextMenu: React.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;
+    /* eslint-enable @nx/workspace-consistent-callback-type */
   }
 >;