@elementor/editor-editing-panel 1.42.0 → 1.43.0

package/dist/index.mjs

@@ -8,16 +8,15 @@ var { registerControlReplacement, getControlReplacements } = createControlReplac
 // src/components/css-classes/css-class-selector.tsx
 import * as React8 from "react";
 import { useRef, useState as useState4 } from "react";
-import { getElementSetting as getElementSetting2, updateElementSettings as updateElementSettings2, useElementSetting } from "@elementor/editor-elements";
-import { classesPropTypeUtil as classesPropTypeUtil2 } from "@elementor/editor-props";
+import { useElementSetting } from "@elementor/editor-elements";
 import {
   isElementsStylesProvider as isElementsStylesProvider2,
   stylesRepository as stylesRepository4,
-  useGetStylesRepositoryCreateAction,
   useProviders,
+  useUserStylesCapability as useUserStylesCapability4,
   validateStyleLabel as validateStyleLabel2
 } from "@elementor/editor-styles-repository";
-import { WarningInfotip } from "@elementor/editor-ui";
+import { InfoAlert, WarningInfotip } from "@elementor/editor-ui";
 import { ColorSwatchIcon, MapPinIcon } from "@elementor/icons";
 import { createLocation } from "@elementor/locations";
 import { Box as Box2, Chip as Chip3, FormLabel, Link, Stack as Stack3, Typography as Typography3 } from "@elementor/ui";
@@ -441,7 +440,7 @@ var StyledGroupItems = styled("ul")`
 // src/components/css-classes/css-class-item.tsx
 import * as React7 from "react";
 import { useState as useState3 } from "react";
-import { stylesRepository as stylesRepository3, validateStyleLabel } from "@elementor/editor-styles-repository";
+import { stylesRepository as stylesRepository3, useUserStylesCapability as useUserStylesCapability3, validateStyleLabel } from "@elementor/editor-styles-repository";
 import { EditableField, EllipsisWithTooltip, useEditable } from "@elementor/editor-ui";
 import { DotsVerticalIcon } from "@elementor/icons";
 import {
@@ -507,12 +506,20 @@ import { useCallback, useMemo as useMemo2 } from "react";
 import { setDocumentModifiedStatus } from "@elementor/editor-documents";
 import { getElementLabel, getElementSetting, updateElementSettings } from "@elementor/editor-elements";
 import { classesPropTypeUtil } from "@elementor/editor-props";
+import { useGetStylesRepositoryCreateAction } from "@elementor/editor-styles-repository";
 import { isExperimentActive, undoable } from "@elementor/editor-v1-adapters";
 import { __ } from "@wordpress/i18n";
+
+// src/sync/experiments-flags.ts
+var EXPERIMENTAL_FEATURES = {
+  V_3_30: "e_v_3_30"
+};
+
+// src/components/css-classes/use-apply-and-unapply-class.ts
 function useApplyClass() {
   const { id: activeId, setId: setActiveId } = useStyle();
   const { element } = useElement();
-  const isVersion330Active = isExperimentActive("e_v_3_30");
+  const isVersion330Active = isExperimentActive(EXPERIMENTAL_FEATURES.V_3_30);
   const applyClass = useApply();
   const unapplyClass = useUnapply();
   const undoableApply = useMemo2(() => {
@@ -547,7 +554,7 @@ function useApplyClass() {
 function useUnapplyClass() {
   const { id: activeId, setId: setActiveId } = useStyle();
   const { element } = useElement();
-  const isVersion330Active = isExperimentActive("e_v_3_30");
+  const isVersion330Active = isExperimentActive(EXPERIMENTAL_FEATURES.V_3_30);
   const applyClass = useApply();
   const unapplyClass = useUnapply();
   const undoableUnapply = useMemo2(() => {
@@ -579,10 +586,58 @@ function useUnapplyClass() {
   );
   return isVersion330Active ? undoableUnapply : unapplyWithoutHistory;
 }
+function useCreateAndApplyClass() {
+  const { id: activeId, setId: setActiveId } = useStyle();
+  const isVersion330Active = isExperimentActive(EXPERIMENTAL_FEATURES.V_3_30);
+  const [provider, createAction] = useGetStylesRepositoryCreateAction() ?? [null, null];
+  const deleteAction = provider?.actions.delete;
+  const applyClass = useApply();
+  const unapplyClass = useUnapply();
+  const undoableCreateAndApply = useMemo2(() => {
+    if (!provider || !createAction) {
+      return;
+    }
+    return undoable(
+      {
+        do: ({ classLabel }) => {
+          const prevActiveId = activeId;
+          const createdId = createAction(classLabel);
+          applyClass(createdId);
+          return { prevActiveId, createdId };
+        },
+        undo: (_, { prevActiveId, createdId }) => {
+          unapplyClass(createdId);
+          deleteAction?.(createdId);
+          setActiveId(prevActiveId);
+        }
+      },
+      {
+        title: __("Class", "elementor"),
+        subtitle: ({ classLabel }) => {
+          return __(`%s created`, "elementor").replace("%s", classLabel);
+        }
+      }
+    );
+  }, [activeId, applyClass, createAction, deleteAction, provider, setActiveId, unapplyClass]);
+  const createAndApplyWithoutHistory = useCallback(
+    ({ classLabel }) => {
+      if (!createAction) {
+        return;
+      }
+      const createdId = createAction(classLabel);
+      applyClass(createdId);
+    },
+    [applyClass, createAction]
+  );
+  if (!provider || !undoableCreateAndApply) {
+    return [null, null];
+  }
+  return isVersion330Active ? [provider, undoableCreateAndApply] : [provider, createAndApplyWithoutHistory];
+}
 function useApply() {
   const { element } = useElement();
   const { setId: setActiveId } = useStyle();
-  const { setClasses, getAppliedClasses } = useSetClasses();
+  const { setClasses, getAppliedClasses } = useClasses();
   return useCallback(
     (classIDToApply) => {
       const appliedClasses = getAppliedClasses();
@@ -601,7 +656,7 @@ function useApply() {
 function useUnapply() {
   const { element } = useElement();
   const { id: activeId, setId: setActiveId } = useStyle();
-  const { setClasses, getAppliedClasses } = useSetClasses();
+  const { setClasses, getAppliedClasses } = useClasses();
   return useCallback(
     (classIDToUnapply) => {
       const appliedClasses = getAppliedClasses();
@@ -619,10 +674,10 @@ function useUnapply() {
     [activeId, element.id, getAppliedClasses, setActiveId, setClasses]
   );
 }
-function useSetClasses() {
+function useClasses() {
   const { element } = useElement();
   const currentClassesProp = useClassesProp();
-  const isVersion330Active = isExperimentActive("e_v_3_30");
+  const isVersion330Active = isExperimentActive(EXPERIMENTAL_FEATURES.V_3_30);
   return useMemo2(() => {
     const setClasses = (ids) => {
       updateElementSettings({
@@ -635,10 +690,7 @@ function useSetClasses() {
       }
     };
     const getAppliedClasses = () => getElementSetting(element.id, currentClassesProp)?.value || [];
-    return {
-      setClasses,
-      getAppliedClasses
-    };
+    return { setClasses, getAppliedClasses };
   }, [currentClassesProp, element.id, isVersion330Active]);
 }
 
@@ -722,10 +774,10 @@ function StateMenuItem({ state, closeMenu, ...props }) {
   const { state: activeState } = meta;
   const { userCan } = useUserStylesCapability2();
   const modifiedStates = useModifiedStates(styleId);
-  const isUpdateAllowed = userCan(provider ?? "").updateProps;
+  const isUpdateAllowed = !state || userCan(provider ?? "").updateProps;
   const indicatorVariant = !provider || isElementsStylesProvider(provider) ? "local" : "global";
   const isStyled = modifiedStates[state ?? "normal"] ?? false;
-  const disabled = isUpdateAllowed ? false : !isStyled;
+  const disabled = !isUpdateAllowed && !isStyled;
   const isActive = styleId === activeId;
   const isSelected = state === activeState && isActive;
   return /* @__PURE__ */ React6.createElement(
@@ -747,7 +799,7 @@ function StateMenuItem({ state, closeMenu, ...props }) {
       MenuItemInfotip,
       {
         showInfoTip: disabled,
-        content: __2("With your role as an editor, you can only use existing states.", "elementor")
+        content: __2("With your current role, you can only use existing states.", "elementor")
       },
       /* @__PURE__ */ React6.createElement(Stack, { gap: 0.75, direction: "row", alignItems: "center" }, isStyled && /* @__PURE__ */ React6.createElement(StyleIndicator, { "aria-label": __2("Has style", "elementor"), variant: indicatorVariant }), state ?? "normal")
     )
@@ -789,7 +841,7 @@ function RenameClassMenuItem({ closeMenu }) {
       {
         showInfoTip: !isAllowed,
         content: __2(
-          "With your role as an editor, you can use existing classes but can\u2019t modify them.",
+          "With your current role, you can use existing classes but can\u2019t modify them.",
           "elementor"
         )
       },
@@ -807,6 +859,7 @@ function CssClassItem(props) {
   const popupState = usePopupState({ variant: "popover" });
   const [chipRef, setChipRef] = useState3(null);
   const { onDelete, ...chipGroupProps } = chipProps;
+  const { userCan } = useUserStylesCapability3();
   const {
     ref,
     isEditing,
@@ -821,7 +874,7 @@ function CssClassItem(props) {
   });
   const color = error ? "error" : colorProp;
   const providerActions = provider ? stylesRepository3.getProviderByKey(provider)?.actions : null;
-  const allowRename = Boolean(providerActions?.update);
+  const allowRename = Boolean(providerActions?.update) && userCan(provider ?? "")?.update;
   const isShowingState = isActive && meta.state;
   return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(
     UnstableChipGroup,
@@ -908,15 +961,16 @@ var EMPTY_OPTION = {
 var { Slot: ClassSelectorActionsSlot, inject: injectIntoClassSelectorActions } = createLocation();
 function CssClassSelector() {
   const options12 = useOptions();
-  const { value: appliedIds, pushValue: pushAppliedId } = useAppliedClassesIds();
   const { id: activeId, setId: setActiveId } = useStyle();
   const autocompleteRef = useRef(null);
   const [renameError, setRenameError] = useState4(null);
   const handleSelect = useHandleSelect();
-  const { create, validate, entityName } = useCreateAction({ pushAppliedId, setActiveId });
-  const applied = useAppliedOptions(options12, appliedIds);
-  const active = applied.find((option) => option.value === activeId) ?? EMPTY_OPTION;
-  const showPlaceholder = applied.every(({ fixed }) => fixed);
+  const { create, validate, entityName } = useCreateAction();
+  const appliedOptions = useAppliedOptions(options12);
+  const active = appliedOptions.find((option) => option.value === activeId) ?? EMPTY_OPTION;
+  const showPlaceholder = appliedOptions.every(({ fixed }) => fixed);
+  const { userCan } = useUserStylesCapability4();
+  const canEdit = active.provider ? userCan(active.provider).updateProps : true;
   return /* @__PURE__ */ React8.createElement(Stack3, { p: 2 }, /* @__PURE__ */ React8.createElement(Stack3, { direction: "row", gap: 1, alignItems: "center", justifyContent: "space-between" }, /* @__PURE__ */ React8.createElement(FormLabel, { htmlFor: ID, size: "small" }, __4("Classes", "elementor")), /* @__PURE__ */ React8.createElement(Stack3, { direction: "row", gap: 1 }, /* @__PURE__ */ React8.createElement(ClassSelectorActionsSlot, null))), /* @__PURE__ */ React8.createElement(
     WarningInfotip,
     {
@@ -934,7 +988,7 @@ function CssClassSelector() {
         size: "tiny",
         placeholder: showPlaceholder ? __4("Type class name", "elementor") : void 0,
         options: options12,
-        selected: applied,
+        selected: appliedOptions,
         entityName,
         onSelect: handleSelect,
         onCreate: create ?? void 0,
@@ -971,6 +1025,15 @@ function CssClassSelector() {
         })
       }
     )
+  ), !canEdit && /* @__PURE__ */ React8.createElement(
+    InfoAlert,
+    {
+      content: __4(
+        "With your current role, you can use existing classes but can\u2019t modify them.",
+        "elementor"
+      ),
+      sx: { mt: 1 }
+    }
   ));
 }
 var EmptyState = ({ searchValue, onClear }) => /* @__PURE__ */ React8.createElement(Box2, { sx: { py: 4 } }, /* @__PURE__ */ React8.createElement(
@@ -1018,18 +1081,13 @@ function useOptions() {
     });
   });
 }
-function useCreateAction({
-  pushAppliedId,
-  setActiveId
-}) {
-  const [provider, createAction] = useGetStylesRepositoryCreateAction() ?? [null, null];
+function useCreateAction() {
+  const [provider, createAction] = useCreateAndApplyClass();
   if (!provider || !createAction) {
     return {};
   }
-  const create = (newClassLabel) => {
-    const createdId = createAction(newClassLabel);
-    pushAppliedId(createdId);
-    setActiveId(createdId);
+  const create = (classLabel) => {
+    createAction({ classLabel });
   };
   const validate = (newClassLabel, event) => {
     if (hasReachedLimit(provider)) {
@@ -1049,36 +1107,18 @@ function useCreateAction({
 function hasReachedLimit(provider) {
   return provider.actions.all().length >= provider.limit;
 }
-function useAppliedOptions(options12, appliedIds) {
-  const applied = options12.filter((option) => option.value && appliedIds.includes(option.value));
-  const hasElementsProviderStyleApplied = applied.some(
+function useAppliedOptions(options12) {
+  const { element } = useElement();
+  const currentClassesProp = useClassesProp();
+  const appliedIds = useElementSetting(element.id, currentClassesProp)?.value || [];
+  const appliedOptions = options12.filter((option) => option.value && appliedIds.includes(option.value));
+  const hasElementsProviderStyleApplied = appliedOptions.some(
     (option) => option.provider && isElementsStylesProvider2(option.provider)
   );
   if (!hasElementsProviderStyleApplied) {
-    applied.unshift(EMPTY_OPTION);
+    appliedOptions.unshift(EMPTY_OPTION);
   }
-  return applied;
-}
-function useAppliedClassesIds() {
-  const { element } = useElement();
-  const currentClassesProp = useClassesProp();
-  const value = useElementSetting(element.id, currentClassesProp)?.value || [];
-  const setValue = (ids) => {
-    updateElementSettings2({
-      id: element.id,
-      props: {
-        [currentClassesProp]: classesPropTypeUtil2.create(ids)
-      }
-    });
-  };
-  const pushValue = (id) => {
-    const ids = getElementSetting2(element.id, currentClassesProp)?.value || [];
-    setValue([...ids, id]);
-  };
-  return {
-    value,
-    pushValue
-  };
+  return appliedOptions;
 }
 function useHandleSelect() {
   const apply = useApplyClass();
@@ -1252,13 +1292,6 @@ var useDefaultPanelSettings = () => {
 import { useState as useState6 } from "react";
 import { isExperimentActive as isExperimentActive2 } from "@elementor/editor-v1-adapters";
 import { getSessionStorageItem, setSessionStorageItem } from "@elementor/session";
-
-// src/sync/experiments-flags.ts
-var EXPERIMENTAL_FEATURES = {
-  V_3_30: "e_v_3_30"
-};
-
-// src/hooks/use-state-by-element.ts
 var useStateByElement = (key, initialValue) => {
   const { element } = useElement();
   const isFeatureActive = isExperimentActive2(EXPERIMENTAL_FEATURES.V_3_30);
@@ -1344,7 +1377,7 @@ var getGridLayout = (layout) => ({
 // src/controls-registry/settings-field.tsx
 import * as React15 from "react";
 import { PropKeyProvider, PropProvider } from "@elementor/editor-controls";
-import { updateElementSettings as updateElementSettings3, useElementSetting as useElementSetting2 } from "@elementor/editor-elements";
+import { updateElementSettings as updateElementSettings2, useElementSetting as useElementSetting2 } from "@elementor/editor-elements";
 
 // src/controls-registry/create-top-level-object-type.ts
 var createTopLevelOjectType = ({ schema }) => {
@@ -1366,7 +1399,7 @@ var SettingsField = ({ bind, children }) => {
   const value = { [bind]: settingsValue };
   const propType = createTopLevelOjectType({ schema: elementType.propsSchema });
   const setValue = (newValue) => {
-    updateElementSettings3({
+    updateElementSettings2({
       id: element.id,
       props: { ...newValue }
     });
@@ -1473,7 +1506,7 @@ import { __ as __52 } from "@wordpress/i18n";
 import * as React19 from "react";
 import { createContext as createContext7, useContext as useContext7 } from "react";
 import { getWidgetsCache, useElementSetting as useElementSetting3 } from "@elementor/editor-elements";
-import { classesPropTypeUtil as classesPropTypeUtil3 } from "@elementor/editor-props";
+import { classesPropTypeUtil as classesPropTypeUtil2 } from "@elementor/editor-props";
 import { getBreakpointsTree } from "@elementor/editor-responsive";
 import { getStylesSchema } from "@elementor/editor-styles";
 import { stylesRepository as stylesRepository5 } from "@elementor/editor-styles-repository";
@@ -1741,7 +1774,7 @@ var useAppliedStyles = () => {
   const baseStyles = useBaseStyles();
   useStylesRerender();
   const classesProp = useElementSetting3(element.id, currentClassesProp);
-  const appliedStyles = classesPropTypeUtil3.extract(classesProp) ?? [];
+  const appliedStyles = classesPropTypeUtil2.extract(classesProp) ?? [];
   return stylesRepository5.all().filter((style) => [...baseStyles, ...appliedStyles].includes(style.id));
 };
 var useBaseStyles = () => {
@@ -1758,7 +1791,7 @@ function useActiveStyleDefId(classProp) {
     "active-style-id",
     null
   );
-  const appliedClassesIds = useAppliedClassesIds2(classProp)?.value || [];
+  const appliedClassesIds = useAppliedClassesIds(classProp)?.value || [];
   const fallback = useFirstAppliedClass(appliedClassesIds);
   const activeAndAppliedClassId = useActiveAndAppliedClassId(activeStyledDefId, appliedClassesIds);
   return [activeAndAppliedClassId || fallback?.id || null, setActiveStyledDefId];
@@ -1768,7 +1801,7 @@ function useFirstAppliedClass(appliedClassesIds) {
   const stylesDefs = getElementStyles(element.id) ?? {};
   return Object.values(stylesDefs).find((styleDef) => appliedClassesIds.includes(styleDef.id));
 }
-function useAppliedClassesIds2(classProp) {
+function useAppliedClassesIds(classProp) {
   const { element } = useElement();
   return useElementSetting4(element.id, classProp);
 }