@flozy/editor 10.5.0 → 10.5.1

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

@@ -1,510 +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 Tooltip from "@mui/material/Tooltip";
-import { CloseIcon } from "../../../../../common/iconslist";
-import { useEditorContext } from "../../../../../hooks/useMouseMove";
-import SwipeableDrawer from "@mui/material/SwipeableDrawer";
-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 hasIds = arr => Array.isArray(arr) && arr.every(item => 'id' in item);
-const generateStableIds = arr => arr.map((item, index) => ({
-  ...item,
-  id: `multi_${item.value}_${index}`
-}));
-const SelectV1 = props => {
-  const {
-    value,
-    options = [],
-    selectMultiple,
-    property,
-    wrapColumn = false,
-    onChange,
-    onUpdate,
-    translation
-  } = props;
-  const [anchorEl, setAnchorEl] = useState(null);
-  const [anchorElOption, setAnchorElOption] = useState(null);
-  const [currentIndex, setCurrentIndex] = useState(null);
-  const [selectedOptions, setSelectedOptions] = useState([]);
-  const [availableOptions, setAvailableOptions] = useState([]);
-  const [showSnackBar, setShowSnackBar] = useState(false);
-  const [chipColor, setChipColor] = useState(generateRandomColor());
-  const [inputValue, setInputValue] = useState("");
-  const [availableOptionsMap, setAvailableOptionsMap] = useState({});
-  const [resolvedSelectedOptions, setResolvedSelectedOptions] = useState([]);
-  const {
-    theme
-  } = useEditorContext();
-  const isMobile = window.matchMedia("(max-width: 899px)")?.matches || false;
-  const PopoverComponent = isMobile ? SwipeableDrawer : Popover;
-  useEffect(() => {
-    const obj = {};
-    for (const opt of availableOptions) {
-      if (opt?.id != null) {
-        obj[opt.id] = opt;
-      }
-    }
-    setAvailableOptionsMap(obj);
-  }, [availableOptions]);
-  useEffect(() => {
-    const resolved = selectedOptions?.filter(sel => sel?.id && availableOptionsMap?.[sel.id])?.map(sel => availableOptionsMap[sel?.id]) ?? [];
-    setResolvedSelectedOptions(resolved);
-  }, [selectedOptions, availableOptionsMap]);
-  useEffect(() => {
-    const enrichedAvailable = hasIds(options) ? options : generateStableIds(options);
-    setAvailableOptions(enrichedAvailable);
-    const enrichedSelected = hasIds(value) ? value : value?.map(sel => {
-      const match = enrichedAvailable.find(opt => opt?.value === sel?.value);
-      return match ? {
-        id: match.id
-      } : sel;
-    });
-    setSelectedOptions(enrichedSelected);
-  }, []);
-  const mode = useMemo(() => ({
-    type: "editOptionMulti",
-    edit: {
-      label: selectMultiple ? "Multi Select" : "Select",
-      visible: true,
-      key: property,
-      type: selectMultiple ? "multi-select" : "select",
-      options: availableOptions || [],
-      optionIndex: currentIndex,
-      hideBackButton: true
-    }
-  }), [availableOptions, property, currentIndex, selectMultiple]);
-  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(() => {
-    const enriched = hasIds(options) ? options : generateStableIds(options);
-    const isDifferent = JSON.stringify(enriched) !== JSON.stringify(availableOptions);
-    if (isDifferent) {
-      setAvailableOptions(enriched);
-    }
-  }, [options]);
-  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 isDuplicate = availableOptions.some(opt => opt.value.toLowerCase() === trimmedValue.toLowerCase());
-    if (isDuplicate) {
-      const existing = availableOptions.find(opt => opt?.value?.toLowerCase() === trimmedValue?.toLowerCase());
-      const alreadySelected = selectedOptions?.some(sel => sel?.id === existing?.id);
-      if (!alreadySelected) {
-        const updatedSelected = selectMultiple ? [...selectedOptions, {
-          id: existing.id
-        }] : [{
-          id: existing.id
-        }];
-        setSelectedOptions(updatedSelected);
-        onChange?.(updatedSelected);
-      }
-      setInputValue("");
-      setChipColor("");
-      return;
-    }
-    const newOption = {
-      value: trimmedValue,
-      color: chipColor,
-      id: `multi_${Date.now().toString(36)}_${Math.random().toString(36).substring(2, 5)}`
-    };
-    const updatedAvailableOptions = [...availableOptions, newOption];
-    const updatedSelectedOptions = selectMultiple ? [...selectedOptions, {
-      id: newOption.id
-    }] : [{
-      id: newOption.id
-    }];
-    setAvailableOptions(updatedAvailableOptions);
-    setSelectedOptions(updatedSelectedOptions);
-    onUpdate?.(updatedAvailableOptions);
-    onChange?.(updatedSelectedOptions);
-    setInputValue("");
-    setChipColor("");
-  };
-  const onClose = () => {
-    setAnchorEl(anchorElOption);
-    setAnchorElOption(null);
-  };
-  const onEditOption = (type, data) => {
-    const updateData = data?.edit ? data?.edit?.options : data?.options;
-    onUpdate(updateData);
-  };
-  const handleEditOption = (e, index) => {
-    e.stopPropagation();
-    setCurrentIndex(index);
-    setAnchorElOption(anchorEl);
-    setAnchorEl(null);
-  };
-  const handleSelectOption = option => {
-    const isAlreadySelected = selectedOptions.some(opt => opt?.id === option?.id);
-    if (isAlreadySelected) {
-      setShowSnackBar(true);
-      return;
-    }
-    const updatedOptions = selectMultiple ? [...selectedOptions, {
-      id: option?.id
-    }] : [{
-      id: option?.id
-    }];
-    setSelectedOptions(updatedOptions);
-    onChange(updatedOptions);
-    if (!selectMultiple) {
-      handleClosePopover();
-    }
-  };
-  const handleClearSelection = () => {
-    setSelectedOptions([]);
-  };
-  const handleDeleteChip = (event, option) => {
-    event.stopPropagation();
-    const updatedOptions = selectedOptions?.filter(selected => selected?.id !== option?.id);
-    setSelectedOptions(updatedOptions);
-    onChange(selectMultiple ? updatedOptions : updatedOptions[0] || null);
-  };
-  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: resolvedSelectedOptions?.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: () => "",
-          value: resolvedSelectedOptions,
-          onChange: (event, newValues) => {
-            const stringOptions = newValues.filter(val => typeof val === "string" && val.trim());
-            for (const str of stringOptions) {
-              handleAddOption(str);
-            }
-          },
-          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) => {
-            return 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 SelectV1;

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;