@flozy/editor 10.1.2 → 10.1.4

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 (146) hide show
  1. package/dist/Editor/ChatEditor.js +16 -17
  2. package/dist/Editor/CommonEditor.js +15 -115
  3. package/dist/Editor/DialogWrapper.js +25 -31
  4. package/dist/Editor/Editor.css +8 -16
  5. package/dist/Editor/Elements/AI/PopoverAIInput.js +3 -11
  6. package/dist/Editor/Elements/AppHeader/AppHeader.js +3 -3
  7. package/dist/Editor/Elements/Button/EditorButton.js +9 -25
  8. package/dist/Editor/Elements/Color Picker/ColorButtons.js +14 -61
  9. package/dist/Editor/Elements/Color Picker/ColorPicker.css +1 -25
  10. package/dist/Editor/Elements/Color Picker/ColorPicker.js +7 -10
  11. package/dist/Editor/Elements/Color Picker/Styles.js +13 -15
  12. package/dist/Editor/Elements/DataView/Layouts/ColumnView.js +2 -4
  13. package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +6 -21
  14. package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +1 -5
  15. package/dist/Editor/Elements/DataView/Layouts/Options/EditOption.js +2 -3
  16. package/dist/Editor/Elements/DataView/Layouts/Options/index.js +0 -11
  17. package/dist/Editor/Elements/DataView/Layouts/ViewData.js +4 -8
  18. package/dist/Editor/Elements/Embed/Image.js +2 -3
  19. package/dist/Editor/Elements/Embed/Video.js +1 -1
  20. package/dist/Editor/Elements/EmbedScript/Code.js +2 -14
  21. package/dist/Editor/Elements/EmbedScript/EmbedScriptPopup.js +28 -57
  22. package/dist/Editor/Elements/Form/Form.js +168 -179
  23. package/dist/Editor/Elements/Form/FormField.js +4 -10
  24. package/dist/Editor/Elements/Form/Workflow/Styles.js +22 -24
  25. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +24 -6
  26. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +4 -7
  27. package/dist/Editor/Elements/FreeGrid/Options/More.js +8 -8
  28. package/dist/Editor/Elements/FreeGrid/styles.js +7 -67
  29. package/dist/Editor/Elements/Grid/GridItem.js +1 -1
  30. package/dist/Editor/Elements/List/CheckList.js +1 -4
  31. package/dist/Editor/Elements/Search/SearchAttachment.js +9 -40
  32. package/dist/Editor/Elements/Search/SearchButton.js +8 -9
  33. package/dist/Editor/Elements/Search/SearchList.js +7 -9
  34. package/dist/Editor/Elements/SimpleText/index.js +1 -6
  35. package/dist/Editor/Elements/SimpleText/style.js +2 -2
  36. package/dist/Editor/Elements/Table/Table.js +3 -3
  37. package/dist/Editor/Elements/Title/title.js +6 -6
  38. package/dist/Editor/Elements/Variables/VariableButton.js +1 -10
  39. package/dist/Editor/MiniEditor.js +1 -2
  40. package/dist/Editor/Styles/EditorStyles.js +5 -5
  41. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +3 -27
  42. package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +3 -4
  43. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  44. package/dist/Editor/Toolbar/FormatTools/TextSize.js +13 -10
  45. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +1 -2
  46. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +2 -4
  47. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +13 -6
  48. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +42 -167
  49. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +4 -7
  50. package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +1 -2
  51. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +12 -72
  52. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +27 -100
  53. package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
  54. package/dist/Editor/Toolbar/toolbarGroups.js +6 -48
  55. package/dist/Editor/assets/svg/SettingsIcon.js +0 -1
  56. package/dist/Editor/common/ColorPickerButton.js +17 -39
  57. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  58. package/dist/Editor/common/FontLoader/FontLoader.js +0 -3
  59. package/dist/Editor/common/Icon.js +1 -31
  60. package/dist/Editor/common/ImageSelector/Styles.js +9 -3
  61. package/dist/Editor/common/LinkSettings/NavComponents.js +8 -34
  62. package/dist/Editor/common/LinkSettings/index.js +68 -84
  63. package/dist/Editor/common/LinkSettings/style.js +30 -245
  64. package/dist/Editor/common/RnD/ElementOptions/Actions.js +14 -13
  65. package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js +0 -1
  66. package/dist/Editor/common/RnD/ElementOptions/index.js +2 -2
  67. package/dist/Editor/common/RnD/ElementOptions/styles.js +1 -28
  68. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +5 -6
  69. package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +2 -3
  70. package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +2 -3
  71. package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +2 -3
  72. package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +2 -3
  73. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +2 -4
  74. package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +2 -3
  75. package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +2 -3
  76. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +1 -3
  77. package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +2 -3
  78. package/dist/Editor/common/RnD/ElementSettings/styles.js +12 -147
  79. package/dist/Editor/common/RnD/OptionsPopup/index.js +5 -8
  80. package/dist/Editor/common/RnD/OptionsPopup/style.js +19 -121
  81. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +5 -8
  82. package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +3 -6
  83. package/dist/Editor/common/RnD/Utils/gridDropItem.js +2 -1
  84. package/dist/Editor/common/RnD/index.js +6 -5
  85. package/dist/Editor/common/Select/index.js +0 -2
  86. package/dist/Editor/common/Shorthands/elements.js +0 -54
  87. package/dist/Editor/common/StyleBuilder/buttonStyle.js +2 -4
  88. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +0 -5
  89. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +2 -12
  90. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +7 -15
  91. package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +8 -16
  92. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +10 -36
  93. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +7 -16
  94. package/dist/Editor/common/StyleBuilder/fieldTypes/lineSpacing.js +6 -7
  95. package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +6 -13
  96. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +7 -15
  97. package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js +7 -5
  98. package/dist/Editor/common/Uploader.js +0 -8
  99. package/dist/Editor/common/iconListV2.js +6 -101
  100. package/dist/Editor/common/iconslist.js +0 -24
  101. package/dist/Editor/commonStyle.js +61 -174
  102. package/dist/Editor/helper/theme.js +2 -203
  103. package/dist/Editor/hooks/useMouseMove.js +5 -8
  104. package/dist/Editor/plugins/withEmbeds.js +1 -1
  105. package/dist/Editor/plugins/withHTML.js +1 -3
  106. package/dist/Editor/plugins/withTable.js +1 -1
  107. package/dist/Editor/theme/ThemeList.js +173 -50
  108. package/dist/Editor/utils/SlateUtilityFunctions.js +43 -166
  109. package/dist/Editor/utils/button.js +17 -1
  110. package/dist/Editor/utils/draftToSlate.js +2 -3
  111. package/dist/Editor/utils/font.js +37 -40
  112. package/dist/Editor/utils/helper.js +19 -90
  113. package/package.json +4 -4
  114. package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/MultiSelect.js +0 -454
  115. package/dist/Editor/Elements/EmbedScript/styles.js +0 -89
  116. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +0 -439
  117. package/dist/Editor/assets/svg/BackIcon.js +0 -18
  118. package/dist/Editor/assets/svg/ClearAllRounded.js +0 -31
  119. package/dist/Editor/assets/svg/ResetIconNew.js +0 -23
  120. package/dist/Editor/assets/svg/ThemeIcons.js +0 -293
  121. package/dist/Editor/common/CustomColorPicker/index.js +0 -130
  122. package/dist/Editor/common/CustomColorPicker/style.js +0 -53
  123. package/dist/Editor/common/CustomDialog2/index.js +0 -94
  124. package/dist/Editor/common/CustomDialog2/style.js +0 -67
  125. package/dist/Editor/common/CustomSelect.js +0 -43
  126. package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +0 -17
  127. package/dist/Editor/common/SnackBar/index.js +0 -43
  128. package/dist/Editor/helper/textIndeces.js +0 -58
  129. package/dist/Editor/hooks/useEditorTheme.js +0 -153
  130. package/dist/Editor/hooks/useThemeValues.js +0 -63
  131. package/dist/Editor/theme/index.js +0 -149
  132. package/dist/Editor/themeSettings/ActiveTheme.js +0 -72
  133. package/dist/Editor/themeSettings/buttons/index.js +0 -290
  134. package/dist/Editor/themeSettings/buttons/style.js +0 -23
  135. package/dist/Editor/themeSettings/colorTheme/index.js +0 -309
  136. package/dist/Editor/themeSettings/colorTheme/style.js +0 -81
  137. package/dist/Editor/themeSettings/fonts/PreviewElement.js +0 -121
  138. package/dist/Editor/themeSettings/fonts/index.js +0 -240
  139. package/dist/Editor/themeSettings/fonts/style.js +0 -62
  140. package/dist/Editor/themeSettings/icons.js +0 -60
  141. package/dist/Editor/themeSettings/index.js +0 -361
  142. package/dist/Editor/themeSettings/style.js +0 -292
  143. package/dist/Editor/themeSettingsAI/icons.js +0 -96
  144. package/dist/Editor/themeSettingsAI/index.js +0 -355
  145. package/dist/Editor/themeSettingsAI/saveTheme.js +0 -202
  146. package/dist/Editor/themeSettingsAI/style.js +0 -324
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flozy/editor",
3
- "version": "10.1.2",
3
+ "version": "10.1.4",
4
4
  "description": "An Editor for flozy app brain",
5
5
  "files": [
6
6
  "dist"
@@ -38,6 +38,7 @@
38
38
  "react-icons": "^4.10.1",
39
39
  "react-katex": "^3.0.1",
40
40
  "react-rnd": "^10.4.11",
41
+ "react-scripts": "5.0.1",
41
42
  "react-signature-canvas": "^1.0.6",
42
43
  "react-slick": "^0.29.0",
43
44
  "sanitize-html": "^2.13.0",
@@ -68,7 +69,7 @@
68
69
  "storybook": "storybook dev -p 6006",
69
70
  "build-storybook": "NODE_OPTIONS='--max_old_space_size=4096' storybook build",
70
71
  "publish:npm": "rm -rf dist && mkdir dist && babel src/components -d dist --copy-files",
71
- "publish:local": "rm -rf /Users/agenciflow08/Documents/flozyapp/client/node_modules/@flozy/editor/dist && babel src/components -d /Users/agenciflow08/Documents/flozyapp/client/node_modules/@flozy/editor/dist --copy-files",
72
+ "publish:local": "rm -rf /Users/agmac03/flozy/client/node_modules/@flozy/editor/dist && babel src/components -d /Users/agmac03/flozy/client/node_modules/@flozy/editor/dist --copy-files",
72
73
  "publish:flozy": "./publish-flozy.sh",
73
74
  "publish:flozy2": "./publish-flozy2.sh",
74
75
  "publish:permission": "chmod +x publish-flozy.sh && chmod +x publish-flozy2.sh"
@@ -121,8 +122,7 @@
121
122
  "prop-types": "^15.8.1",
122
123
  "source-map-explorer": "^2.5.3",
123
124
  "storybook": "^7.4.0",
124
- "webpack": "^5.88.2",
125
- "react-scripts": "5.0.1"
125
+ "webpack": "^5.88.2"
126
126
  },
127
127
  "overrides": {
128
128
  "react-refresh": "0.11.0"
@@ -1,454 +0,0 @@
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 SwipeableDrawer from "@mui/material/SwipeableDrawer";
14
- import Tooltip from "@mui/material/Tooltip";
15
- import { CloseIcon } from "../../../../../common/iconslist";
16
- import { useEditorContext } from "../../../../../hooks/useMouseMove";
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 MultiSelectWithPopover = props => {
30
- const {
31
- options = [],
32
- value,
33
- onChange,
34
- onUpdate,
35
- property,
36
- wrapColumn = false,
37
- translation
38
- } = props;
39
- const [anchorEl, setAnchorEl] = useState(null);
40
- const [anchorElOption, setAnchorElOption] = useState(null);
41
- const [currentIndex, setCurrentIndex] = useState(null);
42
- const [selectedOptions, setSelectedOptions] = useState(value);
43
- const [availableOptions, setAvailableOptions] = useState(options);
44
- const [showSnackBar, setShowSnackBar] = useState(false);
45
- const [chipColor, setChipColor] = useState(generateRandomColor());
46
- const [inputValue, setInputValue] = useState("");
47
- const {
48
- theme
49
- } = useEditorContext();
50
- const isMobile = window.matchMedia("(max-width: 899px)")?.matches || false;
51
- const PopoverComponent = isMobile ? SwipeableDrawer : Popover;
52
- const mode = useMemo(() => ({
53
- type: "editOptionMulti",
54
- edit: {
55
- label: "Multi Select",
56
- visible: true,
57
- key: property,
58
- type: "multi-select",
59
- options: options || [],
60
- optionIndex: currentIndex,
61
- hideBackButton: true
62
- }
63
- }), [options, property, currentIndex]);
64
- const customScrollStyles = {
65
- scrollbarWidth: "thin",
66
- scrollbarColor: `${theme?.palette?.editor?.brainPopupScroll} transparent`,
67
- "&::-webkit-scrollbar": {
68
- width: "6px"
69
- },
70
- "&::-webkit-scrollbar-thumb": {
71
- backgroundColor: theme?.palette?.editor?.brainPopupScroll,
72
- borderRadius: "3px"
73
- },
74
- "&::-webkit-scrollbar-track": {
75
- display: "none"
76
- }
77
- };
78
- useEffect(() => {
79
- if (inputValue?.trim() && !chipColor) {
80
- setChipColor(generateRandomColor());
81
- }
82
- }, [inputValue, chipColor]);
83
- useEffect(() => {
84
- if (JSON.stringify(options) !== JSON.stringify(availableOptions)) {
85
- setAvailableOptions(options);
86
- }
87
- }, [options, availableOptions]);
88
- const handleOpenPopover = useCallback(event => {
89
- setAnchorEl(event.currentTarget);
90
- }, []);
91
- const handleClosePopover = useCallback(e => {
92
- e?.stopPropagation();
93
- setAnchorEl(null);
94
- }, []);
95
- const handleAddOption = newValue => {
96
- const trimmedValue = newValue?.trim();
97
- if (!trimmedValue) return;
98
- const newOption = {
99
- value: trimmedValue,
100
- color: chipColor
101
- };
102
- if (!availableOptions?.some(opt => opt?.value === trimmedValue)) {
103
- setAvailableOptions(prev => [...prev, newOption]);
104
- setSelectedOptions(prev => [...prev, newOption]);
105
- onUpdate([newOption, ...availableOptions]);
106
- }
107
- setInputValue("");
108
- setChipColor("");
109
- };
110
- const onClose = () => {
111
- setAnchorEl(anchorElOption);
112
- setAnchorElOption(null);
113
- };
114
- const onEditOption = (type, data) => {
115
- const updateData = data?.edit ? data?.edit?.options : data?.options;
116
- 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
- };
123
- const handleEditOption = (e, index) => {
124
- e.stopPropagation();
125
- setCurrentIndex(index);
126
- setAnchorElOption(anchorEl);
127
- setAnchorEl(null);
128
- };
129
- 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 {
135
- setShowSnackBar(true);
136
- }
137
- };
138
- const handleClearSelection = () => {
139
- setSelectedOptions([]);
140
- };
141
- const handleDeleteChip = (event, option) => {
142
- event.stopPropagation();
143
- setSelectedOptions(prev => {
144
- const updatedOptions = prev.filter(selected => selected?.value !== option?.value);
145
- onChange(updatedOptions);
146
- return updatedOptions;
147
- });
148
- };
149
- const filteredOptions = availableOptions?.filter(option => option?.value?.toLowerCase()?.includes(inputValue?.toLowerCase()));
150
- const isExactMatch = availableOptions?.some(opt => opt?.value?.toLowerCase() === inputValue?.toLowerCase());
151
- const open = Boolean(anchorEl);
152
- const openEditOption = Boolean(anchorElOption);
153
- const id = open ? "autocomplete-popover" : undefined;
154
- return /*#__PURE__*/_jsxs("div", {
155
- children: [/*#__PURE__*/_jsx(Box, {
156
- sx: {
157
- display: "flex",
158
- flexWrap: wrapColumn ? "wrap" : "nowrap",
159
- overflowX: wrapColumn ? "hidden" : "auto",
160
- gap: 0.5,
161
- padding: "8px",
162
- cursor: "pointer"
163
- },
164
- onClick: handleOpenPopover,
165
- children: selectedOptions?.map((option, index) => /*#__PURE__*/_jsx(Chip, {
166
- label: option?.value,
167
- onDelete: event => {
168
- handleDeleteChip(event, option);
169
- },
170
- deleteIcon: /*#__PURE__*/_jsx(CloseIcon, {}),
171
- variant: "filled",
172
- sx: {
173
- backgroundColor: option?.color,
174
- color: '#0F172A',
175
- "& .MuiChip-deleteIcon": {
176
- flexShrink: 0,
177
- "& path": {
178
- stroke: '#0F172A !important'
179
- }
180
- },
181
- "&:hover": {
182
- opacity: 0.8
183
- }
184
- }
185
- }, index))
186
- }), /*#__PURE__*/_jsx(PopoverComponent, {
187
- id: id,
188
- open: open,
189
- anchorEl: anchorEl,
190
- anchor: "bottom",
191
- onClose: e => handleClosePopover(e),
192
- anchorOrigin: {
193
- vertical: "top",
194
- horizontal: "left"
195
- },
196
- transformOrigin: {
197
- vertical: "top",
198
- horizontal: "left"
199
- },
200
- sx: {
201
- "& .MuiPaper-root": {
202
- borderRadius: "20px",
203
- background: theme?.palette?.editor?.textFormatBgColor,
204
- border: `1px solid ${theme?.palette?.editor?.popUpBorderColor}`,
205
- boxShadow: "0px 4px 10px 0px #00000029"
206
- }
207
- },
208
- disableAutoFocus: true,
209
- disableEnforceFocus: true,
210
- disableRestoreFocus: true,
211
- children: /*#__PURE__*/_jsxs(Box, {
212
- sx: {
213
- width: isMobile ? "100%" : 300
214
- },
215
- children: [/*#__PURE__*/_jsx(Autocomplete, {
216
- multiple: true,
217
- freeSolo: true,
218
- disablePortal: true,
219
- PopperComponent: () => null,
220
- sx: {
221
- "& .MuiFormControl-root": {
222
- maxHeight: "250px",
223
- overflowY: "auto",
224
- overflowX: "hidden",
225
- pr: '12px',
226
- pl: '12px',
227
- marginTop: '12px',
228
- ...customScrollStyles
229
- }
230
- },
231
- disableClearable: true,
232
- options: [],
233
- getOptionLabel: option => options?.value || "",
234
- value: selectedOptions,
235
- 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]);
243
- }
244
- },
245
- inputValue: inputValue,
246
- onInputChange: (event, newInputValue) => setInputValue(newInputValue),
247
- onKeyDown: event => {
248
- if (event.key === "Enter" && inputValue.trim()) {
249
- event.preventDefault();
250
- handleAddOption(inputValue);
251
- }
252
- },
253
- filterOptions: (options, params) => options?.filter(option => option?.value?.toLowerCase()?.includes(params?.inputValue?.toLowerCase())),
254
- renderInput: params => /*#__PURE__*/_jsx(TextField, {
255
- ...params,
256
- variant: "standard",
257
- InputProps: {
258
- ...params.InputProps,
259
- disableUnderline: true,
260
- sx: {
261
- display: "flex",
262
- flexWrap: "wrap",
263
- fontFamily: "Inter",
264
- fontWeight: 400,
265
- fontSize: "12px",
266
- color: theme?.palette?.editor?.secondaryTextColor,
267
- "&::placeholder": {
268
- color: theme?.palette?.editor?.secondaryTextColor
269
- },
270
- "& .MuiAutocomplete-input": {
271
- minWidth: "100px !important"
272
- }
273
- },
274
- endAdornment: /*#__PURE__*/_jsx(Tooltip, {
275
- arrow: true,
276
- title: "Clear Selected",
277
- children: /*#__PURE__*/_jsx(IconButton, {
278
- onClick: handleClearSelection,
279
- sx: {
280
- padding: 0,
281
- minWidth: "unset",
282
- "& .MuiSvgIcon-root": {
283
- fontSize: 20
284
- },
285
- '& rect': {
286
- fill: theme?.palette?.editor?.closeButtonSvgStroke
287
- },
288
- '&:hover': {
289
- backgroundColor: 'transparent'
290
- }
291
- },
292
- children: /*#__PURE__*/_jsx(Icon, {
293
- icon: "resetIconNew"
294
- })
295
- })
296
- })
297
- },
298
- sx: {
299
- backgroundColor: "transparent",
300
- fontFamily: 'Inter',
301
- fontWeight: 400,
302
- fontSize: '12px'
303
- },
304
- placeholder: "Create new one..."
305
- }),
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
- }
324
- },
325
- "&:hover": {
326
- opacity: 0.8
327
- }
328
- }
329
- }, index))
330
- }), /*#__PURE__*/_jsx(Divider, {
331
- sx: {
332
- mt: '12px',
333
- borderBottom: `1px solid ${theme?.palette?.editor?.popUpBorderColor}`,
334
- boxShadow: theme?.palette?.editor?.dividerDropShadow
335
- }
336
- }), /*#__PURE__*/_jsx(Box, {
337
- sx: {
338
- pl: '4px'
339
- },
340
- children: /*#__PURE__*/_jsxs(List, {
341
- sx: {
342
- maxHeight: "250px",
343
- overflowY: "auto",
344
- ...customScrollStyles
345
- },
346
- children: [/*#__PURE__*/_jsx(Typography, {
347
- sx: {
348
- mb: 1,
349
- pl: '8px',
350
- color: theme?.palette?.editor?.secondaryTextColor,
351
- fontFamily: 'Inter',
352
- fontWeight: 400,
353
- fontSize: '12px'
354
- },
355
- children: "Choose an option or create one"
356
- }), filteredOptions?.map((option, index) => /*#__PURE__*/_jsx(ListItem, {
357
- sx: {
358
- padding: 0
359
- },
360
- disablePadding: true,
361
- children: /*#__PURE__*/_jsxs(ListItemButton, {
362
- onClick: () => handleSelectOption(option),
363
- sx: {
364
- paddingTop: "4px",
365
- paddingBottom: "4px",
366
- justifyContent: 'space-between',
367
- '&:hover': {
368
- '& path': {
369
- stroke: theme?.palette?.editor?.activeColor
370
- },
371
- borderRadius: '12px'
372
- }
373
- },
374
- children: [/*#__PURE__*/_jsx(Chip, {
375
- label: option?.value,
376
- sx: {
377
- backgroundColor: option?.color,
378
- color: '#0F172A',
379
- fontWeight: 500,
380
- fontSize: "12px",
381
- fontFamily: "Inter",
382
- padding: "4px 12px",
383
- borderRadius: "16px",
384
- maxWidth: "180px",
385
- whiteSpace: "nowrap",
386
- overflow: "hidden",
387
- textOverflow: "ellipsis"
388
- }
389
- }), /*#__PURE__*/_jsx(IconButton, {
390
- size: "small",
391
- sx: {
392
- '& path': {
393
- stroke: theme?.palette?.editor?.closeButtonSvgStroke
394
- },
395
- '&:hover': {
396
- backgroundColor: 'transparent'
397
- }
398
- },
399
- onClick: e => handleEditOption(e, index),
400
- children: /*#__PURE__*/_jsx(Icon, {
401
- icon: "rightArrow"
402
- })
403
- })]
404
- })
405
- }, index)), inputValue?.trim() && !isExactMatch && /*#__PURE__*/_jsx(ListItem, {
406
- disablePadding: true,
407
- children: /*#__PURE__*/_jsxs(ListItemButton, {
408
- onClick: () => handleAddOption(inputValue),
409
- sx: {
410
- display: "flex",
411
- alignItems: "center"
412
- },
413
- children: [/*#__PURE__*/_jsx(Typography, {
414
- sx: {
415
- color: theme?.palette?.editor?.secondaryTextColor,
416
- marginRight: "6px",
417
- fontSize: "14px",
418
- fontFamily: "Inter"
419
- },
420
- children: "Create"
421
- }), /*#__PURE__*/_jsx(Chip, {
422
- label: `${inputValue}`,
423
- sx: {
424
- backgroundColor: chipColor,
425
- color: '#0F172A',
426
- fontWeight: 500,
427
- fontSize: "12px",
428
- fontFamily: "Inter",
429
- borderRadius: "16px",
430
- maxWidth: "180px",
431
- whiteSpace: "nowrap",
432
- overflow: "hidden",
433
- textOverflow: "ellipsis"
434
- }
435
- })]
436
- })
437
- })]
438
- })
439
- })]
440
- })
441
- }), openEditOption ? /*#__PURE__*/_jsx(PropertySettings, {
442
- open: openEditOption,
443
- anchorEl: anchorElOption,
444
- mode: mode,
445
- onClose: onClose,
446
- onEvent: onEditOption,
447
- translation: translation
448
- }) : null, showSnackBar ? /*#__PURE__*/_jsx(SnackbarAlert, {
449
- message: "Option already selected!",
450
- setShowSnackBar: setShowSnackBar
451
- }) : null]
452
- });
453
- };
454
- export default MultiSelectWithPopover;
@@ -1,89 +0,0 @@
1
- const Styles = theme => ({
2
- root: {
3
- "& .MuiPaper-root": {
4
- borderRadius: "12px",
5
- backgroundColor: theme?.palette?.editor?.miniToolBarBackground,
6
- border: `1px solid ${theme?.palette?.editor?.miniToolBarBorder}`,
7
- overflow: "hidden"
8
- },
9
- "& textarea": {
10
- backgroundColor: theme?.palette?.editor?.inputFieldBgColor,
11
- border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
12
- borderRadius: "12px",
13
- padding: "10px !important",
14
- color: theme?.palette?.editor?.textColor,
15
- boxShadow: "0px 4px 18px 0px #00000014",
16
- "&:focus": {
17
- border: `1px solid #2563EB`,
18
- boxShadow: "0px 4px 18px 0px #2563EB1F",
19
- outline: "none"
20
- },
21
- "&:focus-visible": {
22
- border: `1px solid #2563EB`,
23
- boxShadow: "0px 4px 18px 0px #2563EB1F",
24
- outline: "none"
25
- }
26
- },
27
- "& .MuiDialogTitle-root": {
28
- padding: "20px 24px 16px 24px"
29
- },
30
- "& .title": {
31
- color: theme?.palette?.editor?.textColor,
32
- fontWeight: 600,
33
- fontSize: "20px",
34
- fontFamily: "Inter, sans-serif"
35
- },
36
- "& .close-popupbtn": {
37
- background: theme?.palette?.editor?.closeButtonBgColor,
38
- color: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`,
39
- "& svg": {
40
- color: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
41
- }
42
- },
43
- "& .divider": {
44
- margin: "0px 24px",
45
- background: theme?.palette?.editor?.deviderBgColor
46
- },
47
- "& .save-btn": {
48
- backgroundColor: "#2563EB",
49
- color: "#ffffff",
50
- fontWeight: 600,
51
- fontSize: "14px",
52
- opacity: 1,
53
- borderRadius: "8px",
54
- textTransform: "math-auto",
55
- height: "36px",
56
- padding: "0px 12px",
57
- minWidth: "90px",
58
- "&:hover": {
59
- backgroundColor: "#2563EB"
60
- },
61
- "@media only screen and (max-width: 899px)": {
62
- width: "50%"
63
- }
64
- },
65
- "& .clear-btn": {
66
- padding: "8px 12px",
67
- color: theme?.palette?.editor?.customDialogueCloseBtnColor,
68
- fontWeight: 600,
69
- fontSize: "14px",
70
- opacity: 1,
71
- borderRadius: "8px",
72
- textTransform: "math-auto",
73
- height: "36px",
74
- minWidth: "90px",
75
- backgroundColor: theme?.palette?.editor?.closeButtonBackground,
76
- border: `1px solid ${theme?.palette?.editor?.customDialogueCloseBtnBorder}`,
77
- "&:hover": {
78
- backgroundColor: theme?.palette?.editor?.closeButtonBackground
79
- },
80
- "@media only screen and (max-width: 899px)": {
81
- width: "50%"
82
- }
83
- },
84
- "& .MuiDialogActions-root": {
85
- padding: "0px 22px 16px 0px"
86
- }
87
- }
88
- });
89
- export default Styles;