@flozy/editor 4.0.2 → 4.0.4

package/dist/Editor/Toolbar/toolbarGroups.js

@@ -28,20 +28,16 @@ export const toolbarGroups = [[{
   type: "dropdown",
   options: [{
     text: "Normal",
-    value: "normal",
-    numVal: "400"
+    value: "normal"
   }, {
     text: "Bold",
-    value: "bold",
-    numVal: "700"
+    value: "bold"
   }, {
     text: "Bolder",
-    value: "bolder",
-    numVal: "700"
+    value: "bolder"
   }, {
     text: "Lighter",
-    value: "lighter",
-    numVal: "100"
+    value: "lighter"
   }],
   icon: FormatBoldIcon,
   width: "100px"
@@ -50,8 +46,7 @@ export const toolbarGroups = [[{
   format: "bold",
   type: "mark",
   title: "Bold",
-  basic: true,
-  themeEnabled: true
+  basic: true
 }, {
   id: 5,
   format: "underline",
@@ -62,8 +57,7 @@ export const toolbarGroups = [[{
   format: "italic",
   type: "mark",
   title: "Italic",
-  basic: true,
-  themeEnabled: true
+  basic: true
 }, {
   id: 6,
   format: "strikethrough",
@@ -107,42 +101,6 @@ export const toolbarGroups = [[{
   type: "block",
   title: "H3",
   group: "typography"
-}, {
-  id: 39,
-  format: "headingFour",
-  type: "block",
-  title: "H4",
-  group: "typography"
-}, {
-  id: 40,
-  format: "headingFive",
-  type: "block",
-  title: "H5",
-  group: "typography"
-}, {
-  id: 41,
-  format: "headingSix",
-  type: "block",
-  title: "H6",
-  group: "typography"
-}, {
-  id: 42,
-  format: "paragraphOne",
-  type: "block",
-  title: "Paragraph 1",
-  group: "typography"
-}, {
-  id: 43,
-  format: "paragraphTwo",
-  type: "block",
-  title: "Paragraph 2",
-  group: "typography"
-}, {
-  id: 44,
-  format: "paragraphThree",
-  type: "block",
-  title: "Paragraph 3",
-  group: "typography"
 }, {
   id: 14,
   format: "doublequote",
@@ -182,6 +140,11 @@ export const toolbarGroups = [[{
   format: "alignRight",
   type: "block",
   title: "Right Align"
+}, {
+  id: 39,
+  format: "alignJustify",
+  type: "block",
+  title: "Justify"
 }], [{
   id: 20,
   format: "link",
@@ -238,6 +201,11 @@ export const toolbarGroups = [[{
   format: "grid",
   type: "grid",
   group: "elements"
+}, {
+  id: 50,
+  format: "freegrid",
+  type: "freegrid",
+  group: "elements"
 }, {
   id: 41,
   format: "emoji",

package/dist/Editor/common/ColorPickerButton.js

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { Grid, Button, Popover } from "@mui/material";
+import ColorPickerTool from "react-gcolor-picker";
 import { colors } from "../Elements/Color Picker/defaultColors";
-import CustomColorPicker from "./CustomColorPicker";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -9,12 +9,9 @@ const ColorPickerButton = props => {
   const {
     value,
     onSave,
+    defaultColors = [],
     classes = {},
-    recentColors = [],
-    children,
-    handleClose: closeDrawer,
-    hideThemeColors,
-    disableEditTheme
+    recentColors = []
   } = props;
   const [anchorEl, setAnchorEl] = useState(null);
   const [color, setColor] = useState(value);
@@ -33,13 +30,7 @@ const ColorPickerButton = props => {
     setColor(color);
   };
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [children ? /*#__PURE__*/_jsx("div", {
-      onClick: handleColorPicker,
-      style: {
-        cursor: "pointer"
-      },
-      children: children
-    }) : /*#__PURE__*/_jsx(Button, {
+    children: [/*#__PURE__*/_jsx(Button, {
       style: {
         background: value,
         height: "22px",
@@ -69,24 +60,17 @@ const ColorPickerButton = props => {
           item: true,
           xs: 12,
           children: [/*#__PURE__*/_jsx("div", {
-            children: /*#__PURE__*/_jsx(CustomColorPicker, {
+            children: /*#__PURE__*/_jsx(ColorPickerTool, {
               gradient: true,
-              color: color,
+              value: color,
               onChange: handleColorChange,
-              recentColors: recentColors,
-              closeDrawer: closeDrawer,
-              hideThemeColors: hideThemeColors,
-              disableEditTheme: disableEditTheme
+              defaultColors: [...recentColors, ...defaultColors] || []
             })
           }), /*#__PURE__*/_jsxs("div", {
             style: {
               display: "flex",
-              justifyContent: "flex-end",
-              padding: "8px",
-              background: "white",
-              position: "sticky",
-              bottom: 0,
-              boxShadow: "0 -1px 5px rgba(0,0,0,0.1)"
+              justifyContent: "end",
+              margin: "8px"
             },
             children: [/*#__PURE__*/_jsx(Button, {
               onClick: handleClose,

package/dist/Editor/common/DnD/DragHandleButton.js

@@ -7,7 +7,7 @@ import { useEditorContext } from "../../hooks/useMouseMove";
 import { Transforms } from "slate";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const DRAGGABLE_TYPES = ["paragraph", "headingOne", "headingTwo", "headingThree", "headingFour", "headingFive", "headingSix", "paragraphOne", "paragraphTwo", "paragraphThree", "grid"];
+const DRAGGABLE_TYPES = ["paragraph", "headingOne", "headingTwo", "headingThree", "grid"];
 const DragHandleStyle = fromPopper => {
   const handleDragStyle = fromPopper ? {
     position: "absolute",

package/dist/Editor/common/EditorCmds.js

@@ -7,9 +7,6 @@ const selectAll = (event, {
     if (needLayout) {
       event.preventDefault();
       // Select the entire document
-      const {
-        selection
-      } = editor;
       const [firstNode] = Editor.nodes(editor, {
         at: [0]
       }); // First node

package/dist/Editor/common/Icon.js

@@ -1,17 +1,17 @@
 import React from "react";
-import { MdFormatQuote, MdFormatAlignLeft, MdFormatAlignCenter, MdFormatAlignRight, MdFormatListNumbered, MdFormatListBulleted, MdAdd, MdArrowForward, MdEmojiEmotions, MdOutlinePermMedia } from "react-icons/md";
-import { BsTypeH1, BsTypeH2, BsTypeH3, BsCameraVideoFill, BsArrowBarRight, BsArrowBarLeft, BsFillMenuButtonWideFill, BsCodeSlash } from "react-icons/bs";
+import { MdFormatQuote, MdFormatAlignLeft, MdFormatAlignCenter, MdFormatAlignRight, MdAdd, MdArrowForward, MdOutlinePermMedia, MdFormatAlignJustify } from "react-icons/md";
+import { BsTypeH1, BsTypeH2, BsTypeH3, BsCameraVideoFill, BsArrowBarRight, BsArrowBarLeft, BsCodeSlash } from "react-icons/bs";
 import { FaSuperscript, FaSubscript } from "react-icons/fa";
 import { FcAddRow, FcAddColumn } from "react-icons/fc";
 import { AiFillEdit, AiOutlineInsertRowBelow, AiOutlineInsertRowRight, AiOutlineDelete, AiFillTag, AiOutlineUpload, AiOutlineArrowsAlt, AiOutlineInsertRowAbove, AiOutlineInsertRowLeft, AiFillHtml5 } from "react-icons/ai";
 import { SiLatex } from "react-icons/si";
 import { RiDeleteColumn, RiDeleteRow } from "react-icons/ri";
-import { IoIosImage } from "react-icons/io";
-import { GridIcon, AccordionIcon, SignatureIcon, ButtonIcon, Carousal, FormIcon, BoldIcon, FontFamilyIcon, FontSizeIcon, ImageIcon, ItalicIcon, LinkIcon, StrikethroughIcon, TableIcon, UnderLineIcon, VideoIcon, CheckboxIcon, AppHeader, MoreHorizontal, UploadImage, DocsUpload, LeftArrow, RightArrow, CheckListButton, CheckListButtonActive, ExcelIcon, CsvIcon, DividerIcon, CloseIcon, SearchIcon, ExpandIcon, CalendarIconNew, Text, TextAreaIcon, Phone, BriefCase, Bank, CalendarTick, DollarSquare, Checkbox, Description, RadioButtonIcon, CheckedIcon, UncheckedIcon, InfinityIcon, ResetIcon } from "./iconslist";
+import { CiGrid32 } from "react-icons/ci";
+import { FontFamilyIcon, FontSizeIcon, StrikethroughIcon, AppHeader, MoreHorizontal, UploadImage, LeftArrow, RightArrow, CheckListButton, CheckListButtonActive, ExcelIcon, CsvIcon, CloseIcon, SearchIcon, ExpandIcon, CalendarIconNew, Text, TextAreaIcon, Phone, BriefCase, Bank, CalendarTick, DollarSquare, Checkbox, Description, RadioButtonIcon, CheckedIcon, UncheckedIcon, InfinityIcon, ResetIcon } from "./iconslist";
 import ArrowRightIcon from "@mui/icons-material/ArrowRight";
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
-import EmailRoundedIcon from '@mui/icons-material/EmailRounded';
-import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+import EmailRoundedIcon from "@mui/icons-material/EmailRounded";
+import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
 import { AccordionTextFormatIcon, BoldTextFormatIcon, BulletedListTextFormatIcon, ButtonElementIcon, CarouselElementIcon, CheckListTextFormatIcon, ColorBoxElementIcon, DividerElementIcon, DocUploadElementIcon, EmbedElementIcon, EmojiElementIcon, FormElementIcon, GridElementIcon, ImageElementIcon, ItalicTextFormatIcon, LinkIconV2, OrderedListTextFormatIcon, SignatureElementIcon, TableElementIcon, TopBannerElementIcon, UnderlineTextFormatIcon, VideoElementIcon } from "./iconListV2";
 import SettingsIcon from "../assets/svg/SettingsIcon";
 import UndoIcon from "../assets/svg/UndoIcon";
@@ -21,16 +21,6 @@ import AddElementIcon from "../assets/svg/AddElementIcon";
 import AddTemplateIcon from "../assets/svg/AddTemplateIcon";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const HeadingIcon = ({
-  variant
-}) => {
-  return /*#__PURE__*/_jsx("div", {
-    style: {
-      color: "#64748B"
-    },
-    children: variant
-  });
-};
 const iconList = {
   fontFamily: /*#__PURE__*/_jsx(FontFamilyIcon, {
     size: 20
@@ -66,24 +56,6 @@ const iconList = {
     size: 18,
     fill: "#64748B"
   }),
-  headingFour: /*#__PURE__*/_jsx(HeadingIcon, {
-    variant: "H4"
-  }),
-  headingFive: /*#__PURE__*/_jsx(HeadingIcon, {
-    variant: "H5"
-  }),
-  headingSix: /*#__PURE__*/_jsx(HeadingIcon, {
-    variant: "H6"
-  }),
-  paragraphOne: /*#__PURE__*/_jsx(HeadingIcon, {
-    variant: "P1"
-  }),
-  paragraphTwo: /*#__PURE__*/_jsx(HeadingIcon, {
-    variant: "P2"
-  }),
-  paragraphThree: /*#__PURE__*/_jsx(HeadingIcon, {
-    variant: "P3"
-  }),
   blockquote: /*#__PURE__*/_jsx(MdFormatQuote, {
     size: 20,
     fill: "#64748B"
@@ -112,6 +84,10 @@ const iconList = {
     size: 18,
     fill: "#64748B"
   }),
+  alignJustify: /*#__PURE__*/_jsx(MdFormatAlignJustify, {
+    size: 18,
+    fill: "#64748B"
+  }),
   orderedList: /*#__PURE__*/_jsx(OrderedListTextFormatIcon, {
     size: 18,
     fill: "#64748B"
@@ -248,6 +224,12 @@ const iconList = {
     }
   }),
   calenderNewIcon: /*#__PURE__*/_jsx(CalendarIconNew, {}),
+  freegrid: /*#__PURE__*/_jsx(CiGrid32, {
+    size: 20,
+    style: {
+      fill: "#64748B"
+    }
+  }),
   text: /*#__PURE__*/_jsx(Text, {}),
   textArea: /*#__PURE__*/_jsx(TextAreaIcon, {}),
   phone: /*#__PURE__*/_jsx(Phone, {}),

package/dist/Editor/common/LinkSettings/NavComponents.js

@@ -134,13 +134,10 @@ export const SelectPage = props => {
   });
 };
 export const Trigger = props => {
-  const {
-    nav
-  } = props;
-  return /*#__PURE__*/_jsxs(Typography, {
+  return /*#__PURE__*/_jsx(Typography, {
     variant: "subtitle1",
     gutterBottom: true,
-    children: ["Choosing this will trigger the ", nav.type, " step"]
+    children: "Choosing this will trigger the next step"
   });
 };
 const scrollToOptions = [{

package/dist/Editor/common/LinkSettings/index.js

@@ -18,8 +18,7 @@ const MAP_COMPONENT = {
   webAddress: TextInput,
   email: TextInput,
   phone: TextInput,
-  nextTrigger: Trigger,
-  prevTrigger: Trigger,
+  actionTrigger: Trigger,
   scrollTopOrBottom: ScrollTopBottom,
   page: SelectPage
 };

package/dist/Editor/common/LinkSettings/navOptions.js

@@ -3,13 +3,8 @@ export const getNavOptions = (hideTools = []) => {
     label: "None",
     value: ""
   }, {
-    label: "Next Trigger",
-    value: "nextTrigger",
-    type: "next"
-  }, {
-    label: "Previous Trigger",
-    value: "prevTrigger",
-    type: "previous"
+    label: "Trigger",
+    value: "actionTrigger"
   }, {
     label: "Web Address",
     value: "webAddress",

package/dist/Editor/common/MentionsPopup/index.js

@@ -35,14 +35,18 @@ const MentionsPopup = /*#__PURE__*/forwardRef((props, ref) => {
     setOpenAI
   } = useEditorContext();
   useEffect(() => {
-    if (target && chars.length > 0) {
-      const domRange = ReactEditor.toDOMRange(editor, target);
-      const rect = domRange.getBoundingClientRect();
-      setAnchorEl({
-        clientWidth: rect.width,
-        clientHeight: rect.height,
-        getBoundingClientRect: () => rect
-      });
+    try {
+      if (target && chars.length > 0) {
+        const domRange = ReactEditor.toDOMRange(editor, target);
+        const rect = domRange?.getBoundingClientRect();
+        setAnchorEl({
+          clientWidth: rect.width,
+          clientHeight: rect.height,
+          getBoundingClientRect: () => rect
+        });
+      }
+    } catch (err) {
+      console.log(err);
     }
   }, [chars.length, editor, index, target]);
   useEffect(() => {

package/dist/Editor/common/RnD/ContextMenu/CMenus.js

@@ -0,0 +1,142 @@
+import CMDIcon from "@mui/icons-material/KeyboardCommandKey";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const CMenus = {
+  child: [{
+    name: "bringForward",
+    label: "Move to Front",
+    autoClose: false,
+    render: () => {
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: ["Move to Front", " ", /*#__PURE__*/_jsxs("span", {
+          className: "shortcut-help-info",
+          children: [/*#__PURE__*/_jsx(CMDIcon, {}), " \u2191"]
+        })]
+      });
+    }
+  }, {
+    name: "bringBackward",
+    label: "Move to Back",
+    autoClose: false,
+    render: () => {
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: ["Move to Back", " ", /*#__PURE__*/_jsxs("span", {
+          className: "shortcut-help-info",
+          children: [/*#__PURE__*/_jsx(CMDIcon, {}), " \u2193"]
+        })]
+      });
+    }
+  }, {
+    name: "cut",
+    label: "Cut",
+    render: () => {
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: ["Cut", " ", /*#__PURE__*/_jsxs("span", {
+          className: "shortcut-help-info",
+          children: [/*#__PURE__*/_jsx(CMDIcon, {}), " X"]
+        })]
+      });
+    }
+  }, {
+    name: "copy",
+    label: "Copy",
+    render: () => {
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: ["Copy", " ", /*#__PURE__*/_jsxs("span", {
+          className: "shortcut-help-info",
+          children: [/*#__PURE__*/_jsx(CMDIcon, {}), " C"]
+        })]
+      });
+    }
+  }, {
+    name: "paste",
+    label: "Paste",
+    render: () => {
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: ["Paste", " ", /*#__PURE__*/_jsxs("span", {
+          className: "shortcut-help-info",
+          children: [/*#__PURE__*/_jsx(CMDIcon, {}), " V"]
+        })]
+      });
+    }
+  }, {
+    name: "delete",
+    label: "Delete"
+  }],
+  parent: [{
+    name: "cut",
+    label: "Cut",
+    render: () => {
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: ["Cut", " ", /*#__PURE__*/_jsxs("span", {
+          className: "shortcut-help-info",
+          children: [/*#__PURE__*/_jsx(CMDIcon, {}), " X"]
+        })]
+      });
+    }
+  }, {
+    name: "copy",
+    label: "Copy",
+    render: () => {
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: ["Copy", " ", /*#__PURE__*/_jsxs("span", {
+          className: "shortcut-help-info",
+          children: [/*#__PURE__*/_jsx(CMDIcon, {}), " C"]
+        })]
+      });
+    }
+  }, {
+    name: "paste",
+    label: "Paste",
+    render: () => {
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: ["Paste", " ", /*#__PURE__*/_jsxs("span", {
+          className: "shortcut-help-info",
+          children: [/*#__PURE__*/_jsx(CMDIcon, {}), " V"]
+        })]
+      });
+    }
+  }, {
+    name: "delete",
+    label: "Delete"
+  }],
+  "parent-container": [{
+    name: "cut",
+    label: "Cut",
+    render: () => {
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: ["Cut", " ", /*#__PURE__*/_jsxs("span", {
+          className: "shortcut-help-info",
+          children: [/*#__PURE__*/_jsx(CMDIcon, {}), " X"]
+        })]
+      });
+    }
+  }, {
+    name: "copy",
+    label: "Copy",
+    render: () => {
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: ["Copy", " ", /*#__PURE__*/_jsxs("span", {
+          className: "shortcut-help-info",
+          children: [/*#__PURE__*/_jsx(CMDIcon, {}), " C"]
+        })]
+      });
+    }
+  }, {
+    name: "paste",
+    label: "Paste",
+    render: () => {
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: ["Paste", " ", /*#__PURE__*/_jsxs("span", {
+          className: "shortcut-help-info",
+          children: [/*#__PURE__*/_jsx(CMDIcon, {}), " V"]
+        })]
+      });
+    }
+  }, {
+    name: "delete",
+    label: "Delete"
+  }]
+};
+export default CMenus;

package/dist/Editor/common/RnD/ContextMenu/index.js

@@ -0,0 +1,38 @@
+import React from "react";
+import { Popover, MenuItem } from "@mui/material";
+import CMenus from "./CMenus";
+import useContextMenuStyle from "./styles";
+import { jsx as _jsx } from "react/jsx-runtime";
+const ContextMenu = props => {
+  const classes = useContextMenuStyle();
+  const {
+    open,
+    type,
+    contextMenu,
+    handleClose
+  } = props;
+  const {
+    path,
+    x,
+    y
+  } = contextMenu;
+  const menus = CMenus[type] || [];
+  return open && path ? /*#__PURE__*/_jsx(Popover, {
+    open: contextMenu !== null,
+    sx: classes.root,
+    onClose: handleClose(null),
+    anchorReference: "anchorPosition",
+    anchorPosition: contextMenu !== null ? {
+      top: y,
+      left: x
+    } : undefined,
+    children: menus.map((m, i) => {
+      return /*#__PURE__*/_jsx(MenuItem, {
+        className: "cm-menu-item",
+        onClick: handleClose(m),
+        children: m?.render ? m.render() : m.label
+      }, `cm_${i}`);
+    })
+  }) : null;
+};
+export default ContextMenu;

package/dist/Editor/common/RnD/ContextMenu/styles.js

@@ -0,0 +1,21 @@
+const useContextMenuStyle = () => ({
+  root: {
+    zIndex: 1200,
+    "& .cm-menu-item": {
+      width: "190px",
+      justifyContent: "space-between",
+      "& .shortcut-help-info": {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        fontSize: "12px",
+        color: "#bbb",
+        "& svg": {
+          width: "12px",
+          marginRight: "4px"
+        }
+      }
+    }
+  }
+});
+export default useContextMenuStyle;

package/dist/Editor/common/RnD/DragInfo/index.js

@@ -0,0 +1,31 @@
+import React from "react";
+import { Paper, Popper } from "@mui/material";
+import useDragInfoStyle from "./styles";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+const DragInfo = props => {
+  const {
+    open,
+    dragging,
+    anchorEl
+  } = props;
+  const {
+    position
+  } = dragging;
+  const {
+    diffX
+  } = position || {};
+  const classes = useDragInfoStyle();
+  const x = parseInt(position?.x - window.innerWidth / 2 + 490 - diffX);
+  return open ? /*#__PURE__*/_jsx(Popper, {
+    open: open,
+    anchorEl: anchorEl,
+    placement: "top-start",
+    sx: classes.root,
+    children: /*#__PURE__*/_jsxs(Paper, {
+      className: "papper-root",
+      children: ["x: ", x, ", y: ", position?.y]
+    })
+  }) : null;
+};
+export default DragInfo;

package/dist/Editor/common/RnD/DragInfo/styles.js

@@ -0,0 +1,15 @@
+const useDragInfoStyle = () => ({
+  root: {
+    zIndex: 1200,
+    "& .papper-root": {
+      padding: "4px 6px",
+      background: "#2563EB",
+      color: "#FFF",
+      fontSize: "12px",
+      left: "12px",
+      marginLeft: "6px",
+      borderRadius: "2px"
+    }
+  }
+});
+export default useDragInfoStyle;

package/dist/Editor/common/RnD/DragOver/index.js

@@ -0,0 +1,55 @@
+import React, { useEffect, useRef, useState } from "react";
+import { Box, Paper, Popover } from "@mui/material";
+import useDragOverStyle from "./styles";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const DragOver = props => {
+  const ref = useRef();
+  const classes = useDragOverStyle();
+  const {
+    status,
+    hover_on,
+    path,
+    type
+  } = props;
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+  const isSectionHover = status && type === "parent";
+  const isContainerHover = hover_on.has(path) && type === "parent-container";
+  useEffect(() => {
+    if (ref?.current) {
+      const getBoundingClientRect = () => ref?.current?.getBoundingClientRect();
+      setAnchorEl({
+        getBoundingClientRect,
+        nodeType: 1
+      });
+    }
+  }, [ref?.current]);
+  const handleClose = () => {};
+  return isSectionHover || isContainerHover ? /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Box, {
+      component: "div",
+      sx: classes.root,
+      ref: ref
+    }), /*#__PURE__*/_jsx(Popover, {
+      sx: classes.popper,
+      open: open,
+      anchorEl: anchorEl,
+      onClose: handleClose,
+      anchorOrigin: {
+        vertical: "top",
+        horizontal: "center"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "center"
+      },
+      children: /*#__PURE__*/_jsx(Paper, {
+        className: "papper-root",
+        children: isSectionHover ? "Attach to this Section" : "Attach to this Container"
+      })
+    })]
+  }) : null;
+};
+export default DragOver;