@flozy/editor 10.5.6 → 10.5.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 (169) hide show
  1. package/dist/Editor/ChatEditor.js +17 -16
  2. package/dist/Editor/CommonEditor.js +128 -14
  3. package/dist/Editor/DialogWrapper.js +31 -25
  4. package/dist/Editor/Editor.css +49 -11
  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/DataTypes/Components/{MultiSelect.js → SelectV1.js} +125 -69
  16. package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +10 -10
  17. package/dist/Editor/Elements/DataView/Layouts/DataTypes/SelectType.js +28 -9
  18. package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +12 -5
  19. package/dist/Editor/Elements/DataView/Layouts/Options/EditOption.js +40 -14
  20. package/dist/Editor/Elements/Divider/Divider.js +1 -1
  21. package/dist/Editor/Elements/Embed/Video.js +1 -1
  22. package/dist/Editor/Elements/Form/Form.js +3 -3
  23. package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +0 -1
  24. package/dist/Editor/Elements/Form/FormField.js +1 -1
  25. package/dist/Editor/Elements/Form/Workflow/Styles.js +24 -22
  26. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +35 -31
  27. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +7 -4
  28. package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +1 -0
  29. package/dist/Editor/Elements/FreeGrid/Options/More.js +7 -7
  30. package/dist/Editor/Elements/FreeGrid/Options/sectionItemOptions.js +1 -1
  31. package/dist/Editor/Elements/FreeGrid/helper.js +115 -0
  32. package/dist/Editor/Elements/FreeGrid/styles.js +14 -0
  33. package/dist/Editor/Elements/Grid/Grid.js +14 -2
  34. package/dist/Editor/Elements/Grid/GridItem.js +1 -1
  35. package/dist/Editor/Elements/Signature/Signature.css +2 -1
  36. package/dist/Editor/Elements/Signature/SignatureOptions/DrawSignature.js +18 -5
  37. package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +16 -3
  38. package/dist/Editor/Elements/SimpleText/style.js +2 -2
  39. package/dist/Editor/Elements/Table/AddRowCol.js +8 -2
  40. package/dist/Editor/Elements/Table/DragButton.js +0 -1
  41. package/dist/Editor/Elements/Table/Draggable.js +6 -2
  42. package/dist/Editor/Elements/Table/Styles.js +7 -0
  43. package/dist/Editor/Elements/Table/Table.js +3 -3
  44. package/dist/Editor/Elements/Table/TableCell.js +24 -5
  45. package/dist/Editor/Elements/Title/title.js +6 -6
  46. package/dist/Editor/Elements/Variables/VariableButton.js +10 -1
  47. package/dist/Editor/MiniEditor.js +2 -1
  48. package/dist/Editor/Styles/EditorStyles.js +4 -4
  49. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +27 -3
  50. package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +4 -3
  51. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  52. package/dist/Editor/Toolbar/FormatTools/TextSize.js +10 -13
  53. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +2 -1
  54. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +4 -2
  55. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +6 -13
  56. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +167 -42
  57. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +7 -4
  58. package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +2 -1
  59. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +73 -13
  60. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +58 -10
  61. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +439 -0
  62. package/dist/Editor/Toolbar/PopupTool/index.js +12 -5
  63. package/dist/Editor/Toolbar/toolbarGroups.js +48 -6
  64. package/dist/Editor/assets/svg/BackIcon.js +18 -0
  65. package/dist/Editor/assets/svg/ThemeIcons.js +293 -0
  66. package/dist/Editor/common/Checkbox/index.js +46 -0
  67. package/dist/Editor/common/Checkbox/styles.js +45 -0
  68. package/dist/Editor/common/ColorPickerButton.js +41 -16
  69. package/dist/Editor/common/CustomColorPicker/index.js +130 -0
  70. package/dist/Editor/common/CustomColorPicker/style.js +53 -0
  71. package/dist/Editor/common/CustomDialog2/index.js +94 -0
  72. package/dist/Editor/common/CustomDialog2/style.js +67 -0
  73. package/dist/Editor/common/CustomSelect.js +43 -0
  74. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  75. package/dist/Editor/common/FontLoader/FontLoader.js +3 -0
  76. package/dist/Editor/common/Icon.js +28 -0
  77. package/dist/Editor/common/ImageSelector/ImageSelector.js +2 -2
  78. package/dist/Editor/common/ImageSelector/Styles.js +3 -9
  79. package/dist/Editor/common/LinkSettings/NavComponents.js +45 -65
  80. package/dist/Editor/common/LinkSettings/index.js +14 -28
  81. package/dist/Editor/common/LinkSettings/navOptions.js +2 -2
  82. package/dist/Editor/common/LinkSettings/style.js +164 -244
  83. package/dist/Editor/common/RadioGroup/index.js +48 -0
  84. package/dist/Editor/common/RadioGroup/styles.js +29 -0
  85. package/dist/Editor/common/RnD/ElementOptions/Actions.js +4 -5
  86. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +2 -1
  87. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Signature.js +4 -3
  88. package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +3 -2
  89. package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +3 -2
  90. package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +3 -2
  91. package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +3 -2
  92. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +4 -2
  93. package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +3 -2
  94. package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +3 -2
  95. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +3 -1
  96. package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +3 -2
  97. package/dist/Editor/common/RnD/ElementSettings/styles.js +0 -1
  98. package/dist/Editor/common/RnD/OptionsPopup/style.js +0 -1
  99. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +11 -2
  100. package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +17 -0
  101. package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +6 -3
  102. package/dist/Editor/common/RnD/Utils/gridDropItem.js +28 -19
  103. package/dist/Editor/common/RnD/Utils/index.js +3 -1
  104. package/dist/Editor/common/RnD/VirtualElement/VirtualTextElement.js +42 -58
  105. package/dist/Editor/common/RnD/VirtualElement/helper.js +323 -132
  106. package/dist/Editor/common/RnD/VirtualElement/styles.js +16 -0
  107. package/dist/Editor/common/RnD/index.js +67 -38
  108. package/dist/Editor/common/Select/index.js +44 -7
  109. package/dist/Editor/common/Select/styles.js +30 -2
  110. package/dist/Editor/common/Shorthands/elements.js +54 -0
  111. package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +2 -2
  112. package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js +12 -9
  113. package/dist/Editor/common/StyleBuilder/buttonStyle.js +4 -2
  114. package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +4 -0
  115. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +5 -0
  116. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +12 -2
  117. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +15 -7
  118. package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +16 -8
  119. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +36 -10
  120. package/dist/Editor/common/StyleBuilder/fieldTypes/embedUpload.js +115 -0
  121. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +16 -7
  122. package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +3 -1
  123. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +15 -7
  124. package/dist/Editor/common/SwipeableDrawer/style.js +14 -12
  125. package/dist/Editor/common/Uploader.js +16 -0
  126. package/dist/Editor/common/iconListV2.js +76 -0
  127. package/dist/Editor/common/iconslist.js +21 -0
  128. package/dist/Editor/commonStyle.js +116 -61
  129. package/dist/Editor/helper/deserialize/index.js +6 -4
  130. package/dist/Editor/helper/index.js +5 -1
  131. package/dist/Editor/helper/textIndeces.js +58 -0
  132. package/dist/Editor/helper/theme.js +203 -2
  133. package/dist/Editor/hooks/useEditorTheme.js +153 -0
  134. package/dist/Editor/hooks/useMouseMove.js +9 -3
  135. package/dist/Editor/hooks/useTable.js +5 -4
  136. package/dist/Editor/hooks/useThemeValues.js +63 -0
  137. package/dist/Editor/plugins/withEmbeds.js +1 -1
  138. package/dist/Editor/plugins/withHTML.js +14 -5
  139. package/dist/Editor/plugins/withTable.js +1 -1
  140. package/dist/Editor/theme/ThemeList.js +50 -173
  141. package/dist/Editor/theme/index.js +149 -0
  142. package/dist/Editor/themeSettings/ActiveTheme.js +82 -0
  143. package/dist/Editor/themeSettings/buttons/index.js +300 -0
  144. package/dist/Editor/themeSettings/buttons/style.js +23 -0
  145. package/dist/Editor/themeSettings/colorTheme/index.js +310 -0
  146. package/dist/Editor/themeSettings/colorTheme/style.js +81 -0
  147. package/dist/Editor/themeSettings/fonts/PreviewElement.js +121 -0
  148. package/dist/Editor/themeSettings/fonts/index.js +240 -0
  149. package/dist/Editor/themeSettings/fonts/style.js +62 -0
  150. package/dist/Editor/themeSettings/icons.js +60 -0
  151. package/dist/Editor/themeSettings/index.js +380 -0
  152. package/dist/Editor/themeSettings/style.js +299 -0
  153. package/dist/Editor/themeSettingsAI/icons.js +96 -0
  154. package/dist/Editor/themeSettingsAI/index.js +355 -0
  155. package/dist/Editor/themeSettingsAI/saveTheme.js +202 -0
  156. package/dist/Editor/themeSettingsAI/style.js +332 -0
  157. package/dist/Editor/utils/SlateUtilityFunctions.js +161 -37
  158. package/dist/Editor/utils/accordion.js +26 -7
  159. package/dist/Editor/utils/button.js +1 -17
  160. package/dist/Editor/utils/customHooks/useTableResize.js +49 -9
  161. package/dist/Editor/utils/draftToSlate.js +3 -2
  162. package/dist/Editor/utils/events.js +50 -6
  163. package/dist/Editor/utils/font.js +40 -37
  164. package/dist/Editor/utils/formfield.js +1 -0
  165. package/dist/Editor/utils/helper.js +142 -28
  166. package/dist/Editor/utils/insertAppHeader.js +1 -1
  167. package/dist/Editor/utils/signature.js +2 -9
  168. package/dist/Editor/utils/updateFormName.js +22 -0
  169. package/package.json +4 -4
@@ -10,10 +10,10 @@ import List from "@mui/material/List";
10
10
  import ListItem from "@mui/material/ListItem";
11
11
  import ListItemButton from "@mui/material/ListItemButton";
12
12
  import IconButton from "@mui/material/IconButton";
13
- import SwipeableDrawer from "@mui/material/SwipeableDrawer";
14
13
  import Tooltip from "@mui/material/Tooltip";
15
14
  import { CloseIcon } from "../../../../../common/iconslist";
16
15
  import { useEditorContext } from "../../../../../hooks/useMouseMove";
16
+ import SwipeableDrawer from "@mui/material/SwipeableDrawer";
17
17
  import Icon from "../../../../../common/Icon";
18
18
  import { colors } from "../../../../Color Picker/defaultColors";
19
19
  import PropertySettings from "../../Options";
@@ -26,41 +26,73 @@ const generateRandomColor = () => {
26
26
  const randomIndex = Math.floor(Math.random() * DEFAULT_COLORS?.length);
27
27
  return DEFAULT_COLORS[randomIndex];
28
28
  };
29
- const MultiSelectWithPopover = props => {
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 SelectV1 = props => {
30
35
  const {
31
- options = [],
32
36
  value,
33
- onChange,
34
- onUpdate,
37
+ options = [],
38
+ selectMultiple,
35
39
  property,
36
40
  wrapColumn = false,
41
+ onChange,
42
+ onUpdate,
37
43
  translation
38
44
  } = props;
39
45
  const [anchorEl, setAnchorEl] = useState(null);
40
46
  const [anchorElOption, setAnchorElOption] = useState(null);
41
47
  const [currentIndex, setCurrentIndex] = useState(null);
42
- const [selectedOptions, setSelectedOptions] = useState(value);
43
- const [availableOptions, setAvailableOptions] = useState(options);
48
+ const [selectedOptions, setSelectedOptions] = useState([]);
49
+ const [availableOptions, setAvailableOptions] = useState([]);
44
50
  const [showSnackBar, setShowSnackBar] = useState(false);
45
51
  const [chipColor, setChipColor] = useState(generateRandomColor());
46
52
  const [inputValue, setInputValue] = useState("");
53
+ const [availableOptionsMap, setAvailableOptionsMap] = useState({});
54
+ const [resolvedSelectedOptions, setResolvedSelectedOptions] = useState([]);
47
55
  const {
48
56
  theme
49
57
  } = useEditorContext();
50
58
  const isMobile = window.matchMedia("(max-width: 899px)")?.matches || false;
51
59
  const PopoverComponent = isMobile ? SwipeableDrawer : Popover;
60
+ useEffect(() => {
61
+ const obj = {};
62
+ for (const opt of availableOptions) {
63
+ if (opt?.id != null) {
64
+ obj[opt.id] = opt;
65
+ }
66
+ }
67
+ setAvailableOptionsMap(obj);
68
+ }, [availableOptions]);
69
+ useEffect(() => {
70
+ const resolved = selectedOptions?.filter(sel => sel?.id && availableOptionsMap?.[sel.id])?.map(sel => availableOptionsMap[sel?.id]) ?? [];
71
+ setResolvedSelectedOptions(resolved);
72
+ }, [selectedOptions, availableOptionsMap]);
73
+ useEffect(() => {
74
+ const enrichedAvailable = hasIds(options) ? options : generateStableIds(options);
75
+ setAvailableOptions(enrichedAvailable);
76
+ const enrichedSelected = hasIds(value) ? value : value?.map(sel => {
77
+ const match = enrichedAvailable.find(opt => opt?.value === sel?.value);
78
+ return match ? {
79
+ id: match.id
80
+ } : sel;
81
+ });
82
+ setSelectedOptions(enrichedSelected);
83
+ }, []);
52
84
  const mode = useMemo(() => ({
53
85
  type: "editOptionMulti",
54
86
  edit: {
55
- label: "Multi Select",
87
+ label: selectMultiple ? "Multi Select" : "Select",
56
88
  visible: true,
57
89
  key: property,
58
- type: "multi-select",
59
- options: options || [],
90
+ type: selectMultiple ? "multi-select" : "select",
91
+ options: availableOptions || [],
60
92
  optionIndex: currentIndex,
61
93
  hideBackButton: true
62
94
  }
63
- }), [options, property, currentIndex]);
95
+ }), [availableOptions, property, currentIndex, selectMultiple]);
64
96
  const customScrollStyles = {
65
97
  scrollbarWidth: "thin",
66
98
  scrollbarColor: `${theme?.palette?.editor?.brainPopupScroll} transparent`,
@@ -81,10 +113,12 @@ const MultiSelectWithPopover = props => {
81
113
  }
82
114
  }, [inputValue, chipColor]);
83
115
  useEffect(() => {
84
- if (JSON.stringify(options) !== JSON.stringify(availableOptions)) {
85
- setAvailableOptions(options);
116
+ const enriched = hasIds(options) ? options : generateStableIds(options);
117
+ const isDifferent = JSON.stringify(enriched) !== JSON.stringify(availableOptions);
118
+ if (isDifferent) {
119
+ setAvailableOptions(enriched);
86
120
  }
87
- }, [options, availableOptions]);
121
+ }, [options]);
88
122
  const handleOpenPopover = useCallback(event => {
89
123
  setAnchorEl(event.currentTarget);
90
124
  }, []);
@@ -93,17 +127,40 @@ const MultiSelectWithPopover = props => {
93
127
  setAnchorEl(null);
94
128
  }, []);
95
129
  const handleAddOption = newValue => {
96
- const trimmedValue = newValue?.trim();
130
+ const trimmedValue = newValue?.trim?.();
97
131
  if (!trimmedValue) return;
132
+ const isDuplicate = availableOptions.some(opt => opt.value.toLowerCase() === trimmedValue.toLowerCase());
133
+ if (isDuplicate) {
134
+ const existing = availableOptions.find(opt => opt?.value?.toLowerCase() === trimmedValue?.toLowerCase());
135
+ const alreadySelected = selectedOptions?.some(sel => sel?.id === existing?.id);
136
+ if (!alreadySelected) {
137
+ const updatedSelected = selectMultiple ? [...selectedOptions, {
138
+ id: existing.id
139
+ }] : [{
140
+ id: existing.id
141
+ }];
142
+ setSelectedOptions(updatedSelected);
143
+ onChange?.(updatedSelected);
144
+ }
145
+ setInputValue("");
146
+ setChipColor("");
147
+ return;
148
+ }
98
149
  const newOption = {
99
150
  value: trimmedValue,
100
- color: chipColor
151
+ color: chipColor,
152
+ id: `multi_${Date.now().toString(36)}_${Math.random().toString(36).substring(2, 5)}`
101
153
  };
102
- if (!availableOptions?.some(opt => opt?.value === trimmedValue)) {
103
- setAvailableOptions(prev => [...prev, newOption]);
104
- setSelectedOptions(prev => [...prev, newOption]);
105
- onUpdate([newOption, ...availableOptions]);
106
- }
154
+ const updatedAvailableOptions = [...availableOptions, newOption];
155
+ const updatedSelectedOptions = selectMultiple ? [...selectedOptions, {
156
+ id: newOption.id
157
+ }] : [{
158
+ id: newOption.id
159
+ }];
160
+ setAvailableOptions(updatedAvailableOptions);
161
+ setSelectedOptions(updatedSelectedOptions);
162
+ onUpdate?.(updatedAvailableOptions);
163
+ onChange?.(updatedSelectedOptions);
107
164
  setInputValue("");
108
165
  setChipColor("");
109
166
  };
@@ -114,11 +171,6 @@ const MultiSelectWithPopover = props => {
114
171
  const onEditOption = (type, data) => {
115
172
  const updateData = data?.edit ? data?.edit?.options : data?.options;
116
173
  onUpdate(updateData);
117
- if (data?.edit?.options) {
118
- const updatedSelectedOptions = selectedOptions?.filter(selOption => updateData?.some(availOption => availOption?.value === selOption?.value && availOption?.color === selOption?.color));
119
- setSelectedOptions(updatedSelectedOptions);
120
- onClose();
121
- }
122
174
  };
123
175
  const handleEditOption = (e, index) => {
124
176
  e.stopPropagation();
@@ -127,12 +179,20 @@ const MultiSelectWithPopover = props => {
127
179
  setAnchorEl(null);
128
180
  };
129
181
  const handleSelectOption = option => {
130
- if (!selectedOptions?.some(opt => opt?.value === option?.value)) {
131
- const updatedOptions = [...selectedOptions, option];
132
- setSelectedOptions(updatedOptions);
133
- onChange(updatedOptions);
134
- } else {
182
+ const isAlreadySelected = selectedOptions.some(opt => opt?.id === option?.id);
183
+ if (isAlreadySelected) {
135
184
  setShowSnackBar(true);
185
+ return;
186
+ }
187
+ const updatedOptions = selectMultiple ? [...selectedOptions, {
188
+ id: option?.id
189
+ }] : [{
190
+ id: option?.id
191
+ }];
192
+ setSelectedOptions(updatedOptions);
193
+ onChange(updatedOptions);
194
+ if (!selectMultiple) {
195
+ handleClosePopover();
136
196
  }
137
197
  };
138
198
  const handleClearSelection = () => {
@@ -140,11 +200,9 @@ const MultiSelectWithPopover = props => {
140
200
  };
141
201
  const handleDeleteChip = (event, option) => {
142
202
  event.stopPropagation();
143
- setSelectedOptions(prev => {
144
- const updatedOptions = prev.filter(selected => selected?.value !== option?.value);
145
- onChange(updatedOptions);
146
- return updatedOptions;
147
- });
203
+ const updatedOptions = selectedOptions?.filter(selected => selected?.id !== option?.id);
204
+ setSelectedOptions(updatedOptions);
205
+ onChange(selectMultiple ? updatedOptions : updatedOptions[0] || null);
148
206
  };
149
207
  const filteredOptions = availableOptions?.filter(option => option?.value?.toLowerCase()?.includes(inputValue?.toLowerCase()));
150
208
  const isExactMatch = availableOptions?.some(opt => opt?.value?.toLowerCase() === inputValue?.toLowerCase());
@@ -162,7 +220,7 @@ const MultiSelectWithPopover = props => {
162
220
  cursor: "pointer"
163
221
  },
164
222
  onClick: handleOpenPopover,
165
- children: selectedOptions?.map((option, index) => /*#__PURE__*/_jsx(Chip, {
223
+ children: resolvedSelectedOptions?.map((option, index) => /*#__PURE__*/_jsx(Chip, {
166
224
  label: option?.value,
167
225
  onDelete: event => {
168
226
  handleDeleteChip(event, option);
@@ -230,16 +288,12 @@ const MultiSelectWithPopover = props => {
230
288
  },
231
289
  disableClearable: true,
232
290
  options: [],
233
- getOptionLabel: option => options?.value || "",
234
- value: selectedOptions,
291
+ getOptionLabel: () => "",
292
+ value: resolvedSelectedOptions,
235
293
  onChange: (event, newValues) => {
236
- const addedOptions = newValues?.filter(value => typeof value === "object" || typeof value === "string" && value?.trim() !== "")?.map(value => typeof value === "string" ? {
237
- value,
238
- color: chipColor
239
- } : value);
240
- const isDuplicate = addedOptions?.some(newOpt => (selectedOptions || [])?.some(opt => opt.value === newOpt.value));
241
- if (!isDuplicate) {
242
- setSelectedOptions([...selectedOptions, ...addedOptions]);
294
+ const stringOptions = newValues.filter(val => typeof val === "string" && val.trim());
295
+ for (const str of stringOptions) {
296
+ handleAddOption(str);
243
297
  }
244
298
  },
245
299
  inputValue: inputValue,
@@ -303,30 +357,32 @@ const MultiSelectWithPopover = props => {
303
357
  },
304
358
  placeholder: "Create new one..."
305
359
  }),
306
- renderTags: (tagValues, getTagProps) => tagValues.map((option, index) => /*#__PURE__*/_jsx(Chip, {
307
- variant: "filled",
308
- label: option?.value,
309
- ...getTagProps({
310
- index
311
- }),
312
- onDelete: event => {
313
- handleDeleteChip(event, option);
314
- },
315
- deleteIcon: /*#__PURE__*/_jsx(CloseIcon, {}),
316
- sx: {
317
- backgroundColor: option?.color,
318
- color: '#0F172A',
319
- "& .MuiChip-deleteIcon": {
320
- flexShrink: 0,
321
- "& path": {
322
- stroke: '#0F172A !important'
323
- }
360
+ renderTags: (tagValues, getTagProps) => {
361
+ return tagValues?.map((option, index) => /*#__PURE__*/_jsx(Chip, {
362
+ variant: "filled",
363
+ label: option?.value,
364
+ ...getTagProps({
365
+ index
366
+ }),
367
+ onDelete: event => {
368
+ handleDeleteChip(event, option);
324
369
  },
325
- "&:hover": {
326
- opacity: 0.8
370
+ deleteIcon: /*#__PURE__*/_jsx(CloseIcon, {}),
371
+ sx: {
372
+ backgroundColor: option?.color,
373
+ color: '#0F172A',
374
+ "& .MuiChip-deleteIcon": {
375
+ flexShrink: 0,
376
+ "& path": {
377
+ stroke: '#0F172A !important'
378
+ }
379
+ },
380
+ "&:hover": {
381
+ opacity: 0.8
382
+ }
327
383
  }
328
- }
329
- }, index))
384
+ }, index));
385
+ }
330
386
  }), /*#__PURE__*/_jsx(Divider, {
331
387
  sx: {
332
388
  mt: '12px',
@@ -451,4 +507,4 @@ const MultiSelectWithPopover = props => {
451
507
  }) : null]
452
508
  });
453
509
  };
454
- export default MultiSelectWithPopover;
510
+ export default SelectV1;
@@ -1,6 +1,6 @@
1
1
  import React from "react";
2
2
  import { useDataView } from "../../Providers/DataViewProvider";
3
- import MultiSelectWithPopover from "./Components/MultiSelect";
3
+ import SelectV1 from "./Components/SelectV1";
4
4
  import { jsx as _jsx } from "react/jsx-runtime";
5
5
  const MultiSelectType = props => {
6
6
  const {
@@ -24,30 +24,30 @@ const MultiSelectType = props => {
24
24
  const coloredValues = [...(value || [])]?.map(m => {
25
25
  return {
26
26
  ...m,
27
- color: options?.find(f => f.value === m.value)?.color || "#FFF"
27
+ color: (options || []).find(f => f?.value === m?.value || f?.id === m?.id)?.color || "#FFF"
28
28
  };
29
29
  });
30
30
  const handleChange = data => {
31
31
  onChange(rowIndex, {
32
- [property]: data?.filter(f => f?.value)
32
+ [property]: data?.filter(f => f?.id)
33
33
  });
34
34
  };
35
35
  const handleUpdate = data => {
36
36
  const updateData = {
37
- "label": "Multi Select",
38
- "visible": true,
39
- "key": property,
40
- "type": "multi-select",
41
- "options": data
37
+ label: "Multi Select",
38
+ visible: true,
39
+ key: property,
40
+ type: "multi-select",
41
+ options: data
42
42
  };
43
43
  onUpdateProperty(updateData);
44
44
  };
45
- return /*#__PURE__*/_jsx(MultiSelectWithPopover, {
45
+ return /*#__PURE__*/_jsx(SelectV1, {
46
46
  value: coloredValues,
47
47
  onChange: handleChange,
48
48
  onUpdate: handleUpdate,
49
49
  options: options,
50
- multiple: true,
50
+ selectMultiple: true,
51
51
  limitTags: 2,
52
52
  placeholder: label,
53
53
  disabled: readOnly,
@@ -1,6 +1,6 @@
1
1
  import React from "react";
2
2
  import { useDataView } from "../../Providers/DataViewProvider";
3
- import Select from "./Components/Select";
3
+ import SelectV1 from "./Components/SelectV1";
4
4
  import { jsx as _jsx } from "react/jsx-runtime";
5
5
  const SelectType = props => {
6
6
  const {
@@ -8,28 +8,47 @@ const SelectType = props => {
8
8
  property,
9
9
  value,
10
10
  options,
11
- readOnly
11
+ readOnly,
12
+ translation
12
13
  } = props;
13
14
  const {
14
- onChange
15
+ onChange,
16
+ onUpdateProperty
15
17
  } = useDataView();
18
+ const label = "";
16
19
  const coloredValues = [...(value || [])]?.map(m => {
17
20
  return {
18
21
  ...m,
19
- color: options?.find(f => f.value === m.value)?.color
22
+ color: (options || []).find(f => f?.value === m?.value || f?.id === m?.id)?.color || "#FFF"
20
23
  };
21
24
  });
22
25
  const handleChange = data => {
23
26
  onChange(rowIndex, {
24
- [property]: data?.filter(f => f?.value)
27
+ [property]: data?.filter(f => f?.id)
25
28
  });
26
29
  };
27
- return /*#__PURE__*/_jsx(Select, {
30
+ const handleUpdate = data => {
31
+ const updateData = {
32
+ "label": "Select",
33
+ "visible": true,
34
+ "key": property,
35
+ "type": "select",
36
+ "options": data
37
+ };
38
+ onUpdateProperty(updateData);
39
+ };
40
+ return /*#__PURE__*/_jsx(SelectV1, {
28
41
  value: coloredValues,
29
- onChange: handleChange,
30
42
  options: options,
31
- multiple: false,
32
- disabled: readOnly
43
+ selectMultiple: false,
44
+ disabled: readOnly,
45
+ limitTags: 2,
46
+ placeholder: label,
47
+ property: property,
48
+ wrapColumn: false,
49
+ onChange: handleChange,
50
+ onUpdate: handleUpdate,
51
+ translation: translation
33
52
  });
34
53
  };
35
54
  export default SelectType;
@@ -1,4 +1,4 @@
1
- import React, { useState } from "react";
1
+ import React, { useEffect, useRef, useState } from "react";
2
2
  import { Box, List, ListItemButton, ListItemText, ListItemIcon, TextField, Chip } from "@mui/material";
3
3
  import { colors } from "../../../Color Picker/defaultColors";
4
4
  import Icon from "../../../../common/Icon";
@@ -20,8 +20,14 @@ const AddOptions = props => {
20
20
  const [value, setValue] = useState("");
21
21
  const [error, setError] = useState("");
22
22
  const {
23
- options
23
+ options = []
24
24
  } = edit;
25
+ const inputRef = useRef();
26
+ useEffect(() => {
27
+ if (inputRef?.current) {
28
+ inputRef.current.focus();
29
+ }
30
+ }, [addBox, options]);
25
31
  const onAddBox = () => {
26
32
  setAddBox(!addBox);
27
33
  };
@@ -40,7 +46,8 @@ const AddOptions = props => {
40
46
  ...edit,
41
47
  options: [{
42
48
  value: value,
43
- color: getRandomColor()
49
+ color: getRandomColor(),
50
+ id: `multi_${Date.now().toString(36)}_${Math.random().toString(36).substring(2, 5)}`
44
51
  }, ...(options || [])]
45
52
  });
46
53
  setValue("");
@@ -60,7 +67,6 @@ const AddOptions = props => {
60
67
  };
61
68
  const onBlur = () => {
62
69
  setValue("");
63
- setAddBox(false);
64
70
  setError("");
65
71
  };
66
72
  return edit?.type === "select" || edit?.type === "multi-select" ? /*#__PURE__*/_jsxs(Box, {
@@ -79,6 +85,7 @@ const AddOptions = props => {
79
85
  })
80
86
  }), addBox ? /*#__PURE__*/_jsx(Box, {
81
87
  children: /*#__PURE__*/_jsx(TextField, {
88
+ inputRef: inputRef,
82
89
  className: "mt",
83
90
  size: "small",
84
91
  fullWidth: true,
@@ -87,7 +94,7 @@ const AddOptions = props => {
87
94
  onChange: handleChange,
88
95
  onBlur: onBlur,
89
96
  helperText: error
90
- })
97
+ }, `input_${options?.length}`)
91
98
  }) : null, /*#__PURE__*/_jsx(List, {
92
99
  children: options?.map((m, i) => {
93
100
  return /*#__PURE__*/_jsxs(ListItemButton, {
@@ -19,6 +19,7 @@ const EditOption = props => {
19
19
  const [edit, setEdit] = useState({
20
20
  ...(mode?.edit || {})
21
21
  });
22
+ const [errorMessage, setErrorMessage] = useState("");
22
23
  const editData = useRef({
23
24
  ...edit
24
25
  });
@@ -31,10 +32,13 @@ const EditOption = props => {
31
32
  const selectedOption = edit?.options[optionIndex] || {};
32
33
  const pickerStyles = ColorPickerStyles(theme);
33
34
  const hideBackButton = edit?.hideBackButton || false;
35
+ const errorMessageRef = useRef(errorMessage);
36
+ useEffect(() => {
37
+ errorMessageRef.current = errorMessage;
38
+ }, [errorMessage]);
34
39
  useEffect(() => {
35
40
  return () => {
36
- // on un-mount update the option change
37
- if (editData?.current) {
41
+ if (editData?.current && !errorMessageRef.current) {
38
42
  delete editData?.current?.edited;
39
43
  onEvent("updateProperty", {
40
44
  ...editData?.current
@@ -43,18 +47,24 @@ const EditOption = props => {
43
47
  };
44
48
  }, []);
45
49
  const onChange = e => {
46
- const updatedOptions = edit?.options.map((m, i) => {
50
+ const {
51
+ name,
52
+ value,
53
+ delete: isDelete
54
+ } = e?.target || {};
55
+ const targetValue = value?.toLowerCase();
56
+ const updatedOptions = edit?.options?.map((m, i) => {
47
57
  if (i === edit?.optionIndex) {
48
58
  return {
49
59
  ...m,
50
- [e.target.name]: e?.target?.value
60
+ [name]: value
51
61
  };
52
62
  }
53
63
  return m;
54
64
  });
55
65
 
56
- // for delete
57
- if (edit?.optionIndex > -1 && e?.target?.delete) {
66
+ // If deleting the option
67
+ if (edit?.optionIndex > -1 && isDelete) {
58
68
  updatedOptions.splice(edit?.optionIndex, 1);
59
69
  }
60
70
  const latest = {
@@ -68,14 +78,28 @@ const EditOption = props => {
68
78
  ...latest,
69
79
  edited: true
70
80
  };
81
+ if (name === "value" && !value?.trim()) {
82
+ setErrorMessage("Option name must not be empty");
83
+ return;
84
+ }
85
+ const isDuplicate = name === "value" && targetValue && edit?.options?.some((op, i) => i !== edit?.optionIndex && op?.value?.toLowerCase?.() === targetValue);
86
+ if (isDuplicate) {
87
+ setErrorMessage("Option name must be unique");
88
+ return;
89
+ }
90
+ setErrorMessage(""); // Clear error on valid input
71
91
 
72
- // if delete go back
73
- if (e?.target?.delete) {
74
- onEvent("editProperty", {
75
- edit: {
76
- ...latest
77
- }
78
- });
92
+ // If delete go back
93
+ if (isDelete) {
94
+ if (hideBackButton) {
95
+ onClose();
96
+ } else {
97
+ onEvent("editProperty", {
98
+ edit: {
99
+ ...latest
100
+ }
101
+ });
102
+ }
79
103
  }
80
104
  };
81
105
  const onBack = () => {
@@ -137,7 +161,9 @@ const EditOption = props => {
137
161
  value: selectedOption?.value,
138
162
  onChange: onChange,
139
163
  fullWidth: true,
140
- placeholder: translation("Option Name")
164
+ placeholder: translation("Option Name"),
165
+ helperText: errorMessage,
166
+ error: !!errorMessage
141
167
  }),
142
168
  labelPlacement: "top"
143
169
  })
@@ -61,7 +61,7 @@ const Divider = props => {
61
61
  className: "element-toolbar dividerIcon",
62
62
  style: {
63
63
  top: "3px",
64
- left: 0
64
+ right: "8px"
65
65
  },
66
66
  children: /*#__PURE__*/_jsx(Tooltip, {
67
67
  title: translation("Divider Settings"),
@@ -89,7 +89,7 @@ const VideoPlaceholder = props => {
89
89
  },
90
90
  children: [/*#__PURE__*/_jsx(Icon, {
91
91
  icon: "video"
92
- }), TYPE_LABELS[type] || translation("Embed Video or Other")]
92
+ }), translation(TYPE_LABELS[type] || "Embed Video or Other")]
93
93
  }) : /*#__PURE__*/_jsxs(Box, {
94
94
  sx: {
95
95
  color: "#64748B !important",
@@ -4,7 +4,6 @@ import { Node } from "slate";
4
4
  import { useSlateStatic, ReactEditor } from "slate-react";
5
5
  import { IconButton, Tooltip, Grid, Menu, MenuItem, CircularProgress, Box, Typography, useTheme } from "@mui/material";
6
6
  import DeleteIcon from "@mui/icons-material/Delete";
7
- import BackupIcon from "@mui/icons-material/Backup";
8
7
  import { GridSettingsIcon, GridAddSectionIcon, WorkflowIcon } from "../../common/iconslist";
9
8
  import FormPopup from "./FormPopup";
10
9
  import ButtonPopup from "../Button/ButtonPopup";
@@ -160,7 +159,8 @@ const Form = props => {
160
159
  [pair[0]]: pair[1],
161
160
  placeholder: placeholder,
162
161
  form_name: formName,
163
- tagName: tagName
162
+ tagName: tagName,
163
+ uid: fieldData?.uid
164
164
  });
165
165
  }
166
166
  let params = {
@@ -207,7 +207,7 @@ const Form = props => {
207
207
  }, {
208
208
  at: path
209
209
  });
210
- // adding form field style to the current form node
210
+ // adding form field style to the current form node
211
211
  const currentNode = Node.get(editor, path);
212
212
  if (currentNode) {
213
213
  currentNode.children.forEach((item, index) => {
@@ -35,7 +35,6 @@ const FormTextArea = props => {
35
35
  onChange: onChange,
36
36
  sx: {
37
37
  width: "100%",
38
- borderWidth: "1px",
39
38
  borderBlockStyle: "solid",
40
39
  padding: {
41
40
  ...getTRBLBreakPoints(bannerSpacing)
@@ -1,5 +1,5 @@
1
1
  import React, { useState } from "react";
2
- import { Transforms, Node } from "slate";
2
+ import { Transforms } from "slate";
3
3
  import { useSlateStatic, ReactEditor } from "slate-react";
4
4
  import { IconButton, Tooltip, Grid, useTheme } from "@mui/material";
5
5
  import FormElements from "./FormElements";