Switch core packages to stricter types

.changeset/nice-stamps-win.md

@@ -0,0 +1,11 @@
+---
+"@fluentui-react-native/interactive-hooks": patch
+"@fluentui-react-native/use-slot": patch
+"@fluentui-react-native/button": patch
+"@fluentui-react-native/switch": patch
+"@fluentui-react-native/chip": patch
+"@fluentui-react-native/framework-base": patch
+"@fluentui-react-native/adapters": patch
+---
+
+Change base furn packages to stricter types

.github/workflows/pr.yml

@@ -4,6 +4,10 @@ on: pull_request
 permissions:
   contents: read
 
+env:
+  VisualStudioVersion: '17.0'
+  WindowsTargetPlatformVersion: '10.0.26100.0'
+
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
   cancel-in-progress: true
@@ -162,7 +166,7 @@ jobs:
 
   windows:
     name: Windows PR
-    runs-on: windows-latest
+    runs-on: windows-2022
     timeout-minutes: 60
     steps:
       - name: Checkout
@@ -212,7 +216,7 @@ jobs:
         working-directory: apps/fluent-tester
 
       - name: Run E2E RNW tests
-        shell: pwsh
+        shell: powershell
         run: |
           .\launchE2EWindows.ps1 -enableDumpFiles
         working-directory: apps/E2E

.yarnrc.yml

@@ -24,7 +24,7 @@ catalog:
   "@rnx-kit/oxlint-config": ^1.0.3
   "@rnx-kit/reporter": ^0.2.0
   "@rnx-kit/tools-packages": ^0.1.3
-  "@rnx-kit/tools-react-native": ^2.3.7
+  "@rnx-kit/tools-react-native": ^2.3.8
   "@rnx-kit/tools-typescript": ^0.2.0
   "@rnx-kit/tools-workspaces": ^0.2.3
   "@rnx-kit/tsconfig": ^3.0.3
@@ -51,6 +51,7 @@ catalog:
   knip: ^6.12.1
   lage: ^2.14.19
   oxc-resolver: ^11.17.0
+  react-native-test-app: ^5.3.3
   rimraf: ^6.1.2
   webdriverio: ^9.24.0
 

apps/fluent-tester/ios/Podfile.lock

@@ -4,15 +4,15 @@ PODS:
   - fast_float (8.0.0)
   - FBLazyVector (0.81.6)
   - fmt (11.0.2)
-  - FRNAppearanceAdditions (0.8.3):
+  - FRNAppearanceAdditions (0.8.4):
     - React
-  - FRNAvatar (0.22.3):
+  - FRNAvatar (0.22.4):
     - MicrosoftFluentUI (= 0.13.1)
     - React
-  - FRNDatePicker (0.12.3):
+  - FRNDatePicker (0.12.4):
     - MicrosoftFluentUI (= 0.13.1)
     - React
-  - FRNFontMetrics (0.7.3):
+  - FRNFontMetrics (0.7.4):
     - React
   - glog (0.3.5)
   - hermes-engine (0.81.6):
@@ -2424,7 +2424,7 @@ PODS:
     - React-perflogger (= 0.81.6)
     - React-utils (= 0.81.6)
     - SocketRocket
-  - ReactNativeHost (0.5.17):
+  - ReactNativeHost (0.5.19):
     - boost
     - DoubleConversion
     - fast_float
@@ -2453,7 +2453,7 @@ PODS:
     - ReactCommon/turbomodule/core
     - SocketRocket
     - Yoga
-  - ReactTestApp-DevSupport (5.1.10):
+  - ReactTestApp-DevSupport (5.3.3):
     - React-Core
     - React-jsi
   - ReactTestApp-Resources (1.0.0-dev)
@@ -2538,7 +2538,7 @@ DEPENDENCIES:
   - ReactAppDependencyProvider (from `build/generated/ios`)
   - ReactCodegen (from `build/generated/ios`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
-  - "ReactNativeHost (from `../../../node_modules/.store/react-native-test-app-virtual-d4246a9700/node_modules/@rnx-kit/react-native-host`)"
+  - "ReactNativeHost (from `../../../node_modules/.store/react-native-test-app-virtual-6d85e861d1/node_modules/@rnx-kit/react-native-host`)"
   - ReactTestApp-DevSupport (from `../node_modules/react-native-test-app`)
   - ReactTestApp-Resources (from `..`)
   - RNSVG (from `../node_modules/react-native-svg`)
@@ -2701,7 +2701,7 @@ EXTERNAL SOURCES:
   ReactCommon:
     :path: "../node_modules/react-native/ReactCommon"
   ReactNativeHost:
-    :path: "../../../node_modules/.store/react-native-test-app-virtual-d4246a9700/node_modules/@rnx-kit/react-native-host"
+    :path: "../../../node_modules/.store/react-native-test-app-virtual-6d85e861d1/node_modules/@rnx-kit/react-native-host"
   ReactTestApp-DevSupport:
     :path: "../node_modules/react-native-test-app"
   ReactTestApp-Resources:
@@ -2713,15 +2713,15 @@ EXTERNAL SOURCES:
 
 SPEC CHECKSUMS:
   boost: 7e761d76ca2ce687f7cc98e698152abd03a18f90
-  DoubleConversion: cb417026b2400c8f53ae97020b2be961b59470cb
+  DoubleConversion: 76ab83afb40bddeeee456813d9c04f67f78771b5
   fast_float: b32c788ed9c6a8c584d114d0047beda9664e7cc6
   FBLazyVector: 812782f0506ba4c4a1b9f4b793e6de1bfdfc4c25
   fmt: a40bb5bd0294ea969aaaba240a927bd33d878cdd
-  FRNAppearanceAdditions: 60f9fb4552fb3d92a63df00aa8f76fd6e8efb942
-  FRNAvatar: ffa0facb219806b0e5083d2388bc61e590f5df19
-  FRNDatePicker: 312243694338f941080b15f6fac4d0dac8f54137
-  FRNFontMetrics: 363f87c2aee015325a399388dda266ed8f1f65a0
-  glog: 5683914934d5b6e4240e497e0f4a3b42d1854183
+  FRNAppearanceAdditions: 58fe872ed668bac5b1f6b3f81b61c7f9fccd6788
+  FRNAvatar: 586585a440e2b23c9ac872fd1fa2ddb7819cd7bd
+  FRNDatePicker: 6cf33c0f00f68606e2e301689670a7f90a9e5f37
+  FRNFontMetrics: dba3c15a2feef87ee987d7c502cc3e2ba15adb5b
+  glog: fdfdfe5479092de0c4bdbebedd9056951f092c4f
   hermes-engine: 7219f6e751ad6ec7f3d7ec121830ee34dae40749
   MicrosoftFluentUI: dde98d8ed3fc306d9ddd0a6f0bc0c1f24fe5275e
   RCT-Folly: 846fda9475e61ec7bcbf8a3fe81edfcaeb090669
@@ -2787,13 +2787,13 @@ SPEC CHECKSUMS:
   ReactAppDependencyProvider: 50d5506ddd091d4ed24b88b661ce9a0e17347357
   ReactCodegen: dae737e6acce32f4e6dda1c5c7ad0e7fd7235b71
   ReactCommon: 8fafefb37d562f9e4bbbc9081ca4501f178a97ec
-  ReactNativeHost: 66a23d7106b451f1a1087f565a45c839abef1e73
-  ReactTestApp-DevSupport: 2852f266ad4b393124413d4290c16aff35892cf4
+  ReactNativeHost: 8680b5bbc3afdbfeccc206ed0f3230d7c3df691b
+  ReactTestApp-DevSupport: 0527915bd439c17242bab26d2136cc837b5eebd2
   ReactTestApp-Resources: de7bab7391b329e4e22614a22a7d350b5f08939c
   RNSVG: 7ee150379dc2a5ed4c9fdac92a5d6efab98e9cf7
   SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
   Yoga: 3196a843cc5f4bc433f1a41cf17cdf804a01a529
 
-PODFILE CHECKSUM: b3aedc74b779b6e577dfef780f9684a0bb0daaae
+PODFILE CHECKSUM: fec1d0c29d19b06181402b781cf7db0e3b52a2c8
 
 COCOAPODS: 1.16.2

apps/fluent-tester/macos/Podfile.lock

@@ -4,10 +4,10 @@ PODS:
   - fast_float (8.0.0)
   - FBLazyVector (0.81.2)
   - fmt (11.0.2)
-  - FRNAvatar (0.22.3):
+  - FRNAvatar (0.22.4):
     - MicrosoftFluentUI (= 0.13.1)
     - React
-  - FRNCallout (0.28.3):
+  - FRNCallout (0.28.4):
     - boost
     - DoubleConversion
     - fast_float
@@ -36,13 +36,13 @@ PODS:
     - ReactCommon/turbomodule/core
     - SocketRocket
     - Yoga
-  - FRNCheckbox (0.18.3):
+  - FRNCheckbox (0.18.4):
     - React
-  - FRNMenuButton (0.14.3):
+  - FRNMenuButton (0.14.4):
     - React
-  - FRNRadioButton (0.22.3):
+  - FRNRadioButton (0.22.4):
     - React
-  - FRNVibrancyView (0.4.3):
+  - FRNVibrancyView (0.4.4):
     - React
   - glog (0.3.5)
   - hermes-engine (0.81.5):
@@ -137,7 +137,7 @@ PODS:
     - fmt (= 11.0.2)
     - glog
   - RCTDeprecation (0.81.2)
-  - RCTFocusZone (0.22.3):
+  - RCTFocusZone (0.22.4):
     - React
   - RCTRequired (0.81.2)
   - RCTTypeSafety (0.81.2):
@@ -2394,7 +2394,7 @@ PODS:
     - ReactCommon/turbomodule/core
     - SocketRocket
     - Yoga
-  - ReactTestApp-DevSupport (5.2.3):
+  - ReactTestApp-DevSupport (5.3.3):
     - React-Core
     - React-jsi
   - ReactTestApp-Resources (1.0.0-dev)
@@ -2482,7 +2482,7 @@ DEPENDENCIES:
   - ReactAppDependencyProvider (from `build/generated/ios`)
   - ReactCodegen (from `build/generated/ios`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native-macos/ReactCommon`)
-  - "ReactNativeHost (from `../../../node_modules/.store/react-native-test-app-virtual-779a5f15d5/node_modules/@rnx-kit/react-native-host`)"
+  - "ReactNativeHost (from `../../../node_modules/.store/react-native-test-app-virtual-6d85e861d1/node_modules/@rnx-kit/react-native-host`)"
   - ReactTestApp-DevSupport (from `../node_modules/react-native-test-app`)
   - ReactTestApp-Resources (from `..`)
   - RNSVG (from `../node_modules/react-native-svg`)
@@ -2651,7 +2651,7 @@ EXTERNAL SOURCES:
   ReactCommon:
     :path: "../node_modules/react-native-macos/ReactCommon"
   ReactNativeHost:
-    :path: "../../../node_modules/.store/react-native-test-app-virtual-779a5f15d5/node_modules/@rnx-kit/react-native-host"
+    :path: "../../../node_modules/.store/react-native-test-app-virtual-6d85e861d1/node_modules/@rnx-kit/react-native-host"
   ReactTestApp-DevSupport:
     :path: "../node_modules/react-native-test-app"
   ReactTestApp-Resources:
@@ -2663,22 +2663,22 @@ EXTERNAL SOURCES:
 
 SPEC CHECKSUMS:
   boost: cea1d4f90a3a59537f3deb03ff5656489d7133dd
-  DoubleConversion: d31b1eb37f6d6f456530c4fd9124b857d6889cab
+  DoubleConversion: 5b92c4507c560bb62e7aa1acdf2785ea3ff08b3b
   fast_float: 20817c22759af6ac8d4d67e6e059b8b499953656
   FBLazyVector: 0e3076dbb16169b0afc2d701a24a526423b5e76b
   fmt: 24e7591456deb60b4a77518f83d9a916ac84223f
-  FRNAvatar: ffa0facb219806b0e5083d2388bc61e590f5df19
-  FRNCallout: bc2178e4478504e21c01a3c1c8617c91783eae8c
-  FRNCheckbox: 1cba85c9c8c75257970f8ffcc4a5e2602c22be7c
-  FRNMenuButton: 709f3218ce9a421c154ea0570acbeb3f535629d3
-  FRNRadioButton: a0e58ac8a7be290778a30add5bdf41dc245e3483
-  FRNVibrancyView: 96debdb9a1d2d9315c25748450a33fe2cb8b6321
-  glog: 0b31c25149b9d350b2666c7d459229861a00ec07
+  FRNAvatar: 586585a440e2b23c9ac872fd1fa2ddb7819cd7bd
+  FRNCallout: f3234f07e6f49334c0f1de7cb7185494f2915db5
+  FRNCheckbox: a5afb9bb4e6405d39a30f997f7e69d6e5672533d
+  FRNMenuButton: e9e49a3afa5eb5ecbe4a36c41047bce763f661c7
+  FRNRadioButton: 6f7db3424604a413b4cca73c5a22033c79f92d43
+  FRNVibrancyView: a9cf18fcaee2a7d9f9ea292924ebf1b3acb0a5b2
+  glog: ba31c1afa7dcf1915a109861bccdb4421be6175b
   hermes-engine: 9f4dfe93326146a1c99eb535b1cb0b857a3cd172
   MicrosoftFluentUI: dde98d8ed3fc306d9ddd0a6f0bc0c1f24fe5275e
   RCT-Folly: c803cf33238782d5fd21a5e02d44f64068e0e130
   RCTDeprecation: b60b889eafa75f46c3d6be5332681efbb16ad0c7
-  RCTFocusZone: 1b8ab01688bbb8ef6357bd8789e5c6f38ddac4d9
+  RCTFocusZone: a6d62c46c530e790479915bc9faa578137e9e2a6
   RCTRequired: 070d7f0ef937e7a93aab20761cef55419f16b5de
   RCTTypeSafety: dd2ad1eb0c0c01ba41222d115be141f9a348c636
   React: 304df3d34c8c0281fd1fd3a506e69f234095425d
@@ -2741,7 +2741,7 @@ SPEC CHECKSUMS:
   ReactCodegen: 9cb74b74196a04d189f74995f8f11d1228316fb4
   ReactCommon: 9f8189efbc1aa52926df2791a2e47b3340353849
   ReactNativeHost: 8680b5bbc3afdbfeccc206ed0f3230d7c3df691b
-  ReactTestApp-DevSupport: a966d21f704e95b197479b4f47cad1cf25808385
+  ReactTestApp-DevSupport: 0527915bd439c17242bab26d2136cc837b5eebd2
   ReactTestApp-Resources: 7625eab22d0a702577b048d60b5fb3f2e2f5b2a7
   RNSVG: 7ee150379dc2a5ed4c9fdac92a5d6efab98e9cf7
   SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748

apps/fluent-tester/package.json

@@ -95,7 +95,7 @@
     "oxc-resolver": "catalog:",
     "path-dirname": "^1.0.2",
     "react-native-svg-transformer": "^1.0.0",
-    "react-native-test-app": "^5.2.3",
+    "react-native-test-app": "catalog:",
     "react-test-renderer": "19.1.4",
     "webdriverio": "catalog:"
   },

apps/tester-core/package.json

@@ -119,7 +119,7 @@
     "react-native-macos": "^0.81.0",
     "react-native-svg": "^15.12.1",
     "react-native-svg-transformer": "^1.0.0",
-    "react-native-test-app": "^5.2.3",
+    "react-native-test-app": "catalog:",
     "react-native-windows": "^0.81.0",
     "react-test-renderer": "19.1.4",
     "webdriverio": "catalog:"

apps/win32/package.json

@@ -59,7 +59,7 @@
     "metro-config": "^0.83.3",
     "oxc-resolver": "catalog:",
     "react-native-svg-transformer": "^1.0.0",
-    "react-native-test-app": "^5.2.3",
+    "react-native-test-app": "catalog:",
     "react-test-renderer": "19.1.4",
     "rimraf": "catalog:"
   },

packages/framework-base/src/component-patterns/phasedComponent.ts

@@ -17,20 +17,22 @@ export function getPhasedRender<TProps>(component: React.ComponentType<TProps>):
     // if this has a phased render function, return it
     if ((component as PhasedComponent<TProps>)._phasedRender) {
       return (component as PhasedComponent<TProps>)._phasedRender;
-    } else if ((component as ComposableFunction<TProps>)._staged) {
+    } else {
       // for backward compatibility check for staged render and return a wrapper that maps the signature
       const staged = (component as ComposableFunction<TProps>)._staged;
-      return (props: TProps) => {
-        const { children, ...rest } = props as React.PropsWithChildren<TProps>;
-        const inner = staged(rest as TProps, ...React.Children.toArray(children));
-        // staged render functions were not consistently marking contents as composable, though they were treated
-        // as such in useHook. To maintain compatibility we mark the returned function as composable here. This was
-        // dangerous, but this shim is necessary for backward compatibility. The newer pattern is explicit about this.
-        if (typeof inner === 'function' && !(inner as LegacyDirectComponent<TProps>)._canCompose) {
-          return Object.assign(inner, { _canCompose: true });
-        }
-        return inner;
-      };
+      if (staged) {
+        return (props: TProps) => {
+          const { children, ...rest } = props as React.PropsWithChildren<TProps>;
+          const inner = staged(rest as TProps, ...React.Children.toArray(children));
+          // staged render functions were not consistently marking contents as composable, though they were treated
+          // as such in useHook. To maintain compatibility we mark the returned function as composable here. This was
+          // dangerous, but this shim is necessary for backward compatibility. The newer pattern is explicit about this.
+          if (typeof inner === 'function' && !(inner as LegacyDirectComponent<TProps>)._canCompose) {
+            return Object.assign(inner, { _canCompose: true });
+          }
+          return inner;
+        };
+      }
     }
   }
   return undefined;
@@ -43,9 +45,9 @@ export function getPhasedRender<TProps>(component: React.ComponentType<TProps>):
  */
 export function phasedComponent<TProps>(getInnerPhase: PhasedRender<TProps>): FunctionComponent<TProps> {
   return Object.assign(
-    (props: React.PropsWithChildren<TProps>) => {
+    (props: TProps) => {
       // pull out children from props
-      const { children, ...outerProps } = props;
+      const { children, ...outerProps } = props as React.PropsWithChildren<TProps>;
       const Inner = getInnerPhase(outerProps as TProps);
       return renderForJsxRuntime(Inner, { children });
     },

packages/framework-base/src/component-patterns/render.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import * as ReactJSX from 'react/jsx-runtime';
 import type { RenderType, RenderResult, DirectComponent, LegacyDirectComponent } from './render.types.ts';
+import { extractChildren, splitPropsAndChildren } from '../utilities/typeUtils.ts';
 
 export type CustomRender = () => RenderResult;
 
@@ -20,13 +21,13 @@ function asLegacyDirectComponent<TProps>(type: RenderType): LegacyDirectComponen
 
 export function renderForJsxRuntime<TProps>(
   type: React.ElementType,
-  props: React.PropsWithChildren<TProps>,
+  props: TProps,
   key?: React.Key,
-  jsxFn: typeof ReactJSX.jsx = undefined,
+  jsxFn?: typeof ReactJSX.jsx,
 ): RenderResult {
   const legacyDirect = asLegacyDirectComponent(type);
   if (legacyDirect) {
-    const { children, ...rest } = props;
+    const [rest, children] = splitPropsAndChildren(props);
     const newProps = { ...rest, key };
     return legacyDirect(newProps, ...React.Children.toArray(children)) as RenderResult;
   }
@@ -38,14 +39,14 @@ export function renderForJsxRuntime<TProps>(
 
   // auto-detect whether to use jsx or jsxs based on number of children, 0 or 1 = jsx, more than 1 = jsxs
   if (!jsxFn) {
-    if (React.Children.count(props.children) > 1) {
+    if (React.Children.count(extractChildren(props)) > 1) {
       jsxFn = ReactJSX.jsxs;
     } else {
       jsxFn = ReactJSX.jsx;
     }
   }
   // Extract key from props to avoid React 19 warning about spreading key prop
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
   const { key: propsKey, ...propsWithoutKey } = props as any;
   // Use explicitly passed key, or fall back to key from props
   const finalKey = key ?? propsKey;

packages/framework-base/src/component-patterns/render.types.ts

@@ -100,7 +100,7 @@ export type SlotFn<TProps> = {
  * Children will be passed as part of the props for component rendering. The `children` prop will be
  * automatically inferred and typed correctly by the prop type.
  */
-export type PhasedRender<TProps> = (props: TProps) => React.ComponentType<React.PropsWithChildren<TProps>>;
+export type PhasedRender<TProps> = (props: TProps) => React.ComponentType<TProps>;
 
 /**
  * Component type for a component that can be rendered in two phases, with the attached phased render function.