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

package/dist/index.mjs

@@ -4295,16 +4295,21 @@ var GridJustifyItemsField = () => /* @__PURE__ */ React50.createElement(StylesFi
 // src/components/style-sections/layout-section/grid-size-field.tsx
 import * as React51 from "react";
 import { useRef as useRef8 } from "react";
-import { SizeComponent, useBoundProp as useBoundProp4 } from "@elementor/editor-controls";
-import { stringPropTypeUtil as stringPropTypeUtil3 } from "@elementor/editor-props";
+import { ControlActions, createControl, SizeComponent, useBoundProp as useBoundProp4 } from "@elementor/editor-controls";
 import { Grid as Grid4 } from "@elementor/ui";
 import { __ as __29 } from "@wordpress/i18n";
+
+// src/components/style-sections/layout-section/utils/grid-track-value.ts
+import {
+  gridTrackSizePropTypeUtil,
+  stringPropTypeUtil as stringPropTypeUtil3
+} from "@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;
   }
@@ -4315,6 +4320,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 (gridTrackSizePropTypeUtil.isValid(value)) {
+    return parseGridTrackSize(gridTrackSizePropTypeUtil.extract(value));
+  }
+  if (stringPropTypeUtil3.isValid(value)) {
+    return parseString(stringPropTypeUtil3.extract(value));
+  }
+  return EMPTY;
+};
 var fromSizeInput = (v) => {
   if (v.size === "" || Number.isNaN(v.size)) {
     return EMPTY;
@@ -4325,14 +4353,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 gridTrackSizePropTypeUtil.create({ size: v.count, unit: FR });
     case "custom":
-      return v.raw;
+      return gridTrackSizePropTypeUtil.create({ size: v.raw, unit: CUSTOM2 });
   }
 };
 var toSizeInput = (v, fallbackUnit = FR) => {
@@ -4364,15 +4392,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(ControlActions, null, children);
+var GridTrackSizeInput = createControl((props) => /* @__PURE__ */ React51.createElement(
+  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 } = useBoundProp4();
   const anchorRef = useRef8(null);
-  const local = parseCss(value?.value ?? null);
-  const inherited = parseCss(stringPropTypeUtil3.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) => {
@@ -4380,24 +4425,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(
-    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(Grid4, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React51.createElement(Grid4, { item: true, xs: 6 }, /* @__PURE__ */ React51.createElement(GridTrackField, { cssProp: "grid-template-columns", label: __29("Columns", "elementor") })), /* @__PURE__ */ React51.createElement(Grid4, { item: true, xs: 6 }, /* @__PURE__ */ React51.createElement(GridTrackField, { cssProp: "grid-template-rows", label: __29("Rows", "elementor") })));
 
 // src/components/style-sections/layout-section/grid-span-field.tsx