framework7-react 7.0.0-beta.2 → 7.0.0-beta.20

package/components/toggle.js

@@ -1,12 +1,12 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
-import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect';
-import { classNames, getExtraAttrs, emit } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
-import { f7ready, f7 } from '../shared/f7';
-import { watchProp } from '../shared/watch-prop';
-import { useTooltip } from '../shared/use-tooltip';
+import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect.js';
+import { classNames, getExtraAttrs, emit } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
+import { f7ready, f7 } from '../shared/f7.js';
+import { watchProp } from '../shared/watch-prop.js';
+import { useTooltip } from '../shared/use-tooltip.js';
 
 
 const Toggle = /*#__PURE__*/forwardRef((props, ref) => {
@@ -25,6 +25,7 @@ const Toggle = /*#__PURE__*/forwardRef((props, ref) => {
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
+  const inputElRef = useRef(null);
 
   const onChange = event => {
     emit(props, 'change', event);
@@ -69,8 +70,17 @@ const Toggle = /*#__PURE__*/forwardRef((props, ref) => {
 
   useIsomorphicLayoutEffect(() => {
     toggleEvents('on');
+
+    if (inputElRef.current) {
+      inputElRef.current.addEventListener('change', onChange);
+    }
+
     return () => {
       toggleEvents('off');
+
+      if (inputElRef.current) {
+        inputElRef.current.removeEventListener('change', onChange);
+      }
     };
   });
   useIsomorphicLayoutEffect(() => {
@@ -81,6 +91,7 @@ const Toggle = /*#__PURE__*/forwardRef((props, ref) => {
     disabled
   }, colorClasses(props));
   const inputEl = /*#__PURE__*/React.createElement("input", {
+    ref: inputElRef,
     type: "checkbox",
     name: name,
     disabled: disabled,
@@ -88,7 +99,7 @@ const Toggle = /*#__PURE__*/forwardRef((props, ref) => {
     checked: checked,
     defaultChecked: defaultChecked,
     value: value,
-    onChange: onChange
+    onChange: () => {}
   });
   return /*#__PURE__*/React.createElement("label", _extends({
     id: id,

package/components/toolbar.js

@@ -1,12 +1,12 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
-import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect';
-import { classNames, getExtraAttrs, getSlots, emit } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
-import { useTheme } from '../shared/use-theme';
-import { f7ready, f7 } from '../shared/f7';
-import { TabbarContext } from '../shared/tabbar-context';
+import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect.js';
+import { classNames, getExtraAttrs, getSlots, emit } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
+import { useTheme } from '../shared/use-theme.js';
+import { f7ready, f7 } from '../shared/f7.js';
+import { TabbarContext } from '../shared/tabbar-context.js';
 
 const Toolbar = /*#__PURE__*/forwardRef((props, ref) => {
   const {

package/components/treeview-item.js

@@ -1,11 +1,11 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
-import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect';
-import { classNames, getExtraAttrs, getSlots, emit } from '../shared/utils';
-import { colorClasses, actionsAttrs, actionsClasses, routerAttrs, routerClasses } from '../shared/mixins';
-import { useIcon } from '../shared/use-icon';
-import { f7ready, f7 } from '../shared/f7';
+import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect.js';
+import { classNames, getExtraAttrs, getSlots, emit } from '../shared/utils.js';
+import { colorClasses, actionsAttrs, actionsClasses, routerAttrs, routerClasses } from '../shared/mixins.js';
+import { useIcon } from '../shared/use-icon.js';
+import { f7ready, f7 } from '../shared/f7.js';
 
 const TreeviewItem = /*#__PURE__*/forwardRef((props, ref) => {
   const {

package/components/treeview.js

@@ -1,8 +1,8 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
-import { classNames, getExtraAttrs } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
+import { classNames, getExtraAttrs } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
 
 const Treeview = /*#__PURE__*/forwardRef((props, ref) => {
   const {

package/components/view.d.ts

@@ -9,6 +9,7 @@ interface ViewProps {
   id?: string | number;
   className?: string;
   style?: React.CSSProperties;
+  initRouterOnTabShow?: boolean;
   tab ?: boolean;
   tabActive ?: boolean;
   name ?: string;

package/components/view.js

@@ -2,14 +2,14 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 /* eslint-disable no-nested-ternary */
 import React, { forwardRef, useRef, useImperativeHandle, useState } from 'react';
-import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect';
-import { classNames, getExtraAttrs, noUndefinedProps, emit, getRouterId } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
-import { f7ready, f7routers, f7, f7events } from '../shared/f7';
-import { useTab } from '../shared/use-tab';
-import { useAsyncComponent } from '../shared/use-async-component';
-import { getRouterInitialComponent } from '../shared/get-router-initial-component';
-import { RouterContext } from '../shared/router-context';
+import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect.js';
+import { classNames, getExtraAttrs, noUndefinedProps, emit, getRouterId } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
+import { f7ready, f7routers, f7, f7events } from '../shared/f7.js';
+import { useTab } from '../shared/use-tab.js';
+import { useAsyncComponent } from '../shared/use-async-component.js';
+import { getRouterInitialComponent } from '../shared/get-router-initial-component.js';
+import { RouterContext } from '../shared/router-context.js';
 
 
 const View = /*#__PURE__*/forwardRef((props, ref) => {
@@ -23,11 +23,13 @@ const View = /*#__PURE__*/forwardRef((props, ref) => {
     tab,
     tabActive,
     url,
+    initRouterOnTabShow,
     browserHistoryInitialMatch = true
   } = props;
   const childrenArray = React.Children.toArray(children);
   const initialPageComponent = childrenArray.filter(c => c.props && c.props.initialPage)[0];
   const restChildren = childrenArray.filter(c => !c.props || !c.props.initialPage);
+  const shouldInitRouter = !(initRouterOnTabShow && tab && !tabActive);
   const extraAttrs = getExtraAttrs(props);
   const f7View = useRef(null);
   const elRef = useRef(null);
@@ -61,7 +63,7 @@ const View = /*#__PURE__*/forwardRef((props, ref) => {
     };
     f7routers.views.push(routerData.current);
 
-    if (f7View.current && f7View.current.router && (url || main)) {
+    if (shouldInitRouter && f7View.current && f7View.current.router && (url || main)) {
       const initialData = getRouterInitialComponent(f7View.current.router, initialPageComponent);
       initialPage = initialData.initialPage;
       initialRoute = initialData.initialRoute;
@@ -219,20 +221,23 @@ const View = /*#__PURE__*/forwardRef((props, ref) => {
     style: style,
     className: classes,
     ref: elRef
-  }, extraAttrs), restChildren, pages.map(({
-    component: PageComponent,
-    id: pageId,
-    props: pageProps,
-    isAsync,
-    initialComponent
-  }) => /*#__PURE__*/React.createElement(RouterContext.Provider, {
-    key: pageId,
-    value: {
-      router: pageProps.f7router,
-      route: pageProps.f7route
-    }
-  }, initialComponent ? /*#__PURE__*/React.cloneElement(initialComponent, { ...pageProps
-  }) : isAsync ? useAsyncComponent(PageComponent, pageProps) : /*#__PURE__*/React.createElement(PageComponent, pageProps))));
+  }, extraAttrs), restChildren, pages.map(_ref => {
+    let {
+      component: PageComponent,
+      id: pageId,
+      props: pageProps,
+      isAsync,
+      initialComponent
+    } = _ref;
+    return /*#__PURE__*/React.createElement(RouterContext.Provider, {
+      key: pageId,
+      value: {
+        router: pageProps.f7router,
+        route: pageProps.f7route
+      }
+    }, initialComponent ? /*#__PURE__*/React.cloneElement(initialComponent, { ...pageProps
+    }) : isAsync ? useAsyncComponent(PageComponent, pageProps) : /*#__PURE__*/React.createElement(PageComponent, pageProps));
+  }));
 });
 View.displayName = 'f7-view';
 export default View;

package/components/views.js

@@ -1,8 +1,8 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
-import { classNames, getExtraAttrs } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
+import { classNames, getExtraAttrs } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
 
 const Views = /*#__PURE__*/forwardRef((props, ref) => {
   const {

package/framework7-react.d.ts

@@ -17,6 +17,10 @@ import BlockFooter from './components/block-footer';
 import BlockHeader from './components/block-header';
 import BlockTitle from './components/block-title';
 import Block from './components/block';
+import BreadcrumbsCollapsed from './components/breadcrumbs-collapsed';
+import BreadcrumbsItem from './components/breadcrumbs-item';
+import BreadcrumbsSeparator from './components/breadcrumbs-separator';
+import Breadcrumbs from './components/breadcrumbs';
 import Button from './components/button';
 import CardContent from './components/card-content';
 import CardFooter from './components/card-footer';
@@ -122,6 +126,6 @@ declare const useStore: useStore;
 
 declare const Framework7React: Framework7Plugin;
 
-export { AccordionContent, AccordionItem, AccordionToggle, Accordion, ActionsButton, ActionsGroup, ActionsLabel, Actions, App, Appbar, AreaChart, Badge, BlockFooter, BlockHeader, BlockTitle, Block, Button, CardContent, CardFooter, CardHeader, Card, Checkbox, Chip, Col, FabBackdrop, FabButton, FabButtons, Fab, Gauge, Icon, Input, Link, ListButton, ListGroup, ListIndex, ListInput, ListItemCell, ListItemContent, ListItemRow, ListItem, List, LoginScreenTitle, LoginScreen, MenuDropdownItem, MenuDropdown, MenuItem, Menu, Message, MessagebarAttachment, MessagebarAttachments, MessagebarSheetImage, MessagebarSheetItem, MessagebarSheet, Messagebar, MessagesTitle, Messages, NavLeft, NavRight, NavTitleLarge, NavTitle, Navbar, PageContent, Page, Panel, PhotoBrowser, PieChart, Popover, Popup, Preloader, Progressbar, Radio, Range, RoutableModals, Row, Searchbar, Segmented, Sheet, SkeletonAvatar, SkeletonBlock, SkeletonImage, SkeletonText, Stepper, Subnavbar, SwipeoutActions, SwipeoutButton, SwiperSlide, Swiper, Tab, Tabs, TextEditor, Toggle, Toolbar, TreeviewItem, Treeview, View, Views }
+export { AccordionContent, AccordionItem, AccordionToggle, Accordion, ActionsButton, ActionsGroup, ActionsLabel, Actions, App, Appbar, AreaChart, Badge, BlockFooter, BlockHeader, BlockTitle, Block, BreadcrumbsCollapsed, BreadcrumbsItem, BreadcrumbsSeparator, Breadcrumbs, Button, CardContent, CardFooter, CardHeader, Card, Checkbox, Chip, Col, FabBackdrop, FabButton, FabButtons, Fab, Gauge, Icon, Input, Link, ListButton, ListGroup, ListIndex, ListInput, ListItemCell, ListItemContent, ListItemRow, ListItem, List, LoginScreenTitle, LoginScreen, MenuDropdownItem, MenuDropdown, MenuItem, Menu, Message, MessagebarAttachment, MessagebarAttachments, MessagebarSheetImage, MessagebarSheetItem, MessagebarSheet, Messagebar, MessagesTitle, Messages, NavLeft, NavRight, NavTitleLarge, NavTitle, Navbar, PageContent, Page, Panel, PhotoBrowser, PieChart, Popover, Popup, Preloader, Progressbar, Radio, Range, RoutableModals, Row, Searchbar, Segmented, Sheet, SkeletonAvatar, SkeletonBlock, SkeletonImage, SkeletonText, Stepper, Subnavbar, SwipeoutActions, SwipeoutButton, SwiperSlide, Swiper, Tab, Tabs, TextEditor, Toggle, Toolbar, TreeviewItem, Treeview, View, Views }
 export { f7, f7ready, theme, useStore };
 export default Framework7React;

package/framework7-react.js

@@ -1,115 +1,119 @@
 /**
- * Framework7 React 7.0.0-beta.2
+ * Framework7 React 7.0.0-beta.20
  * Build full featured iOS & Android apps using Framework7 & React
  * https://framework7.io/react/
  *
- * Copyright 2014-2021 Vladimir Kharlampidi
+ * Copyright 2014-2022 Vladimir Kharlampidi
  *
  * Released under the MIT License
  *
- * Released on: October 4, 2021
+ * Released on: April 15, 2022
  */
-import Framework7React from './shared/plugin';
-import { f7, f7ready, theme } from './shared/f7';
-import { useStore } from './shared/use-store';
+import Framework7React from './shared/plugin.js';
+import { f7, f7ready, theme } from './shared/f7.js';
+import { useStore } from './shared/use-store.js';
 
-import AccordionContent from './components/accordion-content';
-import AccordionItem from './components/accordion-item';
-import AccordionToggle from './components/accordion-toggle';
-import Accordion from './components/accordion';
-import ActionsButton from './components/actions-button';
-import ActionsGroup from './components/actions-group';
-import ActionsLabel from './components/actions-label';
-import Actions from './components/actions';
-import App from './components/app';
-import Appbar from './components/appbar';
-import AreaChart from './components/area-chart';
-import Badge from './components/badge';
-import BlockFooter from './components/block-footer';
-import BlockHeader from './components/block-header';
-import BlockTitle from './components/block-title';
-import Block from './components/block';
-import Button from './components/button';
-import CardContent from './components/card-content';
-import CardFooter from './components/card-footer';
-import CardHeader from './components/card-header';
-import Card from './components/card';
-import Checkbox from './components/checkbox';
-import Chip from './components/chip';
-import Col from './components/col';
-import FabBackdrop from './components/fab-backdrop';
-import FabButton from './components/fab-button';
-import FabButtons from './components/fab-buttons';
-import Fab from './components/fab';
-import Gauge from './components/gauge';
-import Icon from './components/icon';
-import Input from './components/input';
-import Link from './components/link';
-import ListButton from './components/list-button';
-import ListGroup from './components/list-group';
-import ListIndex from './components/list-index';
-import ListInput from './components/list-input';
-import ListItemCell from './components/list-item-cell';
-import ListItemContent from './components/list-item-content';
-import ListItemRow from './components/list-item-row';
-import ListItem from './components/list-item';
-import List from './components/list';
-import LoginScreenTitle from './components/login-screen-title';
-import LoginScreen from './components/login-screen';
-import MenuDropdownItem from './components/menu-dropdown-item';
-import MenuDropdown from './components/menu-dropdown';
-import MenuItem from './components/menu-item';
-import Menu from './components/menu';
-import Message from './components/message';
-import MessagebarAttachment from './components/messagebar-attachment';
-import MessagebarAttachments from './components/messagebar-attachments';
-import MessagebarSheetImage from './components/messagebar-sheet-image';
-import MessagebarSheetItem from './components/messagebar-sheet-item';
-import MessagebarSheet from './components/messagebar-sheet';
-import Messagebar from './components/messagebar';
-import MessagesTitle from './components/messages-title';
-import Messages from './components/messages';
-import NavLeft from './components/nav-left';
-import NavRight from './components/nav-right';
-import NavTitleLarge from './components/nav-title-large';
-import NavTitle from './components/nav-title';
-import Navbar from './components/navbar';
-import PageContent from './components/page-content';
-import Page from './components/page';
-import Panel from './components/panel';
-import PhotoBrowser from './components/photo-browser';
-import PieChart from './components/pie-chart';
-import Popover from './components/popover';
-import Popup from './components/popup';
-import Preloader from './components/preloader';
-import Progressbar from './components/progressbar';
-import Radio from './components/radio';
-import Range from './components/range';
-import RoutableModals from './components/routable-modals';
-import Row from './components/row';
-import Searchbar from './components/searchbar';
-import Segmented from './components/segmented';
-import Sheet from './components/sheet';
-import SkeletonAvatar from './components/skeleton-avatar';
-import SkeletonBlock from './components/skeleton-block';
-import SkeletonImage from './components/skeleton-image';
-import SkeletonText from './components/skeleton-text';
-import Stepper from './components/stepper';
-import Subnavbar from './components/subnavbar';
-import SwipeoutActions from './components/swipeout-actions';
-import SwipeoutButton from './components/swipeout-button';
-import SwiperSlide from './components/swiper-slide';
-import Swiper from './components/swiper';
-import Tab from './components/tab';
-import Tabs from './components/tabs';
-import TextEditor from './components/text-editor';
-import Toggle from './components/toggle';
-import Toolbar from './components/toolbar';
-import TreeviewItem from './components/treeview-item';
-import Treeview from './components/treeview';
-import View from './components/view';
-import Views from './components/views';
+import AccordionContent from './components/accordion-content.js';
+import AccordionItem from './components/accordion-item.js';
+import AccordionToggle from './components/accordion-toggle.js';
+import Accordion from './components/accordion.js';
+import ActionsButton from './components/actions-button.js';
+import ActionsGroup from './components/actions-group.js';
+import ActionsLabel from './components/actions-label.js';
+import Actions from './components/actions.js';
+import App from './components/app.js';
+import Appbar from './components/appbar.js';
+import AreaChart from './components/area-chart.js';
+import Badge from './components/badge.js';
+import BlockFooter from './components/block-footer.js';
+import BlockHeader from './components/block-header.js';
+import BlockTitle from './components/block-title.js';
+import Block from './components/block.js';
+import BreadcrumbsCollapsed from './components/breadcrumbs-collapsed.js';
+import BreadcrumbsItem from './components/breadcrumbs-item.js';
+import BreadcrumbsSeparator from './components/breadcrumbs-separator.js';
+import Breadcrumbs from './components/breadcrumbs.js';
+import Button from './components/button.js';
+import CardContent from './components/card-content.js';
+import CardFooter from './components/card-footer.js';
+import CardHeader from './components/card-header.js';
+import Card from './components/card.js';
+import Checkbox from './components/checkbox.js';
+import Chip from './components/chip.js';
+import Col from './components/col.js';
+import FabBackdrop from './components/fab-backdrop.js';
+import FabButton from './components/fab-button.js';
+import FabButtons from './components/fab-buttons.js';
+import Fab from './components/fab.js';
+import Gauge from './components/gauge.js';
+import Icon from './components/icon.js';
+import Input from './components/input.js';
+import Link from './components/link.js';
+import ListButton from './components/list-button.js';
+import ListGroup from './components/list-group.js';
+import ListIndex from './components/list-index.js';
+import ListInput from './components/list-input.js';
+import ListItemCell from './components/list-item-cell.js';
+import ListItemContent from './components/list-item-content.js';
+import ListItemRow from './components/list-item-row.js';
+import ListItem from './components/list-item.js';
+import List from './components/list.js';
+import LoginScreenTitle from './components/login-screen-title.js';
+import LoginScreen from './components/login-screen.js';
+import MenuDropdownItem from './components/menu-dropdown-item.js';
+import MenuDropdown from './components/menu-dropdown.js';
+import MenuItem from './components/menu-item.js';
+import Menu from './components/menu.js';
+import Message from './components/message.js';
+import MessagebarAttachment from './components/messagebar-attachment.js';
+import MessagebarAttachments from './components/messagebar-attachments.js';
+import MessagebarSheetImage from './components/messagebar-sheet-image.js';
+import MessagebarSheetItem from './components/messagebar-sheet-item.js';
+import MessagebarSheet from './components/messagebar-sheet.js';
+import Messagebar from './components/messagebar.js';
+import MessagesTitle from './components/messages-title.js';
+import Messages from './components/messages.js';
+import NavLeft from './components/nav-left.js';
+import NavRight from './components/nav-right.js';
+import NavTitleLarge from './components/nav-title-large.js';
+import NavTitle from './components/nav-title.js';
+import Navbar from './components/navbar.js';
+import PageContent from './components/page-content.js';
+import Page from './components/page.js';
+import Panel from './components/panel.js';
+import PhotoBrowser from './components/photo-browser.js';
+import PieChart from './components/pie-chart.js';
+import Popover from './components/popover.js';
+import Popup from './components/popup.js';
+import Preloader from './components/preloader.js';
+import Progressbar from './components/progressbar.js';
+import Radio from './components/radio.js';
+import Range from './components/range.js';
+import RoutableModals from './components/routable-modals.js';
+import Row from './components/row.js';
+import Searchbar from './components/searchbar.js';
+import Segmented from './components/segmented.js';
+import Sheet from './components/sheet.js';
+import SkeletonAvatar from './components/skeleton-avatar.js';
+import SkeletonBlock from './components/skeleton-block.js';
+import SkeletonImage from './components/skeleton-image.js';
+import SkeletonText from './components/skeleton-text.js';
+import Stepper from './components/stepper.js';
+import Subnavbar from './components/subnavbar.js';
+import SwipeoutActions from './components/swipeout-actions.js';
+import SwipeoutButton from './components/swipeout-button.js';
+import SwiperSlide from './components/swiper-slide.js';
+import Swiper from './components/swiper.js';
+import Tab from './components/tab.js';
+import Tabs from './components/tabs.js';
+import TextEditor from './components/text-editor.js';
+import Toggle from './components/toggle.js';
+import Toolbar from './components/toolbar.js';
+import TreeviewItem from './components/treeview-item.js';
+import Treeview from './components/treeview.js';
+import View from './components/view.js';
+import Views from './components/views.js';
 
-export { AccordionContent, AccordionItem, AccordionToggle, Accordion, ActionsButton, ActionsGroup, ActionsLabel, Actions, App, Appbar, AreaChart, Badge, BlockFooter, BlockHeader, BlockTitle, Block, Button, CardContent, CardFooter, CardHeader, Card, Checkbox, Chip, Col, FabBackdrop, FabButton, FabButtons, Fab, Gauge, Icon, Input, Link, ListButton, ListGroup, ListIndex, ListInput, ListItemCell, ListItemContent, ListItemRow, ListItem, List, LoginScreenTitle, LoginScreen, MenuDropdownItem, MenuDropdown, MenuItem, Menu, Message, MessagebarAttachment, MessagebarAttachments, MessagebarSheetImage, MessagebarSheetItem, MessagebarSheet, Messagebar, MessagesTitle, Messages, NavLeft, NavRight, NavTitleLarge, NavTitle, Navbar, PageContent, Page, Panel, PhotoBrowser, PieChart, Popover, Popup, Preloader, Progressbar, Radio, Range, RoutableModals, Row, Searchbar, Segmented, Sheet, SkeletonAvatar, SkeletonBlock, SkeletonImage, SkeletonText, Stepper, Subnavbar, SwipeoutActions, SwipeoutButton, SwiperSlide, Swiper, Tab, Tabs, TextEditor, Toggle, Toolbar, TreeviewItem, Treeview, View, Views }
+export { AccordionContent, AccordionItem, AccordionToggle, Accordion, ActionsButton, ActionsGroup, ActionsLabel, Actions, App, Appbar, AreaChart, Badge, BlockFooter, BlockHeader, BlockTitle, Block, BreadcrumbsCollapsed, BreadcrumbsItem, BreadcrumbsSeparator, Breadcrumbs, Button, CardContent, CardFooter, CardHeader, Card, Checkbox, Chip, Col, FabBackdrop, FabButton, FabButtons, Fab, Gauge, Icon, Input, Link, ListButton, ListGroup, ListIndex, ListInput, ListItemCell, ListItemContent, ListItemRow, ListItem, List, LoginScreenTitle, LoginScreen, MenuDropdownItem, MenuDropdown, MenuItem, Menu, Message, MessagebarAttachment, MessagebarAttachments, MessagebarSheetImage, MessagebarSheetItem, MessagebarSheet, Messagebar, MessagesTitle, Messages, NavLeft, NavRight, NavTitleLarge, NavTitle, Navbar, PageContent, Page, Panel, PhotoBrowser, PieChart, Popover, Popup, Preloader, Progressbar, Radio, Range, RoutableModals, Row, Searchbar, Segmented, Sheet, SkeletonAvatar, SkeletonBlock, SkeletonImage, SkeletonText, Stepper, Subnavbar, SwipeoutActions, SwipeoutButton, SwiperSlide, Swiper, Tab, Tabs, TextEditor, Toggle, Toolbar, TreeviewItem, Treeview, View, Views }
 export { f7, f7ready, theme, useStore };
 export default Framework7React;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "framework7-react",
-  "version": "7.0.0-beta.2",
+  "version": "7.0.0-beta.20",
   "description": "Build full featured iOS & Android apps using Framework7 & React",
   "type": "module",
   "exports": {
@@ -25,6 +25,7 @@
     "ipad",
     "apple",
     "phonegap",
+    "capacitor",
     "native",
     "touch",
     "appstore",

package/shared/components-router.js

@@ -1,6 +1,7 @@
 /* eslint no-underscore-dangle: "off" */
-import { f7events, f7routers } from './f7';
-import { extend, getComponentId } from './utils';
+import { f7events, f7routers } from './f7.js';
+import { extend, getComponentId } from './utils.js';
+import { routerOpenIn } from './router-open-in.js';
 
 const getChildrenArray = el => {
   const arr = [];
@@ -21,13 +22,18 @@ const hasSameChildren = (childrenBefore, childrenAfter) => {
 
 export default {
   proto: {
-    pageComponentLoader({
-      routerEl,
-      component,
-      options,
-      resolve,
-      reject
-    }) {
+    openIn(router, navigateUrl, options) {
+      return routerOpenIn(router, navigateUrl, options);
+    },
+
+    pageComponentLoader(_ref) {
+      let {
+        routerEl,
+        component,
+        options,
+        resolve,
+        reject
+      } = _ref;
       const router = this;
       const routerId = router.id;
       const el = routerEl;
@@ -112,13 +118,14 @@ export default {
       }
     },
 
-    tabComponentLoader({
-      tabEl,
-      component,
-      options,
-      resolve,
-      reject
-    } = {}) {
+    tabComponentLoader(_temp) {
+      let {
+        tabEl,
+        component,
+        options,
+        resolve,
+        reject
+      } = _temp === void 0 ? {} : _temp;
       const router = this;
       if (!tabEl) reject();
       let tabRouter;
@@ -174,12 +181,13 @@ export default {
       tabRouter.setTabContent(null);
     },
 
-    modalComponentLoader({
-      component,
-      options,
-      resolve,
-      reject
-    } = {}) {
+    modalComponentLoader(_temp2) {
+      let {
+        component,
+        options,
+        resolve,
+        reject
+      } = _temp2 === void 0 ? {} : _temp2;
       const router = this;
       const modalsRouter = f7routers.modals;
 

package/shared/f7.js

@@ -1,6 +1,6 @@
 /* eslint-disable import/no-mutable-exports */
 import Framework7 from 'framework7/lite';
-import { extend, unsetRouterIds } from './utils';
+import { extend, unsetRouterIds } from './utils.js';
 let f7;
 let f7events;
 const theme = {};
@@ -31,7 +31,15 @@ const f7initEvents = () => {
   f7events = new Framework7.Events();
 };
 
-const f7init = (rootEl, params = {}, init = true) => {
+const f7init = function (rootEl, params, init) {
+  if (params === void 0) {
+    params = {};
+  }
+
+  if (init === void 0) {
+    init = true;
+  }
+
   const f7Params = extend({}, params, {
     el: rootEl,
     init

package/shared/get-router-initial-component.js

@@ -1,4 +1,4 @@
-import { getComponentId } from './utils';
+import { getComponentId } from './utils.js';
 export const getRouterInitialComponent = (router, initialComponent) => {
   let initialComponentData;
   const {

package/shared/mixins.js

@@ -1,4 +1,4 @@
-import { isStringProp } from './utils';
+import { isStringProp } from './utils.js';
 export function colorClasses(props) {
   const {
     color,
@@ -7,10 +7,10 @@ export function colorClasses(props) {
     bgColor,
     borderColor,
     rippleColor,
-    themeDark
+    dark
   } = props;
   return {
-    'theme-dark': themeDark,
+    dark,
     [`color-${color}`]: color,
     [`color-theme-${colorTheme}`]: colorTheme,
     [`text-color-${textColor}`]: textColor,

package/shared/modal-state-classes.js

@@ -1,7 +1,8 @@
-export const modalStateClasses = ({
-  isOpened,
-  isClosing
-} = {}) => {
+export const modalStateClasses = function (_temp) {
+  let {
+    isOpened,
+    isClosing
+  } = _temp === void 0 ? {} : _temp;
   return {
     'modal-in': isOpened.current && !isClosing.current,
     'modal-out': isClosing.current