chore: enable full strict mode for converged packages with new DX setup (#18524)

* chore: enable full strict mode for converged packages with new DX setup
* fix(react-menu): resolve tsc errors that appeared after enabling full strict mode
* fix(react-storybook): make tsc pass in strict mode
* Change files
* docs: update packages/react-menu/src/components/Menu/Menu.test.tsx

Co-authored-by: ling1726 <lingfangao@hotmail.com>

Author: Hotell

change/@fluentui-react-menu-b608a17d-e563-4aa6-9864-bf6f7f2ee14a.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "fix(react-menu): resolve tsc errors that appeared after enabling full strict mode",
+  "packageName": "@fluentui/react-menu",
+  "email": "martinhochel@microsoft.com",
+  "dependentChangeType": "none"
+}

packages/react-menu/src/components/Menu/Menu.test.tsx

@@ -151,9 +151,9 @@ describe('Menu', () => {
   });
 
   it.each([
-    ['menuitem', MenuItem],
-    ['menuitemradio', MenuItemRadio],
-  ])('should close menu after clicking on %s', (role, MenuItemComponent) => {
+    ['menuitem', MenuItem, {}],
+    ['menuitemradio', MenuItemRadio, { name: 'test', value: 'test' }],
+  ])('should close menu after clicking on %s', (role, MenuItemComponent, props) => {
     // Arrange
     const { getByRole, queryByRole } = render(
       <Menu>
@@ -162,7 +162,9 @@ describe('Menu', () => {
         </MenuTrigger>
         <MenuPopover>
           <MenuList>
-            <MenuItemComponent>Item</MenuItemComponent>
+            {/* eslint-disable-next-line @fluentui/max-len */}
+            {/* @ts-expect-error - MenuItemComponent is union of 2 non-matching interfaces. Unnecessary narrowing logic would be needed which is out of scope for what is being tested  */}
+            <MenuItemComponent {...props}>Item</MenuItemComponent>
           </MenuList>
         </MenuPopover>
       </Menu>,
@@ -177,10 +179,10 @@ describe('Menu', () => {
   });
 
   it.each([
-    ['menuitem', MenuItem],
-    ['menuitemcheckbox', MenuItemCheckbox],
-    ['menuitemradio', MenuItemRadio],
-  ])('should not close menu after clicking on a disabled %s', (role, MenuItemComponent) => {
+    ['menuitem', MenuItem, {}],
+    ['menuitemcheckbox', MenuItemCheckbox, { name: 'test', value: 'test' }],
+    ['menuitemradio', MenuItemRadio, { name: 'test', value: 'test' }],
+  ])('should not close menu after clicking on a disabled %s', (role, MenuItemComponent, props) => {
     // Arrange
     const { getByRole } = render(
       <Menu>
@@ -189,7 +191,11 @@ describe('Menu', () => {
         </MenuTrigger>
         <MenuPopover>
           <MenuList>
-            <MenuItemComponent disabled>Item</MenuItemComponent>
+            {/* eslint-disable-next-line @fluentui/max-len */}
+            {/* @ts-expect-error - MenuItemComponent is union of 3 non-matching interfaces. Unnecessary narrowing logic would be needed which is out of scope for what is being tested  */}
+            <MenuItemComponent disabled {...props}>
+              Item
+            </MenuItemComponent>
           </MenuList>
         </MenuPopover>
       </Menu>,
@@ -203,7 +209,7 @@ describe('Menu', () => {
     getByRole(role);
   });
 
-  // THID ONE
+  // THIRD ONE
   it.each([
     ['menuitemcheckbox', MenuItemCheckbox],
     ['menuitemradio', MenuItemRadio],

packages/react-menu/src/utils/useOnMenuEnter.ts

@@ -36,12 +36,25 @@ export const useOnMenuMouseEnter = (options: UseOnClickOrScrollOutsideOptions) =
   });
 
   React.useEffect(() => {
+    // eslint-disable-next-line eqeqeq
+    if (element == null) {
+      return;
+    }
+
+    /**
+     * Because `addEventListener` type override falls back to 2nd definition (evt name is unknown string literal)
+     * evt is being typed as a base class of MouseEvent -> `Event`.
+     * This type is used to override `listener` calls to make TS happy
+     */
+
+    type ListenerOverride = (evt: Event) => void;
+
     if (!disabled) {
-      element?.addEventListener(MENU_ENTER_EVENT, listener);
+      element.addEventListener(MENU_ENTER_EVENT, listener as ListenerOverride);
     }
 
     return () => {
-      element?.removeEventListener(MENU_ENTER_EVENT, listener);
+      element.removeEventListener(MENU_ENTER_EVENT, listener as ListenerOverride);
     };
   }, [listener, element, disabled]);
 };

packages/react-storybook/tsconfig.json

@@ -9,9 +9,8 @@
     "declaration": true,
     "importHelpers": true,
     "noUnusedLocals": true,
-    "strict": true,
     "preserveConstEnums": true,
-    "types": ["jest", "custom-global"]
+    "types": ["jest", "custom-global", "inline-style-expand-shorthand"]
   },
   "include": ["src"]
 }

tsconfig.base.json

@@ -6,7 +6,6 @@
     "lib": ["ES2015", "dom"],
     "sourceMap": true,
     "strict": true,
-    "strictFunctionTypes": false,
     "forceConsistentCasingInFileNames": true,
     "skipLibCheck": true,
     "typeRoots": ["node_modules/@types", "./typings"],