framework7-react - npm Package Compare versions

Comparing version 8.3.4 to 9.0.0-beta.1

components/toolbar-pane.d.ts

+
+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;
+  

components/toolbar-pane.js

+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;

shared/set-ref.js

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

components/accordion-content.js

@@ -1,3 +0,3 @@
-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 from 'react';
 import { classNames, getExtraAttrs } from '../shared/utils.js';
@@ -7,3 +7,3 @@ import { colorClasses } from '../shared/mixins.js';
 
-const AccordionContent = /*#__PURE__*/forwardRef((props, ref) => {
+const AccordionContent = props => {
   const {
@@ -13,8 +13,5 @@ className,
     style,
+    ref,
     children
   } = props;
-  const elRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   const extraAttrs = getExtraAttrs(props);
@@ -26,6 +23,6 @@ const classes = classNames(className, 'accordion-item-content', colorClasses(props));
     className: classes,
-    ref: elRef
+    ref: ref
   }, extraAttrs), children);
-});
+};
 AccordionContent.displayName = 'f7-accordion-content';
 export default AccordionContent;

components/accordion-item.js

@@ -1,3 +0,3 @@
-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';
@@ -7,5 +7,6 @@ import { classNames, getExtraAttrs, emit } from '../shared/utils.js';
 import { f7, f7ready } from '../shared/f7.js';
+import { setRef } from '../shared/set-ref.js';
 
 
-const AccordionItem = /*#__PURE__*/forwardRef((props, ref) => {
+const AccordionItem = props => {
   const {
@@ -16,8 +17,6 @@ className,
     children,
-    opened
+    opened,
+    ref
   } = props;
   const elRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   const onBeforeOpen = (el, prevent) => {
@@ -77,6 +76,9 @@ if (elRef.current !== el) return;
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs), children);
-});
+};
 AccordionItem.displayName = 'f7-accordion-item';
 export default AccordionItem;

components/accordion-toggle.js

@@ -1,8 +0,9 @@
-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 AccordionToggle = /*#__PURE__*/forwardRef((props, ref) => {
+const AccordionToggle = props => {
   const {
@@ -12,8 +13,6 @@ className,
     style,
-    children
+    children,
+    ref
   } = props;
   const elRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   const extraAttrs = getExtraAttrs(props);
@@ -26,6 +25,9 @@ const classes = classNames(className, 'accordion-item-toggle', colorClasses(props));
   }, extraAttrs, {
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }), children);
-});
+};
 AccordionToggle.displayName = 'f7-accordion-toggle';
 export default AccordionToggle;

components/accordion.js

@@ -1,8 +0,9 @@
-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, useImperativeHandle, useRef } 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 Accordion = /*#__PURE__*/forwardRef((props, ref) => {
+const Accordion = props => {
   const {
@@ -13,8 +14,6 @@ className,
     accordionOpposite,
-    children
+    children,
+    ref
   } = props;
   const elRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   const extraAttrs = getExtraAttrs(props);
@@ -26,6 +25,9 @@ const classes = classNames(className, 'accordion-list', accordionOpposite && 'accordion-opposite', colorClasses(props));
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs), children);
-});
+};
 Accordion.displayName = 'f7-accordion';
 export default Accordion;

components/actions-button.js

@@ -1,9 +0,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, getSlots, emit } from '../shared/utils.js';
 import { colorClasses } from '../shared/mixins.js';
 import { f7 } from '../shared/f7.js';
+import { setRef } from '../shared/set-ref.js';
 
 
-const ComponentName = /*#__PURE__*/forwardRef((props, ref) => {
+const ComponentName = props => {
   const {
@@ -14,9 +15,7 @@ className,
     strong,
-    close = true
+    close = true,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   const classes = classNames(className, {
@@ -43,3 +42,6 @@ 'actions-button': true,
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs, {
@@ -50,4 +52,4 @@ onClick: onClick
   }, slots.default));
-});
+};
 ComponentName.displayName = 'f7-actions-button';
 export default ComponentName;

components/actions-group.js

@@ -1,8 +0,9 @@
-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 ActionsGroup = /*#__PURE__*/forwardRef((props, ref) => {
+const ActionsGroup = props => {
   const {
@@ -12,9 +13,7 @@ className,
     style,
-    children
+    children,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   const classes = classNames(className, 'actions-group', colorClasses(props));
@@ -25,6 +24,9 @@ return /*#__PURE__*/React.createElement("div", _extends({
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs), children);
-});
+};
 ActionsGroup.displayName = 'f7-actions-group';
 export default ActionsGroup;

components/actions-label.js

@@ -1,8 +0,9 @@
-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 { setRef } from '../shared/set-ref.js';
 
 
-const ActionsLabel = /*#__PURE__*/forwardRef((props, ref) => {
+const ActionsLabel = props => {
   const {
@@ -13,9 +14,7 @@ className,
     children,
-    strong
+    strong,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   const classes = classNames(className, 'actions-label', {
@@ -31,8 +30,11 @@ 'actions-button-strong': strong
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs, {
     onClick: onClick
   }), children);
-});
+};
 ActionsLabel.displayName = 'f7-actions-label';
 export default ActionsLabel;

components/actions.js

@@ -1,3 +0,3 @@
-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';
@@ -9,6 +9,7 @@ import { classNames, getExtraAttrs, emit } from '../shared/utils.js';
 import { modalStateClasses } from '../shared/modal-state-classes.js';
+import { setRef } from '../shared/set-ref.js';
 
 
 
-const Actions = /*#__PURE__*/forwardRef((props, ref) => {
+const Actions = props => {
   const {
@@ -21,3 +22,4 @@ className,
     opened = false,
-    animate
+    animate,
+    ref
   } = props;
@@ -46,6 +48,2 @@ const extraAttrs = getExtraAttrs(props);
   };
-  useImperativeHandle(ref, () => ({
-    el: elRef.current,
-    f7Actions: () => f7Actions.current
-  }));
 
@@ -127,6 +125,11 @@ // watch opened changes
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el, {
+        f7Actions: () => f7Actions.current
+      });
+    }
   }, extraAttrs), children);
-});
+};
 Actions.displayName = 'f7-actions';
 export default Actions;

components/app.js

@@ -1,3 +0,3 @@
-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';
@@ -8,2 +8,3 @@ import { classNames, getExtraAttrs } from '../shared/utils.js';
 import { f7init, f7 } from '../shared/f7.js';
+import { setRef } from '../shared/set-ref.js';
 
@@ -13,3 +14,3 @@
 
-const App = /*#__PURE__*/forwardRef((props, ref) => {
+const App = props => {
   const {
@@ -19,2 +20,3 @@ className,
     children,
+    ref,
     ...rest
@@ -25,5 +27,2 @@ } = props;
   const elRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   const classes = classNames(className, 'framework7-root', colorClasses(props));
@@ -52,6 +51,9 @@
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs), children, /*#__PURE__*/React.createElement(RoutableModals, null));
-});
+};
 App.displayName = 'f7-app';
 export default App;

components/area-chart.js

@@ -1,8 +0,9 @@
-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, useState, useEffect } 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, useState, useEffect } from 'react';
 import { classNames, getExtraAttrs, emit } from '../shared/utils.js';
 import { f7 } from '../shared/f7.js';
+import { setRef } from '../shared/set-ref.js';
 
 
-const AreaChart = /*#__PURE__*/forwardRef((props, ref) => {
+const AreaChart = props => {
   const {
@@ -28,3 +29,4 @@ className,
     formatTooltipDataset,
-    children
+    children,
+    ref
   } = props;
@@ -39,5 +41,2 @@ const [currentIndex, setCurrentIndex] = useState(null);
   const linesOffsets = useRef(null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   const getVisibleLegends = () => {
@@ -51,6 +50,5 @@ if (!maxAxisLabels || axisLabels.length <= maxAxisLabels) return axisLabels;
     const summValues = [];
-    datasets.filter((dataset, index) => !hiddenDatasets.includes(index)).forEach(_ref => {
-      let {
-        values
-      } = _ref;
+    datasets.filter((dataset, index) => !hiddenDatasets.includes(index)).forEach(({
+      values
+    }) => {
       values.forEach((value, valueIndex) => {
@@ -71,6 +69,5 @@ if (!summValues[valueIndex]) summValues[valueIndex] = 0;
     if (lineChart) {
-      datasets.forEach(_ref2 => {
-        let {
-          values
-        } = _ref2;
+      datasets.forEach(({
+        values
+      }) => {
         const datasetMaxValue = Math.max(...values);
@@ -82,8 +79,7 @@ if (datasetMaxValue > maxValue) maxValue = datasetMaxValue;
     }
-    datasets.filter((dataset, index) => !hiddenDatasets.includes(index)).forEach(_ref3 => {
-      let {
-        label,
-        values,
-        color
-      } = _ref3;
+    datasets.filter((dataset, index) => !hiddenDatasets.includes(index)).forEach(({
+      label,
+      values,
+      color
+    }) => {
       const points = values.map((originalValue, valueIndex) => {
@@ -170,8 +166,7 @@ lastValues[valueIndex] += originalValue;
       <ul class="area-chart-tooltip-list">
-        ${currentValues.map(_ref4 => {
-      let {
-        label,
-        color,
-        value
-      } = _ref4;
+        ${currentValues.map(({
+      label,
+      color,
+      value
+    }) => {
       const valueText = formatTooltipDataset ? formatTooltipDataset(label, value, color) : `${label}: ${value}`;
@@ -278,3 +273,6 @@ return `
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs), /*#__PURE__*/React.createElement("svg", {
@@ -324,4 +322,4 @@ xmlns: "http://www.w3.org/2000/svg",
   }), formatLegendLabel(dataset.label)))), children);
-});
+};
 AreaChart.displayName = 'f7-area-chart';
 export default AreaChart;

components/badge.js

@@ -1,6 +0,7 @@
-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 { useTooltip } from '../shared/use-tooltip.js';
+import { setRef } from '../shared/set-ref.js';
 
@@ -13,3 +14,3 @@
 
-const Badge = /*#__PURE__*/forwardRef((props, ref) => {
+const Badge = props => {
   const {
@@ -19,9 +20,7 @@ className,
     style,
-    children
+    children,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   useTooltip(elRef, props);
@@ -33,6 +32,9 @@ const classes = classNames(className, 'badge', colorClasses(props));
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs), children);
-});
+};
 Badge.displayName = 'f7-badge';
 export default Badge;

components/block-footer.js

@@ -1,8 +0,9 @@
-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 BlockFooter = /*#__PURE__*/forwardRef((props, ref) => {
+const BlockFooter = props => {
   const {
@@ -12,9 +13,7 @@ className,
     style,
-    children
+    children,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   const classes = classNames(className, 'block-footer', colorClasses(props));
@@ -25,6 +24,9 @@ return /*#__PURE__*/React.createElement("div", _extends({
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs), children);
-});
+};
 BlockFooter.displayName = 'f7-block-footer';
 export default BlockFooter;

components/block-header.js

@@ -1,8 +0,9 @@
-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 BlockHeader = /*#__PURE__*/forwardRef((props, ref) => {
+const BlockHeader = props => {
   const {
@@ -12,9 +13,7 @@ className,
     style,
-    children
+    children,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   const classes = classNames(className, 'block-header', colorClasses(props));
@@ -25,6 +24,9 @@ return /*#__PURE__*/React.createElement("div", _extends({
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs), children);
-});
+};
 BlockHeader.displayName = 'f7-block-header';
 export default BlockHeader;

components/block-title.js

@@ -1,8 +0,9 @@
-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 BlockTitle = /*#__PURE__*/forwardRef((props, ref) => {
+const BlockTitle = props => {
   const {
@@ -14,9 +15,7 @@ className,
     large,
-    medium
+    medium,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   const classes = classNames(className, 'block-title', {
@@ -30,6 +29,9 @@ 'block-title-large': large,
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs), children);
-});
+};
 BlockTitle.displayName = 'f7-block-title';
 export default BlockTitle;

components/block.js

@@ -1,9 +0,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 { useTab } from '../shared/use-tab.js';
+import { setRef } from '../shared/set-ref.js';
 
 
-const Block = /*#__PURE__*/forwardRef((props, ref) => {
+const Block = props => {
   const {
@@ -42,9 +43,7 @@ className,
     style,
-    children
+    children,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   useTab(elRef, props);
@@ -86,6 +85,9 @@ const classes = classNames(className, 'block', {
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs), children);
-});
+};
 Block.displayName = 'f7-block';
 export default Block;

components/breadcrumbs-collapsed.js

@@ -1,7 +0,8 @@
-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 { setRef } from '../shared/set-ref.js';
 
 
-const BreadcrumbsCollapsed = /*#__PURE__*/forwardRef((props, ref) => {
+const BreadcrumbsCollapsed = props => {
   const {
@@ -11,9 +12,7 @@ className,
     style,
-    children
+    children,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   const onClick = e => {
@@ -24,3 +23,6 @@ emit(props, 'click', e);
     className: classNames('breadcrumbs-collapsed', className),
-    ref: elRef,
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    },
     id: id,
@@ -30,4 +32,4 @@ style: style,
   }, extraAttrs), /*#__PURE__*/React.createElement("span", null), children);
-});
+};
 BreadcrumbsCollapsed.displayName = 'f7-breadcrumbs-collapsed';
 export default BreadcrumbsCollapsed;

components/breadcrumbs-item.js

@@ -1,7 +0,8 @@
-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 { setRef } from '../shared/set-ref.js';
 
 
-const BreadcrumbsItem = /*#__PURE__*/forwardRef((props, ref) => {
+const BreadcrumbsItem = props => {
   const {
@@ -12,9 +13,7 @@ className,
     active,
-    children
+    children,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   const onClick = e => {
@@ -25,3 +24,6 @@ emit(props, 'click', e);
     className: classNames('breadcrumbs-item', className, active && 'breadcrumbs-item-active'),
-    ref: elRef,
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    },
     id: id,
@@ -31,4 +33,4 @@ style: style,
   }, extraAttrs), children);
-});
+};
 BreadcrumbsItem.displayName = 'f7-breadcrumbs-item';
 export default BreadcrumbsItem;

components/breadcrumbs-separator.js

@@ -1,25 +0,27 @@
-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 { setRef } from '../shared/set-ref.js';
 
 
-const BreadcrumbsSeparator = /*#__PURE__*/forwardRef((props, ref) => {
+const BreadcrumbsSeparator = props => {
   const {
     className,
     id,
-    style
+    style,
+    ref
   } = 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,
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    },
     id: id,
     style: style
   }, extraAttrs));
-});
+};
 BreadcrumbsSeparator.displayName = 'f7-breadcrumbs-separator';
 export default BreadcrumbsSeparator;

components/breadcrumbs.js

@@ -1,7 +0,8 @@
-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 { setRef } from '../shared/set-ref.js';
 
 
-const Breadcrumbs = /*#__PURE__*/forwardRef((props, ref) => {
+const Breadcrumbs = props => {
   const {
@@ -11,17 +12,18 @@ className,
     style,
-    children
+    children,
+    ref
   } = 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,
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    },
     id: id,
     style: style
   }, extraAttrs), children);
-});
+};
 Breadcrumbs.displayName = 'f7-breadcrumbs';
 export default Breadcrumbs;

components/button.js

@@ -1,3 +0,3 @@
-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, extend, isStringProp, emit } from '../shared/utils.js';
@@ -9,5 +9,6 @@ import { colorClasses, actionsAttrs, actionsClasses, routerAttrs, routerClasses } from '../shared/mixins.js';
 import Preloader from './preloader.js';
+import { setRef } from '../shared/set-ref.js';
 
 
-const Button = /*#__PURE__*/forwardRef((props, ref) => {
+const Button = props => {
   const {
@@ -50,3 +51,4 @@ className,
     preloaderColor,
-    loading
+    loading,
+    ref
   } = props;
@@ -58,5 +60,2 @@ const extraAttrs = getExtraAttrs(props);
   };
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   useTooltip(elRef, props);
@@ -114,3 +113,6 @@ useRouteProps(elRef, props);
     return /*#__PURE__*/React.createElement(ButtonTag, _extends({
-      ref: elRef,
+      ref: el => {
+        elRef.current = el;
+        setRef(ref, el);
+      },
       id: id,
@@ -127,3 +129,6 @@ style: style,
   return /*#__PURE__*/React.createElement(ButtonTag, _extends({
-    ref: elRef,
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    },
     id: id,
@@ -135,4 +140,4 @@ style: style,
   }), iconEl, textEl, children);
-});
+};
 Button.displayName = 'f7-button';
 export default Button;

components/card-content.js

@@ -1,8 +0,9 @@
-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 CardContent = /*#__PURE__*/forwardRef((props, ref) => {
+const CardContent = props => {
   const {
@@ -13,9 +14,7 @@ className,
     children,
-    padding = true
+    padding = true,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   const classes = classNames(className, 'card-content', {
@@ -28,6 +27,9 @@ 'card-content-padding': padding
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs), children);
-});
+};
 CardContent.displayName = 'f7-card-content';
 export default CardContent;

components/card-footer.js

@@ -1,8 +0,9 @@
-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 CardFooter = /*#__PURE__*/forwardRef((props, ref) => {
+const CardFooter = props => {
   const {
@@ -12,9 +13,7 @@ className,
     style,
-    children
+    children,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   const classes = classNames(className, 'card-footer', colorClasses(props));
@@ -25,6 +24,9 @@ return /*#__PURE__*/React.createElement("div", _extends({
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs), children);
-});
+};
 CardFooter.displayName = 'f7-card-footer';
 export default CardFooter;

components/card-header.js

@@ -1,8 +0,9 @@
-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 CardHeader = /*#__PURE__*/forwardRef((props, ref) => {
+const CardHeader = props => {
   const {
@@ -12,9 +13,7 @@ className,
     style,
-    children
+    children,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   const classes = classNames(className, 'card-header', colorClasses(props));
@@ -25,6 +24,9 @@ return /*#__PURE__*/React.createElement("div", _extends({
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs), children);
-});
+};
 CardHeader.displayName = 'f7-card-header';
 export default CardHeader;

components/card.js

@@ -1,3 +0,3 @@
-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';
@@ -11,5 +11,6 @@ import CardHeader from './card-header.js';
 import { watchProp } from '../shared/watch-prop.js';
+import { setRef } from '../shared/set-ref.js';
 
 
-const Card = /*#__PURE__*/forwardRef((props, ref) => {
+const Card = props => {
   const {
@@ -40,3 +41,4 @@ className,
     backdrop,
-    backdropEl
+    backdropEl,
+    ref
   } = props;
@@ -112,7 +114,2 @@ const extraAttrs = getExtraAttrs(props);
   });
-  useImperativeHandle(ref, () => ({
-    el: elRef.current,
-    open,
-    close
-  }));
   let headerEl;
@@ -156,6 +153,12 @@ let contentEl;
     "data-backdrop-el": backdropEl,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el, {
+        open,
+        close
+      });
+    }
   }, extraAttrs), headerEl, contentEl, footerEl, slots.default);
-});
+};
 Card.displayName = 'f7-card';
 export default Card;

components/checkbox.js

@@ -1,8 +0,9 @@
-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, useEffect } 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, useEffect } from 'react';
 import { classNames, getExtraAttrs, emit } from '../shared/utils.js';
 import { colorClasses } from '../shared/mixins.js';
+import { setRef } from '../shared/set-ref.js';
 
 
-const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
+const Checkbox = props => {
   const {
@@ -19,3 +20,4 @@ className,
     defaultChecked,
-    indeterminate
+    indeterminate,
+    ref
   } = props;
@@ -25,6 +27,2 @@ const extraAttrs = getExtraAttrs(props);
   const inputElRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current,
-    inputEl: inputElRef.current
-  }));
   const onChange = event => {
@@ -60,6 +58,11 @@ emit(props, 'change', event);
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el, {
+        inputEl: inputElRef.current
+      });
+    }
   }, extraAttrs), inputEl, iconEl, children);
-});
+};
 Checkbox.displayName = 'f7-checkbox';
 export default Checkbox;

components/chip.js

@@ -1,3 +0,3 @@
-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, getSlots, emit } from '../shared/utils.js';
@@ -7,5 +7,6 @@ import { colorClasses } from '../shared/mixins.js';
 import { useIcon } from '../shared/use-icon.js';
+import { setRef } from '../shared/set-ref.js';
 
 
-const Chip = /*#__PURE__*/forwardRef((props, ref) => {
+const Chip = props => {
   const {
@@ -20,3 +21,4 @@ className,
     mediaBgColor,
-    outline
+    outline,
+    ref
   } = props;
@@ -31,5 +33,2 @@ const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   useTooltip(elRef, props);
@@ -65,8 +64,11 @@ const slots = getSlots(props);
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs, {
     onClick: onClick
   }), mediaEl, labelEl, deleteEl);
-});
+};
 Chip.displayName = 'f7-chip';
 export default Chip;

components/fab-backdrop.js

@@ -1,7 +0,8 @@
-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 { getExtraAttrs, classNames } from '../shared/utils.js';
+import { setRef } from '../shared/set-ref.js';
 
 
-const FabBackdrop = /*#__PURE__*/forwardRef((props, ref) => {
+const FabBackdrop = props => {
   const {
@@ -11,9 +12,7 @@ className,
     style,
-    children
+    children,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   const classes = classNames(className, 'fab-backdrop');
@@ -24,6 +23,9 @@ return /*#__PURE__*/React.createElement("div", _extends({
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs), children);
-});
+};
 FabBackdrop.displayName = 'f7-fab-backdrop';
 export default FabBackdrop;

components/fab-button.js

@@ -1,9 +0,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, emit } from '../shared/utils.js';
 import { colorClasses } from '../shared/mixins.js';
 import { useTooltip } from '../shared/use-tooltip.js';
+import { setRef } from '../shared/set-ref.js';
 
 
-const FabButton = /*#__PURE__*/forwardRef((props, ref) => {
+const FabButton = props => {
   const {
@@ -16,3 +17,4 @@ className,
     label,
-    target
+    target,
+    ref
   } = props;
@@ -24,5 +26,2 @@ const extraAttrs = getExtraAttrs(props);
   };
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   useTooltip(elRef, props);
@@ -44,8 +43,11 @@ const classes = classNames(className, {
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs, {
     onClick: onClick
   }), children, labelEl);
-});
+};
 FabButton.displayName = 'f7-fab-button';
 export default FabButton;

components/fab-buttons.js

@@ -1,8 +0,9 @@
-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 FabButtons = /*#__PURE__*/forwardRef((props, ref) => {
+const FabButtons = props => {
   const {
@@ -13,9 +14,7 @@ className,
     children,
-    position
+    position,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   const classes = classNames(className, 'fab-buttons', `fab-buttons-${position}`, colorClasses(props));
@@ -26,6 +25,9 @@ return /*#__PURE__*/React.createElement("div", _extends({
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs), children);
-});
+};
 FabButtons.displayName = 'f7-fab-buttons';
 export default FabButtons;

components/fab.js

@@ -1,9 +0,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, getSlots, emit } from '../shared/utils.js';
 import { colorClasses } from '../shared/mixins.js';
 import { useTooltip } from '../shared/use-tooltip.js';
+import { setRef } from '../shared/set-ref.js';
 
 
-const Fab = /*#__PURE__*/forwardRef((props, ref) => {
+const Fab = props => {
   const {
@@ -17,3 +18,4 @@ className,
     text,
-    position = 'right-bottom'
+    position = 'right-bottom',
+    ref
   } = props;
@@ -25,5 +27,2 @@ const extraAttrs = getExtraAttrs(props);
   };
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   useTooltip(elRef, props);
@@ -74,6 +73,9 @@ let hrefComputed = href;
     "data-morph-to": morphTo,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs), linkEl, rootChildren, rootSlots);
-});
+};
 Fab.displayName = 'f7-fab';
 export default Fab;

components/gauge.js

@@ -1,8 +0,9 @@
-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 no-nested-ternary: off */
-import React, { forwardRef, useRef, useImperativeHandle } from 'react';
+import React, { useRef } from 'react';
 import { classNames, getExtraAttrs } from '../shared/utils.js';
+import { setRef } from '../shared/set-ref.js';
 
 
-const Gauge = /*#__PURE__*/forwardRef((props, ref) => {
+const Gauge = props => {
   const {
@@ -26,9 +27,7 @@ className,
     labelFontSize = 14,
-    labelFontWeight = 400
+    labelFontWeight = 400,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   const classes = classNames(className, 'gauge');
@@ -43,3 +42,6 @@ const semiCircle = type === 'semicircle';
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs), /*#__PURE__*/React.createElement("svg", {
@@ -104,4 +106,4 @@ className: "gauge-svg",
   }, labelText)));
-});
+};
 Gauge.displayName = 'f7-gauge';
 export default Gauge;

components/icon.js

@@ -1,3 +0,3 @@
-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, extend } from '../shared/utils.js';
@@ -7,5 +7,6 @@ import { colorClasses } from '../shared/mixins.js';
 import { useTheme } from '../shared/use-theme.js';
+import { setRef } from '../shared/set-ref.js';
 
 
-const Icon = /*#__PURE__*/forwardRef((props, ref) => {
+const Icon = props => {
   const theme = useTheme();
@@ -22,9 +23,7 @@ const {
     ios,
-    size
+    size,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   useTooltip(elRef, props);
@@ -80,6 +79,9 @@ const getClasses = () => {
     className: getClasses(),
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs), getIconText(), children);
-});
+};
 Icon.displayName = 'f7-icon';
 export default Icon;

components/input.js

@@ -1,3 +0,3 @@
-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, useState } 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, useState } from 'react';
 import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect.js';
@@ -11,5 +11,6 @@ import { classNames, getExtraAttrs, getSlots, emit, extend } from '../shared/utils.js';
 import TextEditor from './text-editor.js';
+import { setRef } from '../shared/set-ref.js';
 
 
-const Input = /*#__PURE__*/forwardRef((props, ref) => {
+const Input = props => {
   const {
@@ -70,3 +71,4 @@ className,
     // Text editor
-    textEditorParams
+    textEditorParams,
+    ref
   } = props;
@@ -120,6 +122,3 @@ const [inputInvalid, setInputInvalid] = useState(false);
   };
-  const onInput = function () {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
+  const onInput = (...args) => {
     emit(props, 'input', ...args);
@@ -130,13 +129,7 @@ if (!(validateOnBlur || validateOnBlur === '') && (validate || validate === '') && inputElRef.current) {
   };
-  const onFocus = function () {
-    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-      args[_key2] = arguments[_key2];
-    }
+  const onFocus = (...args) => {
     emit(props, 'focus', ...args);
     setInputFocused(true);
   };
-  const onBlur = function () {
-    for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-      args[_key3] = arguments[_key3];
-    }
+  const onBlur = (...args) => {
     emit(props, 'blur', ...args);
@@ -148,6 +141,3 @@ if ((validate || validate === '' || validateOnBlur || validateOnBlur === '') && inputElRef.current) {
   };
-  const onChange = function () {
-    for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
-      args[_key4] = arguments[_key4];
-    }
+  const onChange = (...args) => {
     emit(props, 'change', ...args);
@@ -158,5 +148,2 @@ if (type === 'texteditor') {
   };
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   const onMount = () => {
@@ -387,3 +374,6 @@ f7ready(() => {
       style: style,
-      ref: elRef
+      ref: el => {
+        elRef.current = el;
+        setRef(ref, el);
+      }
     }, extraAttrs), inputEl, (errorMessage || slots['error-message'] && slots['error-message'].length) && errorMessageForce && /*#__PURE__*/React.createElement("div", {
@@ -398,4 +388,4 @@ className: "input-error-message"
   return inputEl;
-});
+};
 Input.displayName = 'f7-input';
 export default Input;

components/link.js

@@ -1,3 +0,3 @@
-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, useContext } 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, useContext } from 'react';
 import { classNames, getExtraAttrs, isStringProp, emit } from '../shared/utils.js';
@@ -11,6 +11,7 @@ import { colorClasses, routerAttrs, routerClasses, actionsAttrs, actionsClasses } from '../shared/mixins.js';
 import { useSmartSelect } from '../shared/use-smart-select.js';
+import { setRef } from '../shared/set-ref.js';
 
 
 
-const Link = /*#__PURE__*/forwardRef((props, ref) => {
+const Link = props => {
   const f7SmartSelect = useRef(null);
@@ -34,3 +35,4 @@ const {
     smartSelect,
-    smartSelectParams
+    smartSelectParams,
+    ref
   } = props;
@@ -44,6 +46,2 @@ const tabbarContext = useContext(TabbarContext);
   };
-  useImperativeHandle(ref, () => ({
-    el: elRef.current,
-    f7SmartSelect: () => f7SmartSelect.current
-  }));
   useTooltip(elRef, props);
@@ -89,3 +87,8 @@ useRouteProps(elRef, props);
   return /*#__PURE__*/React.createElement("a", _extends({
-    ref: elRef,
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el, {
+        f7SmartSelect: () => f7SmartSelect.current
+      });
+    },
     id: id,
@@ -97,4 +100,4 @@ style: style,
   }), iconEl, textEl, children);
-});
+};
 Link.displayName = 'f7-link';
 export default Link;

components/list-button.js

@@ -1,3 +0,3 @@
-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, isStringProp, emit } from '../shared/utils.js';
@@ -7,5 +7,6 @@ import { colorClasses, actionsAttrs, actionsClasses, routerAttrs, routerClasses } from '../shared/mixins.js';
 import { useRouteProps } from '../shared/use-route-props.js';
+import { setRef } from '../shared/set-ref.js';
 
 
-const ListButton = /*#__PURE__*/forwardRef((props, ref) => {
+const ListButton = props => {
   const {
@@ -22,3 +23,4 @@ className,
     href,
-    target
+    target,
+    ref
   } = props;
@@ -31,5 +33,2 @@ const extraAttrs = getExtraAttrs(props);
   };
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   useTooltip(linkElRef, props);
@@ -56,3 +55,6 @@ useRouteProps(linkElRef, props);
     className: className,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs), /*#__PURE__*/React.createElement("a", _extends({
@@ -64,4 +66,4 @@ className: linkClasses
   }), title, text, children));
-});
+};
 ListButton.displayName = 'f7-list-button';
 export default ListButton;

components/list-group.js

@@ -1,9 +0,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, useContext } 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, useContext } from 'react';
 import { classNames, getExtraAttrs } from '../shared/utils.js';
 import { colorClasses } from '../shared/mixins.js';
 import { ListContext } from '../shared/list-context.js';
+import { setRef } from '../shared/set-ref.js';
 
 
-const ListGroup = /*#__PURE__*/forwardRef((props, ref) => {
+const ListGroup = props => {
   const {
@@ -19,3 +20,4 @@ className,
     sortableTapHold,
-    sortableMoveElements
+    sortableMoveElements,
+    ref
   } = props;
@@ -25,5 +27,2 @@ const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   const classes = classNames(className, 'list-group', {
@@ -40,3 +39,6 @@ 'media-list': mediaList,
     "data-sortable-move-elements": typeof sortableMoveElements !== 'undefined' ? sortableMoveElements.toString() : undefined,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs), /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement(ListContext.Provider, {
@@ -50,4 +52,4 @@ value: {
   }, children)));
-});
+};
 ListGroup.displayName = 'f7-list-group';
 export default ListGroup;

components/list-index.js

@@ -1,3 +0,3 @@
-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';
@@ -8,5 +8,6 @@ import { classNames, getExtraAttrs, emit } from '../shared/utils.js';
 import { watchProp } from '../shared/watch-prop.js';
+import { setRef } from '../shared/set-ref.js';
 
 
-const ListIndex = /*#__PURE__*/forwardRef((props, ref) => {
+const ListIndex = props => {
   const f7ListIndex = useRef(null);
@@ -24,3 +25,4 @@ const {
     iosItemHeight = 14,
-    mdItemHeight = 14
+    mdItemHeight = 14,
+    ref
   } = props;
@@ -37,8 +39,2 @@ const extraAttrs = getExtraAttrs(props);
   };
-  useImperativeHandle(ref, () => ({
-    el: elRef.current,
-    f7ListIndex: () => f7ListIndex.current,
-    update,
-    scrollListToIndex
-  }));
   watchProp(indexes, newValue => {
@@ -83,6 +79,13 @@ if (!f7ListIndex.current) return;
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el, {
+        update,
+        scrollListToIndex,
+        f7ListIndex: () => f7ListIndex.current
+      });
+    }
   }, extraAttrs), children);
-});
+};
 ListIndex.displayName = 'f7-list-index';
 export default ListIndex;

components/list-input.js

@@ -1,3 +0,3 @@
-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, useState, useContext } 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, useState, useContext } from 'react';
 import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect.js';
@@ -10,5 +10,6 @@ import { classNames, getExtraAttrs, emit, getSlots, extend } from '../shared/utils.js';
 import { ListContext } from '../shared/list-context.js';
+import { setRef } from '../shared/set-ref.js';
 
 
-const ListInput = /*#__PURE__*/forwardRef((props, ref) => {
+const ListInput = props => {
   const {
@@ -74,3 +75,4 @@ className,
     // Text editor
-    textEditorParams
+    textEditorParams,
+    ref
   } = props;
@@ -129,6 +131,3 @@ const [inputInvalid, setInputInvalid] = useState(false);
   };
-  const onInput = function () {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
+  const onInput = (...args) => {
     emit(props, 'input', ...args);
@@ -139,13 +138,7 @@ if (!(validateOnBlur || validateOnBlur === '') && (validate || validate === '') && inputElRef.current) {
   };
-  const onFocus = function () {
-    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-      args[_key2] = arguments[_key2];
-    }
+  const onFocus = (...args) => {
     emit(props, 'focus', ...args);
     setInputFocused(true);
   };
-  const onBlur = function () {
-    for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-      args[_key3] = arguments[_key3];
-    }
+  const onBlur = (...args) => {
     emit(props, 'blur', ...args);
@@ -157,6 +150,3 @@ if ((validate || validate === '' || validateOnBlur || validateOnBlur === '') && inputElRef.current) {
   };
-  const onChange = function () {
-    for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
-      args[_key4] = arguments[_key4];
-    }
+  const onChange = (...args) => {
     emit(props, 'change', ...args);
@@ -167,5 +157,2 @@ if (type === 'texteditor') {
   };
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   const onMount = () => {
@@ -391,3 +378,6 @@ if (!elRef.current && !itemContentElRef.current) return;
   return /*#__PURE__*/React.createElement("li", _extends({
-    ref: elRef,
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    },
     id: id,
@@ -401,4 +391,4 @@ style: style,
   }), slots.root, slots['root-end']);
-});
+};
 ListInput.displayName = 'f7-list-input';
 export default ListInput;

components/list-item-content.js

 import React, { useRef, useEffect } from 'react';
 import { classNames } from '../shared/utils.js';
 import { colorClasses } from '../shared/mixins.js';
+import { setRef } from '../shared/set-ref.js';
 import Badge from './badge.js';
@@ -36,3 +37,4 @@ const ListItemContent = props => {
     isSortableOppositeComputed,
-    slots
+    slots,
+    ref
   } = props;
@@ -151,3 +153,6 @@ const inputElRef = useRef(null);
     className: classes,
-    onClick: onClick
+    onClick: onClick,
+    ref: el => {
+      setRef(ref, el);
+    }
   }, isSortableComputed && sortable !== false && isSortableOppositeComputed && /*#__PURE__*/React.createElement("div", {
@@ -154,0 +159,0 @@ className: "sortable-handler"

components/list-item.js

@@ -1,3 +0,3 @@
-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, useContext } 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, useContext } from 'react';
 import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect.js';
@@ -13,2 +13,3 @@ import { classNames, getExtraAttrs, getSlots, emit, isStringProp } from '../shared/utils.js';
 import { ListContext } from '../shared/list-context.js';
+import { setRef } from '../shared/set-ref.js';
 
@@ -56,3 +57,3 @@
 */
-const ListItem = /*#__PURE__*/forwardRef((props, ref) => {
+const ListItem = props => {
   const {
@@ -86,3 +87,4 @@ className,
     virtualListIndex,
-    href
+    href,
+    ref
   } = props;
@@ -168,6 +170,2 @@ const listContext = useContext(ListContext);
   };
-  useImperativeHandle(ref, () => ({
-    el: elRef.current,
-    f7SmartSelect: () => f7SmartSelect.current
-  }));
   useTooltip(elRef, props);
@@ -290,3 +288,8 @@ useRouteProps(linkElRef, props);
     return /*#__PURE__*/React.createElement("li", {
-      ref: elRef,
+      ref: el => {
+        elRef.current = el;
+        setRef(ref, el, {
+          f7SmartSelect: () => f7SmartSelect.current
+        });
+      },
       id: id,
@@ -321,4 +324,4 @@ style: style,
   }), (swipeout || accordionItem) && slots.default, slots.root, slots['root-end']);
-});
+};
 ListItem.displayName = 'f7-list-item';
 export default ListItem;

components/list.js

@@ -1,3 +0,3 @@
-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';
@@ -9,5 +9,6 @@ import { classNames, getExtraAttrs, getSlots, flattenArray, emit, extend } from '../shared/utils.js';
 import { useTab } from '../shared/use-tab.js';
+import { setRef } from '../shared/set-ref.js';
 
 
-const List = /*#__PURE__*/forwardRef((props, ref) => {
+const List = props => {
   const f7VirtualList = useRef(null);
@@ -64,3 +65,4 @@ const {
     virtualList,
-    virtualListParams
+    virtualListParams,
+    ref
   } = props;
@@ -88,6 +90,2 @@ const extraAttrs = getExtraAttrs(props);
   };
-  useImperativeHandle(ref, () => ({
-    el: elRef.current,
-    f7VirtualList: () => f7VirtualList.current
-  }));
   useTab(elRef, props);
@@ -223,3 +221,8 @@ const attachEvents = () => {
     id: id,
-    ref: elRef,
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el, {
+        f7VirtualList: () => f7VirtualList.current
+      });
+    },
     style: style,
@@ -238,4 +241,4 @@ className: classes
   }, slots['before-list'], rootChildrenBeforeList, ulChildren.length > 0 && /*#__PURE__*/React.createElement("ul", null, ulChildren), slots['after-list'], rootChildrenAfterList));
-});
+};
 List.displayName = 'f7-list';
 export default List;

components/login-screen-title.js

@@ -1,8 +0,9 @@
-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 LoginScreenTitle = /*#__PURE__*/forwardRef((props, ref) => {
+const LoginScreenTitle = props => {
   const {
@@ -12,9 +13,7 @@ className,
     style,
-    children
+    children,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   const classes = classNames(className, 'login-screen-title', colorClasses(props));
@@ -25,6 +24,9 @@ return /*#__PURE__*/React.createElement("div", _extends({
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs), children);
-});
+};
 LoginScreenTitle.displayName = 'f7-login-screen-title';
 export default LoginScreenTitle;

components/login-screen.js

@@ -1,3 +0,3 @@
-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';
@@ -9,5 +9,6 @@ import { classNames, getExtraAttrs, emit } from '../shared/utils.js';
 import { modalStateClasses } from '../shared/modal-state-classes.js';
+import { setRef } from '../shared/set-ref.js';
 
 
-const LoginScreen = /*#__PURE__*/forwardRef((props, ref) => {
+const LoginScreen = props => {
   const f7LoginScreen = useRef(null);
@@ -21,3 +22,4 @@ const {
     animate,
-    containerEl
+    containerEl,
+    ref
   } = props;
@@ -45,6 +47,2 @@ const extraAttrs = getExtraAttrs(props);
   };
-  useImperativeHandle(ref, () => ({
-    el: elRef.current,
-    f7LoginScreen: () => f7LoginScreen.current
-  }));
 
@@ -106,6 +104,11 @@ // watch opened changes
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el, {
+        f7LoginScreen: () => f7LoginScreen.current
+      });
+    }
   }, extraAttrs), children);
-});
+};
 LoginScreen.displayName = 'f7-login-screen';
 export default LoginScreen;

components/message.js

@@ -1,8 +0,9 @@
-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, getSlots, emit } from '../shared/utils.js';
 import { colorClasses } from '../shared/mixins.js';
+import { setRef } from '../shared/set-ref.js';
 
 
-const Message = /*#__PURE__*/forwardRef((props, ref) => {
+const Message = props => {
   const {
@@ -28,3 +29,4 @@ className,
     sameAvatar,
-    typing
+    typing,
+    ref
   } = props;
@@ -54,5 +56,2 @@ const extraAttrs = getExtraAttrs(props);
   };
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   const slots = getSlots(props);
@@ -75,3 +74,6 @@ const classes = classNames(className, 'message', {
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs, {
@@ -113,4 +115,4 @@ onClick: onClick
   }, footer, slots.footer), slots['content-end']), slots.end);
-});
+};
 Message.displayName = 'f7-message';
 export default Message;

components/messagebar-attachment.js

@@ -1,8 +0,9 @@
-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 { setRef } from '../shared/set-ref.js';
 
 
-const MessagebarAttachment = /*#__PURE__*/forwardRef((props, ref) => {
+const MessagebarAttachment = props => {
   const {
@@ -14,3 +15,4 @@ className,
     image,
-    deletable = true
+    deletable = true,
+    ref
   } = props;
@@ -25,5 +27,2 @@ const extraAttrs = getExtraAttrs(props);
   };
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   const classes = classNames(className, 'messagebar-attachment', colorClasses(props));
@@ -34,3 +33,6 @@ return /*#__PURE__*/React.createElement("div", _extends({
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs, {
@@ -44,4 +46,4 @@ onClick: onClick
   }), children);
-});
+};
 MessagebarAttachment.displayName = 'f7-messagebar-attachment';
 export default MessagebarAttachment;

components/messagebar-attachments.js

@@ -1,8 +0,9 @@
-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 MessagebarAttachments = /*#__PURE__*/forwardRef((props, ref) => {
+const MessagebarAttachments = props => {
   const {
@@ -12,9 +13,7 @@ className,
     style,
-    children
+    children,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   const classes = classNames(className, 'messagebar-attachments', colorClasses(props));
@@ -25,6 +24,9 @@ return /*#__PURE__*/React.createElement("div", _extends({
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs), children);
-});
+};
 MessagebarAttachments.displayName = 'f7-messagebar-attachments';
 export default MessagebarAttachments;

components/messagebar-sheet-image.js

@@ -1,8 +0,9 @@
-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 { setRef } from '../shared/set-ref.js';
 
 
-const MessagebarSheetImage = /*#__PURE__*/forwardRef((props, ref) => {
+const MessagebarSheetImage = props => {
   const {
@@ -14,3 +15,4 @@ className,
     image,
-    checked
+    checked,
+    ref
   } = props;
@@ -23,5 +25,2 @@ const extraAttrs = getExtraAttrs(props);
   };
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   const classes = classNames(className, 'messagebar-sheet-image', 'checkbox', colorClasses(props));
@@ -35,3 +34,6 @@ const styles = {
     style: styles,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs), /*#__PURE__*/React.createElement("input", {
@@ -46,4 +48,4 @@ type: "checkbox",
   }), children);
-});
+};
 MessagebarSheetImage.displayName = 'f7-messagebar-sheet-image';
 export default MessagebarSheetImage;

components/messagebar-sheet-item.js

@@ -1,8 +0,9 @@
-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 MessagebarSheetItem = /*#__PURE__*/forwardRef((props, ref) => {
+const MessagebarSheetItem = props => {
   const {
@@ -12,9 +13,7 @@ className,
     style,
-    children
+    children,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   const classes = classNames(className, 'messagebar-sheet-item', colorClasses(props));
@@ -25,6 +24,9 @@ return /*#__PURE__*/React.createElement("div", _extends({
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs), children);
-});
+};
 MessagebarSheetItem.displayName = 'f7-messagebar-sheet-item';
 export default MessagebarSheetItem;

components/messagebar-sheet.js

@@ -1,8 +0,9 @@
-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 MessagebarSheet = /*#__PURE__*/forwardRef((props, ref) => {
+const MessagebarSheet = props => {
   const {
@@ -12,9 +13,7 @@ className,
     style,
-    children
+    children,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   const classes = classNames(className, 'messagebar-sheet', colorClasses(props));
@@ -25,6 +24,9 @@ return /*#__PURE__*/React.createElement("div", _extends({
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs), children);
-});
+};
 MessagebarSheet.displayName = 'f7-messagebar-sheet';
 export default MessagebarSheet;

components/messagebar.js

@@ -1,3 +0,3 @@
-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';
@@ -10,5 +10,7 @@ import { classNames, getExtraAttrs, emit, getSlots, noUndefinedProps } from '../shared/utils.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);
@@ -36,3 +38,4 @@ const updateSheetVisible = useRef(false);
     placeholder = 'Message',
-    init = true
+    init = true,
+    ref
   } = props;
@@ -72,6 +75,2 @@ const extraAttrs = getExtraAttrs(props);
   };
-  useImperativeHandle(ref, () => ({
-    el: elRef.current,
-    f7Messagebar: () => f7Messagebar.current
-  }));
   watchProp(sheetVisible, () => {
@@ -163,6 +162,11 @@ if (!resizable || !f7Messagebar.current) return;
     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"
@@ -183,7 +187,7 @@ }, slotsBeforeArea, messagebarAttachmentsEl, /*#__PURE__*/React.createElement(Input, _extends({
     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;

components/messages-title.js

@@ -1,8 +0,9 @@
-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 {
@@ -12,9 +13,7 @@ className,
     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));
@@ -25,6 +24,9 @@ return /*#__PURE__*/React.createElement("div", _extends({
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs), children);
-});
+};
 MessagesTitle.displayName = 'f7-messages-title';
 export default MessagesTitle;

components/messages.js

@@ -1,3 +0,3 @@
-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';
@@ -8,6 +8,7 @@ import { classNames, getExtraAttrs, noUndefinedProps } from '../shared/utils.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);
@@ -35,3 +36,4 @@ const mounted = useRef(false);
     typing = false,
-    init = true
+    init = true,
+    ref
   } = props;
@@ -42,6 +44,2 @@ const extraAttrs = getExtraAttrs(props);
   const reactChildrenBefore = useRef(children ? React.Children.count(children) : 0);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current,
-    f7Messages: () => f7Messages.current
-  }));
   const onMount = () => {
@@ -125,6 +123,11 @@ if (!init) return;
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el, {
+        f7Messages: () => f7Messages.current
+      });
+    }
   }, extraAttrs), children);
-});
+};
 Messages.displayName = 'f7-messages';
 export default Messages;

components/nav-left.d.ts

@@ -14,3 +14,2 @@
   backLinkShowText ?: boolean;
-  sliding ?: boolean;
   color?: string;
@@ -17,0 +16,0 @@ colorTheme?: string;

components/nav-left.js

@@ -1,10 +0,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, 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 {
@@ -19,3 +19,3 @@ className,
     backLinkShowText,
-    sliding
+    ref
   } = props;
@@ -27,11 +27,5 @@ const extraAttrs = getExtraAttrs(props);
   };
-  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, {
@@ -47,5 +41,3 @@ href: backLinkUrl || '#',
   }
-  const classes = classNames(className, 'left', {
-    sliding
-  }, colorClasses(props));
+  const classes = classNames(className, 'left', {}, colorClasses(props));
   return /*#__PURE__*/React.createElement("div", _extends({
@@ -55,6 +47,9 @@ id: id,
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs), linkEl, children);
-});
+};
 NavLeft.displayName = 'f7-nav-left';
 export default NavLeft;

components/nav-right.d.ts

@@ -10,3 +10,2 @@
   style?: React.CSSProperties;
-  sliding ?: boolean;
   ref?: React.MutableRefObject<{el: HTMLElement | null}>;
@@ -13,0 +12,0 @@ children?: React.ReactNode;

components/nav-right.js

@@ -1,8 +0,8 @@
-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 {
@@ -13,12 +13,7 @@ className,
     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({
@@ -28,6 +23,9 @@ id: id,
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs), children);
-});
+};
 NavRight.displayName = 'f7-nav-right';
 export default NavRight;

components/nav-title-large.js

@@ -1,8 +0,8 @@
-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 {
@@ -12,9 +12,7 @@ className,
     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));
@@ -25,8 +23,11 @@ return /*#__PURE__*/React.createElement("div", _extends({
     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;

components/nav-title.d.ts

@@ -12,3 +12,2 @@
   subtitle ?: string;
-  sliding ?: boolean;
   ref?: React.MutableRefObject<{el: HTMLElement | null}>;
@@ -15,0 +14,0 @@ children?: React.ReactNode;

components/nav-title.js

@@ -1,8 +0,8 @@
-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 {
@@ -15,9 +15,6 @@ className,
     subtitle,
-    sliding
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   let subtitleEl;
@@ -29,5 +26,3 @@ if (subtitle) {
   }
-  const classes = classNames(className, 'title', {
-    sliding
-  }, colorClasses(props));
+  const classes = classNames(className, 'title', {}, colorClasses(props));
   return /*#__PURE__*/React.createElement("div", _extends({
@@ -37,6 +32,9 @@ id: id,
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs), children, title, subtitleEl);
-});
+};
 NavTitle.displayName = 'f7-nav-title';
 export default NavTitle;

components/navbar.d.ts

@@ -14,3 +14,2 @@
   backLinkShowText ?: boolean;
-  sliding ?: boolean;
   title ?: string;
@@ -17,0 +16,0 @@ subtitle ?: string;

components/navbar.js

@@ -1,3 +0,3 @@
-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';
@@ -8,2 +8,3 @@ import { classNames, getExtraAttrs, emit, getSlots } from '../shared/utils.js';
 import { useTheme } from '../shared/use-theme.js';
+import { setRef } from '../shared/set-ref.js';
 import NavLeft from './nav-left.js';
@@ -14,3 +15,3 @@ import NavTitle from './nav-title.js';
 
-const Navbar = /*#__PURE__*/forwardRef((props, ref) => {
+const Navbar = props => {
   const {
@@ -20,3 +21,2 @@ className,
     style,
-    sliding = true,
     large,
@@ -35,9 +35,7 @@ largeTransparent,
     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);
@@ -79,15 +77,2 @@ const extraAttrs = getExtraAttrs(props);
   };
-  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 => {
@@ -108,8 +93,2 @@ if (!f7) return;
   };
-  useImperativeHandle(ref, () => ({
-    el: elRef.current,
-    hide,
-    show,
-    size
-  }));
   const attachEvents = () => {
@@ -124,5 +103,2 @@ if (!elRef.current) return;
       f7.on('navbarPosition', onNavbarPosition);
-      f7.on('navbarRole', onNavbarRole);
-      f7.on('navbarMasterStack', onNavbarMasterStack);
-      f7.on('navbarMasterUnstack', onNavbarMasterUnstack);
       f7.on('navbarTransparentShow', onNavbarTransparentShow);
@@ -139,5 +115,2 @@ f7.on('navbarTransparentHide', onNavbarTransparentHide);
     f7.off('navbarPosition', onNavbarPosition);
-    f7.off('navbarRole', onNavbarRole);
-    f7.off('navbarMasterStack', onNavbarMasterStack);
-    f7.off('navbarMasterUnstack', onNavbarMasterUnstack);
     f7.off('navbarTransparentShow', onNavbarTransparentShow);
@@ -166,6 +139,2 @@ f7.off('navbarTransparentHide', onNavbarTransparentHide);
     '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
@@ -202,3 +171,2 @@ }, colorClasses(props));
     className: classNames('navbar-inner', innerClass, innerClassName, {
-      sliding,
       'navbar-inner-left-title': addLeftTitleClass,
@@ -212,8 +180,15 @@ 'navbar-inner-centered-title': addCenterTitleClass
     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;

components/page-content.js

@@ -1,3 +0,3 @@
-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';
@@ -9,5 +9,5 @@ import { classNames, getExtraAttrs, emit } from '../shared/utils.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 {
@@ -33,3 +33,4 @@ className,
     messagesContent,
-    loginScreen
+    loginScreen,
+    ref
   } = props;
@@ -62,5 +63,2 @@ const extraAttrs = getExtraAttrs(props);
   };
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   useTab(elRef, props);
@@ -128,6 +126,9 @@ const attachEvents = () => {
     "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;

components/page.js

@@ -1,3 +0,3 @@
-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';
@@ -7,6 +7,7 @@ import { classNames, getExtraAttrs, getSlots, emit } from '../shared/utils.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 {
@@ -40,2 +41,3 @@ className,
     loginScreen,
+    ref,
     onPtrPullStart,
@@ -162,5 +164,2 @@ onPtrPullMove,
   };
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   const attachEvents = () => {
@@ -302,6 +301,9 @@ f7ready(() => {
     "data-name": name,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs), fixedList, slotsFixed, pageContentEl);
-});
+};
 Page.displayName = 'f7-page';
 export default Page;

components/panel.js

@@ -1,3 +0,3 @@
-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';
@@ -8,6 +8,6 @@ import { classNames, getExtraAttrs, noUndefinedProps, emit } from '../shared/utils.js';
 import { watchProp } from '../shared/watch-prop.js';
+import { setRef } from '../shared/set-ref.js';
 
 
-
-const Panel = /*#__PURE__*/forwardRef((props, ref) => {
+const Panel = props => {
   const f7Panel = useRef(null);
@@ -40,3 +40,4 @@ const {
     swipeActiveArea = 0,
-    swipeThreshold = 0
+    swipeThreshold = 0,
+    ref
   } = props;
@@ -85,12 +86,5 @@ const extraAttrs = getExtraAttrs(props);
   };
-  const onResize = function () {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
+  const onResize = (...args) => {
     emit(props, 'panelResize', ...args);
   };
-  useImperativeHandle(ref, () => ({
-    el: elRef.current,
-    f7Panel: () => f7Panel.current
-  }));
   watchProp(resizable, newValue => {
@@ -181,8 +175,13 @@ if (!f7Panel.current) return;
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el, {
+        f7Panel: () => f7Panel.current
+      });
+    }
   }, extraAttrs), children, resizable && /*#__PURE__*/React.createElement("div", {
     className: "panel-resize-handler"
   }));
-});
+};
 Panel.displayName = 'f7-panel';
 export default Panel;

components/photo-browser.d.ts

@@ -23,3 +23,2 @@
   pageBackLinkText ?: string;
-  popupCloseLinkIcon ?: boolean;
   popupCloseLinkText ?: string;
@@ -26,0 +25,0 @@ navbarOfText ?: string;

components/photo-browser.js

@@ -1,2 +0,2 @@
-import { forwardRef, useRef, useImperativeHandle } from 'react';
+import { useRef } from 'react';
 import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect.js';
@@ -6,6 +6,6 @@ import { extend, emit } from '../shared/utils.js';
 import { f7ready, f7 } from '../shared/f7.js';
+import { setRef } from '../shared/set-ref.js';
 
 
-
-const PhotoBrowser = /*#__PURE__*/forwardRef((props, ref) => {
+const PhotoBrowser = props => {
   const f7PhotoBrowser = useRef(null);
@@ -27,3 +27,2 @@ const {
     pageBackLinkText,
-    popupCloseLinkIcon,
     popupCloseLinkText,
@@ -46,3 +45,4 @@ navbarOfText,
     renderStandalone,
-    renderThumb
+    renderThumb,
+    ref
   } = props;
@@ -64,10 +64,2 @@ const open = index => {
   };
-  useImperativeHandle(ref, () => ({
-    f7PhotoBrowser: () => f7PhotoBrowser.current,
-    open,
-    close,
-    expositionToggle,
-    expositionEnable,
-    expositionDisable
-  }));
   watchProp(photos, newValue => {
@@ -110,3 +102,2 @@ const pb = f7PhotoBrowser.current;
           popupCloseLinkText,
-          popupCloseLinkIcon,
           navbarOfText,
@@ -164,5 +155,13 @@ navbarShowCount,
   }, []);
+  setRef(ref, null, {
+    open,
+    close,
+    expositionToggle,
+    expositionEnable,
+    expositionDisable,
+    f7PhotoBrowser: () => f7PhotoBrowser.current
+  });
   return null;
-});
+};
 PhotoBrowser.displayName = 'f7-photo-browser';
 export default PhotoBrowser;

components/pie-chart.js

@@ -1,8 +0,8 @@
-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, useState, useEffect } 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, useState, useEffect } from 'react';
 import { classNames, getExtraAttrs, emit } from '../shared/utils.js';
 import { f7 } from '../shared/f7.js';
+import { setRef } from '../shared/set-ref.js';
 
-
-const PieChart = /*#__PURE__*/forwardRef((props, ref) => {
+const PieChart = props => {
   const {
@@ -16,3 +16,4 @@ className,
     formatTooltip,
-    children
+    children,
+    ref
   } = props;
@@ -24,5 +25,2 @@ const extraAttrs = getExtraAttrs(props);
   const f7Tooltip = useRef(null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   const getSummValue = () => {
@@ -43,8 +41,7 @@ let summ = 0;
     }
-    datasets.forEach(_ref => {
-      let {
-        value,
-        label,
-        color
-      } = _ref;
+    datasets.forEach(({
+      value,
+      label,
+      color
+    }) => {
       const percentage = value / getSummValue();
@@ -140,3 +137,6 @@ const [startX, startY] = getCoordinatesForPercentage(cumulativePercentage);
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs), /*#__PURE__*/React.createElement("svg", {
@@ -162,4 +162,4 @@ xmlns: "http://www.w3.org/2000/svg",
   }))), children);
-});
+};
 PieChart.displayName = 'f7-pie-chart';
 export default PieChart;

components/popover.d.ts

@@ -15,3 +15,2 @@
   targetEl ?: string | object;
-  arrow ?: boolean;
   backdrop ?: boolean;
@@ -18,0 +17,0 @@ backdropEl ?: string | object;

components/popover.js

@@ -1,3 +0,3 @@
-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';
@@ -9,6 +9,6 @@ import { classNames, getExtraAttrs, emit } from '../shared/utils.js';
 import { modalStateClasses } from '../shared/modal-state-classes.js';
+import { setRef } from '../shared/set-ref.js';
 
 
-
-const Popover = /*#__PURE__*/forwardRef((props, ref) => {
+const Popover = props => {
   const f7Popover = useRef(null);
@@ -23,3 +23,2 @@ const {
     targetEl,
-    arrow,
     backdrop,
@@ -31,3 +30,4 @@ backdropEl,
     containerEl,
-    verticalPosition
+    verticalPosition,
+    ref
   } = props;
@@ -55,6 +55,2 @@ const extraAttrs = getExtraAttrs(props);
   };
-  useImperativeHandle(ref, () => ({
-    el: elRef.current,
-    f7Popover: () => f7Popover.current
-  }));
   watchProp(opened, value => {
@@ -84,3 +80,2 @@ if (!f7Popover.current) return;
     if ('closeOnEscape' in props) popoverParams.closeOnEscape = closeOnEscape;
-    if ('arrow' in props) popoverParams.arrow = arrow;
     if ('backdrop' in props) popoverParams.backdrop = backdrop;
@@ -123,10 +118,13 @@ if ('backdropEl' in props) popoverParams.backdropEl = backdropEl;
     className: classes,
-    ref: elRef
-  }, extraAttrs), arrow !== false && /*#__PURE__*/React.createElement("div", {
-    className: "popover-arrow"
-  }), /*#__PURE__*/React.createElement("div", {
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el, {
+        f7Popover: () => f7Popover.current
+      });
+    }
+  }, extraAttrs), /*#__PURE__*/React.createElement("div", {
     className: "popover-inner"
   }, children));
-});
+};
 Popover.displayName = 'f7-popover';
 export default Popover;

components/popup.js

@@ -1,3 +0,3 @@
-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, useImperativeHandle, useRef } 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 { f7, f7ready } from '../shared/f7.js';
@@ -9,6 +9,6 @@ import { colorClasses } from '../shared/mixins.js';
 import { watchProp } from '../shared/watch-prop.js';
+import { setRef } from '../shared/set-ref.js';
 
 
-
-const Popup = /*#__PURE__*/forwardRef((props, ref) => {
+const Popup = props => {
   const f7Popup = useRef(null);
@@ -30,3 +30,4 @@ const {
     swipeHandler,
-    containerEl
+    containerEl,
+    ref
   } = props;
@@ -66,6 +67,2 @@ const extraAttrs = getExtraAttrs(props);
   };
-  useImperativeHandle(ref, () => ({
-    el: elRef.current,
-    f7Popup: () => f7Popup.current
-  }));
   watchProp(opened, value => {
@@ -138,6 +135,11 @@ if (!f7Popup.current) return;
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el, {
+        f7Popup: () => f7Popup.current
+      });
+    }
   }, extraAttrs), children);
-});
+};
 Popup.displayName = 'f7-popup';
 export default Popup;

components/preloader.js

@@ -1,9 +0,9 @@
-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, extend } from '../shared/utils.js';
 import { colorClasses } from '../shared/mixins.js';
 import { useTheme } from '../shared/use-theme.js';
+import { setRef } from '../shared/set-ref.js';
 
-
-const Preloader = /*#__PURE__*/forwardRef((props, ref) => {
+const Preloader = props => {
   const theme = useTheme();
@@ -14,9 +14,7 @@ const {
     style,
-    size
+    size,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   const preloaderStyle = {};
@@ -76,6 +74,9 @@ let sizeComputed = size;
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs), innerEl);
-});
+};
 Preloader.displayName = 'f7-preloader';
 export default Preloader;

components/progressbar.js

@@ -1,9 +0,9 @@
-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 { f7 } from '../shared/f7.js';
+import { setRef } from '../shared/set-ref.js';
 
-
-const Progressbar = /*#__PURE__*/forwardRef((props, ref) => {
+const Progressbar = props => {
   const {
@@ -14,3 +14,4 @@ className,
     progress,
-    infinite
+    infinite,
+    ref
   } = props;
@@ -23,6 +24,2 @@ const extraAttrs = getExtraAttrs(props);
   };
-  useImperativeHandle(ref, () => ({
-    el: elRef.current,
-    set
-  }));
   const transformStyle = {
@@ -36,3 +33,8 @@ transform: progress ? `translate3d(${-100 + progress}%, 0, 0)` : '',
   return /*#__PURE__*/React.createElement("span", _extends({
-    ref: elRef,
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el, {
+        set
+      });
+    },
     id: id,
@@ -45,4 +47,4 @@ style: style,
   }));
-});
+};
 Progressbar.displayName = 'f7-progressbar';
 export default Progressbar;

components/radio.js

@@ -1,8 +0,8 @@
-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 { setRef } from '../shared/set-ref.js';
 
-
-const Radio = /*#__PURE__*/forwardRef((props, ref) => {
+const Radio = props => {
   const {
@@ -17,3 +17,4 @@ className,
     checked,
-    defaultChecked
+    defaultChecked,
+    ref
   } = props;
@@ -25,5 +26,2 @@ const extraAttrs = getExtraAttrs(props);
   };
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   const inputEl = /*#__PURE__*/React.createElement("input", {
@@ -49,6 +47,9 @@ type: "radio",
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs), inputEl, iconEl, children);
-});
+};
 Radio.displayName = 'f7-radio';
 export default Radio;

components/range.js

@@ -1,3 +0,3 @@
-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';
@@ -8,6 +8,6 @@ import { classNames, getExtraAttrs, noUndefinedProps, emit } from '../shared/utils.js';
 import { watchProp } from '../shared/watch-prop.js';
+import { setRef } from '../shared/set-ref.js';
 
 
-
-const Range = /*#__PURE__*/forwardRef((props, ref) => {
+const Range = props => {
   const f7Range = useRef(null);
@@ -38,10 +38,7 @@ const {
     inputId,
-    disabled
+    disabled,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current,
-    f7Range: () => f7Range.current
-  }));
   watchProp(value, newValue => {
@@ -114,6 +111,11 @@ if (!f7Range.current) return;
   return /*#__PURE__*/React.createElement("div", _extends({
-    ref: elRef,
     id: id,
     style: style,
-    className: classes
+    className: classes,
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el, {
+        f7Range: () => f7Range.current
+      });
+    }
   }, extraAttrs), input && /*#__PURE__*/React.createElement("input", {
@@ -124,4 +126,4 @@ type: "range",
   }), children);
-});
+};
 Range.displayName = 'f7-range';
 export default Range;

components/routable-modals.js

@@ -1,14 +0,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, useState } 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, useState } from 'react';
 import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect.js';
 import { f7events, f7routers, f7 } from '../shared/f7.js';
+import { setRef } from '../shared/set-ref.js';
 
-
-const RoutableModals = /*#__PURE__*/forwardRef((props, ref) => {
+const RoutableModals = props => {
+  const {
+    ref
+  } = props;
   const [modals, setModals] = useState([]);
   const elRef = useRef(null);
   const routerData = useRef(null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   const onMount = () => {
@@ -38,10 +38,12 @@ routerData.current = {
   return /*#__PURE__*/React.createElement("div", {
-    ref: elRef,
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    },
     className: "framework7-modals"
-  }, modals.map(_ref => {
-    let {
-      component: ModalComponent,
-      id: modalId,
-      props: modalProps
-    } = _ref;
+  }, modals.map(({
+    component: ModalComponent,
+    id: modalId,
+    props: modalProps
+  }) => {
     return /*#__PURE__*/React.createElement(ModalComponent, _extends({
@@ -51,4 +53,4 @@ key: modalId
   }));
-});
+};
 RoutableModals.displayName = 'f7-routable-modals';
 export default RoutableModals;

components/searchbar.js

@@ -1,3 +0,3 @@
-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';
@@ -7,6 +7,6 @@ import { classNames, getExtraAttrs, getSlots, noUndefinedProps, emit } from '../shared/utils.js';
 import { f7ready, f7 } from '../shared/f7.js';
+import { setRef } from '../shared/set-ref.js';
 
 
-
-const Searchbar = /*#__PURE__*/forwardRef((props, ref) => {
+const Searchbar = props => {
   const f7Searchbar = useRef(null);
@@ -22,3 +22,3 @@ const {
     disableButton = true,
-    disableButtonText = 'Cancel',
+    disableButtonText = '',
     clearButton = true,
@@ -47,3 +47,4 @@ // Input Value
     hideGroups = true,
-    init = true
+    init = true,
+    ref
   } = props;
@@ -93,11 +94,2 @@ const extraAttrs = getExtraAttrs(props);
   };
-  useImperativeHandle(ref, () => ({
-    el: elRef.current,
-    f7Searchbar: () => f7Searchbar.current,
-    search,
-    enable,
-    disable,
-    toggle,
-    clear
-  }));
   const onMount = () => {
@@ -171,3 +163,5 @@ if (!init) return;
       onClick: onDisableButtonClick
-    }, disableButtonText);
+    }, /*#__PURE__*/React.createElement("i", {
+      className: "icon icon-close"
+    }), disableButtonText && /*#__PURE__*/React.createElement("span", null, disableButtonText));
   }
@@ -182,3 +176,13 @@ const SearchbarTag = form ? 'form' : 'div';
   return /*#__PURE__*/React.createElement(SearchbarTag, _extends({
-    ref: elRef,
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el, {
+        f7Searchbar: () => f7Searchbar.current,
+        search,
+        enable,
+        disable,
+        toggle,
+        clear
+      });
+    },
     id: id,
@@ -205,4 +209,4 @@ style: style,
   }), clearEl, slots['input-wrap-end']), disableEl, slots['inner-end'], slots.default), slots['after-inner']);
-});
+};
 Searchbar.displayName = 'f7-searchbar';
 export default Searchbar;

components/segmented.js

@@ -1,8 +0,8 @@
-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 Segmented = /*#__PURE__*/forwardRef((props, ref) => {
+const Segmented = props => {
   const {
@@ -22,9 +22,7 @@ className,
     strongMd,
-    tag = 'div'
+    tag = 'div',
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   const classes = classNames(className, {
@@ -47,8 +45,11 @@ segmented: true,
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs), children, (strong || strongIos || strongMd) && /*#__PURE__*/React.createElement("span", {
     className: "segmented-highlight"
   }));
-});
+};
 Segmented.displayName = 'f7-segmented';
 export default Segmented;

components/sheet.js

@@ -1,3 +0,3 @@
-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';
@@ -9,6 +9,6 @@ import { classNames, getExtraAttrs, emit, getSlots } from '../shared/utils.js';
 import { modalStateClasses } from '../shared/modal-state-classes.js';
+import { setRef } from '../shared/set-ref.js';
 
 
-
-const Sheet = /*#__PURE__*/forwardRef((props, ref) => {
+const Sheet = props => {
   const f7Sheet = useRef(null);
@@ -36,3 +36,4 @@ const {
     backdropBreakpoint,
-    pushBreakpoint
+    pushBreakpoint,
+    ref
   } = props;
@@ -72,6 +73,2 @@ const extraAttrs = getExtraAttrs(props);
   };
-  useImperativeHandle(ref, () => ({
-    el: elRef.current,
-    f7Sheet: () => f7Sheet.current
-  }));
   const modalEvents = method => {
@@ -176,6 +173,11 @@ if (!f7Sheet.current) return;
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el, {
+        f7Sheet: () => f7Sheet.current
+      });
+    }
   }, extraAttrs), fixedList, slots.fixed, innerEl);
-});
+};
 Sheet.displayName = 'f7-sheet';
 export default Sheet;

components/stepper.js

@@ -1,3 +0,3 @@
-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';
@@ -8,5 +8,5 @@ import { classNames, getExtraAttrs, emit, noUndefinedProps } from '../shared/utils.js';
 import { watchProp } from '../shared/watch-prop.js';
+import { setRef } from '../shared/set-ref.js';
 
-
-const Stepper = /*#__PURE__*/forwardRef((props, ref) => {
+const Stepper = props => {
   const f7Stepper = useRef(null);
@@ -50,3 +50,4 @@ const {
     raisedMd,
-    raisedIos
+    raisedIos,
+    ref
   } = props;
@@ -84,10 +85,2 @@ const extraAttrs = getExtraAttrs(props);
   };
-  useImperativeHandle(ref, () => ({
-    el: elRef.current,
-    f7Stepper: () => f7Stepper.current,
-    increment,
-    decrement,
-    setValue,
-    getValue
-  }));
   watchProp(value, newValue => {
@@ -183,6 +176,15 @@ if (!f7Stepper.current) return;
   return /*#__PURE__*/React.createElement("div", _extends({
-    ref: elRef,
     id: id,
     style: style,
-    className: classes
+    className: classes,
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el, {
+        f7Stepper: () => f7Stepper.current,
+        increment,
+        decrement,
+        setValue,
+        getValue
+      });
+    }
   }, extraAttrs), /*#__PURE__*/React.createElement("div", {
@@ -195,4 +197,4 @@ className: "stepper-button-minus",
   }));
-});
+};
 Stepper.displayName = 'f7-stepper';
 export default Stepper;

components/subnavbar.d.ts

@@ -10,3 +10,2 @@
   style?: React.CSSProperties;
-  sliding ?: boolean;
   title ?: string;
@@ -13,0 +12,0 @@ inner ?: boolean;

components/subnavbar.js

@@ -1,8 +0,8 @@
-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 Subnavbar = /*#__PURE__*/forwardRef((props, ref) => {
+const Subnavbar = props => {
   const {
@@ -15,12 +15,7 @@ className,
     title,
-    sliding
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
-  const classes = classNames(className, 'subnavbar', {
-    sliding
-  }, colorClasses(props));
+  const classes = classNames(className, 'subnavbar', {}, colorClasses(props));
   return /*#__PURE__*/React.createElement("div", _extends({
@@ -30,3 +25,6 @@ className: classes,
     style: style,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs), inner ? /*#__PURE__*/React.createElement("div", {
@@ -37,4 +35,4 @@ className: "subnavbar-inner"
   }, title), children) : children);
-});
+};
 Subnavbar.displayName = 'f7-subnavbar';
 export default Subnavbar;

components/swipeout-actions.js

@@ -1,8 +0,8 @@
-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 SwipeoutActions = /*#__PURE__*/forwardRef((props, ref) => {
+const SwipeoutActions = props => {
   const {
@@ -15,9 +15,7 @@ className,
     right,
-    side
+    side,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   let sideComputed = side;
@@ -33,6 +31,9 @@ if (!sideComputed) {
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs), children);
-});
+};
 SwipeoutActions.displayName = 'f7-swipeout-actions';
 export default SwipeoutActions;

components/swipeout-button.js

@@ -1,8 +0,8 @@
-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 { setRef } from '../shared/set-ref.js';
 
-
-const SwipeoutButton = /*#__PURE__*/forwardRef((props, ref) => {
+const SwipeoutButton = props => {
   const {
@@ -19,3 +19,4 @@ className,
     delete: deleteProp,
-    href
+    href,
+    ref
   } = props;
@@ -27,5 +28,2 @@ const extraAttrs = getExtraAttrs(props);
   };
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   const classes = classNames(className, {
@@ -37,3 +35,6 @@ 'swipeout-overswipe': overswipe,
   return /*#__PURE__*/React.createElement("a", _extends({
-    ref: elRef,
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    },
     href: href || '#',
@@ -48,4 +49,4 @@ id: id,
   }), children, text);
-});
+};
 SwipeoutButton.displayName = 'f7-swipeout-button';
 export default SwipeoutButton;

components/tab.js

@@ -1,3 +0,3 @@
-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, useState, useContext } 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, useState, useContext } from 'react';
 import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect.js';
@@ -11,5 +11,5 @@ import { classNames, getExtraAttrs, getComponentId } from '../shared/utils.js';
 import { TabsSwipeableContext } from '../shared/tabs-swipeable-context.js';
+import { setRef } from '../shared/set-ref.js';
 
-
-const Tab = /*#__PURE__*/forwardRef((props, ref) => {
+const Tab = props => {
   const {
@@ -20,3 +20,4 @@ className,
     children,
-    tabActive
+    tabActive,
+    ref
   } = props;
@@ -52,5 +53,2 @@ const extraAttrs = getExtraAttrs(props);
   const [tabContent, setTabContent] = useState(initialTabContent || null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   if (f7 && !routerData.current) {
@@ -114,6 +112,9 @@ routerData.current = {
     style: style,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs, classAttrs), renderChildren());
-});
+};
 Tab.displayName = 'f7-tab';
 export default Tab;

components/tabs.js

@@ -1,3 +0,3 @@
-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';
@@ -7,5 +7,5 @@ import { classNames, getExtraAttrs } from '../shared/utils.js';
 import { TabsSwipeableContext } from '../shared/tabs-swipeable-context.js';
+import { setRef } from '../shared/set-ref.js';
 
-
-const Tabs = /*#__PURE__*/forwardRef((props, ref) => {
+const Tabs = props => {
   const {
@@ -19,9 +19,7 @@ className,
     routable,
-    swiperParams
+    swiperParams,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   useIsomorphicLayoutEffect(() => {
@@ -43,3 +41,6 @@ if (!swipeable || !swiperParams) return;
       className: classNames('tabs-animated-wrap', classes),
-      ref: elRef
+      ref: el => {
+        elRef.current = el;
+        setRef(ref, el);
+      }
     }, extraAttrs), /*#__PURE__*/React.createElement("div", {
@@ -54,3 +55,6 @@ className: tabsClasses
       class: classNames(tabsClasses, classes),
-      ref: elRef,
+      ref: el => {
+        elRef.current = el;
+        setRef(ref, el);
+      },
       init: swiperParams ? 'false' : 'true'
@@ -65,6 +69,9 @@ }, extraAttrs), /*#__PURE__*/React.createElement(TabsSwipeableContext.Provider, {
     className: classNames(tabsClasses, classes),
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs), children);
-});
+};
 Tabs.displayName = 'f7-tabs';
 export default Tabs;

components/text-editor.js

@@ -1,3 +0,3 @@
-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';
@@ -8,5 +8,5 @@ import { classNames, getExtraAttrs, getSlots, noUndefinedProps, emit } from '../shared/utils.js';
 import { watchProp } from '../shared/watch-prop.js';
+import { setRef } from '../shared/set-ref.js';
 
-
-const TextEditor = /*#__PURE__*/forwardRef((props, ref) => {
+const TextEditor = props => {
   const f7TextEditor = useRef(null);
@@ -26,3 +26,4 @@ const {
     clearFormattingOnPaste,
-    resizable = false
+    resizable = false,
+    ref
   } = props;
@@ -64,6 +65,2 @@ const extraAttrs = getExtraAttrs(props);
   };
-  useImperativeHandle(ref, () => ({
-    el: elRef.current,
-    f7TextEditor: () => f7TextEditor.current
-  }));
   watchProp(value, newValue => {
@@ -117,6 +114,11 @@ if (f7TextEditor.current) {
   return /*#__PURE__*/React.createElement("div", _extends({
-    ref: elRef,
     id: id,
     style: style,
-    className: classes
+    className: classes,
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el, {
+        f7TextEditor: () => f7TextEditor.current
+      });
+    }
   }, extraAttrs), slots['root-start'], /*#__PURE__*/React.createElement("div", {
@@ -126,4 +128,4 @@ className: "text-editor-content",
   }, slots.default), slots['root-end'], slots.root);
-});
+};
 TextEditor.displayName = 'f7-text-editor';
 export default TextEditor;

components/toggle.js

@@ -1,3 +0,3 @@
-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';
@@ -9,5 +9,5 @@ import { classNames, getExtraAttrs, emit } from '../shared/utils.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);
@@ -24,3 +24,4 @@ const {
     name,
-    value
+    value,
+    ref
   } = props;
@@ -33,6 +34,2 @@ const extraAttrs = getExtraAttrs(props);
   };
-  useImperativeHandle(ref, () => ({
-    el: elRef.current,
-    f7Toggle: () => f7Toggle.current
-  }));
   useTooltip(elRef, props);
@@ -84,3 +81,13 @@ watchProp(checked, newValue => {
   }, 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,
@@ -95,13 +102,7 @@ type: "checkbox",
     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;

components/toolbar.js

@@ -1,3 +0,3 @@
-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';
@@ -9,5 +9,5 @@ import { classNames, getExtraAttrs, getSlots, emit } from '../shared/utils.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 {
@@ -29,3 +29,4 @@ className,
     bottom,
-    inner = true
+    inner = true,
+    ref
   } = props;
@@ -50,7 +51,2 @@ const extraAttrs = getExtraAttrs(props);
   };
-  useImperativeHandle(ref, () => ({
-    el: elRef.current,
-    hide,
-    show
-  }));
   useIsomorphicLayoutEffect(() => {
@@ -85,3 +81,9 @@ f7ready(() => {
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el, {
+        hide,
+        show
+      });
+    }
   }, extraAttrs), /*#__PURE__*/React.createElement(TabbarContext.Provider, {
@@ -94,4 +96,4 @@ value: {
   }, slots.default) : slots.default, slots['after-inner']));
-});
+};
 Toolbar.displayName = 'f7-toolbar';
 export default Toolbar;

components/treeview-item.js

@@ -1,3 +0,3 @@
-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';
@@ -8,5 +8,5 @@ import { classNames, getExtraAttrs, getSlots, emit } from '../shared/utils.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 {
@@ -23,3 +23,4 @@ className,
     loadChildren,
-    link
+    link,
+    ref
   } = props;
@@ -43,5 +44,2 @@ const extraAttrs = getExtraAttrs(props);
   };
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   const attachEvents = () => {
@@ -91,3 +89,6 @@ if (!elRef.current) return;
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs), /*#__PURE__*/React.createElement(TreeviewRootTag, _extends({
@@ -105,4 +106,4 @@ onClick: onClick,
   }, slots['children-start'], slots.default, slots.children));
-});
+};
 TreeviewItem.displayName = 'f7-treeview-item';
 export default TreeviewItem;

components/treeview.js

@@ -1,8 +0,8 @@
-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 {
@@ -12,9 +12,7 @@ className,
     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));
@@ -25,6 +23,9 @@ return /*#__PURE__*/React.createElement("div", _extends({
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs), children);
-});
+};
 Treeview.displayName = 'f7-treeview';
 export default Treeview;

components/view.d.ts

@@ -56,4 +56,2 @@
   transition ?: string;
-  iosDynamicNavbar ?: boolean;
-  iosAnimateNavbarBackIcon ?: boolean;
   materialPageLoadDelay ?: number;
@@ -60,0 +58,0 @@ passRouteQueryToRequest ?: boolean;

components/view.js

@@ -1,4 +0,4 @@
-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';
@@ -12,4 +12,5 @@ import { classNames, getExtraAttrs, noUndefinedProps, emit, getRouterId } from '../shared/utils.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 {
@@ -26,3 +27,4 @@ className,
     initRouterOnTabShow,
-    browserHistoryInitialMatch = true
+    browserHistoryInitialMatch = true,
+    ref
   } = props;
@@ -96,6 +98,2 @@ const childrenArray = React.Children.toArray(children);
   };
-  useImperativeHandle(ref, () => ({
-    el: elRef.current,
-    f7View: () => f7View.current
-  }));
   const onMount = () => {
@@ -198,23 +196,25 @@ f7ready(() => {
     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;

components/views.js

@@ -1,8 +0,8 @@
-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 {
@@ -13,9 +13,7 @@ className,
     children,
-    tabs
+    tabs,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   const classes = classNames(className, 'views', {
@@ -28,6 +26,9 @@ tabs
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs), children);
-});
+};
 Views.displayName = 'f7-views';
 export default Views;

framework7-react.d.ts

@@ -88,2 +88,3 @@ import Framework7, { Framework7Plugin } from 'framework7/types';
 import Toggle from './components/toggle.js';
+import ToolbarPane from './components/toolbar-pane.js';
 import Toolbar from './components/toolbar.js';
@@ -118,4 +119,4 @@ import TreeviewItem from './components/treeview-item.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;

framework7-react.js

 /**
- * Framework7 React 8.3.4
+ * Framework7 React 9.0.0-beta.1
  * 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 10, 2025
  */
@@ -100,2 +100,3 @@ import Framework7React from './shared/plugin.js';
 import Toggle from './components/toggle.js';
+import ToolbarPane from './components/toolbar-pane.js';
 import Toolbar from './components/toolbar.js';
@@ -107,4 +108,4 @@ import TreeviewItem from './components/treeview-item.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.json

 {
   "name": "framework7-react",
-  "version": "8.3.4",
+  "version": "9.0.0-beta.1",
   "description": "Build full featured iOS & Android apps using Framework7 & React",
@@ -53,3 +53,3 @@ "type": "module",
   },
-  "releaseDate": "September 18, 2024"
+  "releaseDate": "November 10, 2025"
 }

shared/components-router.js

@@ -23,10 +23,9 @@ /* eslint no-underscore-dangle: "off" */
     },
-    pageComponentLoader(_ref) {
-      let {
-        routerEl,
-        component,
-        options,
-        resolve,
-        reject
-      } = _ref;
+    pageComponentLoader({
+      routerEl,
+      component,
+      options,
+      resolve,
+      reject
+    }) {
       const router = this;
@@ -105,10 +104,9 @@ const routerId = router.id;
     },
-    tabComponentLoader(_temp) {
-      let {
-        tabEl,
-        component,
-        options,
-        resolve,
-        reject
-      } = _temp === void 0 ? {} : _temp;
+    tabComponentLoader({
+      tabEl,
+      component,
+      options,
+      resolve,
+      reject
+    } = {}) {
       const router = this;
@@ -160,9 +158,8 @@ if (!tabEl) reject();
     },
-    modalComponentLoader(_temp2) {
-      let {
-        component,
-        options,
-        resolve,
-        reject
-      } = _temp2 === void 0 ? {} : _temp2;
+    modalComponentLoader({
+      component,
+      options,
+      resolve,
+      reject
+    } = {}) {
       const router = this;
@@ -169,0 +166,0 @@ const modalsRouter = f7routers.modals;

shared/f7.js

@@ -28,9 +28,3 @@ /* eslint-disable import/no-mutable-exports */
 };
-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, {
@@ -37,0 +31,0 @@ el: rootEl,

shared/modal-state-classes.js

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

shared/plugin.js

@@ -7,6 +7,3 @@ import Framework7 from 'framework7/lite';
   installed: false,
-  install(params) {
-    if (params === void 0) {
-      params = {};
-    }
+  install(params = {}) {
     if (Framework7React.installed) return;
@@ -13,0 +10,0 @@ Framework7React.installed = true;

shared/use-icon.js

 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 {
@@ -9,0 +6,0 @@ icon,

shared/use-route-props.js

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

shared/use-store.js

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

shared/utils.js

@@ -17,9 +17,6 @@ export function noUndefinedProps(obj) {
 }
-export function extend() {
+export function extend(...args) {
   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') {
@@ -58,7 +55,4 @@ [deep, to] = args;
 }
-export function flattenArray() {
+export function flattenArray(...args) {
   const arr = [];
-  for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-    args[_key2] = arguments[_key2];
-  }
   args.forEach(arg => {
@@ -69,7 +63,4 @@ if (Array.isArray(arg)) arr.push(...flattenArray(...arg));else arr.push(arg);
 }
-export function classNames() {
+export function classNames(...args) {
   const classes = [];
-  for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-    args[_key3] = arguments[_key3];
-  }
   args.forEach(arg => {
@@ -88,6 +79,3 @@ if (typeof arg === 'object' && arg.constructor === Object) {
 }
-export function getSlots(props) {
-  if (props === void 0) {
-    props = {};
-  }
+export function getSlots(props = {}) {
   const slots = {};
@@ -116,6 +104,3 @@ if (!props) return slots;
 }
-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];
-  }
+export function emit(props, events, ...args) {
   if (!events || !events.trim().length || typeof events !== 'string') return;
@@ -130,6 +115,3 @@ events.trim().split(' ').forEach(event => {
 }
-export function getExtraAttrs(props) {
-  if (props === void 0) {
-    props = {};
-  }
+export function getExtraAttrs(props = {}) {
   const extraAttrs = {};
@@ -136,0 +118,0 @@ Object.keys(props).forEach(key => {

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Number of package files

208

1.46%

Lines of code

11861

0.35%

Worsened metrics

Total package byte prevSize

394363

-2.15%

Number of low quality alerts

1

Infinity%

No dependency changes