framework7-react 8.3.3 → 9.0.0-beta.1

package/components/accordion-content.js

@@ -1,28 +1,25 @@
-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';
 import { colorClasses } from '../shared/mixins.js';
 
 
-const AccordionContent = /*#__PURE__*/forwardRef((props, ref) => {
+const AccordionContent = props => {
   const {
     className,
     id,
     style,
+    ref,
     children
   } = props;
-  const elRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   const extraAttrs = getExtraAttrs(props);
   const classes = classNames(className, 'accordion-item-content', colorClasses(props));
   return /*#__PURE__*/React.createElement("div", _extends({
     id: id,
     style: style,
     className: classes,
-    ref: elRef
+    ref: ref
   }, extraAttrs), children);
-});
+};
 AccordionContent.displayName = 'f7-accordion-content';
 export default AccordionContent;

package/components/accordion-item.js

@@ -1,23 +1,22 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { forwardRef, useRef, useImperativeHandle } from 'react';
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useRef } from 'react';
 import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect.js';
 import { classNames, getExtraAttrs, emit } from '../shared/utils.js';
 import { colorClasses } from '../shared/mixins.js';
 import { f7, f7ready } from '../shared/f7.js';
+import { setRef } from '../shared/set-ref.js';
 
 
-const AccordionItem = /*#__PURE__*/forwardRef((props, ref) => {
+const AccordionItem = props => {
   const {
     className,
     id,
     style,
     children,
-    opened
+    opened,
+    ref
   } = props;
   const elRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   const onBeforeOpen = (el, prevent) => {
     if (elRef.current !== el) return;
     emit(props, 'accordionBeforeOpen', prevent);
@@ -72,8 +71,11 @@ const AccordionItem = /*#__PURE__*/forwardRef((props, ref) => {
     id: id,
     style: style,
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs), children);
-});
+};
 AccordionItem.displayName = 'f7-accordion-item';
 export default AccordionItem;

package/components/accordion-toggle.js

@@ -1,20 +1,19 @@
-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 {
     className,
     id,
     style,
-    children
+    children,
+    ref
   } = props;
   const elRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   const extraAttrs = getExtraAttrs(props);
   const classes = classNames(className, 'accordion-item-toggle', colorClasses(props));
   return /*#__PURE__*/React.createElement("div", _extends({
@@ -22,8 +21,11 @@ const AccordionToggle = /*#__PURE__*/forwardRef((props, ref) => {
     style: style,
     className: classes
   }, extraAttrs, {
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }), children);
-});
+};
 AccordionToggle.displayName = 'f7-accordion-toggle';
 export default AccordionToggle;

package/components/accordion.js

@@ -1,29 +1,31 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { forwardRef, 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 {
     className,
     id,
     style,
     accordionOpposite,
-    children
+    children,
+    ref
   } = props;
   const elRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   const extraAttrs = getExtraAttrs(props);
   const classes = classNames(className, 'accordion-list', accordionOpposite && 'accordion-opposite', colorClasses(props));
   return /*#__PURE__*/React.createElement("div", _extends({
     id: id,
     style: style,
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs), children);
-});
+};
 Accordion.displayName = 'f7-accordion';
 export default Accordion;

package/components/actions-button.js

@@ -1,23 +1,22 @@
-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 {
     className,
     id,
     style,
     strong,
-    close = true
+    close = true,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   const classes = classNames(className, {
     'actions-button': true,
     'actions-button-strong': strong
@@ -39,12 +38,15 @@ const ComponentName = /*#__PURE__*/forwardRef((props, ref) => {
     id: id,
     style: style,
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs, {
     onClick: onClick
   }), mediaEl, /*#__PURE__*/React.createElement("div", {
     className: "actions-button-text"
   }, slots.default));
-});
+};
 ComponentName.displayName = 'f7-actions-button';
 export default ComponentName;

package/components/actions-group.js

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

package/components/actions-label.js

@@ -1,22 +1,21 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { forwardRef, useRef, useImperativeHandle } from 'react';
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useRef } from 'react';
 import { 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 {
     className,
     id,
     style,
     children,
-    strong
+    strong,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   const classes = classNames(className, 'actions-label', {
     'actions-button-strong': strong
   }, colorClasses(props));
@@ -27,10 +26,13 @@ const ActionsLabel = /*#__PURE__*/forwardRef((props, ref) => {
     id: id,
     style: style,
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs, {
     onClick: onClick
   }), children);
-});
+};
 ActionsLabel.displayName = 'f7-actions-label';
 export default ActionsLabel;

package/components/actions.js

@@ -1,15 +1,16 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { forwardRef, useRef, useImperativeHandle } from 'react';
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useRef } from 'react';
 import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect.js';
 import { classNames, getExtraAttrs, emit } from '../shared/utils.js';
 import { colorClasses } from '../shared/mixins.js';
 import { f7, f7ready } from '../shared/f7.js';
 import { watchProp } from '../shared/watch-prop.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 {
     className,
     id,
@@ -17,7 +18,8 @@ const Actions = /*#__PURE__*/forwardRef((props, ref) => {
     children,
     grid,
     opened = false,
-    animate
+    animate,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
@@ -41,10 +43,6 @@ const Actions = /*#__PURE__*/forwardRef((props, ref) => {
     isClosing.current = false;
     emit(props, 'actionsClosed', instance);
   };
-  useImperativeHandle(ref, () => ({
-    el: elRef.current,
-    f7Actions: () => f7Actions.current
-  }));
 
   // watch opened changes
   watchProp(opened, value => {
@@ -121,8 +119,13 @@ const Actions = /*#__PURE__*/forwardRef((props, ref) => {
     id: id,
     style: style,
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el, {
+        f7Actions: () => f7Actions.current
+      });
+    }
   }, extraAttrs), children);
-});
+};
 Actions.displayName = 'f7-actions';
 export default Actions;

package/components/app.js

@@ -1,27 +1,26 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { forwardRef, useRef, useImperativeHandle } from 'react';
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useRef } from 'react';
 import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect.js';
 import { classNames, getExtraAttrs } from '../shared/utils.js';
 import { colorClasses } from '../shared/mixins.js';
 import RoutableModals from './routable-modals.js';
 import { f7init, f7 } from '../shared/f7.js';
+import { setRef } from '../shared/set-ref.js';
 
 
 
 
-const App = /*#__PURE__*/forwardRef((props, ref) => {
+const App = props => {
   const {
     className,
     style,
     children,
+    ref,
     ...rest
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const params = rest;
   const elRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   const classes = classNames(className, 'framework7-root', colorClasses(props));
 
   // eslint-disable-next-line
@@ -45,8 +44,11 @@ const App = /*#__PURE__*/forwardRef((props, ref) => {
     id: "framework7-root",
     style: style,
     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;

package/components/area-chart.js

@@ -1,10 +1,11 @@
-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 {
     className,
     id,
@@ -25,7 +26,8 @@ const AreaChart = /*#__PURE__*/forwardRef((props, ref) => {
     formatTooltipAxisLabel,
     formatTooltipTotal,
     formatTooltipDataset,
-    children
+    children,
+    ref
   } = props;
   const [currentIndex, setCurrentIndex] = useState(null);
   const previousIndex = useRef(null);
@@ -35,9 +37,6 @@ const AreaChart = /*#__PURE__*/forwardRef((props, ref) => {
   const svgElRef = useRef(null);
   const f7Tooltip = useRef(null);
   const linesOffsets = useRef(null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   const getVisibleLegends = () => {
     if (!maxAxisLabels || axisLabels.length <= maxAxisLabels) return axisLabels;
     const skipStep = Math.ceil(axisLabels.length / maxAxisLabels);
@@ -46,10 +45,9 @@ const AreaChart = /*#__PURE__*/forwardRef((props, ref) => {
   };
   const getSummValues = () => {
     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) => {
         if (!summValues[valueIndex]) summValues[valueIndex] = 0;
         summValues[valueIndex] += value;
@@ -65,22 +63,20 @@ const AreaChart = /*#__PURE__*/forwardRef((props, ref) => {
     const lastValues = datasets[0].values.map(() => 0);
     let maxValue = 0;
     if (lineChart) {
-      datasets.forEach(_ref2 => {
-        let {
-          values
-        } = _ref2;
+      datasets.forEach(({
+        values
+      }) => {
         const datasetMaxValue = Math.max(...values);
         if (datasetMaxValue > maxValue) maxValue = datasetMaxValue;
       });
     } else {
       maxValue = Math.max(...getSummValues());
     }
-    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) => {
         lastValues[valueIndex] += originalValue;
         const value = lineChart ? originalValue : lastValues[valueIndex];
@@ -162,12 +158,11 @@ const AreaChart = /*#__PURE__*/forwardRef((props, ref) => {
     // prettier-ignore
     const datasetsText = currentValues.length > 0 ? `
       <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}`;
       return `
               <li><span style="background-color: ${color};"></span>${valueText}</li>
@@ -269,7 +264,10 @@ const AreaChart = /*#__PURE__*/forwardRef((props, ref) => {
     id: id,
     style: style,
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs), /*#__PURE__*/React.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: width,
@@ -314,6 +312,6 @@ const AreaChart = /*#__PURE__*/forwardRef((props, ref) => {
       backgroundColor: dataset.color
     }
   }), formatLegendLabel(dataset.label)))), children);
-});
+};
 AreaChart.displayName = 'f7-area-chart';
 export default AreaChart;

package/components/badge.js

@@ -1,8 +1,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 { useTooltip } from '../shared/use-tooltip.js';
+import { setRef } from '../shared/set-ref.js';
 
 
 /* dts-instance
@@ -10,26 +11,27 @@ f7Tooltip: Tooltip.Tooltip
 */
 
 
-const Badge = /*#__PURE__*/forwardRef((props, ref) => {
+const Badge = props => {
   const {
     className,
     id,
     style,
-    children
+    children,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   useTooltip(elRef, props);
   const classes = classNames(className, 'badge', colorClasses(props));
   return /*#__PURE__*/React.createElement("span", _extends({
     id: id,
     style: style,
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs), children);
-});
+};
 Badge.displayName = 'f7-badge';
 export default Badge;

package/components/block-footer.js

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

package/components/block-header.js

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