@flozy/editor 5.4.7 → 5.4.9

package/dist/Editor/CommonEditor.js

@@ -26,7 +26,7 @@ import editorStyles from "./Styles/EditorStyles";
 import DragAndDrop from "./common/DnD";
 import Section from "./common/Section";
 import decorators from "./utils/Decorators";
-import { getBreakpointLineSpacing, getTRBLBreakPoints } from "./helper/theme";
+import { getTRBLBreakPoints } from "./helper/theme";
 import { getInitialValue, handleInsertLastElement, isFreeGrid, isFreeGridFragment, isPageSettings, outsideEditorClickLabel } from "./utils/helper";
 import useWindowResize from "./hooks/useWindowResize";
 import PopoverAIInput from "./Elements/AI/PopoverAIInput";
@@ -139,8 +139,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     pageColor,
     color: pageTextColor,
     pageWidth,
-    maxWidth: pageMaxWidth,
-    lineHeight
+    maxWidth: pageMaxWidth
   } = pageSt?.pageProps || {
     bannerSpacing: {
       left: 0,
@@ -308,13 +307,11 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     hideTools: updatedHideTools || []
   }) : [];
   const handleEditorChange = newValue => {
-    if (!readOnly) {
-      if (JSON.stringify(newValue) !== JSON.stringify(debouncedValue?.current)) {
-        updateTopBanner(newValue, setTopBanner);
-        debounced(newValue);
-        if (!isInteracted) {
-          setIsInteracted(true);
-        }
+    if (JSON.stringify(newValue) !== JSON.stringify(debouncedValue?.current)) {
+      updateTopBanner(newValue, setTopBanner);
+      debounced(newValue);
+      if (!isInteracted) {
+        setIsInteracted(true);
       }
     }
   };
@@ -333,7 +330,6 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     onDrawerOpen: onDrawerOpen,
     ICON_API: "https://assets.agenciflow.com"
   };
-  const lineH = getBreakpointLineSpacing(lineHeight, breakpoint);
   const renderElement = useCallback(props => {
     return /*#__PURE__*/_jsx(Element, {
       ...props,
@@ -536,7 +532,6 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                         padding: {
                           ...getTRBLBreakPoints(bannerSpacing)
                         },
-                        lineHeight: lineH,
                         width: !pageWidth || pageWidth === "fixed" ? fixedWidth : fullWidth,
                         height: viewport.h ? `${viewport.h}px` : `100%`,
                         alignSelf: "center",
@@ -594,9 +589,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                 setIsTextSelected: setIsTextSelected,
                 customProps: customProps,
                 editorWrapper: editorWrapper
-              }) : null, !readOnly ? /*#__PURE__*/_jsx(SwitchViewport, {
+              }) : null, !readOnly && showViewport ? /*#__PURE__*/_jsx(SwitchViewport, {
                 breakpoint: breakpoint,
-                show: showViewport,
                 onChange: b => onSwitchBreakpoint(b)
               }) : null]
             })

package/dist/Editor/Editor.css

@@ -18,10 +18,7 @@
 .ml-1 {
   margin-left: 10px;
 }
-.m-0
- {
-  margin: 0px
- }
+
 .dflex {
   display: flex;
 }
@@ -880,7 +877,7 @@ blockquote {
 .dialogComp .MuiInputBase-input {
   border-radius: 8px;
   /* box-shadow: 0px 4px 18px 0px rgba(0, 0, 0, 0.05); */
-  font-size: 12px;
+  font-size: 14px;
   font-weight: 500;
 }
 
@@ -1257,19 +1254,6 @@ 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;
 }
@@ -1285,6 +1269,20 @@ 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; 

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

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

package/dist/Editor/Elements/Color Picker/Styles.js

@@ -17,6 +17,7 @@ const ColorPickerStyles = theme => ({
     borderRadius: "7px !important",
     "& .MuiPaper-root": {
       backgroundColor: `${theme?.palette?.editor?.miniToolBarBackground} !important`,
+      background: `${theme?.palette?.editor?.miniToolBarBackground}`,
       border: `1px solid ${theme?.palette?.editor?.miniToolBarBorder} !important`,
       borderRadius: "7px !important",
       padding: "0px 5px",

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

@@ -123,7 +123,7 @@ export default function Select(props) {
             label: option?.label || option?.value,
             ...tagProps,
             sx: {
-              background: option?.color || "#F6F6F6",
+              background: option?.color || appTheme?.palette?.editor?.tv_border1,
               border: "none",
               '& .MuiChip-label': {
                 paddingLeft: '12px !important'

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

@@ -25,16 +25,23 @@ const SimpleSelect = props => {
     size: "small",
     sx: {
       color: appTheme?.palette?.editor?.tv_text,
-      fontSize: '14px',
-      marginTop: '4px',
-      padding: '3px 0px',
+      fontSize: '14px !important',
+      marginTop: '4px !important',
+      padding: '3px 0px !important',
+      background: 'transparent !important',
+      '& .MuiOutlinedInput-root': {
+        height: '34px !important',
+        background: 'transparent !important'
+      },
       '& .MuiOutlinedInput-notchedOutline': {
-        border: `1px solid ${appTheme?.palette?.editor?.inputFieldBorder}`,
-        boxShadow: '0px 4px 18px 0px #0000000D'
+        border: `1px solid ${appTheme?.palette?.editor?.inputFieldBorder} !important`,
+        boxShadow: '0px 4px 18px 0px #0000000D !important',
+        background: 'transparent !important'
       },
       "&:hover .MuiOutlinedInput-notchedOutline": {
-        border: `1px solid ${appTheme?.palette?.editor?.inputFieldBorder}`,
-        boxShadow: '0px 4px 18px 0px #0000000D'
+        border: `1px solid ${appTheme?.palette?.editor?.inputFieldBorder} !important`,
+        boxShadow: '0px 4px 18px 0px #0000000D !important',
+        background: 'transparent !important'
       }
     },
     MenuProps: {

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

@@ -55,6 +55,13 @@ const FilterSort = props => {
           className: "tv-act-ico bg br1",
           size: "small",
           onClick: onClose,
+          sx: {
+            '& svg': {
+              '& path': {
+                strokeWidth: 0
+              }
+            }
+          },
           children: /*#__PURE__*/_jsx(CloseIcon, {})
         })]
       }), renderMode()]

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

@@ -87,6 +87,7 @@ const useFilterSortStyles = (theme, appTheme) => ({
           color: appTheme?.palette?.editor?.tv_text_primary,
           // background: appTheme?.palette?.editor?.tv_input_bg,
           borderRadius: "8px",
+          maxHeight: '34px !important',
           "& svg": {
             color: appTheme?.palette?.editor?.tv_text_primary
           }
@@ -98,11 +99,15 @@ const useFilterSortStyles = (theme, appTheme) => ({
     padding: '13px 16px 16px 20px',
     "& .tv-opt-list": {
       minWidth: "230px",
+      '& .bgic': {
+        background: appTheme?.palette?.editor?.tv_ico_bg,
+        padding: '6px',
+        borderRadius: '4px'
+      },
       '& .MuiListItemIcon-root': {
         '& svg': {
-          background: appTheme?.palette?.editor?.tv_ico_bg,
-          padding: '6px',
-          borderRadius: '4px',
+          width: '14px',
+          height: '14px',
           '& path': {
             stroke: appTheme?.palette?.editor?.closeButtonSvgStroke
           }

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

@@ -2,7 +2,6 @@ import React, { useState } from "react";
 import { Box, IconButton, InputBase, Menu, MenuItem } from "@mui/material";
 import { useDataView } from "../Providers/DataViewProvider";
 import FilterSort from "./FilterSort";
-import DeleteIcon from "@mui/icons-material/Delete";
 import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
 import Icon from "../../../common/Icon";
 import { useEditorContext } from "../../../hooks/useMouseMove";

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

@@ -4,7 +4,7 @@ import { colors } from "../../../Color Picker/defaultColors";
 import Icon from "../../../../common/Icon";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const DEFAULT_COLORS = colors?.filter(f => !f.includes("linear"));
+const DEFAULT_COLORS = colors?.filter(f => !(f.includes("linear") || f === "#000000"));
 const AddOptions = props => {
   const {
     edit,
@@ -59,7 +59,7 @@ const AddOptions = props => {
     setError("");
   };
   return edit?.type === "select" || edit?.type === "multi-select" ? /*#__PURE__*/_jsxs(Box, {
-    className: "fe-tv-addopt st sb mb-0",
+    className: "fe-tv-addopt sb mb-0",
     children: [/*#__PURE__*/_jsx(List, {
       className: "fe-dv-opt-list pl-0",
       children: /*#__PURE__*/_jsxs(ListItemButton, {

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

@@ -21,6 +21,13 @@ const AddProperty = props => {
         className: "tv-act-ico bg br1",
         size: "small",
         onClick: onClose,
+        sx: {
+          '& svg': {
+            '& path': {
+              strokeWidth: 0
+            }
+          }
+        },
         children: /*#__PURE__*/_jsx(CloseIcon, {})
       })]
     }), /*#__PURE__*/_jsx(Box, {

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

@@ -1,9 +1,7 @@
 import React from "react";
-import { Box, IconButton, List, ListItemButton, ListItemText, ListItemIcon } from "@mui/material";
+import { Box, IconButton, List, ListItemButton, ListItemText, ListItemIcon, Divider } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
-import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
-import AddIcon from "@mui/icons-material/Add";
-import { TYPE_LABELS, PROPERTY_TYPES } from "./Constants";
+import { PROPERTY_TYPES, TYPE_ICONS } from "./Constants";
 import { useDataView } from "../../Providers/DataViewProvider";
 import Icon from "../../../../common/Icon";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -46,6 +44,13 @@ const AllProperties = props => {
         className: "tv-act-ico bg br1",
         size: "small",
         onClick: onClose,
+        sx: {
+          '& svg': {
+            '& path': {
+              strokeWidth: 0
+            }
+          }
+        },
         children: /*#__PURE__*/_jsx(CloseIcon, {})
       })]
     }), /*#__PURE__*/_jsx(Box, {
@@ -78,7 +83,9 @@ const AllProperties = props => {
               sx: {
                 justifyContent: "end"
               },
-              children: /*#__PURE__*/_jsx(KeyboardArrowRightIcon, {})
+              children: /*#__PURE__*/_jsx(Icon, {
+                icon: 'rightArrow'
+              })
             })]
           }, i);
         })
@@ -91,23 +98,42 @@ const AllProperties = props => {
           children: hiddenProperties?.map((m, i) => {
             return /*#__PURE__*/_jsxs(ListItemButton, {
               onClick: onEditProperty(m),
-              children: [/*#__PURE__*/_jsx(ListItemText, {
+              children: [/*#__PURE__*/_jsx(ListItemIcon, {
+                className: "needBg",
+                sx: {
+                  alignItems: "center",
+                  '& svg': {
+                    width: '14px !important',
+                    height: '14px !important'
+                  }
+                },
+                children: /*#__PURE__*/_jsx(Icon, {
+                  icon: TYPE_ICONS[m?.type]
+                })
+              }), /*#__PURE__*/_jsx(ListItemText, {
                 children: m?.label
-              }), /*#__PURE__*/_jsxs(ListItemIcon, {
+              }), /*#__PURE__*/_jsx(ListItemIcon, {
                 sx: {
-                  alignItems: "center"
+                  alignItems: "center",
+                  justifyContent: 'flex-end'
                 },
-                children: [TYPE_LABELS[m?.type], /*#__PURE__*/_jsx(KeyboardArrowRightIcon, {})]
+                children: /*#__PURE__*/_jsx(Icon, {
+                  icon: 'rightArrow'
+                })
               })]
             }, i);
           })
         })]
-      }) : null, /*#__PURE__*/_jsx(List, {
+      }) : null, /*#__PURE__*/_jsx(Divider, {
+        className: "divider_sty"
+      }), /*#__PURE__*/_jsx(List, {
         className: "fe-dv-opt-list",
         children: /*#__PURE__*/_jsxs(ListItemButton, {
           onClick: onAdd,
           children: [/*#__PURE__*/_jsx(ListItemIcon, {
-            children: /*#__PURE__*/_jsx(AddIcon, {})
+            children: /*#__PURE__*/_jsx(Icon, {
+              icon: 'plusIcon'
+            })
           }), /*#__PURE__*/_jsx(ListItemText, {
             children: "Add New Property"
           })]

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

@@ -34,6 +34,16 @@ const ChangeProperty = props => {
           className: "tv-act-ico",
           size: "small",
           onClick: onBack,
+          sx: {
+            paddingLeft: '0px',
+            '&:hover': {
+              background: 'transparent !important'
+            },
+            '& svg': {
+              width: '14px !important',
+              height: '14px !important'
+            }
+          },
           children: /*#__PURE__*/_jsx(Icon, {
             icon: 'leftArrow'
           })
@@ -42,6 +52,13 @@ const ChangeProperty = props => {
         className: "tv-act-ico bg br1",
         size: "small",
         onClick: onClose,
+        sx: {
+          '& svg': {
+            '& path': {
+              strokeWidth: 0
+            }
+          }
+        },
         children: /*#__PURE__*/_jsx(CloseIcon, {})
       })]
     }), /*#__PURE__*/_jsx(Box, {

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

@@ -24,8 +24,26 @@ const ColumnsList = props => {
           className: selected?.type === m?.type ? "active" : "",
           onClick: onSelect(m),
           children: [/*#__PURE__*/_jsx(ListItemIcon, {
-            children: /*#__PURE__*/_jsx(Icon, {
-              icon: iconType
+            sx: {
+              background: 'none'
+            },
+            children: /*#__PURE__*/_jsx(Box, {
+              className: "bgic",
+              sx: {
+                marginRight: '5px',
+                borderRadius: '4px',
+                display: 'flex',
+                alignItems: 'center',
+                padding: '2px',
+                '& svg': {
+                  width: '16px',
+                  height: '16px',
+                  padding: '0px !important'
+                }
+              },
+              children: /*#__PURE__*/_jsx(Icon, {
+                icon: iconType
+              })
             })
           }), /*#__PURE__*/_jsx(ListItemText, {
             primary: m?.label

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

@@ -5,6 +5,7 @@ import ColorButtons from "../../../Color Picker/ColorButtons";
 import ColorPickerStyles from "../../../Color Picker/Styles";
 import { DEFAULT_OPTION_COLORS } from "./Constants";
 import Icon from "../../../../common/Icon";
+import { useEditorContext } from "../../../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const EditOption = props => {
@@ -20,11 +21,14 @@ const EditOption = props => {
   const editData = useRef({
     ...edit
   });
+  const {
+    theme
+  } = useEditorContext();
   const {
     optionIndex
   } = edit;
   const selectedOption = edit?.options[optionIndex] || {};
-  const pickerStyles = ColorPickerStyles();
+  const pickerStyles = ColorPickerStyles(theme);
   useEffect(() => {
     return () => {
       // on un-mount update the option change
@@ -108,8 +112,15 @@ const EditOption = props => {
           })
         }), "Edit Option"]
       }), /*#__PURE__*/_jsx(IconButton, {
-        className: "tv-act-ico bg",
+        className: "tv-act-ico bg br1",
         size: "small",
+        sx: {
+          '& svg': {
+            '& path': {
+              strokeWidth: 0
+            }
+          }
+        },
         onClick: onClose,
         children: /*#__PURE__*/_jsx(CloseIcon, {})
       })]

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

@@ -1,11 +1,10 @@
 import React, { useEffect, useRef, useState } from "react";
-import { Box, IconButton, TextField, List, ListItemButton, ListItemText, ListItemIcon, FormControlLabel } from "@mui/material";
-import CloseIcon from "@mui/icons-material/Close";
-import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos";
+import { Box, IconButton, TextField, List, ListItemButton, ListItemText, ListItemIcon, FormControlLabel, Divider } from "@mui/material";
 import { TYPE_ICONS, TYPE_LABELS } from "./Constants";
 import AddOptions from "./AddOptions";
 import FilterProperty from "./FilterProperty";
 import Icon from "../../../../common/Icon";
+import CloseIcon from "@mui/icons-material/Close";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const EditProperty = props => {
@@ -108,12 +107,31 @@ const EditProperty = props => {
           className: "tv-act-ico",
           size: "small",
           onClick: onBack,
-          children: /*#__PURE__*/_jsx(ArrowBackIosIcon, {})
+          sx: {
+            paddingLeft: '0px',
+            '&:hover': {
+              background: 'transparent !important'
+            },
+            '& svg': {
+              width: '14px !important',
+              height: '14px !important'
+            }
+          },
+          children: /*#__PURE__*/_jsx(Icon, {
+            icon: 'leftArrow'
+          })
         }), "Edit Property"]
       }), /*#__PURE__*/_jsx(IconButton, {
         className: "tv-act-ico bg br1",
         size: "small",
         onClick: onClose,
+        sx: {
+          '& svg': {
+            '& path': {
+              strokeWidth: 0
+            }
+          }
+        },
         children: /*#__PURE__*/_jsx(CloseIcon, {})
       })]
     }), /*#__PURE__*/_jsxs(Box, {
@@ -136,6 +154,9 @@ const EditProperty = props => {
       }), /*#__PURE__*/_jsx(List, {
         className: "fe-dv-opt-list st",
         children: /*#__PURE__*/_jsxs(ListItemButton, {
+          sx: {
+            paddingBottom: '12px'
+          },
           onClick: onChangeProperty,
           children: [/*#__PURE__*/_jsx(ListItemText, {
             children: "Type"
@@ -168,6 +189,8 @@ const EditProperty = props => {
             })]
           })]
         })
+      }), /*#__PURE__*/_jsx(Divider, {
+        className: "divider_sty"
       }), /*#__PURE__*/_jsx(AddOptions, {
         edit: edit,
         onUpdate: onUpdate,

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

@@ -15,6 +15,7 @@ const FilterProperty = props => {
   } = props;
   const handleChangeOption = m => () => {
     onEvent("addSort", {
+      key: edit?.key,
       ...(sort[0] || {}),
       newKey: edit?.key,
       operator: m?.operator

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

@@ -96,7 +96,7 @@ const PropertySettings = props => {
     },
     transformOrigin: {
       vertical: "top",
-      horizontal: "left"
+      horizontal: "right"
     },
     onClose: onClose,
     anchor: "bottom",

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

@@ -68,7 +68,7 @@ const useOptionsStyles = (theme, appTheme) => ({
             },
             color: `${appTheme?.palette?.editor?.tv_text} !important`,
             "& svg": {
-              width: "16px",
+              // width: "16px",
               '& path': {
                 stroke: appTheme?.palette?.editor?.closeButtonSvgStroke
               }
@@ -154,6 +154,9 @@ const useOptionsStyles = (theme, appTheme) => ({
   addProperty: {
     padding: "12px",
     width: "253px",
+    "& .divider_sty": {
+      borderBottom: `1px solid ${appTheme?.palette?.editor?.tv_border}`
+    },
     "& .fe-dv-ap-title": {
       display: "flex",
       fontWeight: "600",

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

@@ -42,10 +42,10 @@ const useTableStyles = (theme, appTheme) => ({
       '& .MuiButton-startIcon': {
         background: appTheme?.palette?.editor?.tv_ico_bg,
         borderRadius: '4px',
-        padding: '2px',
+        padding: '4px',
         "& svg": {
-          width: '16px',
-          height: '16px'
+          width: '14px',
+          height: '14px'
         }
       },
       "&.ico": {
@@ -57,11 +57,11 @@ const useTableStyles = (theme, appTheme) => ({
         }
       },
       "&:hover": {
-        color: "rgba(37, 99, 235, 1)",
+        color: appTheme?.palette?.editor?.tv_hover_text,
         "& svg": {
-          color: "rgba(37, 99, 235, 1)",
+          color: appTheme?.palette?.editor?.tv_hover_text,
           '& path': {
-            stroke: "rgba(37, 99, 235, 1)"
+            stroke: appTheme?.palette?.editor?.tv_hover_text
           }
         }
       }

package/dist/Editor/Elements/DataView/Utils/multiSortRows.js

@@ -32,7 +32,7 @@ const multiSortRows = (rows, criteria, columnConfig) => {
       key,
       operator
     } of criteria) {
-      const column = columnConfig.find(col => col.key === key);
+      const column = columnConfig?.find(col => col.key === key);
       if (!column) continue;
       const dataType = column.type;
       const valueA = a[key];
@@ -40,7 +40,7 @@ const multiSortRows = (rows, criteria, columnConfig) => {
       let comparison = 0;
       switch (dataType) {
         case "text":
-          comparison = valueA.localeCompare(valueB, undefined, {
+          comparison = valueA?.localeCompare(valueB, undefined, {
             sensitivity: "base"
           });
           break;
@@ -49,8 +49,9 @@ const multiSortRows = (rows, criteria, columnConfig) => {
           break;
         case "select":
         case "multi-select":
-          if (Array.isArray(valueA) && Array.isArray(valueB)) {
-            comparison = Array.isArray(valueA) ? valueA?.map(m => m?.value).join(", ").localeCompare(valueB?.map(m => m?.value).join(", "), undefined, {
+        case "person":
+          if (Array?.isArray(valueA) && Array?.isArray(valueB)) {
+            comparison = Array?.isArray(valueA) ? valueA?.map(m => m?.value)?.join(", ")?.localeCompare(valueB?.map(m => m?.value).join(", "), undefined, {
               sensitivity: "base"
             }) : 0;
           }
@@ -59,7 +60,20 @@ const multiSortRows = (rows, criteria, columnConfig) => {
           comparison = sortByDate(valueA, valueB);
           break;
         case "check":
-          return valueA && operator === "desc" ? 1 : -1;
+          if (operator === "desc") {
+            if (valueA) {
+              return 1;
+            } else {
+              return -1;
+            }
+          } else {
+            if (valueA) {
+              return -1;
+            } else {
+              return 1;
+            }
+          }
+        // return valueA && operator === "desc" ? 1 : valueB && operator === "asc" ;
         default:
           break;
       }

package/dist/Editor/Elements/Form/Form.js

@@ -402,7 +402,6 @@ const Form = props => {
         borderStyle: borderStyle || "solid",
         background: bgColor || "transparent",
         position: "relative",
-        lineHeight: 1.43,
         ...formSX
       },
       ref: formEle,