@elementor/editor-variables 4.1.0-784 → 4.1.0-786

package/dist/index.mjs

@@ -979,6 +979,9 @@ var hasVariable = (key) => {
   return getVariables()[key] !== void 0;
 };
 var useVariable = (key) => {
+  return getVariable(key);
+};
+function getVariable(key) {
   const variables = getVariables();
   if (!variables?.[key]) {
     return null;
@@ -987,7 +990,7 @@ var useVariable = (key) => {
     ...variables[key],
     key
   };
-};
+}
 var useFilteredVariables = (searchValue, propTypeKey) => {
   const baseVariables = usePropVariables(propTypeKey);
   const typeFilteredVariables = useVariableSelectionFilter(baseVariables);
@@ -4185,17 +4188,49 @@ import { injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel } from "@elemen
 import {
   backgroundColorOverlayPropTypeUtil,
   selectionSizePropTypeUtil as selectionSizePropTypeUtil2,
-  shadowPropTypeUtil
+  shadowPropTypeUtil as shadowPropTypeUtil2
 } from "@elementor/editor-props";
 
 // src/components/variables-repeater-item-slot.tsx
 import * as React39 from "react";
 import {
-  selectionSizePropTypeUtil
+  selectionSizePropTypeUtil,
+  shadowPropTypeUtil
 } from "@elementor/editor-props";
+
+// src/utils/size-value.ts
+import { sizePropTypeUtil as sizePropTypeUtil2 } from "@elementor/editor-props";
+
+// src/prop-types/custom-size-variable-prop-type.ts
+import { createPropUtils as createPropUtils4 } from "@elementor/editor-props";
+import { z as z5 } from "@elementor/schema";
+var customSizeVariablePropTypeUtil = createPropUtils4("global-custom-size-variable", z5.string());
+
+// src/utils/size-value.ts
+var DEFAULT_UNIT = "px";
+var CUSTOM_SIZE_LABEL = "fx";
+function sizeValue(value) {
+  if (sizeVariablePropTypeUtil.isValid(value) || customSizeVariablePropTypeUtil.isValid(value)) {
+    const variable = getVariable(value?.value);
+    return variable?.value;
+  }
+  if (sizePropTypeUtil2.isValid(value)) {
+    const { size, unit } = value.value;
+    if ("custom" !== unit) {
+      return `${size ?? 0}${unit ?? DEFAULT_UNIT}`;
+    }
+    if (!size) {
+      return CUSTOM_SIZE_LABEL;
+    }
+    return size;
+  }
+  return "";
+}
+
+// src/components/variables-repeater-item-slot.tsx
 var useColorVariable = (value) => {
   const variableId = value?.value?.color?.value;
-  return useVariable(variableId || "");
+  return getVariable(variableId || "");
 };
 var BackgroundRepeaterColorIndicator = ({ value }) => {
   const colorVariable = useColorVariable(value);
@@ -4209,10 +4244,22 @@ var BoxShadowRepeaterColorIndicator = ({ value }) => {
   const colorVariable = useColorVariable(value);
   return /* @__PURE__ */ React39.createElement(ColorIndicator, { component: "span", size: "inherit", value: colorVariable?.value });
 };
+var BoxShadowRepeaterLabel = ({ value }) => {
+  const shadowPropValue = shadowPropTypeUtil.extract(value) || {};
+  const labels = [];
+  for (const key of ["hOffset", "vOffset", "blur", "spread"]) {
+    const rendered = sizeValue(shadowPropValue[key]);
+    if (rendered) {
+      labels.push(rendered);
+    }
+  }
+  const positionLabel = shadowPropValue.position?.value || "outset";
+  return /* @__PURE__ */ React39.createElement("span", { style: { textTransform: "capitalize" } }, positionLabel, ": ", labels.join(" "));
+};
 var TransitionsSizeVariableLabel = ({ value: prop }) => {
   let label = "";
   const variableId = prop?.value?.size?.value || "";
-  const variable = useVariable(variableId);
+  const variable = getVariable(variableId);
   if (variable && selectionSizePropTypeUtil.isValid(prop)) {
     const selection = prop.value?.selection?.value?.key?.value;
     if (selection) {
@@ -4223,11 +4270,6 @@ var TransitionsSizeVariableLabel = ({ value: prop }) => {
   return /* @__PURE__ */ React39.createElement("span", null, label);
 };
 
-// src/prop-types/custom-size-variable-prop-type.ts
-import { createPropUtils as createPropUtils4 } from "@elementor/editor-props";
-import { z as z5 } from "@elementor/schema";
-var customSizeVariablePropTypeUtil = createPropUtils4("global-custom-size-variable", z5.string());
-
 // src/repeater-injections.ts
 function registerRepeaterInjections() {
   backgroundOverlayRepeaterInjections();
@@ -4255,7 +4297,16 @@ var boxShadowRepeaterInjections = () => {
     id: "color-variables-box-shadow-icon",
     component: BoxShadowRepeaterColorIndicator,
     condition: ({ value }) => {
-      return hasAssignedColorVariable(shadowPropTypeUtil.extract(value)?.color);
+      const { color } = shadowPropTypeUtil2.extract(value) || {};
+      return hasAssignedColorVariable(color);
+    }
+  });
+  injectIntoRepeaterItemLabel({
+    id: "color-variables-box-shadow-label",
+    component: BoxShadowRepeaterLabel,
+    condition: ({ value }) => {
+      const { hOffset, vOffset, blur, spread } = shadowPropTypeUtil2.extract(value) || {};
+      return hasAssignedSizeVariable(hOffset) || hasAssignedSizeVariable(vOffset) || hasAssignedSizeVariable(blur) || hasAssignedSizeVariable(spread);
     }
   });
 };