framework7-react 8.3.3 → 9.0.0-beta.1

package/components/list-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, 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';
 import { classNames, getExtraAttrs, emit, getSlots, extend } from '../shared/utils.js';
 import { colorClasses } from '../shared/mixins.js';
@@ -7,9 +7,10 @@ import { f7ready, f7 } from '../shared/f7.js';
 import TextEditor from './text-editor.js';
 import { watchProp } from '../shared/watch-prop.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 {
     className,
     id,
@@ -70,7 +71,8 @@ const ListInput = /*#__PURE__*/forwardRef((props, ref) => {
     // Colorpicker
     colorPickerParams,
     // Text editor
-    textEditorParams
+    textEditorParams,
+    ref
   } = props;
   const [inputInvalid, setInputInvalid] = useState(false);
   const [inputFocused, setInputFocused] = useState(false);
@@ -124,44 +126,29 @@ const ListInput = /*#__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(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);
     if ((validate || validate === '' || validateOnBlur || validateOnBlur === '') && inputElRef.current) {
       validateInput(inputElRef.current);
     }
     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[0]);
     }
   };
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   const onMount = () => {
     if (!elRef.current && !itemContentElRef.current) return;
     f7ready(() => {
@@ -382,7 +369,10 @@ const ListInput = /*#__PURE__*/forwardRef((props, ref) => {
     return ItemContent;
   }
   return /*#__PURE__*/React.createElement("li", _extends({
-    ref: elRef,
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    },
     id: id,
     style: style,
     className: classNames(className, {
@@ -391,6 +381,6 @@ const ListInput = /*#__PURE__*/forwardRef((props, ref) => {
   }, extraAttrs), slots['root-start'], ItemContent, isSortableComputed && /*#__PURE__*/React.createElement("div", {
     className: "sortable-handler"
   }), slots.root, slots['root-end']);
-});
+};
 ListInput.displayName = 'f7-list-input';
 export default ListInput;

package/components/list-item-content.js

@@ -1,6 +1,7 @@
 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';
 const ListItemContent = props => {
   const {
@@ -33,7 +34,8 @@ const ListItemContent = props => {
     isMediaComputed,
     isSortableComputed,
     isSortableOppositeComputed,
-    slots
+    slots,
+    ref
   } = props;
   const inputElRef = useRef(null);
   useEffect(() => {
@@ -147,7 +149,10 @@ const ListItemContent = props => {
   }, colorClasses(props));
   return /*#__PURE__*/React.createElement(ItemContentTag, {
     className: classes,
-    onClick: onClick
+    onClick: onClick,
+    ref: el => {
+      setRef(ref, el);
+    }
   }, isSortableComputed && sortable !== false && isSortableOppositeComputed && /*#__PURE__*/React.createElement("div", {
     className: "sortable-handler"
   }), slots['content-start'], inputEl, inputIconEl, mediaEl, innerEl, slots.content, slots['content-end']);

package/components/list-item.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 { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect.js';
 import { classNames, getExtraAttrs, getSlots, emit, isStringProp } from '../shared/utils.js';
 import { colorClasses, actionsAttrs, actionsClasses, routerAttrs, routerClasses } from '../shared/mixins.js';
@@ -10,6 +10,7 @@ import { watchProp } from '../shared/watch-prop.js';
 import { f7ready, f7 } from '../shared/f7.js';
 import ListItemContent from './list-item-content.js';
 import { ListContext } from '../shared/list-context.js';
+import { setRef } from '../shared/set-ref.js';
 
 
 
@@ -52,7 +53,7 @@ const ListItemContent = ({
 
 };
 */
-const ListItem = /*#__PURE__*/forwardRef((props, ref) => {
+const ListItem = props => {
   const {
     className,
     id,
@@ -81,7 +82,8 @@ const ListItem = /*#__PURE__*/forwardRef((props, ref) => {
     radio,
     disabled,
     virtualListIndex,
-    href
+    href,
+    ref
   } = props;
   const listContext = useContext(ListContext);
   const {
@@ -162,10 +164,6 @@ const ListItem = /*#__PURE__*/forwardRef((props, ref) => {
   const onChange = event => {
     emit(props, 'change', event);
   };
-  useImperativeHandle(ref, () => ({
-    el: elRef.current,
-    f7SmartSelect: () => f7SmartSelect.current
-  }));
   useTooltip(elRef, props);
   useRouteProps(linkElRef, props);
   watchProp(swipeoutOpened, newValue => {
@@ -249,7 +247,7 @@ const ListItem = /*#__PURE__*/forwardRef((props, ref) => {
     // Link
     if (link || href || accordionItem || smartSelect) {
       const linkAttrs = {
-        href: link === true ? '' : link || href,
+        href: href === false ? undefined : link === true ? href || '' : link || href,
         target,
         'data-tab': isStringProp(tabLink) && tabLink || undefined,
         ...routerAttrs(props),
@@ -283,7 +281,12 @@ const ListItem = /*#__PURE__*/forwardRef((props, ref) => {
   }, colorClasses(props));
   if (groupTitle) {
     return /*#__PURE__*/React.createElement("li", {
-      ref: elRef,
+      ref: el => {
+        elRef.current = el;
+        setRef(ref, el, {
+          f7SmartSelect: () => f7SmartSelect.current
+        });
+      },
       id: id,
       style: style,
       className: liClasses,
@@ -313,6 +316,6 @@ const ListItem = /*#__PURE__*/forwardRef((props, ref) => {
   }, linkItemEl) : linkItemEl, isSortableComputed && sortable !== false && !isSortableOppositeComputed && /*#__PURE__*/React.createElement("div", {
     className: "sortable-handler"
   }), (swipeout || accordionItem) && slots.default, slots.root, slots['root-end']);
-});
+};
 ListItem.displayName = 'f7-list-item';
 export default ListItem;

package/components/list.js

@@ -1,14 +1,15 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { forwardRef, useRef, useImperativeHandle } from 'react';
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useRef } from 'react';
 import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect.js';
 import { classNames, getExtraAttrs, getSlots, flattenArray, emit, extend } from '../shared/utils.js';
 import { colorClasses } from '../shared/mixins.js';
 import { f7, f7ready } from '../shared/f7.js';
 import { ListContext } from '../shared/list-context.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);
   const {
     className,
@@ -60,7 +61,8 @@ const List = /*#__PURE__*/forwardRef((props, ref) => {
     form,
     formStoreData,
     virtualList,
-    virtualListParams
+    virtualListParams,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
@@ -83,10 +85,6 @@ const List = /*#__PURE__*/forwardRef((props, ref) => {
     if (elRef.current !== listEl) return;
     emit(props, 'sortableMove', el, listEl);
   };
-  useImperativeHandle(ref, () => ({
-    el: elRef.current,
-    f7VirtualList: () => f7VirtualList.current
-  }));
   useTab(elRef, props);
   const attachEvents = () => {
     f7ready(() => {
@@ -217,7 +215,12 @@ const List = /*#__PURE__*/forwardRef((props, ref) => {
   }, colorClasses(props));
   return /*#__PURE__*/React.createElement(ListTag, _extends({
     id: id,
-    ref: elRef,
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el, {
+        f7VirtualList: () => f7VirtualList.current
+      });
+    },
     style: style,
     className: classes
   }, extraAttrs, {
@@ -231,6 +234,6 @@ const List = /*#__PURE__*/forwardRef((props, ref) => {
       listIsSortableOpposite: sortableOpposite
     }
   }, slots['before-list'], rootChildrenBeforeList, ulChildren.length > 0 && /*#__PURE__*/React.createElement("ul", null, ulChildren), slots['after-list'], rootChildrenAfterList));
-});
+};
 List.displayName = 'f7-list';
 export default List;

package/components/login-screen-title.js

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

package/components/login-screen.js

@@ -1,14 +1,15 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { forwardRef, useRef, useImperativeHandle } from 'react';
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useRef } from 'react';
 import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect.js';
 import { classNames, getExtraAttrs, 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 LoginScreen = /*#__PURE__*/forwardRef((props, ref) => {
+const LoginScreen = props => {
   const f7LoginScreen = useRef(null);
   const {
     className,
@@ -17,7 +18,8 @@ const LoginScreen = /*#__PURE__*/forwardRef((props, ref) => {
     children,
     opened,
     animate,
-    containerEl
+    containerEl,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const isOpened = useRef(opened);
@@ -40,10 +42,6 @@ const LoginScreen = /*#__PURE__*/forwardRef((props, ref) => {
     isClosing.current = false;
     emit(props, 'loginScreenClosed', instance);
   };
-  useImperativeHandle(ref, () => ({
-    el: elRef.current,
-    f7LoginScreen: () => f7LoginScreen.current
-  }));
 
   // watch opened changes
   watchProp(opened, value => {
@@ -100,8 +98,13 @@ const LoginScreen = /*#__PURE__*/forwardRef((props, ref) => {
     id: id,
     style: style,
     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;

package/components/message.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 } 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 {
     className,
     id,
@@ -25,7 +26,8 @@ const Message = /*#__PURE__*/forwardRef((props, ref) => {
     sameHeader,
     sameFooter,
     sameAvatar,
-    typing
+    typing,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
@@ -50,9 +52,6 @@ const Message = /*#__PURE__*/forwardRef((props, ref) => {
   const onBubbleClick = event => {
     emit(props, 'clickBubble', event);
   };
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   const slots = getSlots(props);
   const classes = classNames(className, 'message', {
     'message-sent': type === 'sent',
@@ -70,7 +69,10 @@ const Message = /*#__PURE__*/forwardRef((props, ref) => {
     id: id,
     style: style,
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs, {
     onClick: onClick
   }), slots.start, (avatar || slots.avatar) && /*#__PURE__*/React.createElement("div", {
@@ -107,6 +109,6 @@ const Message = /*#__PURE__*/forwardRef((props, ref) => {
     className: "message-footer",
     onClick: onFooterClick
   }, footer, slots.footer), slots['content-end']), slots.end);
-});
+};
 Message.displayName = 'f7-message';
 export default Message;

package/components/messagebar-attachment.js

@@ -1,17 +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, 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 {
     className,
     id,
     style,
     children,
     image,
-    deletable = true
+    deletable = true,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
@@ -21,15 +23,15 @@ const MessagebarAttachment = /*#__PURE__*/forwardRef((props, ref) => {
   const onDeleteClick = event => {
     emit(props, 'attachmentDelete', event);
   };
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   const classes = classNames(className, 'messagebar-attachment', 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, {
     onClick: onClick
   }), image && /*#__PURE__*/React.createElement("img", {
@@ -38,6 +40,6 @@ const MessagebarAttachment = /*#__PURE__*/forwardRef((props, ref) => {
     className: "messagebar-attachment-delete",
     onClick: onDeleteClick
   }), children);
-});
+};
 MessagebarAttachment.displayName = 'f7-messagebar-attachment';
 export default MessagebarAttachment;

package/components/messagebar-attachments.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 MessagebarAttachments = /*#__PURE__*/forwardRef((props, ref) => {
+const MessagebarAttachments = 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, 'messagebar-attachments', 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);
-});
+};
 MessagebarAttachments.displayName = 'f7-messagebar-attachments';
 export default MessagebarAttachments;

package/components/messagebar-sheet-image.js

@@ -1,17 +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, 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 {
     className,
     id,
     style,
     children,
     image,
-    checked
+    checked,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
@@ -19,9 +21,6 @@ const MessagebarSheetImage = /*#__PURE__*/forwardRef((props, ref) => {
     if (event.target.checked) emit(props, 'checked', event);else emit(props, 'unchecked', event);
     emit(props, 'change', event);
   };
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   const classes = classNames(className, 'messagebar-sheet-image', 'checkbox', colorClasses(props));
   const styles = {
     ...(style || {})
@@ -30,7 +29,10 @@ const MessagebarSheetImage = /*#__PURE__*/forwardRef((props, ref) => {
     id: id,
     className: classes,
     style: styles,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs), /*#__PURE__*/React.createElement("input", {
     type: "checkbox",
     checked: checked,
@@ -40,6 +42,6 @@ const MessagebarSheetImage = /*#__PURE__*/forwardRef((props, ref) => {
   }), image && /*#__PURE__*/React.createElement("img", {
     src: image
   }), children);
-});
+};
 MessagebarSheetImage.displayName = 'f7-messagebar-sheet-image';
 export default MessagebarSheetImage;

package/components/messagebar-sheet-item.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 MessagebarSheetItem = /*#__PURE__*/forwardRef((props, ref) => {
+const MessagebarSheetItem = 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, 'messagebar-sheet-item', 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);
-});
+};
 MessagebarSheetItem.displayName = 'f7-messagebar-sheet-item';
 export default MessagebarSheetItem;

package/components/messagebar-sheet.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 MessagebarSheet = /*#__PURE__*/forwardRef((props, ref) => {
+const MessagebarSheet = 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, 'messagebar-sheet', 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);
-});
+};
 MessagebarSheet.displayName = 'f7-messagebar-sheet';
 export default MessagebarSheet;