fix(react): make children prop explicit for react 18 support (#4040)

src/react/components/accordion-content.jsx

@@ -7,6 +7,7 @@ import { colorClasses } from '../shared/mixins.js';
   className: string;
   style: React.CSSProperties;
   ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+  children?: React.ReactNode;
   COLOR_PROPS
 */
 

src/react/components/accordion-item.jsx

@@ -16,6 +16,7 @@ import { f7, f7ready } from '../shared/f7.js';
   onAccordionClose? : (...args: any[]) => void
   onAccordionClosed? : (...args: any[]) => void
   ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+  children?: React.ReactNode;
   COLOR_PROPS
 */
 

src/react/components/accordion-toggle.jsx

@@ -7,6 +7,7 @@ import { colorClasses } from '../shared/mixins.js';
   className: string;
   style: React.CSSProperties;
   ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+  children?: React.ReactNode;
   COLOR_PROPS
 */
 

src/react/components/accordion.jsx

@@ -8,6 +8,7 @@ import { colorClasses } from '../shared/mixins.js';
   style: React.CSSProperties;
   accordionOpposite: boolean;
   ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+  children?: React.ReactNode;
   COLOR_PROPS
 */
 

src/react/components/actions-button.jsx

@@ -11,6 +11,7 @@ import { f7 } from '../shared/f7.js';
   close: boolean;
   onClick? : (event?: any) => void
   ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+  children?: React.ReactNode;
   COLOR_PROPS
 */
 

src/react/components/actions-group.jsx

@@ -7,6 +7,7 @@ import { colorClasses } from '../shared/mixins.js';
   className: string;
   style: React.CSSProperties;
   ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+  children?: React.ReactNode;
   COLOR_PROPS
 */
 

src/react/components/actions-label.jsx

@@ -9,6 +9,7 @@ import { colorClasses } from '../shared/mixins.js';
   bold: boolean;
   onClick?: (event?: any) => void
   ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+  children?: React.ReactNode;
   COLOR_PROPS
 */
 

src/react/components/actions.jsx

@@ -31,6 +31,7 @@ import { Actions } from 'framework7/types';
   onActionsClosed? : (instance?: Actions.Actions) => void
   containerEl? : string | object
   ref?: React.MutableRefObject<{el: HTMLElement | null; f7Actions: () => Actions.Actions}>;
+  children?: React.ReactNode;
   COLOR_PROPS
 */
 

src/react/components/app.jsx

@@ -18,6 +18,7 @@ import { f7init, f7 } from '../shared/f7.js';
   className?: string;
   style?: React.CSSProperties;
   ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+  children?: React.ReactNode;
   COLOR_PROPS
 */
 

src/react/components/appbar.jsx

@@ -12,6 +12,7 @@ import { colorClasses } from '../shared/mixins.js';
   innerClass: string;
   innerClassName: string;
   ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+  children?: React.ReactNode;
   COLOR_PROPS
 */
 

src/react/components/area-chart.jsx

@@ -24,6 +24,7 @@ import { f7 } from '../shared/f7.js';
   formatTooltipDataset?: (label: any, value: number, color: string) => string;
   onSelect? : (index: number | null) => void
   ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+  children?: React.ReactNode;
 */
 
 const AreaChart = forwardRef((props, ref) => {

src/react/components/badge.jsx

@@ -18,6 +18,7 @@ f7Tooltip: Tooltip.Tooltip
   tooltip: string;
   tooltipTrigger: string;
   ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+  children?: React.ReactNode;
   COLOR_PROPS
 */
 

src/react/components/block-footer.jsx

@@ -7,6 +7,7 @@ import { colorClasses } from '../shared/mixins.js';
   className: string;
   style: React.CSSProperties;
   ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+  children?: React.ReactNode;
   COLOR_PROPS
 */
 

src/react/components/block-header.jsx

@@ -7,6 +7,7 @@ import { colorClasses } from '../shared/mixins.js';
   className: string;
   style: React.CSSProperties;
   ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+  children?: React.ReactNode;
   COLOR_PROPS
 */
 

src/react/components/block-title.jsx

@@ -9,6 +9,7 @@ import { colorClasses } from '../shared/mixins.js';
   large?: boolean;
   medium?: boolean;
   ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+  children?: React.ReactNode;
   COLOR_PROPS
 */
 

src/react/components/block.jsx

@@ -26,6 +26,7 @@ import { useTab } from '../shared/use-tab.js';
   onTabShow?: (el?: HTMLElement) => void
   onTabHide?: (el?: HTMLElement) => void
   ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+  children?: React.ReactNode;
   COLOR_PROPS
 */
 

src/react/components/breadcrumbs-collapsed.jsx

@@ -7,6 +7,7 @@ import { classNames, getExtraAttrs, emit } from '../shared/utils.js';
   style?: React.CSSProperties;
   onClick? : (event?: any) => void;
   ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+  children?: React.ReactNode;
 */
 
 const BreadcrumbsCollapsed = forwardRef((props, ref) => {

src/react/components/breadcrumbs-item.jsx

@@ -8,6 +8,7 @@ import { classNames, getExtraAttrs, emit } from '../shared/utils.js';
   onClick? : (event?: any) => void;
   active?: boolean;
   ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+  children?: React.ReactNode;
 */
 
 const BreadcrumbsItem = forwardRef((props, ref) => {

src/react/components/breadcrumbs-separator.jsx

@@ -6,6 +6,7 @@ import { classNames, getExtraAttrs } from '../shared/utils.js';
   className?: string;
   style?: React.CSSProperties;
   ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+  children?: React.ReactNode;
 */
 
 const BreadcrumbsSeparator = forwardRef((props, ref) => {

src/react/components/breadcrumbs.jsx

@@ -6,6 +6,7 @@ import { classNames, getExtraAttrs } from '../shared/utils.js';
   className?: string;
   style?: React.CSSProperties;
   ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+  children?: React.ReactNode;
 */
 
 const Breadcrumbs = forwardRef((props, ref) => {

src/react/components/button.jsx

@@ -57,6 +57,7 @@ import Preloader from './preloader.js';
   loading?: boolean;
   onClick? : (event?: any) => void;
   ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+  children?: React.ReactNode;
   COLOR_PROPS
   ICON_PROPS
   ROUTER_PROPS

src/react/components/card-content.jsx

@@ -8,6 +8,7 @@ import { colorClasses } from '../shared/mixins.js';
   style: React.CSSProperties;
   padding: boolean;
   ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+  children?: React.ReactNode;
   COLOR_PROPS
 */
 

src/react/components/card-footer.jsx

@@ -7,6 +7,7 @@ import { colorClasses } from '../shared/mixins.js';
   className: string;
   style: React.CSSProperties;
   ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+  children?: React.ReactNode;
   COLOR_PROPS
 */
 

src/react/components/card-header.jsx

@@ -7,6 +7,7 @@ import { colorClasses } from '../shared/mixins.js';
   className: string;
   style: React.CSSProperties;
   ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+  children?: React.ReactNode;
   COLOR_PROPS
 */
 

src/react/components/card.jsx

@@ -39,6 +39,7 @@ import { watchProp } from '../shared/watch-prop.js';
   onCardClose? : (el?: HTMLElement) => void
   onCardClosed? : (el?: HTMLElement, pageEl?: HTMLElement) => void
   ref?: React.MutableRefObject<{el: HTMLElement | null; open: () => void; close: () => void}>;
+  children?: React.ReactNode;
   COLOR_PROPS
 */
 

src/react/components/checkbox.jsx

@@ -16,6 +16,7 @@ import { colorClasses } from '../shared/mixins.js';
   COLOR_PROPS
   onChange? : (event?: any) => void
   ref?: React.MutableRefObject<{el: HTMLElement | null; inputEl: HTMLElement | null}>;
+  children?: React.ReactNode;
 */
 
 const Checkbox = forwardRef((props, ref) => {

src/react/components/chip.jsx

@@ -19,6 +19,7 @@ import { useIcon } from '../shared/use-icon.js';
   onClick? : (event?: any) => void
   onDelete? : (event?: any) => void
   ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+  children?: React.ReactNode;
   COLOR_PROPS
   ICON_PROPS
 */

src/react/components/col.jsx

@@ -21,6 +21,7 @@ import { f7ready, f7 } from '../shared/f7.js';
   onClick? : (event?: any) => void
   onGridResize? : (...args: any[]) => void
   ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+  children?: React.ReactNode;
   COLOR_PROPS
 */
 

src/react/components/fab-backdrop.jsx

@@ -6,6 +6,7 @@ import { getExtraAttrs, classNames } from '../shared/utils.js';
   className?: string;
   style?: React.CSSProperties;
   ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+  children?: React.ReactNode;
 */
 
 const FabBackdrop = forwardRef((props, ref) => {

src/react/components/fab-button.jsx

@@ -14,6 +14,7 @@ import { useTooltip } from '../shared/use-tooltip.js';
   tooltipTrigger? : string;
   onClick? : (event?: any) => void;
   ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+  children?: React.ReactNode;
   COLOR_PROPS
 */
 

src/react/components/fab-buttons.jsx

@@ -8,6 +8,7 @@ import { colorClasses } from '../shared/mixins.js';
   style?: React.CSSProperties;
   position?: string;
   ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+  children?: React.ReactNode;
   COLOR_PROPS
 */
 

src/react/components/fab.jsx

@@ -16,6 +16,7 @@ import { useTooltip } from '../shared/use-tooltip.js';
   tooltipTrigger? : string;
   onClick? : (event?: any) => void;
   ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+  children?: React.ReactNode;
   COLOR_PROPS
 */
 

src/react/components/gauge.jsx

@@ -22,6 +22,7 @@ import { classNames, getExtraAttrs } from '../shared/utils.js';
   labelFontSize? : number | string
   labelFontWeight? : number | string
   ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+  children?: React.ReactNode;
 */
 
 const Gauge = forwardRef((props, ref) => {

src/react/components/icon.jsx

@@ -18,6 +18,7 @@ import { useTheme } from '../shared/use-theme.js';
   tooltipTrigger? : string;
   size? : string | number;
   ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+  children?: React.ReactNode;
   COLOR_PROPS
 */
 

src/react/components/input.jsx

@@ -74,6 +74,7 @@ import { Calendar, ColorPicker, TextEditor } from 'framework7/types';
   onChange? : (...args: any[]) => void
   onTextEditorChange? : (...args: any[]) => void
   ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+  children?: React.ReactNode;
 */
 
 const Input = forwardRef((props, ref) => {

src/react/components/link.jsx

@@ -44,6 +44,7 @@ import { SmartSelect } from 'framework7/types';
   ROUTER_PROPS
   onClick? : (event?: any) => void
   ref?: React.MutableRefObject<{el: HTMLElement | null; f7SmartSelect: () => SmartSelect.SmartSelect}>;
+  children?: React.ReactNode;
 */
 
 const Link = forwardRef((props, ref) => {

src/react/components/list-button.jsx

@@ -28,6 +28,7 @@ import { useRouteProps } from '../shared/use-route-props.js';
   ACTIONS_PROPS
   onClick? : (event?: any) => void
   ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+  children?: React.ReactNode;
 */
 
 const ListButton = forwardRef((props, ref) => {

src/react/components/list-group.jsx

@@ -13,6 +13,7 @@ import { ListContext } from '../shared/list-context.js';
   sortableTapHold? : boolean
   sortableMoveElements? : boolean
   ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+  children?: React.ReactNode;
   COLOR_PROPS
 */
 

src/react/components/list-index.jsx

@@ -20,6 +20,7 @@ import { watchProp } from '../shared/watch-prop.js';
   COLOR_PROPS
   onListIndexSelect? : (itemContent?: any, itemIndex?: any) => void
   ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+  children?: React.ReactNode;
 */
 
 const ListIndex = forwardRef((props, ref) => {

src/react/components/list-input.jsx

@@ -78,6 +78,7 @@ import { Calendar, ColorPicker, TextEditor } from 'framework7/types';
   onChange? : (...args: any[]) => void
   onTextEditorChange? : (...args: any[]) => void
   ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+  children?: React.ReactNode;
 */
 
 const ListInput = forwardRef((props, ref) => {

src/react/components/list-item-cell.jsx

@@ -7,6 +7,7 @@ import { colorClasses } from '../shared/mixins.js';
   className?: string;
   style?: React.CSSProperties;
   ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+  children?: React.ReactNode;
   COLOR_PROPS
 */
 

src/react/components/list-item-row.jsx

@@ -7,6 +7,7 @@ import { colorClasses } from '../shared/mixins.js';
   className?: string;
   style?: React.CSSProperties;
   ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+  children?: React.ReactNode;
   COLOR_PROPS
 */
 

src/react/components/list-item.jsx

@@ -89,6 +89,7 @@ import { SmartSelect } from 'framework7/types';
   onAccordionOpened? : (...args: any[]) => void
   onChange? : (event?: any) => void
   ref?: React.MutableRefObject<{el: HTMLElement | null; f7SmartSelect: () => SmartSelect.SmartSelect}>;
+  children?: React.ReactNode;
 */
 
 /*

src/react/components/list.jsx

@@ -68,6 +68,7 @@ import { VirtualList } from 'framework7/types';
   onTabShow? : (el?: HTMLElement) => void
   onTabHide? : (el?: HTMLElement) => void
   ref?: React.MutableRefObject<{el: HTMLElement | null; f7VirtualList: () => VirtualList.VirtualList}>;
+  children?: React.ReactNode;
 */
 
 const List = forwardRef((props, ref) => {

src/react/components/login-screen-title.jsx

@@ -7,6 +7,7 @@ import { colorClasses } from '../shared/mixins.js';
   className?: string;
   style?: React.CSSProperties;
   ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+  children?: React.ReactNode;
   COLOR_PROPS
 */
 

src/react/components/login-screen.jsx

@@ -21,6 +21,7 @@ import { LoginScreen } from 'framework7/types';
   onLoginScreenClose? : (instance: LoginScreen.LoginScreen) => void
   onLoginScreenClosed? : (instance: LoginScreen.LoginScreen) => void
   ref?: React.MutableRefObject<{el: HTMLElement | null; f7LoginScreen: () => LoginScreen.LoginScreen}>;
+  children?: React.ReactNode;
   COLOR_PROPS
 */
 

src/react/components/menu-dropdown-item.jsx

@@ -23,6 +23,7 @@ import { useRouteProps } from '../shared/use-route-props.js';
   ACTIONS_PROPS
   onClick? : (event?: any) => void;
   ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+  children?: React.ReactNode;
 */
 
 const MenuDropdownItem = forwardRef((props, ref) => {

src/react/components/menu-dropdown.jsx

@@ -12,6 +12,7 @@ import { colorClasses } from '../shared/mixins.js';
   center? : boolean
   right? : boolean
   ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+  children?: React.ReactNode;
   COLOR_PROPS
 */
 

src/react/components/menu-item.jsx

@@ -33,6 +33,7 @@ import { useTooltip } from '../shared/use-tooltip.js';
   onMenuOpened? : (el?: HTMLElement) => void;
   onMenuClosed? : (el?: HTMLElement) => void;
   ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+  children?: React.ReactNode;
 */
 
 const MenuItem = forwardRef((props, ref) => {

src/react/components/menu.jsx

@@ -7,6 +7,7 @@ import { colorClasses } from '../shared/mixins.js';
   className?: string;
   style?: React.CSSProperties;
   ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+  children?: React.ReactNode;
   COLOR_PROPS
 */