easy-email-pro-theme 1.56.0 → 1.56.2

package/lib/index.js

@@ -39769,36 +39769,36 @@ const BlocksDrawer = () => {
     handleSelectBlock
   ]);
 };
-const blocksModal = "_blocksModal_oes30_1";
-const modalHeader = "_modalHeader_oes30_9";
-const headerActions = "_headerActions_oes30_16";
-const searchInput = "_searchInput_oes30_22";
-const modalTitle = "_modalTitle_oes30_26";
-const contentArea = "_contentArea_oes30_32";
-const category = "_category_oes30_38";
-const categoryHeader = "_categoryHeader_oes30_45";
-const gridContainer = "_gridContainer_oes30_56";
-const gridItem = "_gridItem_oes30_65";
-const selected = "_selected_oes30_84";
-const gridItemIcon = "_gridItemIcon_oes30_88";
-const gridItemLabel = "_gridItemLabel_oes30_118";
-const checkIcon = "_checkIcon_oes30_126";
-const emptyState = "_emptyState_oes30_143";
-const layoutPreview = "_layoutPreview_oes30_153";
-const layoutSelected = "_layoutSelected_oes30_169";
-const layoutRowLabel = "_layoutRowLabel_oes30_175";
-const layoutRow = "_layoutRow_oes30_175";
-const layoutColumn = "_layoutColumn_oes30_200";
+const blocksModal = "_blocksModal_12piq_1";
+const modalHeader = "_modalHeader_12piq_7";
+const headerActions = "_headerActions_12piq_14";
+const searchInput = "_searchInput_12piq_20";
+const modalTitle = "_modalTitle_12piq_24";
+const category = "_category_12piq_30";
+const categoryHeader = "_categoryHeader_12piq_37";
+const gridContainer = "_gridContainer_12piq_48";
+const prebuiltBlockContainer = "_prebuiltBlockContainer_12piq_57";
+const gridItem = "_gridItem_12piq_66";
+const selected = "_selected_12piq_85";
+const gridItemIcon = "_gridItemIcon_12piq_89";
+const gridItemLabel = "_gridItemLabel_12piq_119";
+const checkIcon = "_checkIcon_12piq_127";
+const emptyState = "_emptyState_12piq_144";
+const layoutPreview = "_layoutPreview_12piq_154";
+const layoutSelected = "_layoutSelected_12piq_170";
+const layoutRowLabel = "_layoutRowLabel_12piq_176";
+const layoutRow = "_layoutRow_12piq_176";
+const layoutColumn = "_layoutColumn_12piq_201";
 const styles = {
   blocksModal,
   modalHeader,
   headerActions,
   searchInput,
   modalTitle,
-  contentArea,
   category,
   categoryHeader,
   gridContainer,
+  prebuiltBlockContainer,
   gridItem,
   selected,
   gridItemIcon,
@@ -39848,6 +39848,11 @@ const BlocksModal = () => {
   } = useBlocksDrawer();
   const editorProps = useEditorProps();
   const { categories: propsCategories } = editorProps;
+  const prebuiltBlocks = editorProps.prebuiltBlocks;
+  const [activeTab, setActiveTab] = useState(
+    "default"
+    /* DEFAULT */
+  );
   const categories = useMemo(() => {
     const filtered = (propsCategories || []).map((categoryItem) => {
       if (!parentCategory)
@@ -39909,6 +39914,29 @@ const BlocksModal = () => {
     });
     return filtered;
   }, [propsCategories, parentCategory, searchQuery]);
+  const filteredPrebuiltBlocks = useMemo(() => {
+    if (!prebuiltBlocks || prebuiltBlocks.length === 0) {
+      return [];
+    }
+    let result = prebuiltBlocks;
+    if (searchQuery.trim()) {
+      const query = searchQuery.toLowerCase().trim();
+      result = result.map((category2) => {
+        const filteredBlocks = category2.blocks.filter((block) => {
+          const titleMatch = block.title.toLowerCase().includes(query);
+          const categoryMatch = block.category.toLowerCase().includes(query);
+          return titleMatch || categoryMatch;
+        });
+        if (filteredBlocks.length === 0) {
+          return null;
+        }
+        return __spreadProps(__spreadValues({}, category2), {
+          blocks: filteredBlocks
+        });
+      }).filter((category2) => category2 !== null);
+    }
+    return result;
+  }, [prebuiltBlocks, searchQuery]);
   const handleSelectBlock = useCallback(
     (blockType) => {
       if (!insertPath)
@@ -39933,6 +39961,16 @@ const BlocksModal = () => {
     if (!selectedBlock)
       return;
     const { block, categoryIndex } = selectedBlock;
+    if (activeTab === "prebuilt" && prebuiltBlocks) {
+      const category22 = filteredPrebuiltBlocks[categoryIndex];
+      if (category22) {
+        const prebuiltBlock = category22.blocks[selectedBlock.blockIndex];
+        if (prebuiltBlock) {
+          handleSelectBlock(prebuiltBlock.payload);
+          return;
+        }
+      }
+    }
     const category2 = categories[categoryIndex];
     if ((category2 == null ? void 0 : category2.displayType) === "grid") {
       handleSelectBlock(__spreadProps(__spreadValues({}, block.payload), {
@@ -39997,10 +40035,14 @@ const BlocksModal = () => {
         handleSelectBlock(element);
       }
     }
-  }, [selectedBlock, categories, handleSelectBlock]);
+  }, [selectedBlock, categories, handleSelectBlock, activeTab, prebuiltBlocks, filteredPrebuiltBlocks]);
   const handleModalClose = useCallback(() => {
     setSelectedBlock(null);
     setSearchQuery("");
+    setActiveTab(
+      "default"
+      /* DEFAULT */
+    );
     onClose();
   }, [onClose]);
   const handleSearchChange = useCallback((value) => {
@@ -40010,7 +40052,7 @@ const BlocksModal = () => {
   const renderGridContent = useMemo(() => {
     return categories.map((category2, categoryIndex) => {
       if (category2.displayType === "grid") {
-        return /* @__PURE__ */ React__default.createElement("div", { key: categoryIndex, className: styles.category }, /* @__PURE__ */ React__default.createElement("div", { className: styles.categoryHeader }, /* @__PURE__ */ React__default.createElement(Text, { bold: true }, category2.label)), /* @__PURE__ */ React__default.createElement("div", { className: styles.gridContainer }, category2.blocks.map((block, blockIndex) => {
+        return /* @__PURE__ */ React__default.createElement("div", { key: categoryIndex + category2.label, className: styles.category }, /* @__PURE__ */ React__default.createElement("div", { className: styles.categoryHeader }, /* @__PURE__ */ React__default.createElement(Text, { bold: true }, category2.label)), /* @__PURE__ */ React__default.createElement("div", { className: styles.gridContainer }, category2.blocks.map((block, blockIndex) => {
           const isSelected = (selectedBlock == null ? void 0 : selectedBlock.categoryIndex) === categoryIndex && (selectedBlock == null ? void 0 : selectedBlock.blockIndex) === blockIndex;
           const blockTitle = block.title || BlockManager.getBlockTitle(__spreadProps(__spreadValues({}, block.payload), {
             type: block.type
@@ -40029,7 +40071,7 @@ const BlocksModal = () => {
         })));
       }
       if (category2.displayType === "section") {
-        return /* @__PURE__ */ React__default.createElement("div", { key: categoryIndex, className: styles.category }, /* @__PURE__ */ React__default.createElement("div", { className: styles.categoryHeader }, /* @__PURE__ */ React__default.createElement(Text, { bold: true }, category2.label)), /* @__PURE__ */ React__default.createElement("div", { style: { padding: "0 20px" } }, category2.blocks.map((item2, index2) => /* @__PURE__ */ React__default.createElement("div", { key: index2 }, /* @__PURE__ */ React__default.createElement(
+        return /* @__PURE__ */ React__default.createElement("div", { key: categoryIndex + category2.label, className: styles.category }, /* @__PURE__ */ React__default.createElement("div", { className: styles.categoryHeader }, /* @__PURE__ */ React__default.createElement(Text, { bold: true }, category2.label)), /* @__PURE__ */ React__default.createElement("div", { style: { padding: "0 20px" } }, category2.blocks.map((item2, index2) => /* @__PURE__ */ React__default.createElement("div", { key: index2 }, /* @__PURE__ */ React__default.createElement(
           "div",
           {
             style: {
@@ -40069,7 +40111,7 @@ const BlocksModal = () => {
         )))));
       }
       if (category2.displayType === "column") {
-        return /* @__PURE__ */ React__default.createElement("div", { key: categoryIndex, className: styles.category }, /* @__PURE__ */ React__default.createElement("div", { className: styles.categoryHeader }, /* @__PURE__ */ React__default.createElement(Text, { bold: true }, category2.label)), /* @__PURE__ */ React__default.createElement("div", { style: { padding: "0 20px" } }, category2.blocks.map((item2, index2) => /* @__PURE__ */ React__default.createElement("div", { key: index2 }, /* @__PURE__ */ React__default.createElement(
+        return /* @__PURE__ */ React__default.createElement("div", { key: categoryIndex + category2.label, className: styles.category }, /* @__PURE__ */ React__default.createElement("div", { className: styles.categoryHeader }, /* @__PURE__ */ React__default.createElement(Text, { bold: true }, category2.label)), /* @__PURE__ */ React__default.createElement("div", { style: { padding: "0 20px" } }, category2.blocks.map((item2, index2) => /* @__PURE__ */ React__default.createElement("div", { key: index2 }, /* @__PURE__ */ React__default.createElement(
           "div",
           {
             style: {
@@ -40101,7 +40143,7 @@ const BlocksModal = () => {
         })))));
       }
       if (category2.displayType === "custom") {
-        return /* @__PURE__ */ React__default.createElement("div", { key: categoryIndex, className: styles.category }, /* @__PURE__ */ React__default.createElement("div", { className: styles.categoryHeader }, /* @__PURE__ */ React__default.createElement(Text, { bold: true }, category2.label)), /* @__PURE__ */ React__default.createElement("div", { style: { padding: "16px 20px" } }, category2.blocks.map((item2, index2) => /* @__PURE__ */ React__default.createElement(
+        return /* @__PURE__ */ React__default.createElement("div", { key: categoryIndex + category2.label, className: styles.category }, /* @__PURE__ */ React__default.createElement("div", { className: styles.categoryHeader }, /* @__PURE__ */ React__default.createElement(Text, { bold: true }, category2.label)), /* @__PURE__ */ React__default.createElement("div", { style: { padding: "16px 20px" } }, category2.blocks.map((item2, index2) => /* @__PURE__ */ React__default.createElement(
           "div",
           {
             key: index2,
@@ -40115,6 +40157,34 @@ const BlocksModal = () => {
       return null;
     });
   }, [categories, selectedBlock, handleGridItemClick]);
+  const renderPrebuiltBlocks = useMemo(() => {
+    if (!prebuiltBlocks || prebuiltBlocks.length === 0) {
+      return /* @__PURE__ */ React__default.createElement("div", { className: styles.emptyState }, t("No blocks available"));
+    }
+    if (filteredPrebuiltBlocks.length === 0) {
+      return /* @__PURE__ */ React__default.createElement("div", { className: styles.emptyState }, t("No blocks available"));
+    }
+    return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, filteredPrebuiltBlocks.map((category2, categoryIndex) => /* @__PURE__ */ React__default.createElement("div", { key: categoryIndex, className: styles.category }, /* @__PURE__ */ React__default.createElement("div", { className: styles.categoryHeader }, /* @__PURE__ */ React__default.createElement(Text, { bold: true }, category2.label)), /* @__PURE__ */ React__default.createElement("div", { className: styles.prebuiltBlockContainer }, category2.blocks.map((block, blockIndex) => {
+      const isSelected = (selectedBlock == null ? void 0 : selectedBlock.categoryIndex) === categoryIndex && (selectedBlock == null ? void 0 : selectedBlock.blockIndex) === blockIndex;
+      return /* @__PURE__ */ React__default.createElement(
+        "div",
+        {
+          key: blockIndex,
+          className: `${styles.gridItem} ${isSelected ? styles.selected : ""}`,
+          style: {
+            backgroundImage: `url(${block.thumbnail})`,
+            aspectRatio: "16 / 9",
+            backgroundSize: "contain",
+            backgroundPosition: "center",
+            backgroundRepeat: "no-repeat"
+          },
+          onClick: () => handleGridItemClick(block, categoryIndex, blockIndex)
+        },
+        isSelected && /* @__PURE__ */ React__default.createElement("div", { className: styles.checkIcon }, /* @__PURE__ */ React__default.createElement(IconCheck, null))
+      );
+    })))));
+  }, [prebuiltBlocks, filteredPrebuiltBlocks, selectedBlock == null ? void 0 : selectedBlock.categoryIndex, selectedBlock == null ? void 0 : selectedBlock.blockIndex, handleGridItemClick]);
+  const hasPrebuiltBlocks = prebuiltBlocks && prebuiltBlocks.length > 0;
   return /* @__PURE__ */ React__default.createElement(
     Modal,
     {
@@ -40132,7 +40202,47 @@ const BlocksModal = () => {
       },
       cancelText: t("Cancel")
     },
-    /* @__PURE__ */ React__default.createElement("div", { className: styles.blocksModal }, /* @__PURE__ */ React__default.createElement("div", { className: styles.headerActions }, /* @__PURE__ */ React__default.createElement(
+    /* @__PURE__ */ React__default.createElement("div", { className: styles.blocksModal, key: activeTab }, hasPrebuiltBlocks ? /* @__PURE__ */ React__default.createElement("div", { className: styles.tabsContainer }, /* @__PURE__ */ React__default.createElement(Button$2.Group, { style: { width: "100%", marginBottom: 16 } }, /* @__PURE__ */ React__default.createElement(
+      Button$2,
+      {
+        size: "large",
+        type: activeTab === "default" ? "primary" : "outline",
+        onClick: () => {
+          setActiveTab(
+            "default"
+            /* DEFAULT */
+          );
+          setSelectedBlock(null);
+        },
+        style: { width: "50%" }
+      },
+      t("Default")
+    ), /* @__PURE__ */ React__default.createElement(
+      Button$2,
+      {
+        size: "large",
+        type: activeTab === "prebuilt" ? "primary" : "outline",
+        onClick: () => {
+          setActiveTab(
+            "prebuilt"
+            /* PREBUILT */
+          );
+          setSelectedBlock(null);
+        },
+        style: { width: "50%" }
+      },
+      t("Prebuilt")
+    )), /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", { className: styles.headerActions }, /* @__PURE__ */ React__default.createElement(
+      Input,
+      {
+        className: styles.searchInput,
+        placeholder: t("Search blocks..."),
+        prefix: /* @__PURE__ */ React__default.createElement(IconSearch, null),
+        value: searchQuery,
+        onChange: handleSearchChange,
+        allowClear: true
+      }
+    )), /* @__PURE__ */ React__default.createElement(SharedComponents.FullHeightOverlayScrollbars, { height: "calc(100vh - 350px)", maxHeight: "600px" }, activeTab === "default" ? categories.length > 0 ? renderGridContent : /* @__PURE__ */ React__default.createElement("div", { className: styles.emptyState }, t("No blocks available")) : renderPrebuiltBlocks))) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", { className: styles.headerActions }, /* @__PURE__ */ React__default.createElement(
       Input,
       {
         className: styles.searchInput,
@@ -40142,7 +40252,7 @@ const BlocksModal = () => {
         onChange: handleSearchChange,
         allowClear: true
       }
-    )), /* @__PURE__ */ React__default.createElement("div", { className: styles.contentArea }, categories.length > 0 ? renderGridContent : /* @__PURE__ */ React__default.createElement("div", { className: styles.emptyState }, t("No blocks available"))))
+    )), /* @__PURE__ */ React__default.createElement("div", { className: styles.contentArea }, /* @__PURE__ */ React__default.createElement(SharedComponents.FullHeightOverlayScrollbars, { height: "calc(100vh - 350px)", maxHeight: "600px" }, categories.length > 0 ? renderGridContent : /* @__PURE__ */ React__default.createElement("div", { className: styles.emptyState }, t("No blocks available"))))))
   );
 };
 const styleText$8 = "[data-standard-table2-selected=true] ::selection {\n  background: none !important;\n}\n\n[data-standard-table2-selected=true] [data-standard-table2-td-selected=true] {\n  background-color: rgba(199, 199, 199, 0.4) !important;\n}";

package/lib/style.css

@@ -1876,51 +1876,43 @@ THEMES:
   opacity: 0;
   visibility: hidden;
   white-space: nowrap;
-}._blocksModal_oes30_1 {
+}._blocksModal_12piq_1 {
   display: flex;
   flex-direction: column;
-  height: 70vh;
-  max-height: 600px;
   background-color: var(--color-bg-1);
 }
 
-._modalHeader_oes30_9 {
+._modalHeader_12piq_7 {
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-shrink: 0;
 }
 
-._headerActions_oes30_16 {
+._headerActions_12piq_14 {
   display: flex;
   align-items: center;
   gap: 12px;
 }
 
-._searchInput_oes30_22 {
+._searchInput_12piq_20 {
   width: 240px;
 }
 
-._modalTitle_oes30_26 {
+._modalTitle_12piq_24 {
   font-size: 16px;
   font-weight: 600;
   color: var(--color-text-1);
 }
 
-._contentArea_oes30_32 {
-  overflow-y: auto;
-  overflow-x: hidden;
-  flex: 1;
-}
-
-._category_oes30_38 {
-  margin-bottom: 32px;
+._category_12piq_30 {
+  padding-bottom: 32px;
 }
-._category_oes30_38:first-child {
+._category_12piq_30:first-child {
   margin-top: 0;
 }
 
-._categoryHeader_oes30_45 {
+._categoryHeader_12piq_37 {
   padding: 12px 0;
   margin-bottom: 16px;
   font-size: 14px;
@@ -1931,7 +1923,7 @@ THEMES:
   border-bottom: 1px solid var(--color-border-2);
 }
 
-._gridContainer_oes30_56 {
+._gridContainer_12piq_48 {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
   gap: 16px;
@@ -1940,7 +1932,16 @@ THEMES:
   padding: 0 20px;
 }
 
-._gridItem_oes30_65 {
+._prebuiltBlockContainer_12piq_57 {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 16px;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0 20px;
+}
+
+._gridItem_12piq_66 {
   position: relative;
   display: flex;
   flex-direction: column;
@@ -1955,15 +1956,15 @@ THEMES:
   box-sizing: border-box;
   min-width: 0;
 }
-._gridItem_oes30_65:hover {
+._gridItem_12piq_66:hover {
   border-color: rgb(var(--primary-3));
   background-color: var(--color-fill-1);
 }
-._gridItem_oes30_65._selected_oes30_84 {
+._gridItem_12piq_66._selected_12piq_85 {
   border: 2px solid rgb(var(--primary-6));
 }
 
-._gridItemIcon_oes30_88 {
+._gridItemIcon_12piq_89 {
   width: 48px;
   height: 48px;
   display: flex;
@@ -1973,27 +1974,27 @@ THEMES:
   flex-shrink: 0;
   position: relative;
 }
-._gridItemIcon_oes30_88 * {
+._gridItemIcon_12piq_89 * {
   max-width: 48px !important;
   max-height: 48px !important;
 }
-._gridItemIcon_oes30_88 img {
+._gridItemIcon_12piq_89 img {
   width: 100% !important;
   height: 100% !important;
   max-width: 48px !important;
   max-height: 48px !important;
   object-fit: contain !important;
 }
-._gridItemIcon_oes30_88 svg {
+._gridItemIcon_12piq_89 svg {
   max-width: 48px !important;
   max-height: 48px !important;
 }
-._gridItemIcon_oes30_88 div {
+._gridItemIcon_12piq_89 div {
   max-width: 48px !important;
   max-height: 48px !important;
 }
 
-._gridItemLabel_oes30_118 {
+._gridItemLabel_12piq_119 {
   font-size: 13px;
   color: var(--color-text-1);
   text-align: center;
@@ -2001,7 +2002,7 @@ THEMES:
   line-height: 1.4;
 }
 
-._checkIcon_oes30_126 {
+._checkIcon_12piq_127 {
   position: absolute;
   bottom: 0px;
   right: 0px;
@@ -2018,7 +2019,7 @@ THEMES:
   z-index: 1;
 }
 
-._emptyState_oes30_143 {
+._emptyState_12piq_144 {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -2028,7 +2029,7 @@ THEMES:
   font-size: 14px;
 }
 
-._layoutPreview_oes30_153 {
+._layoutPreview_12piq_154 {
   border-bottom: 1px solid var(--color-border-2);
   cursor: pointer;
   transition: all 0.2s ease;
@@ -2041,16 +2042,16 @@ THEMES:
   width: 100%;
   max-width: 100%;
 }
-._layoutPreview_oes30_153:hover {
+._layoutPreview_12piq_154:hover {
   background-color: var(--color-fill-3);
 }
-._layoutPreview_oes30_153._layoutSelected_oes30_169 {
+._layoutPreview_12piq_154._layoutSelected_12piq_170 {
   border: 1px solid rgb(var(--primary-6));
   background-color: rgba(var(--primary-1), 0.3);
   box-shadow: 0 2px 4px rgba(var(--primary-6), 0.1);
 }
 
-._layoutRowLabel_oes30_175 {
+._layoutRowLabel_12piq_176 {
   font-size: 11px;
   color: var(--color-text-3);
   margin-top: 8px;
@@ -2058,7 +2059,7 @@ THEMES:
   font-weight: 500;
 }
 
-._layoutRow_oes30_175 {
+._layoutRow_12piq_176 {
   height: 50px;
   display: flex;
   border: 1px solid var(--color-border-2);
@@ -2071,11 +2072,11 @@ THEMES:
   width: 100%;
   min-width: 0;
 }
-._layoutRow_oes30_175:last-child {
+._layoutRow_12piq_176:last-child {
   margin-bottom: 0;
 }
 
-._layoutColumn_oes30_200 {
+._layoutColumn_12piq_201 {
   height: 100%;
   display: flex;
   align-items: center;
@@ -2088,19 +2089,19 @@ THEMES:
   min-width: 0;
   flex-shrink: 1;
 }
-._layoutColumn_oes30_200:not(:last-child) {
+._layoutColumn_12piq_201:not(:last-child) {
   border-right: 1px solid var(--color-border-2);
 }
 
-._layoutPreview_oes30_153._layoutSelected_oes30_169 ._layoutRow_oes30_175 {
+._layoutPreview_12piq_154._layoutSelected_12piq_170 ._layoutRow_12piq_176 {
   border-color: rgba(var(--primary-6), 0.3);
   background-color: rgba(var(--primary-1), 0.1);
 }
-._layoutPreview_oes30_153._layoutSelected_oes30_169 ._layoutColumn_oes30_200 {
+._layoutPreview_12piq_154._layoutSelected_12piq_170 ._layoutColumn_12piq_201 {
   color: rgb(var(--primary-6));
   font-weight: 600;
 }
-._layoutPreview_oes30_153._layoutSelected_oes30_169 ._layoutColumn_oes30_200:not(:last-child) {
+._layoutPreview_12piq_154._layoutSelected_12piq_170 ._layoutColumn_12piq_201:not(:last-child) {
   border-right-color: rgba(var(--primary-6), 0.2);
 }.BlockSideBar-PrebuiltBlockList {
   --prebuilt-block-item-size: 120px;

package/lib/typings/themes/Retro/components/ElementInteract/TableTools/ContextMenu.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
-export declare const ContextMenu: ({ position, }: {
+export declare const ContextMenu: React.FC<{
     position: {
         top: number;
         left: number;
     };
-}) => React.ReactPortal;
+}>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "easy-email-pro-theme",
-  "version": "1.56.0",
+  "version": "1.56.2",
   "description": "",
   "files": [
     "lib"