feat(react-utilities): make dictionaries strict and get rid of unused generics to improve DX and type safety

change/@fluentui-react-button-0096137a-3751-4300-8655-523baee276bb.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "fix: explicitly assert components getNativeElemProps calls that are incompatible with Slot api",
+  "packageName": "@fluentui/react-button",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-link-c03b6435-131b-4d57-afed-794040e1e29b.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "fix: explicitly assert components getNativeElemProps calls that are incompatible with Slot api",
+  "packageName": "@fluentui/react-link",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-menu-4259442d-2ab3-4223-af79-2d2528545b9b.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "fix: explicitly assert components getNativeElemProps calls that are incompatible with Slot api",
+  "packageName": "@fluentui/react-menu",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-text-400681a3-c296-408b-8cf7-4968f358a69a.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "fix: explicitly assert components getNativeElemProps calls that are incompatible with Slot api",
+  "packageName": "@fluentui/react-text",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-utilities-93110975-e438-4f2f-b983-ff54c25c6dfa.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "feat: make dictionaries and getNativeElementProps strict and get rid of unused generics to improve DX and type safety",
+  "packageName": "@fluentui/react-utilities",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

package.json

@@ -23,7 +23,7 @@
     "check:change": "beachball check --scope \"!packages/fluentui/*\"",
     "check:modified-files": "yarn workspace @fluentui/scripts just check-for-modified-files",
     "check:affected-package": "node ./scripts/monorepo/checkIfPackagesAffected.js",
-    "check:installed-dependencies-versions": "satisfied --skip-invalid --ignore \"prettier|angular|lit|sass|@storybook/web-components|@storybook/html|svelte|@testing-library|vue|@cypress/react\"",
+    "check:installed-dependencies-versions": "satisfied --skip-invalid --ignore \"prettier|angular|lit|sass|@storybook/web-components|@storybook/html|svelte|@testing-library|vue|@cypress/react|eslint-plugin-etc\"",
     "clean": "lage clean --verbose",
     "code-style": "lage code-style --verbose",
     "codepen": "cd packages/react && node ../../scripts/local-codepen.js",
@@ -181,6 +181,7 @@
     "eslint-import-resolver-typescript": "2.5.0",
     "eslint-plugin-deprecation": "1.2.1",
     "eslint-plugin-es": "4.1.0",
+    "eslint-plugin-etc": "2.0.2",
     "eslint-plugin-import": "2.25.4",
     "eslint-plugin-jest": "23.20.0",
     "eslint-plugin-jsdoc": "^36.0.7",

packages/react-components/react-button/src/components/Button/useButton.ts

@@ -45,7 +45,6 @@ export const useButton_unstable = (
       root: 'button',
       icon: 'span',
     },
-
     root: getNativeElementProps(
       as || 'button',
       useARIAButton<ARIAButtonSlotProps>(props, {
@@ -56,7 +55,7 @@ export const useButton_unstable = (
           type: 'button', // This is added because the default for type is 'submit'
         },
       }),
-    ),
+    ) as ButtonState['root'],
     icon: iconShorthand,
   };
 };

packages/react-components/react-link/src/components/Link/useLink.ts

@@ -31,7 +31,7 @@ export const useLink_unstable = (
       ref,
       ...props,
       as,
-    }),
+    }) as LinkState['root'],
   };
 
   useLinkState_unstable(state);

packages/react-components/react-menu/src/components/MenuPopover/useMenuPopover.ts

@@ -62,15 +62,15 @@ export const useMenuPopover_unstable = (props: MenuPopoverProps, ref: React.Ref<
 
   const { onMouseEnter: onMouseEnterOriginal, onKeyDown: onKeyDownOriginal } = rootProps;
 
-  rootProps.onMouseEnter = useEventCallback((e: React.MouseEvent<HTMLElement>) => {
+  rootProps.onMouseEnter = useEventCallback((e: React.MouseEvent<HTMLDivElement>) => {
     if (openOnHover) {
       setOpen(e, { open: true, keyboard: false });
     }
 
     onMouseEnterOriginal?.(e);
   });
 
-  rootProps.onKeyDown = useEventCallback((e: React.KeyboardEvent<HTMLElement>) => {
+  rootProps.onKeyDown = useEventCallback((e: React.KeyboardEvent<HTMLDivElement>) => {
     const key = e.key;
 
     if (key === Escape || (isSubmenu && key === CloseArrowKey)) {

packages/react-components/react-text/src/components/Text/useText.ts

@@ -33,7 +33,7 @@ export const useText_unstable = (props: TextProps, ref: React.Ref<HTMLElement>):
       ref,
       ...props,
       as,
-    }),
+    }) as TextState['root'],
   };
 
   return state;

packages/react-components/react-utilities/.eslintrc.json

@@ -1,4 +1,8 @@
 {
   "extends": ["plugin:@fluentui/eslint-plugin/react"],
-  "root": true
+  "plugins": ["etc"],
+  "root": true,
+  "rules": {
+    "etc/no-misused-generics": "warn"
+  }
 }

packages/react-components/react-utilities/config/api-extractor.local.json

@@ -1,5 +1,5 @@
 {
   "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
   "extends": "./api-extractor.json",
-  "mainEntryPointFilePath": "<projectFolder>/dist/packages/react-components/<unscopedPackageName>/src/index.d.ts"
+  "mainEntryPointFilePath": "<projectFolder>/dist/types/packages/react-components/<unscopedPackageName>/src/index.d.ts"
 }

packages/react-components/react-utilities/package.json

@@ -20,7 +20,7 @@
     "lint": "just-scripts lint",
     "test": "jest --passWithNoTests",
     "docs": "api-extractor run --config=config/api-extractor.local.json --local",
-    "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/packages/react-components/react-utilities/src && yarn docs",
+    "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/types/packages/react-components/react-utilities/src && yarn docs",
     "type-check": "tsc -b tsconfig.json"
   },
   "devDependencies": {

packages/react-components/react-utilities/src/compose/types.ts

@@ -69,7 +69,9 @@ type EmptyIntrisicElements =
  * * Removes legacy string ref.
  * * Disallows children for empty tags like 'img'.
  */
-type IntrisicElementProps<Type extends keyof JSX.IntrinsicElements> = React.PropsWithRef<JSX.IntrinsicElements[Type]> &
+export type IntrisicElementProps<Type extends keyof JSX.IntrinsicElements> = React.PropsWithRef<
+  JSX.IntrinsicElements[Type]
+> &
   (Type extends EmptyIntrisicElements ? { children?: never } : {});
 
 /**

packages/react-components/react-utilities/src/utils/getNativeElementProps.test.ts

@@ -2,7 +2,9 @@ import { getNativeElementProps } from './getNativeElementProps';
 
 describe('getNativeElementProps', () => {
   it('can filter native element properties', () => {
-    expect(getNativeElementProps('div', { id: '123', checked: true })).toEqual({ id: '123' });
+    expect(getNativeElementProps('div', { id: '123', checked: true })).toEqual({
+      id: '123',
+    });
     expect(getNativeElementProps('input', { id: '123', checked: true })).toEqual({ id: '123', checked: true });
     expect(getNativeElementProps('input', { id: '123', checked: true }, ['id'])).toEqual({ checked: true });
   });
@@ -12,6 +14,10 @@ describe('getNativeElementProps', () => {
   });
 
   it('excludes props regardless of the allowed', () => {
-    expect(getNativeElementProps('div', { as: 'span' }, ['as'])).toEqual({});
+    const actual = getNativeElementProps('div', { as: 'span' }, ['as']);
+
+    // @ts-expect-error -- `as` was removed from the object
+    expect(actual.as).toBeUndefined();
+    expect(actual).toEqual({});
   });
 });

packages/react-components/react-utilities/src/utils/getNativeElementProps.ts

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import type { IntrisicElementProps } from '../compose';
+
 import {
   labelProperties,
   audioProperties,
@@ -26,7 +28,7 @@ import {
   timeProperties,
 } from './properties';
 
-const nativeElementMap: Record<string, Record<string, number>> = {
+const nativeElementMap = {
   label: labelProperties,
   audio: audioProperties,
   video: videoProperties,
@@ -50,6 +52,14 @@ const nativeElementMap: Record<string, Record<string, number>> = {
   img: imgProperties,
   time: timeProperties,
 };
+type NativeElementMap = typeof nativeElementMap;
+
+/**
+ * AsTagNames - can single string or union of strings
+ */
+type NativeElemProps<AsTagNames extends keyof JSX.IntrinsicElements> = {
+  [As in AsTagNames]: { as?: As } & IntrisicElementProps<As>;
+}[AsTagNames];
 
 /**
  * Given an element tagname and user props, filters the props to only allowed props for the given
@@ -58,16 +68,21 @@ const nativeElementMap: Record<string, Record<string, number>> = {
  * @param props - Props object
  * @param excludedPropNames - List of props to disallow
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function getNativeElementProps<TAttributes extends React.HTMLAttributes<any>>(
-  tagName: string,
-  props: {},
-  excludedPropNames?: string[],
-): TAttributes {
-  const allowedPropNames = (tagName && nativeElementMap[tagName]) || htmlElementProperties;
-  allowedPropNames.as = 1;
+export function getNativeElementProps<
+  Tag extends keyof JSX.IntrinsicElements,
+  Props extends Record<string, unknown>,
+  ExcludedPropKeys extends Extract<keyof Props, string> = never
+>(tagName: Tag, props: Props, excludedPropNames?: ExcludedPropKeys[]): Omit<NativeElemProps<Tag>, ExcludedPropKeys> {
+  const allowedPropNames = nativeElementMap[tagName as keyof NativeElementMap] || htmlElementProperties;
+
+  /**
+   * extends object dictionary with `as` to avoid adding it to nativeElementMap and htmlElementProperties
+   */
+  type ExtendedAllowedPropNames = typeof allowedPropNames & { as: 1 };
+
+  (allowedPropNames as ExtendedAllowedPropNames).as = 1;
 
-  return getNativeProps(props, allowedPropNames, excludedPropNames);
+  return getNativeProps(props, allowedPropNames, excludedPropNames) as Omit<NativeElemProps<Tag>, ExcludedPropKeys>;
 }
 
 /**
@@ -79,15 +94,16 @@ export function getNativeElementProps<TAttributes extends React.HTMLAttributes<a
  * @returns An object containing the native props for the `root` and primary slots.
  */
 export const getPartitionedNativeProps = <
-  Props extends Pick<React.HTMLAttributes<HTMLElement>, 'style' | 'className'>,
+  Tag extends keyof JSX.IntrinsicElements,
+  Props extends Record<string, unknown> & Pick<React.HTMLAttributes<HTMLElement>, 'style' | 'className'>,
   ExcludedPropKeys extends Extract<keyof Props, string> = never
 >({
   primarySlotTagName,
   props,
   excludedPropNames,
 }: {
   /** The primary slot's element type (e.g. 'div') */
-  primarySlotTagName: keyof JSX.IntrinsicElements;
+  primarySlotTagName: Tag;
 
   /** The component's props object */
   props: Props;
@@ -97,10 +113,10 @@ export const getPartitionedNativeProps = <
 }) => {
   return {
     root: { style: props.style, className: props.className },
-    primary: getNativeElementProps<Omit<Props, ExcludedPropKeys>>(primarySlotTagName, props, [
+    primary: getNativeElementProps(primarySlotTagName, props, [
       ...(excludedPropNames || []),
       'style',
       'className',
-    ]),
+    ] as ExcludedPropKeys[]),
   };
 };

packages/react-components/react-utilities/src/utils/properties.test.ts

@@ -3,28 +3,29 @@ import { getNativeProps, divProperties } from './properties';
 
 describe('getNativeProps', () => {
   it('can pass through data tags', () => {
-    const result = getNativeProps<React.HTMLAttributes<HTMLDivElement>>(
+    const result = getNativeProps(
       {
         'data-automation-id': 1,
       },
       divProperties,
     );
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    expect((result as any)['data-automation-id']).toEqual(1);
+
+    expect(result['data-automation-id']).toEqual(1);
   });
 
   it('can pass through aria tags', () => {
     const result = getNativeProps<React.HTMLAttributes<HTMLDivElement>>(
       {
-        'aria-label': 1,
+        'aria-label': '1',
       },
       divProperties,
     );
 
-    expect(result['aria-label']).toEqual(1);
+    expect(result['aria-label']).toEqual('1');
   });
 
   it('can pass through basic div properties and events', () => {
+    //
     const result = getNativeProps<React.HTMLAttributes<HTMLDivElement>>(
       {
         className: 'foo',
@@ -44,7 +45,7 @@ describe('getNativeProps', () => {
   });
 
   it('can remove unexpected properties', () => {
-    const result = getNativeProps<React.HTMLAttributes<HTMLDivElement>>(
+    const result = getNativeProps(
       {
         foobar: 1,
         className: 'hi',
@@ -53,14 +54,14 @@ describe('getNativeProps', () => {
     );
 
     expect(result.className).toEqual('hi');
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    expect((result as any).foobar).toEqual(undefined);
+    expect(result.foobar).toEqual(undefined);
   });
 
   it('can exclude properties', () => {
-    const result = getNativeProps<{ a: number; b: number }>({ a: 1, b: 2 }, ['a', 'b'], ['b']);
+    const result = getNativeProps({ a: 1, b: 2 }, ['a', 'b'], ['b']);
 
     expect(result.a).toBeDefined();
+    // @ts-expect-error -- strict type checking for exclusion, b doesn't exist after removal
     expect(result.b).toBeUndefined();
   });
 });