@elementor/editor-editing-panel 4.1.0-838 → 4.1.0-beta1

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;
   }
@@ -2570,7 +2582,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 {
@@ -2847,7 +2859,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();