framework7-react 7.0.2 → 7.0.5

package/components/messagebar.d.ts

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { Messagebar } from 'framework7/types';
 
 
-interface MessagebarProps {
+export interface MessagebarProps {
   slot?: string;
   id?: string | number;
   className?: string;
@@ -31,7 +31,7 @@ interface MessagebarProps {
   bgColor?: string;
   borderColor?: string;
   rippleColor?: string;
-  themeDark?: boolean;
+  dark?: boolean;
   onChange ?: (event?: any) => void;
   onInput ?: (event?: any) => void;
   onFocus ?: (event?: any) => void;
@@ -43,6 +43,7 @@ interface MessagebarProps {
   onMessagebarAttachmentClick ?: (instance?: Messagebar.Messagebar, attachmentEl?: HTMLElement, attachmentElIndex?: number) => void;
   onMessagebarResizePage ?: (instance?: Messagebar.Messagebar) => void;
   ref?: React.MutableRefObject<{el: HTMLElement | null; f7Messagebar: () => Messagebar.Messagebar}>;
+  children?: React.ReactNode;
 }
 declare const Messagebar: React.FunctionComponent<MessagebarProps>;
 

package/components/messages-title.d.ts

@@ -2,19 +2,20 @@
 import * as React from 'react';
 
 
-interface MessagesTitleProps {
+export interface MessagesTitleProps {
   slot?: string;
   id?: string | number;
   className?: string;
   style?: React.CSSProperties;
   ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+  children?: React.ReactNode;
   color?: string;
   colorTheme?: string;
   textColor?: string;
   bgColor?: string;
   borderColor?: string;
   rippleColor?: string;
-  themeDark?: boolean;
+  dark?: boolean;
 }
 declare const MessagesTitle: React.FunctionComponent<MessagesTitleProps>;
 

package/components/messages.d.ts

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { Messages } from 'framework7/types';
 
 
-interface MessagesProps {
+export interface MessagesProps {
   slot?: string;
   id?: string | number;
   className?: string;
@@ -26,13 +26,14 @@ interface MessagesProps {
   renderMessage ?: Function;
   init ?: boolean;
   ref?: React.MutableRefObject<{el: HTMLElement | null; f7Messages: () => Messages.Messages}>;
+  children?: React.ReactNode;
   color?: string;
   colorTheme?: string;
   textColor?: string;
   bgColor?: string;
   borderColor?: string;
   rippleColor?: string;
-  themeDark?: boolean;
+  dark?: boolean;
 }
 declare const Messages: React.FunctionComponent<MessagesProps>;
 

package/components/nav-left.d.ts

@@ -2,7 +2,7 @@
 import * as React from 'react';
 
 
-interface NavLeftProps {
+export interface NavLeftProps {
   slot?: string;
   id?: string | number;
   className?: string;
@@ -18,10 +18,11 @@ interface NavLeftProps {
   bgColor?: string;
   borderColor?: string;
   rippleColor?: string;
-  themeDark?: boolean;
+  dark?: boolean;
   onBackClick ?: (event?: any) => void;
   onClickBack ?: (event?: any) => void;
   ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+  children?: React.ReactNode;
 }
 declare const NavLeft: React.FunctionComponent<NavLeftProps>;
 

package/components/nav-right.d.ts

@@ -2,20 +2,21 @@
 import * as React from 'react';
 
 
-interface NavRightProps {
+export interface NavRightProps {
   slot?: string;
   id?: string | number;
   className?: string;
   style?: React.CSSProperties;
   sliding ?: boolean;
   ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+  children?: React.ReactNode;
   color?: string;
   colorTheme?: string;
   textColor?: string;
   bgColor?: string;
   borderColor?: string;
   rippleColor?: string;
-  themeDark?: boolean;
+  dark?: boolean;
 }
 declare const NavRight: React.FunctionComponent<NavRightProps>;
 

package/components/nav-title-large.d.ts

@@ -2,19 +2,20 @@
 import * as React from 'react';
 
 
-interface NavTitleLargeProps {
+export interface NavTitleLargeProps {
   slot?: string;
   id?: string | number;
   className?: string;
   style?: React.CSSProperties;
   ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+  children?: React.ReactNode;
   color?: string;
   colorTheme?: string;
   textColor?: string;
   bgColor?: string;
   borderColor?: string;
   rippleColor?: string;
-  themeDark?: boolean;
+  dark?: boolean;
 }
 declare const NavTitleLarge: React.FunctionComponent<NavTitleLargeProps>;
 

package/components/nav-title.d.ts

@@ -2,7 +2,7 @@
 import * as React from 'react';
 
 
-interface NavTitleProps {
+export interface NavTitleProps {
   slot?: string;
   id?: string | number;
   className?: string;
@@ -11,13 +11,14 @@ interface NavTitleProps {
   subtitle ?: string;
   sliding ?: boolean;
   ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+  children?: React.ReactNode;
   color?: string;
   colorTheme?: string;
   textColor?: string;
   bgColor?: string;
   borderColor?: string;
   rippleColor?: string;
-  themeDark?: boolean;
+  dark?: boolean;
 }
 declare const NavTitle: React.FunctionComponent<NavTitleProps>;
 

package/components/navbar.d.ts

@@ -2,7 +2,7 @@
 import * as React from 'react';
 
 
-interface NavbarProps {
+export interface NavbarProps {
   slot?: string;
   id?: string | number;
   className?: string;
@@ -29,7 +29,7 @@ interface NavbarProps {
   bgColor?: string;
   borderColor?: string;
   rippleColor?: string;
-  themeDark?: boolean;
+  dark?: boolean;
   onNavbarHide ?: (...args: any[]) => void;
   onNavbarShow ?: (...args: any[]) => void;
   onNavbarExpand ?: (...args: any[]) => void;
@@ -39,6 +39,7 @@ interface NavbarProps {
   onBackClick ?: (event?: any) => void;
   onClickBack ?: (event?: any) => void;
   ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+  children?: React.ReactNode;
 }
 declare const Navbar: React.FunctionComponent<NavbarProps>;
 

package/components/page-content.d.ts

@@ -2,7 +2,7 @@
 import * as React from 'react';
 
 
-interface PageContentProps {
+export interface PageContentProps {
   slot?: string;
   id?: string | number;
   className?: string;
@@ -29,7 +29,7 @@ interface PageContentProps {
   bgColor?: string;
   borderColor?: string;
   rippleColor?: string;
-  themeDark?: boolean;
+  dark?: boolean;
   onPtrPullStart ?: (...args: any[]) => void;
   onPtrPullMove ?: (...args: any[]) => void;
   onPtrPullEnd ?: (...args: any[]) => void;
@@ -39,6 +39,7 @@ interface PageContentProps {
   onTabShow ?: (el?: HTMLElement) => void;
   onTabHide ?: (el?: HTMLElement) => void;
   ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+  children?: React.ReactNode;
 }
 declare const PageContent: React.FunctionComponent<PageContentProps>;
 

package/components/page.d.ts

@@ -2,7 +2,7 @@
 import * as React from 'react';
 
 
-interface PageProps {
+export interface PageProps {
   slot?: string;
   id?: string | number;
   className?: string;
@@ -38,7 +38,7 @@ interface PageProps {
   bgColor?: string;
   borderColor?: string;
   rippleColor?: string;
-  themeDark?: boolean;
+  dark?: boolean;
   onPtrPullStart ?: (...args: any[]) => void;
   onPtrPullMove ?: (...args: any[]) => void;
   onPtrPullEnd ?: (...args: any[]) => void;
@@ -57,6 +57,7 @@ interface PageProps {
   onPageTabShow ?: (...args: any[]) => void;
   onPageTabHide ?: (...args: any[]) => void;
   ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+  children?: React.ReactNode;
 }
 declare const Page: React.FunctionComponent<PageProps>;
 

package/components/panel.d.ts

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { Panel } from 'framework7/types';
 
 
-interface PanelProps {
+export interface PanelProps {
   slot?: string;
   id?: string | number;
   className?: string;
@@ -34,7 +34,7 @@ interface PanelProps {
   bgColor?: string;
   borderColor?: string;
   rippleColor?: string;
-  themeDark?: boolean;
+  dark?: boolean;
   onPanelOpen ?: (event?: any) => void;
   onPanelOpened ?: (event?: any) => void;
   onPanelClose ?: (event?: any) => void;
@@ -46,6 +46,7 @@ interface PanelProps {
   onPanelCollapsedBreakpoint ?: (event?: any) => void;
   onPanelResize ?: (...args: any[]) => void;
   ref?: React.MutableRefObject<{el: HTMLElement | null; f7Panel: () => Panel.Panel}>;
+  children?: React.ReactNode;
 }
 declare const Panel: React.FunctionComponent<PanelProps>;
 

package/components/photo-browser.d.ts

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { PhotoBrowser } from 'framework7/types';
 
 
-interface PhotoBrowserProps {
+export interface PhotoBrowserProps {
   slot?: string;
   init ?: boolean;
   params ?: Object;
@@ -42,6 +42,7 @@ interface PhotoBrowserProps {
   onPhotoBrowserClosed ?: (...args: any[]) => void;
   onPhotoBrowserSwipeToClose ?: (...args: any[]) => void;
   ref?: React.MutableRefObject<{el: HTMLElement | null; f7PhotoBrowser: () => PhotoBrowser.PhotoBrowser; open: () => void; close: () => void;}>;
+  children?: React.ReactNode;
 }
 declare const PhotoBrowser: React.FunctionComponent<PhotoBrowserProps>;
 

package/components/pie-chart.d.ts

@@ -2,7 +2,7 @@
 import * as React from 'react';
 
 
-interface PieChartProps {
+export interface PieChartProps {
   slot?: string;
   id?: string | number;
   className?: string;
@@ -13,6 +13,7 @@ interface PieChartProps {
   formatTooltip?: (data: {index: number; value: number; label: string; color: string; percentage: number}) => void;
   onSelect ?: (index: number | null, item: {value: number; label: string; color: string}) => void;
   ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+  children?: React.ReactNode;
 }
 declare const PieChart: React.FunctionComponent<PieChartProps>;
 

package/components/popover.d.ts

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { Popover } from 'framework7/types';
 
 
-interface PopoverProps {
+export interface PopoverProps {
   slot?: string;
   id?: string | number;
   className?: string;
@@ -18,18 +18,20 @@ interface PopoverProps {
   closeByOutsideClick ?: boolean;
   closeOnEscape ?: boolean;
   containerEl ?: string | object;
+  verticalPosition?: string;
   color?: string;
   colorTheme?: string;
   textColor?: string;
   bgColor?: string;
   borderColor?: string;
   rippleColor?: string;
-  themeDark?: boolean;
+  dark?: boolean;
   onPopoverOpen ?: (instance?: Popover.Popover) => void;
   onPopoverOpened ?: (instance?: Popover.Popover) => void;
   onPopoverClose ?: (instance?: Popover.Popover) => void;
   onPopoverClosed ?: (instance?: Popover.Popover) => void;
   ref?: React.MutableRefObject<{el: HTMLElement | null; f7Popover: () => Popover.Popover}>;
+  children?: React.ReactNode;
 }
 declare const Popover: React.FunctionComponent<PopoverProps>;
 

package/components/popover.js

@@ -24,7 +24,8 @@ const Popover = /*#__PURE__*/forwardRef((props, ref) => {
     closeByBackdropClick,
     closeByOutsideClick,
     closeOnEscape,
-    containerEl
+    containerEl,
+    verticalPosition
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
@@ -87,6 +88,7 @@ const Popover = /*#__PURE__*/forwardRef((props, ref) => {
     if ('backdropEl' in props) popoverParams.backdropEl = backdropEl;
     if ('animate' in props) popoverParams.animate = animate;
     if ('containerEl' in props) popoverParams.containerEl = containerEl;
+    if ('verticalPosition' in props) popoverParams.verticalPosition = verticalPosition;
     f7ready(() => {
       f7Popover.current = f7.popover.create(popoverParams);
       modalEvents('on');

package/components/popup.d.ts

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { Popup } from 'framework7/types';
 
 
-interface PopupProps {
+export interface PopupProps {
   slot?: string;
   id?: string | number;
   className?: string;
@@ -26,7 +26,7 @@ interface PopupProps {
   bgColor?: string;
   borderColor?: string;
   rippleColor?: string;
-  themeDark?: boolean;
+  dark?: boolean;
   onPopupSwipeStart ?: (instance?: Popup.Popup) => void;
   onPopupSwipeMove ?: (instance?: Popup.Popup) => void;
   onPopupSwipeEnd ?: (instance?: Popup.Popup) => void;
@@ -36,6 +36,7 @@ interface PopupProps {
   onPopupClose ?: (instance?: Popup.Popup) => void;
   onPopupClosed ?: (instance?: Popup.Popup) => void;
   ref?: React.MutableRefObject<{el: HTMLElement | null; f7Popup: () => Popup.Popup}>;
+  children?: React.ReactNode;
 }
 declare const Popup: React.FunctionComponent<PopupProps>;
 

package/components/preloader.d.ts

@@ -2,20 +2,21 @@
 import * as React from 'react';
 
 
-interface PreloaderProps {
+export interface PreloaderProps {
   slot?: string;
   id?: string | number;
   className?: string;
   style?: React.CSSProperties;
   size ?: number | string;
   ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+  children?: React.ReactNode;
   color?: string;
   colorTheme?: string;
   textColor?: string;
   bgColor?: string;
   borderColor?: string;
   rippleColor?: string;
-  themeDark?: boolean;
+  dark?: boolean;
 }
 declare const Preloader: React.FunctionComponent<PreloaderProps>;
 

package/components/progressbar.d.ts

@@ -2,7 +2,7 @@
 import * as React from 'react';
 
 
-interface ProgressbarProps {
+export interface ProgressbarProps {
   slot?: string;
   id?: string | number;
   className?: string;
@@ -10,13 +10,14 @@ interface ProgressbarProps {
   progress ?: number;
   infinite ?: boolean;
   ref?: React.MutableRefObject<{el: HTMLElement | null; set: (progress: number, duration: number) => void}>;
+  children?: React.ReactNode;
   color?: string;
   colorTheme?: string;
   textColor?: string;
   bgColor?: string;
   borderColor?: string;
   rippleColor?: string;
-  themeDark?: boolean;
+  dark?: boolean;
 }
 declare const Progressbar: React.FunctionComponent<ProgressbarProps>;
 

package/components/radio.d.ts

@@ -2,7 +2,7 @@
 import * as React from 'react';
 
 
-interface RadioProps {
+export interface RadioProps {
   slot?: string;
   id?: string | number;
   className?: string;
@@ -19,9 +19,10 @@ interface RadioProps {
   bgColor?: string;
   borderColor?: string;
   rippleColor?: string;
-  themeDark?: boolean;
+  dark?: boolean;
   onChange ?: (event?: any) => void;
   ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+  children?: React.ReactNode;
 }
 declare const Radio: React.FunctionComponent<RadioProps>;
 

package/components/range.d.ts

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { Range } from 'framework7/types';
 
 
-interface RangeProps {
+export interface RangeProps {
   slot?: string;
   id?: string | number;
   className?: string;
@@ -35,10 +35,11 @@ interface RangeProps {
   bgColor?: string;
   borderColor?: string;
   rippleColor?: string;
-  themeDark?: boolean;
+  dark?: boolean;
   onRangeChange ?: (val?: any) => void;
   onRangeChanged ?: (val?: any) => void;
   ref?: React.MutableRefObject<{el: HTMLElement | null; f7Range: () => Range.Range}>;
+  children?: React.ReactNode;
 }
 declare const Range: React.FunctionComponent<RangeProps>;
 

package/components/routable-modals.d.ts

@@ -2,7 +2,7 @@
 import * as React from 'react';
 
 
-interface RoutableModalsProps {
+export interface RoutableModalsProps {
   slot?: string;
   
 }

package/components/row.d.ts

@@ -2,7 +2,7 @@
 import * as React from 'react';
 
 
-interface RowProps {
+export interface RowProps {
   slot?: string;
   id?: string | number;
   className?: string;
@@ -16,13 +16,14 @@ interface RowProps {
   onClick ?: (event?: any) => void;
   onGridResize ?: (...args: any[]) => void;
   ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+  children?: React.ReactNode;
   color?: string;
   colorTheme?: string;
   textColor?: string;
   bgColor?: string;
   borderColor?: string;
   rippleColor?: string;
-  themeDark?: boolean;
+  dark?: boolean;
 }
 declare const Row: React.FunctionComponent<RowProps>;
 

package/components/searchbar.d.ts

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { Searchbar } from 'framework7/types';
 
 
-interface SearchbarProps {
+export interface SearchbarProps {
   slot?: string;
   id?: string | number;
   className?: string;
@@ -43,7 +43,7 @@ interface SearchbarProps {
   bgColor?: string;
   borderColor?: string;
   rippleColor?: string;
-  themeDark?: boolean;
+  dark?: boolean;
   onSearchbarSearch ?: (searchbar?: Searchbar.Searchbar, query?: any, previousQuery?: any) => void;
   onSearchbarClear ?: (searchbar?: Searchbar.Searchbar, previousQuery?: any) => void;
   onSearchbarEnable ?: (searchbar?: Searchbar.Searchbar) => void;
@@ -56,6 +56,7 @@ interface SearchbarProps {
   onClickClear ?: (event?: any) => void;
   onClickDisable ?: (event?: any) => void;
   ref?: React.MutableRefObject<{el: HTMLElement | null; f7Searchbar: () => Searchbar.Searchbar;}>;
+  children?: React.ReactNode;
 }
 declare const Searchbar: React.FunctionComponent<SearchbarProps>;
 

package/components/segmented.d.ts

@@ -2,7 +2,7 @@
 import * as React from 'react';
 
 
-interface SegmentedProps {
+export interface SegmentedProps {
   slot?: string;
   id?: string | number;
   className?: string;
@@ -21,13 +21,14 @@ interface SegmentedProps {
   strongAurora ?: boolean;
   tag ?: string;
   ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+  children?: React.ReactNode;
   color?: string;
   colorTheme?: string;
   textColor?: string;
   bgColor?: string;
   borderColor?: string;
   rippleColor?: string;
-  themeDark?: boolean;
+  dark?: boolean;
 }
 declare const Segmented: React.FunctionComponent<SegmentedProps>;
 

package/components/sheet.d.ts

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { Sheet } from 'framework7/types';
 
 
-interface SheetProps {
+export interface SheetProps {
   slot?: string;
   id?: string | number;
   className?: string;
@@ -30,7 +30,7 @@ interface SheetProps {
   bgColor?: string;
   borderColor?: string;
   rippleColor?: string;
-  themeDark?: boolean;
+  dark?: boolean;
   onSheetStepProgress ?: (instance?: Sheet.Sheet, progress?: any) => void;
   onSheetStepOpen ?: (instance?: Sheet.Sheet) => void;
   onSheetStepClose ?: (instance?: Sheet.Sheet) => void;
@@ -39,6 +39,7 @@ interface SheetProps {
   onSheetClose ?: (instance?: Sheet.Sheet) => void;
   onSheetClosed ?: (instance?: Sheet.Sheet) => void;
   ref?: React.MutableRefObject<{el: HTMLElement | null; f7Sheet: () => Sheet.Sheet;}>;
+  children?: React.ReactNode;
 }
 declare const Sheet: React.FunctionComponent<SheetProps>;
 

package/components/stepper.d.ts

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { Stepper } from 'framework7/types';
 
 
-interface StepperProps {
+export interface StepperProps {
   slot?: string;
   id?: string | number;
   className?: string;
@@ -54,13 +54,14 @@ interface StepperProps {
   bgColor?: string;
   borderColor?: string;
   rippleColor?: string;
-  themeDark?: boolean;
+  dark?: boolean;
   onStepperChange ?: (newValue?: any) => void;
   onInput ?: (event?: any, stepper?: Stepper.Stepper) => void;
   onChange ?: (event?: any, stepper?: Stepper.Stepper) => void;
   onStepperMinusClick ?: (event?: any, stepper?: Stepper.Stepper) => void;
   onStepperPlusClick ?: (event?: any, stepper?: Stepper.Stepper) => void;
   ref?: React.MutableRefObject<{el: HTMLElement | null; f7Stepper: () => Stepper.Stepper;}>;
+  children?: React.ReactNode;
 }
 declare const Stepper: React.FunctionComponent<StepperProps>;
 

package/components/subnavbar.d.ts

@@ -2,7 +2,7 @@
 import * as React from 'react';
 
 
-interface SubnavbarProps {
+export interface SubnavbarProps {
   slot?: string;
   id?: string | number;
   className?: string;
@@ -11,13 +11,14 @@ interface SubnavbarProps {
   title ?: string;
   inner ?: boolean;
   ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+  children?: React.ReactNode;
   color?: string;
   colorTheme?: string;
   textColor?: string;
   bgColor?: string;
   borderColor?: string;
   rippleColor?: string;
-  themeDark?: boolean;
+  dark?: boolean;
 }
 declare const Subnavbar: React.FunctionComponent<SubnavbarProps>;
 

package/components/swipeout-actions.d.ts

@@ -2,7 +2,7 @@
 import * as React from 'react';
 
 
-interface SwipeoutActionsProps {
+export interface SwipeoutActionsProps {
   slot?: string;
   id?: string | number;
   className?: string;
@@ -11,13 +11,14 @@ interface SwipeoutActionsProps {
   right ?: boolean;
   side ?: string;
   ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+  children?: React.ReactNode;
   color?: string;
   colorTheme?: string;
   textColor?: string;
   bgColor?: string;
   borderColor?: string;
   rippleColor?: string;
-  themeDark?: boolean;
+  dark?: boolean;
 }
 declare const SwipeoutActions: React.FunctionComponent<SwipeoutActionsProps>;