@elementor/editor-controls 0.9.0 → 0.10.0

package/dist/index.mjs

@@ -1594,11 +1594,11 @@ import { __ as __18 } from "@wordpress/i18n";
 // src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
 import * as React34 from "react";
 import {
-  backgroundColorOverlayPropTypeUtil,
-  backgroundImageOverlayPropTypeUtil,
+  backgroundColorOverlayPropTypeUtil as backgroundColorOverlayPropTypeUtil2,
+  backgroundImageOverlayPropTypeUtil as backgroundImageOverlayPropTypeUtil2,
   backgroundOverlayPropTypeUtil
 } from "@elementor/editor-props";
-import { Box as Box4, CardMedia as CardMedia3, Grid as Grid12, Stack as Stack12, Tab, TabPanel, Tabs, UnstableColorIndicator as UnstableColorIndicator2, useTabs } from "@elementor/ui";
+import { Box as Box4, CardMedia as CardMedia3, Grid as Grid12, Stack as Stack12, Tab, TabPanel, Tabs, UnstableColorIndicator as UnstableColorIndicator2 } from "@elementor/ui";
 import { useWpMediaAttachment as useWpMediaAttachment3 } from "@elementor/wp-media";
 import { __ as __17 } from "@wordpress/i18n";
 
@@ -1767,8 +1767,54 @@ var BackgroundImageOverlaySize = () => {
   )))), isCustom ? /* @__PURE__ */ React33.createElement(PropProvider, { ...backgroundImageScaleContext }, /* @__PURE__ */ React33.createElement(Grid11, { item: true, xs: 12 }, /* @__PURE__ */ React33.createElement(Grid11, { container: true, spacing: 2 }, /* @__PURE__ */ React33.createElement(Grid11, { item: true, xs: 6 }, /* @__PURE__ */ React33.createElement(PropKeyProvider, { bind: "width" }, /* @__PURE__ */ React33.createElement(SizeControl, { startIcon: /* @__PURE__ */ React33.createElement(ArrowsMoveHorizontalIcon, { fontSize: "tiny" }) }))), /* @__PURE__ */ React33.createElement(Grid11, { item: true, xs: 6 }, /* @__PURE__ */ React33.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React33.createElement(SizeControl, { startIcon: /* @__PURE__ */ React33.createElement(ArrowsMoveVerticalIcon, { fontSize: "tiny" }) })))))) : null);
 };
 
+// src/controls/background-control/background-overlay/use-background-tabs-history.ts
+import { useRef as useRef3 } from "react";
+import {
+  backgroundColorOverlayPropTypeUtil,
+  backgroundImageOverlayPropTypeUtil
+} from "@elementor/editor-props";
+import { useTabs } from "@elementor/ui";
+var useBackgroundTabsHistory = ({
+  color: initialBackgroundColorOverlay2,
+  image: initialBackgroundImageOverlay
+}) => {
+  const { value: imageValue, setValue: setImageValue } = useBoundProp(backgroundImageOverlayPropTypeUtil);
+  const { value: colorValue, setValue: setColorValue } = useBoundProp(backgroundColorOverlayPropTypeUtil);
+  const { getTabsProps, getTabProps, getTabPanelProps } = useTabs(colorValue ? "color" : "image");
+  const valuesHistory = useRef3({
+    image: initialBackgroundImageOverlay,
+    color: initialBackgroundColorOverlay2
+  });
+  const saveToHistory = (key, value) => {
+    if (value) {
+      valuesHistory.current[key] = value;
+    }
+  };
+  const onTabChange = (e, tabName) => {
+    switch (tabName) {
+      case "image":
+        setImageValue(valuesHistory.current.image);
+        saveToHistory("color", colorValue);
+        break;
+      case "color":
+        setColorValue(valuesHistory.current.color);
+        saveToHistory("image", imageValue);
+    }
+    return getTabsProps().onChange(e, tabName);
+  };
+  return {
+    getTabProps,
+    getTabPanelProps,
+    getTabsProps: () => ({ ...getTabsProps(), onChange: onTabChange })
+  };
+};
+
 // src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
-var initialBackgroundOverlay = (backgroundPlaceholderImage) => ({
+var initialBackgroundColorOverlay = {
+  $$type: "background-color-overlay",
+  value: "#00000033"
+};
+var getInitialBackgroundOverlay = () => ({
   $$type: "background-image-overlay",
   value: {
     image: {
@@ -1779,7 +1825,7 @@ var initialBackgroundOverlay = (backgroundPlaceholderImage) => ({
           value: {
             url: {
               $$type: "url",
-              value: backgroundPlaceholderImage
+              value: env.background_placeholder_image
             },
             id: null
           }
@@ -1810,18 +1856,20 @@ var BackgroundOverlayRepeaterControl = createControl(() => {
         Icon: ItemIcon2,
         Label: ItemLabel2,
         Content: ItemContent2,
-        initialValues: initialBackgroundOverlay(env.background_placeholder_image)
+        initialValues: getInitialBackgroundOverlay()
       }
     }
   ));
 });
-var ItemContent2 = ({ bind, value }) => {
-  return /* @__PURE__ */ React34.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React34.createElement(Content2, { value }));
+var ItemContent2 = ({ bind }) => {
+  return /* @__PURE__ */ React34.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React34.createElement(Content2, null));
 };
-var Content2 = ({ value }) => {
-  const activeTab = deriveOverlayType(value.$$type);
-  const { getTabsProps, getTabProps, getTabPanelProps } = useTabs(activeTab);
-  return /* @__PURE__ */ React34.createElement(Box4, { sx: { width: "100%" } }, /* @__PURE__ */ React34.createElement(Box4, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React34.createElement(Tabs, { ...getTabsProps(), "aria-label": __17("Background Overlay", "elementor") }, /* @__PURE__ */ React34.createElement(Tab, { label: __17("Image", "elementor"), ...getTabProps("image") }), /* @__PURE__ */ React34.createElement(Tab, { label: __17("Color", "elementor"), ...getTabProps("color") }))), /* @__PURE__ */ React34.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React34.createElement(Stack12, { gap: 1.5 }, /* @__PURE__ */ React34.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React34.createElement(TabPanel, { ...getTabPanelProps("color"), sx: { p: 1.5 } }, /* @__PURE__ */ React34.createElement(Grid12, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React34.createElement(Grid12, { item: true, xs: 12 }, /* @__PURE__ */ React34.createElement(ColorControl, { propTypeUtil: backgroundColorOverlayPropTypeUtil })))));
+var Content2 = () => {
+  const { getTabsProps, getTabProps, getTabPanelProps } = useBackgroundTabsHistory({
+    image: getInitialBackgroundOverlay().value,
+    color: initialBackgroundColorOverlay.value
+  });
+  return /* @__PURE__ */ React34.createElement(Box4, { sx: { width: "100%" } }, /* @__PURE__ */ React34.createElement(Box4, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React34.createElement(Tabs, { ...getTabsProps(), "aria-label": __17("Background Overlay", "elementor") }, /* @__PURE__ */ React34.createElement(Tab, { label: __17("Image", "elementor"), ...getTabProps("image") }), /* @__PURE__ */ React34.createElement(Tab, { label: __17("Color", "elementor"), ...getTabProps("color") }))), /* @__PURE__ */ React34.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React34.createElement(Stack12, { gap: 1.5 }, /* @__PURE__ */ React34.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React34.createElement(TabPanel, { ...getTabPanelProps("color"), sx: { p: 1.5 } }, /* @__PURE__ */ React34.createElement(Grid12, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React34.createElement(Grid12, { item: true, xs: 12 }, /* @__PURE__ */ React34.createElement(ColorControl, { propTypeUtil: backgroundColorOverlayPropTypeUtil2 })))));
 };
 var ItemIcon2 = ({ value }) => {
   switch (value.$$type) {
@@ -1858,7 +1906,7 @@ var ItemLabelImage = ({ value }) => {
   return /* @__PURE__ */ React34.createElement("span", null, imageTitle);
 };
 var ImageOverlayContent = () => {
-  const propContext = useBoundProp(backgroundImageOverlayPropTypeUtil);
+  const propContext = useBoundProp(backgroundImageOverlayPropTypeUtil2);
   return /* @__PURE__ */ React34.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React34.createElement(PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React34.createElement(Grid12, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React34.createElement(Grid12, { item: true, xs: 12 }, /* @__PURE__ */ React34.createElement(
     ImageControl,
     {
@@ -1867,15 +1915,6 @@ var ImageOverlayContent = () => {
     }
   )))), /* @__PURE__ */ React34.createElement(PropKeyProvider, { bind: "position" }, /* @__PURE__ */ React34.createElement(BackgroundImageOverlayPosition, null)), /* @__PURE__ */ React34.createElement(PropKeyProvider, { bind: "repeat" }, /* @__PURE__ */ React34.createElement(BackgroundImageOverlayRepeat, null)), /* @__PURE__ */ React34.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React34.createElement(BackgroundImageOverlaySize, null)), /* @__PURE__ */ React34.createElement(PropKeyProvider, { bind: "attachment" }, /* @__PURE__ */ React34.createElement(BackgroundImageOverlayAttachment, null)));
 };
-var deriveOverlayType = (type) => {
-  if (type === "background-color-overlay") {
-    return "color";
-  }
-  if (type === "background-image-overlay") {
-    return "image";
-  }
-  throw new Error(`Invalid overlay type: ${type}`);
-};
 var useImage = (image) => {
   let imageTitle, imageUrl = null;
   const imageSrc = image?.value.image.value?.src.value;