chore(react-cards): resolve issues related to React 18 types

Author: mainframev

packages/react-cards/etc/react-cards.api.md

@@ -20,12 +20,12 @@ import * as React_2 from 'react';
 
 // @public @deprecated (undocumented)
 export const Card: React_2.FunctionComponent<ICardProps> & {
-    Item: React_2.FunctionComponent<ICardItemProps>;
-    Section: React_2.FunctionComponent<ICardSectionProps>;
+    Item: React_2.FunctionComponent<React_2.PropsWithChildren<ICardItemProps>>;
+    Section: React_2.FunctionComponent<React_2.PropsWithChildren<ICardSectionProps>>;
 };
 
 // @public @deprecated (undocumented)
-export const CardItem: React_2.FunctionComponent<ICardItemProps>;
+export const CardItem: React_2.FunctionComponent<React_2.PropsWithChildren<ICardItemProps>>;
 
 // @public @deprecated (undocumented)
 export const CardSection: React_2.FunctionComponent<ICardSectionProps>;

packages/react-cards/src/components/Card/Card.ts

@@ -18,8 +18,8 @@ const CardStatics = {
  * future.
  */
 export const Card: React.FunctionComponent<ICardProps> & {
-  Item: React.FunctionComponent<ICardItemProps>;
-  Section: React.FunctionComponent<ICardSectionProps>;
+  Item: React.FunctionComponent<React.PropsWithChildren<ICardItemProps>>;
+  Section: React.FunctionComponent<React.PropsWithChildren<ICardSectionProps>>;
 } = createComponent(CardView, {
   displayName: 'Card',
   styles,

packages/react-cards/src/components/Card/Card.view.tsx

@@ -117,14 +117,14 @@ function _isReactElement(item: React.ReactNode): item is React.ReactElement {
   return !!item && typeof item === 'object' && !!(item as React.ReactElement).type;
 }
 
-function _isCardItem(item: React.ReactNode): item is typeof CardItem {
+function _isCardItem(item: React.ReactNode) {
   // In theory, we should be able to just check item.type === CardItem.
   // However, under certain unclear circumstances (see https://github.com/microsoft/fluentui/issues/10785),
   // the object identity is different despite the function implementation being the same.
   // CardItem is generated by createComponent, so we need to check its displayName instead of name
   return _isReactElement(item) && (item.type as React.ComponentType).displayName === CardItem.displayName;
 }
 
-function _isCardSection(item: React.ReactNode): item is typeof CardSection {
+function _isCardSection(item: React.ReactNode) {
   return _isReactElement(item) && (item.type as React.ComponentType).displayName === CardSection.displayName;
 }

packages/react-cards/src/components/Card/CardItem/CardItem.ts

@@ -8,11 +8,14 @@ import { CardItemView } from './CardItem.view';
  * @deprecated This component was experimental and is no longer being developed on, nor will it be supported in the
  * future.
  */
-export const CardItem: React.FunctionComponent<ICardItemProps> = createComponent(CardItemView, {
-  displayName: 'CardItem',
-  styles,
-  tokens,
-});
+export const CardItem: React.FunctionComponent<React.PropsWithChildren<ICardItemProps>> = createComponent(
+  CardItemView,
+  {
+    displayName: 'CardItem',
+    styles,
+    tokens,
+  },
+);
 
 /**
  * @deprecated This component was experimental and is no longer being developed on, nor will it be supported in the