@pushwoosh/dumb-components 1.1.1 → 1.1.2

package/RichMessageEditor/EmojiPicker.styled.js

@@ -1,5 +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"
-})(["min-width:352px;"]);
+})(["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.helpers.d.ts

@@ -0,0 +1,3 @@
+import { type Placement } from '@floating-ui/react-dom';
+import { type ArrowDirection } from './RichMessageEditor.types';
+export declare function placementToDirection(placement: Placement): ArrowDirection;

package/RichMessageEditor/RichMessageEditor.helpers.js

@@ -0,0 +1,12 @@
+export function placementToDirection(placement) {
+  if (placement.startsWith('left')) {
+    return 'right';
+  }
+  if (placement.startsWith('right')) {
+    return 'left';
+  }
+  if (placement.startsWith('top')) {
+    return 'bottom';
+  }
+  return 'top';
+}

package/RichMessageEditor/RichMessageEditor.js

@@ -1,13 +1,15 @@
-import { autoPlacement, offset, useFloating } from '@floating-ui/react-dom';
+import { arrow, autoPlacement, offset, useFloating } from '@floating-ui/react-dom';
 import { isEqual } from 'es-toolkit';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Transforms } from 'slate';
 import { Collapse, elementAddListener, Horizontal, usePersistentFunction } from '@pushwoosh/kit-helpers';
 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 { DropArea, ImSpan } from './RichMessageEditor.styled';
+import { placementToDirection } from './RichMessageEditor.helpers';
+import { Arrow, DropArea, DropContent, ImSpan } from './RichMessageEditor.styled';
 import { getDcByPath } from './slate/helpers';
 import { SlateEditable, SlateEditor } from './slate/SlateEditor';
 export const RichMessageEditor = ({
@@ -23,14 +25,19 @@ export const RichMessageEditor = ({
 }) => {
   const [showDrop, setShowDrop] = useState();
   const [isFocused, setIsFocused] = useState(false);
+  const arrowRef = useRef(null);
   const {
     refs,
     floatingStyles,
-    update
+    update,
+    middlewareData,
+    placement
   } = useFloating({
     strategy: 'fixed',
     middleware: [offset(8), autoPlacement({
       allowedPlacements: ['right', 'right-start', 'right-end', 'left', 'left-start', 'left-end']
+    }), arrow({
+      element: arrowRef
     })]
   });
   const onSelectionChange = selection => {
@@ -82,7 +89,7 @@ export const RichMessageEditor = ({
   }, ({
     editor
   }) => {
-    var _getDcByPath;
+    var _getDcByPath, _middlewareData$arrow, _middlewareData$arrow2;
     return React.createElement(FieldBox, {
       title: title,
       boxRef: refs.setReference,
@@ -118,7 +125,7 @@ export const RichMessageEditor = ({
       style: floatingStyles,
       ref: refs.setFloating,
       key: showDrop.type
-    }, showDrop.type === 'personalization' && (renderDynamicContent === null || renderDynamicContent === void 0 ? void 0 : renderDynamicContent({
+    }, showDrop.type === 'personalization' && React.createElement(DropContent, null, 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 => {
         if (showDrop.path) {
@@ -134,6 +141,13 @@ export const RichMessageEditor = ({
       update
     })), showDrop.type === 'emoji' && React.createElement(EmojiPicker, {
       onEmojiSelect: s => editor.insertText(s)
-    })));
+    }), React.createElement(Arrow, {
+      "$direction": placementToDirection(placement),
+      ref: arrowRef,
+      style: {
+        left: (_middlewareData$arrow = middlewareData.arrow) === null || _middlewareData$arrow === void 0 ? void 0 : _middlewareData$arrow.x,
+        top: (_middlewareData$arrow2 = middlewareData.arrow) === null || _middlewareData$arrow2 === void 0 ? void 0 : _middlewareData$arrow2.y
+      }
+    }, React.createElement(ArrowIcon, null))));
   });
 };

package/RichMessageEditor/RichMessageEditor.styled.d.ts

@@ -1,2 +1,64 @@
+import { type ArrowDirection } from './RichMessageEditor.types';
 export declare const ImSpan: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const DropArea: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DropContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Arrow: import("styled-components").StyledComponent<"div", any, {
+    $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
+    $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
+    $bgColor?: string | undefined;
+    $border?: string | ({
+        top?: string | undefined;
+        right?: string | undefined;
+        bottom?: string | undefined;
+        left?: string | undefined;
+    } | {
+        horizontal: string;
+        top?: string | undefined;
+        bottom?: string | undefined;
+    } | {
+        vertical: string;
+        right?: string | undefined;
+        left?: string | undefined;
+    }) | undefined;
+    $borderRadius?: (string | number) | undefined;
+    $boxShadow?: string | undefined;
+    $gap?: (string | number) | undefined;
+    $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
+    $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
+    $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
+    $margin?: (string | number) | ({
+        top?: (string | number) | undefined;
+        right?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    } | {
+        horizontal: string | number;
+        top?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+    } | {
+        vertical: string | number;
+        right?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    }) | undefined;
+    $padding?: (string | number) | ({
+        top?: (string | number) | undefined;
+        right?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    } | {
+        horizontal: string | number;
+        top?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+    } | {
+        vertical: string | number;
+        right?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    }) | undefined;
+    $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
+} & {
+    $gridAutoFlow: string;
+} & {
+    $placeItems: string;
+} & {
+    $direction: ArrowDirection;
+}, "$gridAutoFlow" | "$placeItems">;

package/RichMessageEditor/RichMessageEditor.styled.js

@@ -1,5 +1,6 @@
 import styled from 'styled-components';
-import { Color } from '@pushwoosh/kit-constants';
+import { Color, Shadow, ShapeRadius } from '@pushwoosh/kit-constants';
+import { Horizontal } from '@pushwoosh/kit-helpers';
 export const ImSpan = styled.span.withConfig({
   displayName: "ImSpan",
   componentId: "sc-kdvgj9-0"
@@ -7,4 +8,24 @@ export const ImSpan = styled.span.withConfig({
 export const DropArea = styled.div.withConfig({
   displayName: "DropArea",
   componentId: "sc-kdvgj9-1"
-})(["z-index:1000;"]);
+})(["z-index:1000;"]);
+export const DropContent = styled.div.withConfig({
+  displayName: "DropContent",
+  componentId: "sc-kdvgj9-2"
+})(["border:1px solid ", ";border-radius:", ";box-shadow:", ";background-color:", ";"], Color.FORM, ShapeRadius.CONTROL, Shadow.REGULAR, Color.FROZEN);
+const transforms = {
+  left: 'scaleX(-1)',
+  right: 'scaleX(1)',
+  top: 'rotate(-90deg)',
+  bottom: 'rotate(90deg)'
+};
+export const Arrow = styled(Horizontal).attrs({
+  $placeItems: 'center'
+}).withConfig({
+  displayName: "Arrow",
+  componentId: "sc-kdvgj9-3"
+})(["position:absolute;width:20px;height:20px;transform:", " translateX(11px);", ":0;"], ({
+  $direction
+}) => transforms[$direction], ({
+  $direction
+}) => $direction);

package/RichMessageEditor/RichMessageEditor.types.d.ts

@@ -24,3 +24,4 @@ export type RichMessageEditorProps = {
     onBlur?: () => void;
     renderDynamicContent?: (props: RenderDynamicContentProps) => ReactNode;
 };
+export type ArrowDirection = 'top' | 'bottom' | 'left' | 'right';

package/RichMessageEditor/assets/arrow.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="10" height="20" fill="none"><mask id="a" fill="#fff"><path fill-rule="evenodd" d="M0 2a2 2 0 0 1 4 0v1.26a2 2 0 0 0 .598 1.426L8.55 8.574a2 2 0 0 1 0 2.852l-3.953 3.888A2 2 0 0 0 4 16.74V18a2 2 0 1 1-4 0z" clip-rule="evenodd"/></mask><path fill="#F7F9FA" fill-rule="evenodd" d="M0 2a2 2 0 0 1 4 0v1.26a2 2 0 0 0 .598 1.426L8.55 8.574a2 2 0 0 1 0 2.852l-3.953 3.888A2 2 0 0 0 4 16.74V18a2 2 0 1 1-4 0z" clip-rule="evenodd"/><path fill="#DCE1E5" d="m4.598 15.314.7.713zM3 3.26V2h2v1.26zm4.85 6.027L3.896 5.4 5.3 3.973 9.252 7.86zm-3.954 5.314 3.954-3.888 1.402 1.426L5.3 16.027zM3 18v-1.26h2V18zM1 2v16h-2V2zm1 19a3 3 0 0 1-3-3h2a1 1 0 0 0 1 1zm3-3a3 3 0 0 1-3 3v-2a1 1 0 0 0 1-1zm.299-1.973A1 1 0 0 0 5 16.74H3a3 3 0 0 1 .896-2.138L5.3 16.026zm3.953-8.166a3 3 0 0 1 0 4.278L7.85 10.713a1 1 0 0 0 0-1.426zM5 3.26a1 1 0 0 0 .299.713L3.896 5.399A3 3 0 0 1 3 3.259zM2 1a1 1 0 0 0-1 1h-2a3 3 0 0 1 3-3zm0-2a3 3 0 0 1 3 3H3a1 1 0 0 0-1-1z" mask="url(#a)"/><path stroke="#F7F9FA" stroke-width="3" d="M1.5 0v20"/></svg>

package/package.json

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