@flozy/editor 10.4.5 → 10.4.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (192) hide show
  1. package/dist/Editor/ChatEditor.js +17 -16
  2. package/dist/Editor/CommonEditor.js +134 -18
  3. package/dist/Editor/DialogWrapper.js +31 -25
  4. package/dist/Editor/Editor.css +46 -8
  5. package/dist/Editor/Elements/AI/PopoverAIInput.js +11 -3
  6. package/dist/Editor/Elements/Accordion/Accordion.js +46 -9
  7. package/dist/Editor/Elements/Accordion/AccordionSummary.js +1 -23
  8. package/dist/Editor/Elements/AppHeader/AppHeader.js +10 -5
  9. package/dist/Editor/Elements/Button/EditorButton.js +26 -10
  10. package/dist/Editor/Elements/Carousel/CarouselItem.js +2 -1
  11. package/dist/Editor/Elements/Color Picker/ColorButtons.js +61 -14
  12. package/dist/Editor/Elements/Color Picker/ColorPicker.css +25 -1
  13. package/dist/Editor/Elements/Color Picker/ColorPicker.js +10 -7
  14. package/dist/Editor/Elements/Color Picker/Styles.js +15 -13
  15. package/dist/Editor/Elements/DataView/Layouts/ColumnView.js +4 -2
  16. package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/MultiSelect.js +482 -0
  17. package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/SelectV1.js +513 -0
  18. package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +27 -11
  19. package/dist/Editor/Elements/DataView/Layouts/DataTypes/SelectType.js +29 -9
  20. package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +17 -6
  21. package/dist/Editor/Elements/DataView/Layouts/Options/EditOption.js +4 -3
  22. package/dist/Editor/Elements/DataView/Layouts/Options/index.js +11 -0
  23. package/dist/Editor/Elements/DataView/Layouts/ViewData.js +8 -4
  24. package/dist/Editor/Elements/Embed/Image.js +3 -2
  25. package/dist/Editor/Elements/Embed/Video.js +1 -1
  26. package/dist/Editor/Elements/EmbedScript/Code.js +14 -2
  27. package/dist/Editor/Elements/EmbedScript/EmbedScriptPopup.js +57 -28
  28. package/dist/Editor/Elements/EmbedScript/styles.js +89 -0
  29. package/dist/Editor/Elements/Form/Form.js +184 -171
  30. package/dist/Editor/Elements/Form/FormElements/FormText.js +23 -6
  31. package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +2 -2
  32. package/dist/Editor/Elements/Form/FormField.js +13 -6
  33. package/dist/Editor/Elements/Form/Workflow/Styles.js +24 -22
  34. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +40 -32
  35. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +7 -4
  36. package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +1 -0
  37. package/dist/Editor/Elements/FreeGrid/Options/More.js +8 -8
  38. package/dist/Editor/Elements/FreeGrid/helper.js +115 -0
  39. package/dist/Editor/Elements/FreeGrid/styles.js +75 -7
  40. package/dist/Editor/Elements/Grid/Grid.js +14 -2
  41. package/dist/Editor/Elements/Grid/GridItem.js +1 -1
  42. package/dist/Editor/Elements/List/CheckList.js +3 -2
  43. package/dist/Editor/Elements/Search/SearchAttachment.js +40 -9
  44. package/dist/Editor/Elements/Search/SearchButton.js +9 -8
  45. package/dist/Editor/Elements/Search/SearchList.js +9 -7
  46. package/dist/Editor/Elements/Signature/Signature.css +2 -1
  47. package/dist/Editor/Elements/Signature/SignatureOptions/DrawSignature.js +18 -5
  48. package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +16 -3
  49. package/dist/Editor/Elements/SimpleText/index.js +6 -1
  50. package/dist/Editor/Elements/SimpleText/style.js +2 -2
  51. package/dist/Editor/Elements/Table/DragButton.js +0 -1
  52. package/dist/Editor/Elements/Table/Draggable.js +6 -2
  53. package/dist/Editor/Elements/Table/Styles.js +7 -0
  54. package/dist/Editor/Elements/Table/Table.js +3 -3
  55. package/dist/Editor/Elements/Table/TableCell.js +31 -8
  56. package/dist/Editor/Elements/Title/title.js +6 -6
  57. package/dist/Editor/Elements/Variables/VariableButton.js +10 -1
  58. package/dist/Editor/MiniEditor.js +2 -1
  59. package/dist/Editor/Styles/EditorStyles.js +5 -5
  60. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +27 -3
  61. package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +4 -3
  62. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  63. package/dist/Editor/Toolbar/FormatTools/TextSize.js +10 -13
  64. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +2 -1
  65. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +4 -2
  66. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +6 -13
  67. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +167 -42
  68. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +7 -4
  69. package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +2 -1
  70. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +72 -12
  71. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +100 -27
  72. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +439 -0
  73. package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
  74. package/dist/Editor/Toolbar/toolbarGroups.js +48 -6
  75. package/dist/Editor/assets/svg/BackIcon.js +18 -0
  76. package/dist/Editor/assets/svg/ClearAllRounded.js +31 -0
  77. package/dist/Editor/assets/svg/ResetIconNew.js +23 -0
  78. package/dist/Editor/assets/svg/SettingsIcon.js +1 -0
  79. package/dist/Editor/assets/svg/ThemeIcons.js +293 -0
  80. package/dist/Editor/common/Checkbox/index.js +46 -0
  81. package/dist/Editor/common/Checkbox/styles.js +45 -0
  82. package/dist/Editor/common/ColorPickerButton.js +41 -16
  83. package/dist/Editor/common/CustomColorPicker/index.js +130 -0
  84. package/dist/Editor/common/CustomColorPicker/style.js +53 -0
  85. package/dist/Editor/common/CustomDialog2/index.js +94 -0
  86. package/dist/Editor/common/CustomDialog2/style.js +67 -0
  87. package/dist/Editor/common/CustomSelect.js +43 -0
  88. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  89. package/dist/Editor/common/FontLoader/FontLoader.js +3 -0
  90. package/dist/Editor/common/Icon.js +31 -1
  91. package/dist/Editor/common/ImageSelector/ImageSelector.js +2 -2
  92. package/dist/Editor/common/ImageSelector/Styles.js +3 -9
  93. package/dist/Editor/common/LinkSettings/NavComponents.js +61 -55
  94. package/dist/Editor/common/LinkSettings/index.js +82 -80
  95. package/dist/Editor/common/LinkSettings/navOptions.js +2 -2
  96. package/dist/Editor/common/LinkSettings/style.js +209 -74
  97. package/dist/Editor/common/MentionsPopup/index.js +4 -1
  98. package/dist/Editor/common/RadioGroup/index.js +48 -0
  99. package/dist/Editor/common/RadioGroup/styles.js +29 -0
  100. package/dist/Editor/common/RnD/ElementOptions/Actions.js +13 -15
  101. package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js +1 -0
  102. package/dist/Editor/common/RnD/ElementOptions/index.js +2 -2
  103. package/dist/Editor/common/RnD/ElementOptions/styles.js +28 -1
  104. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +6 -5
  105. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Signature.js +4 -3
  106. package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +3 -2
  107. package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +3 -2
  108. package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +3 -2
  109. package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +3 -2
  110. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +4 -2
  111. package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +3 -2
  112. package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +3 -2
  113. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +3 -1
  114. package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +3 -2
  115. package/dist/Editor/common/RnD/ElementSettings/styles.js +146 -12
  116. package/dist/Editor/common/RnD/OptionsPopup/index.js +8 -5
  117. package/dist/Editor/common/RnD/OptionsPopup/style.js +120 -19
  118. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +8 -5
  119. package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +17 -0
  120. package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +6 -3
  121. package/dist/Editor/common/RnD/Utils/gridDropItem.js +28 -19
  122. package/dist/Editor/common/RnD/Utils/index.js +3 -1
  123. package/dist/Editor/common/RnD/VirtualElement/VirtualTextElement.js +42 -58
  124. package/dist/Editor/common/RnD/VirtualElement/helper.js +323 -132
  125. package/dist/Editor/common/RnD/VirtualElement/styles.js +16 -0
  126. package/dist/Editor/common/RnD/index.js +67 -38
  127. package/dist/Editor/common/Select/index.js +44 -5
  128. package/dist/Editor/common/Select/styles.js +30 -2
  129. package/dist/Editor/common/Shorthands/elements.js +65 -11
  130. package/dist/Editor/common/SnackBar/index.js +43 -0
  131. package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +2 -2
  132. package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js +12 -9
  133. package/dist/Editor/common/StyleBuilder/buttonStyle.js +4 -2
  134. package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +4 -0
  135. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +5 -0
  136. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +12 -2
  137. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +15 -7
  138. package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +16 -8
  139. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +36 -10
  140. package/dist/Editor/common/StyleBuilder/fieldTypes/embedUpload.js +115 -0
  141. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +16 -7
  142. package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +3 -1
  143. package/dist/Editor/common/StyleBuilder/fieldTypes/lineSpacing.js +7 -6
  144. package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +13 -6
  145. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +15 -7
  146. package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js +5 -7
  147. package/dist/Editor/common/SwipeableDrawer/style.js +14 -12
  148. package/dist/Editor/common/Uploader.js +16 -0
  149. package/dist/Editor/common/iconListV2.js +177 -6
  150. package/dist/Editor/common/iconslist.js +24 -0
  151. package/dist/Editor/commonStyle.js +186 -62
  152. package/dist/Editor/helper/index.js +5 -1
  153. package/dist/Editor/helper/textIndeces.js +58 -0
  154. package/dist/Editor/helper/theme.js +203 -2
  155. package/dist/Editor/hooks/useEditorTheme.js +153 -0
  156. package/dist/Editor/hooks/useMouseMove.js +8 -5
  157. package/dist/Editor/hooks/useTable.js +5 -4
  158. package/dist/Editor/hooks/useThemeValues.js +63 -0
  159. package/dist/Editor/plugins/withEmbeds.js +1 -1
  160. package/dist/Editor/plugins/withHTML.js +3 -1
  161. package/dist/Editor/plugins/withTable.js +1 -1
  162. package/dist/Editor/theme/ThemeList.js +50 -173
  163. package/dist/Editor/theme/index.js +149 -0
  164. package/dist/Editor/themeSettings/ActiveTheme.js +82 -0
  165. package/dist/Editor/themeSettings/buttons/index.js +300 -0
  166. package/dist/Editor/themeSettings/buttons/style.js +23 -0
  167. package/dist/Editor/themeSettings/colorTheme/index.js +310 -0
  168. package/dist/Editor/themeSettings/colorTheme/style.js +81 -0
  169. package/dist/Editor/themeSettings/fonts/PreviewElement.js +121 -0
  170. package/dist/Editor/themeSettings/fonts/index.js +240 -0
  171. package/dist/Editor/themeSettings/fonts/style.js +62 -0
  172. package/dist/Editor/themeSettings/icons.js +60 -0
  173. package/dist/Editor/themeSettings/index.js +380 -0
  174. package/dist/Editor/themeSettings/style.js +299 -0
  175. package/dist/Editor/themeSettingsAI/icons.js +96 -0
  176. package/dist/Editor/themeSettingsAI/index.js +355 -0
  177. package/dist/Editor/themeSettingsAI/saveTheme.js +202 -0
  178. package/dist/Editor/themeSettingsAI/style.js +332 -0
  179. package/dist/Editor/utils/SlateUtilityFunctions.js +172 -46
  180. package/dist/Editor/utils/accordion.js +14 -4
  181. package/dist/Editor/utils/button.js +1 -17
  182. package/dist/Editor/utils/customHooks/useTableResize.js +49 -9
  183. package/dist/Editor/utils/draftToSlate.js +3 -2
  184. package/dist/Editor/utils/events.js +50 -6
  185. package/dist/Editor/utils/font.js +40 -37
  186. package/dist/Editor/utils/form.js +4 -4
  187. package/dist/Editor/utils/formfield.js +9 -2
  188. package/dist/Editor/utils/helper.js +210 -26
  189. package/dist/Editor/utils/insertAppHeader.js +1 -1
  190. package/dist/Editor/utils/signature.js +2 -9
  191. package/dist/Editor/utils/updateFormName.js +22 -0
  192. package/package.json +4 -4
@@ -0,0 +1,482 @@
1
+ import React, { useCallback, useEffect, useMemo, useState } from "react";
2
+ import Autocomplete from "@mui/material/Autocomplete";
3
+ import Box from "@mui/material/Box";
4
+ import Chip from "@mui/material/Chip";
5
+ import Divider from "@mui/material/Divider";
6
+ import Popover from "@mui/material/Popover";
7
+ import TextField from "@mui/material/TextField";
8
+ import Typography from "@mui/material/Typography";
9
+ import List from "@mui/material/List";
10
+ import ListItem from "@mui/material/ListItem";
11
+ import ListItemButton from "@mui/material/ListItemButton";
12
+ import IconButton from "@mui/material/IconButton";
13
+ import Tooltip from "@mui/material/Tooltip";
14
+ import { CloseIcon } from "../../../../../common/iconslist";
15
+ import { useEditorContext } from "../../../../../hooks/useMouseMove";
16
+ import SwipeableDrawer from "@mui/material/SwipeableDrawer";
17
+ import Icon from "../../../../../common/Icon";
18
+ import { colors } from "../../../../Color Picker/defaultColors";
19
+ import PropertySettings from "../../Options";
20
+ import SnackbarAlert from "../../../../../common/SnackBar";
21
+ import { jsx as _jsx } from "react/jsx-runtime";
22
+ import { jsxs as _jsxs } from "react/jsx-runtime";
23
+ const EXCLUDED_COLORS = new Set(["#000000", "#0F172A", "#2563EB", "#FFFFFF", "#64748B"]);
24
+ const DEFAULT_COLORS = colors?.filter(f => !f?.includes("linear") && !EXCLUDED_COLORS?.has(f));
25
+ const generateRandomColor = () => {
26
+ const randomIndex = Math.floor(Math.random() * DEFAULT_COLORS?.length);
27
+ return DEFAULT_COLORS[randomIndex];
28
+ };
29
+ const hasIds = arr => Array.isArray(arr) && arr.every(item => 'id' in item);
30
+ const generateStableIds = arr => arr.map((item, index) => ({
31
+ ...item,
32
+ id: `multi_${item.value}_${index}`
33
+ }));
34
+ const MultiSelectWithPopover = props => {
35
+ const {
36
+ options = [],
37
+ value,
38
+ onChange,
39
+ onUpdate,
40
+ property,
41
+ wrapColumn = false,
42
+ translation = () => {}
43
+ } = props;
44
+ const [anchorEl, setAnchorEl] = useState(null);
45
+ const [anchorElOption, setAnchorElOption] = useState(null);
46
+ const [currentIndex, setCurrentIndex] = useState(null);
47
+ const [selectedOptions, setSelectedOptions] = useState([]);
48
+ const [availableOptions, setAvailableOptions] = useState([]);
49
+ const [showSnackBar, setShowSnackBar] = useState(false);
50
+ const [chipColor, setChipColor] = useState(generateRandomColor());
51
+ const [inputValue, setInputValue] = useState("");
52
+ const {
53
+ theme
54
+ } = useEditorContext();
55
+ const isMobile = window.matchMedia("(max-width: 899px)")?.matches || false;
56
+ const PopoverComponent = isMobile ? SwipeableDrawer : Popover;
57
+ useEffect(() => {
58
+ console.log("Options received:", options);
59
+ const enrichedAvailable = hasIds(options) ? options : generateStableIds(options);
60
+ console.log("Enriched available options:", enrichedAvailable);
61
+ setAvailableOptions(enrichedAvailable);
62
+ const enrichedSelected = hasIds(value) ? value : value.map(sel => {
63
+ const match = enrichedAvailable.find(opt => opt.value === sel.value);
64
+ return match ? {
65
+ ...sel,
66
+ id: match.id
67
+ } : sel;
68
+ });
69
+ console.log("Enriched selected options:", enrichedSelected);
70
+ setSelectedOptions(enrichedSelected);
71
+ }, []);
72
+ const mode = useMemo(() => ({
73
+ type: "editOptionMulti",
74
+ edit: {
75
+ label: "Multi Select",
76
+ visible: true,
77
+ key: property,
78
+ type: "multi-select",
79
+ options: availableOptions || [],
80
+ optionIndex: currentIndex,
81
+ hideBackButton: true
82
+ }
83
+ }), [availableOptions, property, currentIndex]);
84
+ const customScrollStyles = {
85
+ scrollbarWidth: "thin",
86
+ scrollbarColor: `${theme?.palette?.editor?.brainPopupScroll} transparent`,
87
+ "&::-webkit-scrollbar": {
88
+ width: "6px"
89
+ },
90
+ "&::-webkit-scrollbar-thumb": {
91
+ backgroundColor: theme?.palette?.editor?.brainPopupScroll,
92
+ borderRadius: "3px"
93
+ },
94
+ "&::-webkit-scrollbar-track": {
95
+ display: "none"
96
+ }
97
+ };
98
+ useEffect(() => {
99
+ if (inputValue?.trim() && !chipColor) {
100
+ setChipColor(generateRandomColor());
101
+ }
102
+ }, [inputValue, chipColor]);
103
+ useEffect(() => {
104
+ if (inputValue?.trim() && !chipColor) {
105
+ setChipColor(generateRandomColor());
106
+ }
107
+ }, [inputValue, chipColor]);
108
+ useEffect(() => {
109
+ const enriched = hasIds(options) ? options : generateStableIds(options);
110
+ const isDifferent = JSON.stringify(enriched) !== JSON.stringify(availableOptions);
111
+ if (isDifferent) {
112
+ setAvailableOptions(enriched);
113
+ }
114
+ }, [options]);
115
+ const handleOpenPopover = useCallback(event => {
116
+ setAnchorEl(event.currentTarget);
117
+ }, []);
118
+ const handleClosePopover = useCallback(e => {
119
+ e?.stopPropagation();
120
+ setAnchorEl(null);
121
+ }, []);
122
+ const handleAddOption = newValue => {
123
+ const trimmedValue = newValue?.trim();
124
+ if (!trimmedValue) return;
125
+ const newOption = {
126
+ value: trimmedValue,
127
+ color: chipColor
128
+ };
129
+ if (!availableOptions?.some(opt => opt?.value === trimmedValue)) {
130
+ setAvailableOptions(prev => [...prev, newOption]);
131
+ setSelectedOptions(prev => [...prev, newOption]);
132
+ onUpdate([newOption, ...availableOptions]);
133
+ onChange([...selectedOptions, newOption]);
134
+ }
135
+ setInputValue("");
136
+ setChipColor("");
137
+ };
138
+ const onClose = () => {
139
+ setAnchorEl(anchorElOption);
140
+ setAnchorElOption(null);
141
+ };
142
+ const onEditOption = (type, data) => {
143
+ const updateData = data?.edit ? data?.edit?.options : data?.options;
144
+ onUpdate(updateData);
145
+ if (data?.edit?.options) {
146
+ const updatedSelectedOptions = selectedOptions?.filter(selOption => updateData?.some(availOption => availOption?.value === selOption?.value && availOption?.color === selOption?.color));
147
+ setSelectedOptions(updatedSelectedOptions);
148
+ onClose();
149
+ }
150
+ };
151
+ const handleEditOption = (e, index) => {
152
+ e.stopPropagation();
153
+ setCurrentIndex(index);
154
+ setAnchorElOption(anchorEl);
155
+ setAnchorEl(null);
156
+ };
157
+ const handleSelectOption = option => {
158
+ if (!selectedOptions?.some(opt => opt?.value === option?.value)) {
159
+ const updatedOptions = [...selectedOptions, option];
160
+ setSelectedOptions(updatedOptions);
161
+ onChange(updatedOptions);
162
+ } else {
163
+ setShowSnackBar(true);
164
+ }
165
+ };
166
+ const handleClearSelection = () => {
167
+ setSelectedOptions([]);
168
+ };
169
+ const handleDeleteChip = (event, option) => {
170
+ event.stopPropagation();
171
+ setSelectedOptions(prev => {
172
+ const updatedOptions = prev.filter(selected => selected?.value !== option?.value);
173
+ onChange(updatedOptions);
174
+ return updatedOptions;
175
+ });
176
+ };
177
+ const filteredOptions = availableOptions?.filter(option => option?.value?.toLowerCase()?.includes(inputValue?.toLowerCase()));
178
+ const isExactMatch = availableOptions?.some(opt => opt?.value?.toLowerCase() === inputValue?.toLowerCase());
179
+ const open = Boolean(anchorEl);
180
+ const openEditOption = Boolean(anchorElOption);
181
+ const id = open ? "autocomplete-popover" : undefined;
182
+ return /*#__PURE__*/_jsxs("div", {
183
+ children: [/*#__PURE__*/_jsx(Box, {
184
+ sx: {
185
+ display: "flex",
186
+ flexWrap: wrapColumn ? "wrap" : "nowrap",
187
+ overflowX: wrapColumn ? "hidden" : "auto",
188
+ gap: 0.5,
189
+ padding: "8px",
190
+ cursor: "pointer"
191
+ },
192
+ onClick: handleOpenPopover,
193
+ children: selectedOptions?.map((option, index) => /*#__PURE__*/_jsx(Chip, {
194
+ label: option?.value,
195
+ onDelete: event => {
196
+ handleDeleteChip(event, option);
197
+ },
198
+ deleteIcon: /*#__PURE__*/_jsx(CloseIcon, {}),
199
+ variant: "filled",
200
+ sx: {
201
+ backgroundColor: option?.color,
202
+ color: "#0F172A",
203
+ "& .MuiChip-deleteIcon": {
204
+ flexShrink: 0,
205
+ "& path": {
206
+ stroke: "#0F172A !important"
207
+ }
208
+ },
209
+ "&:hover": {
210
+ opacity: 0.8
211
+ }
212
+ }
213
+ }, index))
214
+ }), /*#__PURE__*/_jsx(PopoverComponent, {
215
+ id: id,
216
+ open: open,
217
+ anchorEl: anchorEl,
218
+ anchor: "bottom",
219
+ onClose: e => handleClosePopover(e),
220
+ anchorOrigin: {
221
+ vertical: "top",
222
+ horizontal: "left"
223
+ },
224
+ transformOrigin: {
225
+ vertical: "top",
226
+ horizontal: "left"
227
+ },
228
+ sx: {
229
+ "& .MuiPaper-root": {
230
+ borderRadius: "20px",
231
+ background: theme?.palette?.editor?.textFormatBgColor,
232
+ border: `1px solid ${theme?.palette?.editor?.popUpBorderColor}`,
233
+ boxShadow: "0px 4px 10px 0px #00000029"
234
+ }
235
+ },
236
+ disableAutoFocus: true,
237
+ disableEnforceFocus: true,
238
+ disableRestoreFocus: true,
239
+ children: /*#__PURE__*/_jsxs(Box, {
240
+ sx: {
241
+ width: isMobile ? "100%" : 300
242
+ },
243
+ children: [/*#__PURE__*/_jsx(Autocomplete, {
244
+ multiple: true,
245
+ freeSolo: true,
246
+ disablePortal: true,
247
+ PopperComponent: () => null,
248
+ sx: {
249
+ "& .MuiFormControl-root": {
250
+ maxHeight: "250px",
251
+ overflowY: "auto",
252
+ overflowX: "hidden",
253
+ pr: "12px",
254
+ pl: "12px",
255
+ marginTop: "12px",
256
+ ...customScrollStyles
257
+ }
258
+ },
259
+ disableClearable: true,
260
+ options: [],
261
+ getOptionLabel: option => options?.value || "",
262
+ value: selectedOptions,
263
+ onChange: (event, newValues) => {
264
+ const addedOptions = newValues?.filter(value => typeof value === "object" || typeof value === "string" && value?.trim() !== "")?.map(value => typeof value === "string" ? {
265
+ value,
266
+ color: chipColor
267
+ } : value);
268
+ const isDuplicate = addedOptions?.some(newOpt => (selectedOptions || [])?.some(opt => opt.value === newOpt.value));
269
+ if (!isDuplicate) {
270
+ setSelectedOptions([...selectedOptions, ...addedOptions]);
271
+ }
272
+ },
273
+ inputValue: inputValue,
274
+ onInputChange: (event, newInputValue) => setInputValue(newInputValue),
275
+ onKeyDown: event => {
276
+ if (event.key === "Enter" && inputValue.trim()) {
277
+ event.preventDefault();
278
+ handleAddOption(inputValue);
279
+ }
280
+ },
281
+ filterOptions: (options, params) => options?.filter(option => option?.value?.toLowerCase()?.includes(params?.inputValue?.toLowerCase())),
282
+ renderInput: params => /*#__PURE__*/_jsx(TextField, {
283
+ ...params,
284
+ variant: "standard",
285
+ InputProps: {
286
+ ...params.InputProps,
287
+ disableUnderline: true,
288
+ sx: {
289
+ display: "flex",
290
+ flexWrap: "wrap",
291
+ fontFamily: "Inter",
292
+ fontWeight: 400,
293
+ fontSize: "12px",
294
+ color: theme?.palette?.editor?.secondaryTextColor,
295
+ "&::placeholder": {
296
+ color: theme?.palette?.editor?.secondaryTextColor
297
+ },
298
+ "& .MuiAutocomplete-input": {
299
+ minWidth: "100px !important"
300
+ }
301
+ },
302
+ endAdornment: /*#__PURE__*/_jsx(Tooltip, {
303
+ arrow: true,
304
+ title: "Clear Selected",
305
+ children: /*#__PURE__*/_jsx(IconButton, {
306
+ onClick: handleClearSelection,
307
+ sx: {
308
+ padding: 0,
309
+ minWidth: "unset",
310
+ "& .MuiSvgIcon-root": {
311
+ fontSize: 20
312
+ },
313
+ "& rect": {
314
+ fill: theme?.palette?.editor?.closeButtonSvgStroke
315
+ },
316
+ "&:hover": {
317
+ backgroundColor: "transparent"
318
+ }
319
+ },
320
+ children: /*#__PURE__*/_jsx(Icon, {
321
+ icon: "resetIconNew"
322
+ })
323
+ })
324
+ })
325
+ },
326
+ sx: {
327
+ backgroundColor: "transparent",
328
+ fontFamily: "Inter",
329
+ fontWeight: 400,
330
+ fontSize: "12px"
331
+ },
332
+ placeholder: "Create new one..."
333
+ }),
334
+ renderTags: (tagValues, getTagProps) => tagValues.map((option, index) => /*#__PURE__*/_jsx(Chip, {
335
+ variant: "filled",
336
+ label: option?.value,
337
+ ...getTagProps({
338
+ index
339
+ }),
340
+ onDelete: event => {
341
+ handleDeleteChip(event, option);
342
+ },
343
+ deleteIcon: /*#__PURE__*/_jsx(CloseIcon, {}),
344
+ sx: {
345
+ backgroundColor: option?.color,
346
+ color: "#0F172A",
347
+ "& .MuiChip-deleteIcon": {
348
+ flexShrink: 0,
349
+ "& path": {
350
+ stroke: "#0F172A !important"
351
+ }
352
+ },
353
+ "&:hover": {
354
+ opacity: 0.8
355
+ }
356
+ }
357
+ }, index))
358
+ }), /*#__PURE__*/_jsx(Divider, {
359
+ sx: {
360
+ mt: "12px",
361
+ borderBottom: `1px solid ${theme?.palette?.editor?.popUpBorderColor}`,
362
+ boxShadow: theme?.palette?.editor?.dividerDropShadow
363
+ }
364
+ }), /*#__PURE__*/_jsx(Box, {
365
+ sx: {
366
+ pl: "4px"
367
+ },
368
+ children: /*#__PURE__*/_jsxs(List, {
369
+ sx: {
370
+ maxHeight: "250px",
371
+ overflowY: "auto",
372
+ ...customScrollStyles
373
+ },
374
+ children: [/*#__PURE__*/_jsx(Typography, {
375
+ sx: {
376
+ mb: 1,
377
+ pl: "8px",
378
+ color: theme?.palette?.editor?.secondaryTextColor,
379
+ fontFamily: "Inter",
380
+ fontWeight: 400,
381
+ fontSize: "12px"
382
+ },
383
+ children: "Choose an option or create one"
384
+ }), filteredOptions?.map((option, index) => /*#__PURE__*/_jsx(ListItem, {
385
+ sx: {
386
+ padding: 0
387
+ },
388
+ disablePadding: true,
389
+ children: /*#__PURE__*/_jsxs(ListItemButton, {
390
+ onClick: () => handleSelectOption(option),
391
+ sx: {
392
+ paddingTop: "4px",
393
+ paddingBottom: "4px",
394
+ justifyContent: "space-between",
395
+ "&:hover": {
396
+ "& path": {
397
+ stroke: theme?.palette?.editor?.activeColor
398
+ },
399
+ borderRadius: "12px"
400
+ }
401
+ },
402
+ children: [/*#__PURE__*/_jsx(Chip, {
403
+ label: option?.value,
404
+ sx: {
405
+ backgroundColor: option?.color,
406
+ color: "#0F172A",
407
+ fontWeight: 500,
408
+ fontSize: "12px",
409
+ fontFamily: "Inter",
410
+ padding: "4px 12px",
411
+ borderRadius: "16px",
412
+ maxWidth: "180px",
413
+ whiteSpace: "nowrap",
414
+ overflow: "hidden",
415
+ textOverflow: "ellipsis"
416
+ }
417
+ }), /*#__PURE__*/_jsx(IconButton, {
418
+ size: "small",
419
+ sx: {
420
+ "& path": {
421
+ stroke: theme?.palette?.editor?.closeButtonSvgStroke
422
+ },
423
+ "&:hover": {
424
+ backgroundColor: "transparent"
425
+ }
426
+ },
427
+ onClick: e => handleEditOption(e, index),
428
+ children: /*#__PURE__*/_jsx(Icon, {
429
+ icon: "rightArrow"
430
+ })
431
+ })]
432
+ })
433
+ }, index)), inputValue?.trim() && !isExactMatch && /*#__PURE__*/_jsx(ListItem, {
434
+ disablePadding: true,
435
+ children: /*#__PURE__*/_jsxs(ListItemButton, {
436
+ onClick: () => handleAddOption(inputValue),
437
+ sx: {
438
+ display: "flex",
439
+ alignItems: "center"
440
+ },
441
+ children: [/*#__PURE__*/_jsx(Typography, {
442
+ sx: {
443
+ color: theme?.palette?.editor?.secondaryTextColor,
444
+ marginRight: "6px",
445
+ fontSize: "14px",
446
+ fontFamily: "Inter"
447
+ },
448
+ children: "Create"
449
+ }), /*#__PURE__*/_jsx(Chip, {
450
+ label: `${inputValue}`,
451
+ sx: {
452
+ backgroundColor: chipColor,
453
+ color: "#0F172A",
454
+ fontWeight: 500,
455
+ fontSize: "12px",
456
+ fontFamily: "Inter",
457
+ borderRadius: "16px",
458
+ maxWidth: "180px",
459
+ whiteSpace: "nowrap",
460
+ overflow: "hidden",
461
+ textOverflow: "ellipsis"
462
+ }
463
+ })]
464
+ })
465
+ })]
466
+ })
467
+ })]
468
+ })
469
+ }), openEditOption ? /*#__PURE__*/_jsx(PropertySettings, {
470
+ open: openEditOption,
471
+ anchorEl: anchorElOption,
472
+ mode: mode,
473
+ onClose: onClose,
474
+ onEvent: onEditOption,
475
+ translation: translation
476
+ }) : null, showSnackBar ? /*#__PURE__*/_jsx(SnackbarAlert, {
477
+ message: "Option already selected!",
478
+ setShowSnackBar: setShowSnackBar
479
+ }) : null]
480
+ });
481
+ };
482
+ export default MultiSelectWithPopover;