@flozy/editor 10.3.9 → 10.4.0

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

@@ -1,452 +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
-  } = 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
-    }) : 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/assets/svg/ClearAllRounded.js

@@ -1,31 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const ClearAllIcon = () => /*#__PURE__*/_jsxs("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "20",
-  height: "20",
-  viewBox: "0 0 20 20",
-  children: [/*#__PURE__*/_jsx("rect", {
-    x: "4",
-    y: "5",
-    width: "12",
-    height: "2",
-    rx: "1",
-    fill: "currentColor"
-  }), /*#__PURE__*/_jsx("rect", {
-    x: "4",
-    y: "9",
-    width: "10",
-    height: "2",
-    rx: "1",
-    fill: "currentColor"
-  }), /*#__PURE__*/_jsx("rect", {
-    x: "4",
-    y: "13",
-    width: "12",
-    height: "2",
-    rx: "1",
-    fill: "currentColor"
-  })]
-});
-export default ClearAllIcon;

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

@@ -1,23 +0,0 @@
-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/SnackBar/index.js

@@ -1,43 +0,0 @@
-import Snackbar from "@mui/material/Snackbar";
-import Alert from "@mui/material/Alert";
-import { useState } from "react";
-import { useEditorContext } from "../../hooks/useMouseMove";
-import { jsx as _jsx } from "react/jsx-runtime";
-const SnackbarAlert = ({
-  message,
-  setShowSnackBar,
-  severity = "info"
-}) => {
-  const [open, setOpen] = useState(!!message);
-  const {
-    theme
-  } = useEditorContext();
-  return /*#__PURE__*/_jsx(Snackbar, {
-    open: open,
-    autoHideDuration: 3000,
-    onClose: () => {
-      setOpen(false);
-      setShowSnackBar(false);
-    },
-    anchorOrigin: {
-      vertical: "top",
-      horizontal: "right"
-    },
-    children: /*#__PURE__*/_jsx(Alert, {
-      severity: severity,
-      onClose: () => {
-        setOpen(false);
-        setShowSnackBar(false);
-      },
-      sx: {
-        background: theme?.palette?.primary?.gradientBtn,
-        color: "#FFFFFF",
-        "& .MuiAlert-icon": {
-          color: "#FFFFFF"
-        }
-      },
-      children: message
-    })
-  });
-};
-export default SnackbarAlert;