framework7-react 8.3.3 → 9.0.0-beta.1

package/components/block-title.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 } from '../shared/utils.js';
 import { colorClasses } from '../shared/mixins.js';
+import { setRef } from '../shared/set-ref.js';
 
 
-const BlockTitle = /*#__PURE__*/forwardRef((props, ref) => {
+const BlockTitle = props => {
   const {
     className,
     id,
     style,
     children,
     large,
-    medium
+    medium,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   const classes = classNames(className, 'block-title', {
     'block-title-large': large,
     'block-title-medium': medium
@@ -26,8 +25,11 @@ const BlockTitle = /*#__PURE__*/forwardRef((props, ref) => {
     id: id,
     style: style,
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs), children);
-});
+};
 BlockTitle.displayName = 'f7-block-title';
 export default BlockTitle;

package/components/block.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 } from '../shared/utils.js';
 import { colorClasses } from '../shared/mixins.js';
 import { useTab } from '../shared/use-tab.js';
+import { setRef } from '../shared/set-ref.js';
 
 
-const Block = /*#__PURE__*/forwardRef((props, ref) => {
+const Block = props => {
   const {
     className,
     inset,
@@ -39,13 +40,11 @@ const Block = /*#__PURE__*/forwardRef((props, ref) => {
     tabActive,
     id,
     style,
-    children
+    children,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   useTab(elRef, props);
   const classes = classNames(className, 'block', {
     inset,
@@ -82,8 +81,11 @@ const Block = /*#__PURE__*/forwardRef((props, ref) => {
     id: id,
     style: style,
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs), children);
-});
+};
 Block.displayName = 'f7-block';
 export default Block;

package/components/breadcrumbs-collapsed.js

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

package/components/breadcrumbs-item.js

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

package/components/breadcrumbs-separator.js

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

package/components/breadcrumbs.js

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

package/components/button.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 { classNames, getExtraAttrs, extend, isStringProp, emit } from '../shared/utils.js';
 import { colorClasses, actionsAttrs, actionsClasses, routerAttrs, routerClasses } from '../shared/mixins.js';
 import { useTooltip } from '../shared/use-tooltip.js';
 import { useIcon } from '../shared/use-icon.js';
 import { useRouteProps } from '../shared/use-route-props.js';
 import Preloader from './preloader.js';
+import { setRef } from '../shared/set-ref.js';
 
 
-const Button = /*#__PURE__*/forwardRef((props, ref) => {
+const Button = props => {
   const {
     className,
     id,
@@ -46,16 +47,14 @@ const Button = /*#__PURE__*/forwardRef((props, ref) => {
     preloader,
     preloaderSize,
     preloaderColor,
-    loading
+    loading,
+    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);
   useRouteProps(elRef, props);
   const getClasses = () => {
@@ -108,7 +107,10 @@ const Button = /*#__PURE__*/forwardRef((props, ref) => {
   }
   if (preloader) {
     return /*#__PURE__*/React.createElement(ButtonTag, _extends({
-      ref: elRef,
+      ref: el => {
+        elRef.current = el;
+        setRef(ref, el);
+      },
       id: id,
       style: style,
       className: getClasses()
@@ -120,13 +122,16 @@ const Button = /*#__PURE__*/forwardRef((props, ref) => {
     }), /*#__PURE__*/React.createElement("span", null, iconEl, textEl, children));
   }
   return /*#__PURE__*/React.createElement(ButtonTag, _extends({
-    ref: elRef,
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    },
     id: id,
     style: style,
     className: getClasses()
   }, getAttrs(), extraAttrs, {
     onClick: onClick
   }), iconEl, textEl, children);
-});
+};
 Button.displayName = 'f7-button';
 export default Button;

package/components/card-content.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 } from '../shared/utils.js';
 import { colorClasses } from '../shared/mixins.js';
+import { setRef } from '../shared/set-ref.js';
 
 
-const CardContent = /*#__PURE__*/forwardRef((props, ref) => {
+const CardContent = props => {
   const {
     className,
     id,
     style,
     children,
-    padding = true
+    padding = true,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   const classes = classNames(className, 'card-content', {
     'card-content-padding': padding
   }, colorClasses(props));
@@ -24,8 +23,11 @@ const CardContent = /*#__PURE__*/forwardRef((props, ref) => {
     id: id,
     style: style,
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs), children);
-});
+};
 CardContent.displayName = 'f7-card-content';
 export default CardContent;

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

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

package/components/card.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 } 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 CardHeader from './card-header.js';
 import CardContent from './card-content.js';
@@ -8,9 +8,10 @@ import { classNames, getExtraAttrs, getSlots, 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 { setRef } from '../shared/set-ref.js';
 
 
-const Card = /*#__PURE__*/forwardRef((props, ref) => {
+const Card = props => {
   const {
     className,
     id,
@@ -36,7 +37,8 @@ const Card = /*#__PURE__*/forwardRef((props, ref) => {
     swipeToClose,
     closeByBackdropClick,
     backdrop,
-    backdropEl
+    backdropEl,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
@@ -107,11 +109,6 @@ const Card = /*#__PURE__*/forwardRef((props, ref) => {
       close();
     }
   });
-  useImperativeHandle(ref, () => ({
-    el: elRef.current,
-    open,
-    close
-  }));
   let headerEl;
   let contentEl;
   let footerEl;
@@ -150,8 +147,14 @@ const Card = /*#__PURE__*/forwardRef((props, ref) => {
     "data-close-by-backdrop-click": typeof closeByBackdropClick === 'undefined' ? closeByBackdropClick : closeByBackdropClick.toString(),
     "data-backdrop": typeof backdrop === 'undefined' ? backdrop : backdrop.toString(),
     "data-backdrop-el": backdropEl,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el, {
+        open,
+        close
+      });
+    }
   }, extraAttrs), headerEl, contentEl, footerEl, slots.default);
-});
+};
 Card.displayName = 'f7-card';
 export default Card;

package/components/checkbox.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, useEffect } from 'react';
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useRef, useEffect } from 'react';
 import { classNames, getExtraAttrs, emit } from '../shared/utils.js';
 import { colorClasses } from '../shared/mixins.js';
+import { setRef } from '../shared/set-ref.js';
 
 
-const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
+const Checkbox = props => {
   const {
     className,
     id,
@@ -16,15 +17,12 @@ const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
     readonly,
     checked,
     defaultChecked,
-    indeterminate
+    indeterminate,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
   const inputElRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current,
-    inputEl: inputElRef.current
-  }));
   const onChange = event => {
     emit(props, 'change', event);
   };
@@ -55,8 +53,13 @@ const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
     id: id,
     style: style,
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el, {
+        inputEl: inputElRef.current
+      });
+    }
   }, extraAttrs), inputEl, iconEl, children);
-});
+};
 Checkbox.displayName = 'f7-checkbox';
 export default Checkbox;

package/components/chip.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, getSlots, emit } from '../shared/utils.js';
 import { colorClasses } from '../shared/mixins.js';
 import { useTooltip } from '../shared/use-tooltip.js';
 import { useIcon } from '../shared/use-icon.js';
+import { setRef } from '../shared/set-ref.js';
 
 
-const Chip = /*#__PURE__*/forwardRef((props, ref) => {
+const Chip = props => {
   const {
     className,
     id,
@@ -16,7 +17,8 @@ const Chip = /*#__PURE__*/forwardRef((props, ref) => {
     deleteable,
     mediaTextColor,
     mediaBgColor,
-    outline
+    outline,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const onClick = event => {
@@ -26,9 +28,6 @@ const Chip = /*#__PURE__*/forwardRef((props, ref) => {
     emit(props, 'delete', event);
   };
   const elRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   useTooltip(elRef, props);
   const slots = getSlots(props);
   const iconEl = useIcon(props);
@@ -59,10 +58,13 @@ const Chip = /*#__PURE__*/forwardRef((props, ref) => {
     id: id,
     style: style,
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs, {
     onClick: onClick
   }), mediaEl, labelEl, deleteEl);
-});
+};
 Chip.displayName = 'f7-chip';
 export default Chip;

package/components/fab-backdrop.js

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