framework7-react 7.0.0-beta.1 → 7.0.0-beta.10

package/components/sheet.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, getSlots } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
-import { f7ready, f7 } from '../shared/f7';
-import { watchProp } from '../shared/watch-prop';
-import { modalStateClasses } from '../shared/modal-state-classes';
+import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect.js';
+import { classNames, getExtraAttrs, emit, getSlots } 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 { modalStateClasses } from '../shared/modal-state-classes.js';
 
 
 const Sheet = /*#__PURE__*/forwardRef((props, ref) => {

package/components/skeleton-avatar.d.ts

@@ -1,3 +1,4 @@
+// eslint-disable-next-line
 import { SkeletonAvatar } from 'skeleton-elements/react';
 
 export default SkeletonAvatar;

package/components/skeleton-avatar.js

@@ -1,2 +1,3 @@
+// eslint-disable-next-line
 import { SkeletonAvatar } from 'skeleton-elements/react';
 export default SkeletonAvatar;

package/components/skeleton-block.d.ts

@@ -1,3 +1,4 @@
+// eslint-disable-next-line
 import { SkeletonBlock } from 'skeleton-elements/react';
 
 export default SkeletonBlock;

package/components/skeleton-block.js

@@ -1,2 +1,3 @@
+// eslint-disable-next-line
 import { SkeletonBlock } from 'skeleton-elements/react';
 export default SkeletonBlock;

package/components/skeleton-image.d.ts

@@ -1,3 +1,4 @@
+// eslint-disable-next-line
 import { SkeletonImage } from 'skeleton-elements/react';
 
 export default SkeletonImage;

package/components/skeleton-image.js

@@ -1,2 +1,3 @@
+// eslint-disable-next-line
 import { SkeletonImage } from 'skeleton-elements/react';
 export default SkeletonImage;

package/components/skeleton-text.d.ts

@@ -1,3 +1,4 @@
+// eslint-disable-next-line
 import { SkeletonText } from 'skeleton-elements/react';
 
 export default SkeletonText;

package/components/skeleton-text.js

@@ -1,2 +1,3 @@
+// eslint-disable-next-line
 import { SkeletonText } from 'skeleton-elements/react';
 export default SkeletonText;

package/components/stepper.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, emit, noUndefinedProps } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
-import { f7ready, f7 } from '../shared/f7';
-import { watchProp } from '../shared/watch-prop';
+import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect.js';
+import { classNames, getExtraAttrs, emit, noUndefinedProps } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
+import { f7ready, f7 } from '../shared/f7.js';
+import { watchProp } from '../shared/watch-prop.js';
 
 
 const Stepper = /*#__PURE__*/forwardRef((props, ref) => {

package/components/subnavbar.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 Subnavbar = /*#__PURE__*/forwardRef((props, ref) => {
   const {

package/components/swipeout-actions.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 SwipeoutActions = /*#__PURE__*/forwardRef((props, ref) => {
   const {

package/components/swipeout-button.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, emit } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
+import { classNames, getExtraAttrs, emit } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
 
 const SwipeoutButton = /*#__PURE__*/forwardRef((props, ref) => {
   const {

package/components/tab.js

@@ -1,13 +1,13 @@
 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, useState, useContext } from 'react';
-import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect';
-import { classNames, getExtraAttrs, getComponentId } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
-import { f7ready, f7routers, f7, f7events } from '../shared/f7';
-import { useTab } from '../shared/use-tab';
-import { RouterContext } from '../shared/router-context';
-import { useAsyncComponent } from '../shared/use-async-component';
+import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect.js';
+import { classNames, getExtraAttrs, getComponentId } 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 { RouterContext } from '../shared/router-context.js';
+import { useAsyncComponent } from '../shared/use-async-component.js';
 
 const Tab = /*#__PURE__*/forwardRef((props, ref) => {
   const {

package/components/tabs.js

@@ -1,9 +1,9 @@
 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 } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
+import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect.js';
+import { classNames, getExtraAttrs } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
 
 
 const Tabs = /*#__PURE__*/forwardRef((props, ref) => {

package/components/text-editor.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, noUndefinedProps, emit } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
-import { f7ready, f7 } from '../shared/f7';
-import { watchProp } from '../shared/watch-prop';
+import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect.js';
+import { classNames, getExtraAttrs, getSlots, noUndefinedProps, 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';
 
 
 const TextEditor = /*#__PURE__*/forwardRef((props, ref) => {

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) => {

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.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) => {

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.js

@@ -1,5 +1,5 @@
 /**
- * Framework7 React 7.0.0-beta.1
+ * Framework7 React 7.0.0-beta.10
  * Build full featured iOS & Android apps using Framework7 & React
  * https://framework7.io/react/
  *
@@ -7,108 +7,108 @@
  *
  * Released under the MIT License
  *
- * Released on: October 4, 2021
+ * Released on: October 28, 2021
  */
-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 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 { f7, f7ready, theme, useStore };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "framework7-react",
-  "version": "7.0.0-beta.1",
+  "version": "7.0.0-beta.10",
   "description": "Build full featured iOS & Android apps using Framework7 & React",
   "type": "module",
   "exports": {

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,6 +22,10 @@ const hasSameChildren = (childrenBefore, childrenAfter) => {
 
 export default {
   proto: {
+    openIn(router, navigateUrl, options) {
+      return routerOpenIn(router, navigateUrl, options);
+    },
+
     pageComponentLoader({
       routerEl,
       component,

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 = {};

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/plugin.js

@@ -1,6 +1,6 @@
 import Framework7 from 'framework7/lite';
-import componentsRouter from './components-router';
-import { f7, f7ready, theme, f7initEvents, setTheme } from './f7';
+import componentsRouter from './components-router.js';
+import { f7, f7ready, theme, f7initEvents, setTheme } from './f7.js';
 const Framework7React = {
   name: 'reactPlugin',
   installed: false,