@flozy/editor 10.1.3 → 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 (150) 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 -181
  23. package/dist/Editor/Elements/Form/FormElements/FormText.js +6 -23
  24. package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +2 -3
  25. package/dist/Editor/Elements/Form/FormField.js +6 -13
  26. package/dist/Editor/Elements/Form/Workflow/Styles.js +22 -24
  27. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +24 -6
  28. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +4 -7
  29. package/dist/Editor/Elements/FreeGrid/Options/More.js +8 -8
  30. package/dist/Editor/Elements/FreeGrid/styles.js +7 -67
  31. package/dist/Editor/Elements/Grid/GridItem.js +1 -1
  32. package/dist/Editor/Elements/List/CheckList.js +1 -4
  33. package/dist/Editor/Elements/Search/SearchAttachment.js +9 -40
  34. package/dist/Editor/Elements/Search/SearchButton.js +8 -9
  35. package/dist/Editor/Elements/Search/SearchList.js +7 -9
  36. package/dist/Editor/Elements/SimpleText/index.js +1 -6
  37. package/dist/Editor/Elements/SimpleText/style.js +2 -2
  38. package/dist/Editor/Elements/Table/Table.js +3 -3
  39. package/dist/Editor/Elements/Title/title.js +6 -6
  40. package/dist/Editor/Elements/Variables/VariableButton.js +1 -10
  41. package/dist/Editor/MiniEditor.js +1 -2
  42. package/dist/Editor/Styles/EditorStyles.js +5 -5
  43. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +3 -27
  44. package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +3 -4
  45. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  46. package/dist/Editor/Toolbar/FormatTools/TextSize.js +13 -10
  47. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +1 -2
  48. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +2 -4
  49. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +13 -6
  50. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +42 -167
  51. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +4 -7
  52. package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +1 -2
  53. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +12 -72
  54. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +27 -100
  55. package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
  56. package/dist/Editor/Toolbar/toolbarGroups.js +6 -48
  57. package/dist/Editor/assets/svg/SettingsIcon.js +0 -1
  58. package/dist/Editor/common/ColorPickerButton.js +17 -39
  59. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  60. package/dist/Editor/common/FontLoader/FontLoader.js +0 -3
  61. package/dist/Editor/common/Icon.js +1 -31
  62. package/dist/Editor/common/ImageSelector/Styles.js +9 -3
  63. package/dist/Editor/common/LinkSettings/NavComponents.js +8 -34
  64. package/dist/Editor/common/LinkSettings/index.js +68 -84
  65. package/dist/Editor/common/LinkSettings/style.js +30 -245
  66. package/dist/Editor/common/RnD/ElementOptions/Actions.js +14 -13
  67. package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js +0 -1
  68. package/dist/Editor/common/RnD/ElementOptions/index.js +2 -2
  69. package/dist/Editor/common/RnD/ElementOptions/styles.js +1 -28
  70. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +5 -6
  71. package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +2 -3
  72. package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +2 -3
  73. package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +2 -3
  74. package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +2 -3
  75. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +2 -4
  76. package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +2 -3
  77. package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +2 -3
  78. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +1 -3
  79. package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +2 -3
  80. package/dist/Editor/common/RnD/ElementSettings/styles.js +12 -147
  81. package/dist/Editor/common/RnD/OptionsPopup/index.js +5 -8
  82. package/dist/Editor/common/RnD/OptionsPopup/style.js +19 -121
  83. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +5 -8
  84. package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +3 -6
  85. package/dist/Editor/common/RnD/Utils/gridDropItem.js +2 -1
  86. package/dist/Editor/common/RnD/index.js +6 -5
  87. package/dist/Editor/common/Select/index.js +0 -2
  88. package/dist/Editor/common/Shorthands/elements.js +0 -54
  89. package/dist/Editor/common/StyleBuilder/buttonStyle.js +2 -4
  90. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +0 -5
  91. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +2 -12
  92. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +7 -15
  93. package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +8 -16
  94. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +10 -36
  95. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +7 -16
  96. package/dist/Editor/common/StyleBuilder/fieldTypes/lineSpacing.js +6 -7
  97. package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +6 -13
  98. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +7 -15
  99. package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js +7 -5
  100. package/dist/Editor/common/Uploader.js +0 -8
  101. package/dist/Editor/common/iconListV2.js +6 -101
  102. package/dist/Editor/common/iconslist.js +0 -24
  103. package/dist/Editor/commonStyle.js +61 -165
  104. package/dist/Editor/helper/theme.js +2 -203
  105. package/dist/Editor/hooks/useMouseMove.js +5 -8
  106. package/dist/Editor/plugins/withEmbeds.js +1 -1
  107. package/dist/Editor/plugins/withHTML.js +1 -3
  108. package/dist/Editor/plugins/withTable.js +1 -1
  109. package/dist/Editor/theme/ThemeList.js +173 -50
  110. package/dist/Editor/utils/SlateUtilityFunctions.js +43 -166
  111. package/dist/Editor/utils/button.js +17 -1
  112. package/dist/Editor/utils/draftToSlate.js +2 -3
  113. package/dist/Editor/utils/font.js +37 -40
  114. package/dist/Editor/utils/form.js +4 -4
  115. package/dist/Editor/utils/formfield.js +2 -8
  116. package/dist/Editor/utils/helper.js +19 -90
  117. package/package.json +4 -4
  118. package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/MultiSelect.js +0 -454
  119. package/dist/Editor/Elements/EmbedScript/styles.js +0 -89
  120. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +0 -439
  121. package/dist/Editor/assets/svg/BackIcon.js +0 -18
  122. package/dist/Editor/assets/svg/ClearAllRounded.js +0 -31
  123. package/dist/Editor/assets/svg/ResetIconNew.js +0 -23
  124. package/dist/Editor/assets/svg/ThemeIcons.js +0 -293
  125. package/dist/Editor/common/CustomColorPicker/index.js +0 -130
  126. package/dist/Editor/common/CustomColorPicker/style.js +0 -53
  127. package/dist/Editor/common/CustomDialog2/index.js +0 -94
  128. package/dist/Editor/common/CustomDialog2/style.js +0 -67
  129. package/dist/Editor/common/CustomSelect.js +0 -43
  130. package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +0 -17
  131. package/dist/Editor/common/SnackBar/index.js +0 -43
  132. package/dist/Editor/helper/textIndeces.js +0 -58
  133. package/dist/Editor/hooks/useEditorTheme.js +0 -153
  134. package/dist/Editor/hooks/useThemeValues.js +0 -63
  135. package/dist/Editor/theme/index.js +0 -149
  136. package/dist/Editor/themeSettings/ActiveTheme.js +0 -72
  137. package/dist/Editor/themeSettings/buttons/index.js +0 -290
  138. package/dist/Editor/themeSettings/buttons/style.js +0 -23
  139. package/dist/Editor/themeSettings/colorTheme/index.js +0 -309
  140. package/dist/Editor/themeSettings/colorTheme/style.js +0 -81
  141. package/dist/Editor/themeSettings/fonts/PreviewElement.js +0 -121
  142. package/dist/Editor/themeSettings/fonts/index.js +0 -240
  143. package/dist/Editor/themeSettings/fonts/style.js +0 -62
  144. package/dist/Editor/themeSettings/icons.js +0 -60
  145. package/dist/Editor/themeSettings/index.js +0 -361
  146. package/dist/Editor/themeSettings/style.js +0 -292
  147. package/dist/Editor/themeSettingsAI/icons.js +0 -96
  148. package/dist/Editor/themeSettingsAI/index.js +0 -355
  149. package/dist/Editor/themeSettingsAI/saveTheme.js +0 -202
  150. package/dist/Editor/themeSettingsAI/style.js +0 -324
@@ -2,7 +2,6 @@ import { Editor, Node, Transforms, Element, Path, Range, Text } from "slate";
2
2
  import { ReactEditor } from "slate-react";
3
3
  import insertNewLine from "./insertNewLine";
4
4
  import { getDevice } from "../helper/theme";
5
- import { activeMark, getSelectedElementStyle } from "./SlateUtilityFunctions";
6
5
  export const windowVar = {};
7
6
  let ST_TIMEOUT = null;
8
7
  const BLOCKS = ["grid", "dataView"];
@@ -481,34 +480,6 @@ export const decodeString = str => {
481
480
  console.log(err);
482
481
  }
483
482
  };
484
- export const getContrastColor = color => {
485
- let r, g, b;
486
-
487
- // Check if the color is in hex format
488
- if (color.startsWith("#")) {
489
- r = parseInt(color.substring(1, 3), 16);
490
- g = parseInt(color.substring(3, 5), 16);
491
- b = parseInt(color.substring(5, 7), 16);
492
- }
493
- // Check if the color is in RGB/RGBA format
494
- else if (color.startsWith("rgb")) {
495
- const rgbValues = color.replace(/^rgba?\(|\s+|\)$/g, "") // Remove the rgb/rgba and spaces
496
- .split(","); // Split the values into an array
497
-
498
- r = parseInt(rgbValues[0]);
499
- g = parseInt(rgbValues[1]);
500
- b = parseInt(rgbValues[2]);
501
- } else {
502
- // If the format is not recognized, default to black text
503
- return "#000000";
504
- }
505
-
506
- // Calculate relative luminance
507
- const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
508
-
509
- // Return black for light colors, white for dark colors
510
- return luminance > 0.5 ? "#000000" : "#FFFFFF";
511
- };
512
483
  export const onDeleteKey = (event, {
513
484
  editor
514
485
  }) => {
@@ -726,10 +697,6 @@ export const isRestrictedNode = (event, editor) => {
726
697
  return isNodeRestricted;
727
698
  }
728
699
  };
729
- export function capitalizeFirstLetter(str) {
730
- if (!str) return str;
731
- return str.charAt(0).toUpperCase() + str.slice(1);
732
- }
733
700
  export const insertLineBreakAtEndOfPath = (editor, path) => {
734
701
  try {
735
702
  const [node, nodePath] = Editor.node(editor, path); // Get the node at the specified path
@@ -748,13 +715,6 @@ export const insertLineBreakAtEndOfPath = (editor, path) => {
748
715
  console.log(err);
749
716
  }
750
717
  };
751
- export function isHavingSelection(editor) {
752
- try {
753
- return editor?.selection && !Range.isCollapsed(editor.selection);
754
- } catch (err) {
755
- console.log(err);
756
- }
757
- }
758
718
  const omitNodes = ["site-settings", "page-settings"];
759
719
  export function getInitialValue(value = [], readOnly) {
760
720
  if (readOnly === "readonly" && value?.length) {
@@ -785,17 +745,20 @@ export function getInitialValue(value = [], readOnly) {
785
745
  }
786
746
  return value;
787
747
  }
748
+ export function capitalizeFirstLetter(str) {
749
+ if (!str) return str;
750
+ return str.charAt(0).toUpperCase() + str.slice(1);
751
+ }
752
+ export function isHavingSelection(editor) {
753
+ try {
754
+ return editor?.selection && !Range.isCollapsed(editor.selection);
755
+ } catch (err) {
756
+ console.log(err);
757
+ }
758
+ }
788
759
  export function getSelectedCls(defaultCls = "", selected, selectedClsName = "selected") {
789
760
  return `${defaultCls} ${selected ? selectedClsName : ""}`;
790
761
  }
791
- export function handleNegativeInteger(val) {
792
- return val < 0 ? 0 : val;
793
- }
794
- export const containsSurrogatePair = text => {
795
- // Match surrogate pairs (high and low surrogate)
796
- const surrogatePairRegex = /[\uD800-\uDBFF][\uDC00-\uDFFF]/;
797
- return surrogatePairRegex.test(text);
798
- };
799
762
  export const getNodeWithType = (editor, nodeType = "", otherOptions) => {
800
763
  try {
801
764
  const options = {
@@ -809,6 +772,11 @@ export const getNodeWithType = (editor, nodeType = "", otherOptions) => {
809
772
  return [];
810
773
  }
811
774
  };
775
+ export const containsSurrogatePair = text => {
776
+ // Match surrogate pairs (high and low surrogate)
777
+ const surrogatePairRegex = /[\uD800-\uDBFF][\uDC00-\uDFFF]/;
778
+ return surrogatePairRegex.test(text);
779
+ };
812
780
  export const getSlateDom = (editor, range) => {
813
781
  try {
814
782
  const slateDom = ReactEditor.toDOMRange(editor, range);
@@ -858,6 +826,9 @@ export const hideSlateSelection = () => {
858
826
  const root = document.documentElement;
859
827
  root.style.setProperty("--slate-highlight-bg", "none");
860
828
  };
829
+ export function handleNegativeInteger(val) {
830
+ return val < 0 ? 0 : val;
831
+ }
861
832
  export const isEverythingSelected = editor => {
862
833
  const {
863
834
  selection
@@ -887,46 +858,4 @@ export const getCurrentNodeText = editor => {
887
858
  } catch (error) {
888
859
  console.log("Error:", error);
889
860
  }
890
- };
891
- function convertColorToRgb(color) {
892
- if (color?.startsWith("#")) {
893
- // HEX to RGB
894
- let hex = color.replace("#", "");
895
- let r, g, b;
896
- if (hex.length === 3) {
897
- hex = hex.split("").map(x => x + x).join("");
898
- }
899
- if (hex.length === 6) {
900
- [r, g, b] = [hex.substring(0, 2), hex.substring(2, 4), hex.substring(4, 6)].map(val => parseInt(val, 16));
901
- return `rgb(${r}, ${g}, ${b})`;
902
- }
903
- } else {
904
- return color;
905
- }
906
- }
907
- export const getSelectedColor = (selectedColor, theme, hideThemeColors) => {
908
- const colorVars = hideThemeColors ? null : theme?.vars?.colors;
909
- let selectedValue = selectedColor;
910
- if (colorVars) {
911
- const convertedColor = convertColorToRgb(selectedColor);
912
- Object.entries(theme.colors).forEach(([key, value]) => {
913
- const convertedThemeColor = convertColorToRgb(value);
914
- if (convertedThemeColor === convertedColor) {
915
- selectedValue = colorVars[key];
916
- }
917
- });
918
- }
919
- return selectedValue;
920
- };
921
- const themeTextFormats = ["headingOne", "headingTwo", "headingThree", "headingFour", "headingFive", "headingSix", "paragraphOne", "paragraphTwo", "paragraphThree"];
922
- export const getSelectedElementColor = (editor, format, theme) => {
923
- const [isThemeText] = Editor.nodes(editor, {
924
- at: editor.selection,
925
- match: n => themeTextFormats.includes(n?.type)
926
- });
927
- if (!isThemeText) {
928
- return activeMark(editor, "color") || "#000000";
929
- }
930
- const color = getSelectedElementStyle(format, editor, format);
931
- return getSelectedColor(color, theme);
932
861
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flozy/editor",
3
- "version": "10.1.3",
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;