Pre-81: Switch to newer rendering pathways for stagedRender and improve type safety of framework #3996

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open

JasonVMo wants to merge 11 commits into main from user/jasonvmo/phased-rendering

+558 −335

change/@fluentui-react-native-button-720b78fc-c110-4878-8d65-4b9e3f2598e9.json

-Original file line number
+Diff line change
@@ -0,0 +1,7 @@
+    {
+      "type": "patch",
+      "comment": "tighten up typing for framework, fixing the resulting errors",
+      "packageName": "@fluentui-react-native/button",
+      "email": "[email protected]",
+      "dependentChangeType": "patch"
+    }

change/@fluentui-react-native-composition-3f1b63a7-572b-41d3-aa58-4e9e63a67d7b.json

-Original file line number
+Diff line change
@@ -0,0 +1,7 @@
+    {
+      "type": "patch",
+      "comment": "tighten up typing for framework, fixing the resulting errors",
+      "packageName": "@fluentui-react-native/composition",
+      "email": "[email protected]",
+      "dependentChangeType": "patch"
+    }

change/@fluentui-react-native-dropdown-87c83670-53db-4b52-b2d1-85e71f24ba52.json

-Original file line number
+Diff line change
@@ -0,0 +1,7 @@
+    {
+      "type": "patch",
+      "comment": "fix use-slot to use new rendering patterns",
+      "packageName": "@fluentui-react-native/dropdown",
+      "email": "[email protected]",
+      "dependentChangeType": "patch"
+    }

...ge/@fluentui-react-native-experimental-checkbox-272753d7-8b40-4478-b320-23b75fda2f54.json

-Original file line number
+Diff line change
@@ -0,0 +1,7 @@
+    {
+      "type": "patch",
+      "comment": "tighten up typing for framework, fixing the resulting errors",
+      "packageName": "@fluentui-react-native/experimental-checkbox",
+      "email": "[email protected]",
+      "dependentChangeType": "patch"
+    }

...ge/@fluentui-react-native-experimental-expander-f3f75eb3-6a92-43b2-99d7-9d8eaae37046.json

-Original file line number
+Diff line change
@@ -0,0 +1,7 @@
+    {
+      "type": "patch",
+      "comment": "tighten up typing for framework, fixing the resulting errors",
+      "packageName": "@fluentui-react-native/experimental-expander",
+      "email": "[email protected]",
+      "dependentChangeType": "patch"
+    }

...@fluentui-react-native-experimental-menu-button-87ab93a8-c1d4-4b77-95ae-85825caa81f7.json

-Original file line number
+Diff line change
@@ -0,0 +1,7 @@
+    {
+      "type": "patch",
+      "comment": "tighten up typing for framework, fixing the resulting errors",
+      "packageName": "@fluentui-react-native/experimental-menu-button",
+      "email": "[email protected]",
+      "dependentChangeType": "patch"
+    }

change/@fluentui-react-native-experimental-shadow-e6c1af9b-c5aa-44e6-9b66-cd38207c7522.json

-Original file line number
+Diff line change
@@ -0,0 +1,7 @@
+    {
+      "type": "patch",
+      "comment": "update phasedComponent pattern and switch direct stagedComponent callers to use it",
+      "packageName": "@fluentui-react-native/experimental-shadow",
+      "email": "[email protected]",
+      "dependentChangeType": "patch"
+    }

change/@fluentui-react-native-framework-base-9f12c70a-179d-4a28-803a-73bbb2b3df97.json

-Original file line number
+Diff line change
@@ -0,0 +1,7 @@
+    {
+      "type": "patch",
+      "comment": "update phasedComponent pattern and switch direct stagedComponent callers to use it",
+      "packageName": "@fluentui-react-native/framework-base",
+      "email": "[email protected]",
+      "dependentChangeType": "patch"
+    }

change/@fluentui-react-native-icon-2d7e4a6e-0c5a-4f1f-b456-98beb80c1bff.json

-Original file line number
+Diff line change
@@ -0,0 +1,7 @@
+    {
+      "type": "patch",
+      "comment": "update phasedComponent pattern and switch direct stagedComponent callers to use it",
+      "packageName": "@fluentui-react-native/icon",
+      "email": "[email protected]",
+      "dependentChangeType": "patch"
+    }

change/@fluentui-react-native-menu-52a2dd2f-433b-4a98-bbd2-02d1ca0c4de3.json

-Original file line number
+Diff line change
@@ -0,0 +1,7 @@
+    {
+      "type": "patch",
+      "comment": "update phasedComponent pattern and switch direct stagedComponent callers to use it",
+      "packageName": "@fluentui-react-native/menu",
+      "email": "[email protected]",
+      "dependentChangeType": "patch"
+    }

change/@fluentui-react-native-notification-39168bfc-7644-4bb1-b193-784c84c637a8.json

-Original file line number
+Diff line change
@@ -0,0 +1,7 @@
+    {
+      "type": "patch",
+      "comment": "update phasedComponent pattern and switch direct stagedComponent callers to use it",
+      "packageName": "@fluentui-react-native/notification",
+      "email": "[email protected]",
+      "dependentChangeType": "patch"
+    }

change/@fluentui-react-native-overflow-913fd2cf-938c-4465-a1ae-3c42126abb1a.json

-Original file line number
+Diff line change
@@ -0,0 +1,7 @@
+    {
+      "type": "patch",
+      "comment": "update phasedComponent pattern and switch direct stagedComponent callers to use it",
+      "packageName": "@fluentui-react-native/overflow",
+      "email": "[email protected]",
+      "dependentChangeType": "patch"
+    }

change/@fluentui-react-native-switch-e9541e88-729c-46a0-b35a-8e6caa138780.json

-Original file line number
+Diff line change
@@ -0,0 +1,7 @@
+    {
+      "type": "patch",
+      "comment": "tighten up typing for framework, fixing the resulting errors",
+      "packageName": "@fluentui-react-native/switch",
+      "email": "[email protected]",
+      "dependentChangeType": "patch"
+    }

change/@fluentui-react-native-tablist-eae99f12-b52e-426c-938f-460f65a5ce4f.json

-Original file line number
+Diff line change
@@ -0,0 +1,7 @@
+    {
+      "type": "patch",
+      "comment": "update phasedComponent pattern and switch direct stagedComponent callers to use it",
+      "packageName": "@fluentui-react-native/tablist",
+      "email": "[email protected]",
+      "dependentChangeType": "patch"
+    }

change/@fluentui-react-native-tooltip-d650af05-51c4-488a-878b-6dca19b33999.json

-Original file line number
+Diff line change
@@ -0,0 +1,7 @@
+    {
+      "type": "patch",
+      "comment": "update phasedComponent pattern and switch direct stagedComponent callers to use it",
+      "packageName": "@fluentui-react-native/tooltip",
+      "email": "[email protected]",
+      "dependentChangeType": "patch"
+    }

change/@fluentui-react-native-use-slot-04b210fb-fca7-4403-818f-9560758017cb.json

-Original file line number
+Diff line change
@@ -0,0 +1,7 @@
+    {
+      "type": "patch",
+      "comment": "fix use-slot to use new rendering patterns",
+      "packageName": "@fluentui-react-native/use-slot",
+      "email": "[email protected]",
+      "dependentChangeType": "patch"
+    }

change/@fluentui-react-native-use-slots-0995e553-335e-4dd8-b247-323d189a4a9d.json

-Original file line number
+Diff line change
@@ -0,0 +1,7 @@
+    {
+      "type": "patch",
+      "comment": "tighten up typing for framework, fixing the resulting errors",
+      "packageName": "@fluentui-react-native/use-slots",
+      "email": "[email protected]",
+      "dependentChangeType": "patch"
+    }

change/@fluentui-react-native-use-styling-563d6e04-7aa2-45a0-b967-6f289375c2b2.json

-Original file line number
+Diff line change
@@ -0,0 +1,7 @@
+    {
+      "type": "patch",
+      "comment": "tighten up typing for framework, fixing the resulting errors",
+      "packageName": "@fluentui-react-native/use-styling",
+      "email": "[email protected]",
+      "dependentChangeType": "patch"
+    }

packages/components/Button/src/CompoundButton/CompoundButton.mobile.tsx

-Original file line number
+Diff line change
@@ -1,14 +1,21 @@
     /** @jsxImportSource @fluentui-react-native/framework-base */
-    import { View } from 'react-native';
+    import { View, type ViewProps } from 'react-native';
     import { compose } from '@fluentui-react-native/framework';
     import { Icon } from '@fluentui-react-native/icon';
     import { TextV1 as Text } from '@fluentui-react-native/text';
-    import type { CompoundButtonType } from './CompoundButton.types';
+    import type { CompoundButtonSlotProps, CompoundButtonType } from './CompoundButton.types';
     import { compoundButtonName } from './CompoundButton.types';
-    export const CompoundButton = compose<CompoundButtonType>({
+    export interface MobileSlotProps extends CompoundButtonSlotProps {
+      root: ViewProps;
+    }
+    export interface CompoundButtonMobileType extends CompoundButtonType {
+      slotProps: MobileSlotProps;
+    }
+    export const CompoundButton = compose<CompoundButtonMobileType>({
       displayName: compoundButtonName,
       slots: {
         root: View,
@@ Expand Down @@

packages/components/Button/src/ToggleButton/ToggleButton.android.tsx

-Original file line number
+Diff line change
@@ -1,14 +1,22 @@
     /** @jsxImportSource @fluentui-react-native/framework-base */
-    import { View } from 'react-native';
+    import { View, type ViewProps } from 'react-native';
     import { compose } from '@fluentui-react-native/framework';
     import { Icon } from '@fluentui-react-native/icon';
     import { TextV1 as Text } from '@fluentui-react-native/text';
-    import type { ToggleButtonType } from './ToggleButton.types';
+    import type { ToggleButtonSlotProps, ToggleButtonType } from './ToggleButton.types';
     import { toggleButtonName } from './ToggleButton.types';
-    export const ToggleButton = compose<ToggleButtonType>({
+    interface ToggleButtonSlotPropsAndroid extends ToggleButtonSlotProps {
+      root: ViewProps;
+    }
+    interface ToggleButtonAndroidType extends ToggleButtonType {
+      slotProps: ToggleButtonSlotPropsAndroid;
+    }
+    export const ToggleButton = compose<ToggleButtonAndroidType>({
       displayName: toggleButtonName,
       slots: {
         root: View,
@@ Expand Down @@

packages/components/Icon/package.json

-Original file line number
+Diff line change
@@ Expand Up / @@ -34,6 +34,7 @@ @@
       "dependencies": {
         "@fluentui-react-native/adapters": "workspace:*",
         "@fluentui-react-native/framework": "workspace:*",
+        "@fluentui-react-native/framework-base": "workspace:*",
         "@fluentui-react-native/text": "workspace:*"
       },
       "devDependencies": {
@@ Expand Down @@

packages/components/Icon/src/FontIcon/FontIcon.tsx

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -1,12 +1,12 @@
  
    import { Text } from 'react-native';

    import { mergeProps, stagedComponent } from '@fluentui-react-native/framework';

    import { mergeProps, phasedComponent } from '@fluentui-react-native/framework-base';

    import type { FontIconProps } from './FontIcon.types';

    import { fontIconName } from './FontIcon.types';

    import { useFontIcon } from './useFontIcon';

    export const FontIcon = stagedComponent((props: FontIconProps) => {

    export const FontIcon = phasedComponent((props: FontIconProps) => {

      const fontIconProps = useFontIcon(props);

      return (final: FontIconProps) => {

        const newProps = mergeProps<FontIconProps>(fontIconProps, final);

packages/components/Icon/src/SvgIcon/SvgIcon.tsx

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -1,13 +1,13 @@
  
    import { Platform, View } from 'react-native';

    import { mergeProps, stagedComponent } from '@fluentui-react-native/framework';

    import { mergeProps, phasedComponent } from '@fluentui-react-native/framework-base';

    import { SvgUri } from 'react-native-svg';

    import type { SvgIconProps } from './SvgIcon.types';

    import { svgIconName } from './SvgIcon.types';

    import { useSvgIcon } from './useSvgIcon';

    export const SvgIcon = stagedComponent((props: SvgIconProps) => {

    export const SvgIcon = phasedComponent((props: SvgIconProps) => {

      const svgProps = useSvgIcon(props);

      return (final: SvgIconProps) => {

        const { style, height, width, src, uri, viewBox, color, ...rest } = mergeProps<SvgIconProps>(svgProps, final);

packages/components/Icon/src/legacy/Icon.tsx

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -2,7 +2,7 @@ import { Image, Platform, View } from 'react-native';
  
    import type { ImageStyle, TextStyle, ViewStyle } from 'react-native';

    import { mergeStyles, useFluentTheme } from '@fluentui-react-native/framework';

    import { stagedComponent, mergeProps, getMemoCache, getTypedMemoCache } from '@fluentui-react-native/framework';

    import { phasedComponent, mergeProps, getMemoCache, getTypedMemoCache } from '@fluentui-react-native/framework-base';

    import { Text } from '@fluentui-react-native/text';

    import type { SvgProps } from 'react-native-svg';

    import { SvgUri } from 'react-native-svg';

    @@ -92,7 +92,7 @@ function renderSvg(iconProps: IconProps) {
  
      }

    }

    export const Icon = stagedComponent((props: IconProps) => {

    export const Icon = phasedComponent((props: IconProps) => {

      const theme = useFluentTheme();

      return (rest: IconProps) => {

packages/components/Menu/src/Menu/Menu.tsx

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -1,19 +1,19 @@
  
    import React from 'react';

    import { stagedComponent } from '@fluentui-react-native/framework';

    import { phasedComponent } from '@fluentui-react-native/framework-base';

    import type { MenuProps } from './Menu.types';

    import { menuName } from './Menu.types';

    import { renderFinalMenu } from './renderMenu';

    import { useMenu } from './useMenu';

    import { useMenuContextValue } from './useMenuContextValue';

    export const Menu = stagedComponent((props: MenuProps) => {

    export const Menu = phasedComponent((props: MenuProps) => {

      const state = useMenu(props);

      const contextValue = useMenuContextValue(state);

      return (_rest: MenuProps, children: React.ReactNode) => {

        const childrenArray = React.Children.toArray(children) as React.ReactElement[];

      return (rest: MenuProps) => {

        const childrenArray = React.Children.toArray(rest.children) as React.ReactElement[];

        if (__DEV__) {

          if (childrenArray.length !== 2) {

packages/components/Menu/src/MenuCallout/MenuCallout.android.tsx

-Original file line number
+Diff line change
@@ -1,20 +1,19 @@
-    import React from 'react';
     import { Animated, Modal, TouchableWithoutFeedback, View, StyleSheet, ScrollView } from 'react-native';
-    import { stagedComponent } from '@fluentui-react-native/framework';
-    import { mergeProps } from '@fluentui-react-native/framework';
+    import { mergeProps, phasedComponent } from '@fluentui-react-native/framework-base';
     import type { MenuCalloutProps } from './MenuCallout.types';
     import { menuCalloutName } from './MenuCallout.types';
     import { useMenuContext } from '../context';
     const AnimatedScrollView = Animated.createAnimatedComponent(ScrollView);
-    export const MenuCallout = stagedComponent((props: MenuCalloutProps) => {
+    export const MenuCallout = phasedComponent((props: MenuCalloutProps) => {
       const context = useMenuContext();
-      return (_rest: MenuCalloutProps, children: React.ReactNode) => {
-        const mergedProps = mergeProps(props, _rest);
+      return (innerProps: MenuCalloutProps) => {
+        const { children, ...rest } = mergeProps<MenuCalloutProps>(props, innerProps);
+        const mergedProps = mergeProps(props, rest);
         const tokens = props.tokens;
         return (
@@ Expand Down @@

packages/components/Menu/src/MenuCallout/MenuCallout.tsx

-Original file line number
+Diff line change
@@ -1,15 +1,13 @@
-    import React from 'react';
     import { Callout } from '@fluentui-react-native/callout';
-    import { stagedComponent } from '@fluentui-react-native/framework';
-    import { mergeProps } from '@fluentui-react-native/framework';
+    import { mergeProps, phasedComponent } from '@fluentui-react-native/framework-base';
     import type { MenuCalloutProps } from './MenuCallout.types';
     import { menuCalloutName } from './MenuCallout.types';
-    export const MenuCallout = stagedComponent((props: MenuCalloutProps) => {
-      return (_rest: MenuCalloutProps, children: React.ReactNode) => {
-        const mergedProps = mergeProps(props, _rest);
+    export const MenuCallout = phasedComponent((props: MenuCalloutProps) => {
+      return (innerProps: MenuCalloutProps) => {
+        const { children, ...rest } = innerProps;
+        const mergedProps = mergeProps(props, rest);
         return <Callout {...mergedProps}>{children}</Callout>;
       };
@@ Expand Down @@

packages/components/Notification/src/Notification.helper.tsx

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -2,7 +2,7 @@ import React from 'react';
  
    import type { ButtonProps, ButtonTokens } from '@fluentui-react-native/button';

    import { ButtonV1 as Button } from '@fluentui-react-native/button';

    import { mergeProps, stagedComponent } from '@fluentui-react-native/framework';

    import { mergeProps, phasedComponent } from '@fluentui-react-native/framework-base';

    import type { SvgIconProps } from '@fluentui-react-native/icon';

    import { createIconProps } from '@fluentui-react-native/icon';

    import { globalTokens } from '@fluentui-react-native/theme-tokens';

    @@ -59,31 +59,36 @@ export function createNotificationButtonProps(userProps: NotificationProps) {
  
     *    (e.g. setting color in Notification.styling.ts will not apply to the action button text)

     * This helper component is used to customize tokens via props.

     */

    export const NotificationButton = stagedComponent((props: NotificationButtonProps) => {

      const CustomizedButton = Button.customize({

        subtle: {

          backgroundColor: 'transparent',

          color: props.color,

          iconColor: props.color,

          disabled: {

            color: props.disabledColor,

          },

          pressed: {

            color: props.pressedColor,

          },

        },

        medium: {

          hasContent: {

            minWidth: 0,

            padding: globalTokens.sizeNone,

            paddingHorizontal: globalTokens.sizeNone,

            variant: 'body2Strong',

          },

        },

      });

    export const NotificationButton = phasedComponent((props: NotificationButtonProps) => {

      const CustomizedButton = React.useMemo(

        () =>

          Button.customize({

            subtle: {

              backgroundColor: 'transparent',

              color: props.color,

              iconColor: props.color,

              disabled: {

                color: props.disabledColor,

              },

              pressed: {

                color: props.pressedColor,

              },

            },

            medium: {

              hasContent: {

                minWidth: 0,

                padding: globalTokens.sizeNone,

                paddingHorizontal: globalTokens.sizeNone,

                variant: 'body2Strong',

              },

            },

          }),

        [props.color, props.disabledColor, props.pressedColor],

      );

      return (final: NotificationButtonProps, children: React.ReactNode) => {

        const mergedProps = mergeProps(props, final);

      return (final: NotificationButtonProps) => {

        const { children, ...rest } = final;

        const mergedProps = mergeProps(props, rest);

        return <CustomizedButton {...mergedProps}>{children}</CustomizedButton>;

      };

    }, true);

    });

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Pre-81: Switch to newer rendering pathways for stagedRender and improve type safety of framework #3996

Diff view

Diff view

There are no files selected for viewing

Saadnajmi Jan 29, 2026

Uh oh!

Uh oh!

Uh oh!

Pre-81: Switch to newer rendering pathways for stagedRender and improve type safety of framework #3996

Are you sure you want to change the base?

Pre-81: Switch to newer rendering pathways for stagedRender and improve type safety of framework #3996

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Saadnajmi Jan 29, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!