framework7-react 8.3.4 → 9.0.0

package/components/fab-button.js

@@ -1,11 +1,12 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { forwardRef, useRef, useImperativeHandle } from 'react';
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useRef } from 'react';
 import { classNames, getExtraAttrs, emit } from '../shared/utils.js';
 import { colorClasses } from '../shared/mixins.js';
 import { useTooltip } from '../shared/use-tooltip.js';
+import { setRef } from '../shared/set-ref.js';
 
 
-const FabButton = /*#__PURE__*/forwardRef((props, ref) => {
+const FabButton = props => {
   const {
     className,
     id,
@@ -13,16 +14,14 @@ const FabButton = /*#__PURE__*/forwardRef((props, ref) => {
     children,
     fabClose,
     label,
-    target
+    target,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
   const onClick = e => {
     emit(props, 'click', e);
   };
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   useTooltip(elRef, props);
   const classes = classNames(className, {
     'fab-close': fabClose,
@@ -39,10 +38,13 @@ const FabButton = /*#__PURE__*/forwardRef((props, ref) => {
     style: style,
     target: target,
     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;

package/components/fab-buttons.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, 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 {
     className,
     id,
     style,
     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));
   return /*#__PURE__*/React.createElement("div", _extends({
     id: id,
     style: style,
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs), children);
-});
+};
 FabButtons.displayName = 'f7-fab-buttons';
 export default FabButtons;

package/components/fab.js

@@ -1,11 +1,12 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { forwardRef, useRef, useImperativeHandle } from 'react';
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useRef } from 'react';
 import { classNames, getExtraAttrs, 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 {
     className,
     id,
@@ -14,16 +15,14 @@ const Fab = /*#__PURE__*/forwardRef((props, ref) => {
     href,
     target,
     text,
-    position = 'right-bottom'
+    position = 'right-bottom',
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
   const onClick = e => {
     emit(props, 'click', e);
   };
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   useTooltip(elRef, props);
   let hrefComputed = href;
   if (hrefComputed === true) hrefComputed = '#';
@@ -69,8 +68,11 @@ const Fab = /*#__PURE__*/forwardRef((props, ref) => {
     style: style,
     className: classes,
     "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;

package/components/gauge.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); }
+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 {
     className,
     id,
@@ -23,13 +24,11 @@ const Gauge = /*#__PURE__*/forwardRef((props, ref) => {
     labelText,
     labelTextColor = '#888888',
     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');
   const semiCircle = type === 'semicircle';
   const radius = size / 2 - borderWidth / 2;
@@ -39,7 +38,10 @@ const Gauge = /*#__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", {
     className: "gauge-svg",
     width: `${size}px`,
@@ -99,6 +101,6 @@ const Gauge = /*#__PURE__*/forwardRef((props, ref) => {
     textAnchor: "middle",
     dominantBaseline: !semiCircle ? 'middle' : null
   }, labelText)));
-});
+};
 Gauge.displayName = 'f7-gauge';
 export default Gauge;

package/components/icon.js

@@ -1,12 +1,13 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { forwardRef, useRef, useImperativeHandle } from 'react';
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useRef } from 'react';
 import { classNames, getExtraAttrs, extend } from '../shared/utils.js';
 import { colorClasses } from '../shared/mixins.js';
 import { useTooltip } from '../shared/use-tooltip.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();
   const {
     className,
@@ -18,13 +19,11 @@ const Icon = /*#__PURE__*/forwardRef((props, ref) => {
     icon,
     md,
     ios,
-    size
+    size,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   useTooltip(elRef, props);
   const getClasses = () => {
     let classes = {
@@ -75,8 +74,11 @@ const Icon = /*#__PURE__*/forwardRef((props, ref) => {
       height: sizeComputed
     }, style),
     className: getClasses(),
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs), getIconText(), children);
-});
+};
 Icon.displayName = 'f7-icon';
 export default Icon;

package/components/input.js

@@ -1,5 +1,5 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { forwardRef, useRef, useImperativeHandle, 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 { classNames, getExtraAttrs, getSlots, emit, extend } from '../shared/utils.js';
 import { colorClasses } from '../shared/mixins.js';
@@ -8,9 +8,10 @@ import { watchProp } from '../shared/watch-prop.js';
 import Toggle from './toggle.js';
 import Range from './range.js';
 import TextEditor from './text-editor.js';
+import { setRef } from '../shared/set-ref.js';
 
 
-const Input = /*#__PURE__*/forwardRef((props, ref) => {
+const Input = props => {
   const {
     className,
     id,
@@ -66,7 +67,8 @@ const Input = /*#__PURE__*/forwardRef((props, ref) => {
     // Colorpicker
     colorPickerParams,
     // Text editor
-    textEditorParams
+    textEditorParams,
+    ref
   } = props;
   const [inputInvalid, setInputInvalid] = useState(false);
   const [inputFocused, setInputFocused] = useState(false);
@@ -115,44 +117,29 @@ const Input = /*#__PURE__*/forwardRef((props, ref) => {
   const onInputClear = event => {
     emit(props, 'inputClear', event);
   };
-  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);
     if (!(validateOnBlur || validateOnBlur === '') && (validate || validate === '') && inputElRef.current) {
       validateInput();
     }
   };
-  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);
     if ((validate || validate === '' || validateOnBlur || validateOnBlur === '') && inputElRef.current) {
       validateInput();
     }
     setInputFocused(false);
   };
-  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);
     if (type === 'texteditor') {
       emit(props, 'textEditorChange', args[1]);
     }
   };
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   const onMount = () => {
     f7ready(() => {
       if (type === 'range' || type === 'toggle') return;
@@ -378,7 +365,10 @@ const Input = /*#__PURE__*/forwardRef((props, ref) => {
       id: id,
       className: wrapClasses,
       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", {
       className: "input-error-message"
     }, errorMessage, slots['error-message']), clearButton && /*#__PURE__*/React.createElement("span", {
@@ -388,6 +378,6 @@ const Input = /*#__PURE__*/forwardRef((props, ref) => {
     }, info, slots.info));
   }
   return inputEl;
-});
+};
 Input.displayName = 'f7-input';
 export default Input;

package/components/link.js

@@ -1,5 +1,5 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { forwardRef, useRef, useImperativeHandle, 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';
 import { colorClasses, routerAttrs, routerClasses, actionsAttrs, actionsClasses } from '../shared/mixins.js';
 import { useIcon } from '../shared/use-icon.js';
@@ -8,10 +8,11 @@ import { useTooltip } from '../shared/use-tooltip.js';
 import { TabbarContext } from '../shared/tabbar-context.js';
 import Badge from './badge.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);
   const {
     className,
@@ -30,7 +31,8 @@ const Link = /*#__PURE__*/forwardRef((props, ref) => {
     target,
     // Smart Select
     smartSelect,
-    smartSelectParams
+    smartSelectParams,
+    ref
   } = props;
   const tabbarContext = useContext(TabbarContext);
   const isTabbarIcons = tabbarLabel || tabbarContext.tabbarHasIcons;
@@ -39,10 +41,6 @@ const Link = /*#__PURE__*/forwardRef((props, ref) => {
   const onClick = e => {
     emit(props, 'click', e);
   };
-  useImperativeHandle(ref, () => ({
-    el: elRef.current,
-    f7SmartSelect: () => f7SmartSelect.current
-  }));
   useTooltip(elRef, props);
   useRouteProps(elRef, props);
   useSmartSelect(smartSelect, smartSelectParams, f7SmartSelect, () => {
@@ -83,13 +81,18 @@ const Link = /*#__PURE__*/forwardRef((props, ref) => {
     ...actionsAttrs(props)
   };
   return /*#__PURE__*/React.createElement("a", _extends({
-    ref: elRef,
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el, {
+        f7SmartSelect: () => f7SmartSelect.current
+      });
+    },
     id: id,
     style: style,
     className: classes
   }, attrs, extraAttrs, {
     onClick: onClick
   }), iconEl, textEl, children);
-});
+};
 Link.displayName = 'f7-link';
 export default Link;

package/components/list-button.js

@@ -1,12 +1,13 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { forwardRef, useRef, useImperativeHandle } from 'react';
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useRef } from 'react';
 import { classNames, getExtraAttrs, isStringProp, emit } from '../shared/utils.js';
 import { colorClasses, actionsAttrs, actionsClasses, routerAttrs, routerClasses } from '../shared/mixins.js';
 import { useTooltip } from '../shared/use-tooltip.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 {
     className,
     id,
@@ -18,7 +19,8 @@ const ListButton = /*#__PURE__*/forwardRef((props, ref) => {
     tabLinkActive,
     link,
     href,
-    target
+    target,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
@@ -26,9 +28,6 @@ const ListButton = /*#__PURE__*/forwardRef((props, ref) => {
   const onClick = e => {
     emit(props, 'click', e);
   };
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   useTooltip(linkElRef, props);
   useRouteProps(linkElRef, props);
   const linkAttrs = {
@@ -50,13 +49,16 @@ const ListButton = /*#__PURE__*/forwardRef((props, ref) => {
     id: id,
     style: style,
     className: className,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs), /*#__PURE__*/React.createElement("a", _extends({
     className: linkClasses
   }, linkAttrs, {
     onClick: onClick,
     ref: linkElRef
   }), title, text, children));
-});
+};
 ListButton.displayName = 'f7-list-button';
 export default ListButton;

package/components/list-group.js

@@ -1,11 +1,12 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { forwardRef, useRef, useImperativeHandle, 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 {
     className,
     id,
@@ -16,14 +17,12 @@ const ListGroup = /*#__PURE__*/forwardRef((props, ref) => {
     sortable,
     sortableOpposite,
     sortableTapHold,
-    sortableMoveElements
+    sortableMoveElements,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const listContext = useContext(ListContext);
   const elRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   const classes = classNames(className, 'list-group', {
     'media-list': mediaList,
     sortable,
@@ -35,7 +34,10 @@ const ListGroup = /*#__PURE__*/forwardRef((props, ref) => {
     style: style,
     className: classes,
     "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, {
     value: {
       listIsMedia: mediaList || listContext.listIsMedia,
@@ -44,6 +46,6 @@ const ListGroup = /*#__PURE__*/forwardRef((props, ref) => {
       listIsSortableOpposite: sortableOpposite || listContext.listIsSortableOpposite
     }
   }, children)));
-});
+};
 ListGroup.displayName = 'f7-list-group';
 export default ListGroup;

package/components/list-index.js

@@ -1,13 +1,14 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { forwardRef, useRef, useImperativeHandle } from 'react';
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useRef } from 'react';
 import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect.js';
 import { classNames, getExtraAttrs, 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 ListIndex = /*#__PURE__*/forwardRef((props, ref) => {
+const ListIndex = props => {
   const f7ListIndex = useRef(null);
   const {
     className,
@@ -20,7 +21,8 @@ const ListIndex = /*#__PURE__*/forwardRef((props, ref) => {
     scrollList = true,
     label = false,
     iosItemHeight = 14,
-    mdItemHeight = 14
+    mdItemHeight = 14,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
@@ -32,12 +34,6 @@ const ListIndex = /*#__PURE__*/forwardRef((props, ref) => {
     if (!f7ListIndex.current) return;
     f7ListIndex.current.scrollListToIndex(indexContent);
   };
-  useImperativeHandle(ref, () => ({
-    el: elRef.current,
-    f7ListIndex: () => f7ListIndex.current,
-    update,
-    scrollListToIndex
-  }));
   watchProp(indexes, newValue => {
     if (!f7ListIndex.current) return;
     f7ListIndex.current.params.indexes = newValue;
@@ -77,8 +73,15 @@ const ListIndex = /*#__PURE__*/forwardRef((props, ref) => {
     id: id,
     style: style,
     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;