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

package/dist/index.d.mts

@@ -19,7 +19,7 @@ type ImageControlProps = {
 };
 declare const ImageControl: ControlComponent$1<({ sizes, label }: ImageControlProps) => React$1.JSX.Element>;
 
-declare const TextControl: ControlComponent$1<({ placeholder, error, inputValue, inputDisabled, helperText, sx, ariaLabel, }: {
+declare const TextControl: ControlComponent$1<({ placeholder: propPlaceholder, error, inputValue, inputDisabled, helperText, sx, ariaLabel, }: {
     placeholder?: string;
     error?: boolean;
     inputValue?: string;
@@ -33,7 +33,7 @@ type Props$b = {
     placeholder?: string;
     ariaLabel?: string;
 };
-declare const TextAreaControl: ControlComponent$1<({ placeholder, ariaLabel }: Props$b) => React$1.JSX.Element>;
+declare const TextAreaControl: ControlComponent$1<({ placeholder: propPlaceholder, ariaLabel }: Props$b) => React$1.JSX.Element>;
 
 declare const lengthUnits: readonly ["px", "%", "em", "rem", "vw", "vh", "ch"];
 declare const angleUnits: readonly ["deg", "rad", "grad", "turn"];
@@ -249,7 +249,7 @@ type ItemSelectorProps = {
 };
 declare const ItemSelector: ({ itemsList, selectedItem, onItemChange, onClose, sectionWidth, title, itemStyle, onDebounce, icon, disabledItems, id, footer, categoryItemContentTemplate, }: ItemSelectorProps) => React$1.JSX.Element;
 
-declare const UrlControl: ControlComponent$1<({ placeholder, ariaLabel }: {
+declare const UrlControl: ControlComponent$1<({ placeholder: propPlaceholder, ariaLabel }: {
     placeholder?: string;
     ariaLabel?: string;
 }) => React$1.JSX.Element>;
@@ -631,6 +631,7 @@ declare const PopoverGridContainer: React$1.ForwardRefExoticComponent<{
 type InlineEditorProps = {
     value: string | null;
     setValue: (value: string | null) => void;
+    placeholder?: string | null;
     editorProps?: EditorProps;
     elementClasses?: string;
     sx?: SxProps<Theme>;

package/dist/index.d.ts

@@ -19,7 +19,7 @@ type ImageControlProps = {
 };
 declare const ImageControl: ControlComponent$1<({ sizes, label }: ImageControlProps) => React$1.JSX.Element>;
 
-declare const TextControl: ControlComponent$1<({ placeholder, error, inputValue, inputDisabled, helperText, sx, ariaLabel, }: {
+declare const TextControl: ControlComponent$1<({ placeholder: propPlaceholder, error, inputValue, inputDisabled, helperText, sx, ariaLabel, }: {
     placeholder?: string;
     error?: boolean;
     inputValue?: string;
@@ -33,7 +33,7 @@ type Props$b = {
     placeholder?: string;
     ariaLabel?: string;
 };
-declare const TextAreaControl: ControlComponent$1<({ placeholder, ariaLabel }: Props$b) => React$1.JSX.Element>;
+declare const TextAreaControl: ControlComponent$1<({ placeholder: propPlaceholder, ariaLabel }: Props$b) => React$1.JSX.Element>;
 
 declare const lengthUnits: readonly ["px", "%", "em", "rem", "vw", "vh", "ch"];
 declare const angleUnits: readonly ["deg", "rad", "grad", "turn"];
@@ -249,7 +249,7 @@ type ItemSelectorProps = {
 };
 declare const ItemSelector: ({ itemsList, selectedItem, onItemChange, onClose, sectionWidth, title, itemStyle, onDebounce, icon, disabledItems, id, footer, categoryItemContentTemplate, }: ItemSelectorProps) => React$1.JSX.Element;
 
-declare const UrlControl: ControlComponent$1<({ placeholder, ariaLabel }: {
+declare const UrlControl: ControlComponent$1<({ placeholder: propPlaceholder, ariaLabel }: {
     placeholder?: string;
     ariaLabel?: string;
 }) => React$1.JSX.Element>;
@@ -631,6 +631,7 @@ declare const PopoverGridContainer: React$1.ForwardRefExoticComponent<{
 type InlineEditorProps = {
     value: string | null;
     setValue: (value: string | null) => void;
+    placeholder?: string | null;
     editorProps?: EditorProps;
     elementClasses?: string;
     sx?: SxProps<Theme>;

package/dist/index.js

@@ -221,11 +221,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
   );
@@ -266,7 +275,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,
@@ -474,10 +485,11 @@ function ControlActions({ children }) {
 
 // src/controls/image-media-control.tsx
 var ImageMediaControl = createControl(({ mediaTypes = ["image"] }) => {
-  const { value, setValue, propType } = useBoundProp(import_editor_props.imageSrcPropTypeUtil);
+  const { value, setValue, propType, placeholder } = useBoundProp(import_editor_props.imageSrcPropTypeUtil);
   const { id, url } = value ?? {};
   const { data: attachment, isFetching } = (0, import_wp_media.useWpMediaAttachment)(id?.value || null);
-  const src = attachment?.url ?? url?.value ?? null;
+  const { data: placeholderAttachment } = (0, import_wp_media.useWpMediaAttachment)(placeholder?.id?.value || null);
+  const src = attachment?.url ?? url?.value ?? placeholderAttachment?.url ?? null;
   const { open } = (0, import_wp_media.useWpMediaFrame)({
     mediaTypes,
     multiple: false,
@@ -586,7 +598,7 @@ var import_editor_props4 = require("@elementor/editor-props");
 var import_ui7 = require("@elementor/ui");
 var TextControl = createControl(
   ({
-    placeholder,
+    placeholder: propPlaceholder,
     error,
     inputValue,
     inputDisabled,
@@ -594,8 +606,9 @@ var TextControl = createControl(
     sx,
     ariaLabel
   }) => {
-    const { value, setValue, disabled } = useBoundProp(import_editor_props4.stringPropTypeUtil);
+    const { value, setValue, disabled, placeholder: boundPlaceholder } = useBoundProp(import_editor_props4.stringPropTypeUtil);
     const handleChange = (event) => setValue(event.target.value);
+    const placeholder = propPlaceholder ?? boundPlaceholder ?? void 0;
     return /* @__PURE__ */ React14.createElement(ControlActions, null, /* @__PURE__ */ React14.createElement(
       import_ui7.TextField,
       {
@@ -620,11 +633,12 @@ var TextControl = createControl(
 var React15 = __toESM(require("react"));
 var import_editor_props5 = require("@elementor/editor-props");
 var import_ui8 = require("@elementor/ui");
-var TextAreaControl = createControl(({ placeholder, ariaLabel }) => {
-  const { value, setValue, disabled } = useBoundProp(import_editor_props5.stringPropTypeUtil);
+var TextAreaControl = createControl(({ placeholder: propPlaceholder, ariaLabel }) => {
+  const { value, setValue, disabled, placeholder: boundPlaceholder } = useBoundProp(import_editor_props5.stringPropTypeUtil);
   const handleChange = (event) => {
     setValue(event.target.value);
   };
+  const placeholder = propPlaceholder ?? boundPlaceholder ?? void 0;
   return /* @__PURE__ */ React15.createElement(ControlActions, null, /* @__PURE__ */ React15.createElement(
     import_ui8.TextField,
     {
@@ -3290,9 +3304,10 @@ var React60 = __toESM(require("react"));
 var import_editor_props21 = require("@elementor/editor-props");
 var import_ui45 = require("@elementor/ui");
 var UrlControl = createControl(
-  ({ placeholder, ariaLabel }) => {
-    const { value, setValue, disabled } = useBoundProp(import_editor_props21.urlPropTypeUtil);
+  ({ placeholder: propPlaceholder, ariaLabel }) => {
+    const { value, setValue, disabled, placeholder: boundPlaceholder } = useBoundProp(import_editor_props21.urlPropTypeUtil);
     const handleChange = (event) => setValue(event.target.value);
+    const placeholder = propPlaceholder ?? boundPlaceholder ?? void 0;
     return /* @__PURE__ */ React60.createElement(ControlActions, null, /* @__PURE__ */ React60.createElement(
       import_ui45.TextField,
       {
@@ -3519,45 +3534,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(import_editor_props22.queryPropTypeUtil);
+  const { value: urlValue, setValue: setUrlValue, placeholder: urlPlaceholder } = useBoundProp(import_editor_props22.urlPropTypeUtil);
   const {
     allowCustomValues = true,
     queryOptions: { url, params = {} },
-    placeholder,
+    placeholder = (0, import_i18n22.__)("Search", "elementor"),
     minInputLength = 2,
     onSetValue,
     ariaLabel
   } = props || {};
-  const normalizedPlaceholder = placeholder || (0, import_i18n22.__)("Search", "elementor");
   const [options, setOptions] = (0, import_react33.useState)(
-    generateFirstLoadedOption(value?.value)
+    generateFirstLoadedOption(queryValue)
   );
   const onOptionChange = (newValue) => {
     if (newValue === null) {
-      setValue(null);
+      setQueryValue(null);
       onSetValue?.(null);
       return;
     }
-    const valueToSave = {
-      $$type: "query",
-      value: {
-        id: import_editor_props22.numberPropTypeUtil.create(newValue),
-        label: import_editor_props22.stringPropTypeUtil.create(findMatchingOption(options, newValue)?.label || null)
-      }
+    const newQueryValue = {
+      id: import_editor_props22.numberPropTypeUtil.create(newValue),
+      label: import_editor_props22.stringPropTypeUtil.create(findMatchingOption(options, newValue)?.label || null)
     };
-    setValue(valueToSave);
-    onSetValue?.(valueToSave);
+    setQueryValue(newQueryValue);
+    onSetValue?.(import_editor_props22.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 ? import_editor_props22.urlPropTypeUtil.create(newLinkValue) : null;
-    setValue(valueToSave);
-    onSetValue?.(valueToSave);
+    setUrlValue(trimmedValue);
+    onSetValue?.(import_editor_props22.urlPropTypeUtil.create(trimmedValue));
     updateOptions(newValue);
   };
   const updateOptions = (newValue) => {
@@ -3576,14 +3587,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(import_icons14.SearchIcon, { fontSize: "tiny" }),
-      value: value?.value?.id?.value || value?.value,
+      value: displayValue,
       onOptionChange,
       onTextChange,
       minInputLength,
@@ -3611,16 +3623,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
@@ -3628,14 +3638,14 @@ var React64 = __toESM(require("react"));
 var import_editor_props23 = require("@elementor/editor-props");
 var import_ui48 = require("@elementor/ui");
 var SwitchControl = createControl(() => {
-  const { value, setValue, disabled } = useBoundProp(import_editor_props23.booleanPropTypeUtil);
+  const { value, setValue, disabled, placeholder } = useBoundProp(import_editor_props23.booleanPropTypeUtil);
   const handleChange = (event) => {
     setValue(event.target.checked);
   };
   return /* @__PURE__ */ React64.createElement(import_ui48.Box, { sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React64.createElement(
     import_ui48.Switch,
     {
-      checked: !!value,
+      checked: !!(value || placeholder),
       onChange: handleChange,
       size: "small",
       disabled,
@@ -3650,8 +3660,9 @@ var SwitchControl = createControl(() => {
 var SIZE7 = "tiny";
 var LinkControl = createControl((props) => {
   const { value, path, setValue, ...propContext } = useBoundProp(import_editor_props24.linkPropTypeUtil);
+  const linkPlaceholder = propContext.placeholder;
   const [linkSessionValue, setLinkSessionValue] = (0, import_session.useSessionStorage)(path.join("/"));
-  const [isActive, setIsActive] = (0, import_react34.useState)(!!value);
+  const [isActive, setIsActive] = (0, import_react34.useState)(!!value || !!linkPlaceholder);
   const {
     allowCustomValues = true,
     queryOptions,
@@ -3662,18 +3673,18 @@ var LinkControl = createControl((props) => {
     ariaLabel
   } = props || {};
   const [linkInLinkRestriction, setLinkInLinkRestriction] = (0, import_react34.useState)(
-    (0, import_editor_elements2.getLinkInLinkRestriction)(elementId, value)
+    (0, import_editor_elements2.getLinkInLinkRestriction)(elementId, value ?? linkPlaceholder)
   );
   const shouldDisableAddingLink = !isActive && linkInLinkRestriction.shouldRestrict;
   const debouncedCheckRestriction = (0, import_react34.useMemo)(
     () => (0, import_utils5.debounce)(() => {
-      const newRestriction = (0, import_editor_elements2.getLinkInLinkRestriction)(elementId, value);
-      if (newRestriction.shouldRestrict && isActive) {
+      const newRestriction = (0, import_editor_elements2.getLinkInLinkRestriction)(elementId, value ?? linkPlaceholder);
+      if (newRestriction.shouldRestrict && isActive && !linkPlaceholder) {
         setIsActive(false);
       }
       setLinkInLinkRestriction(newRestriction);
     }, 300),
-    [elementId, isActive, value]
+    [elementId, isActive, value, linkPlaceholder]
   );
   (0, import_react34.useEffect)(() => {
     debouncedCheckRestriction();
@@ -3690,7 +3701,7 @@ var LinkControl = createControl((props) => {
     };
   }, [elementId, debouncedCheckRestriction]);
   const onEnabledChange = () => {
-    setLinkInLinkRestriction((0, import_editor_elements2.getLinkInLinkRestriction)(elementId, value));
+    setLinkInLinkRestriction((0, import_editor_elements2.getLinkInLinkRestriction)(elementId, value ?? linkPlaceholder));
     if (linkInLinkRestriction.shouldRestrict && !isActive) {
       return;
     }
@@ -3726,13 +3737,14 @@ var LinkControl = createControl((props) => {
     },
     /* @__PURE__ */ React65.createElement(ControlLabel, null, label),
     /* @__PURE__ */ React65.createElement(RestrictedLinkInfotip, { isVisible: !isActive, linkInLinkRestriction }, /* @__PURE__ */ React65.createElement(
-      ToggleIconControl,
+      import_ui49.IconButton,
       {
-        disabled: shouldDisableAddingLink,
-        active: isActive,
-        onIconClick: onEnabledChange,
-        label: (0, import_i18n23.__)("Toggle link", "elementor")
-      }
+        size: SIZE7,
+        onClick: onEnabledChange,
+        "aria-label": (0, import_i18n23.__)("Toggle link", "elementor"),
+        disabled: shouldDisableAddingLink
+      },
+      isActive ? /* @__PURE__ */ React65.createElement(import_icons15.MinusIcon, { fontSize: SIZE7 }) : /* @__PURE__ */ React65.createElement(import_icons15.PlusIcon, { fontSize: SIZE7 })
     ))
   ), /* @__PURE__ */ React65.createElement(import_ui49.Collapse, { in: isActive, timeout: "auto", unmountOnExit: true }, /* @__PURE__ */ React65.createElement(import_ui49.Stack, { gap: 1.5 }, /* @__PURE__ */ React65.createElement(PropKeyProvider, { bind: "destination" }, /* @__PURE__ */ React65.createElement(
     QueryControl,
@@ -3746,9 +3758,6 @@ var LinkControl = createControl((props) => {
     }
   )), /* @__PURE__ */ React65.createElement(PropKeyProvider, { bind: "isTargetBlank" }, /* @__PURE__ */ React65.createElement(import_ui49.Grid, { container: true, alignItems: "center", flexWrap: "nowrap", justifyContent: "space-between" }, /* @__PURE__ */ React65.createElement(import_ui49.Grid, { item: true }, /* @__PURE__ */ React65.createElement(ControlFormLabel, null, (0, import_i18n23.__)("Open in a new tab", "elementor"))), /* @__PURE__ */ React65.createElement(import_ui49.Grid, { item: true, sx: { marginInlineEnd: -1 } }, /* @__PURE__ */ React65.createElement(SwitchControl, null))))))));
 });
-var ToggleIconControl = ({ disabled, active, onIconClick, label }) => {
-  return /* @__PURE__ */ React65.createElement(import_ui49.IconButton, { size: SIZE7, onClick: onIconClick, "aria-label": label, disabled }, active ? /* @__PURE__ */ React65.createElement(import_icons15.MinusIcon, { fontSize: SIZE7 }) : /* @__PURE__ */ React65.createElement(import_icons15.PlusIcon, { fontSize: SIZE7 }));
-};
 
 // src/controls/html-tag-control.tsx
 var React67 = __toESM(require("react"));
@@ -6515,6 +6524,7 @@ var InlineEditor = React100.forwardRef((props, ref) => {
   const {
     value,
     setValue,
+    placeholder = null,
     editorProps = {},
     elementClasses = "",
     autofocus = false,
@@ -6600,7 +6610,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,
@@ -6640,7 +6652,7 @@ var InlineEditingControl = createControl(
     attributes,
     props
   }) => {
-    const { value, setValue } = useBoundProp(import_editor_props53.htmlV3PropTypeUtil);
+    const { value, setValue, placeholder } = useBoundProp(import_editor_props53.htmlV3PropTypeUtil);
     const content = import_editor_props53.stringPropTypeUtil.extract(value?.content ?? null) ?? "";
     const debouncedParse = (0, import_react57.useMemo)(
       () => (0, import_utils8.debounce)((html) => {
@@ -6692,6 +6704,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 *": {
@@ -6702,7 +6721,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
+        }
+      )
     ));
   }
 );