@elementor/editor-editing-panel 4.2.0-847 → 4.2.0-849

package/dist/index.mjs

@@ -152,7 +152,7 @@ import * as React11 from "react";
 import { useRef, useState as useState4 } from "react";
 import {
   isElementsStylesProvider as isElementsStylesProvider4,
-  stylesRepository as stylesRepository6,
+  stylesRepository as stylesRepository7,
   useProviders,
   useUserStylesCapability as useUserStylesCapability5,
   validateStyleLabel as validateStyleLabel2
@@ -554,7 +554,7 @@ var StyledGroupItems = styled("ul")`
 import * as React10 from "react";
 import { useEffect, useMemo as useMemo3, useState as useState3 } from "react";
 import { isClassState } from "@elementor/editor-styles";
-import { stylesRepository as stylesRepository5, useUserStylesCapability as useUserStylesCapability4, validateStyleLabel } from "@elementor/editor-styles-repository";
+import { stylesRepository as stylesRepository6, useUserStylesCapability as useUserStylesCapability4, validateStyleLabel } from "@elementor/editor-styles-repository";
 import { EditableField, EllipsisWithTooltip, useEditable } from "@elementor/editor-ui";
 import { DotsVerticalIcon } from "@elementor/icons";
 import { useSessionStorage as useSessionStorage3 } from "@elementor/session";
@@ -588,7 +588,7 @@ function CssClassProvider({ children, ...contextValue }) {
 import * as React9 from "react";
 import {
   isElementsStylesProvider as isElementsStylesProvider3,
-  stylesRepository as stylesRepository4,
+  stylesRepository as stylesRepository5,
   useUserStylesCapability as useUserStylesCapability3
 } from "@elementor/editor-styles-repository";
 import { MenuItemInfotip, MenuListItem as MenuListItem2 } from "@elementor/editor-ui";
@@ -614,7 +614,7 @@ var StyleIndicator = styled2("div", {
 
 // src/components/css-classes/duplicate-class-menu-item.tsx
 import * as React7 from "react";
-import { stylesRepository as stylesRepository3, useUserStylesCapability as useUserStylesCapability2 } from "@elementor/editor-styles-repository";
+import { stylesRepository as stylesRepository4, useUserStylesCapability as useUserStylesCapability2 } from "@elementor/editor-styles-repository";
 import { MenuListItem } from "@elementor/editor-ui";
 import { useSessionStorage as useSessionStorage2 } from "@elementor/session";
 import { __ as __2 } from "@wordpress/i18n";
@@ -630,6 +630,7 @@ import { __ } from "@wordpress/i18n";
 import { setDocumentModifiedStatus } from "@elementor/editor-documents";
 import { getElementSetting as getElementSetting2, updateElementSettings as updateElementSettings2 } from "@elementor/editor-elements";
 import { classesPropTypeUtil as classesPropTypeUtil2 } from "@elementor/editor-props";
+import { stylesRepository as stylesRepository3 } from "@elementor/editor-styles-repository";
 function doGetAppliedClasses(elementId, classesPropType = "classes") {
   return getElementSetting2(elementId, classesPropType)?.value || [];
 }
@@ -640,6 +641,17 @@ function doApplyClasses(elementId, classIds, classesPropType = "classes") {
     withHistory: false
   });
   setDocumentModifiedStatus(true);
+  ensureClassesAreLoaded(classIds);
+}
+function ensureClassesAreLoaded(classIds) {
+  const providers = stylesRepository3.getProviders();
+  classIds.forEach((classId) => {
+    stylesRepository3.getProviderByKey(classId)?.actions.get(classId);
+    const owningProvider = providers.find(
+      (provider) => provider.actions.all().some((style) => style.id === classId)
+    );
+    owningProvider?.actions.get(classId);
+  });
 }
 function doUnapplyClass(elementId, classId, classesPropType = "classes") {
   const appliedClasses = getElementSetting2(elementId, classesPropType)?.value || [];
@@ -820,7 +832,7 @@ function DuplicateClassMenuItem({ closeMenu }) {
   if (!provider || !classId) {
     return null;
   }
-  const providerInstance = stylesRepository3.getProviderByKey(provider);
+  const providerInstance = stylesRepository4.getProviderByKey(provider);
   const createAction = providerInstance?.actions.create;
   const getAction = providerInstance?.actions.get;
   if (!createAction || !getAction) {
@@ -976,7 +988,7 @@ function useElementStates() {
 }
 function useModifiedStates(styleId) {
   const { meta } = useStyle();
-  const styleDef = stylesRepository4.all().find((style) => style.id === styleId);
+  const styleDef = stylesRepository5.all().find((style) => style.id === styleId);
   return Object.fromEntries(
     styleDef?.variants.filter((variant) => meta.breakpoint === variant.meta.breakpoint).map((variant) => [variant.meta.state ?? "normal", true]) ?? []
   );
@@ -989,7 +1001,7 @@ function getMenuItemsByProvider({
   if (!provider) {
     return [];
   }
-  const providerInstance = stylesRepository4.getProviderByKey(provider);
+  const providerInstance = stylesRepository5.getProviderByKey(provider);
   const providerActions = providerInstance?.actions;
   const canUpdate = providerActions?.update;
   const canDuplicate = providerActions?.create && providerActions?.get;
@@ -1139,7 +1151,7 @@ function CssClassItem(props) {
     onError: setError
   });
   const color = error ? "error" : colorProp;
-  const providerActions = provider ? stylesRepository5.getProviderByKey(provider)?.actions : null;
+  const providerActions = provider ? stylesRepository6.getProviderByKey(provider)?.actions : null;
   const allowRename = Boolean(providerActions?.update) && userCan(provider ?? "")?.update;
   const isShowingState = isActive && meta.state;
   const stateLabel = useMemo3(() => {
@@ -1329,7 +1341,7 @@ var updateClassByProvider = (provider, data) => {
   if (!provider) {
     return;
   }
-  const providerInstance = stylesRepository6.getProviderByKey(provider);
+  const providerInstance = stylesRepository7.getProviderByKey(provider);
   if (!providerInstance) {
     return;
   }
@@ -2578,7 +2590,7 @@ import { getWidgetsCache } from "@elementor/editor-elements";
 import { classesPropTypeUtil as classesPropTypeUtil3 } from "@elementor/editor-props";
 import { getBreakpointsTree as getBreakpointsTree2 } from "@elementor/editor-responsive";
 import { getStylesSchema } from "@elementor/editor-styles";
-import { stylesRepository as stylesRepository7 } from "@elementor/editor-styles-repository";
+import { stylesRepository as stylesRepository8 } from "@elementor/editor-styles-repository";
 
 // src/styles-inheritance/create-styles-inheritance.ts
 import {
@@ -2855,7 +2867,7 @@ var useAppliedStyles = () => {
   useStylesRerender();
   const classesProp = usePanelElementSetting(currentClassesProp);
   const appliedStyles = classesPropTypeUtil3.extract(classesProp) ?? [];
-  return stylesRepository7.all().filter((style) => [...baseStyles, ...appliedStyles].includes(style.id));
+  return stylesRepository8.all().filter((style) => [...baseStyles, ...appliedStyles].includes(style.id));
 };
 var useBaseStyles = () => {
   const { elementType } = useElement();
@@ -4194,48 +4206,100 @@ 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 } from "@elementor/editor-controls";
+import { SizeComponent, useBoundProp as useBoundProp4 } from "@elementor/editor-controls";
+import { stringPropTypeUtil as stringPropTypeUtil3 } from "@elementor/editor-props";
 import { Grid as Grid4 } from "@elementor/ui";
 import { __ as __29 } from "@wordpress/i18n";
 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 cssToTrackValue = (css) => {
+var parseCss = (css) => {
   if (!css) {
-    return null;
+    return EMPTY;
   }
   const match = css.match(REPEAT_FR_PATTERN);
   if (match) {
-    return { size: parseInt(match[1], 10), unit: FR };
+    const count = parseInt(match[1], 10);
+    return count >= 1 ? { kind: "fr", count } : EMPTY;
   }
-  return { size: css, unit: CUSTOM2 };
+  return { kind: "custom", raw: css };
 };
-var trackValueToCss = (trackValue) => {
-  if (!trackValue || trackValue.size === "" || trackValue.size === null) {
-    return null;
+var fromSizeInput = (v) => {
+  if (v.size === "" || Number.isNaN(v.size)) {
+    return EMPTY;
+  }
+  if (v.unit === FR) {
+    const n = Number(v.size);
+    return Number.isFinite(n) && n >= 1 ? { kind: "fr", count: Math.trunc(n) } : EMPTY;
+  }
+  return { kind: "custom", raw: String(v.size) };
+};
+var toCss = (v) => {
+  switch (v.kind) {
+    case "empty":
+      return null;
+    case "fr":
+      return `repeat(${v.count}, 1fr)`;
+    case "custom":
+      return v.raw;
+  }
+};
+var toSizeInput = (v, fallbackUnit = FR) => {
+  switch (v.kind) {
+    case "empty":
+      return { size: "", unit: fallbackUnit };
+    case "fr":
+      return { size: v.count, unit: FR };
+    case "custom":
+      return { size: v.raw, unit: CUSTOM2 };
   }
-  if (trackValue.unit === FR) {
-    return `repeat(${trackValue.size}, 1fr)`;
+};
+var toPlaceholder = (v) => {
+  switch (v.kind) {
+    case "empty":
+      return void 0;
+    case "fr":
+      return String(v.count);
+    case "custom":
+      return v.raw;
   }
-  return String(trackValue.size);
 };
-var GridTrackField = ({ cssProp, label }) => /* @__PURE__ */ React51.createElement(StylesField, { bind: cssProp, propDisplayName: label }, /* @__PURE__ */ React51.createElement(GridTrackFieldContent, { cssProp, label }));
+var unitOf = (v, fallback = FR) => {
+  if (v.kind === "fr") {
+    return FR;
+  }
+  if (v.kind === "custom") {
+    return CUSTOM2;
+  }
+  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 })));
 var GridTrackFieldContent = ({ cssProp, label }) => {
   const { value, setValue } = useStylesField(cssProp, {
     history: { propDisplayName: label }
   });
+  const { placeholder: inheritedPlaceholder } = useBoundProp4();
   const anchorRef = useRef8(null);
-  const trackValue = cssToTrackValue(value?.value ?? null);
-  const handleChange = (newValue) => {
-    const css = trackValueToCss(newValue);
-    setValue(css ? { $$type: "string", value: css } : null);
+  const local = parseCss(value?.value ?? null);
+  const inherited = parseCss(stringPropTypeUtil3.extract(inheritedPlaceholder));
+  const displayValue = local.kind !== "empty" ? toSizeInput(local) : toSizeInput(EMPTY, unitOf(inherited));
+  const placeholder = toPlaceholder(inherited);
+  const handleChange = (raw) => {
+    const next = fromSizeInput(raw);
+    if (next.kind === "empty" && local.kind !== "empty" && raw.unit !== unitOf(local)) {
+      return;
+    }
+    const css = toCss(next);
+    setValue(css === null ? null : { $$type: "string", value: css });
   };
   return /* @__PURE__ */ React51.createElement(StylesFieldLayout, { label, direction: "column" }, /* @__PURE__ */ React51.createElement("div", { ref: anchorRef }, /* @__PURE__ */ React51.createElement(
     SizeComponent,
     {
       units: UNITS,
-      value: trackValue ?? { size: NaN, unit: FR },
+      value: displayValue,
+      placeholder,
       defaultUnit: FR,
       setValue: handleChange,
       onBlur: () => {
@@ -5509,7 +5573,7 @@ import * as React89 from "react";
 import {
   ControlFormLabel as ControlFormLabel3,
   Repeater,
-  useBoundProp as useBoundProp5
+  useBoundProp as useBoundProp6
 } from "@elementor/editor-controls";
 import {
   updateElementEditorSettings,
@@ -5535,7 +5599,7 @@ var getElementByType = (elementId, type) => {
 };
 
 // src/controls-registry/element-controls/tabs-control/use-actions.ts
-import { useBoundProp as useBoundProp4 } from "@elementor/editor-controls";
+import { useBoundProp as useBoundProp5 } from "@elementor/editor-controls";
 import {
   createElements,
   duplicateElements,
@@ -5548,7 +5612,7 @@ import { __ as __63 } from "@wordpress/i18n";
 var TAB_ELEMENT_TYPE = "e-tab";
 var TAB_CONTENT_ELEMENT_TYPE = "e-tab-content";
 var useActions = () => {
-  const { value, setValue: setDefaultActiveTab } = useBoundProp4(numberPropTypeUtil3);
+  const { value, setValue: setDefaultActiveTab } = useBoundProp5(numberPropTypeUtil3);
   const defaultActiveTab = value ?? 0;
   const duplicateItem = ({
     items: items3,
@@ -5809,7 +5873,7 @@ var ItemLabel = ({ value, index }) => {
   return /* @__PURE__ */ React89.createElement(Stack14, { sx: { minHeight: 20 }, direction: "row", alignItems: "center", gap: 1.5 }, /* @__PURE__ */ React89.createElement("span", null, elementTitle), /* @__PURE__ */ React89.createElement(ItemDefaultTab, { index }));
 };
 var ItemDefaultTab = ({ index }) => {
-  const { value: defaultItem } = useBoundProp5(numberPropTypeUtil4);
+  const { value: defaultItem } = useBoundProp6(numberPropTypeUtil4);
   const isDefault = defaultItem === index;
   if (!isDefault) {
     return null;
@@ -5823,7 +5887,7 @@ var ItemContent = ({ value, index }) => {
   return /* @__PURE__ */ React89.createElement(Stack14, { p: 2, gap: 1.5 }, /* @__PURE__ */ React89.createElement(TabLabelControl, { elementId: value.id }), /* @__PURE__ */ React89.createElement(SettingsField, { bind: "default-active-tab", propDisplayName: __64("Tabs", "elementor") }, /* @__PURE__ */ React89.createElement(DefaultTabControl, { tabIndex: index })));
 };
 var DefaultTabControl = ({ tabIndex }) => {
-  const { value, setValue } = useBoundProp5(numberPropTypeUtil4);
+  const { value, setValue } = useBoundProp6(numberPropTypeUtil4);
   const isDefault = value === tabIndex;
   return /* @__PURE__ */ React89.createElement(Stack14, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 2 }, /* @__PURE__ */ React89.createElement(ControlFormLabel3, null, __64("Set as default tab", "elementor")), /* @__PURE__ */ React89.createElement(ConditionalTooltip, { showTooltip: isDefault, placement: "right" }, /* @__PURE__ */ React89.createElement(
     Switch,
@@ -5906,7 +5970,7 @@ import { controlActionsMenu as controlActionsMenu2 } from "@elementor/menus";
 
 // src/dynamics/components/background-control-dynamic-tag.tsx
 import * as React90 from "react";
-import { PropKeyProvider as PropKeyProvider4, PropProvider as PropProvider4, useBoundProp as useBoundProp7 } from "@elementor/editor-controls";
+import { PropKeyProvider as PropKeyProvider4, PropProvider as PropProvider4, useBoundProp as useBoundProp8 } from "@elementor/editor-controls";
 import {
   backgroundImageOverlayPropTypeUtil
 } from "@elementor/editor-props";
@@ -5917,7 +5981,7 @@ import { useMemo as useMemo13 } from "react";
 
 // src/dynamics/hooks/use-prop-dynamic-tags.ts
 import { useMemo as useMemo12 } from "react";
-import { useBoundProp as useBoundProp6 } from "@elementor/editor-controls";
+import { useBoundProp as useBoundProp7 } from "@elementor/editor-controls";
 
 // src/dynamics/sync/get-atomic-dynamic-tags.ts
 import { getElementorConfig } from "@elementor/editor-v1-adapters";
@@ -6004,7 +6068,7 @@ var useAllPropDynamicTags = () => {
 };
 var usePropDynamicTagsInternal = (filterByLicense2) => {
   let categories = [];
-  const { propType } = useBoundProp6();
+  const { propType } = useBoundProp7();
   if (propType) {
     const propDynamicType = getDynamicPropType(propType);
     categories = propDynamicType?.settings.categories || [];
@@ -6050,11 +6114,11 @@ var useDynamicTag = (tagName) => {
 // src/dynamics/components/background-control-dynamic-tag.tsx
 var BackgroundControlDynamicTagIcon = () => /* @__PURE__ */ React90.createElement(DatabaseIcon, { fontSize: "tiny" });
 var BackgroundControlDynamicTagLabel = ({ value }) => {
-  const context = useBoundProp7(backgroundImageOverlayPropTypeUtil);
+  const context = useBoundProp8(backgroundImageOverlayPropTypeUtil);
   return /* @__PURE__ */ React90.createElement(PropProvider4, { ...context, value: value.value }, /* @__PURE__ */ React90.createElement(PropKeyProvider4, { bind: "image" }, /* @__PURE__ */ React90.createElement(Wrapper2, { rawValue: value.value })));
 };
 var Wrapper2 = ({ rawValue }) => {
-  const { propType } = useBoundProp7();
+  const { propType } = useBoundProp8();
   const imageOverlayPropType = propType.prop_types["background-image-overlay"];
   return /* @__PURE__ */ React90.createElement(PropProvider4, { propType: imageOverlayPropType.shape.image, value: rawValue, setValue: () => void 0 }, /* @__PURE__ */ React90.createElement(PropKeyProvider4, { bind: "src" }, /* @__PURE__ */ React90.createElement(Content, { rawValue: rawValue.image })));
 };
@@ -6070,7 +6134,7 @@ import {
   ControlFormLabel as ControlFormLabel4,
   PropKeyProvider as PropKeyProvider6,
   PropProvider as PropProvider6,
-  useBoundProp as useBoundProp10
+  useBoundProp as useBoundProp11
 } from "@elementor/editor-controls";
 import { PopoverHeader as PopoverHeader2, SectionPopoverBody as SectionPopoverBody2 } from "@elementor/editor-ui";
 import { DatabaseIcon as DatabaseIcon3, SettingsIcon, XIcon } from "@elementor/icons";
@@ -6102,7 +6166,7 @@ var usePersistDynamicValue = (propKey) => {
 
 // src/dynamics/dynamic-control.tsx
 import * as React92 from "react";
-import { PropKeyProvider as PropKeyProvider5, PropProvider as PropProvider5, useBoundProp as useBoundProp8 } from "@elementor/editor-controls";
+import { PropKeyProvider as PropKeyProvider5, PropProvider as PropProvider5, useBoundProp as useBoundProp9 } from "@elementor/editor-controls";
 
 // src/dynamics/components/dynamic-conditional-control.tsx
 import * as React91 from "react";
@@ -6155,7 +6219,7 @@ var DynamicConditionalControl = ({
 
 // src/dynamics/dynamic-control.tsx
 var DynamicControl = ({ bind, children }) => {
-  const { value, setValue } = useBoundProp8(dynamicPropTypeUtil);
+  const { value, setValue } = useBoundProp9(dynamicPropTypeUtil);
   const { name = "", group = "", settings } = value ?? {};
   const dynamicTag = useDynamicTag(name);
   if (!dynamicTag) {
@@ -6189,7 +6253,7 @@ var DynamicControl = ({ bind, children }) => {
 // src/dynamics/components/dynamic-selection.tsx
 import * as React93 from "react";
 import { Fragment as Fragment14, useEffect as useEffect9, useState as useState10 } from "react";
-import { trackUpgradePromotionClick, trackViewPromotion, useBoundProp as useBoundProp9 } from "@elementor/editor-controls";
+import { trackUpgradePromotionClick, trackViewPromotion, useBoundProp as useBoundProp10 } from "@elementor/editor-controls";
 import { CtaButton, PopoverHeader, PopoverMenuList, SearchField, SectionPopoverBody } from "@elementor/editor-ui";
 import { DatabaseIcon as DatabaseIcon2 } from "@elementor/icons";
 import { Divider as Divider7, Link as Link2, Stack as Stack15, Typography as Typography5, useTheme as useTheme3 } from "@elementor/ui";
@@ -6202,8 +6266,8 @@ var DynamicSelection = ({ close: closePopover, expired = false }) => {
   const [searchValue, setSearchValue] = useState10("");
   const { groups: dynamicGroups } = getAtomicDynamicTags() || {};
   const theme = useTheme3();
-  const { value: anyValue } = useBoundProp9();
-  const { bind, value: dynamicValue, setValue } = useBoundProp9(dynamicPropTypeUtil);
+  const { value: anyValue } = useBoundProp10();
+  const { bind, value: dynamicValue, setValue } = useBoundProp10(dynamicPropTypeUtil);
   const [, updatePropValueHistory] = usePersistDynamicValue(bind);
   const isCurrentValueDynamic = !!dynamicValue;
   const options13 = useFilteredOptions(searchValue);
@@ -6355,8 +6419,8 @@ var useFilteredOptions = (searchValue) => {
 var SIZE3 = "tiny";
 var tagsWithoutTabs = ["popup"];
 var DynamicSelectionControl = ({ OriginalControl, ...props }) => {
-  const { setValue: setAnyValue, propType } = useBoundProp10();
-  const { bind, value } = useBoundProp10(dynamicPropTypeUtil);
+  const { setValue: setAnyValue, propType } = useBoundProp11();
+  const { bind, value } = useBoundProp11(dynamicPropTypeUtil);
   const { expired: readonly } = useLicenseConfig();
   const originalPropType = createTopLevelObjectType({
     schema: {
@@ -6575,11 +6639,11 @@ function getDynamicValue(name, settings) {
 
 // src/dynamics/hooks/use-prop-dynamic-action.tsx
 import * as React95 from "react";
-import { useBoundProp as useBoundProp11 } from "@elementor/editor-controls";
+import { useBoundProp as useBoundProp12 } from "@elementor/editor-controls";
 import { DatabaseIcon as DatabaseIcon4 } from "@elementor/icons";
 import { __ as __67 } from "@wordpress/i18n";
 var usePropDynamicAction = () => {
-  const { propType } = useBoundProp11();
+  const { propType } = useBoundProp12();
   const visible = !!propType && supportsDynamic(propType);
   return {
     visible,
@@ -6616,7 +6680,7 @@ var init2 = () => {
 };
 
 // src/reset-style-props.tsx
-import { useBoundProp as useBoundProp12 } from "@elementor/editor-controls";
+import { useBoundProp as useBoundProp13 } from "@elementor/editor-controls";
 import { hasVariable as hasVariable2 } from "@elementor/editor-variables";
 import { BrushBigIcon } from "@elementor/icons";
 import { controlActionsMenu as controlActionsMenu3 } from "@elementor/menus";
@@ -6676,7 +6740,7 @@ function initResetStyleProps() {
 }
 function useResetStyleValueProps() {
   const isStyle = useIsStyle();
-  const { value, resetValue, propType } = useBoundProp12();
+  const { value, resetValue, propType } = useBoundProp13();
   const hasValue = value !== null && value !== void 0;
   const hasInitial = propType.initial_value !== void 0 && propType.initial_value !== null;
   const isRequired = !!propType.settings?.required;
@@ -6704,7 +6768,7 @@ function useResetStyleValueProps() {
 
 // src/styles-inheritance/components/styles-inheritance-indicator.tsx
 import * as React101 from "react";
-import { useBoundProp as useBoundProp13 } from "@elementor/editor-controls";
+import { useBoundProp as useBoundProp14 } from "@elementor/editor-controls";
 import { isEmpty as isEmpty2 } from "@elementor/editor-props";
 import { ELEMENTS_BASE_STYLES_PROVIDER_KEY as ELEMENTS_BASE_STYLES_PROVIDER_KEY4 } from "@elementor/editor-styles-repository";
 import { __ as __72 } from "@wordpress/i18n";
@@ -7070,7 +7134,7 @@ function TooltipOrInfotip({
 var StylesInheritanceIndicator = ({
   customContext
 }) => {
-  const context = useBoundProp13();
+  const context = useBoundProp14();
   const { path, propType } = customContext || context;
   const inheritanceChain = useStylesInheritanceChain(path);
   if (!path || !inheritanceChain.length) {