Pre-81: Fix JSX syntax in branch

README.md

@@ -37,7 +37,7 @@ If you have an existing React Native project, it's easy to begin using FluentUI
 import { Checkbox } from '@fluentui/react-native';
 ```
 
-4. After importing the @fluentui/react-native package, you can use components such as `Text` and `Checkbox` in your JSX.
+4. After importing the @fluentui/react-native package, you can use components such as `Text` and `Checkbox` in your React.JSX.
 
 ```jsx
 // In App.js in a new project

change/@fluentui-react-native-experimental-menu-button-39d41871-1688-484f-9264-7c0ac0516ff5.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "change JSX.Element to React.JSX.Element (pre-81 change)",
+  "packageName": "@fluentui-react-native/experimental-menu-button",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-framework-base-a8231119-6b0d-474c-a53e-7c5ba9714e0a.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "change JSX.Element to React.JSX.Element (pre-81 change)",
+  "packageName": "@fluentui-react-native/framework-base",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-menu-button-29279e6d-f25e-4f9e-93b6-7ab2ca4758a1.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "change JSX.Element to React.JSX.Element (pre-81 change)",
+  "packageName": "@fluentui-react-native/menu-button",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-persona-coin-869b29f0-821a-4bf2-a373-3b43c3e0d46d.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "change JSX.Element to React.JSX.Element (pre-81 change)",
+  "packageName": "@fluentui-react-native/persona-coin",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-persona-dc00fd3b-be7c-4b7a-875c-196437e7d80c.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "change JSX.Element to React.JSX.Element (pre-81 change)",
+  "packageName": "@fluentui-react-native/persona",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-stack-03d1053d-d742-48a3-ad10-921a17b23d1f.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "change JSX.Element to React.JSX.Element (pre-81 change)",
+  "packageName": "@fluentui-react-native/stack",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-use-tokens-c619beff-d712-42a8-b583-31bdf61dc62b.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "change JSX.Element to React.JSX.Element (pre-81 change)",
+  "packageName": "@fluentui-react-native/use-tokens",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@uifabricshared-foundation-composable-a7a86edb-3214-45bf-8484-097566287ca2.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "change JSX.Element to React.JSX.Element (pre-81 change)",
+  "packageName": "@uifabricshared/foundation-composable",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@uifabricshared-theming-react-native-3623a100-f1fc-40f7-99d7-45633458815e.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "change JSX.Element to React.JSX.Element (pre-81 change)",
+  "packageName": "@uifabricshared/theming-react-native",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/components/MenuButton/src/MenuButton.tsx

@@ -133,7 +133,7 @@ export const MenuButton = compose<MenuButtonType>({
   },
 });
 
-const SubMenuItem: React.FunctionComponent<MenuButtonItemProps> = (props: MenuButtonItemProps): JSX.Element => {
+const SubMenuItem: React.FunctionComponent<MenuButtonItemProps> = (props: MenuButtonItemProps): React.JSX.Element => {
   const [showSubmenuState, setShowSubmenu] = React.useState(false);
   const toggleShowSubmenu = React.useCallback(() => {
     setShowSubmenu(!showSubmenuState);

packages/components/Persona/src/Persona.tsx

@@ -49,7 +49,7 @@ function usePrepareForProps(props: IPersonaProps, useStyling: IUseComposeStyling
   };
 }
 
-const render = (Slots: ISlots<IPersonaSlotProps>, renderData: IPersonaRenderData): JSX.Element | null => {
+const render = (Slots: ISlots<IPersonaSlotProps>, renderData: IPersonaRenderData): React.JSX.Element | null => {
   if (!renderData.state) {
     return null;
   }

packages/components/PersonaCoin/src/PersonaCoin.tsx

@@ -61,7 +61,7 @@ function usePrepareForProps(
   };
 }
 
-const render = (Slots: ISlots<IPersonaCoinSlotProps>, renderData: IPersonaCoinRenderData): JSX.Element | null => {
+const render = (Slots: ISlots<IPersonaCoinSlotProps>, renderData: IPersonaCoinRenderData): React.JSX.Element | null => {
   if (!renderData.state) {
     return null;
   }

packages/components/Stack/src/Stack.tsx

@@ -35,7 +35,7 @@ function _mixinStyle(style: StyleProp<ObjectBase> | undefined, mixin: ObjectBase
 
 const _styleKey = 'style';
 
-const render = (Slots: ISlots<IStackSlotProps>, renderData: IStackRenderData, ...children: React.ReactNode[]): JSX.Element => {
+const render = (Slots: ISlots<IStackSlotProps>, renderData: IStackRenderData, ...children: React.ReactNode[]): React.JSX.Element => {
   const { gap, horizontal, wrap } = renderData.state!;
 
   if (gap && gap > 0 && children && globalThis.__jsiExecutorDescription !== 'ChakraRuntime') {

packages/deprecated/foundation-composable/README.md

@@ -39,7 +39,7 @@ export function composable<
       Slots: ISlots<TSlotProps>,
       renderData: IRenderData<TSlotProps, TState>,
       ...children: React.ReactNode[]
-    ) => JSX.Element | null,
+    ) => React.JSX.Element | null,
     slots: {
       [K in keyof TSlotProps]: {
         slotType?: React.ElementType<> | string,
@@ -131,7 +131,7 @@ render?: (
   Slots: ISlots<TSlotProps>,
   renderData: IRenderData<TSlotProps, TState>,
   ...children: React.ReactNode[]
-) => JSX.Element | null,
+) => React.JSX.Element | null,
 ```
 
 The three parameters are:
@@ -168,9 +168,9 @@ Render is optional in the case where there is only one sub-component, in this ca
 
 ## How it all works
 
-The overall flow of a component can be seen in the following diagram. At its core, a functional react component takes in a set of props, and outputs a JSX.Element tree.
+The overall flow of a component can be seen in the following diagram. At its core, a functional react component takes in a set of props, and outputs a React.JSX.Element tree.
 
-Using composable, the normal flow is broken into two primary parts: `usePrepareProps` and `render`. The optional `useStyling` function allows for style injection, while the `slots` define the actual JSX.Elements that will be output.
+Using composable, the normal flow is broken into two primary parts: `usePrepareProps` and `render`. The optional `useStyling` function allows for style injection, while the `slots` define the actual React.JSX.Elements that will be output.
 
 ![Composable Component Diagram](./docs/Composable.png)
 

packages/deprecated/foundation-composable/docs/GuideSimple.md

@@ -77,7 +77,7 @@ type ITextSlotProps = ISlotProps<TextProps>;
 
 export function usePrepareProps(
   userProps: TextProps,
-  useStyling: IUseStyling<ITextSlotProps>
+  useStyling: IUseStyling<ITextSlotProps>,
 ): IRenderData<ITextSlotProps, IUpperTextState> {
   const { content, ...props } = userProps;
   const children = changeTextToUppercaseWithLocale(content);
@@ -102,7 +102,7 @@ export function render(
   Slots: ISlots<ITextSlotProps>,
   renderData: IRenderData<ITextSlotProps>,
   ...children: React.ReactNode[]
-): JSX.Element | null {
+): React.JSX.Element | null {
   return renderSlot(Slots.root, null, ...children);
 }
 ```
@@ -124,8 +124,8 @@ export const UpperText = composable<TextProps>({
     return { slotProps, state: { upperText } };
   },
   slots: {
-    root: { slotType: Text }
-  }
+    root: { slotType: Text },
+  },
 });
 ```
 
@@ -141,7 +141,7 @@ export const StyledUpperText = composable<TextProps>({
   useStyling: (props: TextProps) => {
     return { root: { style: myStyle } };
     // could also be something like return { root: { classNames='.myClass' } };
-  }
+  },
 });
 ```
 

packages/deprecated/foundation-composable/etc/foundation-composable.api.md

@@ -3,32 +3,50 @@
 > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
 
 ```ts
-
 import { ISlotProps } from '@uifabricshared/foundation-settings';
 import * as React from 'react';
 
 // @public
-export function atomic<TProps extends object, TState = object>(target: INativeSlotType, usePrepareProps: IComposable<TProps, ISlotProps<TProps>, TState>['usePrepareProps'], filter?: IPropFilter): React.FunctionComponent<TProps>;
+export function atomic<TProps extends object, TState = object>(
+  target: INativeSlotType,
+  usePrepareProps: IComposable<TProps, ISlotProps<TProps>, TState>['usePrepareProps'],
+  filter?: IPropFilter,
+): React.FunctionComponent<TProps>;
 
 // @public (undocumented)
-export function atomicRender<TProps extends object, TState = object>(Slots: ISlots<ISlotProps<TProps>>, _renderData: IRenderData<ISlotProps<TProps>, TState>, ...children: React.ReactNode[]): JSX.Element | null;
+export function atomicRender<TProps extends object, TState = object>(
+  Slots: ISlots<ISlotProps<TProps>>,
+  _renderData: IRenderData<ISlotProps<TProps>, TState>,
+  ...children: React.ReactNode[]
+): React.JSX.Element | null;
 
 // @public (undocumented)
-export function atomicUsePrepareProps<TProps extends object, TSlotProps extends ISlotProps = ISlotProps<TProps>, TState = object>(props: TProps, useStyling: IUseStyling<TProps, TSlotProps>): IRenderData<TSlotProps, TState>;
+export function atomicUsePrepareProps<TProps extends object, TSlotProps extends ISlotProps = ISlotProps<TProps>, TState = object>(
+  props: TProps,
+  useStyling: IUseStyling<TProps, TSlotProps>,
+): IRenderData<TSlotProps, TState>;
 
 // @public
-export function composable<TProps extends object, TSlotProps extends ISlotProps = ISlotProps<TProps>, TState = object>(options: IComposableDefinition<TProps, TSlotProps, TState>): IWithComposable<React.FunctionComponent<TProps>, IComposable<TProps, TSlotProps, TState>>;
+export function composable<TProps extends object, TSlotProps extends ISlotProps = ISlotProps<TProps>, TState = object>(
+  options: IComposableDefinition<TProps, TSlotProps, TState>,
+): IWithComposable<React.FunctionComponent<TProps>, IComposable<TProps, TSlotProps, TState>>;
 
 // @public
 export interface IComposable<TProps extends object, TSlotProps extends ISlotProps = ISlotProps<TProps>, TState = object> {
-    render: (Slots: ISlots<TSlotProps>, renderData: IRenderData<TSlotProps, TState>, ...children: React.ReactNode[]) => JSX.Element | null;
-    slots: ISlotDefinitions<TSlotProps>;
-    usePrepareProps: (props: TProps, useStyling: IUseStyling<TProps, TSlotProps>) => IRenderData<TSlotProps, TState>;
-    useStyling: IUseStyling<TProps, TSlotProps>;
+  render: (
+    Slots: ISlots<TSlotProps>,
+    renderData: IRenderData<TSlotProps, TState>,
+    ...children: React.ReactNode[]
+  ) => React.JSX.Element | null;
+  slots: ISlotDefinitions<TSlotProps>;
+  usePrepareProps: (props: TProps, useStyling: IUseStyling<TProps, TSlotProps>) => IRenderData<TSlotProps, TState>;
+  useStyling: IUseStyling<TProps, TSlotProps>;
 }
 
 // @public (undocumented)
-export type IComposableDefinition<TProps extends object, TSlotProps extends ISlotProps = ISlotProps<TProps>, TState = any> = Partial<IComposable<TProps, TSlotProps, TState>>;
+export type IComposableDefinition<TProps extends object, TSlotProps extends ISlotProps = ISlotProps<TProps>, TState = any> = Partial<
+  IComposable<TProps, TSlotProps, TState>
+>;
 
 // @public
 export type INativeSlotType = React.ElementType<any> | string;
@@ -38,45 +56,56 @@ export type IPropFilter = (propName: string) => boolean;
 
 // @public
 export interface IRenderData<TSlotProps extends ISlotProps, TState = any> {
-    // (undocumented)
-    slotProps?: TSlotProps;
-    // (undocumented)
-    state?: TState;
+  // (undocumented)
+  slotProps?: TSlotProps;
+  // (undocumented)
+  state?: TState;
 }
 
 // @public
 export type ISlotDefinitions<TSlotProps extends ISlotProps> = {
-    [K in keyof TSlotProps]: ISlotWithFilter;
+  [K in keyof TSlotProps]: ISlotWithFilter;
 };
 
 // @public
 export type ISlots<TSlotProps extends ISlotProps> = {
-    [K in keyof TSlotProps]: React.FunctionComponent<TSlotProps[K]>;
+  [K in keyof TSlotProps]: React.FunctionComponent<TSlotProps[K]>;
 };
 
 // @public
 export type ISlotWithFilter<TMixin = object> = {
-    slotType?: INativeSlotType;
-    filter?: IPropFilter;
+  slotType?: INativeSlotType;
+  filter?: IPropFilter;
 } & TMixin;
 
 // @public (undocumented)
 export type IUseStyling<TProps extends object, TSlotProps extends ISlotProps = ISlotProps<TProps>> = (props: TProps) => TSlotProps;
 
 // @public
 export type IWithComposable<T extends object = object, TComposable = IComposable<object>> = T & {
-    __composable: TComposable;
+  __composable: TComposable;
 };
 
 // Warning: (ae-forgotten-export) The symbol "ISlotFn" needs to be exported by the entry point index.d.ts
-// 
+//
 // @public
-export function renderSlot<TProps>(slot: INativeSlotType | ISlotFn<TProps>, extraProps: TProps, ...children: React.ReactNode[]): React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)>) | (new (props: any) => React.Component<any, any, any>)>;
+export function renderSlot<TProps>(
+  slot: INativeSlotType | ISlotFn<TProps>,
+  extraProps: TProps,
+  ...children: React.ReactNode[]
+): React.ReactElement<
+  any,
+  | string
+  | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)>)
+  | (new (props: any) => React.Component<any, any, any>)
+>;
 
 // @public
-export function withSlots<P>(reactType: INativeSlotType, props?: React.Attributes & P | null, ...children: React.ReactNode[]): ReturnType<React.FunctionComponent<P>>;
-
+export function withSlots<P>(
+  reactType: INativeSlotType,
+  props?: (React.Attributes & P) | null,
+  ...children: React.ReactNode[]
+): ReturnType<React.FunctionComponent<P>>;
 
 // (No @packageDocumentation comment for this package)
-
 ```

packages/deprecated/foundation-composable/src/Composable.ts

@@ -24,7 +24,7 @@ export function atomicRender<TProps extends object, TState = object>(
   Slots: ISlots<ISlotProps<TProps>>,
   _renderData: IRenderData<ISlotProps<TProps>, TState>,
   ...children: React.ReactNode[]
-): JSX.Element | null {
+): React.JSX.Element | null {
   return renderSlot(Slots.root, undefined, ...children);
 }
 

packages/deprecated/foundation-composable/src/Composable.types.ts

@@ -88,7 +88,11 @@ export interface IComposable<TProps, TSlotProps, TState> {
    * @param renderData - IRenderData returned from usePrepareProps
    * @param children - The react children property in the form passed into React.createElement
    */
-  render: (Slots: ISlots<TSlotProps>, renderData: IRenderData<TSlotProps, TState>, ...children: React.ReactNode[]) => JSX.Element | null;
+  render: (
+    Slots: ISlots<TSlotProps>,
+    renderData: IRenderData<TSlotProps, TState>,
+    ...children: React.ReactNode[]
+  ) => React.JSX.Element | null;
 
   /**
    * The slot definitions for this component.  If this only has one sub-component this will only have a root entry.  Using

packages/deprecated/theming-react-native/README.md

@@ -64,7 +64,7 @@ import * as React from 'react';
 import { ThemeContext, ITheme } from '@uifabricshared/theming-react-native';
 
 export class OtherComponent extends React.Component {
-  public render(): JSX.Element {
+  public render(): React.JSX.Element {
     return (
       <ThemeContext.Consumer>
         {(theme: ITheme) => {

packages/deprecated/theming-react-native/etc/theming-react-native.api.md

@@ -3,7 +3,6 @@
 > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
 
 ```ts
-
 import { IPartialTheme } from '@uifabricshared/theming-ramp';
 import { IProcessTheme } from '@uifabricshared/theme-registry';
 import { ITheme } from '@uifabricshared/theming-ramp';
@@ -30,28 +29,30 @@ export type INativeThemeDefinition = IPartialTheme;
 
 // @public
 export interface IThemeLayerProps {
-    children: (theme: INativeTheme) => JSX.Element | null;
-    themeName?: string;
+  children: (theme: INativeTheme) => React.JSX.Element | null;
+  themeName?: string;
 }
 
 // @public
 export function removeThemeRegistryListener(listener: IThemeEventListener): void;
 
 // @public
-export function setTheme(definition: INativeThemeDefinition | IProcessTheme<INativeTheme, INativeThemeDefinition>, name?: string, parent?: string): void;
+export function setTheme(
+  definition: INativeThemeDefinition | IProcessTheme<INativeTheme, INativeThemeDefinition>,
+  name?: string,
+  parent?: string,
+): void;
 
 // @public (undocumented)
-export const ThemeContext: React.Context<import("@uifabricshared/theming-ramp").ITheme>;
+export const ThemeContext: React.Context<import('@uifabricshared/theming-ramp').ITheme>;
 
 // @public
 export class ThemeLayer extends React.Component<IThemeLayerProps> {
-    componentWillUnmount(): void;
-    onInvalidate: IThemeEventListener['onInvalidate'];
-    // (undocumented)
-    render(): JSX.Element;
+  componentWillUnmount(): void;
+  onInvalidate: IThemeEventListener['onInvalidate'];
+  // (undocumented)
+  render(): React.JSX.Element;
 }
 
-
 // (No @packageDocumentation comment for this package)
-
 ```