chore(v0): resolve issues with React 18 types

Author: mainframev

packages/fluentui/code-sandbox/src/SandboxApp.tsx

@@ -55,7 +55,7 @@ const themes = {
   teamsHighContrastTheme,
 };
 
-export const SandboxApp: React.FunctionComponent = props => {
+export const SandboxApp: React.FunctionComponent<React.PropsWithChildren<unknown>> = props => {
   const { children } = props;
   const [theme, setTheme] = React.useState(items[0].value);
 

packages/fluentui/docs-components/src/CodeSnippet/CodeSnippetLabel.tsx

@@ -22,7 +22,7 @@ const copyIcon = (
   </svg>
 );
 
-export const CodeSnippetLabel: React.FunctionComponent<CopySnippetLabelProps> = props => {
+export const CodeSnippetLabel: React.FunctionComponent<React.PropsWithChildren<CopySnippetLabelProps>> = props => {
   const { copyable, label, mode, value } = props;
   const hasLabel = label !== false;
 

packages/fluentui/docs-components/src/knobs/KnobProvider.tsx

@@ -14,7 +14,7 @@ type KnobProviderProps = {
   components?: Partial<KnobComponents>;
 };
 
-export const KnobProvider: React.FunctionComponent<KnobProviderProps> = props => {
+export const KnobProvider: React.FunctionComponent<React.PropsWithChildren<KnobProviderProps>> = props => {
   const { children, components } = props;
 
   const [knobs, setKnobs] = React.useState<KnobSet>({});

packages/fluentui/docs-components/src/knobs/LogInspector.tsx

@@ -6,7 +6,7 @@ type LogInspectorProps = {
   silent?: boolean;
 };
 
-export const LogInspector: React.FunctionComponent<LogInspectorProps> = props => {
+export const LogInspector: React.FunctionComponent<React.PropsWithChildren<LogInspectorProps>> = props => {
   const { components } = React.useContext(KnobContext);
 
   const { clearLog } = React.useContext(LogContextFunctions);

packages/fluentui/docs-components/src/knobs/defaultComponents.tsx

@@ -8,7 +8,7 @@ import {
 } from './types';
 import { parseValue } from './utils/parseRangeValue';
 
-const KnobField: React.FunctionComponent<KnobComponentProps> = props => (
+const KnobField: React.FunctionComponent<React.PropsWithChildren<KnobComponentProps>> = props => (
   <div
     style={{
       borderBottom: '1px solid rgb(234, 234, 234)',
@@ -22,7 +22,7 @@ const KnobField: React.FunctionComponent<KnobComponentProps> = props => (
   </div>
 );
 
-const KnobControl: React.FunctionComponent<KnobComponentProps> = props => (
+const KnobControl: React.FunctionComponent<React.PropsWithChildren<KnobComponentProps>> = props => (
   <span
     style={{
       verticalAlign: 'middle',
@@ -34,13 +34,13 @@ const KnobControl: React.FunctionComponent<KnobComponentProps> = props => (
   </span>
 );
 
-const KnobLabel: React.FunctionComponent<KnobComponentProps> = props => (
+const KnobLabel: React.FunctionComponent<React.PropsWithChildren<KnobComponentProps>> = props => (
   <label htmlFor={`knob_${props.name}`} style={{ marginRight: 5 }}>
     {props.content || <code>{props.name}</code>}
   </label>
 );
 
-const KnobBoolean: React.FunctionComponent<KnobComponentProps> = props => (
+const KnobBoolean: React.FunctionComponent<React.PropsWithChildren<KnobComponentProps>> = props => (
   <input
     id={`knob_${props.name}`}
     checked={props.value}
@@ -52,7 +52,7 @@ const KnobBoolean: React.FunctionComponent<KnobComponentProps> = props => (
   />
 );
 
-const KnobNumber: React.FunctionComponent<KnobNumberKnobComponentProps> = props => (
+const KnobNumber: React.FunctionComponent<React.PropsWithChildren<KnobNumberKnobComponentProps>> = props => (
   <input
     id={`knob_${props.name}`}
     onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
@@ -76,7 +76,7 @@ const KnobNumber: React.FunctionComponent<KnobNumberKnobComponentProps> = props
   />
 );
 
-const KnobSelect: React.FunctionComponent<KnobComponentProps> = props => (
+const KnobSelect: React.FunctionComponent<React.PropsWithChildren<KnobComponentProps>> = props => (
   <select
     id={`knob_${props.name}`}
     onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
@@ -94,7 +94,7 @@ const KnobSelect: React.FunctionComponent<KnobComponentProps> = props => (
   </select>
 );
 
-const KnobRange: React.FunctionComponent<KnobRangeKnobComponentProps> = props => (
+const KnobRange: React.FunctionComponent<React.PropsWithChildren<KnobRangeKnobComponentProps>> = props => (
   <input
     id={`knob_${props.name}`}
     type="range"
@@ -109,7 +109,7 @@ const KnobRange: React.FunctionComponent<KnobRangeKnobComponentProps> = props =>
   />
 );
 
-const KnobString: React.FunctionComponent<KnobComponentProps> = props => (
+const KnobString: React.FunctionComponent<React.PropsWithChildren<KnobComponentProps>> = props => (
   <input
     id={`knob_${props.name}`}
     onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
@@ -120,7 +120,7 @@ const KnobString: React.FunctionComponent<KnobComponentProps> = props => (
   />
 );
 
-const LogInspector: React.FunctionComponent<LogInspectorProps> = props => (
+const LogInspector: React.FunctionComponent<React.PropsWithChildren<LogInspectorProps>> = props => (
   <>
     <div style={{ display: 'flex', padding: 5 }}>
       <div style={{ flexGrow: 1 }}>

packages/fluentui/docs-components/src/knobs/types.ts

@@ -13,7 +13,7 @@ export type KnobName = string;
 
 export type KnobSet = Record<KnobName, KnobDefinition>;
 
-export type KnobComponent<P = KnobComponentProps> = React.FunctionComponent<P>;
+export type KnobComponent<P = KnobComponentProps> = React.FunctionComponent<React.PropsWithChildren<P>>;
 
 export type KnobComponents = {
   KnobField: KnobComponent;
@@ -26,7 +26,7 @@ export type KnobComponents = {
   KnobSelect: KnobComponent;
   KnobString: KnobComponent;
 
-  LogInspector: React.FunctionComponent<LogInspectorProps>;
+  LogInspector: React.FunctionComponent<React.PropsWithChildren<LogInspectorProps>>;
 };
 
 export type KnobComponentProps = KnobDefinition & {

packages/fluentui/docs/src/app.tsx

@@ -53,7 +53,7 @@ function useRendererFactory(): CreateRenderer {
   return rendererFactory;
 }
 
-const App: React.FC = () => {
+const App: React.FC<React.PropsWithChildren<unknown>> = () => {
   const [themeName, setThemeName] = React.useState<ThemeName>(themeContextDefaults.themeName);
   // State also contains the updater function so it will
   // be passed down into the context provider

packages/fluentui/docs/src/components/ComponentBestPractices.tsx

@@ -17,7 +17,7 @@ export type ComponentBestPracticesProps = Extendable<{
   dontList?: React.ReactNode[];
 }>;
 
-const ComponentBestPractices: React.FC<ComponentBestPracticesProps> = ({ doList, dontList }) => {
+const ComponentBestPractices: React.FC<React.PropsWithChildren<ComponentBestPracticesProps>> = ({ doList, dontList }) => {
   const updatedDoList: ShorthandCollection<ListItemProps> = [];
   const updatedDontList: ShorthandCollection<ListItemProps> = [];
 

packages/fluentui/docs/src/components/ComponentDoc/BehaviorDescription.tsx

@@ -5,7 +5,7 @@ const AccessibilityDescription = React.lazy(() => import('./InlineMarkdown'));
 
 const item = '- ';
 
-const BehaviorDescription: React.FunctionComponent<{ value: string }> = ({ value }) => {
+const BehaviorDescription: React.FunctionComponent<React.PropsWithChildren<{ value: string }>> = ({ value }) => {
   // doctrine has a bug where it ignores list item indicator (-) if it is in the beginning of the comment
   // because of that, add the list item indicators after parsing
   const markdown =

packages/fluentui/docs/src/components/ComponentDoc/ComponentBundleSizeExample/ComponentBundleSizeExample.tsx

@@ -12,7 +12,7 @@ export interface ComponentBundleSizeExampleProps {
   examplePath: string;
 }
 
-const ComponentBundleSizeExample: React.FunctionComponent<ComponentBundleSizeExampleProps> = props => {
+const ComponentBundleSizeExample: React.FunctionComponent<React.PropsWithChildren<ComponentBundleSizeExampleProps>> = props => {
   const { title, description, examplePath } = props;
   // "components/Divider/Performance/Divider.bsize" -> dividerBSizeTsxJs
   const perfTestName = `${_.camelCase(_.last(examplePath.split('/')))}TsxJs`;