@pushwoosh/dumb-components 1.1.9 → 1.1.11

package/{RichMessageEditor → EmojiPicker}/EmojiPicker.d.ts

@@ -1,6 +1,3 @@
 import { type FC } from 'react';
-type EmojiPickerProps = {
-    onEmojiSelect: (emoji: string) => void;
-};
+import { type EmojiPickerProps } from './types';
 export declare const EmojiPicker: FC<EmojiPickerProps>;
-export {};

package/EmojiPicker/EmojiPicker.js

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

package/EmojiPicker/index.d.ts

@@ -0,0 +1 @@
+export { EmojiPicker } from './EmojiPicker';

package/EmojiPicker/index.js

@@ -0,0 +1 @@
+export { EmojiPicker } from './EmojiPicker';

package/EmojiPicker/types.d.ts

@@ -0,0 +1,7 @@
+export type EmojiPickerProps = {
+    data?: () => Promise<any>;
+    onEmojiSelect: (emoji: {
+        native: string;
+    }) => void;
+    theme?: 'light' | 'dark';
+};

package/EmojiPicker/types.js

@@ -0,0 +1 @@
+export {};

package/RichMessageEditor/EditorEmojiPicker.d.ts

@@ -0,0 +1,6 @@
+import { type FC } from 'react';
+type EditorEmojiPickerProps = {
+    onEmojiSelect: (emoji: string) => void;
+};
+export declare const EditorEmojiPicker: FC<EditorEmojiPickerProps>;
+export {};

package/RichMessageEditor/EditorEmojiPicker.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { EditorEmojiPickerStyled } from './EditorEmojiPicker.styled';
+import { EmojiPicker } from '../EmojiPicker';
+export const EditorEmojiPicker = ({
+  onEmojiSelect
+}) => {
+  return React.createElement(EditorEmojiPickerStyled, null, React.createElement(EmojiPicker, {
+    onEmojiSelect: emoji => {
+      onEmojiSelect(emoji.native);
+    },
+    theme: "light"
+  }));
+};

package/RichMessageEditor/EditorEmojiPicker.styled.d.ts

@@ -0,0 +1 @@
+export declare const EditorEmojiPickerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

package/RichMessageEditor/{EmojiPicker.styled.js → EditorEmojiPicker.styled.js}

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import { Color, Shadow, ShapeRadius } from '@pushwoosh/kit-constants';
-export const EmojiPickerStyled = styled.div.withConfig({
-  displayName: "EmojiPickerStyled",
-  componentId: "sc-1bxjwgk-0"
+export const EditorEmojiPickerStyled = styled.div.withConfig({
+  displayName: "EditorEmojiPickerStyled",
+  componentId: "sc-sdjrip-0"
 })(["min-width:352px;em-emoji-picker{border:1px solid ", ";--border-radius:", ";--shadow:", ";background-color:", ";--rgb-background:", ";}"], Color.FORM, ShapeRadius.CONTROL, Shadow.REGULAR, Color.FROZEN, Color.FROZEN);

package/RichMessageEditor/RichMessageEditor.js

@@ -7,7 +7,7 @@ import { FieldBox } from '../FieldBox';
 import ArrowIcon from './assets/arrow.svg';
 import EmojiIcon from './assets/EmojiIcon.svg';
 import PersonalizationIcon from './assets/PersonalizationIcon.svg';
-import { EmojiPicker } from './EmojiPicker';
+import { EditorEmojiPicker } from './EditorEmojiPicker';
 import { placementToDirection } from './RichMessageEditor.helpers';
 import { Arrow, DropArea, DropContent, ImSpan } from './RichMessageEditor.styled';
 import { getDcByPath } from './slate/helpers';
@@ -143,7 +143,7 @@ export const RichMessageEditor = ({
       },
       onClose,
       update
-    })), showDrop.type === 'emoji' && React.createElement(EmojiPicker, {
+    })), showDrop.type === 'emoji' && React.createElement(EditorEmojiPicker, {
       onEmojiSelect: s => editor.insertText(s)
     }), React.createElement(Arrow, {
       "$direction": placementToDirection(placement),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "1.1.9",
+  "version": "1.1.11",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",
@@ -36,7 +36,6 @@
     "@codemirror/lang-html": "^6.4.9",
     "@codemirror/lang-json": "^6.0.1",
     "@codemirror/lang-liquid": "^6.2.2",
-    "@emoji-mart/react": "^1.1.1",
     "@floating-ui/react-dom": "^2.1.2",
     "@lezer/highlight": "^1.2.1",
     "@pushwoosh/kit-constants": "^1.6.9",
@@ -46,6 +45,7 @@
     "@tippyjs/react": "^4.2.6",
     "@uiw/codemirror-themes": "^4.23.8",
     "@uiw/react-codemirror": "^4.23.8",
+    "emoji-mart": "^5.6.0",
     "liquidjs": "^10.18.0",
     "lodash": "^4.17.21",
     "polished": "^4.3.1",

package/RichMessageEditor/EmojiPicker.js

@@ -1,18 +0,0 @@
-import Picker from '@emoji-mart/react';
-import React 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();
-}
-export const EmojiPicker = ({
-  onEmojiSelect
-}) => {
-  return React.createElement(EmojiPickerStyled, null, React.createElement(Picker, {
-    data: data,
-    onEmojiSelect: emoji => {
-      onEmojiSelect(emoji.native);
-    },
-    theme: "light"
-  }));
-};

package/RichMessageEditor/EmojiPicker.styled.d.ts

@@ -1 +0,0 @@
-export declare const EmojiPickerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;