@flozy/editor 9.7.9 → 9.8.1

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

@@ -1,12 +1,23 @@
-import React, { useEffect, useState } from "react";
-import { Autocomplete, Box, Chip, Divider, Popover, TextField, Typography, List, ListItem, ListItemButton, IconButton, SwipeableDrawer, Tooltip } from "@mui/material";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import Autocomplete from "@mui/material/Autocomplete";
+import Box from "@mui/material/Box";
+import Chip from "@mui/material/Chip";
+import Divider from "@mui/material/Divider";
+import Popover from "@mui/material/Popover";
+import TextField from "@mui/material/TextField";
+import Typography from "@mui/material/Typography";
+import List from "@mui/material/List";
+import ListItem from "@mui/material/ListItem";
+import ListItemButton from "@mui/material/ListItemButton";
+import IconButton from "@mui/material/IconButton";
+import SwipeableDrawer from "@mui/material/SwipeableDrawer";
+import Tooltip from "@mui/material/Tooltip";
 import { CloseIcon } from "../../../../../common/iconslist";
 import { useEditorContext } from "../../../../../hooks/useMouseMove";
 import Icon from "../../../../../common/Icon";
 import { colors } from "../../../../Color Picker/defaultColors";
 import PropertySettings from "../../Options";
 import SnackbarAlert from "../../../../../common/SnackBar";
-import ClearAllRounded from "../../../../../assets/svg/ClearAllRounded";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const EXCLUDED_COLORS = new Set(["#000000", "#0F172A", "#2563EB", "#FFFFFF", "#64748B"]);
@@ -38,7 +49,7 @@ const MultiSelectWithPopover = props => {
   } = useEditorContext();
   const isMobile = window.matchMedia("(max-width: 899px)")?.matches || false;
   const PopoverComponent = isMobile ? SwipeableDrawer : Popover;
-  const mode = {
+  const mode = useMemo(() => ({
     type: "editOptionMulti",
     edit: {
       label: "Multi Select",
@@ -49,7 +60,7 @@ const MultiSelectWithPopover = props => {
       optionIndex: currentIndex,
       hideBackButton: true
     }
-  };
+  }), [options, property, currentIndex]);
   const customScrollStyles = {
     scrollbarWidth: "thin",
     scrollbarColor: `${theme?.palette?.editor?.brainPopupScroll} transparent`,
@@ -65,21 +76,21 @@ const MultiSelectWithPopover = props => {
     }
   };
   useEffect(() => {
-    if (inputValue?.trim()) {
-      setChipColor(prevColor => prevColor || generateRandomColor());
-    } else {
+    if (inputValue?.trim() && !chipColor) {
       setChipColor(generateRandomColor());
     }
-  }, [inputValue]);
+  }, [inputValue, chipColor]);
   useEffect(() => {
-    setAvailableOptions(options);
-  }, [options]);
-  const handleOpenPopover = event => {
+    if (JSON.stringify(options) !== JSON.stringify(availableOptions)) {
+      setAvailableOptions(options);
+    }
+  }, [options, availableOptions]);
+  const handleOpenPopover = useCallback(event => {
     setAnchorEl(event.currentTarget);
-  };
-  const handleClosePopover = () => {
+  }, []);
+  const handleClosePopover = useCallback(() => {
     setAnchorEl(null);
-  };
+  }, []);
   const handleAddOption = newValue => {
     const trimmedValue = newValue?.trim();
     if (!trimmedValue) return;
@@ -93,6 +104,7 @@ const MultiSelectWithPopover = props => {
       onUpdate([newOption, ...availableOptions]);
     }
     setInputValue("");
+    setChipColor("");
   };
   const onClose = () => {
     setAnchorEl(anchorElOption);
@@ -115,8 +127,9 @@ const MultiSelectWithPopover = props => {
   };
   const handleSelectOption = option => {
     if (!selectedOptions?.some(opt => opt?.value === option?.value)) {
-      setSelectedOptions(prev => [...prev, option]);
-      onChange(selectedOptions);
+      const updatedOptions = [...selectedOptions, option];
+      setSelectedOptions(updatedOptions);
+      onChange(updatedOptions);
     } else {
       setShowSnackBar(true);
     }
@@ -200,7 +213,6 @@ const MultiSelectWithPopover = props => {
               overflowX: "hidden",
               pr: '12px',
               pl: '12px',
-              maxWidth: isMobile ? "100%" : "275px",
               marginTop: '12px',
               ...customScrollStyles
             }
@@ -266,7 +278,9 @@ const MultiSelectWithPopover = props => {
                       backgroundColor: 'transparent'
                     }
                   },
-                  children: /*#__PURE__*/_jsx(ClearAllRounded, {})
+                  children: /*#__PURE__*/_jsx(Icon, {
+                    icon: "resetIconNew"
+                  })
                 })
               })
             },
@@ -285,7 +299,7 @@ const MultiSelectWithPopover = props => {
               index
             }),
             onDelete: event => {
-              event.stopPropagation();
+              event?.stopPropagation();
               setSelectedOptions(prev => prev.filter(selected => selected?.value !== option?.value));
             },
             deleteIcon: /*#__PURE__*/_jsx(CloseIcon, {}),
@@ -330,10 +344,15 @@ const MultiSelectWithPopover = props => {
               },
               children: "Choose an option or create one"
             }), filteredOptions?.map((option, index) => /*#__PURE__*/_jsx(ListItem, {
+              sx: {
+                padding: 0
+              },
               disablePadding: true,
               children: /*#__PURE__*/_jsxs(ListItemButton, {
                 onClick: () => handleSelectOption(option),
                 sx: {
+                  paddingTop: "4px",
+                  paddingBottom: "4px",
                   justifyContent: 'space-between',
                   '&:hover': {
                     '& path': {

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

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useMemo, useState } from "react";
 import { Transforms, Node, Path } from "slate";
 import { useSlateStatic } from "slate-react";
 import { ReactEditor } from "slate-react";
@@ -250,6 +250,22 @@ const FreeGridItem = props => {
     }
   };
   const itemTypeOptions = (itemOptions[childType] || itemOptions?.default).filter(f => (hideTools || []).indexOf(f) === -1);
+  const variableStyle = useMemo(() => {
+    const {
+      width,
+      height
+    } = element || {};
+    let widthVar = width_xs;
+    let heightVar = height_xs;
+    if (element?.childType === "image") {
+      widthVar = width_xs || width;
+      heightVar = height_xs || height;
+    }
+    return {
+      "--width_xs": widthVar ? `${widthVar}px` : "auto",
+      "--height_xs": heightVar ? `${heightVar}px` : "auto"
+    };
+  }, [element]);
   return /*#__PURE__*/_jsx(RnD, {
     id: `freegrid_item_${path.join("|")}_${updated_at}_${breakpoint}`,
     className: `freegrid-item path-${path.length} breakpoint-${breakpoint}`,
@@ -270,9 +286,8 @@ const FreeGridItem = props => {
       "--width": `${width}px`,
       "--height": `${height}px`,
       "--zIndex": 100 + arrangeIndex,
-      "--height_xs": height_xs ? `${height_xs}px` : "auto",
-      "--width_xs": width_xs ? `${width_xs}px` : "auto",
-      "--marginTop_xs": marginTop_xs ? `${marginTop_xs}px` : "0px"
+      "--marginTop_xs": marginTop_xs ? `${marginTop_xs}px` : "0px",
+      ...variableStyle
       // "--gridArea_xs": gridArea_xs ? gridArea_xs : "unset",
     },
 

package/dist/Editor/assets/svg/ResetIconNew.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const ResetIconNew = () => {
+  return /*#__PURE__*/_jsxs("svg", {
+    width: "17",
+    height: "17",
+    viewBox: "0 0 17 17",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/*#__PURE__*/_jsx("circle", {
+      cx: "8.10105",
+      cy: "8.10234",
+      r: "8",
+      transform: "rotate(-89.2717 8.10105 8.10234)",
+      fill: "#2563EB",
+      fillOpacity: "0.16"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M12.7169 8.22222V8.22222C12.7168 8.2323 12.7289 8.23752 12.7361 8.2305L13.3823 7.6035C13.6597 7.33434 14.0843 7.33974 14.3547 7.61586C14.6252 7.89199 14.6198 8.31458 14.3424 8.58375L12.6992 10.1595C12.3035 10.5389 11.6762 10.5291 11.2926 10.1375L9.71318 8.5249C9.57796 8.38683 9.51173 8.20874 9.51381 8.04516C9.51606 7.86794 9.58679 7.69159 9.72531 7.57064C10.0027 7.30148 10.4273 7.30688 10.6977 7.583L11.3182 8.21649C11.3288 8.22729 11.3471 8.21993 11.3473 8.20481V8.20481C11.374 6.10545 9.67017 4.36586 7.56099 4.33905C5.45182 4.31224 3.70429 6.00795 3.6776 8.10731C3.65091 10.2067 5.35477 11.9463 7.46394 11.9731C7.84743 11.9779 8.14493 12.2817 8.14007 12.6634C8.13522 13.0451 7.8301 13.3412 7.44661 13.3363C4.57046 13.2997 2.27161 10.9527 2.30801 8.0899C2.3444 5.22714 4.70217 2.93927 7.57832 2.97583C10.4408 3.01222 12.7533 5.35946 12.7169 8.22222Z",
+      fill: "#2563EB"
+    })]
+  });
+};
+export default ResetIconNew;

package/dist/Editor/common/Icon.js

@@ -45,6 +45,7 @@ import TrashIcon from "../assets/svg/TrashCanIcon";
 import DataTableIcon from "../assets/svg/DataTableIcon";
 import ChervDown from "../assets/svg/ChervDown";
 import ChervUp from "../assets/svg/ChervUp";
+import ResetIconNew from "../assets/svg/ResetIconNew";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const HeadingIcon = ({
@@ -357,7 +358,8 @@ const iconList = {
       stroke: "#64748B",
       color: "#64748B"
     }
-  })
+  }),
+  resetIconNew: /*#__PURE__*/_jsx(ResetIconNew, {})
 };
 export const icons = {
   ...iconList

package/dist/Editor/common/RnD/VirtualElement/helper.js

@@ -345,6 +345,12 @@ export const sortElements = (items, container) => {
       return aRow - bRow; // Sort by start row first
     }
 
+    // Compare marginTopXs
+    const aMarginTop = parseFloat(a.dataset.marginTopXs) || 0;
+    const bMarginTop = parseFloat(b.dataset.marginTopXs) || 0;
+    if (aMarginTop !== bMarginTop) {
+      return aMarginTop - bMarginTop;
+    }
     const aLeft = parseFloat(a.dataset.leftXs) || 0;
     const bLeft = parseFloat(b.dataset.leftXs) || 0;
     return aLeft - bLeft;

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

@@ -30,6 +30,10 @@ const useVirtualElementStyles = () => ({
       "&.type_text": {
         height: "auto !important"
       },
+      "&.type_image": {
+        width: "calc(--width_xs) !important",
+        height: "var(--height_xs) !important"
+      },
       // "&.type_box": {
       //   // display: "grid !important",
       //   // gridTemplateRows: "repeat(auto-fill, 50px) !important",

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

@@ -19,7 +19,7 @@ import { removeSign } from "./ElementSettings/OtherSettings";
 import useDragging from "../../hooks/useDragging";
 import { dragOverOn } from "../../helper/RnD/focusNode";
 import { focusSelection, clearSelection, clearSelectionOnly } from "../../helper";
-import { reRenderChildNodes } from "./Utils/gridDropItem";
+// import { reRenderChildNodes } from "./Utils/gridDropItem";
 import VirtualTextElement from "./VirtualElement/VirtualTextElement";
 import useAutoScroll from "../../hooks/useAutoScroll";
 import ForceAutoAlignment from "./VirtualElement/ForceAutoAlignment";
@@ -485,12 +485,17 @@ const RnD = props => {
       ...updatedSize
     });
     handleResizeEvent("stop");
-    const parentPath = getParentSectionPath({
-      ref
-    }, ".freegrid-container-parent");
-    const formatParentPath = parentPath?.split("|")?.map(m => parseInt(m));
-    reRenderChildNodes(editor, formatParentPath);
+
+    // const parentPath = getParentSectionPath(
+    //   { ref },
+    //   ".freegrid-container-parent"
+    // );
+
+    // const formatParentPath = parentPath?.split("|")?.map((m) => parseInt(m));
+
+    // reRenderChildNodes(editor, formatParentPath);
   };
+
   const onCloseSettings = () => {
     setSelectedElement({
       ...selectedElementProps,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "9.7.9",
+  "version": "9.8.1",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"
@@ -38,7 +38,6 @@
     "react-icons": "^4.10.1",
     "react-katex": "^3.0.1",
     "react-rnd": "^10.4.11",
-    "react-scripts": "5.0.1",
     "react-signature-canvas": "^1.0.6",
     "react-slick": "^0.29.0",
     "sanitize-html": "^2.13.0",
@@ -122,7 +121,8 @@
     "prop-types": "^15.8.1",
     "source-map-explorer": "^2.5.3",
     "storybook": "^7.4.0",
-    "webpack": "^5.88.2"
+    "webpack": "^5.88.2",
+    "react-scripts": "5.0.1"
   },
   "overrides": {
     "react-refresh": "0.11.0"