@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,513 @@
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 SelectV1 = props => {
35
+ const {
36
+ value,
37
+ options = [],
38
+ selectMultiple,
39
+ property,
40
+ wrapColumn = false,
41
+ onChange,
42
+ onUpdate,
43
+ translation
44
+ } = props;
45
+ const [anchorEl, setAnchorEl] = useState(null);
46
+ const [anchorElOption, setAnchorElOption] = useState(null);
47
+ const [currentIndex, setCurrentIndex] = useState(null);
48
+ const [selectedOptions, setSelectedOptions] = useState([]);
49
+ const [availableOptions, setAvailableOptions] = useState([]);
50
+ const [showSnackBar, setShowSnackBar] = useState(false);
51
+ const [chipColor, setChipColor] = useState(generateRandomColor());
52
+ const [inputValue, setInputValue] = useState("");
53
+ const [availableOptionsMap, setAvailableOptionsMap] = useState({});
54
+ const [resolvedSelectedOptions, setResolvedSelectedOptions] = useState([]);
55
+ const {
56
+ theme
57
+ } = useEditorContext();
58
+ const isMobile = window.matchMedia("(max-width: 899px)")?.matches || false;
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?.map(sel => availableOptionsMap?.[sel?.id]) ?? [];
71
+ setResolvedSelectedOptions(resolved);
72
+ }, [selectedOptions, availableOptionsMap]);
73
+ useEffect(() => {
74
+ // console.log("Options received:", options);
75
+ const enrichedAvailable = hasIds(options) ? options : generateStableIds(options);
76
+ // console.log("Enriched available options:", enrichedAvailable);
77
+ setAvailableOptions(enrichedAvailable);
78
+ const enrichedSelected = hasIds(value) ? value : value?.map(sel => {
79
+ const match = enrichedAvailable.find(opt => opt?.value === sel?.value);
80
+ return match ? {
81
+ id: match.id
82
+ } : sel;
83
+ });
84
+ // console.log("Enriched selected options:", enrichedSelected);
85
+ setSelectedOptions(enrichedSelected);
86
+ }, []);
87
+ const mode = useMemo(() => ({
88
+ type: "editOptionMulti",
89
+ edit: {
90
+ label: selectMultiple ? "Multi Select" : "Select",
91
+ visible: true,
92
+ key: property,
93
+ type: selectMultiple ? "multi-select" : "select",
94
+ options: availableOptions || [],
95
+ optionIndex: currentIndex,
96
+ hideBackButton: true
97
+ }
98
+ }), [availableOptions, property, currentIndex, selectMultiple]);
99
+ const customScrollStyles = {
100
+ scrollbarWidth: "thin",
101
+ scrollbarColor: `${theme?.palette?.editor?.brainPopupScroll} transparent`,
102
+ "&::-webkit-scrollbar": {
103
+ width: "6px"
104
+ },
105
+ "&::-webkit-scrollbar-thumb": {
106
+ backgroundColor: theme?.palette?.editor?.brainPopupScroll,
107
+ borderRadius: "3px"
108
+ },
109
+ "&::-webkit-scrollbar-track": {
110
+ display: "none"
111
+ }
112
+ };
113
+ useEffect(() => {
114
+ if (inputValue?.trim() && !chipColor) {
115
+ setChipColor(generateRandomColor());
116
+ }
117
+ }, [inputValue, chipColor]);
118
+ useEffect(() => {
119
+ const enriched = hasIds(options) ? options : generateStableIds(options);
120
+ const isDifferent = JSON.stringify(enriched) !== JSON.stringify(availableOptions);
121
+ if (isDifferent) {
122
+ setAvailableOptions(enriched);
123
+ }
124
+ }, [options]);
125
+ const handleOpenPopover = useCallback(event => {
126
+ setAnchorEl(event.currentTarget);
127
+ }, []);
128
+ const handleClosePopover = useCallback(e => {
129
+ e?.stopPropagation();
130
+ setAnchorEl(null);
131
+ }, []);
132
+ const handleAddOption = newValue => {
133
+ const trimmedValue = newValue?.trim?.();
134
+ if (!trimmedValue) return;
135
+ const isDuplicate = availableOptions.some(opt => opt.value.toLowerCase() === trimmedValue.toLowerCase());
136
+ if (isDuplicate) {
137
+ const existing = availableOptions.find(opt => opt?.value?.toLowerCase() === trimmedValue?.toLowerCase());
138
+ const alreadySelected = selectedOptions?.some(sel => sel?.id === existing?.id);
139
+ if (!alreadySelected) {
140
+ const updatedSelected = selectMultiple ? [...selectedOptions, {
141
+ id: existing.id
142
+ }] : [{
143
+ id: existing.id
144
+ }];
145
+ setSelectedOptions(updatedSelected);
146
+ onChange?.(updatedSelected);
147
+ }
148
+ setInputValue("");
149
+ setChipColor("");
150
+ return;
151
+ }
152
+ const newOption = {
153
+ value: trimmedValue,
154
+ color: chipColor,
155
+ id: `multi_${Date.now().toString(36)}_${Math.random().toString(36).substring(2, 5)}`
156
+ };
157
+ const updatedAvailableOptions = [...availableOptions, newOption];
158
+ const updatedSelectedOptions = selectMultiple ? [...selectedOptions, {
159
+ id: newOption.id
160
+ }] : [{
161
+ id: newOption.id
162
+ }];
163
+ setAvailableOptions(updatedAvailableOptions);
164
+ setSelectedOptions(updatedSelectedOptions);
165
+ onUpdate?.(updatedAvailableOptions);
166
+ onChange?.(updatedSelectedOptions);
167
+ setInputValue("");
168
+ setChipColor("");
169
+ };
170
+ const onClose = () => {
171
+ setAnchorEl(anchorElOption);
172
+ setAnchorElOption(null);
173
+ };
174
+ const onEditOption = (type, data) => {
175
+ const updateData = data?.edit ? data?.edit?.options : data?.options;
176
+ onUpdate(updateData);
177
+ };
178
+ const handleEditOption = (e, index) => {
179
+ e.stopPropagation();
180
+ setCurrentIndex(index);
181
+ setAnchorElOption(anchorEl);
182
+ setAnchorEl(null);
183
+ };
184
+ const handleSelectOption = option => {
185
+ const isAlreadySelected = selectedOptions.some(opt => opt?.id === option?.id);
186
+ if (isAlreadySelected) {
187
+ setShowSnackBar(true);
188
+ return;
189
+ }
190
+ const updatedOptions = selectMultiple ? [...selectedOptions, {
191
+ id: option?.id
192
+ }] : [{
193
+ id: option?.id
194
+ }];
195
+ setSelectedOptions(updatedOptions);
196
+ onChange(updatedOptions);
197
+ if (!selectMultiple) {
198
+ handleClosePopover();
199
+ }
200
+ };
201
+ const handleClearSelection = () => {
202
+ setSelectedOptions([]);
203
+ };
204
+ const handleDeleteChip = (event, option) => {
205
+ event.stopPropagation();
206
+ const updatedOptions = selectedOptions?.filter(selected => selected?.id !== option?.id);
207
+ setSelectedOptions(updatedOptions);
208
+ onChange(selectMultiple ? updatedOptions : updatedOptions[0] || null);
209
+ };
210
+ const filteredOptions = availableOptions?.filter(option => option?.value?.toLowerCase()?.includes(inputValue?.toLowerCase()));
211
+ const isExactMatch = availableOptions?.some(opt => opt?.value?.toLowerCase() === inputValue?.toLowerCase());
212
+ const open = Boolean(anchorEl);
213
+ const openEditOption = Boolean(anchorElOption);
214
+ const id = open ? "autocomplete-popover" : undefined;
215
+ return /*#__PURE__*/_jsxs("div", {
216
+ children: [/*#__PURE__*/_jsx(Box, {
217
+ sx: {
218
+ display: "flex",
219
+ flexWrap: wrapColumn ? "wrap" : "nowrap",
220
+ overflowX: wrapColumn ? "hidden" : "auto",
221
+ gap: 0.5,
222
+ padding: "8px",
223
+ cursor: "pointer"
224
+ },
225
+ onClick: handleOpenPopover,
226
+ children: resolvedSelectedOptions?.map((option, index) => /*#__PURE__*/_jsx(Chip, {
227
+ label: option?.value,
228
+ onDelete: event => {
229
+ handleDeleteChip(event, option);
230
+ },
231
+ deleteIcon: /*#__PURE__*/_jsx(CloseIcon, {}),
232
+ variant: "filled",
233
+ sx: {
234
+ backgroundColor: option?.color,
235
+ color: '#0F172A',
236
+ "& .MuiChip-deleteIcon": {
237
+ flexShrink: 0,
238
+ "& path": {
239
+ stroke: '#0F172A !important'
240
+ }
241
+ },
242
+ "&:hover": {
243
+ opacity: 0.8
244
+ }
245
+ }
246
+ }, index))
247
+ }), /*#__PURE__*/_jsx(PopoverComponent, {
248
+ id: id,
249
+ open: open,
250
+ anchorEl: anchorEl,
251
+ anchor: "bottom",
252
+ onClose: e => handleClosePopover(e),
253
+ anchorOrigin: {
254
+ vertical: "top",
255
+ horizontal: "left"
256
+ },
257
+ transformOrigin: {
258
+ vertical: "top",
259
+ horizontal: "left"
260
+ },
261
+ sx: {
262
+ "& .MuiPaper-root": {
263
+ borderRadius: "20px",
264
+ background: theme?.palette?.editor?.textFormatBgColor,
265
+ border: `1px solid ${theme?.palette?.editor?.popUpBorderColor}`,
266
+ boxShadow: "0px 4px 10px 0px #00000029"
267
+ }
268
+ },
269
+ disableAutoFocus: true,
270
+ disableEnforceFocus: true,
271
+ disableRestoreFocus: true,
272
+ children: /*#__PURE__*/_jsxs(Box, {
273
+ sx: {
274
+ width: isMobile ? "100%" : 300
275
+ },
276
+ children: [/*#__PURE__*/_jsx(Autocomplete, {
277
+ multiple: true,
278
+ freeSolo: true,
279
+ disablePortal: true,
280
+ PopperComponent: () => null,
281
+ sx: {
282
+ "& .MuiFormControl-root": {
283
+ maxHeight: "250px",
284
+ overflowY: "auto",
285
+ overflowX: "hidden",
286
+ pr: '12px',
287
+ pl: '12px',
288
+ marginTop: '12px',
289
+ ...customScrollStyles
290
+ }
291
+ },
292
+ disableClearable: true,
293
+ options: [],
294
+ getOptionLabel: () => "",
295
+ value: resolvedSelectedOptions,
296
+ onChange: (event, newValues) => {
297
+ const stringOptions = newValues.filter(val => typeof val === "string" && val.trim());
298
+ for (const str of stringOptions) {
299
+ handleAddOption(str);
300
+ }
301
+ },
302
+ inputValue: inputValue,
303
+ onInputChange: (event, newInputValue) => setInputValue(newInputValue),
304
+ onKeyDown: event => {
305
+ if (event.key === "Enter" && inputValue.trim()) {
306
+ event.preventDefault();
307
+ handleAddOption(inputValue);
308
+ }
309
+ },
310
+ filterOptions: (options, params) => options?.filter(option => option?.value?.toLowerCase()?.includes(params?.inputValue?.toLowerCase())),
311
+ renderInput: params => /*#__PURE__*/_jsx(TextField, {
312
+ ...params,
313
+ variant: "standard",
314
+ InputProps: {
315
+ ...params.InputProps,
316
+ disableUnderline: true,
317
+ sx: {
318
+ display: "flex",
319
+ flexWrap: "wrap",
320
+ fontFamily: "Inter",
321
+ fontWeight: 400,
322
+ fontSize: "12px",
323
+ color: theme?.palette?.editor?.secondaryTextColor,
324
+ "&::placeholder": {
325
+ color: theme?.palette?.editor?.secondaryTextColor
326
+ },
327
+ "& .MuiAutocomplete-input": {
328
+ minWidth: "100px !important"
329
+ }
330
+ },
331
+ endAdornment: /*#__PURE__*/_jsx(Tooltip, {
332
+ arrow: true,
333
+ title: "Clear Selected",
334
+ children: /*#__PURE__*/_jsx(IconButton, {
335
+ onClick: handleClearSelection,
336
+ sx: {
337
+ padding: 0,
338
+ minWidth: "unset",
339
+ "& .MuiSvgIcon-root": {
340
+ fontSize: 20
341
+ },
342
+ '& rect': {
343
+ fill: theme?.palette?.editor?.closeButtonSvgStroke
344
+ },
345
+ '&:hover': {
346
+ backgroundColor: 'transparent'
347
+ }
348
+ },
349
+ children: /*#__PURE__*/_jsx(Icon, {
350
+ icon: "resetIconNew"
351
+ })
352
+ })
353
+ })
354
+ },
355
+ sx: {
356
+ backgroundColor: "transparent",
357
+ fontFamily: 'Inter',
358
+ fontWeight: 400,
359
+ fontSize: '12px'
360
+ },
361
+ placeholder: "Create new one..."
362
+ }),
363
+ renderTags: (tagValues, getTagProps) => {
364
+ return tagValues?.map((option, index) => /*#__PURE__*/_jsx(Chip, {
365
+ variant: "filled",
366
+ label: option?.value,
367
+ ...getTagProps({
368
+ index
369
+ }),
370
+ onDelete: event => {
371
+ handleDeleteChip(event, option);
372
+ },
373
+ deleteIcon: /*#__PURE__*/_jsx(CloseIcon, {}),
374
+ sx: {
375
+ backgroundColor: option?.color,
376
+ color: '#0F172A',
377
+ "& .MuiChip-deleteIcon": {
378
+ flexShrink: 0,
379
+ "& path": {
380
+ stroke: '#0F172A !important'
381
+ }
382
+ },
383
+ "&:hover": {
384
+ opacity: 0.8
385
+ }
386
+ }
387
+ }, index));
388
+ }
389
+ }), /*#__PURE__*/_jsx(Divider, {
390
+ sx: {
391
+ mt: '12px',
392
+ borderBottom: `1px solid ${theme?.palette?.editor?.popUpBorderColor}`,
393
+ boxShadow: theme?.palette?.editor?.dividerDropShadow
394
+ }
395
+ }), /*#__PURE__*/_jsx(Box, {
396
+ sx: {
397
+ pl: '4px'
398
+ },
399
+ children: /*#__PURE__*/_jsxs(List, {
400
+ sx: {
401
+ maxHeight: "250px",
402
+ overflowY: "auto",
403
+ ...customScrollStyles
404
+ },
405
+ children: [/*#__PURE__*/_jsx(Typography, {
406
+ sx: {
407
+ mb: 1,
408
+ pl: '8px',
409
+ color: theme?.palette?.editor?.secondaryTextColor,
410
+ fontFamily: 'Inter',
411
+ fontWeight: 400,
412
+ fontSize: '12px'
413
+ },
414
+ children: "Choose an option or create one"
415
+ }), filteredOptions?.map((option, index) => /*#__PURE__*/_jsx(ListItem, {
416
+ sx: {
417
+ padding: 0
418
+ },
419
+ disablePadding: true,
420
+ children: /*#__PURE__*/_jsxs(ListItemButton, {
421
+ onClick: () => handleSelectOption(option),
422
+ sx: {
423
+ paddingTop: "4px",
424
+ paddingBottom: "4px",
425
+ justifyContent: 'space-between',
426
+ '&:hover': {
427
+ '& path': {
428
+ stroke: theme?.palette?.editor?.activeColor
429
+ },
430
+ borderRadius: '12px'
431
+ }
432
+ },
433
+ children: [/*#__PURE__*/_jsx(Chip, {
434
+ label: option?.value,
435
+ sx: {
436
+ backgroundColor: option?.color,
437
+ color: '#0F172A',
438
+ fontWeight: 500,
439
+ fontSize: "12px",
440
+ fontFamily: "Inter",
441
+ padding: "4px 12px",
442
+ borderRadius: "16px",
443
+ maxWidth: "180px",
444
+ whiteSpace: "nowrap",
445
+ overflow: "hidden",
446
+ textOverflow: "ellipsis"
447
+ }
448
+ }), /*#__PURE__*/_jsx(IconButton, {
449
+ size: "small",
450
+ sx: {
451
+ '& path': {
452
+ stroke: theme?.palette?.editor?.closeButtonSvgStroke
453
+ },
454
+ '&:hover': {
455
+ backgroundColor: 'transparent'
456
+ }
457
+ },
458
+ onClick: e => handleEditOption(e, index),
459
+ children: /*#__PURE__*/_jsx(Icon, {
460
+ icon: "rightArrow"
461
+ })
462
+ })]
463
+ })
464
+ }, index)), inputValue?.trim() && !isExactMatch && /*#__PURE__*/_jsx(ListItem, {
465
+ disablePadding: true,
466
+ children: /*#__PURE__*/_jsxs(ListItemButton, {
467
+ onClick: () => handleAddOption(inputValue),
468
+ sx: {
469
+ display: "flex",
470
+ alignItems: "center"
471
+ },
472
+ children: [/*#__PURE__*/_jsx(Typography, {
473
+ sx: {
474
+ color: theme?.palette?.editor?.secondaryTextColor,
475
+ marginRight: "6px",
476
+ fontSize: "14px",
477
+ fontFamily: "Inter"
478
+ },
479
+ children: "Create"
480
+ }), /*#__PURE__*/_jsx(Chip, {
481
+ label: `${inputValue}`,
482
+ sx: {
483
+ backgroundColor: chipColor,
484
+ color: '#0F172A',
485
+ fontWeight: 500,
486
+ fontSize: "12px",
487
+ fontFamily: "Inter",
488
+ borderRadius: "16px",
489
+ maxWidth: "180px",
490
+ whiteSpace: "nowrap",
491
+ overflow: "hidden",
492
+ textOverflow: "ellipsis"
493
+ }
494
+ })]
495
+ })
496
+ })]
497
+ })
498
+ })]
499
+ })
500
+ }), openEditOption ? /*#__PURE__*/_jsx(PropertySettings, {
501
+ open: openEditOption,
502
+ anchorEl: anchorElOption,
503
+ mode: mode,
504
+ onClose: onClose,
505
+ onEvent: onEditOption,
506
+ translation: translation
507
+ }) : null, showSnackBar ? /*#__PURE__*/_jsx(SnackbarAlert, {
508
+ message: "Option already selected!",
509
+ setShowSnackBar: setShowSnackBar
510
+ }) : null]
511
+ });
512
+ };
513
+ export default SelectV1;
@@ -1,6 +1,7 @@
1
1
  import React from "react";
2
2
  import { useDataView } from "../../Providers/DataViewProvider";
3
- import Select from "./Components/Select";
3
+ import MultiSelectWithPopover from "./Components/MultiSelect";
4
+ import SelectV1 from "./Components/SelectV1";
4
5
  import { jsx as _jsx } from "react/jsx-runtime";
5
6
  const MultiSelectType = props => {
6
7
  const {
@@ -10,35 +11,50 @@ const MultiSelectType = props => {
10
11
  options,
11
12
  label = "",
12
13
  readOnly,
13
- settings
14
+ settings,
15
+ translation
14
16
  } = props;
17
+ const {
18
+ onChange,
19
+ onUpdateProperty
20
+ } = useDataView();
15
21
  const {
16
22
  wrapColumn
17
23
  } = settings;
18
- const {
19
- onChange
20
- } = useDataView();
21
24
  const value = Array.isArray(pValue) ? pValue : [];
22
25
  const coloredValues = [...(value || [])]?.map(m => {
23
26
  return {
24
27
  ...m,
25
- color: options?.find(f => f.value === m.value)?.color || "#FFF"
28
+ color: (options || []).find(f => f?.value === m?.value || f?.id === m?.id)?.color || "#FFF"
26
29
  };
27
30
  });
28
31
  const handleChange = data => {
29
32
  onChange(rowIndex, {
30
- [property]: data?.filter(f => f?.value)
33
+ [property]: data?.filter(f => f?.id)
31
34
  });
32
35
  };
33
- return /*#__PURE__*/_jsx(Select, {
34
- className: `wrap-${wrapColumn}`,
36
+ const handleUpdate = data => {
37
+ const updateData = {
38
+ label: "Multi Select",
39
+ visible: true,
40
+ key: property,
41
+ type: "multi-select",
42
+ options: data
43
+ };
44
+ onUpdateProperty(updateData);
45
+ };
46
+ return /*#__PURE__*/_jsx(SelectV1, {
35
47
  value: coloredValues,
36
48
  onChange: handleChange,
49
+ onUpdate: handleUpdate,
37
50
  options: options,
38
- multiple: true,
51
+ selectMultiple: true,
39
52
  limitTags: 2,
40
53
  placeholder: label,
41
- disabled: readOnly
54
+ disabled: readOnly,
55
+ property: property,
56
+ wrapColumn: wrapColumn,
57
+ translation: translation
42
58
  });
43
59
  };
44
60
  export default MultiSelectType;
@@ -1,6 +1,7 @@
1
1
  import React from "react";
2
2
  import { useDataView } from "../../Providers/DataViewProvider";
3
- import Select from "./Components/Select";
3
+ // import Select from "./Components/Select";
4
+ import SelectV1 from "./Components/SelectV1";
4
5
  import { jsx as _jsx } from "react/jsx-runtime";
5
6
  const SelectType = props => {
6
7
  const {
@@ -8,28 +9,47 @@ const SelectType = props => {
8
9
  property,
9
10
  value,
10
11
  options,
11
- readOnly
12
+ readOnly,
13
+ translation
12
14
  } = props;
13
15
  const {
14
- onChange
16
+ onChange,
17
+ onUpdateProperty
15
18
  } = useDataView();
19
+ const label = "";
16
20
  const coloredValues = [...(value || [])]?.map(m => {
17
21
  return {
18
22
  ...m,
19
- color: options?.find(f => f.value === m.value)?.color
23
+ color: (options || []).find(f => f?.value === m?.value || f?.id === m?.id)?.color || "#FFF"
20
24
  };
21
25
  });
22
26
  const handleChange = data => {
23
27
  onChange(rowIndex, {
24
- [property]: data?.filter(f => f?.value)
28
+ [property]: data?.filter(f => f?.id)
25
29
  });
26
30
  };
27
- return /*#__PURE__*/_jsx(Select, {
31
+ const handleUpdate = data => {
32
+ const updateData = {
33
+ "label": "Select",
34
+ "visible": true,
35
+ "key": property,
36
+ "type": "select",
37
+ "options": data
38
+ };
39
+ onUpdateProperty(updateData);
40
+ };
41
+ return /*#__PURE__*/_jsx(SelectV1, {
28
42
  value: coloredValues,
29
- onChange: handleChange,
30
43
  options: options,
31
- multiple: false,
32
- disabled: readOnly
44
+ selectMultiple: false,
45
+ disabled: readOnly,
46
+ limitTags: 2,
47
+ placeholder: label,
48
+ property: property,
49
+ wrapColumn: false,
50
+ onChange: handleChange,
51
+ onUpdate: handleUpdate,
52
+ translation: translation
33
53
  });
34
54
  };
35
55
  export default SelectType;