framework7-react 8.3.4 → 9.0.0-beta.1

package/components/messagebar.js

@@ -1,5 +1,5 @@
-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, getSlots, noUndefinedProps } from '../shared/utils.js';
 import { colorClasses } from '../shared/mixins.js';
@@ -7,9 +7,11 @@ import Link from './link.js';
 import Input from './input.js';
 import { f7ready, f7 } from '../shared/f7.js';
 import { watchProp } from '../shared/watch-prop.js';
+import { setRef } from '../shared/set-ref.js';
+import ToolbarPane from './toolbar-pane.js';
 
 
-const Messagebar = /*#__PURE__*/forwardRef((props, ref) => {
+const Messagebar = props => {
   const f7Messagebar = useRef(null);
   const updateSheetVisible = useRef(false);
   const updateAttachmentsVisible = useRef(false);
@@ -32,7 +34,8 @@ const Messagebar = /*#__PURE__*/forwardRef((props, ref) => {
     textareaId,
     name,
     placeholder = 'Message',
-    init = true
+    init = true,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
@@ -67,10 +70,6 @@ const Messagebar = /*#__PURE__*/forwardRef((props, ref) => {
   const onResizePage = instance => {
     emit(props, 'messagebarResizePage', instance);
   };
-  useImperativeHandle(ref, () => ({
-    el: elRef.current,
-    f7Messagebar: () => f7Messagebar.current
-  }));
   watchProp(sheetVisible, () => {
     if (!resizable || !f7Messagebar.current) return;
     updateSheetVisible.current = true;
@@ -157,10 +156,15 @@ const Messagebar = /*#__PURE__*/forwardRef((props, ref) => {
     id: id,
     style: style,
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el, {
+        f7Messagebar: () => f7Messagebar.current
+      });
+    }
   }, extraAttrs), slotsBeforeInner, /*#__PURE__*/React.createElement("div", {
     className: "toolbar-inner"
-  }, slotsInnerStart, /*#__PURE__*/React.createElement("div", {
+  }, slotsInnerStart && slotsInnerStart.length > 0 && /*#__PURE__*/React.createElement(ToolbarPane, null, slotsInnerStart), /*#__PURE__*/React.createElement("div", {
     className: "messagebar-area"
   }, slotsBeforeArea, messagebarAttachmentsEl, /*#__PURE__*/React.createElement(Input, _extends({
     inputId: textareaId,
@@ -176,9 +180,9 @@ const Messagebar = /*#__PURE__*/forwardRef((props, ref) => {
     onChange: onChange,
     onFocus: onFocus,
     onBlur: onBlur
-  }, valueProps)), slotsAfterArea), (sendLink && sendLink.length > 0 || slotsSendLink) && /*#__PURE__*/React.createElement(Link, {
+  }, valueProps)), slotsAfterArea), (sendLink && sendLink.length > 0 || slotsSendLink || slotsInnerStart && slotsInnerEnd.length > 0) && /*#__PURE__*/React.createElement(ToolbarPane, null, (sendLink && sendLink.length > 0 || slotsSendLink) && /*#__PURE__*/React.createElement(Link, {
     onClick: onClick
-  }, slotsSendLink || sendLink), slotsInnerEnd, innerEndEls), slotsAfterInner, messagebarSheetEl);
-});
+  }, slotsSendLink || sendLink), slotsInnerEnd), innerEndEls), slotsAfterInner, messagebarSheetEl);
+};
 Messagebar.displayName = 'f7-messagebar';
 export default Messagebar;

package/components/messages-title.js

@@ -1,28 +1,30 @@
-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 MessagesTitle = /*#__PURE__*/forwardRef((props, ref) => {
+const MessagesTitle = 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, 'messages-title', 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);
-});
+};
 MessagesTitle.displayName = 'f7-messages-title';
 export default MessagesTitle;

package/components/messages.js

@@ -1,14 +1,15 @@
-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, 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';
+import { setRef } from '../shared/set-ref.js';
 
 
 
-const Messages = /*#__PURE__*/forwardRef((props, ref) => {
+const Messages = props => {
   const f7Messages = useRef(null);
   const mounted = useRef(false);
   const {
@@ -31,16 +32,13 @@ const Messages = /*#__PURE__*/forwardRef((props, ref) => {
     customClassMessageRule,
     renderMessage,
     typing = false,
-    init = true
+    init = true,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
   const childrenBeforeUpdated = useRef(null);
   const reactChildrenBefore = useRef(children ? React.Children.count(children) : 0);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current,
-    f7Messages: () => f7Messages.current
-  }));
   const onMount = () => {
     if (!init) return;
     f7ready(() => {
@@ -119,8 +117,13 @@ const Messages = /*#__PURE__*/forwardRef((props, ref) => {
     id: id,
     style: style,
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el, {
+        f7Messages: () => f7Messages.current
+      });
+    }
   }, extraAttrs), children);
-});
+};
 Messages.displayName = 'f7-messages';
 export default Messages;

package/components/nav-left.d.ts

@@ -11,7 +11,6 @@ export interface NavLeftProps {
   backLinkUrl ?: string;
   backLinkForce ?: boolean;
   backLinkShowText ?: boolean;
-  sliding ?: boolean;
   color?: string;
   colorTheme?: string;
   textColor?: string;

package/components/nav-left.js

@@ -1,12 +1,12 @@
-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, emit } from '../shared/utils.js';
 import { colorClasses } from '../shared/mixins.js';
-import { useTheme } from '../shared/use-theme.js';
+import { setRef } from '../shared/set-ref.js';
 import Link from './link.js';
 
 
-const NavLeft = /*#__PURE__*/forwardRef((props, ref) => {
+const NavLeft = props => {
   const {
     className,
     id,
@@ -16,22 +16,16 @@ const NavLeft = /*#__PURE__*/forwardRef((props, ref) => {
     backLinkUrl,
     backLinkForce,
     backLinkShowText,
-    sliding
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
   const onBackClick = event => {
     emit(props, 'backClick clickBack', event);
   };
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
-  const theme = useTheme();
   let linkEl;
-  let needBackLinkText = backLinkShowText;
-  if (typeof needBackLinkText === 'undefined') needBackLinkText = !theme.md;
   if (backLink) {
-    const text = backLink !== true && needBackLinkText ? backLink : undefined;
+    const text = backLink !== true && backLinkShowText ? backLink : undefined;
     linkEl = /*#__PURE__*/React.createElement(Link, {
       href: backLinkUrl || '#',
       back: true,
@@ -42,15 +36,16 @@ const NavLeft = /*#__PURE__*/forwardRef((props, ref) => {
       onClick: onBackClick
     });
   }
-  const classes = classNames(className, 'left', {
-    sliding
-  }, colorClasses(props));
+  const classes = classNames(className, 'left', {}, 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), linkEl, children);
-});
+};
 NavLeft.displayName = 'f7-nav-left';
 export default NavLeft;

package/components/nav-right.d.ts

@@ -7,7 +7,6 @@ export interface NavRightProps {
   id?: string | number;
   className?: string;
   style?: React.CSSProperties;
-  sliding ?: boolean;
   ref?: React.MutableRefObject<{el: HTMLElement | null}>;
   children?: React.ReactNode;
   color?: string;

package/components/nav-right.js

@@ -1,31 +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 NavRight = /*#__PURE__*/forwardRef((props, ref) => {
+const NavRight = props => {
   const {
     className,
     id,
     style,
     children,
-    sliding
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
-  const classes = classNames(className, 'right', {
-    sliding
-  }, colorClasses(props));
+  const classes = classNames(className, 'right', {}, 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);
-});
+};
 NavRight.displayName = 'f7-nav-right';
 export default NavRight;

package/components/nav-title-large.js

@@ -1,30 +1,31 @@
-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 NavTitleLarge = /*#__PURE__*/forwardRef((props, ref) => {
+const NavTitleLarge = 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, 'title-large', 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), /*#__PURE__*/React.createElement("div", {
     className: "title-large-text"
   }, children));
-});
+};
 NavTitleLarge.displayName = 'f7-nav-title-large';
 export default NavTitleLarge;

package/components/nav-title.d.ts

@@ -9,7 +9,6 @@ export interface NavTitleProps {
   style?: React.CSSProperties;
   title ?: string;
   subtitle ?: string;
-  sliding ?: boolean;
   ref?: React.MutableRefObject<{el: HTMLElement | null}>;
   children?: React.ReactNode;
   color?: string;

package/components/nav-title.js

@@ -1,10 +1,10 @@
-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 NavTitle = /*#__PURE__*/forwardRef((props, ref) => {
+const NavTitle = props => {
   const {
     className,
     id,
@@ -12,28 +12,26 @@ const NavTitle = /*#__PURE__*/forwardRef((props, ref) => {
     children,
     title,
     subtitle,
-    sliding
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   let subtitleEl;
   if (subtitle) {
     subtitleEl = /*#__PURE__*/React.createElement("span", {
       className: "subtitle"
     }, subtitle);
   }
-  const classes = classNames(className, 'title', {
-    sliding
-  }, colorClasses(props));
+  const classes = classNames(className, 'title', {}, 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, title, subtitleEl);
-});
+};
 NavTitle.displayName = 'f7-nav-title';
 export default NavTitle;

package/components/navbar.d.ts

@@ -11,7 +11,6 @@ export interface NavbarProps {
   backLinkUrl ?: string;
   backLinkForce ?: boolean;
   backLinkShowText ?: boolean;
-  sliding ?: boolean;
   title ?: string;
   subtitle ?: string;
   hidden ?: boolean;

package/components/navbar.js

@@ -1,21 +1,21 @@
-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, getSlots } from '../shared/utils.js';
 import { colorClasses } from '../shared/mixins.js';
 import { f7ready, f7 } from '../shared/f7.js';
 import { useTheme } from '../shared/use-theme.js';
+import { setRef } from '../shared/set-ref.js';
 import NavLeft from './nav-left.js';
 import NavTitle from './nav-title.js';
 import NavRight from './nav-right.js';
 
 
-const Navbar = /*#__PURE__*/forwardRef((props, ref) => {
+const Navbar = props => {
   const {
     className,
     id,
     style,
-    sliding = true,
     large,
     largeTransparent,
     transparent,
@@ -29,13 +29,11 @@ const Navbar = /*#__PURE__*/forwardRef((props, ref) => {
     subtitle,
     titleLarge,
     innerClass,
-    innerClassName
+    innerClassName,
+    ref
   } = props;
   const routerPositionClass = useRef('');
   const largeCollapsed = useRef(false);
-  const routerNavbarRole = useRef(null);
-  const routerNavbarRoleDetailRoot = useRef(false);
-  const routerNavbarMasterStack = useRef(false);
   const transparentVisible = useRef(false);
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
@@ -72,19 +70,6 @@ const Navbar = /*#__PURE__*/forwardRef((props, ref) => {
     if (elRef.current !== navbarEl) return;
     routerPositionClass.current = position ? `navbar-${position}` : '';
   };
-  const onNavbarRole = (navbarEl, rolesData) => {
-    if (elRef.current !== navbarEl) return;
-    routerNavbarRole.current = rolesData.role;
-    routerNavbarRoleDetailRoot.current = rolesData.detailRoot;
-  };
-  const onNavbarMasterStack = navbarEl => {
-    if (elRef.current !== navbarEl) return;
-    routerNavbarMasterStack.current = true;
-  };
-  const onNavbarMasterUnstack = navbarEl => {
-    if (elRef.current !== navbarEl) return;
-    routerNavbarMasterStack.current = false;
-  };
   const hide = animate => {
     if (!f7) return;
     f7.navbar.hide(elRef.current, animate);
@@ -100,12 +85,6 @@ const Navbar = /*#__PURE__*/forwardRef((props, ref) => {
   const onBackClick = event => {
     emit(props, 'backClick clickBack', event);
   };
-  useImperativeHandle(ref, () => ({
-    el: elRef.current,
-    hide,
-    show,
-    size
-  }));
   const attachEvents = () => {
     if (!elRef.current) return;
     f7ready(() => {
@@ -115,9 +94,6 @@ const Navbar = /*#__PURE__*/forwardRef((props, ref) => {
       f7.on('navbarCollapse', onCollapse);
       f7.on('navbarExpand', onExpand);
       f7.on('navbarPosition', onNavbarPosition);
-      f7.on('navbarRole', onNavbarRole);
-      f7.on('navbarMasterStack', onNavbarMasterStack);
-      f7.on('navbarMasterUnstack', onNavbarMasterUnstack);
       f7.on('navbarTransparentShow', onNavbarTransparentShow);
       f7.on('navbarTransparentHide', onNavbarTransparentHide);
     });
@@ -129,9 +105,6 @@ const Navbar = /*#__PURE__*/forwardRef((props, ref) => {
     f7.off('navbarCollapse', onCollapse);
     f7.off('navbarExpand', onExpand);
     f7.off('navbarPosition', onNavbarPosition);
-    f7.off('navbarRole', onNavbarRole);
-    f7.off('navbarMasterStack', onNavbarMasterStack);
-    f7.off('navbarMasterUnstack', onNavbarMasterUnstack);
     f7.off('navbarTransparentShow', onNavbarTransparentShow);
     f7.off('navbarTransparentHide', onNavbarTransparentHide);
   };
@@ -155,10 +128,6 @@ const Navbar = /*#__PURE__*/forwardRef((props, ref) => {
     'navbar-large-collapsed': isLarge && largeCollapsed.current,
     'navbar-transparent': isTransparent,
     'navbar-transparent-visible': isTransparentVisible,
-    'navbar-master': routerNavbarRole.current === 'master',
-    'navbar-master-detail': routerNavbarRole.current === 'detail',
-    'navbar-master-detail-root': routerNavbarRoleDetailRoot.current === true,
-    'navbar-master-stacked': routerNavbarMasterStack.current === true,
     'no-outline': !outline
   }, colorClasses(props));
   if (backLink || slots['nav-left'] || slots.left) {
@@ -190,7 +159,6 @@ const Navbar = /*#__PURE__*/forwardRef((props, ref) => {
   }
   const innerEl = /*#__PURE__*/React.createElement("div", {
     className: classNames('navbar-inner', innerClass, innerClassName, {
-      sliding,
       'navbar-inner-left-title': addLeftTitleClass,
       'navbar-inner-centered-title': addCenterTitleClass
     })
@@ -199,10 +167,17 @@ const Navbar = /*#__PURE__*/forwardRef((props, ref) => {
     id: id,
     style: style,
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el, {
+        hide,
+        show,
+        size
+      });
+    }
   }, extraAttrs), /*#__PURE__*/React.createElement("div", {
     className: "navbar-bg"
   }), slots['before-inner'], innerEl, slots['after-inner']);
-});
+};
 Navbar.displayName = 'f7-navbar';
 export default Navbar;

package/components/page-content.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 Preloader from './preloader.js';
 import { useTab } from '../shared/use-tab.js';
 import { f7ready, f7 } from '../shared/f7.js';
+import { setRef } from '../shared/set-ref.js';
 
-
-const PageContent = /*#__PURE__*/forwardRef((props, ref) => {
+const PageContent = props => {
   const {
     className,
     id,
@@ -29,7 +29,8 @@ const PageContent = /*#__PURE__*/forwardRef((props, ref) => {
     hideNavbarOnScroll,
     hideToolbarOnScroll,
     messagesContent,
-    loginScreen
+    loginScreen,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
@@ -57,9 +58,6 @@ const PageContent = /*#__PURE__*/forwardRef((props, ref) => {
     if (elRef.current !== el) return;
     emit(props, 'infinite');
   };
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   useTab(elRef, props);
   const attachEvents = () => {
     f7ready(() => {
@@ -122,8 +120,11 @@ const PageContent = /*#__PURE__*/forwardRef((props, ref) => {
     "data-ptr-distance": ptrDistance || undefined,
     "data-ptr-mousewheel": ptrMousewheel || undefined,
     "data-infinite-distance": infiniteDistance || undefined,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs), ptrBottom ? null : ptrEl, infiniteTop ? infiniteEl : null, children, infiniteTop ? null : infiniteEl, ptrBottom ? ptrEl : null);
-});
+};
 PageContent.displayName = 'f7-page-content';
 export default PageContent;

package/components/page.js

@@ -1,13 +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 { f7ready, f7 } from '../shared/f7.js';
+import { setRef } from '../shared/set-ref.js';
 import PageContent from './page-content.js';
 
 
-const Page = /*#__PURE__*/forwardRef((props, ref) => {
+const Page = props => {
   const {
     className,
     id,
@@ -36,6 +37,7 @@ const Page = /*#__PURE__*/forwardRef((props, ref) => {
     hideToolbarOnScroll,
     messagesContent,
     loginScreen,
+    ref,
     onPtrPullStart,
     onPtrPullMove,
     onPtrPullEnd,
@@ -157,9 +159,6 @@ const Page = /*#__PURE__*/forwardRef((props, ref) => {
     if (elRef.current !== pageEl) return;
     emit(props, 'pageTabHide');
   };
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   const attachEvents = () => {
     f7ready(() => {
       f7.on('pageMounted', onPageMounted);
@@ -296,8 +295,11 @@ const Page = /*#__PURE__*/forwardRef((props, ref) => {
     style: style,
     className: classes,
     "data-name": name,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs), fixedList, slotsFixed, pageContentEl);
-});
+};
 Page.displayName = 'f7-page';
 export default Page;