@flozy/editor 10.3.8 → 10.4.0

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

@@ -1,454 +0,0 @@
-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 { 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"]);
-const DEFAULT_COLORS = colors?.filter(f => !f?.includes("linear") && !EXCLUDED_COLORS?.has(f));
-const generateRandomColor = () => {
-  const randomIndex = Math.floor(Math.random() * DEFAULT_COLORS?.length);
-  return DEFAULT_COLORS[randomIndex];
-};
-const MultiSelectWithPopover = props => {
-  const {
-    options = [],
-    value,
-    onChange,
-    onUpdate,
-    property,
-    wrapColumn = false,
-    translation
-  } = props;
-  const [anchorEl, setAnchorEl] = useState(null);
-  const [anchorElOption, setAnchorElOption] = useState(null);
-  const [currentIndex, setCurrentIndex] = useState(null);
-  const [selectedOptions, setSelectedOptions] = useState(value);
-  const [availableOptions, setAvailableOptions] = useState(options);
-  const [showSnackBar, setShowSnackBar] = useState(false);
-  const [chipColor, setChipColor] = useState(generateRandomColor());
-  const [inputValue, setInputValue] = useState("");
-  const {
-    theme
-  } = useEditorContext();
-  const isMobile = window.matchMedia("(max-width: 899px)")?.matches || false;
-  const PopoverComponent = isMobile ? SwipeableDrawer : Popover;
-  const mode = useMemo(() => ({
-    type: "editOptionMulti",
-    edit: {
-      label: "Multi Select",
-      visible: true,
-      key: property,
-      type: "multi-select",
-      options: options || [],
-      optionIndex: currentIndex,
-      hideBackButton: true
-    }
-  }), [options, property, currentIndex]);
-  const customScrollStyles = {
-    scrollbarWidth: "thin",
-    scrollbarColor: `${theme?.palette?.editor?.brainPopupScroll} transparent`,
-    "&::-webkit-scrollbar": {
-      width: "6px"
-    },
-    "&::-webkit-scrollbar-thumb": {
-      backgroundColor: theme?.palette?.editor?.brainPopupScroll,
-      borderRadius: "3px"
-    },
-    "&::-webkit-scrollbar-track": {
-      display: "none"
-    }
-  };
-  useEffect(() => {
-    if (inputValue?.trim() && !chipColor) {
-      setChipColor(generateRandomColor());
-    }
-  }, [inputValue, chipColor]);
-  useEffect(() => {
-    if (JSON.stringify(options) !== JSON.stringify(availableOptions)) {
-      setAvailableOptions(options);
-    }
-  }, [options, availableOptions]);
-  const handleOpenPopover = useCallback(event => {
-    setAnchorEl(event.currentTarget);
-  }, []);
-  const handleClosePopover = useCallback(e => {
-    e?.stopPropagation();
-    setAnchorEl(null);
-  }, []);
-  const handleAddOption = newValue => {
-    const trimmedValue = newValue?.trim();
-    if (!trimmedValue) return;
-    const newOption = {
-      value: trimmedValue,
-      color: chipColor
-    };
-    if (!availableOptions?.some(opt => opt?.value === trimmedValue)) {
-      setAvailableOptions(prev => [...prev, newOption]);
-      setSelectedOptions(prev => [...prev, newOption]);
-      onUpdate([newOption, ...availableOptions]);
-    }
-    setInputValue("");
-    setChipColor("");
-  };
-  const onClose = () => {
-    setAnchorEl(anchorElOption);
-    setAnchorElOption(null);
-  };
-  const onEditOption = (type, data) => {
-    const updateData = data?.edit ? data?.edit?.options : data?.options;
-    onUpdate(updateData);
-    if (data?.edit?.options) {
-      const updatedSelectedOptions = selectedOptions?.filter(selOption => updateData?.some(availOption => availOption?.value === selOption?.value && availOption?.color === selOption?.color));
-      setSelectedOptions(updatedSelectedOptions);
-      onClose();
-    }
-  };
-  const handleEditOption = (e, index) => {
-    e.stopPropagation();
-    setCurrentIndex(index);
-    setAnchorElOption(anchorEl);
-    setAnchorEl(null);
-  };
-  const handleSelectOption = option => {
-    if (!selectedOptions?.some(opt => opt?.value === option?.value)) {
-      const updatedOptions = [...selectedOptions, option];
-      setSelectedOptions(updatedOptions);
-      onChange(updatedOptions);
-    } else {
-      setShowSnackBar(true);
-    }
-  };
-  const handleClearSelection = () => {
-    setSelectedOptions([]);
-  };
-  const handleDeleteChip = (event, option) => {
-    event.stopPropagation();
-    setSelectedOptions(prev => {
-      const updatedOptions = prev.filter(selected => selected?.value !== option?.value);
-      onChange(updatedOptions);
-      return updatedOptions;
-    });
-  };
-  const filteredOptions = availableOptions?.filter(option => option?.value?.toLowerCase()?.includes(inputValue?.toLowerCase()));
-  const isExactMatch = availableOptions?.some(opt => opt?.value?.toLowerCase() === inputValue?.toLowerCase());
-  const open = Boolean(anchorEl);
-  const openEditOption = Boolean(anchorElOption);
-  const id = open ? "autocomplete-popover" : undefined;
-  return /*#__PURE__*/_jsxs("div", {
-    children: [/*#__PURE__*/_jsx(Box, {
-      sx: {
-        display: "flex",
-        flexWrap: wrapColumn ? "wrap" : "nowrap",
-        overflowX: wrapColumn ? "hidden" : "auto",
-        gap: 0.5,
-        padding: "8px",
-        cursor: "pointer"
-      },
-      onClick: handleOpenPopover,
-      children: selectedOptions?.map((option, index) => /*#__PURE__*/_jsx(Chip, {
-        label: option?.value,
-        onDelete: event => {
-          handleDeleteChip(event, option);
-        },
-        deleteIcon: /*#__PURE__*/_jsx(CloseIcon, {}),
-        variant: "filled",
-        sx: {
-          backgroundColor: option?.color,
-          color: "#0F172A",
-          "& .MuiChip-deleteIcon": {
-            flexShrink: 0,
-            "& path": {
-              stroke: "#0F172A !important"
-            }
-          },
-          "&:hover": {
-            opacity: 0.8
-          }
-        }
-      }, index))
-    }), /*#__PURE__*/_jsx(PopoverComponent, {
-      id: id,
-      open: open,
-      anchorEl: anchorEl,
-      anchor: "bottom",
-      onClose: e => handleClosePopover(e),
-      anchorOrigin: {
-        vertical: "top",
-        horizontal: "left"
-      },
-      transformOrigin: {
-        vertical: "top",
-        horizontal: "left"
-      },
-      sx: {
-        "& .MuiPaper-root": {
-          borderRadius: "20px",
-          background: theme?.palette?.editor?.textFormatBgColor,
-          border: `1px solid ${theme?.palette?.editor?.popUpBorderColor}`,
-          boxShadow: "0px 4px 10px 0px #00000029"
-        }
-      },
-      disableAutoFocus: true,
-      disableEnforceFocus: true,
-      disableRestoreFocus: true,
-      children: /*#__PURE__*/_jsxs(Box, {
-        sx: {
-          width: isMobile ? "100%" : 300
-        },
-        children: [/*#__PURE__*/_jsx(Autocomplete, {
-          multiple: true,
-          freeSolo: true,
-          disablePortal: true,
-          PopperComponent: () => null,
-          sx: {
-            "& .MuiFormControl-root": {
-              maxHeight: "250px",
-              overflowY: "auto",
-              overflowX: "hidden",
-              pr: "12px",
-              pl: "12px",
-              marginTop: "12px",
-              ...customScrollStyles
-            }
-          },
-          disableClearable: true,
-          options: [],
-          getOptionLabel: option => options?.value || "",
-          value: selectedOptions,
-          onChange: (event, newValues) => {
-            const addedOptions = newValues?.filter(value => typeof value === "object" || typeof value === "string" && value?.trim() !== "")?.map(value => typeof value === "string" ? {
-              value,
-              color: chipColor
-            } : value);
-            const isDuplicate = addedOptions?.some(newOpt => (selectedOptions || [])?.some(opt => opt.value === newOpt.value));
-            if (!isDuplicate) {
-              setSelectedOptions([...selectedOptions, ...addedOptions]);
-            }
-          },
-          inputValue: inputValue,
-          onInputChange: (event, newInputValue) => setInputValue(newInputValue),
-          onKeyDown: event => {
-            if (event.key === "Enter" && inputValue.trim()) {
-              event.preventDefault();
-              handleAddOption(inputValue);
-            }
-          },
-          filterOptions: (options, params) => options?.filter(option => option?.value?.toLowerCase()?.includes(params?.inputValue?.toLowerCase())),
-          renderInput: params => /*#__PURE__*/_jsx(TextField, {
-            ...params,
-            variant: "standard",
-            InputProps: {
-              ...params.InputProps,
-              disableUnderline: true,
-              sx: {
-                display: "flex",
-                flexWrap: "wrap",
-                fontFamily: "Inter",
-                fontWeight: 400,
-                fontSize: "12px",
-                color: theme?.palette?.editor?.secondaryTextColor,
-                "&::placeholder": {
-                  color: theme?.palette?.editor?.secondaryTextColor
-                },
-                "& .MuiAutocomplete-input": {
-                  minWidth: "100px !important"
-                }
-              },
-              endAdornment: /*#__PURE__*/_jsx(Tooltip, {
-                arrow: true,
-                title: "Clear Selected",
-                children: /*#__PURE__*/_jsx(IconButton, {
-                  onClick: handleClearSelection,
-                  sx: {
-                    padding: 0,
-                    minWidth: "unset",
-                    "& .MuiSvgIcon-root": {
-                      fontSize: 20
-                    },
-                    "& rect": {
-                      fill: theme?.palette?.editor?.closeButtonSvgStroke
-                    },
-                    "&:hover": {
-                      backgroundColor: "transparent"
-                    }
-                  },
-                  children: /*#__PURE__*/_jsx(Icon, {
-                    icon: "resetIconNew"
-                  })
-                })
-              })
-            },
-            sx: {
-              backgroundColor: "transparent",
-              fontFamily: "Inter",
-              fontWeight: 400,
-              fontSize: "12px"
-            },
-            placeholder: "Create new one..."
-          }),
-          renderTags: (tagValues, getTagProps) => tagValues.map((option, index) => /*#__PURE__*/_jsx(Chip, {
-            variant: "filled",
-            label: option?.value,
-            ...getTagProps({
-              index
-            }),
-            onDelete: event => {
-              handleDeleteChip(event, option);
-            },
-            deleteIcon: /*#__PURE__*/_jsx(CloseIcon, {}),
-            sx: {
-              backgroundColor: option?.color,
-              color: "#0F172A",
-              "& .MuiChip-deleteIcon": {
-                flexShrink: 0,
-                "& path": {
-                  stroke: "#0F172A !important"
-                }
-              },
-              "&:hover": {
-                opacity: 0.8
-              }
-            }
-          }, index))
-        }), /*#__PURE__*/_jsx(Divider, {
-          sx: {
-            mt: "12px",
-            borderBottom: `1px solid ${theme?.palette?.editor?.popUpBorderColor}`,
-            boxShadow: theme?.palette?.editor?.dividerDropShadow
-          }
-        }), /*#__PURE__*/_jsx(Box, {
-          sx: {
-            pl: "4px"
-          },
-          children: /*#__PURE__*/_jsxs(List, {
-            sx: {
-              maxHeight: "250px",
-              overflowY: "auto",
-              ...customScrollStyles
-            },
-            children: [/*#__PURE__*/_jsx(Typography, {
-              sx: {
-                mb: 1,
-                pl: "8px",
-                color: theme?.palette?.editor?.secondaryTextColor,
-                fontFamily: "Inter",
-                fontWeight: 400,
-                fontSize: "12px"
-              },
-              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": {
-                      stroke: theme?.palette?.editor?.activeColor
-                    },
-                    borderRadius: "12px"
-                  }
-                },
-                children: [/*#__PURE__*/_jsx(Chip, {
-                  label: option?.value,
-                  sx: {
-                    backgroundColor: option?.color,
-                    color: "#0F172A",
-                    fontWeight: 500,
-                    fontSize: "12px",
-                    fontFamily: "Inter",
-                    padding: "4px 12px",
-                    borderRadius: "16px",
-                    maxWidth: "180px",
-                    whiteSpace: "nowrap",
-                    overflow: "hidden",
-                    textOverflow: "ellipsis"
-                  }
-                }), /*#__PURE__*/_jsx(IconButton, {
-                  size: "small",
-                  sx: {
-                    "& path": {
-                      stroke: theme?.palette?.editor?.closeButtonSvgStroke
-                    },
-                    "&:hover": {
-                      backgroundColor: "transparent"
-                    }
-                  },
-                  onClick: e => handleEditOption(e, index),
-                  children: /*#__PURE__*/_jsx(Icon, {
-                    icon: "rightArrow"
-                  })
-                })]
-              })
-            }, index)), inputValue?.trim() && !isExactMatch && /*#__PURE__*/_jsx(ListItem, {
-              disablePadding: true,
-              children: /*#__PURE__*/_jsxs(ListItemButton, {
-                onClick: () => handleAddOption(inputValue),
-                sx: {
-                  display: "flex",
-                  alignItems: "center"
-                },
-                children: [/*#__PURE__*/_jsx(Typography, {
-                  sx: {
-                    color: theme?.palette?.editor?.secondaryTextColor,
-                    marginRight: "6px",
-                    fontSize: "14px",
-                    fontFamily: "Inter"
-                  },
-                  children: "Create"
-                }), /*#__PURE__*/_jsx(Chip, {
-                  label: `${inputValue}`,
-                  sx: {
-                    backgroundColor: chipColor,
-                    color: "#0F172A",
-                    fontWeight: 500,
-                    fontSize: "12px",
-                    fontFamily: "Inter",
-                    borderRadius: "16px",
-                    maxWidth: "180px",
-                    whiteSpace: "nowrap",
-                    overflow: "hidden",
-                    textOverflow: "ellipsis"
-                  }
-                })]
-              })
-            })]
-          })
-        })]
-      })
-    }), openEditOption ? /*#__PURE__*/_jsx(PropertySettings, {
-      open: openEditOption,
-      anchorEl: anchorElOption,
-      mode: mode,
-      onClose: onClose,
-      onEvent: onEditOption,
-      translation: translation
-    }) : null, showSnackBar ? /*#__PURE__*/_jsx(SnackbarAlert, {
-      message: "Option already selected!",
-      setShowSnackBar: setShowSnackBar
-    }) : null]
-  });
-};
-export default MultiSelectWithPopover;

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

@@ -1,89 +0,0 @@
-const Styles = theme => ({
-  root: {
-    "& .MuiPaper-root": {
-      borderRadius: "12px",
-      backgroundColor: theme?.palette?.editor?.miniToolBarBackground,
-      border: `1px solid ${theme?.palette?.editor?.miniToolBarBorder}`,
-      overflow: "hidden"
-    },
-    "& textarea": {
-      backgroundColor: theme?.palette?.editor?.inputFieldBgColor,
-      border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
-      borderRadius: "12px",
-      padding: "10px !important",
-      color: theme?.palette?.editor?.textColor,
-      boxShadow: "0px 4px 18px 0px #00000014",
-      "&:focus": {
-        border: `1px solid #2563EB`,
-        boxShadow: "0px 4px 18px 0px #2563EB1F",
-        outline: "none"
-      },
-      "&:focus-visible": {
-        border: `1px solid #2563EB`,
-        boxShadow: "0px 4px 18px 0px #2563EB1F",
-        outline: "none"
-      }
-    },
-    "& .MuiDialogTitle-root": {
-      padding: "20px 24px 16px 24px"
-    },
-    "& .title": {
-      color: theme?.palette?.editor?.textColor,
-      fontWeight: 600,
-      fontSize: "20px",
-      fontFamily: "Inter, sans-serif"
-    },
-    "& .close-popupbtn": {
-      background: theme?.palette?.editor?.closeButtonBgColor,
-      color: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`,
-      "& svg": {
-        color: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
-      }
-    },
-    "& .divider": {
-      margin: "0px 24px",
-      background: theme?.palette?.editor?.deviderBgColor
-    },
-    "& .save-btn": {
-      backgroundColor: "#2563EB",
-      color: "#ffffff",
-      fontWeight: 600,
-      fontSize: "14px",
-      opacity: 1,
-      borderRadius: "8px",
-      textTransform: "math-auto",
-      height: "36px",
-      padding: "0px 12px",
-      minWidth: "90px",
-      "&:hover": {
-        backgroundColor: "#2563EB"
-      },
-      "@media only screen and (max-width: 899px)": {
-        width: "50%"
-      }
-    },
-    "& .clear-btn": {
-      padding: "8px 12px",
-      color: theme?.palette?.editor?.customDialogueCloseBtnColor,
-      fontWeight: 600,
-      fontSize: "14px",
-      opacity: 1,
-      borderRadius: "8px",
-      textTransform: "math-auto",
-      height: "36px",
-      minWidth: "90px",
-      backgroundColor: theme?.palette?.editor?.closeButtonBackground,
-      border: `1px solid ${theme?.palette?.editor?.customDialogueCloseBtnBorder}`,
-      "&:hover": {
-        backgroundColor: theme?.palette?.editor?.closeButtonBackground
-      },
-      "@media only screen and (max-width: 899px)": {
-        width: "50%"
-      }
-    },
-    "& .MuiDialogActions-root": {
-      padding: "0px 22px 16px 0px"
-    }
-  }
-});
-export default Styles;

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

@@ -1,115 +0,0 @@
-import { ROW_HEIGHT } from "../../common/RnD/Utils/gridDropItem";
-import { getElementOffset } from "../../common/RnD/VirtualElement/VirtualTextElement";
-import { RND_ITEMS } from "../../helper";
-export const ELEMENT_CASE = {
-  ADD_TEXT: "addText",
-  ADD_BUTTON: "addButton",
-  ADD_SIGNATURE: "addSignature",
-  ADD_IMAGE: "addImage",
-  ADD_VIDEO: "addVideo",
-  ADD_TABLE: "addTable",
-  ADD_CODE: "addCode",
-  ADD_BOX: "addBox",
-  ADD_FORM: "addForm",
-  ADD_APP_HEADER: "addAppHeader",
-  ADD_DIVIDER: "addDivider"
-};
-const commonXsValues = {
-  top_xs: 0,
-  marginTop_xs: 12,
-  left_xs: 24,
-  width_xs: 272,
-  xs_updatedOn: new Date().getTime()
-};
-const elementXsValues = {
-  [ELEMENT_CASE.ADD_TEXT]: {
-    ...commonXsValues,
-    height_xs: 50
-  },
-  [ELEMENT_CASE.ADD_BUTTON]: {
-    ...commonXsValues,
-    height_xs: 50
-  },
-  [ELEMENT_CASE.ADD_SIGNATURE]: {
-    ...commonXsValues,
-    height_xs: 173
-  },
-  [ELEMENT_CASE.ADD_IMAGE]: {
-    ...commonXsValues,
-    height_xs: 80
-  },
-  [ELEMENT_CASE.ADD_VIDEO]: {
-    ...commonXsValues,
-    height_xs: 300
-  },
-  [ELEMENT_CASE.ADD_TABLE]: {
-    ...commonXsValues,
-    height_xs: 165
-  },
-  [ELEMENT_CASE.ADD_CODE]: {
-    ...commonXsValues,
-    height: 300
-  },
-  [ELEMENT_CASE.ADD_BOX]: {
-    ...commonXsValues,
-    height_xs: 300
-  },
-  [ELEMENT_CASE.ADD_FORM]: {
-    ...commonXsValues,
-    height_xs: 80
-  },
-  [ELEMENT_CASE.ADD_APP_HEADER]: {
-    ...commonXsValues,
-    height_xs: 80
-  },
-  [ELEMENT_CASE.ADD_DIVIDER]: {
-    ...commonXsValues,
-    height_xs: 24
-  }
-};
-export const findMaxYValue = (sectionItems, breakpoint) => {
-  let maxY = 0;
-  sectionItems.forEach(item => {
-    const isHidden = breakpoint === "xs" && item.children.some(c => c.xsHidden);
-    if (item?.type && RND_ITEMS.includes(item.type) && !isHidden) {
-      const {
-        bottom
-      } = getElementOffset(item, breakpoint === "lg" ? "lg" : "xs");
-      maxY = Math.max(maxY, bottom);
-    }
-  });
-  return maxY;
-};
-export const convertToGridArea = y => {
-  // Calculate grid position
-  const row = Math.floor(y / ROW_HEIGHT) + 1;
-
-  // to calculate difference inside the grid
-  const marginTop = Math.abs((row - 1) * ROW_HEIGHT - y);
-
-  // Update grid area
-  const gridArea = `${row} / 1 / ${row + 1} / 2`;
-  return {
-    gridArea,
-    marginTop
-  };
-};
-export const getNewElementXsValues = (type, sectionItems) => {
-  const values = elementXsValues[type] || {};
-  const y = sectionItems?.length ? findMaxYValue(sectionItems) : 0;
-  const {
-    gridArea,
-    marginTop
-  } = convertToGridArea(y);
-  const BUFFER_MARGIN_TOP = 12;
-  const xsVal = {
-    ...values,
-    gridArea_xs: gridArea,
-    marginTop_xs: marginTop + BUFFER_MARGIN_TOP
-  };
-  const sectionHeightXs = y + values?.height_xs + BUFFER_MARGIN_TOP + 12;
-  return {
-    xsVal,
-    sectionHeightXs
-  };
-};