framework7-react 8.3.4 → 9.0.0-beta.1

package/components/searchbar.js

@@ -1,13 +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 { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect.js';
 import { classNames, getExtraAttrs, getSlots, noUndefinedProps, emit } from '../shared/utils.js';
 import { colorClasses } from '../shared/mixins.js';
 import { f7ready, f7 } from '../shared/f7.js';
+import { setRef } from '../shared/set-ref.js';
 
 
-
-const Searchbar = /*#__PURE__*/forwardRef((props, ref) => {
+const Searchbar = props => {
   const f7Searchbar = useRef(null);
   const {
     className,
@@ -18,7 +18,7 @@ const Searchbar = /*#__PURE__*/forwardRef((props, ref) => {
     placeholder = 'Search',
     spellcheck,
     disableButton = true,
-    disableButtonText = 'Cancel',
+    disableButtonText = '',
     clearButton = true,
     // Input Value
     value,
@@ -42,7 +42,8 @@ const Searchbar = /*#__PURE__*/forwardRef((props, ref) => {
     removeDiacritics = false,
     hideGroupTitles = true,
     hideGroups = true,
-    init = true
+    init = true,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
@@ -87,15 +88,6 @@ const Searchbar = /*#__PURE__*/forwardRef((props, ref) => {
   const onDisableButtonClick = event => {
     emit(props, 'click:disable clickDisable', event);
   };
-  useImperativeHandle(ref, () => ({
-    el: elRef.current,
-    f7Searchbar: () => f7Searchbar.current,
-    search,
-    enable,
-    disable,
-    toggle,
-    clear
-  }));
   const onMount = () => {
     if (!init) return;
     f7ready(() => {
@@ -164,7 +156,9 @@ const Searchbar = /*#__PURE__*/forwardRef((props, ref) => {
     disableEl = /*#__PURE__*/React.createElement("span", {
       className: "searchbar-disable-button",
       onClick: onDisableButtonClick
-    }, disableButtonText);
+    }, /*#__PURE__*/React.createElement("i", {
+      className: "icon icon-close"
+    }), disableButtonText && /*#__PURE__*/React.createElement("span", null, disableButtonText));
   }
   const SearchbarTag = form ? 'form' : 'div';
   const classes = classNames(className, 'searchbar', {
@@ -174,7 +168,17 @@ const Searchbar = /*#__PURE__*/forwardRef((props, ref) => {
   }, colorClasses(props));
   const slots = getSlots(props);
   return /*#__PURE__*/React.createElement(SearchbarTag, _extends({
-    ref: elRef,
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el, {
+        f7Searchbar: () => f7Searchbar.current,
+        search,
+        enable,
+        disable,
+        toggle,
+        clear
+      });
+    },
     id: id,
     style: style,
     className: classes
@@ -196,6 +200,6 @@ const Searchbar = /*#__PURE__*/forwardRef((props, ref) => {
   }), /*#__PURE__*/React.createElement("i", {
     className: "searchbar-icon"
   }), clearEl, slots['input-wrap-end']), disableEl, slots['inner-end'], slots.default), slots['after-inner']);
-});
+};
 Searchbar.displayName = 'f7-searchbar';
 export default Searchbar;

package/components/segmented.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 } from '../shared/utils.js';
 import { colorClasses } from '../shared/mixins.js';
+import { setRef } from '../shared/set-ref.js';
 
-
-const Segmented = /*#__PURE__*/forwardRef((props, ref) => {
+const Segmented = props => {
   const {
     className,
     id,
@@ -19,13 +19,11 @@ const Segmented = /*#__PURE__*/forwardRef((props, ref) => {
     strong,
     strongIos,
     strongMd,
-    tag = 'div'
+    tag = 'div',
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   const classes = classNames(className, {
     segmented: true,
     'segmented-raised': raised,
@@ -43,10 +41,13 @@ const Segmented = /*#__PURE__*/forwardRef((props, ref) => {
     id: id,
     style: style,
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs), children, (strong || strongIos || strongMd) && /*#__PURE__*/React.createElement("span", {
     className: "segmented-highlight"
   }));
-});
+};
 Segmented.displayName = 'f7-segmented';
 export default Segmented;

package/components/sheet.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, getSlots } 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 Sheet = /*#__PURE__*/forwardRef((props, ref) => {
+const Sheet = props => {
   const f7Sheet = useRef(null);
   const {
     className,
@@ -32,7 +32,8 @@ const Sheet = /*#__PURE__*/forwardRef((props, ref) => {
     containerEl,
     breakpoints,
     backdropBreakpoint,
-    pushBreakpoint
+    pushBreakpoint,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
@@ -67,10 +68,6 @@ const Sheet = /*#__PURE__*/forwardRef((props, ref) => {
     isClosing.current = false;
     emit(props, 'sheetClosed', instance);
   };
-  useImperativeHandle(ref, () => ({
-    el: elRef.current,
-    f7Sheet: () => f7Sheet.current
-  }));
   const modalEvents = method => {
     if (!f7Sheet.current) return;
     f7Sheet.current[method]('open', onOpen);
@@ -170,8 +167,13 @@ const Sheet = /*#__PURE__*/forwardRef((props, ref) => {
     id: id,
     style: style,
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el, {
+        f7Sheet: () => f7Sheet.current
+      });
+    }
   }, extraAttrs), fixedList, slots.fixed, innerEl);
-});
+};
 Sheet.displayName = 'f7-sheet';
 export default Sheet;

package/components/stepper.js

@@ -1,13 +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 { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect.js';
 import { classNames, getExtraAttrs, emit, noUndefinedProps } 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 Stepper = /*#__PURE__*/forwardRef((props, ref) => {
+const Stepper = props => {
   const f7Stepper = useRef(null);
   const {
     className,
@@ -46,7 +46,8 @@ const Stepper = /*#__PURE__*/forwardRef((props, ref) => {
     smallIos,
     raised,
     raisedMd,
-    raisedIos
+    raisedIos,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
@@ -79,14 +80,6 @@ const Stepper = /*#__PURE__*/forwardRef((props, ref) => {
   const onPlusClick = event => {
     emit(props, 'stepperPlusClick', event, f7Stepper.current);
   };
-  useImperativeHandle(ref, () => ({
-    el: elRef.current,
-    f7Stepper: () => f7Stepper.current,
-    increment,
-    decrement,
-    setValue,
-    getValue
-  }));
   watchProp(value, newValue => {
     if (!f7Stepper.current) return;
     f7Stepper.current.setValue(newValue);
@@ -177,10 +170,19 @@ const Stepper = /*#__PURE__*/forwardRef((props, ref) => {
     'stepper-raised-md': raisedMd
   }, 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, {
+        f7Stepper: () => f7Stepper.current,
+        increment,
+        decrement,
+        setValue,
+        getValue
+      });
+    }
   }, extraAttrs), /*#__PURE__*/React.createElement("div", {
     className: "stepper-button-minus",
     onClick: onMinusClick
@@ -188,6 +190,6 @@ const Stepper = /*#__PURE__*/forwardRef((props, ref) => {
     className: "stepper-button-plus",
     onClick: onPlusClick
   }));
-});
+};
 Stepper.displayName = 'f7-stepper';
 export default Stepper;

package/components/subnavbar.d.ts

@@ -7,7 +7,6 @@ export interface SubnavbarProps {
   id?: string | number;
   className?: string;
   style?: React.CSSProperties;
-  sliding ?: boolean;
   title ?: string;
   inner ?: boolean;
   ref?: React.MutableRefObject<{el: HTMLElement | null}>;

package/components/subnavbar.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 } from '../shared/utils.js';
 import { colorClasses } from '../shared/mixins.js';
+import { setRef } from '../shared/set-ref.js';
 
-
-const Subnavbar = /*#__PURE__*/forwardRef((props, ref) => {
+const Subnavbar = props => {
   const {
     className,
     id,
@@ -12,26 +12,24 @@ const Subnavbar = /*#__PURE__*/forwardRef((props, ref) => {
     children,
     inner = true,
     title,
-    sliding
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
-  const classes = classNames(className, 'subnavbar', {
-    sliding
-  }, colorClasses(props));
+  const classes = classNames(className, 'subnavbar', {}, colorClasses(props));
   return /*#__PURE__*/React.createElement("div", _extends({
     className: classes,
     id: id,
     style: style,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs), inner ? /*#__PURE__*/React.createElement("div", {
     className: "subnavbar-inner"
   }, title && /*#__PURE__*/React.createElement("div", {
     className: "subnavbar-title"
   }, title), children) : children);
-});
+};
 Subnavbar.displayName = 'f7-subnavbar';
 export default Subnavbar;

package/components/swipeout-actions.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 } from '../shared/utils.js';
 import { colorClasses } from '../shared/mixins.js';
+import { setRef } from '../shared/set-ref.js';
 
-
-const SwipeoutActions = /*#__PURE__*/forwardRef((props, ref) => {
+const SwipeoutActions = props => {
   const {
     className,
     id,
@@ -12,13 +12,11 @@ const SwipeoutActions = /*#__PURE__*/forwardRef((props, ref) => {
     children,
     left,
     right,
-    side
+    side,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   let sideComputed = side;
   if (!sideComputed) {
     if (left) sideComputed = 'left';
@@ -29,8 +27,11 @@ const SwipeoutActions = /*#__PURE__*/forwardRef((props, ref) => {
     id: id,
     style: style,
     className: classes,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs), children);
-});
+};
 SwipeoutActions.displayName = 'f7-swipeout-actions';
 export default SwipeoutActions;

package/components/swipeout-button.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 SwipeoutButton = /*#__PURE__*/forwardRef((props, ref) => {
+const SwipeoutButton = props => {
   const {
     className,
     id,
@@ -16,23 +16,24 @@ const SwipeoutButton = /*#__PURE__*/forwardRef((props, ref) => {
     overswipe,
     close,
     delete: deleteProp,
-    href
+    href,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
   const onClick = e => {
     emit(props, 'click', e);
   };
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   const classes = classNames(className, {
     'swipeout-overswipe': overswipe,
     'swipeout-delete': deleteProp,
     'swipeout-close': close
   }, colorClasses(props));
   return /*#__PURE__*/React.createElement("a", _extends({
-    ref: elRef,
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    },
     href: href || '#',
     id: id,
     style: style,
@@ -42,6 +43,6 @@ const SwipeoutButton = /*#__PURE__*/forwardRef((props, ref) => {
   }, extraAttrs, {
     onClick: onClick
   }), children, text);
-});
+};
 SwipeoutButton.displayName = 'f7-swipeout-button';
 export default SwipeoutButton;

package/components/tab.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, getComponentId } from '../shared/utils.js';
 import { colorClasses } from '../shared/mixins.js';
@@ -8,15 +8,16 @@ import { useTab } from '../shared/use-tab.js';
 import { RouterContext } from '../shared/router-context.js';
 import { useAsyncComponent } from '../shared/use-async-component.js';
 import { TabsSwipeableContext } from '../shared/tabs-swipeable-context.js';
+import { setRef } from '../shared/set-ref.js';
 
-
-const Tab = /*#__PURE__*/forwardRef((props, ref) => {
+const Tab = props => {
   const {
     className,
     id,
     style,
     children,
-    tabActive
+    tabActive,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
@@ -47,9 +48,6 @@ const Tab = /*#__PURE__*/forwardRef((props, ref) => {
     }
   }
   const [tabContent, setTabContent] = useState(initialTabContent || null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   if (f7 && !routerData.current) {
     routerData.current = {
       setTabContent
@@ -108,8 +106,11 @@ const Tab = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/React.createElement(Component, _extends({
     id: id,
     style: style,
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs, classAttrs), renderChildren());
-});
+};
 Tab.displayName = 'f7-tab';
 export default Tab;

package/components/tabs.js

@@ -1,12 +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 { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect.js';
 import { classNames, getExtraAttrs } from '../shared/utils.js';
 import { colorClasses } from '../shared/mixins.js';
 import { TabsSwipeableContext } from '../shared/tabs-swipeable-context.js';
+import { setRef } from '../shared/set-ref.js';
 
-
-const Tabs = /*#__PURE__*/forwardRef((props, ref) => {
+const Tabs = props => {
   const {
     className,
     id,
@@ -15,13 +15,11 @@ const Tabs = /*#__PURE__*/forwardRef((props, ref) => {
     animated,
     swipeable,
     routable,
-    swiperParams
+    swiperParams,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
   useIsomorphicLayoutEffect(() => {
     if (!swipeable || !swiperParams) return;
     if (!elRef.current) return;
@@ -38,7 +36,10 @@ const Tabs = /*#__PURE__*/forwardRef((props, ref) => {
       id: id,
       style: style,
       className: classNames('tabs-animated-wrap', classes),
-      ref: elRef
+      ref: el => {
+        elRef.current = el;
+        setRef(ref, el);
+      }
     }, extraAttrs), /*#__PURE__*/React.createElement("div", {
       className: tabsClasses
     }, children));
@@ -48,7 +49,10 @@ const Tabs = /*#__PURE__*/forwardRef((props, ref) => {
       id: id,
       style: style,
       class: classNames(tabsClasses, classes),
-      ref: elRef,
+      ref: el => {
+        elRef.current = el;
+        setRef(ref, el);
+      },
       init: swiperParams ? 'false' : 'true'
     }, extraAttrs), /*#__PURE__*/React.createElement(TabsSwipeableContext.Provider, {
       value: true
@@ -58,8 +62,11 @@ const Tabs = /*#__PURE__*/forwardRef((props, ref) => {
     id: id,
     style: style,
     className: classNames(tabsClasses, classes),
-    ref: elRef
+    ref: el => {
+      elRef.current = el;
+      setRef(ref, el);
+    }
   }, extraAttrs), children);
-});
+};
 Tabs.displayName = 'f7-tabs';
 export default Tabs;

package/components/text-editor.js

@@ -1,13 +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 { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect.js';
 import { classNames, getExtraAttrs, getSlots, 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 TextEditor = /*#__PURE__*/forwardRef((props, ref) => {
+const TextEditor = props => {
   const f7TextEditor = useRef(null);
   const {
     className,
@@ -22,7 +22,8 @@ const TextEditor = /*#__PURE__*/forwardRef((props, ref) => {
     linkUrlText,
     placeholder,
     clearFormattingOnPaste,
-    resizable = false
+    resizable = false,
+    ref
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
@@ -59,10 +60,6 @@ const TextEditor = /*#__PURE__*/forwardRef((props, ref) => {
   const onInsertImage = (editor, url) => {
     emit(props, 'textEditorInsertImage', url);
   };
-  useImperativeHandle(ref, () => ({
-    el: elRef.current,
-    f7TextEditor: () => f7TextEditor.current
-  }));
   watchProp(value, newValue => {
     if (f7TextEditor.current) {
       f7TextEditor.current.setValue(newValue);
@@ -111,14 +108,19 @@ const TextEditor = /*#__PURE__*/forwardRef((props, ref) => {
   const slots = getSlots(props);
   const classes = classNames(className, 'text-editor', resizable && 'text-editor-resizable', 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, {
+        f7TextEditor: () => f7TextEditor.current
+      });
+    }
   }, extraAttrs), slots['root-start'], /*#__PURE__*/React.createElement("div", {
     className: "text-editor-content",
     contentEditable: true
   }, slots.default), slots['root-end'], slots.root);
-});
+};
 TextEditor.displayName = 'f7-text-editor';
 export default TextEditor;