@elementor/editor-variables 3.33.0-105 → 3.33.0-106

package/dist/index.mjs

@@ -576,7 +576,8 @@ var useFilteredVariables = (searchValue, propTypeKey) => {
   return {
     list: searchFilteredVariables,
     hasMatches: searchFilteredVariables.length > 0,
-    isSourceNotEmpty: typeFilteredVariables.length > 0
+    isSourceNotEmpty: typeFilteredVariables.length > 0,
+    hasNoCompatibleVariables: baseVariables.length > 0 && typeFilteredVariables.length === 0
   };
 };
 var useVariableSelectionFilter = (variables) => {
@@ -1647,16 +1648,46 @@ import { ColorFilterIcon as ColorFilterIcon2, PlusIcon, SettingsIcon } from "@el
 import { Divider as Divider4, IconButton as IconButton7 } from "@elementor/ui";
 import { __ as __13, sprintf } from "@wordpress/i18n";
 
-// src/components/ui/menu-item-content.tsx
+// src/components/ui/empty-state.tsx
 import * as React15 from "react";
+import { Button as Button6, Stack as Stack5, Typography as Typography6 } from "@elementor/ui";
+import { __ as __10 } from "@wordpress/i18n";
+var EmptyState = ({ icon, title, message, onAdd }) => {
+  const canAdd = usePermissions().canAdd();
+  return /* @__PURE__ */ React15.createElement(
+    Stack5,
+    {
+      gap: 1,
+      alignItems: "center",
+      justifyContent: "center",
+      height: "100%",
+      color: "text.secondary",
+      sx: { p: 2.5, pb: 5.5 }
+    },
+    icon,
+    canAdd ? /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(Content, { title, message }), onAdd && /* @__PURE__ */ React15.createElement(Button6, { variant: "outlined", color: "secondary", size: "small", onClick: onAdd }, __10("Create a variable", "elementor"))) : /* @__PURE__ */ React15.createElement(
+      Content,
+      {
+        title: __10("There are no variables", "elementor"),
+        message: __10("With your current role, you can only connect and detach variables.", "elementor")
+      }
+    )
+  );
+};
+function Content({ title, message }) {
+  return /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(Typography6, { align: "center", variant: "subtitle2" }, title), /* @__PURE__ */ React15.createElement(Typography6, { align: "center", variant: "caption", maxWidth: "180px" }, message));
+}
+
+// src/components/ui/menu-item-content.tsx
+import * as React16 from "react";
 import { EllipsisWithTooltip as EllipsisWithTooltip2 } from "@elementor/editor-ui";
 import { EditIcon } from "@elementor/icons";
-import { Box as Box3, IconButton as IconButton6, ListItemIcon, Typography as Typography6 } from "@elementor/ui";
-import { __ as __10 } from "@wordpress/i18n";
+import { Box as Box3, IconButton as IconButton6, ListItemIcon, Typography as Typography7 } from "@elementor/ui";
+import { __ as __11 } from "@wordpress/i18n";
 var SIZE3 = "tiny";
 var MenuItemContent = ({ item }) => {
   const onEdit = item.onEdit;
-  return /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(ListItemIcon, null, item.icon), /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(ListItemIcon, null, item.icon), /* @__PURE__ */ React16.createElement(
     Box3,
     {
       sx: {
@@ -1667,29 +1698,29 @@ var MenuItemContent = ({ item }) => {
         gap: 1
       }
     },
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React16.createElement(
       EllipsisWithTooltip2,
       {
         title: item.label || item.value,
-        as: Typography6,
+        as: Typography7,
         variant: "caption",
         color: "text.primary",
         sx: { marginTop: "1px", lineHeight: "2" },
         maxWidth: "50%"
       }
     ),
-    item.secondaryText && /* @__PURE__ */ React15.createElement(
+    item.secondaryText && /* @__PURE__ */ React16.createElement(
       EllipsisWithTooltip2,
       {
         title: item.secondaryText,
-        as: Typography6,
+        as: Typography7,
         variant: "caption",
         color: "text.tertiary",
         sx: { marginTop: "1px", lineHeight: "1" },
         maxWidth: "50%"
       }
     )
-  ), !!onEdit && /* @__PURE__ */ React15.createElement(
+  ), !!onEdit && /* @__PURE__ */ React16.createElement(
     IconButton6,
     {
       sx: { mx: 1, opacity: "0" },
@@ -1697,40 +1728,17 @@ var MenuItemContent = ({ item }) => {
         e.stopPropagation();
         onEdit(item.value);
       },
-      "aria-label": __10("Edit", "elementor")
+      "aria-label": __11("Edit", "elementor")
     },
-    /* @__PURE__ */ React15.createElement(EditIcon, { color: "action", fontSize: SIZE3 })
+    /* @__PURE__ */ React16.createElement(EditIcon, { color: "action", fontSize: SIZE3 })
   ));
 };
 
 // src/components/ui/no-search-results.tsx
-import * as React16 from "react";
-import { Link, Stack as Stack5, Typography as Typography7 } from "@elementor/ui";
-import { __ as __11 } from "@wordpress/i18n";
-var NoSearchResults = ({ searchValue, onClear, icon }) => {
-  return /* @__PURE__ */ React16.createElement(
-    Stack5,
-    {
-      gap: 1,
-      alignItems: "center",
-      justifyContent: "center",
-      height: "100%",
-      p: 2.5,
-      color: "text.secondary",
-      sx: { pb: 3.5 }
-    },
-    icon,
-    /* @__PURE__ */ React16.createElement(Typography7, { align: "center", variant: "subtitle2" }, __11("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React16.createElement("br", null), "\u201C", searchValue, "\u201D."),
-    /* @__PURE__ */ React16.createElement(Typography7, { align: "center", variant: "caption", sx: { display: "flex", flexDirection: "column" } }, __11("Try something else.", "elementor"), /* @__PURE__ */ React16.createElement(Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, __11("Clear & try again", "elementor")))
-  );
-};
-
-// src/components/ui/no-variables.tsx
 import * as React17 from "react";
-import { Button as Button6, Stack as Stack6, Typography as Typography8 } from "@elementor/ui";
+import { Link, Stack as Stack6, Typography as Typography8 } from "@elementor/ui";
 import { __ as __12 } from "@wordpress/i18n";
-var NoVariables = ({ icon, title, onAdd }) => {
-  const canAdd = usePermissions().canAdd();
+var NoSearchResults = ({ searchValue, onClear, icon }) => {
   return /* @__PURE__ */ React17.createElement(
     Stack6,
     {
@@ -1738,31 +1746,15 @@ var NoVariables = ({ icon, title, onAdd }) => {
       alignItems: "center",
       justifyContent: "center",
       height: "100%",
+      p: 2.5,
       color: "text.secondary",
-      sx: { p: 2.5, pb: 5.5 }
+      sx: { pb: 3.5 }
     },
     icon,
-    canAdd ? /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(
-      NoVariablesContent,
-      {
-        title: title || __12("Create your first variable", "elementor"),
-        message: __12(
-          "Variables are saved attributes that you can apply anywhere on your site.",
-          "elementor"
-        )
-      }
-    ), onAdd && /* @__PURE__ */ React17.createElement(Button6, { variant: "outlined", color: "secondary", size: "small", onClick: onAdd }, __12("Create a variable", "elementor"))) : /* @__PURE__ */ React17.createElement(
-      NoVariablesContent,
-      {
-        title: __12("There are no variables", "elementor"),
-        message: __12("With your current role, you can only connect and detach variables.", "elementor")
-      }
-    )
+    /* @__PURE__ */ React17.createElement(Typography8, { align: "center", variant: "subtitle2" }, __12("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React17.createElement("br", null), "\u201C", searchValue, "\u201D."),
+    /* @__PURE__ */ React17.createElement(Typography8, { align: "center", variant: "caption", sx: { display: "flex", flexDirection: "column" } }, __12("Try something else.", "elementor"), /* @__PURE__ */ React17.createElement(Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, __12("Clear & try again", "elementor")))
   );
 };
-function NoVariablesContent({ title, message }) {
-  return /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(Typography8, { align: "center", variant: "subtitle2" }, title), /* @__PURE__ */ React17.createElement(Typography8, { align: "center", variant: "caption", maxWidth: "180px" }, message));
-}
 
 // src/components/ui/styled-menu-list.tsx
 import { MenuList, styled as styled2 } from "@elementor/ui";
@@ -1805,7 +1797,8 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
   const {
     list: variables,
     hasMatches: hasSearchResults,
-    isSourceNotEmpty: hasVariables
+    isSourceNotEmpty: hasVariables,
+    hasNoCompatibleVariables
   } = useFilteredVariables(searchValue, propTypeUtil.key);
   const handleSetVariable = (key) => {
     setVariable(key);
@@ -1889,7 +1882,29 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
       onClear: handleClearSearch,
       icon: /* @__PURE__ */ React18.createElement(VariableIcon, { fontSize: "large" })
     }
-  ), !hasVariables && /* @__PURE__ */ React18.createElement(NoVariables, { title: noVariableTitle, icon: /* @__PURE__ */ React18.createElement(VariableIcon, { fontSize: "large" }), onAdd }));
+  ), !hasVariables && !hasNoCompatibleVariables && /* @__PURE__ */ React18.createElement(
+    EmptyState,
+    {
+      title: noVariableTitle,
+      message: __13(
+        "Variables are saved attributes that you can apply anywhere on your site.",
+        "elementor"
+      ),
+      icon: /* @__PURE__ */ React18.createElement(VariableIcon, { fontSize: "large" }),
+      onAdd
+    }
+  ), hasNoCompatibleVariables && /* @__PURE__ */ React18.createElement(
+    EmptyState,
+    {
+      title: __13("No compatible variables", "elementor"),
+      message: __13(
+        "Looks like none of your variables work with this control. Create a new variable to use it here.",
+        "elementor"
+      ),
+      icon: /* @__PURE__ */ React18.createElement(VariableIcon, { fontSize: "large" }),
+      onAdd
+    }
+  ));
 };
 
 // src/components/variable-selection-popover.tsx