easy-email-extensions 3.2.1-alpha.11 → 3.2.1-alpha.14

package/lib/ShortcutToolbar/components/DragIcon/index.d.ts

@@ -1,6 +1,8 @@
-export interface DragIconProps {
+import { IBlockData } from 'easy-email-core';
+import { RecursivePartial } from 'easy-email-core';
+export interface DragIconProps<T extends IBlockData> {
     type: string;
-    payload?: any;
+    payload?: RecursivePartial<T>;
     color: string;
 }
-export declare function DragIcon(props: DragIconProps): JSX.Element;
+export declare function DragIcon<T extends IBlockData = any>(props: DragIconProps<T>): JSX.Element;

package/lib/index2.js

@@ -39767,10 +39767,13 @@ function AddFont() {
         }, /* @__PURE__ */ React__default.createElement(TextField, {
           name: `${focusIdx2}.data.value.fonts.${index2}.href`,
           label: "Href"
-        })), /* @__PURE__ */ React__default.createElement(Button$4, {
+        })), /* @__PURE__ */ React__default.createElement(Stack$6, {
+          vertical: true,
+          spacing: "loose"
+        }, /* @__PURE__ */ React__default.createElement(Stack$6.Item, null), /* @__PURE__ */ React__default.createElement(Button$4, {
           icon: /* @__PURE__ */ React__default.createElement(IconDelete$1, null),
           onClick: () => arrayHelpers.fields.remove(index2)
-        })));
+        }))));
       }))));
     }
   });
@@ -39897,31 +39900,36 @@ function Page() {
     name: `${focusIdx2}.data.value.font-size`
   }))), /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
     span: 11
-  }, /* @__PURE__ */ React__default.createElement(ColorPickerField, {
-    label: "Text color",
-    name: `${focusIdx2}.data.value.text-color`
+  }, /* @__PURE__ */ React__default.createElement(InputWithUnitField, {
+    label: "Line height",
+    unitOptions: "percent",
+    name: `${focusIdx2}.data.value.line-height`
   })), /* @__PURE__ */ React__default.createElement(Grid.Col, {
     offset: 1,
     span: 11
   }, /* @__PURE__ */ React__default.createElement(InputWithUnitField, {
-    label: "Line height",
+    label: "Font weight",
     unitOptions: "percent",
-    name: `${focusIdx2}.data.value.line-height`
+    name: `${focusIdx2}.data.value.font-weight`
   }))), /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
     span: 11
   }, /* @__PURE__ */ React__default.createElement(ColorPickerField, {
-    label: "Background",
-    name: `${focusIdx2}.attributes.background-color`
+    label: "Text color",
+    name: `${focusIdx2}.data.value.text-color`
   })), /* @__PURE__ */ React__default.createElement(Grid.Col, {
     offset: 1,
     span: 11
   }, /* @__PURE__ */ React__default.createElement(ColorPickerField, {
+    label: "Background",
+    name: `${focusIdx2}.attributes.background-color`
+  }))), /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(ColorPickerField, {
     label: "Content background",
     name: `${focusIdx2}.data.value.content-background-color`
-  }))), /* @__PURE__ */ React__default.createElement(TextAreaField, {
-    label: "Style",
+  })), /* @__PURE__ */ React__default.createElement(TextAreaField, {
+    autoSize: true,
+    label: "User style",
     name: `${focusIdx2}.data.value.user-style.content`
-  }), /* @__PURE__ */ React__default.createElement(AddFont, null))))));
+  }), /* @__PURE__ */ React__default.createElement(Stack$6.Item, null), /* @__PURE__ */ React__default.createElement(Stack$6.Item, null), /* @__PURE__ */ React__default.createElement(AddFont, null), /* @__PURE__ */ React__default.createElement(Stack$6.Item, null), /* @__PURE__ */ React__default.createElement(Stack$6.Item, null))))));
 }
 function Padding(props = {}) {
   const { title: title2 = "Padding", attributeName = "padding", name } = props;
@@ -40383,14 +40391,14 @@ const CollapseWrapper = (props) => {
   }, props.children, enabledLogic && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(Iteration, null), /* @__PURE__ */ React__default.createElement(Condition, null))), /* @__PURE__ */ React__default.createElement("div", null), /* @__PURE__ */ React__default.createElement("div", null), /* @__PURE__ */ React__default.createElement("div", null));
 };
 function Section() {
-  const { focusIdx: focusIdx2 } = useFocusIdx();
   const { focusBlock: focusBlock2, setFocusBlock } = useBlock();
   const noWrap = focusBlock2 == null ? void 0 : focusBlock2.data.value.noWrap;
-  const changeNoWrap = useCallback((noWrap2) => {
+  const onChange = useCallback((checked) => {
     var _a;
     if (!focusBlock2)
       return;
-    if (noWrap2) {
+    focusBlock2.data.value.noWrap = checked;
+    if (checked) {
       const children = [...focusBlock2.children];
       for (let i2 = 0; i2 < children.length; i2++) {
         const child = children[i2];
@@ -40412,9 +40420,6 @@ function Section() {
     }
     setFocusBlock(__spreadValues({}, focusBlock2));
   }, [focusBlock2, setFocusBlock]);
-  useEffect(() => {
-    changeNoWrap(noWrap);
-  }, [noWrap]);
   return /* @__PURE__ */ React__default.createElement(AttributesPanelWrapper, {
     style: { padding: 0 }
   }, /* @__PURE__ */ React__default.createElement(CollapseWrapper, {
@@ -40426,13 +40431,15 @@ function Section() {
     direction: "vertical"
   }, /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
     span: 12
-  }, /* @__PURE__ */ React__default.createElement(SwitchField, {
-    label: "Group",
-    name: `${focusIdx2}.data.value.noWrap`,
-    helpText: "Prevent columns from stacking on mobile.",
+  }, /* @__PURE__ */ React__default.createElement("label", {
+    style: { width: "100%", display: "flex" }
+  }, /* @__PURE__ */ React__default.createElement("div", {
+    style: { flex: 1 }
+  }, "Group")), /* @__PURE__ */ React__default.createElement(Switch$1, {
+    checked: noWrap,
     checkedText: "True",
     uncheckedText: "False",
-    inline: true
+    onChange
   })), /* @__PURE__ */ React__default.createElement(Grid.Col, {
     span: 12
   })), /* @__PURE__ */ React__default.createElement(Padding, null))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
@@ -42099,6 +42106,12 @@ const options = [
 ];
 function Social() {
   const { focusIdx: focusIdx2 } = useFocusIdx();
+  const { focusBlock: focusBlock2 } = useBlock();
+  const addItem = useMemo(() => {
+    const blockData = focusBlock2;
+    const added = blockData.data.value.elements[blockData.data.value.elements.length - 1];
+    return added;
+  }, [focusBlock2]);
   return /* @__PURE__ */ React__default.createElement(AttributesPanelWrapper, {
     style: { padding: 0 }
   }, /* @__PURE__ */ React__default.createElement(CollapseWrapper, {
@@ -42154,29 +42167,22 @@ function Social() {
       item: item2,
       index: index2
     }),
-    additionItem: {
-      href: "",
-      "icon-size": "20px",
-      target: "_blank",
-      src: getImg$1("AttributePanel_01"),
-      content: "Google"
-    }
+    additionItem: addItem
   })), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
     name: "0",
     header: "Dimension"
   }, /* @__PURE__ */ React__default.createElement(Stack$6, {
     vertical: true,
     spacing: "tight"
-  }, /* @__PURE__ */ React__default.createElement(Align, null), /* @__PURE__ */ React__default.createElement(TextField, {
-    label: "Border radius",
-    name: `${focusIdx2}.attributes.border-radius`,
-    inline: true
-  }), /* @__PURE__ */ React__default.createElement(Padding, null), /* @__PURE__ */ React__default.createElement(Padding, {
+  }, /* @__PURE__ */ React__default.createElement(Padding, null), /* @__PURE__ */ React__default.createElement(Padding, {
     attributeName: "inner-padding",
     title: "Inner padding"
   }), /* @__PURE__ */ React__default.createElement(Padding, {
     attributeName: "text-padding",
     title: "Text padding"
+  }), /* @__PURE__ */ React__default.createElement(Align, null), /* @__PURE__ */ React__default.createElement(TextField, {
+    label: "Border radius",
+    name: `${focusIdx2}.attributes.border-radius`
   }))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
     name: "4",
     header: "Extra"
@@ -42235,7 +42241,7 @@ function SocialElement({
         label: "_self"
       }
     ]
-  }))));
+  }))), /* @__PURE__ */ React__default.createElement("div", null));
 }
 function Table() {
   const [visible, setVisible] = useState(false);
@@ -45850,6 +45856,7 @@ function ShortcutToolbar() {
     type: AdvancedType.TEXT,
     color: "rgb(110, 215, 135)"
   }), /* @__PURE__ */ React__default.createElement(DragIcon, {
+    payload: { attributes: { padding: "0px 0px 0px 0px" } },
     type: AdvancedType.IMAGE,
     color: "rgb(250, 208, 97)"
   }), /* @__PURE__ */ React__default.createElement(DragIcon, {
@@ -45864,6 +45871,9 @@ function ShortcutToolbar() {
   }), /* @__PURE__ */ React__default.createElement(DragIcon, {
     type: AdvancedType.DIVIDER,
     color: "rgb(71,67,239)"
+  }), /* @__PURE__ */ React__default.createElement(DragIcon, {
+    type: AdvancedType.SPACER,
+    color: "#ccc"
   }), /* @__PURE__ */ React__default.createElement(DragIcon, {
     color: "rgb(24,201,137)",
     payload: {
@@ -46425,13 +46435,11 @@ function InteractivePrompt() {
     return null;
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(HoverTooltip, null), /* @__PURE__ */ React__default.createElement(FocusTooltip, null));
 }
-const SimpleLayout$1 = "_SimpleLayout_10q4j_1";
-const layoutTabs = "_layoutTabs_10q4j_1";
-const customScrollBar = "_customScrollBar_10q4j_8";
-const customScrollBarV2 = "_customScrollBarV2_10q4j_24";
+const SimpleLayout$1 = "_SimpleLayout_njli7_1";
+const customScrollBar = "_customScrollBar_njli7_17";
+const customScrollBarV2 = "_customScrollBarV2_njli7_33";
 var styles = {
   SimpleLayout: SimpleLayout$1,
-  layoutTabs,
   customScrollBar,
   customScrollBarV2
 };
@@ -46762,7 +46770,8 @@ const SimpleLayout = (props) => {
     }
   }, /* @__PURE__ */ React__default.createElement(Card$1, {
     title: "Layout",
-    style: { border: "none" }
+    style: { border: "none" },
+    headerStyle: { height: 50 }
   }, !collapsed && /* @__PURE__ */ React__default.createElement(BlockLayer, {
     renderTitle: props.renderTitle
   }))))), /* @__PURE__ */ React__default.createElement(Layout$1, {