react-input-emoji 4.1.0 → 4.3.0

package/dist/index.es.js

@@ -1,4 +1,5 @@
-import React, { useRef, useCallback, useImperativeHandle, useEffect, forwardRef, memo, useMemo, useState } from 'react';
+import React, { useRef, useCallback, useImperativeHandle, useEffect, forwardRef, useState, useMemo, memo } from 'react';
+import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 
 function styleInject(css, ref) {
@@ -156,6 +157,7 @@ function handlePasteHtmlAtCaret(html) {
   if (window.getSelection) {
     // IE9 and non-IE
     sel = window.getSelection();
+    if (sel === null) return;
 
     if (sel.getRangeAt && sel.rangeCount) {
       range = sel.getRangeAt(0);
@@ -251,7 +253,7 @@ function replaceAllHtmlToString(html) {
 /**
  * @typedef {Object} Props
  * @property {React.Ref<any>} ref
- * @property {React.MutableRefObject<import('../text-input').Ref>} textInputRef
+ * @property {React.MutableRefObject<import('../text-input').Ref | null>} textInputRef
  * @property {(value: string) => void} setValue
  * @property {() => void} emitChange
  */
@@ -281,10 +283,14 @@ function useExpose({
     },
 
     focus: () => {
+      if (textInputRef.current === null) return;
       textInputRef.current.focus();
     },
     blur: () => {
-      sanitize(textInputRef.current.html);
+      if (textInputRef.current !== null) {
+        sanitize(textInputRef.current.html);
+      }
+
       emitChange();
     }
   }));
@@ -294,16 +300,17 @@ function useExpose({
 
 /**
  * useEmit
- * @param {React.MutableRefObject<import('../text-input').Ref>} textInputRef
+ * @param {React.MutableRefObject<import('../text-input').Ref | null>} textInputRef
  * @param {(size: {width: number, height: number}) => void} onResize
  * @param {(text: string) => void} onChange
  */
 
 function useEmit(textInputRef, onResize, onChange) {
+  /** @type {React.MutableRefObject<{width: number; height: number} | null>} */
   const currentSizeRef = useRef(null);
   const onChangeFn = useRef(onChange);
   const checkAndEmitResize = useCallback(() => {
-    if (textInputRef.current) {
+    if (textInputRef.current !== null) {
       const currentSize = currentSizeRef.current;
       const nextSize = textInputRef.current.size;
 
@@ -337,7 +344,7 @@ function useEmit(textInputRef, onResize, onChange) {
  * @property {(event: React.KeyboardEvent) => void} onKeyDown
  * @property {(event: React.KeyboardEvent) => void} onKeyUp
  * @property {() => void} onFocus
- * @property {() => void=} onBlur
+ * @property {() => void} onBlur
  * @property {(sanitizedText: string) => void=} onChange
  * @property {(event: React.KeyboardEvent) => void} onArrowUp
  * @property {(event: React.KeyboardEvent) => void} onArrowDown
@@ -374,40 +381,63 @@ const TextInput = ({
 }, ref) => {
   useImperativeHandle(ref, () => ({
     appendContent: html => {
-      textInputRef.current.focus();
+      if (textInputRef.current) {
+        textInputRef.current.focus();
+      }
+
       handlePasteHtmlAtCaret(html);
-      textInputRef.current.focus();
 
-      if (textInputRef.current.innerHTML.trim() === "") {
+      if (textInputRef.current) {
+        textInputRef.current.focus();
+      }
+
+      if (textInputRef.current && placeholderRef.current && textInputRef.current.innerHTML.trim() === "") {
         placeholderRef.current.style.visibility = "visible";
-      } else {
+      } else if (placeholderRef.current) {
         placeholderRef.current.style.visibility = "hidden";
       }
 
-      onChange(textInputRef.current.innerHTML);
+      if (textInputRef.current && typeof onChange === 'function') {
+        onChange(textInputRef.current.innerHTML);
+      }
     },
 
     set html(value) {
-      textInputRef.current.innerHTML = value;
+      if (textInputRef.current) {
+        textInputRef.current.innerHTML = value;
+      }
 
-      if (value.trim() === "") {
-        placeholderRef.current.style.visibility = "visible";
-      } else {
-        placeholderRef.current.style.visibility = "hidden";
+      if (placeholderRef.current) {
+        if (value.trim() === "") {
+          placeholderRef.current.style.visibility = "visible";
+        } else {
+          placeholderRef.current.style.visibility = "hidden";
+        }
       }
 
-      onChange(textInputRef.current.innerHTML);
+      if (typeof onChange === 'function' && textInputRef.current) {
+        onChange(textInputRef.current.innerHTML);
+      }
     },
 
     get html() {
+      if (!textInputRef.current) return '';
       return textInputRef.current.innerHTML;
     },
 
     get text() {
+      if (!textInputRef.current) return '';
       return textInputRef.current.innerText;
     },
 
     get size() {
+      if (!textInputRef.current) {
+        return {
+          width: 0,
+          height: 0
+        };
+      }
+
       return {
         width: textInputRef.current.offsetWidth,
         height: textInputRef.current.offsetHeight
@@ -415,14 +445,15 @@ const TextInput = ({
     },
 
     focus() {
+      if (!textInputRef.current) return;
       textInputRef.current.focus();
     }
 
   }));
-  /** @type {React.MutableRefObject<HTMLDivElement>} */
+  /** @type {React.MutableRefObject<HTMLDivElement | null>} */
 
   const placeholderRef = useRef(null);
-  /** @type {React.MutableRefObject<HTMLDivElement>} */
+  /** @type {React.MutableRefObject<HTMLDivElement | null>} */
 
   const textInputRef = useRef(null);
   /**
@@ -438,7 +469,7 @@ const TextInput = ({
     } else if (event.key === "ArrowDown") {
       props.onArrowDown(event);
     } else {
-      if (event.key.length === 1) {
+      if (event.key.length === 1 && placeholderRef.current) {
         placeholderRef.current.style.visibility = "hidden";
       }
     }
@@ -458,18 +489,20 @@ const TextInput = ({
 
 
   function handleKeyUp(event) {
-    var _input$innerText;
-
     props.onKeyUp(event);
     const input = textInputRef.current;
 
-    if (((_input$innerText = input.innerText) === null || _input$innerText === void 0 ? void 0 : _input$innerText.trim()) === "") {
-      placeholderRef.current.style.visibility = "visible";
-    } else {
-      placeholderRef.current.style.visibility = "hidden";
+    if (placeholderRef.current) {
+      if (input?.innerText?.trim() === "") {
+        placeholderRef.current.style.visibility = "visible";
+      } else {
+        placeholderRef.current.style.visibility = "hidden";
+      }
     }
 
-    onChange(textInputRef.current.innerHTML);
+    if (typeof onChange === 'function' && textInputRef.current) {
+      onChange(textInputRef.current.innerHTML);
+    }
   }
 
   return /*#__PURE__*/React.createElement("div", {
@@ -497,6 +530,51 @@ const TextInput = ({
 
 const TextInputWithRef = /*#__PURE__*/forwardRef(TextInput);
 
+/* eslint-disable react/prop-types */
+/**
+ * @typedef {object} Props
+ * @property {boolean} showPicker
+ * @property {(event: React.MouseEvent) => void} toggleShowPicker
+ * @property {HTMLDivElement=} buttonElement
+ */
+
+/**
+ * Emoji Picker Button Component
+ * @param {Props} props
+ * @return {JSX.Element}
+ */
+
+function EmojiPickerButton({
+  showPicker,
+  toggleShowPicker,
+  buttonElement
+}) {
+  const buttonRef = useRef(null);
+  const [showCustomButtonContent, setShowCustomButtonContent] = useState(false);
+  useEffect(() => {
+    if ((buttonElement?.childNodes?.length ?? 0) > 2) {
+      buttonRef.current.appendChild(buttonElement?.childNodes[0]);
+      setShowCustomButtonContent(true);
+    }
+  }, [buttonElement?.childNodes]);
+  return /*#__PURE__*/React.createElement("button", {
+    ref: buttonRef,
+    type: "button",
+    className: `react-input-emoji--button${showPicker ? " react-input-emoji--button__show" : ""}`,
+    onClick: toggleShowPicker
+  }, !showCustomButtonContent && /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: "24",
+    height: "24",
+    className: "react-input-emoji--button--icon"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0m0 22C6.486 22 2 17.514 2 12S6.486 2 12 2s10 4.486 10 10-4.486 10-10 10"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M8 7a2 2 0 1 0-.001 3.999A2 2 0 0 0 8 7M16 7a2 2 0 1 0-.001 3.999A2 2 0 0 0 16 7M15.232 15c-.693 1.195-1.87 2-3.349 2-1.477 0-2.655-.805-3.347-2H15m3-2H6a6 6 0 1 0 12 0"
+  })));
+}
+
 var compressed = true;
 var categories$1 = [
 	{
@@ -49301,23 +49379,20 @@ function _defineProperties(target, props) {
 function _createClass(Constructor, protoProps, staticProps) {
   if (protoProps) _defineProperties(Constructor.prototype, protoProps);
   if (staticProps) _defineProperties(Constructor, staticProps);
+  Object.defineProperty(Constructor, "prototype", {
+    writable: false
+  });
   return Constructor;
 }
 
 function _typeof(obj) {
   "@babel/helpers - typeof";
 
-  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-    _typeof = function _typeof(obj) {
-      return typeof obj;
-    };
-  } else {
-    _typeof = function _typeof(obj) {
-      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-    };
-  }
-
-  return _typeof(obj);
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+  }, _typeof(obj);
 }
 
 var mapping = {
@@ -49407,8 +49482,8 @@ var stringFromCodePoint = _String.fromCodePoint || function stringFromCodePoint(
     codePoint > 0x10ffff || // not a valid Unicode code point
     Math.floor(codePoint) != codePoint // not an integer
     ) {
-        throw RangeError('Invalid code point: ' + codePoint);
-      }
+      throw RangeError('Invalid code point: ' + codePoint);
+    }
 
     if (codePoint <= 0xffff) {
       // BMP code point
@@ -50011,7 +50086,7 @@ function _defineProperty(obj, key, value) {
 }
 
 function _extends() {
-  _extends = Object.assign || function (target) {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -50024,7 +50099,6 @@ function _extends() {
 
     return target;
   };
-
   return _extends.apply(this, arguments);
 }
 
@@ -50039,24 +50113,25 @@ function _assertThisInitialized(self) {
 function _possibleConstructorReturn(self, call) {
   if (call && (_typeof(call) === "object" || typeof call === "function")) {
     return call;
+  } else if (call !== void 0) {
+    throw new TypeError("Derived constructors may only return object or undefined");
   }
 
   return _assertThisInitialized(self);
 }
 
 function _getPrototypeOf(o) {
-  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) {
     return o.__proto__ || Object.getPrototypeOf(o);
   };
   return _getPrototypeOf(o);
 }
 
 function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
     o.__proto__ = p;
     return o;
   };
-
   return _setPrototypeOf(o, p);
 }
 
@@ -50072,6 +50147,9 @@ function _inherits(subClass, superClass) {
       configurable: true
     }
   });
+  Object.defineProperty(subClass, "prototype", {
+    writable: false
+  });
   if (superClass) _setPrototypeOf(subClass, superClass);
 }
 
@@ -52349,7 +52427,7 @@ styleInject(css_248z);
  * @property {'light' | 'dark' | 'auto'} theme
  * @property {function(import("../types/types").EmojiMartItem): void} onSelectEmoji
  * @property {boolean} disableRecent
- * @property {object[]} customEmojis
+ * @property {import("emoji-mart").CustomEmoji[]=} customEmojis
  */
 
 /**
@@ -52394,6 +52472,43 @@ EmojiPicker.propTypes = {
 };
 var EmojiPicker$1 = /*#__PURE__*/memo(EmojiPicker);
 
+/**
+ * @typedef {object} Props
+ * @property {boolean} showPicker
+ * @property {'light' | 'dark' | 'auto'} theme
+ * @property {(emoji: import("../types/types").EmojiMartItem) => void} handleSelectEmoji
+ * @property {boolean} disableRecent
+ * @property {import("emoji-mart").CustomEmoji[]=} customEmojis
+ */
+
+/**
+ * Emoji Picker Button Component
+ * @param {Props} props
+ * @return {JSX.Element}
+ */
+
+function EmojiPickerContainer({
+  showPicker,
+  theme,
+  handleSelectEmoji,
+  disableRecent,
+  customEmojis
+}) {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "react-emoji-picker--container"
+  }, showPicker && /*#__PURE__*/React.createElement("div", {
+    className: "react-emoji-picker--wrapper",
+    onClick: evt => evt.stopPropagation()
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "react-emoji-picker"
+  }, /*#__PURE__*/React.createElement(EmojiPicker$1, {
+    theme: theme,
+    onSelectEmoji: handleSelectEmoji,
+    disableRecent: disableRecent,
+    customEmojis: customEmojis
+  }))));
+}
+
 // @ts-check
 /**
  * @typedef {import('../types/types').SanitizeFn} SanitizeFn
@@ -52408,10 +52523,11 @@ var EmojiPicker$1 = /*#__PURE__*/memo(EmojiPicker);
  * @property {'light' | 'dark' | 'auto'} theme
  * @property {boolean} keepOpened
  * @property {boolean} disableRecent
- * @property {object[]=} customEmojis
+ * @property {import("emoji-mart").CustomEmoji[]=} customEmojis
  * @property {(fn: SanitizeFn) => void} addSanitizeFn
  * @property {(fn: PolluteFn) => void} addPolluteFn
  * @property {(html: string) => void} appendContent
+ * @property {HTMLDivElement=} buttonElement
  */
 // eslint-disable-next-line valid-jsdoc
 
@@ -52425,9 +52541,13 @@ const EmojiPickerWrapper = props => {
     customEmojis,
     addSanitizeFn,
     addPolluteFn,
-    appendContent
+    appendContent,
+    buttonElement
   } = props;
   const [showPicker, setShowPicker] = useState(false);
+  /** @type {[HTMLDivElement | undefined, React.Dispatch<React.SetStateAction<HTMLDivElement | undefined>>]} */
+
+  const [customButton, setCustomButton] = useState();
   useEffect(() => {
     addSanitizeFn(replaceAllTextEmojiToString);
   }, [addSanitizeFn]);
@@ -52481,33 +52601,32 @@ const EmojiPickerWrapper = props => {
     }
   }
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "react-emoji-picker--container"
-  }, showPicker && /*#__PURE__*/React.createElement("div", {
-    className: "react-emoji-picker--wrapper",
-    onClick: evt => evt.stopPropagation()
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "react-emoji-picker"
-  }, /*#__PURE__*/React.createElement(EmojiPicker$1, {
+  useEffect(() => {
+    if (buttonElement?.style) {
+      buttonElement.style.position = "relative";
+      setCustomButton(buttonElement);
+    }
+  }, [buttonElement]);
+  return customButton ? /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(EmojiPickerContainer, {
+    showPicker: showPicker,
     theme: theme,
-    onSelectEmoji: handleSelectEmoji,
+    handleSelectEmoji: handleSelectEmoji,
     disableRecent: disableRecent,
     customEmojis: customEmojis
-  })))), /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: `react-input-emoji--button${showPicker ? " react-input-emoji--button__show" : ""}`,
-    onClick: toggleShowPicker
-  }, /*#__PURE__*/React.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 24 24",
-    width: "24",
-    height: "24",
-    className: "react-input-emoji--button--icon"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0m0 22C6.486 22 2 17.514 2 12S6.486 2 12 2s10 4.486 10 10-4.486 10-10 10"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M8 7a2 2 0 1 0-.001 3.999A2 2 0 0 0 8 7M16 7a2 2 0 1 0-.001 3.999A2 2 0 0 0 16 7M15.232 15c-.693 1.195-1.87 2-3.349 2-1.477 0-2.655-.805-3.347-2H15m3-2H6a6 6 0 1 0 12 0"
-  }))));
+  }), /*#__PURE__*/React.createElement(EmojiPickerButton, {
+    showPicker: showPicker,
+    toggleShowPicker: toggleShowPicker,
+    buttonElement: customButton
+  })), customButton) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(EmojiPickerContainer, {
+    showPicker: showPicker,
+    theme: theme,
+    handleSelectEmoji: handleSelectEmoji,
+    disableRecent: disableRecent,
+    customEmojis: customEmojis
+  }), /*#__PURE__*/React.createElement(EmojiPickerButton, {
+    showPicker: showPicker,
+    toggleShowPicker: toggleShowPicker
+  }));
 };
 
 // @ts-check
@@ -52606,7 +52725,7 @@ function getElementWithFocus() {
 
 function getSelectionStart() {
   const node = document.getSelection().anchorNode;
-  return (node === null || node === void 0 ? void 0 : node.nodeType) == 3 ? node : null;
+  return node?.nodeType == 3 ? node : null;
 }
 
 // @ts-check
@@ -52651,11 +52770,9 @@ function useMention(searchMention) {
   /** @type {(event: React.KeyboardEvent) => void} */
 
   const onKeyUp = useCallback(async event => {
-    var _getElementWithFocus;
-
     if (typeof searchMention !== "function") return;
 
-    if (event.key === "Backspace" && (_getElementWithFocus = getElementWithFocus()) !== null && _getElementWithFocus !== void 0 && _getElementWithFocus.element.parentElement.hasAttribute("data-mention-id")) {
+    if (event.key === "Backspace" && getElementWithFocus()?.element.parentElement.hasAttribute("data-mention-id")) {
       const elementWithFocus = getElementWithFocus();
       elementWithFocus.element.parentElement.remove();
     } else if (!["ArrowUp", "ArrowDown", "Esc", "Escape"].includes(event.key)) {
@@ -53006,7 +53123,8 @@ function useEventListeners() {
     arrowUp: createObserver(),
     arrowDown: createObserver(),
     enter: createObserver(),
-    focus: createObserver()
+    focus: createObserver(),
+    blur: createObserver()
   }), []);
   /**
    * @template {keyof TextInputListeners} T, K
@@ -53072,6 +53190,7 @@ function usePollute() {
  * @property {(size: {width: number, height: number}) => void} onResize
  * @property {() => void} onClick
  * @property {() => void} onFocus
+ * @property {() => void=} onBlur
  * @property {number} maxLength
  * @property {boolean} keepOpened
  * @property {(event: KeyboardEvent) => void} onKeyDown
@@ -53085,6 +53204,7 @@ function usePollute() {
  * @property {string} fontFamily
  * @property {object[]=} customEmojis
  * @property {(text: string) => Promise<MetionUser[]>=} searchMention
+ * @property {HTMLDivElement=} buttonElement
  */
 
 /**
@@ -53101,6 +53221,7 @@ function InputEmoji(props, ref) {
     onResize,
     onClick,
     onFocus,
+    onBlur,
     onKeyDown,
     theme,
     cleanOnEnter,
@@ -53113,13 +53234,14 @@ function InputEmoji(props, ref) {
     value,
     customEmojis,
     searchMention,
+    buttonElement,
     // style
     borderRadius,
     borderColor,
     fontSize,
     fontFamily
   } = props;
-  /** @type {React.MutableRefObject<import('./text-input').Ref>} */
+  /** @type {React.MutableRefObject<import('./text-input').Ref | null>} */
 
   const textInputRef = useRef(null);
   const {
@@ -53136,6 +53258,7 @@ function InputEmoji(props, ref) {
     pollute
   } = usePollute();
   const updateHTML = useCallback((nextValue = "") => {
+    if (textInputRef.current === null) return;
     textInputRef.current.html = replaceAllTextEmojis(nextValue);
     sanitizedTextRef.current = nextValue;
   }, [sanitizedTextRef]);
@@ -53164,11 +53287,11 @@ function InputEmoji(props, ref) {
      * @return {boolean}
      */
     function handleKeydown(event) {
-      if (typeof maxLength !== "undefined" && event.key !== "Backspace" && totalCharacters(textInputRef.current) >= maxLength) {
+      if (typeof maxLength !== "undefined" && event.key !== "Backspace" && textInputRef.current !== null && totalCharacters(textInputRef.current) >= maxLength) {
         event.preventDefault();
       }
 
-      if (event.key === "Enter") {
+      if (event.key === "Enter" && textInputRef.current) {
         event.preventDefault();
         const text = sanitize(textInputRef.current.html);
         emitChange(sanitizedTextRef.current);
@@ -53217,6 +53340,19 @@ function InputEmoji(props, ref) {
       unsubscribe();
     };
   }, [addEventListener, onClick, onFocus]);
+  useEffect(() => {
+    /** */
+    function handleBlur() {
+      if (typeof onBlur === "function") {
+        onBlur();
+      }
+    }
+
+    const unsubscribe = addEventListener("blur", handleBlur);
+    return () => {
+      unsubscribe();
+    };
+  }, [addEventListener, onBlur]);
   /**
    *
    * @param {string} html
@@ -53233,11 +53369,13 @@ function InputEmoji(props, ref) {
 
 
   function appendContent(html) {
-    if (typeof maxLength !== "undefined" && totalCharacters(textInputRef.current) >= maxLength) {
+    if (typeof maxLength !== "undefined" && textInputRef.current !== null && totalCharacters(textInputRef.current) >= maxLength) {
       return;
     }
 
-    textInputRef.current.appendContent(html);
+    if (textInputRef.current !== null) {
+      textInputRef.current.appendContent(html);
+    }
   }
   /**
    * Handle copy of current selected text
@@ -53277,6 +53415,7 @@ function InputEmoji(props, ref) {
     ref: textInputRef,
     onCopy: handleCopy,
     onPaste: handlePaste,
+    onBlur: listeners.blur.publish,
     onFocus: listeners.focus.publish,
     onArrowUp: listeners.arrowUp.publish,
     onArrowDown: listeners.arrowDown.publish,
@@ -53300,7 +53439,8 @@ function InputEmoji(props, ref) {
     customEmojis: customEmojis,
     addSanitizeFn: addSanitizeFn,
     addPolluteFn: addPolluteFn,
-    appendContent: appendContent
+    appendContent: appendContent,
+    buttonElement: buttonElement
   }));
 }
 
@@ -53319,5 +53459,5 @@ InputEmojiWithRef.defaultProps = {
   customEmojis: []
 };
 
-export default InputEmojiWithRef;
+export { InputEmojiWithRef as default };
 //# sourceMappingURL=index.es.js.map