@elementor/editor-controls 4.1.0-745 → 4.1.0-747

package/dist/index.mjs

@@ -107,11 +107,20 @@ var ArrayPropKeyProvider = ({ children, bind }) => {
     return context?.setValue(newValue, options, { bind });
   };
   const value = context.value?.[Number(bind)];
+  const placeholder = context.placeholder?.[Number(bind)];
   const propType = context.propType.item_prop_type;
   return /* @__PURE__ */ React2.createElement(
     PropKeyContext.Provider,
     {
-      value: { ...context, value, setValue, bind, propType, path: [...path ?? [], bind] }
+      value: {
+        ...context,
+        value,
+        setValue,
+        bind,
+        propType,
+        path: [...path ?? [], bind],
+        placeholder: placeholder ?? void 0
+      }
     },
     children
   );
@@ -152,7 +161,9 @@ function useBoundProp(propTypeUtil) {
     return propKeyContext?.setValue(propTypeUtil?.create(value2, options), {}, meta);
   }
   const propType = resolveUnionPropType(propKeyContext.propType, propTypeUtil.key);
-  const value = propTypeUtil.extract(propKeyContext.value ?? propType.default ?? null);
+  const hasPlaceholder = propKeyContext.placeholder !== void 0 && propKeyContext.placeholder !== null;
+  const fallbackValue = hasPlaceholder ? null : propType.default;
+  const value = propTypeUtil.extract(propKeyContext.value ?? fallbackValue ?? null);
   const placeholder = propTypeUtil.extract(propKeyContext.placeholder ?? null);
   return {
     ...propKeyContext,
@@ -360,10 +371,11 @@ function ControlActions({ children }) {
 
 // src/controls/image-media-control.tsx
 var ImageMediaControl = createControl(({ mediaTypes = ["image"] }) => {
-  const { value, setValue, propType } = useBoundProp(imageSrcPropTypeUtil);
+  const { value, setValue, propType, placeholder } = useBoundProp(imageSrcPropTypeUtil);
   const { id, url } = value ?? {};
   const { data: attachment, isFetching } = useWpMediaAttachment(id?.value || null);
-  const src = attachment?.url ?? url?.value ?? null;
+  const { data: placeholderAttachment } = useWpMediaAttachment(placeholder?.id?.value || null);
+  const src = attachment?.url ?? url?.value ?? placeholderAttachment?.url ?? null;
   const { open } = useWpMediaFrame({
     mediaTypes,
     multiple: false,
@@ -472,7 +484,7 @@ import { stringPropTypeUtil as stringPropTypeUtil2 } from "@elementor/editor-pro
 import { TextField } from "@elementor/ui";
 var TextControl = createControl(
   ({
-    placeholder,
+    placeholder: propPlaceholder,
     error,
     inputValue,
     inputDisabled,
@@ -480,8 +492,9 @@ var TextControl = createControl(
     sx,
     ariaLabel
   }) => {
-    const { value, setValue, disabled } = useBoundProp(stringPropTypeUtil2);
+    const { value, setValue, disabled, placeholder: boundPlaceholder } = useBoundProp(stringPropTypeUtil2);
     const handleChange = (event) => setValue(event.target.value);
+    const placeholder = propPlaceholder ?? boundPlaceholder ?? void 0;
     return /* @__PURE__ */ React14.createElement(ControlActions, null, /* @__PURE__ */ React14.createElement(
       TextField,
       {
@@ -506,11 +519,12 @@ var TextControl = createControl(
 import * as React15 from "react";
 import { stringPropTypeUtil as stringPropTypeUtil3 } from "@elementor/editor-props";
 import { TextField as TextField2 } from "@elementor/ui";
-var TextAreaControl = createControl(({ placeholder, ariaLabel }) => {
-  const { value, setValue, disabled } = useBoundProp(stringPropTypeUtil3);
+var TextAreaControl = createControl(({ placeholder: propPlaceholder, ariaLabel }) => {
+  const { value, setValue, disabled, placeholder: boundPlaceholder } = useBoundProp(stringPropTypeUtil3);
   const handleChange = (event) => {
     setValue(event.target.value);
   };
+  const placeholder = propPlaceholder ?? boundPlaceholder ?? void 0;
   return /* @__PURE__ */ React15.createElement(ControlActions, null, /* @__PURE__ */ React15.createElement(
     TextField2,
     {
@@ -3210,9 +3224,10 @@ import * as React60 from "react";
 import { urlPropTypeUtil } from "@elementor/editor-props";
 import { TextField as TextField6 } from "@elementor/ui";
 var UrlControl = createControl(
-  ({ placeholder, ariaLabel }) => {
-    const { value, setValue, disabled } = useBoundProp(urlPropTypeUtil);
+  ({ placeholder: propPlaceholder, ariaLabel }) => {
+    const { value, setValue, disabled, placeholder: boundPlaceholder } = useBoundProp(urlPropTypeUtil);
     const handleChange = (event) => setValue(event.target.value);
+    const placeholder = propPlaceholder ?? boundPlaceholder ?? void 0;
     return /* @__PURE__ */ React60.createElement(ControlActions, null, /* @__PURE__ */ React60.createElement(
       TextField6,
       {
@@ -3306,7 +3321,12 @@ var RestrictedLinkInfotip = ({
 // src/controls/query-control.tsx
 import * as React63 from "react";
 import { useMemo as useMemo7, useState as useState9 } from "react";
-import { numberPropTypeUtil as numberPropTypeUtil2, stringPropTypeUtil as stringPropTypeUtil7, urlPropTypeUtil as urlPropTypeUtil2 } from "@elementor/editor-props";
+import {
+  numberPropTypeUtil as numberPropTypeUtil2,
+  queryPropTypeUtil,
+  stringPropTypeUtil as stringPropTypeUtil7,
+  urlPropTypeUtil as urlPropTypeUtil2
+} from "@elementor/editor-props";
 import { httpService as httpService2 } from "@elementor/http-client";
 import { SearchIcon } from "@elementor/icons";
 import { debounce as debounce2 } from "@elementor/utils";
@@ -3445,45 +3465,41 @@ function factoryFilter(newValue, options, minInputLength) {
 
 // src/controls/query-control.tsx
 var QueryControl = createControl((props) => {
-  const { value, setValue } = useBoundProp();
+  const { value: queryValue, setValue: setQueryValue } = useBoundProp(queryPropTypeUtil);
+  const { value: urlValue, setValue: setUrlValue, placeholder: urlPlaceholder } = useBoundProp(urlPropTypeUtil2);
   const {
     allowCustomValues = true,
     queryOptions: { url, params = {} },
-    placeholder,
+    placeholder = __22("Search", "elementor"),
     minInputLength = 2,
     onSetValue,
     ariaLabel
   } = props || {};
-  const normalizedPlaceholder = placeholder || __22("Search", "elementor");
   const [options, setOptions] = useState9(
-    generateFirstLoadedOption(value?.value)
+    generateFirstLoadedOption(queryValue)
   );
   const onOptionChange = (newValue) => {
     if (newValue === null) {
-      setValue(null);
+      setQueryValue(null);
       onSetValue?.(null);
       return;
     }
-    const valueToSave = {
-      $$type: "query",
-      value: {
-        id: numberPropTypeUtil2.create(newValue),
-        label: stringPropTypeUtil7.create(findMatchingOption(options, newValue)?.label || null)
-      }
+    const newQueryValue = {
+      id: numberPropTypeUtil2.create(newValue),
+      label: stringPropTypeUtil7.create(findMatchingOption(options, newValue)?.label || null)
     };
-    setValue(valueToSave);
-    onSetValue?.(valueToSave);
+    setQueryValue(newQueryValue);
+    onSetValue?.(queryPropTypeUtil.create(newQueryValue));
   };
   const onTextChange = (newValue) => {
-    if (!newValue) {
-      setValue(null);
+    const trimmedValue = newValue?.trim() || "";
+    if (!trimmedValue) {
+      setUrlValue(null);
       onSetValue?.(null);
       return;
     }
-    const newLinkValue = newValue?.trim() || "";
-    const valueToSave = newLinkValue ? urlPropTypeUtil2.create(newLinkValue) : null;
-    setValue(valueToSave);
-    onSetValue?.(valueToSave);
+    setUrlValue(trimmedValue);
+    onSetValue?.(urlPropTypeUtil2.create(trimmedValue));
     updateOptions(newValue);
   };
   const updateOptions = (newValue) => {
@@ -3502,14 +3518,15 @@ var QueryControl = createControl((props) => {
     ),
     [url]
   );
+  const displayValue = queryValue?.id?.value ?? urlValue;
   return /* @__PURE__ */ React63.createElement(ControlActions, null, /* @__PURE__ */ React63.createElement(
     Autocomplete2,
     {
       options,
       allowCustomValues,
-      placeholder: normalizedPlaceholder,
+      placeholder: urlPlaceholder ?? placeholder,
       startAdornment: /* @__PURE__ */ React63.createElement(SearchIcon, { fontSize: "tiny" }),
-      value: value?.value?.id?.value || value?.value,
+      value: displayValue,
       onOptionChange,
       onTextChange,
       minInputLength,
@@ -3537,16 +3554,14 @@ function formatOptions(options) {
     (a, b) => a[compareKey] && b[compareKey] ? a[compareKey].localeCompare(b[compareKey]) : 0
   );
 }
-function generateFirstLoadedOption(unionValue) {
-  const value = unionValue?.id?.value;
-  const label = unionValue?.label?.value;
-  const type = unionValue?.id?.$$type || "url";
-  return value && label && type === "number" ? [
-    {
-      id: value.toString(),
-      label
-    }
-  ] : [];
+function generateFirstLoadedOption(queryValue) {
+  const id = queryValue?.id?.value;
+  const label = queryValue?.label?.value;
+  const option = [];
+  if (id && label) {
+    option.push({ id: id.toString(), label });
+  }
+  return option;
 }
 
 // src/controls/switch-control.tsx
@@ -3554,14 +3569,14 @@ import * as React64 from "react";
 import { booleanPropTypeUtil } from "@elementor/editor-props";
 import { Box as Box11, Switch } from "@elementor/ui";
 var SwitchControl = createControl(() => {
-  const { value, setValue, disabled } = useBoundProp(booleanPropTypeUtil);
+  const { value, setValue, disabled, placeholder } = useBoundProp(booleanPropTypeUtil);
   const handleChange = (event) => {
     setValue(event.target.checked);
   };
   return /* @__PURE__ */ React64.createElement(Box11, { sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React64.createElement(
     Switch,
     {
-      checked: !!value,
+      checked: !!(value || placeholder),
       onChange: handleChange,
       size: "small",
       disabled,
@@ -3576,8 +3591,9 @@ var SwitchControl = createControl(() => {
 var SIZE7 = "tiny";
 var LinkControl = createControl((props) => {
   const { value, path, setValue, ...propContext } = useBoundProp(linkPropTypeUtil);
+  const linkPlaceholder = propContext.placeholder;
   const [linkSessionValue, setLinkSessionValue] = useSessionStorage(path.join("/"));
-  const [isActive, setIsActive] = useState10(!!value);
+  const [isActive, setIsActive] = useState10(!!value || !!linkPlaceholder);
   const {
     allowCustomValues = true,
     queryOptions,
@@ -3588,18 +3604,18 @@ var LinkControl = createControl((props) => {
     ariaLabel
   } = props || {};
   const [linkInLinkRestriction, setLinkInLinkRestriction] = useState10(
-    getLinkInLinkRestriction(elementId, value)
+    getLinkInLinkRestriction(elementId, value ?? linkPlaceholder)
   );
   const shouldDisableAddingLink = !isActive && linkInLinkRestriction.shouldRestrict;
   const debouncedCheckRestriction = useMemo8(
     () => debounce3(() => {
-      const newRestriction = getLinkInLinkRestriction(elementId, value);
-      if (newRestriction.shouldRestrict && isActive) {
+      const newRestriction = getLinkInLinkRestriction(elementId, value ?? linkPlaceholder);
+      if (newRestriction.shouldRestrict && isActive && !linkPlaceholder) {
         setIsActive(false);
       }
       setLinkInLinkRestriction(newRestriction);
     }, 300),
-    [elementId, isActive, value]
+    [elementId, isActive, value, linkPlaceholder]
   );
   useEffect9(() => {
     debouncedCheckRestriction();
@@ -3616,7 +3632,7 @@ var LinkControl = createControl((props) => {
     };
   }, [elementId, debouncedCheckRestriction]);
   const onEnabledChange = () => {
-    setLinkInLinkRestriction(getLinkInLinkRestriction(elementId, value));
+    setLinkInLinkRestriction(getLinkInLinkRestriction(elementId, value ?? linkPlaceholder));
     if (linkInLinkRestriction.shouldRestrict && !isActive) {
       return;
     }
@@ -3652,13 +3668,14 @@ var LinkControl = createControl((props) => {
     },
     /* @__PURE__ */ React65.createElement(ControlLabel, null, label),
     /* @__PURE__ */ React65.createElement(RestrictedLinkInfotip, { isVisible: !isActive, linkInLinkRestriction }, /* @__PURE__ */ React65.createElement(
-      ToggleIconControl,
+      IconButton6,
       {
-        disabled: shouldDisableAddingLink,
-        active: isActive,
-        onIconClick: onEnabledChange,
-        label: __23("Toggle link", "elementor")
-      }
+        size: SIZE7,
+        onClick: onEnabledChange,
+        "aria-label": __23("Toggle link", "elementor"),
+        disabled: shouldDisableAddingLink
+      },
+      isActive ? /* @__PURE__ */ React65.createElement(MinusIcon, { fontSize: SIZE7 }) : /* @__PURE__ */ React65.createElement(PlusIcon2, { fontSize: SIZE7 })
     ))
   ), /* @__PURE__ */ React65.createElement(Collapse, { in: isActive, timeout: "auto", unmountOnExit: true }, /* @__PURE__ */ React65.createElement(Stack10, { gap: 1.5 }, /* @__PURE__ */ React65.createElement(PropKeyProvider, { bind: "destination" }, /* @__PURE__ */ React65.createElement(
     QueryControl,
@@ -3672,9 +3689,6 @@ var LinkControl = createControl((props) => {
     }
   )), /* @__PURE__ */ React65.createElement(PropKeyProvider, { bind: "isTargetBlank" }, /* @__PURE__ */ React65.createElement(Grid10, { container: true, alignItems: "center", flexWrap: "nowrap", justifyContent: "space-between" }, /* @__PURE__ */ React65.createElement(Grid10, { item: true }, /* @__PURE__ */ React65.createElement(ControlFormLabel, null, __23("Open in a new tab", "elementor"))), /* @__PURE__ */ React65.createElement(Grid10, { item: true, sx: { marginInlineEnd: -1 } }, /* @__PURE__ */ React65.createElement(SwitchControl, null))))))));
 });
-var ToggleIconControl = ({ disabled, active, onIconClick, label }) => {
-  return /* @__PURE__ */ React65.createElement(IconButton6, { size: SIZE7, onClick: onIconClick, "aria-label": label, disabled }, active ? /* @__PURE__ */ React65.createElement(MinusIcon, { fontSize: SIZE7 }) : /* @__PURE__ */ React65.createElement(PlusIcon2, { fontSize: SIZE7 }));
-};
 
 // src/controls/html-tag-control.tsx
 import * as React67 from "react";
@@ -6491,6 +6505,7 @@ var InlineEditor = React100.forwardRef((props, ref) => {
   const {
     value,
     setValue,
+    placeholder = null,
     editorProps = {},
     elementClasses = "",
     autofocus = false,
@@ -6576,7 +6591,9 @@ var InlineEditor = React100.forwardRef((props, ref) => {
       },
       attributes: {
         ...editorProps.attributes ?? {},
-        role: "textbox"
+        role: "textbox",
+        ...placeholder ? { "data-placeholder": placeholder } : {},
+        ...value === null || value === "" ? { class: "is-empty" } : {}
       }
     },
     onCreate: onEditorCreate ? ({ editor: mountedEditor }) => onEditorCreate(mountedEditor) : void 0,
@@ -6616,7 +6633,7 @@ var InlineEditingControl = createControl(
     attributes,
     props
   }) => {
-    const { value, setValue } = useBoundProp(htmlV3PropTypeUtil);
+    const { value, setValue, placeholder } = useBoundProp(htmlV3PropTypeUtil);
     const content = stringPropTypeUtil16.extract(value?.content ?? null) ?? "";
     const debouncedParse = useMemo14(
       () => debounce4((html) => {
@@ -6668,6 +6685,13 @@ var InlineEditingControl = createControl(
             "& .elementor-inline-editor-reset": {
               margin: 0,
               padding: 0
+            },
+            "&.is-empty::before": {
+              content: "attr(data-placeholder)",
+              color: "text.tertiary",
+              pointerEvents: "none",
+              position: "absolute",
+              opacity: 0.6
             }
           },
           ".strip-styles *": {
@@ -6678,7 +6702,14 @@ var InlineEditingControl = createControl(
         ...attributes,
         ...props
       },
-      /* @__PURE__ */ React101.createElement(InlineEditor, { value: content, setValue: handleChange })
+      /* @__PURE__ */ React101.createElement(
+        InlineEditor,
+        {
+          value: content,
+          setValue: handleChange,
+          placeholder: placeholder?.content?.value ?? null
+        }
+      )
     ));
   }
 );