@elementor/editor-editing-panel 4.2.0-878 → 4.2.0-879

package/dist/index.js

@@ -4221,15 +4221,17 @@ var GridJustifyItemsField = () => /* @__PURE__ */ React50.createElement(StylesFi
 var React51 = __toESM(require("react"));
 var import_react27 = require("react");
 var import_editor_controls26 = require("@elementor/editor-controls");
-var import_editor_props14 = require("@elementor/editor-props");
 var import_ui30 = require("@elementor/ui");
 var import_i18n29 = require("@wordpress/i18n");
+
+// src/components/style-sections/layout-section/utils/grid-track-value.ts
+var import_editor_props14 = require("@elementor/editor-props");
 var FR = "fr";
 var CUSTOM2 = "custom";
 var UNITS = [FR, CUSTOM2];
 var EMPTY = { kind: "empty" };
 var REPEAT_FR_PATTERN = /^repeat\(\s*(\d+)\s*,\s*1fr\s*\)$/;
-var parseCss = (css) => {
+var parseString = (css) => {
   if (!css) {
     return EMPTY;
   }
@@ -4240,6 +4242,29 @@ var parseCss = (css) => {
   }
   return { kind: "custom", raw: css };
 };
+var parseGridTrackSize = (size) => {
+  if (!size) {
+    return EMPTY;
+  }
+  if (size.unit === FR) {
+    const n = Number(size.size);
+    return Number.isFinite(n) && n >= 1 ? { kind: "fr", count: Math.trunc(n) } : EMPTY;
+  }
+  const raw = String(size.size ?? "");
+  return raw === "" ? EMPTY : { kind: "custom", raw };
+};
+var parseValue = (value) => {
+  if (!value) {
+    return EMPTY;
+  }
+  if (import_editor_props14.gridTrackSizePropTypeUtil.isValid(value)) {
+    return parseGridTrackSize(import_editor_props14.gridTrackSizePropTypeUtil.extract(value));
+  }
+  if (import_editor_props14.stringPropTypeUtil.isValid(value)) {
+    return parseString(import_editor_props14.stringPropTypeUtil.extract(value));
+  }
+  return EMPTY;
+};
 var fromSizeInput = (v) => {
   if (v.size === "" || Number.isNaN(v.size)) {
     return EMPTY;
@@ -4250,14 +4275,14 @@ var fromSizeInput = (v) => {
   }
   return { kind: "custom", raw: String(v.size) };
 };
-var toCss = (v) => {
+var toPropValue = (v) => {
   switch (v.kind) {
     case "empty":
       return null;
     case "fr":
-      return `repeat(${v.count}, 1fr)`;
+      return import_editor_props14.gridTrackSizePropTypeUtil.create({ size: v.count, unit: FR });
     case "custom":
-      return v.raw;
+      return import_editor_props14.gridTrackSizePropTypeUtil.create({ size: v.raw, unit: CUSTOM2 });
   }
 };
 var toSizeInput = (v, fallbackUnit = FR) => {
@@ -4289,15 +4314,32 @@ var unitOf = (v, fallback = FR) => {
   }
   return fallback;
 };
-var GridTrackField = ({ cssProp, label }) => /* @__PURE__ */ React51.createElement(UiProviders, null, /* @__PURE__ */ React51.createElement(StylesField, { bind: cssProp, propDisplayName: label }, /* @__PURE__ */ React51.createElement(GridTrackFieldContent, { cssProp, label })));
+
+// src/components/style-sections/layout-section/grid-size-field.tsx
+var SizeFieldWrapper = ({ children }) => /* @__PURE__ */ React51.createElement(import_editor_controls26.ControlActions, null, children);
+var GridTrackSizeInput = (0, import_editor_controls26.createControl)((props) => /* @__PURE__ */ React51.createElement(
+  import_editor_controls26.SizeComponent,
+  {
+    units: UNITS,
+    value: props.value,
+    placeholder: props.placeholder,
+    defaultUnit: FR,
+    setValue: props.setValue,
+    onBlur: () => {
+    },
+    min: 1,
+    anchorRef: props.anchorRef,
+    SizeFieldWrapper
+  }
+));
 var GridTrackFieldContent = ({ cssProp, label }) => {
   const { value, setValue } = useStylesField(cssProp, {
     history: { propDisplayName: label }
   });
   const { placeholder: inheritedPlaceholder } = (0, import_editor_controls26.useBoundProp)();
   const anchorRef = (0, import_react27.useRef)(null);
-  const local = parseCss(value?.value ?? null);
-  const inherited = parseCss(import_editor_props14.stringPropTypeUtil.extract(inheritedPlaceholder));
+  const local = parseValue(value);
+  const inherited = parseValue(inheritedPlaceholder);
   const displayValue = local.kind !== "empty" ? toSizeInput(local) : toSizeInput(EMPTY, unitOf(inherited));
   const placeholder = toPlaceholder(inherited);
   const handleChange = (raw) => {
@@ -4305,24 +4347,19 @@ var GridTrackFieldContent = ({ cssProp, label }) => {
     if (next.kind === "empty" && local.kind !== "empty" && raw.unit !== unitOf(local)) {
       return;
     }
-    const css = toCss(next);
-    setValue(css === null ? null : { $$type: "string", value: css });
+    setValue(toPropValue(next));
   };
   return /* @__PURE__ */ React51.createElement(StylesFieldLayout, { label, direction: "column" }, /* @__PURE__ */ React51.createElement("div", { ref: anchorRef }, /* @__PURE__ */ React51.createElement(
-    import_editor_controls26.SizeComponent,
+    GridTrackSizeInput,
     {
-      units: UNITS,
       value: displayValue,
       placeholder,
-      defaultUnit: FR,
       setValue: handleChange,
-      onBlur: () => {
-      },
-      min: 1,
       anchorRef
     }
   )));
 };
+var GridTrackField = ({ cssProp, label }) => /* @__PURE__ */ React51.createElement(UiProviders, null, /* @__PURE__ */ React51.createElement(StylesField, { bind: cssProp, propDisplayName: label }, /* @__PURE__ */ React51.createElement(GridTrackFieldContent, { cssProp, label })));
 var GridSizeFields = () => /* @__PURE__ */ React51.createElement(import_ui30.Grid, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React51.createElement(import_ui30.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React51.createElement(GridTrackField, { cssProp: "grid-template-columns", label: (0, import_i18n29.__)("Columns", "elementor") })), /* @__PURE__ */ React51.createElement(import_ui30.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React51.createElement(GridTrackField, { cssProp: "grid-template-rows", label: (0, import_i18n29.__)("Rows", "elementor") })));
 
 // src/components/style-sections/layout-section/grid-span-field.tsx