framework7-react 8.3.4 → 9.0.0-beta.1

package/components/panel.js

@@ -1,14 +1,14 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { forwardRef, useRef, useImperativeHandle } from 'react';
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useRef } from 'react';
 import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect.js';
 import { classNames, getExtraAttrs, noUndefinedProps, emit } from '../shared/utils.js';
 import { colorClasses } from '../shared/mixins.js';
 import { f7ready, f7 } from '../shared/f7.js';
 import { watchProp } from '../shared/watch-prop.js';
+import { setRef } from '../shared/set-ref.js';
 
 
-
-const Panel = /*#__PURE__*/forwardRef((props, ref) => {
+const Panel = props => {
   const f7Panel = useRef(null);
   const {
     className,
@@ -36,7 +36,8 @@ const Panel = /*#__PURE__*/forwardRef((props, ref) => {
     swipeNoFollow,
     swipeOnlyClose,
     swipeActiveArea = 0,
-    swipeThreshold = 0
+    swipeThreshold = 0,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
@@ -80,16 +81,9 @@ const Panel = /*#__PURE__*/forwardRef((props, ref) => {
     isCollapsed.current = true;
     emit(props, 'panelCollapsedBreakpoint', event);
   };
-  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 => {
     if (!f7Panel.current) return;
     if (newValue) f7Panel.current.enableResizable();else f7Panel.current.disableResizable();
@@ -175,10 +169,15 @@ const Panel = /*#__PURE__*/forwardRef((props, ref) => {
     id: id,
     style: style,
     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;

package/components/photo-browser.d.ts

@@ -20,7 +20,6 @@ export interface PhotoBrowserProps {
   iconsColor ?: string;
   swipeToClose ?: boolean;
   pageBackLinkText ?: string;
-  popupCloseLinkIcon ?: boolean;
   popupCloseLinkText ?: string;
   navbarOfText ?: string;
   navbarShowCount ?: boolean;

package/components/photo-browser.js

@@ -1,12 +1,12 @@
-import { forwardRef, useRef, useImperativeHandle } from 'react';
+import { useRef } from 'react';
 import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect.js';
 import { extend, emit } from '../shared/utils.js';
 import { watchProp } from '../shared/watch-prop.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);
   const {
     init = true,
@@ -23,7 +23,6 @@ const PhotoBrowser = /*#__PURE__*/forwardRef((props, ref) => {
     iconsColor,
     swipeToClose = true,
     pageBackLinkText,
-    popupCloseLinkIcon,
     popupCloseLinkText,
     navbarOfText,
     navbarShowCount,
@@ -41,7 +40,8 @@ const PhotoBrowser = /*#__PURE__*/forwardRef((props, ref) => {
     renderPage,
     renderPopup,
     renderStandalone,
-    renderThumb
+    renderThumb,
+    ref
   } = props;
   const open = index => {
     return f7PhotoBrowser.current.open(index);
@@ -58,14 +58,6 @@ const PhotoBrowser = /*#__PURE__*/forwardRef((props, ref) => {
   const expositionDisable = () => {
     return f7PhotoBrowser.current.expositionDisable();
   };
-  useImperativeHandle(ref, () => ({
-    f7PhotoBrowser: () => f7PhotoBrowser.current,
-    open,
-    close,
-    expositionToggle,
-    expositionEnable,
-    expositionDisable
-  }));
   watchProp(photos, newValue => {
     const pb = f7PhotoBrowser.current;
     if (!pb) return;
@@ -103,7 +95,6 @@ const PhotoBrowser = /*#__PURE__*/forwardRef((props, ref) => {
           swipeToClose,
           pageBackLinkText,
           popupCloseLinkText,
-          popupCloseLinkIcon,
           navbarOfText,
           navbarShowCount,
           swiper,
@@ -156,7 +147,15 @@ const PhotoBrowser = /*#__PURE__*/forwardRef((props, ref) => {
     onMount();
     return onDestroy;
   }, []);
+  setRef(ref, null, {
+    open,
+    close,
+    expositionToggle,
+    expositionEnable,
+    expositionDisable,
+    f7PhotoBrowser: () => f7PhotoBrowser.current
+  });
   return null;
-});
+};
 PhotoBrowser.displayName = 'f7-photo-browser';
 export default PhotoBrowser;

package/components/pie-chart.js

@@ -1,10 +1,10 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { forwardRef, useRef, useImperativeHandle, 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 {
     className,
     id,
@@ -13,16 +13,14 @@ const PieChart = /*#__PURE__*/forwardRef((props, ref) => {
     tooltip = false,
     datasets = [],
     formatTooltip,
-    children
+    children,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const [currentIndex, setCurrentIndex] = useState(null);
   const previousIndex = useRef(null);
   const elRef = useRef(null);
   const f7Tooltip = useRef(null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   const getSummValue = () => {
     let summ = 0;
     datasets.map(d => d.value || 0).forEach(value => {
@@ -38,12 +36,11 @@ const PieChart = /*#__PURE__*/forwardRef((props, ref) => {
       const y = Math.sin(2 * Math.PI * percentage) * (size / 3);
       return [x, y];
     }
-    datasets.forEach(_ref => {
-      let {
-        value,
-        label,
-        color
-      } = _ref;
+    datasets.forEach(({
+      value,
+      label,
+      color
+    }) => {
       const percentage = value / getSummValue();
       const [startX, startY] = getCoordinatesForPercentage(cumulativePercentage);
       cumulativePercentage += percentage;
@@ -134,7 +131,10 @@ const PieChart = /*#__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: size,
@@ -155,6 +155,6 @@ const PieChart = /*#__PURE__*/forwardRef((props, ref) => {
     onMouseEnter: () => setCurrentIndex(index),
     onMouseLeave: () => setCurrentIndex(null)
   }))), children);
-});
+};
 PieChart.displayName = 'f7-pie-chart';
 export default PieChart;

package/components/popover.d.ts

@@ -12,7 +12,6 @@ export interface PopoverProps {
   opened ?: boolean;
   animate ?: boolean;
   targetEl ?: string | object;
-  arrow ?: boolean;
   backdrop ?: boolean;
   backdropEl ?: string | object;
   closeByBackdropClick ?: boolean;

package/components/popover.js

@@ -1,15 +1,15 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { forwardRef, useRef, useImperativeHandle } from 'react';
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useRef } from 'react';
 import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect.js';
 import { classNames, getExtraAttrs, emit } from '../shared/utils.js';
 import { colorClasses } from '../shared/mixins.js';
 import { f7ready, f7 } from '../shared/f7.js';
 import { watchProp } from '../shared/watch-prop.js';
 import { 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);
   const {
     className,
@@ -19,14 +19,14 @@ const Popover = /*#__PURE__*/forwardRef((props, ref) => {
     opened,
     animate,
     targetEl,
-    arrow,
     backdrop,
     backdropEl,
     closeByBackdropClick,
     closeByOutsideClick,
     closeOnEscape,
     containerEl,
-    verticalPosition
+    verticalPosition,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
@@ -49,10 +49,6 @@ const Popover = /*#__PURE__*/forwardRef((props, ref) => {
     isClosing.current = false;
     emit(props, 'popoverClosed', instance);
   };
-  useImperativeHandle(ref, () => ({
-    el: elRef.current,
-    f7Popover: () => f7Popover.current
-  }));
   watchProp(opened, value => {
     if (!f7Popover.current) return;
     if (value) {
@@ -77,7 +73,6 @@ const Popover = /*#__PURE__*/forwardRef((props, ref) => {
     if ('closeByBackdropClick' in props) popoverParams.closeByBackdropClick = closeByBackdropClick;
     if ('closeByOutsideClick' in props) popoverParams.closeByOutsideClick = closeByOutsideClick;
     if ('closeOnEscape' in props) popoverParams.closeOnEscape = closeOnEscape;
-    if ('arrow' in props) popoverParams.arrow = arrow;
     if ('backdrop' in props) popoverParams.backdrop = backdrop;
     if ('backdropEl' in props) popoverParams.backdropEl = backdropEl;
     if ('animate' in props) popoverParams.animate = animate;
@@ -115,12 +110,15 @@ const Popover = /*#__PURE__*/forwardRef((props, ref) => {
     id: id,
     style: style,
     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;

package/components/popup.js

@@ -1,15 +1,15 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { forwardRef, 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';
 import { colorClasses } from '../shared/mixins.js';
 import { modalStateClasses } from '../shared/modal-state-classes.js';
 import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect.js';
 import { classNames, emit, getExtraAttrs } from '../shared/utils.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);
   const {
     className,
@@ -26,7 +26,8 @@ const Popup = /*#__PURE__*/forwardRef((props, ref) => {
     closeOnEscape,
     swipeToClose = false,
     swipeHandler,
-    containerEl
+    containerEl,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
@@ -61,10 +62,6 @@ const Popup = /*#__PURE__*/forwardRef((props, ref) => {
     isClosing.current = false;
     emit(props, 'popupClosed', instance);
   };
-  useImperativeHandle(ref, () => ({
-    el: elRef.current,
-    f7Popup: () => f7Popup.current
-  }));
   watchProp(opened, value => {
     if (!f7Popup.current) return;
     if (value) {
@@ -132,8 +129,13 @@ const Popup = /*#__PURE__*/forwardRef((props, ref) => {
     id: id,
     style: style,
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el, {
+        f7Popup: () => f7Popup.current
+      });
+    }
   }, extraAttrs), children);
-});
+};
 Popup.displayName = 'f7-popup';
 export default Popup;

package/components/preloader.js

@@ -1,23 +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, 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();
   const {
     className,
     id,
     style,
-    size
+    size,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   const preloaderStyle = {};
   let sizeComputed = size;
   if (sizeComputed && typeof sizeComputed === 'string' && sizeComputed.indexOf('px') >= 0) {
@@ -72,8 +70,11 @@ const Preloader = /*#__PURE__*/forwardRef((props, ref) => {
     id: id,
     style: preloaderStyle,
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs), innerEl);
-});
+};
 Preloader.displayName = 'f7-preloader';
 export default Preloader;

package/components/progressbar.js

@@ -1,17 +1,18 @@
-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 {
     className,
     id,
     style,
     progress,
-    infinite
+    infinite,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
@@ -19,10 +20,6 @@ const Progressbar = /*#__PURE__*/forwardRef((props, ref) => {
     if (!f7) return;
     f7.progressbar.set(elRef.current, newProgress, speed);
   };
-  useImperativeHandle(ref, () => ({
-    el: elRef.current,
-    set
-  }));
   const transformStyle = {
     transform: progress ? `translate3d(${-100 + progress}%, 0, 0)` : '',
     WebkitTransform: progress ? `translate3d(${-100 + progress}%, 0, 0)` : ''
@@ -31,7 +28,12 @@ const Progressbar = /*#__PURE__*/forwardRef((props, ref) => {
     'progressbar-infinite': infinite
   }, colorClasses(props));
   return /*#__PURE__*/React.createElement("span", _extends({
-    ref: elRef,
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el, {
+        set
+      });
+    },
     id: id,
     style: style,
     className: classes,
@@ -39,6 +41,6 @@ const Progressbar = /*#__PURE__*/forwardRef((props, ref) => {
   }, extraAttrs), /*#__PURE__*/React.createElement("span", {
     style: transformStyle
   }));
-});
+};
 Progressbar.displayName = 'f7-progressbar';
 export default Progressbar;

package/components/radio.js

@@ -1,10 +1,10 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { forwardRef, useRef, useImperativeHandle } from 'react';
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useRef } from 'react';
 import { classNames, getExtraAttrs, 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 {
     className,
     id,
@@ -14,16 +14,14 @@ const Radio = /*#__PURE__*/forwardRef((props, ref) => {
     disabled,
     readonly,
     checked,
-    defaultChecked
+    defaultChecked,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
   const onChange = event => {
     emit(props, 'change', event);
   };
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   const inputEl = /*#__PURE__*/React.createElement("input", {
     type: "radio",
     name: name,
@@ -44,8 +42,11 @@ const Radio = /*#__PURE__*/forwardRef((props, ref) => {
     id: id,
     style: style,
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs), inputEl, iconEl, children);
-});
+};
 Radio.displayName = 'f7-radio';
 export default Radio;

package/components/range.js

@@ -1,14 +1,14 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { forwardRef, useRef, useImperativeHandle } from 'react';
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useRef } from 'react';
 import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect.js';
 import { classNames, getExtraAttrs, noUndefinedProps, emit } from '../shared/utils.js';
 import { colorClasses } from '../shared/mixins.js';
 import { f7ready, f7 } from '../shared/f7.js';
 import { watchProp } from '../shared/watch-prop.js';
+import { setRef } from '../shared/set-ref.js';
 
 
-
-const Range = /*#__PURE__*/forwardRef((props, ref) => {
+const Range = props => {
   const f7Range = useRef(null);
   const {
     className,
@@ -34,14 +34,11 @@ const Range = /*#__PURE__*/forwardRef((props, ref) => {
     name,
     input,
     inputId,
-    disabled
+    disabled,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current,
-    f7Range: () => f7Range.current
-  }));
   watchProp(value, newValue => {
     if (!f7Range.current) return;
     const rangeValue = f7Range.current.value;
@@ -109,15 +106,20 @@ const Range = /*#__PURE__*/forwardRef((props, ref) => {
     disabled
   }, colorClasses(props));
   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", {
     type: "range",
     name: name,
     id: inputId
   }), children);
-});
+};
 Range.displayName = 'f7-range';
 export default Range;

package/components/routable-modals.js

@@ -1,16 +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, 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 = () => {
     routerData.current = {
       modals,
@@ -35,18 +35,20 @@ const RoutableModals = /*#__PURE__*/forwardRef((props, ref) => {
     f7events.emit('modalsRouterDidUpdate', 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({
       key: modalId
     }, modalProps));
   }));
-});
+};
 RoutableModals.displayName = 'f7-routable-modals';
 export default RoutableModals;