framework7-react 7.0.0-beta.8 → 7.0.2

package/components/actions.d.ts

@@ -25,7 +25,7 @@ interface ActionsProps {
   onActionsClose ?: (instance?: Actions.Actions) => void;
   onActionsClosed ?: (instance?: Actions.Actions) => void;
   containerEl ?: string | object;
-  ref?: React.MutableRefObject<{el: HTMLElement | null; f7Actions: () => Actions}>;
+  ref?: React.MutableRefObject<{el: HTMLElement | null; f7Actions: () => Actions.Actions}>;
   color?: string;
   colorTheme?: string;
   textColor?: string;

package/components/area-chart.js

@@ -48,9 +48,10 @@ const AreaChart = /*#__PURE__*/forwardRef((props, ref) => {
 
   const getSummValues = () => {
     const summValues = [];
-    datasets.filter((dataset, index) => !hiddenDatasets.includes(index)).forEach(({
-      values
-    }) => {
+    datasets.filter((dataset, index) => !hiddenDatasets.includes(index)).forEach(_ref => {
+      let {
+        values
+      } = _ref;
       values.forEach((value, valueIndex) => {
         if (!summValues[valueIndex]) summValues[valueIndex] = 0;
         summValues[valueIndex] += value;
@@ -70,9 +71,10 @@ const AreaChart = /*#__PURE__*/forwardRef((props, ref) => {
     let maxValue = 0;
 
     if (lineChart) {
-      datasets.forEach(({
-        values
-      }) => {
+      datasets.forEach(_ref2 => {
+        let {
+          values
+        } = _ref2;
         const datasetMaxValue = Math.max(...values);
         if (datasetMaxValue > maxValue) maxValue = datasetMaxValue;
       });
@@ -80,11 +82,12 @@ const AreaChart = /*#__PURE__*/forwardRef((props, ref) => {
       maxValue = Math.max(...getSummValues());
     }
 
-    datasets.filter((dataset, index) => !hiddenDatasets.includes(index)).forEach(({
-      label,
-      values,
-      color
-    }) => {
+    datasets.filter((dataset, index) => !hiddenDatasets.includes(index)).forEach(_ref3 => {
+      let {
+        label,
+        values,
+        color
+      } = _ref3;
       const points = values.map((originalValue, valueIndex) => {
         lastValues[valueIndex] += originalValue;
         const value = lineChart ? originalValue : lastValues[valueIndex];
@@ -183,11 +186,12 @@ const AreaChart = /*#__PURE__*/forwardRef((props, ref) => {
 
     const datasetsText = currentValues.length > 0 ? `
       <ul class="area-chart-tooltip-list">
-        ${currentValues.map(({
-      label,
-      color,
-      value
-    }) => {
+        ${currentValues.map(_ref4 => {
+      let {
+        label,
+        color,
+        value
+      } = _ref4;
       const valueText = formatTooltipDataset ? formatTooltipDataset(label, value, color) : `${label}: ${value}`;
       return `
               <li><span style="background-color: ${color};"></span>${valueText}</li>

package/components/breadcrumbs-collapsed.d.ts

@@ -0,0 +1,16 @@
+
+import * as React from 'react';
+
+
+interface BreadcrumbsCollapsedProps {
+  slot?: string;
+  id?: string | number;
+  className?: string;
+  style?: React.CSSProperties;
+  onClick ?: (event?: any) => void;
+  ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+}
+declare const BreadcrumbsCollapsed: React.FunctionComponent<BreadcrumbsCollapsedProps>;
+
+export default BreadcrumbsCollapsed;
+  

package/components/breadcrumbs-collapsed.js

@@ -0,0 +1,32 @@
+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.js';
+
+const BreadcrumbsCollapsed = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    id,
+    style,
+    children
+  } = props;
+  const extraAttrs = getExtraAttrs(props);
+  const elRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    el: elRef.current
+  }));
+
+  const onClick = e => {
+    emit(props, 'click', e);
+  };
+
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: classNames('breadcrumbs-collapsed', className),
+    ref: elRef,
+    id: id,
+    style: style,
+    onClick: onClick
+  }, extraAttrs), /*#__PURE__*/React.createElement("span", null), children);
+});
+BreadcrumbsCollapsed.displayName = 'f7-breadcrumbs-collapsed';
+export default BreadcrumbsCollapsed;

package/components/breadcrumbs-item.d.ts

@@ -0,0 +1,17 @@
+
+import * as React from 'react';
+
+
+interface BreadcrumbsItemProps {
+  slot?: string;
+  id?: string | number;
+  className?: string;
+  style?: React.CSSProperties;
+  onClick ?: (event?: any) => void;
+  active?: boolean;
+  ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+}
+declare const BreadcrumbsItem: React.FunctionComponent<BreadcrumbsItemProps>;
+
+export default BreadcrumbsItem;
+  

package/components/breadcrumbs-item.js

@@ -0,0 +1,33 @@
+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.js';
+
+const BreadcrumbsItem = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    id,
+    style,
+    active,
+    children
+  } = props;
+  const extraAttrs = getExtraAttrs(props);
+  const elRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    el: elRef.current
+  }));
+
+  const onClick = e => {
+    emit(props, 'click', e);
+  };
+
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: classNames('breadcrumbs-item', className, active && 'breadcrumbs-item-active'),
+    ref: elRef,
+    id: id,
+    style: style,
+    onClick: onClick
+  }, extraAttrs), children);
+});
+BreadcrumbsItem.displayName = 'f7-breadcrumbs-item';
+export default BreadcrumbsItem;

package/components/breadcrumbs-separator.d.ts

@@ -0,0 +1,15 @@
+
+import * as React from 'react';
+
+
+interface BreadcrumbsSeparatorProps {
+  slot?: string;
+  id?: string | number;
+  className?: string;
+  style?: React.CSSProperties;
+  ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+}
+declare const BreadcrumbsSeparator: React.FunctionComponent<BreadcrumbsSeparatorProps>;
+
+export default BreadcrumbsSeparator;
+  

package/components/breadcrumbs-separator.js

@@ -0,0 +1,25 @@
+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.js';
+
+const BreadcrumbsSeparator = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    id,
+    style
+  } = props;
+  const extraAttrs = getExtraAttrs(props);
+  const elRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    el: elRef.current
+  }));
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: classNames('breadcrumbs-separator', className),
+    ref: elRef,
+    id: id,
+    style: style
+  }, extraAttrs));
+});
+BreadcrumbsSeparator.displayName = 'f7-breadcrumbs-separator';
+export default BreadcrumbsSeparator;

package/components/breadcrumbs.d.ts

@@ -0,0 +1,15 @@
+
+import * as React from 'react';
+
+
+interface BreadcrumbsProps {
+  slot?: string;
+  id?: string | number;
+  className?: string;
+  style?: React.CSSProperties;
+  ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+}
+declare const Breadcrumbs: React.FunctionComponent<BreadcrumbsProps>;
+
+export default Breadcrumbs;
+  

package/components/breadcrumbs.js

@@ -0,0 +1,26 @@
+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.js';
+
+const Breadcrumbs = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    id,
+    style,
+    children
+  } = props;
+  const extraAttrs = getExtraAttrs(props);
+  const elRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    el: elRef.current
+  }));
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: classNames('breadcrumbs', className),
+    ref: elRef,
+    id: id,
+    style: style
+  }, extraAttrs), children);
+});
+Breadcrumbs.displayName = 'f7-breadcrumbs';
+export default Breadcrumbs;

package/components/input.js

@@ -128,7 +128,11 @@ const Input = /*#__PURE__*/forwardRef((props, ref) => {
     emit(props, 'inputClear', event);
   };
 
-  const onInput = (...args) => {
+  const onInput = function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
     emit(props, 'input', ...args);
 
     if (!(validateOnBlur || validateOnBlur === '') && (validate || validate === '') && inputElRef.current) {
@@ -136,12 +140,20 @@ const Input = /*#__PURE__*/forwardRef((props, ref) => {
     }
   };
 
-  const onFocus = (...args) => {
+  const onFocus = function () {
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+
     emit(props, 'focus', ...args);
     setInputFocused(true);
   };
 
-  const onBlur = (...args) => {
+  const onBlur = function () {
+    for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+      args[_key3] = arguments[_key3];
+    }
+
     emit(props, 'blur', ...args);
 
     if ((validate || validate === '' || validateOnBlur || validateOnBlur === '') && inputElRef.current) {
@@ -151,7 +163,11 @@ const Input = /*#__PURE__*/forwardRef((props, ref) => {
     setInputFocused(false);
   };
 
-  const onChange = (...args) => {
+  const onChange = function () {
+    for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+      args[_key4] = arguments[_key4];
+    }
+
     emit(props, 'change', ...args);
 
     if (type === 'texteditor') {

package/components/list-input.js

@@ -138,7 +138,11 @@ const ListInput = /*#__PURE__*/forwardRef((props, ref) => {
     emit(props, 'inputClear', event);
   };
 
-  const onInput = (...args) => {
+  const onInput = function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
     emit(props, 'input', ...args);
 
     if (!(validateOnBlur || validateOnBlur === '') && (validate || validate === '') && inputElRef.current) {
@@ -146,12 +150,20 @@ const ListInput = /*#__PURE__*/forwardRef((props, ref) => {
     }
   };
 
-  const onFocus = (...args) => {
+  const onFocus = function () {
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+
     emit(props, 'focus', ...args);
     setInputFocused(true);
   };
 
-  const onBlur = (...args) => {
+  const onBlur = function () {
+    for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+      args[_key3] = arguments[_key3];
+    }
+
     emit(props, 'blur', ...args);
 
     if ((validate || validate === '' || validateOnBlur || validateOnBlur === '') && inputElRef.current) {
@@ -161,7 +173,11 @@ const ListInput = /*#__PURE__*/forwardRef((props, ref) => {
     setInputFocused(false);
   };
 
-  const onChange = (...args) => {
+  const onChange = function () {
+    for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+      args[_key4] = arguments[_key4];
+    }
+
     emit(props, 'change', ...args);
 
     if (type === 'texteditor') {

package/components/list.d.ts

@@ -59,6 +59,7 @@ interface ListProps {
   onSortableEnable ?: (...args: any[]) => void;
   onSortableDisable ?: (...args: any[]) => void;
   onSortableSort ?: (sortData?: any) => void;
+  onSortableMove ?: (itemEl?: any) => void;
   onTabShow ?: (el?: HTMLElement) => void;
   onTabHide ?: (el?: HTMLElement) => void;
   ref?: React.MutableRefObject<{el: HTMLElement | null; f7VirtualList: () => VirtualList.VirtualList}>;

package/components/list.js

@@ -73,6 +73,11 @@ const List = /*#__PURE__*/forwardRef((props, ref) => {
     emit(props, 'sortableSort', sortData);
   };
 
+  const onSortableMove = (el, listEl) => {
+    if (elRef.current !== listEl) return;
+    emit(props, 'sortableMove', el, listEl);
+  };
+
   useImperativeHandle(ref, () => ({
     el: elRef.current,
     f7VirtualList: () => f7VirtualList.current
@@ -84,6 +89,7 @@ const List = /*#__PURE__*/forwardRef((props, ref) => {
       f7.on('sortableEnable', onSortableEnable);
       f7.on('sortableDisable', onSortableDisable);
       f7.on('sortableSort', onSortableSort);
+      f7.on('sortableMove', onSortableMove);
     });
   };
 
@@ -92,6 +98,7 @@ const List = /*#__PURE__*/forwardRef((props, ref) => {
     f7.off('sortableEnable', onSortableEnable);
     f7.off('sortableDisable', onSortableDisable);
     f7.off('sortableSort', onSortableSort);
+    f7.off('sortableMove', onSortableMove);
   };
 
   const onMount = () => {

package/components/panel.js

@@ -88,7 +88,11 @@ const Panel = /*#__PURE__*/forwardRef((props, ref) => {
     emit(props, 'panelCollapsedBreakpoint', event);
   };
 
-  const onResize = (...args) => {
+  const onResize = function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
     emit(props, 'panelResize', ...args);
   };
 

package/components/pie-chart.js

@@ -42,11 +42,12 @@ const PieChart = /*#__PURE__*/forwardRef((props, ref) => {
       return [x, y];
     }
 
-    datasets.forEach(({
-      value,
-      label,
-      color
-    }) => {
+    datasets.forEach(_ref => {
+      let {
+        value,
+        label,
+        color
+      } = _ref;
       const percentage = value / getSummValue();
       const [startX, startY] = getCoordinatesForPercentage(cumulativePercentage);
       cumulativePercentage += percentage;

package/components/range.d.ts

@@ -38,7 +38,7 @@ interface RangeProps {
   themeDark?: boolean;
   onRangeChange ?: (val?: any) => void;
   onRangeChanged ?: (val?: any) => void;
-  ref?: React.MutableRefObject<{el: HTMLElement | null; f7Range: () => Range.Rage}>;
+  ref?: React.MutableRefObject<{el: HTMLElement | null; f7Range: () => Range.Range}>;
 }
 declare const Range: React.FunctionComponent<RangeProps>;
 

package/components/routable-modals.js

@@ -42,11 +42,12 @@ const RoutableModals = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/React.createElement("div", {
     ref: elRef,
     className: "framework7-modals"
-  }, modals.map(({
-    component: ModalComponent,
-    id: modalId,
-    props: modalProps
-  }) => {
+  }, modals.map(_ref => {
+    let {
+      component: ModalComponent,
+      id: modalId,
+      props: modalProps
+    } = _ref;
     return /*#__PURE__*/React.createElement(ModalComponent, _extends({
       key: modalId
     }, modalProps));

package/components/toggle.js

@@ -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/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

@@ -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/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,13 +1,13 @@
 /**
- * Framework7 React 7.0.0-beta.8
+ * Framework7 React 7.0.2
  * 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 13, 2021
+ * Released on: April 24, 2022
  */
 import Framework7React from './shared/plugin.js';
 import { f7, f7ready, theme } from './shared/f7.js';
@@ -29,6 +29,10 @@ 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';
@@ -110,6 +114,6 @@ 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.8",
+  "version": "7.0.2",
   "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

@@ -26,13 +26,14 @@ export default {
       return routerOpenIn(router, navigateUrl, options);
     },
 
-    pageComponentLoader({
-      routerEl,
-      component,
-      options,
-      resolve,
-      reject
-    }) {
+    pageComponentLoader(_ref) {
+      let {
+        routerEl,
+        component,
+        options,
+        resolve,
+        reject
+      } = _ref;
       const router = this;
       const routerId = router.id;
       const el = routerEl;
@@ -117,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;
@@ -179,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

@@ -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/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

package/shared/plugin.js

@@ -5,7 +5,11 @@ const Framework7React = {
   name: 'reactPlugin',
   installed: false,
 
-  install(params = {}) {
+  install(params) {
+    if (params === void 0) {
+      params = {};
+    }
+
     if (Framework7React.installed) return;
     Framework7React.installed = true;
     f7initEvents();

package/shared/use-icon.js

@@ -1,7 +1,11 @@
 import React from 'react';
 import Icon from '../components/icon.js';
 import Badge from '../components/badge.js';
-export const useIcon = (props = {}) => {
+export const useIcon = function (props) {
+  if (props === void 0) {
+    props = {};
+  }
+
   const {
     icon,
     iconMaterial,

package/shared/use-route-props.js

@@ -1,7 +1,8 @@
 import { useEffect } from 'react';
-export const useRouteProps = (elRef, {
-  routeProps
-} = {}) => {
+export const useRouteProps = function (elRef, _temp) {
+  let {
+    routeProps
+  } = _temp === void 0 ? {} : _temp;
   useEffect(() => {
     if (elRef.current) {
       elRef.current.f7RouteProps = routeProps;

package/shared/use-store.js

@@ -1,15 +1,15 @@
 import { useState, useEffect, useRef } from 'react';
 import { f7 } from './f7.js';
-export const useStore = (...args) => {
+export const useStore = function () {
   const assignedGetters = useRef({}); // (store, getter)
 
-  let store = args[0];
-  let getter = args[1];
+  let store = arguments.length <= 0 ? undefined : arguments[0];
+  let getter = arguments.length <= 1 ? undefined : arguments[1];
 
-  if (args.length === 1) {
+  if (arguments.length === 1) {
     // (getter)
     store = f7.store;
-    getter = args[0];
+    getter = arguments.length <= 0 ? undefined : arguments[0];
   } // eslint-disable-next-line
 
 

package/shared/utils.js

@@ -14,11 +14,15 @@ export function isObject(o) {
 export function now() {
   return Date.now();
 }
-export function extend(...args) {
+export function extend() {
   let deep = true;
   let to;
   let from;
 
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+    args[_key] = arguments[_key];
+  }
+
   if (typeof args[0] === 'boolean') {
     [deep, to] = args;
     args.splice(0, 2);
@@ -57,15 +61,25 @@ export function extend(...args) {
 
   return to;
 }
-export function flattenArray(...args) {
+export function flattenArray() {
   const arr = [];
+
+  for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+    args[_key2] = arguments[_key2];
+  }
+
   args.forEach(arg => {
     if (Array.isArray(arg)) arr.push(...flattenArray(...arg));else arr.push(arg);
   });
   return arr;
 }
-export function classNames(...args) {
+export function classNames() {
   const classes = [];
+
+  for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+    args[_key3] = arguments[_key3];
+  }
+
   args.forEach(arg => {
     if (typeof arg === 'object' && arg.constructor === Object) {
       Object.keys(arg).forEach(key => {
@@ -79,7 +93,11 @@ export function classNames(...args) {
   });
   return uniqueClasses.join(' ');
 }
-export function getSlots(props = {}) {
+export function getSlots(props) {
+  if (props === void 0) {
+    props = {};
+  }
+
   const slots = {};
   if (!props) return slots;
   const children = props.children;
@@ -107,7 +125,11 @@ export function getSlots(props = {}) {
 
   return slots;
 }
-export function emit(props, events, ...args) {
+export function emit(props, events) {
+  for (var _len4 = arguments.length, args = new Array(_len4 > 2 ? _len4 - 2 : 0), _key4 = 2; _key4 < _len4; _key4++) {
+    args[_key4 - 2] = arguments[_key4];
+  }
+
   if (!events || !events.trim().length || typeof events !== 'string') return;
   events.trim().split(' ').forEach(event => {
     let eventName = (event || '').trim();
@@ -117,7 +139,11 @@ export function emit(props, events, ...args) {
     if (props[propName]) props[propName](...args);
   });
 }
-export function getExtraAttrs(props = {}) {
+export function getExtraAttrs(props) {
+  if (props === void 0) {
+    props = {};
+  }
+
   const extraAttrs = {};
   Object.keys(props).forEach(key => {
     if (key.indexOf('data-') === 0 || key.indexOf('aria-') === 0 || key === 'role') {