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

@@ -1,17 +1,75 @@
-import { getNativeElementProps } from './getNativeElementProps';
+import { getNativeElementProps, getPartitionedNativeProps } from './getNativeElementProps';
 
 describe('getNativeElementProps', () => {
   it('can filter native element properties', () => {
-    expect(getNativeElementProps('div', { id: '123', checked: true })).toEqual({ id: '123' });
+    const divWithInvalidProps = getNativeElementProps('div', { id: '123', checked: true });
+    expect(divWithInvalidProps).toEqual({
+      id: '123',
+    });
+    // @ts-expect-error -- 'id' prop is not allowed `div` prop
+    expect(divWithInvalidProps.checked).toBeUndefined();
+
     expect(getNativeElementProps('input', { id: '123', checked: true })).toEqual({ id: '123', checked: true });
-    expect(getNativeElementProps('input', { id: '123', checked: true }, ['id'])).toEqual({ checked: true });
+
+    const inputWithExclude = getNativeElementProps('input', { id: '123', checked: true }, ['id']);
+    expect(inputWithExclude).toEqual({ checked: true });
+    // @ts-expect-error -- 'id' prop was excluded
+    expect(inputWithExclude.id).toBeUndefined();
   });
 
   it('includes `as` as a native prop', () => {
     expect(getNativeElementProps('div', { as: 'span' })).toEqual({ as: 'span' });
   });
 
   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` prop was excluded
+    expect(actual.as).toBeUndefined();
+    expect(actual).toEqual({});
+  });
+});
+
+describe('getPartitionedNativeProps', () => {
+  it('creates modified root and primary and always removes className and styles prop from primary', () => {
+    const actual = getPartitionedNativeProps({
+      primarySlotTagName: 'div',
+      props: {
+        className: 'hello',
+        style: { width: '100px' },
+        id: '123',
+        dir: 'ltr',
+        defaultChecked: true,
+      },
+    });
+
+    expect(actual.root).toEqual({ className: 'hello', style: { width: '100px' } });
+    expect(actual.primary).toEqual({ id: '123', dir: 'ltr' });
+
+    // This should throw Type error - `defaultChecked` is not valid DIV prop
+    // Unfortunately react typings provide `React.HTMLAttributes` interface
+    // which assign lot of HTML invalid props to every intrinsic element, thus making this invalid by default
+    expect(actual.primary.defaultChecked).toBeUndefined();
+
+    // @ts-expect-error -- `className` prop was excluded
+    expect(actual.primary.className).toBeUndefined();
+    // @ts-expect-error -- `style` prop was excluded
+    expect(actual.primary.style).toBeUndefined();
+  });
+
+  it('works with excluded prop names for "primary"', () => {
+    const actual = getPartitionedNativeProps({
+      primarySlotTagName: 'div',
+      props: { id: '123', dir: 'ltr', defaultChecked: false },
+      excludedPropNames: ['id', 'defaultChecked'],
+    });
+
+    expect(actual.primary).toEqual({ dir: 'ltr' });
+
+    expect(actual.primary.dir).toBe('ltr');
+    // @ts-expect-error -- `defaultChecked` prop was excluded
+    expect(actual.primary.defaultChecked).toBeUndefined();
+    // @ts-expect-error -- `id `prop was excluded
+    expect(actual.primary.id).toBeUndefined();
   });
 });

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

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import type { IntrisicElementProps } from '../compose/index';
+
 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,18 @@ const nativeElementMap: Record<string, Record<string, number>> = {
   img: imgProperties,
   time: timeProperties,
 };
+type HtmlElementProperties = typeof htmlElementProperties;
+type NativeElementMap = typeof nativeElementMap;
+type GetAllowedPropNames<Tag, Props extends Record<string, unknown>> = Tag extends keyof NativeElementMap
+  ? keyof NativeElementMap[Tag] | 'as' | keyof Props
+  : keyof HtmlElementProperties | 'as' | keyof Props;
+
+/**
+ * AsTagNames - can be a 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 +72,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<GetAllowedPropNames<Tag, Props>, string> = never
+>(tagName: Tag, props: Props, excludedPropNames?: ExcludedPropKeys[]): Omit<NativeElemProps<Tag>, ExcludedPropKeys> {
+  const allowedPropNames = nativeElementMap[tagName as keyof NativeElementMap] || htmlElementProperties;
 
-  return getNativeProps(props, allowedPropNames, excludedPropNames);
+  /**
+   * 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) as Omit<NativeElemProps<Tag>, ExcludedPropKeys>;
 }
 
 /**
@@ -79,28 +98,30 @@ 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'>,
-  ExcludedPropKeys extends Extract<keyof Props, string> = never
+  Tag extends keyof JSX.IntrinsicElements,
+  Props extends Record<string, unknown> & Pick<React.HTMLAttributes<HTMLElement>, 'style' | 'className'>,
+  ExcludedPropKeys extends Extract<GetAllowedPropNames<Tag, 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;
 
   /** List of native props to exclude from the returned value */
   excludedPropNames?: ExcludedPropKeys[];
 }) => {
+  const normalizedExcludedPropNames = [...(excludedPropNames || []), 'style', 'className'] as ExcludedPropKeys[];
+
   return {
     root: { style: props.style, className: props.className },
-    primary: getNativeElementProps<Omit<Props, ExcludedPropKeys>>(primarySlotTagName, props, [
-      ...(excludedPropNames || []),
-      'style',
-      'className',
-    ]),
+    primary: getNativeElementProps(primarySlotTagName, props, normalizedExcludedPropNames) as Omit<
+      NativeElemProps<Tag>,
+      ExcludedPropKeys | 'style' | 'className'
+    >,
   };
 };