@ivanholiak/easy-email-extensions 4.16.6 → 4.16.7

package/lib/components/Form/RichTextToolBar/components/ToolItem/index.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
-export declare const ToolItem: React.FC<{
+export interface ToolItemProps {
     title?: string;
     icon: React.ReactNode;
     onClick?: React.MouseEventHandler<any>;
     trigger?: string;
     style?: React.CSSProperties;
     isActive?: boolean;
-}>;
+}
+export declare const ToolItem: React.ForwardRefExoticComponent<ToolItemProps & React.RefAttributes<HTMLButtonElement>>;

package/lib/index2.js

@@ -37838,8 +37838,14 @@ function ColorPicker(props) {
     },
     [addCurrentColor, onChange]
   );
-  const getPopupContainer = useCallback(() => {
-    return getCollapseItemEle(refEle);
+  const getPopupContainerInternal = useCallback(() => {
+    if (!refEle)
+      return document.body;
+    const container2 = getCollapseItemEle(refEle);
+    if (!container2 || !container2.offsetParent) {
+      return document.body;
+    }
+    return container2;
   }, [refEle]);
   const inputColor = useMemo(() => {
     var _a2, _b2, _c;
@@ -37866,8 +37872,11 @@ function ColorPicker(props) {
       value: adapterColor,
       onChange: onInputChange
     }),
-    getPopupContainer
-  }, props), children || /* @__PURE__ */ React__default.createElement("div", {
+    getPopupContainer: props.getPopupContainer || getPopupContainerInternal
+  }, props), children ? /* @__PURE__ */ React__default.createElement("div", {
+    ref: setRefEle,
+    style: { display: "inline-block" }
+  }, children) : /* @__PURE__ */ React__default.createElement("div", {
     ref: setRefEle,
     style: {
       display: "inline-block",
@@ -37919,9 +37928,10 @@ const ColorPickerField = (props) => {
     config: colorAdapter
   }, props));
 };
-const ToolItem$1 = (props) => {
+const ToolItem$1 = React__default.forwardRef((props, ref) => {
   if (!props.title) {
     return /* @__PURE__ */ React__default.createElement("button", {
+      ref,
       tabIndex: -1,
       className: "easy-email-extensions-emailToolItem",
       title: props.title,
@@ -37934,12 +37944,14 @@ const ToolItem$1 = (props) => {
     position: "bottom",
     content: props.title
   }, /* @__PURE__ */ React__default.createElement("button", {
+    ref,
     tabIndex: -1,
     className: classnames("easy-email-extensions-emailToolItem", props.isActive && "easy-email-extensions-emailToolItem-active"),
     onClick: props.onClick,
     style: props.style
   }, props.icon));
-};
+});
+ToolItem$1.displayName = "ToolItem";
 function getAnchorElement$1(node) {
   if (!node)
     return null;
@@ -54699,6 +54711,7 @@ function Tools(props) {
       case AvailableTools.IconFontColor:
         return [
           /* @__PURE__ */ React__default.createElement(IconFontColor, {
+            key: tool,
             selectionRange,
             execCommand,
             getPopoverMountNode
@@ -54707,6 +54720,7 @@ function Tools(props) {
       case AvailableTools.IconBgColor:
         return [
           /* @__PURE__ */ React__default.createElement(IconBgColor, {
+            key: tool,
             selectionRange,
             execCommand,
             getPopoverMountNode
@@ -54807,13 +54821,12 @@ function Tools(props) {
       display: "flex",
       alignItems: "center"
     }
-  }, /* @__PURE__ */ React__default.createElement(BasicTools, null), tools.flatMap((tool, index2) => [
-    tool,
-    /* @__PURE__ */ React__default.createElement("div", {
-      className: "easy-email-extensions-divider",
-      key: `divider-${index2}`
-    })
-  ])), (_b2 = toolbar == null ? void 0 : toolbar.suffix) == null ? void 0 : _b2.call(toolbar, execCommand));
+  }, /* @__PURE__ */ React__default.createElement(BasicTools, null), tools.map((tool, index2) => /* @__PURE__ */ React__default.createElement(React__default.Fragment, {
+    key: `tool-${index2}`
+  }, tool, index2 < tools.length - 1 && /* @__PURE__ */ React__default.createElement("div", {
+    className: "easy-email-extensions-divider",
+    key: `divider-${index2}`
+  })))), (_b2 = toolbar == null ? void 0 : toolbar.suffix) == null ? void 0 : _b2.call(toolbar, execCommand));
 }
 var styleText = ".easy-email-extensions-emailToolItem{display:inline-flex;align-items:center;justify-content:center;position:relative;outline:none;font-weight:400;appearance:none;cursor:pointer!important;white-space:nowrap;transition:all .1s linear;box-sizing:border-box;border-radius:2px;border:none;background-color:transparent;color:#fff;width:28px;height:27px}.easy-email-extensions-emailToolItem:hover,.easy-email-extensions-emailToolItem-active{background-color:#f2f3f5;color:#4e5969}.easy-email-extensions-divider{position:relative;display:inline-flex;width:1px;height:16px;background-color:#808080e6}\n";
 function RichTextToolBar(props) {