@flozy/editor 5.0.4 → 5.0.6

package/dist/Editor/Elements/DataView/styles.js

@@ -0,0 +1,133 @@
+const useDataViewStyles = (theme, appTheme) => ({
+  root: {
+    width: "100%",
+    overflowX: "auto",
+    marginTop: "8px",
+    "& table": {
+      width: "100%",
+      "& th.fe-tv-ap-ico": {
+        width: "50px"
+      }
+    },
+    "& table th": {
+      cursor: "pointer",
+      width: "200px"
+    },
+    "& table, th, td": {
+      border: "1px solid black",
+      borderCollapse: "collapse"
+    },
+    "& .react-datepicker-wrapper": {
+      width: "100%",
+      "& input": {
+        padding: "6px 12px"
+      }
+    },
+    "& .MuiInputBase-root": {
+      "& fieldset": {
+        border: "none"
+      }
+    },
+    // filter view
+    "& .fe-tv-fv": {
+      marginBottom: "8px",
+      "& .mr": {
+        marginRight: "4px"
+      },
+      [theme.breakpoints.between("xs", "md")]: {
+        display: "flex",
+        flexDirection: "column"
+      }
+    },
+    "& .tv-act-row": {
+      "& .tv-tr-pop": {
+        opacity: 0,
+        "&.active": {
+          opacity: 1
+        }
+      },
+      "&:hover": {
+        "& .tv-tr-pop": {
+          opacity: 1
+        }
+      }
+    }
+  },
+  filterView: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    "& .MuiButtonBase-root": {
+      padding: "6px",
+      width: "24px",
+      height: "24px",
+      "&.active": {
+        color: "rgba(37, 99, 235, 1)"
+      }
+    },
+    "& .tv-sb": {
+      display: "flex",
+      border: "1px solid transparent",
+      width: "24px",
+      transition: "width 1s",
+      "&.open": {
+        width: "fit-content",
+        border: "1px solid rgba(236, 236, 236, 1)",
+        borderRadius: "8px"
+      },
+      "& input": {
+        paddingBottom: "0px",
+        fontSize: "14px"
+      }
+    },
+    "& .tv-title-wrpr, .tv-fi-wrpr": {
+      display: "flex",
+      "& button": {
+        color: appTheme?.palette?.editor?.tv_text
+      },
+      "& input": {
+        color: appTheme?.palette?.editor?.tv_text
+      }
+    },
+    "& .tv-title-wrpr": {
+      width: "80%",
+      marginRight: "8px",
+      "& .MuiInputBase-root": {
+        width: "100%"
+      },
+      [theme.breakpoints.between("xs", "md")]: {
+        width: "100%",
+        marginRight: "0px"
+      }
+    },
+    "& .tv-fi-wrpr": {
+      [theme.breakpoints.between("xs", "md")]: {
+        width: "100%",
+        justifyContent: "end"
+      }
+    }
+  },
+  basicMenu: {
+    "& .MuiPaper-root": {
+      padding: "0px 6px",
+      width: "150px",
+      border: `1px solid ${appTheme?.palette?.editor?.tv_border}`,
+      borderRadius: "8px",
+      background: appTheme?.palette?.editor?.tv_pop_bg,
+      color: appTheme?.palette?.editor?.tv_text_primary,
+      "& .MuiButtonBase-root": {
+        fontSize: "14px",
+        "& svg": {
+          width: "16px",
+          height: "16px"
+        },
+        "&:hover": {
+          background: appTheme?.palette?.editor?.tv_hover_bg,
+          borderRadius: "8px",
+          color: appTheme?.palette?.editor?.tv_hover_text
+        }
+      }
+    }
+  }
+});
+export default useDataViewStyles;

package/dist/Editor/Elements/FreeGrid/styles.js

@@ -74,7 +74,8 @@ const useFreeGridStyles = ({
           fontSize: "12px",
           borderTopLeftRadius: "2px",
           borderTopRightRadius: "2px",
-          width: "auto"
+          width: "auto",
+          pointerEvents: "none"
         },
         "&:hover": {
           "& .debug-info": {

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

@@ -17,6 +17,7 @@ import { useGrid, getChildCount } from "./Providers/GridProvider";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+let TT = null;
 const Resizer = ({
   classes,
   onMouseDown,
@@ -138,7 +139,7 @@ const GridItem = props => {
     try {
       if (columnRef?.current && (!parentDOM?.parentDOM || !minWidth || lastChild)) {
         initDoms(lastChild);
-        if (lastChild) {
+        if (lastChild && childCount <= 2) {
           Transforms.setNodes(editor, {
             minWidth: null
           }, {

package/dist/Editor/Elements/Search/SearchAttachment.js

@@ -41,13 +41,14 @@ const SearchAttachment = props => {
         justifyContent: "flex-start",
         alignItems: "flex-end",
         width: "fit-content",
-        maxWidth: '194px',
+        maxWidth: '250px',
         padding: "0px 10px",
         boxShadow: "none",
         border: `1px solid ${theme?.palette?.primary?.slashBrainBorder}`,
         borderRadius: "7px !important",
         background: theme?.palette?.containers?.slashBrainCardBg,
         cursor: 'pointer',
+        margin: '4px 0px',
         "&.MuiPaper-root.MuiPaper-rounded": {
           borderRadius: "7px !important",
           paddingTop: '0px !important'
@@ -91,7 +92,7 @@ const SearchAttachment = props => {
             whiteSpace: 'nowrap',
             overflow: 'hidden',
             wordBreak: "break-word",
-            maxWidth: '150px',
+            maxWidth: '210px',
             lineHeight: 1.43,
             "&::selection": {
               WebkitTextFillColor: "#000"

package/dist/Editor/Elements/Search/SearchButton.js

@@ -113,7 +113,7 @@ const SearchButton = /*#__PURE__*/forwardRef((props, ref) => {
         sx: {
           width: '100%',
           background: theme?.palette?.editor?.miniToolBarBackground,
-          borderColor: theme?.palette?.type === 'dark' ? theme?.palette?.editor?.popUpBorderColor : 'transparent'
+          boxShadow: 'none'
         },
         children: /*#__PURE__*/_jsx(SearchAndDocList, {
           mapData: mapData,
@@ -149,8 +149,13 @@ const SearchButton = /*#__PURE__*/forwardRef((props, ref) => {
           border: '1px solid',
           borderColor: theme?.palette?.type === 'dark' ? theme?.palette?.editor?.popUpBorderColor : 'transparent',
           borderRadius: '12px',
+          boxShadow: theme?.palette?.type === 'dark' ? 'transparent' : '0px 4px 10px 0px #00000029',
           '&.MuiPaper-root-MuiPopover-paper': {
-            borderRadius: '12px !important'
+            borderRadius: '12px !important',
+            boxShadow: theme?.palette?.type === 'dark' ? 'transparent' : '0px 4px 10px 0px #00000029'
+          },
+          '@media only screen and (min-width: 350px) and (max-width: 599px)': {
+            width: '100%'
           }
         },
         children: /*#__PURE__*/_jsx(SearchAndDocList, {

package/dist/Editor/Elements/Search/SearchList.js

@@ -13,6 +13,7 @@ const SearchAndDocList = ({
   theme,
   handleClose
 }) => {
+  const isMobile = window.matchMedia("(max-width: 899px)")?.matches || false;
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs(Box, {
       display: "flex",
@@ -28,25 +29,29 @@ const SearchAndDocList = ({
           color: theme?.palette?.primary?.main
         },
         children: "Brains"
-      }), /*#__PURE__*/_jsx(IconButton, {
+      }), !isMobile ? /*#__PURE__*/_jsx(IconButton, {
         onClick: e => {
           e.stopPropagation();
           handleClose();
         },
         sx: {
           borderRadius: "6px",
-          backgroundColor: theme?.palette?.editor?.miniToolBarBackground,
-          border: `1px solid ${theme?.palette?.primary?.slashBrainBorder}`,
-          padding: "5px",
+          backgroundColor: theme?.palette.type === 'dark' ? theme?.palette?.editor?.sectionSettingIconHover : theme?.palette?.editor?.sectionSettingIconHover,
+          padding: "3px",
           "&:hover": {
             backgroundColor: theme?.palette?.editor?.sectionSettingIconHover,
             background: theme?.palette?.editor?.sectionSettingIconHover
+          },
+          '& svg': {
+            '& path': {
+              stroke: theme?.palette?.editor?.closeButtonSvgStroke
+            }
           }
         },
         children: /*#__PURE__*/_jsx(Icon, {
           icon: "closeIcon"
         })
-      })]
+      }) : null]
     }), /*#__PURE__*/_jsx(Box, {
       sx: {
         padding: '0px 16px'
@@ -70,34 +75,48 @@ const SearchAndDocList = ({
           startAdornment: /*#__PURE__*/_jsx(InputAdornment, {
             position: "start",
             children: /*#__PURE__*/_jsx(SearchIcon, {})
-          })
+          }),
+          sx: {
+            color: theme?.palette?.text?.secondary2,
+            fontSize: '14px'
+          }
         },
         sx: {
           borderRadius: "8px",
+          fontSize: '14px',
+          color: theme?.palette?.text?.secondary2,
           "& .MuiOutlinedInput-root": {
-            color: theme?.palette?.primary?.main,
+            color: `${theme?.palette?.text?.secondary2} !important`,
             boxShadow: theme?.palette?.shadows?.shadow12,
-            backgroundColor: theme?.palette?.editor?.miniToolBarBackground,
+            backgroundColor: theme?.palette?.editor?.inputFieldBgColor,
+            fontSize: '14px',
             "&:hover .MuiOutlinedInput-notchedOutline": {
               borderRadius: "8px",
               border: `1px solid ${theme?.palette?.primary?.slashBrainBorder}`,
               borderColor: theme?.palette?.primary?.slashBrainBorder
             },
             "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+              color: theme?.palette?.text?.secondary2,
               borderRadius: "8px",
               border: `1px solid ${theme?.palette?.primary?.slashBrainBorder}`,
               borderColor: `${theme?.palette?.primary?.slashBrainBorder} !important`
             }
           },
           '& .MuiOutlinedInput-notchedOutline': {
+            color: theme?.palette?.text?.secondary2,
             borderRadius: "8px",
             border: `1px solid ${theme?.palette?.primary?.slashBrainBorder}`,
-            borderColor: theme?.palette?.primary?.slashBrainBorder
+            borderColor: theme?.palette?.primary?.slashBrainBorder,
+            fontSize: '14px'
           },
           '& .MuiInputBase-root': {
-            borderRadius: '8px'
+            color: theme?.palette?.text?.secondary2,
+            borderRadius: '8px',
+            fontSize: '14px'
           },
           "& svg": {
+            width: '16px',
+            height: '16px',
             "& path": {
               stroke: theme?.palette?.text?.text6
             }
@@ -116,23 +135,25 @@ const SearchAndDocList = ({
         padding: '0px 16px 8px',
         marginBottom: '20px',
         scrollbarWidth: "thin",
-        scrollbarColor: `${theme?.palette?.primary?.slashBrainBorder} transparent`,
+        scrollbarColor: `${theme?.palette?.editor?.brainPopupScroll} transparent`,
         "&::-webkit-scrollbar": {
-          width: "3px",
+          width: "3px !important",
           height: "3px !important",
           borderRadius: "10px !important"
         },
         "&::-webkit-scrollbar-thumb": {
-          backgroundColor: theme?.palette?.primary?.slashBrainBorder,
+          backgroundColor: theme?.palette?.editor?.brainPopupScroll,
           borderRadius: "10px !important",
           width: "3px !important"
         },
         "&::-webkit-scrollbar-thumb:hover": {
-          backgroundColor: theme?.palette?.primary?.slashBrainBorder
+          backgroundColor: theme?.palette?.editor?.brainPopupScroll,
+          width: "3px !important"
         },
         "&::-webkit-scrollbar-track": {
           background: "transparent",
-          borderRadius: "10px !important"
+          borderRadius: "10px !important",
+          width: "3px !important"
         }
       },
       children: [mapData?.map((doc, index) => {
@@ -145,19 +166,29 @@ const SearchAndDocList = ({
             border: `1px solid ${theme?.palette?.primary?.slashBrainBorder}`,
             borderRadius: '8px',
             padding: '6px 10px',
-            cursor: 'pointer'
+            cursor: 'pointer',
+            backgroundColor: theme?.palette?.editor?.inputFieldBgColor,
+            '@media only screen and (min-width: 350px) and (max-width: 599px)': {
+              overflow: 'hidden'
+            }
           },
           onClick: () => handleClick(doc),
           children: /*#__PURE__*/_jsxs(Grid, {
             container: true,
             alignItems: "center",
             justifyContent: 'space-between',
+            sx: {
+              flexWrap: 'nowrap'
+            },
             gap: 1,
             children: [/*#__PURE__*/_jsx(Grid, {
               item: true,
               children: /*#__PURE__*/_jsxs(Grid, {
                 container: true,
                 alignItems: "center",
+                sx: {
+                  flexWrap: 'nowrap'
+                },
                 gap: 1,
                 children: [/*#__PURE__*/_jsx(Grid, {
                   item: true,
@@ -184,7 +215,10 @@ const SearchAndDocList = ({
                       overflow: 'hidden',
                       wordBreak: "break-word",
                       maxWidth: '230px',
-                      textAlign: 'left'
+                      textAlign: 'left',
+                      '@media only screen and (min-width: 350px) and (max-width: 899px)': {
+                        maxWidth: '100%'
+                      }
                     },
                     children: title
                   })

package/dist/Editor/Elements/Signature/Signature.css

@@ -57,7 +57,7 @@
     cursor: pointer;
 }
   .upload-wrapper-ui {
-    border: 1px dashed #92B1F5 !important;
+    border: 1.5px dashed #2563EB !important;
     /* box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.17) !important; */
     border-radius: 7px;
     display: flex;

package/dist/Editor/Elements/Table/AddRowCol.js

@@ -64,7 +64,7 @@ function AddRowCol(props) {
         padding: "0px 4px",
         minWidth: "unset",
         lineHeight: "18px",
-        fontWeight: "lighter !important",
+        fontWeight: "normal !important",
         ...buttonStyle,
         opacity: showBtn ? 1 : 0
       },

package/dist/Editor/Elements/Table/DragButton.js

@@ -1,4 +1,4 @@
-import { Box, Fade, IconButton, Paper, Popover, Popper } from "@mui/material";
+import { Box, ClickAwayListener, Fade, IconButton, Paper, Popper } from "@mui/material";
 import DragStyles from "./DragStyles";
 import { DragIcon } from "../../common/iconListV2";
 import { useEditorContext } from "../../hooks/useMouseMove";
@@ -19,7 +19,8 @@ function DragButton({
   className = "",
   customProps,
   dndProps,
-  resetSelection
+  resetSelection,
+  show
 }) {
   const {
     theme
@@ -31,8 +32,8 @@ function DragButton({
     isMobile
   } = customProps || {};
   const onDragClick = () => {
-    setShowTool(true);
     onDrag();
+    setShowTool(true);
   };
   const onDragClose = () => {
     setShowTool(false);
@@ -61,78 +62,80 @@ function DragButton({
       handleAction(value, option, dragType);
     }
   };
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Popper, {
-      sx: classes.popper,
-      open: Boolean(anchorEl),
-      anchorEl: anchorEl,
-      placement: placement || "left",
-      transition: true,
-      contentEditable: false,
-      ref: dragElement,
-      modifiers: [{
-        name: "offset",
-        options: {
-          offset: [0, -12]
-        }
-      }, {
-        name: "flip",
-        enabled: false // Disable dynamic flipping
-      }],
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: show || showTool ? /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Popper, {
+        sx: classes.popper,
+        open: Boolean(anchorEl),
+        anchorEl: anchorEl,
+        placement: placement || "left",
+        transition: true,
+        contentEditable: false,
+        ref: dragElement,
+        modifiers: [{
+          name: "offset",
+          options: {
+            offset: [0, -12]
+          }
+        }, {
+          name: "flip",
+          enabled: false // Disable dynamic flipping
+        }],
 
-      disablePortal: dragType !== "row",
-      className: `${className}`,
-      children: ({
-        TransitionProps
-      }) => /*#__PURE__*/_jsx(Fade, {
-        ...TransitionProps,
-        timeout: 350,
-        children: /*#__PURE__*/_jsx("div", {
-          children: /*#__PURE__*/_jsx(Draggable, {
-            ...dragProps,
-            children: /*#__PURE__*/_jsx(Paper, {
-              sx: dragType === "row" ? {
-                transform: "rotate(90deg)"
-              } : {},
-              className: `${showTool ? "active" : ""}`,
-              style: {
-                lineHeight: 0
-              },
-              children: /*#__PURE__*/_jsx(IconButton, {
-                onClick: () => {
-                  onDragClick();
+        disablePortal: dragType !== "row",
+        className: `${className}`,
+        children: ({
+          TransitionProps
+        }) => /*#__PURE__*/_jsx(Fade, {
+          ...TransitionProps,
+          timeout: 350,
+          children: /*#__PURE__*/_jsx("div", {
+            children: /*#__PURE__*/_jsx(Draggable, {
+              ...dragProps,
+              children: /*#__PURE__*/_jsx(Paper, {
+                sx: dragType === "row" ? {
+                  transform: "rotate(90deg)"
+                } : {},
+                className: `${showTool ? "active" : ""}`,
+                style: {
+                  lineHeight: 0
                 },
-                children: /*#__PURE__*/_jsx(DragIcon, {})
+                children: /*#__PURE__*/_jsx(IconButton, {
+                  onClick: () => {
+                    onDragClick();
+                  },
+                  children: /*#__PURE__*/_jsx(DragIcon, {})
+                })
               })
             })
           })
         })
-      })
-    }), isMobile ? /*#__PURE__*/_jsx(SwipeableDrawerComponent, {
-      open: showTool,
-      onClose: onDragClose,
-      swipeableDrawer: true,
-      children: /*#__PURE__*/_jsx(Box, {
-        sx: classes.mobileToolDrawer,
-        children: /*#__PURE__*/_jsx(TableToolOnDrag, {
-          ...commonToolProps
+      }), isMobile ? /*#__PURE__*/_jsx(SwipeableDrawerComponent, {
+        open: showTool,
+        onClose: onDragClose,
+        swipeableDrawer: true,
+        children: /*#__PURE__*/_jsx(Box, {
+          sx: classes.mobileToolDrawer,
+          children: /*#__PURE__*/_jsx(TableToolOnDrag, {
+            ...commonToolProps
+          })
+        })
+      }) : /*#__PURE__*/_jsx(Popper, {
+        open: showTool,
+        anchorEl: dragElement?.current,
+        contentEditable: false,
+        sx: classes.toolPopper,
+        placement: dragType === "row" ? "bottom-start" : "right-start",
+        children: /*#__PURE__*/_jsx(ClickAwayListener, {
+          onClickAway: onDragClose,
+          children: /*#__PURE__*/_jsx("div", {
+            children: /*#__PURE__*/_jsx(TableToolOnDrag, {
+              ...commonToolProps
+            })
+          })
         })
-      })
-    }) : /*#__PURE__*/_jsx(Popover, {
-      open: showTool,
-      anchorEl: dragElement?.current,
-      transition: true,
-      contentEditable: false,
-      sx: classes.toolPopper,
-      anchorOrigin: {
-        vertical: dragType === "row" ? "bottom" : "top",
-        horizontal: dragType === "row" ? "left" : "right"
-      },
-      onClose: onDragClose,
-      children: /*#__PURE__*/_jsx(TableToolOnDrag, {
-        ...commonToolProps
-      })
-    })]
+      })]
+    }) : null
   });
 }
 export default DragButton;

package/dist/Editor/Elements/Table/Styles.js

@@ -15,8 +15,8 @@ const TableStyles = theme => ({
         backgroundColor: theme?.palette?.editor?.background
       },
       "& svg": {
-        width: "16px",
-        height: "16px",
+        width: "18px",
+        height: "18px",
         "& path": {
           stroke: theme?.palette?.editor?.textColor
         }

package/dist/Editor/Elements/Table/Table.js

@@ -112,7 +112,7 @@ const Table = props => {
     }
   };
   const handleExpand = e => {
-    setExpandTools(e.currentTarget);
+    setExpandTools(prev => prev ? false : e.currentTarget);
   };
   useEffect(() => {
     if (!selected) {
@@ -179,13 +179,14 @@ const Table = props => {
       hideRowDragBtns("", dragRowBtnCls);
     }
   };
-  const handleScrollStop = useDebouncedCallback(() => {
-    containerRef?.current?.classList.add("hideScroll");
-  }, 200);
   const handleScroll = () => {
     handleRowDragBtns();
+  };
+  const onMouseOver = () => {
     containerRef?.current?.classList.remove("hideScroll");
-    handleScrollStop();
+  };
+  const onMouseLeave = () => {
+    containerRef?.current?.classList.add("hideScroll");
   };
   const commonAddBtnProps = {
     tableRef,
@@ -211,7 +212,9 @@ const Table = props => {
       },
       ref: containerRef,
       onScroll: handleScroll,
-      className: "hideScroll",
+      onMouseOver: onMouseOver,
+      onMouseLeave: onMouseLeave,
+      className: "custom-scroll",
       children: [/*#__PURE__*/_jsx(TableComp, {
         className: readOnly ? "readOnly" : "",
         sx: {
@@ -256,7 +259,7 @@ const Table = props => {
       sx: {
         zIndex: 2000
       },
-      placement: "top",
+      placement: "bottom-start",
       children: ({
         TransitionProps
       }) => /*#__PURE__*/_jsx(Fade, {