chore(v8-react-example): handle React 18 type issues

Author: mainframev

packages/react-examples/src/azure-themes/stories/components/CalendarInlineMultidayDayView.stories.tsx

@@ -19,7 +19,7 @@ const dayOptions: IDropdownOption[] = [
   { key: '6', text: '6' },
 ];
 
-export const CalendarInlineMultidayDayViewExample: React.FunctionComponent = () => {
+export const CalendarInlineMultidayDayViewExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [selectedDateRange, setSelectedDateRange] = React.useState<Date[]>();
   const [selectedDate, setSelectedDate] = React.useState<Date>();
   const [daysToSelectInDayView, setDaysToSelectInDayView] = React.useState(4);

packages/react-examples/src/azure-themes/stories/components/ContextMenu.stories.tsx

@@ -6,7 +6,7 @@ export default {
   title: 'Components/ContextualMenu',
 };
 
-export const ContextualMenuDefaultExample: React.FunctionComponent = () => {
+export const ContextualMenuDefaultExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return <DefaultButton text="Click for ContextualMenu" menuProps={menuProps} />;
 };
 

packages/react-examples/src/azure-themes/stories/components/Pivots.stories.tsx

@@ -11,7 +11,7 @@ const labelStyles: Partial<IStyleSet<ILabelStyles>> = {
   root: { marginTop: 10 },
 };
 
-export const PivotBasicExample: React.FunctionComponent = () => {
+export const PivotBasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Pivot aria-label="Basic Pivot Example">
       <PivotItem

packages/react-examples/src/azure-themes/stories/components/ProgressIndicator.stories.tsx

@@ -8,7 +8,7 @@ export default {
 const intervalDelay = 100;
 const intervalIncrement = 0.01;
 
-export const ProgressIndicatorBasicExample: React.FunctionComponent = () => {
+export const ProgressIndicatorBasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [percentComplete, setPercentComplete] = React.useState(0);
 
   React.useEffect(() => {

packages/react-examples/src/azure-themes/stories/components/SpinButton.stories.tsx

@@ -10,7 +10,7 @@ const stackTokens: IStackTokens = { childrenGap: 20 };
 // By default the field grows to fit available width. Constrain the width instead.
 const styles: Partial<ISpinButtonStyles> = { spinButtonWrapper: { width: 75 } };
 const iconProps: IIconProps = { iconName: 'IncreaseIndentLegacy' };
-export const SpinButtonBasicExample: React.FunctionComponent = () => {
+export const SpinButtonBasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Stack tokens={stackTokens}>
       <SpinButton

packages/react-examples/src/azure-themes/stories/components/TeachingBubble.stories.tsx

@@ -11,7 +11,7 @@ const examplePrimaryButtonProps: IButtonProps = {
   children: 'Try it out',
 };
 
-export const TeachingBubbleBasicExample: React.FunctionComponent = () => {
+export const TeachingBubbleBasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [teachingBubbleVisible, { toggle: toggleTeachingBubbleVisible }] = useBoolean(false);
 
   const exampleSecondaryButtonProps: IButtonProps = React.useMemo(

packages/react-examples/src/azure-themes/stories/components/actionButton.stories.tsx

@@ -14,7 +14,7 @@ export interface IButtonExampleProps {
 
 const addFriendIcon: IIconProps = { iconName: 'AddFriend' };
 
-export const ButtonActionExample: React.FunctionComponent<IButtonExampleProps> = props => {
+export const ButtonActionExample: React.FunctionComponent<React.PropsWithChildren<IButtonExampleProps>> = props => {
   const { disabled } = props;
 
   return (

packages/react-examples/src/azure-themes/stories/components/activityitem.stories.tsx

@@ -14,7 +14,7 @@ const classNames = mergeStyleSets({
   },
 });
 
-export const ActivityItemBasicExample: React.FunctionComponent = () => {
+export const ActivityItemBasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const activityItemExamples = [
     {
       key: 1,

packages/react-examples/src/azure-themes/stories/components/activityitempersonas.stories.tsx

@@ -15,7 +15,7 @@ const classNames = mergeStyleSets({
   },
 });
 
-export const ActivityItemPersonaExample: React.FunctionComponent = () => {
+export const ActivityItemPersonaExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const activityItemExamples: (IActivityItemProps & { key: string | number })[] = [
     {
       key: 1,

packages/react-examples/src/azure-themes/stories/components/buttonToggle.stories.tsx

@@ -15,7 +15,7 @@ export interface IButtonExampleProps {
 const volume0Icon: IIconProps = { iconName: 'Volume0' };
 const volume3Icon: IIconProps = { iconName: 'Volume3' };
 
-export const ButtonToggleExample: React.FunctionComponent<IButtonExampleProps> = props => {
+export const ButtonToggleExample: React.FunctionComponent<React.PropsWithChildren<IButtonExampleProps>> = props => {
   const { disabled, checked } = props;
   const [muted, setMuted] = React.useState<boolean>(false);
   const onClick = () => setMuted(!muted);