@elementor/editor-editing-panel 3.33.0-220 → 3.33.0-222

package/dist/index.js

@@ -584,6 +584,7 @@ var StyledGroupItems = (0, import_ui2.styled)("ul")`
 // src/components/css-classes/css-class-item.tsx
 var React9 = __toESM(require("react"));
 var import_react9 = require("react");
+var import_editor_styles = require("@elementor/editor-styles");
 var import_editor_styles_repository6 = require("@elementor/editor-styles-repository");
 var import_editor_ui2 = require("@elementor/editor-ui");
 var import_icons = require("@elementor/icons");
@@ -836,10 +837,10 @@ function useClasses() {
 
 // src/components/css-classes/css-class-menu.tsx
 var STATES = [
-  { key: "normal", value: null },
-  { key: "hover", value: "hover" },
-  { key: "focus", value: "focus" },
-  { key: "active", value: "active" }
+  { key: "normal", value: null, label: (0, import_i18n3.__)("normal", "elementor") },
+  { key: "hover", value: "hover", label: (0, import_i18n3.__)("hover", "elementor") },
+  { key: "focus", value: "focus", label: (0, import_i18n3.__)("focus", "elementor") },
+  { key: "active", value: "active", label: (0, import_i18n3.__)("active", "elementor") }
 ];
 function CssClassMenu({ popupState, anchorEl, fixed }) {
   const { provider } = useCssClass();
@@ -868,10 +869,55 @@ function CssClassMenu({ popupState, anchorEl, fixed }) {
     getMenuItemsByProvider({ provider, closeMenu: popupState.close, fixed }),
     /* @__PURE__ */ React8.createElement(import_ui5.MenuSubheader, { sx: { typography: "caption", color: "text.secondary", pb: 0.5, pt: 1 } }, (0, import_i18n3.__)("States", "elementor")),
     STATES.map((state) => {
-      return /* @__PURE__ */ React8.createElement(StateMenuItem, { key: state.key, state: state.value, closeMenu: popupState.close });
-    })
+      return /* @__PURE__ */ React8.createElement(
+        StateMenuItem,
+        {
+          key: state.key,
+          state: state.value,
+          label: state.label,
+          closeMenu: popupState.close
+        }
+      );
+    }),
+    /* @__PURE__ */ React8.createElement(ClassStatesMenu, { closeMenu: popupState.close })
   );
 }
+function ClassStatesMenu({ closeMenu }) {
+  const { elementStates, elementTitle } = useElementStates();
+  if (!elementStates.length) {
+    return null;
+  }
+  const customTitle = (0, import_i18n3.__)("%s States", "elementor").replace("%s", elementTitle);
+  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(import_ui5.Divider, null), /* @__PURE__ */ React8.createElement(import_ui5.MenuSubheader, { sx: { typography: "caption", color: "text.secondary", pb: 0.5, pt: 1 } }, customTitle), elementStates.map((state) => {
+    return /* @__PURE__ */ React8.createElement(
+      StateMenuItem,
+      {
+        key: state.key,
+        state: state.value,
+        label: state.label,
+        closeMenu
+      }
+    );
+  }));
+}
+var CLASS_STATES_MAP = {
+  selected: {
+    label: (0, import_i18n3.__)("selected", "elementor")
+  }
+};
+function useElementStates() {
+  const { elementType } = useElement();
+  const { styleStates = [] } = elementType;
+  const elementStates = styleStates.map(({ value, name }) => ({
+    key: value,
+    value,
+    label: CLASS_STATES_MAP[value]?.label ?? name
+  }));
+  return {
+    elementStates,
+    elementTitle: elementType.title
+  };
+}
 function useModifiedStates(styleId) {
   const { meta } = useStyle();
   const styleDef = import_editor_styles_repository5.stylesRepository.all().find((style) => style.id === styleId);
@@ -910,7 +956,7 @@ function getMenuItemsByProvider({
   }
   return actions;
 }
-function StateMenuItem({ state, closeMenu, ...props }) {
+function StateMenuItem({ state, label, closeMenu, ...props }) {
   const { id: styleId, provider } = useCssClass();
   const { id: activeId, setId: setActiveId, setMetaState: setActiveMetaState, meta } = useStyle();
   const { state: activeState } = meta;
@@ -948,7 +994,7 @@ function StateMenuItem({ state, closeMenu, ...props }) {
           "aria-label": (0, import_i18n3.__)("Has style", "elementor"),
           getColor: getTempStylesProviderThemeColor(provider ?? "")
         }
-      ), state ?? "normal")
+      ), label)
     )
   );
 }
@@ -1002,6 +1048,7 @@ var CHIP_SIZE = "tiny";
 function CssClassItem(props) {
   const { chipProps, icon, color: colorProp, fixed, ...classProps } = props;
   const { id, provider, label, isActive, onClickActive, renameLabel, setError } = classProps;
+  const { elementStates } = useElementStates();
   const { meta, setMetaState } = useStyle();
   const popupState = (0, import_ui6.usePopupState)({ variant: "popover" });
   const [chipRef, setChipRef] = (0, import_react9.useState)(null);
@@ -1027,6 +1074,12 @@ function CssClassItem(props) {
   const providerActions = provider ? import_editor_styles_repository6.stylesRepository.getProviderByKey(provider)?.actions : null;
   const allowRename = Boolean(providerActions?.update) && userCan(provider ?? "")?.update;
   const isShowingState = isActive && meta.state;
+  const stateLabel = (0, import_react9.useMemo)(() => {
+    if ((0, import_editor_styles.isClassState)(meta.state)) {
+      return elementStates.find((state) => state.value === meta.state)?.label;
+    }
+    return meta.state;
+  }, [meta.state, elementStates]);
   (0, import_react9.useEffect)(() => {
     if (convertedFromLocalId && id === convertedFromLocalId) {
       clearConvertedFromLocalId();
@@ -1080,7 +1133,7 @@ function CssClassItem(props) {
       {
         icon: isShowingState ? void 0 : /* @__PURE__ */ React9.createElement(import_icons.DotsVerticalIcon, { fontSize: "tiny" }),
         size: CHIP_SIZE,
-        label: isShowingState ? /* @__PURE__ */ React9.createElement(import_ui6.Stack, { direction: "row", gap: 0.5, alignItems: "center" }, /* @__PURE__ */ React9.createElement(import_ui6.Typography, { variant: "inherit" }, meta.state), /* @__PURE__ */ React9.createElement(import_icons.DotsVerticalIcon, { fontSize: "tiny" })) : void 0,
+        label: isShowingState ? /* @__PURE__ */ React9.createElement(import_ui6.Stack, { direction: "row", gap: 0.5, alignItems: "center" }, /* @__PURE__ */ React9.createElement(import_ui6.Typography, { variant: "inherit" }, stateLabel), /* @__PURE__ */ React9.createElement(import_icons.DotsVerticalIcon, { fontSize: "tiny" })) : void 0,
         variant: "filled",
         shape: "rounded",
         color,
@@ -1295,13 +1348,13 @@ function useHandleSelect() {
 // src/components/custom-css-indicator.tsx
 var React11 = __toESM(require("react"));
 var import_editor_responsive = require("@elementor/editor-responsive");
-var import_editor_styles3 = require("@elementor/editor-styles");
+var import_editor_styles4 = require("@elementor/editor-styles");
 
 // src/hooks/use-custom-css.ts
 var import_react13 = require("react");
 var import_editor_elements6 = require("@elementor/editor-elements");
 var import_editor_props3 = require("@elementor/editor-props");
-var import_editor_styles2 = require("@elementor/editor-styles");
+var import_editor_styles3 = require("@elementor/editor-styles");
 var import_editor_styles_repository10 = require("@elementor/editor-styles-repository");
 var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
 var import_utils2 = require("@elementor/utils");
@@ -1309,7 +1362,7 @@ var import_utils2 = require("@elementor/utils");
 // src/hooks/use-styles-fields.ts
 var import_react12 = require("react");
 var import_editor_elements5 = require("@elementor/editor-elements");
-var import_editor_styles = require("@elementor/editor-styles");
+var import_editor_styles2 = require("@elementor/editor-styles");
 var import_editor_styles_repository8 = require("@elementor/editor-styles-repository");
 var import_editor_styles_repository9 = require("@elementor/editor-styles-repository");
 var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
@@ -1350,7 +1403,7 @@ function getProps({ styleId, elementId, provider, meta, propNames }) {
   if (!style) {
     throw new StyleNotFoundUnderProviderError({ context: { styleId, providerKey: provider.getKey() } });
   }
-  const variant = (0, import_editor_styles.getVariantByMeta)(style, meta);
+  const variant = (0, import_editor_styles2.getVariantByMeta)(style, meta);
   return Object.fromEntries(
     propNames.map((key) => [key, variant?.props[key] ?? null])
   );
@@ -1419,7 +1472,7 @@ function getCurrentProps(style, meta) {
   if (!style) {
     return {};
   }
-  const variant = (0, import_editor_styles.getVariantByMeta)(style, meta);
+  const variant = (0, import_editor_styles2.getVariantByMeta)(style, meta);
   const props = variant?.props ?? {};
   return structuredClone(props);
 }
@@ -1478,7 +1531,7 @@ var useCustomCss = () => {
   const currentStyleId = styleId ? styleId : null;
   const currentProvider = styleId ? provider : null;
   useStylesRerender();
-  const variant = style ? (0, import_editor_styles2.getVariantByMeta)(style, meta) : null;
+  const variant = style ? (0, import_editor_styles3.getVariantByMeta)(style, meta) : null;
   const setCustomCss = (raw, { history: { propDisplayName } }) => {
     const newValue = { raw: (0, import_utils2.encodeString)(sanitize(raw)) };
     undoableUpdateStyle({
@@ -1564,7 +1617,7 @@ function getCurrentCustomCss(style, meta) {
   if (!style) {
     return null;
   }
-  const variant = (0, import_editor_styles2.getVariantByMeta)(style, meta);
+  const variant = (0, import_editor_styles3.getVariantByMeta)(style, meta);
   return variant?.custom_css ?? null;
 }
 function sanitize(raw) {
@@ -1609,7 +1662,7 @@ var hasInheritedCustomCss = (style, meta) => {
       return void 0;
     }
     const hasHere = Boolean(
-      (0, import_editor_styles3.getVariantByMeta)(style, {
+      (0, import_editor_styles4.getVariantByMeta)(style, {
         breakpoint: node.id,
         state
       })?.custom_css?.raw?.trim()
@@ -1757,7 +1810,7 @@ var import_react17 = require("react");
 var import_editor_elements7 = require("@elementor/editor-elements");
 var import_editor_props6 = require("@elementor/editor-props");
 var import_editor_responsive2 = require("@elementor/editor-responsive");
-var import_editor_styles4 = require("@elementor/editor-styles");
+var import_editor_styles5 = require("@elementor/editor-styles");
 var import_editor_styles_repository11 = require("@elementor/editor-styles-repository");
 
 // src/styles-inheritance/create-styles-inheritance.ts
@@ -2006,7 +2059,7 @@ function useStylesInheritanceChain(path) {
   if (!context) {
     throw new Error("useStylesInheritanceChain must be used within a StyleInheritanceProvider");
   }
-  const schema = (0, import_editor_styles4.getStylesSchema)();
+  const schema = (0, import_editor_styles5.getStylesSchema)();
   const topLevelPropType = schema?.[path[0]];
   const snapshot = useStylesInheritanceSnapshot();
   if (!snapshot) {
@@ -2088,7 +2141,7 @@ var import_i18n12 = require("@wordpress/i18n");
 // src/controls-registry/styles-field.tsx
 var React23 = __toESM(require("react"));
 var import_editor_controls3 = require("@elementor/editor-controls");
-var import_editor_styles5 = require("@elementor/editor-styles");
+var import_editor_styles7 = require("@elementor/editor-styles");
 
 // src/hooks/use-styles-field.ts
 function useStylesField(propName, meta) {
@@ -2125,6 +2178,7 @@ function useDirection() {
 
 // src/styles-inheritance/hooks/use-normalized-inheritance-chain-items.tsx
 var import_react19 = require("react");
+var import_editor_styles6 = require("@elementor/editor-styles");
 var import_editor_styles_repository12 = require("@elementor/editor-styles-repository");
 var import_i18n8 = require("@wordpress/i18n");
 var MAXIMUM_ITEMS = 2;
@@ -2152,7 +2206,7 @@ var normalizeInheritanceItem = async (item, index, bind, resolve) => {
     },
     style: { label, id }
   } = item;
-  const displayLabel = `${label}${state ? ":" + state : ""}`;
+  const displayLabel = getLabel({ label, state });
   return {
     id: id ? id + (state ?? "") : index,
     provider: item.provider || "",
@@ -2161,6 +2215,15 @@ var normalizeInheritanceItem = async (item, index, bind, resolve) => {
     value: await getTransformedValue(item, bind, resolve)
   };
 };
+function getLabel({ label, state }) {
+  if ((0, import_editor_styles6.isClassState)(state)) {
+    return `${label}.${state}`;
+  }
+  if ((0, import_editor_styles6.isPseudoState)(state)) {
+    return `${label}:${state}`;
+  }
+  return label;
+}
 var getTransformedValue = async (item, bind, resolve) => {
   try {
     const result = await resolve({
@@ -2465,7 +2528,7 @@ var Indicator = ({ inheritanceChain, path, propType, isDisabled }) => {
     return null;
   }
   const isFinalValue = currentItem === actualStyle;
-  const label = getLabel({ isFinalValue, hasValue });
+  const label = getLabel2({ isFinalValue, hasValue });
   const styleIndicatorProps = {
     getColor: isFinalValue && currentStyleProvider ? getStylesProviderThemeColor(currentStyleProvider.getKey()) : void 0,
     isOverridden: hasValue && !isFinalValue ? true : void 0
@@ -2482,7 +2545,7 @@ var Indicator = ({ inheritanceChain, path, propType, isDisabled }) => {
     /* @__PURE__ */ React22.createElement(StyleIndicator, { ...styleIndicatorProps })
   );
 };
-var getLabel = ({ isFinalValue, hasValue }) => {
+var getLabel2 = ({ isFinalValue, hasValue }) => {
   if (isFinalValue) {
     return (0, import_i18n11.__)("This is the final value", "elementor");
   }
@@ -2524,7 +2587,7 @@ var createTopLevelObjectType = ({ schema }) => {
 
 // src/controls-registry/styles-field.tsx
 var StylesField = ({ bind, propDisplayName, children }) => {
-  const stylesSchema = (0, import_editor_styles5.getStylesSchema)();
+  const stylesSchema = (0, import_editor_styles7.getStylesSchema)();
   const stylesInheritanceChain = useStylesInheritanceChain([bind]);
   const { value, canEdit, ...fields } = useStylesField(bind, { history: { propDisplayName } });
   const propType = createTopLevelObjectType({ schema: stylesSchema });
@@ -2843,14 +2906,14 @@ var import_i18n20 = require("@wordpress/i18n");
 // src/utils/get-recently-used-styles.ts
 var import_editor_canvas3 = require("@elementor/editor-canvas");
 var import_editor_elements9 = require("@elementor/editor-elements");
-var import_editor_styles6 = require("@elementor/editor-styles");
+var import_editor_styles8 = require("@elementor/editor-styles");
 var getRecentlyUsedList = async (elementId) => {
   if (!elementId) {
     return [];
   }
   const resolver = (0, import_editor_canvas3.createPropsResolver)({
     transformers: import_editor_canvas3.styleTransformersRegistry,
-    schema: (0, import_editor_styles6.getStylesSchema)()
+    schema: (0, import_editor_styles8.getStylesSchema)()
   });
   const styles = (0, import_editor_elements9.getElementStyles)(elementId) ?? {};
   const styleKeys = Object.keys(styles ?? {});
@@ -2859,7 +2922,7 @@ var getRecentlyUsedList = async (elementId) => {
     variants.flat().map(async (variant) => {
       const result = await resolver({
         props: variant.props ?? {},
-        schema: (0, import_editor_styles6.getStylesSchema)()
+        schema: (0, import_editor_styles8.getStylesSchema)()
       });
       return Object.entries(result).filter(([, value]) => value !== null).map(([key]) => key);
     })