@flozy/editor 5.0.7 → 5.0.8

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

@@ -1,7 +1,9 @@
 import React from "react";
 import TextField from "@mui/material/TextField";
 import Autocomplete from "@mui/material/Autocomplete";
-import { Box, Chip } from "@mui/material";
+import { Box, Chip, useTheme } from "@mui/material";
+import { useEditorContext } from "../../../../../hooks/useMouseMove";
+import useCompStyles from "./styles";
 import { jsx as _jsx } from "react/jsx-runtime";
 const filter = (opt, params, selectedOpt) => {
   const selectedVals = selectedOpt?.map(m => m?.value);
@@ -12,6 +14,11 @@ const filter = (opt, params, selectedOpt) => {
   return fv;
 };
 export default function Select(props) {
+  const theme = useTheme();
+  const {
+    theme: appTheme
+  } = useEditorContext();
+  const classes = useCompStyles(theme, appTheme);
   const {
     value,
     onChange,
@@ -123,6 +130,11 @@ export default function Select(props) {
         ...params,
         placeholder: placeholder
       });
+    },
+    slotProps: {
+      paper: {
+        sx: classes.autocomplete
+      }
     }
   });
 }

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

@@ -1,22 +1,37 @@
 import React from "react";
-import { MenuItem, Select } from "@mui/material";
+import { MenuItem, Select, useTheme } from "@mui/material";
+import { useEditorContext } from "../../../../../hooks/useMouseMove";
+import useCompStyles from "./styles";
 import { jsx as _jsx } from "react/jsx-runtime";
 const SimpleSelect = props => {
+  const theme = useTheme();
+  const {
+    theme: appTheme
+  } = useEditorContext();
+  const classes = useCompStyles(theme, appTheme);
   const {
     value,
     options,
     handleChange,
     disabled = false
   } = props;
+  console.log(classes);
   return /*#__PURE__*/_jsx(Select, {
     disabled: disabled,
     value: value,
     onChange: handleChange,
     fullWidth: true,
     size: "small",
+    MenuProps: {
+      PaperProps: {
+        sx: classes.simpleselect,
+        className: "tv-cf-opt-wrpr"
+      }
+    },
     children: options?.map((m, i) => {
       return /*#__PURE__*/_jsx(MenuItem, {
         value: m.key,
+        className: "tv-cf-opt-wrpr",
         children: m.label
       }, i);
     })

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

@@ -0,0 +1,59 @@
+const useCompStyles = (theme, appTheme) => ({
+  simpleselect: {
+    border: `1px solid ${appTheme?.palette?.editor?.tv_border}`,
+    background: appTheme?.palette?.editor?.tv_pop_bg,
+    color: appTheme?.palette?.editor?.tv_text_primary,
+    borderRadius: "8px",
+    [theme.breakpoints.between("xs", "md")]: {},
+    "& ul": {
+      padding: "4px",
+      "& li": {
+        padding: "4px 6px",
+        borderRadius: "8px",
+        color: appTheme?.palette?.editor?.tv_text_primary,
+        fontSize: "14px",
+        marginTop: "4px",
+        "&.Mui-selected": {
+          background: appTheme?.palette?.editor?.tv_hover_bg,
+          color: appTheme?.palette?.editor?.tv_hover_text,
+          "&:hover": {
+            background: appTheme?.palette?.editor?.tv_hover_bg,
+            color: appTheme?.palette?.editor?.tv_hover_text
+          }
+        },
+        "&:hover": {
+          background: appTheme?.palette?.editor?.tv_hover_bg,
+          color: appTheme?.palette?.editor?.tv_hover_text
+        }
+      }
+    }
+  },
+  autocomplete: {
+    border: `1px solid ${appTheme?.palette?.editor?.tv_border}`,
+    background: appTheme?.palette?.editor?.tv_pop_bg,
+    color: appTheme?.palette?.editor?.tv_text_primary,
+    borderRadius: "8px",
+    "& ul": {
+      padding: "4px",
+      "& .MuiAutocomplete-option": {
+        padding: "4px 6px",
+        borderRadius: "8px",
+        color: appTheme?.palette?.editor?.tv_text_primary,
+        fontSize: "14px",
+        "&.Mui-selected": {
+          background: appTheme?.palette?.editor?.tv_hover_bg,
+          color: appTheme?.palette?.editor?.tv_hover_text,
+          "&:hover": {
+            background: appTheme?.palette?.editor?.tv_hover_bg,
+            color: appTheme?.palette?.editor?.tv_hover_text
+          }
+        },
+        "&:hover": {
+          background: appTheme?.palette?.editor?.tv_hover_bg,
+          color: appTheme?.palette?.editor?.tv_hover_text
+        }
+      }
+    }
+  }
+});
+export default useCompStyles;

package/dist/Editor/Elements/DataView/Layouts/FilterSort/SortOptions/ChooseField.js

@@ -18,6 +18,7 @@ const ChooseField = props => {
       width: "120px",
       mr: 1
     },
+    className: "tv-cf",
     children: /*#__PURE__*/_jsx(SimpleSelect, {
       value: sort?.key,
       options: properties,

package/dist/Editor/Elements/DataView/Layouts/FilterSort/SortOptions/ChooseSort.js

@@ -27,6 +27,7 @@ const ChooseSort = props => {
     sx: {
       width: "120px"
     },
+    className: "tv-cf",
     children: /*#__PURE__*/_jsx(SimpleSelect, {
       value: sort?.operator,
       options: SORT_OPTIONS,

package/dist/Editor/Elements/DataView/Layouts/FilterSort/index.js

@@ -3,9 +3,13 @@ import { Box, Popover, SwipeableDrawer, IconButton, useTheme } from "@mui/materi
 import CloseIcon from "@mui/icons-material/Close";
 import useFilterSortStyles from "./styles";
 import SortOptions from "./SortOptions";
+import { useEditorContext } from "../../../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const FilterSort = props => {
+  const {
+    theme: appTheme
+  } = useEditorContext();
   const theme = useTheme();
   const {
     open,
@@ -13,7 +17,7 @@ const FilterSort = props => {
     anchorEl,
     onClose
   } = props;
-  const classes = useFilterSortStyles(theme);
+  const classes = useFilterSortStyles(theme, appTheme);
   const isMobile = window.matchMedia("(max-width: 899px)")?.matches || false;
   const PoperComponent = isMobile ? SwipeableDrawer : Popover;
   const renderMode = () => {
@@ -48,6 +52,7 @@ const FilterSort = props => {
         children: [/*#__PURE__*/_jsx("span", {
           children: "Sort By"
         }), /*#__PURE__*/_jsx(IconButton, {
+          className: "tv-act-ico bg",
           size: "small",
           onClick: onClose,
           children: /*#__PURE__*/_jsx(CloseIcon, {})

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

@@ -1,41 +1,81 @@
-const useFilterSortStyles = theme => ({
+const useFilterSortStyles = (theme, appTheme) => ({
   root: {
     "& .MuiPaper-root": {
       boxShadow: "0px 4px 10px 0px rgba(0, 0, 0, 0.16)",
-      border: "1px solid rgba(228, 232, 235, 1)",
+      border: `1px solid ${appTheme?.palette?.editor?.tv_border}`,
+      background: appTheme?.palette?.editor?.tv_pop_bg,
+      color: appTheme?.palette?.editor?.tv_text_primary,
       borderRadius: "12px",
       [theme.breakpoints.between("xs", "md")]: {
         borderRadius: "16px 16px 0px 0px",
         maxHeight: "50%"
       },
+      "& .MuiSelect-select": {
+        padding: "4px 8px"
+      },
+      "& .ml": {
+        marginLeft: "8px"
+      },
+      "& .tv-act-ico": {
+        color: appTheme?.palette?.editor?.tv_text,
+        "&.br1": {
+          borderRadius: "6px"
+        },
+        "&.bg": {
+          background: appTheme?.palette?.editor?.tv_ico_bg,
+          "&:hover": {
+            background: "rgba(100, 116, 139, 0.12)"
+          }
+        },
+        "& svg": {
+          width: "16px",
+          height: "16px"
+        }
+      },
       "& .MuiList-root": {
         padding: "4px 2px",
-        "& .MuiListItem-root": {
-          padding: "8px"
-        },
         "& .MuiListItemButton-root": {
-          color: "rgba(15, 23, 42, 1)",
+          color: appTheme?.palette?.editor?.tv_text_primary,
           padding: "2px 4px",
+          borderRadius: "8px",
           "& .MuiListItemIcon-root": {
-            minWidth: "38px"
+            minWidth: "38px",
+            "&.needBg": {
+              minWidth: "20px",
+              width: "20px",
+              height: "20px",
+              alignItems: "center",
+              justifyContent: "center",
+              borderRadius: "4px",
+              marginRight: "12px",
+              background: appTheme?.palette?.editor?.tv_ico_bg
+            },
+            color: appTheme?.palette?.editor?.tv_text_primary,
+            "& svg": {
+              width: "16px"
+            }
           },
           "& .MuiTypography-root": {
             fontSize: "14px"
+          },
+          "&:hover": {
+            background: appTheme?.palette?.editor?.tv_hover_bg,
+            color: appTheme?.palette?.editor?.tv_hover_text,
+            "& .MuiListItemIcon-root": {
+              color: appTheme?.palette?.editor?.tv_hover_text
+            }
           }
-        },
-        "& .MuiButtonBase-root": {
-          padding: "4px",
+        }
+      },
+      "& .tv-cf": {
+        "& .MuiInputBase-root": {
+          color: appTheme?.palette?.editor?.tv_text_primary,
+          background: appTheme?.palette?.editor?.tv_ico_bg,
+          borderRadius: "8px",
           "& svg": {
-            // width: "16px",
-            // height: "16px",
+            color: appTheme?.palette?.editor?.tv_text_primary
           }
         }
-      },
-      "& .MuiSelect-select": {
-        padding: "4px 8px"
-      },
-      "& .ml": {
-        marginLeft: "8px"
       }
     }
   },
@@ -54,7 +94,7 @@ const useFilterSortStyles = theme => ({
       justifyContent: "space-between",
       fontSize: "14px",
       alignItems: "center",
-      borderBottom: "1px solid rgba(220, 228, 236, 1)",
+      borderBottom: `1px solid ${appTheme?.palette?.editor?.tv_border}`,
       marginBottom: "0px",
       "& span": {
         display: "flex",

package/dist/Editor/Elements/DataView/Layouts/Options/EditOption.js

@@ -101,11 +101,13 @@ const EditOption = props => {
       className: "fe-dv-ap-title",
       children: [/*#__PURE__*/_jsxs("span", {
         children: [/*#__PURE__*/_jsx(IconButton, {
+          className: "tv-act-ico",
           size: "small",
           onClick: onBack,
           children: /*#__PURE__*/_jsx(ArrowBackIcon, {})
         }), "Edit Option"]
       }), /*#__PURE__*/_jsx(IconButton, {
+        className: "tv-act-ico bg",
         size: "small",
         onClick: onClose,
         children: /*#__PURE__*/_jsx(CloseIcon, {})

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

@@ -122,6 +122,9 @@ const useOptionsStyles = (theme, appTheme) => ({
       "& .MuiInputBase-input": {
         height: "32px",
         padding: "4px 8px"
+      },
+      "& .more-btn-cbs": {
+        color: appTheme?.palette?.editor?.tv_text_primary
       }
     }
   },

package/dist/Editor/Elements/DataView/Layouts/TableStyles.js

@@ -2,7 +2,8 @@ const useTableStyles = (theme, appTheme) => ({
   root: {
     border: `1px solid ${appTheme?.palette?.editor?.tv_border}`,
     borderRadius: "7px 7px 0px 0px",
-    overflowX: "auto"
+    overflowX: "auto",
+    [theme.breakpoints.between("xs", "md")]: {}
   },
   table: {
     borderCollapse: "separate",
@@ -80,6 +81,11 @@ const useTableStyles = (theme, appTheme) => ({
               }
             }
           }
+        },
+        "& .MuiAutocomplete-clearIndicator": {
+          "& svg": {
+            color: appTheme?.palette?.editor?.tv_text
+          }
         }
       }
     },

package/dist/Editor/Elements/DataView/Layouts/TableView.js

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import { Box, Button, useTheme } from "@mui/material";
 import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
 import { useDataView } from "../Providers/DataViewProvider";
 import PropertySettings from "./Options";
 import { PROPERTY_TYPES } from "./Options/Constants";
@@ -40,7 +41,8 @@ const TableView = props => {
     onAddProperty,
     onUpdateProperty,
     onUpdateSort,
-    sort
+    sort,
+    onAddRow
   } = useDataView();
   const [sortBy] = sort || [];
   const [anchorEl, setAnchorEl] = useState(null);
@@ -201,7 +203,18 @@ const TableView = props => {
           })
         }), children]
       })
-    }), open && !readOnly ? /*#__PURE__*/_jsx(PropertySettings, {
+    }), !readOnly ? /*#__PURE__*/_jsx(Button, {
+      contentEditable: false,
+      className: "tv-act-btn la",
+      fullWidth: true,
+      onClick: onAddRow,
+      sx: {
+        textTransform: "none",
+        justifyContent: "start"
+      },
+      startIcon: /*#__PURE__*/_jsx(AddCircleOutlineIcon, {}),
+      children: "Add new row"
+    }) : null, open && !readOnly ? /*#__PURE__*/_jsx(PropertySettings, {
       open: open,
       anchorEl: anchorEl,
       mode: mode,

package/dist/Editor/Elements/DataView/Layouts/ViewData.js

@@ -5,7 +5,6 @@ import { useDataView } from "../Providers/DataViewProvider";
 import ColumnView from "./ColumnView";
 // import Formula from "./Formula";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 const RenderRow = props => {
   const {
     rowIndex,
@@ -39,7 +38,6 @@ const ViewData = props => {
   const {
     properties,
     rows,
-    onAddRow,
     selectedRows,
     setSelectedRows
   } = useDataView();
@@ -50,10 +48,10 @@ const ViewData = props => {
       setSelectedRows([...selectedRows?.filter(f => f !== id)]);
     }
   };
-  return /*#__PURE__*/_jsxs(Box, {
+  return /*#__PURE__*/_jsx(Box, {
     component: "tbody",
     ...attributes,
-    children: [rows?.map((row, i) => {
+    children: rows?.map((row, i) => {
       return /*#__PURE__*/_jsx(Box, {
         component: "tr",
         className: "tv-act-row",
@@ -66,18 +64,7 @@ const ViewData = props => {
           readOnly: readOnly
         })
       }, i);
-    }), !readOnly ? /*#__PURE__*/_jsx("tr", {
-      children: /*#__PURE__*/_jsx("td", {
-        colSpan: properties?.length + 2,
-        children: /*#__PURE__*/_jsx(Button, {
-          className: "tv-act-btn la",
-          fullWidth: true,
-          onClick: onAddRow,
-          startIcon: /*#__PURE__*/_jsx(AddCircleOutlineIcon, {}),
-          children: "Add new row"
-        })
-      })
-    }) : null]
+    })
   });
 };
 export default ViewData;

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

@@ -44,6 +44,16 @@ const useDataViewStyles = (theme, appTheme) => ({
         opacity: 0,
         "&.active": {
           opacity: 1
+        },
+        "& .tv-ck-box": {
+          "& svg": {
+            color: appTheme?.palette?.editor?.tv_border
+          },
+          "&.Mui-checked": {
+            "& svg": {
+              color: "rgba(37, 99, 235, 1)"
+            }
+          }
         }
       },
       "&:hover": {

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

@@ -275,7 +275,8 @@ const GridItem = props => {
     ...attributes,
     style: {
       textAlign: element.alignment || "left",
-      "--minWidth": minWidthInPercent
+      "--minWidth": lastChild ? "auto" : minWidthInPercent,
+      flexGrow: lastChild ? 1 : "auto"
     },
     sx: {
       ...getBRProps,

package/dist/Editor/Elements/Grid/Providers/GridProvider.js

@@ -24,16 +24,6 @@ const getAdjacentColumnPath = (editor, currentPath, direction = "next") => {
   }; // Return the adjacent column's path
 };
 
-const isSingleColumn = (editor, currentPath) => {
-  try {
-    const parentPath = Path.parent(currentPath); // Get the parent grid path
-    const gridNode = Node.get(editor, parentPath);
-    return gridNode?.children?.length === 1;
-  } catch (err) {
-    console.log(err);
-    return false;
-  }
-};
 export const getChildCount = (editor, currentPath) => {
   try {
     const parentPath = Path.parent(currentPath); // Get the parent grid path
@@ -57,20 +47,23 @@ export const GridProvider = ({
         parentPath,
         rightColPath
       } = getAdjacentColumnPath(editor, currentColPath);
+      let isRightLast = false;
       if (rightColPath) {
         const parentPath = Path.parent(rightColPath); // Get the parent grid path
         const gridNode = Node.get(editor, parentPath);
         const gridNodeDom = ReactEditor.toDOMNode(editor, gridNode);
         const rightColNode = Node.get(editor, rightColPath);
         const rightColDom = ReactEditor.toDOMNode(editor, rightColNode);
-        right = rightColNode?.minWidth || rightColDom?.offsetWidth / gridNodeDom?.offsetWidth * 100;
+        right = rightColDom?.offsetWidth / gridNodeDom?.offsetWidth * 100;
+        isRightLast = [...rightColPath].pop() === gridNode?.children?.length - 1;
       }
       setColumnWidths({
         left: currentMinWidth,
         right,
         rightPath: rightColPath?.join(),
         rightIndex: rightColPath,
-        parentPath: parentPath
+        parentPath: parentPath,
+        isRightLast: isRightLast
       });
     } catch (err) {
       console.log(err);
@@ -85,12 +78,7 @@ export const GridProvider = ({
     // logic to update right column width
     const right = columnWidths?.right - (data?.left - columnWidths?.left);
     const diff = right !== widths?.right;
-    if (isSingleColumn(editor, currentColPath) && data?.left <= 100) {
-      setWidths({
-        ...data,
-        right: right
-      });
-    } else if (right && right > 10 && data?.left > 10 && diff) {
+    if (right && right > 10 && data?.left > 10 && diff) {
       setWidths({
         ...data,
         right: right

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

@@ -77,16 +77,16 @@ const SearchAndDocList = ({
             children: /*#__PURE__*/_jsx(SearchIcon, {})
           }),
           sx: {
-            color: theme?.palette?.text?.textColor,
+            color: theme?.palette?.editor?.textColor,
             fontSize: '14px'
           }
         },
         sx: {
           borderRadius: "8px",
           fontSize: '14px',
-          color: theme?.palette?.text?.textColor,
+          color: theme?.palette?.editor?.textColor,
           "& .MuiOutlinedInput-root": {
-            color: `${theme?.palette?.text?.textColor} !important`,
+            color: `${theme?.palette?.editor?.textColor} !important`,
             boxShadow: theme?.palette?.shadows?.shadow12,
             backgroundColor: theme?.palette?.editor?.inputFieldBgColor,
             fontSize: '14px',
@@ -96,21 +96,21 @@ const SearchAndDocList = ({
               borderColor: theme?.palette?.primary?.slashBrainBorder
             },
             "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
-              color: theme?.palette?.text?.textColor,
+              color: theme?.palette?.editor?.textColor,
               borderRadius: "8px",
               border: `1px solid ${theme?.palette?.primary?.slashBrainBorder}`,
               borderColor: `${theme?.palette?.primary?.slashBrainBorder} !important`
             }
           },
           '& .MuiOutlinedInput-notchedOutline': {
-            color: theme?.palette?.text?.textColor,
+            color: theme?.palette?.editor?.textColor,
             borderRadius: "8px",
             border: `1px solid ${theme?.palette?.primary?.slashBrainBorder}`,
             borderColor: theme?.palette?.primary?.slashBrainBorder,
             fontSize: '14px'
           },
           '& .MuiInputBase-root': {
-            color: theme?.palette?.text?.textColor,
+            color: theme?.palette?.editor?.textColor,
             borderRadius: '8px',
             fontSize: '14px'
           },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "5.0.7",
+  "version": "5.0.8",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"