@pushwoosh/dumb-components 1.0.61 → 1.0.63

package/RichMessageEditor/EmojiPicker.js

@@ -1,5 +1,6 @@
 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();
@@ -7,11 +8,11 @@ async function data() {
 export const EmojiPicker = ({
   onEmojiSelect
 }) => {
-  return React.createElement(Picker, {
+  return React.createElement(EmojiPickerStyled, null, React.createElement(Picker, {
     data: data,
     onEmojiSelect: emoji => {
       onEmojiSelect(emoji.native);
     },
     theme: "light"
-  });
+  }));
 };

package/RichMessageEditor/EmojiPicker.styled.d.ts

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

package/RichMessageEditor/EmojiPicker.styled.js

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+export const EmojiPickerStyled = styled.div.withConfig({
+  displayName: "EmojiPickerStyled",
+  componentId: "sc-1bxjwgk-0"
+})(["min-width:352px;"]);

package/RichMessageEditor/RichMessageEditor.js

@@ -1,11 +1,11 @@
+import { autoPlacement, offset, useFloating } from '@floating-ui/react-dom';
 import { isEqual } from 'es-toolkit';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Transforms } from 'slate';
 import { Collapse, elementAddListener, Horizontal, usePersistentFunction } from '@pushwoosh/kit-helpers';
 import { FieldBox } from '../FieldBox';
 import EmojiIcon from './assets/EmojiIcon.svg';
 import PersonalizationIcon from './assets/PersonalizationIcon.svg';
-import { DropContent } from './DropContent';
 import { EmojiPicker } from './EmojiPicker';
 import { ImSpan } from './RichMessageEditor.styled';
 import { getDcByPath } from './slate/helpers';
@@ -21,24 +21,24 @@ export const RichMessageEditor = ({
   onBlur,
   renderDynamicContent
 }) => {
-  const rootRef = useRef(null);
   const [showDrop, setShowDrop] = useState();
   const [isFocused, setIsFocused] = useState(false);
-  const showDropArea = val => {
-    const rect = rootRef.current.getBoundingClientRect();
-    setShowDrop({
-      ...val,
-      xValue: rect.right + 8,
-      yValue: rect.top
-    });
-  };
+  const {
+    refs,
+    floatingStyles,
+    update
+  } = useFloating({
+    middleware: [offset(8), autoPlacement({
+      allowedPlacements: ['left', 'left-start', 'left-end', 'right', 'right-start', 'right-end']
+    })]
+  });
   const onSelectionChange = selection => {
     if (isEqual(selection.anchor, selection.focus)) {
       const {
         path
       } = selection.anchor;
       if (path.length > 2) {
-        showDropArea({
+        setShowDrop({
           type: 'personalization',
           path: path.slice(0, -1)
         });
@@ -69,11 +69,11 @@ export const RichMessageEditor = ({
       return;
     }
     return elementAddListener(document, ['mousedown', 'touchstart', 'focusin'], event => {
-      if (rootRef.current && !rootRef.current.contains(event.target)) {
+      if (refs.reference.current instanceof HTMLElement && !refs.reference.current.contains(event.target)) {
         clickAwayHandler();
       }
     });
-  }, [clickAwayHandler, isFocused]);
+  }, [clickAwayHandler, isFocused, refs.reference]);
   return React.createElement(SlateEditor, {
     initialValue: initialValue,
     onChange: onChange,
@@ -84,18 +84,18 @@ export const RichMessageEditor = ({
     var _getDcByPath;
     return React.createElement(FieldBox, {
       title: title,
-      boxRef: rootRef,
+      boxRef: refs.setReference,
       error: error,
       actions: React.createElement(Collapse, {
         expanded: isFocused
       }, React.createElement(Horizontal, {
         "$gap": 8
       }, canUsePersonalization && React.createElement(ImSpan, {
-        onClick: () => showDropArea({
+        onClick: () => setShowDrop({
           type: 'personalization'
         })
       }, React.createElement(PersonalizationIcon, null), "Personalization"), canUseEmoji && React.createElement(ImSpan, {
-        onClick: () => showDropArea({
+        onClick: () => setShowDrop({
           type: 'emoji'
         })
       }, React.createElement(EmojiIcon, null), "Emoji")))
@@ -110,9 +110,10 @@ export const RichMessageEditor = ({
           onSelectionChange(selection);
         }
       }
-    }), showDrop && React.createElement(DropContent, {
-      top: showDrop.yValue,
-      left: showDrop.xValue
+    }), showDrop && React.createElement("div", {
+      style: floatingStyles,
+      ref: refs.setFloating,
+      key: showDrop.type
     }, showDrop.type === 'personalization' && (renderDynamicContent === null || renderDynamicContent === void 0 ? void 0 : renderDynamicContent({
       dc: showDrop.path ? (_getDcByPath = getDcByPath(editor.children, showDrop.path)) === null || _getDcByPath === void 0 ? void 0 : _getDcByPath.dc : undefined,
       onChange: newDC => {
@@ -125,7 +126,8 @@ export const RichMessageEditor = ({
         } else {
           insertDynamicContent(editor, newDC);
         }
-      }
+      },
+      update
     })), showDrop.type === 'emoji' && React.createElement(EmojiPicker, {
       onEmojiSelect: s => editor.insertText(s)
     })));

package/RichMessageEditor/RichMessageEditor.styled.d.ts

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

package/RichMessageEditor/RichMessageEditor.styled.js

@@ -3,8 +3,4 @@ import { Color } from '@pushwoosh/kit-constants';
 export const ImSpan = styled.span.withConfig({
   displayName: "ImSpan",
   componentId: "sc-kdvgj9-0"
-})(["color:", ";position:relative;padding-left:20px;font-size:12px;font-style:normal;font-weight:500;line-height:130%;text-transform:uppercase;cursor:pointer;> svg{position:absolute;left:0;top:-1px;}"], Color.SOFT);
-export const DropContentStyled = styled.div.withConfig({
-  displayName: "DropContentStyled",
-  componentId: "sc-kdvgj9-1"
-})(["position:fixed;z-index:10;"]);
+})(["color:", ";position:relative;padding-left:20px;font-size:12px;font-style:normal;font-weight:500;line-height:130%;text-transform:uppercase;cursor:pointer;> svg{position:absolute;left:0;top:-1px;}"], Color.SOFT);

package/RichMessageEditor/RichMessageEditor.types.d.ts

@@ -1,9 +1,5 @@
 import type { ReactNode } from 'react';
 import type { DynamicContent } from './slate/types';
-type DropValueCommon = {
-    xValue: number;
-    yValue: number;
-};
 export type DropValuePersonalization = {
     type: 'personalization';
     path?: number[];
@@ -11,7 +7,12 @@ export type DropValuePersonalization = {
 export type DropValueEmoji = {
     type: 'emoji';
 };
-export type DropValue = DropValueCommon & DropValueEmoji | DropValueCommon & DropValuePersonalization;
+export type DropValue = DropValueEmoji | DropValuePersonalization;
+export type RenderDynamicContentProps = {
+    dc?: DynamicContent;
+    onChange: (newDC: DynamicContent) => void;
+    update: () => void;
+};
 export type RichMessageEditorProps = {
     title: ReactNode;
     initialValue: string;
@@ -21,9 +22,5 @@ export type RichMessageEditorProps = {
     canUsePersonalization?: boolean;
     canUseEmoji?: boolean;
     onBlur?: () => void;
-    renderDynamicContent?: (props: {
-        dc?: DynamicContent;
-        onChange: (newDC: DynamicContent) => void;
-    }) => ReactNode;
+    renderDynamicContent?: (props: RenderDynamicContentProps) => ReactNode;
 };
-export {};

package/RichMessageEditor/slate/DynamicContentElement.js

@@ -23,6 +23,9 @@ const DynamicContentElementComponent = ({
       event.preventDefault();
       event.stopPropagation();
       const [paragraphIndex, elementIndex] = findPath(editor.children, element);
+      Transforms.delete(editor, {
+        at: [paragraphIndex, elementIndex]
+      });
       if (selected) {
         var _editor$children$para;
         const prevOffset = ((_editor$children$para = editor.children[paragraphIndex].children[elementIndex - 1]) === null || _editor$children$para === void 0 ? void 0 : _editor$children$para.text.length) || 0;
@@ -35,9 +38,6 @@ const DynamicContentElementComponent = ({
           focus: point
         });
       }
-      Transforms.delete(editor, {
-        at: [paragraphIndex, elementIndex]
-      });
     }
   }, React.createElement("span", null, tagName || 'Not set'), children);
 };

package/package.json

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

package/RichMessageEditor/DropContent.d.ts

@@ -1,5 +0,0 @@
-import { type FC, type PropsWithChildren } from 'react';
-export declare const DropContent: FC<PropsWithChildren<{
-    top: number;
-    left: number;
-}>>;

package/RichMessageEditor/DropContent.js

@@ -1,14 +0,0 @@
-import React from 'react';
-import { DropContentStyled } from './RichMessageEditor.styled';
-export const DropContent = ({
-  top,
-  left,
-  children
-}) => {
-  return React.createElement(DropContentStyled, {
-    style: {
-      top,
-      left
-    }
-  }, children);
-};