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

package/dist/index.js

@@ -606,7 +606,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) => {
@@ -1649,17 +1650,47 @@ var import_icons9 = require("@elementor/icons");
 var import_ui19 = require("@elementor/ui");
 var import_i18n13 = require("@wordpress/i18n");
 
-// src/components/ui/menu-item-content.tsx
+// src/components/ui/empty-state.tsx
 var React15 = __toESM(require("react"));
-var import_editor_ui5 = require("@elementor/editor-ui");
-var import_icons8 = require("@elementor/icons");
 var import_ui15 = require("@elementor/ui");
 var import_i18n10 = require("@wordpress/i18n");
+var EmptyState = ({ icon, title, message, onAdd }) => {
+  const canAdd = usePermissions().canAdd();
+  return /* @__PURE__ */ React15.createElement(
+    import_ui15.Stack,
+    {
+      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(import_ui15.Button, { variant: "outlined", color: "secondary", size: "small", onClick: onAdd }, (0, import_i18n10.__)("Create a variable", "elementor"))) : /* @__PURE__ */ React15.createElement(
+      Content,
+      {
+        title: (0, import_i18n10.__)("There are no variables", "elementor"),
+        message: (0, import_i18n10.__)("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(import_ui15.Typography, { align: "center", variant: "subtitle2" }, title), /* @__PURE__ */ React15.createElement(import_ui15.Typography, { align: "center", variant: "caption", maxWidth: "180px" }, message));
+}
+
+// src/components/ui/menu-item-content.tsx
+var React16 = __toESM(require("react"));
+var import_editor_ui5 = require("@elementor/editor-ui");
+var import_icons8 = require("@elementor/icons");
+var import_ui16 = require("@elementor/ui");
+var import_i18n11 = require("@wordpress/i18n");
 var SIZE3 = "tiny";
 var MenuItemContent = ({ item }) => {
   const onEdit = item.onEdit;
-  return /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(import_ui15.ListItemIcon, null, item.icon), /* @__PURE__ */ React15.createElement(
-    import_ui15.Box,
+  return /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(import_ui16.ListItemIcon, null, item.icon), /* @__PURE__ */ React16.createElement(
+    import_ui16.Box,
     {
       sx: {
         flex: 1,
@@ -1669,70 +1700,47 @@ var MenuItemContent = ({ item }) => {
         gap: 1
       }
     },
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React16.createElement(
       import_editor_ui5.EllipsisWithTooltip,
       {
         title: item.label || item.value,
-        as: import_ui15.Typography,
+        as: import_ui16.Typography,
         variant: "caption",
         color: "text.primary",
         sx: { marginTop: "1px", lineHeight: "2" },
         maxWidth: "50%"
       }
     ),
-    item.secondaryText && /* @__PURE__ */ React15.createElement(
+    item.secondaryText && /* @__PURE__ */ React16.createElement(
       import_editor_ui5.EllipsisWithTooltip,
       {
         title: item.secondaryText,
-        as: import_ui15.Typography,
+        as: import_ui16.Typography,
         variant: "caption",
         color: "text.tertiary",
         sx: { marginTop: "1px", lineHeight: "1" },
         maxWidth: "50%"
       }
     )
-  ), !!onEdit && /* @__PURE__ */ React15.createElement(
-    import_ui15.IconButton,
+  ), !!onEdit && /* @__PURE__ */ React16.createElement(
+    import_ui16.IconButton,
     {
       sx: { mx: 1, opacity: "0" },
       onClick: (e) => {
         e.stopPropagation();
         onEdit(item.value);
       },
-      "aria-label": (0, import_i18n10.__)("Edit", "elementor")
+      "aria-label": (0, import_i18n11.__)("Edit", "elementor")
     },
-    /* @__PURE__ */ React15.createElement(import_icons8.EditIcon, { color: "action", fontSize: SIZE3 })
+    /* @__PURE__ */ React16.createElement(import_icons8.EditIcon, { color: "action", fontSize: SIZE3 })
   ));
 };
 
 // src/components/ui/no-search-results.tsx
-var React16 = __toESM(require("react"));
-var import_ui16 = require("@elementor/ui");
-var import_i18n11 = require("@wordpress/i18n");
-var NoSearchResults = ({ searchValue, onClear, icon }) => {
-  return /* @__PURE__ */ React16.createElement(
-    import_ui16.Stack,
-    {
-      gap: 1,
-      alignItems: "center",
-      justifyContent: "center",
-      height: "100%",
-      p: 2.5,
-      color: "text.secondary",
-      sx: { pb: 3.5 }
-    },
-    icon,
-    /* @__PURE__ */ React16.createElement(import_ui16.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n11.__)("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React16.createElement("br", null), "\u201C", searchValue, "\u201D."),
-    /* @__PURE__ */ React16.createElement(import_ui16.Typography, { align: "center", variant: "caption", sx: { display: "flex", flexDirection: "column" } }, (0, import_i18n11.__)("Try something else.", "elementor"), /* @__PURE__ */ React16.createElement(import_ui16.Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, (0, import_i18n11.__)("Clear & try again", "elementor")))
-  );
-};
-
-// src/components/ui/no-variables.tsx
 var React17 = __toESM(require("react"));
 var import_ui17 = require("@elementor/ui");
 var import_i18n12 = require("@wordpress/i18n");
-var NoVariables = ({ icon, title, onAdd }) => {
-  const canAdd = usePermissions().canAdd();
+var NoSearchResults = ({ searchValue, onClear, icon }) => {
   return /* @__PURE__ */ React17.createElement(
     import_ui17.Stack,
     {
@@ -1740,31 +1748,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 || (0, import_i18n12.__)("Create your first variable", "elementor"),
-        message: (0, import_i18n12.__)(
-          "Variables are saved attributes that you can apply anywhere on your site.",
-          "elementor"
-        )
-      }
-    ), onAdd && /* @__PURE__ */ React17.createElement(import_ui17.Button, { variant: "outlined", color: "secondary", size: "small", onClick: onAdd }, (0, import_i18n12.__)("Create a variable", "elementor"))) : /* @__PURE__ */ React17.createElement(
-      NoVariablesContent,
-      {
-        title: (0, import_i18n12.__)("There are no variables", "elementor"),
-        message: (0, import_i18n12.__)("With your current role, you can only connect and detach variables.", "elementor")
-      }
-    )
+    /* @__PURE__ */ React17.createElement(import_ui17.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n12.__)("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React17.createElement("br", null), "\u201C", searchValue, "\u201D."),
+    /* @__PURE__ */ React17.createElement(import_ui17.Typography, { align: "center", variant: "caption", sx: { display: "flex", flexDirection: "column" } }, (0, import_i18n12.__)("Try something else.", "elementor"), /* @__PURE__ */ React17.createElement(import_ui17.Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, (0, import_i18n12.__)("Clear & try again", "elementor")))
   );
 };
-function NoVariablesContent({ title, message }) {
-  return /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(import_ui17.Typography, { align: "center", variant: "subtitle2" }, title), /* @__PURE__ */ React17.createElement(import_ui17.Typography, { align: "center", variant: "caption", maxWidth: "180px" }, message));
-}
 
 // src/components/ui/styled-menu-list.tsx
 var import_ui18 = require("@elementor/ui");
@@ -1807,7 +1799,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);
@@ -1891,7 +1884,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: (0, import_i18n13.__)(
+        "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: (0, import_i18n13.__)("No compatible variables", "elementor"),
+      message: (0, import_i18n13.__)(
+        "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