framework7-react 8.3.4 → 9.0.0

package/components/toggle.js

@@ -1,14 +1,14 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : 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';
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useRef } from 'react';
 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';
+import { setRef } from '../shared/set-ref.js';
 
-
-const Toggle = /*#__PURE__*/forwardRef((props, ref) => {
+const Toggle = props => {
   const f7Toggle = useRef(null);
   const {
     className,
@@ -20,7 +20,8 @@ const Toggle = /*#__PURE__*/forwardRef((props, ref) => {
     disabled,
     readonly,
     name,
-    value
+    value,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
@@ -28,10 +29,6 @@ const Toggle = /*#__PURE__*/forwardRef((props, ref) => {
   const onChange = event => {
     emit(props, 'change', event);
   };
-  useImperativeHandle(ref, () => ({
-    el: elRef.current,
-    f7Toggle: () => f7Toggle.current
-  }));
   useTooltip(elRef, props);
   watchProp(checked, newValue => {
     if (!f7Toggle.current) return;
@@ -78,7 +75,17 @@ const Toggle = /*#__PURE__*/forwardRef((props, ref) => {
   const labelClasses = classNames('toggle', className, {
     disabled
   }, colorClasses(props));
-  const inputEl = /*#__PURE__*/React.createElement("input", {
+  return /*#__PURE__*/React.createElement("label", _extends({
+    id: id,
+    style: style,
+    className: labelClasses,
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el, {
+        f7Toggle: () => f7Toggle.current
+      });
+    }
+  }, extraAttrs), /*#__PURE__*/React.createElement("input", {
     ref: inputElRef,
     type: "checkbox",
     name: name,
@@ -88,15 +95,9 @@ const Toggle = /*#__PURE__*/forwardRef((props, ref) => {
     defaultChecked: defaultChecked,
     value: value,
     onChange: () => {}
-  });
-  return /*#__PURE__*/React.createElement("label", _extends({
-    id: id,
-    style: style,
-    className: labelClasses,
-    ref: elRef
-  }, extraAttrs), inputEl, /*#__PURE__*/React.createElement("span", {
+  }), /*#__PURE__*/React.createElement("span", {
     className: "toggle-icon"
   }));
-});
+};
 Toggle.displayName = 'f7-toggle';
 export default Toggle;

package/components/toolbar-pane.d.ts

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

package/components/toolbar-pane.js

@@ -0,0 +1,29 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useRef } from 'react';
+import { classNames, getExtraAttrs } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
+import { setRef } from '../shared/set-ref.js';
+
+const ToolbarPane = props => {
+  const {
+    className,
+    id,
+    style,
+    ref,
+    children
+  } = props;
+  const extraAttrs = getExtraAttrs(props);
+  const elRef = useRef(null);
+  const classes = classNames('toolbar-pane', className, colorClasses(props));
+  return /*#__PURE__*/React.createElement("div", _extends({
+    id: id,
+    style: style,
+    className: classes,
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
+  }, extraAttrs), children);
+};
+ToolbarPane.displayName = 'f7-toolbar-pane';
+export default ToolbarPane;

package/components/toolbar.js

@@ -1,14 +1,14 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : 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';
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useRef } from 'react';
 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';
+import { setRef } from '../shared/set-ref.js';
 
-
-const Toolbar = /*#__PURE__*/forwardRef((props, ref) => {
+const Toolbar = props => {
   const {
     className,
     id,
@@ -25,7 +25,8 @@ const Toolbar = /*#__PURE__*/forwardRef((props, ref) => {
     bottomMd,
     bottomIos,
     bottom,
-    inner = true
+    inner = true,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
@@ -45,11 +46,6 @@ const Toolbar = /*#__PURE__*/forwardRef((props, ref) => {
     if (!f7) return;
     f7.toolbar.show(elRef.current, animate);
   };
-  useImperativeHandle(ref, () => ({
-    el: elRef.current,
-    hide,
-    show
-  }));
   useIsomorphicLayoutEffect(() => {
     f7ready(() => {
       if (tabbar && f7 && elRef.current) {
@@ -79,7 +75,13 @@ const Toolbar = /*#__PURE__*/forwardRef((props, ref) => {
     id: id,
     style: style,
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el, {
+        hide,
+        show
+      });
+    }
   }, extraAttrs), /*#__PURE__*/React.createElement(TabbarContext.Provider, {
     value: {
       tabbarHasIcons: icons
@@ -87,6 +89,6 @@ const Toolbar = /*#__PURE__*/forwardRef((props, ref) => {
   }, slots['before-inner'], inner ? /*#__PURE__*/React.createElement("div", {
     className: "toolbar-inner"
   }, slots.default) : slots.default, slots['after-inner']));
-});
+};
 Toolbar.displayName = 'f7-toolbar';
 export default Toolbar;

package/components/treeview-item.js

@@ -1,13 +1,13 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : 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';
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useRef } from 'react';
 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';
+import { setRef } from '../shared/set-ref.js';
 
-
-const TreeviewItem = /*#__PURE__*/forwardRef((props, ref) => {
+const TreeviewItem = props => {
   const {
     className,
     id,
@@ -19,7 +19,8 @@ const TreeviewItem = /*#__PURE__*/forwardRef((props, ref) => {
     opened,
     label,
     loadChildren,
-    link
+    link,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
@@ -38,9 +39,6 @@ const TreeviewItem = /*#__PURE__*/forwardRef((props, ref) => {
     if (elRef.current !== el) return;
     emit(props, 'treeviewLoadChildren', el, done);
   };
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   const attachEvents = () => {
     if (!elRef.current) return;
     f7ready(() => {
@@ -85,7 +83,10 @@ const TreeviewItem = /*#__PURE__*/forwardRef((props, ref) => {
     id: id,
     style: style,
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs), /*#__PURE__*/React.createElement(TreeviewRootTag, _extends({
     onClick: onClick,
     className: itemRootClasses
@@ -98,6 +99,6 @@ const TreeviewItem = /*#__PURE__*/forwardRef((props, ref) => {
   }, slots['label-start'], label, slots.label), slots.content, slots['content-end']), slots.root, slots['root-end']), hasChildren && /*#__PURE__*/React.createElement("div", {
     className: "treeview-item-children"
   }, slots['children-start'], slots.default, slots.children));
-});
+};
 TreeviewItem.displayName = 'f7-treeview-item';
 export default TreeviewItem;

package/components/treeview.js

@@ -1,28 +1,29 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : 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';
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useRef } from 'react';
 import { classNames, getExtraAttrs } from '../shared/utils.js';
 import { colorClasses } from '../shared/mixins.js';
+import { setRef } from '../shared/set-ref.js';
 
-
-const Treeview = /*#__PURE__*/forwardRef((props, ref) => {
+const Treeview = props => {
   const {
     className,
     id,
     style,
-    children
+    children,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   const classes = classNames(className, 'treeview', colorClasses(props));
   return /*#__PURE__*/React.createElement("div", _extends({
     id: id,
     style: style,
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs), children);
-});
+};
 Treeview.displayName = 'f7-treeview';
 export default Treeview;

package/components/view.d.ts

@@ -53,8 +53,6 @@ export interface ViewProps {
   browserHistoryStoreHistory?: boolean;
   animate ?: boolean;
   transition ?: string;
-  iosDynamicNavbar ?: boolean;
-  iosAnimateNavbarBackIcon ?: boolean;
   materialPageLoadDelay ?: number;
   passRouteQueryToRequest ?: boolean;
   passRouteParamsToRequest ?: boolean;

package/components/view.js

@@ -1,6 +1,6 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 /* eslint-disable no-nested-ternary */
-import React, { forwardRef, useRef, useImperativeHandle, useState } from 'react';
+import React, { useRef, useState } from 'react';
 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';
@@ -9,8 +9,9 @@ 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';
+import { setRef } from '../shared/set-ref.js';
 
-const View = /*#__PURE__*/forwardRef((props, ref) => {
+const View = props => {
   const {
     className,
     id,
@@ -22,7 +23,8 @@ const View = /*#__PURE__*/forwardRef((props, ref) => {
     tabActive,
     url,
     initRouterOnTabShow,
-    browserHistoryInitialMatch = true
+    browserHistoryInitialMatch = true,
+    ref
   } = props;
   const childrenArray = React.Children.toArray(children);
   const initialPageComponent = childrenArray.filter(c => c.props && c.props.initialPage)[0];
@@ -91,10 +93,6 @@ const View = /*#__PURE__*/forwardRef((props, ref) => {
     const swipeBackData = data;
     emit(props, 'swipeBackAfterReset', swipeBackData);
   };
-  useImperativeHandle(ref, () => ({
-    el: elRef.current,
-    f7View: () => f7View.current
-  }));
   const onMount = () => {
     f7ready(() => {
       if (f7View.current) {
@@ -192,25 +190,27 @@ const View = /*#__PURE__*/forwardRef((props, ref) => {
     id: id,
     style: style,
     className: classes,
-    ref: elRef
-  }, 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));
-  }));
-});
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el, {
+        f7View: () => f7View.current
+      });
+    }
+  }, 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))));
+};
 View.displayName = 'f7-view';
 export default View;

package/components/views.js

@@ -1,22 +1,20 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : 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';
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useRef } from 'react';
 import { classNames, getExtraAttrs } from '../shared/utils.js';
 import { colorClasses } from '../shared/mixins.js';
+import { setRef } from '../shared/set-ref.js';
 
-
-const Views = /*#__PURE__*/forwardRef((props, ref) => {
+const Views = props => {
   const {
     className,
     id,
     style,
     children,
-    tabs
+    tabs,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   const classes = classNames(className, 'views', {
     tabs
   }, colorClasses(props));
@@ -24,8 +22,11 @@ const Views = /*#__PURE__*/forwardRef((props, ref) => {
     id: id,
     style: style,
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs), children);
-});
+};
 Views.displayName = 'f7-views';
 export default Views;

package/framework7-react.d.ts

@@ -85,6 +85,7 @@ 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 ToolbarPane from './components/toolbar-pane.js';
 import Toolbar from './components/toolbar.js';
 import TreeviewItem from './components/treeview-item.js';
 import Treeview from './components/treeview.js';
@@ -114,6 +115,6 @@ declare const useStore: useStore;
 
 declare const Framework7React: Framework7Plugin;
 
-export { AccordionContent, AccordionItem, AccordionToggle, Accordion, ActionsButton, ActionsGroup, ActionsLabel, Actions, App, AreaChart, Badge, BlockFooter, BlockHeader, BlockTitle, Block, BreadcrumbsCollapsed, BreadcrumbsItem, BreadcrumbsSeparator, Breadcrumbs, Button, CardContent, CardFooter, CardHeader, Card, Checkbox, Chip, FabBackdrop, FabButton, FabButtons, Fab, Gauge, Icon, Input, Link, ListButton, ListGroup, ListIndex, ListInput, ListItemContent, ListItem, List, LoginScreenTitle, LoginScreen, 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, Searchbar, Segmented, Sheet, SkeletonAvatar, SkeletonBlock, SkeletonImage, SkeletonText, Stepper, Subnavbar, SwipeoutActions, SwipeoutButton, Tab, Tabs, TextEditor, Toggle, Toolbar, TreeviewItem, Treeview, View, Views }
+export { AccordionContent, AccordionItem, AccordionToggle, Accordion, ActionsButton, ActionsGroup, ActionsLabel, Actions, App, AreaChart, Badge, BlockFooter, BlockHeader, BlockTitle, Block, BreadcrumbsCollapsed, BreadcrumbsItem, BreadcrumbsSeparator, Breadcrumbs, Button, CardContent, CardFooter, CardHeader, Card, Checkbox, Chip, FabBackdrop, FabButton, FabButtons, Fab, Gauge, Icon, Input, Link, ListButton, ListGroup, ListIndex, ListInput, ListItemContent, ListItem, List, LoginScreenTitle, LoginScreen, 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, Searchbar, Segmented, Sheet, SkeletonAvatar, SkeletonBlock, SkeletonImage, SkeletonText, Stepper, Subnavbar, SwipeoutActions, SwipeoutButton, Tab, Tabs, TextEditor, Toggle, ToolbarPane, Toolbar, TreeviewItem, Treeview, View, Views }
 export { f7, f7ready, theme, useStore };
 export default Framework7React;

package/framework7-react.js

@@ -1,13 +1,13 @@
 /**
- * Framework7 React 8.3.4
+ * Framework7 React 9.0.0
  * Build full featured iOS & Android apps using Framework7 & React
  * https://framework7.io/react/
  *
- * Copyright 2014-2024 Vladimir Kharlampidi
+ * Copyright 2014-2025 Vladimir Kharlampidi
  *
  * Released under the MIT License
  *
- * Released on: September 18, 2024
+ * Released on: November 25, 2025
  */
 import Framework7React from './shared/plugin.js';
 import { f7, f7ready, theme } from './shared/f7.js';
@@ -97,12 +97,13 @@ 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 ToolbarPane from './components/toolbar-pane.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, AreaChart, Badge, BlockFooter, BlockHeader, BlockTitle, Block, BreadcrumbsCollapsed, BreadcrumbsItem, BreadcrumbsSeparator, Breadcrumbs, Button, CardContent, CardFooter, CardHeader, Card, Checkbox, Chip, FabBackdrop, FabButton, FabButtons, Fab, Gauge, Icon, Input, Link, ListButton, ListGroup, ListIndex, ListInput, ListItemContent, ListItem, List, LoginScreenTitle, LoginScreen, 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, Searchbar, Segmented, Sheet, SkeletonAvatar, SkeletonBlock, SkeletonImage, SkeletonText, Stepper, Subnavbar, SwipeoutActions, SwipeoutButton, Tab, Tabs, TextEditor, Toggle, Toolbar, TreeviewItem, Treeview, View, Views }
+export { AccordionContent, AccordionItem, AccordionToggle, Accordion, ActionsButton, ActionsGroup, ActionsLabel, Actions, App, AreaChart, Badge, BlockFooter, BlockHeader, BlockTitle, Block, BreadcrumbsCollapsed, BreadcrumbsItem, BreadcrumbsSeparator, Breadcrumbs, Button, CardContent, CardFooter, CardHeader, Card, Checkbox, Chip, FabBackdrop, FabButton, FabButtons, Fab, Gauge, Icon, Input, Link, ListButton, ListGroup, ListIndex, ListInput, ListItemContent, ListItem, List, LoginScreenTitle, LoginScreen, 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, Searchbar, Segmented, Sheet, SkeletonAvatar, SkeletonBlock, SkeletonImage, SkeletonText, Stepper, Subnavbar, SwipeoutActions, SwipeoutButton, Tab, Tabs, TextEditor, Toggle, ToolbarPane, Toolbar, TreeviewItem, Treeview, View, Views }
 export { f7, f7ready, theme, useStore };
 export default Framework7React;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "framework7-react",
-  "version": "8.3.4",
+  "version": "9.0.0",
   "description": "Build full featured iOS & Android apps using Framework7 & React",
   "type": "module",
   "exports": {
@@ -50,5 +50,5 @@
     "type": "patreon",
     "url": "https://www.patreon.com/framework7"
   },
-  "releaseDate": "September 18, 2024"
+  "releaseDate": "November 25, 2025"
 }

package/shared/components-router.js

@@ -20,14 +20,13 @@ export default {
     openIn(router, navigateUrl, options) {
       return routerOpenIn(router, navigateUrl, options);
     },
-    pageComponentLoader(_ref) {
-      let {
-        routerEl,
-        component,
-        options,
-        resolve,
-        reject
-      } = _ref;
+    pageComponentLoader({
+      routerEl,
+      component,
+      options,
+      resolve,
+      reject
+    }) {
       const router = this;
       const routerId = router.id;
       const el = routerEl;
@@ -101,14 +100,13 @@ export default {
         pageEl.parentNode.removeChild(pageEl);
       }
     },
-    tabComponentLoader(_temp) {
-      let {
-        tabEl,
-        component,
-        options,
-        resolve,
-        reject
-      } = _temp === void 0 ? {} : _temp;
+    tabComponentLoader({
+      tabEl,
+      component,
+      options,
+      resolve,
+      reject
+    } = {}) {
       const router = this;
       if (!tabEl) reject();
       let tabRouter;
@@ -155,13 +153,12 @@ export default {
       }
       tabRouter.setTabContent(null);
     },
-    modalComponentLoader(_temp2) {
-      let {
-        component,
-        options,
-        resolve,
-        reject
-      } = _temp2 === void 0 ? {} : _temp2;
+    modalComponentLoader({
+      component,
+      options,
+      resolve,
+      reject
+    } = {}) {
       const router = this;
       const modalsRouter = f7routers.modals;
       if (!modalsRouter) {

package/shared/f7.js

@@ -25,13 +25,7 @@ const cleanup = () => {
 const f7initEvents = () => {
   f7events = new Framework7.Events();
 };
-const f7init = function (rootEl, params, init) {
-  if (params === void 0) {
-    params = {};
-  }
-  if (init === void 0) {
-    init = true;
-  }
+const f7init = (rootEl, params = {}, init = true) => {
   const f7Params = extend({}, params, {
     el: rootEl,
     init

package/shared/modal-state-classes.js

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

package/shared/plugin.js

@@ -4,10 +4,7 @@ import { f7, f7ready, theme, f7initEvents, setTheme } from './f7.js';
 const Framework7React = {
   name: 'reactPlugin',
   installed: false,
-  install(params) {
-    if (params === void 0) {
-      params = {};
-    }
+  install(params = {}) {
     if (Framework7React.installed) return;
     Framework7React.installed = true;
     f7initEvents();

package/shared/set-ref.js

@@ -0,0 +1,11 @@
+export const setRef = (ref, el, extraRefs = {}) => {
+  const res = {
+    el,
+    ...extraRefs
+  };
+  if (typeof ref === 'function') {
+    ref(res);
+  } else if (ref) {
+    ref.current = res;
+  }
+};

package/shared/use-icon.js

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

package/shared/use-route-props.js

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