@pushwoosh/dumb-components 1.1.8 → 1.1.10

package/RichMessageEditor/EmojiPicker.js

@@ -1,14 +1,35 @@
-import Picker from '@emoji-mart/react';
-import React from 'react';
+import { Picker } from 'emoji-mart';
+import React, { useEffect, useRef } from 'react';
 import { EmojiPickerStyled } from './EmojiPicker.styled';
 async function data() {
   const response = await fetch('https://cdn.jsdelivr.net/npm/@emoji-mart/data');
   return response.json();
 }
+function PickerBase(props) {
+  const ref = useRef(null);
+  const instance = useRef(null);
+  if (instance.current) {
+    instance.current.update(props);
+  }
+  useEffect(() => {
+    var _window;
+    const PickerElement = (_window = window) === null || _window === void 0 ? void 0 : _window.customElements.get('em-emoji-picker');
+    instance.current = new (PickerElement || Picker)({
+      ...props,
+      ref
+    });
+    return () => {
+      instance.current = null;
+    };
+  }, [props]);
+  return React.createElement('div', {
+    ref
+  });
+}
 export const EmojiPicker = ({
   onEmojiSelect
 }) => {
-  return React.createElement(EmojiPickerStyled, null, React.createElement(Picker, {
+  return React.createElement(EmojiPickerStyled, null, React.createElement(PickerBase, {
     data: data,
     onEmojiSelect: emoji => {
       onEmojiSelect(emoji.native);

package/RichMessageEditor/RichMessageEditor.js

@@ -67,9 +67,12 @@ export const RichMessageEditor = ({
     Transforms.move(editor);
     setShowDrop(undefined);
   };
-  const clickAwayHandler = usePersistentFunction(() => {
+  const onClose = () => {
     setShowDrop(undefined);
     setIsFocused(false);
+  };
+  const clickAwayHandler = usePersistentFunction(() => {
+    onClose();
     onBlur === null || onBlur === void 0 || onBlur();
   });
   useEffect(() => {
@@ -138,6 +141,7 @@ export const RichMessageEditor = ({
           insertDynamicContent(editor, newDC);
         }
       },
+      onClose,
       update
     })), showDrop.type === 'emoji' && React.createElement(EmojiPicker, {
       onEmojiSelect: s => editor.insertText(s)

package/RichMessageEditor/RichMessageEditor.types.d.ts

@@ -11,6 +11,7 @@ export type DropValue = DropValueEmoji | DropValuePersonalization;
 export type RenderDynamicContentProps = {
     dc?: DynamicContent;
     onChange: (newDC: DynamicContent) => void;
+    onClose: () => void;
     update: () => void;
 };
 export type RichMessageEditorProps = {

package/RichMessageEditor/index.d.ts

@@ -1,3 +1,4 @@
 export { type RichMessageEditorContent } from './types';
 export { RichMessageEditor } from './RichMessageEditor';
 export { RichMessageViewer } from './RichMessageViewer';
+export { type DynamicContent } from './slate/types';

package/index.d.ts

@@ -36,4 +36,4 @@ export { NumberPicker } from './NumberPicker';
 export { CodeEditor } from './CodeEditor';
 export { EnhancedInput, SearchInput } from './EnhancedInput';
 export { Chip } from './Chip';
-export { RichMessageEditor, RichMessageViewer } from './RichMessageEditor';
+export { RichMessageEditor, RichMessageViewer, type DynamicContent } from './RichMessageEditor';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "1.1.8",
+  "version": "1.1.10",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",