@flozy/editor 5.8.8 → 5.9.0

package/dist/Editor/CommonEditor.js

@@ -54,13 +54,14 @@ const Item = /*#__PURE__*/forwardRef(({
   });
 });
 Item.displayName = "Item";
-const Element = props => {
+const Element = /*#__PURE__*/React.memo(props => {
   return /*#__PURE__*/_jsx(Section, {
     ...props,
     children: getBlock(props)
   });
-};
-const Leaf = ({
+});
+Element.displayName = "Element";
+const Leaf = /*#__PURE__*/React.memo(({
   attributes,
   children,
   leaf
@@ -71,12 +72,13 @@ const Leaf = ({
     ...attributes,
     children: children
   });
-};
+});
+Leaf.displayName = "Leaf";
 const updateTopBanner = (content = [], setTopBanner) => {
-  setTopBanner(() => {
-    const firstNode = content ? content[0] : {};
-    return firstNode?.type === "topbanner" ? firstNode : null;
-  });
+  // setTopBanner(() => {
+  //   const firstNode = content ? content[0] : {};
+  //   return firstNode?.type === "topbanner" ? firstNode : null;
+  // });
 };
 const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   const {
@@ -96,7 +98,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   const editorWrapper = useRef();
   const mentionsRef = useRef();
   const convertedContent = draftToSlate({
-    data: content
+    data: content,
+    needLayout: otherProps?.needLayout
   });
   const [value, setValue] = useState(convertedContent);
   const [isInteracted, setIsInteracted] = useState(false);
@@ -167,11 +170,11 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   const debounced = useDebouncedCallback(
   // function
   value => {
+    debouncedValue.current = value;
     const {
       value: strVal,
       ...restVal
     } = getOnSaveData(value);
-    debouncedValue.current = value;
     onSave(strVal, restVal);
   },
   // delay in ms
@@ -182,7 +185,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     return {
       value: JSON.stringify(val),
       text: text,
-      title: serializeToText(title?.children) || "Untitled"
+      title: serializeToText(title?.children) || ""
     };
   };
   const getPreviewImage = async (needBackground = false, options = {}) => {
@@ -312,7 +315,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
       updateTopBanner(newValue, setTopBanner);
       debounced(newValue);
       if (!isInteracted) {
-        setIsInteracted(true);
+        // setIsInteracted(true);
       }
     }
   };
@@ -596,8 +599,9 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                 setIsTextSelected: setIsTextSelected,
                 customProps: customProps,
                 editorWrapper: editorWrapper
-              }) : null, !readOnly && showViewport ? /*#__PURE__*/_jsx(SwitchViewport, {
+              }) : null, !readOnly ? /*#__PURE__*/_jsx(SwitchViewport, {
                 breakpoint: breakpoint,
+                show: showViewport,
                 onChange: b => onSwitchBreakpoint(b)
               }) : null]
             })

package/dist/Editor/Editor.css

@@ -1263,6 +1263,19 @@ blockquote {
   pointer-events: auto;
 }
 
+@media (max-width: 899px) {
+  .MuiPopover-root {
+    z-index: 1302 !important;
+  }
+  canvas {
+    max-width: 100% !important;
+  }
+}
+
+.settingsHeader {
+  font-size: 14px !important;
+  font-weight: 500 !important;
+}
 .hideScroll {
   overflow-anchor: none;
 }
@@ -1278,20 +1291,6 @@ blockquote {
 .hideScroll::-webkit-scrollbar-thumb:hover {
   background: none !important;
 }
-@media (max-width: 899px) {
-  .MuiPopover-root {
-    z-index: 1302 !important;
-  }
-
-  canvas {
-    max-width: 100% !important;
-  }
-}
-
-.settingsHeader {
-  font-size: 14px !important;
-  font-weight: 500 !important;
-}
 
 .custom-scroll::-webkit-scrollbar {
   height: .6rem; 
@@ -1330,3 +1329,19 @@ blockquote {
   background: linear-gradient(112.61deg, #2C63ED 19.3%, #8360FD 88.14%) !important;
   text-transform: math-auto !important;
 }
+
+code.markcode {
+  border-radius: 4px;
+  padding: 6px 8px;
+  margin: 8px 0px;
+  display: block;
+  background-color: #f3f3f3;
+  font-family: 'Source Code Pro' !important;
+}
+
+/* Hide the popper when the reference is hidden */
+.hide-popper-on-overlap[data-popper-escaped],
+.hide-popper-on-overlap[data-popper-reference-hidden] {
+  visibility: hidden;
+  pointer-events: none;
+}

package/dist/Editor/Elements/Button/EditorButton.js

@@ -162,6 +162,7 @@ const EditorButton = props => {
                 display: "inline-flex",
                 color: "rgba(0, 0, 0, 0.54)",
                 marginBottom: "0px !important",
+                ...classes.buttonMoreOption,
                 ...classes.buttonMoreOption3
               },
               ...btnProps,
@@ -264,7 +265,7 @@ const EditorButton = props => {
             ...btnSp,
             borderStyle: borderStyle || "solid",
             color: `${textColor || "#FFFFFF"}`,
-            fontSize: textSize || "inherit",
+            fontSize: textSize || "12px",
             fontFamily: fontFamily || "PoppinsRegular",
             display: "inline-flex",
             alignItems: "center",

package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/Select.js

@@ -104,9 +104,9 @@ export default function Select(props) {
       return /*#__PURE__*/_jsx(Box, {
         className: "tv-ms-tag-wrpr",
         sx: {
-          "& svg": {
-            marginRight: "5px",
-            "& path": {
+          '& svg': {
+            marginRight: '5px',
+            '& path': {
               stroke: "#000"
             }
           }
@@ -125,19 +125,15 @@ export default function Select(props) {
             sx: {
               background: option?.color || appTheme?.palette?.editor?.tv_border1,
               border: "none",
-              "& .MuiChip-label": {
-                paddingLeft: "12px !important"
+              '& .MuiChip-label': {
+                paddingLeft: '12px !important'
               }
             },
             avatar: /*#__PURE__*/_jsx(AvatarIcon, {
               option: option,
               avatar: optionAvatar
             }),
-            deleteIcon: /*#__PURE__*/_jsx(CloseIcon, {
-              style: {
-                cursor: "pointer"
-              }
-            })
+            deleteIcon: /*#__PURE__*/_jsx(CloseIcon, {})
           }, key) : null;
         })
       });
@@ -153,8 +149,8 @@ export default function Select(props) {
           label: option.label || option.value || "",
           sx: {
             background: option.color || appTheme?.palette?.editor?.tv_border1,
-            "& .MuiChip-label": {
-              paddingLeft: "12px !important"
+            '& .MuiChip-label': {
+              paddingLeft: '12px !important'
             }
           },
           avatar: /*#__PURE__*/_jsx(AvatarIcon, {

package/dist/Editor/Elements/Grid/GridItem.js

@@ -50,8 +50,7 @@ const GridItemToolbar = props => {
     open: true,
     placement: "top-end",
     sx: classes.popTools,
-    className: "gi-tool-pp",
-    disablePortal: true,
+    className: "gi-tool-pp hide-popper-on-overlap",
     contentEditable: false,
     children: /*#__PURE__*/_jsxs(Box, {
       className: "ico-grp-ss",

package/dist/Editor/Elements/Link/Link.js

@@ -1,7 +1,7 @@
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 import { Node, Transforms } from "slate";
-import { ReactEditor, useFocused, useSelected, useSlateStatic } from "slate-react";
-import { Box, IconButton, Tooltip } from "@mui/material";
+import { ReactEditor, useSelected, useSlateStatic } from "slate-react";
+import { Box, IconButton, Popper, Tooltip } from "@mui/material";
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
 import EditIcon from "@mui/icons-material/Edit";
 import LinkOffIcon from "@mui/icons-material/LinkOff";
@@ -11,6 +11,62 @@ import { getLinkType, handleLinkType } from "../../utils/helper";
 import LinkSettings from "../../common/LinkSettings";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+const Toolbar = props => {
+  const {
+    urlPath,
+    linkType,
+    showInNewTab,
+    selected,
+    linkRef,
+    onEditLink,
+    editor
+  } = props;
+  const btnProps = handleLinkType(urlPath, linkType, true, showInNewTab === "_blank");
+  const navType = getLinkType(linkType, urlPath);
+  const hideOpenLink = navType === "page" || !navType;
+  return selected ? /*#__PURE__*/_jsx(Popper, {
+    anchorEl: linkRef?.current,
+    open: true,
+    placement: "top-start",
+    className: "hide-popper-on-overlap",
+    contentEditable: false,
+    style: {
+      zIndex: 1
+    },
+    children: /*#__PURE__*/_jsxs(Box, {
+      className: "element-toolbar hr",
+      style: {
+        width: "150px",
+        display: "flex",
+        position: "unset"
+      },
+      component: "div",
+      children: [hideOpenLink ? null : /*#__PURE__*/_jsx(Tooltip, {
+        title: "Open",
+        children: /*#__PURE__*/_jsx(Box, {
+          sx: {
+            display: "inline-flex",
+            color: "rgba(0, 0, 0, 0.54)"
+          },
+          ...btnProps,
+          children: /*#__PURE__*/_jsx(OpenInNewIcon, {})
+        })
+      }), /*#__PURE__*/_jsx(Tooltip, {
+        title: "Edit",
+        children: /*#__PURE__*/_jsx(IconButton, {
+          onClick: onEditLink,
+          children: /*#__PURE__*/_jsx(EditIcon, {})
+        })
+      }), /*#__PURE__*/_jsx(Tooltip, {
+        title: "Remove",
+        children: /*#__PURE__*/_jsx(IconButton, {
+          onClick: () => removeLink(editor),
+          children: /*#__PURE__*/_jsx(LinkOffIcon, {})
+        })
+      })]
+    })
+  }) : null;
+};
 const linkStyles = () => ({
   linkBtn: {
     border: "none",
@@ -40,7 +96,6 @@ const Link = props => {
   } = customProps;
   const editor = useSlateStatic();
   const selected = useSelected();
-  const focused = useFocused();
   const [showInput, setShowInput] = useState(false);
   const [linkData, setLinkData] = useState({
     name: "",
@@ -53,6 +108,7 @@ const Link = props => {
   const showInNewTab = element?.showInNewTab || element?.target;
   const linkType = element?.linkType;
   const classes = linkStyles();
+  const linkRef = useRef(null);
   const updateLink = data => {
     Transforms.setNodes(editor, data, {
       at: path
@@ -77,54 +133,25 @@ const Link = props => {
   const handleClose = () => {
     setShowInput(false);
   };
-  const Toolbar = () => {
-    const btnProps = handleLinkType(urlPath, linkType, true, showInNewTab === "_blank");
-    const navType = getLinkType(linkType, urlPath);
-    const hideOpenLink = navType === "page" || !navType;
-    return selected && focused ? /*#__PURE__*/_jsxs("div", {
-      className: "element-toolbar hr",
-      contentEditable: false,
-      style: {
-        width: "150px",
-        top: "100%",
-        left: "0px",
-        display: "flex"
-      },
-      children: [hideOpenLink ? null : /*#__PURE__*/_jsx(Tooltip, {
-        title: "Open",
-        children: /*#__PURE__*/_jsx(Box, {
-          sx: {
-            display: "inline-flex",
-            color: "rgba(0, 0, 0, 0.54)"
-          },
-          ...btnProps,
-          children: /*#__PURE__*/_jsx(OpenInNewIcon, {})
-        })
-      }), /*#__PURE__*/_jsx(Tooltip, {
-        title: "Edit",
-        children: /*#__PURE__*/_jsx(IconButton, {
-          onClick: onEditLink,
-          children: /*#__PURE__*/_jsx(EditIcon, {})
-        })
-      }), /*#__PURE__*/_jsx(Tooltip, {
-        title: "Remove",
-        children: /*#__PURE__*/_jsx(IconButton, {
-          onClick: () => removeLink(editor),
-          children: /*#__PURE__*/_jsx(LinkOffIcon, {})
-        })
-      })]
-    }) : null;
-  };
   const buttonProps = handleLinkType(urlPath, linkType, readOnly, showInNewTab === "_blank");
   return /*#__PURE__*/_jsxs("div", {
     className: "link",
+    ref: linkRef,
     children: [/*#__PURE__*/_jsx(Box, {
       ...attributes,
       ...element.attr,
       sx: classes.linkBtn,
       ...buttonProps,
       children: children
-    }), /*#__PURE__*/_jsx(Toolbar, {}), showInput ? /*#__PURE__*/_jsx(LinkSettings, {
+    }), /*#__PURE__*/_jsx(Toolbar, {
+      urlPath: urlPath,
+      linkType: linkType,
+      showInNewTab: showInNewTab,
+      selected: selected,
+      linkRef: linkRef,
+      onEditLink: onEditLink,
+      editor: editor
+    }), showInput ? /*#__PURE__*/_jsx(LinkSettings, {
       handleClose: handleClose,
       onSave: ({
         linkType,

package/dist/Editor/Elements/SimpleText/index.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { useSlateStatic, useSelected, ReactEditor } from "slate-react";
 import { Box } from "@mui/material";
-import { getPageSettings } from "../../utils/pageSettings";
+// import { getPageSettings } from "../../utils/pageSettings";
 import { isTextSelected } from "../../utils/helper";
 import { useEditorContext } from "../../hooks/useMouseMove";
 import SimpleTextStyle from "./style";
@@ -12,7 +12,6 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
 const SimpleText = props => {
   const {
-    theme,
     openAI
   } = useEditorContext() || {};
   const editor = useSlateStatic();
@@ -28,19 +27,15 @@ const SimpleText = props => {
     readOnly,
     editorPlaceholder
   } = customProps;
-  const {
-    element: pageSt
-  } = getPageSettings(editor) || {};
-  const {
-    pageColor
-  } = pageSt?.pageProps || {};
+  // const { element: pageSt } = getPageSettings(editor) || {};
+  // const { pageColor } = pageSt?.pageProps || {};
   const {
     activeBreakPoint
   } = useEditorContext();
   const lineHeight = element?.children[0]?.lineHeight;
   const lineH = getBreakpointLineSpacing(lineHeight, activeBreakPoint);
   const classes = SimpleTextStyle({
-    pageColor: pageColor || theme?.palette?.editor?.background || "#FFFFFF",
+    pageColor: "#FFFFFF",
     lineHeight: lineH
   });
   const selected = useSelected();
@@ -59,14 +54,14 @@ const SimpleText = props => {
     contentEditable: false,
     className: "placeholder-simple-text",
     children: isEmptyEditor ? editorPlaceholder || "Write Something..." : showPlaceHolder ? opacity && selected ? /*#__PURE__*/_jsxs(_Fragment, {
-      children: ["Type ", /*#__PURE__*/_jsx("span", {
+      children: ["Type", " ", /*#__PURE__*/_jsx("span", {
         style: {
-          backgroundColor: '#F2F6FA',
+          backgroundColor: "#F2F6FA",
           padding: "0px 2px",
           borderRadius: "2px"
         },
         children: "/"
-      }), " to browse elements"]
+      }), " ", "to browse elements"]
     }) : "" : ""
   }));
 };

package/dist/Editor/Elements/SimpleText/style.js

@@ -35,8 +35,8 @@ const SimpleTextStyle = ({
       height: "24px",
       overflow: "hidden",
       fontSize: "14px",
-      display: 'inline-flex',
-      alignItems: 'center',
+      display: "inline-flex",
+      alignItems: "center",
       "& .bg-pad-sl": {
         padding: "2px 4px 2px 4px",
         background: "transparent",

package/dist/Editor/Elements/Title/title.js

@@ -1,12 +1,24 @@
 import React from "react";
+import { Text } from "slate";
 import { jsx as _jsx } from "react/jsx-runtime";
+const isEmptyTextNode = node => {
+  if (Text.isText(node)) {
+    return !node.text.trim();
+  }
+  return false;
+};
 const Title = props => {
   const {
+    element,
     attributes,
-    children
+    children,
+    customProps
   } = props;
+  const isEmpty = !customProps?.readOnly && isEmptyTextNode(element?.children[0]) ? "empty" : "";
   return /*#__PURE__*/_jsx("div", {
     ...attributes,
+    placeholder: "Title",
+    className: `content-editable ${isEmpty}`,
     style: {
       fontWeight: "bold",
       fontSize: "20px"

package/dist/Editor/Elements/Variables/Style.js

@@ -1,4 +1,4 @@
-const VariableStyles = () => ({
+const VariableStyles = theme => ({
   variablesItem: {
     color: "#2563EB",
     background: "#EEEEEE"
@@ -37,8 +37,34 @@ const VariableStyles = () => ({
     "& .MuiMenuItem-root": {
       color: "#64748B"
     },
+    "& .MuiPaper-root": {
+      borderRadius: '8px',
+      backgroundColor: `${theme?.palette?.editor?.miniToolBarBackground} !important`,
+      marginTop: '5px',
+      "@media only screen and (max-width: 599px)": {
+        padding: '10px 0px'
+      }
+    },
+    "& .MuiList-root": {
+      padding: '0px'
+    },
+    "& .MuiButtonBase-root": {
+      margin: '6px',
+      borderRadius: '8px',
+      padding: '6px 14px',
+      fontSize: '14px',
+      fontWeight: '400',
+      color: theme?.palette?.editor?.deletePopUpButtonTextColor,
+      "&:hover": {
+        background: `${theme?.palette?.editor?.menuOptionHoverBackground} !important`
+      },
+      "@media only screen and (max-width: 599px)": {
+        minHeight: '30px',
+        margin: '0px 6px'
+      }
+    },
     "& .Mui-selected": {
-      backgroundColor: "rgba(0, 0, 0, 0.04) !important"
+      backgroundColor: 'unset !important'
     }
   }
 });

package/dist/Editor/Elements/Variables/VariableButton.js

@@ -3,11 +3,15 @@ import { useSlateStatic } from "slate-react";
 import { MenuItem, Select } from "@mui/material";
 import { insertVariables } from "../../utils/variables";
 import VariableStyles from "./Style";
-import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import KeyboardArrowDownRoundedIcon from '@mui/icons-material/KeyboardArrowDownRounded';
+import { useEditorContext } from "../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const VariableButton = props => {
-  const classes = VariableStyles();
+  const {
+    theme
+  } = useEditorContext();
+  const classes = VariableStyles(theme);
   const editor = useSlateStatic();
   const {
     options
@@ -24,13 +28,14 @@ const VariableButton = props => {
     value: "",
     sx: classes.variableBtn,
     onChange: updateVariable,
-    IconComponent: () => /*#__PURE__*/_jsx(KeyboardArrowDownIcon, {}),
+    IconComponent: () => /*#__PURE__*/_jsx(KeyboardArrowDownRoundedIcon, {}),
     MenuProps: {
       sx: classes.variableMenuItem,
       PaperProps: {
         style: {
           maxHeight: 300,
-          overflowY: "auto"
+          overflowY: "auto",
+          transformOrigin: 'top left'
         },
         sx: {
           "&::-webkit-scrollbar-track": {
@@ -40,6 +45,14 @@ const VariableButton = props => {
             borderRadius: "16px"
           }
         }
+      },
+      anchorOrigin: {
+        vertical: 'bottom',
+        horizontal: 'right'
+      },
+      transformOrigin: {
+        vertical: 'top',
+        horizontal: 'right'
       }
     },
     children: [/*#__PURE__*/_jsx(MenuItem, {

package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js

@@ -416,6 +416,11 @@ const usePopupStyle = theme => ({
     "& .MuiOutlinedInput-notchedOutline": {
       border: `1px solid ${theme?.palette?.editor?.inputFieldBorder} !important`
     },
+    '& .MuiInputBase-root': {
+      '& input': {
+        border: "none !important"
+      }
+    },
     "& svg": {
       width: "20px",
       height: "24px"

package/dist/Editor/Toolbar/PopupTool/index.js

@@ -1,5 +1,5 @@
-import React, { useCallback, useEffect, useState } from "react";
-import { Popper, Fade, Paper, ClickAwayListener } from "@mui/material";
+import React, { useEffect, useState } from "react";
+import { Popper, Paper, ClickAwayListener } from "@mui/material";
 import { Editor, Range, Transforms } from "slate";
 import { ReactEditor, useSlate } from "slate-react";
 import useDrag from "../../hooks/useDrag";
@@ -21,7 +21,8 @@ const PopupTool = props => {
   const classes = usePopupStyles(theme);
   const {
     setPopupType,
-    openAI
+    openAI,
+    selectedElement
   } = useEditorContext();
   const [anchorEl, setAnchorEl] = useState(null);
   const [open, setOpen] = useState(false);
@@ -32,13 +33,10 @@ const PopupTool = props => {
   const [event] = useDrag(anchorEl);
   const id = open ? "popup-edit-tool" : "";
   const [size] = useWindowResize();
-  const {
-    selectedElement
-  } = useEditorContext();
-  const updateAnchorEl = useCallback(() => {
+  const updateAnchorEl = isScroll => {
     try {
       const isHavingSelection = selection && !Range.isCollapsed(selection);
-      if (isHavingSelection) {
+      if (isHavingSelection && event === "end") {
         const domRange = ReactEditor.toDOMRange(editor, editor.selection);
         const editorContainer = document.querySelector("#slate-wrapper-scroll-container")?.getBoundingClientRect();
         const rect = domRange.getBoundingClientRect();
@@ -47,16 +45,21 @@ const PopupTool = props => {
           rect.y = -500; // hide the popper
         }
 
-        setAnchorEl({
-          clientWidth: rect.width,
-          clientHeight: rect.height,
-          getBoundingClientRect: () => rect
-        });
+        // Create a dummy anchor element to match Popper's requirements
+        const anchor = document.createElement("div");
+        anchor.style.position = "absolute";
+        anchor.style.top = `${rect.top + window.scrollY}px`;
+        anchor.style.left = `${rect.left + window.scrollX}px`;
+        document.body.appendChild(anchor);
+        if (!anchorEl || isScroll === "scroll") {
+          setAnchorEl(anchor);
+          setOpen(true);
+        }
       }
     } catch (err) {
       console.log(err);
     }
-  }, [selection]);
+  };
   useEditorScroll(editorWrapper, updateAnchorEl);
   useEffect(() => {
     const userStoppedSelection = size?.device === "xs" ? true : event === "end"; // for mobile, when user starts the selection, we are gonna show the popup tool
@@ -86,7 +89,7 @@ const PopupTool = props => {
       updateAnchorEl();
       hideSlateSelection(); // removes slate selection background, when there is no selection
     }
-  }, [selection]);
+  }, [selection, event]);
   useEffect(() => {
     if (selectedElement?.enable === 1) {
       setAnchorEl(null);
@@ -117,24 +120,18 @@ const PopupTool = props => {
       id: id,
       open: open,
       anchorEl: anchorEl,
-      transition: true,
       sx: classes.popupWrapper,
       placement: "top-start",
-      children: ({
-        TransitionProps
-      }) => /*#__PURE__*/_jsx(Fade, {
-        ...TransitionProps,
-        children: /*#__PURE__*/_jsx(Paper, {
-          style: {
-            borderRadius: "6px",
-            border: "1px solid #8360FD"
-          },
-          children: /*#__PURE__*/_jsx(MiniTextFormat, {
-            editor: editor,
-            classes: classes,
-            closeMainPopup: handleClose,
-            customProps: customProps
-          })
+      children: /*#__PURE__*/_jsx(Paper, {
+        style: {
+          borderRadius: "6px",
+          border: "1px solid #8360FD"
+        },
+        children: /*#__PURE__*/_jsx(MiniTextFormat, {
+          editor: editor,
+          classes: classes,
+          closeMainPopup: handleClose,
+          customProps: customProps
         })
       })
     })